La diversidad de dispositivos para conectarse a la red y navegar por las páginas web es creciente, y con ello la disparidad de resoluciones, desde una pequeña pantalla vertical de un teléfono móvil inteligente, como el iPhone o cualquier dispositivo con Android hasta los mil formatos de monitores que van desde los ordenadores corporativos que aún cuentan con pantallas de 15 y 17″ y resoluciones de 800 píxeles de ancho hasta los grandes monitores de veintitantas pulgadas y resoluciones super horizontales de más de 1900 píxeles.

Es tal esta diversidad de formatos que si queremos aprovechar mínimamente la resolución disponible en cada pantalla o dispositivo la solución es diseñar para varios formatos, de lo contrario tus clientes te llamarán diciéndote, no se aprovecha el ancho de pantalla, no se ve bien con el móvil, aparecen barras y es innavegable, será tal el caos que te traemos una de las muchas soluciones existentes: La librería que combina javascript y CSS denominada Adapt

Esta librería te permite disponer de varias hojas de estilo y cargar dinámicamente la que mejor se adapta al dispositivo que visita la página web.

Dale un vistazo en: http://adapt.960.gs/

Páginas relacionadas con este artículo:

1. Estructuras redimensionables para iPhone
2. Clase PHP para móviles
3. Compatibilidad CSS3 con diferentes navegadores

Ideal para usar como carrousel de productos en cualquier página de inicio de tiendas online.

Puedes aprovecharlo para destacar los últimos productos y además de que la tienda mejorará en lo visual este slider hará que aumente el tiempo de estancia en la landing page más visitada de la tienda, es decir, en la home y con ello obtensrás un gran beneficio en el posicionamiento de tu web.

http://workshop.rs/projects/coin-slider/

Páginas relacionadas con este artículo:

1. Slider con hashtag bajo jQuery
2. Otro slider o accordion pero este gratis
3. Posicionar tienda online 1

Hemos descubierto una librería de lo más interesante, jszip, su funcionalidad es la de comprimir archivos en el lado del cliente desde cualquier aplicación javascript, su aplicación real, pues depende por ejemplo, para subir lotes de fotos a servidor, o cualquier multiupload, primero las comprime y luego las sube, ahorrando así ancho de banda.

Otra aplicación práctica sería la de un gestor documental, donde primero lee el contenido lo clasifica y luego lo sube ya comprimidito. Lo mismo para una aplicación con la que compartir datos, etc.

Existirán muchas otras aplicaciones de esta rutina, por ahora yo veo esas, ¿Ves tu alguna más? Pues comenta, que es gratis.

Enlace a la librería: http://jszip.stuartk.co.uk/

Páginas relacionadas con este artículo:

1. Correctores ortográfico en PHP y Javascript
2. Motor para videojuegos bajo HTML5 y JavaScript
3. Arrastrar y soltar en JavaScript

A nivel de efectos es sencillito pero muy efectivo, meter más efectos es meter más ruido y perder elegancia, puede modificarse prácticamente del todo via CSS.  No obstante estos efectos son totalmente ampliables mediante la configuración de diferentes easeIn y easeOut, puedes ver los efectos disponibles en:

http://gsgd.co.uk/sandbox/jquery/easing/

Además este slider permite que se desplace su contenido interior a través de la rueda de scroll del mouse, genera la paginación automática y permite cualquier tipo de contenido, todo en 2,2Kb. (Sin contar las librerías jQuery).

A nivel de compatibilidad hemos encontrado algún problema menor con Google Chrome, donde el indicador de paginación está sobre el contenido y la capa flotante pisa algo el contenido, bajo FireFox funciona perfectamente, quizá en una nueva versión corrijan estos problemas.

La licencia de este slider es totalmente free, es decir puedes incorporarla en tus propias aplicaciones sean comerciales o no.

Enlace: http://mgoys.com/lab/hashslider

Páginas relacionadas con este artículo:

1. Visor de imágenes con efectos y jQuery
2. Otro slider o accordion pero este gratis
3. El mejor slider que he visto

Ya está aquí, ya ha salido la primera versión del framework javascript más famoso en su versión destinada al desarrollo de aplicaciones y diseño de páginas web para smartphones y tablets, jQuery Mobile.

Esta librería que ocupa 12Kb. en su versión comprimido es compatible con gadgets que funcionan bajo los siguientes sistemas operativos: Android, iOS, BlackBerry, WebOS, bada, symbian, Meego Windows Phone.

En jQuery Mobile, como es lógico destacan las funciones touch para sacarle mayor partido a las capacidades táctiles de estos dispositivos y las funcionalidades para que la interficie se adapte a las pequeñas y diferentes entre ellos pantallas que suelen incorporar estos dispositivos.

Enlace: http://jquerymobile.com/

Páginas relacionadas con este artículo:

1. Estructuras redimensionables para iPhone
2. Clase PHP para móviles
3. Slider con hashtag bajo jQuery

HTML5 & CSS3 Resources for Designers
Updated: 2010-10-14 (new items highlighted below)
CSS3 Examples (including Media Queries)

http://thebox.maxvoltar.com/

http://hardboiledwebdesign.com

http://lostworldsfairs.com

http://www.informationarchitects.jp/

http://colly.com

http://hicksdesign.co.uk

http://jordandobson.com/better_rounded_border_demo/

http://www.designmadeingermany.de/magazin/5/

http://neography.com/experiment/circles/solarsystem/

http://neography.com/experiment/type1/

http://newadventuresconf.com/

http://maxvoltar.com/temp/nowplaying/

http://maxvoltar.com/sandbox/flipclock/

http://prandall.com/experimental/css3-backgrounds/

http://lab.simurai.com/css/umbrui/

http://trentwalton.com/css3/type/

HTML5 Examples (including Canvas)

http://www.chromeexperiments.com/

http://www.apple.com/html5/

http://www.apple.com/ipad/ready-for-ipad/

http://desandro.com/articles/close-with-canvas/

http://mezzoblue.github.com/PaintbrushJS/demo/

http://mugtug.com/sketchpad/

http://www.nihilogic.dk/labs/canvas2image/

http://www.rgraph.net/

http://videojs.com/

http://sublimevideo.net/

Tools, et al.

http://www.colorzilla.com/gradient-editor/

http://westciv.com/tools/

http://css3generator.com/

http://border-radius.com/

http://mothereffingtextshadow.com

http://modernizr.com/

http://selectivizr.com/

http://code.google.com/p/css3-mediaqueries-js/

http://code.google.com/p/ie7-js/

http://code.google.com/p/universal-ie6-css/

http://lessframework.com/

http://www.happyworm.com/jquery/jplayer/

http://macrabbit.com/cssedit/

http://html5reset.org/

http://html5boilerplate.com/

More reading

http://www.quirksmode.org/css/contents.html

http://reference.sitepoint.com/css/css3attributeselectors

http://diveintohtml5.org/

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/

http://html5doctor.com/native-audio-in-the-browser/

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

http://24ways.org/2009/working-with-rgba-colour

http://24ways.org/2009/css-animations

http://24ways.org/2009/going-nuts-with-css-transitions

http://24ways.org/2009/cleaner-code-with-css3-selectors

http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

http://realworldcss3.com/resources/

Páginas relacionadas con este artículo:

1. Plantillas de páginas web con HTML5
2. Motor para videojuegos bajo HTML5 y JavaScript
3. Compatibilidad CSS3 con diferentes navegadores

Hace un par de días os hablé de un accordion o slider que es como a mi me gusta llamarlo para que lo implementes en tu web, pues bien aquel era branded, es decir con copyright a menos que pagases la licencia, pues na… que he buscao y buscao hasta encontrar uno con ciertas similitudes pero gratuito, también basado en jQuery.

Enlace: http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/

Demo en: http://www.madeincima.eu/samples/jquery/easyAccordion/

Descarga: Slider gratuito (149)

Páginas relacionadas con este artículo:

1. El mejor slider que he visto
2. Slider con hashtag bajo jQuery
3. Recursos en HTML5 y CSS3

Bueno… esto va en serio, menudo slider multidimensional que han construido bajo jQuery… quita el hipo! Viene preparado para sistemas touch o taćtiles, aka iPad, iPhones y tablets y teléfonos Androideados, tiene unos efectitos muy elegantes y discretos y un montón de abalorios para decorar este fantástico slider accordion o acordeon de contenidos que puede hacer las veces de portfolio o de menú de prácticamente cualquier web, a nivel de usabilidad es muy correcto, le doy un 7 sobre 10 va… que no se diga.

Disponen de una licencia comercial, sin su marca, y una licencia Freeware con la marca pero totalmente preparada para integrar en WordPress. Haber si venden cantidades brutales y se nos demuestra que de esto, podemos vivir todos, amigos manitas del javascript!

Dadle un vistazo: http://www.slidedeck.com/wordpress/

Páginas relacionadas con este artículo:

1. Otro slider o accordion pero este gratis
2. Slider con hashtag bajo jQuery
3. Motor para videojuegos bajo HTML5 y JavaScript

Impact HTML5 Game Engine es un motor de videojuegos desarrollado por Dominic Szablewski de PhobosLab denominado http://impactjs.org/ que todavía, durante este mes de septiembre, aún no está disponible para la descarga, pero promete y mucho.

Permite animación, audio, sincronización de eventos, marcadores, editor de niveles y compatibilidad, mucha compatibilidad pues no precisa Flash utiliza tecnologías HTML5 y JavaScript. Lo primero que se viene a la cabeza es si funcionará con iPhone, iPod e iPad, y Android, debería, pero según cuenta Dominic, bajo iPhone 3G sólo da unos tristes 12 fps además de que tiene problemas con el audio, bajo Android o los nuevos iPhones e iPads todavía no lo ha probado, así que de momento no lo podemos afirmar.

Puedes dejarles tu email en su página web para que te avisen cuando esté disponible. y lo mejor de todo, durante la espera puedes echarte unas partidas al videojuego Biolab Disaster, una demo realizada enteramente por el creador de este game engine.

Biolab Disaster es un videojuego de plataformas con mucho sabor a pixel y una excelente jugabilidad.

Lo más interesante de este post es que te traemos un vídeo realizado por su autor con el “¿Cómo se hizo?”, no te lo pierdas empieza flojo, pero luego nos muestra parte del código, ideal para tomar buena nota.

Páginas relacionadas con este artículo:

1. Recursos en HTML5 y CSS3
2. Google Native Client
3. jQuery para móviles

Nos ha llegado un sistema de generación de gráficas de barras enteramente desarrollado en CSS que te permite generar gráficas de datos de líneas y puntos en tus páginas web, dale un vistazo en:

http://cssglobe.com/post/4175/pure-css-line-graph

Páginas relacionadas con este artículo:

1. Gráficos de datos en JavaScript
2. Diferentes dispositivos diferentes resoluciones
3. Base de datos Cassandra