Esta nueva barra se puede personalizar. Es un lugar perfecto para añadir elementos, ahora llamados nodos (nodes), que pueden contener otros nodos agrupados en submenús, como enlaces personalizados, accesos directos, etc., aunque para personalizarla necesitaremos editar algo de código.

En principio no se recomienda eliminarla por completo (ver nota ampliada más abajo). Es mejor ajustarla a nuestras necesidades a través de reglas CSS y enlaces personalizados.

Vamos a ver algunos ejemplos para conseguirlo:

Cómo eliminar elementos de la barra de herramientas

Para desactivar alguno de los elementos o nodos que WordPress 3.3 instala por defecto tenemos que crear una nueva función especificando qué enlaces queremos suprimir. El código, como siempre, lo podemos añadir al archivo functions.php de nuestro tema activo o añadirlo a un plugin que nos ayude a ajustar esta funcionalidad.

Utilizando el código del siguiente ejemplo tal como está, nos quedará una barra totalmente vacía (a excepción del nombre de la web). Para personalizar los elementos que queremos conservar basta comentar (añadir “//”) delante de las lineas que nos interesen:

// Eliminamos elementos del nuevo toolbar en WP 3.3
function eliminar_nodos_admin_bar() {
	global $wp_admin_bar;
	$wp_admin_bar->remove_menu('wp-logo'); // Elimina el logo de WordPress (desaparece también todo el submenú)
	$wp_admin_bar->remove_menu('about'); // Elimina el enlace "Sobre WordPress"
	$wp_admin_bar->remove_menu('wporg'); // Elimina el enlace a wordpress.org
	$wp_admin_bar->remove_menu('documentation'); // Elimina el enlace a la documentación oficial (Codex)
	$wp_admin_bar->remove_menu('support-forums'); // Elimina el enlace a los foros de ayuda
	$wp_admin_bar->remove_menu('feedback'); // Elimina el enlace "Sugerencias"
	$wp_admin_bar->remove_menu('view-site'); // Elimina el submenú que aparece al pasar el cursor sobre el nombre de la web
	$wp_admin_bar->remove_menu('comments'); // Elimina el acceso directo a los comentarios
	$wp_admin_bar->remove_menu('updates'); // Elimina el icono de notificación de actualizaciones
	$wp_admin_bar->remove_menu('new-content'); // Elimina el menú para generar nuevo contenido
	$wp_admin_bar->remove_menu('my-account'); // Elimina el acceso a la cuenta de usuario y al enlace para desconectarse
	}
add_action('wp_before_admin_bar_render', 'eliminar_nodos_admin_bar');

Cómo cambiar el aspecto visual de la barra

Podemos adaptar el backend del sistema a nuestro gusto o a los colores de la marca del cliente, por ejemplo. Con esta función podremos cambiar el logo del sistema en WordPress 3.3, cambiar el color de fondo de la barra, el color de los elementos y cualquier otro detalle al que se pueda acceder mediante CSS.

Las funciones que existían hasta ahora para eliminar o cambiar el logo de WordPress no sirven en esta nueva versión. El logo tiene clases CSS nuevas y los bloques HTML donde se inserta también han cambiado. En el siguiente ejemplo tendremos que cambiar la ruta en la linea 3 por la correspondiente en cada caso:

// Editamos el aspecto visual de la barra
function personalizar_aspecto_toolbar() {
	$adminlogo = '/images/adminlogo.png'; // Especificar ruta (tamaño = 20 x 20 px)
	echo '<style>
		#wpadminbar { background: #1B3E6E !important; }
		#wp-admin-bar-wp-logo > .ab-item .ab-icon {
			background-image: url('.get_bloginfo('template_directory').$adminlogo.') !important;
			background-position: 0 0;
			}
		  </style>'; }
add_action('admin_head', 'personalizar_aspecto_toolbar');

Cómo añadir un enlace simple a la barra de administación

Los ejemplos que he visto en otras páginas utilizan el método “add menu“, sin embargo en la documentación de WordPress se recomienda utilizar la función add_node() para añadir elementos a la barra de herramientas:

// Añadir un enlace simple con la función "add_node"
function link_simple_toolbar($wp_admin_bar) {
	$args = array(
		'id' => 'mi-link', // Identificador único
		'title' => 'Mi nuevo enlace', // Título del enlace
		'href' => 'http://miweb.com/mi-pagina/', // URL de destino
		'meta' => array('class' => 'mi-clase') // Clase del elemento
		);
	$wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'link_simple_toolbar', 100); // 25, si queremos que salga el primero

Cómo añadir elementos agrupados a la barra de administación

Para incorporar nuevos elementos a esta barra tendremos que crear otra función especificando los títulos y enlaces que queremos añadir. Podemos crear un submenú con diferentes opciones anidadas e incluso ampliarlo hasta donde queramos.

Lo importante en este caso es que los elementos “hijos” hagan referencia al identificador del elemento superior (parent):

// Añadimos un enlace y un submenú con dos opciones
function link_simple_toolbar($wp_admin_bar) {
	$link = array(
		'id' => 'mi-link', // Identificador único
		'title' => 'Nuevo enlace', // Título del enlace
		'href' => '#', // URL de destino (si no queremos que apunte a ningún sitio, podemos dejarlo tal cual)
		'meta' => array('class' => 'mi-clase') // Clase del elemento
		);
	$sublink1 = array(
		'id'    => 'mi-sublink1', // Identificador único
		'parent' => 'mi-link', // Identificador del elemento superior
		'title' => 'Nuevo sublink 1', // Título del enlace
		'href'  => 'http://www.google.es/', // URL de destino
		'meta'  => array(
			'title' => __('Titulo para este link'), // Atributo "title" del enlace
			'target' => '_blank', // Destino ("_blank" abrirá el enlace en una página o pestaña nueva)
			'class' => 'mi_link_item_class' // Clase del elemento
			)
		);
	$sublink2 = array(
		'id'    => 'mi-sublink2',
		'parent' => 'mi-link', // Identificador del elemento superior
		'title' => 'Nuevo sublink 2',
		'href'  => 'http://www.google.es/',
		'meta'  => array(
			'title' => __('Titulo para este link'),
			'target' => '_blank',
			'class' => 'mi_link_item_class'
			)
		);
	$wp_admin_bar->add_node($link);
	$wp_admin_bar->add_node($sublink1);
	$wp_admin_bar->add_node($sublink2);
}
add_action('admin_bar_menu', 'link_simple_toolbar', 100); // 25 = En la primera posición (justo después del logo)
?>

¿Es posible desactivar la barra por completo?

No sin importantes esfuerzos. Algunos filtros como “show_admin_bar” ya no sirven en WordPress 3.3 para desactivar la barra. A diferencia de la anterior “Admin bar”, ahora no se incluye una manera para eliminarla en el backend del sistema (solo en el frontend, a través de las opciones de cada usuario, ya que ahí no es imprescindible). Tampoco funcionarán por tanto algunos plugins que ocultaban esta barra.

La justificación de los desarrolladores para no permitir la desactivación de este elemento es que ahora se combina con la cabecera (header) del sistema e incluye funciones importantes para el usario, como la posibilidad de cerrar sesión o documentación de utilidad para el usuario, por lo que se recomienda no eliminarla completamente.

Aun así, hay plugins que ya permiten eliminar la barra por completo:

• Hide Toolbar Plugin
• WordPress Admin Bar Improved

Creamos un plugin para tenerlo todo a mano

Para no cargar nuestro archivo functions.php, en este caso sería buena idea crear un plugin para meter todos estos fragmentos de código y facilitar así la edición. Además, al cambiar de un tema a otro, nuestros ajustes permanecerán intactos.

En realidad, crear un plugin básico es muy fácil, aunque en este caso se podría completar, por ejemplo, con una página de opciones para editar fácilmente los detalles.

Este plugin no pretende ser una solución de instalar y listo. Es necesario adaptarlo a las necesidades de cada uno, pero es muy fácil hacer modificaciones siguiendo las instrucciones y comentarios incluidos.

Personalizando un poco el código del plugin podremos:

• Eliminar algunos elementos por defecto (solo hay que editar los comentarios para activar y desactivar cada uno)
• Cambiar el color de fondo de la barra (editar para modificar el color)
• Cambiar el logo de WordPress por la imagen que especifiquemos
• Añadir enlaces nuevos con o sin submenús (editar para configurar los detalles)

Descargar plugin: Toolbar personalizado (ZIP, 2 KB)

Más información y artículos relacionados

• Goodbye Admin Bar, Hello Toolbar (Digging into WordPress)
• How to Customize the WordPress 3.3 Toolbar (Sitepoint)
• Personaliza el área de administración de WordPress (Emenia.es)
• Add Menu Links to the New WordPress 3.3 Tool Bar (Pippinsplugins.com)

Se trata de aplicaciones web que funcionan directamente en el navegador y que nos permiten, por una parte, generar código sin la necesidad de crear y guardar archivos ni tener que subirlos a un servidor, y por otra, compartir estos códigos y colaborar fácilmente con otras personas.

Aunque no sustituyen a los editores de código tradicionales (Coda, Expresso, Notepad++, TextMate, Sublime Text, Dreamweaver, etc.), estas herramientas son cada vez más indispensables porque facilitan enormemente algunas tareas. Por ejemplo:

• Probar cierta funcionalidad en las diferentes versiones de una librería de JavaScript sin tener que cargar todas las versiones ni enlazar con librerías externas
• Enseñar a alguien cómo conseguir hacer algo sin tener que enviarle los archivos
• Divertirnos probando cosas nuevas sin miedo a romper nada
• Utilizarlo como herramienta educativa en cursos y clases presenciales
• Experimentar y ver el resultado inmediatamente mientras vamos escribiendo
• Buscar errores de código de manera colaborativa
• Pedir a alguien que nos ayude con algún problema concreto que no sabemos resolver
• Escribir CSS directamente en Less o Sass

Son muy fáciles de usar. De hecho, sólo hay que visitar la web de la herramienta que más nos convenza y ponerse a escribir. No tienen publicidad ni nada que distraiga. Además, como normalmente incluyen coloreado de código y autotabulación, es fácil mantener el código organizado.

Como puntos negativos se me ocurren dos:

• No autocompletan el código mientras escribimos, con lo que es más lento que utilizar un editor tradicional
• No se guarda automáticamente una copia por si algo falla (al estilo de WordPress, por ejemplo), por lo que si trabajamos con grandes fragmentos de código puede ser algo a tener en cuenta

En definitiva, básicamente no ofrecen nada que no se puediera hacer antes, aunque sí reducen considerablemente el tiempo necesario para conseguirlo y facilitan mucho la tarea.

Vamos a ver cinco de estas herramientas: Tinkerbin, jsFiddle, CSS Desk, JS Bin y Dabblet.

Tinkerbin

Con Tinkerbin podemos trabajar y combinar HTML, JavaScript y CSS cómodamente en pestañas. Es el editor que más opciones ofrece a nivel de preprocesamiento de código. Permite utilizar tanto HTML como HAML, Sass (con Compass), Less y CofeeScript. Cuenta incluso con bastantes atajos de teclado para, por ejemplo, cambiar de pestaña y de lenguaje, ver el código, etc.

Enlace directo: http://tinkerbin.com/

CSSDesk

CSS Desk se centra en ofrecernos un entorno online para HTML y CSS (no incluye Javascript ni librerías externas). Tiene una interfaz muy cuidada con la que podemos incluso cambiar el fondo de la herramienta y añadir retículas en columnas. CSS Desk es ideal para probar código CSS y ver el resultado en tiempo real.

Enlace directo: http://cssdesk.com/

JSFiddle

jsFiddle es el editor más completo en varios niveles: la documentación que ofrece y la cantidad de librerías externas disponibles (Mootols, jQuery, Prototype, YUI, Dojo, Raphael…). Además de guardar y ofrecernos un enlace corto, jsFiddle incluye formateo y revisión del código con JSLint y TidyUp, cambio de DTD (xHTML, HTML4, HTML5…), inclusión de recursos externos (hojas de estilo guardadas en nuestro servidor, por ejemplo) e incluso algunos ejemplos prácticos para ver la herramienta en acción.

Enlace directo: http://jsfiddle.net/

JSBin

Creado por Remy Sharp y de código libre, JS Bin permite incrustar librerías jQuery (en diferentes versiones) e incluso jQuery UI o jQuery Mobile. JS Bin es una aplicación web diseñada para ayudarnos a editar JavaScript y CSS probando fragmentos de código en un contexto determinado y revisarlo después de manera colaborativa. Incluye amplia documentación a través de tutoriales en vídeo creados por el autor.

Enlace directo: http://jsbin.com/

Dabblet

Dabblet es un nuevo editor online interactivo creado por Lea Verou y enfocado a la escritura de CSS y HTML. Muy útil para hacer pruebas y experimentos en CSS3, por ejemplo. Cuenta con actualización automática del código y muy buenos indicadores visuales para las reglas que estamos aplicando: color, ancho, degradados…(recomiendo ver el vídeo del enlace anterior). Además, con Dabblet es posible guardar las muestras directamente en una cuenta de GitHub.

Enlace directo: http://dabblet.com/

Aquí van, como referencia y sin ningún orden en particular, algunos enlaces útiles relacionados con el diseño y desarrollo de páginas web, para tener a mano y consultar.

La mayoría de estos enlaces los he ido publicando en Twitter, pero he pensado que estaría bien ir recopilándolos para poder acceder a ellos más fácilmente.

HTML5 for Web Designers

En 2010 A Book Apart publicó HTML5 For Web Designers, un libro conciso y fácil de leer especialmente interesante para entender la evolución de este lenguaje y conocer las posibilidades de la última versión, particularmente desde el punto de vista del diseñador web, ya que incluye consejos de utilización, novedades a nivel semántico, nuevas etiquetas y elementos, mejoras en formularios, etc.

Ahora el libro está disponible para leer online de manera totalmente gratuita:

http://html5forwebdesigners.com/

WhatFont: inspecciona fácilmente las tipografías de una web

WhatFont es una extensión para Google Chrome gracias a la cual podemos averiguar fácil y rápidamente las tipografías que vemos en cualquier página web, y encontrar información relacionada: tamaño, interlineado, color, etc.

Es mucho más rápido que utilizar Firebug o el inspector de Webkit. Además, detecta tanto fuentes comunes como servicios externos como Typekit o Google Web Fonts:

http://chengyinliu.com/whatfont.html

pShadow: sombras con jQuery

Con esta extensión de jQuery podemos añadir sombras a cualquier elemento HTML. Funciona en los navegadores principales y se puede usar libremente.

Como se ve en la página de demostración, las sombras que consigue pShadow son bastante convincentes, aunque lo que hace esta extensión es añadir una imagen de la sombra en PNG en la parte inferior del elemento y posicionarla mediante Javascript, no crear la sombra en sí:

http://www.matthewdawkins.co.uk/2011/10/pshadow-a-jquery-extension-for-gorgeous-drop-shadows/

Cursos de programación online con Codecademy

Codecademy es un servicio de aprendizaje online. A través de su web nos ofrece cursos de programación con los que podemos aprender a programar de forma gratuita, interactiva y entretenida directamente desde el navegador.

Hace unos días publiqué un pequeño artículo sobre Codecademy, por lo interesante que me pareció:

http://www.danielnabil.com/blog/cursos-programacion-online-codecademy/

Herramientas SEO gratuitas de Google

Un estudio de las principales herramientas y aplicaciones gratuitas enfocadas al posicionamiento en buscadores que Google pone a nuestra disposición para analizar, monitonizar y optimizar el posicionamiento en buscadores de una web.

En esta lista se habla de Google Analytics, Alerts, Insights for Search, Webmaster Tools, Trends, Adwords Keyword Tool, Website Optimizer y algunas herramientas más:

http://blueblots.com/tools/google-seo-tools/

Animatable, galería de animaciones CSS

Animatable es una guía de transiciones CSS básicas en la que podemos ver, desde una misma página, varios tipos de animaciones y la gran cantidad de posibilidades que ofrece CSS a través de una solo propiedad. Es una buena manera de ver cuales son las propiedades que permiten animaciones.

Lógicamente, estas transiciones solo funcionan en los navegadores en los que está incorporada esta tecnología:

http://leaverou.github.com/animatable/

• Por FTP. Renombra la carpeta “plugins” y crea otra igual, pero vacía.
• O a través de phpMyAdmin. Edita el campo “active_plugins” (en la tabla “wp_options“) y vacía la lista de plugins activos sustituyendo el contenido por: “a:0:{}” (sin las comillas)

Respuesta completa

Es probable que en alguna ocasión necesitemos desactivar todos los plugins (o solo alguno) de nuestra instalación de WordPress pero, por una u otra razón, no podamos acceder al area de administración: páginas en blanco, pérdida de los datos de acceso o cualquier otra razón.

Por ejemplo, podemos encontrarnos con páginas en blanco en el panel de administración cuando algún plugin no es compatible con la versión de WordPress que tenemos instalada (o simplemente porque contiene errores), cuando el archivo “functions.php” del tema activo o “wp-config” están mal formados, etc.

Para comprobar si se trata de un problema con algún plugin instalado, tendremos que desactivarlos todos e ir activándolos de uno en uno, pero como no podemos acceder a la página de gestión, no podemos hacer nada.

Hay dos maneras de solucionarlo: por FTP o accediendo directamente a la base de datos a través de phpMyAdmin (o cualquier otro gestor).

Cómo desactivar plugins por FTP

Si tenemos acceso FTP a los archivos de la instalación, lo único que tenemos que hacer es cambiar el nombre de la carpeta “plugins“ (en wp-content/plugins), por ejemplo llamándola “plugins_original”, y crear una carpeta nueva vacía. Paso a paso sería así:

1. Acceder por FTP a nuestra instalación de WordPress
2. Abrir la carpeta “wp-content“
3. Buscar la carpeta “plugins” y cambiarle el nombre (por ejemplo, “plugins_original”)
4. Crear una carpeta nueva y llamarla “plugins”

Al volver a acceder al panel de administración nos aparecerá un mensaje de error por cada plugin que teníamos activado, pero en este caso, eso es precisamente lo que buscábamos: “El plugin X se ha desactivado debido a un error: El archivo del plugin no existe.”

Si volvermos a renombrar la carpeta original por FTP, los plugins aparecerán como inactivos y podremos volver a activarlos uno a uno, fijándonos bien cual es el que causa problemas.

Cómo desactivar plugins en phpMyAdmin

Lo que vamos a hacer es decirle al sistema que no tenemos ningún plugin activado, es decir, el mismo método que el anterior pero, esta vez, marcándolo directamente en la base de datos. En otras palabras, no vamos a eliminar ninguna extensión, solo a desactivarlas “a distancia”. Para ello tendremos que:

1. Acceder a través de phpMyAdmin a la base de datos de nuestra instalación de WordPress
2. Examinar la tabla “wp_options” (el prefijo “wp_” puede variar según la instalación)
3. Buscar en la columna “option_name” la fila “active_plugins” (puede que no esté en la primera página). O también podemos hacer una consulta SQL directa. Así:

   SELECT * FROM wp_options WHERE option_name = 'active_plugins';

4. Editar esta fila
5. En el campo “option_value” veremos una lista de todos nuestros plugins activos en forma de cadena. Lógicamente la longitud y el contenido variará dependiendo de los que tengamos activados:

   a:2:{i:0;s:19:"akismet/akismet.php";i:1;s:27:"wp-pagenavi/wp-pagenavi.php";}

6. Guardar una copia de esta cadena (por si acaso, para poder volver a activar los plugins más tarde) y sustituirla por:

   a:0:{}

7. Finalmente guardamos los cambios pulsando “Continuar”

Ahora podremos volver a acceder al panel de administración de WordPress. Si el problema de las páginas en blanco continúa, lo más probable es que los archivos “functions.php” o “wp-config” estén mal formados.

Más información (en inglés):
How to deactivate all plugins when not able to access the administrative menus?

Dominios en el mundo. Fuente: Wikipedia

¿Por qué aparecen símbolos “raros” en la barra de direcciones del navegador cuando visitamos sitios web con caracteres internacionales? Por ejemplo, al visitar http://www.radiopollença.net puede aparecer como “http://www.xn--radiopollena-udb.net/”.

Explicación simple

Es normal. Es una medida de seguridad. El navegador te está avisando de que el dominio que acabas de teclear contiene caracteres multilingües.

Cada navegador (Firefox, Chrome, Internet Explorer, Safari, Opera) tiene sus propias reglas al respecto para protegernos de posibles ataques. Algunos permiten configurar esto y otros no. Para saber cómo hacerlo, averigua qué navegador estás utilizando y sigue leyendo.

Explicación completa

Al principio, los nombres de dominio únicamente podían contener caracteres ASCII: letras de la A a la Z, números y algún que otro símbolo, como por ejemplo guiones. Pero a medida que Internet se fue haciendo más popular e internacionalizando, fue necesario incorporar un sistema que permitiera utilizar caracteres de otros idiomas (por ejemplo, “ñ”, “ç”, tildes, diéresis, etc.)

Así, a partir de 2005 y con el fin de dar cabida a estos diferentes caracteres no ASCII propios de algunos idiomas (como el español, el francés o el catalán), los registradores empezaron a permitir lo que se llaman IDNs o Internationalized Domain Names (nombres de dominio internazionalizados).

De todas formas, a pesar del tiempo que hace que se permite el registro de este tipo de dominios, si alguna vez has visitado una web con un IDN de este tipo, es posible que tu navegador lo haya transformado en algo así: “http://www.xn--nombre-xyz.com/”

Lo que hacen los agentes de usuario (los navegadores, por ejemplo) para que esto funcione es transformar los caracteres Unicode (ñ, ç, ü…) del dominio a una cadena que encaje con la forma tradicional, para después enviarla al servidor de nombres de dominio (DNS). Por ejemplo, un dominio con la cedilla (“ç”), muy común en francés y en catalán, como “http://www.pollença.com” se convierte en “http://www.xn--pollena-zxa.com/”. Igualmente, el dominio “http://www.españa.com” se convierte en “http://www.xn--espaa-rta.com/”.

A este formato convertido o codificado se le llama Código púny o Punycode, que no es más que una representación en formato ASCII del nombre original.

En resumen:

• Dominio Unicode: españa.com
• Dominio Punycode: http://www.xn--espaa-rta.com/

Sería perfecto si los navegadores y otros agentes de usuario pudieran mostrar tranquilamente el formato Unicode de todos los dominios. Pero el problema viene cuando, dada la inmensa variedad de idiomas y caracteres, algunos son demasiado parecidos. El caso más popular es la “а” en cirílico, que a simple vista no se diferencia de la “a” latina, o la “O” griega de la “O” latina y la “O” en cirílico.

Aprovechando esto, alguien podría registrar un dominio que a simple vista pareciera otro (es decir, hacer Phishing o Spoofing, engañar a alguien haciéndose pasar por otra persona, entidad o servicio, por ejemplo, un banco). A este tipo de engaños concretamente se los conoce como ataques homógrafos de IDN (IDN homograph attack).

Como no es posible que, para evitar este tipo de prácticas, los agentes registradores puedan controlar todos los dominios que se dan de alta, lo que hacen los navegadores para evitar confusiones y tratar de protegernos de estos ataques homógrafos es, en muchas ocasiones, mostrar al usuario los IDNs en formato Punycode en lugar del original.

Pero no es tan simple. Cada navegador lo hace de manera diferente. Según el caso, podremos configurarlo para que nos muestre un dominio sin codificar, aunque hay navegadores que no lo permiten. Vamos a ver las diferencias.

Gestión de IDNs en los diferentes navegadores

IDNs en Google Chrome

Chrome determina si mostrar IDNs en Punycode o Unicode según el/los idioma/s que el usuario “entiende” (o sea, tiene configurados en su sistema). Es decir, Chrome detecta el idioma del sistema o navegador y, si el dominio contiene caracteres de un idioma que no está en la lista de los configurados por el usuario, muestra el dominio en formato Punycode.

Por ejemplo, si en mi ordenador tengo configurado el español como único idioma del navegador o del sistema (depende de si la plataforma es Windows, Mac Os X o Linux) y escribo en la barra de direcciones de Chrome el dominio “www.españa.com” (que contiene una “ñ”), el navegador me mostrará el dominio en formato Unicode (es decir, tal como se escribe, con la “ñ”). En cambio, si mi idioma es el inglés, por ejemplo, como la letra “ñ” no pertenece a la lista de caracteres permitidos, me mostrará el dominio en formato Punycode, así: “http://www.xn--espaa-rta.com/”

En Windows y Linux los idiomas se configuran desde las opciones del navegador: Opciones > Avanzada > Configuración de idiomas y del corrector ortográfico.

En Mac OS X el idioma del navegador viene determinado por el idioma del sistema. Se puede configurar accediendo a: Aplicaciones > Preferencias del sistema > Idioma y texto > Idioma.

De esta manera, Google Chrome consigue que podamos ver dominios internacionalizados sin codificar, incluso aunque sean .net o .com, que son dominios de primer nivel generales, no específicos de un país.

IDNs en Internet Explorer

Internet Explorer (IE) actúa de manera muy similar a como lo hace Chrome: muestra las URLs sin codificar siempre y cuando todos los caracteres del dominio pertenezcan al idioma configurado por el usuario en las opciones del navegador: Opciones de Internet > General > Idiomas.

IDNs en Firefox

En el caso de Firefox, lo que hace este navegador para decidir si mostrar Unicode o Punycode es analizar la extensión de cada dominio (.com, .net, .es, .cat, etc.) y compararlos con unas listas de caracteres permitidos. De esta manera, un dominio con caracteres internacionales puede verse codificado según el nivel al que pertenezca.

Por ejemplo, un dominio con la cedilla (“ç”), muy frecuente en catalán y en francés, como “htttp://www.pollença.com” se mostrará en Punycode, porque los dominios “.com” no permiten “ç”. En cambio, el dominio “http://www.pollença.cat” se mostrará en Unicode porque los “.cat” sí que permiten la cedilla.

Lo mismo pasaría con el dominio “españa.com”. En Firefox aparecería en formato Punycode, en cambio “españa.es”, en formato Unicode.

Firefox incorpora una lista blanca de TLDs. Si al menos uno de los caracteres del dominio no está en esa lista, el dominio no se mostrará en Unicode. Dicho de otra forma, Firefox siempre mostrará un dominio en formato Punycode para “.com”, porque este TLD no está en la lista blanca. Es decir, ni “españa.com”, ni “pollença.com” se verán “correctamente”.

IDNs en Safari

Safari ofrece una lista de idiomas editable por el usuario en la que aparecen los que están permitidos para mostrarse de manera nativa en la barra del navegador.

Los nombres de dominio que contengan caracteres que no estén en esa lista de idiomas se mostrarán por tanto en el formato ASCII (Punycode)

Podemos editar esta lista muy fácilmente con cualquier editor de texto (siempre y cuando se tengan permisos de administración). Esta lista se llama “Lista blanca de IDNs permitidos por defecto en WebKit” (Default Web Kit International Domain Name Script White List) y la podemos encontrar en esta ruta: Sistema > Libreria > Frameworks > WebKit.framework > Versions > A > Resources > IDNScriptWhiteList.txt

Si borramos todos los idiomas que aparecen en esta lista, Safari mostrará todos los dominios codificados con su equivalente en Punycode.

IDNs en Opera

Opera analiza, al igual que Firefox, en una lista blanca de dominios de primer nivel (TLDs) con las que compara los dominios. Únicamente muestra IDNs en formato Unicode siempre y cuando todos los caracteres del dominio estén permitidos para ese TLD en particular.

En resumen

Si queremos que nuestro dominio del primer ejemplo “radiopollença.net” se muestre tal como lo escribimos, tendremos que cambiar la configuración de idioma del sistema o del navegador al catalán, en todos los casos menos si utilizamos Firefox u Opera, que no se basan en configuraciones locales y por tanto no podremos hacer nada (en realidad, existen extensiones que permiten cambiar esta configuración, pero no son nada recomendables porque nos abren la puerta a posibles ataques).

Dominios IDN, SEO y accesibilidad

¿Afecta negativamente a nivel de posicionamiento en buscadores (SEO) tener un dominio internacionalizado?

Por una parte, los IDNs nos dan más flexibilidad, es decir, nos permiten posicionar palabras exactas, tal como se escriben. En el caso de “Pollença”, puede haber mucha diferencia entre registrar un dominio como “Pollenca” (con “c” en lugar de “ç”) o como la versión castellanizada “Pollensa” (con “s”). Además, disponer de un dominio con caracteres multilingües nos permite acceder a un posicionamiento más local y por tanto más preciso, ya que, desde hace tiempo los buscadores no ofrecen ningún problema para indexar estos dominios.

Partiendo de la premisa de hacer sitios web claros y accesibles para todo el mundo, el hecho de añadir complejidad a nuestra dirección web puede ser un punto importante en contra de adquirir un dominio multilingüe.

Pero, como hemos visto, los navegadores no nos lo ponen fácil. Es muy probable que el usuario que visita una página web con un dominio internacionalizado, se extrañe como mínimo al ver el cambio a Punycode, es decir, provoque una primera reacción de rechazo hacia algo raro, que no conoce.

Por otro lado, registrar un dominio con caracteres multilingües puede no ser una buena idea (ni a nivel SEO ni a nivel de accesibilidad) ya que algunos usuarios podrían tener dificultades para acceder a la “ñ” o la “ç” en teclados ingleses, por ejemplo. Todo dependerá de nuestro “target”, a qué público nos estamos dirigiendo.

A nivel de compatibilidad de navegadores, aunque afortunadamente cada vez se utilice menos, Internet Explorer 6 (IE6) da errores al acceder a dominios IDN.

Por tanto, partiendo de la premisa de hacer sitios web claros y accesibles para todo el mundo, el hecho de añadir complejidad a nuestra dirección web puede ser un punto importante en contra de adquirir uno de estos dominios.

En cualquier caso, lo ideal podría ser registrar otro dominio similar que solamente contenga caracteres ASCII (“normales”) y redireccionarlo a su versión en IDN.

También hay que tener en cuenta que estos dominios pueden ser difíciles de integrar en programas como gestores de correo, de FTP, sistemas de gestión de contenido como WordPress, Joomla o Drupal, extensiones, Twitter, Facebook y otras redes sociales, etc.

Por todo esto, la adquisición de un dominio multilingüe puede ser una muy mala idea, al menos por ahora, debido a la cantidad de problemas, costes y tiempo necesario para solventarlos, pero más que por dificultades a nivel SEO e indexación en buscadores, por accesibilidad y por compatibilidad del software.

WordPress y los IDNs

WordPress no es una aplicación IDNA (aplicaciones capaces de gestionar dominios IDN), por lo tanto al configurarlo deberemos utilizar la versión en Punycode. Si no lo hacemos así, el sistema eliminará todos los caracteres no-ASCII de nuestro dominio.

Pero esto no quiere decir que WordPress tenga problemas con los dominios multilingües. Lo único que hay que hacer al configurar el sistema es introducir el dominio en formato Punycode (aquí encontrarás un conversor), tanto en el campo “Dirección de WordPress (URL)” como en “Dirección del sitio (URL)”. A partir de ahí ya depende del navegador.

Conviene ir con mucho cuidado cuando hacemos este tipo de cambios, especialmente si no sabemos bien lo que hacemos, ya que fácilmente podemos perder el acceso al area de administración de WordPress. En ese caso, podemos acceder directamente a la base de datos a través de phpMyAdmin o tener a mano la información del Codex de WordPress sobre cómo cambiar la URL de la web (en inglés).

Donde sí podemos encontrar limitaciones importantes de WordPress con respecto a los IDNs es en los comentarios, los plugins que utilicemos, integración con redes sociales o la gestión de emails, por ejemplo.

Aunque no lo he probado, existe un plugin que se llama IDNA que permite utilizar dominios IDN en WordPress (aunque según su autor, no se trata de una versión estable, sinó de una Beta, “como mucho”). Para ello utiliza una librería llamada PHP Net_IDNA que convierte de Punycode a Unicode y viceversa.

Conclusión

Registrar dominios con caracteres multilingües no es ni buena ni mala opción. Dependerá de cada caso, por lo que habrá que analizar si puede afectar de alguna manera a nuestros usuarios o al proceso de configuración del software que vayamos a utilizar.

Lo más probable es que con el tiempo todo el software, tanto online como off-line, esté perfectamente adaptado a las configuraciones multilingües, pero por ahora (noviembre de 2011), sigue siendo algo un poco complicado. Prueba de ello es la longitud de este artículo.

Bibliografía

A continuación encontrarás una lista de recursos para poder acceder a información de primera mano sobre los IDNs y los diferentes navegadores:

• IDN Conversion Tool: Herramienta para convertir nombres de dominio internacionales (IDN) a caracteres nativos o Punycode.
• IDN in Google Chrome (Google Chrome’s IDN policy): artículo sobre la política de Google Chrome con respecto a los IDNs.
• Internationalized Domain Name Support in Microsoft Internet Explorer 7: política de Microsoft con respecto al tratamiento de los IDNs en Internet Explorer 7 y versiones superiores.
• Mozilla.org: IDN-enabled TLDs: Lista de los TLDs (dominios de primer nivel) para los cuales el sofware de Mozilla muestra IDNs en formato Unicode.
• About Safari International Domain Name support: artículo sobre la política de Apple con respecto a los IDNs.
• Opera support for IDNs: artículo sobre la política de Opera con respecto a los IDNs.
• Repository of IDN Practices: Tablas de IDNs de la IANA (Internet Assigned Numbers Authority) para consultar las letras permitidas en cada TLD.
• IDN Tables: CAT (catalan): tabla de caracteres asignados por la Fundació puntCAT para el catalán.

Aparte de los cursos y clases presenciales de toda la vida a los que uno se puede apuntar, poco a poco van apareciendo en Internet más y más servicios que permiten aprender idiomas, a cocinar, a tocar un instrumento e incluso lenguajes de programación de manera cómoda y normalmente bastante económica.

Codecademy es uno de esos servicios, centrado en ofrecer cursos de programación online. A diferencia de competidores como por ejemplo Lynda.com, más enfocado al aprendizaje a través de vídeos, Codecademy permite aprender a programar de forma gratuita, interactiva y entretenida directamente desde el navegador, sin necesidad de registrarse ni de instalar nada en nuestro ordenador.

Sólo hay que saber un poco de inglés e ir siguiendo las lecciones paso a paso. Las explicaciones son breves, concisas y van siempre acompañadas de ejercicios interactivos, para poner a prueba lo que vamos aprendiendo.

Además, lo mejor de cursos como este es que nos permiten ir aprendiendo al ritmo que queramos; más rápido si nos parece fácil o repitiendo las lecciones y ejercicios en caso de que algo no nos haya quedado claro.

Ahora mismo Codecademy permite acceder de manera gratuita a un curso de iniciación a la programación en Javascript, que de momento consta de 3 cursos con 19 lecciones y 96 ejercicios, a través de los cuales aprenderemos las nociones básicas de este lenguaje (variables, operaciones, matrices, condicionales, bucles, funciones…)

Viendo el potencial de la enseñanza en Internet y el interés que este tipo de cursos está generando, lo más probable es que muy pronto tengan disponibles muchos más cursos online para aprender, por ejemplo, HTML, CSS, Ruby, Javascript o jQuery. Desde luego, una muy buena alternativa al aprendizaje clásico y estático de los libros.

Enlace: Codecademy, learn to code Javascript

Más información:

• Codecademy raises $2.5M to make you a coding master
• Codecademy: Learning to code just became fun, easy and slightly addictive
• Codecademy, para aprender a programar
• Codecademy Surges To 200,000 Users, 2.1 Million Lessons Completed In 72 Hours

Imagen generada automáticamente por Lorem Pixum

De la misma manera que existen generadores de textos de muestra (a partir del conocido Lorem Ipsum o de otros textos), también existen generadores de fotos aleatorias y de espacios para imágenes (placeholders).

Por ejemplo, la imagen que ves aquí al lado está generada automáticamente. Lo único que se ha especificado es que mida 350 x 230 pixels.

Este tipo de servicios son perfectos a la hora de empezar a maquetar una web, evitándonos tener que recurrir a fotos de stock o imágenes de relleno que podamos tener preparadas en nuestro cajón de recursos.

Lorem Pixum

Lorem Pixum es un servicio de generación automática de imágenes gratuito y muy fácil de utilizar. Solo tenemos que apuntar la URL de la imagen a este servicio, especificando las dimensiones que necesitamos, y nos incrustará una foto automáticamente. En el ejemplo anterior la URL sería:

http://lorempixum.com/350/230/

Podemos seleccionar cualquier tamaño, es decir, no estamos limitados a tamaños estándar. Funcionará igualmente bien tanto si pedimos una foto de 300 x 200 pixels, como cualquier otra proporción caprichosa que necesitemos, por ejemplo 206 x 191. Eso sí, el límite, tanto del ancho como del alto, es de 1920 pixels, el perfil de color siempre será RGB o escala de grises y la resolución, 72 ppp.

Lorem Pixum nos permite seleccionar fotos de entre 11 temas o categorías: fotos abstractas, de animales, urbanas, de comida, nocturnas, moda, gente, naturaleza, deportes, técnicas y transportes.

Esto nos puede venir muy bien, por ejemplo, si estamos montando una web para un restaurante y todavía no nos han enviado las fotos de los platos del menú. Podríamos utilizar las fotos de Lorem Pixum especificando que sólo queremos fotos cuadradas de exactamente 500 x 500 pixels y únicamente de la categoría “Comida”. Así:

http://lorempixum.com/500/500/food

Si queremos recibir siempre la misma foto, basta añadir el número detrás de la categoría:

http://lorempixum.com/400/200/sports/1/

También es posible añadir un pequeño texto vertical sobre la foto:

http://lorempixum.com/400/300/technics/3/Ubuntu/

Utilizar un servicio como este tiene dos ventajas más: no tenemos que preocuparnos por los derechos de las fotos (siempre y cuando las utilicemos únicamente para maquetación web o de imprenta) y que, al no estar alojadas las fotos en nuestro servidor, tampoco tenemos que subir ni copiar nada, ni preocuparnos por el ancho de banda (en otras palabras, estamos haciendo “hotlinking“, pero en este caso está permitido).

Lógicamente, podemos utilizar este servicio tanto desde las plantillas HTML o CSS, como directamente desde WordPress o cualquier otro editor de contenidos que estemos utilizando.

Lorem Pixum se está haciendo bastante popular. De hecho, ahora mismo llevan servidas casi 22 millones de fotos desde que pusieron en marcha el servicio en abril de 2011.

Sinceramente, cuando lo conocí pensé que sería una curiosidad más, algo que desechas rápidamente porque no te soluciona o facilita nada en el día a día. Pero no es así. Por ejemplo, es mucho más rápido generar una imagen con un tamaño específico a partir de Lorem Pixum, que abrir una foto en Photoshop, recortarla y guardarla para web. Si estamos maquetando una web, es más fácil y mucho más rápido probar diferentes tamaños de una foto cambiando sólo la URL, que tener que crear todos los tamaños previamente.

Si te ha convencido, puedes probar esta herramienta visitando: http://lorempixum.com/

Otros servicios similares

• Placekitten es otro generador de fotos parecido a Lorem Pixum pero con la particularidad de que únicamente nos entrega fotos sobre un tema: gatos
  http://placekitten.com/
• Placehold.it es diferente a los dos servicios anteriores. En este caso, se trata de un generador de espacios para imágenes (los típicos cuadros grises tan frecuentes en maquetación). Podemos seleccionar el formato, texto, color y tamaño de los recuadros.
  http://placehold.it/
• Ipsum Image es otro generador de espacios para imágenes. Además del tamaño, nos permite seleccionar el color de fondo, el texto que queremos que aparezca sobre la foto (incluido el tamaño y el color de ese texto) y el formato (PNG, JPG o JPEG)
  http://ipsumimage.appspot.com/

Generadores de textos de muestra

Si lo que buscas son generadores de textos de muestra (dummy text), aquí tienes algunas herramientas útiles:

• RandomText, generador aleatorio de Lorem Ipsum y textos de muestra.
  http://www.randomtext.me/
• Lorem ipsum for webdesigners. Generador de textos aleatorios a partir de obras literarias de autores conocidos.
  http://www.blindtextgenerator.com/lorem-ipsum
• Quijotipsum, generador de texto basado en El Quijote de Cervantes: http://www.quijotipsum.com/

WorldWideWeb (Nexus), el primer navegador y editor de páginas web creado por Tim Berners-Lee

Un 6 de agosto de 1991, hace exactamente 20 años, se inauguró la “gran base de datos de hipertexto con enlaces” conocida hoy en día como World Wide Web, una tecnología que, junto al desarrollo de Internet, iba a cambiar radicalmente la manera en que nos comunicamos y compartimos.

Tim Berners-Lee, creador de la Web, explica como curiosidad que, antes de llamarlo “World Wide Web”, algunos de los nombres que se barajaron para este nuevo proyecto fueron “The Information Mesh” (La Malla de Información) o “The Information Mine” (La Mina de Información), siglas de su propio nombre (TIM).

En 1973, Vinton Cerf y Bob Kahn definieron el protocol gracias al cual se permitía enviar paquetes de un ordenador a otro. Berners-Lee llevaba desde 1980 investigando la manera de compartir información entre científicos desde diferentes puntos del planeta sin tener que utilizar necesariamente el mismo tipo de hardware y software.

Las incompatibilidades entre las plataformas y herramientas que se utilizaban en esa fecha hacían imposible acceder a los documentos existente a través de una sistema común, lo cual suponía una pérdida de tiempo, frustación y respuestas obsoletas a consultas simples.

Con este trasfondo, Berners-Lee y su equipo propusieron un sistema de hipertexto de acceso a la documentación del CERN, creando así la semilla de la World Wide Web tal y como lo conocemos hoy en día.

Entre los objetivos iniciales que se propusieron estaba el ofrecer el software de manera gratuita, para asegurar que todo el mundo tuviera acceso a la Web.

Afortunadamente, Tim Berners-Lee puso su idea a disposición de todo el mundo, libremente, sin patentes ni canones de ningún tipo. De hecho, entre las propuestas del proyecto inicial se preocuparon de explicar lo que había que evitar: utilizar complejos sistemas de autorización en los que la información no pudiera ser accesible por todo el mundo (literalmente). Todo el tráfico de la red debía ser público.

Ahora, veinte años después y así como la Web va evolucionando, debemos seguir el consejo de Berners-Lee y hacer un uso inteligente de toda la información que ahora tenemos a nuestro alcance.

Si te interesa el tema, aquí encontrarás un entretenido artículo (en inglés) que recoge algunas opiniones sobre cómo piensa la gente que será Internet dentro de 20 años: What will the Internet be like in 20 years?.

Particularmente pienso que hasta ahora solamente hemos llegado a la parte que se refiere a la Red (Web), pero que a esta “red de alcance mundial” todavía le falta alcanzar gran parte de su significado, precisamente el de “alcance mundial”, literalmente, tal como la definieron hace hoy veinte años.

Si quieres ampliar información, aquí tienes algunos artículos relacionados:

• Tim Berners-Lee responde a algunas preguntas frecuentes (en inglés):
  http://www.w3.org/People/Berners-Lee/FAQ.html
• Tal día como hoy hace 20 años nació la World Wide Web (en inglés):
  http://thenextweb.com/insider/2011/08/06/20-years-ago-today-the-world-wide-web…
• The World Wide Web: A very short personal history, por Tim Berners-Lee (en inglés): http://www.w3.org/People/Berners-Lee/ShortHistory
• La evolución del diseño web desde 1990 hasta hoy. De la web textual a las redes sociales y los dispositivos móviles: http://www.danielnabil.com/blog/evolucion-diseno-web/
• Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web by its Inventor (Amazon): http://www.amazon.com/Weaving-Web-Original-Ultimate-Inventor…

Desde sus inicios la web se ha ido desarrollando muy rápidamente hasta convertirse en algo imprescindible en nuestras vidas, pero a pesar de que la historia de Internet y el diseño web es muy corta (la primera página web se publicó hace 20 años), es difícil imaginarse cómo serán los próximos 20 años y qué avances tecnológicos iran apareciendo.

Este gráfico creado por KISSmetrics muestra esta evolución y cómo ha ido cambiando el diseño web a partir de las diferentes tecnologías que lo hacen posible.

WordPress permite desde hace tiempo proteger fácilmente nuestra información privada bajo contraseña. Cualquier entrada o página de nuestra web o blog puede ser publicada para que solamente algunos usuarios tengan acceso.

Para publicar un contenido protegido por contraseña:

1. Desde el editor de páginas o entradas de WordPress tenemos que pulsar el botón “Editar” que hay junto a la opción “Visibilidad: Público”, seleccionar “Protegida con contraseña” y después pulsar el botón “Aceptar” (ver imagen). También se puede cambiar o editar la contraseña desde la edición rápida.
2. Después solo tenemos que pulsar el botón “Publicar”. A partir de ese momento nuestra información solo estará disponible para aquellos a quienes hayamos facilitado la contraseña del primer paso.

Por defecto WordPress añade automáticamente la palabra “Protegido” (o “Protected”, si no la hemos traducido) al título de nuestra entrada o página. Para eliminar esta palabra y dejar el título tal como lo hemos publicado, tendremos que hacer algo más:

1. Abrir el archivo functions.php (si nuestra plantilla no lo tiene, lo creamos)
2. Añadir este fragmento de código:

   // Cambiando el título de los posts protegidos con contraseña:
   add_filter('the_title','entradas_protegidas');
   function entradas_protegidas($title) {
   	return str_replace('Protegido:','', $title);
   	}
   

   Con esto lo que hacemos es añadir un filtro al título para que sustituya la palabra “Protegido” por “”, es decir, por nada. Si lo que queremos es sustituirla por otra palabra, solo tenemos que escribirlo entre las comillas. Por ejemplo:

   // Cambiando el título de los posts protegidos con contraseña:
   add_filter('the_title','entradas_protegidas');
   function entradas_protegidas($title) {
   	return str_replace('Protegido:','Acceso restringido:', $title);
   	}
   

Este método protege dos bloques de información: el contenido (the_content) y los comentarios (comments_template).

¿Qué diferencia hay entre “Protegida con contraseña” y “Privada”?

Cualquiera de estas dos opciones protege nuestra información, pero hay una diferencia importante: al marcar una entrada o página como privada, ésta desaparece completamente, es decir, la visibilidad para el visitante es nula, mientras que si la protegemos con contraseña lo único que ocultamos es el contenido (pero no el título).

Por defecto, el contenido privado en WordPress solo es visible para administradores y editores. Cualquier rol con menos privilegios carece de la posibilidad de visualizar (y mucho menos editar) esta información.

Cómo modificar el formulario de protección con contraseña

WordPress, al menos hasta la versión 3.1.3, no nos ofrece ninguna clase especial para dar estilo a este formulario (algo un poco extraño ya que una simple clase en el body nos permitiría acceder a él mediante reglas CSS). Para poder editar este formulario, lo mejor es recrear la función en nuestro archivo functions.php:

add_filter('the_password_form', 'nuevo_formulario');
function nuevo_formulario() {
    global $post;
    $label = 'pwbox-'.(empty($post->ID) ? rand() : $post->ID );
    $output = '<form class="formulario-contrasena" action="' . get_option('siteurl') . '/wp-pass.php" method="post">' . __("<p><strong>Esta información está protegida.</strong><br />Por favor, para verla escribe la contraseña a continuación:</p>") . '<p><input name="post_password" id="' . $label . '" type="password" size="25" /><input type="submit" name="Submit" value="' . esc_attr__("Submit") . '" /></p></form>';
    return $output;
    }

Proteger con contraseña una web completa

Hasta el momento WordPress tampoco ofrece la posibilidad de proteger toda una web con contraseña, aunque es posible que forme parte de las opciones del sistema en futuras versiones. De todas formas, hasta que esto ocurra, afortunadamente existen numerosos plugins que facilitan mucho el tema:

• Page Restrict: acceso restringido para páginas o entradas seleccionadas
• Restricted Site Access: acceso limitado a usuarios registrados o a determinadas direcciones IP
• Registered Users Only: obliga a todos los visitantes a identificarse para poder acceder a la web

También podemos restringir el acceso a nuestra web mediante .htaccess. Un simple ejemplo:

RewriteEngine on
RewriteCond %{REQUEST_URI} !/acceso-restringido.php$
RewriteCond %{REMOTE_ADDR} !^80\.31\.190\.52
RewriteCond %{HTTP_REFERER} !^http://www.miweb.com/ [NC]
RewriteCond %{HTTP_REFERER} !^http://miweb.com/ [NC]
RewriteRule $ /acceso-restringido.php [R=302,L]

Así, cualquier usuario que visite nuestra web y no tenga la IP del ejemplo será redireccionado a la página “acceso-restringido.php”.

Más información:

• WordPress content visibility (en inglés)
• Password Protect More Than the_content() (en inglés)