Programacion_web_en_el_entorno_del_cliente_Lopez_Sanz,_Marcos

UCE

Stiven Fajardo

em 09/04/2025

Material

Prévia do material em 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
, 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

Figura 2.1. Ejemplo de documentoXML válido y bien formado

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.2. Ejemplo de documento DTD
n Los XML Schemas están definidos en XML y representan una alternativa más sofisticada a las DTD y que
además solucionan alguno de sus problemas. En particular:
– Soporta la declaración de tipos de valores (enteros, cadenas, etc.).
– Define restricciones de valores mínimos/máximos.
– Soporta tipos definidos por el usuario y tipos específicos mediante la restricción de otros tipos.
– Además, permite la extensión de tipos complejos mediante una especie de «herencia».
32
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
– Se puede considerar como un superconjunto de los DTD.
– Establece restricciones de unicidad y claves ajenas
– XML Schema es un lenguaje recursivo, ya que permite especificar la estructura de documentos XML y
además se especifica en términos de XML.
– Está integrado por espacios de nombres: diferentes partes de un documento pueden adaptarse a esquemas
diferentes.
©
STARBOOK
CAPÍTULO
2.
LENGUAJES
DE
MARCADO
GENERALES 39
• Los XML Schemas están definidos en XML y representan una alternativa más
sofisticada a las DTD y que además solucionan alguno de sus problemas. En
particular:
o Soporta la declaración de tipos de valores (enteros, cadenas, etc.).
o Define restricciones de valores mínimos/máximos.
o Soporta tipos definidos por el usuario y tipos específicos mediante la
restricción de otros tipos.
o Además, permite la extensión de tipos complejos mediante una especie de
«herencia».
o Se puede considerar como un superconjunto de los DTD.
o Establece restricciones de unicidad y claves ajenas
o XML Schema es un lenguaje recursivo, ya que permite especificar la
estructura de documentos XML y además se especifica en términos de
XML.
o Está integrado por espacios de nombres: diferentes partes de un
documento pueden adaptarse a esquemas diferentes.

Figura 2.3. Ejemplo de XML Schema

1.6 TEST DE CONOCIMIENTOS
<?xml version="1.0" encoding="UTF-8"?>
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<xsd:element name="Libro">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="Título" type="xsd:string"/>
<xsd:element name="Autores" type="xsd:string" />
<xsd:element name="Editorial" type="xsd:string"/>
</xsd:sequence>
<xsd:attribute name="precio" type="xsd:double"/>
</xsd:complexType>
</xsd:element>
</xsd:schema>
Figura 2.3. Ejemplo de XML Schema
2.4 TEST DE CONOCIMIENTOS
1 ¿Cuál de los siguientes elementos no pertenece a la estructura de un documento con lenguaje de marcado?:
a) Metadatos.
b) Objetos incrustrados.
c) Atributos.
d) Comentarios.
2 Señale la respuesta FALSA acerca de los XML Schema:
a) No permiten restringir los tipos de datos.
b) Están escritos en XML.
c) Establecen restricciones de unicidad.
d) Soporta la definición de espacios de nombres.
3 Señale la respuesta correcta con respecto a las características de un documento XML bien formado:
a) Todo documento bien formado puede tener más de una raíz.
b) Todos los elementos llevan etiquetas de apertura y cierre.
c) El anidamiento de elementos debe ser correcto.
d) Todos los valores de los atributos van entre comillas simples o dobles.
33
© RAMA 2 n LENGUAJES DE MARCADO GENERALES
4 Señale la respuesta correcta: Una DTD es…:
a) Un lenguaje de marcas general.
b) Un lenguaje de programación.
c) Un lenguaje de marcas procedimental.
d) Ninguna de las anteriores.
5La inclusión de información adicional en un documento con lenguaje de marcado se hace a través del elemento denominado:
a) Etiqueta.
b) Metadato.
c) Comentario.
d) Atributo.
3
Lenguajes de marcado
para presentación de
páginas web
36
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Los lenguajes de marcado han constituido un hito relevante dentro de la creación de páginas Web para Internet.
En particular, HTML se ha convertido en el lenguaje de marcas por excelencia gracias a la sencillez con la que permite
a los usuarios crear una página Web y dotarla de interactividad merced a la creación de hipervínculos, los cuales
permiten saltar de una página Web a otra. El objetivo de este capítulo es introducir al lector en el uso de este lenguaje,
de forma que aprenda a crear una página Web.
HTML es lo que se denomina un lenguaje de marcado o de marcas, es decir, un lenguaje que se sirve de un
conjunto de etiquetas (o marcas) para describir los elementos de un documento. Dichas etiquetas permitirán al
creador de una página Web identificar un elemento y, a su vez, atribuirle un conjunto de propiedades. Así, por ejemplo,
si deseamos que un texto se comporte como el título principal de una página Web, debemos cerciorarnos de que dicho
texto esté identificado con las etiquetas:
<h1> Título de la página </h1>.
Sin embargo y antes de ver cómo trabajar con etiquetas, realizaremos una pequeña introducción histórica de
HTML para entender su evolución, importancia y hacia dónde se dirige este lenguaje.
3.1 HISTORIA DE HTML
El HTML (HyperText Markup Language - Lenguaje de Marcado de Hipertexto) es el lenguaje de marcas de
texto más utilizado en la World Wide Web. Este lenguaje fue creado en 1989 por Tim Berners-Lee a partir de dos
conceptos previos: por un lado, el concepto de hipertexto como herramienta básica para conectar dos elementos
(documentos o recursos) entre sí; y, por otro lado, SGML como lenguaje básico para colocar etiquetas o marcas en un
texto. El hipertexto se representa a través de lo que denominamos hipervínculos. Un hipervínculo es un enlace de
una página Web o un archivo a otra página Web u otro archivo. Cuando un usuario hace clic en el hipervínculo, el
destino se mostrará en un explorador Web, se abrirá o se ejecutará, en función del tipo de recurso destino. El destino
es con frecuencia otra página Web, pero también puede ser una imagen, un archivo multimedia, un documento de
Microsoft Office, una dirección de correo electrónico, un programa, etc. HTML es una evolución de un lenguaje anterior
denominado SGML (Standard Generalized Markup Language), un sistema para la organización y etiquetado de
documentos estandarizado en 1986 por la organización ISO. El término HTML se suele referir a ambas cosas, tanto
al tipo de documento como al lenguaje de marcas.
HTML no es propiamente un lenguaje de programación como puede serlo Java o C, sino que se basa en la
utilización de un sistema de etiquetas restringido que es aplicado a un documentode texto. Otra característica es que
HTML no necesita ser compilado, sino que es un lenguaje interpretado, es decir, es ejecutado a medida que se avanza
por el documento HTML. La página Web se ejecuta a través de un tipo de aplicación concreta denominada «navegador
Web». Este navegador está instalado en los clientes finales y es el que se encarga de interpretar las etiquetas HTML
en las que se escribe una página Web. El navegador utilizado dependerá del sistema operativo que se ejecute en el
ordenador del cliente. Sin que importe el navegador ni el sistema operativo utilizado, éste debe tener la capacidad de
traducir correctamente la página HTML, de manera que ésta pueda ser visualizada por el usuario en la Web. Todos
los navegadores, por defecto, siempre que reciben una página, hacen una copia de la misma en el disco de la máquina
del cliente. Con esto se pretende que si el usuario vuelve a solicitar la misma página, no tenga que gastar tiempo y
recursos solicitándola nuevamente al servidor, sino que recurre a la que tiene guardada en el disco. A esta área del
disco donde el navegador va poniendo las páginas Web visitadas recibe el nombre de caché.
37
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
Una particularidad de HTML es que, ante algún error de sintaxis que presente el texto etiquetado, HTML no lo
detectará y seguirá con la interpretación del siguiente fragmento de documento. El entorno para desarrollar HTML
puede ser simplemente un procesador de textos. A través de HTML, un creador de páginas Web puede desde organizar
el texto y los objetos contenidos en la página, pasando por crear listas y tablas, hasta llegar a la esencia de la Web:
los hipervínculos.
Como ya hemos dicho, HTML está conformado por un conjunto restringido o cerrado de etiquetas, es decir, en
principio, no es posible que el usuario cree sus propias etiquetas, sino que está limitado a aquellas que describa la
especificación del lenguaje. Sin embargo, el gran boom de Internet ha generado que HTML haya ido evolucionando,
dando lugar a lenguajes derivados de éste, como XML, XHTML, DHTML o HTML5, en función de la flexibilidad
ofrecida al conjunto de etiquetas admitido o de la integración de HTML con otros lenguajes que permitan dotar de
más dinamismo e interactividad a las páginas creadas con HTML:
n XML es un lenguaje de etiquetado extensible muy simple, pero con unas reglas de codificación muy estrictas
que juegan un papel fundamental en el intercambio de una gran variedad de datos. Es un lenguaje muy similar
a HTML (también deriva de SGML), pero cuyo objetivo principal es describir datos para su transferencia
eficiente y no mostrarlos, como es el caso de HTML.
n El lenguaje XHTML es también muy similar al lenguaje HTML. De hecho, XHTML no es más que una
adaptación de HTML al lenguaje XML. Técnicamente, como ya hemos comentado, HTML es descendiente
directo del lenguaje SGML, mientras que XHTML lo es del XML (que, a su vez, también es descendiente de
SGML). Las páginas y documentos creados con XHTML son muy similares a las páginas y documentos HTML.
Actualmente, los procesos de estandarización de HTML y XHTML siguen procesos paralelos.
n El HTML Dinámico (DHTML) consiste en una forma de aportar interactividad a las páginas Web. El origen de
DHTML hay que buscarlo en la versión 4.0 de los navegadores Netscape Communicator e Internet Explorer
(y posteriores versiones de ambos navegadores), que permitieron la integración de HTML con lenguajes
de scripting (JavaScript), hojas de estilo personalizadas (CSS) y la identificación de los contenidos de una
página Web en formato de árbol (DOM). Es la combinación de estas tecnologías la que permite aumentar la
funcionalidad e interactividad de la página.
n La versión HTML5 constituye el último paso en esta evolución. Esta versión ha incluido un nuevo conjunto de
etiquetas al lenguaje. La mayoría de estas nuevas etiquetas están orientadas a facilitar la maquetación de la
página Web, así como a la inserción de nuevos tipos de contenidos en una página Web.
Se puede decir que HTML es el lenguaje más relevante en el ámbito de Internet, puesto que casi todos los lenguajes
utilizados en la Web terminan confluyendo hacia una representación en HTML para que nuestro navegador pueda
leer la página Web y permita la visualización de ésta en la pantalla del cliente.
3.1.1 CÓMO TRABAJAR CON ETIQUETAS
Como ya hemos enunciado anteriormente, HTML es un lenguaje de marcado. Esto significa que el documento
que se escribe está conformado por un conjunto de marcas, las cuales permiten describir e identificar las partes que
conforman un documento. Estas marcas también suelen denominarse «elementos», «tags», o «etiquetas». En nuestro
caso, adoptaremos el nombre de etiquetas.
Una etiqueta se identifica porque se encuentra contenida dentro de los símbolos < y >. Por ejemplo: <body>,
<head>.
38
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Dentro de HTML, una etiqueta conllevará la forma en la que esos elementos deben ser tratados e incluso
configurados en el documento Web. Veamos un ejemplo con la etiqueta <h1>, la cual nos permite identificar un
elemento de tipo Título de nivel 1.
Código HTML Resultado en el navegador
<h1> Mi Página Web</h1>
Figura 3.1. Formato de una etiqueta
Cuando el navegador encuentra esta línea dentro del documento HTML, interpreta que el texto «Mi Página Web»
es un título de nivel 1, es decir, deberá ser el texto más resaltado de mi página y, por ello, lo visualizaremos con un
tamaño de fuente grande y en negrita.
Por lo general, las etiquetas deben ser cerradas, es decir, se le debe indicar al navegador dónde empieza y dónde
termina el efecto de una etiqueta. Para cerrar una etiqueta se escribe la misma etiqueta precedida por una barra
inclinada entre los símbolos de < y >. Por ejemplo:
</body>, </head>, </h1>
El contenido que se encuentre entre la etiqueta de apertura y la etiqueta de cierre será el texto al que se aplique
el formato descrito.
Algunas etiquetas HTML son vacías, es decir, no necesitan ser cerradas. Son pocas y se irán resaltando a medida
que las vayamos introduciendo dentro del capítulo.
Las etiquetas pueden contener atributos. Los atributos son parámetros adicionales a la etiqueta, a los que se les
puede asignar un valor, el cual siempre deberá ir entrecomillado. Por ejemplo, el elemento <a>, que sirve para hacer
un enlace (link) con otro documento o con otra página del actual, se escribirá:
©
STARBOOK
CAPÍTULO
3.
LENGUAJES
DE
MARCADO
PARA
PRESENTACIÓN
DE
PÁGINAS
WEB 47
Algunas etiquetas HTML son vacías, es decir, no necesitan ser cerradas. Son pocas
y se irán resaltando a medida que las vayamos introduciendo dentro del capítulo.
Las etiquetas pueden contener atributos. Los atributos son parámetros adicionales
a la etiqueta, a los que se les puede asignar un valor, el cual siempre deberá ir
entrecomillado. Por ejemplo, el elemento <a>, que sirve para hacer un enlace (link)
con otro documento o con otra página del actual, se escribirá:

Figura 3.2. Partes de una etiqueta

En este caso, la etiqueta es a, y posee un atributo denominado href, al cual se le
asigna el valor que aparece entre comillas:
«http://www.miservidor.es/mifichero.htm».
No es obligatorio que las etiquetas posean atributos, así como tampoco es
obligatorio que se utilicen todos los atributos que pueda tener una etiqueta.
Por último, es importante saber que las etiquetas pueden ser anidadas, es decir, se
pueden escribir etiquetas dentro de etiquetas. Lo importante es que se respete el
orden de cierre de las etiquetas. Veamos un ejemplo:
<h2><i>Texto
de
prueba
</i></h2>.

La etiqueta h2, que significa que el texto es un título de nivel 2, contiene a su vez a
la etiqueta i, que significa que el texto deberá escribirse en cursiva. De esta forma, el
resultado será un título de nivel 2 en cursiva.
1.7 ESTRUCTURA DEUN DOCUMENTO HTML
Las páginas HTML están estructuradas en dos partes diferenciadas: la cabecera
(HEAD) y el cuerpo (BODY). A nivel esquemático, una página Web se puede ver de
la siguiente manera:
<a href="http://www.misitioweb.es/mipaginaweb.html"> Link de prueba </a>.
Etiqueta de apertura
Etiqueta de cierreAtributo Valor de un atributo
Contenido de la etiqueta
Figura 3.2. Partes de una etiqueta
En este caso, la etiqueta es a, y posee un atributo denominado href, al cual se le asigna el valor que aparece entre
comillas: «http://www.miservidor.es/mifichero.htm».
No es obligatorio que las etiquetas posean atributos, así como tampoco es obligatorio que se utilicen todos los
atributos que pueda tener una etiqueta.
39
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
Por último, es importante saber que las etiquetas pueden ser anidadas, es decir, se pueden escribir etiquetas dentro
de etiquetas. Lo importante es que se respete el orden de cierre de las etiquetas. Veamos un ejemplo:
<h2><i>Texto de prueba </i></h2>.
La etiqueta h2, que significa que el texto es un título de nivel 2, contiene a su vez a la etiqueta i, que significa que
el texto deberá escribirse en cursiva. De esta forma, el resultado será un título de nivel 2 en cursiva.
3.2 ESTRUCTURA DE UN DOCUMENTO HTML
Las páginas HTML están estructuradas en dos partes diferenciadas: la cabecera (HEAD) y el cuerpo
(BODY). A nivel esquemático, una página Web se puede ver de la siguiente manera: 48
PROGRAMACIÓN
WEB
EN
EL
ENTORNO
CLIENTE
©
STARBOOK

Figura 3.3. Estructura básica de una página Web

El tipo de documento no es obligatorio a efectos prácticos; es decir, la página se
verá igual tanto si lo escribes como si no. Sólo sirve como identificación del tipo de
contenido del archivo a los efectos de cumplir las especificaciones de estándar
recomendadas por el consorcio W3C, que es el organismo que regula el lenguaje
HTML. La siguiente tabla muestra algunos posibles valores para el tipo de
documento y su significado:
Tipo de documento Significado
<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.0
Transitional//EN"
… "http://w3.org/TR/REC-
html40/loose.dtd">
Indica que cumple el estándar HTML
4.0
<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.0//EN"
… "http://w3.org/TR/REC-
html40/strict.dtd">
Significa que cumple el estándar
HTML 4.0 y, además, no contiene
elementos desaconsejables.

En el HTML 4.0 se consideran desaconsejables aquellos elementos que, aun siendo
soportados, han sido sustituidos por otros y, por ello, es posible que sean eliminados
en el futuro. En cualquier caso, el que un elemento escrito en una página Web sea
visible o no, dependerá siempre del navegador utilizado y/o de su versión.
Cabecera o Encabezado
Etiqueta <HEAD>
</HEAD>
Tipo de documento
Cuerpo de la página web
Etiqueta <BODY>
</BODY>
Figura 3.3. Estructura básica de una página Web
El tipo de documento no es obligatorio a efectos prácticos; es decir, la página se verá igual tanto si lo escribes como
si no. Sólo sirve como identificación del tipo de contenido del archivo a los efectos de cumplir las especificaciones de
estándar recomendadas por el consorcio W3C, que es el organismo que regula el lenguaje HTML. La siguiente tabla
muestra algunos posibles valores para el tipo de documento y su significado:
Tipo de documento Significado
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0
Transitional//EN”
… “http://w3.org/TR/REC-html40/loose.dtd”>
Indica que cumple el estándar HTML 4.0
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”
… “http://w3.org/TR/REC-html40/strict.dtd”>
Significa que cumple el estándar HTML 4.0 y, además,
no contiene elementos desaconsejables.
40
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
En el HTML 4.0 se consideran desaconsejables aquellos elementos que, aun siendo soportados, han sido sustituidos
por otros y, por ello, es posible que sean eliminados en el futuro. En cualquier caso, el que un elemento escrito en una
página Web sea visible o no, dependerá siempre del navegador utilizado y/o de su versión.
Los comentarios son un recurso muy utilizado por los desarrolladores, y sirven para escribir texto que sólo es
visible en el código fuente, pero no es interpretado por el navegador y, por ello, tampoco es visualizado por el usuario
final. Para escribir comentarios en la página se utilizará la etiqueta  . Es importante insistir en que,
aunque lo escrito en un comentario no se visualiza en el navegador, no significa que no pueda verse el código fuente
de una página. Por esta razón, se desaconseja escribir claves de acceso o datos confidenciales entre comentarios.
Los elementos de cabecera y cuerpo de un documento HTML se explican de manera más extensa en secciones
posteriores. Antes de explicar estas secciones, realizaremos una pequeña introducción sobre los diferentes tipos de
archivos que podemos encontrar en la Web y la forma en la que son utilizados dentro de una página Web.
3.2.1 TIPOS DE ARCHIVOS Y DOCUMENTOS EN LA WEB
Cuando un navegador recibe una página Web, antes de mostrarlo necesita saber el tipo de contenido que éste tiene,
a fin de procesarlo adecuadamente. No es lo mismo recibir un documento de texto que una fotografía en formato GIF o
un vídeo en formato MPG, o si lo que estamos intentando transferir es un archivo. En cada caso, el navegador pondrá
en juego distintas habilidades y necesitará recursos de máquina diferentes.
La extensión de un archivo son las tres o cuatro letras que hay después del nombre de éste y que están separadas
del mismo por un punto. Por ejemplo, si vuestra página Web se llama index.html, las cuatro letras que hay después
del punto (html) son la extensión del archivo. Las otras, las que están delante del punto, son el nombre del archivo. En
el entorno Web se utilizan los MIME types (Multipurpose Internet Mail Extension) para definir el tipo de un archivo
transferido. A través de este MIME type es como el navegador determina cuál es la forma de tratar cada archivo. Los
MIME types no corresponden necesariamente con la extensión de un archivo; sin embargo, sí hay una asociación entre
extensiones de archivo y sus MIME types.
Éstas son algunas de las extensiones estándar más utilizadas en la Web, así como el tipo de contenido al que se
refieren y su MIME type.
Extensión Tipo de Contenido MIME Type
.html o .htm Documento HTML. Contiene texto e instrucciones HTML que serán
interpretadas.
text/html
.text o .txt Documento en texto plano. El navegador presenta este archivo como
si fuese un único bloque de texto y no interpreta ninguna instrucción
HTML que pueda llevar dentro. Éste es el comportamiento por defecto
del navegador para cualquier archivo que contenga una extensión
desconocida o que carezca de extensión.
text/plain
.gif Archivo de imagen en formato GIF.
.xbm Archivo de imagen en formato X-Bitmap (blanco y negro).
.xpm Archivo de imagen en formato X-Pixmap (color).
.jpeg o .jpg Archivo de imagen en formato codificado jpeg.
.mpeg o .mpg Archivo de imagen de vídeo o cine (en movimiento). video/mpeg
.au Archivo de audio (sonido) codificado en aiff-encoded.
.mid Archivo de audio (sonido) generado con secuenciadores midi. audio/x-midi
41
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
.avi Archivo con vídeo y sonido. video/avi
.mp3 Archivo de sonido codificado en formato mp3. audio/mpeg3
.exe Archivo binario ejecutable en sistema operativo DOS o Windows. application/octet-
stream
.hqx Archivo binario ejecutable en sistema operativo Macintosh.
.Z o .zip Archivo comprimido. Para poder utilizarlo hay que indicarle al
visualizador una herramienta de compresión.
application/x-
compressed
.pdf Documento generado en formato Acrobat. Se requiere que el
navegador soporte la visualización de pdf para poder explorar este
tipo de archivos.
application/pdf
.doc Documento generado por MicrosoftWord. application/msword
3.2.2 EL ELEMENTO CABECERA (HEAD)
La cabecera (HEAD) es la primera de las dos partes en que se estructura un documento HTML. Dentro de ella
se encuentra información acerca del documento, y generalmente esta zona no se visualiza cuando se navega por la
página Web escrita. La cabecera está identificada por la etiqueta <HEAD> y es una etiqueta que necesita ser cerrada,
es decir, es preciso escribir </HEAD> para identificar claramente la zona de encabezado de una página HTML. A su
vez, una cabecera puede contener otras etiquetas dentro para describir información pertinente a la página Web que
se desea ver.
La única etiqueta obligatoria dentro de la zona de cabecera es la etiqueta <TITLE>.Esta etiqueta, que traduce
título, permite dar una breve descripción que identifica a la página Web. El contenido de esta etiqueta es lo que el
navegador guarda en su zona de direcciones y es lo que aparece en el marco de la ventana del navegador. También lo
guarda en su caché, y servirá para mostrar la página, cuando sea llamada otra vez, sin necesidad de conectarse de
nuevo al servidor de origen. No hay que confundir la etiqueta <TITLE> con el nombre del archivo, o con el título que
luego los usuarios podrán visualizar en la página Web.
<HEAD>
<TITLE>Cabecera del documento HTML de ejemplo </TITLE>
</HEAD>
Título del documento HTML
Figura 3.4. Título de un documento HTML. Configurado en el HEAD
42
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Otra etiqueta que puede utilizarse dentro de la cabecera de un documento HTML es <META>. El objetivo de esta
etiqueta es proveer metainformación (metadata) sobre un documento HTML. Por lo general, los elementos META
son utilizados para especificar datos de la página Web, tales como una descripción de la misma, el autor, la última
modificación o las palabras clave o keywords. Los metadatos escritos no serán visualizados en la página Web, pero por
lo general son utilizados por el navegador Web, los motores de búsqueda de Internet y otros servicios Web.
Para la especificación de palabras clave con la etiqueta META se debe utilizar el atributo name con el valor de
keywords y en el atributo content escribir dichas palabras separadas por comas. Por ejemplo:
<HEAD>
<TITLE>Título de la cabecera del documento</TITLE>
<META NAME=”keywords” CONTENT=”HTML, Web, etiquetas”>
</HEAD>
Estas palabras clave serán las que utilicen los motores de búsqueda para indexar una página Web. Es decir, los
motores interpretan que el contenido de vuestra página tiene estrecha relación con las palabras clave, por tanto, es
recomendable que las keywords utilizadas describan la página Web de la manera más exacta posible. Además, si una
página Web no cuenta con palabras clave especificada será más difícil de indexar y, por ello, más difícil de que sea
encontrada dentro del océano de información que constituye la Web.
Si lo que se desea es mostrar un breve resumen de los contenidos ofrecidos por una página Web, podemos utilizar
el atributo name con el valor description, de la siguiente manera:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME=”description” CONTENT=”Manual para crear una página HTML.”>
</HEAD>
También es posible utilizar la etiqueta META para indicar al navegador la tabla de caracteres que se ha empleado
al escribir la página. De no ser especificado este valor, se corre el riesgo de que el navegador no muestre correctamente
los caracteres especiales no ASCII, tales como acentos, letras de alfabetos no occidentales, etc., que se hayan quedado
sin codificar de la forma típica en HTML.
<HEAD>
<TITLE>Head de un documento </TITLE>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1”>
</HEAD>
Los valores más habituales para el atributo charset son:
n <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
n <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1”>
n <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8 / html5”>
n <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-15”>
n <meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252”>
También se puede utilizar la etiqueta META para forzar al navegador a recargar una página o que no se utilice la
copia de la misma que se encuentra en la caché del equipo. Por ejemplo, para que el navegador vuelva a recargar la
página cada 10 segundos se puede escribir el siguiente código:
43
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV=”Refresh” CONTENT=”10”>
</HEAD>
Este tipo de instrucciones deben utilizarse con precaución y es recomendado solo para páginas Web cuya información
puede ser muy variable, por ejemplo, valores en tiempo de real de la bolsa, los resultados de un partido de fútbol o una
página de noticias de actualidad. De otra forma, y si sabe que el contenido de la página no va a variar, esta instrucción
no es recomendada, ya que podría sobrecargar el servidor de la página Web.
Otra posibilidad es forzar la expiración inmediata en la caché del navegador de la página recibida, lo que provoca
que la página sea solicitada de nuevo al servidor cada vez que se llama, en lugar de cargar la copia que ya existe en
la máquina del cliente. El elemento META quedaría de la siguiente manera:
<META HTTP-EQUIV=”Expires” CONTENT=”Tue, 20 Aug 1996 14:25:27 GMT”>
Si se pone una fecha ya pasada, como en el caso del ejemplo, el navegador elimina inmediatamente de la caché la
página recibida, y si no es pasada, lo hará en el momento indicado por la misma. También se le puede dar valor cero
a la fecha de expiración, dando el siguiente valor al elemento META:
<META HTTP-EQUIV=”Expires” CONTENT=”0”>
Finalmente, otra opción es impedir que el navegador guarde en caché la página. Esto es especialmente útil cuando
se trabaja con formularios (los cuales se verán en la sección 1.14) que consultan datos dinámicos. El elemento META
se describiría de siguiente forma:
<META HTTP-EQUIV=”Expires” CONTENT=”no-cache”>
Es importante tener en cuenta que se pueden poner todos los elementos <META> que se consideren necesarios,
pero sin repetirlos.
3.2.3 EL CUERPO DEL DOCUMENTO HTML (BODY)
El cuerpo (BODY) es la segunda y última de las dos partes en que se estructura un documento HTML. Este
elemento es obligatorio, ya que es aquí donde reside el verdadero contenido de la página, y por tanto, al contrario de
la HEAD, sí es visualizado cuando navegamos por ella. Este elemento es descrito por la etiqueta <BODY> y debe ser
cerrada de forma explícita dentro del documento.
<BODY>
Este será el contenido de la página Web y lo que realmente visualizarán los usuarios de
la misma.
</BODY>
Por defecto, los navegadores presentan el texto de una página ajustando los contenidos a la esquina superior
izquierda de la pantalla. La etiqueta BODY tiene parámetros que permiten modificar los márgenes por defecto.
Para ello, se utilizarán los parámetros marginwidth, marginheight o los parámetros leftmargin, topmargin,
rightmargin, bottommargin. Sin embargo, cada navegador puede interpretar estos parámetros de forma diferente.
Por ejemplo, Firefox utiliza sólo dos instrucciones que afectan simultáneamente a los márgenes superior e inferior e
izquierdo y derecho, respectivamente:
n <body marginwidth=”píxeles”>, para los márgenes izquierdo y derecho.
n <body marginheight=”píxeles”, para los márgenes superior e inferior.
44
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
En cambio, Internet Explorer utiliza uno para cada cual:
n <body leftmargin=”píxeles”>, para el margen izquierdo.
n <body topmargin=”píxeles”>, para el margen superior.
n <body rightmargin=”píxeles”>, para el margen derecho.
n <body bottommargin=”píxeles”>, para el margen inferior.
Donde cada uno de estos parámetros se expresa en el número de píxeles que se quiere mover cada margen hacia
el interior de la página. Estos parámetros también sonaccesibles desde instrucciones de estilo.
Otra característica que puede controlarse desde la etiqueta BODY es el color que tomarán los links que contenga la
página. Por ejemplo, para hacer que los links sean amarillos antes de ser visitados, azul-verde cuando son activados y
verdes después de haber sido utilizados, se debería escribir la etiqueta BODY con los siguientes parámetros y valores:
<BODY LINK=”#FFFF00” VLINK=”#22AA22” ALINK=”#0077FF”>
Al igual que la etiqueta HEAD, BODY también puede anidar otras etiquetas y cada una de ellas describirá un
diferente tipo de contenido dentro de la página Web. De acuerdo con el tipo de contenido introducido, se podrá contar
con un conjunto de etiquetas que permitirán personalizar dicho contenido de forma que sea visualizado por los
usuarios de manera más o menos agradable. Es por ello que en las secciones siguientes mostraremos cuáles son las
etiquetas que se pueden utilizar dentro de un documento HTML, divididas de acuerdo con el tipo de contenido que
describen o afectan.
3.3 TEXTO EN HTML
El elemento básico que se muestra en una página Web es de tipo texto. Por defecto, cualquier texto que se escriba
dentro de una etiqueta BODY se trata como un tipo de texto normal, es decir, sin ningún tipo de efecto y sin que
sobresalga por encima de otros textos escritos dentro de la página. Sin embargo, si una página Web contiene mucho
texto y todo el texto es normal, sin ningún tipo de diferenciación, o sin ningún efecto sobre la letra, esto puede llevar
al usuario a abandonar nuestra página, ya que la considerará monótona e incluso de difícil lectura. Es por ello que
HTML posee un conjunto de etiquetas para definir propiedades a los textos de tal forma que puedan tener distintos
tamaños, diferentes efectos de letra o incluso que se utilicen diversas fuentes de letra.
A continuación, describiremos cuáles son las etiquetas más habituales dentro del lenguaje HTML que pueden
escribirse dentro del cuerpo de una página Web y que sirven para calificar un texto y darle efectos o propiedades
diferentes a las especificadas por defecto en un documento HTML.
3.3.1 ENCABEZADOS
Los encabezados o títulos dentro del cuerpo de la página sirven para indicar al usuario qué tipo de información
presenta, así como la forma en la que ésta se organiza dentro de la página Web. HTML nos presenta diferentes niveles
de encabezamiento, los cuales describen un tamaño mayor o menor de acuerdo con el nivel en que nos encontremos.
Para ello, se utilizan las etiquetas <Hx> texto a aplicar la etiqueta </Hx>, donde x es un número que puede
variar entre 1 y 6, siendo 1 el tamaño mayor. La siguiente figura muestra una página html que contiene un código
html con distintos encabezados de diversos niveles.
45
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
<body>
<H1> Texto de prueba (H1)</H1>.
<H2> Texto de prueba (H2)</H2>
<H3> Texto de prueba (H3)</H3>
<H4> Texto de prueba (H4)</H4>
<H5> Texto de prueba (H5)</H5>
<H6> Texto de prueba (H6)</H6>
</body>
Figura 3.5. Encabezados en HTML
Es importante tener en cuenta que después del cierre de una etiqueta de encabezamiento el navegador inserta
automáticamente un salto de párrafo. También es importante resaltar que no es obligatorio tener toda la jerarquía de
niveles de encabezamiento, es decir, si se desea utilizar un encabezado de nivel 3, no es necesario definir previamente
un encabezado de nivel 1 y de nivel 2.
Las etiquetas de encabezado admiten un parámetro de alineación denominado align, el cual puede tomar los
valores de center, left o right. Por ejemplo, si deseamos que un título de nivel tres esté centrado en la página,
la instrucción html quedaría de la siguiente forma:
<H3 align=center> Texto en H3 </H3>
3.3.2 CARACTERÍSTICAS DE LETRA: TIPOS Y TAMAÑOS
Otra forma de cambiar los tamaños de letra es utilizando la etiqueta <FONT> junto al atributo valor, el cual es
un número entre 1 y 7. El valor por defecto del texto es 3. A diferencia de los encabezados, esta etiqueta no produce
un salto de párrafo después de cada cambio, por lo que pueden hacerse cosas como ésta:
<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font>
<FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font>
<FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT>
Dando como resultado:
AAAAAAAAA
Es posible cambiar el tamaño por defecto del texto de toda la página utilizando la etiqueta:
<basefont size =valor>
El texto tomará el tamaño indicado por el atributo valor y lo mantendrá hasta que aparezca otro elemento
<basefont size=valor> y lo restaure o lo cambie por otro diferente. Tanto si se ha establecido un valor base como
si se utiliza el valor por defecto, los tamaños también pueden indicarse de forma relativa, por lo que el valor puede ser
positivo (+) o negativo (-) respecto al tamaño base. Por ejemplo, estos dos valores dan el mismo resultado:
46
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
n <font size=5>abcde</font> : se especifica el tamaño a 5 de forma absoluta.
n <font size=+2>abcde</font> : se especifica el tamaño a 5 de manera relativa, teniendo en cuenta que el
tamaño base es 3 y se debe incrementar en 2 veces su valor.
Otro atributo interesante de la etiqueta <font> permite elegir la letra utilizada en la página Web entre los
diversos tipos de que dispone por defecto el sistema operativo; se trata del atributo face. Este atributo permite forzar
el tipo de letra que el diseñador de la página quiere que vea el cliente, sin importar el que por defecto tenga establecido
el navegador. Por ejemplo:
<body>
Probando Fuentes de Letra
<font face=”times new roman”>texto de prueba 12345. Fuente de letra: Times New Roman</
font><br />
<font face=”courier new”>texto de prueba 12345 Fuente de letra: Courier New</font><br />
<font face=”courier”>texto de prueba 12345. Fuente de letra: Courier</font><br />
<font face=”roman”>texto de prueba 12345. Fuente de letra: Roman</font><br />
<font face=”small fonts”>texto de prueba 12345. Fuente de letra: Small Fonts</font><br />
</body>
Se visualizará de la siguiente manera:
Figura 3.6. Fuentes de letra en HTML
Este atributo es compatible con otros, tales como color o size. Por ejemplo, si la instrucción HTML es:
<font face=”impact” size=6 color=”black”> Probando letras</font>
Se visualizará:
Probando letras
Una consideración importante es que las fuentes de letra se toman del equipo cliente. Es decir, la fuente de letra
debe estar instalada en el equipo que va a visualizar la página para que ésta pueda ser vista correctamente. Si la
fuente no está disponible en un cliente, ésta no se verá, y en su lugar aparecerá la fuente por defecto del navegador.
Por ello, no es recomendable definir tipos de letra demasiado concretos o poco utilizados, y que probablemente no
lleguen a verse nunca en los clientes.
Si a pesar de todo, se define un tipo del que se tienen dudas de que exista en el cliente, se pueden indicar otros
tipos alternativos, de forma que el navegador si no tiene el primer tipo, utilizará el siguiente, y si tampoco lo tiene, el
próximo, etc.Así:
<FONT FACE=”fuente no convencional, Courier, arial” SIZE=4 COLOR=”red”>
Texto de prueba 12345 con tipos alternativos</FONT>
47
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
Donde el tipo de letra denominado «fuente no convencional» describe esa fuente rara o que puede no existir en
el cliente. Por tanto, si el navegador no encuentra esta letra utilizará la siguiente, que es Courier, y en caso de que
tampoco existiese, utilizaría Arial, que sí es habitual.
3.3.3 EFECTOS SOBRE TEXTO HTML
Aparte del tamaño y el tipo de letra, existen otros estilos que se pueden aplicar a un texto específico dentro de
HTML, como el texto en negrita, cursiva, subrayado, etc. Cada uno de estos efectos tiene una etiqueta que debe
cerrarse de manera explícita para que el navegador pueda detectar el texto que tendrá el efecto correspondiente.
La siguientetabla muestra la lista de efectos y su correspondiente etiqueta:
Formato del texto deseado Etiqueta
Texto en negrita: <B>Texto en negrita</B>
Texto realzado: <STRONG>Texto realzado</STRONG>
Texto en cursiva <I>Texto en itálica</I>
Texto con énfasis: <EM>Texto con énfasis</EM>
Texto ejemplo de código: <CODE>Texto ejemplo de código</CODE>
Texto teletipo: <TT>Texto teletipo</TT>
Texto subrayado: <U>Texto subrayado</U>
Texto tachado: <STRIKE>Texto tachado</STRIKE>
Texto de dirección: <ADDRESS>Texto de dirección</ADDRESS>
Texto intermitente: <BLINK>Texto intermitente</BLINK>
Texto superíndice (texto normal): <SUP>Texto Superíndice</SUP>
Texto subíndice (texto nomal): <SUB>Texto Subíndice</SUB>
Texto grande: <BIG>Texto grande</BIG>
Texto pequeño: <SMALL>Texto pequeño</SMALL>
Si pusiéramos estas sentencias en el body de una página html, se verían de la siguiente manera:
Figura 3.7. Efectos de texto
48
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Algunos navegadores han implementado un efecto que permite incluir explicaciones ocultas que aparecen al pasar
el ratón por encima de un texto (sin pulsar), pero sin cambiar de página ni abrir ninguna ventana nueva o emergente.
Este efecto se puede lograr con el uso de la etiqueta <ACRONYM> o también la etiqueta <ABBR>. Un ejemplo de su
uso es descrito a continuación:
<ACRONYM TITLE=”Hyper Text Markup Language”>HTML</ACRONYM>
<abbr TITLE=”Hyper Text Markup Language”>HTML</abbr>
Al pasar el ratón sobre la palabra HTML, se desvela su significado: HTML.
3.3.4 PÁRRAFOS
Por lo general, un texto está dividido en párrafos. Para definir los párrafos en una página HTML se utiliza la
etiqueta <P> </P> (del inglés, Paragraph). Aunque a menudo no se utiliza el cierre </P>, ya que el texto continuará
normalmente hasta que encuentre otro párrafo <P>, es conveniente acostumbrarse a ponerlo siempre. Un ejemplo de
su uso se muestra a continuación:
<P>Contenido de texto de párrafo uno. Contenido de texto de párrafo uno. Contenido de
texto de párrafo uno. Contenido de texto de párrafo uno. </P>
<P> Contenido de texto de párrafo dos. Contenido de texto de párrafo dos.Contenido de
texto de párrafo dos.Contenido de texto de párrafo dos.</P>
Y éste sería el resultado:
Figura 3.8. Párrafos en HTML
Como se puede observar, hay una línea en blanco entre los dos bloques de párrafo escrito. Si no se quiere dejar esa
línea vacía entre los dos párrafos, puede utilizarse el elemento <BR> (de BReak). El elemento <BR> es un separador,
no un indicador de bloque, y por defecto no necesita ser cerrado.
El elemento <p> admite cuatro atributos de alineación: align=left, es la alineación por defecto y alinea el texto
a la izquierda; align=right, donde el texto del párrafo queda alineado a la derecha; align=center, donde el texto
queda centrado; y align=justify, donde el texto ocupará todo el ancho de línea.
49
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
Un ejemplo de su utilización es el siguiente:
<body>
<h4>alineación de párrafos</h4>
<p align=left>
texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1
texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 texto 1 </p>
<p align=right>
texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2
texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 texto 2 </p>
<p align=center>
texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3
texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 texto 3 </p>
<p align=justify>
texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4
texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 texto 4 </p>
</body>
y éste sería el resultado:
Figura 3.9. Alineación de párrafos en HTML
Otra etiqueta interesante para la organización del texto es <BLOCKQUOTE>, la cual sirve para presentar párrafos
tabulados, que se visualizan como adentrados dentro de la alineación normal de la página.
Se escribirá así:
<blockquote>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
<blockquote>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
</blockquote>
</blockquote>
50
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
El resultado de este código en un navegador sería el siguiente:
Figura 3.10. Párrafos tabulados anidados
En el ejemplo mostrado existe un anidamiento de dos bloques <blockquote> y, por tanto, debe haber dos cierres
</blockquote> al final.
Otro separador de bloques de texto es el elemento vacío <hr> (de Horizontal Rule, regla o línea horizontal). El
elemento <HR> admite dos parámetros: width y size. El primero define la longitud de la línea y el segundo, su
anchura. No es obligado usar los dos a la vez.
Por ejemplo, si se escribe:
<hr width=400 size=5>
El resultado será:
Figura 3.11. Línea horizontal normal
El valor del atributo WIDTH se puede expresar, como en el ejemplo anterior, en número de puntos (píxeles), o en
tantos por ciento referidos al ancho total de la ventana. Un ejemplo de su utilización sería el siguiente:
<hr width=80% size=5>
Además, se puede indicar su posición respecto a los márgenes de la ventana con los atributos align=center (por
defecto), align=left y align=right. Por ejemplo:
<hr width=80% size=5 align=left>
51
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
3.3.5 OTRAS FORMAS DE ORGANIZACIÓN DE TEXTO
Además de párrafos o párrafos tabulados, también es posible utilizar la etiqueta <div>, la cual se comporta de
forma parecida a la etiqueta <br>, pero admitiendo los mismos atributos de la etiqueta de párrafo <p>: align=left,
align=right y align=center.
Los siguientes apartados presentan ejemplos del uso de la etiqueta DIV con distintos tipos de alineación:
<div align=left>
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
</div>
<div align=right>
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
< /div>
<div align=center>
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
</div>
El resultado en el navegador de este código sería:
Figura 3.12. Creación de zonas con la etiqueta DIV
Esta etiqueta ha tomado gran relevancia ya que se utiliza para definir bloques especiales con instrucciones de
estilo, como bordes, tamaño, situación, alineación, color… utilizando las denominadas hojas de estilo en cascada o CSS
52
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
(este tema se verá en un capítulo posterior); sin embargo, si no se utiliza asociado a CSS, puede parecer una etiqueta
sin sentido y con poca interpretación por parte del navegador.
Otra etiqueta que tiene un comportamiento parecido a DIV, y que también está asociado a CSS pero que no admite
atributos de alineación y no produce ni separación de párrafo ni de línea, es <SPAN>. Un ejemplo de su forma de uso es:
<span>
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
</span>
<span>
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2
</span>
El resultado en el navegador se observaría de la siguiente manera:
Figura 3.13. Uso de la etiqueta SPAN
3.4 ENLACES DE HIPERTEXTO
Como ya hemos mencionado, el factor diferenciador de una página Web es su poder denavegación a través de la
creación de enlaces de hipertexto. Un hipertexto es un elemento (texto o de otro tipo) que tiene la propiedad de ser
activado a través de una página Web, de manera que, al pulsar sobre él, se permita al usuario ir a otra página de
Internet. Los enlaces de hipertexto son también denominados links o hiperlinks.
La etiqueta para insertar un enlace o link en una página Web es <A> (del inglés Anchor). Esta etiqueta
posee un atributo denominado href, el cual permite indicar la página o archivo a la que se dirigirá el usuario si decide
pulsar sobre el texto que posee el hipervínculo. El valor del atributo href es de tipo texto, por lo que debe estar entre
comillas. El texto del enlace será aquel que esté contenido entre la instrucción de inicio y la instrucción de final de
la etiqueta. Para facilitar la detección de los hipervínculos, los navegadores suelen resaltar los textos que los poseen,
ya sea mostrándolo de un color diferente y/o subrayándolo y, además, el cursor suele cambiar de forma al pasar por
encima de un hipervínculo.
53
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
Un ejemplo del uso de un hipervínculo es el siguiente:
<a href=”página Web a la que el usuario irá”> Texto del Enlace </a>
Figura 3.14. Visualización de un hipervínculo en una página Web
En el ejemplo anterior, el hipervínculo indica de manera concreta cuál es el archivo html que deberá ser abierto.
Sin embargo, esto no sucede en todas las ocasiones. Por ejemplo, podemos crear un link que vaya al sitio Web www.
google.com. En este caso, este enlace no indica un archivo concreto; sin embargo, el link funciona perfectamente. La
razón es que todos los servidores Web tienen configurado una página Web por defecto o página de inicio. Esta página
suele dar la bienvenida al usuario a un sitio Web, mostrándole la información que el creador del sitio Web considera
relevante para que el usuario continúe navegando por la página. De esta forma, si no se introduce el nombre de un
archivo de manera explícita, el servidor responde con la página por defecto y el usuario siente que el sitio Web ha
contestado. Por lo general, el nombre elegido para este archivo es index.html o index.htm, de acuerdo con la tecnología
de servidor utilizada.
Se suele decir que un enlace está «roto» cuando el contenido al que se refiere no se encuentra disponible a través
de la Red. El código de error para una página no encontrada es el 404.
Por defecto, un hipervínculo muestra su resultado en la misma página Web en la que es llamado. Sin embargo,
este comportamiento se puede cambiar a través del atributo target. Los posibles valores para el atributo target y lo
que significan se resumen en la siguiente tabla:
Valor del atributo target Significado
_blank Abre el hipervínculo en una nueva ventana o pestaña.
_self Abre el hipervínculo en el mismo lugar en el que fue activado el enlace
(comportamiento por defecto).
_parent Se utiliza cuando se trabaja con marcos en HTML, y abre el hipervínculo en el marco
padre del marco en el que ha sido llamado el enlace.
_top También utilizado con marcos, abre el hipervínculo en modo pantalla completa.
Otra característica que se puede indicar en un hipervínculo es un «texto alternativo» a través del atributo title de
la etiqueta <A>. Este texto se mostrará cuando el cursor del ratón pase por encima de un vínculo sin hacer clic sobre
el mismo. Por tanto, un ejemplo completo del uso de la etiqueta <A> es el siguiente:
<a href=”página_Web_enlace.html” target=”_blank” title=”texto alternativo del enlace”>
Texto de enlace </a>
54
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
3.4.1 TIPOS DE ENLACES
Los enlaces pueden clasificarse en dos tipos: los relativos o locales y los externos o absolutos:
n Enlaces locales o relativos: son aquellos que enlazan las páginas que componen un mismo sitio Web.
Generalmente, estas páginas está alojadas en el mismo servidor Web. Es por ello que los enlaces se pueden
crear de forma relativa, es decir, no se escribe una dirección Web completa, sino que se escribe de acuerdo con
el lugar establecido como Home del sitio Web. Un ejemplo de dirección de un enlace interno es: /ejemplo/index.
html.
n Enlaces externos o absolutos: son aquellos que permiten ir a una página que está en un servidor Web distinto al
de la página Web de origen. Cuando se crea un enlace de este tipo, es necesario especificar la dirección completa
de Internet, es decir, la URL de la página a la que queremos enlazar. Por ejemplo: http://www.otroservidor.com/
ejemplo/index.html.
Aunque la mayoría de los enlaces se dirigen hacia páginas Web, éstos también pueden hacer referencia a otro
tipo de elementos que así mismo pueden estar disponibles en la Red, como imágenes, archivos de sonido, vídeo y, en
general, cualquier tipo de archivo que pueda ser visualizado a través de un navegador de Internet.
Además, también es posible crear hipervínculos internos dentro de una misma página Web. Es decir, indicar a un
hipervínculo que se dirija a otro lado de la misma página Web. Este tipo de vínculos es útil si la página Web es muy
larga y permite a los usuarios desplazarse rápidamente por la página, evitando que tengan que desplazarse con el
teclado o con el ratón. Para la creación de estos vínculos, es necesaria la inserción de un tipo especial de hipervínculo
llamado anclas o anclajes. Las anclas identifican una zona de la página Web; también son creadas con la etiqueta
<A>, pero utilizando el atributo name. Un ejemplo de su uso es el siguiente:
<a name=”arriba”>
El lugar de la página Web en el que esté esta instrucción será identificado con el nombre de «mi ancla». Para
escribir un hipervínculo que haga referencia a un ancla dentro de una misma página Web, se utiliza la misma sintaxis
que para crear un vínculo relativo, pero utilizando el carácter de # del nombre del ancla:
<a href=”#arriba”> Ir arriba </a>
Si en lugar de querer hacer referencia a un ancla de la misma página Web se desea referenciar a un ancla de otra
página Web, es necesario indicar la ruta de la página Web y posteriormente el ancla. El formato que deberá tener un
link a un ancla de otra página es:
<a href=”página_Web_de_destino.html#nombre_ancla”> Link a un ancla externa </a>
Otro tipo especial de hipervínculo es aquel que indica que el enlace debe enviar un correo electrónico. Este tipo de
link se indica con la sentencia mailto dentro del cuerpo del hipervínculo. Esta sentencia también tiene propiedades, y
para ser utilizados se deben escribir tras el signo ?, con la forma propiedad=valor y separados por el símbolo &. Estas
propiedades se resumen en la siguiente tabla:
55
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
Propiedades de mailto Significado
Subject Especifica el asunto del correo electrónico.
Body Contenido del correo.
Cc Envía el correo a más de un destinatario. Si se desea poner en copia a más de un
destinatario, se puede hacer separándolos por comas (,).
Bcc Envía copia del correo a los destinatarios indicados, pero de forma oculta.
El formato para un enlace de este tipo es el siguiente:
<a href=”mailto:destinatario@mail.com ? subject=Asunto & cc=copia@mail.com &
bcc=copiaoculta@mail.com & body=Contenido del mensaje”> Enviar mensaje </a>
3.5 IMÁGENES
Una imagen vale más que mil palabras y esto también es aplicable a la creación de páginas Web. La inserción de
imágenes puede enriquecer los contenidos de una página, haciéndola más clarificadora y enriquecedora.
Para insertar una imagen en una página Web es imprescindible guardarla en un archivo independiente al
documento HTML. Dicho archivo podría contener la imagen en varios formatos, siendo los más comunes los formatos
gif y jpeg, que pueden ser vistos con la práctica totalidad de navegadores. Es importante recordar que, al igual que
las páginas HTML, los nombres de los archivos que contienen imágenes son sensibles a mayúsculas y minúsculas;
por tanto,no es lo mismo un archivo que se llama IMAGEN.GIF que imagen.gif, y un nombre de archivo puede ser el
origen de un error en la creación de una página Web.
La etiqueta utilizada para insertar una imagen es <IMG> y cuenta con el atributo scr (del inglés source o fuente),
el cual es de carácter obligatorio y debe apuntar al nombre de la imagen que se desea insertar en la página, indicando
además la ruta de directorios o path (en caso de ser necesario), o bien la dirección completa de la imagen en Internet
(URL) si no se encuentra en el mismo sitio Web de la página HTML.
<img src=”imagen.gif”>
Esta etiqueta cuenta con otros atributos que permiten especificar información adicional sobre la imagen. Estos
atributos son:
Atributos de la etiqueta <img> Significado
alt Especifica un texto alternativo para la imagen, el cual se mostrará en caso de
que ésta no pueda ser visualizada.
width Define el ancho de imagen cuando ésta sea insertada en la página Web. El
valor insertado en esta etiqueta se interpretará en píxeles. La imagen será
escalada, para hacerla más grande o más pequeña, si el valor dado a este
atributo no coincide con el ancho real de la imagen.
height Este atributo tiene el mismo comportamiento que el anterior, pero aplica su
valor a la altura con la que se mostrará la imagen.
56
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
3.5.1 FORMATOS DE IMÁGENES
El formato de una imagen es el código usado para almacenarla en un archivo. Los formatos simples guardan una
tabla con el color de cada punto de pantalla (denominado píxel) de la imagen. Sin embargo, si la imagen es muy grande,
con este formato la imagen ocupará demasiado espacio y por lo mismo se demorará su carga, retrasando la carga de
la página Web. A raíz de este problema, se han creado nuevos formatos que consiguen reducir el tamaño de la imagen
a través de la aplicación de fórmulas matemáticas. Los formatos GIF y JPEG son ejemplos de estos formatos. Los
navegadores usan la extensión de los archivos de imagen para detectar su formato, así como su forma de codificación.
Es por ello que el cambiar la extensión de una imagen no implica cambiar el formato de la misma; por el contrario,
la imagen puede dañarse o quedar inútil.
3.5.2 ALINEACIÓN Y MÁRGENES EN IMÁGENES
Cuando se inserta una imagen en una página Web, ésta se sitúa por defecto exactamente en el lugar donde se ha
insertado la etiqueta IMG, independientemente de si hay texto alrededor o no. Estas imágenes reciben el nombre de
imágenes en línea con el texto, ya que la imagen queda alineada en su parte inferior a la línea de texto en la que esté.
Esta característica es muy conveniente si el tamaño de la imagen es relativamente pequeña, ya que ésta se
visualizará como si fuese parte de un párrafo. Pero ¿qué pasa si la imagen que se va a insertar es grande? Seguramente,
el comportamiento que se desearía es que la imagen quedase rodeada de texto. Esto se puede conseguir utilizando el
atributo align de la etiqueta <IMG>.La siguiente tabla muestra los posibles valores que puede tener este atributo y
el comportamiento que toma la imagen con cada uno de ellos.
Tipo de alineación Características
align=top Alinea la parte superior de la imagen con la parte superior de la línea. Para determinar
cuál es el límite superior de la línea se tendrán en cuenta todos los elementos de
ésta (ya sea texto, imágenes u otros), estén éstos antes o después de la imagen que
estamos insertando.
align=middle Alinea el centro de la imagen (en eje vertical) con el centro de la línea. Al igual que en
el caso anterior, el centro se calcula en función de todos los elementos que hay en la
línea donde se encuentra la imagen.
align=bottom Alinea la parte inferior de la imagen con la parte inferior de la línea de texto. En
este caso, no se tienen en cuenta otros elementos aparte del texto para realizar el
alineamiento.
align=left Con esta opción, la imagen insertada se sitúa a la izquierda de la página, no importando
el lugar en el que se haya insertado la etiqueta de <IMG>, es decir, cuando el
navegador se encuentra una imagen alineada a la izquierda en medio de un párrafo de
texto, primero pasa la imagen a la siguiente línea y la inserta alineada a la izquierda.
Posteriormente, si el navegador se encuentra con más texto y queda sitio en la
línea anterior a la imagen, lo rellena con ese texto, cuando se acabe la línea seguirá
mostrando el texto en las líneas sucesivas, rodeando la imagen.
align=right El efecto provocado por esta sentencia es idéntico al anterior, sólo que situando la
imagen en el margen derecho de la página y con el texto bordeando la imagen por la
izquierda.
57
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
Aparte de la alineación de la imagen, también es posible especificar los márgenes, es decir, el espacio que se
establecerá entre la imagen y el texto que lo rodee. Para poder controlar esta característica, existen los atributos
vspace y hspace dentro de la etiqueta <IMG>.
Vspace indicará el margen vertical, mientras que hspace mostrará el margen horizontal. El tamaño de los
márgenes se indicará en píxeles. Un ejemplo de imagen utilizando estos atributos es:
<img src=”imagen.gif” align=”left” vspace=#_piíxeles hspace=#_piíxeles>
3.5.3 ENLACES EN IMÁGENES
Al igual que con un texto, las imágenes también pueden poseer hipervínculos. La forma en la que se debe realizar
un enlace de este tipo es una combinación de las etiquetas <A>, relativa a la creación de hipervínculos, e <IMG>,
relativa a la inserción de imágenes, donde la etiqueta <IMG> está contenida en la etiqueta <A>. Estas sentencias son
del tipo:
<a href=”link_imagen”><img src=”imagen.jpg” alt=”texto alternativo imagen”></a>
3.5.4 IMÁGENES DE FONDO
HTML permite que una imagen se convierta en el fondo de una página Web. El requisito para que una imagen
pueda ser en formato GIF o JPEG al igual que las imágenes normales es que ésta se almacene como fichero
independiente al documento HTML con la extensión adecuada.
Para incluir una imagen de fondo deberemos usar el atributo background de la etiqueta <BODY>. El funcionamiento
de background es idéntico al del atributo src de la etiqueta <IMG>, es decir, el valor de ésta debe indicar cuál es la
imagen que se desea como fondo de página junto con su ruta de directorios (path), si es necesaria, o bien la dirección
completa de la imagen en Internet (URL), si no se encuentra en el mismo sitio Web de la página HTML. El formato
de la sentencia para ese caso es:
<body background=”imagen_fondo_página.jpg”>
En este caso, la imagen está en la misma carpeta en la que se encuentra la página Web.
Las imágenes que se inserten como fondo de página serán mostradas en «mosaico», es decir, se replicará la imagen
tanto en sentido horizontal como vertical hasta ocupar toda el área de la página. Por esta razón, la elección de la
imagen se debe hacer con especial cuidado, ya que de otra forma los bordes no encajarán y se marcarán fuertemente,
dando un aspecto de sobrecarga a la página. Es por ello que se recomienda utilizar una imagen de fondo sólo cuando
sea estrictamente necesario. Algunas recomendaciones para la elección de la imagen son:
n Imagen que muestra un logo sobre un relleno sólido que genere poco contraste con el contenido de la página.
n Imagen especial cuyos bordes encajen perfectamente, de manera que en formato mosaico dé la impresión de
que es una única imagen del tamaño real de la página. Si estás interesado en crear una imagen de este tipo,
debes saber que existen aplicaciones especiales, disponibles a través de Internet, que pueden servir de ayuda.
58
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
3.6 LISTAS
Una lista es una enumeración de elementos generalmente en forma de columna que se realiza con el propósito de
facilitar la visualización de dichos elementos. Insertar una enumeración o lista en HTML también es posible a través del
uso de etiquetas. Sin embargo, la creaciónde este tipo de elementos difiere ligeramente de otros que ya hemos visto, ya
que es necesario utilizar una etiqueta para indicar el tipo de lista que se quiere crear y otra etiqueta para indicar cada uno
de los elementos contenidos en la lista. La etiqueta que indica el tipo de lista deberá escribirse al inicio y al final de ésta.
De acuerdo con el tipo de lista que se va a crear, se utilizará una etiqueta diferente. La siguiente tabla resume los
tipos y etiquetas que se pueden usar, así como los atributos de cada tipo y sus valores.
Tipo de lista Etiqueta utilizada para inicio y fin
Listas ordenadas o numeradas <ol> </ol>
Listas no ordenadas o de viñetas <ul> </ul>
Listas de directorios <dir> </dir>
Listas de menús <menu> </menu>
Listas de definición o de glosario <dl> </dl>
Por lo general, la etiqueta para denotar los elementos de una lista es <LI> y, aunque es una etiqueta que no
necesita cierre, es conveniente cerrarla al final de cada elemento. Un ejemplo de cada una de las listas presentadas
con tres elementos cada una es el siguiente:
<h4>Listas</h4>
Trabajando con UL
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Trabajando con OL
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
Trabajando con DIR
<dir>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</dir>
Trabajando con MENU
<menu>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</menu>
Figura 3.15. Listas en HTML
59
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
En el caso de las listas no numeradas, la viñeta por defecto es un disco. Sin embargo, esta característica puede ser
configurada a través del atributo type. Los posibles valores para este atributo son: disc (disco), circle (círculo), square
(cuadrado) y none (sin viñeta).
En el caso de las listas numeradas, también es posible configurar la numeración que se desea utilizar dando otros
valores al atributo type. Por defecto, las listas se marcan con números arábigos; en este caso, type toma el valor 1. Por
otro lado, si type=”a”, la lista se numera con letras minúsculas, mientras que si type=”A”, la numeración se hará con
letras en mayúsculas. Por último, si type=”I”, la lista tendrá una numeración romana en mayúsculas y si type=”i”, la
numeración utilizada será romana en minúsculas. En algunos casos puede ser conveniente que la lista no comience
por el número 1 o por la letra A, indicando el valor deseado en el atributo start. Dos ejemplos de la utilización de este
atributo son:
<ol type=1 start=5>
<li>Primer elemento
<li>Segundo elemento
<li>Tercer elemento
</ol>
<ol type=a start=5>
<li>Primer elemento
<li>Segundo elemento
<li>Tercer elemento
</ol>
Las listas de descripción o glosarios son listas de términos con sus respectivas definiciones o descripciones y, a
diferencia de los otros tipos de listas, sus elementos no se escriben con la etiqueta <LI>. En este caso, cada uno de los
elementos estará definido por dos etiquetas: <DT>, que contiene el nombre del término, y la etiqueta <DD>, en donde
se encapsulará el significado de dicho término. Un ejemplo de este tipo de lista se presenta a continuación:
<dl>
<dt>Término 1</dt>
<dd>- Descripción del término 1</dd>
<dt>Término 2</dt>
<dd>- Descripción del término 2</dd>
</dl>
La visualización en el navegador se muestra a continuación:
Figura 3.16. Creación de una lista de glosario
60
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
3.7 TABLAS
Las tablas son, sin duda, uno de los elementos más utilizados y potentes dentro del lenguaje HTML, gracias a su
poder para organizar la página con pocos elementos, consiguiendo efectos espectaculares. Aunque en la actualidad
existen otras formas de organización del contenido dentro de una página Web, las tablas siguen siendo uno de los
recursos más usados por los diseñadores, ya que son fáciles de usar y controlar. Las celdas de una tabla, que pueden
ser con borde visible o invisible, pueden contener cualquier tipo de elemento HTML, ya sea texto en cualquier tamaño
o color, imágenes, hipervínculos, etc.
3.7.1 CREACIÓN DE TABLAS
El elemento básico de definición de una tabla es la etiqueta <TABLE>, la cual debe cerrarse con la instrucción </
TABLE>, indicando que la tabla ha terminado. Una vez definida la tabla, se procede a definir dentro de la misma cada
una de las filas, utilizando la etiqueta <TR> (del inglés Row). Por último, dentro de cada fila se definen una o varias
celdas de datos a través de la etiqueta <TD> (de Data). Si lo que se desea es agregar una fila de títulos o encabezados,
los elementos de la fila de títulos se pueden crear a través de la etiqueta <TH> (del inglés header). Una cabecera <TH>
es lo mismo que una celda de datos <TD>, pero de forma automática el texto de su contenido recibe los atributos de
negrita y centrado. Sólo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez. Cada uno de
estos subelementos debe llevar sus correspondientes etiquetas de cierre: </TR> </TD> y </TH>, según corresponda.
Un ejemplo de una tabla básica con un encabezado, dos columnas y dos filas de datos es el siguiente:
<table>
<tr>
<th>fila1,columna encabezado1</th>
<th>fila1,columna encabezado2</th>
</tr>
<tr>
<td>fila2,columna1</td>
<td>fila2,columna2</td>
</tr>
<tr>
<td>fila3,columna1</td>
<td>fila3,columna2</td>
</tr>
</table>
Figura 3.17. Ejemplo de tabla sencilla en HTML
Una tabla también puede poseer un título. Éste es un texto que acompaña a la tabla y puede estar situado encima
o debajo de ella. Para insertarlo se debe utilizar la etiqueta <CAPTION>, la cual debe estar dentro de las etiquetas
<TABLE> y </TABLE>. Este título se puede mostrar en la parte superior o inferior de la tabla. Para indicar la posición
en la que se desea insertar el caption, se debe utilizar el atributo align. Este atributo puede tomar dos valores: top,
61
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
si deseamos que el título sea mostrado encima de la tabla, y bottom, si queremos que en el título se vea en la parte
inferior como un pie de tabla.
Un ejemplo de su utilización es el siguiente:
<TABLE>
<CAPTION align=”top”> Tiítulo de la tabla </CAPTION>
... Código de la tabla ...
</TABLE>
3.7.2 FORMATO DE TABLAS: BORDES, ALINEACIÓN, TAMAÑO, ETC.
Como cualquier otro elemento HTML, las tablas poseen un comportamiento por defecto. Sin embargo, aspectos
como los bordes, la alineación o su tamaño pueden ser configurables a través del uso de distintos atributos.
En cuanto a los bordes, encontramos el atributo border. Este atributo se aplica a la etiqueta <TABLE>. Su valor
indica cuál será el ancho de los bordes de la tabla medido en píxeles. Si este atributo no está presente, es equivalente
a escribir border=0; además, éste es el comportamiento por defecto de los bordes.
Las tablas se autodimensionan, es decir, su tamaño se adapta a su contenido, teniendo en cuenta que el tamaño de
las columnas en todas las filas debe ser el mismo. Sin embargo, es posible especificar cuál es el tamaño que se desea
aplicar tanto en ancho como en altura. Para ello, se deben configurar los atributos width, para el ancho, y height,
para la altura. Estos dos atributos pueden ser aplicados tanto con la etiqueta <TABLE>, para regular el tamaño de
la tabla, como para la etiqueta <TD>, para regular el tamaño de cada una de las columnas de la tabla. El valor dado
a width y height se puede expresar en dos tipos de medidas: en píxeles, siendo el tamaño fijo, no importando el
tamaño del monitor en el que se muestra la página, y como un porcentaje respecto al ancho de la pantalla, siendo ésta
una configuración relativa, y dependerá del tamaño de la página. En el ejemplo que se presenta, se indica el ancho en
porcentaje respecto a la página, mientras que la altura se especifica en píxeles.
<table width=”100%” height=”450px”>
</table>
También es posible especificar la alineación que va a tener el texto contenidodentro de una tabla. Esta función
se realiza a través del atributo align, y permite expresar la forma de alinear horizontalmente el texto dentro de
una fila (aplicando el atributo a la etiqueta <TR>) o dentro de una celda concreta (aplicando el atributo a la etiqueta
<TD>). Los posibles valores de este atributo son: left, si se desea que el texto esté a la izquierda); right, si se desea
que los elementos queden alineados a la derecha; y center, si se requiere que los elementos queden centrados en
cada una de las celdas.
Además de la alineación horizontal, en el caso de las celdas (es decir, la etiqueta <TD>), es posible indicar la
alineación vertical a través del atributo valign. Los valores que puede tomar este atributo son: top, si se desea que
el texto quede alineado al margen superior de la celda; bottom, si se desea que el texto quede alineado a la parte
inferior de la celda; y middle, si se quiere que el texto quede centrado con respecto al eje vertical de la celda. Por
defecto, las celdas de cabecera (<TH>) están centradas tanto horizontal como verticalmente, mientras que las celdas
normales (<TD>) están alineadas horizontalmente a la izquierda y centradas en el alineamiento vertical.
Un último aspecto que se contemplará sobre las tablas en HTML es el correspondiente a los márgenes en las
celdas y la separación entre ellas. A través del atributo cellspacing —espaciado de celdas— es posible cambiar la
distancia que existe entre los bordes de celdas adyacentes usando el atributo; el valor por defecto de este atributo es
1. Por otro lado, el atributo cellpadding permite configurar el margen que existe entre los elementos de las celdas y
62
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
sus bordes. Por defecto, esta separación es nula, pero puede aumentarse usando el atributo. La forma de utilizar este
atributo queda descrita en el siguiente ejemplo:
<table cellspacing=”0” cellpadding=”10” border=”1” align=”left”>
... código de la tabla ...
</table>
3.7.3 AGRUPAMIENTO DE FILAS Y COLUMNAS
Hasta el momento, las tablas que hemos creado poseen el mismo número de celdas en cada una de las filas que
tienen. Sin embargo, existen dos atributos muy interesantes que permiten crear tablas más complejas a través de la
combinación de filas y/o columnas. Estos atributos son: ROWSPAN y COLSPAN. La función de estos atributos es expandir
una fila (ROWSPAN) o una columna (COLSPAN) para que ocupen el tamaño de varias. El efecto es parecido al de la
función combinar celdas de los procesadores de texto.
Estos dos atributos pueden ser aplicados tanto en la creación de celdas normales (configurados con la etiqueta
<TD>) como en la de celdas de encabezado (regladas con la etiqueta <TH>). En el siguiente ejemplo utilizaremos el
atributo colspan para especificar que la primera fila tendrá una sola celda que ocupará el espacio de dos columnas,
la segunda fila tendrá dos columnas, una que posee el tamaño de dos filas y otra de tamaño normal, y por último, la
tercera fila sólo especifica una celda, ya que el espacio de la primera celda ya ha sido ocupado por la primera columna
de la fila dos.
<table border=”1”>
<tr>
<th colspan=”2”>celda de encabezado de
dos columnas (colspan) </th></tr>
<tr>
<td rowspan=”2”>celda de dos filas
(rowspan) </td>
<td>celda normal: fila2,columna2</td>
</tr>
<tr>
<td>celda normal: fila3,columna2</td>
</tr>
</table>
Figura 3.18. Combinando celdas en HTML
3.8 FORMULARIOS
Hasta el momento, el único elemento presentado dentro de HTML que provee interactividad desde una página
Web hacia el usuario son los hipervínculos. Sin embargo, es muy común ver en la Web páginas que realizan preguntas
al usuario y recibir sus respuestas para que éstas sean procesadas, y de acuerdo con el resultado obtenido se dé una
63
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
respuesta u otra al usuario. Ésta es otra forma de interacción permitida en HTML que se realiza con un elemento
denominado formulario.
Un formulario es un área especial de interactividad, dentro de la cual es posible insertar un conjunto de elementos
que permiten recibir la respuesta a una o varias preguntas formuladas al usuario. Ejemplo de estos elementos son una
caja de texto, un botón de opción, una lista desplegable, etc. La etiqueta necesaria para la creación de un formulario
es <form>, que engloba el comienzo y el final del formulario. Por tanto, los elementos que reciban los datos deberán
estar definidos dentro de la apertura y cierre de dicha etiqueta.
3.8.1 PROCESAMIENTO DE FORMULARIOS
La etiqueta <form> necesita de dos atributos para que el formulario sea funcional. El primer atributo es action.
Este atributo debe contener la URL a la que se redirigirán los datos del formulario. Es decir, es un hipervínculo a otra
página que será la que extraiga los datos del formulario y los procese.
El segundo atributo importante es method, e indica cuál es el método por el cual el formulario va a enviar los datos.
Las opciones de esta etiqueta son POST o GET. En el caso de POST, los datos se mandan de forma oculta, mientras
que en el método GET los datos son enviados de forma directa dentro de la URL. La forma de indicar cuándo finaliza
la URL (el nombre de la página Web) y cuándo comienzan a ser enviados los datos es separándolo con un signo de
interrogación cerrada (?) después de la finalización de la dirección. El tamaño máximo de la información que se va
a enviar a través del método GET es de aproximadamente 500 bytes; además, este método no permite el envío de
archivos adjuntos.
Figura 3.19. URL de YouTube donde pasamos la variable v usando el método GET
El método POST permite un mayor envío de datos; además, es algo más seguro al ser más difícil acceder a los
mismos. No debemos pensar que el método POST es mejor, puesto que hay casos en los que resulta útil utilizar GET;
por ejemplo, cuando tenemos un gran número de fotografías o vídeos para pasar el identificador de cada uno de ellos.
También es muy útil el método GET para los desarrolladores de aplicaciones Web, puesto que en tiempo de desarrollo
pueden usar este método para validar los datos y comprobar errores de una forma más visual.
<html>
<head><title>Ejemplo de formulario</title></head>
<body>
<h3>Formulario</h3>
<form action=”www.Web.es/formulario method=”post”>
...
</form>
</body>
</html>
64
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
En el código anterior vemos cómo dentro del body de una página HTML es posible introducir una etiqueta de
tipo form. En el action enviamos los datos del formulario a la dirección www.Web.es/formulario.php, para que sean
procesados en el servidor. En este caso, los datos serán enviados de forma oculta, puesto que hemos utilizado el método
POST. Los elementos correspondientes a los puntos suspensivos serán expuestos en el siguiente epígrafe.
3.8.2 ELEMENTOS DE UN FORMULARIO
Para poder definir los datos que queremos enviar y cuándo los vamos a enviar, tenemos los elementos del formulario.
El elemento principal del formulario se denomina con la etiqueta <input>. Este elemento tiene una serie de atributos
que modifican su funcionalidad. Los tipos de input según su funcionalidad se llaman controles de formulario y campos
de formulario. Éstos son los encargados de guardar los datos que vamos a enviar en el formulario. Los hay de varios
tipos; a continuación, vamos a definir cómo guardan y procesan los datos cada uno de ellos. También se encargan de
accionar sucesos. Por lo general, son botones, y al ser pulsados realizan la acción para la que están encomendados.
El formato por defecto de una etiqueta input es el siguiente <input … />, como es una etiqueta unaria se cierra a
sí misma con la barra (/ ) al final. Esta etiqueta se transforma en distintos elementos que a su vez almacenan un tipo
de dato. Para definir el tipo de elemento, la etiqueta input se sirve del atributo type. De esta forma, si igualamos unode los tipos válidos al atributo type, modelamos el input al tipo asignado. A continuación, vamos a ver el atributo
type y el resto de atributos que puede tener una etiqueta input:
n Type. Es el que indica el tipo de elemento que vamos a definir. De él dependen el resto de parámetros, puesto
que el elemento cambia según sea de un tipo o de otro. Los valores posibles que acepta el atributo type son:
text (cuadro de texto), password (cuadro de contraseña, los caracteres aparecen ocultos tras asteriscos),
checkbox (casilla de verificación), radio (opción de entre dos o más), submit (botón de envío del formulario),
reset (botón de vaciado de campos), file (botón para buscar ficheros), hidden (campo oculto, el usuario no
lo visualiza en el formulario), image (botón de imagen en el formulario), button (botón del formulario). Debido
a las peculiaridades de cada uno de los tipos, procederemos a explicar detalladamente cada tipo en el punto
siguiente, indagando cómo afectan al resto de atributos.
n Name. El atributo name asigna un nombre al elemento. Si no le asignamos nombre a un elemento, el servidor
no podrá identificarlo y, por tanto, no podrá tener acceso al elemento.
n Value. El atributo value inicializa el valor del elemento. Los valores dependerán del tipo de dato; en ocasiones,
los posibles valores que podrá tomar serán verdadero o falso.
n Size. Este atributo asigna el tamaño inicial del elemento. El tamaño se indica en píxeles. En los campos text
y password hace referencia al número de caracteres.
n Maxlength. Este atributo indica el número máximo de caracteres que pueden contener los elementos text y
password. Es conveniente saber que el tamaño de los campos text y password es independiente del número
de caracteres que acepta el campo.
n Checked. Este atributo es exclusivo de los elementos checkbox y radio. En él definimos qué opción por
defecto queremos seleccionar.
n Disable. Este atributo hace que el elemento aparezca deshabilitado. En este caso, el dato no se envía al
servidor.
n Readonly. Este atributo sirve para bloquear el contenido del control; por tanto, el valor del elemento no se
podrá modificar.
65
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
n Src. Este atributo es exclusivo para asignar una URL a una imagen que ha sido establecida como botón del
formulario.
n Alt. El atributo alt incluye una pequeña descripción del elemento. Habitualmente, y si no lo hemos desactivado
cuando posicionamos el ratón (sin pulsar ningún botón) encima del elemento, podemos visualizar la descripción
del mismo.
La mutación que sufre cada tipo de input hace que sean elementos diferentes dentro del formulario. Por esta
razón, el estudio detallado de cada tipo es necesario para comprender las opciones que nos brindan los formularios. El
objetivo de los tipos es adecuar los datos para facilitar la recopilación, manejo y envío de datos a través del formulario.
También para la recuperación y comprensión de los mismos cuando el usuario recibe un formulario del servidor. A
continuación, vamos a detallar cada uno de estos tipos viendo un ejemplo de cada uno de ellos.
3.8.2.1 Cuadro de texto
El cuadro de texto muestra un cuadro de texto vacío en el que el usuario puede introducir un texto. Éste es uno
de los elementos más usados. La forma de indicar que es un campo de texto es la siguiente: type=”text”. La
visualización en la página es la siguiente:
Figura 3.20. Muestra de un cuadro de texto antecedido del texto nombre
Para que el cuadro de texto pueda ser accedido deberá tener inicializado el atributo name, name=”nombreCuadro”.
El valor que indicamos en el atributo name es el que emplea el servidor para identificar este campo una vez se ha
realizado el envío del formulario. El valor correspondiente a name deberá ser un valor de variable como en cualquier
otro lenguaje de programación, respetando el no poner espacios en blanco, etc. El atributo value inicializará con un
valor el cuadro de texto: value=”Javier”. En el caso de que no mostremos el tamaño, el navegador mostrará el
cuadro de texto con un tamaño predeterminado. De esta forma, adaptaremos el tamaño del cuadro de texto al tipo
de dato que va a incluir. Con el atributo maxlength podemos limitar el número de caracteres que podrá incluir el
usuario; así, realizamos una primera limitación a la hora de validar el formulario. Es muy útil a la hora de indicar
que un dato, como, por ejemplo, un teléfono, no permita introducir más de 9 caracteres. El atributo readonly permite
que en el formulario visualicemos el cuadro de texto, pero no nos permite modificarlo. Este atributo es útil cuando
realizamos una consulta de datos que residen en el servidor, pero existen datos que no podemos modificar, por ejemplo,
el nombre de usuario a la hora de modificar el resto de datos. Disabled, como el atributo anterior, no permite
modificar el campo de texto, y además no envía los datos al servidor. A continuación, vamos a ver cómo quedaría el
código de una etiqueta input con los atributos anteriores.
<input type=”text” name=”nombre” value=”Javier” maxlength=”10” readonly />
En el código anterior vemos un input de tipo text, que se llama nombre, está inicializado con la cadena de
caracteres “Javier” y no se puede modificar por el usuario en el formulario.
3.8.2.2 Cuadro de contraseña
El cuadro de contraseña es como el cuadro de texto, con la diferencia de que en el de contraseña los caracteres
que escribe el usuario no se ven en pantalla. En su lugar, los navegadores muestran asteriscos o puntos con el fin
66
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
de orientar al usuario acerca del número de caracteres que va escribiendo. Su utilidad es escribir datos privados del
usuario, como contraseñas u otros datos sensibles.
Figura 3.21. Cuadro de contraseña en un formulario
<input type=”password” name=”contrasenia” />
En el código anterior mostramos un input de tipo password que se llama contrasenia.
Los atributos indicados en el cuadro de texto pueden ser utilizados de igual forma en el cuadro de contraseña.
3.8.2.3 Casilla de verificación
Estos elementos permiten al usuario activar o desactivar la selección de cada una de las casillas de forma
individual. Su uso habitual es para indicar afirmación o negación sobre la casilla a la que se refiera.
Figura 3.22. Casilla de verificación de un formulario
<p>Colores favoritos</p>
</br><input name=”rojo” type=”checkbox” value=”ro”/> Rojo
</br><input name=”azul” type=”checkbox” value=”az”/> Azul
</br><input name=”verde” type=”checkbox” value=”ve”/> Verde
En el código anterior mostramos los 3 input de tipo checkbox, que se llaman rojo, azul y verde. Los valores
que enviarán al servidor en caso de ser verificados son ro, az, y ve, respectivamente.
En el caso de querer mostrar que uno de los input de tipo checkbox esté seleccionado por defecto lo tendríamos
que hacer con el atributo checked. A continuación, mostramos un ejemplo del código correspondiente.
<input name=”rojo” type=”checkbox” value=”ro” checked /> Rojo
3.8.2.4 Opción de radio
Este tipo de elemento agrupa una serie de opciones excluyentes entre sí. De esta forma, el usuario sólo puede
elegir una opción de entre todas las que tiene establecidas un grupo de botones radio. Cuando el usuario selecciona
una opción, automáticamente, se deselecciona la que estaba seleccionada.
Figura 3.23. Opción de radio de un formulario
67
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
A continuación, mostramos el código correspondiente a la opción de radio que hemos mostrado anteriormente.
Género
</br><input type=”radio” name=”género” value=”M”> Hombre
</br><input type=”radio” name=”género” value=”F”> Mujer
En el código anterior observamos cómo el nombre de los input es el mismo. El nombre de los elementos que
pertenezcan a un mismo grupo de opciones de radio deberá ser el mismo.
Es posible fijar un valor inicial con el atributo checked. En ese caso,el input que deseemos que quede seleccionado
por defecto deberá llevar dentro el atributo checked, checked=”checked”.
3.8.2.5 Botones
Dentro de los formularios de HTML contamos con distintos tipos de botones. Sus diferencias radican en el tipo de
acción que ejecutan cuando son presionados. Los tipos de botones que existen son:
n Botón de envío. Este elemento es el encargado de enviar los datos del formulario al servidor. En este caso, el
type toma el valor submit. El valor del atributo value se mostrará en este caso en el botón generado.
Figura 3.24. Botón de envío de un formulario
<input type=”submit” name=”enviar” value=”Enviar”>
En el código anterior inicializamos el nombre del botón con la cadena “Enviar”. El botón enviará los datos del
formulario a la dirección que esté dispuesta en el action.
n Botón de reset. Este elemento es un botón que restablece el formulario a su estado original.
Figura 3.25. Botón de restablecimiento de un formulario
En este botón no hemos añadido el atributo value. Es el navegador el encargado de asignar un valor por
defecto; el valor por defecto en el caso anterior es “Restablecer”.
n Botón. Existe un elemento botón, al que podemos asociar diferentes funcionalidades. De esta forma, no nos
tenemos que ceñir los botones de submit o reset que nos ofrecen los formularios.
El botón podrá tener cualquier texto en su interior a través de la inicialización del atributo value.
<input type=”button” name=”opcion” value=”Opcion validar”/>
Como vemos en el código anterior, inicializamos el atributo type al valor button; de esta manera, el elemento
se convierte en un botón. Estos botones por sí mismos no tienen funcionalidad, pero ésta se puede asignar
usando un lenguaje, como, por ejemplo, JavaScript.
68
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
n Botón de imagen. Este elemento es una personalización de un botón, cambiando el aspecto por defecto que
tienen los botones de un formulario por una imagen. El aspecto del botón sería el de la imagen a la que hayamos
hecho referencia.
<input type=”image” name=”enviar” src=”imagen_mundo.jpg”/>
El elemento botón de imagen se tipa igualando a image el tipo de input, como vemos en el código anterior.
3.8.2.6 Adjuntar archivos o ficheros
Este tipo de input permite adjuntar archivos. Las limitaciones sobre el número de ficheros y el tamaño no están
definidas por el elemento. Por tanto, deberá controlarse desde otra parte del código para evitar desbordamientos o
colapsos en el servidor. El elemento añade de forma automática un cuadro de texto que se dispondrá para almacenar
la dirección del fichero adjunto seleccionado. Pulsando un botón situado a la derecha del cuadro de texto navegaremos
por el árbol de directorios en busca del fichero que se va a adjuntar y, una vez seleccionado, éste se incluirá en el cuadro
que hemos indicado antes.
Figura 3.26. Opción añadir ficheros adjuntos de un formulario
Fichero adjunto <input type=”file” name=”fichero”/>
Es importante saber que para adjuntar archivos debemos indicar el tipo de envío que vamos a realizar. Esto
lo indicamos en la estructura del form, inicializando el atributo enctype. Habitualmente, el valor que toma este
atributo es multipart/form-data. Por lo tanto, el código en la cabecera del formulario quedaría de la siguiente
manera:
<form action=”…” method=”post” enctype=”multipart/form-data”>
...
</form>
3.8.2.7 Campos ocultos
Los campos ocultos no son visibles en el formulario por el usuario. Estos elementos son útiles para enviar
información de forma oculta que no tenga que ser tratada por el usuario. Son usados a menudo para que el servidor
pueda tratar la información o hacer alguna acción determinada.
<input type=”hidden” name=”campoOculto” value=”cambiar”/>
En el código anterior vemos cómo el campo con nombre campoOculto toma el valor cambiar. Esto podría usarse
para que el servidor realice un cambio con respecto a algo.
A continuación, vamos a mostrar el código de un formulario con varios componentes para ver cómo se integran los
componentes del mismo entre sí:
<form action=”página.php” method=”post” enctype=”multipart/form-data” /> <br/>
Nombre: <input type=”text” name= “nombre” value=”” size=”42 maxlength=”30” /> <br/>
Apellidos: <input type=”text” name=”apellidos” value=”” size=”40” maxlength=”80” />
<br/>
69
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
DNI: <input type=”text” name=”dni” value=”” size=”10” maxlength=”9” /> <br/>
Sexo: <br/>
<input type=”radio” name=”sexo” value=”hombre” checked=”checked” /> Hombre <br/>
<input type=”radio” name=”sexo” value=”mujer” /> Mujer <br/>
Incluir mi foto: <input type=”file” name=”foto” /> <br/>
<input name=”publicidad” type=”checkbox” value=”publicidad” checked=”checked”/> Enviar
publicidad <br/>
<input type=”submit” name=”enviar” value=”Guardar cambios” />
<input type=”reset” name=”limpiar” value=”Borrar los datos introducidos” />
</form>
El aspecto del formulario en el navegador es el siguiente:
Figura 3.27. Aspecto de un formulario
3.9 ELEMENTOS ESPECÍFICOS PARA TECNOLOGÍAS MÓVILES
Los hábitos de los internautas van cambiando. En los años 90 la mayoría de los internautas accedía a Internet a
través de un ordenador. Sin embargo, en la actualidad, la mayoría de los usuarios acceden a la información a través
de un dispositivo móvil: tabletas o teléfonos móviles. Esta tendencia no es un cambio menor que no afecte al desarrollo
de páginas Web. De hecho, cambiar el dispositivo sobre el que se visualiza la información disponible en una página
Web nos obliga a que verifiquemos cómo se ve la información de nuestra página en un dispositivo con una pantalla
más pequeña. Por ello, es conveniente crear un sitio Web optimizado para dispositivos móviles.
Ser un sitio optimizado para móviles implica que será diferente la interfaz que se muestre si se accede a una dirección
a través de un ordenador o a través de un móvil. El objetivo de las interfaces móviles es facilitar la navegación al usuario
teniendo en cuenta dos cosas: que su pantalla es más pequeña y que si accede a nuestra página a través de un plan de
datos, el objetivo no es que el plan de datos se consuma cargando una página muy pesada llena de imágenes.
A través de la dirección http://www.w3.org/TR/mobile-bp/ se puede acceder al decálogo de normas sobre buenas
prácticas en la creación de páginas Web para dispositivos móviles creado por el Consorcio World Wide Web (W3C).
Este catálogo se centra en la idea de que menos es más. El catálogo de buenas prácticas nos sugiere que se
minimice la cantidad de texto de un sitio Web para móviles.
70
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
3.9.1 SELECCIÓN DEL LENGUAJE DE MARCAS PARA TECNOLOGÍAS MÓVILES
Debido a los requerimientos de la creación de un sitio Web móvil, la recomendación es que se utilice la versión 5 del
lenguaje HTML a la hora de crear una página optimizada para móviles. Esta versión de HTML posee nuevas etiquetas
que facilitarán la creación de interfaces más limpias, con mejor organización del texto.
En particular, para la creación de formularios que tengan que ser mostrados en un dispositivo móvil, HTML5 posee
nuevos tipos de campos INPUT, los cuales pueden facilitar la creación de una interfaz de entrada de datos. Existen
campos para selección de colores, fechas, meses, números, rangos, URL, e-mail, etc. Estos campos muchas veces se
implementan con ligeras diferencias en el navegador a los campos INPUT de texto de toda la vida; por ejemplo,
cambiando cosas como el «layout» del teclado virtual, para que muestre unas teclas u otras, dependiendo del tipo de
campo y del dato que se supone debe introducirse en él.
Otra recomendación en una Web optimizada para móvil es eliminar todo el texto accesorio. Por ejemplo, se pueden
eliminar todos los tips o ayudas que se le dan al usuario para que entienda el contenido de la página o el tipo de dato
que se le solicita en un formulario. Además,se desaconseja el uso de entradas de texto teniendo en cuenta lo difícil
que es escribir desde un teclado móvil. En vez de ello, se debe pensar si es posible cambiar los cuadros de texto por
otros elementos, como listas desplegables u opciones de radio, los cuales pueden generar menos errores y pueden ser
de más fácil selección, teniendo en cuenta que los usuarios no disponen de un ratón sino de sus dedos.
En la medida de lo posible, siempre será de utilidad que nuestro sitio Web sea lo suficientemente inteligente
como para no solicitar datos que ya conocemos de antemano. Por ejemplo, si se le pidió al usuario el nombre en algún
momento, es bueno introducirlo ya en el campo nombre del formulario, en vez de hacer que lo vuelva a escribir. Otro
ejemplo: si es la segunda vez que se rellena ese formulario, determinados campos que se supone que no van a variar,
aparecerán con el mismo texto introducido anteriormente. Para conseguir esto se tendrá que utilizar algún lenguaje
de programación, como JavaScript, en el lado del cliente, o PHP, en el lado del servidor, porque los formularios HTML
de manera predeterminada no implementan esta funcionalidad.
En cuanto a la navegabilidad por el sitio Web, se sugiere no crear un sitio Web donde las primeras líneas estén
ocupadas por el menú en texto de la página Web. En vez de esto, se propone que la navegación esté controlada a través
de iconos o de un botón de menú. La siguiente figura da un ejemplo de este tipo de interfaces, manejando una barra
de menú conformada por iconos en vez de texto:
Figura 3.28. Menú optimizado para una Web móvil
Hablando estrictamente de HTML5, la creación de una página para móviles implicará especificar algunos
parámetros que concretaremos a continuación. En primera instancia, debemos especificar que el tipo de documento
que estamos creando es HTML5. Esto se logra utilizando la sentencia <!DOCTYPE html> al inicio de nuestra página
Web.
Además, debemos incluir una etiqueta META dentro de nuestro encabezado que defina de forma específica el juego
de caracteres que utiliza la página Web. En HTML5, esto se define a través del atributo “charset”. Un ejemplo es la
siguiente línea HTML5:
<meta charset=”UTF-8”>
71
© RAMA 3 n LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB
Por otro lado, también podemos utilizar distintas etiquetas META que nos permitan especificar la configuración
del documento HTML de cara a cómo se debe interpretar si quien visita nuestra página Web lo hace a través de un
dispositivo móvil. Algunos de estos metadatos son los siguientes:
n <meta name=”MobileOptimized” content=”width” />: es una etiqueta que permite que el navegador adapte el
contenido de la página a la ventana del dispositivo móvil. Si lo indicamos tal cual aparece en el código mostrado,
con content=”width”, se adaptará a la anchura de cada dispositivo. Si no queremos eso, también podemos definir
un valor numérico en el atributo content, que indicará el tamaño en píxeles para el que se diseñó la página.
n <meta name=”HandheldFriendly” content=”true” />: esta etiqueta informa al navegador de que la página está
optimizada para móviles y que, por tanto, no se debe escalar su contenido al mostrarlo en la pantalla de los
dispositivos.
n <meta name=”viewport” content=”width=device-width, initial-scale=1”>: cuando un navegador para dispositivos
móviles accede a un documento Web, lo que realiza es un escalado de los contenidos de forma que se vean más
o menos bien en una página de móvil. A través del metadato viewport es posible configurar cómo queremos que
muestre la página accesada. Para ello, esta etiqueta cuenta con varios atributos:
– Width: anchura virtual (emulada) de la pantalla o anchura del viewport.
– Height: altura virtual de la pantalla o anchura del viewport.
– Initial-scale: la escala inicial del documento.
– Minimum-scale: la escala mínima que se puede poner en el documento.
– Maximum-scale: la escala máxima configurable en el documento.
– User-scalable: si se permite o no al usuario hacer zoom.
3.10 ELEMENTOS EN DESUSO (DEPRECATED)
Es muy posible que cuando consultes documentación sobre HTML encuentres que algunas etiquetas o elementos
están en estado DEPRECATED. Esto significa que aunque se pueden utilizar, no se recomienda su uso y que muy
seguramente los elementos marcados como en desuso dejarán de ser soportados en versiones posteriores del lenguaje.
El avance de HTML y el lanzamiento de sus diversas versiones han dado lugar a que algunas etiquetas y atributos
de etiquetas pasen al estado «en desuso». Casi siempre, los atributos que han sufrido este cambio están relacionados
con el formateo de estilo de un elemento: formateo de color, de tipo de letra, de bordes, etc. Este cambio se ha producido
porque ahora HTML promueve que el manejo del estilo de la página se realice a través de un archivo externo
denominado Hoja de Estilos, buscando que se diferencie claramente el contenido de la página de la forma en la que
dicho contenido se formatea en ésta.
72
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
3.11 TEST DE CONOCIMIENTOS
1 En HTML, el elemento <ol> especifica:
a) Una tabla.
b) Un formulario.
c) Una lista ordenada.
d) Un cuadro de texto.
2 ¿A cuál de los siguientes elementos se puede aplicar el atributo “align=center”?
a) <hr>.
b) <span>.
c) <p>.
d) Todos los anteriores.
3 Señale la respuesta correcta con respecto a las características de XHTML:
a) Al igual que HTML, no tiene por qué estar bien construido para que sea válido.
b) Es la unión de los principios de XML con el lenguaje HTML.
c) No permite la inclusión de código JavaScript.
d) Ninguna de las anteriores.
4 La única etiqueta obligatoria dentro de un elemento <head> es:
a) La etiqueta <meta>.
b) La etiqueta <title>.
c) Todas las etiquetas son obligatorias.
d) Ninguna etiqueta es obligatoria.
5 ¿Cuál de los siguientes elementos permite la definición de una casilla de verificación dentro de un formulario?
a) <input type=text>.
b) <input type=hidden>.
c) <input type=checkbox>.
d) <input type = submit>.
Hojas de estilo web4
74
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Como hemos podido observar en el capítulo anterior, el lenguaje HTML nos permite crear páginas Web con gran
variedad de elementos. Sin embargo, los resultados desde un punto de vista visual dejan mucho que desear. Esto es
consecuencia de que HTML es un lenguaje con un número de etiquetas y atributos limitado. Además, si el formateo
de la página Web es demasiado complejo, el código de la página HTML es de difícil mantenimiento, ya que se mezcla
el contenido de la página con las etiquetas para formatear dichos contenidos.
En este contexto, surge la idea de crear las Hojas de Estilo en Cascada o CSS (Cascade Stylesheet). El objetivo
de creación de una hoja de estilo es definir, mediante una sintaxis concreta, el formato que se aplicará a una página
Web completa o parte de la misma. Los formatos especificados en un CSS se denominan estilos y se podrán aplicar a
un sitio Web completo, una página Web, parte de una página Web o a un elemento concreto de la página Web.
Por lo general, una hoja de estilo se corresponde con un archivo y su extensión es *.css. Esta hoja de estilo debe
estar disponible en el servidor Web de nuestra página. Para que una hoja de estilo sea utilizada en una página Web,
es necesario importar el archivo CSS dentro del documento HTML. El hecho de que los estilos se encuentren en un
documento independiente permite que una misma hoja de estilos pueda ser aplicada a múltiples páginas Web, y de
esa forma facilitar la reutilización dentro de una página Web.
El lenguaje CSS está especialmente potenciado para abarcar todas las posibilidades de estilo que puede tener un
elemento dentro de un documento HTML. Es por ello que muchas veces en un CSS se pueden configurar más atributos
para un elemento HTML que desde el archivo HTML como tal.
4.1 FORMATEADO DE PÁGINAS WEB A TRAVÉS DE HOJAS DE ESTILO
La creaciónde estilos se puede generar de dos formas:
n Generar los estilos dentro de la página HTML.
n Generar los estilos en un archivo independiente bajo la extensión *.css y luego enlazar el CSS con la página
Web.
A continuación, explicaremos cada una de estas formas con detenimiento.
4.1.1 ESTILOS EN PARTES DE LA PÁGINA HTML
Los estilos se pueden definir para elementos concretos dentro de la página HTML. Para ello se utiliza el atributo
style de las etiquetas HTML y, a través del sintaxis CSS, indicamos cuáles son los estilos que se desean aplicar. De tal
forma que si encontramos código CSS dentro del código HTML de una página es lo que denominamos utilizar estilos
dentro una página Web. Para comprender mejor este concepto veamos un ejemplo:
<p>Esto es un párrafo normal de HTML <SPAN style=”color:red”>Esta parte del párrafo está
afectada por el estilo definido en la etiqueta SPAN.</SPAN>Aquí nuevamente aplicamos la
configuración por defecto de HTML.</p>
75
© RAMA 4 n HOJAS DE ESTILO WEB
El resultado sería:
Figura 4.1. Ejemplo de estilos escritos de forma directa dentro del código HTML
Como se puede observar, el código CSS es aquel que se encuentra asignado al atributo style y entrecomillado.
En este caso, sólo una parte del párrafo está afectada por el color verde. Si lo que deseamos es que el estilo de color
se aplique al párrafo entero, lo que podríamos hacer es aplicar el estilo CSS a todo el elemento <P>. En este caso, el
código quedaría de la siguiente manera:
<p style=”color:red “>Esto es un párrafo con estilo de color en rojo.</p>
<p style=”color:blue”>Esto es un párrafo con estilo de color en azul.</p>
Y el resultado dentro del navegador sería el siguiente:
Figura 4.2. Definiendo varios estilos dentro de la página
Como hemos visto en los ejemplos previos, los códigos CSS están compuestos por pares propiedad:valor, donde la
propiedad es el nombre que tiene el atributo que se quiere afectar y el valor es el que se le desea asignar al estilo. En
CSS, las asignaciones no se hacen con el signo igual, sino con los dos puntos. Es por ello que una sentencia típica de
CSS es de la forma:
Propiedad_del_estilo : Valor_para_el_estilo
Además, dentro de un mismo atributo style podemos configurar más de una variable de estilo. Para ello se deben
separar los pares propiedad: valor por punto y coma. Un ejemplo de este tipo de configuración es:
<div style=”color:#000099; font-weight:bold”>
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los estilos
</p>
</div>
76
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Que tiene como resultado:
Figura 4.3. Estilos CSS y su ámbito de aplicación
En este caso, el estilo aplica a dos variables: color (variable color) y formato de letra (variable font-weight).
El valor de estas variables aplica a todo lo que esté contenido dentro de la etiqueta <DIV>, de forma que cuando la
etiqueta se cierra, los estilos dejan de aplicarse.
Otra forma de definir estilos dentro del código HTML es definirlos para que puedan ser aplicados a toda la página
y no sólo a una sección o elemento específico. Para utilizar esta forma, los estilos deberán tener un nombre y ser
especificados en la cabecera del documento (etiqueta <HEAD>). Esto se realiza utilizando la etiqueta <STYLE>. Esta
etiqueta requiere ser cerrada de forma explícita y se asume que lo que esté contenido dentro de las etiquetas <STYLE>
y </STYLE> estará escrito siguiendo la sintaxis CSS. Un ejemplo de este tipo de creación de estilos es el siguiente:
<html>
<head>
<title>Ejemplo de estilos para ser aplicados a esta página web</title>
<STYLE type=”text/css”>
h1 {text-decoration: underline; text-align:center}
p {font-Family:arial,verdana; color: white; background-color: black}
body {color:black;background-color: #cccccc; text-indent:1cm}
</STYLE>
</head>
<body>
<h1>Encabezado de nivel uno con estilos</h1>
Hola Mundo de los Estilos
<p>Párrafo con estilo definido previamente en la cabecera del documento HTML </p>
</body>
</html>
Cuyo resultado sería:
Figura 4.4. Ejemplo de estilos definidos en la cabecera del documento HTML
77
© RAMA 4 n HOJAS DE ESTILO WEB
Analicemos el código del ejemplo. Dentro de la etiqueta <HEAD> se ha insertado una etiqueta <style> que
contendrá los estilos para esta página. Dentro de esta etiqueta se ha configurado el atributo type, cuyo valor es el
MIME type del tipo de contenido que se va a escribir. En este caso, el MIME type es “text/css”, lo cual quiere decir que
el contenido se corresponderá con código de tipo CSS. Entremos en materia con el código CSS como tal. La primera
línea nos presenta un estilo que se llama H1. Como el nombre del estilo se corresponde con el nombre de una de
las etiquetas de HTML, quiere decir que será aplicado a los elementos de ese tipo, o sea, a los elementos H1, a los
encabezados de página de primer nivel. Como se ve, para especificar que un estilo se aplica a una etiqueta concreta,
lo que se hace es escribir el nombre de la etiqueta pero sin encerrarla entre < y >. Los atributos concretos que serán
afectados por el estilo son escritos dentro de llaves { }. En particular, este ejemplo especifica que los títulos de nivel
uno estarán subrayados y alineados al centro.
Además, este ejemplo contiene otros dos estilos que afectarán a la etiqueta de párrafo <P> y a la etiqueta <BODY>
de la página. En el caso del body, el estilo especifica que el color del texto será negro, que el color de fondo de página
tomará un tono grisáceo y que el margen lateral es de un centímetro. Como la etiqueta body envuelve a todas las
etiquetas HTML, los estilos especificados para la misma afectarán a todos los elementos que inserten en la página
Web, a menos que se hayan definido estilos específicos para una etiqueta concreta. Ése es el caso de la etiqueta de
párrafo, donde se ha especificado que el color de fondo será negro y para crear contraste el color de la letra deberá
ser blanco.
4.1.2 ESTILOS EN UN ARCHIVO INDEPENDIENTE
Una de las características más relevantes de la utilización de hojas de estilos para la creación de sitios Web es la
capacidad de definir los estilos de todo un sitio Web sin necesidad de ir especificándolos uno a uno en cada página
Web. Esto se consigue creando los estilos en un archivo independiente de la página Web. Este archivo contendrá sólo
declaraciones de estilos de página y deberá estar enlazado con la página Web. De esta forma, todas las páginas Web
compartirán un mismo archivo de estilos; si se desea cambiar un estilo, sólo se deberá hacer en un único sitio y no en
cada página que utilice el estilo.
Figura 4.5. Estilo de archivos independiente que puede ser reutilizado por una o más páginas Web
Como se puede imaginar, esta configuración facilita muchísimo el mantenimiento de estilos e independiza el
contenido de la página HTML del formateo que se hace de la misma.
La creación de un archivo de estilos se realiza de la siguiente manera:
n Se creará un nuevo archivo con extensión *.css. Este archivo es un archivo de texto normal.
n Una vez creado el archivo, se debe garantizar que el texto contiene exclusivamente sentencias CSS válidas.
78
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
En general, una hoja de estilos está compuesta por uno o más selectores o estilos. La declaración de cada selector
se realiza entre llaves {}. La sintaxis de un estilo en CSS es la siguiente:
selector_1 {
propiedad: valor de la propiedad;
propiedad 2: valor de la propiedad 2
….
}
selector_2 {
propiedad: valor de la propiedad en el selector 2;
propiedad 2 : valor de la propiedad 2 en el selector 2
….
}
Como ya hemos comentado, si el selector coincide con el nombre de una etiqueta HTML, el estilo se aplicará a
todas las etiquetas de ese tipo que se encuentren en la página Web para la que se aplique la hoja de estilos. Una hoja
de estilos puede tener tantos estilos como desee. Pero no puede tener dos veces definido el mismo selector.Una vez se tenga creada la hoja de estilos independiente y se haya guardado en un archivo CSS, el siguiente paso
es enlazar la página Web con la hoja de estilos. Para ello, es necesario abrir el código HTML de la página en la que
queremos realizar el enlace.
Hoja de Estilos externa.
Archivo *.css
Página HTML
Se enlaza a través
del HEAD de la página
Figura 4.6. Vinculando una hoja de estilos independiente en una página Web
Dentro de la cabecera de la página (etiqueta <HEAD>) se insertará una etiqueta de tipo <LINK> con los siguientes
atributos:
n rel=”STYLESHEET”. Esto indica que se realiza un enlace a hoja de estilos.
n type=”text/css”. Indica el MIME type del archivo que se va a vincular. En este caso, se corresponde con el
de un archivo de tipo CSS.
n href=”nombre_de_la_hoja_de_estilos.css”. Este atributo indica cuál es el nombre del archivo que
contiene los estilos que se desean aplicar. Si el archivo no se encuentra en la misma carpeta donde se halla
el documento HTML, se deberá indicar la ruta de directorios o la URL completa donde se puede encontrar el
documento de estilos.
Ilustremos esta forma de vinculación de estilos con un ejemplo. En primer lugar, crearemos un documento llamado
mis_estilos.css. Dentro de este documento tendremos cuatro selectores, que afectarán a etiquetas HTML. El
código de este archivo será el siguiente:
79
© RAMA 4 n HOJAS DE ESTILO WEB
p {
font-size : 12pt;
font-family : arial,helvética;
font-weight : normal;
}
h1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
td {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
body {
background-color : #006600;
font-family : arial;
color : White;
}
Ahora crearemos una página Web HTML en la que enlazaremos la hoja de estilos “mis_estilos.css” y aplicaremos
los estilos a algunos contenidos de la página. El código de la página HTML es el siguiente:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<link rel=”STYLESHEET” type=”text/css” href=”estilos.css”>
<title>Página web con estilos definidos en una hoja de estilos externa. </title>
</head>
<body>
<h1>Aplicación de una hoja de estilos</h1>
Los estilos que se han aplicado en esta página web han sido definidos de manera externa
en una hoja de estilos. Posteriormente han sido vinculados a través de una etiqueta LINK
en la cabecera de esta página. <br />
Si revisáis el código HTML, podréis ver que no hay código con sintaxis CSS en ninguna
parte de la página.
<br>
<table width=”300” cellspacing=”2” cellpadding=”2” border=”0”>
<tr>
<td>En este caso, el estilo afecta a un elemento celda de una tabla.</td>
</tr>
<tr>
<td>Otro elemento celda dentro de una tabla. </td>
</tr>
</table>
</body>
</html>
80
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
El resultado dentro de un navegador Web sería el siguiente:
Figura 4.7. Ejemplo de estilos declarados en un archivo independiente
4.2 ELEMENTOS Y ESTRUCTURA DE UNA HOJA DE ESTILO
Como ya hemos dicho, una hoja de estilos está compuesta por una o más reglas de estilo. Cada regla de estilo
está compuesta por un selector o etiqueta y una declaración del selector. La declaración se escribe entre llaves { } y
contiene uno o varios grupos de pares de propiedades:valor. Las propiedades son los atributos del elemento HTML
que queremos afectar por el estilo, mientras que el valor muestra la asignación hecha a dicha propiedad:
106
PROGRAMACIÓN
WEB
EN
EL
ENTORNO
CLIENTE
©
STARBOOK
Figura 4.7. Ejemplo de estilos declarados en un archivo independiente
2.2 ELEMENTOS Y ESTRUCTURA DE UNA HOJA DE ESTILO
Como ya hemos dicho, una hoja de estilos está compuesta por una o más reglas
de estilo. Cada regla de estilo está compuesta por un selector o etiqueta y una
declaración del selector. La declaración se escribe entre llaves { } y contiene uno o
varios grupos de pares de propiedades:valor. Las propiedades son los atributos del
elemento HTML que queremos afectar por el estilo, mientras que el valor muestra la
asignación hecha a dicha propiedad:

Figura 4.8. Esquema de una regla de estilos

Figura 4.9. Estructura de una hoja de estilos

Las hojas de estilo siguen un principio de herencia por el cual los elementos
comprendidos dentro de un selector heredan el estilo definido para el mismo, a
menos que haya definida una regla más específica para alguno de los elementos. Es
decir, las reglas más específicas prevalecen sobre la herencia.
Una de las herramientas útiles para la creación de estilos es la agrupación de
selectores. Si se desea aplicar el mismo estilo a un mismo grupo de selectores,
éstos se pueden agrupar separándolos por comas. Un ejemplo de este tipo es:
p {
font-‐size : 12pt;
font-‐family : Arial,Helvetica;
font-‐weight : normal;
}
Selector
Propiedad Valor
Declaración
H
oj
a
de
E
s*
lo
s
en
Ca
sc
ad
a
Regla(s)
Selector
Declaración
Propiedad
Valor
Figura 4.8. Esquema de una regla de estilos
81
© RAMA 4 n HOJAS DE ESTILO WEB
Figura 4.9. Estructura de una hoja de estilos
Las hojas de estilo siguen un principio de herencia por el cual los elementos comprendidos dentro de un selector
heredan el estilo definido para el mismo, a menos que haya definida una regla más específica para alguno de los
elementos. Es decir, las reglas más específicas prevalecen sobre la herencia.
Una de las herramientas útiles para la creación de estilos es la agrupación de selectores. Si se desea aplicar el
mismo estilo a un mismo grupo de selectores, éstos se pueden agrupar separándolos por comas. Un ejemplo de este
tipo es:
h1, h2, h3, h4, h5, h6 { color:red }
Como hemos visto, los selectores suelen coincidir con elementos HTML. Sin embargo, y para seguir simplificando
el uso de estilos, CSS nos propone la creación de selectores especiales que sirvan para agrupar un conjunto de
características que serán aplicadas a uno o varios selectores. Se denominan las clases.
Una clase es una declaración CSS que podrá ser utilizada por uno o más elementos HTML. Es decir, la clase puede
ser exclusiva de un selector o puede aplicarse a varios selectores. Para definir un selector de clase, se debe escribir el
nombre que se desea dar a la clase precedido de un punto (.). Un ejemplo de definición de una clase en CSS es:
.nombre_clase {
Pares propiedad:valor
}
Como se puede observar, la única diferencia en cuanto a sintaxis es que el nombre del selector está precedido por
el punto. Un ejemplo es el siguiente:
.letra_verde {
color:green
}
Para asignar una clase a un elemento dentro del HTML debemos utilizar el atributo class del elemento de la
clase y darle el valor de la clase que queremos aplicar. Por ejemplo, si deseamos que un párrafo utilice nuestra clase
letra_verde debemos escribir la siguiente sentencia en el código HTML:
<p class=”letra_verde”> Párrafo en verde </p>
Es importante observar que el nombre de la clase se escribe sin el punto. Además, el atributo class es genérico, es
decir, se puede utilizar con cualquier elemento HTML.
82
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Una clase también puede ser asignada de forma exclusiva a un selector. En este caso, se debe escribir primero el
nombre del selector, luego el punto y por último el nombre de la clase. Éste es el esquema de la creación de una clase
asociada a un selector concreto:
selector.nombre_clase {
Pares propiedad:valor
}
Por ejemplo, imaginemos que deseamos que la clase letra_verde sólo pueda ser aplicada a los elementos de
hipervínculo. Debemos modificar la clase de la siguiente manera:
a.letra_verde {
color:green
}
En este caso, al poner el selector a, especificamos que esta clase es exclusiva de los elementos hipervínculo y que
sus propiedades no tendrán efecto sobre otros elementos. De forma que:
<a class=”letra_verde”> Link en verde </a><p class=”letra_verde”> Párrafo no será en verde. Selector inválido</p>
Otro tipo de selector especial dentro de un CSS son los ID. El selector id usa el atributo id de un elemento HTML
para seleccionar un elemento específico. Un id debe ser único dentro de la página, por ello, los selectores id se usan si
el objetivo es seleccionar un elemento único. Para definir las propiedades de un ID anteponemos el símbolo # (número
o almohadilla) al nombre.
#nombre_id{
Pares propiedad:valor
}
Veamos un ejemplo de creación del ID y su asignación a un elemento HTML:
<style>
#miID {color: red;}
</style>
Recordemos que para asignar un selector id de css utilizamos el atributo ID del elemento HTML al que queremos
aplicar la propiedad:
<div id=”miID”> Este texto será rojo </div>
Tanto los ID como las clases sirven para identificar una etiqueta y, de ese modo, facilitar el agregarle propiedades
de estilo. Una regla elemental y que no debe violarse es que se usará un ID si la etiqueta es única. Es decir, no debería
haber dos etiquetas con el mismo ID en una misma página. Esta restricción no existe para class. Los atributos ID se
suelen utilizar para definir áreas específicas de una página, el encabezado (header), el pie de página (footer), un menú
concreto, etc., mientras que una clase se usa para definir estilos de tipo general. Los ID nos permiten organizar el
estilo e identificar etiquetas para luego manipularlas con JavaScript. Las clases nos evitan escribir códigos repetidos,
y ésa es su mayor utilidad.
Como ya hemos visto hasta el momento, los selectores ID o los selectores de clase no permiten aplicar diferentes
estilos a un mismo elemento o selector en función de su estado. Es por ello que CSS introduce un nuevo concepto
denominado pseudo-clases. Las pseudo-clases están asociadas a un elemento ya existente, y se deben escribir
precedidas de dos puntos ( : ).
83
© RAMA 4 n HOJAS DE ESTILO WEB
Esta función es muy útil con los hipervínculos, ya que éstos cambian de estado durante la estancia de un usuario
en nuestra página. En concreto, CSS define las siguientes cuatro pseudo-clases:
n :link, aplica estilos a los enlaces que apuntan a páginas o recursos que aún no han sido visitados por el
usuario.
n :visited, aplica estilos a los enlaces que apuntan a recursos que han sido visitados anteriormente por el
usuario. El historial de enlaces visitados se borra automáticamente cada cierto tiempo y el usuario también
puede borrarlo manualmente.
n :hover, aplica estilos al enlace cuando el usuario posiciona el puntero del ratón sobre el enlace.
n :active, aplica estilos al enlace que está pinchando el usuario. Este estilo sólo se aplica desde que el usuario
pincha el botón del ratón hasta que lo suelta, por lo que suelen ser unas pocas décimas de segundo.
Por defecto, los navegadores muestran los enlaces no visitados de color azul y subrayados y los enlaces visitados
de color morado. Las pseudo-clases permiten modificar completamente ese aspecto por defecto y por ello son uno de
los recursos más utilizados en CSS.
El siguiente ejemplo muestra cómo ocultar el subrayado cuando el usuario pasa el ratón por encima de cualquier
enlace de la página:
a:hover { text-decoration: none; }
Es posible validar una hoja de estilos una vez que ésta se ha creado. El objetivo de la validación es comprobar que
el documento no tiene errores sintácticos de CSS y que podrá ser interpretada correctamente por cualquier página
Web que haga el llamado a dicha hoja de estilos. Muchos de estos validadores están disponibles en la Web, aquí os
sugerimos uno: http://jigsaw.w3.org/css-validator/. En este caso, este validador permite validar una hoja de estilos
disponible en la Web a través de una URL, indicar el nombre del archivo que queráis validar o se puede escribir
directamente el código CSS y que realice la función de validación.
Es recomendable el uso del validador de estilos para reducir los posibles errores que se puedan presentar a la hora
de formatear un documento HTML.
4.3 SINTAXIS DE ATRIBUTOS
Una vez vista la forma en la cual se puede organizar una hoja de estilos, así como las diferentes formas de escribir
estilos, lo único que nos resta es saber cuáles son las propiedades que podemos modificar dentro de un CSS.
A continuación, presentamos un conjunto de algunos de los atributos que pueden ser modificados, mostrando
cuáles son los posibles valores que puede tomar el atributo, un ejemplo y una descripción tanto del atributo como de
los posibles elementos HTML que se pueden aplicar. No están todos los posibles atributos, ya que las versiones de
CSS van cambiando y se van agregando nuevos recursos. Sin embargo, aquí vemos los más usados. Si se desea ver la
especificación completa de CSS, se puede consultar en la página oficial del estándar CSS (http://www.w3.org/Style/
CSS/).
84
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
4.3.1 ATRIBUTOS QUE AFECTAN A LAS FUENTES
Propiedad Valor permitido Ejemplo Ámbito
Color Valor RGB | nombre de color. color: #009900;
color: red;
Indica el color del texto.
Admitido por casi todas
las etiquetas de HTML.
No todos los nombres de
colores son admitidos en
el estándar, por lo que
es aconsejable utilizar el
valor RGB.
font-size xx-small | x-small | small |
medium | large | x-large |
xxlarge
Unidades de CSS font-size.
font-size: 12pt;
font-size: x-large;
Indica el tamaño de las
fuentes.
font-family serif | sans-serif | cursive |
fantasy | monospace
Todas las fuentes habituales.
font-family: arial,helvética; Indica la familia
tipográfica del texto.
Los primeros valores
son genéricos, es decir,
los exploradores las
comprenden y utilizan
las fuentes que el
usuario tenga en su
sistema. También se
pueden definir con
tipografías normales,
como ocurría en html.
Si el nombre de una
fuente tiene espacios,
se utilizan comillas para
que se entienda bien.
font-weight normal | bold | bolder | lighter
| 100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900
font-weight: bold;
font-weight: 200;
Define la anchura de los
caracteres. Por ejemplo:
si deseamos poner
negritas, el valor es 700;
si deseamos que la letra
sea normal, el valor es
400.
font-style normal | italic | oblique font-style: normal;
font-style: italic;
Es el estilo de la fuente,
que puede ser normal,
itálica u oblicua.
85
© RAMA 4 n HOJAS DE ESTILO WEB
4.3.2 ATRIBUTOS DE PÁRRAFOS Y TEXTO
Propiedad Valor permitido Ejemplo Ámbito
line-height normal | [unidades CSS] line-height: 12px;
line-height: normal
Indica el alto de una
línea y, por tanto,
el espaciado entre
líneas. Es una de esas
características que no
se podían modificar
utilizando HTML.
text-decoration none | [ underline | overline |
linethrough ]
text-decoration: none;
text-decoration: underline;
Establece la decoración
de un texto; es decir,
si está subrayado,
sobrerrayado o tachado.
text-align left | right | center | justify text-align: right;
text-align: center;
Indica la alineación del
texto.
text-indent Unidades CSS text-indent: 10px;
text-indent: 2in;
Un atributo que sirve
para hacer sangrado
o márgenes en las
páginas.
text-transform capitalize | uppercase |
lowercase | none
text-transform: none;
text-transform: capitalize;
Nos permite transformar
el texto, haciendo que
tenga la primera letra
en mayúsculas de todas
las palabras, todo en
mayúsculas o todo en
minúsculas.
4.3.3 ATRIBUTOS DE FONDO
Propiedad Valor permitido Ejemplo Ámbito
Background-color Un color, con su nombre o su
valor RGB.
background-color: green;
background-color:
#000055;
Indica el color de fondo
de un elemento de la
página.
Background-image El nombre de la imagen con su
camino relativo o absoluto.
background-image: url
(mármol.gif);
background-image:
url(http:// www.x.com/
fondo.gif)
Indica que el fondo de
un elemento es una
imagen.
86
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
4.3.4 ATRIBUTOS DE CONTENEDORES (TABLAS, ETC.)
PropiedadValor permitido Ejemplo Ámbito
Margin-left Unidades CSS margin-left: 1cm;
margin-left: 0,5in;
Indica el tamaño del margen izquierdo.
Margin-right Unidades CSS margin-right: 5 %;
margin-right: 1in;
Define el tamaño del margen a la derecha.
Margin-top Unidades CSS margin-top: 0px;
margin-top: 10px;
Indica el tamaño del margen superior.
Margin-bottom Unidades CSS margin-bottom: 0pt;
margin-top: 1px;
Indica el tamaño del margen inferior.
Padding-left Unidades CSS padding-left: 0.5in;
padding-left: 1px;
Indica el espacio insertado, por la
izquierda, entre el borde del elemento
continente y el contenido de éste. Es
parecido al atributo cellpadding de las
tablas. El espacio insertado tiene el
mismo fondo que el fondo del elemento-
continente.
Padding-right Unidades CSS padding-right:
0.5cm; padding-
right: 1pt;
Indica el espacio insertado, en este
caso, por la derecha, entre el borde del
elemento-continente y el contenido de
éste. Es parecido al atributo cellpadding
de las tablas. El espacio insertado tiene el
mismo fondo que el fondo del elemento-
continente.
Padding-top Unidades CSS padding-top: 10pt;
padding-top: 5px;
Indica el espacio insertado, por arriba,
entre el borde del elemento-continente y
el contenido de éste.
Padding-bottom Unidades CSS padding-right:
0.5cm; padding-
right: 1pt;
Indica el espacio insertado, en este caso,
por abajo, entre el borde del elemento
continente y el contenido de éste.
Border-color color RGB | nombre de
color
border-color: red;
border-color: #ffccff;
Indica el color del borde del elemento de
la página al que se aplica.
Se pueden poner colores por separado
con los atributos: border-top-color,
borderright-color, border-bottom-color,
border-left-color.
Border-style none | dotted | solid |
double | groove | ridge |
inset | outset
border-style: solid;
border-style: double;
Indica el estilo del borde. Los valores
significan: none = ningún borde, dotted =
punteado, solid = sólido, doublé = doble
borde. Las opciones de groove a outset
son bordes con efectos en 3D.
border-width Unidades CSS border-width: 10px;
border-width: 0.5in;
Tamaño del borde del elemento al que se
aplica.
float none | left | right float: right; Sirve para alinear un elemento a la
izquierda o la derecha, haciendo que
el texto se agrupe alrededor de dicho
elemento.
87
© RAMA 4 n HOJAS DE ESTILO WEB
clear none | right | left clear: right; Si este elemento tiene a su altura
imágenes u otros elementos alineados a
la derecha o la izquierda, con el atributo
clear hacemos que se coloque en un lugar
donde ya no tenga esos elementos al lado
que indiquemos.
4.4 TEST DE CONOCIMIENTOS
1 Si se quiere aplicar un estilo a todo un documento, la etiqueta <style> debe definirse dentro del elemento:
a) <head>.
b) <body>.
c) <title>.
d) <div>.
2 El atributo clear se aplica:
a) Al fondo de la página.
b) A elementos contenedores.
c) A las fuentes del texto.
d) A párrafos.
3 Señale la respuesta correcta con respecto a las características de las clases en CSS:
a) No se pueden aplicar a cualquier elemento HTML.
b) No pueden referirse a un elemento concreto dentro de la página codificada en HTML.
c) Para definir un selector de clase, se debe escribir el nombre que se desea dar a la clase precedido de un punto.
d) Ninguna de las anteriores.
4 Una hoja de estilos está compuesta por:
a) Selectores y propiedades a los que se les asignan valores.
b) Etiquetas HTML.
c) Un único selector con las propiedades de todos los elementos.
d) Elementos y selectores definidos entre paréntesis ().
5 El elemento padding-bottom:
a) Indica el espacio insertado por abajo entre el borde del elemento continente y el contenido de éste.
b) Indica el tamaño del margen inferior.
c) Indica el tamaño del borde del elemento al que se aplica.
d) Indica la alineación del texto.
Arquitecturas de
aplicaciones web5
90
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Antes de comprender los lenguajes que se utilizan para la creación de componentes dinámicos en la Web es
necesario entender cuál es la tecnología que soporta la ejecución de aplicaciones Web. Una aplicación Web normalmente
es proporcionada por un servidor (Web) y utilizada (consumida) por usuarios que se conectan y realizan peticiones
a dicho servidor desde cualquier punto a través de la Red, utilizando los denominados clientes Web (browsers o
navegadores).
Como en cualquier arquitectura, las arquitecturas de las aplicaciones Web también están compuestas por
componentes y conectores. En el caso de la Web, los componentes son los servidores Web, y los clientes y los conectores
serían las conexiones de red que permiten que la información fluya del cliente al servidor, y viceversa, a través de
Internet. El modelo utilizado en las aplicaciones Web es el denominado modelo Cliente/Servidor.
5.1 ARQUITECTURA EN CAPAS
Cuando hablamos de la arquitectura en capas de la Web, nos referimos a la forma en la cual se distribuye la
infraestructura, es decir, los elementos de hardware en los que se ejecutarán los procesos y que constituyen el
sistema. De manera genérica, los sistemas Web actuales están guiados por las arquitecturas multinivel (del inglés
multitier). Este modelo de arquitectura deriva de la arquitectura Cliente-Servidor, y propone distribuir los elementos
arquitectónicos de infraestructura en niveles.
Así, cada tipo de elemento que tenga un rol distinto representará una capa diferente. En el caso Web, la mayoría
de los sistemas presentan una arquitectura de dos o más niveles. Una arquitectura de dos niveles significa que las
funciones estarán divididas en dos equipos de cómputo diferentes y equivale al modelo cliente-servidor tradicional.
Ejemplo de una arquitectura de dos capas es un modelo en el cual el nivel uno representa al cliente que, a través de
algún dispositivo de acceso a Internet (portátil, teléfono móvil, tablet, PDA), se comunica con el nivel dos en el cual se
encuentra el equipo servidor que ejecutará los procesos y devolverá la respuesta al cliente. Este tipo de arquitectura
es ilustrado en la Figura 5.1.
120
PROGRAMACIÓN
WEB
EN
EL
ENTORNO
CLIENTE
©
STARBOOK
más niveles. Una arquitectura de dos niveles significa que las funciones estarán
divididas en dos equipos de cómputo diferentes y equivale al modelo cliente-servidor
tradicional. Ejemplo de una arquitectura de dos capas es un modelo en el cual el
nivel uno representa al cliente que, a través de algún dispositivo de acceso a Internet
(portátil, teléfono móvil, tablet, PDA), se comunica con el nivel dos en el cual se
encuentra el equipo servidor que ejecutará los procesos y devolverá la respuesta al
cliente. Este tipo de arquitectura es ilustrado en la Figura 5.1.
Nivel 2
(Servidor)
Nivel 1
(Cliente)
Usuario
final
Red

Figura 5.1. Ejemplo de arquitectura de dos niveles

Si la arquitectura física del sistema es de tres niveles, quiere decir que tenemos otro
elemento hardware involucrado en el funcionamiento de nuestro sistema. Por lo
general, este nuevo elemento desdobla las funciones del servidor, es decir, el nuevo
nivel casi siempre representa a un nuevo servidor que descarga funcionalidad y
carga de trabajo al servidor único. La Figura 5.2 representa una arquitectura de tres
niveles.
Nivel 2 Nivel 3Nivel 1
(Cliente)
Usuario
final
RedRed
Dispositivos
móviles Servidor Web Servidor de BD

Figura 5.2. Ejemplo de arquitectura de tres niveles

En el caso de la Figura 5.2, el servidor único de la Figura 5.1 se desdobla en dos
equipos: un servidor Web (nivel 2), encargado de ofrecer las prestaciones para
aceptar y contestar peticiones Web, y un servidor de base de datos (nivel 3),
encargado de almacenar y gestionar el acceso a la información.
Figura 5.1. Ejemplo de arquitectura de dos niveles
Si la arquitectura física del sistema es de tres niveles, quiere decir que tenemos otro elemento hardware involucrado
en el funcionamiento de nuestrosistema. Por lo general, este nuevo elemento desdobla las funciones del servidor, es
decir, el nuevo nivel casi siempre representa a un nuevo servidor que descarga funcionalidad y carga de trabajo al
servidor único. La Figura 5.2 representa una arquitectura de tres niveles.
91
© RAMA 5 n ARQUITECTURAS DE APLICACIONES WEB
120
PROGRAMACIÓN
WEB
EN
EL
ENTORNO
CLIENTE
©
STARBOOK
más niveles. Una arquitectura de dos niveles significa que las funciones estarán
divididas en dos equipos de cómputo diferentes y equivale al modelo cliente-servidor
tradicional. Ejemplo de una arquitectura de dos capas es un modelo en el cual el
nivel uno representa al cliente que, a través de algún dispositivo de acceso a Internet
(portátil, teléfono móvil, tablet, PDA), se comunica con el nivel dos en el cual se
encuentra el equipo servidor que ejecutará los procesos y devolverá la respuesta al
cliente. Este tipo de arquitectura es ilustrado en la Figura 5.1.
Nivel 2
(Servidor)
Nivel 1
(Cliente)
Usuario
final
Red

Figura 5.1. Ejemplo de arquitectura de dos niveles

Figura 5.2. Ejemplo de arquitectura de tres niveles

En el caso de la Figura 5.2, el servidor único de la Figura 5.1 se desdobla en dos
equipos: un servidor Web (nivel 2), encargado de ofrecer las prestaciones para
aceptar y contestar peticiones Web, y un servidor de base de datos (nivel 3),
encargado de almacenar y gestionar el acceso a la información.
Figura 5.2. Ejemplo de arquitectura de tres niveles
En el caso de la Figura 5.2, el servidor único de la Figura 5.1 se desdobla en dos equipos: un servidor Web (nivel 2),
encargado de ofrecer las prestaciones para aceptar y contestar peticiones Web, y un servidor de base de datos (nivel
3), encargado de almacenar y gestionar el acceso a la información.
Las arquitecturas multinivel pueden tener tantos niveles como equipos involucrados en el manejo de la información
y el procesamiento existan. La Figura 5.3 y la Figura 5.4 muestran dos ejemplos de arquitecturas de cuatro niveles.
Es importante anotar cómo, aunque las dos tienen cuatro niveles, los roles de cada nivel no son el mismo para cada
ejemplo.
©
STARBOOK
CAPÍTULO
5.
ARQUTIECTURAS
DE
APLICACIONES
WEB
121
Las arquitecturas multinivel pueden tener tantos niveles como equipos involucrados
en el manejo de la información y el procesamiento existan. La Figura 5.3 y la Figura
5.4 muestran dos ejemplos de arquitecturas de cuatro niveles. Es importante anotar
cómo, aunque las dos tienen cuatro niveles, los roles de cada nivel no son el mismo
para cada ejemplo.
Nivel 4Nivel 2 Nivel 3Nivel 1
(Cliente)
Portátiles
Servidor de Bases
de Datos
Servidor de
Aplicaciones
Servidor Web
Usuario
Red Red Red

Figura 5.3. Arquitectura estándar para la construcción de páginas Web

Para el caso de la Figura 5.3 existen dos equipos diferentes, el servidor Web y el
servidor de aplicaciones, encargados de la gestión y el procesamiento de las
peticiones recibidas de parte del cliente. Este caso es otro ejemplo de cómo la
división en niveles corresponde a una división funcional, de manera que un equipo
es destinado a una función particular y así crea un nuevo nivel en la arquitectura.
Además, este ejemplo nos sirve para ilustrar la diferencia funcional entre un servidor
Web y un servidor de aplicaciones. Para aclarar los conceptos hagamos un poco de
historia. Cuando se crearon los primeros servidores de páginas Web (web servers),
como Apache, su única misión era recuperar páginas Web estáticas de su disco duro
y enviárselas al cliente. Para cualquier otro tipo de información que debiera
generarse de manera dinámica (respuestas a búsquedas, etc.), el servidor tenía que
ceder el control a algún tipo de código externo mediante CGI, el cual ejecutaba un
script (programa). Con el paso del tiempo, el uso de servidores Web se generalizó y
se hizo necesario incrementar los servicios ofrecidos, ya que llamar a un
interpretador para que ejecutara otro programa suponía una demanda muy fuerte
sobre el equipo que mantenía el servidor de páginas (servidor Web). Finalmente, la
evolución ha llevado a crear un nuevo término: servidor de aplicaciones (Application
server). Hoy en día, se puede decir que todos los servidores Web actuales son
también servidores de aplicaciones, ya que incluyen alguna tecnología (CGI, PHP,
JSP, etc.) que permite ejecutar aplicaciones que generan contenido dinámico o
aplicaciones de servidor. Dependiendo de la funcionalidad, se trae consigo
complejidad al sistema, ya sea en la forma de requerimientos del sistema (memoria,
procesadores), carga administrativa (configuración, tiempo de desarrollo) o alguna
otra.
Figura 5.3. Arquitectura estándar para la construcción de páginas Web
Para el caso de la Figura 5.3 existen dos equipos diferentes, el servidor Web y el servidor de aplicaciones,
encargados de la gestión y el procesamiento de las peticiones recibidas de parte del cliente. Este caso es otro ejemplo de
cómo la división en niveles corresponde a una división funcional, de manera que un equipo es destinado a una función
particular y así crea un nuevo nivel en la arquitectura. Además, este ejemplo nos sirve para ilustrar la diferencia
funcional entre un servidor Web y un servidor de aplicaciones. Para aclarar los conceptos hagamos un poco de historia.
Cuando se crearon los primeros servidores de páginas Web (web servers), como Apache, su única misión era recuperar
páginas Web estáticas de su disco duro y enviárselas al cliente. Para cualquier otro tipo de información que debiera
generarse de manera dinámica (respuestas a búsquedas, etc.), el servidor tenía que ceder el control a algún tipo de
código externo mediante CGI, el cual ejecutaba un script (programa). Con el paso del tiempo, el uso de servidores
Web se generalizó y se hizo necesario incrementar los servicios ofrecidos, ya que llamar a un interpretador para
que ejecutara otro programa suponía una demanda muy fuerte sobre el equipo que mantenía el servidor de páginas
(servidor Web). Finalmente, la evolución ha llevado a crear un nuevo término: servidor de aplicaciones (Application
server). Hoy en día, se puede decir que todos los servidores Web actuales son también servidores de aplicaciones,
ya que incluyen alguna tecnología (CGI, PHP, JSP, etc.) que permite ejecutar aplicaciones que generan contenido
dinámico o aplicaciones de servidor. Dependiendo de la funcionalidad, se trae consigo complejidad al sistema, ya sea
en la forma de requerimientos del sistema (memoria, procesadores), carga administrativa (configuración, tiempo de
desarrollo) o alguna otra.
92
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Teniendo en cuenta que la tendencia de que cualquier servidor Web sea un servidor de aplicaciones, la Figura
5.4 muestra un ejemplo de arquitectura de cuatro niveles con este rol. En este caso, mostramos la arquitectura de
YouTube en sus inicios, la cual fue explicada por su jefe en el vídeo:
122
PROGRAMACIÓN
WEB
EN
EL
ENTORNO
CLIENTE
©
STARBOOK
Teniendo en cuenta que la tendencia de que cualquier servidor Web sea un servidor
de aplicaciones, la Figura 5.4 muestra un ejemplo de arquitectura de cuatro niveles
con este rol. En este caso, mostramos la arquitectura de YouTube en sus inicios, la
cual fue explicada por su jefe en el vídeo:
Nivel 4Nivel 2Nivel 3Nivel 1
(Cliente)
Portátiles
Servidor de Bases
de Datos
Servidor de
Aplicaciones
Usuario
Red RedRed
Servidor de
Streaming
Figura 5.4. Otro ejemplo de arquitectura de cuatro niveles

El diseño de cada una de estas capas influye a la hora de seleccionar uno u otro
modelo de programación en la Web. Dichos modelos de programación
cliente/servidor pueden clasificarse, de este modo, atendiendo a diferentes criterios.
Así, es posible clasificarlos dependiendo del tamaño de los componentes, por la
naturaleza del servicio ofrecido o según el reparto de funciones entre cliente y
servidor:
• Según el tamaño de los componentes: esta primera clasificación hace
referencia a qué elemento de la arquitectura Web debe soportar más o menos
carga de procesamiento. Se habla de configuraciones Fat Client (thin server),
donde el mayor peso de la aplicación se ejecuta en el cliente, relegando al
servidor a un mero administrador de datos; o Fat Server (thin client), donde la
funcionalidad asociada al cliente está limitada a la presentación de la
información enviada por el servidor.
• Según la naturaleza del servicio ofrecido: también es posible clasificar los
entornos cliente/servidor en función de las capacidades ofrecidas por el
servidor. De esta forma, podemos encontrar servidores de ficheros, donde el
objetivo del cliente es el acceso a datos contenidos en ficheros; servidores de
bases de datos, que se centran en la provisión y administración de sistemas
gestores de bases de datos; servidores de transacciones, centrados en el
concepto de transacción con el objetivo de que los flujos de información con el
cliente se realicen en un solo mensaje solicitud/respuesta; servidores de
objetos, cuya principal característica es la utilización de objetos
intercomunicados, tanto en el cliente como en el servidor; o servidores web,
que conforman la base del modelo World Wide Web y que está fundamentado
Figura 5.4. Otro ejemplo de arquitectura de cuatro niveles
El diseño de cada una de estas capas influye a la hora de seleccionar uno u otro modelo de programación en la Web.
Dichos modelos de programación cliente/servidor pueden clasificarse, de este modo, atendiendo a diferentes criterios.
Así, es posible clasificarlos dependiendo del tamaño de los componentes, por la naturaleza del servicio ofrecido o según
el reparto de funciones entre cliente y servidor:
n Según el tamaño de los componentes: esta primera clasificación hace referencia a qué elemento de la arquitectura
Web debe soportar más o menos carga de procesamiento. Se habla de configuraciones Fat Client (thin server),
donde el mayor peso de la aplicación se ejecuta en el cliente, relegando al servidor a un mero administrador de
datos; o Fat Server (thin client), donde la funcionalidad asociada al cliente está limitada a la presentación de
la información enviada por el servidor.
n Según la naturaleza del servicio ofrecido: también es posible clasificar los entornos cliente/servidor en función
de las capacidades ofrecidas por el servidor. De esta forma, podemos encontrar servidores de ficheros, donde el
objetivo del cliente es el acceso a datos contenidos en ficheros; servidores de bases de datos, que se centran en
la provisión y administración de sistemas gestores de bases de datos; servidores de transacciones, centrados
en el concepto de transacción con el objetivo de que los flujos de información con el cliente se realicen en un
solo mensaje solicitud/respuesta; servidores de objetos, cuya principal característica es la utilización de objetos
intercomunicados, tanto en el cliente como en el servidor; o servidores web, que conforman la base del modelo
World Wide Web y que está fundamentado en la existencia de clientes simples que se comunican con servidores
Web utilizando HTTP como protocolo de comunicación.
n Reparto de funciones entre cliente y servidor: las diferentes tecnologías Web existentes permiten gestionar y
distribuir las responsabilidades de cada una de las prestaciones funcionales entre el cliente y el servidor. Lo
más habitual es tener una configuración cliente/servidor de dos o tres capas, dependiendo de si las capas de
negocio y datos se agrupan (modelo en dos capas) o si se separan (modelo en tres capas). La separación en dos
o tres capas la podemos ver, además, tanto desde el punto de vista del software como del hardware.
93
© RAMA 5 n ARQUITECTURAS DE APLICACIONES WEB
5.2 INTERACCIÓN ENTRE LAS CAPAS CLIENTE Y SERVIDOR
El funcionamiento básico de una petición a un servidor por parte de un cliente es: el servidor Web distribuye
páginas de información formateada a los clientes que las solicitan. Las peticiones son hechas a través de una conexión
de red, y para ello se usa el protocolo HTTP. Una vez que se solicita esta petición y la recibe el servidor Web, éste
localiza la página Web en su sistema de archivos y la envía de vuelta al navegador que la solicitó, que la interpretará
y visualizará para el usuario.
Las páginas Web son el componente principal de una aplicación o sitio Web. Los browsers piden páginas
(almacenadas o creadas dinámicamente) con información a los servidores Web. Como se verá más adelante, el
desarrollo de aplicaciones Web puede realizarse mediante diferentes lenguajes de programación (que son ejecutados
por el servidor antes de entregar la página) pero, en general, las páginas resultado obtenidas por el cliente tras la
petición al servidor contienen código HTML y scripts que dotan de dinamismo a la página visualizada.
Una vez que se entrega una página, la conexión entre el navegador y el servidor Web se rompe, es decir, que la
lógica del negocio en el servidor solamente se activa por la ejecución de los scripts de las páginas solicitadas por el
navegador (en el servidor, no en el cliente). Cuando el navegador ejecuta un script en el cliente, éste no tiene acceso
directo a los recursos del servidor. Los scripts del cliente son, por lo general, código JavaScript o VBScript, mezclados
con código HTML.
5.3 TEST DE CONOCIMIENTOS
1 Durante la interacción entre un cliente y un servidor:
a) Una vez que se entrega una página, la conexión entre el navegador y el servidor Web se rompe.
b) Una vez que se entrega una página, la conexión entre el navegador y el servidor Web se mantiene.
c) Una vez que se entrega una página, el cliente debe notificar al servidor que ha recibido la página.
d) Ninguna de las anteriores afirmaciones es cierta.
2 Una arquitectura de dos capas está formada por:
a) Un servidor Web y un servidor de bases de datos.
b) Un cliente Web y un servidor Web.
c) Un servidor de aplicaciones y un servidor de bases de datos.
d) Un servidor Web y un servidor de aplicaciones.
94
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
3 Señale la respuesta correcta con respecto a las arquitecturas multinivel:
a) Pueden tener tantos niveles como equipos involucrados en el manejo de la información y el procesamiento
existan.
b) Únicamente pueden estar formadas por dos tipos de servidores.
c) El cliente nunca ejecuta lógica de negocio ni almacena información.
d) Ninguna de las anteriores.
4Cuando un servidor incluye tecnología que permite ejecutar aplicaciones que generan contenido dinámico se denomina:
a) Servidor de streaming.
b) Servidor de bases de datos.
c) Servidor de aplicaciones.
d) Servidor Web.
5¿Cuál de las siguientes estrategias representa una estrategia de programación válida en entornos cliente/servidor?a) Fat Client/Thin Server.
b) Programación en dos capas.
c) Uso de servidores de objetos.
d) Todas las anteriores.
Navegadores web6
96
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
La World Wide Web (o la Web, como se conoce comúnmente) representa un universo de información accesible
globalmente a través de la red Internet. Está formada por un conjunto de recursos interconectados que conforman
el conocimiento humano actual. El funcionamiento de la Web es posible debido a la coexistencia de una serie
de componentessoftware y hardware. Estos elementos abarcan desde los componentes físicos de Internet (hubs,
repetidores, puentes, pasarelas, encaminadores, etc.) y los protocolos de comunicaciones (TCP, IP, HTTP, FTP, SMTP,
etc.), hasta la utilización del sistema de nombres de dominio (DNS) para la búsqueda y recuperación de recursos o la
utilización de software específico para proveer y consumir dichos recursos.
En este contexto, el desarrollo en entornos Web debe tener en cuenta la distribución de los elementos y la función
que tiene cada uno de ellos. La configuración arquitectónica más habitual se basa en el modelo denominado Cliente/
Servidor, basado en la idea de servicio, en el que el cliente es un componente consumidor de servicios y el servidor es
un proceso proveedor de servicios. Además, esta relación está robustamente cimentada en el intercambio de mensajes
como el único elemento de acoplamiento entre ambos. En este libro, y en este capítulo en concreto, nos vamos a centrar
en las características de los componentes software que se utilizan en el cliente.
Uno de los componentes más habituales en el cliente es el navegador Web, que permite acceder al contenido ofrecido
por los servidores de Internet sin la necesidad de que el usuario instale un nuevo programa (con excepciones). Podemos
encontrarnos muchos tipos de clientes en función de sus capacidades, los lenguajes soportados o las facilidades de
configuración. Los más livianos, o ligeros, son los que por sí solos no pueden ejecutar ninguna operación real más allá
de la de conectarse al servidor. Sin embargo, actualmente, la tendencia es a disponer de clientes complejos, que utilizan
lenguajes como Java o funciones avanzadas en DHTML para otorgar mayor funcionalidad y flexibilidad al usuario.
Estos navegadores pueden no sólo conectarse al servidor, sino que también son capaces de procesar o sincronizar datos
para su uso sin necesidad de que el usuario intervenga.
En cualquier caso, debemos entender que un navegador Web, o explorador Web (browser), es una aplicación,
distribuida habitualmente como software libre, que permite a un usuario acceder (y, normalmente, visualizar) a un
recurso publicado por un servidor Web a través de Internet y descrito mediante una dirección URL (Universal Resource
Locator). Como ya hemos dicho, lo más habitual es que utilicemos los exploradores Web para «navegar» por recursos de
tipo hipertexto, comúnmente descritos en HTML, ofrecidos por servidores Web de todo el mundo a través de Internet.
6.1 NAVEGADORES DE USO COMÚN Y SOPORTE DE ESTÁNDARES
Desde la creación de la Web a principios de los años 90, los navegadores Web han evolucionado desde meros
visualizadores de texto que, aunque no ofrecían capacidades multimedia (visualización de imágenes), cumplían su
propósito (Links, Lynx, W3M), hasta los actuales navegadores, totalmente preparados para soportar cualquier tipo de
interacción y funcionalidad requerida por el usuario. A continuación, describimos una pequeña lista de algunos de los
exploradores más relevantes a lo largo de la corta historia de los clientes de navegación Web:
n Mosaic. Se considera uno de los primeros navegadores Web y el primero con capacidades gráficas. Las
primeras versiones se diseñaron para ser ejecutado sobre UNIX pero, debido a su gran aceptación, pronto
fue portado a las plataformas de Windows y Macintosh. Se utilizó como base para las primeras versiones de
Internet Explorer y Mozilla. Su desarrollo se abandonó en 1997.
n Netscape Navigator (después Communicator). Fue el primer navegador en incluir un módulo para la
ejecución de código script (JavaScript). Se le considera como el perdedor de la Guerra de los navegadores, que
tuvo lugar entre Netscape y Microsoft por el dominio del mercado de navegadores Web a finales de los años 90.
Sus características, sin embargo, se consideran la base de otros navegadores, como Mozilla Firefox.
97
© RAMA 6 n NAVEGADORES WEB
n Internet Explorer/Edge. Es el navegador de Microsoft. Su cuota de distribución y uso ha sido muy elevada
gracias a su integración con los sistemas Windows. En los últimos años su utilización ha ido descendiendo
paulatinamente debido al aumento de usuarios que optan por otros navegadores, como Firefox o Chrome. A
fecha de finales de 2015, la última versión del navegador de Microsoft es Edge, que ha sustituido a Internet
Explorer como navegador de elección en Windows 10.
n Mozilla Firefox. Se trata de un navegador de código abierto multiplataforma de gran aceptación en la
comunidad de desarrolladores Web. Existen gran variedad de utilidades, extensiones y herramientas que
permiten la personalización tanto del funcionamiento del navegador como de su apariencia. Fue uno de los
primeros en incluir la navegación por pestañas. Además, es un navegador multiplataforma, lo que le ha llevado
a poder recortar parte de la cuota de distribución que desde los inicios de la década de los 2000 venía teniendo
Internet Explorer.
n Google Chrome. Es el navegador de Google compilado a partir de componentes de código abierto. En boca de
sus desarrolladores, sus características principales son la seguridad, velocidad y estabilidad. En numerosos
test comparativos este navegador ha demostrado ser uno de los más rápidos y seguros gracias, entre otras
razones, a estar construido siguiendo una arquitectura multiproceso en la que cada pestaña es ejecutada de
forma independiente.
n Safari. Es el navegador por defecto de los sistemas de Apple, aunque también se han desarrollado versiones
para su funcionamiento en las plataformas Windows. Las últimas versiones incorporan las características
habituales de navegación por pestañas, corrector ortográfico en formularios, almacenamiento de direcciones
favoritas («marcadores»), bloqueador de ventanas emergentes, soporte para motores de búsqueda personalizados
o un gestor de descargas propio.
n Dolphin Browser. Debido al auge de los dispositivos móviles inteligentes (smartphones y tablets) y de los
sistemas operativos para éstos, tenemos que hacer referencia obligatoriamente a uno de los navegadores más
populares para estas plataformas. Específico para el sistema operativo Android, fue uno de los primeros en incluir
soporte para navegación multitáctil. Utiliza un motor de renderizado de páginas similar al de Chrome o Safari.
En la siguiente gráfica puede verse una tendencia de la utilización de navegadores en el período 2008-2015
(obtenida de gs.StatCounter.com):
Figura 6.1. Estadísticas de uso de navegadores (2008-2015)
98
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Podemos diferenciar los navegadores anteriores de acuerdo con una serie de criterios:
n Plataforma de ejecución. No todos los navegadores pueden ser ejecutados en cualquier sistema operativo.
Safari, por ejemplo, es exclusivo de los sistemas de Apple, aunque tiene versiones para Windows.
n Características del navegador. La mayoría de los navegadores ofrecen funcionalidades adicionales asociadas
a la experiencia del usuario a la hora de navegar por la Red. Algunas de las características soportadas de
forma nativa (sin necesidad de instalar extensiones) incluyen la administración de marcadores, gestores de
descarga, almacenamiento seguro de contraseñas y datos de formularios, corrección ortográfica o definición de
herramientas de búsqueda.
n Personalización de la interfaz. Las funciones de accesibilidad que definen la experiencia del usuario con un
navegador Web también son un aspecto diferencial. Entre los aspectos más destacados podemos mencionar el
soporte para la navegación por pestañas, la existencia de bloqueadores de ventanas emergentes, la integración
de visualizadores de formatos de ficheros (como PDF), opciones de zoom o funciones avanzadas de búsqueda
de texto en páginas Web.
n Soporte de tecnologías Web. Actualmente, una de las mayores preocupaciones de los desarrolladores
de navegadores Web es el grado de soporte de los estándares de la Web. Porello, podemos clasificar los
navegadores de acuerdo con su nivel de soporte de tecnologías, como CSS (hojas de estilo en cascada), Java,
lenguajes de scripting del cliente (JavaScript), RSS o Atom (sindicación de contenidos), XHTML (HTML con
formato de XML), etc.
n Licencia de software. Existen navegadores de código libre, como Mozilla Firefox (licencia GNU GPL) o Google
Chrome (licencia BSD), y navegadores propietarios, como Internet Explorer (Microsoft) o Safari (Apple). Salvo
raras excepciones (OmniWeb), todos los navegadores son gratuitos.
6.2 ARQUITECTURA DE UN NAVEGADOR
Cada navegador Web tiene su propia forma de interpretar la interacción con un usuario. El resultado de esta
interacción, en cualquier caso, se inicia con el usuario indicando la dirección del recurso al que quiere acceder y
termina con la visualización del recurso por parte del navegador en la pantalla del usuario (salvo interacciones
posteriores del usuario con la página). La forma de realizar este proceso depende del propósito del navegador y de la
configuración del mismo. De esta forma, un navegador puede estar más centrado en ofrecer una respuesta más rápida,
en mostrar una respuesta más fiel al contenido del recurso obtenido, en priorizar los aspectos de seguridad de las
comunicaciones con el servidor, etc.
Para poder llevar a cabo el proceso descrito anteriormente, cada navegador está formado por una serie de
elementos y componentes determinados que conforman lo que se denomina arquitectura del navegador. A pesar de que
cada navegador tiene su propia arquitectura, la gran mayoría de ellos coinciden en una serie de componentes básicos
y comunes: es lo que llamamos arquitectura de referencia. De acuerdo con el estudio llevado a cabo por Grosskurth y
Godfrey, los componentes básicos incluidos en la arquitectura de referencia de un navegador Web son los que pueden
verse en la siguiente figura:
99
© RAMA 6 n NAVEGADORES WEB
Interfaz de usuario
Motor del Buscador
Motor de Renderizado
Persistencia de datos
Componente de
visualización
Comunicaciones
Intérprete
Javascript
Parser
XML
Figura 6.2. Arquitectura de referencia de un navegador Web
Los componentes de esta arquitectura de referencia son:
n Subsistema de interfaz de usuario. Es la capa que actúa de interfaz entre el usuario y el motor del buscador
(o de navegación). Ofrece funcionalidades tales como la visualización de barras de herramientas, progreso de
carga de la página, gestión inteligente de las descargas, preferencias de configuración de usuario o impresión.
En algunos casos puede comunicarse con el sistema operativo para el manejo de sesiones de usuario o el
almacenamiento de preferencias de visualización o configuración.
n Subsistema del motor del buscador o motor de navegación. Este subsistema es un componente que
ofrece una interfaz de alto nivel para el motor de renderizado. Su función principal es la de cargar una dirección
determinada (URL o URI) y soportar los mecanismos básicos de navegación, tales como ir a la página anterior o
siguiente o la recarga de la página. Además, es el componente que gestiona las alertas de JavaScript (mensajes
de usuario) y el proceso de carga de una página (es el que provee de información a la interfaz de usuario al
respecto). Finalmente, es el encargado de consultar y administrar las preferencias de ejecución del motor de
renderizado.
n Subsistema de renderizado. Este componente es el encargado de producir una representación visual del
recurso obtenido a partir del acceso a una dirección Web. El código de una página Web es interpretado por este
módulo. En función de los lenguajes, estándares y tecnologías soportadas por el navegador, este módulo será
capaz de mostrar documentos HTML, XML, hojas de estilo CSS e incluso contenido embebido en la página
(audio/vídeo) e imágenes. Además, este módulo establece las dimensiones exactas de cada elemento que se va
a mostrar y, en ocasiones, es el responsable de posicionar dichos elementos en una página.
Algunos de los motores de renderizado más utilizados son:
– Gecko, utilizado en Firefox, Mozilla Suite y otros navegadores como Galeon.
– Trident, el motor de Internet Explorer para Windows.
– WebKit, el motor de Google Chrome, Epiphany y Safari.
– Presto, el motor de Opera.
– Tasman, el motor de Internet Explorer para Mac.
100
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
n Subsistema de comunicaciones. Es el subsistema encargado de implementar los protocolos de transferencia
de ficheros y documentos utilizados en Internet (HTTP, FTP, etc.). Además, es el responsable de identificar
la codificación de los datos obtenidos en función de su tipo, de tal forma que es capaz de identificar si el
recurso obtenido es de tipo texto, audio, vídeo, etc. (codificado en estándar MIME, Multipurpose Internet
Mail Extensions). Dependiendo de las capacidades personalizadas para el navegador, este subsistema puede
almacenar una caché de elementos accedidos recientemente.
n Intérprete de JavaScript. Las páginas HTML habitualmente llevan código intercalado para la provisión
de ciertas funcionalidades al usuario, como puede ser la respuesta a ciertos eventos del ratón o del teclado.
El lenguaje comúnmente aceptado para la programación de este código embebido es JavaScript (siguiendo el
estándar ECMAScript). El intérprete de JavaScript será el encargado de analizar y ejecutar dicho código. Este
módulo puede ser configurado (e incluso deshabilitado) por cuestiones de seguridad o facilidad de navegación
desde el motor de navegación o el motor de renderizado (por ejemplo, para evitar que aparezcan ventanas
emergentes). La existencia de módulos de interpretación de código difiere de un navegador a otro. Por ello, es
posible que existan subsistemas intérpretes de otros lenguajes como applets de Java, AJAX o ActionScript.
n Parser XML. Con el fin de poder acceder más fácilmente a los contenidos definidos en un documento HTML
(en realidad, XHTML), los navegadores Web suelen incluir un módulo (parser) que permite cargar en memoria
una representación en árbol (árbol DOM, Document Object Model) de la página. De esta forma, el acceso a los
diferentes elementos de una página por parte del navegador es mucho más rápido.
n Componente de visualización. Este subsistema ofrece funcionalidades relacionadas con la visualización de
los contenidos de un documento HTML en una página Web. Ofrece primitivas de dibujo y posicionamiento en
una ventana, un conjunto de componentes visuales predefinidos (widgets) y un conjunto de fuentes tipográficas
a los subsistemas principales del navegador Web. Suele estar muy relacionado con las librerías de visualización
del sistema operativo.
n Subsistema de persistencia de datos. Funciona como almacén de diferentes tipos de datos para los
principales subsistemas del navegador. Estos datos suelen estar relacionados con el almacenamiento de
historiales de navegación y el mantenimiento de sesiones de usuario en disco. Otros datos de alto nivel que
también son gestionados por este subsistema incluyen las preferencias de configuración del navegador (de
barras de herramientas, por ejemplo) o el listado de marcadores. A bajo nivel, este sistema administra también
los certificados de seguridad y las cookies.
6.3 SEGURIDAD EN NAVEGADORES WEB
Los navegadores Web cuentan con diferentes niveles de seguridad para que nuestra información sea utilizada de
forma segura y confiable. A continuación, se hace un repaso de las opciones de seguridad que ofrecen los navegadores
más utilizados.
Chrome
Si bien es uno de los navegadores más utilizados, también es uno de los que cuenta con mayores fallos de seguridad,
aunque, comparado con otras alternativas, se puede decir que es bastante seguro, ya que el hecho de atacar o de sacar
provecho de esas vulnerabilidades es una tarea bastante compleja.
101
© RAMA 6 n NAVEGADORES WEB
El funcionamiento de Chrome contempla cada pestaña como procesos independientesy cada extensión o plug-in es
alojado en un «sandbox» (espacio propio de memoria) para prevenir la instalación de software malintencionado en el
navegador y evitar posibles problemas con algún complemento. De esta forma se evita que un problema pueda afectar
a otras pestañas o partes del navegador. Cuenta con características de seguridad propias del sistema operativo, como
DEP (Data Execution Prevention) y ASLR (Address Space Layout Randomization), opciones que previenen la ejecución
de software especialmente programado para saltarse la seguridad del navegador (exploit). Además soporta para la
etiqueta X-FRAME-OPTIONS, que añade una capa de protección adicional frente a prácticas relacionadas con el uso
de iframes para camuflar páginas que ejecutan código malicioso (clickjacking).
Firefox
Firefox también es uno de los navegadores más seguros. Actualmente tiene una tasa de corrección del 100 %, es
decir, que se han corregido la gran mayoría de vulnerabilidades que se detectaron en el pasado, aunque, obviamente,
siguen apareciendo nuevas continuamente. La organización Mozilla cuenta con un gran equipo de desarrolladores que
trabajan constantemente para mejorar la estabilidad y la seguridad de Firefox.
Al igual que Chrome, Firefox aprovecha características como DEP y ASLR, pero no hace uso de otras como Virtual
Store y MIC. También hay ausencia de X-FRAME-OPTIONS, que únicamente lo soporta gracias a las extensiones
específicas de terceros. La falta de estas características hace que no sea considerado tan seguro como otros rivales.
Internet Explorer
Internet Explorer (IE) es uno de los navegadores más usados del mundo, aunque cada vez pierde más cuota de
mercado. Las últimas versiones de este navegador de Internet presentan enormes mejoras en cuanto a seguridad.
Entre algunas de sus principales características de seguridad podemos ver cómo IE resalta el dominio, lo que le
permite ver más fácilmente la dirección Web real de los sitios web que se visitan. Además, permite evitar sitios Web
engañosos o de suplantación de identidad (phishing), que usan direcciones Web erróneas para engañarlo junto con
el hecho de utilizar el filtro SmartScreen, que puede ayudarlo a protegerse de ataques de suplantación de identidad
(phishing) en línea, fraudes y sitios Web con la identidad suplantada (spoofing) o malintencionados. También permite,
a través del administrador de complementos, deshabilitar o habilitar los complementos del explorador Web y eliminar
los controles ActiveX no deseados. Otras mejoras de seguridad incluyen el filtro de scripts de sitios (XSS), que evita
ataques de sitios fraudulentos y de suplantación de identidad que podrían intentar robar su información personal y
financiera o el soporte para conexiones seguras con SSL de 128 bits para usar sitios web seguros.
Internet Explorer aprovecha las características de seguridad propias del sistema operativo, es decir, aprovecha
el DEP (que protege la zona de RAM, evitando la ejecución de exploits), ASLR (que dificulta conocer en qué parte de
la memoria se carga una determinada librería del sistema) y Virtual Store (que permite almacenar información de
manera aislada; de esta forma, la aplicación no tendrá acceso al registro ni a carpetas del sistema operativo).
Opera
Opera ofrece protección antifraude contra ataques de phishing y suplantación de identidad, así como la opción de
eliminar de manera sencilla datos privados. Como todos los navegadores, Opera no está libre de vulnerabilidades, pero
son muy escasas las que afectan al código y suelen estar relacionadas con una actitud proactiva por parte del usuario.
Opera es reconocido por su velocidad, seguridad, soporte de estándares (especialmente CSS), tamaño reducido
y constante innovación. Implementó ya desde sus primeras versiones la navegación por pestañas, el Speed Dial, los
movimientos del ratón en la navegación y la personalización por sitio. La vista en miniatura por pestaña tiene su
versión para móviles y tabletas. Las últimas versiones de Opera usan el motor WebKit, el mismo que Chrome y Safari.
102
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Safari
Los usuarios de Apple suelen usar Safari como navegador principal. Los desarrolladores de este navegador
también se han preocupado por implementar medidas de seguridad necesarias para salvaguardar la información
de sus usuarios. Por ejemplo, han priorizado la opción de navegación privada, usan un sistema de sandboxing para
bloquear sitios Web con código malicioso. Además, Safari protege contra los ataques XSS.
6.4 TEST DE CONOCIMIENTOS
1 Señale la respuesta correcta con respecto a las características de un navegador Web:
a) No pueden realizar peticiones al servidor sin intervención directa del usuario.
b) Todos los navegadores Web actuales son gratuitos.
c) Todos los navegadores actuales soportan la ejecución de JavaScript.
d) No pueden almacenar ningún tipo de dato relacionado con la navegación del cliente.
2 ¿Cuál de los siguientes módulos no forma parte de la arquitectura de referencia de un navegador Web?:
a) Módulo de gestión de usuarios.
b) Módulo de persistencia de datos.
c) Módulo de comunicaciones.
d) Motor de renderizado.
3¿Cuál de los siguientes componentes es el encargado de producir una representación visual del recurso obtenido a partir del acceso a una dirección Web? :
a) Subsistema de persistencia de datos.
b) Subsistema de navegación.
c) Subsistema de comunicaciones.
d) Subsistema de renderizado.
4 ¿Cuál es el objetivo del parser XML?
a) Visualizar los contenidos HTML de una página Web.
b) Cargar en memoria una representación en árbol de la página Web.
c) Identificar la codificación de los datos obtenidos en función de su tipo.
d) Implementar los protocolos de transferencia de ficheros.
5¿Cuál de los siguientes navegadores fue el primero en incluir un módulo para la ejecución de código script (JavaScript) ?
a) Internet Explorer.
b) Mosaic.
c) Netscape Navigator.
d) Opera.
Creación de contenido
web dinámico7
104
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
En el desarrollo de proyectos Web, la generación del contenido de las páginas se lleva a cabo generalmente
utilizando un conjunto de tecnologías en las que se integran tecnologías dedicadas, por un lado, a la generación del
contenido estático (como es el caso de HTML5, ASP, JSP) y, por otro, tecnologías encaminadas a generar el contenido
dinámico de las páginas Web.
Cuando se habla de contenido estático se hace referencia al contenido de las páginas Web, el cual se presenta
de forma estática, invariante a las acciones que realiza el usuario, y cuyo objetivo primordial es presentar datos al
usuario, los cuales normalmente no cambian con el paso del tiempo.
Por otro lado, cuando se habla de contenido dinámico se hace referencia a aquellas partes o elementos de las
páginas Web que cambian con el tiempo, que sufren modificaciones y alteraciones por las acciones que realiza el
usuario sobre el contenido.
El contenido estático se genera habitualmente con lenguajes de marcado o etiquetas, como es el caso de HTML o
ASP. Estos lenguajes no representan un lenguaje de programación en sí, dado que no se pueden codificar programas
u algoritmos a partir de ellos. Habitualmente, son usados para crear la representación gráfica de los elementos de las
Web, los cuales suelen permanecer estáticos. No puede ser generado a través de tecnologías que generan contenido
estático, como es el caso de HTML y CSS, sino que requieren de la utilización de lenguajes de alto nivel, como es el
caso de JavaScript y PHP, los cuales permiten, utilizando programación avanzada, generar contenidos dinámicos
procedentes de diversas fuentes, como pueden ser bases de datos, ficheros, servicios Web, etc.
Los lenguajes utilizados durante el desarrollo pueden ser lenguajes del lado del cliente, si son los encargados
de generar el contenido en los propios navegadores Web de los clientes, y lenguajes de lado del servidor, si son
lenguajesencargados de generar contenido dinámico por mediación de programas interpretados o ejecutados en los
servidores Web que publican los contenidos.
En el primer apartado haremos un repaso general a los conceptos básicos de programación que comparten los
lenguajes de alto nivel, los cuales son necesarios para poder llevar a cabo la codificación de algoritmos y programas
que nos permitan generar el contenido dinámico de las páginas Web.
7.1 FUNDAMENTOS DE PROGRAMACIÓN
La mayoría de los lenguajes de alto nivel tienen en común una serie de conceptos y elementos de programación
que permiten entender cómo funcionan a grandes rasgos los programas desarrollados con ellos.
7.1.1 VARIABLE
Una variable es el elemento de programación más básico que podemos encontrar dentro de un programa
informático, cuya misión principal es almacenar los datos que utilizarán los algoritmos de un programa para realizar
una determinada tarea. Este elemento de programación debe su nombre a que los datos contenidos en éstas son
volátiles, lo cual quiere decir que cambian a consecuencia de las operaciones que se llevan a cabo en los algoritmos
de estos programas.
Desde un punto de vista técnico, una variable es un nombre simbólico (especificado en lenguaje natural por el
programador), el cual guarda de forma temporal, y sólo durante la ejecución de un programa, la dirección de un espacio
de memoria en memoria principal, que puede ser usada por un programa para almacenar los datos que precisan
utilizar sus algoritmos.
105
© RAMA 7 n CREACIÓN DE CONTENIDO WEB DINÁMICO
Dependiendo del lenguaje de programación que se utilice, las variables pueden tener un tipo de datos o no.
El tipo de dato de una variable hace referencia a la cantidad de espacio en memoria principal que requerirá una
variable para almacenar los datos que usará durante la ejecución de un determinado programa.
Los lenguajes de programación actuales se pueden clasificar en dos categorías, sobre la base del tipado de sus
variables. Por un lado, existen los lenguajes de programación con tipado dinámico, cuyas variables no precisan
definir en su declaración el tipo de datos que contendrán, dado que dicho tipo se inferirá de forma automática en
tiempo de ejecución por el intérprete que las procesa. Este tipo de lenguajes suelen ser lenguajes interpretados: no
requieren ser compilados para ser ejecutados, como es el caso del lenguaje de programación de lado del servidor PHP
o el lenguaje del lado del cliente JavaScript.
Por otro lado, existen los lenguajes de programación de tipado estático o fuertemente tipados, los cuales
requieren durante la declaración de sus variables definir el tipo de datos que utilizarán. Este tipo de lenguajes suelen
ser compilados: sus programas deben ser compilados (traducidos a lenguaje máquina) antes de poder ser ejecutados
en el procesador, como en el caso de los lenguajes de lado del servidor Java o C#.
Un ejemplo de variable con tipado dinámico es el siguiente, en lenguaje PHP:
$dni = “12345678-A”;
Como se puede observar, para declarar una variable con tipado dinámico, basta con especificar el nombre de la
variable, seguido opcionalmente del valor. Por otro lado, en los lenguajes de programación con tipado estático, como
es el caso de Java, es obligatorio definir siempre el tipo de dato de una variable, como es el caso del siguiente ejemplo:
String dni = “12345678-A”;
Dentro de los lenguajes de alto nivel podemos encontrar un conjunto de tipos de datos clasificables en dos
categorías, según su complejidad: los tipos primitivos y los tipos complejos.
Los tipos primitivos o elementales son los más básicos que se pueden encontrar en cualquier lenguaje de
programación con tipado estático, caracterizándose por contener un único dato como valor. Según el lenguaje de
programación utilizado, pueden encontrarse tipos con signo o signed (sus valores pueden ser negativos) o sin signo
o unsigned (cuyos valores sólo pueden ser positivos). En la siguiente tabla se resume una lista de los tipos primitivos
más habituales:
Tipo Tamaño (Bits) Valores
Boolean 1 true o false
Char 16 0 a 232-1
Byte 8 -27 a 27-1
Unsigned Byte 8 0 a 28-1
Short 16 -215 a 215-1
Unsigned Short 16 0 a 232-1
Int 32 -231 a 231-1
Unsigned Int 32 0 a 232
Long 64 -263 a 263-1
Unsigned Long 64 0 a 264
Float 32 1,5x10-45 a 1,5x1038
Double 64 1,5x10-324 a 1,5x10308
106
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Algunos ejemplos de variables con tipos primitivos son los siguientes, en lenguaje PHP:
$inicialNombre = ‘P’; // Ejemplo de carácter o char;
$precioLeche = 0,70; // Ejemplo de número en coma flotante o float
$estaArrancadoCoche = false; // Ejemplo de booleano o boolean
$numeroDeAlumnos = 25; // Ejemplo de entero o int;
$temperatura = -5; // Ejemplo de entero o int;
Por otro lado, existen los tipos complejos o estructurados, que pueden contener varios valores de un mismo tipo
dentro de una única variable. Este tipo de datos suele definirse generalmente con un tamaño fijo (aunque en lenguajes
de tipado dinámico suele ser variable), es decir, con un espacio para un determinado número de valores cuando se lleva
a cabo la declaración de la variable. Este tipo de datos suele utilizarse frecuentemente para definir vectores (o arrays
unidimensionales), matrices (arrays multidimensionales) y cadenas de caracteres (o strings).
Los array’s unidimensionales son un tipo de estructura de datos compleja y lineal, la cual permite almacenar
dentro de una única variable un número fijo de valores o datos indexados. Una estructura de datos indexada es aquella
que permite acceder a los valores contenidos en ella a través de un índice (un número positivo), el cual devuelve en
combinación con la estructura un determinado valor. Un ejemplo de array unidimensional en Java es el siguiente:
int arrayEnteros = new int[10];
En el ejemplo anterior, se define un vector de enteros en la variable arrayEnteros, la cual permite almacenar
hasta 10 valores o datos enteros.
Otra estructura más compleja que la anterior son los array’s multidimensionales. Esta estructura de datos
suele utilizarse frecuentemente para almacenar tablas de datos, formados por filas y columnas de valores. En el
siguiente ejemplo se puede observar la declaración de una matriz de enteros:
int arrayEnterosMultidimensional[] = new int[10][5];
Por último, otra de las estructuras de datos que también se considera compleja son las cadenas de caracteres
o Strings. Las cadenas de caracteres son un tipo de datos que pueden contener como valor una cadena de caracteres
o array de caracteres. Al igual que los arrays, esta estructura también es indexada, por lo que podrá accederse por
medio de un índice. Un ejemplo en Java es el siguiente:
String variableCadena = “Esto es una cadena de ejemplo”;
7.1.2 CONSTANTES
Una constante es un tipo especial de variable cuyo valor una vez definido es inmutable, es decir, es invariante,
no cambia durante toda la ejecución del programa que la declara. Las constantes se utilizan frecuentemente para
almacenar datos que no suelen cambiar con el tiempo, como, por ejemplo, los minutos que tiene una hora. Un ejemplo
en Java es el que se muestra a continuación:
static final int MINUTOS_HORA = 60;
7.1.3 CONTROL DE FLUJO
Generalmente, los programas informáticos se componen de un conjunto de instrucciones, las cuales se ejecutan en
orden secuencial o, lo que es lo mismo, en orden consecutivo; se ejecutan una tras otra, hasta finalizar la ejecución
de todas las instrucciones que los componen.
107
© RAMA 7 n CREACIÓN DE CONTENIDO WEB DINÁMICO
Los programas siempre constan de un punto de entrada o inicial, donde empiezan a ejecutar instrucciones, y
también presentan un punto de salida o final, que supone la última instrucción que se va a ejecutar o el fin del
programa. Entre ambos puntos, se encuentra el flujo de instrucciones de un programa. Los lenguajes de programación
de alto nivel proveen un conjunto de sentenciasde control que permiten controlar por dónde transcurre el flujo de
ejecución de un programa en respuesta a las diferentes situaciones que se pueden producir dentro del mismo. Estas
sentencias de control se clasifican en dos tipos, según la función que realizan, encontrando entre ellas las sentencias
de control condicionales y los bucles.
Los condicionales son un conjunto de instrucciones que permiten analizar y evaluar distintas situaciones que
tienen lugar dentro de un flujo de ejecución de un programa, teniendo en cuenta el contexto de ejecución en el que
se encuentra. Según se cumplan o no las condiciones impuestas por el programador en las sentencias de control
condicional, éstos pueden determinar en tiempo de ejecución qué flujo de instrucciones se ajusta mejor a la situación
a la cual se enfrenta el programa.
Las sentencias de control condicional se componen habitualmente de una o más condiciones de tipo booleano (true/
false), las cuales, si se evalúan todas ellas a true o verdadero en ejecución, dan paso a la ejecución de un determinado
bloque de instrucciones asociado al conjunto de condiciones.
Dentro de las sentencias de control condicional, se pueden distinguir varios tipos sobre la base del número de
alternativas o ramas de ejecución que puedan dar lugar o ejecutar. En este sentido tenemos:
n Condicionales de una sola rama o alternativa simple: este tipo de sentencias evalúan una expresión
lógica (compuesta por una o varias condiciones), que si se evalúan a true, ejecutan el bloque de instrucciones
asociado. Un ejemplo de este tipo de sentencia condicional en pseudocódigo sería el siguiente:
si <expresión_lógica_es_cierta> entonces
<ejecutar_instrucción_1>
<…>
<ejecutar_instrucción_N>
fin_si
Un ejemplo en Java de este tipo de condicional sería el siguiente, en el que se simula el funcionamiento de un
termostato, el cual activa el aire acondicionado de una sala si la temperatura supera los 25 grados Celsius.
static final int TEMPERATURA_MAX = 25;

int temperaturaActual = medirTemperatura();

if (temperaturaActual > TEMPERATURA_MAX)
{
encenderAireAcondicionado();
}
En programación es habitual diseñar primero cómo se va a abordar la creación de un algoritmo previo a
su codificación, por ello, existen diferentes herramientas, como los diagramas de flujo y los lenguajes de
pseudocódigo, que permiten diseñarlos de forma esquemática en un primer paso. Por ejemplo, para representar
la sentencia de control anterior, se puede hacer uso del siguiente diagrama y su pseudocódigo:
108
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Figura 7.1. Diagrama de pseudocódigo: condiciones de una sola rama
n Condicionales de doble rama o alternativa doble: esta estructura de control condicional difiere de la
anterior en que posee dos bloques de instrucciones, que se ejecutarán según el resultado de la evaluación de la
expresión lógica. Si se evalúa a verdadero, se ejecutarán las instrucciones que contienen la terminación ramaA;
y si se evalúa a falso, las instrucciones que contienen la terminación ramaB. En pseudocódigo la forma genérica
de definir esta estructura de control sería la siguiente:
Si <expresión_logica_es_cierta> entonces
<ejecutar_instrucción_1_rama_A>
<…>
<ejecutar_instrucción_N_rama_A>
Sino
<ejecutar_instrucción_1_rama_B>
<…>
<ejecutar_instrucción_N_rama_B>
fin_si
Un ejemplo en Java, siguiendo el caso propuesto anteriormente, sería el siguiente: tenemos un termostato que
activa el aire acondicionado de una sala si la temperatura es superior a los 25 grados centígrados y lo apaga si
la temperatura es inferior a 25. El ejemplo de código sería el siguiente:
static final int TEMPERATURA_MÁXIMA = 25;
int temperaturaActual = medirTemperatura();
if (temperaturaActual > TEMPERATURA_MAX)
{
encenderAireAcondicionado();
}
else
{
apagarAireAcondicionado();
}
109
© RAMA 7 n CREACIÓN DE CONTENIDO WEB DINÁMICO
El diagrama del ejemplo propuesto sería el siguiente:
Figura 7.2. Diagrama de pseudocódigo: condiciones de dos ramas
n Condicionales de N ramas o N alternativas: este tipo de condicionales engloba a los anteriores, permitiendo
bifurcar el código en N bloques de instrucciones distintos, según N grupos de condiciones que imponga el
programador en la estructura de control condicional.
static final int TEMPERATURA_MAX = 25, TEMPERATURA_MIN = 20;
int temperaturaActual = medirTemperatura();
if (temperaturaActual > TEMPERATURA_MAX)
{
encenderAireAcondicionado();
}
else if (temperaturaActual < TEMPERATURA_MAX AND
temperaturaActual > TEMPERATURA_MIN)
{
regularAireAcondicionado();
}
else
{
apagarAireAcondicionado();
}
110
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
El diagrama del ejemplo propuesto sería el siguiente:
Figura 7.3. Diagrama de pseudocódigo: condiciones de n ramas
En los flujos de control también existen, por otra parte, los denominados bucles: un tipo de estructura de control
que permite repetir de forma determinada o indeterminada un bloque de instrucciones, con el fin de resolver una tarea
repetitiva. Dentro de este tipo de estructuras de control, podemos encontrar dos tipos, según el número de iteraciones
que realicen:
n Bucles de repetición finita. Este tipo de bucles ejecuta un bloque de instrucciones un número determinado
de veces. Generalmente, en los lenguajes de programación reciben el nombre de bucles for, y se caracterizan
por permitir definir en su sentencia cuántas veces se desea ejecutar un determinado bloque de instrucciones.
Un ejemplo genérico sería el siguiente:
repetir desde <valor_inicial> hasta <valor_final>
<bloque_de_instrucciones_a_ejecutar>
fin_repetir
Un ejemplo en Java sería la suma de números del 1 al 100. El código sería similar al siguiente:
int cuenta = 0;
for(int contador=1; contador <= 100; contador++)
{
cuenta = cuenta + contador;
}
111
© RAMA 7 n CREACIÓN DE CONTENIDO WEB DINÁMICO
La forma de representar en diagrama este tipo de sentencias se realizaría así:
Figura 7.4. Diagrama de pseudocódigo: bucles de repetición finita
n Bucles de repetición infinita. Este tipo de bucles ejecuta un bloque de instrucciones un número indeterminado
de veces, hasta que una condición booleana definida en sus instrucciones se evalúa a false, o hasta que una de
las instrucciones de su bloque provoca su finalización. Este tipo de bucles recibe el nombre de bucles while
o bucles do…while en los lenguajes de programación más habituales. De este tipo de bucles existen dos
variantes: una que se ejecuta 0 o más veces, conocida por while, y otra que se ejecucta 1 o más veces, conocida
como do…while. Un ejemplo genérico de código de un while sería el siguiente:
repetir mientras <condición_booleana_sea_cierta> hacer
<bloque_de_instrucciones_a_ejecutar>
fin_repetir
Mientras que el código de un bucle do…while sería el siguiente:
repetir
<bloque_de_instrucciones_a_ejecutar>
mientras <condición_booleana_sea_cierta> fin_repetir
Un ejemplo en Java de este tipo de bucles, la suma de números del 1 al 100:
int cuenta = 0;
int contador = 1;
while(contador <=100)
{
cuenta = cuenta + contador;
contador = contador +1;
}
112
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
El diagrama para este ejemplo sería el siguiente:
Figura 7.5. Diagrama de pseudocódigo: bucles de repetición infinita
Un ejemplo en Java del bucle do…until haciendo la misma suma sería:
int cuenta = 0;
int contador = 1;
do
{
cuenta = cuenta + contador;
contador = contador + 1;
} until (contador <= 100);
7.1.4 SUBPROGRAMAS. PROCEDIMIENTOS Y FUNCIONES
Cuando los programas adquieren mayor complejidad y tamaño (en líneas de código), se vuelve imprescindible
disponer de alguna herramienta o mecanismo de programación que permita agrupar bloques de instrucciones
por funcionalidad, posibilitando a su vez reutilizar el código empaquetado con el fin de evitar repetir bloques de
instrucciones iguales en varios puntosdel código fuente.
Los lenguajes de programación cuentan habitualmente con subprogramas, un mecanismo de programación que
permite agrupar (o empaquetar) bloques de instrucciones con una determinada funcionalidad dentro de funciones
o procedimientos. Estos subprogramas pueden ser, una vez creados, invocados desde cualquier punto del código
fuente, permitiendo al programador reutilizar el código contenido en ellos.
Las funciones y procedimientos son dos elementos de programación que permiten al programador estructurar
o modular el código de un programa en bloques de instrucciones, facilitando las tareas de diseño, gestión del código y
corrección de errores.
Los subprogramas pueden estar formando parte de un único programa o bien encontrarse dentro de librerías
(ficheros de funciones y/o procedimientos), agrupadas o categorizadas según el tipo de tarea o funcionalidad que
realizan.
113
© RAMA 7 n CREACIÓN DE CONTENIDO WEB DINÁMICO
Los subprogramas se definen a través de un nombre, seguido de 0 o más parámetros, los cuales permiten pasar
durante la invocación de los subprogramas datos a las instrucciones que contienen con el fin de que puedan ser
utilizados o procesados por el bloque de instrucciones de su interior. La forma genérica de un subprograma es la
siguiente:
subprograma <nombre_procedimiento> ( [<param1>, [<paramN>]] ) hacer
<bloque_instrucciones_a_ejecutar>
[ devolver <datos> ] // si es una función
fin_subprograma
La principal diferencia que existe entre un procedimiento y una función reside en si el subprograma invocado
devuelve o no un valor después de ser invocado. Los procedimientos se caracterizan por no devolver ningún valor
después de ser llamados, mientras que las funciones siempre devuelven un valor. El tipo que devuelven las funciones
puede ser primitivo o complejo, según el lenguaje de programación utilizado.
Las instrucciones contenidas dentro de una función y/o procedimiento se invocan haciendo una llamada al nombre
de función o procedimiento que se desea ejecutar, pasándole, si tiene, los argumentos que requieran. Habitualmente,
para realizar una llamada es suficiente con escribir el nombre del procedimiento o función, seguido de 0 a N
argumentos entre paréntesis. El código genérico de una llamada a un procedimiento es el siguiente:
<nombre_procedimiento> ( [argumento1 [, argumentoN] ] );
En el caso de las funciones, dado que devuelven un valor a partir de su ejecución, siempre se suele almacenar el
valor retornado en una variable, la cual tiene por tipo el devuelto por la función:
<tipo_retorno> <nombre_variable> = <nombre_función> ( [argumento1 [, argumentoN] ] );
Un ejemplo de función en Java es la suma de valores de 1 a 100 realizada:
public int sumaDe1a100()
{
int cuenta = 0;
for(int contador=1; contador <= 100; contador++)
{
cuenta = cuenta + contador;
}
return cuenta;
}
Un ejemplo de procedimiento en Java es la inicialización de un contador declarado como variable global:
public inicializarContador()
{
contador = 0;
}
114
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
7.1.5 RECURSIVIDAD
La recursividad es una potente y compleja herramienta de programación que permite transformar algoritmos
iterativos en algoritmos recursivos mediante una llamada a una función recursiva.
Una función recursiva es aquella que se llama a sí misma N veces, hasta alcanzar la solución a un determinado
problema planteado. Dada la complejidad de esta técnica, no hay nada mejor que empezar con un ejemplo para aclarar
conceptos y entender cómo funciona.
Ejemplo inicial: crear un programa que realiza una cuenta atrás para lanzar al espacio un cohete. Esta cuenta
atrás es de 10 segundos, por lo que una solución iterativa (en pseudocódigo) sería la siguiente:
for (cuenta_atrás = 10 ; cuenta_atrás >= 0 ; cuenta_atrás--)
{
// Mostramos un mensaje con los segundos que quedan
mostrar_mensaje_por_pantalla(“Quedan “ + cuenta_atrás + “ segundos”);
// Esperamos un segundo
esperar(1);
// Si la cuenta atrás llega a 0, entonces lanzamos el cohete.
si (cuenta_atrás == 0) entonces
lanzar_cohete();
fin_si
}
En el algoritmo anterior hemos utilizado un bucle for, cuyo objetivo es decrementar en 1 segundo la cuenta atrás
hasta llegar a 0. Cuando el bucle alcanza el segundo 0, la sentencia condicional del mismo se encargará de detectar
dicho estado y lanzar el cohete espacial a través de la llamada a la función lanzar_cohete().
Ahora viene la parte difícil: convertir el algoritmo anterior en un algoritmo recursivo. Los algoritmos recursivos
se basan en la utilización de sus argumentos para detectar el fin de la ejecución de una función recursiva. El
principal problema de la programación recursiva es que si no se determina de forma cuidadosa la condición de fin (o
terminación) de la función recursiva, el algoritmo se ejecutará de forma infinita, dando lugar a que el programa se
cuelgue y, por tanto, se tenga que provocar su finalización de forma no programada (manualmente).
Para construir una función recursiva se requiere como primer paso poder descomponer un problema iterativo en
pasos que puedan ser llevados a cabo de forma repetitiva y, por otro lado, crear condiciones de salida que den fin a la
ejecución de la función recursiva.
En nuestro problema, el paso que se realiza de forma repetitiva es el decremento en un segundo de la cuenta
atrás, así como mostrar un mensaje por pantalla. Por otro lado, la condición de terminación de nuestro problema es la
detección de haber alcanzado el segundo 0.
Utilizando como técnica de programación la recursividad, el primer problema que hemos de resolver es llevar a
cabo el decremento del contador. Como se ha comentado antes, es de vital importancia usar parámetros (argumentos)
en las funciones recursivas para realizar la tarea. Por ello, en nuestro problema haremos uso de una variable cuenta_
atras que nos sirva de contador, y que decrementaremos en la invocación de cada llamada recursiva, partiendo
inicialmente del valor 10. Ejemplo parcial de la función recursiva:
115
© RAMA 7 n CREACIÓN DE CONTENIDO WEB DINÁMICO
función lanzar_cohete_recursivo(entero cuenta_atrás)
// Mostrar mensaje por pantalla y esperar 1 segundo
mostrar_mensaje_por_pantalla(“Quedan “ + cuenta_atrás + “ segundos”);
esperar(1);
// Llamada recursiva a la propia función, restando 1 segundo
lanzar_cohete_recursivo(cuenta_atrás - 1);
fin_función
Como se puede observar en el fragmento de código anterior, cuando decimos que una función se llama a sí
misma es literalmente lo que sucede. En el ejemplo anterior, la función lanzar_cohete() se llama a sí misma N
veces, cambiando únicamente entre llamadas el parámetro cuenta_atrás, al cual se le resta 1 segundo, con lo que
se decrementa en una unidad el contador general. El fragmento de código anterior resuelve la parte iterativa del
problema, pero aún queda pendiente por codificar el código de la sentencia condicional que da fin al algoritmo y evita
su entrada en un bucle infinito.
Como se ha comentado en el enunciado del problema, el cohete ha de lanzarse cuando la cuenta atrás llegue a
0. Por tanto, tendremos que introducir una condición de fin que detecte dicha situación. Para ello, modificaremos el
fragmento de código anterior para incluir esta condición de fin:
función lanzar_cohete_recursivo(entero cuenta_atrás)
si (cuenta_atrás == 0) entonces
lanzar_cohete()
si_no
// Esperamos 1 segundo
// Mostrar mensaje por pantalla y esperar 1 segundo
mostrar_mensaje_por_pantalla(“Quedan “ + cuenta_atrás +
“ segundos”);
esperar(1);
// Llamada recursiva a la propia función, restando el parámetro
// cuenta_atrás 1 segundo
lanzar_cohete_recursivo (cuenta_atrás - 1);
fin_si
fin_función
Para poder invocar esta función recursiva se tendrá que realizar una primera llamada a la misma, que
desencadenará la cuenta atrás, como se puede observar en el siguiente fragmento de código:
entero cuenta_atrás = 10;
lanzar_cohete_recursivo(cuenta_atrás);
Enel código anterior se puede observar que se ha inicializado una variable entera con los segundos de espera, y
se ha pasado como argumento de la función recursiva lanzar_cohete_recursivo() dicho contador cuenta_atrás. El
resultado de la ejecución de esta función sería:
116
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Las recomendaciones para utilizar la técnica de la recursividad son:
n Divide y vencerás: todo problema que pueda resolverse de forma recursiva ha de ser descomponible en varios
fragmentos iterativos cuya ejecución lleve a la resolución del mismo.
n Siempre ha de existir una o varias condiciones de fin, ya que, de no existir, el problema se convertiría en un
problema infinito sin solución.
7.1.6 CLASES Y OBJETOS
En programación —en particular, en la metodología de la programación orientada a objetos— una clase es una
estructura de datos compleja. Ésta representa una entidad lógica (cosa, concepto o entidad física tangible o intangible)
que se encuentra dentro del universo de datos que posee un determinado programa informático.
En términos de programación, una clase es una estructura de datos que permite recoger dentro de su propia
estructura, y como parte de un programa mayor, los atributos (variables o constantes) y comportamiento (funciones
y procedimientos) de una determinada entidad, los cuales presentan entre sí cierta relación semántica. Los atributos
permiten recoger en ellos los datos de una determinada entidad, que en términos de programación representarían las
variables y constantes. Por otro lado, el comportamiento de una clase representa las funciones y procedimientos que
actúan sobre los datos definidos en los atributos de la clase y los cuales permiten interactuar con el resto de objetos
de un programa.
La forma genérica de definir este tipo de estructura de datos se lleva a cabo de la siguiente forma:
clase nombre_clase
// Definición de atributos (datos o propiedades)
tipo_atributo nombre_atributo_1;
tipo_atributo nombre_atributo_2;
…
tipo_atributo nombre_atributo_N;
// Definición de comportamiento (funciones y procedimientos)

tipo_función [valorDevuelto] nombre_función_1 ( [ param1, [paramN]] )

implementación _función_1;
fin_función
…
tipo_funcion [valorDevuelto] nombre_funcion_N ( [ param1, [paramN]] )

implementacion _funcion_N;
fin_funcion

fin_clase
117
© RAMA 7 n CREACIÓN DE CONTENIDO WEB DINÁMICO
Pongamos, por ejemplo, que deseamos recoger los datos y comportamiento de una entidad Persona. Los datos
de esta entidad serían aquéllos correspondientes al nombre, apellidos, edad, altura, peso, etc. Por otro lado, el
comportamiento (o acciones) de esta entidad Persona sería saludar, andar, correr, nadar, comer, dormir, etc. Una
implementación de la clase Persona en Java sería la siguiente:
class Persona
{
protected String nombre;
protected String apellidos,
protected int edad;
protected float altura;
protected int peso;
protected String sexo;
public void saludar()
{
System.out.println(“Hola!, me llamo ”+nombre+ “ “ + apellidos);
}
}
La definición de clases dentro de un programa informático permite crear a partir de su definición objetos o
instancias de clase. Los objetos son ejemplares particulares de una entidad representada por la clase que lo define.
Por ejemplo, para la definición de la clase Persona, una instancia u objeto de dicha clase sería, por ejemplo, un objeto
que represente a Javier Castillo y otro a Ramón Gutiérrez. Los objetos se diferencian entre sí por los datos que
contienen. Un ejemplo de instancia de la clase Persona en Java sería la siguiente:
Persona objPersona = new Persona();
La colaboración e intercambio de datos entre los objetos que componen un determinado programa orientado a
objetos permite llevar a cabo una tarea programada para tal efecto. Esta nueva forma de programar supone un cambio
de mentalidad respecto a la programación tradicional, permitiendo llevar a cabo un desarrollo de programas más
modulado y organizado que los basados en la programación estructurada (sustentada en subprogramas).
De hecho, una de las mejoras importantes que aporta esta metodología es su capacidad para permitir crear
jerarquías de objetos, posibilitando heredar los atributos y el comportamiento de las clases padres hacia las clases
hijas. A esta técnica de programación se la denomina herencia, y permite en gran medida reutilizar el código escrito
dentro un mismo programa y también el de otros programas que implementen las mismas entidades o clases. Un
ejemplo de esta técnica es heredar de la clase Persona, definida anteriormente, la clase Hombre y Mujer. Un ejemplo
en Java sería el siguiente:
class Hombre extends Persona
{
public Hombre()
{
this.sexo = “Hombre”;
}
}
class Mujer extends Persona
{
118
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
public Mujer()
{
this.sexo = “Mujer”;
}
}
En los ejemplos anteriores, se hace uso de la herencia a través de extender o heredar las clases Hombre y Mujer
de la clase Persona. Estas clases hijas heredan los atributos y comportamiento de la clase padre, y a su vez pueden
declarar nuevos atributos y comportamientos, así como redefinir el valor de los atributos de la clase padre, como
sucede con el sexo en el ejemplo propuesto. En el ejemplo anterior, cada clase hija (Hombre y Mujer) inicializa el
atributo sexo con el género que le corresponde.
7.1.7 PRINCIPALES METODOLOGÍAS DE PROGRAMACIÓN
En el desarrollo de aplicaciones Web se utiliza generalmente una metodología de desarrollo, que es seguida
durante el desarrollo completo de un determinado proyecto Web. Estas metodologías definen una filosofía o forma de
llevar a cabo los procesos de desarrollo software, proveyendo modelos y métodos que permitan a los desarrolladores
llevar un orden en la realización de un proyecto.
Las metodologías se utilizan como guion para crear un plan de proyecto que permita la construcción de un
determinado software. Estas metodologías subdividen generalmente los proyectos por fases, en cada una de las cuales
el objetivo es realizar un pequeño conjunto de actividades que den forma poco a poco al proyecto software.
Las metodologías suelen estar documentadas, y en general se basan en estándares y métodos probados que ayudan
a generar software fiable en tiempo. Éstas permiten planificar el desarrollo, estableciendo una organización general
del proyecto, así como los tiempos que permiten entregar el software en el plazo previsto al cliente.
Entre las principales metodologías de programación que podemos encontrar, cabe destacar las siguientes:
n Modelo en cascada: esta metodología descompone el desarrollo global de un proyecto software en cinco
fases únicas secuenciales, a través de las cuales se diseña y construye un proyecto de principio a fin. Esta
metodología define cinco fases, entre las que podemos encontrar las siguientes:
– Análisis: se capturan los requisitos del cliente, es decir, las necesidades que debe cubrir el software para
el cliente.
– Diseño: los desarrolladores de software, sobre la base de los requisitos, diseñan y construyen sobre el papel
una solución software a medida en forma de diagramas UML organigramas y/o pseudocódigo.
– Implementación: a partir del diseño, se crea una implementación del código del software.
– Verificación: fase de pruebas en la que se comprueba que el código implementado funciona de acuerdo con
la especificación realizada.
– Mantenimiento: fase de corrección de errores.
Este modelo define una metodología de construcción de software muy básica, que no permite introducir mejoras
ni cambios durante el ciclo de desarrollo, lo que lleva a desarrollar software defectuoso en muchas ocasiones,
debido a una mala especificación o diseño de la misma.
n Modelo iterativo-incremental. Esta metodología supone una evolución clara respecto del modelo en cascada,
dado que en ésta subdivide la construcción de un proyecto en pequeños bloques o componentesde funcionalidad,
a los cuales se les aplica una metodología en cascada para llevar a cabo su desarrollo.
119
© RAMA 7 n CREACIÓN DE CONTENIDO WEB DINÁMICO
Esta subdivisión del proyecto aplica la metodología de guerra romana del «divide y vencerás», desarrollándose, en
primer lugar, los módulos o bloques software de mayor importancia o prioridad para el cliente, y descomponiendo
los problemas más complejos en más pequeños y fáciles de desarrollar, lo que simplifica el desarrollo general
de un proyecto, así como favorece su mantenibilidad y verificación.
Se la denomina a su vez como incremental, dado que, una vez que se desarrollan los módulos base, éstos se
amplían o modifican su funcionalidad, hasta alcanzar la funcionalidad deseada o requerida por el cliente,
permitiendo incluir pequeños cambios o modificaciones durante cada una de las iteraciones que se llevan a cabo
sobre cada módulo del proyecto. La priorización de módulos del proyecto permite desarrollar de forma temprana
prototipos que puedan ser probados por el propio cliente, lo que posibilita obtener una retroalimentación o
feedback a tiempo del mismo, para poder introducir mejoras o cambios en el proyecto con el fin de adaptarlo a
las necesidades particulares del cliente.
7.2 LENGUAJES PARA EL DESARROLLO DE CONTENIDO DINÁMICO
Las siglas DHTML (en inglés de Dynamic HTML) son las que engloban en el mundo del desarrollo Web al conjunto
de tecnologías y herramientas que permiten dar funcionalidad e interactividad a las páginas Web que visualizamos
diariamente en nuestros navegadores Web.
Para lograr dar vida a las páginas Web, los desarrolladores Web han de ser capaces de combinar de forma correcta
las tecnologías particulares de este mundo Web, como el lenguaje de etiquetas de marcado HTML, empleado para
crear las interfaces de usuario; un lenguaje de scripting, como puede ser JavaScript, para el control de la funcionalidad
dinámica de los contenidos de las mismas; y otras, como CSS, para configurar el diseño y apariencia visual de un sitio
Web.
Los lenguajes de guion, conocidos generalmente como lenguajes de lado del cliente o lenguajes de scripting,
son lenguajes de programación que permiten codificar programas (conocidos como scripts), que al ejecutarse dentro
de un navegador Web permiten dar vida a los contenidos de un documento HTML, así como procesar datos que éste
introduce en el mismo.
Estos lenguajes de programación permiten vía código acceder y manipular los objetos (etiquetas HTML) que
conforman una página Web (documento HTML), posibilitando alterar las propiedades de cada uno de ellos con el
objetivo de dar dinamismo a la página que visualiza el navegador. Los scripts que realizan estas tareas se encuentran
de forma común dentro del propio código fuente de la página Web.
Los lenguajes de guion permiten a los desarrolladores Web trabajar con cada etiqueta HTML como si de un objeto
se tratase, pudiendo modificar sus propiedades y contenido, así como trabajar con sus eventos para lograr llevar a
cabo una determinada tarea. Los scripts suelen encargarse generalmente de manejar los eventos que produce un
usuario sobre los distintos elementos que componen una página Web HTML, permitiendo de esta manera responder
dinámicamente a la interacción del usuario contra la página Web. La forma habitual de manipular las etiquetas que
componen un documento HTML requiere utilizar el modelo de objetos DOM, presente en todos los documentos HTML,
el cual permite acceder y manipular dichos elementos. Un gráfico general de este modelo es el siguiente:
120
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
WINDOW
History Location
DOCUMENT
LINK ANCHOR
FORM
TEXT BOX
RADIO
CHECKBOX
TEXTAREA
PASSWORDBUTTON
RESET SUBMIT
SELECT
OPTIONS
Figura 7.6. Modelo de objetos de documentos DHTML (DOM)
El modelo de objetos DOM es el sistema que se utiliza de forma subyacente dentro de los lenguajes de script, como
es el caso de JavaScript o VBScript (VisualBasic Script) para manipular los elementos de los documentos HTML.
JavaScript fue desarrollado inicialmente por Netscape para sus productos Web, como el propio navegador Netscape.
Más tarde, dicho lenguaje se convertiría en un estándar, que sería adoptado por el resto de fabricantes del sector. De
forma paralela, Microsoft desarrolló su lenguaje VBScript (siglas de Visual Basic Script), creando un lenguaje similar
que realizaba básicamente la misma función que JavaScript.
JavaScript se caracteriza por ser un lenguaje interpretado (no requiere de compilación previa para ser ejecutado
por el navegador), cuya sintaxis es orientada a objetos y muy parecida a la de otros lenguajes. como Java y C. Este
lenguaje presenta una curva de aprendizaje bastante rápida, dado su parecido a otros lenguajes, por lo que es fácil de
aprender por programadores que conozcan Java o C. A modo de ejemplo, presentamos el siguiente código fuente, en el
que se integra o embebe un pequeño código JavaScript, dentro de las etiquetas <script>, el cual se encarga de hacer
un pequeño Hola Mundo:
<HTML>
<head>
<title>El primer script</title>
<script type=”text/JavaScript“>
document.alert(“Hola Mundo”);
</script>
</head>
<body>
<p>Esta página contiene mi primer script</p>
</body>
</HTML>
121
© RAMA 7 n CREACIÓN DE CONTENIDO WEB DINÁMICO
JavaScript es uno de los lenguajes de script más utilizados y documentados de Internet, así como el lenguaje
que mayor compatibilidad ofrece con la mayoría de los navegadores Web del mercado, siendo por ello adoptado como
estándar por la mayor parte de los fabricantes de navegadores.
VBScript (Visual Basic Script) fue la respuesta de Microsoft a la aparición de JavaScript. VBScript es, al igual que
JavaScript, un lenguaje interpretado de lado del cliente, cuya sintaxis tiene su origen en el lenguaje de programación
Visual Basic. Aunque Microsoft quiso luchar por la supremacía de VBScript sobre JavaScript, la lucha entre ambos
lenguajes terminó siendo ganada por JavaScript, dado que los desarrolladores Web no estaban dispuestos a tener
que utilizar una tecnología sólo compatible con los navegadores Web Windows, como Internet Explorer, mientras que
JavaScript era compatible con el resto de navegadores Web del mercado, como Mozilla Firefox, Chrome, Opera, Safari,
etc. El avance VBScript ha seguido en paralelo a JavaScript, gracias a su aplicación en los lenguajes de script del
lado de servidor con la tecnología ASP (Active Server Pages), ya que VBScript es parte fundamental en la ejecución de
este entorno de desarrollo. En la actualidad, Microsoft ha tenido que sucumbir a JavaScript, convirtiéndose éste en el
estándar de facto. A continuación, se presenta un ejemplo de código fuente de VBScript:
<HTML>
<head>
<title>El primer script</title>
<script type=”text/vbscript”>
document.write(“Hola Mundo en VBScript”)
</script>
</head>
<body>
<p>Esta página contiene mi primer script</p>
</body>
</HTML>
7.2.1 APPLETS
Los applets son pequeños programas desarrollados con el lenguaje de programación Java, que pueden ser
ejecutados dentro de los navegadores Web. Su principal misión es la realización de tareas específicas en forma de
elemento embebido dentro de una página Web.
Este tipo de programas requieren ser compilados para ser ejecutados por el navegador, precisando que el equipo
cliente del usuario disponga entre sus programas (además del navegador Web) con una máquina virtual de Java (Java
Virtual Machine, JVM), la cual se encargará de interpretar el código fuente descargado como parte de la página Web
a la que accedemos.
Cuando se ejecuta un applet como parte de una página Web, lo que hace el navegador Web es interpretar el código
fuente (código intermedio del applet) del mismo. Este código intermedio (conocido como código bytecode), una vez
descargado, es interpretado por la máquina Virtual de Java (o JVM) del cliente.
En los proyectos Web, el uso de los applets seha destinado generalmente a la realización de tareas complejas (como,
por ejemplo, la generación de gráficas matemáticas), limitando el uso de JavaScript a pequeñas mejoras estéticas y al
procesamiento de datos de los formularios HTML.
Con el tiempo, la utilización de los applets se ha visto limitada sobre todo por problemas de rendimiento, dado
que su ejecución es menos eficiente que la ejecución de un control ActiveX equivalente y también por problemas
de incompatibilidad entre los distintos navegadores existentes, ya que cada uno requiere una implementación
personalizada de los applets para poder ejecutarse. Estos problemas han llevado con el tiempo a que los applets se
utilicen de forma muy puntual y, sobre todo, para tareas muy específicas, como la representación gráfica de funciones.
122
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
7.2.2 CONTROLES ACTIVEX
Otra tecnología Web que puede integrarse como parte de las aplicaciones Web es el uso de controles ActiveX. Los
controles ActiveX fueron presentados en 1996 por Microsoft, siendo construidos sobre los modelos COM (Component
Object Model) y OLE (Object Linking and Embedding) de Microsfot, tecnologías para el desarrollo de objetos
distribuidos. Los controles ActiveX son miniprogramas que trabajan dentro del navegador, los cuales han sido
compilados de manera previa.
Los controles ActiveX funcionan sólo en el navegador Internet Explorer, requiriendo por tanto contar con el sistema
operativo Windows en nuestro equipo para poder ejecutarlos. Dada su dependencia específica de plataforma, con el
sistema operativo Microsoft Windows su utilización ha quedado reducida a pequeñas aplicaciones Web, generalmente
para su uso en intranets. Los controles ActiveX puede ser desarrollados en cualquier lenguaje que soporte el desarrollo
de componentes COM, incluyendo lenguajes como C++, Visual Basic o lenguajes de la plataforma .Net, como C# o
VB.Net.
7.2.3 PLUG-INS ESPECÍFICOS DE NAVEGADORES WEB
Los plug-ins son componentes instalables (generalmente en forma de extensiones) de ciertos navegadores Web
que tienen como función cambiar, mejorar o alterar la forma normal de ejecución de un navegador, así como ampliar
su funcionalidad.
Ejemplos de plug-ins: los de Adobe Acrobat (que permite visualizar documentos PDF directamente en el navegador
Web); los plug-ins de Adobe Flash (que permiten ejecutar presentaciones Flash); u otros como los plug-ins de VLC
(que permiten reproducir vídeos y audios en un reproductor multimedia integrado dentro del propio navegador Web).
Los plug-ins se distribuyen generalmente de forma gratuita, y requieren ser instalados posteriormente a la
instalación del navegador, ya que están desarrollados por un fabricante de terceros. Éstos suelen encontrarse
disponibles por Internet en las páginas oficiales de los fabricantes que los desarrollan, aunque en las versiones más
recientes de los navegadores pueden encontrarse como parte de repositorios de extensiones o plug-ins de los mismos.
7.2.4 APLICACIONES WEB RIA
En una aplicación RIA (siglas en inglés de Rich Internet Application o, en español, Aplicación de Internet
Enriquecida) se mezclan las características típicas de una aplicación de escritorio junto con las características de las
aplicaciones Web, dando lugar a una aplicación Web híbrida que puede FALTA desde un navegador Web. En este tipo
de aplicaciones Web se suele requerir de unos complementos o máquinas virtuales específicas asociadas al navegador
Web que las visualiza para poder ejecutarse.
Estas aplicaciones tratan de mejorar la usabilidad y productividad del usuario final frente a una determinada
aplicación, tratando de no sobrecargar el servidor que las publica, dado que no producen una recarga continua de las
páginas Web.
En los entornos RIA, la carga de la página se produce una única vez, cargando todo lo necesario para ejecutar
la aplicación en una sola página. La comunicación con el servidor sólo tiene lugar cuando se necesitan transmitir
datos desde o hacia el servidor o base de datos que almacena los datos, dando lugar a aplicaciones muy eficientes en
términos de rendimiento.
Dentro de estos entornos destacan las tecnologías y frameworks de Adobe Flash, Adobe Flex, Microsoft Silverlight
y JavaFX, que dan soporte a la creación y desarrollo de aplicaciones RIA para los navegadores Web actuales del
mercado.
123
© RAMA 7 n CREACIÓN DE CONTENIDO WEB DINÁMICO
Entre sus principales ventajas están:
n No requieren de instalación para poder ser ejecutadas, aunque, dependiendo de la tecnología empleada, pueden
requerir, previo a su ejecución, disponer en el equipo cliente o navegador Web de complementos o máquinas
virtuales que permitan su ejecución.
n No es necesario actualizarlas, dado que al ser accedidas vía navegador Web éste carga la última versión
publicada en el servidor.
n Pueden ser utilizadas desde cualquier equipo, dado que requieren de un navegador Web para poder utilizarlas.
n Mejor rendimiento y usabilidad, dado que son más eficientes que una aplicación Web tradicional.
n Permiten acciones adicionales que un lenguaje como HTML5 no permite llevar a cabo.
7.3 TEST DE CONOCIMIENTOS
1Una función que se llama a sí misma N veces, hasta alcanzar la solución a un determinado problema planteado, se denomina:
a) Subprograma.
b) Función iterativa.
c) Función recursiva.
d) Función incremental.
2 Un tipo variable cuyo valor una vez definido es inmutable se denomina:
a) Bucle.
b) Clase.
c) Objeto.
d) Constante.
3 ¿Cuántos parámetros puede tener un subprograma?
a) 1 o más.
b) 0 o más.
c) 0 o 1.
d) Sólo 1.
4 Una clase representa:
a) Un ejemplar particular de una entidad representada por la estructura que lo define.
b) Un nombre simbólico que guarda información de forma temporal y sólo durante la ejecución de un programa.
c) Una entidad lógica que se encuentra dentro del universo de datos que posee un determinado programa
informático.
d) Un conjunto de sentencias de control que permiten controlar por dónde transcurre el flujo de ejecución de un
programa.
124
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
5 Una aplicación Web RIA es:
a) Un componente instalable que permite cambiar, mejorar o alterar la forma normal de ejecución de un
navegador, así como ampliar su funcionalidad.
b) Un pequeño programa desarrollado con el lenguaje de programación Java que puede ser ejecutado dentro de
los navegadores Web.
c) Es un miniprograma que trabaja únicamente dentro del navegador Internet Explorer y que ha sido compilado
de manera previa.
d) Una aplicación en la que se mezclan las características típicas de una aplicación de escritorio junto con las
características de las aplicaciones Web.
Lenguajes de guion
de uso general8
126
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
En el desarrollo de páginas Web, los desarrolladores suelen utilizar lenguajes de guion (también conocidos como
lenguajes de lado del cliente) para dar una apariencia de mayor dinamismo, vistosidad y usabilidad a las páginas Web.
Este tipo de lenguajes es frecuentemente utilizado para realizar diversas tareas, entre las que destacan la validación
de formularios, la carga dinámica de datos, la creación de animaciones y cambios en la apariencia visual, entre otros.
En la mayor parte de los desarrollos Web, se utiliza generalmente como lenguaje de lado del cliente el lenguaje
JavaScript, dado que es el más extendido entre la comunidad de desarrolladores, a que cuenta con un gran número
de librerías y frameworks multipropósito de código abierto y sobre todo, por ser el que mayor compatibilidad presenta
con la mayoría de los navegadores Web del mercado.
Este lenguaje no es el Java de Oracle, aunque su sintaxis presenta muchas similitudes con él. JavaScript se
caracteriza por ser un lenguaje interpretado (no precisa compilarse para ser ejecutado), posee tipado dinámico (no es
necesario declarar el tipo de las variables) y es un lenguaje orientado a objetos(aunque puede codificarse sin seguir
este estilo de programación concreto).
8.1 INTEGRACIÓN DE LENGUAJES DE GUION EN NAVEGADORES WEB
En la actualidad, la mayor parte de los navegadores Web integran como parte de su software un intérprete
JavaScript para la ejecución de scripts basados en este lenguaje. Entre los navegadores Web que poseen dicho
intérprete, destacan Mozilla Firefox, Google Chrome, Opera, Safari e Internet Explorer.
La forma de integrar JavaScript dentro de las páginas Web se puede realizar de diversas formas, según las
necesidades concretas del programador. Entre ellas, podemos encontrar las siguientes:
n Definir el código JavaScript como parte del <head> del documento HTML. Este caso suele ser el más
habitual. En éste, el desarrollador escribe dentro de las etiquetas <script></script> embebidas, como parte
del <head></head> del documento HTML, el código JavaScript que utilizará a posteriori desde los diferentes
elementos que componen el resto de la página Web. Un ejemplo de código es el siguiente:
<!DOCTYPE html>
<html>
<head>
<script type=”text/JavaScript”>
function Saluda()
{
alert(“Holaaa!!!, desde JavaScript”);
}
</script>
</head>
<body>
<input type=”button” onclick=”Saluda()” value=”Dime Hola”>
</body>
</html>
127
© RAMA 8 n LENGUAJES DE GUION DE USO GENERAL
El fragmento de código anterior se define dentro de las etiquetas <script></script>, una función JavaScript
con nombre Saluda(), cuyo código, al hacer clic el usuario sobre el botón definido en la etiqueta <input
type=”button”>, abrirá una ventana emergente en el navegador con un saludo.
n Embeber fragmentos de código JavaScript como etiquetas hijas del <body> del documento HTML.
Esta forma es muy útil cuando se desean crear nuevos elementos HTML de forma dinámica y embebida al
código HTML, como es el caso del siguiente ejemplo de código, en el que se crea de forma dinámica un elemento
HTML <h1>.
<!DOCTYPE html>
<html>
<body>
<script type=”text/JavaScript”>
document.write(“<h1>Título de mi página Web</h1>”);
</script>
</body>
</html>
n Referenciar código JavaScript almacenado en ficheros JavaScript (*.js), desde el <head> del
documento HTML. Cuando el código JavaScript abarca numerosas líneas de código, lo más recomendable es
almacenar dicho código de manera externa al propio documento HTML en forma de ficheros JavaScript (con
extensión *.js). Para ello es preciso incluir dentro del <head> del documento HTML una referencia al fichero
de código JavaScript, utilizando para ello una etiqueta <script></script> con el atributo src, apuntando
a la URL del archivo de código fuente JavaScript.
En el siguiente ejemplo crearemos un fichero de código JavaScript con nombre code.js para almacenar el
código de nuestra función Saluda(). El contenido de dicho fichero quedará de la siguiente forma:
function Saluda()
{
alert(“Holaaa!!!, desde JavaScript”);
}
Luego, desde la página HTML desde la que queramos referenciar el código JavaScript, tendremos que incluir
dentro del <head></head> del documento una etiqueta script que referencie al archivo de código JavaScript externo,
tal y como se muestra a continuación:
<!DOCTYPE html>
<html>
<head>
<script src=”code.js”></script>
</head>
<body>
<input type=”button” onclick=”Saluda()” value=”Dime Hola”>
</body>
</html>
128
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
8.2 ESTRUCTURA GENERAL DE UN PROGRAMA JAVASCRIPT
A continuación, daremos un breve repaso a la estructura general del lenguaje JavaScript, así como su sintaxis,
haciendo hincapié en las partes más importantes para dar al lector una visión general del mismo.
8.2.1 VARIABLES Y TIPOS DE DATOS
Las variables en JavaScript nos permiten almacenar datos de forma temporal, que se utilizarán a posteriori por
los algoritmos de nuestros scripts. Este lenguaje se caracteriza por ser interpretado con tipado dinámico de datos,
lo que significa que la declaración de variables no requiere especificar su tipo concreto de datos. Esta asignación se
lleva a cabo de forma automática por el intérprete de JavaScript, que es el encargado de inferir sobre la base del valor
de las mismas, el tipo de datos que utilizará durante la ejecución del propio script.
Es importante destacar que, aunque no se puedan definir tipos de datos en sus variables, el lenguaje JavaScript
sí posee tipos, pudiendo distinguirse los siguientes:
Tipo Explicación Ejemplo
Boolean Booleano true o false
Char Carácter ‘a’, ‘b’, ‘c’
Integer Entero -100, 0, 3000,
Real o Decimal Real 1,44, -7,55
String Cadena de caracteres “Ejemplo de string”
Object Objeto {“usuario”: “pepe”}
La definición de variables en JavaScript requiere utilizar la palabra reservada var previo a la declaración del
nombre de la variable. Éstas pueden estar inicializadas con un valor o no. A continuación, se muestra un ejemplo en
el que se declaran una serie de variables:
var mivariable = 1;
var coor_x = 100, coor_y = 300;
var precioBillete = 32.50;

var nombreUsuario = “José García”;

Figura 8.8. Estructura de árbol de una página HTML

El navegador Web es el encargado de procesar y transformar automáticamente el
código fuente de una página Web en una estructura de datos procesable a nivel de
código JavaScript. El DOM provee por cada elemento HTML, un objeto, denominado
nodo, que posee una serie de propiedades y métodos que permiten al programador
manipular su estructura. Dichas propiedades y métodos permiten, por ejemplo,
navegar entre los distintos nodos, obtener sus elementos hijos y padre, modificar los
atributos de los elementos Web, etc.
6.6.2.1 NAVEGACIÓN POR LAS PROPIEDADES DE UN DOCUMENTO
JavaScript provee a través de su API de objetos acceso al DOM desde cualquier
script. En general, se suele hacer uso del objeto document, así como sus métodos
getElementByName() y getElementById(), para acceder a los distintos elementos
que conforman una página Web. Por ejemplo, imaginemos que tenemos el siguiente
código HTML:
<html>
<head>
<title>Ejemplo DOM</title>
</head>
<body>
<div id=”miDivisor”>
<span>Texto de Prueba</span>
</div>
</body>
</html>
Figura 8.8. Estructura de árbol de una página HTML
El navegador Web es el encargado de procesar y transformar automáticamente el código fuente de una página
Web en una estructura de datos procesable a nivel de código JavaScript. El DOM provee por cada elemento HTML,
un objeto, denominado nodo, que posee una serie de propiedades y métodos que permiten al programador manipular
su estructura. Dichas propiedades y métodos permiten, por ejemplo, navegar entre los distintos nodos, obtener sus
elementos hijos y padre, modificar los atributos de los elementos Web, etc.
154
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
8.6.2.1 Navegación por las propiedades de un documento
JavaScript provee a través de su API de objetos acceso al DOM desde cualquier script. En general, se suele hacer
uso del objeto document, así como sus métodos getElementByName() y getElementById(), para acceder a los
distintos elementos que conforman una página Web. Por ejemplo, imaginemos que tenemos el siguiente código HTML:
<html>
<head>
<title>Ejemplo DOM</title>
</head>
<body>
<div id=”miDivisor”>
<span>Texto de Prueba</span>
</div>
</body>
</html>
Si deseáramos obtener el objeto DOM correspondiente al elemento <div> del código anterior, precisaríamos
utilizar el siguiente código para obtener acceso al mismo desde JavaScript:
var miDivisor = document.getElementById(“miDivisor”);
La función document.getElementById() obtiene el objeto DOM correspondiente al elemento HTML identificado
por el atributo id en dicha función. De esta forma, podremos procesar el elemento como un objeto desde JavaScript.
Por otro lado, disponemos de la función document.getElementByName(), la cual obtiene una lista de todas
aquellas etiquetas que se correspondan con el nombre de etiqueta especificado en la función. Ésta genera por cada
elemento encontrado un objeto, devolviendo como resultado de la misma un array de objetos DOM. Un ejemplo para
el código HTML anterior sería el siguiente:
var listaSpan = document.getElementByName(“span”);
var span = listaSpan[0];
En el ejemplo anterior se desea obtener el objeto DOM correspondiente a la etiqueta <span> incluida como etiqueta
hija del divisor <div id=”miDivisor”>. Para ello, primero se hace uso de document.getElementByName() para
obtener todos aquellos elementos HTML <span>, y a continuación se accede al elemento 0 de la variable listaSpan
para acceder al elemento <span>Texto de Prueba</span> de nuestro código HTML.
8.6.2.2 Cambio de propiedades mediante lenguajes de guion
La forma de manipular objetos DOM es simple. La API proporcionada por el modelo de objetos DOM provee una
serie de propiedades y métodos para cada objeto que permiten modificar la estructura y propiedades de cada nodo.
Por ejemplo, para modificar los atributos HTML de un objeto, el modelo DOM provee los métodos asociados al
mismo getAttribute(nombreAtributo) y setAttribute(nombreAtributo, valorAtributo) para modificar los
atributos de una etiqueta HTML. En el siguiente código se llevará a cabo la adición del atributo id con valor miSpan
del objeto HTML <span> anteriormente definido:
var listaSpan = document.getElementByName(“span”);
var span = listaSpan[0];
span.setAttribute(“id”, “miSpan”);
155
© RAMA 8 n LENGUAJES DE GUION DE USO GENERAL
Si quisiéramos acceder al valor de la propiedad id del elemento span anterior, haríamos uso del siguiente código:
var idSpan = span.getAttribute(“id”);
El DOM provee otras funciones para crear o eliminar elementos DOM a partir de un objeto dado:
document.
createElement(nombreEtiqueta)
Crea un objeto DOM con el nombre de etiqueta especificado en
nombreEtiqueta.
createTextNode(cadenaDeTexto)
Al aplicar esta función sobre un objeto DOM, esta función agrega
como nodo hijo un texto, es decir, una cadena de caracteres
proporcionada a través del parámetro cadenaDeTexto.
appendChild(objetoDOM) Al usar esta función sobre un objeto DOM, ésta agrega como hijo el objetoDOM proporcionado como parámetro de la función.
removeChild(objetoDOM) Al utilizar esta función sobre un objeto DOM, ésta elimina como hijo el objetoDOM proporcionado como parámetro de la función.
Figura 8.9. Funciones para crear y eliminar objetos DOM
8.7 GESTIÓN DE EVENTOS
La gestión de eventos es una de las tareas Web principales que gestiona JavaScript con sus scripts embebidos.
Los eventos son acciones que o bien realiza el usuario sobre alguno de los elementos que componen las páginas Web,
como, por ejemplo, hacer clic sobre un botón, o bien son sucesos que ocurren de forma automática, como, por ejemplo,
cuando finaliza la cargade un documento Web.
Estos eventos son utilizados frecuentemente para añadir comportamiento dinámico a los elementos que componen
las páginas Web, como, por ejemplo, realizar validación de campos de formulario, iniciar animaciones, cargar datos en
distintos elementos HTML o modificar la apariencia visual de la página, entre otros.
Generalmente, los eventos se declaran en los propios elementos HTML sobre los cuales se quiere gestionar dichos
eventos. En el ejemplo siguiente se muestra cómo asociar el comportamiento de la función saluda() al hacer clic sobre
un input html:
<input type=”button” onclick=”saluda()”>
Cuando el usuario hace clic en el botón, el evento generado ejecutará el código correspondiente a la siguiente
función:
<script type=”text/JavaScript”>
function saluda()
{
alert(“Hola desde JavaScript”);
}
</script>
Es frecuente asociar a los eventos la ejecución de una función JavaScript encargada de gestionar el comportamiento
que se le quiere asociar al evento. En el ejemplo anterior se asocia la función saluda() al evento onclick del input html.
156
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
En JavaScript existen multitud de eventos que pueden clasificarse a su origen, como los eventos de ratón, eventos
de teclado, eventos HTML y eventos DOM. A continuación se explica cada categoría:
n Eventos del ratón. Estos eventos tienen lugar cuando el usuario utiliza el ratón para realizar una determinada
acción sobre la página Web. El movimiento del puntero del ratón o hacer clic en cualquiera de sus botones suele
ser el desencadenante de la generación de un evento de ratón.
n Eventos del teclado. Estos eventos tienen lugar cuando el usuario pulsa alguna tecla.
n Eventos HTML. Estos eventos se producen cuando hay algún cambio en la página del navegador. También
pueden tener lugar cuando existe alguna interacción entre el cliente y el servidor.
8.7.1 EVENTOS DE RATÓN
Este tipo de eventos se generan a través de gestos (mover el ratón, hacer clic, etc.) que realiza el usuario con el
ratón sobre los diferentes elementos que componen una página Web. A continuación se describen los eventos definidos
en la especificación DOM:
n onclick. Este evento se produce cuando pulsamos sobre el botón izquierdo del ratón.
n ondblclick. Este evento se acciona cuando hacemos un doble clic sobre el botón izquierdo del ratón.
n onmousedown. Este evento se produce cuando pulsamos un botón del ratón.
n onmouseout. Este evento se produce cuando el puntero del ratón está dentro de un elemento y es desplazado
fuera del mismo.
n onmouseover. Este evento, al revés que el anterior, se produce cuando el puntero del ratón se encuentra fuera
de un elemento y éste se desplaza hacia el interior.
n onmouseup. Este evento se produce cuando soltamos un botón del ratón que previamente teníamos pulsado.
n onmousemove. Se produce cuando el puntero del ratón se encuentra dentro de un elemento. Es importante
señalar que este evento se producirá continuamente una vez tras otra mientras el puntero del ratón permanezca
dentro del elemento.
Es importante destacar que el orden de ejecución de los eventos es el siguiente: onmousedown, onmouseup,
onclick, onmousedown, onmouseup, dblclick, siendo el último evento de la secuencia el dblclick.
Cabe señalar que todos los elementos de las páginas Web soportan los eventos del ratón, pero no todos los eventos
que existen son soportados por todos los elementos de las páginas. Cuando se produce un evento, el objeto event se
crea automáticamente. Este objeto contiene características adicionales sobre el evento que se ha producido. Estos
datos pueden ser la posición del ratón, el elemento que ha producido el evento, etc.
8.7.2 EVENTOS DEL TECLADO
Los eventos de teclado son los que suceden cuando pulsamos una tecla. Según la especificación DOM, existen los
siguientes eventos relacionados con la actividad del teclado:
n onkeydown. Este evento se produce cuando pulsamos una tecla del teclado. Si mantenemos pulsada una tecla
de forma continua, el evento se produce una y otra vez hasta que soltemos la misma.
157
© RAMA 8 n LENGUAJES DE GUION DE USO GENERAL
n onkeypress. Este evento se produce si pulsamos una tecla de un carácter alfanumérico (el evento no se
produce si pulsamos Enter, la barra espaciadora, etc.). En el caso de mantener una tecla pulsada, el evento se
produce de forma continuada.
n onkeyup. Este evento se produce cuando soltamos una tecla.
8.7.3 EVENTOS HTML
Los eventos HTML, como hemos visto anteriormente, son los que actúan cuando hay cambios en la ventana del
navegador. También se producen cuando hay ciertas interacciones entre el cliente y el servidor. A continuación, vamos
a describir cuáles son estos eventos y cuándo se acciona cada uno de ellos:
n onload. Este evento se dispara cuando se carga por completo la página Web.
n onunload. Este evento se dispara cuando se cierra la página Web de un navegador.
n onabort. Este evento se produce cuando el usuario detiene la descarga de un elemento antes de que haya
terminado.
n onerror. Este evento se dispara cuando se produce un error en JavaScript.
n onselect. Se acciona cuando seleccionamos texto de los cuadros de textos <input> y <textarea>.
n onchange. Este evento se produce cuando los cuadros de texto <input> y <textarea> pierden el foco y,
además, el contenido que tenían ha variado. También se produce cuando un elemento <select> cambia de
valor.
n onsubmit. Este evento se produce cuando pulsamos sobre un botón <input> de tipo submit.
n onreset. Este evento se produce cuando pulsamos sobre un botón <input> de tipo reset.
n onresize. Este evento tiene lugar cuando redimensionamos el navegador y actúa sobre el objeto Window.
n onscroll. Se produce cuando varía la posición de la barra de desplazamiento (scroll) en cualquier elemento que
la tenga. El manejador es onscroll.
n onfocus. Este evento se produce cuando un elemento obtiene el foco.
n onblur. Este evento se produce cuando un elemento pierde el foco.
8.8 GESTIÓN DE ERRORES
El lenguaje JavaScript dispone en su repertorio de instrucciones de un conjunto de herramientas que permiten
gestionar los errores que se producen durante la ejecución del código fuente JavaScript. Estas herramientas se basan
en el uso de las cláusulas try/catch y de la instrucción throw.
La cláusula try/catch está concebida para detectar y corregir errores (denominados como Excepciones) en
tiempo de ejecución. La cláusula try {} se utiliza habitualmente para delimitar una zona problemática del código
fuente propensa a generar excepciones, permitiendo capturar el error que se produce en tiempo de ejecución. Por otro
lado, la cláusula catch {} permite detectar el tipo de error que se ha producido y actuar en consecuencia sobre la
158
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
base del tipo de excepción con el objetivo de intentar corregir y recuperar la ejecución del programa. Un ejemplo es
utilizar una variable no inicializada como parte de un bucle for:
var contador, suma=0;
try
{
While(contador < 10)
{
suma += contador;
contador++;
}
}
catch(e)
{
suma = 0;
}
En el ejemplo anterior, dentro de la cláusula try { } se lleva a cabo la suma de números que van del 0 hasta el 10
dentro del bucle while anterior. Por un descuido, en la declaración de variables se nos ha olvidado declarar el valor
del contador, lo cual dará lugar a una excepción por utilizar una variable no inicializada.
En el ejemplo, cuando se ejecuta el script, la cláusula try { } detectará que no se ha iniciado la variable contador,
y ya dentro de la cláusula catch{} se tratará la excepción. En esta cláusula se asignará a la variable suma el valor
0, para que, en caso de que sea usada por el script, éste no incurra en otro error.
8.8.1 VERIFICAR ERRORES EN FUNCIONES JAVASCRIPT
La forma habitual de detectar errores en funciones JavaScript es haciendo uso de los depuradores JavaScriptintegrados como herramientas para desarrolladores dentro de los navegadores Web actuales, como es el caso de
Mozilla Firefox, Google Chrome o Internet Explorer. Estos navegadores incorporan generalmente entre sus opciones
Herramientas para Desarrolladores, las cuales poseen un depurador JavaScript que permite establecer puntos de
ruptura con los que analizar paso a paso cómo se lleva a cabo la ejecución del código. También es habitual encontrarse
con una consola que muestre errores cuando se ejecuta código JavaScript o mensajes informativos que nosotros
podemos enviar a la misma mediante el objeto console.
Además de estas herramientas, como desarrolladores, se puede hacer uso de técnicas de programación que
permitan detectar errores en funciones, previo a que éstos se produzcan. Entre dichas técnicas, podemos utilizar las
siguientes:
n Controlar el número de argumentos que recibe una función. En JavaScript existe un objeto especial,
cuyo nombre es arguments, el cual permite analizar cuántos parámetros llegan a una función y acceder a
ellos como si de un array se tratara. Este objeto tiene la propiedad length, que nos permite saber el número
exacto de argumentos que han llegado a una función en un momento dado. De esta forma, podremos actuar
antes de que se ejecute la función.
n Establecer cláusulas try {} / catch {} en puntos propensos a errores. Si vemos que una zona del código
puede ser propensa a errores, como medida preventiva podemos utilizar las cláusulas try{} / catch {} para
capturar errores que se produzcan en código. Esta forma de actuar se la denomina programación segura, y nos
permite adelantarnos a los posibles errores que se produzcan en un programa.
159
© RAMA 8 n LENGUAJES DE GUION DE USO GENERAL
8.9 USOS ESPECÍFICOS DE LENGUAJES DE GUIÓON
Ahora que ya tenemos una visión general y completa del lenguaje JavaScript, en este apartado abordaremos
diferentes usos que se le puede dar en el desarrollo de aplicaciones Web.
8.9.1 INTEGRACIÓN MULTIMEDIA MEDIANTE LENGUAJES DE GUION
Uno de los usos más habituales de JavaScript es la integración de elementos multimedia en ciertas localizaciones
de las páginas Web, como, por ejemplo, vídeos o audios HTML. La forma más habitual de integrar estos elementos es
haciendo uso de un divisor (generalmente sin elementos hijos) o mediante una ventana emergente HTML que permita
visualizar el contenido multimedia.
En el siguiente ejemplo vamos a realizar la integración de un reproductor de vídeo HTML5 con un archivo de vídeo
tipo WebM sobre un divisor vacío <div>, como vemos en el siguiente ejemplo:
<html>
<head>
<title>Reproductor con Carga Dinámica</title>
<script src=”reproductor.js” type=”text/JavaScript”></script>
</head>
<body onload=”cargarReproductor()”>
<div id=”miReproductor”></div>
</body>
</html>
Para realizar dicha integración dinámica nos aprovecharemos del evento onload de la etiqueta HTML <body>, el
cual, al cargar la página al completo, disparará un evento JavaScript que llamará a la función cargarReproductor(),
función encargada de crear de forma dinámica el reproductor sobre el divisor vacío. Para ello, dentro de la función
cargarReproductor(), tendremos definido el siguiente código:
function cargarReproductor()
{
var videoReproducir = “mivideo.Webm”;
var codigoHTML = “<video controls>” +
“<source src=’”+videoReproducir+”’ type=’video/Webm’” +
“ codecs=’vp8.0, vorbis’ /></video>”
var divReproductor = document.getElementById(“miReproductor”);

divReproductor.innerHTML = codigoHTML;
}
160
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
En el código JavaScript anterior, para crear el reproductor HTML de forma dinámica, se define primero como
valor de la variable codigoHTML, el código HTML correspondiente al reproductor en texto plano. Más tarde, se
obtiene el objeto DOM correspondiente al divisor vacío de la página Web, haciendo uso para ello del objeto document
y su método getElementById(). Este método nos devuelve un objeto, que representa al divisor, al cual podremos
modificar sus propiedades como innerHTML para que integre como hijo del divisor vacío el código del reproductor
HTML5 anteriormente definido.
8.9.2 ANIMACIONES
JavaScript es un lenguaje de lado de cliente usado habitualmente para crear animaciones que den vida a los
elementos HTML que componen las páginas Web. Este lenguaje posee unas funciones especiales setTimeOut() y
setInterval() que permiten crear temporizadores, a través de los cuales crear animaciones basadas en pequeños
cambios sobre la apariencia visual de un elemento HTML.
En este tipo de animaciones, el desarrollador suele definir la forma inicial y final de un elemento HTML, y
utilizando una función anónima (la cual se suele ejecutar N veces) crea una interpolación de la forma del objeto en
la que se define cómo se cambia la apariencia del mismo con el paso del tiempo.
En JavaScript se pueden definir dos tipos de temporizadores, según el número de veces que queramos que se repita
una animación. Si por ejemplo, se desea mostrar un mensaje de advertencia pasados unos segundos (1 segundo o 1 000
ms), se utilizará la función setTimeOut(), la cual ejecutará la función anónima asociada una vez pasado el tiempo
especificado como parámetro.
setTimeOut(function(){ alert(“Hello”); }, 1000);
Si por el contrario deseamos crear una animación que aplique cambios de forma repetitiva a un objeto cada x
milisegundos, en JavaScript existe el temporizador setInterval(), el cual permite ejecutar una función anónima
durante N iteraciones espaciadas por un tiempo especificado en milisegundos.
Pongamos, por ejemplo, que un programador desea que un elemento DIV crezca hasta alcanzar un tamaño de
500px de ancho. El código del elemento HTML es el siguiente:
<div id=”divAnimado” style=”width:100px; height:100px”>
Para alcanzar el tamaño deseado, el desarrollador crea una función anónima que se encarga de interpolar el
tamaño del elemento DIV cada 20 milisegundos, con el objetivo de crear una sensación de crecimiento fluida del objeto.
Con cada avance crecerá 2px de ancho, hasta alcanzar un tamaño máximo de 300px. Para ello, la función anónima se
deberá definir de la siguiente forma:
var animacion = setInterval(function(){
// Se obtiene el elemento DIV a modificar
var div = document.getElementById(“divAnimado”);

// Se obtiene el tamaño actual
var tamanioActual = parseInt(div.style.width);
// Se define una nueva variable con el nuevo tamaño incrementado
var tamanioNuevo = tamanioActual + 2;
161
© RAMA 8 n LENGUAJES DE GUION DE USO GENERAL
// Si el tamaño es menor que 300, se incrementa el ancho del DIV
if (tamanioActual < 300)
{
div.style.width = tamanioNuevo + “px”;
}
}, 20);
Como se puede observar, la creación de animaciones en JavaScript puede resultar muy sencilla, pero requiere
comprender cómo funcionan de forma general las animaciones para poder llevar a cabo nuestras ideas en código.
8.9.3 EFECTOS ESPECIALES EN ELEMENTOS GRÁFICOS Y DE TEXTO
JavaScript, además de utilizarse para crear animaciones, habitualmente se emplea para resaltar visualmente
diferentes elementos HTML con el objetivo de llamar la atención del usuario. Un uso habitual es cuando el usuario
comete un error sobre un campo de texto.
Pongamos, por ejemplo, que tenemos en nuestra página Web un campo de texto en el que el usuario debe introducir
la fecha de nacimiento. Si éste introduce una fecha incorrecta, a través de JavaScript podemos resaltar el cuadro de
texto HTML con un borde rojo, con el fin de avisar al usuario que ha cometido un error.
El código HTML inicial del campo de texto sería el siguiente:
<span>Introduzca su fecha de nacimiento (1920-1993):</span>
<input type=”text” id=”anioNacimiento” onblur=”validarAnioNacimiento()”>
El input type=”text” definido anteriormente lleva asociado un evento onblur, que se dispara al perder el
foco, es decir, al abandonar el usuario el campo de texto cuando modifica su valor. En dichomomento, se produce una
validación dinámica del contenido del campo de texto, y si el usuario no introduce una fecha entre 1920 y 1993, el
campo de texto se resalta en rojo, con el siguiente código JavaScript:
<script type=”text/JavaScript”>
function validarAnioNacimiento()
{
var campoAnioNacimiento = document.getElementById(“anioNacimiento”);
var valueCampoAnioNacimiento = parseInt(campoAnioNacimiento.value);
if (valueCampoAnioNacimiento < 1920 || valueCampoAnioNacimiento > 1993)
{
campoAnioNacimiento.style.borderWidth = “2px”;
campoAnioNacimiento.style.borderColor = “red”;
}
}
</script>
162
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
8.9.4 REJILLAS DE DATOS
Cuando se utiliza JavaScript para realizar la presentación de datos dinámica en páginas Web, es habitual
construir vía código JavaScript ciertos elementos HTML, como las tablas.
Si se trabaja, por ejemplo, con Ajax, generalmente los datos recibidos del servidor no están formateados, por lo que
han de procesarse con código JavaScript para crear una presentación visual en HTML.
La forma habitual de proceder es hacer uso de bucles que recorran los datos recibidos y, a la vez, crear de forma
dinámica el código HTML necesario.
Imaginemos que recibimos del servidor el siguiente conjunto de datos en formato de Array Multidimensional:
var datos = [[1, “1234-ABC”, “12.00”, 23, “Pepe Flores”],
[2, “2345-BCD”, “13.21”, 56, “Rosa Gutiérrez”],
[3, “3456-CDE”, “09.00”, 87, “Luis Jiménez”],
[4, “4567-DEF”, “21.33”, 2, “Pedro León”]];
Los datos que se han presentado anteriormente tienen estructura de tabla; es un array compuesto por cuatro
arrays hijos, los cuales poseen cinco columnas de datos cada uno, dando lugar a una tabla de cuatro filas por cinco
columnas. La forma habitual de generar el código HTML es crear una cadena de caracteres que aglutine todo el código
HTML junto con los datos necesarios para la representación de los mismos. Para lograr dicho objetivo, se utilizará el
siguiente código JavaScript:
var codigoHTML = “<table>”;
for(fila=0; fila<datos.length; fila++)
{
codigoHTML +=”<tr>”;
for(columna = 0; columna<datos[fila].length; columna++)
{
codigoHTML += “<td>” + datos[fila][columna] + “</td>”;
}
codigoHTML += “</tr>”;
}
codigoHTML = “</table>”;
Una vez generado el código HTML con los datos, el siguiente paso suele consistir en añadir dicho código HTML a
un divisor de la página Web previamente definido y que reserva el espacio necesario para la inclusión del nuevo código
HTML. La forma habitual de incluir el código es el siguiente:
var divContenedor = document.getElementById(“divContenedor”);
divContenedor.innerHTML = codigoHTML;
Con el código anterior, JavaScript integrará el código HTML generado dinámicamente en el divisor seleccionado,
siendo similar al siguiente:
<table><tr><td>1</td><td>1234-ABC</td><td>12.00</td><td>23</td><td>Pepe Flores</td>
</tr><tr><td>2</td><td>2345-BCD</td><td>13.21</td><td>56</td><td>Rosa Gutiérrez</td>
163
© RAMA 8 n LENGUAJES DE GUION DE USO GENERAL
</tr><tr><td>3</td><td>3456-CDE</td><td>09.00</td><td>87</td><td>Luis Jiménez</td>
</tr><tr><td>4</td><td>4567-DEF</td><td>21.33</td><td>2</td><td>Pedro León</td>
</tr></table>
8.9.5 MANEJO DE CANALES DE SUSCRIPCIÓN (RSS)
Muchos portales Web, generalmente aquéllos dedicados a publicar noticias de diversa índole, suelen ofrecer a sus
visitantes un fichero especial, denominado fichero RSS (siglas en inglés de Really Simple Syndication), el cual recoge
en formato XML las noticias más relevantes del portal Web que lo publica, así como algunos detalles de las mismas.
Un ejemplo de fichero RSS, con nombre tutorialesRSS.xml, es el siguiente:
<?xml version=”1.0” encoding=”UTF-8” ?>
<rss version=”2.0”>
<channel>
<title>JavaScript Tutorial’s</title>
<link>http://www.tutosjs.com</link>
<description>Todo sobre JavaScript</description>
<item>
<title>Tutorial RSS</title>
<link> http://www.tutosjs.com/rss</link>
<description>Todo sobre RSS</description>
</item>
<item>
<title>Tutorial DOM</title>
<link> http://www.tutosjs.com/dom</link>
<description>Aprende a utilizar el DOM</description>
</item>
</channel>
</rss>
Estos ficheros permiten a cualquier página procesar sólo información, sin tener para ello que procesar todo el
código HTML de las mismas, descartando aquellas partes inservibles. Desde JavaScript, se puede acceder a estos
ficheros haciendo uso del siguiente código:
function loadXMLHTTP(filename)
{
var xhttp = null;
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // code for IE5 and IE6
{
xhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xhttp.open(“GET”,filename,false);
164
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
xhttp.send();
return xhttp.responseXML;
}
xmlDoc = loadXMLHTTP(“tutorialesRSS.xml”)
items = xmlDoc.getElementsByTagName(“item”);
for(i=0; i<items.length; i++)
{
document.write(“Nombre del tutorial: “ +
items[i].childNodes[0].textContent);
document.write(“<br>”);
}
En el código anterior se hace uso de la tecnología Ajax (que se explicará en el siguiente apartado) para obtener el
contenido del fichero RSS de forma asíncrona a la carga de la página Web. La función loadXMLHTTP() se encarga de
obtener desde cualquier servidor el fichero que deseamos procesar, devolviendo el mismo como un objeto DOM XML
procesable. Dicha función se utiliza en el código anterior para obtener el contenido del fichero tutorialesRSS.xml
situado en nuestro servidor de forma local. Con el objeto devuelto por la función, obtenemos los nodos del documento
RSS que tienen por nombre de etiqueta item, para obtener una lista de los tutoriales que posee el archivo RSS. Por
último, utilizando un bucle for, se recorre toda la lista de ítems, con el objetivo de mostrar todos los títulos de los
tutoriales. Para acceder al título de cada tutorial, se hace uso del método childNodes, el cual devuelve una lista de
las etiquetas hija de cada <item>, y más tarde se utiliza el método textContent para obtener el valor de la etiqueta
<title> del fichero RSS, a la que se accede mediante childNodes[0]. El resultado deberá ser similar al siguiente:
Figura 8.10. Valor devuelto en el acceso
8.9.6 DESCRIPCIÓN DE LAS TÉCNICAS DE ACCESO ASÍNCRONO (AJAX)
En este epígrafe se introducirán los conceptos básicos para comprender los mecanismos de comunicación asíncrona
que se emplean en el desarrollo de las páginas Web actuales. Profundizaremos en el uso de la tecnología AJAX
(Asynchronous JavaScript And XML), técnica de programación JavaScript que permite a las páginas Web intercambiar
datos con un servidor local o remoto y de forma asíncrona (en paralelo a la carga de la Web y sin bloqueo de la misma),
sin requerir recargar la totalidad de la página para actualizar los contenidos que se presentan en las mismas.
Las páginas Web anteriores a la aparición de AJAX se basaban generalmente en el uso intensivo del protocolo
HTTP, fundamentado en la petición-respuesta de recursos contra el servidor. Para poder intercambiar información
o realizar cambios en los contenidos presentados en las páginas, los navegadores Web precisaban realizar por cada
modificación en sus contenidos una petición de recurso al servidor Web, con el objetivo de que éste, a través de su
respuesta a la petición, devolviera un recurso modificado al navegador con los datos solicitados por el cliente.
165
© RAMA 8 n LENGUAJES DE GUION DE USO GENERAL
Este mecanismo requería recargar la totalidad de la página en el navegador cliente, tanto para intercambiar datos
como para cambiar la presentación de los datos ya presentes en la página Web del navegador. Esta forma de trabajar
cambió desde la aparición de AJAX, dado que ahora las páginas Web pueden efectuar recargas parciales de ciertas
partes de la página Web.
Con AJAX, las páginas Web pueden realizar actualizaciones parciales de elementos concretos de sus páginas,
así como intercambiar informaciónprocesada en formularios sin necesitar recargar la totalidad de la página Web.
Esta técnica de programación se inicia habitualmente por un evento generado por el usuario en el navegador cliente.
Este evento, controlado vía JavaScript, genera una petición asíncrona hacia el servidor mediante AJAX, en la cual el
cliente solicita al servidor datos o recursos que permitan actualizar los datos presentados en la página Web. De esta
forma, el navegador Web puede actualizar los contenidos presentados en la misma de forma dinámica y sin recargar
la totalidad de la página.
8.9.6.1 AJAX (Asynchronous JavaScript And XML )
AJAX es una técnica de programación que requiere del uso de un conjunto de tecnologías para llevar a cabo la
actualización asíncrona de las páginas Web. Tiene por objetivo intercambiar pequeñas o grandes cantidades de datos
entre el cliente y el servidor recargando ciertas partes de la página Web, sin que ello suponga la recarga completa de
todo su contenido. Para llevar a cabo esta tarea, AJAX utiliza un conjunto de tecnologías que permiten llevar a cabo
esta presentación de datos, destacando:
n XHTML y CSS para crear una presentación de datos en la página Web.
n DOM para la interacción y la visualización dinámica de datos.
n XML y XSLT para el intercambio y transformación de datos procedentes de ficheros o servicios Web XML.
n XMLHttpRequest, objeto para la generación de peticiones asíncronas contra el servidor.
n JavaScript como lenguaje de alto nivel que permite generar la presentación de los datos a partir de los datos
intercambiados con el servidor.
8.9.6.2 El objeto XMLHTTPRequest
Las peticiones AJAX se llevan a cabo utilizando un objeto especial de JavaScript denominado XMLHttpRequest.
Este objeto actúa a modo de interfaz entre el código cliente de la página Web y el código de lado del servidor Web,
siendo este el que realiza las peticiones asíncronas contra el servidor.
Habitualmente, no se suele utilizar de forma nativa este objeto, ya que existen multitud de librerías que simplifican
su uso, pero, por motivos didácticos, en este apartado veremos cómo se emplea de forma nativa con JavaScript. El
siguiente fragmento de código muestra cómo se instancia un objeto XMLHTTPRequest, válido para cualquier
navegador, siendo este objeto el que utilizaremos más tarde para solicitar datos al servidor a través de una petición
HTTP asíncrona:
var httpRequest;

if (window.XMLHttpRequest)
{
httpRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
httpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
}
166
PROGRAMACION WEB EN EL ENTORNO CLIENTE © RAMA
Como se observa en el código anterior, no existe una única forma de instanciar un objeto de tipo XMLHTTPRequest,
dado que cada navegador posee su propia implementación. En la mayor parte de los navegadores Web actuales, la
forma habitual de instanciar un objeto XMLHTTPRequest es la siguiente:
httpRequest = new XMLHttpRequest();
En otros, como es el caso de Internet Explorer, suele instanciarse de la siguiente forma:
httpRequest = new ActiveXObject(“Microsoft.XMLHTTP”)
Dado que es un objeto, éste presenta una serie de propiedades y métodos que permiten tener mayor control sobre
las peticiones realizadas. Las propiedades y métodos más representativos se especifican a continuación.
readyState Devuelve el estado del objeto como sigue:
0 = sin inicializar, 1 = abierto, 2 = cabeceras recibidas, 3 = cargando y 4 = completado.
responseBody Devuelve la respuesta como un array de bytes.
responseText Devuelve la respuesta como una cadena.
responseXML
Devuelve la respuesta como XML. Esta propiedad devuelve un objeto documento XML, que
puede ser examinado usando las propiedades y métodos del árbol del Document_Object_
Model.
status Devuelve el estado como un número (p. ej. 404 para “Not Found”).
statusText Devuelve el estado como una cadena (p. ej. “Not Found”).
Así mismo, en la ¡Error! No se encuentra el origen de la referencia. y la ¡Error! No se encuentra el origen
de la referencia. podemos ver los principales métodos y propiedades, respectivamente. La secuencia de utilización
normal consiste en abrir un canal de comunicación y especificar la petición con el método open(), enviar la petición
con el método send(), agregar la función que se disparará en el evento onreadystatechange y obtener la respuesta
en los diferentes atributos del objeto XMLHttpRequest (como una cadena, un documento XML o un array de bytes).
abort() Cancela la petición en curso.
getAllResponseHeaders() Devuelve el conjunto de cabeceras HTTP como una cadena.
getResponseHeader(cabecera) Devuelve el valor de la cabecera HTTP especificada.
open( método, URL [,
asíncrono[, nombreUsuario [,
clave]]] )
Especifica el método, URL y otros atributos opcionales de una petición.
El parámetro de método puede tomar los valores “GET”, “POST” o “PUT”
(“GET” y “POST” son dos formas para solicitar datos, con “GET” los
parámetros de la petición se codifican en la URL y con “POST”, en las
cabeceras de HTTP).
El parámetro URL puede ser una URL relativa o completa.
El parámetro asíncrono especifica si la petición será gestionada
asíncronamente o no. Un valor true indica que el proceso del script
continúa después del método send(), sin esperar a la respuesta, y false
indica que el script se detiene hasta que se complete la operación, tras lo
cual se reanuda la ejecución.
En el caso asíncrono se especifican manejadores de eventos, que se
ejecutan ante cada cambio de estado y permiten tratar los resultados de
la consulta una vez que se reciben, o bien gestionar eventuales errores.
send([datos]) Envía la petición.
167
© RAMA 8 n LENGUAJES DE GUION DE USO GENERAL
El manejo de eventos, en este caso, es muy importante. Hay que recordar que estamos trabajando en segundo
plano, por lo que la página Web no quedará bloqueada a la espera de una respuesta. En cambio, es necesario dar
respuesta a los diferentes eventos que pueden ocurrir. El principal es el cambio de estado de la petición.
onreadystatechange Evento que se dispara con cada cambio de estado.
onabort Evento que se dispara al abortar la operación.
onload Evento que se dispara al completar la carga.
onloadstart Evento que se dispara al comenzar la carga.
onprogress Evento que se dispara periódicamente con información de estado.
Vistas las principales propiedades y métodos del objeto XMLHttpRequest, en el siguiente ejemplo se verá cómo
se utiliza dicho objeto para realizar una petición HTTP tipo GET contra un servidor Web ubicado en la URL http://
www.miservidor.com. En el siguiente fragmento de código se hace uso del método open() para realizar la petición
asíncrona junto con el método send(), para enviar parámetros adicionales asociados a la petición. Cuando la petición
resulta favorable (lo cual se comprueba en el condicional), la propiedad status se establece código 200, indicando que
la petición se ha llevado a cabo correctamente, volcando entonces el contenido de la respuesta por pantalla utilizando
la propiedad responseText del objeto XMLHttpRequest.
httpRequest.open(‘GET’, ‘http://www.miservidor.com/’, false);
httpRequest.send(null);
if(httpRequest.status == 200)
{
document.write(httpRequest.responseText);
}
Las respuestas enviadas por el servidor pueden recibirse en varios formatos, según se lleve a cabo la petición
realizada por el cliente. Los formatos más habituales son: texto plano, XML y JSON. Generalmente, los portales que
implementan AJAX suelen utilizar como formato de intercambio de datos JSON, dado que su formato, compuesto por
pares claves-valor, permiten una rápida manipulación y procesamiento de los datos devueltos por el servidor como
objetos en el lenguaje cliente. Un ejemplo en JSON podrían ser los datos de un usuario como los siguientes:
var datosJSON = { “nombre” : “Juan”, “apellidos”: “Roca Carrasco” }
Para procesar las respuestas recibidas desde el servidor por JavaScript suelen requerir frecuentemente utilizar la

Programacion_web_en_el_entorno_del_cliente_Lopez_Sanz,_Marcos

UCE

Ferramentas de estudo

Mais conteúdos dessa disciplina