CSS

Reducir tiempos de carga en WordPress

Sois muchos los que después del twitt que puse el otro día me habéis enviado mails y habéis compartido algún wave conmigo para que os ayude a reducir el tiempo de carga de vuestro blog, es por eso que para no seguir repitiendo lo mismo a todos, voy a explicaros como he conseguido bajar del segundo en el medidor de velocidad de Pingdom.

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.

pingdom tools

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.

Sigue leyendo →

Bordes redondeados con CSS3

Antes con CSS2 si queríamos crear un recuadro con los bordes redondeados, primero teníamos que hacer las cuatro imágenes de las esquinas redondeadas y poner cada imagen en una esquina y bla, bla, bla….

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

Bordes redondeados con CSS3

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

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;    
}

Sigue leyendo →

Que no es la Web 2.0

Magnifico post de Jorge, que acabo de leer en CSSLab, os pego un extracto pero os recomiendo ir a leerlo.

  • 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

Numerar comentarios en WordPress

Nuestro compañero Dogguie, que por cierto tiene un gran blog que os recomiendo, me ha pedido que le explique como numerar comentarios en WordPress, y la verdad es que es relativamente sencillo, basta con poner un par de lineas de código dentro del archivo comments.php de nuestra plantilla, theme para los más Pro’s 😛Dogguie

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.

Simplifica tu CSS: Border

Después de haber simplificado las etiquetas margin y padding de nuestro css, hoy vamos aprender a simplificar la etiqueta «border«.

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.

Sigue leyendo →

Simplifica tu CSS: Margin & padding

Una de mis debilidades es diseñar y maquetar con CSS, y ultimamente estoy viendo muchos themes de Worpress con el CSS muy desestructurado y con muchas lineas inútiles. Y cada vez más odio ver trozos de código como este:

#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:

Sigue leyendo →

33 herramientas para generar estilos CSS

Pablo se ha currado una magnífica recopilación de los 33 sitios en los que podrás generar estilos CSS para tus diseños.

herramientas para generar estilos 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.

Esta web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.

ACEPTAR
Aviso de cookies

This function has been disabled for InKiLiNo.com.