Introducción a las Aplicaciones Web

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Introducción a las Aplicaciones Web"

María Nieves Sosa Ortega
hace 8 años
Vistas:

1 Departamento de Lenguajes y Sistemas Informáticos Arquitectura e Integración de Sistemas Software Introducción a las Aplicaciones Web Tema 1 Arquitectura e Integración de Sistemas Software Curso 2012/2013 1

Introducción a las Aplicaciones Web Tema 1 Curso

2 Introducción Una aplicación web es una aplicación informática distribuida cuya interfaz de usuario es accesible desde un cliente web, normalmente un navegador web. Servidor web 2

3 Introducción Las aplicaciones web son muy populares debido a que: Se puede ofrecer la aplicación a miles de usuarios sin necesidad de instalar software a cada uno de ellos. Son aplicaciones multiplataforma independientes del sistema operativo. Parte del procesamiento se hace en el servidor por lo que los clientes web no necesitan ser muy potentes. Facilitan el trabajo colaborativo y distribuido. 3

Son aplicaciones multiplataforma independientes del sistema operativo.

4 Uniform Resource Locator (URL) Los clientes solicitan páginas al servidor indicando su URL. Cliente web Las URL son cadenas de caracteres que se usan para identificar y localizar recursos en Internet. URL = PROTOCOLO NOMBRE HOST RUTA RECURSO HypertText Transfer Protocol (HTTP) Cliente y servidor intercambian datos mediante HTTP, el protocolo de aplicación estándar usado para la comunicación en la Web. Petición HTTP Respuesta HTTP Cliente web Servidor web Sigue el esquema petición respuesta entre un cliente y un servidor. 4

html PROTOCOLO NOMBRE HOST RUTA RECURSO HypertText Transfer Protocol (HTTP) Cliente y servidor intercambian datos mediante HTTP, el protocolo de

5 Mensajes HTTP Cabecera (Header) Origen y destino Longitud del mensaje Formatos soportados Idioma esperado Etc. Cuerpo (Body) Contenido del mensaje Mensajes HTTP Ejemplo Código de respuesta HTTP/ OK Date: Sun, 18 Oct :56:53 GMT Server: Apache/ Last Modified: Sat, 20 Nov :16:26 GMT ETag: " a5 2c 3e94b66c2e680" Accept Ranges: bytes Content Length: 44 Connection: close Content Type: text/html <html><body> <a href= >Go to next step</a></h1> </body></html> Cabecera Cuerpo Hiperenlace a otro recurso 5

1 200 OK Date: Sun, 18 Oct 2009 08:56:53 GMT Server: Apache/2.2.14 Last Modified: Sat, 20 Nov 2004 07:16:26 GMT ETag: "10000000565a5 2c

6 Hiperenlaces Los hiperenlaces proporcionados por el servidor en cada respuesta permiten al cliente ir de una página a otra. El cliente (ej. navegador) procesa la información recibida en el mensaje HTTP y se la muestra al usuario. Cliente web HTTP/ OK Content-Type: text/html; charset = UTF-8 HTML + CSS + JavaScript Servidor web La información recibida por el cliente suele ser: Datos en formato HTML. Datos de estilo en formato CSS. Scripts ejecutables en JavaScript. 6

7 HypertText Markup Language (HTML) HTML es el lenguaje estándar para el desarrollo de contenidos web. Su funcionamiento se basa en el uso de etiquetas para definir la estructura y el contenido de las páginas. <!DOCTYPE html> <html> <head> <title>aiss HTML Example</title> </head> <body> <h1>my first AISS class</h1> <p>aiss is my favourite subject.</p> </body> </html> HTML se utiliza para definir el contenido de una página pero no su formato (colores, tamaño, etc.) Cascade Style Sheet (CSS) Las hojas de estilo en cascada (CSS) son un lenguaje para definir la presentación de un documento Web: colores, tamaños, posición, etc. Se definen de forma separada a las páginas HTML para reducir el acoplamiento y reducir el esfuerzo de mantenimiento. <!DOCTYPE html> <html> <body> <h1>heading</h1> <p>ordinary paragraph</p> <p class="ex">paragraph with class="ex"</p> </body> </html> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} 7

DOCTYPE html> <html> <head> <title>aiss HTML Example</title> </head> <body> <h1>my first AISS class</h1> <p>aiss is my favourite subject.

8 JavaScript JavaScript es un lenguaje de programación que permite añadir dinamismo y funcionalidad a los documentos web. Los scripts son interpretados en el navegador. Aunque su sintaxis puede recordar a la de Java son lenguajes con semánticas y propósitos diferentes. Se suele utilizar para: Añadir dinamismo a las páginas web: ventanas emergentes, menús desplegables, etc. window.alert( I love AISS! ); Se suele utilizar para: Integración de aplicaciones. JavaScript Validación de formularios en cliente. 8

Aunque su sintaxis puede recordar a la de Java son lenguajes con semánticas y propósitos diferentes.

9 Lenguajes de programación del lado del servidor Es habitual que el servidor tenga que hacer algún procesamiento previo antes de enviar los datos al cliente (ej. consultar una base de datos). Para ello se utilizan los lenguajes de programación en el lado del servidor como PHP, JSP, ASP.NET, etc. Petición HTTP Respuesta HTTP PHP, JSP, ASP.NET, PERL... BD HTML + CSS + JavaScript XML JSON 9

Para ello se utilizan los lenguajes de programación en el lado del servidor como PHP, JSP, ASP.

10 Lenguajes de intercambio de datos extensible Markup Language (XML) Se utiliza para crear lenguajes de marcado con estructura jerárquica. Es ampliamente usado para el intercambio de información estructurada entre diferentes plataformas. Existen multitud de parsers para procesar documentos escritos en este lenguaje. XHTML es una versión XML de HTML. Es más estricto que el lenguaje HTML convencional lo que facilita su procesamiento. Lenguajes de intercambio de datos extensible Markup Language (XML) 10

Existen multitud de parsers para procesar documentos escritos en este lenguaje. XHTML es una versión XML de HTML.

11 XML JSON Lenguajes de intercambio de datos JavaScript Object Notation (JSON) Es un formato ligero para el intercambio de datos en la Web. Es un subconjunto de la notación literal de objetos de JavaScript. Su simplicidad hace que su uso se haya extendido como formato para el intercambio de datos en la Web. Ejemplo de wikipedia 11

Es un subconjunto de la notación literal de objetos de JavaScript.

12 Lenguajes de intercambio de datos XML vs JSON Lenguajes de intercambio de datos XML vs JSON Pros y contras de XML y JSON? 12

13 Asynchronous JavaScript And XML (AJAX) No es un lenguaje. Es un uso concreto de JavaScript. Se utiliza para cargar contenido en una página en segundo plano (de forma asíncrona) sin necesidad de recargar la página completa. Petición HTTP Respuesta HTTP (página completa) Cliente web Petición HTTP AJAX (asíncrona) Respuesta HTTP (datos solicitados) Servidor web 13

necesidad de recargar la página completa.

14 Asynchronous JavaScript And XML (AJAX) Su uso es muy extendido para desarrollar aplicaciones enriquecidas (Rich Internet Applications). 14

15 Aplicaciones Web Híbridas (Mashups) Los mashups combinan datos y servicios proporcionados por terceros a través de APIs públicas. Aplicaciones Web Híbridas (Mashups) Algunos ejemplos: Precios de la vivienda en varios estados de EEUU (Craigslist + Google Maps). previsión meteorológica a 10 días en distintos países (Weather.com + Google Maps). Colecciones de Mashups com/

com/ Precios de la vivienda en varios estados de EEUU (Craigslist + Google Maps). http://woozor.

16 Application Programming Interface (API) Describen la forma de consumir programáticamente los servicios ofrecidos por una determinada aplicación. 16

17 Resumen Definición de aplicación web y sus principales ventajas. : Uniform Resource Locator (URL). Protocolo HTTP. Lenguaje HTML. Lenguaje CSS. Lenguaje JavaScript. Lenguajes de programación en el servidor. Formatos habituales para intercambio de datos en la Web: XML. JSON. Definición y ejemplos de AJAX. Definición de mashups. Ejemplos y directorios. Definición y ejemplos de APIs. 17

Lenguaje JavaScript. Lenguajes de programación en el servidor.

18 Enlaces Tutorial HTML Tutorial XHTML Tutorial CSS Tutorial JavaScript Tutorial AJAX 18

19 Enlaces Tutorial XML Colección de Mashups y APIs Disclaimer and Terms of Use All material displayed on this presentation is for teaching and personal use only. Many of the images that have been used in the presentation are Royalty Free images taken from h / Oh Other images have been sourced directly from the Public domain, from where in most cases it is unclear whether copyright has been explicitly claimed. Our intention is not to infringe any artist s copyright, whether written or visual. We do not claim ownership of any image that has been freely obtained from the public domain. In the event that we have freely obtained an image or quotation that has been placed in the public domain and in doing so have inadvertently used a copyrighted image without the copyright holder s express permission we ask that the copyright holder writes to us directly, upon which we will contact the copyright holder to request full written permission to use the quote or images. 19

Many of the images that have been used in the presentation are Royalty Free images taken from http://www.everystockphoto.com/.

Documentos relacionados

Consumo de Servicios RESTful (II)

Departamento de Lenguajes y Sistemas Informáticos Consumo de Servicios RESTful (II) Práctica 6 Arquitectura e Integración del Software Curso 2012/2013 Índice Introducción Consumo de servicios RESTful con