por Omar Benyakhlef | Diseño Web
Crea online tu web responsive
El presente y futuro del diseño web es el «responsive design«.
34Grid es un sistema de red sensible formado por columnas y que nos permite adaptar nuestra web a todo tipo de resoluciones.
El procedimiento es simple. Definimos online la cantidad máxima de columnas que vamos a necesitar por fila y los márgenes entre celdas. Hecho esto, no queda más que descargar el paquete zip en el que podremos encontrar dos carpetas, «CSS» y «DEMO».
La carpeta «DEMO» contiene un archivo html que nos muestra las posibles configuraciones.
por Omar Benyakhlef | Diseño Web, jQuery, jQuery Mobile
los 50 jQuery más usados en 2012
He encontrado en speckyboy.com, un artículo que creo de gran utilidad para tener en cuenta en nuestros diseños web. Se trata de 50 plugins jQuery, de todo tipo.
Entre ellos podrás encontrar plugins para distribuir contenido en la página, plugins para crear efectos, parallax, responsive, menús de navegación, sliders, gráficos, fuentes, etc…
Merece la pena echarle un vistazo, muchos de ellos ya los conoceréis porque los hemos tratado aquí.
por Omar Benyakhlef | CSS, jQuery
Portfolio adaptativo en jQuery
Se trata de un plugin de jQuery muy vistoso, intuitivo y lo más importante, «adaptativo«.
Las imágenes se amontonan por categorías, y al hacer clic sobre cada una de estas categorías, las imágenes que la forman se exparcen por la pantalla.
La distribución de las fotografías, se puede hacer utilizando diferentes transiciones CSS. En el caso de que el navegador no soporte estas trancisiones, jQuery se encargará de hacer un repliegue sencillo.
Para poder agrupar las imágenes en su correspondiente categoría, utilizamos la etiqueta lidata-pile:
<lidata-pile="Group 1">
La distribución de imágenes es adaptativa, se reparten horizontalmente teniendo en cuenta el ancho de pantalla.
por Omar Benyakhlef | Diseño Web
CSS Font Stack, nos muestra una relación de las fuentes más utilizadas a la hora de escribir textos en nuestros diseños web y su compatibilidad con los sistemas operativos Windows y Mac.
Además de poder ver cómo se ve y se lee cada una de las fuentes, podemos copiar el código font-family.
Ya sabéis que ahora podemos utilizar todo tipo de fuentes en el diseño web, como pudimos ver el el post de «diseño web con google web fonts«, aquí se trata simplemente de ver cómo queda en pantalla una fuente antes de usarla para nuestros títulos y párrafos.
CSS Font Stack
por Omar Benyakhlef | CSS
El diseño de una web responsive, adapta su tamaño y arquitectura, a la resolución del dispositivo en el que la estamos viendo. Ya hemos visto como en una web de columnas, al reducir la resolución, las columnas se desplazan para colocarse una debajo de la otra, en el orden que hayamos establecido, pero ¿qué pasa con el menú?.
La mejor solución por diseño y sobre todo por usabilidad es la que presentamos hoy aquí. Se trata de convertir el menú horizontal en un menú desplegable, tal y como podéis ver en las imágenes que encontrareis más adelante.
Para una resolución grande, el menú aparece en horizontal, con una opción a continuación de la otra. Cuando bajamos la resolución de tal modo que no cabe en el ancho de la pantalla, convertimos esa única fila en tres, y si seguimos reduciendo la pantalla, lo que va a ocurrir es que las tres filas se van a convertir en un menú desplegable.
Como podréis comprobar cuando os descarguéis el código, el menú está limitado a 600px de ancho. Son 6 opciones de menú y cada una con un ancho de 100px. Es evidente que entonces, para cualquier soporte que tenga una resolución mayor a 600px, no tenemos que tener ningún problema, es decir, si utilizamos cualquier ordenador o una tablet como puede ser el iPad, el menú se verá tal y como fue diseñado, una lista con todos sus elementos en una misma fila.
A continuación, vamos a ver cómo se construye esta web y cómo se distingue en la CSS las distintas resoluciones.
(más…)
por Omar Benyakhlef | HTML5, videos
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.
(más…)
por Omar Benyakhlef | iPhone, jQuery Mobile, Mobile
Slider para Web App
Todos conocemos el efecto de pase de fotos o de la navegación entre contenidos en un Smartphone o tablet. Al desplazar el contenido hacia un lado u otro, este desaparece y aparece el siguiente. Este es el código que traemos hoy en este post de diseño web, en este caso para Web App.
El complemento utilizado es Swipe, un slider ligero hecho para mobile.
Al igual que si de un iPhone, iPad o Android se tratase, el pase de fotografías o contenidos se puede hacer en ambas direcciones, además, Swipe permite el giro de pantalla y se adapta a la pantalla escalándose sin problema alguno.
(más…)
por Omar Benyakhlef | Tutoriales
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:
(más…)
por Omar Benyakhlef | Google, Tutoriales
Afortunadamente cada vez existe mayor libertad a la hora de diseñar una web. Hasta hace poco sólo podíamos utilizar las fuentes de sistema, las «arial, verdana,times,…». El uso de una fuente fuera de este grupo podía suponer una catástrofe visual si el usuario que entraba a ver la web no tenía instalada dicha fuente en su máquina. Existía la posibilidad de «hacer trampa» con flash o con imágenes, pero los inconvenientes eran tantos que salvo contadas ocasiones, no merecía la pena contemplarlo.
Ahora como sabeis, existen varias formas de utilizar cualquier fuente en vuestros sitios, @font-face rule, Tipekit, Fonts.com Web Fonts, Fontdeck, Webtype, WebINK,… Hoy sin embargo vamos a ver sólo Google Web Fonts, veremos las mejores fuentes que nos ofrece, sus ventajas e inconvenientes.
(más…)
por Omar Benyakhlef | Diseño Web, HTML5, jQuery
Un buen diseño web debe tener como primer objetivo su target. Si además estamos al tanto de las últimas tendencias y técnicas de diseño web, aumentaremos las posibilidades de éxito.
Hoy en día «prácticamente» no tenemos límites a la hora de diseñar, de un modo u otro, casi todo se puede hacer, por eso mismo es obligatorio ser conocedor de estas técnicas, conociéndolas podremos acudir a ellas en función del diseño al que nos enfrentemos.
En este post vamos a ver en qué consiste el Scroll Parallax, vais a poder descargar código gratis y ver algunos ejemplos de efectos que podemos conseguir con esta técnica.
Parallax Scrolling es sin duda un enorme paso hacia adelante y un tremendo reto para diseñadores, ya que ahora no nos limitamos a pensar en cómo rellenar el dichoso papel en blanco. Diseñar una web parallax es en cierto modo, jugar a ser «director de cine». Una sucesión de escenas van a cambiar por completo el escenario que mostramos al usuario, además, tendremos que pensar de qué modo pasamos de una escena a otra, movimientos, máscaras, transparencias, vídeos y fotografías se suceden uno tras otro o simultáneamente, para situarse en su posición correcta cada vez que el usuario se detiene a examinar cada pantalla. Además, tendrás que pensar en cómo conservar la usabilidad de esta web, fijando el menú en una posición absoluta, haciendo que se mueva con el resto de la web… En definitiva es un reto a la imaginación, mucho mayor que cualquier otro tipo de web, es pura creatividad, esta creatividad es la que va a diferenciar una web espectacular de una normal, aunque esta normalidad va a estar acentuada por la vistosidad de esta técnica.
(más…)
por Omar Benyakhlef | Diseño para móviles, Diseño Web, HTML5, iPhone, jQuery, jQuery Mobile, Mobile
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. (más…)
por Omar Benyakhlef | CSS, HTML5
Recursos HTML5 GRATIS
HTML5 ha representado una tremenda evolución en el diseño web.
En este post podréis encontrar varias direcciones en las que poder encontrar documentación y ejemplos de diseños web realizados con HTML5.
(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 | CSS, jQuery
Scrollbar con jQuery y CSS
En diseño web cada vez se ve menos el scroll. De todos modos, hay veces en los que es necesario y si además podemos meter una barra diseñada por nosotros y ocultarla, mejor que mejor.
Este código nos permite ocultar la barra de desplazamiento, apareciendo cuando nos situamos encima de la zona de acción. Un ejemplo que podemos ver en la actividad en tiempo real de Facebook. Este ejemplo está realizado con jQuery y CSS.
(más…)
por Omar Benyakhlef | CSS, Diseño Web, HTML5, Trucos CSS
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.
por Omar Benyakhlef | jQuery
Retina display con jQuery
Hoy os dejo una adaptación de la retina display de iPhone para adaptarla a web. Se trata de un efecto lupa que se acciona con el ratón, realizado con jQuery.
La lupa nos muestra la imagen a tamaño original y lo que queda fuera es una reducción de la misma. El efecto resultante es muy vistoso.
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 | Diseño para móviles, Diseño Web, jQuery Mobile, Mobile, Taller Web
Web App con jQuery Mobile I
Hoy vamos a ver cómo enfrentarnos por primera vez a una Web App con jQuery Mobile. Se trata de un pequeño tutorial en el que podrás hacer tu primer diseño web para movil. Es básico, pero puede ser la base de grandes diseños futuros.
Vamos a empezar paso a paso definiendo cada uno de los códigos que componen la Web App y vamos a explicarlos.
(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 | CSS, Diseño Web, jQuery
Checkbox y Radio Buttons con jQuery y CSS
No me canso de decir que jQuery ha sido la revolución del Diseño Web.
Aquí, una prueba más. Se acabaron los feos y aburridos Checkbox y Radio buttons, damos la bienvenida a la imaginación aplicada al diseño web. Con un poco de CSS y jQuery, maratz.com nos enseña a hacer estos vistosos diseños que podéis ver en la imagen del post.
Podéis ver el funcionamiento y descargaros todo el código necesario. Obviamente ya es cosa de cada uno el personalizar las CSS para llevar esta técnica a nuestros diseños web.
