Convertir acentos a equivalente en HTML en Panic Coda

Gracias al soporte de extensiones en Panic Coda podemos instalar Accent2HTML, un plugin que convierte de forma automática todos los caracteres especiales de un texto a su equivalente en HTML, incluyendo todo tipo de acentos y algunos caracteres especiales.

De esta forma ya no es necesario recordar los códigos para cada carácter especial, sobre todo en el caso de las vocales acentuadas que con mucha frecuencia aparecen en los textos en Español de un sitio web.

La forma de operar con la extensión es simple: una vez instalada, seleccionamos el texto que contiene los caracteres especiales, ejecutamos el plugin y la conversión se lleva a cabo en un instante.

Mostrar imágenes al terminar de cargar la página

Mostrar ciertas imágenes en una página después de que estas se hayan cargado por completo es una forma de embellecer el diseño de un sitio web ya que se evita el efecto de barrido vertical que el usuario puede ver en las imágenes que se están bajando.

El truco consiste en ocultar las imágenes mediante las hojas de estilo para luego con JavaScript detectar cuando se termino de cargar la página y cambiar el estado de visibilidad de estas imágenes.

window.onload = function() {
    setContent();
    document.getElementById('imagen-oculta').style.visibility = 'visible';
}

Este código funciona si previamente en nuestra hoja de estilo tenemos definido algo parecido a #imagen-oculta { visibility:hidden; }. De esta manera todo lo que se encuentra dentro del evento window.onload se ejecutará una vez que se termine de cagar toda la página, dónde la última sentencia lo que hace es editar las propiedades de los elementos con el ID imagen-oculta para cambiar el estado de la visibilidad.

Cuando el usuario carga la página las imágenes se encontrarán invisibles, se cargarán, pero el visitante no podrá verlas. Cuando se termine de cargar la página, es decir cuando todas las imágenes se hayan descargado por completo, se ejecutará el código JavaScript.

Elementos de la interfaz gráfica del iPad 3

Teehan+Lax ha publicado de forma gratuita el iPad GUI PSD (Retina Display), un conjunto de cientos de elementos pertenecientes a la interfaz gráfica del usuario del iPad 3 adaptados por ende a la definición de la pantalla Retina.

El set integrado en un único PSD esta conformado por un extenso listado de botones, teclados, marcadores, indicadores, teclas, y un largo etcétera de elementos que podemos encontrar en iOS 5.1 para el iPad de tercera generación.

El recurso está pensado para facilitar el desarrollo de aplicaciones, específicamente para el iPad, o cualquier tipo de software que requiera de los elementos de la interfaz gráfica del sistema operativo de Apple.

No es la primera vez que Teehan+Lax publica elementos de las interfaces gráficas de los distintos dispositivos de Apple. En anteriores ocasiones han ofrecido también de forma gratuita un PSD con los elementos en alta definición del iPhone 4, hermano de este conjunto que hoy les comparto pero orientado al teléfono de Apple.

Resolver mapas de Karnaugh en Mac OS

Los mapas de Karnaugh, tablas de Karnaugh o diagramas de Veitch son utilizados para simplificar funciones algebraicas booleanas (lógicas) y, en la práctica, poder crear un circuito lógico a partir de esta función booleana de la forma más económica posible.

El programa gratuito K Map Resolver permite construir los mapas de Karnaugh a partir de una tabla de verdad o función lógica y obtener la función algebraica booleana simplificada como suma de productos.

Lamentablemente el programa está limitado a un máximo de cinco variables para la construcción de la tabla de verdad o especificación de la función algebraica booleana, además de ser sólo posible trabajar con suma de productos y no productos de suma.

Al haber resuelto la tabla de verdad es posible conocer la correspondencia entre las filas de la tabla y los cuadrados del diagrama de Veitch. K Map Resolver también resalta la forma en la que agrupo los valores verdaderos del mapa lo cual ayuda a entender la forma de trabajar con estos diagramas.

He encontrado mejores alternativas para trabajar con mapas de Karnaugh pero sólo esta es gratuita y funciona en Mac OS. A pesar de todas las limitaciones y la necesidad de mejorar varios aspectos (como mostrar los pasos de la simplificaciones, aceptar más variables y trabajar con producto de sumas) el programa cumple con lo que promete.

Crear icono de sitio web para agregar como aplicación en iOS

En iOS es posible agregar el icono de un sitio web a la pantalla de Inicio siempre y cuando el desarrollador haya creado y definido este icono según especifica Kabytes en el artículo sobre como crear un icono de tu sitio web para iPhone e iPod Touch.

Lo único necesario es situar la imagen del icono en la carpeta raíz del sitio web con el nombre apple-touch-icon.png para que Safari lo detecte. La imagen definida no debe de tener los bordes redondeados puesto que esta característica junto al brillo superior son agregados automáticamente por el sistema operativo (de igual forma, podemos utilizar apple-touch-icon-precomposed.png para que no se agreguen estos efectos).

Es posible definir la misma imagen en diferentes resoluciones para adaptarse a las diferentes pantallas de los dispositivos con iOS. Para el caso del iPhone e iPod Touch el tamaño en pixeles para el icono debe de ser de 74x74 mientras que para los mismos dispositivos con pantalla Retina el tamaño aumenta a 114x114. La misma situación se presenta para el iPad en cuyo caso el tamaño del icono debe de ser de 72x72 a excepción del iPad con pantalla Retina donde el tamaño asciende a 144x144.

Si se tiene varias imágenes es necesario especificar la ubicación de cada una junto al tamaño mediante etiquetas HTML <link> para que Safari decida cual imagen cargar.

<link rel="apple-touch-icon" href="icono-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="icono-ipad-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="icono-iphone-retina-114x114.png" />

En caso de no especificarse el atributo sizes el navegador considera que la imagen tiene un tamaño de 57x57. Hay que tener en cuenta que si no se especifica un tamaño exacto para algunas de las resoluciones de pantalla, Safari seleccionará la imagen más grande siguiente al tamaño recomendado para el dispositivo.

Se puede omitir el uso de las etiquetas <link> agregando a la raíz del sitio web las imagenes en diferentes tamaños con nombre apple-touch-icon-AAxAA.png donde AAxAA es el tamaño del icono. De esta manera Safari seleccionará la apropiada teniendo en cuenta la recomendada para cada dispositivo.

Agregar barra final (trailing slash) a una dirección solicitada

Agregar automáticamente una barra diagonal final a las direcciones que no las contengan es una forma de evitar el contenido duplicado de cara a los buscadores ya que por ejemplo www.nahuelsanchez.com/carpeta y www.nahuelsanchez.com/carpeta/ son dos ubicaciones diferentes para los indexadores por más que apunten al mismo contenido.

Sin importar el motivo por el cual se pretenda redireccionar una URL a la misma URL pero con la barra final, la forma de llevar a cabo este proceso es mediante el archivo htaccess.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ^(.*)$ http://www.mi-dominio.com/$1/ [L,R=301]

De esta forma cuando se detecta una dirección sin la barra final se dispara la tercer línea del código y luego en la cuarta sentencia se redirecciona a la misma dirección con la barra final. La redirección llevada a cabo es con código 301 por lo cual para los buscadores es un movimiento permanente desde la dirección sin la barra final a la nueva dirección.

Por otro lado es posible excluir directorios o archivos para que no sean afectados por la redirección agregando la siguiente sentencia en la tercera línea del código anterior.

RewriteCond %{REQUEST_URI} !ejemplo.php

De no ser necesario lo anterior y si se pretende afectar a todas las direcciones ingresadas se debe omitir esta sentencia.

Determinar si un usuario ha iniciado sesión en WordPress

La función lógica is_user_logged_in indica si un visitante del blog ha iniciado sesión en el mismo para a partir del resultado obtenido mostrar un mensaje o ejecutar alguna función específica dependiendo de nuestras intenciones como desarrolladores.

Podemos encontrar esta función en el archivo comments.php de los diseños para WordPress en donde dependiendo de si el visitante ha iniciado o no sesión se muestran los campos para el nombre, correo electrónico y sitio web en el formulario de comentarios.

A modo de ejemplo el siguiente código en PHP muestra dos mensajes diferentes para quienes han iniciado sesión y quienes todavía no.

if (is_user_logged_in()){
    echo 'Usted es un usuario registrado y ha iniciado sesi&oacute;n';
}else{
    echo 'Usted es un visitante y no ha iniciado sesi&oacute;n';
}

Es posible llamar a la función desde cualquier archivo del diseño de un blog de WordPress, siempre recordando que devolverá TRUE en caso de que el usuario haya iniciado sesión y FALSE en caso contrario.