CFGM.

Aplicaciones web
Unidad 1
Internet y Aplicaciones web.
 CONTENIDOS
1. Conceptos básicos de Internet
2. Evolución de la Web
3. La Web y sus Aplicaciones
4. El navegador web
5. Protocolos y estándares
6. Servidores web
7. Esquema de funcionamiento de un servidor web
8. Instalación de un servidor Web
9. Servicio Web
10. Estructura de la información de un sitio web

1
1. Conceptos básicos de Internet
Internet engloba las tecnologías que hacen posible que los
ordenadores ubicados en diferentes lugares del mundo se conecten
entre sí y puedan compartir (cables, modems, protocolos,..). Servicios
que ofrece: e-mail, ftp, telnet, www, videoconferenica, news,…

Web es el conjunto de documentos que se conectan entre ellos a través

de enlaces o links. Estos documentos reciben el nombre de páginas
web.

Sitios web (website) son conjuntos estructurados de páginas web de

una misma organización o empresa.

Servidor web es un programa diseñado para aceptar peticiones HTTP

del navegador y servir las páginas web que tiene alojadas del sitio web.

Web Host son los ordenadores que contienen toda la información de

los sitios web y el servicio que ofrecen es HOSTING.
1. Conceptos básicos de Internet

HTTP (Hypertext Transference Protocol): es el protocolo de

transferencia de hipertexto que los navegadores utilizan para realizar
peticiones a los servidores web y recibir las respuestas de ellos.
Protocolo para ver páginas web

WEB = INTERNET + HTTP

La Web fue creada en 1989 por

Tim Berners Lee. Consistía en
una forma de organizar la
información usando internet y el
protocolo HTTP
2. Evolución de la Web
•Web 1.0: colección de documentos estáticos enlazados, donde los usuarios no
podían interactuar. Son creadas con lenguaje HTML y sólo para mostrar información

•Web 1.5: páginas con contenidos dinámicos (cgi, php, asp, SGBD)
•Web 2.0: Páginas dinámicas colaborativas donde los usuarios crean y comparten:
redes sociales, foros, compartir fotos, vídeo, músic, blog, ofimática web…

•Web 3.0: entiende y relaciona lo que el usuario busca (semántica), las páginas
están dotadas de significado que permite acceso a la información de forma más
eficiente.

•Web 4: añaden inteligencia artificial, imágenes 3D y lenguaje natural. Objetivo:

integrar el Internet de la cosas y la comunicación entre máquinas o sitios web.
 2. Evolución de la Web
Web 1 Web 2 Web 3 Web 4

• Escritas a mano • Uso BD • Web como una •Inteligencia Artificial

en Código HTML • Redes sociales gran BD
• Contenido y Distribuida •Integración del
• Usuarios Internet de las cosas
diseño juntos pueden • Web semántica
• Sin normas de almacenar y • Acceso por •Comunicación entre
diseño compartir múltiples máquinas o sitios
• No BD: todos • Apl. Web dispositivos: web
visitantes, sin Colaborativas tele, pda, móvil,
registro tablet,.. •No intervención de
• Cualquier
• Usuario pasivo: usuario puede • Web las personas
No comentarios crear espacio, geoespacial: inf.
ni añadir fotos, vídeos, Geográfica+inf. •En Desarrollo
contenido opiniones Web
• Contenido • La mayor parte • Ambiente 3D
generado por del contenido es • Acceso eficiente
empresas generado por a la información
usuarios
 3. La web y sus aplicaciones
Aplicación Web es el software que reside en un ordenador, denominado
servidor web, que los usuarios pueden utilizar a través de Internet o de una
intranet, con un navegador web, para obtener los servicios que ofrezca.

Según el tipo de acceso pueden ser:

• Públicas: como las tiendas virtuales, diarios
digitales, portales de Internet, etc.

• Restringidas: como las intranet, que

ofrecen servicios para mejorar las gestiones
internas de una empresa, tales como como
el control de horas de su personal, gestión
de proyectos y tareas,.. También suele estar
restingido el acceso en extranets, cuyo
objetivo es aumentar y mejorar el servicio
con distribuidores, clientes, proveedores,
comerciales o colaboradores externos.

6
3. La web y sus aplicaciones
Página web estática: aquella que muestra información al navegante, de forma
que este se limita a obtener dicha información, sin que pueda interactuar con la
página web visitada.
Página web dinámica: aquella que contiene elementos que permiten una
comunicación activa entre usuario y la aplicación, y cuyo contenido se genera a
aprtir de lo que un usuario introduce en ella

Ventajas Aplicaciones Web:

 Facilidad de acceso, solo es necesario un navegador web
 Independencia del sistema operativo
 Facilidad de actualiación y mantenimiento, sin tener que redistribuir y
reinstalar el software a todos los usuarios.
3. La web y sus aplicaciones

El desarrollo de Internet ha dado

lugar a la computación en la
nube (cloud computing).

Internet (la nube) ofrece también

el software como un servicio más
y nos permite disponer de datos
y aplicaciones en la red, de modo
que sean accesibles desde
cualquier lugar a través de un
navegador.

Google Apps ofrece un claro

ejemplo de computación en
nube.

8
 4. El navegador web
Es la puerta de acceso a los servicios que ofrece la web. En la arquitectura cliente-servidor, el cliente o
navegador web realiza las peticiones al servidor y presenta al usuario las páginas web que dicho
servidor le suministra.

El navegador interpreta el código en que están escritas y lo transforma en HTML para presentarlo al
usuario y que éste pueda interactuar con el contenido y navegar.
Los navegadores actuales interpretan:
• HTML
• Las hojas de estilo en cascada (CSS) que indican cómo deben presentarse los datos
• El código javascript que añade dinamismo a las páginas
• Otras extensiones, como Flash o Java, que aumentan las posibilidades de presentación.
Las empresas han tenido que adaptar sus navegadores a los nuevos dispositivos móviles, sacando
versiones específicas para ellos, navegador móvil (mobile browser) como Dolphin, Opera Mobile,
Skyfire, Firefox, Chrome
También están surgiendo dispositivos para televisores, denominadosInternet TV o Smart TV, que
permiten conectarse a Internet y utilizar aplicaciones Web. En este campo el ue más está trabajando con
los fabricantes es Opera Los más utilizados actualmente son:

Opera
Firefox

Internet Explorer Chrome

9 Safari
5. Protocolos y estándares

 Protocolos Web: principal protocolo en la Web es HTTP, que es el protocolo de

transferencia de hipertexto. Es el método más común de intercambio de información
en la World Wide Web, por el cual se transfieren las páginas html a un ordenador.
Otros servicios y protocolos en Internet son correo electrónico (smtp), transmisión de
archivos (ftp), …

 Estándares Web: conjunto de recomendaciones sobre la creación e interpretación

de documentos web, así como de la accesibilidad, la interoperabilidad y la usabilidad
sobre el desarrollo y la administración de sitios y servicios web.

 El organismo más influyente en materia de estándares web es el W3C (World Wide

Web Consortium)
6. Servidores Web
Un servidor web es un programa diseñado para aceptar peticiones
HTTP del navegador y servir las páginas web que tiene alojadas.
Cada sitio web tiene una dirección única conocida como URL.

http://www.ucm.es/BUCM/servicios/5760.php

Protocolo nombre de dominio ruta en el servidor

6. Servidores Web

Para que una conexión a Internet sea posible es

necesario:
• Servidor web: Es un servidor que está acondicionado para
servir páginas web las 24 horas del día.
• Dominio: Es el sitio web al que queremos acceder,
introduciéndolo en la barra de direcciones del navegador.
• Servidor DNS: Es el encargado de transformar el nombre
del dominio de un servidor web en la dirección IP.
6.1. Servidores Web : dominio
Los dominios son los nombres de los sitios web que visitamos. Puesto
que acceder a los sitios web a través de su dirección IP es bastante
complicado pues sería necesario memorizar la IP de cada sitio que
quisiéramos visitar, los dominios nos facilitan la navegación.

Se clasifican en dos tipos:

Internacionales. .com Compañía comercial

Hacen referencia al .org Organización sin fines de lucro
tipo de organización .net Redes y servicios Internet
.edu Institución educativa
que es dueña del
.gob Organización gubernamental
dominio.

Dominios territoriales o .es España

dominios país. Representan a .fr Francia
.mx México
un país y están a cargo del .ar Argentina
estado de cada nación .it Italia
.uk Reino Unido
.de Alemania
6.2. Servidores Web : ISP
Los Proveedores de servicios de Internet o ISP. Para establecer
una conexión a Internet se necesita un Proveedor de Servicios de
Internet o ISP. Son empresas dedicadas a conectar a Internet a
los usuarios, o las distintas redes que tengan, y a dar el
mantenimiento necesario para que el acceso funcione
correctamente. (son proveedores de servicio Ono, Tele2,
Telefónica, Jazztel, Orange)
6.3. Servidores Web : DNS
Los servidores DNS (Domain Name Server- Servidor de nombres de
dominio) son los que resuelven el nombre de un dominio en una
dirección IP determinada.

Los usuarios generalmente no se comunican directamente con el

servidor DNS: la resolución de nombres se hace de forma
transparente por las aplicaciones del cliente (por ejemplo,
navegadores, clientes de correo y otras aplicaciones que usan
Internet).

La mayoría de usuarios utilizan como servidor DNS el proporcionado

por el proveedor de servicios de Internet.
6.3. Servidores Web : DNS
Cuando ponemos por ejemplo, www.google.es en la barra del
navegador, En primer lugar, el navegador identifica la URL y, a
continuación, solicita al servidor DNS la dirección IP. El servidor DNS
indica al navegador que tiene que ir a buscar la información de la
página web a la IP 173.194.34.208

El navegador establece una conexión con la dirección IP proporcionada

por el servidor DNS, hace la petición a la IP 216.239.59.147 para el
dominio www.google.es El servidor web sirve la página web y el
navegador muestra la página solicitada..
 7. Esquema de funcionamiento de un servidor
web
La arquitectura de las aplicaciones web consta de máquinas
conectadas a una red, por lo general, Internet o una Intranet
corporativa que sigue el esquema cliente-servidor en nuestro
caso de servidores web

Esquema básico del servicio web

17
 7. Esquema de funcionamiento de un servidor web
Cuando un cliente realiza una petición de una URL a un servidor, teniendo
en cuenta que gracias al servicio DNS conocemos su IP, le pide una página
web. Esta se busca en el repositorio de páginas del servidor y es devuelta al
cliente. Toda esta comunicación se lleva a cabo mediante el protocolo HTTP,
y el código de las páginas es básicamente HTML junto con código CSS y
JavaScript

Con páginas estáticas

19
 7. Esquema de funcionamiento de un servidor web
Con páginas dinámicas

Cuando se trata de páginas web dinámicas, escritas en lenguajes de programación

para el servidor como PHP, ASP.net o JSP, el código HTML que se envía al cliente
se construye de forma dinámica dentro del programa servidor en el momento en
que se procesa la petición. Las páginas se crearán a partir de la información
recibida en la misma petición, o mediante consultas a bases de datos.

20
8. Instalación de un servidor Web
.

Instalar un servidor Web, generalmente se

necesita:

• Apache: servidor web

• Base de datos: MySQL

• Intérprete lenguaje PHP

 8.1. Servidores web y Proyecto Bitnami.org
Existen, por ejemplo, webs sociales, sistemas de gestión de contenidos, wikis o blogs en
los que se puede interactuar con los usuarios, mediante el uso de bases de datos u otras
herramientas.
Así pues, necesitamos servidores web que interactúen con todos estos sistemas.

Para facilitar la labor de instalación, el proyecto de software libre Bitnami.org nos ofrece
un conjunto de paquetes preinstalados, a los que se denomina stacks, preparados para
instalar gran parte de las herramientas de publicación web existentes sobre el módulo
base LAMP para GNU/Linux y WAMP para Windows de una forma muy sencilla.

22
8.2. Servidores web y XAMPP
XAMPP: servidor web Apache + gestor BD MySQL + PHP y Perl

Instalación en:

• Windows

• Linux
9. Servicio web: concepto y protocolos
Servicio Web: son el conjunto de aplicaciones o tecnologías con
capacidad para interoperar en la Web. Estas tecnologías intercambian
datos entre ellas con el fin de ofrecer unos servicios.

• Permiten la comunicación de una aplicación con otra sin intervención

humana

• Son independientes de la plataforma y del lenguaje

• Se definen a partir de los siguientes protocolos:

• XML: lenguaje de marcas para describir la información, protocolo base
de otros protocolos
• SOAP: protocolo que define cómo dos objetos en diferentes procesos
pueden comunicarse por medio de intercambio de datos XML de
mensajería que indica cómo se deben codificar los mensajes
• WSDL: describe la interfaz pública a los servicios web
9. Servicio web: funcionamiento
Funcionamiento básico de los servicios web:
1. Una empresa, como proveedor, implementa su servicio y lo registra
en el agente o UDDI que hace de listín público de servicios web.
(UDDI: catálogo de servicios de Internet)
2. El cliente o consumidor busca el servicio web que necesita a través
del UDDI
3. El cliente puede acceder al servicio web del proveedor y decidir si lo
utiliza Agente del servicio.
Catálogo de servicios en internet.

2
1 Localización
Registro de de servicios.
servicios.

3
Invocación
de serv.
9. Servicio web: ejemplo
Ejemplo:
Un usuario (Cliente del servicio) quiere reservar un vuelo para ir a Barcelona y lo realiza por
internet. El usuario escribe la URL de la agencia de viajes (proveedor del servicio) y solicita la
información que necesita.
El proveedor para proporcionar la información necesita obtener información de otros recursos
(otros servicios web) en relación al vuelo solicitado por el usuario. Así se convierte en cliente de
otros servicios web. Cuando la obtiene, se la proporciona al usuario.
10. Estructura de la información de un sitio web
Recomendaciones para organizar y diseñar un sitio :

 Dominio: debe de ser corto y fácil de recordar. Preferible el .com o el

propio del país donde se quiera ubicar el sitio (.es)

 Hosting (empresa que ofrezca el servicio de alojamiento web), teniendo

en cuenta que es mejor escoger el mismo país para la empresa que
ofrece el servicio y la ubicación del sitio a crear.
Hay que evitar hosting lentos y con caídas frecuentes, igualmente
evitar los alojamientos extremadamente baratos.

 La información del sitio web debe estar lo más estructurada posible,

es decir, hay que crear páginas por ideas, o productos o servicios o
temas.
Establecer jerarquías en árbol entre páginas de manera que no se
superen los 4-5 niveles de jerarquía.
Cada página tendrá un enlace a todas las que están por debajo de su
jerarquía, a la página superior en la jerarquía, a la página principal y al
mapa de la web
10. Estructura de la información de un sitio web
Mapa web: es una lista de las páginas de un sitio web accesibles por
parte de los buscadores y los usuarios.

Ejemplo
10. Estructura de la información de un sitio web
Recomendaciones para que las páginas seaneficientes y eficaces:

 Compatibles con los navegadores más actuales.

 Resolución compatible, las páginas ocupen el 100% del monitor.
 Fáciles de navegar , una estructura sencilla que cuente con un
menú de navegación para que el visitante no se pierda.
 Carga rápida de las páginas evitando contenidos e imágenes
innecesarias, y reduciendo el tamaño de imágenes y elementos
multimedia.
 Diseñar las páginas de forma organizada de manera que sea muy
fácil su actualización.
 Fácil de localizar en los buscadores
 poner título del documento,
 etiquetas <H1> o <H2> del lenguaje HTML,
 introducir algunas palabras clave en la etiqueta <META> del lenguaje HTML
 Incluir el máximo de información significativa posible en las primeras 25 líneas
de la página, ya que algunos motores de búsqueda las usan para indizar su
base de datos.
11. Posicionamiento SEO

El objetivo del SEO es mejorar la visibilidad de tu página web, de manera

que los motores de búsqueda puedan leerla y navegar a través de ella con
facilidad.
Recomendaciones:
• (Rellenar por el alumnado)