El documento describe los fundamentos del diseño web y la Web 2.0. Explica que el diseño web debe cumplir funciones visuales, comunicativas, expresivas e interactivas. También describe los componentes clave de la Web 2.0, incluyendo contenido creado por usuarios y redes sociales que permiten a los usuarios socializar e integrarse en la web. Además, ofrece ejemplos como Flickr y YouTube de sitios que representan estos principios de la Web 2.0.

1. Computación 3 Lectura 1-Sandro Honores
DISEÑO WEB Y WEB 2.0
EL DISEÑO WEB
El diseño web exige que las páginas cumplan una función visual, comunicativa, expresiva, usable,
interactiva y amigable. La función visual se refiere al uso apropiado de los colores, imágenes, y
fuentes de texto. La función comunicativa y expresiva se refiere a que transmite de forma clara y
concisa no solo la información, sino las ideas y sentimientos del autor de la página o de la
compañía. La usabilidad y la interfaz amigable van a permitir al usuario navegar con facilidad por el
sitio web en donde la interactividad, los hipervínculos y conexiones funcionan de forma adecuada.
La primer página de un site define el éxito o el fracaso de todo nuestro trabajo.
Si quieren que sus visitantes permanezcan en la página y la visiten el sitio completo, asegúrese de
que la primera página atraiga su atención y les provoque curiosidad. Como en literatura, la regla
del CCDT (corto, conciso y dulce, tonto) también se aplica aquí. Por supuesto, no hace falta aclarar
que todas las páginas deberán ser interesantes, o por lo menos, que el contenido sea interesante
para quienes lo lean. Recuerden, lo que para ustedes es un diseño espectacular, para otros puede
que no lo sea.
Como comenzar
El diseño web es similar a la construcción de
una casa o el bosquejo del diseño de una
máquina. Necesitamos antes que nada, un plan
de contenido y apariencia. Qué clase y qué
cantidad de texto quiero incluir? Qué imágenes
(diagramas y fotos) voy a utilizar y cuántas
hay? Qué imágenes ilustran o acompañan qué
parte de la copia?, ¿Necesito tablas, efectos de
sonido, música, animación? Debemos de tomar
esta etapa sistemáticamente, para que la
etapa de ensamble nos resulte más sencilla.
Una vez que tenemos decidido todo esto, procederemos a hacer un borrador aproximado de las
páginas. Necesitaremos un block de dibujo y lápices de colores. En el mundo de la publicidad,
estos borradores se llaman “bosquejos”, y nos darán una idea de cómo se va a ver el contenido de
nuestra página web propuesta.
Desplieguen los bosquejos en el piso, estúdienlos cuidadosamente, y sean sus propios jueces de lo
que necesitan añadir, quitar, reposicionar o sustituir.

2. Computación 3 Lectura 1-Sandro Honores
Cuando estén conformes, pasarán a la etapa de procesamiento. Aquí es donde se crean los
gráficos necesarios, se trabaja con las imágenes, fotografías y se comprime su tamaño, se elige el
audio apropiado y se lo edita, y donde se producen las animaciones.
Finalmente, comenzamos a crear nuestras páginas web. Se darán cuenta de que serán necesarios
algunos cambios, pero es probable que sean pequeños. Su trabajo será mucho más fácil y fluido.
La palabra clave es PLAN. Si no podemos planificar nuestro sitio web, es altamente probable que a
la larga tengamos que modificar y redistribuir todo, lo cual se traduce en pérdida de tiempo.
Mantener la Identidad
Las grandes empresas generalmente prestan mucha atención a la imagen que presentan al
público. Valoran la identidad corporativa tanto como sus activos fijos, y por lo general son muy
estrictas con respecto a sus logos y colores corporativos que se pueden usar y cuáles otros no.
Regla número uno, cuando diseñamos un web site comercial, debemos asegurar que el logo de la
empresa se utiliza de acuerdo a lo especificado en sus guías. Regla número dos: en todas las
páginas de la web, utilizar el logo de nuestro cliente o sus colores corporativos, o un elemento de
reconocimiento (“Mnemonic Device”), para crear una identidad unificada y que se reconozca
fácilmente. Esto también ayudará a causar una experiencia visual agradable para nuestros
visitantes.
¿Qué es un elemento de reconocimiento? Es un gráfico que puede ser representativo o de estilo y
sirve para recordarnos de que estamos leyendo o mirando un material (en una página o publicidad
gráfica) proveniente de una misma compañía o serie. En caso de que no sepan
lo que es una imagen representativa o de estilo, las primeras son realistas,
estas últimas son dibujos simplificados que pueden ser sólo una línea o la
forma irregular de un objeto representativo en particular. La ilustración aquí a
la izquierda es un dibujo de estilo.
Navegación
Obviamente, el propósito de un menú es mostrarles a los visitantes el contenido de nuestra web.
El hacer clic en un item de menu los lleva directo a una página que contiene más información
sobre ese item o para mostrar un sub-menu que contiene varios temas bajo ese grupo particular.
Naturalmente, nuestros links deben ser correctos (de lo contrario, llevamos a la gente a las
páginas equivocadas), y los sub-menues se deben agrupar de forma coherente.
Así que, antes de anunciar al mundo que nuestra web existe, es bueno probarla primero. Una vez
que estemos satisfechos y que todo está bien, llamamos a una o dos personas para que también la
vean.
A propósito, hay una pequeña aplicación que sirve para buscar links rotos dentro de un site. Es
buena idea correr este programa de vez en cuando. Realicen una búsqueda en Google, por
ejemplo, y bajen alguna aplicación de este estilo.

3. Computación 3 Lectura 1-Sandro Honores
Animación
La animación nos ayuda a que la página se vea interesante, pero en mucha cantidad resulta
tediosa para nuestros visitantes. Por eso es necesario limitar la animación para no distraer a la
gente de los contenidos en la página que realmente importan, o incluso hasta para no enojarlos.
Por supuesto, si nuestra animación constituye el único elemento, entonces esta guía es
irrelevante.
Tamaño en bytes
Aparentemente, hay gente que todavía insiste en que ninguna página debe pesar más de 45kb.
Con conexiones más rápidas, e incluso banda ancha tan popularizado, no está mal que el tamaño
sea de más o menos 100 kb. Se debe tener en cuenta, sin embargo, que nuestra primer página
deberá ser lo más pequeña posible (en cuanto a bytes), sin comprometer la calidad.
Si nuestra primera página no puede ser pequeña dado que, por ejemplo, decidimos incluir música,
un preloader (precargador) ayudará a mantener el interés de nuestros visitantes. De hecho, se
considera cortés si informamos en el preloader el tamaño del archivo que está por bajar. Lo último
que queremos es que el visitante se frustre, o que tenga que adivinar qué tan pesado será lo que
está bajando, o si tiene tiempo para esperar. Después de unos minutos, pueden llegar a hacer clic
en “atrás”, justo cuando al preloeader le faltaban 1 o 2 segundos para descargar la página.
Uso de Tipografía
La tipografía es un elemento importante en internet, aunque como en el diseño gráfico la regla
principal es que todo sea legible, es algo así como la regla de oro de las tipografías (si no se puede
leer no sirve).
A la hora de trabajar con nuestros textos podemos separar en dos grupos, títulos y cuerpos de
texto o mensajes.
Para los primeros necesitaremos letras generalmente gruesas y detalladas. Es muy recomendable
que las tipografías escogidas para los títulos concuerden perfectamente con el diseño de la página
y también tendremos que tratar su color con mucho cuidado, ya que el color en los títulos expresa
mucho, pero esto lo veremos más adelante.

4. Computación 3 Lectura 1-Sandro Honores
Para los segundos deberemos usar tipografías "Lisas" (Arial, Verdana), nunca con "Serifa" (Times).
Aquí tienen una imagen de ejemplo:
Las tipografías Lisas son mucho más legibles en un monitor porque al ser más rectas, son más
factibles de dibujar por el monitor, en cambio las tipografías con Serifa tienen muchos más
detalles y a tamaños pequeños se hace poco legible en una pantalla, que no en papel.
Colores
Los colores de los objetos nos transmiten emociones muy fuertes. Los hospitales carecen de color
rojo, pues éste es asociado a la sangre, y en las oficinas suele predominar el blanco que denota
orden y pulcritud.
¿Acaso os imagináis trabajando en unas oficinas de color rojo? Sería demasiado estresante, pues
es un color de un fuerte impacto visual y que tiene mucha fuerza y energía. Esto son claros
ejemplos de cómo en la actualidad estamos usando los colores para nuestro beneficio, para
trabajar mejor, para estar más tranquilos, etc.
El color y su expansión
Probablemente alguna vez os hayáis preguntado por qué la mayoría de las páginas web que hay en
internet tienen un fondo claro y no negro. De hecho, las páginas que tienen un fondo negro suelen
quedar peor. Esto se debe al carácter expansivo de los colores, no se verá igual un texto sobre
fondo negro que blanco:

5. Computación 3 Lectura 1-Sandro Honores
El texto sobre fondo blanco es más legible y por lo tanto el lector debe forzar menos la vista,
sintiéndose agradecido. Esto también lo podemos ver en colores claros y oscuros, no es algo que
suceda únicamente en blanco y negro.
En estos dos dibujos parece que el de la izquierda tienda a expandirse y a hacerse más grande,
todo lo contrario que en el de la derecha. Eso es debido a que el color oscuro comprime la figura
del medio. Estas técnicas las usaremos cuando queramos que una parte de nuestra web quede
cerrada o abierta.
Armonía y contraste
Armonía: Crear una gama de colores para nuestra web que esté compuesta por colores de la
misma gama o tono. Por ejemplo, CLab es una web con colores armónicos, ya que usa el mismo
color y diferentes tonalidades del mismo.
Contraste: Combinar diferentes colores para crear una gama como, por ejemplo, claros y oscuros,
cálidos y fríos, etc.
La combinación de los diferentes colores, tanto si armonizamos como si contrastamos, suele
generar diferentes impresiones sobre un mismo objeto. El uso correcto de los colores en el fondo
como en el frente es una de las principales bases del éxito de un buen diseño.

6. Computación 3 Lectura 1-Sandro Honores
Significado del color
Rojo: pasión, amor, ira
Naranja: energía, alegría, vitalidad
Amarillo: alegría, la esperanza, el engaño
Verde: Abundancia, Naturaleza
Azul: calma, tristeza Responsable,
Púrpura: La creatividad, la Realeza, la Riqueza
Negro: El misterio, la elegancia, el Mal
Gris: Formalidad conservador,
Blanco: Pureza, Limpieza, la Virtud
Marrón: la naturaleza, la salubridad, la confiabilidad
Beige: conservador, Piedad, sordo
Crema o marfil: calma, la pureza elegante
Espaciado y composición
“Deje que tu texto respire”. Es la expresión que se utiliza cuando se busca una web legible. En
estas dos imágenes de aquí abajo podemos ver como una tiene el texto muy pegado a la imagen y
su interlineado es muy bajo para el tamaño de letra escogido, haciéndolo confuso para la lectura.
La otra imagen en cambio, se lee perfectamente.

7. Computación 3 Lectura 1-Sandro Honores
Este es un buen ejemplo de cómo hacer que nuestros textos no se vean compactados. También es
importante saber que el espaciado entre líneas suele ser un 20% superior al tamaño de la letra,
por ejemplo, para un tamaño de letra de 10 puntos pondremos 12 puntos de interlineado.
Colocando nuestros elementos
La posición de nuestros elementos en la pantalla es uno de los puntos más importantes a la hora
de hacer nuestro diseño, pues no es lo mismo colocar una imagen arriba que abajo, con un texto al
lado o sin el, que sea una imagen grande o pequeña y así infinidad de detalles que dotarán a
nuestra página de personalidad.
Un buen ejemplo de cómo componer una web con imágenes y texto adecuadamente puede ser la
página principal de Adobe la cual usa eficientemente el espacio entre líneas, y posiciona las
imágenes por tamaño y relevancia.

8. Computación 3 Lectura 1-Sandro Honores
En esta captura podemos ver como Adobe ha utilizado una gran imagen para mostrar un nuevo
producto, la cual va acompañada con un objeto rectangular transparente. La tipografía del texto
sobre el nuevo producto es “fina” y “suave”. También contiene pequeñas imágenes con textos
cortos, nótese la armonía de colores y los botones de navegación que embellece la página.
Es importante colocar pequeñas imágenes cerca del texto, las cuales tendrán dos funciones
Primero que el usuario tenga una información visual sobre lo que va a leer, atrayendo la atención
del visitante hacia donde queremos, y segundo, hacer más atractiva la página. Un sitio web con
puro texto no cumple la función visual necesaria.
LA WEB 2.0
La Web 2.0 sería la nueva Web que ha ido emergiendo en los últimos años y que se caracterizaría
por los siguientes rasgos principales: (1) un gran protagonismo de los usuarios, (2) aplicaciones
que se ejecutan "en la nube", o sea, en la Web y (3) sitios con mucha interactividad. De este modo,
la Web 2.0 sería una Web distinta y evolucionada que proporciona nuevas experiencias a los
internautas y añade nuevas funciones a la Web.
Examinaremos los fundamentos de la Web 2.0 desde el punto de vista de sus componentes y
funciones principales. Pero antes de nada, deshacer un frecuente malentendido: contra lo que
pueda parecer, hablar de Web 2.0 no significa que la Web actual (toda la Web) haya "pasado" a la
versión 2.0. Tal cosa sería difícilmente posible, porque la Web en su conjunto no es una aplicación
y nadie puede actualizar toda la Web de golpe ni decretar cuándo estamos en la 1.0, cuándo
"toca" estar en la 2.0 o más allá.
Hablar de la Web 2.0 significa que hay un nutrido grupo de sitios, algunos de ellos muy
importantes, que responden al perfil de la Web 2.0. Pero en la Web actual probablemente
predominan aún los sitios con perfil 1.0 y como ninguna autoridad central puede declararlos
obsoletos, ni prohibirlos (¡menos mal!), puede que durante muchos años haya una mezcla de
perfiles 1.0, 2.0, 3.0, etc. en la Web.
Componentes y funciones
Componente Aclaración Función Aclaración Ejemplos
Sitios de la Web 2.0
1 Contenidos Algunos de los sitios Las personas desean
creados por los más importantes de Participar participar y no limitarse Flickr,YouTube La
usuarios toda la Web los a ser espectadores blogosfera en
mantienen y editan general
los usuarios, y no los
propietarios del sitio
2 Redes sociales y Aplicaciones que Socializar Integración en la web
sistemas de facilitan el contacto de una tendencia LinkedIN, Facebook
recomendación con amigos, colegas, innata en los seres MySpace, del.ici.ous,
profesionales del humanos: la Digg
mismo sector, etc. socialización

9. Computación 3 Lectura 1-Sandro Honores
3 La Web como Crear y editar
plataforma Aplicaciones y Crear documentos ofimáticos Google Docs,
servicios informáticos y de cualquier tipo (p.e. ThinkFree Zoh
que se ejecutan en fotografías) puede
servidor web ("la hacerse sin necesidad
nube") generalmente de utilizar un
con el uso de un ordenador particular
navegador
4 Sistemas de Cooperar Otra tendencia humana Wikipedia, Wikis
colaboración Aplicaciones y inherente a la en general
servicios que facilitan socialización es la Aplicaciones
la cooperación entre cooperación o la para grupos de
grupos de usuarios o colaboración trabajo en
equipos de trabajo general
Contenidos creados por los usuarios/Participar
En la Web 1.0, los contenidos de un sitio los crean los administradores o los propietarios del sitio.
En la Web 2.0 tal cosa ya no es así. De hecho, actualmente los sitios más importantes de la Web
presentan la siguiente característica: los administradores se han "limitado" a prestar su sitio como
un lugar donde los usuarios pueden colocar sus contenidos.
Los ejemplos más espectaculares son los sitios que hoy atraen la mayor parte del tráfico mundial:
Wikipedia, YouTube y Flickr, y eso sin contar con las redes sociales que, en el fondo, son también
una forma de publicación de contenidos por parte de los usuarios.
Este fenómeno ha adquirido tal importancia que, en realidad, cada vez hay menos posibilidades de
que un sitio sea importante a nivel nacional o internacional sin aportaciones de los usuarios, una
figura a la que algunos denominan prosumidores (por la unión de productores + consumidores).
Los ejemplos más característicos aquí pueden ser los medios de comunicación. Ninguna
publicación importante en la Web puede prosperar actualmente sin abrir espacios a las
aportaciones de los lectores. Una tendencia que podemos ver tanto en el New York Time como en
El País o El Mundo y que ha recibido la denominación de citizen journalism (periodismo
ciudadano).
Las tecnologías más relevantes aquí son los sistemas de creación de blogs y wikis, así como en
general los sistemas de gestión de contenidos. Las corporaciones en general, y en particular las
bibliotecas y centros de información y documentación pueden incorporar, y de hecho así se está
haciendo en los países más avanzados de nuestro entorno, sistemas de participación como blogs,
foros y wikis donde los empleados pueden aportar ideas y donde los usuarios pueden expresar
también sus demandas y recomendaciones.
Adicionalmente, muchas corporaciones están descubriendo que la mejor manera de mejorar la
visibilidad de sus sitios consiste en implementar sistemas de gestión de contenidos que permitan a
sus empleados publicar páginas en el sitio web de forma descentralizada.

10. Computación 3 Lectura 1-Sandro Honores
Por último, cada vez más empresas, corporaciones y profesionales independientes abren canales
en YouTube o en Flickr como forma de aumentar su presencia y visibilidad en la Web.
La Web como plataforma/Crear
Ya hemos señalado antes la estrecha relación entre los cuatro componentes/funciones.
Efectivamente, cada uno de ellos no se puede entender sin los otros tres, por más que nos
convenga diferenciarlos a efectos de análisis.
Si los usuarios pueden crear contenidos para la Web en la escala que lo están haciendo, ello es
debido a la existencia de aplicaciones que utilizan la propia Web como plataforma, es decir, ello es
debido a la existencia de aplicaciones en línea tales como los gestores de contenidos (p.e. blogs y
wikis)
La web como plataforma, y más concretamente, el caso de las aplicaciones en línea dio un paso
más adelante cuando empezaron a aparecer sustitutos o alternativas en línea a aplicaciones
ofimáticas (p.e. Suites) y aún de otros tipos (como editores de fotografías).
Este último aspecto se puede entender mejor si revisamos la siguiente tabla comparativa:
Offline vs Online
Característica Offline Online
Mantenimiento de A cargo del usuario final y/o de A cargo del proveedor del servicio
la aplicación personal informático vinculado
con el usuario
Uso de la Modo local desde un ordenador Cualquier ordenador de cualquier
aplicación con una aplicación lugar del mundo sin necesidad de
necesariamente pre instalada y instalación previa de ninguna
configurada aplicación.
Ubicación de los Disco duro de un ordenador Disco duro de un servidor web
datos concreto accesible solo en modo accesible desde cualquier navegador
local ("en fila india") y por diversos usuarios. Disco duro
del usuario si lo desea
Seguridad Típica de usuarios finales (débil y Típica de usuarios finales (débil y
Contradictoria) Contradictoria)
Velocidad Muy alta (solamente limitada por Alta/Media/Baja (limitada y
potencia el hardware del usuario) dependiendo del tipo de conexión a
Internet)
Funciones Sin límites a priori Limitadas por problemas logísticos
Seguramente, una de las próximas versiones de la suite Office de Microsoft, si no la próxima, será
una aplicación en línea. De hecho, Microsoft ha desarrollado como parte de su macro conjunto de
aplicaciones Live ( www.live.com ) por un lado un sistema simple de almacenamiento en línea
denominado SkyDrive ( http://skydrive.live.com/ ) y por otro un sistema de almacenamiento y
colaboración directamente vinculado a Office 2007 y denominado Office Live Workspace
(http://workspace.officelive.com ).

11. Computación 3 Lectura 1-Sandro Honores
Por el momento, tanto SkyDrive como Workspace son poco más que unidades de almacenamiento
en línea con posibilidades de colaboración basadas en la posibilidad de proporcionar permisos
para que usuarios seleccionados por nosotros tengan acceso a documentos determinados.
Si deseamos utilizar algo mucho más parecido a una suite ofimática, algunas de las más
importantes son Google Docs (docs.google.com), Zoho (www.zoho.com) y ThinkFree
(www.thinkfree.com), ya mencionadas.
Además de los documentos ofimáticos más habituales existe también una amplia gama de
aplicaciones para editar fotografías y gráficos. De hecho, probablemente sean actualmente las más
utilizadas. Entre ellas merece ser mencionada Photoshop Express
(https://www.photoshop.com/express/) actualmente solamente disponible para usuarios de
Estados Unidos), Aviary (www.aviary.com) sin ninguna restricción geográfica y una amplia gama de
herramientas para el trabajo fotográfico y Sumo (http://www.sumopaint.com), un editor gráfico
de excelente factura y presentación. Las tres aplicaciones totalmente gratuitas, como todas las
mencionadas hasta ahora.
Tanto los miembros de empresas y corporaciones como los profesionales independientes pueden
utilizar esta gama de productos de la Web 2.0 de una forma muy productiva. Por lo que hace a los
sistemas de almacenamiento y colaboración permiten olvidarnos de los trastornos típicos de no
estar en nuestro lugar de trabajo, y con ellos las memorias USB para trasladar documentos del
nuestra casa al del trabajo, o del trabajo a un ordenador del lugar en el que estamos de visita.
La posibilidad de proporcionar permisos a otros colegas o compañeros de trabajo para que puedan
abrir y editar determinados documentos hace mucho más fácil la colaboración entre grupos de
trabajo.
Finalmente, siempre o casi siempre es posible declarar como público un documento determinado.
Si lo hacemos porque sea de nuestra conveniencia, lo que estaremos haciendo en el fondo es
promocionar a nuestra empresa o a nosotros mismos, tanto si somos profesionales
independientes como si trabajos por cuenta ajena.
Referencias:
http://www.cristalab.com/tutoriales/diseno-web-fundamentos-basicos-c63l/
http://archives.swish-tutorials.com/dl/dp/dbx-spanish.pdf
http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/
http://www.lluiscodina.com/web20/Codina2010_Fundamentos%20de%20la%20web%202.pdf