Las tres reglas de oro

Lo primero y principal antes de empezar a escribir la plantilla, es definir estas tres reglas de oro del CSS. Se colocan al principio del archivo CSS, y sirven para evitar las discrepancias principales entre navegadores. Así nos evitamos más de un susto al comprobar si se ve igual en todos los navegadores.

Lo que hacen es inicializar todos los márgenes internos y externos a cero (de TODOS los elementos), prefijar un tamaño de letra uniforme para todos los navegadores, y eliminar el borde de las imágenes.

Conocer más sobre las tres reglas de oro del CSS.

Suelo añadir esta cuarta regla, que evita que salga un recuadro alrrededor de los enlaces al pulsarlos.

(más info)

Centrar contenedores (elementos div) en CSS

Para centrar un contenedor en CSS, además de definir un ancho determinado, debemos asignar el valor auto al margen izquierdo y derecho del contenedor. Esto no da resultado en Internet Explorer, que requiere de la propiedad text-align: center. Si usamos las dos, nos aseguramos la victoria.
HTML:

CSS:

(más info)

Hacer columnas con CSS

Para crear varias columnas en un skin, debemos colocar elementos de bloque (div, ul, form…) que las representen, de forma contigua (uno al lado de otro) en nuestro HTML. A continuación, en el CSS usaremos la propiedad float, que “flota” un elemento a la izquierda o a la derecha, sacándolo del flujo de contenido.

Hay varias formas de aprovechar la propiedad float para crear columnas, algunos ejemplos:

Las flechas indican si se ha flotado a izquierda o a derecha, aúnque resulta bastante obvio.

Ejemplo, el código CSS para hacer que todos los elementos li de una lista, esté flotados a la izquierda, con un tamaño de 100×100 px:

Evitar solapamiento en la propiedad Float

Da definicion en el estándar de CSS, hace que la propiedad float saque al elemento del flujo, y provoca que el resto de elementos “lo ignoren” en muchos aspectos, como que el elemento que lo contiene no adapta su ancho para incluirlo.

Lo que quiero:

Lo que ocurre:

Esto lo podemos solventar muy fácilmente.

Si queremos que un elemento que va a continuación de un float, no se vea afectado, le podemos dar la propiedad clear: both

Pero si el problema es que tenemos elementos “flotados”, y queremos que el contenedor los envuelva, nada más fácil que aplicar al contenedor la propiedad overflow: hidden. La explicación la encontraréis aquí

Todas las propiedades a mano

Es muy importante tener siempre las propiedades a mano, y sobretodo conocer las 95 propiedades del CSS 2.1 para conocer las herramientas de que disponemos. Podéis encontrar un agradable listado, muy bien explicado (en inglés) en CulturedCode CSS 2.1 Reference (es un recurso alucinante, muy muy útil)

Usar estructuras prefabricadas

Podremos ahorrarnos tiempo, si partimos de estructuras prefabricadas en CSS y HTML.

• Layout Gala contiene muchas estructuras combinando tres elementos principales, cabecera y pié de página.
• Css Easy te ofrece las principales configuraciones para skins, listas para descargar y manipular.
• En Listmatic encontraréis muchos tipos de lista, para aplicar a menús, o a lo que queráis.
• En CSS Showcase podréis encontrar muchos ejemplos de barras de navegación.

Plantillas ya elaboradas

Otro recurso es acudir a skins completamente elaborados, y extraer lo que nos interese de ellos. Algunos enlaces:
OpenSourceWebDesigns, FreeCssTemplates, Free-css-templates, TheStyleArchive, TemplateWorld

O recurrir a sitios donde muestran plantillas únicamente para inspirarte:
Inspirational CSS, CSSBeauty, Elegant Desighns

Por último, en del.icio.us (tag: css) podéis encontrar muchos recursos interesantes de CSS, y en Webéame (categoria diseño) otros tantos.

PHP permite dos tipos principales de funciones para expresiones regulares: las de tipo ereg (Expresiones regulares POSIX) y las de tipo preg (Compatibles con Perl). Son muy similares, aúnque las segundas llegan a ser algo más potentes.

Una expresión regular, consiste en comparar un patrón frente a un texto, para comprobar si el texto contiene lo especificado en el patrón.

Por poner un par de ejemplos:

Patrón: in
Coindicen:

• intensidad
• cinta
• interior

Patrón: [mp]adre
Coindicen:

• Mi madre se llama Luisa
• Tu padre es jardinero

A continuación voy a repasar la sintaxis básica de una expresión regular

Sintaxis y metacaracteres

El punto

El punto representa cualquier caracter. Escribiendo un punto en un patrón querrás decir que ahí hay un caracter, cualquiera. Desde la A a la Z (en minúscula y mayúscula), del 0 al 9, o algún otro símbolo.

Ejemplos:
ca.a coincide con cana, cama, casa, caja, etc…
No coincide con casta ni caa

Principio y fin de cadena

Si queremos indicar al patrón qué es el principio de la cadena o qué es el final, debemos hacerlo con ^ para inicio y $ para final.

Ejemplos:
“^olivas” coincide con “olivas verdes“, pero no con “quiero olivas”

Cuantificadores

Para indicar que cierto elemento del patrón va a repetirse un número indeterminado de veces, usaremos + o * . Usando + queremos decir que el elemento anterior aparece una o más veces. Usando * queremos decir que el elemento anterior aparece cero o más veces.

Ejemplos:
“gafas+” coincide con “gafassss” pero no con “gafa”
sin embargo
“clo*aca” coincide con “claca“, “cloaca“, “cloooooooaca“, etc..

Si lo que queremos indicar al patrón es que un elemento puede que esté (una vez) o puede que no, lo haremos con el interrogante de la siguiente forma:
“coches?” coincide con “coche” y con “coches”

Para definir la cantidad de veces que va a repetirse el elemento, tendremos que hacer uso de las llaves: { }, indicando en su interior el intervalo, o la cantidad exacta de veces que va a repetirse.

Ejemplos:
“abc{4}” coincide con “abcccc“, pero no con “abc” ni “abcc“, etc…
“abc{1,3}” coincide con “abc“, “abcc“, “abccc“, pero no con “abcccc”

Si un parámetro queda vacío, significa “un número indeterminado“. Por ejemplo: “x{5,}” significa que la x ha de repetirse 5 veces, o más.

Rangos

Los corchetes [] incluidos en un patrón permiten especificar el rango de caracteres válidos a comparar. Basta que exista cualquiera de ellos para que se de la condición. Dentro de ellos pondremos cualquier cantidad de caracteres, uno a continuación del otro; o un rango del abecedario o de los números enteros del 0 al 9.

Ejemplos:
“c[ao]sa” coincide con “casa” y con “cosa”
“[a-f]” coincide con todos los caracteres alfabéticos de la “a” a la “f”
“[0-9][2-6][ANR]” coincide con “12A“, “35N“, “84R“, etc..
pero no con “21A“, ni “33L“, ni “3A“, etc…

Dentro de los corchetes, hay que tener en cuenta que el símbolo ^ ya no significa inicio, sinó que es un negador, es decir: “[^a-Z]” coincidirá con cualquier texto que NO tenga ningún caracter alfabético (ni minúsculas ni mayúsculas), y “^@ ” coincide con cualquier caracter excepto “@” y “espacio”

Alternancia

Para alternar entre varias opciones, usaremos el símbolo | (barra vertical, en los teclados suele ser “Alt Gr + 1″). Con este mecanismo haremos un disyuntor, que nos permitirá dar varias opciones. Si una de ellas coincide, el patrón será cierto.

Ejemplos:
“aleman(ia|es)” coincide con “alemania” y con “alemanes”
“(norte|sur|este|oeste)” coincide con cualquiera de los puntos cardinales.

Agrupadores

Los paréntesis nos sirven para agrupar un subconjunto. Como hemos visto en el ejemplo anterior, nos es útil para definir la alternancia, pero agrupar un subpatrón nos permite trabajar con él como si fuera un único elemento.

Ejemplos:
“(abc)+” coincide con “abc“, “abcabc“, “abcabcabc“, etc
“ca(sca)?da” coincide con “cascada” y con “cada”

Escapar caracteres

Si por ejemplo quisiéramos que en el patrón hubiese un punto, o un símbolo asterisco, sin que se interprete como metacaracter, tendremos que “escaparlo”. Esto se hace poniendo una barra invertida justo antes: \. o \*
Esto puede hacerse con cualquier caracter que quieras introducir de forma literal, y no interpretada.

Las funciones

Una vez tenemos clara la sintaxis, nos pondremos manos a la obra con el código. En este caso usaremos las funciones que nos proporciona PHP, aúnque la sintaxis es común a muchos lenguajes.

Funciones tipo POSIX

Existen seis funciones de este tipo, que son las siguientes:

• ereg(). Devuelve true si se cumple el patrón, o false si no se cumple.
• eregi(). Igual que ereg(), pero sin distinguir mayúsculas y minúsculas
• ereg_replace(). Usando la potencia de las expresiones regulares, permite modificar una cadena de texto.
• eregi_replace(). Igual que la anterior, sin distinguir minúsculas y mayúsculas.
• split(). Divide una cadena en un array, según un patrón REGEX. Hace la misma tarea que la función explode, pero indicando una expresión regular como separador.
• spliti(). Igual que el anterior, sin diferenciar minúscula y mayúscula.

Funciones tipo PCRE

Estas funciones son un poco más complejas, y consecuentemente más potentes. La diferencia más significativa en cuanto a sintaxis es que el patrón deberá estar delimitado por dos caracteres. Usualmente se usan barras ( / ), aunque podemos usar cualquier símbolo, como ( # ), sobretodo en un patrón que contenga barras. Otra diferencia importante son los modificadores.

• preg_match(). Chequea el patrón en una cadena alfanumérica. Devuelve true si coincide, o false en caso contrario. Además captura las coincidencias en un array.
• preg_match_all(). Igual que preg_match, pero almacenando todas las subcadenas que coincidan con el patrón (no sólo una como es el caso de preg_match)
• preg_replace(). Nos permite reemplazar textos mediante expresiones regulares. Los argumentos pueden ser arrays, con lo que se realiza más de una sustitución con una sola función.
• preg_split(). Separa la cadena dada mediante una expresión regular.
• preg_grep(). Busca el patrón dentro de un array, y devuelve otro array con las ocurrencias.

Ejemplos prácticos

A continuación muestro algunos ejemplos de uso de estas funciones:

Uso sencillo de preg_match.

Uso de la referencia hacia atrás en preg_match_all

Simple comprobación con el patrón de IP

Referencias

• Expresiones Regulares (Ignside), lectura muy recomendada
• Funcionamiento interno de los RegEx (Inglés), si tienes curiosidad y entiendes inglés.
• Librería de expresiones regulares ya hechas, para no reinventar la rueda.
• Referencia sintaxis de funciones PCRE del manual oficial.
• Referencia Modificadores del manual oficial.
• Expresión Regular en Wikipedia
• Tutorial de Expresiones Regulares en Wikilearning

Lo primero de todo, crearemos un par de funciones.

La función menor() devuelve el menor de los dos números pasados como parámetros. La función mayor() hará lo contrario.

La forma clásica

La forma más típica de ejecutar una función, es símplemente escribiendo su nombre, seguido de unos paréntesis, con los parámetros separados por comas. De esta forma, al escribir:

Nos devolvería el siguiente texto:

Entre 12 y 5, el menor es 5

Con la función call_user_func(_array)

Las función call_user_func nos permite ejecutar una función, dado el nombre en cadena alfanumérica.

La diferencia con call_user_fucn_array, es que en esta última los parámetros son pasados en un array.

Dependiendo de la variable GET comparación, se ejecutará una función u otra. La alternativa con call_user_func_array es:

Directamente de una cadena

Esta es una forma sorprendente de ejecutar funciones. Parte de lo mismo que la anterior, el nombre de la función en una variable alfanumérica. Pero en este caso puede ser tratada directamente como función, así por la cara.

Esta libertad recuerda a JavaScript, donde pueden igualarse variables a funciones de forma muy sencilla.

Conocéis alguna forma más? Os parece útil disponer de diferentes métodos para llamar a funciones?

Me gustaría transcribir y traducir este interesante recurso a continuación para todos vosotros:

Doctype declarado correctamente

Parece un galimatías, pero los DOCTYPE son importantes. No sólo hace que tu código sea válido, sinó que dicen a tu navegador detalles de cómo debe renderizar tu página.

Encabezado ordenado

Que conste de título, conjunto de caracteres, enlace a hojas de estilo (incluida la de impresión!) y scripts (enlazados, que NO incluidos).
Los archivos externos (CSS o JavaScript) en carpetas propias (css/ y script/ por ejemplo).

ID para Body

El ponerle una id a la etiqueta body te permite crear propiedades CSS específicas para una página en concreto. Por ejemplo diferenciar los h2 del homepage, con un código similar a #home h2 {}, y así no afectar a ningún otro h2.

Div principal para todo el contenido de la página

El poner un div que contenga todo el contenido nos permite mantener el control del diseño sobre la página en su conjunto. Por ejemplo podemos determinar un ancho fijo de toda la página.

Menú limpio semánticamente

Un menú debe tener este aspecto:

Incluir el contenido repetido

Mucho contenido es común entre página y página. Menús, barras laterales, piés de página, etc. Este tipo de contenido debería ser incluido dinámicamente. Esto puede conseguirse con una simple instrucción de PHP.

Contenido importante primero

Es apropiado que incluyas tus contenidos más importantes al principio, como noticias, eventos, que pueden ser listadas al principio del HTML. Si tu barra lateral es sólo para navegación o cosas menos relevantes incluso, deberías ponerla al final del HTML.

Código tabulado

Si cada sección de código se presenta tabulada como un conjunto, la estructura del código queda mucho más comprensible. Cuando un código está completamente alineado a la izquierda es prácticamente imposible de comprender.

Sin estilo!

Tu HTML debe estar completamente orientado a la estructura y al contenido, no al estilo! Deja que el CSS se encargue de todo lo relacionado con el estilo, y por supuesto olvida la etiqueta font

Contenido, contenido, contenido

Aquí has de insertar todo tu contenido, así que manos a la obra. No olvides separar los distintos párrafos con la etiqueta p. Utiliza listas dónde sea apropiado. Utiliza códigos para los símbolos (& copy; & iacute; etc). No abuses de los hr para el salto de línea.

Etiquetas de cierre

Empezaste con fuerza, ahora acaba con fuerza. No seas perezos@ y cierra todas las etiquetas que lo requieran, incluso si la página se renderiza bien sin ellas!

Instanciación

El primer paso para usar esta librería es siempre el mismo, independientemente de lo que queramos hacer:

Como se observa, hemos incluido el fichero de la librería, y hemos instanciado la clase PclZip, con un nombre de archivo.
Este nombre de archivo puede ser uno existente, que queremos manipular, o uno inexistente, que queremos crear a continuación. Será más adelante cuando le indicamos lo que queremos hacer con archivo.zip (leer o escribir), hasta aquí únicamente lo hemos referenciado.

Lectura

En caso de que el archivo Zip sí exista, y queramos explorar su contenido, tenemos varias alternativas.

La primera es usar el método listContent(), el cual nos devuelve una lista de propiedades de los archivos y carpetas contenidos en el archivo zip.

Lo cual nos devuelve algo como esto:

File 0 / [filename] = data/file1.txt
Archivo 0 / [stored_filename] = data/file1.txt
Archivo 0 / [size] = 53
Archivo 0 / [compressed_size] = 36
Archivo 0 / [mtime] = 1010440428
Archivo 0 / [comment] =
Archivo 0 / [folder] = 0
Archivo 0 / [index] = 0
Archivo 0 / [status] = ok

Archivo 1 / [filename] = data/file2.txt
Archivo 1 / [stored_filename] = data/file2.txt
Archivo 1 / [size] = 54
Archivo 1 / [compressed_size] = 53
Archivo 1 / [mtime] = 1011197724
Archivo 1 / [comment] =
Archivo 1 / [folder] = 0
Archivo 1 / [index] = 1
Archivo 1 / [status] = ok

Si nos interesa más extraer el contenido descomprimiendo archivos y carpetas, tendremos que usar el método extract(), el cual nos brinda muchas opciones. Veamos un ejemplo:

En este ejemplo todos los archivos se extraen en la carpeta “data”. Todos los archivos cuya ruta empiece por “install/release”, serán extraidos directamente en “data”, y no en “data/install/release”.

Existen muchas opciones con las que indicar exactamente lo que queremos que haga al extraer nuestros archivos. Puedes consultarlas en la documentación.

Escritura

Si tu intención es crear un archivo zip “al vuelo”, esta librería también va a yudarte, gracias al método create(), que creará un archivo zip con los archivos y carpetas que le indiquemos. Si le indicamos una carpeta, automáticamente incluirá todo el contenido en su interior. Además mantendrá la estructura de carpetas intacta dentro del archivo zip que creemos.

En el anterior código los archivos “file.txt” y “text.txt”, que se encuentran en la carpeta “data”, en el archivo zip creado se encontrarán en la carpeta “install”.

La librería nos permite manipular archivos zip con toda comodidad, usando los métodos add(), delete() o merge() , que añade archivos, elimina archivos, y fusiona archivos, respectivamente.

Ejemplo de añadir archivos:

Como podéis ver, se trata de una librería completa y funcional. Recomiendo su uso frente a otras alternativas.

Si quieres ver un ejemplo de su uso, puedes echar un vistazo al explorador de archivos zip que he incorporado en Codis.

Descargar pclzip-2-6.zip

Pero ello te plantea dos posibles opciones: la primera consiste en abandonar todo lo que sabes y dedicarte a ver cómo crece tu jardín (que probablemente ni tengas) porque en Windows nunca serás ‘lo más cool’ ni lo más ‘profesional’ que querrías ser.

La segunda opción es pasarte a GNU/Linux. Aprender a desarrollar en una verdadera plataforma de desarrollo, aprender a -trabajar- en un escritorio profesional de verdad, en un ordenador que realmente computa información de manera efectiva. Seguro que al final, con insistencia, alguna de estas cualidades de GNU/Linux se te contagian y puedes completar tu formación de webmaster/administrador.

Para comenzar dividiremos nuestro cambio de sistema en dos partes: La primera y más importante será la referente al software y, la segunda será la referente a la ‘adaptación del entorno de escritorio a nuestro gusto’, es decir, la personalización del escritorio, con enlaces a las aplicaciones que más vamos a usar, uso de los diferentes escritorios, etc…

Una parte muy importante y necesaria para un buen webmaster es un ‘servidor de pruebas’ en donde subiremos nuestros scripts web (html, php, etc…) antes de subirlos al hosting. Hablo de software pero en realidad debería hablar de hardware, el problema viene cuando nosotros somos pobres trabajadores explotados por la burguesía y no podemos permitirnos tener una sala especial para montar nuestro servidor para hacer pruebas así que nos limitaremos a usar nuestro propio ordenador. Por lo tanto lo primero que deberemos hacer es elegir una distribución – que en mi caso es Ubuntu GNU/Linux 7.10 Gutsy Gibbon, liberada el reciente 18 de Octubre, aunque puede servir cualquier distribución reciente de Linux (Fedora, Mandriva, OpenSuse, …). Obviamente, nuestro entorno de trabajo por defecto será Gnome (mi favorito… y para mi gusto el mejor, aunque siempre podéis probar con KDE o con Xfce entre otros montones).

Como decía, necesitamos un servidor de pruebas y lo vamos a localizar en nuestro propio ordenador. Es decir, que la ‘dirección’ interna de nuestro servidor será localhost o 127.0.0.1. Tenemos varias formas para instalar lo que necesitamos, pero la más rápida y cómoda (creo yo) es mediante un “pack” que incluya todo lo necesario: (Apache, MySQL, PHP & PEAR, Perl, ProFTPD, phpMyAdmin, OpenSSL, GD, Freetype2, libjpeg, libpng, gdbm, zlib, expat, Sablotron, libxml, Ming, Webalizer, pdf class, ncurses, mod_perl, FreeTDS, gettext, mcrypt, mhash, eAccelerator, SQLite e IMAP C-Client). Podremos tener todo gracias al instalador xampp que podemos descargar desde aquí (lo siento… solo para 32bits). Iré al grano:

Descargamos el paquete (XAMPP Linux 1.6.4) y NO lo descomprimimos.
Nos logueamos como root (debe ser como root, no vale sudo) en la terminal:
$ sudo su
Nos movemos al directorio donde hemos descargado el paquete y ejecutamos tal y cual pone aquí:
# tar xvfz xampp-linux-1.6.4.tar.gz -C /opt
Esperamos un momento ya lo tendremos instalado en /opt/lampp. Ahora ya podemos volver a usar sudo. Ejecutamos xampp**:
# /opt/lampp/lampp start
Para pararlo: (no lo hagáis ahora)
# /opt/lampp/lampp stop

Ahora ya lo tenemos instalado. Procederemos a configurarlo, es una operación realmente simple aunque yo os diré lo básico y que el programa te recuerda que lo hagas si no lo haces.
En un navegador web (Mozilla Firefox, IE (bajo Wine) jeje, …) escribimos http://localhost/ o http://127.0.0.1/ . Si todo ha ido bien, nos saldrá el gestor de configuración de xampp. Nos dirigiremos a Status (izquierda) para ver lo que tenemos activo y desactivado para después irnos a Seguridad (izquierda) y solucionar todos esos fallos de seguridad (contraseñas casi todos). Una vez tengamos esto resuelto, ya tenemos todo lo básico configurado.

Para acceder a los diferentes programas podremos hacerlo por los siguientes enlaces desde el navegador (enlaces disponibles en el gestor de configuración):

• phpmyadmin: http://localhost/phpmyadmin/
• phpSQLiteAdmin: http://localhost/phpsqliteadmin/
• Estadisticas del Servidor Apache del ordenador: http://localhost/webalizer/

Para “ejecutar” aplicaciones web en el servidor (html, php, etc…) debemos tenerlas en /opt/lampp/htdocs/ . Un ejemplo para abrir nuestro index.html(archivo ficticio) sería copiarlo a ese directorio y abrir desde el navegador: file:///opt/lampp/htdocs/index.html/ o, su correspondiente (y el que se va a usar) http://localhost/index.html/ .

Una vez tenemos nuestro servidor completamente funcional, podemos empezar a realizar nuestros scripts para “subirlos” al servidor vía ftp como usuario ‘nobody’ (a no ser que administremos otras ‘cuentas’) (explicaré más adelante sobre clientes ftp). Para escribir necesitamos un programa editor de texto, básico o no, que nos permita guardar (ejem) el documento. Hace tiempo escribí una comparativa que podríamos usar para haceros una idea de los diferentes editores web más usados en Linux (y en wine) y que recomiendo visitar. Según consulto a mi compañero Alex, a él el que más le gusta es gedit (el editor por defecto de Gnome aunque yo prefiero usar con wine el Adobe Dreamweaver 8 (ver post de la comparativa).

Con lo que respecta a los clientes FTP tenemos a nuestra disposición muchos y de varios gustos. Yo personalmente uso gFTP y el navegador FTP nautilus de Gnome (integrado con el navegador de ficheros nautilus).

Creo que ese es todo el software que nosotros necesitamos, en principio, para ser un buen administrador. Además, lógicamente, necesitaremos ciertos conocimientos (no necesariamente avanzados) de la consola (el entorno gráfico es bastante intuitivo), pero siempre puedes preguntar en internet o en este mismo blog por cualquier consulta que tengas.

Troubleshooting….

Algunos de los programas extra que todo webmaster debe tener en cuenta son los que ayuden a crear contenido de calidad. Obviando que se debe usar Firefox (la versión de Windows instala en Wine también, así como IE4Linux) y también sería buena idea tener instalado Opera en Linux para comprobar compatibilidad (en gutsy está en los repositorios comerciales de Canonical). Además, por supuesto un buen diccionario para comprobar ortografía y vocabulario y una gran enciclopedia como es la Wikipedia para consultar y contrastar información.
Tampoco estaría de más hacer uso de El Gimp, el editor gráfico profesional de Linux (es multiplataforma). Todo diseñador debería usarlo. Y, ya que estamos un buen programa de mensajería instantánea como puede ser Pidgin (MultiRed) o el amsn (para la red MSN, mi favorito…). Y para ayudarnos a pensar de verdad no estaría de más un reproductor de audio (mi favorito es Amarok y solamente os puedo recomendar ese, es el mejor).

Estad atentos a la segunda parte de este documento, vendrá en breve. Mientras tanto ¿por qué no comentas tus consejos para que los incluya?

Parte II

Por eso es muy importante potenciar los comentarios, y darles el valor que se merecen. Voy a explicar una serie de estrategias que pueden hacer que se comente más en tu blog, o por lo menos que sea más agradable hacerlo.

Incitar textualmente

Una buena forma de que te comenten es incitando a tus usuarios a que comenten. Esto puedes hacerlo tanto en los posts como en el propio theme.

En el post:
Una idea es finalizar el post lanzando preguntas al aire, del tipo:

Y vosotros, qué pensáis? Qué versión usaríais? Cuál os parece más (…)?

Intenta implicar a los lectores en tu post. Olvida los formalismos (si tu blog te lo permite) y no dudes en nombrar a usuarios en tus posts, por ejemplo si se ha hecho una aporatción de información.

En el theme:
También puedes llamar la atención a tus usuarios usando determinados textos en tu theme.

Por ejemplo, plantéate cambiar el clásico “Dejar un comentario” por algo más llamativo como “Aporta tu sabiduría” / “Dinos algo” / “Queremos oirte” / “Nos interesa lo que tengas que decir” / etc…

Lo fundamental es que sientan que realmente quieres oirles, que su comentario tiene un valor para el blog.

Cuidar el Diseño

Todos sabemos que el diseño es fundamental para el éxito de un blog. Hay que equilibrar siempre la estética con la usabilidad, y todo esto respetando estándares…

El theme de nuestro blog puede ser decisivo para obtener comentarios, o quedarnos en la más absoluta soledad. Algunas recomendaciones para conseguir comentarios pueden ser:

No ocultarlos
Dejar un comentario ha de ser la tarea más fácil del mundo para el usuario. No tiene que encontrar trabas, y cuantos menos campos rellene mejor. Lo fundamental es que los comentarios sean como una prolongación del post, la reacción natural a haber acabado de leer.

Facilitar lectura de comentarios
Los usuarios van a gastar parte de su tiempo en escribir un texto en tu blog, lo justo es que su mensaje quede claro, visible, y bien colocado. Una buena referencia al comentarista, con su web bien accesible, una fuente y unos colores que hagan fácil la lectura, y evitar recargar mucho esta zona.

Distinguir lo uno de lo otro
Algo que facilita mucho la lectura es el sistema de “uno sí uno no” en la lista de comentarios. Es decir, distinguir los comentarios pares de los impares.

Así conseguimos facilitar la lectura, y además dar un toque un poco más personal a cada comentario. No es lo mismo que tu comentario sea igual que el resto, a que se diferencie de sus adyacentes.

También resulta interesante diferenciar pingbacks y trackbacks, dándoles un poco menos de importancia (pero manteniéndolos presentes)

Para hacer estas dos últimas cosas en wordpress, aquí tienes un script para el archivo comments.php del theme que estés usando. (Si no conoces algo de PHP y HTML, haz copias de seguridad, no vaya a ser que montes un estropicio)

Ahora puedes dar el estilo que quieras en el archivo style.css a las clases .ping (para pingbacks y trackbacks), .odd (impares) y .even (pares).

Hasta el último detalle

Si quieres conseguir más posibilidades de fomentar comentarios, puedes recurrir por último a plugins.

Hay multitud de plugins orientados a los comentarios de nuestro blog. Yo destacaré dos, con enlaces para wordpress, pero puedes buscar tú mismo los que más te convenzan, y se adapten a tu blog.

Últimos comentarios
Con este plugin puedes motivar a tus comentaristas, porque verán su texto expuesto en lugares muy visibles de la web. También puede servir para enganchar a un lector ocasional a algun hilo interesante que se haya generado en los comentarios.
[Descargar plugin]

Premiar por comentarios
Otra forma de motivar a los usuarios a comentar, es premiándoles por sus comentarios. Para esto existe el plugin RPG WordPress creado por nuestro amigo Miquel Camps. Con este plugin puedes recompensar a tus usuarios cada x comentarios, con enlaces en un lugar importante de tu blog, a lo que el usuario en cuestión decida. Una buena idea para crear comunidad.
[Descargar plugin]

Por supuesto que la mejor forma de que se comente en tu blog es crear un contenido de calidad, implicarte diariamente, conseguir enlaces, etc.

Por descontado, si este artículo os ha gustado, no dudéis en comentarlo!

Nuestra base de datos de preguntas y respuestas será un simple array. Además usaremos las sesiones, para verificar la respuesta en el archivo de chequeo.

El array de preguntas y respuestas contendrá una pregunta clara y legible para los humanos, y una respuesta a modo de expresión regular, para considerar las variantes de respuesta. Por ejemplo:

Pregunta: ¿Cuántos dedos tiene una mano?
Respuesta: (5|cinco) // acepta mayúsculas y minúsculas

Una vez declarado esto, seleccionaremos una pregunta al azar, con la función rand(). La parte de pregunta la imprimiremos por pantalla en el lugar adecuado junto a un campo de texto.

Lo siguiente es guardar la expresión regular que contiene la respuesta en una variable de sesión, para que quede accesible en el chequeo a continuación.

Por último, en el archivo de chequeo usaremos la función de que evalua expresiones regulares eregi(), sometiendo la respuesta del campo de texto a la expresión regular almacenada en sesión.

El concepto ya está definido, y es tan simple como eso. Ahora plasmémoslo en esas bonitas letras de colores que son el código:

En el archivo del formulario:

Y en el archivo de chequeo:

Inconvenientes:

• El idioma importa (a no ser que sean preguntas aritmeticas)
• Puedes toparte con una mente brillante, que le de por contestarte lo que no es
• …ninguno más, que yo sepa… pregúntale a un robot.

Podéis probar su funcionamiento en directo desde este ejemplo.

Descargar ejemplo:

Pues para los usuarios de Gimp ya tenemos a nuestra disposición el algoritmo en forma de Plugin para poder usarlo a nuestro antojo. Aquí tenéis algunos binarios para instalar en Ubuntu así como el código fuente para compilar en nuestra distribución de Linux favorita (./configure && make && sudo make install o sudo checkinstall).

El manejo es muy fácil. Una vez instalado el plugin abrimos en Gimp nuestra imagen que queremos retocar y nos vamos a la pestaña “Capas/Liquid Rescale”. En la nueva ventana simplemente ponemos la nueva resolución (podemos mirar en Advanced Options que hay más opciones, pero el “modo” que mejor me ha ido ha sido el que viene por defecto [transversal Absolute Value], así que mejor no tocar nada excepto si queremos probar los resultados) y le damos a “Aceptar”. Si la imagen es muy grande…. tardará un rato bastante (un minuto en hacer todos los procesos…), pero si es, por ejemplo, 1024 de anchura no creo que haya que esperar mucho tampoco.

Funciona bastante bien, un poco lento, pero cumple con su trabajo. Aunque no es perfecto el acabado está muy conseguido y mantiene prácticamente iguales las formas y figuras. Un ejemplo:

Original:

En esta siguiente tenemos la imagen de arriba retocada. La primera es escalada tal cual; la segunda usando el plugin Liquid Rescale con las mismas medidas que la 1ª y con las opciones predefinidas; la tercera se ha hecho usando capas (creadas previamente y seleccionando que es lo que queremos que se escale y que es lo que “nos daría igual”, todo gestionado desde el plugin).

En definitiva, una verdadera maravilla.

Añadido a las 18:33 por Alex Barros
Al respecto también hay una web que aplica este filtro de forma online, aúnque con bastante lentitud, y problemas con archivos grandes (http://rsizr.com/)

#1: Float y Clear
Cuando queremos desplazar un elemento a la izquierda o a la derecha, solemos usar la propiedad float, que saca al elemento del flujo de contenido y lo desplaza a donde queramos.

El problema viene cuando este elemento tiene un elemento padre (que lo contiene) y queremos que lo envuelva.

Esto es lo que yo quiero:

Y esto lo que obtengo:

(He de aclarar que no se trata de ningún error, sinó que el estándar CSS especifica su comportamiento de esta forma)

La solución tradicional es incluir un tercer div a continuación de los dos flotantes, y aplicarle la propiedad clear:both, pero esto nos hace meter un div sin razón de ser, y nos hace la página un poco menos semántica.

La solución que he encontrado ahora, mucho mejor, es aplicar al elemento padre la propiedad overflow:hidden. De esta forma evitamos tener que meter elementos y toquetear el flujo (que a veces trae problemas) y obtenemos el resultado deseado.

[para profundizar un poco más en este tema...]

#2: El marquito de los enlaces
Otro problema que encontraba, aúnque menos grave, era el marquito que aparece en los enlaces cuando pulsas en ellos, símplemente me parece antiestético.

Clica aquí para verlo

Esta propiedad es outline, y podemos bloquearla simplemente introduciendo en nuestra hoja de estilos el siguiente código:

[para profundizar un poco más en este tema...]

Ambas soluciones magistrales las he encontrado en el blog PlanSeldon.com.