…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

Google, la todopoderosa, no cesa últimamente en su constante asedio a base de proporcionarnos estudiadas y competentes herramientas que se disfrazan bajo una piel de cordero ofreciéndonos soluciones mientras intentan esconder las obscuras intenciones del lobo más feroz de la red, y estas no son otras que el pago por servicio o SAAS y el absoluto control de cada byte que circula por internet.

Recientemente Google ha mejorado uno de sus servicios más famosos dentro de la comunidad de webmasters y propietarios de páginas web, el sistema de estadísticas y métricas web denominado GA o Google Analytics. La remodelada herramienta de tracking de visitas que nos traen es una muy mejorada funcionalidad para el control sobre el flujo de las visitas que va mucho más allá de lo que nos ofrecía Google Analytics hasta ahora, con un simple vistazo veremos el origen y el camino que conduce al usuario a una acción u otra.

La excelencia de esta optimizada funcionalidad es simple y directa,  la fácil visión del camino seguido por el usuario, un arma muy poderosa si es concienzudamente es aplicada y usada en el análisis de los hábitos del cliente en tiendas virtuales, permitiéndonos maximizar los momentos del proceso de compra: llegada, descubrimiento, interés, confianza y compra.

Si bien esta funcionalidad a día de hoy aún no está presente en todas las cuentas de Google Analytics, pronto será nuestra nueva aliada. Una herramienta que hace que cada día sea más difícil escapar de los largos tentáculos de Google, no hay alternativa, al menos eso creo comparando servicios con servicios.

Os dejo un vídeo para aquellos que aún no tenéis activada esta funcionalidad:

Flujo de las visitas

Páginas relacionadas con este artículo:

1. Clase PHP para leer Google Analytics
2. Google Translate APIsar a los que quieran
3. Evita que te sigan la pista

En más de una ocasión os habrán pedido algún diseño para el envío de un newsletter, el envío puede realizarse básicamente de dos formas, hay más pero o no las conozco o son muy específicas, esta son, la primera enviando una imagen anexada y otra remitiendo el contenido del email bajo lenguaje HTML.

Si ninguna de estas formas de remitir un correo electrónico el envío es un texto plano y hay poco o nada de diseño podemos ofrecer.

La opción de enviar una imagen es quizá la más válida para mi, por una razón, tienes total libertad en cuanto a diseño y se va a visionar bien en cualquier cliente de correo o dispositivo, sea este un PC, un Mac, un iPad, iPhone o teléfono Android.

Si bien la segunda opción, el envío de emails en HTML es como mínimo la forma más trabajada para enviar newsletters y permite contener siempre un mayor contenido.

En esta segunda opción para la que os copio unos interesantes enlaces desde donde podreis descargar unas plantillas HTML prediseñadas para el envío de newsletters siendo estas unas plantillas que podrás adaptar fácilmente al diseño que necesiten tus clientes.

Toma nota:

http://www.campaignmonitor.com/templates/

https://github.com/mailchimp/Email-Blueprints

En estos ejemplos se tienen en cuenta muchos factores de forma que trabajando sobre ellos te aseguras que te puedan leer correctamente en prácticamente cualquier ordenador o dispositivo, sin incompatibilidades que eso es muy importante.

Páginas relacionadas con este artículo:

1. Estructuras redimensionables para iPhone
2. Amazon SES para envío de emailings
3. Clase PHP para móviles

Esta aplicación web te ofrece los siguientes resultados:

• Capturas con los diferentes momentos en el proceso de descarga de la web
• La posibilidad de medir la velocidad de la misma desde diferentes países
• La posibilidad de medir la velocidad bajo diferentes navegadores web
• La gráfica con todos los archivos que conforman la página, su peso y su velocidad de descarga

Una de las limitaciones que presenta esta útil utilidad para medir la velocidad de descarga de una web es que tan sólo te permite realizar un máximo de 50 checks diarios bajo la misma IP, en la práctica creemos que son menos pues hemos intentado monitorizar la aplicación de facturación online invOOice.com desde todos los países que permite y tan sólo hemos podido llegar a medir 15 países.

La principal conclusión que he podido extraer, y que ya era obvia pero no tan mesurable, es que un servidor alojado en USA es mucho más rápido si es visitado desde la propia USA que desde Europa. Toma obviedad! Las diferencias que me he encontrado son muy muy destacables, del orden de los 9 segundos para una página home con tan sólo un formulario de login de usuario y unos cuantos enlaces, todo con el grafismo, el javascript y el html pesa un total de 103,6 Kb. que por lo que veo, se puede y debe optimizar.

En la gráfica Waterfall, que es la que te indica cuanto tarda cada archivo en descargarse veo claramente que puedo minimizar bastante, pues existen un total de 12 peticiones request y hay algunos archivos que no son estrictamente necesarios o son minimizables en esta pantalla pues el usuario aún no está logueado, si los elimino podré optimizar y mucho la velocidad de descarga de esa primera página o página home, también simultáneamente podré mejorar la seguridad del sistema. Un ejemplo claro es la hoja de estilo que se carga, que es la hoja de estilos de la aplicación, cargarla toda para tan sólo un login quizá no tiene mucho sentido. por lo que se puede reducir mucho si se carga una con tan sólo los elementos que se utilicen, o mejor alguno, al ser pocos si los mismos se incrustan en el tag HEAD se gana una petición request menos.

Otro punto a destacar es que obviamente las imágenes son siempre lentas y pesadas, por lo que también toca optimizarlas, siempre sin sacrificar la calidad ni la imagen que se quiere dar al aplicativo.

A continuación los resultados del test del sistema de facturación web http://invOOice.com para cargar la página de inicio o home, hay que indicar que el servidor de invOOice.com está ubicado en USA y los resultados son, por orden de mayor lentitud a mayor velocidad de descarga:

1. Visitante de Guadalajara (México) que visita invOOice.com: 10.27s
2. Visitante de Ciudad del Cabo (South Africa) que visita invOOice.com: 5.04s
3. Visitante de Nagano (Japón) que visita invOOice.com: 4.16s
4. Visitante de Río de Janeiro (Brasil) que visita invOOice.com: 3.57s
5. Visitante de Cairo (Egypt) que visita invOOice.com: 3.19s
6. Visitante de Sydney (Australia) que visita invOOice.com: 4.16s
7. Visitante de Madrid que visita invOOice.com : 2.84s
8. Visitante de Inglaterra que visita invOOice.com : 2.66s
9. Visitante de Zurich (Suiza) que visita invOOice.com : 2.64s
10. Visitante de Vancouver (Canada) que visita invOOice.com: 2.27s
11. Visitante de Florida (USA) que visita invOOice.com 2.25s
12. Visitante de Austin (USA) Chicago (USA) que visita invOOice.com 1.88s
13. Visitante de New York (USA) que visita invOOice.com 1.80s
14. Visitante de Dallas (USA) que visita invOOice.com: 1.78s
15. Visitante de San Francisco (USA) que visita invOOice.com 1.66s

Las diferencias son de bulto más de 1 segundo entre San Francisco y Madrid, eso en este caso es el doble, además parece que además de la cercanía física de la conexión en relación al servidor alojado en USA también influye la calidad de las conexiones de internet de cada país, de lo contrario no se explicaría que el más lento fuese México cuando en kilómetros la distancia es quizá la menor, es decir, la conexión más cercana con el servidor, a parte, obviamente de la de San Francisco.

Destaco también las diferencias dentro de la propia USA, del orden de 3 décimas de segundo de una costa a otra.

Esperamos poder sacarle una constatable mejora de velocidad a nuestros sistemas, así como la correspondiente mejora en posicionamiento, pues Google valora, y mucho, la velocidad, y todo ello gracias a esta aplicación web, ya no sólo desde el punto de vista de la optimización de los contenidos web si no más bien a través del uso de CDN o Content Deliverable Networks y a través de sistemas Clouds descentralizados, que te permiten crear nodos o clústers de tu aplicación web en diferentes localizaciones, países o continentes.

Si alguien de vosotros, lectores, conoce otros sistemas alternativos para medir la velocidad de descarga de una página web, que no lo dude, que nos deje un comentario, entre todos mejoramos.

Páginas relacionadas con este artículo:

1. Comprobar la velocidad de carga de una web
2. Comprobar velocidad servidor
3. Test de carga web

http://moundlabs.com/

Páginas relacionadas con este artículo:

1. Aplicación web PHP para backup de mysql
2. Aplicación online para crear Favicon
3. Aplicación para la gestión de contactos en la nube

La W3C le ha puesto logo a la implementación de HTML5, y no sólo se ha quedado hay, ha iconizado las diferentes tecnologías que van a integrar esta nueva normativa que va imperar sobre el HTML, la tecnología  supuestamente llamada a ser una auténtico Flash Killer.

Los iconos de las tecnologías aquí:

Dependiendo de lo que uses en tu web puedes mostrar unos u otros logotipo, por este orden según la imagen: El primer icono hace referencia al uso de una estructura semántica HTML5, el segundo de que se usan bases de datos en cliente, el tercero que es multidispositivo, esto es que se ha cuidado para que se pueda acceder con PCs, tablets, móviles, etc. El cuarto icono hac referencia a que se usa conectividad con datos en tiempo real, los http request de antes, saltamos de línea y el icono de multimedia, es decir que esto lleva vídeo bajo HTML5, el segundo de la segunda nos informa que se hace uso de las 3D, a darle caña al Canvas. El tercero de la segunda que parece una flor, no! no es una flor nuclearizada significa que se trabaja duro en optimizarlo para ofrecer un cran rendimiento, y último, el más bonito a mi forma de entender la estética nos informa que aquí se usa CSS3.

Hoy me siento icónico los de la W3 incluso han colocado un generador del gráfico personalizado, esto es, seleccionas las tecnologías que implementas pulsas un botón y te escupen un código html que tras ser insertado en tu web mostrará, preferiblemente a pie de página lo hachetemelerocinco que tu eres.

¿Qué son las 09:00 de un día de enero del año 2011 y todavía no tienes tu pegatina HTML5?

Corre!!!!  http://www.w3.org/html/logo/

Páginas relacionadas con este artículo:

1. Compatibilidad del HTML5 entre navegadores
2. Plantillas de páginas web con HTML5
3. El aporte que HTML5 representa a los desarrolladores web

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

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

Puedes descargar la hoja de estilos CSS en el siguiente enlace.

http://horaciobella.com/zardi/

Páginas relacionadas con este artículo:

1. Creador visual de CSS3
2. Menú de navegación desplegable en CSS3
3. Compatibilidad CSS3 con diferentes navegadores

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…