ZonaW » Recursos para principiantes

Botón enviar a Pinterest

ZonaW — Mon, 20 Feb 2012 09:20:56 +0000

Todo el mundo habla de Pinterest, incluso después de haber pasado ya las primeras semanas desde su lanzamiento. Tal ha sido el éxito de esta red social que hasta existen noticias que afirman que: “los usuarios dedican más tiempo a Pinterest que a Twitter, LinkedIn y Google+ juntos” unos números realmente increícles. Si aún no sabes lo que es esta nueva red social, de una forma muy resumida, se podría definir como una nueva plataforma de microblogging con un estilo muy similar a Tumblr, otra plataforma de microblogging de la que ya hemos hablado en otras ocasiones cómo añadir el botón compartir en Tumblr.

¿Cómo aprovechar el tirón de Pinterest, para promocionar nuestra página?

Lo principal es ponérselo fácil a los usuarios de Pinterest, para empezar añadimos un botón para compartir nuestros artículos e imagenes sobre todo, ya que es el principal material que se comparte dentro de Pinterest.

El botón de enviar a Pinterest se puede configurar desde el apartado goodies.

Existen varios tipos de botones: horizontal, vertical y sin contador. Para configurarlo correctamente introducimos nuestro permalink (enlace permanente a nuestros artículos, la url de la imagen del Pin y una descripción opcional.

Esto nos generará un código listo para pegar en nuestro site como el siguiente:

Pin It

apple-touch-icon.png

ZonaW — Fri, 17 Feb 2012 08:36:14 +0000

Si has revisado recientemente los logs de tu servidor, concretamente el log_error, es muy probable que te hayas encontrado con varios errores de peticiones de unos ficheros llamados apple-touch-icon.png y apple-touch-icon-precomposed.png

¿Qué es apple-touch-icon.png?

Por su nombre puede parecer que hemos enlazado a una imagen que ya no existe en nuestro servidor, pero nada más lejos de la realidad. Este fichero lo solicita el navegador de iPhone (Safari), y es utilizado como icono cuando los uusuarios de estos dispositivos deciden hacer un acceso directo desde el menú principal a nuestro sitio web.

Para solucionar el error en nuestro servidor, nada más sencillo que crear un icono llamado “apple-touch-icon.png” con una medida de 57×57 px en formato .png y alojarlo en el directorio raiz de nuestro servidor. No hay que preocuparse por redondear los bordes de la imagen o darle ningún tipo de efecto de reflejos típico de los botones de iPhone, (recuerda que si eliges un .png tranparente el fondo se mostrará de color negro en la pantalla de iPhone).

Por contra si prefieres dedicarle más tiempo y hacer un icono más profesional, sólo tienes que hacerlo siguiendo los pasos anteriores pero guardando el fichero con el nombre “apple-touch-icon-precomposed.png” con esto mostraremos el icono tal cual lo hemos diseñado, sin ningún efecto añadido por Apple.

También se puede cambiar el nombre al fichero o guardarlo en otro directorio, simplemente añadiendo esta línea de código en el de la página.

Cómo enlazar una imagen en el pie

ZonaW — Thu, 16 Feb 2012 08:38:30 +0000

Parece que en la última versión de WordPress la 3.4 se añadirá una interesante mejora pedida desde hace tiempo por muchos webmasters y redactores. A pesar de que a priori parezca una mejora más, el hecho de facilitar la incorporación de los creditos, copyright o nombre y enlace en las fotografía que añadimos en nuestros artículos, puede evitar en gran medida los malos entendidos y reclamaciones de los autores de las imagenes.

Actualmente la mayoría de diseños ya ofrecen esta opción, también conocida como captions, por contra de lo que se pueda pensar los campos de título, texto alternativo o leyenda de la imagen no están preparados para insertar enlaces en el pie de las imagenes.

Si no quieres esperar a la salida de la nueva versión de WordPess, tienes varias opciones para enlazar una imagen en el pie:

Plugin

El plugin que se encarga de insertar los enlaces en las leyendas de pie de foto se llama Links in captions. Para hacerlo funcionar sólo hay que activarlo y cada vez que añadamos una imagen a la cual queremos poner su referencia, utilizar en el campo leyenda de pie de foto al subir una imagen, el siguiente código:

{link url="http://www.dominio-a-enlazar.com" target="_blank"
rel="nofollow"}Referencia al autor.{/link}

Código

Por otro lado, otra solución es añadir el siguiente código en el fichero functions.php de nuestro theme. Esto lo que hace es ofrecerte un nuevo campo cada vez que agregamos una nueva imagen en la que podemos poner la URL o referencia de la misma.

Añadir un nuevo campo de URL de origen de la imagen

add_filter("attachment_fields_to_edit", "add_image_source_url", 10, 2);
function add_image_source_url($form_fields, $post) {
	$form_fields["source_url"] = array(
		"label" => __("URL de origen"),
		"input" => "text",
		"value" => get_post_meta($post->ID,
                "source_url", true),
                "helps" => __("URL fuente de la imagen"),
	);
 	return $form_fields;
}
add_filter("attachment_fields_to_save",
           "save_image_source_url", 10 , 2);
function save_image_source_url($post, $attachment) {
	if (isset($attachment['source_url']))
		update_post_meta($post['ID'], 'source_url',
trim($attachment['source_url']));
	return $post;
}

Añadir el campo anterior al pie de foto

add_filter('img_caption_shortcode',
               'caption_shortcode_with_credits', 10, 3);
function caption_shortcode_with_credits($empty, $attr, $content) {
	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> 'alignnone',
		'width'	=> '',
		'caption' => ''
	), $attr));
	// Extract attachment $post->ID
	preg_match('/d+/', $id, $att_id);
	if (is_numeric($att_id[0]) && $source_url =
                      get_post_meta($att_id[0], 'source_url', true)) {
		if (!strstr($source_url, 'http://'))
			$source_url = 'http://' . $source_url;
		$parts = parse_url($source_url);
		$caption .= ' ('. __('via') .' '. $parts['host'] .')';
	}
	if (1 > (int) $width || empty($caption))
		return $content;
	if ($id)
		$id = 'id="' . esc_attr($id) . '" ';
	return ''
		. do_shortcode($content) .
          '' . $caption . '';
}

Inspeccionar elemento en FireFox

ZonaW — Mon, 13 Feb 2012 16:13:49 +0000

La última versión del navegador de Mozilla, Firefox 10 ha incorporado a sus constantes mejoras de rendimiento algunas novedades dignas de ser destacadas, ya que pueden ser de gran utilidad para los webmasters, a pesar de estar más enfocadas para desarrolladores y diseñadores web.

Es cierto que en versiones anteriores de FireFox ya se incluía una consola web, un editor Javascript y una sencilla herramienta para inspeccionar el Document Object Model (DOM), todo ello accesible desde la barra de herramientas, seleccionando la categoría desarrollador web.

En las nuevas versiones de FireFox, a partir de la versión 10, se ha incorporado, o mejor dicho, rediseñado un nuevo panel de desarrollo, donde se incluyen las funciones de inspector DOM y una herramienta para visualizar y modificar las propiedades CSS (al vuelo), es decir, podremos visualizar directamente los cambios en la página.

Para acceder a esta nueva herramienta, podemos hacerlo de dos formas, como se accedía anteriormente o posicionando el puntero sobre la página y haciendo click derecho en el menú inspeccionar elemento.

Una vez activada esta función, el inspector DOM permanecerá en nuestro cursor y según lo movamos por los diferentes elementos de la página se cambiará mostrándonos su composición, nombre del estilo CSS y código HTML. Todo muy bien mostrado gracias a unas completas “migas de pan” (breadcrumb o navegación por categorías).

Otro de los botones es el de estilo, que se encargará de abrirnos el panel de inspector CSS desde donde podremos acceder, modificar y eliminar elementos y su estilo CSS asociado.

Sin duda una nueva funcionalidad que si bien poco aporta si ya conocías otras extensiones más completas como Firebug, puede servir de gran ayuda para todos los webmasters, que realizan consultas en otros navegadores en los que no se disponga de la posibilidad de instalar extensiones.

Crear tooltips con jQuery

ZonaW — Thu, 09 Feb 2012 12:56:31 +0000

Los tooltips son esas etiquetas flotantes que aparecen cuando dejamos el cursor del ratón unos segundos parado encima de algún elemento con el fin de dar alguna aclaración o información extra.

Los tooltips de por sí, son feos y en muchos casos carecen de usabilidad, pero existen multitud de formas de darle diseño, una de ellas es por medio de jQuery.

Poshy Tip es un plugin gratuito jQuery utilizado para crear atractivos tooltips. Implementarlo en tu página no te costará apenas trabajo, ya que no requiere modificar la estructura HTML de tu site, ni añadir clases especiales, simplemente utiliza el atributo title.

Los tooltip ya están preparados con un diseño bastante agradable, pero como todo, es personalizable por medio de hojas de estilo.

Los siguiente son algunos ejemplos creados con Poshy Tip:

Para añadir a tu site sólo tienes descargar el plugin poshytip-1.1.zip subirlo a tu servidor, enlazarlo y añadir la siguiente llamada:

$('#demo-basic').poshytip();

El plugin permite multitud de configuraciones mediante parámetros, por ejemplo: ubicación del tooltip en relación al enlace, tooltip también al acceder a cajas de texto (input), retraso para que aparezca el tooltip, tooltip con varias imagenes dentro…

Cómo cambiar la estructura de enlaces (WordPress)

ZonaW — Wed, 01 Feb 2012 12:03:06 +0000

Los blogs que empezaron en WordPress hace unos años o las instalaciones por defecto de nuevos blogs, arrastran un “problema” con la estructura de sus enlaces permanentes (permalink). A pesar de ser muchos los que se han interesado con el tema de posicionamiento en buscadores (SEO) por mejorar esta estructura de enlaces en los últimos años, aún quedan bastantes blogs donde se puede ver la siguiente estructura de enlaces nada recomendable.

Por ejemplo, esta es la estructura de permalink que crea WordPress por defecto recién instalado:

http://www.ejemplo.com/?p=666

Con el interés por el posicionamiento en los blogs se hizo muy popular la siguiente estructura, a pesar de ser mucho más larga que la anterior. Aporta datos interesantes dentro de la misma URL como: fecha exacta y palabras clave:

http://www.ejemplo.com/2011/12/22/nombre-del-articulo

Poco después, se dió una vuelta más a las URLs eliminando el apartado de la fecha para intentar potenciar aún más el posicionamiento en buscadores:

http://www.ejemplo.com/nombre-del-articulo

Actualmente es recomendable si el número de visitas de nuestro blog aumenta de forma considerable y notamos cierta sobrecarga de nuestra base de datos, optar por un modelo de URLs donde se combinen por ejemplo, el identificador del artículo y las palabras clave del titular. Con esto evitamos que WordPress consuma toda la memoria del servidor y haga muchas más llamadas a bases de datos de las necesarias.

http://www.ejemplo.com/nombre-del-articulo/666

¿Cómo realizar de forma correcta un cambio de estructura de enlaces permanentes en WordPress?

El primer paso para realizar el cambio de estructura de URLs es acceder a la sección Ajustes > Enlaces permanentes en el panel de configuración de WordPress y añadir la estructura personalizada:

Primer ejemplo: Por defecto
Segundo ejemplo: /%year%/%monthnum%/%day%/%postname%/
Tercer ejemplo: /%postname%/
Cuarto ejemplo: /%postname%/%post_id%/

Hay que prestar especial atención a este cambio de URLs ya que pueden dejar de funcionar los enlaces que ya enlazaban a nuestra web desde otras páginas.

Gracias a la herramienta de Yoast, podemos generar las redirecciones para que al hacer el cambio de estructura todas las URLs antiguas sigan funcionando y los usuarios que accedan a ellas sean redireccionados a las nuevas URLs.

Para ello sólo tienes que rellenar los campos “URL” de tu site (si está en un subdirectorio ej: /blog) y la estructura de enlaces antigua. Una vez terminado pulsamos sobre “Generate Redirects” y nos dará una línea de código que tendremos que pegarla en el fichero .htaccess alojada en el directorio raíz de WordPress.

Simular resultados de búsqueda en Google (SERPs)

ZonaW — Fri, 27 Jan 2012 09:14:08 +0000

En ocasiones nos puede resultar de utilidad saber como se vería una determinada página o artículo en el búscador de Google, en la llamada ‘SERP’ son las siglas de ‘Search Engine Results Page’ ‘Página de Resultados del Buscador’.

Gracias a la herramienta Google SERP Snippet Optimization Tool es posible simular todo el entorno de la página de resultados de Google, personalizándolo con el: título, descripción y url de nuestra página o artículo. Entre otras opciones también ofrece una simulación más avanzada, con enlaces patrocinados (parte superior y derecha de la pantalla), incluir otros posibles resultados, agregar rich snippet como puntuaciones, mostrar los enlaces de caché y páginas similares, agregar una fecha o resaltar las negritas del campo descripción.

Este es un ejemplo de la simulación de resultados de búsqueda en Google.

Eliminar enlaces de todos los temas de un foro de forma automática

ZonaW — Wed, 25 Jan 2012 07:59:48 +0000

El caso Megaupload está causando muchas preocupaciones entre webmasters de foros en los que se intercambiaban enlaces para descargar desde este tipo de servidores. Por el momento ya han quedado inutilizables todos los enlaces que apuntaban hacia megaupload.com y se espera que ocurra lo mismo con otros servidores similares.

El caso es que en estos foros existen multitud de temas abiertos con este tipo de enlaces y en la mayoría de los casos eliminar enlace por enlace dentro de cada tema del foro se hace una tarea inviable.

¿Cómo podemos eliminar los enlaces de todos los temas de un foro de forma automática?

Existen varias posibilidades, (si se te ocurre alguna mejor, puedes dejárnosla en los comentarios) pero la que nos parece más sencilla y rápida de llevar a cabo es la siguiente:

Cambiar todos los enlaces que apunten hacia megaupload.com por la url de nuestra propia página del foro:

Antes de nada, muy importante, realizar una copia de seguridad de todo el foro. El siguiente paso es ejecutar la siguiente consulta SQL desde al AdminCP o desde el mismo MyPhpAdmin (recuerda que el usuario de Admincp debe tener permisos, para ello modifica el fichero config.php añadiendo el ID del usuario “Admin” por ejemplo).

(Importante prestar atención a las urls, las “www” y la posibilidad de utilizar comodines)

update post set pagetext= replace(pagetext,
'http://www.megaupload.com','http://www.urldelforo.com')

Una vez ejecutada la sentencia utilizar una redirección 404 en el fichero .htaccess

Cómo acceder a MySQL sin saber la contraseña

ZonaW — Mon, 23 Jan 2012 14:02:39 +0000

Si tienen algo en común la mayoría de los administradores de servidores es el caos con las contraseñas. Junto con las contraseñas del correo electónico, las contraseñas de las bases de datos son otras fácilmente olvidadizas.

Estos son los pasos a seguir para acceder o cambiar la contraseña de MySQL:

Editar el fichero de configuración que se encuentra en:

- /etc/my.cnf en Linux (incluido Plesk Linux)
- el fichero my.ini en Windows (para Plesk Windows es c:\program files\swsoft\plesk\databases\mysql\data)

Dentro de ese fichero localizamos [MySQLD] y justo debajo añadimos la siguiente línea:

skip-grant-tables

Una vez añadido, reiniciamos el servicio MySQL:

Desde Linux:

Para distribuciones RedHat (Fedora, CentOS…)

#service mysqld restart

Para otras distribuciones (Debian, Ubuntu…)

#/etc/init.d/mysqld restart

Desde Windows:

Si está administrado con Plesk, buscar la opción SQL para relanzarlo, (también se puede encontrar en “servicios” dentro de “Herramientas Administrativas”

Una vez reiniciado, se puede entrar ejecutando unicamente “mysql mysql“, sin usuario ni contraseña.

Google recomienda actualizar la versión de tu página

ZonaW — Fri, 20 Jan 2012 11:32:09 +0000

La imagen de cabecera es el mensaje que muchos webmasters nos hemos encontrado en el área de notificaciones de Google webmasters tools esta misma mañana. Esto suponiendo que nuestro CMS, sistema con el que manejamos la gestión de nuestro blog sea WordPress y se encuentre desactualizado.

En el blog oficial de Google, podemos encontrar anunciado que a partir de ahora nos será notificado cuando tengamos una nueva versión de nuestro CMS o plugins y no solo de WordPress, también de Drupal o Joomla por ejemplo. Con esto desde Google pretenden evitar que nuestros sites corran el riesgo de sufrir algún tipo de ataque o inclusión de software espía, del que por cierto, desde hace algún tiempo también se nos notifica por medio de este mismo panel de Webmaster Tools (en el apartado Diagnóstico > Software malintencionado).

Una creencia típica de muchos webmasters era la de eliminar de sus software de gestión de contenidos todo tipo de mención o referencia a la versión utilizada por miedo a poner aún más sencillo el ataque a la página al mostrar las vulnerabilidades mostrando su versión, en parte una creencia con bastante lógica. Pero a partir de ahora parece que es todo lo contrario y se aconseja utilizar etiquetas para ayudar a Google a saber la versión de nuestra web.

¿Cómo puede Google saber la versión que utiliza tu web?

Un ejemplo sencillo es visualizar el código fuente de la web y en caso de WordPress, la siguiente meta tag es la encargada de avisar a Google sobre la versión de nuestro site: