Programacion_web_en_el_entorno_del_cliente_Lopez_Sanz,_Marcos

Vista previa del material en texto

La presente obra está dirigida a los estudiantes de certificados de profesionalidad de 
nivel 3; en concreto, a los del módulo formativo Programación Web en el Entorno 
Cliente, que está incluido dentro del certificado de profesionalidad Desarrollo de 
aplicaciones con tecnologías Web.
Los contenidos incluidos en este libro abarcan conceptos relacionados con los 
lenguajes y técnicas involucradas en el desarrollo de soluciones Web en el entorno del 
cliente, así como las arquitecturas y herramientas propias del diseño de páginas Web, 
pasando por la definición de características dinámicas, multimedia o la provisión de 
características tales como la usabilidad o la accesibilidad en entornos cliente. 
Los capítulos incluyen todo tipo de ejemplos, imágenes, tablas y casos prácticos, con 
el propósito de facilitar la asimilación de los conocimientos tratados.
9
7
8
8
4
9
9
6
4
5
9
5
7
PROGRAM
ACIÓN W
EB EN EL ENTORNO CLIENTE
PROGRAMACIÓN WEB EN EL 
ENTORNO CLIENTE
Programación Web en el Entorno Cliente
CERTIFICADO DE PROFESIONALIDADCERTIFICADO DE PROFESIONALIDAD
www.ra-ma.es/cp
9 7 8 8 4 9 9 6 4 5 9 5 7
MARCOS LÓPEZ SANZ
DIANA M. SÁNCHEZ FÚQUENE
ÁNGEL MORENO PÉREZ
MAXIMILIANO PAREDES VELASCO
JAIME URQUIZA FUENTES
JUAN MANUEL VARA MESA
CP
MF0491_3[ ]
PROGRAMACIÓN WEB 
EN EL ENTORNO CLIENTE
PROGRAMACIÓN WEB 
EN EL ENTORNO CLIENTE
MARCOS LÓPEZ SANZ
DIANA M. SÁNCHEZ FÚQUENE
ÁNGEL MORENO PÉREZ
MAXIMILIANO PAREDES VELASCO
JAIME URQUIZA FUENTES
JUAN MANUEL VARA MESA
PROGRAMACIÓN WEB EN EL ENTORNO CLIENTE
© MARCOS LÓPEZ SANZ, DIANA M. SÁNCHEZ FÚNQUENE, ÁNGEL MORENO PÉREZ, 
MAXIMILIANO PAREDES VELASCO, JAIME URQUIZA FUENTES, JUAN MANUEL VARA MESA.
© De la Edición Original en papel publicada por Editorial RA-MA 
ISBN de Edición en Papel:978-84-9964-595-7
Todos los derechos reservados © RA-MA, S.A. Editorial y Publicaciones, Madrid, España. 
MARCAS COMERCIALES. Las designaciones utilizadas por las empresas para distinguir sus productos 
(hardware, software, sistemas operativos, etc.) suelen ser marcas registradas. RA-MA ha intentado a lo largo de 
este libro distinguir las marcas comerciales de los términos descriptivos, siguiendo el estilo que utiliza el 
fabricante, sin intención de infringir la marca y solo en beneficio del propietario de la misma. Los datos de los 
ejemplos y pantallas son ficticios a no ser que se especifique lo contrario. 
RA-MA es una marca comercial registrada. 
Se ha puesto el máximo empeño en ofrecer al lector una información completa y precisa. Sin embargo, RA-MA 
Editorial no asume ninguna responsabilidad derivada de su uso ni tampoco de cualquier violación de patentes ni 
otros derechos de terceras partes que pudieran ocurrir. Esta publicación tiene por objeto proporcionar unos 
conocimientos precisos y acreditados sobre el tema tratado. Su venta no supone para el editor ninguna forma de 
asistencia legal, administrativa o de ningún otro tipo. En caso de precisarse asesoría legal u otra forma de ayuda 
experta, deben buscarse los servicios de un profesional competente. 
Reservados todos los derechos de publicación en cualquier idioma. 
Según lo dispuesto en el Código Penal vigente ninguna parte de este libro puede ser reproducida, grabada en 
sistema de almacenamiento o transmitida en forma alguna ni por cualquier procedimiento, ya sea electrónico, 
mecánico, reprográfico, magnético o cualquier otro sin autorización previa y por escrito de RA-MA; su contenido 
está protegido por la Ley vigente que establece penas de prisión y/o multas a quienes, intencionadamente, 
reprodujeren o plagiaren, en todo o en parte, una obra literaria, artística o científica. 
Editado por: 
RA-MA, S.A. Editorial y Publicaciones 
Calle Jarama, 33, Polígono Industrial IGARSA 
28860 PARACUELLOS DE JARAMA, Madrid 
Teléfono: 91 658 42 80 
Fax: 91 662 81 39 
Correo electrónico: editorial@ra-ma.com 
Internet: www.ra-ma.es y www.ra-ma.com 
Maquetación y diseño portada: Antonio García Tomé 
ISBN: 978-84-9964-596-4 
E-Book desarrollado en España en Octubre de 2015 
La ley prohíbe 
Copiar o Imprimir este libro 
A nuestras familias, 
por la paciencia y su constante apoyo.
Índice
7
INTRODUCCIÓN ....................................................................................................................................................13
CAPÍTULO 1. DISEÑO WEB ..................................................................................................................................15
1.1 PRINCIPIOS DE DISEÑO WEB ......................................................................................................................16
1.1.1 Diseño orientado al usuario ....................................................................................................................19
1.1.2 Diseño orientado a objetivos ...................................................................................................................20
1.2 EL PROCESO DE DISEÑO WEB .....................................................................................................................22
1.2.1 Fase 1: Captura de información ..............................................................................................................22
1.2.2 Fase 2: Planificación ................................................................................................................................22
1.2.3 Fase 3: Diseño ..........................................................................................................................................23
1.2.4 Fase 4: Desarrollo ....................................................................................................................................23
1.2.5 Fase 5: Prueba y entrega .........................................................................................................................24
1.2.6 Fase 6: Mantenimiento ............................................................................................................................24
1.3 TEST DE CONOCIMIENTOS ..........................................................................................................................25
CAPÍTULO 2. LENGUAJES DE MARCADO GENERALES ............................................................................27
2.1 CARACTERÍSTICAS GENERALES Y TIPOS DE LENGUAJES ...................................................................28
2.1.1 Lenguajes de marcas procedimentales ...................................................................................................28
2.1.2 Lenguajes de marcado general (GML) ...................................................................................................29
2.1.3 Lenguajes para conjuntos de reglas de marcado generales ..................................................................29
2.2 ESTRUCTURA GENERAL DE UN DOCUMENTO CON LENGUAJE DE MARCADO ..............................30
2.3 DOCUMENTOS VÁLIDOS Y BIEN FORMADOS ...........................................................................................30
2.4 TEST DE CONOCIMIENTOS ..........................................................................................................................32
CAPÍTULO 3. LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB ......................35
3.1 HISTORIA DE HTML .......................................................................................................................................36
3.1.1 Cómo trabajar con etiquetas ...................................................................................................................37
3.2 ESTRUCTURA DE UN DOCUMENTO HTML ...............................................................................................39
3.2.1 Tipos de archivos y documentos en la Web .............................................................................................40
3.2.2 El elemento cabecera (HEAD) ................................................................................................................413.2.3 El cuerpo del documento HTML (BODY) ...............................................................................................43
3.3 TEXTO EN HTML .............................................................................................................................................44
3.3.1 Encabezados ...........................................................................................................................................44
3.3.2 Características de letra: tipos y tamaños ...............................................................................................45
8
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
3.3.3 Efectos sobre texto HTML .......................................................................................................................47
3.3.4 Párrafos ....................................................................................................................................................48
3.3.5 Otras formas de organización de texto ..................................................................................................51
3.4 ENLACES DE HIPERTEXTO ..........................................................................................................................52
3.4.1 Tipos de enlaces .......................................................................................................................................54
3.5 IMÁGENES ........................................................................................................................................................55
3.5.1 Formatos de imágenes .............................................................................................................................56
3.5.2 Alineación y márgenes en imágenes .......................................................................................................56
3.5.3 Enlaces en imágenes ...............................................................................................................................57
3.5.4 Imágenes de fondo ...................................................................................................................................57
3.6 LISTAS ...............................................................................................................................................................58
3.7 TABLAS ..............................................................................................................................................................60
3.7.1 Creación de tablas ...................................................................................................................................60
3.7.2 Formato de tablas: bordes, alineación, tamaño, etc. ...............................................................................61
3.7.3 Agrupamiento de filas y columnas..........................................................................................................62
3.8 FORMULARIOS ................................................................................................................................................62
3.8.1 Procesamiento de formularios ................................................................................................................63
3.8.2 Elementos de un formulario....................................................................................................................64
3.9 ELEMENTOS ESPECÍFICOS PARA TECNOLOGÍAS MÓVILES ................................................................69
3.9.1 Selección del lenguaje de marcas para tecnologías móviles ..................................................................70
3.10 ELEMENTOS EN DESUSO (DEPRECATED) ................................................................................................71
3.11 TEST DE CONOCIMIENTOS ..........................................................................................................................72
CAPÍTULO 4. HOJAS DE ESTILO WEB .............................................................................................................73
4.1 FORMATEADO DE PÁGINAS WEB A TRAVÉS DE HOJAS DE ESTILO ....................................................74
4.1.1 Estilos en partes de la página HTML .....................................................................................................74
4.1.2 Estilos en un archivo independiente ......................................................................................................77
4.2 ELEMENTOS Y ESTRUCTURA DE UNA HOJA DE ESTILO ......................................................................80
4.3 SINTAXIS DE ATRIBUTOS .............................................................................................................................83
4.3.1 Atributos que afectan a las fuentes ........................................................................................................84
4.3.2 Atributos de párrafos y texto ..................................................................................................................85
4.3.3 Atributos de fondo ..................................................................................................................................85
4.3.4 Atributos de contenedores (tablas, etc.) .................................................................................................86
4.4 TEST DE CONOCIMIENTOS ..........................................................................................................................87
CAPÍTULO 5. ARQUITECTURAS DE APLICACIONES WEB ........................................................................89
5.1 ARQUITECTURA EN CAPAS ..........................................................................................................................90
5.2 INTERACCIÓN ENTRE LAS CAPAS CLIENTE Y SERVIDOR ....................................................................93
5.3 TEST DE CONOCIMIENTOS ..........................................................................................................................93
9
© RAMA ÍNDICE
CAPÍTULO 6. NAVEGADORES WEB ..................................................................................................................95
6.1 NAVEGADORES DE USO COMÚN Y SOPORTE DE ESTÁNDARES ..........................................................96
6.2 ARQUITECTURA DE UN NAVEGADOR ........................................................................................................98
6.3 SEGURIDAD EN NAVEGADORES WEB ......................................................................................................100
6.4 TEST DE CONOCIMIENTOS ........................................................................................................................102
CAPÍTULO 7. CREACIÓN DE CONTENIDO WEB DINÁMICO ...................................................................103
7.1 FUNDAMENTOS DE PROGRAMACIÓN .....................................................................................................104
7.1.1 Variable ..................................................................................................................................................104
7.1.2 Constantes ............................................................................................................................................106
7.1.3 Control de Flujo .....................................................................................................................................106
7.1.4 Subprogramas. Procedimientos y Funciones .......................................................................................112
7.1.5 Recursividad ..........................................................................................................................................114
7.1.6 Clases y Objetos .....................................................................................................................................1167.1.7 Principales metodologías de programación ..........................................................................................118
7.2 LENGUAJES PARA EL DESARROLLO DE CONTENIDO DINÁMICO ....................................................119
7.2.1 Applets ...................................................................................................................................................121
7.2.2 Controles ActiveX ..................................................................................................................................122
7.2.3 Plug-ins específicos de navegadores Web .............................................................................................122
7.2.4 Aplicaciones Web RIA ............................................................................................................................122
7.3 TEST DE CONOCIMIENTOS ........................................................................................................................123
CAPÍTULO 8. LENGUAJES DE GUION DE USO GENERAL .......................................................................125
8.1 INTEGRACIÓN DE LENGUAJES DE GUION EN NAVEGADORES WEB ...............................................126
8.2 ESTRUCTURA GENERAL DE UN PROGRAMA JAVASCRIPT .................................................................128
8.2.1 Variables y tipos de datos ......................................................................................................................128
8.2.2 Operadores ............................................................................................................................................129
8.2.3 Sentencias condicionales.......................................................................................................................131
8.2.4 Bucles .....................................................................................................................................................137
8.2.5 Comentarios ..........................................................................................................................................139
8.3 FUNCIONES ....................................................................................................................................................140
8.3.1 Variables locales y globales ...................................................................................................................141
8.3.2 Bibliotecas de Funciones .......................................................................................................................141
8.4 MANIPULACIÓN DE TEXTO ........................................................................................................................142
8.4.1 Validación de formularios .....................................................................................................................143
8.5 LISTAS (ARRAYS) ...........................................................................................................................................145
8.5.1 Array’s o Listas Multidimensionales ....................................................................................................147
8.5.2 Tratamiento de Array’s mediante bucles .............................................................................................149
8.6 ALMACENAMIENTO DE DATOS EN LENGUAJES DE GUION ..............................................................149
8.6.1 Objetos ...................................................................................................................................................150
8.6.2 El modelo de objetos del documento (dom) ...........................................................................................153
10
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
8.7 GESTIÓN DE EVENTOS ................................................................................................................................155
8.7.1 Eventos de ratón ....................................................................................................................................156
8.7.2 Eventos del teclado ................................................................................................................................156
8.7.3 Eventos HTML .....................................................................................................................................157
8.8 GESTIÓN DE ERRORES ................................................................................................................................157
8.8.1 Verificar errores en funciones JavaScript ...........................................................................................158
8.9 USOS ESPECÍFICOS DE LENGUAJES DE GUIÓON.................................................................................159
8.9.1 Integración multimedia mediante lenguajes de guion ........................................................................159
8.9.2 Animaciones ..........................................................................................................................................160
8.9.3 Efectos especiales en elementos gráficos y de texto .............................................................................161
8.9.4 Rejillas de datos .....................................................................................................................................162
8.9.5 Manejo de canales de suscripción (RSS) ...............................................................................................163
8.9.6 Descripción de las técnicas de acceso asíncrono (AJAX) ......................................................................164
8.10 ENTORNOS INTEGRADOS PARA EL DESARROLLO CON LENGUAJES 
DE GUIÓON .....................................................................................................................................................168
8.10.1 Editores avanzados ...............................................................................................................................168
8.10.2 Funciones de validación y depuración ..................................................................................................169
8.10.3 Documentación de código fuente ..........................................................................................................170
8.10.4 Extensiones útiles de los navegadores Web .........................................................................................170
8.11 TEST DE CONOCIMIENTOS ........................................................................................................................172
CAPÍTULO 9. CONTENIDOS MULTIMEDIA ..................................................................................................173
9.1 INTEGRACIÓN DE ELEMENTOS MULTIMEDIA EN PÁGINAS WEB ....................................................174
9.1.1 Enlaces a recursos multimedia .............................................................................................................174
9.1.2 Integración de imágenes .......................................................................................................................175
9.1.3 Integración de vídeo .............................................................................................................................175
9.1.4 Integración de audio .............................................................................................................................176
9.1.5 Integración de animaciones ..................................................................................................................177
9.2 FORMATOS DE ARCHIVO WEB. TIPOS MIME ..........................................................................................177
9.2.1 Tipos de reproducción de archivos multimedia ....................................................................................1789.2.2 Formatos de Imagen .............................................................................................................................179
9.2.3 Formatos de audio ................................................................................................................................179
9.2.4 Formatos de Vivídeo ..............................................................................................................................180
9.3 REPOSITORIOS DE VÍDEO ...........................................................................................................................181
9.3.1 Inserción de vídeo en páginas Web .......................................................................................................182
9.3.2 Herramientas para la edición de viídeo ................................................................................................183
9.4 ANIMACIÓN MULTIMEDIA .........................................................................................................................184
9.4.1 Herramientas para la creación de animaciones ...................................................................................184
9.4.2 Buenas prácticas en el uso de animaciones ..........................................................................................186
9.5 ELEMENTOS INTERACTIVOS .....................................................................................................................186
9.6 TEST DE CONOCIMIENTOS ........................................................................................................................190
11
© RAMA ÍNDICE
CAPÍTULO 10. ACCESIBILIDAD WEB .............................................................................................................191
10.1 DEFINICIÓN DE ACCESIBILIDAD WEB ...................................................................................................192
10.2 VENTAJAS Y DIFICULTADES EN LA IMPLANTACIÓN DE ACCESIBILIDAD WEB ............................193
10.3 NORMATIVA Y ESTÁNDARES SOBRE ACCESIBILIDAD WEB ...............................................................193
10.3.1 Organismos regulatorios de la accesibilidad Web ................................................................................194
10.3.2 Comparativa de normas y estándares ..................................................................................................194
10.4 GUÍAS PARA EL CUMPLIMIENTO DE NORMATIVAS Y ESTÁNDARES ...............................................195
10.4.1 Descripción de las pautas principales ..................................................................................................196
10.4.2 Pautas para una navegación accesible .................................................................................................196
10.5 DESCRIPCIÓN DEL PROCESO DE LA CONFORMIDAD EN ACCESIBILIDAD WEB ...........................197
10.6 TECNOLOGÍAS DONDE LA ACCESIBILIDAD ES APLICABLE ...............................................................198
10.7 HERRAMIENTAS PARA LA VALIDACIÓN DE LA ACCESIBILIDAD ......................................................201
10.7.1 Basadas en navegador .........................................................................................................................201
10.7.2 Mediante aplicaciones de escritorio .....................................................................................................202
10.7.3 Mediante servicios Web externos ..........................................................................................................202
10.8 EVOLUCIÓN DE LA ACCESIBILIDAD: NUEVAS TENDENCIAS ............................................................203
10.9 TEST DE CONOCIMIENTOS ........................................................................................................................204
CAPÍTULO 11. USABILIDAD WEB ....................................................................................................................205
11.1 DEFINICIÓN DE USABILIDAD ....................................................................................................................206
11.2 IMPORTANCIA DEL DISEÑO WEB CENTRADO EN EL USUARIO ........................................................207
11.2.1 Diferencias entre accesibilidad y usabilidad ........................................................................................208
11.2.2 Ventajas y problemas en la combinación de accesibilidad y usabilidad ..............................................208
11.3 VENTAJAS Y DIFICULTADES EN LA IMPLANTACIÓN DE SITIOS WEB USABLES ...........................209
11.4 METODOLOGÍA DE USABILIDAD ..............................................................................................................210
11.5 ANÁLISIS DE REQUISITOS DE USUARIO .................................................................................................210
11.5.1 Análisis de tareas .................................................................................................................................210
11.5.2 Estructuración de la información .........................................................................................................211
11.6 PRINCIPIOS DEL DISEÑO CONCEPTUAL ................................................................................................212
11.6.1 Facilidad de aprendizaje .......................................................................................................................212
11.6.2 Flexibilidad ............................................................................................................................................212
11.6.3 Robustez ................................................................................................................................................213
11.7 CREACIÓN DE PROTOTIPOS ORIENTADOS AL USUARIO ....................................................................213
11.8 EVALUACIÓN DE LA USABILIDAD ............................................................................................................214
11.8.1 Planificación de la evaluación ...............................................................................................................215
11.8.2 Documentación de la evaluación ..........................................................................................................216
12
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
11.8.3 Métodos de evaluación de la usabilidad ...............................................................................................217
11.8.4 Integración de la evaluación en el desarrollo .......................................................................................220
11.9 TEST DE CONOCIMIENTOS ........................................................................................................................221
SOLUCIONARIO DE LOS TEST DE CONOCIMIENTOS ..............................................................................223
ÍNDICE ALFABÉTICO .........................................................................................................................................225
13
Introducción
El Certificado de Profesionalidad es un instrumento de acreditación, en el ámbito laboral, de las cualificaciones 
profesionales del Catálogo Nacional de Cualificaciones Profesionales. Son emitidos por el Servicio de Empleo Público 
Estatal o, en su caso, por las Comunidades Autónomas, y tienen validez en todo el territorio nacional.
Poseer un certificado de profesionalidad supone, sin lugar a dudas, incrementar las posibilidades laborales, ya que, 
al ser un documento oficial, se valora en cualquier proceso de selección que convoquen las Administraciones Públicas, 
y le acredita profesionalmente ante la empresa privada.
El elemento mínimo acreditable es la Unidad de Competencia (UC). La suma de las acreditaciones de las 
unidades de competenciaconforma la acreditación de la competencia general. Una Unidad de Competencia es 
una agrupación de tareas específicas de un profesional. Las distintas unidades de competencia de un certificado 
de profesionalidad conforman la Competencia General, que permite el ejercicio de una determinada actividad 
profesional.
Cada Unidad de Competencia lleva asociado un Módulo Formativo (MF), donde se describe la formación 
necesaria para adquirir esa Unidad de Competencia, que puede dividirse, a su vez, en Unidades Formativas (UF).
Este libro desarrolla las tres unidades formativas que pertenecen al Módulo Formativo MF0491_3: Programación 
web en el entorno cliente, asociado a la unidad de competencia UC0491_3: Desarrollar elementos software 
en el entorno cliente, del certificado de Profesionalidad Desarrollo de aplicaciones con tecnologías web 
(IFC154_3).
Los cuatro primeros capítulos del libro se corresponden con la UF1841: Elaboración de documentos web mediante 
lenguajes de marcas. Los siguientes cinco capítulos desarrollan la UF1842: Desarrollo y reutilización de componentes 
software y multimedia mediante lenguajes de guion y, los dos últimos hacen lo propio con la UF1843: Aplicación de 
técnicas de usabilidad y accesibilidad en el entorno cliente.
Aunque el libro esté enmarcado dentro de los certificados de profesionalidad, la forma en que se ha desarrollado 
permite que sea accesible a cualquier persona que quiera profundizar en el conocimiento de los sistemas informáticos 
y su administración.
Diseño web1
16
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Enfrentarse a la creación de contenidos para la Web requiere tener en cuenta dos facetas cruciales: la información 
(el contenido) y el aspecto visual (el diseño). El contenido de una Web, en muchas ocasiones, viene dado por el propósito 
del cliente, el dominio de aplicación o el negocio al que sirve dicha Web. El diseño, sin embargo, es algo más cambiante 
y no tan firmemente establecido, que depende, gran parte de las veces, de la opinión particular del solicitante del 
desarrollo Web o incluso del diseñador.
Es por ello que el diseño, en general, y el diseño Web, en particular, son disciplinas complejas y no exentas de 
múltiples interpretaciones. Además, el diseño evoluciona con el tiempo y es sensible a modas o a tendencias visuales. 
A veces, incluso cuestiones técnicas hacen que se abran nuevos horizontes en el ámbito del diseño. La consecuencia de 
estos vaivenes en el diseño Web es que lo que en un día aparecía claramente como una decisión de diseño puntera y 
visualmente atractiva, pase al mayor de los ostracismos al cabo de un tiempo, volviéndose aburrido, muy visto o, por 
qué no, antiguo y obsoleto.
1.1 PRINCIPIOS DE DISEÑO WEB 
Se ha escrito mucho acerca de cuáles deben ser los principios que rigen el diseño Web; sin embargo, la gran mayoría 
de autores coinciden en que existen cinco grandes áreas en las que un diseñador Web debe trabajar:
 n Contenido: hace referencia a la forma y organización de la información contenida en la Web. Dicho contenido 
puede abarcar desde la forma en que se escribe el texto hasta cómo éste se organiza, se presenta y estructura 
utilizando las restricciones y particularidades de lenguajes de marcas como HTML.
 n Aspecto visual: hace referencia a cuál es la organización visual del contenido (layout). El layout suele 
necesitar programar conjuntamente en lenguajes como HTML, CSS, JavaScript o incluso Flash (actualmente 
en proceso de descatalogación) y puede incluir elementos gráficos bien para decoración o bien para gestionar la 
navegación. Obviamente, el aspecto visual es de los más importantes en el diseño Web, pero no el único.
 n Tecnología: hace referencia a la necesidad de seleccionar, comprender y dominar las diferentes tecnologías 
Web que pueden utilizarse en la generación de contenidos para la Web. HTML y CSS se encuentran entre 
estas tecnologías, pero son sólo dos de los múltiples lenguajes que un diseñador tiene a su disposición. Además, 
hay que diferenciar entre lenguajes que se ejecutan en el lado del cliente y aquellos que son interpretados o 
ejecutados en el lado del servidor.
 n Rendimiento: hace referencia a las restricciones hardware/software que un diseño Web requiere para 
ser visualizado («disfrutado» sería más correcto). La velocidad y fiabilidad de un sitio Web determinan la 
«experiencia» que un usuario percibe de una Web. Hay que diseñar pensando en optimizar el tiempo de carga 
de una página y, a ser posible, diseñar pensando en que la página se visualizará en cualquier tipo de dispositivo. 
 n Propósito: hace referencia al motivo por el cual el sitio Web existe. Generalmente, es una faceta muy 
relacionada con los aspectos del negocio detrás del sitio Web y, por ello, muchas veces se considera como el 
aspecto crucial dentro del diseño de una Web.
Un diseño Web debe responder a las necesidades del cliente que solicita el desarrollo de una Web, pero, además, se 
ve influido por la «inspiración» del diseñador Web. En este sentido, un diseñador Web debe también conocer cuál es la 
audiencia (quién es el usuario final) a la que va dirigida la Web. No es lo mismo diseñar una Web para gente joven que 
17
© RAMA 1 n DISEÑO WEB
para un público empresarial y más adulto. Como ya se ha comentado antes, conocer el objetivo del sitio Web determina 
gran parte del diseño que se va a realizar. 
Todas estas características del diseño Web hacen que el diseñador Web deba trabajar codo con codo con un conjunto 
de personas que se verán irremediablemente relacionadas con él. Habrá que trabajar de acuerdo con los requisitos 
impuestos por el cliente y habrá que pensar en los usuarios de la página Web (que muchas veces no suelen ser los 
mismos que los clientes), pero también habrá que interactuar con los desarrolladores Web (aquellos programadores 
centrados en aspectos más referidos a la funcionalidad o a la arquitectura del sitio Web en general y no tanto en las 
características visuales particulares de una página o conjunto de páginas).
Para poder alcanzar con éxito un buen diseño Web, existen una serie de principios y buenas prácticas que son 
comunes y que se encuentran en las mejores páginas Web desde el punto de vista del diseño. Para categorizar algunos 
de los principios básicos del diseño Web, utilizaremos la experiencia de la agencia canadiense Paper Leaf Design1, 
reconocida internacionalmente por la calidad de sus diseños Web:
 n Contraste: cada elemento que sea único y quiera destacarse mediante el diseño debe distinguirse de otro. Para 
ello pueden usarse colores, formas, tonos o elementos de dirección.
 n Repetición: repetir elementos en una Web da cohesión al diseño.
 n Alineación: la alineación de elementos, utilizada correctamente, aporta una sensación de estar visualmente 
conectado con otro elemento, lo que, de nuevo, da cohesión al diseño Web. Nada debe parecer fuera de lugar.
 n Proximidad: la cercanía entre elementos o proximidad visual también favorece la cohesión en un diseño Web. 
Es mejor que dos elementos que están relacionados entre sí estén cerca el uno del otro.
Estos cuatro principios son una buena base para el diseño Web, pero no son suficientes para alcanzar un buen 
diseño Web. Algunas buenas prácticas en el diseño Web incluyen el estudio de la composición, los elementos de 
navegación, las dimensiones, el color, la tipografía y el uso correcto de imágenes.
Así, la composición de elementos dentro de una página Web debe guiar al usuario visualmente hacia el contenido 
que se quiere destacar o en la dirección que se quiere que se lea la página. Para ello, se deben distinguir, claramente, 
las áreas de información de aquellas que sirven de navegación principal (o secundaria, local, etc.), como son los 
menús o áreas de vinculación interpáginas. Otra característica que ayuda al buen diseño Web es el establecimiento 
de áreas «fijas», como la cabecera y el pie de página. El encabezado presentará la identidad gráfica del sitioy el pie, 
generalmente, información acerca del sitio y enlaces a cuestiones legales, de contacto e incluso del diseño de la página. 
En cuanto al dimensionamiento de la Web que se está diseñando, en los últimos años, con el auge del acceso 
a Internet con dispositivos móviles (smartphones y tabletas, principalmente), es necesario realizar un esfuerzo 
adicional con el fin de que nuestra Web sea visualizable correctamente en cualquier tipo de plataforma, navegador o 
dimensiones de pantalla.
Otro de los aspectos clave en el diseño Web es la definición de una buena estrategia de navegación. El diseño Web 
debe ayudar al usuario a saber dónde está en todo momento y hacia qué sitios puede «saltar». Por ello, la navegación 
principal debe destacar claramente. Hay que tener cuidado, no obstante, de que los cambios bruscos en los colores o 
ubicaciones de los elementos de navegación pueden confundir al usuario y empobrecer su experiencia en el sitio Web.
La gestión del color es un aspecto clave en el diseño de la experiencia de un usuario en la Web. El color afecta a la 
sensación percibida del sitio Web, por lo que, habitualmente, se prefiere un diseño limpio, sin excesos ni estridencias, 
que permita no «hacer huir» al usuario de la página Web. Se debe encontrar el contraste adecuado entre colores, 
1 http://paper-leaf.com/
18
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
además de procurar mantener una consistencia entre los colores utilizados y las funcionalidades asignadas a cada 
elemento del sitio Web, siendo recomendable no usar colores vivos en las tipografías básicas de la Web.
En este sentido, escoger una tipografía o fuente para la letra del contenido textual de la Web es muy importante. 
Por un lado, se recomienda utilizar lo que se denominan «Web-safe fonts» o, lo que es lo mismo, tipos de fuentes 
que sean conocidas y de uso extendido que minimicen el riesgo de que los usuarios vean el contenido en una fuente 
diferente a la escogida por el diseñador. Por otro, y añadido al consejo sobre el color de la tipografía, el tamaño y el 
interlineado son dos facetas que también deben cuidarse al máximo en el diseño de una Web. Se debe favorecer la 
legibilidad del texto incluido, a la vez que se destaca lo que se considere relevante en la página Web. Finalmente, se 
suele desaconsejar utilizar demasiadas fuentes o estilos en una misma página, de nuevo, para favorecer la cohesión 
visual de la página Web.
El último consejo general para realizar un buen diseño Web hace referencia al uso de imágenes dentro de una 
página Web. Hay tres aspectos principales relacionados con el uso de imágenes en Web: el número de imágenes, la 
calidad de las mismas y el tamaño visualizado. En general, el uso excesivo de imágenes en una página resulta poco 
funcional y suele «incomodar» al usuario de la Web. El tamaño y tipo de imágenes utilizadas dependerá del uso que 
se les vaya a dar, no siendo lo mismo el posicionamiento de aquellas imágenes que soportan o apoyan al contenido 
textual (o multimedia) de la página que el de las imágenes que son parte de la identidad del sitio Web. El diseño Web 
debería establecer tamaños equivalentes en las imágenes que sean consistentes y constantes en todo el sitio Web. 
Por ejemplo, definiendo tres dimensiones (con pequeñas variaciones) como máximo: pequeñas, medianas y grandes.
En algunos ámbitos se habla del «triángulo o pirámide del diseño Web» (ver Figura 1.1) como forma de representar 
las tres facetas básicas que se priorizan en el diseño Web en cada esquina y quedando en el centro el contenido 
que se va a visualizar. En función de a qué se le dé más importancia hablaremos de diseño orientado al usuario 
(aspecto visual) o diseño orientado al propósito/objetivos (economía). En los siguientes apartados abordamos estas 
dos tendencias.
Propósito
(economía)
Forma
(aspecto visual)
Función
(tecnologías)
Cliente
Usuario Desarrollador
Contenido
Figura 1.1. La pirámide del diseño Web
19
© RAMA 1 n DISEÑO WEB
1.1.1 DISEÑO ORIENTADO AL USUARIO
El diseño o desarrollo centrado en el usuario (o User-Centered Design en inglés) es un proceso (no restringido al 
diseño de interfaces o tecnologías) en el cual a las necesidades, requisitos y limitaciones de los usuarios finales de 
un producto, servicio o proceso se les otorga una atención especial en cada una de las etapas del proceso de diseño. 
El diseño centrado en el usuario puede caracterizarse como un proceso en el que se resuelven múltiples aspectos en 
etapas sucesivas. 
Este proceso no sólo requiere que los diseñadores piensen cómo se supone que los usuarios van a utilizar el 
producto, sino que también los obliga a tener que probar la validez de sus decisiones en función del comportamiento 
del usuario. Para ello, en numerosas ocasiones requieren de la ejecución de planes de prueba, validación y verificación 
en entornos reales con usuarios reales. Dicho proceso de validación es necesario, puesto que, en multitud de ocasiones, 
los diseñadores no siempre son capaces de anticipar la experiencia que un usuario tendrá cuando se enfrente por 
primera vez al diseño implementado o cuál será la curva de aprendizaje de cada uno de los usuarios o tipos de usuarios.
La principal diferencia entre el diseño centrado en el usuario y otras filosofías de diseño de productos radica en 
que el diseño centrado en el usuario intenta optimizar el producto mediante el análisis de cómo los usuarios pueden, 
quieren o necesitan utilizar el producto en vez de obligarlos a cambiar su comportamiento natural para acomodarse 
al producto, en este caso, al diseño de una página Web.
Los elementos principales en los que se centra un desarrollo de una página Web, cuya estrategia de diseño 
está centrada en el usuario, son: la visibilidad, la accesibilidad, la legibilidad y el lenguaje, aunque existen otros 
aspectos también que se deben tener en cuenta. Se puede ver cómo estos aspectos ya han sido descritos como partes 
fundamentales del diseño de páginas Web, pero adquieren un matiz especial cuando el diseño se orienta al usuario.
 n Visibilidad: la visibilidad ayuda a que el usuario sea capaz de construir un modelo mental del documento 
que se está visualizando en un navegador. Estos modelos ayudan al usuario a predecir el efecto o efectos que 
tendrán sus acciones durante su interacción con la página Web. Los elementos importantes de dicha página 
(tales como menús o aquellos que ayudan a la navegación) deberían ser resaltados. Los usuarios deberían ser 
capaces de identificar de un vistazo qué pueden hacer y qué no con el documento visualizado. 
 n Accesibilidad: los usuarios deberían ser capaces de encontrar la información que buscan de forma rápida y 
fácil a lo largo de todo el documento Web, independientemente de su longitud. Así mismo, los usuarios deberían 
tener a su disposición diferentes formas de encontrar dicha información (tales como elementos navegacionales, 
funciones de búsqueda, tablas de contenido, secciones claramente etiquetadas, números de página, códigos 
de color, etc.). Los elementos navegacionales deben ser coherentes con el diseño general del documento. Por 
ejemplo, la división de la información en pequeñas porciones que pueden ser organizadas siguiendo algún tipo 
de criterio o jerarquía se considera una buena estrategia (denominada chunking en inglés). La habilidad de 
leer por encima el documento permite a los usuarios encontrar el fragmento de información que buscan en 
vez de tener que leer todo el contenido. Igualmente, el uso de negritas y cursivas está altamente recomendado.
 n Legibilidad: el texto debería ser fácil de leer. Mediante un análisis del aspecto global de la página, el diseñador 
debería ser capaz de identificar un estilo de fuente o tipografía útil. Las fuentes muy ornamentadas o la escritura 
de textos todo en mayúsculas dificultan la lectura de los textos mientras que, como se dijo anteriormente, el 
uso de negritas y cursivas puede ser de gran ayuda cuando se utilizan correctamente.Con respecto al tamaño 
de la letra se ha escrito mucho y existen diferencias en cuanto a cuál debe ser el tamaño óptimo de lectura de 
textos en la Web (máxime con la disparidad de dispositivos y tamaños de pantalla existentes en la actualidad). 
En algunos foros se ha reconocido por una amplia mayoría de diseñadores que un tipo de letra Serif de 12-16 
píxeles y de 10-12 píxeles para tipografías Sans-Serif son adecuadas para el diseño Web. El contraste entre el 
color de la letra y el fondo también debe ser estudiado.
20
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
 n Lenguaje: dependiendo del ámbito de la página Web, se requiere utilizar ciertas formas de expresar la 
información en el texto de las páginas Web. En general, las frases cortas se agradecen en entornos Web así como 
los textos bien escritos y completos en explicaciones o situaciones en las que se necesita una gran cantidad de 
texto. Salvo que el dominio de aplicación y uso de la Web lo requiera, las jergas o términos en exceso técnicos 
deberían evitarse. Otras recomendaciones son el uso de la voz activa, los verbos (frente a los sintagmas 
nominales) y las estructuras de oraciones simples. 
En cualquier caso, el diseño centrado en el usuario depende en gran medida del dominio en el que se vaya a utilizar 
la página Web (y experimentar por parte del usuario). Dicho dominio (en ocasiones denominado «situación retórica») 
modela el diseño de un medio de información, como es el de la Web. Existen tres elementos que deben considerarse en 
la identificación de un dominio de aplicación: la audiencia, el propósito y el contexto.
 n Audiencia: la audiencia es la gente (los usuarios) que utilizará el documento Web. El diseñador ha de tener en 
cuenta su edad, localización geográfica, cuestiones culturales y étnicas, género, educación, etc.
 n Propósito: el propósito es el objetivo de la página Web o el problema al que el sitio intenta dar respuesta. 
En múltiples ocasiones, el objetivo suele estar determinado por las condiciones impuestas por el cliente y su 
negocio.
 n Contexto: el contexto son las circunstancias que rodean la situación que se va a diseñar. El contexto a menudo 
responde a la pregunta: ¿qué situación ha ocurrido para que se necesite esta página Web? El contexto a menudo 
también incluye cualquier aspecto social o cultural que pueda estar asociado al diseño de la Web.
1.1.2 DISEÑO ORIENTADO A OBJETIVOS
Frente al diseño centrado en el usuario, en el que el diseño se adapta a las particularidades del «consumidor» 
de la Web, nos encontramos el diseño orientado a objetivos, donde es la información la que se diseña y organiza con 
un propósito particular. Hay que tener en cuenta que cualquier sitio Web se construye en respuesta a múltiples 
necesidades y objetivos. La Web es fundamentalmente un medio de información y, como tal, la gente publica cosas, en 
respuesta a una necesidad de información. El éxito de una página Web o su fracaso dependerá, en gran medida, de 
cuánto se satisfacen dichas necesidades.
La calidad de la información puede ser total y absolutamente objetiva (como la información provista por una 
compañía aérea acerca de sus vuelos comerciales) o, por el contrario, puede basarse en aspectos meramente subjetivos 
y de opinión. No sólo en referencia a opiniones personales de individuos anónimos (o no), sino también impresiones u 
opiniones acerca de la calidad de una compañía, producto o servicio. 
Un sitio Web puede contener información que la gente necesita o, desde otro punto de vista, es posible que el 
dueño o administrador de un sitio Web puede tener información que quiere que los usuarios tengan, aunque no 
necesariamente quieran tenerla. También es posible que el propietario de una página Web quiera obtener información 
de los usuarios que visitan su Web o puede funcionar como intermediario para terceros. Como se puede ver, el objetivo 
de una página Web puede tener su origen tanto en el usuario de la Web como en el proveedor de la página Web. Por 
ello es de vital importancia ser capaz de identificar que cualquier tipo de página Web va a intentar resolver múltiples 
necesidades. El proveedor (publicador de contenidos) puede tener una necesidad que le lleva a publicar la información 
(ganar dinero, recolectar información, promover una marca, etc.), mientras que el visitante de la Web puede tener su 
propia necesidad (ganar dinero, tener éxito en su trabajo, entretenerse, etc.). Detrás de estas necesidades están los 
objetivos o metas que gobiernan nuestros deseos y comportamiento. Son nuestras metas las que nos llevan a utilizar 
los sitios Web, a comprar productos, a usar servicios.
21
© RAMA 1 n DISEÑO WEB
De esta forma, es posible intentar clasificar los sitios Web en función de diferentes criterios. Por ejemplo:
 n Webs de información: proveen información sobre un tema en particular o una organización (sitios Web 
con publicidad o información corporativa, principalmente). Son los más comunes en Internet y suelen tener 
aspectos compartidos con otras categorías de Webs.
 n Webs transaccionales: tienen como objetivo permitir la realización de algún tipo de transacción o tarea. Los 
sitios de comercio electrónico estarían dentro de esta categoría.
 n Comunidades on-line o redes sociales: el propósito es proveer información o facilidades de intercambio 
de información, pero centradas en la interacción entre los visitantes del sitio Web. Los sitios Web basados 
en comunidades on-line tienden a centrarse en un tema particular o en un tipo de persona específico para 
promover la interacción entre individuos de características similares.
 n Webs de entretenimiento: están enfocadas en proveer el juego on-line o algún tipo de interacción enfocada 
al entretenimiento y diversión. Esta interacción puede incluir aspectos transaccionales, de comunidad o 
informacionales.
 n Otras Webs: se pueden englobar sitios Web artísticos o experimentales, páginas Web personales, Weblogs 
(blogs) y páginas que no siguen las convenciones de la Web o tienen un propósito económico y de negocio 
particular.
Esta clasificación es una de muchas y, por ejemplo, se podría aportar una categorización diferente en función de 
las características del publicador de la información o el administrador del sitio. Así, tendríamos:
 n Webs comerciales: una página Web en esta categoría ha sido construida y es administrada por una organización 
o un individuo con el fin de obtener un beneficio comercial, bien directamente a través de facilidades de 
comercio electrónico o bien indirectamente a través de la promoción (publicidad) de algún producto o servicio 
de terceros o de venta off-line (tradicional).
 n Webs gubernamentales: el propietario último del sitio Web es una entidad perteneciente a un gobierno, 
siendo el propósito la satisfacción de una necesidad social o legal.
 n Webs educativas: este tipo de Webs es administrada por alguna organización educativa (pública o privada) y 
se utiliza con el fin de soportar algún tipo de objetivo educativo o de investigación.
 n Webs solidarias o caritativas: un sitio Web diseñado con el fin de promover las metas y objetivos de una 
organización no gubernamental, de carácter caritativo o solidario.
 n Webs personales: este tipo de Webs existen con el fin de que una persona o grupo de personas puedan 
expresar algún aspecto particular o creativo. Las razones pueden ser múltiples.
En cualquier caso, determinar inicialmente el objetivo de la página Web, como necesidad de usuario que resuelve, 
será lo que hará que el sitio Web tenga o no éxito. Si no está claramente resuelta la necesidad del usuario que visita 
la Web, dichos usuarios simplemente visitarán otra página en pocos segundos. El diseño orientado a objetivos es 
el proceso de crear soluciones que animan a los desarrolladores a alcanzar metas realistas. Todos los objetivos son 
importantes pero no siempre se pueden alcanzar todos y, por supuesto, no se puede diseñar una Web para cubrir 
absolutamente todas las posibilidadesque se puedan plantear inicialmente. Para que un proyecto Web tenga éxito, es 
necesario definir cuáles van a ser las metas que se quieren cumplir.
22
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
El primer paso para determinar los objetivos (metas o propósitos) de una página Web es empezar escribiendo 
cuáles son las necesidades que tienen los usuarios principales de la Web y que definen dichos objetivos. Otra estrategia 
es escribir qué aspectos se deben evitar en el diseño de la Web para eludir el fracaso en la resolución de dichas 
necesidades. También se puede abordar este problema atendiendo a los diferentes roles de usuarios que puedan estar 
interesados en cubrir una necesidad o cumplir un objetivo particular.
Una vez que los objetivos iniciales han sido determinados, los diseñadores Web pueden empezar a pensar en el 
diseño del sitio Web, teniendo como núcleo las metas especificadas. 
1.2 EL PROCESO DE DISEÑO WEB
El proceso de diseño y desarrollo de un sitio Web está formado por múltiples pasos, desde la captura de información 
inicial a la creación de las páginas Web, hasta finalmente llegar al mantenimiento necesario para conservar actualizado 
el sitio Web. El proceso exacto puede variar de un diseñador a otro, pero los pasos básicos son esencialmente los mismos: 
captura de información, planificación, diseño, desarrollo, prueba y despliegue y mantenimiento. A continuación se 
explica cada uno en detalle.
1.2.1 FASE 1: CAPTURA DE INFORMACIÓN
El primer paso para diseñar con éxito un sitio Web es recopilar información. Es el paso más importante, puesto 
que involucra tener un entendimiento completo de la compañía o el cliente para el/la que se va a diseñar el sitio Web. 
Se necesita un buen conocimiento de cuáles son las metas del negocio y cómo la Web puede ser utilizada como medio 
para alcanzarlas. 
Es necesario, por lo tanto, que el diseñador sea capaz de preguntar cuantas más cuestiones pueda acerca del cliente 
y sus necesidades con el fin de tenerlas en cuenta en el momento de crear una apariencia Web lo más ajustada a lo 
que quiere el cliente.
Algunos aspectos que se deben considerar en esta fase son:
 n Propósito: ¿cuál es el propósito de la Web? ¿Se quiere proveer información, promover un servicio, vender un 
producto…?
 n Objetivos: ¿qué espera obtener el cliente con la construcción de la Web? ¿Conseguir dinero o compartir 
información?
 n Audiencia objetivo: ¿existe algún grupo específico de usuarios que puedan ayudar a alcanzar las metas? 
¿Sería útil considerar una persona «ideal» como usuario de la Web? ¿Cuáles son sus características?
 n Contenido: ¿qué tipo de información buscará la audiencia objetivo en la Web? ¿Información específica? ¿Un 
producto o servicio particular? ¿Compra on-line? 
1.2.2 FASE 2: PLANIFICACIÓN
Usando la información recolectada en la fase 1, es el momento de crear un plan para el diseño del sitio Web. Éste 
es el momento en el que se desarrolla un mapa del sitio Web (site map).
23
© RAMA 1 n DISEÑO WEB
Un mapa del sitio es un listado de todas las áreas temáticas del sitio, así como las subáreas en el caso de que 
existan. Este elemento sirve de guía para saber qué contenido alojará el sitio Web. Es absolutamente esencial 
desarrollar un sistema navegacional consistente y fácil de entender. El usuario final del sitio Web (el consumidor del 
mismo) debe ser tenido en cuenta en el momento de diseñar el sitio Web, puesto que, después de todo, será el que 
tenga interés en adquirir el producto o usar el servicio provisto. Una buena interfaz Web debe ser capaz de incluir un 
sistema de navegación entre páginas sencillo e intuitivo.
Durante la fase de planificación han de decidirse también qué tecnologías se deberían implementar. A este respecto, 
elementos como los Sistemas de Gestión de Contenidos (Content Management Systems – CMS) pueden convertirse en 
un punto de partida, puesto que ofrecen patrones de diseño preestablecidos con funcionalidades estándar.
1.2.3 FASE 3: DISEÑO
En este punto, y con la información ya especificada en las fases anteriores, es el momento de determinar el aspecto 
y comportamiento (look & feel) del sitio Web.
Como ya se ha dicho, la audiencia objetivo es uno de los factores clave. Un sitio Web enfocado a adolescentes tendrá 
un aspecto muy diferente de uno dedicado a una institución financiera. Como parte de la fase de diseño, es importante 
incorporar elementos tales como el logotipo de la compañía o los colores corporativos que permitan identificar la marca 
en el sitio Web.
El diseñador Web creará, en este punto, uno o más prototipos diseño del sitio Web. Normalmente, suelen ser 
imágenes estáticas de cómo será el diseño final o esqueletos de páginas Web sin funcionalidad añadida. De cualquier 
forma, el diseñador debe ser capaz de enseñarle el progreso del diseño y el desarrollo al cliente. El objetivo es que éste 
sea capaz de expresar sus opiniones (a favor o en contra) del diseño del sitio Web.
En esta fase, como se puede observar, la comunicación entre el diseñador y el cliente es crítica para poder asegurar 
que el sitio Web final será acorde a las necesidades planteadas por el cliente. Es importante trabajar de forma cercana 
al cliente, intercambiando ideas, hasta llegar al diseño final del sitio Web.
1.2.4 FASE 4: DESARROLLO
La fase de desarrollo es donde realmente se crea (implementa) el sitio Web en sí mismo. En este punto, el diseñador 
Web tiene que recopilar todos los elementos gráficos de los prototipos y transformarlos en un sitio real y funcional.
El proceso habitual empieza por la creación de la página de inicio junto con una plantilla de las páginas subsiguientes 
del sitio Web. Esta plantilla servirá de base para el resto de páginas, además de contener la estructura navigacional 
del sitio Web. Una vez creada, el diseñador tomará todo el contenido provisto por el cliente y lo distribuirá en cada una 
de las páginas Web. Elementos como los CMS, los formularios de contacto interactivos o la funcionalidad de carrito de 
compra para e-commerce se implementan y se hacen funcionales en esta fase.
En todo momento, el diseñador debería hacer visible, de alguna forma, el progreso del desarrollo de la Web al 
cliente con el fin de que éste pueda sugerir cualquier cambio adicional o corrección que quiera hacer.
Desde el punto de vista técnico, la creación de un sitio Web de éxito requiere conocimientos de desarrollo del front-
end de la Web. Esto implica el desarrollo de código HTML / CSS válido y de acuerdo con los estándares actuales de la 
Web, maximizando la funcionalidad así como la accesibilidad a la mayor audiencia posible. Estos aspectos se prueban 
en la fase siguiente.
24
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
1.2.5 FASE 5: PRUEBA Y ENTREGA
En este punto, el diseñador Web estará centrado en los últimos detalles del sitio Web, así como en la realización 
de pruebas. Se probarán aspectos tales como la completa funcionalidad de los formularios, o scripts, incluidos en las 
páginas y se comprobarán los aspectos de compatibilidad entre navegadores o su visualización correcta en múltiples 
plataformas.
Un buen diseñador Web es aquel que conoce al detalle los estándares actuales para el diseño y desarrollo de 
páginas Web. Las tecnologías básicas utilizadas actualmente son HTML y CSS, entre otras. Como parte del proceso 
de prueba, el diseñador debe comprobar que todo el código escrito es válido con respecto a los últimos estándares. 
Una vez que el cliente da el visto bueno al diseño realizado y desarrollado es el momento de entregar el sitio 
Web y desplegarlo en su ubicación definitiva. Dependiendo de la plataforma tecnológica escogida, este despliegue se 
podrá hacer utilizando protocolos como FTP (File Transfer Protocol) o mediante la carga del sitio Web en el espacio de 
almacenamiento (hosting) comprado o alquilado para tal fin. Una vez se ha cargado en el lugar definitivo, es necesario 
realizar una última prueba de que todo funciona correctamente.Otros detalles finales incluyen la instalación de plug-ins y extensiones necesarias para que la página Web funcione 
correctamente o tareas de SEO (Search Engine Optimization). SEO es la optimización del sitio Web con elementos 
tales como etiquetas de título, descripción y palabras clave que permiten que el sitio Web se posicione entre los 
primeros resultados de los motores de búsqueda. Esto marca el lanzamiento oficial del sitio Web, puesto que lo hace 
visible al público.
1.2.6 FASE 6: MANTENIMIENTO
El desarrollo del sitio Web no está terminado necesariamente. Una forma de hacer que los visitantes vuelvan al 
sitio Web es ofrecer nuevo contenido o productos de forma periódica. La mayoría de los diseñadores Web suelen ofrecer 
paquetes de mantenimiento a los clientes a bajo coste basados en la frecuencia de actualización o modificación del sitio 
Web, aunque con el auge de los CMS la tarea del diseñador Web se ha visto reducida por la facilidad de modificación 
de contenidos Web que éstos ofrecen.
Otras tareas de mantenimiento típicas incluyen la realización periódica de copias de seguridad, la actualización 
de versiones de las plataformas utilizadas, instalación de extensiones adicionales, etc.
Conocidos los principios generales que guían el diseño Web y el proceso que ha de seguirse para implementar un 
sitio Web, en el siguiente capítulo abordamos los fundamentos de los lenguajes utilizados para la programación de 
páginas Web en el lado del cliente poniendo el foco en los lenguajes de marcado.
25
© RAMA 1 n DISEÑO WEB
1.3 TEST DE CONOCIMIENTOS
1Indique, de entre las siguientes áreas de trabajo, cuál de ellas no se tiene en cuenta dentro de la disciplina de diseño Web:
a) Contenido.
b) Aspecto visual.
c) Documentación del código. 
d) Propósito.
2 ¿Cuál de las siguientes fases no pertenece al proceso de diseño de una página Web?
a) Planificación.
b) Análisis. 
c) Diseño.
d) Mantenimiento.
3 Indique en qué fase del proceso de diseño de una página Web se considera el propósito de dicha página Web:
a) Captura de información. 
b) Prueba y entrega.
c) Diseño.
d) Mantenimiento.
4 Señale la respuesta correcta con respecto a los diferentes tipos de diseño Web:
a) El diseño orientado a objetivos obliga a tener que probar la validez de sus decisiones en función del 
comportamiento del usuario.
b) En el diseño orientado al usuario, la información es la que se diseña y organiza con un propósito particular.
c) En el diseño centrado en el usuario, el diseño se adapta a las particularidades del «consumidor» de la Web. 
d) Ninguna de las anteriores respuestas es correcta.
5 ¿Cuál es la fase más importante del proceso de diseño de una Web?
a) La fase de planificación.
b) La fase de captura de información.
c) La fase de diseño.
d) La fase de prueba y entrega.
Lenguajes de 
marcado generales2
28
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Cualquier página Web accesible a través de Internet es interpretada en el lado del cliente gracias a que la 
información recibida se codifica utilizando lenguajes de marcas. Para poder entender las características de los 
lenguajes de marcado generales, es necesario hacer algo de retrospectiva y conocer cómo surgen estos lenguajes. En 
el año 1989, el físico nuclear Tim Berners-Lee, del CERN (Centro europeo para la investigación nuclear), diseñó un 
sistema que permitía acceder a archivos en línea sobre el protocolo de comunicaciones TCP/IP. En ese año existían dos 
métodos para enlazar documentos electrónicos entre sí: por una parte, los enlaces o hipervínculos y, por otra parte, 
un lenguaje denominado SGML (Standard Generalized Markup Language, «Lenguaje de marcas generalizado»), que 
consistía en un sistema para la organización y etiquetado de documentos, pero que no imponía ningún conjunto de 
etiquetas especial.
Teniendo en cuenta estos elementos, Tim Berners-Lee, a principios de 1990, definió el lenguaje HTML (Hypertext 
Markup Language, «Lenguaje de marcas hipertextuales») como un subconjunto de SGML y creó algo más: el World 
Wide Web (también conocido como la Web), como sistema de documentos de hipertexto y/o hipermedios enlazados 
entre sí y accesibles desde Internet. En 1991 creó el primer navegador de HTML que funcionaba en modo texto y para 
el sistema UNIX.
2.1 CARACTERÍSTICAS GENERALES Y TIPOS DE LENGUAJES
Como puede derivarse de su evolución histórica, los lenguajes de marcas son un producto de la era de la información. 
Son una formalización de los códigos utilizados para el marcado del contenido de documentos electrónicos, es decir, 
un conjunto de convenciones que definen cosas como: a) qué marcas o elementos están permitidos, b) dónde se pueden 
situar tales elementos, c) si alguno o todos los elementos deben ocurrir en algún lugar en un documento codificado 
con dicho lenguaje. Existen diferentes tipos de lenguajes de marcas: procedimentales, de marcado general y para 
conjuntos de reglas de marcado.
2.1.1 LENGUAJES DE MARCAS PROCEDIMENTALES
El marcado procedimental se caracteriza por su uso en la composición tipográfica y en los sistemas de publicación, 
incluyendo los procesadores de texto. Los elementos se colocan justo en el flujo de texto, y los lenguajes de marcas que 
los definen tienen las siguientes características:
 n Los documentos marcados con este tipo de lenguajes contienen instrucciones claras para el programa que 
representa (renderiza) el documento, por lo que produce una salida del contenido original en un formato y 
estilo particular.
 n Las instrucciones de formato suelen ser específicas para el medio de salida, por lo que el documento que 
contiene el contenido original con marcas intercaladas no es portable a diferentes medios de salida.
Un ejemplo de lenguaje de marcado procedimental es el RTF (Rich Text Format). Hay elementos de marcado como 
\par para el párrafo, \b para negrita, \i para cursiva, y así sucesivamente. Este tipo de lenguajes de marcado es bueno 
para formatear documentos si se destinan a páginas impresas o cualquier otro medio individual. PostScript y TeX son 
los lenguajes de marcado procedimentales más populares.
29
© RAMA 2 n LENGUAJES DE MARCADO GENERALES
2.1.2 LENGUAJES DE MARCADO GENERAL (GML) 
Si tenemos la intención de extraer información de los documentos marcados, los lenguajes de marcado 
procedimentales no son adecuados. Para afrontar este reto, un lenguaje de marcado general marca los documentos de 
una manera diferente. Las características de estos lenguajes son:
 n Los elementos tienen nombres lógicos, en lugar de expresar instrucciones detalladas de formato. Por ejemplo, 
un elemento H1 se usa para marcar texto que está destinado a ser una cabecera de primer nivel.
 n Las aplicaciones de software que leen documentos marcados usando un GML son libres de presentarlos 
como mejor les parezca, utilizando reglas de formato para los elementos particulares que o bien se definen 
internamente, o bien son especificados en otro lugar. Cuando se muestran en la pantalla, el elemento H1 podría 
estar asociado con una combinación particular de tamaño de fuente y grosor.
Los elementos de los GML, por lo general, llevan ambas etiquetas de inicio y fin para que el contenido original 
esté totalmente contenido dentro de un elemento. Tampoco hay ningún indicio acerca de cómo se debe presentar 
visualmente este documento. Es decir, los intérpretes de estos lenguajes (navegadores Web) son libres para reflejar 
los significados concretos de estos elementos. El lenguaje de marcado generalizado más utilizado es el HTML para los 
documentos de la Web y WML para contenidos móviles.
2.1.3 LENGUAJES PARA CONJUNTOS DE REGLAS DE MARCADO GENERALES 
Cada GML tiene sus propios elementos, sus propias reglas y su propia área particular de la aplicación. Para que 
cada lenguaje funcione bien como un lenguaje, todos ellos tienen que ser definidos de alguna manera. Los lenguajes 
GML se describen a sí mismos utilizando conjuntos de reglas de marcado generalizados (GMRS), también llamadosmetalenguajes. Los dos metalenguajes más famosos son el Standard Generalized Markup Language (SGML) y el 
Extensible Markup Language (XML). En cierto modo, XML es un subconjunto de SGML, y WML se deriva de XML. 
Otro ejemplo de lenguaje para conjunto de reglas de marcado son las DTD (Document Type Definition), que 
se explicará más adelante en detalle. Una DTD es un tipo de documento especial que se utiliza para definir el 
conjunto de elementos válidos para un GML particular, así como el modelo de contenido de cada elemento. Para 
facilitar el procesamiento electrónico, los documentos marcados utilizando los GML están altamente estructurados y 
jerarquizados, y permiten la encapsulación de unos elementos en otros.
De todos los lenguajes comentados, el más genérico es SGML. Como ya se ha comentado, SGML es un estándar 
internacional diseñado para integrar documentos en diferentes formatos propietarios, y para permitir el intercambio 
de documentos entre subsistemas de edición de texto, de formato y de recuperación. SGML, en realidad, no se utiliza 
actualmente para marcar documentos, sino que se emplea más como un metalenguaje que se destina para crear 
lenguajes de marcas que se adapten a diferentes dominios de aplicación.
Los principios básicos de diseño de SGML hacen hincapié en la importancia de separar las instrucciones de formato 
del contenido. Cuando un navegador Web muestra un documento HTML que contiene elementos <h1> y <em>, lo hace 
mediante el uso de una hoja de estilo interna que especifica cómo estos elementos tienen que estar representados en la 
pantalla. En general, es posible crear varias hojas de estilo que incluyen instrucciones para representar el contenido 
de un documento marcado para una variedad de dispositivos de salida. 
Todas estas características de SGML, HTML, XML o de las DTD se comprenderán mejor en los siguientes 
epígrafes, cuando se estudien su estructura y reglas de creación.
30
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
2.2 ESTRUCTURA GENERAL DE UN DOCUMENTO CON LENGUAJE DE MARCADO
Todo documento escrito según las reglas (sintaxis) de un lenguaje de marcado suele compartir una estructura que 
cuenta con unos elementos comunes:
 n Metadatos e instrucciones de proceso. El principio de cada documento suele contener información acerca 
de la codificación del propio documento y acerca de cómo debe ser procesado. Un lenguaje de marcado incrusta 
instrucciones de procesamiento (llamadas etiquetas) en los documentos electrónicos para que sean presentados 
con precisión como el documento original, independientemente de la plataforma de la computadora, el 
sistema operativo o programa utilizado. También permiten la inclusión de información descriptiva adicional 
(denominados metadatos), que informa acerca de la naturaleza de los datos encapsulados para facilitar el 
intercambio de tipos de datos complejos entre diferentes sistemas.
 n Codificación de caracteres. Todo documento debe indicar cuál es el conjunto de caracteres que se pueden 
encontrar los procesadores del documento. Las alternativas más habituales son UTF-8 (UNICODE) o ASCII.
 n Etiquetas o marcas. Hacen referencia a palabras encerradas entre los símbolos < y >. Se diferencian en 
etiquetas de apertura (p. ej. <table>) y de cierre, que se corresponden con la misma palabra que la etiqueta de 
apertura, pero con el símbolo / precedido (p. ej. </table>). Toda etiqueta tiene un significado asociado definido 
en el esquema del documento.
 n Elementos. Un elemento dentro de un documento creado mediante un lenguaje de marcado se define como 
la unión de una etiqueta de apertura y una de cierre que encapsulan («marcan») un texto determinado 
denominado «contexto». 
 n Atributos. Las etiquetas o marcas pueden tener asociadas características que modifican o articulan su 
función. Para ello, dentro de la etiqueta de apertura se suelen incluir definiciones del tipo «atributo = valor». 
Por ejemplo, en HTML, la etiqueta <font>, que permite marcar que un texto concreto tendrá un formato de letra 
determinado, puede llevar un atributo «size» indicando el tamaño de la letra en que deberá mostrarse el texto.
 n Comentarios. Son fragmentos incluidos en el documento que no son procesados. Suelen tener un conjunto de 
símbolos que indican el inicio y el final del fragmento comentado. En HTML, por ejemplo, estos conjuntos son 
<!-- y -->, respectivamente.
2.3 DOCUMENTOS VÁLIDOS Y BIEN FORMADOS
Los documentos creados con lenguajes de marcas deben ser válidos y estar bien formados; en caso de que no sea 
así, el analizador sintáctico que esté interpretando el documento generará un mensaje de error y detendrá el análisis 
del documento. Para ejemplificar estas características se tomará como base el lenguaje XML y los documentos que 
con él se pueden definir.
 n Para que un documento se considere que está bien formado debe cumplir las siguientes restricciones:
 – Tener una única raíz. Debe existir un elemento que contenga en su interior todo el contenido del documento 
(es decir, el documento empieza con una etiqueta y termina con el cierre de la misma).
31
© RAMA 2 n LENGUAJES DE MARCADO GENERALES
 – Todos los elementos llevan etiquetas de apertura y cierre.
 – El anidamiento de elementos debe ser correcto.
 – Todos los valores de los atributos van entre comillas simples o dobles.
 n Para que un documento se considere válido, éste debe seguir (y estar indicado como tal en el segmento de 
metadatos) un esquema determinado. 38	
  	
  	
  	
  PROGRAMACIÓN	
  WEB	
  EN	
  EL	
  ENTORNO	
  CLIENTE	
   ©	
  STARBOOK	
  
 
Figura 2.1. Ejemplo de documento XML válido y bien formado 
 
Un esquema es una especificación, diagrama o modelo. En computación, y en 
concreto como parte de los lenguajes de marcado, los esquemas se utilizan para 
describir la estructura y los diferentes tipos de datos que pueden emplearse dentro 
de un documento. Dos ejemplos habituales de esquemas son las DTD y los XML 
Schemas. 
• Las DTD restringen la estructura de los datos de un documento y además tienen 
las siguientes características: 
o Define qué elementos pueden producirse. 
o Define qué atributos puede/debe tener un elemento. 
o Define qué subelementos pueden/deben producirse dentro de cada 
elemento y cuántas veces. 
o Las DTD no restringen los tipos de datos. 
o Todos los valores se representan como cadenas de XML. 
 
Figura 2.2. Ejemplo de documento DTD 
 
<!ELEMENT lista_de_personas (persona*)> 
<!ELEMENT persona (nombre, fechanacimiento?, sexo?, 
numeroseguridadsocial?)> 
<!ELEMENT nombre (#PCDATA) > 
<!ELEMENT fechanacimiento (#PCDATA) > 
<!ELEMENT sexo (#PCDATA) > 
<!ELEMENT numeroseguridadsocial (#PCDATA)> 
<?xml version = "1.0" encoding = "UTF-8"?> 
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema 
xmlns:xs=http://www.w3.org/2001/XMLSchema 
targetNamespace=http://www.ejemplo.com 
xmlns="http://www.ejemplo.com"> 
<ejemplo número="1"> 
 <profesor> 
 <nombre>Marcos</nombre> 
 <apellidos>López Sanz</apellidos> 
 <universidad>URJC</universidad> 
 </profesor> 
</ejemplo> 
Figura 2.1. Ejemplo de documento XML válido y bien formado
Un esquema es una especificación, diagrama o modelo. En computación, y en concreto como parte de los lenguajes 
de marcado, los esquemas se utilizan para describir la estructura y los diferentes tipos de datos que pueden emplearse 
dentro de un documento. Dos ejemplos habituales de esquemas son las DTD y los XML Schemas.
 n Las DTD restringen la estructura de los datos de un documento y además tienen las siguientes características:
 – Define qué elementos pueden producirse.
 – Define qué atributos puede/debe tener un elemento.
 – Define qué subelementos pueden/deben producirse dentro de cada elemento y cuántas veces.
 – Las DTD no restringen los tipos de datos.
 – Todos los valores se representan como cadenas de XML.
38	
  	
  	
  	
  PROGRAMACIÓN	
  WEB	
  EN	
  EL	
  ENTORNO	
  CLIENTE	
   ©	
  STARBOOK	
  
 
Figura 2.1. Ejemplo de documento