Efectos en texto con jQuery
Hoy traemos más jQuery para diseño web. En este caso se trata de efectos aplicados a párrafos y textos en general.
Podréis simular desde el típico efecto de máquina de escribir, hasta los efectos más alucinantes que hasta ahora sólo eran terreno flash.
A continuación os dejo el listado de efectos junto a la dirección en la que podéis descargarlos. Espero que os sirvan.
grooveshark
He encontrado una web que me ha sorprendido.
Se trata de una web para escuchar y compartir música online, una especie de Spotify gratuito, en el que haces tus listas, compartes, subes al facebook….
Sin embargo a diferencia de otros, no tienes que instalarte nada en tu máquina, es más, ni siquiera te piden que te registres para escuchar música.
Lo verdaderamente sorprendente ha sido comprobar que es todo HTML, CSS y jQuery a destajo… Una pasada !!
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…
TopScroll con CSS y jQuery
Los blogs supusieron un cambio radical en el diseño web. Las páginas pasaban a ser mucho más largas de lo que hasta ahora habían sido.
La navegación vertical se hace interminable en numerosos blogs, en la mayoría de las ocasiones no perjudica al usuario, ya que navegamos viendo pasar los encabezados de los post por curiosidad o en nuestra trayectoria para llegar hasta un contenido que sea de nuestro agrado.
Siempre es preferible usar la rueda del ratón para hacer scroll a través de los post o productos de una tienda, que tener que ir paginando y cargando nuevas páginas. Incluso ahora, tenemos la posibilidad de ir cargando contenidos de manera controlada para hacer la página menos pesada en origen, dando así mayor rapidez de navegación al usuario.
jQuery Mobile
El diseño web específico para móviles es una realidad a la que no podemos dar la espalda.
El usuario de smartphone, no tiene el mismo tiempo, ni el mismo ancho de banda, ni el mismo tamaño de pantalla que puede tener cuando consulta esa misma web cómodamente sentado frente a su ordenador.
Es cierto que teléfonos como el iPhone, o los Android con sus navegadores y zooms, nos permiten ver perfectamente una web convencional, pero la experiencia es mucho más agradable cuando visionamos una web adaptada para estos terminales.
En numerosas ocasiones, al hacer zoom sin querer pulsas un botón o enlace y provocas la acción contraria a la deseada, en definitiva, si puedes, haz una versión mobile para tu web.
Una vez tomada la decisión, se nos plantea qué tecnología usar, podemos hacer un simple HTML adaptado o utilizar el jQuery Mobile, que es lo que nos ocupa al menos en este post y creo que en un futuro bastante largo…
La validez de DreamWeaver en diseño web creo que está fuera de toda duda, ahora por si fuera poco la versión CS 5.5 nos permite maquetar webs para teléfonos móviles de una manera fácil y rápida.
Aunque la mayoría de los nuevos smartphones son capaces de ver webs normales en el terminal, utilizando el zoom, la experiencia de usuario es mucho más gratificante cuando se trata de una maquetación específica para móvil, y en este caso quien mejor nos puede ayudar es sin duda jQuery Mobile.
jQuery Mobile te permite crear capas deslizables, o transiciones de página que hace mucho más fluida la navegación y todo ello con la base del HTML convencional.
Esta tecnología nos permite diseñar para la gran mayoría de terminales del mercado, desde iPhone, iPad, android o los últimos BlackBerrys pasando por la mayoría de los antiguos teléfonos móviles.
A continuación os dejo este vídeo de Adobe en el que podéis ver una muestra
Tenéis muchos más ejemplos en ADOBE TV
