Post on 12-Jun-2015
description
ESCUELA TÉCNICA SUPERIOR DE
INGENIERÍA INFORMÁTICA DEPARTAMENTO DE CIENCIAS
DE LA COMPUTACIÓN
Introducción a las aplicaciones web
DESARROLLO DE APLICACIONES WEB - TEMA 1
Micael Gallego Correo: micael.gallego@urjc.es Twitter: @micael_gallego Blog: http://micaelgallego.github.io
Introducción a las Aplicaciones Web
2
DESARROLLO DE 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
Introducción a las Aplicaciones Web
3
DESARROLLO DE 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
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
INTRODUCCIÓN A LAS APLICACIONES WEB
4 Tema 1 - Introducción a las aplicaciones web
Introducción a las Aplicaciones Web
5
DESARROLLO DE 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
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
INTRODUCCIÓN
6 Tema 1 - Introducción a las aplicaciones web
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
INTRODUCCIÓN
7 Tema 1 - Introducción a las aplicaciones web
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)
INTRODUCCIÓN
http://es.wikipedia.org/wiki/Internet
8 Tema 1 - Introducción a las aplicaciones web
Introducción a las Aplicaciones Web
9
DESARROLLO DE 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
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
INTRODUCCIÓN
10 Tema 1 - Introducción a las aplicaciones web
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
INTRODUCCIÓN
Tim Berners-Lee Robert Cailliau
11 Tema 1 - Introducción a las aplicaciones web
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)
INTRODUCCIÓN
http://es.wikipedia.org/wiki/World_Wide_Web
12 Tema 1 - Introducción a las aplicaciones web
Introducción a las Aplicaciones Web
13
DESARROLLO DE 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
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í
INTRODUCCIÓN
14 Tema 1 - Introducción a las aplicaciones web
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
INTRODUCCIÓN
http://es.wikipedia.org/wiki/Página_web
15 Tema 1 - Introducción a las aplicaciones web
Introducción a las Aplicaciones Web
16
DESARROLLO DE 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
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
INTRODUCCIÓN
http://es.wikipedia.org/wiki/Sitio_web
17 Tema 1 - Introducción a las aplicaciones web
Sitio web
• Tipos de sitios web
Web corporativas de empresas
Blogs, redes sociales
Páginas personales
Buscadores
Sitios de noticias
Enciclopedias
…
INTRODUCCIÓN
Todas las actividades de la vida tiene su web
18 Tema 1 - Introducción a las aplicaciones web
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]
INTRODUCCIÓN
[1] http://es.wikipedia.org/wiki/Portal_(internet)
19 Tema 1 - Introducción a las aplicaciones web
Introducción a las Aplicaciones Web
20
DESARROLLO DE 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
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
INTRODUCCIÓN
21 Tema 1 - Introducción a las aplicaciones web
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
INTRODUCCIÓN
22 Tema 1 - Introducción a las aplicaciones web
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
INTRODUCCIÓN
23 Tema 1 - Introducción a las aplicaciones web
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
INTRODUCCIÓN
http://es.wikipedia.org/wiki/Aplicación_web
24 Tema 1 - Introducción a las aplicaciones web
Introducción a las Aplicaciones Web
25
DESARROLLO DE 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
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
INTRODUCCIÓN
Tim Berners-Lee Robert Cailliau
26 Tema 1 - Introducción a las aplicaciones web
Había nacido la Web 1.0 EVOLUCIÓN HISTÓRICA DE LA WEB
27 Tema 1 - Introducción a las aplicaciones web
28 Tema 1 - Introducción a las aplicaciones 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
EVOLUCIÓN HISTÓRICA DE LA WEB
29 Tema 1 - Introducción a las aplicaciones 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)
EVOLUCIÓN HISTÓRICA DE LA WEB
30 Tema 1 - Introducción a las aplicaciones 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
EVOLUCIÓN HISTÓRICA DE LA WEB
31 Tema 1 - Introducción a las aplicaciones 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
EVOLUCIÓN HISTÓRICA DE LA WEB
32 Tema 1 - Introducción a las aplicaciones web
Web 1.0 vs Web 2.0 EVOLUCIÓN HISTÓRICA DE LA WEB
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
33 Tema 1 - Introducción a las aplicaciones web
Web 1.0 vs Web 2.0
• Colaboración en documentos
EVOLUCIÓN HISTÓRICA DE LA WEB
Enviar documento por mail Editar documentos en Google Docs
Extraído de “Web 2.0 and Beyond” de Derek Hildreth 34 Tema 1 - Introducción a las aplicaciones web
Web 1.0 vs Web 2.0
• Navegar por la web
EVOLUCIÓN HISTÓRICA DE LA WEB
Nombre del dominio en el navegador
Motores de búsqueda
35 Tema 1 - Introducción a las aplicaciones web
Web 1.0 vs Web 2.0
• Organizar contenido
EVOLUCIÓN HISTÓRICA DE LA WEB
Lista de categorías Etiquetado
36 Tema 1 - Introducción a las aplicaciones web
Web 1.0 vs Web 2.0
• Información y Referencia
EVOLUCIÓN HISTÓRICA DE LA WEB
Enciclopedias en Internet Wikipedia
37 Tema 1 - Introducción a las aplicaciones web
Web 1.0 vs Web 2.0
• Páginas web personales
EVOLUCIÓN HISTÓRICA DE LA WEB
Geocities Myspace y Facebook
38 Tema 1 - Introducción a las aplicaciones web
Web 1.0 vs Web 2.0
• Blogs personales
EVOLUCIÓN HISTÓRICA DE LA WEB
AngelFire Blogger.com Wordpress.com
39 Tema 1 - Introducción a las aplicaciones web
40 Tema 1 - Introducción a las aplicaciones web
http://www.rossdawsonblog.com/Web2_Framework.pdf 41 Tema 1 - Introducción a las aplicaciones web
42 Tema 1 - Introducción a las aplicaciones web
Web 2.0 EVOLUCIÓN HISTÓRICA DE LA WEB
Participar
Comunicarse
Compartir Colaborar
Confiar
43 Tema 1 - Introducción a las aplicaciones 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
EVOLUCIÓN HISTÓRICA DE LA WEB
44 Tema 1 - Introducción a las aplicaciones 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
EVOLUCIÓN HISTÓRICA DE LA WEB
45 Tema 1 - Introducción a las aplicaciones web
http://elblogdemari.wordpress.com/2009/11/23/redes-sociales-2/
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.
EVOLUCIÓN HISTÓRICA DE LA WEB
46 Tema 1 - Introducción a las aplicaciones 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.
EVOLUCIÓN HISTÓRICA DE LA WEB
47 Tema 1 - Introducción a las aplicaciones 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
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
EVOLUCIÓN HISTÓRICA DE LA WEB
¿Quién usa las redes sociales?
• Todos usamos las redes sociales cada día
Tema 1 - Introducción a las aplicaciones web 50
EVOLUCIÓN HISTÓRICA DE LA WEB
(Diciembre 2013) https://www.mediabistro.com/alltwitter/social-media-active-users_b52643
¿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
EVOLUCIÓN HISTÓRICA DE LA WEB
¿Cómo es una red social?
¿CÓMO ES UNA RED SOCIAL?
52 Tema 1 - Introducción a las aplicaciones web
¿Cómo es una red social?
¿CÓMO ES UNA RED SOCIAL?
53 Tema 1 - Introducción a las aplicaciones web
¿Cómo es una red social?
¿CÓMO ES UNA RED SOCIAL?
54 Tema 1 - Introducción a las aplicaciones 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…
EVOLUCIÓN HISTÓRICA DE LA WEB
55 Tema 1 - Introducción a las aplicaciones 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
EVOLUCIÓN HISTÓRICA DE LA WEB
56 Tema 1 - Introducción a las 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
DESARROLLO DE 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
INTRODUCCIÓN A LAS APLICACIONES WEB
58 Tema 1 - Introducción a las 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
DESARROLLO DE 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
INTRODUCCIÓN A LAS APLICACIONES WEB
60 Tema 1 - Introducción a las aplicaciones web
Navegadores web INTRODUCCIÓN A LAS APLICACIONES WEB
61 Tema 1 - Introducción a las aplicaciones web
Navegador web Chrome de Google
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
INTRODUCCIÓN A LAS APLICACIONES WEB
62 Tema 1 - 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
INTRODUCCIÓN A LAS APLICACIONES WEB
63 Tema 1 - Introducción a las aplicaciones web
64 Tema 1 - Introducción a las aplicaciones web
WordWideWeb (1990)
65 Tema 1 - Introducción a las aplicaciones web
Mosaic (1993)
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)
INTRODUCCIÓN A LAS APLICACIONES WEB
66 Tema 1 - Introducción a las aplicaciones web
67 Tema 1 - Introducción a las aplicaciones web
Netscape 0.9 (1994)
68 Tema 1 - Introducción a las aplicaciones web
Internet Explorer 1.0 (1995)
69 Tema 1 - Introducción a las aplicaciones web
Opera 2.12 (1997)
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)
INTRODUCCIÓN A LAS APLICACIONES WEB
70 Tema 1 - Introducción a las aplicaciones web
71 Tema 1 - Introducción a las aplicaciones web
Safari 5.1 (2011)
72 Tema 1 - Introducción a las aplicaciones web
Firefox 9 (2011)
73 Tema 1 - Introducción a las aplicaciones web
Google Chrome 16 (2012)
Navegadores web INTRODUCCIÓN A LAS APLICACIONES WEB
74 Tema 1 - Introducción a las aplicaciones web
http://gs.statcounter.com
Navegadores web
• Navegadores con los que se conectan los usuarios a la wikipedia
Tema 1 - Introducción a las aplicaciones web 75
INTRODUCCIÓN A LAS APLICACIONES WEB
http://en.wikipedia.org/wiki/Browser_wars
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
NAVEGADORES WEB
76 Tema 1 - Introducción a las aplicaciones web
http://en.wikipedia.org/wiki/Eu_vs._microsoft
http://en.wikipedia.org/wiki/United_States_Microsoft_antitrust_case
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
NAVEGADORES WEB
77 Tema 1 - Introducción a las 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
DESARROLLO DE 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
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
Tema 1 - Introducción a las aplicaciones web 80
INTRODUCCIÓN A LAS APLICACIONES WEB
http://www.miservidor.com/ruta/del/fichero/fichero.txt
Nombre del servidor Ruta del fichero en el disco
Nombre del fichero
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
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
INTRODUCCIÓN A LAS APLICACIONES WEB
Servidores Web
Tema 1 - Introducción a las aplicaciones web 83
INTRODUCCIÓN A LAS APLICACIONES WEB
Navegador web
Servidor web Información en la URL
Datos de formularios
Ficheros
Página HTML
Imágenes, PDFs…
Protocolo http
Servidores Web
• Historia: 1990 - CERN http (NeXTSTEP)
Tema 1 - Introducción a las aplicaciones web 84
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
Tema 1 - Introducción a las aplicaciones web 85
INTRODUCCIÓN A LAS APLICACIONES WEB
http://httpd.apache.org/ABOUT_APACHE.html
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/
Tema 1 - Introducción a las aplicaciones web 86
INTRODUCCIÓN A LAS APLICACIONES WEB
http://en.wikipedia.org/wiki/Internet_Information_Services
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
INTRODUCCIÓN A LAS APLICACIONES WEB
Servidores Web
Tema 1 - Introducción a las aplicaciones web 88
INTRODUCCIÓN A LAS APLICACIONES WEB
http://news.netcraft.com/archives/2014/01/03/january-2014-web-server-survey.html
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
INTRODUCCIÓN A LAS APLICACIONES 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
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
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
Tema 1 - Introducción a las aplicaciones web 92
SERVIDORES WEB
http://www.oracle.com/javaee/
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
Tema 1 - Introducción a las aplicaciones web 93
SERVIDORES WEB
http://www.php.net/
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
Tema 1 - Introducción a las aplicaciones web 94
SERVIDORES WEB
http://www.asp.net/
Programación del lado del servidor
Tema 1 - Introducción a las aplicaciones web 95
SERVIDORES WEB
http://w3techs.com/technologies/overview/programming_language/all
Programación del lado del servidor
Tema 1 - Introducción a las aplicaciones web 96
SERVIDORES 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
DESARROLLO DE 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
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
El navegador abrirá una conexión al puerto 80 del servidor (cuya IP obtiene por DNS)
Enviará la petición con formato
Tema 1 - Introducción a las aplicaciones web 99
INTRODUCCIÓN A LAS APLICACIONES WEB
http://www.host.com/index.html
www.host.com
GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: tipo navegador
[Línea en blanco]
Protocolo http
• Ciclo de vida de una petición http
El servidor devolverá una respuesta con el formato
Tema 1 - Introducción a las aplicaciones web 100
INTRODUCCIÓN A LAS APLICACIONES WEB
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>
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
INTRODUCCIÓN A LAS 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
DESARROLLO DE 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
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
Tema 1 - Introducción a las aplicaciones web 104
INTRODUCCIÓN A LAS APLICACIONES WEB
http://www.ecbloguer.com/marketingdigital/?p=2635
Aplicaciones de Internet en dispositivos móviles
Tema 1 - Introducción a las aplicaciones web 105
INTRODUCCIÓN A LAS APLICACIONES WEB
http://responsivewebdesign.ltd.uk/
Aplicaciones de Internet en dispositivos móviles
Tema 1 - Introducción a las aplicaciones web 106
INTRODUCCIÓN A LAS APLICACIONES WEB
http://www.dscommunications.ca/responsive-web-design/
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
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
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
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
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
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
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
INTRODUCCIÓN A LAS APLICACIONES WEB