Si tienes algún problema para registrarte en el foro o para escribir mensajes ponte en contacto con nosotros a través del formulario de contacto de aprenderaprogramar.com
Mostrar Mensajes
Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web - Aprenprenderaprogramar.com">
<meta name="keywords" content="diseño web CSS con varias columnas con float "><meta charset="utf-8">
<style>
*{font-family: arial;}
body{
width: 900px;
border-style: dotted;
border-width: 1px;
}
div{
text-align: center;
}
#cabecera{
background-color: #ADD8E6;
height: 30px;
}
#col_izq{
width: 25%;
background-color: yellow;
float: left;
height: 150px;
}
#cajas{
float:left;
width: 50%;
background-color: #90EE90;
}
#caja1,#caja2{
float: left;
height:75px;
}
#col_der{
width: 25%;
height: 150px;
background-color: yellow;
float: left;
}
#caja_contacto{
width: 50%;
height: 50px;
background-color: #DDA0DD;
float: left;
clear: both;
}
#footer{
width: 50%;
height: 50px;
background-color: pink;
float: right;
}
.limpiador{
clear: both;
border-style: none;
}
</style>
<title>Diseño web con CSS con varias columnas con float.</title>
</head>
<body>
<!--cabecera de la página-->
<div id="cabecera">Bienvenidos a aprenderaprogramar.com</div>
<!--columna izquierda-->
<div id="col_izq">
Menú<br/>
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>
</div>
<div id='cajas'>
<!--1ª caja central (arriba)-->
<div id="caja1">Conoce las últimas novedades del lenguaje Javascript.</div>
<!--2ª caja central (abajo)-->
<div id="caja2">Articulo sobre Gimp, un programa sobre software libre para el diseño gráfico.</div>
</div>
<!--columna derecha-->
<div id="col_der">Espacio reservado para publicidad</div>
<!--caja izquierda-->
<div id="caja_contacto">Contacta con nosotros</div>
<!--caja derecha-->
<div id="footer">Aviso legal</div>
<div class="limpiador"></div>
</body>
</html>
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
window.onload = function () {
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}
function ejecutarEjemplo () {
var nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre', 'width=300, height=300, resizable=true, menubar=yes');
nuevaVentana.focus();
rellenaDatos(nuevaVentana);
}
function rellenaDatos(nuevaVentana){
if(nuevaVentana.closed){
var ventana = "cerrado"
}else{ ventana = 'abierto'
}
var msg = 'La ventana que hemos '+ventana+' tienes las siguientes caracteristicas<br/>'
msg += 'Las medidas del viewport son '+nuevaVentana.innerHeight+' para la altura y '+nuevaVentana.innerWidth+' para el ancho<br/> ';
msg += 'Hay '+nuevaVentana.frames.length+ ' frames abiertos<br/>';
msg += 'La url a la que apunta es '+nuevaVentana.location.href+'<br/>';
msg += 'El name que tiene la ventana es '+nuevaVentana.name+'<br\>';
msg += 'Las dimesiones hasta los bordes exteriores son de '+nuevaVentana.outerHeight+'X'+nuevaVentana.outerWidth+'<br\>';
msg += 'y la posicion de la ventana es respecto al eje x de '+nuevaVentana.screenX+' y respecto al eje y '+nuevaVentana.screenY;
informacion.innerHTML = msg;
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>
<div id="informacion"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#principal{
margin:auto;
width:90%;
height:800px;
border: solid thin black;
}
#izquierda,#derecha{
margin:10px;
width: 45%;
height:90%;
}
#izquierda{
float:left;
}
#derecha{
float:right;
}
#botones{
}
.boton{
margin:10px;
height:30px;
width:200px;
padding-top:10px;
text-align: center;
border:solid thin blue;
background-color:aquamarine;
border-radius: 10px;
font-size: 20px;
cursor:pointer;
}
.frame{
margin:18px;
width:90%;
height:500px;
}
</style>
<script>
window.onload = function(){
var enlaces = document.getElementsByClassName("boton");
var left = document.getElementById('iframeleft');
var right = document.getElementById('iframeright');
enlaces[0].onclick = function (){left.src = 'http://www.clarin.com'};
enlaces[1].onclick = function(){left.src = 'http://impresa.elmercurio.com/'};
enlaces[2].onclick = function(){left.src = 'http://www.elespectador.com'};
enlaces[3].onclick = function(){right.src = 'http://www.eluniversal.com.mx'};
enlaces[4].onclick = function(){right.src = 'http://www.elcomercio.pe'};
enlaces[5].onclick = function(){right.src = 'http://www.elmundo.es/'};
}
</script>
</head>
<body>
<div id='principal'>
<div id='izquierda'>
<div class='botones'>
<div class='boton'>clarin.com</div>
<div class='boton'>elmercurio.cl</div>
<div class='boton'>elespectador.com</div>
</div>
<iframe class='frame' name='iframeleft' id='iframeleft' src=''></iframe>
</div>
<div id='derecha'>
<div class='botones'>
<div class='boton'>universal.com.mx</div>
<div class='boton'>elcomercio.pe</div>
<div class='boton'>elmundo.es</div>
</div>
<iframe class='frame' name='iframeright' src='' id='iframeright'></iframe>
</div>
</div>
</body>
</html>
:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#slider{
border:thin solid black;
position:relative;
margin: 0 auto;
height:500px;
width: 700px;
}
#resumencomida {
color:black;
width:80%;
min-height:25%;
font-size:12px;
background-color:yellow;
margin-top: 30px;
margin-left:6%;
padding: 18px 20px 6px;
}
#images{
margin:0 120px;
}
.fotos{
margin:20px 20px;
padding:0 auto;
border:solid thin black;
border-radius: 50%;
}
#flechas{
clear:both;
margin-top:50px;
}
#siguiente{
display: block;
margin:5px;
float:right;
cursor:pointer;
height:50px;
width:50px;
}
#anterior{
margin: 5px;
left:0px;
float:left;
width:50px;
height:50px;
cursor:pointer;
}
#pie{
font-size: 13px;
text-align: center;
clear: both;
}
</style>
<script>
window.onload=function(){
imagesVector= ['http://lorempixel.com/100/100/food/1/', 'http://lorempixel.com/100/100/food/2/', 'http://lorempixel.com/100/100/food/3/'];
var texto1 = '<h2>NUESTRA COMIDA.</h2><p>En Dicamino ofrecemos platos conbinados.está diseñado en torno a los conceptos clave del café de excepcional calidad y accesibilidad para los comensales ocasionales. Durante todo el día el desayuno. cocina italiana distintivo. Y un café: resueltamente sin diluir por flaca o descafeinado, se ha convertido en un símbolo de excelencia inflexible</p>';
var texto2 = '<h2>DESAYUNO.</h2><p>Izquierda: Marios Muesli y Ensalada de fruta fresca</p><p>Derecha: Huevos florentina - escalfado Rango huevos libres, que se presentan en inglés tostado molletes con salteado de espinacas y salsa bearnesa Marios</p>';
var texto3 = '<h2>DESAYUNO.</h2><p>Izquierda: salmón ahumado y aguacate con su opción de multi-grano, masa fermentada o tostadas Sin Gluten</p><p>Derecha: caramelizado de melocotón y pistacho crepes con crema doble</p>';
var imagenes = document.querySelectorAll('.fotos');
var contador = 0;
imagenes[contador].style.borderWidth = 10+'px';
imagenes[contador].style.borderColor = 'blue';
document.getElementById("siguiente").onclick=fotoSiguiente;
document.getElementById("anterior").onclick=fotoAnterior;
function fotoSiguiente(){
contador++;
if (contador>=2){
contador = 2;
}
imagenes[contador-1].style.borderWidth = 'thin';
imagenes[contador-1].style.borderColor = 'black';
imagenes[contador].style.borderWidth = 10+'px';
imagenes[contador].style.borderColor = 'blue';
switch (contador){
case 0: texto = texto1;
break;
case 1: texto = texto2;
break;
case 2: texto = texto3;
break;
}
resumencomida.innerHTML = texto;
}
function fotoAnterior(){
contador--;
if (contador <= 0){
contador = 0;
}
imagenes[contador+1].style.borderWidth = 'thin';
imagenes[contador+1].style.borderColor = 'black';
imagenes[contador].style.borderWidth = 10+'px';
imagenes[contador].style.borderColor = 'blue';
switch (contador){
case 0: texto = texto1;
break;
case 1: texto = texto2;
break;
case 2: texto = texto3;
break;
}
resumencomida.innerHTML = texto;
}
}
</script>
</head>
<body>
<div id="slider">
<div id="images">
<img class="fotos" src="http://lorempixel.com/100/100/food/1/" alt="comida dicamino" id="visor" name="visor">
<img class="fotos" src="http://lorempixel.com/100/100/food/2/" alt="comida dicamino" id="visor" name="visor">
<img class="fotos" src="http://lorempixel.com/100/100/food/3/" alt="comida dicamino">
</div>
<div id="resumencomida">
<h2>NUESTRA COMIDA.</h2>
<p>En Dicamino ofrecemos platos conbinados.está diseñado en torno a los conceptos clave del café de excepcional calidad y accesibilidad para los comensales ocasionales. Durante todo el día el desayuno. cocina italiana distintivo. Y un café: resueltamente sin diluir por flaca o descafeinado, se ha convertido en un símbolo de excelencia inflexible</p>
</div>
<div id="flechas">
<img id="anterior" src="http://www.cruzeirofutebolclube.com.br/imgs/seta%20verde.jpg">
<img id="siguiente" src="http://www.iconarchive.com/download/i7964/hopstarter/soft-scraps/Button-Next.ico">
</div>
<div id='pie'>
<p>Utilice las flechas de navegación para navegar a través de una selección de nuestros platos de .</p>
</div>
</div>
</body>
</html>
:12px;
background-color:yellow;
margin-top: 30px;
margin-left:6%;
padding: 18px 20px 6px;
}
#images{
margin:0 120px;
}
.fotos{
margin:20px 20px;
padding:0 auto;
border:solid thin black;
border-radius: 50%;
}
#flechas{
clear:both;
margin-top:50px;
}
#siguiente{
display: block;
margin:5px;
float:right;
cursor:pointer;
height:50px;
width:50px;
}
#anterior{
margin: 5px;
left:0px;
float:left;
width:50px;
height:50px;
cursor:pointer;
}
#pie{
font-size: 13px;
text-align: center;
clear: both;
}
</style>
<script>
window.onload=function(){
imagesVector= ['http://lorempixel.com/100/100/food/1/', 'http://lorempixel.com/100/100/food/2/', 'http://lorempixel.com/100/100/food/3/'];
var texto1 = '<h2>NUESTRA COMIDA.</h2><p>En Dicamino ofrecemos platos conbinados.está diseñado en torno a los conceptos clave del café de excepcional calidad y accesibilidad para los comensales ocasionales. Durante todo el día el desayuno. cocina italiana distintivo. Y un café: resueltamente sin diluir por flaca o descafeinado, se ha convertido en un símbolo de excelencia inflexible</p>';
var texto2 = '<h2>DESAYUNO.</h2><p>Izquierda: Marios Muesli y Ensalada de fruta fresca</p><p>Derecha: Huevos florentina - escalfado Rango huevos libres, que se presentan en inglés tostado molletes con salteado de espinacas y salsa bearnesa Marios</p>';
var texto3 = '<h2>DESAYUNO.</h2><p>Izquierda: salmón ahumado y aguacate con su opción de multi-grano, masa fermentada o tostadas Sin Gluten</p><p>Derecha: caramelizado de melocotón y pistacho crepes con crema doble</p>';
var imagenes = document.querySelectorAll('.fotos');
var contador = 0;
imagenes[contador].style.borderWidth = 10+'px';
imagenes[contador].style.borderColor = 'blue';
document.getElementById("siguiente").onclick=fotoSiguiente;
document.getElementById("anterior").onclick=fotoAnterior;
function fotoSiguiente(){
contador++;
if (contador>=2){
contador = 2;
}
imagenes[contador-1].style.borderWidth = 'thin';
imagenes[contador-1].style.borderColor = 'black';
imagenes[contador].style.borderWidth = 10+'px';
imagenes[contador].style.borderColor = 'blue';
switch (contador){
case 0: texto = texto1;
break;
case 1: texto = texto2;
break;
case 2: texto = texto3;
break;
}
resumencomida.innerHTML = texto;
}
function fotoAnterior(){
contador--;
if (contador <= 0){
contador = 0;
}
imagenes[contador+1].style.borderWidth = 'thin';
imagenes[contador+1].style.borderColor = 'black';
imagenes[contador].style.borderWidth = 10+'px';
imagenes[contador].style.borderColor = 'blue';
switch (contador){
case 0: texto = texto1;
break;
case 1: texto = texto2;
break;
case 2: texto = texto3;
break;
}
resumencomida.innerHTML = texto;
}
}
</script>
</head>
<body>
<div id="slider">
<div id="images">
<img class="fotos" src="http://lorempixel.com/100/100/food/1/" alt="comida dicamino" id="visor" name="visor">
<img class="fotos" src="http://lorempixel.com/100/100/food/2/" alt="comida dicamino" id="visor" name="visor">
<img class="fotos" src="http://lorempixel.com/100/100/food/3/" alt="comida dicamino">
</div>
<div id="resumencomida">
<h2>NUESTRA COMIDA.</h2>
<p>En Dicamino ofrecemos platos conbinados.está diseñado en torno a los conceptos clave del café de excepcional calidad y accesibilidad para los comensales ocasionales. Durante todo el día el desayuno. cocina italiana distintivo. Y un café: resueltamente sin diluir por flaca o descafeinado, se ha convertido en un símbolo de excelencia inflexible</p>
</div>
<div id="flechas">
<img id="anterior" src="http://www.cruzeirofutebolclube.com.br/imgs/seta%20verde.jpg">
<img id="siguiente" src="http://www.iconarchive.com/download/i7964/hopstarter/soft-scraps/Button-Next.ico">
</div>
<div id='pie'>
<p>Utilice las flechas de navegación para navegar a través de una selección de nuestros platos de .</p>
</div>
</div>
</body>
</html>A ver si te vale.
Crea una página web que al ser invocada muestre un mensaje “Hemos cambiado de ubicación esta página. En breves momentos será redireccionado…” junto a una cuenta atrás que muestre 5, 4, 3, 2, 1 (correspondiente a 5 segundos). Tras transcurrir 5 segundos y mostrarse la cuenta atrás, el usuario debe ser redireccionada a la url http://aprenderaprogramar.com. Para realizar este ejercicio debes usar la propiedad window.location junto con funciones que permitan el retardo en la ejecución vistas en entregas anteriores del curso.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#mensaje{
position:relative;
top:200px;
left:20%;
}
#texto{
position:absolute;
color:crimson;
font-size: 20px;
}
#cuentaAtras{
position: absolute;
font-size: 500px;
color :cadetblue;
left:15%;
top:30px;
}
</style>
<script>
var contador = 0;
window.onload=function(){
contar(5);
function contar(numero){
document.getElementById('cuentaAtras').innerHTML=numero;
if (contador==5 && numero==0){
clearTimeout(llamada);
newDirection();
}
contador++;
var llamada = setTimeout(function(){contar(numero-1)},1000);
}
function newDirection(){
window.location.replace('http://aprenderaprogramar.com');
}
}
</script>
</head>
<body>
<div id="mensaje">
<div id='texto'>Hemos cambiado de ubicación esta página. En breves momentos será redireccionado…</div>
<div id='cuentaAtras'></div>
</div>
</body>
</html>Usando la propiedad userAgent de los objetos Navigator, determina el navegador que está usando el usuario y muestra un mensaje por pantalla informando de ello. El resultado debe ser del tipo: <<Estás usando: nombreNavegador>>, donde nombreNavegador será Google Chrome, Apple Safari, Opera, Mozilla Firefox, Microsoft Internet Explorer ó Desconocido. Resuélvelo de dos maneras distintas:
a) Usando expresiones regulares.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
window.onload=function(){
var navegador = window.navigator.userAgent;
var msg = "El navegador en uso es : ";
var navegadorMozilla = /Firefox/;
var navegadorOpera = /Opera/;
var navegadorSafari = /Safari/;
var navegadorChrome = /Chrome/;
var navegadorIE = /Trident/;
if (navegadorMozilla.test(navegador)){
msg += 'Mozilla';
}else if (navegadorOpera.test(navegador)){
msg += 'Opera';
}else if (navegadorSafari.test(navegador) && navegadorChrome.test(navegador)){
msg += 'Google Chrome';
}else if (navegadorSafari.test(navegador) && !navegadorChrome.test(navegador)){
msg += 'Safari';
}else if (navegadorIE.test(navegador)){
msg += 'Internet Explorer';
}else{
msg += 'Desconocido';
}
alert (msg);
}
</script>
<body>
</body>
</html>b) Usando el método indexOf de los objetos tipo String de JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
window.onload=function(){
var navegador = window.navigator.userAgent;
var msg = "El navegador en uso es : ";
/*var navegadorMozilla = /Firefox/;
var navegadorOpera = /Opera/;
var navegadorSafari = /Safari/;
var navegadorChrome = /Chrome/;
var navegadorIE = /Trident/;*/
if(navegador.indexOf('Firefox')!=-1){
msg += 'Mozilla Firefox.';
}else if(navegador.indexOf('Safari')!=-1 && navegador.indexOf('Chrome')==-1){
msg += 'Apple Safari.';
}else if(navegador.indexOf('Safari')!=-1 && navegador.indexOf('Chrome')!=-1){
msg += 'Google Chrome.';
}else if(navegador.indexOf('Opera')!=-1){
msg += 'Opera';
}else if(navegador.indexOf('Trident')!=-1){
msg += 'Internet Explorer.';
}else{
msg += 'Desconocido';
}
alert (msg);
}
</script>
<body>
</body>
</html>a) ¿En qué parte del código se genera un closure o cerradura? ¿Por qué?
b) ¿En qué parte del código se establece que al hacer click sobre el elemento con id fuente-8 se cambie el tamaño de las fuentes de la página?
c) Supón que eliminamos la función setClicks y dejamos su código “libre” dentro de las etiquetas <script> … </script>. ¿Qué mensaje de error te muestra la consola de depuración? (Activa la consola si no la tienes activada) ¿Por qué aparece ese mensaje de error?
d) ¿Debemos escribir document.getElementById('fuente-8').onclick = size8; ó document.getElementById('fuente-8').onclick = size8(); ?¿Por qué?
e) Supón que al cargar la página queremos que el tamaño inicial de fuente sea 8 y para ello nos valemos de la función setClicks. ¿Debemos escribir dentro de esta función size8; ó size8();? ¿Por qué?
f) Las closures no siempre son necesarias, incluso a veces se generan involuntariamente o innecesariamente consumiendo recursos del sistema que podrían ahorrarse. ¿Qué ventajas le ves al uso de closures en este código? ¿Y qué inconvenientes?
g) Reescribe el código (hazlo como mejor creas cambiando todo aquello que consideres necesario) de forma que obtengamos el mismo resultado pero sin hacer uso de closures.
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body { font-family: Helvetica, Arial, sans-serif;}
h2 { font-size: 1.5em;} h3 { font-size: 1.2em;}
div div {color:blue; margin:10px;}
</style>
<script type="text/javascript">
function size8(){
document.body.style.fontSize = 8 +'px';
}
function size16(){
document.body.style.fontSize = 16 +'px';
}
function size24(){
document.body.style.fontSize = 24 +'px';
}
function setClicks(){
document.getElementById('fuente-8').onclick = size8;
document.getElementById('fuente-16').onclick = size16;
document.getElementById('fuente-24').onclick = size24;
}
</script></head>
<body onload="setClicks()">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div id ="fuente-8" > Poner texto a 8 </div> <div id ="fuente-16" > Poner texto a 16 </div>
<div id ="fuente-24" > Poner texto a 24 </div> </div>
<p>En las praderas de la estepa de la Tierra del Fuego suele hacer frío</p>
</body></html>Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.
Abraham Lincoln (1808-1865) Presidente estadounidense.
aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación
RSS -
WAP2