Animación con HTML5 … SALVAJE !!!!

Animación en HTML5

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 !!!!” »

Comparte este Blog de Diseño Web

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

Dibujar gráficos con HTML5 y jQuery

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” »

Comparte este Blog de Diseño Web

Players en HTML5. Audio y Video

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” »

Comparte este Blog de Diseño Web

Audio Librería con Javascript y HTML5

Audio con Javascript y HTML5

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

Comparte este Blog de Diseño Web

HTML5 y Parallax, sus orígenes.

Never Mind the Bullets

Never Mind the Bullets

Never Mind the Bullets es un impresionante proyecto realizado en HTML5 y Parallax por Microsoft Corp hace dos años, para demostrar la compatibilidad del Explorer 9 con los estándares de HTML5.

Ahora que Parallax es una realidad y que cada día se está extendiendo más, volvemos a recordar este proyecto como ejemplo de lo que fueron los inicios de esta tecnología y del HTML5.

En la web además de poder customizar la aventura, hay documentación sobre el proyecto y sobre el making off.

Para los que ya lo conocíais y para los que todavía  no lo habíais visto, os recomiendo echarle un vistazo.

Comparte este Blog de Diseño Web

Pintar con HTML5. Diseño Web

Etiqueta CANVAS. HTML5

El elemento Canvas de HTML5 es una etiqueta HTML similar a <div>, <a> o <table>, con la excepción de que su contenido se escribe o dibuja con JavaScript.

La etiqueta canvas va asociada a una función JavaScript, y con ella se pueden hacer todo tipo de líneas, dibujos, colores, gradientes, sombras, esquinas redondeadas, …

La forma de utilizar la etiqueta <canvas>, es la siguiente:

<!DOCTYPE HTML>
<html>
    <head>
        <script>

            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                // do stuff here
            };

        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="578" height="200">
        </canvas>
    </body>
</html>

En este tutorial, podréis encontrar todo tipo de código para cada una de las múltiples posibilidades que nos ofrece esta etiqueta. Espero que os sirva.

Comparte este Blog de Diseño Web
Notificaciones tipo iPhone con HTML5

Notificaciones tipo iPhone con HTML5

Notificaciones tipo iPhone con HTML5

Notificaciones tipo iPhone con HTML5

El diseño web está muy ligado al resto de diseños tecnológicos, sobre todo al diseño realizado para smartphones. Hoy os dejo algo que seguro que os gusta. Se trata de la notificación que aparece en el iPhone (por ejemplo), cuando tenemos mensajes pendientes de leer.

Realizado en CSS3 y HTML5, aquí os dejo una demo y el código listo para descargar. Espero que os sea útil.

Comparte este Blog de Diseño Web
24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!

24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!

24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!

24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!

El diseño webestá en constante evolución.

La aparición hace unos años del jQuery y CSS3, unido a las mejoras introducidas (aunque todavía ridículas) en las velocidades de conexión, han supuesto un cambio radical en la concepción de diseños web.

Ahora con la implantación cada vez mayor de las webs hechas con HTML5, llegamos a un periodo en el que “todo es posible“.

Con un poco de imaginación y atractivos diseños, vamos a ver una total revolución en el diseño web, sobre todo en la usabilidad.

A continuación os dejo con 24 ejmplos de páginas web realizadas en HTML5, jQuery y CSS3,  que me han sorprendido mucho, estamos entrando en una nueva fase de diseño y usabilidad, en la que ya no hace falta pulsar sobre un botón para realizar una acción, en la que podremos interactuar mucho más con la web y dejar de ser meros espectadores.

CONTINUAR LEYENDO “24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!” »

Comparte este Blog de Diseño Web
Scroll infinito contra paginación. HTML5 History API

Scroll infinito contra paginación. HTML5 History API

Scroll infinito con History API HTML5

Scroll infinito con History API HTML5

La constante evolución del diseño web, hace que cada vez tengamos más posibilidades de hacer más usables nuestras páginas web.

En esta ocasión Warpspire.com nos deja un claro ejemplo de cómo el HTML5 va a ser una revolución en el diseño web .

Todos aquellos que hayáis navegado por Twitter, habréis visto que no existe paginación. La página se va cargando de nuevo cada vez que llegamos al final del scroll. Esto permite no sobre cargar la página, ya que el contenido se va cargando paulatinamente y sobre todo hace mucho más fácil y rápida la navegación.

Lo mismo sucede si analizamos Facebook, donde podemos ver que también se renuncia a la paginación, utilizando también el scroll sin fin.

Esta API de HTML5 es verdaderamente útil y mejora aún más la navegación de Twitter y Facebook.

CONTINUAR LEYENDO “Scroll infinito contra paginación. HTML5 History API” »

Comparte este Blog de Diseño Web
Template Gratuita de HTML5 V2 para empezar con buen pie

Template Gratuita de HTML5 V2 para empezar con buen pie

Plantilla HTML5

Plantilla HTML5

Si vas a empezar a migrar tu web o tu blog a HTML5, lo ideal es que te vayas familiarizando con esta nueva forma de escribir código, y para ello nada mejor que descargarte gratuitamente este template que te ofrece HTML5 Reset

 

Se trata de la versión 2, de una estructura de carpetas con todo lo necesario para comenzar a maquetar en HTML5.

Además de traer todos los archivos necesarios, incluso un robot.txt, han tenido el detalle de incluir jQuery y Modernizr, una biblioteca que hace compatible HTML5 y CSS3 en navegadores antiguos. Además el código está comentado, lo cual también nos servirá de guía a la hora de interpretar las diferentes etiquetas.

Comparte este Blog de Diseño Web
Efectos Especiales con jQuery y HTML5… ALUCINANTE !!!!

Efectos Especiales con jQuery y HTML5… ALUCINANTE !!!!

Efectos jQuery

Efectos jQuery

Hace no mucho, el diseño web se limitaba a meter contenidos dentro de unas tablas, a tener cuidado con los pesos, en definitiva, a padecer una continua frustración.

Este ejemplo que os dejo hoy nos enseña alguna de las ilimitadas posibilidades que nos ofrece jQuery.

El efecto simula una fotografía convertida en fluido, de tal modo que al interactuar con ella por medio del ratón, podemos ver los efectos que produce el líquido al moverse, incluso tiene la posibilidad de activar el modo “lluvia” y ver el efecto de las gotas al caer sobre la fotografía, pero mejor que mil palabras…

 

 

Comparte este Blog de Diseño Web
Impresionante generador de texto curvo con CSS y HTML5

Impresionante generador de texto curvo con CSS y HTML5

Generador de texto curvo en CSS y HTML5

Generador de texto curvo en CSS y HTML5

Gracias al HTML5 el diseño web está viendo cómo paso a paso van cayendo todas las barreras que hasta ahora nos limitaban como diseñadores.

Gracias a CSSWarp ahora podemos diseñar un texto como si estuviésemos trabajando con Ilustrator. Con CSSWarp podemos rotar, inclinar, curvar el texto de tal modo que nos permite hacer cualquier diseño con él y luego obtenerlo como código HTML. Además también nos permite seleccionar cualquier tipo de fuente de Google Web Fonts, lo que lo convierte ahora mismo en la herramienta más potente para generar texto en CSS y HTML.

El uso no podría ser más simple, una pantalla gráfica nos ayuda a generar el diseño y una vez finalizado no tenemos más que pulsar sobre el botón “Generar HTML”, sencillamente GENIAL !!!

 

Comparte este Blog de Diseño Web
A Google le gusta la semántica del HTML5

A Google le gusta la semántica del HTML5

Etiquetas HTML5 que favorecen el SEO

Etiquetas HTML5 que favorecen el SEO

En este blog de diseño web hemos hablado ya  de la importancia que tiene el flujo del Html sobre el posicionamiento de la web, así como la importancia que da Google a la velocidad de carga de una página para mejorar su posicionamiento.

El HTML5 facilita la clasificación de los motores de búsqueda así como la descripción de tu sitio a los usuarios. Además permite realizar una navegación mucho más rápida a través de tu web. Vamos a ver cómo…

CONTINUAR LEYENDO “A Google le gusta la semántica del HTML5” »

Comparte este Blog de Diseño Web
Diseñar un blog con HTML5 y CSS3

Diseñar un blog con HTML5 y CSS3

HTML5 y CSS3

HTML5 y CSS3

TUTS+ es uno de los mejores sitios (conjunto de sitios) que existen en la red relacionados con el diseño web. En este caso el artículo es de net tuts +

En él podréis aprender a montar una estructura de página típica para blog, es decir, cabecera, menú de navegación, cuerpo principal, columna lateral y pie. Veréis cómo se utiliza el HTML5 en compañía de CSS3.

Desgraciadamente todavía existen navegadores que no reconocen el uso conjunto de estas dos tecnologías, sin embargo parece ser que todos los esfuerzos se encaminan a que un día podamos dejar de la do el “parcheo” de las CSS para cada navegador, y dedicarnos a lo que verdaderamente nos ocupa, diseñar un sitio web para sus usuarios.

En cualquier caso, el artículo me parece muy útil, ya que todas las tendencias nos encaminan al uso de HTML5 con CSS3.

En este post, nos enseñan a estructurar una página en HTML5, y a usar etiquetas como <article>, que sirve para denotar la entrada independiente en un blog.

Respecto al CSS3, en este post se analiza cada contenido del blog por separado y nos introduce en “nuevos trucos”, como son los degradados, sombras o esquinas redondeadas.

Comparte este Blog de Diseño Web
Densidad de píxeles. Diseñando para móviles.

Densidad de píxeles. Diseñando para móviles.

Una de las especificaciones técnicas que tenemos en cuanta al analizar un teléfono es la densidad de pí­xeles de su pantalla. La densidad de pí­xeles es una unidad que se mide en pí­xeles por pulgada ppp o ppi en inglés (pixels per inch), nos indica la calidad de una pantalla y es fundamental a la hora de realizar un diseño para móviles.

Las pantallas de alta densidad tienen más píxeles por pulgada que las de baja densidad. Esto provoca que los elementos de una interfaz de usuario de las mismas dimensiones de píxeles, aparecen más grandes en las pantallas de baja densidad y más pequeños en las pantallas de alta densidad.

CONTINUAR LEYENDO “Densidad de píxeles. Diseñando para móviles.” »

Comparte este Blog de Diseño Web

¿Cómo diseñar una web mobile?

Diseño de Web para Móviles

Diseño de Web para Móviles

El tráfico de los dispositivos mobile empieza a ser un factor decisivo a la hora de replantearte el diseño de tu web. En este post no vamos a entrar en si es mejor un diseño adaptative o crear uno especial para este tipo de dispositivos, vamos a ver cuales son los factores decisivos que deciden entre el éxito y fracaso de un sitio mobile.

Los usuarios esperan que su experiencia mobile sea al menos tan buena como la de escritorio. Es muy fácil perder clientes y muy difícil ganarlos, sin embargo, no tener sitio mobile ayuda a tu competencia, así que parece claro que la opción es adaptarse, pero hacerlo bien.

CONTINUAR LEYENDO “¿Cómo diseñar una web mobile?” »

Comparte este Blog de Diseño Web

RECURSOS PARA DISEÑO WEB. LIBROS GRATIS !!!

Recursos para diseño web. Libros

Recursos para diseño web. Libros

Soy uno de esos diseñadores que empezó en este mundillo a finales de los 90’s, poca formación había entonces y menos recursos. Hoy en día es impresionante la cantidad de recursos de diseño web que podemos encontrar en la red. OpenLibra es un portal en el que puedes encontrar todo tipo de libros técnicos. En lo que nos ocupa, diseño web, podemos encontrar materias como bases de datos, desarrollo web (CSS3, HTML5, diseño de interfaces,…), diseño, marketing, programación, redes, SEO, SEM, Web 2.0, Social Media,… Una verdadera mina de recursos gratuitos. Son libros en PDF listos para descargar, en español e inglés.
Estos son algunos libros en español que podréis encontrar, por supuesto, mejor echad un vistazo y buscad, porque hay muchos más:
CONTINUAR LEYENDO “RECURSOS PARA DISEÑO WEB. LIBROS GRATIS !!!” »

Comparte este Blog de Diseño Web

Tendencias Web. Responsive Design.

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.” »

Comparte este Blog de Diseño Web