Tema 1

Aplicaciones web de escritorio 2012/2013

1. La web y sus aplicaciones

1.1. Internet, la World Wide Web y sus aplicaciones

1.2. Esquema de funcionamiento de un servidor web

2. El navegador web

2.1. Navegadores web

2.2. Estándares web

2.3. Acid Tests

2.4. Firefox

3. Herramientas de comunicación

3.1. Cuentas de correo en Gmail

3.2. Calendario Web: Google Calendar

4. Integración de aplicaciones web en el escritorio

4.1. Gears y Google Chrome

4.2. Prism y Firefox

4.3. Google Gadgets

5. EyeOs: integración del escritorio en la web

6. servidores web y Proyecto Bitnami.org

6.1. Servicios web y el Stack base de Bitnami

6.2. Servidor EyeOs sobre el stack LAMP de Bitnami

7. Blogs

7.1. Blogger

7.2. WordPress

Página 1


8. Actividades

INTRODUCCIÓNPara una primera toma de contacto vamos a intentar realizar nuestro glosario, que iremos completando con nuestras explicaciones posteriores:

ASP: XHTML Servlets

CGI: CSS Usabilidad

HTML HTTP DOM

Java Javascript ECMAScript

PHP: JSP PNG

URL XML GNUIceCat

Metapaquete SVG Groupware

Captcha GTalk

1. LA WEB Y SUS APLICACIONESLa web es el servicio e Internet principal, todo lo que las empresas, organismos, comunidades, etc., necesitan para publicar su información genera un espacio abierto que está en continuo crecimiento.

1.1. Internet, www (World Wide Web), y sus aplicaciones

Hacia 1989 surge un sistema basado en hipertextos, donde se podían visualizar documentos haciendo uso de un navegador. En principio sólo se podían consultar o descargar estos documentos estáticos. Poco a poco fue surgiendo la necesidad de crear páginas cuyo contenido fuese dinámico, de forma que se generaban según los parámetros de la petición. Ello llevó a la aparición de aplicaciones escritas en un determinado lenguaje de programación que se ejecutaban en el servidor y podía recibir parámetros de los clientes. El inconveniente de estas aplicaciones es la saturación que suponía del servidor, poco a poco se fue avanzando con el fin de descargar al servidor y surgieron sistemas y lenguajes que permitían incluir código en las páginas HTML. Nacen así: Java, ASP, PHP que permiten el desarrollo de páginas web dinámicas e interactivas.

Página 2


De estas páginas mencionadas se pasó a las aplicaciones web, instaladas en un servidor y cuyo acceso es mediante un navegador. Generan de forma dinámica páginas en formato HTML o XHTML, el navegador las interpreta y presenta al cliente.

La evolución de Internet, el desarrollo de su capacidad de almacenamiento y ejecución de programas genera lo que se denomina “cloud computing” se nos ofrece el software como un servidor más, además de disponer de datos y aplicaciones en la red de forma que sean accesibles desde cualquier lugar mediante un navegador.

Ejemplo de cloud computing es Google Apps que nos ofrece:

Google Calendar Gestionar citas

Gmail correo electrónico

Google Docs procesar textos

1.2. Esquema de funcionamiento de un servidor webEl esquema más básico del funcionamiento de un servidor web sería:

Repetir

Espera peticiones en el puerto TCP indicado (el estándar por defecto para HTTP es el 80).Recibe una petición.Busca el recurso.Envía el recurso utilizando la misma conexión por la que recibió petición.Hasta siempre

Página 3


El cliente le envía una petición al servidor que a su vez consulta su repositorio de páginas y se lo devuelve al cliente.

Esquema básico de funcionamiento del servicio web con páginas estáticas

El cliente le envía una petición de index.html al servidor que busca en su repositorio de páginas el index.html y se lo manda al cliente que muestra la página.

Esquema básico de funcionamiento del servicio web con páginas dinámicas

El cliente le envía una petición de index.php al servidor que a su vez este busca en su repositorio el index.php en este momento el servidor crea a partir del código php el

Página 4


código html consultado las bases de datos correspondientes y después el servidor le devuelve el código html correspondiente al index.php que muestra la página.

2. El navegador web

2.1. Navegadores webUn navegador web es el software o programa que nos permite ver la información que contiene una página web. Traduce el código HTML en el que está escrita la página y lo muestra en la pantalla, permitiéndonos interactuar con su contenido y navegar hacia otras páginas o sitios de la red, mediante enlaces o hipervínculos. El seguimiento de los enlaces de una página a otra se llama navegación, que es de donde se origina el nombre de navegador web.

Algunos navegadores web:

Internet Explorer

Google Chrome

Safari

Opera

Ejercicio 1: Instalar por grupos los siguientes navegadores: Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera. Después utilízalos y rellena la siguiente tabla comparativa:

Versión analizada:

Sistema Operativo:

Tipo de licencia

Permite navegar por pestaña

Dispone de bloqueo de ventanas emergentes

Dispone de bloqueo de publicidad

Permite hacer zoom de página

Página 5


Dispone de una barra de herramientas para algún motor de búsqueda.

Ejercicio 2: busca la definición de fork y a qué se debe el nacimiento de IceCat.

2.2. Estándares webConjunto de mejores prácticas estandarizadas para construir sitios web y a la filosofía del diseño y desarrollo web que incluye esos métodos. El organismo mas influyente en estándares web es World Web Consortium, cuya función es guiar la web hacia su máximo potencial a través de del desarrollo de protocolos y pautas que aseguran el crecimiento futuro de la web.

2.3. Acid testActualmente podemos hablar de dos tipos de test:

Acid2: Evalúa el cumplimiento de las especificaciones sobre HTML, CSS y PNG. ¿Quién fue el primer navegador en superar este test?

Acid3: Se centra en aspectos más dinámicos, evalúa las tecnologías utilizadas en la Web 2.0, además de HTML 4, XHTML 1 y CSS 2.1 y 3. ¿Qué navegador ha pasado este test?

2.4. FirefoxLas características principales de este navegador son:

Posibilidad de bloquear ventanas emergentes.

Gestión de marcadores avanzada y marcadores vivos.

Navegación por pestañas.

Mayor seguridad en el tratamiento de cookies, imágenes y conexiones seguras.

2.5. Ejercicios:1) Visita el siguiente enlace:

http://www.slideshare.net/yenniferuzcategui/principales-navegadores-de-internet

2) Revisa el estudio comparativo de algunos navegadores web, visitando el siguiente enlace:

Página 6

http://www.slideshare.net/yenniferuzcategui/principales-navegadores-de-internet


http://www.softzone.es/reviews/comparativa-entre-ie7-firefox-30-opera-95-y-safari-311/

3) Instalar algunas extensiones de Firefox: se localizan en addons.mozilla.org

Instalar la extensión Brief

Añadir canales.

3. Herramientas de comunicaciónEn el entorno empresarial el trabajo en grupo adquiere cada vez más importancia, por ello deben existir herramientas de trabajo que permitan ese trabajo en grupo donde los trabajadores no deben estar ubicados en el mismo lugar, pero su comunicación debe ser completa. Por este motivo, surgen las llamadas herramientas de comunicación y las herramientas de colaboración y publicación.

Las herramientas de comunicación permiten la comunicación entre los miembros del grupo y son p.e: correo electrónico, mantenimiento de calendarios, agendas,..

Las herramientas de colaboración y publicación ofrecen la posibilidad de editar y compartir documentos, siendo fácil el llevar un control de las versiones anteriores y los cambios realizados.

3.1. Cuentas de correo en GmailPara poder realizar la gestión de una cuenta de correo electrónico con Gmail y ver sus características, lo primero que debemos hacer es tener una cuenta con dicho proveedor.

EJERCICIO: Crearse una cuenta con Gmail.

Creación

Registro

Verificación de palabra distorsionada

Aceptación condiciones de servicio

Una vez creada, ya podemos entrar a ella, inicialmente nos aparecerán en el buzón de recibidos un o varios mensajes de bienvenida. Veamos los diferentes ítems de la pantalla principal:

Menú principal

o Recibidos

o Destacados

Página 7




o Chats

o Enviados

o Borradores

o Todos

o Spam

o Papelera

Ventana principal de mensajes

Barra de botones de Gmail:

o Archivar

o Marcar como spam

o Suprimir

o Mover a

o Etiquetas

o Más acciones

EJERCICIO: Escribir un mensaje

Campo Para: Destinatario, obligatorio si son varios los destinatarios deben ir separador por comas

Campo CC: Es opcional, se accede mediante Añadir CC y sirve para enviar correo a varios destinatarios. Si no deseamos revelar estas direcciones conviene usar el campo CCO.

Campo Asunto: Indicamos el tema del mensaje

EJERCICIO: Averiguar qué son las conversaciones

PRÁCTICA: Correo electrónico

3.2. Calendario web: Google CalendarEs un servico que nos ofrece Google. Permite compartir y sincronizar eventos con nuestros contactos de Gmail, como es una agenda online podemos acceder a ella

Página 8


desde cualquier sitio y preservar los datos de cualquier posible avería de nuestro ordenador.

Características:

Permite importar archivos de Outlook, Yahoo Calendar, iCalendar

Permite usar múltiples calendarios.

Permite compartir calendarios con diferentes contactos y niveles de permisos incluidos nuestros grupos.

Permite importar calendarios públicos de interés general

ACCESO: http://calendar.google.com o bien desde la opción Calendar de Gmail.

CASO PRÁCTICO: Crear y gestionar eventos en Calendar

CASO PRÁCTICO: Crear y compartir nuevos calendarios

4. Integración de aplicaciones web en el escritorio

4.1. Gears y Google Chrome

4.2. Prism y Firefox

4.3. Google Gadgets

Página 9

http://calendar.google.com/

Documents

Tema 1