Desarrollo Web Para Comercio Electrónico

TEMA 2 DISEÑO WEB.

 2. DISEÑO WEB.
2.1. LA WEB: DISEÑO EFECTIVO, DESARROLLO Y USO.
En la actualidad, el principal administrador de información que existe es Internet.
Casi para cualquier trabajo es imprescindible tener un buen dominio de este
medio, ya que en él podemos encontrar toda la información que podamos llegar
a necesitar, otorgándonos los medios para avanzar en cualquier plano. La
explosión de sitios web ha generado una guerra de atención, con miles de sitios
de temática similar que pugnan por captar el mayor número de lectores
potenciales. El diseño se encarga de ordenar la información de una web y de
presentarla de forma atractiva, de manera que se pueda acceder a ella con
facilidad y gusto.

Cuando nos referimos a diseñar una página web, estamos teniendo en cuenta
todos los pasos necesarios para su creación: desde los primeros esbozos de
contenido, al diseño visual y funcional y finalmente su subida a la web.

En el diseño web se deben tener en cuenta cuestiones de diseño tradicional,

como hemos estado viendo hasta ahora. No obstante, también hay que añadirle
cuestiones inherentes al medio, como la navegabilidad, usabilidad,
interactividad… Tenemos que mantener un buen equilibrio entre todas sus partes,
de manera que sea un canal de comunicación eficiente.

Las primeras páginas que se publicaron en la web se componían exclusivamente

de texto, siendo el traspaso de información el principal motivo por el que se
instauró la red. La implantación de estándares, los nuevos códigos para la
creación de páginas, la creciente permeabilidad de los navegadores y, sobre
todo, los avances tecnológicos, han permitido la creación de piezas creativas e
interactivas, impensables no hace muchos años. El crecimiento de sitios web
también ha sido exponencial, desde su implantación a principios de los noventa.
Como dato representativo de este crecimiento, hemos pasado de unos 18.000
sitios web en el año 1995, a los más de 200 millones que nos podemos encontrar
en la actualidad.

Un diseñador web debe ser consciente en todo momento de esta cantidad de

competencia, e intentar crear una pieza atractiva y comunicadora, que sea
definitoria de la empresa o particular anunciantes, y que su usabilidad esté por
encima de todo.

2.2. ORGANIZACIÓN DEL CONTENIDO: CMS.

Un CMS o Sistema de Gestión de Contenidos es un software informático que
permite crear una estructura de soporte para la creación y administración de
contenidos, principalmente en páginas web, por parte de los usuarios.

Consiste en una interfaz que controla una o varias bases de datos que alojan el
contenido del sitio y en las cuales podemos realizar modificaciones. El sistema
permite manejar de manera independiente el contenido y el diseño.
Así, es posible controlar y gestionar el contenido y darle un diseño en cualquier
momento distinto sin necesidad de dar formato al contenido de nuevo, además
de permitir la fácil y controlada publicación en el sitio a varios editores.

2.2.1. Estructura de un CMS

Un CMS está compuesto por diferentes funciones las cuales pueden ser separas
en las siguientes categorías

 Font-end. Es el sitio web al que tienen acceso los usuarios ya sean

usuarios registrados o visitantes.
 Back-end. Es la parte que se encarga de administrar, mantener y
configurar el sitio web, tiene una URL distinta a este.
 Configuración. Esta parte es la que contiene la configuración del sitio, en
esta parte se incluyen los motores de búsqueda, darse de alta como
usuario o el título de la página.
 Derechos de acceso. En los CMS hay una serie de usuarios que son los
que se encargan de administrar y desarrollar el sitio web, dentro de ser un
usuario o no, hay una serie de “rangos” dentro de los usuarios registrados
los cuales dan acceso a diferentes contenidos.
 Contenido. Es el contenido que se muestra al usuario, pueden ser
imágenes, vídeos, textos, música, archivos...
 Plantillas. Son css que establecen los colores, fuente de letra, tamaño,
imágenes de fondo, la distribución de los elementos por la página. Es
decir, establecen la apariencia del sitio.
 Extensiones. Son los complementos que se añaden al sistema para
ampliar sus funciones y cubrir las necesidades que aparezcan como
podría ser un gestor de correo.

A continuación, analizaremos las ventajas y los inconvenientes de utilizar

Sistemas de Gestión de Contenido.

Las ventajas que ofrece el uso de los CMS son:

  Detrás de cada CMS, hay una comunidad de desarrolladores y usuarios
por lo que podemos resolver cualquier tipo de problema que nos surja de
manera mucho más rápida y efectiva.
 Al utilizarlo, el coste de desarrollo será menor y requerirá menor tiempo y
trabajo.
 Al tener nosotros control sobre nuestra página web, resulta mucho más
sencillo, cómodo y rápido realizar actualizaciones y modificaciones de
nuestro contenido.
 Los CMS suelen estar optimizados, estructurándose en módulos y
extensiones lo que nos ayuda a tener una mejora del SEO.
 Periódicamente, se van realizando actualizaciones en las que se irán
creando nuevas funcionalidades que harán más atractiva nuestra página.

En cuanto a los inconvenientes que presenta el uso de los CMS, encontramos:

 Al usar CMS, tenemos que tener mucho cuidado ya que son más
propensos a sufrir ataques y afectar a la seguridad de nuestra web.
 Como los CMS tienen una estructura propia, tendremos una menor
flexibilidad y tendremos que regirnos a la estructura establecida.
 El código fuente que se genera con los CMS es un código más pesado que
estará menos optimizado que uno desarrollado a medida.

Entre las plataformas más comunes de CMS y que vamos a destacar en los
apartados siguientes, se encuentran:

 WordPress.
 Drupal.
 Joomla!

A. WordPress
Se trata de un sistema de gestión de contenidos o CMS (Content Management
System), dirigido a la creación de cualquier tipo de sitio, aunque en los últimos
tiempos ha alcanzado gran relevancia utilizando los blogs.

WordPress es una avanzada plataforma semántica de publicación personal

orientada a la estética, los estándares web y la usabilidad. WordPress es libre y
gratuito.

WordPress

WordPress es un sitio ideal para un sitio web que se actualice periódicamente,

puesto que si se escribe contenido con cierta frecuencia, cuando alguien accede
al sitio web, puede encontrar todos esos contenidos ordenados
cronológicamente. Sistema ideal también para los principiantes y para quienes
no tienen demasiados conocimientos técnicos.
Como causantes del crecimiento de WordPress se pueden destacar la licencia,
facilidad de uso y sus características como el gestor de contenidos. Además de
esto, otro punto a considerar es la gran comunidad de desarrolladores y
diseñadores, encargados de programarlo en su núcleo o creando complementos
(plugins) y plantillas (temas) para la comunidad.

Algunas de las cosas que se pueden crear con WordPress son las siguientes:

 Blog.
 Web corporativa.
 Tienda online.
 Foro de soporte.
 Web de gestión de reservas.
 Directorio de empresas.
 Canal de vídeos.
 Etcétera.

B. Drupal
Es un marco de gestión de contenidos (CMS) libre, con licencia GNU/GPL,
modular multipropósito y muy configurable, el cual permite publicar artículos,
imágenes, archivos y otras cosas u otros archivos y servicios añadidos como
foros, encuestas, votaciones, blogs y administración de usuarios y permisos. Se
utiliza para crear sitios web dinámicos y con gran variedad de funcionalidades.
Está escrito en PHP.

Cuenta con una amplia y activa comunidad de usuarios y desarrolladores que

colaboran en conjunto para su mejora y ampliación. Esta ampliación se posibilita
porque se trata de un sistema modular con una arquitectura muy consistente,
que permite que los módulos creados por cualquier desarrollador puedan
interactuar con el núcleo del sistema y con los módulos creados por otros
miembros de la comunidad.

Drupal

Con este gestor de contenidos se posibilita implementar una gran variedad de

sitios web, como son:
  Blog personal o profesional.
 Portal corporativo.
 Tienda virtual.
 Red social o comunidad virtual.
 Etcétera.

Está dirigido especialmente a las personas que quieran iniciarse en la creación

de portales web, tengan o no formación técnica. Resulta de gran utilidad también
para empresas o profesionales que desean crear su portal web profesional o
personal sin dependencias externas.

C. Joomla!
Se trata de un sistema de gestión de contenidos premiado (CMS) que va a
permitir construir sitios web dinámicos e interactivos, así como aplicaciones en
línea de gran alcance. Con esta plataforma se van a poder crear, modificar o
eliminar contenido de un sitio web, de manera sencilla, gracias al panel de
administración.

Un sistema de gestión de contenidos es un software que realiza un seguimiento

de cada pieza de contenido en un sitio web, al igual que su biblioteca pública
local mantiene un registro de los libros y los almacena. El contenido puede ser
texto simple, fotos, música, vídeos, documentos,… Una ventaja importante de
crear un CMS es que prácticamente no requiere habilidad técnica o conocimiento
de manejar. Desde la CMS se administra todo el contenido.

Joomla!

Joomla es un software caracterizado por presentar código abierto, programado

o desarrollado en PHP, liberado bajo licencia. Tiene gran facilidad de uso y
extensibilidad, por lo que es un software muy popular en todo el mundo.

Algunas de las herramientas que se pueden crear con Joomla!, y debido a las
tendencias actuales, en las que existe una gran apuesta por e-commerce en la
empresa, están:

 Generación de código HTML bien formado.

 Gestión de blogs.
 Vistas de impresión de artículos.
 Flash con noticias.
 Foros.
 Polls (encuestas).
 Calendarios.
 Búsquedas integrada al sitio y soporte multi-idioma.
 2.3. ESTRUCTURA.
La estructura del Sitio web

La estructura del sitio web resulta muy importante, puesto que, si la estructura
es adecuada, va a permitir al lector visualizar todos los contenidos de una
manera fácil y clara, mientras que un conjunto de páginas web que tenga una
mala estructura puede producir en el usuario sensación de pérdida, situación en
la que normalmente no encontrará lo que está buscando y como resultado,
abandonará la página.

Es imprescindible planificar la estructura antes de empezar a crear las páginas

web que componen el sitio web en cuestión. Para ello se puede realizar un
esquema de forma sencilla, a no ser que se vayan a crear multitud de páginas
web, por lo que se necesitará un esquema un tanto más elaborado. De una u otra
forma, habrá de ser lo más claro posible.

Es evidente que la estructura del sitio web va a depender fundamentalmente del

contenido del mismo. Si se pretende realizar una página con una estructura
formada por capítulos, la estructura seleccionada deberá ser lineal y jerárquica.
Sin embargo, si se expone un tutorial o un tour, sería más apropiado presentar
una estructura de tipo lineal.

La estructura en la que se organiza un sitio web depende fundamentalmente de

su tipo y alcance.

Estructura del sitio web

Si se trata de un sitio web pequeño, se recomienda mantener la estructura de

directorios simple. Si se trata de un sitio web con tres páginas, por ejemplo, habrá
una estructura compuesta de un directorio principal o raíz que contiene un sub-
directorio, en el que se encontrarán todos los documentos.

Cuando se tiene la estructura del directorio, se comienza a crear los documentos.

Es importante conocer cómo llegar a un recurso particular en la estructura para
incluir una imagen en un documento o establecer un vínculo. Para construir un
vínculo se pueden usar URLs completas o URLs relativas.
Comentado todo lo anterior, diferenciaremos entre dos tipos de estructura a la
hora de estructurar una página web:

 Física: consiste en la planificación del desarrollo de los ficheros de un sitio

web.
 Lógica: consiste en la representación formal de un sitio web.

Estructura física

En la estructura física garantizaremos la forma de almacenar los elementos de

un sitio web, teniendo presente los directorios y los archivos.

Cuando el número de archivos es bastante alto, resulta útil ubicarlos en carpetas

para facilitar su localización y su edición. Existen múltiples métodos para
organizar los directorios. De forma general se propone un modelo basado en la
organización por tipo de archivo.

Las páginas HTML se guardarán en el directorio principal mientras que los

elementos o archivos se situarán en subdirectorios.

Las principales carpetas que utiliza son:

 audios: archivos de audio mp3.

 css: hojas de estilo css.
 descargas: archivos zip, exe, etc que se ofrecen para descarga.
 images: imágenes jpg, gif o png.
 pdf: documentos pdf.
 scripts: archivos js con código javascript reutilizable.
 swfs: archivos con animaciones flash (*.swf).
 vídeos: ficheros en distintos formatos de vídeo: *.wmv, *.flv

Los nombres de los directorios y de los archivos tienes que llevar la intención de
evitar errores, respetando una serie de normas a la hora de la asignación del
nombre:
  El nombre debe estar formado por caracteres alfanuméricos: a-z y 0-9.
 No debe contener caracteres no alfanuméricos.
 No debe superar los 20 caracteres.
 Utilizar siempre letras minúsculas
 Reservar el nombre index.html para página que deseamos se muestre por
defecto.

Estructura lógica
La estructura lógica viene definida por la experiencia de navegación del usuario,
existen distintos tipos de estructuras lógicas:

En red

Esta estructura comienza a partir de la página principal pudiendo navegar a otra

u otras páginas sin ningún orden. No es aconsejable este tipo cuando el número
de páginas es elevado ya que desorienta al usuario al no saber dónde está.

Lineal

Este tipo de estructura es bastante similar a la página de un libro. Desde una

página concreta se accede a la página siguiente o anterior. Si queremos que el
usuario siga un itinerario fijo y guiado esta estructura será bastante útil.
Jerárquica o de árbol

Este tipo de estructura se basa en que existe una página principal desde la que
se accede a un conjunto de página, a través de un menú de navegación.
Básicamente se basa en una estructura en forma de árbol. Es la más común pero
no se aconseja utilizar más de cuatro niveles para evitar que el usuario se
desoriente durante la navegación.

Lineal con jerarquía o mixta

Es una estructura hibrida que trata de aprovechar tanto la estructura lineal como
la jerárquica. Las páginas se organizan de forma jerárquica pero también es
posible navegar de forma líneas por las páginas de un mismo nivel.

Algunas de las estructuras más populares

Existe tal variedad de sitios web que sería imposible hacer una categorización
que las incluyese a todas. Lo máximo que se puede hacer es centrarse en
aspectos específicos de estos sitios:
Páginas personales

La principal función de las páginas personales es la de dar a conocer a la persona

que las lleva. La calidad o cantidad del contenido, la complejidad, el alcance…
son factores que no van influenciados por el tipo de página. Existen páginas
personales mucho más complejas que algunas páginas de empresa o
comerciales, aunque en un principio tengan menos volumen de contenidos.

La funcionalidad de las páginas personales suele estar definida por el usuario,

ya sea para dar a conocer su entorno personal, para relatar sus experiencias, para
dar a conocer su trabajo o incluso para ofertarlo. El contenido, eso sí, siempre
hace referencia al dueño de la página.

La estructura de estas páginas suele estar dividida en una página principal donde
se muestra la información que más le interesa al usuario, dándose a conocer
publicando datos como el curriculum o una presentación formal, acompañando
a esta página principal se encuentran otra serie de páginas para mostrar trabajos
que haya realizado o recomendaciones.

Redes sociales

Las redes sociales son un fenómeno en auge en los últimos tiempos. El objetivo
principal de una red social es la de mantener un contacto entre personas, de
manera que se crean conexiones entre personas por amistad, gustos,
preferencia o por azar. Mediante una red social, uno puede realizar publicaciones
propias, que serán compartidas por un grupo selecto de personas, reducido o
no.

Si observamos la estructura de las redes sociales (Facebook , Instagram,

Twitter...) nos daremos cuenta de que siempre es igual: Una página donde poder
ver las publicaciones de el resto de usuarios que seguimos, un perfil personal
donde ver nuestros datos, publicaciones, amigos... y un buscador para agregar
gente nueva o ver publicaciones que sigan los criterios de búsqueda que
hayamos establecido.

Páginas informativas

Las páginas informativas ocupan un número bastante grande del total de sitios
web de la red. De hecho, la gran mayoría de usuarios de Internet visita la red para
acceder de un modo u otro a información. En este caso los contenidos son
siempre informativos y, en algunos casos, educativos. Páginas populares como
la Wikipedia se nutren de la información suministrada por los usuarios para
componer un gran listado de conocimientos globales al alcance de todos.
Existen también páginas que ofrecen muchos contenidos informativos previo
pago.
La estructura de las páginas informativas es la más simple. Está compuesta de
una página principal donde se reúne toda la información siguiendo unos indices
señalados en la parte superior y en algunas ocasiones se ayudan o
complementan de links, que a su vez conectan con otras páginas informativas
con la misma estructura.

Páginas de empresa

Las páginas de empresa también son páginas informativas, pero centran toda
su atención única y exclusivamente en todos los apartados posibles de la
empresa añadiendo a si nuevas pestañas a su estructura para indicar a que se
dedican, su ubicación, el personal, la forma de contacto y posibles ofertas de
trabajo. A excepción de enlaces ocasionales a sitios asociados, todo el sistema
de este tipo de páginas estará diseñado para que el usuario se sienta tentado a
navegar por todo el sitio.

El objetivo de estas páginas es el de que la empresa resulte atractiva y se capten

así clientes potenciales.

Páginas comerciales

Cualquier tipo de página cuyo fin sea puramente lucrativo es una página
comercial. Este tipo de páginas están orientados a ofrecer unos servicios o
productos y los medios para adquirirlos.

La estructura de este tipo de páginas suele ser similar a la de los folletos, aunque
con características específicas del medio, por supuesto. Páginas de compra y
venta como Amazon, o de subastas virtuales como eBay, gestionan un gran
número de transacciones diarias, con métodos de pago virtuales como PayPal
para darle confianza al usuario.
 2.4. Presentaciones multimedia.
El programa Adobe Flash tiene la opción de publicar aquello que hemos creado
de manera que funcione como una página web. Lo que se crea entonces es un
documento HTML, en el que se enmarca todo el archivo Flash creado (un archivo
.swf, .flv…), de manera que el navegador pase a reproducir ese contenido
directamente.

Flash es un programa orientado principalmente a la animación. La gran ventaja

que tiene es que sus contenidos pueden ser interactivos, aprovechando la
interacción del usuario para reproducir un contenido u otro. Si creamos un sitio
entero en Flash, estaremos creando una película interactiva que puede
reaccionar con el ratón, animarse, cambiar, adaptarse y una serie de opciones de
estilo muy vistosas que son complicadas de conseguir con HTML.

Por supuesto, crear una página en Flash tiene sus ventajas y sus desventajas, ya
que si no existiesen estas últimas todas las páginas actuales estarían hechas
con ese programa. Las principales ventajas de un sitio Flash son:
1. Compatibilidad
Aunque podría parecer que Flash es demasiado potente para algunos equipos,
es altamente compatible con la mayoría, respaldado por el 95% de los
navegadores web y reproducible en cualquier sistema operativo.

2. Animaciones
Se pueden crear animaciones con facilidad y con una alta calidad visual,
extensibles a toda la página.

3. Vídeo
El vídeo se puede reproducir bien dentro de Flash ya que no requiere de otro
plugin que dependa del sistema operativo, lo gestiona él mismo.

4. Juegos
La interactividad de Flash permite crear juegos que se pueden incrustar dentro
de nuestra web.

5. Imágenes vectoriales
Flash es capaz de gestionar imágenes vectoriales, obteniendo una calidad de
bordes mayor que las imágenes de mapas de bits gestionadas por HTML.

6. Fuentes especiales
Flash utiliza una técnica de reemplazo de imágenes que permite usar fuentes
especiales no aceptadas en los estándares HTML.

Por otro lado, también debemos tener en cuenta sus desventajas:

1. Peso
Una página en Flash tiene que cargarse por completo antes de empezar a
reproducirse. En conexiones lentas y animaciones mal optimizadas, esto puede
traducirse en varios minutos de espera.

2. Accesibilidad y usabilidad
Para algunas personas, una web con un alto contenido en imágenes y
animaciones puede no ser fácil de navegar. El hecho de tener que esperar a que
se carguen determinados contenidos también influye, agravado sobre todo por
la rápida velocidad de una navegación media. Por otro lado, una página web en
flash no demasiado optimizada puede llegar a perder las funciones del botón
Atrás de los navegadores (todo es un mismo vídeo, y con Atrás lo rebobinamos
al completo), dificultando la navegación aún más.

3. Posicionamiento
Los motores de búsqueda funcionan buscando en el contenido de una web, de
manera que si se trata de un contenido escrito (código), puede tener muchos
puntos de referencia para mostrar nuestra página en el resultado de una
búsqueda. Una página flash carece de ese tipo de contenidos y, aunque se puede
configurar para que dé resultados en las búsquedas, los motores de búsqueda
tradicionales prefieren las páginas con HTML.
4. Plugin
Para visualizar Flash de forma correcta se necesita un plugin específico de Flash.
La mayoría de los usuarios dispone de este plugin, pero obliga a otros a
descargárselo. Sus actualizaciones y reformas también obligan a posteriores
descargas, lo cual puede ser contradictorio para el funcionamiento de nuestra
página.

En general, el uso o no de Flash depende completamente de las características

de la web. Una web sobre nuevas tecnologías dirigida a un público joven podrá
beneficiarse de altos contenidos en flash y de una interactividad muy alta. Para
páginas que pretendan llegar al mayor número de usuarios posible, es mejor usar
flash en sitios puntuales, de manera que el contenido principal de la página
siempre se muestra de forma correcta.

El uso de flash para el diseño web está tremendamente extendido, pero, al igual
que cualquier recurso, es mucho más efectivo cuando se utiliza para remarcar
ciertos contenidos, sin abusar de él.

2.5. OBJETIVOS MEDIBLES.

Medir y analizar son los pilares clave en el entorno online. Ésta es una de las
principales ventajas que nos ofrece este medio. Internet nos ofrece una cantidad
enorme de datos (big data) que si sabemos analizar de forma inteligente
lograremos optimizar todas nuestras estrategias digitales. Los datos son meros
datos que no nos sirven de nada sino hay detrás una persona encargada de
interpretar toda esa información y, en base a ese análisis, tomar decisiones
estratégicas que mejoren la situación de la empresa.

Por ello, es importante a la hora de realizar analítica web, detectar cuáles son
las métricas o kPI´s claves que debemos monitorizar y medir para detectar si
nuestra estrategia está funcionando o si debemos optimizarla, en caso de que
los resultados no estén siendo los esperados. Por ello, para determinar cuáles
son las métricas a tener en cuenta en nuestro proceso de analítica debemos de
partir de unos objetivos claros. En función de esos objetivos, realizaremos
diferentes análisis utilizando herramientas que nos permitan su realización y,
tras el análisis, tomaremos decisiones.

Uno de los objetivos de nuestro éxito en Internet es estar bien posicionados.

Gracias al SEO lograremos mejorar nuestro posicionamiento en buscadores y
aumentar nuestra visibilidad ante los usuarios que se encuentren buscando
productos o servicios relacionados con los que ofrece nuestra empresa. Que
nuestro posicionamiento SEO sea óptimo depende, en gran medida, de la
analítica web.

Lanzarnos a realizar acciones en el entorno online, sin ningún tipo de estrategia,

y si analizar si estamos logrando nuestros objetivos o no es un gran error. Es
fundamental medir todas aquellas acciones que realizamos o de lo contrario
podríamos estar perdiendo oportunidades de oro.
Por ejemplo, imagina una empresa que invierte grandes cantidades de dinero en
campañas de Google Adwords pero, tras analizar las visitas entrantes a su web,
descubre que el 80% del tráfico proviene de redes sociales. ¿No sería más
inteligente adaptar la estrategia e invertir en aquellos canales que le son más
eficaces? Lo lógico sería derivar parte de la inversión en Adwords en campañas
en redes sociales, y así optimizar y mejorar sus resultados.

Por ello, la analítica web es fundamental para las empresas que deseen tener
éxito en Internet. Gracias a todos los datos que proporciona esta disciplina, las
empresas lograrán conocer mejor el comportamiento de sus usuarios y entender
sus necesidades. Y esto, ¿en qué se traduce? Básicamente en el planteamiento
de estrategias más eficientes y en una mejora del ROI (Retorno de la Inversión).

Algunas de las acciones que podremos llevar a cabo gracias a la analítica web
son:

 Identificar a nuestro público objetivo.

 Detectar patrones de comportamiento y ofrecer a cada uno de nuestros
usuarios lo que necesitan.
 Optimizar nuestras estrategias de marketing.
 Optimizar nuestro sitio web y orientarlo a aumentar el número de
conversiones.
 Optimar aspectos de nuestra web ofrecer una mejor experiencia de
usuario.
 Detectar qué canales son más rentables para nosotros en relación a su
eficacia.

Google Analytics
Existen muchas preguntas sobre el comportamiento de los usuarios en un sitio
web a las que los responsables del marketing debemos dar respuesta:

 ¿Cómo llegan los usuarios a nuestro sitio web?

 ¿A través de qué dispositivo acceden a la web?
 ¿Cuántos usuarios hay conectados en este momento?
 Etc.

Son muchas preguntas a la que la analítica web puede dar respuesta y, en

concreto, Google Analytics.

Google Analytics
Google Analytics es el servicio gratuito de analítica web que nos ofrece Google,
a través del cual, podemos obtener un gran número de estadísticas y descargar
informes personalizados para analizar la información y ayudarnos en la toma de
decisiones. Estos datos serán importantes, no solo para las acciones de
marketing, sino también para el SEO. Google Analytics es la herramienta de
analítica más popular en la red, y es utilizada por millones de sitios en todo el
mundo con el objetivo de optimizar sus sitios web y lograr sus objetivos.

La plataforma surgió en 2006 y, desde entonces, ha evolucionado en los análisis

que ofrece y en las métricas que podemos analizar. Pero no hay que
obsesionarse con la cantidad de métricas que tenemos disponibles, sino que la
importancia radicará en la interpretación de esos datos por parte del analista. La
analítica no será más que meros datos sino se da una correcta interpretación
con el objetivo de tomar decisiones inteligentes.

¿Cómo hace Google Analytics para recopilar todos esos datos? Para obtener
toda la información que nos presenta, Google Analytics combina las cookies,
navegadores y código JavaScript en cada una de las páginas de nuestro sitio
web. Al registrarnos en Google Analytics nos generará un código que deberemos
insertar en la cabecera del código fuente de nuestra web. Cuando nuestra página
web ha sido creada a través de un CMS, como Wordpress, bastará con insertar
el código de Analytics en la primera página y automática se repetirá el proceso
en el resto de páginas.

Cuando comienzan a entrar usuarios en nuestro sitio web y sus páginas

contienen el código de Google Analytics, éste hará seguimiento y generará una
cookie que registrará el comportamiento del usuario en la web hasta que termina
su visita. Todos estos datos se van cargando en el servidor de Google y,
posteriormente, se generarán en el panel de Google Analytics, inclusive en
tiempo real.

¿Cuáles son las principales ventajas que nos ofrece Google Analytics?

Velocidad de carga: El código de Google Analytics que instalamos en nuestro

sitio web es ligero, por lo que se carga de forma asincrónica, y no afecta al tiempo
de carga de nuestro sitio. Esto favorece que no se perjudique a la experiencia de
usuario.
Gran número de informes personalizables: Google Analytics nos ofrece una gran
variedad de informes, algunos predeterminados y otro personalizables para
analizar aquello que nos interesa y podemos. Existe la posibilidad además de
recibir dichos emails cada cierto tiempo.

Nos permite evaluar campañas realizadas en redes sociales: Google Analytics

nos permite, entre otras cosas, analizar el tráfico procedente de redes sociales.
Esta información, puede ser muy valiosa ya que os ayuda a entender qué canales
sociales pueden resultar más rentables a la hora de realizar acciones de
marketing en ellos.

Trabajo en equipo: Google Analytics ofrece la posibilidad de poder acceder a los

datos y gestionar su contenido a diferentes usuarios dentro de la misma cuenta.
Esto es genial cuando trabajamos en equipo. Además, existen diferentes
permisos como editar, colaborar y leer y analizar.

Google Analytics es compatible con servicios de terceros: Existen muchas

aplicaciones para complementar la información que nos ofrece. Estas
aplicaciones podemos encontrarlas en su App Gallery.

¿Qué es Google Analytics?

Google Analytics es una herramienta que nos permite conocer cómo los
usuarios encuentran nuestro sitio web, cómo navegan y de qué manera
podemos mejorar su experiencia en la web. Además, nos da la posibilidad de
mejorar el rendimiento de nuestra inversión, aumentar el número de las
conversiones que se producen y llegar a obtener más ingresos.

Esta herramienta nos permite utilizar más de 80 informes diferentes, los cuales
nos servirán para conocer de primera mano todo lo necesario para realizar un
análisis contundente y exhaustivo de nuestro portal web, con el fin de optimizarlo
lo máximo posible de cara a que nuestros visitantes tengan una buena
experiencia en él, y terminen, en términos generales, siendo fieles al mismo.

Abriendo una cuenta en Google Analytics, podemos realizar el seguimiento de

los usuarios en nuestro sitio web, así como del rendimiento de las campañas de
marketing (tanto de las campañas de AdWords, como de las campañas por
correo electrónico o de cualquier otro programa publicitario).

En base a la información adquirida, podremos conocer qué palabras clave

funcionan de forma eficiente, qué texto es el más eficaz y el momento o punto
exacto en el que abandonan los usuarios nuestro sitio web.

A pesar de que no es un programa de pago en su mayoría, los servicios que

Google Analytics pone a nuestra disposición son muy completos, ya que ofrece
un paquete de análisis web íntegro y potente.

Aquellos anunciantes que tengan cuenta en AdWords pueden obtener dichas

ventajas desde esta, puesto que Google Analytics está completamente integrado
en dicho programa. Todos los informes generados así como los ajustes estarán
disponibles en la pestaña Google Analytics.

Para empezar a usar este programa nos dirigiremos a la página cuya dirección
se proporciona a continuación: página: www.google.com/analytics/es-ES .

También podemos pinchar en la pestaña de nuestra cuenta de AdWords referida

a Google Analytics. A continuación, nos encontraremos en un sencillo proceso
de registro en el cuál deberemos añadir un fragmento de código. Una vez
realizado dicho registro, Google Analytics empezará a recopilar información
inmediatamente.

¿Cómo funciona?
Para compilar la información acerca de los individuos que visitan nuestra web,
Analytics utiliza tanto cookies de origen como los códigos de JavaScript. De esta
forma hace posible el seguimiento de los datos de nuestra campaña publicitaria.
Esta herramienta realiza un seguimiento anónimo de la campaña con el objetivo
de conocer cómo los usuarios de nuestra web interactúan en la misma.

A través de este seguimiento, podremos conocer de dónde proceden los

usuarios, qué acciones concretas han realizado y si el objetivo de la conversión
se ha realizado con éxito.

Por otro lado, también es capaz de realizar el seguimiento de los datos de

comercio electrónico (e-commerce) y además los combina con información
sobre la campaña realizada y las conversiones, con el fin de conseguir una
información más detallada sobre el rendimiento de dichas campañas.

Cabe destacar que Analytics no influirá en el rendimiento ni apariencia de

nuestro sitio web, como tampoco albergará archivos adicionales en ella ni
activará archivos GIF.

Los informes aportados por Analytics se caracterizan por ser muy completos,
exhaustivos, visuales y de fácil comprensión. Con la información aportada,
podremos dirigir el tráfico deseado a nuestro sitio web convirtiéndolo así en un
sitio mucho más eficaz.

Conceptos básicos de Google Analytics.

Vamos a definir algunos conceptos básicos para poder entender correctamente
la utilización de esta herramienta.

1. Cuenta o Account: conocida también con el nombre de “unidad de

negocio”. Es importante que no confundamos este término con el de
Usuario, ya que dentro de una única cuenta puede haber varios usuarios
que la administren, los cuales además pueden contar con distintos
permisos para realizar cambios o ver información en la misma. Además,
 una cuenta no tiene por qué ser exclusiva para un sitio web, es decir, se
pueden administrar varios sitios web distintos desde una misma cuenta.
2. Propiedad: no es más que la plataforma sobre la que se van a realizar las
pertinentes mediciones, es decir, se trata del sitio web que vamos a medir.
Por lo tanto, una única cuenta, tal y como hemos dicho anteriormente,
puede tener varias propiedades para medir.
3. Vista: se trata de un grupo de informes en el cual aparece el seguimiento
completo de una única propiedad, aunque también podremos hacer que
correspondan a una parte de esa propiedad.
4. Usuarios: son las personas que a través de su login y password obtienen
permisos concretos. Los permisos son asignados a diferentes niveles ya
sea a nivel de cuenta, de propiedad o de vista. Además, dichos permisos
son conformados en torno a distintos campos, como por ejemplo
permisos de gestión de usuarios, permisos de edición, permisos de
colaboración o permisos de lectura/análisis.
5. Dimensión: es un concepto que describe a una entidad y que además se
puede medir, por ejemplo, el peso de una persona.
6. Valor: es la cuantificación numérica de una dimensión, por ejemplo, 72kg.
7. Métrica: es una operación con los valores de una dimensión que nos
interesa conocer. Por ejemplo, el peso medio de un grupo de personas.

Monitorización

Funciones de Google Analytics

Google Analytics no se encarga únicamente de medir datos sobre ventas o
conversiones, sino que además a través de dicha herramienta, podremos obtener
información que nos permite saber cómo nuestros visitantes utilizan nuestra
web, cómo llegan a ella y qué podemos hacer para que sigan visitándola. Las
herramientas que podremos utilizar con Google Analytics son:

- Herramientas de análisis: Google Analytics está basado en una herramienta

que elabora extensos informes y a la vez accesibles y de fácil comprensión. Su
fin es poder decidir qué datos necesitamos observar para personalizar así los
informes y que le resulte más sencilla su interpretación.

- Analítica de contenido: se trata de una serie de informes que nos aportan

información sobre qué partes concretas de nuestro sitio web están consiguiendo
mayor y mejor rendimiento. Además, aporta datos sobre qué páginas resultan
más populares con el fin de conocer mejor lo que buscan nuestros usuarios y
ofrecerles así una mejor experiencia en nuestra web, blog, o cualquiera que sea
nuestro sitio web.

- Analítica de redes sociales: en este caso se nos ofrece una medición de los
distintos programas publicitarios llevados a cabo en redes sociales. A través de
esta plataforma seremos capaces de poder analizar cuidadosamente la
interacción de los usuarios que visitan la web con las funciones de compartir, y
la forma en la cual se implican con el contenido de dichas plataformas sociales.

- Analítica de móviles: podremos conocer de forma medianamente sencilla el

impacto de nuestra marca o nuestro sitio web en los dispositivos móviles. Si
además tuviésemos una aplicación para dispositivos Smartphone, se nos
ofrecerá un “kit” de desarrollo de software tanto para iOS como para Android, con
el objetivo de aportarnos la información pertinente para poder realizar una
evaluación de cómo los usuarios utilizan nuestra aplicación.

- Analítica de conversiones: Las conversiones se utilizarán para ver a cuántos

clientes atraemos, qué cantidad vendemos y el nivel de implicación que dichos
usuarios tienen con dicha web.

- Analítica de publicidad: A través de esta herramienta podremos aprovechar de

forma eficiente la publicidad que estemos realizando, gracias a toda la
información que recibimos sobre el rendimiento de los anuncios en las redes
sociales, en smartphones, redes de búsqueda e incluso plataformas display.
Además, podemos relacionar las campañas de marketing con nuestra actividad
en el sitio web, con el fin de obtener así una visión más completa y a su vez poder
mejorar el rendimiento de dicha publicidad.

Creación de una cuenta Google Analytics.

Para registrarnos en Google Analytics, debemos visitar la dirección:
www.google.com/analytics. En ella, podremos crear una cuenta de forma fácil y
gratuita. En caso de disponer de una cuenta de Google, tan solo debemos entrar
con nuestro perfil en Google Analytics.

Las cuentas de Google no solo nos aportan las distintas ventajas de tener un
acceso único a las distintas aplicaciones de Google, sino que además se nos
garantiza la máxima seguridad sobre nuestra cuenta lo cual resulta realmente
interesante ya que nuestra cuenta contendrá información relevante sobre
nuestro sitio web.

En el caso de ser anunciantes de AdWords, podremos registrarnos o acceder en

Google Analytics desde la cuenta ya existente de AdWords. La herramienta de
Google Analytics ha sido integrada en AdWords, por lo que podremos acceder a
través de la nueva pestaña Google Analytics en AdWords. Para acceder a dicho
servicio, debemos hacer clic en ella y seguir con las instrucciones indicadas. Este
servicio nos permitirá supervisar todos los datos relativos a la campaña de
AdWords y al retorno de nuestra inversión.

2.6. ROLES. WORKFLOWS (FLUJOS DE TRABAJO)

Podríamos dar una definición técnica de lo que es Workflow:

«Una aplicación de Workflow automatiza la secuencia de acciones, actividades

o tareas utilizadas para la ejecución del proceso, incluyendo el seguimiento del
estado de cada una de sus etapas y la aportación de las herramientas necesarias
para gestionarlo».

La verdad es que, como casi todas las definiciones técnicas, necesita leerse un
par de veces para entender cuál es su verdadero significado. Piense, no obstante,
en lo siguiente: imagínese que le piden realizar una web para gestionar los
documentos internos de una empresa. Sin duda alguna usted ya se ha hecho una
idea del ciclo de vida que puede tener su web.

El primer paso será la realización del mismo por parte de su autor,

posteriormente este documento debería de pasar un examen ortográfico con el
fin de validar que está correctamente escrito y devolvérselo al creador en el caso
de que se encuentren faltas de ortografía en el mismo. Una vez que ha pasado
por la primera revisión, el documento debería someterse a otra revisión que
probara que está de acuerdo a la guía de estilo de la empresa. Cuando usted
describe el flujo del proceso anterior realmente está describiendo un Workflow.

Actualmente existen muchos más ejemplos de procesos que se pueden modelar

como un Workflow, realmente cualquier proceso podríamos modelarlo como un
Workflow, piense en una web para la gestión de relaciones con los clientes o los
sistemas de planificación de recursos empresariales, dónde los pasos que se
dan cuando un cliente se introduce dentro de un sistema pueden ser complejos.

La idea de Workflow no es un concepto innovador en el mundo del desarrollo,

actualmente muchas aplicaciones empresariales incorporan algún mecanismo,
mejor o peor, para realizar y modelar flujos de trabajo en sus webs, de hecho, en
algunos productos de Microsoft ya se disponía de motores de Workflows como
por ejemplo en BizTalk Server o Microsoft CRM 3.0.

A continuación, se muestra un esbozo de un workflow para el proceso anterior.

 Workflow del proceso

Con la llegada de Microsoft Windows Workflow Foundation se establece por

parte de Microsoft un denominador común a la hora de hablar de Workflows ya
que a partir de este momento todas las aplicaciones del gigante del software que
necesiten incorporar Workflows se basarán en esta tecnología, como ejemplo
tenemos la siguiente generación de BizTalk, CRM o Speech Server por citar
algunos ejemplos.

Gestión de workflows
Los documentos creados se depositan en una base de datos central donde
también se guardan el resto de datos de la web, cómo son los datos relativos a
los documentos (versiones hechas, autor, fecha de publicación y caducidad,
etc.), datos y preferencias de los usuarios, la estructura de la web, etc.

La estructura de la web se puede configurar con una herramienta que,

habitualmente, presenta una visión jerárquica del sitio y permite modificaciones.
Mediante esta estructura se puede asignar un grupo a cada área, con
responsables, editores, autores y usuarios con diferentes permisos. Eso es
imprescindible para facilitar el ciclo de trabajo (workflow) con un circuito de
edición que va desde el autor hasta el responsable final de la publicación.

2.7. LA WEB CORPORATIVA.

Una página web corporativa es el sitio web que representa a una empresa o una
entidad, esta publica la información de la empresa como por ejemplo a que se
dedican, donde está ubicada, el personal… y también se encarga de la
administración.
Es importante que una web corporativa sea un lugar agradable y que de una
buena imagen de nuestros productos y servicios. Debemos tener en cuenta que
a través de esta web estamos presentándonos a un público que tiene acceso 24
horas a nuestra información.

Imagen de la web corporativa

Elementos de una web corporativa

En el año 2019 se establecen una serie de elementos que son esenciales en la
composición de una web corporativa

 Diseño responsive
Esto quiere decir que la página se adapta al tamaño de las pantallas móviles,
tablet y monitores.

 Una página de inicio

Una página que de la bienvenida al usuario y le haga saber dónde se encuentra.

 Página se servicios
Donde se explica al cliente los servicios o productos que se ofrecen.

 Página ¿Quiénes somos?

Se exponen trabajos y la experiencia del equipo de trabajo.

 Página de contacto
En esta página tendremos nuestra dirección, teléfonos, email, redes sociales...

 Blog
Podemos publicar cambios, responder preguntas de los clientes ...

 Seguimiento de conversiones
Es una de las partes más importantes de nuestra web corporativa, en esta parte
lo que hacemos es un estudio del público que es un cliente potencial.

 Alta velocidad de carga

Para que la velocidad de carga sea optima tiene que ser menor de 2 segundos.

 Navegación clara
Es importante que nuestra web tenga un panel de navegación que permita al
usuario ubicarse y navegar entre las pestañas de nuestra web.

 Chat de atención al cliente

un chat que sustituya la opción de enviar un correo o una llamada en caso de
duda.

 Formulario de Contacto
Es muy recomendable que los datos a rellenar para contactar sean pocos:
Correo, nombre y mensaje.

 Teléfono clicable
Un icono de teléfono es que nos den el teléfono de contacto

 Botones sociales para compartir

Es muy importante comunicar nuestra web con las redes sociales para hacer
nuestra web más viral.

Fases de creación de la web corporativa

Primera fase

Se realiza un análisis estratégico. Se analiza la empresa, el mercado, los

productos, la situación actual, los medios especializados y la blogosfera. El
objetivo es averiguar si resulta conveniente o no lanzar una web corporativa y
qué oportunidades se abren en ese terreno.

Si se identifica una oportunidad de obtener beneficios comunicativos con la web,

pasamos a la segunda fase. Si no, el proceso termina aquí con un informe de las
oportunidades o amenazas detectadas para la comunicación online de la
empresa (y por supuesto, no se factura más que la parte correspondiente).

Segunda fase

Identificación del equipo web. La situación ideal es que se identifiquen varias

personas dentro de la organización con potencial para participar como autores
de la web.

Aunque no es el planteamiento inicial, dependiendo del valor estratégico de la

web corporativa, puede que en esta fase se sugiera asignar/contratar a una
persona para dedicación exclusiva a la comunicación online.
Tercera fase

Formación del equipo web. Los trabajadores seleccionados recibirán una

formación específica sobre comunicación en webs: leyes escritas y no escritas,
redacción de webs, herramientas de la web, estrategias de comunicación online,
etc.

En este punto también se consensuarán y establecerán las responsabilidades:

frecuencia de publicación, temática de los artículos y línea editorial.

Cuarta fase

Diseño y puesta en marcha de la web. Utilizaremos herramientas de software

libre estándar (WordPress) y un diseño funcional que se adapte a la imagen
corporativa de la empresa.

Diseño y puesta en marcha de la web. Utilizaremos herramientas de software

libre estándar (WordPress) y un diseño funcional que se adapte a la imagen
corporativa de la empresa.

Última fase

Fase de promoción y seguimiento inicial. Las webs recién nacidas, al igual que
los seres humanos, necesitan cierto seguimiento. Su recién formado equipo web
necesitará cierta tutorización en los primeros meses y una persona al otro lado
de la línea que pueda resolver sus dudas.

Además, se realizará una fase de mantenimiento de la web con el fin de estar

actualizando los contenidos y añadir posibles mejoras a la web a medidas que
van apareciendo nuevas necesidades por parte del usuario que visita la web.

2.8. ESTÁNDARES.
Los estándares web son aquellas técnicas que describen los aspectos de la www
(red web mundial). El objetivo es crear una web que sea más cómoda para todos,
con sitios accesibles a más personas y que sea funcional desde cualquier
dispositivo con acceso a internet.

Los beneficios de usar los estándares son conseguir sitios webs con mayor
consistencia visual, una de las grandes mejoras que se han hecho ha sido gracias
al uso de XHTML y CSS, de esta forma podemos realizar rápidamente un sitio
web y conseguir efectos que antes requerían el uso de otros lenguajes como
JavaScript, de esta forma podemos deducir que una de esos beneficios es que
los contenidos al usar menos ancho de banda se muestren más rápidos al
usuario.

Unos de los principales estándares y más de moda actualmente son los

certificados SSL y el estándar HTTPS, estos certificados se caracterizan por
permitir la identificación dentro de la Red o Internet, de forma segura y fiable, a
determinados servidores web los cuales tienen la necesidad de realizar
conexiones seguras a través del protocolo ssl (Secure Socket Layer). Estos son
fácilmente reconocibles debido a que utilizan direcciones del tipo https://, no
como las habituales que pertenecen a http://.

Los certificados SSL proporcionan una seguridad al visitante de una página web
para que no tenga que preocuparse por correr algún tipo de riesgo. Este sistema
es basado en el continuo procesamiento de la información de forma que nadie
ni nada pueda acceder a ella antes de llegar a su destino.

Seguridad Web

Pero si hablamos de estándares no podemos acabar sin hablar de W3C

W3C es una comunidad internacional donde trabajan organizaciones Miembro,

personal a tiempo completo y el público de forma conjunta para desarrollar los
estándares web. Este consorcio está dirigido por el director ejecutivo Jeffrey
Jaffe

W3C tiene su propia web que podemos visitar para ver sus últimas noticias,
normalmente suelen publicar unas 2 noticias por año. También dentro de su
página web podemos encontrar estándares de diseño y aplicaciones, web
semántica, web de los dispositivos o incluso estándares para navegadores y
herramientas.
 2.9. USABILIDAD.
Concepto de usabilidad
Una gran frase de Steve Krug que define la usabilidad Web es:

“No me hagas Pensar”

La usabilidad, en un amplio sentido de la palabra, está referida a la facilidad y

manejabilidad con las que los seres humanos pueden interactuar con cualquier
objeto u herramienta. En este caso, está referida a sitios web, para que se haga
un diseño y una programación de sitios Web que haga los sitios web intuitivos y
fáciles de usar por el usuario.

Esta es una definición para usabilidad pero existen multitud de ellas, la

Organización Internacional para la Estandarización (ISO) ofrece una definición
general de usabilidad: "grado de eficacia, eficiencia y satisfacción con la que
usuarios específicos pueden lograr objetivos específicos, en un contexto de uso
específico."

La arquitectura de la información (AI) es una filosofía por medio de la cual es

estudiado cómo se organiza la información de tal forma que los usuarios pueden
localizarla y trabajar con ella. La organización se basa en estructurar, clasificar y
rotular la información de la Web.

¿Qué es la analítica Web?

La analítica Web básicamente consiste en analizar, como su propio nombre
indica, los datos más relevantes de los visitantes de un sitio web para poder
obtener conclusiones que mejoren el uso del sitio. Antes todo se hacía a través
de los datos que se almacenaban en los logs de los servidores, pero actualmente
eso no es suficiente para poder obtener toda la información que se requiere, así
que se suele añadir al final de las páginas un poco de código JavaScript para
recoger los datos que más nos interesen y poder procesarlos posteriormente. La
principal ventaja de esto es que podemos extraer información precisa, que nos
ayude a medir y entender cómo se mueven los usuarios por nuestro sitio, también
podremos clasificar o segmentar el tipo de usuarios que acceden a nuestro sitio
web, pudiendo dirigirnos con más precisión a cada uno de ellos.

Las herramientas profesionales más populares para llevar a cabo la tarea de la

analítica web son:
  Google Analytics
 Omniture SiteCatalyst
 XiTi

¿Qué mide la analítica Web?

La analítica web puede abarcar un gran número de variables y datos que pueden
ser tenidos en cuenta y que sean personalizables para cada sitio web, porque no
a todos los sitios web les interesa conocer los mismos datos sobre los visitantes
o usuarios del sitio. Sin embargo, hay una serie de medidas que son utilizadas de
forma general por cualquier herramienta de analítica, como, por ejemplo:

 Número de páginas vistas.

 Número de usuarios que han accedido.
 Número de visitas que ha tenido una página.
 Tiempo de navegación de los usuarios.

Otros datos que suelen usarse en la analítica Web son:

 Datos de clicks: mediante su análisis se puede construir un mapa de calor

sobre una página, pudiendo observar a simple vista los elementos que han
tenido más clicks y averiguar las rutas que han seguido los usuarios.
 Euros: podremos conocer el importe de los clics en anuncios o la muestra
de banners. En un sitio de comercio electrónico conoceríamos el valor de
las ventas.
 Orígenes del tráfico: para poder saber desde qué sitios Web vienen
nuestros visitantes o qué términos clave han utilizado en los buscadores
para llegar hasta él.
 Páginas de entrada: puede que nos interese conocer desde qué página o
sección, en el caso de que haya varias, de nuestro sitio acceden los
usuarios.
 Páginas de salida: de la misma manera, pero para conocer desde qué
página o sección abandonan nuestro sitio.
 Abandono de formularios: se podrá analizar de esta manera cuantas
veces un formulario que se empieza a rellenar es abandonado, además de
los campos que quedaron rellenos o los que quedaron en blanco.
 Eventos del sitio Web: un variado número de eventos y acciones que
también podrían analizarse, como, por ejemplo, el número de usuarios que
realizan búsquedas en nuestro sitio, o que se dan de alta en un servicio
para recibir noticias o avisos, etc.
Analítica Web y Usabilidad
Existen muchas técnicas y procedimientos que nos permiten aprovechar los
datos recolectados por una herramienta de analítica Web a fin de mejorar la
usabilidad de un sitio Web. Nos centraremos en los siguientes puntos:

 ClickMap
 A/B Testing
 Análisis de formularios
 Rutas de navegación

ClickMap

Con ClickMap o “mapa de clicks” podremos ver dónde hacen clic los usuarios,
así a simple vista podemos ver cómo se mueven los usuarios por nuestro sitio,
es decir, en que partes hacen clic cuando se encuentra en una pantalla concreta.
De esta manera podremos analizar esta información y utilizarla para poder
mejorar nuestro sitio:

 Mejorando la visibilidad y el posicionamiento de los enlaces y botones que

necesitemos
 Evitando que haya elementos dentro de la página que confundan al
usuario, como aquellas posibles zonas en los que se registren muchos
clicks sin ser elementos "clicables".
 Mejorando la visibilidad de los elementos de la página que sean más
"rentables".

A/B Testing

Se trata de una herramienta útil cuando se duda entre varios posibles diseños
alternativos para una página web. En este caso, si pusiésemos varias versiones
en el servidor, podríamos utilizar una aplicación para analizar las versiones
(como Omniture SiteCatalyst o Google Optimizer) y poder comparar así los
resultados para las dos versiones.

Análisis de formularios

Mediante el análisis de formularios, como se comentaba anteriormente,

podremos medir, por ejemplo, el número de veces que se abandona un
formulario, en qué campo se abandona, etc. Esto nos dará información sobre si
el formulario era demasiado extenso, si los datos eran de carácter demasiado
personal, etc.

Rutas de navegación

Los informes sobre las rutas de navegación que han seguido los usuarios
(informes que nos proporcionan herramientas como Omniture SiteCatalyst o
Visual Sciences), son los elementos más potentes de las que disponemos para
poder llevar a cabo la analítica web. Haciendo uso de ellos podremos conocer
las páginas por las que navegan los usuarios y el orden en el que lo hacen, desde
cuántos sitios se accede a una página determinada, qué rutas son las más
populares o más seguidas, en un proceso de registro de usuario o de rellenar un
formulario cuántos usuarios abandonan y hacia dónde se dirigen cuando
abandonan, etc. Con toda esta información precisa y detallada habrá que tomar
decisiones en busca de mejorar la usabilidad del sitio web.

Nuestro fin es conseguir que un sitio Web sea usable, no nos sirve ser poco
constante y la improvisación, debemos de trazar unas estrategias y unos
procesos muy marcados para poder conseguir nuestro objetivo.

Estas técnicas ya han sido probadas y sería inútil y poco productivo no

aprovecharlas.

En este curso vamos a seguir una metodología o técnica que se centra

claramente en el usuario ya que es hacia quien dirigimos la Web. Vamos a seguir
todo el proceso de desarrollo de una Web usable con unos objetivos marcados.
Como marca la usabilidad debemos de tener en cuenta desde el principio a los
usuarios y para ello debemos de plantearnos ciertas preguntas como, por
ejemplo: quienes son, que van a necesitar, experiencia…etc.

2.10. CREACIÓN DE UN MODELO DE USUARIO.

El Diseño Centrado en el Usuario es el que está definido por la información
aportada por las personas que van a hacer uso del producto.
Es una nueva manera de enfocar todo el diseño al usuario, combinar el diseño
con el placer de uso, y la necesidad se convierte en la respuesta para ofrecer
nuevas técnicas y métodos de trabajo.

Henry Dreyfuss, autor del libro Designing for people (1955) popularizó la
concepción del diseño como proceso a partir de sus diseños de teléfonos de la
serie 500 para Bell Telephones. Considerado pionero del diseño centrado en el
usuario, estudió cómo se realizaban los teléfonos, cómo se percibían y eran
usados por las personas. Sus conclusiones fueron aplicadas a un diseño nuevo.
 2.11. TEST DE USABILIDAD.
Existes 5 factores que adaptadas a una página Web son los cimientos de la
usabilidad en sitios Web:

Rápido: las páginas que vayan a servir no deben tardar más de 4 segundos en
cargar siempre que nuestro visitante tenga una conexión adecuada. Si las
páginas tardan más de lo normal en cargar el usuario deberá esperar demasiado
y por lo tanto podemos perder al visitante.

Simple: debemos mantener unos elementos comunes en todas las páginas para
que la Web se pueda navegar de forma constante y el usuario no se pierda en
ningún momento. Las animaciones pueden ser atractivas pero continuas
distraen y cansan al usuario.

Legible: La página Web debe tener contenido escrito y no exclusivamente

animaciones, debemos evitar Flash. De esta forma los motores de búsqueda
podrán leer y categorizar nuestra Web para poder posicionarla correctamente.

Accesible: Para todos los navegadores: Los sitios Web deben mostrarse
correctamente en la mayoría de los navegadores actuales.

Actualización: Para que una Web nunca quede anticuada y pierda credibilidad
debe de actualizarse.
 2.12. FEED RSS.
Cuando hablamos del feed RSS lo primero que tenemos que decir es que se trata
de un archivo que generan algunos sitios webs que contienen la versión
específica de la información que se publica en esa web, cada uno de los
elementos que contienen información dentro de este archivo recibe el nombre
de “ítem”.

Cada uno de estos ítems tiene un título, resumen y un enlace a la página web de
donde procede o que contiene la totalidad del texto, además, puede contener
más información como la fecha o el nombre del autor

Lector de Feeds
Cada uno de los feeds que mencionamos anteriormente tiene su propia dirección
como si se tratase de una página HTML, pero con la diferencia de que no se
pueden visualizar de forma directa con el navegador, por lo que tenemos que
usar el lector de feeds.

Podríamos decir que los lectores de feeds funcionan de una forma similar a los
programas de correo electrónico, diferenciándose de estos en que en lugar de
estar consultando la bandeja de entrada para ver los mensajes de forma
periódica los lectores de feeds lo hacen de forma periódica para obtener la última
versión del archivo RSS

Uso del RSS

Podemos pensar que los RSS solo sirven para distribuir la información.
Dependiendo de los datos que contenga nuestro RSS o del lector que usemos
tendrá distintos usos.

Uno de los métodos más comunes en cuanto al uso de RSS es el acceso a

noticias y artículos de una amplia variedad de sitios desde un mismo lugar. Más
tarde la popularización de los blogs dio lugar a que se hicieran más virales.

Esto genero usos de los RSS que hasta hace algunos años no existían como por
ejemplo los sitios de venta online que nos indican cuando están disponibles
nuevos artículos o cuando los ya existentes cambian de precio, otro uso estaría
en los foros avisándonos de las nuevas respuestas, como último ejemplo está el
uso de las redes sociales que los utilizan para la redifusión y notificación de
cambios como el estado del Facebook.

Ventajas
Tres de las ventajas más destacables de usar un lector de feeds para acceder a
los contenidos son:

 Ahorro de tiempo. Esto se debe a que podemos visualizar el contenido

publicado de esas fuentes desde otro lugar.
  Selección de nuestros propios contenidos. No importa la relevancia de la
página web por lo tanto no estaremos viendo siempre los contenidos que
google "nos incita a ver” poniendolos como primeros resultados de
búsqueda.
 Visualización de los contenidos de forma uniforme. Aunque en algunos
casos pueda ser una desventaja ya que no podremos ver el diseño
personalizado de algunos sitios

Los RSS en las redes sociales

Debemos saber que muchos de los servicios que empezaron ofreciéndonos RSS
de cara a los usuarios son hoy en día son redes sociales.

Twitter

Twitter cuenta con una herramienta que genera un feed de cualquier cuenta que
sea pública además de poder publicar feeds de los hashtags. Esta herramienta
es: Http://www.rssitfor.me/

Facebook

El gran gigante de las redes sociales nos ofrece también un RSS, en concreto
genera el archivo a partir de nuestras publicaciones dentro de la sección de
publicaciones, en la parte superior. También tiene un feed en cada página para
subscribirnos:

http://www.facebook.com/feeds/page.php?format=atom10&id=LA-ID

2.13. TIEMPOS DE CARGA Y RESPUESTA.

Le tiempo de cargan como su propio nombre indican es el tiempo que tarda en
cargar la página desde que se accede a ella hasta que esta muestra su
contenido. El tiempo de carga de las páginas web es cada vez más un elemento
de mayor importancia en el diseño de una página web, tanto para los motores de
búsqueda de google a los que acudimos para encontrar la información como
para los usuarios que acceden.

El termino WPO, optimización del rendimiento de la web es un terminó que se

volvió aún más popular desde que Google le diese importancia a la velocidad de
carga de la web llegando así a la conclusión de que La calidad de la web se
equipara al tiempo de respuesta.

Importancia de un buen tiempo de carga

Una de las mayores importancias del tiempo de carga de las páginas web es que
google anuncio en el año 2010 que era uno de los 200 factores de rankeamiento,
es decir posicionamiento entre otras páginas web, esto hará que nuestra página
salga antes que otras cuando se busque contenido que se encuentre en ambas
A continuación, se muestran una serie de datos de interés referentes a la
velocidad de carga:

 Cada segundo de carga superior a la media genera un 11% de caída en las

visualizaciones y un 16% en la insatisfacción de los clientes
 Según una investigación realizada por Kissmetrics el 40% de los visitantes
de las páginas web las abandonaban a los 3 segundos y un 7% más por
cada segundo
 Un 88% de los usuarios que no ingresaron en un sitio web por culpa de la
velocidad de carga son menos propensos a comprar en ese sitio y 1/3
comparte su mala experiencia
 El 85% de los usuarios que usan dispositivos móviles esperan que las
paginas carguen a la misma velocidad que el escritorio.

Google PageSpeed
Para medir la velocidad de nuestra página existen muchas herramientas
gratuitas que nos hacen un análisis tanto para dispositivos móviles (si existe la
versión de la página) como para ordenadores.

Google PageSpeed es una familia de herramientas de Google Inc, se creó como

una herramienta de ayuda para optimizar el rendimiento del sitio web. La
herramienta apareció en el año 2010. La herramienta está compuesta de cuatro
componentes principales dentro de la familia PageSpeed: PageSpeed Module,
PageSpeed Insights, PageSpeed Service y PageSpeed Chrome DevTools. Todos
los componentes tienen en común que están diseñados para identificar fallas en
el cumplimiento de un sitio web.

Como usar Google PageSpeed

A continuación, mostraremos como utilizar la herramienta de Google para medir
la velocidad de cualquier sitio web.
Lo primero que tendremos que hacer es ingresar en la página de la aplicación:
https://developers.google.com/speed/pagespeed/insights/
Una vez dentro de nuestra aplicación web, tendremos que copiar la URL de la
página web del que queremos analizar el tiempo de carga y darle a analizar. Este
proceso tardará unos segundos.

Analisis de PageSpeed
Una vez hayamos terminado el análisis nos saldrá la siguiente página, en nuestro
caso hemos medido la velocidad de la página de euroinnova, es por ello que la
url que hemos introducido es de la de euroinnova.edu

Lo primero que veremos será si el análisis se ha realizado en el ordenador o

móvil, esto lo podremos ver sobre la esquina superior izquierda

Lo segundo será una nota sobre 100, realmente sacar una puntuación en el rango
de 90-100 es muy difícil ya que paginas como el ideal o elmundo no llegan a una
puntuación de más de 50.

Debajo de la puntuación podremos ver los datos de experimentos, los datos que
ha medido la aplicación para calcular nuestra nota, estos son:

 La nota del primer renderizado con contenido

 Primer renderizado significativo
 índice de velocidad
 Primer tiempo inactivo de la CPU
 Tiempo hasta que está activa
  FID potencial máxima

Más abajo tenemos un apartado llamado Oportunidades, en este sitio podemos

ver las optimizaciones que google nos aconseja para reducir el tiempo de carga
de nuestra página, en nuestro ejemplo nos penaliza por la gran cantidad de
imágenes que se usan como portada para cada uno de los módulos.

2.14. Beneficios del desarrollo de un buen sitio web.

Suponemos que esta es la mayor pregunta: ¿Y que gano con todo esto?
Seguramente en alguna ocasión habremos escuchado el dicho de que todo
esfuerzo tiene una recompensa, pues ciertamente esto no podría ser más cierto.

Como vimos anteriormente trabajar e invertir tiempo en nuestro sitio web genera
grandes ventajas, la primera y la más obvia es la de ganar más visitantes, igual
que cuando nosotros como usuarios encontramos una página que nos ofrece un
servicio y nos gusta la recomendamos a el resto de usuarios produciendo así el
denominado efecto boca a boca, esto puede llegar a pasar con nuestro sitio web,
en resumen, se viralice nuestra página web haciendo que tengamos que invertir
menos dinero en publicidad.

Otro beneficio de que nuestro sitio web este bien desarrollado podría ser el
posicionamiento, por lo general cuando un usuario hace un búsqueda solo
comprueba los 3 primeros links, empezando obviamente por el primero. Por esta
razón es importante hacer un buen desarrollo de, por ejemplo, los tiempos de
respuesta y carga.

También estaremos beneficiando a la empresa, ya que al ver una página web

bien hecha seguramente transmitamos una confianza al usuario para que
compre, o contrate nuestros servicios, de otra forma el usuario está viendo parte
de nuestro trabajo por lo que nos servirá para destacar nuestra experiencia como
empresa.

La fábula de los tres cerditos

Para terminar, ayudarnos de la famosa fábula de los tres cerditos, con su versión
animada de Walt Disney para comparar nuestra web con las 3 casas, como
podemos ver las dos primeras casas (sitios web) que se han construido rápido y
mal luego no aguantan los soplidos del lobo, en cambio un sitio web en el que
hemos invertido recursos y tiempo (la casita de cemento) sí que aguantara.
Ahora cambiemos ese soplido del lobo por el tiempo, los sitios web que se han
creado con lenguajes de programación más antiguos tienen un ciclo de vida de
un máximo de 3 años, en algunos casos mucho menos, si comparamos los sitios
web de grandes empresas veremos que estás no han tenido que modificarse en
cuanto a estructura o código, un ejemplo seria la página de Amazon, a
continuación se presentan dos imágenes comparativas entre la página en 2010
y la página en 2019
Podemos apreciar que a pesar de haber pasado casi 10 años, lo que en el mundo
de los sitios webs es muchísimo tiempo, los contenidos son los mismos y la
empresa ha tenido un gran éxito, esto se debe a que hicieron un buen desarrollo
del sitio web.