uvedobles.com» javascript

Diferentes dispositivos diferentes resoluciones

dedavid — Fri, 22 Apr 2011 07:56:22 +0000

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:

Sistemas de ayuda para aplicaciones web

dedavid — Wed, 19 Jan 2011 12:28:10 +0000

Hoy posteamos sobre un script que encontré para poder integrar sistema de ayuda embebidos en páginas web o aplicaciones web ya existentes.

Esto te permite domesticar y humanizar tus formularios web.

Está desarrollado, como no, bajo jQuery

http://embedded-help.net/usage

Páginas relacionadas con este artículo:

Visor de imágenes con efectos y jQuery

dedavid — Tue, 18 Jan 2011 07:44:17 +0000

Impresionante slider de imágenes bajo jQuery con unos efectos de transición supermedidos y elegantes.

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:

Comprimir ficheros desde JavaScript

dedavid — Mon, 10 Jan 2011 10:38:23 +0000

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:

Nube de tags 3D sin Flash

dedavid — Sat, 08 Jan 2011 14:28:48 +0000

Os paso el enlace de una nube de tags rotatoria en 3D basada en jQuery, es decir sin el uso de Flash, lo que hace que no sea opaca para el posicionamiento en Google y se pueda ver en dispositivos iOS como el iPad o el iPhone aunque obviamente su funcionalidad se reduzca pues al ser táctiles no tienen el comportamiento Over además de que francamente va algo a trompicones, pero bueno, ya es algo.

La demo en: http://www.iangeorge.net/snippets/tags/

El código en: https://bitbucket.org/elbeanio/jquery.tagsphere/wiki/Home

Páginas relacionadas con este artículo:

El Módulo pagespeed para Apache

dedavid — Sat, 18 Dec 2010 11:29:28 +0000

…y la madre que tuvo el dudoso gusto de darle a luz, la todopoderosa Google…

No se si es porque no me leo la documentación de nada de cabo a rabo, de ser así probablemente estaría leyendo aún los manuales de la PalmPilot I, o siendo sinceros los del ZX Spectrum pero el modulito mod_pagespeed que lanzó Google me ha dado por saco durante horas, deteniendo mi producción “pa na”.

Os explico a continuación, me lo instalé hace unos días en mi máquina con Ubuntu donde desarrollo aplicaciones web como siempre para trastear con ello y ganar algo de velocidad en descarga, pues bien en esta máquina es donde mismamente estoy mejorando el sistema de emailing que incorpora mi aplicación de facturación electrónica invOOice.com.

Con este modulo instalado, que debe ir de narices para máquinas en producción, Apache2 te crea un directorio donde cachea ficheros estáticos, por ejemplo los ficheros .js con javascript, luego al hacer cambios y grabarlos, Apache2 no se entera durante un cierto tiempo y el problema es que cambias y no ves los resultados producidos por el cambio, todo esto durante horas hasta que al final con un alert(‘hola hola’) que no aparecía por ningún lado me di cuenta de que esto leía de algún sitio que no era el suyo, nada, ves el código fuente, te fijas y tachán:

forms.ajax.js.pagespeed.ce.QB8x0iVrtt.js

Grrrr… ahora ármate de valor baja a la línea de comandos y desinstala el módulo pagespeed, eh? bueno, pues para eso os copio aquí la solución, a grandes trazos borrar los módulos a saco paco del directorio de módulos de apache:

cd /etc/apache2/mods-enabled/

rm pagespeed.conf

rm pagespeed.load

y reniciamos Apache con un!

/etc/init.d/apache2 restart

Te quedará una carpeta en apache2 con los cachés, yo no la he borrado, en cuanto pueda volveré a experimentar con pagespeed pues se notaba bastante, pero por el momento vamos a lo que vamos.

Páginas relacionadas con este artículo:

Editor HTML para textareas muy configurable

dedavid — Fri, 22 Oct 2010 07:40:42 +0000

Asombroso es lo que hacen algunos cracks a sus 22 años, hoy os traemos nic edit, un editor HTML 100% free, es decir es de los pocos editores HTML que puedes colocar en cualquier aplicación web sustituyendo a un area de texto o tag textarea para que en este se pueda introducir formato HTML, repetimos, puedes usarlo en tu web personal o en cualquier proyecto aunque este sea comercial, porque amigo, los CKeditor y compañía no son aptos para proyectos comerciales, por ejemplo para una tienda de comercio electrónico no puedes usarlo, a menos que pagues la licencia.

Nic Edit es altamente configurable además de ser bastante ligero, ahora bien, puede que alguno le eche en falta la posibilidad de creación de tablas, pues estas por ejemplo en las fichas de productos de una tienda online son a veces necesarias y NicEdit no las soporta.

Desde la propia página web del autor puedes seleccionar aquello que quieres que soporte el editor, para que se te genere el archivo .js a medida y comprimido.

Enlace: http://nicedit.com/

Páginas relacionadas con este artículo:

jQuery para móviles

dedavid — Mon, 18 Oct 2010 06:16:08 +0000

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:

Recursos en HTML5 y CSS3

dedavid — Sun, 17 Oct 2010 18:18:17 +0000

Al rico recurso en HTML5 y CSS3:

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/

Otro slider o accordion pero este gratis

dedavid — Fri, 08 Oct 2010 07:27:41 +0000

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 (123)

Páginas relacionadas con este artículo: