Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Este libro fue publicado originalmente con copyright (todos los derechos reservados) por el autor y el editor. La publicacin actual de este libro se realiza bajo la licencia Creative Commons Reconocimiento-NoComercialSinObrasDerivadas 3.0 Espaa que se resume en la siguiente pgina. La versin completa se encuentra en la siguiente direccin:
http://creativecommons.org/licenses/by-nc-nd/3.0/es/legalcode.es
Creative Commons
Sin obras derivadas No se puede alterar, transformar o generar una obra derivada a partir de esta obra.
Entendiendo que:
Renuncia Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los derechos de autor Dominio Pblico Cuando la obra o alguno de sus elementos se halle en el dominio pblico segn la ley vigente aplicable, esta situacin no quedar afectada por la licencia. Otros derechos Los derechos siguientes no quedan afectados por la licencia de ninguna manera: Los derechos derivados de usos legtimosu otras limitaciones reconocidas por ley no se ven afectados por lo anterior. Los derechos morales del auto; Derechos que pueden ostentar otras personas sobre la propia obra o su uso, como por ejemplo derechos de imagen o de privacidad. Aviso Al reutilizar o distribuir la obra, tiene que dejar bien claro los trminos de la licencia de esta obra.
Esto es un resumen legible por humanos del texto legal (la licencia completa) disponible en los idiomas siguientes: Asturian Castellano Cataln Euskera Gallego
Prefacio
Internet y la Web han inuido enormemente tanto en el mundo de la informtica como en la sociedad en general. Si nos centramos en la Web, en poco menos de 10 aos ha transformado los sistemas informticos: ha roto las barreras fsicas (debido a la distancia), econmicas y lgicas (debido al empleo de distintos sistemas operativos, protocolos, etc.) y ha abierto todo un abanico de nuevas posibilidades. Una de las reas que ms expansin est teniendo en la Web en los ltimos aos son las aplicaciones web. Las aplicaciones web permiten la generacin automtica de contenido, la creacin de pginas personalizadas segn el perl del usuario o el desarrollo del comercio electrnico. Adems, una aplicacin web permite interactuar con los sistemas informticos de gestin de una empresa, como puede ser gestin de clientes, contabilidad o inventario, a travs de una pgina web. Las aplicaciones web se encuadran dentro de las arquitecturas cliente/servidor: un ordenador solicita servicios (el cliente) y otro est a la espera de recibir solicitudes y las responde (el servidor). En este libro se aborda la programacin de la parte cliente de las aplicaciones web. Existen multitud de tecnologas que se pueden emplear para programar las aplicaciones web, como ActiveX o applets, pero no estn tan estandarizadas como las dos que se muestran en este libro: HTML y JavaScript. Este libro se complementa con otro de prxima aparicin que tratar la programacin de aplicaciones web desde el punto de vista del servidor. En l se mostrarn las tecnologas que se emplean para programar los servidores web: CGI, ASP, JSP, PHP, etc. Este libro posee diez captulos y tres apndices que denen tres partes. La primera parte, formada por los cinco primeros captulos, aborda una serie de temas tericos como son la historia de Internet y la Web, las arquitecturas cliente/servidor en general, las aplicaciones web como caso particular de las arquitecturas cliente/servidor y la estructura (fsica y lgica) de un sitio web. En la segunda parte, formada por los cinco ltimos captulos, se tratan una serie de temas ms prcticos: el lenguaje HTML, una gua de estilo con consejos que ayudan a evitar los errores ms comunes a la hora de crear pginas web, los lenguajes de script en general y un lenguaje de script concreto: JavaScript. Esta segunda parte
iii
iv
Prefacio
naliza con el modelo de objetos de documento, que permite acceder a los elementos de una pgina web desde un lenguaje de script. La ltima parte del libro est formada por tres apndices donde se resumen las etiquetas de HTML y se explica cmo trabajar con los colores en HTML y cmo depurar errores de JavaScript. El libro adems posee una serie de ndices (general, de guras, de acrnimos, etc.) que facilitan la lectura y la bsqueda de informacin. Para nalizar, quisiera mandar un abrazo a mi familia y a Marisa, la gente que quiero y que me apoya en mi trabajo. Tambin me gustara agradecer a mi compaero Jaume Aragons del Departamento de Lenguajes y Sistemas Informticos de la Universidad de Alicante la labor que ha realizado de revisin de este libro y sus valiosos comentarios que me han permitido mejorar algunos aspectos confusos.
ndice resumido
Prefacio ndice resumido ndice general ndice de cuadros ndice de guras ndice de acrnimos 1. Introduccin 2. Historia de Internet 3. Arquitecturas cliente/servidor 4. Qu es una aplicacin web 5. Estructura de un sitio web 6. HTML 7. Gua de estilo 8. Lenguajes de script 9. JavaScript 10.Modelo de Objetos de Documento A. Resumen de etiquetas de HTML
v
vi
ndice resumido
ndice general
Prefacio ndice resumido ndice general ndice de cuadros ndice de guras ndice de acrnimos 1. Introduccin
1.1. 1.2. 1.3. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Contenido de los captulos . . . . . . . . . . . . . . . . . . . . . . . . . Convenciones tipogrcas . . . . . . . . . . . . . . . . . . . . . . . . .
1
1 2 3
2. Historia de Internet
2.1. Historia de Internet 2.1.1. 2.1.2. 2.1.3. 2.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . Hitos en la diseminacin de la informacin . . . . . . . . . . . . El primer Internet . . . . . . . . . . . . . . . . . . . . . . . .
5
5 6 7 14 15 22 25 25 28 29 34
Protocolos de Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
El primer navegador . . . . . . . . . . . . . . . . . . . . . . . .
2.3.
Generaciones de los sitios web . . . . . . . . . . . . . . . . . . . . . . . 2.3.1. 2.3.2. 2.3.3. 2.3.4. Primera generacin . . . . . . . . . . . . . . . . . . . . . . . . . Segunda generacin . . . . . . . . . . . . . . . . . . . . . . . .
vii
viii
ndice general
3. Arquitecturas cliente/servidor
3.1. 3.2. 3.3. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Separacin de funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Modelos de distribucin en aplicaciones cliente/servidor 3.3.1. 3.3.2. 3.3.3. 3.4. 3.5.
39
39 40 42 42 43 43 44 44
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
47
48 48 49 51 52 52 53 53 53 54 59
Ventajas y desventajas . . . . . . . . . . . . . . . . . . . . . . . . . . . Arquitecturas de las aplicaciones web . . . . . . . . . . . . . . . . . . . Metodologa de desarrollo de sitios web . . . . . . . . . . . . . . . . .
61
62 63 64 66 69 70 71 72 76 76 81 81 82 89
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Estructura lgica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.4.1. 5.4.2. 5.4.3. 5.4.4. 5.4.5. 5.4.6. 5.4.7. Estructura secuencial Estructura en rejilla Estructura en rbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.5.
Gua de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ndice general
ix
6. HTML
6.1. 6.2. 6.3. 6.4. 6.5. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Evolucin de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Clasicacin de las pginas Conceptos bsicos de HTML 6.5.1. 6.5.2. 6.6. 6.7. 6.8.
91
93 93 94 96 97 98 100 101 103 105 105 106 108 111 114 115 115 118 119 121 121 122 122 122 123 125 127 129 132 134 134 136 138 140 141 143 145 147 150 150 151
Metadatos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Etiquetas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Formato del texto 6.8.1. 6.8.2. 6.8.3. 6.8.4. 6.8.5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Encabezados de secciones
Formatos de caracteres . . . . . . . . . . . . . . . . . . . . . . . La etiqueta <FONT> . . . . . . . . . . . . . . . . . . . . . . . Alineamiento del texto . . . . . . . . . . . . . . . . . . . . . . . Lneas horizontales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Listas de denicin . . . . . . . . . . . . . . . . . . . . . . . . . Listas ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Listas no ordenadas
6.9.
6.10. Colores
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.10.1. Color de fondo de una pgina . . . . . . . . . . . . . . . . . . . 6.10.2. Color del texto . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.11. Enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.11.1. Enlace a un punto del mismo documento 6.11.2. Enlace a otro documento 6.11.3. Enlace a un punto de otro documento 6.11.4. Envo de un correo electrnico
6.12. Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.12.1. Fusin de las y columnas . . . . . . . . . . . . . . . . . . . . . 6.12.2. Tablas invisibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.12.3. Alineamiento del contenido de una tabla . . . . . . . . . . . . . 6.12.4. Distancia entre celdas 6.12.5. Tablas como marcos 6.13. Imgenes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.13.1. Archivos GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.13.2. Archivos JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.13.3. Archivos PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.13.4. Etiqueta <IMG> . . . . . . . . . . . . . . . . . . . . . . . . . . 6.13.5. Imgenes como fondo de una pgina 6.14.1. Controles de un formulario 6.14. Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ndice general
6.14.2. Campos de vericacin . . . . . . . . . . . . . . . . . . . . . . . 6.14.3. Campos excluyentes 6.14.5. Listas de seleccin 6.14.6. reas de texto . . . . . . . . . . . . . . . . . . . . . . . . 6.14.4. Campos de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
153 153 155 155 156 157 160 163 165 165
6.14.7. Alineamiento de formularios . . . . . . . . . . . . . . . . . . . . 6.15. Marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.15.1. Nombres de destinos especiales un enlace . . . . . . . . . . . . . . . . . . 6.15.2. Como evitar que cambie la direccin en el navegador al pulsar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.15.3. El atributo TARGET en un formulario . . . . . . . . . . . . . .
7. Gua de estilo
7.1. Gua de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7.1.1. 7.1.2. 7.1.3. 7.1.4. 7.1.5. 7.1.6. 7.1.7. 7.1.8. 7.1.9. Organizar el cdigo HTML Cuidado con los colores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
167
168 168 168 168 169 169 169 170 170 170 171 171 171 171 171 172 173 174
Cuidado con los colores por defecto . . . . . . . . . . . . . . . . Cuidado con los tipos de letra . . . . . . . . . . . . . . . . . . . Cuidado con los valores absolutos . . . . . . . . . . . . . . . . . Cuidado con las barras de desplazamiento . . . . . . . . . . . . Cuidado con las imgenes de fondo . . . . . . . . . . . . . . . . Sacar partido al hipertexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Usar las capacidades multimedia
. . . . . . . . . . . . . . . . . . . . . . .
7.1.11. Permitir que los usuarios se comuniquen . . . . . . . . . . . . . 7.1.12. Facilitar las bsquedas . . . . . . . . . . . . . . . . . . . . . . . 7.1.13. Revisar las pginas peridicamente . . . . . . . . . . . . . . . . 7.1.14. Los enlaces 7.2. Accesibilidad 7.2.1. 7.2.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8. Lenguajes de script
8.1. 8.2. 8.3. 8.4. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Diferencias entre VBScript y JavaScript . . . . . . . . . . . . . . . . . Para qu sirven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Como se usa un lenguaje de script en un navegador . . . . . . . . . . .
175
175 176 176 177
9. JavaScript
9.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9.1.1. 9.1.2. 9.1.3. Aplicaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Qu necesito para programar en JavaScript . . . . . . . . . . . JavaScript y Java . . . . . . . . . . . . . . . . . . . . . . . . . .
181
182 183 184 184
ndice general
xi
9.1.4. 9.1.5. 9.1.6. 9.1.7. 9.2. 9.2.1. 9.2.2. 9.2.3. 9.2.4. 9.2.5. 9.2.6. 9.2.7. 9.3. 9.3.1. 9.3.2. 9.3.3. 9.4. 9.4.1. 9.4.2. 9.5. 9.5.1. 9.5.2. 9.5.3. 9.6. 9.7. 9.8.
Versiones JScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
184 187 187 187 189 189 191 191 193 194 195 197 197 197 200 205 208 208 209 213 213 215 216 216 222 226 226 228 231 235
JavaScript y ECMA
El lenguaje
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Caractersticas bsicas . . . . . . . . . . . . . . . . . . . . . . . Comentarios Declaracin de variables . . . . . . . . . . . . . . . . . . . . . . mbito de las variables Operadores Caracteres especiales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Palabras reservadas
Funciones
Objetos
Mtodos de un objeto
Eliminacin de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tratamiento de cadenas Operaciones matemticas Validacin de formularios 9.8.1. 9.8.2. 9.8.3. 9.8.4.
Validacin campo nulo . . . . . . . . . . . . . . . . . . . . . . . Validacin alfabtica . . . . . . . . . . . . . . . . . . . . . . . . Validacin numrica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Validacin de una fecha
239
239 240 242 248 255 256 257 259 262 270
10.2.4. Objeto location . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.2.5. Objeto navigator . . . . . . . . . . . . . . . . . . . . . . . . . . 10.2.6. Objeto screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.2.7. Objeto window . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.3. Modelo de objetos en Microsoft Internet Explorer . . . . . . . . . . . .
xii
ndice general
271
272 273 273 274 275 275 276 277 278 279 282 283 284 285 286 287
A.13.Etiquetas de script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A.16.Atributos universales . . . . . . . . . . . . . . . . . . . . . . . . . . . .
B. Colores en HTML
B.1. Cmo trabajar con las componentes RGB . . . . . . . . . . . . . . . . . . . . B.1.1. Obtener las componentes del color deseado en decimal . . . . . B.1.2. Transformar las componentes de decimal a hexadecimal B.2. Tabla de colores B.3. Cambio de colores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
289
289 290 290 294 294 296
299
299 300 300 302 304 305 308
313 315
ndice de cuadros
2.1. 6.1. 6.2. 6.3. 6.4. 9.1. 9.2. 9.3. 9.4. 9.5. 9.6. 9.7. 9.8. Protocolos ms comunes de Internet Versiones de HTML . . . . . . . . . . . . . . . . . . . 15 94 101 101 141 185 185 188 188 195 196 197 223 290 294 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Caracteres especiales . . . . . . . . . . . . . . . . . . . . . . . . . . . . Diferencias entre GIF, JPEG y PNG . . . . . . . . . . . . . . . . . . . JavaScript frente a Java . . . . . . . . . . . . . . . . . . . . . . . . . .
Relacin entre las versiones de JavaScript y de Netscape Navigator . . Relacin entre las versiones de JavaScript y de ECMA . . . . . . . . . Relacin entre las versiones de JScript y los productos de Microsoft . . Caracteres especiales . . . . . . . . . . . . . . . . . . . . . . . . . . . . Precedencia de los operadores de JavaScript . . . . . . . . . . . . . . . Palabras reservadas de JavaScript . . . . . . . . . . . . . . . . . . . . . Propiedades del objeto Math . . . . . . . . . . . . . . . . . . . . . . .
B.1. Equivalencias para pasar del sistema decimal al hexadecimal . . . . . . B.2. Nombres de algunos colores en HTML . . . . . . . . . . . . . . . . . .
xiii
ndice de guras
2.1. 2.2. 2.3. 2.4. 2.5. 2.6. 2.7. 2.8. 2.9. Leonard Kleinrock junto al primer IMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 11 12 13 16 18 19 20 20 22 23 24 26 27 29 30 32 33 35 36 37 41 41 42 43 43 43 El primer nodo de ARPANET . . . . . . . . . . . . . . . . . . . . . . . Los cuatro primeros nodos de ARPANET Diseo lgico de ARPANET en abril de 1971
Los pilares de la Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tim Berners-Lee junto a una pantalla de ordenador que muestra su primer navegador web . . . . . . . . . . . . . . . . . . . . . . . . . . . Pgina actual visualizada con Mosaic 1.0 . . . . . . . . . . . . . . . . . Pgina actual visualizada con Netscape Communicator 4.78 . . . . . . Cuadro de dilogo About en NCSA Mosaic 1.0 . . . . . . . . . . . . .
2.10. Cuadro de dilogo Acerca de Internet Explorer en Microsoft Internet Explorer 5.5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.11. El primer navegador web ejecutndose en un ordenador NeXT 2.12. El primer navegador web ejecutndose en un ordenador NeXT 2.13. Ejemplo de pgina web de la primera generacin 2.14. Ejemplo de pgina web de la primera generacin 2.15. Ejemplo de pgina web de la segunda generacin 2.16. Ejemplo de pgina web de la segunda generacin . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.17. Ejemplo de pgina web de la tercera generacin . . . . . . . . . . . . . 2.18. Ejemplo de pgina web de la tercera generacin . . . . . . . . . . . . . 2.19. Ejemplo de pgina web de la cuarta generacin . . . . . . . . . . . . . 2.20. Ejemplo de pgina web de la cuarta generacin . . . . . . . . . . . . . 2.21. Ejemplo de pgina web de la cuarta generacin . . . . . . . . . . . . . 3.1. 3.2. 3.3. 3.4. 3.5. 3.6. Escalabilidad horizontal Separacin de funciones Aplicacin distribuida Datos distribuidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
xv
xvi
ndice de guras
3.7. 4.1. 4.2. 4.3. 4.4. 4.5. 4.6. 4.7. 4.8. 5.1. 5.2. 5.3. 5.4. 5.5. 5.6. 5.7. 5.8. 5.9.
Arquitectura de tres niveles . . . . . . . . . . . . . . . . . . . . . . . . Esquema bsico de una aplicacin web . . . . . . . . . . . . . . . . . . Tecnologas empleadas en el cliente y en el servidor web Arquitectura de las aplicaciones web: todo en un servidor . . . . . . . . . . . . . . . . .
Arquitectura de las aplicaciones web: todo en un servidor, con servicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Arquitectura de las aplicaciones web: separacin servidor de datos, con servicio de aplicaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . Arquitectura de las aplicaciones web: todo separado Arquitectura de las aplicaciones web: todo separado Distintos tipos de estructuras fsicas Distintos tipos de estructuras fsicas Tipos de enlaces . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Estructura secuencial . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ejemplo de estructura secuencial Ejemplo de estructura secuencial Ejemplo de estructura secuencial Ejemplo de estructura secuencial Estructura en rejilla
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.10. Ejemplo de estructura en rejilla: versin normal . . . . . . . . . . . . . 5.11. Ejemplo de estructura en rejilla: versin para imprimir . . . . . . . . . 5.12. Ejemplo de estructura en rejilla: versin para discapacitados . . . . . . 5.13. Estructura en rbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.14. Problemas en las estructuras en rbol . . . . . . . . . . . . . . . . . . 5.15. Estructura en red . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.16. Estructura mixta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.17. Comparacin de las cuatro estructuras lgicas o de navegacin bsicas 5.18. Ejemplo de rastro de las migas de pan . . . . . . . . . . . . . . . . . 5.19. Ejemplo de esquema de numeracin de los pasos: paso 1 . . . . . . . . 5.20. Ejemplo de esquema de numeracin de los pasos: paso 2 . . . . . . . . 5.21. Ejemplo de esquema de numeracin de los pasos: paso 3 . . . . . . . . 5.22. Ejemplo de esquema de numeracin de los pasos: paso 4 . . . . . . . . 6.1. 6.2. 6.3. 6.4. 6.5. Primera pgina HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . Ejemplo de encabezados . . . . . . . . . . . . . . . . . . . . . . . . . . Formatos fsicos y lgicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Resultados inesperados al solapar etiquetas
ndice de guras
xvii
Distintos tipos de letra con la etiqueta <FONT> en Microsoft Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Distintos tamaos de letra con la etiqueta <FONT> . . . . . . . . . . Alineamiento de prrafos: izquierda, derecha, centrado y justicado . . Bloques de texto con distinta sangra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 111 113 114 116 117 119 121 124 124 125 126 127 128 128 130 130 132 134 136 139 140 142 142 142 144 146 146 146 148 148 148 150 154 157 158 159 160 164
6.15. Destino del enlace interno . . . . . . . . . . . . . . . . . . . . . . . . . 6.16. Pgina con enlace a otra pgina . . . . . . . . . . . . . . . . . . . . . . 6.17. Pgina con enlace a otra pgina . . . . . . . . . . . . . . . . . . . . . . 6.18. Pgina con dos enlaces a otra pgina . . . . . . . . . . . . . . . . . . . 6.19. Pgina destino de los enlaces 6.20. Pgina destino de los enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.22. Mensaje visualizado en Netscape Messenger . . . . . . . . . . . . . . . 6.23. Tabla sencilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.24. Tabla fusin de varias celdas . . . . . . . . . . . . . . . . . . . . . . . 6.25. Alineamiento del contenido de una tabla . . . . . . . . . . . . . . . . . 6.26. Distintas distancias entre celdas . . . . . . . . . . . . . . . . . . . . . . 6.27. Tablas como marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.28. La misma imagen GIF en blanco/negro y en color 6.30. GIF transparente sobre fondo no blanco 6.32. Imagen en formato PNG y detalle
6.29. GIF transparente sobre fondo blanco . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.31. Distintos tamaos de pancartas (banners)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.33. Imagen en formato JPG (alta calidad) y detalle . . . . . . . . . . . . . 6.34. Imagen en formato JPG (baja calidad) y detalle tor 4.78 plorer 5.5 6.35. Imagen PNG con transparencias visualizada en Netscape Communica. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.36. Imagen PNG con transparencias visualizada en Microsoft Internet Ex6.37. Imagen PNG con transparencias visualizada en Opera 6.0 6.38. Imgenes con distinto alineamiento del texto 6.40. Distintas listas de seleccin
6.39. Formulario con distintos controles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.41. reas de texto de distinto tamao
6.42. Formulario sin alineamiento de los controles . . . . . . . . . . . . . . . 6.43. Formulario con alineamiento de los controles . . . . . . . . . . . . . . . 6.44. Pgina con dos marcos verticales . . . . . . . . . . . . . . . . . . . . .
xviii
ndice de guras
6.45. Pgina con dos marcos verticales 8.1. 8.2. 9.1. 9.2. 9.3. 9.4. 9.5. 9.6. 9.7. 9.8. 9.9.
. . . . . . . . . . . . . . . . . . . . .
164 180 180 196 201 204 207 219 227 231 235 238 241 246 249 251 253 255 258 260 260 262 267 269 270 291 292 293 295 301 303 305 306 307 308 310
Ejemplo de uso de la instruccin while . . . . . . . . . . . . . . . . . . Ejemplo de uso de la instruccin for(. . . in . . . ) . . . . . . . . . . . . . Tabla de caracteres ASCII . . . . . . . . . . . . . . . . . . . . . . . . . Validacin campo nulo . . . . . . . . . . . . . . . . . . . . . . . . . . . Validacin alfabtica . . . . . . . . . . . . . . . . . . . . . . . . . . . . Validacin numrica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Validacin de una fecha
10.2. Propiedades del objeto document . . . . . . . . . . . . . . . . . . . . . 10.3. Propiedades del objeto document . . . . . . . . . . . . . . . . . . . . . 10.4. Acceso a los controles de un formulario . . . . . . . . . . . . . . . . . . 10.5. Acceso a los controles de un formulario . . . . . . . . . . . . . . . . . . 10.6. Acceso a los controles de un formulario . . . . . . . . . . . . . . . . . . 10.7. Propiedades del objeto location . . . . . . . . . . . . . . . . . . . . . . 10.8. Propiedades del objeto navigator en Netscape Communicator . . . . . . . . 10.9. Propiedades del objeto navigator en Microsoft Internet Explorer
10.10. ropiedades del objeto screen en Netscape Communicator . . . . . . . P 10.11. nteraccin entre varias ventanas a travs del objeto window . . . . . . I 10.12. efresco automtico de una pgina mediante JavaScript . . . . . . . . R 10.13. odelo de objetos en Microsoft Internet Explorer . . . . . . . . . . . . M B.1. Ventana para modicar colores en Microsoft Paint B.3. Calculadora en modo cientco . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
B.4. Cuadro de dilogo para cambiar colores en Microsoft Internet Explorer 295 B.5. Cuadro de dilogo para cambiar colores en Netscape Communicator
C.1. Consola JavaScript de Netscape Communicator . . . . . . . . . . . . . C.2. Consola JavaScript con mensajes de error C.4. Netscape JavaScript Debugger . . . . . . . . . . . . . . . . C.3. Evaluacin de expresiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . C.5. SmartUpdate en Netscape Communicator
C.6. Mensaje de alerta de Microsoft Internet Explorer . . . . . . . . . . . . C.8. Opciones de Microsoft Internet Explorer . . . . . . . . . . . . . . . . .
ndice de guras
xix
C.9. Mensaje de error en Microsoft Internet Explorer C.10.Mensaje de error en Microsoft Internet Explorer C.12.Depurador de Microsoft
. . . . . . . . . . . . . . . . . . . . . . . .
ndice de acrnimos
ADSL
Asymmetric Digital Subscriber Line
Tecnologa de comunicacin que permite obtener altas velocidades de transmisin a travs de las lneas telefnicas tradicionales. La comunicacin es asimtrica porque las velocidades de recepcin (128 Kbps hasta 9 Mbps) son mayores que las de transmisin (16 Kbps hasta 640 Kbps).
API
API facilita la
ARPA
Agencia de Proyectos de Investigacin Avanzados. Agencia creada por el Departamento de Defensa de los Estados Unidos de Norteamrica en 1958. Tambin conocida como varias veces: en 1971
DARPA. A lo largo de los aos ha cambiado su nombre DARPA, en 1993 ARPA y en 1996 DARPA otra vez.
El proyecto ms conocido de los desarrollados por esta agencia es ARPANET (o ARPAnet), semilla de la actual Internet.
ASP
CGI,
ASCII
Cdigo binario utilizado para representar letras, nmeros, smbolos, etc. A cada carcter se le asigna un nmero del 0 al 127 (7 bits). Por ejemplo, el cdigo
de 256 caracteres (8 bits), que permiten representar caracteres no ingleses como las vocales acentuadas o la ee. Los caracteres de la parte superior (128 a 255)
xxi
xxii
ndice de acrnimos
de estos cdigos
BMP
Bit-map
Formato grco de mapa de bits estndar en los sistemas operativos Microsoft
Windows. Almacena las imgenes en un formato llamado mapa de bits independiente del dispositivo, que signica que el color de cada punto (pixel ) se almacena de un modo independiente del mtodo empleado por un dispositivo para representar el color. Existen diversos formatos: 1 bit (blanco y negro), 4 bits (16 colores), 8 bits (256 colores) y 24 bits (16 777 216 colores).
CERN
Organizacin Europea para la Investigacin Nuclear. Es el mayor centro cientco a nivel mundial dedicado a la fsica de partculas. Su sede central se encuentra en Ginebra, Suiza. Fundado en 1954 por 12 pases, actualmente est formado por 20 pases, entre ellos Espaa. Tim Berners-Lee, mientras trabajaba en l a principios de 1990, invent la
WWW.
CGI
CGI
es un programa preparado
para recibir y enviar datos desde y hacia un servidor web segn este estndar. Normalmente se programan en C o en Perl , aunque se puede usar cualquier lenguaje de propsito general.
CSP
ASP y JSP en que la lgica de negocio reside junto con la lgica de datos en el sistema
micas en el servidor. Se diferencia de otras tecnologas similares como gestor de bases de datos.
CSS
HTML.
como cada elemento, como por ejemplo los encabezados o los enlaces, se tiene que mostrar. El trmino en cascada indica que diferentes hojas de estilo se pueden aplicar sobre la misma pgina.
DARPA DHTML
Vase
ARPA.
Dynamic HTML
Conjunto de extensiones a
HTML que permiten modicar el contenido de una DOM para acceder al contenido de la pgina.
pgina web en el cliente sin necesidad de establecer una nueva comunicacin con el servidor. Se basa en el uso de
ndice de acrnimos
xxiii
DLL
DLL
DOM
HTML
DOM se encuentra en proceso de W3C. DHTML depende de DOM para cambiar dinmi-
camente el contenido de una pgina web. Desgraciadamente, los dos navegadores mayoritarios poseen distintos modelos de objetos que en algunas partes son incompatibles entre s.
ECMA European Computer Manufacturers Association ECMA es una asociacin internacional que establece estndares relacionados
con sistemas de comunicacin y de informacin.
GIF
versiones de este estndar grco: 87A y 89A. Es el formato ms adecuado para imgenes con pocos colores, dibujos sencillos o textos.
HTML
Lenguaje compuesto de una serie de etiquetas o marcas que permiten denir el contenido y la apariencia de las pginas web. Aunque se basa en el estndar
SGML, no se puede considerar que sea un subconjunto de l. Existen cientos de etiquetas con diferentes atributos. W3C se encarga de su estandarizacin. El futuro sustituto de HTML es XHTML. HTTP
HyperText Transfer Protocol
Es el protocolo que emplea la
WWW.
enviar los mensajes y que acciones debe tomar el servidor y el navegador en respuesta a un comando. Es un protocolo stateless (sin estado), porque cada comando se ejecuta independientemente de los anteriores o de los posteriores. Actualmente, la mayora de los servidores soportan
junio de 1999). Una de las principales ventajas de esta versin es que soporta conexiones persistentes: una vez que el navegador se conecta al servidor, puede recibir mltiples cheros a travs de la misma conexin, lo que aumenta el rendimiento de la transmisin hasta en un 20 %.
xxiv
ndice de acrnimos
IAP IDC
ISP.
ASP.
IMP
ISAPI
Un API para el servidor Microsoft Internet Information Server. Permite crear ltros
ISAPI,
determinadas peticiones de los clientes, lo cual facilita la programacin de aplicaciones web. Por ejemplo, la tecnologa
ISP
IAP.
ISO
JPEG
Nombre del comit de expertos que desarroll el formato grco con el mismo nombre. Se trata de un formato grco de mapa de bits que incorpora compresin de datos con prdidas y permite trabajar con 24 bits de color (color real o verdadero). El nivel de compresin es variable, por lo que se puede elegir entre mejor calidad y menor compresin o peor calidad y mayor compresin. Este formato se suele emplear con imgenes fotogrcas o complejas, pero no es el adecuado para imgenes sencillas, dibujos o textos.
JSP
ndice de acrnimos
xxv
LZW
GIF de
cobrar un canon (la mayora de la gente no saba que haba sido patentado en 1983). Sin embargo, a partir de 1995 decidi cobrar una tasa y se desat una gran controversia ya que se haba extendido ampliamente su uso.
MIME
Se usa en el correo electrnico desde 1992 para enviar y recibir cheros de distinto tipo. Se puede consultar el estndar en 1522.
MIT
MNG
PNG que permite usar mltiples imgenes en un GIF) y JPEG transparente. Aunque la especica-
cin 1.0 se public el 31 de enero de 2001, se encuentra poco extendido y hay pocas herramientas que lo soporten.
NCP
NCSA
Centro Nacional para Aplicaciones de Supercomputacin. Centro creado en la Universidad de Illinois en enero de 1986. Famoso porque uno de los primeros navegadores web gratuitos, NCSA Mosaic, se cre en sus instalaciones.
NPL
ODBC
xxvi
ndice de acrnimos
es facilitar el acceso a cualquier dato desde cualquier aplicacin, independientemente del sistema gestor de bases de datos empleado. Para ello, en
ODBCse
inserta una capa intermedia, llamada controlador (driver ) de la base de datos, entre la aplicacin y el sistema gestor de bases de datos. El propsito de esta capa es traducir las consultas que genera la aplicacin en comandos que entienda el sistema gestor de bases de datos. Por tanto, mediante siempre que todas las partes sean compatibles con
ODBC, se puede
cambiar la parte servidor (la base de datos) sin tener que cambiar el cliente,
ODBC.
OSI
ISO
de red en siete capas. Los siete niveles, desde el ms inferior (1) al superior (7) son: fsico, enlace, red, transporte, sesin, presentacin y aplicacin.
PNG
Formato grco de mapa de bits similar a formato grco con la idea de sustituir emplea un algoritmo que est
GIF. W3C ha desarrollado este GIF por PNG debido a que el primero patentado, mientras que PNG es totalmente GIF, emplea un esquema de compresin GIF. Tanto Microsoft
gratuito. No permite crear animaciones, pero s que permite denir distintos niveles de transparencia. Al igual que sin perdidas que logra tasas de compresin mayores que todas sus caractersticas.
RFC RGB
RFC
recibe un nmero.
de los tres colores bsicos (primarios) rojo (red ), verde (green ) y azul (blue ). Se trata de un modelo aditivo (se parte del negro). Mediante la combinacin adecuada de los tres colores bsicos se consigue todo el espectro de colores. Adems de
RGB
ms corrientes es CMYK (cyan, magenta, yellow, black ), que se trata de un modelo sustractivo.
RPC
ndice de acrnimos
xxvii
SGML
Lenguaje que permite organizar y etiquetar los distintos elementos que componen un documento. Se emplea para manejar grandes documentos que sufren constantes revisiones y se imprimen en distintos formatos e idiomas. Desarrollado y estandarizado por
ISO en 1986.
SLAC SSL
Centro de investigacin nuclear en California (EE.UU.). En diciembre de 1992, fue el primer sitio fuera de Europa en instalar un servidor web.
TCP/IP URL
VPN
de una red pblica. Emplea protocolos de comunicacin seguros para establecer canales de comunicacin seguros sobre una red pblica que es insegura.
VRML
Lenguaje de Modelado de Realidad Virtual. Lenguaje para crear objetos en tres dimensiones en la Web. Los cheros creados con este lenguaje poseen la extensin
.wrl
W3C
WWW.
Su propsito es desarrollar
WAI
WWW
Tambin conocida como la Web o la Red. Sistema mundial de servidores web conectados a Internet (no todos los ordenadores conectados a Internet forman
xxviii
ndice de acrnimos
parte de la recursos
WWW).
Su protocolo de comunicacin es
de creacin de documentos
HTML
HTTP,
su lenguaje
WYSIWYG
Una aplicacin es
XHTML Extensible HyperText Markup Language HTML escrito segn las normas que marca XML. Por tanto, se trata de una aplicacin concreta de XML y no tienen que confundirse entre s. XML
Extensible Markup Language
Metalenguaje de etiquetado basado en la
SGML. Diseado especcamente para WWW por W3C. Permite que un usuario disee sus propias etiquetas, con
Captulo 1
Introduccin
En este captulo se realiza una introduccin del libro y se presenta el contenido de cada uno de los captulos. Adems, tambin se comentan las convenciones tipogrcas empleadas para distinguir los acrnimos, nombres de programas, etc.
ndice General
1 2 3
1.1. Introduccin
Este libro contempla la programacin de la parte cliente de las aplicaciones web. En el mundo Internet existen muchas tecnologas que se pueden emplear para programar los clientes web, pero slo dos son las ms extendidas y se pueden considerar el estndar de facto : HyperText Markup Language (
HTML) y JavaScript.
Este libro no trata sobre diseo grco o artstico de sitios web. Sin embargo, s que se ofrecen algunos consejos que pueden ayudar a lograr sitios web ms fciles de usar, prcticos y elegantes. Por ello, me gustara incluir unas palabras de Miguel Ripoll, uno de los diseadores web de ms prestigio mundial: A good website has to be fast to download, easy to navigate, appealing to the eye, on brand and on target, oer something dierent from the rest, have added value, and constitute a unique user experience. Simple, really. 1
Captulo 1. Introduccin
Un buen sitio web tiene que ser rpido de descargar, fcil de navegar, atractivo a la vista, centrado en la marca y en el objetivo, ofrecer algo diferente del resto, tener un valor aadido y constituir una experiencia nica para el usuario. Simple, en realidad.
Miguel Ripoll,
http://www.miguelripoll.com/
En denitiva, se puede decir que las dos reglas bsicas que hay que tener en cuenta para desarrollar un sitio web correcto son la simplicidad en el diseo visual y la ecacia de las herramientas de navegacin y de bsqueda que incorpore.
net. Se comentan los hechos ms importantes y se destacan las personas que ms han inuido en su desarrollo. Adems, se dedica un apartado especial a la historia de la Web y se presentan las cuatro generaciones de sitios web que existen actualmente. En el Captulo 3 (
son un tipo especial de aplicaciones cliente/servidor, se introducen las caractersticas bsicas de las arquitecturas cliente/servidor. En el Captulo 4 (
tpicos de las aplicaciones web: el nivel superior que interacciona con el usuario (el cliente web, normalmente un navegador), el nivel inferior que proporciona los datos (la base de datos) y el nivel intermedio que procesa los datos (el servidor web). En este captulo se describen el cliente y el servidor web y se comentan los entornos web en los que se ejecutan las aplicaciones web: Internet, intranet y extranet. Adems se comentan las principales ventajas que poseen las aplicaciones web. Por ltimo se presenta una metodologa de desarrollo de sitios web. En el Captulo 5 (
sitio web, estructura fsica y estructura lgica (o de navegacin). Adems, se incluye una gua de estilo con consejos a tener en cuenta cuando se disee la navegacin de un sitio web. El principal objetivo que se quiere lograr cuando se disean la estructura fsica y la estructura lgica es lograr sitios web que sean fciles de mantener y de navegar. En el Captulo 6 (
HTML)
se emplea para dar formato a los documentos que se quieren publicar en la World
Wide Web (
WWW).
los documentos con el formato deseado. En este captulo se presentan los conceptos bsicos y avanzados (enlaces, tablas, marcos, etc.) de
estudio especial de los formularios, ya que son una pieza clave de las aplicaciones web.
1.3.
Convenciones tipogrcas
En el Captulo 7 (
Gua de estilo) se presentan una serie de consejos que ayudan a Lenguajes de script) JavaScript)
no cometer los errores ms comunes a la hora de crear un sitio web. Adems, tambin se incluyen una serie de consejos sobre accesibilidad, tanto de cara al usuario como al navegador. En el Captulo 8 ( se tratan los lenguajes de script, que
permiten incluir programacin en las pginas web. En este captulo se explican las tres formas que existen de incluir y ejecutar cdigo en una pgina web. En el Captulo 9 (
vaScript .
guaje estndar. En este captulo se estudian sus caractersticas bsicas, sus diferentes sentencias, las funciones que incorpora y, por ltimo, como validar formularios. En el Captulo 10 (
se trata el Modelo
de Objetos de Documento, que es un interfaz que permite acceder y modicar la estructura y contenido de una pgina web. Este modelo especica como se puede acceder a los distintos elementos (enlaces, imgenes, formularios, etc.) de una pgina y como se pueden modicar. En este captulo se describen los objetos que componen este modelo, sus propiedades, mtodos y eventos. Adems, el libro tambin posee una serie de apndices que complementan la infor-
HTML.
Colores en HTML) se explica como trabajar con los colores Depuracin de errores de JavaScript)se ex-
Finalmente, en el Apndice C (
plica como se puede depurar el cdigo JavaScript en cualquier navegador. Adems, se comentan algunas herramientas especcas que poseen los navegadores Microsoft Internet Explorer y Netscape Communicator.
1 2 3
Captulo 1. Introduccin
4 5 6 7 8 9
Cuando un acrnimo aparece por primera vez, se muestra el nombre completo en cursiva y entre parntesis y en
Interchange Format (
Graphics
negrita. Adems, se emplea una echa para indicar una Aceptar, Inicio Programas Accesorios.
Los nombres de las compaas se muestran con un tipo de letra de maysculas
pequeas. Ejemplo: Microsoft, Netscape, etc.
Los nombres de los programas se muestran con un tipo de letra sin palo (sans serif ). Ejemplo: Microsoft Paint, Netscape Navigator, Opera, etc. Los lenguajes informticos se muestran con un tipo de letra inclinada. Ejemplo:
C, Java, Perl,
etc.
Las extensiones de los cheros, las palabras clave de los lenguajes de programacin y el cdigo incluido dentro del texto se muestra con un
Ejemplo:
Captulo 2
Historia de Internet
En este captulo se presenta una breve historia de Internet. Se comentan los hechos ms importantes y se destacan las personas que ms han inuido en su desarrollo. Adems, se dedica un apartado especial a la historia de la Web y se presentan las cuatro generaciones de sitios web que existen actualmente.
ndice General
5
6 7 14
22
25 28 29 34
Captulo 2.
Historia de Internet
historia de Internet de unas pocas pginas slo se pueden nombrar a las personas ms importantes. Como reconocimiento al cambio que Internet ha producido en todos los niveles de la sociedad, el 23 de mayo de 2002 , Lawrence Roberts, Robert Kahn, Vinton Cerf y Tim Berners-Lee fueron distinguidos con el Premio Prncipe de Asturias de Investigacin Cientca y Tcnica en representacin de las miles de personas y muchas instituciones que han hecho posible este avance de nuestro tiempo. Segn la resolucin del jurado, Se les otorga el premio por haber diseado y realizado un sistema que est cambiando el mundo al ofrecer posibilidades antes impensables para el progreso cientco y social. A Lawrence (Larry) Roberts se le suele llamar el padre de Internet, porque fue el director del equipo de ingenieros que crearon ARPANET, el precursor de la actual Internet. A parte de ser el director, tambin fue el diseador principal de ARPANET. En 1972, Robert Kahn fue contratado por Lawrence Roberts para trabajar en ARPA. Trabaj en el desarrollo de un modelo de arquitectura de red abierta, donde cualquier ordenador pudiera comunicarse con cualquier otro, independientemente del hardware o el software particular de cada uno de ellos. Este trabajo le llev a desarrollar, junto con Vinton Cerf, el protocolo Transmission Control Protocol/Internet
Protocol (
TCP/IP).
Vinton Cerf estuvo implicado desde los primeros aos en el desarrollo de ARPANET. En 1973, se uni al proyecto de Robert Kahn de interconexin de redes. Su mayor contribucin ha sido el desarrollo, junto a Robert Kahn, de redes independientes entre s. creo
TCP/IP, el pro-
tocolo que gobierna las comunicaciones en Internet y que permite conectar distintas Finalmente, Tim Berners-Lee es conocido como el padre de la Web. l fue quien
Transfer Protocol (
HTML, el lenguaje empleado para crear los documentos de la Web; HyperText HTTP), el protocolo que emplean los ordenadores para comunicarse en la Web, y Universal Resource Locator (URL), como medio de localizacin
de los distintos recursos que forman la Web en Internet. Adems, tambin desarroll el primer servidor web y el primer navegador/editor web.
2.1.1.
A lo largo de la historia, los medios de comunicacin han evolucionado considerablemente. Se suele citar la capacidad de transmitir el conocimiento de una generacin a otra como una de las caractersticas que distingue a la especie humana de otras especies animales, ya que es la clave en el avance de la humanidad. Distintos acontecimientos han marcado hitos en la comunicacin. Si nos centramos en los ms importantes que se han producido desde el siglo XIX, destacan por orden cronolgico:
1 El
premio les fue entregado por el Prncipe de Asturias el 25 de octubre de 2002 en la ceremonia
2.1.
Historia de Internet
1833: distribucin en masa de peridicos. 1844: primer mensaje telegraado. 1858: primer intento de tender un cable de comunicaciones a travs del Ocano Atlntico. Deja de funcionar a los pocos das debido a problemas con el aislamiento del cable. 1866: se tiende con xito un cable de comunicaciones a travs del Ocano Atlntico. 1876: invencin del telfono por Alexander Graham Bell. 1901: primera seal de radio enviada a travs del Ocano Atlntico. 1917: primera llamada de telfono transcontinental. 1927: primera pelcula hablada. 1939: debut de la televisin en la Feria Mundial celebrada en Nueva York. 1950: inicio de las retransmisiones de televisin en color. 1958: los laboratorios Bell inventan el mdem. 1969: se crea ARPANET, el primer Internet. Es el primer medio de comunicacin que engloba todos los medios existentes: permite comunicacin escrita, sonora y de vdeo. Actualmente, Internet es un medio de comunicacin que incluye a todos los dems. A travs de Internet se puede leer el peridico, se pueden realizar llamadas de telfono, se puede ver la televisin o escuchar la radio, etc.
2.1.2.
El primer Internet
Las bases del actual Internet se crearon en la dcada de los sesenta. De forma paralela, y sin que hubiera conocimiento entre ellos del trabajo de los otros, en tres centros de investigacin se desarrollaron estudios sobre la comunicacin de ordenadores, la redes distribuidas y la conmutacin de paquetes: el Massachusetts Institute
of Technology (
MIT)
El origen de Internet se sita en plena Guerra Fra. En 1957, la extinta Unin de Repblicas Socialistas Soviticas (URSS) lanz al espacio el primer satlite: el Sputnik . La URSS estaba ganando la partida a los Estados Unidos de Norteamrica
2 La
que si se poda poner un satlite, entonces tambin se poda poner un arma nuclear.
Captulo 2.
Historia de Internet
(EEUU) en el desarrollo de nuevas tecnologas. Como respuesta a la amenaza que supona la URSS, los EEUU desarrollaron distintas iniciativas. Una de ellas fue crear en 1958 Advanced Research Projects Agency (
ARPA)
los Estados Unidos Dwight D. Eisenhower, encargada de desarrollar proyectos de investigacin avanzada. En 1962 comenz el programa de investigacin computacional de Roberts que provena del
ARPA y en 1966 el programa de comunicaciones bajo la direccin de Lawrence G. MIT. Dentro del programa de comunicaciones se desarroll
Por otro lado, la Fuerza Area de los Estados Unidos (U.S. Air Force ) encarg a
ARPANET, con el objetivo de explorar la distribucin y el uso compartido de recursos informticos y las comunicaciones basadas en conmutacin de paquetes. la organizacin The RAND Corporation el estudio de sistemas de comunicaciones digitales basados en sistemas distribuidos. El objetivo era desarrollar una red de comunicaciones militar tolerante a ataques nucleares. Paul Baran ide un sistema que no dependa de instalaciones centralizadas y que poda funcionar incluso si muchos de sus enlaces y nodos de comunicacin eran destruidos. Todos los nodos posean la misma condicin: eran autnomos y capaces de recibir, dirigir y transmitir la informacin. En el sistema de comunicacin ideado por Paul Baran, cada mensaje se divida en una serie de pequeos trozos de tamao establecido, y cada trozo se enviara de forma individual. Adems, cada trozo encontrara su camino hasta la direccin de destino: si partes de la red fueran destruidas, como cada nodo era autosuciente y cada trozo posea informacin sobre el origen y el destino, cada nodo establecera caminos alternativos para transmitir la informacin. Es debido al trabajo de Paul Baran el mito de que Internet se cre por los militares para hacer frente a un ataque nuclear. Sin embargo, esto es falso, ya que el proyecto ARPANET no tena unos nes militares, sino facilitar la comunicacin entre los cientcos. Finalmente, en el
NPL
otros investigadores trabajaron en la conmutacin de paquetes a mediados de los sesenta. Sin embargo, no fueron capaces de convencer al gobierno britnico de que nanciase sus experimentos en el desarrollo de redes de rea amplia. No obstante, fueron ellos los que acuaron los trminos paquete y conmutacin de paquetes. Los principales acontecimientos en este desarrollo a tres bandas fueron: 1961 (julio): Leonard Kleinrock publica Information Flow in Large Communication Nets, el primer artculo sobre conmutacin de paquetes. 1962 (agosto): J.C.R. Licklider escribe una serie de informes sobre su Galactic Network: un conjunto de ordenadores conectados globalmente a travs de los cuales cualquiera puede acceder a datos y programas existentes en cualquiera de ellos. 1962 (agosto): J.C.R. Licklider es nombrado director del primer programa de investigacin computacional en
ARPA.
2.1.
Historia de Internet
1964: Leonard Kleinrock publica Communication Nets, el primer libro sobre conmutacin de paquetes y redes de ordenadores. 1964 (agosto): Paul Baran (The RAND Corporation) publica On Distributed Communications, documento donde recoge todo su trabajo desarrollado sobre comunicaciones distribuidas, conmutacin de paquetes, etc. 1966 (agosto): Lawrence Roberts deja el
1966 (diciembre): Lawrence Roberts comienza el diseo de ARPANET. 1967 (octubre): En la ACM Operating Systems Symposium en Gatlinberg (Tennessee) se presentan dos artculos clave en el desarrollo de Internet:
Multiple Computer Networks and Intercomputer Communication de Lawrence Roberts, donde se presenta el diseo de ARPANET. A Digital Communications Network for Computers, de Donald Davies, Roger Scantlebury y otros, donde se introducen por primera vez los conceptos de paquete y conmutacin de paquetes.
En este conferencia, Lawrence Roberts y Roger Scantlebury se conocen, intercambian ideas y Scantlebury le habla a Roberts de Paul Baran y su trabajo. 1968 (diciembre): La empresa Bolt Beranek and Newman gana la licitacin para construir el primer Interface Message Processor ( 1,1 MHz y un peso de unos 400 Kg (Figura 2.1). 1969 (abril): Aparece el primer Request for Comments ( Software, escrito por Steve Crocker. 1969 (septiembre): El 1 de septiembre se instala el primer nodo de ARPANET en la Universidad de California en Los ngeles (UCLA). Se conecta el a un ordenador XDS (Xerox Data Systems) muestra un boceto de este primer nodo realizado por Lawrence Roberts. 1969 (octubre): El segundo nodo de ARPANET se instala en el Instituto de Investigacin de Stanford (Stanford Research Institute, SRI). Se conecta el ARPANET. 1969 (noviembre): Se instala el tercer nodo de ARPANET en la Universidad de California en Santa Brbara (UCSB). El un miniordenador Honeywell DDP-516 con 12K de memoria, una velocidad de
IMP
3 Tambin
10
Captulo 2.
Historia de Internet
2.1.
Historia de Internet
11
12
Captulo 2.
Historia de Internet
2.1.
Historia de Internet
13
1970 (diciembre): Se completa Network Control Protocol ( tocolo host-to-host empleado en ARPANET.
1971 (abril): 15 nodos conectados a ARPANET. En la Figura 2.4 se muestra el diseo lgico de ARPANET con los 15 nodos.
1972 (marzo): Ray Tomlinson de Bolt Beranek and Newman crea el primer programa de correo electrnico.
1972 (octubre): Primera demostracin pblica de ARPANET en International Conference on Computer Communications en Washington D.C.
14
Captulo 2.
Historia de Internet
1974 (mayo): Robert Kahn y Vinton Cerf publican A Protocol for Packet Network Interconnection, en IEEE Transaction on Communications . En este artculo se presenta el primer protocolo de interconexin de redes (TCP). Adems, aparece por primera vez el trmino Internet. 1978 (marzo): TCP se separa en
extremo a extremo e IP del proceso de direccionamiento. 1983: ARPANET se divide en MILNET (formada 45 nodos de carcter militar) y ARPANET (68 nodos de carcter civil). 1983 (enero): A partir del 1 de enero, cualquier mquina conectada a ARPANET debe usar
1988 (2 de noviembre): El primer gusano ataca Internet. 1989: ARPANET se cierra. 1990 (noviembre): Se instala el primer servidor web en el Conseil Europenne
CERN).
2.1.3.
Protocolos de Internet
tocolos de comunicacin que permiten el intercambio de informacin de forma independiente de los sistemas en que sta se encuentra almacenada. 1983, la solucin problema de heterogeneidad de los sistemas informticos. El 1 de enero de El conjunto de protocolos
TCP/IP se estableci como el protocolo estndar de comunicacin en Internet. TCP/IP, tambin llamado la pila de protocolos TCP/IP, incluye una serie de protocolos que se encuentran en el nivel 7 o de aplicacin de la arquitectura Open System Interconnection (OSI) y que proporcionan una
serie de servicios. Como un mismo ordenador puede atender varios servicios, cada servicio se identica con un nmero llamado puerto. Por tanto, a cada protocolo le corresponde un nmero de puerto. Los protocolos que se encuentran estandarizados poseen un puerto reservado que no puede emplear ningn otro protocolo. En el Cuadro 2.1 se muestran los protocolos del nivel 7 ms comunes de Internet junto con el nmero de puerto que emplean. Adems de los anteriores protocolos, existen otros menos conocidos que se encuentran en diferentes niveles de la arquitectura
Protocol (ARP), Dynamic Host Conguration Protocol (DHCP), Finger, Gopher, Internet Control Messaging Protocol (ICMP), Internet Relay Chat (IRC), Network File
4 V.G.
Cerf y R.E. Kahn. A Protocol for Packet Network Interconnection. IEEE Transaction on
2.2.
Historia de la Web
15
Nombre
File Transfer Protocol Telnet Simple Mail Transfer Protocol Domain Name System HyperText Transfer Protocol Post Oce Protocol v3 Network Protocol News Transfer
System (NFS), Network Time Protocol (NTP), Routing Information Protocol (RIP)
y Simple Network Management Protocol (SNMP).
HTML como lenguaje para crear los contenidos de la Web, basado en Standard Generalized Markup Language (SGML). HTTP como protocolo de comunicacin entre los ordenadores de la Web, encargado de la transferencia de las pginas web y dems recursos.
URL
en Internet. Los acontecimientos ms importantes en el nacimiento de la Web se remontan a los aos cuarenta: 1945: Vannevar Bush escribe el artculo As We May Think en The Atlantic
Monthly
5 Vannevar
julio 1945.
Bush. As We May Think. The Atlantic Monthly. Volumen 176, no 1, pginas 101-108,
16
Captulo 2.
Historia de Internet
de crear y seguir enlaces entre distintos documentos almacenados en microchas (en denitiva, un sistema muy parecido a lo que hoy conocemos como hipertexto). [. . . ] Consider a future device for individual use, which is a sort of mechanized private le and library. It needs a name, and, to coin on at random, memex will do. A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and exibility. It is an enlarged intimate supplement to his memory. [. . . ] All this is conventional, except for the projection forward of present-day mechanisms and gadgetry. It aords an immediate step, however, to associative indexing, the basic idea of which is a provision whereby any item may be caused at will to select immediately and automatically another. This is the essential feature of the memex. The process of tying two items together is the important thing.
[. . . ] Considera un dispositivo futuro para uso individual, que es una especie de archivo y biblioteca personal mecanizada. Necesita un nombre, y, acuando uno al azar, 'memex servir. Un memex es un dispositivo en el que un individuo almacena todos sus libros, registros y comunicaciones, y que est mecanizado de forma que se puede consultar con una gran velocidad y exibilidad. Es un ntimo complemento a su memoria. [. . . ] Todo esto es convencional, excepto por la proyeccin futura de mecanismos y artilugios actuales. Sin embargo, permite un paso inmediato al indexado asociativo, cuya idea bsica es permitir que a
2.2.
Historia de la Web
17
partir de cualquier elemento se pueda seleccionar inmediatamente y automticamente otro cuando se desee. Esta es la caracterstica fundamental del memex. El proceso de ligar dos elementos juntos es el aspecto importante.
Vannevar Bush, As We May Think 1965: Ted Nelson acua el trmino hipertexto en el artculo A File Structure for the Complex, the Changing, and the Indeterminate . Comienza el desarro-
7 llo del proyecto Xanadu , un sistema basado en hipertexto que nunca lleg a
completarse (an contina su desarrollo). 1967: Andy van Dam y su equipo construyen Hypertext Editing System (HES), el
primer sistema de hipertexto. Sus principales caractersticas son: permite editar grandes cantidades de texto en pantalla, permite teclear cadenas tan largas como el usuario desee y permite enlaces dentro de un documento que conducen a otras partes del mismo documento o a otro documento. 1968: Doug Engelbart y su equipo dan a conocer su sistema On-Line System (NLS), una herramienta de trabajo en grupo con soporte de enlaces entre documentos. 1969: Andy van Dam y su equipo construyen File Retrieval and Editing System (FRESS) a partir de su anterior sistema Hypertext Editing System. Sus principales caractersticas son: permite el empleo de terminales grcos y, por tanto, el empleo de caracteres no occidentales y cualquier smbolo en pantalla, los enlaces pueden ser bidireccionales y posee la capacidad de deshacer. 1980: mientras trabaja en el
CERN,
llamado Enquire-Within-Upon-Everything, que permite crear enlaces entre nodos. Un nodo posee un ttulo, un tipo y una lista de enlaces. 1989 (marzo): Tim Berners-Lee escribe Information Management: A Proposal, un informe interno que circula por el
CERN.
1990 (septiembre): Mike Sendall, jefe de Tim Berners-Lee da el visto bueno a la compra del ordenador NeXT, lo que permite a Tim seguir adelante y crear un sistema global de hipertexto. 1990 (octubre): Tim Berners-Lee comienza a desarrollar un editor y navegador grco de hipertexto para NeXTStep, el sistema operativo con entorno grco de los ordenadores NeXT. Elige WorldWideWeb como nombre del programa y World Wide Web como nombre del proyecto, despus de descartar una serie de nombres: Information Mesh, Mine of Information e Information Mine.
6 Ted
Nelson. A File Structure for the Complex, the Changing, and the Indeterminate. 20th Na-
tional Conference ACM, pginas 84-100, New York. Association for Computing Machinery, 1965.
7 http://www.xanadu.net/.
18
Captulo 2.
Historia de Internet
9 pgina web .
8 y se publica la primera
Figura 2.6: Tim Berners-Lee junto a una pantalla de ordenador que muestra su primer navegador web
WWW en el CERN.
1991 (agosto): se publican en Internet los cheros del primer navegador. 1991 (diciembre): Paul Kunz instala el primer servidor web fuera de Europa en
SLAC).
1992: aparecen los primeros navegadores de terceras partes, Erwise, Viola y Midas. 1992: Marc Andreesen y Eric Bina comienzan a trabajar en un nuevo navegador grco para Unix en National Center for Supercomputing Applications (NCSA). Posee nuevas caractersticas innovadoras como: la etiqueta <CENTER> ... </CENTER>, la inclusin de imgenes en lnea (antes se visualizaban aparte), navegacin ms sencilla a travs de hiperenlaces que se pueden pulsar, etc. 1993 (febrero): Se publica el navegador grco NCSA Mosaic para X-Windows sobre Unix.
8 nxoc01.cern.ch. 9 http://nxoc01.cern.ch/hypertext/WWW/TheProject.html.
2.2.
Historia de la Web
19
CERN
WWW
podr ser usada gratuitamente por cualquiera, sin tener que pagar ningn tipo
Figura 2.7: Pgina actual visualizada con Mosaic 1.0 En la Figura 2.7 se puede ver como se muestra la pgina principal del Departamento de Lenguajes y Sistemas Informticos de la Universidad de Alicante
10 con
la versin 1.0 de este navegador para Microsoft Windows 3.0. En la Figura 2.8 se muestra la misma pgina visualizada con un navegador actual (la versin 4.78 de Netscape Communicator). Como se puede apreciar, la versin 1.0 de NCSA Mosaic no estaba preparada para mostrar imgenes Joint Photographic Experts
Group (
JPEG),
10 http://altea.dlsi.ua.es/index_c.html.
20
Captulo 2.
Historia de Internet
2.2.
Historia de la Web
21
a llamarse Netscape Communications Corporation. 1994 (25 a 27 de mayo): Se celebra First International WWW Conference en el
1994 (agosto): La Universidad de Illinois rma un acuerdo de cesin de los derechos comerciales de NCSA Mosaic con la empresa Spyglass. 1994 (1 de octubre): Se funda World Wide Web Consortium (
W3C).
1994 (17 a 19 de octubre): Se celebra Second International WWW Conference en Chicago (EE.UU.). Vuelve a ser un xito completo. 1994 (diciembre): Se lanza al mercado Netscape Navigator 1.0. 1995 (10 al 14 de abril): Se celebra Third International WWW Conference en Darmstadt (Alemania). 1995 (mayo): Sun Microsystems anuncia la existencia de Java 1.0 y Netscape Communications Corporation lo soportar en sus navegadores a travs
de los applets . 1995 (agosto): Coincidiendo con el lanzamiento de Microsoft Windows 95, se presenta Microsoft Internet Explorer 1.0, basado en cdigo licenciado a Spyglass (que a su vez es una licencia comercial de NCSA Mosaic). A partir de entonces, comienza la guerra de los navegadores. En la Figura 2.10 se puede ver el cuadro de dilogo
Explorer 5.5. Se puede comprobar como an esta versin se basa en NCSA Mosaic. 1995 (noviembre): Se lanza al mercado Microsoft Internet Explorer 2.0. 1996 (marzo): Se lanza al mercado Netscape Navigator 2.0. Incorpora nuevas caractersticas como elementos de
applets programados en
Java,
1996 (agosto): Se lanza al mercado Microsoft Internet Explorer 3.0. Proporciona soporte para marcos y programacin con lenguajes de script (JScript y VBScript ).
1996 (agosto): Se lanza al mercado Netscape Navigator 3.0. 1997 (enero): La versin 3.0 es la ltima versin de NCSA Mosaic. La guerra de navegadores contina . . .
22
Captulo 2.
Historia de Internet
Figura 2.10: Cuadro de dilogo Acerca de Internet Explorer en Microsoft Internet Explorer 5.5
2.2.1.
El primer navegador
El primer navegador web, que tambin era editor, fue programado por Tim BernersLee a nales de 1990. Al principio lo llam WorldWideWeb, pero despus cambi el nombre por Nexus, ya que empezaba a usarse World Wide Web para referirse de forma genrica al sistema de comunicacin que haba ideado. Este primer navegador se program en Ob jective-C en un ordenador NeXT. Segn Tim, le llev un par de meses programarlo, gracias a que el sistema operativo NeXTStep facilitaba la programacin al disponer de herramientas para construir los mens, tecnologa What You See Is What You Get (
WYSIWYG), etc.
En la Figura 2.11 y 2.12 se muestran dos imgenes del navegador. El navegador que se observa en la Figura 2.12 es una versin del ao 1993. Se pueden observar varios aspectos interesantes en esta ltima imagen: El sistema operativo NeXTStep presenta un llamativo entorno grco multiventana. En la esquina superior izquierda se puede observar el men del navegador, con su nombre en la primera lnea (WorldWideWeb). Se pueden ver dos ventanas que muestran imgenes en lnea (un libro y el logotipo del
2.2.
Historia de la Web
23
El men
Links aparece abierto. Se est creando un enlace sobre la palabra ATLAS que aparece resaltada en la ventana con ttulo CERN Experiments X que tienen las ventanas permite cerrarlas (ms tarde lo copiara MicroTim's Home Page
tiene la
La
soft).
24
Captulo 2.
Historia de Internet
2.3.
25
Site Design
fecha en la que estableci su clasicacin, ha evolucionado la tecnologa empleada en la Web, por lo que se puede aadir una generacin ms a su clasicacin. Actualmente las cuatro generaciones conviven, aunque ya casi nadie crea sitios web que se clasiquen en las dos primeras generaciones.
2.3.1.
Primera generacin
La primera generacin abarca desde el nacimiento de la Web (1992) hasta mediados de 1994. La creacin de pginas web durante esta generacin se ve limitada por diversas razones tecnolgicas: ancho de banda limitado (mdems de 2.4 Kbps), navegadores poco desarrollados, monitores monocromos, etc. Las caractersticas principales de estas pginas son: Tiempo de carga rpido: son pginas basadas en texto, con muy pocas imgenes y ningn recurso multimedia. Navegacin poco estructurada, con falta de coherencia. Pginas largas, que parece que nunca se acaban. La informacin no se suele organizar en varias pginas, ya que as se reduce el nmero de transferencias. Texto escrito como si fuera una hoja de papel: de lado a lado de la pgina y desde el principio hasta el nal. Empleo de saltos de lnea como separadores. Empleo de lneas horizontales para separar secciones en una misma pgina. Empleo de listas para organizar la informacin. Poco uso de los enlaces entre pginas de un mismo sitio web. Como las pginas son muy largas, se emplean muchos enlaces intradocumentales. Listas interminables de enlaces a otros sitios web. Se pueden visualizar correctamente casi en cualquier navegador (incluso los navegadores no grcos), pero son aburridas y poco legibles. Las pginas web poseen un contenido educativo o cientco. Pocas empresas poseen un sitio web.
11 David
Siegel. Creating Killer Web Sites: The Art of Third-Generation Site Design. Hayden
Books, 1996.
26
Captulo 2.
Historia de Internet
En denitiva, durante este primer periodo, se emplea la Web como si fuera uno de los medios de comunicacin tradicionales (libros, revistas, etc.). An no se sabe como aprovechar todas las posibilidades que ofrece la Web. Respecto a la generacin de las pginas, no existe generacin: las pginas son estticas. A nales de este primer periodo aparece la tecnologa Common Gateway
Interface (
En la Figura 2.13
cientes a la primera generacin. Se pueden apreciar en estas pginas las principales caractersticas de esta generacin: pginas simples, poco o nulo empleo de elementos grcos, empleo de listas para organizar la informacin, empleo de lneas horizontales como separadores, etc.
12 http://www.luth.se/luth/present/sweden/history/viking_level. 13 http://www.library.cornell.edu/okuref/research/webeval.html.
2.3.
27
28
Captulo 2.
Historia de Internet
2.3.2.
Segunda generacin
La segunda generacin se extiende desde 1995 hasta la actualidad. La diferencia principal con las pginas web de la generacin anterior es la masiva incorporacin de elementos grcos en las pginas web: Los iconos sustituyen a las palabras. El color de fondo se sustituye por una imagen de fondo. Los banners sustituyen a los encabezados de las pginas. Las listas normales se sustituyen por listas con topos Sus caractersticas principales son: Tiempo de carga lento: se emplean imgenes con multitud de colores y animaciones en exceso, debido a la novedad de su uso. No se comprueba el rendimiento de las pginas con conexiones lentas: no se tiene en cuenta al usuario nal. El color de fondo de las pginas deja de ser el blanco o el gris. Incluso, se emplean imgenes como fondo de las pginas. Empleo de tablas, aunque no con el propsito de situar el contenido (tablas invisibles), sino para mostrar datos tabulados. Las pginas todava poseen una estructura de arriba a abajo. La navegacin suele ser jerrquica, a partir de una pgina principal. Sin embargo, no existe una losofa de planicacin de la navegacin. Aparecen tecnologas multimedia propietarias, que necesitan la instalacin de un
14 (bullets ) grcos.
de posibilidades enorme: la creacin de aplicaciones web que acceden a bases de datos. Las primeras aplicaciones que se desarrollan son pequeas y sencillas: libro de visitas, formulario de ms informacin, etc. Si se necesita almacenar informacin de forma persistente, se emplean cheros en vez de bases de datos.
14 Los
topos o bolos son caracteres de imprenta o elementos grcos que representan un gura
geomtrica y que se emplean para destacar el comienzo de un prrafo o apartado, un sumario, las acepciones de un diccionario, etc.
2.3.
29
En la Figura 2.15
cientes a esta segunda generacin. Se pueden apreciar las principales caractersticas de esta generacin: empleo de imgenes como fondo de la pgina, uso excesivo de elementos grcos (imgenes, iconos), listas con topos grcos, empleo de tablas, etc.
2.3.3.
Tercera generacin
La tercera generacin aparece a mediados de 1996. Las pginas pertenecientes a esta generacin son las ms comunes en la actualidad. Se caracterizan por: Tiempo de carga rpido: los creadores de las pginas se centran en el contenido y no en la presentacin. Se minimiza el tiempo de carga mediante un uso minimalista de los recursos grcos, el uso de Cascading Style Sheets (
CSS) y
15 http://www.ua.es/ursua/. 16 http://www.cehipar.es/index.htm.
30
Captulo 2.
Historia de Internet
2.3.
31
HTML.
empleando conexiones a distintas velocidades. Las pginas se limitan para que se puedan visualizar completamente en una pantalla, sin tener que realizar desplazamiento (scroll ). Los sitios web se crean teniendo en cuenta los posibles usuarios y el objetivo del sitio (informar, vender, ofrecer servicios, etc.). Se limita el nmero de enlaces, se simplica la navegacin. Se organiza la informacin a partir de una pgina inicial hasta una pgina nal, ofreciendo distintos caminos. Se tienen en cuenta principios tipogrcos y de organizacin visual de la informacin. Se emplean metforas y temas visuales para seducir y guiar al usuario, creando una experiencia completa desde la primera pgina hasta la ltima. Se incorporan los principios de usabilidad y accesibilidad. Se comprueba con usuarios reales el funcionamiento de los sitios web. En los sitios web de las empresas cobra importancia la creacin de una identidad corporativa. Se emplean de forma coherente los colores, las imgenes, los smbolos e iconos, los tipos de letra, etc. La caracterstica principal de las pginas web pertenecientes a la tercera generacin es la planicacin: los diseadores invierten tiempo en analizar los posibles caminos que los visitantes tomarn al visitar un sitio web, y en funcin de ello disean los sitios web. La estructura del sitio web cobra una gran importancia. Durante este periodo tiene lugar una explosin en el nmero de herramientas informticas relacionadas con la Web. En cuanto a la generacin de las pginas, este periodo supone la consolidacin de la generacin de pginas web dinmicas. El uso de
a sus limitaciones aparecen nuevas tecnologas. Las primeras soluciones relevantes provienen de Microsoft, primero con Internet Database Connector ( con Active Server Pages (
IDC) y luego ASP), que supone una verdadera revolucin en la creacin JSP) basada en Java.
de pginas web dinmicas. A partir de ah aparecen nuevas tecnologas ColdFusion, PHP o Java Server Pages ( En la Figura 2.17
cientes a la tercera generacin. En estas pginas las principales caractersticas que se pueden apreciar son: el tamao de las pginas se limita para que quepan en el rea de una ventana, se limita el nmero de enlaces, se simplica la navegacin, se tienen en cuenta principios tipogrcos y de organizacin de la informacin, etc.
17 http://www.renault.es. 18 http://www.ua.es/es/index.html.
32
Captulo 2.
Historia de Internet
2.3.
33
34
Captulo 2.
Historia de Internet
2.3.4.
Cuarta generacin
La cuarta y ltima generacin empieza a desarrollarse plenamente en 1999 y discurre hasta la actualidad. Sus caractersticas principales son: Se vuelven a emplear en exceso los recursos grcos. En muchos casos se intenta aprovechar hasta el ltimo pixel de la pgina para presentar informacin.
HTML
HTML (
DHTML).
CSS,
sualizacin de las pginas web, pero a costa de incompatibilidades entre distintos navegadores. Uso de nuevas tecnologas multimedia (como Macromedia Flash crear un sitio web sin tener que emplear
HTML.
19 ): se puede
Los principios empleados en la creacin de CD-ROM interactivos se aplican en la creacin de pginas web. Un equipo interdisciplinar (informtico, experto en contenidos, diseador grco, etc.) desarrolla los sitios web. El aumento del ancho de banda permite streaming de video y audio en tiempo real. El objetivo al desarrollar un sitio web es crear una experiencia completa desde que el visitante visualiza la primera pgina hasta que abandona el sitio web. Respecto a la generacin de pginas web dinmicas supone la consolidacin de las tecnologas de generacin dinmica. La mayora de las pginas web pertenecientes a esta generacin se crean a partir de informacin almacenada en bases de datos. En la Figura 2.19
pertenecientes a la cuarta generacin. En estas pginas podemos detectar las principales caractersticas de esta generacin: uso excesivo de elementos grcos, empleo de tecnologas multimedia como Macromedia Flash, aprovechamiento hasta el ltimo pixel de la pgina (en la pgina de la Figura 2.19), etc.
19 En
diciembre de 1996, Macromedia Inc. compr a Jonathan Gay su herramienta de animacin que pas a llamarse Macromedia Flash.
FutureWave Software,
2.3.
35
36
Captulo 2.
Historia de Internet
2.3.
37
Captulo 3
Arquitecturas cliente/servidor
Las aplicaciones web son un tipo especial de aplicaciones cliente/servidor. Antes de aprender a programar aplicaciones web conviene conocer las caractersticas bsicas de las arquitecturas cliente/servidor.
ndice General
3.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . 39 3.2. Separacin de funciones . . . . . . . . . . . . . . . . . . . 40 3.3. Modelos de distribucin en aplicaciones cliente/servidor 42
3.3.1. 3.3.2. 3.3.3. Presentacin distribuida . . . . . . . . . . . . . . . . . . . Aplicacin distribuida Datos distribuidos . . . . . . . . . . . . . . . . . . . . 42 43 43 . . . . . . . . . . . . . . . . . . . . . .
3.1. Introduccin
Cliente/servidor es una arquitectura de red la red es
1 Otro
tipo de arquitectura de red es peer-to-peer (entre pares o de igual a igual), en la que cada un mismo ordenador puede ser cliente y servidor simultneamente, se establece una
2 Aunque
39
40
Captulo 3.
Arquitecturas cliente/servidor
de impresoras), trco de red (servidor de red), datos (servidor de bases de datos) o incluso aplicaciones (servidor de aplicaciones), mientras que los clientes son mquinas menos potentes y usan los recursos que ofrecen los servidores. Dentro de los clientes se suelen distinguir dos clases: los clientes inteligentes (rich
client ) y los clientes tontos (thin client ). Los primeros son ordenadores completos, con
todo el hardware y software necesarios para poder funcionar de forma independiente. Los segundos son terminales que no pueden funcionar de forma independiente, ya que necesitan de un servidor para ser operativos. Esta arquitectura implica la existencia de una relacin entre procesos que solicitan servicios (
clientes)
servidores).
Estos
dos tipos de procesos pueden ejecutarse en el mismo procesador o en distintos. La arquitectura cliente/servidor permite la creacin de aplicaciones distribuidas. La principal ventaja de esta arquitectura es que facilita la separacin de las funciones segn su servicio, permitiendo situar cada funcin en la plataforma ms adecuada para su ejecucin. Adems, tambin presenta las siguientes ventajas: Las redes de ordenadores permiten que mltiples procesadores puedan ejecutar partes distribuidas de una misma aplicacin, logrando concurrencia de procesos. Existe la posibilidad de migrar aplicaciones de un procesador a otro con modicaciones mnimas en los programas. Se obtiene una escalabilidad de la aplicacin. Permite la ampliacin horizontal o vertical de las aplicaciones. La
cidad de aadir o suprimir estaciones de trabajo que hagan uso de la aplicacin (clientes), sin que afecte sustancialmente al rendimiento general (Figura 3.1). La
de mayor capacidad o velocidad, o de un tipo distinto de arquitectura sin que afecte a los clientes (Figura 3.2). Posibilita el acceso a los datos independientemente de donde se encuentre el usuario.
3.2.
Separacin de funciones
41
42
Captulo 3.
Arquitecturas cliente/servidor
Figura 3.3: Separacin de funciones Si un sistema distribuido se disea correctamente, los tres niveles anteriores pueden distribuirse y redistribuirse independientemente sin afectar al funcionamiento de la aplicacin.
3.3.1.
Presentacin distribuida
El cliente slo mantiene la presentacin, el resto de la aplicacin se ejecuta remotamente (Figura 3.4). La presentacin distribuida, en su forma ms simple, es una interfaz grca de usuario a la que se le pueden acoplar controles de validacin de datos, para evitar la validacin de los mismos en el servidor.
3.3.
43
3.3.2.
Aplicacin distribuida
Es el modelo que proporciona mxima exibilidad, puesto que permite tanto a servidor como a cliente mantener la lgica de negocio realizando cada uno las funciones que le sean ms propias, bien por organizacin, o bien por mejora en el rendimiento del sistema (Figura 3.5).
3.3.3.
Datos distribuidos
Los datos son los que se distribuyen, por lo que la lgica de datos es lo que queda separada del resto de la aplicacin (Figura 3.6). Se puede dar de dos formas: cheros distribuidos o bases de datos distribuidas.
44
Captulo 3.
Arquitecturas cliente/servidor
3.5.
45
3.
El entorno suele ser heterogneo y multivendedor . El hardware y sistema operativo del cliente y el servidor suelen diferir. El cliente y el servidor se suelen comunicar a travs de una Application Program Interface (
Call (
RPC)
para acceder a bases de datos). 4. Normalmente la parte cliente se implementa haciendo uso de una interfaz grca de usuario, que permite la introduccin de datos a travs de teclado, ratn, lpiz ptico, etc.
3 Se
Captulo 4
ndice General
4.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4.1.1. 4.1.2. El cliente El servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 49
4.4. Ventajas y desventajas . . . . . . . . . . . . . . . . . . . . 53 4.5. Arquitecturas de las aplicaciones web . . . . . . . . . . . 54 4.6. Metodologa de desarrollo de sitios web . . . . . . . . . . 59
47
48
Captulo 4.
4.1. Introduccin
te/servidor, donde tanto el
cliente (el navegador, explorador o visualizador1 ) como el servidor (el servidor web) y el protocolo mediante el que se comunican (HTTP)
(Figura 4.1).
estn estandarizados y no han de ser creados por el programador de aplicaciones El protocolo HTTP forma parte de la familia de protocolos de comunicaciones TCP/IP, que son los empleados en Internet. Estos protocolos permiten la conexin de sistemas heterogneos, lo que facilita el intercambio de informacin entre distintos ordenadores.
4.1.1.
El cliente
El cliente web es un programa con el que interacciona el usuario para solicitar a un servidor web el envo de los recursos que desea obtener mediante
HTTP2 . La parte cliente de las aplicaciones web suele estar formada por el cdigo HTML
3 que permiten visualizar otros
que forma la pgina web ms algo de cdigo ejecutable realizado en lenguaje de script del navegador (JavaScript o VBScript ) o mediante pequeos programas (applets ) realizados en Java. Tambin se suelen emplear plug-ins
1 En ingls se le suele denominar browser. 2 Los clientes web tambin suelen actuar como clientes de transferencia de archivos (FTP), lectores
de correo (SMTP y POP) y grupos de noticias (NNTP), etc.
3 Un plug-in
ma o sistema y que proporciona nuevas caractersticas o servicios al programa o sistema. En los navegadores, suelen permitir la reproduccin de diferentes tipos de recursos de audio o vdeo.
4.1.
Introduccin
49
contenidos multimedia (como Macromedia Flash ), aunque no se encuentran tan extendidos como las tecnologas anteriores y plantean problemas de incompatibilidad entre distintas plataformas. Por tanto, la misin del cliente web es interpretar las pginas
Las tecnologas que se suelen emplear para programar el cliente web son:
Applets programados en
Java.
Distintas tecnologas que necesitan la existencia de un plug-in en el navegador: Adobe Acrobat Reader, Autodesk MapGuide, Live Picture PhotoVista, Macromedia Flash, Macromedia Shockwave, Virtual Reality Modeling Language ( etc.
VRML),
4.1.2.
El servidor
El servidor web es un programa que est esperando permanentemente las solicitudes de conexin mediante el protocolo
sistemas Unix suele ser un demonio y en los sistemas Microsoft Windows un servicio. La parte servidor de las aplicaciones web est formada por: Pginas estticas (documentos nido. Recursos adicionales (multimedia, documentos adicionales, etc.) que se pueden emplear dentro de las pginas o estar disponibles para ser descargados y ejecutados (visualizados) en el cliente. Programas o scripts que son ejecutados por el servidor web cuando el navegador del cliente solicita algunas pginas. La salida de este script suele ser una pgina
HTML
Inc.
50
Captulo 4.
La programacin del servidor mediante CGI es compleja y laboriosa. El protocolo HTTP no almacena el estado entre una conexin y la siguiente (es un protocolo sin estado), por lo que es el programador el que se tiene que encargar de conservarlo. Esto conduce a que el programador tenga que dedicar parte de su tiempo a programar tareas ajenas al n de la aplicacin, lo que suele ser origen de diversos problemas. Sin embargo, con la entrada en 1995 de Microsoft en el mundo Internet y la salida al mercado de su servidor web (Microsoft Internet Information Server) se abri un nuevo campo para las aplicaciones web: Internet Server Application Program In-
terface (
ISAPI).
disposicin de los programadores de aplicaciones web. Con dores pueden crear Dynamic Link Library ( determinada extensin). Por ejemplo, todo el sistema
DLL)
ISAPI,
los programa-
para determinados archivos (se ejecutan cuando el cliente solicita un archivo con una
ASP, no es ms que una DLL del tipo ISAPI que .asp5 . La DLL
a ejecutar
en el servidor. Sin embargo, ella no interpreta directamente el cdigo, sino que en funcin del lenguaje en el que est escrito (VBScript , JavaScript , etc.), invoca a otra que se encarga de ejecutar el script. Despus recoge la salida y se la enva al servidor web, el cual a su vez la reenva al cliente. Las ventajas que presenta Las pginas basadas en ciones
CGI resultan difciles de mantener, ya que las instrucHTML se encuentran insertadas en el propio cdigo del programa CGI, CGI
es muy ineciente, debido al proceso de
carga del cdigo en memoria que se realiza cada vez que un usuario requiere su ejecucin. La existencia de mltiples clientes simultneos supone mltiples copias del programa en memoria del servidor. La unin de
(estn ms integrados),
ASP,
JSP,
servlets ,
5 En
normalmente se instala en
4.2.
51
En la Figura 4.2 se han resumido las tecnologas que se emplean en la actualidad para programar el cliente y el servidor de las aplicaciones web.
HTML, el cliente inicia sus labores de interpretacin HTML. Si el cliente web encuentra instrucciones que hacen re-
ferencia a otros objetos que se tienen que mostrar con la pgina (imgenes, sonidos, animaciones multimedia, etc.), establece automticamente comunicacin con el servidor web para solicitar dichos objetos.
52
Captulo 4.
6.
7.
Obsrvese que siempre se libera la conexin, por lo que sta slo tiene la duracin correspondiente a la transmisin de la pgina solicitada. Esto se hace as para no desperdiciar innecesariamente el ancho de banda de la red mientras el usuario lee la pgina recibida. Cuando el usuario activa un enlace de la pgina, se establece una nueva conexin para recibir otra pgina o elemento multimedia. Por ello, el usuario tiene la sensacin de que est disfrutando de una conexin permanente cuando realmente no es as. Un detalle importante es que para cada objeto que se transere por la red se realiza una conexin independiente. Por ejemplo, si el cliente web solicita una pgina que contiene dos imgenes integradas, se realizan tres conexiones: una para el documento
4.3.1.
Internet
En 1998, la Internet tena ms de 100 millones de usuarios en todo el mundo, en diciembre de 2000 unos 400 millones, en junio de 2002 unos 600 millones y el nmero sigue creciendo rpidamente. Ms de 100 pases estn conectados a este nuevo medio para intercambiar todo tipo de informacin. Al contrario que otros servicios online, que se controlan de forma centralizada, la Internet posee un diseo descentralizado. Cada ordenador (host ) en la Internet es independiente. Sus operadores pueden elegir que servicio de Internet usar y que servicios locales quieren proporcionar al resto de la Internet. Asombrosamente, este diseo anrquico funciona satisfactoriamente. Existe una gran variedad de formas de acceder a la Internet. El mtodo ms comn es obtener acceso a travs de Proveedores de servicios de Internet (Internet Service
Provider (
ISP)).
Cuando se emplea la palabra internet en minsculas, nos referimos a un conjunto de dos o ms redes de ordenadores interconectadas entre s.
6 Mediante HTTP
4.4.
Ventajas y desventajas
53
4.3.2.
Internet (
Intranet
Una intranet es una red de ordenadores basada en los protocolos que gobiernan por los miembros de la organizacin, empleados u otras personas con autorizacin.
Una intranet puede estar o no conectada a Internet. Un sitio web en una intranet es y acta como cualquier otro sitio web, pero los cortafuegos (rewall ) lo protegen de accesos no autorizados (su acceso est limitado a un mbito local). Al igual que Internet, las intranets se usan para distribuir y compartir informacin. Las intrantes hoy en da componen el segmento con mayor crecimiento dentro de Internet, porque son menos caras de montar y de administrar que las redes privadas que se basan en protocolos propietarios.
4.3.3.
Extranet
Una extranet es una intranet a la que pueden acceder parcialmente personas autorizadas ajenas a la organizacin o empresa propietaria de la intranet. Mientras que una intranet reside detrs de un cortafuego y slo es accesible por las personas que forman parte de la organizacin propietaria de la intranet, una extranet proporciona diferentes niveles de acceso a personas que se encuentran en el exterior de la organizacin. Esos usuarios pueden acceder a la extranet slo si poseen un nombre de usuario y una contrasea con los que identicarse. La identidad del usuario determina que partes de la extranet puede visualizar. Adems, para acceder a una extranet se suelen emplear medios de comunicacin seguros, como Secure Socket Layer (
Las extranets se estn convirtiendo en un medio muy usado por empresas que colaboran para compartir informacin entre ellas. Se emplean como medio de comunicacin de una empresa con sus clientes, proveedores o socios. Las extranets son la base del comercio electrnico entre empresas (business to business, B2B).
cin por todo el mundo de los estndares y tecnologas que emplea: medio de transpor-
estandarizados. Muchas empresas han descubierto que las anteriores tecnologas se pueden emplear en las aplicaciones cliente/servidor que emplean. De esta forma nace el concepto de intranet: usar las tecnologas de Internet para implementar las tradicionales aplicaciones cliente/servidor dentro de una empresa. Adems, una vez que se tiene una aplicacin que funciona en una intranet, aparece la posibilidad de permitir su uso a
54
Captulo 4.
travs de Internet, lo que facilita el teletrabajo o la movilidad de los empleados de una empresa . Una ventaja clave del uso de aplicaciones web es que el problema de gestionar el cdigo en el cliente se reduce drsticamente. Suponiendo que existe un navegador o explorador estndar en cada cliente, todos los cambios, tanto de interfaz como de funcionalidad, que se deseen realizar a la aplicacin se realizan cambiando el cdigo que resida en el servidor web. Comprese esto con el coste de tener que actualizar uno por uno el cdigo en cada uno de los clientes (imaginemos que tenemos 2.000 ordenadores clientes). No slo se ahorra tiempo porque reducimos la actualizacin a una slo mquina, sino que no hay que desplazarse de un puesto de trabajo a otro (la empresa puede tener una distribucin geogrca amplia). Una segunda ventaja, relacionada con la anterior, es que se evita la gestin de versiones. Se evitan problemas de inconsistencia en las actualizaciones, ya que no existen clientes con distintas versiones de la aplicacin. Una tercera ventaja es que si la empresa ya est usando Internet, no se necesita comprar ni instalar herramientas adicionales para los clientes. Otra ventaja, es que de cara al usuario, los servidores externos (Internet) e internos (intranet) aparecen integrados, lo que facilita el aprendizaje y uso. Una ltima ventaja, pero no menos importante, es la independencia de plataforma. Para que una aplicacin web se pueda ejecutar en distintas plataformas (hardware y sistema operativo), slo se necesita disponer de un navegador para cada una de las plataformas, y no es necesario adaptar el cdigo de la aplicacin a cada una de ellas. Adems, las aplicaciones web ofrecen una interfaz grca de usuario independiente de la plataforma (ya que la plataforma de ejecucin es el propio navegador). Una desventaja, que sin embargo est desapareciendo rpidamente, es que la programacin en la web no es tan verstil o potente como la tradicional. El lenguaje
HTML
ponibles para crear formularios. Por otro lado, al principio las aplicaciones web eran bsicamente de solo lectura: permitan una interaccin con el usuario prcticamente nula. Sin embargo, con la aparicin de nuevas tecnologas de desarrollo como Java,
JavaScript
7 Pensemos,
por ejemplo, en los ejecutivos que tienen que desplazarse entre distintos pases, pero
4.5.
55
1.
HTTP,
HTTP
ASP y PHP.
2.
Servidor de datos separado (Figura 4.4): a partir de la arquitectura anterior, se separa la lgica de datos y los datos a un servidor de bases de datos especco. Las tecnologas que emplean esta arquitectura son
ASP y PHP.
3.
Todo en un servidor, con servicio de aplicaciones (Figura 4.5): en la arquitectura nmero 1 se se separa la lgica de negocio del servicio de
HTTP y se incluye el
56
Captulo 4.
servicio de aplicaciones para gestionar los procesos que implementan la lgica de negocio. La tecnologa que emplea esta arquitectura es
JSP.
Figura 4.5: Arquitectura de las aplicaciones web: todo en un servidor, con servicio de aplicaciones
4.
Servidor de datos separado, con servicio de aplicaciones (Figura 4.6): a partir de la arquitectura anterior, se separa la lgica de datos y los datos a un servidor de bases de datos especco. La tecnologa que emplea esta arquitectura es
JSP.
5.
Todo separado (Figura 4.7): las tres funcionalidades bsicas del servidor web se separan en tres servidores especcos. La tecnologa que emplea esta arquitectura es
JSP.
HTTP, lgica de
negocio y lgica de datos) en distintos servidores es aumentar la escalabilidad del sistema de cara a obtener un mayor rendimiento. Al separar las distintas funcionales en distintos servidores, cada uno de ellos se puede congurar (dimensionar) de forma adecuada a los requisitos que presenta cada uno de ellos. Por ejemplo, para ofrecer el servicio de pero sin grandes necesidades de almacenamiento. Sin embargo, para el servidor de bases de datos hace falta un ordenador con mucha memoria y con un disco duro de alta capacidad de almacenamiento y rpido para mantener todos los datos. Otra ventaja que se obtiene al separar las funcionalidades, es que al aislar la lgica de negocio y la lgica de datos en servidores separados que no estn conectados
HTTP hace falta un ordenador con una buena conexin a Internet, rpido
4.5.
57
Figura 4.6: Arquitectura de las aplicaciones web: separacin servidor de datos, con servicio de aplicaciones
58
Captulo 4.
directamente a Internet se aumenta el nivel de seguridad, ya que no es tan fcil acceder a ellos. En algunos casos, las arquitecturas donde se separan el servicio de
HTTP
del
resto de servicios es la nica opcin disponible. Por ejemplo, en los sistemas heredados (legacy systems ), donde ya existe una lgica de negocio en un servidor de aplicaciones y una lgica de datos en un servidor de bases de datos, la nica forma de acceder desde Internet al sistema heredado es a travs de un servidor que ofrezca el servicio de
En la Figura 4.8 se presenta una comparativa de las tecnologas de generacin de pginas web ms comunes:
ASP, PHP, JSP y Cach Server Pages (CSP). ASP y PHP se clasican dentro de la categora Web Server ScripHTTP y adems se encarga de ejecutar los proODBC, lo que
introduce una penalizacin en el tiempo de ejecucin. En este tipo de tecnologas, parte de la lgica de negocio se puede desplazar hacia el servidor de bases de datos al emplear procedimientos almacenados (stored procedures ) y disparadores (triggers ). De este modo se puede lograr una cierta escalabilidad en el sistema.
Figura 4.8: Arquitectura de las aplicaciones web: todo separado Las tecnologas que emplean servidor de aplicaciones como
4.6.
59
negocio y la lgica de datos. Estas tecnologas pueden emplear las arquitecturas 3, 4 y 5. Por ltimo, en la tecnologa
en el sistema gestor de bases de datos (es el encargado de ejecutar los procesos que implementan la lgica de negocio). Gracias a ello, la comunicacin entre los procesos de la lgica de negocio y los datos es muy rpida, ya entre ambos se puede establecer una comunicacin interproceso.
ASP, CGI,
etc.), datos almacenados en cheros o en un servidor de bases de datos, etc. 3. A continuacin se disea la estructura lgica o de navegacin del sitio web: pgina inicial, pgina principal, empleo de marcos, los mens, divisin en secciones, relacin entre las distintas secciones, pgina de novedades, etc. 4. Se dene la estructura fsica, que puede ser igual a la lgica o totalmente independiente. 5. Se crean los contenidos del sitio web. Si se emplea una base de datos, se realiza la carga de datos. 6. Se realiza el diseo grco y ergonmico: colores, montaje, tipografa, botones de navegacin, logotipos y dems elementos grcos, etc. 7. 8. 9. Se crean las pginas estticas y los elementos multimedia. Desarrollo de los scripts y pginas dinmicas. Por ltimo, se verica el correcto funcionamiento del sitio web: se comprueba la conexin con la base de datos, se verica que no existan enlaces rotos, se conrma que todos los recursos empleados (imgenes, cheros con cdigo de script,
60
Captulo 4.
etc.) se encuentran en el sitio web y en su lugar correspondiente, etc. Adems, se comprueba el sitio web con distintos navegadores para asegurar su compatibilidad. Tambin se realizan pruebas de carga para evaluar el rendimiento. 10. Puesta en marcha.
Captulo 5
ndice General
5.1. Qu es un sitio web . . . . . . . . . . . . . . . . . . . . . . 62 5.2. Contenido de un sitio web . . . . . . . . . . . . . . . . . . 63 5.3. Estructura fsica . . . . . . . . . . . . . . . . . . . . . . . . 64
5.3.1. 5.3.2. Nombres de los directorios y de los cheros Enlaces . . . . . . . . 66 69 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
62
HTML
que se emplean en la pgina (imgenes, sonidos, cdigo JavaScript , etc.). En todo sitio web se suelen distinguir dos pginas especiales: la pgina inicial (o pgina de entrada) y la pgina principal (o pgina men). La pgina inicial, conocida como splash page en ingls, es la primera pgina que un usuario ve al visitar un sitio web. Normalmente, la pgina inicial se emplea para promocionar la compaa u organizacin a la que pertenece el sitio web, o para dar a conocer un producto o servicio particular (por ejemplo, para promocionar unos productos en oferta). Tambin se suele emplear para informar al usuario de los requisitos (tipo y versin de navegador, resolucin mnima, etc.) necesarios para visualizar correctamente el resto de pginas del sitio web. A menudo, la pgina inicial es la ms vistosa del sitio web, ya que tiene el objetivo de atraer y atrapar al visitante. La mayora de las pginas iniciales poseen las siguientes caractersticas:
Poco texto, pero muchas imgenes, grcos animados, sonidos o incluso vdeos. Algunas pasan (saltan) automticamente a la pgina principal, pero en otras el usuario tiene que pulsar en un enlace para cargar la pgina principal. En algunos casos la pgina inicial se convierte en un tunel de entrada: una presentacin que dura bastante tiempo (ms de 15 segundos), que suele estar realizada con mltiples pginas o con una sola pgina que emplea tecnologa multimedia (como Macromedia Flash). En estos casos, suele existir un enlace para evitar el tunel de entrada y saltar directamente a la pgina principal.
Adems de usarse como tarjeta de presentacin, la pgina inicial tambin se puede emplear para disminuir el tiempo necesario para cargar las pginas posteriores. Mientras el usuario est visualizando la pgina inicial, las imgenes que se emplearn en las siguientes pginas se pueden cargar en la memoria cach del navegador mediante un proceso en segundo plano del que el usuario no es consciente. En algunos sitios web se prescinde de la pgina inicial y directamente se muestra al usuario la pgina principal. Por otro lado, la pgina principal, conocida como home page, root page, entry page,
front page o main page en ingls, es la pgina que funciona como ndice o tabla de
contenidos del sitio web. A travs de esta pgina, el resto de documentos del sitio web es accesible de una forma directa o indirecta. Por tanto, la pgina principal tiene la funcin de guiar y dirigir al usuario a otras pginas del sitio web. La pgina principal tiene que ser clara y no crear confusin con innidad de opciones (si las opciones son abundantes signica que la clasicacin de la informacin no ha sido la correcta).
5.2.
63
Quienes somos? Informacin de contacto. Historia de la compaa. Objetivos. Cartera de clientes. Productos o servicios. ...
Peridicos:
Centros educativos:
64
Portal genrico:
Por otro lado, los contenidos especcos son aquellos que incorpora cada sitio web como propios y que no tienen porqu encontrarse en otros sitios web de la misma categora. Por ejemplo, un peridico digital puede decidir ofrecer a sus lectores una cuenta de correo electrnico gratuita, un servicio que no se suele encontrar normalmente en los peridicos digitales, pero que s que es comn en los portales. En general, lo ms adecuado es mostrar primero la informacin ms general y luego, si as lo solicita el usuario, facilitar informacin ms detallada. El contenido de un sitio web se tiene que cuidar mucho. Supongamos una empresa que vende productos. En el mundo real, el cliente puede probar el producto que desea comprar: por ejemplo, si se desea comprar un televisor, se puede encender, escuchar su calidad de sonido y ver su imagen, juguetear con sus funciones y en denitiva comprobar el grado de satisfaccin que se obtiene. Adems, el cliente tiene un trato directo con el personal de la empresa. Sin embargo, en el mundo virtual de Internet todo eso es imposible: el usuario no puede saber si le satisface un producto hasta que lo haya recibido. Por ello, la decisin de comprar un producto se basa tambin en criterios que son ajenos al propio producto, como puede ser la imagen que proyecta la empresa, el aspecto de la pgina web, o las recomendaciones de otras personas que hayan quedado satisfechas con el producto. Este ltimo aspecto es muy importante en Internet: la delizacin del cliente. Gracias a la personalizacin de un sitio web, se puede adecuar el sitio web al perl de cada cliente. Un mismo contenido se puede clasicar en distintas categoras. Por ejemplo en el caso de un sitio web que sea un buscador de servicios, un cibercaf se clasicara en restaurantes o en entretenimiento? En cafeteras o en tiendas de informtica? En caso de duda, lo mejor es incluir la misma informacin en las distintas categoras posibles y no exclusivamente en una sola. Hay que tener en cuenta que la gente suele emplear distintos nombres para el mismo concepto y un mismo concepto lo pueden clasicar en distintas categoras.
5.3.
Estructura fsica
65
almacenados segn el tipo de chero en distintos directorios? Al denir la estructura fsica de un sitio web hay que tener en cuenta las preguntas anteriores. Una estructura fsica eciente reduce los costes de mantenimiento: cada vez que se tenga que actualizar el sitio web, el tiempo necesario para localizar el recurso que se desea actualizar se reducir. La estructura fsica se debe de planicar antes de iniciar el desarrollo del sitio web. Modicar la estructura fsica una vez que se han creado muchas pginas es costoso y propenso a cometer errores, ya que para ello hay que actualizar los enlaces entre las pginas, las referencias a las imgenes, etc., para que reejen la nueva estructura del sitio web. Si el sitio web contiene un nmero pequeo de cheros (5 o 10 cheros), quizs no suponga ningn problema tenerlos todos juntos en el mismo directorio. Pero conforme aumente el nmero de cheros, si se ordenan en subcategoras se simplicar su localizacin y su cambio. No existe una forma perfecta de organizar fsicamente un sitio web. Todo depende de la persona que tenga que mantener el sitio web: una estructura fsica puede tener sentido para una persona, pero no para otra. Lo importante es que en el futuro, cuando haya que realizar cambios en un sitio web, la persona que tenga que hacerlo pueda encontrar lo que quiere modicar rpidamente. Existen diferentes alternativas de organizacin de un sitio web en directorios. Algunas de las ms usuales son: Por el tipo de chero. Por ejemplo, cheros de vdeos, etc. Por el nivel de acceso (visibilidad). Por ejemplo, parte pblica, parte privada de los clientes, parte privada de los administradores, etc. Por el contenido. Por ejemplo, una empresa que vende productos puede organizar los cheros segn la informacin que contienen: los cheros de la familia de productos A en un directorio, los cheros de la familia de productos B en otro directorio, etc. Por la fecha. Por ejemplo, el sitio web de una revista puede organizar los cheros segn la fecha de publicacin. Por su propietario. Por ejemplo, una empresa puede organizar los cheros segn el departamento al que pertenecen: departamento A, departamento B, etc. Por su estructura lgica o de navegacin. La estructura fsica puede ser una copia de la estructura lgica. Por ejemplo, en la Figura 5.1 (a), el sitio web se ha organizado fsicamente en funcin de su contenido: informacin sobre la empresa (acercade), el catlogo, los clientes e informacin de contacto. En la Figura 5.1 (b), el sitio web se ha organizado
66
en funcin del tipo de chero (asp, html, etc.) en un primer nivel y en funcin del nivel de acceso (privado y pblico) y del tipo de chero (gif, jpg y png) en un segundo nivel. En la Figura 5.2 (a), el sitio web se ha organizado en funcin de su contenido en un primer nivel y en funcin del tipo de chero en un segundo nivel. En la Figura 5.2 (b), el sitio web se ha organizado en funcin del nivel de acceso en un primer nivel y en funcin del tipo de chero en un segundo nivel.
(a)
(b)
Sin embargo, no hay que abusar de los directorios y crear estructuras de directorios muy profundas, ya que cada directorio que se crea aade unas letras ms a la recordar una
URL:
tanto el creador del sitio web como el usuario nal tendrn problemas a la hora de
URL.
5.3.1.
El nombre de los directorios y de los cheros es un aspecto que tambin hay que tener en cuenta, ya que es importante tanto para el desarrollador del sitio web como para los futuros visitantes (usuarios). Por un lado, se tienen que elegir nombres intuitivos, que expresen el contenido o la funcin de un chero, ya que as el desarrollador cuando tenga que mantener el sitio web no tendr que pararse a pensar que contiene cada directorio o chero.
5.3.
Estructura fsica
67
(a)
(b)
68
Por otro lado, tambin es importante para la gente que visite el sitio web. Por qu? Aunque los nombres de los directorios y de los cheros slo se van a ver en la
URL y se puede creer que nadie se ja en ella, a veces los usuarios toman nota de
ella (la copian por escrito) o incluso la emplean para navegar libremente.
Por ejemplo, imaginemos que un usuario ha realizado una bsqueda en un buscador y ha llegado a la siguiente pgina de un sitio web de venta de electrodomsticos:
http://www.electro-abc.es/electronica/videos/sonic1430.html.
En esta pgina se muestran las caractersticas del vdeo Sonic 1430. El usuario
http://www.electro-abc.es/electronica/videos/
con la esperanza de obtener una pgina con una lista de todos los vdeos, o que incluso escriba:
URL y escriba:
http://www.electro-abc.es/electronica/
para obtener una lista completa de todos los dispositivos electrnicos.
Si la pueda.
URL
el contenido que desean obtener, y tales barreras se tienen que evitar siempre que se
Por otro lado, hay que tener mucho cuidado con los caracteres que se emplean en los nombres de los directorios y de los cheros, ya que cada sistema operativo permite un conjunto de caracteres distintos. Nunca se deben usar espacios en blanco o caracteres especiales como extensin de los cheros.
&, %, #,
Un problema muy comn con los sistemas operativos Microsoft Windows es que no distinguen maysculas y minsculas, aunque s que permiten escribir los nombres de los cheros mezclando maysculas y minsculas. Es decir, el nombre de un chero puede ser cheros
algo.txt o algoMas.TXT, pero en un mismo directorio no pueden existir los algo.txt, Algo.txt o ALGO.TXT, ya que para el sistema operativo representan
el mismo nombre y, por tanto, el mismo chero. Esta caracterstica suele originar problemas al mover un sitio web de un sistema operativo Microsoft Windows a Unix. Por ejemplo, si en un enlace se escribe el nombre de un chero en maysculas, pero realmente el nombre del chero est en minsculas, en el servidor web con Microsoft Windows el enlace funciona correctamente, pero en el que tiene Unix no, ya que en este ltimo sistema operativo s que se distinguen completamente las maysculas y las minsculas. Por tanto, es conveniente ser consistente y escribir siempre los nombres de los directorios y de los cheros en minsculas (lo ms adecuado) o en maysculas, pero nunca mezclar las dos formas.
5.3.
Estructura fsica
69
5.3.2.
Enlaces
1 son un elemento clave en la web, ya que son los que permiten crear
Los enlaces
el hipertexto. Los enlaces se pueden clasicar de distintas formas. Atendiendo al mbito de referencia, se pueden dividir en enlaces que hacen referencia a recursos del propio sitio web y enlaces que hacen referencia a recursos de otro sitio web. Adems, los primeros tambin se pueden clasicar en enlaces dentro del propio documento (intradocumentales) y enlaces a otro documento (extradocumentales). Por otro lado, los enlaces tambin se pueden clasicar en absolutos y relativos. Cuando se crea un enlace desde un sitio web a otro sitio web, siempre se emplea un enlace absoluto de la forma:
http://www.otrositio.es/dir/recurso.xxx
Sin embargo, cuando se crea un enlace a un recurso en el mismo sitio web, se puede hacer absoluto (dos tipos) o relativo: Absoluto 1: similiar al enlace a otro sitio web. Se indica el nombre del sitio actual y la ruta completa al recurso. Todos los enlaces de este tipo comienzan
Absoluto 2: se indica la ruta completa al recurso. Como no se indica el nombre del sitio web, se emplea el actual. Todos los enlaces de este tipo comienzan por
Relativo: no se indica la ruta completa, sino la posicin relativa del recurso respecto al chero que contiene el enlace. Por ejemplo, si un enlace en la pgina
a.html b.html
del directorio
dir
b.html
del mismo
Los enlaces relativos no se limitan a recursos que se encuentren en el mismo directorio. Por ejemplo, si un enlace en la pgina que apunte a la pgina en el mismo directorio padre, escribiremos:
a.html del directorio dir-a queremos b.html del directorio dir-b, y ambos directorios se encuentran
../dir-b/b.html
Muy importante: en las direcciones de Internet (la en la rutas para separar directorios es / y no
la barra que se emplea en las rutas en los sistemas operativos Microsoft Windows con la barra que se emplea en los sistemas Unix y en la hay que escribir menos en los enlaces (las
URL.
Dos son las ventajas que se obtienen al emplear los enlaces relativos. Por un lado,
URL
1 Enlace
se reere a cualquier referencia a un chero desde una pgina, ya sea mediante la etiqueta etc.
70
facilita el transporte del sitio web entre distintos servidores o directorios: los enlaces siguen funcionando. En la Figura 5.3 se resumen los distintos tipos de enlace que se han presentado.
5.4.
Estructura lgica
71
Existen distintos tipos de estructuras lgicas de navegacin. Las ms comunes son la secuencial, en rejilla, en rbol y en red, aunque lo normal es que en un sitio web se de una combinacin de todas ellas (estructura mixta).
5.4.1.
Estructura secuencial
La estructura secuencial (sequence structure ) es la ms simple de todas. En ella, el usuario comienza en la pgina principal y slo puede navegar en una direccin (hacia adelante o hacia atrs). En la Figura 5.4 se puede ver una representacin simplicada de esta estructura. Esta estructura se suele emplear en los siguientes casos: Un curso o tutorial. Una visita (tour ) guiada. Un asistente (wizard ) que explica como se realiza algo. Un proceso determinado compuesto de una serie de pasos secuenciales, como por ejemplo una compra o el registro de un usuario en un servicio de correo electrnico gratuito.
Figura 5.4: Estructura secuencial Un claro ejemplo de estructura secuencial se puede encontrar en el sitio web de
identicador para emplear los servicios de Yahoo!. Esta gua presenta una estructura secuencial, ya que el usuario slo la puede visualizar en el orden secuencial establecido por su creador. Por ejemplo, en la Figura 5.5 podemos ver la primera pgina web donde se presenta la gua y aparece un enlace en la esquina superior derecha (
Cmo obtengo una ID?). Al pulsar sobre ese enlace, se pasa a la segunda pgina que se
2 http://www.yahoo.es.
72
muestra en la Figura 5.6; en esta pgina existe un enlace para pasar a la siguiente pgina (
Condiciones de servicio) y otro enlace para volver a la anterior (Regstrate en Yahoo!). En la Figura 5.7 y la Figura 5.8 se muestran las dos pginas siguiente:
volver a la pgina anterior y otro para pasar a la siguiente), pero adems incorporan un enlace para volver al principio de la gua ( a la pgina inicial.
se puede apreciar como las pginas presentan la misma estructura (un enlace para
5.4.2.
Estructura en rejilla
La estructura en rejilla (grid structure ) se emplea cuando existen estructuras secuenciales paralelas. Casos tpicos de esta estructura son los sitios web escritos en varios idiomas, de forma que la misma pgina se puede consultar en otros idiomas, o los sitios web que ofrecen cada pgina en distintos formatos (por ejempo, formato de
5.4.
Estructura lgica
73
74
5.4.
Estructura lgica
75
76
pantalla, formato de impresin, formato para discapacitados, etc.). En la Figura 5.9 se muestra un esquema de esta estructura.
Figura 5.9: Estructura en rejilla Un claro ejemplo de esta estructura se puede encontrar en la revista Consumer . En ella, toda pgina web posee varias versiones: la normal (Figura 5.10), la preparada para imprimir (Figura 5.11) y la adaptada a gente discapacitada (Figura 5.12). Adems, tambin existe la misma pgina en castellano, gallego, euskera, cataln y valenciano.
5.4.3.
Estructura en rbol
La estructura en rbol (tree structure ) es una de las ms comunes, ya que permite estructurar el contenido de una forma jerrquica con distintos niveles, lo que facilita la bsqueda de informacin y la navegacin (Figura 5.13). Sin embargo, este tipo de estructuras pueden presentar un problema: el rbol puede degenerar a estructuras poco profundas y muy anchas, o muy profundas y poco anchas (Figura 5.14).
5.4.4.
Estructura en red
La estructura en red (web structure ) es la tpica de Internet. En este tipo de estructura no existe un orden establecido, de forma que cada pgina puede estar enlazada con todas las pginas que componen el sitio web. Adems, en este tipo de
3 http://revista.consumer.es.
5.4.
Estructura lgica
77
78
5.4.
Estructura lgica
79
80
(a)
(b)
5.4.
Estructura lgica
81
estructuras, el sitio web suele tener varias pginas de inicio, tal como se observa en la Figura 5.15.
5.4.5.
Estructura mixta
En realidad, las cuatro estructuras que se han comentado son ideales: en el mundo real suelen aparecer mezcladas entre s, tal como se muestra en la Figura 5.16. Por ello, lo ms comn es que la estructura de un sitio web sea mixta.
5.4.6.
Comparativa
Las cuatro estructuras bsicas (secuencial, en rejilla, en rbol y en red) se pueden comparar en funcin de distintas caractersticas. En la Figura 5.17 se muestran la cuatro estructuras clasicadas en funcin del poder de expresividad y de la capacidad de navegacin que presentan. Esta comparacin es cualitativa y no cuantitativa (por ejemplo, no se puede armar que la estructura en rbol posea un 40 % ms de expresividad respecto a la estructura secuencial). La expresividad se mueve desde un nivel bajo en el cual la informacin contenida en un sitio web se percibe de igual forma por todos los visitantes, a un nivel alto en el cual cada visitante puede percibir la misma informacin de distintas formas. La capacidad de navegacin se mueve desde un nivel bajo con poca libertad donde los movimientos del visitante son predecibles, a un nivel alto con mucha libertad
82
donde la navegacin es impredecible, el visitante se puede perder fcilmente o llegar a pginas a las que no nos interese que llegue (riesgo alto de navegacin confusa).
5.4.7.
Un visitante de un sitio web se puede perder fcilmente en las pginas que lo forman. Por tanto, es recomendable emplear algn mecanismo que indique al usuario dnde est, de dnde ha venido y a dnde puede ir a continuacin. Existen distintos esquemas que proporcionan esta informacin durante la navegacin. Dos de los ms conocidos son el rastro de las migas de pan y la numeracin de los pasos. En el esquema del rastro de las migas de pan, se muestra una lista con enlaces de vuelta a cada una de las pginas por las que el usuario ha pasado hasta llegar a la actual. Es decir, se muestra un rastro para que el usuario pueda volver hacia atrs hacia el punto de entrada en el sitio web. Por ejemplo, en la Figura 5.18 se muestra el siguiente rastro:
4 (breadcrumb trail )
Inicio > Internet y ordenadores > Formatos > HTML > HTML Dinmico
Una variante de este esquema consiste en no tener en cuenta las pginas por donde ha pasado el usuario, sino mostrar el rastro de las pginas por el nivel actual en la jerarqua de navegacin que conducen a la pgina principal. As se consigue mostrar el contexto de la pgina actual respecto al conjunto de pginas del sitio web. Cada
4 Por
5.4.
Estructura lgica
83
nivel de la lista es una enlace a la pgina principal de dicho nivel. Este esquema es el adecuado para aquellos sitios web donde la informacin se estructure de una forma jerrquica. Por otro lado, en el esquema de numeracin de los pasos, se muestra una lista con todos los pasos necesarios para completar un proceso (por ejemplo, comprar un producto o registrarse en un servicio de correo electrnico). Adems, se muestra en todo momento el paso en el que se encuentra el usuario. De este modo, el usuario sabe cuanto queda para terminar el proceso. Esta caracterstica contrasta con los procesos en los que no se indica nada y el usuario no sabe cuantas veces tiene que pulsar el botn
Siguiente
primer paso (de cuatro) para obtener una cuenta de correo electrnico en
mail.com.
En este paso el usuario tiene que elegir qu direccin de correo electrnico desea (nombre de usuario y dominio). En la parte superior de la pgina se muestra que el proceso se compone de cuatro pasos y que en la actualidad se encuentra en el primer paso. En la Figura 5.20 se muestra el segundo paso: el usuario tiene que introducir sus datos personales. En el tercer paso, que se muestra en la Figura 5.21, el usuario selecciona las listas de distribucin de correo electrnico a las que se desea subscribir. Por ltimo, la Figura 5.22 muestra el ltimo paso que es la seleccin del tipo de servicio de correo electrnico (gratuito o de pago).
84
5.4.
Estructura lgica
85
86
5.4.
Estructura lgica
87
88
5.5.
Gua de estilo
89
5 la capacidad
estructuras muy profundas, para que el usuario no pierda la orientacin (no sepa de dnde viene y por dnde ha pasado). Todas las pginas deben de poseer un elemento (un logotipo, el color de fondo, etc.) que las identique como pertenecientes a un sitio web. De este modo, el usuario podr saber fcilmente cuando ha abandonado el sitio web.
5 George
A. Miller. The magical number seven, plus of minus two: Some limits on our capacity
for processing information. Psychological Review, 63, pginas 81-97, marzo 1956.
Captulo 6
HTML
HTML es un lenguaje de marcas (etiquetas) que se emplea para dar formato a los documentos que se quieren publicar en la WWW. Los navegadores son capaces de interpretar las etiquetas y mostrar los documentos con el formato deseado. En este captulo se presentan los conceptos bsicos y avanzados (enlaces, tablas, marcos, etc.) de HTML. Adems, se realiza un estudio especial de los formularios, ya que son una pieza clave de las aplicaciones web.
ndice General
Introduccin . . . . . . . . . . . Evolucin de HTML . . . . . . . Clasicacin de las pginas . . . Qu necesito para usar HTML Conceptos bsicos de HTML .
6.5.1. 6.5.2. Estructura de una pgina
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
93 93 94 96 97
98 100
. . . . . . . . . . . . . . . . . .
6.6. Metadatos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 6.7. Etiquetas HTML . . . . . . . . . . . . . . . . . . . . . . . . 103 6.8. Formato del texto . . . . . . . . . . . . . . . . . . . . . . . 105
6.8.1. 6.8.2. 6.8.3. 6.8.4. 6.8.5. Encabezados de secciones . . . . . . . . . . . . . . . . . . Formatos de caracteres . . . . . . . . . . . . . . . . . . . . La etiqueta <FONT> . . . . . . . . . . . . . . . . . . . . Alineamiento del texto . . . . . . . . . . . . . . . . . . . . Lneas horizontales . . . . . . . . . . . . . . . . . . . . . .
92
Captulo 6. HTML
Listas no ordenadas
. . . . . . . . . . . . . . .
6.12.3. Alineamiento del contenido de una tabla . . . . . . . . . . 6.12.4. Distancia entre celdas 6.12.5. Tablas como marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
6.1.
Introduccin
93
6.1. Introduccin
Las pginas web o pginas HTML son unos cheros escritos en el lenguaje HTML. El desarrollo de estas pginas abarca un amplio grupo de tecnologas, desde las pginas ms sencillas que slo usan el lenguaje HTML hasta las ms complejas que usan DHTML, CSS, JavaScript , applets realizados en Java o componentes
ActiveX .
HTML se basa en SGML, un sistema mucho ms completo y compliHTML dene e interpreta las etiquetas de acuerdo a SGML. HTML se pueden disear usando texto con distintos tipos de letras o
colores, imgenes, listas de elementos, tablas, etc. Su modo de empleo es muy sencillo: se basa en el uso de etiquetas que indican que elementos contiene cada pgina, el formato que hay que aplicar a cada uno de ellos y como se tienen que distribuir por la pgina.
HTML
va ligado al de la
WWW.
sitan en 1991, en los trabajos que llevaba a cabo Tim Berners-Lee y sus compaeros
CERN en Suiza. Uno de los primeros artculos en los que muestran sus ideas es
1
World-Wide Web: The Information Universe . En este artculo detallan un sistema que permita realizar el sueo de interconectar todo el conocimiento de la humanidad y facilitar su acceso a todo el mundo gracias al empleo de los ordenadores. Para lograrlo, hacen uso de tecnologas como el hipertexto o la hipermedia, tecnologas que ya existan desde haca varios aos (en contra de lo que la gente cree, estas tecnologas no fueron inventadas por ellos). Entre las distintas partes que componen el sistema que proponen, se incluye una sintaxis en el estilo de SGML para proporcionar formato a los documentos. A partir de ah nace y tcnicos.
HTML como un lenguaje para el intercambio de documentos cientcos HTML evita la complejidad de SGML al denir un pequeo conjunto SGML. W3C en el Massachusetts Institute
2 se convierte en el primer host
de etiquetas que simplican la estructura de los documentos y las reglas no son tan estrictas como en En octubre de 1994, Tim Berners-Lee, funda el
DARPA)
W3C.
1 Tim
The Information Universe. Electronic Networking: Research, Applications and Policy, Vol. 1, No. 2, Meckler, Westport CT, primavera 1992.
94
Captulo 6. HTML
W3C es encabezar el desarrollo de la WWW, mediante W3C lidera el desarrollo de distintas tecnologas, como HTML, HTTP, Extensible Markup Language (XML), Portable Network Graphics (PNG), etc. En el Cuadro 6.1 mostramos 3 las distintas versiones de HTML que se han estandarizado desde 1995.
El objetivo principal del la elaboracin de protocolos que aseguren su estandarizacin. Hoy en da,
Fecha
Noviembre 1995 Enero 1997 Diciembre 1997 Diciembre 1999 Enero 2000 Agosto 2002 Agosto 2002
Versin
HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 XHTML 1.0 XHTML 1.0 Second Edition XHTML 2.0 (Working Draft)
En enero de 2000 aparece Extensible HyperText Markup Language ( 1.0, el futuro sustituto de las normas que impone son:
XHTML es el lenguaje HTML escrito segn XML. Por tanto, es una aplicacin concreta de XML y no deben confundirse entre s. Las principales diferencias entre HTML y XHTML 1.0
reformulacin de HTML en XML 1.0. Las etiquetas y atributos tienen que escribirse en minsculas.
HTML.
XHTML)
Todas las etiquetas tienen que aparecer por parejas (inicio y n) o como etiquetas vacas.
3 Algunas
versiones, como
HTML+
HTML
6.3.
95
Estticas. Poseen un contenido jo, todos los usuarios que las consultan reciben
la misma informacin. El usuario recibe en su navegador la pgina del servidor sin un procesamiento previo .
Por otro lado, segn como se visualizan las pginas en el cliente, se clasican en:
Estticas. Cuando no poseen ningn tipo de cdigo de script, applets ins . Ejemplo: slo cdigo HTML. Dinmicas o activas en el cliente.
o plug-
en el equipo del usuario. Para lograrlo se emplean lenguajes de programacin y objetos integrados. Ejemplo: pginas con JavaScript ,
Las caractersticas anteriores se pueden combinar como se quieran: una pgina puede ser esttica en el servidor y en el cliente, esttica en el servidor pero dinmica en el cliente, dinmica en el servidor y esttica en el cliente y, por ltimo, dinmica en el servidor y dinmica en el cliente. Si nos planteamos crear pginas dinmicas en el servidor o en el cliente, surgen una serie de ventajas y desventajas. Las ventajas principales de las pginas activas en el cliente son: Se descarga de trabajo al servidor, ya que la ejecucin del cdigo se realiza de forma distribuida en cada cliente. Se reduce el ancho de banda necesario, ya que se evitan continuos traspasos de informacin del servidor al cliente y viceversa. Ofrecen respuestas inmediatas al usuario. Sin embargo, existen algunas razones que nos llevan a crear pginas activas en el servidor: Cuando la informacin sobre la que se realiza el procesamiento es muy amplia, su envo al cliente puede suponer un consumo de ancho de banda grande.
4 Las
pginas estticas tambin pueden mostrar datos procedentes de una base de datos mediante
HTML
de forma manual,
automticamente cuando ocurre un suceso o a una fecha y hora dadas (por ejemplo, todos los das a las tres de la maana). Esta tcnica es adecuada para catlogos, listas de precios, directorios telefnicos, etc., que no se modican muy a menudo.
96
Captulo 6. HTML
Puede existir informacin restringida sobre la que se realice el procesamiento y que no interese que pueda llegar ntegra al cliente. Las pginas activas en el cliente se basan en tecnologas dependientes del navegador y del sistema operativo del usuario. Presuponer que el usuario dispone de los requisitos necesarios para que funcionen las pginas es un error. Las pginas activas en el cliente pueden ser poco seguras. Entonces, cul de las cuatro combinaciones posibles elegir? La mejor opcin es la ltima: pginas dinmicas tanto en el servidor como en el cliente, ya que podremos aprovechar las ventajas de las dos opciones y eliminar sus desventajas. Simplemente, habr que distribuir la lgica de nuestra aplicacin entre el servidor y el cliente, de forma que se obtenga la solucin ms ptima a nuestro problema. En este captulo nos vamos a centrar en el lenguaje
HTML,
realizar pginas estticas en el cliente. En el Captulo 9 veremos JavaScript , que nos permitir realizar pginas dinmicas en el cliente. Ambas tecnologas no inuyen en la parte del servidor. El desarrollo de pginas activas en el servidor queda fuera de los objetivos de este libro.
HTML.
Los documentos
HTML
tie-
nen un formato de texto plano (American Standard Code for Information Interchan-
ge (
ASCII)), por lo que todo lo que se necesita es un editor (como el Bloc de notas HTML,
de Microsoft Windows) para crear las pginas y un navegador (como Microsoft Internet Explorer) para verlas. Podemos crear, vincular y probar documentos completos en nuestro ordenador, aunque no est conectado a ninguna red. Para facilitar la creacin de pginas los programas de diseo
HTML
HTML.
HTML y
con algunos botones que insertan en un documento las etiquetas ms comunes. Otros, suelen incluir la caracterstica syntax highlight : signica que el editor es capaz de comprender el lenguaje en el que se programa, y colorea las palabras diferencindolas segn sean etiquetas, atributos, comentarios, etc. Otros ms avanzados ofrecen la opcin de completar las etiquetas o muestran una ventana de ayuda con los atributos que posee cada etiqueta. Por otro lado, los programas de diseo muestran la pgina
HTML
de forma
grca y en tiempo real: es posible desplazar los distintos elementos que la componen (tablas, imgenes, texto), modicar sus propiedades (tamao, color, tipo de letra) y crear efectos avanzados. Son programas del tipo
6.5.
97
momento la pgina tal como se visualizar en un navegador. Un inconveniente de estos programas es que generan mucho cdigo pgina directamente a travs del cdigo DreamWeaver y Microsoft FrontPage. Conviene aclarar desde un principio que lo nico que da formato a una pgina web es una etiqueta
mejores programas de esta clase destacan Adobe Golive, Claris Home Page, Macromedia
HTML.
con objeto de tener prrafos y columnas de cifras formateadas, pero no se incluye ninguna etiqueta, al visualizarlo en
HTML
.html
.htm5 .
Se deben emplear
nombres cortos y sencillos. Hay que evitar el uso de espacios o de caracteres especiales en el nombre del archivo y tambin controlar el uso de maysculas y minsculas puesto que en Internet existen multitud de sistemas operativos y alguno puede ser que no acepte los mismos nombres de archivo que acepta el nuestro. Por ejemplo, hay sistemas operativos en los que las maysculas y minsculas se distinguen (Unix) y otros donde no (Microsoft Windows ).
HTML consta de una serie de etiquetas o marcas (tags ). La mayora de HTML que se ve afectada
las etiquetas aparecen por parejas (cdigos pareados), siendo una de inicio (apertura)
por su accin. Pero tambin hay etiquetas que aparecen de forma individual, como
<IMG> para insertar una imagen. Este ltimo tipo de etiquetas tiene efecto en el lugar
en el que se incluyen o desde el lugar en que aparecen hasta el nal de la pgina. Todas las etiquetas comienzan con el smbolo smbolo
>
<
o
Por ejemplo,
<HR>
En el lenguaje cadenas
HTML
<HR
<HR<
no lo son.
una buena prctica ponerlas siempre en maysculas, sobre todo en aras de una mayor
5 Esta
extensin existe debido a que en DOS y Microsoft Windows 3.x los cheros slo pueden tener los nombres de los archivos pueden tener maysculas y minsculas, para acceder a un
6 Aunque
archivo no se tienen en cuenta. Por ello, en un mismo directorio no pueden existir dos archivos que slo se diferencian porque algunos caracteres aparecen en maysculas en uno y en minsculas en el otro.
7 Los
navegadores actuales son muy exibles: si falta alguna etiqueta de n no producen un error
y muestran la pgina lo mejor posible. De todas formas, es recomendable ajustarse siempre a la sintaxis y no cometer errores, ya que as se lograr la mxima compatibilidad.
98
Captulo 6. HTML
HTML8 .
Las etiquetas de n tienen el mismo nombre que las de inicio, pero van precedidas
<HTML>
es
/ (barra </HTML>.
Una etiqueta puede poseer varios atributos a los que hay que asignar valor. Algunos de estos atributos son obligatorios, mientras que otros suelen ser opcionales. Por otro lado, algunos aceptan un valor de cualquier tipo, otros cualquier valor de un tipo concreto (alfanumrico, numrico, etc.) y, por ltimo, algunos necesitan un valor concreto de un conjunto de valores. Los atributos se escriben dentro de la etiqueta y separados por espacios en blanco. Para asignar un valor a un atributo se emplea el signo igual (=). El valor que se asigna a un atributo tiene que ir encerrado entre comillas. Por ejemplo, la etiqueta varios atributos, entre ellos
WIDTH y HEIGHT que esperan un valor numrico y el atributo ALT que espera cualquier
cadena de caracteres. Un ejemplo de uso de esta etiqueta es:
SRC
<IMG>,
URL,
enva la
pgina tal cual. En el momento en que el explorador recibe la pgina, interpreta las etiquetas que la pgina contiene, mostrando al usuario el resultado nal (donde no aparecen ya las etiquetas, sino el resultado de su evaluacin).
6.5.1.
y cuerpo (<BODY>
... </BODY>).
... </HEAD>)
1 2 3 4 5 6 7 8 9
<!DOCTYPE HTML PUBLIC ".//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> Cabecera de la pgina </HEAD> <BODY> Cuerpo de la pgina </BODY> </HTML>
8 Sin
XHTML,
quetas como los atributos de las etiquetas se tienen que escribir en minsculas.
6.5.
99
HTML
la pgina. De este modo, el navegador puede optimizar la interpretacin de la pgina al conocer de antemano la versin empleada. Normalmente no se incluye. Lnea 2: Junto a la lnea 9, indican el comienzo y n de la pgina. La etiqueta
<HTML>
es obligatoria.
Lnea 3: Junto a la lnea 5, indican el comienzo y n de la cabecera. Lnea 4: Lo que escribamos en la cabecera no se ver en la pgina. Se suele usar para indicar el ttulo de la pgina con que se ejecuta en el cliente con
<TITLE> ... </TITLE>, incluir cdigo <SCRIPT> ... </SCRIPT>, denir un estilo con
Lnea 6: Junto a la lnea 8, indican el comienzo y n del cuerpo. Lnea 7: Lo que escribamos en el cuerpo se ver en la pgina. La informacin contenida en esta seccin se puede visualizar con apariencias muy diversas: slo hay que aplicar distintos formatos a las secciones que la componen. Cuando se escriban las etiquetas de n hay que llevar mucho cuidado en el orden. Por ejemplo, en el esqueleto anterior, la etiqueta correcto es primero
ltima etiqueta en aparecer es la primera que se tiene que cerrar. Por tanto, el orden
</BODY>
y luego
</HTML>.
gura 6.1. El ttulo indicado slo aparece en la barra de ttulo de la ventana activa del navegador. El ttulo se indica usando los cdigo pareados y se especica usando un texto plano, sin cdigos poner en negrita o cursiva, por ejemplo).
Ejemplo 6.2
1 2 3 4 5 6 7 8 9 10 11 12
<HTML> <HEAD> <TITLE>Esto es una pgina HTML</TITLE> </HEAD> <BODY> Esto es el cuerpo de una pgina HTML <BR> Esto tiene que aparecer en una lnea nueva <BR><BR> Esto tiene que aparecer separado por una lnea en blanco </BODY> </HTML>
100
Captulo 6. HTML
Es muy aconsejable poner ttulo a todos los documentos y, adems, se deber procurar que ste sea lo ms descriptivo posible, puesto que si algn usuario decide incluir nuestra pgina en su lista de enlaces (bookmarks ), ser el ttulo lo que quede almacenado en dicha lista (junto con la (
URL).
y no producen una salida visible en la pgina. Los saltos de lnea que incluyamos en una pgina son irrelevantes (el navegador no los tiene en cuenta). Para producir un salto de lnea se emplea la etiqueta
<BR>.
Los espacios en blanco tambin son irrelevantes: si separamos dos palabras por varios espacios en blanco, slo se tendr en cuenta uno de ellos. Si queremos incluir varios espacios en blanco, debemos de emplear el cdigo de escape para incluir tres espacios en blanco se tiene que escribir
6.5.2.
Algunos sistemas informticos trabajan con 7 bits en vez de 8. En esos casos, si se desea trabajar con caracteres necesario codicarlos de algn modo. En los documentos
&#nnn;
Las referencias decimales (tambin llamadas secuencias de escape) usan el formato donde
nnn
es el cdigo
representa el carcter
Las referencias a entidades usan el formato texto que representa el carcter. Por ejemplo,
ñ
es el carcter
6.6.
Metadatos
101
Adems, existen algunos caracteres de la parte inferior de la tabla de caracteres ASCII que poseen un signicado especial en carlos. En el Cuadro 6.2 guran los caracteres especiales con su secuencia de escape.
Cuadro 6.2: Caracteres con un signicado especial en HTML Tambin existen otros caracteres que son difciles de conseguir desde el teclado, ya que no estn representados. En el Cuadro 6.3 guran algunos de los ms signicativos.
6.6. Metadatos
La etiqueta
<META> permite indicar metadatos9 de una forma muy simple. Permite <HEAD>. Normalmente, esta etiqueta la emplean los motores de
presenta dos variantes. La sintaxis de estas dos variantes es:
incorporar informacin sobre el contenido de una pgina. Esta etiqueta slo puede aparecer en la seccin bsqueda, los navegadores y las herramientas de diseo de pginas web, pero no la emplean directamente los usuarios que visualizan una pgina. La etiqueta
<META>
<META HTTP-EQUIV="propiedad" CONTENT="contenido">. El atributo HTTP-EQUIV se emplea cuando la pgina web se recupera mediante HTTP. Los
servidores web pueden usar el nombre de la propiedad para crear una cabecera segn el estndar
RFC 82210
en la cabecera de la respuesta
HTTP (algunas
9 Datos
sobre los datos. Los metadatos, por ejemplo, permiten indicar cmo, cundo y quin ha
102
Captulo 6. HTML
siguiente etiqueta
HTTP:
<META>
Refresh
para
refrescar una pgina cada cierto perodo de tiempo. Con esta etiqueta se puede recargar automticamente una pgina cuyo contenido cambia con mucha frecuencia. Por ejemplo, la siguiente pgina se refresca cada 5 segundos:
Ejemplo 6.3
1 2 3 4 5 6 7 8 9
<HTML> <HEAD> <TITLE>Ejemplo de uso de la etiqueta META</TITLE> <META HTTP-EQUIV="Refresh" CONTENT="5"> </HEAD> <BODY> Esta pgina se refresca cada 5 segundos </BODY> </HTML>
Si se indica una
por el indicado en la
URL en el atributo CONTENT, se sustiuir el documento actual URL una vez haya transcurrido el nmero de segundos
especicados. Esto es til para redireccionar automticamente al usuario desde una pgina web a otra (por ejemplo, cuando una pgina web ha cambiado de lugar). El siguiente ejemplo redirecciona automticamente al usuario despus de 3 segundos:
Ejemplo 6.4
1 2 3 4 5 6 7 8 9 10
<HTML> <HEAD> <TITLE>Ejemplo de uso de la etiqueta META</TITLE> <META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.nuevaweb.com"> </HEAD> <BODY> Esta pgina ha cambiado, la nueva direccin es <A HREF="http://www.nuevaweb.com">http://www.nuevaweb.com</A> </BODY> </HTML>
6.7.
Etiquetas HTML
103
Se
emplea
para
incluir
propiedades del documento, tales como autor, fecha de caducidad, una lista de
<META>
NAME indica el nombre de la propiedad mientras CONTENT especica su valor. Por ejemplo, las siguientes etiquetas
1 2 3 4 5
NAME="Author" CONTENT="Sergio Lujn Mora"> NAME="Rights" CONTENT="Sergio Lujn Mora"> NAME="Description" CONTENT="Una pgina de prueba"> NAME="Keywords" CONTENT="curso, html, diseo, web"> NAME="Date" CONTENT="Monday, 1 January, 2001">
Esta variante de la etiqueta se emplea para indicar a los robots buscadores si la pgina se puede indexar y si se puede seguir buscando a partir de los enlaces que contiene la pgina. En el siguiente ejemplo, un robot buscador no debera ni indexar la pgina ni analizar la pgina para buscar ms enlaces y seguir buscando:
1 2 3 4 5 6 7 8 9 10 11
<META <META <META <META <META <META <META <META <META <META <META
HTTP-EQUIV="pragma" CONTENT="no-cache"> NAME="Author" CONTENT="Universidad de Alicante"> NAME="Copyright" CONTENT=" c Universidad de Alicante"> NAME="Description" CONTENT="Web que recoge toda la ..."> NAME="keywords" CONTENT="Universidad de Alicante, Alicante ..."> NAME="Formatter" CONTENT="Mozilla/4.5 [es](Win98; I)[Netscape]"> NAME="Generator" CONTENT="Mozilla/4.5 [es](Win98; I)[Netscape]"> NAME="robots" CONTENT="index, follow"> HTTP-EQUIV="Content-Language" CONTENT="ES"> HTTP-EQUIV="Content-Script-Type" CONTENT="JavaScript"> HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859">
104
Captulo 6. HTML
W3C, que peridicamente publica borradores, recomendaciones XHTML 1.011 (combinacin de HTML y XML), que sustituye a HTML 4.01.
zacin por parte de y estndares denitivos. La ltima recomendacin es los navegadores actuales. Estas etiquetas las podemos clasicar en las siguientes cate-
aceptando cada uno etiquetas que no acepta el otro. Existe un intento de estandari-
En este libro slo vamos a describir un subconjunto de las etiquetas reconocidas por Netscape Navigator 4.0 y superiores, ya que son las que aceptan la mayor parte de goras (en esta clasicacin una etiqueta slo aparece en una categora, pero realmente hay etiquetas que se pueden clasicar en varias categoras): Etiquetas que denen la estructura del documento: Etiquetas que pueden ir en la cabecera:
<HTML>, <HEAD>
<BODY>.
y
<LINK>.
<XMP>.
<LI>.
<B>, <BASEFONT>, <BIG>, <BLINK>, <CITE>, <CODE>, <EM>, <FONT>, <I>, <KBD>, <PLAINTEXT>, <SMALL>, <S>, <STRIKE>, <STRONG>, <SUB>, <SUP>, <TT>, <U> y <VAR>.
Etiquetas de caractersticas del texto: Etiquetas de anclas y enlaces:
<MAP>.
<TH>.
Etiquetas de formularios:
<KEYGEN>
<ISINDEX>.
Etiquetas de marcos:
<FRAME>,<FRAMESET>
<NOFRAMES>.
y
<LAYER>, <ILAYER>
y
<NOLAYER>.
<SCRIPT>, <NOSCRIPT>
<SERVER>.
y
<OBJECT>.
<SPACER>, <SPAN>
<WBR>.
11 Ya
se encuentra en desarrollo
XHTML
6.8.
105
Slo vamos a comentar las etiquetas ms importantes (las ms empleadas) con los atributos ms comunes. No es una explicacin exhaustiva, pero suciente para un primer contacto con
Encabezados de secciones
Existen seis niveles de encabezados, numerados del 1 al 6, y segn tamaos decrecientes: el nivel 1 es la etiqueta y el nivel 6 es la etiqueta
se suelen mostrar con tipos de letra ms grandes, en negrita o ms enfatizados que el texto normal. Pero los niveles 5 y 6 aparecen normalmente con un tamao inferior al del texto normal. El tamao de cada encabezado lo selecciona el navegador, por lo que la apariencia nal de una pgina puede variar signicativamente de uno a otro. Por ello, raramente se emplean en la actualidad. Cuando se visualizan, los encabezados comienzan en una lnea nueva y se suele dejar un espacio en blanco extra antes de ellos. Adems, tambin provocan un salto de lnea automticamente. La sintaxis de esta etiqueta es:
Ejemplo 6.7
ALIGN
especica el alineamiento
1 2 3 4 5 6 7 8
106
Captulo 6. HTML
9 10 11 12
6.8.2.
Formatos de caracteres
Las siguientes etiquetas se pueden emplear en lnea (inline ), lo que signica que no interrumpen el uir del texto (no producen saltos de lnea ni nada similar). Por tanto, se pueden aplicar a caracteres individuales. Los formatos (tambin llamados estilos) se dividen en lgicos y fsicos. Los formatos lgicos dependen del navegador (cada uno lo puede interpretar de distinta forma), mientras que los formatos fsicos siempre se representan de la misma forma. El siguiente cdigo En la Figura 6.3 vemos como se visualiza en un navegador.
Ejemplo 6.9
1 2 3
6.8.
107
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<B>Texto en negrita: <B></B><BR> <I>Texto en cursiva: <I></I><BR> <U>Texto subrayado: <U></U><BR> <TT>Texto en teletipo (fuente fija): <TT></TT><BR> <STRIKE>Texto tachado: <STRIKE></STRIKE><BR> <S>Tambin funciona <S></S><BR> <BR> Formatos lgicos:<BR> <CITE>Cita: <CITE></CITE><BR> <CODE>Cdigo: <CODE></CODE><BR> <DFN>Definicin: <DFN></DFN><BR> <EM>Enfatizado: <EM></EM><BR> <KBD>Texto tecleado: <KBD></KBD><BR> <STRONG>Texto grueso: <STRONG></STRONG><BR> <VAR>Texto variable: <VAR></VAR><BR> </BODY> </HTML>
Figura 6.3: Formatos fsicos y lgicos Estas etiquetas se pueden combinar entre s para crear nuevos formatos. Por ejemplo, mediante las etiquetas
en negrita y cursiva simultneamente. nicamente hay que llevar cuidado y no intercalar unos cdigos con otros, ya que se pueden obtener resultados no esperados. Por
108
Captulo 6. HTML
ejemplo, el siguiente cdigo presenta varios errores de solapamiento; en la Figura 6.4 se pueden apreciar los errores al visualizar la pginas en un navegador.
Ejemplo 6.10
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<HTML> <BODY> <B>Esto est <I>Esto est Esto est en <BR><BR> <I>Esto est <B>Esto est Esto est en <BR><BR> <I>Esto est <B>Esto est <U>Esto est Esto est en Esto est en </BODY> </HTML>
en negrita. en negrita y cursiva.</B> cursiva.</I> en cursiva. en negrita y cursiva.</I> negrita.</B> en cursiva. en negrita y cursiva. en negrita, cursiva y subrayado.</I> negrita y subrayado.</B> subrayado.</U>
6.8.3.
La etiqueta <FONT>
La etiqueta
se muestra
6.8.
109
lista de tipos de letra separados por comas. El navegador comprueba si el primer tipo de letra est disponible, si no es as prueba con el segundo y as sucesivamente. Si ninguno de los tipos de letra est disponible, no se produce ningn cambio en el tipo de letra. Los tipos de letra pueden ser especcos o genricos. Entre los primeros, los ms empleados son letra genricos son
Arial, Courier, Helvetica, Tahoma, Times y Verdana. Los tipos de serif, sans-serif, cursive, monospace y fantasy. El siguiente
cdigo muestra el uso de distintos tipos de letra. En la Figura 6.5 podemos observar como se visualiza en Netscape Communicator 4.78 y en la Figura 6.6 como se muestra en Microsoft Internet Explorer 6.0. Se pueden apreciar ligeras diferencias entre ambos navegadores; adems, algunos tipos de letra, como disponibles esos tipos de letra.
Ejemplo 6.11
Helvetica,
no se visualizan
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<HTML> <HEAD> <TITLE>Distintos tipos de letra</TITLE> </HEAD> <BODY> Tipos de letra especficos:<BR> <FONT FACE="Arial">Texto en Arial</FONT><BR> <FONT FACE="Helvetica">Texto en Helvetica</FONT><BR> <FONT FACE="Tahoma">Texto en Tahoma</FONT><BR> <BR> Tipos de letra genricos:<BR> <FONT FACE="serif">Texto en serif</FONT><BR> <FONT FACE="sans-serif">Texto en sans-serif</FONT><BR> <FONT FACE="cursive">Texto en cursive</FONT><BR> <FONT FACE="monospace">Texto en monospace</FONT><BR> <FONT FACE="fantasy">Texto en fantasy</FONT><BR> </BODY> </HTML>
Para modicar el tamao del texto se emplea el atributo
el tamao de forma relativa, en un intervalo del 1 (letra ms pequea) a 7 (letra ms grande). El tamao base por defecto es 3
al tamao base si se emplean los signos + o -. Por ejemplo, +2 signica un incremento en dos unidades respecto al tamao base. En la Figura 6.7 vemos como se visualiza el siguiente cdigo que muestra el uso del atributo
Ejemplo 6.12
SIZE.
13 Se
<BASEFONT SIZE="numero">.
110
Captulo 6. HTML
Figura 6.5: Distintos tipos de letra con la etiqueta <FONT> en Netscape Communicator
Figura 6.6: Distintos tipos de letra con la etiqueta <FONT> en Microsoft Internet Explorer
6.8.
111
1 2 3 4 5 6 7 8 9 10 11 12
<HTML> <BODY> Distintos tamaos de <FONT SIZE="1">Texto <FONT SIZE="2">Texto <FONT SIZE="3">Texto <FONT SIZE="4">Texto <FONT SIZE="5">Texto <FONT SIZE="6">Texto <FONT SIZE="7">Texto </BODY> </HTML>
6.8.4.
La etiqueta
texto. Un prrafo comienza en una lnea nueva y el navegador suele dejar un espacio en blanco extra antes del prrafo. Para alinear el contenido de un prrafo se emplea el atributo
do del prrafo puede alinearse a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justicado (JUSTIFY). El siguiente cdigo
ALIGN.
El conteni-
14 En HTML
toria.
</P>
112
Captulo 6. HTML
prrafo alineado de cuatro formas distintas. En la Figura 6.8 podemos ver el cdigo visualizado en un navegador.
Ejemplo 6.13
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
<HTML> <BODY> <P ALIGN="LEFT"> Los enlaces o hiperenlaces permiten relacionar distintas pginas entre s (hipertexto). Esta caracterstica da la posibilidad de organizar la informacin en distintas pginas HTML enlazadas, de forma que el usuario pueda seleccionar la que ms le interese en cada momento. </P> <P ALIGN="RIGHT"> Los enlaces o hiperenlaces permiten relacionar distintas pginas entre s (hipertexto). Esta caracterstica da la posibilidad de organizar la informacin en distintas pginas HTML enlazadas, de forma que el usuario pueda seleccionar la que ms le interese en cada momento. </P> <P ALIGN="CENTER"> Los enlaces o hiperenlaces permiten relacionar distintas pginas entre s (hipertexto). Esta caracterstica da la posibilidad de organizar la informacin en distintas pginas HTML enlazadas, de forma que el usuario pueda seleccionar la que ms le interese en cada momento. </P> <P ALIGN="JUSTIFY"> Los enlaces o hiperenlaces permiten relacionar distintas pginas entre s (hipertexto). Esta caracterstica da la posibilidad de organizar la informacin en distintas pginas HTML enlazadas, de forma que el usuario pueda seleccionar la que ms le interese en cada momento. </P> </BODY> </HTML>
Tambin se puede emplear la etiqueta
para centrar el
texto. Esta etiqueta no slo permite centrar el texto, sino cualquier otro elemento que contenga la pgina, como puede ser una imagen o una tabla. Los bloques de texto se especican
</BLOCKQUOTE>.
<BLOCKQUOTE> ...
plear para marcar citas textuales o deniciones de especial relevancia. Los bloques de texto se pueden anidar para producir un mayor sangrado. El siguiente cdigo muestra el empleo de esta etiqueta. En la Figura 6.9 se puede ver como se muestra en un
6.8.
113
navegador web.
Ejemplo 6.14
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<HTML> <BODY> Este texto no tiene sangra. <BLOCKQUOTE> 1. Un nivel de sangra. <BLOCKQUOTE> 2. Dos niveles de sangra. <BLOCKQUOTE> 3. Tres niveles de sangra. </BLOCKQUOTE> </BLOCKQUOTE> Volvemos al nivel 1. </BLOCKQUOTE> Volvemos a texto sin sangra. </BODY> </HTML>
114
Captulo 6. HTML
6.8.5.
Lneas horizontales
Si se desea dibujar una lnea horizontal como separador de bloques de texto, se puede emplear la etiqueta
<HR>
permite organizar el texto, separando las distintas secciones que lo componen. Esta etiqueta posee los siguientes atributos que permiten controlar la apariencia de la lnea horizontal dibujada:
WIDTH="anchura".
un valor absoluto (nmero de pixels) o un valor relativo (porcentaje respecto a la anchura de la pgina). El valor por defecto es la anchura de la pgina.
ALIGN="LEFT" | "RIGHT" | "CENTER". Alineamiento de la lnea horizontal respecto a la pgina. Por defecto, aparece centrada.
NOSHADE.
permite eliminar el sobreado, lo que produce una lnea slida. El siguiente cdigo muestra el empleo de esta etiqueta. En la Figura 6.10 se puede ver como se muestra en un navegador web.
Ejemplo 6.15
1 2
<HTML> <BODY>
6.9.
Listas
115
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Una lnea normal <HR> Una lnea sin sombra <HR NOSHADE> Una lnea con una anchura del 50% <HR WIDTH="50%"> Una lnea con una anchura del 50% alineada a la izquierda <HR WIDTH="50%" ALIGN="LEFT"> Una lnea con una anchura del 50% alineada a la derecha <HR WIDTH="50%" ALIGN="RIGHT"> Una lnea con una anchura de 50 pixels <HR WIDTH="50"> Una lnea con un grosor de 15 pixels <HR SIZE="15"> Una lnea con un grosor de 15 pixels sin sombra <HR SIZE="15" NOSHADE> Una lnea normal <HR> </BODY> </HTML>
6.9. Listas
Las listas permiten organizar la informacin de una manera lgica, lo que facilita su legibilidad. Existen cinco tipos de listas en
HTML:
ordenadas, listas no ordenadas, listas de directorio y listas de men. Como las dos ltimas listas estn obsoletas, ya que se visualizan como las listas no ordenadas, no las vamos a tratar. Las listas se pueden anidar entre s, incluso si son de distinto tipo. En el caso de anidar listas no numeradas, cada nivel de anidamiento tendr un tipo de smbolo distinto.
6.9.1.
Listas de denicin
Una lista de denicin se emplea para mostrar trminos con sus correspondientes deniciones, como si se tratase de un glosario o diccionario. Una lista de denicin se crea con la etiqueta Contiene una serie de trminos, que se denen con la etiqueta
(denition term ), y cada trmino posee una o ms deniciones, que se indican cada
15 En HTML
obligatoria.
</DT>
116
Captulo 6. HTML
6.9.
Listas
117
una lista de denicin, las deniciones de cada trmino aparecen con una sangra El siguiente ejemplo muestra como se usan estas etiquetas. Aunque las lneas que contienen las etiquetas produce este ejemplo.
Ejemplo 6.16
<DD>
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<HTML> <BODY> <DL> <DT>BANCO</DT> <DD>Lugar donde se deposita dinero</DD> <DD>Sitio donde se sienta la gente</DD> <DT>GATO</DT> <DD>Animal de cuatro patas con pelo</DD> <DD>Herramienta para levantar un vehculo</DD> <DT>ORDENADOR</DT> <DD>Aparato electrnico que realiza clculos</DD> </DL> </BODY> </HTML>
16 En HTML
obligatoria.
</DD>
XHTML
1.0 es
118
Captulo 6. HTML
6.9.2.
Listas ordenadas
<OL> ... <OL> (ordered list ) dene una lista de este tipo. Cada elemento se dene con 17 (list item ). Esta etiqueta posee dos atributos: START y la etiqueta <LI> ... </LI> TYPE. El atributo START indica el valor desde el que empieza la numeracin; tiene que
ser un valor positivo. El atributo
TYPE
A: a:
indica una numeracin con letras maysculas. Ejemplo: indica una numeracin con letras minsculas. Ejemplo:
A, B, C. a, b, c. I,
i: indica una numeracin con nmeros romanos en minsculas. Ejemplo: i, ii, iii. 1:
indica una numeracin con nmeros. Ejemplo:
1, 2, 3.
El siguiente ejemplo muestra el uso de esta etiqueta. Adems, tambin se puede ver como se pueden anidar listas (incluir una lista dentro de otra lista). En la Figura 6.12 vemos como se muestra esta pgina.
Ejemplo 6.17
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<HTML> <BODY> Lista normal, con anidamiento: <OL> <LI>Elemento 1</LI> <LI>Elemento 2</LI> <LI>Lista anidada: <OL> <LI>Elemento 1</LI> <LI>Elemento 2</LI> </OL> </LI> </OL> Lista numerada con letras en maysculas: <OL TYPE="A"> <LI>Elemento 1</LI>
17 En HTML
4.01 la etiqueta de cierre
</LI>
XHTML
1.0 es
obligatoria.
6.9.
Listas
119
17 18 19 20 21 22 23 24 25
<LI>Elemento 2</LI> </OL> Lista numerada con nmeros romanos: <OL TYPE="i"> <LI>Elemento 1</LI> <LI>Elemento 2</LI> </OL> </BODY> </HTML>
6.9.3.
Listas no ordenadas
En las listas no ordenadas, los elementos aparecen marcados mediante unos pequeos elementos grcos, llamados en ingls bullet. La etiqueta
dered list ) dene una lista no ordenada. Cada elemento se dene con la etiqueta
... </LI>18
obligatoria.
(list item ).
4.01 la etiqueta de cierre
18 En HTML
</LI>
120
Captulo 6. HTML
pleado para marcar los elementos. Los posibles valores que puede tomar este atributo
CIRCLE: DISC:
SQUARE:
El siguiente cdigo muestra como se emplea esta etiqueta. Adems, en la ltima lista hay un anidamiento de varias listas. En la Figura 6.13 se puede ver que cuando se anidan varias listas, el elemento grco bullet cambia automticamente, segn cual sea el nivel de anidamiento.
Ejemplo 6.18
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<HTML> <BODY> <UL TYPE="CIRCLE"> <LI>Elemento 1</LI> <LI>Elemento 2</LI> </UL> <UL TYPE="DISC"> <LI>Elemento 1</LI> <LI>Elemento 2</LI> </UL> <UL TYPE="SQUARE"> <LI>Elemento 1</LI> <LI>Elemento 2</LI> </UL> <UL> <LI>Elemento a: <UL> <LI>Elemento b: <UL> <LI>Elemento c:</LI> </UL> </LI> </UL> </LI> </UL> </BODY> </HTML>
6.10. Colores
121
6.10. Colores
En
HTML
fondo de una pgina, el color del texto, el color de una tabla, etc. Existen dos formas de especicar los colores: Mediante las componentes Red Green Blue (
se especica la intensidad de los colores bsicos rojo, verde y azul que permiten obtener por combinacin cualquier otro color. Cada componente puede variar entre 0 y 255, por lo que se tienen 16 777 216 (256 x 256 x 256) colores. Las componentes se tienen que expresar en hexadecimal y al principio se tiene que poner el signo brillante negro se representa mediante
#; por tanto, el formato general es #RRGGBB. Por ejemplo, el color #000000, el color blanco como #FFFFFF y un rojo como #FF0000.
Mediante los nombres de los colores. Existen una serie de colores a los que se les ha asignado un nombre en ingls, como green, olive o white. En el Apndice B se incluye ms informacin sobre el uso de colores en como pasar las componentes
HTML y
6.10.1.
BGCOLOR
122
Captulo 6. HTML
6.10.2.
La etiqueta
posee el atributo
COLOR
color del texto. Tambin se puede cambiar el color del texto para toda una pgina, el color de los enlaces, el color de los enlaces visitados y el color de los enlaces al activarse. Para ello se emplean los atributos
En el siguiente ejemplo, se cambia el color del texto y de los enlaces para que todos tengan el mismo color y no se puedan diferenciar unos de otros.
Ejemplo 6.19
1 2 3 4 5 6 7
<HTML> <BODY TEXT="black" LINK="black" VLINK="black" ALINK="black"> <A HREF="http://www.ua.es">Universidad de Alicante</A> <BR> <A HREF="http://www.eps.ua.es">Escuela Politcnica Superior</A> </BODY> </HTML>
6.11. Enlaces
Los enlaces o hiperenlaces permiten relacionar distintas pginas entre s (hipertexto). Esta caracterstica da la posibilidad de organizar la informacin en distintas pginas interese en cada momento. Un hiperenlace puede hacer referencia a un punto determinado de la pgina que lo contiene, a otra pgina
HTML enlazadas, de forma que el usuario pueda seleccionar la que ms le HTML o a un punto determinado de otra pgina HTML. HTML
para denir un hiperenlace es
En los dos ltimos casos, la pgina destino puede residir en el mismo servidor que la pgina que contiene el hiperenlace o en otro distinto. La etiqueta que utiliza Todo aquello que aparezca en una pgina
un hiperenlace (ser el objeto sensible que al ser pulsado producir el salto al destino del enlace). Normalmente suele utilizarse texto e imgenes como hiperenlaces.
6.11.1.
Un enlace de este tipo consta de dos partes: una referencia y un destino. El destino se identica por un nombre. La referencia har alusin al nombre del destino. En una pgina se pueden incluir varias referencias a un mismo destino, pero no se pueden crear varios destinos con el mismo nombre. La forma de denir este enlace es:
19 La A
6.11. Enlaces
123
Referencia: Destino:
va precedido del smbolo almohadilla (#), mientras que en el destino no. la Figura 6.14 vemos que la palabra
Como puede observarse, en el caso de la referencia el nombre al que hace alusin En el siguiente cdigo de ejemplo, tenemos un enlace sobre la misma pgina. En
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<HTML> <HEAD> <TITLE>Esto es una pgina HTML</TITLE> </HEAD> <BODY> Aqu tenemos un <A HREF="#destino">enlace</A> sobre la misma pgina. Hay que dejar muchas lneas en blanco para que se pueda comprobar el efecto. <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <A NAME="destino">Esto</A> es el destino del enlace que aparece al principio de la pgina. </BODY> </HTML>
6.11.2.
Para incluir un enlace en un documento a otro documento, simplemente hay que incluir en el documento origen una referencia al documento destino. En este ltimo no hace falta indicar que es destino de un enlace. La forma de denir este enlace es: Referencia: Muy
(pagina.html), hay que tener mucho cuidado con las maysculas y minsculas. En el siguiente ejemplo tenemos dos pginas con colores de fondo distintos; en cada una de ellas gura un enlace a la otra. Pgina
importante:
blanco.html
(Figura 6.16):
Ejemplo 6.21
1 2
<HTML> <HEAD>
124
Captulo 6. HTML
6.11. Enlaces
125
3 4 5 6 7 8 9
<TITLE>Esto es una pgina HTML</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <B>Aqu tenemos un <A HREF="azul.html">enlace</A> a otra pgina que tiene el fondo azul.</B> </BODY> </HTML>
Pgina
azul.html
(Figura 6.17):
Ejemplo 6.22
1 2 3 4 5 6 7 8 9
<HTML> <HEAD> <TITLE>Esto es una pgina HTML</TITLE> </HEAD> <BODY BGCOLOR="#BBBBFF"> <B>Aqu tenemos un <A HREF="blanco.html">enlace</A> a otra pgina que tiene el fondo blanco.</B> </BODY> </HTML>
6.11.3.
Este tipo de enlace es una combinacin de los dos anteriores. La forma de denir este enlace es: Referencia: Destino:
126
Captulo 6. HTML
En el siguiente ejemplo tenemos una pgina con dos enlaces a la misma pgina, pero a distintos destinos dentro de esa pgina. Pgina
unapagina.html
(Figura 6.18):
Ejemplo 6.23
1 2 3 4 5 6 7 8 9 10 11 12 13
<HTML> <HEAD> <TITLE>Esto es una pgina HTML</TITLE> </HEAD> <BODY> <B>Aqu tenemos un <A HREF="otrapagina.html#destino1">enlace</A> a un destino de otra pgina. <BR><BR> Aqu tenemos otro <A HREF="otrapagina.html#destino2">enlace</A> a otro destino de la misma pgina que antes. </B> </BODY> </HTML>
Pgina
otrapagina.html
1 2 3 4 5 6 7 8
<HTML> <HEAD> <TITLE>Esto es una pgina HTML</TITLE> </HEAD> <BODY> <B>Aqu tenemos un <A NAME="destino1">destino</A>, el nmero 1. <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
6.11. Enlaces
127
9 10 11 12
6.11.4.
Mediante el protocolo
mailto:
usuario pulse sobre un enlace. Realmente no se enva un correo electrnico automticamente: se abre el programa de correo electrnico que tenga congurado el usuario por defecto y se crea un nuevo mensaje, pero no se enva hasta que el usuario no lo conrme. La sintaxis de este protocolo es:
mailto:dir1[,dir2,...][?opcion1[&opcion2&...]] donde dir1, dir2, ... son direcciones de correo electrnico y opcion1, opcion2, ... es una lista de opciones opcional. Las principales opciones que se
pueden emplear son:
cc (carbon
rios.
bcc
(blind carbon copy ): para indicar el envo de copias del mensaje a otros
destinatarios ocultos.
subject: body:
128
Captulo 6. HTML
6.12. Tablas
129
ta que se tienen que separar con el smbolo & y que los valores de las opciones se tienen que escribir empleando codicacin URL (URL encoding ). En esta codicacin, una serie de caracteres especiales, como por ejemplo &, usando el smbolo
Estas opciones se pueden combinar en un nico enlace. Slo hay que tener en cuen-
%
%, $
o , se codican
El siguiente ejemplo contiene seis enlaces con distintas opciones que envan un correo electrnico al ser pulsado cualquiera de ellos. En la Figura 6.21 se puede observar como se visualiza esta pgina en un navegador: en la barra de estado del navegador se puede apreciar la de Netscape Messenger que se abre automticamente al pulsar sobre el ltimo enlace.
Ejemplo 6.25
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<HTML> <HEAD> <TITLE>Ejemplo de envo de correo electrnico</TITLE> </HEAD> <BODY> <A HREF="mailto:a@b.c">Simple</A> <BR> <A HREF="mailto:a@b.c,d@e.f">A dos personas</A> <BR> <A HREF="mailto:a@b.c?cc=d@e.f">Con copia</A> <BR> <A HREF="mailto:a@b.c?bcc=d@e.f">Con copia oculta</A> <BR> <A HREF="mailto:a@b.c?subject=El%20tema%20del%20mensaje">Con ttulo</A> <BR> <A HREF="mailto:a@b.c?cc=d@e.f&subject=Tema&body=Cuerpo%20mensaje"> Combinando varias opciones</A> </BODY> </HTML>
6.12. Tablas
bular cosas en una pgina consista en usar texto con preformato (<PRE> Hasta que aparecieron las tablas en el lenguaje
... </PRE>)
y colocar manualmente los espacios hasta que las columnas estuviesen perfectamente alineadas. Este proceso, adems de ser realmente tedioso, no ofrece resultados con la vistosidad deseada. Las tablas se construyen siguiendo una serie de reglas sencillas:
130
Captulo 6. HTML
6.12. Tablas
131
Las tablas en
</TABLE>.
cdigos
HTML
<TABLE> ...
Una tabla se compone de celdillas de datos. Una celdilla se dene usando los
Pueden existir celdillas que se emplean como encabezados de las o columnas, y se denen con los cdigos diferenciada de las otras, normalmente en negrita. Las celdillas pueden contener cualquier elemento laces e incluso otras tablas anidadas.
El siguiente ejemplo muestra una tabla con bordes formada por nueve celdas, de las que tres forman parte del encabezado. La tabla se ha dividido en tres las y tres columna. En la Figura 6.23 vemos como se ve esta pgina en una navegador.
Ejemplo 6.26
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<HTML> <BODY> <TABLE BORDER="1"> <TR> <TH>Cabecera 1</TH> <TH>Cabecera 2</TH> <TH>Cabecera 3</TH> </TR> <TR> <TD>Elemento (1, 1)</TD> <TD>Elemento (1, 2)</TD> <TD>Elemento (1, 3)</TD> </TR> <TR> <TD>Elemento (2, 1)</TD> <TD>Elemento (2, 2)</TD> <TD>Elemento (2, 3)</TD> </TR> </TABLE> </BODY> </HTML>
Los atributos ms importantes de la etiqueta
<TABLE>
son:
BGCOLOR="color".
132
Captulo 6. HTML
BORDER="n".
CELLPADDING="n".
HEIGHT="n" | "n %". Alto de la tabla. Se puede indicar en pixels o en tanto por
ciento en relacin a la altura total disponible.
por ciento en relacin a la anchura total disponible. Los atributos ms importantes de las etiquetas
<TR>, <TH>
<TD>
son:
ALIGN="LEFT" | "CENTER" | "RIGHT". Alineamiento de una la (<TR>) o de una celda (<TH> y <TD>). BGCOLOR="color".
Color de fondo de una celda.
VALIGN="BASELINE" | "BOTTOM" | "MIDDLE" | "TOP". Alineamiento vertical del contenido de una una la (<TR>) o de una celda (<TH> y <TD>).
6.12.1. Fusin de las y columnas
En ocasiones interesa que las tablas no tengan el mismo nmero de las y de columnas, sino que se fusionen las celdas de algunas las y/o columnas. Para ello se emplean los atributos
... </TD>.
COLSPAN
ROWSPAN
de las etiquetas
<TD>
6.12. Tablas
133
COLSPAN="n",
donde
ROWSPAN="n",
El siguiente ejemplo muestra una tabla con varias celdas fusionadas. En la Figura 6.24 vemos como se ve esta pgina en una navegador.
Ejemplo 6.27
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
<HTML> <BODY> <BR><BR> <CENTER> <TABLE BORDER="1"> <TR> <TD>Una celda normal</TD> <TD>Una celda normal</TD> <TD>Una celda normal</TD> </TR> <TR> <TD COLSPAN="2">Una celda mediante COLSPAN</TD> <TD>Una celda normal</TD> </TR> <TR> <TD COLSPAN="3">Una celda mediante COLSPAN</TD> </TR> <TR> <TD ROWSPAN="2">Una celda mediante ROWSPAN</TD> <TD>Una celda normal</TD> <TD>Una celda normal</TD> </TR> <TR> <TD>Una celda normal</TD> <TD>Una celda normal</TD> </TR> <TR> <TD ROWSPAN="3">Una celda mediante ROWSPAN</TD> <TD>Una celda normal</TD> <TD>Una celda normal</TD> </TR> <TR> <TD>Una celda normal</TD> <TD>Una celda normal</TD>
134
Captulo 6. HTML
39 40 41 42 43 44 45 46 47
</TR> <TR> <TD>Una celda normal</TD> <TD>Una celda normal</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
6.12.2.
Tablas invisibles
Se conoce como tablas invisibles a aquellas que no poseen borde (BORDER="0"). Las tablas invisibles son muy tiles para distribuir los distintos elementos en una pgina
HTML.
Por ejemplo, mediante tablas invisibles se puede mostrar el texto con mrgenes a la izquierda y a la derecha, mostrar texto a varias columnas, dividir una imagen en diferentes cheros y que se muestre como si no estuviese dividida, etc.
6.12.3.
El contenido de una tabla se puede alinear de forma horizontal o vertical. El alineamiento horizontal se indica con el atributo
ALIGN,
6.12. Tablas
135
RIGHT (a la derecha). El alineamiento VALIGN, que puede tomar los valores BOTTOM (abajo del todo), BASELINE (en la lnea base), MIDDLE (en el medio) y TOP (arriba del todo). Estos dos atributos se pueden aplicar tanto a la etiqueta <TR> ... </TR> como a la etiqueta <TD> ... </TD>. Si se aplica a ambas etiquetas a la vez, el alineamiento que se emplea es el indicado por la etiqueta <TD> ... </TD>.
(a la izquierda), (centrado) y vertical se indica con el atributo El siguiente ejemplo muestra una tabla con distinto alineamiento horizontal y vertical. En la Figura 6.25 vemos como se muestra esta pgina en una navegador.
Ejemplo 6.28
LEFT
CENTER
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
<HTML> <BODY> <BR><BR> <CENTER> <TABLE BORDER="1"> <TR ALIGN="CENTER"> <TD>Varias<BR>lneas<BR>de texto</TD> <TD>Alineamiento CENTER</TD> <TD>Alineamiento CENTER</TD> <TD>Alineamiento CENTER</TD> </TR> <TR ALIGN="RIGHT" VALIGN="TOP"> <TD>Varias<BR>lneas<BR>de texto</TD> <TD>Alineamiento RIGHT y TOP</TD> <TD>Alineamiento RIGHT y TOP</TD> <TD>Alineamiento RIGHT y TOP</TD> </TR> <TR> <TD>Varias<BR>lneas<BR>de texto</TD> <TD ALIGN="LEFT">Alineamiento LEFT</TD> <TD ALIGN="CENTER">Alineamiento CENTER</TD> <TD ALIGN="RIGHT">Alineamiento RIGHT</TD> </TR> <TR> <TD>Varias<BR>lneas<BR>de texto</TD> <TD VALIGN="TOP">Alineamiento TOP</TD> <TD VALIGN="MIDDLE">Alineamiento MIDDLE</TD> <TD VALIGN="BOTTOM">Alineamiento BOTTOM</TD> </TR> <TR VALIGN="MIDDLE"> <TD>Varias<BR>lneas<BR>de texto</TD> <TD VALIGN="TOP">Alineamiento TOP</TD> <TD VALIGN="MIDDLE">Alineamiento MIDDLE</TD> <TD VALIGN="BOTTOM">Alineamiento BOTTOM</TD> </TR> </TABLE>
136
Captulo 6. HTML
37 38 39
6.12.4.
La distancia entre el borde de una celda y su contenido, y la distancia entre los bordes de dos celdas contiguas se puede congurar. Desgraciadamente, no se puede congurar nicamente para un conjunto de celdas de una tabla, sino que afecta a todas las celdas de una tabla. El atributo defecto es 1. El atributo defecto es 2.
CELLPADDING="n" CELLSPACING="n"
de la etiqueta
modica la
distancia, en pixels, existente entre el borde de una celda y su contenido. El valor por
de la etiqueta
modica la
distancia, en pixels, existente entre los bordes de dos celdas contiguas. El valor por
6.12. Tablas
137
El siguiente ejemplo muestra cuatro tablas con distintas distancias entre el borde y su contenido y entre celdas contiguas. En la Figura 6.26 vemos como se visualiza esta pgina en una navegador.
Ejemplo 6.29
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
<HTML> <BODY> <BR><BR> <CENTER> <TABLE BORDER="1" CELLPADDING="5"> <TR> <TD>Alineamiento CENTER</TD> <TD>Alineamiento CENTER</TD> <TD>Alineamiento CENTER</TD> </TR> <TR> <TD>Alineamiento RIGHT y TOP</TD> <TD>Alineamiento RIGHT y TOP</TD> <TD>Alineamiento RIGHT y TOP</TD> </TR> </TABLE> <BR> <TABLE BORDER="1" CELLPADDING="15"> <TR> <TD>Alineamiento CENTER</TD> <TD>Alineamiento CENTER</TD> <TD>Alineamiento CENTER</TD> </TR> <TR> <TD>Alineamiento RIGHT y TOP</TD> <TD>Alineamiento RIGHT y TOP</TD> <TD>Alineamiento RIGHT y TOP</TD> </TR> </TABLE> <BR> <TABLE BORDER="1" CELLSPACING="5"> <TR> <TD>Alineamiento CENTER</TD> <TD>Alineamiento CENTER</TD> <TD>Alineamiento CENTER</TD> </TR> <TR> <TD>Alineamiento RIGHT y TOP</TD> <TD>Alineamiento RIGHT y TOP</TD> <TD>Alineamiento RIGHT y TOP</TD> </TR>
138
Captulo 6. HTML
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
</TABLE> <BR> <TABLE BORDER="1" CELLSPACING="15"> <TR> <TD>Alineamiento CENTER</TD> <TD>Alineamiento CENTER</TD> <TD>Alineamiento CENTER</TD> </TR> <TR> <TD>Alineamiento RIGHT y TOP</TD> <TD>Alineamiento RIGHT y TOP</TD> <TD>Alineamiento RIGHT y TOP</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
6.12.5.
Las tablas son muy tiles para crear marcos alrededor del texto o cualquier otro elemento de una pgina
HTML.
vez sencillos de realizar mediante diversas tablas anidadas. Por ejemplo, el siguiente cdigo, cuyo resultado se muestra en la Figura 6.27, muestra un texto sobre un fondo rojo rodeado de un marco amarillo en una pgina cuyo fondo es de color naranja. El tamao de las celdas de la tabla exterior se ha modicado mediante el atributo
CELLPADDING="10"
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<HTML> <BODY BGCOLOR="orange"> <BR> <CENTER> <TABLE BORDER="0" BGCOLOR="yellow" CELLPADDING="10"> <TR><TD> <TABLE BORDER="0" BGCOLOR="red"> <TR><TD> <FONT SIZE="5">HTML til y prctico</FONT> </TD></TR> </TABLE> </TD></TR> </TABLE> </CENTER>
6.12. Tablas
139
140
Captulo 6. HTML
15 16
</BODY> </HTML>
6.13. Imgenes
Al inicio de la Web, el empleo de imgenes en los documentos escaso no empleen una gran cantidad de imgenes. Los dos formatos de imagen que admiten la mayora de los navegadores son Grap-
20 . Sin embargo, hoy es todo lo contrario y es muy difcil encontrar pginas que
GIF) y JPEG, pero ya se empieza a usar cada vez ms el PNG. Las caractersticas bsicas de los tres formatos se han resumido
en el Cuadro 6.4. Colores indica el mximo nmero de colores que permite el formato grco; transparencia indica si soporta transparencias (zonas de una imagen que muestran lo que est situado detrs de ella); animacin indica si soporta animaciones; compresin indica si emplea un formato de compresin sin prdidas o con prdidas; dibujo indica si es un formato grco adecuado para almacenar imgenes sencillas, como dibujos, logotipos, textos, etc.; fotografa indica si es un formato grco adecuado para almacenar fotografas; por ltimo, gamma indica si soporta el empleo de la correccin gamma cuando se visualiza la imagen.
20 Las
razones pueden ser varias: los ordenadores no tenan la suciente potencia para manejar
varias imgenes a la vez, el ancho de banda en las comunicaciones era menor que el actual o a nadie se le haba ocurrido la idea de hacer un uso intensivo y extensivo de las imgenes.
6.13. Imgenes
141
Caracterstica
Colores Transparencia Animacin Compresin Dibujo Fotografa Gamma
GIF
256 (8 bits) S S Sin prdidas S No No
JPEG
16 777 216 (24 bits) No No Con prdidas No S No
PNG
48 bits S (alfa) No Sin prdidas S S S
6.13.1.
Archivos GIF
21 para reducir su tamao, y la paleta de color se limita
Este formato grco es uno de los ms populares en Internet. Emplea un esquema de compresin sin prdidas a 8 bits, lo que permite un mximo de 256 colores. Adems, permite denir un color como transparente y la forma de descarga en el navegador se puede denir como normal o entrelazada. En el modo entrelazado, las lneas que forman la imagen no se almacenan secuencialmente, sino entrelazadas por grupos, como por ejemplo, grupo 1 (lneas 1, 5, 9, . . . ), grupo 2 (lneas 2, 6, 10, . . . ), etc. De este modo, conforme se descarga la imagen se van visualizando las lneas entrelazadas, lo que proporciona una idea global de la imagen nal. Por ltimo, existen distintas versiones de este formato grco, siendo las ms empleadas GIF87A y GIF89A. El esquema de compresin empleado es Lempel Ziv Welch (
funciona mucho mejor en imgenes con zonas de color homogneo, ya que es menos ecaz en imgenes complejas con muchos colores y texturas complejas. Cuantos menos colores tiene una imagen, mejor funciona el esquema de compresin empleado por en color: la primera ocupa 1 276 bytes y la segunda 1 478 bytes. El formato
GIF. Por ejemplo, en la Figura 6.28 se muestra la misma imagen en blanco/negro y GIF
tambin permite denir un color como transparente. De esta forma, las zonas de la imagen que posean ese color sern transparentes y se podr ver lo que est detrs de la imagen. Normalmente se asigna la transparencia al color de fondo de la imagen. La propiedad de transparencia no es selectiva, lo que signica que si se asigna la transparencia a un color, todos los puntos de la imagen que contengan ese color se convertirn en transparentes, lo que puede ocasionar problemas en algunos casos. Otros problemas que pueden surgir con las transparencias ocurren cuando en la imagen se ha aplicado un suavizado (antialiasing ). El suavizado modica los bordes insertando colores intermedios en los lmites de las formas como pueden ser las letras
21 Compresin
calidad de las imgenes no se ve afectada al recuperar las imgenes una vez comprimidas.
142
Captulo 6. HTML
(a)
(b)
o las lneas. Tiene como n mejorar la apariencia de las imgenes, ya que suaviza los dientes de sierra. Cuando se intenta usar una imagen con suavizado y fondo transparente sobre un color de fondo distinto al empleado durante el suavizado ocurren problemas, ya que el suavizado aparece como un halo alrededor de los lmites de las formas de la imagen. Por ejemplo, en la Figura 6.29 aparece una imagen con suavizado sobre un fondo blanco. Cuando la misma imagen se coloca sobre un fondo de otro color, aparecen distintas zonas que corresponden al suavizado, tal como se puede apreciar en la Figura 6.30.
Figura 6.30: GIF transparente sobre fondo no blanco Los anuncios que se insertan en las pginas web, llamados pancartas o banderolas (banners ) suelen emplear el formato
6.13. Imgenes
143
Internet, posee una serie de guas ver algunos de ellos: 468 x 60 (Full Banner ) 234 x 60 (Half Banner ) 88 x 31 (Micro Bar ) 120 x 90 (Button 1 ) 120 x 60 (Button 2 )
se incluyen los tamaos que han sido estandarizados y en la Figura 6.31 se pueden
160 x 600 (Wide Skyscraper ) 120 x 600 (Skyscraper ) 125 x 125 (Square Button ) 120 x 240 (Vertical Banner ) 180 x 150 (Rectangle ) 300 x 250 (Medium Rectangle ) 250 x 250 (Square Pop-up ) 240 x 400 (Vertical Rectangle ) 336 x 280 (Large Rectangle )
6.13.2.
Archivos JPEG
JPEG son imgenes a todo color (24 bits por punto de la imagen). Adems, JPEG progresivo (mecanismo similar al entrelazado en el formato GIF) JPEG
es una sosticada tcnica matemtica de-
se pueden descargar progresivamente las imgenes, lo que facilita una previsualizacin rpida de las imgenes. El esquema de compresin de
nominada transformacin discreta de cosenos. Mediante esta tcnica se pueden elegir distintos grados de compresin y de calidad: cuanto ms se comprime una imagen, menor es su calidad y vice versa.
22 http://www.iab.net/iab_banner_standards/bannersizes.html.
144
Captulo 6. HTML
6.13. Imgenes
145
23 . Si se
selecciona correctamente el grado de compresin, la reduccin del tamao del chero que contiene la imagen compensa con creces la inapreciable prdida de calidad. A medida que se aumenta el nivel de compresin, aparecen varios problemas en las imgenes
JPEG:
en la Figura 6.32 se puede ver a la izquierda una imagen en su formato original (sin prdidas) y a la derecha la palabra en ampliada para apreciar la calidad de la imagen. Esta imagen de 100 x 300 ocupa 31 078 bytes en formato Bit-map (
BMP).
En la Figura 6.33 y Figura 6.34 se muestra la misma imagen comprimida con dos niveles de compresin distintos: en la Figura 6.33 el nivel de compresin es 15 sobre 100 (10 281 bytes) y en la Figura 6.34 75 sobre 100 (3 643 bytes). En las imgenes de la izquierda prcticamente no se aprecian diferencias, pero cuando se amplia la imagen se puede observar la aparicin de ruido, los bordes borrosos y la textura cuadriculada.
cia de fotografa: imgenes complejas, con suaves transiciones de tono y color y sin bordes muy marcados. Para las imgenes con formas geomtricas, bordes marcados y transiciones de color acentuadas, como pueden ser los esquemas, logotipos o dibujos, es mejor no emplear este formato grco.
6.13.3.
Archivos PNG
El formato grco
PNG
W3C como una alternativa GIF tradicional24 . Este formato grco se ha creado GIF.
Soporte de imgenes basadas en paleta (1, 2, 4, 8-bit), como Soporte de escala de grises (1, 2, 4, 8, 16-bit). Soporte de color real (24, 48-bit), como Transparencia binaria, como
JPEG.
GIF.
Transparencia alfa (256 o 65 536 niveles de transparencia parcial). Correccin gamma. Algoritmo de compresin sin prdidas no patentado (pblico).
23 Si
se trabaja con
JPEG,
formato que no produzca prdidas, ya que una vez comprimida la imagen con recuperar los datos perdidos y, por tanto, la calidad original de la imagen.
JPEG GIF
es imposible
propiedad de Unisys Corporation. Todo programador que emplee el formato los correspondientes derechos de propiedad a ambas compaas.
146
Captulo 6. HTML
(a)
(b)
(a)
(b)
(a)
(b)
6.13. Imgenes
147
PNG no permite animaciones como GIF, pero se ha desarrollado un PNG que s que permite crear animaciones. esquema de compresin de PNG es muy superior al de GIF. Por ejemplo,
las dos imgenes de la Figura 6.28 ocupan con este formato 248 bytes y 279 bytes respectivamente, lo que supone una reduccin de aproximadamente el 80 % en el tamao del chero. Aunque Microsoft Internet Explorer y Netscape Communicator en sus ltimas versiones (a partir de 4.x) ya lo soportan parcialmente, an no se encuentra muy extendido su uso. Adems, algunas caractersticas no se implementan correctamente. Por ejemplo, en la Figura 6.35, 6.36 y 6.37 se puede ver la misma imagen
PNG visualizada
mediante Netscape Communicator 4.78 (donde peor se ve), Microsoft Internet Explorer 5.5 y Opera 6.0 (donde mejor se ve). Esta imagen posee transparencia alfa, pero esta caracterstica no se visualiza correctamente en todos los navegadores: En Netscape Communicator se ve una barra horizontal con un degradado y las letras tienen un color slido porque no se tienen en cuenta la transparencia. Adems en las letras (como la 'e' y la 'g') se pueden observar dientes de sierra, ya que al no realizarse la transparencia no se puede hacer antialiasing . En Microsoft Internet Explorer se puede observar como el color de las letras no es slido y la barra horizontal ha desaparecido: ahora hay tres barras ms pequeas y el degradado ha cambio. Esto se debe a que la transparencia tiene efecto con el color de fondo de la imagen. En Opera la transparencia se realiza con la imagen de fondo y no con el color de fondo. Se puede observar como la textura de la imagen de fondo se ve a travs de las letras.
6.13.4.
Etiqueta <IMG>
La etiqueta
(image ). Una imagen se puede colocar en cualquier punto de un documento: en un enlace, en una tabla, etc. Los atributos ms importantes de esta etiqueta son:
SRC="localizacin".
quiere insertar.
BORDER="anchura".
Cuando se coloca una imagen en un enlace, automticamente se crea un borde; si no se quiere que aparezca el borde, hay que asignar el valor 0 a este atributo.
WIDTH="anchura".
Anchura de la imagen.
148
Captulo 6. HTML
Figura 6.35: Imagen PNG con transparencias visualizada en Netscape Communicator 4.78
Figura 6.36: Imagen PNG con transparencias visualizada en Microsoft Internet Explorer 5.5
6.13. Imgenes
149
HEIGHT="altura".
ALT="texto". Texto alternativo que se muestra si el navegador 25 etiqueta <IMG> o se ha interrumpido la carga de imgenes.
ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". Especica el alineamiento de la imagen con respecto al texto que la rodea. Se recomienda indicar siempre la anchura y la altura de cada imagen con los atributos
WIDTH
HEIGHT,
26 .
El siguiente cdigo muestra como se emplean las imgenes. La pgina est formada por una tabla con cuatro celdas. En cada celda se muestra la misma imagen con un alineamiento distinto. Adems, la ltima imagen tambin posee un borde. En la Figura 6.38 se puede observar como se visualiza este cdigo en un navegador.
Ejemplo 6.31
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<HTML> <BODY> <TABLE BORDER="0"> <TR> <TD> <IMG SRC="foto.jpg" WIDTH="134" El manitas de la casa </TD> <TD> <IMG SRC="foto.jpg" WIDTH="134" El manitas de la casa </TD> </TR> <TR> <TD> <IMG SRC="foto.jpg" WIDTH="134" El manitas de la casa </TD> <TD> <IMG SRC="foto.jpg" WIDTH="134" El manitas de la casa </TD> </TR> </TABLE>
25 La 26 El
HEIGHT="191" ALIGN="TEXTTOP">
HEIGHT="191" ALIGN="MIDDLE">
HEIGHT="191" ALIGN="BOTTOM">
HEIGHT="191" BORDER="10">
gente con problemas de visin emplea un software especial que lee las pginas web; cuando
ALT
y lee su contenido.
navegador conoce el tamao de las imgenes antes de cargarlas, por lo que ya puede reservar
150
Captulo 6. HTML
25 26
</BODY> </HTML>
6.13.5.
La etiqueta
trar una imagen como fondo de una pgina. Si la imagen tiene un tamao menor que la ventana del navegador, la imagen se muestra en forma de mosaico hasta cubrir toda la supercie de la ventana.
6.14. Formularios
Los formularios son la herramienta que ofrece macin de un usuario que visita una pgina su procesamiento.
6.14. Formularios
151
Un formulario contiene dos tipos de elementos bsicos: campos de datos (cuadros de texto, listas de seleccin, casillas de vericacin) y de control (botones). Dentro de una pgina
en cuenta que no pueden anidarse ni solaparse. El servidor web slo podr recibir la informacin introducida en uno de ellos (slo se enva la informacin de uno de los formularios al servidor). La estructura bsica de un formulario es:
Ejemplo 6.32
1 2 3
<FORM>
NAME
ACTION
indica la direccin (
URL)
METHOD
POST27 ).
Lnea 2: En esta seccin se incluyen los controles que posee el formulario. Lnea 3: Fin del formulario.
6.14.1.
Controles de un formulario
Un formulario puede contener los siguiente controles: Botones (para enviar informacin, borrar y otras acciones):
<INPUT <INPUT
TYPE="IMAGE">.
que
actan
como
botones
(para
enviar
informacin):
Campos de vericacin:
<INPUT TYPE="TEXT">.
POST,
que indica que los datos se enven por la entrada estndar. Si se
27 Normalmente
utiliza
GET,
se utiliza
variable de entorno
QUERY_STRING.
URL
152
Captulo 6. HTML
28 (password ):
<INPUT TYPE="PASSWORD">.
<INPUT TYPE="HIDDEN">. <INPUT TYPE="FILE">. <SELECT> ... </SELECT>, <OPTION>. <TEXTAREA> ... </TEXTAREA>.
Envo de cheros:
Listas de seleccin:
Para que los datos introducidos en un formulario se enven al servidor, todo formulario tiene que tener un botn de tipo los datos. Este botn se puede sustituir por un botn normal
entonces el envo se tiene que realizar manualmente mediante cdigo de script. Conviene dar un nombre a los campos que coloquemos en un formulario, ya que al enviar la informacin, sta se transmite como pares nombre-valor. Para ello, todas las etiquetas de los controles poseen el atributo bre al control, que deber ser un nombre nico y el atributo to excepto
NAME
tendr que tener el mismo nombre (excepto en el caso de los botones de radio),
VALUE para asignar un valor (todas las etiquetas tienen este atribu<INPUT TYPE="IMAGE">, <SELECT> ... </SELECT> y <TEXTAREA> ... </TEXTAREA>). En los botones, el atributo VALUE modica el texto que muestra el
botn (la etiqueta del botn). El siguiente cdigo genera una pgina
HTML
un campo de texto, un campo de contrasea, dos campos excluyentes con el mismo nombre (y por tanto slo se puede elegir una de las dos opciones), dos campos de vericacin, una lista de seleccin, un rea de texto y dos botones (para enviar informacin y borrar). En la Figura 6.39 se muestra el formulario tal como se ve en un navegador.
Ejemplo 6.33
1 2 3 4 5 6 7 8 9 10
<HTML> <HEAD> <TITLE>Esto es una pgina HTML con formularios</TITLE> </HEAD> <BODY> Esto es el cuerpo de una pgina HTML. Esta pgina posee un formulario: <HR> <FORM NAME="miFormulario" ACTION="procesa.asp" METHOD="POST"> Cuadro de texto: <INPUT TYPE="TEXT" NAME="control1a" VALUE="Algo"> <BR>
28 Un 29 En
campo de contrasea es idntico a un campo de texto, pero los caracteres se ocultan mediante realidad, pueden existir varios controles (incluso de distinto tipo) con el mismo nombre, pero
asteriscos. cuando se procesen los datos en el servidor no se podr saber de que control procede cada dato.
6.14. Formularios
153
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Cuadro de texto contrasea: <INPUT TYPE="PASSWORD" NAME="control1b"> <BR><BR> Botones de radio: <INPUT TYPE="RADIO" NAME="control2" VALUE="1">Opcin 1 <INPUT TYPE="RADIO" NAME="control2" VALUE="2">Opcin 2 <BR><BR> Casilla de verificacin: <INPUT TYPE="CHECKBOX" NAME="control3a" VALUE="1">Opcin 1 <INPUT TYPE="CHECKBOX" NAME="control3b" VALUE="2">Opcin 2 <BR><BR> Lista de seleccin: <SELECT NAME="control4"> <OPTION VALUE="ali">Alicante</OPTION> <OPTION VALUE="val">Valencia</OPTION> <OPTION VALUE="cas">Castelln</OPTION> </SELECT> <BR><BR> Area de texto: <TEXTAREA NAME="control5"></TEXTAREA> <BR><BR> <INPUT TYPE="SUBMIT" VALUE="Enviar"> <INPUT TYPE="RESET" VALUE="Borrar"> </FORM> <HR> </BODY> </HTML>
6.14.2.
Campos de vericacin
TYPE="CHECKBOX">) VALUE.
tivado y desactivado. Si al enviarse un formulario un campo de vericacin est activo, se enva al servidor el valor indicado por pueden tener el mismo nombre (NAME), aunque no es lo usual ya que complica la programacin de la aplicacin web en el servidor. Si se desea que por defecto un campo de vericacin aparezca activado, se tiene que incluir el atributo Distintos campos de vericacin
CHECKED
en la etiqueta
<INPUT TYPE="CHECKBOX">.
6.14.3.
Campos excluyentes
TYPE="RADIO">)
tienen sen-
tido cuando se emplean varios a la vez. Un grupo de botones de radio est formado
por varios botones de radio que tienen todos el mismo nombre (NAME). En un grupo de botones de radio slo un botn de radio puede estar seleccionado en un instante. Un formulario puede contener distintos grupos de botones de radio.
154
Captulo 6. HTML
6.14. Formularios
155
Los botones de radio tambin poseen el atributo botn de radio seleccionado por defecto.
CHECKED
6.14.4.
Campos de texto
En los campos de texto normal (<INPUT TYPE="TEXT">) y de contrasea (<INPUT TYPE="PASSWORD">) se puede escribir una cadena de caracteres. Se puede emplear el atributo SIZE para especicar el tamao visual del cuadro de texto. Es decir, se puede indicar cuantos caracteres se pueden visualizar en un momento dado. No confundir este atributo con tantos caracteres como se desee. Por ltimo, para indicar un valor por defecto que tiene que contener el campo de texto cuando se visualice la pgina por primera vez se emplea el atributo
MAXLENGTH,
VALUE.
6.14.5.
Listas de seleccin
Las listas de seleccin se crean con la etiqueta una. Si se aade el atributo El atributo
En las
listas de seleccin se muestra una serie de opciones de las que el usuario puede elegir
SIZE
MULTIPLE,
30 .
neamente. Si el valor de este atributo es 1 (valor por defecto), se muestra una lista desplegable; si el valor de este atributo es mayor que 1, se muestra un cuadro de opciones con una barra de desplazamiento vertical. Cada opcin de una lista de seleccin se indica con la etiqueta <OPTION> ... </OPTION>31 . Cada opcin puede tener asociado un valor (VALUE), que es el valor que se enviar al servidor. Si se desea que una opcin aparezca marcada por defecto se tiene que aadir a la opcin el atributo
SELECTED.
El siguiente ejemplo muestra tres listas: una lista normal, una lista normal que muestra tres opciones a la vez y posee una seleccionada por defecto y una lista mltiple. En la Figura 6.40 se puede observar como se visualiza esta pgina en un navegador.
Ejemplo 6.34
1 2 3 4
y la tecla ltima).
Mays ()
Control
31 En HTML
</OPTION>
XHTML
1.0 es
obligatoria.
156
Captulo 6. HTML
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
<SELECT NAME="provincia"> <OPTION VALUE="1">Alicante</OPTION> <OPTION VALUE="2">Valencia</OPTION> <OPTION VALUE="3">Castelln</OPTION> </SELECT> <BR><BR><BR><BR> Lista de seleccin normal de tamao 3: <SELECT NAME="universidad" SIZE="3"> <OPTION VALUE="uv">Universidad de Valencia</OPTION> <OPTION VALUE="uji">Universidad Jaime I</OPTION> <OPTION VALUE="ua" SELECTED>Universidad de Alicante</OPTION> <OPTION VALUE="upv">Universidad Politcnica de Valencia</OPTION> <OPTION VALUE="umh">Universidad Miguel Hernndez</OPTION> </SELECT> <BR><BR><BR><BR> Lista de seleccin mltiple: <SELECT NAME="departamento" MULTIPLE> <OPTION VALUE="dlsi">D. de Lenguajes y Sistemas Informticos</OPTION> <OPTION VALUE="damma">D. de Anlisis M. y M. Aplicada</OPTION> <OPTION VALUE="dfists">D. de Fsica e Ingeniera de Sistemas</OPTION> <OPTION VALUE="dagr">D. de Anlisis Geogrfico Regional</OPTION> <OPTION VALUE="mmlab">Laboratorio Multimedia</OPTION> </SELECT> </FORM> </BODY> </HTML>
6.14.6.
reas de texto
La etiqueta
den escribir varias lneas de texto. Esta etiqueta posee dos atributos que permiten modicar su tamao. El atributo se pueden mostrar sin tener que realizar scroll horizontal. El atributo nmero de lneas que se pueden mostrar sin realizar scroll vertical. Si se quiere que el rea de texto muestre un texto por defecto, se puede incluir entre las etiquetas de inicio y n. El siguiente ejemplo muestra dos reas de texto de distinto tamao, una de ellas con un texto por defecto. En la Figura 6.41 se puede ver esta pgina visualizada en un navegador. Se pueden observar las barras de desplazamiento vertical y horizontal.
Ejemplo 6.35
ROWS
dene el
1 2
<HTML> <BODY>
6.14. Formularios
157
3 4 5 6 7 8 9 10 11
<FORM> rea 1: <TEXTAREA ROWS="2" COLS="40">Texto por defecto...</TEXTAREA> <BR> rea 2: <TEXTAREA ROWS="4" COLS="20"></TEXTAREA> </FORM> </BODY> </HTML>
6.14.7.
Alineamiento de formularios
El alineamiento de los controles de un formulario es muy importante, ya que facilita su lectura y su utilizacin. El siguiente ejemplo muestra un formulario sin alineamiento, donde cada control comienza en una posicin horizontal diferente. En la Figura 6.42 se puede ver como se muestra esta pgina en un navegador. El formulario tiene una apariencia descuidada y su uso es difcil y lento, ya que los controles no estn organizados.
Ejemplo 6.36
1 2
<HTML> <BODY>
158
Captulo 6. HTML
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<FORM> Nombre empresa: <INPUT TYPE="TEXT" NAME="nombreempresa" SIZE="40"> <BR> Nombre: <INPUT TYPE="TEXT" NAME="nombre" SIZE="20"> <BR> Apellidos: <INPUT TYPE="TEXT" NAME="apellidos" SIZE="30"> <BR> Direccin: <INPUT TYPE="TEXT" NAME="direccion" SIZE="40"> <BR> Poblacin: <SELECT NAME="poblacion"> <OPTION VALUE="1">Alicante</OPTION> <OPTION VALUE="2">Castelln</OPTION> <OPTION VALUE="3">Valencia</OPTION> </SELECT> <BR> Sexo: <INPUT TYPE="RADIO" NAME="sexo" VALUE="H"> Hombre <INPUT TYPE="RADIO" NAME="sexo" VALUE="M"> Mujer <BR> </FORM> </BODY> </HTML>
El siguiente ejemplo muestra el mismo formulario que antes, pero organizado gra-
cias al empleo de una tabla con bordes invisibles. En la Figura 6.43 se puede observar como se visualiza en un navegador. Aunque la pgina ha variado poco, ahora el
6.14. Formularios
159
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<HTML> <BODY> <CENTER> <FORM> <TABLE BORDER="0"> <TR> <TD ALIGN="RIGHT">Nombre empresa:</TD> <TD><INPUT TYPE="TEXT" NAME="nombreempresa" SIZE="40"></TD> </TR> <TR> <TD ALIGN="RIGHT">Nombre:</TD> <TD><INPUT TYPE="TEXT" NAME="nombre" SIZE="20"></TD> </TR> <TR> <TD ALIGN="RIGHT">Apellidos:</TD> <TD><INPUT TYPE="TEXT" NAME="apellidos" SIZE="30"></TD> </TR> <TR> <TD ALIGN="RIGHT">Direccin:</TD> <TD><INPUT TYPE="TEXT" NAME="direccion" SIZE="40"></TD> </TR> <TR> <TD ALIGN="RIGHT">Poblacin:</TD> <TD><SELECT NAME="poblacion"> <OPTION VALUE="1">Alicante</OPTION>
160
Captulo 6. HTML
26 27 28 29 30 31 32 33 34 35 36 37 38 39
<OPTION VALUE="2">Castelln</OPTION> <OPTION VALUE="3">Valencia</OPTION> </SELECT></TD> </TR> <TR> <TD ALIGN="RIGHT">Sexo:</TD> <TD><INPUT TYPE="RADIO" NAME="sexo" VALUE="H"> Hombre <INPUT TYPE="RADIO" NAME="sexo" VALUE="M"> Mujer</TD> </TR> </TABLE> </FORM> </CENTER> </BODY> </HTML>
6.15. Marcos
Un marco (frame ) es una regin de una ventana que acta como si fuera una ventana ella misma. La ventana principal puede contener mltiples marcos, de forma que diferentes regiones de la ventana muestren diferentes contenidos. A su vez, un marco puede contener otros marcos y as sucesivamente. Normalmente, los marcos se emplean para dividir la ventana del navegador en dos partes: en una de ellas, la ms pequea, se muestra un ndice del sitio web (esta parte no vara); en la otra, la ms grande, su contenido se modica segn los enlaces que se pulsen en el ndice.
6.15. Marcos
161
Para denir los marcos se emplean las tres etiquetas siguientes: <FRAMESET> ... </FRAMESET>, <FRAME> y <NOFRAMES> ... </NOFRAMES>. La etiqueta <FRAMESET> ... </FRAMESET> dene un conjunto de marcos que van a aparecer en la ventana. Esta etiqueta contiene una o ms etiquetas <FRAME> que denen cada uno de los marcos. Los principales atributos de esta etiqueta son:
BORDER="anchura".
Anchura del borde de cada marco. Indica si el borde es en tres dimensiones o plano. Anchuras de cada uno de los marcos, sepa-
FRAMEBORDER="YES" | "NO".
COLS="listaAnchurasColumnas".
radas por comas. La anchura se puede indicar como nmero de pixels o como un porcentaje sobre el total disponible (en este caso, el nmero se tiene que acompaar del signo porcentaje). Por ejemplo, si se quiere dividir la ventana del navegador en dos columnas que ocupan el 30 y 70 por ciento:
Ejemplo 6.38
<FRAMESET COLS="30%,70%">
<FRAMESET ROWS="10%,80%,10%">
lumnas (COLS) en que se va a dividir la ventana. Los dos atributos no se pueden emplear simultneamente. Esta etiqueta se puede anidar, de forma que dentro de un
La etiqueta
<FRAMESET>
<FRAMESET>.
<FRAME> dene un marco, que es una regin de una ventana con conte-
nido propio y que se puede navegar de forma independiente. Cada marco tiene su pro-
NAME="nombreMarco". Nombre del marco. Este nombre se emplea en la etiqueta <A> ... </A> para mostrar una pgina en un marco concreto.
162
Captulo 6. HTML
<FRAMESET>
NORESIZE. Si aparece este atributo, no se puede modicar el tamao del marco. SCROLLING="YES" | "NO" | "AUTO".
Por ltimo, la etiqueta Indica si pueden aparecer barras de desplazamiento cuando no quepa toda la pgina en el marco.
contenido en los navegadores que no pueden mostrar marcos. Los navegadores que s que pueden mostrar marcos ignoran todo el contenido de esta etiqueta. Lo interesante de los marcos es que se puede variar el contenido de los mismos de forma independiente. Desde un marco se puede modicar el contenido de otro. Para ello, se tiene que emplear un enlace (<A> se habr indicado en la etiqueta (marcoIzq y
Este atributo debe de tomar el nombre del marco que se quiere modicar (el nombre En el siguiente ejemplo, la pgina
frame1a.html; frame1b.html y frame1c.html segn se seleccione en los enlaces que contiene marcoIzq. En la Figura 6.44 vemos el resultado
En el marco izquierdo se muestra la pgina en el marco derecho se muestran las pginas de mostrar estas pginas en un navegador y en la Figura 6.45 se puede observar como cambia el marco de la derecha al pulsar el ltimo enlace del marco de la izquierda. Pgina
marcoDer).
frame1.html:
Ejemplo 6.40
1 2 3 4 5 6 7 8 9 10 11 12
<HTML> <HEAD> <TITLE>Ejemplo de marcos</TITLE> </HEAD> <FRAMESET COLS="30%,70%" BORDER=10> <FRAME SRC="frame1a.html" NAME="marcoIzq"> <FRAME SRC="frame1b.html" NAME="marcoDer"> <NOFRAMES> Su navegador de Internet no permite mostrar marcos </NOFRAMES> </FRAMESET> </HTML>
Pgina
frame1a.html:
Ejemplo 6.41
1 2 3
6.15. Marcos
163
4 5 6 7 8 9 10 11 12 13 14
</HEAD> <BODY> Esta pgina tiene que aparecer a la izquierda. <BR><BR> Si pincha <A HREF="frame1b.html" TARGET="marcoDer">aqu</A>, a la derecha tiene que aparecer la pgina 1. <BR><BR> Si pincha <A HREF="frame1c.html" TARGET="marcoDer">aqu</A>, a la derecha tiene que aparecer la pgina 2. </BODY> </HTML>
Pgina
frame1b.html:
Ejemplo 6.42
1 2 3 4 5 6 7 8 9 10
<HTML> <HEAD> <TITLE>Ejemplo de marcos</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> Esta es la pgina <B>1</B>. <BR> El color de fondo es blanco. </BODY> </HTML>
Pgina
frame1c.html:
Ejemplo 6.43
1 2 3 4 5 6 7 8 9 10
<HTML> <HEAD> <TITLE>Ejemplo de marcos</TITLE> </HEAD> <BODY BGCOLOR="#BBBBFF"> Esta es la pgina <B>2</B>. <BR> El color de fondo es azul. </BODY> </HTML>
6.15.1.
En atributo
164
Captulo 6. HTML
6.15. Marcos
165
_blank.
6.15.2.
Cuando se pulsa un enlace, el navegador enva una peticin al servidor web solicitando la pgina que indica el enlace. Adems, el navegador muestra en la barra de direccin la
por razones estticas o de seguridad, a veces interesa que no cambie el contenido de la barra de direccin al pulsar sobre un enlace. Este efecto ocurre siempre que se trabaja con marcos. Pero, y si no queremos emplear marcos en nuestras pginas? Tal como muestra el siguiente ejemplo, podemos crear una pgina con dos marcos, donde uno de ellos tiene un tamao 0 y por tanto es invisible. A menos que el usuario consulte el cdigo de la pgina, no se dar cuenta de que la pgina est dividida en dos marcos.
Ejemplo 6.44
1 2 3 4 5 6
6.15.3.
el atributo
La etiqueta
<FORM> ... </FORM> empleada para crear formularios tambin posee TARGET="nombre", que permite indicar el nombre del marco o de la ventana
Captulo 7
Gua de estilo
En este captulo se presentan una serie de consejos que si se aplican se evitar cometer los errores ms comunes a la hora de crear un sitio web. Adems, tambin se incluyen una serie de consejos sobre accesibilidad, tanto de cara al usuario como de cara al navegador.
ndice General
. . . . . . . . . . . . . . . . . . . .
7.1.11. Permitir que los usuarios se comuniquen . . . . . . . . . . 7.1.12. Facilitar las bsquedas . . . . . . . . . . . . . . . . . . . . 7.1.13. Revisar las pginas peridicamente . . . . . . . . . . . . . 7.1.14. Los enlaces . . . . . . . . . . . . . . . . . . . . . . . . . .
173 174
167
168
Captulo 7.
Gua de estilo
7.1.1.
HTML,
es recomendable
hacerlo como si se estuviese programando. Es decir, organizar el cdigo para que sea ms fcil su lectura (sangra, separacin de fragmentos, etc.), poner comentarios, etc. Todo ello supone un trabajo extra, pero facilita el mantenimiento futuro de las pginas.
7.1.2.
Hay que llevar mucho cuidado con las combinaciones de colores que se emplean, ya que algunas cuestan mucho de leer. Si tenemos pginas con mucho texto, es conveniente usar una combinacin de colores de alto contraste, que facilite la lectura: un color oscuro sobre un fondo claro (negro o azul sobre blanco o un color crema) o al revs (un color claro para el texto sobre un fondo oscuro).
7.1.3.
Cada navegador emplea unos colores por defecto para el color de fondo de una pgina, para el color del texto, para los enlaces, etc. As, lo normal es que el color de fondo de una pgina sea el blanco, el color del texto el negro y el color de los enlaces el azul. Sin embargo, hay navegadores que no emplean estos colores. Por tanto, para evitar problemas, lo mejor es congurar los colores de una pgina siempre, aunque se empleen los colores que por defecto emplean la mayora de los navegadores. Muy importante: cuando se modique uno de los colores por defecto (por ejemplo, el color de fondo de una pgina) es muy recomendable modicar el resto de colores. Imaginemos que puede ocurrir si slo se cambia el color de fondo de una pgina a amarillo en un navegador en el que los colores por defecto del fondo de la pgina y del texto son azul oscuro y amarillo respectivamente: no se podr leer ningn texto.
7.1.
Gua de estilo
169
7.1.4.
El uso de distintos tipos de letra puede originar bastantes problemas. Se suele recomendar un tipo de letra o
Verdana)
sans-serif1
(como
correctamente debido a que la resolucin de la pantalla es limitada. Por otro lado, normalmente se elige un tipo de letra concreto para un sitio web, pero por descuido u olvido, en algunas pginas aparece texto escrito en otro tipo de letra (por ejemplo, el tipo de letra por defecto del navegador). El visitante suele apreciar estos errores inmediatamente y suele causar una sensacin de dejadez en la creacin de las pginas web. Por ltimo, hay que intentar elegir tipos de letra estndar. Si empleamos un tipo poco usual, seguramente la mayora de la gente no lo tendr instalado en sus ordenadores y las pginas no se visualizarn correctamente.
7.1.5.
... </FRAMESET>)
<FRAMESET>
res absolutos (nmero de pixels) o valores relativos (porcentaje respecto al tamao de la pgina o de la ventana). Puesto que distintos usuarios pueden tener distintos tamaos de ventana, es aconsejable usar siempre valores relativos. Si se emplean valores absolutos, cuando el usuario emplea una resolucin de pantalla distinta a la que hemos empleado en la creacin de la pgina, puede ser que para ver el contenido de la pgina haya que emplear la barra de desplazamiento (cuando la resolucin del usuario sea inferior a la nuestra), o que aparezcan grandes zonas en blanco o vacas (cuando la resolucin del usuario sea superior a la nuestra).
7.1.6.
Hay que intentar crear pginas web que quepan en una ventana, es decir, que no sea necesario emplear las barras de desplazamiento para ver todo el contenido de una pgina. Si el usuario tiene que emplear las barras de desplazamiento para leer una pgina acabar cansndose. Sobretodo, hay que evitar la aparicin de la barra de desplazamiento horizontal, ya que es la que ms diculta la lectura de una pgina web.
1 En
espaol este tipo de letra se conoce como sin gracias. Los serifs son pequeas lneas
decorativas en los extremos de los caracteres. Para textos impresos en papel los tipos de letra ayudan a jar la vista en la lnea que se est leyendo. Los tipos de letra
serif
facilitan la lectura, ya que varios experimentos han demostrado que los serifs de los caracteres
Times Roman.
serif
ms comunes son
170
Captulo 7.
Gua de estilo
7.1.7.
Las imgenes de fondo mal utilizadas pueden originar varios problemas. Por un lado, si tienen muchos colores y detalles pueden ocultar otros detalles de la pgina e impedir la lectura correcta del texto. Por otro lado, cuando la imagen tiene un tamao menor que la ventana del navegador, la imagen se muestra en forma de mosaico hasta cubrir toda la ventana del navegador. Si usamos una imagen con un tamao que cubre toda la ventana para una resolucin de pantalla dada, cuando se emplee una resolucin mayor la imagen se mostrar varias veces hasta cubrir toda la ventana y puede ser que se produzcan efectos indeseados si no hemos preparado la imagen para que se muestre en forma de mosaico.
7.1.8.
Las referencias cruzadas permiten abordar un mismo tema en distintos niveles de detalle. Se puede permitir al usuario pasar de largo informacin tcnica o conceptos avanzados de un tema, estableciendo enlaces a textos ms extensos por si desea ampliar informacin. En general, podemos disponer de una pgina corta, con una presentacin de la informacin escueta, que lleve a pginas que contengan detalles acerca de los temas tratados.
7.1.9.
Como se suele decir, una imagen vale ms que mil palabras. Pero hay que tener cuidado: el uso de muchas imgenes puede confundir al usuario. Adems, hay que tener en cuenta la velocidad de transferencia: las imgenes emplean muchos kilobytes, lo que aumenta el tiempo que tarda en cargarse una pgina. Por ello, hay que calcular el tiempo que tarda en cargarse una pgina segn diferentes velocidades de conexin y ponerse un lmite de unos 10 segundos como mximo. Por ejemplo, con un mdem de 56 Kbps (bits por segundo) en 10 segundos se pueden recibir unos 70 KB (bytes) y con una lnea Asymmetric Digital Subscriber Line (
Un truco muy importante: una vez cargada una imagen, el navegador la almacena en la cache; cuando volvamos a emplear esa misma imagen en otra pgina, no necesitar descargarla otra vez. Para que nuestras pginas se carguen ms rpidamente, es aconsejable combinar los mismos elementos grcos (iconos, lneas, imgenes de fondo, etc.) en todas nuestras pginas. Tambin hay que tener en cuenta que si una pgina es muy compleja, con muchas tablas e imgenes, segn la velocidad del ordenador el navegador puede tardar varios segundos en mostrar la pgina (incluso aunque haya recibido todos los datos que denen la pgina).
2 Todo
7.1.
Gua de estilo
171
7.1.10.
Identidad corporativa
Hay que intentar conseguir una identidad corporativa en todas las pginas: emplear los mismos tipos de letra, colores, imgenes de fondo, iconos, etc., para dotar a las pginas de un estilo homogneo. De esta forma, el usuario se sentir inmerso en las pginas.
7.1.11.
En todas las pginas (o por lo menos en la inicial y en la principal) hay que incluir una direccin de contacto para que los usuarios se puedan comunicar. De este modo, se podrn recibir sugerencias, indicaciones de cmo mejorar las pginas o errores localizados.
7.1.12.
Una adecuada clasicacin y exposicin de la informacin que contienen nuestras pginas facilitar la navegacin de los usuarios. En general, la pgina principal debera presentar un ndice de toda la informacin disponible en el sitio web. Otros mecanismos que facilitan la bsqueda de informacin y la navegacin son el buscador y el mapa del sitio web.
7.1.13.
No hay nada peor que encontrar enlaces rotos: enlaces que apuntan a pginas o recursos que no existen, porque se hayan borrado, cambiado de nombre, movido de sitio o porque falle la ruta de acceso. Una revisin peridica del sitio web puede ahorrar al usuario muchos problemas. Adems, es importante indicar la fecha de la ltima modicacin y las novedades aadidas. Esto permite, entre otras cosas, que el usuario se asegure de la seriedad del autor de las pginas y facilita la navegacin a los usuarios asiduos. Por otro lado, si una pgina aparece con un signo en construccin y su ltima revisin es del ao anterior, el usuario pensar que es mejor buscar lo que quiere en otra parte.
7.1.14.
Los enlaces
La eleccin del lugar apropiado para poner los enlaces es crucial para una correcta presentacin del hipertexto. Por ejemplo, comprense los dos siguientes trozos de cdigo
172
Captulo 7.
Gua de estilo
1 2
1 2 3
La Concejala de Turismo se encarga de gestionar el turismo rural y de playa ... (<A HREF="/concejalias/turismo">haga click aqu para ver ms informacin acerca de la Concejala de Turismo</A>).
En los primeros aos de la web haba que poner
haga click
porque la gente no
7.2. Accesibilidad
Aunque
compaas que crean los principales navegadores web emplean su propia versin del estndar. Esta se suele diferenciar en varios aspectos:
W3C.
Si se crea un sitio web para publicar en Internet, se tienen que evitar los diseos que limitan la consulta de las pginas web a determinados navegadores. Sobre este tema, Tim Berners-Lee se pronunci a mediados de 1996: Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.
Los que estampan 'Esta pgina se ve mejor (optimizada) para el navegador X' en una pgina web parecen aorar los viejos tiempos, antes de la Web, cuando se tenan muy pocas posibilidades de leer un documento escrito en otro ordenador, con otro procesador de textos, o en otra red.
Tim Berners-Lee en Technology Review, julio 1996 En el contexto de la creacin de pginas web, la accesibilidad mide la facilidad con la que se puede acceder, leer y entender el contenido de un sitio web. La accesibilidad tiene dos dimensiones: por un lado, cmo de accesible es un sitio web de cara al usuario que accede a l, y por otro lado, cmo de accesible es de cara al navegador que interpreta las pginas.
7.2.
Accesibilidad
173
7.2.1.
WWW
y director de
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
El poder de la Web reside en su universalidad. Que cualquiera pueda acceder independientemente de minusvalas es un hecho esencial.
Tim Berners-Lee,
http://www.w3.org/WAI/
especial a la que posea discapacidades sensoriales o neurolgicas. Por ello, el creado el Web Accessibility Initiative (
W3C ha WAI), cuyo objetivo es aumentar la usabilidad de la Web de cara a la gente con minusvalas. El WAI se estructura en tres grupos
Web Content Accessibility Guidelines Working Group : guas para la creacin de
sitios web.
Authoring Tool Accessibility Guidelines Working Group : guas para las herramientas de diseo web.
User Agent Accessibility Guidelines Working Group : guas para los navegadores.
Por ejemplo, Web Content Accessibility Guidelines 2.0 del 22 de agosto de 2002 contiene los siguientes consejos principales (cada consejo se divide en subconsejos y dentro de cada uno existen tres niveles de cumplimiento segn los consejos que se cumplan): 1. Perceptible. Asegura que todo el contenido se puede presentar de una forma (o formas) que pueda ser percibido por cualquier usuario, excepto aquellos aspectos del contenido que no se puedan expresar con palabras. 2. Operable. Garantiza que los elementos del interfaz pueden ser manejados por cualquier usuario. 3. 4. 5. Navegable. Facilita la navegacin. Entendible. Cuanto ms fcil sea de entender el contenido y los controles, mejor. Robusto. Emplea tecnologas web que sean lo ms compatible posible.
174
Captulo 7.
Gua de estilo
Existen diversas herramientas que ayudan a mejorar la accesibilidad de una pgina. Una de las ms famosas es Bobby , que verica tanto las guas establecidas por Unidos.
W3C
como una normativa referente a la accesibilidad creada por el gobierno de los Estados
7.2.2.
Como el lenguaje
HTML
tion ) es la clave para lograr que una pgina sea accesible por la mayor parte de los
navegadores. Cuando un navegador encuentra una etiqueta que no entiende , tiene lugar la degradacin. En este proceso, se puede perder parte del contenido de la pgina o se puede seguir mostrando todo el contenido pero con la prdida de algunas de las caractersticas establecidas por el autor de la pgina. Por ejemplo, un navegador que no acepte el atributo elegante.
BGCOLOR
aunque sin un color de fondo. En este ltimo caso es cuando hablamos de degradacin
index.jsp.
3 Existe
una
versin
de
demostracin
en
http://bobby.watchfire.com/bobby/html/en/-
4 Tambin
puede ser que el usuario haya desactivado alguna opcin, como puede ser la carga de
Captulo 8
Lenguajes de script
Los lenguajes de script permiten incluir programacin en las pginas web. En este captulo se explican las principales caractersticas y las tres formas que existen de incluir y ejecutar cdigo en una pgina web.
ndice General
Introduccin . . . . . . . . . . . . . . . . . . . . . . . . Diferencias entre VBScript y JavaScript . . . . . . . Para qu sirven . . . . . . . . . . . . . . . . . . . . . . . Como se usa un lenguaje de script en un navegador
. . . .
. . . .
8.1. Introduccin
Un lenguaje de script (o lenguaje de guiones) es similar a un lenguaje de macros o a un chero por lotes (batch ): una lista de comandos que se pueden ejecutar sin o con la participacin del usuario. Se trata en denitiva de un lenguaje de programacin, que suele emplearse dentro de un contexto (dentro de una aplicacin) y que no permite programar aplicaciones independientes (no permite crear cheros ejecutables independientes). Los lenguajes de script suelen ser interpretados, aunque algunos pueden poseer una fase de pseudocompilacin con el n de optimizar su ejecucin. Existen multitud de lenguajes de script que se pueden emplear en pginas web:
JavaScript , VBScript , Perl , Rexx ,
navegadores muy concretos y poco extendidos. Los lenguajes de script ms empleados en Internet son JavaScript y en menor medida VBScript . 175
176
Captulo 8.
Lenguajes de script
n: dotar de un lenguaje de script rpido y sencillo a las pginas web. Cada uno de estos lenguajes posee una serie de caractersticas que no posee el otro, pero ninguna de las diferencias existentes entre ambos permite descartar un lenguaje por el otro. Ambos poseen la misma potencia.
VBScript
lla de Microsoft. Como VBScript se dise especcamente para trabajar con navegadores, no incluye caractersticas que se escapan del mbito de los lenguajes de
ASP, etc.
y Java. Es conveniente aclarar desde un principio que JavaScript y Java son lenguajes totalmente distintos, desarrollados por distintas compaas (Netscape y Sun Microsystems respectivamente) y que, en principio, slo comparten parte de la sin-
taxis y del nombre y poco ms. Se puede emplear en la mayora de los navegadores (Microsoft Internet Explorer, Netscape Communicator y Opera), en el servidor web Netscape Enterprise Server y para programar con la tecnologa
ASP.
Aunque tanto VBScript como JavaScript nacieron con el objetivo de proporcionar capacidades de programacin en los clientes web, en la actualidad ambos tambin se pueden emplear en el servidor web. Entonces, qu lenguaje elegir? La principal razn para elegir uno u otro reside en la siguiente sencilla pregunta:
Mientras que los dos navegadores ms extendidos, Microsoft Internet Explorer y Netscape Communicator, admiten JavaScript , slo el primero admite VBScript . Por tanto, si elegimos este lenguaje de script, estaremos limitando el acceso a las pginas web que desarrollemos.
HTML
8.4.
177
Realizar procesamientos que no requieran la utilizacin de informacin centralizada (por ejemplo, convertir pesetas en euros, visualizar el calendario del mes actual, etc.). Servir de base para la utilizacin de otras tecnologas ( etc.). Los lenguajes de script tambin pueden actuar sobre el navegador a travs de objetos integrados que representan al documento, la ventana activa, cada uno de los controles de un formulario, etc. Para ello se emplea un modelo de objetos denominado
Los lenguajes de script presentan fuertes restricciones de acceso a los recursos de la mquina en la que se ejecutan. Estas restricciones no se deben a limitaciones tecnolgicas, sino a normas impuestas por los diseadores de los lenguajes de script para evitar que la ejecucin del cdigo de una pgina web pueda daar la integridad del sistema del usuario.
HTML:
BODY.
SRC.
LANGUAGE
HEAD
script. Si se omite este atributo, cada navegador tiene denido por defecto un
lenguaje . El siguiente ejemplo muestra como combinar mltiples lenguajes de
1 2 3 4
1 Por ejemplo, para el lenguaje JavaScript podemos usar los identicadores JavaScript, JavaScript1.1 , JavaScript1.2 y JavaScript1.3 . 2 Tanto como , si no se indica un lenguaje con la etiqueta LANGUAGE, suponen que se trata de JavaScript.
Netscape Communicator Microsoft Internet Explorer
3 No
es ms difcil y su ejecucin es ms lenta, ya que se tiene que activar un intrprete distinto para cada lenguaje.
178
Captulo 8.
Lenguajes de script
5 6 7 8 9 10
Mediante el atributo
SRC
pgina, aunque no es un sistema seguro, ya que cualquier usuario con unos conocimientos mnimos puede acceder al chero que contiene el cdigo. La ventaja principal de este sistema es que permite compartir el mismo cdigo entre distintas pginas web. De este modo, se pueden crear libreras de cdigo. 2. Usando los atributos de etiquetas serie de elementos (<FORM>, pertenecientes al lenguaje
HTML
HTML
<A>)
serie de atributos que representan eventos. Cuando estos eventos se producen (por ejemplo, al pulsar sobre un botn o al cargar una pgina), el cdigo correspondiente se ejecuta. Estas etiquetas poseen el atributo que en la etiqueta botones (<INPUT
LANGUAGE, que al igual SCRIPT, permite indicar en que lenguaje se ha escrito el cdimediante el atributo
go. El siguiente ejemplo muestra como gestionar los eventos de pulsacin sobre
TYPE="BUTTON">)
ONCLICK.
Ejemplo 8.2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<HTML> <HEAD> <SCRIPT LANGUAGE="VBScript"> Sub PulsadoVBS alert "Pulsado el botn VBScript" End Sub </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function PulsadoJS() { alert("Pulsado el botn JavaScript"); } </SCRIPT> </HEAD> <BODY> <FORM NAME="Formulario"> <INPUT TYPE="BUTTON" VALUE="VBScript" ONCLICK="PulsadoVBS" LANGUAGE="VBScript"> <BR> <INPUT TYPE="BUTTON" VALUE="JavaScript" ONCLICK="PulsadoJS()"
8.4.
179
21 22 23 24
3.
URL. Esto
permite que el script se ejecute cuando el usuario pulsa sobre un enlace. El siguiente ejemplo muestra una pgina con dos enlaces. Al pulsar sobre uno de ellos se abre una ventana nueva que muestra un mensaje. En la Figura 8.1 se muestra la ventana que se abre al ejecutar cdigo de JavaScript y en la Figura 8.2 se muestra el resultado de pulsar el enlace que ejecuta cdigo de VBScript .
Ejemplo 8.3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<HTML> <HEAD> <TITLE>Cdigo de JavaScript y VBScript en una misma pgina</TITLE> <SCRIPT LANGUAGE="VBScript"> Sub PulsadoVBS alert "Pulsado el enlace VBScript" End Sub </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function PulsadoJS() { alert("Pulsado el enlace JavaScript"); } </SCRIPT> </HEAD> <BODY> <A HREF="javascript:PulsadoJS()">JavaScript</A> <BR> <A HREF="javascript:PulsadoVBS()">VBScript</A> </BODY> </HTML>
camos el lenguaje que estamos empleando, y a continuacin gura el cdigo a ejecutar. Como vemos en el ejemplo, desde JavaScript se puede llamar a funciones escritas en VBScript y viceversa, pero como se ha comentado previamente, no se recomienda mezclar distintos lenguajes de script en una misma pgina.
180
Captulo 8.
Lenguajes de script
Captulo 9
JavaScript
En el captulo anterior hemos visto los lenguajes de script en general. En este captulo vamos a estudiar un lenguaje de script concreto: JavaScript. Este lenguaje es el ms empleado en Internet y se puede considerar el lenguaje estndar de programacin de clientes web. Veremos sus caractersticas bsicas, sus diferentes sentencias, las funciones que incorpora y, por ltimo, como validar formularios.
ndice General
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Palabras reservadas
182
Captulo 9. JavaScript
208 209
Funciones predenidas . . . . . . . . . . . . . . . . . . . .
9.6. Tratamiento de cadenas . . . . . . . . . . . . . . . . . . . . 216 9.7. Operaciones matemticas . . . . . . . . . . . . . . . . . . . 222 9.8. Validacin de formularios . . . . . . . . . . . . . . . . . . . 226
9.8.1. 9.8.2. 9.8.3. 9.8.4. Validacin campo nulo . . . . . . . . . . . . . . . . . . . . Validacin alfabtica . . . . . . . . . . . . . . . . . . . . . Validacin numrica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9.1. Introduccin
JavaScript
orientado a objetos puro) y multiplataforma, inventado por Netscape Communications Corporation. Los navegadores de Netscape fueron los primeros que usa-
ron JavaScript . El primer nombre ocial de este lenguaje fue LiveScript y apareci por primera vez en la versin beta de Netscape Navigator 2.0 en septiembre de 1995, pero poco despus fue rebautizado JavaScript en un comunicado conjunto con Sun
Microsystems el 4 de diciembre de 1995 .
String,
DOM.
objetos que son tiles cuando JavaScript se ejecuta en un servidor (lectura de cheros, acceso a bases de datos, etc.).
1 Netscape and Sun announce Javascript, the open, cross-platform object scripting language for
enterprise networks and the Internet , nota de prensa disponible en
newsref/pr/newsrelease67.html.
http://home.netscape.com/-
9.1.
Introduccin
183
JavaScript
en el paradigma cliente/servidor. La parte del cliente se ejecuta en un navegador, como Netscape Communicator o Microsoft Internet Explorer, mientras que la parte del servidor se ejecuta en un servidor, como Netscape Enterprise Server. Mediante la caracterstica JavaScript's LiveConnect , se pueden intercomunicar el cdigo JavaScript con Java. Desde JavaScript , se pueden instanciar objetos Java y acceder a sus propiedades y mtodos pblicos. A su vez, desde Java se puede acceder a los objetos de JavaScript , a sus propiedades y a sus mtodos.
9.1.1.
Aplicaciones
Una de las aplicaciones principales de JavaScript consiste en validar la entrada introducida por el usuario a travs de un formulario, que luego recibirn aplicaciones que se ejecutan en el servidor (hechas en La utilidad de esto reside en: Reduce la carga en el servidor. Los datos incorrectos se ltran en el cliente y no se envan al servidor. Reduce los retrasos producidos por errores cometidos por el usuario. De otro modo la validacin se tendra que realizar en el servidor, y los datos deberan viajar del cliente al servidor, ser procesados y entonces devueltos al cliente para que los corrigiese. Simplica los programas que se ejecutan en el servidor al dividir el trabajo entre el cliente y el servidor. Normalmente, la validacin de los datos se puede realizar como mnimo en tres ocasiones: Cuando el usuario introduce los datos, con un manejador del evento en cada control que se quiere validar del formulario. Cuando el usuario enva (submit ) el formulario, con un manejador del evento
onChange
onClick
onSubmit
en el formulario.
Otra de las aplicaciones de JavaScript consiste en proporcionar dinamismo a las pginas prendentes.
184
Captulo 9. JavaScript
9.1.2.
Para poder programar en JavaScript no hace falta ningn equipo especial ni comprar un entorno de desarrollo especco. Slo es necesario un editor de textos como Bloc de notas de Microsoft Windows o joe de Linux y un navegador como Netscape Communicator o Microsoft Internet Explorer que soporte JavaScript para poder comprobar el cdigo. No es necesario disponer de una conexin a Internet, ya que se puede comprobar localmente el cdigo creado. Lo que s que es recomendable es utilizar un buen editor de textos, que sea cmodo, congurable, soporte macros, etc. y que sea syntax highlight. Esta ltima caracterstica signica que el editor es capaz de comprender el lenguaje en el que se programa, y colorea las palabras diferencindolas segn sean variables, palabras reservadas, comentarios, etc.
9.1.3.
JavaScript y Java
y Java se confunden a veces entre s. Son dos lenguajes similares en
JavaScript
algunos aspectos, pero diferentes entre s. JavaScript no tiene la estricta comprobacin de tipos que posee Java, pero ambos si que comparten la sintaxis de las expresiones, de los operadores y de las estructuras de control.
JavaScript
pilacin (aunque no se genera cdigo mquina, sino los llamados bytecodes que luego son interpretados por la mquina virtual Java ). JavaScript tiene un pequeo nmero de tipos de datos: nmeros (enteros y en coma otante), booleanos y cadenas. JavaScript
posee un modelo de objetos basado en prototipos mientras que el de Java se es un lenguaje con mucha libertad si se compara con Java. No es
basa en clases.
JavaScript
necesario declarar las variables, clases y mtodos. No hay que preocuparse con mtodos pblicos, privados o protegidos, y no hay que implementar interfaces. En el Cuadro 9.1 se resumen las principales diferencias existentes entre JavaScript y Java.
9.1.4.
Versiones
Cada versin de los navegadores soporta una versin diferente de JavaScript . Cada nueva versin de JavaScript aade nuevas caractersticas al lenguaje (y corrige fallos de las anteriores). El Cuadro 9.2 muestra las distintas versiones de JavaScript soportadas por las diferentes versiones de Netscape Navigator. Las versiones anteriores a la 2.0 no soportaban JavaScript . Actualmente se encuentra en desarrollo JavaScript 2.0 . Si queremos detectar la versin de JavaScript que admite nuestro navegador podemos emplear el siguiente cdigo:
2 En http://www.mozilla.org/js/language/js20/
versin.
9.1.
Introduccin
185
JavaScript
Interpretado cliente. Basado en objetos. No distingue entre tipos de objetos. La herencia se realiza a travs del mecanismo de prototipado, y las propiedades y los mtodos se pueden aadir a cualquier objeto de forma dinmica. Cdigo integrado y embebido con el cdigo (no compilado) por el
Java
Compilado a bytecodes que se descargan desde el servidor y se ejecutan en el cliente. Basado en clases. Distincin entre clases e instancias, la herencia se realiza a travs de la jerarqua de clases. No se pueden aadir a las clases ni a las instancias propiedades o mtodos de forma dinmica. Los applets se distinguen del cdigo
HTML.
Versin de JavaScript
JavaScript 1.0 JavaScript 1.1 JavaScript 1.2 JavaScript 1.3 JavaScript 1.4 JavaScript 1.5 JavaScript 2.0
Versin de Navigator
Navigator 2.0 Navigator 3.0 Navigator 4.0 - 4.05 Navigator 4.06 - 4.78 Ningn navegador (slo en los productos de servidor de Netscape) Navigator 6.0 y Mozilla En desarrollo
186
Captulo 9. JavaScript
Ejemplo 9.1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
<HTML> <HEAD> <TITLE>Ejemplo version JavaScript</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> <!-var version = "JavaScript" // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.1"> <!-version = "JavaScript 1.1" // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2"> <!-version = "JavaScript 1.2" // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.3"> <!-version = "JavaScript 1.3" // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.4"> <!-version = "JavaScript 1.4" // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.5"> <!-version = "JavaScript 1.5" // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-document.write("Soporta " + version); // --> </SCRIPT> </BODY> </HTML>
LANGUAGE
de la
9.1.
Introduccin
187
etiqueta
Como las versiones aparecen de menor a mayor, cuando se llegue a una versin que no se admita, la variable mayor de todas las que se admiten.
En el ejemplo anterior se puede ver que las instrucciones de JavaScript aparecen entre comentarios de
9.1.5.
JavaScript y ECMA
Aunque Netscape invent JavaScript y sus navegadores fueron los primeros que lo soportaron, Netscape trabaja estrechamente con European Computer Manufacturers
Association (
JavaScript .
La versin estandarizada de JavaScript , llamada ECMAScript se debe de comportar de forma idntica en todas las aplicaciones que soportan el estndar. La primera versin de ECMAScript se detalla en la especicacin ECMA-262 Edition 1. Este estndar tambin ha sido aprobado por International Organization for Standards ( bajo la denominacin ISO-16262.
JavaScript
ISO)
ECMA. Pero estas caractersticas no impiden que JavaScript sea compatible con ECMA.
de
9.1.6.
JScript
JScript
de pginas
implementacin realizada por Microsoft del lenguaje de script estndar ECMA-262. En los navegadores de Microsoft, un aspecto importante a tener en cuenta es que la versin del lenguaje de script es independiente de la versin del navegador. Por ejemplo, se puede instalar el motor de JScript v5 en Microsoft Internet Explorer 3 y usar todas las caractersticas del lenguaje (por seguridad, no se puede hacer lo contrario, instalar JScript v1 en Microsoft Internet Explorer 5). En el Cuadro 9.4 se muestran las distintas versiones de JScript existentes.
9.1.7.
En las primeras versiones, JavaScript y JScript posean muchas diferencias entre ellos. Sin embargo, en las ltimas versiones las diferencias prcticamente han desaparecido, ya que ambos aseguran que cumplen el estndar ECMA-262. Pero an quedan pequeas diferencias que pueden hacer perder el tiempo al programador.
188
Captulo 9. JavaScript
Versin de JavaScript
JavaScript 1.1 JavaScript 1.2
Versin de ECMA
ECMA-262 Edition 1 se basa en JavaScript 1.1 ECMA-262 Edition 1 no se haba completado cuando apareci JavaScript 1.2 (la compatibilidad entre ambos no es total).
JavaScript 1.3
JavaScript 1.3 es completamente compatible con ECMA-262 Edition 1, pero posee caractersticas adicionales que no forman parte de ECMA-262 Edition 1.
JavaScript 1.4
JavaScript 1.4 es completamente compatible con ECMA-262 Edition 1, pero con caractersticas adicionales. Cuando apareci, an no se haba completado ECMA-262 Edition 3.
JavaScript 1.5
Versin de JScript
JScript v1 JScript v2 JScript v3 JScript v4 JScript v5
Productos de Microsoft
Internet Explorer 3 Internet Information Server 3.0 Internet Explorer 4 Visual Interdev 6.0 Windows 2000, Oce 2000, Internet Explorer 5 y 6
Cuadro 9.4: Relacin entre las versiones de JScript y los productos de Microsoft
9.2.
El lenguaje
189
Por ejemplo, el siguiente cdigo produce distintos resultados al ejecutarse en Netscape Communicator o Microsoft Internet Explorer. La diferencia se encuentra en que el primero convierte automticamente a entero el valor de la variable una cadena, mientras que el segundo navegador no lo hace.
Ejemplo 9.2
a,
que almacena
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
<HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> a = "1"; switch(a) { case 0: document.write("0"); break; case 1: document.write("1"); break; case 2: document.write("2"); break; default: document.write("Ninguno"); break;
1.
Ninguno.
9.2. El lenguaje
9.2.1. Caractersticas bsicas
3
La sintaxis de JavaScript es prcticamente idntica a la de C , C++ y Java . Si se conoce alguno de estos lenguajes, aprender JavaScript resulta muy sencillo y requiere
Java.
3A
190
Captulo 9. JavaScript
poco esfuerzo. Los comentarios, las funciones, las sentencias de control, etc., poseen la misma sintaxis que en C . JavaScript es un lenguaje basado en objetos, pero no orientado a objetos como Java y C++. El objetivo de JavaScript es conseguir cdigo sencillo y reducido, no crear programas grandes y complejos.
JavaScript
quiere decir que todas las palabras que usemos para referirnos a los distintos identicadores del lenguaje tendrn que ser escritas correctamente para que sean comprendidas por el intrprete de JavaScript . Por ejemplo, en el siguiente cdigo se declaran tres variables que son distintas:
Ejemplo 9.3
En JavaScript no es necesario acabar las sentencias con un punto y coma (s que es obligatorio en C ), excepto para separar cdigo que se encuentra en la misma lnea. Pero es una buena recomendacin acabar siempre las sentencias con punto y coma. Por ejemplo, las tres lneas siguientes de cdigo son correctas:
Ejemplo 9.4
1 2 3
}).
1 2 3 4 5
Los espacios en blanco, tabuladores y saltos de lnea no poseen valor en JavaScript , por lo que el cdigo anterior se podra escribir de otra forma, tal como se ve en el siguiente ejemplo, y sera totalmente equivalente. El aspecto visual del cdigo depende del estilo que cada uno quiera emplear.
Ejemplo 9.6
9.2.
El lenguaje
191
1 2 3
9.2.2.
Comentarios
Los comentarios son totalmente transparentes al cdigo, y no afectan al mismo ni en el modo de ejecutarse ni en la velocidad de ejecucin. Los comentarios se implementan de dos maneras diferentes.
JavaScript
La primera es utilizando dos barras inclinadas (//). Desde que el intrprete de encuentra las dos barras hasta que llega al nal de la lnea, todo el texto
que haya entremedias ser ignorado. barra inclinada y asterisco (/*) y viceversa (*/). Estos smbolos denen zonas de comentario que pueden extenderse a travs de varias lneas.
Ejemplo 9.7
1 2 3 4 5 6 7
// Esta linea esta comentada var a; // El comentario no afecta al codigo /* Todo este codigo esta comentado var b = 0; alert("Hola a todos"); */
9.2.3.
Declaracin de variables
Para denir variables en JavaScript usaremos la palabra reservada pero es una buena costumbre.
var.
Al con-
trario que en otros lenguajes, no es necesario declarar las variables que se emplean, No todas las palabras sirven para denir variables. Existen tres normas que hay que cumplir: Un nombre de variable vlido se compone nicamente de una palabra (sin espacios), pudiendo estar formada por letras, nmeros o el guin de subrayado (_). El primer carcter del nombre de la variable deber ser siempre una letra o el carcter de guin de subrayado. No podr ser un nmero. El nombre de la variable no debe coincidir con ninguna de las palabras reservadas.
192
Captulo 9. JavaScript
Al declarar una variable es posible asignarle un valor inicial. Si no se le asigna un valor inicial, posee un valor nulo representado por la palabra clave de variables sin valor puede producir errores.
Ejemplo 9.8
null.
El empleo
1 2 3 4 5 6 7 8 9
// Declaraciones correctas var _nombre, _apellido1, _apellido2; var Provincia = "Alicante"; var ciudad1, ciudad2; var codigo_postal = "03001"; // Declaraciones incorrectas var 12edad; var var;
JavaScript
de las variables para trabajar con ellas, porque l mismo se encarga de reconocer que es lo que se quiere almacenar. Los distintos tipos de datos que puede almacenar una variable en JavaScript son:
Cadenas. Las cadenas de texto se delimitan por comillas dobles (") o comillas
simples (') y pueden contener cualquier tipo de combinacin de nmeros, letras, espacios y smbolos. El uso de los dos tipos de comillas tiene su sentido, ya que debido a que JavaScript se usa conjuntamente con el lenguaje distinguir las cadenas de JavaScript de las cadenas de
HTML, y como
ste usa las comillas dobles en su sintaxis, tiene que haber algn mtodo de
HTML.
Por ejemplo:
Nmeros enteros.
Por ejemplo:
null.
Por
9.2.
El lenguaje
193
Ejemplo 9.9
1 2 3 4 5
9.2.4.
Ya se ha comentado antes que no es necesario declarar las variables antes de usarlas. Sin embargo, el hecho de declarar una variable s que inuye en el mbito de existencia (dnde existe y cunto tiempo existe una variable). Siempre que se declare una variable local a un mbito (a una funcin, por ejemplo), dominar sobre cualquier otra variable que se hubiese declarado fuera de ese mbito. Adems, una variable declarada en una funcin no puede ser accedida desde otra funcin. Por ejemplo, en el siguiente cdigo se declaran tres variables globales Aunque la variable
fun(),
var,
a, b c
c.
c.
fun2();
Ejemplo 9.10
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> var a = "Juan"; b = "Jose"; var c = "Ana"; function fun2() { document.write("fun2-c- " + c + "<BR>"); } function fun() { var c = "Maria"; document.write("fun1-a- " + a + "<BR>"); document.write("fun1-b- " + b + "<BR>"); fun2(); document.write("fun1-c- " + c + "<BR>");
194
Captulo 9. JavaScript
22 23 24 25 26 27 28
1 2 3 4 5
fun1-afun1-bfun2-cfun1-c-c- Ana
9.2.5.
Caracteres especiales
Adems de los caracteres normales, en una cadena tambin se pueden incluir caracteres especiales que permiten generar saltos de lneas o caracteres a partir de su cdigo dentro de una cadena. Por ejemplo, el siguiente cdigo produce el resultado que se muestra en la Figura 9.1.
Ejemplo 9.12
ASCII. El Cuadro 9.5 muestra los caracteres especiales que se pueden emplear
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<HTML> <HEAD> <TITLE>Ejemplo de caracteres especiales</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> document.write("Distintas formas de representar el carcter 'A':"); document.write("<BR>"); document.write("\\101 produce: \101<BR>"); document.write("\\x41 produce: \x41<BR>"); document.write("\\u0041 produce: \u0041<BR>"); document.write("<BR>"); document.write("Algunos caracteres interesantes:"); document.write("<BR>"); document.write("\\251 produce: \251<BR>"); document.write("\\252 produce: \252<BR>"); document.write("\\256 produce: \256<BR>");
9.2.
El lenguaje
195
Carcter
\b \f \n \r \t \' \" \\ \XXX \xXX \uXXXX
Signicado
Retroceso (backspace ) Salto de pgina (form feed ) Salto de lnea (new line ) Retorno de carro (carriage return ) Tabulador Apstrofe o comilla simple Comilla doble Barra invertida (backslash ) El carcter de la codicacin Latin-1 especicado por los tres dgitos octales entre 0 y 377. El carcter de la codicacin Latin-1 especicado por los dos dgitos hexadecimales entre 00 y FF. El carcter Unicode especicado por los cuatro dgitos hexadecimales entre 0000 y FFFF.
18 19 20 21 22 23
document.write("\\274 produce: \274<BR>"); document.write("\\275 produce: \275<BR>"); document.write("\\276 produce: \276<BR>"); </SCRIPT> </BODY> </HTML>
9.2.6.
Operadores
Los operadores son los signos que se usan para referirse a distintas operaciones que se pueden realizar con las variables y con las constantes, tales como suma, resta, incremento, etc. La precedencia de los operadores determina el orden en que se aplican cuando se evala una expresin. Se puede anular la precedencia usando parntesis. El Cuadro 9.6 muestra la precedencia de los operadores, de menos a ms. Los operadores que se encuentran en un mismo nivel poseen la misma precedencia.
196
Captulo 9. JavaScript
Tipo de operador
Coma Asignacin Condicional O lgico (OR) Y lgico (AND) O bit a bit (OR) O exclusiva bit a bit (XOR) Y bit a bit (AND) Igualdad Relacional Desplazamiento bit a bit Suma y resta Multiplicacin y divisin Negacin e incremento Llamada a funcin Creacin de instancias Miembro
Operadores
, = += -= *= /= %= <<= >>= >>>= &= ^= |= ?: || && | ^ & == != === !== < <= > >= << >> >>> + * / % ! ~ - + ++ -- typeof void delete () new . []
9.3.
Sentencias
197
9.2.7.
Palabras reservadas
Las palabras reservadas (reserved words ) no se pueden usar como nombres de variables, funciones, mtodos u objetos. Algunas de las palabras reservadas son palabras clave (keywords ) de JavaScript , mientras que otras se han reservado para futuros usos. En el Cuadro 9.7 se muestran las palabras reservadas de JavaScript 1.3. abstract case const delete enum nal function import interface null public super throw try volatile boolean catch continue do export nally goto in long package return switch throws typeof while break char debugger double extends oat if instanceof native private short synchronized transient var with byte class default else false for implements int new protected static this true void
9.3. Sentencias
Vamos a detallar las sentencias que incluye el lenguaje JavaScript . Todas estas sentencias son anidables: se pueden incluir unas dentro de otras tantas veces como se quiera.
9.3.1.
Condicionales
... else
switch.
if
if . . . else
La sentencia de seleccin simple posee la siguiente sintaxis (la parte entre corchetes es opcional):
198
Captulo 9. JavaScript
Ejemplo 9.13
1 2 3 4 5 6 7 8
sen2.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var a; a = prompt("Escriba un nmero, por favor", ""); if(a <= 1) { alert("Es menor o igual que 1"); } else if(a <= 5) { alert("Es mayor que 1, pero menor o igual que 5"); } else { alert("Es mayor que 1"); } </SCRIPT> <TITLE>Ejemplo if</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML>
switch
La sentencia de seleccin mltiple posee la siguiente sintaxis:
9.3.
Sentencias
199
Ejemplo 9.15
1 2 3 4 5 6 7 8 9 10 11 12
switch(expresion) { case et1 : sen1; [break;] case et2 : sen2; [break;] ... [default : sen;] }
La sentencia
que case con el resultado de la evaluacin. Si se logra casar, se ejecutan las sentencias
default y se ejecutan sus sentencias asociadas. La sentencia break opcional en cada etiqueta asegura que el programa salga del switch una vez que se han ejecutado las sentencias correspondientes a una opcin case y contina la ejecucin por la lnea siguiente a la sentencia switch. Si no se incluye un break, el ujo de ejecucin pasar de una opcin case a otra hasta que encuentre un break o nalice la sentencia switch.
opcional Como ejemplo tenemos el siguiente cdigo:
Ejemplo 9.16
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var a; a = prompt("Cuntos hijos tiene?", ""); switch(a) { case 0: alert("Anmese un da de estos"); break; case 1: alert("Puede tener ms"); break; case 2: alert("Ya tiene la parejita, ahora a por el tro"); break; default: alert("Una familia como las de antes: muchos hijos"); break; } </SCRIPT>
200
Captulo 9. JavaScript
19 20 21 22 23
9.3.2.
De repeticin
Un bucle es un conjunto de comandos que se ejecutan repetidamente hasta que una condicin especicada deja de cumplirse. JavaScript ofrece tres tipos de sentencias de repeticin:
while.
for
La sintaxis de la repeticin con contador es la siguiente:
Ejemplo 9.17
1 2 3 4
for
expInicial,
se ejecuta. La expresin
2. 3.
condicion.
condicion es cierto (true), las sentencias del bucle se ejecutan. condicion es falso (false), el bucle termina. expIncremento
se ejecuta y el ujo de ejecucin
4.
Como ejemplo tenemos el siguiente cdigo con un bucle que se repite 10 veces. En la Figura 9.2 se muestra esta pgina en un navegador.
Ejemplo 9.18
1 2 3 4
9.3.
Sentencias
201
5 6 7 8 9 10 11 12 13 14 15
<BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> var a; for(a = 1; a <= 10; a++) { document.write("Vamos por el nmero " + a + "<BR>\n"); } </SCRIPT> </BODY> </HTML>
do . . . while
La sentencia de repeticin con condicin nal posee la siguiente sintaxis:
Ejemplo 9.19
1 2 3 4
do { sentencias } while(condicion)
Las
sentencias se ejecutan siempre al menos una vez antes de que condicion se sentencias se ejecutan una vez condicion se vuelve a evaluar.
202
Captulo 9. JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<HTML> <HEAD> <TITLE>Ejemplo do while</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <PRE> <SCRIPT LANGUAGE="JavaScript"> var a, b; a = 1; do { b = a; do { document.write(" "); b--; } while(b > 0); document.write(a + "<BR>\n"); a++; } while(a < 10); </SCRIPT> </PRE> </BODY> </HTML>
while
La sintaxis de la sentencia de repeticin con condicin inicial es la siguiente:
Ejemplo 9.21
1 2 3 4
while(condicion) { sentencias }
Si
condicion
es falsa, las
sentencias
condicion
ocurre
9.3.
Sentencias
203
sentencias.
sentencias
Como ejemplo tenemos el siguiente cdigo, que crea las tablas de multiplicar del 1 al 10. En la Figura 9.3 se muestra esta pgina en un navegador.
Ejemplo 9.22
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<HTML> <HEAD> <TITLE>Ejemplo while</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <PRE> <SCRIPT LANGUAGE="JavaScript"> var a, b; a = 1; while(a <= 10) { document.write("Tabla del " + a + "\n"); document.write("------------\n"); b = 1; while(b <= 10) { document.write(a + " x " + b + " = " + (a * b) + "\n"); b++; } document.write("\n"); a++; } </SCRIPT> </PRE> </BODY> </HTML>
break
La sintaxis de esta sentencia es:
Ejemplo 9.23
1 2 3
204
Captulo 9. JavaScript
9.3.
Sentencias
205
La sentencia
break
do..while, while)
o una
continue
La sintaxis de esta sentencia es:
Ejemplo 9.24
1 2 3
La sentencia continue se usa para pasar a la siguiente iteracin en un bucle (for, do ... while, while).
9.3.3.
De manipulacin de objetos
for(... in ...)
with.
for(. . . in . . . )
La sintaxis de esta sentencia es:
Ejemplo 9.25
1 2 3 4
objeto. window
1 2 3 4 5
variable
sentencias.
Para acceder a
Como ejemplo tenemos el siguiente cdigo que muestra las propiedades del objeto
206
Captulo 9. JavaScript
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
var resultado = ""; for (var i in obj) { resultado += obj_nombre + "." + i + " = " + obj[i] + "<BR>" } return resultado; } </SCRIPT> <TITLE>Ejemplo for_in</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <PRE> <SCRIPT LANGUAGE="JavaScript"> document.write(Propiedades(window, "window")); </SCRIPT> </PRE> </BODY> </HTML>
with
La sintaxis de esta sentencia es:
Ejemplo 9.27
1 2 3 4
with(objeto) { sentencias }
La sentencia
conjunto de
with establece el objeto por defecto sobre el sentencias que pueden acceder a las propiedades o
De este modo, se evita tener que escribir el nombre del objeto cada vez. Como ejemplo tenemos el siguiente cdigo:
Ejemplo 9.28
1 2 3 4 5 6
9.3.
Sentencias
207
208
Captulo 9. JavaScript
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<SCRIPT LANGUAGE="JavaScript"> with(Math) { document.write("E: " + E + "\n"); document.write("LN10: " + LN10 + "\n"); document.write("LN2: " + LN2 + "\n"); document.write("LOG10E: " + LOG10E + "\n"); document.write("LOG2E: " + LOG2E + "\n"); document.write("Pi: " + PI + "\n"); document.write("SQRT1_2: " + SQRT1_2 + "\n"); document.write("SQRT2: " + SQRT2 + "\n"); } </SCRIPT> </PRE> </BODY> </HTML>
9.4. Funciones
Una funcin es un fragmento de cdigo al que se suministran unos datos determinados (parmetros o argumentos), ejecuta un conjunto de sentencias y puede devolver un resultado.
9.4.1.
function.
El nombre de la funcin. Una lista de argumentos, encerrados entre parntesis y separados por comas. Una funcin puede tener cero o ms argumentos. Las sentencias que denen la funcin, encerradas entre llaves. Las sentencias dentro de una funcin pueden llamar a su vez a otras funciones o a la misma funcin (recursividad). Por tanto, la sintaxis de una funcin es:
Ejemplo 9.29
1 2 3 4
9.4.
Funciones
209
</HEAD>
<HEAD> ...
primero que se carga. De otro modo, el usuario podra realizar alguna accin (por ejemplo, lanzar un evento) que llamase a una funcin que no ha sido denida an, lo que producira un error. Por ejemplo, el siguiente cdigo dene dos funciones llamadas tivamente:
Ejemplo 9.30
cuadrado
cubo
que calculan el cuadrado y el cubo del nmero que reciben como argumento respec-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<HTML> <HEAD> <TITLE>Ejemplo function</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <PRE> <SCRIPT LANGUAGE="JavaScript"> var a; function cuadrado(numero) { return numero * numero; } function cubo(numero) { return numero * numero * numero; } a = prompt("Escribe un nmero entero:", ""); alert("El cuadrado de " + a + " es " + cuadrado(a)); a = prompt("Escribe un nmero entero:", ""); alert("El cubo de " + a + " es " + cubo(a)); </SCRIPT> </PRE> </BODY> </HTML>
La instruccin
9.4.2.
Funciones predenidas
posee un conjunto de funciones predenidas: y
JavaScript
210
Captulo 9. JavaScript
eval
Evala una expresin que contiene cdigo de JavaScript . La sintaxis es donde
expr
eval(expr),
Si la cadena representa una expresin, se evala; si representa una o ms sentencias, se ejecutan. No hace falta llamar a
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13
<HTML> <HEAD> <TITLE>Ejemplo eval</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> var a = 1, b = 2, c = 3, d = 4, e = 5, v; v = prompt("Escriba una letra de la 'a' a la 'e'", ""); alert("El valor de '" + v + "' es " + eval(v)); </SCRIPT> </BODY> </HTML>
isFinite
isFinite(num) num es el numero que se quiere evaluar. Si el argumento es "NaN" (not a number, no un nmero), devuelve false, en caso contrario devuelve true. Por ejemplo, el siguiente cdigo permite ltrar la entrada
donde del usuario y averiguar si ha introducido un nmero correcto o cualquier otra cosa:
Ejemplo 9.32
Determina
si
el
argumento
representa
un
nmero
nito.
La
sintaxis
es
1 2 3 4 5 6 7 8 9 10 11 12
<HTML> <HEAD> <TITLE>Ejemplo isFinite</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> v = prompt("Escriba un nmero", ""); if(isFinite(v)) alert("Correcto, es un nmero"); else alert("Te has equivocado"); </SCRIPT>
9.4.
Funciones
211
13 14
</BODY> </HTML>
isNaN
isNaN(num) "NaN" (not a number, no un nmero). La sintaxis es num es el numero que se quiere evaluar. Las funciones parseFloat y parseInt devuelven "NaN" cuando evaluan un valor que no es un nmero. La funcin isNaN devuelve true si el argumento es "NaN" y false
Determina si el argumento es donde en caso contrario.
parseInt y parseFloat
Las dos funciones de conversin mrico a partir de una cadena. La sintaxis de
parseInt
parseFloat
donde
parseFloat
es
parseFloat(cad),
cad
quiere convertir a un nmero en coma otante. Si encuentra un carcter distinto de un signo (+ o -), un dgito (0-9), un punto decimal o un exponente, devuelve el valor hallado hasta ese punto e ignora ese carcter y el resto. Si el primer carcter no puede convertirse a un nmero, devuelve La sintaxis de
parseInt
es
la cadena
que se quiere convertir a la base indicada en el segundo argumento opcional. Por ejemplo, 10 indica que se convierta a decimal, 8 a octal, 16 a hexadecimal. Para bases mayores que diez, las letras del alfabeto indican numerales mayores que nueve. Por ejemplo, para los nmeros hexadecimales (base 16), las letras de la A a la F se usan. Si encuentra un carcter que no es un numeral vlido en la base especicada, ese carcter y todos los caracteres que le siguen se ignoran y devuelve el valor convertido hasta ese punto. Si el primer carcter no puede convertirse a un nmero en la base especicada, devuelve
"NaN"
Number y String
Las funciones donde respectivamente. La sintaxis de estas funciones es un objeto
objRef es una referencia a un objeto. Por ejemplo, el siguiente cdigo convierte Date a un nmero y a una cadena:
Ejemplo 9.33
1 2 3 4 5
212
Captulo 9. JavaScript
6 7 8 9 10 11 12 13 14 15 16 17
<SCRIPT LANGUAGE="JavaScript"> // Obtiene la fecha actual var d = new Date(); // Milisegundos transcurridos desde el 1 de enero de 1970 alert("Milisegundos transcurridos: " + Number(d)); // Formato mas adecuado alert("Fecha: " + String(d)); </SCRIPT> </BODY> </HTML>
escape y unescape
escape y unescape permiten codicar y decodicar cadenas. La funescape devuelve la codicacin hexadecimal de su argumento codicado en ISO Latin-1. La funcin unescape devuelve la cadena correspondiente a la codicacin hexadecimal pasada como argumento. La sintaxis de estas funciones es escape(string) y unescape(string). Por ejemplo, el siguiente cdigo genera una pgina con un formulario con dos botones. Un botn aplica la funcin escape a la cadena que introduce el usuario y el otro aplica la funcin unescape.
Las funciones cin
Ejemplo 9.34
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<HTML> <HEAD> <TITLE>Funcin predefinida escape()</TITLE> <SCRIPT LANGUAGE="JavaScript"> function hazEscape() { var cadena; cadena = prompt("Escriba una cadena", ""); alert(escape(cadena));
function hazUnescape() { var cadena; cadena = prompt("Escriba una cadena", ""); alert(unescape(cadena));
9.5.
Objetos
213
22 23 24 25 26 27 28
<FORM NAME="formulario"> <INPUT TYPE="BUTTON" VALUE="escape" ONCLICK="hazEscape()"> <INPUT TYPE="BUTTON" VALUE="unescape" ONCLICK="hazUnescape()"> </FORM> </CENTER> </BODY> </HTML>
9.5. Objetos
JavaScript
orientado a objetos, ya que no posee caractersticas bsicas como la herencia simple o mltiple, la jerarqua de clases, el polimorsmo, la ocultacin de datos (visibilidad), etc. En JavaScript un objeto es un constructor con propiedades (que pueden ser variables u otros objetos) y mtodos (funciones asociadas a objetos). En la Seccin 9.3.3 se vieron las sentencias
status
y al mtodo
alert
del objeto
window:
Ejemplo 9.35
1 2
Tambin se puede acceder a las propiedades y mtodos de un objeto mediante la notacin de arrays asociativos . Se puede acceder al objeto como si fuera un array. Cada ndice de acceso es una cadena que representa una propiedad o un mtodo. El cdigo del ejemplo anterior se expresa mediante arrays asociativos de la siguiente forma:
Ejemplo 9.36
1 2
9.5.1.
Creacin de objetos
Existen dos formas de crear un objeto nuevo: inicializadores de objetos y funciones constructoras.
214
Captulo 9. JavaScript
Inicializadores de objetos
La sintaxis de este mtodo es:
Ejemplo 9.37
donde
propiedad y Por
nombreObjeto es el nombre del nuevo objeto, propI es el nombre de una valI el valor asociado a la propiedad. En JavaScript, un objeto puede
el siguiente
asignatura.
ejemplo,
El objeto
profesor
cdigo
dene
dos
objetos
asignatura.
llamados
profesor
1 2 3 4 5 6 7 8 9
profesor = {nombre:"Sergio", apellidos:"Lujn Mora"}; asignatura = {cod:"PI", cred:6, prof:profesor}; document.write("Cdigo: " + asignatura.cod); document.write("<BR>"); document.write("Crditos: " + asignatura["cred"]); document.write("<BR>"); document.write("Profesor: " + asignatura.prof.nombre + " " + asignatura.prof.apellidos); document.write("<BR>");
Funciones constructoras
En este sistema se emplea una funcin que realiza el papel de constructor. Cuando se crea el objeto, se emplea el operador objetos. La sintaxis de este mtodo es:
Ejemplo 9.39
new
Este mtodo es mejor que el anterior, ya que permite crear un tipo para distintos
1 2 3 4 5 6 7 8 9
function ObjConstructor(arg1, arg2, ..., argN) { this.prop1 = arg1; this.prop2 = arg2; ... this.propN = argN; } objeto = new ObjConstructor(val1, val2, ..., valN);
9.5.
Objetos
215
En la funcin constructora se indican las propiedades y mtodos del objeto. Una caracterstica especial de JavaScript es que en cualquier momento se pueden aadir nuevas propiedades o mtodos a un objeto concreto (no se aaden a todos los objetos del mismo tipo). Dentro de la funcin constructora se emplea la palabra reservada
this
tipo
Pagina.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
function Persona(nombre, apellidos) { this.nombre = nombre; this.apellidos = apellidos; } function Pagina(autor, url, fecha) { this.autor = autor; this.url = url; this.fecha = fecha; } slm = new Persona("Sergio", "Lujn Mora"); p1 = new Pagina(slm, "index.html", "18/04/2001"); p2 = new Pagina(slm, "home.html", "23/03/2001"); document.write(p1.url + ": " + p1.fecha); document.write("<BR>"); document.write(p2.url + ": " + p2.fecha);
9.5.2.
Mtodos de un objeto
Para denir un mtodo de un objeto, simplemente hay que asignar a una propiedad del objeto el nombre de una funcin. En la funcin, si se quiere acceder a las propiedades del objeto, se tiene que emplear la palabra reservada Por ejemplo, el siguiente cdigo crea dos objetos de tipo poseen un mtodo llamado
ver
1 2 3 4 5
function ver() { document.write("CPU: " + this.cpu + "<BR>"); document.write("Velocidad: " + this.vel + " MHz<BR>"); document.write("Memoria: " + this.mem + " Mb<BR>");
216
Captulo 9. JavaScript
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
function Ordenador(cpu, vel, mem, dd) { this.cpu = cpu; this.vel = vel; this.mem = mem; this.dd = dd; this.ver = ver; } o1 = new Ordenador("Pentium", 200, 32, 3); o2 = new Ordenador("Pentium II", 500, 128, 15); o1.ver(); o2.ver();
9.5.3.
Eliminacin de objetos
true
false
delete.
en caso contrario.
String:
No se debe confundir una cadena literal con un objeto siguiente cdigo crea la cadena literal
s1
y el objeto de tipo
ejemplo, el
Ejemplo 9.42
1 2 3 4 5
// crea una cadena literal s1 = "algo" // crea un objeto String s2 = new String("algo")
Todo los mtodos del objeto
9.6.
Tratamiento de cadenas
217
temporal, ejecuta el mtodo sobre ese objeto y naliza eliminando el objeto temporal. Tambin se puede emplear la propiedad
String.length
String
String: split.
charAt(indice)
Devuelve el carcter especicado por
1 2 3 4 5
var cadena = "Hola"; document.writeln("Carcter en 0 es " + cadena.charAt(0) + "<BR>"); document.writeln("Carcter en 1 es " + cadena.charAt(1) + "<BR>"); document.writeln("Carcter en 2 es " + cadena.charAt(2) + "<BR>");
El ejemplo anterior produce la siguiente salida:
Ejemplo 9.44
1 2 3
1 2 3 4 5 6 7
= = = = =
"Hola"; " a"; " todo"; " el mundo"; cad1.concat(cad2, cad3, cad4);
document.writeln(cad5);
El cdigo anterior produce el siguiente resultado:
Ejemplo 9.46
218
Captulo 9. JavaScript
1 2 3 4 5 6 7
= = = = =
"Hola"; " a"; " todo"; " el mundo"; cad1 + cad2 + cad3 + cad4;
document.writeln(cad5);
fromCharCode(num1 [, num2, . . . ])
Devuelve una cadena formada por los caracteres representados mediante valores Unicode que recibe la funcin. Por ejemplo, el siguiente cdigo crea una tabla con los 256 caracteres Figura 9.5.
Ejemplo 9.48
ASCII
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
<HTML> <HEAD> <TITLE>Tabla de caracteres ASCII</TITLE> </HEAD> <BODY> <TABLE BORDER="1"> <SCRIPT LANGUAGE="JavaScript"> for(i = 0; i < 16; i++) { document.writeln("<TR>"); for(j = 0; j < 16; j++) { document.write("<TD>"); document.write((i * 16 + j) + ": " + String.fromCharCode(i * 16 + j)); document.write("</TD>"); } document.writeln("</TR>"); } </SCRIPT> </TABLE> </BODY> </HTML>
9.6.
Tratamiento de cadenas
219
220
Captulo 9. JavaScript
indexOf(valorBuscado [, inicio])
Devuelve la primera posicin de principio de la cadena (o de
valorBuscado dentro de la cadena a partir del inicio que es opcional) o -1 si no se encuentra. Ejemplo:
Ejemplo 9.49
1 2 3 4 5 6 7 8 9 10 11
var cuenta = 0; var pos; var cad = "Cadena con unas letras" pos = cad.indexOf("a"); while(pos != -1) { cuenta++; pos = cad.indexOf("a", pos + 1); } document.write("La cadena contiene " + cuenta + " aes");
El ejemplo anterior produce la siguiente salida:
Ejemplo 9.50
lastIndexOf(valorBuscado [, inicio])
Similar a la funcin
indexOf,
inicio
1 2 3 4 5 6 7
var pos; var cad = "Cadena con unas letras" pos = cad.lastIndexOf("a"); document.write("La ltima a est en " + pos + "<BR>"); pos = cad.lastIndexOf("a", pos - 1); document.write("La penltima a est en " + pos + "<BR>");
1 2
9.6.
Tratamiento de cadenas
221
replace(exRegular, nuevaCadena)
Busca una expresin regular (exRegular) en una cadena y cada vez que se encuentra se sustituye por el modicador
i. Ejemplo:
1 2 3 4 5 6
var cad = "Juan es hermano de Juan Luis"; var aux; aux = cad.replace(/Juan/gi, "Jose"); document.write(cad + "<BR>"); document.write(aux + "<BR>");
1 2
slice(inicio [, n])
Extrae un trozo de una cadena desde
inicio
hasta
fin - 1.
Si no se indica
fin,
1 2 3 4 5 6 7
var cad = "Juan es hermano de Juan Luis"; var aux; aux = cad.slice(8); document.write(aux + "<BR>"); aux = cad.slice(8, 15); document.write(aux + "<BR>");
1 2
222
Captulo 9. JavaScript
split(separador [, limite])
Divide una cadena en funcin del cena en un array. El valor de pueden hacer. Ejemplo:
Ejemplo 9.57
1 2 3 4 5 6
var cad = "Juan es hermano de Juan Luis"; var aux, i; aux = cad.split(" "); for(i = 0; i < aux.length; i++) document.write("Posicion " + i + ": " + aux[i] + "<BR>");
El ejemplo anterior genera el siguiente resultado:
Ejemplo 9.58
1 2 3 4 5 6
0: 1: 2: 3: 4: 5:
que permiten trabajar con constantes y funciones matemticas. Todos los mtodos y usarlos. En el Cuadro 9.8 se muestran las principales propiedades del objeto
Math para Math. Los principales mtodos del objeto Math son: abs, acos, asin, atan, ceil, cos, sin, tan, exp, floor, log, max, min, pow, random, round y sqrt.
propiedades son estticos, por lo que no hace falta crear un objeto de tipo
abs(num)
Devuelve el valor absoluto de un nmero.
Ejemplo 9.59
1 2 3 4
9.7.
Operaciones matemticas
223
Propiedad
Descripcin
Constante de Euler, la base de los logaritmos naturales (neperianos). Aproximadamente 2.718 El logaritmo natural de 10. Aproximadamente 2.302 El logaritmo natural de 2. Aproximadamente 0.693 El logaritmo decimal (base 10) de E. Aproximadamente 0.434 El logaritmo en base 2 de E. Aproximadamente 1.442 Razn de la circunferencia de un crculo a su dimetro. Aproximadamente 3.141 Raz cuadrada de 1 / 2. Aproximadamente 0.707 Raz cuadrada de 2. Aproximadamente 1.414
1 2 3 4
3.5 2 .5 4
ceil(num)
Devuelve el entero menor mayor o igual que un nmero. Ejemplo:
Ejemplo 9.61
1 2 3
document.write("ceil(2): " + Math.ceil(2) + "<BR>"); document.write("ceil(2.0): " + Math.ceil(2.0) + "<BR>"); document.write("ceil(2.05): " + Math.ceil(2.05) + "<BR>");
El cdigo anterior genera la siguiente salida:
Ejemplo 9.62
1 2 3
224
Captulo 9. JavaScript
exp(num)
Devuelve E elevado a un nmero.
oor(num)
Devuelve el mayor entero menor o igual que un nmero. Ejemplo:
Ejemplo 9.63
1 2 3 4
document.write("floor(2): " + Math.floor(2) + "<BR>"); document.write("floor(2.0): " + Math.floor(2.0) + "<BR>"); document.write("floor(2.05): " + Math.floor(2.05) + "<BR>"); document.write("floor(2.99): " + Math.floor(2.99) + "<BR>");
Este ejemplo muestra el siguiente resultado:
Ejemplo 9.64
1 2 3 4
log(num)
Devuelve el logaritmo natural (en base E) de un nmero.
1 2
document.write("max(3, 5): " + Math.max(3, 5) + "<BR>"); document.write("min(3, 5): " + Math.min(3, 5) + "<BR>");
El cdigo anterior genera la siguiente salida:
Ejemplo 9.66
1 2
9.7.
Operaciones matemticas
225
pow(base, exponente)
Devuelve la base elevada al exponente. Ejemplo:
Ejemplo 9.67
1 2 3
document.write("pow(2, 3): " + Math.pow(2, 3) + "<BR>"); document.write("pow(3, 4): " + Math.pow(3, 4) + "<BR>"); document.write("pow(5, 0): " + Math.pow(5, 0) + "<BR>");
1 2 3
random()
Produce un nmero pseudoaleatorio entre 0 y 1. Ejemplo:
Ejemplo 9.69
1 2
1 2
round(num)
Devuelve el entero ms cercano a un nmero. Si la parte decimal es menor que 0.5, lo redondea al entero mayor menor o igual que el nmero; si la parte decimal es igual o mayor que 0.5, lo redondea al entero menor mayor o igual que el nmero. Ejemplo:
Ejemplo 9.71
1 2 3
document.write("round(3.49): " + Math.round(3.49) + "<BR>"); document.write("round(3.5): " + Math.round(3.5) + "<BR>"); document.write("round(3.51): " + Math.round(3.51) + "<BR>");
226
Captulo 9. JavaScript
1 2 3
sqrt(num)
Devuelve la raz cuadrada de un nmero.
CGI
o una pgina
ASP
que
realice la misma funcin en el servidor, poder llevar a cabo este proceso en el cliente, ahorra tiempo de espera a los usuarios, disminuye el nmero de conexiones al servidor y limita la carga del servidor. Antes de estudiar la validacin de formularios, conviene leer el Captulo 10, ya que en l se explica una pgina web. Mediante
DOM, una representacin de los distintos elementos que componen DOM se accede a los formularios y sus controles.
A continuacin se muestran cuatro casos tpicos de validacin de formularios: validacin campo nulo, validacin alfabtica, validacin numrica y validacin de una fecha.
9.8.1.
Muchas veces interesa comprobar si se ha introducido informacin en un campo: que no se deje en blanco algn dato. En el siguiente ejemplo, la funcin determina si en un campo se ha introducido informacin, teniendo en cuenta que se considera informacin todo lo que sea distinto de vaco, espacios en blanco o tabula-
compruebaVacio
1 2 3 4 5 6 7
<HTML> <HEAD> <TITLE>Validacin de un campo vaco</TITLE> <SCRIPT LANGUAGE="JavaScript"> error = new creaError(); errores = new Array(); errores[0] = "Campo vaco";
9.8.
Validacin de formularios
227
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
errores[1] = "Campo slo contiene blancos o tabuladores"; function creaError() { this.valor = 0; return this; } function compruebaVacio(contenido, error) { if(contenido.length == 0) { error.valor = 0; error.posicion = 0; return true; } for(var i = 0; i < contenido.length; i++) if(contenido.charAt(i) != ' ' && contenido.charAt(i) != '\t') return false; error.valor = 1; return true;
function valida() { if(compruebaVacio(document.formulario.campo.value, error)) alert("El campo no es correcto: " + errores[error.valor]); else
228
Captulo 9. JavaScript
38 39 40 41 42 43 44 45 46 47 48 49 50
alert("El campo es correcto: Campo no vaco"); } </SCRIPT> </HEAD> <BODY> <FORM NAME="formulario"> <B><CENTER>Validacin de un campo vaco</CENTER></B> <BR> Campo: <INPUT TYPE="TEXT" NAME="campo"> <INPUT TYPE="BUTTON" VALUE="Valida" ONCLICK="valida()"> </FORM> </BODY> </HTML>
9.8.2.
Validacin alfabtica
Un tipo elemental de informacin que aparece en muchos formularios es el tipo alfabtico compuesto por los caracteres alfabticos del idioma en particular con el que se trabaje. En el siguiente ejemplo, las funciones y
compruebaAlfaMay
compruebaAlfa, compruebaAlfaMin
culas y una palabra en maysculas, incluyendo la posibilidad de que existan letras acentuadas o con diresis. En la Figura 9.7 vemos el aspecto de la pgina visualizada en un navegador.
Ejemplo 9.74
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<HTML> <HEAD> <TITLE>Validacin alfabtica de un campo</TITLE> <SCRIPT LANGUAGE="JavaScript"> mayusculas = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; minusculas = "abcdefghijklmnopqrstuvwxyz"; error = new creaError(); errores = new Array(); errores[1] = "Falta carcter alfabtico"; errores[2] = "Falta carcter alfabtico en minsculas"; errores[3] = "Falta carcter alfabtico en maysculas"; function creaError() { this.valor = 0; this.posicion = 0; return this; }
9.8.
Validacin de formularios
229
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
function esMinuscula(c) { return minusculas.indexOf(c) >= 0; } function esMayuscula(c) { return mayusculas.indexOf(c) >= 0; } function esLetra(c) { return esMinuscula(c) || esMayuscula(c); } function compruebaAlfa(contenido, error) { for(var i = 0; i < contenido.length; i++) if(!esLetra(contenido.charAt(i))) { error.valor = 1; error.posicion = i + 1; return false; } } return true;
function compruebaAlfaMin(contenido, error) { for(var i = 0; i < contenido.length; i++) if(!esMinuscula(contenido.charAt(i))) { error.valor = 2; error.posicion = i + 1; return false; } } return true;
230
Captulo 9. JavaScript
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
function valida(valor) { var correcto; var contenido = document.formulario.campo.value; switch(valor) { case 1: correcto = compruebaAlfa(contenido, error); break; case 2: correcto = compruebaAlfaMin(contenido, error); break; case 3: correcto = compruebaAlfaMay(contenido, error); break; default: break;
} </SCRIPT> <BODY> <FORM NAME="formulario"> <B><CENTER>Validacin alfabtica de un campo</CENTER></B> <BR> Campo: <INPUT TYPE="TEXT" NAME="campo"> <INPUT TYPE="BUTTON" VALUE="Palabra" ONCLICK="valida(1)">
if(correcto) alert("El campo es vlido"); else alert("El campo no es vlido: " + errores[error.valor] + " en la posicin " + error.posicion);
9.8.
Validacin de formularios
231
<INPUT TYPE="BUTTON" VALUE="Minsculas" ONCLICK="valida(2)"> <INPUT TYPE="BUTTON" VALUE="Maysculas" ONCLICK="valida(3)"> </FORM> </BODY> </HTML>
9.8.3.
Validacin numrica
Se pueden distinguir tres tipos de formatos numricos bsicos: Nmero natural: formado por los caracteres numricos. Nmero entero: formado por un signo inicial opcional (+, -), seguido de un nmero natural. Nmero real: formado por un signo inicial opcional (+, -), seguido de caracteres numricos y, opcionalmente, seguido del separador decimal y otra serie de caracteres numricos. En el siguiente ejemplo, las funciones
compruebaReal
compruebaNatural, compruebaEntero
un nmero real
visualizada en un navegador.
Ejemplo 9.75
1 2
<HTML> <HEAD>
5 Se
permite el punto y la coma como separadores decimales.
232
Captulo 9. JavaScript
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
<TITLE>Validacin numrica de un campo</TITLE> <SCRIPT LANGUAGE="JavaScript"> numeros = "0123456789"; puntoDecimal = ".,"; signos = "+-"; error = new creaError(); errores = new Array(); errores[1] = "Campo vaco no contiene ningn valor"; errores[2] = "Carcter ilegal en un nmero"; errores[3] = "Carcter ilegal"; errores[4] = "Slo ha insertado un signo"; errores[5] = "Parte decimal vaca"; function creaError() { this.valor = 0; this.posicion = 0; return this; } function numero(c) { return numeros.indexOf(c) >= 0; } function signo(c) { return signos.indexOf(c) >= 0; } function compruebaNatural(contenido, error) { if(contenido.length == 0) { error.valor = 1; error.posicion = 1; return false; } for(var i = 0; i < contenido.length; i++) if(!numero(contenido.charAt(i))) { error.valor = 2; error.posicion = i + 1; return false;
9.8.
Validacin de formularios
233
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
} } return true;
function signoCorrecto(contenido, error) { if(contenido.length == 0) { error.valor = 1; error.posicion = 1; return false; } if(!numero(contenido.charAt(0)) && !signo(contenido.charAt(0))) { error.valor = 3; error.posicion = 1; return false; } } return true;
function compruebaEntero(contenido, error) { if(!signoCorrecto(contenido, error)) return false; if(numero(contenido.charAt(0))) var aux = compruebaNatural(contenido, error); else { var aux = compruebaNatural(contenido.substring(1, contenido.length), error); if(!aux) error.posicion++; if(error.valor == 1) { error.valor = 4; error.posicion = 1; } } return aux;
234
Captulo 9. JavaScript
95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
} function compruebaReal(contenido, error) { var aux = compruebaEntero(contenido, error); var posicion = error.posicion - 1; if(!aux && error.valor == 2 & puntoDecimal.indexOf(contenido.charAt(posicion)) >= 0) { var aux = compruebaNatural(contenido.substring( error.posicion, contenido.length), error); if(!aux && error.valor == 1) { error.valor = 5; } if(!aux) error.posicion += posicion + 1; } } return aux;
function valida(valor) { var correcto; var contenido = document.formulario.campo.value; switch(valor) { case 1: correcto = compruebaNatural(contenido, error); break; case 2: correcto = compruebaEntero(contenido, error); break; case 3: correcto = compruebaReal(contenido, error); break; default: break;
9.8.
Validacin de formularios
235
141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
} </SCRIPT> <BODY> <FORM NAME="formulario"> <B><CENTER>Validacin numrica de un campo</CENTER></B> <BR> Campo: <INPUT TYPE="TEXT" NAME="campo"> <INPUT TYPE="BUTTON" VALUE="Natural" ONCLICK="valida(1)"> <INPUT TYPE="BUTTON" VALUE="Entero" ONCLICK="valida(2)"> <INPUT TYPE="BUTTON" VALUE="Real" ONCLICK="valida(3)"> </FORM> </BODY> </HTML>
if(correcto) alert("El campo es vlido"); else alert("El campo no es vlido: " + errores[error.valor] + " en la posicin " + error.posicion);
9.8.4.
La validacin de una fecha es una de las ms complejas, debido a la diversidad de formatos que existen, tanto entre distintos pases como en un mismo pas. Adems hay que tener en cuenta una serie de consideraciones (nmero de das de cada mes, aos bisiestos, etc.) que complican la validacin. En el siguiente ejemplo, se valida una fecha de acuerdo al formato estndar dd/mm/aaaa, donde dd son los dgitos (1 o 2) que representan el da, mm son los
236
Captulo 9. JavaScript
dgitos que representan el mes (1 o 2) y aaaa son los dgitos que representan el ao (de 1 a 4). En la Figura 9.9 se puede ver como se muestra la pgina en un navegador. La funcin
anterior. La primera parte de la funcin comprueba que la fecha introducida concuerde con el formato deseado; para ello, extrae de la fecha el da, el mes y el ao. La segunda parte de la funcin comprueba que la fecha introducida sea una fecha real; para ello, en vez de realizar complejos clculos, se emplea el objeto
Date
de JavaScript :
Se crea una nueva fecha a partir del da, el mes y el ao introducidos. Se comparan el da, el mes y el ao de la nueva fecha con los valores de la fecha introducida. Si todos los valores coinciden, signica que la fecha introducida es correcta. Por ejemplo, si se introduce la convierte en
Date
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
29/02/2002, como es una fecha que no existe, el objeto 01/03/2002, por lo que se detecta que es una fecha incorrecta.
Ejemplo 9.76
<HTML> <HEAD> <TITLE>Validacin de una fecha</TITLE> <SCRIPT LANGUAGE="JavaScript"> function compruebaFecha(fecha) { // Comprueba el formato de la fecha // Dia i1 = fecha.indexOf("/"); if(i1 == -1) { alert("Formato de fecha incorrecto"); return; } dia = fecha.substring(0, i1); // Mes i2 = fecha.indexOf("/", i1 + 1) if(i2 == -1) { alert("Formato de fecha incorrecto"); return; } mes = fecha.substring(i1 + 1, i2) // Anyo anyo = fecha.substring(i2 + 1, fecha.length);
9.8.
Validacin de formularios
237
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
// Comprueba formato de dia, mes y anyo if(isNaN(dia) || isNaN(mes) || isNaN(anyo)) { alert("Formato de fecha incorrecto"); return; } if(dia == "" || mes == "" || anyo == "") { alert("Formato de fecha incorrecto"); return; } // Comprueba que la fecha sea real // Crea una nueva fecha // Los meses empiezan desde 0 f = new Date(anyo, mes - 1, dia); if(parseInt(dia, 10) != f.getDate() || parseInt(mes, 10) != (f.getMonth() + 1) || parseInt(anyo, 10) != f.getFullYear()) { alert("Formato de fecha incorrecto"); return; }
} </SCRIPT> <BODY> <FORM NAME="formulario"> <B><CENTER>Validacin de una fecha</CENTER></B> <BR> Fecha: <INPUT TYPE="TEXT" NAME="fecha" MAXLENGTH="10"> <INPUT TYPE="BUTTON" VALUE="Valida" ONCLICK="compruebaFecha(fecha.value)"> </FORM> </BODY> </HTML>
238
Captulo 9. JavaScript
Captulo 10
ndice General
10.2.4. Objeto location . . . . . . . . . . . . . . . . . . . . . . . . 10.2.5. Objeto navigator . . . . . . . . . . . . . . . . . . . . . . . 10.2.6. Objeto screen . . . . . . . . . . . . . . . . . . . . . . . . . 10.2.7. Objeto window . . . . . . . . . . . . . . . . . . . . . . . .
10.1. Introduccin
El Modelo de Objetos de Documento
de script : se piensa que forma parte de ellos, cuando en realidad son independientes 239
240
Captulo 10.
HTML de un documento
desde los lenguajes de script. Para lograrlo, se crean una serie de objetos que representan (exponen) dichos elementos. Estos objetos guardan entre ellos unas relaciones de parentesco (se establece una jerarqua) que reeja la estructura lgica de una pgina
HTML:
etc.
a su vez puede tener una serie de formularios, que pueden contener elementos como botones, cuadros de texto, etc., los cuales tienen a su vez una serie de propiedades, Un problema que presenta el modelo de objetos es que se suele modicar de una versin de navegador a otra, aadindose nuevos objetos y modicndose la jerarqua existente entre ellos. Adems, al igual que ocurre con los lenguajes de script, cada navegador posee su propio modelo de objetos, que coinciden entre ellos en algunos objetos, propiedades y mtodos. Existe un intento de estandarizacin por parte de objetos de documento.
W3C
del modelo de
el documento
HTML que se est mostrando. Estos objetos poseen una jerarqua que HTML. En la Figura 10.1 vemos los principales ob-
jetos de la jerarqua del modelo de objetos en Netscape Communicator 4.0 y superiores (en versiones superiores puede ser que se vea ampliado). En esta jerarqua, los descendiente de un objeto se consideran propiedades de dicho objeto, aunque por s mismos tambin son objetos. Por ejemplo, un formulario llamado como
form1 es un objeto y tambin una propiedad del objeto document y se accede document.form1. Como todos los objetos cuelgan del objeto window, ste se pude obviar y no escribir 1 cuando se accede a un objeto de la ventana actual . As, window.navigator.appName y navigator.appName representan la misma propiedad y las sentencias window.document.writeln() y document.writeln() llaman al mismo mtodo.
Cualquier pgina posee los siguientes objetos:
document: history:
1 Cuando
mento, como su ttulo, su color de fondo, sus enlaces y formularios. contiene una serie de propiedades que representan las URLs que el
241
242
Captulo 10.
location:
URL actual.
navigator:
vegador que se est usando, propiedades para los tipos Multipurpose Internet
Mail Extensions (
MIME)
instalados en el cliente.
window:
a la ventana completa. Cada ventana hija en un documento dividido en marcos (frames ) posee su propio objeto
window.
Dependiendo del contenido de la pgina, el documento puede poseer otra serie de objetos. Por ejemplo, un formulario (denido mediante la etiqueta
</FORM>)
objetos.
form
<FORM> ...
en la jerarqua de
10.2.1.
Objeto document
Posee informacin sobre el documento actual y posee mtodos que permiten mostrar una salida en formato etiqueta
Propiedades alinkColor Atributo ALINK de la etiqueta BODY. anchors applets bgColor classes HTML. cookie domain embeds fgColor
Array que contiene una entrada para cada ancla del documento.
Atributo
BGCOLOR
de la etiqueta
BODY.
Crea un objeto Style que se usa para especicar el estilo de las etiquetas
Array que contiene una entrada por cada plug-in del documento.
Atributo
TEXT
de la etiqueta
BODY.
243
HTML.
images
Array que contiene una entrada para cada imagen del documento.
lastModied layers
linkColor links
Atributo
LINK
de la etiqueta
BODY.
Especica la
Crea un objeto Style que permite especicar los estilos de las etiquetas
Contenido de la etiqueta
TITLE
de la seccin
HEAD.
VLINK
de la etiqueta
BODY.
Mtodos captureEvents
pecicado.
Establece que el documento capture todos los eventos del tipo es-
close
244
Captulo 10.
write
writeln.
salto de lnea.
Eventos onClick
Se produce cuando un objeto de un formulario o un enlace es pulsado con el botn del ratn.
onMouseDown onMouseUp
245
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<HTML> <HEAD> <TITLE>Ejemplo de uso del objeto document</TITLE> </HEAD> <BODY> <A HREF="pag1.html">Enlace a la pagina 5</A> <BR> <A HREF="pag2.html">Enlace a la pagina 2</A> <BR> <A HREF="pag3.html">Enlace a la pagina 3</A> <BR><BR> <SCRIPT LANGUAGE="JavaScript"> document.write("Hay " + document.links.length + " enlaces<BR>\n"); for(i = 0; i < document.links.length; i++) { document.write(document.links[i]); document.write("<BR>\n"); } </SCRIPT> </BODY> </HTML>
El siguiente ejemplo muestra el valor de los atributos BGCOLOR, TEXT, LINK, ALINK VLINK. Adems, tambin aparece la fecha de la ltima modicacin (lastModified).
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<HTML> <HEAD> <TITLE>Ejemplo de uso del objeto document</TITLE> </HEAD> <BODY BGCOLOR="WHITE" TEXT="BLACK" LINK="NAVY" ALINK="BLUE" VLINK="RED"> <SCRIPT LANGUAGE="JavaScript"> document.write("BGCOLOR = " + document.bgColor + "<BR>\n"); document.write("TEXT = " + document.fgColor + "<BR>\n"); document.write("LINK = " + document.linkColor + "<BR>\n"); document.write("ALINK = " + document.alinkColor + "<BR>\n"); document.write("VLINK = " + document.vlinkColor + "<BR>\n"); document.write("<BR>\n"); document.write("lastModified = " + document.lastModified + "<BR>\n");
246
Captulo 10.
15 16 17
En el ejemplo anterior, la fecha de la ltima modicacin (lastModied) se muestra con formato un formato ingls. El siguiente ejemplo muestra como transformar cualquier fecha a un formato espaol. En la Figura 10.3 vemos como se muestra esta pgina en un navegador.
Ejemplo 10.3
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function nombreDia(dia) { var d; switch(dia) { case 0: d = "Domingo"; break; case 1: d = "Lunes";
247
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
} }
break; case 2: d = "Martes"; break; case 3: d = "Mircoles"; break; case 4: d = "Jueves"; break; case 5: d = "Viernes"; break; case 6: d = "Sbado"; break;
return d;
function nombreMes(mes) { var m; switch(mes) { case 0: m = "Enero"; break; case 1: m = "Febrero"; break; case 2: m = "Marzo"; break; case 3: m = "bril"; break; case 4: m = "Mayo"; break; case 5: m = "Junio"; break; case 6:
248
Captulo 10.
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
} }
return m;
function formatoFecha(fecha) { return nombreDia(fecha.getDay()) + " " + fecha.getDate() + " de " + nombreMes(fecha.getMonth()) + " de " + fecha.getFullYear();
</SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var ultima = document.lastModified; var fecha = new Date(ultima); document.write("ltima fecha de modificacin: " + ultima); document.write("<BR><BR>"); document.write("ltima fecha de modificacin: " + formatoFecha(fecha)); </SCRIPT> </BODY> </HTML>
10.2.2.
Un documento (document) puede poseer varios formularios, cada uno con sus correspondientes controles. Para acceder a los controles de un formulario se tiene que recorrer la jerarqua que se puede ver en la Figura 10.1: objeto
document, nombre del formulario3 , nombre del control y propiedad del control.
2 Recordemos que se puede obviar. 3 Tambin se puede acceder a travs
mulario. de
window2 ,
objeto
forms,
249
1 2 3
value)
nombre
document.miForm.nombre.value
Hay que prestar mucha atencin a las maysculas y minsculas, ya que como se
explic en el Captulo 9, JavaScript es un lenguaje sensible a minsculas/maysculas. Cada uno de los controles de un formulario tiene una serie de propiedades, mtodos y eventos. Todos los controles poseen el mtodo el objeto y usados.
blur()
Campos de vericacin
Los campos de vericacin poseen las siguiente propiedades:
250
Captulo 10.
checked
do.
defaultChecked value
Por ejemplo, el siguiente cdigo muestra en una ventana el estado de los campos de vericacin de un formulario (si estn o no estn activados). Adems, cuando un campo est activado, muestra tambin el valor asociado al campo de vericacin. En la Figura 10.4 se puede observar como se visualiza esta pgina en un navegador.
Ejemplo 10.6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
<HTML> <HEAD> <TITLE>Ejemplo de uso del objeto document</TITLE> <SCRIPT LANGUAGE="JavaScript"> function valida() { var df = document.miForm; if(df.ingles.checked) alert("Ingls: S" + "\n" + "Valor: " + df.ingles.value); else alert("Ingls: NO"); if(df.aleman.checked) alert("Alemn: S" + "\n" + "Valor: " + df.aleman.value); else alert("Alemn: NO"); if(df.frances.checked) alert("Francs: S" + "\n" + "Valor: " + df.frances.value); else alert("Francs: NO");
} </SCRIPT> </HEAD> <BODY> <FORM NAME="miForm"> Idiomas: <BR><BR> Ingls <INPUT TYPE="CHECKBOX" NAME="ingles" VALUE="ing" CHECKED> Alemn <INPUT TYPE="CHECKBOX" NAME="aleman" VALUE="ale">
251
33 34 35 36 37 38
Francs <INPUT TYPE="CHECKBOX" NAME="frances" VALUE="fra"> <BR><BR> <INPUT TYPE="BUTTON" VALUE="Comprobar" ONCLICK="valida()"> </FORM> </BODY> </HTML>
Campos excluyentes
Posee las mismas propiedades que los campos de vericacin:
checked
do.
defaultChecked value
se enva.
Por ejemplo, el siguiente cdigo muestra en una ventana el valor del campo excluyente seleccionado. En la Figura 10.5 se puede observar como se visualiza esta pgina en un navegador.
252
Captulo 10.
Ejemplo 10.7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
<HTML> <HEAD> <TITLE>Ejemplo de uso del objeto document</TITLE> <SCRIPT LANGUAGE="JavaScript"> function valida() { var df = document.miForm; for(var i = 0; i < df.contrato.length; i++) { if(df.contrato[i].checked) alert("Valor seleccionado: " + df.contrato[i].value); }
} </SCRIPT> </HEAD> <BODY> <FORM NAME="miForm"> Tipo de contrato: <BR><BR> Alquiler <INPUT TYPE="RADIO" NAME="contrato" VALUE="1" CHECKED> Prueba <INPUT TYPE="RADIO" NAME="contrato" VALUE="2"> Venta <INPUT TYPE="RADIO" NAME="contrato" VALUE="3"> <BR><BR> <INPUT TYPE="BUTTON" VALUE="Comprobar" ONCLICK="valida()"> </FORM> </BODY> </HTML>
defaultValue value
enva.
Al nal del Captulo 9, cuando se explica la validacin de formularios, se pueden ver varios ejemplos donde se hace uso de la propiedad
value.
253
Listas de seleccin
Las listas de seleccin poseen las siguientes propiedades:
length options
lista.
option)
de la
selectedIndex
Adems, si se quiere obtener el texto y el valor asociado a una opcin, se tienen que emplear las propiedades del objeto
option:
est seleccionada. El siguiente ejemplo muestra como acceder a una lista de seleccin normal y a una lista de seleccin mltiple. En la Figura 10.6 se puede observar como se visualiza esta pgina en un navegador.
254
Captulo 10.
Ejemplo 10.8
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
<HTML> <HEAD> <TITLE>Ejemplo de uso del objeto document</TITLE> <SCRIPT LANGUAGE="JavaScript"> function valida() { var df = document.miForm; var sel, i; // Para un campo sin seleccin mltiple sel = df.provincias.selectedIndex; alert("Nmero de opciones: " + df.length + "\n" + "Seleccionado: " + sel + "\n" + "Texto: " + df.provincias.options[sel].text + "\n" + "Valor: " + df.provincias.options[sel].value); // Para un campo con seleccin mltiple for(i = 0; i < df.paises.length; i++) { if(df.paises.options[i].selected) alert("Seleccionado: " + i + "\n" + "Texto: " + df.paises.options[i].text + "\n" + "Valor: " + df.paises.options[i].value); }
} </SCRIPT> </HEAD> <BODY> <FORM NAME="miForm"> Provincias: <BR><BR> <SELECT NAME="provincias"> <OPTION VALUE="Alc">Alicante</OPTION> <OPTION VALUE="Cas">Castelln</OPTION> <OPTION VALUE="Val">Valencia</OPTION> </SELECT> <BR><BR> Pases: <BR><BR> <SELECT NAME="paises" MULTIPLE> <OPTION VALUE="1">Espaa</OPTION>
255
46 47 48 49 50 51 52 53
<OPTION VALUE="2">Francia</OPTION> <OPTION VALUE="3">Portugal</OPTION> </SELECT> <BR><BR> <INPUT TYPE="BUTTON" VALUE="Comprobar" ONCLICK="valida()"> </FORM> </BODY> </HTML>
10.2.3.
Objeto history
Contiene un array que almacena las URLs que el usuario ha visitado en la ventana actual. Mediante los mtodos que posee este objeto se puede navegar hacia adelante o hacia atrs en el historial.
256
Captulo 10.
next
Especica la
Especica la
Carga la
forward go
Carga la siguiente
Carga la
10.2.4.
Objeto location
URL
location
de un objeto
window.
window.
protocol://host:port/pathname#hash?search
URL. URL.
hostname href
Especica la parte
host:port
de la
URL.
Especica la
pathname port
Especica la ruta de la
protocol
Especica el protocolo de la
URL.
257
search
URL.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<HTML> <HEAD> <TILLE>Ejemplo de uso del objeto location</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> document.writeln("location.hash = " + location.hash + "<BR>"); document.writeln("location.host = " + location.host + "<BR>"); document.writeln("location.hostname = " + location.hostname + "<BR>"); document.writeln("location.href = " + location.href + "<BR>"); document.writeln("location.pathname = " + location.pathname + "<BR>"); document.writeln("location.port = " + location.port + "<BR>"); document.writeln("location.protocol = " + location.protocol + "<BR>"); document.writeln("location.search = " + location.search + "<BR>"); </SCRIPT> </BODY> </HTML>
10.2.5.
Objeto navigator
Contiene informacin sobre la versin del navegador que se est empleando. Todas las propiedades de este objeto son de solo lectura.
258
Captulo 10.
appVersion language
Especica la cabecera
HTTP user-agent.
plugins.refresh preference
259
savePreferences taintEnabled
prefs.js
(chero de
navigator.
En la
Figura 10.8 se puede ver como se muestra esta pgina en Netscape Communicator 4.78 y en la Figura 10.9 se visualiza la misma pgina en Microsoft Internet Explorer 6.0.
Ejemplo 10.11
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<HTML> <HEAD> <TITLE>Ejemplo de uso del objeto navigator</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> document.writeln("navigator.appCodeName = " + navigator.appCodeName); document.writeln("<BR>"); document.writeln("navigator.appName = " + navigator.appName); document.writeln("<BR>"); document.writeln("navigator.appVersion = " + navigator.appVersion); document.writeln("<BR>"); document.writeln("navigator.language = " + navigator.language); document.writeln("<BR>"); document.writeln("navigator.mimeTypes = " + navigator.mimeTypes); document.writeln("<BR>"); document.writeln("navigator.platform = " + navigator.platform); document.writeln("<BR>"); document.writeln("navigator.plugins = " + navigator.plugins); document.writeln("<BR>"); document.writeln("navigator.userAgent = " + navigator.userAgent); document.writeln("<BR>"); </SCRIPT> </BODY> </HTML>
10.2.6.
Objeto screen
Este objeto contiene una serie de propiedades que describen las caractersticas fsicas de la pantalla: resolucin y colores.
260
Captulo 10.
261
Propiedades availHeight
ma operativo para mostrar elementos permanentes o semipermanentes, como la barra de tareas en Microsoft Windows.
availLeft availTop
Coordenada x del primer pixel que no est reservado por el sistema ope-
Coordenada y del primer pixel que no est reservado por el sistema ope-
screen.pixelDepth.
Altura de la pantalla.
pixelDepth width
Anchura de la pantalla.
screen.
En la Figu-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<HTML> <HEAD> <TITLE>Ejemplo de uso del objeto screen</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> document.write("availHeight: " + screen.availHeight + "<BR>"); document.write("availLeft: " + screen.availLeft + "<BR>"); document.write("availTop: " + screen.availTop + "<BR>"); document.write("availWidth: " + screen.availWidth + "<BR>"); document.write("colorDepth: " + screen.colorDepth + "<BR>"); document.write("height: " + screen.height + "<BR>"); document.write("pixelDepth: " + screen.pixelDepth + "<BR>"); document.write("width: " + screen.width + "<BR>"); </SCRIPT>
262
Captulo 10.
16 17
</BODY> </HTML>
10.2.7.
Objeto window
Representa una ventana o, cuando la ventana est dividida en marcos, un marco concreto del navegador. Es el objeto en la posicin superior en la jerarqua de objetos, por encima de todos los dems. Se crea un objeto
... </BODY>
window
<BODY> window
defaultStatus document
HTML al usuario.
263
frames history
ventana.
Array que permite acceder a los marcos que posee una ventana.
Informacin sobre la
URL actual.
oscreenBuering opener
open.
pageYOset
ventana.
parent
personalbar screenX
264
Captulo 10.
status
window
Mtodos alert Muestra un cuadro de dilogo de alerta con un mensaje y un botn OK. atob back blur btoa
Decodica una cadena de informacin que ha sido codicada usando la codicacin base-64.
captureEvents clearInterval
setInterval.
clearTimeout
todo
setTimeout.
close
Cierra la ventana.
265
conrm Muestra un cuadro de dilogo de conrmacin con un mensaje y los botones OK y Cancel. crypto.random crypto.signText
un objeto rmado. Devuelve una cadena pseudoaleatoria cuya longitud es el nmero de bytes especicados.
disableExternalCapture
mtodo
enableExternalCapture.
forward
Carga la siguiente
handleEvent home
Navega a la
URL
pantalla indicada.
prompt
campo de entrada.
releaseEvents
del tipo indicado, enviando el evento a los siguientes objetos en la jerarqua de eventos.
266
Captulo 10.
resizeBy
indicada.
resizeTo
routeEvent scroll
scrollBy scrollTo
Activa o desactiva las hot keys en una ventana que no posee men.
Evala una expresin o llama a una funcin cada vez que transcurre el
Evala una expresin o llama a una funcin una vez que ha transcurri-
Eventos onBlur
onDragDrop
navegador.
onError
error.
onFocus
267
onUnload
El siguiente ejemplo muestra como se puede establecer una comunicacin entre varias ventanas. A partir de una ventana, se puede abrir una ventana nueva en la que se puede escribir texto introducido en la primera ventana. En la Figura 10.11 se muestra la ventana principal y la ventana que se crea mediante el mtodo
open.
Figura 10.11: Interaccin entre varias ventanas a travs del objeto window
Ejemplo 10.13
1 2
<HTML> <HEAD>
268
Captulo 10.
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
<TITLE>Ejemplo de uso del objeto window</TITLE> <SCRIPT LANGUAGE="JavaScript"> var win = null; function abre() { win = window.open("", "Ventana", "scrollbars=yes,width=175,height=300"); } function escri() { if(win != null) { win.document.write(document.formulario.algo.value + "<BR>\n"); win.focus(); } } function cierra() { if(win != null) { win.close(); win = null; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="formulario"> <P> <INPUT TYPE="BUTTON" VALUE="Abre una ventana" ONCLICK="abre()"> <P> <INPUT TYPE="BUTTON" VALUE="Escribe en la ventana" ONCLICK="escri()"> <INPUT TYPE="TEXT" NAME="algo"> <P> <INPUT TYPE="BUTTON" VALUE="Cierra la ventana" ONCLICK="cierra()"> </FORM> </BODY> </HTML>
window
setTimeout
del
Figura 10.12 se muestra esta pgina en un navegador; para comprobar que la pgina se refresca cada 5 segundos, se muestra la hora actual (expresada como el nmero de milisegundos desde el 1 de enero de 1970 a las 0 horas).
269
Ejemplo 10.14
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<HTML> <HEAD> <TITLE>Ejemplo de uso del objeto window</TITLE> <SCRIPT LANGUAGE="JavaScript"> function refrescar() { location.href = self.location.href; } </SCRIPT> </HEAD> <BODY ONLOAD="window.setTimeout('refrescar()', 5000)"> Esta pgina se refresca cada 5 segundos <BR><BR> <SCRIPT LANGUAGE="JavaScript"> var d; d = new Date(); document.write("Hora: " + d.getTime()); </SCRIPT> </BODY> </HTML>
270
Captulo 10.
Apndice A
ndice General
A.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . A.2. Etiquetas que denen la estructura del documento A.3. Etiquetas que pueden ir en la cabecera . . . . . . . A.4. Etiquetas que denen bloques de texto . . . . . . . A.5. Etiquetas de listas . . . . . . . . . . . . . . . . . . . . A.6. Etiquetas de caractersticas del texto . . . . . . . . A.7. Etiquetas de anclas y enlaces . . . . . . . . . . . . . A.8. Etiquetas de imgenes y mapas de imgenes . . . . A.9. Etiquetas de tablas . . . . . . . . . . . . . . . . . . . A.10.Etiquetas de formularios . . . . . . . . . . . . . . . . A.11.Etiquetas de marcos . . . . . . . . . . . . . . . . . . . A.12.Etiquetas de situacin de contenidos . . . . . . . . . A.13.Etiquetas de script . . . . . . . . . . . . . . . . . . . . A.14.Etiquetas de applets y plug-ins . . . . . . . . . . . . A.15.Etiquetas de ajuste del texto . . . . . . . . . . . . . A.16.Atributos universales . . . . . . . . . . . . . . . . . .
271
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
272 273 273 274 275 275 276 277 278 279 282 283 284 285 286 287
272
A.1. Introduccin
Este resumen contiene todas las etiquetas evoluciona
tor 4.0 y posteriores. Este resumen slo contiene la sintaxis de las etiquetas. Conforme etiquetas y otras quedan obsoletas (deprecated ) y se desaconseja su uso.
Cuando una etiqueta se emplea por parejas (inicio y n), se representa con unos puntos suspensivos, como individual aparece como ejemplo
una serie de posibles valores, estos se han separado con una barra vertical, como por valor, como el atributo
ALIGN="LEFT" | "RIGHT" | "CENTER". Otros atributos no reciben MULTIPLE de la etiqueta <SELECT> ... </SELECT>.
Las etiquetas se han clasicado en los siguientes grupos: Etiquetas que denen la estructura del documento. Etiquetas que pueden ir en la cabecera Etiquetas que denen bloques de texto. Etiquetas de listas. Etiquetas de caractersticas del texto. Etiquetas de anclas y enlaces. Etiquetas de imgenes y mapas de imgenes. Etiquetas de tablas. Etiquetas de formularios. Etiquetas de marcos. Etiquetas de situacin de contenidos. Etiquetas de script. Etiquetas de applets y plug-ins. Etiquetas de ajuste del texto. Atributos universales. Para incluir un comentario en una pgina HTML se utiliza la etiqueta <!-Comentario -->. Se puede emplear para anular una seccin de una pgina, de forma que no se visualice en el navegador, pero sin tener que eliminar dicha seccin de la pgina.
<HEAD>.
A.2.
273
HTML.
Etiqueta ms externa:
BACKGROUND="URL". BGCOLOR="color". TEXT="color". LINK="color". ALINK="color". VLINK="color". ONLOAD="cdigoScript". ONUNLOAD="cdigoScript". ONBLUR="cdigoScript". ONFOCUS="cdigoScript".
<HEAD>
</HEAD>.
<BASE>.
HREF="URL". TARGET="nombreVentana".
Informacin metadocumental:
<META>.
Atributos:
274
Denicin de estilo:
Atributo:
TYPE="tipoEstilo".
Enlace a cheros externos: Atributos:
<ISINDEX>.
2
Atributo:
PROMPT="texto".
Cdigo JavaScript en el cliente :
Atributos:
LANGUAGE="nombreLenguajeScript". SRC="URL".
<H1> ... </H1>, <H2> ... </H2>, <H3> ... </H3>, <H4> ... </H4>, <H5> ... </H5> y <H6> ... </H6>. Atributo:
Encabezamientos predenidos:
Atributo:
Atributos:
COLS="columnas". WRAP.
Secuencia literal de caracteres (desactiva intrprete):
1 Tambin puede emplearse en el cuerpo. 2 Tambin puede emplearse en el cuerpo. 3 En la documentacin de Netscape Communicator
no gura el valor
A.5.
Etiquetas de listas
275
COMPACT.
Trmino de denicin:
Descripcin de denicin:
Atributo:
Atributos:
SIZE="nmero".
Tamao de letra mayor: Parpadeante:
276
Cita:
<CITE> ... </CITE>. <CODE> ... </CODE>. <EM> ... </EM>. <FONT> ... </FONT>.
Atributos:
Cdigo:
Enfatizado:
Texto de teclado:
Muestra el resto del documento tal cual: Tipo de letra menor: Tachado:
Superndice:
las anclas (lugares a donde se puede crear un enlace) como los enlaces. Ancla:
Atributo:
NAME="nombreAncla".
Enlace:
Atributos:
A.8.
277
SRC="URL". LOWSRC="URL". ALT="textoAlternativo". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". BORDER="anchuraBorde". HEIGHT="altura". WIDTH="anchura". HSPACE="margenHorizontal". VSPACE="margenVertical". ISMAP. USEMAP="#nombreMapa". NAME="nombreImagen". ONABORT="cdigoScript". ONERROR="cdigoScript". ONLOAD="cdigoScript". SUPPRESS="TRUE" | "FALSE".
rea de un mapa de imagen:
<AREA>.
Atributos:
COORDS="coordenadas".
278
Atributo:
NAME="nombreMapa".
Atributos:
ALIGN="LEFT" | "CENTER" | "RIGHT". BGCOLOR="color". BORDER="anchuraBorde". CELLPADDING="valor". CELLSPACING="valor". HEIGHT="altura". WIDTH="anchura". COLS="numeroDeColumnas". HSPACE="margenHorizontal". VSPACE="margenVertical".
Ttulo de la tabla:
Atributo:
ALIGN="BOTTOM" | "TOP".
Fila de la tabla:
Atributos:
Atributos:
A.10.
Etiquetas de formularios
279
ALIGN="LEFT" | "CENTER" | "RIGHT". VALIGN="BASELINE" | "BOTTOM" | "MIDDLE" | "TOP". BGCOLOR="color". COLSPAN="valor". ROWSPAN="valor". HEIGHT="altura". WIDTH="anchura". NOWRAP.
Encabezamiento de una columna o la:
Atributos:
ALIGN="LEFT" | "CENTER" | "RIGHT". VALIGN="BASELINE" | "BOTTOM" | "MIDDLE" | "TOP". BGCOLOR="color". COLSPAN="valor". ROWSPAN="valor". HEIGHT="altura". WIDTH="anchura". NOWRAP.
Atributos:
<INPUT TYPE="BUTTON">.
Atributos:
NAME="nombreBotn".
280
VALUE="etiqueta". ONCLICK="cdigoScript".
Casilla de vericacin:
<INPUT TYPE="CHECKBOX">.
Atributos:
<INPUT TYPE="FILE">.
Atributos:
NAME="nombre". VALUE="nombreFichero".
Elemento oculto:
<INPUT TYPE="HIDDEN">.
Atributos:
NAME="nombre". VALUE="valor".
Imagen como botn:
<INPUT TYPE="IMAGE">.
Atributos:
NAME="nombre". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". SRC="URL".
Contrasea:
<INPUT TYPE="PASSWORD">.
Atributos:
<INPUT TYPE="RADIO">.
Atributos:
A.10.
Etiquetas de formularios
281
Restaurar (borrar):
<INPUT TYPE="RESET">.
Atributos:
<INPUT TYPE="SUBMIT">.
Atributos:
NAME="nombre". VALUE="etiqueta".
Lnea de texto:
<INPUT TYPE="TEXT">.
Atributos:
Atributos:
Atributos:
VALUE="valor". SELECTED.
rea de texto:
Atributos:
NAME="nombre". COLS="columnas".
282
<KEYGEN>.
Atributos:
NAME="nombre". CHALLENGE="desafo".
Elemento de bsqueda :
<ISINDEX>.
Atributo:
PROMPT="texto".
<FRAME>.
Atributos:
BORDERCOLOR="color". FRAMEBORDER="YES" | "NO". MARGINHEIGHT="alturaMargen". MARGINWIDTH="anchuraMargen". NAME="nombreMarco". NORESIZE. SCROLLING="YES" | "NO" | "AUTO". SRC="URL".
Conjunto de marcos:
Atributos:
A.12.
283
DHTML.
Atributos:
ID="nombreCapa". LEFT="posicin". TOP="posicin". PAGEX="pginaX". PAGEY="pginaY". SRC="URL". Z-INDEX="nmero". ABOVE="nombreCapa". BELOW="nombreCapa". WIDTH="anchura". HEIGHT="altura". CLIP="nmero,nmero,nmero,nmero". VISIBILITY="visibilidad". BGCOLOR="color". BACKGROUND="URL". ONBLUR="cdigoScript". ONFOCUS="cdigoScript". ONLOAD="cdigoScript". ONMOUSEOVER="cdigoScript".
284
ONMOUSEOUT="cdigoScript".
Capa posicionada de forma relativa:
Atributos:
ID="nombreCapa". LEFT="posicin". TOP="posicin". PAGEX="pginaX". PAGEY="pginaY". SRC="URL". Z-INDEX="nmero". ABOVE="nombreCapa". BELOW="nombreCapa". WIDTH="anchura". HEIGHT="altura". CLIP="nmero,nmero,nmero,nmero". VISIBILITY="visibilidad". BGCOLOR="color". BACKGROUND="URL". ONBLUR="cdigoScript". ONFOCUS="cdigoScript". ONLOAD="cdigoScript". ONMOUSEOVER="cdigoScript". ONMOUSEOUT="cdigoScript". <NOLAYER> ... </NOLAYER>.
HTML.
Atributos:
LANGUAGE="nombreLenguajeScript". SRC="localizacionURL".
Texto alternativo al cdigo JavaScript : Cdigo en el servidor:
5 Tambin
A.14.
285
Applet
Java:
Atributos:
NAME="nombre". CODE="nombreFicheroClass". CODEBASE="directorioFicheroClass". ARCHIVE="archivo". ALT="textoAlternativo". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". HEIGHT="altura". WIDTH="anchura". HSPACE="margenHorizontal". VSPACE="margenVertical". MAYSCRIPT.
Parmetro para un applet :
<PARAM>.
Atributos:
NAME="nombre". VALUE="valor".
Plug-in incrustado:
Atributos:
NAME="nombre". SRC="URL". TYPE="tipoMIME". PLUGINSPAGE="URLinstrucciones". PLUGINURL="URLplugin". ALIGN="LEFT" | "RIGHT" | "TOP" | "BOTTOM". BORDER="anchura". FRAMEBORDER="YES" | "NO". HEIGHT="altura". WIDTH="anchura". UNITS="unidades".
286
<OBJECT>.
Atributos:
CLASSID="ficheroClase". DATA="URL". CODEBASE="directorioFicheroClase". TYPE="tipoMIME". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". HEIGHT="altura". WIDTH="anchura". ID="nombre".
<BR>.
Atributo:
Lnea horizontal:
Atributos:
COLS="nmeroColumnas". GUTTER="separacinColumnas".
A.16.
Atributos universales
287
WIDTH="anchuraColumnas".
No salto de lnea: Espacio extra:
<SPACER>.
TYPE="HORIZONTAL" | "VERTICAL" | "BLOCK". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". HEIGHT="altura". WIDTH="anchura". SIZE="tamao".
Intervalo de contenido: Posible salto de lnea:
<WBR>.
CLASS="claseEstilo".
LANG="ISO". ID="nombreLugarOEstilo".
STYLE="estilo".
Apndice B
Colores en HTML
El lenguaje HTML posee varias etiquetas con atributos que indican un color. Por ejemplo, la etiqueta <BODY> tiene el atributo BGCOLOR que permite indicar el color de fondo de una pgina y la etiqueta <FONT> posee el atributo COLOR para cambiar el color del texto. En este apndice se explica cmo trabajar con los colores en HTML. Adems, tambin se incluyen una serie de consejos sobre el uso de los colores en las pginas web.
ndice General
B.2. Tabla de colores . . . . . . . . . . . . . . . . . . . . . . . . 294 B.3. Cambio de colores . . . . . . . . . . . . . . . . . . . . . . . 294 B.4. Consejos sobre el uso de colores . . . . . . . . . . . . . . 296
cin de los tres colores bsicos (primarios) rojo, verde y azul. Cada componente expresa la intensidad del color bsico en la combinacin. As, por ejemplo, el color negro es el resultado de combinar los tres colores bsicos con una intensidad nula (0), mientras que el blanco es el resultado de combinar los tres colores con una intensidad mxima (255 cada componente). Este sistema de codicacin de los colores permite 16 777 216 colores (256 x 256 x 256 combinaciones posibles). 289
290
expresar en hexadecimal. Como este sistema de numeracin es un poco engorroso, a continuacin mostramos cmo se pueden convertir las componentes a hexadecimal mediante las herramientas que posee Microsoft Windows.
B.1.1.
Mediante cualquier programa que permita seleccionar colores, podemos elegir el color que queremos emplear en una pgina Microsoft Paint , que viene con los sistemas operativos de Microsoft y que se puede encontrar a travs de men
HTML.
Colores
la opcin
Figura B.1. Si en
Inicio Programas Accesorios, si seleccionamos en el Modicar colores. . . aparece la paleta de colores de la esta ventana se pulsa el botn Denir colores personalizados Rojo, Verde y Azul aparecen
las correspondientes componentes en decimal (los valores de cada casilla varan desde 0 hasta 255). Una vez que se tienen las componentes del color deseado, el siguiente paso es convertirlas a hexadecimal.
B.1.2.
Para pasar un nmero del sistema decimal al hexadecimal, se tiene que dividir el nmero entre 16. Si el cociente es mayor que 15, se divide el cociente entre 16 y as sucesivamente hasta lograr un cociente menor que 16. El nmero en hexadecimal escrito de izquierda a derecha se compone del ltimo cociente y los sucesivos restos obtenidos, desde el ltimo hasta el primero, pero si el ltimo cociente o los restos tienen dos cifras, se tienen que transformar segn las equivalencias del Cuadro B.1.
1 Se
Pro,
ha elegido este programa porque se encuentra en la mayora de los ordenadores con sistema
operativo Microsoft Windows. Existen programa de dibujo o retoque fotogrco, como Jasc Paint Shop que facilitan la tarea, ya que directamente muestran en hexadecimal las componentes
RGB
de
un color.
291
292
293
241
en decimal equivale a
F.
F1
en hexadecimal, ya que el
15,
que
Como el mtodo anterior es tedioso y propenso a errores, se puede realizar la conversin automticamente mediante el ordenador. Para ello, se puede emplear el programa Calculadora que se incluye en los sistemas operativos de Microsoft y que se encuentra otra vez en
Inicio
Programas
Accesorios.
El programa
Calculadora posee dos modos de visualizacin: estndar y cientca. Para realizar la conversin, tiene que estar en el modo calculadora cientca, que se selecciona a travs del men
Ver.
Hex (hexadecimal), Dec (decimal), Oct (octal) y Bin (binario), que permiten convertir un nmero a los distintos sistemas de numeraradio marcados con las etiquetas cuando la calculadora se encuentra en el sistema
cin. Para pasar de decimal a hexadecimal, simplemente hay que escribir el nmero
294
HTML
un nombre en ingls. La lista de nombres contiene cientos de colores, por lo que aqu solo incluimos el Cuadro B.2 con algunos de ellos, junto con su valor en
RGB.
ALINK
de la etiqueta
ya que
cualquier cambio parcial puede producir una combinacin con poco contraste entre los colores que se modican y los colores que se emplean por defecto (que cambian de un navegador a otro o incluso el usuario los puede modicar a su gusto). Por ejemplo, en la Figura B.4 se puede ver el cuadro de dilogo de Microsoft Internet Explorer 5.5 que permite cambiar los colores de los atributos anteriores y en la Figura B.5 se puede observar el cuadro de dilogo de Netscape Communicator 4.78 que realiza la misma funcin. Incluso si se emplea una imagen como fondo de una pgina, hay que asignar un valor al atributo
que el texto no se vea correctamente sobre el color de fondo por defecto de la pgina.
295
Figura B.4: Cuadro de dilogo para cambiar colores en Microsoft Internet Explorer
296
La multidimensionalidad del color tambin puede alegrar e informar aquello que los usuarios tienen que afrontar delante de un ordenador, aunque algunos colores aplicados en las pantallas de ordenador han transformado aquello que deba ser una simple herramienta en algo que parece una grotesca parodia de un videojuego.
Edward R. Tufte en Envisioning Information, Graphics Press, 1990 Por otro lado, la capacidad humana de distinguir colores tiene un lmite. Los expertos en color se cree que pueden distinguir aproximadamente un milln de colores, mientras que la mayora de la gente no llega a los 20.000. Un lmite adecuado para una pgina web es emplear 20 colores distintos como mximo (sin contar, claro est, los colores que se emplean en las imgenes o fotografas). Algunos consejos bsicos sobre el uso de los colores son los siguientes:
297
Un color brillante sobre una gran supercie tambin brillante suele irritar (por ejemplo, un texto rosa sobre un fondo amarillo). Sin embargo, un color brillante usado sobre un fondo sin brillo (apagado) destaca y proporciona dinamismo. Los colores brillantes cercanos entre s causan un mal efecto. Los colores de fondo deben de ser discretos y suaves, de modo que no distraigan la atencin del usuario frente a los elementos situados en un primer plano. Para que el texto sea claramente legible, tiene que existir un gran contraste entre el color del texto y el color del fondo. La combinacin de mayor contraste es el texto en negro sobre un fondo blanco, que es la que se emplea normalmente en los documentos impresos (libros, peridicos, manuales, etc.). Sin embargo, para evitar la fatiga visual que produce una pantalla completamente blanca, se puede emplear justo la combinacin contraria: el texto en blanco sobre un fondo negro .
2 Sin
embargo, las combinaciones de colores claros para el texto sobre fondo oscuro se imprimen
con dicultad.
Apndice C
ndice General
C.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . 299 C.2. Depuracin en cualquier navegador . . . . . . . . . . . . 300 C.3. Netscape Communicator . . . . . . . . . . . . . . . . . . . 300
C.3.1. Modicar las preferencias . . . . . . . . . . . . . . . . . . 302 304 305 C.3.2. Evaluacin de expresiones con la consola . . . . . . . . . . C.3.3. Netscape JavaScript Debugger . . . . . . . . . . . . . . .
C.1. Introduccin
La depuracin de errores de JavaScript suele estar desactivada en los navegadores, ya que slo es til para aquellos programadores que quieran vericar su cdigo. Vamos a ver como podemos depurar cdigo JavaScript de forma general en cualquier 299
300
navegador y de forma especca mediante las caractersticas que nos ofrecen Netscape Communicator y Microsoft Internet Explorer.
Por ejemplo, si queremos comprobar en un punto del cdigo el valor de una variable, slo hay que incorporar una lnea de cdigo similar a la siguiente:
Ejemplo C.1
(Figura C.1). La consola sustituye a todas las ventanas de alerta: cada vez
que se encuentra un error, se escribe un mensaje en la consola. La consola almacena todos los mensajes de error que se producen (Figura C.2). Adems, la consola se puede dejar abierta o cerrar y abrir tantas veces como se quiera. Por defecto, la consola no se muestra: se encuentra oculta y no hay ninguna opcin en los mens del navegador que permita mostrarla. Si se desea mostrar la consola, existen cuatro posibilidades: 1. Escribir javascript: en la barra de direcciones del navegador y pulsar la tecla Enter (Return).
C.3.
Netscape Communicator
301
302
2.
Seleccionar en el men
URL javascript:.
File
la opcin
Open Page. . .
y escribir en el campo
3.
Incorporar en el cdigo
4.
Modicar las preferencias del navegador para que se muestre automticamente cada vez que se produzca un error. Esta opcin es la mejor para los usuarios que estn desarrollando cdigo JavaScript .
La consola JavaScript dispone de dos botones, tal como se ve en la Figura C.1: El botn
Clear Console permite borrar todo los mensajes de error mostrados Close cierra la ventana de la consola.
Para cada error que se encuentra, en la consola JavaScript se muestra un mensaje con la
URL del chero que contiene el error, el nmero de lnea y un comentario que
describe el tipo de error. En algunos casos, se incluye tambin una parte de la lnea que contiene el error y se marca el punto exacto donde se encuentra.
C.3.1.
Para algunos propsitos, el tener que abrir de forma manual la consola JavaScript puede ser molesto. Por ejemplo, si estamos desarrollando una pgina, el tener que teclear
javascript: cada vez que hay un error para abrir la consola y ver el mensaje
de error puede ser tedioso. Se puede especicar que automticamente se abra la consola cuando se produzca un error de JavaScript . Para ello, hay que modicar el chero de preferencias
prefs.js,
nombreUsuario.
1.
C:\Archivos de programa\Netscape\Users\-
Para modicar este chero hay que seguir los siguientes pasos: Asegurarse de que el navegador no est ejecutndose. El navegador puede sobrescribir los cambios que realicemos si se est ejecutando cuando editemos el chero de preferencias. 2. Abrir el chero de preferencias
prefs.js.
C.3.
Netscape Communicator
303
304
Ejemplo C.3
1 2 3 4 5 6 7 8
// Netscape User Preferences // This is a generated file! Do not edit. user_pref("autoupdate.enabled", false); user_pref("browser.bookmark_window_showwindow", 3); user_pref("browser.cache.disk_cache_size", 20480); user_pref("browser.cache.memory_cache_size", 2048); user_pref("browser.download_directory", "D:\\TV\\");
3.
Aadir una de las siguientes lneas al nal del chero: Si se quiere que se abra automticamente la consola cada vez que se produce un error de JavaScript :
Ejemplo C.4
user_pref("javascript.console.open_on_error", true);
Si se quiere que se abra una ventana de alerta cada vez que se produce un error de JavaScript (como el sistema empleado en las versiones anteriores):
Ejemplo C.5
user_pref("javascript.classic.error_alerts", true);
Nota: aunque este sistema gura en la documentacin de Netscape Communicator, se ha probado en la versin 4.7 y no funciona. 4. Grabar y cerrar el chero
prefs.js.
C.3.2.
La consola de JavaScript es un ventana compuesta de dos marcos (Figura C.1). El marco inferior contiene un cuadro de texto etiquetado
javascript typein
en el
que se pueden escribir expresiones de una sola lnea. Se puede emplear este cuadro de texto para asignar valores a variables, realizar operaciones matemticas o vericar el resultado devuelto por los operadores de comparacin. Para evaluar una expresin simplemente hay que escribirla en el cuadro de texto y pulsar la tecla
Enter (Return).
ejemplo, al evaluar las siguiente expresiones se obtienen los resultados citados en los comentarios y mostrados en la Figura C.3:
Ejemplo C.6
1 2
C.3.
Netscape Communicator
305
3 4 5
C.3.3.
Existe una posibilidad ms con el navegador de Netscape: Netscape JavaScript Debugger (Figura C.4). Se trata de un applet (hecho en Java) que permite realizar una depuracin avanzada del cdigo JavaScript : visor de objetos (object inspector ), puntos de parada (breakpoints ), visores de variables (watches ), ejecucin paso a paso (step running ), visor de la pila de ejecucin (call stack window ), etc. Esta herramienta se puede descargar en las siguientes direcciones:
306
C.3.
Netscape Communicator
307
http://developer.netscape.com/software/jsdebug.html. http://home.netscape.com/eng/Tools/JSDebugger/relnotes/relnotes11.html.
Para poderlo descargar e instalar, es necesario tener activada la opcin SmartUpdate. Se accede a ella a travs del men Edit Preferences Advanced SmartUpdate y se tiene que activar la casilla Enable SmartUpdate (Figura C.5). El sistema de descarga e instalacin de este applet es automtico.
308
Mostrar siempre este mensaje cuando una pgina contenga errores en la propia ventana de alerta (Figura C.6). La prxima vez
Desactivando la casilla que se localice un error de JavaScript , no se mostrar la ventana de alerta.
2.
Mostrar una noticacin sobre cada error de secuencia de comandos en el men Herramientas Opciones de Internet. . . Avanzadas (Figura C.8). A travs de esta opcin se puede activar
Desactivando la opcin o desactivar tantas veces como se quiera.
Figura C.6: Mensaje de alerta de Microsoft Internet Explorer En cualquier caso (est activado o desactivado), si se encuentra un error, en la barra de estado del navegador se muestra un mensaje (Figura C.7) cuando se localiza un error. Pulsando sobre el icono (tringulo amarillo), se abre la ventana de alerta. En la ventana de alerta (Figura C.6) se muestra un mensaje con informacin sobre el error: lnea, carcter, error, cdigo y
URL
C.4.
309
mensajes suelen ayudar bastante poco a localizar el error, ya que a veces no sealan el sitio exacto del error. Si se tiene instalado algn entorno de programacin de Microsoft, como Visual
Basic
racin de secuencia de comandos (cdigo de script ), tal como se ve en la Figura C.8 y Figura C.11. Esta opcin permite depurar el cdigo de JavaScript mediante el depurador empleado en los entornos de programacin de Microsoft. El depurador (Figura C.12) permite realizar un depuracin del cdigo mucho ms precisa, ya que incorpora inspeccin de variables, ejecucin paso a paso, puntos de interrupcin, visor de objetos, etc. Para que funcione el depurador, tiene que estar desactivada la opcin Deshabilitar depuracin de secuencias de comandos en el men Herramientas Opciones de Internet. . . Avanzadas (Figura C.8). Cuando se tiene activada la opcin de depurador de secuencias, las ventanas de alerta cambian a otras que muestran la lnea donde se produce el error, el error producido y la posibilidad de abrir el depurador de secuencias para depurar el cdigo de JavaScript (Figura C.9 y Figura C.10).
310
C.4.
311
312
Bibliografa recomendada
A continuacin se incluye una serie de libros recomendados agrupados en cuatro categoras: General, HTML, Diseo web y JavaScript.
General
Eduardo Parra Murga. Diccionario de Internet. Nesis, Madrid, 1996 Jess Bobadilla Sancho. Superutilidades para Webmasters. Osborne McGrawHill, Madrid, 1999 H. M. Deitel, P. J. Deitel, T. R. Nieto. Internet and World Wide Web. How to
HTML
Sergio Ros Aguilar. Lenguajes HTML, Java y CGI. El diseo de pginas Web
Diseo web
Sarah Horton Patrick J. Lynch. Principios de diseo bsicos para la creacin
314
Bibliografa recomendada
Steve Krug. No me hagas pensar: una aproximacin a la usabilidad en la Web. Prentice Hall, Madrid, 2001
JavaScript
Danny Goodman. Programacin en JavaScript. Va@Internet, Anaya Multimedia, Madrid, 1996 Oscar Gonzlez Moreno. Programacin en JavaScript. Guas Prcticas, Anaya Multimedia, Madrid, 1998 Jos Manuel Alarcn. Programacin en JavaScript (actualizada hasta JavaS-
cript 1.3 y JScript 5). Guas Prcticas, Anaya Multimedia, Madrid, 2000
ndice alfabtico
<EMBED>, 285 <FONT>, 108, 122, 276 <FORM>, 151, 165, 242, 279 ., 205, 213 .htm, 97 .html, 97 /* . . . */, 191 //, 191 <!-- -->, 100, 187, 272 <A>, 122, 161, 162, 179, 276 <ADDRESS>, 274 <APPLET>, 285 <AREA>, 277 <B>, 106, 275 <BASE>, 273 <BASEFONT>, 109, 275 <BIG>, 275 <BLINK>, 275 <BLOCKQUOTE>, 112, 274 <BODY>, 98, 121, 150, 242, 243, 262, 273, 287 <BR>, 100, 286 <CAPTION>, 278 <CENTER>, 112, 286 <CITE>, 106, 276 <CODE>, 106, 276 <DD>, 117, 275 <DFN>, 106 <DIR>, 275 <DIV>, 274 <DL>, 115, 275 <DT>, 115, 275 <EM>, 106, 276 315 <FRAME>, 161, 262, 282 <FRAMESET>, 161, 262, 282 <H1>, 105, 274 <H2>, 105, 274 <H3>, 105, 274 <H4>, 105, 274 <H5>, 105, 274 <H6>, 105, 274 <HEAD>, 98, 243, 273 <HR>, 114, 286 <HTML>, 99, 273 <I>, 106, 276 <ILAYER>, 284 <IMG>, 147, 277 <INPUT>, 151, 178, 279281 <ISINDEX>, 274, 282 <KBD>, 106, 276 <KEYGEN>, 282 <LAYER>, 283 <LI>, 118, 119, 275 <LINK>, 274 <MAP>, 278 <MENU>, 275 <META>, 99, 101, 273 <MULTICOL>, 286 <NOBR>, 287 <NOEMBED>, 286 <NOFRAMES>, 162, 283 <NOLAYER>, 284 <NOSCRIPT>, 284
316
ndice alfabtico
<OBJECT>, 286 <OL>, 118, 275 <OPTION>, 151, 155, 281 <P>, 111, 274 <PARAM>, 285 <PLAINTEXT>, 276 <PRE>, 129, 274 <S>, 106, 276 <SCRIPT>, 99, 177, 187, 274, 284 <SELECT>, 151, 155, 281 <SERVER>, 284 <SMALL>, 276 <SPACER>, 287 <SPAN>, 287 <STRIKE>, 106, 276 <STRONG>, 106, 276 <STYLE>, 99, 274 <SUB>, 276 <SUP>, 276 <TABLE>, 131, 136, 278 <TD>, 131, 132, 135, 278 <TEXTAREA>, 151, 156, 281 <TH>, 131, 132, 279 <TITLE>, 99, 243, 273 <TR>, 131, 132, 135, 278 <TT>, 106, 276 <U>, 106, 276 <UL>, 119, 275 <VAR>, 106, 276 <WBR>, 287 <XMP>, 274 =, 98 , 100
vase ARPA
alineamiento del texto, 111 American Standard Code for Information Interchange, vase ASCII antialiasing, 141, 147 API, xxi, 45 Apple Macintosh, 19 applets, 21, 49, 93, 95, 104, 185, 242, 285 Application Program Interface, vase API ARPA, xxi, 8, 9 arrays asociativos, 213 ASCII, xxi, 96, 100, 129, 194, 218 asin, 223 ASP, xxi, 31, 50, 54, 55, 58, 59, 95, 176, 183, 187, 226 Asymmetric Digital Subscriber Line, va-
se ADSL
atan, 223 atributo, 98 Autodesk MapGuide, 49
Bit-map, vase BMP Bloc de notas, 96, 184 BMP, xxii, 145 Bobby, 174 Bolt Beranek and Newman, 9, 13 break, 199, 203
accesibilidad, 172 Active Server Pages, vase ASP ActiveX, 49, 93, 177 Adobe Acrobat Reader, 49
C, xxii, 176, 189, 190 C++, 176, 189, 190 cdigos pareados, 97 Cach Server Pages, vase CSP
ndice alfabtico
317
Calculadora, 293 Cascading Style Sheets, vase CSS ceil, 223 CERN, xxii, 14, 1719, 21, 22, 93 CGI, xxii, 26, 28, 31, 49, 50, 59, 95, 183, 226 charAt, 217 Claris Home Page, 97 Client-side JavaScript, 182 ColdFusion, 31, 50 colores, 121, 289 comentario en HTML, 100, 187, 272 comentario en JavaScript, 191 Common Gateway Interface, vase CGI Compuserve, xxiii, xxv, 145 concat, 217 Conseil Europenne pour le Recherche Nuclaire, vase CERN consola de JavaScript, 300 continue, 205 controles de un formulario, 151 Core JavaScript, 182 cos, 224 CSP, xxii, 58, 59 CSS, xxii, 29, 34, 49, 93
DOS, 97 Dynamic HTML, vase DHTML Dynamic Link Library, vase DLL
E, 223
ECMA, xxiii, 187 ECMAScript, 187 enlaces, 122 Enquire-Within-Upon-Everything, 17 Erwise, 18 escape, 212 European Computer Manufacturers Association, vase ECMA eval, 210 exp, 224 Extensible HyperText Markup Language, vase XHTML Extensible Markup Language, vase XML extranet, 53
DARPA, vase ARPA, 93 default, 199 Defense Advanced Research Projects Agency,
for(. . . in . . . ), 205, 213 formatos fsicos, 106 formatos lgicos, 106 formularios, 150 fromCharCode, 218 funciones constructoras, 214 function, 208 FutureWave Software, 34
vase ARPA
degradacin elegante, 174 delete, 216 depuracin de errores, 299 DHTML, xxii, 34, 49, 93, 95, 177, 183, 283 DLL, xxiii, 50 do . . . while, 200, 201 document, 240, 242 Document Object Model, vase DOM DOM, xxiii, 177, 182, 205, 226, 239
GIF, xxiii, 140143, 145, 147 Graphics Interchange Format, vase GIF gua de estilo, 168
318
ndice alfabtico
ISAPI, xxiv, 50
hiperenlaces, 122 history, 240, 255 Hojas de estilo en cascada, vase CSS HTML, xxiii, 13, 6, 15, 21, 31, 34, 48 54, 62, 65, 93101, 104106, 111, 115, 117119, 121, 122, 129, 131, 134, 138, 140, 147, 150152, 155, 163, 168, 171, 174, 176178, 183, 185, 187, 192, 240, 242244, 262, 272, 273, 277, 284, 290, 294, 302 HTML dinmico, vase DHTML HTTP, xxiii, 6, 15, 4850, 52, 53, 55, 56, 58, 94, 101, 102, 258 HyperText Markup Language, vase HTML HyperText Transfer Protocol, vase HTTP
isFinite, 210 isNaN, 211 ISO, xxiv, 187, 212 ISP, xxiv, 52
Jasc Paint Shop Pro, 290 Java, xxiv, 21, 48, 49, 54, 93, 176, 177, 183, 184, 189, 190, 258, 285, 305 Java Server Pages, vase JSP JavaScript, 1, 3, 21, 4850, 54, 62, 93, 95, 96, 175177, 179, 182184, 187, 189192, 197, 200, 209, 210, 213216, 222, 226, 236, 240, 249, 274, 284, 299, 300, 302, 304, 305, 308, 309 JavaScript 2.0, 184 JavaScript's LiveConnect, 183 JavaScript1.1, 177 JavaScript1.2, 177 JavaScript1.3, 177 javascript:, 179, 302 joe, 184 Joint Photographic Experts Group, va-
IAP, vase ISP IDC, xxiv, 31 if . . . else, 197 imgenes, 140 IMP, xxiv, 9 indexOf, 220 inicializadores de objetos, 214 Interface Message Processor, vase IMP International Organization for Standards,
se JPEG
JPEG, xxiv, 19, 140, 143, 145 JPG, vase JPEG JScript, xxi, 21, 176, 187 JSP, xxiv, 31, 50, 56, 58, 183
vase ISO
Internet, 52 internet, 52 Internet Access Provider, vase ISP Internet Database Connector, vase IDC Internet Server Application Program Interface, vase ISAPI Internet Service Provider, vase ISP Intersystems, xxii intranet, 53
lneas horizontales, 114 lastIndexOf, 220 Lempel Zev Welch, vase LZW Linux, 184 listas, 115 listas de denicin, 115
ndice alfabtico
319
listas no ordenadas, 119 listas numeradas, 118 listas ordenadas, 118 Live Picture PhotoVista, 49 LiveScript, 182 LN10, 223 LN2, 223 location, 242, 256 log, 224 LOG10E, 223 LOG2E, 223 LZW, xxv, 141, 145
MIME, xxv, 242, 258 min, 224 MIT, xxv, 79 MNG, xxv Mosaic Communications Corporation, 21 Multiple-image Network Graphics, va-
se MNG
Multipurpose Internet Mail Extensions,
vase MIME
Macromedia DreamWeaver, 97 Macromedia Flash, 34, 49, 62 Macromedia Inc., 34, 49 Macromedia Shockwave, 49 mailto:, 127 marcos, 160 Massachusetts Institute of Technology,
National Center for Supercomputing Applications, vase NCSA National Physical Laboratory, vase NPL navigator, 242, 257 NCP, xxv, 13, 14 NCSA, xxv, 18, 19, 21 NCSA Mosaic, xxv, 18, 19, 21 Netscape, xxvii, 176, 182, 187, 270, 305 Netscape Communications Corporation, 21, 182 Netscape Communicator, xxvi, 3, 19, 105, 109, 147, 176, 177, 183, 184, 189, 240, 259, 274, 294, 300, 302, 304 Netscape Enterprise Server, 176, 183 Netscape JavaScript Debugger, 305 Netscape Messenger, 129 Netscape Navigator, 4, 21, 103, 104, 182, 184, 262, 272 Network Control Protocol, vase NCP new, 214 NeXTStep, 17, 22 Nexus, 22 NPL, xxv, 7, 8 Number, 211
vase MIT
Math, 222 max, 224 metadatos, 101 Microsoft, xxi, xxiv, 23, 31, 50, 176, 187, 270, 290, 293, 309 Microsoft FrontPage, 97 Microsoft Internet Explorer, xxvi, 3, 21, 96, 103, 109, 147, 176, 177, 183, 184, 187, 189, 259, 294, 300, 309 Microsoft Internet Information Server,
xxiv, 50
Microsoft Oce, 176 Microsoft Paint, 4, 290 Microsoft Windows, xxii, xxiii, 19, 21, 49, 68, 69, 96, 97, 184, 261, 290 Microsoft Windows 3.x, 97 Midas, 18
320
ndice alfabtico
RPC, xxvi, 45
Objective-C, 22 ODBC, xxv, 45, 58 Open DataBase Connectivity, vase ODBC Open System Interconnection, vase OSI Opera, 4, 147, 176 operadores, 195 orden etiquetas, 99 OSI, xxvi, 14, 48
Scientic Data Systems, 9 secuencia de escape, 100 Secure Socket Layer, vase SSL seleccin mltiple, 198 seleccin simple, 197 sensible a minsculas/maysculas, 190, 249 Server-side JavaScript, 182 servlets, 50 SGML, xxvii, 15, 93 sin, 224 SLAC, xxvii, 18 slice, 221 split, 222 Spyglass, 21 sqrt, 226 SQRT1_2, 223 SQRT2, 223 SSL, xxvii, 53 Standard Generalized Markup Language, vase SGML Stanford Linear Accelerator Center, va-
palabras reservadas, 197 parseFloat, 211 parseInt, 211 Perl, xxii, 175 PHP, 31, 50, 55, 58 PI, 223 plug-in, xxvii, 28, 48, 49, 95, 104, 242, 243, 258, 285 PNG, xxvi, 94, 140, 145, 147 Portable Network Graphics, vase PNG pow, 225
random, 225
se SLAC
String, 211 Sun Microsystems, xxiv, 21, 176, 182 switch, 197, 198
Red Green Blue, vase RGB Remote Procedure Call, vase RPC repeticin con condicin nal, 202 repeticin con condicin inicial, 201 repeticin con contador, 200 replace, 221 Request for Comments, vase RFC return, 209 Rexx, 175 RFC, xxvi, 9, 101 RGB, xxvi, 121, 289, 290, 294 round, 225
tablas, 129
tablas como marcos, 138 tablas invisibles, 134 tan, 224 TCP/IP, xxvii, 6, 14, 48, 53 The Interactive Advertising Bureau, 142 The RAND Corporation, 79 this, 215
ndice alfabtico
321
while, 200, 202 window, 242, 259, 262 with, 205, 206, 213 World Wide Web, vase WWW World Wide Web Consortium, vase W3C WorldWideWeb, 17, 22 WWW, xxvii, 2, 18, 19, 53, 93, 94, 173 WYSIWYG, xxviii, 22, 96
unescape, 212
Unisys Corporation, xxv, 145 Universal Resource Locator, vase URL Unix, 18, 19, 49, 68, 69, 97 URL, xxvii, 6, 15, 51, 66, 68, 69, 98, 100, 102, 129, 151, 161, 165, 179, 242, 243, 255257, 263, 265, 302, 308
X-Windows, 18 Xanadu, 17 Xerox Data Systems, 9 XHTML, xxviii, 94, 98, 104, 111, 115, 117119, 155 XML, xxviii, 94, 104
validacin alfabtica, 228 validacin campo nulo, 226 validacin de formularios, 226 validacin de una fecha, 235 validacin numrica, 231 var, 191 VBScript, xxi, 21, 4850, 175, 176, 179 Viola, 18 Virtual Private Network, vase VPN Virtual Reality Modeling Language, va-
Yahoo, 71
se VRML
Visual Basic, 176, 309 Visual C++, 309 VPN, xxvii, 53 VRML, xxvii, 49
W3C, xxvii, 21, 93, 94, 104, 145, 172 174, 240 WAI, xxvii, 173 Web, vase WWW Web Accessibility Initiative, vase WAI What You See Is What You Get, vase WYSIWYG