Tutorial HTML5

Filipenses 4:13 Todo lo puedo en CRISTO que me fortalece

martes, 14 de abril de 2015

Elemento wbr HTML5

Este elemento es una oportunidad de salto de linea

El navegador es quien decide si el salto de linea se inserta o no

La finalidad de este elemento es crear textos mas legibles, este elemento hay que ponerlo en esas partes estratégicas del texto a fin de que el texto se vea legible después de que los saltos de linea son insertados por el navegador si es que el navegador decide insertarlos

Veamos un ejemplo

Codigo

<p>abcdef<wbr/>ghijkl<wbr/>mnñopq<wbr/>rstuvwxyz</p>

Ejemplo funcional en JSFIDDLE, reduce la ventana de resultado y veras como se va cortando la cadena

Lo "importante" es que pongas este elemento en una posición talque el texto sea legible si el salto de linea es insertado por el navegador

Eso fue todo, nos vemos en el proximo post

jueves, 12 de septiembre de 2013

Elemento ol HTML5

El elemento ol representa una lista ordenada

El orden de la lista es importante de tal forma que si cambiamos el orden de los items cambia el significado del documento

Veamos un ejemplo donde podamos ver, como al cambiar el orden de los items cambia el significado del documento, a continuación una lista que contiene países ordenados del mas rico al menos rico

<ol>
<li>Estados Unidos</li>
<li>China</li>
<li>Japón</li>
</ol>

Ahora, cambiemos el orden de la lista para ver como cambia el significado del documento

<ol>
<li>Japón</li>
<li>Estados Unidos</li>
<li>China</li>
</ol>

Con este cambio el significado del documento cambio a: el país mas rico es japón y no estados unidos, el segundo país mas rico es estados unidos y no china, como podemos notar el significado del documento cambio dramáticamente

Este elemento tiene un atributo llamado type con el cual establecemos el tipo de viñeta a usar

Este elemento también tiene un atributo llamado reversed el cual si esta presente indica que el orden de la lista es descendente, veamos un ejemplo


<ol reversed="reversed">
<li>Japón</li>
<li>China</li>
<li>Estados Unidos</li>
</ol>

Se trata de la misma lista solo que en este caso esta en orden descendente osea del menos rico al mas rico en diferencia con la otra lista que era del mas rico al menos rico en orden ascendente

Los elementos li descendientes de un elemento ol siempre tienen un valor de orden, este valor de orden esta dado por su atributo value o por el atributo start del elemento ol, el valor de orden es el numero que aparece como viñeta, sabiendo esto veamos el siguiente atributo de este elemento ol

El atributo start establece el valor de orden del primer item pero cabe mencionar que el atributo value del item(elemento li) tiene mayor peso, es decir si el atributo value esta ausente entonces start da el valor de orden del primer item pero si esta presente value y start entonces el valor de orden del primer item va a estar dado por el atributo value del item

Este atributo tiene un valor por default de 1 si el atributo reversed esta ausente pero si reversed esta presente entonces el valor por default es el numero de items

El valor del atributo start es un numero entero positivo o negativo

El valor de orden de los siguientes items es el anterior mas 1 si el atributo reversed esta ausente y sera el valor de orden del anterior menos 1 si el atributo reversed esta presente

Eso es todo y proximamente publicare un post sobre el elemento ul, saludos

miércoles, 11 de septiembre de 2013

Elemento link HTML5

El elemento link nos permite enlazar nuestro documento con otro recurso tal como hojas de estilo, los favicon, etc.

Este elemento nos permite crear 2 tipos de enlaces: enlaces a recursos externos e hipervinculos.Los enlaces a recursos externos son por ejemplo hojas de estilo y los favicon en cambio los hipervinculos son enlaces a otros documentos que contienen informacion por ejemplo acerca del autor o de la licencia(no son muy usados n_n)

Un mismo elemento link puede crear varios enlaces, veamos el siguiente ejemplo:

<link rel="author license" href="/about">

El numero de enlaces es igual al numero de palabras clave en el atributo rel, en este caso se crean 2 enlaces(author y license) y cada uno de ellos es afectado de manera diferente por los atributos restantes(en este caso el atributo href)

Este elemento cuenta con los siguientes atributos:

href
Este atributo contiene la direccion del recurso o el hipervinculo
rel
Este atributo da la relacion que hay entre el documento y el recurso o hipervinculo, por ejemplo stylesheet es como decir "la relacion que hay entre el documento y este archivo css, es que este archivo css es la hoja de estilos del documento"
hreflang
Este atributo da el idioma del hipervinculo
size
Este atributo solo se puede usar si el atributo rel contiene el valor icon y sirve para dar las dimenciones del icono
title
Si el atributo rel contiene stylesheet entonces este atributo da el nombre de la hoja de estilos alternativa, osea el elemento link seria una hoja de estilos alternativa
type
Este atributo da el tipo MIME del recurso, solo da una sugerencia de tipo MIME porque todavia el navegador checara el tipo MIME devuelto por el servidor
media
Este atributo contiene un media query, si el entorno(normalmente el viewport) se ajusta al media query entonces el recurso se aplica, el recurso normalmente es una hoja de estilos

Podemos tener varias hojas de estilo alternativas y elegir la(s) que queramos, hasta donde se firefox es el unico navegador que soporta hojas de estilo alternativas

Un dato interesante es que este elemento link puede disparar los eventos load y error, los cuales se disparan respectivamente cuando el recurso se descarga satisfactoriamente o cuando no se puede descargar

El post fue algo largo pero es lo mas importante que vi en la W3C, hasta el proximo post salu2

martes, 10 de septiembre de 2013

Doctype HTML5

El Doctype HTML5 establecido por la W3C tiene la siguiente forma:

<!DOCTYPE html>

Las palabras doctype y html son case-insensitive, lo que quiere decir que no importa si estan en mayusculas o minusculas, de esta forma los siguientes doctypes son validos

  • <!doctype HTML>
  • <!DoCtYpE html>
  • <!dOcTyPe HtML>

El doctype no es un elemento HTML5 es una instruccion para el navegador, seguramente te preguntaras que tipo de instruccion, verdad? bueno pues los doctype especifican un modo para el navegador, tal vez no te queda claro pero con lo siguiente seguro que lo comprenderas

La documentacion de la W3C plantea 2 casos: que el doctype este presente o que este ausente.

Cuando el doctype esta ausente los navegadores tienden a utilizar un modo de renderizado diferente que es incompatible con algunas especificaciones

Cuando el doctype esta presente el navegador sigue ciertas especificaciones pertinentes

En esta y esta pagina encontre que los doctypes sirven para especificar el modo del navegador y basicamente plantea los 2 mismos casos de la W3C osea doctype ausente y doctype presente

En el caso de doctype ausente dice que estamos poniendo el navegador en modo quirks, este modo quirks es un modo de compatibilidad y su objetivo es que los documentos viejitos sean presentados adecuadamente, para lograr esto el navegador usara estandares de aquella epoca, algunos de los cuales son incompatibles con los actuales

En el caso de doctype presente dice que estamos poniendo el navegador en modo standard, el objetivo de este modo standard es que el navegador se comporte segun las especificaciones HTML5 y CSS, en otras palabras el objetivo es que el navegador siga las especificaciones pertinentes de HTML5 y CSS

En conclusión, cuando el doctype esta presente le estamos diciendo al navegador "utiliza los estándares actuales(HTML5,CSS3)" y cuando el doctype esta ausente le estamos diciendo al navegador "utiliza los estándares viejitos"

Esto fue todo, espero les haya gustado salu2

lunes, 9 de septiembre de 2013

Estructura de un documento HTML5

La especificación HTML5 de la w3c dice establece la siguiente estructura para los documentos HTML5:

  1. Opcional mente un carácter BOM(U+FEFF)
  2. Cualquier numero de comentarios y caracteres de espacio
  3. Un Doctype
  4. Cualquier numero de comentarios y caracteres de espacio
  5. El element root(elemento raíz html)
  6. Cualquier numero de comentarios y caracteres de espacio

Los caracteres de espacio mencionados anteriormente se refieren a: carácter de espacio, tabulador, salto de linea y retorno de carro

Nota: Los caracteres de espacio que estén después del elemento raíz html serán analizados como si estuvieran al final del elemento body, no nos debería preocupar esta situación debido a que todos los caracteres de espacio se transformarían en un solo carácter de espacio.

Espero que les sea util este post y nos vemos en el siguiente, salu2

miércoles, 4 de septiembre de 2013

Elemento br HTML5

El elemento br es un salto de linea.

El elemento br debe ser utilizado unicamente para saltos de linea que realmente son parte de los contenido.

Por ejemplo este elemento br es util en los poemas debido a que los poemas se clasifican por numero de silabas, poemas de 4,5,6,7,…,14 silabas.

Ejemplo: Supongamos que lo siguiente es un poema de 8 silabas

Texto texto texto texto
Texto texto texto texto
Texto texto texto texto
Texto texto texto texto

Al tratarce de un poema de 8 silabas la regla es la siguiente: 8 silabas un salto de linea, 8 silabas un salto de linea y asi sucesivamente.

Los saltos de linea en este poema se insertaron para cumplir con la(s) regla(s), osea son parte de los contenidos lo cual es el correcto uso de este elemento br

Acordemonos que HTML5 es semantico lo que quiere decir que nunca debemos usar los elementos con propositos de diseño, osea no debemos utilizar este elemento con propositos de diseño.

Otra cosa importante, el elemento br no se debe usar para separar grupos tematicos en un parrafo, para separar los grupos tematicos basta con colocar cada grupo tematico en un parrafo.

Ejemplo: Aquí un parrafo tiene 2 grupos tematicos separados con un elemento br, lo cual esta mal

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p>

Lo correcto seria un parrafo para cada grupo tematico

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>

Una sugerencia para utilizar este elemento adecuadamente es hacerse esta pregunta: ¿El salto de linea que quiero insertar es parte de los contenidos? Si la respuesta es si todo va bien pero si la respuesta es no lo mas seguro es que el salto de linea lo queremos insertar con un motivo de diseño lo cual esta mal y deberemos buscar otra solución.

Saludos y nos vemos en el proximo post