Tecnologías y Aplicaciones Web 1 semestre.pptx

curso tecnologias y aplicaciones web

1. Tecnologías y Aplicaciones Web Fernando Osorno Gutiérrez

2. Tecnologías emergentes para desarrollo de aplicaciones en el servidor Unidad 1

3. Modelo cliente-servidor (1) Compartir información es tal vez más importante que compartir recursos físicos, como impresoras y escáneres. Para las compañías la información computarizada es vital. En las compañías más pequeñas, es posible que todas las computadoras estén en una sola oficina, pero en las más grandes, las computadoras y los empleados pueden estar dispersos en docenas de oficinas y plantas en varios países. Es posible imaginar el sistema de información de una compañía como si consistiera en una o más bases de datos y algunos empleados que necesitan acceder a ellas de manera remota. Tanenbaum , A. S. Redes de Computadoras. Pearson Prentice Hall. p. 3.

4. Modelo cliente-servidor (2) En este modelo, los datos están almacenados en computadoras poderosas que se llaman servidores . En contraste, los empleados tienen en sus escritorios máquinas más sencillas, llamadas clientes , con las que pueden acceder a datos remotos. Las máquinas cliente y servidor están conectadas por una red. Este conjunto se conoce como modelo cliente-servidor . Se utiliza ampliamente y forma la base en gran medida del uso de redes. Es aplicable cuando el cliente y el servidor se encuentran en el mismo edificio, pero también cuando están bastante retirados. Por ejemplo, cuando una persona en casa accede a una página Web. Tanenbaum , A. S. Redes de Computadoras. Pearson Prentice Hall. p 4.

5. Modelo cliente-servidor (3)

6. El modelo de referencia OSI (1) Modelo basado en una propuesta por la ISO (Organización Internacional de Estándares) como un primer paso hacia la estandarización internacional de los protocolos utilizados en varias capas. El modelo se llama OSI ( Interconexión de Sistemas Abiertos ) de ISO porque tiene que ver con la conexión de sistemas abiertos, es decir, sistemas que están abiertos a la comunicación con otros sistemas. El modelo OSI tiene siete capas. Tanenbaum , A. S. Redes de Computadoras. Pearson Prentice Hall. Pp 37-39.

7. El modelo de referencia OSI (2) Tanenbaum , A. S. Redes de Computadoras. Pearson Prentice Hall. Pp 37-39.

8. La capa de presentación (OSI) A diferencia de las capas inferiores, a las que les corresponde principalmente mover bits, a la capa de presentación le corresponde la sintaxis y la semántica de la información transmitida. A fin de que las computadoras con diferentes representaciones se puedan comunicar, las estructuras de datos que se intercambiarán se pueden definir de una manera abstracta, junto con una codificación estándar para su uso “en el cable”. Esta capa maneja estructuras de datos abstractas y permite definir e intercambiar estructuras de datos de un nivel más alto (por ejemplo, registros bancarios). Tanenbaum , A. S. Redes de Computadoras. Pearson Prentice Hall. P. 44.

9. La capa de aplicación (OSI) Esta capa contiene varios protocolos que los usuarios requieren con frecuencia. Un protocolo de aplicaciones de amplio uso es HTTP, que es la base del WWW. Cuando un navegador desea una página Web, utiliza este protocolo para enviar al servidor el nombre de dicha página. A continuación, el servidor devuelve la página. Otros protocolos de aplicación se utilizan para la transferencia de archivos, correo electrónico y noticias en la red. Tanenbaum , A. S. Redes de Computadoras. Pearson Prentice Hall. P. 44.

10. Modelo de referencia TCP/IP (1) Es el modelo usado en ARPANET, la abuela de todas las redes de computadoras de área amplia. ARPANET fue una red de investigación respaldada por el DoD (Departamento de Defensa de Estados Unidos). Con el tiempo conectó cientos de universidades e instituciones gubernamentales mediante líneas telefónicas alquiladas. Posteriormente, cuando se agregaron redes satelitales y de radio, los protocolos existentes tuvieron problemas para interactuar con ellas, por lo que se necesitaba una nueva arquitectura de referencia. Más tarde, esta arquitectura se llegó a conocer como modelo TCP/IP . Tanenbaum , A. S. Redes de Computadoras. Pearson Prentice Hall. P.p 41-44.

11. Modelo de referencia TCP/IP (2) Tanenbaum , A. S. Redes de Computadoras. Pearson Prentice Hall. P. 44.

12. La capa de aplicación (TCP/IP) Arriba de la capa de transporte está la capa de aplicación . Contiene todos los protocolos de nivel más alto. Los primeros incluyeron una terminal virtual (TELNET), transferencia de archivos (FTP) y correo electrónico (SMTP). Con el tiempo, se han agregado muchos otros protocolos: DNS (Sistema de Nombres de Dominio) para la resolución de nombres de host en sus direcciones de red; HTTP, para las páginas de WWW, y muchos otros. Tanenbaum , A. S. Redes de Computadoras. Pearson Prentice Hall. P. 44.

13. Sistemas Distribuidos basados en Web El WWW se puede ver como un gran sistema distribuido que consiste de millones de clientes y servidores para acceder documentos interconectados. Los servidores contienen colecciones de documentos, y los clientes proveen a los usuarios una interfaz sencilla para acceder esos documentos. El Web comenzó como un proyecto en el CERN, el Laboratorio Europeo de Física de Partículas en Génova, para permitir a sus investigadores accesar documentos compartidos usando un sistema simple de hipertexto. El Web creció gradualmente, pero su popularidad creció notablemente cuando se desarrolló la interfaz de usuario. Tanenbaum A.S., Van Steen , M., Distributed Systems Principles and Paradigms . Pearson Prentice Hall. Pp 545-547.

14. Sistemas Web Tradicionales Muchos sistemas Web usan arquitectura cliente-servidor. Un cliente interactúa con servidores Web por medio de una aplicación conocida como navegador . Un navegador es responsable de desplegar apropiadamente un documento, y acepta entradas del usuario (datos, instrucciones…). La comunicación se realiza con HTTP ( HyperText Transfer Protocol ). Tanenbaum A.S., Van Steen , M., Distributed Systems Principles and Paradigms . Pearson Prentice Hall. Pp 545-547.

15. Organización de un sistema Web tradicional Tanenbaum A.S., Van Steen , M., Distributed Systems Principles and Paradigms . Pearson Prentice Hall. Pp 545-547.

16. Aplicación Web DTD, XML XML con PHP XSL, XSLT

17. XML eXtensible Markup Language Es un lenguaje de etiquetado extensible, juega un papel fundamental en el intercambio de gran variedad de datos. Similar a HTML, pero su función es describir datos y no mostrarlos como HTML. XML sirve para estructurar, almacenar e intercambiar información. http://www.w3c.es/Divulgacion/GuiasBreves/TecnologiasXML

18. Ejemplo de una nota http://www.w3schools.com/xml/default.asp

19. Ejemplo de un menú http://www.w3schools.com/xml/default.asp

20. Tarea Hacer resumen de la Sintaxis de XML. Enlaces sugeridos: http://www.w3schools.com/xml/xml_syntax.asp http://aprende-web.net/progra/xml/xml_1.php http://www.tutorialspoint.com/es/xml/xml_syntax.htm Hacer resumen de la Sintaxis de XSL.

21. Ejercicio Cree un XML que represente la información de un Edificio. Cree el DTD del mismo XML.

22. Tecnologías XML: XPath Xpath : Lenguaje de rutas XML, permite acceder a partes de un documento XML. XML ejemplo: Toma todos los elementos titulo dentro del elemento capítulo: “ / doc /capitulo/titulo” <? xml version ="1.0" encoding ="ISO-8859-1"?> <libro> <titulo></titulo> <capitulo> <titulo></titulo> < seccion > <titulo></titulo> </ seccion > </capitulo> </libro> http://www.w3schools.com/xsl/xpath_syntax.asp

23. Definición de Tipo de Documento DTD DTD: Es una definición de tipo de documento. Un DTD define la estructura y los elementos y atributos legales de un documento XML. Es decir, un DTD define las reglas que debe seguir un documento XML. Definición interna. http://www.w3schools.com/xml/xml_dtd_intro.asp

24. Definición externa DTD Contenido del documento “note.dtd” Archivo XML http://www.w3schools.com/xml/xml_dtd_intro.asp

25. Elementos DTD (1) En DTD, los elementos se declaran con la palabra “ELEMENT”, con la siguiente sintaxis: Los elementos vacíos se declaran con EMPTY: http://www.w3schools.com/xml/xml_dtd_elements.asp

26. Elementos DTD (2) Elementos con texto datos de carácter analizada (PCDATA, parsed carácter data): Elementos con cualquier contenido:

27. Elementos DTD (3) Elementos con secuencias de hijos: Declarando sólo una ocurrencia de un elemento:

28. Elementos DTD (4) Mínimo UNA ocurrencia: CERO o MÁS ocurrencias:

29. Tecnologías XML: XSL, XSLT ( EXtensible Stylesheet Language ) XSL: Lenguaje Extensible de Hojas de Estilo, muestra cómo debería estar estructurado el contenido. XSLT: “XSL Transformations ” o “transformaciones.” Ver ejemplo en línea: http://www.w3schools.com/xsl/ http://www.w3schools.com/xsl/

30. XSL: Lenguaje Extensible de Hojas de Estilo < xsl:template match="/"> : se usa para crear plantillas. “match” es un atributo que se usa para asociar un Elemento del XML a la plantilla. En este caso, match="/“ se asocia a la raíz del XML. < xsl:value-of >: Se usa para leer el contenido de un nodo. < xsl:for-each select =" catalog /cd">…</ xsl:for-each >: Se usa para seleccionar cada Elemento XML de un conjunto de nodos.

31. Ejemplo XML: <? xml version ="1.0" encoding ="UTF-8"?> < catalog > <cd> < title > Empire Burlesque </ title > < artist >Bob Dylan</ artist > <country>USA</country> < company >Columbia</ company > < price >10.90</ price > < year >1985</ year > </cd> <cd> < title > Hide your heart </ title > < artist >Bonnie Tyler</ artist > <country>UK</country> < company >CBS Records</ company > < price >9.90</ price > < year >1988</ year > </cd> </ catalog > http://www.w3schools.com/xsl/xsl_for_each.asp

32. Ejemplo XSLT: http://www.w3schools.com/xsl/xsl_for_each.asp

33. Utilizando XML y XSLT para generar HTML En un script del lado del servidor, se puede generar HTML utilizando información en XML y una hoja de estilo XSLT XML SCRIPTING LANGUAGE XSLT HTML

34. Generando HTML con XSLT y PHP La clase XSLTProcessor de PhP contiene métodos para aplicar la hoja de estilo XSLT al documento XML para generar HTML Nota: Se debe instalar la extensión de XSL, editando el archivo php.ini y quitando el punto y coma de la siguiente línea Después se debe reiniciar el servidor ;extension=php_xsl.dll http://www.w3webtutorial.com/php/php-xsl-xslt.php http://php.net/manual/es/class.xsltprocessor.php

35. Ejemplo http://www.w3webtutorial.com/php/php-xsl-xslt.php

36. Ejercicio “Libros” (1) Plantillas vacías o no existentes. Si no hay plantillas, el procesador simplemente extrae el texto contenido por los nodos. Si hay una plantilla vacía, el procesador sustituye el nodo y todos sus subelementos por nada y no extrae el texto contenido por ese nodo o sus subelementos. Raíz sin definición Autor definición vacía, Título sin definición Raíz definición vacía http://www.mclibre.org/consultar/xml/lecciones/xml_xslt.html

37. Ejercicio “Libros” (2) Generando frases a partir del contenido de los nodos. Combinando elementos de XSL y HTML se puede generar contenido HTML aumentado. Ejemplo generandofrases.xslt

38. Ejercicio “ IESAbastos ” (1) Dado el siguiente documento XML, escriba las hojas de estilo XSLT que devuelvan la respuesta deseada. Párrafos Lista Tabla http://www.mclibre.org/consultar/xml/ejercicios/xslt_1.html#ejercicio-3

39. Ejercicio “ IESAbastos ” (2)

40. Ejercicio “ IESAbastos ” Párrafos

41. Ejercicio “ IESAbastos ” Lista

42. Ejercicio “ IESAbastos ” Tabla