Lo mejor de mi timeline del 26 de julio al 1 de agosto. WPML, GWT y plugins WordPress

Cómo traducir CF7 con WPML, aquí una de las vías:

https://twitter.com/escael/status/626897378872819712

GWT no puede acceder a los archivos CSS y JS de tu web, ¿cómo solucionarlo?

https://twitter.com/blogpocket/status/627079493530832896

¿Cómo desactivar todos los plugins al mismo tiempo?

https://twitter.com/fernandot/status/626444720840044544

Moda

Lo mejor de mi RSS del 24 al 30 de noviembre: cazando al que te roba Internet, JavaScript, WordPress.com y CSS

Suelo escribir los domingos por la mañana pero esta vez no he podido y hoy lunes os traigo lo mejor de lo que he leído en Feedly estos días. Quizás hoy sea mejor día aún porque así hay noticias de un día más que recopilar que no es poco. Veamos qué hemos podido disfrutar esta semana:

Lo mejor de mi RSS del 8 al 14 de septiembre de 2014

Con septiembre acelera el movimiento en todo tipo de proyectos y parece que nuestros plugins liberados para WordPress siguen acelerando su número de descargas: Clean Login y Import users from CSV with meta. Mientras tanto, la blogosfera trae nuevas noticias y tutoriales y aquí hago un breve resumen de las mismas:

CSS

Lo mejor de mi RSS del 7 al 13 de julio de 2014

Metidos más que de lleno en el verano y con unas temperaturas cada vez más altas llega este resumen semanal de actividad en la blogosfera linuxera y del software libre, principalmente en español aunque los que me seguís ya sabréis que algún enlace en inglés puede caer. Estamos ya a lunes, en esta ocasión no he sido tan puntual como suelo ser todos los domingos pero es parte del verano que los fines de semana, lo sean más aún. Sin más vueltas, los enlaces:

Agrupar misma regla CSS para varios elementos

Cuando estás creando reglas CSS, es muy frecuente que diseñes reglas para cada elemento o grupo de elemento definiendo clases. Es correcto agrupar elementos en grupos mediante las clases, sin embargo, también es correcto definir una sola regla CSS para varios identificadores y clases o partes de reglas que son comunes a varias.

Esto es correcto pero es menos usado y conocido y de ahí la entrada de hoy.

¿Por qué conviene hacerlo?

Básicamente por simplidad y velocidad. Velocidad en dos aspectos, por un lado, por tiempo de transmisión (menos tamaño del fichero CSS resultante), por otro lado, por tiempo de interpretación (menos reglas que interpretar y menos reglas sobre las que buscar al renderizar).

¿Cómo se hace?

Probablemente ya lo sepáis pero merece la pena volver a comentar la sintaxis. Tened en cuenta que ciertos framework como jQuery también hacen uso de la misma sintaxis y puede seros útil.

Veamos un ejemplo esclarecedor:

body {font-size: 12px; }
body {font-family: arial, helvetica, sans-serif;}
th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Podemos reducirlo a esto:

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Simple, ¿no?

Grilla de imágenes

Alinear imágenes correctamente en una grilla sin usar tablas con HTML y CSS

Es bien posible que en más de una ocasión hayáis tenido que colocar imágenes una detrás de otra formando filas y columnas. Algo como lo que muestro a continuación:

Grilla de imágenes

¿Cuál es el problema? Si lo hacéis a mano directamente con HTML y CSS sin usar una galería o un framework que te la cree correctamente, os habréis peleado para dejarlas perfectamente alineadas.

Personalmente he probado de todo, desde obligar a alturas, márgenes, padding, float, etc. a incluir más div y nada, hasta que leí esta pregunta del genial Stackoverflow.

¿Qué estructura tenemos que seguir para llegar a esta solución?

El siguiente HTML:

<div class="wrapper"> 
  <div> 
    <img><img><img><img><img><img> 
  </div> 
</div>

Y el siguiente CSS (traduzco los comentarios):

.wrapper {
    overflow:hidden;
    width:320px;
}
.wrapper div {
    /* cualquier altura mayor que el total de sumar la anchura de las img */
    width:330px;

    /* para evitar el margen superior de la primera fila */
    margin-top:-10px;
}
img {
    width:100px;
    height:75px;
    float:left;
    margin:10px 10px 0 0;
}

Aligerando WordPress: optimizando el rendimiento

Aprovechando la celebración de la Meetup WordPress Córdoba 2012, la segunda que se celebra y de la que hablaré más y mejor en otra entrada, preparé una ponencia sobre rendimiento en WordPress. La presentación va dirigida a la fórmula más popular: WordPress ejecutando en un servidor de alojamiento compartido.

[slideshare id=14623581&doc=rendimientocarazo-121007103836-phpapp01]

Dentro de la ponencia no se habla de mejoras a nivel de servidor, de qué servidor web usar o cómo mejorar nuestra arquitectura.

Sin embargo sí se trata de cómo mejorar:

  • El tamaño de los ficheros
  • La cantidad de ficheros a descargar
  • Cómo conocer qué plugins son los que más nos están afectando
  • Cómo eliminar llamadas PHP innecesarias
  • Conocer cuántas consultas a la base de datos se realizan y cómo minimizarlas
  • Finalmente: reducir la complejidad de nuestros JavaScript y CSS

Aquí os la dejo, espero que os guste.

Desarrollo con WordPress

Añadir una hoja de estilos CSS a un tema o plugin WordPress

Cuando trabajamos desarrollando para WordPress, no debemos incluir ficheros CSS de la forma tradicional (usando las etiquetas <style> o <link>), sino que debemos utilizar una función creada para tal efecto, que nos asegura una forma segura y correcta de hacerlo.

Desarrollo con WordPress

La idea es la siguiente:

Para ello usaremos una función que se encargue de ello y la llamaremos según nos convenga, en nuestro caso, la asociaremos a una acción. Veamos el código en cuestión:

function carga_estilos_theme()
{
  wp_register_style( 'estilos',
    get_template_directory_uri() . '/css/estilos.css',
    array(),
    '1.1',
    'all' );

  wp_enqueue_style( 'estilos' );
}
add_action('wp_print_styles', 'carga_estilos_theme');

¿Qué significa cada parámetro en cada una de las funciones? Empecemos por la que tiene más, wp_register_style:

  • "estilos": es el manejador de la hoja de estilos, una vez se registra, éste será el identificador que usemos para encolarlo o cualquier otra operación que queramos.
  • La URL de la hoja de estilos, por compatibilidad debemos usar la función get_template_directory_uri() que nos devuelve la URI del tema.
  • Un array con las posibles dependencias que tenga la hoja de estilos.
  • Versión de la hoja de estilos.
  • Medio en el que se aplica la hoja (tenéis la lista completa de medios posibles definida en el W3C).

Una vez la hoja está registrada, pasamos a añadirla con wp_enqueue_style y el identificador que acabamos de proveer.

Para añadir código de scripts JavaScript, la operación es similar.

Lo mejor de mi timeline del 31 de marzo al 6 de abril

@javierburon Pantalla táctil para tablets y smartphones. Lo último.
@TuXapuntes GNU/Linux: Programación de Sistemas
@hackplayers Apple tiene la clave maestra para descifrar tus datos de iCloud
@ahornero Fractalizer para Gimp. Simplemente cumple su función, y bien
@googlechrome Modo multitarea en Google Chrome / Chromium
@BradBirdsall Sintaxis para MoreCSS

Logo HTML5

Elementos que desaparecerán en breve de HTML

Logo HTML5Si te dedicas al mundo del desarrollo web, sabrás que con cada versión nueva de HTML, al igual que ocurren en otras tecnologías, hay elementos que aparecen y otros que desaparecen o se marcan como deprecated para avisar de que deseparecerán en breve.

Con el tránsito definitivo a HTML5 del que tantísimo se lleva hablando, algunos elementos dejarán de existir. Aquí os traigo un listado de ellos, cuál era su función y cómo debemos sustituir su funcionalidad.

<acronym>

Se usaba para describir acrónimos (por ejemplo NASA) en HTML4, sin embargo ahora deberemos usar la etiqueta <abbr>.

<applet>

Esta etiqueta se usaba para introducir applets dentro de la web, sin embargo, ahora debemos usar <object>.

<basefont>

Definía características de la fuente por defecto: color, tamaño y familia; para todo el documento. Esto mismo podemos hacerlo vía CSS.

<big>

Como su nombre indica, servía para hacer el texto más grande, con CSS podemos hacer esto mismo de varias formas.

<center>

Centraba horizontalmente el contenido, un remedio rápido para un problema frecuente. La solución correcta usar CSS.

<dir>

Etiqueta para definir listados de directorios, ha dejado de tener sentido como tal y en su lugar debemos usar <ul>.

<font>

Para especificar la fuente de un texto, incluye el estilo dentro del contenido, por lo que debemos evitarla a toda costa. Su labor la hacemos usando CSS.

<frame>

En los tiempos en que no existía AJAX, los frames eran una de las mejores formas de hacer recargas parciales de las páginas. Esta opción desaparece en HTML5. Si habéis trabajado alguna vez con ellos, aparte de antiestéticos os habrán dado quebraderos de cabeza de todo tipo, mucho mejor recargar div de forma asíncrona.

<frameset>

Relacionada con la anterior, era parte del funcionamiento de los frames.

<noframes>

También relacionada con las dos anteriores.

<strike>

Etiqueta muy poco utilizada, servía para hacer justo esto con el texto, ahora usamos <del> en su lugar.

<tt>

Usada para definir texto de teletipos, ahora usamos CSS.

<u>

Utilizado para indicar texto subrayado, ahora usamos CSS y más concretamente: text-decoration:underline.

Cambiar el logo del escritorio en WordPress

Si ya hemos explicado cómo cambiar el logo en el inicio de sesión de WordPress, probablemente nuestro cliente también quiera ver su logo en el escritorio. ¿Cómo? Siguiendo el mismo método de antes:

  1. Dentro del hook "admin_head" que se ejecuta cuando carga la cabecera del escritorio, llamamos a una función
  2. La función se limitará a hacer un eco de un código de estilo que al tener !important prevalecerá sobre el que está por defecto y cambiará la imagen de fondo

El código a incluir dentro de nuestro "functions.php" será el siguiente:

add_action('admin_head', 'my_custom_logo');

function my_custom_logo() {
   echo '<style type="text/css">
         .ab-icon { background-image: url('.get_bloginfo
('template_directory').'/images/custom-logo.gif) !important; }</style>';
}
WP Minify antes y después

Combina y comprime todos los ficheros CSS y JS para optimizar WordPress con WP Minify

Cada vez que accedemos a una web, independientemente del CMS que usemos (como si no usamos ninguno), el navegador empieza la descarga del sitio en HTML y todo lo que trae consigo (principalmente imágenes, hojas de estilo y ficheros de script del lado del cliente como JavaScript) mediante protocolo HTTP.

¿Qué problema tiene HTTP? Para cada petición de este tipo, abre y cierra la conexión. ¿Eso qué conlleva? Un aumento del tiempo de transferencia.

Como se puede observar, el problema en parte es abordable ya que aunque no podemos (por ahora) reunir todas las imágenes en una sola transmisión, sí que es cierto que podemos hacer que si tenemos 4 ficheros de hojas de estilo CSS y 10 ficheros JavaScript que cargar; podemos limitarnos a enviar un sólo fichero de cada tipo al navegador. El resultado no cambia y aceleramos el proceso.

Si usamos WordPress, podemos instalar WP Minify para que automatice este proceso por nosotros y nos olvidemos, junto con otra mejora, comprime ambos ficheros resultantes lo que lleva a una mejora mayor aún de la ya comentada.

Podéis ver el efecto de usarlo en las capturas siguientes:

WP Minify antes y después

Casi 100.000 bytes recibidos, tras usar WP Minify tenemos:

WP Minify tras instalar

Menos de 30.000, ¿muy útil verdad? Veamos cómo instalarlo. Nos dirigimos a:

  • Escritorio
  • Plugins
  • Añadir nuevo
  • Buscamos "WP Minify"
  • Instalar ahora

Una vez instalado lo activamos pero antes de eso nos aseguramos de que el servidor web tiene permisos de escritura en:

  • /wp-content/plugins/wp-minify/cache
  • /wp-content/plugins/wp-minify/min/config.php

Con sólo eso veremos el rendimiento de nuestro sitio optimizado de forma automática sin esfuerzo de nuestra parte.

Modificar el inicio de una lista ordenada en HTML

Siempre que usamos listas ordenadas en HTML (ordered lists definidas por el tag: <ol>), tenemos una serie de elementos ordenados por número (o por letra en función del CSS). Por ejemplo:

  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento

Si por cualquier razón queremos empezar por un elemento diferente a uno (por ejemplo porque queramos continuar la lista anterior en otro punto del documento HTML), tenemos el atributo "start", veamos un ejemplo de su uso:

  1. Cuarto elemento
  2. Quinto elemento

El código fuente sería:

<ol start="4">
	<li>Cuarto elemento</li>
	<li>Quinto elemento</li>
</ol>

Sin usar este atributo no podríamos haberlo hecho.