jueves, 9 de mayo de 2013

27 - Elementos HTML semánticos

El HTML 5 introduce una serie de elementos estructurales que facilitarán tanto el desarrollo de las páginas como también el análisis de las mismas por buscadores.

Los elementos de HTML 5 que ayudan a estructurar la parte semántica de la página son:
  • header: El elemento header debe utilizarse para marcar la cabecera de una página (contiene el logotipo del sitio, una imagen, un cuadro de búsqueda etc)
    El elemento header puede estar anidado en otras secciones de la página (es decir que no solo se utiliza para la cabecera de la página)

  • nav: El elemento nav representa una parte de una página que enlaza a otras páginas o partes dentro de la página. Es una sección con enlaces de navegación.

    No todos los grupos de enlaces en una página deben ser agrupados en un elemento nav. únicamente las secciones que consisten en bloques de navegación más importantes son adecuados para el elemento de navegación.

  • section: El elemento section representa un documento genérico o de la sección de aplicación. Una sección, en este contexto, es una agrupación temática de los contenidos. Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezado.
    Una página de inicio de un sitio Web puede ser dividida en secciones para una introducción, noticias, información de contacto etc.

  • footer: El elemento footer se utiliza para indicar el pié de la página o de una sección. Un pie de página contiene información general acerca de su sección el autor, enlaces a documentos relacionados, datos de derechos de autor etc.

  • aside: El elemento aside representa una nota, un consejo, una explicación. Esta área son representados a menudo como barras laterales en la revistas impresa.

  • article: El elemento article representa una entrada independiente en un blog, revista, periódico etc.
    Cuando se anidan los elementos article, los artículos internos están relacionados con el contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio que acepta comentarios, el elemento article principal agrupa el artículo propiamente dicho y otro bloque article anidado con los comentarios de los usuario.
Un ejemplo de página añadiendo estos elementos semánticos sería:

<!DOCTYPE html> 
 <html lang="es"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Elementos semánticos del HTML5</title> 
</head> 
<body> 
  <header> 
    <h1>Encabezado de la página</h1> 
  </header> 
  <nav> 
    <p>enlaces de navegación</p> 
  </nav> 
  <section> 
    <p>Sección 1</p> 
  </section> 
  <section> 
    <p>Sección 2</p> 
  </section>
  <aside>
    <p>Publicidad</p>
  </aside>
  <footer> 
    <p>Pié de página</p> 
  </footer> 
</body> 
</html> 
 
 
Publicado por en No hay comentarios:

26 - VIDEO



El elemento VIDEO permite mostrar un video sin la necesidad de plugin (Flash). En este momento los navegadores permiten mostrar una cantidad limitada de formatos de video.

Pasará un tiempo hasta que todos los navegadores comiencen a soportar distintos formatos.

FireFox permite mostrar videos en formato ogv (formato de vídeo de código abierto Ogg/Theora). Luego para visualizar un video con este formato en FireFox tenemos:

<video width="640" height="360" src="http://videos.mozilla.org/
firefox/3.5/overview/overview.ogv" 
controls>
 
Este navegador no permite tag video
</video>
 
Las propiedades más importantes de la marca video son:
  • src: Dirección donde se almacena el video.
  • controls: Se visualiza el panel de control del video: botón de inicio, barra de avance del video etc.
  • autoplay: El video se inicia inmediatamente luego que la página se carga en el navegador.
  • width: Ancho en píxeles del video.
  • height: Alto en píxeles del video.
Como no hay un formato de video universalmente adoptado por todos los navegadores el elemento video nos permite agregarle distintas fuentes:

<video width="640" height="360" controls>
<source src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv">
<source src="http://videos.mozilla.org/firefox/3.5/overview/overview.mp4">
</video>
 
Esto es similar al elemento AUDIO visto anteriormente.


Publicado por en No hay comentarios:

25 - AUDIO



Otro elemento que se agrega al HTML5 es el AUDIO. El objetivo de esta etiqueta es permitir la carga y ejecución de archivos de audio sin requerir un plug-in de Flash, Silverlignt o Java.

El comité de estandarización W3C deja abierto a cada empresa que desarrolla navegadores los formatos que quieran soportar (así tenemos que algunos soportan mp3, wav, ogg, au)

Un ejemplo de disponer el elemento audio dentro de una página sería:

<audio src="sonido.ogg" autoplay controls loop></audio>
 
Las propiedades que podemos utilizar con la marca audio son:
  • src: La URL donde se almacena el archivo de audio. Si no definimos la URL la busca en el mismo directorio donde se almacena la página.
  • autoplay: En caso de estar presente el archivo se ejecuta automáticamente luego de cargarse la página sin requerir la intervención del visitante.
  • loop: El archivo de audio se ejecuta una y otra vez.
  • controls: Indica que se deben mostrar la interface visual del control en la página (este control permite al visitante arrancar el audio, detenerlo, desplazarse etc.)
  • autobuffer: En caso de estar presente indica que primero debe descargarse el archivo en el cliente antes de comenzar a ejecutarse.
Como no hay un formato de audio universalmente adoptado por todos los navegadores el elemento audio nos permite agregarle distintas fuentes:

<audio controls autoplay loop>
        <source src="sonido.ogg">
        <source src="sonido.mp3">
        <source src="sonido.wav">
        <source src="sonido.au">
        <!-- Aplique de flash -->
</audio>
 
El elemento source indica a través de la propiedad src la ubicación del archivo de audio respectivo. El orden que disponemos estas fuentes es importante. Primero el navegador busca la primera fuente y verifica que puede reproducir dicho archivo, en caso negativo pasa a la siguiente fuente. Como vemos si queremos que cualquier navegador reciba un audio podemos inclusive hacer el aplique de Flash respectivo por si el navegador no implementa el elemento AUDIO o no soporta el formato de archivo.

Por el momento no hay un formato con soporte para todos los navegadores, dependerá del sitio que implementemos para ver si tiene sentido duplicar nuestros archivos con distintos formatos de audio.


Publicado por en No hay comentarios:

24 - CANVAS (scale)



Otra transformación que nos permite la librería provista por el canvas es la redimensión.

Disponemos de un método llamado: scale(x,y) 

Si pasamos 1 y 1 el gráfico toma el mismo tamaño que el original. Si es menor a uno estamos reduciendo y en caso de ser mayor a 1 estamos generando una figura mayor a la original.

Confeccionaremos un programa que muestre una imagen girando y en cada giro iremos escalando (aumentando su tamaño):

 
<!DOCTYPE HTML>
<html>
<head>
 
<script type="text/javascript">
function retornarLienzo(x) {
  var canvas = document.getElementById(x);
  if (canvas.getContext) {
    var lienzo = canvas.getContext("2d");   
    return lienzo;
  } else
    return false;
}
 
 
function dibujar() {
  var lienzo=retornarLienzo("lienzo1");
  if (lienzo) {
    lienzo.clearRect(0,0,600,600);
    lienzo.save();
    lienzo.translate(300,300);
    lienzo.rotate(avance);
    lienzo.scale(tamx,tamy);
    lienzo.drawImage(img1,-125,-125);
    avance+=0.05;
    tamx+=0.01;
    tamy+=0.01;
    if (avance>Math.PI*2)
      avance=0;
    if (tamx>=10) {
      tamx=0.01;
      tamy=0.01;
    }
    lienzo.restore();  
  }
}
 
var avance=0;
var img1;
var tamx=0.01;
var tamy=0.01;
function inicio() {
  img1 = new Image(); 
  img1.src = 'image.jpg';
  img1.onload = function(){ 
    setInterval(dibujar,50);
  }  
}
 
</script>
 
</head>
<body onLoad="inicio()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
 
Cada vez que se ejecuta la función dibujar:

function dibujar() {
  var lienzo=retornarLienzo("lienzo1");
  if (lienzo) {
    lienzo.clearRect(0,0,600,600);
    lienzo.save();
    lienzo.translate(300,300);
    lienzo.rotate(avance);
    lienzo.scale(tamx,tamy);
    lienzo.drawImage(img1,-125,-125);
    avance+=0.05;
    tamx+=0.01;
    tamy+=0.01;
    if (avance>Math.PI*2)
      avance=0;
    if (tamx>=10) {
      tamx=0.01;
      tamy=0.01;
    }
    lienzo.restore();  
  }
}
 
Dentro de esta función rotamos según el contador avance y escalamos según otros dos contadores:
 
    lienzo.rotate(avance);
    lienzo.scale(tamx,tamy);

Publicado por en No hay comentarios:

23 - CANVAS (rotate)



La segunda transformación posible utilizando el canvas es la rotación:

rotate(grados)
 
Los grados de rotación se indican en radianes y la rotación es en sentido horario y con respecto al punto de origen (0,0), por ello es muy común que primero utilicemos el método translate y luego rotemos.
Confeccionaremos un programa que rote un cuadrado en forma indefinida:

<!DOCTYPE HTML>
<html>
<head>
 
<script type="text/javascript">
function retornarLienzo(x) {
  var canvas = document.getElementById(x);
  if (canvas.getContext) {
    var lienzo = canvas.getContext("2d");   
    return lienzo;
  } else
    return false;
}
 
 
function dibujar() {
  var lienzo=retornarLienzo("lienzo1");
  if (lienzo) {
    lienzo.clearRect(0,0,600,600);
    lienzo.save();
    lienzo.fillStyle="rgb(255,0,0)";
    lienzo.translate(300,300);    
    lienzo.rotate(avance);    
    lienzo.fillRect(-100,-100,200,200);
    lienzo.restore();
    avance+=0.05;
    if (avance>Math.PI*2)
      avance=0;
  }
}
 
var avance=0;
function inicio() {
  setInterval(dibujar,50);
}
 
</script>
 
</head>
<body onLoad="inicio()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
 
Definimos una variable global que indica el grado de rotación actual: 

var avance=0;
function inicio() {
  setInterval(dibujar,50);
}
 
La función dibujar se ejecuta cada 50 milisegundos. Lo primero que hacemos el borrar el lienzo, trasladar el punto de origen a la coordenada (300,300) que es el centro del canvas. Definimos los grados de rotación. Dibujamos un cuadrado teniendo en cuenta la ubicación actual del punto de origen (por eso los parámetros negativos en x1 e y1):

function dibujar() {
  var lienzo=retornarLienzo("lienzo1");
  if (lienzo) {
    lienzo.clearRect(0,0,600,600);
    lienzo.save();
    lienzo.fillStyle="rgb(255,0,0)";
    lienzo.translate(300,300);    
    lienzo.rotate(avance);    
    lienzo.fillRect(-100,-100,200,200);
    lienzo.restore();
    avance+=0.05;
    if (avance>Math.PI*2)
      avance=0;
  }
}

PROBLEMA PROPUESTO

Mostrar una imagen y efectuar su rotación en forma indefinida.


Publicado por en No hay comentarios:

jueves, 2 de mayo de 2013

22 - CANVAS (translate)



Para mover el sistema de coordenadas disponemos del método:

translate(x,y)
 
Luego de llamar a este método la coordenada (0,0) corresponderá al par de valores indicados en los parámetros.

El uso de esta transformación nos facilita la creación de figuras.

Confeccionaremos un programa que implemente una función que dibuje un triángulo, la función recibe la coordenada donde debe dibujarla y la base y altura del triángulo:

<!DOCTYPE HTML>
<html>
<head>
 
<script type="text/javascript">
function retornarLienzo(x) {
  var canvas = document.getElementById(x);
  if (canvas.getContext) {
    var lienzo = canvas.getContext("2d");   
    return lienzo;
  } else
    return false;
}
 
function dibujarTriangulo(lienzo,x,y,base,altura) {
  lienzo.save();
  lienzo.translate(x,y);
  lienzo.fillStyle="rgb(255,0,0)";
  lienzo.beginPath();
  lienzo.moveTo(base/2,0);
  lienzo.lineTo(0,altura);
  lienzo.lineTo(base,altura);
  lienzo.lineTo(base/2,0);
  lienzo.fill();
  lienzo.restore();
}
 
function dibujar() {
  var lienzo=retornarLienzo("lienzo1");
  if (lienzo) {
    for(var col=0;col<550;col+=30)
      dibujarTriangulo(lienzo,col,10,30,130);
  }
}
 
</script>
 
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
 
Lo más importante que debemos entender está en la función dibujarTriangulo. Lo primero que hacemos es grabar el estado (save()) esto hace que quede almacenado los valores actuales del punto de origen. Movemos el punto de origen llamando a translate. Ahora podemos dibujar el triángulo considerando que la coordenada (0,0) coincide con los parámetros (x,y). Luego de dibujar recuperamos el estado actual llamando a restore():

function dibujarTriangulo(lienzo,x,y,base,altura) {
  lienzo.save();
  lienzo.translate(x,y);
  lienzo.fillStyle="rgb(255,0,0)";
  lienzo.beginPath();
  lienzo.moveTo(base/2,0);
  lienzo.lineTo(0,altura);
  lienzo.lineTo(base,altura);
  lienzo.lineTo(base/2,0);
  lienzo.fill();
  lienzo.restore();
}

Publicado por en No hay comentarios:

21 - CANVAS (grabar y recuper el estado - save(), restore())



Cuando tenemos que hacer dibujos complejos es muy común que necesitemos almacenar el estado de algunas propiedades del canvas para luego recuperarlas. Estas dos actividades se logran mediante los métodos:

save()
restore()
 
Los valores que se almacenan son strokeStyle, FillStyle, globalAlpha, LineCap, LineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor entre otras propiedades.

Tengamos en cuenta que si se llama dos veces en forma sucesiva al método save() para retornar al estado inicial debemos llamar dos veces al método restore().

Para ver su funcionamiento desarrollaremos un programa que muestre un cuadrado en color rojo, otro con un gradiente del rojo al azul y finalmente otro cuadrado rojo:

<!DOCTYPE HTML>
<html>
<head>
 
<script type="text/javascript">
function retornarLienzo(x) {
  var canvas = document.getElementById(x);
  if (canvas.getContext) {
    var lienzo = canvas.getContext("2d");   
    return lienzo;
  } else
    return false;
}
 
function dibujarCuadradoGradiente(lienzo,x,y,ancho,alto) {
  lienzo.save();
  var gradiente1=lienzo.createLinearGradient(x,y,x+ancho,y+alto);
  gradiente1.addColorStop(0,"rgb(255,0,0)");
  gradiente1.addColorStop(1,"rgb(0,0,255)");
  lienzo.fillStyle=gradiente1;
  lienzo.fillRect(x,y,ancho,alto);
  lienzo.restore();
}
 
function dibujar() {
  var lienzo=retornarLienzo("lienzo1");
  if (lienzo) {
    lienzo.fillStyle="rgb(255,0,0)";
    lienzo.fillRect(10,30,30,30);
    dibujarCuadradoGradiente(lienzo,70,30,30,30);
    lienzo.fillRect(130,30,30,30);
  }
}
 
</script>
 
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
 
Dibujamos un cuadrado de color rojo:

    lienzo.fillStyle="rgb(255,0,0)";
    lienzo.fillRect(10,30,30,30);
 
Llamamos a la función dibujarCuadradoGradiente:

    dibujarCuadradoGradiente(lienzo,70,30,30,30);
 
La función dibujarCuadradoGradiente lo primero que hace es grabar el estado actual (save()) y luego configura nuevamente la propiedad fillStyle con un objeto de tipo LinearGradient. Finalmente luego de graficar el cuadrado restaura el estado actual (restore()):

function dibujarCuadradoGradiente(lienzo,x,y,ancho,alto) {
  lienzo.save();
  var gradiente1=lienzo.createLinearGradient(x,y,x+ancho,y+alto);
  gradiente1.addColorStop(0,"rgb(255,0,0)");
  gradiente1.addColorStop(1,"rgb(0,0,255)");
  lienzo.fillStyle=gradiente1;
  lienzo.fillRect(x,y,ancho,alto);
  lienzo.restore();
}
Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)