HTML 5, información útil en español

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

Cartagen, mapas vectoriales con el elemento CANVAS en HTML5

Cartagen, mapas vectoriales con el elemento CANVAS en HTML5

Un compañero de trabajo me comentó sobre el proyecto Cartagen hace unos días y me pareció bastante interesante. Cartagen, según su wiki, es:

“Cartagen es un framework o librería para renderizar mapas basados en vectores hecho en HTML5 nativo.Escrito en Javascript, utiliza el nuevo elemento Canvas para cargar los datos del mapa desde varias fuentes, incluyendo OpenStreetMap. Seguir leyendo »

20 enlaces en español para comenzar con HTML5

20 enlaces en español para comenzar con HTML5

Desde que se anunció la nueva aplicación llamada Google Wave, se ha generado muchísimo interés por el lenguaje HTML5: nuevos elementos de estructura, nuevas funcionalidades, las etiquetas para multimedia, diferencias con la versión 4, etc. Este interés se ha manifestado de abundante clara en los diferentes blogs y sitios relacionados al tema.

Es por esto que decidí listar y categorizar todos los artículos en español (los que conozco) que considero pueden ser de utilidad si quieres aprender más sobre esta nueva tecnología, y de una vez por todas empezar a hacer algo en HTML5 :) . Aquí va la lista por categorías, obviamente que estás invitado (¡OBLIGADO! :) ) a comentar este post con el enlace a algún otro artículo que no esté en la lista, siempre en español ;) .

Novedades Generales del HTML5:

Google Wave

Nuevos elementos

Nuevas Funcionalidades

Propuestas

Sintáxis y Semántica en el HTML5

Como siempre estás invitado a comentar, pero esta vez, además te invito a que me indiques algún artículo que encuentres útil y que no esté en la lista (solo artículos en ESPAÑOL), para así poder ir actualizando la lista, y hace algo que nos sirva a todos.

Buena noticia para el futuro del HTML5

Buena noticia para el futuro del HTML5

Acabo de leer en Maestros Del Web, esta muy buena noticia, que me parece adelanta de alguna forma el futuro del uso del HTML5: Digg y YouTube van a dejar de brindar soporte al Internet Explorer 6.

Según la noticia, estos dos gigantes van a reaccionar de diferente forma frente a los usuarios de IE6.

Usuarios de Digg con IE6

Los visitantes de Digg.com que entren con dicho navegador, veran que sí pueden ver todo el contenido del sitio, pero no podrán iniciar sesión, quedandose sin muchas de las opciones más importantes que brinda el sitio.

Usuarios de YouTube con IE6

Si, de ahora en adelante, entras a YouTube utilizando el Internet Explorer 6, este sitio (de Google), te va a mostrar un alerta diciendo algo así como: “Pronto vamos a dejar de dar soporte para tu navegador. Por favor, actualízate a alguno de estos navegadores más modernos“. Los navegadores ofrecidos son: Google Chrome, FireFox 3.5 e Internet Explorer 8.

Esta es, sin dudas una muy buena noticia para la comunidad de desarrollo web, la versión 6 del Internet Explorer ya tiene 8 años, y a la hora de maquetar un sitio en HTML para que se vea bien, es como hacerlo todo de nuevo. Pero la buena noticia no solo queda ahí, por lo menos para el propósito de este blog. :)

Los tres Navegadores que YouTube está recomendando, soportan pequeñas partes del boceto actual del HTML5. Por ejemplo, el FireFox 3.5 soporta los nuevos elementos audio y video, así como también la etiqueta canvas es soportada parcialmente por este navegador.

El Google Chrome también soporta alguna de las nuevas características del HTML5. Una de ellas, es la de los “Web Forms 2.o” (o Formularios Web 2.0), que indica que ahora el atributo type de un input de un formulario, puede tener valores para crear selectores de fecha, valores para validar el campo como un correo electrónico o un sitio web, etc.

Mientras que Internet Explorer 8 (IE8), tiene un soporte muy básico del elemento canvas, soporte parcial para la funcionalidad “drag and drop” (arrastrar y soltar), o el nuevo atributo contenteditable, que permite editar el contenido del HTML mediante WYSYWIG.

En futuros posts voy a ecribir más sobre el tema del soporte que cada “navegador moderno” le está dando al HTML5 y también sobre los nuevos atributos, elementos y funcionalidades que aparecen en esta especificación.

Creo que si bien falta para que el lenguaje HTML 5 se convierta en algo popular (no solo porque su especificación esté en proceso), esta es una buena noticia para los diseñadores, maquetadores y desarrolladores web… y para los que queremos usar el HTML5 lo más pronto posible en nuestros proyectos web.

Puedes leer la noticia en el sitio de Maestros del Web (de donde fue sacada la imagen de este artículo), o en también Cristalab.

Listas con encabezados y el elemento figure

Listas con encabezados y el elemento figure

Leyendo este FAQ en la página de WHATWG, encontré una sección que me pareció interesante llamada “Feature Proposals” (algo así como Propuestas Especiales o Propuestas Principales) en la que se nombran algunas de las propuestas que han sido presentadas para la especificación del HTML 5, pero que por uno u otro motivo no fueron tomadas en cuenta. Además, en la mayoría de ellas, dan una breve razón del rechazo y nos dan otro camino por el cual se puede resolver el mismo problema que solucionaba la propuesta.

Una de estas sugerencias es que el HTML5 debería soportar encabezados (o cabezas) para las listas. En principio me pareció una buena idea, poner una etiqueta especial (por ejemplo “lh“) dentro de la etiqueta ul, antes de los respectivos li. En primera instancia no suena raro.

Pero, en el mismo texto de “respuesta” a la propuesta en cuestión, se brindan dos tipos de soluciones distintas que me parecieron más lógicas y de mejor semántica que la anterior.

La primera y más novedosa: englobar la lista entera (ul) entre el nuevo elemento figure. El elemento figure es uno de los nuevos elementos en HTML5, el cual también puede incluir otro elemento llamado legend. Esto es lo que dice la documentación actual sobre estas dos etiquetas:

“El elemento figure representa algún “contenido corriente” (”flow content”), opcionalmente con una leyenda, que está contenida en sí mismo y está típicamente referenciado como una unidad del flujo principal del documento.

Por lo tanto el elemento puede ser usado para ilustraciones, diagramas, fotos, listas de código, etc, que están referidos desde el contenido principal del documento, pero eso puede ser movido, sin afectar el flujo del documento, fuera del contenido primario, por ejemplo al lateral de una página, a páginas dedicadas, o a un apéndice.”

El elemento hijo, llamado legend, puede estar o no, y precisamente sirve como leyenda del contenido de su elemento padre.

Teniendo esto en cuenta, es que proponen alguna de estas dos soluciones (ambos códigos son los que están en la página del FAQ ya mencionada) para que las listas tengan encabezado si así fuese necesario:

 <figure>
  <legend>Apples</legend>
  <ul>
   <li>Granny Smith</li>
   <li>Evil Apple of Knowledge</li>
   <li>Apple, Inc</li>
  </ul>
 </figure>

En donde la lista (ul) con sus respectivos ítems (li) están contenidos dentro de la etiqueta figure, siendo la etiqueta legend el encabezado de la lista.

La otra solución brindada es utilizar listas de definición (dl) para un grupo de listas, siendo el término de definición (dt) el encabezado de cada lista, y la lista en sí contenida en cada definición (dd). Como siempre, con el ejemplo se entiende mejor:

 <dl>
  <dt>Dry:</dt>
  <dd>
   <ul>
    <li>1c flour</li>
    <li>1/4c sugar</li>
    <li>1tsp baking soda</li>
   </ul>
  </dd>
  <dt>Wet:</dt>
  <dd>
   <ul>
    <li>1 egg </li>
    <li>1/2c milk</li>
    <li>1tsp vanilla extract</li>
   </ul>
  </dd>
 </dl>

¿Qué te parece la propuesta, y las dos formas alternativas brindadas por el WHATWG?

Cómo siempre digo, si encuentras algún error, ya sea conceptual, ortográfico o de traducción, házmelo saber. Así como tu opinión o crítica.

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.