Posts Tagged ‘HTML’

¿Qué usar, px o em?

Escrito por en 25/05/2010

PX vs EMMucho se habla y se ha hablado sobre la accesibilidad web. En si hay que hacer las webs de forma que todo tipo de personas puedan visitarlas, pero para llegar a hacer una web 100% accesible no nos podemos limitar a cumplir solamente uno de los puntos de la accesibilidad.  Hoy, dejamos escrito un pequeño artículo de uno de los puntos claves en la accesibilidad. La lucha de píxeles o ems.

¿Qué diferencia hay entre píxeles y ems?

La principal diferencia se basa en el problema de los píxeles. Cuando nos llega el diseño en photoshop, fireworks,… de la web que tenemos que maquetar, ésta suele estar medida o cortada en píxeles. Y cual es el problema? Pues es que algunos navegadores interpretan los píxeles ligeramente diferente a sus homólogos lo que hace que una web se pueda ver distinta de un navegador a otro. Este problema nos lo solemos encontrar no solo con esto, sino con muchas otras cosas, como propiedades de CSS que se interpretan de forma distinta en cada navegador. Hay que tener en cuanta, que el pixel es una medida relativa al lienzo, en comparación con el em, que os lo contamos a continuación.

En cambio la medida en em  es una medida flexible. Me explico. Cuando abrimos una web que ha sido maquetada con valores em y queremos ampliarla para ver el texto más grande, ya sea por problema de visión, por comodidad, etc, no solo nos crecerá el texto, sino que toda la web se ampliará de forma homogénea, ampliando o reduciendo todo el inteface web. Así, si un usuario ha modificado los valores por defecto de su explorador, para ver el texto más grande, no solo se le ampliará el texto, sino toda la interface, haciendo más cómoda la navegación por el sitio, ya que los em cogen como referencia la altura de la fuente definida en el documento, consiguiendo de esta forma que si un usuario aumenta el tamaño del texto, todo se ampliará de igual forma.

Esto no quiere decir que una web maquetada en px esté mal maquetada. Ni muchísimo menos. Pero siemrpe estará mejor hecha una web la que permita la flexibilidad que ofrece el estar maquetada con valores em, ya que cualquier usuario podrá ampliar y reducir el texto sin distorsionar la interface de la web.

Nosotros por ahora en el blog contamos solo con las fuentes en em, y esperamos poco a poco adaptarlo todo a em, así como implementar poco a poco el HTML5. Así que os animamos a que probéis a hacer vuestros diseños en em, en futuros artículos os daremos unos consejos para controlar a la perfección los valores em, y no tener problemas al pasar de px a em.

Reproductores de vídeo en HTML5

Escrito por en 26/04/2010

Vídeo HTML5Últimamente se está hablando mucho sobre HTML5, de los avances que está teniendo, de lo que mejorará la navegación, de lo accesible que será,…

Claro que es cierto, y ya es bueno que llegue este cambio a mejor. Y con este cambio, os traemos alguno de los últimos avances que está teniendo esta nueva versión de HTML, los reproductores de vídeo. Para insertar vídeo con esta nueva versión de HTML, solamente tenemos que incluir el siguiente código:

<video src="RutaDelVideo.ogg" controls="controls">
 Tu navegador no soporta la etiqueta vídeo de HTML5.
 </video>

Con esto, ya tenemos incluido un vídeo en nuestra página web, sin necesidad de plugins de flash, ni otras herramientas. Aun que una cosa tenemos que tener clara si queremos poner nuestro reproductor HTML5 en nuestra web, y es que solo permite vídeos en Ogg/Theora y/o H.264/Mp4. Y aun que la mayoría de navegadores ya soportan este nuevo tag, hay navegadores que permiten un codec y otros que solo permiten el otro. Os hacemos una lista de que codec soporta cada explorador:

  • Presto/Opera: HTML5 mediante GStreamer (incluye sólo Ogg/Theora).
  • WebKit/Chrome: HTML5 mediante ffmpeg (Ogg/Theora y H.264/MP4).
  • Gecko/Firefox: HTML5 con Ogg/Theora.
  • WebKit/Epiphany: HTML5 mediante GStreamer (Ogg/Theora garantizado).
  • WebKit/Safari: HTML5 mediante QuickTime (H.264/MOV/M4V, puede reproducir Ogg/Theora con XiphQT components)

Así que por ahora, el más recomendado para este fin podemos decir que es Chrome, ya que es el único que ofrece soporte a ambos codecs.

Podéis ver aquí una DEMO que hemos hecho para que veáis ambos codecs, y lo probéis en vuestros exploradores.

Claro que esto no es todo, y ya han ido saliendo a la luz otros reproductores en HTML5 más trabajados, y con más posibilidades. Uno de ellos es SublimeVideo un reproductor de vídeo en HTML5 desarrollado por el grupo Jilion_[en]. Si tenéis un navegador que soporte HTML5, podéis ver un ejemplo haciendo clic aquí.
Lo malo de este reproductor es que aun está en desarrollo y no lo han hecho público, por lo que tendremos que esperar a poder usarlo.

Otro de estos reproductores, es el OSM (Open Source Media) de la mano de MediaFront. Este reproductor nos permite reproducir vídeos y sonidos en los formatos más extendidos, además de la posibilidad de integrar en el mismo, vídeos de youtube y vimeo. Y no solo eso, sino que nos permite crear listas de reproducción, y tener varios vídeos como si de una pequeña biblioteca multimedia se tratara. Ya ofrecen compatibilidad de integración don Drupal, y próximamente lo harán para WordPress, Joomla y moodle.

Así que por ahora este último reproductor parece ser el más completo, por no decir el único, del que se dispone por el momento.

Haz funcionar HTML5 en todos los navegadores

Escrito por en 23/04/2010

HTML5

Últimamente se está hablando mucho de HTML5, y los navegadores se preparan para el futuro, de hecho muchos de ellos ya soportan HTML5 en sus últimas versiones. Pero… ¿que ocurre con los navegadores que en sus versiones antiguas no soportan HTML5?

Todos sabemos que mucha gente sigue trabajando con navegadores antiguos durante mucho tiempo, y ahí está el problema. ¿Pasamos nuestra página web a HTML5 o esperamos?
Vamos a investigar para que puedas lanzarte y implementar HTML5 dentro de lo posible y que funcione en todos los navegadores, incluido en los antiguos que actualmente no soportan HTML5.

Xiph.Org Ogg Codecs
Es un ejecutable que solo funciona para Internet Explorer y le permite ver al cliente vídeos de HTML5 (tag video)

Realmente no es lo que buscamos… buscamos no depender del cliente, que nuestra propia página web en HTML5 sea visible en todos o la mayoría de los navegadores.

HTML5-Now
Es un simple archivo JS incluido en tu proyecto web, que permitirá a los navegadores antiguos visualizar tags HTML5, la mayoría de ellos.

¿Queréis probarlo? Abrid un navegador que sepáis que no soporta HTML5 y entrad aquí.
Visualizaréis un video con un tag HTML5. Tenéis más ejemplos aquí.

Como vosotros mismos podéis ver, le queda mucho camino por recorrer, por ahora solo está una muestra de lo que será el proyecto. Pero creemos que dará mucho que hablar.
Contad que el cambio a HTML5 no será cosa de 2 días, herramientas de este tipo nos pueden ayudar mucho.

Xiph.Org Ogg Codecs
HTML5-Now [en]

Declaración DOCTYPE [Iniciación al HTML I]

Escrito por en 07/04/2010

Declaración DOCTYPE

Este será el primer artículo de un pequeño,  manual sobre HTML que, espero sirva a aquellos que se inicien a la programación web, como para aquellos ya iniciados y que buscan información, resolver dudas, o ampliar sus conocimientos.

Doy por sentado que quien lea esto sabe lo que es el HTML y para que se usa. Para quien no sepa lo que es, o para que se utiliza, le recomiendo que se informe antes, por ejemplo aquí [Wikipedia]. (more…)