Tutorial HTML5 (Parte 1)

1. Parte 1: Algo de lo básico: HTML y HTML5, TITLE, HEAD, SECTION, DOCTYPE, BODY, H1, H2, HEADER, LI, UL, ETC…

2. Parte 2: Canvas, ¿adiós flash? Nota: Usaremos Javascript en este punto.

3. Parte 3: Audio

4. Parte 4: Datalist, para formularios HTML5

5. Parte 5: Figure y Figcaption, mayor formalidad

6. Parte 6: Mark, para dar énfasis Nota: Usaremos CSS en este punto

7. Parte 7: Meter, estadísticas representadas gráficamente

8. Parte 8: Output

9. Parte 9: ProgressBar

10. Parte 10: Video

Algo de lo básico

En realidad es HTML de lo que se trata este apartado de mi blog, pero lo llamo HTML5 porque es una versión bastante popular por todas las mejoras que trae.

Usando un editor HTML (puede buscar en su buscador la frase “editor HTML”) se escribe el código, y luego puede ver el resultado en un navegador web.

Casi todos saben qué es HTML. Realmente para poder hacer un hola mundo en HTML, basta con escribirlo en el editor

Guardarlo en alguna carpeta, y verlo en el navegador:

Pero eso no se la idea. Un hola mundo en C++, Java, Python y todos esos lenguajes que también sirven para aplicaciones de escritorio, simplemente se pueden escribir e imprimir.

Pero en HTML hay cosas importantes como:

1. Compatibilidad con diferentes navegadores: Internet Explorer, Mozilla Firefox, Opera, Safari, Google Chrome.

2. Información del documento: Título, descripción, etiquetas, autor, scripts, estilos.

Luego, HTML no es un lenguaje de programación web, para eso están Javascript, Perl, PHP, ASP y otros más.

HTML lo que hace es renderizar el resultado. Es la mayor parte de la interfaz gráfica de la web, la otra parte la ocupa CSS3 y Javascript, así como otros componentes adicionales.

Para imprimir un hola mundo, que sea “con todas las de la ley”, propongo algo similar a lo siguiente:

Imprime lo mismo, pero ahora tiene una gran cantidad de información. Los robots araña de Google entran a todas las páginas y leen los meta. Entonces entienden que yo usé Editplus para crear el documento, que lo hizo un tal Geovanny Méndez Marín, revisa las palabras claves lo cual puede tener varios usos taxonómicos. La descripción muestra precisamente eso.

El resto de la información, como el Doctype y el charset tiene un determinado significado también. Pero esta podría ser un ejemplo de plantilla básica para un hola mundo en html.

Es nuestro punto de partida, y a partir del mismo vamos a construir todo lo demás.

Primero, eso del Doctype ya no es tan largo, ahora se usa de la siguiente forma:

<!DOCTYPE html>

</html>

Con eso basta para saber que el documento es un HTML.

Ahora le quiero agregar un título. El título forma parte de algo llamado head. Entonces para poder agregar el título, también necesito el head:

<!DOCTYPE html>

<head>

</head>

</html>

Y el título:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

</html>

Ahora tanto para los que saben programar como para los que no, el “esqueleto” de la interfaz gráfica está definida por layouts.

Por ejemplo para la siguiente aplicación programada en Java:

Todo tiene un orden, está ordenado por paneles. Ese es el layout. El botón con la mano está en una sección, las opciones para hacer check están en otro, la sección de códigos para compartir es un cuadro de texto grande. Esto pasa también en las páginas web. Por ejemplo, Facebook:

Tiene una barra arriba que dice Facebook, en la que tiene un buscador y unas opciones específicas.

Tiene tres columnas: la primera dice Favoritos, Aplicaciones y Páginas. La del centro es la que más usamos, donde se muestra el contenido y donde publicamos. La tercera es donde vienen estadísticas e información adicional que puede resultar interesante.

Tanto la aplicación de Java, como Facebook, tienen una estructura de paneles, donde se ordenan las secciones. La parte donde va el logo de Facebook se llama header. Forma parte del cuerpo de la página, llamado body:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

</body>

</html>

En el cuerpo podemos crear un contenedor DIV que tenga un identificador header:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

</div>

</body>

</html>

En HTML5 ahora el header no se hace de esa forma, sino que se crea de esta otra manera:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

</header>

</body>

</html>

O sea antes se usaba un DIV y ahora se usa HEADER, ya la trae por defecto el HTML5.

Esta imagen te muestra las secciones de una página HTML5

Para ellas se utilizan las etiquetas html <header></header>, <footer></footer>, etcétera.

Antes esto no se podía hacer y tenían que definirse a través de identificadores con

El header es el encabezado, donde generalmente van el logo y opciones para inicio y cierre de sesión, así como opciones de configuración.

El nav sirve para colocar botones de navegación del sitio mostrando las secciones más importantes. Algunas páginas colocan las opciones del nav en las barras laterales y no debajo del header. Sin embargo cuando usted escriba el código, siempre escríbalo debajo del header si quiere que se cargue primero el nav (generalmente es lo deseado)

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

</body>

</html>

Agreguemos una lista:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

</body>

</html>

Cada ítem puede ser un botón que tenga una opción de navegación. Por ejemplo en Facebook podría ser la opción de INICIO que nos lleve al muro principal, el Item 2 podría ser perfil que nos lleve a nuestro perfil.

El article sirve para los post y contenido principal, usado generalmente en blogs y sitios que funcionen en modalidad con artículos

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

</body>

</html>

Ese contenido generalmente es extraído de una base de datos o de un archivo externo, generado por un lenguaje como PHP.

En un foro el article lo ocupa un tema con sus respectivos comentarios, en Youtube lo ocupa cada video con sus comentarios respectivos.

Las diferentes partes de la página como tal se separan con el tag <section></section>. Esta no lleva estilos, a diferencia de los DIV.

Cuando deba separar secciones, utilice SECTION, pero si debe darles estilo, use DIV. En section usted puede introducir al ARTICLE:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

</section>

</body>

</html>

El aside contiene información importante con relación al article pero no es lo que se quiere mostrar como elemento principal. Como tanto article como aside hacen referencia al contenido, podemos meter aside dentro de section:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

</section>

</body>

</html>

El aside se puede colocar en el lado derecho, pero también en el izquierdo, como lateral. En Youtube se colocan los videos del mismo uploader quien compartió el video, y otros videos relacionados con el contenido principal:

Luego, existen los h que son los que se usan para títulos y subtítulos, y otra información reconocida por los robots de los buscadores, que indexan nuestra página para que los usuarios la puedan encontrar.

Por ejemplo

· H1: Título de la página

· H2: Eslogan de la página

· H3: Título del artículo

· H4: Subtítulo del artículo

En HTML5 estas se colocan dentro de un HGROUP

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<h1>Título de la página</h1>

<h2>Eslogan de la página</h2>

</hgroup>

</header>

<h3>Título del contenido principal</h3>

<h4>Subtítulo del contenido principal</h4>

</hgroup>

</article>

</section>

</body>

</html>

En el H4 se trata de describir muy específicamente de qué trata el contenido, para dar soporte al título del artículo del H3.

El HGROUP tiene funciones no solo estéticas y de orden, sino que también sirven para hallar contenido cuando se realiza una búsqueda. Todos los elementos en común dentro de un HGROUP forman un solo elemento, y todas las palabras que contenga cada H forman ese contenido. Si usted inserta en el buscador palabras que se encuentren tanto en el título como en el subtítulo, se buscará por HGROUP.

Además no tienes porqué usar el H3 y el H4 obligatoriamente, si quiere utilice el H1 y el H2, siempre y cuando estén en diferentes HGROUP:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<h1>Título de la página</h1>

<h2>Eslogan de la página</h2>

</hgroup>

</header>

<h1>Título del contenido principal</h1>

<h2>Subtítulo del contenido principal</h2>

</hgroup>

</article>

</section>

</body>

</html>

Parte 2: Canvas

Dibujar cosas es complicado. Ya el HTML trae cosas dibujadas como botones, formularios, estilos (sombras, bordes, delineados), fuentes y demás.

Pero hay cosas que nosotros queremos dibujar. Tanto en HTML como en cualquier lenguaje de programación existe el CANVAS que sirve para dibujar cosas. Todo depende de la creatividad de la persona.

Como es tan complicado vamos a hacerlo sencillo, dibujando una figura básica: un rectángulo:

Algunas cosas que permite el CANVAS son:

1. Dibujos a partir de código

2. Animaciones usando Javascript

3. Reproducción de video y audio

4. Videojuegos

Antes muchas de estas cosas se realizaban con Javascript, pero ahora se puede combinar el CANVAS con Javascript, gracias a HTML5.

Esto ha desplazado algunas otras tecnologías como Flash que era la que se usaba en casi todos los sitios web, podría decirse que de manera estándar.

Voy a omitir todo el código que no sea relevante para este ejemplo

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

</canvas>

</body>

</html>

Para dibujar, vamos a programar. No podemos programar en HTML5 porque no es un lenguaje de programación, entonces usemos algún lenguaje que se pueda usar con HTML5. Usaremos Javascript:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

</canvas>

</script>

</body>

</html>

Tanto para canvas como para script debemos dar algunos atributos:

Canvas:

· Width: El ancho

· Height: El alto

· Id: Un identificador

· Un mensaje por si se está usando un navegador que no soporta canvas

Script:

· Tipo: text/javascript

· Set de caracteres: UTF-8

Queda de la siguiente forma:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

Su navegador no es compatible con canvas

</canvas>

</script>

</body>

</html>

Ahora, vamos a programar dentro del script. Declaramos una variable que encuentre al canvas, para eso fue que colocamos un identificador al canvas, llamado canvasG:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

Su navegador no es compatible con canvas

</canvas>

var variableCanvas = document.getElementById(“canvasG”);

</script>

</body>

</html>

Ahora, dibujaremos la figura en dos dimensiones:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

Su navegador no es compatible con canvas

</canvas>

var variableCanvas = document.getElementById(“canvasG”);

var perspectiva = variableCanvas.getContext(“2d”);

perspectiva.fillRect(0,0,300,300); // x, y, width, height

</script>

</body>

</html>

Como puede ver, se ha dibujado un rectángulo. fillRect lo que hace es dibujar tantos pixeles como se indique. Acá se ha indicado que el tamaño sea 300 de ancho y 300 de alto. Si quisiéramos dibujar algo como lo siguiente:

El código sería:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

Su navegador no es compatible con canvas

</canvas>

var variableCanvas = document.getElementById("canvasG");

var perspectiva = variableCanvas.getContext("2d");

for(i =0; i < 300;i++){

if(i%2==0){

perspectiva.fillRect(i,0,1,300); // x, y, width, height

}

</script>

</body>

</html>

Javascript es un lenguaje débilmente tipado, así que tanto en las variables var, como en el for, no se indica el tipo (un int en el caso del for).

Podemos usar dos bucles también, explotando todas las posibilidades de un lenguaje de programación en lo que al cómputo se refiere:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

Su navegador no es compatible con canvas

</canvas>

var variableCanvas = document.getElementById("canvasG");

var perspectiva = variableCanvas.getContext("2d");

for(i =0; i < 800;i++){

for(j =0; j < 800;j++){

if(i%3==0 && j%3 == 0){

perspectiva.fillRect(i,j,1,1); // x, y, width, height

}

</script>

</body>

</html>

Parte 3: Audio

Para agregar música o audio en HTML5 se hace de la siguiente forma.

Primero que nada, usar MP3 es lo más fácil, sería genial poder usarlo, y se puede, pero no es compatible con todos los navegadores, de hecho solo con la minoría.

El audio que se utiliza tiene extensión OGG.

Para convertir un MP3 a OGG, yo uso Audacity es gratis y liviano, abro el MP3 y lo guardo como OGG, así de fácil. Pero usted se puede complicar como le guste.

Una vez tenemos el archivo OGG, lo subimos a un sitio, como el FTP donde está nuestro sitio, o cualquier sitio tipo Google Drive, SkyDrive o Dropbox, que permitan enlazar directamene al archivo.

Si lo subes a Sendspace, Mega, Mediafire y todos esos, no te va a servir, porque esos servidores no nos dan un enlace directo sino un enlace de descarga donde tenemos que esperar y pasada la espera comienza a descargar.

También hay buscadores de sonidos. En mi caso subí el archivo a Google Drive, el enlace es el siguiente:

https://docs.google.com/uc?id=0B7WlerwTSO2-VGpuc1ZzWmkxenM

Lo primero que haremos es crear la etiqueta AUDIO

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<audio>

</audio>

</body>

</html>

Luego agregamos el SOURCE, que es la fuente del archivo de audio:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<audio>

<source

src=”https://docs.google.com/uc?id=0B7WlerwTSO2-VGpuc1ZzWmkxenM”

type="audio/ogg">

</source>

</audio>

</body>

</html>

Si lo abrimos en el navegador, se escuchará el sonido, pero no se mostrará nada. Para construir el reproductor de audio se utilizarán controles, de la siguiente forma:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<source

src="https://docs.google.com/uc?id=0B7WlerwTSO2-VGpuc1ZzWmkxenM"

type="audio/ogg">

</source>

</audio>

</body>

</html>

Esto mostrará los controles de play y pause para el reproductor así como el volumen y el progreso del sonido reproducido.

Si quiere que se reproduzca de manera automática, usamos AUTPLAY:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<source

src="https://docs.google.com/uc?id=0B7WlerwTSO2-VGpuc1ZzWmkxenM"

type="audio/ogg">

</source>

</audio>

</body>

</html>

Para que la canción se repita, usamos LOOP

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<source

src="https://docs.google.com/uc?id=0B7WlerwTSO2-VGpuc1ZzWmkxenM"

type="audio/ogg">

</source>

</audio>

</body>

</html>

Podemos también asignar un valor a preload, con tres opciones disponibles:

1. Auto

2. Metadata

3. None

De manera que se cargue de una u otra forma el sonido. El autplay tiene mejor precedencia que preload, así que si declaramos preload, debes borrar autoplay, también puedes profundizar más en el tema para que veas todas las combinaciones o permutaciones de valores que puedes usar para que se muestre el reproductor.

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<source

src="https://docs.google.com/uc?id=0B7WlerwTSO2-VGpuc1ZzWmkxenM"

type="audio/ogg">

</source>

</audio>

</body>

</html>

Luego, tomando en cuenta que esto es una característica de HTML5 al igual que el CANVAS, debes mostrar un mensaje si no se pudo cargar el contenido:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<source

src="https://docs.google.com/uc?id=0B7WlerwTSO2-VGpuc1ZzWmkxenM"

type="audio/ogg">

</source>

Este navegador no es compatible con HTML5.

</audio>

</body>

</html>

Se recomienda poner dos archivos, uno mp3 y otro ogg, porque algunos navegadores reproducen uno, y otros otro. Si se introducen dos fuentes, nunca se reproducirán las dos, solo una de ellas. Es como un if-else:

If soportaFormato(MP3):

reproducir

Else if soportaFormato(OGG):

reproducir

Else:

Este navegador no es compatible con HTML5

Funciona de esta manera a mi parecer.

Parte 4: Datalist

El datalist es un control que permite introducir datos de forma especificada, el código es el siguiente:

Aún está perfeccionándose este controlador, para adaptarlo a los formularios comunes. Ya puedes comenzar a probarlo para ver que tal funciona.

Parte 5: Figure

Si has hecho proyectos de investigación en la universidad, o documentos que deben tener determinado formato, verás que las imágenes normalmente tienen que llevar una descripción abajo. De hecho, no solo las imágenes, sino también las tablas y los gráficos distintos como diagramas y todo lo demás.

En HTML5 se puede utilizar Figure para dar esta formalidad a las páginas web, ya que últimamente la web se usa para todo, incluso para publicar documentos de divulgación científica.

Figure se puede usar de la siguiente forma:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

Figura 1.0: Cubo Rubik

</figcaption>

<p>Desarrollo de Habilidades para resolver problemas</p>

</body>

</html>

Parte 6: Mark

Mark sirve para resaltar texto agregando colores de fondo. Se utiliza de la siguiente forma:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

Figura 1.0: Cubo Rubik

</figcaption>

<p>Desarrollo de <mark>Habilidades</mark> para resolver <mark style="background-color:red;">problemas</mark></p>

</body>

</html>

Si se utiliza la etiqueta MARK por sí sola, coloca el color de fondo amarillo por defecto. Si se quiere otro color, el mark admite estilos de CSS, así que al cambiar el atributo background-color, el color del efecto mark cambiará a rojo.

Parte 7: Meter

Meter sirve para mostrar estadísticas a los usuarios de manera fácil, con una barra bastante personalizable y funcional. La idea final es un controlador similar al que usa Youtube:

Es una barra donde se muestre un color cuando el valor sea muy bajo, otro cuando sea óptimo, y otro cuando sea muy alto.

Se crea de la siguiente forma:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<p>¿Cuales son tu opción favorita?</p>

Opción 1

Opción 2

Opción 3

<br />

</body>

</html>

MIN es el valor mínimo, MAX el máximo, y el valor deseado es VALUE. También se puede establecer cuál rango se considera alto o bajo, usando HIGH para alto y LOW para bajo:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<p>¿Cuales son tu opción favorita?</p>

Opción 1

Opción 2

Opción 3

<br />

</body>

</html>

Y esto se mostraría a través de los colores:

También se puede especificar un valor óptimo intermedio con OPTIMUM

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<p>¿Cuales son tu opción favorita?</p>

Opción 1

Opción 2

Opción 3

<br />

</body>

</html>

Es una opción que ahorra mucho trabajo de desarrollo pues antes del HTML5 no estaba disponible este controlador de forma nativa.

Parte 8: Output

El output sirve para jugar con valores introducidos a través de un input, realizando operaciones aritméticas. Funciona de la siguiente forma:

Creamos un formulario

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<form>

</form>

</body>

</html>

Creamos dos input:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<form>

</form>

</body>

</html>

Y creamos un output:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<form>

</form>

</body>

</html>

Ahora, la idea es que haya un número en cada input, y la suma de ambos números en cada input se muestre en el output:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

<form>

</form>

</body>

</html>

Y lo que falta es agregarle un evento Javascript al form, onInput:

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

</form>

</body>

</html>

La siguiente captura es de Google Chrome porque Firefox no muestra bien los controladores input de tipo number:

Al dar click en los botones de arriba y abajo cambian los números y al mismo tiempo se produce el resultado.

Parte 9: ProgressBar

La barra de progreso muestra el progreso de uno o varios procesos.

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

</body>

</html>

Combinado con Javascript permite mostrar dicho progreso en tiempo real.

Como todas las anteriores etiquetas de HTML5, si quieres puedes escribir un mensaje entre tags, que se mostrará si el controlador no es soportado.

Parte 10: Video

El video es lo mismo que la inserción de audio, pero con algunas opciones adicionales. El autoplay, preload y loop funcionan igual así que puede revisar la parte de audio para que repase cómo funcionan. Por lo demás, se proporciona un enlace mp4 o un ogg (los ogg pueden ser audio o video así que hay que especificar):

<!DOCTYPE html>

<head>

<title>Aprendiendo HTML5</title>

</head>

<body>

Este navegador no es compatible con HTML5

</video>

</body>

</html>

El atributo poster sirve para mostrar una imagen antes de que se reproduzca el video.

Tutorial HTML5 (Parte 1)

No hay comentarios:

Publicar un comentario

Categorías