Blog and Web

Tremendo material el que ha realizado Recognized Expert, más de 100 videotutoriales que te enseñaran a usar Blogger desde cero hasta el uso de todas las opciones del panel y de varios widgets. En total son más de 7 horas de entrenamiento que te permitirá conocer todo el funcionamiento de Blogger.

Los videotutoriales están todos en ingles, pero con lo básico para interpretar los títulos y las imágenes es más que suficiente para sacarle todo el provecho a este recurso.

Sitio: recognizedexpert.com

BizFresh es un funcional y hermoso tema para Wordpress que podemos usar en proyectos tanto personales como comerciales. Con una bonita combinación de colores, una apariencia limpia y un acomodo de elementos que aprovechan bien el espacio, es una muy buena opción para usar en un blog. Las características principales del tema son:

• 3 Columnas en la cabecera. Con una adaptación puede ser un buen lugar para publicidad Adsense.
• 3 Columnas principales.
• Listo para integrarse con los plugins: Gravatar, PageNavi, ShareThis y PostRatings.
• Comentarios y trackbacks separados.
• Comentarios del autor resaltados.
• Buena visualización en Firefox, IE7, IE6, Opera y Safari.
• Preparado para Widgets.
• Código optimizado y validado.
• En la versión de paga se agregan varios opciones de administración, el logo en psd y una guía de uso.

El diseño es de Premium Themes, un sitio que como su nombre indica, se dedica a diseñar y vender temas premium para Wordpress, este es su único theme gratuito y no hay que desaprovecharlo.

Demo | Descarga
vía: digizen

El popular ranking de blogs hispanos hecho por Bitacoras.com vuelve y con más vida e imagen 2.0. Trae con principal característica el ser independiente y no usar datos de terceros (technorati, alexa u otro) para hacer la jerarquización.

Entre los criterios que usa el algoritmo de clasificación están:

• Número de enlaces entrantes hacia un blog.
• Número de entradas publicadas en el blog.
• Popularidad del autor del blog en Bitacoras.com.

Otra característica importante es el ranking por países, que se consigue filtrando los resultados con la cortina de opciones. Y si quieres mostrar tu posición en el top general o de tu país, cuenta con unos bonitos botones que irán cambiando automáticamente y que puedes incrustar en tu blog.

Mención especial a Blog en Serio que ha logrado posicionarse muy bien y muy rápidamente, pero que sin duda se ha ganado. Siempre un ranking dejara a unos contentos y a otros no tanto, pero finalmente solo es una pequeña referencia y hay que tomarla como tal, el valor a cada blog se lo damos cada uno visitándolo.

Sitio: bitacoras.com/top

Desde el blog oficial de Google México se abre la convocatoria para participar en el primer Google Developer Day en México. En el evento abra sesiones sobre el uso de las herramientas de google para crear aplicaciones sociales, móviles, geográficas y basadas en AJAX/JavaScript.

El Developer Day se llevará a cabo el 23 de Junio 2008 en el Centro Banamex en la Ciudad de México y será gratuito para los participantes. Los ingenieros de Google y otros desarrolladores serán los ponentes durante todo el día sobre las herramientas que Google facilita para crear nuevas aplicaciones.

El formulario de registro, la lista de sesiones y la de conferencistas puedes verlas desde la página principal del evento. Por lo pronto ya me registre y espero recibir mi pase pronto. Además de lo útiles que pueden ser las conferencias, es una buena oportunidad para conocer gente metida en este ámbito, así que si se animan, por allá nos vemos.

Dar estilo a los links de diferentes tipos es muy sencillo con CSS3, pues permite recoger la extensión de cualquier archivo con una instrucción y darle estilos directamente. Por ejemplo:

a[href $='.pdf'] {
padding-right: 20px;
background: url(icono-pdf.gif) no-repeat right;
}

Desafortunadamente estos selectores no son soportados por IE6 (raro ¿verdad?) pero en Web Designer Wall nos dan una solución para hacerlo por medio de la librería jQuery.

1. Descargamos la librería y hacemos el llamado entre las etiquetas <head> y </head>.

   <script type="text/javascript" src="jquery.js"></script>

2. Enseguida después del llamado, agregamos la función que hará que se le otorgue una clase a cada tipo de link y otro que abrirá los enlaces externos en una nueva ventana.

   <script type="text/javascript">
   $(document).ready(function(){
   
   //Definición de clases para cada tipo de archivo.
       $("a[@href$=pdf]").addClass("pdf");
   
       $("a[@href$=zip]").addClass("zip");
   
       $("a[@href$=doc]").addClass("doc");
   
   //Estilos y atributos a los enlaces externos.
       $("a:not([@href*=http://blogandweb.com])").not("[href^=#]")
         .addClass("externo")
         .attr({ target: "_blank" });
   
   });
   </script>

3. Ahora solo falta definir los estilo para cada tipo de archivo. Por ejemplo, agregándole un icono al inicio que lo identifique:

   .pdf {
   padding-left: 20px;
   background: transparent url(icono-pdf.png) left top no-repeat;
   }
   
   .zip {
   padding-left: 20px;
   background: transparent url(icono-zip.png) left top no-repeat;
   }
   
   .doc {
   padding-left: 20px;
   background: transparent url(icono-doc.png) left top no-repeat;
   }
   
   .externo {
   padding-left: 20px;
   background: transparent url(icono-ext.png) left top no-repeat;
   }

   Estos estilos los definimos dentro de la hoja de estilos (style.css) o dentro de la sección css.

4. Ahora cada vez que usemos un enlace con alguna de las extensiones definidas tendrán los atributos de la clase que le corresponde. Por ejemplo:

   <div id="enlaces">
   	<p><a href="documento.pdf">Archivo PDF</a></p>
   	<p><a href="documento.zip">Archivo ZIP</a></p>
   	<p><a href="documento.doc">Archivo DOC</a></p>
   	<p><a href="http://btemplates.com">BTemplates - enlace externo</a></p>
   	<p><a href="http://serturista.com">Ser Turista - enlace externo</a></p>
   	<p><a href="http://blogandweb.com/2008/05/06/dar-estilo-a-los-links-de-diferentes-tipos-con-jquery/">Regrasar al tutorial - enlace local</a></p>
   	<p><a href="#enlaces">Enlace local #</a></p>
   </div>

Demo | Descargar ejemplo