…voooolverán… como nos cantaba, en referencia a unas gaviotas y no a unos banners, la canción ya lejana en el tiempo de aquel cantante vasco de dientes entrecortados, creo que de nombre Mikel Eretxun no? y qué decía “volverán” o “ande irán” ?

Decir que Adobe Flash está tocado y hundido es una opinión muy personal y de aquellas que siempre genera polémica entre desarrolladores. Y que creo que esta debe ser ya la duodécima vez que saco este tema a debate en el blog, tanto ajo es lo que tiene.

Me confieso, que esta semana santa es para eso, o no? Yo la verdad que hace tiempo que perdí los guiones, en fin en sus inicios yo fui un precursor de esta tecnología, adoraba su línea de tiempo y que con los escasos conocimientos de programación que tenía para aquel entonces, programación siempre basándote en deformar ejemplos, podrías hacer menús para la web muy atractivos y videoflashes con los que tus clientes babeaban, pero la cosa para la gente de Adobe empezó a decaer en tres momentos muy acusados. Vamos a ellos:

Primero cuando nos dimos perfecta cuenta de su opacidad para con los buscadores, oh Dios del SEO, engendros como Google no eran capaces de leer su contenido, sí, existían soluciones paralelas pero todas de un nivel técnico ya algo complejo y lejano para los diseñadores web no aficionados a pelar mucho código, y eso para los pequeños estudios representó un gran problema, problema que se acrecentó cuando el proyecto Macromedia Flash pasó de manos de Macromedia a Adobe, siendo esta última que es un gran mastodonte empezó como no a complicarnos la cosa al tratar de elevar su lenguaje de programación, yo ya me perdía en que si ActionScript, AS2 y AS3, y va en esto y el ya desaparecido Steve Jobs suelta ante un público multitudinario un… sobre Flash? no me gusta, ni iPhone ni iPad lo van a soportar… la bomba cayó en Adobe.

Desde entonces la web se ha sometido a un lento proceso de cambio y o mejora, donde se ha perdido mucha interactivad, mucha pachanguera y con cierto mal sabor y elevado sobrepeso. Al final las cuentas, al menos me dicen a mi, que todos hemos ganado con el desuso de Flash, una tecnología que aún no quiere morir y que algunos programadores todavían la utilizan para crear aplicaciones para móviles, porque finalmente permite generar aplicaciones nativas para IOS… no para visualizarlas desde el navegador sino para que estas sean ejecutadas de una forma nativa. Esta funcionalidad es para mi tan sólo una bomba de oxígeno que alargará un poco más sus días, pero HTML5 está aquí esperando para acabar con él, es tanto el miedo que tiene Adobe que incluso compró PhoneGap, una alternativa para crear aplicaciones para iOS, Android y Blackberry pero basada en estándares abiertos HTML Javascript y CSS?

Ahora bien, retomando el foco en titular de este articulillo, existe un algo que se ha perdido con la caída de Flash, y este no es otro que los banners animados, ahora todo es muy estático llama poco la atención, a excepción de los residuos de banners en Flash, generalmente de casinos y esta falta de atención hace que la efectividad del clcik en banners caiga a cotas muy mínimas que hace que muchas empresas de publicida online tengan que cerrar sus puertas ya que muchos anunciantes tiran por lo barato y autoadministrable, los condenados adWords.

No hay una solución firme a este problema colateral, porque volver a los formatosl .GIF sería un evidente paso atrás y es aquí donde los sesudos mandamases de Adobe se han aferrado a sus visionarios pidiendo un producto nuevo y compatible para los tiempos, y dispositivos que corren, Adobe Edge, un producto que me recuerda mucho al adorable After Effects y que permite como aquel animar mediante línea de tiempo y capeado textos y gráficos, incluso permite la adición de efectos, generándote con ello un set de archivos 100% compatibles con la web, en su mayoría archivos .JS. Suena interesante, y quizá funcione y se estandarice, eso si otras opciones ya más asentadas como jQuery se lo permiten, podría entonces Adobe recuperar algo del mercado perdido de Flash, agencias de publicidad bannaneras, por lo de que su especialidad es el banner, sin tratar de ser despectivo que yo en su día le di mucho a esto de hacer banners.

Puedes descargarte una versión beta de prueba desde su web si tu plataforma es Windows o OS X, chicos de Linux, como siempre, Adobe a la suya, donde hay dinero directo se mete, donde no, pasa de una forma descarada y vil, conformaros con darle un vistazo al siguiente vídeo:

Video: http://tv.adobe.com/watch/adc-presents/introducing-adobe-edge-preview-5/
Más info: http://labs.adobe.com/technologies/edge/

Páginas relacionadas con este artículo:

1. Estructuras redimensionables para iPhone
2. Diferentes dispositivos diferentes resoluciones
3. Nube de tags 3D sin Flash

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

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:

1. jQuery para móviles
2. Otro slider o accordion pero este gratis
3. Nube de tags 3D sin Flash

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

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:

1. jQuery para móviles
2. El mejor slider que he visto
3. Y mil banners volverán…

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:

1. Instalar Apache 2 PHP 5 MYSQL 5 y Webmin 1.5
2. Habilitar cURL en Ubuntu
3. laCaixa utiliza servidor web Apache

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:

1. Estructuras redimensionables para iPhone
2. Aplicación web para generar thumbnails
3. Generador de plantilla de columnas para web

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