u1 introd tecnologias_web

Programación Web

Unidad I

“Introducción a lasTecnologías Web”

Programación Web

• 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.

INTRODUCCION

• _

Programación Web

1. 1 Perspectiva histórica del internet

• ”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 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.

http://www.w3.org/History.html

• ”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 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, Ted Nelson – Wikipedia, http://es.wikipedia.org/wiki/Ted_Nelson, Ted Nelson Home Page, http://ted.hyperland.com/

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.


http://es.wikipedia.org/wiki/Ted_Nelson

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

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-Upon-Everything) el cual permite enlaces entre nodos arbitrarios.

Cada nodo tiene un título, un tipo y una lista de enlaces bidireccionales.


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

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.

http://public.web.cern.ch/Public/Welcome.html

http://en.wikipedia.org/wiki/CERN

• ”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 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".


http://www.w3.org/History/1989/proposal.html

• ”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 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).


http://info.cern.ch/

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

Programación Web Primer Navegador

http://www.w3.org/People/Berners-Lee/WorldWideWeb.html

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

Programación Web Primer Navegador

http://www.w3.org/People/Berners-Lee/WorldWideWeb.html

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

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.


http://info.cern.ch/hypertext/WWW/TheProject.html

Programación Web Primera página de la Web

• “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 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


http://www.slac.stanford.edu/history/earlyweb/firstpages.shtml

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

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.


http://www.ncsa.uiuc.edu/News/Images/

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

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.


http://en.wikipedia.org/wiki/Marc_Andreessen

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

Programación Web Mosaic

http://www.ncsa.uiuc.edu/News/Images/

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

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.


• “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

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.

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

Programación Web Netscape Navigator

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

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.

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

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.

Programación Web

ARPA CRECEDARPANET

1957-19681957-1968 1969-19801969-1980

NACE NFSNETLAN / WAN

HTTPWWW

19911991

MOSAICGopher

19931993

UniversidadesUniversidadesAgencias de gobiernoAgencias de gobierno

Paso de NCP a TCP/IPPaso de NCP a TCP/IPIntroducción de DNS

E-mailE-mailRay Tomilson Ray Tomilson

Desarrollo de httpDesarrollo de http Tim Barnes LeeTim Barnes Lee

1983/84-19861983/84-1986

TX2-PS TX2-PS

Navegador Navegador

EXPANSIONGLOBAL

EARN-SITNET-NFSEARN-SITNET-NFS

EXPANSIONCOMERCIAL

1993/941993/94

Cambios Leyes AmericanasCambios Leyes AmericanasBill ClintBill Clintonon

Evolución de la infraestructura

• _

Programación Web

1.2 Protocolo http(protocolo de transferencia de hipertexto).

Programación Web

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

GET /index.html HTTP/1.1

Host: www.example.com User-Agent: nombre-cliente

param1=val1&param2=val2

HTTP/1.1 200 OK

Date: Fri, 31 Dec 2003 23:59:59 GMT Content-Type: text/html Content-Length: 1221

<html> …

Petición HTTP Respuesta HTTP

HTTP

Programación Web

Identificación de un host

195.034.012.007195.034.012.007

1100001111000011 0010001100100011 0000110000001100 0000011100000111

RedRed HostHost

Http://www.itver.edu.mxHttp://www.itver.edu.mx

Prefijo redPrefijo red

Subred-numSubred-num HostHost

Número de HostNúmero de Host

Prefijo redPrefijo red

Direcciones IP

• _

Programación Web

1.2.1 Arquitectura del WWW

Programación Web

LANLAN

Host / Computadora localHost / Computadora local

RUTEADORRUTEADOR RUTEADORRUTEADORINTERNET

Computadora Computadora remotaremota

TCP/IPTCP/IP

Elementos de Red

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

InternetInternetInternetInternet

EmailEmailEmailEmail

TelnetTelnetTelnetTelnet

FTPFTPFTPFTP

NewsNewsgroupsgroupsNewsNewsgroupsgroups

Gopher,Gopher,Archie,Archie,Verónica,Verónica,

Gopher,Gopher,Archie,Archie,Verónica,Verónica,

IRCIRCIRCIRC

Lista deLista decorreoscorreosLista deLista decorreoscorreos

WWWWWWWWWWWW

Chat (internet relay chat)

Conexión remotaConexión remota

Entornos de menús y búsqueda

Para navegar por servidores de FTP

Transmisión de archivosTransmisión de archivosservicios de mensajeria entre grupos de personas

Foros de discusión

• _

Programación Web

1.2.3 Métodos httpPersistencia en http - Cookies.

• _

Programación Web

• 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)

SESIONES Y COOKIES

• _

Programación Web COOKIES

VENTAJAS DESVENTAJAS

•Hacer la navegación mas personal •Hay que configurar su uso

•Facilitar la interacción del usuario con el sitio Web

•Compleja su programación

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

•Puede amenazar la privacidad

• _

Programación Web

1.2.4 Common Interface Gateway

• _

Programación Web

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

Common Gateway Interface

• _

Programación Web

• 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.

Common Gateway Interface

• _

Programación Web

1.3 Introducción al HTMLLenguaje de despliegue del web

• _

Programación Web

<HTML> <HEAD> <TITLE>Hola, Usuario</TITLE> </HEAD> <BODY> Hola, Usuario </BODY></HTML>

• HyperText Markup Language• Lenguaje de marcado: Corchetes angulares < >• Extensiones *.html y *.htm• Etiquetas: <html>, <head>, <title>, <body>, etc.

PAGINAS HTML ESTÁTICAS

• _

Programación Web

1.3.1 HTML como un tipo SGML

• _

Programación Web

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 - (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).

HTML como un SGML

• _

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

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.

Que es C ascading S tyle S heets?

Programación Web

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

CSS ComentariosLos 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;}

CSS Sintaxis

Programación Web

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>

Identificación y selectores de clase

Programación Web

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><style type="text/css">.center{text-align:center;}</style></head>

Llamado:<h1 class="center">Center-aligned heading</h1><p class="center">Center-aligned paragraph.</p>

El selector de clase

Programación Web

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><style type="text/css">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>

El selector de clase

Programación Web

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><style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}</style></head>

Especificación de estilos

Programación Web

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>

Especificación de estilos

Programación Web

¿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.

Herencia y prioridad de estilos

Programación Web

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 rightContenido.- width: / height: El contenido de la caja, donde el texto y las imágenes aparecen

Modelo de Caja

Programación Web

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 transitional para usar las propiedades de relleno, borde y anchura.

Modelo de Caja

Programación Web

1.4 Evolución del desarrollode aplicaciones Web.

• “Ajax”Maximiliano Firtman Editorial Alfaomega.

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.0Aparte 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.

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


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

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

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


• “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 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.

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

Programación Web Diagrama de conceptos

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

Programación Web Mapa Mental

• “Ajax”Maximiliano Firtman Editorial Alfaomega.

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 1.0 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 Ninguna Sitios con APIsservicios de otros


Programación Web Web 1.0 y Web 2.0

Concepto Web 1.0 Web 2.0E-mail Hotmail GmailPublicidad DoubleClick Google AdWordsMapas MapQuest Google MapsFotografías Ofoto Yahoo! FlickSitios de usuarios Geocities BloggerBuscador Altavista GoogleEnciclopedia Encarta WikipediaInformación Slashdot DiggOficina --- Google DocsCompras Amazon GAP

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

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


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.


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.

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

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.


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.

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

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

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.


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

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)

eXtensible Markup 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. CARACTERISTICA HTML/DHTML XML SGML

Gramática Fija y no ampliable 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áginasFijado 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úsquedasSimple 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 como TEI, DLI, etc.

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

EMPTYPuede no tener contenido. Suele usarse para los atributos. <!ELEMENT salto-de-pagina EMPTY> ANYPuede tener cualquier contenido. No se suele usar, ya que es conveniente estructurar adecuadamente nuestros documenteo XML. <!ELEMENT batiburrillo ANY> MixedPuede 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>. ElementSó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”

u1 introd tecnologias_web

Technology