Tips / página 1 de 2

Optimizar WordPress para que cargue más rápido

Una de las cuestiones que se deben tener en cuenta en un blog (además del diseño, contenido, accesibilidad, etc.) es su tiempo de carga. ¿Qué es esto? Es el tiempo que pasa desde que el usuario quiere ver una página del sitio, y ésta termina de cargarse.

Obviamente, cuanto más rápido cargue (cuanto menor sea el tiempo de carga), mejor será la experiencia del usuario para con el sitio. Es por eso, que en este artículo les comentaré una serie de tareas que se pueden realizar para lograr acelerar al máximo un blog manejado por WordPress.

Tarea cero

Antes de ir a las tareas para acelerar el blog, debemos conocer qué tan mal/bien estamos en lo que a velocidad se refiere. Para ello, les dejaré algunos enlaces de sitios que permiten calcular (aproximadamente) el tiempo de carga de cualquier URL. Los enlace son: Website Speed Test, Pingdom, Web Site Speed Test.

Primer tarea

Ahora si. Una vez que nos dimos cuenta de que nuestro blog es una tortuga, una de las tareas que recomendaría hacer es optimizar las imágenes. ¿Cómo? Fácil: evitar imágenes demasiado grandes, intentar que sean GIF (ya que al tenes sólo 256 colores ocupan menos que otros formatos), y definir siempre el alto y ancho de cada imagen (si no lo hacemos, el navegador en cuestión deberá realizar esa tarea, cosa que sumará tiempo de carga).

Segunda tarea

Otra de las tareas es comprimir los estilos CSS. Para ello pueden utilizar un plugin llamado CSS Compress WordPress, que se encarga de eliminar los bloques de estilos CSS que son innecesarios para la página.

Tercer tarea

Ahora, podríamos reducir el código PHP. ¿A qué nos referimos? A eliminar aquellas llamadas a funciones que se suelen hacer casi siempre en WP, tales como las funciones que nos devuelven el nombre del blog, la descripción, la URL de la hoja de estilos, etc. Si bien utilizarlas puede ser beneficioso a la hora de distribuir el theme, en la práctica puede resultar poco óptimo (ya que se procesa cada función, para un mismo resultado).

Entonces, la idea sería reemplazar esas funciones, por los resultados que ésta nos devuelve.

Cuarta tarea

Utilizar un plugin de caché. Como ustedes saben, la arquitectura de cualquier computadora dispone con un elemento llamado caché. Este elemento (en el caso de WP podríamos hablar de WP Super Cache), se encarga de cachear (almacenar) las páginas más vistas, a fin de que a la hora de mostrarlas, no procese nada y simplemente nos devuelva la página guardada (cacheada).

Esta tarea, creo yo, es la que hace disminuir el tiempo de carga más significativamente.

Quinta (y última) tarea

Para aquellos que han seguido todas las tareas, y aún no están conformes, la última tarea es eliminar plugin innecesarios. Es muy común, que ante nuestras primeras experiencias con WP instalemos plugins para probar y darles funcionalidades extras a nuestro blog. Eso no está mal, hay que sacarse las ganas y familiarizarse.

Lo que sí está mal, y no se debe hacer, es dejar esos plugins activados, haciendo que cada vez que se haga una petición de una página, el servidor se atore por la gran cantidad de plugins que intervienen. Por eso, es imprescindible eliminar aquellos plugins innecesarios. Si quieren probar uno, háganlo, pero luego recuerden hacerlo a un lado porque pueden sumar peligrosos segundos de carga.

Vía: Xeroblog

Cortar palabras

Si dentro del contenedor de una página escribimos una palabra tan larga que sobrepasa el ancho de este contenedor, seguramente tendremos algo desprolijo, algo que no queremos. Es por eso que a veces vemos necesario cortar las palabras largas, a fin de que esto no suceda.

¿Modos de hacerlo? Muchos. Lo podemos hacer con PHP (con la función wordwrap), JavaScript, y de otras maneras. A continuación veremos una función de JavaScript que lo hace:

function wbr(str, num) {
return str.replace(RegExp("(\\w{" + num + "})(\\w)", "g"), function(all,text,char){
return text + "<wbr>" + char;
});
}

Como verán, debemos pasarle (además de la cadena o palabra en cuestión), el número de caracteres máximo que queremos que soporte. Si los caracteres de una cadena sobrepasa ese número, la función agregará un “<wbr>" (¿qué es?).

Hay otras alternativas (como hyphenator), pero creo que las dos nombradas en el artículo pueden ser las más flexibles y rápidas de implementar.

Vía: Anieto2k

Haciendo uso del archivo my-hacks.php en WordPress

my-hacks.php es un archivo que podemos agregar en el directorio raíz de cualquier blog hecho con WordPress, para realizar numerosas y variadas funcionalidades.

Hoy les explicaré como agregar enlaces a algunas palabras del cuerpo de los artículos; por ejemplo hacer que todas las palabras “daniBlog” apunten a la categoría “daniBlog” de este blog.

Reemplazar una palabra por un enlace en todos los artículos

  1. Primero activamos el uso de my-hacks.php en WP. Para ello vamos a Opciones – Misceláneas, y tildamos la opción correspondiente.
  2. Ahora creamos (si aún no existe) el fichero my-hacks.php en la raíz de instalación de WP, y copiamos lo siguiente.

    <?php
    // replaceAjax Reemplaza las palabras daniBlog por el enlace a la categoría del blog
    function replace_daniBlog($content = '') {
    return str_replace('daniBlog', '<a href="'.get_category_link(DANIBLOG_ID).'" title="daniBlog">daniBlog</a>',$content);
    }

    add_action('the_content','replace_daniBlog'); ?>

    DANIBLOG_ID debe reemplazarse por la ID de la categoría “daniBlog” (la podemos averiguar en Administrar – Categorías).

  3. Subimos el fichero, y trabajo terminado.

Agregando más de una función, podrían reemplazar varias palabras del contenido por el enlace a su categoría.

Pronto publicaré más funcionalidades que podemos agregarle al blog desde my-hacks.php, por ahora ya tienen para entretenerse.

Vía: Anieto2k

¿Cómo aumentar el número de suscriptores feeds de nuestro blog?

Uno de los números que más pesan en un blog, además de las visitas, es el de la cantidad de lectores feeds que tenemos. Esteban Panzera me acaba de pasar uno de sus nuevos proyectos -Buzztam.com- dónde me encuentro con un artículo muy interesante que nos muestra 14 pautas para ir mejorando paulativamente en número de suscriptores.

Recomiendo dos cosas:

  1. La primera, visita el artículo anteriormente mencionado.
  2. La segunda, recomiendo que te subscribas al los Feed RSS de daniBlog (o si prefieres, recibe las últimas noticias en tu e-mail)

Consejos para Escribir los Títulos de los Artículos

En ilmaistro se han molestado en hacer una traducción de un artículo publicado en seobook, dóndo se habla de algunos (varios) consejos para tener en cuenta en los títulos de los artículos de nuestro blog.

Como todos deben imaginar, el título en un blog es lo más imporante (el de sus artículos también). Éste será el que se mostrará en los resultados de Google, y lo primero que los internautas leerán. Si es llamativo, adecuado, (…), obtendremos la visita; si, en cambio, existen errores ortográficos, está mal redactado, (…), perdemos la visita.

A continuación la traducción (un poco modificada por mi) de ilmaistro:

  • Google muestra sólo los primeros 65 caracteres de tu título en los resultados. Debes asegurarte que las palabras clave más importantes aparezcan cerca del inicio del título.
  • En vez de hacer que tu título sea solo tu palabra clave o el título de tu página seguido de la palabra clave (algo muy común), es mejor agregar algún texto descriptivo que sirva como enlace. Esto para evitar que tu página sea filtrada de los resultados de búsqueda y al mismo tiempo te ayudará a rankear para términos similares.
  • Un buen título es aquel que provoca una respuesta emocional, que hace una pregunta o que promete algo.
  • Evita escribir títulos que muestren solo una lista sin sentido de palabras clave relacionadas a tu página, como “Turismo, tours, viajes, agencias de viaje, vuelos – Turismoamerica.com”. Es mejor tratar de combinar los términos en una oración o frase que sea legible, fácilmente comprensible y que describa tus servicios.
  • Un título dirigido al objetivo equivocado o que presenta una oferta no real provocará un porcentaje de conversón bajo, haciendo que tu supuesto cliente solo pierda su tiempo. Por ejemplo, si vendes un producto caro y para atraer gente colocas en tu título las palabras barato y/o económico, estarás engañando a los navegantes y estos definitivamente no regresarán.
  • Mucha gente comete el error de colocar el mismo título en todas las páginas de su web. Esto solo provoca que Google detecte muchas de estas páginas como contenido duplicado y las muestre en los resultados suplementarios. Varía el título de cada página de tu web, de tal manera que estos reflejen el contenido de cada página en particular. Esto es un poco difícil de hacer en páginas de gran tamaño, pero siempre hay soluciones como automatizar la creación de los títulos mediante algún tipo de programación.
  • El formato, orden y selección de palabras en tu título debe ser diferente que la palabras incluidas en tu meta descripción y en la cabecera de tu página.
  • Si tienes una marca fuerte que deseas posicionar, colócala al final de tu título, a menos que tu marca ya sea muy conocida en internet.
  • Si posees un blog, asegúrate que los títulos de tus posts sean títulos llamativos y que incluyan tus palabras claves.

Un consejo que yo daría, además de todos estos es el de utilizar este plugin para WordPress que le da un formato más lindo para los motores de búsqueda, sacando por ejemplo el nombre de nuestro blog en el single.

Como bonus, si saben algo de ingés recomiendo tomarse 5 minutos para ver este video, en dónde se nos explica y demuestra la importancia de los títulos:

Tip: Crear Errores de Windows desde el Bloc de Notas

En Techeblog publicaron un video donde nos enseñan a crear errores de Windows a medida.

Para ello se utiliza la instrucción MsgBox (muy conocida en Visual Basic), de la siguiente forma (explicación del video):

  1. Abrimos el Bloc de Notas de Windows.
  2. Copiamos la siguiente línea: X = MsgBox(“Hola mundo!”, ,”Título”)
  3. Guardamos el documento como holamundo.vbs
  4. Terminamos.

El Archivo VBS

Ejecutando el archivo creado obtenrdemos un mensaje de error con el título y descripción agregados en la edición. Ahora, podríamos agregarle botones a este mensaje. Para ello debemos completar con números (dependiendo de los botones que queremos que aparezcan) entre el mensaje y el título.

Continuar leyendo →

20 Tips para Diseñar y Desarrollar Profesionalmente

Me encuentro en mmcdesign con unos 20 tips (consejos) a tener en cuenta a la hora de desarrollar y/o diseñar un proyecto.

Éstos son:

  1. Planning
  2. Do it by hand
  3. Stylesheets: importing vs linking
  4. Smarter gradient backgrounds
  5. Commenting
  6. Use simple PHP to build sites
  7. Set fonts using ems
  8. IE Box Model Hack
  9. Space saver
  10. Test, test and test again
  11. Format fundamentals
  12. The ‘title’ and ‘alt’ attributes
  13. The correct format for pseudo classes
  14. Use semantic mark-up
  15. Favicons
  16. Change capitalisation using CSS
  17. Wrapping text around images
  18. Universal character sets
  19. Print styles
  20. Learn from others

Para ver los detalles de cada uno pueden hacerlo aquí (ingles).

Vía: LifeClever

Aplicándole Estilo al Elemento Input Type=”file”

El elemento de tipo file -dentro del mundo CSS y XHTML “común”- es algo dificil de modificar en cuanto al estilo. Si le aplicásemos una clase, o un id vía CSS, no tomaría ninguna propiedad diferente.

Sin embargo, siempre se le puede encontrar una solución a estos problemas. En anieto2k han publicado un pequeño artículo que nos guía para poder darle estilo y diseño a un elemento del tipo file. Para ello se apoya en HTML, CSS, y algo de JavaScritp. A continuación les haré otra versión de su mini-guia:

XHTML:

<label class="cabinet">
<input type="file" class="file" />
</label>

Ahora definimos un poco de estilos:

.SI-FILES-STYLIZED label.cabinet
{
width: 79px;
height: 22px;
background: url(btn-choose-file.gif) 0 0 no-repeat;

display: block;
overflow: hidden;
cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file
{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

Ahora debemos -mediante JavaScritp- hacer que el puntero siempre haga click en nuesto nuevo botón:

<script type="text/javascript" src="/path/to/si.files.js"></script>
SI.Files.stylizeById('input-id');

¿Cómo funciona? El CSS nos agrega una linda imagen de fondo a nuestro label. Luego le damos una opacidad cero (0) al elemento file, lo cual está definido dentro del segundo bloque de CSS, haciéndolo invisible al ojo humano (pero no al navegador). Luego, el JavaScritp se encarga de que nuestro puntero accione siempre el elemento file.

Es compatible con: IE5.5+, Firefox 1.5+, Safari 2+.

Enlace: Demo, Descargar

Mejorar el CTR de Adsense: Ocultar los Anuncios Cuando los Vemos Nosotros

Siendo daniBlog aún tan chico, creí que las impresiones de anuncios Adsense que yo mismo hacía podrían influir negativamente en mi CTR. Por lo tanto busqué la forma de ocultar los anuncios en las visitas efectuadas por mí, o sea, cuando estoy “logueado”. Con unas simples líneas PHP lo he logrado. Aclaro que existen plugins para WP que hacen esto fácilmente, pero con las líneas que hay a continuación estoy satisfecho.

Si quieren hacer lo mismo, pueden hacerlo del siguiente modo (no importa si no saben nada de programación, es muy simple):

  1. Justo antes del comienzo del anuncio Adsense debemos agregar la siguiente línea:
    <? if ( !$user_ID ){ ?>
  2. Ahora, luego de la última linea del anuncio Adsense agregamos:
    <? } ?>

Podemos repetir los pasos la cantidad de veces que sean necesarios para ocultar varios anuncios. Lo que hace en definitiva es preguntar ¿Hay un user_ID en ésta sesión? En caso negativo “entrará” al if e imprimirá el anuncio. Caso contario, pasa por alto la impresión del anuncio.

Espero que les sirva para mejorar el CTR al menos en unos pocos céntimos. Cuánto más impresiones se tenga en el sitio menor será el grado de influencia, pero para blogs que recién arrancan puede ser algo útil.

Ésto funciona sólo para WordPress.

Tip: Usar Dominio Propio en Blogger

Algo bastante importante en un blog es tener un dominio propio, ya sea un .com o el correspondiente a nuestra ubicación o la de los usuarios que queremos captar. Blogger -sistema en donde puedes tener un blog sin tener que contratar hosting ni nada- desde hace un tiempito nos permite direccionar dominios con unos simples pasos de configuración que les enumero a continuación (información extraída de blogandweb):

  1. Dominio: Hay muchos lugares donde comprarlo (mydomain, godaddy, etc.). Los .com y .net son dominios que tienen un costo de 10 dólares por año aproximadamente, pero también podríamos usar un dominio de nuestro país que generalmente son más económicos o bien gratuitos (por ejemplo un .com.ar es gratuito).
  2. Configuración del domino: Ahora debemos configurar los DNS (Domain Name System) de nuestro dominio con un registro CNAME. Su procedimiento varía dependiendo de la entidad registrante pero tenemos la suerte de que Google provee una guía en español para los más comunes. Realmente muy complicado no es, y se suelen seguir los siguientes pasos:
    • Dentro del panel de control del dominio buscamos la configuración de los DNS.
    • Verificamos que no existan registros CNAME (si hay debemos eliminarlos), y agregamos uno nuevo donde ingresamos www como name y ghs.google.com en nombre del hospedaje (host name).

    Si tenemos problemas para esta configuración acuérdate que la empresa registrante tiene la obligación de darnos soporte.

  3. Configuración en Blogger: Por último nos faltaría configurar nuestra cuenta en Blogger. Dentro de su panel vamos a [Configuración] -> [Publicación] -> [Dominio Personalizado] -> [Cambiar a opciones avanzadas]. Allí nos solicitará el dominio. Simplemente lo ingresamos y lo guardamos. Ahora sólo resta esperar a que los trámites de redirección finalicen.

Aclaro que existen entidades registrantes capaz de direccionar un dominio en cuestión de segundos, pero algunas otras se tardan un par de díar, asique a ser pacientes.