3

01 Aplicaciones web sociales

1. La web social
1.1. Internet, la Web y sus aplicaciones
La web 1.0 se concibió como una colección de documentos estáticos enlazados para su consulta o descarga,
donde los usuarios no podían interactuar con ellos, teniendo que hacer un consumo pull, es decir, se iba a por el
recurso siendo la actualización unidireccional.
De manera progresiva, se desarrollaron métodos que permitiesen la creación de páginas con contenidos dinámicos,
que dio lugar a la web 1.5 en 1997. No tardaron en aparecer diversas arquitecturas y lenguajes de programación,
tanto en la parte del cliente como en la parte del servidor, con lenguajes que permitían el desarrollo de páginas web
dinámicas e interactivas.
Estas tecnologías 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
actualización del contenido pasa a ser bidireccional. Los recursos son más fáciles de producir y consumir.
La evolución de la Web ha llevado a la aparición en 2008 de una nueva etapa llamada social media, y un afán por
socializar más aún, siendo en esta cuando la Internet móvil ha facilitado tener cualquier servicio en los diferentes
dispositivos móviles que existen actualmente.
Lo próximo que nos viene en pocos años es la web semántica, que nos permitirá diferenciar lo que buscamos
dependiendo del contexto en el que nos movamos.
4

01 Aplicaciones web sociales

1. La web social
1.2. Protocolos y estándares
Aunque Internet ha ido creándose sobre la marcha según las necesidades o modas que han ido
surgiendo en los últimos años, 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:
5

01 Aplicaciones web sociales

1. La web social
1.3. Aplicaciones web
La arquitectura de las aplicaciones web consta de máquinas conectadas a una red, Internet o una
Intranet corporativa que sigue el esquema cliente-servidor. 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.
6

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 aparición de tecnologías de que han ampliado
el ancho de banda consiguiendo conexiones más potentes y asequibles a Internet. Y
con la aparición de nuevas especificaciones estándares 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 más potentes, que han desatado una
nueva guerra de complementos con nuevas funciones multimedia, como la
reproducción de vídeos, gráficos vectoriales, animaciones e interactividad para
controlar el mercado, lo que ha provocado una auténtica revolución multimedia en la
Web.
La plataforma Flash de la compañía Adobe es una de las más activas al sacar FLEX,
pero manteniendo su hegemonía en los navegadores con Flash y en los escritorios con
AIR. Se han visto aparecer tecnologías equivalentes como JavaFX, de Oracle o
Silverlight, de Microsoft. Mientras que otras grandes compañías de Internet lideradas
por Google, Amazon o Yahoo han trabajado con estándares como AJAX y han
conseguido en 2012 que se aprobara el nuevo estándar HMTL 5 del W3C que persigue
no requerir de complementos no estándares de terceras empresas.
7

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 más fácil. Esta funcionalidad se denomina servicio web. La
W3C la define como «un conjunto de aplicaciones o de tecnologías con capacidad para interoperar
en la Web. Estas aplicaciones o tecnologías 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 través 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 páginas web que dicho servidor
le suministra. Así pues, en su versión más simple, el navegador debe interpretar el código HTML en
que están escritas y presentarlo al usuario para que este pueda interactuar con el contenido y
navegar hacia otros lugares a través de hiperenlaces. Los navegadores actuales también
interpretan 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, además de otras extensiones, como Flash o
Java, que aumentan las posibilidades de presentación.
• Los principales cinco navegadores web de escritorio que acaparan el mercado son: Internet
Explorer, Mozilla Firefox, Google Chrome, Safari y Opera.
• Las empresas también han adaptado sus navegadores a los sistemas operativos móviles,
pues estos actualmente son el canal más utilizado para acceder a las aplicaciones web y
navegar.
8

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 información y consumirla como se hacía hasta ahora, sino que también 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, círculos o aldeas
dentro de estos sistemas de redes sociales para obtener información de nuestros amigos o de los amigos de estos,
que son los que nos pueden dar mayor valor añadido por su afinidad con nosotros.
Ahora la Web es la conexión de toda la humanidad mediante la tecnología. De manera que los ciudadanos de la Red
(netizens) utilizarán Internet como espacio para relacionarse. Siendo la reputación digital un tema crítico a cuidar que
nos va a afectar hasta el punto de tener que trabajarnos una identidad digital adecuada. Dentro de esta gran
conversación 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 año que va pasando, la presencia virtual de las personas y las empresas en la Red es más 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 añadido que podamos aportar a la conversación 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 reputación 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 estás estudiando este ciclo para capacitarte
como técnico informático, también tendrás que demostrar al resto del planeta tu saber hacer (know how) a través de
tus blogs, tuits, comentarios y en definitiva tus aportaciones virtuales dentro de la social media.
 01 Aplicaciones web sociales
3. Diseño 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 características 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 interpretación del código HTML en una ventana adyacente a la del
código que estamos escribiendo. Es una opción bastante cómoda para no tener
que guardar cada vez las páginas 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 página, como si de un procesador de textos se tratase. El propio
editor se encargará de la generación del documento HTML. Aunque
ampliamente difundidos, estos editores han sido criticados por generar páginas
de poca calidad, y han dado lugar a editores WYSIWYM donde el usuario
introduce los contenidos de forma estructurada, siguiendo su valor semántico
(un título, una sección...), en lugar de su representación 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 edición de
código HTML directamente sobre el navegador, facilitando así la subida al
servidor y colaborar con otras personas. En este tipo destacan Tinkerbin y
Dabblet.
11

01 Aplicaciones web sociales

3. Diseño web
Estructura de una página web
1. La declaración de documento HTML con
DOCTYPE.
2. Elemento HTML, que describe la página
propiamente dicha, y es definido entre
las etiquetas <html> y </html>.
3. Elemento HEAD, que contiene la
cabecera del documento. Esta cabecera
contiene información acerca del
documento, tal como enlaces a hojas de
estilo, metainformación, pero no tiene
que ver con la cabecera que vemos en
el resultado de la página.
4. Comentarios, indicados entre los
símbolos <!-- y -->.
5. Elemento BODY, con el cuerpo en sí de
la página y que contiene los elementos
necesarios para su visualización. En su
contenido tenemos aquellos elementos
que nos ayudan a organizar y formatear
la página, tales como cabeceras,
párrafos, etc.
12

01 Aplicaciones web sociales

3. Diseño web
Elementos y atributos HTML
Elementos de la cabecera <head>
13

01 Aplicaciones web sociales

3. Diseño web
Elementos y atributos HTML
Elementos del cuerpo de la página
14

01 Aplicaciones web sociales

3. Diseño web
Elementos y atributos HTML
Elementos del cuerpo de la página
15

01 Aplicaciones web sociales

3. Diseño web
Elementos y atributos HTML
Elementos de tipo imagen

Elementos para tablas

16

01 Aplicaciones web sociales

3. Diseño web
Elementos y atributos HTML
Elementos de formulario
17

01 Aplicaciones web sociales

3. Diseño 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 página, 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 están formados por declaraciones de pares del tipo propiedad: valor.

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

Dónde ubicar el CSS

Podemos asociar las hojas de estilo a nuestra página de diferentes modos:
1. Estilos en línea:
<h1 style=”background-color: blue; text-color: white;”>

2. Estilos como una hoja interna.

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

3. Estilos en una hoja externa.

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

01 Aplicaciones web sociales

3. Diseño web
Diseño web en la nube: Weebly
Weebly es una herramienta que ofrece, de forma
gratuita y con pocos clics, la creación de sitios web y
blogs con aspecto profesional. Algunas de las
características de Weebly son:
• Interfaz WYSIWYG, mediante arrastrar y soltar
componentes.
• Gran variedad de widgets: galerías de imágenes,
vídeos, audio, mapas, documentos, formularios,
presentaciones, archivos, foros, juegos, canales
RSS o código HTML.
• Uso de diferentes idiomas: inglés, francés,
español, italiano y chino.
• Gran variedad de diseños profesionales,
permitiendo la modificación del CSS y el diseño
HTML, para los usuarios más avanzados.
• No incluye publicidad.
Permite el uso de dominios propios o bien
alojamiento de dominio gratuito.
19

01 Aplicaciones web sociales

4. Google Apps para trabajo colaborativo
El trabajo en grupo o colaborativo es cada vez más importante para el funcionamiento de empresas y
organizaciones, ya que permite la movilidad de los trabajadores. Y una de las compañías que mejor ha
desarrollado esta filosofía 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 búsquedas Google Search para localizar
cualquier cosa dentro del mismo. Además, integra de serie
otros servicios como un gestor de contactos muy potente
que luego podrás utilizar en tus dispositivos móviles, sobre
todo para Android. Otro servicio integrado es Google Talk
para realizar chats escritos o incluso con audio y vídeo.
También incorpora Google Task y Google Adwords. Es tan
modular que podemos ampliarlo con más servicios con la
opción 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 creación de calendarios
compartidos con diferentes contactos y niveles de permisos, y por permitir usar múltiples
calendarios, incluso públicos o de interés general.
20

01 Aplicaciones web sociales

4. Google Apps para trabajo colaborativo
4.3. Blogs: Blogger
Fue una de las primeras herramientas para la
publicación 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 versátil que nos
permite:
• Incluir fotografías gracias a Hello.
• Ordenar las entradas por etiquetas.
• Establecer cierto grado de privacidad.
• Realizar cambios modificando el código 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 documentación, archivos o
información de los miembros, tanto en
público como en privado.
21

01 Aplicaciones web sociales

4. Google Apps para trabajo colaborativo
4.5. Ofimática web: Google Docs o Drive
Con este servicio, primero denominado Google Docs, empezó a competir en el mercado de los
paquetes ofimáticos, donde ya dominaba el mercado de las aplicaciones de escritorio Microsoft
Office y OpenOffice/LibreOffice. Google dio una nueva visión 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
presentación del mismo.
Permite reproducir vídeos y soporta estos
formatos: WebM, AVI, MPEG4, 3GPP, MOV,
WMV, FLV, MPEG2.
• Permite trabajar con los documentos, incluso
sin disponer de conexión a Internet en el modo
desconexión u offline.
• Creación fácil de formularios web que guardan
los valores introducidos en una hoja de cálculo
asociada.
22

01 Aplicaciones web sociales

4. Google Apps para trabajo colaborativo
4.6. Integración en Google Sites
Google pone a nuestra disposición, dentro
de Google Apps, la herramienta Google
Sites, orientada a la creación de sitios web
o intranets de forma sencilla, sirviendo de
punto de acceso a las herramientas de
trabajo colaborativas.

Google Sites permite crear páginas a partir

de plantillas, modificar su código HTML,
manejar archivos adjuntos, añadir
calendarios, contenido multimedia,
presentaciones, fotos y diferentes niveles
de acceso a los recursos.