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

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: [email protected] 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


3


• Introducción

Internet

World Wide Web

Página web

Sitio web

Aplicación 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


5


• Introducción

Internet

World Wide Web (la web)

Página web

Sitio web

Aplicación 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


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


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


http://es.wikipedia.org/wiki/Internet


9


• Introducción

Internet


Página web

Sitio web

Aplicación 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



• 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



• 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


http://es.wikipedia.org/wiki/World_Wide_Web


13


• Introducción

Internet


Página web

Sitio web

Aplicación 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


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


http://es.wikipedia.org/wiki/Página_web


16


• Introducción

Internet


Página web

Sitio web

Aplicación 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


http://www.urjc.es/

http://es.wikipedia.org/

http://es.wikipedia.org/wiki/Sitio_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


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)


http://es.wikipedia.org/wiki/Portal_(internet)


20


• Introducción

Internet


Página web

Sitio web

Aplicación 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


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


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


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


http://es.wikipedia.org/wiki/Aplicación_web


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

INTRODUCCIÓN

Tim Berners-Lee Robert Cailliau


Había nacido la Web 1.0 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

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)



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



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



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


Web 1.0 vs Web 2.0

• Colaboración en documentos


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


Nombre del dominio en el navegador

Motores de búsqueda


Web 1.0 vs Web 2.0

• Organizar contenido


Lista de categorías Etiquetado


Web 1.0 vs Web 2.0

• Información y Referencia


Enciclopedias en Internet Wikipedia


Web 1.0 vs Web 2.0

• Páginas web personales


Geocities Myspace y Facebook


Web 1.0 vs Web 2.0

• Blogs personales


AngelFire Blogger.com Wordpress.com


http://www.rossdawsonblog.com/Web2_Framework.pdf 41 Tema 1 - Introducción a las aplicaciones web

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

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

Web 2.0 EVOLUCIÓN HISTÓRICA DE LA WEB

Participar

Comunicarse

Compartir Colaborar

Confiar


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



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



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.



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



¿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


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



¿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

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



¿Cómo es una red social?

¿CÓMO ES UNA RED SOCIAL?


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…



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




• Introducción



Navegadores web

Servidores web

Protocolo http




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



Navegadores web

Servidores web

Protocolo http




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



Navegadores web 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



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




WordWideWeb (1990)


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)




Netscape 0.9 (1994)


Internet Explorer 1.0 (1995)


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)




Safari 5.1 (2011)


Firefox 9 (2011)


Google Chrome 16 (2012)

Navegadores web INTRODUCCIÓN A LAS APLICACIONES WEB


http://gs.statcounter.com

http://gs.statcounter.com/

Navegadores web

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



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

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


http://en.wikipedia.org/wiki/Eu_vs._microsoft

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

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



• Introducción



Navegadores web

Servidores web

Protocolo http




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



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

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



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



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



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

http://httpd.apache.org/

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


Es el segundo servidor más usado a (Enero 2014 con 30%)

http://www.iis.net/



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

http://www.iis.net/

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


Es muy rápido y se usa como balanceador de carga

http://nginx.net/



http://nginx.net/

http://nginx.net/

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



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


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…


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


SERVIDORES WEB

http://www.oracle.com/javaee/

http://www.oracle.com/javaee/


• 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


SERVIDORES WEB

http://www.php.net/

http://www.php.net/


• 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


SERVIDORES WEB

http://www.asp.net/

http://www.asp.net/



SERVIDORES WEB

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

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



SERVIDORES WEB


• Introducción



Navegadores web

Servidores web

Protocolo http




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



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



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


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>

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




• Introducción






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




• 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

http://www.ecbloguer.com/marketingdigital/?p=2635




http://responsivewebdesign.ltd.uk/

http://responsivewebdesign.ltd.uk/




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







• 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




• 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




• 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




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




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




• 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




• 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: ¿Qué es la web? (Desarrollo Aplicaciones Web)

Technology

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