AVISO IMPORTANTE

Este documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo Atribución, No-Comercial. En caso de utilizarse este
material o de la creación de un derivado, la atribución se debe respetar citando la fuente como “Actívate, Google España” y expresamente, si es posible, mediante un enlace
activo a http://google.es/activate.

Certificado por:
La Web
Índice

1 Navegadores y pantallas

2 Elementos de una web

3 Tipos de web

4 CMS
1 Navegadores y pantallas
Navegadores

El HTML es el lenguaje con el que se programan las webs y los navegadores

traducen este código para convertirlo en un elemento gráfico.

Fuente: Primer sitio web de la historia. Xataka Ciencia

Navegadores

HTML: es un lenguaje de marcado que nos sirve para crear páginas webs
y referenciar páginas y otros contenidos. Existe un estándar internacional
gestionado por el W3C.

Navegador: es un programa que interpreta el código html para mostrarlo

de forma visual.

El usuario indica una URL a su navegador, este llama al servidor que envía
el HTML. El navegador entonces interpreta el HTML y crea una
representación gráfica.
Navegadores

Han existido bastantes navegadores,

pero ahora podemos hablar de 3 principalmente.

Fuente: Netmarketshare
Navegadores

Mosaic y Netscape: ya no están activos. Es curioso cómo Mosaic pasó

a ser la fuente de Netscape y éste la de Mozilla, que ahora es Firefox.

Navegador: es un programa que interpreta el código html para

mostrarlo de forma visual.

La lucha del navegador esconde la lucha por el buscador ya que estos

llevan insertados motores de búsqueda.
Navegadores

En la actualidad hay una gran diversidad de navegadores y pantallas. Este problema

se ha resuelto con el cross browser y el diseño responsive.

Herramientas de comprobación: Google optimización y Test my site

Ejemplo web responsive: Asociación Madrileña Audiovisual

Navegadores

Cross Browser: Técnica de programación que sirve para que una misma
web se visualice correctamente en todos los navegadores, sin tener que
crear una versión por navegador.

Diseño responsive o adaptativo: Responsive Web Design, técnica que

permite adaptar el contenido de una web a la pantalla desde el dispositivo
que se visualiza.

Ejemplo web responsive:

Twinpines
Actualidad

Con los nuevos lenguajes HTML5, Javascript, etc.,

se pueden realizar acciones sin depender de una
constante conexión con el servidor, por ejemplo los
editores de texto o vídeo online.

Nuevas funcionalidades son posibles, como

software en un servidor.
2 Elementos de una web
El alojamiento o servidor

Espacio web A tener en cuenta...

- Precio
- Seguridad y confianza
- Soporte técnico
Genérico - Específico - Cloud

Necesidades:
Servidor
- Espacio en disco
- Conectividad
Dedicado - Mantenido - Cloud - RAM
- Lenguajes admitidos
El alojamiento o servidor

Alojamiento compartido
Se llama alojamiento o hosting al espacio contratado en un servidor web que nos permite
alojar y mostrar nuestra página web. El ordenador será empleado por decenas o cientos
de webs.

Servidor web
Servidor web es el ordenador conectado a Internet cuya misión es servir el contenido de
las páginas a los usuarios. Puede ser compartido pero lo habitual es que el servidor sea
usado por una única empresa.
Respecto al mantenimiento
- Dedicado: Es decir es servidor es mantenido por un equipo ajeno a la empresa de
alojamiento.
- Mantenido: Es servidor es mantenido por la empresa de alojamiento.

Cloud
Se trata de un conjunto de servidores compartidos entre varios usuarios creando una red.
Se otorga recursos a medida que se necesitan. A diferencia de los servidores o
alojamientos tradicionales que cuentan con exclusivamente con los recursos instalados
en la maquina, en las redes cloud se cuenta con los recursos de la totalidad de las
máquinas que componen la red.
El dominio

www.misupermercadoactivado.com

Será el nombre de nuestra empresa,

marca o proyecto en Internet.

Debe ser:
● Fácil de recordar.
CADUCA.
● Fácil de escribir.
¡NO TE OLVIDES DE
● No imitar a la competencia.
RENOVARLO!
Puede ser dominio:
● De marca (Google.es)
● SEO (buscadores.com)
 Elementos externos de una web

Logotipo y acceso a portada Menú de navegación

Contenidos

Faldón
Elementos externos de una web

Elementos externos:
Cabecera: parte superior que estará visible en todas las páginas.
Suele contener logotipo con acceso a la portada y el menú de
navegación.

Menú de navegación: enlaces a las páginas principales del sitio

web.

Cuerpo: zona donde ubicamos el contenido, atendiendo a los 3

scroll.

Faldón: ubicado en la zona inferior, su contenido es el menos

relevante para el usuario pero que debemos tener como por
ejemplo el aviso legal. El faldón suele ser el mismo para toda la
web.
Elementos visuales de una web

Dos consideraciones a tener en cuenta:

Tres scroll
y
1
Tres tercios

1 2 3

Fuente de imágenes: El Economista

Elementos visuales de una web

Los 3 scroll: scroll hace referencia a la vuelta de la rueda del ratón.

1º tercio, lo esencial;
2º tercio, lo importante;
3º tercio, lo que casi nadie verá.

Los 3 tercios: División vertical de una web.

1º tercio, lo que más llame la atención;
2º tercio, lo relevante;
3º tercio, los apoyos.
Esta distribución se da por el proceso de lectura occidental de izquierda a
derecha.

Se puede abrir un periódico digital donde estas normas son muy

respetadas. Recomendamos elpais.com o elcorreo.com.
Elementos internos. Head & metatags
Body
Publicidad Google Analytics
Semillas
CSS
Elementos de una web

HEAD: código técnico para navegador, buscadores y spiders (arañas de

búsqueda).

BODY: el contenido en sí mismo.

Metatags: se localizan en el “head” y su función es dar metadatos a los

buscadores para facilitar su trabajo.

Semillas: códigos de rastreo para analítica, rastreadores, publicidad, etc.

CSS: hoja de cascada de estilo. Nos permite separar el diseño del contenido.

Son los elementos internos básicos.

Se puede abrir el HTML de una web sencilla y verlos con la función
buscar.
3 Tipos de web
Tipos de web según contenidos

● Empresarial: la clásica quienes somos, qué hacemos, dónde estamos.

● Producto: destinada a mostrar las bondades y uso de un producto.
● Ayuda: su función es ayudar al usuario en el manejo de tus servicios.
● Microsite: sitio web dedicado a un producto o acción concreta, suele tener su
propio dominio o subdominio y servir para un objetivo determinado como por
ejemplo publicitar un producto, realizar un concurso, presentar un catálogo
anual, etc.
● Landing: página de destino de anuncios. No debe estar referenciada en
ninguna parte del sitio. No es un sitio web propiamente dicho.
● Comercio electrónico.
● Opinión: Son web 2.0 donde los usuarios opinan productos y servicios.
Tipos de web según contenidos

● Personal: el clásico blog, web de fotos familiares, etc.

● CV: dedicado a la marca personal donde se recogen los logros
profesionales. Suele venir acompañado de un blog que sirve de soporte
para demostrar conocimientos.
● Colaborativos: los usuarios de una manera más o menos jerarquizada y
ordenada crean el contenido. El gran ejemplo: Wikipedia.
● Portales, directorios…
● Comunidades y redes sociales.
● Medios de comunicación.
● Redes de contenido conjunto de blogs o medios unidos bajo una marca y
portada única.
Tipos de web según contenidos

E-commerce o comercio electrónico

Consiste en la distribución, venta, compra, marketing y suministro de información
de productos o servicios a través de Internet.

Tipos:

B2C (business-to-consumer): empresas que venden al público en general.

B2B (business-to-business): empresas haciendo negocios entre ellas.

C2C (consumer-to-consumer): consumidores que compran y venden entre ellos.

B2G (business-to-government): empresas que venden a instituciones de gobierno.

4 CMS
CMS

EL CMS (Content Management System), o

gestor de contenidos, es un sistema que nos
permite editar contenidos sin tener
conocimientos de programación ya que
contenido, diseño y programación quedan
separados. Ahora ya no es necesario contar
con conocimientos técnicos para crear nuestra
página web.
CMS tipos

En la actualidad las páginas web suelen contar con un CMS

ya sea de software propietario (desarrollado para el caso) o
una solución pre-armada (normalmente de código abierto).

Web y Blogs E-commerce Editor online

CMS

Pasamos del Internet de unos pocos

al Internet de TODOS.

Sin CMS no habría web 2.0

CMS

Sin CMS

Con CMS
De estático a dinámico

ESTÁTICO DINÁMICO

Estático: cada página se hacía a mano.

Dinámico: el contenido se carga en el CMS y se crean las
páginas a petición del usuario.
WordPress
WordPress: diseño

WordPress nos permite cambiar el diseño

mediante el uso de plantillas
(gratuitas y de pago).

Fuente imagen: WordPress

WordPress: diseño

Gracias a la comunidad contamos

con cientos de herramientas gratis o de pago (plugins)
para añadir funcionalidades a nuestro sitio web.

Fuente imagen: WordPress

WordPress: editor

Backend: es la zona donde gestionamos la web o blog.

Fuente imagen: WordPress

WordPress: diseño

Frontend: es lo que ven los usuarios, la web.

Fuente imagen: WordPress

Consejos

A la hora de adoptar un CMS u otro debemos tener en

cuenta:

Que cubra nuestras necesidades.

Adaptable y escalable.
Seguro y con actualizaciones constantes.
Si es gratuito que cuenta con una comunidad activa.
Consumos de recursos moderados.
6 Bibliografía y recursos web
Bibliografía y recursos web

Bibliografía

● GOTHELF, Jeff y SEIDEN, Josh. LEAN UX: Cómo aplicar los principios Lean a la mejora de la
experiencia de usuario. UNIR Editorial, 2014.
● NIELSEN, Jackob y BUDIU, Raduka. Usabilidad en dispositivos móviles (Diseño y
Creatividad). Anaya Multimedia, 2013.
● KRUG, Steve. No me hagas pensar: una aproximación a la usabilidad web. Prentice-Hall,
2006.
● NIELSEN, Jakob y LORANGER, Hoa. Usabilidad. Prioridad en el diseño web. Anaya
Multimedia, 2006.

Recursos web
● APEI. Informe APEI de Usabilidad. [En línea]: www.apei.es/informe-apei-sobre-usabilidad.
● No solo usabilidad. [En línea] www.nosolousabilidad.com.
● Nielsen Norman Group. Articles.[En línea] www.nngroup.com/articles.
● Nielsen Norman Group. Usability 101: Introduction to Usability. [En línea],
www.nngroup.com/articles/usability-101-introduction-to-usability.
● Usability Geek. [En línea] http://usabilitygeek.com/.
¡Gracias!
AVISO IMPORTANTE
Este documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo Atribución, No-Comercial. En caso de utilizarse este
material o de la creación de un derivado, la atribución se debe respetar citando la fuente como “Actívate, Google España” y expresamente, si es posible, mediante un enlace
activo a http://google.es/activate.

Certificado por: