1. Arquitectura Web
Usabilidad
Gestión de contenidos Web
Taller de búsquedas en Google

2. Objetivo
Wolfgang Staudt
Conocer y aplicar los conceptos de
usabilidad, gestión de contenidos Web y
criterio de búsquedas en Google.

3. Competencias
Conocidos estos conceptos, el estudiante
estará en capacidad de realizar los ejercicios
prácticos que inician desde la siguiente
clase.
(Escritura Web, edición de audio, imágenes y
video, relación con los usuarios)

4. Temario de hoy
1. Arquitectura Web (Continuación clase anterior)
2. ¿Qué es usabilidad y cómo se mide?
3.Gestión de Contenidos Web: Modelo Margarita
4. ¿Cómo buscar mejor en Google?

5. Arquitectura Web

6. Elementos de la arquitectura Web
●
Códigos de programación
●
Arquitectura de datos y base de datos en la Web
●
Acccesabilidad, usabilidad y navegabilidad
●
Requerimientos técnicos de los contenidos Web

7. Códigos de programación
Son lenguajes que permiten transmitir y recibir información a las
computadoras. A través de los lenguajes de programación podemos
interactuar con una página Web. El código de programación puede ser
binario (compuesto solo por ceros y unos) o código fuente, que es
interpretable por los seres humanos.
Algunos lenguajes son:
HTML
HTML es la sigla en inglés de Hypertext Markup Language o lenguaje de marcado
hipertextual, y es el código creado primariamente para el desarrollo de páginas
web. En líneas generales, este código permite describir la estructura de un sitio
en internet, dar formato al contenido, insertar imágenes y generar vínculos con
otras páginas.

8. Códigos de programación
CSS
El código HTML permite dar formato al contenido, pero tiene muchas limitaciones.
Con el desarrollo y la expansión de Internet comenzaron a requerirse tecnologías
que permitieran ver el contenido de una página en distintos dispositivos, desde un
monitor de PC –Personal Computer o computadora personal– hasta un teléfono
celular.
El código CSS –Cascading Style Sheets u hoja de estilo en cascada– se basa en
reglas que determinan el estilo de uno o más elementos de una página web. Este
código podrá ser escrito dentro de la página web o en un archivo independiente
agregando la referencia al mismo dentro de la página web.
Javascript
Esta tecnología permite crear contenidos dinámicos en páginas web, por ejemplo
elementos con movimiento o que cambien de color. Permite desarrollar páginas
interactivas con programas propios como calculadoras, formularios,
agendas, tablas de cálculo, etc. Surge para ampliar las capacidades del código HTML .
Otros lenguajes: ASP, PHP

9. Arquitectura de datos y base de datos Web
Servidores Web: la arquitectura de datos en la Web
Un servidor es una computadora con gran capacidad de almacenamiento y velocidad
que está conectada las 24 horas del día, de modo que permite a los administradores de
la página y a los usuarios acceder al sitio Web. Para que una computadora funcione
como servidor es necesario instalarle un programa o software servidor. (Apache, por
ejemplo)
Una base de datos es una colección organizada de información. En el mundo, una
agenda telefónica es una base de datos. En el mundo digital, es un sistema de archivos
electrónicos organizados. Sin una estructura lógica adecuada sería imposible el
intercambio de datos entre una página web y un servidor.
Las bases de datos se
organizan en tres categorías:
campos, registros y archivos.

10. Accesibilidad, navegabilidad y usabilidad

11. Accesibilidad, navegabilidad y usabilidad
La accesibilidad de una página se refiere a la posibilidad de acceso a la misma para
todas las personas, sin importar sus características físicas individuales o las
características del contexto de uso (tecnologías disponibles).
Ejemplos, Cuando los videos de una página web poseen subtítulos estamos permitiendo el
acceso a personas hipoacúsicas y a personas que no tienen audio en su PC; cuando la tipografía
de una página web es clara y puede modificarse su tamaño estamos permitiendo que personas
con problemas visuales lean la información de la página; cuando el tamaño de los botones o de
las áreas activas es adecuado puede facilitar su uso a aquellos que no pueden controlar el
mouse con precisión, etcétera.
Existe un grupo de trabajo llamado Iniciativa para la accesibilidad Web (WAI, del inglés Web
Accessibility Initiative), que se encarga de promover el desarrollo de páginas web con mayores
niveles de accesibilidad.

12. Accesibilidad, navegabilidad y usabilidad
La navegabilidad de una página web se refiere a la facilidad con que un usuario puede
desplazarse por ella. Si una página web es clara, sencilla, comprensible, ofrece al
usuario una experiencia satisfactoria.
La navegabilidad web puede determinarse a partir de tres principios:
La estructura del sitio: es la organización interna de una página web. Se refiere a cómo se
categorizan los contenidos en niveles de importancia, en secciones y subsecciones, etc. Una
organización y categorización simple, clara y estable facilita la búsqueda de información de los
usuarios de un sitio.
La localización: cuando se trata de páginas complejas, es necesario que el usuario pueda
identificar con facilidad en qué lugar de la página se encuentra.
El contexto: guiará en todo momento al visitante de una página web. El diseño de una página debe
proveer a los usuarios referencias explícitas que ayuden a diferenciar una sección de otra. Para
ello es necesario que cada sección de un sitio ofrezca un contexto específico, por ejemplo
modificando la paleta de colores.

13. Accesibilidad, navegabilidad y usabilidad

14. Accesibilidad, navegabilidad y usabilidad
La usabilidad es el término que se utiliza para analizar la mejor forma de diseñar sitios
web para que los usuarios puedan interactuar con ellos de la forma más fácil, cómoda
e intuitiva posible.
La mejor manera de pensar en la usabilidad de una página web es a través de un diseño
centrado en el usuario y sus necesidades, y no en un diseño centrado en la tecnología
o en la creatividad u originalidad.
Algunas preguntas:
¿Cuáles son los objetivos del sitio web?
La estructura general del sitio web ¿está orientada al usuario, al diseño
creativo o a la tecnología que se utilizó para el desarrollo de la página?
¿Los enlaces son fácilmente reconocibles como tales?
¿Existen elementos de navegación que orienten al usuario acerca de dónde
está y cómo deshacer su navegación?
¿El tipo de fuente, ancho de línea y alineación empleados facilitan la lectura?
¿Es compatible el sitio web con los diferentes navegadores? ¿Se visualiza
correctamente con diferentes resoluciones de pantalla?
¿Se ha controlado el tiempo de respuesta, o la velocidad del servidor?

15. Requerimientos de los contenidos Web
Cuando armamos una página web, además de seleccionar los contenidos más
adecuados a los fines y objetivos del sitio, debemos tener en cuenta ciertas
necesidades y requisitos técnicos que son fundamentales para la calidad y
funcionamiento de la página. Las decisiones técnicas que debemos tomar con
respecto al contenido son muchas:
estructuración de la información,
estructura de las carpetas en el servidor,
tipo de archivo y tamaño de las imágenes y fotografías
y vínculos para descargas de archivos imprimibles.
Ampliaremos esta información cuando armemos nuestros blogs

16. Usabilidad

17. Usabilidad
Nielsen la define como “el atributo de calidad que mide la facilidad de las interfaces
Web”. Para él no tiene importancia el diseño o lo genial que se vea un sitio web. Para él
es más importante que ofrezca fácil manejo a los usuarios porque esa es la clave del
éxito.
Si bien Nielsen ha sido nombrado como el “Guru de
la usabilidad” y con su filosofía ha enseñado cómo
hacer que una página web sea “usable” y amigable,
también ha hecho comentarios fuertes:
Flash es 99% malo
Estás compañías son de mente estrecha insular, y
pobladas por condenados a cadena perpetua…
(refiriéndose a compañías e industrias que no
entienden de usabilidad)
Pero, su sitio ha sido criticado por poco atractivo:
http://www.useit.com

18. Usabilidad
Algunas pautas para presentar un contenido atractivo ante los usuarios:
●
Tamaño de la letra: un tamaño fácil de leer, un buen tamaño sería entre 9 y 16 píxeles.
●
Tipografía: los tipos de letras deben ser compatibles con los navegadores. Las más
utilizadas son Verdana, Helvetica y Arial. Las fuentes “sans-serif” son las más utilizadas para
la web.
●
Ancho del texto: que se encuentre entre los 500 a 700 pixeles.
●
Interlineado: que haya suficiente espacio para leer entre una línea y otra.
●
Formatos de lectura: hay usuarios que les gusta imprimir los manuales, tutoriales o
artículos. No olvidarse de que hay quienes leen desde sus móviles.
●
Sidebars: son muy útiles para la navegación, para desplazarse de arriba a abajo o de un
lado a otro en un sitio.
●
Contenido relacionado: enlaces de referencia dentro del contenido a otro contenido
dentro del mismo sitio. Esto permite que el usuario tenga acceso a más contenido del sitio.

19. Test de usabilidad
Un test de usabilidad es una medida empírica de la usabilidad de una herramienta, sitio
o aplicación, tomada a partir de la observación sistemática de usuarios llevando a cabo
tareas reales.
El test de usabilidad permite:
●
Verificar la existencia de posibles problemas de usabilidad en el sitio.
●
Encontrar posibles soluciones para los problemas encontrados.
●
Establecer una medida concreta inicial contra la cual comparar a los competidores,
futuros desarrollos de este mismo sitio o modificaciones al actual.
Para llevar a cabo un test, debe haber por lo menos 3 roles:
· El participante o Usuario.
· El facilitador o monitor.
· Los observadores.
Etapas:
Planificación
Test: Prueba piloto, ajustes y test definitivo.
Conclusión: análisis de los datos, elaboración del informe y recomendaciones.
Un test requiere entre 40 y 50 horas.

20. Test de usabilidad
Tres herramientas gratuitas para evaluar la usabilidad de un diseño web
●
UserPlus: busca ser una herramienta para diseñadores y desarrolladores web,
especialistas en usabilidad y cualquier persona interesada en la creación de
sitios web fáciles de usar.
●
Usabilla: gracias a los cinco sencillos pasos que ofrece Usabilla, los usuarios
pueden configurar fácilmente un test de usabilidad de forma gratuita. Usabilla
proporciona a los usuarios acceso a las pruebas de feedback y análisis,
incluyendo Heatmaps.
●
Five Second Test: aporta valor añadido como el test de memoria: los usuarios
cuentan con cinco segundos para visualizar el diseño y, después, son
cuestionados sobre elementos específicos del mismo a fin de evaluar la
capacidad del desarrollo para impactar al usuario.

21. Ejercicio
Comparemos páginas web:
●
Semana.com
●
Elheraldo.co
●
Eltiempo.com
●
BBCmundo.com
Respondamos:
¿Es fácil de navegar? ¿Me ubico en las secciones? ¿Sé volver al inicio?

22. Gestión de contenido

23. Gestión de contenido
El Modelo de Desarrollo y Gestión de Contenidos Digitales (en adelante “Modelo
Margarita”) tiene como objetivo mostrar que en este ámbito, la sola creación de los
contenidos no permite entender todos los elementos que son relevantes para el
esfuerzo de crearlos ni tampoco para la organización de profesionales y técnicos que
aparece tras ellos, y eso es necesario establecer el conjunto total de relaciones para
comprender todos los aspectos a tener en cuenta al desarrollar un espacio digital.
El Modelo Margarita se representa a través de siete elementos o áreas de trabajo,
cada una de ellas con sus tareas y su contribución al área siguiente. Como se
planteaba antes, se utilizó como nombre de trabajo el concepto de la fl or
“margarita” debido a la necesidad de representarlo y por el hecho de que cada uno
de sus elementos es una curva que nace desde los contenidos, crece y luego
vuelve como retroalimentación hacia los mismo contenidos, de forma similar a
como se dibujan los pétalos de esa flor.

25. Gestión de contenido
Definir:
Es la etapa inicial del ciclo abarcado por el modelo y es la que permite determinar
cuáles son las características básicas del producto que se creará, a partir de los
objetivos que se desea alcanzar con el mismo y de las necesidades que se haya
detectado por parte de los usuarios, como también del contexto o de la plataforma
utilizada, que desean ser cubiertas por el producto o proyecto a realizar.
Crear:
Se refi ere a la búsqueda, detección, preparación e incorporación de nuevos
contenidos al proyecto. En esta etapa se da inicio a la generación propiamente tal de
los contenidos de diverso tipo y soporte que se incorporarán al mismo.
Mediatizar:
Consiste en las acciones que permiten recopilar, elaborar y preparar aquellos
contenidos que se ofrecerán a través de medios diferentes al texto en la pantalla
(por ejemplo: audio, video, sistemas interactivos, etc.) que se incorporarán en el
proyecto digital. Junto a lo anterior se determinan las características de acceso de
los contenidos con el fi n de cumplir las normas sobre accesibilidad para personas
con capacidades diferentes.

26. Gestión de contenido
Interactivar:
Es la etapa en que se defi ne la interacción5 que tendrá el producto que se construye y
se elaboran las propuestas de acción que se ofrecerán a partir de los contenidos que
se hayan generado en las etapas previas. Esto puede ser dentro de los contenidos
(interacción propia de la aplicación construida) como a partir de ellos (interacción vía
redes sociales).
Envasar:
Cuando se han cumplido las etapas anteriores llega el momento de preparar
técnicamente el contenido para ser publicado y por lo tanto, lo que se busca es el
cumplimiento de los estándares defi nidos para la plataforma en que se esté
trabajando.
Publicar:
Corresponde al momento de la publicación y por lo tanto es la etapa en que se pone a
disposición de los usuarios todo lo que se ha preparado a través de las etapas
anteriores. Incluye el desarrollo de las diferentes pruebas orientadas a minimizar y
abordar los errores que se pudieran producir en la operación.

27. Gestión de contenido
Gestionar:
Es la etapa fi nal del modelo y consiste en la revisión de lo realizado a la luz de las
estadísticas de visitas que se producirán a partir del uso que le den los usuarios a lo
publicado. La información que produzca permitirá infl uir concretamente en el
proyecto que se desarrolla, debido a que a partir de ella se podrá repetir
nuevamente la ejecución de las etapas anteriores del modelo, generando
retroalimentación directa de aquello que está ocurriendo (o no se está
consiguiendo) desde la plataforma digital.

28. Gestión de contenido (Software)
Un sistema de gestión de contenidos (en inglés Content Management System, abreviado
CMS) es un programa que permite crear una estructura de soporte (framework) para la
creación y administración de contenidos, principalmente en páginas web, por parte de
los administradores, editores, participantes y demás roles.
Existen sistemas desarrollados en software libre y no libre para gestionar el contenido
de nuestro sitio.
Algunos presentan plantillas disponibles que permiten una sencilla diagramación de la
parte estética del sitio sin tener conocimientos de diseño. Ejemplo de ello es
WordPress o Blogger, plataforma sobre la que está montada este blog.
Hay una gran comunidad de desarrolladores de extensiones (llamados plugins) y
plantilla (llamados temas).

29. Pasos a tener en cuenta
1. Plantee un objetivo
¿Qué es lo que usted busca lograr con la publicación de contenido nuevo? Más
lectores, reconocmiento de marca, incremento de ventas, registros para su
newsletter. Es importante que antes de empezar usted tenga esto muy claro.
2. Defina una audiencia:
¿Cuál es el tipo de lector que desea atraer? ¿Se trata del consumidor final de sus
productos o de proveedores y posibles empresas con las que usted desea
establecer relaciones comerciales a futuro? Determine con claridad cuál es su
audiencia, ya que esto es clave a la hora de escoger un tono en su escritura y
elaborar un cronograma de publicación.
3. ¿Cuál es la falencia informativa?
Ya que ha determinado cuál es su audiencia, trate de descubrir qué tipo de
información es la que está buscando, qué necesidad informativa buscan
satisfacer; trate de suplir esa necesidad con la publicación de guías y artículos
relevantes, que den respuesta a esa demanda.

30. Pasos a tener en cuenta
4. ¿Cuál es su valor diferencial?
Saber con claridad que lo diferencia a usted de su competencia es muy importante.
Use esta punto a su favor comunicándolo de manera sutil, con un carácter
informativo asegurándose siempre de agregar algo de valor para el lector.
5. ¿Dónde está el contenido?
Hoy en día es posible encontrar prácticamente cualquier tipo de información en
Internet y los consumidores lo saben. Sin embargo al compilar en un solo lugar
información de calidad sobre temas directamente relacionados con sus servicios
usted estará transformando gradualmente su marca en una autoridad. Investigue
qué fuentes o recursos pueden ser de utilidad para la creación de contenido útil
para su consumidor objetivo.
6. ¿Dónde están sus clientes?
Saber en qué sitios en internet se encuentran sus clientes potenciales le dará un
buen indicio sobre el tipo de contenido que consumen y le dará una visión más clara
del tipo de contenido que puede les resultar más interesante.

31. Pasos a tener en cuenta
7. Escoja un plan de trabajo.
Una vez tenga en claro la respuesta para cada uno de los puntos anteriores
determine qué es mejor para su empresa: crear el contenido a través de un tercero
o invertir en recursos internos para que se encarguen de esta labor.
8. Cree un cronograma de trabajo.
Ponga cada uno de estos pasos con fechas claras en un calendario, esto le dará una
visión más clara de los pasos a seguir.
9. Ejecute y haga seguimiento.
Tome decisiones con base en los resultados, estudie cuáles han sido los beneficios
de la estrategia en relación a la inversión hecha.

32. Taller de búsqueda en Google

33. Taller de búsqueda en Google
Google como el motor de búsqueda más consultado es una de las fuentes de
información más valiosa que ofrece la Web.
Algunos tips:
Escribamos la respuesta de lo que buscamos, en vez de la pregunta.
●
Por ejemplo, el presidente Obama fue elegido en
●
Obama ganó la presidencia con el * por ciento
Usemos comillas para encontrar frases específicas y asterísticos para los datos que
desconocemos.
Inurl:ambiente
Site: .org, .gov, .edu, .com, .int Más información en
Country: .ug, .vn, .in, .ke http://www.google.es/support/websearch/?hl=es
Language: english
Filetype: .doc, .ppt, .pdf