Hoy en AyudaWordPress.com

“Retiniza” tu tema WordPress
Protege WordPress con contraseña sin registro de usuario
Traduce tu web sin plugins

Posted: 04 Nov 2012 03:01 PM PST

Apple ha introducido en muchos de sus dispositivos el concepto de visualización llamado “Retina display“, mediante el cual un dispositivo mostrará el doble (por lo menos) de resolución de otro similar, gracias a las pantallas de alta calidad que usan, por ejemplo, los últimos iPhone, iPad y ordenadores MacBook.

Si has probado uno de estos dispositivos con pantalla retina habrás comprobado que la resolución de las tipografías y las imágenes es realmente espectacular.

Para tener una web “retina ready” hay que tener en cuenta varios aspectos, los principales son estos:

Imágenes a mayor resolución, algo fácil de añadir mediante varios métodos que veremos más adelante.
Iconos y botones mediante CSS, para poder mostrar diferentes versiones según el dispositivo.
Favicons, lo más fácil, pues solo tienes que subir un favicon a 32×32 pixels en vez del estándar a 16×16

Y, cómo no, en WordPress podemos estar preparados para ofrecer una versión “retina ready” de nuestra web, para lo que tenemos varias posibilidades, algunas realmente sencillas. Vamos a ver algunas opciones, unas más fáciles que otras …

…Plugins WordPress…

WP Retina 2x: Este plugin convierte nuestro WordPress en “retina ready“, al menos en lo que a imágenes se refiere. Ofrece dos modos distintos de servir imágenes a tus visitantes, pudiendo elegir el que se adapte mejor a tu alojamiento y entorno. También dispone de soporte para WordPress multisitio.

El plugin, una vez activo, crea los archivos de imagen necesarios para dispositivos con pantalla Retina. Si la resolución de las imágenes originales no fuera lo suficientemente alta te muestra un aviso en la Librería Multimedia para que subas imágenes a mayor resolución.

Desde el primer momento, el plugin reconoce el dispositivo desde el que se esté visualizando tu web y mostrará la versión de las imágenes adecuada al mismo, siendo la de mayor resolución en el caso de los de pantalla Retina.

Simple WP Retina: otro estupendo plugin que cambia, cuando tu web se ve desde un dispositivo con pantalla retina, a la versión @2x de las imágenes.

Para ello, el plugin crea versiones @2x de las imágenes de las entradas y también para las miniaturas. No hay nada que configurar, pero también tienes que instalar el plugin regenerate thumbnails una vez instalado Simple WP Retina y ejecutar el regenerado de miniaturas, el resto es automático.

… Temas WordPress …

Por supuesto, te ahorrará tiempo y esfuerzos utilizar un tema que ya esté listo para pantallas retina, como Responsive (gratuito) u otro montón que puedes encontrar (ya de pago)

… Redimensionado mediante CSS …

Esto ya existe, no tienes que instalar ni aprender nada. La idea es sencilla: servir imágenes al doble de resolución pero redimensionadas a la mitad. El dispositivo con pantalla Retina mostrará la imagen a su tope de resolución, la única pega es que siempre cargas la imagen a tope de resolución, aunque no sea necesario en dispositivos sin pantalla Retina.

Vamos, que lo que tienes que hacer es adquirir la costumbre de siempre subir las imágenes al doble de resolución de las que las vas a mostrar en tu tema y redimensionarlas ,usando los atributos “width” y “height“, todas a la mitad al insertarlas.

En definitiva, sería algo así para una imagen de resolución 640×400:
<img src="http://midominio.com/wp-content/uploads/2012/11/03/pedazo_de_foto.png" width="320" height="200" />

… Javascript …

Un modo de conseguir lo mismo que con los anteriores métodos es mediante el script Retina.js. Una vez lo descargues del sitio oficial el proceso es este:

Sube el archivo retina.js a tu servidor
Añade el script necesario al archivo footer.php de tu tema activo, antes de la etiqueta </body>:
<script type="text/javascript" src="/scripts/retina.js"></script>

Lo que hace el script es asumir que usas el modificador de alta resolución recomendado por Apple (@2x) para identificar variaciones de imágenes de alta resolución en tu web y, de este modo, si insertas una imagen llamada, digamos pedazo_de_foto.png, entonces buscar una llamada pedazo_de_foto@2x.png que será la que mostrará a dispositivos con pantalla retina. Así que ya sabes lo que toca: subir siempre la susodicha, o en su defecto utilizar el truco de LESS CSS cómo se explica en la web oficial de Retina.js.

… Fuentes iconizadas …

Una de las cosas más horribles al “retinizar” una web son las fuentes, pues la redimensión las muestra horriblemente pixelizadas. Para solucionar esta importante faceta podemos utilizar la técnica @font-face, muy implantada a partir de Twitter bootstrap, y bastante fácil de añadir a nuestro WordPress mediante Font awesome, que permite instalar iconos de fuentes tipográficas en forma de vectores que, sin recargar enormemente tu web, mostrarán una versión a alta calidad que se verán de maravilla en pantallas Retina.

Una vez descargues Fong Awesome haz lo siguiente:

Copia la carpeta “Font Awesome” en tu servidor
Copia los archivos font-awesome.less o font-awesome.css en la carpeta de tu tema WordPress activo.
Abre el archivo CSS subido y edita la URL de la fuente para que apunte a la carpeta donde subiste Font Awesome

Otro modo de hacerlo es crear tu propia tipografía con servicios como Font builder y luego implementar las nuevas fuentes en tu sitio creando clases CSS que usen @font-face.

Bueno, como verás hay de todo, desde lo más sencillo hasta modos especiales para desarrolladores. Lo que parece que está claro es que la web tiende a retinizarse poco a poco y hay que tener en cuenta estas técnicas si queremos que nuestra web creada con WordPress sea competitiva y aporte valor añadido a estos dispositivos con pantalla Retina que cada vez se usan más.

Ayuda WordPress está alojado en Gigas Cloud WordPress, hosting en la nube especializado en WordPress

Protege WordPress con contraseña sin registro de usuario

Posted: 04 Nov 2012 09:37 AM PST

Seguro que ya sabes que puedes proteger tu WordPress para que solo sea accesible para usuarios registrados, en consecuencia introduciendo su nombre de usuario y contraseña, pero esto es otra cosa.

Me refiero a poner una contraseña de acceso a tu WordPress, para que solo puedan acceder los que tengan la clave, única para todos, haciendo de este modo privado tu sitio web.

Puedes hacerlo bien fácil, pues solo hay que instalar el plugin Password protected y, una vez activo, definir una contraseña para facilitársela a quien tu quieras que acceda y vea tu web. El resto de usuarios serán redirigidos directamente a la pantalla de acceso donde se les pide esa contraseña, no pudiendo ver nada más.

Como pluses adicionales puedes habilitar también la contraseña para poder visualizar los feeds RSS o marcar el sitio como oculto a los buscadores.

Simple y efectivo, ideal para sitios privados, para la familia, webs en producción y cosas así. El único peligro, como siempre en estas cosas, que apunten la contraseña en un post it y te fastidien el invento de la privacidad.

Ayuda WordPress está alojado en Gigas Cloud WordPress, hosting en la nube especializado en WordPress

Traduce tu web sin plugins

Posted: 02 Nov 2012 04:01 PM PDT

Hay un montón de plugins para ofrecer tu WordPress en otros idiomas, y por supuesto me refiero a traductores automáticos. La cosa es que la inmensa mayoría utilizan el traductor de Google para ofrecer este servicio.

Entonces ¿por qué no usar Google directamente?

El proceso es muy simple, se hace así:

Vas a Website translator y haces clic en el único botón, llamado “Add your website now“.
Pones la dirección de tu web (sin http://), eliges el idioma original en que esté escrito, en mi caso el Español y le das a “Next“.
La siguiente pantalla es donde lo configuramos, y hay varias posibilidades a tener en cuenta. En el primer selector podemos elegir si vamos a ofrecer traducción a todos los idiomas (por defecto) o, por el contrario, si queremos seleccionar a qué idiomas se podrá traducir, en cuyo caso tendremos que marcar los idiomas que estarán disponibles.
A continuación elegiremos el tipo de visualización del traductor, y la disposición del desplegable para cada una, las opciones son las siguientes:
- Inline: el más habitual, el que muestra un desplegable horizontal, donde podemos elegir si queremos el texto de “Powered by Google Translator” y donde ponerlo.
- Tabbed: esta opción es un simple enlace, que podemos colocar en distintas posiciones, y que lanzará la versión traducida de tu web.
- Automattic: en esta ocasión no se muestra ningún botón ni enlace, si el script detecta que el navegador del visitante está en otro idioma distinto del de tu web le muestra automáticamente la barra superior de Google Translator.
Por último podemos marcar varias opciones avanzadas:
- Si mostraremos la barra superior de traducción de Google a todos los visitantes con un idioma de navegador distinto al nuestro.
- Si nuestra web está en varios idiomas, por lo que si marcamos esta opción el comportamiento será distinto en cada caso.
- Si queremos hacer seguimiento mediante Google Analytics de las versiones traducidas de nuestra web (interesante)
Cuando tengamos todo seleccionado hacemos clic en “Get code“.
Para terminar, la herramienta nos ofrecerá los códigos a insertar en nuestra web. Hay dos, uno que deberemos añadir en el archivo header.php de nuestro tema activo, antes de la etiqueta < / head >, y otro, que podemos copiar y pegar en nuestro tema directamente, donde queramos que se muestre, o en un widget de texto de la barra lateral, un sitio bastante habitual para estas utilidades.

Y ya está, si más adelante quieres modificar el comportamiento o aspecto del traductor en la misma página inicial tienes un enlace para administrar traducciones existentes, donde tendrás la recién creada.

La idea me la dio beginWP

Ayuda WordPress está alojado en Gigas Cloud WordPress, hosting en la nube especializado en WordPress

AYUDA WORDPRESS

domingo, 4 de noviembre de 2012