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
relacion...
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 d...
Programación
Web

Douglas Engelbart

En la década de los 60ś Douglas Engelbart fue la fuerza motriz detrás
del diseño del ...
Programación
Web

Ted Nelson

Ted Nelson fundó el proyecto Xanadu en 1960 y consistía básicamente
en concebir un documento...
Programación
Web

Tim Berners-Lee

Mientras trabajaba en el CERN, durante junio a diciembre de 1980, Tim
Berners-Lee escri...
Programación
Web

CERN

El CERN (Organisation Européenne pour la Recherche Nucléaire,
Organización Europea para la Investi...
Programación
Web

World Wide Web

En marzo de 1989, estando en el CERN , Tim Berrners publica el
artículo”Information Mana...
Programación
Web

Robert Cailliau

Posteriormente Robert Cailliau se une al proyecto y es co-autor de una
nueva versión de...
Programación
Web

•

Primer Navegador

“Tim Berners-Lee: WorldWideWeb, the first web client”
http://www.w3.org/People/Bern...
Programación
Web

•

Primer Navegador

“Tim Berners-Lee: WorldWideWeb, the first web client”
http://www.w3.org/People/Bern...
Programación
Web

Computadora NeXT

La computadora original donde trabajó Tim Berners era una
computadora NeXT, la cual se...
Programación
Web

Primer sitio de la Web

El sitio “Info.cern.ch” fué la dirección del primer sitio web y del primer
servi...
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 1...
Programación
Web

Mosaic

En febrero de 1993 en el NCSA (National Center for Supercomputing
Applications) de la Universida...
Programación
Web

Creadores de Mosaic

En septiembre de 1993, NCSA liberó
las versiones para PCs y Apple
Macintosh, lo cua...
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 ...
Programación
Web

Netscape

En marzo de 1994, Marc Andreessen y algunos compañeros que
trabajaban en el desarrollo de Mosa...
Programación
Web

•

Netscape Navigator

“Netscape 0.9” http://es.wikipedia.org/wiki/Imagen:Netscape_0.9_p%C3%A1gina_de_in...
Programación
Web

El navegador Navigator llegó a ser
utilizado por el 80% de los
usuarios de internet hasta que
surgió el ...
Programación
Web

Internet Explorer

La primera versión (IE1.0) era un producto que se licenció de la
compañía Spyglass (l...
Programación
Web

1957-1968

ARPA

TX2-PS

1993
MOSAIC
Gopher

Navegador

Evolución de la infraestructura
1969-1980
CRECE
...
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 comunicars...
Programación
Web

Direcciones IP

Identificación de un host
Host

Red
11000011

00100011

00001100

00000111

195.034.012....
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 a...
Programación
Web

1.2.3 URL's.

•

_
Programación
Web

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

Localizador uniforme de recursos: Permite local...
Programación
Web

Servicios de los servidores Web

WWW
WWW

Email
Email
Telnet
Telnet
Conexión remota

Lista de
Lista de
c...
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)...
Programación
Web

COOKIES

VENTAJAS

DESVENTAJAS

•Hacer la navegación mas personal
•Facilitar la interacción del usuario ...
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...
Programación
Web

Common Gateway Interface

• Es una interfaz entre un servidor con (HTTP) y los recursos de la computador...
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 < >
...
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
Generali...
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...
Programación
Web

CSS Sintaxis

Una regla CSS consta de dos partes principales: un selector, y las declaraciones de uno
o ...
Programación
Web

Identificación y selectores de clase

El selector de ID se utiliza para especificar un estilo para un ún...
Programación
Web

El selector de clase

El selector de clase se utiliza para especificar un estilo para un grupo de elemen...
Programación
Web

El selector de clase

También se puede definir que elementos HTML específicos, sólo deben verse afectado...
Programación
Web

Especificación de estilos

Hay tres formas de insertar una hoja de estilo:
1) Hoja de estilos externa: C...
Programación
Web

Especificación de estilos

3) Estilo de Línea: En un estilo de línea se pierden muchas de las ventajas d...
Programación
Web

Herencia y prioridad de estilos

¿Qué estilo se utiliza cuando hay más de un estilo especificado para un...
Programación
Web

Modelo de Caja

Todos los elementos HTML pueden ser considerados como cuadros. En CSS, el término "model...
Programación
Web

Modelo de Caja

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

Cual sería el ancho tota...
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 ...
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ó co...
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 gener...
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 q...
Programación
Web

Web 1.0 y Web 2.0

Concepto

Web 2.0

Quiénes publican

Los productores de los sitios

productores y usu...
Programación
Web

Web 1.0 y Web 2.0

Concepto
E-mail
Publicidad
Mapas
Fotografías
Sitios de usuarios
Buscador
Enciclopedia...
Programación
Web

RIA

Las RIA (Rich Internet Applications - Aplicaciones Ricas de Internet) son
un nuevo tipo de aplicaci...
Programación
Web

RIA

En los entornos RIA no se producen recargas de página, ya que desde el
principio se carga toda la a...
Programación
Web

•

“Ajax” Maximiliano Firtman Editorial Alfaomega.

RIA
Programación
Web

Características de una RIA

Experiencia rica del usuario: Implica hacer uso de nuevos conceptos en
la we...
Programación
Web

Características de una RIA

Respuesta: Las aplicaciones web responden con rapidez y es posible
interactu...
Programación
Web

Desventajas

Forma de navegar: Los usuarios están acostumbrados a navegar
haciendo click en hipervínculo...
Programación
Web

El navegador

El navegador no solo se utliza para pequeñas validaciones, ahora
tambień administrará el f...
Programación
Web

•

Web 1.0 vs Web 2.0

“Ajax” Maximiliano Firtman Editorial Alfaomega.
Programación
Web

•

“Ajax” Maximiliano Firtman Editorial Alfaomega.

RIA
Programación
Web

Tipo de aplicaciones RIA

Hay 2 tipos de aplicaciones RIA:
1) Full RIA: se utiliza por completo el nuevo...
Programación
Web

Segunda Guerra

En la década de los 90s existió lo que se denominó la guerra de los
navegadores entre Ne...
Programación
Web

Indexación

Las RIA tienen cierto problema para que los buscadores puedan
indexarlos adecuadamente.
Este...
Programación
Web

Marcadores Favoritos

Existe un problema cuando utilizamos una aplicación Web 2.0 y
queremos enviar la d...
Programación
Web

AJAX

AJAX (Asynchronous JavaScript and XML – JavaScript
Asincrónico con XML) es una plataforma basada e...
Programación
Web

Flash

La mayoría de los banners y animaciones de la red, incluso sitios
enteros están desarrollados con...
Programación
Web

Adobe Flex

Flex es ahora un producto de Adobe y es una plataforma que permite
generar aplicaciones RIA ...
Programación
Web

OpenLaszlo

OpenLaszlo es una plataforma Open Source mantenida por la
empresa Laszlo Systems, que genera...
Programación
Web

Microsoft Silverlight

Cuando Microsoft lanza Windows Vista, también lanzó un
subsistema (compatible con...
Programación
Web

Java Webstart

Esta tecnología permite generar aplicaciones de internet del
mismo modo que si fueran de ...
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 tr...
Programación
Web

Diferencias entre HTML y XML
XML no es un sustituto de HTML.
HTML y XML se han diseñado con diferentes o...
Programación
Web

Estructura de un Documento XML

Estructura Física: Unidades llamadas entidades (etiquetas) que pueden ha...
Programación
Web

DOCTYPE de un documento XML

La "declaración de tipo de documento" define qué tipo de documento estamos ...
Programación
Web

Documento bien formado

Estructura jerárquica de elementos
Los documentos XML deben seguir una estructur...
Programación
Web

Documento bien formado

Tipos de letras, espacios en blanco
El XML es sensible al tipo de letra que se u...
Programación
Web

Document Type Definiton (DTD)

La DTD define los tipos de elementos, atributos y entidades permitidas, y...
Programación
Web

Document Type Definiton (DTD)

<etiqueta>
<nombre>Fulano Mengánez</nombre>
<calle>c/ Mayor, 27</calle>
<...
Programación
Web

Declaraciones Tipo Elemento

Los elementos son la base de las marcas XML, y deben ajustarse a un tipo de...
Programación
Web

Tipos de Elementos

EMPTY
Puede no tener contenido. Suele usarse para los atributos.
<!ELEMENT salto-de-...
Programación
Web

Modelos de Contenido

Un modelo de contenido es un patrón que establece los sub-elementos aceptados, y e...
Programación
Web

Declaraciones de lista de atributos

Los atributos permiten añadir información adicional a los elementos...
Unidad I - “Introducción a las Tecnologías Web”
U1 introd tecnologias_web
U1 introd tecnologias_web
U1 introd tecnologias_web
U1 introd tecnologias_web
Próxima SlideShare
Cargando en…5
×

U1 introd tecnologias_web

270 visualizaciones

Publicado el

Publicado en: Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
270
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
5
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

U1 introd tecnologias_web

  1. 1. Programación Web Unidad I “Introducción a lasTecnologías Web”
  2. 2. 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.
  3. 3. Programación Web 1. 1 Perspectiva histórica del internet • _
  4. 4. 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
  5. 5. 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
  6. 6. 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/
  7. 7. 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.
  8. 8. 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 .
  9. 9. 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.
  10. 10. 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/ .
  11. 11. Programación Web • Primer Navegador “Tim Berners-Lee: WorldWideWeb, the first web client” http://www.w3.org/People/Berners-Lee/WorldWideWeb.html . 11
  12. 12. Programación Web • Primer Navegador “Tim Berners-Lee: WorldWideWeb, the first web client” http://www.w3.org/People/Berners-Lee/WorldWideWeb.html .
  13. 13. 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/ .
  14. 14. 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/ .
  15. 15. Programación Web Primera página de la Web
  16. 16. 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 .
  17. 17. 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/ .
  18. 18. 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 .
  19. 19. Programación Web • Mosaic “NCSA Image Archive” http://www.ncsa.uiuc.edu/News/Images/ .
  20. 20. 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,
  21. 21. 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
  22. 22. Programación Web • Netscape Navigator “Netscape 0.9” http://es.wikipedia.org/wiki/Imagen:Netscape_0.9_p%C3%A1gina_de_inicio.png .
  23. 23. 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 .
  24. 24. 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 .
  25. 25. 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
  26. 26. Programación Web 1.2 Protocolo http (protocolo de transferencia de hipertexto). • _
  27. 27. 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> …
  28. 28. 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
  29. 29. Programación Web 1.2.1 Arquitectura del WWW • _
  30. 30. Elementos de Red Programación Web LAN TCP/IP RUTEADOR INTERNET RUTEADOR Computadora remota Host / Computadora local
  31. 31. 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.
  32. 32. Programación Web 1.2.3 URL's. • _
  33. 33. 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 …
  34. 34. 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
  35. 35. Programación Web 1.2.3 Métodos http Persistencia en http - Cookies. • _
  36. 36. 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)
  37. 37. 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 _
  38. 38. Programación Web 1.2.4 Common Interface Gateway • _
  39. 39. 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 • _
  40. 40. 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. • _
  41. 41. Programación Web 1.3 Introducción al HTML Lenguaje de despliegue del web • _
  42. 42. 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> • _
  43. 43. Programación Web 1.3.1 HTML como un tipo SGML • _
  44. 44. 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).
  45. 45. Programación Web 1.3.2 Elementos del lenguaje HTML. Tutorial • _
  46. 46. Programación Web 1.3.3Tablas en HTML Tutorial • _
  47. 47. Programación Web 1.3.4 Formularios Tutorial • _
  48. 48. Programación Web 1.3.5 Hojas de estilo en cascada. CSS • _
  49. 49. 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. • _
  50. 50. 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; }
  51. 51. 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>
  52. 52. 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> <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>
  53. 53. 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> <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>
  54. 54. 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> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
  55. 55. 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>
  56. 56. 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.
  57. 57. 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
  58. 58. 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
  59. 59. Programación Web 1.4 Evolución del desarrollo de aplicaciones Web.
  60. 60. 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.
  61. 61. Programación Web • Web 1.0 “Web 1.0 logos” http://www.flickr.com/photos/complexify/97303317/ .
  62. 62. 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 .
  63. 63. Programación Web • Web 2.0 “logo 2.0” http://flickr.com/photos/stabilo-boss/93136022/ .
  64. 64. 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
  65. 65. Programación Web • Diagrama de conceptos “Web 2.0 Wikipedia” http://es.wikipedia.org/wiki/Web_2.0 . 65
  66. 66. Programación Web • Mapa Mental “Web 2.0 Wikipedia” http://es.wikipedia.org/wiki/Web_2.0 .
  67. 67. 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.
  68. 68. 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.
  69. 69. 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 “Ajax” Maximiliano Firtman Editorial Alfaomega. Web 2.0 Gmail Google AdWords Google Maps Yahoo! Flick Blogger Google Wikipedia Digg Google Docs GAP
  70. 70. 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
  71. 71. 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
  72. 72. Programación Web • “Ajax” Maximiliano Firtman Editorial Alfaomega. RIA
  73. 73. 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. • “Ajax” Maximiliano Firtman Editorial Alfaomega.
  74. 74. 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. • “Ajax” Maximiliano Firtman Editorial Alfaomega.
  75. 75. 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. • “Ajax” Maximiliano Firtman Editorial Alfaomega.
  76. 76. 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”. • “Ajax” Maximiliano Firtman Editorial Alfaomega.
  77. 77. Programación Web • Web 1.0 vs Web 2.0 “Ajax” Maximiliano Firtman Editorial Alfaomega.
  78. 78. Programación Web • “Ajax” Maximiliano Firtman Editorial Alfaomega. RIA
  79. 79. 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. • “Ajax” Maximiliano Firtman Editorial Alfaomega.
  80. 80. 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.
  81. 81. 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/ .
  82. 82. 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. • “Ajax” Maximiliano Firtman Editorial Alfaomega.
  83. 83. 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. • “Ajax” Maximiliano Firtman Editorial Alfaomega.
  84. 84. 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.
  85. 85. 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/ .
  86. 86. 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
  87. 87. 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. • “Ajax” Maximiliano Firtman Editorial Alfaomega
  88. 88. 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. • “Ajax” Maximiliano Firtman Editorial Alfaomega
  89. 89. Programación Web 1.4.1 Introducción al XHTML. UTILIZAR MANUAL • _
  90. 90. Programación Web 1.5 Introducción al XML. • _
  91. 91. 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) • _
  92. 92. 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,
  93. 93. 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>
  94. 94. 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">
  95. 95. 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/">
  96. 96. 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 ";".
  97. 97. 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)> ]>
  98. 98. 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>
  99. 99. 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>
  100. 100. 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.
  101. 101. 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.
  102. 102. 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).
  103. 103. Unidad I - “Introducción a las Tecnologías Web”

×