En el post de hoy vamos a hablar de una vieja herramienta que todo diseñador web (o curioso) debe conocer: Wappalyzer.

Wappalyzer es una extensión para Firefox y Chrome que nos muestra, en la barra de estado, las distintas tecnologías que utilizan las páginas web en las que estamos navegando.

Pero hoy no quería comentaros solamente que existe esta herramienta que, por cierto, ya lleva algunos años en funcionamiento.

Wappalyzer va más allá de ser una extensión de navegador. Si accedemos a la página oficial, http://wappalyzer.com, obtendremos información en tiempo real de las tecnologías web más usadas actualmente.

Para muchos está claro que WordPress, por ejemplo, es el Sistema de Gestión de Contenidos más utilizado, pero, ¿Sabíais también que Apache es el servidor web más utilizado a nivel mundial, por encima de Windows Server, o que Prestashop ha desbancado hace poco a Magento, en representación de la Tienda online más utilizada a nivel mundial?

Si de lo que se trata es de conocer el ranking de las mejores tecnologías en la web, o de cómo están hechas las páginas web por dentro, muy posiblemente esta sea tu extensión.

La situación actual necesita aplicar sistemas facilitadores como lo es el digital marketing intelligence.

¿Cuál es la situación?

• Vivimos en la sociedad de la información.
• Podemos acceder a una cantidad enorme de  información, de calidad y con mayor rapidez.
• Posibilidad de toma de decisiones gracias a la información.
• Un tercio de la audiencia televisiva interactúa en su hogar con dispositivos portátiles.

Empezaremos por BI, “business intelligence”: Business Intelligence  es un término ‘paraguas’ que  abarca los procesos, las herramientas, y las tecnologías para convertir datos en información, información en conocimiento y planes para conducir de forma eficaz las actividades de los negocios.

¿Para quién?

Responsables de compras, para ver qué artículos se están vendiendo más y cuáles son sus tendencias de venta.

Responsables de ventas, que deciden la colocación de los productos, para ver qué productos tienen mayor rotación para situarlos en las zonas preferenciales, o bien para poner aquellos de los que, aun teniendo rotaciones inferiores, tenemos excedente de existencias y queremos reducirlos.

Responsables de la negociación con las entidades financieras, que conocen cuáles son los flujos de efectivo, tarjetas de crédito o débito.

Responsables de marketing, para ver la efectividad de las promociones.

Responsables de personal, para asignar los turnos correctamente en función de la afluencia de clientes y el calendario.

Seguimos con ID, “Inteligencia digital”: la capacidad de entender y hacer uso del poder de la tecnología de la información en beneficio propio, se está convirtiendo en una habilidad crítica para la supervivencia y el éxito en la economía actual. 

¿Qué necesitamos para ponerlo en marcha?

¿Qué puede aportar al marketing digital?

-Desarrollo de parámetros automáticos en comercio electrónico.

-Impactar objetivamente en el DCU, diseño centrado en el usuario.

-Crear iconografía preatentiva.

…

En definitiva, en la mejora de la experiencia del usuario.

Si quieres saber más, visita: Digital Marketing Inteligence

Es posible que muchos de los que estáis metidos en el mundillo del diseño web hayáis hecho, quizá alguna vez, una página adaptada a teléfonos móviles.

Si habéis trabajado con WordPress, también es muy probable que hayáis recurrido a módulos como el WordPress Mobile Pack o alguno similar, que identifica el dispositivo con el que se accede a la página web y aplica una plantilla adaptada a teléfonos móviles, si se da el caso.

Pues vale, pero esto ya es cosa del pasado, diréis más de uno. Hoy día lo que se lleva es el “responsive web”.

Muy cierto.

El diseño web adaptativo (responsive web) nos permite, con una sola plantilla, tener una única maquetación que valga tanto para ordenadores personales como para teléfonos móviles, tablets y demás. A medida que cambia el tamaño de nuestra pantalla, la maquetación de la web “fluye” y se adapta a los nuevos anchos de pantalla, de manera que ya sea en la pantalla de un portátil o en la pantalla de un teléfono móvil, el contenido estará perfectamente alineado y ordenado.

¿Y cómo se hace esto?

Pues con mucho estilo CSS y algo de javascript, en muchos de los casos.

Los que usáis una versión moderna de Dreamweaver no tenéis problemas, pues contiene plantillas para webs adaptables. Los que no lo tengáis… no pasa nada, pues de manera on-line podemos encontrar muchos recursos que nos pueden ayudar, como es el caso de 960 Grid System (http://960.gs/), que nos proporciona una estupenda aplicación online que nos permite general el código “adaptable” para nuestra página.

¿Y si queremos hacer diseño adaptativo desde cero?

En ese caso, lo mejor es seguir algunas pequeñas reglas para empezar:

1- Uso de viewport en la etiqueta metatag: La mayoría de los navegadores actuales escalan las páginas web para que puedan verse completamente en la “pequeña” pantalla de nuestro teléfono móvil.

Esto debe anularse si estamos creando una página adaptativa. Para ello, en la cabecera de la página debemos especificar que queremos una escala 1-1 también en nuestro móvil.

La metaetiqueta a utilizar sería la siguiente:

meta name=”viewport” content=”width=device-width, initial-scale=1.0″

2- Media Queries

Con las media queries podemos agregar condiciones a nuestros estilos CSS, de manera que realicemos validaciones, por ejemplo, del tamaño de la ventana.

En http://www.genbetadev.com/desarrollo-web/introduccion-a-las-reglas-media-de-css3 tenemos un compendio de las reglas que se pueden utilizar.

3- Propiedades CSS para tamaños mínimos y máximos

CSS 3 nos brinda dos maravillosas etiquetas para poder realizar diseños adaptables: min-width y max-width, con las que “trabajar” los anchos mínimos y máximos de nuestra maquetación web.

Evidentemente, el alto nos importa poco o nada, ya que la maquetación que realicemos estará condicionada al ancho de pantalla de nuestro dispositivo, y no al alto, ya que nos dará igual el scroll vertical que vayamos a tener.

4- Uso de medidas relativas

Esto es un consejo irrefutable que nos llega desde el W3C Consortium, pero hemos de hacer incapié en ello: El uso de medidas relativas en tamaños de fuente, márgenes, paddings, es muy recomendable de manera general, y de manera concreta en la maquetación de sitios webs adaptables.

¿Y si esto no es suficiente y queremos saber más?

Bueno, la Red está llena de documentación al respecto. Desde vídeos de Youtube hasta tutoriales, manuales, etc, que nos llenarán de sabiduría responsive. Una página que se me hace interesante es http://www.copyblogger.com/mobile-responsive-design-101, aunque, si queremos profundizar desde la base, quizá lo más recomendable es acudir a la raíz del conocimiento en la web en España: W3C España (http://www.w3c.es/)