por Omar Benyakhlef | accesibilidad, Taller Web, Trucos CSS, Usabilidad
En numerosas ocasiones, nuestros diseños requieren más tiempo de carga, bien por tener que usar grandes imágenes o por funcionalidades requeridas por el proyecto.
Nada más incómodo para un usuario que presentarse delante de su pantalla y esperar ante una página vacía, esperando que cargue el contenido. Esta espera repercute notablemente en la usabilidad, el usuario no sabe si está esperando a que cargue el contenido que quiere ver, o si simplemente la página no funciona. Esto es algo que todos conocemos, lo recomendado es hacer un preload de la página para que luego todo el contenido fluya sin problema.
He llegado a ver incluso preloads que necesitaban un preload para visionarlo, lo cual es totalmente absurdo. Hoy os dejo varios preloads realizados con CSS, el peso es ínfimo y las animaciones son verdaderamente espectaculares y sobre todo fluidas, muy fluidas y con un loop infinito sin ningún corte.
See the Pen Preload CSS by Omar Benyakhlef Domnguez (@gloobs) on CodePen.light
DESCARGAR PRELOADS
por Omar Benyakhlef | accesibilidad, Diseño para móviles, Diseño Web, Fuentes, Google, iPhone, Usabilidad
El año 2017 fue denominado por Google como“El año de los móviles” en base a su informe anual Consumer Barometer 2017. Por primera vez en la historia, el uso de Internet en dispositivos móviles registraba un porcentaje superior al 50 % en los 63 países incluidos en el estudio. España es en este sentido uno de los países más “adictos” a su uso, un 91% de los usuarios online se conecta a través de su Smartphone, los mismos que Hong Kong o en Singapore.Un 64% ve vídeos online y un 79% utiliza su móvil para realizar búsquedas, una de las cifras más altas del mundo, muy por encima de la media mundial que es del 65%.
Estos datos son suficientemente relevantes como para prestar una mayor atención al diseño web móvil, especialmente a las tipografías utilizadas. Desgraciadamente nuestra labor como diseñadores web viene condicionada en la mayoría de las ocasiones por las guías de estilo establecidas por nuestros clientes.
El uso correcto de la tipografía en el diseño web móvil es fundamental en la usabilidad y experiencia del usuario, veamos lo que dicen los expertos sobre cómo mejorar este uso en dispositivos móviles. (más…)
por Omar Benyakhlef | accesibilidad, CSS, Diseño Web, HTML5, jQuery, Usabilidad

Evolución web desde 1990 a 2012
Desde hace unos años, el diseño web ha sufrido una tremenda transformación, gracias a las nuevas tecnologías y a la obligatoria necesidad de los distintos navegadores de adaptarse a ellas.
La web hoy en día es un Universo cada vez mayor de páginas web y aplicaciones web relacionadas entre sí, lleno de vídeos, fotos y contenido interactivo.
Pero detrás de todo esto, existe una interacción de tecnologías y navegadores que intentan día a día hacerse más compatibles y dar al usuario una mejor experiencia.
En los últimos años, la tecnología web ha evolucionado tremendamente, esto, permite a los diseñadores web, la posibilidad de dar rienda suelta a la imaginación, sin tantas limitaciones como hasta ahora había. Las páginas web actuales, son el resultado de los esfuerzos de una comunidad web de código abierto que ayuda a definir estas tecnologías web, como HTML5, CSS3 y WebGL y asegurarse de que están apoyados en todos los navegadores web.
En http://evolutionofweb.appspot.com/, podréis ver toda la evolución que ha sufrido la web desde 1990 hasta 2012. Las bandas de color en esta visualización representan la interacción entre las tecnologías de la web y los navegadores. Como veréis es una lucha es interminable por poder dar al usuario una compatibilidad con las nuevas tecnologías que van surgiendo.
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 | accesibilidad, iPhone, Mobile, Redes Sociales, Social Media, Usabilidad

Un código QR (Quick Response Barcode) es un sistema para almacenar información en una imagen.
Fueron creados por Denso-Wave (Japón) en 1994.
Se caracterizan entre otras cosas por los tres cuadrados que se encuentran en tres de sus esquinas y que permiten detectar la posición del código al lector.
Un QR es básicamente un link, un enlace. Al leer un código QR con un smartphone, recibe una orden que abre una dirección web. ¿Por qué hacer esto y no colocar directamente la url?, pues por varios motivos, empezando porque es mucho más llamativo, refleja novedad, tecnología e incita a saber qué hay detrás. Por otro lado, no hace falta teclear, basta con pasar por encima el dispositivo y nos dirige directamente a la información que quiere mostrarnos. También hay que tener en cuenta las largas url’s que se están utilizando últimamente en marketing, ¿para qué teclearlas?.
Los códigos QR se están utilizando cada vez más en Marketing, en tarjetas de visita, en cartelas de exposiciones, en cualquier lugar que nos sirva de enlace a un sitio web en el que ampliar la información con un buen Diseño Web.
Muchas marcas están utilizando ahora estos códigos QR en sus campañas de publicidad, a través de promociones, regalos y sorteos a los que tendrás acceso a través de leer ese código QR.
Yo creo que en principio el código QR debe mostrar contenido exclusivo, dar más información de la marca, dar opción a conseguir acciones que de otra manera no podrían obtener, es decir, conseguir un formato que represente exclusividad aunque al alcance de cualquiera (cualquiera que tenga un smartphone con lector). En la cabecera de este post hay un QR creado por mi, la única manera que tienes de saber a dónde va a dirigirte es leyéndolo, así que… tu verás ¿?.
Hay varias empresas que ya han incluido esta tecnología en sus campañas de marketing. Nissan en las redes para promocionar el Juke, la cadena de almacenes Macy’s para atraer clientes a sus tiendas, al igual que la cadena de ópticas Alain Afflelou, CocaCola con la campaña Coca Cola Music en Alemania,…
Lo cierto es que estos códigos, aunque ya llevan años creados, están todavía por explotar, y seguramente veremos mil y una formas de utilizarlos. De momento, si te apetece generar alguno, aquí te dejo dónde crearlos online gratuitamente, hay muchos, este es uno de ellos.