Desarrollo de Aplicaciones Web. Introducción al Web

Tamaño: px

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

Download "Desarrollo de Aplicaciones Web. Introducción al Web"

Vicente Ríos Salas
hace 8 años
Vistas:

1 Desarrollo de Aplicaciones Web Introducción al Web

2 Tendencias del Web Redes - Internet Las redes permiten a los computadores comunicarse unos con otros Pueden tener diferentes tipologias Durante la guerra fria los militares estadounidenses daban dinero a las univeridades para desarrollar redes que sobrevivieran a un ataque nuclear

tipologias Durante la guerra fria los militares estadounidenses daban

3 Tendencias del Web Redes - Internet

4 Tendencias del Web Redes - Internet Una red con routes distribuidos entre puntos tiene mayor supervivencia a ataques

5 Tendencias del Web Redes - Internet La red debía ser capaz de encontrar dinámicamente los routers para ir de un punto a otro y transmitir los datos El resultado fue una red descentralizada de redes que no le pertenece a nadie INTERNET

a otro y transmitir los datos El resultado fue una red

6 Tendencias del Web Protocolos de red Se desarrollan protocolos para transferir información FTP Permite a los usuarios enviarse mensajes entre ellos File Transfer Protocol Telnet Permite a los usuarios entrar en sus computadores de forma remota

enviarse mensajes entre ellos File Transfer Protocol Telnet

7 Hyper Text Transfer Protocol Protocolo creado en los 90s Permite que información publica sea transferida para ser fácilmente leída Fue desarrollado para describir el contenido del documento

8 Que sucede cuando vemos una pagina Web? Navegador Link Red Servidor Archivo HTML Red Archivos de imágenes Navegador

9 Que sucede cuando vemos una pagina Web? Navegador Muestran las paginas Web

10 Que sucede cuando vemos una pagina Web? Link En un navegador podemos Dar clic en un link en la pagina web actual Tipear un URL de una pagina ( c ) Red El requerimiento de los datos del URL es ruteado a través del Internet hasta que se encuentre una ruta hacia el Servidor Web

Tipear un URL de una pagina (http://www.fiec.espol.edu.

11 Que sucede cuando vemos una pagina Web? Servidor Web Acepta el requerimiento del navegador Usa el URL para determinar quien quiere que para luego obtenerlo

12 Que sucede cuando vemos una pagina Web? Red El archivo requerido es enviado a través de la red al navegador o cliente que lo solicitó El navegador interpreta el HTML y renderiza la pagina acorde a las instrucciones.

13 Que sucede cuando vemos una pagina Web? Imágenes Si la pagina Web que fue solicitada contiene imágenes, el navegador envia el requerimiento al servidor para obtener las imágenes Cuando las imágenes le llegan al cliente, el navegador puede insertarlas en la pagina Formatos de imágenes GIF JPEG PNG Graphics Interchange Format Joint Photographic Experts Group Portable Network Graphics

requerimiento al servidor para obtener las imágenes Cuando las imágenes le llegan al cliente,

14 Ejemplo HTML: Pagina Basica Tags o etiquetas limitadas por < y > Usualmente los tags se encuentran en pares Todo el contenido debe aparecer dentro del tag body <html> <head> <title></title> </head> <body> Hola mundo </body> </html>

el contenido debe aparecer dentro del tag body <html>

15 Ejemplo HTML: Bold / Italics Tags o etiquetas limitadas por < y > Usualmente los tags se encuentran en pares Todo el contenido debe aparecer dentro del tag body <html> <head> <title></title> </head> <body> Hola mundo <br/> <b>desarrollo</b>de <i>aplicaciones Web</i> </body> </html>

aparecer dentro del tag body <html> <head> <title></title> </head>

16 Ejemplo HTML: Link Tags o etiquetas limitadas por < y > Usualmente los tags se encuentran en pares Todo el contenido debe aparecer dentro del tag body <html> <head> </head> <body> <title></title> Hola mundo <br/> <b>desarrollo</b>de <i>aplicaciones Web</i> <a href= >FIEC</a> </body> </html>

<head> </head> <body> <title></title> Hola mundo <br/> <b>desarrollo</b>de

17 Ejemplo HTML: Titulos Tags o etiquetas limitadas por < y > Usualmente los tags se encuentran en pares Todo el contenido debe aparecer dentro del tag body <html> <head> </head> <body> <title></title> Hola mundo <br/> <b>desarrollo</b>de <i>aplicaciones Web</i> <a href= >FIEC</a> </body> </html>

<html> <head> </head> <body> <title></title> Hola mundo <br/>

18 Ejemplo HTML: imágenes <html> <head> </head> <body> <title></title> <h1>ejemplo imagen</h1> <img src= imagen.jpg width= 50 height= 50 alt= tooltipo imagen /> </body> </html>

19 Ejemplo HTML: listas <html> <head> <title></title> </head> <body> <h1>ejemplo Listas</h1> Listas: <ol> <li>item1</li> <li>item2</li> <li>item3</li> </ol> </body> </html> <html> <head> <title></title> </head> <body> <h1>ejemplo Listas</h1> Listas: <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </body> </html>

</body> </html> <html> <head> <title></title> </head> <body> <h1>ejemplo

20 Taller 1 -- HTML Crear su pagina HTML que contenga: Su nombre como titulo de la pagina Su Fotografia o el link a una imagen Una lista ordena con sus pasatiempos Una lista de sus 3 comidas favoritas Pizza Hawaiiana Napolitana Hamburguesas Frutas Manzana Durazno Pera

ordena con sus pasatiempos Una lista de sus 3 comidas favoritas

21 Taller 2 -- HTML Crear su pagina HTML que contenga la siguiente lista: Titulo: Carreras ESPOL Titulo de encabezado: FIEC Contenido: Una lista como la que se muestra a continuación ICHE FIEC 1. Electrónica y telecomunicaciones 2. Telemática 3. Ciencias computacionales Sistemas tecnológicos Sistemas de Información Sistemas multimedia 4. Eléctrica industrial 5. Potencia FIMCP

22 Entidades HTML

23 Taller 3 -- HTML Crear una nueva pagina (index.html) en la que se incluyan links a los talleres 1 y 2 En las paginas de los talleres 1 y 2 incluir un link que diga regresar y lo devuelva a la pagina index.html

24 TENDENCIAS EN EL WEB Introducción al Web

25 Tendencias del Web Aplicaciones ricas para el Web Entorno estático, con páginas en HTML Pocas actualizaciones Ninguna interacción con el usuario Web 2.0 conference Dale Dougherty de O Reilly Media Craig Cline de MediaLive

26 Tendencias del Web Web 2.0 Aplicaciones web que facilitan el compartir información Interoperabilidad entre aplicaciones Diseño centrado en el usuario Colaborativas

27 Tendencias del Web Web Características La web es la plataforma La información es lo que mueve al Internet Efectos de la red movidos por una arquitectura de participación. La innovación surge de características distribuidas por desarrolladores independientes. El fin del círculo de adopción de software pues tenemos servicios en beta perpetuo

28 Tendencias del Web Web Ejemplos Web 1.0 > Web 2.0 Doubleclick > Google AdSense (Servicios Publicidad) Ofoto > Flickr (Comunidades fotográficas) Akamai > BitTorrent (Distribución de contenidos) mp3.com > Napster (Descargas de música) Britannica Online > Wikipedia (Enciclopedias) Sitios personales > Blogs (Páginas personales) Especulación con dominios > Optimización en motores de búsqueda SEO Páginas vistas > Costo por click CMSs > Wikis (Administradores de contenidos) Categorías/Directorios > Tags

29 Tendencias del Web Web Ejemplos Comunidades web Redes sociales Wikis Folcsonomía

30 Tendencias del Web Web Ejemplos Ejemplo Servicios Web Blogs Alojamiento de videos

Combinación de servicios Uno de los pilares de la Web 2.

31 Tendencias del Web Mashups Es una aplicación web que utiliza recursos de mas de una fuente para crear un servicio completo. Combinación de servicios Uno de los pilares de la Web 2.0 Empresas que apuestan por los mashups Google API Google Maps ebay, Microsoft con Windows Live, Yahoo!, Youtube, Flickr o Amazon.com

32 Mashup Arquitectura Arquitectura 3 capaz Presentacion: Interfaz de usuario del mashup HTML/XHTML, CSS, Javascript, Asynchronous Javascript and Xml (Ajax) Web Services API de servicios que dan acceso a la funcionalidad Datos XMLHTTPRequest, XML-RPC, JSON-RPC, SOAP, REST. Envío, almacenamiento y recepción de datos XML, JSON, KML.

33 Ejemplos Mashups

34 Ejemplos Mashups

35 Ejemplos Mashups (Web Map Service WMS)

36 Ejemplos Mashups

37 Tendencias del Web Web programable

Documentos relacionados

Introducción a la Web 2.0

Introducción a la Web 2.0 Octubre 2006 Contenidos Evolución Características Tecnologías Protocolos básicos HTML y CSS Javascript y DOM XML y Servicios Web AJAX Ejemplos Evolución del Hipertexto 1945 - Vannevar Bush escribe As we