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

0 comentarios

¿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

0 comentarios

¿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

0 comentarios

¿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.

Herramientas Online SEO - RankWise

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.
Herramientas Online SEO - WooRank

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.
Herramientas Online SEO - GTMetrix

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.
Herramientas Online SEO - WebPageTest

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.
Herramientas Online SEO - Pingdom

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.
Herramientas Online SEO - PageSpeed Insights

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?