Intro a las apps web

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

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


• Introducción


Internet



World Wide Web



Página web



Sitio web



Aplicación web



3

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


4


• Introducción


Internet



World Wide Web (la web)



Página web



Sitio web



Aplicación web



5

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

6

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

7

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

8


• Introducción


Internet






Página web



Sitio web



Aplicación web



9

INTRODUCCIÓN

• 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

10

INTRODUCCIÓN

• 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

11

INTRODUCCIÓN

• 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

12


• Introducción


Internet






Página web



Sitio web



Aplicación web



13

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í

14

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

15


• Introducción


Internet






Página web



Sitio web



Aplicación web



16

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

17

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

18

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)

19


• Introducción


Internet






Página web



Sitio web



Aplicación web



20

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

21

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

22

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

23

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

24


• Introducción


25

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

26

EVOLUCIÓN HISTÓRICA DE LA WEB

Había nacido la Web 1.0


27


28


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

29


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)


30


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


31


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

32


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

33


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


Web 1.0 vs Web 2.0
• Navegar por la web

Nombre del dominio
en el navegador

Motores de búsqueda


35


Web 1.0 vs Web 2.0
• Organizar contenido

Lista de categorías

Etiquetado


36


Web 1.0 vs Web 2.0
• Información y Referencia

Enciclopedias en Internet

Wikipedia


37


Web 1.0 vs Web 2.0
• Páginas web personales

Geocities

Myspace y Facebook


38


Web 1.0 vs Web 2.0
• Blogs personales

AngelFire

Blogger.com
Wordpress.com

39


40

41

http://www.rossdawsonblog.com/Web2_Framework.pdf


42


Web 2.0
Participar

Confiar

Colaborar

Comunicarse

Compartir


43


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


44


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


45


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.

46
http://elblogdemari.wordpress.com/2009/11/23/redes-sociales-2/


¿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.


47


¿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)


48


¿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)…


49


¿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

50


¿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

51

¿CÓMO ES UNA RED SOCIAL?

¿Cómo es una red social?


52




53




54


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…


55


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

56


• Introducción


Navegadores web



Servidores web



Protocolo http



57


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


58


• Introducción


Navegadores web



Servidores web



Protocolo http



59


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


60


Navegadores web

Navegador web Chrome de Google

61


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

62


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


63

WordWideWeb (1990)

64

Mosaic (1993)

65


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)

66

Netscape 0.9 (1994)

67

Internet Explorer 1.0 (1995)


68

Opera 2.12 (1997)

69


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)


70

Safari 5.1 (2011)

71

Firefox 9 (2011)

72

Google Chrome 16 (2012)

73


Navegadores web
http://gs.statcounter.com


74


Navegadores web
• Navegadores
con los que se
conectan los
usuarios a la
wikipedia

http://en.wikipedia.org/wiki/Browser_wars

75

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

76

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

77


• Introducción


Navegadores web



Servidores web



Protocolo http



78


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

79


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


80


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

81


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

82


Servidores Web
Página HTML
Navegador web

Imágenes, PDFs…

Información en la URL

Servidor web

Datos de formularios
Ficheros
Protocolo http


83


Servidores Web
• Historia: 1990 - CERN http (NeXTSTEP)


84


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

85


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

86


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/


87


Servidores Web

http://news.netcraft.com/archives/2014/01/03/january-2014-web-server-survey.html

88


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…


89

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


90

SERVIDORES WEB

• 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…

91

SERVIDORES WEB

• 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/

92

SERVIDORES WEB

• 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/

93

SERVIDORES WEB

• 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/

94

SERVIDORES WEB


http://w3techs.com/technologies/overview/programming_language/all

95

SERVIDORES WEB



96


• Introducción


Navegadores web



Servidores web



Protocolo http



97


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


98


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]

99


Protocolo 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>

100


Protocolo 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


101


• Introducción


102


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

103


• 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

104



http://responsivewebdesign.ltd.uk/

105



http://www.dscommunications.ca/responsive-web-design/

106


• 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


107


• 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


108


• 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


109


• 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)

110


• 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…

111


• 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


112


• 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

113

Intro a las apps web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie Intro a las apps web

Ähnlich wie Intro a las apps web (20)

Mehr von Micael Gallego

Mehr von Micael Gallego (19)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Intro a las apps web