TEMA 3.

REALIZACIÓN DE PÁGINAS WEB

0. CONCEPTOS BÁSICOS:

•World Wide Web (WWW): El sistema de información propio de Internet. Sus

características son:
•Información por hipertexto: Diversos elementos (texto o imágenes) de la
información que se nos muestra en la pantalla están vinculados con otras
informaciones que pueden ser de otras fuentes. Para mostrar en pantalla esta otra
información bastará con hacer clic sobre ellos.
•Gráfico: En la pantalla aparece simultáneamente texto, imágenes e incluso
sonidos.
•Global: Se puede acceder a él desde cualquier tipo de plataforma, usando
cualquier navegador y desde cualquier parte del mundo.
•Pública: Toda su información está distribuida en miles de ordenadores que ofrecen
su espacio para almacenarla. Toda esta información es pública y toda puede ser
obtenida por el usuario.
•Dinámica: La información, aunque esta almacenada, puede ser actualizada por el
público sin que el usuario deba actualizar su soporte técnico.
•Independiente: Dada la inmensa cantidad de fuentes, es independiente y libre.

•Navegador: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de
comunicarse con un servidor y comprender el lenguaje de todas las herramientas que
manejan la información de la Web. Puede decirse que cada casa de software podría tener
su navegador propio.

•Servidor: Se encarga de proporcionar al navegador los documentos y medios que este

solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un
navegador.

•HTTP: Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los

servidores de World Wide Web utilizan para mandar documentos HTML a través de
Internet.

•URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la dirección

que localiza una información dentro de Internet.

•HTML: Se trata de un lenguaje para estructurar documentos a partir de texto en World

Wide Web. Este lenguaje se basa en tags (instrucciones que le dicen al texto como deben
mostrarse) y atributos (parámetros que dan valor al tag).

1
 1. PÀGINAS WEB. CARACTERÍSTICAS. TIPOS: ESTÁTICAS Y DINÁMICAS.
CONCEPTO CLIENTE SERVIDOR. NAVEGADORES.

- PÁGINAS WEB:
Una página web se define como un documento electrónico el cual contiene información
textual, visual y/o sonora que se encuentra alojado en un servidor y puede ser accesible
mediante el uso de navegadores. Una página web forma parte de una colección de otras
páginas webs dando lugar al denominado sitio web el cual se encuentra identificado bajo
el nombre de un dominio.
La creación y desarrollo de una página web se realiza bajo un lenguaje de programación
capaz de ser interpretados por los navegadores, lenguajes como el HTML, PHP, ASP, JSP
o RUBY son ejemplos entre otros. Al inicio de la era de internet accesible, sobre los años
90, era necesario el conocimiento de algún lenguaje de programación para el desarrollo
de una web, hoy en día contamos con software especializado capaz de trabajar como un
editor de texto ,estilo Word, que transforman toda la información insertada en un lenguaje
de programación capaz de ser interpretado por los navegadores, programas como
Dreamweaver, Amaya, Sharepoint Designer o Mozilla Composer son entre otros los
denominados WYSIWYG capaces de crear complejas páginas webs con el entorno de un
simple editor de texto.
Una vez que hemos creado y desarrollado nuestras páginas webs es necesario alojarlas
en un servidor el cuál lo podemos definir como un ordenador conectado constantemente a
la intranet privada o a internet cuyo objetivo es poder disponer de la página web a
cualquier hora del día. Para poder acceder al servidor es necesario el uso de programas
denominados clientes FTP, los cuales conectan el ordenador personal donde se ha
desarrollado la página con el servidor donde se alojará, Filezilla, FileFTP o Cute FTP son
entre otros ejemplos de clientes FTP.
Por último, una vez alojadas nuestras páginas webs estas son accesibles mediante el
uso de navegadores los cuales permiten visualizar correctamente la información alojada y
desarrollada, Chrome, Mozilla, Internet Explorer y Safari son entre otros ejemplos de
navegadores ampliamente utilizados.

- CLASIFICACIÓN Y TIPOS DE PÁGINAS WEB:

Podemos agrupar o clasificar todas las páginas webs en 2 grandes grupos:
•Webs estáticas.
•Webs dinámicas.

Las WEBS ESTÁTICAS son aquellas cuya información no varía en un tiempo a medio o
a corto plazo, también se las reconoce puesto que no interactúan con el usuario o
navegante, su lenguaje de programación está basado en HTML y están compuestas
principalmente de textos e imágenes.
Las webs estáticas fueron el primer tipo de páginas que aparecieron durante el
desarrollo y expansión de Internet, su creación y desarrollo es relativamente fácil al
disponer de programas editores de texto que nos permiten programarlas sin tener
conocimiento ninguno sobre HTML, esto es una de las grandes ventajas que presentan
este tipo de páginas. Por otro lado cada vez que se necesite modificar alguna parte de la
web es necesario conectarse al servidor donde está alojado y subir los documentos
modificados, cosa que conlleva tiempo y esfuerzo.

2
 Las WEBS DINÁMICAS son aquellas que son capaces de interactuar con el usuario o
navegante dado a que están conectadas con bases de datos que permiten el desarrollo
de aplicaciones webs, su principal ventaja es la personalización de la web en función del
usuario así como la rapidez de modificación de los contenidos. Este tipo de webs están
desarrolladas bajo lenguajes de programación como PHP, ASP, JSP o RUBY, el manejo
de dichos lenguajes requiere de ciertos conocimientos informáticos.
Las primeras webs dinámicas se crearon a principios de los años 90 a raíz de la
expansión y crecimiento exponencial que adquiría la Red y las nuevas necesidades que
se originaban, el inmenso volumen de información que existía necesitaba disponer de
buscadores al estilo Google, la venta por internet desencadenó el desarrollo de las
primeras webs de comercio electrónico como Amazon, por último la web 2.0 nos condujo
al desarrollo de las primeras redes sociales como Facebook lanzado en el año 2004.

Ejemplos de webs dinámicas. Foros de opinión, redes sociales, tiendas virtuales,

buscadores, gestores de emails o aplicaciones empresariales alojadas en la nube, son
entre otros ejemplos de webs dinámicas.

Las webs dinámicas y estáticas pueden clasificarse a su vez en páginas webs:

•Privadas: Las páginas privadas son aquellas que solo pueden acceder un número
limitado de personas que puedan ser identificadas y reconocidas por el sistema de
acceso.

•Públicas: Las páginas públicas son accesibles por cualquier persona que disponga de
una conexión a Internet.

Ejemplo: Hoy en día dentro de un mismo sitio web existen las 4 clases de páginas
descritas anteriormente, por ejemplo el acceso a nuestra cuenta bancaria es una página
dinámica dado a que el saldo disponible cambia instantáneamente cuando realizamos una
compra, a su vez es una página privada puesto que su acceso está restringido a las
personas que puedan autentificarse mediante claves o password. Pero dentro de la
página web de nuestro banco encontramos páginas estáticas como direcciones de
contacto o información global sobre el sitio como las políticas de uso, a su vez estas
páginas son públicas dado a que se requiere ningún tipo de autentificación para acceder a
ellas.

- DIFERENCIA ENTRE PÁGINAS WEB ESTÁTICAS Y PÁGINAS WEB DINÁMICAS

CON PHP:

¿Cómo reconocer si una web que visitamos es dinámica o estática?

En general, es dinámica aquella que puede interactuar con el visitante y/o administrador
web, pudiéndose modificar el contenido de la página según el momento u opciones
escogidas. Ejemplos de esto son: cuando el usuario puede escribir un comentario,
escoger los productos y ponerlos en un carrito de compras, subir archivos o fotografías,
etc. En este caso SI se utilizan bases de datos y se requiere programación web dinámica.

Las páginas web dinámicas ofrecen muchas ventajas en comparación con las páginas
web estáticas, como una mayor interactividad con el usuario y facilidad para el cambio y
actualización de contenidos.
A las personas que administran las páginas web (webmasters, programadores, gestores

3
de contenidos), la programación dinámica les permite una reducción en tiempo y costos,
así como una mayor facilidad en el mantenimiento de un sitio web.

Ante todas las ventajas de este tipo de páginas cabe citar una desventaja “histórica” en
cuanto a los resultados obtenidos en buscadores como Bing, Google o Yahoo. Hasta hace
unos años, los buscadores consideraban que una web dinámica era no indexable (no
registrables sus contenidos de cara a búsquedas) debido a que no se podía ofrecer como
resultado de un buscador algo que cambiaba con frecuencia.
Esta situación en la actualidad puede considerarse superada: los buscadores se han
sofisticado y son capaces de indexar URL ́s dinámicas sin problemas. Algunas
aplicaciones de software libre como Joomla, Drupal, WordPress, etc. siguen manteniendo
sistemas que permiten convertir las URL ́s dinámicas en URL ́s amigables, pero en
general podemos decir que esto es cada vez menos necesario.

EJERCICIO
Responde a las siguientes preguntas indicando verdadero o falso y justicando
brevemente tu respuesta:
a) Hoy día ya no tiene sentido crear una página web estática, ya que los navegadores
dejarán de admitirlas en un futuro próximo.

b) Podemos reconocer si una página web es dinámica en base a si es capaz de

almacenar información que el usuario proporciona y rescatarla posteriormente. Por
ejemplo: los comentarios en un blog.

c) La mayor parte de los sitios web y gestores de contenidos hoy día se basan en
páginas web dinámicas, pero muchos sitios siguen siendo webs estáticas.

d) Si creamos un sitio web dinámico no podremos ser indexados por buscadores como
Bing, Google o Yahoo.

4
- MODELO CLIENTE-SERVIDOR:
El modelo cliente-servidor consiste básicamente en un cliente que realiza peticiones a
otro programa (el servidor) que le da respuesta.
La tecnología denominada Cliente -Servidor es utilizada por todas las aplicaciones de
Internet/Intranet. Un cliente funciona en su ordenador local, se comunica con el servidor
remoto, y pide a éste información. El servidor envía la información solicitada.

Características:

➢ Espera y recibe las respuestas del servidor.

➢ Por lo general, puede conectarse a varios servidores a la vez.
➢ Normalmente interactúa directamente con los usuarios finales mediante
una interfaz gráfica de usuario.

Los sistemas Cliente-Servidor pueden ser de muchos tipos, dependiendo de las

aplicaciones que el servidor pone a disposición de los clientes. Entre otros, existen:
- Servidores de Impresión, mediante el cual los usuarios comparten impresoras.
- Servidores de Archivos, con el cual los clientes comparten discos duros.
- Servidores de Bases de Datos, donde existe una única base de datos.
- Servidores de Lotus Notes, que permite el trabajo simultáneo de distintos clientes
con los mismos datos o documentos.

5
- ESTRUCTURA Y COMPOSICIÓN DE UN SITIO WEB:

Lo que define el diseño de una página web es la forma de organizar los elementos que
la componen. Hay miles de formas diferentes, pero son pocas las que funcionan y
adquieren el sentido que necesitamos para nuestro trabajo.
Podemos recurrir a estructuras como Bootstrap o 960grid para tener un apoyo
importante. Hoy en día hay muchos frameworks con los cuales podemos basarnos a la
hora de diseñar un nuevo proyecto.

Básicamente, los sitios web se componen y estructuran de la siguiente manera:

Contenedor:
Dentro del contenedor estarán todos los elementos del sitio; módulos, contenidos,
imágenes, etc.
El contenedor puede tener un ancho fijo; el ancho será igual para todos los navegadores
y dispositivos, o uno fluido que se adaptará al ancho de nuestra ventana. Si usamos web
responsive, podemos manejarlo con CSS sin problemas.

Logotipo:
Aquí es dónde debemos dejar la imagen de la empresa, que identificará la marca en todo
el sitio. Puede ser el logotipo de la empresa o el nombre. Al estar arriba acompañara la
navegación por todo el sitio ayudando al reconocimiento de la marca.

6
 Navegación:
La forma más aceptada y fácil, es el menú horizontal, que siempre tiene a mano lo más
importante del sitio web.
Los menús verticales pueden usarse como complementos o sub menús, de los
horizontales, y siempre cerca de la línea horizontal del menú principal y deben ser visibles
en el primer pantallazo, al entrar.

Contenido:
Lo más importante y fundamental de una buena página. Lo que mantiene al visitante
cautivo e interesado. Si el contenido es malo o poco interesante, abandonará la página en
pocos segundos. Para eso, debe estar centralizado y enfocado y a la primera vista. El
mejor lugar debe ser para los contenidos.

Footer:
Localizado al final del sitio, abajo, generalmente dejamos ahí información de Copyright y
legales o menús secundarios. Aunque en los últimos años, se usa mucho para incluir
información de redes sociales, direcciones, noticias.

Espacio Negativo:
Esto es tan importante como el espacio positivo. También llamado espacio blanco, es
todo lo que no tiene información de ningún tipo, pero que cumple un rol importantísimo
para la web; nos ayuda a tener espacios de respiración, a equilibrar y dar balance a todo
el diseño.

- ¿QUÉ ES UN NAVEGADOR, EXPLORADOR O BUSCADOR?

➢ Un Explorador Web o Navegador es un programa que permite visualizar páginas web

en la red además de acceder a otros recursos, documentos almacenados y guardar
información.
➢ El Navegador se comunica con el servidor a través del protocolo HTTP y le pide el
archivo solicitado en código HTML, después lo interpreta y muestra en pantalla para el
usuario.
➢ Los más populares son Internet Explorer, Mozilla Firefox, Safari, Opera y Google
Chrome.

Un navegador o explorador web - conocido en inglés como web browser - es un

programa o software, por lo general gratuito, que nos permite visualizar páginas web a
través de Internet además de acceder a otros recursos de información alojados también
en servidores web, como pueden ser videos, imágenes, audio y archivos XML.
Pero un navegador también nos permite almacenar información o acceder a diferentes
tipos de documentos en el disco duro, etc, acceder a redes privadas, y crear marcadores
(bookmarks).
El acceso a otras páginas web a través de los hiperenlaces (hipervínculos o enlaces) se
llama navegación, término del que deriva el nombre de navegador, aunque una minoría
prefieren llamarlo hojeador que sería la traducción literal de la palabra browser.
Algunos navegadores vienen incorporados a su sistema operativo como es el caso de
Internet Explorer en Windows Microsoft, Safari en Mac OS X, o Firefox, Opera o Flock en
Linux.

7
 Como funcionan los navegadores:
Los navegadores se comunican con los servidores web por medio del protocolo de
transferencia de hipertexto (HTTP) para acceder a las direcciones de Internet (URLs) a
través de los motores de búsqueda.
La mayoría de los exploradores web admiten otros protocolos de red como HTTPS (la
versión segura de HTTP), Gopher, y FTP, así como los lenguajes de marcado o
estándares HTML y XHTML de los documentos web. Los navegadores además
interactúan con complementos o aplicaciones (Plug-ins) para admitir archivos Flash y
programas en Java (Java applets).

Características comunes de los navegadores:

Todos los navegadores incluyen la mayoría de las siguientes características: navegación
por pestañas, bloqueador de ventanas emergentes, soporte para motores de búsqueda,
gestor de descargas, marcadores, corrector ortográfico, y atajos del teclado. Para
mantener la privacidad casi todos los navegadores ofrecen maneras sencillas de borrar
cookies, cachés web y el historial.
Las suites de Internet son aquellos exploradores web que incluyen programas integrados
capaces de leer noticias de Usenet, correos electrónicos, e IRC, que son chats de texto
en tiempo real a través de los protocolos IMAP, NNTP y POP.
Suelen utilizar el protocolo de seguridad HTTPS a través de los protocolos criptográficos
SSL/TLS para proteger los datos de intercambio con los servidores web. También suelen
contar con protección antiphishing y antimalware.

Tipos de navegadores o exploradores web:

Algunos de los navegadores o exploradores web más populares son: Internet Explorer,
Mozilla Firefox, Safari, Opera, Google Chrome y Flock.
Otros navegadores no tan conocidos son: Maxthon, Avant, DeepNet, PhaseOut,
SpaceTime, Amaya...

a) Internet Explorer
Internet explorer (IE) viene integrado en el sistema operativo Windows de Microsoft junto
con el gestor de correo Outlook Express. Ha sido el navegador más utilizado del mundo
desde 1999, aunque desde 2002 ha ido perdiendo cuota de mercado a un ritmo lento pero
constante debido a su importante competidor, Mozilla Firefox, que ha superado incluso a
Internet Explorer en algunas ocasiones.
Con el motor de renderizado (motor de navegación) Trident soporta HTML 4.01, CSS
Level 1, XML 1.0 y DOM Level 1, con pequeñas lagunas de implementación, soporta
también XSLT 1.0 y WD-xsl, y admite parcialmente CSS Level 2 y DOM Level 2 con
importantes deficiencias de implementación, mientras que para MAC el motor de
renderizado es Tasman.
Desde hace tiempo ha estado recibiendo críticas por parte de muchos usuarios que le
atribuyen muchos fallos de seguridad o incompatibilidad con estándares web como el
CSS, XHTML y PNG, y menos funcionalidades que otros exploradores web.
Hay varias versiones de Internet Explorer para los sistemas operativos UNIX y para Mac.
La versión más reciente para Windows es Internet Explorer 8.0. que Microsoft describe
como más rápido, más fácil y más seguro además de permitir al usuario acceder a la
información en menos clicks que otros navegadores.

8
 b) Mozilla Firefox
Mozilla Forefox es un navegador de software libre y código abierto, creado por la
Corporación Mozilla, la Fundación Mozilla y numerosos voluntarios externos. Gran
aceptación por parte de los usuarios que lo definen como más seguro, rápido y de mejor
rendimiento que Internet Explorer, destacando también por su sencillez y fácil manejo.
Su motor de navegación Gecko para visualizar páginas web soporta varios estándares
web incluyendo HTML, XML, XHTML, CSS 1, 2 y 3, SVG 1.1 (parcial), ECMAScript
(JavaScript), DOM, DTD, MathML, XSLT, XPath, además de imágenes PNG con
transparencia alfa.
Es multiplataforma para varias versiones de Microsoft Windows, GNU/Linux, Mac OS X,
y algunos sistemas basados en Explorer, e incluye el software de correo Thunderbird.
Como características añadidas a las habituales de todos los navegadores, Mozilla
Firefox ofrece también múltiples plugins, extensiones add-ons y la posibilidad de
personalizar su apariencia, además Firefox ofrece herramientas muy útiles para los
programadores web como la consola de errores, el inspector DOM o extensiones como
Firebug, por estas razones y el hecho de ser de código abierto es el preferido por los
programadores.

c) Safari
Safari es el navegador creado por Apple Inc. el cual está integrado en el sistema
operativo Mac OS X, en 2007 se creó una versión de Safari para el sistema operativo
Microsoft Windows dando soporte tanto a Windows XP como a Windows Vista, y el
teléfono inteligente iPhone también incorpora Safari a su sistema operativo.
De Safari destacan la velocidad, un diseño muy cuidado, la seguridad y las prestaciones
que ofrece, incluyendo los recursos para diseñadores y programadores.
Su motor de renderizado WebKit está basado en el motor KHTML, desarrollado por el
proyecto KDE para su navegador Konqueror y debido a esto, el motor interno de Safari es
software libre, además Webkit incluye los componentes WebCore y JavaScriptCore.
La nueva versión recién estrenada es Safari 4 que ejecuta JavaScript casi ocho veces
más rápido que IE 8 y más de cuatro veces más rápido que Firefox 3. gracias a su nuevo
motor JavaScript Nitro. Otras características añadidas son la herramienta Top Sites, una
copia del Speed Dial de Opera que muestra los sitios más visitados en un mundo 3D o
Cover Flow, que permite consultar el historial y los favoritos ofreciendo una vista previa a
toda pantalla, entre otras.
El nuevo navegador Safari 4 soporta además los innovadores estándares HTML 5 y CSS
con unas avanzadas aplicaciones web multimedia, fuentes tipográficas y gráficos, y es el
primer navegador que superó la prueba Acid3 que examina si los navegadores cumplen
los estándares web CSS, JavaScript, XML,DOM, ECMAScript y SVG.

d) Opera
Desarrollado por Opera Software company, Opera es además de un navegador una suite
de Internet gratuita desde su versión 8.50.
Reconocido por su gran velocidad, seguridad y constante innovación, Opera es también
reconocido por su soporte de estándares - a través de su motor de navegación Presto - en
especial CSS 2.1, además de HTML 4.01, XHTML 1.1, XHTML Basic, XHTML Mobile
Profile, WML 2.0, XSLT, XPath, XSL-FO, ECMAScript 3 (JavaScript), DOM 2, Unicode,
SVG 1.1 Basic, GIF89a, JPEG, HTTP 1.1, y completo soporte para PNG, incluyendo
transparencia alfa, entre otros.
Opera fue el primer navegador que implementó el sistema de pestañas, y además de las
características comunes de todos los navegadores, Opera también incluye Speed Dial,

9
personalización por sitio, vista en miniatura por pestaña y los movimientos del ratón en la
navegación, y tiene incorporado el cliente de correo Opera Mail y un chat IRC.
El navegador web Opera es multiplataforma para las versiones para Windows,
GNU/Linux, Mac OS X, Solaris, QnX, OS/2, Symbian OS, FreeBSD y BeOS, entre otros,
además de Opera Mini para móviles sencillos y Opera Mobile para teléfonos inteligentes y
ordenadores de bolsillo, así como dispositivos de Java ME-enabled.
Opera es el único navegador disponible para la nueva generación de videoconsolas
Nintendo DS y Wii, también algunas decodificadores digitales de televisión usan Opera, y
Adobe Systems integró la tecnología de Opera para usarla en Adobe Creative Suite.

e) Google Chrome
Google Chrome es el navegador creado por Google en 2008 y se basa en el proyecto de
software libre y código abierto Chromium, el motor de navegación de WebKit y su
estructura de aplicaciones.
Para conseguir su objetivo principal de facilitar un navegador con mayor velocidad,
seguridad y estabilidad, Google Chrome combina tecnología sofisticada y un diseño
minimalista, además de ofrecer una interfaz gráfica de usuario más sencilla y eficaz.
Google Chrome está disponible para Microsoft Windows, para los usuarios de Windows
Vista y Windows XP SP2, mientras que en junio de 2009 salió la versión de Google
Chrome para Mac OS X (Leopard) y Linux destinada principalmente para los
desarrolladores web, pues como advierten desde Google son aún muy poco estables e
incluso recomiendan no descargar estas versiones pues cuenta con limitaciones
importantes con un software incompleto e impredecible.
A través del motor de renderizado Webkit Google Chrome soporta los estándares HTML,
Javascript y CSS, cuyo proceso de instalación no requiere reiniciar el navegador para
empezar a funcionar, además de hacerse como proceso independiente, al modo de las
pestañas, de manera que si una de las ventanas falla no afecta al resto ni al navegador.
La nueva versión de Google Chrome soporta varios elementos adicionales (add-ons)
muy útiles, entre ellos están Dual View Plugin, que divide el panel de visualización en dos
mitades permitiéndote navegar por dos sitios simultáneamente; ChromePass, que
recupera contraseñas y nombres de usuario almacenadas en el navegador Google
Chrome; o XChrome, un completo gestor de temas que además instala diferentes skins
con el click de un botón.
Desde que saliera Google Chrome 3.0 en mayo de 2009 muchos aclaman su velocidad;
implementación de distintas partes de HTML 5; poder reproducir vídeos a través de la
etiqueta "vídeo" sin necesidad de utilizar Flash; o la aplicación Google Wave que va a
revolucionar la forma de compartir información pues además de permitir a los usuarios
charlar y compartir documentos, mapas y enlaces en tiempo real, también permite
múltiples formas de interacción basados en la nube (Cloud computing)... entre otras.

10
2. LENGUAJE HTML. CONCEPTOS BÁSICOS. PLANTILLAS, TABLAS, LISTAS,
MARCOS Y FORMULARIOS.

- HTML

HTML es un lenguaje de programación que se utiliza para el desarrollo de páginas

de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es
decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de
Formato de Documentos para Hipertexto.
Se trata de un formato abierto que surgió a partir de las etiquetas SGL (Standard
Generalized Markup Language). Concepto traducido generalmente como “Estándar de
Lenguaje de Marcado Generalizado” y que se entiende como un sistema que permite
ordenar y etiquetar diversos documentos dentro de una lista. Este lenguaje es el que se
utiliza para especificar los nombres de las etiquetas que se utilizarán al ordenar. N o
existen reglas para dicha organización, por eso se dice que es un sistema de formato
abierto.

EL HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen
como textos y sobre su estructura, complementando dicho texto con diversos objetos
(como fotografías, animaciones, etc).
Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen
que ver con el formato de los documentos. El texto en él se crea a partir de etiquetas,
también llamadas tags, que permiten interconectar diversos conceptos y formatos.
Para la escritura de este lenguaje, se crean etiquetas que aparecen especificadas a
través de corchetes o paréntesis angulares: < y >. Entre sus componentes,
los elementos dan forma a la estructura esencial del lenguaje, ya que tienen dos
propiedades (el contenido en sí mismo y sus atributos).
Por otra parte, cabe destacar que el HTML permite ciertos códigos que se conocen
como scripts, los cuales brindan instrucciones específicas a los navegadores que se
encargan de procesar el lenguaje. Entre los scripts que pueden agregarse, los más
conocidos y utilizados son JavaScript y PHP.
El marcado estructural es el que estipula la finalidad del texto, aunque no define cómo se
verá el elemento. El marcado presentacional, por su parte, es el que se encarga de
señalar cómo se verá el texto más allá de su función.
Para conocer el código HTML que utiliza una página web, hay que seleccionar Ver código
fuente en nuestro navegador (como Internet Explorer o Mozilla Firefox). Al elegir esta
opción, se abrirá el editor de texto con el código HTML de la página que se está

11
visualizando.

- BREVE HISTORIA DEL HTML:

Este lenguaje fue desarrollado por la Organización Europea de Investigación
Nuclear (CERN) en el año 1945 con la finalidad de desarrollar un sistema de
almacenamiento donde las cosas no se perdieran, que pudieran ser conectadas a través
de hipervínculos. Primeramente crearon un dispositivo llamado “memex”, el cual era
considerado como un suplemento para la memoria.
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 formaran parte del CERN).
El norteamericano Tim Berners-Lee fue el primero en proponer una descripción de HTML
en un documento que publicó en 1991. Allí describía veintidós componentes que suponen
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
debía ser comprendido, tanto por ordenadores como por mega-estaciones, por eso fue
necesario crear uno absolutamente simple, tanto en lo que respectaba al lenguaje de
intercambio (HTML), como el que hacía referencia al protocolo de red (HTTP).

Al día de hoy existen los Editores Web que permiten que los diseñadores, a través de
herramientas gráficas que reciben el nombre de WYSIWYG puedan crear páginas web sin
conocer el código html, este se crea de forma automatizada, dándole estructura a la web y
permitiendo que sea más allá del ordenador donde es creada. Entre los recursos que
pueden enlazarse al código HTML se encuentran fotografías, vídeos, archivos de otras
webs o incluso de la misma y todo tipo de contenido que se encuentre subido a la red.

12
3. ENLACES, VÍNCULOS O HIPERENLACES. TIPOS Y CARACTERÍSTICAS.

- ¿QUÉ ES UN LINK (ENLACE, HIPERVÍNCULO, HIPERENLACE O VÍNCULO)?:

Un link (o dicho de otro modo enlace, hipervínculo, hiperenlace o vínculo) es el recurso

de un documento electrónico que permite dirigir al internauta a otro documento
electrónico.

El link está formado por dos puntos o anclas y una dirección, el punto de origen o ancla
de origen parte de una página web a través de una dirección a otro punto concreto o
ancla de destino de otra página web. Se trata de lo que llamamos link externo.

Si se trata de un link que lleve de una determinada sección de una página web a otra
sección de la misma página web se trata de un link interno. Generalmente los link se
visualizan en un documento electrónico mediante textos (palabras) o imágenes.

Algunos link están destacados en subrayado o en negrita para indicar al internauta que
de ellos parte un link hacia otro destino. En otras ocasiones pasando el cursor sobre el
texto o imagen de los que parten los links, estos pueden cambiar de color o modificar el
aspecto del cursor en pantalla cambiando la flecha por un dedo. De este modo se
visualiza la posibilidad de clicar sobre el mismo. Los link también pueden cambiar su
aspecto o color si ya han sido visitados.

Hay algunos link que también pueden activar un texto informativo.

13
4. TIPOGRAFÍA PARA LA WEB. CARACTERÍSTICAS: TIPOS DE FUENTE, CUERPO,
INTERLINEADO, TIPO DE PÁRRAFO Y OTROS.

- TIPOGRAFÍAS:
Tradicionalmente, el uso de tipografías en el diseño web ha sido un problema. Por
defecto, los navegadores web solo podían presentar el texto con las tipografías que el
usuario tenga instaladas en su sistema operativo (Windows, Mac, Linux,…). Actualmente
esta limitación se ha solucionado, pero los efectos web que se pueden realizar a las
tipografías (negrita, subrayado, alienación…) continúan siendo muy limitados.

- IMÁGENES CON TEXTO:

Una posible solución a este problema con las tipografías es utilizar imágenes, lo cual nos
permitirá crear cualquier efecto que queramos a las tipografías.

Pero, aunque la utilización de imágenes sea muy útil y utilizada para los títulos, menús, y
otras partes del web, existen diversas limitaciones que tenemos que tener en cuenta.
Básicamente, nunca se recomienda utilizar imágenes para presentar textos largos,
porque:
➢ La página web tardaría mucho a cargarse.
➢ Los buscadores no podrían indexar el texto. Si el texto a presentar es corto (por
ejemplo un menú) se puede poner un texto alternativo "detrás" la imagen, sin penalizar
en los buscadores.
➢ El texto no se podría utilizar en bloques fluidos (Si el texto no es imagen
automáticamente se adapta al espacio disponible).

14
➢ El usuario no puede aumentar el texto y algunos pueden tener problemas de legibilidad.
➢ El texto sería complicado de actualizar.
Además, si la página web es generada por un programa y se toma el texto de una base de
datos, es complicado utilizar imágenes para presentar el texto.

- TIPOGRAFÍAS WEB:
Con las nuevas tecnologías web, los nuevos navegadores pueden presentar cualquier
fuente que queramos utilizar, como si se enviara la fuente junto al web. La ventaja,
respecto la utilización de imágenes, es que el texto es encontrado mejor por los
buscadores, además se puede utilizar para presentar textos desde bases de datos.

De todos modos, la mayoría de programadores web siguen utilizando las llamadas

“tipografías seguras”, definiendo un listado de tipografías que se van a intentar utilizar en
orden establecido (Si la primera fuente no está disponible en el ordenador del usuario, la
segunda fuente será utilizada y así sucesivamente). Los grupos de fuentes más utilizados
son los siguientes:
➢ Verdana, Geneva, sans-serif
➢ Georgia, Times New Roman, Times, serif
➢ Courier New, Courier, monospace
➢ Arial, Helvetica, sans-serif
➢ Tahoma, Geneva, sans-serif
➢ Trebuchet MS, Arial, Helvetica, sans-serif
➢ Arial Black, Gadget, sans-serif
➢ Times New Roman, Times, serif
➢ Palatino Linotype, Book Antiqua, Palatino, serif
➢ Lucida Sans Unicode, Lucida Grande, sans-serif
➢ MS Serif, New York, serif
➢ Lucida Console, Monaco, monospace
➢ Comic Sans MS, cursive

Con independencia de la tipografía utilizada, deberemos definir su tamaño. Normalmente,

las tipografías se trabajan en píxeles, que son equivalentes a puntos cuando la resolución
de la pantalla es de 72 ppp (píxeles por pulgada).
A modo de orientación, trabajar con 11 o 12 píxeles facilita la lectura de la mayoría de las
tipografías, y casi nunca se trabaja con tipografías menores a 8 o 9 píxeles.
Opcionalmente, en vez de trabajar con píxeles, podemos definir el tamaño de una
tipografía como un porcentaje de la tipografía "media" definida en el ordenador del
usuario.

15
- EFECTOS EN LA TIPOGRAFÍA:
Por defecto, las características o efectos que podemos escoger en cualquier texto web
son:
➢ Color.
➢ Normal, negrita, cursiva, subrayado...
➢ Alinear a derecha, izquierda, centro, justificado
➢ Tamaño de fuente. Se puede definir en píxeles o en un tamaño relativo (pequeño,
grande...)
➢ Espaciado de palabras, espaciado de letras, espaciado entre parágrafos...
➢ Sombreados o gradientes de colores (solo en algunos navegadores web)
➢ Otros

A parte de las anteriores posibilidades, el texto web tiene muchas limitaciones.

Por ejemplo, la mayoría de navegadores no pueden representar texto en 3D o con un
ángulo de rotación (por ejemplo a 45º), sólo sería posible hacerlo con imágenes, aunque
eso plantea las limitaciones ya descritas.

- COMPORTAMIENTO DEL TEXTO CON BLOQUES:

Otra limitación a tener en cuenta al diseñar una página web es que el texto se puede
adaptar automáticamente alrededor de bloques rectangulares (por ejemplo imágenes) que
estén alineados a la derecha o a la izquierda. Pero no es posible (o sería muy complicado)
que el texto se adapte automáticamente alrededor de formas no rectangulares.

Por ejemplo, si tenemos que presentar un texto así, el texto se debería de presentar cómo
una imagen, con sus problemas asociados. Así pues, siempre es mejor diseñar teniendo
en cuenta estas limitaciones.

Este bloque web se debería generar como una imagen.

16
Este bloque es posible generarlo como una imagen más el texto.

17
5. HOJAS DE ESTILO. LENGUAJE CSS.

- DEFINICIÓN DE CSS - ¿QUÉ SON LAS HOJAS DE ESTILO?

CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un
lenguaje que describe la presentación de los documentos estructurados en hojas de estilo
para diferentes métodos de interpretación, es decir, describe como se va a mostrar un
documento en pantalla, por impresora, por voz (cuando la información es pronunciada a
través de un dispositivo de lectura) o en dispositivos táctiles basados en Braille.

- ¿PARA QUE SIRVE?

CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para
permitir la separación de los contenidos de los documentos escritos en HTML, XML,
XHTML, SVG, o XUL de la presentación del documento con las hojas de estilo, incluyendo
elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando
la apariencia de una página web de una forma más sencilla, permitiendo a los
desarrolladores controlar el estilo y formato de sus documentos.

- ¿CÓMO FUNCIONA?
El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en
los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla
consiste en un selector y una declaración, esta última va entre corchetes y consiste en
una propiedad o atributo, y un valor separados por dos puntos.

Ejemplo:
h2 {color: green;}
• h2 ---> es el selector
• {color: green;} ---> es la declaración
• color ---> es la propiedad o atributo
• green ---> es el valor

Selector:
El Selector especifica que elementos HTML van a estar afectados por esa declaración,
de manera que hace de enlace entre la estructura del documento y la regla estilística en la
hoja de estilo.

Declaración:
La Declaración, que va entre corchetes, es la información de estilo que indica cómo se va
a ver el selector. En caso de que haya más de una declaración se usa punto y coma para
separarlas.

Propiedad o Atributo y Valor:

Dentro de la declaración, la Propiedad o Atributo define la interpretación del elemento
asignándosele un cierto Valor, que puede ser color, alineación, tipo de fuente, tamaño...,
es decir, especifican qué aspecto del selector se va a cambiar.

18
 Tres tipos de estilos
La información CSS se puede proporcionar por varias fuentes, ya sea adjunto como un
documento, por separado o incorporado en el documento HTML, y dentro de estas
posibilidades destacan tres formas de dar estilo a un documento web:

Hoja de Estilo Externa

La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo con el
código HTML al estar vinculado a través del elemento link, que debe ir situado en la
sección head. Es la manera de programar más eficiente, ya que separa
completamente las reglas de formato para la página HTML de la estructura básica
de la página.

Hoja de Estilo Interna

La Hoja de Estilo Interna está incorporada a un documento HTML, a través del
elemento style, dentro de la sección head, consiguiendo de esta manera separar la
información del estilo del código HTML.

Estilo en Línea
El Estilo en Línea sirve para insertar el lenguaje de estilo directamente dentro de la
sección body con el elemento style. Sin embargo, este tipo de estilo no se
recomienda pues se debe intentar siempre separar el contenido de la presentación.

- VERSIONES CSS
Existen varias versiones: CSS1, CSS2, y CSS3 desarrolladas por el CSS WG
(Cascading Style Sheets Working Group).
- Los navegadores actuales implementan bastante bien CSS1 desde 1999 (tres años
después de su lanzamiento) aunque dependiendo de la marca y versión del navegador
hay algunas pequeñas diferencias de implementación. El primer navegador en dar soporte
completo al CSS1 ha sido Internet Explorer 5.0 for the Macintosh en 2000, anteriormente
el que mejor soportaba CSS1 haba sido Opera, después otros navegadores también lo
han ido implementando.
- Sin embargo, CSS2 (lanzado en 1998) sólo está parcialmente implementado en los
navegadores más recientes, variando en estos los niveles de implementación.
- A diferencia de CSS2, que fue una única especificación que definía varias
funcionalidades, CSS3 está dividida en varios documentos separados, llamados
"módulos".
Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se
preservan las anteriores para mantener la compatibilidad.
Los trabajos en el CSS3, comenzaron a la vez que se publicó la recomendación oficial de
CSS2, y los primeros borradores de CSS3 fueron liberados en junio de 1999. Debido a la
modularización del CSS3, diferentes módulos pueden encontrarse en diferentes estados
de su desarrollo, hay alrededor de cincuenta módulos publicados, tres de ellos se
convirtieron en recomendaciones oficiales de la W3C en 2011: "Selectores", "Espacios de
nombres" y "Color".

19
 - VENTAJAS DE CSS
➢ La principal ventaja de CSS sobre el lenguaje HTML o similar, es que el estilo se
puede guardar completamente por separado del contenido siendo posible, por ejemplo,
almacenar todos los estilos de presentación para una web de 10.000 páginas en un sólo
archivo de CSS.
➢ CSS permite un mejor control en la presentación de un sitio web que los elementos
de HTML, agilizando su actualización.
➢ Aumento de la accesibilidad de los usuarios gracias a que pueden especificar su
propia hoja de estilo, permitiéndoles modificar el formato de un sitio web según sus
necesidades, de manera que por ejemplo, personas con deficiencias visuales puedan
configurar su propia hoja de estilo para aumentar el tamaño del texto.
➢ El ahorro global en el ancho de banda es notable, ya que la hoja de estilo se
almacena en cache después de la primera solicitud y se puede volver a usar para cada
página del sitio, no se tiene que descargar con cada página web. Por otro lado, quitando
todo lenguaje de marcado en la presentación en favor del uso de CSS reduce su tamaño y
ancho de banda hasta más del 50%, esto beneficia al dueño del sitio web con menos
ancho de banda y costes de almacenamiento, as como a los visitantes para los cuales las
páginas se van a cargar más rápido.
➢ Una página puede tener diferentes hojas de estilo para mostrarse en diferentes
dispositivos, como pueden ser impresoras, lectores de voz, o móviles.

- ¿QUÉ DIFERENCIA HAY ENTRE CSS Y HTML?

HTML se usa para estructurar el contenido y CSS se usa para formatear el contenido
previamente estructurado.

20
6. LEGIBILIDAD PARA LA WEB. USABILIDAD. PARÁMETROS DE USABILIDAD Y
ACCESIBILIDAD.

- USABILIDAD WEB Y ACCESIBILIDAD

Si se tiene un sitio web, además de conseguir visitas, también se quiere que quienes
lleguen hasta allí pasen el mayor tiempo posible y, sobre todo, que interactúen con la
web de la forma que queremos. Comprando si es una tienda online, leyendo y
compartiendo los artículos si es un blog o suscribiéndose a la newsletter…

“En Internet, la usabilidad es una condición necesaria para sobrevivir”. Ésta es una
de las frases más repetidas por Jakob Nielsen, considerado el rey de la usabilidad.
En un momento en el que los usuarios de una web son multitarea y en muchas ocasiones
hacen varias cosas a la vez, quien visita nuestra web debe poder leer la información de
forma clara y encontrar aquello que está buscando de una forma sencilla. Y si nosotros no
se lo ofrecemos en nuestra página la abandonará y visitará otra en la que sí pueda
encontrarlo.

- DEFINICIÓN DEL TÉRMINO: ¿QUÉ ES USABILIDAD?

Este concepto “se refiere a la facilidad con que las personas pueden utilizar una
herramienta particular o cualquier otro objeto fabricado por humanos con el fin de alcanzar
un objetivo concreto”.
Aplicado a un sitio web, se refiere a la forma de diseñar y estructurar el contenido de una
web de modo que los usuarios encuentren lo que buscan y necesitan de la forma más
sencilla posible.
Por ejemplo, que un usuario que llega a una tienda online pueda efectuar la compra de
un producto de una forma clara, entendiendo en todo momento qué está haciendo y cómo
tiene que finalizar esa compra

¿Qué tenemos que tener en cuenta para que quien llegue a nuestro sitio web pueda
interactuar de forma correcta?
Intervienen varios elementos, pero a la hora de diseñar un nuevo sitio o rediseñar uno
existente, se debe tener en cuenta que con una página amigable es más sencillo evitar los
rebotes, fidelizar a los usuarios y conseguir que vuelvan a visitarnos.
- RECOMENDACIONES DE USABILIDAD:

1. Propósito del sitio: debe quedar claro en un primer vistazo “de qué va” nuestro sitio
web. Si es una tienda, un blog, una web corporativa… Evita los elementos que puedan
confundir y sitúa en la portada aquello que quieras destacar.
Por ejemplo, si es la web de una clínica dental, cuando alguien llegue a la web debe ver
en portada información sobre la clínica.

2. Equilibrio entre diseño e información: no debe primar ninguno de los dos, sino que
deben “colaborar” para construir una web amigable. Además, hay que vigilar la cantidad
de información que hay en el sitio, porque es mejor calidad que cantidad. No hace falta
tener una web sobrecargada en la que el usuario no sepa por dónde empezar. Y si es

21
necesario que tu sitio contenga gran cantidad de información, ésta debe estar muy
organizada.

3. Cuida los enlaces: vigila que no existan enlaces rotos. Puede que en un artículo que
escribiste hace tiempo añadieras algún enlace que ya no existe. Esto da mala imagen,
nos penaliza en los buscadores y, sobre todo, hace que la web sea menos confiable para
el visitante.

4. Introduce llamadas a la acción: está comprobado que los usuarios no leen la página,
sino que la escanean buscando lo que les interesa. Por eso conviene ayudarles en esta
tarea con destacados o botones identificables mediante los que realizar una acción (en
lugar de textos tipo “pinche aquí”, los botones pueden llevar textos como “añadir al carrito”
o “descargar”). Y recuerda que estos objetos deben estar bien visibles.

5. Diseño de calidad y coherente: esto incluye una estructura de contenidos sencilla y

lógica, y un diseño común en todas las áreas que “colabore” con la información que hay
en el sitio web. Es conveniente que la paleta de colores sea coherente y que los enlaces
se diferencien del resto del texto. Es mejor una web sencilla, con una estructura clara y
con pocos colores que una multicolor y con diferentes diseños, que lo único que consigue
es distraer al usuario y no permitirle navegar de forma cómoda.

6. Legibilidad: las tipografías deben ser claras, los textos deben estar escritos en un
color que contraste con el fondo, que sea fácilmente legible y que no moleste (porque hay
colores que resultan muy cansados cuando se trata de leer un texto). Además, el tamaño
de la letra también debe ser adecuado. Ten en cuenta que cada vez más gente accede a
Internet desde smartphones o tabletas, y en estos dispositivos las pantallas son más
pequeñas que en un ordenador.

7. Usa los espacios en blanco: ayudan a estructurar la página, a diferenciar entre unos
contenidos y otros, a separar secciones, columnas… Y también permiten un “descanso”
para el usuario que visita el sitio web.

8. Dar a las imágenes la importancia que tienen: es cierto que las imágenes ayudan a
posicionar y a hacer la web más confortable para el usuario, pero no debemos poner
cualquier imagen, sino aquellas que vayan acordes con el tema del sitio web.
Por mucho que una imagen de gatitos sea muy mona y que mucha gente la vaya a
compartir en Facebook, si tu web no es de una clínica veterinaria o una tienda de
productos para animales seguramente no tendrá mucho sentido.
Cuidar el contenido de las imágenes, su calidad y su tamaño también otorgará un
aspecto de seriedad a nuestra página.

9. Interfaz sencilla e intuitiva: los usuarios que llegan por primera vez deben aprender
fácilmente cómo funciona el sitio y dónde encontrar cada cosa. Y quienes vuelvan deben
recordar sin esfuerzo cómo navegar por la web.

10. Menú de navegación claro: debe estar bien estructurado y diseñado de una forma
lógica, con los contenidos agrupados. Además, no debe ser muy extenso y es
recomendable que no contenga muchos submenús. También es aconsejable añadir un
menú en el pie de página o footer en el que se incluya alguna información básica de la
web como la política de privacidad o el aviso legal.

22
 11. Acceder al contenido en el menor número de clicks: hay que intentar aplicar
la ley de los 3 clicks, que el usuario sea capaz de encontrar lo que quiere o necesita en
solo tres clicks. Esto es especialmente importante a la hora de diseñar una tienda online,
porque si el usuario tiene que dar muchos pasos antes de llegar al producto puede
abandonar el proceso de compra sin completarlo.

12. Tiempo de carga y peso de la web: debe ser el mínimo posible. Como norma
general, el sitio web no debería tardar más de cinco segundos en cargar. Es posible
que algunos usuarios no se esperen a que termine de cargar y, además, una web que
tarda en cargar nos penaliza en materia de SEO. Recuerda que quienes acceden desde el
móvil o desde una tableta tienen los datos más limitados, y una web con mucho peso
puede consumir muchos recursos y provocar que no vuelvan a visitarnos.

13. Compatibilidad con navegadores y dispositivos: es lo que se denomina

diseño responsive, que se adapta a las diferentes pantallas. A la hora de diseñar la web
debemos tener en cuenta la diversidad de sistemas operativos y los navegadores que
tiene cada uno.

14. Buscador: debe situarse en el lado superior derecho. Y, aunque parezca una
tontería, asegúrate de que funciona. En general, la parte superior derecha es la mejor
zona para colocar los elementos que requieren interacción, como los iconos de redes
sociales, contacto o el carrito de la compra.

15. Respeta los estándares de accesibilidad publicados por el World Wide Web
Consortium (la W3C), el máximo organismo, dentro de la jerarquía de Internet, que se
encarga de promover la accesibilidad. Evidentemente, para conseguir que nuestro sitio
tenga unos altos estándares de usabilidad debemos diseñarlo para todo el mundo, y hay
gente que tiene determinadas necesidades a la hora de acceder a Internet.
Generalmente pensamos que una web accesible beneficia sólo a las personas con algún
tipo de discapacidad, pero no es así. Una web accesible beneficia a todo el mundo.

23
- LEGIBILIDAD Y DISEÑO WEB: ¿CÓMO LOGRAR QUE LOS USUARIOS NOS LEAN?

La legibilidad del texto (es decir, la facilidad con que puede leerse) juega un rol
importante en la usabilidad de un sitio web, ya que incide directamente en la forma en que
los usuarios procesan la información. Una mala legibilidad espanta a los lectores y los
aleja del contenido. Una buena legibilidad, en cambio, les permite absorber la información
que se les presenta. Los factores que afectan a la legibilidad son los que conforman la
estructura del texto:

➢ Jerarquía. Consiste en la diferenciación de distintos bloques de texto. Los cambios

de tipografía ayudan a organizar el contenido de acuerdo con su importancia: títulos,
subtítulos, epígrafes y cuerpo del texto deberán llevar distintos tamaños, colores o
fuentes.
➢ Contraste. Un buen contraste entre las letras y el fondo hará el texto agradable a la
vista, fácil de “barrer” con la mirada y, finalmente, más legible. Un mal contraste
obligará al usuario a esforzar la vista, ralentizando la lectura y contribuyendo a una
experiencia desagradable.
➢ Interlineado. El espacio entre líneas individuales de texto es un factor importante.
No debe ser ni muy amplio ni muy estrecho: sólo lo necesario para ayudar a un buen
“barrido” del texto.
➢ Espaciado entre letras. Una distancia normal entre las letras ayuda a una lectura
fluida.
➢ Longitud de línea. La cantidad de palabras por línea suele ser injustamente
olvidada. Una buena longitud de línea es la que permite a los ojos del usuario terminar
una línea y saltar a la siguiente de manera natural.
➢ El uso ocasional de negritas ayuda al lector a “barrer” el texto sin perderse pasajes
importantes y vuelve más amena la lectura.
➢ Las itálicas o cursivas pueden ser efectivas en el título, pero no en el cuerpo del
texto, ya que enfatizan menos que las negritas y resultan poco legibles cuando la letra
es pequeña.
➢ El subrayado es más efectivo que la cursiva, pero puede hacer que una frase se
confunda con un enlace, así que debe utilizarse con cuidado.

Un sitio web legible motiva al usuario a permanecer un buen tiempo recorriéndolo. Así,
aumenta la probabilidad de que se interese en nuestros productos o servicios y decida
adquirirlos.

24