por Omar Benyakhlef | CSS, Diseño para móviles, Diseño Web, HTML5, iPhone, jQuery, jQuery Mobile, Taller Web, Tutoriales
Tutorial de jQuery Mobile II. Transición de páginas
Ya hemos visto en Web App con jQuery Mobile. Tutorial I, cómo maquetar una página en HTML, y cómo hacer los enlaces para pasar de una página a otra, pues bien, ahora vamos a ver unos «efectos especiales» para hacer la Web Appmás atractiva.
jQuery Mobile incluye un conjunto de seis efectos de transición entre páginas, basados en CSS y que pueden aplicarse a cualquier vínculo de la página o formulario. Estos efectos los podréis ver en vuestro ordenador si navegáis con Chrome, espero y deseo que en un futuro cercano, podamos utilizar estos efectos también en diseño web tradicional.
También hay que resaltar, que alguna de las transiciones no se ve correctamente con algunas versiones antiguas de Android. En cualquier caso, es obvio que tanto los navegadores de Smartphone como los tradicionales, tendrán que acabar «tragándose» esta tecnología tarde o temprano.
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web, Diseño Web, HTML5, jQuery
Scroll Parallax
En este blog de diseño web, hemos visto como a lo largo de los años las tendencias del diseño web siguen sorprendiéndonos y alcanzando niveles que hace años eran difíciles de imaginar.
En esta última década hemos sido partícipes como diseñadores, de una constante evolución. Desde las web más básicas, que simplemente parecían un documento word metido en una pantalla, pasando por aquellas horrorosas webs, en las que todo parpadeaba y en las que era necesario llenar la web de botones con el mensaje «pulse aquí», para posteriormente pasar a una época en lo que todo parecía que iba a ser flash y acto seguido abandonar la idea al darnos cuenta de que lo que verdaderamente era importante, era el SEO y la USABILIDAD.
En todo este tiempo, hemos vivido muchas mejoras en las conexiones de los usuarios, lo cual se ha visto obviamente reflejado en los diseños. Esto nos permitió empezar a utilizar grandes imágenes y backgrounds, a no estar tan pendientes del peso de la página. Nuevos dispositivos desde los que visualizar las webs, como los smartphones, iPhones, iPads,… Y en los últimos años, la implantación de una tecnología que ha dado un vuelco al diseño web y que como diseñadores nos ha permitido abrir la imaginación para poder realizar diseños con los que nunca antes nos habríamos atrevido, todo gracias a la implantación del jQuery.
(más…)
por Omar Benyakhlef | accesibilidad, Ajax, Cool Web Design, CSS, Diseño de páginas web, Diseño Web, HTML5, jQuery, Usabilidad
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.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Diseño Web, HTML5, Usabilidad
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.
(más…)
por Omar Benyakhlef | 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.
por Omar Benyakhlef | HTML5, 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…
