Posts Tagged ‘demo’

DIV height: 100%

Escrito por Oriol Navascuez en 05/05/2010

Bueno pues a raíz de una consulta de una amiga diseñadora… surge esta otra perlita sobre CSS.

Alguna vez maquetando hemos necesitado hacer que un <div> nos ocupe el 100% del alto de una capa, o de toda la web. Y normalmente, si no se sabe este pequeño truco, hemos tenido que hacer cosas raras. Pues bien, la solución es bastante sencilla, y es la siguiente.

Para conseguir que cualquier <div> que tengamos en nuestra web pueda tener el 100% del alto de la capa en la que se anida, solo tenemos que darle el 100% de altura al html y al body. De esta forma:


html, body { height: 100%; }

Al decirle a los tags html y body que su altura será del 100% nos permite que las capas que nosotros queramos opten también a tener esa altura. Es una tontería, pero cuando no se sabe este pequeño truco, puede dar muchos problemas el maquetar alguna cosa.

Hay que tener en cuenta también, que la capa o capas anterior a la que le queremos dar ese height:100%, deben de tener un alto especificado. Es decir, si la capa anterior le damos 200px de alto, el height:100% será de esos 200px de la capa contenedora, o si a la capa anterior le damos también 100% de alto igual que a la capa que se lo queremos dar, nos ocupará toda la pantalla. Solo teniendo en cuenta esto, podremos hacer capas al 100% en cualquier instancia.

Por si no os ha quedado demasiado claro, o queréis ver un ejemplo del funcionamiento, podéis ver esta página de ejemplo que hemos preparado:

DEMO

Esperamos que os sirva esta pequeña perla, como decimos nosotros, para vuestros diseños! ;)

Reproductores de vídeo en HTML5

Escrito por Oriol Navascuez 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.