por Omar Benyakhlef | HTML, iPhone, jQuery, jQuery Mobile, Mobile
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
por Omar Benyakhlef | CSS, jQuery
Botones Social Media con jQuery y CSS
En diseño web se ha vuelto imprescindible poder compartir tus contenidos con tus usuarios, si además lo puedes hacer de una manera vistosa, no solo gustará más a tus usuario, si no que será mucho más fácil que se vean tentados a utilizarlo.
AjaxMint nos muestra un alucinante ejemplo en el que además nos permite descargarnos el código.
por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery
Cargador de vídeos en jQuery
El diseño web con jQuery además de haber conseguido una mayor usabilidad y velocidad de navegación, nos proporciona una infinidad de soluciones a cuestiones que hasta ahora eran muy laboriosas y pesadas tanto de elaborar como a la hora de cargar la página. Hoy os dejo el dualSlider, otro slide en este caso utilizado como cargador de vídeos que además de ser muy vistoso, nos permite añadir acciones muy útiles a la vez que reproducimos nuestros vídeos (textos y titulares adicionales, reproducción automática…)
El paso de un vídeo a otro puede ser manual o automático, pudiendo además controlar fácilmente la velocidad de transición de uno a otro.
Por supuesto que código gratuito listo para funcionar. Podéis ver el funcionamiento y descargar todos los archivos necesarios en http://www.hugoandcat.com/DualSlider/index.html
Si queréis ver otros slides en este blog de diseño, visitad los siguientes post
por Omar Benyakhlef | jQuery
Más jQuery para tu web
La relación diseño web + jQuery ha sido sin duda la última revolución del diseño web. Más posibilidades, más usabilidad, más ligero,…
Hoy os dejo una forma de hacer todavía más usable vuestra web o blog. Se trata de las típicas pestañas que quedan siempre fijas a una determinada altura de la pantalla, independientemente de que hagamos scroll. Muy útil para colocar los accesos a redes sociales, RSS, o al carrito de la compra.
En el post de tympanus.net además de poder descargaros el código, podréis ver cómo funciona.
Ver más post relacionados con jQuery, y Mootools.
por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery, Usabilidad
SlideDeck
Un buen diseño web ha de adaptarse al perfil del usuario que lo va a utilizar y a las necesidades del producto que queremos mostrar, para esto, debemos de estar siempre a la última, ver todas las tendencias y todas las nuevas herramientas que nos ofrece el desarrollo web, en este caso y una vez más, utilizando jQuery.
Hoy os dejo una verdadera joya, el SlideDeck, una nueva forma de mostrar el contenido de una web que últimamente se está poniendo de moda, es muy intuitivo, elimina la sobrecarga de información dando una mejor experiencia de usabilidad e incluso hace divertido interactuar con él.
Es ideal para mostrar diferentes destacados en una página, o incluso, podríamos usarla para hacer enteramente la web dentro de ella (para pequeñas webs de información).
Además de espectacular, es súper usable, ya que por ejemplo podemos cambiar de información moviendo la rueda del ratón.
por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery, Mootools
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.
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery, Usabilidad
Espectacular jQuery
«Diseño web con jQuery, cada vez más y más utilidades para hacer un sitio bueno usable y vistoso», esto es lo que una y otra vez vemos en todos los post relacionados con el jQuery.
Sigo recopilando utilidades para el diseño web, y sigo sorprendiéndome. No existe límite, las distintas librerías Ajax, como el jQuery o Mootools, nos proporcionan herramientas suficientes para poder construir un sitio web usable y vistoso.
Hoy vamos a ver, desde cómo hacer la galería de productos de Apple, hasta un modo impresionante de ocultar y mostrar información.
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery
Paneles deslizables en jQuery
Css-Triks es un blog de diseño web referente para muchos de nosotros.
Hace unos días encontré un post que me está sirviendo de mucha ayuda en un nuevo diseño web que tengo entre manos. Me parece genial, es muy ligero y es una solución muy buena para enseñar productos en una web.
Se trata de una galería que va mostrando y ocultando los divs que hemos definido en la página, con un efecto zoom.
Lo podéis descargar gratuitamente en el post original. Espero que os sirva.
por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery, Mootools
cambiar font-size con javascript
En diseño web cada vez encontramos más diseños en los que se combinan distintos tamaños de fuente. Esta práctica tan utilizada en diseño impreso, ahora y quizás debido a los blogs, se ve reflejada en muchos de los mejores diseños que vemos por la red.
Echando un vistazo a CSSTricks he encontrado un interesantísimo artículo en el que nos cuentan como cambiar el tamaño de la fuente de un párrafo en función de la cantidad de letras que contiene.
Chri Coyier, el autor de esta idea, nos cuenta cómo hacerlo usando javascript y nos deja dos ejemplos, uno usando Mootools y el otro usando jQuery.
A continuación os dejo los dos ejemplos, y os recomiendo que echéis un vistazo al post, porque de los comentarios también podréis aprovechar más de una idea que simplifica el código.
(más…)
por Omar Benyakhlef | Ajax
PageSlide con JQuery
¿Habéis visto el efecto que produce el iPhone cuando pasamos de una página a otra?, la pantalla se desplaza horizontalmente dejando ver el siguiente contenido. Este plugin permite a cualquier desarrollador crear una interacción similar en su propio sitio web utilizando unas simples líneas de Javascript.
Adjuntando el método a una etiqueta de ancla, pageSlide envuelve el contenido original en una capa y crea un nuevo bloque para el contenido secundario. Al hacer clic en el evento se invocamos la animación.
Una de las ventajas que tiene es que no perdemos de vista la ventana principal, por lo que en cualquier momento el usuario puede volver a su contenido original con solo hacer clic sobre él.
Este plugin lo encontré en los grupos para desarrolladores de google. La verdad es que es una mina, muy recomendable !!!
Más información sobre PageSlide
por Omar Benyakhlef | Diseño de páginas web
Demostraciones de lo que se puede llegar a hacer con JQuery
Esta es una lista de algunos sitios en los que podemos ver hasta qué punto podemos diseñar una magnífica navegación con JQuery. Además de hacer todo más intuitivo y atractivo, el tiempo de carga es infinitamente inferior a otros sistemas al no tener que recargar la página o llamar a otra. JQuery consigue darnos una navegación tan fluida, que en numerosas ocasiones no sabrás si navegas por flash o html.
Estoy convencido que estas librerías ya son presente del diseño y que cada vez veremos más sitios programados con esta tecnología. Hoy en día cualquier web de primer orden ya incorpora Ajax en sus formularios, porque además de ser más rápida la navegación conseguimos ayudas geniales para el usuario.
A continuación una serie de webs que seguro que os van a sorprender:
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web
Diapositivas con jQuery
A veces necesitamos hacer presentaciones de fotografías de modo automático, tipo diapositivas. Hasta ahora la única solución era meter las imágenes en flash y hacer transiciones entre ellas.
JQuery tiene un plugin llamado CrossSlide capaz de hacer varios tipos de animación cambiando solo un par de parámetros. Las transiciones son bastante fluidas, pero dado que dependen del navegador y de la plataforma que usemos para cambiar el posicionamiento y ver bien estas transiciones, varían los resultados dependiendo de la combinación que tengamos (firefox con windows, Mac o Linux, Explorer, Safari,…).
Toda la explicación de cómo usar este plugin y de cómo usar cada una de las posibilidades de transición las tenéis en Gruppo4.com
por Omar Benyakhlef | Diseño de páginas web
JQuery, varias páginas en una
Hace tiempo ya escribí un post acerca de esta característica de Ajax, la de enseñar y esconder código, dado que cada vez estoy viendo más esta práctica, he decidido reciclarlo.
Ajax ha revolucionado el diseño web. Con librerías como jQuery podemos conseguir infinidad de efectos en una página web. Entre ellos está el de cargar contenido sin necesidad de recargar la página, el ejemplo lo tenéis en la web www.sourcebits.com, esta web muestra varias páginas dentro de una úncica.
Se trata de esconder y enseñar contenido, y para hacerlo, se sirve de efectos de desplazamiento o fundidos. En esta web podemos ver como se pliegan los contenidos que queremos abandonar, para luego desplegar los nuevos que hemos solicitado. Visualmente todo esto es genial pero como todo tiene sus pros y sus contras.
A favor: la carga de contenidos es muy rápida, la fluidez de navegación puede llegar a ser muy buena y el impacto visual es enorme, ante la novedad, el usuario recordará tu web como algo muy innovador.
Nos da la opción de generar nuevas url’s dentro de la actual del tipo «#loquesea», eso significa que nos quitamos de un plumazo los problemas SEO que pudiese originar.
Sinceramente no veo ningún problema en utilizar esta librería, creo que es futuro y como diseñadores deberíamos empezar a implantarlo en nuestros futuros proyectos.
Para saber más sobre cómo funciona y descargarse la librería, visita este post «contenidos con jQuery«
por Omar Benyakhlef | Ajax, Diseño de páginas web, Usabilidad
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,….
por Omar Benyakhlef | Ajax
¿Cómo hacer zoom sobre una imágen con jQuery?
Cuanto más investigo más consigue sorprenderme. Ahora estoy con un proyecto en el que necesito hacer una lupa o zoom sobre las imágenes. Lo primero que se me pasó por la cabeza fue buscar una solución en flash, pero dadas mis limitaciones, eso me haría crear un flash para cada zoom. Hasta que finalmente encontré esta joya, ¿cómo hacer zoom con jQuery?.
El resultado como podréis comprobar, es alucinante !!!!. Al colocarnos sobre las imágenes se abre una capa flotante que nos va mostrando la selección que estamos marcando.
El plugin se llama jQzoom y tanto la descarga como los ejemplos los podéis conseguir en Mind Projects.
por Omar Benyakhlef | Ajax, Diseño de páginas web, Usabilidad
Con jQuery podemos usa cualquier tipografía en nuestra web.
Una de las grandes limitaciones del diseño web, es el escaso abanico de fuentes que podemos usar para diseñar una web. Como es sabido, para que un usuario pueda ver una web con una determinada tipografía, debe de tenerla incorporada en su máquina.
Hace tiempo que surgió el sFIR, acrónimo de Scalable Inman Flash Replacement, mediante esta técnica, podemos reemplazar textos por flash. Seguramente por la complejidad de configuración no se ha hecho todo lo popular que debería, pero ahora, con la biblioteca jQuery, parece ser que hemos dado un gran paso adelante, gracias a la inmensa librería de plugins, el convertir un texto en swf es ahora mucho más fácil y rápido.
Gracias a jQuery, no necesitamos especificar color y demás atributos de la fuente. Además ahora ya no es necesario subir el archivo a producción o tener un servidor local para ver el resultado. Todo esto unido a que es más rápido e intuitivo, hace más atractiva la opción de comenzar a introducir nuevas fuentes en nuestros diseños.
Kemie Guaida nos ofrece un tutorial perféctamente ilustrado y todos los enlaces necesarios para poder usar esta técnica.
por Omar Benyakhlef | Ajax, Diseño de páginas web
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!!
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web
jQuery es una biblioteca javscript que permite manejar eventos, desarrollar animaciones y agregar interacción con tecnología Ajax a nuestras páginas.
Una de sus principales características es su simplicidad. Podemos añadir impresionantes efectos con sólo unas pocas líneas de código, lo cual repercute positivamente en el peso de nuestras páginas.
(más…)
