Como en Pingdom se guardan los registros de las consultas, podéis comprobar que hace un mes cuando comprobe la carga de mi blog, estaba en 8,7 segundos xD

Los principales pasos que he seguido para optimizar mi blog, són los siguientes, primero tenemos que comprobar lo que tarda en cagar nuestro blog en Pingdom, nos fijaremos en las dos ventanas de resultados que nos muestra.

Si prestamos atención a la primera ventana, descubriremos que tenemos que:

1. Buscar las lineas en rojo. Esas lineas son llamadas a archivos o normalmente imágenes que no se encuentran, bien porque las hemos cambiado de sitio o las hemos borrado, por lo que tendremos que buscar esa línea en nuestro código y borrarla.
2. Fijarnos en los archivos con el final de la barra azul. Suelen ser archivos muy grandes y tenemos que intentar reducir su peso, como normalmente son imágenes es muy fácil, hay muchos optimizadores de imágenes online, aunque si no nos gusta ninguno siempre podemos hacerlo nosotros con algún editor, o directamente usar este.

Ahora nos vamos a centrar en la segunda ventana, en la que nos dice el tiempo total de carga y la cantidad de llamadas a archivos de cada tipo que ha encontrado. Y mirando estos datos tendremos que:

1. Juntar todos los archivos CSS que tengamos por ahí sueltos en uno solo, el style.css de nuestro theme de WordPress (esto es muy fácil, sólo hay que copiar y pegar).
2. Juntar todos los scripts (archivos JS) en uno sólo. Para eso seguí uno de los magníficos post que tiene Andrés sobre el tema.
3. Usar CSS-Sprites. Podéis usar alguno de los que existen on-line, van bastante bien, y os cargará todas las imágenes de fondo de una sola vez, con lo que el número total de objetos lo reduciremos muchísimo.

Con todo esto ya reduciremos bastante la velocidad de carga de nuestro blog, pero todavía quedan muchas otras cosas que nos ayudarán a que nuestro blog sea el más rápido.

• Optimizar nuestro theme de WordPress. Todas las consultas que tengamos dinámicas hay que ponerlas estáticas.Tendremos que reemplazar todas las lineas dinámicas del header.php y el footer.php principalmente, para hacer eso, nos dirigiremos a Ver código fuente en el navegador, y sólo tendremos que copiar las rutas estáticas de ahí.

Ejemplo, donde ponga:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?;> charset=<?php bloginfo('charset'); ?>" />

pondremos:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

• También podemos comprimir el CSS, hay muchas y diferentes formas para realizar esta compresión, eso ya es decisión vuestra optar por una u otra.
• Instalarnos el plugin de WordPress, WP-super cache si no lo tienes, que he podido comprobar que va el doble de rápido que el WP-Cache.
• Y por supuesto tener un buen Hosting, que nos proporcione la velocidad de carga necesaria para nuestro blog.

Aparte de todo esto, supongo que ha estas alturas ya sabéis todos que Google se esta tomando cada vez la velocidad de carga más en serio y dentro de poco esta velocidad influirá en los resultados de búsqueda, por lo que este pequeño manual os va a ir muy bien para mejorar vuestro posicionamiento.

Y por último, podemos seguir optimizando nuestro blog para que cargue más rápido instalando 2 extensiones de Firefox que van de lujo para esto, Firebug y YSlow. Yo ahora mismo estoy trabajando con ellos y haciendo pruebas de como puedo reducir más el tiempo de carga, si descubro algo nuevo, ya os lo contaré en el próximo post, así que sindicaros a mi blog para no perder detalle

Ahora con CSS3, y la propiedad border-radius lo podemos hacer de manera muy fácil. Fijaos en el siguiente ejemplo:

Para conseguir este efecto he usado el código XHTML y CSS que os muestro a continuación.

Código XHTML

<div class="bordes-redondeados">

    <h2>Bordes redondeados con CSS3</h2>

    <p>Así de fácil y rápido se hace un caja con los bordes redondeados en CSS3.</p>

</div> 

Código CSS

 .bordes-redondeados {
    width: 400px;
    margin: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #069;
}

.bordes-redondeados h2 {
    padding: 10px 15px 5px 15px;
    text-align: center
    color: #fff;
}

.bordes-redondeados p {
    margin: 0;
    padding: 5px 15px 10px 15px;
} 

Os he enseñado la forma más sencilla de redondear las esquinas de un contenedor div, pero hay un montón de formas de combinar y aplicar esta técnica. Otros ejemplos podrían ser estos:

Para conseguir recuadros con diferentes radios en cada esquina, sólo tenemos que darle 4 valores diferentes a la propiedad border-radius.

 .bordes-redondeados {
    width: 400px;
    margin: 10px;
    -webkit-border-radius: 2em 1em 4em 3em;
    -moz-border-radius: 2em 1em 4em 3em;
    border-radius: 2em 1em 4em 3em;
    background-color: #069;
} 

Si tenéis cualquier pregunta o consulta, no dudéis en hacerlo en los comentarios, que son gratis

• Web 2.0 NO es AJAX, jQuery, Mootools, script.aculo.us ó Dojo; estos elementos soportan una nueva manera de mostrar el contenido de la Web, no la hacen
• Web 2.0 NO es RSS, pero sí cómo ésta ayuda a la llegada de la información más rápida y limpia al usuario que la pide
• Web 2.0 NO se trata de tecnología
• Web 2.0 NO se trata de programación
• Web 2.0 NO son elementos gradientes, que parezcan plástico o con reflejos; por lo tanto NO se trata de diseño
• Web 2.0 NO es Orkut, Facebook, MySpace, MSN y demases. Medios sociales han existido desde las BBS donde se compartían archivos; ICQ, IRC…

Vía | CSSLab

Lo primero es declarar la variable contador(podéis llamarla como queráis) con valor 1, en la pate del código donde empiezan los comentarios, que es donde pone algo como esto:

<?php foreach ($comments as $comment) { ?>

y cambiarlo por esto otro:

<?php $contador = 1; foreach ($comments as $comment) { ?>

Lo siguiente es decirle donde queremos que nos muestre el número y sumarle 1 al siguiente comentario aprovado, esto lo conseguimos introduciendo las siguientes lineas de código justo antes de hacer la llamada al comentario.

<? php if ($comment->comment_approved == ‘1′): ?>

<div class=”contador”>

# <? php echo $contador++; ?>

</div>

<? php endif; >

Para no liarme, he creado una clase con el mismo nombre que la variable, en mi caso contador, que tendremos que definir dentro del style.css y darle el estilo que más nos guste, ejemplo:

.contador {
  float: right;
  color: #ccc;
  margin: 0 10px 0 0;
  padding: 0;
  text-decoration: none;
}

Si os fijáis en mis comentarios yo tengo puesta la almohadilla(#) delante del número, pero es completamente opcional.

Si tenéis cualquier duda, ya sabéis que en los comentarios os las resuelvo

Este post quedará enlazado en mi sección de WordPress para futuras consultas de los lectores.

Muchas veces nos encontramos la etiqueta borde de nuestro CSS de la siguiente forma:

#div {
     border-width: 1px;
     border-style: solid;
     border-color: #666666;
}

o así:

#div {
     border-right-width: 2px;
     border-right-style: solid;
     border-right-color: #666666;
}

Cuando la forma simplificada y también correcta, sería así,

#div {
     border:1px solid #666;
}

y así, respectivamente.

#div {
     border-right:2px solid #666;
}

Veis que fácil ha sido reducir tres lineas en una, pues imaginaos esto a lo largo de todo nuestro “style.css”, las lineas que ahorraremos, y lo limpio que veremos el código cuando tengamos que buscar algo.

La etiqueta “border” consta de tres parámetros:

• width(anchura): thin, thick, medium o un valor en px.
• style(estilo): solid, dashed, dotted, double.
• color: nombre, hex, rgb o 0-255.

#div {
    border-width: 5px;
    border-style: dotted;
    border-color: blue;
}

#div {
    border:5px dotted blue;
}

Con estas reglas aplicamos el diseño a los 4 bordes, pero también podemos aplicarlo uno a uno definiendo el borde que queremos.

#div {
    border-top: 2px dotted blue;
    border-right: 1px solid red;
    border-bottom: 3px double yellow;
    border-left: 2px dashed black;
}

Al igual que con el margin y el padding los valores del border también se pueden agrupar en arriba/abajo y derecha/izquierda si estos valores son iguales:

#div {
    border-top-width: 3px;
    border-right-width: 2px;
    border-bottom-width: 3px;
    border-left-width: 2px;
}

#div {
    border-width:3px 2px;
}

Pues bueno con esto y vuestra imaginación, ya podéis hacer todo los tipos de bordes que queráis

#div {
     margin-top: 20px;
     margin-bottom: 5px;
     margin-right: 10px;
     margin-left: 25px;
     padding-top: 10px;
     padding-bottom: 0px;
     padding-right: 5px;
     padding-left: 5px;
}

8 lineas que pueden ir en dos, imaginaos esto en todo el style.css, se multiplica el numero de lineas del css por 4, una burrada, así que os voy a dar unas nociones de CSS muy sencillitas y que os serán de mucha utilidad. Voy a dividir este post en 4 o 5, ya que todo en uno se me antoja muy largo, hoy empezaremos con el margin y el padding.

Para empezar, las dos lineas en las que se puede simplifcar el CSS de arriba son:

#div {
     margin: 20px 10px 5px 25px;
     padding: 10px 5px 0px 5px;
}

Para simplificar de esta manera, sólo tenéis que tener en cuenta que tanto con el margin, como con el padding las medidas se ponen empezando por arriba y siguiendo el sentido horario, por lo que quedarán de esta forma: Arriba(top), Derecha(right), Abajo(bottom), Izquierda(left).

Si nos fijamos en el padding vemos que en el padding-bottom pone 0px, eso también podemos simplificarlo, y siempre que veamos 0px, podemos cambiarlo por 0 a secas.

#div {
     margin: 20px 10px 5px 25px;
     padding: 10px 5px 0 5px;
}

También vemos que el valor del padding-right y el padding-left son iguales, eso también se puede simplificar:

#div {
     margin: 20px 10px 5px 25px;
     padding: 10px 5px 0;
}

Más Simplificaciones en CSS:

• Cuando el margin o el padding tienen iguales las medidas laterales y la superior e inferior también se pueden agrupar así:

  #div {
       margin-top: 0px;
       margin-right: auto;
       margin-bottom: 0px;
       margin-left: auto;
  }
  #div {
       margin: 0 auto;
  }

• Cuando el margin o el padding tienen todas sus medidas iguales:

  #div {
       margin-top: 10px;
       margin-right: 10px;
       margin-bottom: 10px;
       margin-left: 10px;
  }
  #div {
       margin: 10px;
  }

Para acabar deciros que todo esto vale tanto para el margin como para el padding, y que los valores que admiten son:

Y como siempre, ya sabéis que en los comentarios resuelvo todas las dudas que tengáis al respecto, por cierto mañana veremos el border.

Os aconsejo que después de descargaros el pdf e imprimirlo, plastifiquéis la chuleta CSS, podéis poner esta por una cara y la otra chuleta de CSS por la otra.

Vía | Sentido Web
Descargar | Chuleta CSS

Claro esta que si controlas de CSS esto te sobra, pero para los que no saben mucho o estan empezando les puede ir muy bien para fijarse en el código CSS que le devuelve el generador de código CSS para cada situación.

Yo aparte de estos añadiría el generador de fondos que ya comente en su día.

El truco es muy sencillo, sólo son 4 pasos.

1. Copiar nuestro archivo style.css como style.css.php
2. Editar el archivo style.css.php y poner esto al principio.

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

3. Y esto al final.

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

4. Editar el archivo header.php y cambiar la llamada al fichero, ahora llamara al style.css.php. Tenemos 2 posibles formas de hacerlo, así.

<style type="text/css" media="screen">
@import url(<?php bloginfo('stylesheet_url'); ?>.php);
</style>

o así

<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>

Vía | Gran Impetu