Este plugin para jQuery es imposible de explicar detalladamente porque posee tal cantidad de opciones que resulta imposible enumerarlas. Se trata de Slider Kit y lo podemos descargar desde lo descargamos desde Google Codes.

Su característica principal es que el plugin reune en si mismo una serie de características que normalmente requieren el uso de varios scripts; genera slideshows, galerías de distinto tipo, carruseles de imágenes, pestañas, sliders de contenido, etc; y todo eso lo hace de manera modular, con un CSS básico que podemos personalizar a gusto y agregando características avanzadas tales como el control de los elementos con la rueda del ratón y animaciones de diferente tipo.

Aunque no lo he probado en todos los navegadores, dicen que funciona en todos, incluyendo Internet Explorer 8.

Como cualquier otro de estos scripts, debemos agregar los archivos antes de &lt/head> ya sea con archivos externos o copaindo su contenido en la plantilla misma:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript' />
<script type="text/javascript" src="URL_jquery.sliderkit.1.4.min.js />
<script src='URL_jquery.easing.1.3.js' type='text/javascript />
<script type="text/javascript" src="URL_jquery.mousewheel.min.js />

Luego, dependiendo de qué queremos utilizar, llamamos a las funciones; por ejemplo:

<script type="text/javascript">
  jQuery(window).load(function(){
    jQuery(".newslider-vertical").sliderkit({shownavitems:3,verticalnav:true,navitemshover:true});
    jQuery(".tabs-standard").sliderkit({auto:false,tabs:true,mousewheel:true,circular:true,panelfx:"none"});
    // agregamos todas las funciones que vayamos a necesitar
  });
</script>

y por último, el CSS, que, tal como dije antes, podemos personalizar aunque para empezar, conviene que utilicemos las reglas de estilo por defecto y luego, ir probando.

La descarga incluye mucha información detallada y ejemplos así que es una buena opción para simplificar scripts ya que la forma de armar los contenidos es muy similar y cuando se entiende su funcionamiento, termina siendo sencillo generar cosas diferentes, sin restricciones en cuanto a la cantidad que pueden ser agregadas en una misma página.

Estos son algunos de los demos:

• Pestañas
• Sliders de contenido
• Slideshows
• Galerías de imágenes
• Sliders de imágenes
• Carrusel

La llamada Google HTML/CSS Style Guide es eso; un documento de Google que intenta definir algunas reglas a seguir cuando se escriben códigos HTML o CSS cuyo objetivo es ayudar a quienes lo leen o deben interpretarlo.

La guia es una mezcla de sugerencias validas y subjetivas por lo tanto, cada uno debería “filtrarla” y tener en cuenta aquellas cosas que se adapten a su modo de trabajo y descartar las otras. La base de todo esto es la accesibilidad es decir, que nosotros mismos entendamos qué estamos escribiendo y lo hagamos siempre del mismo modo para que resulte sencillo modificarlo en el futuro.

La paradoja del documento de Google es que ellos no aplican lo que predican ya que las páginas que crean los servicios que administran suelen ser engendros irracionales sin pies ni cabeza. Ni hablar de Blogger o de sus plantillas !!!

De todos modos, acá hay algunas sugerencias a tener en cuenta que no son novedad pero tal vez valga la pena repetir.
1 Usar las etiquetas HTML correctas ya que cada una de ellas ha sido creada con un propósito.

A es un enlace por lo tanto; es mejor poner:

<a href="UNA_URL">un enlace</a>

que:

<div onclick="abrir('UNA_URL');">un enlace</a>

H1 H2 H3 etc son encabezados; el número (1 a 6) no existe para indicar su tamaño sino para indicar su importancia. Una página web sólo debería tener una etiqueta H1 y esa etiqueta debería ser el título. Si hay subtítulos se usa H2 y no hay que abusar de ellos; si los títulos son elementos intrascendentes (por ejemplo los títulos de la sidebar de Blogger) estos no deberían tener una etiqueta de encabezado y si la tienen, jamás deberían ser encabezados “superiores” al título del blog o al título de la entrada.

P es un párrafo (un texto) así que escribir:

<p><img src="UNA_IMAGEN" /></p>

no tiene mucho sentido.

2 Toda etiqueta IMG debería tener un atributo alt que indique el contenido alternativo pero, lo mismo debería hacerse con videos o cualquier otro tipo de contenido multimedia.

3 Las reglas del HTML5 dicen que ya no es necesario agregar el atributo type en hojas de estilo y scripts a menos que el tipo no sea el usual (CSS y JavaScript) por lo tanto, se sugiere que en lugar de esto:

<link rel="stylesheet" href="archivo.css" type="text/css" />
<script src="archivo.js" type="text/javascript"></script>

se use:

<link rel="stylesheet" href="archivo.css" />
<script src="archivo.js"></script>

ya que es algo que funcionará en cualquier navegador y en cualquier página, aún cuando no sea HTML5.

4 Agregar siempre un punto y coma final a cualquier propiedad de CSS aún cuando no sea “obligatoria” es algo que evitará errores futuros.

Suele verse esto:

.ejemplo {
  text-align: center
}

que funciona perfectamente pero, en algún momento le agregamos alguna otra propiedad:

.ejemplo {
  text-align: center
  color: red;
}

y ya no funcionará porque nos hemos olvidado de agregarle el punto y coma final.

5 Indentar el código siempre es buena idea porque permite visualizar qué cosa esta dentro de que otra y de ese modo comprender cómo se verán afectados los contenidos. Ellos recomiendan usar dos espacios y evitar el uso de la tecla TAB (cosa con la que yo estoy de acuerdo) pero, es algo que queda criterio de cada uno:

<div>
  <p> algo </p>
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
  <div>
    <!-- OTRA COSA -->
  </div>
</div>

Minimizar quitando espacios o indentaciones debería estar reservado sólo a aquellos códigos que estemos completamente seguros que no vamos a editar jamás.

Por el contrario, se recomienda minimizar ciertas cosas, por ejemplo, eliminar las comillas innecesarias en las direcciones URL:

background: url("UNA_IMAGEN") no-repeat 0 0 transparent;

se puede escribir:

background: url(UNA_IMAGEN) no-repeat 0 0 transparent;

usar tres caracteres de color cuando es posible:

color: #FFF;

en lugar de:

color: #FFFFFF;

eliminar la unidad cuando el valor es cero:

margin: 0;

en lugar de:

margin: 0px;

eliminar el cero cuando se usan valores decimales:

font-size: .8em;

en lugar de:

font-size: 0.8em;

6 Una última recomendación que desconocía y habría que verificar y evaluar: omitir el protocolo (http:, https:) en las direcciones URL de los archivos externos a menos que ese protocolo sea absolutamente necesario; en lugar de:

background: url(https://lh5.googleusercontent.com/xxxxxxx/imagen.jpg);

usar:

background: url(//lh5.googleusercontent.com/xxxxxxx/imagen.jpg);

Si optamos por esto, hay que tener en cuenta que la URL debe comenzar con //

En resumen: conviene leerlo, “masticarlo”, aplicar aquello que nos parezca razonable y descartar el resto. Como siempre, sólo debe primar el sentido común y no aceptar todo lo que se diga como si fuera una verdad revelada e incontrovertible, lo diga quien lo diga.

Tanto en el escritorio normal como en el nuevo, los comentarios se encuentran divididos en tres secciones: Publicados, Esperando moderación y Spam. Las dos primeras nos dan tres opciones:

• Suprimir el contenido borra el texto pero lo deja publicado, informando que “Un administrador del blog ha eliminado esta entrada.”
• Suprimir lo borra por completo
• Span lo envia a la pestaña correspondiente

Lo que comentan en The Real Blogger Status es, justamente, cuál debería ser el proceso lógico para que este filtro de spam funcione de manera razonable y, de esa manera, beneficiarnos todos.

Como todo sistema que intenta controlar el spam, debe ser “entrenado” y somos nosotros quienes debemos hacer eso. Para eso, lo recomendable no es borrar el spam sino, marcarlo primero; de esta manera, Blogger va acumulando información y el sistema tiende a mejorar con el tiempo.

Esto es importante hacerlo tanto con los comentarios publicados como con aquellos que están en moderación. Por el contrario, todos aquellos que aparecen por error en la pestaña Spam deben ser desmarcados con el botón correspondiente e inmediatamente serán publicados. Esto, es algo habitual ya que, si el comentario posee varios enlaces o enlaces a algún sitio considerado “peligroso”, puede ser malinterpretado.

Todos sabemos que los caracteres espacio son importantes; separan las palabras y evitar que eso que escribimosseaungalimatíasilegible.

En CSS pasa lo mismo, no tanto porque no pueda leerse eso que escribimos sino porque al no estar donde deben estar, el resultado es un error. El caso típico es el de la propiedad background; si escribimos esto:

background:#FFF url(una_imagen)no-repeat left top;

en Intenet Explorer no se verá la imagen y no es un error del navegador, es que lo hemos escrito mal, sin dejar el espacio entre el cierre del paréntesis y la palabra no-repeat

Pero no sólo se producen errores en tal o cual navegador, es algo que podría ocurrir en todos si, por ejemplo, queremos poner una regla de estilo para que una etiqueta span tenga un determinado formato (color rojo en este caso):

<div id="demo" class="ejemplo">
  .......
  un texto cualquiera <span>esto en rojo</span> un texto cualquiera.
  .......
</div>

¿Cuál sería la regla de estilo?

#demo.ejemplo span { color:#F00; }

o

#demo .ejemplo span { color:#F00; }

Si usamos la primera, todo estará bien; si usamos la segunda, no pasará nada. Esto, se debe a que el espacio indica “algo”.
Maecenas porta felis pharetra diam suscipit id vehicula urna ullamcorper. Aenean a interdum nibh. Nam enim nunc, aliquet et egestas vitae cras amet.
En la primer, traducida al español, se indica que en el elemento cuyo ID es demo y cuya clase es ejemplo, las etiquetas SPAN interiores son de color rojo. Por eso, no hay un espacio intermedio.

En la segunda decimos que en el elemento cuyo ID es demo, en toda etiqueta interna que sea de la clase ejemplo, las etiquetas SPAN internas serán de color rojo; el HTML debería tener esta estructura:

<div id="demo">
  .......
  <div class="ejemplo">
    un texto cualquiera <span>esto en rojo</span> un texto cualquiera.
  </div>
  .......
  <div class="otra">
    un texto cualquiera <span>esto no será de color rojo</span> un texto cualquiera.
  </div>
  .......
</div>

Maecenas porta felis pharetra diam suscipit id vehicula urna ullamcorper. Aenean a interdum nibh. Nam enim nunc, aliquet et egestas vitae cras amet.
Maecenas porta felis pharetra diam suscipit id vehicula urna ullamcorper. Aenean a interdum nibh. Nam enim nunc, aliquet et egestas vitae cras amet.
Por supuesto, la primera parece redundante y no siempre es necesario escribirlas de ese modo indicando el ID y la clase; estas dos reglas también harían lo mismo en el primer ejemplo:

#demo span { color:#F00; }
.ejemplo span { color:#F00; }

y esta haría lo mismo en el segundo ejemplo:

.ejemplo span { color:#F00; }

No todo funcionará igual, las reglas también dependen de lo que se llama prioridad por lo que ciertas definiciones no son tenidas en cuenta ya que hay otras que indican lo contrario y para el navegador, son más “importantes”. Un ejemplo, si tuviera estas tres:

#demo.ejemplo span { color:#F00; } /* color rojo */
#demo span { color:#FF0; } /* color amarillo */
.ejemplo span { color:#0F0; } /* color verde */

el SPAN se vería de color rojo pese a que las otras dos reglas dicen lo contrario; si elimino la primera ser vería amarillo así que si quisiera que se viera verde, sólo debería incluir la última o agregar la palabra !important a alguna de ellas para forzar al navegador a prestar atención.
Maecenas porta felis pharetra diam suscipit id vehicula urna ullamcorper. Aenean a interdum nibh. Nam enim nunc, aliquet et egestas vitae cras amet.