Intro Programación Web - Historia Internet y WWW

Programación Web

Unidad I
“Introducción a lasTecnologías Web”

Programación
Web

INTRODUCCION

•

Internet es un conjunto de redes interconectadas entre sí, donde se establecen
relaciones entre servidores (que ofertan información y servicios) y clientes. Entre estos
servicios podemos mencionar la transferencia de archivos (FTP) por medio de la cual
un cliente puede transmitir y recibir una gran cantidad de información de un servidor.

•

Uno de los servicios más utilizados es la World Wide Web o WWW (en español la Red
o telaraña mundial de información) donde los usuarios pueden acceder a información
existente en un servidor. Para usar este servicio, los clientes necesitan un software
especializado llamado navegador.

•

A diferencia de muchas otras redes privadas de datos, la Intemet no es administrada
por una única organización, con un solo punto de acceso y un solo reglamento. Es una
"red de redes" pública, construida de la conjunción de miles de organizaciones que.
cooperan entre sí, para interconectar su redes de área local con un protocolo de red
común.

•

Originalmente utilizada por la milicia norteamericana y académicos, la explosión en el
crecimiento de los servicios disponibles por Intemet, la ha llevado a figurar como parte
del estilo de vida en sociedad. Internet sigue creciendo rápidamente día a día,
particularmente por la adición de organizaciones y corporaciones con intereses
mercantiles. En la actualidad, el número de servidores de cómputo conectados a la
red, son millones. Muchas veces, estas máquinas dan servicio a un número de
usuarios. Una estimación conservadora del número de usuarios con acceso a la
Internet, a nivel mundial, supera los 300 millones. Por conclusión, la Internet es la red
de telecomunicaciones más grande del mundo, después del servicio telefónico.

Programación
Web

1. 1 Perspectiva histórica del internet

•

_

Programación
Web



•

Vannevar Bush

En 1945 Vannevar Bush escribe un artículo en la revista “Atlantic
Monthly” acerca de un mecanismo foto-eléctrico denominado
Memex, el cual podía serguir enlaces entre documentos en un
microficha.

”A Little History of the World Wide Web”, http://www.w3.org/History.html, Vannevar Bush – Wikipedia,
http://es.wikipedia.org/wiki/Vannevar_Bush

Programación
Web

Douglas Engelbart

En la década de los 60ś Douglas Engelbart fue la fuerza motriz detrás
del diseño del primer sistema en línea, On-Line System (también
conocido como NLS), en el Stanford Research Institute.

Junto con su equipo en el Augmentation Research Center desarrolló
varios elementos básicos de la interfaz humana de las computadoras
actuales, como pantallas con imágenes en bits, ventanas múltiples, y
software multiusuario. También fue el co-inventor del mouse, del que
nunca recibió regalías.
•

”A Little History of the World Wide Web”, http://www.w3.org/History.html, Douglas Engelbart – Wikipedia,
http://es.wikipedia.org/wiki/Douglas_Engelbart

Programación
Web

Ted Nelson

Ted Nelson fundó el proyecto Xanadu en 1960 y consistía básicamente
en concebir un documento global y único que cubra todo lo escrito en el
mundo, mediante una gran cantidad de ordenadores interconectados,
que contenga todo el conocimiento existente o, mejor dicho,
información en forma de hipertexto. Se pretendía crear un mar de
documentos relacionados mediante enlaces hipertextuales, todos
disponibles.

Ted Nelson acuña la frase “Hipertexto” en el artículo “A File Structure
for the Complex, the Changing, and the Indeterminate”, presentado
durante la 20ª Conferencia Nacional de ACM realizada en 1965 en Nueva
York.
•

”A Little History of the World Wide Web”, http://www.w3.org/History.html, Ted Nelson – Wikipedia,
http://es.wikipedia.org/wiki/Ted_Nelson, Ted Nelson Home Page, http://ted.hyperland.com/

Programación
Web

Tim Berners-Lee

Mientras trabajaba en el CERN, durante junio a diciembre de 1980, Tim
Berners-Lee escribe el programa “ENQUIRE” (Enquire-Within-UponEverything) el cual permite enlaces entre nodos arbitrarios.
Cada nodo tiene un título, un tipo y una lista de enlaces bidireccionales.

•

”A Little History of the World Wide Web” http://www.w3.org/History.html.

Programación
Web

CERN

El CERN (Organisation Européenne pour la Recherche Nucléaire,
Organización Europea para la Investigación Nuclear) es el laboratorio de
investigación sobre partículas físicas más grande del mundo.
Se encuentra en la frontera entre Suiza y Francia. El CERN agrupa 20
países europeos y cuenta con 2600 empleados y 7931 científicos e
ingenieros de 500 universidades y 80 países.

•

“CERN” http://public.web.cern.ch/Public/Welcome.html , “CERN – Wikipedia”
http://en.wikipedia.org/wiki/CERN .

Programación
Web

World Wide Web

En marzo de 1989, estando en el CERN , Tim Berrners publica el
artículo”Information Management: A Proposal”, el cual muestra la
propuesta original de la WWW.

En octubre de 1990, Tim Berners inicia su trabajo sobre un programa
que maneja y edita hipertexto usando una computadora NeXTStep y
nombrando a este programa "WorldWideWeb".

•

”A Little History of the World Wide Web”, http://www.w3.org/History.html, “The original proposal of the
WWW” http://www.w3.org/History/1989/proposal.html , CERN where the web was born
http://public.web.cern.ch/Public/en/About/Web-en.html.

Programación
Web

Robert Cailliau

Posteriormente Robert Cailliau se une al proyecto y es co-autor de una
nueva versión del proyecto “World Wide Web”.

Robert Cailliau se convierte en el primer internauta (web surfer).

•

”A Little History of the World Wide Web” http://www.w3.org/History.html, “Welcome to info.cern.ch”
http://info.cern.ch/ .

Programación
Web

•

Primer Navegador

“Tim Berners-Lee: WorldWideWeb, the first web client”
http://www.w3.org/People/Berners-Lee/WorldWideWeb.html .

11

Programación
Web

•

Primer Navegador

“Tim Berners-Lee: WorldWideWeb, the first web client”
http://www.w3.org/People/Berners-Lee/WorldWideWeb.html .

Programación
Web

Computadora NeXT

La computadora original donde trabajó Tim Berners era una
computadora NeXT, la cual se convirtió en el primer servidor web, el
primer navegador web y el primer editor web.

Actualmente se encuentra en la exhibición “Microcosm” del CERN.

•

“Welcome to info.cern.ch” http://info.cern.ch/ .

Programación
Web

Primer sitio de la Web

El sitio “Info.cern.ch” fué la dirección del primer sitio web y del primer
servidor web, corriendo en una computadora NeXT en el CERN.
La primera página web fué:
”http://info.cern.ch/hypertext/WWW/TheProject.html“ la cual informaba
acerca del proyecto WWW e incluía detalles para que los visitantes
pudieran crear su propia página web y una explicación de cómo
encontrar información en la web. La pantalla original de este sitio se
modificó y no se creó una copia del original. Actualmente el sitio y la
página original se encuentran funcionando en el CERN.

•

“Welcome to info.cern.ch” http://info.cern.ch/ .

Programación
Web

Primera página de la Web

Programación
Web

Primer Servidor en USA

Durante 1991 se instalaron varios servidores por toda Europa y en
diciembre de 1991 se instaló el primer servidor web fuera de Europa, en
el SLAC (Stanford Linear Accelerator Center).
En noviembre de 1992 había 26 servidores en todo el mundo y en
octubre de 1993 había 200

•

“Welcome to info.cern.ch” http://info.cern.ch/ , “The Early World Wide Web at SLAC”
http://www.slac.stanford.edu/history/earlyweb/firstpages.shtml .

Programación
Web

Mosaic

En febrero de 1993 en el NCSA (National Center for Supercomputing
Applications) de la Universidad de Illinois en Urbana-Champaign, liberó
la primera versión del navegador Mosaic para plataformas X Windows.
En septiembre de 1993, NCSA liberó las versiones para PCs y Apple
Macintosh, lo cual permitió que la gente pudiera tener acceso a la web
usando computadoras personales.

•

“Welcome to info.cern.ch” http://info.cern.ch/ , “NCSA Image Archive” http://www.ncsa.uiuc.edu/News/Images/
.

Programación
Web

Creadores de Mosaic

En septiembre de 1993, NCSA liberó
las versiones para PCs y Apple
Macintosh, lo cual permitió que la
gente pudiera tener acceso a la web
usando computadoras personales.
Marc Andreessen y Eric J. Bina
fueron los creadores de Mosaic.

•

“Welcome to info.cern.ch” http://info.cern.ch/ , “Marc Andreseen” http://en.wikipedia.org/wiki/Marc_Andreessen
.

Programación
Web

•

Mosaic

“NCSA Image Archive” http://www.ncsa.uiuc.edu/News/Images/ .

Programación
Web

W3C

El 30 de abril de 1993 el director del CERN declara que caulquier
persona puede usar la tecnología de la WWW sin necesidad de pagar
regalías al CERN.
Del 25 al 27 de mayo de 1994 se lleva a cabo la “First International WWW
Conference” en Ginebra Suiza.
En octubre de 1994 se funda el consorcio de la WWW (World Wide Web
Consortium) comúnmente conocido como W3C.

•

”A Little History of the World Wide Web” http://www.w3.org/History.html,

Programación
Web

Netscape

En marzo de 1994, Marc Andreessen y algunos compañeros que
trabajaban en el desarrollo de Mosaic en el NCSA, abandonan su trabajo
para en abril de 1994 fundar Netscape junto con Jim Clark.
El 13 de octubre de 1994 sale al mercado el navegador de Netscape,
denominado inicialmente “Mosaic Netscape 0.9” y posteriormente
renombrado “Netscape Navigator”. En 3 años la compañía Netscape
creció de 3 empleados a 2600 y tener un valor de 765 millones de
dólares.

•

“Marc Andreessen” http://www.ibiblio.org/pioneers/andreesen.html, “Netscape”
http://en.wikipedia.org/wiki/Netscape, “Principal Figures”
http://www.ibiblio.org/team/history/pioneers/pioneers.html

Programación
Web

•

Netscape Navigator

“Netscape 0.9” http://es.wikipedia.org/wiki/Imagen:Netscape_0.9_p%C3%A1gina_de_inicio.png .

Programación
Web

El navegador Navigator llegó a ser
utilizado por el 80% de los
usuarios de internet hasta que
surgió el “Explorer” de Microsoft.
Posteriormente la compañía fué
comprada por AOL y el 1º de
marzo del 2008 se terminó el
soporte oficial del navegador.

•

“Netscape Navigator” http://es.wikipedia.org/wiki/Imagen:Netscape_Navigator_2.JPG, “A brief history”
http://browser.netscape.com/history .

Programación
Web

Internet Explorer

La primera versión (IE1.0) era un producto que se licenció de la
compañía Spyglass (la parte comercial de NCSA Mosaic).
Posteriormente Microsoft desarrolló su propia versión, la cual para
competir con Netscape la distribuyó de forma gratuita.
Para noviembre de 1997, se incluyó la versión 4.0 en el Windows 98, el
cual tenía mejores características que su rival de Netscape.

•

“Browser history” http://www.blooberry.com/indexdot/history/ie.htm .

Programación
Web

1957-1968

ARPA

TX2-PS

1993
MOSAIC
Gopher

Navegador

Evolución de la infraestructura
1969-1980
CRECE
DARPANET

E-mail
Ray Tomilson

EARN-SITNET-NFS
EXPANSION
GLOBAL
Universidades
Agencias de gobierno

1983/84-1986
NACE NFSNET
LAN / WAN

Paso de NCP a TCP/IP
Introducción de DNS

1993/94
EXPANSION
COMERCIAL
Cambios Leyes Americanas
Bill Clinton

1991
HTTP
WWW

Desarrollo de http
Tim Barnes Lee

Programación
Web

1.2 Protocolo http
(protocolo de transferencia de hipertexto).

•

_

Programación
Web

HTTP

Usado en cada transacción de la web, es el lenguaje utilizado por dos
computadoras para comunicarse entre si. Hyper Texto se refiere al contenido de
las paginas escrito en HTML. Los navegadores se comunican con los servidores
de internet mediante este protocolo, no tiene estado, es decir no guarda
información sobre conexiones anteriores.
• URL (Uniform Resource Locator)
- Formato: protocolo://servidor:puerto/directorio/archivo
- Ejemplo: http://java.sun.com/products/servlet/index.html
• Basado en Peticiones y Respuestas
- Métodos de petición: GET, POST, HEAD, etc.
• Meta datos en forma de encabezados

Petición HTTP
GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: nombre-cliente
param1=val1&param2=val2

Respuesta HTTP
HTTP/1.1 200 OK
Date: Fri, 31 Dec 2003 23:59:59 GMT
Content-Type: text/html
Content-Length: 1221
<html>
…

Programación
Web

Direcciones IP

Identificación de un host
Host

Red
11000011

00100011

00001100

00000111

195.034.012.007

Http://www.itver.edu.mx
Prefijo red

Número de Host

Prefijo red

Subred-num

Host

Programación
Web

1.2.1 Arquitectura del WWW

•

_

Elementos de Red

Programación
Web

LAN
TCP/IP

RUTEADOR

INTERNET

RUTEADOR
Computadora
remota

Host / Computadora local

Programación
Web

Estándares de la WWW

Los estándares de WWW incluyen todos los mecanismos necesarios para
construir un ambiente de uso general:
•Modelo de nombramiento estándar - Todos los recursos en el WWW se nombran
con un Recurso Uniforme de Internet-estándar (URL).
•Formatos de contenido estándar - Todos los navegadores de la web interpretan
un grupo de formatos de contenido estándar. Éstos incluyen el lenguaje Hypertext
Markup Languaje (HTML), el lenguaje escrito en Java Script, y una gran cantidad
de otros formatos.
•Protocolos estándares - los protocolos estándares de la conexión de redes
permite a cualquier navegador se comunique con cualquier servidor de origen. El
protocolo más comúnmente usado en el WWW es el Hypertext Transport Protocol
(HTTP).
Esta infraestructura permite que los usuarios alcancen fácilmente una gran
cantidad de aplicaciones tripartitas y servicios de contenido. También permite que
los desarrolladores de aplicaciones creen fácilmente usos y los servicios de
contenido para una comunidad grande de clientes.

Programación
Web

1.2.3 URL's.

•

_

Programación
Web

Formato: protocolo://servidor:puerto/directorio/archivo

Localizador uniforme de recursos: Permite localizar o acceder de forma sencilla
cualquier recurso de la red desde el navegador de la WWW.
Con la WWW se pretende unificar el acceso a información de servicios que antes
eran incompatibles entre sí, tratando de conseguir que todos los servicios de internet
sean accesibles a través de la WWW, de esta forma desde un mismo programa se
puede tener acceso a todos los recursos de una forma uniforme y permite que los
documentos HTML incluyan enlaces a otras fuentes de información en servicios
como FTP, gopher, WAIS, etc …

Programación
Web

Servicios de los servidores Web

WWW
WWW

Email
Email
Telnet
Telnet
Conexión remota

Lista de
Lista de
correos
correos

Internet
Internet
FTP
FTP

servicios de mensajeria
entre grupos de personas

IRC
IRC
Chat (internet relay chat)

Transmisión de archivos

Gopher,
Gopher,
Archie,
Archie,
Verónica,
Verónica,
Entornos de menús y búsqueda
Para navegar por servidores de FTP

News
News
groups
groups
Foros de discusión

Programación
Web

1.2.3 Métodos http
Persistencia en http - Cookies.

•

_

Programación
Web

SESIONES Y COOKIES

•

HTTP no soporta información persistente (información sobre conexiones
anteriores).

•

Cookies: Es básicamente un archivo de texto en donde se guarda información que
los servidores Web pueden grabar en su disco duro. Las Cookies graban
información acerca de su visita a un sitio en particular, y sólo el sitio que los creó
los puede leer más tarde.

•

Se usan cookies para hacer que la navegación en Internet sea más personal y
fácil, pero el uso de las cookies pueda llevar a una pérdida de privacidad.

Ejemplo:
• Sesión: javax.servlet.http.HttpSession
•
•

•

Cookies: javax.servlet.http.Cookies
Métodos:
– HttpSession HttpServletRequest.getSession(boolean)
– HttpSession.putValue(String, Object)
– Object HttpSession.getValue(String)
– String[] HttpSession.getValueNames()
– HttpSession.removeValues(String)
_–

HttpResponse.addCookie(Cookie)

Programación
Web

COOKIES

VENTAJAS

DESVENTAJAS

•Hacer la navegación mas personal
•Facilitar la interacción del usuario con
el sitio Web

•Compleja su programación

•Guarda información acerca de la
visita a un Sitio

•

•Hay que configurar su uso

•Puede amenazar la privacidad

_

Programación
Web

1.2.4 Common Interface Gateway

•

_

Programación
Web

Common Gateway Interface

La tecnología CGI está compuesta por un protocolo de comunicación que fija una interfaz que permite el
intercambio de información entre el servidor de web y programas que se ejecutan en el sistema. Nos
permite comunicar el servidor web con programas que realicen tareas diversas.
•Estos programas se ejecutan como tareas independientes del servidor web.
•Con el nombre de "cgi-bin" nos referimos a los programas que el cliente web ejecuta a través del
servidor de web .
•El servidor de web y el programa "cgi-bin" tienen como mecanismo de comunicación la entrada y salida
estándar y las variables de entorno

•

_

Programación
Web

Common Gateway Interface

• Es una interfaz entre un servidor con (HTTP) y los recursos de la computadora host
del servidor.
• Conjunto de variables y convenciones nombradas para pasar información entre el
servidor y el cliente.
• Los programas que utilizan CGI pueden escribirse en cualquier lenguaje.

•

_

Programación
Web

1.3 Introducción al HTML
Lenguaje de despliegue del web

•

_

Programación
Web

•
•
•
•

PAGINAS HTML ESTÁTICAS

HyperText Markup Language
Lenguaje de marcado: Corchetes angulares < >
Extensiones *.html y *.htm
Etiquetas: <html>, <head>, <title>, <body>, etc.
<HTML>
<HEAD>
<TITLE>Hola, Usuario</TITLE>
</HEAD>
<BODY>
Hola, Usuario
</BODY>
</HTML>

•

_

Programación
Web

1.3.1 HTML como un tipo SGML

•

_

Programación
Web

•

_

HTML como un SGML

 SGML (Standard Generalized Markup Language) o Lenguaje de Etiquetado
Generalizado Estándar es una norma ISO que permite que la estructura de un
documento pueda ser definida en base a la relación lógica de sus partes. Esta
estructura puede ser validada por una Definición de Tipo de Documento (DTD Document Type Definition). La norma SGML define la sintaxis del documento y
la sintaxis y semántica de DTD.
 HTML está basado en la definición de SGML. HTML nació en 1990, y su
entorno se basa en comandos concretos que han sido sometidos a constantes
cambios y a un crecimiento vertiginoso. La tarea de determinar la sintaxis de
estos comandos recae en primer lugar en el Consorcio World Wide Web
(W3C). Su objetivo es la creación de documentos que puedan difundirse sin
problemas por la red y que puedan ser interpretados por los diferentes
navegadores o "browsers". Se trata de un lenguaje muy sencillo que permite
estructurar textos y establecer enlaces con otros documentos y que se ha
convertido en la Norma ISO 15445:2000. Para todo lo relacionado con el
lenguaje HTML hay que consultar el sitio web del W3 Consortium
(http://www.w3.org/TR/REC-html40/) donde se publican las Recomendaciones y
especificaciones sobre este lenguaje, así como las distintas versiones
normalizadas.
 XML es un estándar desarrollado por el Consorcio World Wide Web (W3C).
Se trata de una versión reducida y especializada en la Web de la norma SGML.
Su caracterización como "extensible" se deriva de la no limitación en el número
de marcas o etiquetas, pues permite crear todas aquéllas que sean necesarias.
Otra de sus características principales es que permite enlaces
multidireccionales (esto es, que apuntan a varios documentos).

Programación
Web

1.3.2 Elementos del lenguaje HTML.
Tutorial

•

_

Programación
Web

1.3.3Tablas en HTML
Tutorial

•

_

Programación
Web

1.3.4 Formularios
Tutorial

•

_

Programación
Web

1.3.5 Hojas de estilo en cascada.
CSS

•

_

Programación
Web

Que es C ascading S tyle S heets?

HTML fue diseñado para definir el contenido de un documento (texto) y no fue diseñado
para contener las etiquetas que dan formato a un documento.
La W3C definió los estilos y se han añadido a HTML 4.0 para resolver este problema y
ahorrar trabajo, como incluir el tipo de letra <font> y su atributo de color en:
<h1> Este es un encabezado </ h1>
<p> Este es un párrafo. </ p>
Los estilos definen cómo mostrar los elementos de HTML, ya que permiten cambiar la
apariencia y el diseño de todas las paginas de un sitio Web, con editar un solo archivo.
Hojas de estilo externas se almacenan en archivos CSS.
Todos los navegadores soportan las hojas de estilo en la actualidad.

•

_

Programación
Web

CSS Sintaxis

Una regla CSS consta de dos partes principales: un selector, y las declaraciones de uno
o más propiedades:

CSS Comentarios
Los comentarios se utilizan para explicar el código, y puede ayudar a la hora de editar el
código fuente en una fecha posterior. Los comentarios son ignorados por los
navegadores.
/*Este es un comentario*/
p
{
text-align:center;
/*Este es otro comentario*/
color:black;
font-family:arial;
}

Programación
Web

Identificación y selectores de clase

El selector de ID se utiliza para especificar un estilo para un único elemento.
El selector de ID utiliza el atributo id del elemento HTML, y se define con un "#".
Con la siguiente notación (en un bloque de estilo o en la hoja externa):
<style type="text/css">
#Nombre_del_ID
{
propiedad1:valor;
... ;
propiedadN:valor;
}
</style>
Ejemplo:
#para1
{
text-align:center;
color:red;
}
Llamado:
<body>
<p id="para1">Hola Mundo!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

Programación
Web

El selector de clase

El selector de clase se utiliza para especificar un estilo para un grupo de elementos.
A diferencia del selector de id, el selector de clase es utilizado en varios elementos. Esto
permite definir un estilo particular para muchos elementos de HTML con la misma clase.

.

El selector de clase utiliza el atributo class HTML, y se define con un “ “
Ejemplo:
<head>
.center
{
text-align:center;
}
</style>
</head>
Llamado:
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>

Programación
Web

El selector de clase

También se puede definir que elementos HTML específicos, sólo deben verse afectados
por una clase.
En el siguiente ejemplo, todos los elementos p class = "centro" se alinearan al centro:
Ejemplo:
<html>
<head>
p.centro
{
text-align:center;
}
</style>
</head>
Llamado:
<body>
<h1 class="centro">Esta cabecera no se vera afectada</h1>
<p class="centro">Este parrafo si sera centrado.</p>
</body>
</html>

Programación
Web

Especificación de estilos

Hay tres formas de insertar una hoja de estilo:
1) Hoja de estilos externa: Cuando el estilo se aplica a muchas páginas. Con una hoja
de estilos externa, puede cambiar el aspecto de un sitio Web completo, cambiando un
archivo. Cada página debe enlazar con la hoja de estilo con la etiqueta <link>. La etiqueta
<link> va dentro de la sección de la cabecera.
Código:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
2) Hoja de estilo interna: Una hoja de estilo interna debe ser usado cuando un solo
documento tiene un estilo único. Se definen los estilos internos en la sección de cabecera
de una página HTML, mediante el uso de la etiqueta <style>, de la siguiente manera:
Código:
head>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Programación
Web

Especificación de estilos

3) Estilo de Línea: En un estilo de línea se pierden muchas de las ventajas de las hojas
de estilo, debido a que el contenido se mezcla con la presentación. Se debe utilizar este
método con moderación.
Para definir los estilos de línea, se utiliza el atributo de estilo en la etiqueta
correspondiente. El atributo de estilo puede contener cualquier propiedad CSS.
El siguiente ejemplo muestra cómo cambiar el color y el margen izquierdo para un
párrafo:
<p style="color:sienna; margin-left:20px">Este es un parrafo.</p>

Programación
Web

Herencia y prioridad de estilos

¿Qué estilo se utiliza cuando hay más de un estilo especificado para un elemento HTML?
En términos generales aplican las siguientes reglas cuando hay mas de un estilo definido
para un elemento de HTML, siendo de menor a mayor prioridad:
1) Navegador por defecto
2) Hoja de estilos externa
3) Hoja de estilo interna (en la sección de la cabecera)
4) Estilo en línea (dentro de un elemento HTML)
Por lo tanto, un estilo en línea (dentro de un elemento HTML) tiene la máxima prioridad,
lo que significa que se anula un estilo definido dentro de la etiqueta head, o en una hoja
de estilo externa, o en un explorador (el valor por defecto).
Nota: Si el enlace a la hoja de estilos externa, se coloca después de la hoja de estilo
interna en <head> de HTML, la hoja de estilos externa anulará la hoja de estilo interna.

Programación
Web

Modelo de Caja

Todos los elementos HTML pueden ser considerados como cuadros. En CSS, el término "modelo de caja"
se usa cuando se habla de diseño y diagramación.
El modelo de caja CSS es esencialmente una caja que envuelve los elementos HTML, y se compone de:
márgenes, bordes, el relleno y el contenido real.

Margin.- Borra un área alrededor del border. El margen no tiene un color de fondo, que es
completamente transparente.
Border. - Un borde que rodea el relleno (padding) y el contenido. La frontera se ve afectada por el color
de fondo de la caja.
Padding.- Borra un área alrededor del contenido. El relleno se ve afectada por el color de fondo de la caja
.
Sus coordenadas son: top bottom left right
Contenido.- width: / height: El contenido de la caja, donde el texto y las imágenes aparecen

Programación
Web

Modelo de Caja

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Cual sería el ancho total del elemento?
250px (ancho)
+ 20 píxeles (relleno izquierdo y derecho)
+ 10px (borde izquierdo y derecho)
+ 20 píxeles (margen izquierdo y derecho)
= 300px
Versiones anteriores de IE8 deben incluir un DOCTYPE
propiedades de relleno, borde y anchura.

transitional para usar las

Programación
Web

1.4 Evolución del desarrollo
de aplicaciones Web.

Programación
Web

Web 1.0

Se denomina Web 1.0 a la web inicial surgida durante 1995 y que
durante un poco mas de 10 años siguió funcionando de la misma
manera (e incluso la seguimos utilizando actualmente) hasta que surgió
la Web 2.0
Aparte de un mejor diseño, podemos decir que vemos en los Sitios Web 1.0:
“Se ve mejor con”:
Esta era una popular frase que nos indicaba si el Sitio Web se veía mejor con Internet Explorer o con Netscape. Algunos hasta nos decían
que resolución necesitábamos tener en nuestro monitor.
Descarga el reproductor Flash:
Creo que ya esto casi no se ve, pues el 98% de las personas ya tienen Flash instalado en sus computadoras.
Las tablas:
Con la llegada del CSS los Sitios Web se han hecho más limpios. Y se ha reducido la utilización de las tablas, pero siempre hay alguno que
otro que las sigue utilizando. OJO: no he dicho que este recurso sea obsoleto, aclaro “ya casi no se utiliza”.
Clic aquí para entrar:
Una vez que los Sitios nos indicaban que navegador utilizar y a que resolución poner nuestros monitores, nos alentaban a dar otro clic para
seguir adelante.
Introducciones hechas en Flash:
Con a la aparición de Flash, todos queríamos ponerle una introducción en nuestra página.
La introducción se esta cargando, por favor espere…:
Una vez habíamos terminado de crear nuestra pieza de arte en Flash, los visitantes tenían que pasarse varios minutos esperando a que la
animación se descargara. Era toda una agonía para los módems de 56k.
Ajustar el tamaño de nuestro navegador:
Creo que esto pasaba mucho en los sitios que nos alentaban a dar un “clic aquí para entrar”. En los cuales se abría otra ventana de nuestro
navegador, pero a un tamaño predeterminado.
Los Contadores:
No se por que, pero antes todos queríamos que las personas se enteraran de cuan visitada era nuestro Sitio.
Por favor, firma el libro de Visitas:
Sin comentarios.

•

“Ajax”Maximiliano Firtman Editorial Alfaomega.

Programación
Web

•

Web 1.0

“Web 1.0 logos” http://www.flickr.com/photos/complexify/97303317/ .

Programación
Web

La nueva Web

La World Wide Web nació a principios de la década de 1990 y en sus
inicios sólo ofreció contenido contextual agrupado en los famosos
hipervínculos o links.
En la actualidad, los sitios web, a parte de tener texto e hipervínculos
contienen animaciones, ventanas desplegables, videos, juegos y
aplicaciones completas.
Es por eso que la web como la conocíamos hasta la actualidad está
cambiando, aparece una nueva web, la Web 2.0

•

“Ajax”Maximiliano Firtman Editorial Alfaomega, “Web 2.0 Wikipedia” http://es.wikipedia.org/wiki/Web_2.0 .

Programación
Web

•

Web 2.0

“logo 2.0” http://flickr.com/photos/stabilo-boss/93136022/ .

Programación
Web

Tim O'Reilly

El término Web 2.0 fue acuñado por Tim O'Reilly en 2004 para referirse a
una segunda generación de Web basada en comunidades de usuarios y
una gama especial de servicios, como las redes sociales, los blogs, y los
wikis que fomentan la colaboración y el intercambio ágil de información
entre los usuarios.

Otros definen la Web 2.0 como un nuevo movimiento social en internet,
algunos como una nueva hola de servicios y, los mas técnicos, como la
posibilidad de evadir las limitaciones del HTML.
•

“Web 2.0 Wikipedia” http://es.wikipedia.org/wiki/Web_2.0 , “tim.oreilly.com” http://tim.oreilly.com/ ,
“Ajax”Maximiliano Firtman Editorial Alfaomega

Programación
Web

•

Diagrama de conceptos

“Web 2.0 Wikipedia” http://es.wikipedia.org/wiki/Web_2.0 .

65

Programación
Web

•

Mapa Mental

“Web 2.0 Wikipedia” http://es.wikipedia.org/wiki/Web_2.0 .

Programación
Web

Conceptos equivocados

La Web 2.0 no es Internet 2. La Web 2.0 funciona sobre la misma red de
internet que todos conocemos.
La Web 2.0 no es un nuevo lenguaje de programación.
La Web 2.0 no es un cambio radical de tecnología, se sigue utilizando
HTTP, HTML, JavaScript y muchas de las tecnologías que han surgido,
aunque se usan de otro modo.

•

“Ajax”Maximiliano Firtman Editorial Alfaomega.

Programación
Web

Web 1.0 y Web 2.0

Concepto

Web 2.0

Quiénes publican

Los productores de los sitios

productores y usuarios

Información

Centralizada

Dispersa en miles de sitios

Publicidad

Sólo grandes presupuestos

Cualquier persona

Dueño de la inform.

El sitio web

Los usuarios

Tecnología

HTML 4.0

XHTML y CSS

Disponibilidad

Al final de cada proyecto

Beta perpetuo

Posibilidad de usar
servicios de otros

•

Web 1.0

Ninguna

Sitios con APIs

“Ajax” Maximiliano Firtman Editorial Alfaomega.

Programación
Web

Web 1.0 y Web 2.0

Concepto
E-mail
Publicidad
Mapas
Fotografías
Sitios de usuarios
Buscador
Enciclopedia
Información
Oficina
Compras

•

Web 1.0
Hotmail
DoubleClick
MapQuest
Ofoto
Geocities
Altavista
Encarta
Slashdot
--Amazon


Web 2.0
Gmail
Google AdWords
Google Maps
Yahoo! Flick
Blogger
Google
Wikipedia
Digg
Google Docs
GAP

Programación
Web

RIA

Las RIA (Rich Internet Applications - Aplicaciones Ricas de Internet) son
un nuevo tipo de aplicaciones con más ventajas que las tradicionales
aplicaciones Web. Esta surge como una combinación de las ventajas
que ofrecen las aplicaciones Web y las aplicaciones tradicionales.
Normalmente en las aplicaciones Web, hay una recarga contínua de
páginas cada vez que el usuario pulsa sobre un enlace. De esta forma se
produce un tráfico muy alto entre el cliente y el servidor, llegando
muchas veces, a recargar la misma página con un mínimo cambio.
Otra de las desventajas de las tradicionales aplicaciones web es la poca
capacidad multimedia que posee. Para ver un vídeo es necesario usar un
programa externo para su reproducción.

•

“RIA – Wikipedia” http://es.wikipedia.org/wiki/Aplicaciones_de_Internet_Ricas

Programación
Web

RIA

En los entornos RIA no se producen recargas de página, ya que desde el
principio se carga toda la aplicación y sólo se produce comunicación
con el servidor cuando se necesitan datos externos como datos de una
base de datos o de otros archivos externos.
Las capacidades multimedia son totales gracias a que estos entornos
tienen reproductores internos y no hace falta ningún reproductor del
Sistema Operativo del usuario.

Hay muchas herramientas para la creación de entornos RIA. Entre estas
se puede mencionar las plataformas Adobe Flash y Adobe Flex de
Adobe, AJAX, OpenLaszlo, Silverlight de Microsoft, JavaFX Script de
Sun Microsystems y Bindows de MB Technologies.
•

“RIA – Wikipedia” http://es.wikipedia.org/wiki/Aplicaciones_de_Internet_Ricas

Programación
Web

•


RIA

Programación
Web

Características de una RIA

Experiencia rica del usuario: Implica hacer uso de nuevos conceptos en
la web, como controles ricos de ingreso (selectores de fecha,
deslizadores, ingreso de texto con formato), servicios de drag and drop
y evitar demoras al usuario en el uso del sitio web.
Capacidad offline: Permite que una aplicación web siga funcionando
aunque se haya perdido conectividad con el servidor o con internet. Por
supuesto, esto será posible en algunos casos, asimismo, si la conexión
se retoma seguiría su uso normal.
Productividad alta del desarrollador: Los entornos de trabajo y las
herramientas para desarrollar aplicaciones web se encuentran cercanas
a la productividad en una aplicación de escritorio.

•


Programación
Web

Características de una RIA

Respuesta: Las aplicaciones web responden con rapidez y es posible
interactuar con la aplicación aún cuando se espera una respuesta del
servidor.
Flexibilidad: Los nuevos sitios web permiten una interfaz flexible con la
posibilidad de modificar la apariencia, el contenido y los servicios
disponibles de una manera sencilla y rápida.
Fácil de distribuir y actualizar: Sólo es suficiente subir los archivos al
servidor, incluso con cientos de usuarios conectados.
Fácil de administrar: No hay metodologías de instalación complejas,
DLL ni instaladores, la complejidad de instalación no es mayor que la de
cualquier aplicación web normal.

•


Programación
Web

Desventajas

Forma de navegar: Los usuarios están acostumbrados a navegar
haciendo click en hipervínculos, pasando de página en página y con
tiempos de espera entre páginas, mientras que en la Web 2.0 la forma de
trabajo es diferente, es mas parecido a trabajar con aplicaciones de
escritorio.
Botón atrás: El funcionamiento de este botón en la Web 2.0 es muy
diferente, mas bien toda la aplicación corre en la misma página, y el
botón hacia atrás hace salir al usuario de la aplicación.

•


Programación
Web

El navegador

El navegador no solo se utliza para pequeñas validaciones, ahora
tambień administrará el flujo de la aplicación, los módulos y la
interacción con el servidor.
Todas las comunicaciones al servidor no serán invocadas en forma
directa por el click del usuario, sino por el código del cliente.
Estas peticiones al servidor se harán detrás de escena, o sea, el usuario
no será consciente de la petición, a no ser que se active de manera
explícita un mensaje que indique “cargando”.

•


Programación
Web

•

Web 1.0 vs Web 2.0


Programación
Web

Tipo de aplicaciones RIA

Hay 2 tipos de aplicaciones RIA:
1) Full RIA: se utiliza por completo el nuevo modelo de RIA. Maneja una
o dos direcciones para todo el sitio web. Escapan al clásico concepto de
página web para convertirse en aplicación web.
2) Las RIA empotradas: son una mezcla entra las aplicaciones claśicas
de la Web 1.0 y la Web 2.0. Siguen comportándose como páginas web
normales, con hipervínculos interconectados hasta llegar a un punto en
el que, por funcionalidad, se convierten en una RIA, mejorando la
experiencia del usuario en ese punto.

•


Programación
Web

Segunda Guerra

En la década de los 90s existió lo que se denominó la guerra de los
navegadores entre Netscape e Internet Explorer por la compatibilidad.

Con la entrada de la Web 2.0 se puede decir que se ha iniciado la
“Segunda Guerra de los Navegadores” entre Internet Explorer, Firefox,
Opera, Safari y Google Chrome.

•


Programación
Web

Indexación

Las RIA tienen cierto problema para que los buscadores puedan
indexarlos adecuadamente.
Este problema surge debido a que una RIA presenta una sola URL y con
un contenido inicial. El contenido restante ya no son páginas aparte,
sino que son pequeñas zonas que se actualizan directamente en el
cliente según la interacción del usuario, esto implica que el buscador
sólo indexará la pagina inicial.
Para solucionar este problema, Google acaba de anunciar que desarrolló
un algoritmo, con la ayuda de Adobe, que permitirá “leer y entender” el
contenido de los vectores de Flash, para así poder indexarlos
adecuadamente.

•

“Ajax” Maximiliano Firtman Editorial Alfaomega., “Google se pone amoroso”
http://www.fayerwayer.com/2008/07/google-se-pone-amoroso-con-flash/ .

Programación
Web

Marcadores Favoritos

Existe un problema cuando utilizamos una aplicación Web 2.0 y
queremos enviar la dirección de un enlace, ya que si estamos
dentro de una aplicación, siempre mantiene la misma dirección.
En la Web 1.0 era tan facil como copiar y pegar la dirección que
vemos en el navegador.

•


Programación
Web

AJAX

AJAX (Asynchronous JavaScript and XML – JavaScript
Asincrónico con XML) es una plataforma basada en estándares y
no posee dueño.El término fué creado en el 2005 por Jesse James
Garret para darle un nombre al conjunto de técnicas (JS y XML).
AJAX no es nuevo y antes se conocía con otros nombres, pero no
fué muy popular hasta que Google lo difundió entre los usuarios y
programadores.
AJAX usa XHTML y CSS como lenguaje de estructura y diseño,
JavaScript como lenguaje de programación, el modelo DOM
(Document Object Model) para trabajar con la estructura del sitio,
XML como uno de los formatos de transporte de datos desde y
hacia el servidor y un lenguaje de servidor (PHP, ASP o Java) para
la lógica de servidor y el acceso a bases de datos.

•


Programación
Web

Flash

La mayoría de los banners y animaciones de la red, incluso sitios
enteros están desarrollados con Flash. Después de XHTML es la
tecnología mas distribuida entre los navegadores de todo el
mundo.
El mayor inconveniente es que requiere buenas prácticas de
programación para la creación de controles para la aplicación.
No obstante sus características, Flash es un producto que ha sido
asociado más al diseño y a la animación y siempre le costó entrar
en el mundo de los programadores, debido a ello Macromedia (la
dueña de Flash) creó Flex, la plataforma para el desarrollo de
aplicaciones RIA.

•


Programación
Web

Adobe Flex

Flex es ahora un producto de Adobe y es una plataforma que permite
generar aplicaciones RIA basadas en la plataforma Flash, pero con un
entorno de trabajo y un modelo pensados de manera específica para
este tema y no para el mundo de la animación.
Flex es el nombre de la plataforma que incluye:
Flex Builder: Entorno de desarrollo comercial basado en Eclipse.
Flex SDK: Compilador gratuito que toma el código fuente y lo
convierte a SWF.
Flex Data Services: Servidor de aplicaciones basado en Java que
provee servicios a las aplicaciones RIA desarrolladas en Flex.
Flex Chart Components: Componentes adicionales que generan
gráficos estadísticos.

•

“Ajax” Maximiliano Firtman Editorial Alfaomega, “Adobe: Flex 3” http://www.adobe.com/es/products/flex/ .

Programación
Web

OpenLaszlo

OpenLaszlo es una plataforma Open Source mantenida por la
empresa Laszlo Systems, que genera aplicaciones RIA a partir
de un lenguaje de marcado XML conocido como LZX y código
ECMAScript.

•

“Ajax” Maximiliano Firtman Editorial Alfaomega

Programación
Web

Microsoft Silverlight

Cuando Microsoft lanza Windows Vista, también lanzó un
subsistema (compatible con XP y 2003) llamado Windows
Presentation Foundation (WPF) que posteriormente se
relanzaría para la web como Silverlight.
Para su funcionamiento, los navegadores requieren un plugin.

•


Programación
Web

Java Webstart

Esta tecnología permite generar aplicaciones de internet del
mismo modo que si fueran de escritorio, para ello se requiere
tener instalada la Java Virtual Machine en el equipo del cliente
y pueden ser invocadas desde un vínculo en una página web.

•


Programación
Web

1.4.1 Introducción al XHTML.
UTILIZAR MANUAL

•

_

Programación
Web

1.5 Introducción al XML.

•

_

Programación
Web

eXtensible Markup Language

XML es un estándar desarrollado por el Consorcio World Wide Web (W3C). Se trata de una
versión reducida y especializada en la Web de la norma SGML. Su caracterización como
"extensible" se deriva de la no limitación en el número de marcas o etiquetas, pues permite crear
todas aquéllas que sean necesarias. Otra de sus características principales es que permite
enlaces multidireccionales (esto es, que apuntan a varios documentos).
XML conserva todas las propiedades importantes de SGML. Es decir, XML es también un
metalenguaje, dado que con él podemos definir nuestro propio lenguaje de presentación y, a
diferencia del HTML, que se centra en la representación en la pantalla de la información, XML se
centra en la información en sí misma. El objetivo del desarrollo del XML es ser un estándar que
sustituya a todo el conjunto de tecnologías que permiten hoy acceder a información a través del
Web (applets, scripts,…).
XML posee una serie de especificaciones como XLL (que incluye Xlinks, XPointer), XSL (que
incluye XSLT, XPATH y FO) y XML Schema que permite restringir la estructura de los
documentos XML, DOM un analizador de éste, o los lenguajes Topics Map, XFML, RDF y OWL
que le dotan de una estructura semántica. XML también es una fuente creciente para el
desarrollo y puesta en marcha de otros lenguajes sectoriales y una serie de herramientas y
aplicaciones que lo complementan.
XML no dispone de soporte para excepciones, por lo que cada etiqueta realiza siempre la
misma función
Es un código más reducido y menos complejo que el SGML y, por lo tanto, muchos más fácil
de usar
Posee independencia de los navegadores, porque en lugar de añadir las etiquetas de
presentación al documento se remitirá una hoja de estilo realizada en XSL (Extensible Style
Language)
•

_

Programación
Web

Diferencias entre HTML y XML
XML no es un sustituto de HTML.
HTML y XML se han diseñado con diferentes objetivos:
1.
XML fue diseñado para transportar y almacenar
datos, con especial atención a los datos de lo que
es.
2.
HTML se diseñó para mostrar los datos, con
especial atención a los datos de cómo se ve.
3.
HTML es mostrar acerca de la información,
mientras que XML es la información acerca de la
ejecución.
HTML/DHTML
XML
SGML

CARACTERISTICA

Gramática

Extensible

Extensible

Estructura

Monolítica

Jerárquica

Jerárquica

Nº de marcas

Fijas

Sin límite

Sin límite

Complejidad

Baja

Mediana

Alta

Diseño de páginas

Fijado por tags. Etiquetas con
atributos CSS en DHTML

CSS o XSL

DSSSL

Enlaces

Simples enlaces

Poderosos enlaces (XLL)

HyTime

Exportabilidad
(formatos/aplicaciones)

No

Sí

Sí

Validación

Sin validación

Pueden validarse

Obligatorio DTD

Búsquedas

•

Fija y no ampliable

Simple y a veces resuelta por
scripts o CGI

Potente . Capacidad para
personalizarla.

Son posibles potentes
búsquedas.

Indización/Catalogación de
páginas web
_

Sólo lo permiten los atributos de la
etiqueta <META>, e
implementaciones como DC.

Una descripción abierta y
personalizable con el
RDF.

Proyectos
DLI, etc.

como

TEI,

Programación
Web

Estructura de un Documento XML

Estructura Física: Unidades llamadas entidades (etiquetas) que pueden hacer referencias a tras. Un
documento XML comienza con una etiqueta raiz.
Estructura Lógica: Declaraciones, elementos, comentarios, referencias a caracteres e instrucciones de
procesamiento.
La estructura lógica y fisica deben encajar de manera adecuada.
Documentos XML
Bien formados: Son todos los que cumplen las especificaciones del lenguaje respecto a las reglas
sintácticas sin estar sujetos a unos elementos fijados en un DTD. De hecho los documentos XML deben
tener una estructura jerárquica muy estricta y los documentos bien formados deben cumplirla.
Válidos: Además de estar bien formados, siguen una estructura y una semántica determinada por un
DTD: sus elementos y sobre todo la estructura jerárquica que define el DTD, además de los atributos,
deben ajustarse a lo que el DTD dicte.
<?xml version=" 1.0 " encoding=" UTF-8 " standalone= " yes "?>
<ficha>
<nombre> Angel </nombre>
<apellido> Barbero </apellido>
<direccion> c/Ulises, 36 </direccion>
</ficha>

Programación
Web

DOCTYPE de un documento XML

La "declaración de tipo de documento" define qué tipo de documento estamos creando para
ser procesado correctamente. Es decir, definimos que declaración de tipo de documento
(DTD) valida y define los datos que contiene nuestro documento XML.
En ella se define el tipo de documento, y dónde encontrar la información sobre su Definición
de
Tipo
de
Documento,
mediante:
Un identificador público (PUBLIC): que hace referencia a dicha DTD.
Identificador universal de recursos (URI): precedido de la palabra SYSTEM.
Ejemplos:
<!DOCTYPE MESAJE SYSTEM "mesaje.dtd">
<!DOCTYPE HTML PUBLIC "-/ /W3C/ /DTD HTML 3.2 Final/ /EN">
<!DOCTYPE LABEL SYSTEM "http://azuaje.ulpgc.es/dtds/label.dtd">

Programación
Web

Documento bien formado

Estructura jerárquica de elementos
Los documentos XML deben seguir una estructura estrictamente jerárquica con lo que respecta a las
etiquetas que que delimitan sus elementos. Una etiqueta debe estar correctamente "incluida" en otra.
Asímismo, los elementos con contenido, deben estar correctamente "cerrados". A continuació se muestra
un ejemplo incorrecto y posteriormente otro ejemplo escrito correctamente.
<li>HTML <b> permite <i> esto </b> </i>.
<li>En XML la <b> estructura <i> es </i> jerárquica </b>.</li>
Etiquetas vacías
HTML permite elementos sin contenido. XML también, pero la etiqueta debe ser de la siguiente forma
<elemento sin contenido/>. A continuación se muestra un ejemplo incorrecto y posteriormente otro
correcto.
<li>Esto es HTML <br> en el que casi todo está permitido </li>
<li>En XML, es <br/> más restrictivo.</li>
Un solo elemento raiz
Los documentos XML sólo permiten un elemento raiz, del que todos los demás sean parte. Es decir, la
jerarquía de elemento de un documento XML bien formado sólo puede tener un elemento inicial.
Valores de atributos
Los valores de atributos en XML siempre deben estar encerradas entre comillas simples (') o doble ("). En
la siguiente ejemplo, la primera línea sería incorrecta en XML, no así la segunda:
<a HREF=http://www.dis.ulpgc.es/>
<a HREF="http://www.dis.ulpgc.es/">

Programación
Web

Documento bien formado

Tipos de letras, espacios en blanco
El XML es sensible al tipo de letra que se utiliza, es decir, trata las mayúsculas y minúsculas como
caracteres diferentes. Por lo tanto, los elemento definidos como "FICHA", "Ficha", "ficha" y "fiCha" serían
elementos diferentes.
Esite un conjunto de caracteres denominados "espacios en blanco" que los procesadores XML tratan de
forma diferente en el marcado XML. Estos caracteres son los ":espacios", tabuladores, retornos de carro y
los saltos de línea.
La especificación XML 1.0 permite el uso de esos "espacios en blanco" para hacer más legible el código, y
en general son ignorados por los procesadores XML.
En estos casos, sin embargo, los "espacios en blanco" resultan muy significativos, por ejemplo, para
separar las palabras de un texto, o separa líneas de párrafos diferentes.
Nombrando cosas
Al utilizar XML, es necesario asignar nombres a las estructuras, tipos de elementos, entidades, elementos
particulares, etc. En XML los nombres tienen algunas características en común.
No se pueden crear nombres que empiecen con la cadena "xml", "xML", "XML" o cualquier otra variante.
Las letras y rayas se pueden usar en cualquier parte del nobmre. También se pueden incluir dígitos,
guiones y caracteres de punto, pero no se puede empezar por ninguno de ellos. El resto de caracteres,
como algunos símbolos, y espacios en blanco, no se pueden usar.
Marcado y datos
Las construcciones con etiquetas, referencias de entidad y declaraciones se denominan "marcas".Éstas
son las partes del documento que el procesador XML espera entender. El resto del documento que se
encuentra entre las marcas son los datos que resultan entendibles por las personas.
Es sencillo reconocer las marcas en un documento XML. Son aquellas porciones que empiezan con "<" y
acaban con ">", o bien, en el caso de las referencias de entidad, empiezan por "&" y acaban con ";".

Programación
Web

Document Type Definiton (DTD)

La DTD define los tipos de elementos, atributos y entidades permitidas, y puede expresar
algunas limitaciones para combinarlos.
Los documentos que se ajustan a su DTD, se denominan "válidos". El concepto de "validez"
no tiene nada que ver con el de estar "bien formado". Un documento "bien formado"
simplemente respeta la estructura y sintaxis definida por la especificación de XML. Un
documento "bien formado" puede además ser "válido" si cumple las reglas de una DTD
determinada. También existen documentos XML sin una DTD asociada, en ese caso no son
"válido", pero tampoco "inválido"... simplemente "bien formados"... o no.
Una DTD puede residir en un fichero externo, y quizás compartido por varios (puede que
miles) de documentos. O bien, puede estar contenido en el propio documento XML, como
parte de su declaración de tipo de documento.
Veamos un ejemplo
<! DOCTYPE etiqueta[
<!ELEMENT etiqueta (nombre, calle, ciudad, pais, codigo)>
<!ELEMENT nombre (#PCDATA)>
<!ELEMENT calle (#PCDATA)>
<!ELEMENT ciudad (#PCDATA)>
<!ELEMENT pais (#PCDATA)>
<!ELEMENT codigo (#PCDATA)>
]>

Programación
Web

Document Type Definiton (DTD)

<etiqueta>
<nombre>Fulano Mengánez</nombre>
<calle>c/ Mayor, 27</calle>
<ciudad>Valderredible</ciudad>
<pais>España</pais>
<codigo>39343</codigo>
</etiqueta>
La declaración del tipo de documento empieza en la primera línea y termina con "]>". Las
declaraciones DTD son las líneas que empiezan con "<!ELEMENT" y se denominan
declaraciones de tipo elemento. También se pueden declarar atributos, entidades y
anotaciones para una DTD.
En el ejemplo anterior, todas las declaraciones DTD se definen "etiquetas" residen dentro del
documento. Sin embargo, la DTD se puede definir parcial o completamente en otro ejemplo.
Por ejemplo:
<?xml version="1.0"?>
<!DOCTYPE coche SYSTEM "http://www.sitio.com/dtd/coche.dtd">
<coche>
<modelo>...</modelo>
...
</coche>

Programación
Web

Declaraciones Tipo Elemento

Los elementos son la base de las marcas XML, y deben ajustarse a un tipo de documento
declarado en un DTD para que el documento XML sea considerado válido.
Las declaraciones de tipo de elemento deben empezar con "<!ELEMENT" seguidas por el
identificador genérico del elemento que se declara. A continuación tienen una especificación
de contenido.
Por ejemplo:
<!ELEMENT receta (titulo, ingredientes, procedimiento)>
En este ejemplo, el elemento <receta> puede contener dentro elementos <titulo>,
<ingredientes> y <procedimiento>, que, a su vez, estarán definidos también en la DTD y
podrán contener más elementos.
Siguiendo la definición de elemento anterior, este ejemplo de documento XML sería válido:
<receta>
<titulo>...</titulo>
<ingredientes>...</ingredientes>
<procedimiento>...</procedimiento>
</receta>
Pero no este:
<receta>
<parrafo>Esto es un párrafo</parrafo>
<titulo>...</titulo>
<ingredientes>...</ingredientes>
<procedimiento>...</procedimiento>
</receta>

Programación
Web

Tipos de Elementos

EMPTY
Puede no tener contenido. Suele usarse para los atributos.
<!ELEMENT salto-de-pagina EMPTY>
ANY
Puede tener cualquier contenido. No se suele usar, ya que es conveniente estructurar
adecuadamente nuestros documenteo XML.
<!ELEMENT batiburrillo ANY>
Mixed
Puede tener caracteres de tipo dato o una mezcla de caracteres y sub-elementos
especificados en la especificación de contenido mixto.
<!ELEMENT enfasis (#PCDATA)>
<!ELEMENT parrafo (#PCDATA|enfasis)*>
Por ejemplo, el primer elemento definido en el ejemplo (<enfasis>) puede contener datos de
carácter (#PCDATA). Y el segundo (<parrafo>) puede contener tanto datos de carácter
(#PCDATA) como subelementos de tipo <enfasis>.
Element
Sólo puede contener sub-elementos especificados en la especificación de contenido.
<!ELEMENT mensaje (remite, destinatario, texto)>
Para declarar que un tipo de elemento tenga contenido de elementos se especifica un
modelo de contenido en lugar de una especificación de contenido mixto o una de las claves
ya descritas.

Programación
Web

Modelos de Contenido

Un modelo de contenido es un patrón que establece los sub-elementos aceptados, y el orden en que se
acepta.
Un modelo sencillo puede tener un solo tipo de sub-elemento:
<!ELEMENT aviso (parrafo)>
Esto indica que <aviso> sólo puede contener un solo <parrafo>.
<!ELEMENT aviso (titulo, parrafo)>
La coma, en este caso, denota una secuencia. Es decir, el elemento <aviso> debe contener un <titulo>
seguido de un <parrafo>.
<!ELEMENT aviso (parrafo | grafico)>
La barra vertical "|"indica una opción. Es decir, <aviso> puede contener o bien un <parrafo> o bien un
<grafico>. El número de opciones no está limitado a dos, y se pueden agrupar usando paréntesis.
<!ELEMENT aviso (titulo, (parrafo | grafico))>
En este último caso, el <aviso> debe contener un <titulo> seguido de un <parrafo> o un <grafico>.
Además, cada partícula de contenido puede llevar un indicador de frecuencia, que siguen directamente a
un identificador general, una secuencia o una opción, y no pueden ir precedidos por espacios en blanco.

Indicadores de frecuencia

?
*
+

Opcional (0 o 1 vez)
Opcional y repetible (0 o más veces)

Necesario y repetible (1 o más veces)
Para entender esto, vamos a ver un ejemplo.
<!ELEMENT aviso (titulo?, (parrafo+, grafico)*)>
En este caso, <aviso> puede tener <titulo> o no (pero sólo uno), y puede tener cero o más conjuntos
<parrafo><grafico>, <parrafo><parrafo><grafico>, etc.

Programación
Web

Declaraciones de lista de atributos

Los atributos permiten añadir información adicional a los elementos de un documento. La principal diferencia entre los elementos y los
atributos, es que los atributos no pueden contener sub-atributos. Se usan para añadir información corta, sencilla y desestructurada.
<mensaje prioridad="urgente">
<de>Alfredo Reino</de>
<a>Hans van Parijs</a>
<texto idioma="holandés">
Hallo Hans, hoe gaat het?
...
</texto>
</mensaje>
Otra diferencia entre los atributos y los elementos, es que cada uno de los atributos só se puede especificar una vez, y en cualquier
orden.
En el ejemplo anterior, para declara la lista de atributo de los elementos <mensaje> y <texto> haríamos lo siguiente:
<!ELEMENT mensaje (de, a, texto)>
<!ATTLIST mensaje prioridad (normal | urgente) normal>
<!ELEMENT texto (#PCDATA)>
<!ATTLIST texto idioma CDATA #REQUIRED>
Las declaraciones de los atributos empiezan con "<!ATTLIST", y a continuación del espacio en blanco viene el identificador del
elemento al que se aplica el atributo. Después viene el nombre del atributo, su tipo y su valor por defecto. En el ejemplo anterior, el
atributo "prioridad" puede estar en el elemento <mensaje> y puede tener el valor "normal" o "urgente", siendo "normal" el valor por
defecto si no especificamos el atributo.
El atributo "idioma", pertenece al atributo texto, y puede contener datos de carácter CDATA. Es más, la palabra #REQUIRED significa
que no tiene valor por defecto, ya que es obligatoria especificar este atributo.
A menudo interesa que se pueda omitir un atributo, sin que se adopte automáticamente un valor por defecto. Para esto se usa la
condición "#IMPLIED". Por ejemplo, en una supuesta DTD que define la etiqueta <IMG> de HTML:
<!ATTLIST IMG URL CDATA #REQUIRED>
<!ALT CDATE #IMPLIED>
Es decir, el atributo "URL" es obligatorio, mientras que el "ALT" es opcional (y si se omite, no toma ningún elemento por defecto).

Unidad I - “Introducción a las Tecnologías Web”

Intro Programación Web - Historia Internet y WWW

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Intro Programación Web - Historia Internet y WWW

Similar a Intro Programación Web - Historia Internet y WWW (20)

Último

Último (15)

Intro Programación Web - Historia Internet y WWW