Subscribe

domingo, 27 de marzo de 2011

Analizando una web. Parte I

En este post voy a intentar analizar una web construida en 3 columnas que existe actualmente y está programada en HTML4 y como se haría pensando en el nuevo estándar.
El ejemplo que vamos a tomar como base es la web de una comunidad de la cual soy administrador: www.opencmshispano.com. Para empezar con el análisis vamos a tomar como base la portada de la web.
A continuación podéis ver como es actualmente:

Lo primero que debemos pensar es buscar los distintos bloques a nivel semántico definidos por HTML5 en la web, para ello en la siguiente imagen he señalado los bloques de distintos colores . En rojo tenéis la cabecera y el pie, en naranja los bloques de navegación "nav" y en verde las distintas secciones "section".

Como podéis ver, en esta pantalla principal del portal tenemos numerosas secciones, digamos que serían como las secciones principal del portal. Cada una de ellas tiene un significado y todas ellas podrían tener un título de encabezado. En ningún caso ninguna de ellas se encuentran relacionadas. Las secciones detectadas son:
  • Listado de noticias principal
  • Listado de articulos de Technology For Solutions
  • 2 bloques de listado de banners
  • Un bloque de las últimas entradas en el blog
  • Un bloque de enlaces de interés relacionados con la comunidad.
Igualmente podemos ver como hemos detectados 4 bloques de navegación:
  • Menú principal situado en la columna de la izquierda.
  • Menú de acceso rápido a las herramientas adicionales a la web como son el foro, el blog y las FAQ
  • Menú de navegación a otras secciones de la web basadas en iconos, como son el link a la home, al mapa web, al formulario de contacto y las RSS
  • Enlaces en el pie a los textos legales que suelen acompañar a todas las web con las normas de uso y la política de privacidad.
Por último, los dos bloques quizás más claros de todos, la cabecera y el pie, comunes en todas las páginas y donde introduciremos información relevante del portal como el nombre de la comundiad, la publicidad principal del portal o los agradecimientos situados en el pie.
Hasta el momento hemos comentado la división "semántica" del portal, pero evidentemente existe otro tipo de división, la visual. Como vemos la web está estructurada en 3 columnas, para ellos, y salvo que se me escape, tenemos que seguir usando los divs para la creación de este tipo de bloques visuales. Para ello tendremos un div general que englobará a toda la zona del centro, y un div por cada columna. Si fuera necesario añadir más div por temas de maquetación no tendremos problemas ya que este elemento lo podemos seguir usando como hasta ahora. Por lo tanto la división visual de la web sería:


Bueno hasta aquí hemos visto como se organiza de forma esquematizada una web siguiendo el nuevo estandar HTML5, para próximos post analizaremos con detalle cada uno de los sectores detectados y las páginas interiores como el detalle de una noticia, o el listado de artículos y tutoriales.
Espero vuestros comentarios al respecto, si creéis que mi interpretación y separación no es del todo correcta podemos comentarla para que entre todos lleguemos a sacar unas conclusiones definitivas.

6 comentarios:

addit dijo...
Este comentario ha sido eliminado por un administrador del blog.
sinentradas dijo...

Hola, acabo de encontrar tu blog y me parece muy interesante y completo, enhorabuena!! Leyendo este post, llego al punto en el que analizando la web, diferencias 3 o 4 navs distintos y, según he leído, sólo debería haber un atributo por página, ya que este se utiliza la para la navegación principal del sitio y preferiblemente utilizando listas. ¿Es esto correcto? Enhorabuena una vez más por el blog ;)

Sergio Raposo Vargas dijo...

Yo sinceramente no le encuentro sentido a que en una página solo tengamos 1 nav. Es posible, como por ejemplo en la web que comentaba, que yo dispongo de 3 menús, por lo tanto necesito 3 nav. Es posible que uno sea más importante que otros, pero semánticamente el significado de todos ellos es el mismo, una lista de enlaces que son parte de tu sitio web.

Lo que no podemos es poner nav siempre que tengamos un enlace, es decir, si como información adjunta a un contenido hay un enlace a otro, yo no lo pondría como nav ya que realmente no es un menú.

Espero haberte aclarado un poco el tema.

Cesar Castejon dijo...

Hola Sergio. muy bueno tu blog. Mi pregunta es que Gestor de contenido usas para el portal OpenCMS. O no usas ningun gestor de contenidos?.

Yo quiero crear la pagina web del colegio donde trabajo y capacitandome en HTML5 y CSS3. Pero quisiera saber si hago el sitio con gestor o solo a puro codigo.

Gracias.

PoL dijo...

Esta es la colección de algunos de los mejores pagina web html que viene con increíbles funciones.

Government Jobs in Goa dijo...

Hi, their colleagues, nice paragraph and nice arguments commented here, I am really enjoying by these.
bcom 3rd year result 2022 subject wise

Publicar un comentario