Desarrollo de Aplicaciones Web

Desarrollo de aplicaciones web
1 de 99
file:///C:/Users/Ivn/Desktop/Desarrollo de aplicaciones web/Desarrollo...
Jeisson Hidalgo-Cspedes
Versin 0.2.8. 2011-Dic-13
Tabla de contenidos
1 Introduccin a la tecnologa web

1.1 Historia
1.1.1
1.1.2
1.1.3
1.1.4
La primera guerra de navegadores

El proceso de estandarizacin
La segunda guerra de navegadores
Notas
1.2 Arquitectura web

1.2.1 El servidor web
1.2.2 El cliente web o navegador web
1.2.3 El localizador uniforme de recursos URL
1.2.4 El protocolo de transferencia de hipertexto HTTP
1.2.4.1 El mensaje HTTP
1.2.4.2 Request line
1.2.4.3 Request header
1.2.4.4 Emtpy line
1.2.4.5 Message body
1.2.4.6 Status line
1.2.4.7 Response header
1.2.5 Ejemplo de una sesin HTTP
1.3 Proceso de construccin del sitio web

1.3.1
1.3.2
1.3.3
1.3.4
1.3.5
Diseo del sitio web

Alojamiento web
Registro de dominio
Construccin del contenido
Promocin del sitio web
2 El lenguaje de marcado extensible XML

2.1 Conceptos
2.2 Sintaxis general de XML
2.2.1 El prlogo de documento
2.2.1.1 La declaracin XML
2.2.1.2 La declaracin del tipo de documento
2.2.2 Marcado miscelneo
2.2.3 Semntica de los elementos XML
2.3 La definicin del tipo de documento (DTD)

2.3.1
2.3.2
2.3.3
2.3.4
Declaraciones de tipo de elemento

Declaraciones de la lista de atributos
Elementos versus atributos
Entidades XML
2.4 Espacios de nombres (namespaces)

2.5 La familia de tecnologas XML
2.5.1 Modelaje y validacin avanzada
2.5.2 Ligar y apuntar
2.5.3 Interfaces de programacin
2.6 El lenguaje extensible de hojas de estilo (XSL)
22/09/2015 11:52 a. m.
2 de 99
2.6.1 Transformaciones XSL (XSLT)

2.6.2 Formateo de objetos (XSL-FO)
3 El lenguaje de marcado de hipertexto (X)HTML

3.1 Estructura global
3.1.1
3.1.2
3.1.3
3.1.4
La declaracin del tipo de documento

El elemento documento
Encabezado del documento
Cuerpo del documento
3.2 Elementos de texto

3.2.1
3.2.2
3.2.3
3.2.4
Encabezados de secciones
Prrafos
Texto estructurado
Listas
3.3 Enlaces
3.3.1 Anclas
3.3.2 Ventana objetivo
3.3.3 Acceso con el teclado
3.4 Imgenes
3.4.1 Tamaos de imagen
3.4.2 Formatos de imgenes
3.4.3 Icono de favoritos
3.5 Tablas
3.6 Formularios
3.7 Objetos multimedia
3.8 Elementos genricos
4 Hojas de estilo en cascada CSS
4.1 Generalidades de las hojas de estilo
4.1.1 Ubicacin de las reglas de estilo
4.1.2 El principio de cascada
4.1.3 El operador @
4.2 Selectores
4.3 Valores de propiedades
4.4 Propiedades
4.4.1
4.4.2
4.4.3
4.4.4
El
El
El
El
modelo
modelo
modelo
modelo
de
de
de
de
fuente
color
caja
visualizacin
5 Comportamiento con JavaScript

5.1 Generalidades
5.1.1
5.1.2
5.1.3
5.1.4
Cdigo
Cdigo
Cdigo
Cdigo
JavaScript
JavaScript
JavaScript
JavaScript
en
en
en
en
el elemento script
un archivo externo
los eventos intrnsecos
el pseudoprotocolo javascript:
5.2 Tipos de datos y variables

5.2.1
5.2.2
5.2.3
5.2.4
5.2.5
5.2.6
5.2.7
5.2.8
5.2.9
Nmeros
Cadenas de caracteres (strings)
Conversiones entre nmeros y strings
Booleanos
Funciones
Objetos
Arreglos
Valores especiales
Objetos especiales
22/09/2015 11:52 a. m.
3 de 99
5.2.10 Por valor o por referencia

5.2.11 Variables
5.3 Expresiones
5.3.1 Operadores
5.3.2 Sentencias
5.4 Arreglos y funciones como objetos

5.4.1 Propiedades de Object
5.4.2 Propiedades de Array
5.4.3 Propiedades de Function
5.5 Pseudoclases
5.6 Programacin del navegador
5.6.1 El ambiente de desarrollo del navegador
5.6.1.1 El modelo de ejecucin de JavaScript
5.6.1.2 Consideraciones de seguridad
5.6.2 El objeto window
5.6.2.1 Temporizadores y animaciones
5.6.2.2 Informacin del navegador, la ventana y la pantalla
5.6.2.3 Abrir y manipular ventanas
5.6.2.4 Ubicacin del documento
5.6.2.5 Cuadros de dilogo
5.6.3 El objeto document
5.6.3.1 El modelo de objetos del documento (DOM)
5.6.3.2 Localizar elementos en el documento
5.6.3.3 Manejo de eventos
6 El servidor web
6.1 Instalacin y ejecucin del servidor web
6.2 Configuracin del servidor web
6.2.1 La directiva include
6.2.2 El mdulo HTTP Core
6.2.2.1 Servidores virtuales
6.2.2.2 El bloque location
6.2.2.3 MIME types
6.2.3 Server Side Includes module
6.2.4 CGI y FastCGI
6.2.5 PHP a travs de FastCGI
7 Programacin del servidor web: PHP

7.1 El lenguaje de programacin PHP
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
Ambientes de produccin y desarrollo

Generalidades del lenguaje PHP
Tipos de datos
Operadores
Control de flujo
Arreglos
Funciones
Reglas de alcance de variables (variable scope)
Objetos
7.2 Manejo de archivos

7.3 Bases de datos
7.3.1 Funciones para acceder a MySQL
7.3.2 Objetos para acceder a la base de datos
7.4 Formularios web

7.4.1
7.4.2
7.4.3
7.4.4
7.4.5
El mtodo GET
El mtodo POST
Seguridad y validacin de datos
Controles en el formulario
Validacin de datos con JavaScript
8 Bibliografa
22/09/2015 11:52 a. m.
4 de 99
1 Introduccin a la tecnologa web

De todas las aplicaciones que se han construido sobre Internet, la World Wide Web (WWW o simplemente web) ha sido la
ms popular, tanto que, muchas personas cuando escuchan el trmino "Internet" realmente imaginan la web. La web puede
definirse como un sistema de documentos de hipertexto interrelacionados entre s y accesibles a travs de Internet. Se dice
que son documentos de hipertexto o hipermedios, por su capacidad de contener diferentes medios de comunicacin: texto,
imgenes, sonido, vdeo, enlaces, etc.
La popularidad de la web puede adjudicarse a su facilidad de uso y por ser el ms exitoso de los sistemas distribuidos en la
actualidad. Los documentos se almacenan en computadoras distintas, con sistemas operativos diversos, generados de
fuentes heterogneas, pero esto es transparente para el usuario. De hecho, para el usuario todos los documentos del mundo
parecen ser parte de un nico sistema, lo cual es fundamento de lo que se define como un sistema distribuido.
1.1 Historia
La web fue conceptualizada en un artculo de 1989 de Tim Berners-Lee, quien se convertira en uno de sus grandes lderes.
A finales de 1990, Berners-Lee desarroll el Protocolo de transferencia de hipertexto (HTTP, HyperText Transfer Protocol), el
primer servidor web llamado CERN-httpd; el primer navegador llamado WorldWideWeb, que tambin era un editor web; el
lenguaje de marcado de hipertexto (HTML, HyperText Markup Language); y las primeras pginas web que hablaban sobre el
proyecto mismo.
La aparicin pblica de la web fue en 1991, cuando Berners-Lee describi el proyecto en un grupo de noticias (Usenet
newsgroup). Haba nacido un mecanismo eficiente que permite a cualquiera ser autor, compartir material de inters al
mundo, y hacer referencia al existente a travs de hiper-enlaces.
La difusin de la web fue lenta. Inicialmente fue adoptada por universidades y grupos cientficos. Los documentos web eran
muy sencillos y la mayora de navegadores corran en modo texto, unos pocos eran grficos como el escrito por Berners-Lee
en una NeXT. Desde 1992 muchos navegadores se construyeron, pero el ms influyente de todos fue Mosaic.
En 1993 el National Center for Supercomputing Applications (NCSA) de la University of Illinois en Urbana-Champaign
(UIUC), introdujo el navegador grfico Mosaic, como un proyecto de investigacin. NCSA licitaba su cdigo fuente a otras
compaas para que crearan sus propios navegadores, incluso comerciales. Tras de graduarse, el lder del proyecto Mosaic,
Marc Andreessen, fundara la compaa Netscape en 1994, para comercializar su navegador Netscape Navigator, el cual
corra transparentemente entre diversos sistemas operativos. Era gratis para uso no comercial, por lo que se convirti en el
navegador ms usado del mundo.
En 1994 Berners-Lee funda el World Wide Web Consortium (W3C) en el Instituto Tecnolgico de Massachusetts (MIT,
Massachusetts Institute of Technology), apoyado por varias instituciones y empresas con el fin de crear estndares y
recomendaciones para mejorar la calidad de la web.
1.1.1 La primera guerra de navegadores

En 1995 Microsoft incluye Internet Explorer 1.0 en Windows 95, basado en cdigo fuente de NCSA Mosaic. La versin 2.0
fue gratuita incluso para uso comercial. Lentamente Internet Explorer va tomando popularidad y mercado de Netscape, lo
que generara la primera guerra de navegadores.
Los ataques entre estos dos navegadores consistan en la inclusin de funcionalidades novedosas para atraer tanto usuarios
como autores de sitios web. Por ejemplo, Netscape desarroll JavaScript a finales de 1995, que un ao ms tarde sera
imitado por el JScript de Microsoft, en la versin 3 de Internet Explorer. En esa versin particular, Microsoft incluy una
parcial implementacin de las hojas de estilo en cascada (CSS, Cascading Style Sheets) sugeridas por el W3C pero an no
estandarizadas.
En 1997 Netscape fusion su Netscape Navigator con otro conjunto de programas para correo electrnico, composicin web,
calendario, etc. Al suite se le llam Netscape Communicator, nombre que servira para confusiones. Microsoft integr
Internet Explorer 4 con Windows y desalent desde el sistema operativo el uso de cualquier otro navegador. Netscape no
compiti contra esto, ni tena sentido. Desde 1998 el 80% del mercado que tena Netscape pas a sumar el 96% que tena
Internet Explorer 5 en el 2002. La guerra de los navegadores haba finalizado y tambin el rpido tren de innovaciones; tan
evidente que Microsoft no volvera a hacer cambios significativos en su navegador desde el 2001 al 2006.
A inicios de 1998 Netscape libera el cdigo fuente de Netscape Communicator 4.0 en el proyecto Mozilla. La comunidad
descartara luego dicho cdigo debido a su complejidad, poca modularizacin, al gran volumen de pulgas y otros
inconvenientes; y empez la elaboracin de un nuevo motor de navegador (web browser engine) hecho desde cero, al cual
se le llam, Gecko, y sera el motor de "rendering" de Firefox y el nuevo Netscape Communicator, que finalmente sera
descontinuado a inicios del 2008.
1.1.2 El proceso de estandarizacin

La guerra de navegadores (aproximadamente de 1995 a 1998) tambin tuvo consecuencias muy negativas. Ambos,
Netscape Navigator e Internet Explorer, ofrecan caractersticas novedosas incompatibles entre s, es decir, dialectos de
22/09/2015 11:52 a. m.
5 de 99
HTML distintos que provocaron que los autores de millones de pginas tuvieran que escoger por uno o el otro. Era comn
ver imgenes indicando que el sitio se vea mejor con un navegador particular, incluso hasta de una versin especfica.
Mientras tanto el proceso de estandarizacin avanzaba lentamente. En junio de 1993 el Consorcio Web (W3C) propone
varios borradores de estandarizacin y en noviembre de 1995, la Internet Engineering Task Force (IETF) aprueba el HTML
2.0 que luego se convertira en estndar internacional en 1997. El W3C propone HTML 3.0 en abril de 1995 pero la IETF no
realiza ninguna accin. Los navegadores tomarn luego ideas de estas iniciativas en proceso y las implementarn a su
manera para atraer usuarios.
A inicios de 1997 la IETF traslada la responsabilidad de estandarizacin al W3C, quien publicara recomendaciones con una
eficiencia mayor. Se publica el HTML 3.2 adoptando etiquetas y atributos de marcado visual de Netscape (como <b> y
<font>). A final del mismo ao, el W3C presenta el trabajo de estandarizacin ms notorio hasta la fecha, conocido como
HTML 4.0. Un esfuerzo que considera las extensiones derivadas de la guerra de navegadores y las races del HTML. En ella,
las etiquetas de marcado visual seran desaprobadas ("deprecated") en favor de CSS; pero su uso se haba difundido tanto
que el W3C decidi generar tres variaciones del HTML 4.0:
HTML 4.0 Strict. Prohbe elementos "deprecated".
HTML 4.0 Transitional. Permite elementos "deprecated".
HTML 4.0 Frameset. Permite construir pginas basadas en "frames", con los elementos <frameset> y <frame>.
Dos aos despus, a finales de 1999, se le hara una ligera modificacin al estndar HTML 4.01, cuya variacin estricta
(HTML 4.01 Strict) sera adoptado como estndar internacional (ISO/EIC 15445:2000), suplantando la versin 2.0 de 1997.
Tras ello, el trabajo de estandarizacin dejara de lado al HTML para concentrarse en el XHTML.
En febrero de 1998 el W3C public el estndar XML (Extensible Markup Language). En enero de 2000 se reformul HTML
4.01 como una aplicacin XML en lo que conoce como XHTML 1.0. Una actualizacin XHTML 1.1 se emiti como
recomendacin en mayo de 2001 que permite modularizar el HTML para necesidades especficas, las ms sobresalientes han
sido XHTML-Basic que incluye el conjunto mnimo de caractersticas que cualquier navegador debe soportar, incluso de
dispositivos mviles y XHTML-MP (mobile profile) con controles aptos para dispositivos mviles.
Entre agosto de 2002 y julio de 2006, el W3C trabaj en XHTML 2.0 que slo alcanz el nivel de notas y no de
recomendacin. En el 2008 el W3C considerara como base del futuro (X)HTML[1] 5.0, un borrador llamado (X)HTML5
desarrollado por un grupo de interesados, compuesto principalmente por fabricantes de navegadores alternativos (Mozilla
Foundation, Opera Software y Apple), ajenos al W3C, que se autodenominaron WHATWG (Web Hypertext Application
Technology Working Group). A diferencia de XHTML 2.0, (X)HTML5 estara ms centrado en el desarrollo de aplicaciones
web y no en la especificacin de documentos.
1.1.3 La segunda guerra de navegadores

Los navegadores en guerra tuvieron equipos de desarrollo enfocados en agregar funcionalidad no estandarizada tan rpido
como fuese posible, con poco control de calidad. Esto llev a que ambos navegadores, Netscape Navigator e Internet
Explorer no se apegaran a los estndares, fuesen "pulgosos" e inseguros. Pese de hacerlo pblico, el cdigo fuente de
Netscape fue descartado por la Fundacin Mozilla. Por su parte, Microsoft tras ganar la guerra, mantuvo su navegador en el
letargo por varios aos.
Un navegador no mencionado es Opera. Inici en 1994 como un proyecto de investigacin de la compaa noruega Telenor y
disponible al pblico desde 1996 en forma comercial o gratuito con publicidad; hasta la versin 8.5 en setiembre de 2005,
en que se distribuye sin costo ni publicidad alguna. Se caracteriz por ser el primer navegador en apegarse a los
estndares, influir activamente en ellos, y en la inclusin de caractersticas amigables para el usuario, por ejemplo, el uso
de "tabs", "mouse gestures", velocidad, seguridad y correr en dispositivos mviles.
La Fundacin Mozilla sigui estas caractersticas en su navegador gratuito Firefox. Con el objetivo de crear nuevos
estndares web que seran sometidos al W3C para aprobacin, la Fundacin Mozilla y Opera Software fundaron en el 2004
el grupo de trabajo WHATWG (Web Hypertext Application Technology Working Group), al cual se unira Apple
posteriormente.
Las primeras versiones del navegador de Mozilla aparecieron a finales del 2002, con nombres que despus seran cambiados
por conflictos con otras compaas, hasta quedar de Firefox, el cual se liber en noviembre de 2004. Desde el 2003 Mozilla
Firefox empez lentamente a atraer usuarios de Internet Explorer, en especial por sus problemas y la falta de iniciativa de
Microsoft por corregirlos.
Microsoft reaccion hasta octubre de 2006 con Internet Explorer 7, imitando caractersticas de Opera y Firefox. Esto no
logr detener la creciente tasa de usuarios que seguan cambiando a Firefox. Por su parte, una semana despus, Mozilla
liber Firefox 2.0 con mejoras de usabilidad y seguridad, lo que pondra en evidencia la segunda guerra de navegadores.
Esta vez luchando por proveer mayor facilidad de uso y apego a los estndares.
En el 2003 Microsoft anunci que descontinuara Internet Explorer for Mac. Apple inici el trabajo de crear un navegador
que lo reemplazara, ya que era su navegador por defecto, y a partir del motor KHtml usado en Konkeror de KDE gener
WebKit y el navegador Safari que apareci en el mismo ao.
En el 2008 Google libera el navegador Chrome basado en WebKit. La presencia de estos nuevos navegadores siguen
reduciendo el nmero de usuarios de Internet Explorer [2]. Microsoft reacciona con la versin 8 en marzo de 2009 imitando
funcionalidades e incrementando el apego a los estndares. Esta guerra se mantiene hasta el presente, donde cada
fabricante libera versiones con frecuencia siguiendo la misma estrategia.
22/09/2015 11:52 a. m.
6 de 99
Aunque no es un estndar an, la segunda guerra ha llevado a la mayora de navegadores a implementar (X)HTML 5.0 o al
menos las secciones ms estables de sus borradores.
1.1.4 Notas
[1]
En este documento se usarn los trminos HTML y XHTML para referirse a cada notacin por separado, o (X)HTML
cuando algo aplique a ambas por igual.
[2]
De acuerdo a la estadsticas del W3C en http://www.w3schools.com/browsers/browsers_stats.asp
1.2 Arquitectura web

Un sitio web es un mecanismo de comunicacin digital donde uno o ms visitantes pueden obtener o proveer informacin
de inters, y est basado en la arquitectura web, un modelo cliente-servidor cuya forma ms simple se aprecia en la Figura
1.1 y se explica a continuacin en forma muy general.
HTTP
Navegador
Cliente 1
Archivos
HTML
Servidor
web
HTTP
Servidor
Navegador
Cliente 2
Figura 1.1. Arquitectura web simple
El autor que quiera publicar un sitio web, construye un conjunto de pginas web en notacin (X)HTML junto con imgenes,
estilos y otros medios, y las almacena en una computadora que est siempre conectada a Internet, a la cual se le llama el
servidor. Un programa especial, llamado servidor web, el cual tiene acceso de lectura a dichas pginas, estar siempre en
esta computadora escuchando por un puerto TCP (Transmission Control Protocol), normalmente el 80 u 8080.
Un lector que quiera visitar el sitio debe conocer la direccin del servidor, es decir su nmero IP, ya sea introducindolo
directamente o a travs del servicio de nombres de dominio (DNS, Domain Name Service) y el puerto donde el servidor web
est escuchando. El lector carga un programa especial en su computadora llamado navegador web (web browser) e
ingresa en l la direccin del servidor y el puerto, la cual respeta una notacin estndar conocida como localizador uniforme
de recursos (URL). El navegador intentar establecer una conexin TCP con el servidor al puerto indicado o al 80 si se
omite. El servidor web aceptar la conexin. A partir de este momento el cliente y el servidor pueden comunicarse
libremente, pero para que ambos puedan entenderse se necesita un idioma comn: el protocolo de transferencia de
hipertexto (HTTP, HyperText Transfer Protocol).
El protocolo HTTP establece que el cliente, tambin conocido como user agent, siempre hace solicitudes de recursos para
mostrarlos al usuario, y el servidor responde a ellas, no el recproco. Las solicitudes del cliente y las respuestas del servidor
estn codificadas como se ver luego.
En lo que resta de esta seccin se explicarn los conceptos que componen la arquitectura web con ms detalle y en la
siguiente seccin, el proceso tpico en que un autor construye su sitio web y lo hace pblico para que los visitantes
interaccionen con l.
1.2.1 El servidor web

Un servidor web es un programa cuya ejecucin es persistente, a veces llamado servicio o demonio, en un equipo conectado
a Internet, esperando conexiones de clientes usualmente por el puerto 80. Una vez establecida una conexin, el cliente
solicita repetitivamente recursos al servidor mediante el protocolo HTTP y ste responde a cada una de ellas. El trmino
servidor web tambin se usa para hacer referencia al hardware que corre este programa, pero en este documento se usar
slo para referirse al software.
22/09/2015 11:52 a. m.
7 de 99
Cualquiera puede implementar un servidor web escribiendo un programa que espere conexiones en algn puerto TCP y
hable por l HTTP. Sin embargo, para la mayora de situaciones, es apremiante utilizar un servidor web existente. La Tabla
1.1 lista los ms populares en la actualidad.
Nombre
Fabricante
Licencia
Detalles
Apache HTTP
Server
Apache
Libre (Apache
License)
Rico en caractersticas y extensiones. Corre en la mayora de sistemas operativos.

Sirve aproximadamente ms del 60% de las pginas web del mundo.
Internet
Information
Services (IIS)
Microsoft
Propietario /
Comercial
Slo se ejecuta en Windows Server. Sirve aproximadamente 20% de las pginas

web del mundo
nginx
Igor
Sysoev
Libre (BSD)
Naci como una alternativa de Apache caracterizada por el alto rendimiento y bajo
consumo de recursos. Corre en la mayora de sistemas operativos. Sirve
aproximadamente 8% de las pginas web del mundo.
Google Web Server

(GWS)
Google
Uso interno
Sirve aproximadamente 5% de las pginas web del mundo.
lighttpd
lighttpd
Libre (BSD)
Diseado para ambientes de muy alto rendimiento donde la velocidad es un factor

crtico. Es limitado en cuanto a funcionalidad. Sirve aproximadamente un 1% de las
pginas web del mundo.
Tabla 1.1. Servidores web ms populares en la actualidad de acuerdo a la encuesta Netcraft.
1.2.2 El cliente web o navegador web

Un navegador web, cliente web, o agente usuario ("user agent"), es un software que permite obtener, presentar,
recorrer e interaccionar con recursos disponibles en la web. De los componentes de la arquitectura web, es el ms conocido
por los usuarios, ya que interaccionan directamente con l.
Un navegador web es una pieza de software compleja, por lo que usualmente est dividida en al menos dos mdulos: el
motor y la interfaz. El motor del navegador web ("web browser engine" o "rendering engine"), se encarga de analizar
contenido ((X)HTML, imgenes, etc.), aplicarle estilos, modificar lo anterior con programas de JavaScript y presentar los
resultados en la pantalla u otro medio. Por su parte, la interfaz del navegador web provee una barra de direcciones,
marcadores, botones de navegacin y otros controles que usan al motor del navegador web internamente para facilitar al
usuario su interaccin.
La separacin entre el motor y la interfaz tiene una importante ventaja. El motor se distribuye en forma de biblioteca y
permite que cualquier otra aplicacin pueda usarlo. De esta forma, clientes de correo, aplicaciones de ayuda o cualquier
software que usted quiera programar, puede manipular documentos web. La Tabla 1.2 muestra los motores de "rendereo"
web ms populares en la actualidad y los navegadores que los usan.
Nombre
Fabricante
Licencia
Libre (L/GPL)
Navegadores
Gecko
Mozilla Project
Firefox
WebKit
Apple, KDE, Google, ... Libre (LGPL/BSD) Chrome, Safari
Trident
Microsoft
Propietario
Internet Explorer
Presto
Opera Software
Propietario
Opera
Tabla 1.2. Motores de navegador web ms populares en la actualidad.
1.2.3 El localizador uniforme de recursos URL

Un servidor web provee recursos en los que puede estar interesado un cliente. Todo recurso transferible entre el servidor y
el cliente, debe estar identificado de forma nica en el mundo mediante un localizador uniforme de recurso (URL, Uniform
Resource Locator), que es una direccin junto con alguna informacin adicional para acceder al recurso. La sintaxis de un
URL es
esquema://username:password@servidor:puerto/ruta?query_string#id_fragmento
http://www.amazon.com/
http://www.w3.org/TR/html401/struct/tables.html#edef-CAPTION
http://acme.co.cr:8080/index.php
https://24.168.39.221/cgi-bin/book?id=4596098&action=remove
ftp://msoto:w33n8rf1@down.antivirus.net/current/setup.exe
Las partes de un URL son las siguientes:

1. Esquema. Tambin llamado Protocolo. Indica el propsito y la sintaxis del resto del URL. Entre muchos se pueden
citar: http, https, ftp y mailto. Por ejemplo, al procesar el URL http://www.amazon.com/, un navegador har un
peticin HTTP al servidor www.amazon.com en el puerto 80. Al procesar el URL mailto:chema@suizacentroamericana.cr,
lanzar un cliente de correo con un mensaje nuevo dirigido a chema@suizacentroamericana.cr.
2. Servidor. Es la direccin IP o el nombre de dominio si tiene registrado uno en el servicio de nombres de dominio
(DNS, Domain Name Service). Permite identificar al servidor que provee el recurso, por ejemplo drupal.org. Dado a
22/09/2015 11:52 a. m.
8 de 99
que DNS no es sensitivo a maysculas ni minsculas, da lo mismo acceder a DRUPAL.org, por ejemplo.
3. Puerto. Indica el puerto que ser usado en la conexin TCP. Por ejemplo, http://myserver.com:10000/ har que el
navegador establezca una conexin HTTP en el puerto 10000, probablemente para administracin del servidor. Si se
omite el puerto en el URL se asumir el por defecto para el esquema usado. Por ejemplo, para http es 80, para https
es 443 y para ftp es 21. Una lista de protocolos y sus puertos por defectos puede a conveniencia consultarse en la
Wikipedia.
4. Ruta. Contiene la ruta para encontrar el recurso. Puede ser relativa al sistema de archivos del servidor o un "alias"
que ayude a especificar el recurso, por ejemplo, http://mibibl.net/revistas/acm.png. Es muy probable que sea
sensitiva a maysculas si el sistema de archivos del servidor lo es tambin.
5. Parmetros. Si el recurso es generado por una aplicacin en el servidor web, a esta se le pueden enviar parmetros
en forma de parejas parametro=valor y separadas por ampersands (&) si son varias parejas, por ejemplo,
https://mibibl.net/revista.php?id=23091&action=devolucion&user=chema. A esta lista de parmetros se le suele
llamar "query string".
6. Identificador de fragmento. Es un nombre que sirve para identificar una parte (fragmento) o un punto particular de
un documento web. Cuando se especifica un identificador de fragmento en un URL, provoca que el navegador cargue
el documento y automticamente se desplace ("scroll") hasta el fragmento en cuestin. Por ejemplo,
http://misitio.co.cr/docs/tesis.html#Cap03.
7. Usuario y contrasea. Si para acceder al recurso se necesita que el visitante se autentique, algunos protocolos
permiten indicar las credenciales en el URL mismo. Es poco comn y una prctica no recomendada incluir contraseas,
ya que el URL normalmente es pblico y carece de seguridad. Ejemplo, ftp://mmortadela@sjmuni.go.cr/vaca/mu.pdf.
1.2.4 El protocolo de transferencia de hipertexto HTTP

La arquitectura web establece que un servidor web provee al mundo recursos identificados de forma nica con URLs; un
cliente web o navegador web interesado solicita estos recursos y el servidor responde con ellos. Las convenciones usadas en
el trasiego de estos recursos entre el cliente y servidor las estalece el protocolo de transferencia de hipertexto (HTTP,
Hypertext Transfer Protocol).
Cuando el cliente web necesita un recurso, emite un mensaje de solicitud HTTP (HTTP request) al servidor. El servidor web
carga el recurso desde el disco, una base de datos, un programa o cualquier otra fuente, y responde con una respuesta
HTTP (HTTP response).
Una sesin HTTP (HTTP session), es una secuencia de solicitudes-respuestas entre el navegador y el servidor web. En la
versin HTTP/1.0 de 1996 se establece una sesin por cada transferencia. Es decir, se inicia la sesin, el cliente solicita un
recurso, el servidor responde y se cierra la sesin inmediatamente. Para transferir un nuevo recurso se debe iniciar otra
sesin HTTP. En la versin HTTP/1.1 de 1999 la sesin permite un nmero arbitrario de transferencias lo que agiliza la
comunicacin entre ambas partes.
1.2.4.1 El mensaje HTTP
En la Figura 1.2 se puede ver que la estructura de los mensajes de solicitud y respuesta HTTP es la misma, pero vara el
contenido de los primeros dos campos.
Request line
Status line
HTTP Request header
HTTP Response header
empty line
empty line
Message body
Message body
HTTP Request message
HTTP Response message

Figura 1.2. Estructura de un mensaje HTTP
La Figura 1.3 muestra dos ejemplos de mensajes HTTP. Los cambios de lnea son importantes por lo que se muestran en
rojo. En las siguientes secciones se explica cada uno de los campos que conforman los mensajes HTTP.
GET /cursos/web/cest.html HTTP/1.1
HTTP/1.1 200 OK
Host: www.ejemplo.com
User-Agent: Chrome/13 (Linux)
Server: Apache/2.2.9 (Debian)

Content-Type: text/html; charset=utf-8
<html><head>
<title>Carta al estudiante</title></head>
<body>...</body></html>
HTTP Request message
HTTP Response message

Figura 1.3. Ejemplo de dos mensajes HTTP
22/09/2015 11:52 a. m.
9 de 99
Los navegadores slo muestran el contenido del cuerpo de los mensajes al usuario, ocultando los dos primeros campos de
los mensajes usados en la negociacin con el servidor web. La extensin HTTP Headers para el navegador Chrome, y Live
HTTP Headers para Firefox, permiten al usuario visualizar y estudiar los campos ocultos de los mensajes que se
intercambiaron entre el cliente y el servidor durante la carga de una pgina.
1.2.4.2 Request line
En la primera lnea del mensaje de solicitud HTTP, llamada Request line, el cliente web indica al servidor el recurso de
inters (un URL) y la accin que desea el servidor tome con dicho recurso. La sintaxis del Request line es:
METHOD URL HTTP_version
El protocolo HTTP define 9 acciones que un cliente web puede solicitar al servidor, reciben el nombre de Request methods
y se listan en la Tabla 1.3. El protocolo HTTP indica que todo servidor web debe almenos implementar GET y HEAD, e
idealmente OPTIONS.
Mtodo
Descripcin
GET
Solicita una copia completa del recurso cuya identificacin esta dada por el URL que le sigue. A travs de directivas en el
encabezado (el campo que sigue en el mensaje) se pueden hacer solicitudes condicionales (Conditional GET), por ejemplo,
obtener una copia del recurso slo si ha cambiado a partir de una fecha, o una solicitud parcial (Partial GET), por ejemplo,
obtener slo un segmento del recurso. Estos detalles se explican en el RFC-2616.
HEAD
Es idntico al mtodo GET excepto en que el servidor web no debe retornar un Message body en el mensaje de respuesta
HTTP. Esto permite al cliente obtener metadatos de un recurso, como para saber si ha cambiado en el servidor u otros fines.
OPTIONS
Retorna los mtodos HTTP que el servidor soporta para un recurso dado (con un URL) o en general por el servidor web
mismo (con un ' *' en lugar de un URL).
POST
Enva datos, normalmente ingresados en un formulario web, en el campo Message body del mensaje de solicitud HTTP, al
recurso identificado por el URL, normalmente un programa en el servidor que procesar o almacenar dichos datos.
PUT
"Sube" (upload) un recurso identificiado por el URL cuyo contenido es enviado en el Message body al servidor, el cual
reemplaza el recurso anterior si existe. Se diferencia de POST en la semntica del URL. En POST el URL especifica una
aplicacin que recibe los datos y los procesa; mientras que en PUT el URL es la identificacin del recurso mismo.
PATCH
Sirve para aplicarle modificaciones parciales a un recurso.
DELETE
Solicita al servidor eliminar el recurso identificado por el URL. Normalmente est deshabilitado por defecto en la mayora de
servidores web.
TRACE
Permite rastrear servidores intermedios que procesan la solicitud HTTP. Esto es til para estudiar el comportamiento de
servidores proxy en especial si implementan algn cach.
CONNECT Transforma la solicitud en una conexin a un tnel TCP/IP para facilitar la comunicacin segura (HTTPS) a travs de un
proxy HTTP no encriptado.
Tabla 1.3. HTTP Request Methods.
1.2.4.3 Request header

El campo de encabezado de la solicitud HTTP (HTTP Request Header) permite al cliente proveer informacin adicional sobre
la peticin o sobre el cliente mismo al servidor. En este campo se escriben parejas Atributo=Valor. El estndar HTTP define
unos 19 atributos de los cuales slo uno es obligatorio: Host. Los atributos se pueden extender mientras los agentes (el
servidor y el navegador) estn de acuerdo en ellos. La Tabla 1.4 muestra algunos de estos atributos.
Campo
Descripcin
Accept:
Permite al cliente especificar los tipos de medios (MIME types) que son aceptables como respuesta. Ej.: Accept:
text/plain; text/html; application/html+xml . Un asterisco indica que todas las categoras o todos los medios
son aceptables (*/* se asume si no se especifica un atributo Accept). Un prmetro q=valor indica la calidad
aceptable, donde valor es un real entre 0.0 y 1.0; til especialmente en vdeo o ciertos formatos. Si el servidor no puede
responder con un formato aceptable, debe generar un mensaje con el status code 406 NOT ACCEPTABLE.
Host:
Permite especificar el servidor y el puerto que tiene el recurso solicitado, ya que la primera lnea (Request line) no incluye
estos valores y se necesitan para desambiguar en caso de servidores proxy u otros intermediarios. Es el nico atributo
obligatorio en HTTP/1.1. Ej.: Host: www.miservidor.com:8080 .
Referer:
Permite especificar el URL del recurso del cual se obtuvo el URL solicitado al servidor. Debera ser Referrer:, pero en el
estndar aparece como Referer:.
User
Agent:
Contiene informacin sobre el navegador o agente de usuario que solicita el recurso. Consta de varias parejas
mdulo/valor separadas por espacios y en orden de importancia. Todos los agentes de usuario deben proveer este
atributo. Ej.: User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:5.0.1) Gecko/20100101
Firefox/5.0.1.
Tabla 1.4. Campos estndar en el HTTP Request header.
1.2.4.4 Emtpy line

Es un cambio de lnea compuesto nada ms de dos caracteres: retorno de carro y avance de lnea (CRLF, carriage-return y
line-feed). En notacin C se escribe como "\r\n". Aunque algunos servidores web aceptan un LF simple ("\n"). Esta lnea no
debe tener ningn otro espacio en blanco.
1.2.4.5 Message body
Este es el nico campo opcional del mensaje HTTP y su contenido vara dependiendo de la naturaleza del mensaje. Tambin
es el nico que puede transportar informacin binaria (todos los dems son de texto).
22/09/2015 11:52 a. m.
10 de 99
1.2.4.6 Status line

En la lnea Status line del mensaje de respuesta HTTP, el servidor indica al cliente web, un cdigo y una explicacin textual
como resultado de procesar la solicitud previamente hecha. La sintaxis del Status line es:
HTTP_version status_code reason_phrase
El status_code es un nmero y el reason_phrase es un texto corto escogido por el servidor web y comprensible para seres
humanos; el navegador no necesita analizarlo. El status_code es entero de tres dgitos, donde el primer dgito indica una de
las cinco clases de respuesta definidas por el estndar HTTP:
1. Informacin. La solicitud fue recibida y est siendo procesada.
2. xito. La solicitud fue recibida, entendida, aceptada y procesada exitosamente.
3. Redireccin. Se necesitan ms acciones del cliente para completar la solicitud.
4. Error del cliente. La solicitud es incorrecta por error de sintaxis o no se puede realizar.
5. Error del servidor. El servidor fall al procesar una solicitud aparentemente vlida.
Por ejemplo, el error 404 NOT FOUND indica que el cliente especific un URL de un recurso que no existe en el servidor. El
RFC 2616 de HTTP/1.1 define 41 status_codes, algunos de los ms comunes son los siguientes:
200 OK. La solicitud HTTP fue exitosa. Por ejemplo, si la solicitud fue un GET, la respuesta contendr el recurso
solicitado en el campo Message body; si la solicitud fue un POST, los datos enviados por el cliente fueron procesados
exitosamente.
204 NOT CONTENT. El servidor proces la solicitud exitosamente, pero no es necesario generar un recurso como
respuesta y por ende el campo Message body est vaco.
206 PARTIAL CONTENT. El servidor responde con un fragmento del recurso solicitado, tal como fue pedido por el cliente
web. Esto es de utilidad para continuar descargando un recurso incompleto o permitir varias descargas simultneas en
partes diferentes del mismo recurso. Esta funcionalidad es ampliamente explotada por los administradores de
descargas (download managers).
301 MOVED PERMANENTLY. El recurso ha sido movido a otro URL y el cliente debe obtener el nuevo recurso con una
nueva solicitud.
302 FOUND. No debera usarse. Normalmente se quiere decir 303.
303 SEE OTHER. El recurso est disponible en otro URL, el cual el cliente debe obtener con una solicitud nueva. Puede
usarse para evitar sobrecargar un servidor web o redireccionar algn recurso.

400 BAD REQUEST. La sintaxis de la solicitud es incorrecta.
401 UNAUTHORIZED. El cliente intenta acceder a un recurso que est protegido y no ha provisto credenciales o las ha
fallado. La respuesta incluye un reto al usuario, el cual debe proveer un nombre de usuario y contrasea.
403 FORBIDDEN. La solicitud es vlida pero el servidor se niega a completarla, por ejemplo, tras varios intentos el
usuario falla el proceso de autenticacin.

404 NOT FOUND. El recurso no se encuentra pero podra estarlo en el futuro.
410 GONE. El recurso no se encuentra y nunca ms lo har. Es til para avisar a los motores de bsqueda que eliminen
el recurso de sus ndices.

500 INTERNAL SERVER ERROR. Mensaje genrico, para cuando no hay uno 5XX ms especfico.
501 NOT IMPLEMENTED. El request method o alguna caracterstica es vlida ante el estndar, pero el servidor web no lo
implementa.
503 SERVICE UNAVAILABLE. El servidor web no est disponible por sobrecarga o en mantenimiento. Normalmente una
condicin temporal.
Para revisar la lista completa de cdigos de estado HTTP con los que puede responder un servidor, consltese el RFC 2616.
1.2.4.7 Response header
El campo encabezado de respuesta HTTP (HTTP Response Header) permite al servidor enviar informacin adicional sobre
la respuesta al agente de usuario. Utilizan la misma notacin que los del campo encabezado de solicitud HTTP y tambin se
pueden extender mientras los agentes estn de acuerdo en ellos. Algunos se explican en la siguiente tabla.
Campo
Descripcin
ETag:
Contraccin de "Entity Tag". Es una cadena que permite identificar el estado del recurso, de tal forma que si se
hace una modificacin del recurso en el servidor, su ETag variar. Esto permite al cliente saber si su copia en el
cach est actualizada o ha variado en el servidor. Ej.: Etag: "239876f-4b8c-429fe67474a80" .
Location:
Permite al servidor indicarle al agente de usuario que el recurso solicitado ha sido movido a un nuevo URL. El
agente usuario debe entonces solicitar el nuevo recurso, lo que se conoce como una "redireccin".
Server:
Contiene informacin sobre el servidor web que genera la respuesta. Consta de varias parejas mdulo/valor
en orden de importancia para identificar al servidor. Ej.: Server: Apache/2.2.9 (Debian)
PHP/5.2.17-0.dotdeb.0.
22/09/2015 11:52 a. m.
11 de 99
Campo
Descripcin
Solicita al usuario autenticarse para acceder a un recurso en una respuesta 401 UNAUTHORIZED. Es seguido
WWW-Authenticate:
por el nmero de intentos permitidos. Ej.: WWW-Authenticate: 3.
Tabla 1.5. Campos estndar en el HTTP Response header.
1.2.5 Ejemplo de una sesin HTTP

Supngase que el sitio web ubicado en www.ejemplo.com est en construccin y tiene slo dos recursos, un index.html y una
imagen img/ucr.png. El contenido del recurso index.html se encuentra en el Listado 1.1.
1. <html>
2.
<head><title>Desarrollo de aplicaciones web</title></head>
3.
<body>
4.
<img src="img/ucr.png" alt="Escudo UCR" />
5.
<img src="img/ecci.png" alt="Escudo ECCI" />
6.
<h1>Presentacin</h1>
7.
<p>Este curso introduce el estudiante en el desarrollo[...]</p>
8.
</body>
9. </html>
Listado 1.1. Contenido de una pgina web hipottica
Un visitante accede con su navegador a www.ejemplo.com. La interaccin entre el navegador web y el servidor web se aprecia
en el diagrama de secuencia de la Figura 1.4.
ind ex.html
O pera
Servidor web
img/ucr.png
Cliente
www.ejemplo.com
GET / HTTP/1.1
Host: www.ejemplo.c om
User-Agent: Opera/11.5
HTTP/1.1 200 OK
Content-type: text/html
Content-length: 296
Server: Apac he/2.2.19
<html><head><title>Desarrollo de
aplicaciones web</title>[...]</html>
GET /img/ucr.png HTTP/1.1

HTTP/1.1 200 OK
Content-type: image/png
Content-length: 46236
Server: Apac he/2.2.19
<89>PNG^Z^@^@^@^MIHDR^@^
@^@<A1>^@^@^@<A8>^H^F[...]
GET /img/ecci.png HTTP/1.1

HTTP/1.1 404 Not Found

Content-type: text/html
Content-length: 117
Server: Apache/2.2.19
<html><head><title>404 Not Found </title>
</head><body>The requested URL was not
found on this server</body></html>
Figura 1.4. Diagrama de secuencia de una sesin HTTP
Al escribir la direccin http://www.ejemplo.com/ el navegador contacta al "default gateway" que tenga configurado el
sistema operativo de la mquina local y le pide que le resuelva la direccin IP del dominio www.ejemplo.com. Al obtener la
direccin IP, el navegador establece una conexin TCP en el puerto 80 con www.ejemplo.com y ste acepta. A partir de este
momento se ha establecido una sesin HTTP; el navegador y el servidor web pueden intercambiar mensajes HTTP.
El navegador solicita el recurso que el usuario indic en el URL, en este caso es "/". Ensambla un mensaje HTTP Request
con el mtodo GET, escribe algunos campos de encabezado (HTTP Request Header fields) y un cambio de lnea. Lo enva al
servidor.
El servidor recibe la solicitud HTTP y de acuerdo a su configuracin local, obtiene que el recurso "/" equivale al archivo
index.html. Ensambla una respuesta HTTP (HTTP Response message) con el status code 200 indicando que el recurso fue
encontrado y la solicitud se proces exitosamente. Agrega unos campos de encabezado de respuesta (HTTP Response
22/09/2015 11:52 a. m.
12 de 99
Header fields) y anexa el contenido del recurso index.html literalmente en el campo Message body. Lo enva al cliente.
El navegador recibe el mensaje de respuesta HTTP y viendo que la solicitud fue exitosa, extrae el recurso index.html guiado
por los campos de encabezado HTTP. Almacena el recurso en su cach e inicia el anlisis (parsing) y despliegue (rendering)
del recurso en la ventana del usuario. Al analizar la lnea 4 del index.html, el navegador se percata de que necesita otro
recurso para presentarlo en la pgina, y ensambla otra solicitud al servidor, de la misma forma que hizo con index.html,
pero esta vez por img/ucr.png.
El servidor web recibe la nueva solicitud y la procesa de la misma forma que hizo previamente con index.html. El recurso
tambin existe. La nica diferencia es que img/ucr.png es un recurso binario, de ah la importancia de los campos del
encabezado que ayudarn al navegador a procesar el recurso adecuadamente. El servidor enva el mensaje de respuesta.
El navegador recibe el mensaje y al ver que es exitoso, agrega el recurso en su cach y guiado por los campos del
encabezado del mensaje, interpreta el contenido binario como una imagen PNG y la coloca en su lugar dentro de la
ventana. Al analizar la lnea 5 del documento index.html (Listado 1.1), se percata de que necesita tambin el recurso
img/ecci.png. Ensambla una nueva solicitud GET y la enva al servidor como hizo anteriormente.
El servidor web recibe la solicitud y trata de localizar el recurso. Al notar que no se encuentra en su sistema de archivos,
construye una respuesta HTTP con status code 404 Not Found, indicando que el agente del usuario solicit un recurso
errneo. En el cuerpo del mensaje agrega un texto ms explicativo y en los campos del encabezado HTTP detalles de cmo
interpretar este texto. Lo enva al cliente.
El navegador recibe el mensaje 404 Not Found. Al no obtener un recurso para desplegar (render), opta por dibujar un
rectngulo genrico indicando la ausencia y rellena con el texto alternativo que se encuentra en el documento index.html.
Contina de esta forma analizando y desplegando el recurso index.html hasta alcanzar su final.
1.3 Proceso de construccin del sitio web

Al igual que cualquier otro software, la construccin de un sitio web sigue un proceso de desarrollo, con las fases conocidas:
anlisis para saber qu necesita el cliente; diseo del sitio; implementacin de las aplicaciones web; pruebas (testing) de las
aplicaciones web; mantenimiento del sitio; etc.
Se debe tener muy claro que el equipo de desarrollo de un sitio web, o simplemente el equipo web, es una entidad
multidisciplinaria y no slo uno o ms informticos. Este equipo puede estar conformado por los siguientes profesionales.
Informticos. Administran los servidores, el alojamiento, desarrollan las aplicaciones web, capacitan a los usuarios,
etc.
Diseadores grficos. Definen la apariencia uniforme del sitio, as como todas las imgenes a utilizar.
Narradores. Proveen el contenido textual a comunicar a los visitantes.
Otros profesionales.
1.3.1 Diseo del sitio web

La fase de anlisis pretende conocer el problema, es decir, obtener el propsito del sitio web, las necesidades que resuelve,
los visitantes que lo usarn, etc.
La fase de diseo pretende elaborar un modelo de sitio web que solucione las necesidades halladas en la fase de anlisis. En
esta etapa se decide qu tecnologas usar (pginas estticas, un administrador de contenido (CMS), programacin PHP,
bases de datos orientadas a documentos, etc.); la arquitectura de los componentes que intervendrn; la apariencia del sitio
22/09/2015 11:52 a. m.
13 de 99
(los estilos, si se usar una metfora, etc.), las convenciones (los nombres de los archivos, reglas de escritura del cdigo
fuente, etc.).
Sin un buen diseo el programador se sentar frente a la computadora sin saber cmo empezar el sitio web, ni qu
secciones tendr, ni cules de ellas tendrn pginas estticas o sern programadas, etc. La importancia de la fase de diseo
web es tal que libros completos atienden el tema, como "Web Style Guide" de Patrick J. Lynch y Sarah Horton, cuyo texto
completo se encuentra disponible en lnea gratuitamente.
1.3.2 Alojamiento web

Para publicar su sitio web el autor debe, adquirir una o ms computadoras; configurarlas como servidores web, bases de
datos u otros servicios; contratar suficiente ancho de banda; velar porque el servicio no se interrumpa pese a fallos
elctricos con UPS (Uninterruptible Power Supply) y generadores elctricos, o fallos en el proveedor de servicios de Internet
(ISP, Internet Service Provider) con redundancia de conexiones; fallos de hardware (como malfuncionamiento de un disco
duro) y otra serie de consideraciones para que el sitio est disponible al menos el 99% del tiempo.
Muchos autores prefieren relegar estas responsabilidades a una compaa que se especialice en brindar este tipo de servicio,
al cual se le conoce como alojamiento web (web hosting). La oferta de proveedores de alojamiento web es considerable, y
vara en precios desde lo gratuito hasta lo costoso.
Las compaas de alojamiento web proveen varios tipos de alojamiento. Un listado de tipos de alojamiento web puede verse
en http://en.wikipedia.org/wiki/Web_hosting_service, de los cuales sobresalen los siguientes.
1. Servidor compartido (shared hosting). Es la variante ms comn y la ms econmica. Su sitio web comparte el
mismo servidor web con otros sitios que estn alojados en el mismo servidor fsico. Usted no tiene derechos de
administracin, ya que un cambio afectara otros sitios.
2. Servidor dedicado virtual o servidor privado virtual (VPS, Virtual Private Host). Usted alquila una mquina
virtual la cual es de su uso exclusivo (privado) y por ende tiene permisos de administracin sobre ella, por lo que
puede reiniciarla o instalar paquetes. Varias mquinas virtuales comparten el mismo servidor fsico y por ende
compiten por sus recursos.
3. Servidor dedicado (dedicated hosting). Un servidor fsico es para su uso exclusivo, no compartido con nadie.
4. Alojamiento en la nube (cloud hosting). Su sitio web no estar en un nico servidor, sino distribuido en varios de
ellos. Esto tiene grandes ventajas, como la posibilidad de responder a una inmensa cantidad de visitantes
simultneamente, la facilidad de expansin y la capacidad de continuar activo pese a que un servidor fsico est cado.
El autor puede beneficiarse de los servicios de alojamiento web gratuitos. El sitio Free Web Hosting permite listarlos,
compararlos y buscar de acuerdo a necesidades especficas. Antes de decidirse por uno, el autor debera revisar los trminos
de servicio y otros detalles para evitar sorpresas.
1.3.3 Registro de dominio

La mayora de sitios web se conocen por un nombre de dominio como www.ejemplo.com. Cualquier persona puede registrar
un nombre de dominio, pero siempre tiene un costo econmico. En la actualidad es cercano a los 10 dlares anuales.
Cuando se registra un nombre de dominio, ste se convierte en pertenencia del autor y no de la compaa con que se hizo
el trmite. El autor puede entonces asociar el dominio con cualquier servidor web, sea propio, de un servicio de alojamiento
gratuito, o uno comercial. Sin embargo, la mayora de planes de alojamiento web comercial, incluyen el costo de registro y
renovacin del nombre de dominio.
1.3.4 Construccin del contenido

Una vez que se ha determinado la necesidad de un sitio web, se ha diseado una solucin, se tiene alojamiento gratuito o
no, y opcionalmente asociado a un nombre de dominio; el autor estar interesado en escribir el contenido del sitio web.
Quiz el mtodo ms rpido y eficiente de construir un sitio web sea a travs de pginas estticas. Es decir, un conjunto de
documentos (X)HTML escritos manualmente o con ayuda de algn software de diseo web, adems de otros recursos como
hojas de estilo, imgenes y programas en JavaScript. Esto puede ser conveniente para sitios web sencillos y pequeos.
Cuando un sitio web se torna extenso con cientos o miles de documentos web, intervenido por muchos usuarios que aportan
informacin, o que debe solventar necesidades especificas que slo con programacin puede atendenderse; se debe
convertir en un sitio web dinmico. En tal caso el autor debe escoger algn medio de programacin en el lado del
servidor, como CGI o algn lenguaje de "scripting" como PHP.
1.3.5 Promocin del sitio web

Una vez que el sitio web est publicado, el autor estar interesado en que la audiencia interaccione con l. Es difcil que
entre millones de sitios web en el mundo un visitante encuentre el de uno. No obstante, algunas estrategias pueden ayudar.
El principal medio en la actualidad para encontrar algo de inters en el web es a travs de un buscador, como Google o Bing.
22/09/2015 11:52 a. m.
14 de 99
Normalmente estos buscadores proveen algn mecanismo para solicitarles que consideren incluir un dominio en sus ndices.
Aunque el sitio web sea incluido en los ndices de los buscadores, es muy probable que no aparezca entre los primeros
resultados de una consulta. Esto se puede mejorar incrementando la "popularidad" del sitio. Los buscadores miden qu tan
popular es un recurso en proporcin a la cantidad de enlaces que encuentran hacia dicho recurso en otros dominios. Por
eso, enlazar el sitio web en diarios, noticias, listas de correo u otros medios puede ayudar.
Una alternativa ms es invertir en publicidad local o internacional. Incluso se puede costear un lugar privilegiado en los
resultados de los buscadores ms populares.
2 El lenguaje de marcado extensible XML

El lenguaje de marcado extensible (XML, eXtensible Markup Language), es un lenguaje estndar para representar
informacin de inters en forma de documentos digitales, que se caracteriza por permitir marcado definido a conveniencia
del autor. Con propsitos de sencillez, XML es un subconjunto del SGML (Standard Generalized Markup Language), un
lenguaje estndar (ISO 8879:1986) nacido en IBM en los aos 60.
2.1 Conceptos
Los seres humanos tienen diversas necesidades de informacin, y cuando sta se debe almacenar en la computadora, se
suele hacer en forma de bases de datos o documentos digitales. Las bases de datos restringen en alguna medida la
representacin de informacin del mundo real a una estructura formalmente definida que puede ser eficientemente
manipulada por el computador. Los documentos son menos estrictos por lo que pueden representar casi cualquier tipo de
informacin del mundo real, pero tal libertad limita el poder de manipulacin del computador. El XML es un lenguaje formal
que busca las ventajas de ambos: la representacin flexible de informacin en forma de documentos que pueden ser
manipulados aprovechando el poder del computador.
Charles Goldfarb, el principal autor del SGML, indica que XML sirve para la representacin digital de documentos.
Representar digitalmente un documento implica transformarlo en algn tipo de cdigo legible por la computadora para que
sta sea capaz de almacenarlo, procesarlo, buscarlo, transmitirlo, mostrarlo e imprimirlo [Gold99]. La estrategia consiste en
separar los datos del documento de su presentacin y adems, describir la estructura lgica y fsica que sigue el documento.
La presentacin de un documento es la percepcin que tiene el ser humano de l, que tpicamente es impresa en papel o
en una pantalla [Gold99]. La estructura del documento describe la distribucin y orden de los componentes del
documento. Los componentes varan dependiendo del tipo de documento. Por ejemplo, un libro suele tener como
componentes: portada, ndice, partes, captulos, secciones, prrafos, oraciones, palabras, ttulos, notas, etc. En terminologa
XML estos componentes reciben el nombre de elementos. El Listado 2.1 muestra un ejemplo de un posible libro en
notacin XML.
1. <?xml version="1.0" encoding="UTF-8"?>
2. <!DOCTYPE book SYSTEM "book.dtd">
3.
4. <book name="AplicacionesWeb" version="1.0">
5.
<title>Aplicaciones web</title>
6.
<authors>
7.
<author name="Jeisson" percent="100">
8.
<fullname>Jeisson Hidalgo-Cspedes</fullname>
9.
<email>jeissonh@gmail.com</email>
10.
</author>
11.
</authors>
12.
13.
<chapter name="Preliminar" type="prelims">
14.
<section name="Prologo">
15.
<title>Prlogo</title>
16.
<p>Este documento contiene un resumen de temas que servirn de
17.
apoyo a los estudiantes del curso CI-2413 impartido...</p>
18.
</section>
19.
<section name="Agradecimientos" type="acknowledgements" author="Jeisson">
20.
<title>Agradecimientos</title>
22/09/2015 11:52 a. m.
15 de 99
21.
<p>Quiero agradecer en primer lugar, a usted, que con sus ojos
22.
da vida a estas inanimadas palabras pintadas en...</p>
23.
</section>
24.
</chapter>
25.
26.
<chapter name="Introduccion">
27.
<title>Introduccin a la tecnologa web</title>
28.
<p>De todas las aplicaciones que se han construido sobre Internet...</p>
29.
<p>Su popularidad puede deberse a su "facilidad de uso" y...</p>
30.
31.
<section name="HistoriaWeb">
32.
<title>Historia</title>
33.
<p>La web fue conceptualizada en un artculo de 1989 Tim Berners-Lee</p>
34.
</section>
35.
</chapter>
36. </book>
Listado 2.1. Ejemplo de un libro hipottico en XML.
Otro concepto presente en la estructura de un documento XML es el de entidad. Una entidad representa cualquier trozo de
texto, desde un carcter, un prrafo, un archivo o todo un libro. Las entidades tienen nombre el cual puede utilizarse en
cualquier parte del documento al insertar una referencia de entidad, la cual es sustituida por la entidad misma cuando el
documento es procesado. Las entidades funcionan de forma similar a las macros de los procesadores de palabras [Gold99].
Por ejemplo la referencia a la entidad < en un documento XML se reemplaza por el smbolo "<".
Las entidades permiten separar un todo en partes fsicas que facilitan la manejabilidad o ciertos procesos, pero tambin se
pueden manipular como un todo cuando sea necesario. Por ejemplo, es tedioso imprimir un manual HTML que est
segmentado en cientos de archivos .html unidos dbilmente por enlaces (links). En XML, la informacin de cada archivo
.html se escribira como una entidad y en el archivo que represente el todo, contendr referencias a las entidades
anteriores, el cual puede ser impreso con facilidad.
Las entidades pueden representar informacin en otra notacin que no es XML, por ejemplo, imgenes, archivos de audio,
archivos de vdeo, texto puro, HTML, etc. Estas entidades reciben el nombre de entidades no analizables sintcticamente.
Se dice que las entidades describen la estructura fsica y los elementos la estructura lgica de los documentos XML. La
estructura lgica (elementos) y fsica (entidades) se representa dentro del documento XML agregando el marcado, el cual se
delimita de los datos de carcter encerrando la descripcin de los elementos dentro de parntesis angulares (< y >), que
se conocen como etiquetas y las referencias a entidades entre el signo & y el punto y coma (;). Es decir, el texto
encerrado dentro de estos cuatro caracteres se conoce como marcado, lo restante como datos de carcter. La
combinacin del marcado ms los datos de carcter forman el texto XML [Gold99].
Es sabido que las cartas, tesis, guiones y las guas telefnicas son documentos que tienen una estructura muy diferente. Es
decir, poseen elementos distintos, cada uno con su propia distribucin y orden. Se dice que son tipos de documentos
distintos. En XML cada tipo de documento se define en una notacin formal que plasma su estructura llamada definicin de
tipo de documento (DTD, Document Type Definition). A modo de ejemplo, la lnea 2 del listado Listado 2.1 declara que el
tipo de documento es un libro.
Se puede pensar en un DTD como una clase en programacin orientada a objetos, mientras que un documento XML que sea
de ese tipo de DTD es como un objeto que instancia esa clase. El objeto documento XML debe cumplir a cabalidad con la
estructura descrita en su DTD, cuando esto ocurre, se dice que el documento es de tipo vlido o simplemente vlido, de lo
contrario, se dice que el documento es de tipo no vlido o simplemente no vlido (pero no se usa el trmino "invlido")
[Gold99].
Un documento XML puede no tener un tipo de documento definido, es decir, carece o no cumple con un DTD, por lo que es
un documento no vlido pero puede respetar la sintaxis XML, en tal caso se dice que slo es un documento bien formado
(well formed). Los documentos bien formados pero no vlidos (no cumplen un DTD) suelen utilizarse para documentos
pequeos que deben escribirse de forma rpida. Los documentos vlidos siempre estn bien formados y son necesarios
cuando son muy extensos o deben procesarse por algn sistema computacional [Gold99].
2.2 Sintaxis general de XML

Sintcticamente, un documento XML es una secuencia, flujo o cadena de caracteres usualmente en formato Unicode. Dentro
de esa secuencia, los caracteres encerrados entre parntesis angulares (< y >) y las referencias de entidades (& y ;)
son el marcado, los dems son los datos de carcter.
Dentro del marcado suelen definirse identificadores como nombres de elementos, entidades u otros. Por ejemplo, la lnea
3 del listado Listado 2.1 incluye tres identificadores: book, name y version. Los identificadores deben iniciar con una letra y
pueden estar seguidos de cero o ms letras o los caracteres punto, guin o dgitos. Los identificadores en XML son sensitivos
a maysculas y minsculas (case sensitive), esto implica, por ejemplo que book, Book y boOK se tomen como identificadores
distintos. El autor puede emplear cualquier identificador vlido, excepto aquellos que inician con la cadena xml en
cualquiera de sus combinaciones de maysculas y minsculas, ya que estn reservados para propsitos de estandarizacin
22/09/2015 11:52 a. m.
16 de 99
[Gold99].
Varios espacios en blanco, tabuladores y cambios de lnea se ignoran a menos que sean cadenas literales, las cuales se
escriben entre comillas dobles (") o simples (') o una combinacin de ambas, pero con la restriccin de que la comilla que
cierra la cadena debe ser del mismo tipo de la que abre. Esto implica que un software que procese el listado Listado 2.1,
deber ignorar los cambios de lnea y espacios en blanco que rodean al prrafo en las lneas 16 y 17.
Los documentos XML constan de dos partes: encabezado (head) y cuerpo (body). El encabezado de un documento XML
recibe el nombre de prlogo de documento y almacena informacin que describe al cuerpo del documento, como la
versin de XML, el tipo de documento (DTD) al que pertenece, la codificacin y otros. El cuerpo del documento XML recibe el
nombre de instancia de documento, que contiene los datos reales del documento.
Los elementos se pueden anidar, formando un rbol. Los elementos dentro de otros se llaman elementos hijos y a los
contenedores, elementos padres. Slo puede existir un nico elemento raz, tambin llamado elemento documento,
que contiene a todos los dems [Marc00]. En el listado Listado 2.1 el elemento con identificador book es elemento raz.
Los elementos se describen utilizando etiquetas. Una etiqueta es el marcado entre un par de signos menor que y mayor
que. Un elemento es la combinacin de una etiqueta de inicio (que puede tener atributos), un contenido opcional y una
etiqueta de cierre, es decir
<identificador_etiqueta_inicio atributos="valor">
contenido
</identificador_etiqueta_cierre>
Un elemento tiene dos etiquetas, una de inicio y otra de cierre (o fin). La etiqueta de inicio se compone de un carcter
menor que (<), un identificador_etiqueta_inicio que es un simple identificador y debe respetar las restricciones de los
identificadores; seguido por cero o ms parejas atributo="valor"; y un carcter de mayor que (>).
La etiqueta de cierre o etiqueta de fin consta de los caracteres menor que (<) y un slash (/), luego un
identificador_etiqueta_cierre que obligatoriamente debe ser el mismo identificador que el de la etiqueta de inicio del
elemento y un carcter de mayor que (>). La etiqueta de cierre nunca tiene atributos.
El contenido del elemento puede ser nulo o texto XML, es decir, datos de carcter, otros elementos (y por ende etiquetas)
o ambos. Si un elemento no tiene contenido se dice que es un elemento vaco, y se puede escribir en cualquiera de las dos
siguientes formas:
<id_elemento atributos="valor"></id_elemento>
<id_elemento atributos="valor"/>
La segunda de las formas anteriores consta de una sola etiqueta llamada etiqueta vaca, la cual finaliza en un slash (/)
indicando que el elemento ha terminado. Es poco comn encontrar etiquetas vacas sin atributos.
Si un elemento tiene contenido (no es vaco) y se omite alguna de las etiquetas (la de inicio o la de fin) el procesador XML
deber alertar de que el documento no est bien formado.
Debe quedar claro que las etiquetas no son elementos. Las etiquetas inician con un '<' y terminan con un '>', lo dems no
son etiquetas [Gold99]. Los elementos tienen etiquetas y contenido. Los elementos se escriben en el documento XML y son
instancias de los tipos de elementos, los cuales se declaran en la definicin del tipo de documento (DTD).
Los elementos pueden tener atributos que son una forma de incorporar caractersticas o propiedades a los elementos de un
documento [Gold99, 353]. Un atributo se compone de un identificador, un signo de igual (=) y un valor entre comillas
(dobles, simples o una combinacin de ambas).
2.2.1 El prlogo de documento

El prlogo de un documento suele incluir la declaracin de XML y la declaracin del tipo de documento, en ese orden;
adems de otras caractersticas como comentarios e instrucciones de procesamiento. Todas son opcionales, pero se aconseja
maximizar la cantidad de informacin en el prlogo ya que ayuda al procesamiento posterior del documento [Gold99]. El
prlogo termina cuando abre la etiqueta de inicio del elemento raz, es decir, donde inicia la instancia de documento.
2.2.1.1 La declaracin XML
La declaracin XML indica que el documento usa notacin XML e indica la codificacin del mismo. Tiene la forma mnima
<?xml version="1.0"?> y no posee una etiqueta de cierre. Tiene tres atributos: la versin, la codificacin y el documento
autnomo:
La declaracin de versin con el atributo version, indica la versin de XML utilizada en el documento. Normalmente
"1.0".
La declaracin de codificacin con el atributo encoding, indica la codificacin de caracteres del documento. Aunque los
procesadores XML tienden a reconocer automticamente la codificacin, es mejor indicarlo explcitamente, por
ejemplo, "UTF-8", "UTF-16" o "iso-8859-1" [Gold99]. Lo importante es que este atributo refleje realmente el tipo de
codificacin que us para generar el documento.
La declaracin de documento autnomo con el atributo standalone no se suele utilizar con frecuencia ni tampoco se
22/09/2015 11:52 a. m.
17 de 99
recomienda su uso. Su comprensin es compleja y se explica ampliamente por Goldfarb [Gold99].

A modo de ejemplo, la declaracin XML en su forma ms amplia tiene la siguiente forma:
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
2.2.1.2 La declaracin del tipo de documento

El otro elemento que se suele incluir en el prlogo es la declaracin de tipo de documento, el cual indica el tipo de
documento (expresado por un DTD) que se est utilizando en el documento. Por ejemplo, la segunda lnea del listado
Listado 2.1 indica que ese documento es de tipo "book":
<!DOCTYPE book SYSTEM "book.dtd">
La declaracin DOCTYPE indica el tipo de documento y adems instruye al procesador de XML dnde encontrar la definicin
del tipo de documento (DTD), el cual puede estar escrito en el mismo documento XML o puede encontrarse en una entidad
externa (un archivo en disco o red) o una combinacin de ambas. Lo ms comn es que se encuentre en un recurso
externo, como se hizo en la segunda lnea del listado Listado 2.1, la cual instruye al procesador XML que el tipo de
documento est en el archivo "book.dtd" en la misma ubicacin que el documento XML. La palabra SYSTEM indica al sistema
que busque el recurso especificado en el URI (Universal Resource Identifier) que le contina. Ms adelante se estudiar la
nomenclatura de un DTD.
El identificador del elemento que contina inmediatamente despus de <!DOCTYPE, por ejemplo, book en el listado Listado
2.1, indica al procesador XML a partir de qu elemento del DTD se debe incluir, es decir, slo se incluye el subrbol cuya raz
es precisamente ese elemento.
2.2.2 Marcado miscelneo

Adems de los elementos y entidades definidos por el autor, a veces es necesario incluir cierto tipo de informacin que no se
puede lograr con estas estructuras. Por esto el autor puede agregar, adems, entidades predefinidas, secciones CDATA y los
comentarios.
Las entidades predefinidas "son marcas que representan caracteres que de otro modo se interpretaran con un significado
especial" [Gold99, 358], como los caracteres menor que (<) y ampersand (&). Existen cinco entidades predefinidas
mostradas en la Tabla 2.1. "Cuando el procesador XML analiza el documento, reemplaza las referencias de entidad por los
caracteres reales", en lugar de interpretarlos como caracteres de marcado [Gold99, 359].
Referencia de entidad Valor
&
&
<
<
>
>
'
'
"
"
Tabla 2.1. Entidades predefinidas en XML.
Aunque el uso de entidades predefinidas parece sencillo, hace que el documento XML se vuelva difcil de leer para el autor,
en especial cuando se usan repetidamente, como ocurre al escribir segmentos de cdigo fuente; por eso se crearon las
secciones CDATA; las cuales indican al procesador XML que no interprete una parte del texto aunque contenga marcado,
es decir, que lo trate como datos de carcter (character data, de ah la contraccin CDATA). La sintaxis de una seccin de
datos de carcter es
<![CDATA[ contenido ]]>
En el contenido puede aparecer cualquier cadena de texto, excepto la que cierra la seccin CDATA (]]>) llamada CDEnd. La
lnea 29 del listado Listado 2.1 usa dos entidades preestablecidas. Este mismo elemento pudo haberse escrito con una
seccin CDATA como
<p><![CDATA[
Su popularidad puede deberse a su "facilidad de uso" y...
]]></p>
Los comentarios son cadenas de caracteres que no son parte de los datos de carcter, es decir, es parte del marcado pero
que debe ser ignorado por el procesador XML. Permiten al autor hacer anotaciones que le ayuden a comprender o recordar
partes del documento. El texto del comentario se introduce entre los caracteres inicio de comentario (). Por ejemplo

Todo el texto dentro del inicio y fin de comentario ser ignorado, incluyendo los caracteres de marcado (menor que,
ampersand, comillas, etc.), excepto la secuencia de cierre del comentario (-->).
22/09/2015 11:52 a. m.
18 de 99
2.2.3 Semntica de los elementos XML

Cuando se escribe un documento XML, el autor escoge los identificadores de los elementos, los atributos y la estructura a su
gusto y la plasma en un DTD. Cuando una persona observa el marcado de un documento XML y se pregunta qu significa
esto? o bien qu aspecto tendr despus?, estar haciendo preguntas sobre su semntica. Por ejemplo, si se encuentra
una etiqueta <T> esta podra indicar que se trata de un ttulo, una tabla o alguna otra cosa [Gold99].
La computadora no puede inferir la semntica de un documento XML dado, sino que es responsabilidad del autor de la
gramtica describir esta semntica para que otros autores puedan comprenderlo. Esta descripcin se puede realizar por
correo electrnico, un documento PDF (Portable Document Format), un libro, o cualquier otro medio de comunicacin
[Gold99].
Como seala Goldfarb, "lo que le interesa a la computadora es el aspecto que se supone debe tener un elemento cuando
est formateado, la forma en que debe actuar si es interactivo o qu hacer despus de extraer los datos. Estas cuestiones se
encargan de especificarlas las hojas de estilo y los programas informticos" [Gold99, 350].
2.3 La definicin del tipo de documento (DTD)

La definicin de tipo de documento (DTD, Document Type Definition) es "el conjunto de normas XML para la
representacin de documentos de un determinado tipo" [Gold99, 49]. En pocas palabras, el DTD describe la gramtica del
documento [W3C00], es decir, los tipos de elementos, sus atributos, entidades, algunas restricciones y cmo se relacionan
entre ellos. Esta seccin explica la sintaxis que XML utiliza para representar estos conceptos y sus relaciones en un DTD.
Un documento XML que respete cabalmente las reglas establecidas en su DTD se dice que es vlido. A modo de ejemplo, el
listado prettyprint linenums lang-xml 2.2 muestra el DTD referido en el libro del listado Listado 2.1 llamado book.dtd.
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.
<!ENTITY % SectionType
"forework|preface|acknowledgements|dedication|contents">
<!ELEMENT book (title, authors, front-cover?, chapter+, back-cover?)>
<!ATTLIST book
name ID #REQUIRED
version CDATA #REQUIRED>
<!ELEMENT title (#PCDATA)>
<!ELEMENT authors (author+)>
<!ELEMENT author (fullname, email?)>
<!ATTLIST author
name ID #REQUIRED
percent CDATA #IMPLIED>
<!ELEMENT fullname (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT front-cover EMPTY>
<!ATTLIST front-cover
img CDATA #REQUIRED>
<!ELEMENT chapter (title?, (p|section)+)>
<!ATTLIST chapter
name ID #REQUIRED
type (prelims|contents) "contents">
<!ELEMENT p (#PCDATA|em|strong|code)*>
<!ELEMENT em (#PCDATA)>
<!ELEMENT strong (#PCDATA)>
<!ELEMENT code (#PCDATA)>
<!ELEMENT section (title?, (p|section)+)>
<!ATTLIST section
name ID #REQUIRED
type (%SectionType;) "contents"
author IDREF #IMPLIED>
<!ELEMENT back-cover EMPTY>
<!ATTLIST back-cover
img CDATA #REQUIRED>
2.3.1 Declaraciones de tipo de elemento

Entre otras cosas, en el DTD se escriben las declaraciones de tipo de elemento que son restricciones que deben respetar
todos los elementos en un documento XML vlido. Estas declaraciones tienen el siguiente formato
<!ELEMENT IdElemento EspecContenido>
22/09/2015 11:52 a. m.
19 de 99
El <!ELEMENT inicia la declaracin de un tipo de elemento. El IdElemento es el identificador que aparece en sus etiquetas.
Debe ser nico en el DTD y respetar las restricciones de los identificadores expuestas en la seccin Conceptos XML. La
EspecContenido se refiere a la especificacin de contenido, que indica qu objetos pueden figurar en el contenido del
elemento, hay cuatro posibilidades [Gold99]:
Tipo
Descripcin
EMPTY
Impide que el elemento tenga contenido y por tanto sus etiquetas son vacas. Ejemplo: front-cover en la lnea 22 en el
DTD del listado prettyprint linenums lang-xml 2.2.
ANY
Puede contener cualquier elemento o carcter, lo cual no se recomienda ya que no es estructurado. Pueden ser tiles
cuando se est escribiendo el DTD para lograr que los documentos sean vlidos mientras se est refinando dicho DTD.
elementcontent
Slo puede contener los subelementos listados dentro de parntesis en la especificacin de contenido. Por ejemplo, la
lnea 26 del listado prettyprint linenums lang-xml 2.2 indica que los elementos chapter slo pueden tener un ttulo
opcional y varios prrafos o secciones.
mixedcontent
Permite al elemento contener subelementos, datos de carcter (#PCDATA) o ambos, como ocurre con el elemento de
prrafo p en la lnea 31 del listado prettyprint linenums lang-xml 2.2.
Especificacin de contenido de elementos XML.
Cuando un elemento tiene subelementos (o elementos hijos) en el contenido (ltimos dos casos de la lista anterior), es
necesario especificar un modelo de contenido (content model), que establece el orden y nmero de apariciones de los
subelementos.
El orden de los elementos hijos se establece con los caracteres coma, barra vertical (|) y parntesis. Una secuencia de
subelementos separados por coma indica que tales subelementos deben aparecer y en el mismo orden. La barra vertical
indica que debe aparecer slo uno de los dos subelementos que estn en sus extremos. Los parntesis agrupan partculas de
contenido que son tratadas como unidades por los operadores anteriores, lo que permite combinarlos.
El nmero de apariciones de los subelementos se especifica con los indicadores de frecuencia que se escriben al final del
subelemento, sin espacios en blanco y son tres. El signo de interrogacin (?) indica que el elemento hijo es opcional, es
decir, puede o no puede aparecer. El asterisco (*) indica que el subelemento puede aparecer 0 ms veces (opcional y
repetible). El signo de ms (+) indica que el subelemento puede debe aparecer 1 o ms veces (necesario y repetible)
[Gold99].
2.3.2 Declaraciones de la lista de atributos

Los atributos son una forma de incorporar caractersticas o propiedades a los elementos de un documento [Gold99, 353].
Un elemento puede tener una lista de atributos, la cual se declara en el DTD en la seccin conocida como declaracin de
lista de atributos, usualmente despus de la declaracin del tipo de elemento. Tiene la siguiente sintaxis
<!ATTLIST IdElemento IdAtt TipoAtt DefaultValue>
El <!ATTLIST indica que se va a declarar la lista de atributos del elemento identificado por IdElemento. IdAtt indica el
nombre del atributo; debe ser un identificador vlido y no es obligatorio que sea nico en el documento. El tipo del atributo
TipoAtt puede ser alguno de los siguientes
Tipo
Descripcin
CDATA
Datos de carcter. Permite casi cualquier cadena de caracteres.
NMTOKEN
Name token. Slo permite letras, nmeros y algunos caracteres especiales, como los que se utilizan para declarar
identificadores, pero no obliga a que sea nico en el documento.
NMTOKENS
Una lista de name tokens.
(a|b|c|d) Enumerados. La lista de valores permitidos se escribe dentro de parntesis y separados por barras verticales (|), por
ejemplo el atributo type en la lnea 29 del listado prettyprint linenums lang-xml 2.2.
ID
Identificador. Declara que el atributo es un identificador nico, es decir, su valor debe cumplir con las restricciones de los
identificadores y en el documento XML no puede haber dos o ms atributos con el mismo valor.
IDREF
Referencia a un identificador. Declara que el atributo tiene como valor una referencia a un identificador existente. Su
valor puede repetirse muchas veces en el documento XML pero debe respetar las restricciones de los identificadores.
ENTITY
Referencia a una entidad (o atributos de entidad). El valor del atributo debe ser el nombre de una entidad existente en el
documento XML.
Tipos de atributos en un DTD.
El DefaultValue en la declaracin de la lista de atributos indica si el atributo se puede omitir o no, y el valor por defecto en
caso de que se omita. Puede tomar tres variantes:
Tipo
Descripcin
Indica que el atributo es requerido y no se puede omitir, por tanto no tiene un valor por defecto. Son ejemplos name y
#REQUIRED
version de book en el listado prettyprint linenums lang-xml 2.2.
value
Un valor que est en el dominio de valores permitido por el tipo de atributo. Indica que ese ser el valor que el
procesador XML tome si el autor no especifica uno en el documento. Por ejemplo, segn la lnea 29 del listado prettyprint
linenums lang-xml 2.2, si el autor no especifica el tipo del captulo, el procesador XML asumir que se trata de un
captulo de contenido y no uno preliminar.
Valores por defecto de atributos en un DTD.
22/09/2015 11:52 a. m.
20 de 99
Tipo
#IMPLIED
Descripcin
Permite al autor omitir el valor del atributo pero sin forzar a escribir un valor por defecto determinado. El procesador XML
asignar algn valor que considere adecuado o lo ignora.
2.3.3 Elementos versus atributos

No es trivial decidir qu aspectos del mundo real deben modelarse como elementos y cules como atributos. Tampoco existe
un diseo mejor que otro. El autor debe escoger alguna convencin que sea coherente y escribir un DTD para obligar a
todos los documentos del mismo tipo a cumplir con el diseo escogido. Aunque no hay ninguna regla para decidir qu debe
modelarse como un elemento o un atributo, Goldfarb sugiere las siguientes ideas.
Los atributos no pueden contener subatributos ni elementos, sino que son pequeos trozos de texto sin estructura o listas
de condiciones. Por tanto, si algo del mundo real contiene otras partes que tambin deben modelarse, debe hacerse con
elementos y no con atributos. Los atributos se usan para aadir poca informacin, sencilla y sin estructura [Gold99].
Los elementos deben respetar el orden y el nmero de ocurrencias descritos en el DTD, mientras que los atributos pueden
aparecer en cualquier orden y no pueden repetirse. Por esto, las cosas que deben repetirse o que respetan cierto orden
deben modelarse como elementos y no como atributos [Gold99].
Si las ideas anteriores no son criterio suficiente, puede usarse la siguiente heurstica. Los elementos se utilizan para
representar partes de los objetos, o datos que son parte del contenido principal, y deben aparecer en todas las impresiones
o interpretaciones del documento. Los atributos se utilizan para representar propiedades de los objetos, es decir,
informacin sobre los datos reales (metadatos) y que no necesariamente debe imprimirse [Gold99].
2.3.4 Entidades XML

Las entidades permiten al documento dividirse en varios objetos de almacenamiento y son herramientas importantes para
volver a utilizar y mantener el texto... Una entidad es como una abreviatura y se utiliza como una forma corta de algunos
textos. La abreviatura se llama nombre de la entidad y la forma larga contenido de la entidad. El contenido puede ser
tan corto como un carcter o tan largo como un captulo [Gold99, 389].
Las entidades se utilizan con referencias de entidades, cuya sintaxis consiste en escribir el nombre de la entidad entre los
caracteres ampersand (&) y punto y coma (;). Cuando el procesador XML encuentra una referencia de entidad, la reemplaza
por el contenido de la misma, proceso conocido como inclusin. Las entidades se crean con declaraciones de entidad,
con una de las dos siguientes notaciones, donde los corchetes indican opcional:
<!ENTITY [%] IdEntidad "contenido">
<!ENTITY [%] IdEntidad SYSTEM url [NDATA formato]>
Hay tres criterios para clasificar entidades y por tanto, 8 combinaciones de las cuales 5 son vlidas. Los criterios son
Analizables o no analizables
Internas o externas
Generales o parmetro
Las entidades cuyo contenido es texto XML que debe ser analizado por el procesador XML reciben el nombre de entidades
analizables (parsed entities). Si el contenido de la entidad es cdigo ajeno a XML (como imgenes o texto puro) que no
debe analizarse, se denomina entidades no analizables. Las entidades no analizables terminan en NDATA seguido por un
indicador del formato, como ocurre con cedula en el listado prettyprint lang-xml 2.13. Las entidades que no se declaran con
NDATA son analizables.
Las entidades externas son aquellas cuyo contenido est en un recurso fuera de la declaracin de la entidad, y por tanto
debe proveerse un URL hacia ese recurso precedido por la palabra SYSTEM o PUBLIC, como ocurre con cap01 y cedula en el
listado prettyprint lang-xml 2.13. Mientras que el contenido de las entidades internas est escrito en la misma declaracin
de la entidad entre comillas, como ocurre con adn y frase en el listado prettyprint lang-xml 2.13.
Reciben el nombre de entidades generales aquellas que se pueden referenciar en cualquier lugar del documento XML,
como ocurre con &adn; del listado prettyprint lang-xml 2.13 y las entidades predefinidas, como & que son declaradas
por el procesador XML. Las entidades que slo se pueden referenciar dentro del DTD se conocen como entidades
parmetro. Es decir, son de uso exclusivo del DTD y no se pueden referenciar desde el documento XML. Se declaran
anteponiendo un % y se referencian usando la notacin %IdEntidad; en lugar de &IdEntidad; como ocurre con %SectionType;
en las lneas 1 y 40 del listado prettyprint lang-xml 2.9.
<!ENTITY
<!ENTITY
<!ENTITY
<!ENTITY
<!ENTITY
adn "cido desoxirribonucleico">

frase "si <emp>no</emp> tienes una solucin sos parte de lo que criticas">
cap01 SYSTEM "http://www.misitio.com/libro/cap01.xml">
cedula SYSTEM "cedula.gif" NDATA GIF>
% SectionType "forework|preface|acknowledgements|dedication|contents">
Los identificadores externos hacen referencia a informacin que se encuentra fuera de la entidad en la que tienen lugar
[Gold99, p404]. Existen dos tipos, los identificadores de sistemas (SYSTEM) y los identificadores pblicos (PUBLIC).
Los identificadores de sistemas utilizan la palabra clave SYSTEM y se refieren a un objeto por su localizacin utilizando un
22/09/2015 11:52 a. m.
21 de 99
URI (Universal Resource Identifier). Pueden ser direcciones absolutas o relativas a la ubicacin de la entidad documento que
contiene el identificador. La siguiente declaracin referencia el recurso "http://www.serv.com/dir/cap02.xml":
<!ELEMENT cap02 SYSTEM "http://www.serv.com/dir/">
Los identificadores pblicos utilizan nombres declarados pblicamente para referirse a la informacin. Estos nombres
deben ser nicos en el mundo. Tienen cuatro partes separadas por dos slash (//). La primera parte es un carcter de suma
(+) si la organizacin que publica el recurso est registrada en el ISO, sino es un carcter de menos (-), lo cual ocurre con
mayor frecuencia. La segunda parte es el dueo del recurso. La tercera parte es la descripcin del recurso, que permite
espacios en blanco. La ltima parte es el lenguaje en que est escrito el recurso [Marc00]. Los dos siguientes ejemplos de
declaraciones de tipo de documento emplean identificadores pblicos. El primero de ellos es ficticio.
<!DOCTYPE book
PUBLIC "-//ECCI-UCR//DTD book//EN"
"http://www.ecci.ucr.ac.cr/dtd/book.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2.4 Espacios de nombres (namespaces)
2.5 La familia de tecnologas XML

Las secciones anteriores discutan sobre el ncleo de la especificacin del XML 1.0, llamado XML Core, El W3C y otras
organizaciones continuaron extendiendo la especificacin original, definiendo estndares que en conjunto se conocen como
la familia de tecnologas XML [Arci02], cuyo estudio sobrepasa los lmites de este documento. En los siguientes ttulos se
citan algunas de las ms importantes tecnologas agrupadas en categoras.
2.5.1 Modelaje y validacin avanzada

Informalmente, un esquema es un documento que describe otro documento. Por ejemplo, un DTD X es un esquema que
describe la estructura de los documentos que son de tipo X. Los DTD son relativamente simples, ampliamente utilizados,
flexibles y extensibles, pero tan pronto como se utilizan, se hace claro sus inconvenientes: no permiten asociaciones y
restricciones complejas entre los datos, no poseen tipos de datos y no utilizan notacin XML, entre muchos otros. Por esto,
el grupo de trabajo en XML dio origen a la notacin llamada XML Schema, que permite al autor incorporar ms
restricciones sobre los documentos XML [Walm02].
Adems del XML Schema, se han desarrollado otros lenguajes con alto grado de xito pero que no son oficialmente
apoyados por el W3C. Ejemplos son, Schematron y RELAX NG (Regular Language description for XML) [Arci02].
2.5.2 Ligar y apuntar

Uno de los aspectos ms exitosos del HTML es el hipervnculo. El XML extiende este concepto permitiendo la creacin de
vnculos (enlaces) tanto sencillos como altamente complejos. El estndar aprobado por el W3C para ligar recursos se llama
XLink.
El HTML provee el carcter # para hacer referencia a una parte especfica dentro de un recurso. En XML, el estndar
XPointer es un lenguaje no ambiguo que permite apuntar a cualquier elemento o atributo dentro de un documento XML.
2.5.3 Interfaces de programacin

Cuando un sistema planea utilizar tecnologa XML, debe implementar un mdulo que se encarga de leer o escribir
documentos XML. Este mdulo no es de fcil desarrollo, ms si se quiere que soporte la especificacin formal del XML y
tecnologas estndar como las descritas en los prrafos anteriores. Adems, si cada sistema que requiere XML en el mundo
implementara ese mdulo, habra trabajo repetitivo considerable y costoso.
El mdulo que se encarga de procesar archivos XML debe aislar a la aplicacin del usuario de los detalles tcnicos del XML.
Este mdulo comnmente se denomina XML parser (analizador XML) y existen muchos gratuitos y de cdigo abierto. Si
cada uno tuviera su propia interfaz, obligara al desarrollador a revisar la documentacin del parser que vaya a emplear y, si
posteriormente quisiera cambiar de parser, tendra que estudiar el nuevo parser y reescribir su programa para adaptarlo.
Por esto, un acuerdo mutuo entre programadores de XML ha dado origen a estndares de interfaz entre la aplicacin y el
parser. Hay dos API (Application Programming Interface) estndar: SAX y DOM.
El Simple API for XML (SAX) especifica los objetos y sus funciones, tanto los que debe implementar el parser como la
aplicacin, utilizando el modelo de eventos, el cual funciona de la siguiente forma. El parser recorre el documento XML
22/09/2015 11:52 a. m.
carcter por carcter, identificando elementos, atributos, datos de carcter, referencias de entidad, etc. Cada vez que el
parser identifica uno de esos componentes lxicos, acta como si fuese un evento y realiza un llamado a la aplicacin para
que lo atienda, pasndole como parmetros los lexemas identificados. SAX es un enfoque bastante rudimentario pero es
muy eficiente.
El segundo API estndar es el Document Object Model (DOM) que se basa en el modelo de documento, esto es, el parser
recorre el documento XML construyendo una estructura jerrquica compuesta de nodos, los cuales pueden ser elementos,
atributos o datos. Cuando se ha terminado de analizar el documento XML, el rbol de objetos nodo estar construido y se
pasar como parmetro a la aplicacin, la cual podr utilizarlo para sus propios fines [Gars02].
2.6 El lenguaje extensible de hojas de estilo (XSL)

Un documento XML slo sirve para representar datos y su estructura. El estndar XML define una familia de lenguajes
llamada lenguaje extensible de hojas de estilo (XSL, Extensible Stylesheet Language), que permiten a los autores dar
formato a los documentos XML o transformarlos en otros documentos como (X)HTML o PDF (Portable Document Format).
XSL se compone de los siguientes tres lenguajes.
1. XSLT. Es un lenguaje que permite transformar un documento XML en otro documento de texto, como (X)HTML.
2. XSL-FO. Es un lenguaje para especificar el formateo visual de un documento XML.
3. XPath. Un lenguaje de consultas para seleccionar partes (nodos) de un documento XML. Es usado principalmente por
XSLT.
2.6.1 Transformaciones XSL (XSLT)
documento XML
Para transformar un documento XML a otro documento de texto, como (X)HTML, CSV (Comma-Separated Values file), texto
puro u otro tipo de documento XML; el autor puede escribir una hoja de estilos, que es un conjunto de instrucciones o reglas
en notacin XSLT (Extensible Stylesheet Language Transformations) que indican cmo se debe transformar cada pieza de
informacin (nodo) presente en el documento XML. Un software llamado Procesador XSLT (XLST Processor) toma estos
dos documentos por entrada, aplica las reglas de la hoja de estilos al documento XML y el resultado es el documento
transformado. Este proceso se ilustra en la figura siguiente.
libro.xml
libro_web.xsl
hoja de estilos
Procesador XSLT
libro.html
documento transformado
22 de 99
En general el proceso de transformacin es como sigue. El procesador XSLT analiza el documento XML y genera un rbol de
nodos conocido como DOM (Document Object Model). Luego procesa la hoja de estilos. Cada regla definida en ella afecta a
uno o varios nodos del documento. Una regla consta de dos partes: una consulta (query) que sirve para identificar a cules
nodos debe aplicarse, y una operacin que debe efectuarse en esos nodos. La consulta puede asemejarse a otros lenguajes
de consulta como SQL (Structured Query Language), pero emplea una notacin especial llamada XPath, mencionada
anteriormente. La operacin consta de texto literal que aparecer en la salida o de trozos del elemento al que se le est
aplicando la regla. La concatenacin de todas las salidas constituye el documento transformado que desea el autor.
La forma de invocar al procesador XSLT vara dependiendo de la implementacin. Las hay en forma de ejecutables en lnea
de comandos, como bilbiotecas compartidas (.so, .dll), incorporados en un navegador o una mezcla de ellas. Por ejemplo,
libxslt del proyecto GNOME puede usarse como una biblioteca compartida desde cualquier programa, o en lnea de
comandos como se muestra en el siguiente ejemplo:
xsltproc libro_web.xsl libro.xml > libro.html
La mayora de navegadores web actuales implementan un procesador XSLT internamente, sin embargo no hay forma de
indicarles en un URL la ubicacin del documento XML y la hoja de estilos simultneamente. Pero si el autor indica en el
prlogo del documento XML cul hoja de estilos quiere que se aplique, el navegador har la trasformacin y tratar de
desplegar (rendering) el resultado directamente. Un documento XML declara su hoja de estilos con la instruccin de
procesamiento xml-stylesheet, por ejemplo:
1. <?xml version="1.0" encoding="UTF-8"?>
2. <!DOCTYPE book SYSTEM "book.dtd">
3. <?xml-stylesheet href="book_web.xsl" type="text/xsl"?>
22/09/2015 11:52 a. m.
23 de 99
4.
5. <book name="MiLibro" version="1.0">
6.

7. </book>
2.6.2 Formateo de objetos (XSL-FO)
22/09/2015 11:52 a. m.
24 de 99
3 El lenguaje de marcado de hipertexto (X)HTML

El lenguaje HTML naci como una aplicacin SGML en 1991 y su mayor volumen de estandarizacin fue en la versin 4.0 de
1997. En 1998 el W3C public una simplificacin de SGML llamada XML. En el 2000 el W3C public XHTML 1.0 como una
adaptacin de HTML sobre XML y actualiz HTML a 4.01 con el fin de que fuesen cercanamente compatibles. Despus de
ello, parece que el W3C ha centrado su atencin en XHTML restando trabajo a HTML. El desarrollador web se puede estar
preguntando cul de estos dos lenguajes escoger para un sitio en que va a trabajar. Necesitar entender las diferencias para
fundamentar su decisin.
HTML es bastante liberal, mientras XHTML es inherentemente estricto. El listado <a> muestra un trozo de cdigo HTML y el
listado <b> el mismo contenido en XHTML. Las principales diferencias entre estos dos lenguajes son las siguientes.
1. Los identificadores en HTML no son sensitivos a maysculas ni minsculas; mientras que en XHTML lo son y los
definidos por la recomendacin usan minsculas consistentemente.
2. HTML permite dejar elementos sin cerrar como p y li, otros nunca se cierran como br e img; mientras que en XHTML
todo elemento debe cerrarse obligatoriamente.
3. HTML permite minimizar atributos (attribute minimization), esto es, omitir las comillas alrededor de los valores de
atributos que slo contienen letras, nmeros o los caracteres guin (-), punto (.), guin bajo (_) o dos puntos (:).
XHTML exige que todo valor de atributo debe estar encerrado entre comillas.
4. HTML permite que algunos atributos no tengan valor como noshade en <hr width="50%" noshade>, la presencia del
atributo es suficiente para generar su efecto. XHTML exige que todo atributo tenga un valor entre comillas, y para
estos casos, el Consorcio Web tom la convencin de repetir el nombre del atributo en su valor, ejemplo: <hr
width="50%" noshade="noshade"> [Cast06].
Es evidente que escribir HTML es ms relajante que XHTML, si ambos producen el mismo efecto en el navegador por qu
molestarse con XHTML? HTML obliga al navegador a programar excepciones y reglas circunstanciales que dilatan el
procesamiento y propician a la ambigedad. XHTML obliga a una sintaxis restringida que facilita al navegador y otros
software XML a interpretar cdigo fcil y eficientemente. Adems XML abre un conjunto de funcionalidades y tecnologas
que no estn disponibles para HTML, como la posibilidad de incrustar otras especificaciones como SVG y MathML en los
documentos XHTML.
Si una persona piensa escribir algunas pginas manualmente, quiz HTML sea la mejor alternativa. Si planea que esas
pginas formen parte de un sitio web grande, sean almacenadas en bases de datos o procesadas por algn tipo de software,
es mejor que elija XHTML. En general se cumple que cdigo XHTML vlido es tambin cdigo HTML vlido, no el recproco.
Por eso este captulo conferir nfasis a XHTML y las diferencias importantes con HTML se resaltarn en su contexto.
3.1 Estructura global

Un documento web es muy similar a cualquier otro documento que una persona podra escribir en un procesador de
palabras, y por ende tiene ttulos, prrafos, tablas, imgenes, enlaces, estilos y otros elementos familiares. La principal
22/09/2015 11:52 a. m.
25 de 99
diferencia es que un documento web debe seguir estrictamente la sintaxis de (X)HTML. Al hacerlo, cualquier software
(X)HTML podr manipular el documento, sea un navegador, un programa de diseo, un motor de bases de datos y hasta el
mismo procesador de palabras mencionado anteriormente. Dado que el navegador es el ms comn, se usar en este texto
por claridad en lugar de software (X)HTML.
Un documento web se compone de cuatro partes: la declaracin del tipo de documento, el elemento documento, el
encabezado y el cuerpo. El listado prettyprint linenums lang-html 3.1 muestra un ejemplo de documento web con estas
cuatro partes. Los comentarios utilizan la misma notacin de XML y pueden aparecer en casi cualquier lugar del documento.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ttulo del documento</title>
</head>
<body>

</body>
</html>
3.1.1 La declaracin del tipo de documento

La declaracin del tipo de documento, expresada con la etiqueta <!DOCTYPE ...>, informa al navegador el tipo de documento
(HTML o XHTML) y la versin usada en el resto del documento. Con esto el navegador sabr cmo interpretar la sintaxis y
contra cual especificacin validar su cdigo. La tabla html_doctypes muestra los tipos de documentos y sus versiones
actualmente en uso. [Para una lista completa que incluye tipos de documentos para XHTML-Basic y XHTML Mobile Profile,
consulte http://en.wikipedia.org/wiki/DOCTYPE].
Language Ver.
Variation
strict
HTML
4.01 transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">
strict

transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
1.1
--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
5.0
--
1.0
XHTML
(X)HTML
Document type
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
Tipos de documento (X)HTML de acuerdo a su versin y variacin
Aunque en HTML es opcional, siempre es conveniente incluir el tipo de documento; y a menos de que se est usando
(X)HTML5 es difcil memorizarlos. Por eso los autores histricamente han tenido una fuente de la cual copiar y pegar los
tipos de documentos en sus creaciones, o confiar en un programa de diseo web que haga el trabajo automticamente.
Si se omite la declaracin del tipo de documento, la mayora de navegadores entran en "quirks mode", un modo de
compatibilidad para poder desplegar pginas web obsoletas que contienen errores o "quirks", con resultados dependientes
del navegador. Si la declaracin del tipo de documento est presente, el navegador entra en modo estndar, y si el
documento es vlido, el comportamiento debera ser homogneo entre navegadores.
El W3C ofrece varias herramientas gratuitas para asegurar la calidad (QA, Quality Assurance) de un sitio web. Entre ellas el
autor puede someter cualquier documento al W3C's Unified Validator (Unicorn) y recibir retroalimentacin de si est bien
formado, se conforma al tipo de documento que tiene declarado, no tiene enlaces rotos y los estilos que usa son vlidos.
Dado que XHTML es una aplicacin XML, todo documento XHTML debe iniciar con la especificacin XML como se ve en el
cdigo de abajo. El W3C recomienda esta prctica, sin embargo, algunas versiones antiguas de navegadores pueden
confundirse y entrar errneamente en "quirks mode", por lo que muchos autores omiten la especificacin XML en sus
documentos XHTML.
1.
2.
3.
4.
5.
6.
<?xml version="1.0" encoding="UTF-8"?>

<html>
...
</html>
Al omitir la declaracin XML se pierde la oportunidad de informar sobre la codificacin del documento. Como un rodeo, los
22/09/2015 11:52 a. m.
26 de 99
autores lo hacen en el encabezado (X)HTML con un elemento de metainformacin, como se hizo en la lnea 6 del listado
prettyprint linenums lang-html 3.1.
3.1.2 El elemento documento

El elemento documento o elemento raz de un documento (X)HTML es html. Normalmente se escribe sin atributos, lo cual es
vlido tanto en HTML como XHTML. Su nico atributo exclusivo en XHTML es el espacio de nombres xmlns, el cual sirve para
indicar que sus identificadores pertenecen al espacio de nombres de XHTML y as evitar que colisionen con otras
especificaciones. Los dems atributos son los comunes para casi todos los elementos XHTML, mostrados en el cuadro
[tab:AtributosComunesXHTML], a excepcin de class. El elemento raz html slo admite dos elementos hijos: un
encabezado (head) y el cuerpo del documento (body).
Atributo
Descripcin
id
Un nombre que identifica de forma nica a un elemento, de tal forma que se le puede hacer referencia posteriomente, en
especial en hojas de estilo y programas de JavaScript.
class
Sirve para agrupar varios elementos bajo un identificador comn. A todos los elementos de una misma clase se les puede
aplicar estilos o acceder desde un programa de JavaScript. Por su parte, un elemento puede pertenecer a varias clases, las
cuales se separan por espacios en blanco en el valor de este atributo.
Indica el idioma en el que se encuentra el contenido del elemento. Su valor es un cdigo de idioma en el estndar
xml:lang [http://www.loc.gov/standards/iso639-2/php/code_list.php||ISO-639]. Slo est disponible en XHTML. Tiene prioridad

sobre lang.
lang
dir
Igual que xml:lang. Est disponible tanto en HTML como XHTML.

La direccin del texto que se encuentra en el contenido del elemento. Puede tomar tomar los valores ltr para izquierda a
derecha y rlt para derecha a izquierda.
Atributos comunes para la mayora de elementos (X)HTML
3.1.3 Encabezado del documento

El encabezado del documento (X)HTML contiene informacin sobre el documento mismo pero que no es considerado
parte del contenido, a lo que frecuentemente se le llama "metadatos" y son tiles para los navegadores o motores de
bsqueda. Los elementos que pueden aparecer en el encabezado son: el ttulo del documento, metadatos, hojas de estilo,
programas de JavaScript y otros objetos. En esta seccin se estudiarn los dos primeros.
El ttulo del documento se escribe como un texto simple en el contenido del elemento title y es obligatorio en XHTML.
No es parte del contenido del documento porque las personas lo usarn antes de tener acceso a l. Por eso, es uno de los
textos ms importantes y siempre debe escogerse con cuidado, tratando de que sea corto y descriptivo. Aparece en la barra
de ttulo del navegador y en los resultados de los motores de bsqueda como Google. Los lectores lo vern en el historial de
su navegador y con suerte en sus favoritos.
Los metadatos son detalles sobre el contenido del documento como el autor, palabras clave, codificacin del texto, etc. Se
escriben en forma de parejas atributo-valor con el elemento vaco meta. El nombre del metadato se escribe en el atributo
name y el valor del metadato en el atributo content. Si el nombre del atributo es el mismo que una de las directivas del
encabezado HTTP se puede escribir en el atributo http-equiv en lugar de name. Cuando un documento web es solicitado, el
servidor web puede revisar el encabezado por estos metadatos http-equiv y agregar las respectivas directivas en el
encabezado del mensaje de respuesta HTTP (HTTP Response header) que precede al documento.
La recomendacin (X)HTML no define un conjunto de valores vlidos para ninguno de los atributos de meta, sino que permite
libremente construir perfiles (profiles) de metadatos. El listado prettyprint linenums lang-html 3.3 muestra un ejemplo de
encabezado con ttulo y metadatos comunes. Para ms detalles, revsese la especificacin HTML 4.01. En versiones ms
recientes de (X)HTML, el W3C ha adoptado una notacin ms elaborada para la especificacin de metadatos llamada Marco
de descripcin de recursos (RDF, Resource Description Framework).
1. <head>
2.
3.
<meta name="author" content="Jeisson Hidalgo-Cspedes" />
4.
<meta name="copyright" content="© 2011 ECCI-UCR" />
5.
<meta name="keywords" content="desarrollo web, curso, evaluacin" />
6.
<title>Carta al estudiante</title>
7. </head>
3.1.4 Cuerpo del documento

El cuerpo del documento contiene el contenido del documento. Esto es lo que ve o escucha el usuario una vez que se ha
cargado. El contenido del elemento body puede ser texto puro en HTML, pero normalmente es una mezcla de los elementos
que se explican en el resto de secciones de este captulo.
3.2 Elementos de texto
22/09/2015 11:52 a. m.
27 de 99
En esta seccin se presentarn los elementos ms comunes para estructurar el texto del documento web: encabezados de
secciones (ttulos), prrafos, texto preformateado, texto estructurado y listas de elementos.
3.2.1 Encabezados de secciones

Los autores suelen dividir sus creaciones en secciones temticas. En (X)HTML no hay un elemento para especificar una
seccin temtica completa, pero s para delimitar el ttulo o encabezado de cada seccin. (X)HTML define 6 niveles de
encabezados en orden descendente de importancia h1, h2, ..., h6. El navegador u otro software podra usar los encabezados,
por ejemplo, para construir una tabla de contenidos automticamente.
El formato de cada encabezado es dependiente del navegador. Es usual que empleen tamaos ms grandes y mayor peso
para que sean ms vistosos. En general esto ocurre con todos los elementos visuales de (X)HTML y es bueno que el
navegador escoja su formato por defecto. De esta forma, el autor se concentra en escribir el contenido del documento y el
navegador escoge el formato ideal para un medio especfico, por ejemplo, una limitada pantalla de un dispositivo mvil. Sin
embargo, (X)HTML permite al autor controlar el formato utilizando hojas de estilo como se estudiar en el captulo
siguiente.
Es habitual que la primera actividad que realice un autor sea definir la estructura temtica de su documento antes de
empezar a escribir el contenido de cada seccin. El listado prettyprint linenums lang-html 3.4 muestra los encabezados de
una carta al estudiante de un curso de programacin web. Un abuso de indentacin se hizo para resaltar la jerarqua de
niveles de los encabezados de seccin.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Carta al estudiante</title>
</head>
<body>
<h1>Carta al estudiante</h1>
<h2>Descripcin</h2>
<h2>Objetivos</h2>
<h3>Objetivo general</h3>
<h3>Objetivos especficos</h3>
<h2>Contenido</h2>
<h2>Metodologa</h2>
<h2>Evaluacin</h2>
<h2>Bibliografa</h2>
</body>
</html>
3.2.2 Prrafos
Un prrafo en (X)HTML se escribe con el elemento p como se aprecia en el listado prettyprint linenums lang-html 3.5.
Aunque en HTML es opcional cerrarlo, es recomendable siempre hacerlo. A travs de hojas de estilo se puede controlar el
espaciado entre prrafos, la sangra y otros formatos. No escriba prrafos vacos <p></p> para tratar de dejar espacio en
blanco en el documento, la especificacin (X)HTML recomienda al navegador ignorar estos elementos.
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.
<?xml version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Programacin en C++</title>
</head>
<body>
<p>
Universidad de Costa Rica<br />
Escuela de Ciencias de la Computacin e Informtica<br />
CI1201 - Programacin II
</p>
<hr>
<h1>Introduccin a la programacin</h1>
<p>La computadora es un artefacto electro-matemtico que puede ejecutar una secuencia[...]</p>
<h2>Hola mundo en C++</h2>
<p>
Desde el libro de Kernighan y Ritchie se ha seguido la tradicin del primer programa a
mostrar sea uno simple: escribir la cadena "Hola mundo" en la pantalla o algn otro
medio. La forma de decir "Hola mundo en C++" se aprecia en el siguiente cdigo:
</p>
<pre>
#include <iostream>
int main()
{
22/09/2015 11:52 a. m.
28 de 99
31.
32.
33.
34.
35.
std::cout << "Hola mundo" << std::endl;

}
</pre>
</body>
</html>
Prrafos y texto preformateado en (X)HTML. Correr este ejemplo.

A veces se quiere insertar un cambio de lnea sin iniciar otro prrafo, por ejemplo, en un poema los versos se separan por
cambios de lnea y las estrofas por prrafos. Un cambio de lnea se representa con el elemento vaco <br />, y se aconseja
dejar el espacio en blanco antes de la barra inclinada que cierra la etiqueta, con el fin de evitar problemas con navegadores
viejos que no implementan XHTML.
Cuando la longitud de un prrafo excede el ancho de la ventana, el navegador inserta cambios de lnea automticos (word
wrap). Cuando se quiere evitar que el navegador por esta caracterstica separe dos palabras, estas deben separarse por un
espacio no divisible (not breaking space) obtenible por la referencia de entidad .
El hecho de que (X)HTML ignore los cambios de lnea que usted escribe, no es prctico para escribir cdigo fuente u otros
tipos de escritos donde el espaciado en blanco es relevante. Para esas situaciones (X)HTML provee el elemento de texto
preformateado pre, el cual instruye al navegador mantener los espacios en blanco, usar una fuente monoespaciada y
desactivar el ajuste automtico de lnea (word wrap). La especificacin recomienda reemplazar tabuladores por 8 espacios
en blanco, lo cual muchas veces resulta molesto, por eso, es recomendable utilizar espacios en blanco en lugar de
tabuladores en las secciones pre.
El navegador intentar interpretar el marcado (X)HTML que escriba dentro de un elemento pre, por esto debe al menos
reemplazar los tres caracteres especiales (<, > y &) con sus referencias de entidad respectivas (<, > y &), o escribir
el texto dentro de una seccin CDATA si su documento es XHTML [Desdichadamente la mayora de navegadores actuales
ignoran las secciones CDATA].
Un elemento hr (hard return) crea una lnea horizontal que sirve para separar prrafos tratando de hacer una separacin
ms visible entre ellos, por ejemplo, para separar los cambios temticos entre estrofas de un poema. Es un elemento vaco y
su apariencia debe ser estrictamente controlada con estilos.
3.2.3 Texto estructurado

(X)HTML define los elementos de frase (phrase elements) para agregar informacin a fragmentos de texto. Son elementos
que afectan no a un prrafo sino slo a algunas palabras de un prrafo, por ejemplo, denotan nfasis en una palabra, un
trozo de cdigo, una abreviatura, etc. La siguiente tabla lista los elementos de frase definidos en (X)HTML 4.01
Elemento
abbr
Descripcin
Indica una abreviatura, ej.: WWW, HTTP, etc., PhD. Son siglas o palabras reducidas.
acronym Indica un acrnimo, ej.: sonar, codec, JSON. Son abreviaturas que se leen como si fueran una palabra normal.
cite
Indica una cita o referencia a otras fuentes. No soportado en la mayora de navegadores.
code
Indica un fragmento de cdigo informtico.
dfn
Indica un trmino que se est definiendo.
em
Indica nfasis.
kbd
Indica que el texto debe ser ingresado o tecleado por el usuario.
samp
Indica salida de programas informticos.
strong
Indica mayor nfasis.
var
Indica una variable de un programa informtico.

Elementos de frase en (X)HTML
Los dos elementos de frase de uso ms comn son em y strong. Normalmente los navegadores los despliegan en itlicas y
negritas respectivamente, pero se puede alterar con hojas de estilo. Los dems elementos de frase estn orientados a
documentos tcnicos. El listado prettyprint linenums lang-html 3.6 muestra el uso de alguno de estos elementos.
1. <p>
2.
Se dice que <em>las entidades</em> describen la <strong>estructura fsica</strong>
3.
y <em>los elementos</em> la <strong>estructura lgica</strong> de los documentos
4.
<abbr title="Lenguaje de marcado extensible (eXtensible Markup Language)">XML</abbr>.
5.
La estructura lgica (elementos) y fsica (entidades) se representa dentro del
6.
documento <abbr title="Lenguaje de marcado extensible (eXtensible Markup Language)">
7.
XML</abbr> agregando <strong>el marcado</strong>, el cual
8.
se delimita de <em>los datos de carcter</em> encerrando la descripcin de los
9.
elementos dentro de parntesis angulares ("<code><</code>" y "<code>></code>"),
10.
que se conocen como <dfn>etiquetas</dfn> y <em>las referencias a entidades</em> entre
11.
el signo "<code>&</code>" y el punto y coma ("<code>;</code>"). Es decir, el
12.
texto encerrado dentro de estos cuatro caracteres se conoce como <dfn>marcado</dfn>,
13.
lo restante como <dfn>datos de carcter</dfn>. La combinacin del <em>marcado</em>
14.
ms los <em>datos de carcter</em> son el <dfn>texto XML</dfn> [Gold99].
15. </p>
Elementos de frase en (X)HTML. Correr este ejemplo.
22/09/2015 11:52 a. m.
29 de 99
Todos los elementos de frase tienen un atributo title, en el cual se puede escribir informacin adicional que aparece
cuando hay cierta interaccin con el elemento, normalmente un "tooltip" cuando el puntero del ratn pasa sobre ellos. Esto
es til para expandir el significado de las abreviaturas y acrnimos sin tener que incluir estas definiciones explcitamente en
el texto cada vez que se quiere usar la abreviatura. Ntese que esto se hizo en el listado prettyprint linenums lang-html 3.6
para la abreviatura "XML" que aparece dos veces, lo que genera redundancia de cdigo. Tericamente esta redundancia se
puede evitar en XHTML definiendo entidades generales en el parmetro interno del tipo de documento, sin embargo, los
navegadores actuales las ignoran, por lo que la mayora de autores prefieren hacer algn tipo de programacin del lado del
servidor antes de despachar la pgina web.
Los elementos sub y sup sirven para declarar subndices y superndices respectivamente. Aunque tienen utilidad matemtica
y en otras notaciones cientficas, realmente se mantienen en la recomendacin para otros textos. Ejemplos:
Texto
Cdigo (X)HTML
El 1 ro de la clase El 1<sup>ro</sup> de la clase

May 3 rd, 2011
C6H12O6
May 3<sup>rd</sup>, 2011

C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
Subndices y superndices en (X)HTML
3.2.4 Listas
(X)HTML permite definir listas de temes. Las hay en tres tipos: listas ordenadas, listas no ordenadas, y listas de
definiciones. Las tres se pueden anidar. El siguiente listado muestra un ejemplo de los tres tipos de listas y su anidamiento:
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.
<h1>Puesto: Desarrollador web</h1>

<h2>Requisitos:</h2>
<ul>
<li>Conocimiento de estndares web</li>
<li>Programacin en PHP o JSP</li>
<li>DBMS libres: PosgreSQL, MySQL o SQLite</li>
<li>Afiliado al colegio respectivo</li>
</ul>
<h2>Procedimiento de reclutacin</h2>
<ol>
<li>Llenar la frmula RE-TI-C-2348 a mano</li>
<li>Presentarla en las oficinas centrales</li>
<li>Si es seleccionado:
<ol>
<li>Presentarse a realizar el examen RE-TI-E-23</li>
<li>Presentarse a realizar el examen RE-LG-E-02</li>
<li>Si es seleccionado: presentarse a trabajar</li>
</ol>
</li>
</ol>
<h2>Definiciones</h2>
<dl>
<dt>DBMS</dt><dd>Database Management System</dd>
<dt>RE-TI-C-2348</dt><dd>Frmula de cualidades para TI</dd>
<dt>RE-TI-E-23</dt><dd>Examen de tecnologas web</dd>
<dt>RE-LG-E-02</dt><dd>Examen bsico de ingls</dd>
</dl>
Listas de elementos en (X)HTML. Correr este ejemplo.

Las listas ordenadas se escriben con el elemento ol (ordered list). Sirven para indicar que los temes en la lista siguen
cierto orden, como en una serie de pasos a ejecutar o cuando se quiere simplemente enumerar temes. Cada tem de la lista
se escribe dentro del elemento li (list item). Los navegadores les anteponen nmeros arbigos por defecto, pero con estilos
estos se pueden cambiar por nmeros romanos, letras u otras formas.
Las listas no ordenadas se escriben con el elemento ul (unordered list). Sirven para indicar una lista de temes que no
siguen un orden inherente. Visualmente se anteceden con una vieta circular que puede cambiarse con estilos en
rectngulos u otras figuras.
Las listas de definiciones se escriben con el elemento dl (definition list). Sirven para escribir glosarios u otros tipos de
estructuras similares. A diferencia de los tipos de listas anteriores, los temes de las listas de definiciones constan de parejas
trmino-definicin. El trmino se escribe con el elemento dt (definition term) y su definicin con el trmino dd (definition
description).
3.3 Enlaces
Un enlace es un mecanismo que permite acceder desde un documento web a otro documento web o cualquier otro recurso
(un archivo de sonido, imagen, pelcula, ejecutables, correos electrnicos, etc). Se escriben con el elemento a y su sintaxis
bsica es como sigue:
22/09/2015 11:52 a. m.
30 de 99
<a href="destino.url">contenido del enlace</a>
El valor del atributo href (contraccin de hypertext reference) es un URL hacia el recurso que se quiere enlazar. El
contenido del enlace puede ser cualquier cosa, pero tpicamente se usa un texto o una imagen. El navegador permitir al
usuario accionar el contenido del enlace, por ejemplo, haciendo click sobre l. Cuando esto ocurre, el navegador trata de
mostrar el recurso apuntado por el atributo href en la misma ventana donde est el documento con el enlace, y por tanto,
reemplaza a dicho documento. Si el navegador no sabe cmo presentar el recurso, tratar de invocar un programa que s lo
haga o permitir al usuario guardar el recurso en su sistema de archivos.
Los elementos a nunca deben anidarse. A modo de sugerencia trate de usar como contenido del enlace texto que es parte de
la narrativa original del documento, no un "click aqu".
3.3.1 Anclas
El elemento a tambin permite darle nombre a un punto especfico del documento, al cual se le puede hacer referencia
posteriormente con un URL. A este punto se le llama ancla (en ingls, anchor, de ah el nombre del elemento a). La
siguiente notacin crea un ancla en el documento
<a name="nombre_ancla" />
Para hacer referencia a un ancla, se crea un enlace y se le indica al navegador que su destino es el nombre del ancla pero
antecedido por un smbolo de nmero (#). De esta forma un enlace puede apuntar hacia un documento web, y con el
smbolo de nmero hacia una seccin especfica de dicho documento, como se ve en los siguientes ejemplos.

<a href="#Introduccion">Introduccin</a>

<a href="glosario.html#dtd">DTD</a>
Sin embargo, la practicidad de las anclas ha cado desde que el W3C permiti que cualquier elemento pueda ser identificado
de forma nica en el documento con el atributo id, al cual se le puede enlazar utilizando el mismo smbolo de nmero (#),
como se ve en el siguiente ejemplo.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<h1>Tabla de contenidos</h1>
<p>
<a href="#introduccion">Introduccin</a><br />
<a href="#arq_web">Arquitectura web</a><br />
</p>

<h1 id="Introduccion">Introduccin</h1>

<h1 id="arq_web">Arquitectura web</h1>
3.3.2 Ventana objetivo

Cuando el usuario hace click en un enlace, el navegador reemplaza el documento con el recurso referido. A veces este
comportamiento no es el deseado. El atributo target del elemento a permite especificar el nombre de una ventana o frame.
Si no existe ninguna con el nombre especificado, el navegador crear una y mostrar en ella todos los recursos destinados a
ese nombre. Si se usa "_blank" como valor del atributo target, el recurso ser siempre cargado en una ventana o pestaa
nueva del navegador.
<a href="destino.url" target="ventana_objetivo">contenido del enlace</a>
Aunque el atributo target est disponible en todas las variantes de (X)HTML, es prohibido su uso directo en XHTML-Strict,
debido a que especifica comportamiento y eso es responsabilidad de JavaScript. Ante esta restriccin se puede usar el
atributo rel que indica la relacin semntica entre el documento web y el recurso enlazado, y con JavaScript asignar el
atributo target manualmente una vez que el documento se haya cargado. Esto se estudiar luego.
3.3.3 Acceso con el teclado

Los navegadores permiten acceder a los enlaces con el teclado, lo cual es importante para aquellos en modo texto o para
personas con necesidades especiales. Esto adems habilita otras opciones que el desarrollador web debe tener presente.
Se puede asignar atajos de teclado (keyboard shortcuts) a los enlaces ms frecuentes de su sitio web con el atributo
accesskey, el cual recibe slo un carcter, por ejemplo, accesskey="K". El navegador habilitar alguna combinacin de teclas,
como Ctrl+K Alt+K, que permitir activar el enlace o al menos seleccionarlo. Es normal que el autor d una indicacin en
el texto de que el enlace tiene un atajo de teclado, ejemplo:
22/09/2015 11:52 a. m.
31 de 99
<a href="#xhtml_keyboard_shortcuts" accesskey="k">Acceso con el teclado (Ctrl+K)</a>
Desdichadamente el comportamiento de los atajos del teclado son dependientes del navegador, y en algunos pueden no
funcionar o reemplazar otras operaciones preestablecidas del navegador.
La mayora de navegadores permiten recorrer los enlaces, controles de formularios y otros elementos con la tecla tabulador.
El autor puede alterar este orden con el atributo tabindex="n", donde n es la posicin en el orden que se quiere para ese
enlace o elemento. Si se le da un nmero negativo se sacar de la secuencia. Si dos elementos tienen el mismo valor para
este atributo, el navegador seguir el orden de aparicin en el documento.
3.4 Imgenes
La caracterstica ms notable del hipertexto es el soporte de varios medios, entre los que se incluyen las imgenes, las
cuales se almacenan en recursos (archivos) separados al documento web y se referencian desde ste. Para incluir una
imagen se utiliza el elemento vaco img, cuyo atributo src debe tener el URL que identifica el archivo con la imagen, y
puede ser absoluto o relativo al documento. La sintaxis ms bsica del elemento img es como sigue.
<img src="imagen.url" alt="descripcin de la imagen" />
(X)HTML requiere un texto alternativo que ser desplegado cuando la imagen no es cargada por alguna razn, como imagen
inexistente o porque el usuario ha deshabilitado las imgenes en su navegador. Algunos navegadores muestran este texto
como un "tooltip" cuando el puntero del ratn pasa sobre ellas, pero esa funcin es realmente responsabilidad del atributo
title, el mismo que se usa en los elementos de frase estudiados en la seccin de texto estructurado. Si la imagen se va a
usar como una decoracin y no se quieren "tooltips", asigne un valor vaco en estos atributos, de la forma <img alt=""
title="" ... />. La apariencia del texto alternativo se puede ajustar con hojas de estilo.
3.4.1 Tamaos de imagen

Cuando el navegador est cargando un documento web y encuentra una etiqueta <img src="imagen.url" alt="algn texto"
/> con esos atributos, solicita al servidor web que le enve una copia de la imagen. Mientras sta llega, el navegador sigue
cargando (rendering) el resto del documento (X)HTML. Es muy probable que termine de mostrar el documento antes de que
la imagen llegue y que el visitante empiece a leer el documento. Cuando finalmente la imagen es recibida, el navegador la
insertar en el lugar donde encontr el elemento img correspondiente, desplazando el texto que se encuentre debajo. Esto
es molesto para el lector, en especial si el documento tiene un considerable nmero de imgenes o son de gran tamao o
ambas.
El problema anterior se soluciona especificando las dimensiones de la imagen en el documento (X)HTML, de tal forma que el
navegador pueda reservar espacio para la imagen antes de que esta sea recibida. Simplemente especifique las dimensiones
en pixeles con los atributos width y hight.
<img src="imagen.url" alt="texto alternativo" width="320" height="280" />
Si el valor indicado en los atributos ancho o alto de img no coincide con el tamao real de la imagen, el navegador la
escalar. Tambin se puede especificar en ellos un porcentaje de la ventana, algo como width="75%". Normalmente las
aplicaciones de diseo web se encargan de asignar los valores reales de la imagen en forma automtica. El ancho y alto de
una o varias imgenes y otros detalles se pueden controlar con estilos, lo cual es muy til para un conjunto grande de
imgenes que comparten las mismas dimensiones.
3.4.2 Formatos de imgenes

Aunque existen muchos formatos de imgenes, slo unos pocos se pueden utilizar en el web. La tabla Formatos de imagen
muestra una comparacin de los formatos ms soportados entre los navegadores actuales. Es tentador publicar imgenes de
alta calidad, pero su tamao ser considerable y tardarn en cargarse en proporcin inversa al ancho de banda del
visitante. Si una o muchas imgenes hacen lento el cargado de una pgina web, es una invitacin al lector para
abandonarla. El autor debe hacer un balance entre la calidad de la imagen y su tamao en bytes. Por esto es importante
que conozca la diferencia entre los formatos disponibles y cmo ajustar este balance.
Formato
Tipo
Colores
Transparencia Prdida
Utilidad
PNG
Escalar
256 / 16M S
No
Ilustraciones
JPEG
Escalar
16M
No
Fotografas
GIF
Escalar
256
No
Animaciones sencillas
SVG
Vectorial 16M
S
No
Ilustraciones
Formatos de imagen soportados por navegadores
Cuando un autor quiere representar alguna pieza de informacin en forma grfica, debe decidir si utilizar una fotografa,
una ilustracin o una animacin. Esta decisin ayuda en gran medida a delimitar el formato a escoger.
22/09/2015 11:52 a. m.
32 de 99
Una fotografa tiene millones de colores o grises. Se obtienen por cmaras digitales o escneres. Ambos dispositivos no
proveen informacin de transparencia. El formato ms recomendable para fotografas es el JPEG, creado en 1992 por el
Joint Photographic Experts Group. Es un algoritmo de prdida de calidad que trata de descartar detalles que el ojo humano
no percibe con el fin de ahorrar espacio. El formato PNG (Portable Network Graphics) tambin puede almacenar fotografas,
pero sin prdida de calidad, lo cual es poco recomendable para el web ya que su tamao compromete la velocidad de carga
del documento.
Una ilustracin es una imagen, normalmente en dos dimensiones, que contiene texto o lo complementa. Suelen contener
diagramas o dibujos hechos en un programa de cmputo, en contraposicin a una cmara o escner. La cantidad de colores
de una ilustracin suele se reducida. El formato PNG o SVG (Scalar Vector Graphics) son aptos para ilustraciones, la
diferencia entre ambos es el tipo de imagen: escalar o vectorial respectivamente.
Una imagen escalar es un mapa de bits, es decir, una matriz de tamao definido donde cada celda o pixel almacena un
color codificado en forma numrica. "Redimensionar" a menor tamao una imagen escalar provoca que sta se deforme en
especial si no se mantiene su proporcin. Si se agranda una imagen escalar provocar que los pixeles se propaguen a las
celdas adyacentes, generando zonas de colores poco agradables a la vista humana.
Una imagen vectorial est compuesta por figuras geomtricas como puntos, lneas, curvas o polgonos. Sus atributos como
posicin y tamao son los que se almacenan en el archivo. "Redimensionar" una imagen vectorial a cualquier tamao
significa reajustar las posiciones de las figuras geomtricas y volverlas a pintar, lo que provoca que la imagen siempre se
vea agradable a la vista humana.
La explicacin anterior facilita la decisin hacia SVG como formato de eleccin para ilustraciones, sin embargo hay que
tener en cuenta que, aunque SVG es un estndar abrigado por el W3C, su implementacin en los navegadores actuales es
parcial y quiz ausente en aquellos de dispositivos mviles, debido a que su despliegue requiere de mayor poder de cmputo
que un PNG. Algunos sitios web como Wikipedia usan SVG, pero si el navegador no soporta este formato, el servidor web
enva a cambio un PNG autogenerado.
Si el autor encuentra que una animacin es el mejor medio de comunicar algo, puede usar una imagen GIF (Graphics
Interchange Format), que permite animaciones escalares muy sencillas y limitadas a 256 colores. Si se requiere
animaciones vectoriales, el autor podra considerar HTML5 o Adobe Flash. Si se requiere animaciones de ms de 256
colores, se trata de un video y estos pueden incrustarse con objetos como se estudiar en la seccin Objetos multimedia.
Indiferentemente de si se utilizan imgenes escalares o vectoriales, el autor debe conseguir reducir el tamao tanto como
se pueda sin que la imagen se vea desagradable al lector. El autor necesita que el editor de imgenes lo apoye en esta labor.
Normalmente estos programas proveen una opcin que permite variar el tamao en bytes de la imagen u otros parmetros
y ver el efecto en tiempo real en la visualizacin de la misma. Es importante que el autor guarde adems la imagen original
en un formato con mayor calidad o sin prdida alguna.
Existe considerable cantidad de editores de imgenes disponibles, desde los renombrados paquetes de Adobe: Photoshop
para imgenes escalares e Illustrator para imgenes vectoriales. Como opciones libres a estos programas se puede citar
Gimp e Inkscape respectivamente.
3.4.3 Icono de favoritos

Se ha convertido en una prctica comn proveer un pequeo icono que ayuda al visitante a identificar la pgina web. A este
icono se le suele llamar icono de favoritos simplemente favicon (contraccin de favorites icon), porque el navegador lo
almacena junto a los favoritos, y lo despliega en la barra de direcciones o en las pestaas. Usualmente el mismo icono se
utiliza en todas las pginas de un sitio web, lo que le da identidad al sitio entero y por ende tambin se le llama icono de
sitio web (web site icon).
El favicon es un archivo PNG, o uno con extensin .ico que puede contener imgenes de varios tamaos. Normalmente son
de 16x16 pixeles y utilizan fondo transparente. El documento web debe indicar el favicon en su encabezado (head)
utilizando el elemento vaco link e indicar el tipo de imagen y su URL, algo como:
<head>
...
<link rel="icon" type="image/png" href="path/to/favicon.png" />
</head>
Vase http://en.wikipedia.org/wiki/Favicon para otros tipos de imgenes y enlaces a usar como favicons
3.5 Tablas
(X)HTML permite organizar datos en forma tabular con el elemento table. Una tabla consta de filas declaradas con el
elemento tr (table record). Cada fila se compone de celdas td (table data). El siguiente ejemplo muestra una tabla sencilla.
Una tabla consta de tres partes: un encabezado de tabla opcional, el cuerpo de la tabla y el pie de tabla opcional. Cada una
de esas partes consta de filas.
22/09/2015 11:52 a. m.
33 de 99
3.6 Formularios
3.7 Objetos multimedia
3.8 Elementos genricos
22/09/2015 11:52 a. m.
34 de 99
4 Hojas de estilo en cascada CSS

Un documento (X)HTML slo debe tener contenido, es decir, los datos que el autor quiere publicar y su estructura. La
apariencia o presentacin de un documento web debe especificarse en un archivo externo llamado hoja de estilos que indica
cmo debe formatearse la informacin en la pantalla, en papel u otro medio de salida.
La separacin del contenido y la presentacin tiene grandes ventajas. Una hoja de estilos puede reutilizarse en todas las
pginas de su sitio web, lo que les da uniformidad, facilita el mantenimiento y ahorra ancho de banda. Una misma o varias
pginas web pueden ajustarse a diferentes necesidades simplemente cambiando la hoja de estilos. As el autor puede tener
un juego de hojas de estilo en su sitio web; una para cada necesidad: un diseo avanzado para el navegador, grandes
contrastes para personas con necesidades especiales, estilos amigables para impresin en papel (printer friendly), etc. De
esta forma, una misma pgina web puede verse en formas distintas sin cambiar la informacin que contiene.
4.1 Generalidades de las hojas de estilo

Una hoja de estilos es un archivo de texto que contiene reglas de formateo de elementos utilizando un lenguaje especial
conocido como hojas de estilo en cascada (CSS, Cascading Style Sheets), el cual es estndar y definido por el W3C. Por
ejemplo, la siguiente regla hace que todos los ttulos de un documento web sean de color verde:
h1, h2, h3, h4, h5, h6 { color: green; }
En general una regla CSS tiene la siguiente sintaxis:
22/09/2015 11:52 a. m.
35 de 99
selector { declaration }
El selector determina cules elementos sern afectados por los estilos definidos en la declaracin, y puede ser uno o varios
elementos separados por comas. La declaracin es una lista de parejas propiedad: valor que sern aplicadas a los
elementos listados en el selector. Dichas parejas se separan por el smbolo punto y coma (;). Es opcional terminar en punto
y coma la ltima pareja. Con esto la sintaxis se expande a:
element1, element2, ..., elementN
{
property1: value1;
property2: value2;
...
propertyN: valueN;
}
Es muy conveniente que escriba comentarios explicando la intencin de cada regla, o al menos de aquellas no triviales. Los
comentarios utilizan la misma notacin del lenguaje de programacin C:
/* Las definiciones deben estar en negritas y no en itlicas como ocurre en ciertos
navegadores. Globalmente se usa verde para definiciones y ttulos; azul para enlaces. */
dfn
{
font-weight: bold;
font-style: normal;
color: #004444;
}
4.1.1 Ubicacin de las reglas de estilo

La recomendacin (X)HTML permite declarar reglas de estilo en cinco lugares:
1. En el elemento mismo, con el atributo style.
2. En el encabezado del documento web, con el elemento style.
3. En un archivo .css externo el cual se liga al documento con el elemento link.
4. En una hoja de estilos externa provista por el usuario.
5. En la implementacin del navegador web.
De los cinco lugares para especificar estilos en la lista anterior, el Consorcio Web (W3C) desalienta el uso los dos primeros,
ya que el documento web debe almacenar contenido nicamente, no estilos; y los dos ltimos estn fuera del control del
autor. Por eso, se aconseja al autor declarar las reglas de estilo siempre en una o varias hojas de estilos .css externas al
documento web.
El listado prettyprint linenums lang-html 4.1 muestra cmo declarar estilos en los tres lugares donde puede el autor.
Supngase que la lnea 17 representa un archivo de texto con extensin .css que contiene slo una regla y se adjunta al
documento web con el elemento link en el encabezado del mismo (lnea 4). Si dos o ms hojas de estilo se incluyen en el
encabezado, se procesarn en el mismo orden en que se incluyeron.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.


<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/styles1.css"/>
<link rel="stylesheet" type="text/css" media="print" href="path/to/styles2.css"/>
<style type="text/css">
p { color: red }
</style>
...
</head>
<body>
<p style="color: blue">Lorem ipsum ad his scripta blandit partiendo...</p>
</body>
</html>

p { color: green }
El atributo media del elemento link indica si las reglas de estilo aplican a un medio especfico, como la pantalla (screen), la
impresora (print), programas de lectura sintetizada (aural), computadoras de mano (handheld), televisores (tv) y otros. En
el ejemplo anterior, un navegador cargar la hoja styles1.css y los aplicar al documento web para ser visualizado en la
pantalla. Si el usuario decide imprimir el documento, el navegador cargar styles2.css y los aplicar en la copia que
enviar a la impresora. El atributo media es opcional, y si no se especifica en un elemento, se asume que esa hoja de estilos
aplicar a todos los medios, lo que equivale a darle el valor media="all". El atributo media puede contener varios valores
separados por comas, de esta forma, una hoja de estilos puede aplicarse a varios medios simultneamente.
El segundo lugar donde se pueden escribir reglas de estilo es en uno o varios elementos style dentro del encabezado (head)
del documento (X)HTML, como se aprecia en las lneas 6 a 8 del listado prettyprint linenums lang-html 4.1. Ntese que el
encabezado head admite combinar hojas de estilo externas y elementos style en cualquier orden. La especificacin CSS
22/09/2015 11:52 a. m.
36 de 99
indica que el navegador debe respetar este orden, de tal forma que las reglas de estilo que se encuentran en un archivo
.css, tienen el mismo efecto que si se escribiesen directamente en un elemento style del encabezado.
El tercer lugar donde se puede especificar reglas de estilo es en el atributo style del elemento mismo, como se hizo en la
lnea 12 del listado prettyprint linenums lang-html 4.1. En este caso, todas las propiedades aplicarn nicamente a dicho
elemento por lo que no es necesario especificar un selector, ni agrupar las propiedades dentro de llaves { }.
4.1.2 El principio de cascada

En vista de que hay cinco lugares opcionales donde se especifican estilos, puede ocurrir que para una propiedad no haya
ninguna regla, o bien hayan varias. El navegador necesita un algoritmo que especifique cmo actuar en estos casos, al cual
se le llama el principio de cascada y consta de otros tres principios.
Si dos o ms reglas compiten para darle estilo a una misma propiedad, recibir mayor prioridad aquella que tenga mayor
especificidad en su selector. A esto se le llama principio de especificidad.
Si dos reglas compitiendo por la misma propiedad tienen igual especificidad, se tomar la que aparezca de ltimo, es decir,
tendr ms peso aquella que se encuentre ms cerca del elemento. A esto se le llama el principio de ubicacin.
Cuando por el contrario, no se especifican reglas para una propiedad, el navegador debe seguir un principio ms, el
principio de herencia, el cual indica que ante la ausencia de una regla de estilo, el navegador debe aplicar el estilo del
elemento padre. No todos las propiedades son heredables por defecto. Por ejemplo, la fuente lo es pero no el margen. De
esta forma, al asignar la fuente al elemento body, todos los prrafos la heredan, lo cual es deseable; pero si se asigna un
margen grande al body para mantener una separacin visual con los bordes de la ventana del navegador, sera indeseable si
este borde se aplicara entre prrafo y prrafo.
El uso de los tres principios: ubicacin, especificidad y herencia para determinar cul regla debe aplicar a una propiedad de
estilo de un elemento se conoce como principio de cascada. Los navegadores implementan este principio dndole puntos o
pesos a cada regla de estilo siguiendo un clculo propuesto en la especificacin CSS, que cualitativamente se puede resumir
en lo siguiente:
Ante la ausencia de una regla, el estilo se hereda del elemento padre si la propiedad es heredable, si no, se usa
el estilo por defecto del navegador. Si dos o ms reglas compiten por darle estilo a una misma propiedad, se
tomar aquella con mayor especificidad de su selector, independientemente de dnde est ubicada. Con dos
reglas de igual especificidad, ganar la que aparezca de ltimo.
A modo de ejemplo, el listado prettyprint linenums lang-html 4.2 muestra un documento web que tiene dos prrafos y
estilos definidos en tres lugares: una hoja de estilos externa (cascading1.css) enlazada en la lnea 4; un elemento style en
el encabezado (lneas 5 a 7), y un atributo style en el segundo prrafo (lnea 18). Se estudiar el efecto de estos estilos en
tres propiedades: el color, la fuente y el margen.
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>
<title>Estilos en conflicto: cascada</title>
<link rel="stylesheet" type="text/css" href="cascading1.css"/>
p { color: teal; }
</style>
</head>
<body>
<p>Este es el primer prrafo. Ninguna regla de estilo para <code>p</code>
especifica la fuente, por lo que <em>hereda</em> la fuente de su elemento padre
<code>body</code>. Aunque hay una hoja de estilos externa que especifica que el color
del texto de los prrafos debe ser rojo, ste es <strong>verde azulado</strong>
porque hay una regla en el encabezado del documento, que est ms cerca de este
prrafo.</p>
<p style="color: green;">Este es el segundo prrafo. Tiene un atributo de estilo que
sobrescribe el color del texto a <strong>verde</strong>, ya que por
<em>especificidad</em> est ms cerca del elemento. Ninguna regla de estilo formatea
la separacin vertical entre prrafos, por lo que se aplica la que el navegador tenga
implementada internamente.</p>
</body>
</html>
Ejemplo de estilos en cascada. Correr este ejemplo.

body
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 2.5cm;
}
p { color: red; }
Archivo cascading1.css referenciado en el ejemplo anterior.

La fuente es una propiedad heredable de acuerdo a la especificacin CSS. La mayora de navegadores asumen una fuente
22/09/2015 11:52 a. m.
37 de 99
con serifas, como Times New Roman. Al cargar la hoja de estilos el navegador procesa la regla que indica que la fuente del
cuerpo (body) del documento debe mostrarse en Verdana, que es por el contrario una fuente sin serifas (sans-serif);
cualquier regla del autor tiene ms prioridad que el valor por defecto del navegador y por ende el navegador debe usar
Verdana para formatear el texto del body, el cual es vaco.
Al desplegar el primer prrafo, el navegador no encuentra una regla de fuente para dicho elemento de prrafo. Como es una
propiedad heredable, el navegador toma la fuente del padre del prrafo que es el elemento body, y por ende despliega el
texto del prrafo en Verdana. Esto mismo ocurre recursivamente para los elementos hijos del prrafo, como em, strong y
code; y luego para el prrafo siguiente. De esta forma, todo el documento aparece en Verdana como el autor podra esperar.
La propiedad de margen (margin) no es heredable de acuerdo a la especificacin CSS. El navegador web asume un margen
nulo o minsculo para el body, por lo que el texto se suele pegar con los extremos de la ventana del navegador. Al encontrar
la regla margin: 2.5cm, el navegador la aplica al elemento body, haciendo que el margen del documento sea de 2.5
centmetros. Sin embargo, al no ser una propiedad heredable, el navegador no aplica un margen de 2.5 centmetros a los
prrafos ni a los elementos em, strong y code, sino que asume el margen por defecto, que es de unos cuantos pixeles para
prrafos y de 0 pixeles para los otros elementos citados.
El color es una propiedad heredable segn la especificacin CSS. El navegador no encuentra una regla para el color de body
y asume el por defecto del navegador, que es negro. La regla p { color: red; } en la hoja de estilos cascading1.css, indica
al navegador que pinte todos los prrafos en rojo. Pero en la lnea 6 del documento web del listado prettyprint linenums
lang-html 4.2 compite por la misma propiedad: establecer el color de los prrafos en verde azulado (teal). Estas dos reglas
estn en conflicto, y ganar la que tenga mayor especificidad en el selector, sin embargo ambas tienen el mismo selector; y
en tal caso el navegador deber aplicar la que aparezca de ltimo de acuerdo al principio de ubicacin, y por ende, los
parrafos aparecern en verde azulado.
Al pintar el segundo prrafo que inicia en la lnea 18 del listado prettyprint linenums lang-html 4.2, el navegador encuentra
una regla para la propiedad color en su atributo style. De acuerdo al principio de especificidad esta regla tiene la mayor
prioridad y por ende, el segundo prrafo aparecer en verde simple en lugar de verde azulado.
4.1.3 El operador @
4.2 Selectores
4.3 Valores de propiedades

Los valores que pueden tomar las propiedades son de muy diversa naturaleza. Sin embargo, existen algunos dominios
comunes que se resumen en la siguiente tabla y a los cuales se les har referencia luego en este documento.
Dominio
inherit
Descripcin
Dele el valor inherit a una propiedad cuando usted
explcitamente quiere especificar que esa propiedad tome el
mismo valor que la del elemento padre.
Son magnitudes compuestas siempre de un valor y una unidad,
como 2.5cm las cuales no deben estar separadas por espacios. La
unidad se puede omitir slo cuando la magnitud es 0. Hay dos
tipos de unidades:
<length>
Ejemplos
p { margin: inherit; }
body { margin: 2.5cm; }

h1
{
Absolutas: centmetros (cm), milmetros (mm), pulgadas

(in), puntos (pt) y picas ( pc).
margin-top: 2em;
margin-bottom: 0;
}
Relativas: tamao de fuente (em), tamao de la letra x en

la fuente actual (ex), pixeles (px), y porcentajes del valor
de la propiedad del elemento padre (%).
<number> Son nmeros sin unidades.

<url>
<color>
pre { font-size: 85%; }
div.content { z-index: 2; }
URL hacia otro recurso, como una imagen, sonido, etc. Si el URL
es relativo, lo ser con respecto a la hoja de estilos y no al
documento (X)HTML. Encerrar el URL entre comillas es opcional.
No separe la palabra url del parntesis que abre.
body
{
background: url(water.png) repeat;
}
Hay tres formas de especificar colores en CSS:
body { background: black; }

h1 { color: rgb(245, 255, 250); }
h2 { color: rgb(100%, 75%, 50%); }
pre
{
border: solid 1px;
border-color: #80c0a0 #000 #000 #80c0a0;
background: #EFE;
}
Nombres predefinidos. Hay 16 colores predefinidos como

se ve abajo. Los nombres no son sentivos a maysculas y
no se deben especificar dentro de comillas.
Notacin rgb(). Permite construir un color con la cantidad
de rojo, verde y azul, sea con valores entre 0 y 255 (o su
correspondiente hexadecimal), o porcentajes. No se debe
separar la palabra rgb de los parntesis que abren.
Dominios comunes de ciertas propiedades CSS
22/09/2015 11:52 a. m.
38 de 99
Dominio
Descripcin
Notacin #. Se especifica las cantidades de rojo, verde y
azul en notacin hexadecimal antecedidos por un smbolo
de nmero, de la forma #rrggbb, o #rgb si los dgitos de
cada componente se repiten. Las letras hexadecimales
pueden estar en maysculas o minsculas o ambas.
Ejemplos
4.4 Propiedades
4.4.1 El modelo de fuente
4.4.2 El modelo de color
4.4.3 El modelo de caja
4.4.4 El modelo de visualizacin
5 Comportamiento con JavaScript

JavaScript es un lenguaje interpretado por el navegador web que permite al autor manipular dinmicamente el documento,
sus estilos y la ventana misma del navegador, para hacer la experiencia del lector ms natural y amena.
JavaScript fue creado en 1995 por Brendan Eich cuando trabajaba para Netscape. Un ao despus Microsoft produjo su
propia versin llamada JScript. Tambin en 1996, Netscape someti JavaScript a la asociacin Ecma International para
consideracin como estndar de la industria, el resultado fue ECMAScript.
ECMAScript es un estndar internacional de un lenguaje genrico de "scripting" para extender la funcionalidad de un
programa cualquiera, no slo navegadores web. Hay un nmero creciente de implementaciones basadas en ECMAScript que
adems extienden su funcionalidad, como el inicial JavaScript de Netscape, JScript de Microsoft, ActionScript de Macromedia
(adquirida por Adobe), SpiderMonkey y Rhino de Mozilla, etc. Sin embargo, el nombre ECMAScript no tom popularidad, y
cuando la mayora de la gente dice "JavaScript" est haciendo referencia al lenguaje en forma general, no a la
implementacin de Netscape, y as se har en este documento.
JavaScript es un lenguaje genrico que puede utilizar cualquier software que quiera permitir al usuario automatizar tareas
propias; como ocurre en la actualidad para programacin de dispositivos mviles, acceso a bases de datos orientadas a
documentos, animacin digital y otros. Pero su uso ms difundido ha sido histricamente el web, en la programacin en el
lado del cliente y ms recientemente en el servidor web. En este documento se presentar este lenguaje ligado al
navegador web.
5.1 Generalidades
JavaScript es un lenguaje similar a C/C++/Java. Es sensitivo a maysculas y minsculas, por lo que resulta ms consistente
con XHTML que con HTML. Aunque no es obligatorio, cada sentencia en JavaScript debe terminar en punto y coma, y se
considera una mala prctica omitirlos. Los comentarios utilizan la notacin de C++:
// comentario hasta el final de lnea
/* comentario que puede
extenderse varias lneas */
El cdigo JavaScript puede aparecer en cuatro lugares: en el elemento script, en un archivo .js externo, en un evento
intrnseco, y con el pseudoprotocolo javascript:.
5.1.1 Cdigo JavaScript en el elemento script

Se puede escribir cdigo JavaScript en el contenido del elemento script, el cual debe ser hijo directo de head o body. El
siguiente ejemplo muestra los cuadrados de los primeros 20 nmeros naturales:
22/09/2015 11:52 a. m.
39 de 99
1. <body>
2.
<h1>Cuadrados naturales 1</h1>
3.
<script type="text/javascript">
4.
<!-5.
document.write('<ul>\n');
6.
for ( var n = 1; n <= 20; ++n )
7.
document.write('<li>' + n + '<sup>2</sup> = ' + (n * n) + '</li>\n');
8.
document.write('</ul>\n');
9.
-->
10.
</script>
11. </body>
Un elemento script en el cuerpo del documento. Correr este ejemplo.

Mientras el navegador est cargando un documento web, va mostrando sus elementos (ttulos, prrafos, imgenes, tablas,
etc.), a medida que los encuentra. Lo mismo pasa con los scripts. Inmediatamente que el navegador encuentra un elemento
script, ejecuta su cdigo.
En el ejemplo anterior, se invoca al mtodo write() del objeto document que representa al documento ante JavaScript. La
salida del mtodo document.write() es insertada como cdigo (X)HTML inmediatamente despus del elemento script que lo
invoca. Una vez que el script ha terminado su ejecucin, el navegador contina procesando el resto del documento como
de costumbre, y procesar tanto el cdigo insertado con document.write() as como el provisto por el autor en el documento
original.
Como se puede deducir del ejemplo anterior, JavaScript interpreta el texto entre apstrofes ('') como cadenas de
caracteres. El operador de suma (+) cuando alguno de sus operandos es una cadena, hace concatenacin. Las variables no
se declaran precedidas por su tipo de datos, sino por la palabra reservada var. Y el ciclo for tiene la misma sintaxis de C.
5.1.2 Cdigo JavaScript en un archivo externo

El elemento script permite escribir cdigo JavaScript en su contenido, pero el Consorcio Web recomienda sacar el
comportamiento del documento web a un recurso reutilizable, por convencin, un archivo con extensin .js. Este es el
segundo lugar donde se puede escribir cdigo JavaScript. El mismo elemento script permite hacer la inclusin del archivo
externo con el atributo src. El siguiente ejemplo tiene el mismo efecto que el ejemplo anterior:
1. <body>
2.
<h1>Cuadrados naturales 2</h1>
3.
<script type="text/javascript" src="squares_list2.js"></script>
4. </body>
El cdigo JavaScript puede estar en un recurso externo y ser importado con el atributo src del elemento script. Correr este
ejemplo.
document.write('<ul>\n');
for ( var n = 1; n <= 20; ++n )
document.write('<li>' + n + '<sup>2</sup> = ' + (n * n) + '</li>\n');
document.write('</ul>\n');
El archivo JavaScript squares_list2.js referido en el ejemplo anterior.

La especificacin (X)HTML dice que si un elemento script tiene tanto cdigo JavaScript en el contenido como un archivo
referido en el atributo src, el contenido ser ignorado por completo en favor del archivo externo.
22/09/2015 11:52 a. m.
40 de 99
5.1.3 Cdigo JavaScript en los eventos intrnsecos

El tercer lugar donde se puede especificar cdigo JavaScript es en los eventos intrnsecos de ciertos elementos, tales como
onload, onmouseover y onclick. Por ejemplo:
1. <body>
2.
<h1>Eventos en JavaScript</h1>
3.
<button onclick="alert('No me toque');">Un botn!</button>
4. </body>
El autor puede proveer cdigo JavaScript se que ejecuta cuando un evento ha ocurrido, como presionar un botn en este
caso. Correr este ejemplo.
5.1.4 Cdigo JavaScript en el pseudoprotocolo javascript:

El cuarto lugar donde se puede ejecutar cdigo JavaScript es en la barra de direcciones del navegador, con el
pseudoprotocolo javascript:, que es seguido por una o varias instrucciones JavaScript separadas por punto y coma. El
resultado de estas instrucciones, si lo hay, se toma como un string, y es desplegado en la ventana del navegador. Ejemplos:
javascript:5%2
javascript:x = 3; (x < 5) ? 'x is less' : 'x is greater'
javascript:d = new Date(); typeof d
javascript:for(i=0,j=1,k=0,fib=1; i>5; i++,fib=j+k,k=j,j=fib) alert(fib);
javascript:s=''; for(i in navigator) s+=i+':'+navigator[i]+'\n'; alert(s);
5.2 Tipos de datos y variables

JavaScript define siete tipos de datos: booleanos, nmeros, cadenas de caracteres (strings), funciones, objetos, arreglos, y
valores especiales. En las siguientes secciones se explorar cada uno de ellos.
5.2.1 Nmeros
JavaScript no hace diferencia entre nmeros enteros y de punto flotante. Todos son representados internamente como
punto flotante de 64bits (IEEE 754). Las constantes numricas de JavaScript siguen las mismas convenciones de C, excepto
los nmeros octales que no son parte de ECMAScript.
Cuando un valor flotante llega a ser ms grande que el ms grande de los representables, se almacena con el valor especial
Infinity o su opuesto negativo. Cuando se hace una operacin indefinida, se genera un nmero especial NaN (not-anumber), el cual nunca es igual a nada, incluso ni a l mismo, por eso debe usarse la funcin especial isNaN(). Otra funcin
prctica es isFinite(), que prueba si un nmero no es Infinite y no es NaN. A continuacin una lista de constantes
numricas especiales:
Infinity. Valor especial usado en lugar de un nmero gigante que no cabe en un double de 64 bits, por ejemplo el
resultado de la expresin 17/0.
NaN. Acrnimo de "not-a-number". Es un valor especial usado cuando una expresin no genera un nmero vlido,
como la divisin 0/0 o tratar de convertir un string no apto a un nmero como parseInt("cinco").
Number.MAX_VALUE. El nmero ms grande representable en un double de 64 bits.
Number.MIN_VALUE. El nmero decimal ms pequeo (cercano a cero) representable en un double de 64 bits.
Number.NaN. Igual a NaN.
Number.POSITIVE_INFINITY. Igual a +Infinity.
Number.NEGATIVE_INFINITY. Igual a -Infinity.
22/09/2015 11:52 a. m.
41 de 99
5.2.2 Cadenas de caracteres (strings)

Las cadenas literales en JavaScript se encierran entre comillas dobles o simples y se pueden anidar stos. Ya que es comn
escribir cdigo HTML dentro de JavaScript y viceversa, es conveniente uniformar las comillas para cada cual. Por ejemplo:
<a href="" onclick="alert('You\'re welcome')">Thanks</a>
A diferencia de otros lenguajes de programacin, Las cadenas literales tienen que ser escritas en una nica lnea, no pueden
romperse en dos o ms de ellas.
Igual que en C/C++, JavaScript emplea secuencias de escape iniciadas en backslash (\) para representar caracteres
especiales, tales como \n para el cambio de lnea, \r para el retorno de carro, \" para comillas dobles, \' para apstrofe o
comilla simple, \0 para el carcter nulo y \\ para la barra invertida (backslash).
No se debe utilizar el backslash frente a un cambio de lnea para tratar de continuar un string en varias lneas; JavaScript
probablemente lo ignorar. En JavaScript las cadenas de caracteres o strings son un tipo de datos atmico, no un arreglo de
caracteres. De hecho JavaScript no tiene el concepto de carcter (char) como s ocurre en otros lenguajes de programacin.
Un carcter se representa como un string de longitud 1. El mtodo str.charAt(i) permite obtener un string con el carcter
que est en la posicin i de str, donde el ndice i est basado en cero, es decir, 0 representa el primer carcter de la
cadena. El siguiente cdigo muestra varias operaciones con strings:
var
var
var
var
var
str = 'Welcome ' + visitorName; // concatenacin

len = str.length; // longitud de cadena
lastChar = str.charAt(str.length - 1); // obtener un caracter de la cadena
sub = str.substring(3, 4); // obtiene 'come'
i = str.indexOf('e'); // Encuentra la posicin de la primera letra 'e' en str
Aunque algunas implementaciones permiten el uso del operador [] para acceder a un carcter especfico del string, es
recomendable evitar su uso, ya que no forma parte del estndar ECMAScript.
5.2.3 Conversiones entre nmeros y strings

Cuando un nmero aparece en un contexto donde se requiere un string, JavaScript lo convierte automticamente. Por
ejemplo, si uno de los operandos de + es una cadena y el otro es un nmero, el operador + actuar como el operador de
concatenacin y convertir el nmero en una cadena.
var hdd_gb = 500; // 500 GB
var hdd_gib = 500 * Math.pow(10, 9) / Math.pow(2, 30); // 465.661287 GiB
var text = 'Un disco duro de ' + hdd_gb + 'GB equivale a ' + hdd_gib + 'GiB';
document.write('<p>', text, '</p>\n');
El operador de concatenacin convierte nmeros a cadenas automticamente. Correr este ejemplo.

Las conversiones explcitas se pueden hacer con el constructor String(numero), y varios mtodos de la clase Number:
numero.toString(base), numero.toFixed(decimales), numero.toExponential(decimales) y numero.toPrecision(decimales).
Ejemplos:
hdd_gib + "";
String(hdd_gib);
// "465.66128730773926"
// "465.66128730773926"
hdd_gib.toString();
hdd_gib.toString(2);
hdd_gib.toString(16);
// "465.66128730773926"
// "111010001.1010100101001010001"
// "1d1.a94a2"
hdd_gib.toFixed(0);
hdd_gib.toFixed(2);
// "466"
// "465.66"
hdd_gib.toExponential(0);
hdd_gib.toExponential(3);
// "5e+2"
// "4.657e+2"
hdd_gib.toPrecision(4);
hdd_gib.toPrecision(7);
// "465.7"
// "465.6613"
22/09/2015 11:52 a. m.
42 de 99
Cuando un string se utiliza en un contexto donde se requiere un nmero, ser traducido automticamente por JavaScript,
por ejemplo:
var product = "21" * "2";
// product == 42.
Con la notacin anterior no se podr sumar un string a un nmero con el operador +, ya que ser interpretado como
concatenacin. El constructor Number(str) convierte el string str en un nmero, siempre que str tenga formato de nmero
en base 10 y no inicie con espacios en blanco. Las funciones parseInt(str,base) y parseFloat(str,base) asumen que str
est en base base (10, si se omite) y lo convierten en un nmero entero o real respectivamente. Ejemplos:
parseInt("3 blind mice");
parseFloat("3.14 meters");
parseInt("12.34");
parseInt("0xFF");
//
//
//
//
Returns
Returns
Returns
Returns
3
3.14
12
255
parseInt("11", 2);
parseInt("ff", 16);
parseInt("zz", 36);
parseInt("077", 8);
parseInt("077", 10);
//
//
//
//
//
Returns
Returns
Returns
Returns
Returns
3 (1*2 + 1)
255 (15*16 + 15)
1295 (35*36 + 35)
63 (7*8 + 7)
77 (7*10 + 7)
parseInt("eleven");
parseFloat("$72.47");
// Returns NaN
// Returns NaN
Si la cadena a convertir inicia con "0x" se interpreta que est en hexadecimal. Si inicia con 0 su resultado es indefinido, ya
que algunas implementaciones podra interpretar octal o decimal, por lo que es conveniente siempre especificar la base. Si
no se puede convertir a un nmero, estas funciones retornan NaN.
5.2.4 Booleanos
Los valores booleanos slo pueden contener los valores literales false o true. Cuando se usa un booleano en un contexto
numrico, se convierten automticamente a los valores 0 y 1. Si se usan en un contexto string, JavaScript los convierte
automticamente a "false" y "true" respectivamente. El recproco tambin es vlido. Los valores especiales NaN, null,
undefined y la cadena vaca ("") siempre se convierten a false; todos los dems a true (como Infinity). Para hacer
explcita la conversin, es recomendable emplear la funcin Boolean():
var x_as_boolean = Boolean(x);
5.2.5 Funciones
El programador puede declarar sus propias funciones con la palabra reservada function, el nombre opcional de la funcin,
los parmetros sin tipos entre parntesis ( ), y el cuerpo de la funcin entre llaves { }. Las funciones en JavaScript son un
tipo de datos ms, por ende, una funcin es un valor; as, las funciones se pueden almacenar en variables, miembros de
objetos, arreglos, y pasarse por parmetros en una forma ms natural que en C/C++. Cuando una funcin se asigna a un
objeto como un miembro, recibe el nombre especial de mtodo. En caso de asignarse a una variable, puede omitirse el
nombre de la funcin, lo que en JavaScript se llama funcin literal o funcin lambda en homenaje al lenguaje Lisp que
fue uno de los primeros en permitir funciones sin nombre:
// una funcin nombrada
function square1(x) { return x*x; }
// una funcin literal o "lambda"
var square2 = function(x) { return x*x; }
// una funcin construida a partir de strings
var square3 = new Function("x", "return x*x;");
// invoca la funcin a travs de la variable square2
square2(2.5);
Una tercera forma de definir una funcin es pasar sus argumentos y cuerpo como strings a la funcin constructora
Function(), lo cual es poco usado e incluso, menos eficiente. Cuando el valor de una variable es una funcin, se puede
invocar sta usando el operador () tras el nombre de la variable, como se hizo en el ejemplo anterior con square2.
5.2.6 Objetos
Un objeto es una coleccin de valores nombrados, que usualmente se les refiere como propiedades, campos o miembros del
objeto, y se les accede utilizando el operador punto. Por ejemplo:
22/09/2015 11:52 a. m.
43 de 99
image.width
image.height
document.myform.button
document.write("write es un mtodo: una propiedad cuyo tipo de datos es una funcin");
El operador punto permite acceder a las propiedades utilizando identificadores. Pero JavaScript permite tambin usar
cadenas de caracteres para acceder a las propiedades, con el operador corchetes []. Esta segunda notacin permite ver a los
objetos como arreglos asociativos. Ejemplos:
image["width"]
image["height"]
document["myform"]["button"]
document["write"]("write es un mtodo: una propiedad cuyo tipo de datos es una funcin");
Los objetos se crean llamando funciones constructoras con el operador new, despus de lo cual se usan como de costumbre.
Estos objetos son almacenados en memoria dinmica por el navegador, el cual incorpora un recolector de basura (garbage
collector), de tal forma que ahorra al programador la responsabilidad de liberar la memoria de cada objeto creado.
var now = new Date();
var pattern = new RegExp("\\sjava\\s", "i");
var point = new Object();
point.x = 2.3;
point.y = -1.2;
En el ejemplo anterior el objeto point se cre como un objeto vaco, y sus propiedades se fueron agregando luego con el
operador de asignacin. Existe una notacin para definir objetos literales, til para inicializaciones:
{ property1: value1; "property2": value2; ...; propertyN: valueN }
Las llaves {} en JavaScript indican la creacin de un objeto literal. Los nombres de las propiedades pueden declararse como
identificadores o como strings. Los valores de cada propiedad pueden ser de cualquier tipo de datos de JavaScript (booleano,
numrico, string, funcin, arreglo, u objeto), sea como valores literales o como resultado de una expresin aritmtica. As
los objetos se pueden anidar como es de esperar:
var point = { x:2.3, y:-1.2 };
var activo1 =
{
"tipo": "disco_duro",
"precio": 30000, // colones
'tamanno': 500 * Math.pow(10, 9) / Math.pow(2, 30) // GiB
};
var rectangle =
{
color : "#a4f0ca",
background:
{
color: "lightgray",
image: "img/bricks.png",
repeat: "repeat"
},
geometry:
{
topLeft: { x: 45, y: 10 },
extend: { width: 21.93, height: 38.34 }
}
};
Si un objeto se emplea en un contexto Boolean, se traduce a true si no es null. Si el contexto es string se llamar al metodo
toString() y si es numrico a valueOf().
22/09/2015 11:52 a. m.
44 de 99
5.2.7 Arreglos
En JavaScript un arreglo es una coleccin de datos enumerados. Se acceden con un ndice entero, basado en 0, escrito
entre corchetes tras el nombre del arreglo. El siguiente ejemplo obtiene el ancho en pixeles de la segunda imagen en el
documento:
document.images[1].width
Los arreglos pueden tener datos heterogneos. As un elemento del arreglo puede contener otro arreglo, pero no hay
arreglos multidimensionales. Los arreglos se crean con el constructor Array() y sus elementos se pueden agregar
simplemente asignndolos a sus ndices o bien, como parmetros del constructor Array(); pero si se pasa un nico entero a
este constructor, de la forma Array(N) se crear un arreglo con N elementos indefinidos. Ejemplos:
var a = new Array();
// Arreglo vaco, lo mismo que: var a = [];
a[0] = 1.2;
// Un elemento es insertado en la posicin 0
a[1] = "JavaScript";
a[2] = true;
a[4] = { x:1, y:3 };
// La posicin 3 tiene un elemento con el valor undefined
a[5] = function(x) { return x*x; }; // a[5](7) retornar 49
a[6] = new Array();
// Elemento a[6] almacena un arreglo vaco
a[6][0] = -Infinity;
// Inserta un elemento en el arreglo que est en a[6]
var b = new Array(1.2, "JavaScript", true, { x:1, y:3 }); // 4 elementos
var c = new Array(10); // Arrreglo de 10 elementos indefinidos
JavaScript permite crear arreglos literales, preferiblemente utilizados para inicializacin, y son una lista de valores
separados por comas dentro de corchetes, que se asignan secuencialmente empezando en 0. Los elementos tambin pueden
ser indefinidos lo cual se logra omitiendo el valor entre comas:
var b = [ 1.2, "JavaScript", true, { x:1, y:3 } ];
var matrix = [[1,2,3], [4,5,6], [7,8,9]];
// matrix[2][1] == 8
var base = 1024;

var table = [base, base+1, base+2, base+3];
var sparseArray = [1,,,,5];
5.2.8 Valores especiales

El valor especial null se utiliza para indicar que un objeto no tiene valor. El valor especial undefined indica que una variable
u objeto nunca ha sido declarado o nunca se le ha asignado un valor.
5.2.9 Objetos especiales

JavaScript provee varios objetos tiles: Date, RegExp, Boolean, Number y String. El objeto Date sirve para obtener y
manipular fechas u horas, como se aprecia en el siguiente ejemplo.
var text = '';
var now = new Date();
22/09/2015 11:52 a. m.
45 de 99
// Los meses inician en 0. Diciembre es el 11

if ( now.getMonth() == 11 && now.getDate() == 25 )
{
text = 'Hoy es navidad!';
}
else
{
// Fijar en un objeto Date la proxima navidad
var christmas = new Date( now.getFullYear(), 11, 25, 00, 00, 000 );
if ( now.getMonth() == 11 && now.getDate() > 25 )
{
christmas.setFullYear( now.getFullYear() + 1 );
text = 'la prxima ';
}
// Convertir la cantidad de milisegundos que faltan para navidad en dias
var dias = (christmas.getTime() - now.getTime()) / (1000 * 60 * 60 * 24);
text = 'Faltan ' + dias.toFixed(0) + ' das para ' + text + 'navidad';
}
document.write('<p>', text, '</p>\n');
Ejemplo de uso del objeto Date. Correr este ejemplo.

El objeto especial RegExp permite manipular expresiones regulares en JavaScript, siguiendo la misma notacin de Perl.
Ningn valor primitivo en JavaScript tiene mtodos, sin embargo, en algunos ejemplos anteriores, se han invocado algunos
a travs de valores primitivos. Esto es posible ya que JavaScript define tres clases correspondientes a cada uno de los tipos
de datos primitivos, llamadas wrapper objects: Number, String y Boolean. Cuando a un valor primitivo se le invoca un
mtodo, JavaScript automticamente construye un objeto temporal de la clase correspondiente y lo inicializa con el dato
primitivo y luego invoca el mtodo. Es decir, cuando se escribe algo como
var s = "Hola mundo!";
var len = s.length;
La propiedad length no proviene del string s, sino de un objeto temporal String inicializado con s, una copia, que despus de
usarse, se desecha. Este comportamiento tambin aplica para los datos primitivos de Number y Boolean.
5.2.10 Por valor o por referencia

En JavaScript los datos se manipulan por valor y por referencia. Automticamente JavaScript sigue esta regla: valores
primitivos (booleanos y nmeros) son manipulados por valor; los objetos, arreglos y funciones, por referencia. No existe
una notacin especial para que el programador pueda decidir cules manipular por referencia y cuales por valor. Debe
ajustarse a las reglas expuestas y tener los cuidados respectivos.
La manipulacin tiene tres escenarios: cuando se copia un dato, cuando se pasa por parmetro a una funcin y cuando se
compara. Cuando se invoca a una funcin, las copias y referencias simplemente se harn de acuerdo al tipo de dato
enviado. Por ejemplo:
var n = 1;
var t = n;
// Es un nmero, el literal 1 se copia por valor a n

// t ser un nmero, se copia tambin por valor
// Los parametros de la funcion no tienen tipo de datos, reciben por valor o referencia
// de acuerdo a los datos enviados en la invocacion
function addto(total, value) { total += value; }
// Se invoca con dos numeros, al llamar a addto, total y value tendrn copias por valor
// as que la funcion no tendra el efecto que quiere conseguir, y por ende, t se mantendra
// intalterado con su valor 1
addto(t, n);
// La comparacion se hace por valor, es decir, se comparan byte a byte variables distintas
if ( t == n ) document.write('Los nmeros son copiados');
// Se evaluar como true
Cuando los datos se manipulan por referencia, se hace una copia de la direccin del objeto. Es decir, se copian, pasan por
parmetro y comparan direcciones que apuntan a lo mismo, de forma similar a los punteros C. Por ejemplo:
// Crea un objeto y su direccion la copia a hoy
var hoy = new Date();
// Copia la direccion de hoy a navidad, ambas variables refieren al mismo objeto
var navidad = hoy;
// Modifica al objeto apuntado, por ende, 'hoy' tambien referir al 25 de diciembre
navidad.setMonth(11);
navidad.setDate(25);
22/09/2015 11:52 a. m.
46 de 99
// Si se comparan, se har una comparacin de direcciones, y se evaluar como true

if ( hoy == navidad ) document.write('Hoy es navidad!');
// se crea otro objeto distinto pero con iguales datos
var navidad2 = new Date(navidad.getFullYear(), 11, 25);
// Esta comparacion evaluara como falsa, ya que tienen direcciones distintas
if ( navidad == navidad2 ) document.write('La navidad es universal!');
// Una funcion recibira por valor o referencia dependiendo de como se le invoque

function addDays(date, days)
{
date.setDate( date.getDate() + days );
}
// En esta invocacion, date recibira una copia de direccion de navidad y days una copia del
// literal 6 logrando el efecto deseado para navidad, pero 'hoy' se vera afectado tambien.
addDays(navidad, 6);
// Esta funcion no provoca el efecto deseado pero ilustra como trabajan las direcciones
function addDaysB(dateB, daysB)
{
var tmpDate = new Date(dateB);
tmpDate.setDate( tmpDate.getDate() + daysB );
dateB = tmpDate; // Esto solo modifica la direccion de dateB y no al objeto real
}
// Al hacer esta invocacion la funcion addDaysB crea otro objeto internamente y lo asigna a su
// parametro temporal dateB y no a navidad2. Al salir de la funcin, navidad2 permanece
// inalterada. Esto tambi explica cmo actuar cuando no se quiere alterar datos que son pasados
// por referencia: haciendo copias
addDaysB(navidad2, 6);
Los strings no caben en ninguna de esas dos categoras. Una vez creado un string, JavaScript no permite modificarlo, es
decir, son inmutables. Asi que no tiene importancia saber si se pasa por copia o por referencia. Puede pensarse lo segundo
por razones de eficiencia. Lo nico que se puede averiguar es si se comparan por valor o por referencia, de esta forma:
// Determining whether strings are compared by value or reference is easy.
// We compare two clearly distinct strings that happen to contain the same
// characters. If they are compared by value they will be equal, but if they
// are compared by reference, they will not be equal:
var s1 = "hello";
var s2 = "hell" + "o";
document.write(s1 == s2 ? "Strings compared by value" : "Strings compared by reference");
5.2.11 Variables
Una de las primeras diferencias con otros lenguajes como C es que las variables de JavaScript no tienen un tipo de datos,
por lo que es perfectamente vlido asignarles un valor de un tipo y luego otro de diferente naturaleza:
var i = 16;
i = "diecisis";
Antes de que usted pueda usar una variable, tiene que haberla declarado con la palabra reservada var, o JavaScript
declarar una implcitamente por usted. Lo cual puede traer efectos secundarios. En la declaracin se deben inicializar las
variables, sino JavaScript lo har con el valor undefined.
Si una variable se declara dos veces en secciones var distintas y la segunda declaracin tiene inicializacin acta como una
simple asignacin. Todas las variables declaradas en una seccin var son permanentes, es decir, no se pueden eliminar con
el operador delete. La primera seccin de la clusula for o for/in, permite tambin declarar variables.
for(var i = 0; i < 10; ++i) document.write(i, '\n');
for(var i in obj) document.write(i, '\n');
Cuando se trata de leer una variable que no existe, se genera un error y el navegador detiene la ejecucin del script. Si se
le trata de asignar algo a una variable inexistente, se crear una variable global implcita. Las variables globales son visibles
en cualquier lugar donde haya cdigo JavaScript.
Las variables locales son aquellas creadas en secciones var en los cuerpos de las funciones, incluyendo a los parmetros. Las
variables locales se superponen a las globales. A diferencia de C y Java, JavaScript no tiene diferente alcance (scope) en
cada bloque. Mejor dicho, los bloques de JavaScript lo definen las mismas funciones y no las parejas { }, as todas las
variables de una funcin comparten el mismo alcance, indiferentemente del nivel de anidamiento de llaves en que se
declaren las variables. En el siguiente ejemplo; las variables o, i, j, k comparten el mismo scope.
function test(obj)
{
var i = 0;
if (typeof obj == "object")
{
// i is defined throughout function
22/09/2015 11:52 a. m.
47 de 99
var j = 0;
for(var k=0; k < 10; ++k)
{
document.write(k);
}
document.write(k);
}
document.write(j);
// j is defined everywhere, not just block

// k is defined everywhere, not just loop
// k is still defined: prints 10

// j is defined, but may not be initialized
Las variables locales ocultan las globales, y las locales tienen alcance (scope) de toda la funcin. Esto puede generar
resultados confusos o sorprendentes. Por ejemplo:
1.
2.
3.
4.
5.
6.
7.
8.
var str = "global";

function f( )
{
alert(str);
var str = "local";
alert(str);
}
f( );
// Displays "undefined", not "global"

// Variable initialized here, but defined everywhere
// Displays "local"
En la funcin anterior no se imprime "global" en el primer alert de la lnea 4, porque se est usando la variable str local de
la lnea 5, la cual no ha sido inicializada an. Este comportamiento equivale al siguiente cdigo:
1.
2.
3.
4.
5.
6.
7.
8.
9.
var str = "global";

function f( )
{
var str;
alert(str);
str = "local";
alert(str);
}
f( );
// Displays "undefined", not "global"

// Variable initialized here, but defined everywhere
// Displays "local"
La moraleja es siempre declare sus variables juntas al inicio de una funcin JavaScript. Se puede distinguir dos tipos de
variables: undefined y unassigned. Una variable sera indefinida si nunca se ha declarado. Al tratar de leerla se generar un
error y el navegador detiene la ejecucin del script. Una variable es unassigned si est declarada pero no se le ha asignado
un valor an. Al tratar de leerla, se evaluar con el valor especial undefined (posiblemente mejor hubiera sido llamado
unassigned).
var x;
alert(u);
j = 3;
// Declare an unassigned variable. Its value is undefined.

// Using an undeclared variable causes an error.
// Assigning a value to an undeclared variable creates the variable.
Cuando se inicia un intrprete de JavaScript, lo primero que hace antes de ejecutar el cdigo fuente, es crear el global
object, el cual se encarga de almacenar todas las variables globales que se declaren en el cdigo. Cuando usted declara una
variable global, realmente est declararando una propiedad del global object.
El intrprete de JavaScript tambin define convenientemente otras propiedades (variables y mtodos) en el global object
que son de uso comn, como Infinity, parseInt(), y Math. La palabra reservada this usada en un contexto global (fuera
del cuerpo de una funcin), referencia especficamente al global object. En el caso del navegador, el global object es adems
la ventana del navegador, y se cumple:
this == this.window == window
Si las variables globales son propiedades de un global object qu son las variables locales? Tambin son propiedades de un
objeto temporal llamado call object, el cual se construye en cada invocacin de una funcin, y mantiene juntos los
parmetros, variables declaradas en el cuerpo de la funcin y el cdigo de la misma. Este objeto es el que impide que las
variables locales sobrescriban las globales cuando tienen el mismo nombre. Dentro de una funcin, this hace referencia al
call object en lugar del global object.
5.3 Expresiones
5.3.1 Operadores
Los operadores aritmticos de resta (-), multiplicacin (*), divisin (/) y mdulo (%) slo trabajan con nmeros. Si se usan
con otro tipo de datos, JavaScript intentar convertirlos a nmeros invocndoles el mtodo valueOf(). Ya que todo nmero
en JavaScript es un flotante, la divisin siempre es real, es decir, no hay divisin entera como ocurre en otros lenguajes. El
operador + acta como operador de suma si sus operandos son numricos, y como el operador de concatenacin si al menos
uno de ellos es string.
JavaScript tiene dos operadores para determinar semejanza. El operador de igualdad (==) indica si dos valores son el
mismo incluso tras hacer conversiones de tipos. El operador de identidad (===) dice que dos valores son idnticos si son
22/09/2015 11:52 a. m.
48 de 99
iguales y tienen el mismo tipo de datos. Sus opuestos respectivos son el operador de desigualdad (!=) y de no identidad
(!==). Por ejemplo:
"0" == false
"0" === false
// produce true
// produce false
"037.50" == 37.5 // produce true

"037.50" === 037.50 // produce false
Los operadores de comparacin <,<=,>,>= actan como de costumbre si sus operandos son del mismo tipo, sino se
tratan de convertir a nmeros, y si esta conversin falla se generar NaN, que siempre se evala como false en expresiones
lgicas.
1 + 2
"1" + "2"
"1" + 2
11 < 3
"11" < "3"
"11" < 3
"one" < 3
//
//
//
//
//
//
//
Addition. Result is 3.
Concatenation. Result is "12".
Concatenation; 2 is converted to "2". Result is "12".
Numeric comparison. Result is false.
String comparison. Result is true.
Numeric comparison; "11" converted to 11. Result is false.
Numeric comparison; "one" converted to NaN. Result is false.
Los operadores lgicos son los mismos de C/C++/Java: &&, || y !. Pero guardan una diferencia. Los operandos se
convierten a Boolean temporalmente para hacer la evaluacin del operador, pero el resultado del operador no es Boolean,
sino del tipo de datos del operando izquierdo. A esto se le puede sacar ventaja. En el siguiente ejemplo, la variable max
adquirir el primer valor numrico que no sea null en lugar de un valor booleano.
// If max_width is defined, use that. Otherwise look for a value in
// the preferences object. If that is not defined use a hard-coded constant.
var max = max_width || preferences.max_width || 500;
El operador ternario ?: funciona igual que en C. Los operadores de bits (bitwise operators): and (&), or (|), xor (^), not
(~), shift left (<<), shift right con signo (>>) y shift right with zero fill (>>>), slo trabajan con enteros de 32 bits y su uso
es inusual en JavaScript.
El operador in recibe al lado izquierdo un string y al derecho un objeto o arreglo. Se evala como true si el string es el
nombre de una propiedad del objeto al lado derecho, incluso si es heredada. Ejemplos:
var
var
var
var
var
point = { x:1, y:1 };

has_x_coord = "x" in point;
has_y_coord = "y" in point;
has_z_coord = "z" in point;
tstr = "toString" in point;
//
//
//
//
//
Define an
Evaluates
Evaluates
Evaluates
Inherited
object
to true
to true
to false; not a property of point
property from Object; evaluates to true
El operador instanceof espera al lado izquierdo un objeto y al lado derecho el nombre de una clase (realmente una funcin
constructora). Evala a true si el lado izquierdo (el objeto) es una instancia de la clase.
var d = new Date();
d instanceof Date;
d instanceof Object;
d instanceof Number;
//
//
//
//
Create a new
Evaluates to
Evaluates to
Evaluates to
var a = [1, 2, 3];

a instanceof Array;
a instanceof Object;
a instanceof RegExp;
//
//
//
//
Create an
Evaluates
Evaluates
Evaluates
object with the Date( ) constructor

true; d was created with Date( )
true; all objects are instances of Object
false; d is not a Number object
array with array literal syntax

to true; a is an array
to true; all arrays are objects
to false; arrays are not regular expressions
El operador unario typeof genera un string con el nombre del tipo de datos de su argumento a la derecha, que puede o no
estar entre parntesis. Tpicos resultados son "number", "string", "boolean", "object" (incluye los arreglos y null),
"function" y "undefined" cuando el parmetro no ha sido declarado. Ejemplo:
typeof
typeof
typeof
typeof
typeof
typeof
typeof
typeof
undefined
false
(3 / 1.1)
'0'
{}
[]
null
function() {}
//
//
//
//
//
//
//
//
retorna
retorna
retorna
retorna
retorna
retorna
retorna
retorna
"undefined"
"boolean"
"number"
"string"
"object"
"object"
"object"
"function"
return typeof value == "string" ? "'" + value + "'" : value;
Ya que typeof retorna "object" para objetos de tanta naturaleza, su utilidad se reduce a saber si su operando es o no de un
22/09/2015 11:52 a. m.
49 de 99
tipo de datos primitivo. Para saber la clase de un objeto hay que recurrir a otras tcnicas como el operador instanceof, o la
propiedad Object.constructor, como se ver luego.
Igual que en C++ y Java, el operador new crea un objeto vaco, invoca un constructor para que lo inicialice, y retorna la
direccin de memoria del objeto. Si el constructor no recibe parmetros, puede omitirse sus parntesis.
o = new Object;
d = new Date();
// Optional parentheses omitted here

// Returns a Date object representing the current time
function Point(x, y) { this.x = x; this.y = y; } // Una funcin constructora

p = new Point(3.0, 4.0);
// Crea un objeto vaco y lo inicializa con la funcin constructora
El operador delete intenta eliminar una propiedad de un objeto, un elemento de un arreglo o la variable especificada como
operando. Retorna true si la eliminacin fue exitosa. Algunas variables o propiedades no pueden ser eliminadas, como las
declaradas en secciones var. Si el nico argumento de delete no existe, se retorna true. Ejemplos:
var o = {x:1, y:2};
delete o.x;
typeof o.x;
delete o.x;
delete o;
delete 1;
x = 1;
delete x;
x;
//
//
//
//
//
//
//
//
//
Define a variable; initialize it to an object

Delete one of the object properties; returns true
Property does not exist; returns "undefined"
Delete a nonexistent property; returns true
Can't delete a declared variable; returns false
Can't delete an integer; returns true
Implicitly declare a variable without var keyword
Can delete this kind of variable; returns true
Runtime error: x is not defined
Ntese que delete no se trata de eliminar memoria dinmica como ocurre en C++, lo cual se hace en JavaScript con el
garbage collector, no hay otra forma. El delete de JavaScript elimina una propiedad, es decir, deja de existir; no es que se le
asigne undefined:
var my = new Object( );
my.hire = new Date( );
my.fire = my.hire;
delete my.hire;
document.write(my.fire);
//
//
//
//
//
Create an object named "my"

my.hire refers to a Date object
my.fire refers to the same object
hire property is deleted; returns true
But my.fire still refers to the Date object
5.3.2 Sentencias
Las sentencias en JavaScript deben terminar en punto y coma, aunque no es obligatorio. Las estructuras de control
condicional son las mismas de C: if, else y switch, como muestra el siguiente ejemplo.
if (username != null)
alert("Hello " + username + "\nWelcome to my blog.");
else if ( askname )
{
username = prompt("Welcome!\n What is your name?");
alert("Hello " + username);
}
else
alert("Hello there");
La estructura de control switch es ms flexible que en C. Al ser un lenguaje interpretado, los casos del switch son
expresiones, no slo constantes. El parmetro del switch se compara contra cada case utilizando el operador de identidad
===, hasta encontrar una coincidencia o el default si fue provisto por el programador.
function transfer(file, method)
{
switch(method)
{
case 'none':
break;
case 'ftp':
return transfer_ftp(file);
case 'rsync':
default:
return transfer_rsync(file);
}
}
Los ciclos for, while y do/while tienen la misma sintaxis de C. Por ejemplo:
// Llenar un arreglo con 20 factoriales: del 0 al 19
var factorials = new Array(20);
for(var i = 0; i < factorials.length; ++i)
factorials[i] = i ? i * factorials[i - 1] : 1;
// Imprimir el arreglo en el documento
22/09/2015 11:52 a. m.
50 de 99
for(var i = 0; i < factorials.length; ++i)

document.write(i, '! = ', factorials[i], '<br>');
Ejemplo del ciclo for en JavaScript. Correr este ejemplo.
JavaScript agrega un tipo de ciclo ms, el ciclo for/in, cuya sintaxis es:
for (property_name in object)
statement;
donde property_name se refiere al nombre de una variable, una declaracin var, un elemento de un arreglo, la propiedad de
un objeto, o incluso una expresin. object se refiere a un objeto o una expresin que evala en un objeto. El cuerpo del
for/in, se ejecuta una vez por cada propiedad del objeto y en cada iteracin, property_name adquiere el nombre la
propiedad, es decir, un string. Por ejemplo:
for (var prop_name in my_object)
document.write("name: " + prop_name + "; value: " + my_object[prop_name], "<br/>");
Ya que property_name puede ser una expresin arbitraria, cada vez que se itera se podra evaluar de forma diferente. Por
ejemplo, este cdigo copia los nombres de un objeto en un arreglo:
var obj = {x:1, y:2, z:3};
var arr = new Array( );
var i = 0;
for( arr[i++] in obj )
;
// Imprime cada nombre en el arreglo
for(i in arr) alert(i);
No hay forma de especificar en un for/in el orden de recorrido, es dependiente de la implementacin de JavaScript; lo

nico que asegura el estndar es que se recorrern todas las propiedades enumerables del objeto. Una propiedad es
enumerable si es definida por el objeto mismo, es decir, no es heredada.
22/09/2015 11:52 a. m.
51 de 99
5.4 Arreglos y funciones como objetos

En JavaScript los arreglos y las funciones son objetos, y por ende tienen propiedades heredadas de las pseudoclases Array y
Function respectivamente. A su vez, estas pseudoclases heredan de Object. Esta seccin da una introduccin de algunas
propiedades que estas clases proveen.
5.4.1 Propiedades de Object

Cuando se crea un objeto se guarda una referencia a la funcin que se utiliz para inicializar el objeto, en la propiedad
constructor. Por ejemplo:
var d1 = new Date();
d1.constructor == Date
// Se evala como true
La propiedad constructor sirve para saber si un objeto es instancia directa de una psudoclase particular, mientras que el
operador instanceof sirve para determinar si el objeto es descendiente de una pseudoclase dada. Por ejemplo:
var d1 = new Date();
d1.constructor == Date
d1.constructor == Object
d1 instanceof Date
d1 instanceof Object
d1 instanceof Array
//
//
//
//
//
true
false
true
true, todo objeto es descendiente de Object
false
var o1 = new Object();

var o2 = {};
o1.constructor == Object
o2.constructor == Object
o1 instanceof Object
o2 instanceof Object
//
//
//
//
true
true
true
true
var a1 = new Array();

var a2 = [];
a1.constructor == Array
a2.constructor == Array
a1.constructor == Object
a2.constructor == Object
a1 instanceof Array
a2 instanceof Array
a1 instanceof Object
a2 instanceof Object
//
//
//
//
//
//
//
//
true
true
false
false
true
true
true
true
function f1() {};

var f2 = function() {};
var f3 = new Function('', ';');
f*.constructor == Function // true
f*.constructor == Object
// false
f* instanceof Function
// true
f* instanceof Object
// true
El mtodo toString() heredado de la pseudoclase Object es invocado automticamente por JavaScript cuando necesita
convertir el objeto en un string. La implementacin por defecto retorna la cadena "[object Object]" que es poco
significativa. Por ende, este mtodo debera ser sobrescrito por clases descendientes.
El mtodo valueOf() es invocado automticamente por JavaScript cuando el objeto se utiliza en un contexto numrico.
Tambin debera ser sobrescrito para clases descencientes.
5.4.2 Propiedades de Array

La propiedad ms natural de un arreglo es length que indica la cantidad de elementos que hay almacenados en l. De hecho
es la principal diferencia entre un arreglo y un objeto tradicional. La siguiente tabla muestra una lista de mtodos
heredados de la pseudoclase Array.
Mtodo
Detalles
Mtodos de Array
22/09/2015 11:52 a. m.
52 de 99
Mtodo
push(elems)
Detalles
Inserta los elementos enviados por parmetro al final del arreglo. Retorna la cantidad de elementos que quedan en
el arreglo.
[1,2,3].push(9,null) // retorna 5, deja [1,2,3,9,null]

pop()
Elimina y retorna el ltimo elemento del arreglo. Si est vaco, retorna undefined.
[1,2,3].pop() // deja [1,2]

Inserta los elementos enviados por parmetro al inicio del arreglo. Retorna la cantidad de elementos que quedan
unshift(elems) en el arreglo.
[1,2,3].unshift(9,null) // retorna 5, deja [9,null,1,2,3]
shift()
join(sep)
toString()
reverse()
sort(comp)
slice(i,j)
Elimina y retorna el primer elemento del arreglo
[1,2,3].shift() // deja [2,3]

Retorna un string resultado de concatenar todos los elementos en el arreglo, separados por la cadena sep, o comas
si se omite.
[1,2,3].join() // genera "1,2,3"

[1,2,3].join('; ') // genera "1; 2; 3"
Est sobrescrito para hacer lo mismo que join().
[1,[8,9],2].toString() // retorna "1,8,9,2"

Invierte el orden de los elementos en el arreglo.
[1,2,3].reverse() // genera [3,2,1]

Ordena los elementos en el arreglo de acuerdo a la funcin comparadora comp(), sino los ordena alfabticamente
invocando toString() a cada uno de sus elementos.
[7, 200, 81].sort() // genera [200,7,81]

[7, 200, 81].sort(function(a,b){return a-b;}) // genera [7,81,200]
Retorna un nuevo subarreglo con los elementos encontrados desde la posicin i hasta j - 1, es decir, el que est
en j no se incluye.
[1,2,3,4,5].slice(1,3) // genera [2,3]
5.4.3 Propiedades de Function

En JavaScript las funciones son objetos y por ende tambin tienen propiedades. Una funcin puede ser invocada con igual,
menos o ms argumentos de los esperados por la funcin. En JavaScript es fcil, incluso, implementar una funcin que
reciba una cantidad arbitraria de parmetros.
Cada vez que se invoca una funcin, JavaScript llena un objeto-arreglo arguments que es accesible desde la funcin. Como
es de esperar arguments.length indica la cantidad de argumentos con que se invoc la funcin y arguments[i] accede al
argumento i + 1 en la lista. El siguiente es un ejemplo de una funcin tradicional:
// Sea una funcion que espera dos parametros, ignora los demas
function min(a,b) { return a < b ? a : b; }
// En JavaScript es completamente valido invocarla con menos o mas parametros
min(3, 0.07, -0.5);
// retorna 0.07
// Al hacer la invocacion anterior en min() ocurre lo siguiente:
//
a == 3
//
b == 0.07
//
arguments[0] == 3
//
arguments[1] == 0.07
//
arguments[2] == -0.5
//
arguments.length == 3
//
min.length == 2
// la cantidad de argumentos declarados en la funcion
Como se ve en el ejemplo anterior, la invocacin de min() con tres parmetros falla el resultado esperado por el llamador. La
funcin min podra detectar esto con la propiedad length, heredada de Function, la cual indica la cantidad de parmetros
especificados en la declaracin de la funcin. Por ejemplo:
// Esta version de min solo trabaja con dos parametros
function min(a,b)
{
// Si el numero dado de argumentos es diferente del esperado, lance un error
if ( arguments.length != min.length )
throw new Error('min(): expected ' + min.length + ' arguments, sent ' + arguments.length);
// Solo dos parametros fueron provistos como se esperaba
return a < b ? a : b;
}
try
{
min();
min(3);
min(3, 0.07);
min(3, 0.07, -0.5);
//
//
//
//
Lanza excepcion
Lanza excepcion
Retorna 0.07
Lanza excepcion
}
catch(exc)
{
document.write(exc);
}
Una funcin que exige un nmero estricto de argumentos. Correr este ejemplo.
22/09/2015 11:52 a. m.
53 de 99
Sin embargo, en JavaScript es fcil escribir una funcin que trabaje con un nmero arbitrario de parmetros, como se ve a
continuacin.
function min()
{
var result = arguments.length ? Number.MAX_VALUE : undefined;
for (var i = 0; i < arguments.length; ++i)
if ( arguments[i] < result )
result = arguments[i];
return result;
}
min();
min(3);
min(3, 0.07, -0.5);
// retorna undefined
// retorna 3
// retorna -0.5
Una funcin que recibe un nmero arbitrario de argumentos. Correr este ejemplo.
Ya que una funcin es un objeto, puede tener propiedades, como la propiedad length que es creada por la pseudoclase
Function, y el arreglo arguments visto anteriormente. El programador tambin puede crear sus propias propiedades, las
cuales tendrn el efecto de ser "variables estticas" de la funcin. El siguiente ejemplo muestra una funcin que reporta el
nmero de veces que ha sido invocada.
// Crea una "variable esttica" como propiedad de la funcin. JavaScript "parsea" el cdigo
// antes de ejecutarlo, por lo que el nombre de la funcin puede usarse antes de ser declarada
countCalls.count = 0;
function countCalls()
{
// Usar la propiedad como si fuese una variable esttica
document.write('<p>countCalls() ha sido llamada ' + ++countCalls.count + ' veces</p>');
}
countCalls();
countCalls();
countCalls();
// Imprime "countCalls() ha sido llamada 1 veces"

Simular una variable esttica dentro de una funcin. Correr este ejemplo.
5.5 Pseudoclases
JavaScript no tiene el concepto de clase como s C++ o Java, sino que las clases se simulan con funciones inicializadoras,
objetos y prototipos de objetos. Una funcin constructora o funcin inicializadora es una funcin cualquiera que recibe
un objeto por parmetro this y le crea propiedades y mtodos. Por ejemplo:
// Construye un rectngulo. Recibe un objeto en el parmetro oculto this
function Rectangle(w, h)
{
// Declara propiedades y las inicializa
this.width = w;
this.height = h;
// Tambin puede crear mtodos
this.area = function() { return this.width * this.height; }
}
Las funciones constructoras son invocadas con el operador new. Este operador hace lo siguiente. Crea un objeto vaco, sin
propiedades. Invoca a la funcin constructora pasndole el objeto vaco por parmetro para que lo incialice. Finalmente
retorna la direccin de memoria del nuevo objeto.
var rect1 = new Rectangle(2, 4);
// rect1 = { width:2, height:4 };
var rect2 = new Rectangle(8.5, 11); // rect2 = { width:8.5, height:11 };
document.write("Area of rect2: " + rect2.area() ); // Imprime "Area of rect2: 93.5"
Todos los objetos que sean inicializados con la funcin Rectangle() tendrn un width y un heigth, el desarrollador puede
utilizar con confianza estas propiedades. La funcin constructora no debe retornar un valor, ya que reemplazar el resultado
de la expresin new. Ntese que nunca hubo una clase, sino una funcin constructora y objetos tradicionales que son
inicializados con ella. Por esto se les llama pseudoclases y la funcin constructora es quien da nombre a la pseudoclase.
Como es de esperarse, todos los objetos inicializados con Rectangle() tienen su propia copia independiente de width y
height. Esto implica que en el ejemplo anterior, si a rect2.width se le asigna otro valor, no afectar al valor de rect1.width,
22/09/2015 11:52 a. m.
54 de 99
como el programador naturalmente espera. Sin embargo, esto mismo ocurre con los mtodos: cada objeto inicializado con la
funcin constructura Rectangle() tendr su propia copia independiente del mtodo area(), lo cual es ineficiente. Esta
redundancia se elimina con los objetos prototipo.
Todas las funciones que el programador defina, tendrn automticamente otra propiedad llamada prototype creada por
Function, de la misma forma que length y arguments. La propiedad prototype es un objeto, definido como una "variable
esttica" y por tanto, todas las invocaciones a la funcin tendrn acceso al mismo prototype.
Como la funciones constructoras son funciones normales, tambin tienen una propiedad prototype, y cada vez que se invoca
el operador new, ste implcitamente agrega una propiedad al nuevo objeto para que apunte al prototype de la funcin
constructora. El siguiente pseudocdigo explica lo que hace el operador new internamente:
// El programador define una funcin constructora
function Constructor(a,b) { this.prop1 = a; this.prop2 = b; }
// La pseudoclase Function inserta una propiedad length en la funcin implcitamente
Constructor.length = 2;
// La pseudoclase Function inserta una propiedad prototype en la funcin implcitamente
Constructor.prototype = {};
// El programador crea un nuevo objeto con su funcin constructora

var obj1 = new Constructor(a,b);
// El operador new hace esto internamente:
// 1. Crea un objeto vaco
var newObject = {};
// 2. Crea una propiedad prototype en el objeto que apunta al prototipo de la funcin
newObject.prototype = Constructor.prototype;
// 3. Invoca a la funcin constructora para que inicialice el nuevo objeto, la cual
// crear las propiedades prop1 y prop2
Constructor.call(newObject, a, b);
// 4. Retorna el objeto recin inicializado
return newObject;
// obj1 tendr al final las siguientes propiedades:
obj1.prop1
obj1.prop2
obj1.prototype
El lenguaje JavaScript especifica que cualquier propiedad asignada al objeto Constructor.prototype, ser automticamente
una propiedad compartida por todos los objetos construidos con la funcin Constructor, incluso, aunque dicha propiedad sea
asignada despus de que los objetos fueron creados. De esta forma, las propiedades creadas por la funcin constructora
directamente en el objeto sern copias independientes en cada objeto, y las propiedades creadas en el prototipo de la
misma, sern propiedades compartidas por todos los objetos (lo que en C++ y Java se conoce como miembros estticos).
Por ejemplo:
// Construye un rectngulo. Recibe un objeto en el parmetro oculto this
function Rectangle(w, h)
{
// Cada objeto tendr una copia independiente de estas propiedades
this.width = w;
this.height = h;
}
// Este mtodo ser compartido por todos los objetos creados con new Rectangle()
Rectangle.prototype.area = function() { return this.width * this.height; }
Ntese que el mtodo area() no se defini dentro de la funcin constructora. Si eso se hubiera hecho, se hara la asignacin
por cada rectngulo creado durante la ejecucin del programa, lo cual es ineficiente.
El prototype es el lugar ideal para definir mtodos, constantes y variables compartidas por todos los objetos de una misma
pseudoclase. El programador querr la mayor parte del tiempo tratar estas propiedades como de slo lectura. Si modifica
una propiedad en el prototipo directamente, el cambio afectar a todos los dems objetos inmediatamente; pero si intenta
modificar la propiedad a travs de un objeto cualquiera, crear una nueva propiedad en ese objeto que oculta la del
prototipo. Por ejemplo:
// El programador define una pseudoclase con una funcin constructora
function Circle(radius) { this.radius = radius; }
// Y un mtodo que ser compartido por todos los objetos creados con new Rectangle()
Circle.prototype.area = function() { return Math.PI * this.radius * this.radius; }
// circle1 y circle2 tienen su respectivo radius, son copias independientes
var circle1 = new Circle(7);
var circle2 = new Circle(2.5);
// circle1 y circle2 comparten el mismo mtodo area()
22/09/2015 11:52 a. m.
55 de 99
if ( circle1.area === circle2.area )

{
document.write('circle1.area() = ', circle1.area() ); // Imprime 153.94
}
else
document.write('Circles do not share the same area() method!');
// El programador trata de modificar el mtodo area() a traves de un objeto
circle2.area = function() { return Math.PI * this.radius * this.radius / 2; }
// Lo anterior crea una propiedad area() slo en circle2 que tapa la del prototipo
// Al modificar una propiedad del prototipo afecta a todos los objetos, creados o nuevos
Circle.prototype.area = function() { return 0; }
// Un nuevo objeto aparece
var circle3 = new Circle(3.1);
// Todos los objetos reflejan el
document.write('circle1.area() =
cambio excepto aquellos

', circle1.area() ); //
que han
Imprime
Imprime
Imprime
sobrescrito la propiedad
0
9.82
0
Conflicto de propiedades en el objeto y el prototipo. Correr este ejemplo.

Idealmente cuando un programador define una pseudoclase, debe redefinir algunos mtodos heredados de la pseudoclase
Object. El mtodo toString() debe regresar una representacin "string" del objeto. Opcionalmente puede redefinir el
mtodo parse(). Si su pseudoclase se puede convertir en un valor primitivo, implemente tambin valueOf().
22/09/2015 11:52 a. m.
56 de 99
5.6 Programacin del navegador

JavaScript es un lenguaje genrico que cualquier software puede implementar para permitir al usuario programarlo. Aunque
el nmero de sistemas que implementan JavaScript va en crecimiento, han sido los navegadores web el ejemplo histrico
ms evidente. El navegador web utiliza el lenguaje de programacin JavaScript para exponer cierta funcionalidad al autor
de un sitio web, quien debe aprovecharla slo para mejorar la experiencia del usuario con su obra, hacindole ms
fcil obtener o transmitir informacin. Por ejemplo, creando efectos visuales que guen al usuario, ordenando los valores de
una tabla para ayudarle a encontrar lo que necesita, ocultado o mostrando informacin que le es de inters, o
intercambiando informacin con el servidor de tal forma que el usuario no se confunda con una recarga completa de la
pgina.
Ha ido ganando popularidad una corriente llamada Unobtrusive JavaScript (JavaScript no impertinente). Este paradigma
sustenta que JavaScript no debera tratar de llamar la atencin a s mismo. No consiste en una variacin del lenguaje, sino
en un conjunto de prcticas recomendadas, por ejemplo:
Accesibilidad al contenido (X)HTML. Si JavaScript dificulta al usuario el acceso al contenido; por ejemplo,
lanzando ventanas emergentes; el usuario tendr excelentes provocaciones para deshabilitar el intrprete de
JavaScript en su navegador.
Graceful degradation. Significa que en caso de que el usuario tenga deshabilitado JavaScript en su navegador, o
ste no sea compatible en su totalidad, siempre se pueda tener acceso al contenido (X)HTML.
Separacin del contenido y el comportamiento. El programador debe escribir su cdigo JavaScript en un archivo
externo e incluirlo en el documento (X)HTML con un elemento <script src="program.js">. Esto ahorra ancho de
banda, permite reutilizar el comportamiento a lo largo del sitio y facilita el mantenimiento del cdigo.
5.6.1 El ambiente de desarrollo del navegador

Utilizando JavaScript, el navegador pone a disposicin del autor un conjunto de objetos que permiten manipular ventanas,
cambiar el URL, modificar el contenido o estilo del documento, comunicarse con el servidor web, y otras operaciones tiles.
El objetivo primordial de un navegador web es desplegar al usuario documentos (X)HTML en una ventana. De ah nacen los
dos objetos ms importantes para el programador: la ventana del navegador (window), la cual contiene al documento web
(document) del autor.
El objeto window es quiz el ms importante, porque no slo es un simple objeto, es el objeto global. Todas las propiedades
del objeto global son variables globales, y viceversa: las variables globales que el programador defina se crearn como
propiedades del objeto global window. As, las dos siguientes declaraciones hacen esencialmente lo mismo:
var answer = 722;
window.answer = 722;
De lo anterior se obtiene que da lo mismo escribir window.document que simplemente document. Dicho de otra forma, el
objeto window es el ms importante porque todos los dems objetos que existen se acceden a atravs de l, como se ve en la
siguiente jerarqua parcial:
window
parent
top
navigator
location
history
screen
document
anchors[]
links[]
images[]
applets[]
forms[]
elements[]
La jerarqua que nace del objeto document ha sido estandarizada por el Consorcio Web (W3C) en lo que se llama Document
Object Model (DOM), de tal forma que permite a los programadores JavaScript escribir cdigo portable entre navegadores
para manipular el documento y sus estilos.
Como se indic al iniciar este captulo, el cdigo JavaScript puede correr en cuatro lugares: en un elemento script, en un
archivo .js externo, en atributos manejadores de eventos y en el pseudoprotocolo javascript:. Todos comparten el mismo
objeto global window y su descendencia; por ende, cualquier propiedad definida en uno de estos lugares, es accesible en
todos los dems. En el siguiente ejemplo, la funcin global genRandom() es definida en el primer script y usada en el segundo
script.
<head>
<title>Global properties</title>
// Global property, same as window.genRandom = function() {...}
function genRandom(maxValue)
22/09/2015 11:52 a. m.
57 de 99
{
return Math.floor(Math.random() * maxValue);
}
</script>
</head>
<body>
<p>Su nmero de la suerte es:
// genRandom() is defined in another script. It can be called here
// because both scripts share the same global object: window
var num = genRandom(100);
// Same as window.num = window.genRandom(100);
document.write( num == 13 ? '(no juegue lotera esta semana)' : window.num );
</script>
.</p>
</body>
</html>
Variables globales son propiedades del objeto window. Correr este ejemplo.
5.6.1.1 El modelo de ejecucin de JavaScript
El cdigo almacenado en los elementos script se ejecuta slo una nica vez: cuando el documento (X)HTML es cargado en
el navegador. Una vez que se ha completado la carga, la interaccin se realiza mediante eventos. Cuando ocurre un evento,
normalmente generado por el usuario, el navegador puede invocar cdigo JavaScript del autor que reaccione al evento, el
cual se asocia al objeto que genere eventos a travs de atributos intrnsecos. En el siguiente ejemplo, cuando el usuario
hace click en la imagen se invoca el mtodo next() del objeto window.player, y mientras el mismo botn se mantiene
presionado, se invoca el mtodo forward del mismo objeto.
<img onclick="player.next();" onmousedown="player.forward();" src="img/button_next.svg">
El modelo de ejecucin de cdigo JavaScript sigue esta regla. El cdigo que aparece en los elementos script es ejecutado
en el mismo orden en que aparecen, durante la carga (parsing) el documento web. Cuando un elemento script termina de
ejecutarse, es reemplazado por su salida, la cual es el resultado de las posibles invocaciones a document.write() que se
hayan hecho. Inmediatamente el navegador contina analizando esta salida como cualquier otro cdigo (X)HTML, y
posteriormente el resto del documento web.
Una vez que el documento ha terminado de analizarse, todos los elementos script se habrn ejecutado y el contenido
externo, como imgenes o sonidos, habr sido cargado; el navegador dispara el primer evento: onload. El cdigo manejador
de este evento se escribe como valor del atributo onload del elemento body. El cdigo ejecutado en este punto, puede hacer
modificaciones libremente sobre la estructura del documento, ya que ste se encuentra totalmente cargado y analizado
(parsed); pero no debe invocar a document.write(), ya que har algo inesperado, como reemplazar el documento por
completo.
Despus de cargar el documento, correr los elementos script y atender el evento onload, el navegador entra en la fase de
manejo de eventos (event-driven phase), ejecutando el cdigo JavaScript que se haya asociado a los atributos intrnsecos
segn los vaya disparando el usuario. Estos manejadores de eventos tampoco deben invocar a document.write(), ya que
construirn un nuevo documento, remplazando el anterior.
Finalmente, cuando el usuario abandona la pgina, el browser dispara el evento onunload tambin de body, dando una
oportunidad final al cdigo JavaScript de correr. Este debe ser eficiente y silencioso, por ejemplo para hacer alguna limpieza
necesaria, evitando demoras que confundan al usuario. La siguiente tabla resume los eventos intrnsecos que el autor
dispone para mejorar la comunicacin con el lector.
Evento
Descripcin
onclick se dispara cuando el usuario hace click sobre el elemento. Si onclick retorna false, el browser no
onclick
onmousedown,
onmouseup
onmouseover,
onmouseout
onchange
onload
efecta la operacin por defecto asociada al elemento, por ejemplo, no seguir el hiperlink en caso de un enlace
(a), o no enviara un formulario en caso de un botn submit.
onmousedown es disparado cuando el usuario presiona el ratn sobre un elemento y onmouseup cuando suelta el
botn del ratn. Si ambos eventos ocurren sobre el mismo lugar de un elemento, se generar un onclick. La
mayora de elementos (X)HTML implementan estos dos eventos.
onmouseover se dispara mientras el cursor del ratn est sobre un elemento (X)HTML y onmouseout cuando
sale de l.
El manejador onchange se dispara en los elementos que permiten ingresar texto, como input, select y
textarea cuando el usuario cambia el valor desplegado del elemento y despus mueve el foco hacia otro
elemento.
El evento onload slo se puede asociar a body y es lanzado cuando el documento y su contenido externo,
incluyendo imgenes, han sido completamente cargados.
Eventos intrnsecos
Supngase que en una ventana del navegador el documento actual es reemplazado por otro, por ejemplo, cuando el usuario
escribe un nuevo URL. El nuevo documento no puede acceder a las propiedades que el documento previo cre en la
ventana, ya que el objeto window es reestablecido (reset) por el navegador. Esto implica que todas las funciones y
propiedades que los scripts definan, durarn mientras el documento actual se mantenga activo.
22/09/2015 11:52 a. m.
58 de 99
5.6.1.2 Consideraciones de seguridad

El hecho de que cdigo ajeno sea ejecutado en su mquina a travs de un navegador, da oportunidad a que intenciones
malignas puedan llevarse a cabo. Por esto, los navegadores simplemente no soportan ciertas funcionalidades que en otros
lenguajes son naturales, como la capacidad de leer, escribir o eliminar archivos en la computadora cliente.
Otras funcionalidades estn limitadas. Por ejemplo, JavaScript puede emplear el protocolo HTTP para intercambiar
informacin con el servidor pero no puede abrir un socket o utilizar alguna primitiva de programacin de red. Algunas de
estas restricciones son controlables por el usuario, ajustando la poltica de seguridad del navegador. De acuerdo a esta
configuracin su programa JavaScript:
Podra abrir nuevas ventanas pero slo en respuesta a un evento del usuario (onclik).
Podra cerrar ventanas, pero slo las abiertas por s mismo.
No puede ocultar el texto en la barra de estado cuando el cursor se mueve sobre un enlace.
No puede crear una ventana de rea pequea o muy grande, sin barra de ttulo ni estado.
No puede leer ni modificar documentos cargados de servidores diferentes (same-origin policy).
La poltica del mismo origen (same-origin policy) indica que un script puede acceder nicamente a contenido que tiene el
mismo origen que el documento que contiene el script. Es decir, que su cdigo no puede acceder a otro documento que
tenga cargado su navegador en otra ventana obtenido de otro sitio web. Tambin dicta que el cdigo JavaScript puede
comunicarse a travs del objeto XMLHttpRequest slo con el servidor web de donde se obtuvo el documento.
5.6.2 El objeto window

El objeto global window provee varios mtodos y otras propiedades para manipular el navegador, ventanas, direcciones, el
historial y similares.
5.6.2.1 Temporizadores y animaciones
El mtodo window.setTimeout(code, delay) ejecuta el cdigo JavaScript enviado en el parmetro code, delay milisegundos
despus de que se hace la invocacin. Retorna un identificador opaco que necesitar el programador si desea cancelar dicho
temporizador con el mtodo window.clearTimeout(). El cdigo es invocado slo una vez. Si se quiere que ocurra
repetitivamente, el cdigo en code debe volver a establecer un setTimeout() o bien usar el mtodo timer =
window.setInterval(code, period), el cual ejecuta el cdigo code repetitivamente en intervalos de period milisegundos,
hasta que se invoque window.clearInterval(timer). Esto es muy til para realizar animaciones, como el siguiente reloj
digital.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<head>
<title>Digital clock</title>
body { background: black; margin: 4cm 0; text-align: center; }
#clock { font-size: 6em; color: #151520; text-shadow: 2px 2px 7px lightgray; }
</style>
</head>
<body>
<div id="clock">HH:MM:SS</div>
window.setInterval( 'updateClock()', 1000 );
function updateClock()
{
var date = new Date();
document.getElementById('clock').innerHTML = date.toLocaleTimeString();
}
</script>
</body>
</html>
Un reloj digital animado con JavaScript. Correr este ejemplo.

En el documento anterior, el elemento con identificador clock de la lnea 11 ser utilizado para desplegar la hora local del
navegador. Cuando el navegador carga el cuerpo de este documento, mostrar el div como de costumbre, aplicndole los
estilos que se declararon en la parte superior. Luego encontrar un elemento script y lo ejecutar como es sabido. La
invocacin a setInterval() en la lnea 13 le indica al navegador que debe ejecutar el cdigo updateClock() dentro de 1
segundo, cada segundo. Al ser invocada, la funcin updateClock() debe cambiar el contenido del <div id="clock">...</div>
con el valor actual de la hora. JavaScript requiere una referencia al objeto div que tiene el identificador clock, y la consigue
invocando el mtodo document.getElementById() que se estudiar luego. Una vez obtenida la referencia al elemento div, se
cambia su contenido con la hora actual en el navegador obtenida en forma de string.
22/09/2015 11:52 a. m.
59 de 99
El siguiente ejemplo muestra un texto moverse de izquierda a derecha, en un ancho de 320 pixeles. Esta vez no se modifica
el contenido de un elemento particular, sino su posicin, lo cual es responsabilidad de la presentacin, por lo que el cdigo
JavaScript debe modificar el estilo CSS del elemento con identificador text dinmicamente. El estilo de un elemento se
accede en JavaScript a travs de su propiedad style, la cual es un objeto cuyas propiedades tienen el mismo nombre que
las propiedades CSS en notacin "camelCase" (margin, marginTop, etc.), y sus valores son siempre un string -esto se
estudiar con ms detalle luego-. En este ejemplo, cada vez que se invoca, animateText() calcula en la variable global
textLeft la nueva posicin del texto (lneas 18 y 19); y en la lnea 21 asigna el resultado de este clculo a la propiedad
style.left, cuyo efecto es el mismo a haber escrito #text { left: textLeft; } en CSS. Para que esto funcione, el
elemento #text debe "flotar" sobre el documento, lo cual se hizo en la lnea 6 indicando que su posicin es absoluta.
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.
<head>
<title>Texto animado</title>
body { margin: 0; background: #ccc; color: #C8C8C8; font-size: 3em; }
#text { position: absolute; top: 2em; text-shadow: 1px 1px white, -1px -1px #444; }
</style>
</head>
<body>
<div id="text">Su nombre aqu</div>
<!-window.setInterval( 'animateText()', 50 );
var textLeft = 0;
function animateText()
{
textLeft += 5;
if ( textLeft > 320 ) textLeft = -320;
var element = document.getElementById('text');
element.style.left = Math.abs(textLeft) + 'px';
}
-->
</script>
</body>
Un texto animado con JavaScript para desplazarse en vaivn de izquierda a derecha. Correr este ejemplo.
5.6.2.2 Informacin del navegador, la ventana y la pantalla

El objeto global window tiene varias propiedades de slo lectura que informan el tamao de la ventana, el tamao del
documento y la posicin del navegador en el escritorio:
Propiedad
Descripcin
window.outerWidth,
window.outerHeight
Ancho y alto de la ventana del navegador.
window.screenX,
window.screenY
Posicin del navegador en el escritorio del usuario.
window.innerWidth,
window.innerHeight
Tamao del rea donde el documento se despliega (tambin llamada rea cliente o viewport.
Equivale al tamao de la ventana del navegador sin las barras de men, herramientas, scrollbars,
etc.
window.pageXOffset,
window.pageYOffset
El segmento del documento actualmente desplegado en la ventana del navegador, expresado

como la posicin de las barras de desplazamiento (scrollbars).
Propiedades para obtener la geometra del navegador
El objeto window.screen provee informacin sobre la pantalla del usuario, por ejemplo: las dimensiones en pixeles del
escritorio (screen.width y screen.height), la profundidad de color en bits por pxel (screen.pixelDepth), el rea usable del
escritorio sin incluir la barra de tareas (screen.availWidth y screen.availHeight). Con estas propiedades el programador
puede escoger qu imgenes presentar, centrar una venana en el escritorio o tareas similares.
El objeto window.navigator contiene informacin sobre el navegador mismo, como su nombre (navigator.appName), versin
(navigator.appVersion), el nombre codificado (navigator.appCodeName, el sistema operativo para el que se compil el
22/09/2015 11:52 a. m.
60 de 99
navegador (navigator.platform), si tiene habilitados los cookies (navigator.cookieEnabled), y la identificacin que el

browser enva en sus encabezados HTTP (navigator.userAgent). No es recomendable utilizar esta informacin para escribir
funcionalidad dependiente del navegador, sino para propsitos de estadsticas o bitcoras.
5.6.2.3 Abrir y manipular ventanas

JavaScript permite al autor crear nuevas ventanas de navegador en las que puede cargar documentos existentes de su
servidor web o generar un nuevo documento dinmicamente. Sin embargo, el abuso que ha cometido la publicidad y otros
fines, ha obligado a los fabricantes de navegadores a restringir esta funcionalidad de acuerdo a la poltica de seguridad, por
ejemplo, a permitir abrir ventanas slo en respuesta a un evento del usuario.
Una invocacin al mtodo window.open(url, name, features, repHistory) crea y retorna una referencia hacia una nueva
ventana, y por ende, un nuevo objeto window con toda su descendencia de objetos. La nueva ventana cargar un documento
si se especifica un url, de lo contrario, tendr un documento vaco. El parmetro name le da un nombre a la ventana, si ya
existe una con ese nombre simplemente se reutiliza, y en tal caso, si repHistory es true el historial de navegacin en esa
ventana es reemplazado; si es false o se omite, el nuevo documento es simplemente agregado al historial. El siguiente
ejemplo crea una pequea ventana emergente de ayuda cuando se presiona el botn, y la cierra cuando se vuelve a
presionar con el mtodo window.close() que cierra grficamente la ventana pero no destruye el objeto window.
<button id="helpButton" onclick="toggleHelp()">Ayuda</button>
var helpWindow;
function toggleHelp()
{
if ( helpWindow )
{
helpWindow.close();
helpWindow = undefined;
document.getElementById('helpButton').innerHTML = 'Ayuda';
}
else
{
helpWindow = window.open('help.html', 'help_window', 'width=400,height=350,status=yes,resizable=yes');
document.getElementById('helpButton').innerHTML = 'Cerrar ayuda';
}
}
</script>
Abrir una ventana en JavaScript. Correr este ejemplo.

El parmetro features permite especificar el tamao de la nueva ventana y otras decoraciones grficas. Si se omite, se le
dar tamao estndar y todas las decoraciones existentes (barra de men, barra de estado, ...). Algunas combinaciones son
restringidas por razones de seguridad, por ejemplo, una ventana muy pequea o situada en una zona no visible.
El objeto retornado por window.open() se puede manipular como cualquier otro objeto window. El siguiente ejemplo, genera
un documento dinmicamente en una nueva ventana.
var subwindow = window.open();
var subdoc = subwindow.document;
subdoc.open();
subdoc.write("<h1>Hello world!</h1>");
subdoc.close();
//
//
//
//
//
Create a new window with no content

Get its Document object
Start a new document (optional)
Output document content
End the document
Ntese que tanto document como window tinen mtodos open() y close(). El document.open(url) carga un documento a partir
del url o genera uno vaco si se omite url. Invocar a document.write() es seguro en una ventana nueva ya que el
documento se est cargando (parsing). El mtodo document.close() indica al navegador que el documento ha terminado de
cargarse (parsing), el cual responde deteniendo la animacin de carga. Sino nunca se llama a document.close(), el
navegador creer que est ante un documento incompleto.
El objeto window tiene mtodos para mover y redimensionar la ventana, lo cual es una pobre prctica, ya que esto debe ser
un privilegio del usuario. Son los siguientes: window.moveTo(x, y) mueve la esquina superior izquierda a las coordenadas
dadas; window.moveBy(despX, despY) mueve la ventana tantos pixeles relativos a la posicin actual;
window.resizeTo(width,height) y window.resizeBy(addToWidth, addToHeight) cambian el tamao de la ventana.
22/09/2015 11:52 a. m.
61 de 99
El mtodo window.focus() hace que la ventana sea la activa, y window.blur() hace que renuncie a serlo. Es comn llamar a
focus() despus de hacer un window.open(), ya que las ventanas recin creadas no lo tienen por defecto.
Es comn querer abrir un documento existente en una nueva ventana y luego hacer que sta se desplace a diferentes
fragmentos del documento dinmicamente. Si los fragmentos estn identificados con el atributo id (como en <div
id="frag1">...</div>) o con anclas (<a name="frag2">...</a>), se puede cambiar la ubicacin del documento con un una de
las siguientes instrucciones:
var subwindow = window.open('help.html', 'help_window');
subwindow.location.hash = "#frag1";
// crea una entrada en el History de subwindow
subwindow.location.replace("#frag1"); // no crea una entrada en el History de subwindow
5.6.2.4 Ubicacin del documento

La propiedad window.location de una ventana representa el URL del documento que est desplegado en dicha ventana. Es
un objeto que tiene las siguientes propiedades:
Propiedad
Descripcin
href
Es un string con el texto completo del URL.
protocol, host,
pathname, search
Representan partes individuales del URL.
reload()
Recarga la pgina como si el usuario lo hiciera en el navegador.
replace(url)
Reemplaza el documento actual en la ventana por uno nuevo cuyo URL es dado por parmetro. No genera
una entrada en el historial de la ventana, de modo que el usuario no tiene forma de regresar al documento
previo.
Propiedades del objeto window.location
Al objeto mismo window.location se le puede asignar un string, de la forma window.location = url, que causa el mismo
efecto que llamar su mtodo window.location.replace(url), con la diferencia de que se agrega una entrada al historial de
navegacin de la ventana, de tal forma que el usuario puede retornar al documento previo.
5.6.2.5 Cuadros de dilogo
El objeto window provee tres mtodos para desplegar cuadros de dilogo. window.alert(msg) despliega un mensaje y espera
que el usuario lo acepte. window.confirm(msg) presenta un mensaje y solicita al usuario que decida si lo acepta o cancela, lo
cual se retorna como un boolean. window.prompt(msg, defaultValue) presenta el mensaje msg y espera que el usuario
ingrese un string el cual es retornado o null si cancela. Obligatoriamente.
Deben usarse con moderacin, o mejor an, nunca. La mayora de usuarios se sentir molesta al experimentarlos y
recuerde que ellos tienen el poder de cerrar el navegador. As que estos mtodos son de ligera utilidad para el programador
durante el proceso de desarrollo. Hace varios aos, el navegador reportaba errores de JavaScript utilizando dilogos, lo cual
era impertinente: le reclamaba al usuario errores que no eran de l. Los navegadores han cambiado a ocultar los errores y
el programador debe buscarlos en alguna bitcora o similar.
5.6.3 El objeto document

En esencia un navegador es un programa que despliega un documento web en una ventana. La seccin anterior explica
cmo manipular con JavaScript esa ventana. Esta seccin explica cmo manipular dinmicamente el documento en ella.
Las propiedades ms conocidas del objeto document, son los mtodos write() y writeln(). Ambos reciben una cantidad
arbitraria de parmetros y los escriben en el documento para que sean analizados (parsed) por el navegador
posteriormente. Por eso, estos mtodos slo se deben invocar mientras se est cargando (parsing) el documento. Como es
de esperar, writeln() despus de imprimir todos sus parmetros, agrega un carcter de cambio de lnea. Otras propiedades
tiles de document son:
Propiedad
document.title
Descripcin
Accede al ttulo del documento que se encuentra en el encabezado del mismo.
document.lastModified Contiene un string con la fecha de ltima modificacin del documento.

document.URL
Es un string con el URL completo de donde se obtuvo el documento.
document.referrer
Es un string con el URL del recurso a travs del cual el usuario lleg al documento actual.
document.domain
Indica el dominio al cual pertenece el documento, y es usado por la poltica del mismo origen (same
origin policy).
Propiedades del objeto window.document
22/09/2015 11:52 a. m.
62 de 99
Las propiedades anteriores permiten, por ejemplo, escribir un pie de pgina dinmico, como el siguiente:
document.writeln('<address>');
document.write('<strong><a href="', document.URL, '">', document.title,'</a></strong>');
document.writeln('. ltima actualizacin: ', document.lastModified, '.<br/>');
document.write('©', new Date().getFullYear());
document.write(' <strong><a href="http://', document.domain,'">Mi Sitio</a></strong>');
document.writeln('. Todos los derechos reservados.');
document.writeln('</address>');
Un pie de pgina dinmico con propiedades del objeto document. Correr este ejemplo.
5.6.3.1 El modelo de objetos del documento (DOM)
Cuando el navegador carga un documento (X)HTML crea un objeto JavaScript por cada elemento, comentario, o trozo de
texto que encuentra en el archivo. Estos objetos se asocian entre s en una jerarqua llamada modelo de objetos del
documento (DOM: Document Object Model), la cual es accesible y modificable a travs de JavaScript. Es decir, el DOM es
una representacin interna del documento utilizando objetos. Un cambio en el DOM se refleja de inmediato en el navegador,
lo que permite al autor ajustar el documento dinmicamente para mejorar la comunicacin con sus lectores. Es quiz la
funcionalidad ms importante que un autor busca de JavaScript.
Los objetos en la jerarqua del DOM reciben el nombre genrico de nodos, construidos con la pseudoclase Node. El nodo raz
es siempre el documento, el cual contiene nodos opcionales (declaracin XML, declaracin de tipo de documento,
comentarios) y el nodo del elemento html. Este ltimo tiene dos hijos: el nodo del encabezado (head) y el nodo del cuerpo
del documento (body). Los hijos del nodo body varan de acuerdo al documento. Por ejemplo, la siguiente ilustracin muestra
un documento sencillo y el rbol de nodos que el navegador genera a partir de l.
22/09/2015 11:52 a. m.
63 de 99


<html>
<head>
<title>Documento simple</title>
</head>
<body>
<h1 class="TituloGeneral">rbol de nodos</h1>
<p>Un <em>documento minimalista</em> para estudiar sus nodos.</p>
</body>
</html>
#document
(Document node)
Un documento simple
(Comment node)
html
(Element node)
head
(Element node)
Documento simple
(Text node)
body
(Element node)
rbol de nodos
(Text node)
Un
(Text node)
documento minimalista
(Text node)
para estudiar sus nodos.
(Text node)
Las relaciones jerrquicas entre nodos implican que un nodo puede tener cero o ms nodos hijos (child nodes), nodos
hermanos (siblings), un nodo padre (parent), nodos descendientes y nodos ancestros. Estas relaciones se implementan
como propiedades de la pseudoclase Node. Dado un nodo se puede acceder a los otros nodos con los que est relacionado.
Estas y otras propiedades se resumen en la siguiente tabla.
Propiedad
Descripcin
Node.childNodes[]
Un arreglo que contiene los hijos del nodo actual en el mismo orden en que fueron definidos en el
documento. Si el nodo actual no tiene hijos, este arreglo estar vaco.
Node.firstChild
El primer nodo hijo del nodo actual, o null si no tiene hijos.
Node.lastChild
El ltimo nodo hijo del nodo actual, o null si no tiene hijos.
Node.nextSibling
El nodo hermano que contina al actual o null si es el ltimo hijo del nodo padre (parentNode). Equivale
al nodo que sigue al actual en el arreglo parentNode.childNodes[].
Node.previousSibling
El nodo hermano que precede al actual o null si es el primer hijo del nodo padre (parentNode). Equivale
al nodo que precede al actual en el arreglo parentNode.childNodes[].
Node.parentNode
El nodo padre o contenedor del nodo actual. Es null en el caso del nodo raz, nodos que han sido
separados (removidos) del documento, o nodos creados libremente que an no han sido insertados en el
documento.
Node.nodeType
Un entero que indica el tipo de nodo, por ejemplo: elemento (1), texto (3), comentarios (8).
Node.nodeName
Un string con un posible nombre para el nodo. Si el nodo es un elemento se utiliza el nombre del elemento
("body", "div", "p", etc.). Para los dems tipos de nodos se utiliza un texto generado de concatenar el
smbolo de nmero con el tipo de nodo, por ejemplo "#text", "#comment", "#document", etc.
Propiedades de la pseudoclase Node del XML DOM
22/09/2015 11:52 a. m.
64 de 99
Propiedad
Node.nodeValue
Descripcin
Si el nodo es de texto ( nodeType == 3) o comentario (nodeType == 8), esta propiedad tendr un string
con dicho texto; de lo contrario el valor null.
Node.textContent
Contiene el texto si el nodo es de texto ( nodeType == 3) o comentario (nodeType == 8), en la misma

forma que nodeValue. Para un elemento (nodeType == 1) contiene el texto resultado de concatenar
todos los nodos de texto descendientes.
Node.ownerDocument
Una referencia hacia el documento que contiene este nodo. Sirve, por ejemplo, para saber si dos nodos son
parte del mismo documento.
El siguiente cdigo recorre recursivamente todos los nodos del documento e imprime algunas de las propiedades heredadas
de la pseudoclase Node. La cantidad de nodos est fuertemente influenciada por el espacio en blanco que se utilice para
indentar el marcado, ya que el parser lo interpretar como datos de carcter y los almacenar en nodos de texto. [Para este
ejemplo, la impresin con document.write() debe hacerse en un documento distinto, ya que si se hace sobre el mismo,
generar una recursin infinita].
function printNodes(node, doc)
{
printProperties(node, doc);
for ( var i = 0; i < node.childNodes.length; ++i )
printNodes( node.childNodes[i], doc );
}
function printProperties(node, doc)
{
var properties = ['firstChild', 'lastChild', 'previousSibling', 'nextSibling',
'nodeName', 'nodeType', 'nodeValue', 'textContent' ];
for ( var i = 0; i < properties.length; ++i )
doc.writeln(properties[i], ': ', node[properties[i]]);
}
Una funcin recursiva que recorre el rbol de nodos del documento e imprime propiedades heredadas de la pseudoclase
Node. Correr este ejemplo con indentacin, o sin espacios en blanco.
Adems de las propiedades para acceder a nodos relacionados, la pseudoclase Node provee mtodos para modificarlos:
Propiedad
Descripcin
Node.appendChild(newChild)
Agrega el nodo newChild al final del arreglo childNodes[]. El cambio se ve reflejado de

inmediato en el documento cargado en el navegador. Si newChild ya forma parte del
documento, ser removido de su posicin actual y reinsertado en la nueva posicin.
Node.insertBefore(newChild,
referenceChild)
Inserta el nodo newChild en el arreglo childNodes[] justo antes que el nodo

referenceChild, el cual obligatoriamente debe existir y ser hijo del nodo al cual se le invoc
este mtodo. Si referenceChild es null, newChild se insertar al final. Si newChild ya es
parte del documento, ser removido de su posicin actual y reinsertado en la nueva posicin.
Node.replaceChild(newChild,
oldChild)
Reemplaza oldChild con newChild. Si newChild ya es parte del documento, ser removido
de su posicin actual y reinsertado en la nueva posicin. oldChild es separado del
documento y el cambio se refleja en el navegador. El objeto oldChild no es eliminado de la
memoria, sino que sigue vigente y puede ser reinsertado en el documento posteriormente.
Node.removeChild(child)
Quita al nodo child del arreglo childNodes[] y del documento (el cambio se refleja
visualmente en el navegador). El objeto nodo child no es eliminado de la memoria, y puede
ser reinsertado en el documento posteriormente.
Node.cloneNode(recursively)
Retorna una copia del nodo al cual este mtodo es invocado. No clona los hijos y
descendientes del nodo a menos que se enve true en el parmetro recursively. El nodo
retornado no es parte del documento, por lo que debe ser insertado posteriormente si se
quiere que sea visible al lector.
Node.isEqualNode(other)
Retorna true si el nodo es idntico al enviado por parmetro, es decir, tienen los mismos
valores para sus propiedades de datos (como el nombre y tipo), y as recursivamente para
todos sus hijos.
Mtodos de la pseudoclase Node del XML DOM
Los mtodos anteriores permiten mover nodos existentes de un lugar a otro, o clonarlos. El siguiente ejemplo ordena los
nodos existentes de una lista alfabticamente.
<body>
<h1>Reubicar nodos en el documento</h1>
<ol id="sortable_list">

<li>Los</li>
<li>12</li>
<li>elementos</li>
<li>de</li>
<li>esta</li>
<li>lista</li>
<li>sern</li>
<li>ordenados</li>
<li>alfabticamente</li>
<li>sin contar</li>
<li>Maysculas</li>
<li><p>Incluyendo <strong>este prrafo</strong>.</p></li>
22/09/2015 11:52 a. m.
65 de 99
</ol>
<p><button id="sort_button" onclick="sort_list()">Ordenar</button></p>
<!-function sort_list()
{
// Get the parent node whose children will be sorted
var list_element = document.getElementById('sortable_list');
// Do not sort list_element.childNodes[] in place to avoid flickering
// Get an array of the elements to be processed and work with this array
var elements = [];
// Fill the working array with only the desired nodes to be sorted
for ( var child = list_element.firstChild; child; child = child.nextSibling )
if ( child.nodeName.toLowerCase() == 'li' )
elements.push(child);
// Function used to sort the array
function sort_elements(nodeA, nodeB)
{
var textA = nodeA.textContent.toLowerCase();
var textB = nodeB.textContent.toLowerCase();
return textA < textB ? -1 : textA > textB ? 1 : 0;
}
// Sort the elements alphabetically
elements.sort(sort_elements);
// Now elements are sorted in the array, not in the document, reinsert them
// in the desired order. Note, each node will be dettached from its current
// position and reinserted in the desired position automatically
for ( var i = 0; i < elements.length; ++i )
list_element.appendChild( elements[i] );
}
-->
</script>
</body>
Reubicar nodos en el documento. Correr este ejemplo.

Ntese que en el ejemplo anterior se construy un arreglo temporal (llamado elements[]), el cual se llenar nicamente con
los elementos que deben ser ordenados, y luego sern reinsertados en el documento. Por qu no se hizo este cambio
directamente en list_element.childNodes[]? Hay varias razones. La ms importante es porque childNodes[] no es
realmente un arreglo, sino un objeto que se comporta como tal definiendo la propiedad length y una propiedad con nombre
numrico para cada elemento que se inserte en l. A estos objetos se les llama "objetos que aparentan ser arreglos"
(array-like objects), y su propsito es proveer un arreglo controlado, casi de slo lectura. Por ejemplo, el programador no
puede invocar a list_element.childNodes.sort() porque el array-like object no implementa este mtodo.
La segunda razn es que el arreglo list_element.childNodes[] muy probablemente contiene otros hijos que no son de
importancia ordenar, como nodos de texto (surgidos de los espacios en blanco usados para indentar el cdigo fuente) o
comentarios. Por esto, es una prctica comn construir un nuevo arreglo escogiendo los nodos que realmente se quieren
modificar, afectar al arreglo y cuando el procesamiento est listo, actualizar el documento. Esto reduce adems un
desagradable efecto de parpadeo (flickering) que confunde al lector al ver partes del documento cambiar arbitrariamente.
Cuando se debe crear un nuevo nodo en el documento, no se debe hacer con el operador new, sino utilizar los mtodos
document.createXxx(data) de la pseudoclase Document. Por ejemplo, document.createElement(tagName) crea un nodo
elemento con la etiqueta tagName; document.createTextNode(string) crea un nodo de texto con el string como contenido;
document.createComment(string) crea un comentario. Todos ellos crean un nuevo nodo el cual no est asociado al
documento. El programador debe insertarlo posteriormente en la jerarqua de nodos para que sea visible al lector, usando
alguno de los mtodos de la pseudoclase Node como appendChild(), insertBefore() o replaceChild(). El siguiente ejemplo
inserta nodos en una lista ordenada.
<body>
<h1>Crear e insertar nodos en el documento</h1>
<p><button onclick="create_node()">Agregar nodo</button></p>
<ol id="dynamic_list">
<li>Presione el botn para agregarle elementos a la lista</li>
</ol>
var counter = 0;
function create_node()
{
var list_item = document.createElement('li');
var text_node = document.createTextNode('Elemento autogenerado ' + ++counter);
list_item.appendChild( text_node );
document.getElementById('dynamic_list').appendChild(list_item);
}
22/09/2015 11:52 a. m.
66 de 99
</script>
</body>
Crear e insertar nodos en el documento. Correr este ejemplo.
Los nodos pueden ser de distinta naturaleza: elementos, atributos, comentarios, texto, etc. La propiedad Node.nodeType
indica el tipo de un nodo particular; es un entero que puede tomar el valor de una de las siguientes constantes:
Valor
Constante
Pseudoclase XML Pseudoclase HTML
Node.ELEMENT_NODE
Element
Node.ATTRIBUTE_NODE
Attr
Node.TEXT_NODE
Text
Node.CDATA_SECTION_NODE
CharacterData
Node.ENTITY_REFERENCE_NODE
EntityReference
Node.ENTITY_NODE
Entity
Node.PROCESSING_INSTRUCTION_NODE --
Node.COMMENT_NODE
Comment
Node.DOCUMENT_NODE
Document
10
Node.DOCUMENT_TYPE_NODE
--
11
Node.DOCUMENT_FRAGMENT_NODE
DocumentFragment
12
Node.NOTATION_NODE
--
HTMLElement
Tipos de Node del XML DOM
El siguiente ejemplo muestra una funcin que recorre recursivamente todos los nodos del documento contando cuntos de
ellos son elementos:
<head>
<title>Conteo de elementos</title>
<!-function countElements(node)
{
var count = 0;
if ( node.nodeType == Node.ELEMENT_NODE )
++count;
for ( var i = 0; i < node.childNodes.length; ++i )
count += countElements(node.childNodes[i]);
return count;
}
function fillCount()
{
document.getElementById('count').innerHTML = countElements(document);
}
-->
</script>
</head>
<body onload="fillCount()">
<h1>Conteo de elementos</h1>
<p>El <em>nmero de elementos</em> presentes en este documento es:
<strong id="count"></strong></p>
</body>
</html>
Una funcin recursiva que recorre el rbol de nodos del documento y retorna cuntos de ellos son de tipo elemento. Correr
este ejemplo.
Por cada tipo de nodo hay una pseudoclase hija de Node, que aparece en la tercera columna de la tabla anterior. Por
ejemplo, cuando el navegador carga el documento y encuentra un comentario, construye un objeto de la pseudoclase
Comment, la cual es hija de Node, y cuando encuentra un prrafo crear un objeto Element que es tambin hijo de Node. Esta
jerarqua de pseudoclases se ilustra a continuacin.
22/09/2015 11:52 a. m.
67 de 99
XML DOM
Node
Document
Entity
Element
CharacterData
Text
Att
Comment
HTML DOM
HTMLDocument
HTMLElement
HTMLHeadElement
HTMLTitleElement
HTMLBodyElement
HTMLParagraphElement
Cada subclase agrega propiedades a la pseudoclase Node. Por ejemplo, la pseudoclase Element define las siguientes
propiedades tiles:
Propiedad
Descripcin
Element.tagName
String con el nombre del elemento, por ejemplo: "body", "p", etc.
Element.attributes[]
Accede a los atributos del elemento en el orden en que fueron definidos.
Element.getAttribute(name)
Retorna el valor del atributo name como un string, o null si el elemento no tiene este
atributo.
Element.setAttribute(name,
value)
Asigna el string value al atributo con nombre name del elemento. Si el atributo no existe, lo
crea.
Element.removeAttribute(name)
Elimina el atributo con nombre name del elemento. No produce ningn error si el atributo no
existe.
Element.getAttributeNode(name)
Retorna un objeto de tipo Attr que permite por ejemplo saber si el atributo fue definido o se
est usando su valor por defecto.
Element.id
El valor del atributo id="value", si fue definido para este elemento.
Element.className
El valor del atributo class="value", si fue definido para este elemento.
Element.children[]
Un arreglo que contiene nicamente los elementos hijos de este elemento, en lugar de todos
los nodos como ocurre con el arreglo childNodes heredado de Node. Quiz childElements
hubiese sido un nombre ms apropiado.
Element.childElementCount
La cantidad de elementos hijos. Equivale a children.length.
Element.innerHTML
Un string que con el marcado HTML o XML que representa el contenido del elemento. Si se
asigna otro string, ser "parseado" por el navegador, el resultado reemplazar a los nodos
hijos del elemento, y el efecto ser inmediatamente visible en el documento.
Element.outerHTML
Un string que con el marcado HTML o XML que representa el elemento mismo ms su
contenido. Si se asigna otro string, ser "parseado" por el navegador, el resultado
reemplazar al elemento y sus nodos hijos. El efecto ser inmediatamente visible en el
documento.
Element.style
Un objeto CSSStyleDeclaration con los estilos definidos en el documento para este elemento.
Se puede modificar dinmicamente. No contiene los estilos computados.
Propiedades de Element en el XML DOM
El objeto Attr representa un atributo de un elemento particular, aunque casi nunca se utiliza, ya que el objeto Element tiene
propiedades y mtodos para manipular sus atributos. Quiz su propiedad ms til es Attr.specified que permite
determinar si el valor del atributo fue explcitamente escrito en el documento, sino se est tomando el valor por omisin.
Los navegadores realmente implementan dos modelos de objetos del documento (DOM), uno para XML y otro especializado
para HTML. Dado que JavaScript utiliza XML para transferir datos entre el servidor y el cliente, requiere poder manipular
estos documentos a travs de una jerarqua de objetos. El DOM que se ha presentado hasta el momento se llama XML
DOM, compuesto de objetos bastante genricos como lo es tambin XML.
Sin embargo, el navegador provee un conjunto de pseudoclases especializadas para HTML, que componen lo que se llama
HTML DOM y que heredan de las pseudoclases presentes en el XML DOM. Algunas de estas pseudoclases se presentan en
verde en la figura {ver arriba}. El principal distintivo del HTML DOM es que define la pseudoclase HTMLElement para todos los
elementos que slo tienen los atributos comunes (em, span, dt, etc.) y una pseudoclase HTMLXxxElement para cada elemento
Xxx que tiene atributos propios, como HTMLDocument, body (HTMLBodyElement), p (HTMLParagraphElement), ul
(HTMLUListElement), etc.
Las pseudoclases HTMLXxxElement definen propiedades homnimas a los atributos (X)HTML que son de lectura y escritura.
Por ejemplo HTMLImageElement define el string src que puede cambiarse dinmicamente con JavaScript. Los nombres son
homnimos a XHTML, en minsculas, excepto el atributo class="" que en JavaScript se renombra className debido a que
22/09/2015 11:52 a. m.
68 de 99
class es una palabra reservada. El tipo de datos de cada atributo es el adecuado, por ejemplo, HTMLImageElement.src es un
string, HTMLImageElement.width es un entero y HTMLBodyElement.onload es una funcin de JavaScript.
El autor puede utilizar estos atributos definidos por las pseudoclases HTMLXxxElement directamente con el operador punto o
el operador corchetes, si est seguro de que el objeto es del tipo xxx adecuado. Tambin puede emplear los mtodos
getAttribute(name) y setAttributeValue(name, value) heredados de Element en el XML DOM; que a diferencia de los
atributos de HTMLXxxElement, slo retornan y reciben valores string.
5.6.3.2 Localizar elementos en el documento

De todos los tipos de nodos el elemento es incuestionablemente el ms importante para el autor, tanto que el objeto
Document del XML DOM y HTMLDocument del HTML DOM, proveen varios mtodos tiles para localizar elementos por algn
criterio. Estos se resumen en la siguiente tabla.
Mtodo
Descripcin
document.getElementById(id)
Localiza el nico elemento que tiene el identificador id en su atributo

homnimo. Retorna el objeto HTMLElement que tiene este identificador o
null si ningn elemento en el documento est identificado con el string id.
document.getElementsByTagName(tagName)
Selecciona todos los elementos en el documento que fueron creados con la

etiqueta tagName, y los retorna en un arreglo que tiene el mismo orden en
que aparecen en el documento. Por ejemplo,
document.getElementsByTagName('table') retorna un arreglo con todas
las tablas del documento. La bsqueda se hace sin importar maysculas y
minsculas por compatibilidad con HTML, y si se enva un asterisco '*' en
tagName retorna todos los elementos del documento.
El atributo class="c1 c2 ... cN" indica que el elemento pertenece a una o

ms clases separadas por espacios (y no por comas). Una clase es una
agrupacin de elementos que comparten caractersticas comunes; por
ejemplo, una clase ejercicio podra usarse para distinguir todos los prrafos
document.getElementsByClassName(classValue) que representen ejercicios en un libro (<p class="ejercicio">...</p>) y
aplicarles estilos diferenciados. En JavaScript se puede tener un arreglo con
todos los elementos del documento que pertenecen a una o a varias clases
con el mtodo document.getElementsByClassName() , que recibe un string
con la lista de clases separadas por espacios sin importar el orden.
document.querySelectorAll(selector)
CSS tiene una notacin estndar para seleccionar elementos a los cuales
aplicarles reglas de estilo; por ejemplo, el selector ".ejemplo" recupera
todos los elementos que tienen el atributo class="ejemplo" y "#cap01
a[rel='external']" selecciona a todos los enlaces que tienen el atributo
<a rel="external"> y que son descendientes del elemento identificado con
id="cap01". En JavaScript el mtodo
document.querySelectorAll(selector) retorna un arreglo con todos los
elementos que satisfacen el selector enviado por parmetro.
document.querySelector(selector)
Hace lo mismo que querySelectorAll(), pero slo regresa el primer

elemento que satisface el selector en lugar de una lista de elementos.
document.getElementByName(name)
El atributo name sirve para identificar varios objetos relacionados,

especialmente una familia de botones de radio (radio buttons). Ya que varios
elementos pueden tener el mismo nombre, este mtodo retorna un arreglo de
elementos que comparten dicho nombre.
Mtodos de HTMLDocument para localizar elementos
La pseudoclase Element tambin define los mtodos Element.getElementsByTagName(tagName) y

Element.getElementsByClassName(classValue), que hacen lo mismo que sus contrapartes de Document, con la diferencia de
que en lugar de buscar en todo el documento, buscan nicamente en el subrbol del elemento al cual el mtodo es
invocado.
Por conveniencia la pseudoclase HTMLDocument define las propiedades document.head, document.body y
document.documentElement, que hacen referencia a sus respectivos elementos, como es de esperar:
document.head == document.getElementsByTagName('head')[0];
document.body == document.getElementsByTagName('body')[0];
document.documentElement == document.getElementsByTagName('html')[0];
5.6.3.3 Manejo de eventos

El manejo de eventos esttico consiste en que el autor asocie una funcin o cdigo JavaScript a un atributo mientras escribe
el documento. Por ejemplo:
<body onload="fixExternalLinks(); insertIndex();">
Esto es una mala prctica, ya que el documento (X)HTML slo debe especificar contenido y no estilo o comportamiento. As
22/09/2015 11:52 a. m.
69 de 99
que la asignacin debera hacerse con JavaScript, lo cual es muy simple, por ejemplo:
document.body.onload = function() { fixExternalLinks(); insertIndex(); }
Aunque la asignacin anterior se hizo con JavaScript y no en el documento (X)HTML, el esquema anterior tiene varios
problemas. Supngase que la asignacin anterior se hizo por un archivo1.js que es parte de una biblioteca 1. Un
programador que estuviese creando una biblioteca 2 en JavaScript que es independiente de la anterior, probablemente
necesitar invocar una funcin suya cuando el documento (X)HTML se ha cargado. En nuestro ejemplo esto implicara tener
que agregar una tercera funcin al evento onload de body Cmo hacer para agregar esta tercera funcin y mantener las
otras funciones que pueda ya tener asociadas?. Es deseable disponer de algn mecamismo que diga simplemente "agregue
este manejador al evento onload" sin importar cuntos eventos tiene ya asociados. De esto se encarga el mtodo
addEventListener().
El mtodo element.addEventListener(event, function, phase) hace que la funcin function sea invocada cuando el
elemento element produce el evento event. El nombre del evento en el primer parmetro es un string sin el prefijo 'on', por
ejemplo "mousedown". El segundo parmetro es una funcin que debe recibir slo un parmetro: un objeto de tipo Event y
debe retornar nada. El tercer parmetro es un booleano, con true indica que el evento puede ser atendido por uno de sus
ancestros, mientras que con false se le da primero oportunidad al elemento antes de que a sus ancestros (el por defecto).
Esto se explicar ms adelante. El siguiente ejemplo muestra un archivo .js que al ser incluido por un documento (X)HTML,
invoca dos funciones cuando ste termina de cargarse.

<head>
<title>Eventos del DOM 2</title>
<script src="onload_event_dom2.js"></script>
</head>
<body>
<h1>Manejo de eventos del DOM level 2</h1>
</body>
</html>
// onload_event_dom2.js
function showInfo()
{
window.alert('Esta funcin JavaScript fue llamada sin que el documento hiciere' +
' nada especial, mas que incluir este archivo .js');
}
function addInfo()
{
var text = 'Este prrafo es producto de un segundo manejador de eventos.';
var paragraph = document.createElement('p');
paragraph.appendChild( document.createTextNode(text) );
document.body.appendChild( paragraph );
}
window.addEventListener('load', showInfo, false);
window.addEventListener('load', addInfo, false);
Un archivo .js que al ser incluido por un documento, agrega dos manejadores de eventos. Correr este ejemplo.
El mtodo Element.addEventListener() es parte de lo que se conoce como DOM Level 2, el establece que cuando un evento
ocurre en un elemento, ste puede antenderlo o alguno de sus elementos padres, es decir, el evento se propaga por la
jerarqua de elementos y puede ser atendido llama en una de las siguientes tres fases:
Capturing phase. El evento recorre desde el documento hasta el elemento esperando ser atendido.
At target phase. El elemento que gener el evento tiene oportunidad de atenderlo.
Bubbling phase. el evento retorna desde el elemento hacia el documento.
El tercer parmetro del mtodo element.addEventListener() controla la fase en la que ser atendido del evento. Si es true
se atender en la fase de captura, si es false en la fase objetivo o fase de ascenso (bubbling).
Otra ventaja de usar addEventListener() en lugar de asignar manejadores de eventos directamente a los atributos
intrnsecos (DOM Level 0), es que una misma funcin puede menejar eventos generados en distintos lugares del
documento. Por ejemplo, si quiere hacer algo cuando el cursor del ratn pase sobre cualquier prrafo del documento, en el
DOM Level 0 tendra que recorrer todos los elementos p y asignarles la funcin manejadora; mientras que en el DOM Level
2, simplemente registra la funcin en el elemento document.body con addEventListener().
Tanto en DOM Level 0 como DOM Level 1, la funcin que se asigna al atributo intrnseco o que se pasa en el segundo
parmetro de element.addEventListener() se convierte en una propiedad del elemento al cual se hizo la asignacin o
invocacin. Es decir, esa funcin se convierte en un mtodo del elemento. Cuando ste se invoca por el navegador, se har
como una invocacin a un mtodo normal del elemento, as la palabra reservada this har referencia a dicho elemento, por
lo que se puede usar dentro del cdigo del manejador. El siguiente ejemplo muestra una mnima implementacin de un
juego de estallar una bolsa de burbujas. Ntese cmo la funcin popBubble es asignada a cada imagen de burbuja al evento
onclick, lo que la convierte en un mtodo, el cual utiliza el parmetro this para cambiar el origen de la imagen presionada
por una burbuja estallada.
22/09/2015 11:52 a. m.
70 de 99
<head>
<title>Estallar burbujas</title>
body { margin: 2cm; }
#wrap { width: 600px; height: 216px; margin: 0 auto; border: 5px solid #64859e;
background: #a4c5de; position: relative; }
#wrap img { position: absolute; border: 0; }
</style>
<script type="text/javascript" src="bubble_wrap_min.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
// bubble_wrap_min.js
// Fills the game area with bubble images
function loadGame()
{
// Get the game area
var wrap = document.getElementById('wrap');
// Assume the bubble image dimensions and area dimensions
var imgWidth = 75;
var imgHeight = 72;
var rows = 3;
var cols = 8;
// Fill the game area creating img elements with onclick attribute set
for ( var i = 0; i < rows; ++i )
{
for ( var j = 0; j < cols; ++j )
{
// Create the image as a new node
var img = document.createElement('img');
img.src = 'air.jpg';
// Position the image, CSS must specify 'position:absolute' for img
img.style.top = (i * imgHeight) + 'px';
img.style.left = (j * imgWidth) + 'px';
// When user clicks this image, replace it for a popped image
img.onclick = popBubble;
// Insert the new image as child of the game area
wrap.appendChild(img);
}
}
}
// Called when a image is clicked
function popBubble()
{
// Replace the current image for a popped one
this.src = 'pop.jpg';
// This image cannot be popped again
this.onclick = null;
// Play an auditive feedback
var snd = new Audio('pop.mp3');
snd.play();
}
// Initializes the game when the document is loaded
window.addEventListener('load', loadGame, false);
Un ejemplo del juego de estallar una bolsa de burbujas. Correr este ejemplo: versin minimalista, o juego completo.
La funcin que se enva en el segundo parmetro de element.addEventListener() recibe un objeto Event por parmetro. En
el ejemplo del juego de la bolsa de burbujas, el mtodo popBubble() ignora este parmetro. El objeto Event tiene varias
propiedades tiles, entre las que sobresalen currentTarget que es una referencia al objeto que gener el evento
(equivalente a this); el mtodo stopPropagation() que al ser invocado evita que otros nodos sigan procesando el evento; y
preventDefault() que cancela el efecto que tendra normalmente el evento en el navegador, como por ejemplo seguir un
enlace si el elemento fuera un hipervnculo. En algunos eventos el navegador enva un objeto MouseEvent que contiene
informacin sobre el puntero del ratn, como su posicin (clientX, clientY), el botn usado (button), si hubo teclas
modificadoras presionadas en el teclado y otros.
22/09/2015 11:52 a. m.
71 de 99
6 El servidor web
Un servidor web es un programa que responde peticiones HTTP en algn puerto TCP, normalmente el 80. Existe en la
actualidad varias implementaciones populares, entre las que sobresalen Apache HTTP Server, Microsoft Internet Information
Services (IIS), y nginx. Este laboratorio pretende que el estudiante instale, configure y utilice uno de estos servidores para
construir un pequeo sitio web dinmico utilizando FastCGI. En este texto se utilizar nginx.
6.1 Instalacin y ejecucin del servidor web

La instalacin de un servidor web es un proceso muy dependiente de la implementacin escogida y de las necesidades del
autor. En el caso de los servidores web libres, el mtodo ideal es obtener el cdigo fuente, instalarlar sus pre-requisitos,
configurarlo, compilarlo, e instalarlo. Este procedimiento tipicamente se documenta con detalle en el sitio del servidor web.
Por otra parte, tanto los servidores web libres como propietarios distribuyen binarios que son relativamente fciles de
instalar, pero los mdulos que traen son los escogidos por quien gener el ejecutable.
Una vez instalado el servidor web es necesario ponerlo en marcha. En el caso de nginx basta con invocar su ejecutable. El
usuario notar que al hacerlo el programa termina inmediatamente dando la sensacin de que nada ocurri, sin embargo,
nginx habr iniciado al menos dos procesos homnimos en segundo plano (background), los cuales estarn esperando
solicitudes HTTP en el puerto 80. Esto se puede probar con un navegador que acceda a la direccin http://localhost.
22/09/2015 11:52 a. m.
72 de 99
Desde el punto de vista de la interaccin con el usuario hay dos tipos de programas. Los programas en primer plano
(foreground) cuando son ejecutados mantienen un dilogo con el usuario. La mayora de personas creen que todos los
programas son as. Sin embargo, en ese mismo instante el sistema operativo estar ejecutando un nmero, probablemente
mayor, de programas en segundo plano (background) que no esperan una interaccin directa con el usuario, como por
ejemplo, el ncleo del sistema operativo, servicios de acceso a la red, demonios que ejecutan tareas programadas,
servidores de correo, FTP, etc. El servidor web cabe en esta segunda categora.
Cuando nginx es ejecutado arranca al menos dos procesos. El primero se llama nginx master process y debe ser
ejecutado con permisos de administracin, ya que por poltica de Unix, slo procesos iniciados por el superusuario pueden
abrir sockets en cualquier puerto, mientras que los iniciados por usuarios normales, slo pueden escuchar en puertos
superiores a 1024. El segundo y dems procesos reciben el nombre de nginx working processes, son procesos iniciados
por nginx a nombre de un usuario cualquiera (especificado en la configuracin de nginx) que atienden un cliente web en
cualquier otro puerto, con el fin de liberar el puerto 80 para que est disponible y poder aceptar ms conexiones.
Si se invoca el ejecutable de nginx sin parmetros, tratar de iniciar el servidor web. Si se invoca por segunda vez sin
parmetros, fallar ya que el puerto 80 estar en uso. Si se invoca con el parmetro nginx -h brindar ayuda. La opcin
nginx -V permite ver la versin y los mdulos con que fue compilado el ejecutable. La opcin nginx -s sirve para controlar
al servidor en ejecucin. Otras opciones se discutirn ms adelante.
6.2 Configuracin del servidor web

Una vez instalado el servidor web, el autor querr configurarlo para hacer funcionar su sitio. Tareas como indicarle al
servidor web dnde estn los documentos que conforman el sitio, si debe o no habilitar PHP, y cunto es el nmero mximo
de conexiones (visitantes) que debe permitir simultneamente, son las que se establecen en la configuracin.
La mayora de servidores web se configuran con directivas en archivos de texto. Desdichadamente cada uno tiene sus
propias convenciones, en lugar de existir un estndar. En el caso de nginx, el archivo principal de configuracin se llama
nginx.conf y su ubicacin depende de los parmetros con que se compil el cdigo fuente, o de las convenciones de la
distribucin de Linux. Por ejemplo, en Ubuntu puede ubicarse bajo la carpeta /etc/nginx/. La nomenclatura de las directivas
de configuracin de nginx puede visualizarse con el siguiente pseudocdigo:
# Esto es un comentario
nombre_directiva valores;
# Un modulo se configura con un bloque de directivas
nombre_modulo
{
directiva2 valor;
directiva3 valor1 valor2;
# ...
}
Las directivas constan de un trmino que significa alguna caracterstica para nginx, seguido por uno o ms valores. El
trmino y los valores se separan por espacios en blanco. Como es de esperar, nginx est dividido en muchos mdulos: core,
webdav, fastcgi, mail, etc., y cada uno tiene directivas para configurarlos. Las directivas de cada mdulo se escriben en el
archivo de configuracin agrupadas dentro de llaves { }, lo que forma un bloque de directivas (directive block), y son
precedidos por el nombre del mdulo. Esta prctica mantiene el orden e incrementa la legibilidad. El siguiente listado
muestra un fragmento de un archivo de configuracin de nginx.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
user www-data;
worker_processes 4;
pid /var/run/nginx.pid;
events
{
worker_connections 768;
# multi_accept on;
}
http
{
# Basic settings
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Logs
access_log /var/log/nginx/access.log;
22/09/2015 11:52 a. m.
73 de 99
19.
20.
21.
22.
23.
24. }
error_log "/var/log/nginx/error.log";
# Virtual host configs
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
Del listado anterior se puede leer lo siguiente. La directiva en la lnea 7 slo afecta al mdulo de eventos (Events Module)
de nginx. Las directivas que no estn dentro de llaves (lneas 1 a 3) se dice que estn en el bloque principal (main block) y
tienen un efecto global en el servidor web. Algunas directivas esperan valores numricos como worker_processes en la lnea
2, otras cadenas de caracteres como access_log y error_log en las lneas 18 y 19. Las cadenas se pueden escribir
literalmente, pero si tienen espacios en blanco, puntos y comas, u otros caracteres especiales, debern encerrarse entre
comillas dobles o simples.
Los mdulos de nginx son opcionales, es decir, se pueden instalar o no, y si estn instalados se pueden habilitar o no; a
excepcin de tres mdulos: Core module, Events module y Configuration module, los cuales siempre estn instalados y
siempre habilitados, ya que proveen la funcionalidad mnima de nginx.
6.2.1 La directiva include

Una instalacin de un servidor web puede utilizarse para uno o ms sitios web. No es aconsejable que la configuracin de
todos esos sitios se haga en el mismo archivo, puesto que se har voluminoso y difcil de mantener. En su lugar, se
recomienda distribuir la configuracin en varios archivos que contengan directivas coherentes, al menos un archivo por cada
sitio web que deba servir la instalacin de nginx.
La directiva include recibe un nombre de un archivo (el cual debe existir) y le indica a nginx que debe insertar el contenido
de dicho archivo en el lugar de la directiva include. La lnea 14 del listado anterior muestra un ejemplo. El nombre del
archivo puede ser un patrn con los caracteres comodines * y ? (filename globbing), que indica a nginx incluir, no un
archivo, sino todos aquellos que cumplan el patrn. Por ejemplo, la lnea 22 del listado anterior indica a nginx importar en
ese lugar todos los archivos que terminan en *.conf que se encuentran en la carpeta /etc/nginx/conf.d/.
6.2.2 El mdulo HTTP Core

El mdulo HTTP de nginx es opcional, por lo que puede deshabilitarse, sin embargo, es quiz el ms requerido por el autor y
el que querr configurar primero para hacer funcionar su sitio web. Es tambin el mdulo ms extenso de nginx y su
configuracin se hace con tres bloques: http, server y location. Tmese el siguiente ejemplo:
1. http
2. {
3.
gzip on;
4.
5.
server
6.
{
7.
server_name miempresa.com www.miempresa.com;
8.
listen 80;
9.
root /home/sites/miempresa.com;
10.
11.
location /download/
12.
{
13.
gzip off;
14.
}
15.
}
16.
17.
server
18.
{
19.
server_name portal.miempresa.com;
20.
root /home/sites/portal.miempresa.com;
21.
index index.php index.html;
22.
}
23.
24.
server
25.
{
26.
server_name svn.miempresa.com;
27.
root /home/svn;
28.
}
29. }
Las directivas que se escriban directamente en el bloque http { ... } afectan a todo el mdulo HTTP, como la lnea 3 del
listado anterior, que indica a nginx comprimir los recursos antes de enviarlos al cliente.
6.2.2.1 Servidores virtuales
Un servidor web puede alojar uno o varios sitios web, los cuales se acceden con diferentes dominios. Por ejemplo, una
misma instalacin de nginx podra servir la pgina pblica de la empresa (www.miempresa.com), un sitio para empleados,
clientes y proveedores de la empresa (portal.empresa.com), y un sitio con repositorios de Subversion (svn.miempresa.com).
Es deseable poder configurar cada uno de esos sitios independiente de los dems. Por ejemplo, cada uno debe tener un
diferente directorio fsico donde se encuentran sus recursos, para los dos primeros podra ser importante tener PHP
22/09/2015 11:52 a. m.
74 de 99
habilitado, mientras que para el segundo el mdulo WebDAV, y as por el estilo.

nginx, y en general todos los servidores web, representan cada sitio web como un servidor virtual, es decir, como un
pequeo servidor web que corre bajo el auspicio del servidor web real, con su propia configuracin independiente de los
dems servidores virtuales. Si slo se quiere montar un nico sitio web en un servidor web, lo normal es crear un servidor
virtual para dicho sitio, con el bloque de directivas server { ... } dentro del bloque http { ... }.
El listado anterior define tres servidores virtuales y por ende tres sitios web. La directiva listen le indica a nginx en cul
puerto TCP, o direccin IP, espera conexiones para ese sitio web, de esta forma se puede tener dos sitios web con igual
dominio pero diferenciados por el puerto. Si se omite, se asume el puerto 80.
La directiva server_name hace que el servidor virtual responda a uno o ms nombres de dominio. Cuando nginx recibe un
mensaje de solicitud, revisa el atributo Host: en el encabezado HTTP, y compara su valor contra todos los servidores
virtuales para determinar cul debe responder. En nuestro ejemplo, si nginx recibe el siguiente mensaje HTTP (recuerde que
los cambios de lnea son importantes):
1. GET /login.php?remember_user=yes
2. Host: portal.miempresa.com:80
3. User-Agent: Opera/11.01 (iOS)
4.
5.
no podr utilizar el puerto o la direccin IP como criterio para seleccionar el servidor virtual, pero s el dominio. En este
caso, slo el segundo servidor virtual atiende el dominio portal.miempresa.com en el puerto 80, por lo que nginx cargar el
recurso /home/sites/portal.miempresa.com/login.php?remember_user=yes y lo retornar en un mensaje de respuesta HTTP.
La directiva server_name acepta comodines, por lo que un servidor virtual podra antender todos los dominios que terminen
en o tengan una cadena particular, como:
server_name *.miempresa.com; # or
server_name *miempresa.*; # or
server_name *miempresa*;
La directiva root le indica a nginx dnde se encuentran fsicamente los recursos que deben ser servidos a travs de un
servidor virtual. Es seguido por una ruta, normalmente absoluta, de lo contrario se tomar como relativa al directorio donde
est instalado nginx.
La directiva index le indica a nginx cul recurso o archivo escoger para retornar al cliente cuando se solicita un directorio. Si
se especifican varios archivos, se retornar el primero que se encuentre. A este recurso se le suele llamar index page. Por
ejemplo, si el servidor web recibe la siguiente solicitud HTTP
1. GET /admin/
2. Host: portal.miempresa.com:80
3. User-Agent: Opera/11.01 (iOS)
4.
5.
nginx intentar encontrar el archivo /home/sites/portal.miempresa.com/admin/index.php, si no lo encuentra, intentar con

/home/sites/portal.miempresa.com/admin/index.html, y si tampoco existe, responder con un cdigo de estado de error,
posiblemente 404 NOT FOUND. Si en un servidor virtual no se especifica la directiva index, se asumir index.html.
6.2.2.2 El bloque location
A veces dentro de un servidor virtual, es deseable aplicar una configuracin diferente a ciertos recursos del sitio. Los
bloques location pattern { ... } permiten escoger un subconjunto de recursos que coincidan con el patrn pattern y
aplicarles la configuracin que aparece dentro de llaves. El patrn es sensitivo a maysculas/minsculas si el sistema de
archivos del sistema operativo lo es tambin.
6.2.2.3 MIME types
Cuando el cliente solicita un recurso, el servidor web lo localiza o genera, y debe retornarlo en un mensaje de respuesta
HTTP, en el cual debe indicarle al cliente de qu tipo de datos es dicho recurso para que lo pueda interpretar
adecuadamente, utilizando una notacin estndar llamada extensiones multipropsito de correo de internet (MIME,
Multipurpose Internet Mail Extensions), ideadas para el intercambio de archivos por Internet. Por ejemplo, text/html indica
un documento HTML, image/png una imagen codificada con el formato PNG, y application/xhtml+xml un documento XHTML.
Pngase en los zapatos del servidor web. Dado un archivo que debe retornar al cliente cmo sabe cul tipo MIME asignarle
en el mensaje de respuesta? nginx se gua por la extensin del archivo, y si no la tiene, asume un tipo MIME por defecto.
nginx le permite configurar las asociaciones entre extensiones y los tipos MIME utilizando el bloque types { ... }, como en
el siguiente ejemplo:
http
{
types
{
text/html
text/css
html htm shtml;

css;
22/09/2015 11:52 a. m.
75 de 99
text/xml
application/xhtml+xml
application/x-javascript
image/gif
image/jpeg
# ...
xml rss;
xhtml;
js;
gif;
jpeg jpg;
}
default_type application/octet-stream;
}
La directiva default_type le indica a nginx cul MIME type asumir cuando la extensin no se encuentra en el bloque types {
... } o cuando el recurso simplemente no tiene extensin.
6.2.3 Server Side Includes module

nginx -y en general todos los servidores web- pueden extender su funcionalidad con mdulos, escritos por el equipo oficial,
terceros, o incluso usted. En esta y siguientes secciones se explorarn algunos de ellos.
El mdulo Server Side Includes (SSI) le indica al servidor web que antes de servir un recurso al cliente, analice (parse)
dicho recurso en bsqueda de comandos para el servidor web, los cuales tienen la notacin:

Por ejemplo, al servir el siguiente documento

<html>
<head>
<title>Mi empresa</title>
</head>
<body>
<div id="whole">


<div id="content">
<p>Bienvenidos al ...</p>
</div>

</div>
</body>
</html>
el servidor web localizar todos los comentarios que inicien con <--# y tratar de ejecutar el comando que sigue. El
comando include le indica al servidor cargar el archivo que se encuentra en el atributo file="url", o si es un programa,
ejecutarlo. El contenido del archivo o el resultado del programa ser insertado en el documento servido, reemplazando el
comando dentro del comentario.
El autor que quiera utilizar Server Side Includes, deber habilitar el mdulo ssi en la configuracin de nginx, e indicarle en
cules tipos de recursos (MIME types) quiere que el servidor procese esos comandos, de lo contrario se asumirn slo los
text/html. Por ejemplo:
22/09/2015 11:52 a. m.
76 de 99
server
{
ssi on;
ssi_types text/html application/xhtml+xml application/x-javascript;
}
Aunque SSI es muy eficiente y se puede habilitar para todo un sitio web, es mejor evitarlo para archivos que no lo
requieren. Una prctica comn es nombrar los archivos que tienen Server Side Includes con la extensin .shtml
(contraccin de server html), y habilitar el mdulo ssi slo para ellos, por ejemplo:
server
{
index index.shtml index.php index.html;
# Habilita Server Side Includes en todos los archivos con extensin .shtml
location ~* \.shtml$
{
ssi on;
}
}
6.2.4 CGI y FastCGI

La publicacin de pginas web estticas se est convirtiendo en una prctica en desuso. La mayora de sitios web pretenden
hacer tan efectiva la comunicacin con el lector para que ste se sienta a gusto y ambas partes se beneficien. En este
movimiento no basta slo con programacin del lado del cliente con JavaScript, el servidor web tambin debe ajustarse a las
necesidades del visitante y hacer que las pginas que sirva sean dinmicas. Es decir, la fuente de los recursos con los que
responde el servidor web no son archivos estticos, sino el resultado de ejecutar programas de aplicacin escritos en
cualquier lenguaje de programacin. Es evidente entonces que debe existir un conjunto de convenciones que permitan a
una aplicacin cualquiera -ocupada de la lgica del negocio- comunicarse con un servidor web cualquiera -ocupado de los
asuntos de red-, para que as ambos colaboren y respondan al visitante adecuadamente. Este conjunto de convenciones las
establece el estndar Common Gateway Interface (CGI) surgido en 1993.
Cuando el usuario solicita un recurso, el servidor web sabe -de acuerdo a su configuracin- si el recurso es esttico o
dinmico. Si es esttico lo carga desde la memoria secundaria y retorna una copia al cliente. Si es dinmico, deber
interactuar con una aplicacin y es ah donde entra en juego CGI. CGI es protocolo que impone la forma en que la
informacin se transfiere entre el servidor web y una aplicacin cualquiera (llamada gateway application) y se resume en lo
siguiente. El servidor web ejecuta el programa de aplicacin pasndole por parmetro o en la lnea de entrada un conjunto
de variables. La aplicacin se carga, realiza su lgica del dominio en funcin de esas variables, consultando bases de datos o
cualquier otro recurso, construye una pgina web, la imprime en la salida estndar y termina su ejecucin. El servidor web
captura esa salida y la enva al cliente que solicit el recurso.
El procotolo CGI tiene varios inconvenientes, en especial para sitios web mundialmente concurridos. Por esto a mediados de
los 90 se desarroll el estndar FastCGI, el cual introduce las siguientes diferencias sobre CGI:
1. CGI ejecuta un proceso de la aplicacin por cada solicitud, lo cual puede agotar la memoria del servidor rpidamente,
consume procesador iniciando y cerrando procesos, y adems los procesos deben implementar complejos mecanismos
de intercomunicacin si necesitan trabajar en conjunto. FastCGI slo arranca un proceso de la aplicacin al cual le
"pasa" todas las solicitudes de uno o ms visitantes. La ejecucin de la aplicacin no es detenida, por lo que se le
llama proceso persistente.
2. En CGI la aplicacin y el servidor web deben correr en la misma mquina fsica, lo cual puede ser indeseable, en
especial si el proceso es pesado y se disponen de ms computadoras en la organizacin. FastCGI impone que el
servidor web y la aplicacin deben comunicarse a travs de TCP/IP, as ambos pueden ejecutarse en computadoras
distintas, incluso, en redes distantes y con sistemas operativos diversos.
De lo anterior se infiere que la aplicacin, indeferentemente del lenguaje de programacin en que est hecha (C, C++,
Java, PHP, Ruby, etc.), debe implementar un servidor TCP/IP esperando conexiones en algn puerto, configurar nginx para
que cuando se solicita un recurso con una extensin particular o una ruta particular, se contacte la aplicacin en dicho
puerto TCP. En lo siguiente este proceso se explicar para PHP.
6.2.5 PHP a travs de FastCGI

Los programas para PHP no son ejecutables, es decir, no son compilados. Un archivo de texto con extensin .php es
interpretado por el ejecutable de PHP (/usr/bin/php php.exe), de la siguiente forma:
22/09/2015 11:52 a. m.
77 de 99
php /path/to/myfile.php
Lo anterior claramente no es un servidor TCP/IP esperando conexiones en algn puerto, como exige el protocolo FastCGI. El
proyecto PHP-FPM (PHP FastCGI Process Manager) es una alteracin de PHP para Unix que ejecuta un demonio
normalmente en el puerto 9000, el cual espera solicitudes de ejecutar un archivo .php particular con sus respectivos
parmetros. nginx puede comunicarse con PHP-FPM a travs de FastCGI, lo cual se considera una implementacin muy
eficiente, ideada para sitios altamente concurridos.
Para instalar PHP-FPM se puede configurar y compilar su cdigo fuente, o utilizar el administrador de paquetes de su
distribucin de Linux. Por ejemplo, los siguientes comandos instalan y ponen en ejecucin un servidor de PHP-FPM en
Debian/Ubuntu:
sudo apt-get install php5-fpm
sudo /etc/init.d/php5-fpm start
Ahora debe decirle a nginx que cada vez que un visitante solicita un archivo .php, debe contactar al servidor de PHP a
travs de FastCGI en el puerto 9000, para que lo ejecute, y el resultado que se genere de su invocacin, enviarlo al
visitante. Para nuestros efectos, el archivo .php puede estar en cualquier lugar del sitio web, su nico distintivo con los
dems archivos del sitio es su extensin .php. La siguiente configuracin mnima hace este trabajo. Nota: es probable que
las siguientes lneas ya estn presentes en la configuracin por defecto, basta con quitarles los comentarios.
1. server
2. {
3.
4.
5.
index index.php index.html;
6.
7.
# Ejecuta todos los archivos con extensin .php antes de enviarlos al cliente
8.
location ~* \.php$
9.
{
10.
fastcgi_pass 127.0.0.1:9000;
11.
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
12.
include fastcgi_params;
13.
fastcgi_index index.php;
14.
}
15. }
El bloque location anterior le indica a nginx que antes de servir un archivo con extensin .php, debe contactar a travs de
FastCGI al programa que est corriendo en el puerto 9000, e indicarle que ejecute el archivo .php. Esto ltimo se indica a
travs de parmetros con la directiva fastcgi_param NOMBRE_PARAMETRO valor_parametro. Por ejemplo, la directiva en la lnea
11 le indica a nginx enviar a PHP-FPM la ruta absoluta del archivo .php en el parmetro SCRIPT_FILENAME. Los valores
iniciados con un smbolo de dlar, como $document_root son variables de nginx, las cuales se reemplazan por sus valores
respectivos, en el caso de $document_root por el directorio donde estn los recursos del sitio web (/home/sites
/miempresa.com en este ejemplo), y $fastcgi_script_name por la ruta relativa dentro del sitio del archivo .php solicitado por
el visitante. Otros parmetros son necesarios, el archivo fastcgi_params que trae la instalacin de nginx se encarga de ellos
y funciona para la mayora de sitios.
Para Microsoft Windows no existe una implementacin de PHP-FPM, por lo que el desarrollador puede emularlo a travs de
Cygwin, o utilizar algn paquete "todo en uno", como Easy WEMP (acrnimo de Windows, nginx, MySQL y PHP).
7 Programacin del servidor web: PHP

Un autor que quiera construir un sitio web dinmico deber instalar un servidor web (como nginx), configurarlo con
FastCGI, escribir un programa (en C, C++, Java, ...) que sea un servidor FastCGI y adems se ocupe de la lgica del sitio.
Esta tarea puede ser monumental, incluso para un sitio web sencillo. Este fue el sentimiento que tuvo Rasmus Lerdorf en
1994 cuando quiso publicar una pgina web personal con un mnimo grado de dinamismo, como el conteo de visitantes.
Lerdorf encontr que sera ms natural insertar pequeos trozos de cdigo (scripts) dentro de sus pginas web estticas.
Cada vez que un visitante solicitara una de estas pginas, un intrprete ejecutara estos scripts antes de responderle al
cliente. Lerdorf llam "Personal Home Page tools" a su intrprete y lo dispuso como software libre, el cual evolucionara a
22/09/2015 11:52 a. m.
78 de 99
ser el lenguaje de "scripting" ms usado en servidores web del mundo, bajo el nombre recursivo de PHP: Hypertext
Processor (PHP).
7.1 El lenguaje de programacin PHP

Aunque se pueden escribir programas PHP independientes en lnea de comandos o con interfaz grfica, su uso ms difundido
ha sido para crear pginas web dinmicas, es decir, aquellas cuyo contenido, apariencia o comportamiento puede cambiar
cada vez que un navegador las solicita. As PHP est diseado para mezclarse con el contenido de las pginas web. El
Listado 7.1 muestra un posible "hola mundo" con PHP.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<?xml version="1.0" encoding="utf-8" ?>

<head>
<title>Hola mundo PHP</title>
</head>
<body>
<h1>Hola mundo en PHP</h1>
<?php
print("<p>Este prrafo proviene de PHP, no del documento XHTML</p>\n");
?>
</body>
</html>
Listado 7.1. Hola mundo en PHP. Correr este ejemplo.
Al correr el ejemplo del Listado 7.1 ocurre lo siguiente. El servidor web recibe un mensaje solicitando el recurso /path/to
/hello_world.php, el cual es un simple archivo de texto. En condiciones normales, el servidor web podra retonarle el
archivo al navegador, el cual no sabra qu hacer con l y le preguntara al usuario un lugar para guardarlo. Sin embargo, el
servidor web est configurado para tratar de forma especial a todos los archivos que terminen con extensin .php. Esta
configuracin indica al servidor web que debe ejecutar los scripts que se encuentran en el archivo .php antes de enviarlo al
navegador.
La configuracin del servidor web tambin le indica cmo encontrar el intrprete de PHP. As el servidor invoca al intrprete
pasndole el archivo /path/to/hello_world.php. El intrprete carga el archivo y lo recorre (parse) buscando scripts de PHP,
los cuales se encuentran nicamente dentro de la etiqueta especial <?php ... ?>. El intrprete ejecuta este cdigo y
reemplaza la etiqueta especial por la salida que gener su ejecucin. Una vez que ha terminado de ejecutar todos los scripts
en el archivo, el resultado regresa al servidor web quien lo despacha al navegador.
El navegador slo recibe el resultado de ejecutar los scripts, no el cdigo fuente PHP que gener el resultado. El lector
puede comprobarlo corriendo el ejemplo del Listado 7.1 y revisando en su navegador el cdigo fuente de la pgina.
Durante muchos aos se utiliz un short tag <? ... ?> en lugar de <?php ... ?> para escribir el cdigo PHP. El uso del
"short tag" debe evitarse a toda costa, ya que genera conflicto con las instrucciones de procesamiento de XML <?xml ... ?>.
De hecho, si se quiere servir documentos XHTML con scripts de PHP, se debe deshabilitar la directiva short_open_tag en la
configuracin del intrprete de PHP (en el archivo php.ini). El Listado 7.2 muestra la fecha y hora del servidor web.
1. <body>
2.
<h1>Hora y fecha del servidor</h1>
3.
<p><?php
4.
$fecha = date('d \d\e F \d\e Y');
5.
$hora = date('h:i:s a');
6.
print("Hoy es " . $fecha . ". Son las " . $hora );
7.
?></p>
8. </body>
Listado 7.2. La hora del servidor en PHP. Co rrer este ejemplo.
El Listado 7.2 muestra otras caractersticas de PHP. En el ejemplo del hola mundo (Listado 7.1) el prrafo se gener dentro
del script de PHP (lnea 13), mientras que en el ejemplo de la hora (Listado 7.2) el script se escribi dentro de un elemento
p. Esto muestra que el autor puede intercalar cdigo PHP y (X)HTML a conveniencia. Algunos programadores prefieren abrir
una nica etiqueta <?php ... ?> y escribir mucho cdigo PHP, otros prefieren escribir cdigo (X)HTML y abrir etiquetas <?php
... ?> slo para el mnimo cdigo PHP necesario. El segundo mtodo es quiz ligeramente ms eficiente y es la convencin
que se tomar en este texto.
22/09/2015 11:52 a. m.
79 de 99
Las lneas 4 y 5 del Listado 7.2 invocan una funcin estndar de PHP: date(), la cual retorna un string con la fecha u hora
en el formato que se le indique por parmetro. PHP tiene una rica biblioteca de funciones cuya documentacin es quiz una
de las mejores que existe en el mundo.
El string resultado de invocar a date() en la lnea 4 del Listado 7.2 se almacena en la variable $fecha. PHP exige anteponer
el smbolo de dlar ($) a un identificador para distinguirlo como una variable, de la misma forma que ocurre en Perl y en
Unix shell scripting, con el objetivo de hacer ms eficiente el reconocimiento de las variables a la hora de ejecutar el cdigo.
Al igual que en JavaScript, las variables pueden almacenar valores de cualquier tipo de datos, incluso cambiar en el tiempo.
Una variable se crea simplemente asignndole un valor.
La lnea 6 del Listado 7.2 imprime un texto resultado de concatenar unos strings literales con las variables $fecha y $hora
utilizando el operador punto (.). Esto crea la primera diferencia con JavaScript, que utiliza el operador de suma (+) para la
concatenacin. El ejemplo anterior pudo haberse escrito de otra forma muy comn:
1. <body>
2.
<h1>Hora y fecha del servidor (2)</h1>
3.
<p><?php
4.
$fecha = date('d \d\e F \d\e Y');
5.
$hora = date('h:i:s a');
6.
print("Hoy es $fecha. Son las $hora");
7.
?></p>
8. </body>
Listado 7.3. La hora del servidor con interpolacin de variables. Correr este ejemplo.
El ejemplo del Listado 7.3 slo cambia la lnea 6 del Listado 7.2. En la nueva versin se insertaron las variables
directamente en el string. A esto se le llama interpolacin de variables o sustitucin de variables y el intrprete de
PHP lo hace nicamente en las cadenas con comillas dobles (como en "$var") y no en cadenas con comillas simples (como
en '$var'). Lo mismo aplica para las secuencias de escape como "\n".
El desarrollador web debe tener clara esta diferencia, ya que JavaScript trata de forma idntica a las cadenas literales con
comillas dobles o simples, mientras que PHP hace interpolacin de variables y secuencias de escape en una de ellas y no en
la otra. El lector podra estar pensando en utilizar siempre comillas dobles para evitar sorpresas, sin embargo, debe tener
en cuenta que el procesamiento de las cadenas literales con comillas simples es ms eficiente que con comillas dobles.
7.1.1 Ambientes de produccin y desarrollo

Para escribir un programa en PHP el desarrollador web sigue normalmente la siguiente rutina. Crea un archivo de texto con
extensin .php donde escribe su cdigo dentro de etiquetas <?php ... ?>. Lo guarda en alguna carpeta que forma parte de
su sitio web. Accede al archivo .php a travs de un navegador escribiendo su URL. El servidor invoca al intrprete de PHP y
enva el resultado al navegador. El desarrollador puede entonces ver la salida de su programa.
Dependiendo de la configuracin de PHP, esta rutina se vuelve en contra del desarrollador o de la empresa cuando el
programa PHP tiene errores. Si la configuracin dicta que el intrprete de PHP debe informar los errores en la salida
estndar, stos aparecern en el navegador, lo cual ayudar enormemente al desarrollador a depurar sus programas, pero
podra hacer visible informacin sensible de la empresa a los visitantes, o confundirlos arruinando el contenido y diseo del
sitio web.
Si la configuracin dicta que el intrprete de PHP debe callar los errores (o a lo sumo enviarlos a una bitcora), el
desarrollador difcilmente detectar que los hay, a menos de que el intrprete se niegue a ejecutar el cdigo PHP con
errores y no regrese del todo una respuesta al servidor web, el cual optar por enviar un mensaje de respuesta con un
cdigo de estado 500 Internal server error al navegador. Esto es mucho ms eficiente y evita que el servidor web exponga
informacin sensible a los visitantes, aunque estos se molestarn en todo caso.
La solucin aconsejada es tener dos ambientes: uno de produccin y otro de desarrollo. El ambiente de produccin aloja
el sitio web que atiende a los visitantes, se considera estable y los errores en el cdigo PHP no son reportados al navegador.
El ambiente de desarrollo es de uso exclusivo de los desarrolladores, en l los errores y advertencias son reportadas al
navegador. Estas diferencias se configuran en la seccin Error handling and logging del archivo php.ini.
Los ambientes de produccin y desarrollo podran estar en computadoras diferentes, o en la misma bajo servidores virtuales
distintos. Es importante que el sitio web completo se encuentre administrado por algn software de control de versiones,
como Subversion o Git, lo cual adems facilita el mantenimiento del cdigo entre estos ambientes.
22/09/2015 11:52 a. m.
80 de 99
Antes de publicar cdigo PHP en el sitio web o en el repositorio de control de versiones, el desarrollador siempre debera
chequear sus programas con el intrprete de PHP, lo cual puede hacerse en la lnea de comandos de la siguiente forma:
php /path/to/file.php
El desarrollador tampoco podr verificar un documento .php contra los validadores del Consorcio Web (como Unicorn), pero
s su salida. Es decir, que el desarrollador deber hacer dos verificaciones, la primera es llamar al intrprete de PHP en lnea
de comandos para verificar que su cdigo PHP sea correcto, y luego la salida que su programa genera debe verificarla contra
los estndares del Consorcio Web. Una tercera verificacin podra deberse si se tiene cdigo JavaScript, inspeccionando la
bitcora de errores del navegador.
7.1.2 Generalidades del lenguaje PHP

La sintaxis de PHP se basa en C y Perl; y tiene mucha familiaridad con C++ y Java. Esto implica que los comentarios,
condicionales, ciclos y operadores son similares. Este material asume que el lector conoce C y JavaScript, y se concentra en
los aspectos que hacen a PHP distinto a estos lenguajes. Los comentarios en PHP se pueden escribir en cualquiera de las
siguientes tres formas:
// Este es un comentario de una lnea con estilo BCPL
# Este es un comentario de una lnea con estilo Perl
/* Este comentario
puede abarcar varias
lneas pero no anidarse */
Al igual que JavaScript, PHP diferencia maysculas y minsculas (case sensitive), y la aritmtica se hace en punto flotante,
es decir, 5 / 2 genera 2.5 y no 2 como ocure en C. A diferencia de JavaScript, PHP s permite que un string se expanda
varias lneas, y en tal caso, los espacios en blanco y cambios de lnea pasan a formar parte natural del string, por ejemplo:
$table = /* ... */;
$condition = /* ... */;
$query = "
SELECT *
FROM $table
WHERE $condition
";
equivale a haber escrito el siguiente cdigo en una sola lnea, pero que resulta ms ilegible:
$query = "\n\tSELECT *\n\tFROM $table\n\tWHERE $condition\n";
Al igual que JavaScript, las variables pueden almacenar valores de diferentes tipos de datos a lo largo de la ejecucin del
script, y las conversiones de datos se hacen automticamente de acuerdo al contexto. En PHP el operador de suma (+) se
utiliza slo para valores numricos y no hace concatenacin, lo cual es responsabilidad del operador punto (.). Por ejemplo:
<p>
<?php
# Una variable que almacena un valor numrico
$telefono = 50628241202;
# Obtiene el cuarto digito (en la posicion 3) conviertiendo el nmero en un string
# la conversion la hace PHP automaticamente al usar algo en un contexto string
$tipo_tel = substr($telefono, 3, 1);
# Comparacin de un string con un nmero: el string se convierte a nmero
if ( $tipo_tel != 8 )
echo "No se puede enviar mensajes de texto al telfono $telefono.";
?>
</p>
Listado 7.4. Conversin automtica de tipos de datos. Correr este ejemplo.
El lector habr notado que en algunos ejemplos se ha utilizado print y en otros echo para generar la salida que recibir el
navegador. No son funciones realmente, son constructos del lenguaje y por ende pueden utilizarse con o sin parntesis. La
diferencia radica en que print recibe nicamente un parmetro de tipo string y retorna siempre el entero 1; mientras que
echo no tiene un valor de retorno y puede recibir un nmero arbitrario de parmetros de cualquier tipo separados por
comas, los cuales tratar de convertir a string automticamente. En general, print() es un constructo del lenguaje utilizado
para simular una funcin en un contexto donde se requiere una, mientras que echo es un constructo del lenguaje que no
puede utilizarse en el contexto de una funcin y debe obligatoriamente usarse sin parntesis si recibe dos o ms
22/09/2015 11:52 a. m.
81 de 99
parmetros. Exceptuando esas extraas restricciones, en la mayora de contextos puede utilizarse cualquiera de los dos, y la
escogencia la hace el programador de acuerdo a sus gustos personales.
7.1.3 Tipos de datos

Los tipos de datos que PHP soporta son: booleanos, nmeros (enteros y flotantes), strings, arreglos, objetos, recursos
(resource) y el valor especial NULL. Son prcticamente los mismos tipos de datos de JavaScript con algunas diferencias. Una
variable no tiene tipo de datos, sino que puede almacenar valores de cualquiera de esos tipos de datos. La funcin
gettype($var) retorna un string que describe el tipo de datos del valor almacenado en la variable $var.
Las variables booleanas (boolean) slo admiten los valores true y false, los cuales se pueden escribir en cualquier
combinacin de maysculas y minsculas (case-insensitive).
Internamente PHP almacena los nmeros utilizando enteros (int) siempre que sea posible, y cuando el nmero es muy
grande o tiene decimales, se representa internamente como un nmero flotante (double). El programador no necesita
preocuparse por estas diferencias. Sin embargo, ambas representaciones tienen limitaciones en cuanto a la capacidad y
precisin, inadecuadas cuando se tiene que hacer clculos precisos o manejo de dinero. En tales circunstancias el
programador puede recurrir a alguna extensin matemtica de PHP.
Los strings en PHP no son objetos, por tanto, no tienen propiedades ni mtodos como length(); sino que deben ser
manipulados en forma similar a C: a travs de funciones como strlen(str) y substr(str, start, length). Sin embargo hay
una diferencia importante, en C los strings son punteros mientras que en PHP son valores y por tanto, los operadores de
comparacin (==, ===, <, <=, >, >=) y concatenacin (.) trabajan de forma esperada.
En PHP todos los arreglos son realmente arreglos asociativos, tambin conocidos como mapas (maps), tablas hash o
diccionarios; porque almacenan parejas llave => valor. Si las llaves no se especifican, se asumen valores enteros
secuenciales. Los arreglos se crean con el constructo array(v1, v2, ..., vN) que recibe una lista de valores separados por
comas, e inserta esos valores en orden asocindolos con llaves enteras correspondientes a la posicin del elemento. Las
llaves tambin pueden ser strings, y en tal caso se especifican usando la notacin key => value. Un arreglo que almacene
varias de estas parejas se crea utilizando la notacin array(k1 => v1, k2 => v2, ..., kN => vN), como se aprecia en el
Listado 7.5. Al igual que los string, los arreglos no son objetos, por lo que su manipulacin se hace a travs de funciones
como count($arr) y sort($arr). Este tema se estudiar con ms detalle adelante.
<h1>Arreglos</h1>
<pre><?php
// Crear un arreglo secuencial
$days = array('domingo', 'lunes', 'martes', 'mircoles', 'jueves', 'viernes', 'sabado');
// Recorrer el arreglo
echo "\$days == \n";
for ( $i = 0; $i < count($days); ++$i )
echo '
', $i, ': ', $days[$i], "\n";
// Agregar un elemento al arreglo
echo "\n\$days[] = 'desconocido'\n";
$days[] = 'desconocido';
// Estudiar el arreglo
echo "\n\$days == "; var_dump($days);
?></pre>
<h1>Arreglos asociativos</h1>
<pre><?php
// Crear un arreglo asociativo user => points
$gameRecords = array('lvargas' => 64900, 'elpapi' => 58831, 'chema' => 9215);
// Recorrer el arreglo
echo "\$gameRecords == \n";
foreach ( $gameRecords as $user => $points )
22/09/2015 11:52 a. m.
82 de 99
echo '
', $user, ': ', $points, " puntos\n";
// Agregar un elemento al arreglo

echo "\n\$gameRecords['pinocho'] = 64901\n";
$gameRecords['pinocho'] = 64901;
// Ordernar el arreglo por valores descendenemente
arsort($gameRecords);
// Estudiar el arreglo
echo "\n\$gameRecords == "; var_dump($gameRecords);
?></pre>
Listado 7.5. Ejemplo de uso de arreglos secuenciales y asociativos en PHP. Correr este ejemplo.
Los objetos de PHP se parecen mucho a los de Java. Un objeto es una instancia de una clase, la cual puede tener herencia
y polimorfismo con otras clases. Los objetos se crean con el operador new y sus miembros se acceden con el operador ->.
Este tema se explica ms adelante.
El tipo de datos y valor especial null sirve para indicar que una variable no tiene valor. Si se trata de hacer referencia a una
variable que no existe, PHP puede o no generar un warning de acuerdo a su configuracin, y el valor de reemplazo de la
variable no existente es null, el cual se puede escribir en cualquier combinacin de maysculas y minsculas.
Cuando se utiliza un valor de un tipo de datos en un contexto donde se espera otro, PHP trata de hacer conversiones
automticamente; lo cual funciona bien en la mayora de casos para los valores primitivos. El programador puede forzar la
conversin de datos utilizando explicit type cast, anteponiendo el tipo de datos entre parntesis a la expresin que se quiere
convertir, como en el ejemplo del Listado 7.6.
$num = 5 / 2;
echo "5 / 2 == $num\n";
// prints 2.5
$num = (int) (5 / 2);

echo "(int) (5 / 2) == $num\n"; // prints 2
Listado 7.6. Conversin explcita de datos en PHP. Correr este ejemplo.
7.1.4 Operadores
El programador puede escribir los mismos operadores que usa en C o JavaScript sin cambios en PHP. Las diferencias son
mnimas, como las que se exponen a continuacin.
El operador de concatenacin en PHP es el punto (.), as el operador de suma (+) pretende slo recibir operandos
numricos, de lo contrario, tratar de convertirlos a nmeros.
Al igual que en JavaScript, el operador de igualdad == indica si dos valores son el mismo an despus de hacer
conversiones, as la expresin "+12.3" == 12.30 se evaluar como verdadera. El operador de identidad === se evala
verdadero slo si sus operandos son iguales sin hacer conversiones.
Los operadores lgicos clsicos && y || trabajan de la misma forma que en otros lenguajes de programacin. Sin embargo,
PHP introduce los operadores lgicos nombrados and y or (que tambin pueden escribirse en maysculas: AND y OR), que
tienen una prioridad menor, por lo que pueden causar conflictos si se combinan operadores clsicos con los nombrados en
una misma expresin. Se aconseja al programador utilizar slo los operadores clsicos a menos de que se entienda bien el
efecto del operador nombrado.
7.1.5 Control de flujo

Los condicionales en PHP se indican con tres clusulas: if/else/elseif, ?: y switch. La clusula else if se puede escribir
con el espacio o sin l (elseif); su efecto es el mismo en ambos casos, como se aprecia en el Listado 7.7.
<body>
<h1>Lgica de pares</h1>
<p>
<?php
$promedio = rand() % 100;
echo "Promedio = $promedio: ";
if ( $promedio < 30 )
echo 'Vuelva a explicar';
elseif ( $promedio < 70 )
echo 'Discusin de pares';
else
echo 'Pase al siguiente tema';
?>
</p>
</body>
Listado 7.7. La clusula else if se puede escribir co n o sin el espacio en PHP. Correr este ejemplo.
Los ciclos en PHP se realizan con las mismas clusulas de C: while, do-while y for, las cuales mantienen la misma sintaxis.
PHP agrega una estructura de control ms: foreach, la cual sirve para iterar arreglos y objetos, como se ver ms adelante
22/09/2015 11:52 a. m.
83 de 99
en sus respectivas secciones.
7.1.6 Arreglos
En PHP los arreglos son contenedores asociativos, es decir, son contenedores de parejas key => value, donde las llaves (key)
pueden ser nmeros o strings, y si se omiten, PHP asume valores enteros. Un arreglo se crea simplemente asignndole
valores a sus elementos o con el constructo array(). Para crear una pareja key => value y agregarla al arreglo, se emplea
la siguiente notacin:
$arr[key] = value;
Si se asigna un valor a una llave que ya existe dentro del arreglo, no se inserta de nuevo, si no que se reemplaza su valor
anterior. Si se omite la llave en la asignacin, PHP busca el ltimo entero asociado en el arreglo y asigna el subsecuente al
valor. Esto se ilustra en el Listado 7.8.
// Crea un arreglo asignndole un valor
$notas['luis'] = 9.5;
echo "\n\$notas['luis'] = 9.5;\n\$notas = "; print_r($notas);
// Crea otra asociacin (key,value) y la agrega al arreglo
$notas['ana'] = 10.0;
echo "\n\$notas['ana'] = 10.0;\n\$notas = "; print_r($notas);
// Llave 'luis' ya existe en arreglo, actualiza valor
$notas['luis'] = 6.5;
echo "\n\$notas['luis'] = 6.5;\n\$notas = "; print_r($notas);
// Asocia un valor a la mayor clave numrica libre en el arreglo
$notas[] = 'ana';
echo "\n\$notas[] = 'ana';\n\$notas = "; print_r($notas);
// Asocia la posicin numrica dada con el valor
$notas[3] = 'diana';
echo "\n\$notas[3] = 'diana';\n\$notas = "; print_r($notas);
// Asocia en la posicin 1 4?
$notas[] = 'fiona';
echo "\n\$notas[] = 'fiona';\n\$notas = "; print_r($notas);
Listado 7.8. Insertar y actualizar elementos en un arreglo utiliz ando el operador corchetes y asignacin. Correr este ejemplo.
La segunda forma de crear un arreglo es utilizando el constructo array(k1 => v1, k2 => v2, ..., kN => vN), que recibe las
parejas llave=valor utilizando la notacin key => value que asemeja una asignacin, pero en lugar de ser una asignacin
directa indica actualizar el valor del ndice o llave key. En el constructo array(), si una llave se omite, se asume el prximo
ndice que sigue al ltimo entero utilizado. El resultado final del Listado 7.8 se podra escribir utilizando array() como se
aprecia en el Listado 7.9.
// Crea un arreglo utilizando el constructo array()
$notas = array('luis' => 6.5, 'ana' => 10.0, 'ana', 3 => 'diana', 'fiona');
echo "\n\$notas = "; print_r($notas);
// Se puede asociar nuevos elementos a un arreglo creado con array()
echo "\nAgregando notas para diana y fiona:";
$notas['diana'] = 8.5;
$notas['fiona'] = 5.0;
// Imprime todos los elementos del arreglo utilizando el ciclo foreach
foreach($notas as $key => $value)
echo "\n
$key: $value";
// Calcula el promedio de la clase
$sum = 0.0;
$count = 0;
foreach($notas as $key => $value)
{
if ( gettype($value) == 'double' )
{
$sum += $value;
++$count;
}
}
printf("\n\nEl promedio de los $count alumnos es %.2f", $sum / $count);
Listado 7.9. Crear un arreglo utilizando el constructo array() y recorrerlo con el ciclo foreach-as. Correr este ejemplo.
PHP provee el ciclo foreach-as, el cual recorre un arreglo por cada una de sus parejas key => value y permite al
programador hacer algo con ellas en cada iteracin del ciclo. El orden de recorrido es el mismo en que se encuentran los
elementos en el arreglo, y puede alterarse con funciones de ordenamiento.
Las llaves en un arreglo asociativo slo pueden ser enteras o string, pero el valor puede ser de cualquier tipo de datos,
incluso otro arreglo. Esto permite representar matrices o arreglos de ms dimensiones.
22/09/2015 11:52 a. m.
84 de 99
7.1.7 Funciones
Las funciones en PHP se declaran con la palabra reservada function seguido por la lista de parmetros entre parntesis, de
la misma forma que se hace en JavaScript. El Listado 7.10 ilustra la funcin factorial() y su uso para imprimir los primeros
19 factoriales.
1. <body>
2.
<h1>Factoriales</h1>
3.
<ul>
4.
<?php
5.
# Retorna el factorial de $n
6.
function factorial($n)
7.
{
8.
return $n > 0 ? $n * factorial($n - 1) : 1;
9.
}
10.
11.
// Imprime los primeros 20 factoriales incluyendo el 0
12.
for ( $i = 0; $i < 20; ++$i )
13.
echo "<li>$i! = ", factorial($i), "</li>\n";
14.
?>
15.
</ul>
16. </body>
Listado 7.10. Nmeros factoriales con una funcin recursiva en PHP. Correr este ejemplo.
En JavaScript el manejo de valores o referencias es implcito, es decir, el lenguaje se reserva su manejo y el programador
no puede alterarlo. En cambio, en PHP el manejo de valores y referencias es explcito, es decir, el programador debe indicar
cundo quiere hacer una copia de un valor o cuando quiere tener una referencia hacia el valor original. Como es de esperar,
las referencias se crean con el operador ampersand (&), como se aprecia en el ejemplo del php_byvalue_byreference.
7.1.8 Reglas de alcance de variables (variable scope)

Una importante diferencia en PHP con otros lenguajes de programacin son sus reglas de alcance de variables (variable
scope). PHP asume que toda referencia a variable que se haga en el cuerpo de una funcin, es una referencia a una variable
local, a menos de que se indique lo contrario. En el Listado 7.11, la funcin print_factorials() falla en la lnea 16 al tratar
de acceder a $count, ya que PHP busca una variable $count local, la cual no fue declarada en ese contexto.
1. <body>
2.
3.
<ul>
4.
<?php
5.
# Variable global
6.
$count = 25;
7.
8.
9.
{
10.
11.
}
12.
13.
function print_factorials()
14.
{
15.
// Error: $count no esta definida localmente
16.
for ( $i = 0; $i < $count; ++$i )
17.
18.
}
19.
20.
print_factorials();
21.
?>
22.
</ul>
23. </body>
Listado 7.11. Error tratando de acceder a una variable local no definida. Correr este ejemplo.
Este problema es un error comn de programacin, debido a PHP rompe la norma de la mayora de lenguajes con los cuales
podra estar familiarizado el desarrollador. Hay varias soluciones. Si es factible, se recomienda pasar por parmetro el valor
que requiere la funcin, as se mantiene la modularidad del cdigo y se reduce la dependencia de variables globales, como
se hace en el Listado 7.12.
1. <body>
2.
3.
<ul>
4.
<?php
5.
// Variable global
6.
$count = 25;
7.
8.
9.
{
10.
11.
}
12.
13.
function print_factorials($count)
14.
{
15.
22/09/2015 11:52 a. m.
85 de 99
16.
for ( $i = 0; $i < $count; ++$i )
17.
18.
}
19.
20.
print_factorials($count);
21.
?>
22.
</ul>
23. </body>
Listado 7.12. Pasar variables globales po r parmetro a una funcin. Correr este ejemplo.
Si por alguna razn se necesita trabajar con variables globales, se le puede indicar a la funcin que la variable $count no
est definida en el contexto local si no en el global, lo cual se hace con la palabra reservada global, como se aprecia en la
lnea 16 del Listado 7.13. El uso de variables globales se considera una mala prctica de programacin.
1. <body>
2.
3.
<ul>
4.
<?php
5.
// Variable global
6.
$count = 25;
7.
8.
9.
{
10.
11.
}
12.
13.
function print_factorials()
14.
{
15.
// Hace a $count accesible en el contexto local
16.
global $count;
17.
18.
19.
for ( $i = 0; $i < $count; ++$i )
20.
21.
}
22.
23.
print_factorials();
24.
?>
25.
</ul>
26. </body>
Listado 7.13. Uso de variables globales. Correr este ejemplo.
PHP provee algunas variables globales que son accesibles desde cualquier contexto, es decir, sin tener que declararlas
primero con la palabra reservada global. Se les conocen como variables superglobales y son arreglos asociativos con
informacin muy til para el programa. Se listan en la Tabla 7.2.
Arreglo
Descripcin
$GLOBALS
Sirve para acceder a las variables globales, en especial si se quiere acceder a una variable global y existe una homnima
en el contexto local.
$_SERVER
Contiene variables enviadas por el servidor web al intrprete de PHP, como $_SERVER['PHP_SELF'] que tiene la ruta del
programa PHP relativa a la raz del sitio, el nombre del servidor web ($_SERVER['SERVER_NAME']), detalles del
navegador que solicit ejecutar el programa PHP ($_SERVER['HTTP_USER_AGENT']), el IP de la mquina del cliente
($_SERVER['REMOTE_ADDR']) y muchos otros.
$_GET
Aloja las variables pasadas al script por parmetro en el URL (mtodo HTTP GET).
$_POST
Aloja las variables pasadas al script por parmetro utilizando el mtodo HTTP POST.
$_FILES
Aloja informacin sobre los potenciales archivos que se hayan enviado (uploaded) por el mtodo HTTP POST.
$_COOKIE
Un arreglo con variables y valores que el navegador aloja por peticin del sitio web.
$_SESSION Almacena variables globales para controlar la sesin con el navegador.

$_REQUEST Un arreglo que contiene la unin de los arreglos $_GET, $_POST y $_COOKIE.
$_ENV
Las variables ambiente que dispone el intrprete de JavaScript. Son dependientes del sistema operativo.
Tabla 7.2. Arreglos asociativos superglobales en PHP
Siempre que se va a usar una variable cuyo valor fue provisto por una fuente externa, como un parmetro, debe evitarse
que su valor sea ejecutado por el intrprete de JavaScript o genere cdigo (X)HTML/JavaScript, ya que permite a un
atacante inyectar cdigo maligno que podra revelar informacin confidencial de su sitio web u otro tipo de dao. PHP
provee varias funciones que convierten cdigo en una representacin no ejecutable, como htmlentities() que reemplaza
los caracteres especiales (<, >, &) por sus entidades correspondientes (<, >, &).
7.1.9 Objetos
22/09/2015 11:52 a. m.
86 de 99
Los objetos en PHP utilizan prcticamente la misma sintaxis de Java, con algunas variaciones de C++. Los objetos son
instancias de clases. Una clase se declara con la palabra reservada class seguida por un identificador. Las propiedades
(miembros de datos) y mtodos de la clase, se deben anteceder con el tipo de acceso que deben tener: private, protected o
public. Si se omite, PHP asume public.
Los mtodos se declaran como cualquier otra funcin de PHP, slo que dentro del cuerpo de la clase. Un mtodo de una clase
a diferencia de una funcin normal, tiene acceso a tres identificadores reservados: $this es una referencia hacia la instancia
del objeto al que se le invoc el mtodo, y se utiliza para acceder a sus propiedades y otros mtodos. self:: es una
referencia hacia la clase misma y sirve para acceder a sus miembros estticos. parent:: permite acceder a propiedades y
mtodos de la clase base.
Para instanciar un objeto se utiliza el operador new clase(parametros), envindole los parmetros que recibe la clase en el
constructor. Un constructor es un mtodo con el nombre especial __construct, el cual se encarga de inicializar los miembros
de datos del objeto. Aunque se puede utilizar un mtodo con el mismo nombre de la clase como constructor, no se
recomienda esta prctica, ya que versiones recientes de PHP lo interpretan como un mtodo normal.
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.
class Player
{
protected $nickname, $email, $score;
function __construct($nickname, $email, $score = 0)
{
$this->nickname = $nickname;
$this->email = $email;
$this->score = $score;
}
function increaseScore($by = 1) { $this->score += $by; }
function getNickname() { return $this->nickname; }
function getScore() { return $this->score; }
}
$players[] = new Player('pinocho', 'pinocho@cajafishel.com');
$players[] = new Player('chema', 'chema@semeolvido.com');
$players[] = new Player('osqui', 'dumbo@tlc.com');
$bets = rand(30, 100);
echo count($players), " jugadores, $bets apuestas... ";
for ( $i = 0; $i < $bets; ++$i )
{
$winner = $players[ rand(0, count($players) - 1) ];
$winner->increaseScore();
}
echo "Resultados:\n";
for ( $i = 0; $i < count($players); ++$i )
echo '
', $players[$i]->getNickname(), ': ', $players[$i]->getScore(), "\n";
Listado 7.14. Ejemplo de clases y objetos en PHP. Correr este ejemplo.
7.2 Manejo de archivos

PHP puede crear o acceder a archivos existentes en el servidor web, por ejemplo, para crear bitcoras o archivos de datos
que necesita el programa en PHP.
PHP provee una considerable cantidad de funciones para trabajar con archivos y el sistema de archivos del sistema
operativo, la mayora de ellas fuertemente influenciadas por el lenguaje de programacin C. El ejemplo del Listado 7.15
muestra cmo crear una bitcora en la misma carpeta donde est el archivo .php, la cual registra detalles sobre cada
22/09/2015 11:52 a. m.
87 de 99
acceso, como la fecha y la direccin IP del cliente que solicit el recurso.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
// Abrir el archivo para agregarle texto al final (append)

$log_file = fopen('log_file.txt', 'a')
or die('Error: No se pudo abrir log_file.txt');
// Escribir algunos datos sobre el acceso: fecha, IP del cliente, etc
fprintf($log_file, "%s\t%s\t%s\t%s\n"
, date('ymd:His')
, $_SERVER['REMOTE_ADDR']
, $_SERVER['REMOTE_PORT']
, $_SERVER['HTTP_USER_AGENT']
) or die('Error: no se pudo escribir en la bitcora');
// Cerrar el archivo
fclose($log_file);
Listado 7.15. Crear un archivo de texto en el servidor. Co rrer este ejemplo.
El procedimiento para trabajar con archivos en PHP es el mismo que en otros lenguajes: abrir el archivo con la funcin
fopen(), leer o escribir bytes en l (fread(), fwrite(), fprintf(), etc.) y cerrar el archivo con la funcin fclose(). Todas
estas funciones necesitan saber en cul archivo trabajar. PHP utiliza un tipo de variable especial llamada "recurso"
(resource) para representar archivos o registros de una base de datos.
La funcin fopen() retorna un recurso (resource) hacia el archivo cuya ruta est en el primer parmetro. Pero si fopen()
falla al abrir el archivo, retorna false. Es una prctica comn detener la ejecucin del script con la funcin die() en caso de
no poder acceder a un recurso importante (lnea 3 del Listado 7.15) ya que permite rpidamente a los desarrolladores
identificar y solucionar el problema; sin embargo, esto nunca debe hacerse. Lo adecuado es presentar una pgina de error
amigable al visitante, y quiz enviar un correo electrnico al administrador del sitio web para avisar del problema. Las
principales razones porque fopen() falla al abrir un archivo es por falta de permisos, falta de espacio en disco o porque el
nombre del archivo es invlido. Estos problemas son responsabilidad del programador y no del visitante.
El Listado 7.16 muestra como recorrer la bitcora creada en el Listado 7.15 y presentar su contenido en una tabla XHTML.
La lectura se hace en un ciclo hasta encontrar el final del archivo (lnea 11). En cada iteracin del ciclo se obtiene una lnea
del archivo y se imprime como una fila de la tabla, a excepcin de que sea una lnea vaca.
1. // Abrir el archivo para mostrar su contenido
2. $log_file = fopen('log_file.txt', 'r')
3.
4.
5. echo "<table><thead><tr>"
6.
, "<th></th><th>Fecha</th><th>IP</th><th>Puerto</th><th>Agente
usuario</th>"
7.
, "</tr></thead><tbody>\n";
8.
9. // Imprimir cada lnea en una fila de una tabla XHTML
10. $count = 0;
11. while ( ! feof($log_file) )
12. {
13.
$line = fgets($log_file);
14.
$line = trim($line);
15.
if ( strlen($line) == 0 ) continue;
16.
$line = str_replace("\t", '</td><td>', $line);
17.
echo "<tr><th>", ++$count, "</th><td>$line</td></tr>\n";
18. }
19.
20. echo "</tbody></table>\n";
21. fclose($log_file);
Listado 7.16. Leer un archivo de texto en PHP. Correr este ejemplo.
Qu pasa si dos programas escriben simultneamente en un mismo archivo? Si no se hace de forma controlada, la
respuesta ser que el archivo se corrompe. En un ambiente web, una misma pgina puede ser visitada por uno, varios o
miles de usuarios simultneamente. Cada uno provoca una ejecucin distinta del mismo script PHP. Por eso es tan
importante evitar que dos procesos traten de escribir el mismo archivo simultneamente, o que uno escriba mientras otros
estn leyendo.
PHP provee la funcin flock() que bloquea un archivo para uso exclusivo (LOCK_EX) o lo desbloquea (LOCK_UN), y funciona de
la siguiente forma. Supngase que un proceso 1 pide bloquear un archivo con flock(), el cual le otorga permiso de
escritura. Mientras el proceso 1 est escribiendo, un proceso 2 solicita bloquear el archivo para escritura; flock() pone en
espera al proceso 2 hasta que el proceso 1 haya terminado de escribir. Una vez que proceso 1 desbloquee el archivo
invocando a flock() con el parmetro LOCK_UL, flock() sacar de la cola de espera al proceso 2 bloqueando el archivo de
nuevo.
El uso de flock() produce una serializacin de procesos, y por ende, introduce tiempos de espera que podran ser notorios
para el visitante. Para reducir estos tiempos al mximo se recomienda bloquear el archivo inmediatamente antes de hacer la
escritura y desbloquearlo inmediatamente despus de escribir en l; es decir, se debe evitar bloquear un archivo desde que
22/09/2015 11:52 a. m.
88 de 99
inicia el script, y desbloquearlo al final de ste. El Listado 7.17 muestra el ejemplo de la bitcora (Listado 7.15) utilizando
candados.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
// Abrir el archivo para agregarle texto al final (append)

$log_file = fopen('log_file.txt', 'a')
// Escribir algunos datos sobre el acceso: fecha, IP del cliente, etc
if ( flock($log_file, LOCK_EX) )
{
fprintf($log_file, "%s\t%s\t%s\t%s\n"
, date('ymd:His')
, $_SERVER['REMOTE_ADDR']
, $_SERVER['REMOTE_PORT']
, $_SERVER['HTTP_USER_AGENT']
) or die('Error: no se pudo escribir en la bitcora');
flock($log_file, LOCK_UN);
}
// Cerrar el archivo
fclose($log_file);
Listado 7.17. Utilizar candados para evitar que dos procesos escriban un mismo archivo simultneamente. Correr este ejemplo.
Como se podr notar en la lnea 6 del Listado 7.17, la solicitud de bloquear un archivo debe hacerse en un if, debido a que
flock() retorna false en caso de que el mecanismo de candados no sea implementado por el sistema operativo o el sistema
de archivos, como ocurre en FAT32 o NFS (Network File System).
7.3 Bases de datos

Adems del uso de archivos, PHP puede conectarse a diversidad de motores de bases de datos (DBMS, Database
Management System) para almacenar informacin del sitio web, como SQLite, MySQL, PostgreSQL, SQL Server y Oracle. De
todos ellos cabe resaltar a MySQL, por ser relativamente liviano y apto para la mayora de sitios web de mediana escala.
Para sitios web gigantes de alta concurrencia, el modelo relacional es inapropiado y el desarrollador debera considerar
alguna alternativa, como bases de datos orientadas a documentos. En los ejemplos de esta seccin se usar MySQL debido a
su histrica popularidad junto con PHP.
Para instalar MySQL en Linux, puede utilizar su administrador de paquetes o compilar desde el cdigo fuente. Adems debe
instalar el driver de MySQL en PHP. Por ejemplo, en Ubuntu puede lograr estas dos tareas emitiendo el comando sudo
apt-get install mysql-server php5-mysql y reiniciar el servidor de PHP si lo hay. Para Microsoft Windows existe un
instalador o bien puede utilizar un ambiente de desarrollo integrado como EasyPHP que ya lo incluye. Es normal que en el
proceso de instalacin se solicite la contrasea del administrador (usuario root) de MySQL, de lo contrario, se asume vaca.
Para acceder a las bases de datos, se debe utilizar un lenguaje de programacin y el API (Application Programming
Interface) que el DBMS provee. Esto es lo que se har desde PHP. Sin embargo, la mayora de motores de bases datos,
proveen clientes amigables al usuario, en lnea de comandos (trate mysql -u root -p en Ubuntu), grficos como
mySQLAdmin o va web como phpMyAdmin.
El primer paso para utilizar bases de datos, es crear una en el DBMS y los usuarios que tendrn permiso de accederla.
Aunque se pueden crear bases de datos desde PHP dndole permisos de administracin del DBMS (la cuenta root de
MySQL), no es una solucin adecuada ya que compromete la seguridad de los datos. Por esto, es comn que la persona que
administra el servidor de bases datos utilice alguno de los otros clientes del DBMS para crear una base de datos y los
usuarios que podrn modificarla, entre los que se incluye un usuario para los scripts de PHP.
Los siguientes comandos ilustran la creacin de una base de datos Universidad utilizando el cliente en lnea de comandos de
MySQL, y la creacin del usuario php_user al cual se le otorgan permisos de administracin sobre la base de datos
Universidad, pero no sobre otras bases de datos ni el DBMS. Al final se prueba que el usuario php_user haya sido creado
exitosamente volviendo a entrar al cliente de MySQL con sus credenciales.
$ mysql -u root -p
Password:
mysql> CREATE DATABASE Universidad;
Query OK, 1 row affected (0.00 sec)
mysql> SHOW DATABASES;
+--------------------+
| Database
|
22/09/2015 11:52 a. m.
89 de 99
+--------------------+
| information_schema |
| mysql
|
| Universidad
|
+--------------------+
3 rows in set (0.01 sec)
mysql> USE Universidad;
Database changed
mysql> GRANT ALL ON Universidad.* TO 'php_user' IDENTIFIED BY 'php_user_password';
Query OK, 0 rows affected (0.00 sec)
mysql> QUIT
Bye
$ mysql -u php_user -p
Password:
mysql> QUIT
Bye
Es probable que su sitio web se componga de muchos archivos .php y varios de ellos necesiten acceder a la base de datos.
Para evitar redundar cdigo, es conveniente guardar las credenciales en un archivo reutilizable, por ejemplo
db_credentials.php, cuyo contenido puede ser como el mostrado en el Listado 7.18. Es muy importante que estas variables
estn dentro de la etiqueta <?php...?>, de lo contrario cualquier visitante que trate de acceder a l, ver informacin
sensible. Y si por alguna razn el servidor de PHP dejara de funcionar, el servidor web podra enviarle el archivo
db_credentials.php ntegro al navegador para que lo almacene en algn lugar del disco. Por esto, de ser posible el archivo
con credenciales debera estar en alguna carpeta del sistema de archivos que no es parte del sitio web, y debera tener
permisos de lectura y escritura el administrador del sistema operativo (root en Unix) y permiso de lectura para el usuario
del servidor web (algo como www-data) nicamente.
<?php
$db_host
$db_name
$db_user
$db_pass
?>
=
=
=
=
'localhost';
'Universidad';
'php_user';
'php_user_password';
Listado 7.18. Archivo reutilizable con las credenciales para acceder a la base de datos. Al correr este ejemplo debera obtener una pgina vaca.
Para comunicarse con el DBMS, PHP provee un conjunto de funciones que varan de un DBMS a otro, o la clase genrica
PDO (PHP Data Objects) que provee una misma interfaz para acceder a varios DBMS.
7.3.1 Funciones para acceder a MySQL

PHP provee un conjunto de funciones para acceder a MySQL, las cuales inician con el prefijo mysql_. El procedimiento para
acceder a la base de datos desde PHP es tpicamente el siguiente:
1. Se establece una conexin con el servidor de bases de datos (DBMS): mysql_connect().
2. Se escoge la base de datos con la que se va a trabajar: mysql_select_db().
3. Se emiten consultas (para obtener o actualizar informacin): mysql_query().
4. Si los hay, se recorren los registros resultado de la consulta con mysql_fetch_row() o con mysql_fetch_assoc() , se
hace algn procesamiento con ellos, y se construye alguna salida til para el visitante.
5. Si los hay, se liberan los registros obtenidos de la base de datos: mysql_free_result().
6. Se cierra la conexin con el DBMS: mysql_close().
El Listado 7.19 muestra un ejemplo parcial de cmo crear las tablas en una base de datos vaca desde PHP. La lnea 3 hace
que, en esa posicin, PHP incruste literalmente el contenido del archivo db_credentials.php mostrado en el Listado 7.18, y
luego lo interprete; lo cual ocasiona que las variables $db_host, $db_name, $db_user y $db_pass estn definidas como
variables globales para el resto del programa.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
// Este PHP se llama solo 1 vez para crear el esquema de la base de datos.
// Cargar las credenciales de la base de datos
require_once('db_credentials.php');
// Conectarse al servidor de base de datos (DBMS)
$db_connection = mysql_connect($db_host, $db_user, $db_pass)
or die("No se pudo conectar al DBMS: " . mysql_error() );
// De todas las bases de datos que hay en el DBMS, escoger la de Universidad
// Esto equivale a escribir 'USE Universidad;' en un cliente de MySQL
mysql_select_db($db_name)
or die("No se pudo seleccionar la base de datos: " . mysql_error() );
// Truco: si se pasa el parametro drop_tables=true, se recrea la base de datos
$drop_tables = isset($_GET['drop_tables']) && $_GET['drop_tables'] == 'true';
22/09/2015 11:52 a. m.
90 de 99
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.
61.
62.
63.
64.
// Borrar las tablas es util por si el webmaster quiere empezar el sitio de cero
if ( $drop_tables )
{
// Obtener la lista de tablas existentes para eliminarlas
$result = mysql_query("SHOW TABLES FROM $db_name")
or die("No se pudo obtener la lista de tablas: " . mysql_error() );
// Por cada tabla encontrada en la base de datos, eliminarla
while ($row = mysql_fetch_row($result))
{
// mysql_fetch_row() retorna un arreglo con un valor por cada atributo
$table_name = $row[0];
mysql_query("DROP TABLE $table_name") or die( mysql_error() );
echo "<li>Tabla $table_name: <span class=\"warning\">Eliminada</span>.</li>\n";
}
// Ya los registros con los nombres de las tablas no seran usados mas, liberarlos
mysql_free_result($result);
}
// Crear las tablas que no existen
// Crear cada tabla de la base de datos Universidad
$query =
'CREATE TABLE IF NOT EXISTS Estudiante (
Carne CHAR(6),
Nombre VARCHAR(50) NOT NULL,
Correo VARCHAR(100) UNIQUE,
Promedio REAL DEFAULT 0.0,
CONSTRAINT PRIMARY KEY (Carne),
INDEX(Nombre(45))
);';
mysql_query($query) or die("No se pudo crear la tabla Estudiante: " . mysql_error());
echo "Tabla Estudiante: creada exitosamente.<br/>\n";
$query =
'CREATE TABLE IF NOT EXISTS Profesor (
Cedula INT(9),
Nombre VARCHAR(50) NOT NULL,
Correo VARCHAR(100) NOT NULL UNIQUE,
CONSTRAINT PRIMARY KEY (Cedula),
INDEX(Nombre(45))
);';
mysql_query($query) or die("No se pudo crear la tabla Profesor: " . mysql_error());
echo "Tabla Profesor: creada exitosamente.<br/>\n";
// Es buena practica cerrar la conexion tan pronto como se deja de usar
mysql_close($db_connection);
Listado 7.19. Creacin de tablas en una base de datos MySQL vaca. Obtener el ejemplo completo.
La lnea 6 del Listado 7.19 invoca la funcin mysql_connect($host, $user, $pass) para intentar establecer una conexin con
el servidor de base de datos MySQL que est en la computadora local (puesto que el valor de $db_host es 'localhost'), con
el usuario y contrasea que se crearon para uso exclusivo de los scripts de PHP. Si mysql_connect() logra establecer la
conexin, retorna un recurso de PHP (resource) que representa a la conexin y puede usarse subsecuentemente. Si no se
puede establecer la conexin, mysql_connect() retorna false y PHP verifica la segunda condicin del or en la lnea 7, que
detiene la ejecucin del script con mensaje de error para el navegador. Como se dijo antes, este mensaje es til para el
desarrollador, pero poco amigable para el visitante.
Si la ejecucin alcanza la lnea 11 del Listado 7.19, indica que la conexin con el DBMS fue establecida exitosamente. El
DBMS puede tener muchas bases de datos a su cargo, y es necesario indicarle con cual de todas ellas se quiere trabajar con
la funcin mysql_select_db($db_name).
A partir de la lnea 40 en adelante, se empiezan a crear las tablas de la base de datos Universidad, pero si ya existen, se
mantienen inalteradas. Sin embargo, pueda que por alguna razn el administrador del sitio web de la Universidad
(webmaster) quiera limpiar la base de datos y empezar de cero. Para efectos ilustrativos, si se ha provisto el parmetro
create_schema.php?drop_tables=true en el URL (de esto se hablar luego) se destruirn todas las tablas existentes de la
base de datos sin confirmacin alguna, lo cual no es un buen diseo, pero se hace aqu con propsitos ilustrativos.
En caso de que el administrador solicite recrear las tablas, el mtodo ms eficiente es eliminarlas de golpe (DROP TABLE) y
volverlas a crear vacas. Para poder borrarlas se necesita conocer el nombre de cada una de ellas. El script podra tener
estos nombres en un arreglo, o bien, solicitarlos al DBMS mediante una consulta SHOW TABLES de MySQL. Cada cual tiene sus
ventajas y desventajas. Aqu se seguir la segunda.
La consulta SHOW TABLES opera de la misma forma que una consulta SELECT de SQL. La consulta es ejecutada con la funcin
mysql_query($sql_query), la cual retorna un recurso que representa el resultado de la consulta, a veces llamado "record
set". En la lnea 21 del Listado 7.19, este recurso se almacena en una variable $result.
Es importante hacer notar que $result almacena un recurso, no los datos que se obtuvieron de la consulta. En el modelo
relacional, los datos resultado de una consulta son una tabla temporal, y aunque algunos DBMS permiten acceder a todos
ellos como si fuesen una matriz en memoria aleatoria (RAM, Random Access Memory), es ms eficiente recorrerlos una fila
a la vez. Cada invocacin a la funcin mysql_fetch_row($query_result) trae de la base de datos la prxima fila resultado de
una consulta, y la retorna en un arreglo que permite acceder a cada valor por un ndice que equivale al nmero de la
columna. Para el caso de SHOW TABLES slo se retorna una columna con el nombre de cada tabla presente en la base de
22/09/2015 11:52 a. m.
91 de 99
datos. La lnea 28 del Listado 7.19 muestra cmo acceder a este valor. Si se quiere acceder al valor por el nombre de la
columna en lugar de un ndice, utilcese la funcin mysql_fetch_assoc($query_result), que puede tener el efecto de hacer al
cdigo ms portable.
Una vez que se ha obtenido el nombre de la tabla, se emite otra consulta DROP TABLE para eliminarla de la base de datos
(lnea 30). Ntese que la invocacin a mysql_fetch_row() se hace en un ciclo, ya que es muy probable que existan varias
tablas en la base de datos. Cuando se ha terminado de procesar la ltima de ellas, mysql_fetch_row() retornar false en
lugar de un arreglo de valores.
La lnea 35 del Listado 7.19 invoca la funcin mysql_free_result($query_result) para liberar las estructuras de datos en
memoria que alojan el resultado de la consulta obtenido en la lnea 21 con mysql_query(). Si se omite esta invocacin, el
intrprete de PHP lo har automticamente cuando el script termine su ejecucin.
En sntesis, el cdigo de las lneas 18 a 36 del Listado 7.19 se ejecuta slo cuando se ha solicitado eliminar las tablas
existentes de la base de datos, obteniendo el nombre de cada una de ellas y eliminndolas con DROP TABLE. Una vez que se
han eliminado, el programa sigue su ejecucin normal en la lnea 40, que emite otras consultas (CREATE TABLE) con la
misma funcin mysql_query(), pero debido a la naturaleza de la instruccin CREATE TABLE de SQL, no se generan registros de
datos como resultado, sino los valores true y false indicando respectivamente si la creacin de la tabla fue exitosa o no.
Como puede inferirse, la funcin mysql_query() se utiliza para ejecutar cualquier tipo de consulta SQL: crear tablas, insertar
valores, actualizar valores, eliminar valores y obtener datos.
Para mysql_query() la consulta es un simple string que pasa directamente al DBMS. La sintaxis de dicha consulta es
completamente dependiente del DBMS en uso. El desarrollador web debe consultar la documentacin oficial de su DBMS
para comprobar su validez u otras opciones tiles. En los ejemplos de este documento se ha utilizado MySQL cuya sintaxis
se puede consultar en lnea.
Finalmente la lnea 64 del Listado 7.19 desconecta al intrprete de PHP del servidor de bases de datos con la funcin
mysql_close(), la cual libera recursos y permite que el DBMS pueda aceptar otras conexiones; aspecto importante cuando
se atienden miles de visitantes simultneamente en un sitio web.
7.3.2 Objetos para acceder a la base de datos
7.4 Formularios web

A diferencia de otros medios tradicionales, como la radio y televisin; el web permite una comunicacin interactiva, donde el
visitante puede expresarse y retroalimentar a los autores. El mecanismo de interaccin ms primitivo es activar un
elemento, haciendo click sobre l con el puntero del ratn o navegando con el teclado. Sin embargo, es el formulario web
el mecanismo que permite al visitante comunicar informacin textual, a travs de campos de texto, seleccionando valores
en una lista emergente, adjuntando un archivo de su computadora, y otros controles que guardan mucha similitud a los que
dispone la interfaz de una aplicacin de escritorio.
Las aplicaciones web actuales recurren al formulario web como el escenario donde la interaccin con el usuario tiene lugar.
Tmese de ejemplo un cliente web de correo (como GMail). Los campos para el destinatario, las copias, y el ttulo del
mensaje, se implementan con campos de texto (text fields); el cuerpo del mensaje se escribe en un control de rea de texto
(text area); los botones permiten formatear el texto del mensaje, adjuntar archivos, y uno en especial, el botn de enviar
(submit) termina la edicin del mensaje y enva copias a los destinatarios.
En la mayora de casos, la interaccin con un formulario web tiene repercusiones en el lado del sevidor. Por ejemplo en el
caso del cliente de correo, adems de enviar el mensaje a los destinatarios, se guardar una copia en el buzn de salida. Es
decir, algn texto se concatenar a un archivo, o un registro se agregar a la base de datos del servidor de correo. Es por
esto que la implementacin de un formulario web requiere trabajo en ambas partes: en el lado del cliente, el navegador
despliega el formulario y asiste al informante en el ingreso de informacin mediante JavaScript; mientras que en el lado del
servidor se reciben los datos, se realiza la validacin de los mismos y se aplica el efecto para el cual se ide el formulario
(enviar un correo, almacenar datos, buscar informacin, etc.).
El formulario web es un concepto que existe desde los inicios de la web, y se escribe con el elemento form como se
ejemplifica en las lneas 12 a 16 del Listado 7.20. La primera vez que se carga este programa, ninguna de las variables
$username y $password tendrn un valor, por lo que el control alcanza el else y despliega el formulario web de las lneas 12 a
16. Nota: El operador <<< se conoce como Heredoc, y es seguido por un identificador y un cambio de lnea. Todos los
caracteres que se encuentren entre ese cambio de lnea y la prxima ocurrencia del identificador forman un string en el cual
se hace interpolacin de variables. Es til para encerrar texto que contiene comillas dobles sin tener que utilizar caracteres
de escape (\). La nica restriccin es que el identificador de cierre slo puede estar precedido por un cambio de lnea como
se ve en la lnea 17.
1. <body><?php
2.
$username = isset($_GET['username']) ? $_GET['username'] : '';
22/09/2015 11:52 a. m.
92 de 99
3.
$password = isset($_GET['password']) ? $_GET['password'] : '';
4.
if ( $username != '' && $password != '' )
5.
{
6.
echo "<p>Bienvenido(a) <strong>$username</strong> a nuestro sitio seguro. ";
7.
echo "(No eres <a href=\"login1.php\">$username</a>?).</p>";
8.
}
9.
else
10.
{
11.
echo <<<_EOT
12.
<form method="get" action="login1.php">
13.
<p><label>Usuario: <input type="text" name="username"/></label></p>
14.
<p><label>Contrasea: <input type="password" name="password"/></label></p>
15.
<p><input type="submit" value="Enviar"/></p>
16.
</form>
17. _EOT;
18.
}
19. ?></body>
Listado 7.20. Un fo rmulario web minimalista. Correr este ejemplo.
Un formulario web (form) se compone de varios campos de entrada (input, select y textarea) en los que el visitante
ingresa o escoge informacin. En el caso del Listado 7.20 el formulario consta de un campo de texto con nombre username
(lnea 13), un campo de texto para ingresar contraseas llamado password (lnea 14) y el botn de "submit" (lnea 15). El
usuario llena estos campos y cuando est listo, presiona el botn de enviar (submit). Esto causa que el navegador recopile
el valor de todos los campos del formulario como parejas nombre_campo=valor y las enve a algn programa en el servidor
web para que las procese. El URL de este programa se especifica en el atributo action del elemento form (lnea 12), que en
el caso del Listado 7.20 es el programa mismo.
Cmo hace el programa indicado en el atributo action para recuperar los datos ingresados por el visitante? El protocolo
HTTP establece dos mtodos estndar para transferir los datos de un formulario: GET y POST, el cual se escoge con el
atributo method del elemento form. En el Listado 7.20 se utiliz el mtodo GET (lnea 12).
7.4.1 El mtodo GET

El mtodo GET indica que el navegador debe enviar las parejas nombre_campo=valor al servidor en el URL, separadas del
programa (indicado por el valor del atributo action del elemento form) por un signo de interrogacin, y cada pareja
separada de otra por un ampersand (&), de la forma siguiente:
action?field1=value1&field2=value1&...&fieldN=valueN
Al texto que aparece despus del carcter signo de pregunta en el URL anterior (marcado en negritas) se le conoce como
query string, y es visible al visitante. Esto se puede probar al correr el programa del Listado 7.20, escribir un par de
valores en los campos de texto y examinar la barra de direcciones del navegador tras presionar el botn de enviar. Incluso,
el visitante puede cambiar los valores en la barra de direcciones y ejecutar de nuevo el programa con ellos; o bien guardar
el URL en sus favoritos.
PHP facilita el trabajo al programador, y cada vez que se llama un script, el intrprete de PHP "parsea" el query string y
extrae cada valor que en l encuentre, y los agrega a un arreglo asociativo superglobal llamado $_GET, de tal forma que el
programador puede acceder a los valores con la expresin:
$field_value = $_GET['field_name'];
donde field_name corresponde al valor del atributo name del campo input, select o textarea definido en el formulario web.
En lo siguiente se explicar paso a paso la lgica del Listado 7.20.
La primera vez que el visitante accede al programa login1.php normalmente no provee un query string, y por ende las
variables $username y $password adquirirn cadenas vacas en las lneas 2 y 3; ya que la funcin isset() retorna true slo
para variables definidas, lo cual no ocurre con las entradas $_GET['username'] y $_GET['password'] en el arreglo asociativo
$_GET. De esta forma, la condicin del if en la lnea 4 se evala como false y hace que el intrprete de PHP imprima el
formulario (lneas 11 a 16), el cual es enviado al navegador.
El navegador presenta el formulario vaco, el cual consta de los siguientes controles: un campo de texto normal con nombre
username (lnea 13), un campo de texto especial para escribir contraseas llamado password (lnea 14), y el botn de enviar
(lnea 15). Supngase que el visitante escribe 'chema' en el campo username, 'semeolvido' en el campo password y presiona
el botn Enviar. Para el navegador este botn es especial, y cuando se activa busca el formulario al cual pertenece (lnea
12), y examinando su atributo action obtiene el programa al que se le debe enviar los valores ingresados por el usuario
(login1.php) y a travs de cul mtodo (get). El navegador recopila los nombres y los valores de cada campo, arma el query
string y lo concatena al URL del programa, lo cual genera el siguiente URL:
http://www.ejemplo.com/path/login1.php?username=chema&password=semeolvido
Seguidamente, el navegador pone este URL en la barra de direcciones y enva el siguiente mensaje de solicitud HTTP al
servidor (los cambios de lnea son significativos):
1. GET /path/login1.php?username=chema&password=semeolvido HTTP/1.1
2. Host: www.ejemplo.com:80
3. User-Agent: Chrome/13
4.
22/09/2015 11:52 a. m.
93 de 99
Como se puede ver, los valores de los campos viajan en la lnea de solicitud (request line) del mensaje de solicitud HTTP,
precedidos por el mtodo de solicitud GET del estndar HTTP. Al recibir este mensaje, el servidor web localiza dentro de su
sitio el recurso /path/login1.php y de acuerdo a su configuracin, la extensin .php le indica que debe invocar al intrprete
de PHP envindole por parmetro el mensaje de solicitud completo, ms otra informacin.
El intrprete de PHP recibe la informacin del servidor web, y la distribuye en los arreglos superglobales $_SERVER, $_ENV,
etc. "Parsea" el query string; llena el arreglo asociativo $_GET e inicia la ejecucin del login1.php del Listado 7.20, pero esta
vez habr una diferencia importante: las entradas $_GET['username'] y $_GET['password'] estn definidas en el arreglo
asociativo $_GET, por lo que las variables $username y $password adquirirn los valores 'chema' y 'semeolvido'
respectivamente en las lneas 2 y 3. La condicin del if esta vez se evaluar como verdadera y se imprimir el texto de
bienvenida, el cual es regresado como resultado al servidor web, quien lo despachar al cliente.
7.4.2 El mtodo POST

En el ejemplo del Listado 7.20 se enva al servidor una contrasea por el mtodo GET, lo cual la hace visible al usuario en el
URL, quien adems puede modificarla. El mtodo POST realiza el mismo trabajo del mtodo GET de transferir valores de
un formulario al servidor web, con la diferencia de que stos se envan en el cuerpo del mensaje de solicitud HTTP en lugar
de la lnea de solicitud, lo cual los hace invisibles al usuario, impidiendo que los puedan modificar o agregar a los
marcadores del navegador. Los cambios para hacer el Listado 7.20 funcionar con el mtodo POST son pocos, como se
resaltan en el Listado 7.21 (lneas 2, 3 y 12).
1. <body><?php
2.
$username = isset($_POST['username']) ? $_POST['username'] : '';
3.
$password = isset($_POST['password']) ? $_POST['password'] : '';
4.
5.
{
6.
7.
8.
}
9.
else
10.
{
11.
echo <<<_EOT
12.
<form method="post" action="login1.php">
13.
14.
15.
16.
</form>
17. _EOT;
18.
}
19. ?></body>
Listado 7.21. Un formulario de autenticacin utilizando el mtodo POST. Correr este ejemplo.
Cuando el intrprete de PHP ejecuta un script, toma las parejas campo=valor del query string y las agrega al arreglo
asociativo $_GET, y las parejas que el navegador enva en el cuerpo del mensaje HTTP, las agrega al arreglo asociativo
$_POST. Como es de notar, ambos mtodos no son excluyentes. El programador debe simplemente tener el cuidado de
utilizar el arreglo asociativo correspondiente al mtodo escogido en el atributo method del elemento form.
A modo de ilustracin supngase que el visitante ingresa los mismos valores: 'chema' en el campo username, 'semeolvido'
en el campo password y presiona el botn Enviar del Listado 7.21. Esta vez el navegador detecta que el mtodo de envo de
datos es POST, y ensambla el siguiente mensaje de solicitud HTTP:
1.
2.
3.
4.
5.
6.
7.
POST /path/login1.php HTTP/1.1

Host: www.ejemplo.com:80
User-Agent: Chrome/13
Content-Type: application/x-www-form-urlencoded
Content-Length: 38
username=chema&password=semeolvido
En la mayora de situaciones el mtodo POST es preferido sobre el mtodo GET, no slo porque asegura a la aplicacin web
mayor control sobre los datos ingresados, sino por una razn ms. La cantidad de bytes que se puede escribir en un URL es
bastante limitada, mientras que en el cuerpo del mensaje HTTP puede crecer arbitrariamente. Esto es especialmente
necesario cuando se tienen grandes formularios o donde el usuario puede escribir extensas cantidades de texto en sus
campos.
7.4.3 Seguridad y validacin de datos

Los ejemplos del Listado 7.20 y Listado 7.21 no deben ponerse en funcionamiento en un sistema en produccin, debido a
que tienen una gran vulnerabilidad: los valores que provienen de los arreglos asociativos $_GET y $_POST son provistos por el
visitante, y nada impide que ste pueda enviar cdigo (X)HTML, JavaScript, PHP o SQL con malas intenciones, por ejemplo,
22/09/2015 11:52 a. m.
94 de 99
para descubrir contraseas o informacin sensible. A esta prctica se le llama inyeccin de cdigo y aunque es bastante
fcil evitar sus efectos nocivos, sigue siendo un tipo de ataque comn ya que es fcil para el programador olvidar defender
su cdigo.
Siempre que el programador va a tomar un valor de los arreglos $_GET y $_POST, debe "esterilizarlo" (sanitize) primero; lo
cual se logra neutralizando el efecto de los caracteres especiales en cada lenguaje. PHP provee varias funciones para
esterilizar cdigo, las cuales se listan en la Tabla 7.4.
Funcin
Descripcin
stripslashes($str)
Retorna un string resultado de eliminar los backslahes (\) de $str.
htmlentities($str)
Retorna un string resultado de reemplazar los caracteres especiales en (X)HTML (<, >, &, ', ")
por sus respectivas entidades (<, >, &, ', ").
strip_tags($str)
Elimina etiquetas (X)HTML que hayan en $str y retorna el resultado en una nueva cadena.
mysql_real_escape_string($str)
Inserta backslahes (\) a los caracteres que tienen significado especial en SQL, como cambios
de lnea y comillas.
Tabla 7.4. Funciones para esterilizar cdigo en PHP
El Listado 7.22 muestra un archivo con funciones de conveniencia que llaman a las listadas en la Tabla 7.4, las cuales se
utilizan en las lneas 2, 3 y 4 del Listado 7.23 para evitar inyeccin de cdigo maligno.
<?php
function sanitize($str)
{
return strip_tags(htmlentities(stripslashes($str)));
}
function sanitize_mysql($str)
{
return sanitize(mysql_real_escape_string($str));
}
function sanitize_trim($str) { return trim(sanitize($str)); }
function sanitize_mysql_trim($str) { return trim(sanitize_mysql($str)); }
?>
Listado 7.22. Funciones de co nveniencia para esterilizar cdigo (X)HTML, PHP y SQL.
1. <body><?php
2.
require_once('sanitize.php');
3.
$username = isset($_POST['username']) ? sanitize_trim($_POST['username']) : '';
4.
$password = isset($_POST['password']) ? sanitize_trim($_POST['password']) : '';
5.
6.
{
7.
8.
9.
}
10.
else
11.
{
12.
echo <<<_EOT
13.
<form method="post" action="login1.php">
14.
15.
16.
17.
</form>
18. _EOT;
19.
}
20. ?></body>
Listado 7.23. Esterilizacin de cdigo. Correr este ejemplo.
La validacin de datos provistos por el informante es una tarea ms semntica, como por ejemplo, verificar que los nmeros
se encuentren dentro de un rango apropiado, los textos no sean muy cortos o largos, o estn en algn lenguaje natural. En
el Listado 7.23 simplemente se ha discriminado cadenas vacas o constituidas nicamente de espacios en blanco (lnea 5).
7.4.4 Controles en el formulario

El estndar (X)HTML permite varios tipos de controles para ingresar datos, los cuales se listan en la Tabla 7.5. Normalmente
22/09/2015 11:52 a. m.
95 de 99
cuando se escribe un formulario, el autor incluye algn texto cercano a cada campo que ayude al informante a saber qu
tipo de informacin debe proveer en l, al cual se le llama rtulo o etiqueta (label). Si tanto el texto como el campo se
escriben dentro de un elemento label, el navegador los asociar semnticamente, de tal forma que cuando el usuario hace
click en el rtulo, el navegador transferir el efecto al campo asociado. Este es el comportamiento natural que el usuario
espera, en especial para checkboxes y radio buttons. Los ejemplos de la Tabla 7.5 incluyen rtulos para ilustrar esta
prctica.
Nombre
Checkbox
Ejemplo
Recordarme
<label><input type="checkbox" name="recordarme" value="si" checked="checked"/>Recordarme</label>
Sexo:
Radio
buttons
Hombre
Mujer
<p>Sexo:
<label><input type="radio" name="sexo" value="1" checked="checked"/>Hombre</label>
<label><input type="radio" name="sexo" value="2"/>Mujer</label>
</p>
Nivel acadmico aprobado:
Combo
box
<label>Nivel acadmico aprobado:

<select name="nivel_academico">
<option value="0">Ninguno</option>
<option value="1">Kindergarten</option>
<option value="2">Primaria</option>
<option value="3">Secundaria acadmica</option>
<option value="4">Secundaria tcnica</option>
<option value="5">Universitaria</option>
</select>
</label>
Marque los lenguajes que conoce:
PHP
Multiple
list
<label>Marque los lenguajes que conoce:<br/>

<select name="aficiones" size="6" multiple="multiple">
<option value="1">Ensamblador</option>
<option value="2">C</option>
<option value="3">C++</option>
<option value="4">Objective-C</option>
<option value="5">Java</option>
<option value="6">C#</option>
<option value="7">PHP</option>
<option value="8">JavaScript</option>
<option value="9">Ruby</option>
<option value="10">SQL</option>
<option value="11">Lisp</option>
<option value="12">Prolog</option>
</select>
</label>
Button
<input type="button" value="Validar"/>
Submit
button
<input type="submit" value="Buscar"/>
Reset
button
<input type="reset" value="Limpiar"/>

Buscar:
Text field
<label>Buscar:
<input type="text" name="buscar" maxlength="255" size="50" value="Escriba su consulta aqu"/>
</label>
22/09/2015 11:52 a. m.
96 de 99
Nombre
Ejemplo
Contrasea:
Password
<label>Contrasea: <input type="password" name="contrasena" maxlength="12" size="12"/></label>

Describa el problema:
Text area
<label>
Describa el problema: <br/>
<textarea name="problema" cols="60" rows="6">Escriba los pasos para reproducir el problema</textarea>
</label>
File
select
Ningn archivo seleccionado.

<input type="file" name="avatar"/>
Hidden
field
<input type="hidden" name="userid" value="chema"/>

Tabla 7.5. Tipos de controles disponibles en un formulario web
A excepcin de las listas (select) y las reas de texto (textarea), la mayora de controles en (X)HTML se escriben con el
elemento input. Su nico atributo obligatorio es type, que indica el tipo de control que se quiere: checkbox, radiobutton, .
Todos los controles comparten el atributo name, cuyo valor es un identificador que no necesariamente debe ser nico en el
documento. Cuando un formulario es aceptado (al presionar el botn "submit"), el navegador ensambla las parejas
campo=valor en el query string a partir de los nombres de los controles y sus respectivos valores. Si un control no tiene
nombre, el navegador simplemente lo ignora. Los dems atributos son dependientes del tipo de control, como se explica en
los siguientes prrafos.
Las casillas de verificacin (checkboxes) permiten al usuario indicar un valor booleano al marcar o no un rectngulo. Se
escriben con la notacin <input type="checkbox" name="checkbox_name" value="yes" checked="checked"/> . Su estado inicial
es desmarcado, a menos de que se provea el atributo checked="checked". Cuando se acepta el formulario, si la casilla de
verificacin est desmarcada, el navegador simplemente no la incluye en el query string. Si la casilla de verificacin est
marcada, se incluye una pareja checkbox_name=on en el query string. El valor "on" lo asume el navegador, pero se puede
reemplazar por un valor ms significativo indicndolo en el atributo value="valor".
Los botones de radio (radio buttons) permiten al informante escoger una nica opcin entre varias disponibles. El autor
debe proveer un elemento <input type="radio" name="nombre_grupo" value="valor" checked="checked"/> por cada opcin.
Si varios botones de radio comparten el mismo nombre, conforman un grupo de botones de radio y slo uno de ellos puede
estar marcado a la vez. Inicialmente todos los botones de radio estn desmarcados a menos de que uno tenga el atributo
checked="checked". Cuando se acepta el formulario (se presiona el botn Submit), si ningn botn de radio en el grupo est
seleccionado, el navegador omite el grupo por completo en el query string; si el botn seleccionado no tiene un valor en el
atributo value, el navegador enva el valor "on" para el grupo, lo cual carece de utilidad para el desarrollador; por eso es
importante proveer un valor adecuado en el atributo value de cada botn de radio, y en tal caso, al aceptar el formulario el
navegador agrega una pareja nombre_grupo=valor, donde valor es el valor del atributo value del botn seleccionado por el
usuario.
Los botones (button) se especifican con <input type="button" value="label del botn"/>. No tienen una accin asociada a
menos de que se les establezca una con JavaScript. Su rtulo se puede cambiar con el atributo value. El botn de enviar
(submit button) se escribe <input type="submit" value="label del botn"/> ejecuta la accin especificada en el atributo
action del formulario (elemento form). Existe una variacin del botn enviar que permite reemplazarlo por una imagen, por
ejemplo: <input type="image" src="enviar.svg" alt="Enviar datos"/>. El botn de limpiar (reset button) se escribe
<input type="reset" value="label del botn"/> y cuando se presiona indica al navegador que regrese todos los controles
del formulario a sus valores originales.
Los campos de texto (text field) son quiz el tipo de control ms usado en el web. Permiten introducir una lnea de texto,
cuya longitud est limitada por el valor del atributo maxlength. El atributo size indica la cantidad de caracteres que tendr
el ancho visible del control, sin embargo, es mejor ajustar el ancho mediante hojas de estilo (CSS). Si se escribe un texto
en el atributo value, se tomar como el valor inicial del campo. En caso de que se quiera delimitar el campo para que
permita nicamente nmeros o valores en cierto formato, se debe emplear JavaScript.
Una variacin del campo de texto son los campos de contrasea (password field) que despliegan asteriscos u otro carcter
especial para encubrir los reales, con el fin de introducir informacin sensible que podra ser vista por una persona ajena al
informante. Tiene otras caractersticas como deshabilitar funciones del portapapeles y disparar el sistema de recuerdo de
contraseas del navegador.
El selector de archivo (file select) permite al visitante adjuntar un archivo cualquiera de su computadora local al
22/09/2015 11:52 a. m.
97 de 99
formulario. Se escribe con el elemento <input type="file" name="nombre_selector"/>. Una vez enviado al servidor, el
nombre del archivo y su contenido se pueden obtener en PHP a travs del arreglo superglobal $_FILES.
El elemento <select name="nombre_lista" size="elementos_visibles" multiple="multiple" value="default_value">...
</select> sirve para construir listas desplegables, listas simples y listas mltiples. Una lista desplegable (combo box)
presenta slo el elemento seleccionado y en caso de que se active el control, una lista emergente muestre todas las
opciones. Las listas desplegables se forman con el atributo size = 1, y aunque permiten seleccin mltiple, no es un
comportamiento natural. Si el valor del atributo size es 2 o ms, el navegador presentar un control de lista simple; y si
el atributo multiple="multiple" est presente, el navegador presentar una lista mltiple donde el usuario podr
seleccionar varios elementos con el ratn mientras mantiene la tecla Ctrl o Command presionada.
Los elementos de la lista se escriben con elementos <option value="valor">Texto</option>. Por defecto el primero ellos
estar seleccionado en caso de que la lista sea desplegable (combo box). Si se quiere preseleccionar otro valor, debe
especificarse con el atributo value del elemento select. Se pueden crear grupos de opciones con el elemento optgroup,
como se ilustra en el Listado 7.24.
Cantn de nacimiento:
Alajuelita
<label>Cantn de nacimiento:<br/>
<select name="canton" size="10">
<optgroup label="San Jos">
<option value="101">San Jos</option>
<option value="102">Escaz</option>
...
<option value="120">Len Corts</option>
</optgroup>
<optgroup label="Alajuela">
<option value="201">Alajuela</option>
<option value="202">San Ramn</option>
...
<option value="215">Guatuso</option>
</optgroup>
...
</select>
</label>
Listado 7.24. Grupos de opciones en un control de lista.
Los campos ocultos (hidden field) son tiles para almacenar valores provenientes del servidor web que no es necesario
mostrar al usuario; pero que pueden ser ledos por cdigo JavaScript, y tambin por cdigo PHP cuando el formulario vuelva
a ser enviado. Se suelen transferir identificadores de usuario o sesin mediante estos campos; los cuales no se deben
asumir seguros, ya que sus valores se pueden descubrir simplemente mirando el cdigo fuente de la pgina web en el
navegador.
El autor puede ajustar la apariencia de todos los controles del formulario mediante hojas de estilos CSS. Es una prctica
comn emplear una tabla dentro del formulario para dar una apariencia ordenada. En tal caso habr que separar los rtulos
de los controles. Por dicha el elemento label tiene el atributo for="id_del_control", que permite conectar el rtulo con el
control mediante el id del control, indiferentemente de dnde se se encuentre dentro del documento web.
22/09/2015 11:52 a. m.
98 de 99
7.4.5 Validacin de datos con JavaScript

Cuando se implementa un formulario web es apremiante hacer una doble validacin de datos, tanto en el servidor web como
en el navegador. La validacin de datos en el lado del cliente es instantnea. Permite al informante tener asistencia y
retroalimentacin antes de enviar los datos, sin tener que esperar y consumir recursos para que el servidor web se
pronuncie. El autor podra estar tentado a pensar que validando los datos en el navegador, stos estarn limpios y listos
para ser procesados o almacenados en la base datos, por lo que es innecesaria una segunda validacin con PHP. Sin
embargo, la validacin en el lado del servidor es ineludible. El visitante podra deshabilitar JavaScript en su navegador, o
modificar su cdigo fuente, tanto (X)HTML como JavaScript y poner a prueba su servidor de ingeniosas formas, en especial
si la informacin que est en juego es sensible o de alto inters (como dinero).
En general la validacin con JavaScript consiste en obtener el valor de cada control del formulario y revisar que sea
adecuado. Existen varias formas de acceder al valor de un control. Quia la ms sencilla sea utilizando el valor del atributo
name. Cuando el navegador carga el documento, crea un objeto tipo arreglo document.forms[] con cada formulario que en l
encuentre. Adems si se provee un nombre al formulario de la forma <form name="form_name"...> crear un objeto
document.form_name, y los controles de dicho formulario se pueden acceder de la forma document.form_name.field_name, en
especial es de inters su valor con la propiedad document.form_name.field_name.value.
La validacin se puede realizar en distintos momentos: cuando el usuario cambia el valor de un control (onchange) o cuando
intenta enviar el formulario. En el ejemplo del Listado 7.25 se hace de la segunda forma, interceptando el evento onsubmit
del formulario (lnea 2). Ntese que se emplea la palabra reservada return al invocar la funcin validadora. Si esta funcin
retorna true, el navegador contina el envo de datos al servidor; pero si retorna false, el manejo del evento se
interrumpe, evitando que el formulario sea enviado al servidor.
1. <body>
2.
<form name="login" method="post" action="login3.php" onsubmit="return validate()">
3.
<table>
4.
<tr>
5.
<th><label for="username">Usuario:</label></th>
6.
<td><input type="text" name="username" id="username"/></td>
7.
</tr>
8.
<tr>
9.
<th><label for="password">Contrasea:</label></th>
10.
<td><input type="password" name="password" id="password"/></td>
11.
</tr>
12.
<tr>
13.
<td colspan="2"><input type="submit" value="Enviar"/>
14.
<input type="reset" value="Limpiar"/></td>
15.
</tr>
16.
</table>
17.
</form>
18.
19.
<!-20.
function validate()
21.
{
22.
var result = '';
23.
result += validateUsername(document.login.username.value);
24.
result += validatePassword(document.login.password.value);
25.
26.
if ( result == '' ) return true;
27.
28.
alert(result);
29.
return false;
30.
}
31.
32.
function validateUsername(value)
33.
{
34.
// Quitar espacios en blanco (trim)
35.
value = value.replace(/^\s+|\s+$/g, '');
36.
37.
// El nombre es obligatorio
38.
if ( value == '' ) return 'Especifique el nombre de usuario\\n';
39.
40.
// Impedir caracteres especiales
41.
if ( /[ !"\#\$%&'\*\+\,\-\.\/\:;<=>\?@\[\]\^\`\{\|\}\~\\\\]/.test(value) )
22/09/2015 11:52 a. m.
99 de 99
42.
return 'No utilice caracteres especiales en el nombre\\n';
43.
44.
return '';
45.
}
46.
47.
function validatePassword(value)
48.
{
49.
// Quitar espacios en blanco (trim)
50.
value = value.replace(/^\s+|\s+$/g, '');
51.
52.
// La contrasea es obligatoria
53.
if ( value.length < 8 ) return 'La contrasea debe ser al menos de 8 caracteres\\n';
54.
55.
// Debe tener mayusculas, minusculas y numeros
56.
if ( ! /[a-z]/.test(value) || ! /[A-Z]/.test(value) || ! /[0-9]/.test(value) )
57.
return 'La contrasea debe tener maysculas, minsculas y nmeros';
58.
59.
return '';
60.
}
61.
-->
62.
</script>
63. </body>
Listado 7.25. Validacin de dos campos de un formulario utilizando JavaScript. Co rrer este ejemplo.
La validacin se realiza probando condiciones contra los datos provistos por el usuario. El cdigo del Listado 7.25 emplea
expresiones regulares para hacer ms sencilla la programacin. Una expresin regular en JavaScript se escribe entre dos
caracteres slash (/ /) que no estn seguidos (de lo contrario formaran un comentario). Internamente JavaScript crea un
objeto RegExp que provee el mtodo test(str), el cual recibe una cadena de caracteres, y si logra encontrar la expresin
regular dentro de ella, retorna true. Por su parte, el mtodo str.replace(/exp/g, text) busca todos los textos de str que
cumplen la expresin regulgar exp y los reemplaza por text. El estudio de la nomenclatura de las expresiones regulares se
deja como ejercicio para el lector.
8 Bibliografa
1. [Gars02] GARSHOL, Lars Marius. Definitive XML application development Prentice Hall PTR, United States of America,
2002
2. [Gold99] GOLDFARB, CHARLES Y PRESCOD, PAUL. Manual de XML. Prentice Hall, Madrid, Espaa, 1999.
3. [Holm02] HOLMAN, Ken. Definitive XSLT and XPath Prentice may PTR, United States of America, 2002.
4. [Marc00] MARCHAL, Benot. XML by Example. QUE, United States of America, 2000.
5. [Walm02] WALMSLEY, Priscilla. Definitive XML Schema. Prentice Hall PTR, New Jersey, 2002.
22/09/2015 11:52 a. m.

Desarrollo de Aplicaciones Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Desarrollo de Aplicaciones Web

Uploaded by

Copyright:

Available Formats

Desarrollo de aplicaciones web

file:///C:/Users/Ivn/Desktop/Desarrollo de aplicaciones web/Desarrollo...

1 Introduccin a la tecnologa web

La primera guerra de navegadores

1.2 Arquitectura web

1.3 Proceso de construccin del sitio web

Diseo del sitio web

2 El lenguaje de marcado extensible XML

2.3 La definicin del tipo de documento (DTD)

Declaraciones de tipo de elemento

2.4 Espacios de nombres (namespaces)

2.6 El lenguaje extensible de hojas de estilo (XSL)