Parte Mitos acerca del desarrollo web. Sylvain Hallé Ÿ 8GIF128 Diseño y programación web

Transcripción

1 Parte 1 0. Mitos acerca del desarrollo web

2 Mito Mito #1: No hay mucho de decir acerca de la manera de escribir una página web.

3 Ejemplo de aplicación web Microsoft Office Live

4 Mito Mito#2: Hay software que nos permite de escribir páginas web. WordPress

5 Mito Mito#3: Para mi trabajo, conocer las tecnologías del web no es tan importante que de conocer los verdaderos linguajes de programación.

6 Ejemplos de aplicaciones web eyeos

7 Ejemplos de aplicaciones web Chrome OS

8 Parte 1 I. Los origenes de Internet y de la web

9 Qué es Internet? Según Ted Stevens (senador republicano, Alaska), Internet es «una serie de tubos»... Ted Stevens W...George W. Bush hablaba de «los Internets» Más seriosamente...

10 Qué es Internet? Internet Red fisíca religando miliónes de ordenadores que utilisan los mismos protocoles para intercambiar y transmitir información (TCP/IP) En realidad, es una «red de redes» Router Ejemplo de aplicación Internet: . Podéis nombrar otras?

11 Historia de Internet Origen: la guerra fría (años 60-70) Le ministerio de la defense norteamericano imagina una red llamada ARPANET

12 Historia de Internet Objectivo: religar los grandes ordenadores del país para sobrevivir a una ataque atomica Topologías estudiadas Cuál ha sido elegida? ARPANET en sept. 69

13 Historia de Internet ARPANET en sept. 71

14 Historia de Internet ARPANET en oct. 80

15 Historia de Internet Protocolo «universal» : Telnet. Nos permite de intercambiar instrucciones con una ventana de terminal ( texto!)

16 Historia de Internet Uno de los primeros servicios: Enviar un protocolo SMTP dentro una sesión Telnet Uno de los primeros s enviados con los cabecillas típicas

17 Historia de Internet Para leer los mensajes: protocolo POP(3) dentro de una sesión... Telnet! þ Access your without an client

18 Historia de Internet Otro servicio: File Transfer Protocol (FTP)... todavía en un terminal!

19 Historia de Internet 1991: invención del protocolo Gopher Página con una jararquía de sub-páginas

20 Historia de Internet Gopher functiona todavía! Escribid: gopher://gopherproject.org/ en vuestro browser y ved lo que hace...

21 Historia de Internet Invención del World Wide Web alrededor de Tim Berners-Lee Noción de hypertexto: un documento puede contenir enlaces hacia otros documentos ubicados en otros servidores

22 Historia de Internet La noción de hypertexto se remonte en hecho a Vannevar Bush ( )...el memex de Vannevar Bush

23 Historia de Internet

24 Historia de Internet 1992: Mosaic es el primero browser gráfico popular Las páginas poden mezclar texto formatado y imagenes con un lenguaje llamado HyperText Markup Language (HTML)

25 Historia de Internet Netscape 1.0 en 1994

26 Historia de Internet Amazon.com en 1995 (Try the )

27 El web moderno Número de sitios Crecimiento del web desde 1995

28 - Primero objetivo: reparto de la informacíon Aspectos clabes de Internet - Las sub-redes son autónomas (ej.: estudiante de UQAC que envie un a un otro estudiante de UQAC) - Los ordenadores pueden entrar/salir de la red de manera dinámica - Construido alrededor de estandares abiertos - Casi no control centralizado - Toda la gente puede utilizarlo con programas simples y asequibles. - Internet World Wide Web! Internet = hardware (+ unos protocolos básicos) WWW = software + datos (+ documentos)

29 Protocolo simple para enviar datos entre dos ordenadores Cada host tiene una dirección IP: un número de 32 bits (IPv4) o de 128 bits (IPv6) único Una dirección (v4) se escribe en la forma de 4 números de 8 bits (entre 0 y 255) Ex.: Protocolo IP Buscad vuestra dirección IP: whatismyip.com ipconfig o ifconfig en un terminal

30 Protocolo IP El ICANN (Internet Corporation for Assigned Names and Numbers) da bloques de direcciones IP a organizaciones, que son responsables de atribuirlos Bloque de clase A: A.xxx.xxx.xxx, donde 0 < A < 127. Ej.: 18.x.x.x = MIT; 13.x.x.x = Xerox; 96.x.x.x = ARIN (American Registry for Internet Numbers), subcontratista norteamericano encargado de redistribuir estas direcciones (ej.: Vidéotron) Bloque de clase B: B1.B2.xxx.xxx, donde 127 < B1 < 192. Ej.: : Université Laval; : UQAC Bloque de clase C: C1.C2.C3.xxx, donde 191 < C1 < 255

31 Protocolo IP

32 Protocolo TCP Funciona «por encima» IP; añade multiplexing y el garantizado de los mensajes reparto Multiplexing: permite a varias aplicaciones de utilizar la misma dirección IP - Puerto = número dado a cada programa o servicio - Puerto 80: browser web (HTTP) - Puerto 25: (SMTP) - Puerto 23: Telnet - Puerto 70: Gopher - etc. Unas aplicaciones utilizan UDP (más simple) en lugar de TCP

33 Domain Name System (DNS) Un servidor DNS establece una correspondencia entre un nombre de dominio (domain name) y una dirección IP! El resolver envíe la consulta al servidor DNS especificado en la configuración del sistema (a menudo el del provider)...!...que puede contactar otros servidores DNS, hasta que obtiene la dirección buscada moodle.uqac.ca DNS resolver (red) DNS resolver (sistema)

34 Domain Name System (DNS) El resolver pue las entradas en un cache (tipicamente 60 sec.)

35 Unas organizaciones importantes World Wide Web Consortium Internet Engineering Task Force Internet Corporation for Assigned Names and Numbers Define los estandares como HTML, CSS Define los protocolos como IP, SMTP Atribue los nombres de dominios

36 Un ordenador que ejecuta un software especial, que escuche las consultas del puerto TCP 80 Softwares de servidor web populares: Apache Servidor web disponible en Windows XP

37 Un software que mostra páginas web (y las recupera de los servidores) Browsers populares: Browser

38 Elementos de navigación comunes a la mayoría de los browsers: Browser

39 Unos browsers especializados Browser en modo texto ( Gopher) No JavaScript, no imagenes = seguro + rápido Lo que Lynx ve = lo que un search engine ve Una página que se muestra mal en Lynx= una página mal

40 Unos browsers especializados Dillo Imagenes y CSS básicas Solo browser disponible en unas pequeñas distribuciones de Linux

41 HyperText Transfer Protocol (HTTP) El conjunto de las consultas que un browser envie y que un servidor web comprende Unas consultas HTTP (el browser los envía): - GET file: descargar un documento - POST file: enviar el contenido de un formulario - PUT file: upload Es posible de simular el browser con una conexión... Telnet! $ telnet example.com 80 Trying Connected to ( ). Escape character is '^]'. GET /beatles.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML "> <html>...

42 Un identificador para la dirección de un documento en un sitio web Ejemplo: Uniform Resource Locator (URL) Podéis identificar las tres partes del URL?

43 El descargamiento de una página

44 El descargamiento de una página Bee G Beatles Camel Caravan

45 El descargamiento de una página Preguntamos al browser la página identificada por un URL Bee G Beatles Camel Caravan

46 El descargamiento de una página El browser pregunta al DNS la dirección IP de este servidor example.com Servidor DNS

47 El descargamiento de una página Servidor DNS 3. El DNS respuesta al browser

48 El descargamiento de una página HTTP GET /artistes/beatles.html Port El browser abre una conexión TCP con el servidor web (port 80) y envia una consulta HTTP GET con el URL de la página

49 El descargamiento de una página El servidor respuesta con el contenido de la página preguntada beatles.html

50 El descargamiento de una página El browser muestra la página recibida <html>... <h1>results for Beatles</h1>... </html> beatles.html

51 El descargamiento de una página Wireshark permite de grabar las conexiones TCP de un ordenador y de analizarlas

52 Cuando la página preguntada existe, el servidor respuesta a la consulta con un mensaje que empeza por 200 OK pero si la página no existe? La respuesta del servidor empeza por 404 Not Found De hecho, hay una variedad de respuestas possibles definidas en el protocolo HTTP: þ Lista de los códigos HTTP El descargamiento de una página Qué paso si el browser recibe la siguiente respuesta? HTTP/ Moved Permanently Location:

53 Unas tecnologías de programación web HyperText Markup Language (HTML): especifica la estructura de las páginas Cascading Stylesheets (CSS): especifica la presentación de las páginas JavaScript: permite de programar páginas interactivas PHP Hypertext Processor (PHP): permite al servidor de crear páginas dinámicas Structured Query Language (SQL): interactua con una base de datos Asynchronous JavaScript and XML (AJAX): permite de descargar documentos web en el segundo plano

54 Para concluir El World Wide Web es una combinación de protocolos y de tecnologías basados en las redes: - TCP/IP (conexión, destinación, puerto) - DNS (nombre de dominio) - HTTP (consultas) - URL Servidor web = ordenador que escuche las consultas en el puerto TCP 80 Browser = comunica con servidores para obtener y mostrar páginas Para la próxima vez: instalar Firefox ( si no ya lo tenéis!)