SlideShare una empresa de Scribd logo
1 de 3
El esqueleto de la web
Empezaremos definiendo la información que queremos ofrecer y la manera
cómo la vamos a agrupar. Es decir, crearemos el árbol de contenidos: se trata
de organizar los contenidos de una forma lógica e intuitiva para que el usuario
sepa rápidamente donde hacer clic para encontrar la información que está
buscando.
Cuando tengamos el árbol de contenidos medianamente cerrado (los árboles,
como pasa en la naturaleza, no paran de crecer y transformarse) decidiremos
cómo se mostrará y distribuirá la información en nuestra web. Una manera muy
práctica de hacerlo es “dibujar” cada pantalla: se trata de hacer esbozos
(también llamados wireframes) con un papel y un lápiz o utilizando programas
informáticos como Power Point, Visio, OmniGraffle, etc. Lo ideal es hacer
un wireframe para cada página del árbol de contenidos, de esta manera
tendremos una visión general de la futura web.
Los wireframes nos ayudarán a reflexionar sobre la mejor manera de mostrar
los contenidos, saber cuáles son las informaciones más importantes, cómo
navegará el usuario por nuestra web… Los wireframes tienen que ser realistas
y viables tanto desde el punto de vista técnico como económico y deben servir
para solucionar dudas o temas pendientes antes de pasar a la fase de diseño,
maquetación y programación.
Diseño y maquetación
Y finalmente llega el momento de ponerle cara al proyecto mediante un diseño
adecuado. Y decimos adecuado porqué el diseño debe ir más allá de la mera
función estética: debe apoyar y complementar las decisiones tomadas y seguir
los objetivos definidos.
Una vez tenemos el diseño, es el momento de encajar las piezas mediante la
maquetación. El maquetador se encarga de que las piezas de diseño se
ajusten bien las unas con las otras y de que todo se vea como ha sido
planteado previamente por los diseñadores. Si el azul es celeste, deberá verse
celeste y no marino, por ejemplo, o si hay 5 píxeles de distancia entre dos
fotos, deberán ser 5 píxeles y no 7.
¿Lo estamos haciendo bien? La usabilidad
El proceso ideal incluye aquí un alto en el camino: hemos definido los objetivos,
conocemos las expectativas de nuestros usuarios y con ello hemos hecho un
planteamiento estructural y de diseño, pero… ¿Lo estamos haciendo bien? Es
un buen momento para plantear una nueva reunión, una nueva puesta en
común con nuestra audiencia para saber si hemos comprendido lo que nos
querían transmitir, si hemos acertado en el diseño, en la manera de plantear la
navegación, en la organización de la información… Todo ello afectará a la
usabilidad (la facilidad de uso).
Hay diferentes manereas de testear la usabilidad de una web: test de
usabilidad, entrevistas en profundidad, análisis heurísticos… El objetivo es
detectar qué aspectos deben mejorarse para adaptarlos a la lógica de los
usuarios y garantizar que cuando visiten nuestra web puedan cumplir
rápidamente los objetivos que les han llevado a visitarnos.
Programación, lanzamiento y seguimiento
Una vez finalizados los retoques pertinentes, se pasa a la fase de
programación, la parte más técnica del proyecto, y se prueba el funcionamiento
antes de su publicación en Internet. A partir de este momento, empezarán las
tareas de difusión y promoción.
Y la tarea de difusión y promoción, pasa, obligatoriamente por
el posicionamiento en los distintos buscadores, especialmente en Google. Para
existir en Internet tenemos que estar en Google, para ello debemos elegir con
sumo cuidado las palabras clave (keywords) con las que queremos que nos
encuentren cuando algun usuario las teclee en un buscador y conseguir que
otras webs (blogs,Technorati, Del-ici-ous) enlacen a nuestra página. De esta
manera conseguiremos dos cosas:
Si estamos presentes en otras webs más, fácil será que nos conozcan y que
los usuarios que nunca llegarían directamente a nuestra web, lo hagan a partir
de una web que tenga nuestro enlace.
Cuántas más páginas enlacen a la nuestra, mejor será nuestro posicionamiento
en Google, y más fácil será hacernos visibles.
Una web nunca hay que “aparcarla” sin más: debemos estar pendientes de lo
que en ella acontece, observar el comportamiento de nuestros usuarios, ya sea
mediante una medición analítica (cómo se mueven los usuarios, qué páginas
visitan, cuánto tiempo están en cada página, qué contenidos no miran…) o
mediante el análisis de sus comentarios, intercambios, inquietudes,
sugerencias… y actuar en consecuencia: cambiando determinados elementos,
añadiendo contenidos, reorganizando la información, etc.
Hay que tener en cuenta que la vida de un una web no es eterna, necesita
evolucionar al mismo tiempo que lo hacen nuestros objetivos, las necesidades
de la audiencia, las herramientas y los comportamentos sociales. Por lo tanto,
es conveniente repetir periódicamente el proceso desglosado en este artículo
para no perder el impulso en este entorno tan dinámico y cambiante llamado
Internet.
Juan Carlos Ayala Medrano
http//www.estructuradearboles.com

Más contenido relacionado

Destacado

Alteration of Patent Protection Length in the Intellectual Property Provision...
Alteration of Patent Protection Length in the Intellectual Property Provision...Alteration of Patent Protection Length in the Intellectual Property Provision...
Alteration of Patent Protection Length in the Intellectual Property Provision...
Karim Khayat
 
Route34 Presentation
Route34 PresentationRoute34 Presentation
Route34 Presentation
tharne
 
Route34 Presentation
Route34 PresentationRoute34 Presentation
Route34 Presentation
tharne
 
Go Green Tuscaloosa Newsletter
Go Green Tuscaloosa NewsletterGo Green Tuscaloosa Newsletter
Go Green Tuscaloosa Newsletter
kganthony
 
Evaluation question 4
Evaluation question 4Evaluation question 4
Evaluation question 4
SophieClarke
 
Slides photos 1
Slides photos 1Slides photos 1
Slides photos 1
westlake59
 
Presentaciones de libros
Presentaciones de librosPresentaciones de libros
Presentaciones de libros
materesl
 

Destacado (7)

Alteration of Patent Protection Length in the Intellectual Property Provision...
Alteration of Patent Protection Length in the Intellectual Property Provision...Alteration of Patent Protection Length in the Intellectual Property Provision...
Alteration of Patent Protection Length in the Intellectual Property Provision...
 
Route34 Presentation
Route34 PresentationRoute34 Presentation
Route34 Presentation
 
Route34 Presentation
Route34 PresentationRoute34 Presentation
Route34 Presentation
 
Go Green Tuscaloosa Newsletter
Go Green Tuscaloosa NewsletterGo Green Tuscaloosa Newsletter
Go Green Tuscaloosa Newsletter
 
Evaluation question 4
Evaluation question 4Evaluation question 4
Evaluation question 4
 
Slides photos 1
Slides photos 1Slides photos 1
Slides photos 1
 
Presentaciones de libros
Presentaciones de librosPresentaciones de libros
Presentaciones de libros
 

Similar a El esqueleto de la web

Principios de Usabilidad para Dominar la Red
Principios de Usabilidad para Dominar la RedPrincipios de Usabilidad para Dominar la Red
Principios de Usabilidad para Dominar la Red
Jose Maria Diaz
 
Guía para la creación de páginas web
Guía para la creación de páginas webGuía para la creación de páginas web
Guía para la creación de páginas web
Cesar Salazar
 
Diseno web 2
Diseno web 2Diseno web 2
Diseno web 2
blogdevon
 
3 procesos web
3 procesos web3 procesos web
3 procesos web
UVM
 
Auditoria tarea 2 rizzo-3a5
Auditoria tarea 2 rizzo-3a5Auditoria tarea 2 rizzo-3a5
Auditoria tarea 2 rizzo-3a5
rizzorivas3a5
 
Pagina web arquitectura
Pagina web arquitecturaPagina web arquitectura
Pagina web arquitectura
javier0510
 
Guía diseño y elaboración pagina web
Guía diseño y elaboración pagina webGuía diseño y elaboración pagina web
Guía diseño y elaboración pagina web
Black creativebox
 
Guía para la creacion de paginas web
Guía para la creacion de paginas webGuía para la creacion de paginas web
Guía para la creacion de paginas web
Dany Lpz
 

Similar a El esqueleto de la web (20)

Principios de Usabilidad para Dominar la Red
Principios de Usabilidad para Dominar la RedPrincipios de Usabilidad para Dominar la Red
Principios de Usabilidad para Dominar la Red
 
Guía para la creación de páginas web
Guía para la creación de páginas webGuía para la creación de páginas web
Guía para la creación de páginas web
 
Presentación Estudiantes Webmaster Area 2º Curso
Presentación Estudiantes Webmaster Area 2º CursoPresentación Estudiantes Webmaster Area 2º Curso
Presentación Estudiantes Webmaster Area 2º Curso
 
Diseno web 2
Diseno web 2Diseno web 2
Diseno web 2
 
Unidad 3. Herramientas WEB 2.0
Unidad 3. Herramientas WEB 2.0Unidad 3. Herramientas WEB 2.0
Unidad 3. Herramientas WEB 2.0
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Diseno web 2
Diseno web 2Diseno web 2
Diseno web 2
 
Usabilidad Temari
Usabilidad TemariUsabilidad Temari
Usabilidad Temari
 
3 procesos web
3 procesos web3 procesos web
3 procesos web
 
Tema 3. usabilidad version 2011
Tema 3. usabilidad version 2011Tema 3. usabilidad version 2011
Tema 3. usabilidad version 2011
 
fases de un proyecto web
fases de un proyecto webfases de un proyecto web
fases de un proyecto web
 
Auditoria tarea 2 rizzo-3a5
Auditoria tarea 2 rizzo-3a5Auditoria tarea 2 rizzo-3a5
Auditoria tarea 2 rizzo-3a5
 
Pagina web arquitectura
Pagina web arquitecturaPagina web arquitectura
Pagina web arquitectura
 
Pagina web arquitectura
Pagina web arquitecturaPagina web arquitectura
Pagina web arquitectura
 
M2 DiseñO Web
M2   DiseñO WebM2   DiseñO Web
M2 DiseñO Web
 
La era digital.
La era digital.La era digital.
La era digital.
 
Guía diseño y elaboración pagina web
Guía diseño y elaboración pagina webGuía diseño y elaboración pagina web
Guía diseño y elaboración pagina web
 
Guía diseño y elaboración pagina web
Guía diseño y elaboración pagina webGuía diseño y elaboración pagina web
Guía diseño y elaboración pagina web
 
Guía para la creacion de paginas web
Guía para la creacion de paginas webGuía para la creacion de paginas web
Guía para la creacion de paginas web
 
Informatica aplicada
Informatica aplicadaInformatica aplicada
Informatica aplicada
 

Más de Juan Carlos Medrano

Más de Juan Carlos Medrano (7)

Configuración del entorno
Configuración del entornoConfiguración del entorno
Configuración del entorno
 
Desarrollo de página web dinámica
Desarrollo de página web dinámicaDesarrollo de página web dinámica
Desarrollo de página web dinámica
 
Concepto de margen y relleno css
Concepto de margen y relleno cssConcepto de margen y relleno css
Concepto de margen y relleno css
 
Implementación del código xhtml para el desarrollo de
Implementación del código xhtml para el desarrollo deImplementación del código xhtml para el desarrollo de
Implementación del código xhtml para el desarrollo de
 
Identificacion
IdentificacionIdentificacion
Identificacion
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 
Ejemplo de etiquetas
Ejemplo de etiquetasEjemplo de etiquetas
Ejemplo de etiquetas
 

El esqueleto de la web

  • 1. El esqueleto de la web Empezaremos definiendo la información que queremos ofrecer y la manera cómo la vamos a agrupar. Es decir, crearemos el árbol de contenidos: se trata de organizar los contenidos de una forma lógica e intuitiva para que el usuario sepa rápidamente donde hacer clic para encontrar la información que está buscando. Cuando tengamos el árbol de contenidos medianamente cerrado (los árboles, como pasa en la naturaleza, no paran de crecer y transformarse) decidiremos cómo se mostrará y distribuirá la información en nuestra web. Una manera muy práctica de hacerlo es “dibujar” cada pantalla: se trata de hacer esbozos (también llamados wireframes) con un papel y un lápiz o utilizando programas informáticos como Power Point, Visio, OmniGraffle, etc. Lo ideal es hacer un wireframe para cada página del árbol de contenidos, de esta manera tendremos una visión general de la futura web. Los wireframes nos ayudarán a reflexionar sobre la mejor manera de mostrar los contenidos, saber cuáles son las informaciones más importantes, cómo
  • 2. navegará el usuario por nuestra web… Los wireframes tienen que ser realistas y viables tanto desde el punto de vista técnico como económico y deben servir para solucionar dudas o temas pendientes antes de pasar a la fase de diseño, maquetación y programación. Diseño y maquetación Y finalmente llega el momento de ponerle cara al proyecto mediante un diseño adecuado. Y decimos adecuado porqué el diseño debe ir más allá de la mera función estética: debe apoyar y complementar las decisiones tomadas y seguir los objetivos definidos. Una vez tenemos el diseño, es el momento de encajar las piezas mediante la maquetación. El maquetador se encarga de que las piezas de diseño se ajusten bien las unas con las otras y de que todo se vea como ha sido planteado previamente por los diseñadores. Si el azul es celeste, deberá verse celeste y no marino, por ejemplo, o si hay 5 píxeles de distancia entre dos fotos, deberán ser 5 píxeles y no 7. ¿Lo estamos haciendo bien? La usabilidad El proceso ideal incluye aquí un alto en el camino: hemos definido los objetivos, conocemos las expectativas de nuestros usuarios y con ello hemos hecho un planteamiento estructural y de diseño, pero… ¿Lo estamos haciendo bien? Es un buen momento para plantear una nueva reunión, una nueva puesta en común con nuestra audiencia para saber si hemos comprendido lo que nos querían transmitir, si hemos acertado en el diseño, en la manera de plantear la navegación, en la organización de la información… Todo ello afectará a la usabilidad (la facilidad de uso). Hay diferentes manereas de testear la usabilidad de una web: test de usabilidad, entrevistas en profundidad, análisis heurísticos… El objetivo es detectar qué aspectos deben mejorarse para adaptarlos a la lógica de los usuarios y garantizar que cuando visiten nuestra web puedan cumplir rápidamente los objetivos que les han llevado a visitarnos. Programación, lanzamiento y seguimiento Una vez finalizados los retoques pertinentes, se pasa a la fase de programación, la parte más técnica del proyecto, y se prueba el funcionamiento antes de su publicación en Internet. A partir de este momento, empezarán las tareas de difusión y promoción. Y la tarea de difusión y promoción, pasa, obligatoriamente por el posicionamiento en los distintos buscadores, especialmente en Google. Para existir en Internet tenemos que estar en Google, para ello debemos elegir con sumo cuidado las palabras clave (keywords) con las que queremos que nos
  • 3. encuentren cuando algun usuario las teclee en un buscador y conseguir que otras webs (blogs,Technorati, Del-ici-ous) enlacen a nuestra página. De esta manera conseguiremos dos cosas: Si estamos presentes en otras webs más, fácil será que nos conozcan y que los usuarios que nunca llegarían directamente a nuestra web, lo hagan a partir de una web que tenga nuestro enlace. Cuántas más páginas enlacen a la nuestra, mejor será nuestro posicionamiento en Google, y más fácil será hacernos visibles. Una web nunca hay que “aparcarla” sin más: debemos estar pendientes de lo que en ella acontece, observar el comportamiento de nuestros usuarios, ya sea mediante una medición analítica (cómo se mueven los usuarios, qué páginas visitan, cuánto tiempo están en cada página, qué contenidos no miran…) o mediante el análisis de sus comentarios, intercambios, inquietudes, sugerencias… y actuar en consecuencia: cambiando determinados elementos, añadiendo contenidos, reorganizando la información, etc. Hay que tener en cuenta que la vida de un una web no es eterna, necesita evolucionar al mismo tiempo que lo hacen nuestros objetivos, las necesidades de la audiencia, las herramientas y los comportamentos sociales. Por lo tanto, es conveniente repetir periódicamente el proceso desglosado en este artículo para no perder el impulso en este entorno tan dinámico y cambiante llamado Internet. Juan Carlos Ayala Medrano http//www.estructuradearboles.com