Animación con HTML5 … SALVAJE !!!!

Posted by Omar Benyakhlef on feb 6, 2013 in CSS, HTML, HTML5 | 3 comments

Animación en HTML5

Conocía la potencia del HTML5 para desarrollar movimiento en diseño web, pero no era consciente de la “salvaje” cantidad de posibilidades que nos ofrece. Unas posibilidades que serían seguramente más, si no fuese por la absurda incompetencia de navegadores como Explorer e incluso Firefox.

En esta impresionante web de la que hablamos hoy, además de mostrarnos cómo realizar animaciones con HTML5, podremos ver una serie de ejemplos web que seguro que os sorprenden.

Los ejemplos que vais a ver están desarrollados con CSS3, SVG, Canvas y WebGL

CONTINUAR LEYENDO “Animación con HTML5 … SALVAJE !!!!” »

Share and Enjoy

Cómo crear fácilmente gráficos utilizando jQuery y HTML5

Posted by Omar Benyakhlef on ene 22, 2013 in HTML5, jQuery | 0 comments

Dibujar gráficos con HTML5 y jQuery

Hasta ahora, el único modo de introducir un buen gráfico en un diseño web, era o bien mediante una imagen, o con flash si queríamos hacer algo dinámico. Ahora, gracias a HTML5 y por supuesto a jQuery, podemos fácilmente hacer un gráfico personalizado de una forma rápida y con un buen diseño.

Para ello, utilizamos el plugin de jQuery visualize.js

CONTINUAR LEYENDO “Cómo crear fácilmente gráficos utilizando jQuery y HTML5” »

Share and Enjoy

Players en HTML5. Audio y Video

Posted by Omar Benyakhlef on dic 10, 2012 in HTML5, videos | 0 comments

Una de las herramientas más útiles que ha aportado HTML5, es la posibilidad de mejorar la reproducción de archivos multimedia en nuestras webs. Además HTML5 nos permite construir reproductores tanto de audio como de video.

Webs tan populares como youtube, vimeo o daylimotion ya hace tiempo que incorporan reproductores en HTML5.

En este post de diseño web, vamos a hacer una breve introducción de las etiquetas <AUDIO> y <VIDEO> de HTML5, y vamos a ver varios tipos de reproductores que nos pueden ser muy útiles a la hora de construir nuestros sitios web.

CONTINUAR LEYENDO “Players en HTML5. Audio y Video” »

Share and Enjoy

Audio Librería con Javascript y HTML5

Posted by Omar Benyakhlef on dic 3, 2012 in HTML5 | 3 comments

Audio con Javascript y HTML5

BUZZ es una pequeña librería de Javascript que le ayuda a incluir y gestionar fácilmente los sonidos en tu sitio web mediante la etiqueta audio de HTML5 .

También merece la pena ver la demo que nos han dejado para demostrar su funcionamiento. Se trata de un pequeño juego que combina drag y audio muy chulo !!!

Encontrareis todo el código y documentación bien detallada en Buzz, así como compatibilidades con navegadores y dispositivos móviles y tabletas.

VER DEMO

DESCARGAR CÓDIGO Y DOCUMENTACIÓN

Share and Enjoy

Tu web Parallax. Código y ejemplos.

Posted by Omar Benyakhlef on oct 15, 2012 in Diseño Web, HTML5, jQuery | 3 comments

Un buen diseño web debe tener como primer objetivo su target. Si además estamos al tanto de las últimas tendencias y técnicas de diseño web, aumentaremos las posibilidades de éxito.

Hoy en día “prácticamente” no tenemos límites a la hora de diseñar, de un modo u otro, casi todo se puede hacer, por eso mismo es obligatorio ser conocedor de estas técnicas, conociéndolas podremos acudir a ellas en función del diseño al que nos enfrentemos.

En este post vamos a ver en qué consiste el Scroll Parallax, vais a poder descargar código gratis y ver algunos ejemplos de efectos que podemos conseguir con esta técnica.

Parallax Scrolling es sin duda un enorme paso hacia adelante y un tremendo reto para diseñadores, ya que ahora no nos limitamos a pensar en cómo rellenar el dichoso papel en blanco. Diseñar una web parallax es en cierto modo, jugar a ser “director de cine”. Una sucesión de escenas van a cambiar por completo el escenario que mostramos al usuario, además, tendremos que pensar de qué modo pasamos de una escena a otra, movimientos, máscaras, transparencias, vídeos y fotografías se suceden uno tras otro o simultáneamente, para situarse en su posición correcta cada vez que el usuario se detiene a examinar cada pantalla. Además, tendrás que pensar en cómo conservar la usabilidad de esta web, fijando el menú en una posición absoluta, haciendo que se mueva con el resto de la web… En definitiva es un reto a la imaginación, mucho mayor que cualquier otro tipo de web, es pura creatividad, esta creatividad es la que va a diferenciar una web espectacular de una normal, aunque esta normalidad va a estar acentuada por la vistosidad de esta técnica.

CONTINUAR LEYENDO “Tu web Parallax. Código y ejemplos.” »

Share and Enjoy

Tendencias Web. Responsive Design.

Posted by Omar Benyakhlef on sep 26, 2012 in Diseño para móviles, Diseño Web, HTML5, iPhone, jQuery, jQuery Mobile, Mobile | 1 comment

La última tendencia de diseño web es el Responsive Design o “Diseño Adaptativo”. Con la ayuda del HTML5 y CSS3, ahora podemos adaptar los diseños de páginas web en función del tamaño de pantalla del usuario. La característica fundamenteal de este tipo de diseño web, es que se adapta perfectamente a cualquier resolución, basta con ir cambiando el tamaño de la ventana del navegador, para ver cómo se van recolocando los módulos que forman la web.

Gracias a esta técnica no tenemos que hacer distintas web o utilizar distintas CSS para hacer un diseño para web, smartphone o tableta. El mismo diseño se verá correctamente en cualquiera de los distintos dispositivos y lo más importante, se reducirán los costes de creación y mantenimiento.

La idea de implementar esta técnica viene de lejos, del año 2008, recomendado por W3C  en ”Mobile Web Best Practices” bajo el subtítulo “One Web“.

Hoy en día la disparidad tan grande que hay en tamaños de pantalla (sobremesas, portátiles, smartphones, tablets…), ha provocado que finalmente los diseñadores web nos planteemos esta práctica como indispensable en todos nuestros diseños. CONTINUAR LEYENDO “Tendencias Web. Responsive Design.” »

Share and Enjoy