El Entorno Web. Tipos de Web. Navegación. Usabilidad PDF

Curso de Marketing Online
Asignatura 1. Bloque 2: El entorno web.

Tipos de web. Navegación web. Usabilidad
1
Página
_______________________________________________________________________
Fundación UNED, Curso de Marketing Online 3ª Edición – Oct. 2015 www.cursosmarketingonlinefuned.com
Índice
El entorno web. Tipos de web. Navegación web.

Usabilidad
1 Introducción y objetivos del bloque ............................................................ 5
2 El entorno web .................................................................................... 6

2.1 Los elementos ................................................................................ 6
2.1.1 El sitio web .............................................................................. 6
2.1.2 Las páginas web ........................................................................ 7
2.2 HTML .......................................................................................... 9
2.2.1 HTML. Lenguaje de marcas ......................................................... 11
2.2.2 El lenguaje CSS ....................................................................... 15
2.2.3 El lenguaje Javascript ............................................................... 16
2.3 Tecnologías ................................................................................. 20
2.3.1 Webs estáticas ........................................................................ 20
2.3.2 Webs dinámicas ...................................................................... 20
2.3.3 Flash ................................................................................... 20
2.3.4 Lenguajes de programación ........................................................ 21
2.4 Plataformas web existentes .............................................................. 23
2.4.1 Wordpress ............................................................................. 23
2.4.2 WooCommerce ........................................................................ 24
2.4.3 Joomla ................................................................................. 25
2.4.4 Virtuemart ............................................................................ 26
2.4.5 Wix ..................................................................................... 26
2.4.6 1&1 mi web ........................................................................... 27
2.4.7 Prestashop............................................................................. 27
2.5 Servidores................................................................................... 27
2.6 El dominio web............................................................................. 29
2.7 El alojamiento web ........................................................................ 32
2.7.1 ¿Qué es un hosting o alojamiento web? ........................................... 32
2.7.2 Tipos de hosting ...................................................................... 33
2.7.3 Criterios de selección del hosting ................................................. 35
2
Página
_______________________________________________________________________
3 Tipos de web .................................................................................... 37
3.1 Según su tecnología ....................................................................... 37
3.1.1 Tecnologías estáticas ................................................................ 37
3.1.2 Tecnologías dinámicas ............................................................... 38
3.2 Según su finalidad ......................................................................... 39
3.2.1 Web publicitaria ...................................................................... 39
3.2.2 Webs para la venta online .......................................................... 49
3.2.3 Sitios sociales (comunidades) ...................................................... 53
3.2.4 Sitios de noticias ..................................................................... 54
3.2.5 Otro tipo de webs .................................................................... 54
3.2.6 Forma sencilla de averiguar con qué está hecha una página .................. 55
3.3 Plataformas recomendadas .............................................................. 56
3.3.1 Para landing pages y microsites .................................................... 57
3.3.2 Para webs corporativas .............................................................. 57
3.3.3 Para webs de venta online .......................................................... 58
4 Navegación y usabilidad web .................................................................. 65

4.1 ¿Qué es y por qué es tan importante? .................................................. 65
4.1.1 Antecedentes ......................................................................... 65
4.1.2 Relación entre usabilidad y experiencia de usuario ............................. 66
4.1.3 Evolución del término usabilidad .................................................. 68
4.1.4 Aspectos técnicos de la usabilidad ................................................ 78
4.1.5 En resumen ............................................................................ 80
4.2 Análisis previo .............................................................................. 80
4.2.1 Determinar el objetivo del sitio.................................................... 80
4.2.2 Determinar el público objetivo .................................................... 81
4.2.3 Determinar los dispositivos de acceso ............................................ 82
4.2.4 Análisis de la competencia.......................................................... 82
4.3 Los 10 mandamientos web de la usabilidad ........................................... 82
4.3.1 Primero. Cumplir lo Prometido..................................................... 83
4.3.2 Segundo. Incluir una llamada clara a la acción .................................. 83
4.3.3 Tercero. Concreción ................................................................. 85
4.3.4 Cuarto. Evitar las distracciones visuales .......................................... 86
4.3.5 Quinto. Definir una buena navegación ............................................ 87
4.3.6 Sexto. Solicitar la información estrictamente necesaria ....................... 88
4.3.7 Séptimo. Ayudar al usuario ......................................................... 89
4.3.8 Octavo. Humanizar la web .......................................................... 89
4.3.9 Noveno. No complicar lo sencillo .................................................. 91
4.3.10 Décimo. Prevenir y corregir los errores .......................................... 92
4.4 Casos prácticos. Usabilidad aplicada a diferentes tipos de web .................... 93
4.4.1 Usabilidad aplicada a las landing pages ........................................... 93
4.4.2 Usabilidad aplicada a las webs corporativas .................................... 100
3
Página
_______________________________________________________________________
4.4.3 Usabilidad aplicada a Tiendas Online ............................................ 104
4.5 Usabilidad y usuario. Conclusiones sobre una relación perfecta .................. 110
4.5.1 El futuro de la usabilidad .......................................................... 110
4.5.2 Anteponer las necesidades del usuario a las nuestras ......................... 111
5 Análisis Posterior: Herramientas de analítica y optimización web ..................... 112

5.1.1 Motivos para el análisis de la usabilidad ......................................... 112
5.1.2 Herramientas para el análisis de la usabilidad .................................. 112
4
Página
_______________________________________________________________________
1 Introducción y objetivos del bloque
La web es nuestra tarjeta de presentación online frente a nuestro público, usuarios o

clientes. Es nuestro escaparate en internet.
De poco nos servirá una campaña de marketing muy bien trabajada si nuestro sitio web no
cumple el objetivo que nos hemos propuesto. Así que podemos afirmar que al menos el 50% del
éxito de una campaña de marketing online y de nuestra estrategia online pasan por el sitio web.
En este bloque temático de la asignatura vamos a estudiar todo lo que rodea a un sitio
web: sus elementos, los diferentes tipos de web que podemos implementar, los lenguajes de
programación, las diferentes plataformas, y los aspectos relacionados con el dominio y el
alojamiento en un servidor web.
Finalmente trataremos aspectos relacionados con la navegación y la usabilidad web, o

cómo dotar a nuestro sitio web de unos mínimos de “calidad” para que los usuarios que nos
visitan alcancen el objetivo que nos hayamos propuesto.
Aunque este tema pueda parecer en algún momento más técnico, no os preocupéis.
Partimos de la base de que no tenéis conocimientos sobre la materia y no se espera de vosotros
que lleguéis a programar nada, por lo que es lógico que os surjan dudas. Se espera que al finalizar
el bloque adquiráis la capacidad para navegar por un sitio web analizando criterios de usabilidad,
identificar determinados elementos de la página, y que seáis capaces de usar algunas herramientas
para ello si es necesario, herramientas que os resultarán muy útiles también cuando hablemos de
SEO más adelante en el curso.
5
Página
_______________________________________________________________________
2 El entorno web
En este capítulo comenzaremos explicando qué es un sitio web, para qué sirve y las
distintas tecnologías que se utilizan para implementarlo. A continuación, analizaremos los
diferentes tipos de web existentes y las tecnologías que nos permiten crear cada uno de ellos.
Finalizaremos analizando las distintas plataformas existentes para creación de webs y hablaremos
también sobre los dominios y alojamientos web.
2.1 Los elementos

Lo primero que tenemos que hacer es diferenciar los conceptos de sitio y página web.
La definición formal de un sitio web, website o portal nos dice que es una localización en
la WWW (World Wide Web) que contiene una serie de documentos (páginas web) organizados
jerárquicamente. Cada uno de esos documentos contiene texto y/o imágenes que aparecen como
información digital en la pantalla del ordenador.
En definitiva, un sitio web es un conjunto de páginas web. Por ejemplo,

http://www.elmundo.es/ es un sitio web y http://www.elmundo.es/salud/nutricion.html es una
página web de ese sitio web o portal. Aunque existen sitios web con una sola página donde no es
posible navegar, lo habitual es encontrarnos sitios web con múltiples páginas.
2.1.1 El sitio web
El sitio web, por lo tanto, lo tenemos que ver como un conjunto de páginas web enlazadas
y relacionadas entre sí, que muestran distintas partes del mismo.
Todos los sitios webs públicamente accesibles constituyen lo que se denomina World
Wide Web.
A las páginas de un sitio web se accede normalmente a través de una URL raíz común
denominada portada, que normalmente reside en el mismo servidor físico. Una URL (Universal
Resource Locator) es un identificador que permite al navegador del usuario localizar un recurso
concreto en internet. Su forma habitual es: http://subdominio.dominio.extension/pagina
Los sitios web son espacios documentales organizados que en muchas ocasiones se
dedican a un tema particular o propósito específico. Pueden contener hiperenlaces, es decir,
enlaces o llamadas a URLs dentro del propio portal o a otros portales. Esto hace que a veces la
distinción entre sitios individuales sea difícil.
6
Página
_______________________________________________________________________
En general, los sitios web tienen una estructura común, lo que nos ayuda a encontrar de
forma fácil lo que buscamos cuando estamos dentro de ellos.
Los sitios web se diferencian por la clase de contenido que ofrecen o por el servicio que
prestan a cualquiera de las personas que se encuentran navegando por la red. Por ejemplo,
tenemos sitios de tipo blog, corporativos, sitios web personales, páginas publicitarias, tiendas
online…
2.1.2 Las páginas web
Una página web es un documento electrónico que contiene información textual, visual y/o
sonora, y que se encuentra alojado en un servidor, pudiendo ser accesible mediante el uso de
navegadores.
El conjunto de páginas web que están integradas dentro de un mismo dominio web es lo
que constituye el sitio web. Además, pueden contener enlaces para facilitar la navegación interna
dentro del portal. No obstante, es común usar los términos sitio web y página web de manera
indistinta. En realidad, solo en el caso de sitios web con una sola página podríamos asimilar
ambos conceptos de manera estricta.
Las páginas web se crean mediante lenguajes de programación de marcado como HTML,
lenguajes que pueden ser interpretados por los navegadores. De esta forma, las páginas pueden
presentar la información en distintos formatos (texto, imágenes, sonidos, vídeos, animaciones),
estilos y contar con aplicaciones interactivas.
En los últimos años, dado el avance y presencia que tiene Internet en nuestras vidas, son
muchas las empresas que se han puesto en marcha y han creado su sitio web, lo que les ha
permitido darse a conocer al mundo y conseguir nuevos clientes online. Todos los días se crean
miles de nuevos sitios web y decenas o cientos de miles de páginas con nuevo contenido.
Disponer de una web es relativamente sencillo. Sin embargo, si nos planteamos tener una
web que cumpla con nuestros objetivos, debemos tener en cuenta varios criterios fundamentales:
 Diseño y contenido atractivos. Como toda tarjeta de presentación, entrará por los ojos
de los usuarios, que en unos segundos decidirán si continúan navegando.
 Usable y navegable. Debemos facilitar al máximo que el usuario encuentre lo que

busca y se “desplace” por las distintas páginas de nuestro sitio, sin que éste contenga
errores. Además, debe ser fácil de usar. Por ejemplo, si el usuario no entiende cómo
7
Página
_______________________________________________________________________
debe continuar con su proceso de compra, o éste falla en el último momento, el
resultado es que abandonará nuestro sitio y probablemente no vuelva más.
 Optimizado técnicamente y a nivel de contenido para los buscadores. Si queremos

que nos visiten, primero deben encontrarnos. Nadie va a entrar en un negocio que no
sabe que existe. Lo trataremos más en detalla en el bloque de posicionamiento SEO.
2.1.2.1 Tipos de sitios web según la presentación de sus contenidos
De acuerdo a la forma en que un sitio web presenta sus contenidos, podemos clasificarlos
a todos en dos grandes grupos:
 Sitios web estáticos
 Sitios web dinámicos
Las webs estáticas son aquéllas que presentan “siempre” la misma información, ya que
ésta no varía en un periodo más o menos largo de tiempo, tienen la misma funcionalidad y suelen
mostrar únicamente información en forma de texto con imágenes y enlaces. Están basadas casi
exclusivamente en HTML.
Se desarrollaban de esta forma cuando nació internet y comenzó a expandirse, ya que su

creación era relativamente sencilla, a partir incluso de editores de texto, eso sí, necesitando
conocer el lenguaje HTML. En este tipo de webs, cuando se desea modificar un texto, una
imagen o un enlace, es necesario editar manualmente cada página individual afectada y volverla a
subir al servidor donde se encuentra. Es decir, el contenido no se guarda en ninguna base de
datos, sino que se escribe tal cual en el archivo de cada página. Es habitual que en este tipo de
páginas todas las URL terminen en nombredelapagina.htm o nombredelapagina.html
Por ejemplo: http://www.webandmacros.com/
Las webs dinámicas, por el contrario, son aquéllas que son capaces de interactuar con el
usuario o navegante, ya que están conectadas con bases de datos y tienen funcionalidades
adicionales que no se pueden implementar con el lenguaje HTML. Su principal ventaja es la
personalización de la web en función del usuario, así como una mayor facilidad a la hora de
modificar los contenidos. Además del HTML, este tipo de webs están desarrolladas bajo
lenguajes de programación como PHP, ASP, JSP, PYTHON o RUBY. El manejo de dichos
lenguajes requiere de conocimientos específicos de programación web.
8
Página
_______________________________________________________________________
Las primeras webs dinámicas se crearon a principios de los años 90. Se popularizaron más
tarde con el uso de los CMS o gestores de contenidos y hoy en día son la opción más común tanto
para blogs, foros, aplicaciones empresariales, grandes sitios y portales de comercio electrónico.
Por ejemplo, cualquier sitio web creado mediante Wordpress, Wix, Joomla o Prestashop
será dinámico.
2.1.2.2 Tipos de sitios web según su acceso
De acuerdo a las posibilidades de acceso, los sitios web pueden clasificarse en:
 Privados
 Públicos
Los sitios web privados son aquellos a los que solo es posible acceder mediante un
sistema de identificación privado, normalmente un usuario y una contraseña.
Por ejemplo, el portal de un banco o un foro al que solo se puede acceder habiéndose
registrado previamente son sitios web privados.
Los sitios web públicos son aquellos que no requieren de ninguna credencial de acceso al
contenido, siendo únicamente necesario una conexión a internet. La mayoría de sitios web que
nos vamos a encontrar son públicos. También es posible que nos encontremos con sitios web que
tienen una parte pública y otra privada.
2.2 HTML
HTML es un lenguaje de marcas basado en SGML con el que se crean las páginas web.
SGML o Standard Generalized Markup Language fue definido por la norma ISO 8879 en
1986 y desde entonces ha sido considerado el lenguaje estándar para mantener los depósitos
centrales de la estructura documental. Se trata de un lenguaje para marcar y describir documentos
con independencia total del hardware y software utilizados. Es decir, es un lenguaje estándar
“padre” a partir del cual se han definido lenguajes para medios específicos con internet, como el
HTML.
En los años 60, IBM intentó resolver los problemas asociados al tratamiento de
documentos en diferentes plataformas a través de GML (Generalized markup Language). Se
trataba de encontrar un lenguaje normalizado que tratara las marcas como texto accesible desde
cualquier sistema, ya que hasta entonces cada aplicación utilizaba sus propias marcas para
9
Página
_______________________________________________________________________
describir los diferentes elementos y era imposible pasar información de un sistema a otro sin
perder el formato original. Las marcas son códigos o etiquetas que indican a un programa cómo
debe tratar su contenido, y de esta forma, si se desea que un texto aparezca con un formato
determinado, dicho texto debe ir delimitado por la correspondiente marca que indique cómo debe
ser mostrado en pantalla, cómo debe ser impreso o cómo debe ser almacenado. Y lo mismo
ocurre con todas las demás características de cualquier texto.
En 1978 el Instituto Nacional Americano de Normalización (ANSI) empezó a trabajar en

las especificaciones para los procesadores de textos y el resultado fue el lenguaje SGML que, en
1986, pasó a manos de la ISO (organización internacional de normalización) y se convirtió en la
norma 8879, SGML (Standard Generalized Markup Language).
Los lenguajes de marcas no son equivalentes a los lenguajes de programación aunque su

definición como "lenguajes" induzca a confusión. Se trata de sistemas complejos de descripción
de información, normalmente documentos, que si se ajustan a SGML se pueden controlar desde
cualquier editor ASCII (es decir, cualquier editor de texto). Las marcas más utilizadas suelen
representarse por textos descriptivos encerrados entre los signos "menor" (<) y "mayor" (>),
siendo lo más usual que existan una marca de principio y otra de final que delimite el contenido
que se está marcando. En resumen, consiste en usar etiquetas que describen elementos, etiquetas
que después son procesadas para mostrar la información al usuario adecuadamente.
Un lenguaje de marcas o de etiquetado no es lo mismo que un lenguaje de marcas

generalizado. Con un lenguaje de marcas se describen las reglas para el procesamiento de un
texto, para describir los diferentes caracteres y sus características de impresión. Un lenguaje de
marcas generalizado, por el contrario, NO especifica cómo deben visualizarse los elementos o el
proceso que se ha de realizar, sino que nos da únicamente información sobre la estructura y el
tipo de elementos del documento.
Por lo tanto, HTML hereda de SGML sus principales características:
 La escritura se realiza en un formato de texto plano.

 Está formado por etiquetas.
 Las etiquetas son las que definen la organización y estructura de los contenidos.
 Cada elemento de información se delimita usando etiquetas de comienzo y fin.
10
Página
_______________________________________________________________________
2.2.1 HTML. Lenguaje de marcas
2.2.1.1 ¿Qué es HTML?
HTML son las siglas de Hyper Text Markup Language y hace referencia al lenguaje de
marcado que se usa para la creación de páginsa web. Es un estándar a cargo de la W3C, consorcio
internacional que nos da recomendaciones sobre la WWW.
Básicamente, HTML consiste en un conjunto de etiquetas que sirven para definir el texto
y otros elementos (imágenes, enlaces, objetos…) de los que se compone una página web. Dichas
etiquetas se denominan con un nombre entre los símbolos “<” y “>” (por ejemplo, <head> hace
referencia a la etiqueta de comienzo de la cabecera de una página web). Es un lenguaje en
continua evolución y que cada vez nos permite mayores opciones de cara al desarrollo de las
páginas web.
El código HTML completo de una página puede ser visualizado por cualquier persona a
través de su navegador. Para ello solo es necesario acudir a alguna opción como “ver código
fuente” dentro de la página. Por ejemplo, en Chrome podemos hacer uso de esta opción
situándonos sobre la página y pulsando el botón derecho del ratón. Una vez seleccionada esta
opción veremos el código fuente en la pantalla.
11
Página
_______________________________________________________________________
El hecho de poder acceder al código fuente de cualquier página nos va a permitir
inspeccionar elementos, textos, etiquetas, imágenes, de manera sencilla, sin ser expertos en
programación, y sin necesitar programas adicionales, simplemente con unos básicos
conocimientos de HTML.
Todos los navegadores permiten visualizar el código fuente de una página. En este
artículo tenéis instrucciones de cómo hacerlo con los más importantes:
http://es.wikihow.com/ver-el-c%C3%B3digo-fuente-de-una-p%C3%A1gina-de-internet
Otra opción para visualizar el código fuente completo de una página es hacer una llamada
desde el navegador a la dirección URL de la página que queremos ver, con el comando “view-
source” delante. Por ejemplo, si queremos ver el código fuente de la página
www.elmundo.es/cultura.html, podremos ver el código fuente llamando a:
view-source:http://www.elmundo.es/cultura.html
Sobre el código fuente podemos hacer una búsqueda para localizar algún elemento,
usando el comando buscar del navegador (por ejemplo, control+F en los navegadores de
Windows).
2.2.1.2 Breve historia del HTML
HTML fue desarrollado por la Organización Europea de Investigación Nuclear (CERN)

en el año 1945, con la finalidad de crear un sistema de almacenamiento donde las cosas no se
perdieran y se pudieran conectar a través de hipervínculos o enlaces.
Posteriormente, Douglas Engelbart, diseñó un entorno de trabajo por computadora que

recibiría el nombre de oNLine System, que poseía un catálogo para facilitar la tarea de búsqueda
dentro de un mismo organismo.
En 1965, Ted Nelson acuñó el término hipervínculo, ideando una estructura que se
encontraba conectada de forma electrónica y que más tarde permitiría la creación de la World
Wide Web (1989), un sistema de hipertexto a través del cual era posible compartir una variada
información sirviéndose de Internet (servía para la comunicación entre investigadores nucleares
que formaban parte del CERN).
12
Página
_______________________________________________________________________
El norteamericano Tim Berners-Lee fue el primero en proponer una descripción de
HTML en un documento que publicó en 1991. Allí describió veintidós componentes, que
representan el diseño más básico y simple del HTML.
El tipo de codificación que se utilizó para el desarrollo de este sistema de hipervínculos

tenía que ser comprendido tanto por los ordenadores “tontos” como por las mega-estaciones. Por
ello, fue necesario crear algo muy simple tanto en lo que respectaba al lenguaje de intercambio
(HTML), como a lo que hacía referencia al protocolo de red (HTTP).
Al día de hoy los principales gestores de contenido web disponen de los llamados
“Editores Web”, que permiten que los usuarios, a través de herramientas gráficas que reciben el
nombre de WYSIWYG (lo que ves es lo que obtienes, “what you see is what you get”) puedan
crear páginas web sin tener un conocimiento específico de HTML. Con estas herramientas, lo que
uno escribe (incluyendo el formateado y estilos) se traduce a código HTML, permitiendo también
incluir en la página recursos como imágenes, vídeos, archivos de otras webs o de la propia y todo
tipo de contenido que se encuentre subido a la red.
2.2.1.3 Propiedades fundamentales del HTML
1.- HTML es un lenguaje de marcas que nos permite definir las zonas de nuestra web.
Por ejemplo, definimos el texto de encabezamiento principal de nuestra página de esta

forma:
<h1>Cabecera principal de la página</h1>
2.- Los nombres de las etiquetas o marcas que se utilizan y de los atributos deben ir
siempre en minúscula.
3.- Los valores de todos los atributos de las etiquetas deben ir entre comillas.
Por ejemplo, la etiqueta de imagen con la dirección URL de la misma se escribiría así:
<img src=“mifoto.jpg” />
4.- Las etiquetas deben “cerrarse” siempre, de dos formas.
Forma 1: las etiquetas que marcan el principio y fin de un párrafo se escriben así:
<p> Texto del párrafo </p>
Forma 2: las etiquetas únicas o cuando no usan una específica para el cierre se cierran en
sí mismas mediante un espacio en blanco seguido del carácter “/”
13
Página
_______________________________________________________________________
Por ejemplo:
<br />
<img />
<hr />
5.- Las etiquetas representan SÓLO cómo se organiza el texto, no siendo representativas
del estilo (no indican el tipo de letra, color, tamaño, posición…).
6.- Las etiquetas se pueden anidar, pero de manera lógica y ordenada
Por ejemplo:
<div> <p> <strong> … </strong> </p></div>
7.-El primer elemento de una página web debe ser la etiqueta <html> y el último, </html>
8.-Dentro de la estructura <html> </html> tenemos que tener SIEMPRE dos zonas, una
para la cabecera y otra para el cuerpo de la página, representadas mediante:
<head>…</head>
<body>…</body>
9.- HTML tiene una estructura en “árbol”. De la etiqueta HTML cuelgan siempre las dos
“ramas” HEAD y BODY.
Ésta es la estructura HTML de cualquier página web.
<html>
<head>
<title>Título de la página</title>
</head>
<body>
Textos, imágenes, tablas, enlaces, formularios, etc
</body>
</html>
14
Página
_______________________________________________________________________
En la documentación de apoyo hemos incluido un anexo adicional con un poco de HTML
básico así como diversas guías y manuales. No es objetivo del curso que aprendáis a
crear/programar páginas web, pero sí es bueno que tengáis un conocimiento básico de cómo se
estructura cualquier página, y de las etiquetas HTML más importantes para que luego podáis
identificarlas en el código fuente.
Si queréis hacer vuestras propias pruebas con el lenguaje HTML podéis visitar este sitio
web:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
2.2.2 El lenguaje CSS
2.2.2.1 ¿Qué es CSS?
CSS es el acrónimo de Cascading Style Sheets, es decir, hoja de estilos en cascada.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un

documento de su presentación.
CSS es un lenguaje basado en hojas de estilos, creado para controlar el aspecto o

presentación de los documentos electrónicos definidos mediante HTML y XHTML (variante del
HTML más estricta). Mediante las hojas de estilos separamos el contenido y funcionalidad de su
presentación, algo muy útil en el desarrollo de sitios web complejos.
Ventajas:
 Mejora la accesibilidad del documento.

 Reduce el tiempo de mantenimiento, al reducir la complejidad del código.
 Facilita que se pueda visualizar el contenido en cualquier dispositivo.
Cuando se crea una página web, en primer lugar se usa lenguaje HTML o XHTML para
definir los elementos de la página (cabecera, título, párrafos, textos destacados, tablas,
listados…). Posteriormente mediante CSS se define el aspecto que tendrán todos los elementos,
es decir, como los va a visualizar el usuario (posición, tipo de letra, colores, tamaño, alineación,
separación…).
Si bien es posible definir estilos concretos (color, tamaño, tipo de letra, posición…) en la
propia etiqueta HTML introduciendo lenguaje CSS en la misma, lo ideal es separar totalmente la
parte de diseño/formato de la parte de estructura y programación. De ahí que separemos HTML y
CSS.
15
Página
_______________________________________________________________________
2.2.2.2 Breve historia del lenguaje CSS
Las hojas de estilos aparecieron un poco más tarde que el lenguaje de etiquetas SGML,
alrededor del año 1970. Desde la creación de SGML, se detectó la necesidad de definir un
mecanismo que permitiera aplicar de forma consistente diferentes estilos a los documentos
electrónicos.
El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y
el crecimiento exponencial en el uso del lenguaje HTML para la creación de documentos
electrónicos. Sin embargo, la guerra entre navegadores y la falta de un estándar para la definición
de los estilos dificultaban la creación de documentos que tuvieran la misma apariencia en todos
los navegadores. Es decir, que cada navegador mostraba la información de manera diferente.
W3C (World Wide Web Consortium), organismo encargado de definir los estándares
relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el
lenguaje HTML, presentándose nueve propuestas. Las dos propuestas ganadoras fueron CHSS
(Cascading HTML Style Sheets) y SSP (Stream-based Style Sheet Proposal).
La propuesta CHSS fue realizada por Håkon Wium Lie y SSP por Bert Bos. Entre finales
de 1994 y 1995 Lie y Bos se unieron para crear un nuevo lenguaje que recogía lo mejor de cada
propuesta. Fue bautizado como CSS (Cascading Style Sheets).
En 1995, W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su

grupo de trabajo de HTML. A finales de 1996, W3C publicó la primera recomendación oficial,
conocida como "CSS nivel 1".
En la documentación de apoyo os hemos dejado un anexo con las bases de CSS y también
algunos manuales o guías.
2.2.3 El lenguaje Javascript
2.2.3.1 ¿Qué es Javascript?
Javascript es un lenguaje de programación “scripting” que permite definir acciones

específicas como efectos, cálculos, validaciones, funciones, etc. en las páginas web. De esta
forma, podemos interactuar con los usuarios.
A diferencia de otros lenguajes de programación web como PHP, ASP, Java…, Javascript
es interpretado por el navegador y se ejecuta directamente en el ordenador de cada usuario, lo que
presenta una serie de ventajas:
16
Página
_______________________________________________________________________
 Se puede implementar y ser ejecutado en cualquier página web, no importando el
servidor donde ésta esté alojada. La única restricción la puede imponer el usuario, si
ha configurado el navegador para que no ejecute Javascript, algo que es muy poco
habitual.
 Sencillo de aprender
 Perfecto para realizar validaciones de datos en formularios
 Muy útil para realizar efectos en la página o controlar determinados eventos (por
ejemplo, que el ratón se posicione sobre una imagen, que se haga clic en un botón,
etc.)
Hay que diferenciar Java de Javascript, ya que aunque suenan parecido, no tienen nada
que ver. Java es un lenguaje de programación que se ejecuta en el servidor y no en el cliente, y
que está orientado a realizar cualquier tipo de funcionalidad y a conectarse con bases de datos.
Javascript está mucho más restringido, orientado específicamente para las acciones en el sitio
web que hemos comentado.
2.2.3.2 Ubicación del código JavaScript
Las funciones o acciones Javascript (también lo veréis denominado como “código

Javascript”) podemos insertarlas en una página web de diferentes formas (no os preocupéis que
no vais a tener que hacer nada de esto, solo es a modo de información):
 Insertando el código dentro de la página, habitualmente en la zona de cabecera o del

cuerpo, entre las etiquetas <script> y </script>.
Ejemplo de script que mostraría una ventana de alerta cuando se haga una llamada a
la función que se ha definido.
<head>
<script>
mifuncionjavascript(){
alert(‘esto es una prueba’);
</script>
…
17
Página
_______________________________________________________________________
</head>
 Insertando el código en un fichero externo con extensión “.js” (en este caso, sin
ninguna etiqueta <script>) y vinculándolo a la página web mediante una llamada al
mismo (es una forma mucho más ordenada de presentarlo)
Ejemplo:
Fichero pruebas.js
mifuncionjavascript(){
alert(‘esto es una prueba’);
Cabecera de la página web
<head>
<script type=“text/javascript” src=“pruebas.js”></script>
</head>
 Insertando el código directamente dentro de un elemento HTML que tenga un

atributo que admita Javascript (por ejemplo, un botón).
Ejemplo: en el cuerpo de la página hay un elemento HTML de tipo botón que al
pulsarlo (evento “onclick”) lo que hace es mostrar una alerta en pantalla con el
mensaje “esto es una prueba”
<body>
<input type=”button” value=”pulsar” onclick=”alert(‘esto es una prueba’);”/>
</body>
18
Página
_______________________________________________________________________
2.2.3.3 Algunas características del lenguaje Javascript
Tiene una sintaxis parecida a la usada en Java y en C. Al ser un lenguaje ejecutado en el

lado del usuario (en el ordenador del usuario), es independiente del servidor donde esté alojada la
página.
 Se pueden definir variables:
var = “Hola”, n=103
 Se pueden definir condiciones:
if(i<10){ … }
 Se pueden definir bucles iterativos:
for(i; i<10; i++){ … }
 Se pueden definir vectores/conjuntos de elementos (Arrays):
var miArray = new Array(“12”, “77”, “5”)
 Se pueden definir funciones que hagan algo y disponemos de muchas funciones ya

programadas por el propio lenguaje. Por ejemplo, la función alert() vista en el
ejemplo anterior permite mostrar alertas en pantalla.
 Permite insertar comentarios para explicar el código:

o En una sola línea:
// Esto son comentarios
o En varias líneas:
/*
Esto son comentarios
en varias líneas
*/
19
Página
_______________________________________________________________________
 Permite tratar con elementos de la página:
document.write("Hola");
 Permite diferentes tipos de datos en las variables (texto, números enteros, números
decimales, booleanos…)
 Podemos usar el símbolo “+” para concatenar cadenas y variables
Var texto1=”hola”;
Var texto2=” mundo”;
Var texto3=texto1+texto2; //tendrá el valor “hola mundo”
2.3 Tecnologías
2.3.1 Webs estáticas
Como hemos comentado anteriormente, las webs estáticas son webs “sin movimiento”.
Son muy sencillas de crear y solo usan HTML o HTML+CSS. No permiten prácticamente
ninguna funcionalidad más allá de mostrar texto plano, imágenes y enlaces.
2.3.2 Webs dinámicas
Las webs dinámicas permiten una mayor funcionalidad y conexión con bases de datos.
Además de usar HTML y CSS, se crean usando lenguajes de programación específicos como
Java, Javascript, PHP, ASP, Ruby…para mostrar aquella información que puede ser dinámica.
2.3.3 Flash
Flash es un software que se creó originalmente para crear animaciones y que se terminó
usando muchísimo en internet. Su principal ventaja es que al usar una tecnología de gráficos
vectoriales, las animaciones pesan poco (ocupan poco espacio) y no consumen muchos recursos
ni ancho de banda.
También es posible usarlo para crear interacción con los usuarios. Eso lo habréis visto
seguramente en muchos anuncios publicitarios en los que es posible con el ratón realizar algún
tipo de acción en el anuncio.
Sin embargo, Flash presenta algunos inconvenientes importantes que han hecho que su
uso se reduzca muchísimo, al menos para crear contenidos y animaciones en la web:
20
Página
_______________________________________________________________________
 Requiere de un reproductor especial, lo que implica tener instalado en el dispositivo
alguna aplicación que lo pueda leer. Teniendo en cuenta que no todos los usuarios lo
van a tener instalado en su ordenador y de que los dispositivos Apple ni siquiera lo
van a leer, esto supone una restricción importante si queremos llegar al máximo
número de personas posibles.
 Los buscadores tampoco pueden leer el flash. Esto quiere decir que cualquier enlace
o texto que esté integrado dentro del archivo flash no va a ser indexada. En el caso de
sitios web completamente hechos en flash, como mucho los robots van a indexar la
home, pero olvidémonos del resto de páginas. Pensemos que es como si fuera una
película animada. No pueden acceder a lo que hay dentro. Por lo tanto, adiós a un
buen posicionamiento SEO.
 Cualquier cambio que se quiera hacer implica un coste de desarrollo. No es algo que
pueda hacer cualquiera.
Por ello, los sitios realizados con Flash no son buenos ejemplos de usabilidad. Además,
algunas de las acciones y efectos que se realizan con flash también se pueden hacer mediante
HTML5. Quedan ya muy pocas páginas realizadas en Flash, por lo que podríamos decir que es
una tecnología casi obsoleta a nivel de desarrollo web.
Tenéis un ejemplo aquí: http://wechoosethemoon.org/
2.3.4 Lenguajes de programación
2.3.4.1 Lenguajes de lado del servidor y del cliente
El navegador es una aplicación capaz de interpretar el código HTML de los archivos que
constituyen un sitio web y “traducirlos” al contenido que el usuario finalmente ve.
Por ejemplo, si el navegador lee la etiqueta:
<img src=”imagen.jpg” title=”esto es una imagen”/>
Sabe que tiene que buscar el archivo nombrado como imagen.jpg y mostrarlo. El usuario
verá esa imagen en la pantalla. El navegador también es capaz de interpretar el lenguaje CSS de
estilos y Javascript.
Sin embargo, si la página web incorpora código escrito en otro lenguaje de programación,
por ejemplo, PHP, el navegador no va a ser capaz de interpretarlo. Debe ser en este caso el propio
servidor web donde está la página almacenada el que interprete esa parte del código, la procese y
luego se la envíe al navegador en forma de HTML, que ya si podrá leer.
21
Página
_______________________________________________________________________
Así pues nos encontramos con lenguajes del lado del “cliente” (usuario) que pueden ser
procesados directamente por el navegador del usuario, y de lenguajes del lado del servidor,
llamados así porque deben ser procesados por el servidor primero antes de enviar algo
comprensible al navegador. Dentro de estos últimos tenemos PHP, ASP, Python, Ruby…
La gran ventaja de los lenguajes del lado del cliente/usuario es que son independientes del
servidor y, por lo tanto, permiten olvidarnos de dónde esté alojada la página. Eso también implica
que todo el código y funciones son visibles por el usuario.
La gran ventaja de los lenguajes del lado del servidor es que ofrecen una funcionalidad
completa, acceso a bases de datos y además, el código fuente permanece oculto al usuario. Es
decir, el usuario al ver el código fuente de la página podrá visualizar el contenido final que se ha
generado, pero no cómo se ha llegado a ese resultado (funciones y datos usados, por ejemplo).
Con ambos tipos de lenguajes podremos implementar en nuestro sitio web prácticamente
cualquier cosa que se nos ocurra, con mayor o menor nivel de complejidad.
Los lenguajes de programación web más utilizados, y que hemos mencionado

anteriormente, son:
 ASP (Active Server Pages). Es un lenguaje derivado de Visual Basic, desarrollado

por Microsoft. Se usa en plataformas funcionando bajo el sistema operativo Windows
NT.
 PHP (Hypertext Preprocessor). Análogo a ASP, se usa con plataformas que funcionan
con los sistemas operativos Unix y Linux.
 Python. Es un lenguaje de programación muy versátil y multiplataforma.
 Ruby. Es un lenguaje de programación dinámico y de código abierto enfocado en la
simplicidad y la productividad.
Los más utilizados actualmente son PHP, Python y Ruby. 22

Página
_______________________________________________________________________
De acuerdo con lo que actualmente indican los especialistas:
 PHP se posiciona como el mejor lenguaje para la creación de páginas web

 Ruby es el mejor en la creación de aplicaciones web para entidades de datos
 Python es el mejor lenguaje para crear aplicaciones web de cualquier tipo y también
de escritorio. Además dispone de un entorno de desarrollo excelente con Django
2.4 Plataformas web existentes
En la actualidad existen multitud de plataformas que nos permiten crear sitios web de
diferentes tipos, en general de manera más rápida y sencilla que si tuviéramos que abordar su
desarrollo desde cero. Usan plantillas que podemos modificar y personalizar y plugins y módulos
para agregar funcionalidades adicionales a las que vienen de base con el producto.
Con ellas seguramente no va a ser posible implementar todo lo que se nos ocurra, pero sí
la mayoría de funcionalidades que cualquier sitio web necesita. Si lo que requerimos es una
aplicación web totalmente a medida, entonces tendremos que recurrir a la programación
tradicional, usando “frameworks” como los mencionados anteriormente.
Vamos a ver las más populares.
2.4.1 Wordpress
Wordpress nació como plataforma solo para blogs. Sin embargo ha evolucionado tanto
que se ha convertido en una plataforma multi-propósito. Es un CMS muy versátil y fácil de usar,
lo que ha hecho que se haya hecho muy popular.
Dicho esto debemos distinguir entre Wordpress.com y Wordpress.org, ya que no son lo

mismo y tienen diferencias importantes.
Wordpress.com
Es un servicio de alojamiento gratuito suministrado por una empresa independiente que

permite crear páginas Wordpress en su servidor, bajo el dominio Wordpress.com. Por lo tanto, las
páginas tendrán como nombre subdominio.wordpress.com.
También dispone de planes de pago para usar las páginas bajo un dominio propio y para
no tener publicidad en la página.
Dispone de más de 100 temas y se puede editar la hoja de estilos (CSS), pero no es
posible instalar plantillas premium ni realizar ningún desarrollo extra sobre la página ni alterar el
23
Página
_______________________________________________________________________
código PHP en el que se basa. Tampoco permite instalar plugins o scripts ni configurar, por
ejemplo, Google Analytics.
Por lo tanto es una solución de uso exclusivo online muy limitado. Lo recomendamos solo
si os queréis iniciar con un blog sin perder mucho tiempo o para hacer pruebas.
Wordpress.org
Es el sitio web del proyecto Wordpress, un proyecto de código abierto donde podemos
encontrar el software necesario para crear nuestra web. Para ello debemos descargar ese software
e instalarlo por nuestra cuenta en un servidor web (necesitamos unos conocimientos mínimos de
cómo hacer bien esto), y requiere de la contratación de un dominio y alojamiento web. También
existe la posibilidad de contratar este servicio en algún proveedor de hosting como “Hostinger” o
“000webhost”, lo cual puede facilitar la creación de la página, a cambio de pagar algo o bien
siendo gratuito este servicio pero usando un subdominio dentro de los dominios que ofrecen.
 Permite instalar cualquier plantilla de las que ofrecen, gratuitas o de pago, y

rediseñarlas a nuestro gusto.
 Permite instalar y configurar los plugins que queramos
 Permite modificar el código PHP a nuestro antojo, si bien en el caso de
funcionalidades muy específicas puede ser complejo de realizar. Pero al fin y al cabo
es código abierto.
 Hay una gran comunidad de desarrolladores, con lo que hay numerosos foros de
ayuda, guías y tutoriales.
 Cuenta con numerosas actualizaciones, si bien es el usuario el que debe llevarlas a
cabo si quiere, pero en general es bastante sencillo.
2.4.2 WooCommerce
Es un plugin gratuito para convertir Wordpress en una tienda online. Está disponible en
castellano y se puede descargar desde http://www.woothemes.com/woocommerce/
Por lo tanto, en sí mismo no es una tienda, es necesario tener instalado Wordpress

previamente.
En la sección de tiendas online hablaremos más en detalle sobre él.

24
Página
_______________________________________________________________________
2.4.3 Joomla
Joomla es un CMS (Sistema de Gestión de Contenidos) conocido mundialmente. Es una

plataforma de código abierto. Por lo tanto está disponible para cualquier usuario y nos va a
permitir crear páginas web tanto sencillas como complejas:
 Web corporativas
 Sitios de comercio electrónico
 Pequeños sitios de negocios
 Webs de organizaciones u ONGs
 Aplicaciones Gubernamentales
 Intranets y extranets corporativas
 Webs de escuelas o agrupaciones
 Páginas personales o familiares
 Portales de comunidades
 Revistas y periódicos
Se puede usar para gestionar de forma sencilla cualquiera de los aspectos de un sitio web,
desde la introducción de contenidos e imágenes hasta la actualización de un catálogo de
productos o la realización de reservas online.
Limitaciones de Joomla
 El diseño de las plantillas de Joomla es bonito pero es bastante simple. Si queremos

un diseño más especial, resulta bastante complicado hacerlo.
 Para funcionalidades avanzadas o muy específicas en las que no existe un plugin ya
programado que podamos aprovechar, no se recomienda, pues la programación
manual es bastante compleja.
 Falta de compatibilidad de plugins con versiones superiores. En caso de encontrar un
plugin que se adapte a lo que necesitamos, es muy posible que no sea compatible para
las versiones más actuales de Joomla. Esto presenta un problema, pues las versiones
antiguas de Joomla son poco seguras.
 Cualquier cambio en la estructura de la plantilla que escojamos implica muchas horas
de desarrollo.
 Complejidad de implementación de sitios web multiidioma. Para estos casos no
recomendamos usar Joomla. Wordpress, por ejemplo, es una mejor solución en estas
situaciones.
 Problemas de accesibilidad al instalarle plugins, Javascript y demás códigos
necesarios para funcionalidades fuera de las funcionalidades básicas.
 Complejo de actualizar.
25
Página
_______________________________________________________________________
2.4.4 Virtuemart
Como ocurre con WooCommerce para Wordpress, Virtuemart es en este caso un

componente que permite convertir un sitio web creado con Joomla en una tienda online. Por lo
tanto, tampoco es una tienda en sí mismo.
Puede descargarse desde aquí: http://virtuemart.net/download
2.4.5 Wix
Wix es un creador de páginas web online para personas que no tienen conocimientos de
programación web. En esta plataforma puedes crear tu sitio web de forma relativamente sencilla
y a muy bajo coste, incluyendo tiendas online. Se accede vía: http://es.wix.com/
Ventajas
 Creación de sitios web de forma bastante intuitiva

 Variedad de plantillas de diseño
 Incluye el servicio de hosting y el dominio (algo que Wordpress.org no ofrece), por
lo que no hay que preocuparse por ello. Todo en un solo proveedor
 Ofrece diferentes tipos de planes. Uno gratuito y otros para diferentes niveles de uso
y servicio, desde 4€ al mes.
 La mayoría de sus plantillas están preparadas para verse bien en el móvil
 Dispone de herramientas para poder crear una tienda online
 Dentro de sus funciones incluyen aspectos SEO, Redes Sociales, Apps, Listas de
suscripción y otros elementos que se necesitan si se quiere tener una presencia online
integral.
 Dan soporte online de buena calidad
 Utilizan HTML5, la última versión de HTML
Limitaciones
 Como en la mayoría de creadores de webs online, estás limitado a lo que te den, tanto
en diseño como en programación, no pudiendo realizar desarrollos específicos. Así
pues, es mucho menos versátil que Joomla o Wordpress y no permite crear sitios web
demasiado personalizados. El resultado es que todos los sitios web parecen similares.
 Al prestar ellos el servicio de hosting, no se dispone de la posibilidad de elegir al
mejor proveedor de alojamiento de acuerdo con nuestras necesidades
 Con el dominio web ocurre algo parecido, ya que en realidad te alquilan su uso pero
no es tuyo y no te lo puedes llevar después a otro proveedor
26
Página
_______________________________________________________________________
2.4.6 1&1 mi web
Seguro que hemos escuchado hablar de este servicio, anunciando incluso en TV. Nos dan
un pequeño editor donde poder “construir” y “editar” nuestro propio sitio web en poco tiempo.
Dado que se trata de plantillas preexistentes donde podemos personalizar algunos de sus
elementos, la creatividad queda muy limitada y puede quedarse corta para lo que buscamos,
además de que técnicamente es difícil implementar scripts y funcionalidades concretas. Además,
el resultado será el de una web hecha en serie (todas con aspecto parecido). En su beneficio, es
una solución económica, aunque no debéis olvidar que con este servicio en realidad se alquila la
página, nunca llega a ser vuestra.+
Podemos acceder vía: http://www.1and1.es/crear-pagina-web
Por lo tanto, es un servicio parecido al de Wix. Hay muchos otros proveedores de webs,
incluso para tiendas online, como Xopie, que evitan tener que programar un sitio y realizar una
inversión inicial, ya que se paga por uso (cuota mensual). Solo os hemos dado la referencia de los
más conocidos.
2.4.7 Prestashop
Es una solución gratuita y de código abierto específica para montar una tienda online
desde cero y con una funcionalidad completa, que va mucho más allá de lo que nos ofrecen
Virtuemart y WooCommerce.
Se puede acceder vía: https://www.prestashop.com/es/
Especialmente recomendada para tiendas online con cientos o miles de productos o que
necesitan una gestión avanzada del negocio (proveedores, facturación, estadísticas…).
Un poco más adelante hacemos una comparativa entre Prestashop y WooCommerce,

nuestras dos plataformas preferidas para montar una tienda online.
2.5 Servidores
¿Qué es un servidor web?
Un servidor web es un programa que se ejecuta continuamente en un ordenador,

manteniéndose a la espera de peticiones de ejecución que le hará un cliente o usuario de Internet.
El servidor web se encarga de contestar a estas peticiones de forma adecuada, entregando como
resultado una página web o información de todo tipo de acuerdo a los comandos solicitados. En
este punto es necesario aclarar lo siguiente: mientras que comúnmente se utiliza la palabra
27
Página
_______________________________________________________________________
servidor para referirnos a un ordenador con un software servidor instalado, en estricto rigor un
servidor es el software que permite la realización de las funciones descritas.
El servidor vendría a ser la "casa" de los sitios que visitamos en Internet. Los sitios se
alojan en ordenadores con servidores instalados, y cuando un usuario los visita son estos los que
proporcionan al usuario la interacción con el sitio en cuestión. Cuando se contrata un plan de
alojamiento web con una empresa, esta última proporciona un servidor al dueño del sitio para
poder alojarlo, disponiendo básicamente de dos opciones: un "servidor dedicado", es decir, un
ordenador dedicado exclusivamente para nosotros (necesario si tenemos aplicaciones de alta
demanda), o un "servidor compartido", es decir, que el mismo servidor (ordenador + software
servidor) se usará para varios clientes, compartiendo los recursos de la máquina. Existen algunas
otras alternativas, pero las comentaremos más adelante.
Funciones de un servidor web
La principal función de un servidor Web es almacenar los archivos de un sitio y

“servirlos” por Internet a petición de los usuarios. Básicamente, un servidor Web es un gran
ordenador que guarda y transmite datos vía Internet. Cuando un usuario entra en una página de
Internet su navegador se comunica con el servidor enviando y recibiendo datos que determinan
qué es lo que se ve en la pantalla. Por eso decimos que los servidores Web están para almacenar y
transmitir datos de un sitio según lo que pida el navegador de un visitante.
Funcionamiento de un servidor web
Cada servidor Web y cada ordenador conectado a Internet tienen asignados una dirección
IP única que los identifica en la red. La dirección IP vendría a ser como los datos del remitente en
una carta postal. Cuando se navega a un sitio Web, se envía un petición desde nuestra dirección
IP hacia la dirección IP del servidor donde está dicho sitio web. El servidor Web responde
enviando los datos a la dirección IP que los pide, en este caso nosotros..
Más del 90% de los sitios en Internet utilizan un servidor alquilado a través de una
empresa de alojamientos.
La capacidad de un servidor depende del tipo de servidor y de sus componentes (memoria,

CPU, disco duro…), como ocurre con cualquier ordenador.
¿Por qué se necesita un servidor web?
Sin los servidores Web, Internet, tal y como lo conocemos, no existiría. Los servidores
son la columna vertebral de Internet. La industria del Hosting web es simplemente la forma de
alquilar estos espacios de memoria y administración de datos. Sin este sistema de alquiler,
Internet sería sólo una pequeña parte de lo que es hoy, ya que sería inasumible para muchísimos
propietarios web comprar un servidor para uso propio y mantenerlo. Pensémoslo de esta manera,
28
Página
_______________________________________________________________________
si no existiera la posibilidad de alquilar un local para poner el negocio y la única forma fuera
comprarlo, muchos emprendedores tendrían que renunciar a ello.
Servidores web Apache
Apache es uno de los mejores servidores web que existen, además de ser el más utilizado.
Apache ha construido una gran reputación entre los servidores web gracias a su gran estabilidad,
confiabilidad y el gran aporte del grupo de voluntarios que planean y desarrollan todo lo relativo
a esta plataforma, desde la documentación hasta el mismo código en sí.
Entre las ventajas que presenta un servidor Apache se encuentran las siguientes:
 Es personalizable. La arquitectura modular de Apache permite construir un servidor

hecho a la medida. Además permite la implementación de los últimos y más nuevos
protocolos.
 En cuanto a la administración, los archivos de configuración de Apache están en
formato ASCII (texto plano), por lo que pueden ser editados tan solo con un editor de
texto. Estos son transferibles, lo que permite la clonación efectiva de un servidor. El
servidor puede ser administrado vía línea de comandos, lo que hace la administración
remota muy conveniente.
 Se trata de un servidor muy eficiente. Mucho esfuerzo se ha puesto en optimizar el
rendimiento del código “C” de Apache. Como resultado, gran rendimiento y un
consumo de recursos del sistema menor en comparación a otros servidores. Además,
Apache funciona con una amplia variedad de sistemas operativos, incluyendo varias
versiones de UNIX, Windows9x/NT, MacOS (Sobre Power PC), y otros.
 El soporte de Apache es dado por “The Apache Group” o “La Fundación Apache”,
una gran cantidad de usuarios muy dedicados a su comunidad, así como compañías
que ofrecen versiones de pago de Apache.
2.6 El dominio web
¿Qué es un Dominio?
Se trata del nombre único que sirve para identificar a un sitio web en Internet.
Un dominio permite a una persona o empresa tener presencia en Internet y que el resto del
mundo pueda acceder a su sitio web.
El dominio se convierte en la marca de una determinada persona o empresa en Internet.

Va asociado con un sitio web y con otros servicios como las direcciones de correo electrónico.
29
Página
_______________________________________________________________________
Los nombres de dominio están formados únicamente por letras y números (de la "a" a la
"z" y del 0 al 9). También es válido el carácter “-“, pero no puede usarse ni al principio ni al final
del nombre. No se pueden usar espacios, tildes, puntos ni otros caracteres especiales como &, %,
$, /, (, ), =,?,¿,", !,.
La longitud máxima del nombre de un dominio (tanto internacional como territorial) es de

63 caracteres (excluyendo el identificativo http://www) y la mínima es de tres caracteres. La de
un dominio de tercer nivel (ahora los estudiamos) como ".es" es de dos caracteres.
Clasificación de los dominios
 Dominios genéricos de nivel superior (gTLD): Son los dominios con extensiones
de ámbito genérico (.com, .net, .org…)
 Dominios genéricos geográficos de nivel superior (ccTLD): Son los dominios con
extensiones asociadas a países (.es, .it, .fr…). Existen más de 200 extensiones
diferentes.
En ambos casos, la extensión sencilla (.com, .es, .net, .fr..) recibe el nombre de
dominio de primer nivel.
El propio nombre del domino más la extensión sencilla recibe el nombre de dominio
de segundo nivel. De esta forma, entenderéis mejor lo siguiente.
 Dominios de tercer nivel: Son los dominios que usan una extensión compuesta, a
partir del dominio de segundo nivel o que usan un subdominio. Por ejemplo, los
dominios que incluyen “.com.es”, “nom.es”, “co.uk” o también los que incluyen algo
delante del dominio, serían dominios de tercer nivel.
Ejemplo 1:
Supongamos que tenemos: www.pruebas.com (o pruebas.com)
.com es el dominio de primer nivel (también conocido como extensión)
pruebas.com es el dominio de segundo nivel (conocido simplemente como dominio)
www es el subdominio, el que tenemos por defecto, por ello no se suele considerar
Ejemplo 2:
Supongamos que tenemos test.pruebas.com

30
Página
_______________________________________________________________________
.com es el dominio de primer nivel
pruebas.com es el dominio de segundo nivel
test.pruebas.com es dominio de tercer nivel, porque estamos usando el subdominio “test”
Ejemplo 3:
pruebas.com.es
.es es el dominio de primer nivel
pruebas.com.es es un dominio de tercer nivel, usa una extensión compuesta (.com.es)
Algunas extensiones de dominio genéricos
 .COM, .NET, .ORG: Son las extensiones de dominios genéricos más utilizadas en
Internet y las primeras en aparecer. Inicialmente orientadas al comercio (.com), redes
(.net) y organizaciones (.org) hoy en día no tienen (al igual que el resto de
extensiones genéricas) ningún requisito para su concesión y pueden solicitarse por
cualquiera.
 Los dominios .BIZ (diminutivo de business, negocio en inglés) están pensados
especialmente para empresas, comercios, negocios y en general cualquier sitio Web
dedicado a estos temas.
 Los dominios .INFO están pensados especialmente para quienes desean alcanzar a un
público amplio al que ofrecer información sobre sí mismos o su empresa u
organización, sus productos, sus ideas, sus noticias y sus novedades.
 .NET: Este dominio está reservado para empresas e instituciones relacionadas con la
gestión de Internet.
 .EDU: Su utilización está limitada a Instituciones Académicas de nivel Colegio
Universitario o superior.
 Dominios genéricos Multilingües: Son dominios .com, .org y .net que llevan eñes,
acentos, u otros caracteres especiales
Autoridades competentes para el registro de dominios
 ICANN (Internet Corporation for Assigned Names and Numbers) es una

organización sin fines de lucro que opera a nivel internacional, responsable de
asignar el espacio de direcciones numéricas de protocolo de Internet (IP),
identificadores de protocolo y de las funciones de gestión [o administración] del
31
Página
_______________________________________________________________________
sistema de nombres de dominio de primer nivel genéricos y de códigos de países.
Esto significa que es el organismo que marca las directrices para los dominios
genéricos (.com, .net, .info,...) y otorga los dominios de segundo nivel a los
organismos correspondientes de cada país. http://www.icann.org
 ESNIC es la autoridad competente para la gestión del registro de dominios de
Internet bajo el código de país. ESNIC, es el Departamento de Red.es encargado del
registro de nombres de dominio bajo “.es” http://www.nic.es.
 EURid es una organización sin ánimo de lucro con sede en Bélgica, seleccionada por
la Comisión Europea para gestionar el nuevo dominio de primer nivel .eu
http://www.eurid.eu.
Las tres organizaciones tienen agentes registradores acreditados para el registro de

dominios. Por ejemplo, http://www.cdmon.com es un agente registrador.
2.7 El alojamiento web
2.7.1 ¿Qué es un hosting o alojamiento web?
Un hosting web es el servicio donde un proveedor alquila un servidor conectado a Internet

y en el que se puede alojar todo tipo de archivos para acceder a ellos vía internet.
Esto sería similar a copiar estos archivos en una carpeta local del ordenador, pero con la
diferencia de que en este caso esa carpeta se encuentra en el servidor del proveedor y su
contenido es, por lo tanto, visible en Internet (siempre y cuando se permita que sea visible).
El uso más típico de un hosting es crear un sitio web, pero también se puede usar el
hosting para permitir la descarga de cualquier otra cosa (documentos PDF, ficheros MP3 de
audio, vídeo, etc.)
Además de los servicios básicos de alojamiento de archivos, un servicio de hosting

incluye otros servicios de valor añadido. Entre ellos:
 Un servidor de correo electrónico para disponer de direcciones de email asociadas al

dominio.
 Alojamiento de aplicaciones web basadas en PHP y bases de datos para crear webs
generalistas, blogs, tiendas online o foros de discusión, por citar algunas de las
aplicaciones más importantes.
 Acceso vía FTP para almacenar y descargar archivos.
 Creación de discos virtuales, es decir, almacenamiento en la nube.
32
Página
_______________________________________________________________________
2.7.2 Tipos de hosting
Hosting gratuito
Los hosting web gratuitos, además del alojamiento de ficheros, suelen incluir las
prestaciones más importantes: acceso vía FTP, correo electrónico y soporte para aplicaciones
PHP. Para que el dominio sea también gratis, suelen ofrecer además gratis un subdominio del
proveedor.
Es decir, por ejemplo, el proveedor de hosting gratuito x10hosting.com asigna

subdominios de “x10.mx”, de modo que al trabajar con ellos tendríamos que elegir un dominio
del tipo miempresa.x10.com.
Ventajas:
 Interesante para probar y aprender

 Permite mantener un entorno de desarrollo similar al real, pero a coste cero.
Desventajas:
 Las opciones gratuitas suelen tener poca capacidad de proceso, poca memoria, y
bastantes limitaciones de los recursos como espacio en disco o la transferencia
mensual
 Nivel de servicio de muy baja calidad (muchas caídas y paradas de mantenimiento).
Y es normal, no pretenden ser opciones para webs reales, sino alojamientos web
compartidos (la modalidad que se explica a continuación) muy “limitados”, como
reclamos para contratar un hosting de pago con el proveedor en cuestión.
 Por las razones anteriores, no son una opción válida para un proyecto real.
Hosting compartido
El hosting compartido es la opción más adecuada para la gran mayoría de los usuarios.
Como sugiere el nombre, en esta modalidad, varios clientes comparten una misma
máquina. Entre ellos no se ven, cada uno tiene su espacio privado y exclusivo, pero la carga que
generan sus webs en el servidor es compartida y, por lo tanto, la carga de trabajo que genere una
web puede influir en el rendimiento de las webs del resto de clientes.
Ventajas:
 Por lo general, se adapta muy bien a las necesidades de uso personal (por ejemplo, un
blog), profesionales generales y pequeños negocios.
33
Página
_______________________________________________________________________
 Opción económica. Con un buen proveedor se pueden conseguir prestaciones
realmente buenas por poco dinero
 Un buen servicio de hosting ya suele ofrecer una disponibilidad muy razonable. Lo
normal es que se garantice una disponibilidad del 99,9%, es decir, que el servidor no
funcione como máximo el 0,1% del tiempo, lo que es lo mismo, unas 9 horas a lo
largo de 1 año.
Desventajas:
 El principal problema del hosting compartido es que abundan los proveedores poco
serios que apuran tanto el número de clientes y recursos asignados que terminan con
servidores completamente infra dimensionados.
 Debido a lo anterior, es frecuente encontrarse con problemas de lentitud, incapacidad
para absorber picos de tráfico altos, inestabilidad (caídas frecuentes y largas), etc.
Hosting VPS (Virtual Private Server)
En la modalidad de hosting VPS el servicio consiste en poner a disposición del cliente un

servidor exclusivo (privado), pero no como máquina física, sino como máquina virtual, con
diferentes niveles de recursos (potencia de procesador, memoria, etc.) entre los cuales el cliente
puede elegir el nivel que necesita para su caso concreto.
Ventajas:
 Es un esquema muy flexible, capaz de adaptarse rápido a la demanda, ya que ante

mayores necesidades de recursos el proveedor puede “abrir el grifo” de recursos
inmediato (implica lógicamente un cambio de tarifa)
 Al no compartirse el servidor, no se puede ver comprometido por picos de actividad
de otros clientes.
 Es una solución más profesional puesto que viene unida a un mayor control del
servidor de hosting o a la posibilidad de poder crear varios espacios independientes
de hosting que funcionan como varias cuentas de hosting compartido dentro del
servidor VPS.
 Con un único servicio se pueden alojar múltiples sitios web.
Desventajas:
 Aumento sensible del precio respecto al hosting compartido.

 Algo que la mayoría de usuarios no saben es que las prestaciones de los VPS básicos,
a pesar de sus tarifas superiores, tienen unas prestaciones inferiores que las de un
hosting compartido. Es decir, si bien hay una garantía de que no es un servicio
compartido, la máquina que ponen a nuestra disposición tienen peores características
34
Página
_______________________________________________________________________
que la que nos dan en un hosting compartido. Si subimos de precio, entonces ya sí es
posible encontrar máquinas similares pero con la ventaja de la exclusividad de uso.
 Mayor complejidad técnica de administración del servidor, habitualmente sólo al
alcance de personas con buenos conocimientos técnicos en la materia. El objetivo de
un servicio VPS no consiste únicamente en mayores prestaciones y garantía de
servicio, sino que una de las ventajas más importantes es el mayor control sobre el
servidor.
Cloud hosting
El cloud hosting (hosting en la nube) es una opción relativamente reciente y muy

interesante.
Se trata de una evolución del hosting tradicional que, usando tecnologías propias de la
nube, reparte el servicio prestado entre varias máquinas físicas. En este modelo es también muy
típica la tarificación por consumo (potencia de procesamiento consumida, etc.).
Ventajas:
 Las ventajas propias del concepto de cloud hosting: sobre todo, seguridad
(disponibilidad por redundancia) y una gran flexibilidad para crecer fácilmente ante
una mayor demanda (escalabilidad)
 Existe una oferta con muy buena relación calidad/precio.
 Debido a la flexibilidad inherente del concepto es un hosting capaz de adaptarse de
manera muy rápida y sencilla a las necesidades cambiantes del usuario.
Desventajas:
 Las opciones más económicas suelen tener un precio más elevado que las opciones
de hosting compartido.
2.7.3 Criterios de selección del hosting
A la hora de seleccionar vuestro hosting lo primero que tenéis que hacer es ver qué tipo de
web vais a tener y el uso que le vais a dar.
Por ejemplo:
 Sitio de pruebas o blog para iniciarse  hosting gratuito.

 Blog profesional o consolidado, pequeño sitio profesional/corporativo o tienda con
poco tráfico  hosting compartido.
35
Página
_______________________________________________________________________
 Portal web complejo/tienda con decenas o cientos de miles de visitas mensuales o
aplicaciones web que deban dar un nivel muy alto de servicio hosting VPS.
Por norma general un hosting compartido para pequeños sitios webs es más que
suficiente. Y soluciones como VPS o Cloud se utilizarían para plataformas más complejas en las
que se prevean muchos usuarios concurrentes.
Otro criterio muy importante para escoger un hosting es el país objetivo. Se recomienda
elegir un servidor que esté físicamente en el país donde vayamos a dar servicio a nuestros
usuarios. Con ello se minimiza el tiempo de acceso y también es un factor que contribuye al
posicionamiento web.
36
Página
_______________________________________________________________________
3 Tipos de web
En este capítulo vamos a clasificar los sitios web bajo diferentes puntos de vista.
3.1 Según su tecnología

Esta primera clasificación tiene en cuenta la tecnología utilizada por la web. Existen
multitud de tecnologías, pero las podemos agrupar en estos dos grandes grupos, que nos van a
servir para esta primera forma de organizarlas:
 Tecnologías estáticas
 Tecnologías dinámicas
3.1.1 Tecnologías estáticas
Tal y como el propio nombre indica, estas tecnologías permiten construir webs estáticas,
es decir, webs cuyo contenido permanece estático a lo largo del tiempo. Estas webs por tanto, una
vez queden construidas no suelen ser modificadas ni incluyen contenidos cambiantes o
dinámicos.
La principal tecnología usada en este tipo de páginas es el lenguaje HTML+CSS. Lo que

convierte a estas tecnologías en estáticas es la precisamente la ausencia de otras tecnologías
adicionales.
Veamos un sencillo ejemplo:
<html>
<body>
<h1>Este es mi blog</h1>
<p>Bienvenidos a mi blog!</p>
</body>
</html>
Este sencillo código HTML define una página web, que en esencia es totalmente estática
pues una vez redactada, mientras no modifiquemos ese código, permanecerá así para siempre.
Alguien podría plantear que este código es modificable, y que podríamos añadir más
textos y elementos, pero para ello tendríamos efectivamente que modificar la programación del
37
Página
_______________________________________________________________________
sitio web. Añadiendo nuevas etiquetas y textos al HTML que ya tenemos. Pero, tras hacer esto,
volveríamos a tener una web estática.
3.1.2 Tecnologías dinámicas
Son aquéllas que permiten alterar los elementos estáticos a lo largo del tiempo sin
necesidad de modificar la programación de las páginas.
Por ejemplo, mediante Javascript, que aun siendo un lenguaje que se ejecuta en el propio
navegador, tiene la capacidad de modificar, añadir y eliminar elementos al código HTML
atendiendo a ciertos eventos o sucesos. Por ejemplo, podríamos tener un botón que al ser pulsado
eliminara un párrafo de nuestra página. El código original permanecerá inalterado, pero el
navegador, tras haber cargado el código fuente, modificará su copia en memoria con las acciones
que el Javascript dicte.
Otro tipo de tecnologías dinámicas son aquellas que se ejecutan directamente en el propio
servidor y cuyo resultado será el HTML que veremos en nuestro navegador. Son las tecnologías
conocidas como lenguajes del lado del servidor mencionados anteriormente, como PHP, ASP,
Python, Ruby...
Veamos un sencillo ejemplo con código PHP:
<html>
<body>
<h1>Hola!</h1>
<p>Hoy es <?php echo date(“d/m/Y”) ?></p>
</body>
</html>
Este código PHP será ejecutado en el servidor cada vez que alguien acceda al sitio web, y
cada día el texto que se muestre será diferente, pues nos mostrará la fecha del día en formato
día/mes/año. Así por ejemplo si se accediera el día 1 de enero del 2015 el código que el
navegador recibiría sería:
<html>
<body>
<h1>Hola!</h1>
38
Página
_______________________________________________________________________
<p>Hoy es 01/01/2015</p>
</body>
</html>
Este ejemplo es muy sencillo, pero la potencia de estos lenguajes nos permite realizar
operaciones mucho más avanzadas y complejas, generando por tanto contenidos variados en
función de múltiples variables.
Por ejemplo, podemos programar una consulta a una base de datos para obtener un listado
de elementos y generar el HTML correspondiente a ese listado.
O podemos ir mucho más allá y pensar en una web que nos permita gestionar los
contenidos que serán públicos en nuestro sitio web, programar publicaciones en base a fechas,
etc. Esto que puede parecer complejo es en realidad lo que hacen los conocidos sistemas de
gestión de contenidos o CMS (Content Management System).
3.2 Según su finalidad

Otra forma de clasificar las webs es en base a su finalidad o propósito. Es un error pensar
que una misma web puede servir todos los objetivos o que pueda ser capaz de llegar a todos los
públicos. Toda web debe tener un propósito y permitirnos llegar a un objetivo, sea éste darnos a
conocer, conseguir ventas, llamadas o servir de catálogo de nuestros productos o servicios. Así,
según la funcionalidad de una web, podemos clasificarlas en:
 Publicitaria
 Corporativa
 Venta online
 Social
 Otras
3.2.1 Web publicitaria
Las webs publicitarias son aquéllas que dan a conocer un servicio o producto y se limitan
a darle promoción enumerando sus bondades y ventajas con respecto a otros.
De acuerdo a si promocionan uno o más productos/servicios, podemos subclasificarlas en:
 Landing page
 Microsite
39
Página
_______________________________________________________________________
3.2.1.1 Landing page
La traducción de este término es “página de aterrizaje”, y nos da una clara idea de la

función de la misma: servir de punto de entrada. Pero, ¿desde dónde?
La vía de entrada más común y habitual es algún buscador (como Google) donde alguien
interesado por algún producto o servicio ha efectuado una búsqueda.
El objetivo o función principal de este tipo de web es conseguir captar la atención del
usuario y conseguir una petición de contacto del mismo, a través de formulario o teléfono.
Veamos un ejemplo sencillo:
Alguien que hace la búsqueda “cambio de ruedas a domicilio en granada” está interesado
en que acudan a cambiarle los neumáticos a casa y además está buscando una empresa en
40
Página
_______________________________________________________________________
Granada. ¿Qué espera encontrar un usuario que ha hecho esta búsqueda al “aterrizar” en una
web?
Espera encontrar un teléfono al que llamar u otra forma de contacto, y algo de

información que le asegure que tiene delante a una empresa seria y responsable que le dé
confianza. Además, espera corroborar de un vistazo que la empresa podrá darle el servicio que
está buscando. Por ejemplo, si hace clic en el primer resultado del buscador (un anuncio de
pago)…
Llega a un sitio web donde promocionan el cambio de neumáticos, y aunque hay un

pequeño texto que indica “Entrega a domicilio”, no queda muy claro si realizan también el
montaje. Además, viendo que usan un teléfono 902, no dan sensación de cercanía. Es posible que
esta página no cumpla su función para esta búsqueda y el usuario continúe navegando,
probablemente pasando al siguiente resultado de pago y orgánico. Se centra demasiado en elegir
las ruedas pero no en el servicio en sí.
Un poco más abajo podemos ver en la zona orgánica otra página:

41
Página
_______________________________________________________________________
Bueno, tras una inspección visual rápida y prácticamente sin necesidad de leer, parece que
en este caso ha llegado al sitio correcto. Además, hay un teléfono local y también se puede poner
en contacto mediante formulario. Esta Landing Page podría cumplir muy bien su función.
Una web de este tipo no necesita ser dinámica, es una web muy sencilla y una vez creada
es posible que no necesitemos modificar sus contenidos en mucho tiempo, como mucho añadir
alguna oferta puntual o cambiar algún reclamo puntualmente. Es por esto, que lo habitual en
páginas de tipo Landing Page sea utilizar tecnologías estáticas, si bien en el caso de haber un
formulario de contacto, es requisito imprescindible usar un elemento dinámico al menos para el
envío del mismo, ya que esta funcionalidad no es soportada directamente por HTML.
3.2.1.2 Microsites
La traducción de este término es “sitio web pequeño” y nos da a entender que se trata de
un sitio web con muy pocas secciones o apartados. Un Microsite es una página publicitaria donde
se anuncian o promocionan uno o varios productos/servicios, y donde el objetivo es conseguir
también solicitudes.
42
Página
_______________________________________________________________________
Puede ser que el producto sea algo más complejo de vender y queramos dar más
información de la que daríamos en una sola página, o simplemente que queremos promocionar
varios servicios relacionados, pero cada uno en una página diferente dentro del mismo sitio. En
este segundo caso, sería como tener varias páginas de aterrizaje. Tanto a nivel de posicionamiento
SEO como SEM es una buena estrategia porque cada página solo hablará de un producto o
servicio y podremos optimizar el anuncio y página específicamente, siendo además relevante para
la persona que haga clic en el resultado.
Veamos un ejemplo de este tipo de web.
43
Página
_______________________________________________________________________
44
Página
_______________________________________________________________________
En este ejemplo de microsite podemos ver todos los elementos que hemos comentado en
una landing page, con mensajes descriptivos y claros, un teléfono de contacto muy destacado, y
una vía alternativa de contacto a través de un formulario.
Además, en el pie de página nos encontramos con un menú de enlaces (señalado en rojo)
que nos llevará a las otras secciones del sitio web, otros servicios que ofrece la empresa, cada uno
en una página distinta.
Nota aclaratoria: Landing page significa página de aterrizaje, es decir, la página concreta
dentro de un sitio web que usamos como destino de alguna campaña, que no tiene por qué ser
la home.
Dicho esto, el concepto de landing page en cuanto a tipo de web se refiere a un sitio web de
una sola página (una sola URL) orientado a la conversión (generalmente un formulario o una
llamada). Como solo tiene una página (excluyendo el aviso legal y páginas que realmente no
aportan contenido al usuario) realmente solo suele está enfocada a un producto o servicio
concreto con un objetivo muy claro de generar una llamada a la acción.
La diferencia respecto al microsite es que el microsite suele tener más de una página, bien
sea porque se quiere complementar la información en varias páginas o porque se quieren
publicitar varios productos o servicios, cada una en una página diferente (pero todo dentro del
mismo sitio web).
3.2.1.3 Webs corporativas
Las webs corporativas son aquellas cuya función es dar presencia en Internet a una
empresa, presentar todos sus servicios, exponer trabajos realizados, la ubicación de sus oficinas,
su equipo y otra información que pueda ser de interés para la empresa.
En este caso, no estamos ante una web de captación publicitaria sino que buscamos
proyectar nuestra imagen e información corporativa en internet.
Las secciones más habituales en este tipo de webs son:
 Portada, donde procuramos mostrar en general todo lo que la empresa puede aportar y
enlaza con el resto de secciones.
 Quiénes somos o La Empresa, donde se da información sobre la historia de la
empresa, el equipo, organización, etc.
45
Página
_______________________________________________________________________
 Servicios. Una o más páginas dedicadas a exponer cada uno de los productos o
servicios que ofrece la empresa.
 Portfolio, donde se da una muestra de los trabajos realizados
 Clientes, donde se da una muestra de clientes con los que se ha trabajado
 Contacto, donde se indica la localización de la empresa, a veces un mapa y
generalmente un formulario online para ponerse en contacto online.
También es común incluir algún apartado con noticias o novedades e incluso un blog donde
se vaya generando contenido útil para los usuarios/clientes.
Las webs corporativas pueden ser estáticas o dinámicas. En el caso de webs estáticas,
seguramente cuando se crearon se pensó que no iban a tener apenas actualizaciones ni incorporar
elementos dinámicos (como una sección de noticias o un blog). En este caso, cualquier cambio lo
deberá realizar el programador o la empresa que realizó la web. En el caso de ser dinámicas,
suele utilizarse alguna plataforma CMS autogestionable, por lo que cualquier empleado con un
mínimo de formación en la plataforma podrá modificar directamente la mayor parte del contenido
y además en cualquier momento.
Veamos algunos ejemplos de sitios web corporativos.
46
Página
_______________________________________________________________________
47
Página
_______________________________________________________________________
48
Página
_______________________________________________________________________
3.2.2 Webs para la venta online
Como su nombre indica, su función principal es la venta a través de la propia web.
Los posibles elementos que podemos encontrarnos en este tipo de webs son:
 Catálogo de productos
○ Organizado por categorías

○ A menudo con filtros para facilitar la selección del producto a comprar
○ Buscador de productos
○ Ficha detalle de cada producto con imágenes del mismo
○ Filtros por fabricantes o marcas
 Rankings
○ Productos más vendidos

○ Novedades
○ Sección de “otros clientes también compraron”
49
Página
_______________________________________________________________________
○ Productos mejor valorados
○ Productos más comentados
 Información general
○ Acerca de la empresa
○ Instrucciones sobre cómo comprar
○ Políticas de devolución
○ Formas de envío y pago
○ Datos de contacto
○ Información legal y política de privacidad
El funcionamiento en estas webs debería ser “sencillo”. Buscamos y seleccionamos los

productos que queremos comprar o servicios que queremos contratar y los añadimos a una cesta o
carrito. También es posible que sean de compra única, en cuyo caso no es necesario que haya un
carrito. Después, se rellena uno o más formularios con nuestros datos, se escogen opciones de
envío y pago y se confirma el pedido, compra o contratación. En algunos casos puede ser
obligatorio registrarse.
En cuanto a las formas de pago, las veremos más en detalle en el siguiente bloque,
dedicado exclusivamente al comercio electrónico, de modo que solo las mencionamos:
 Pago por transferencia bancaria

 Pago contra reembolso
 Paypal u otras plataformas de pago virtual
 Tarjeta de débito y crédito, dejando los datos al propio comercio
 Tarjeta de débito y crédito, pagando directamente en la plataforma bancaria
colaboradora del comercio.
Veamos un par de ejemplos de sitios web de venta online.

50
Página
_______________________________________________________________________
51
Página
_______________________________________________________________________
52
Página
_______________________________________________________________________
3.2.3 Sitios sociales (comunidades)
Dentro de este grupo de páginas podemos englobar los blogs, foros y portales orientados a
convertirse en un punto de reunión de los usuarios, por supuesto incluyendo a todas las
plataformas sociales.
La característica principal es que son sitios muy dinámicos, orientados a generar

continuamente nuevo contenido (generalmente muy categorizado) y con gran interacción por
parte de los usuarios. Pueden disponer en muchos casos de un acceso personal mediante usuario y
contraseña para poder participar, si bien el acceso al contenido suele ser público, excepto en el
caso de algunas redes sociales, donde casi todo el contenido es privado.
Por ejemplo:
53
Página
_______________________________________________________________________
3.2.4 Sitios de noticias
Aquí podríamos englobar a los portales de los medios de comunicación así como otros
portales específicos de noticias. Por ejemplo:
http://www.elmundo.es/
http://www.expansion.com/
http://www.lasexta.com/
http://www.ideal.es/
3.2.5 Otro tipo de webs
Existen más tipos de webs, de funcionalidad muy diversa, o que resultan de un mix de los
anteriores y donde no está siempre claro cuál es su funcionalidad principal o que pueden tener
más de un objetivo. En general, este tipo de sitios web se salen de los estándares y suelen
54
Página
_______________________________________________________________________
realizarse “a medida”. Sitios web para descargar archivos, para visualizar vídeos, comparadores
de precios, hoteles o seguros, portales inmobiliarios…
Para aprovechar mejor este bloque, os sugerimos que la próxima vez que naveguéis por
internet y dispongáis de tiempo, analicéis las diferentes páginas e intentéis clasificarlas. Veréis
que es bastante sencillo.
3.2.6 Forma sencilla de averiguar con qué está hecha una página
Hoy en día existen herramientas online para casi todo. Os vamos a enseñar un añadido
para vuestro navegador con el que podréis ver fácilmente las tecnologías que se han empleado
para cualquier página e incluso si tienen algún sistema de seguimiento o publicidad, dentro de lo
que la propia herramienta puede detectar.
Para Firefox: https://addons.mozilla.org/es/firefox/addon/wappalyzer/
Para Chrome:
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbll
amg?hl=es
Al cargar cualquier página si pulsáis sobre el icono os indicará esta información.
55
Página
_______________________________________________________________________
3.3 Plataformas recomendadas
Ahora que ya conocemos los diferentes tipos de webs que existen, sus funciones y
objetivos, estamos preparados para para analizar las necesidades de cualquier persona o empresa
y recomendarle el tipo de web que mejor se ajusta a sus requerimientos y objetivos.
56
Página
_______________________________________________________________________
La siguiente cuestión a tratar es cómo afrontar esa nueva web, si usar una plataforma de
las que hemos presentado o es mejor un desarrollo a medida. Es lo que vamos a tratar a
continuación.
3.3.1 Para landing pages y microsites
En las landing page y los microsites, donde el objetivo principal es captar la atención de
los usuarios de un rápido vistazo y tratar de que efectúen algún tipo de acción como llamar por
teléfono, enviar un formulario de contacto, descargar un PDF, etc., el diseño y las llamadas a la
acción son los elementos más importantes.
En estos casos resulta prioritario invertir en diseño: que sea atractivo, llamativo, directo,
claro y efectivo.
Podemos plantearnos varias alternativas. Si la web es para una campaña puntual con una
duración determinada y no necesitamos actualizarla, lo recomendable es un diseño estático (salvo
el formulario de contacto, si existe) a la medida. Resulta más económico y el diseñador tendrá
mucha más libertad de acción, si atenerse a plantillas concretas, lo que en definitiva mejorará la
conversión.
En cambio, si nuestras necesidades determinan que la página debe actualizarse

periódicamente, podemos decidirnos por una plataforma autogestionable de las comentadas
anteriormente.
En resumen, en función de nuestros requerimientos y por orden de preferencia:
 Web estática a medida

 Wordpress.org
 Wix, 1&1 mi web o webs de plantilla similares
 Joomla
 Wordpress.com
3.3.2 Para webs corporativas
Recordemos que en este caso el objetivo es dar presencia en internet a nuestra empresa,
proyectando una buena imagen y generando confianza en la marca.
Para este tipo de webs la mejor solución suele ser usar plataformas autogestionables, pues
es recomendable revisar y actualizar el contenido de forma periódica.
57
Página
_______________________________________________________________________
Wordpress.org y Joomla son dos plataformas perfectamente válidas para construir nuestro
sitio web corporativo. No obstante, si tenemos pensado incorporar un blog, entonces claramente
nos decantamos por Wordpress.org, pues nos servirá mucho mejor para ambos propósitos.
Otras plataformas de gestión de contenidos con las que os podéis encontrar son:
● Drupal
● Ghost
● Concrete5
● Moodle (muy utilizada para formación)
3.3.3 Para webs de venta online
Para el caso de venta de productos online las plataformas sobre las que construir la tienda
deben ajustarse bien a las características de la tienda y la naturaleza de los productos.
Por ejemplo, los requisitos serán diferentes si nuestro objetivo es vender una gama de 5
productos que si tenemos miles de productos y además queremos implementar el sitio en varios
idiomas. En este caso, las plataformas más extendidas para la creación de tiendas online son:
● Prestashop
● Woocommerce
● Virtuemart
● Magento
● Xopie
● OpenCart
● Shopify
● Zen Cart
Por sus prestaciones, posibilidades e historial, nuestras preferencias para una tienda online
se centran en Prestashop y WooCommerce, mencionadas anteriormente, y que vamos a ver más
en profundidad. Una tercera posibilidad, que no vamos a analizar por su compleijidad, sería
Magento, que también tiene su público.
Prestashop es una plataforma más antigua (aproximadamente de 2007), que se ha

consolidado como una de las mejores opciones a día de hoy. En cambio, WooCommerce es una
plataforma algo más reciente nueva (aprox. 2011), pero que está pisando fuerte en la actualidad, y
de hecho, desde junio de 2015, tiene un mayor volumen de búsquedas que Prestashop. Os
mostramos a continuación una gráfica con la evolución del volumen de búsquedas que han tenido
ambas plataformas.
58
Página
_______________________________________________________________________
Para ver cuál encaja mejor en nuestro negocio online, conviene conocerlas y probarlas
para valorar adecuadamente sus funciones. Para ello hay versiones online funcionales con las que
poder “trastear”. Elegir la plataforma correcta de inicio es una decisión delicada y estratégica, ya
que cualquier cambio posterior será muy complejo, costoso y seguro que nos dará muchos
quebraderos de cabeza.
También debemos tener claro que se trata de soluciones con una funcionalidad muy
específica, y que aunque existen plugins y extensiones para ampliar sus funcionalidades siempre
existe la posibilidad de que nuestras necesidades no encajen al 100% con lo que nos dan esta
plataformas. En este caso habrá que valorar si merece la pena un desarrollo a medida desde cero.
Para nuestro análisis comparativo de ambas vamos a tener en cuenta diferentes aspectos:
el gestor de contenidos, la gestión del catálogo de productos, packs y combinaciones,
proveedores, stock y almacenes, estadísticas, multi-idioma, formas de envío y pago, facturación y
documentación.
3.3.3.1 El gestor de contenidos
WooCommerce no es una plataforma independiente, sino que es un añadido que se instala

sobre WordPress.org. Por lo tanto, en el apartado de gestión de contenidos es claramente superior
59
Página
_______________________________________________________________________
a Prestashop, que si bien dispone de un apartado CMS para sus páginas de contenido informativo,
sus opciones son más limitadas.
3.3.3.2 La gestión del catálogo de productos
En este apartado, ambas plataformas ofrecen una interfaz de gestión bastante cómoda para
la gestión de nuestros productos, datos e imágenes. En ambas existe la posibilidad de realizar una
carga masiva de productos a través de un fichero Excel.
3.3.3.3 Packs y combinaciones
Volvemos a tener un empate en este apartado. Ambas plataformas permiten la creación de

packs (agrupación de varios productos), así como la creación de combinaciones (por ejemplo,
productos con variantes de tallas y colores)
3.3.3.4 Gestión de proveedores
Prestashop viene bien preparada para la gestión de proveedores. En WooCommerce no

existe esta opción.
3.3.3.5 Gestión del stock y los almacenes
Ambas plataformas permiten llevar un control del stock de manera sencilla, de forma que
los productos sólo se muestren en la web si se dispone de unidades. Esta funcionalidad es
opcional y puede desactivarse para simular un stock infinito si no se tienen problemas de stock o
simplemente no se quiere gestionar. Prestashop dispone además de una opción de control de
stock más avanzado, en el que se pueden definir varios almacenes, recibir avisos si el stock de
algún producto se reduce, y muchas más opciones.
60
Página
_______________________________________________________________________
3.3.3.6 Estadísticas
WooCommerce ofrece estadísticas básicas de ventas, evolución de las mismas, productos

más vendidos, ventas por mes y alguna opción más. Prestashop en este apartado es más completo
y dispone de más estadísticas y opciones para extraer información tanto de los pedidos realizados
como de las cestas de compra que se quedaron a medias (para tratar de rescatarlas).
3.3.3.7 Multi-idioma
Ambas plataformas están bien preparadas para vender en múltiples idiomas y con
diferentes monedas.
3.3.3.8 Formas de envío y pago
En este punto también tenemos un empate. Las formas de envío más habituales basadas en
peso y destino son posibles de configurar en ambas plataformas. Y con las formas de pago
también sucede de igual manera, disponiendo ambas de las opciones más habituales:
transferencia, pago por TPV Redsys, pago por Paypal y contra reembolso. Algunas de estas
opciones requieren de la instalación de algún plugin adicional, pero al fin y al cabo todas están
disponibles.
3.3.3.9 Facturación
Prestashop incluye esta opción de serie. En WooCommerce, por el contrario, necesitamos

instalar un plugin adicional para disponer de esta funcionalidad. Pero incluso con el plugin, no
tendremos tantas posibilidades. Por ello, si la facturación queremos llevarla con la plataforma, es
importante asegurarnos de que podremos hacerlo de la manera deseada.
3.3.3.10 Documentación
Ambas plataformas están muy consolidadas y tienen una gran comunidad de usuarios
detrás. Por lo que no es difícil encontrar por internet toda la documentación, manuales, y
respuestas a las preguntas frecuentes.
61
Página
_______________________________________________________________________
3.3.3.11 Conclusión
Prestashop se ha diseñado desde cero para ser una tienda online, y eso se nota. Dispone
de muchas posibilidades y permite una gestión avanzada en multitud de aspectos. Permite además
incorporar múltiples módulos adicionales que nos ayuden con cuestiones específicas, aunque eso
sí, la mayoría son de pago y no precisamente baratos.
Por el contrario, su amplia cantidad de funcionalidades puede dificultar un poco el

aprendizaje y manejo completo de la plataforma, y es posible que nunca lleguemos a usar todas
sus funcionalidades.
WooCommerce es una solución muy interesante para tiendas pequeñas y con menores
necesidades. Dispone de todo lo necesario, y no tiene nada extra que pueda ser superfluo. Al
tener menos opciones, su facilidad de gestión es su punto fuerte, y más si estamos ya
acostumbrados a gestionar algún blog con Wordpress. Otro punto a favor es que al estar basado
en esta plataforma hay bastante libertad a la hora de personalizar el diseño.
Por último os presentamos un ejemplo de cada una de estas dos plataformas.
Ejemplo 1. Tienda online basada con WooCommerce sobre Wordpress:
https://jienoliva.com
62
Página
_______________________________________________________________________
63
Página
_______________________________________________________________________
Ejemplo 2. Tienda online basada en Prestashop:
https://www.chuchesonline.com
Con esta información tenéis más información a la hora de elegir el tipo de web y la
plataforma para vuestras necesidades.
64
Página
_______________________________________________________________________
4 Navegación y usabilidad web
En este bloque vamos a tratar la usabilidad web, un aspecto fundamental a tener en cuenta
en cualquier sitio web.
4.1 ¿Qué es y por qué es tan importante?
4.1.1 Antecedentes
Debemos tener cuidado, ya que se suele confundir la usabilidad con aspectos visuales,
gráficos o estilísticos cuando en realidad aplicar una buena usabilidad en nuestro portal significa
ir mucho más allá. Usabilidad en términos generales significa:
 Una correcta arquitectura de contenidos.

 Facilitar el acceso al contenido, ofreciendo un menú contextual fácil de manejar,
visible y conciso.
 Ofrecer una buena lectura de dicho contenido.
 Ser gráficamente inteligentes. Omitir recursos gráficos que no aportan nada al
usuario no significa crear una web “pobre”. Significa crear una web eficiente
 Usar los estándares web. Nos asegura llegar a todos los usuarios y conseguir una
correcta difusión sin problemas relacionados con aspectos técnicos del sitio.
 Ser rápidos y eficientes. Técnicamente nuestra web debe estar optimizada para una
carga rápida. Esto significa que el contenido, imágenes y otros elementos deben
cargarse antes de que el usuario se pregunte “¿Por qué estoy en esta web?”
 Ser agradables. La experiencia final de usuario debe ser agradable, satisfactoria. De
esta manera tendremos más posibilidades de que nuestros usuarios vuelvan.
 Ser visualmente atractivos. La apariencia sí importa… al menos un poco. Nuestra
imagen es nuestra tarjeta de presentación. Por eso debemos mostrar nuestro contenido
de la forma más atractiva y visual posible.
Y, ¿por qué debemos tener en cuenta estas premisas? Porque…
“En la nueva economía web, la experiencia del usuario es la marca” Rubin, 2002
“77% de los usuarios son leales a los sitios web por su facilidad de uso” Forrester Research
“Solo el 22% regresa porque el sitio es de su marca favorita” Rubin, 2002

65
Página
_______________________________________________________________________
4.1.2 Relación entre usabilidad y experiencia de usuario
La usabilidad y la experiencia de usuario están íntimamente relacionadas, es decir, los

términos, reglas y premisas que constituyen la usabilidad están hechos únicamente para el usuario
y su experiencia mientras navega por un determinado portal.
Para ello, vamos a visualizar 3 problemas de usabilidad comunes, poniéndonos en el lugar

del usuario.
A. El Caos. Ejemplo: http://www.lingscars.com/
Se trata de un portal de venta de coches de segunda mano del Reino Unido.
Con este ejemplo resumimos todos los aspectos negativos que provocan una malísima
usabilidad. Cientos de links, numerosos reclamos publicitarios confusos, colores y recursos
gráficos desconcertantes y demasiada información.
66
Página
_______________________________________________________________________
B. Saturación de contenidos. Ejemplo: http://www.bikezona.com/home
En este portal, de información sobre ciclismo, vemos otro mal ejemplo de usabilidad. Se
ha hecho un intento de mejorar la navegación entre sus contenidos (Fijando el menú en la parte
superior de forma fija), pero aun así la forma que tiene de mostrar sus diferentes artículos es
confusa. Dispone secciones de gran importancia como es el caso de “Tiendas” y “Distribuidores”
que no tienen la presencia que necesitan. Todo está demasiado escondido.
67
Página
_______________________________________________________________________
C. Navegación compleja y poco intuitiva. Ejemplo: http://www.zara.com/
Este ejemplo puede resultar controvertido. La tienda online de Zara apuesta por un estilo
minimalista, donde las imágenes son las verdaderas protagonistas. Si bien en nuestra opinión es
muy visual y ello consigue dotar a la web de cierto estilo (desde la misma portada), nos resulta
difícil acceder a un producto en concreto en un número de clics razonable, con un menú muy
reducido en tamaño y escueto. Necesitamos como mínimo realizar 3 clics para ver los detalles de
un producto. Una vez que hemos llegado al producto, el proceso de compra sí que nos parece
correcto.
4.1.3 Evolución del término usabilidad
Usabilidad también es actualidad. Los principios que rigen la usabilidad, como recetas de
buenas acciones, van variando con el tiempo y se adaptan a la forma de navegar de los usuarios,
que por otra parte cada vez son más inteligentes y exigentes.
Vamos a analizar el caso de una gran empresa como Facebook.

68
Página
_______________________________________________________________________
2004
2004, comienzos de la famosa red social. Pocos recursos significan soluciones rápidas y
escuetas. Un diseño pobre y poco atractivo definen a este Facebook del pasado.
69
Página
_______________________________________________________________________
2006
Facebook pasa a llamarse “Facebook” y no “The Facebook”. Pero el cambio más drástico
está en su estructura de contenidos. Se define una “ficha de usuario”, mediante la cual se puede
acceder a toda la información propia y visualizar de forma rápida la lista de amigos. Por supuesto,
ya había publicidad. Sigue siendo un diseño algo pobre, muy acorde con la época, pero es notorio
el esfuerzo por acercar los contenidos al usuario de forma rápida y amigable.
70
Página
_______________________________________________________________________
2007
En 2007 Facebook opta por un enfoque más visual. Su clásica organización en dos
columnas se perfecciona para dar más importancia a las imágenes y se introducen iconos para
personalizar las diferentes acciones del portal.
71
Página
_______________________________________________________________________
2008
2008 es un año importante para Facebook. Se introduce el chat y el famoso muro. Esto
obliga a diseñar diferentes niveles de navegación. Uno más de la aplicación en general (situado
en la franja azul, en la cabecera de la web) y otro dedicado al usuario, donde podrá ver su muro,
su información, fotos y aplicaciones. El muro desencadena una nueva forma de comunicarse, con
nuevas problemáticas de usabilidad. 72
Página
_______________________________________________________________________
2009
2009 es el año del “Me gusta”. Gráficamente no existen muchos cambios, pero sí de
funcionalidad. La red social se empieza a convertir en una “caja” de ambiciosas expectativas,
pero, ¿podrá Facebook poner en orden sus ideas y ofrecer al usuario una experiencia
satisfactoria?
73
Página
_______________________________________________________________________
2010
Facebook entiende la problemática a la que se enfrenta. Disponer de muchas

funcionalidades no significa que el éxito esté asegurado. Tantas opciones confunden a los
usuarios, que ven muchas cosas en pantalla pero no entienden qué hacer, ni cómo utilizarlas. Es
aquí donde Facebook empieza a experimentar con su muro y su ficha de usuario, cambia el menú
de usuario de posición, que se encuentra en la columna de la izquierda y se presenta de una forma
mucho más disimulada ¿Habrá acertado?
74
Página
_______________________________________________________________________
2011
Quizás sea esta versión, la del 2011, la más querida por los usuarios. Facebook lanza
como novedad la “Biografía” y optimiza el muro con alicientes como mostrar la actividad de los
amigos en tiempo real. Pocas novedades y los mismos problemas de usabilidad, pero al menos, en
el aspecto visual, el sitio es más “limpio” y ordenado.
75
Página
_______________________________________________________________________
2012
Y entonces llegó el “Timeline”. Éste si es un cambio importante en la usabilidad. Su

principal objetivo es mostrar al usuario su actividad de forma más visual y atractiva, como si
fueran recortes de un álbum. ¿Consiguió su objetivo? Los usuarios opinan que no. Pese a ser una
de las principales novedades de Facebook no caló entre sus usuarios, ya que les parecía una
estructura difícil de seguir y que no era coherente con el resto del portal.
76
Página
_______________________________________________________________________
2013/2014/2015
Y entonces volvimos al formato de una sola columna. Facebook aprendió de la

experiencia del 2011 y diseñó una estructura más homogénea, más limpia. La biografía volvió a
ser de una sola columna, pero dejaron esa sensación de ser un portal más visual y atractivo al
mantener la cabecera con una gran imagen del usuario como protagonista. Desde entonces los
cambios se han centrado en cuestiones más de recopilación de datos, privacidad y
geolocalización.
Con este repaso a la evolución de Facebook os hemos querido mostrar que la usabilidad
tiene un componente muy alto de “prueba” y “error”. Se trata de crear un sitio eficaz y atractivo
para el usuario, siendo necesario experimentar y, sobre todo, aprender de nuestros errores.
77
Página
_______________________________________________________________________
4.1.4 Aspectos técnicos de la usabilidad
Cuando hablamos de aspectos técnicos, nos estamos refiriendo a la “accesibilidad”. Esto

no es otra cosa que intentar que todos hablemos el mismo idioma y nos podamos entender.
Os ponemos un ejemplo. Supongamos que queremos crear una página en la cual se

muestre un reclamo publicitario muy atractivo y sabemos que el 80% de nuestro público objetivo
nos va a visitar fundamentalmente con su móvil. Y nuestra decisión es crear una página web con
Flash, una tecnología que nos permite hacer grandes animaciones muy llamativas y de aspecto
muy profesional pero que no puede ser entendida por los buscadores, impidiendo que se pueda
posicionar. Pero lo más grave es que a la mayoría de nuestros usuarios ni siquiera podrán ver la
página cuando entren en ella, ya que les aparecerá esto:
O algún mensaje indicando que se debe descargar una aplicación que pueda leer Flash
para poder visualizar la web. Y es que flash no es reconocido o compatible con muchos
dispositivos móviles, incluyendo los dispositivos Apple.
Y es que en la actualidad todavía hay muchos elementos Flash en internet: desde intros
que bloquean el acceso a las páginas principales, menús en páginas, vídeos que no han sido
recodificados… 78
Página
_______________________________________________________________________
Para evitar este tipo de problemas debemos cumplir con los estándares web como
XHTML, CSS, DOM, etc. y validar nuestro sitio web a través de la W3C (Web Accessibility
Initiative). Esto nos asegura un portal plenamente accesible y conforme a las necesidades de
nuestros usuarios.
79
Página
_______________________________________________________________________
4.1.5 En resumen
Podemos decir que la usabilidad es:
“La medida en la que un producto se puede usar por determinados usuarios, para
conseguir objetivos específicos con efectividad, eficiencia y satisfacción en un contexto de uso
específico” (ISO / IEC 9214 - 11)
Éste es el término más universal dado por ISO (Organización Internacional para la
Estandarización), pero podríamos concretar la usabilidad en:
 Sencillez y fácil manejo.

 Necesidad de pocos clics para encontrar lo que se busca.
 Diseño de calidad que aporte confianza.
 Cumplimiento de unos estándares de accesibilidad web.
 Tiempo de carga y tamaño de la página óptimos.
 Jerarquía y estructuración de la información que queramos mostrar.
 Eficacia a la hora de mostrar dicha información. Un clic en un botón cuesta más de lo
que pensamos.
4.2 Análisis previo

Ya tenemos claro qué significa la usabilidad, pero… ¿Qué queremos conseguir con
nuestro portal? ¿Quién va “usar” nuestra web? Y sobre todo… ¿Cómo lo hace nuestra
competencia?
Estas cuestiones nos pueden ayudar a definir mejor nuestra estrategia en términos de
usabilidad y definición de contenidos. Antes de empezar a diseñar y programar, es necesario
pararse y realizar un análisis previo de la situación.
4.2.1 Determinar el objetivo del sitio
El primer paso siempre es determinar el objetivo de nuestro sitio. ¿Qué queremos

conseguir y cómo podemos hacerlo? En función de este objetivo, el enfoque en la usabilidad
puede variar:
 Visibilidad, generar imagen de marca, confianza, tarjeta de presentación

 Conseguir tráfico, que nos conozcan
80
Página
_______________________________________________________________________
 Conseguir contactos de clientes potenciales
 Conseguir ventas
 Dar un servicio online
Por ejemplo, si tenemos un portal de venta online debemos potenciar los siguientes
elementos:
 Mejorar la visibilidad de los productos

 Ofrecer un proceso de compra rápido e intuitivo
 Diseñar un flujo de navegación sencilla entre las distintas categorías
 Evitar un registro obligatorio complejo
 Facilitar la compra desde móviles
Estos objetivos se pueden resumir en vender más. Pero tendremos que trabajar usabilidad
del sitio para conseguirlo. Si tenemos más de un 20% visitas desde móviles y nuestro sitio no está
adaptado, la realidad es que estamos perdiendo seguramente un 20% de posibilidades de venta.
4.2.2 Determinar el público objetivo
Una vez que tenemos claro el objetivo de la web, y muy vinculado con ello, debemos
determinar a quién va dirigida, es decir, cuál es nuestro público objetivo. Este ejercicio de
“selección” nos proporcionará información muy útil a la hora de crear nuestro portal: idioma,
edad, sexo, clase social, intereses, hábitos, localización, necesidades comerciales…
Estos aspectos se convierten en características que definirán nuestro portal.
Por ejemplo, si nuestro sitio web promociona un producto o servicio que va dirigido a
jóvenes, tendremos que crear un portal con un diseño ágil, fresco, moderno, de fácil navegación
pero sobre todo, rápido.
Por el contrario, si nuestro sitio web se orienta a personas mayores, probablemente

debamos crear un sitio que dé una imagen de seriedad, con una estructura más organizada,
presentando los contenidos de la manera más “limpia” posible, sin olvidarnos de la accesibilidad
(tamaño y fuente de letra, asistencia a la navegación, etc.)
Otro ejemplo. Si nuestro sitio web está orientado internacionalmente, tendremos que hacer
un esfuerzo para que el portal esté adaptado a los principales idiomas y características de nuestros
visitantes.
81
Página
_______________________________________________________________________
4.2.3 Determinar los dispositivos de acceso
Lo acabamos de comentar en un ejemplo y seguiremos insistiendo sobre ello. Nuestro

sitio web debe estar correctamente adaptado a los diferentes dispositivos de acceso. En la
próxima asignatura, donde uno de los temas principales es el “mobile marketing”, os daremos las
principales alternativas a la hora de diseñar un sitio web adaptado a móviles.
Está claro que no es lo mismo un sitio web en el que el 90% del tráfico viene desde
ordenador, que un sitio web en el que ese 90% entra a través de un smartphone o tableta. El
enfoque tiene que ser completamente diferente porque el contexto de uso de los dispositivos y el
comportamiento de los usuarios es diferente, por no hablar de las propias características de dichos
dispositivos.
4.2.4 Análisis de la competencia
Resulta un ejercicio muy “sano” fijarse en lo que hacen los demás, sobre todo, para no
cometer sus mismos errores y mejorar lo que ya ofrecen, sobre todo cuando ya tienen un posición
dominante en el mercado.
La competencia directa nos puede enseñar muchas cosas. Sólo tenemos que fijarnos bien
y analizar los siguientes aspectos:
 Cuál es su estrategia para retener a los usuarios en su portal.

 Qué canales de comunicación usan con sus usuarios.
 Cómo ofrecen sus productos.
 Cómo usan el diseño para ser más atractivos.
 Su proceso de compra o flujo hasta la conversión.
 Sus formularios de registro, login, compra, contacto…
 Su flujo de navegación general.
 Su estrategia con dispositivos móviles.
Analizando todo ello podremos tener una idea más clara de lo que les funciona o no y
compararlo con el nuestro, adoptando y mejorando si es posible aquellos recursos que nos
parezcan interesantes.
4.3 Los 10 mandamientos web de la usabilidad

Podemos resumir el concepto de usabilidad en 10 mandamientos que todo sitio web
debería cumplir. Nos hemos basado en algunas de reglas indicadas por Jakob Nielsen en su
82
Página
_______________________________________________________________________
decálogo para diseñar interfaces de usuario y lo hemos adaptado al diseño web, incluyendo
algunas que nos parecen más actuales para el desarrollo de sitios web.
4.3.1 Primero. Cumplir lo Prometido
La primera impresión es la que cuenta. Los visitantes deciden en apenas un par de

segundos si se quedan y continúan leyendo o se van. Una buena primera impresión es la que se
produce cuando el usuario piensa que ha llegado al sitio correcto. Eso puede suponer una
diferencia entre una tasa de rebote del 20% y el 90%.
Por ello, debemos también asegurarnos de unificar los anuncios y las páginas de destino.
Si el anuncio nos habla de un producto, oferta o servicio, no llevemos al usuario a la home para
que tenga que buscarlo. Llevémoslo directamente a la página del sitio más relevante para ello. Si
no, es muy probable que el usuario piense que ha llegado al sitio equivocado y se marche.
Por último, si en el sitio web se indica algo, debe cumplirse. Por ejemplo, no incluir una
oferta del 10% sobre un producto y que cuando vayas a pagar, el descuento no aparezca por
ningún sitio, o indicar que se puede pagar con tarjeta y que luego esa posibilidad no exista.
4.3.2 Segundo. Incluir una llamada clara a la acción
Todo sitio web tiene un objetivo y por ello debemos asegurarnos de incluir una o más
llamadas clara a la acción para que el usuario llegue a donde queremos. Las llamadas a la acción
generalmente son botones, enlaces y texto que incitan a pulsar sobre ellos. Por lo tanto, tanto la
comunicación que se haga como la forma, tamaño y color importan.
83
Página
_______________________________________________________________________
Mal hecho:
 “Contratar” escondido en la parte inferior

 Sin contraste de colores (rosa)
Bien hecho:
 “Pruébelo Gratis muy visible y fácil de encontrar”

 Color que contrasta con el fondo
84
Página
_______________________________________________________________________
4.3.3 Tercero. Concreción
Evita que el usuario tenga la posibilidad de elegir entre demasiadas opciones y guíale en
su proceso hasta la conversión. Asimismo evita que haya que hacer mucho scroll para ver todo,
ya que el usuario rara vez llega hasta abajo. Lo más importante debe mostrarse arriba.
Mal hecho:
 ¡Más de 90 enlaces donde hacer clic!

 Sólo texto dificulta la navegación
 Se puede hacer mucho scroll
Bien hecho:
85
Página
_______________________________________________________________________
 Cientos de productos agrupados en pocas categorías, fácil elección.
 Fotografías intuitivas que ayudan a navegar y a captar la atención.
Ser concreto no quiere decir que haya que escribir poco o que tenga que haber pocos
elementos en el sitio web. Ser concreto es escribir lo necesario para el usuario y que no haya
elementos innecesarios. Por ejemplo, en una tienda online seguramente vamos a tener muchos
elementos, pero eso no implica necesariamente que se esté incumpliendo esta regla.
4.3.4 Cuarto. Evitar las distracciones visuales
Usar sabiamente las imágenes, vídeos y contenido animado. Evitar distraer al usuario del
objetivo principal, usando elementos emergentes, capas así como banners “luminosos”.
Mal hecho:
 La ventana emergente de ayuda sólo

consigue ocupar espacio en la zona
más importante de la Web, distrayendo
y molestando al visitante
86
Página
_______________________________________________________________________
Bien hecho:
 Las imágenes se usan adecuadamente para atraer la atención al contenido importante

para el visitante
 No hay imágenes ni otros elementos superfluos
4.3.5 Quinto. Definir una buena navegación
Tengamos una web pequeña o grande, debe ser navegable, intuitiva y estar bien
estructurada. Toda la información importante debe encontrarse fácilmente a través del menú
principal. Una buena estructura de categorías hará que los usuarios se sientan más cómodos
navegando por nuestro sitio web y que encuentren lo que buscan. Incluir las categorías justas.
Cada botón y enlace debe ser lo suficientemente claro para que el usuario sepa lo que va a
ocurrir. No debemos dejar callejones sin salida. Siempre debe existir la posibilidad de volver
atrás o de volver a la home (por ejemplo, mediante el menú o mediante el logo de la empresa en
la cabecera). Es más, si sabemos que el usuario ya conoce nuestra web, podemos facilitarle
caminos rápidos para las acciones más frecuentes.
Incluir un rastro de migas (llamado “breadcrumb”) facilita la navegación.
Incluir un buscador también ayuda a los usuarios a encontrar lo que quieren.

Imprescindible contar con uno si nuestro sitio web es muy extenso o es una tienda.
87
Página
_______________________________________________________________________
4.3.6 Sexto. Solicitar la información estrictamente necesaria
En los formularios se debe pedir únicamente la información estrictamente necesaria. Los

usuarios toman un tiempo en rellenar cada campo, por lo que cuantos más campos tengan que
rellenar, menor será la cantidad de usuarios que lo harán.
Si un campo no es imprescindible para finalizar la tarea, lo mejor es no ponerlo y

pedírselo más tarde. Una segunda opción, aunque menos efectiva, es marcarlo como optativo,
dejando claro que no es obligatorio rellenarlo.
Mal hecho:
 Formulario inmenso, con muchos campos no

necesarios.
 Cuantos más campos, menos conversiones.
Bien hecho:
 Corto y preciso
 Sólo pide la información
esencial.
 Habrá tiempo de recoger
más datos después.
88
Página
_______________________________________________________________________
4.3.7 Séptimo. Ayudar al usuario
No todos los usuarios son tan listos como nosotros. Facilitemos las cosas a los usuarios
más torpes. Esto se puede conseguir con pequeñas capas desplegables que aparecen cuando nos
posicionamos en determinados lugares o indicando mediante textos aclarativos las principales
acciones en pantallas y botones. En los formularios es muy importante explicar los campos que
no sean intuitivos. En procesos complejos, incluir una guía o ayuda online o descargable que el
usuario pueda consultar a la vez que realiza el proceso.
Por ejemplo, es mucho más aclarativo un botón “Pulsa aquí para finalizar tu solicitud” que
un botón que indique simplemente “Continuar”.
En el caso de las imágenes, es muy recomendable incluir un título y un texto alternativo,

mediante sus atributos de “title” y “alt”, con o que al pasar el ratón por la imagen se desplegará
un texto. Además de para los motores de búsqueda (SEO), las etiquetas “alt” ayudan a las
personas ciegas a entender el contenido de la web mediante software específico de
reconocimiento.
<img src="imagen.jpg” alt=”texto alternativo” title=”título imagen” />
4.3.8 Octavo. Humanizar la web
Genera confianza y seguridad.
Confianza siendo transparente con los datos. Di quién eres y dónde estás. Incluye
opiniones de otros usuarios o sellos avalados por terceros de prestigio. Facilita varias formas de
contacto e incluso permite la interacción.
Seguridad indicando cómo proteges la información. Avisa si estás usando algún sistema
de protección o encriptación de datos, como certificados SSL o compra segura.
Acércate al usuario y deja que te conozca mejor. Que sepa que hay una persona detrás y
no una simple máquina. Mejor usar imágenes reales que imágenes sacadas de un banco o que
parecen realizadas en serie.
89
Página
_______________________________________________________________________
Mal hecho:
 No sabes quién te vende y no tiene una marca detrás que genere confianza.
 La única foto de una persona se nota que no es realmente de ellos.
Bien hecho:
90
Página
_______________________________________________________________________
 Se sabe quién hay detrás de este portal.
 La integración de varios módulos de redes sociales permite interactuar.
4.3.9 Noveno. No complicar lo sencillo
¿Por qué hacer en 5 pasos lo que puede hacerse en 1 ó 2? Por cada paso que el usuario
tenga que dar, se nos caerán del proceso varias personas. Cuantos más pasos, menor suele ser la
conversión*. ¿Por qué obligar al usuario a registrarse? Hacerlo optativo, usar un registro
silencioso o simplemente no incluir un registro.
El hecho de realizar la compra en un solo paso puede agilizar el proceso de compra. Sin
embargo, eso nos obliga a prestar mucha más atención al diseño de ese único paso.
Mal hecho:
 Proceso de compra demasiado largo, nada menos que 5 pasos

 Obliga a clics innecesarios
 Obliga al registro
 Solicita datos innecesarios
91
Página
_______________________________________________________________________
Bien hecho:
 Compra en un clic
 Solicita sólo los datos imprescindibles
 Compras “sin darte cuenta”
4.3.10 Décimo. Prevenir y corregir los errores
Los errores generan una pobre impresión en el usuario y bajan drásticamente las tasas de
conversión. Imágenes que no existen y muestran un símbolo de error, enlaces o botones que no
funcionan o van a páginas de error, partes de la web que no se cargan, formularios que no envían
el mensaje, la propia página web que no carga, etc. Debe hacerse un esfuerzo por testear el sitio
web completamente para prevenir los errores. No obstante, en el caso de que se nos pase algo, es
muy importante darse cuenta pronto y corregirlo.
92
Página
_______________________________________________________________________
El error 404 (página no encontrada) es uno de los errores más frecuentes que podemos
encontrar. Suele darse por un incorrecto enlazado de una página con otra página o imagen, o bien
porque una página que en un momento existía, se ha borrado pero el buscador o el usuario
todavía conocen la dirección.
4.4 Casos prácticos. Usabilidad aplicada a diferentes tipos de web

Ya tenemos claro qué significa la usabilidad y las reglas más importantes que debemos
tener en cuenta, pero… ¿varían los términos de usabilidad según el tipo de web?
En efecto, la respuesta es que sí. Varían porque la información y la intención de cada sitio
web dependen de su tipología. Vamos a analizar algunos de los tipos de webs explicados
anteriormente: landing pages y microsites, páginas corporativas y tiendas online.
4.4.1 Usabilidad aplicada a las landing pages
Estas páginas vienen condicionadas por su enfoque publicitario. Su objetivo es el de

promocionar un producto o servicio de forma atractiva y veraz.
Para ver cómo una buena usabilidad puede mejorar notablemente nuestra landing page,
vamos a analizar y comparar dos páginas que promocionan un servicio similar.
Ejemplo: Traducciones juradas.
Ambos portales pretenden lo mismo, captar clientes potenciales (leads) a través de

contactos telefónicos o mediante formulario online. Sin embargo, lo hacen de forma muy
diferente.
Caso 1. http://www.traductorjuradosevilla.es
93
Página
_______________________________________________________________________
94
Página
_______________________________________________________________________
Caso 2. http://interpretes-traductores.agestrad.com/
95
Página
_______________________________________________________________________
El Mensaje
En el caso 1 se prioriza sobre todo el logotipo y usan como título principal “Traductor
Jurado Sevilla”. Es un título poco atrayente, seguramente pensado solo para SEO.
En el caso 2 se hace hincapié en la forma de mostrar los servicios protagonistas de la

empresa. El texto ocupa un lugar privilegiado dentro de la web, una de las zonas más visible. Y
se presenta con una estética atractiva y acorde con el diseño en general. En nuestra opinión esta
segunda opción es mejor.
El Teléfono
En el caso 1, el teléfono tiene un tamaño

poco destacable, a pesar de que aparece en la
zona superior de la página. Si el objetivo de la
página es conseguir llamadas, nos parece un
error. Además, una vez que se hace scroll se deja
de ver.
96
Página
_______________________________________________________________________
En el caso 2, el número está todavía más arriba y en un color destacado y acorde con el
diseño de la página. Pero lo más importante, es que además siempre está visible, incluso cuando
se hace scroll, permitiendo que el usuario lo tenga a mano en cualquier momento.
Contacto y llamadas a la acción (Call to

action)
En el caso 1 la única llamada a la acción

que vemos es el texto “Contacta con nosotros”. Y
no existe ningún formulario de contacto online.
Solo un link de tipo “mailto” con su email. El
problema de este tipo de links es que si el usuario
no dispone de un programa de correo tipo
Outlook, no podrá enviar ninguna solicitud.
Pensemos en el usuario que usa habitualmente el
correo web (Gmail, Hotmail, etc.) o simplemente que está con su móvil.
En el caso número 2, podemos observar que el

formulario de contacto se encuentra directamente en la
cabecera y se ve sin necesidad de hacer scroll. Este
recurso facilita el contacto rápido y sin compromiso por
parte del usuario y nos parece más profesional. Este tipo
de formularios son típicos en las páginas de aterrizaje.
Estemos donde estemos, como el botón “Contacto”
siempre está visible y cuando pulsemos sobre él nos
llevará directamente al formulario.
97
Página
_______________________________________________________________________
El Contenido
La forma de presentar nuestro contenido

es muy importante. Debemos de ser concisos,
evitar textos demasiado largos y aburridos de leer.
En este tipo de páginas el usuario no tiene tiempo
de leer la “Biblia” y hay que conseguir
rápidamente su atención y facilitarle la vida. Eso
se hace mediante textos modulados, cortos y
directos.
En nuestra opinión, en el caso 1 vemos

que la información se presenta de una manera
poco atractiva y algo pesada de leer.
En el caso 2, el texto se presenta de forma modulada. Esto quiere decir que marcamos
diferentes zonas de la página para presentar
diferentes tipos de información. Por una
parte tenemos la zona de Servicios,
presentada sobre un fondo gris dentro de
espacios desplegables para ahorrar en
espacio y no cansar visualmente al usuario.
98
Página
_______________________________________________________________________
La otra información que destaca en la página son “Los elementos diferenciadores”. Son
reclamos publicitarios para dotar de valor al servicio y se presentan de forma atractiva y más
dinámica, en 4 columnas. Los gráficos y estructuras más flexibles hacen que el usuario asimile
mejor la información.
Scroll
¿Una landing page debe tener scroll? No hay una respuesta definitiva para eso. Hace unos
años, salvo excepciones, era impensable que una página tuviera scroll, al menos en su portada,
pero este enfoque está cambiando con páginas de tipo “one-scroll” donde todo el contenido se
puede ver en una sola página y se navega mediante un menú situado de forma fija y siempre
visible.
De todas formas, si hablamos de landing pages, recomendamos situar toda la información

en la cabecera o en un “primer scroll”, ya que es la “zona caliente de una página” y donde el
usuario dedica más su atención.
En el Caso 2 podemos ver cómo se ha tenido este principio en cuenta, situando todos los
reclamos importantes, llamadas a la acción, números de teléfonos y contacto en la parte superior
de la página.
99
Página
_______________________________________________________________________
Conclusión.
Con este ejemplo hemos podido comprobar lo útil que resulta utilizar un diseño en “pro”
de la usabilidad y, en definitiva, que nos permita conseguir más clientes.
4.4.2 Usabilidad aplicada a las webs corporativas
¿Qué podemos potenciar en una web corporativa? ¿Cómo hacer de un gran contenido de
texto una información atractiva y fácil de leer?
En este caso, la usabilidad se debe centrar en la forma de navegar y en la forma en la que

el usuario accede a los diferentes contenidos.
Debemos ser claros y concisos como en el diseño de la anterior Landing Page, pero sobre
todo, debemos facilitar al máximo el acceso al contenido, ya sean páginas de texto simple,
formularios de contacto, archivos descargables, etc.
Os mostramos un ejemplo de sitio web corporativo para una empresa local que quería
reforzar su imagen de marca y tener una mejor presencia online en general:
http://www.panychocolate.es/
100
Página
_______________________________________________________________________
101
Página
_______________________________________________________________________
Análisis del contenido.
Lo primero que debemos hacer es definir un mapa web sencillo, agrupando los bloques de
información por secciones, y después revisar estas secciones para ver cuáles de ellas merecen
especial mención. En este caso el portal dispone del siguiente mapa web: Portada / Productos /
Tiendas / Franquicias / Quiénes somos / Blog y Contacto.
El diseñador en este caso quiere dejar clara la navegación. Por ello, el menú se presenta en
la parte superior de la web y dispone de una posición fija, es decir, no le afecta que el usuario
haga scroll, siempre estará visible.
Otro requisito de la página es que quiere llegar también a un público inglés, ya que se
trata de una zona muy turística. Para ello, se han destacado los idiomas junto al menú superior
con unas “banderas”, algo bastante típico para comunicar a los usuarios que el portal está en
varios idiomas y con un solo clic puede cambiar de idioma.
Una vez analizado todo el contenido de que disponemos, se ha considerado destacar dos
secciones especialmente:
● Productos. Se desea dar a conocer una amplia gama de productos para vender.
● Tiendas. Se desea indicar que se dispone de una red de tiendas por toda la localidad.
Realce del contenido
Tras analizar el contenido, definir el mapa web y la navegación, se procede a confeccionar

la portada, creando zonas específicas para los productos y las tiendas. Sin apenas texto, las
imágenes sirven como acceso directo a cada tipo de producto en concreto, lo que nos lleva a otra
página en forma de catálogo, como si de una tienda online se tratara. Con este recurso, el
diseñador pretende que el usuario, de un solo vistazo y sin dedicar tiempo, sepa “qué vende esta
web”.
La otra zona de interés, con las tiendas, se ha integrado en el pie del sitio web, de forma
que es común a todas las páginas. Este recurso se basa en la redundancia, dando a conocer la
localización de las tiendas por repetición. A su vez este módulo sirve como acceso directo a la
sección “Tiendas”.
Conclusión
Quizá te preguntes si esto es usabilidad. La respuesta es que sí.
Utilizar la información en nuestro beneficio nos proporciona la habilidad de reconducir la

forma de navegar del usuario, llevándolo donde nosotros queremos e impidiendo o reduciendo la
102
Página
_______________________________________________________________________
posibilidad de abandone nuestro portal demasiado pronto, simplemente porque sea aburrido o sea
difícil de “digerir”. Con estas estrategias fomentamos la navegación entre páginas. Clics valiosos
y útiles.
Este mismo ejemplo de navegación entre páginas lo podemos ver en la sección

“Quiénes somos”
En la anterior captura podemos comprobar como una sección muy formal de la marca ha
sido aprovechada por el creativo para incluir dos accesos directos a las secciones “Productos” y
“Tiendas”. De nuevo, la intención no es otra que la de dinamizar el contenido y evitar crear
“páginas muertas”.
103
Página
_______________________________________________________________________
4.4.3 Usabilidad aplicada a Tiendas Online
En una tienda online, la usabilidad

tiene un fin muy claro: Conseguir la venta.
Anteriormente hemos puesto como

ejemplo de página con errores de usabilidad
la tienda online de Zara, especialmente en lo
relativo a su portada. Ahora vamos a
analizar otro importante portal de la misma
temática, el de H&M.
H&M estrenó portal de venta online

hace unos meses. La problemática a la que
se enfrentaba era la siguiente: ¿Cómo evitar
perder en diseño y estilismo a cambio de
ofrecer una web más usable y funcional? El
resultado lo podéis ver en esta captura.
Se trata de un portal que utiliza

elementos de los que os hemos hablado,
modulación de la información y separación
en bloques con estilos diferenciados: por
ejemplo, la zona llamada H&M LIFE que
aparece antes del pie de página.
Otro recurso que se emplea es del

crear un mapa web sencillo, con pocos
elementos pero muy visibles: Mujer,
hombre, niños, home, H&M Life.
Así, en nuestra opinión se trata de

una portada sencilla pero bien hecha. Usa
imágenes atractivas que sirven como acceso directo a las diferentes partes del portal (como
hemos visto en el caso del portal corporativo), favoreciendo una navegación más dinámica y
rápida, al contrario de lo que nos ofrece el portal de ventas de Zara con su minúsculo menú
lateral.
El portal presenta las ofertas publicitarias de una forma muy estética y poco molesta. Al
posicionarnos con el ratón en alguno de los elementos principales del menú, se despliegan todos
los elementos (tipos de producto) y se aprovecha para ofrecer diferentes ofertas.
104
Página
_______________________________________________________________________
Se trata de un recurso inteligente, ya que da la opción al usuario de visitar una zona muy
interesante del portal casi sin querer. El menú es una zona muy visitada en este tipo de páginas.
Otro recurso bien utilizado es el banner central, donde se muestra un pase de diapositivas
(lo que se conoce como slide) con diferentes ofertas y promociones. Ocupa un espacio correcto y
facilita que el usuario enlace con páginas internas del sitio. Es una forma fácil de dirigir al
usuario en su navegación. Además, en lugar de ser un slide que se mueve automáticamente (lo
que suele distraer la atención de los usuarios y a veces puede resultar hasta molesto si se hace
rápido, es fijo y debe ser el usuario el que pulse sobre las flechas < y > si quiere ver otras
promociones. 105
Página
_______________________________________________________________________
Vayamos ahora a la ficha de producto. En cualquier tienda online, esta página es clave
para medir la fiabilidad y calidad del portal. Las tiendas online que más venden tienen fichas de
producto atractivas, originales, completas y funcionales.
Sin necesidad de hacer scroll, tenemos todo lo necesario para convencer al usuario de que
compre el producto. El diseño es sencillo, dando protagonismo de nuevo a las imágenes,
106
Página
_______________________________________________________________________
partiendo de un concepto funcional, directo, sin artificios. Los elementos se presentan de forma
directa, clara, diferenciados entre sí por colores y cambios de estilo. Por ejemplo, destaca la
utilización de la negrita en determinados textos. La estructura presenta una página muy ordenada
con elementos de izquierda a derecha (siguiendo el ojo del usuario). El usuario primero se va a
fijar en las imágenes y después verá los datos del producto, especialmente el nombre y el precio
destacados.
No hay elementos que molesten, como menús laterales, banners promocionales o

elementos para filtrar. Se centra completamente en el producto.
El botón “Añadir a la bolsa de la compra” también aparece destacado y en un buen

tamaño, para que el usuario sepa claramente cómo debe proceder y finalice la compra. Seguro
que os habéis encontrado muchas veces con portales en los que llegáis al producto y el botón de
agregar al carrito está escondido o en un tamaño tan pequeño que pasa desapercibido. Al final,
ese tipo de errores se traducen en más abandonos y en menor volumen de compras.
Nos preguntamos entonces, ¿no podemos navegar desde la ficha de producto? Pero la
cuestión es ¿hacia dónde queremos que vaya el usuario desde la ficha de producto?
Además del menú superior, que obviamente está en toda la web, el usuario solo tiene 2
opciones, finalizar la compra o elegir alguno de los productos complementarios que salen abajo,
mediante la llamada “Combina con”. Es lo que llamamos “venta cruzada”.
Este recurso nos permite redireccionar al usuario a otra ficha de producto de su interés y
evitar la posible fuga del portal, además de fomentar un mayor volumen de la compra. Esto es
especialmente útil si queremos que el usuario llegue a un volumen mínimo, por ejemplo para
ahorrarse los gastos de envío.
Por último, tenemos que destacar de esta web su versión móvil, donde se ha cuidado al
máximo la navegación y aspectos de usabilidad y funcionalidad desde estos dispositivos.
107
Página
_______________________________________________________________________
H&M modifica toda su estructura para ofrecer al usuario un resultado simple, sencillo y
sobre todo: usable. Este último ejemplo dispone de una barra superior donde se concentra todas
las zonas importantes: Carrito, Menú de Categorías y Acceso a tu cuenta.
La navegación también ha cambiado de aspecto. Ahora se concentra en un panel oculto

que se despliega al hacer clic sobre un icono.
108
Página
_______________________________________________________________________
La portada se ha convertido en una simple lista de imágenes, con la intención de no
sobrecargar la cantidad de datos a descargar y asegurar que el usuario pueda visionar todo el
contenido sin esperas. Este recurso favorece el clic y la posibilidad de navegación.
En resumen, es tan importante cuidar los detalles que influyen en la usabilidad, sobre todo
teniendo en cuenta datos como estos:
“El 70% de los clientes abandona su compra online debido a una mala experiencia de
compra en el sitio”
“De aquellos clientes que deciden abandonar su carrito, únicamente el 15% opta por otra
vía para comprar el producto en dicha tienda, mientras que el 33% se marcha a la web de la
competencia, y otro 11% se dirige a la tienda física, pero de otro competidor”
Fuente: http://www.puromarketing.com/76/18570/cada-tiendas-online-suspende-experiencia-usuario.html
109
Página
_______________________________________________________________________
4.5 Usabilidad y usuario. Conclusiones sobre una relación perfecta
4.5.1 El futuro de la usabilidad
El futuro de la usabilidad web pasa por el “Mobile design”, o diseño adaptado a móviles,
ya que el tráfico móvil está superando al tráfico desde ordenadores. En la asignatura de “Mobile
marketing” hablaremos en detalle sobre ello. Pero os vamos a dar una serie de recomendaciones.
Existen varias formas de transformar una web de escritorio en una página móvil eficaz.
Dos conceptos surgen con fuerza:
 Diseño responsive o adaptativo: Se trata de diseñar el portal para que el contenido

se adapte automáticamente al tamaño de cada pantalla, sea un monitor de ordenador,
un portátil, una tableta o un smartphone. El contenido varía de posición y tamaño
buscando su mejor visualización, pero en esencia es el mismo. Es decir, no se diseña
una web para cada dispositivo, sino que la misma web sirve para todos.
 Mobile First: Se trata de un nuevo concepto de diseño que propone comenzar a

diseñar pensando en los móviles y su tamaño para después ir rediseñando los
elementos a las resoluciones mayores. Este concepto tiene como misión asegurar una
buena usabilidad en móviles y tablets.
110
Página
_______________________________________________________________________
4.5.2 Anteponer las necesidades del usuario a las nuestras
Para concluir y añadir una explicación más personal al término usabilidad, podemos
afirmar que ésta simboliza a un usuario satisfecho, que ha encontrado justo lo que necesitaba, de
una manera sencilla y en un tiempo razonable.
La usabilidad a veces está reñida con nuestros gustos personales o apetencias estilísticas.
Debemos ponernos en el lugar del usuario, pensar como el usuario, que es quien va a leer nuestro
contenido, visitar nuestro sitio, rellenar un formulario, comprar nuestro producto…
111
Página
_______________________________________________________________________
5 Análisis Posterior: Herramientas de analítica y optimización web
Hemos visto en el análisis previo que antes de decidir cómo debemos diseñar nuestra Web
tenemos que haber establecido qué queremos conseguir. Se suele decir que aquello que no se
puede medir no existe, y afortunadamente en el Marketing Online se puede medir casi todo. En la
última asignatura de este curso se estudian diferentes herramientas, métricas y elementos que se
pueden medir en Marketing Online. Sin embargo, vamos a destacar brevemente los motivos por
los que analizar la usabilidad de nuestra Web y las herramientas que nos pueden ayudar a ello.
5.1.1 Motivos para el análisis de la usabilidad
La razón de analizar la usabilidad de nuestra Web es una parte del análisis de resultados
obtenidos y del seguimiento de objetivos. Cuando iniciamos nuestro proyecto nos fijamos
objetivos de tráfico, contactos (leads) o ventas. Existen muchos factores que pueden influir en la
consecución de estos objetivos, y entre ellos está la usabilidad.
Si, por ejemplo, no se alcanzan los objetivos de ventas de nuestra tienda online, puede que
no estemos consiguiendo suficiente tráfico o que los usuarios que visitan la Web no compren. En
este segundo caso, puede que nuestro producto esté fuera de precio, pero también puede ser que
nuestra Web no genere confianza, los usuarios no se encuentren cómodos con el proceso de
compra o simplemente que haya un error o problema importante que se nos haya pasado. La
razón de una tasa baja de conversión puede ser la usabilidad de nuestra Web.
Por ello, aunque sigamos unos criterios de usabilidad y hayamos previsto el

comportamiento de los usuarios en nuestra página, la realidad puede darnos otros datos y es
necesario medirlos, analizarlos y tomar medidas para corregir ciertos aspectos y potenciar otros.
5.1.2 Herramientas para el análisis de la usabilidad
Algunas herramientas de analítica las comentaremos en detalle más adelante en el curso.

No obstante, vamos a destacar muy brevemente dos tipos de herramientas que resultan
especialmente relevantes para la usabilidad de nuestra Web:
 Herramientas de análisis web como Google Analytics: Nos permitirán detectar

cuándo existe un problema. Mediante los porcentajes de conversión, tiempos de
estancia en la Web, porcentajes de rebote, número de páginas vistas, embudos de
conversión, etc., podremos detectar en qué páginas de nuestra Web existen
problemas.
112
Página
_______________________________________________________________________
 Herramientas de Mapas de calor y grabación de visitas: Nos permitirán conocer cómo
se comportan los usuarios en las páginas concretas de nuestro sitio Web, dónde
pulsan, qué campos rellenan, etc. El análisis de este comportamiento nos dará ideas
sobre los focos que centralizan la atención, y aquellos aspectos que los llevan a tomar
acciones sobre nuestra Web.
Todas ellas las veremos en la última asignatura del curso.
113
Página
_______________________________________________________________________

El Entorno Web. Tipos de Web. Navegación. Usabilidad PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

El Entorno Web. Tipos de Web. Navegación. Usabilidad PDF

Cargado por

Copyright:

Formatos disponibles

Curso de Marketing Online

Asignatura 1. Bloque 2: El entorno web.

El entorno web. Tipos de web. Navegación web.

1 Introducción y objetivos del bloque ............................................................ 5

2 El entorno web .................................................................................... 6

4 Navegación y usabilidad web .................................................................. 65

5 Análisis Posterior: Herramientas de analítica y optimización web ..................... 112

La web es nuestra tarjeta de presentación online frente a nuestro público, usuarios o

Finalmente trataremos aspectos relacionados con la navegación y la usabilidad web, o

2.1 Los elementos

En definitiva, un sitio web es un conjunto de páginas web. Por ejemplo,

2.1.1 El sitio web

2.1.2 Las páginas web

 Usable y navegable. Debemos facilitar al máximo que el usuario encuentre lo que

 Optimizado técnicamente y a nivel de contenido para los buscadores. Si queremos

2.1.2.1 Tipos de sitios web según la presentación de sus contenidos

 Sitios web estáticos

 Sitios web dinámicos

Se desarrollaban de esta forma cuando nació internet y comenzó a expandirse, ya que su

Por ejemplo: http://www.webandmacros.com/

2.1.2.2 Tipos de sitios web según su acceso

En 1978 el Instituto Nacional Americano de Normalización (ANSI) empezó a trabajar en

Los lenguajes de marcas no son equivalentes a los lenguajes de programación aunque su

Un lenguaje de marcas o de etiquetado no es lo mismo que un lenguaje de marcas

Por lo tanto, HTML hereda de SGML sus principales características:

 La escritura se realiza en un formato de texto plano.

2.2.1.1 ¿Qué es HTML?

2.2.1.2 Breve historia del HTML

HTML fue desarrollado por la Organización Europea de Investigación Nuclear (CERN)

Posteriormente, Douglas Engelbart, diseñó un entorno de trabajo por computadora que

El tipo de codificación que se utilizó para el desarrollo de este sistema de hipervínculos

2.2.1.3 Propiedades fundamentales del HTML

Por ejemplo, definimos el texto de encabezamiento principal de nuestra página de esta

<h1>Cabecera principal de la página</h1>

<img src=“mifoto.jpg” />

4.- Las etiquetas deben “cerrarse” siempre, de dos formas.

<p> Texto del párrafo </p>

6.- Las etiquetas se pueden anidar, pero de manera lógica y ordenada

<div> <p> <strong> … </strong> </p></div>

Ésta es la estructura HTML de cualquier página web.

Textos, imágenes, tablas, enlaces, formularios, etc

2.2.2 El lenguaje CSS

2.2.2.1 ¿Qué es CSS?

CSS es el acrónimo de Cascading Style Sheets, es decir, hoja de estilos en cascada.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un

CSS es un lenguaje basado en hojas de estilos, creado para controlar el aspecto o

 Mejora la accesibilidad del documento.

En 1995, W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su

2.2.3 El lenguaje Javascript

2.2.3.1 ¿Qué es Javascript?

Javascript es un lenguaje de programación “scripting” que permite definir acciones

2.2.3.2 Ubicación del código JavaScript

Las funciones o acciones Javascript (también lo veréis denominado como “código

 Insertando el código dentro de la página, habitualmente en la zona de cabecera o del

alert(‘esto es una prueba’);

alert(‘esto es una prueba’);

Cabecera de la página web

<script type=“text/javascript” src=“pruebas.js”></script>

 Insertando el código directamente dentro de un elemento HTML que tenga un

<input type=”button” value=”pulsar” onclick=”alert(‘esto es una prueba’);”/>

Tiene una sintaxis parecida a la usada en Java y en C. Al ser un lenguaje ejecutado en el

 Se pueden definir variables:

var = “Hola”, n=103