Con el siguiente código se genera el botón Pin It de Pinterest usando las funciones de WordPress para capturar la URL del post, la imagen asociada al post y el título del mismo:

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php echo get_the_title(); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

Para poder usar la función de “the_post_thumbnail” tú theme lo debe activar, si no lo está ya, puedes leer más sobre este tema en la documentación de WordPress: Post Thumbnails Codex

Nota: El archivo javascript no hace falta añadirlo cada vez, si lo llamas en el footer.php antes del </body> ya te puedes olvidar de esa llamada.

PD: También me puedes encontrar en Pinterest:  https://pinterest.com/thedavis/

Más información | Pinterest

En Cristalab han publicado un pequeño tutorial para ir viendo como se hacen estas validaciones que realiza el mismo navegador sin necesidad de javascript.

Fuente: Cristalab

Fuente: Cristalab

Introducción a HTML5

Genial introducción al futuro de la web, el HTML5

Taller de SEO

Muy buena conferencia sobre SEO, SEM y PPC.

Hace unos días publicaron en Smashing Magazine cinco técnicas muy útiles basadas en CSS y jQuery.

1. Efectos de texto animados,
2. Animar imágenes sin GIFs,
3. Menús drop-down,
4. Navegación Slideshow,
5. Iconos animados en botones sobre el evento hover.

Personalmente el mejor tip de todo el post es el número 2, el animar un fondo sin usar un gifs, es impressive.

Que disfrutéis ;)

Vía: Smashing Magazine

Sizzle

La incorporación de Sizzle hace que la velocidad en búsqueda de selectores se vea incrementada y ofrezca unos resultados muy interesantes.

Inyección HTML reescrita

Los métodos jQuery.html(), .append(),.. encargados de generar HTML dinámicamente han sido reescritos obteniendo una mejora de un 6x en algunos casos sobre jQuery 1.2.6.

Descargar

jQuery Minified / jQuery Regular

Usar con Google Ajax Libraries

Los que usan Google Ajax Libraries para no tener que alojar jQuery en sus servidores lo pueden usar mediante esta URL: http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

Un selector CSS es el conjunto de reglas en nuestro CSS nos permite dar estilos a un elemento u otro de nuestro HTML.

Fuente: anieto2k

Fuente: anieto2k

Me ha costado unos 20 minutos revisar los tags mal implementados del template y eliminar el parámetro wmode=”transparent” del plugin WP-Video que genera los «objects» para el Youtube. Resulta que con ese parametro no valida para el XHTML 1.0

La linea que he modificado del archivo videos.php del plugin es la siguiente:

define("YOUTUBE_TARGET", "<object type=\"application/x-shockwave-flash\" data=\"http://www.youtube.com/v/###URL###\" width=\"###WIDTH###\" height=\"###HEIGHT###\" ><param name=\"movie\" value=\"http://www.youtube.com/v/###URL###\" /></object>");

CSS:

#bottom_fade{
width: 600px;
height: 200px;
z-index: 99;
position: fixed;
bottom: 0%;
background-image:url("bottom-fade.png");
}

Llamada en la web:

<div id="bottom_fade"></div>

Si deseamos que este efecto se vea en todos los navegadores ha excepción de Internet Explorer 6 y versiones más antiguas, al selector #bottom_fade le agregaremos:

visibility: visible !important;
visibility: hidden;

Ver demostración on-line – Descargar ejemplo

Fuente: Xyberneticos

HTML:

<button class="submitBtn"><span>Publicar</span></button>

CSS:

button {border:0; cursor:pointer; font-weight:bold; padding:0 20px 0 0; text-align:center;width:auto; overflow:visible;}
 
button span {position:relative; display:block; white-space:nowrap; padding:0 0 0 20px;}
 
button.submitBtn {background:url(images/btn_blue_right.gif) right no-repeat; font-size:1.2em;}
 
button.submitBtn span {height:30px; line-height:30px;background:url(images/btn_blue_left.gif) left no-repeat;color:#fff;}
 
button.submitBtn:hover {background:url(images/btn_blue_right_hover.gif) right no-repeat;}
 
button.submitBtn:hover span {background:url(images/btn_blue_left_hover.gif) left no-repeat;}

Ver demostración on-line – Descargar ejemplo

Fuente: Xyberneticos

La opción que presento hoy es utilizar un plugin para Firefox llamado PDF Download. Este plugin se activa cuando pulsas un link PDF permitiendo elegir cuatro opciones: descargar el PDF, abrirlo ( con el programa que tengas configurado), verlo en HTML o cancelar la acción. Ya lo he probado y lo recomiendo para todos los que estáis cansados de que se os quede frito el Firefox por culpa de un PDF!!!

Descarga: PDF Download

Fuente: Xyberneticos

1. Cambiando el centro inicial de tu mapa

Para cambiar la posición inicial que se muestra en el mapa cuando se carga hay que cambiar la línea siguiente:

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Tienes que cambiar los parámetros de la función GLatLng por la latitud y longitud de tu nuevo centro inicial de mapa, el ultimo número (13) es el zoom inicial del mapa.

¿Y como encuentro las longitudes y latitudes para que GoogleMaps lo entienda?

Muy fácil vamos a la web de GoogleMaps y buscamos el lugar que queramos mostrar por ejemplo este. La latitud y longitud estan en la URL, por ejemplo en este caso es 41.548929,2.42609, justo lo que viene detrás de &ll=

Si queremos que este sea nuestro centro de mapa inicial debemos poner esos datos en la funcion GLatLng de nuestro script.

map.setCenter(new GLatLng(41.548929,2.42609), 13);

Si no nos aparece la URL con los datos ( a veces no sale en ese formato ) puedes probar de pulsar en link que hay arriba en la derecha, justo encima del marco del mapa y que pone “Enlazar con esta página”, seguramente aquí salga la URL completa e indicando los datos de latitud y longitud.

Aquí tienes el ejemplo.

2. Añadir paneles para trabajar con tu mapa

Ahora vas ha añadir unos controles que permiten moverte por el mapa, hacer zoom, una leyenda con la escala del mapa y ademas poder cambiar las vistas entre Satélite, Mapa o Híbrido.

Debes añadir las siguientes líneas al script:

map.addControl(new GLargeMapControl());
 
map.addControl(new GScaleControl());
 
map.addControl(new GMapTypeControl());

GLargeMapControl -> Te pemite hacer zoom y moverte mediante botones por el mapa, además poder volver al centro inicial.

GScaleControl -> Añade una leyenda en la parte inferior izquierda con la escala del mapa.

GMapTyeControl -> Te permite cambiar entre los diferentes modos de ver un mapa.

Puedes ver el resultado aquí.

3. Añadir un icono en un punto del mapa

Ahora vamos a insertar un marcador en el mapa, justo en el centro inicial. Cuando se haga “click” al punto se centrará la vista al punto en cuestión. Además tendrá un globo con información. Se pueden añadir tantos puntos como se quieran y donde quieran. Pero para este caso vamos a añadir solo uno:

var punto = new GLatLng(41.548929,2.42609);
var marcador = new GMarker(punto);
GEvent.addListener(marcador, "click", function() { map.panTo(new GLatLng(41.548929,2.42609));});
map.addOverlay(marcador);
marcador.openInfoWindowHtml("<b>Mi primer PUNTO</b>");

Con la función GMarker creamos el marcador en el punto localizado por la variable “punto”.

Con GEvent, creamos un evento al hacer click en “marcador“, lo que se hace al hacer “click”, en este caso, es ir a la posición ( map.panTo) 41.548929,2.42609 y con openInfoWindowHtml se abre una ventanita en forma de globo con información en formato Html.

Puedes ver el resultado aquí

Pues esto es todo, la verdad es que para hacer cosas básicas no se requiere muchos conocimientos, tan solo conocer un poco las funciones y probar cosas, con este manual espero ayudar a quiénes empiezan con esto de los mapas.

Si tenéis dudas o hay algo que no queda claro, enviar un comentario, se agradece.

1. Obtener una API Map Key para tu sitio web.

Lo primero es obtener una clave ( API Map Key) unica para tu sitio web. Para ello pulsa usa este enlace: http://www.google.com/apis/maps/signup.html Lee y acepta el contrato de licencia y escribe tu dominio en el cuadro de texto. Por ejemplo, en mi caso debería escribir http://arpaneting.es

Después solo queda pulsar el botón “Generate API Key”. Al pulsar el botón se cargará una página indicándonos cual es nuestra API Key y mas abajo un pequeño ejemplo para insertar en nuestra web.

Por cierto, debemos disponer una cuenta Google para usar este servicio. Si no dispones de cuenta Google, puedes crearte una en este enlace: https://www.google.com/accounts/NewAccount

2. El Hola Mundo de Google Maps

Para empezar vamos a usar el ejemplo propuesto con la obtención del Key.

<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 
<title>Google Maps JavaScript API Example</title>
 
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAGGsVOfIe1O9VOn4mNrQX0xQtNsDi2D1JnAyi1pJIVz-nuu_flxTHt4Mx9hkHG73tdiQo9f6fY-cE1A" type="text/javascript"></script>
 
<script type="text/javascript">
//<![CDATA[
function load() {
 
if (GBrowserIsCompatible()) {
 
var map = new GMap2(document.getElementById("map"));
 
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
 
}
 
}
//]]>
 
</script>
 
</head>
 
<body onload="load()" onunload="GUnload()">
 
<div id="map" style="width: 500px; height: 300px"></div>
 
</body>
 
</html>

El código anterior lo pondremos en un archivo html en blanco y lo subiremos a nuestro servidor web o hosting. Hay que cambiar la API Key con la obtenida en el paso anterior para que coincida con la de vuestro dominio.

La Key está en el ejemplo siguiente, hay que insertar la Key después de key=

src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAGGsVOfIe1O9VOn4mNrQX0xQtNsDi2D1JnAyi1pJIVz-nuu_flxTHt4Mx9hkHG73tdiQo9f6fY-cE1A">

El resultado en el navegador debe ser como aquí.

¡¡ Ya tienes tu primer GoogleMap en Internet !!

Aquí acaba la primera parte, en la segunda aprenderemos a cambiar el centro inicial del mapa, añadiremos controles para interactuar con el mapa, como añadir puntos en el mapa y mostrar globos con información en el mapa.

Si tenéis dudas enviar un comentario, se agradece.