En esencia, se trata de crearnos un array personalizado, con los campos y valores que escojamos, y se lo volvamos a pasar a la función comment_form() del core de WordPress. Creamos el array comentarios:

$comentarios = array ();

Y la forma de pasar el nuevo array a la función de comment_form es:

comment_form($comentarios);

Así no conseguiríamos todavía nada. Veamos unos casos prácticos para modificarlo.
Por defecto, en nuestro formulario, tenemos indicados las etiquetas HTML permitidas al escribir en el campo ‘comentario’. Si quisiéramos quitarlos y que no se mostraran, añadimos a nuestro array:

'comment_notes_after' => '',

Lo que resetea el valor por defecto de WordPress a nuestro nuevo valor, un valor vacío y no escribe esa parte de texto en el formulario. Ale, hemos quitado la lista de etiquetas permitidas.

Ahora un ejemplo más complicado. Para modificar los campos del formulario de email y url para adaptarlos a los teclados de los dispositivos móviles, como el iPhone y el iPad, facilitando escribir las arrobas, las barras de URL y los dominios. Para eso creamos un array independiente al anterior, lo llamo $campos, con los parámetros y valores de author, email y url. Realmente, a los campos por defecto, solo cambiamos el ‘type’ del campo: para email un type=”mail”, y para las url un type=”url”:

$campos = array(
 'author' => '<p class="comment-form-author"><label for="author">' . __( 'Name', 'domainreference' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="author" name="author" type="text" pattern="" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
 'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email', 'domainreference' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="email" name="email" pattern="" type="email" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
 'url' => '<p class="comment-form-url"><label for="url">' . __( 'Website', 'domainreference' ) . '</label><input id="url" name="url" type="url" pattern="" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>'
);

Y este array ‘campos’ los añadimos a nuestro array ‘comentarios’, aplicando filtros:

'fields' => apply_filters( 'comment_form_default_fields', $campos ),

El código completo de las modificaciones del formulario de comentarios queda así:

<?php
$campos = array(
 'author' => '<p class="comment-form-author"><label for="author">' . __( 'Name', 'domainreference' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="author" name="author" type="text" pattern="" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
 'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email', 'domainreference' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="email" name="email" pattern="" type="email" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
 'url' => '<p class="comment-form-url"><label for="url">' . __( 'Website', 'domainreference' ) . '</label><input id="url" name="url" type="url" pattern="" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>'
);
$comentarios = array(
 // remove "Text or HTML to be displayed after the set of comment fields"
 'comment_notes_after' => '',
 // Campos del formulario con type para dispositivos moviles
 'fields' => apply_filters( 'comment_form_default_fields', $campos ),
 // redefine your own textarea (the comment body)
 //'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><br /><textarea id="comment" name="comment" aria-required="true"></textarea></p>',
);

comment_form($comentarios);
?>

Y si comprobamos el resultado en un iPhone, veremos nuestro teclado adaptado al campo, con la arroba en email, y el .com en la url. Más cómodo.

Que lo disfrutéis!
Saludos

En mi caso, la zona horaria es Europa, y la ciudad Madrid. Con el GMT +1 y +2 según sea el horario de verano o invierno, con el cambio de fecha de horario programado.

Para asignar la zona horaria al sistema, renombramos el fichero preconfigurado de localtime:

# mv /etc/localtime /etc/localtime-old

Y hacemos un enlace simbólico al fichero de nuestra zona horaria:

# ln -sf /usr/share/zoneinfo/Europe/Madrid /etc/localtime

Una vez hecho esto, podemos revisar la hora de nuestro sistema, ejecutando:

# date

Esto nos muestra la fecha y hora del sistema. Si no es correcta, la cambiamos ejecutando ‘date‘ y pasándole la fecha en el formato MMDDhhmmYY, de la forma: mes, día, hora, minutos y año, todos con dos cifras.

Si queremos cambiar la hora a las 19:53h del día 18 de mayo de 2013, por ejemplo, hacemos:

# date 0518195313

Y alehop, cambiada, podemos comprobarla de nuevo ejecutando ‘date‘ sin parámetros.

El caso concreto que os propongo es para las imágenes que en WordPress llama imagen destacada, featured-image, que sale en la cabecera de nuestro mensaje, por defecto tomará las medidas de los previos que tengamos marcada en los ajustes Media del administrador.

Para un móvil no interesa mostrar un previo, thumbnail, más pequeño que en una tablet o un equipo escritorio. Para eso:

1. Descargar el plugin Mobble
2. Instalar: copiar en la carpeta Plugins de WordPress. Activar desde el administrador de plugins.
3. Modificar los PHP donde se muestra la featured-imagen (post-thumbnail) por ejemplo:

• loop.php
• single.php

Pasos a seguir:

1. Editar el fichero php
2. Buscar la función post_thumbnail
3. Reemplazar:

<?php //the_post_thumbnail(); // Declare pixel size you need inside the array ?>

Por:

<?php
if (is_mobile()) {
the_post_thumbnail('small');
} else {
the_post_thumbnail('large');
}
?>

Podemos usar en los if los dispositivos genéricos:

is_handheld(); // any handheld device (phone, tablet, Nintendo)
is_mobile(); // any type of mobile phone (iPhone, Android, etc)
is_tablet(); // any tablet device
is_ios(); // any Apple device (iPhone, iPad, iPod)

La lista completa de dispositivos:

is_iphone();
is_ipad();
is_ipod();
is_android();
is_blackberry();
is_opera_mobile();
is_symbian();
is_kindle();
is_windows_mobile();
is_motorola();
is_samsung();
is_samsung_tablet();
is_sony_ericsson();
is_nintendo();

SaludoX

Para eso, debemos quitar en la etiqueta img el alto y ancho desde los filtros de nuestro theme, y ajustar las CSS para que muestren las imágenes a un máximo del 100%, independiente del tamaño original de la imagen.

Ajustar las CSS:

img{max-width: 100%;}

En el fichero functions.php de nuestro theme añadimos una función que quite los tags width y height de la función del core de WordPress:

// Remove thumbnail width and height dimensions that prevent fluid images in the_thumbnail
function remove_thumbnail_dimensions( $html )
{
  $html = preg_replace('/(width|height)=\"\d*\"\s/', "", $html);
  return $html;
}

Y en el mismo fichero de functions.php añadir los filtros:

Este quita los atributos width y height de los thumbnails:

add_filter('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);

Y este otro los quita de las imágenes de los mensajes:

add_filter('image_send_to_editor', 'remove_thumbnail_dimensions', 10);

Que lo disfrutéis

En este caso lo reescribo para tenerlo en cuenta con sistema CentOS y el SELinux, que debes reconfigurar si quieres usarlo. Para el ejemplo utilizaré 2 hosts, Host A y Host B como indica la imagen:

Esquema Hosts SSH

Siendo el Host A nuestra propia máquina, un cliente que se va a conectar vía SSH al equipo remoto, denominado aquí Host B, un servidor o máquina a la que te conectas.

1. Generar la llave pública id_dsa.pub, si no está creada, en el Host A. Si ya la tenemos, pasamos al punto 2.

HostA:/ usuario$ ssh-keygen -t dsa
Generating public/private dsa key pair.
Enter file in which to save the key (~/.ssh/id_dsa): (pulsar enter)
Enter passphrase (empty for no passphrase): (pulsar enter)
Enter same passphrase again: (pulsar enter)
Your identification has been saved in ~/.ssh/id_dsa.
Your public key has been saved in ~/.ssh/id_dsa.pub.
HostA:/ usuario $

2. Crear, si no existe, el directorio .ssh en el Host B

HostB:/ root$ mkdir ~/.ssh

Ajustar permisos al directorio:

HostB:/ root$ chmod 700 .ssh

3. Copiar la llave pública desde el Host A al B

HostA:/ usuario$ scp ~/.ssh/id_dsa.pub
root@<ip_equipo_remoto>:~/.ssh/public-key.tmp

4. Añadir la llave pública a las autorizaciones del Host B.

HostB:/ root$ cat ~/.ssh/public-key.tmp >> ~/.ssh/authorized_keys

Con esto ya tenemos generada la confianza entre ambos hosts vía SSH. Si usamos un sistema CentOS o cualquier otro con el sistema de seguridad SELinux, debemos hacer lo siguiente:

5. Resetear la configuración de SELinux en el Host remoto, servidor. En CentOS es necesario corregir las opciones de seguridad del directorio .ssh en SELinux:

HostB:/ root$ restorecon -Rv ~/.ssh

SaludoX

Estas son dos fotos que fui capaz a capturar del momento. Que las disfruten.

Tomadas con una Lumix GX-1 y el objetivo Panasonic 45-175mm

El GUMCAM organizó unas sesiones abiertas a tod@s en las que te enseñaban a desmontar un portátil Mac montar un disco SSD en  la bahía del lector DVD y configurarlo para que tu Mac OS X vaya fino, fino. Y entre toda la documentación que han contando por su twitter #gumcam_org me ha chocado esto del noatime.

La propiedad atime de los discos duros

Cada vez que se accede a un fichero del disco duro, el sistema Unix lee el atime para saber el último acceso al fichero, lo abre y graba en el fichero la fecha en nuevo atime. Es decir, por cada acceso 3 operaciones.

En un disco convencional no tiene la mayor importancia. Pero en los discos SSD es muy recomendable desactivarlo porque el ciclo de escrituras sobre el disco son limitadas, para alargar la vida del dispositivo desactivando atime.

Pasos para desactivar la propiedad atime del disco SSD:

1. Crear un fichero plist para que cada vez que arranque el equipo se active ‘noatime’
Crear y editar un fichero plist:

$ sudo vi /Library/LaunchDaemons/com.macosas.noatime.plist

Añadir al fichero el contenido xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
 <dict>
  <key>Label</key>
  <string>com.macosas.noatime</string>
  <key>ProgramArguments</key>
  <array>
    <string>mount</string>
    <string>-vuwo</string>
    <string>noatime</string>
    <string>/</string>
  </array>
  <key>RunAtLoad</key>
  <true/>
 </dict>
</plist>

2. Revisar los permisos del fichero, deben quedar así:

$ ls -al /Library/LaunchDaemons/com.macosas.noatime.plist
-rw-r--r-- 1 root wheel /Library/LaunchDaemons/com.macosas.noatime.plist

3. Cargar el fichero en el launchd de sistema:

$ sudo launchctl load -w /Library/LaunchDaemons/com.macosas.noatime.plist

El cambio a noatime podremos comprobarlo al reiniciar, ejecutando el comando mount:

$ mount
/dev/disk0s2 on / (hfs, local, journaled, noatime)

Larga vida al SSD! O al menos, alargad la vida.

Este maravilloso edificio de la Plaza de España madrileña, de piedra y ladrillo visto, destaca cuando subes por la Cuesta de San Vicente desde el río, destaca cuando lo ves desde el Palacio de Oriente o cuando te asomas desde Ferraz.

El edificio recoge como pocos la luz del cielo madrileño. Recogido en la esquina de Plaza de España 8 y calle Bailén, junto al Senado y a los Reales Jardines de Sabatini. Protegido, tapado o qué se yo por el puente/tunel de Plaza de España, puedes verlo en un día nuboso como es capaz de recibir los pocos rayos de sol que haya y hacer que te fijes en él.

En la puerta principal se puede ver como fecha del edificio la de 1898, pero el palacete fue construido entre 1891 y 1899 por el arquitecto Manuel Martínez Ángel, director de la Real Compañía, empresa belga que explotaba las minas de Asturias. El edificio albergaba las oficinas y viviendas de los ingenieros, incluida la del propio Manuel Martínez. En la zona central que une ambas alas, se realizó un enorme almacén, al más puro estilo industrial de la época, acristalado con estructura de cerchas de hierro.

La fachada de piedra y ladrillo visto, está ornamentada con ménsulas de angelotes, personajes mitológicos y motivos vegetales. Los balcones tienen unas balaustradas muy decoradas de plomo.

Con esto, voy a iniciar una aproximación personal a fondo en el diseño para dispositivos móviles, bajo el lema Mobile First, y luego adaptar esos diseños a tablets y pantallas de escritorio, o mantener varios diseños para el mismo contenido, ya veremos. Mi día a día para aprender y praticar la llevo en una lista de tareas con la filosofía GTD en OmniFocus, mis apuntes ‘en sucio’ los llevo en Evernote, donde guardo capturas, ideas, bocetos, códigos para reutilizar… En este sitio web plasmaré todo lo que aprenda.

Estáis tod@s invitados al viaje iniciático.

Tutoriales

• HTML5 Introduction – What is HTML5 Capable of, Features, and Resources
• Basic HTML5 Page Template
• Estructura de tags en HTML5
• HTML5 Embedded Media
• HTML5 Canvas: How And What animaciones, efectos, gráficos…
• Código HTML5 para sitios responisve’s para ver el código

Imágenes

• Imágenes para una web Responsive, para galería de fotos
• Fluid Images, adaptar contenido al ancho de contenido
• Imágenes con más resolución – Retina.js
• Slider de Imagen a ancho completo
• Imágenes Responsive con IIPImage
• A Pure CSS3 Cycling Slideshow

Mobile

• HTML5 Mobile First tutorial paso a paso
• Adaptar web al iPhone paso a paso
• Looking Beyond Common Media Query Breakpoints
• Primeros pasos con Modernizr. Instalación
• HTML5 y CSS3 con Modernizr

Webs completas – Responsive

• Web de ejemplo Responsive, paso a paso
• Responsive jQuery Masonry, crear el HTML, CSS y usar JavaScript
• Sistema de comentarios en tiempo real

Herramientas

• FitText.js Hacer el tamaño de fuente flexible
• This Is Responsive. – CSS-Tricks – Web de ejemplos
• 40+Useful Responsive Web Design Tools and Techniques
• CSS Hórus – A CSS framework for responsive and mobile websites
• Demos HTML + CSS + JS con ejemplos claros

Pues hoy, de casualidad, sin buscarlo, ha surgido el tema en MadridDevOps, un grupo de google bastante activo con muchos profesionales que saben lo que se hacen, y donde cualquiera puede preguntar y ser respondido. Pues eso, ha salido de casualidad el tema de métricas, y Log.io, que permite leer logs remotos desde tu equipo. Tachán! lo tanto buscado y nunca encontrado.

Log.io está basado en Node.js, con sus ventajas e inconvenientes, pero que queréis que os diga, por ahora son todo ventajas. Y una vez istalado, todo es accesible vía web. Inconvenientes: que solo sirve para Mac’s Intel, con sistema operativo 10.6 o superior.

1. Instalar Node.js
2. Instalar Log.io
3. Configurar el Log.io Server
4. Configurar los Log.io clientes o harvester

1. Instalar Node.js

Descargar el instalador, el binario, el compilable… que nos convenga para nuestro equipo. En mi caso, lo más cómodo es el pkg para Mac OS X Universal. En Mac todo se instala en /usr/local/bin. Asegúrate de tener /usr/local/bin en el PATH de sistema.

• /usr/local/bin/node

• /usr/local/bin/npm

2. Instalar Log.io

Para no tener problemas de permisos, la instalación la hago como root, pero podrías pasarle el parámetro de –user = ‘tu_usuario’ al ejecutar la instalación con sudo.

Instalar Log.io vía paquetes npm (esto es el Node.js instalado antes):

$ npm install -g log.io

Arrancar el servicio de log.io server

$ log.io-server

3. Configurar el Log.io Server

Por defecto, el fichero de configuración tiene el servicio Apache configurado para leer tus logs, si quieres ver como funciona sin más, arranque el servidor web si no lo tienes arrancado antes de seguir, ejecutando en Terminal:

$ apachectl graceful

Configurar el fichero harvester.conf, lo editamos con un editor de textos, como vi, y modificamos la IP del host que recibe las peticiones y las gestiona, el Server, en este ejemplo le pongo 192.168.1.10.

$ vi /var/root/.log.io/harvester.conf
exports.config = {
  nodeName: "application_server",
    logStreams: {
    apache: [
    "/var/log/apache2/access_log",
    "/var/log/apache2/error_log"
    ]
    },
  server: {
    host: '192.168.1.10',
    port: 28777
  }
}

Arrancar el log harvester, para que recoja los logs de nuestro propio equipo.

$ log.io-harvester

Para ver los resultados ya podemos ir a la web http://192.168.1.10:28778/

En el servidor no es necesario correr log.io-harvester, si no vamos a recoger los logs propios de ese equipo.

4. Configurar los Log.io clientes o harvester

La forma de trabajo de Log.io son peticiones TCP, en el equipo cliente debe correr el servicio harvester, que cada vez que reciba un cambio lo enviará vía TCP al servicio log.io del Server. De esta forma, configurando el fichero harvester.conf con la lista de logs a ‘vigilar’ y el host a donde debe enviar los eventos tendremos nuestro sistema de monitorización a nivel de logs montado.

Para todo esto, instalamos en los equipos clientes Node.js y Log.io con npm.

Configuramos el fichero harvester.conf, por ejemplo, para vigilar un entorno de desarrollo con MAMP, pero podemos añadir tantos como querramos:

$ vi /var/root/.log.io/harvester.conf
exports.config = {
  nodeName: "application_server",
    logStreams: {
    apache: [
    "/Applications/MAMP/logs/apache_error_log",
    "/Applications/MAMP/logs/mysql_error_log.err",
    "/Applications/MAMP/logs/php_error.log"
    ]
    },
  server: {
    host: '192.168.1.10',
    port: 28777
  }
}

Guardamos el fichero, y arrancamos log.io-harvester:

$ log.io-harvester

Y listo, desde nuestro propio equipo, o donde tengamos el Server, podremos abrir la web de Log.io http://192.168.1.10:28778/ y disfrutar vigilando los logs de sistema remotos.

SaludoX