Empieza explicando diferentes usos de las etiquetas condicionales, las cuales nos indican si estamos en el home, visualizando una entrada... Con estas condiciones podemos resaltar dinámicamente los menús según en la opción que estemos, cambiar el título de la página según en la que nos encontremos, añadir contenido y muchas opciones más.

También nos explica cómo crear plantillas para categorías específicas, para lo cual solo deberemos añadir -n a category.php, pudiendo personalizar nuestro diseño dependiendo de la categoría a la que accedamos.

Otro ejemplo que nos cuenta es el modo de añadir la publicidad después del primer post, que quien dice después del primer post dice cada cierto número de posts, si se sigue el mismo método.

Una parte importante del post trata sobre las query posts, las cuales nos permiten controlar los posts que aparecen. Pudiendo así mostrar los últimos posts, posts específicos o excluir algunos.

Para finalizar también destacar los consejos sobre wp_list_pages, la plantilla Page o los consejos de configuración de WP.

WordPress Theme Hacks

Si te encuentras con esta cuestión, hay un truco para poder leer los correos de Hotmail en Gmail. Para ello es necesaria la opción de GMail de leer otras cuentas POP3, porque aunque Hotmail no ofrece el servicio POP3, podemos usar el servicio IzyMail para tener nuestros correos de Hotmail en POP3 y así poder leerlos mediante GMail.

Reading your Hotmail email directly from Gmail

Vía / Lifehacker

• Planificación: aunque parece algo obvio, suele ser algo que no se lleva a cabo.
• Hazlo a mano: yo no podría estar más de acuerdo con este consejo. Existen aplicaciones muy buenas que te crean el código HTML sin tener que escribirlo uno, pero hacerlo tú mismo es algo que te va a dar mayor control sobre el diseño. Con un editor normal que te coloree el código debe ser más que suficiente.
• Hojas de estilo, enlazar o importar: hay dos formas de importar un CSS y no todos los navegadores reconocen las dos formas, por ello se puede usar ambas para que navegadores modernos y antiguos carguen el CSS.

<link rel="stylesheet" href="simple. css" type="text/css" media="screen">
<style type="text/css" media="screen">
@import url(simple.css);
</style>

• Usar gradientes como fondo con cuidado: el uso de imágenes como fondo de pantalla es algo sobre lo que se puede y debe tener mucho control, se puede hacer un degradado vertical de ancho 1px y luego repetirlo solo en el eje x, y que el color de fondo sea el color en que finaliza el gradiente. Yo añadiría que cuidado con los gradientes, ahora están muy de moda, pero tampoco se debe abusar de ellos.
• Comentarios: imprescindibles para cualquier tipo de desarrollo, ya sea para una aplicación en .NET o para una página web. Otra cosa es que lo hagamos siempre.
• Usa simples scripts PHP: no es necesario ser un experto en PHP, pero si tu servidor lo admite, úsalo, sobre todo para incluir trozos de HTML que sean muy utilizados, como por ejemplo el código que crea el menú.
• Dimensiona las fuentes con em: a los diseñadores les suele gustar usar px porque se ajusta exactamente al tamaño que quieren, pero el problema es que, por ejemplo, IE no redimensiona las fuentes definidas con px con el consiguiente problema de accesibilidad para los lectores con discapacidad.
• Hack en IE del modelo de caja: quizás no os haya pasado, pero IE tiene un bug con el tamaño de una capa cuando se usa width y margin, padding o border. Esto se soluciona usando el guión bajo delante del estilo (_margin), que IE reconocerá como el propio estilo, mientras que los otros navegadores lo ignorarán. No recomiendo seguir haciendo esto, porque con la nueva versión de IE podríais tener problemas ya que se ajusta más a los estándares.
• Espacio en los formularios: los form aunque no se vean tienen márgenes, cuando crees uno, no olvides quitarles el margen superior e inferior.
• Testea: imprescindible, sobre todo para intentar conseguir que funcione en casi todos los navegadores.
• Formato de imágenes: usa GIF para imágenes con colores planos y JPEG para imagenes tipo fotografía, aunque deberías usar PNG en ambos casos, ya que funciona tanto para colores planos como para tipo fotografia, el problema es que IE no admite el canal alpha, hay que esperar a IE7 para que lo podamos usar.
• Atributos alt y title: para que la descripción de las imágenes o enlaces aparezcan correctamente en los dispositivos móviles.
• Orden de las pseudoclases: como ya explicamos en esta entrada.
• Lenguaje semántico: separa el contenido de la apariencia, si eliminamos la css de una página se debería ver correctamente.
• Favicons: los iconos que aparecen en los favoritos o en las pestañas, algo sencillo que representa a nuestra web.
• Usa máyusculas mediante CSS: cuando quieras escribir un texto completamente en mayúsculas usa text-transform en vez de escribirlo tú directamente en mayúsculas.
• Escribe el texto alrededor de las imagenes: algo ya comentado en esta entrada.
• Usa UTF-8: no todo el mundo tiene tu idioma o tu juego de caracteres, vuelve a leer esta entrada para obtener más información.
• Estilos para impresora: crea estilos específicos para impresoras (media="print")
• Aprende de otros: para eso nada mejore que CSSMania.

20 pro tips

Vía / Digg

Entre los distintos tipos de vídeos que incluye están los que usa el Flash Player, como YouTube o Google Video, películas en formato Windows Media y QuickTime.

Ya no tienes excusa para seguir los estándares.

Bye, Bye <embed>

• Cuidado con las comunicaciones: el que AJAX se conecte al servidor para refrescar la página y no nos demos cuenta, tampoco quita que tengamos que estar conectando todo el tiempo. El número de conexiones repercute en el ancho de banda, lo cual puede ser negativo para el cliente y para el servidor.
• Tratar con XML es lento: cierto que el XML es muy bueno para transmitir datos, es legible para el programador y para el servidor, pero pasearlo nos puede llevar demasiado tiempo. Posible recomendación: JSON.
• Ir cargando la página poco a poco: las nuevas aplicaciones web suelen requerir de mucha programación, lo cual puede tardar en cargarse, y cuando si no se va mostrando algo, el usuario pensará que la página es lenta, por eso es preferible ir cargando lo necesario y luego ir cargando el resto, así el usuario no se desesperará.

Vía / ZDNet.com

Bookmarklets

Vía / aNieto2K

• Organiza tus estilos según el siguiente formato: primero reune las que correspondan a los contenedores y layouts, después las cabeceras (<h1>..<h6>), seguido iría los párrafos y los enlaces, y por último todas las listas (navegación, ...).
• No uses estilos por defecto, en vez de crear un estilo para todos los enlaces (<a>), defínelo contenido por bloques (por ejemplo: #contenido a {..}).
• Utiliza etiquetas HTML para incluir estilos dentro de otros estilos, por ejemplo, si queremos que una línea tenga distintos colores, en vez de usar capas y clases, define estilos para etiquetas tipo <em> para que quede un código más limpio.
• En vez de usar capas con un estilo definido, usa etiquetas HTML que representen la misma función que quieres mostrar, por ejemplo, en vez de usar una capa para el título, usa una etiqueta de cabeceras (<h1>..<h6>). No reinventes la rueda.
• Nombra los estilos según su funcionalidad, no como aparecen, en vez de crearte un estilo llamado rojo, create uno que se llame error, cuando es precisamente un error lo que quieres mostrar.

My 5 CSS Tips

Vía / SkimCSS

MySQL

• MySQL interpreta de derecha a izquierda, por lo que los limitadores más significativos los debes poner lo más a la derecha posible.
• Selecciona los campos que vayas a necesitar, no todos (*).
• No pongas en datos que se vayan a modificar rara vez, utiliza ficheros de propiedades.
• Usa índices para las columnas que aparezcan en el WHERE y en el ORDER BY.
• Los índices son buenos cuando la tabla se modifica con frecuencia, pero hace lentas las inserciones.
• Usa el comando EXPLAIN para analizar tus índices.
• Si solo quieres obtener una fila, usa LIMIT 1 así parará de buscar datos.
• Si usas $linea = mysql_fetch_array($resultado), hay dos modos de obtener los datos: $linea[n] y $linea['columna']. Si vas a acceder solo por el nombre de la columna, usa $linea = mysql_fetch_assoc($resultado), así no se creará el índice numérico.
• Algunas veces mysql_free_result() gasta mas memoria que la que salva, comprueba la diferencia con memory_get_usage().
• No hagas siempre la misma consulta en la BD, guarda los resultados.
• Usa NOT NULL siempre que puedas, agiliza la ejecución y ahorra un bit.
• Usa tipos de datos que se ajusten a las necesidades, por ejemplo, en vez de usar INT, que puede ser muy grande, usa MEDIUMINT o SMALLINT cuando sea posible.
• Usa valores por defecto, inserta solo cuando sean diferentes a estos, agilizarás las inserciones.

PHP

• Intenta agrupar bloques de código

  <?php
  ...
  ...
  ...
  ?>

  es mas efectivo que

  <?php
  ...
  ?>
  <?php
  ...
  ?>
  <?php
  ...
  ?>

• No concatenes texto cuando no sea necesario

  "SELECT * FROM $tabla ORDER BY campo"

  es más efectivo que

  "SELECT * FROM ".$tabla." ORDER BY campo"

• Utiliza la comilla simple (') en vez de la comilla doble (") siempre que no vayas a usar variables dentro, la comilla doble hace que el intérprete analice lo que hay dentro de las comillas.
• La forma más rápida de concatenar texto es usando comillas simples.
• Cuando uses echo, separa los strings por comas mejor que con puntos, es más rápido. Esto solo funciona con echo.
• echo es más rápido que print.
• Indica el valor máximo para tus bucles for fuera del bucle en vez de dentro del bucle, porque si no, se evaluará la expresión en cada pasada del bucle

  $max = 100/10;
  for($i=0; $i<$max; $i++){
  ...
  }

  es más rápido que

  for($i=0; $i<100/10; $i++){
  ...
  }

• Libera variables siempre que puedas, sobre todo arrays pesados.

Simple Optimization for PHP and MySQL

Vía / Digg

• Desarrollo web (JavaScript, CSS, códigos hexadecimales, HTML, XHTML, entidades HTML)
• Bases de datos (MySQL, Oracle, SQL)
• Lenguajes (PHP, Ruby, expresiones regulares, JSP, Java)
• Control de versiones (CVS)
• Otras (Google, Windows, Unix, Vi, mod_rewrite, códigos de caracteres ASCII, htaccess)

Cheat Sheet Roundup - Over 30 Cheatsheets for developers

Vía / Menéame

El método es sencillo:

• Cierra Firefox
• Copia o mueve el archivo bookmarks.html y el bookmarks.bak que se hayan en el profile en el directorio nuevo
• Escribe about:config en la barra de dirección de Firefox
• Haz click con el botón derecho del ratón, pulsa en Nuevo->Cadena
• Escribe como nombre de la preferencia: browser.bookmarks.file
• Escribe el path completo del archivo bookmarks.html (incluido el nombre del archivo)

Listo, ya tenemos cambiada la localización de los marcadores.

Customize the Firefox Bookmarks location

function barrioSesamo() {
    function epi() {
        alert('hola Blas');
    }

    function blas() {
        alert('hola Epi');
    }

    epi();
    blas();
}

barrioSesamo();
// el navegador nos presentará un par
// de alertas, a saber, "hola Blas" y
// "hola Epi"

Nada impresionante, por el momento. Lo interesante del asunto es que, al definir la función epi dentro de la función barrioSesamo, el ámbito de la misma (scope) queda limitado, de manera que solo podemos llamar a epi desde su propio barrio.

Vale, sigo sin impresionarte.

Claro, que si eres de los que usas varios scripts en Greasemonkey, no creo que este script sea para ti, porque no es plan de tener muchas extensiones, una para cada script, cuando las puedes gestionar con una sola extensión, supongo que sería más eficiente.

Vía / Lifehacker

Como no hay ninguna referencia "oficial" (aviso de Jordi), y previa consulta a Juan Luis (representante de FeedBurner en España), ahí va el truco que varios sitios ya aplican...

Solo tienes que añadir en el código del botón justo después de animo=0" si tú botón es el estático o anim=1" si tienes el animado y asegurándote de borrar la comilla al lado del 0 o del 1 ya que la pondremos luego: &label=lectores". El lectores lo puedes sustituir por un texto de 8 caracteres para respetar el tamaño del botón. Para nosotros, el ideal sería suscriptores pero sale cortado.

El código de nuestro botón:

<a href="http://feeds.feedburner.com/sentidoweb"><img src="http://feeds.feedburner.com/~fc/sentidoweb?bg=008585&fg=ffffff&anim=0&label=lectores" height="26" width="88" border="0" alt="Feed de Sentido Web" /></a>

La mnemotecnia (o nemotecnia) es un proceso de asociación mental destinado a facilitar el recuerdo de algo. Ese algo puede ser, por ejemplo, el orden de declaración de las reglas de presentación para los enlaces (link no visitado, visitado, etc.). Para recodar el orden nos servirán los términos en inglés (mayúsculas especialmente) LoVe HAte.

LoVe HAte

Es conveniente recordar que el orden correcto de las declaraciones es este y no otro:

a:link { /* Love hate */
}

a:visited { /* loVe hate */
}

a:hover { /* love Hate */
}

a:active { /* love hAte */
}

TRouBLe

Algunas propiedades CSS se pueden definir en forma taquigráfica (shorthand).

Por ejemplo, para definir los márgenes de un elemento podemos usar margin-top: 0; margin-right: 1em; margin-bottom: 1em; margin-left: 1em o, para ahorrar teclas y bytes, usar la versión corta:

#unSelector {
    margin: 0 1em 1em 1em;
}

El orden de los valores es el siguiente: arriba, derecha, abajo, izquierda. Esto es, empezamos a asignar valores en sentido de las agujas del reloj (de las doce de la mañana y acabamos a las nueve de la noche). Mnemotécnicamente sería, TRouBLe (top, right, bottom, left).

Estas versiones abreviadas pueden llevar, atención, uno, dos, tres o cuatro valores, ahí es ná. Veamos:

#unSelector {
    margin: 0;
    /* margen 0 por los cuatro costados */
}

#unSelector {
    margin: 0 1em;
    /* márgenes superior e inferior a cero,
       márgenes izquierdo y derecho de 1em */
}

#unSelector {
    margin: 0 1em 2em;
    /* huy, este tiene truco: margen superior, cero;
       margen derecho, 1em; margen inferior, 2em. 
       ¿Y el izquierdo? en caso de tener 
       tres valores, se toma el segundo, esto es el 
       valor es el mismo para los dos laterales */
}

#unSelector {
    margin: 0 1em 2em 1em;
    /* TRouBLe, como ya hemos comentado */
}

Claro está que lo dicho para los márgenes también es aplicable a padding, border-width, border-style, border-color y seguramente a alguna propiedad más que ahora mismo (¡café!) no está en mi cabeza.

Más sobre Memoria y reglas nemotécnicas.