You are on page 1of 63



Web page
Updated: 10/11/2017 by Computer Hope
A web page or web page is a document commonly written
in HyperText Markup Language (HTML) that is accessible through
the Internet or other network using an Internet browser. A web
page is accessed by entering a URL address and may contain text,
graphics, and hyperlinks to other web pages and files. The page
you are reading now is an example of a web page.
How to open a web page
To view a web page requires a browser (e.g. Internet
Explorer, Edge, Safari, Firefox, or Chrome). For example, you are
reading this web page using a browser. Once in a browser, you can open
a web page by entering the URL in the address bar. For example, typing
"" opens the Computer Hope
ESD page. If you don't know the URL of the website you want to visit,
you can use a search engineto find the web page or use the search on
the website containing the web page.
When was the first web page created?
The first web page was created at CERN by Tim Berners-Lee on August
6, 1991. You can visit and browse the first website and first web page at
the address.
 The history of the Internet.
 Who invented the Internet?

What is the difference between a website and web page?

A website refers to a central location that contains more than one web
page. For example, Computer Hope is considered a website, which
includes thousands of different web pages, including this web page you
are reading now.

In the above example, of a URL, the web page is "url.htm" and is always
the last part of the URL. For URL's that do not have an ending
of .htm, .html, .php, .cgi, .pl, or other file extension, the server is
loading the default index.htm web page in that directory. For example,
on our contact page URL (,
there is no web page. In this case, the default index file loads from the
contact/ directory.
Examples of a web page
As mentioned earlier, this page that you are reading now is an example
of an HTML web page and what a typical web page looks like on the
Internet. This web page consists of several elements
including CSS, images, and JavaScript.
Tip: You can view all of code by viewing the source code of the web
Although the body of a web page is created using HTML, that HTML code
can be created using an HTML editor and written by a human or
generated using server-side scripts or other scripts. Typically a web
page created by a human ends with a .htm or .html file extension. For
example, this page has the file name "webpage.htm". Pages generated
by a script can end in .cgi, .php, .pl, and other extensions.
What are the elements of a web page?
Every web page is different. However, most pages contain some or all of
the elements contained on this web page. Below is a breakdown of each
of the major elements of an Internet web page to help give a web
designer an idea of what to include and new computer users and idea of
where things are found.

1. The website, blog name, logo, or company name is almost always in the top-left
corner of each web page. It's also a good idea to include a slogan or a brief
statement about the page to give new visitors an instant understanding of the
site. Also, this section of the web page is usually a link that can link you back to
the homepage.
2. The search allows a visitor to quick search a website for other related
information and should be available on every page.
3. The navigation bar or menu for a web page is typically always found on the top
or left-hand side of each web page and should include links to each of the major
sections of the website.
4. Advertisement banners can be shown in different places on a web page and are
used to help pay for the expenses of running a website and company. Typically
ad banners will be found at the top, left, right, or bottom of a page and may also
be included within the content.
5. Social share links allow visitors to share your site with other co-workers,
friends, and family on social networking sites.
6. The breadcrumbs help give the visitor an immediate understanding of where
they are on the website as well as a way to backtrack to other main sections of
the website.
7. The heading should be included on the top of every web page and should be
created using the <h1> HTML tag.
8. The opening paragraph is one of the most important paragraphs on the web page
and should help draw the visitor into reading the web page. One way to help
draw the visitors eyes is to include a hero image near the opening paragraph.
9. Each web page should be broken up into other headings that allow the visitor to
easily skim and find what is most interesting on the page. When creating a web
page these can be done using the <h2> to <h6> HTML tags.
10. Having a method of allowing a visitor to provide feedback is also a requirement
for most web pages. Giving the visitor links or buttons to click for feedback is a
good step to let you know if a web page is helpful or not.
11. Additional information and tools such as a button to print the page can also be
helpful for users on most web pages.
12. The footer should include any other information that is important to the
company or website and should be included on all web pages to help the visitor
continue to other web pages.
13. The Copyright and any legal or privacy notice should also be on all web pages.
Not only can this link to relevant legal information it is an indication for most
visitors that they have reached the end of the web page.
14. Finally, a back to the top button or link at the bottom of the footer can also be
helpful for visitors to quickly get back to the top of the web page to access any
of the menu links or other tools found at the top of the page.
Tip: If you are designing a web page and want more visitors we also
suggest reading our web page promotion tips for a full listing of tips to
use when creating a web page.
What can you do on a web page?
On most websites, you read the information contained on each web
page, and if there are any interesting hyperlinks, you follow those links
by clicking on them to find more information or to perform a task. You
can also listen to music, watch videos, shop, communicate, and much
more on many websites.
Tip: If you are bored or looking for other fun web pages on the Internet,
we suggest reading our what things to do when bored on the
Internet web page.
Should I use webpage or web page when writing?
Both versions are technically correct. However, most style guides
suggest web page (two words) instead of webpage in all forms of

Electronic (digital) document created with HTML and, therefore, accessible with a browser. In
addition to text and graphics, webpages may also contain downloadable data files, audio and
video files, and hyperlinks to other pages or sites. A website is usually a collection of

Read more:

Web Hosting
What is Web Hosting?
Web hosting is a service that allows organizations and individuals to post a website or web page
onto the Internet. A web host, or web hosting service provider, is a business that provides the
technologies and services needed for the website or webpage to be viewed in the Internet.
Websites are hosted, or stored, on special computers called servers.

When Internet users want to view your website, all they need to do is type your website address or
domain into their browser. Their computer will then connect to your server and your webpages will
be delivered to them through the browser.

Most hosting companies require that you own your domain in order to host with them. If you do not
have a domain, the hosting companies will help you purchase one.

If you decide to create and host your website with, you can get a custom domain,
email addresses, and web hosting all bundled into one subscription.
Responsive web design: diseño
multidispositivo para mejorar la
experiencia de usuario
[Versió catalana]

Estudiante del Máster en Gestió de Continguts Digitals
Universitat de Barcelona - Universitat Pompeu Fabra
Departamento de Comunicación. Grupo DigiDoc
Universitat Pompeu Fabra

PDF Metadatos

Objetivo: Presentar una visión integral de la Experiencia de Usuario (UX) enfocada a la navegación
multiplataforma tomando el Responsive Web Design como guía de referencia del diseño web en la
Metodología: Revisión bibliográfica, de pautas y de estándares relacionados con el RWD.
Resultados: Los entornos de navegación actuales deben poder ser aprovechados desde cualquier
dispositivo. No adaptarse a esta realidad condena a los sitios web a brindar una UX cada vez menos
satisfactoria. La tendencia actual es unificar los canales de información en una única web, una
única URL, un solo espacio virtual que mantenga las mismas funcionalidades y características que
definen cada sitio web, adaptándose progresivamente a los cientos de modelos de dispositivos
móviles que actualmente están en el mercado.

Objectives: This paper seeks to provide a comprehensive description of user experience focusing
on multi-platform navigation and using Responsive Web Design as a guiding principle for current
web design.
Methodology: The research reviewed current Responsive Web Design literature.
Results: As the study observed, today’s navigation environments need to be made accessible from
any device and websites that fail to adapt are increasingly undermining user experience. It was also
noted that the current trend is to consolidate multiple channels in a single platform, URL or virtual
space that gathers together the functions and features that define each of its websites and which
can progressively adapt to the increasing number of mobile device models being marketed.
1 Introducción 1

El indiscutible aumento de los teléfonos móviles y tabletas como dispositivos de navegación web
lleva a plantearse un diseño adaptado a estos aparatos, de dimensiones más reducidas que la
clásica pantalla del ordenador, y con la capacidad de ser usados en cualquier lugar. Mientras unos
sitios web han optado por crear versiones propias para smartphones y tabletas, otros mantienen un
mismo sitio web para todos los dispositivos. En el primer caso, implica un mayor esfuerzo para
abarcar tantas resoluciones como tamaños de pantalla existen. En el segundo, según como se haya
diseñado el sitio web es posible que no se visualice correctamente en los teléfonos, que se
desmaquete o que algunas funcionalidades se vean afectadas, empobreciendo la Experiencia de
Usuario (UX), y en el peor de los casos, perdiendo público.

En el contexto presentado, el presente artículo tiene como objetivo ofrecer una visión integral de la
UX enfocada a la navegación multiplataforma tomando el Responsive Web Design (RWD) como
guía de referencia del diseño web en la actualidad. Para ello, se ha realizado una revisión de lo que
se ha publicado hasta el momento en este sentido. Si bien la temática es tan reciente que hay
pocas publicaciones sobre ella, sí varias pautas y de estándares relacionados con el RWD que han
sido de utilidad.

Del trabajo se desprende que los entornos de navegación actuales deben poder ser aprovechados
desde cualquier dispositivo. No adaptarse a esta realidad condena a los sitios web a brindar una UX
cada vez menos satisfactoria. La tendencia actual es unificar los canales de información en una
única web, una única URL, un solo espacio virtual que mantenga las mismas funcionalidades y
características que definen cada sitio web, adaptándose progresivamente a los cientos de modelos
de dispositivos móviles que actualmente están en el mercado.

2 Un mundo móvil
La tendencia a la utilización de teléfonos móviles es creciente. Los datos que proporciona la ITU,
organismo de las Naciones Unidas, así lo muestran: a finales de 2013 un 96 % de la población
mundial tendrá acceso al teléfono móvil —128 % en el mundo desarrollado y el 89 % en los países
en desarrollo—. Basta con echar la vista atrás un par de años o tres para ver la rápida penetración;
en cambio, el mercado parece estar ya saturado, y según la ITU, en cuatro de las seis regiones del
mundo "la adopción de la tecnología móvil celular se está desacelerando considerablemente y su
tasa de crecimiento está en sus niveles más bajos, tanto en el mundo en desarrollo como en el
En cuanto a los teléfonos móviles, buena parte de ellos son smartphones, y su uso es cada vez
mayor entre la población, rompiendo el nicho de mercado inicial para el que estaban concebidos:
los ejecutivos y el mundo de los negocios. La penetración que han tenido los smartphones y demás
dispositivos móviles en el mercado mundial es muy alta: un 75 % de los usuarios usan internet a
través del móvil.3 Uno de los síntomas de este crecimiento es el incremento del mobile e-
commerce: Paypal4 facturó 4 billones de dólares en 2011 procedentes de pagos desde el móvil.
Sólo en España, en el segundo trimestre de 2013 26 de los 36 millones de abonados a líneas
móviles tenían un aparato con conexión a internet, lo que supone un 72 %; 5 y el uso de tabletas
también crece, situándose en el 23 % de penetración en 2013, 15 puntos más que en 2011 6. El
59 % de los internautas españoles cuenta con un smartphone y un 77 % de ellos se conecta
diariamente7, lo que convierte a España en el segundo país con más penetración de dispositivos
móviles a nivel mundial.8
3 La apuesta por la UX

El término experiencia de usuario deriva de la expresión en inglés User Experience (UX de ahora en
adelante). La norma ISO 9241-210 la define como "la percepción de una persona y las respuestas
que resultan del uso previsto de un producto, sistema o servicio". La UX depende de una variedad
de factores, como aquellos propios del usuario, factores sociales, culturales, del contexto de uso y
otros propios del producto (Arhippainen y Tähti, 2003). A diferencia de la usabilidad, que es la
capacidad de un producto o servicio para ser utilizado por su público objetivo en un contexto de
uso, la experiencia del usuario es un concepto más amplio e incluye las emociones de los usuarios,
sus expectativas, preferencias, percepciones, creencias y respuestas físicas y/o psicológicas.

La UX ha evolucionado en consonancia con las nuevas tecnologías y tipos de usuarios. Si bien

inicialmente su conceptualización involucraba entornos de interacción específicos, básicamente
ordenadores, hoy día vemos la proliferación de nuevos dispositivos que permiten al usuario estar
conectado en cualquier lugar y momento, un principio de ubiquidad que poco a poco va cambiando
la forma de pensar la web.

En este sentido encontramos páginas web que implementan múltiples canales para llegar a la
diversa gama de dispositivos disponibles en el mercado. Subdominios o aplicaciones móviles son
sólo algunas de las alternativas que se han venido llevando a cabo a lo largo de estos años. Sin
embargo desarrollar e implementar este tipo de canales reviste un gran esfuerzo a nivel técnico, ya
que en muchos casos son estructuras que parten desde cero.

Esta situación parece estar cambiando. La tendencia actual es reducir la cantidad de canales que
tienen las diferentes páginas web, aprovechando un único canal cuya estructura flexible le permita
adaptarse a ordenadores, televisores, tabletas o teléfonos móviles, con sus respectivos tamaños de
pantalla. Es lo que hoy día se conoce como Responsive Web Design (RWD).

Este es el contexto donde se erige el RWD, enfrentándose a un mayor número de dispositivos,

modos de entrada, y navegadores que nunca. En este artículo se presenta una visión de la UX
enfocada a la navegación multiplataforma, con el punto de mira en el RWD como guía de referencia
del diseño web en la actualidad.

4 Ventajas del Responsive Web Design

El Responsive Web Design (RWD de ahora en adelante) comprende una serie de técnicas y pautas
de diseño que permiten adaptar sitios web al entorno de navegación del usuario, entendiendo
como entorno de navegación la multiplicidad de dispositivos, móviles o no, por medio de los cuales
los usuarios pueden acceder y navegar en internet Este concepto surge en el año 2010 de la mano
del diseñador web norteamericano Ethan Marcotte (Marcotte, 2010, 2011), sin embargo los
orígenes se remontan al surgimiento y atomización de los dispositivos móviles. En el año 2008 el
consorcio internacional W3C, que da difusión a pautas, recomendaciones y buenas prácticas para el
diseño y mantenimiento de páginas web, planteaba una serie de recomendaciones específicas para
la web en móvil, utilizando el nombre de "One Web"9, definiendo el camino al que debería apuntar
el diseño web para múltiples dispositivos. "One web" se refería a la creación de una web para todos
englobando contenidos, experiencia de usuario y accesibilidad a todos los dispositivos disponibles
en el mercado (desktop, tabletas, smartphones, consolas...).

Precisamente a esto apunta la conceptualización de RWD, ya que no sólo involucra aspectos

relativos al diseño, sino que también apunta a que la UX pueda ser igualmente satisfactoria
indistintamente del dispositivo del que se acceda a la página web (Marcotte 2010).
Siguiendo este planteamiento, y con el objetivo de aumentar la cobertura de contenido
específicamente diseñado para dispositivos móviles, en 2011 Google implementó el robot
indexador Googlebot Mobile,10 mejorando la experiencia de búsqueda de los usuarios que navegan
desde estos dispositivos.

No es de extrañar que la W3C en 2008, Marcotte en 2010 y Google en 2011 respectivamente

definieran, al menos de manera inicial, aquellas pautas que orientarían el diseño web para
dispositivos móviles, o mejor dicho, pautas para que las webs se adaptasen a cualquier dispositivo.
La evolución y el alcance de los dispositivos móviles en los últimos años, en paralelo al uso de
ordenadores cada vez más pequeños, funcionales y portátiles, resulta en la creación de la
plataforma donde se soporta el RWD. Es claro entonces que parte del éxito de la web en el móvil
recaiga en la portabilidad que la caracteriza, ese principio de ubicuidad que nos permite estar
conectados en todo momento, de manera casi omnipresente. En este sentido, en la actualidad el
RWD se perfila como la guía de buenas prácticas que deberían seguir los diseñadores de páginas
web para garantizar una buena UX a los usuarios, reduciendo la cantidad de canales de difusión
(subdominios móviles, aplicaciones, páginas optimizadas…), mejorando un único canal para todos
los tamaños de pantalla.

El RWD, como guía de buenas prácticas para el diseño de páginas web enfocadas en la navegación
multiplataforma, resume muchas ventajas, entre ellas:

 Una única URL, olvidándonos de la multiplicidad de canales, como subdominios mobile-

friendly o aplicaciones móviles.
 Se mejora la UX, ya que se mantienen los mismos contenidos y funcionalidades al ser siempre
una única página web, indistintamente del dispositivo móvil desde el cual se navegue.
 Sólo es necesario un único desarrollo de código html, válido para una gran cantidad de
 Google, el mayor motor de búsqueda del mundo, lo recomienda

Tomando en cuenta la coyuntura actual, está claro que conviene diseñar webs pensando en RWD.
A continuación veremos qué aspectos del diseño web incorpora el RWD.

5 Aspectos involucrados en el Responsive Web Design

A medida que el tráfico web proveniente de dispositivos móviles aumenta, son más las webs que
buscan opciones para adaptarse a dichos dispositivos.

La primera aproximación para esta situación vino de la mano de la W3C, la cual presentó una serie
de recomendaciones para crear páginas webs con dominio móvil (y URL distintas a la versión
tradicional de la web).12Sin embargo Marcotte (2010, 2011) identificó que trabajar con subdominios
separados para móviles requería, en la mayoría de los casos, un desarrollo similar al de la propia
versión desktop de la web. Por eso planteó la posibilidad de cambiar la tendencia de diseñar webs
pensando en dispositivos específicos, el pionero iPhone con el sucesivo iPad, Android y su
amplísima variedad de terminales, las consolas y hasta los ebooks.
En vista de este nivel de especificidad, el RWD se basa en dos conceptos principales, las media
queries y el ancho de capas o divs, que engloban a su vez una serie de buenas prácticas, que
permiten adaptar los sitios web a cualquier dispositivo, móvil o no (Frain 2012; Kadlec; Gustafson,
2012). A continuación se presentan los aspectos que se deben tener en cuenta en cada una de
5.1 Media queries
Los diseñadores que deseen hacer páginas web sensibles a dispositivos móviles se encuentran en la
situación de lidiar con el cambio de contexto inicial para el que estaban pensadas las mismas. En
vista de esto, y bajo los lineamientos de la W3C, se han incluido en la nueva versión del
CCS313 las media queries. Estos son uno de los módulos que componen esta actualización,
permitiendo adaptar la presentación de páginas web basándose en condiciones como la resolución
de pantalla o en dispositivos específicos.
Dicha adaptación se logra mediante la identificación de algunas de las características del dispositivo
en que se mostrará la web; literalmente "query" equivaldría a "pregunta", por lo que las etiquetas y
atributos del código CSS preguntan: ¿qué dispositivo se está usando?

Para esto se definen condiciones específicas a cada dispositivo, incluidas en las instrucciones CSS
que dan forma a la web. Una vez se identifique el dispositivo desde el que se accede, y por ende la
resolución de su pantalla, se mostrará un diseño fluido que se adapte, cambiando y aplicando una
serie de instrucciones CSS definidas para ese tamaño en particular.

Veamos el siguiente ejemplo, propuesto por Adinteractive:14 supongamos que el diseño de una
página presenta problemas en un dispositivo iPhone3 con un ancho de pantalla de 320px, por
ejemplo problemas para cambiar el logo, eliminar una columna, cambiar la organización de los
elementos de la pantalla, etc. En un caso así, para hacer un diseño responsive, dentro de la hoja de
estilos habría que tener este código:

@media screen and (max-width: 320px) {

/* reglas CSS*/

En este ejemplo, la instrucción a la CSS va estructurada en tres partes:

 El medio a utilizar, o media, que en este caso es la pantalla (screen), y que a su vez agrupa a
todos los dispositivos que permiten la visualización por pantalla.
 El conector (and).
 La media query, (max-width: 320px).
 Las reglas CSS entre llaves {}

Literalmente se ha hecho la siguiente consulta: ¿es un dispositivo con pantalla, y ésta tiene un
ancho de máximo 320px? En caso de ser correcto, se deberán aplicar los estilos definidos entre las
llaves correspondientes.

Figura1 : Ejemplos de páginas web con diseño responsive a varios tamaños de pantalla. Fuente:
<>. Imágenes tomadas el 20/05/2013.
En cuanto a pantallas, la W3C y algunos autores recomiendan optimizar los anchos de pantalla de
dispositivos, móviles o no, a la siguiente escala (figura 1):

 240px
 320px
 480px
 600px
 768px
 900px
 1200px

Parecen demasiados, sobretodo tomando en cuenta la dedicación que implica la optimización para
cada uno. Marcotte (2010) recomienda que en caso de una web nueva se definan, al menos de
manera tentativa, cuales serán los dispositivos y sus respectivas resoluciones de pantalla desde los
que accederán los potenciales usuarios; en el caso de una web con histórico, se pueden aprovechar
las diferentes herramientas de analítica web para conocer la tendencia de consumo de los usuarios.

Sin embargo la optimización web es infinita, y más tomando en cuenta las funcionalidades del
CCS3. Se podrían combinar instrucciones para hojas de estilo enfocadas en cada resolución de
pantalla, o definir reglas para pantallas que sean sólo superiores a una determinada medida (por
ejemplo tomando en cuenta los ordenadores de sobremesa), e incluso detectando un determinado

Este tipo de combinaciones son aceptadas y soportadas actualmente por casi todos los
navegadores, a excepción de algunas versiones de Internet Explorer (la versión 8 e inferiores);
para este último caso se puede aprovechar JavaScript, proporcionando guiones rápidos y ligeros
que permitan utilizar diseños web sensibles en navegadores que no son compatibles con CSS3.

En este sentido es necesario trabajar los diferentes elementos que componen la página web en
base a proporciones, y es aquí donde entra el segundo aspecto que involucra el RWD: el ancho de
capas o div.

5.2 Ancho de capas o div

Haciendo referencia al diseño fluido, el principal concepto donde se apoya el RWD, se propone
dejar atrás al pixel y los anchos fijos y predefinidos de las webs tradicionales. El ancho, en píxeles,
de las capas en las que se estructura una web debe ser fluido y adaptable, adoptando
proporcionalidad según sea el caso. Entonces al visualizar la web a través de una pantalla pequeña
de móvil se mantendrán todos los elementos de la misma pero de un tamaño más pequeño,
reorganizados, proporcionales entre ellos y con respecto al tamaño original.
Figura 2: Izquierda: página web responsive del presidente de EE.UU. Barack Obama vista desde un MacBook
Pro 13' (pantalla de 1280x800px). Derecha: página web responsive del presidente de EE.UU. Barack Obama
vista en un iPhone4 (pantalla de 960x640px). Fuente: <>. Imágenes tomadas
el 20/05/2013

El ancho de capas involucra a varios aspectos de la página web, entre los cuales están:

 los elementos de ancho fijo

 los elementos de ancho variable (imágenes, vídeos, objetos...)
 tipografías

5.2.1 Elementos de ancho fijo

Para aquellos vídeos, imágenes u objetos que tengan un ancho fijo definido desde su origen, al
momento de insertarlo en el código de la página se debe identificar dicho ancho como el máximo
permitido en la resolución escogida. Así su ancho no excederá el del elemento padre que lo
En cuanto a pantallas pequeñas, como las de los smartphones, los aspectos mencionados
anteriormente son incompletos, ya que existen webs que incluyen columnas, menús de navegación,
enlaces, botones, logotipos..., lo que dificulta realmente la compresión proporcional sin terminar en
un verdadero ejemplo de arte moderno 2.0. Para esto se han de identificar aquellos elementos que
son realmente prioritarios y otros prescindibles (de cara a la experiencia de usuario),
reorganizándolos y dibujando una nueva cara de la web acorde al tamaño de pantalla del
dispositivo móvil desde el que se accede.

5.2.2 Elementos de ancho variable

Para conocer el ancho que debería tener un elemento se debe conocer el ancho inicial del mismo, y
dividirlo entre el ancho del elemento original.

Aprovechemos el siguiente ejemplo (figura 3), también de AdInteractive, para ilustrarlo mejor:
partiendo de valores fijos, un elemento padre de 960px y un elemento hijo de 360px, se debe
dividir el ancho del elemento hijo entre el del elemento padre, obteniendo el ancho proporcional
que tendrá el mismo frente al primero. Entonces el elemento hijo será siempre el 37,5 % del ancho
del elemento padre, logrando que al modificar el ancho del elemento padre, los elementos hijos se
adapten proporcionalmente.

Figura 3: Ilustración de la proporcionalidad de elementos de ancho variable.

Fuente: <>.
Imagen tomada el 13/03/2013.

5.2.3 Tipografías
La adaptación proporcional de las fuentes es bastante similar a la de los elementos de ancho
variable. En RWD se define el tamaño de la fuente por el cuadratín. El cuadratín es un término que
procede de la tipografía y que se usa para indicar una medida que se calcula en función del ancho
de la letra "m" de la tipografía que se esté utilizando.15En CSS se habla del atributo "em" para
referirse a esta medida.
Para calcular el tamaño del cuadratín, en primer lugar hay que identificar el tamaño base o general
de la fuente; en diseño web se asume que 1em equivale al ancho de la letra "m" cuando se
visualiza en tamaño 16px, que es el tamaño que tiene por defecto el navegador. Esos 16px se usan
como divisor para calcular los demás tamaños al cambiar de resolución. Existen conversores
online16 para las medidas de las tipografías, en caso de que se necesiten convertir tamaños exactos.
En una web con diseño responsive se indicará este atributo en la hoja de estilo CSS así:

font-size: 1em.

Es recomendable que se especifique, de cara a algunos navegadores, la equivalencia de

1em=16px; para esto el tamaño de la fuente debe ser proporcional, es decir, del 100 %:

body {font-size: 100 %;


Al utilizar medidas proporcionales, las medidas "em" son heredadas de padres a hijos, tomando
como referencia la medida del padre para calcular el tamaño del "em". Por ejemplo, en una caja de
texto donde se tiene una fuente general de medida 0.5em y a su vez dentro de esa caja existe otra
cuya fuente tiene 0.25em, esta última tendrá realmente 1/4 de tamaño con respecto al tamaño de
la fuente general.

En la práctica sería así el código en la hoja de estilo CSS:17

<div style="font-size:0.5em">
(fuente de tamaño 0.5em respecto a la fuente base)
<div style="font-size:0.25em"
(fuente de tamaño 0.25em, con respecto a la fuente anterior)

6 RWD en prensa online: Boston Globe, un caso de referencia

En el contexto actual de la atomización de los dispositivos móviles y el acceso a la información 24

horas x 7 días, los portales web de prensa online tienen no sólo la ardua labor de mantenerse
actualizados al minuto ofreciendo una visión fresca e imparcial de la actualidad noticiosa sino que
también deben adaptarse a las nuevas tecnologías, a los nuevos formatos que trascienden al papel
impreso de periódico, para intentar llegar a usuarios con perfiles muy diferentes pero que
comparten la necesidad de estar informados.

En este sentido, los medios de comunicación presentes en la red se deben a muchos tipos de
usuarios, desde esos que cada vez manchan menos sus manos con la tinta del papel de periódico y
pasan a leer en pantallas, hasta aquellos usuarios que han nacido bajo la revolución de los
dispositivos móviles. Este nuevo contexto online y multidispositivo presenta distintos retos que el
RWD ayuda a superar. Veamos cómo lo ha hecho un periódico de referencia en este sentido,
el Boston Globe.
El Boston Globe <> no es el New York Times o el Washington Post,
dos "gigantes" de la información que trascienden las fronteras de Estados Unidos. Éste se ubica en
la, muy meritoria, octava posición de los principales periódicos de circulación en ese país, a pesar
de ser el hermano menor del New York Times.18
Sin embargo, y sin caer en comparaciones odiosas, el Boston Globe (figura 4) puede decir que ha
sido el primer portal de prensa online en implementar un rediseño en términos de responsive
design en este sector, lo que marcó un precedente y una tendencia que posteriormente seguirían
medios de comunicación influyentes, como la revista Time19 (figura 5), el canal de televisión de
la BBC One20 (figura 6), e incluso el New York Times en una propuesta de rediseño de su web
Figura 4: Boston Globe visto desde varios dispositivos.
Fuente: <>.

Figura 5: Imagen de la revista Time vista desde varios dispositivos. Fuente:

Figura 6: Vista de la web de la BBC One desde un iPhone4. Fuente: <>.

Pero, ¿cómo lograron implementar un rediseño tan novedoso cuando había poca información y
referentes de RWD? ¿Cómo lograron adaptarse a la navegación multiplataforma sin perder esa
imagen seria y clásica asociada a su marca?
Los responsables fueron Titto Bottitta y Mike Swartz de la agencia de diseño web Upstatement22 y
del propio Boston Globe, respectivamente, en el año 2011. Su trabajo se llevó a cabo en
colaboración con un equipo multidisciplinar de diseñadores gráficos, expertos en usabilidad y UX;
todo bajo las premisas de RWD planteadas por Ethan Marcotte (2010).

Su metodología de trabajo se basó en definir varios hitos o puntos clave que sirvieron como base
para el rediseño que vemos en la actualidad.

Primeramente basaron la estrategia de diseño enfocándose en los navegadores de los usuarios, ya

que son la herramienta de diseño de interacción más eficiente y real cuando se trabaja bajo un
enfoque responsive, tomando en cuenta la rapidez de pasar de un diseño estático de alta fidelidad
a la programación en sí. En este sentido aprovecharon las ventajas de InDesign como herramienta
para el diseño web, la cual combina el eficiente tratamiento de imágenes de Photoshop y el manejo
tipográfico de Illustrator.23
Cuando identificaron cual sería la herramienta a utilizar, procedieron a definir los puntos de ruptura
(breakpoints) clave, es decir, los tamaños que puede tener una página, y que se intercalan según el
tamaño de la pantalla desde el que se accede a la web; se suele diseñar de manera independiente
para varias resoluciones de pantalla, definiendo valores máximos y mínimos, que suelen ser 1200
px y 320 px, respectivamente.24

A partir de los puntos de ruptura se crean las respectivas plantillas de diseño. Éstas debían no sólo
incluir diseño de alta fidelidad, sino también versiones propias del encabezado de la web, del menú
de categorías o el pie de página (en relación a las diferentes resoluciones de pantalla), así como
una caracterización del tipo de contenido que podía llegarse a mostrar (texto, multimedia, etc).

Una vez definidos y aclarados los puntos de ruptura y plantillas, se pusieron manos a la obra.
Primeramente trabajaron la cabecera del site, tomando en cuenta que esta es lo primero que verían
los usuarios, y que albergaba elementos tan importantes como el buscador, anuncios clasificados,
el widget del clima, área de usuarios y el árbol de categorías (con ocho secciones), así como otros
aspectos que caracterizaban el estilo del Boston Globe.

Trabajaron de manera progresiva en cinco puntos de ruptura, tomando en cuenta varias

resoluciones de pantalla, todas con sus plantillas de diseño, cabeceras y pies de página
independientes, menús de navegación adaptados y el mismo contenido (figura 7).
Figura 7: Diferentes cabeceras de la web del Boston Globe en base a los anchos de pantalla.
De arriba abajo: 960px, 768px, 600px, 480px y 320 px
Fuente: <>.

El resultado ha sido una web con un diseño inteligente e ingenioso, con una estructura preparada
para adaptarse a prácticamente todos los tamaños y disposiciones de pantalla presentes en el
mercado (figura 8).
Figura 8: Aspecto de la web del Boston Globe en febrero de 2010 (sin diseño responsive).
Fuente: <>.
Figura 9: Izquierda: versión desktop de Boston Globe. Centro: versión iPad. Derecha: versión iPhone.
Imágenes tomadas el 09/07/2013
Lo realmente admirable de este trabajo ha sido la capacidad de Bottitta y su equipo de idear cinco
versiones diferentes del mismo site, que a su vez mantuviesen los mismos contenidos,
funcionalidades y demás elementos característicos del Boston Globe, en búsqueda de garantizar
una experiencia de usuario satisfactoria indistintamente del dispositivo desde el que navegasen sus

7 Conclusiones

En el contexto actual de la atomización de los dispositivos móviles y el acceso a la información 24

horas x 7 días, los portales web no sólo tienen la ardua labor de mantenerse actualizados, sino que
también deben adaptarse a las nuevas tecnologías, a nuevos formatos y a usuarios con perfiles
muy diferentes, desde los que se van integrando al mundo digital hasta los que han nacido bajo la
revolución de los dispositivos móviles.

Los entornos de navegación cuyo potencial sólo puede ser aprovechado desde el dispositivo de uso
para cual fueron pensados imponen una restricción de uso que deja de tener sentido en un
momento dominado por la multiplicidad de canales. No adaptarse a esta realidad parece condenar
a los sitios web a brindar una UX cada vez menos satisfactoria.

Unificar los canales de información en una única web, una única URL, un solo espacio virtual que
mantenga las mismas funcionalidades y características que definen cada sitio web, adaptándose
progresivamente a los cientos de modelos de dispositivos móviles que actualmente están en el
mercado, en una tendencia de consumo que llegó para quedarse y parece fortalecerse con el
tiempo. Eso es el responsive web design. Ya no es algo nuevo, desconocido o inalcanzable, está
aquí, ahora y cada vez son más las páginas web que nacen, o renacen, bajo esta tendencia.

En definitiva, es cuestión de adaptarse a los nuevos patrones de consumo y responder a las

necesidades de las personas, ofreciendo sitios web que hagan su experiencia de usuario igual de
satisfactoria indistintamente del dispositivo desde el cual naveguen.

Arhippainen, L., Tähti, M. (2003). "Empirical Evaluation of User Experience in Two Adaptative
Mobile Application Prototypes". Proceedings of the 2nd International Conference on Mobile and
Ubiquitous Multimedia, 10–12 December, 2003, Norrköping, Sweden.
<>. [Consulta: 08/07/2013].
Frain, B. (2012). Responsive Web Design with HTML5 and CSS3. Packt Publishing.
Kadlec, T.; Gustafson, A. (2012). Implementing Responsive Design: Building sites for an anywhere,
everywhere web. New Riders.
Marcotte, E. (2010). "Responsive web design".
[Consulta: 08/07/2013].
Marcotte, E. (2011). Responsive Web Design. A Book Apart.

Fecha de recepción: 19/07/2013. Fecha de acceptación: 21/10/2013.

El presente artículo se ha realizado como parte del trabajo de fin de máster del estudiante Daniel
González, tutorizado por Mari-Carmen Marcos, en el Máster Interuniversitario en Gestión de
Contenidos Digitales, Universitat de Barcelona – Universitat Pompeu Fabra. Fue presentado en julio
de 2013.
International Telecommunication Union. World in 2013: ICT Facts and Figures,
<>. [Consulta: 8/10/2013].
Google. Our Mobile Planet: Global Smartphone Users, <
mobile-planet-global-smartphone-users-study-2012-2>. [Consulta: 18/07/2013].
Venture Beat, <
2011/>. [Consulta: 18/07/2013].
ComScore. ComScore & MMA Mobile Barometer Q2 2013,
Mobile_Barometer_Q2_2013>. [Consulta: 8/10/2013].
Google. Our Mobile Planet, <>. [Consulta:
The Cocktail Analysis, <
iab-spain-y-the-cocktail-analysis>. [Consulta: 18/07/2013].
Chance by Europa Press, <
segundo-pais-mas-penetracion-smartphones-nivel-mundial-20120229134715.html>. [Consulta:
One Web: Mobile Web Best Practices 1.0. W3C – 2008, <
bp/#OneWeb>. [Consulta: 18/07/2013].
Introducing smartphone Googlebot-
googlebot-mobile.html>. [Consulta: 18/07/2013].
Google Webmaster Blog,
design-harnessing-power-of.html>. [Consulta: 18/07/2013].
Guía Breve de Web Móvil,>. [Consulta:
CSS3 es la última actualización del lenguaje CSS formulado por la W3C para definir parámetros de
presentación y forma de documentos estructurados en lenguaje HTML. Esta última actualización,
compatible con las anteriores, se estructura en "módulos” o varios documentos separados, que a su
vez añaden nuevas funcionalidades con respecto a anteriores versiones, como el establecimiento de
hojas de estilo acordes a determinadas resoluciones de pantalla o
<>. [Consulta: 18/07/2013].
<>. [Consulta: 18/07/2013].
The bit Jazz Band 2.1. El ancho de la "m”, <
web-design-i/>. [Consulta: 18/07/2013].
Em Calculator, <>. [Consulta: 18/07/2013].
<>. [Consulta: 18/07/2013].
<>. [Consulta: 18/07/2013].
<>. [Consulta:
<>. [Consulta: 18/07/2013].
<>. [Consulta: 18/07/2013].
<>. [Consulta: 18/07/2013].
<>. [Consulta: 18/07/2013].
Explicación sobre los puntos de ruptura, <
approach-a-responsive-design/>. [Consulta: 18/07/2013].
Cita recomendada
González, Daniel; Marcos, Mari Carmen (2013). "Responsive web design : diseño multidispositivo
para mejorar la experiencia de usuario". BiD: textos universitaris de biblioteconomia i
documentació, núm. 31 (desembre) . <>. DOI: [Consulta: 17-10-2017].
La evolución del diseño web
Por campusMVP. Publicado el 10 de abril de 2015 a las 10:00

El diseño web ha recorrido un largo camino desde sus inicios, allá por la década de los '90. Con sólo un

puñado de fuentes compatibles con Web, CSS rudimentaria, y tablas, los diseñadores web encontraban

muchas barreras a la hora de hacer su trabajo. Sin embargo, hoy en día la situación es muy diferente.

Ahora lo habitual es que las páginas pesen varios megas y tengan grandes fotos en la portada, además

tenemos un montón de marcos, iconos y fuentes para elegir.

Resulta curioso ver cómo los sitios web más populares han evolucionado. A continuación encontrarás

algunos pantallazos de las webs que hemos considerado más sorprendentes. Si quieres ver cómo eran

algunas de tus páginas favoritas hace mucho mucho tiempo, no tienes más que usar "esta máquina del



Con solo dos añitos de vida, Yahoo!, una de las empresas pioneras de tecnología, mostraba este aspecto:

GeoCities, era un servicio de hosting de páginas web creado por los mismos fundadores que Yahoo! Los

usuarios seleccionaban un "barrio" donde alojar su web. Las páginas se agrupaban por temáticas, y así

por ejemplo, todas aquellas que tenían que ver con tecnología estaban en "Silicon Valley", y las de

entretenimiento en "Hollywood". ¡Ahhh cuánto se echan de menos esos GIFs animados! Este era su

aspecto en el 97:

En IKEA ya triunfaban sus mesitas lack. ¿Quién no tiene una en su casa?:


El 19 de abril de 1924 nacía la "Compañía Telefónica Nacional de España, S.A." con un capital de un millón

de pesetas. En 1945, el gobierno de Franco nacionaliza el 79% de la empresa y 50 años más tarde

mediante una oferta pública se privatizó en parte. En 1999 con una segunda oferta pública, la

privatización se completó. Con el fin del monopolio, la empresa tuvo que empezar a cuidar su imagen,

pues los españoles teníamos otros compañías para elegir. Ésta es la imagen de "modernidad" que

mostraba en el año 2000:


No hemos elegido este año al azar para hablar de compras a través de internet. Puede que alguno de

vosotros, antes de 2001 se hubiese aventurado a comprar a través de la web, sin embargo, en España la

primera estadística sobre "Uso de las TIC y Comercio Electrónica" se llevó a cabo ese año. Y cuando se
habla de comercio electrónico es inevitable pensar en Amazon. ¿Recordáis cómo eran las pestañas de

navegación de su página?:


La siguiente captura de pantalla se la dedicamos a nuestros seguidores más cool. Sobran las


A principio del curso académico las universidades norteamericanas publican los llamados

"facebooks": libros que contienen las fotografías y nombres de todos los estudiantes y que tienen como

objetivo ayudar a los estudiantes a conocerse mutuamente. Basándose en esta idea nació Facebook.

Convertida actualmente en una de la mayores redes sociales del mundo, la siguiente captura de pantalla

muestra sus orígenes:


Siempre ha sido un de los bancos más innovadores no solo en cuanto a la tecnología, también en

marketing y sobre todo en la forma de entender su negocio. En 2007 uno de sus productos estrella hizo

perder muchos clientes al resto de los bancos en España. Quién no conoce a alguien que haya recibido (o

él mismo) una llamada de su "sucursal de toda la vida" diciéndole de modo amenazante ¡Cómo se te

ocurre transferir tu dinero a XXX Yo no confiaría en un banco que no tiene oficinas! He aquí su web

anunciando dicho producto:


En cuanto a webs no nos podemos olvidar de las empresas audiovisuales, las se dedican a la

comunicación con mayúsculas. Para estar informado de lo que realmente importa en nuestro país nada

mejor que visitar la web de Telecinco ;-) (Pedimos disculpas pues la imagen mostrada a continuación

puede herir la sensibilidad de alguno):

Esto ocurría hace 5 años, ¿qué nos encontraríamos si entrásemos hoy en su web? ¿Han evolucionado?

El que quiera experimentar que lo haga en su casa, nuestro equipo se ha negado a entrar en su web :O


En la actualidad los diseños web se han simplificado mucho. La tendencia es hacia el minimalismo, las

líneas rectas y grandes fotografías de alta resolución que se vean bien en todos los dispositivos. Gran

parte de esta tendencia proviene de la necesidad de abarcar con una misma web múltiples dispositivos:

desde pequeñas pantallas de móviles hasta enormes monitores 4K. Y para muestra un botón:
Te explicamos qué es una página web, dónde se alojan en internet, para
qué sirven y cuáles son sus características principales.

El sitio web suele ser una tarjeta de presentación de las empresas.

¿Qué es una página web?

Las páginas web son los documentos individuales que conforman un sitio web.
Puede accederse a ellas a través de la “World Wide Web” por medio de un
navegador (programas específicos para acceder a la misma). Se diferencia de un
sitio web, ya que el mismo está constituido por diversas páginas.

Para las empresas, organizaciones y personas, su sitio web es la versión actual de

una tarjeta de presentación, por lo que es diseñada teniendo en cuenta la imagen
que quiere transmitirse. Cada página dentro del sitio cumple una función específica
pero al mismo tiempo responde al objetivo general del sitio.

Características de una página web

 1. Desarrollo
 2. Diseño
 3. Optimización
 4. Alojamiento
 5. Páginas estáticas y dinámicas
 6. Privacidad
 7. Home
 8. Publicidad y difusión
 9. Información
 10. Interacción

1. Desarrollo
El desarrollo de las páginas web se realiza a través de lenguajes de marcado (por
ejemplo, HTML, PHP, ASP, JSP). Estos lenguajes son interpretados por los
navegadores y les permiten:

 Incluir información en diversos formatos: textos, sonidos, videos, animación,

 Estar asociadas a datos de estilo
 Ofrecer aplicaciones interactivas
 Enlaces a otras páginas y sitios web

2. Diseño
El diseño de una página web tiene diversas funciones. Es evidente que el diseño
debe resultar atractivo. Sin embargo, también es importante que facilite la
navegación y que ofrezca al usuario lo que está buscando. Dado que una página
web forma parte de la imagen pública que una empresa, organización o persona
quiere dar de sí, el diseño debe ser coherente con esa imagen.

3. Optimización
La optimización se aplica a todo el sitio web y a las páginas individuales. Optimizar
significa mejorar la compatibilidad del sitio a los motores de búsqueda. Para
lograrlo es necesario que tanto el código, la estructura y el contenido sean más
eficaces en el objetivo de aumentar al máximo la visibilidad de palabras clave.

Las palabras clave son los conceptos que definen el contenido y función de la
página web. Una buena optimización de una página o un sitio le dará un mejor
posicionamiento web en los buscadores (SEO).

4. Alojamiento
El alojamiento es el almacenamiento de información, imágenes, videos y todos los
otros contenidos de la página web. El mismo puede realizarse en la computadora
de la empresa, organización o persona que dirige el sitio web o, lo que es más
frecuente, a se realiza a través de una empresa de hosting que provee el servicio de

En este último caso, el alojamiento es en un servidor remoto. Existen diferentes

tipos de alojamiento que puede utilizar una página:

 Gratuito: tiene limitaciones en cuanto a cantidad de información que puede ser

almacenada, y además puede generar publicidad.
 Compartido: lo utilizan clientes de varios sitios en un mismo servidor.
 Revendedor: ofrece mucho espacio y dominios disponibles. Está diseñado para
quienes revenden el hospedaje a terceros.
 Servidores virtuales (VPS): ofrece el control de una computadora mediante una
máquina virtual.
 Servidores dedicados: es una computadora comprada o alquilada que se utiliza
para el alojamiento de todo el sitio web. Es el opuesto al almacenamiento compartido,
ya que la computadora es de uso exclusivo de un único usuario.
 No administrado: cuando una empresa ofrece una alojamiento no administrado
significa que sólo provee la conectividad y los recursos pero no asistirán en casos de
fallos o errores.
 Housing: es el tipo más básico de alojamiento, ya que una empresa simplemente
alquila o vende un espacio en un centro de datos, además de la conexión a internet. A
diferencia del alojamiento no administrado, no ofrece las herramientas de

5. Páginas estáticas y dinámicas

Existen diferentes tipos de páginas, dependiendo de si el contenido es
predeterminado o si se general al utilizarla:

 Páginas estáticas: cuando un usuario accede a ella, el servidor descarga el contenido

codificado en HTML, y de esta manera se visualiza en el navegador. Este tipo de
páginas son fácilmente accesibles pero no permiten la interacción.
 Páginas dinámicas: no están creadas con HTML sino con un lenguaje interpretado
como PHP. En estas páginas el usuario puede interactuar.

6. Privacidad
Las páginas web pueden ser:

 Privadas: sólo un número limitado de personas puede acceder a ellas. Incluyen un

sistema de acceso que obliga al usuario a identificarse.
 Públicas: son accesibles a cualquier usuario a través de una conexión a Internet.

Un mismo sitio web puede incluir ambos tipos de páginas web.

7. Home
Las páginas principales o Home son la primera página con la que se encuentra el
usuario al acceder al sitio. Estas páginas suelen contener:

 Información de contacto: Está visible en esta página o bien existe un enlace hacia otra
página de contacto.
 Diseño atractivo: A través de la distribución de la información, las imágenes y
contenido audiovisual se construye la primera impresión que quiere causarse al
 Información básica: Se presenta a la institución, empresa o persona protagonista del
 Enlaces a otras páginas del sitio: La página Home debe al usuario acceder a otras

8. Publicidad y difusión
La función de muchas páginas web (así como de sitios web completos) suele
ser la difusión de eventos o la publicidad de productos y servicios. Incluso las
páginas cuya función principal es otra (información, interacción, Home) también
cumplen esta función, aunque sea de forma secundaria. Para que esta función
pueda ser cumplida correctamente, es indispensable que la página haya sido

9. Información
Todas las páginas de un sitio web contienen algún tipo de información, sin
embargo, esta puede ser la función principal de determinadas páginas, como las
páginas institucionales que detallan cómo está compuesto el personal, las páginas
de noticias, o las páginas donde se encuentran artículos sobre diversos temas. Las
páginas de información suelen ser aquellas en las que el usuario permanece más

10. Interacción
Cuando la función de una página es la interacción con el usuario, necesariamente
debe ser una página dinámica. Todas las páginas públicas de un sitio permiten una
mínima interacción, ya que al menos pueden ser compartidas a través de redes
sociales. Esta mínima interacción puede ser fomentada desde todo el sitio a través
de botones de “compartir”. Otra forma en que todas las páginas (por ejemplo las de
información) pueden permitir la interacción es a través de la posibilidad de que los
usuarios escriban comentarios junto a los documentos.
Sin embargo, las páginas cuya función es principalmente la interacción tienen
formatos particulares. Algunos ejemplos son los foros, los formularios de contacto,
las páginas que permiten comprar productos y contratar servicios, entre otros.


Evolución de la Web 1.0, 2.0 y 3.0

diferencias y elementos
 31-08-2012

 Aprender HTML

 3 Compartido

 3 Comentarios

 90 Online

 48,847 Visitado

LA WEB 1.0
La Web 1.0 empezó en los años 60, de la forma
más básica que existe, con navegadores de
sólo texto, como ELISA, después surgió el
HTML que hizo las páginas más agradables a la
vista y a los primeros navegadoresvisuales
como Netscape e Internet Explorer.

Esta Web es de sólo lectura, el usuario no

puede interactuar con el contenido de la
página, se encuentra limitada a lo que el
Webmaster sube al sitio Web.

Estructura del funcionamiento de la Web 1.0

Algunos elementos de diseño típicos de un

sitio Web 1.0 incluyen:
 Páginas estáticas para el usuario que la visita
 El uso de framesets o marcos
 Extensiones propias del HTML como el parpadeo y las marquesinas,
etiquetas introducidas durante la guerra de los navegadores.
 Libros de visitas en línea o guestbook
 Botones gif.
 Formularios HTML enviados vía email.

LA WEB 2.0
El término Web 2.0, acuñado por Tom O' Reilly
en el año 2004 hace referencia a una segunda
generación de modelos de páginas Web.

Se entiende como una nueva filosofía de

navegar, una nueva forma de participar en la

Su antecesor, la Web 1.0, presenta un modelo

de navegación más estático, este nuevo formato
fomenta la participación activa.

El usuario ya no se limita a acceder a la

información, sino que la crea.
Estructura del funcionamiento de la Web 2.0

Se entiende por Web 2.0 todos aquellos

servicios de Internet cuya base de datos puede
ser modificada en contenido, formato o ambos.

Los usuarios tienen un control total de su


Se produce una descentralización de Internet

por la que el cliente es, a su vez, servidor.

Este formato facilita la interactividad entre

usuarios, que se refleja sobre todo en el uso de
redes sociales, engrandeciendo así la
inteligencia colectiva.

El modelo 2.0 ha provocado un fuerte impacto

social. El usuario tiene más poder en la red que
nunca, ya que ahora tiene la capacidad de
expresarse libremente y de ser escuchado:
tiene voz y voto en Internet.

Simplifica la usabilidad del sitio Web y ahorra

tiempo al usuario.

Estandariza los lenguajes para un mejor uso de

la re-utilización del código, permite una mejor
interoperabilidad entre las aplicaciones y las
máquinas (software-hardware).

Facilita además el reconocimiento o detección

de carencias o nuevas formas de utilización de
aplicaciones y la convergencia entre los medios
de comunicación y los contenidos.

Los principios del modelo 2.0 son los

 La Web es una plataforma
 La información es lo que mueve Internet
 Los efectos de Internet son a su vez movidos por la participación
 Las distintas características de la red pueden desarrollarse de manera

LA WEB 3.0
Un nuevo término, Web 3.0, surgió para
relacionar las Webs semánticas.
Se trata de una extensión de World Wide Web,
por la que se pueden encontrar datos en
cualquier lengua y en formatos aptos para todo
tipo de software.

Se basa fundamentalmente en la información y

su estructuración, que le permite al usuario
encontrarla de manera más rápida y eficaz.

Web 3.0 es un neologismo que se utiliza para

describir la evolución del uso y la interacción en
la red a través de diferentes caminos.

Ello incluye, la transformación de la red en una

base de datos, un movimiento dirigido a hacer
los contenidos accesibles por múltiples
aplicaciones que no son solamente el
navegador, el empuje de las tecnologías de
inteligencias artificial, la web Geoespacial, la
Web 3D.

Frecuentemente es utilizado por el mercado

para promocionar las mejoras respecto a
la Web 2.0.
Otro posible camino para la Web 3.0 es la
dirección hacia la visión 3D, liderada por el Web
3D Consortium.

Esto implicaría la transformación de la Web en

una serie de espacios 3D, llevando más lejos el
concepto propuesto por Second Life. Esto
podría abrir nuevas formas de conectar y
colaborar, utilizando espacios tridimensionales.

El término Web 3.0 apareció por primera vez en

2006 en un artículo de Jeffrey Zeldman crítico
de la Web 2.0 y asociado a tecnologías como

Actualmente existe un debate considerable en

torno a lo que significa Web 3.0, y cuál es la
definición acertada.
La World Wide Web, como se conoce en el presente, nació
a principios de la década de 1990 y en sus inicios sólo
ofreció contenido textual agrupado en los
famosos hipervínculos o links.

En esta época se habló mucho del nacimiento del

hipertexto como concepto y de la navegación por la

No obstante, en la actualidad, estamos lejos de aquella

época; basta con visitar cualquiera de nuestros sitios
Web favoritos para darnos cuenta.

Los sitios Web ya no son sólo texto e


Son imágenes, animaciones Flash, publicidad que tapa

la lectura, ventanas desplegables, videos, juegos y
aplicaciones completas.

La información ya no tiene la exclusividad en el mundo

de Internet; en el presente la usamos también para
comprar, mantener nuestra vida social, administrar
nuestras hojas de cálculo o publicar nuestros videos.

Es por eso que la Web como la conocíamos ha

cambiado. Apareció una nueva Web, la Web 2.0.


Podríamos definir a la Web 2.0 de la siguiente manera:

"Se refiere a la transición percibida de

Internet desde las Webs tradicionales a
aplicaciones Web destinadas a usuarios".
Otros la definen como un nuevo movimiento social en
Internet, algunos como la nueva ola de servicios y, los
más técnicos, como la posibilidad de evadir las
limitaciones originales del HTML.

La verdad es que es un poco de todo eso y mucho

más. Es un concepto abierto que abarca tres grandes

 Aplicaciones Ricas de Internet

 Web semántica
 Redes sociales

El término Web 2.0 tiene un origen claro: fue utilizado
por primera vez por O'Reilly Media (empresa conocida
por su editorial de libros de tecnología) en una
conferencia en octubre de 2004.

Meses después fue Tim O'Reilly, fundador de la

empresa, quien definió el concepto y lo hizo conocido
en la comunidad.

Incluso antes de que el término se hiciera de uso

común, O'Reilly lo había registrado como marca, lo
que luego dio algunos dolores de cabeza a otras
empresas que intentaron usarlo.
Diagrama de conceptos que se asocian a Web 2.0

En ese momento la definición de O'Reilly incluía:

 La Web como plataforma

 Efectos de red en una arquitectura de participación
 Innovación y desarrolladores independientes
 Pequeños modelos de negocios capaces de publicar servicios y contenidos
 Datos abiertos
 El perpetuo Beta.
De esta forma vemos cómo alrededor del término se
agrupan muchos conceptos, y de cada uno posee su
parte de verdad.

La Web 2.0 es una segunda generación de servicios

basados en la Web, que enfatiza en la colaboración
online, la conectividad y la posibilidad de compartir
contenidos entre los usuarios.

La Web 2.0 implica la evolución de las aplicaciones

digitales hacía aplicaciones dirigidas al usuario final,
que incluyen servicios como redes sociales, blogs
wikis y las folcsonomías.

El weblog, también conocido como blog o bitácora, es
un sitio Web periódicamente actualizado que recopila
cronológicamente textos y artículos de uno o varios
autores donde el más reciente aparece primero, con
una temática en particular y en el que el autor tiene la
libertad de publicar lo que crea conveniente.
Existen weblogs de tipo personal, periodísticos,
empresariales o corporativos, tecnológicos, y
educativos, entre otros.

El blog moderno es una evolución de los diarios online

donde la gente escribía su vida personal. Justin Hall,
quien desde 1994 escribió durante once años su blog
personal mientras era estudiante de la Universidad de
Swarthmore, es reconocido como uno de los primeros

Existen distintas y diversas herramientas de

mantenimiento de blogs que, de forma gratuita y sin
necesidad de elevados conocimientos técnicos
permiten administrar todo el weblog, coordinar, borrar
o reescribir los artículos y moderar los comentarios de
los lectores, de manera tan sencilla como administrar
el correo electrónico.

Actualmente su uso se ha simplificado a tal punto que

casi cualquier usuario es capaz de crear y administrar
un blog.

Las herramientas de mantenimiento de weblogs se

clasifica principalmente en dos tipos; las que ofrecen
una solución completa de alojamiento de forma
gratuita como Bloggers, y aquellas soluciones
consistentes en un software que al instalarse en un
sitio Web, permiten crear, editar y administrar un blog
directamente en el servidor que aloja el sitio, como es
el caso de WordPress.
Este software es una variante de las herramientas
llamadas Sistemas de Gestión de Contenidos cuyas siglas en
inglés son CMS (Content Manager System) y muchos
son también gratuitos.

La mezcla de los dos tipos es la solución

planteada por la versión multiusuario Worldpress.

Las herramientas que proporcionan alojamiento

gratuito asignan al usuario una dirección Web. En el
caso de Bloggers, la dirección asignada termina en y proveen una interfaz a través de la cual
es posible añadir y editar contenidos.

Sin embargo, la funcionalidad de un blog creado con

una de estas herramientas se limita a lo que pueda
ofrecer el proveedor del servicio.

Cabe señalar que un software que gestione el

contenido requiere necesariamente un servidor propio
para instalarlo, del mismo modo que se hace para un
sitio web tradicional.

Su gran ventaja radica en que permite el control total

de la funcionalidad que ofrecerá el blog y que es
posible adaptarlo a las necesidades del sitio, e incluso
combinarlo con algunos otros contenidos.
Algunos elementos suelen ser comunes en los
weblogs, como por ejemplo las listas de enlaces a
otros weblogs, también denomincadas webroll.

Además se puede contar con un archivo de

anotaciones o post anteriores, enlaces permanentes
para que cualquiera pueda citar una anotación o un
post siguiendo el link o una función que permita añadir
comentarios, entre otros.

Una particularidad que los diferencia de los sitios de

noticias es que las anotaciones o post suelen ser
necesariamente weblogs, como referencias para
ampliar la información agregada.

(del hawaiano wiki, wiki, rápido). Se trata de un sitio
Web colaborativo confeccionado por varios usuarios
que pueden crear, editar, borrar o modificar el
contenido de una página Web de forma interactiva,
fácil y rápida.

Dichas facilidades hacen del wiki una herramienta

efectiva para la escritura colaborativa. Actualmente, la
más grande que existe es la versión inglesa Wikipedia.

Término derivado de taxonomía (del griego “taxis”,
clasificación, y “nomo”, ordenas y gestionar) y de floc
(del alemán “volks” pueblo). En consecuencia,
flocsonomía significa literalmente, clasificación
gestionada por el pueblo.

Este concepto es un neologismo a la categorización

colaborativa por medio de etiquetas simples en un
espacio de nombres llano, sin jerarquías ni relaciones
de parentesco predeterminadas. Si se compara con
otros sistemas de categorización, como el de Gmail,
que también utiliza etiquetas, se distingue en que los
usuarios comparten las categorizaciones.

Las folcsonomías surgen cuando varios usuarios

colaboran en la descripción de un mismo material

Básicamente son sistemas de etiquetado de


La Web 2.0 supone un cambio en la manera de

pensar, diseñar y usar Internet, apoyado en nuevas
tecnologías, en el que se evoluciona desde una Web
de lectura hacia una de lectura/escritura.

En el modelo anterior (Web 1.0), la información era

generada por editores y webmasters, y consumida por
los usuarios. En el nuevo modelo, la información es
generada directamente o indirectamente por los
usuarios y compartida por los sitios.

En general, podríamos afirmar que los pilares sobre

los que se basa este nuevo concepto son las
tecnologías, las redes sociales, la sindicación de
contenidos, los servicios Web y el software de servicio.

Evidentemente, ésta nueva visión de Internet trae

consigo un grupo de nuevas tecnologías entre las que

(o CSS) Lenguaje formal usado

Hojas de Estilo en Cascada
para definir la presentación de un documento
estructurado escrito en HTML, XML o XHTM o HTML5..

Microformatos. Son marcas utilizadas para

incluir expresiones semánticas en una página Web, lo que permite
extraer su significado.

Surge del trabajo de la comunidad de desarrolladores

de Technorati, cuyo objetivo consiste en
estandarizar un conjunto de formatos en los que
almacenar conocimientos básicos.

La principal limitación es que cada tipo de significado

requiere la definición de un microformato específico,
entre los que se encuentran:

 hCalendar: para eventos, citas…

 hCard: para información de contacto.
 hReview: para opciones.
 Rel-directory: para la creación de directorios distribuidos.
 Rel-nofollow: para especificar que un hipervínculo con este atributo no debe intervenir en el
análisis por parte de los robots de búsqueda, como google.
 Rel-tag: para etiquetado descentralizado.
 Xfolk: para etiquetado de enlaces.
 XFN: para relaciones sociales.
 XOXO: para listas.
Técnicas de aplicaciones ricas no intrusivas,
como AJAX (Asynchronous JavaScript And XML),
combinación de tecnologías que permiten que una
determinada Web se comunique con el servidor en
segundo plano, respondiendo a eventos sin tener que
recargar la página.

De esta forma, las páginas Web son más ágiles y

dinámicas, y se parecen cada vez más a las
aplicaciones de escritorio.

Sindicación de contenidos a través de feeds, que son

archivos generados por algunos sitios sindicados que
contienen una versión específica de la información
publicada en ellos para que puedan utilizarla los que
añaden información.

RSS (Rich Site Summary, RDF Site Summary, Really

Simple Syndication) y Atom son los formatos de datos
más utilizados para sindicar o distribuir contenidos a
suscriptores de un sitio Web.

En términos generales, estos sistemas permiten que

una Web exporte su contenido y otras lo importen
Los contenidos pueden ser:

 Escritos (blogs, diarios de noticias, portales telemáticos…)

 Sonoros (podcast)
 Fotográficos (cualquier fotoblog o servicio como Flickr)
 Audiovisuales (cualquier videoblog o servicios como You Tube).

Una de las diferencias más notables de Internet con
otros medios de comunicación es la interactividad.

La interactividad es un aspecto a tener muy en cuenta

en el diseño Web, por la relación que tiene con el
mercado; cuando el cliente puede elegir y probar un
servicio o producto hay una venta.

Y es precisamente gracias al mercado que se han

hecho grandes inversiones en el crecimiento de la red.

El usuario-cliente de una página no es un objeto
pasivo, se convierte en un gran informador. Cuando
completa los datos de un formulario, contesta a una
encuesta, usa el correo electrónico o accede a un
sistema de compras está interactuando en la Web.

Los procesos de búsqueda de información reflejan en

buena medida la interactividad de la Web.
Estos procesos constituyen un verdadero desafío para
los diseñadores, pues mientras más sofisticados son
las herramientas, más difícil es encontrar el límite de
las posibilidades.

Los juegos online son otros ejemplos de interactividad

de la Web. Son videojuegos que se juegan vía internet.

La principal diferencia son los juegos de consola u

ordenador es que éstos son normalmente
independientes de la plataforma, basados
exclusivamente en tecnologías del lado cliente,
llamadas plugins o players.

Las aplicaciones web 2.0 permiten realizar lo mismo
que las de escritorio pero con las siguientes mejoras:

 Centralización de la información del cliente en una única base de datos segura

 Almacenamiento de la información en servidores seguros, contra robo, incendio, corte de luz,
 Compatibilidad con cualquier dispositivo que tenga navegador como PC, SmartPhones, PDA,
Videoconsolas, etc…
 Posibilidad de trabajar varios usuarios en paralelo compartiendo los mismos datos en tiempo
 Etc.

El mundo de Internet crece rápidamente. Surgen miles
de sitios y usuarios nuevos y es permanente el estudio
para garantizar la rapidez en el envío y recepción de
los datos con la más moderna tecnología.

El desarrollo de nuevas tecnologías provocará que en

un plazo relativamente corto sus páginas Web sean
vistas incluso por personas que nunca han tocado una

La Web 3.0 significado y origen

 05-09-2012

 Aprender HTML

 Compartido

 3 Comentarios

 91 Online

 12,308 Visitado

La evolución de Internet hacia la Web 2.0 o Web social se
produjo con la llegada de una nueva generación de
tecnologías y aplicaciones interactivas online que permiten la
fácil publicación, edición y difusión de contenidos, así como la
creación de redes personales y comunidades en línea.

En realidad, y aunque existe bastante confusión entre la

literatura sobre la semejanza y/o diferencia entre Web 3.0
y Web semántica ambos conceptos denominan una misma

Así mientras la Web 2.0 está gestionada por el propio usuario

humano, la Web 3.0 (que incluye la Web semántica, orientada
hacia el protagonismo de motores informáticos y
procesadores de información que entiendan la lógica
descriptiva en diversos lenguajes más elaborados de
metadatos, utilizando software avanzado como el RDF/XML),
gestionada en la nube o cloud computing y ejecutada desde
cualquier dispositivo con un alto grado de viralidad y
personalización, constituye un nuevo tipo de Web en la que
se añade contenido semántico a los documentos que la
forman y ello conlleva que la ejecución de la misma sea
realizada por máquinas que, basándose en nuestros perfiles
en la Red, descubren información para nosotros.

Un ejemplo claro sería, que en la Web tradicional nosotros

buscaríamos información sobre "gato", y Google nos
presentaría todo tipo de felinos y así la propia Web semántica
nos presentaría diferentes alternativas de "gato" pero desde
una perspectiva mecánica.
"La Web 3.0 se encarga de definir el
significado de las palabras y facilitar que un
contenido Web pueda ser portador de un
significado adicional que va más allá del propio
significado textual de dicho contenido."
Desde el punto de vista del marketing, esta Web 3.0, permite
construir un mensaje publicitario que será difundido mediante
una tecnología digital avanzada.

La codificación semántica de dicho mensaje puede incluir

información no presente a simple vista para el usuario.

Efectivamente, las tecnologías de la Web 3.0, que utilizan

datos semánticos, se han implementado y usado a pequeña
escala en compañías para conseguir una acumulación y
personalización de datos más eficiente, como por ejemplo
cualquier empresa que sepa implementar una estrategia 3.0,
la cual se basa en cuatro pilares:

1. La apuesta por el elemento multimedia (audio, video, imagen)

2. La socialización a través de las redes sociales
3. La distribución en multisoporte
4. Los contenidos
Datos semánticos obtenidos a través de social media, social
network y otros servicios colaborativos, como Flickr,
Delicious, Digg, que extraen el sentido semántico y el perfil de
los usuarios en la red correspondiente, permitiendo a la
empresa el uso interactivo de los datos y ofreciendo
contenidos con presencia en todas las redes y en todos los
dispositivos (iPhone, iPad, etc.)
En definitiva, la Web 3.0 (incluyendo la Web semántica),
según sus creadores (W3C), se encarga de definir el
significado de las palabras y facilitar que un contenido Web
pueda ser portador de un significado adicional que va más
allá del propio significado textual de dicho contenido.

Y así el W3C define la Web 3.0 como:

"Una Web extendida, dotada de mayor

significado en la que cualquier usuario en
Internet podrá encontrar respuestas a sus
preguntas de formas más rápida y sencilla
gracias a una información mejor definida sobre
lo que busca."
En resumen, la Web 3.0 marca los principios para crear
una base de conocimiento e información semántica y

Se pretenden con ello, almacenar las preferencias de los

usuarios (gustos, costumbres, conectividad,
interactividad, usabilidad, etc.) y al mismo tiempo,
combinándolas con los contenidos existentes en redes
sociales e internet móvil, entre otros, poder atender de forma
más precisa las demandas de información y facilitar la
accesibilidad a los contenidos digitales, proporcionando con
ello, una herramienta esencial para la aceptación, adopción,
flujo y funcionalidad de la publicidad de la empresa con el
objetivo de fidelizar al usuario con las marcas que se
presentan en la Red.
Frente al branding tradicional (percepción que una población
determinada tiene acerca de una marca o producto), el e-
branding se sustenta en la gestión estratégica de
construcción de marca en los medios digitales.

El ebranding o gestión de marca online, en la Web 3.0, se

configura como una de las herramientas más idóneas para
aquellas estrategias empresariales centradas en la
orientación hacia el cliente, es decir, preocupadas por la
personalización de su mensaje, la interacción con el
destinatario y el mantenimiento bidireccional con el cliente en
aras de conseguir su fidelización.

En efecto, las empresas necesitan ya no sólo saber cómo

debe ser su mensaje comercial, sino cómo tratar con un
usuario cada vez más elusivo y restrictivo que basa buena
parte de sus decisiones en los impulsos generados a través
de las redes y comunidades virtuales.

La presencia en las mismas, de manera meramente

decorativa o como intento pasivo de punto referencial, está de
antemano condenada al fracaso, en un hábitat en el que lo
fundamental se convierte en la conexión semántica y
cualitativa con el usuario sin la presión directa del peso de la
firma o del mensaje comercial.

Estamos por lo tanto ante la consolidación de un nuevo ciclo

en la inteligencia artificial se combina con la capacidad de las
personas a fin de lograr el establecimiento de una
comunicación empresa-usuario de manera directa,
bidireccional, interactiva y de movimiento constante en
atención a los hábitos del usuario y sus demandas.