Corregir mayúsculas y minúsculas de un texto en PHP

¿Alguna vez has necesitado corregir las mayúsculas y minúsculas de un texto en PHP? Pongámonos en situación, imagina que debes unir dos o más frases cualesquiera para formar un texto más largo, pero el resultado contiene signos especiales como puntos y seguido, ¿cual es el resultado?

Pues bien, con el siguiente código  podremos corregir las mayúsculas y minúsculas usando expresiones regulares:

Cómo habilitar los "Touch Icons" en tu web

¿Tienes una página web adaptada para móviles? Si es así, ¿has incluido en ella los "Touch Icons"? Si aún no lo has hecho, aquí veremos cómo hacerlo fácilmente.

Pero, ¿qué son los "Touch Icons"?

Para que todos nos entendamos, los "touch icons" son el equivalente al favicon pero para los smartphones o tablets, o visto de otra forma, los "touch icons" son iconos usadas por las aplicaciones móviles, como los navegadores web, que permiten asociar una página web con una imagen.

Pero, ¿para qué incluir un "touch icon" en mi web? Imagina que un visitante accede a tu web y desea almacenarla en su lista de marcadores dentro de su navegador, o mejor aún, decide crear un acceso directo a tu web en el escritorio de su teléfono móvil; pues el icono que se mostrará en este tipo de situaciones será el "touch icon", no el favicon como podría imaginarse.

¿Qué tamaños tienen los "Touch Icons"?

Debido a la diversidad de terminales que existen hoy día en el mercado y la variedad de resoluciones que eso produce, los principales sistemas operativos han creado una tabla en la que en función de la resolución del dispositivo será necesario disponer de iconos de un tamaño u otro. A día de hoy, es necesario disponer de los "touch icons" en las siguientes resoluciones (realmente son más las resoluciones necesarias, pero con esto se cubre la gran mayoría de los casos necesarios):

• 57x57 px: Usado por iPhone (no Retina), iPod y Android 2.1.
• 72x72 px: Usado por iPad Mini y iPad (no Retina) de versiones anteriores de iOS7.
• 76x76 px: Usado por iPad2 y iPad Mini (no Retina) en iOS7 o versiones posteriores.
• 114x114 px: Usado por iPhone (Retina) en versiones anteriores de iOS7.
• 120x120 px: Usado por iPhone (Retina) en iOS7 o versiones posteriores.
• 144x144 px: Usado por iPad (Retina) en versiones anteriores de iOS7.
• 152x152 px: Usado por iPad (Retina) en iOS7 o versiones posteriores.
• 180x180 px: Usado por iPhone 6 Plus.
• 192x192 px: Usado por Android.

Aquí puedes encontrar un desglose de todos los tamaños de "touch icons" necesarios para iOS y para Android.

Pero...¿qué resolución debo usar en cada momento? He aquí la mejor parte...todas, el navegador web o la aplicación utilizará el icono que necesite en cada momento, por lo que lo único que debes hacer es ofrecer todos los iconos en tu web y dejar que sea la aplicación que los necesite la que decida cual usar.

Como norma general, los dispositivos que utilicen estos "touch icons" deben buscar de entre todos los disponibles el icono que se ajuste exactamente a sus necesidades, en caso de no encontrarlo deben usar el de tamaño superior más próximo. En caso de que la resolución buscada sea superior a las ofrecidas, tomarán la versión de mayor resolución, en nuestro caso la de 192x192.

¿Cómo incluir los "touch icons" en mi web?

Por fin llegamos a la parte de código, en este caso un pequeño fragmente de código HTML. El primer paso será subir a tu servidor web los iconos con las múltiples resoluciones. Se recomienda usar la siguiente nomenclatura para los archivos:

• apple-touch-icon-[ancho]x[alto]-precomposed.png para los iconos de entre 72 y 180 px de ancho. Ej: apple-touch-icon-180x180-precomposed.png
• touch-icon-192x192.png para el icono de 192x192px.
• apple-touch-icon-precomposed.png para el icono de 57x57px.

Una vez subidos a tu web los archivos, por cada archivo debes incluir la sección "head" de tu código HTML un nodo tipo "link" con el atributo 'rel="apple-touch-icon-precomposed"' de la siguiente forma:

<link rel="apple-touch-icon-precomposed" sizes="[ancho]x[alto]" href="[url/al/icono]/apple-touch-icon-[ancho]x[alto]-precomposed.png">

Esto debes aplicarlo a todos los iconos salvo el icono de 57x57 en el cual no hay que incluir el atributo "sizes", y para el icono de tamaño 192x192, el cual el atributo rel es "icon", quedando el código HTML completo para todos los iconos de la siguiente forma: 

Tal vez te preguntes que ¿qué es eso de "precomposed"? En versiones anteriores de iOS, el sistema operativo creaba unos efectos de brillo a los "touch icons", el cual se desactiva añadiendo el prefijo "precomposed" al archivo y al atributo "rel" del link a crear.

Por último, simplemente denotar que los "links" están ordenados incluyendo los iconos de mayor tamaño al inicio, y de menor tamaño al final. Esto es así para que en versiones anteriores de iOS4.2, los dispositivos no soportaban el atributo "sizes", lo que hace que se descargue el último icono incluido en el código, en nuestro caso el de menor tamaño, reduciendo el ancho de banda requerido.

Hasta aquí llegamos con los "touch icons", ahora no hay excusas para incluirlos en vuestra página web. ¿Lo habéis incluido ya?

Extra:

Dos aplicaciones online que os facilitarán la creación de estos "touch icons": Iconifier y Favicon Generator. Espero os sea de ayuda.

Herramientas online para analizar el SEO de tu web

¿Cuántas veces has necesitado comprobar el SEO de tu web? Pues bien, a continuación podremos ver una lista de algunas de las utilidades/herramientas online más importantes para verificar el SEO de una página web. Comencemos:

RankWise

Esta herramienta online gratuita, proporciona un review muy completo de tu web, desde palabras principales hasta usabilidad móvil, pasando por análisis de velocidad y del código HTML. Al finalizar también te proporciona algunos tips para mejorar tu posicionamiento.

WooRank

Muy parecida a RankWise, WooRank es un servicio online que te aconsejará sobre puntos a mejorar en el SEO de tu web. A diferencia de la anterior, es un servicio de pago, aunque podrás probar gratuitamente el servicio una vez. En mi opinión es un servicio bastante intuitivo y con un reporte muy completo.

GTMetrix

Entramos en el mundo de la velocidad. Cada día más, los buscadores web valoran la velocidad de descarga de una página web ya que, según ellos, permite ofrecer una mejor experiencia de usuario a tus visitantes. Por tanto, para mejorar tu posicionamiento SEO, es muy importante optimizar la velocidad de tu web, y con GTMetrix podrás analizar la velocidad de tu página en unos segundos, así como obtener un informe de mejoras. También esta utilidad online almacena un histórico de la evolución de los resultados de tu web. Servicio online muy recomendable para al menos comprobar una vez.

WebPageTest

De nuevo otra utilidad online para analizar la velocidad de descarga de tu web, pero en este caso, WebPageTest te permite, entre otras muchas opciones, seleccionar el servidor en el cual será analizada tu web, obteniendo una visión más amplia de los tiempos de carga de tu web. En el informe final que genera este servicio, obtendrás información muy detallada de todos los elementos de tu web, así como información de la velocidad para usuarios recurrentes en tu web.

Pingdom

Seguro que conocida por casi todos, Pingdom analiza la velocidad de tu web y te devuelve un informe muy detallado y bien organizado de los puntos a mejorar para aumentar tu velocidad. Al igual que GTMetrix, Pingdom almacena un histórico de los cambios en la velocidad de descarga de tu página.

PageSpeed Insights

Posiblemente una de las herramientas más usadas e importantes para analizar la velocidad de tu web, creada por Google, permite analizar la velocidad de tu web tanto en dispositivos móviles como en su versión de escritorio, proporcionando información sobre la usabilidad en dispositivos móviles de tu página.

Con esto doy por terminada esta primera lista de herramientas online para el análisis de tu página web. ¿Qué resultados ha tenido tu web en las diferentes utilidades? ¿Utilizas otras herramientas?

Cómo crear un plugin para JQuery en 3 fáciles pasos

¿Has creado un script en JQuery y quieres convertirlo en un plugin para poder reutilizarlo fácilmente? En este post explicaremos paso a paso cómo hacerlo.

Paso 1: Crear la estructura del plugin

El primer paso es el más simple, copiar y pegar. Copia el siguiente código que he creado en github, pégalo en un archivo con extensión js y cambia todas las apariciones de "functionName" con el nombre del plugin a crear.

Convertir un array asociativo en una lista de atributos HTML con PHP

Seguro que muchas veces has necesitado convertir un array asociativo de PHP en una lista de atributos HTML asociados a un tag. A continuación se muestra una función básica que realiza esta tarea para tenerla siempre a mano:

Esta función es un ejemplo básico para realizar esta conversión, pero puedes modificarla añadiendo funciones extra como verificar si el valor a convertir es un array y hacer un implode en tal caso, aplicar un htmlspecialchars a los datos...e incluso personalizar la forma en que los valores son convertidos a string llamando a otra función.

Espero que os sirva como referencia rápida para desarrollar vuestra propia función.

¿Qué otros métodos para convertir los arrays asociativos usáis en PHP?

Bloquear por IP el acceso a un directorio por medio de .htaccess

¿Tienes que bloquear el acceso a un directorio limitando a una o un grupo de direcciones IP el acceso al mismo? Copia el siguiente código y pégalo en el archivo .htaccess dentro del directorio que deseas bloquear.

  1: Order allow, deny
  2: Allow from #DIRECCION_IP#
  3: Deny from all

Reemplaza la palabra #DIRECCION_IP# por la dirección IP a la que deseas permitir el acceso. Repite la primera línea por cada dirección IP a la que desees habilitar el acceso.

Carga no bloqueante (non-blocking loading) de archivos javascript y css

¿Quieres aumentar la velocidad de carga de tu página web? A continuación se muestra un pequeño código javascript que realiza la carga no bloqueante de archivos CSS y JS.

Pero como siempre, un poco de teoría. ¿Qué es el non-blocking loading o carga no bloqueante?

Cuando una página web es renderizada por el navegador, éste ejecuta el código HTML según lo encuentra, así que si detecta una referencia a un script javascript o a un archivo css, éste detiene el proceso de renderizado para obtener los archivos encontrados. Una vez los archivos son obtenidos del servidor, el navegador continua el renderizado del HTML.