sábado, 31 de agosto de 2013

Mejor estructura - I

Actualmente es abusivo el uso de elementos DIV para estructurar una web en bloques. El HTML5 nos brinda varios elementos que perfeccionan esta estructuración estableciendo qué es cada sección, eliminando así DIV innecesarios. Este cambio en la semántica hace que la estructura de la web sea más coherente y fácil de entender por otras personas y los navegadores podrán darle más importancia a según qué secciones de la web facilitándole además la tarea a los buscadores, así como cualquier otra aplicación que interprete sitios web. Las webs se dividirán en los siguientes elementos:

· <section></section> - 
Se utiliza para representar 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 creando jerarquías del contenido, algo mu favorable para el buen posicionamiento web.

· <article></article> -
El elemento de artículo representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos de los foros, una revista o el artículo de periódico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o gadget, o cualquier otro artículo independiente de contenido.
Cuando los elementos de <article> son anidados, los elementos de <article> interiores representan los artículos que en principio son relacionados con el contenido del artículo externo. Por ejemplo, un artículo de un blog que permite comentarios de usuario, dichos comentarios se podrían representar con <article>.

viernes, 30 de agosto de 2013

Manual de HTML5 en español,

El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje de programación “básico” de la World Wide Web, el HTML. Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo problemas con los que los desarrolladores web se encuentran, así como rediseñar el código actualizandolo a nuevas necesidades que demanda la web de hoy en día. 
Debido a que estos cambios afectaran la forma de desarrollar la web en un futuro inmediato, desde The Process, plantearemos una serie de artículos donde desvelaremos los cambios más importantes. Actualmente el HTML5 está en un estado BETA, aunque ya algunas empresas están desarrollando sus sitios webs en esta versión del lenguaje. 
A diferencia de otras versiones de HTML, los cambios en HTML5 comienzan añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad. Se tiene en cuenta el dinamismo de muchos sitios webs (facebook, twenti, etc), donde su aspecto y funcionalidad son más semejantes a aplicaciones webs que a documentos.

jueves, 29 de agosto de 2013

HTML5 en acción - V

TiaXime.com
El diseño de Tia Xime sería infernal de implementar si no fuera por CSS3. Que se joda la gente que usa IE6.

miércoles, 28 de agosto de 2013

HTML5 en acción - IV

Facebook 
Las versiones móviles y desktop de Facebook hacen un uso intensivo de CSS3 para diseño y animaciones, así como de Web Sockets (o Pubsubhubbub) para las notificaciones de actividad y el chat. Muchas apps de Facebook usan otras capacidades.

martes, 27 de agosto de 2013

HTML5 en acción - III

Scribd.com 
Scribd es un servicio que convierte cualquier PDF, PPT o PSD en HTML plano, con texto seleccionable y rendereado en el navegador, gracias en especial a @font-face y SVG.

domingo, 11 de agosto de 2013

HTML5 en acción - II

Gmail.com
Gmail usa Web Storage para guardar en el disco del usuario los más recientes correos. Así puedes acceder a ellos temporalmente si se cae la conexión. También usa Drag and Drop para arrastrar y soltar archivos adjuntos, entre otras habilidades de CSS3 para diseño.

sábado, 10 de agosto de 2013

HTML5 en acción - I

Sitios de uso general que ya están utilizando HTML5 Una lista corta de sitios que ahora mismo, en producción usan HTML5. Twitter1 y m.twitter.com2
Casi todo el diseño de las versiones desktop y móvil de Twitter usan intensivamente CSS3. En especial por los bordes redondeados. En la versión móvil de Twitter se usa geolocalización sumado a Google Geolocation Services para geolocalizar los tweets.

viernes, 9 de agosto de 2013

Entendiste HTML5Boilerplate? Vamos a ponernos en acción con Inializr!

Y ahora que entiendes como funciona HTML5Boilerplate, genera tu propia plantilla para tu proyecto con Initalizr, un hijo educado de este proyecto que te permite determinar ciertas propiedades para arrancar con tu desarrollo. Te venden que en 15 segundos vas a estar funcionando, así que las cosas cada vez se ponen más fácil. Como en los viejos tiempos cuando le dabas new html en frontpage o dreamweaver. http://initializr.com/

jueves, 8 de agosto de 2013

Como arrancar con HTML5 en diez minutos

No se puede entender HTML5 como una sola tecnología, sino recordemos que es una estrategia de marketing para promover una serie de tecnologías complementarias. 
Asimilar todas las posibilidades e introducirte requiere tiempo, aunque por suerto existe un atajo.Uno de los proyectos más maravillosos que debe ser comprendido por cualquier entusiasta del HTML5 es Boilerplate. Es una colección de una plantilla en html, una hoja de estilos, algunas librerías .js y plantillas de base .txt y un .htaccess. Básicamente la navaja suiza de hoy para empezar a realizar cualquier sitio web cuidandose de la compatibilidad de navegadores. 
El proyecto con 220 commits y más de 102 colaboradores, actualizado al 21 de marzo del 2011 es la mejor colección existente y en múltiples idiomas que combina el uso correcto de los nuevos tags HTML5 con hacks CSS más relevantes de los últimos años, hasta las buenas prácticas a incluir para optimizar para móviles, optimizar para motores de búsqueda y más importante, optimizar para seres humanos. Si conoces de GIT, apunta tu terminal a esta dirección y haz un clon local:

http://github.com/paulirish/HTML5-boilerplate/zipball/v1.0

Adicionalmente, en el sitio oficial encontrarás toda la documentación, videos detallados de su uso y toda una comunidad que nace en busca de comprender a fondo el HTML5. Independientemente de si nuestra guía te ha sido de utilidad, que sigas los enlaces a este recurso si aún no lo conoces es el mejor aporte que podemos darte en este tema. 
Dato importante adicional, todo el proyecto de HTML5Boilerplate nace de la iniciativa de Mickael Daniel. Desde que lo conocimos nuestro servidor de desarrollo en mlw.io se llama Mickael en su honor, muy merecido lo tenía.

miércoles, 7 de agosto de 2013

Media Elements

http://mediaelementjs.com/

Otra de las propuestas, con un player para <video> y <audio> que además tiene versiones compatibles con un flash player para navegadores viejos. Es de esos que te permiten aprender basasnte mientras juegas con su código.

Importante con el tema del video entender que HTML lo ha reconocido como una de las bases más importantes de la web del presente y su mundo de posibilidades es increible. Imagina un sitio web cuyo fondo es un video mientras que las acciones reproducen otro video que se anima junto a efectos en CSS 3 genera una experiencia completa en tu navegador. Más adelante verás ejemplos concretos. 

martes, 6 de agosto de 2013

Players

Finalmente, hay un inciso más en el mundo de <video>. Cuando escribía esta guía me daba cuenta que si lo explicamos todo con detalle podemos hacer una Guía exclusiva del mundo del Video en HTML5 y seguramente sería más grandota que esta. Lo ponemos en la lista de pendientes.
La opción de “controls” en el tag video abre un mundo de posibilidades para que te pongas a generar un reproductor visible al usuario personalizado. Y los hackers del mundo han visto opción para poner su talento artístico a disposición de los demás. Hay muchas opciones de players de video que puedes utilizar e incluir en tus páginas HTML5. La mejor opción para conocer esta ensalada es:
Las opciones son muchas y hay demasiados grupos de desarrolladores asegurando generar buenas alternativas al estandar definido en cada navegador.

lunes, 5 de agosto de 2013

¿Qué formatos podemos incluir? - II

VP8.

Google compró hace unos años a una empresa llamada On2 por una millonada descabellada porque tenían avances con desarrollos de codecs de videos. Y unos años después ponen a disposición del mundo el VP8. Es todo lo bueno que puedas pedir en este tipo de enrollos legales ya que lo liberaron gratis, sin pagar derechos ni nada raro a quien lo quiera usar. Es un regalito de Google para el mundo. Pero Microsoft y Apple no quieren regalos de nadie, así que ya entenderás cuál es el problema de este formato.

Theora.

No tiene dramas de patentes, es royalty free, funciona en Linux y es seguramente el que viene en archivos Ogg. De hecho, se basa en desarrollos de On2 (la empresa que eventualmente fue adquirida por  Google) y llevó esto por otro camino que es muy libre, transparente, bueno, lindo, pero menos popular.
Puedes instalar decodificadores en windows, en mac. Hoy lo soporta Chrome (junto a VP8) y suena maravilloso pero como todo lo gratis y open source, pareciera que le hace falta alguien de marketing que lo popularice un poco más. Google es amigo de este formato.
Resumen ejecutivo de estos formatos, tienes que usar al menos h.264 y Theora o VP8 para que la web te vea. No puedes usar solo uno, toca elegir dos.
Y por cierto, solo hemos hablado de codecs de video. El drama con codecs de audio también nos trae opciones y complicaciones que te recomendaría investigar.

domingo, 4 de agosto de 2013

¿Qué formatos podemos incluir? - I

Aquí es super importante entender una diferencia entre los tipos de archivo y los codex con que el video ha sido procesado. Un .avi, .mp4 (o .m4v), un .flv (flash video) y un .ogv simplemente contienen un video, pero cada formato puede tener diferente forma de codificarlo.

Los navegadores y las compañias que los producen han elegido soportar únicamente a algunos codecs y lamentablemente no existe una alternativa definitiva y universal. En serio, no existe, tenemos tag <video> y el drama ha quedado por aquí, en que tienes que codificar tus videos al menos en algunos formatos para asegurarte que funcione en todos lados. ¿Ven por qué Youtube sigue siendo una opción maravillosa?

Hablemos entonces de Codecs. Hay 3 que importan hoy en día: H.264, VP8 y Theora.

H.264.

Conocido como MPEG-4 Advanced Video Codiging, es el más popular hoy en día, lo usa youtube cuando
muestra videos desde el flash player (el flash player lo soporta sin problema). Es el que le da vida a los videos en un iPhone, en tu iPad. Incluso muchos reproductores de Blue-ray lo soportan. Es genial, es asombroso, pero tiene algunos temas legales detrás que complica su existencia. Hay un grupo, el MPEG LA group que tiene patente sobre este formato y le quiere cobrar a todos los que decodifiquen su formato. Google no es muy amigo de este formato. Chrome ya tiene el 20% del mercado y Android sigue creciendo. En enero le dijeron adiós1.

sábado, 3 de agosto de 2013

Uso del tag


  •  autoplay = dará play al video en cuanto cargue la página sin acción del usuario sobre los controles.

<video src=”un-video-mlw.avi” width=”320” height=”240” autoplay></video>


  • controls = invoca a incluirse los controles (play, pausa, volumen, etc.) en el player del video. Estos

controles están predefinidos en cada navegador y como veremos más adelante en algunos players
opciones pueden ser modificados con javascript + css3.
<video src=”un-video-mlw.avi” width=”320” height=”240” controls></video>

viernes, 2 de agosto de 2013

Uso del tag video y el soporte de formatos en diferentes navegadores - I

Si hablamos de navegadores, recuerda que hay una versión donde el video empezo a existir. Antes, simplemente no va a mostrar contenido y detectarlo para mostrar un player alternativo (en flash) es  recomendado:

IE 9+, Firefox 3.5+, Chrome 3.0+, Safari 3.0+, Opera 10.5+, Android Browser 2.0+, Safari Mobile 1.0+

Para incluir un video con HTML5 usas el siguiente formato:

<video src=”un-video-mlw.avi” width=”320” height=”240”></video>
Adicionalmente al ancho y alto, hay atributos adicionales que puede usar:
ÐÐ preload = que empezará a precargar el video independientemente de las acciones del usuario
sobre el player.

<video src=”un-video-mlw.avi” width=”320” height=”240” preload></video>

Recomendamos utilizarlo si la función de la página es mostrar un video. Si por el contrario, el video únicamente ayudará a complementar la información (un post que tiene múltiples videos o referencias, no lo recomendamos)

<video src=”un-video-mlw.avi” width=”320” height=”240” preload=”none”></video>

Y el anterior que le dirá explicitamente que no tiene que precargar el video.

jueves, 1 de agosto de 2013

¿Con

El debate sobre Flash y HTML5 da para los programas más entretenidos de mejorandolaweb.
Adobe tiene tecnología sólida y es de los reproductores que mejor entiende de codecs y licencias. Es una solución práctica para que no tengamos que lidear con esos problemas y sigue siendo la base de Youtube. Youtube sigue siendo la solución práctica para que vos y yo compartamos en segundos un vídeo, le generemos difusión y hagamos además social media.
Pero incluso Youtube está haciendo esfuerzos importantes en miras de HTML5, resolviendo otros dramas que incluye este tag. Revisa youtube.com/html5 con un navegador moderno y conoce más de sus experimentos.
No dejamos de usar flash, es más, es uno de los planes de contingencia más seguros para que muchas
personas y navegadores viejos puedan ver tus contenidos en vídeo.