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.
