Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)

  • 1,776 views
Uploaded on

Esta presentación corresponde al "Tema 1: Introducción" de la asignatura "Desarrollo de Aplicaciones Web" de 3º del Grado en Ingeniería del Software de la ETSII en la Universidad Rey Juan Carlos.

Esta presentación corresponde al "Tema 1: Introducción" de la asignatura "Desarrollo de Aplicaciones Web" de 3º del Grado en Ingeniería del Software de la ETSII en la Universidad Rey Juan Carlos.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,776
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
102
Comments
2
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DESARROLLO DE APLICACIONES WEB - TEMA 1 Introducción a las aplicaciones web Micael Gallego Correo: micael.gallego@urjc.es Twitter: @micael_gallego Blog: http://micaelgallego.github.io ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA INFORMÁTICA DEPARTAMENTO DE CIENCIAS DE LA COMPUTACIÓN
  • 2. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción • Evolución histórica de la web • Navegadores y servidores web • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 2
  • 3. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción  Internet  World Wide Web  Página web  Sitio web  Aplicación web • Evolución histórica de la web • Navegadores y servidores web • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 3
  • 4. INTRODUCCIÓN A LAS APLICACIONES WEB Introducción • Para comprender qué es una aplicación web hay que conocer las tecnologías básicas en las que se apoya y su origen histórico  Internet: Una red de ordenadores mundial  World Wide Web: Un conjunto de protocolos, tecnologías y convenciones desarrolladas sobre Internet  Página web: Documento en formato HTML, con hiperenlaces, que se puede descargar desde un servidor web y se visualiza en un navegador web  Sitio web: Conjunto de páginas web, con contenido relacionado, identificados con la misma URL  Aplicación web: Aplicación informática completa con acceso vía web Tema 1 - Introducción a las aplicaciones web 4
  • 5. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción  Internet  World Wide Web (la web)  Página web  Sitio web  Aplicación web • Evolución histórica de la web • Navegadores y servidores web • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 5
  • 6. INTRODUCCIÓN Internet • Internet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP • Funciona como una red lógica única, de alcance mundial, aunque esté formada por multitud de redes físicas heterogéneas • Sus orígenes se remontan a 1969, cuando se estableció la primera conexión de computadoras, conocida como ARPANET, entre tres universidades en California y una en Utah, Estados Unidos Tema 1 - Introducción a las aplicaciones web 6
  • 7. INTRODUCCIÓN Internet • Uno de los servicios que más éxito ha tenido en Internet ha sido la World Wide Web (WWW, o “la Web”) • Es habitual la confusión entre ambos términos por gente no experta • La web (1990) es un conjunto de protocolos, estándares y tecnologías, basadas en Internet, diseñado originalmente para la consulta remota de información en archivos de hipertexto Tema 1 - Introducción a las aplicaciones web 7
  • 8. INTRODUCCIÓN Internet • Existen muchos otros servicios y protocolos en Internet:  Envío y recepción de correo electrónico (POP3, IMAP, SMTP)  Transmisión de archivos (SSH, FTP, P2P, HTTP)  Mensajería instantánea (IRC, XMPP)  Transmisión de contenido multimedia (VoIP, IPTV, RTP)  Conexión remota por consola (SSH, Telnet)  Conexión remota gráfica (VNC) http://es.wikipedia.org/wiki/Internet Tema 1 - Introducción a las aplicaciones web 8
  • 9. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción  Internet  World Wide Web (la web)  Página web  Sitio web  Aplicación web • Evolución histórica de la web • Navegadores y servidores web • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 9
  • 10. INTRODUCCIÓN World Wide Web (la web) • World Wide Web se traduce como telaraña mundial y su acrónimo es www • Actualmente se denomina coloquialmente como “la web” y su acrónimo está en desuso (incluso en las URLs) • La web es un sistema de distribución de información basado en hipertexto enlazados y accesibles a través de Internet • Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que pueden contener texto, imágenes, vídeos u otros contenidos multimedia, y navega a través de ellas usando hiperenlaces Tema 1 - Introducción a las aplicaciones web 10
  • 11. INTRODUCCIÓN World Wide Web (la web) • La Web fue creada alrededor de 1989 por Tim Berners-Lee y Robert Cailliau mientras trabajaban en el CERN • Se publicó en 1992 Robert Cailliau Tim Berners-Lee Tema 1 - Introducción a las aplicaciones web 11
  • 12. INTRODUCCIÓN World Wide Web (la web) • Un navegador web que visualiza las páginas web que descarga desde un servidor web • Las páginas web tienen formato HTML y CSS, tienen enlaces a otras páginas y a contenido multimédia (imágenes, vídeos, audio) • El protocolo con el que se comunican el cliente y el servidor es el Hiper Text Transfer Protocol (HTTP) • Las páginas se identifican con un nombre único llamado coloquialmente dirección web (URL) http://es.wikipedia.org/wiki/World_Wide_Web Tema 1 - Introducción a las aplicaciones web 12
  • 13. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción  Internet  World Wide Web (la web)  Página web  Sitio web  Aplicación web • Evolución histórica de la web • Navegadores y servidores web • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 13
  • 14. INTRODUCCIÓN Página web • Una página web es un documento electrónico adaptado a la web • Está diseñada para ser visualizado en un navegador web, que la descargará de un servidor web • Contiene texto, gráficos y contenido multimedia • Contiene hiperenlaces integrados en el texto que permiten al usuario navegar o acceder a diferentes páginas web relacionadas entre sí Tema 1 - Introducción a las aplicaciones web 14
  • 15. INTRODUCCIÓN Página web • Una página web generalmente es un fichero con extensión .html o .xhtml • Está escrita con formato de marcado textual HTML o XHTML • Puede contener información de estilos (colores, tipos de letra, distribución de elementos,…) en el formato CSS integrado en el propio documento o en un fichero diferente • Puede enlazar a imágenes en formato JPG o PNG http://es.wikipedia.org/wiki/Página_web Tema 1 - Introducción a las aplicaciones web 15
  • 16. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción  Internet  World Wide Web (la web)  Página web  Sitio web  Aplicación web • Evolución histórica de la web • Navegadores y servidores web • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 16
  • 17. INTRODUCCIÓN Sitio web • Un sitio web es una colección de páginas web relacionadas entre sí • El conjunto de páginas web que forman un sitio web suelen compartir la primera parte de la dirección web (el dominio)  http://www.urjc.es: Sitio web de la URJC  http://es.wikipedia.org: Sitio web de la wikipedia en Español http://es.wikipedia.org/wiki/Sitio_web Tema 1 - Introducción a las aplicaciones web 17
  • 18. INTRODUCCIÓN Sitio web • Tipos de sitios web  Web corporativas de empresas  Blogs, redes sociales  Páginas personales  Buscadores  Sitios de noticias  Enciclopedias  … Todas las actividades de la vida tiene su web Tema 1 - Introducción a las aplicaciones web 18
  • 19. INTRODUCCIÓN Sitio web • Terminología  En inglés, a un sitio web se lo denomina website  En castellano  La Real Academia de la Lengua prefiere traducir web por red, pero no es muy preciso  Muchas veces se utiliza Página web como sinónimo de Sitio web (p.e. Página web de la universidad)  En ocasiones se denomina web al sitio web (p.e. La web de la asignatura)  También se usa en ocasiones en término Portal para referirse a un sitio web [1] [1] http://es.wikipedia.org/wiki/Portal_(internet) Tema 1 - Introducción a las aplicaciones web 19
  • 20. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción  Internet  World Wide Web (la web)  Página web  Sitio web  Aplicación web • Evolución histórica de la web • Navegadores y servidores web • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 20
  • 21. INTRODUCCIÓN Aplicación web • En los comienzos de la web, todos los sitios web eran conjuntos de páginas web en forma de ficheros HTML • Los sitios web eran como libros pero con navegación mediante enlaces en vez de navegación secuencial • La edición de sitios web se realizaba con herramientas similares a la edición de documentos (p.e. Microsoft FrontPage) • A estas páginas se las denominaba páginas web estáticas Tema 1 - Introducción a las aplicaciones web 21
  • 22. INTRODUCCIÓN Aplicación web • Poco a poco las páginas empezaron a ser más dinámicas • En vez de ser ficheros .html en el disco, empezaban a ser pequeños programas que se ejecutaban cada vez que un usuario pedía una página • Inicialmente eran cambios mínimos (contador de visitas, fecha actual, cambiar la imagen de cabecera…) con lenguajes de script como PERL y PHP (principios de la década de los 90) • Pero pronto los cambios serían cada vez más profundos y las páginas web se convertirían en completas aplicaciones web Tema 1 - Introducción a las aplicaciones web 22
  • 23. INTRODUCCIÓN Aplicación web • Una aplicación web es aquella aplicación que los usuarios pueden utilizar accediendo a un servidor web a través de Internet mediante un navegador • Es una aplicación software que se implementa para que su interfaz de usuario se utilice desde un navegador web • Las aplicaciones web son muy populares  El navegador web como cliente ligero  Independencia del sistema operativo  Facilidad para actualizar y mantener aplicaciones web sin distribuir e instalar software a miles de usuarios potenciales Tema 1 - Introducción a las aplicaciones web 23
  • 24. INTRODUCCIÓN Aplicación web • El término aplicación web es un término técnico. Los usuarios utilizan la palabra web para referirse a un sitio web independientemente de sus mecanismos internos • Actualmente prácticamente todas las webs del mundo son aplicaciones web en mayor o menor medida porque la mayoría tienen cierto contenido dinámico http://es.wikipedia.org/wiki/Aplicación_web Tema 1 - Introducción a las aplicaciones web 24
  • 25. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción • Evolución histórica de la web • Navegadores y servidores web • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 25
  • 26. INTRODUCCIÓN Evolución histórica de la web • La Web fue creada alrededor de 1989 por Tim Berners-Lee y Robert Cailliau mientras trabajaban en el CERN • Se publicó en 1992 Robert Cailliau Tim Berners-Lee Tema 1 - Introducción a las aplicaciones web 26
  • 27. EVOLUCIÓN HISTÓRICA DE LA WEB Había nacido la Web 1.0 Tema 1 - Introducción a las aplicaciones web 27
  • 28. Tema 1 - Introducción a las aplicaciones web 28
  • 29. EVOLUCIÓN HISTÓRICA DE LA WEB Web 1.0 • 1993 – 2003 • Páginas con hiperenlaces • El usuario sólo leía contenido publicado por otros • Contenido muy estático, muy difícil de editar • El navegador web era la única aplicación “conectada” • Hay que reconocerlo… la web era sobre todo para Frikis Tema 1 - Introducción a las aplicaciones web 29
  • 30. EVOLUCIÓN HISTÓRICA DE LA WEB Las cosas empiezan a cambiar… • Las tecnologías se desarrollan • Los usuarios tienen más facilidades para editar el contenido de las páginas web… • Nacen los blogs, los wikis… • Google se empieza a popularizar • Nace la wikipedia (2001) Tema 1 - Introducción a las aplicaciones web 30
  • 31. EVOLUCIÓN HISTÓRICA DE LA WEB Nace la Web 2.0 • Los usuarios toman el control de los contenidos  Web 1.0: Web de Lectura Individual  Web 2.0: Web de Lectura / Escritura Social Tema 1 - Introducción a las aplicaciones web 31
  • 32. EVOLUCIÓN HISTÓRICA DE LA WEB Web 2.0 • El término Web 2.0 fue acuñado por Dale Dougherty (O'Reilly) en 2004 • Web como plataforma con aplicaciones ligeras, dinámicas y en constante evolución • Inteligencia colectiva: creación, incluso colaborativa, y distribución de contenidos. • Experiencia enriquecedora del usuario • Múltiples dispositivos de acceso Tema 1 - Introducción a las aplicaciones web 32
  • 33. EVOLUCIÓN HISTÓRICA DE LA WEB Web 1.0 vs Web 2.0 Web 1.0 Web 2.0 Empresas (la burbuja de las punto com) Comunidades (MySpace Facebook) Páginas personales (homepages) Blogs Cables Wifi, 3G Netscape Google Modem, llamada telefónica ADSL Yahoo mail 1998 con 2 MB de almacenamiento Gmail con 2GB de almacenamiento Tema 1 - Introducción a las aplicaciones web 33
  • 34. EVOLUCIÓN HISTÓRICA DE LA WEB Web 1.0 vs Web 2.0 • Colaboración en documentos Enviar documento por mail Editar documentos en Google Docs Tema 1 - 2.0 and Beyond” de Derek Hildreth Extraído de “Web Introducción a las aplicaciones web 34
  • 35. EVOLUCIÓN HISTÓRICA DE LA WEB Web 1.0 vs Web 2.0 • Navegar por la web Nombre del dominio en el navegador Motores de búsqueda Tema 1 - Introducción a las aplicaciones web 35
  • 36. EVOLUCIÓN HISTÓRICA DE LA WEB Web 1.0 vs Web 2.0 • Organizar contenido Lista de categorías Etiquetado Tema 1 - Introducción a las aplicaciones web 36
  • 37. EVOLUCIÓN HISTÓRICA DE LA WEB Web 1.0 vs Web 2.0 • Información y Referencia Enciclopedias en Internet Wikipedia Tema 1 - Introducción a las aplicaciones web 37
  • 38. EVOLUCIÓN HISTÓRICA DE LA WEB Web 1.0 vs Web 2.0 • Páginas web personales Geocities Myspace y Facebook Tema 1 - Introducción a las aplicaciones web 38
  • 39. EVOLUCIÓN HISTÓRICA DE LA WEB Web 1.0 vs Web 2.0 • Blogs personales AngelFire Blogger.com Wordpress.com Tema 1 - Introducción a las aplicaciones web 39
  • 40. Tema 1 - Introducción a las aplicaciones web 40
  • 41. 41 http://www.rossdawsonblog.com/Web2_Framework.pdf Tema 1 - Introducción a las aplicaciones web
  • 42. Tema 1 - Introducción a las aplicaciones web 42
  • 43. EVOLUCIÓN HISTÓRICA DE LA WEB Web 2.0 Participar Confiar Colaborar Comunicarse Compartir Tema 1 - Introducción a las aplicaciones web 43
  • 44. EVOLUCIÓN HISTÓRICA DE LA WEB Web 2.0 • Pero la web 2.0 también tiene sus problemas…  Dispersión  Una persona, múltiples usuarios en diferentes servicios  Cada cosa en un sitio diferente  Falta de portabilidad/integración entre aplicaciones  Inmadurez de los servicios web Tema 1 - Introducción a las aplicaciones web 44
  • 45. EVOLUCIÓN HISTÓRICA DE LA WEB Redes sociales • Las redes sociales forman parte de la denominada web 2.0 • En los últimos años las redes sociales se han convertido en el centro neurálgico de la red Tema 1 - Introducción a las aplicaciones web 45
  • 46. EVOLUCIÓN HISTÓRICA DE LA WEB Historia de las redes sociales • 1997 - El primer sitio de redes sociales reconocibles puesto en marcha en 1997 - SixDegrees.com. • 1997 a 2001 - AsianAvenue, Blackplanet y MiGente permitían a los usuarios crear relaciones personales y profesionales • 2001 - Ryze.com se inició en 2001 para ayudar a las personas aprovechar sus objetivos empresariales y profesionales mediante la creación de redes profesionales. Tema 1 - Introducción a las aplicaciones web 46 http://elblogdemari.wordpress.com/2009/11/23/redes-sociales-2/
  • 47. EVOLUCIÓN HISTÓRICA DE LA WEB ¿Pero qué es una red social? • Las redes sociales son sitios web que cuentan con una serie de herramientas tecnológicas muy sencillas de utilizar • Permiten la creación de comunidades de personas en las que se establece un intercambio dinámico de información/servicios:  Espacios para conocerse, intercambiar ideas, reencontrarse con otras personas.  Espacios para ofertar productos, servicios y realizar negocios.  Espacios para compartir e intercambiar información en diferentes medios.  Espacios para servicios sociales como la búsqueda de personas desaparecidas o intereses particulares. Tema 1 - Introducción a las aplicaciones web 47
  • 48. EVOLUCIÓN HISTÓRICA DE LA WEB ¿Son iguales todas las redes sociales? • Cada red social tiene ciertas características que la diferencian de las demás • Existen redes sociales generalistas para las relaciones personales y de amistad (Facebook, Google+, tuenti) • Existen redes sociales centradas en la agilidad en la comuniación (Twitter) Tema 1 - Introducción a las aplicaciones web 48
  • 49. EVOLUCIÓN HISTÓRICA DE LA WEB ¿Son iguales todas las redes sociales? • Existen redes sociales para temáticas que adaptan sus funcionalidades a las necesidades que demandan por sus usuarios:  Amantes de la fotografía (Flickr)  Practicantes de deportes extremos (Hookit)  Contactos profesionales (LinkedIn)  Compartir vídeos (Youtube)… Tema 1 - Introducción a las aplicaciones web 49
  • 50. EVOLUCIÓN HISTÓRICA DE LA WEB ¿Quién usa las redes sociales? • Todos usamos las redes sociales cada día (Diciembre 2013) https://www.mediabistro.com/alltwitter/social-media-active-users_b52643 Tema 1 - Introducción a las aplicaciones web 50
  • 51. EVOLUCIÓN HISTÓRICA DE LA WEB ¿Quién usa las redes sociales? • Las redes sociales generalistas están cambiando los hábitos de uso de Internet  En ocasiones facebook recibe más visitantes que la página del buscador Google  Los blogs personales se usan cada día menos  El correo electrónico está siendo sustituido por mensajes privados • Para los usuarios es mucho más cómodo comunicarse en una red social porque todos los servicios están integrados Tema 1 - Introducción a las aplicaciones web 51
  • 52. ¿CÓMO ES UNA RED SOCIAL? ¿Cómo es una red social? Tema 1 - Introducción a las aplicaciones web 52
  • 53. ¿CÓMO ES UNA RED SOCIAL? ¿Cómo es una red social? Tema 1 - Introducción a las aplicaciones web 53
  • 54. ¿CÓMO ES UNA RED SOCIAL? ¿Cómo es una red social? Tema 1 - Introducción a las aplicaciones web 54
  • 55. EVOLUCIÓN HISTÓRICA DE LA WEB La web hoy • Con la llegada de la web 2.0 en el 2004, la web es social, el contenido se crea de forma colaborativa • Las redes sociales generalistas están desplazando a otros medios de colaboración en la red (blogs, mail, wikis…) • Las redes sociales temáticas cada vez son más usadas  Los usuarios conocen y usan el modelo de red social  Los usuarios quieren aprovechar ese modelo en otros contextos: trabajo, investigación, deporte, cocina… Tema 1 - Introducción a las aplicaciones web 55
  • 56. EVOLUCIÓN HISTÓRICA DE LA WEB La web hoy • Las páginas webs se integran cada vez más con las redes sociales (Botones +1, Me gusta, Compartir…) • Las redes sociales están en los medios de comunicación generalistas • Las redes sociales son “la nueva web” • Las empresas tienen presencia en las redes sociales para llegar a sus clientes Tema 1 - Introducción a las aplicaciones web 56
  • 57. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción • Evolución histórica de la web • Navegadores y servidores web  Navegadores web  Servidores web  Protocolo http • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 57
  • 58. INTRODUCCIÓN A LAS APLICACIONES WEB Navegadores y servidores web • La web sigue una arquitectura cliente-servidor  El navegador web actúa como cliente  El servidor web actúa como servidor  La comunicación se establece usando el protocolo http Tema 1 - Introducción a las aplicaciones web 58
  • 59. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción • Evolución histórica de la web • Navegadores y servidores web  Navegadores web  Servidores web  Protocolo http • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 59
  • 60. INTRODUCCIÓN A LAS APLICACIONES WEB Navegadores web • Un navegador web es una aplicación que se instala en el sistema que utiliza el usuario • El usuario escribe una dirección web (URL - Uniform Resource Locator). La dirección contiene el nombre del servidor web y el nombre del recurso que se solicita • El navegador hace una petición al servidor y solicita el recurso • El navegador descarga el recurso y lo visualiza (o lo descarga si no puede hacerlo) • Si el recurso en una página HTML, además de visualizar su contenido, descarga recursos adicionales como imágenes, estilos, etc. y los visualiza integrados en la página Tema 1 - Introducción a las aplicaciones web 60
  • 61. INTRODUCCIÓN A LAS APLICACIONES WEB Navegadores web Navegador web Chrome de Google Tema 1 - Introducción a las aplicaciones web 61
  • 62. INTRODUCCIÓN A LAS APLICACIONES WEB Navegadores web • Uno de los elementos que más han definido a las páginas web son los enlaces o links • El navegador carga una nueva página web cuando el usuario hace clic (pincha) en un enlace • Pulsar links permite pasar de una página a otra navegando • El navegador dispone de un historial para volver hacia atrás en la navegación Tema 1 - Introducción a las aplicaciones web 62
  • 63. INTRODUCCIÓN A LAS APLICACIONES WEB Navegadores web • Historia  1990 WorldWideWeb  Nace el primer navegador para sistemas NeXT  1993 Mosaic  Win, Mac y Unix/Linux.  Fue la base de Firefox e Internet Explorer  Cuota de mercado de 90% en 1994 Tema 1 - Introducción a las aplicaciones web 63
  • 64. WordWideWeb (1990) Tema 1 - Introducción a las aplicaciones web 64
  • 65. Mosaic (1993) Tema 1 - Introducción a las aplicaciones web 65
  • 66. INTRODUCCIÓN A LAS APLICACIONES WEB Navegadores web • Historia  1994 Netscape Navigator  Como evolución de Mosaic  1995 Microsoft Internet Explorer  Integrado en Windows  Llegó a tener el 95% de cuota en el 2002  1996 Opera  Nunca ha tenido una gran cuota de mercado  Actualmente se utiliza mayormente en móviles y consolas (Nintendo Wii) Tema 1 - Introducción a las aplicaciones web 66
  • 67. Netscape 0.9 (1994) Tema 1 - Introducción a las aplicaciones web 67
  • 68. Internet Explorer 1.0 (1995) Tema 1 - Introducción a las aplicaciones web 68
  • 69. Opera 2.12 (1997) Tema 1 - Introducción a las aplicaciones web 69
  • 70. INTRODUCCIÓN A LAS APLICACIONES WEB Navegadores web • Historia  2003 Apple Safari  Navegador de productos de Apple  Basado en motor de renderizado WebKit (libre)  2004 Mozilla Firefox  Software libre  Usa el motor Gecko  Desarrollado por la fundación Mozilla (heredera de Netscape)  2008 Google Chrome  Tiene una versión software libre llamada Chromium  Basado en motor de renderizado WebKit (libre) Tema 1 - Introducción a las aplicaciones web 70
  • 71. Safari 5.1 (2011) Tema 1 - Introducción a las aplicaciones web 71
  • 72. Firefox 9 (2011) Tema 1 - Introducción a las aplicaciones web 72
  • 73. Google Chrome 16 (2012) Tema 1 - Introducción a las aplicaciones web 73
  • 74. INTRODUCCIÓN A LAS APLICACIONES WEB Navegadores web http://gs.statcounter.com Tema 1 - Introducción a las aplicaciones web 74
  • 75. INTRODUCCIÓN A LAS APLICACIONES WEB Navegadores web • Navegadores con los que se conectan los usuarios a la wikipedia http://en.wikipedia.org/wiki/Browser_wars Tema 1 - Introducción a las aplicaciones web 75
  • 76. NAVEGADORES WEB La guerra de los navegadores web • La primera guerra enfrentó a Netscape Navigator vs Internet Explorer a mediados de los 90 • Internet Explorer estaba preinstalado en todos los Windows • En el año 2000 un juez de EEUU consideró que esto constituía monopolio y obligó a Microsoft a dividirse en dos compañías, pero apelaron y sólo pagaron una multa y permitieron a fabricantes no incluir Internet Explorer • En 2003 la Unión Europea puso una multa a Microsoft de 500M€ por prácticas anticompetitivas http://en.wikipedia.org/wiki/Eu_vs._microsoft http://en.wikipedia.org/wiki/United_States_Microsoft_antitrust_case Tema 1 - Introducción a las aplicaciones web 76
  • 77. NAVEGADORES WEB La guerra de los navegadores web • Durante la década de los 90, las páginas web no se podían visualizar correctamente en todos los navegadores porque estaban diseñadas para Internet Explorer (que no seguía los estándares) • Internet Explorer 6 estaba incluido de serie en Windows XP • Entre los navegadores más recientes siguen existiendo pequeñas diferencias, pero existen técnicas para que una página se vea correctamente en todos ellos Tema 1 - Introducción a las aplicaciones web 77
  • 78. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción • Evolución histórica de la web • Navegadores y servidores web  Navegadores web  Servidores web  Protocolo http • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 78
  • 79. INTRODUCCIÓN A LAS APLICACIONES WEB Servidores Web • Un servidor web  Software  Alberga sitios web estáticos y los sirve con el protocolo http a los navegadores web  Ejecuta aplicaciones web que el usuario utiliza desde un navegador web (usando http)  Hardware  Servidor en el que se ejecuta el software de servidor web.  Generalmente dispone de otros servicios adicionales como un sistema gestor de base de datos Tema 1 - Introducción a las aplicaciones web 79
  • 80. INTRODUCCIÓN A LAS APLICACIONES WEB Servidores Web • Un servidor web básico sirve por http los ficheros que están en el disco duro • Puede servir cualquier tipo de fichero, aunque lo habitual son los ficheros que un navegador reconoce (html, jpg, png, pdf…) • Cuando recibe una petición, devuelve el fichero del disco duro que se ajuste a la ruta indicada en la URLs http://www.miservidor.com/ruta/del/fichero/fichero.txt Nombre del servidor Ruta del fichero en el disco Nombre del fichero Tema 1 - Introducción a las aplicaciones web 80
  • 81. INTRODUCCIÓN A LAS APLICACIONES WEB Servidores Web • La mayoría de los servidores web permiten que en cada petición se ejecute un pequeño programa que genera dinámicamente el recurso que se envía al usuario (server-side scripting) • A este contenido generado “al vuelo” se le denomina contenido dinámico, en contraposición al contenido estático obtenido del disco duro • Es bastante habitual que el contenido dinámico se genere con la información de una base de datos Tema 1 - Introducción a las aplicaciones web 81
  • 82. INTRODUCCIÓN A LAS APLICACIONES WEB Servidores Web • Los servidores web con contenido dinámico no sólo envían recursos al navegador, también pueden procesar información que les llega del mismo  Datos contenidos en formularios web  Ficheros enviados desde el navegador  Información codificada en los links que pulsan los usuarios (URL) • Esta funcionalidad permite el desarrollo de completas aplicaciones web Tema 1 - Introducción a las aplicaciones web 82
  • 83. INTRODUCCIÓN A LAS APLICACIONES WEB Servidores Web Página HTML Navegador web Imágenes, PDFs… Información en la URL Servidor web Datos de formularios Ficheros Protocolo http Tema 1 - Introducción a las aplicaciones web 83
  • 84. INTRODUCCIÓN A LAS APLICACIONES WEB Servidores Web • Historia: 1990 - CERN http (NeXTSTEP) Tema 1 - Introducción a las aplicaciones web 84
  • 85. INTRODUCCIÓN A LAS APLICACIONES WEB Servidores Web • 1995 – Apache  Su nombre completo es Apache HTTP Server Project  El servidor más popular (Enero 2014 – 42% cuota)  Desarrollado por la Apache Software Fundation con licencia software libre Apache License  Multiplataforma  Permite escribir contenido dinámico (server-side scripting)  http://httpd.apache.org http://httpd.apache.org/ABOUT_APACHE.html Tema 1 - Introducción a las aplicaciones web 85
  • 86. INTRODUCCIÓN A LAS APLICACIONES WEB Servidores Web • 1995 – Microsoft Internet Information Services (IIS)  Es un producto propietario de Microsoft integrado en su sistema operativo Windows y su base de datos MS SQL Server  Permite escribir contenido dinámico (server-side scripting)  Es el segundo servidor más usado a (Enero 2014 con 30%)  http://www.iis.net/ http://en.wikipedia.org/wiki/Internet_Information_Services Tema 1 - Introducción a las aplicaciones web 86
  • 87. INTRODUCCIÓN A LAS APLICACIONES WEB Servidores Web • 2004 – NginX       Es un servidor multiplataforma y software libre (licencia tipo BSD) Desarrollado por el ruso Igor Sysoev Es el tercer servidor más usado a (Enero de 2014 con 14%) Permite escribir contenido dinámico (server-side scripting) Es muy rápido y se usa como balanceador de carga http://nginx.net/ Tema 1 - Introducción a las aplicaciones web 87
  • 88. INTRODUCCIÓN A LAS APLICACIONES WEB Servidores Web http://news.netcraft.com/archives/2014/01/03/january-2014-web-server-survey.html Tema 1 - Introducción a las aplicaciones web 88
  • 89. INTRODUCCIÓN A LAS APLICACIONES WEB Servidores Web • Servidores web incrustados  El interfaz web se ha convertido en el interfaz universal para las aplicaciones distribuidas  Muchos dispositivos incluyen un servidor web incrustado (embebed) para gestionar y configurar su comportamiento  Ejemplos  Routers, Impresoras, Cámaras IP, Teléfonos móviles… Tema 1 - Introducción a las aplicaciones web 89
  • 90. SERVIDORES WEB Programación del lado del servidor • Server-side scripting se puede traducir por “Programación del lado del servidor” • Esta técnica se inventó en 1995 por Fred DuFresne mientras hacía la página de la televisión de Boston • La tecnología que conectaba el servidor web con un programa para generar las páginas web se denominada CGI (Common Gateway Interface) • Los programas, llamados CGIs, se ejecutaban completamente en cada petición http que se hacía al servidor • Estos programas estaban implementados en lenguajes como C o scripts de Perl, Shell y PHP Tema 1 - Introducción a las aplicaciones web 90
  • 91. SERVIDORES WEB Programación del lado del servidor • Debido a los problemas de rendimiento con los CGIs surgieron nuevos mecanismos para la programación del lado del servidor • Se empiezan a desarrollar técnicas para incluir las aplicaciones dentro de los servidores (módulos de Apache, etc…) • Existen muchas tecnologías para la programación del lado del servidor. Las más conocidas son Java EE, PHP, ASP.NET, Ruby on Rails, Django, Node.js… Tema 1 - Introducción a las aplicaciones web 91
  • 92. SERVIDORES WEB Programación del lado del servidor • Java Enterprise Edition (Java EE)  Tecnología basada en Java  Desarrollada por una coalición de empresas lideradas por Oracle, IBM, Red Hat, etc..  Tecnología muy usada a nivel empresarial  La mayoría de las implementaciones y herramientas para desarrollo son software libre  Las aplicaciones se ejecutan en servidores web implementados en Java (Tomcat, Glassfish, JBoss, Jetty…)  Estos servidores se integran en los servidores web Apache, NginX e IIS http://www.oracle.com/javaee/ Tema 1 - Introducción a las aplicaciones web 92
  • 93. SERVIDORES WEB Programación del lado del servidor • PHP  Desarrollado en 1994 por Rasmus Lerdorf  La tecnología dispone de un lenguaje con tipos dinámicos llamado PHP  Desarrollada por PHP Group con licencia libre PHP license  Es multiplataforma  Es una tecnología multiplataforma que se integra bien con servidores como Apache, NginX e IIS  Se puede usar Netbeans o Eclipse para su desarrollo  Facebook está implementado con PHP http://www.php.net/ Tema 1 - Introducción a las aplicaciones web 93
  • 94. SERVIDORES WEB Programación del lado del servidor • ASP.NET  Versión evolucionada del ASP clásico  Forma parte de la tecnología .NET de Microsoft  Se utiliza el lenguaje C# (muy similar a Java)  Licencia propietaria y para plataformas Windows  Usando Mono se puede usar limitado en Linux  Se integra bien con el servidor IIS  El desarrollo se realiza con Visual Studio .NET http://www.asp.net/ Tema 1 - Introducción a las aplicaciones web 94
  • 95. SERVIDORES WEB Programación del lado del servidor http://w3techs.com/technologies/overview/programming_language/all Tema 1 - Introducción a las aplicaciones web 95
  • 96. SERVIDORES WEB Programación del lado del servidor Tema 1 - Introducción a las aplicaciones web 96
  • 97. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción • Evolución histórica de la web • Navegadores y servidores web  Navegadores web  Servidores web  Protocolo http • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 97
  • 98. INTRODUCCIÓN A LAS APLICACIONES WEB Protocolo http • Protocolo Hypertext Transfer Protocol estándar (W3C y IETF) • La versión 1.0 se publicó en 1996 • Los paquetes están codificados en texto plano y con un formato sencillo (no en binario) • El puerto por defecto es el 80 • Es un protocolo cliente servidor. Los navegadores (clientes) hacen peticiones a los servidores web • La petición solicita un recurso, identificado por la URL (Uniform Resource Locator) • Es un protocolo sin estado, es decir, que no guarda ninguna información sobre conexiones anteriores Tema 1 - Introducción a las aplicaciones web 98
  • 99. INTRODUCCIÓN A LAS APLICACIONES WEB Protocolo http • Ciclo de vida de una petición http  En un navegador se introduce la dirección web http://www.host.com/index.html  El navegador abrirá una conexión al puerto 80 del servidor (cuya IP obtiene por DNS) www.host.com  Enviará la petición con formato GET /index.html HTTP/1.1 Host: www.example.com User-Agent: tipo navegador [Línea en blanco] Tema 1 - Introducción a las aplicaciones web 99
  • 100. INTRODUCCIÓN A LAS APLICACIONES WEB Protocolo http • Ciclo de vida de una petición http  El servidor devolverá una respuesta con el formato HTTP/1.1 200 OK Date: Fri, 31 Dec 2003 23:59:59 GMT Content-Type: text/html Content-Length: 1221 <html> <body> <h1>Página principal</h1> (Contenido) . . . </body> </html> Tema 1 - Introducción a las aplicaciones web 100
  • 101. INTRODUCCIÓN A LAS APLICACIONES WEB Protocolo http • Ciclo de vida de una petición http  El navegador analiza la respuesta del servidor.  Si es correcta (200 OK) se lee el contenido  Se determina el tipo de contenido por el “Content-Type”. En este caso, “text/html”  Se lee el contenido y se muestra en el navegador  Si el contenido referencia a más contenido (imágenes, reglas de estilo, etc…) se vuelve a hacer una petición http por cada uno de ellos Tema 1 - Introducción a las aplicaciones web 101
  • 102. DESARROLLO DE APLICACIONES WEB Introducción a las Aplicaciones Web • Introducción • Evolución histórica de la web • Navegadores y servidores web • Aplicaciones de Internet en dispositivos móviles Tema 1 - Introducción a las aplicaciones web 102
  • 103. INTRODUCCIÓN A LAS APLICACIONES WEB Aplicaciones de Internet en dispositivos móviles • Existen varios tipos de dispositivos móviles, pero los más populares son los teléfonos móviles y las tabletas • Estos dispositivos suelen disponer de navegadores web completos, por lo que pueden acceder a cualquier aplicación web • Debido a sus características (pequeña pantalla y control táctil) es recomendable que exista una versión adaptada de la aplicación web Tema 1 - Introducción a las aplicaciones web 103
  • 104. INTRODUCCIÓN A LAS APLICACIONES WEB Aplicaciones de Internet en dispositivos móviles • Responsive web design  Traducido como “Diseño web adaptable”  Técnicas y herramientas que permiten que los elementos de la web se adapten al tamaño del dispositivo y su forma de interacción  Algunos autores indican que incluso el contenido tiene que ser diferente porque el usuario tiene intenciones diferentes cuando accede a una web desde el móvil o desde el PC http://www.ecbloguer.com/marketingdigital/?p=2635 Tema 1 - Introducción a las aplicaciones web 104
  • 105. INTRODUCCIÓN A LAS APLICACIONES WEB Aplicaciones de Internet en dispositivos móviles http://responsivewebdesign.ltd.uk/ Tema 1 - Introducción a las aplicaciones web 105
  • 106. INTRODUCCIÓN A LAS APLICACIONES WEB Aplicaciones de Internet en dispositivos móviles http://www.dscommunications.ca/responsive-web-design/ Tema 1 - Introducción a las aplicaciones web 106
  • 107. INTRODUCCIÓN A LAS APLICACIONES WEB Aplicaciones de Internet en dispositivos móviles • Las aplicaciones nativas de las plataformas móviles se implementan con diferentes tecnologías:  Android: Java con librería móvil (No estándar)  iPhone y iPad: ObjectiveC  Windows Phone: C# o VisualBasic Tema 1 - Introducción a las aplicaciones web 107
  • 108. INTRODUCCIÓN A LAS APLICACIONES WEB Aplicaciones de Internet en dispositivos móviles • Muchas aplicaciones necesitan acceder a información en Internet:  Redes sociales, chat, juegos online, etc… • Existen diversos protocolos/técnicas:  Sockets: Conexión TCP con el servidor  API REST: Uso del protocolo http, pero en vez de devolver HTML+CSS, se devuelve información en XML o JSON  Websockets: Un híbrido entre ambas técnicas Tema 1 - Introducción a las aplicaciones web 108
  • 109. INTRODUCCIÓN A LAS APLICACIONES WEB Aplicaciones de Internet en dispositivos móviles • Las técnicas más habituales son:  API REST  websockets (más reciente) • Arquitectura cliente/servidor:  La aplicación (cliente) se implementa con la tecnología nativa de la plataforma  La implementación del servidor es similar a un servidor en una aplicación web • En el tema 6 se estudiarán en profundidad las APIs REST Tema 1 - Introducción a las aplicaciones web 109
  • 110. INTRODUCCIÓN A LAS APLICACIONES WEB Aplicaciones de Internet en dispositivos móviles • Las tecnologías que se utilizan en el lado del cliente en el desarrollo web son HTML, CSS y JavaScript • Se agrupan bajo el nombre de HTML5 • Permiten el diseño de interfaces de usuario atractivos, adaptados a diferentes resoluciones, interactivos, etc. • Funcionan en una gran cantidad de plataformas gracias a los navegadores web (portables) Tema 1 - Introducción a las aplicaciones web 110
  • 111. INTRODUCCIÓN A LAS APLICACIONES WEB Aplicaciones de Internet en dispositivos móviles • Estas tecnologías también se pueden usar para implementar aplicaciones en los dispositivos móviles • Estas aplicaciones se comportan como las aplicaciones nativas:  Se publican en las tiendas de aplicaciones  Tienen icono  Pueden acceder a la cámara, acelerómetro, almacenamiento, etc… Tema 1 - Introducción a las aplicaciones web 111
  • 112. INTRODUCCIÓN A LAS APLICACIONES WEB Aplicaciones de Internet en dispositivos móviles • En iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada, and Symbian se utiliza la herramienta Apache Cordova • En FirefoxOS y Ubuntu Mobile es la forma nativa de construir aplicaciones Tema 1 - Introducción a las aplicaciones web 112
  • 113. INTRODUCCIÓN A LAS APLICACIONES WEB Aplicaciones de Internet en dispositivos móviles • HTML5 para desarrollo de apps:  Ventajas:  Reduce el esfuerzo de desarrollo porque una misma app funciona en todos los dispositivos.  Es una tecnología familiar a muchos desarrolladores y existen muchas herramientas  Inconvenientes:  Es posible que no se integren a la perfección con la plataforma  No suelen tener acceso a las últimas innovaciones Tema 1 - Introducción a las aplicaciones web 113