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. Google cierra DoubleClick Ad Planner Marketplace

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. Amazon SES para envío de emailings
2. Amazon SES para envío de emailings
3. Amazon SES para envío de emailings

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. Desarrollo multiplataforma para móviles
2. Aplicación web PHP para backup de mysql
3. Aplicación online para crear Favicon

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. Compilador JavaScript de Google
3. Motor para videojuegos bajo HTML5 y 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. Recursos en HTML5 y CSS3
3. Iconos botones y elementos para reproductores

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. Otro slider o accordion pero este gratis
3. El mejor slider que he visto

O como dicen los de lengua inglesa, ver el Wireframe, see the wireframe.

¿Qué es un wireframe?

Pues como ya decimos en el título un wireframe es un esquema de disposición de los diferentes elementos de una página web. Los módulos visuales sin textos en los que se distribuyen los contenidos.

La utilidad que le podemos dar es la del estudio y la inspiración, por ejemplo cuando una página web te gusta o te atrae por su usabilidad, ejecutas la herramienta y podrás ver su estructura, a partir de aquí inspira y expira código fuente hasta que la mejores.

En la captura de pantalla anterior te mostramos el wireframe de la página corporativa de nuestra aplicación de gestión online invOOice.com, una distribución la mar de sencilla y clara, en el header, selector de idiomas, logo, menú de navegación cuerpo de a tres columnas con imagen en cada una y un footer.

La aplicación para ver el wireframe

Esta aplicación es un Bookmarklet, es decir una aplicación web que se puede instalar como favorito, para instalarla:

Arrástra ESTO hasta tu barra de favoritos, si no te funciona dirígete a la página de autor y allí encontrarás más botones para instalarlo y una mayor documentación.

Os copiamos un vídeo de youtube sobre el funcionamiento de esta aplicación:

Enlace original: http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/

Páginas relacionadas con este artículo:

1. Menú de navegación desplegable en CSS3
2. Estructuras redimensionables para iPhone
3. Medir la velocidad de una web