08Jun 2009 7 Comments */?>

CSS: Estructura Vs Semántica . Como nombrar las diferentes partes de mi web

Categorías: Tutoriales - Tags: ,

En mi último artículo comente como optimizar los archivos CSS de forma que queden organizados estructuralmente, facilitando así el mantenimiento y lectura de los mismos.

Hoy lo que voy a exponer es algo que la verdad se debería aprender antes, pero como dicen algunos, más vale tarde que nunca.

Básicamente nombrar los elementos de una web de forma semántica siginifca nombrarlos por su significado como pueden ser main (contenido principal) o sidebar (barra lateral), en cambio hacerlo de una forma estructural sería llamar a cada cosa por su nombre como por ejemplo right-bar (barra derecha) o left-content (contenido de la izquierda)

Imágenes obtenidas de http://woork.blogspot.com

Imágenes obtenidas de http://woork.blogspot.com

Ahora imaginá por un momento que tenés que cambiar la orientación de la web bien porque no queda bien o porque tu cliente prefiere la barra del otro lado etc. Con el método estructural tendrias que cambiar todos los nombres para que siga teniendo la coherencia que tenía al principio ya que sino quedaría invertido. En cambio con el método semántico todo seguiría en su sitio.

Imágenes obtenidas de http://woork.blogspot.com

Imágenes obtenidas de http://woork.blogspot.com

En conclución si elegimos los nombres de los elementos de una forma semántica no tendremos que preocuparnos en cambiar todos los nombres cada vez que modifiquemos el diseño, sino simplemente cambiar las propiedades que nos hagan falta.

Puntos a tener en cuenta…..

1. Es conveniente usar minúsculas y separar las palabras mediante “-” o mayúsculas. Por ejemplo main-content o mainContent.

2. Optimizar tu código CSS creando solo los elementos principales que necesites y reutilizando las etiquetas HTML para los nodos hijos. Por ejemplo en vez de:

1
2
3
4
<div class="main">
     <div class="main-title">...</div>
     <div class="main-paragraph">...</div>
</div>

Usar :

1
2
3
4
<div class="main">
     <h1>...</h1>
     <p>...</p>
</div>

Con esto mantemos el código HTML más sencillo sin perder la opción de cambiar los atributos desde CSS.

Algunos ejemplos de como nombrar semánticamente los elementos

Por ejemplo es un diseño de 3 columnas podriamos hacerlo de la siguiente manera:
sem

Otra formas de llamar a los elementos y que vas a encontrar a menudo por ahi son:

1.Container

El container o contenedor se utilizar para encajar nuestra web dentro. En ingles esto se dice “wrap” por lo que es my posible que tambien lo encuentres con ese nombre o el de “wrapper”.

2. Header

Es la parte superior de la web , donde se suele encontrar el logo  de la misma. Se suele llamar “top”, “logo” , o simplemente “top-header”.

3. Navbar

Es el menu de navegación que suele encontrarse en la parte superior. Los nombres más comunes son “navbar”, “nav”, “navigation”, “nav-wrapper”.

4. Menu

Es la parte donde se encuentran los links generales o algun menu. Se suele llamar “menu”, “links”, “sub-nav”.

5. Main

Contenido principal de la web. Los nombres más comunes son “main-content”, “content” o “main”.

6. Sidebar

El sidebar es utilizado para contenido secundario como por ejemplo las últimas entradas, espacio publicitario, información del sitio …etc. Por lo que su nombre puede variar como “sidebar”, “sub-nav”, “side-panel”, “secondary-content”, etc.

7. Footer

El pie de página suele ser la parte donde ponemos el copyright de la web, quien la diseño , etc. Por lo general siempre lo vas a encontrar como “footer” o “copyright”.

Hay miles de formas más para llamar a los diferentes elementos de forma semántica. Si se les ocurre alguno , simplemente dejenlo en los comentarios.

Para los que quieran indagar un poco más sobre este tema hay un monton de artículos sobre el (en ingles):

1. More on developing naming conventions, Microformats and HTML5
2. Standardizing CSS class and id names
3. User interfaces and CSS Naming convention
4. Structural naming
5. Smart CSS Ain’t Always Sexy CSS
6. Semantic coding
7. Semantic naming conventions for HTML and CSS
8. What’s in a name (pt1)
9. What’s in a name (pt2)
10. Most popular naming conventions
11. Semantic and Structural aspects of HTML

Un saludo a todos!!

|Via WorkUp

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • RoberTito

    Me fue de muchisima ayuda, segui con el excelente trabajo. Saludos

  • Matías Iturbu

    Este artículo es una traducción del creado por WOORK (Antonio Lupetti ) http://woork.blogspot.com/2008/11/css-coding-sema… .

    Seguramente te olvidaste de poner eso en algún lado. El plagio es algo muy feo.

    Saludos

    • Como bien decis me olvide de poner el Via , aunque si lo habia puesto en la imágenes. Gracias por el comentario ya esta corregido. Saludos!!

  • adrian_z66

    no sirve… que pasa??? alguien puede ayudarme con los errores??? en verdad necesito el archivo

  • Buenos consejos. Es importante tener una web bien organizada si se quiere atraer público.

  • Un artículo sencillo y claro de cómo se debería maquetar cualquier sitio web. Ahorra tiempo en postproducción y retoques. Además el modelo semántico puede ayudar a los buscadores a entender mucho mejor la estructuración final del contenido en el sitio.

  • Jhon Kener Garcia Morales

    Gracias Damián por compartir.