1.CSS3.me

css3.me es uno de los generadores online de CSS3 más usado. Como características incluye color, bordes, opacidad, relieve, y otras funciones básicas.

2.CSS3 Generator

CSS3 Generator, es un poco más avanzado porque tiene más opciones como las propiedades , duración , etc . Igualmente es tan popular como el anterior.

3.CSS3 Maker

CSS3 Maker, esta siendo cada vez más utilizado por su simpleza y diseño de facil manejo. Como característica destacada la compatibilidad con dispositivos móviles.

4.CSS3 Please

CSS3 Please Es un editor web cross browser .Soporta border-radius, box-shadow, gradient(linear), rgba colors, transform (rotate), transition and @font-face. Curioso diseño donde lo que editas va cambiando en directo.

5. CSS3 Click Chart

Click Chart es otro generador CSS3 con muchos efectos disponibles.

6.Border Radius

Border RadiusUna de las opciones más elegantes para los bordes redondeados y muy facil de usar. Ideal para los vagos como yo.

7.CSS-Tricks Button Maker 

CSS-Tricks Button Maker es un generador de botones CSS3 sencillo ya que solo moviendo unos sliders podremos generar lindos botones.

8.Westciv 

Westciv es como un compilado de generadores css3, un obligatorio en tus marcadores.

9.CSS3 Generador de degradados 

gradients.glrzad.com es un generador de degradados lineales para mozilla y Webkit.

10. Widgetpad generador CSS3

Widgetpad CSS3 Generator es otro generador online de CSS que aunque no tiene tantas opciones como el resto , se puede considerar usable y por lo tanto incluirlo en esta lista.

11.Westciv SandBox 

Westciv CSS3 Sandbox incluye sombras, degradados, text strokes y mucho más. Además prometen añadir nuevas funciones en cualquier momento.

12.Border Image 

Border Image es otro generador de border radius para redondear esquinas y crear border de varios estilos.

13.CSS3 Menu Generator 

CSS3 Menu Generator es una aplicación para generar hermosos menus CSS3.

14.CSS3 Column Generator 

CSS3 Column Generator es un generador de columnas de los tantos que hay en internet, está en frances pero igualmente es de muy facil uso.

15.CSS3 Degradados de 3 colores 

CSS3 Degradados de 3 colores es ni más ni menos que como su nombre indica , un generador de degradados de 3 colores.

Espero que este listado les haya sido útil. Ustedes usan otros sitios?

Los shortcodes que vamos a ver son : Mostrar un snapshot de una página web , Añadir un botón de donaciones de Paypal, Ofuscar direcciones de email, Generar contenido privado y Mostrar solo en los feeds de RSS.

Como funciona?

Copiar todos los shortcodes a functions.php

1. Mostrar un snapshot de un website

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function mqw_wp_snapshot($atts, $content = null) {
        extract(shortcode_atts(array(
            "snap" => 'http://s.wordpress.com/mshots/v1/',
            "url" => 'http://www.masquewordpress.com',
            "alt" => 'SnapShot',
            "w" => '400', // width
            "h" => '300', // height
            "align" => 'aligncenter'
        ), $atts));
 
    $img = '<img src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '" class="' . $align .'"/>';
        return $img;
}
 
add_shortcode("snapshot", "mqw_wp_snapshot");

Lo usamos de la siguiente manera:

1

[snapshot url="http://www.masquewordpress.com" alt="Snapshot" w="400" h="300" align="aligncenter"]

Impresionante verdad?

2. Añadir boton de donación Paypal

Hacer una donación

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function mqw_shortocode_donacion( $atts ) {
    extract(shortcode_atts(array(
        'text' => 'Hacer una donación',
        'account' => 'TU CUENTA',
        'for' => '',
    ), $atts));
 
    global $post;
 
    if (!$for) $for = str_replace(" ","+",$post->post_title);
 
    return '<a class="donateLink" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation+for+'.$for.'">'.$text.'</a>';
 
}
add_shortcode('boton-donacion', 'mqw_shortocode_donacion');

Lo usamos de la siguiente manera:

1

[boton-donacion]

Lo único que tienen que hacer es usar un poco de CSS para darle estilo al botón.

3. Ofuscar una dirección de email

Todos odiamos el SPAM, eso es un echo. Este código lo que hace es “ocultar” tu dirección de email para que no sea indexada por robots y spiders que van por la web.

1
2
3
4
5

function mqw_ofuscar_email( $atts , $content=null ) {
    for ($i = 0; $i < strlen($content); $i++) $encodedmail .= "&#" . ord($content[$i]) . ';';
    return '<a href="mailto:'.$encodedmail.'">'.$encodedmail.'</a>';
}
add_shortcode('mailto', 'mqw_ofuscar_email');

Se usa de la siguiente manera:

1

[mailto]email@yourdomain.com[/mailto]

El código fuente se verá de la siguiente manera evitando así un monton de BOTS

1

email@email.com

4. Crear Contenido Privado

Pequeño y útil shortocode que sirve para mostrar contenido solo a usuarios registrados. Esta perfecto para archivos de descargas o formularios privados.

1
2
3
4
5
6
7

function mqw_miembros_check( $atts, $content = null ) {
     if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
        return $content;
    return '';
}
 
add_shortcode( 'miembros', 'mqw_miembros_check' );

Como usar el shortcode?Fácil

1

[miembros]Este texto solo será visible por los miembros registrados.[/miembros]

5. Mostrar solo en los feeds RSS

Es muy parecido al shortcode anterior con la única diferencia de que el contenido solo se mostrará es los feeds rss.

1
2
3
4
5

function mqw_rss_only( $atts, $content = null) {
    if (!is_feed()) return "";
    return $content;
}
add_shortcode('rssonly', 'mqw_rss_only');

Lo usamos de la siguiente manera:

1

[rssonly]Querido usuario gracias por subscribirte a mis feeds.[/rssonly]

Y por arte de magia cuando lean el post en los feeds verán ese mensaje.

El HTML permanece igual, solo que le añadimos algunos dropdowns:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<div id="menu_wrapper">
   <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#" class="active">Link 2</a>
          <ul>
            <li><a href="#">Link Uno</a></li>
            <li><a href="#">Link Dos</a></li>
            <li><a href="#">Link Tres</a></li>
            <li><a href="#">Link cuatro</a></li>
            <li><a href="#">Link cinco aun más largo</a></li>
         </ul>
      </li>
      <li><a href="#">Link 3 un poco más largo que Link 2</a>
          <ul>
            <li><a href="#">Link Uno</a></li>
            <li><a href="#">Link Dos</a></li>
            <li><a href="#">Link Tres</a></li>
            <li><a href="#">Link cuatro</a></li>
            <li><a href="#">Link cinco aun más largo</a></li>
         </ul>
      </li>
      <li><a href="#">Link 4</a>
          <ul>
            <li><a href="#">Link Uno</a></li>
            <li><a href="#">Link Dos</a></li>
            <li><a href="#">Link Tres</a></li>
            <li><a href="#">Link cuatro</a></li>
            <li><a href="#">Link cinco aun más largo</a></li>
         </ul> 
      </li>
   </ul>
</div>

Y ahora el CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

 
/* Menu wrapper */
#menu_wrapper {
   clear:both;
   float:left;
   margin:0;
   padding:0;
   border-bottom:1px solid #000; 
   width:100%;
   font-family:Verdana, Geneva, sans-serif; 
   font-size:90%; 
   z-index:1000; /* Para asegurarnos que sea vea el dropmenu dobre el contenido de la página */
   position:relative;
}
 
/* Menu superior */
#menu_wrapper ul {
   margin:0;
   padding:0;
   list-style:none;
   float:right;
   position:relative;
   right:50%;
}
#menu_wrapper ul li {
   margin:0 0 0 1px;
   padding:0;
   float:left;
   position:relative;
   left:50%;
   top:1px;
}
#menu_wrapper ul li a {
   display:block;
   margin:0;
   padding:.6em .5em .4em;
   font-size:1em;
   line-height:1em;
   background:#ddd;
   text-decoration:none;
   color:#444;
   font-weight:bold;
   border-bottom:1px solid #000;
}
#menu_wrapper ul li.active a {
   color:#fff;
   background:#000;
}
#menu_wrapper ul li a:hover {
   background:#36f; 
   color:#fff;
   border-bottom:1px solid #03f;
}
#menu_wrapper ul li:hover a,
#menu_wrapper ul li.hover a { /* IE 6 */
   background:#36f; 
   color:#fff;
   border-bottom:1px solid #03f;
}
 
 
#menu_wrapper ul ul {
   display:none; 
   position:absolute;
   top:2em;
   left:0;
   right:auto; /*resets del ul superior */
   width:10em; /* ancho de los dropdown */
}
#menu_wrapper ul ul li {
   left:auto;  /*reset del li superior */
   margin:0; /* Reset de margin */
   clear:left;
   width:100%;
}
#menu_wrapper ul ul li a,
#menu_wrapper ul li.active li a,
#menu_wrapper ul li:hover ul li a,
#menu_wrapper ul li.hover ul li a { /* IE6 */
   font-size:.8em;
   font-weight:normal; 
   background:#eee;
   color:#444;
   line-height:1.4em; 
   border-bottom:1px solid #ddd; 
}
#menu_wrapper ul ul li a:hover,
#menu_wrapper ul li.active ul li a:hover,
#menu_wrapper ul li:hover ul li a:hover,
#menu_wrapper ul li.hover ul li a:hover { 
   background:#36f; 
   color:#fff;
}
 
 
#menu_wrapper ul li:hover ul,
#menu_wrapper ul li.hover ul { /* IE6 */
   display:block; 
}

Ahora hagan click para ver el nuevo ejemplo de menu centrado con dropdowns de ancho variable

Básicamente lo que hacemos es quitar la regla de

overflow:hidden

y en vez de desplazar todo a la derecha lo desplazamos a la izquierda de la pantalla para que así no aparescan las molestas scrollbars.
Se pueden hacer una idea de como queda viendo el siguiente diagrama:

IE6 que $#”&%%&/!! ……

En esta ocasión si necesitamos un poco de Javascript para añadir la clase .hover ya que IE6 no soporta el método hover en los li.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!--[if lt IE 7]>
<script type="text/javascript" >
function addhover() {
   var navli,i;
   // loop through all elements in the nav
   navli = document.getElementById('menu_wrapper').getElementsByTagName('li')
   for(i=0;i<navli.length;i++) {
      // add the hover functions to the li onmouseover and onmouseout
      navli[i].onmouseover=function(){hover(this,'hover');};
      navli[i].onmouseout=function(){hover(this,'');};
   }
}
function hover(o,sClass) {
   if (o) {
      o.className = sClass;
   }
}
addhover(); 
</script><![endif]-->

Saludos!!!

Hay varias soluciones para este problema pero la que más me gusta a mí es la siguiente:

1
2
3
4
5
6
7
8

<div id="menu_wrapper">
   <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#" class="active">Link 2</a></li>
      <li><a href="#">Link 3 un poco más largo que Link 2</a></li>
      <li><a href="#">Link 4</a></li>
   </ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

#menu_wrapper {
   float:left;
   width:100%;
   background:#fff;
   border-bottom:4px solid #000;
   overflow:hidden;
   position:relative;
}
#menu_wrapper ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#menu_wrapper ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#menu_wrapper ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#menu_wrapper ul li a:hover {
   background:#369;
   color:#fff;
}
#menu_wrapper ul li a.active,
#menu_wrapper ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

Pueden ver un ejemplo aquí .

Aunque dicho método es para un menu también se puede aplicar a otros elementos.
Lo bueno es que no necesitamos javascript, hacks CSS ni nada raro. todo funciona perfectamente , es xhtml válido y funciona con todos los navegadores.

Espero que les haya servido. Saludos!!

1
2
3
4
5
6
7
8
9

p {
    background:#000000;
    margin: 10px;
}
a { color:black;}
p {
   padding-left:10px;
   color:#444444;
}

Lo convierte en :

1
2
3
4
5
6
7
8
9
10

p {
background:#000;
padding-left:10px;
color:#444;
margin:10px
}
 
a {
color:#000
}

Interesante no? Pueden acceder al optimizador de CSS en http://floele.flyspray.org/csstidy//css_optimiser.php?lang=en

Saludos

Otra cosa que pensé es dividirlos en categorías pero como la mayoría  ocupan varias categorías es mejor que cada uno ponga al lado los principales temas  que se tratan y simplemente los dividimos en 2 grandes grupos. Páginas en Ingles y en Español

Español

Timersys <—- JQuery ,PHP , tutoriales , recursos y mucho más @Damian Logghe

Anieto2K <—- Desarollo web, wordpress, fotografía ,etc @Andres Nieto

CSSBlog Es <—- CSS 100% y monton de recursos @Pedro Corchero Murga

Foros del web <—- Impresionante comunidad con miles de miembros activos dispuestos a ayudarte @Forosdelweb

LibrosWeb <—- Manuales completamente gratis de programación y diseño web.

Todo Tutoriales Web <—- Recursos y trucos para foroactivo, diseño, etc @Carlos

Ingles

WoorkUp <—- Recursos , tutoriales y artículos muy buenos @Antonio Lupetti

Smashing Magazine <—- Excelente web con miles de recursos gráficos @Smashing Mag

Nettuts+ <—- Página super completa con tutoriales y ejemplos de todos @nettuts

Ahora por favor colaboren que entre todos podemos hacer una buena lista. Saludos!!

Hoy se me dio por hacer uno bastante gracioso basado en las explicaciones de lanrat acerca de como construir un cubo usando las nuevas propiedades CSS.

Su utilización es muy sencilla, tan solo necesitamos 3 objetos ( las caras visibles del cubo) dentro de un objeto contenedor. Dichos objetos pueden ser links , imágenes, otros divs, etc

1
2
3
4
5

<div class="cube">
<div><img src="1.jpg" /></div>
<div><img src="2.jpg" /></div>
<div><img src="3.jpg" /></div>
</div>

Una vez que tenemos nuestra estructura HTML armada debemos aplicar el plugin de la siguiente forma:

1
2
3
4
5
6
7
8

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jcubeit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						   $('.cube').JcubeiT();
 
						   });
</script>

Y voila!! Tendremos un cubo perfecto con el cual podremos hacer un poco más original nuestros diseños.

El plugin posee algunos valores por defecto que se pueden cambiar pasando opciones.

• size:’200px’
• background: ‘#666′
• border: true
• borderColor: ‘#000′
• rounded: false

Podemos cambiar estos valores pasando las opciones como se suele hacer en JQuery

1
2
3
4
5

var opciones={ size:'100px' , border: false};
$('.cube').JcubeiT(opciones);
 
//o simplemente
$('.cube').JcubeiT({ size:'100px' , border: false});

Jugando con las opciones podremos crear por ejemplo una barra de menu más original

Pueden ver el ejemplo online o descargarse el código desde la página oficial de JQuery

ENGLISH

Hello!As you see im still experiencing and doing plugins for JQuery

Today I did a pretty funny one based on the explanations of lanrat about how to build a cube using new CSS properties.

Its use is very simple, you only need 3 objects (the visible faces of the cube) inside of a container object. Such objects could be links, images, other divs, etc.

1
2
3
4
5

<div class="cube">
<div><img src="1.jpg" /></div>
<div><img src="2.jpg" /></div>
<div><img src="3.jpg" /></div>
</div>

Once we have our HTML structure we have to apply the plugin like this:

1
2
3
4
5
6
7
8

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jcubeit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						   $('.cube').JcubeiT();
 
						   });
</script>

And voila! We will have a perfect cube to be a little more original in our designs.

The plugin has some defaults values that can be changed via the options var.

• size:’200px’
• background: ‘#666′
• border: true
• borderColor: ‘#000′
• rounded: false

We may change these values from the options as is usually done in JQuery

1
2
3
4
5

var opciones={ size:'100px' , border: false};
$('.cube').JcubeiT(opciones);
 
//or just
$('.cube').JcubeiT({ size:'100px' , border: false});

Playing with the options we can create for example a more original menu bar

You can check the online demo or download the plugin from JQuery

Esquinas redondeadas

Hace un tiempito largo explique como redondear las esquinas de un DIV con el Plugin de JQuery JQuery.corners.
Hoy les explico lo mismo tan solo usando CSS3.

1

<div class="rounded"> Este es un ejemplo para http://masquewordpress.com</div>

Dado un div cualquiera aplicamos la propiedad border-radius

1
2
3
4
5

.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
}

Degradados y sombras con CSS3

Utilizando el ejemplo anterior vamos a aplicarle sombras al DIV y luego un degradado. Aunque en mi ejemplo utilizo DIVS cabe decir que se puede aplicar a otros objetos como botones y crear efectos muy buenos. Pueden ver un ejemplo de botones con degradado y sombras aquí.

Aplicando sombras al DIV y letras

1
2
3
4
5
6
7
8
9
10

.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
 
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
}

Y por último le aplicamos un degradado

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
 
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
 
background: -webkit-gradient(linear, left top, left bottom, from(#D7E9F3), to(#ffffff));
background: -moz-linear-gradient(top,  #D7E9F3,  #ffffff);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
}

Listo !! con estas simples lineas habremos creado unos lindos efectos. Tengan en cuenta que van a necesitar las últimas actualizaciones de sus navegadores para que esto funcione correctamente.

Ver Ejemplo online
Descargar código del ejemplo

Estructura:

La estructua HTML es muy simple.

Tenemos un DIV principal que incluye un elemento <span>( con la clase “count”) que es donde se va a mostrar el número de comentarios, y más abajo un texto con la palabra “comments”. El código HTML seria el siguiente:

1
2
3
4

<div class="bubble">
<span class="count">... contador ...</span>
comments
</div>

Para el globo usamos una imagen que vamos a aplicar como fondo del DIV

El código CSS que aplicamos es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.bubble{
background:url(img/bubble.png) left top no-repeat;
color:#575553;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
height:68px;
margin-right:20px;
padding-top:7px;
text-align:center;
width:70px;
}
.bubble .count{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#CC6600;
}
//Añadimos un poco más de código para el texto
h1, p{margin:0; padding:0; border:0;}
p{
	font-size:16px;
	color:#666666;
	font-family:Georgia, "Times New Roman", Times, serif;
}
h1{
	margin-bottom:8px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
}

Y ya esta! con eso tendriamos todo.
Como siempre acá tienen el EJEMPLO ONLINE

Descargar Ejemplo

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

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

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:

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