por Omar Benyakhlef | Diseño para móviles, iPhone, jQuery, jQuery Mobile, Mobile
Biblioteca multi-touch para WebApp
En numerosas ocasiones se ha recurrido al desarrollo de aplicaciones nativas al no existir la posibilidad de poder realizar ciertos desarrollos para web.
Una de las limitaciones en una aplicación web era el no poder programar gestos multitáctiles, como pellizcar para agrandar o disminuir el zoom, rotar, drag and drop,… Gracias a Hammer.js, ahora podemos implementar todo tipo de gesto multi-touch en nuestra WebApp
Hammer.js es una biblioteca javascript (requiere jQuery) para gestos multitáctiles de apenas 2kb destinado a operar con los gestos multitáctiles, clic, doble clic, arrastrar, mantener pulsado, escalar,…
Además, parece ser que ha sido testada en diferentes smartphones y tablets comprobando su compatibilidad.
por Omar Benyakhlef | jQuery
Arde tu texto con jQuery
Pues si, tienes toda la razón, una macarrada !!!
Pero no me digáis que no es potente este plugin jQuery para hacer arder el texto.
Burn jQuery es un plugin que añade un efecto de llama a tu texto, con distintos tipos de sombras y animación.
Admite detenerlo y reiniciarlo dinámicamente, modificar la aceleración y algún que otro detalle más.
por Omar Benyakhlef | Diseño Web, jQuery
Plugin jQuery para hacer Scroll
Plugin para realizar scroll horizontal, scroll vertical y scroll infinito con jQuery.
Súper útil para realizar sliders o incluso para hacer webs tipo parallax. Además de realizar los desplazamientos con aceleración, nos permite poder navegar entre capas con barra de scroll o con botones.
El caso del scroll infinito merece una mención especial. Se trata de realizar una navegación vertical en la que el contenido se va cargando poco a poco mientras nosotros navegamos las primeras pantallas, según vamos aproximándonos al final del scroll, la página vuelve a cargar nuevas secciones.
por Omar Benyakhlef | CSS, Diseño Web, jQuery
CSS3 y jQuery. Descubre en este post, alucinantes efectos que te ayudarán en tus próximos diseños web.
En este blog de diseño web podréis encontrar gran variedad de artículos sobre jQuery y CSS3 .
En esta ocasión, he intentado hacer una selección lo más variada posible, de ejemplos que podemos necesitar, pero sin duda, al que tenga tiempo, le recomiendo que se de un paseo por http://tympanus.net/ para ver la cantidad de ejemplos que nos ofrece esta tecnología.
Se trata de 14 ejemplos de jQuery y CSS3 para mejorar tu web. En algunos casos se trata de ejemplos para integrar en tu web, y en otros, de verdaderos proyectos para generar una web espectacular.
(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…)
