Mi blog de HTML5

Mi blog personal de HTML5

Código HTML5 más limpio con HTML Lint

Código HTML5 más limpio con HTML Lint

Los que escribíamos (y todavía escribimos) código XHTML, sabemos que la sintáxis de este lenguaje es mucho más estricta que la del HTML, ya que el primero es un tipo de XML. Incluso esta ha sido una de las quejas más comunes de quienes al principio preferían al ya abandonado XHTML2 frente al HTML5.

Etiquetas sin cerrar, letras mayúsculas, atributos con valores sin comillas son algunas de las características que vuelven a ser permitidas a la hora de validar sitios en HTML5. No obstante, es bueno seguir manteniendo las buenas prácticas que nos dejó el XHTML, y para los que queremos seguir con la sintáxis del mismo está HTML Lint.

HTML Lint nos permite chequear la sintáxis de nuestro código HTML5. Esto no significa que sea un validador de código HTML, como dice en el sitio de ellos: “Validar ya no es suficiente”.

Por cierto, prueben con las direcciones de sus sitios y después me cuentan, yo ya lo hice con este blog y me dió el resultado de la imagen de este post :)

Anuncios

HTML5 + XML

Traducción de “HTML 5 + XML = XHTML 5″

Traducción de “HTML 5 + XML = XHTML 5″

HTML 5 Doctor es un excelente sitio en inglés en el cual varios expertos escriben sobre este lenguaje. La verdad que vale la pena leer el total de sus artículos ya que son muy interesantes y útiles.

Bruce Lawson es uno de estos gurús, trabaja en la parte de Estándares Web Abiertos para Opera, también es miembro de la “Web Standards Project´s Accesibility Task Force” y de el “W3C Mobile Best Practices Working Group”. El escribe en su blog: www.brucelawson.co.uk y también en www.html5doctor.com.

Bruce muy amablemente me dió el permiso para publicar una traducción de su artículo llamado “HTML5 + XML = XHTML 5” publicado el 2 de julio de 2009 en HTML5 Doctor. Así que ¡muchas gracias Bruce!.

Traducción

Me gusta la sintaxis del XHTML. Es como lo aprendí. Estoy acostumbrado al código en minúsculas, atributos entre comillas y a las barras en elementos como el br y el img. Me hacen sentir bien y cómodo, como una taza de “Ovaltine” y “The Evil Dead” en la tele.

Pero puede que a ti no. Puede ser que tu quieras etiquetas en MAYÚSCULAS, código sin barras y atributos sin comillas. Y, en HTML 5 puedes elegir.

Gracias al principio de “pave the cowpaths“(destino del enlace en inglés; la traducción literal sería algo así como “asfaltar el camino de las vacas”, pero el significado refiere a reutilizar lo que ya se está utilizando si no me equivoco), todo depende de ti. Cómo a ti te guste. Lo que tu quieras, lo que a ti te guste.

Pero no dejes que nadie te diga que el HTML 5 mata al XML, conoce al XHTML 5. XHTML 5 es la serialización XML del HTML 5 y, cómo podrás imaginar, tiene todas las reglas estrictas de parseo que tu esperarías (y estás acostumbrado si, como yo, creciste con los XHTML DOCTYPES). Debe ser servido con un tipo MIME XML, como application/xml o application/xhtml+xml (o sea que Internet Explorer no lo interpretará por el momento) y será frágil ante la violación más sutil al código bien formado. (Ve “Sirviendo XHTML con el tipo MIME correcto” (destino del link en inglés) para más información).

Las reglas habituales de XML aplican: no se permiten “document.writes“, no se requiere un DOCTYPE, algunas diferencias en sintaxis y script para ser cautos y puedes usar namespaces.

Las diferencias principales están resumidas en la wiki oficial de WHATWG, “Diferencias entre HTML y XHTML” (destino del link en inglés). También es posible escribir documentos poliglotas (destino en inglés) que pueden ser procesados por los navegadores, dependiendo del tipo MIME utilizado.

Magne le envió un correo a html5Doctor.com preguntando: “¿es correcto usar etiquetas del HTML5 en una página con el DOCTYPE de XHTML 1.1? ¿Cuál debería usar, qué es lo recomendado ahora?

Si deseas aplicar las nuevas características, necesitas usar el DOCTYPE para HTML5 o XHTML5. Debido a que Internet Explorer no puede procesar XML, por razones pragmaticas la gente de HTML 5 Doctor recomienda usar HTML 5.

Bueno, espero que te haya gustado el artículo traducido, si encontrás algún error, falla o algo mal traducido, por favor, házmelo saber.

Crear lista desplegable

Crear una lista desplegable para cualquier menú horizontal en blogger

La sección de encabezado de un sitio web que incluye sobre todo el logo y el menú de navegación, es la región que atrae a un visitante. Es la primera sección de su diseño de todo lo que llama la atención del lector. Por lo tanto con el tiempo, los diseñadores introdujeron algunas versiones de los menús desplegables usando jQuery y CSS3. La mayoría de ustedes probablemente saben cómo personalizar un menú, pero que a menudo les resulta difícil añadir efectos jQuery a un menú existente, añadir transiciones CSS3 para los efectos de roll over y, especialmente, a su vez un menú horizontal simple en una caída de varios niveles de menús desplegables. Con el fin de entender los fundamentos básicos de HTML de un menú y la estructura de CSS vamos a publicar la serie de tutoriales sobre este tema para que sea extremadamente fácil para la mayoría de ustedes para crear y diseñar los menús por su cuenta.

 
En esta serie se dará a conocer algunos de nuestros códigos de proyecto por primera vez. Usted no encontrará menús simples de HTML aquí. Usted aprenderá cómo crear un menú de lujo totalmente desplegable, convertir un menú horizontal en el menú desplegable, añadir efectos jQuery con deslizamiento suave, añadir efectos de animación CSS3 y mucho más. Si fueron capaces de entender cómo un menú está estructurado y diseñado entonces seguramente se convertirán en un diseñador web optimizado. Estos tutoriales no se limitan a los usuarios de Blogger y WordPress, ya que se puede implementar en cualquier plataforma.

 

Encontrar la clase Menú y el ID

En cada etiqueta HTML del CSS de estilo, deberán utilizar una clase que comienza con un punto (.) O un identificador que se inicia con una almohadilla (#). La única diferencia entre una clase y el identificador es que en una clase se pueden utilizar varias veces, pero un ID puede ser utilizado una sola vez.

Nota: No es necesario aprender la estructura del código, sólo le dan un vistazo rápido para entender los conceptos básicos. Su trabajo es mirar el código del menú en su blog y averiguar su nombre de clase, eso es todo lo que tiene que hacer.

El menú constará de dos partes es decir, CSS (hojas de estilo) y HTML. Puesto que estamos diseñando un menú y su estructura se vería ligeramente similar a esta:

 
 
CSS Part:
 
.navigation {
    width:1000px;
    margin:0 auto;
    height:34px;
}
.navigation ul {
    list-style:none;
    margin:0;
    padding:8px 0 0 0;       
}
.navigation ul li {
    float:left;
    color:#FFFFFF;
    font-size:14px;
    text-transform:uppercase;
    font-weight:bold;
}
.navigation ul li a {
    color:#FFFFFF;
    padding:8px 30px 10px 30px;
    border-right:1px solid #ffffff;
}
.navigation ul li a:hover {
    background:#060505;
    color:#ffffff;
}
 
 
En el código anterior en el menú tiene un nombre de clase que se llama, navigation. Así que en el código HTML este hará que aparezca el menú de la clase usando el atributo class = ” navigation
 
 
HTML Part:
 
  
<div >
            <ul>
                <li ><a href=”#”>home</a></li>
                <li><a href=”#”>about us</a>
                    <ul>
                        <li><a href=”#”>Test 1</a>
                            <ul>
                            <li><a href=”#”>Test 1</a></li>
                            <li><a href=”#”>Test 2</a></li>
                            <li><a href=”#”>Test 3</a></li>
                            </ul>
                        </li>
                        <li><a href=”#”>Test 2</a>
                            <ul>
                            <li><a href=”#”>Test 1</a></li>
                            <li><a href=”#”>Test 2</a></li>
                            <li><a href=”#”>Test 3</a></li>
                            </ul>
                        </li>
                        <li><a href=”#”>Test 3</a></li>
                    </ul>
                </li>
                <li><a href=”#”>services</a></li>
                <li><a href=”#”>contact us</a></li>
                <li><a href=”#”> Sitemap</a></li>
            </ul>
        </div>
 
 
Este mismo concepto se aplica exactamente a todos los menús, sólo los nombres de las clases y la estructura del código son diferentes.
 
 
Agregar en el menú desplegable contenedores

Suponemos que el menú contiene una sencilla lista de enlaces en línea horizontal y no tienen una Columna que cae verticalmente hacia abajo con en el ratón estacionario. Para crear esta columna todo lo que necesita hacer es insertar el siguiente código CSS dentro de la parte de su menú. 

 
.navigation li ul {
    position: absolute;
    left: -999em;
    width: 160px;
    margin: 19px 0 0 0;
    padding: 0;
}
.navigation li:hover ul {
    left: auto;
}
.navigation li li a {
    background: #C70D0D;
    width: 120px;
    color: #FFFFFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
   
}
.navigation li li a:hover {
    background: #060505;
    color: #FFFFFF
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
   border-bottom: 1px dotted #060505;
}
.navigation li ul ul {
    margin: -35px 0 0 145px;
}
.navigation li:hover ul ul {
    left: -999em;
}
.navigation li ul li:hover ul {
    left: auto;
}

 

Realice estos cambios:

Vuelva a colocar la navegación con el nombre de la clase Menú.

Para cambiar el color desplegable de contenedores en el modo activo cambie edición # C70D0D, para el fondo y para el color de la fuente es # FFFFFF.
Para cambiar el color desplegable de contenedores en el cursor del mouse cambie edición # 060505,  para el fondo de color de la fuente # FFFFFF
 
Creación de la lista del menú desplegable Multi Level

Está todo hecho con el trabajo de diseño. Ahora sólo tiene que crear la lista en la parte de HTML.

Cualquier ficha o un enlace en su menú tendrán la siguiente estructura: 

 
<li><a href=”#”>LINK TEXT</a> </li>
 
Para agregar una lista desplegable para esta ficha todo lo que necesitas hacer es pegar el siguiente código justo antes de la etiqueta de cierre li. Véalo a continuación:

<li><a href=”#”>LINK TEXT</a>
<ul>
<li><a href=”#”>FIRST LIST 1</a></li>
<li><a href=”#”>FIRST LIST 2</a></li>
<li><a href=”#”>FIRST LIST 3</a></li>
</ul>
</li>
 
Para agregar una segunda lista desplegable dentro de esta lista vertical, basta con utilizar el mismo concepto. Voy a añadir en la segunda lista vertical después de la pestaña: “FIRST LIST 2”
 
<li><a href=”#”>LINK TEXT</a>
<ul>
<li><a href=”#”>FIRST LIST 1</a></li>
<li><a href=”#”>FIRST LIST 2</a>
<ul>
<li><a href=”#”>SECOND LIST 1</a></li>
<li><a href=”#”>SECOND LIST 2</a></li>
<li><a href=”#”>SECOND LIST 3</a></li>
</ul>
</li>
<li><a href=”#”>FIRST LIST 3</a></li>
</ul>
</li>
 
Les recuerdo que lo demas sigue el mismo patron
 
Guarda y listo ya tienes tu propia lista desplegable para cualquier menu horizontal.
 

Cualquier cosa que no hayan entendido solo déjenme un comentrio y les respondere de inmediato.

Saludos.

Las novedades de HTML5 (y IV)

HTML5 en la Torre de Pisa

Terminamos este especial sobre HTML5 con la parte más desagradable (o agradable) del estándar: lo que se elimina. Es curioso que un montón de elementos comunes pasan a estar prohibidos en HTML5, por razones diversas que ahora veremos. Por esas mismas razones bastantes atributos han sido eliminados bien de un elemento concreto o de todos los elementos.

Sin embargo hay que aclarar estas prohibiciones, ya que hay dos caras en esta moneda. Por un lado los desarrolladores no pueden usarlos, si quieren que sus documentos sean HTML5 válidos. Por el otro lado, los navegadores tienen la obligación de implementarlos y soportarlos, para ser compatible hacia atrás con HTML4 y anteriores. Esta dualidad es muy interesante y nos ahorra bastantes problemas de una manera limpia definida en el estándar.

 

HTML 5. Elementos eliminados

Como decía, estos son los elementos eliminados y las razones de por qué son prohibidos:

  • Los siguientes elementos (muy usados hace pocos años) se quitan de HTML5 porque son puramente presentacionales (no tienen semántica) y todo el tema estético se debe tratar con CSS:
    • basefont
    • big
    • center
    • font
    • s
    • strike
    • tt
    • u
  • Los elementos para trabajar con frames (frame, frameset y noframes) se quitan del estándar por razones obvias: afectan negativamente a la usabilidad y accesibilidad de la web. Además, prácticamente rompen la web, y si se necesita algo similar se puede acudir a los iframe, más potentes y mejor pensados.
  • El elemento acronym se elimina simplemente porque crea confusión sobre su uso, y los desarrolladores no entienden demasiado bien para qué usarlo. Las abreviaciones y acrónimos se pueden marcar con abbr, que sí se mantiene en el estándar.
  • El elemento applet se ha declarado obsoleto y hoy en día no se utiliza. El elemento object reemplaza sus funciones y es lo común hoy en día.
  • El elemento isindex se quita definitivamente. En la era de las cavernas se utilizaba para mandar información al servidor, pero con la llegada de los formularios su uso es arcaico y poco útil.
  • El elemento dir también se declara obsoleto (ya lo era en HTML4), y simplemente se recomienda usar listas normales con ul.
  • El elemento noscript se mantiene en HTML pero no en XML/XHTML, ya que su contenido está en HTML. No estoy muy de acuerdo con este movimiento, pero así será.

HTML 5. Atributos eliminados

Para empezar, todos los atributos referentes a la presentación han sido eliminados, por la misma razón de antes: CSS sirve mejor ese propósito. Recuerdo que el atributo style (que contiene CSS) es ahora universal y puede ser aplicado a todos los elementos, así que si queremos indicar su presentación sin añadir una hoja de estilos aparte, tendremos que usar este atributo. Atención a la lista porque esto sí que es importante, ya que algunos de estos elementos son muy usados, aunque otros están muy obsoletos:

  • Atributo align en todos los elementos.
  • Atributos alink, link, text y vlink en el elemento body.
  • Atributo background en el elemento body.
  • Atributo bgcolor en los elementos table, tr, td, th y body.
  • Atributo border en todos los elementos.
  • Atributos cellpadding y cellspacing en el elemento table.
  • Atributos char y charoff en los elementos col, colgroup, tbody, td, tfoot, th, thead y tr.
  • Atributo clear en el elemento br.
  • Atributo compact en los elementos dl, menu, ol y ul.
  • Atributo frame en el elemento table.
  • Atributo frameborder en el elemento iframe.
  • Atributo height en los elementos td y th.
  • Atributos hspace y vspace en los elementos img y object.
  • Atributos marginheight y marginwidth en el elemento iframe.
  • Atributo noshade en el elemento hr.
  • Atributo nowrap en los elementos td y th.
  • Atributo rules en el elemento table.
  • Atributo scrolling en el elemento iframe.
  • Atributo size en el elemento hr.
  • Atributo type en los elementos li, ol y ul.
  • Atributo valign en los elementos col, colgroup, tbody, td, tfoot, th, thead y tr.
  • Atributo width en los elementos hr, table, td, th, col, colgroup y pre.

Como veis, algunos de estos atributos sí que se mantienen para ciertos elementos, como la anchura y altura en las imágenes. Sin embargo estos no son los únicos atributos que se eliminan, también hay otros que se quitan por redundancia, por evitar confusiones, por su bajo uso o porque simplemente se han quedado obsoletos.

  • Atributo accesskey en los elementos a, area, button, input, label, legend y textarea.
  • Atributos rev y charset en los elementos link y a.
  • Atributos shape y coords en el elemento a.
  • Atributo longdesc en los elementos img y iframe.
  • Atributo target en el elemento link.
  • Atributo nohref en el elemento area.
  • Atributo profile en el elemento head.
  • Atributo version en el elemento html.
  • Atributo name en los elementos img y a. Para obtener un comportamiento similar se recomienda usar id.
  • Atributo scheme en el elemento meta.
  • Atributos archive, classid, codebase, codetype, declare y standby en el elemento object.
  • Atributos valuetype y type en el elemento param.
  • Atributo language en el elemento script.
  • Atributo summary en el elemento table.
  • Atributos axis y abbr en los elementos td y th.
  • Atributo scope en el elemento td.

HTML 5. Otros cambios

Hay diversos elementos que no se eliminan por su extendida fama, pero que siendo un tanto ortodoxos deberían eliminarse. Para evitar esto los que están escribiendo el estándar han tenido que redefinir su definición, de tal forma que se tratan de manera similar pero semánticamente son diferentes.

Un ejemplo muy claro es u e i, muy usados pero que progresivamente pierden importancia frente a strong y em. Estos dos elementos, que indicaban negrita y cursiva respectivamente, pasan a definirse de una manera muy vaga para indicar un texto diferente en alguna manera al texto normal. Otros elementos se redefinen, particularmente me resulta curioso que se mantenga small mientras big se elimina. De cualquier manera, no es demasiado relevante para los desarrolladores web, en el sentido de que podrán seguir usándolos como ahora.

HTML5. Conclusiones

Tal y cómo habéis ido viendo, las novedades de HTML5 se centran en facilitar la implementación de aplicaciones web, avanzar hacia la web semántica y limpiar un poco toda la basura heredada de las anteriores versiones de HTML. Aunque todo eso parezca lejano, lo cierto es que muchos navegadores ya implementan algunas partes sueltas de HTML5, y ya existen varias páginas experimentales que juegan con estos elementos. Por ejemplo, cerramos este minucioso especial precisamente en el día en que Firefox 3.5 es lanzado, pero Safari, Opera, Chrome e incluso IE8 ya soportan algunas cosas.

Ahora queda preguntarnos, ¿cuándo se acabará este estándar? Precisamente no hay ninguna fecha, y la condición para que HTML5 se considere estándar es, según la W3C, que al menos un navegador implemente todo HTML5 correctamente. De esta manera se asegura que todo el estándar es factible, que puede ser implementado. Para esto puede quedar dos o tres años, si todo va bien, pero nada es seguro.

Las novedades de HTML5 (III)

HTML5

Después de las dos primeras entregas de este repaso a HTML5 (parte I y parte II), llegamos a la parte dinámica del estándar, lo que se añade al DOM y a Javascript para conseguir aplicaciones web avanzadas. Por un lado tenemos diversas APIs, es decir, conjuntos de funciones y herramientas que implementan un propósito concreto. Por el otro lado tenemos varias funciones y atributos que sirven a propósitos más generales y que no se pueden enmarcar en una API concreta.

 

HTML 5. Nuevas APIs

No está claro que todas las APIs siguientes se vayan a incluir en el estándar HTML5 propiamente, de hecho seguro que alguna de ellas se separará creando un estándar propio dedicado. De cualquier forma, estas son las nuevas APIs que nacen o se desarrollan en HTML5:

  • Una API para dibujar en 2D, que se podrá usar junto al nuevo elemento canvas. Básicamente, se pueden pintar elementos sobre un lienzo, de manera similar a lenguajes como Java.
  • Una API para controlar los nuevos elementos multimedia, video y audio. Así podremos controlar la reproducción con código Javascript, algo interesante pero que puede dar más de sí.
  • Una API para guardar datos localmente, utilísimo para que las aplicaciones web puedan trabajar sin necesitar conexión a Internet. Ese DOM storage está ya implementado en las últimas versiones de los grandes navegadores, así que dentro de poco podremos disfrutar de esta clase de aplicaciones sin necesidad de extensiones como Google Gears.
  • Una API para que las aplicaciones web puedan enlazarse a protocolos o tipos de archivos MIME, otro añadido extremadamente útil. Esto permitiría abrir las fotos de tu disco duro directamente en una aplicación de retoque online, o un archivo mp3 en una biblioteca online, etc…
  • Una API para editar los campos que sean editables, valga la rebuznancia. Esto permite controlar los elementos HTML que son editables por el usuario, tipo Word. Por ejemplo, Google Docs o editar HTML en emails será muy sencillo, y con esta API es trivial cambiar ese contenido con Javascript.
  • Una API para controlar las acciones Drag & Drop sobre los elementos que se puedan arrastrar. Esto se puede conseguir actualmente con algunas librerías, pero con esta API el navegador lo permite de manera nativa y más poderosa.
  • Una API para controlar el historial desde una aplicación web. Esto permitirá a las aplicaciones web que se muevan con Javascript añadir páginas al historial para que los botones Atrás-Adelante funcionen siempre.
  • Una API para habilitar la comunicación entre varias “páginas web”. Es decir, si tenemos varios iframes externos en una web, podemos comunicarnos con ellos y compartir información de manera segura, por ejemplo con gadgets de Facebook o similares.

HTML5. Novedades en el DOM

Se han añadido a los elementos del DOM nuevas funciones y atributos que facilitan su uso y permiten realizar acciones muy usadas. Aquí comentaré los más interesantes, que trabajan sobre el documento (HTMLDocument) o sobre cualquier elemento (HTMLElement).

  • La función getElementsByClassName() se añade a todos los elementos y al documento. Su funcionamiento es similar a getElementsById(), pero en este caso selecciona todos los elementos del documento o de cierto subárbol del documento que contengan esa clase. Su definición es tan amplia que incluso elementos que contenga SVG o MathML pueden ser encontrados.
  • El atributo classList está disponible para cualquier elemento, y contiene una lista con todas las clases que tiene ese elemento. Además contiene varios métodos que facilitan trabajar con esa lista: buscar, modificar, borrar, etc. Muy útil para trabajar con elementos que puedan tener más de una clase, es muy sencillo y muy conveniente de usar. Los enlaces también tienen un elemento similar adicional llamado relList que permite lo mismo pero con el atributo rel (como el famoso rel=”nofollow”).
  • El atributo innerHTML se añade, por fin, al estándar. Prácticamente usado por todas las aplicaciones web y soportado por todos los navegadores, creo que todos los desarrolladores web lo conocen de sobra. Para aquellos que no lo conozcan, este atributo permite trabajar con el contenido de un elemento en texto plano, incluso cambiando elementos HTML que pueda haber. Igualmente, se añade a todos los elementos y al propio documento, pudiendo cambiar TODO el contenido de una web.
  • Los atributos activeElement y hasFocus están disponibles sobre un documento, y permiten conocer qué elemento está activo y si el documento tiene el foco, respectivamente.
  • La función getSelection() se aplica también al documento y devuelve un objeto con el texto y elementos que están seleccionados.
  • El atributo designMode es otra novedad sobre el documento e indica/modifica que el documento pueda o no ser editado.
  • La función execCommand() se aplica sobre el documento y permite ejecutar acciones o “comandos” típicos de edición de documentos. Por ejemplo, con este método se llamaría a los útiles copiar/pegar, pero también a otros típicos como crear un enlace o cambiar el color de un elemento. Como el anterior, la mayoría de estos comandos trabajan sobre elementos editables.

Con esto ya hemos acabado con todas las novedades de HTML5, al menos las más importantes e interesantes para los desarrolladores web. Pero aún nos queda una parte muy importante: los elementos y atributos que se eliminan del estándar y que formaban parte de HTML4 y anteriores. Son muchos y variados, y algunos pueden causar más de un dolor de cabeza, así que los dejamos para la cuarta y última entrega de este especial.

Las novedades de HTML5 (II)

HTML5

Si en la primera parte de este repaso a HTML5 os comentamos todos los nuevos elementos, ahora vamos a centrarnos en los nuevos atributos más interesantes. Al igual que como comentaba en la primera parte, hay que tener en cuenta que no es un estándar acabado, así que estas especificaciones pueden cambiar y cambiarán. También hay que tener en cuenta que estos no son todos los cambios, solo he seleccionado los relevantes para el día a día de un desarrollador web. Por último, habría que distinguir entre los atributos que solo afectan a un subconjunto de los elementos y los globales, que afectan a cualquier elemento.

HTML5. Nuevos atributos

Los elementos ya existentes añaden nuevos atributos que permiten hacer cosas muy interesantes. Los más importantes o novedosos son:

  • Atributo ping para el elemento a. Este atributo contiene una lista de URLs, las cuáles serán llamadas cuando un usuario haga click en ese enlace. Por ejemplo, un uso práctico sería para estadísticas.
  • Atributo autofocus para los elementos de un formulario. Indica qué elemento de un formulario debe ganar el foco al cargar una página. Por ejemplo, en la página principal de Google la cajita de texto gana el foco automáticamente para ayudarnos a escribir sin usar el ratón.
  • Atributo form para los elementos de un formulario. Indica a qué formulario pertenece este elemento, y permite poner un elemento de un formulario en cualquier parte de una página. Tal y como está ahora, todos los elementos deben ir dentro de <form>.
  • Atributo required para los elementos de un formulario. Indica que es obligatorio rellenar un valor para enviar ese formulario, algo que hoy en día se comprueba con Javascript o en el servidor.
  • Atributos autocomplete, min, max, multiple, pattern y step para los elementos input. Estos atributos indican que el valor del input debe cumplir ciertos requisitos, por ejemplo seguir cierto patrón.
  • Atributo novalidate para el elemento form. Esto deshabilitará la validación de sus elementos, algo útil si se usa dinámicamente (es decir, con Javascript, activando y desactivándolo).
  • Atributos formaction, formenctype, formmethod, formnovalidate, y formtarget para los elementos de un formulario. Estos atributos modifican los atributos del formulario si el elemento es usado (por ejemplo un botón es pulsado o un input es rellenado). Esto permite que dependiendo qué botón usemos podemos tratar el formulario en diferentes páginas usando solo un formulario, algo complicado en HTML4.
  • Atributo scoped en el elemento style. Esto permite aplicar estilos solo a cierto subárbol del documento. Por ejemplo, imagina que tenemos un elemento con id igual a “cabecera”; si añadimos el atributo scoped a un style, los estilos contenidos en él solamente se aplicarán a ese elemento y a sus hijos.
  • Atributo async en el elemento script. Con este atributo especificamos que el código interno se puede ejecutar en cualquier momento de la página, mejorando la velocidad de carga.
  • Atributo manifest en el elemento html. Esto permite indicar nuevos elementos, sobre todo será útil en aplicaciones web.
  • Atributo reversed en el elemento ol. De esta forma la lista será numerada en orden descendiente (3, 2, 1…).

HTML 5. Nuevos atributos globales

Además de los anteriores tenemos otros atributos que pueden ser aplicados a todos los elementos de un documento. Esto lo hacen especialmente conveniente si vamos a usar Javascript para modificarlos dinámicamente, ya que no tenemos que comprobar el tipo de elemento para usar los atributos comunes.

  • Atributos id, class, style, title, lang y tabindex, ya existentes pero ahora permitidos en todos los elementos. Pues eso, los atributos más usados se vuelven universales.
  • Atributo contenteditable, para indicar que el elemento es editable por el usuario. Muy interesante, ya que ahora podremos editar cualquier cosa de manera trivial para el desarrollador, no solamente los elementos de un formulario.
  • Atributo contextmenu, para indicar un menú contextual sobre un elemento. Como veis, está todo muy pensado para las aplicaciones web.
  • Atributos data-*, donde el asterisco puede ser cualquier nombre. Esto permite atributos personalizados, que luego podremos obtener con Javascript.
  • Atributo draggable, para indicar que un elemento se puede arrastrar.
  • Atributo hidden, para ocultar un elemento que ya no interesa.
  • Atributo spellcheck, para indicar si el contenido de un elemento debe ser pasado por el corrector ortográfico.

Por supuesto estos no son todos los cambios, en próximas entregas explicaremos otros aspectos de este nuevo estándar.

Las novedades de HTML5 (I)

 

El logo (falso) de HTML5

HTML5 está llamada a ser el reemplazo del actual (X)HTML, una de las patas de la web desde su nacimiento. Precisamente en un momento en el que la web está lo suficientemente madura, este estándar aprende de los errores cometidos e intenta solucionar la mayoría de problemas con los que un desarrollador web se encuentra. Como muchas de sus novedades son interesantes y afectan directamente a la futura web, desde AnexoM te vamos a comentar en varios artículos los cambios más importantes, empezando por este artículo donde comentaremos los nuevos elementos.

Antes de seguir habría que aclarar que HTML5 sigue en borrador y lo seguirá estando durante algunos años más. El enfoque general ha cambiado bastante respecto a versiones anteriores de HTML, añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad. También se tiene en cuenta que muchas páginas web actuales son dinámicas, pareciéndose más a aplicaciones que a documentos. Algo básico es que HTML5 está definido en base al DOM (la representación interna de una web con la que trabaja un navegador), dejando de lado la representación “real”, definiendo a la vez un estándar HTML y XHTML.

 

HTML 5. Mejor estructura

Hoy en día se abusa bastante del elemento div, que nos permite estructurar una web en bloques. En HTML5 hay varios elementos que sirven para estructurar mejor una página web, estableciendo qué es cada sección, y reemplazando en muchas ocasiones a div. Con este extra de semántica, será mucho más coherente y fácil de entender por otras personas. Y lo que es más importante, será trivial de entender para una máquina, dándole más importancia a unas secciones y pudiendo jugar con esos datos automáticamente. Concretamente, la tarea de un buscador será mucho más fácil, pero cualquier aplicación que “lea” páginas web se beneficiará. Estos son los elementos:

  • section representa una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.
  • article representa un contenido independiente en un documento, el caso más claro son las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada podremos tener varios artículos demarcados semánticamente, por lo que una herramienta puede extraerlos fácilmente.
  • aside representa un contenido que está muy poco relacionado con el resto de la página, como una barra lateral. Esencial para delimitar el contenido “importante” del contenido “de apoyo”, haciendo más caso al primero que al segundo.
  • header representa la cabecera de una sección, y es de suponer que se le dé más importancia que al resto, sobre todo si la sección es un artículo.
  • footer representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
  • nav representa una sección dedicada a la navegación entre el sitio, como la típica barra superior de los periódicos.

HTML5 estructurado

En la anterior imagen vemos un ejemplo de cómo cambiaría un documento escrito en HTML normal a HTML5 con estos elementos.

HTML5. Mejores formularios

El elemento input ha sido ampliado y ahora permite todos estos tipos de datos:

  • datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora.
  • number para que el usuario indique un número.
  • range para indicar un rango entre dos números.
  • email para indicar un correo electrónico.
  • url para indicar una dirección web.
  • search para indicar una búsqueda.
  • color para indicar un color.

Lo más interesante de esto es que los navegadores podrán implementar interfaces específicas para cada tipo de dato, por ejemplo una fecha o un color se podrán indicar de manera directa e intuitiva. Otro ejemplo sería el teclado del iPhone, que muestra unos símbolos u otros dependiendo de si es un texto normal, un email (añade @ y el punto) o una url (añade la barra y el punto com), y que por tanto gana mucho con este estándar.

HTML 5. Otros elementos importantes

  • audio y video sirven para incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Sin duda uno de los añadidos más interesantes, ya que permite reproducir/controlar vídeos y audios sin necesidad de plugins como el de Flash. Se tratan de manera totalmente nativa como cualquier otro elemento, por ejemplo se pueden incluir enlaces o imágenes dentro de un vídeo. Aunque las implementaciones actuales son un tanto ineficientes, se espera que en un futuro próximo se optimicen. Portales de vídeo como Youtube o Dailymotion ya están empezando a mostrar que un futuro sin Flash es posible (¡y necesario!).
  • embed sirve para contenido incrustado pero no nativo, sino ejecutado por plugins como el de Flash. Aunque embed está soportado por casi todos los navegadores desde hace tiempo, es ahora cuando entra parte del estándar y evita el infierno/pelea entre object y embed.
  • canvas es un elemento complejo que permite generar gráficos, dibujando elementos dentro de él. Aunque nunca hayas oído hablar de él, seguro que lo has usado alguna vez, por ejemplo de Google Maps. Es un elemento muy potente que dará bastante que hablar en el futuro, y que será el culpable de aplicaciones web espectaculares.

HTML5. Más elementos

  • dialog se plantea para escribir conversaciones, por ejemplo para transcripciones de chat.
  • figure se plantea para asociar un contenido multimedia (una foto, un vídeo, etc) a un título o leyenda.
  • mark representa un texto resaltado, por ejemplo para resaltar una búsqueda.
  • meter representa una medida, como el número de KB. Tiene más sentido si lo unimos con…
  • progress representa el estado de una tarea, y se puede usar por ejemplo al subir un documento o al realizar varias tareas pesadas. Esto permitirá barras de tareas personalizadas y potentes.
  • time representa una fecha o una hora.
  • command representa un comando que el usuario puede ejecutar en su navegador.
  • output representa una salida de un programa, probablemente ejecutado directamente en el navegador, como una calculadora.
  • datagrid representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información. Será útil sobre todo si se quiere trabajar con aplicaciones que necesiten de bastantes datos a la vez en el lado del cliente.

En las próximas entradas veremos más novedades interesantes de HTML5, centrándonos en aspectos más dinámicos.

Saludos

Bienvenidos, En este blog ire informando de toda las evoluciones que vaya teniendo en este mundillo, principalmente con HTML5 y sus allegados CSS3, Javascript, ect… Espero que sea de vuestro interés y compartais comentarios. Muchas Gracias

Navegador de artículos