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

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
Diseño Web. Animación con jQuery

Diseño Web. Animación con jQuery

Magia con jQuery

Magia con jQuery

Ya conocéis mi debilidad por usar Ajax en diseño web, me parece una solución que además de dar usabilidad a nuestra web, nos da oportunidad de sorprender al usuario, captando así su atención.

En esta ocasión vamos a hablar de unas cuantas librerías para hacer animaciones.
Muchos de los ejemplos que vais a ver están en bruto, es decir, no llevan nada de diseño, en vosotros estará el hacer que esas animaciones sean todo lo espectaculares que vuestra imaginación os sugiera.

CONTINUAR LEYENDO “Diseño Web. Animación con jQuery” »

Comparte este Blog de Diseño Web
Efecto Glossy con Javascript

Efecto Glossy con Javascript

Efecto glossy con Javascript

Efecto glossy con Javascript

He encontrado en Netzgesta, un interesante artículo sobre cómo convertir botones normales en botones tipo glossy.

Ya hablamos en su día de la tendencia en diseño web que supuso este tipo de efecto, brillos, sombras,…  Se trata de un scipt que redondea y da brillo a cualquier imagen que coloquemos en la web.

El resultado final es muy bueno, lo que luego tendréis que valorar es si merece o no la pena para vuestro caso particular, ya que en ocasiones consumirá mucho menos peso trabajar esas imágenes en photoshop.

Ver post original y descargar js

Comparte este Blog de Diseño Web
Menús para tu web o blog

Menús para tu web o blog

Menús gratis en JQuery, Ajax, CSS,...

Menús gratis en JQuery, Ajax, CSS,...

Con el desarrollo de tecnologías como las CSS, JQuery, Ajax, Mootools,… el abanico de posibilidades para diseñar menús ha aumentado hasta llegar a conseguir verdaderas maravillas. Hoy en día podemos diseñar menús en los que habrá que hacer uso del botón derecho del ratón para comprobar si se trata de flash. Movimientos fluidos, cambios de opacidad, desplazamientos de textos,… mil opciones que hasta hace muy poco sólo nos lo podíamos permitir con tecnología flash.

Además de la indiscutible vistosidad que proporcionan, no nos penalizan en los resultados de búsqueda, ya que con muy poco código podemos hacer uso de menús con la misma apariencia para el navegador que si de un simple html se tratase.

Podemos hacer “trucos” con CSS realmente vistosos o llegar a verdaderas complejidades realizadas en Ajax, pero siempre consiguiendo un resultado vistoso, usable y sin perjuicios a la hora del posicionamiento.

En 1stwebdesigner.com, podéis encontrar una recopilación de más de 300 ejemplos de menús con Jquery, CSS,….

Comparte este Blog de Diseño Web
Mootools. Imprescindible.

Mootools. Imprescindible.

Mootools

Mootools, moderniza tu web.

Si como yo volvéis ahora de vacaciones (mis condolencias….), y habéis conseguido recargar pilas, os recomiendo esta increíble librería que hará vuestros sitios más vistosos y usables.

Mootools es una librería de javascript que nos permite construir aplicaciones web modernas y compatibles con cualquier navegador. Mootools es un código abierto, lleno de posibilidades y fácilmente adaptable a tu web.

CONTINUAR LEYENDO “Mootools. Imprescindible.” »

Comparte este Blog de Diseño Web
Javascript Vs Flash

Javascript Vs Flash

Javascript Vs Flash

Hasta ahora las animaciones en web eran exclusivas del flash, pero con la entrada del Ajax y de bibliotecas como jQuery, ahora podemos ver animaciones que nos hacen dudar sobre cual de las dos tecnologías ha sido la elegida para realizar la animación.

Esto fue lo que me ocurrió al ver esta web, jwhanif.net La carga es muy rápida y las animaciones tienen una fluidez increíble, como no podía ser de otra manera, mi primera reacción fue pulsar el botón derecho del ratón para comprobar que se trataba de flash… pero no!!

CONTINUAR LEYENDO “Javascript Vs Flash” »

Comparte este Blog de Diseño Web
Hacer un menú con CSS y más…

Hacer un menú con CSS y más…

Hacer un menú con CSS

Hacer un menú con CSS puede ser igual de vistoso que con cualquier otra aplicación pero con un añadido, es mucho menos pesado.

Gracias a las CSS conseguimos con una misma imágen hacer un rollover, simplemente con modificar las coordenadas de esta al ponernos encima. Un efecto que hasta ahora había que desarrollar con javascript o directamente en flash. Y como estas muchas más formas de hacer un buen menú con CSS.

En esta web podréis ver varios ejemplos de menús, tanto horizontales como verticales. También tienen ejemplos para diseñar galerías de imágenes, maquetar con columnas en CSS,…

dCSSLibray es una sección más de la imprescindible web Dynamic Drive. Una web en la que podréis encontrar cientos de códidos no sólo en CSS, también en Javascript, Dhtml, o Ajax. Desde hacer desaparecer textos en forma de acordeón con Ajax, a crear calendarios para formularios,…. mil formas de hacer tu web o blog más usable y vistoso.

Además se trata de una web muy usable aún sin dominar el inglés. Te indican el código que debes de descargarte, dónde copiarlo y cómo modificarlo.

Sin duda es una web de consulta obligatoria.

Comparte este Blog de Diseño Web