INSTITUTO TECNOLÓGICO DE TUXTEPEC

Programación Web

MCyTE. María de los Ángeles Martínez Morales

Unidad 1. Introducción a las aplicaciones web
1.1 evolución de las aplicaciones
web.
 1.1. Evolución de las aplicaciones web.
INTRODUCCIÓN

 Hoy en día, resulta bastante común implementar la

interfaz de una aplicación utilizando páginas web
en vez de las ventanas y los controles específicos de
un sistema operativo concreto.

 En lugar de escribir una aplicación para un sistema

operativo concreto, como puede ser Windows, en
muchas situaciones es preferible crear aplicaciones
web a las que se accede a través de Internet.
 1.1. Evolución de 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.

 1.1. Evolución de 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.
 1.1. Evolución de 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
 1.1. Evolución de 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 multimedia
(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)
 1.1. Evolución de 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í.
 1.1. Evolución de 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

 1.1. Evolución de 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).
 1.1. Evolución de las aplicaciones web.
SitioWeb
 Tipos de sitios web
 Web corporativas de empresas
 Blogs, redes sociales
 Páginas personales
 Buscadores
 Sitios de noticias
 Enciclopedias
 1.1. Evolución de las aplicaciones web.
Aplicaciones 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

 1.1. Evolución de las aplicaciones web.
Aplicaciones 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
 1.1. Evolución de las aplicaciones web.
Aplicaciones 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.
 1.1. Evolución de las aplicaciones web.
Aplicaciones Web
 Se denomina aplicaciones web a aquellas cuya interfaz se
constituye a partir de páginas web.

 Las páginas web no son más que ficheros de texto en un

formato estándar denominado HTML.

 Estos ficheros se almacenan en un servidor web al cual se

accede utilizando el protocolo HTTP (Hypertext Transfer
Protocol) uno de los protocolos de Internet.
 1.1. Evolución de las aplicaciones web.
Aplicaciones Web
 Para utilizar una aplicación web desde una maquina
concreta, basta con tener instalado algún navegador web en
la máquina.

 Desde la máquina cliente, donde se ejecuta el navegador, se

accede a través de la red al servidor web donde esté alojada
la aplicación y de esa forma, se puede utilizar la aplicación
sin que el usuario tenga que instalarla previamente en su
máquina.
 1.1. Evolución de 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.
1.1. Evolución de las aplicaciones web.
Había nacido la Web 1.0
 1.1. Evolución de 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
1.1. Evolución de las aplicaciones web.
Web 1.0
 1.1. Evolución de las aplicaciones web.
Web 1.0
 El diseño de la red y de sus aplicaciones hace que
unos pocos usuarios con el suficiente conocimiento
técnico sea capaz de escribir y publicar en la web 1.0
se sigue el paradigma de libro, es decir: unas pocas
personas con los suficientes medios económicos
pueden publicar textos que muchos otros leerán. De
forma similar, unos pocos usuarios con la suficiente
pericia técnica son capaces de publicar páginas web
que otros muchos podrán leer.
 1.1. Evolución de 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).
 1.1. Evolución de 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
 1.1. Evolución de las aplicaciones web.
Web 2.0
 Es sólo una denominación extraordinariamente
exitosa para la etapa en la que la Web ha
comenzado a utilizarse para los objetivos que fue
concebida hace algo más de veinte años; compartir,
colaborar, aportar, editar y sobre todo comunicar
personas con personas.
 1.1. Evolución de 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.

 1.1. Evolución de las aplicaciones web.
Web 2.0
 El término fue utilizado para referirse a una
segunda generación en la historia del desarrollo de
tecnología Web basada en comunidades de
usuarios y una gama especial de servicios, como las
redes sociales, los blogs, los wikis o las folcsonomías,
que fomentan la colaboración y el intercambio ágil
y eficaz de información entre los usuarios de una
comunidad o red social.
 1.1. Evolución de las aplicaciones web.
Web 2.0
 Se han utilizado muchos nombres para definir esta
etapa de la Web:
 La hypermedia
 La web en directo
 La web programable
 La web activa
 La web en tiempo real
 La web social
 La web de la participación
 La web de la lectura y la escritura
1.1. Evolución de las aplicaciones web.
Web 1.0 vs Web 2.0
1.1. Evolución de las aplicaciones web.
Web 1.0 vs Web 2.0
1.1. Evolución de las aplicaciones web.
Web 1.0 vs Web 2.0
 1.1. Evolución de las aplicaciones web.
Web 1.0 vs Web 2.0
 Organizar contenido
 1.1. Evolución de las aplicaciones web.
Web 1.0 vs Web 2.0
 Información y Referencia
 1.1. Evolución de las aplicaciones web.
Web 1.0 vs Web 2.0
 Páginas personales
 1.1. Evolución de las aplicaciones web.
Web 1.0 vs Web 2.0
 Blogs personales
1.1. Evolución de las aplicaciones web.
Web 1.0 vs Web 2.0
Participar

Confiar Comunicarse

Colaborar Compartir
 1.1. Evolución de las aplicaciones web.
Web 1.0 vs 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

 1.1. Evolución de las aplicaciones web.
Web 2.0: 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.
 1.1. Evolución de las aplicaciones web.
Web 2.0: 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.
 1.1. Evolución de las aplicaciones web.
Web 2.0: Redes Sociales
 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.
 1.1. Evolución de las aplicaciones web.
Web 2.0: 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).
 1.1. Evolución de las aplicaciones web.
Web 2.0: 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)…
 1.1. Evolución de las aplicaciones web.
Web 2.0: 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
 1.1. Evolución de las aplicaciones web.
Web 2.0: Redes Sociales
 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…
 1.1. Evolución de las aplicaciones web.
Web 2.0: Redes Sociales
 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.
 1.1. Evolución de las aplicaciones web.
Web 3.0
 En lo que a su aspecto semántico se refiere, la Web
3.0 es una extensión del World Wide Web en el que
se puede expresar no sólo lenguaje natural,
también se puede utilizar un lenguaje que se puede
entender, interpretar utilizar por agentes software,
permitiendo de este modo encontrar, compartir e
integrar la información más fácilmente.
 1.1. Evolución de las aplicaciones web.
Web 3.0
 Otros de los términos que se han utilizado para definir
la Web 3.0 hacen referencia a la transformación de la
Web en una base de datos, un movimiento hacia la
fabricación de contenido accesible para múltiples
buscadores, la influencia de la Inteligencia Artificial,
laWeb Semántica o la Web geoespacial.

 La Web 3.0 y sus servicios se fundamentan en el

colectivo de la Web Semántica, búsquedas de lenguaje
natural, data-mining, aprendizaje automático y
asistencia de agentes, todo ello conocido como técnicas
de la Inteligencia Artificial o Inteligencia Web.
1.1. Evolución de las aplicaciones web.
Resumen
EVOLUCIÓN DE LA
WEB

La Web 1.0 La Web 2.0 La Web 3.0 La Web 4.0

Páginas Web Social

estáticas
La web La web Ubicua
Semántica

No se podría Surgió en el 2004

interactuar con por Dale Dougherty Timothy “Tim” John
ellas Berners – Lee

Incorporan sistemas
Estaban escritas de gestión de
Trata de enriquecer
a mano en contenido la comunicación
HTML mediante metadatos
semánticos

Base de datos, CSS,

No existían lenguajes de
normas de La web es más
programación inteligente
diseño

No usaban base
de datos Permiten interactuar
1.1. Evolución de las aplicaciones web.
Resumen
La web

Web 1.0 Web 2.0 Web 3.0 Web 4.0

Aplicaciones
Personas Personas Web
conectándose a conectándose a conectándose a Personas conectándose con
la web personas aplicaciones Personas y aplicaciones
web Web de forma ubicua

Información Inteligencia Web Semántica

estática colectiva
Inteligencia Artificial

Web Sintáctica
 1.1. Evolución de las aplicaciones web.
Navegadores 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

 1.1. Evolución de las aplicaciones web.
Navegadores Web
 Un navegador web es una aplicación que se instala en el sistema que
utiliza el usuario.

 El usuario escribe una dirección web (URL - Uniform Resource Locator). La

dirección contiene el nombre del servidor web y el nombre del recurso que
se solicita.

 El navegador hace una petición al servidor y solicita el recurso.

 El navegador descarga el recurso y lo visualiza (o lo descarga si no puede

hacerlo).

 Si el recurso en una página HTML, además de visualizar su contenido,

descarga recursos adicionales como imágenes, estilos, etc. y los visualiza
integrados en la página.
 1.1. Evolución de las aplicaciones web.
Historia: Navegadores Web
 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

 1.1. Evolución de las aplicaciones web.
Historia: Navegadores Web
 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)
 1.1. Evolución de las aplicaciones web.
Historia: Navegadores Web
 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)

 1.1. Evolución de las aplicaciones web.
Servidores Web
 Un servidor web

 Software
 Alberga sitios web estáticos y los sirve con el protocolo http a los
navegadores web
 Ejecuta aplicaciones web que el usuario utiliza desde un
navegador web (usando http)

 Hardware
 Servidor en el que se ejecuta el software de servidor web.
 Generalmente dispone de otros servicios adicionales como un
sistema gestor de base de datos
 1.1. Evolución de 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
 1.1. Evolución de las aplicaciones web.
Servidores Web
 La mayoría de los servidores web permiten que en cada
petición se ejecute un pequeño programa que genera
dinámicamente el recurso que se envía al usuario (server-side
scripting)

 A este contenido generado “al vuelo” se le denomina

contenido dinámico, en contraposición al contenido estático
obtenido del disco duro

 Es bastante habitual que el contenido dinámico se genere con

la información de una base de datos
 1.1. Evolución de 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
 1.1. Evolución de 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