CFGM Aplicaciones Web

Unidad 1 Aplicaciones web sociales

01 Aplicaciones web sociales

1. La web social
Internet ha muerto? Esto es lo que afirman algunos gures o profetas del ciberespacio, mientras que otros indican que se ha socializado, se ha humanizado utilizando la inteligencia ambiental tanto en nuestros mundos virtuales en la Red (que se han ido fusionando con nuestras vidas fsicas) como con la utilizacin de dispositivos mviles. Los denominados nativos digitales como t (nacidos a partir de las ltimas dcadas del siglo XX) ya no podis vivir sin estar conectados entre vosotros, con las cosas o estas entre ellas. Los blogs, tuits o muros de vuestros amigos requieren de vuestra atencin en tiempo real. Esto mismo quieren las empresas actuales: aprender, conocer, analizar y conversar con sus clientes prosumidores para venderles sus productos, segn sus necesidades propuestas por ellos mismos o por influencers que generan ingentes cantidades de informacin que van a obligar a generar metadatos sobre los mismos que permitan darles una relacin semntica que ayude para catalogarlos mejor y tratarlos como grandes almacenes de datos (en ingls data warehouse) o nuevos sistemas llamados big data que permitan EMERGER conocimiento de ellos o incluso de la Internet profunda o invisible. Siendo la Web el servicio por excelencia, aunque cada vez ms con la Internet mvil se tienda a la utilizacin de aplicaciones web especficas llamadas apps. Las mltiples herramientas que toda organizacin, empresa o usuario dispone para publicar cualquier tipo de contenido, ya sea de forma individual o colectiva (blogs, wikis, etc.), contribuyen a la construccin de un espacio de comunicacin cada vez ms abierto y democratizado.

01 Aplicaciones web sociales

1. La web social
1.1. Internet, la Web y sus aplicaciones
La web 1.0 se concibi como una coleccin de documentos estticos enlazados para su consulta o descarga, donde los usuarios no podan interactuar con ellos, teniendo que hacer un consumo pull, es decir, se iba a por el recurso siendo la actualizacin unidireccional. De manera progresiva, se desarrollaron mtodos que permitiesen la creacin de pginas con contenidos dinmicos, que dio lugar a la web 1.5 en 1997. No tardaron en aparecer diversas arquitecturas y lenguajes de programacin, tanto en la parte del cliente como en la parte del servidor, con lenguajes que permitan el desarrollo de pginas web dinmicas e interactivas. Estas tecnologas dieron paso en 2003 a las aplicaciones web 2.0, donde los usuarios colaboran entre ellos y el consumo pasa a ser push: al usuario ahora le llegan los nuevos contenidos sin tener que ir a buscarlos, la actualizacin del contenido pasa a ser bidireccional. Los recursos son ms fciles de producir y consumir. La evolucin de la Web ha llevado a la aparicin en 2008 de una nueva etapa llamada social media, y un afn por socializar ms an, siendo en esta cuando la Internet mvil ha facilitado tener cualquier servicio en los diferentes dispositivos mviles que existen actualmente. Lo prximo que nos viene en pocos aos es la web semntica, que nos permitir diferenciar lo que buscamos dependiendo del contexto en el que nos movamos.

01 Aplicaciones web sociales

1. La web social
1.2. Protocolos y estndares
Aunque Internet ha ido crendose sobre la marcha segn las necesidades o modas que han ido surgiendo en los ltimos aos, todos los sistemas o servicios aparecidos para un uso generalizado se han ido estandarizando. Estos son los principales organismos que lo han hecho posible con sus funciones y algunos ejemplos:

01 Aplicaciones web sociales

1. La web social
1.3. Aplicaciones web
La arquitectura de las aplicaciones web consta de mquinas conectadas a una red, Internet o una Intranet corporativa que sigue el esquema cliente-servidor. Cuando se trata de pginas web dinmicas, escritas en lenguajes de programacin para el servidor como PHP, ASP.net o JSP, el cdigo HTML que se enva al cliente se construye de forma dinmica dentro del programa servidor en el momento en que se procesa la peticin. Las pginas se crearn a partir de la informacin recibida en la misma peticin, o mediante consultas a bases de datos.

01 Aplicaciones web sociales

1. La web social
1.3. Aplicaciones web interactivas (RIA)
Se han en la etapa de la web 2.0, con la aparicin de tecnologas de que han ampliado el ancho de banda consiguiendo conexiones ms potentes y asequibles a Internet. Y con la aparicin de nuevas especificaciones estndares del W3C como fueron XML, JSON, SOAP, UDDI, WSDL, RSS, ATOM o AMF para la parte del cliente. Lo que ha permitido utilizar estas aplicaciones interactivas de Internet enriquecidas (abreviado como RIA, Rich Internet Application) mucho ms potentes, que han desatado una nueva guerra de complementos con nuevas funciones multimedia, como la reproduccin de vdeos, grficos vectoriales, animaciones e interactividad para controlar el mercado, lo que ha provocado una autntica revolucin multimedia en la Web. La plataforma Flash de la compaa Adobe es una de las ms activas al sacar FLEX, pero manteniendo su hegemona en los navegadores con Flash y en los escritorios con AIR. Se han visto aparecer tecnologas equivalentes como JavaFX, de Oracle o Silverlight, de Microsoft. Mientras que otras grandes compaas de Internet lideradas por Google, Amazon o Yahoo han trabajado con estndares como AJAX y han conseguido en 2012 que se aprobara el nuevo estndar HMTL 5 del W3C que persigue no requerir de complementos no estndares de terceras empresas.
5

01 Aplicaciones web sociales 1.5. Servicios web

Ahora que las aplicaciones web interactivas han evolucionado para los humanos, el siguiente paso se centra en el Internet de la cosas, es decir, que todo lo que nos rodea que no es humano pueda conectarse entre s y nos haga la vida ms fcil. Esta funcionalidad se denomina servicio web. La W3C la define como un conjunto de aplicaciones o de tecnologas con capacidad para interoperar en la Web. Estas aplicaciones o tecnologas intercambian datos entre s con el objetivo de ofrecer unos servicios. Los proveedores ofrecen sus servicios como procedimientos remotos y los usuarios solicitan un servicio llamando a estos procedimientos a travs de la Web.

1.6. El navegador web

Se trata de la puerta de acceso a los servicios que ofrece la Web. El cliente o navegador web (web browser) realiza las peticiones al servidor y presenta al usuario las pginas web que dicho servidor le suministra. As pues, en su versin ms simple, el navegador debe interpretar el cdigo HTML en que estn escritas y presentarlo al usuario para que este pueda interactuar con el contenido y navegar hacia otros lugares a travs de hiperenlaces. Los navegadores actuales tambin interpretan las hojas de estilo en cascada (CSS), que indican cmo deben presentarse los datos, el cdigo JavaScript que aade dinamismo a las pginas, adems de otras extensiones, como Flash o Java, que aumentan las posibilidades de presentacin. Los principales cinco navegadores web de escritorio que acaparan el mercado son: Internet Explorer, Mozilla Firefox, Google Chrome, Safari y Opera. Las empresas tambin han adaptado sus navegadores a los sistemas operativos mviles, pues estos actualmente son el canal ms utilizado para acceder a las aplicaciones web y navegar.

01 Aplicaciones web sociales

2. La social media
2.1. Qu son los medios sociales o social media?
Ya no se acude a la Red solo para obtener informacin y consumirla como se haca hasta ahora, sino que tambin se quiere opinar y producir contenidos (pensar, escribir, compartir y participar) pasando a ser prosumidores (productor + consumidor). Se quiere conversar de t a t con el resto de Internet, aunque creemos grupos, crculos o aldeas dentro de estos sistemas de redes sociales para obtener informacin de nuestros amigos o de los amigos de estos, que son los que nos pueden dar mayor valor aadido por su afinidad con nosotros. Ahora la Web es la conexin de toda la humanidad mediante la tecnologa. De manera que los ciudadanos de la Red (netizens) utilizarn Internet como espacio para relacionarse. Siendo la reputacin digital un tema crtico a cuidar que nos va a afectar hasta el punto de tener que trabajarnos una identidad digital adecuada. Dentro de esta gran conversacin que es la social media, ha surgido la figura de los denominados influencers o famosos que pueden influir con su opiniones en la Red en el resto de la comunidad.

2.2. Identidad digital

Cada ao que va pasando, la presencia virtual de las personas y las empresas en la Red es ms importante. Lo que nos va a obligar, al igual que lo hacen las organizaciones, a potenciar nuestra marca personal. En definitiva, a crear un valor aadido que podamos aportar a la conversacin global y que en definitiva sea lo que nos permita en un futuro no muy lejano entrar en el mercado laboral por la puerta grande. Con una reputacin digital labrada a lo largo de toda nuestra vida, al igual que hacemos en la vida real con los estudios o las capacidades que vamos adquiriendo. Por ello, igual que ests estudiando este ciclo para capacitarte como tcnico informtico, tambin tendrs que demostrar al resto del planeta tu saber hacer (know how) a travs de tus blogs, tuits, comentarios y en definitiva tus aportaciones virtuales dentro de la social media.

01 Aplicaciones web sociales

2. La social media
2.3. Sistema de identificacin global
Ya no basta con disponer de un dominio que nos identifique como empresa o como persona, se ha de crear un identidad digital global y para ello se han ido creando sistemas como OpenID para unificar nuestra informacin y no tener que estar continuamente registrndonos y dando nuestros datos personales cada vez en todos los servicios web nuevos. Y, aunque desde los organismos se ha trabajado por desarrollar un estndar, al final se ha impuesto un estndar de hecho, comola utilizacin de cuentas de grandes compaas.

2.3. Sistema de identificacin global

Internet puede llegar a ser como un cajn de sastre o un gran agujero negro, si empezamos a darnos de alta en servicios sin ningn criterio, porque estn de actualidad, posiblemente acabemos teniendo una huella digital poco organizada que arrastremos a lo largo de toda nuestra vida. Por lo que como punto de partida desde este momento deberamos saber qu hemos hecho hasta ahora y qu sabe Internet de nosotros, esto se denomina EgoSurfing, es decir, navegar o buscar toda la informacin sobre uno mismo. Existen buscadores de identidades como Pipl.com, yasni.com o 123people.es que estn especializados en este tema.

01 Aplicaciones web sociales

3. Diseo web
3.1. Entornos
Editores de texto plano. Se trata de editores de texto bastante simples, como pueden ser el bloc de notas en Windows, o gedit y Kate para GNU/Linux. Algunos de ellos incluyen caractersticas de coloreado de etiquetas, e incluso botones para insertar las etiquetas directamente. Editor de texto con ventanas desdobladas. Muestran el resultado en tiempo real de la interpretacin del cdigo HTML en una ventana adyacente a la del cdigo que estamos escribiendo. Es una opcin bastante cmoda para no tener que guardar cada vez las pginas y abrirlas con el navegador. Ejemplos de estos editores son Bluefish, BlueGriffon en Linux o Coda para Mac. Editores WYSIWYG. Ofrecen la posibilidad de trabajar directamente con el resultado de la pgina, como si de un procesador de textos se tratase. El propio editor se encargar de la generacin del documento HTML. Aunque ampliamente difundidos, estos editores han sido criticados por generar pginas de poca calidad, y han dado lugar a editores WYSIWYM donde el usuario introduce los contenidos de forma estructurada, siguiendo su valor semntico (un ttulo, una seccin...), en lugar de su representacin final. Algunos editores WYSIWYM son WYMean Editor o WebCS Editor. Dentro de los editores WYSIWYG podemos destacar Amaya (creado por la W3C), KompoZer o Dreamweaver (para entornos MS, con licencia), entre muchos otros. Editores on-line. Otro tipo de editores son los que nos permiten la edicin de cdigo HTML directamente sobre el navegador, facilitando as la subida al servidor y colaborar con otras personas. En este tipo destacan Tinkerbin y Dabblet.

01 Aplicaciones web sociales

3. Diseo web
Estructura de una pgina web
1. 2. La declaracin de documento HTML con DOCTYPE. Elemento HTML, que describe la pgina propiamente dicha, y es definido entre las etiquetas <html> y </html>. Elemento HEAD, que contiene la cabecera del documento. Esta cabecera contiene informacin acerca del documento, tal como enlaces a hojas de estilo, metainformacin, pero no tiene que ver con la cabecera que vemos en el resultado de la pgina. Comentarios, indicados entre los smbolos <!-- y -->. Elemento BODY, con el cuerpo en s de la pgina y que contiene los elementos necesarios para su visualizacin. En su contenido tenemos aquellos elementos que nos ayudan a organizar y formatear la pgina, tales como cabeceras, prrafos, etc.

3.

4. 5.

10

01 Aplicaciones web sociales

3. Diseo web
Elementos y atributos HTML
Elementos de la cabecera <head>

11

01 Aplicaciones web sociales

3. Diseo web
Elementos y atributos HTML
Elementos del cuerpo de la pgina

12

01 Aplicaciones web sociales

3. Diseo web
Elementos y atributos HTML
Elementos del cuerpo de la pgina

13

01 Aplicaciones web sociales

3. Diseo web
Elementos y atributos HTML
Elementos de tipo imagen

Elementos para tablas

14

01 Aplicaciones web sociales

3. Diseo web
Elementos y atributos HTML
Elementos de formulario

15

01 Aplicaciones web sociales

3. Diseo web
CSS
Las hojas de estilo en cascada (Cascading Style Sheets CSS) son documentos que nos sirven para definir una serie de estilos a aplicar sobre determinada pgina, ahorrando mucho trabajo. Una hoja de estilos CSS est formada por un conjunto de reglas, formadas por selectores y un bloque de estilos, con el formato que se aplicar a los elementos del documento que coincidan con cierto selector. Estos bloques de estilo se definen entre llaves, y estn formados por declaraciones de pares del tipo propiedad: valor.

Selectores
Para indicar los elementos que se vern afectados por cierto estilo, lo podemos hacer de varias formas: 1. A travs del tipo de elemento, indicando como selector el elemento HTML. 2. A travs de su clase (atributo HTML class), el selector ser el nombre de la clase precedida del punto (.). 3. A travs de su identificador (atributo HTML id), el selector consistir en el id precedido de la almohadilla (#).

Dnde ubicar el CSS

Podemos asociar las hojas de estilo a nuestra pgina de diferentes modos: 1. Estilos en
<h1 style=background-color: blue; text-color: white;>

lnea:

2. Estilos

como

una

hoja

interna.

<head><style type=text/css>p {color:#ffffcc; margin-left: 20px;}</style></head>

3. Estilos
16

en

una

hoja

externa.

<head><link rel=stylesheet type=text/css href=miestilo.css /></head>

01 Aplicaciones web sociales

3. Diseo web
Diseo web en la nube: Weebly
Weebly es una herramienta que ofrece, de forma gratuita y con pocos clics, la creacin de sitios web y blogs con aspecto profesional. Algunas de las caractersticas de Weebly son: Interfaz WYSIWYG, mediante arrastrar y soltar componentes. Gran variedad de widgets: galeras de imgenes, vdeos, audio, mapas, documentos, formularios, presentaciones, archivos, foros, juegos, canales RSS o cdigo HTML. Uso de diferentes idiomas: ingls, francs, espaol, italiano y chino. Gran variedad de diseos profesionales, permitiendo la modificacin del CSS y el diseo HTML, para los usuarios ms avanzados. No incluye publicidad. Permite el uso de dominios propios o bien alojamiento de dominio gratuito.

17

01 Aplicaciones web sociales

4. Google Apps para trabajo colaborativo

El trabajo en grupo o colaborativo es cada vez ms importante para el funcionamiento de empresas y organizaciones, ya que permite la movilidad de los trabajadores. Y una de las compaas que mejor ha desarrollado esta filosofa de trabajo colaborativo es Google y sus Apps.

4.1. Correo web: Gmail

Es uno de los servicios estrella de Google que ofrece gratuitamente de momento, ya que es un cliente web muy innovador que utiliza el concepto de etiquetas para poder organizar y filtrar la correspondencia, pudiendo utilizar su motor de bsquedas Google Search para localizar cualquier cosa dentro del mismo. Adems, integra de serie otros servicios como un gestor de contactos muy potente que luego podrs utilizar en tus dispositivos mviles, sobre todo para Android. Otro servicio integrado es Google Talk para realizar chats escritos o incluso con audio y vdeo. Tambin incorpora Google Task y Google Adwords. Es tan modular que podemos ampliarlo con ms servicios con la opcin de Labs.

4.2. Calendario web: Google Calendar

Se trata del servicio de agenda y calendario que nos ofrece Google. Permite compartir y sincronizar eventos con nuestros contactos de Gmail. Al tratarse de una agenda on-line, podemos acceder desde cualquier sitio. Destaca por permitir la creacin de calendarios compartidos con diferentes contactos y niveles de permisos, y por permitir usar mltiples calendarios, incluso pblicos o de inters general.
18

01 Aplicaciones web sociales

4. Google Apps para trabajo colaborativo

4.3. Blogs: Blogger
Fue una de las primeras herramientas para la publicacin de blogs. Adquirido por Google en 2003, dispone de su propio servidor para el alojamiento o hosting de blogs: Blogspot. Se trata de una herramienta muy verstil que nos permite: Incluir fotografas gracias a Hello. Ordenar las entradas por etiquetas. Establecer cierto grado de privacidad. Realizar cambios modificando el cdigo HTML.

4.4. Google Groups

Es un servicio gratuito para gente con intereses comunes (una clase, un grupo de trabajo, de amigos, etc.) que ofrece un espacio en la Web donde realizar debates, compartir documentacin, archivos o informacin de los miembros, tanto en pblico como en privado.
19

01 Aplicaciones web sociales

4. Google Apps para trabajo colaborativo

4.5. Ofimtica web: Google Docs o Drive
Con este servicio, primero denominado Google Docs, empez a competir en el mercado de los paquetes ofimticos, donde ya dominaba el mercado de las aplicaciones de escritorio Microsoft Office y OpenOffice/LibreOffice. Google dio una nueva visin a estas aplicaciones, llevando dicho servicio a la Web.
Google Docs/Drive introduce novedades entre las que destacan: Permite editar documentos de manera colaborativa en tiempo real por varios usuarios al mismo tiempo. Permite compartir y/o publicar los documentos en la Web directamente, as como lanzar un chat en directo mientras se realiza la presentacin del mismo. Permite reproducir vdeos y soporta estos formatos: WebM, AVI, MPEG4, 3GPP, MOV, WMV, FLV, MPEG2. Permite trabajar con los documentos, incluso sin disponer de conexin a Internet en el modo desconexin u offline. Creacin fcil de formularios web que guardan los valores introducidos en una hoja de clculo asociada.
20

01 Aplicaciones web sociales

4. Google Apps para trabajo colaborativo

4.6. Integracin en Google Sites
Google pone a nuestra disposicin, dentro de Google Apps, la herramienta Google Sites, orientada a la creacin de sitios web o intranets de forma sencilla, sirviendo de punto de acceso a las herramientas de trabajo colaborativas. Google Sites permite crear pginas a partir de plantillas, modificar su cdigo HTML, manejar archivos adjuntos, aadir calendarios, contenido multimedia, presentaciones, fotos y diferentes niveles de acceso a los recursos.

21

01 Aplicaciones web sociales

5. Integracin de aplicaciones web en el escritorio

5.1. Site-Specific Browser
Las Site-Specific Browser (SSB) son aplicaciones que nos permiten acceder a aplicaciones web, bien en Internet o en una red local, desde un nico punto, simplificando la interfaz que pueda ofrecer un navegador web (sin mens ni barras), de modo que se comporten como aplicaciones de escritorio, pudiendo tener accesos en los mens del sistema o iconos en el escritorio. Las aplicaciones web ms susceptibles de ser accesiblesa travs de SSB son las redes sociales o sistemas de gestin empresarial.

22

01 Aplicaciones web sociales

5. Integracin de aplicaciones web en el escritorio

5.2. Widgets en el escritorio
Los widgets (window-gadget) son pequeos programas que aportan determinadas funcionalidades, muy simples y concretas, desde consultar la previsin meteorolgica, hasta leer el correo o consultar nuestra agenda. Inicialmente aparecidos en el entorno Mac OS X, fueron posteriormente importados por Yahoo! a ordenadores personales. Existen varios sistemas de widgets, como Super Karamba, Yahoo Widgets, Google Gadgets o Screenlets. En el siguiente caso prctico, vamos a ver cmo instalar y configurar Screenlets en Ubuntu.

23

01 Aplicaciones web sociales

5. Integracin de aplicaciones web en el escritorio

5.3. Aplicaciones en el navegador
Una tendencia que est aumentando en los ltimos aos es la de incluir aplicaciones directamente en el navegador web. Ejemplo de ello son la Chrome Web Store, para Chrome/Chromium o el Mozilla Marketplace, as como la App Store de Apple para iOS y Google Play para Android. Chrome Web Store fue lanzada el 7 de diciembre de 2010, y ofrece aplicaciones, extensiones y temas visuales para el navegador. Permite aadir aplicaciones a cualquier desarrollador y adquirirlas a los usuarios que lo deseen.

5.4. Del escritorio a la nube

Un paso ms all, nos encontramos con los sistemas operativos orientados a la nube (cloud-centric OS), que ofrecen un mnimo sistema operativo, cuyas aplicaciones corren directamente en la nube. Ejemplos de ellos son Jolicloud, Peppermint, gOS, EasyPeasy, MeeGo, y cmo no, Google Chrome OS, que se ejecuta sobre el navegador web Google Chrome.

24

01 Aplicaciones web sociales

5. Integracin de aplicaciones web en el escritorio

5.5. Escritorios web
El paradigma de escritorio en la nube llega a su mxima expresin con los conocidos webOS, o sistemas operativos web. Se trata de aplicaciones web que emulan el comportamiento de un sistema operativo completo, con su entorno grfico y aplicaciones, y al que accedemos a travs de un navegador web. Estas aplicaciones se enmarcan dentro de las PaaS (Platform as a Service) y SaaS (Software as a Service). Con los webOS podemos acceder a nuestro escritorio virtual desde cualquier punto del mundo o dispositivo, nicamente a travs de un navegador web. El proyecto de software libre EyeOS se enmarca dentro de este tipo de escritorios. Un sistema operativo multiplataforma de computacin cloud, que responde a la nueva concepcin de Internet como plataforma de servicios. Otra plataforma libre de similares caractersticas es Lucid-Desktop (http://www.lucid-desktop.org/), un entorno de escritorio web con bastantes aplicaciones por defecto: visor de imgenes, editor de textos, reproductor de audio...

25

01 Aplicaciones web sociales

Crditos:
Derechos reservados 2013, respecto a la segunda edicin en espaol, por: McGraw-Hill/Interamericana de Espaa, S.L.

Autor del libro del alumno: Ral V. Lerma-Blasco, Jos A. Murcia Andrs, Elvira Midsuf
Autores del material complementario: Ral V. Lerma-Blasco, Jos A. Murcia Andrs, Elvira Midsuf, Marcos Villagordo Castejn Equipo editorial: Ariadna Alls, Paloma Snchez, Silvia G. Olaya Fotografas: 123RF

26