Cuatro packs de íconos y herramientas

Nixus
	Contiene 180 íconos de 32x32, 48x48 y 64x64, en formato PNG. descargar

iconSweets

Contiene 1 archivo en formato PSD. descargar

Sanscons

Contiene más de 5000 íconos en formato GIF y PNG. descargar

Iconic

Un sistema completo con íconos en distintos formatos y heramientas varias. descargar

Cuando la w3.org dice que hay etiquetas y atributos que son obsoletos y que no deben usarse, sólo expresa un deseo ya que los navegadores siguen y seguirán soportando TODAS las etiquetas que existen y por lo tanto, este tipo de información que a algunos les parece mandatorio, no pasa de ser una sugerencia porque, como en muchos otros casos, la distancia entre la teoría y la práctica puede ser enorme.

La realidad indica que la w3.org dispone cosas y los navegadores hacen lo que quieren o lo que pueden. Si eso es malo o bueno carece de importancia y es discutible, lo cierto es que las reglas y las leyes sólo tienen sentido cuando existe alguien que pueda obligar a aplicarlas, caso contrario, sólo son palabras.

En la web, eso tiene una variante, las reglas sirven si nos sirven ya que es un tema donde no intervienen ni la moral ni la ética y donde todo lo que funciona bien está bien aunque pueda ser mejorado.

Validar el HTML es la forma de saber si una página cumple con los estándares del W3C pero ¿hay alguna relación entre validar el HTML de un sitio y su posicionamiento en los buscadores?

Algunos afirman que SI pero, Google responde NO:

"Muchos sitios web pueden tener código inválido pero verse correctamente porque muchos navegadores actuales hacen un buen trabajo a la hora de tratar con código deficiente. Así que no es tan importante que el código sea absolutamente perfecto, sino que la página se muestre correctamente a los usuarios en general ... Google puede entender y manejar páginas que son perfectas gramaticalmente hablando y con un código HTML perfectamente correcto, y también puede entender las que son un poco más informales. Porque básicamente entiende sobre qué trata la página."

¿Acaso esto significa que podemos hacer cualquier cosa? Mi respuesta es SI PERO NO.

¿Cuál es el sentido de una página web? Que, tal como dice Google, "se muestre correctamente a los usuarios en general", a la mayor parte de ellos, sea cual sea el navegador que utilicen.

¿Esto es posible? Mi respuesta es la misma: SI PERO NO.

El 100% es un lindo numero pero es un valor excesivo e inalcanzable a menos que se sacrifique tantas cosas que la web se transforme en uniforme y la medida a tener en cuenta sea siempre el navegador menos versátil, la resolución de pantalla más chica, la conexión más lenta, la imaginación más escasa.

Cada uno deberá evaluar qué quiere, a quién se dirige y tomar decisiones. Decisiones que tendrán consecuencias. Tal cosa no se verá tan bien en tal navegador y tal otra tendrá que ser adaptada, retorcida o desestimada. Eso, no es ni un pecado ni un error, es aprender a manejarse dentro de los límites de la realidad, sin falsearla. No hay ningún motivo para tratar de imponer reglas que no son tales sino sólo gustos subjetivos.

Nada es perfecto, nada es universal. Si algo ha enseñado la famosa globalización es justamente lo inverso; que el mundo del futuro (si es que existe) no será único sino una suma de diversidades infinitas.

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 </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.

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.

En dabblet.com hay ejemplos con muchas de las posibles opciones que tiene el efecto hover sobre los enlaces de texto; la mayoría de ellas son comunes

Entre ellas, hay dos que me parecieron interesantes. La primera sólo es apta para espíritus alocados, se trata de agregar un color de fondo multicolor:

<style>
a.colorido:hover { 
  color: #FFF;
  padding=0 5px;
  background-image: -moz-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
  background-image: -webkit-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); 
  background-image: -ms-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); 
  background-image: -o-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
}
</style>

<a class="colorido" href="#">el enlace</a>

este es un un enlace muy colorido

La segunda, utliza los llamados selectores condicionales para mostrar la dirección URL del enlace cuando nos ponemos sobre él:

<style>
a.selector:hover:after {
  content: " [" attr(href) "] ";
  color: LightBlue;
  font-size: 11px;
}
</style>

<a class="selector" href="http://vagabundia.blogspot.com/">el enlace</a>

este otro muestra la URL de referencia

Y sobre esta última, podemos general variaciones; por ejemplo, en lugar de mostrar el contenido del atributo href, podríamos mostrar cualquier otro (title, rel, etc) y con CSS, transformar eso en alguna clase tooltip rápida:

<style>
  a.informacion {position: relative;}
  a.informacion:hover:after {
    background-color: CornflowerBlue;
    border-radius: 5px;
    color: #FFF;
    content: attr(rel);
    font-size: 12px;
    left: 2em;
    padding: 2px 10px;
    position: absolute;
    top: -1.5em;
    white-space: pre;
  }
</style>

<a class="informacion" href="#" rel="información detallada">el enlace</a>

y este enlace muestra cualquier otro texto adicional