You are on page 1of 28

Tu mejor ayuda para aprender a hacer webs

www.desarrolloweb.com

Todo sobre los servicios de


Google

Autores del manual


Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez Eduardo Manchn Borja Snchez
Director de DesarrolloWeb.com http://www.alzado.org/ Consultor web
http://www.desarrolloweb.com (2 captulos) http://www.musicleft.net
(7 captulos) (2 captulos)
Javier Chaure Csar Pietri David Yanover
Desarrollador freelance http://www.tips-web.com Director de MasterMagazine
http://www.xski.net/ (1 captulo) http://www.mastermagazine.info
(2 captulos) (1 captulo)
Manu Gutierrez Jordi Camps
http://www.tufuncion.com Especialista SEO y responsable de
(1 captulo) desarrollo web.
http://www.netdebugger.com
(1 captulo)

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 1


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

AdSense de Google: Publicidad Inteligente


Los sitios web conviven y compiten en un mundo virtual que se separa inevitablemente de la
realidad, cambiando los parmetros tradicionales de comunicacin y trabajo.

Para cualquier proyecto o empleo la rentabilidad es un punto elemental para un buen


crecimiento.

No es necesario salir a la calle en busca de anunciantes, sino visitar uno de los tantos sistemas
de afiliados, los cuales renen a sponsors y webmasters gratuitamente. Es un entorno nico y
digno de ser aprovechado por pequeos y medianos sitios, aquellos que no tienen las
herramientas para obtener de forma independiente anunciantes serios y confiables. Una de las
opciones actuales, y de mayor seguridad es la propuesta de Google, que lleva los clsicos
anuncios vistos en su motor de bsqueda a cientos de miles de pginas alrededor del mundo.

AdSense de Google es la solucin para muchas publicaciones digitales. El programa soporta


avisos de habla hispana, con lo cual la Internet de nuestro idioma no queda afuera, como suele
habitualmente en este tipo de mercado. No obstante, los anuncios en espaol no pagan tan
bien como aquellos en ingls, e incluso a veces escasean.

Una vez aceptado en el servicio (los miembros deben cumplir ciertos trminos), el usuario se
encuentra con un simple panel de control, el cual informa del rendimiento de la publicidad,
advirtiendo la cantidad de clics e impresiones realizadas durante un cierto perodo de tiempo.
Asimismo, est habilitado un historial de pagos. AdSense enva un cheque a cada webmaster
al final del mes, siempre que se haya alcanzado el mnimo de ganancia establecido, US$ 100.
De lo contrario, el dinero queda acumulado para el mes prximo.

Por ltimo, la cabina de AdSense permite disear el tamao, los colores y el tipo (texto,
imagen o ambos) de anuncio, entre otras caractersticas. Actualmente se permiten mostrar
hasta tres bloques de publicidad en una misma pgina. Tambin pueden establecerse criterios
de seguimiento, para administrar con mayor detalle la publicidad. Esta ltima modalidad tarda
48 horas en actualizarse, mientras que los datos globales lo hacen varias veces al da.

Pero lo ms sorprendente es el modo AdSense para contenido, en el que los avisos


publicitarios son seleccionados automticamente mediante filtros, de acuerdo al contenido de
la pgina que los abre.

Por lo tanto, un artculo sobre impresoras, publicado en un sitio de tecnologa, mostrar, en su


mayora, anuncios relacionados a la impresin.

Por su parte, AdSense para bsqueda combina un servicio para los visitantes del sitio y un
sistema rentable al mismo tiempo, lo cual resulta beneficioso para todos. Esta modalidad es
100% configurable, para adecuarse al diseo de la publicacin electrnica que lo est
utilizando. Mientras que el navegante encuentra los anuncios en los resultados de sus
bsquedas, estando los primeros vinculados con los segundos.

Entonces por qu salir a la calle a buscar anunciantes para un sitio de Internet en lugar de
hacerlo dentro del propio entorno digital? AdSense de Google es confiable, eficaz, rpido y fcil
de instalar en cualquier sitio web. Lo nico que se requiere para beneficiarse de este servicio

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 2


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

inteligente de publicidad es trfico.

Pgina de Adsense de Google


Nota: Ha salido al mercado un libro en espaol que ensea cmo optimizar los espacios publicitarios de
Adsense para as mejorar los ingresos con Google. El libro se llama Los Secretos de Adsense y lo hemos
comentado en DesarrolloWeb.com.

Artculo por David Yanover

Aprendiendo a usar Google Analytics


Hasta ahora siempre haba usado Awstats y aunque tena muchas limitaciones, me haba
acostumbrado a esta herramienta de anlisis de estadsticas de servidor. Sin embargo hace
unos meses Ubaldo me coment las bondades de Google Analytics y decidimos ponerlo en
Panoramio y Alzado. Al principio me cost mucho adaptarme, pero tres meses ms tarde las
ventajas de Google Analytics (en adelante GA) se han hecho evidentes:

Permite comparaciones y seguir tendencias

Un nmero en bruto no sirve de nada si no lo puedes comparar con otro. Saber que en X
periodo han habido X pginas vistas no te dice mucho, es mucho o poco? va el sitio bien o
mal? Solo cuando comparas con las pginas vistas de un periodo equivalente en el pasado este
nmero sirve de algo. Esto te lo dir cualquier experto en anlisis de datos y es justo lo que
hace GA.

Con casi cada dato que da, GA incluye por defecto la comparacin con un dato anterior y la
correspondiente tendencia (flechitas verde, sube, o roja, baja). Esto ayuda a saber de un
vistazo la evolucin del sitio. La comparacin por defecto es de una semana, pero se puede
configurar al periodo que nos interese.

Los tradicionales programas de estadsticas dejan mucho que desear porque aunque incluyen
todos los datos (incluso ms datos que GA), las comparaciones deben ser de memoria. Sucede
que con el tiempo sueles aprender los nmeros que sueles tener, es un poco primitivo, poco
fiable y no te da una visin clara de la evolucin del sitio.

El incoveniente de GA es el primer da que se usa. Al estar tan centrado en comparar datos y


buscar tendencias, nesita cierto tiempo para acumular los datos que den sentido a sus tablas
de datos. La primera visin tras incluir GA en un sitio suele ser decepcionante, las
comparaciones quedan cojas al no haber datos histricos y no se comprende bien para que
sirven. Puesto que GA no analiza los logs de servidor sino que funciona a partir de un cdigo
que se incluye al final de cada pgina solo puede tener datos desde el da que el cdigo se
incluy. Hay que tener paciencia y dejarlo correr un par de semanas al menos para entenderlo.

Centrado en lo ms probablemente relevante

Tradicionalmente los programas de estadsticas incluyen mucha informacin que es poco


relevante: informacin sobre hits, ancho de banda, accessos de robots, host, tipos de archivo
descargados, etc. Aadir ms informacin no es gratis, tiene un coste, la informacin menos
relevante quita visibilidad a la informacin ms relevante.

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 3


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Ciertamente alguna de esta informacin puede ser til para personas que trabajan en
optimizacin de buscadores o para los tcnicos que se preocupan del rendimiento del servidor.
Sin embargo este exceso de informacin poco interesante y compleja, conlleva que el resto de
miembros de la organizacin y especialmente los responsables del sitio, terminen ignorando
las estadsticas.

En mi experiencia quienes toman las decisiones, apenas consultan las estadsticas ms all de
las pginas vistas y el nmero de visitantes globales. Normalmente simplemente no entienden
las estadsticas, no son capaces de sacar conclusiones y en mi opinin es por causa de los
tradicionales programas de estadsticas. Ignorar las estadsticas supone que los responsables
tomen decisiones sin tener en cuenta una informacin crucial y optar por la intuicin en lugar
de los datos cuantitativos objetivos.

En lugar de incluir toda la informacin disponible de una vez, GA se centr en solo lo que
estima que ms probablemente sea til y relevante (fuentes del trfico, contenidos ms vistos,
rutas de clicks, conversiones, etc.). Incluso tiene un resumen ejecutivo y el resto de
informacin la segmenta segn los objetivos (marketing, contenido, conversiones, etc.) y en
diferentes niveles de detalle. La informacin se dosifica.

Adems para no saturar con largos listados por defecto solo muestra los principales 5 datos de
cada anlisis. Evidentemente sacrifica detalles para dar una visin rpida y clara de lo ms
relevante para un siti web. Con este enfoque, a quienes disfrutan mirando las estadsticas de
su sitio hasta el mnimo detalle cada da para saber donde ha sido referenciado su blog y de
donde han venido 2 visitantes, GA no les satisfar.

Por otro lado la integracin de Adwords con Google Analytics y la posibilidad de definir metas y
averiguar conversiones (de visitante a cliente, o de registro a subida de fotos, por ejemplo)
son herramientas increiblemente tiles para mejorar la usabilidad del sitio y que ciertamente
interesarn mucho a los responsables del sitio y la gente de marrketing.

Conclusiones

GA es especialmente til para quienes no quieren perder demasiado tiempo mirando


estadsticas, sino quieren rpidamente conocer los nmeros ms relevantes del sitio y conocer
tendencias.

Quienes por distintas razones hasta ahora han prestado poca atencin a las estadsticas de su
sitio web ahora con GA le pueden sacar jugo y utilizarlas como herramienta bsica tanto es su
toma de decisiones como en su da a da.

Nota: Aunque parte de la crtica que hice a los sistema de estadsticas en el artculo: Logs y
estadsticas: la verdad, pero no toda, sigue siendo vlida, algunos de los problemas se
resuelven con sistemas como GA.

Artculo por Eduardo Manchn

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 4


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Traductor de Google - Como usarlo en mi Web?


Hace algunos das recib un mensaje en mi buzn de correo y me parece util compartirlo con
todos, el mensaje fue el siguiente:

" Hola cesar:


Por favor me gustaria saber como hago para colocar en mi pagina este traductor de paginas
del google que tu tienes en la tuya.
Agradeceria su respuesta.
Atentamente
Karina "

A lo que conteste:

Hola Karina, muy buena tu pregunta y lo mejor de todo es que es muy sencillo solo utilice la
herramienta que diseo Google para traducir paginas "Herramientas de idioma ", puedes
visitarlo en http://www.google.com/language_tools como puedes ver en ese sitio ellos tienen
un formulario para pasarle la Url que quieres traducir, pues bien lo que tienes que hacer es un
formulario en tu pagina Web emulando a este donde el action del form apunte a este servicio
de google y si lo deseas al campo de url le pones el valor de la pagina que quieres que se
traduzca, en mi caso http://www.tips-web.com/ por si no lo tienes claro todava te muestro el
cdigo que use:

Colocas las etiquetas Form:

<!--<form> </form> -->


Incluyes los campos que tendrn la direccin de la pagina, los idiomas disponibles y un botn para enviar el
formulario:

<INPUT size=55 value=http://www.tips-web.com/ name=u>


<SELECT name=langpair>
<option value="es|en">espaol a ingls</option>
</SELECT>
<INPUT type=hidden value=es
name=hl><INPUT type=hidden value=UTF-8 name=ie><INPUT type=hidden
value=UTF-8 name=oe><INPUT type=hidden value=/language_tools
name=prev><INPUT type=submit value=Traduzca>
//Y por ultimo le dices al formulario a donde debe ir cuando pinchen el boton, esto lo haces dentro de la primera
etiqueta del form quedara as:

< form action=http://translate.google.com/translate>

El cdigo completo quedara de la siguiente forma:

<FORM action=http://translate.google.com/translate> Traducir


una pgina Web:<BR> <INPUT size=55 value=http://www.tips-web.com/ name=u>
<BR> de<SELECT name=langpair>
<option value="es|en">espaol a ingls</option>
</SELECT><INPUT type=hidden value=es
name=hl><INPUT type=hidden value=UTF-8 name=ie><INPUT type=hidden
value=UTF-8 name=oe><INPUT type=hidden value=/language_tools
name=prev><INPUT type=submit value=Traduzca></FORM>

Recuerda cambiar la url con la tuya para que traduzca tu pagina, espero la informacin te
sirva.

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 5


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Artculo por Csar Pietri

Google Imgenes, la bsqueda de imgenes en la web


Lo que hace este buscador, como otros existentes, es rastrear e indexar cientos de millones de
las imgenes que estn asociadas a las pginas web, para luego ofrecrnoslas a los usuarios.

Cuando alguien entra en el buscador e introduce una determinada palabra, esta aplicacin le
devuelve aquellas imgenes que tienen dicho trmino asociado, bien porque sea el nombre del
fichero, o porque est relacionada con dicha palabra en los contenidos de la pgina web.
Google lo que hace es analizar el texto en la pgina adyacente a la imagen, la imagen en s
misma y otros muchos factores para deducir el contenido de la imagen.

Este servicio dispone de la bsqueda de imgenes ms extensa de la web, con miles de


millones de imgenes indexadas y disponibles para ser vistas. Para utilizar esta bsqueda de
imgenes, slo tienes que ir a la pgina de bsqueda avanzada o en la url
http://images.google.com e introducir una bsqueda en el cuadro de bsqueda de imgenes, y
luego hacer clic en el botn de "Bsqueda". En la pgina de resultados, simplemente hay que
hacer clic en la imagen pequea para poder ver la versin original, as como la pgina web
donde est ubicada.

Las imgenes identificadas por el servicio de bsqueda de imgenes Google pueden estar
protegidas por derechos de autor, con lo que llevan acarreadas consigo una serie de posibles
restricciones de uso. A pesar de que puedes localizar y acceder a las imgenes a travs de este
servicio, el problema viene a la hora de poder usar o no las mismas debido a sus derechos de
autor. Para poder usar alguna imagen que encuentres a travs de este servicio, te
aconsejamos comprobar su licencia y si fuera necesario que contactes con el dueo del sitio
para obtener el permiso.

Cuando vemos las imgenes, estas se muestran en un marco para que los usuarios podamos
verlas junto con la pgina en la que se encuentra. Si queremos buscar imgenes que tienen
una extensin de archivo determinada, debemos situarnos en la casilla de bsqueda avanzada
donde se puede especificar la extensin de archivo usando el operador de tipo de archivo. Por
ejemplo, si quieres encontrar imgenes de setas que estn en formato .gif. Buscaramos por:
(setas filetype:gif ).

Con Google Images se pueden realizar bsquedas complejas mediante operadores booleanos y
otros comandos Google. De hecho puedes usar todos los operadores para realizar una
bsqueda de imgenes que emplearas en Google. Por ejemplo, puedes usar "site:" con la
bsqueda de imgenes para as acotar sta a las imgenes de un sitio web especfico. De esta
forma, para hallar todas las fotos relacionadas con Madrid en la web www.guiarte.com , la
consulta sera "site:guiarte.com madrid" y nos mostrara todas las imgenes que buscamos en
ese sitio referidas a ese trmino.

En definitiva, esta aplicacin del potente buscador norteamericano puede resultar til, aunque
cabe recordar que para poder usar las imgenes que encontramos, hemos de pedir permiso al
propietario porque pueden estar bajo licencia copyright. Lo que es seguro es que podremos
visualizar un elevadsimo nmero de imgenes ya que es el buscador de imgenes ms amplio
de la Red actualmente.

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 6


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Artculo por Borja Snchez

Lo bsico para empezar a desarrollar con Google Maps I


Uno de los ltimos servicios del gigante Google que ms ha dado que hablar es Google Maps.
En un navegador, y a golpe de clic el usuario puede darse una vuelta virtual por el mundo,
disfrutando de fotos areas de gran calidad en algunas zonas, y del mapeado vectorial
completo de otras. Pero lo interesante del servicio es que Google ofrece una API (Application
Programming Interface) para todos aquellos interesados en usar este servicio e integrarlo en
su propia pgina, de forma simple y gratuita. A lo largo de este artculo veremos los
fundamentos para integrar Google Maps en nuestro website y a travs de un ejemplo
crearemos un primer mapa usando las funcionalidades ms bsicas de la API.

La caracterstica que sin duda ms llama la atencin del funcionamiento de Google Maps es su
interactividad. Podemos pinchar una y otra vez en el mapa para movernos por el mundo, hacer
zoom y elegir el tipo del mapa sin necesidad de recargar la pgina, todo ello de forma fcil e
intuitiva. Este tipo de aplicacin web se encuadra dentro de la tecnologa que Adaptive Path ha
dado por denominar AJAX (Asynchronous Javascript + XML). No vamos a profundizar en este
artculo en el planteamiento AJAX, sin embargo es conveniente hacer una breve resea para
conocer a grandes rasgos su funcionamiento.

AJAX no es una nueva tecnologa, sino una combinacin de tecnologas ya existentes para
ofrecer una nueva visin a la hora de crear aplicaciones web. Siguiendo un planteamiento
AJAX, usaremos CSS y DHTML para la presentacin de los datos, el DOM (Document Object
Model) para tratar dinmicamente la presentacin de estos datos, XML y XSLT para el correcto
intercambio y manipulacin de la informacin, XMLHttpRequest para obtener la informacin de
manera asncrona (cuando nos lo pida el usuario) y Javascript para coordinar a todos estos
agentes a nuestro gusto dependiendo de nuestras necesidades. De este modo, tenemos un
"motor" javascript entre la presentacin y el servidor, que nos har peticiones de informacin
de forma asncrona para incorporarla inmediatamente a la presentacin de nuestra pgina, sin
necesidad de recargarla y hacer una nueva peticin de pgina completa al servidor.

A grandes rasgos esta es la filosofa de funcionamiento de AJAX, un planteamiento que sin


duda ofrece grandes posibilidades, como las que podemos ver en prctica con Google Maps.
Podemos ver otros ejemplos de aplicaciones AJAX en Google Suggest y Gmail.

Como vimos anteriormente en la introduccin de este artculo, Google nos permite usar Google
Maps en nuestra pgina web de forma gratuita. A continuacin veremos cmo hemos de
proceder para realizar nuestro primer mapa, viendo los fundamentos de la API que Google nos
ofrece.

Los requisitos para empezar a trabajar son realmente escasos. Con un simple editor de html y
un servidor pblico podemos empezar a crear mapas en nuestro dominio. Es importante
resear que el servidor donde alojemos nuestros scripts para Google Maps ha de ser pblico,
entre otras razones porque Google monitorizar el uso que hagamos del mapa, de acuerdo con
sus trminos y condiciones de uso.

El primer paso para empezar a usar Google Maps es obtener una clave (key) que se nos
concede cuando nos damos de alta en el servicio. Esta clave es nica para cada usuario de

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 7


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Google Maps y es restrictiva en lo que se refiere a su uso, ya que slo nos permite usar los
scripts en uno de los directorios de nuestro servidor.

Una vez que tenemos nuestra clave ya estamos en condiciones de crear nuestro primer mapa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">


<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Introduccin a Google Maps - Desarrolloweb</title>

<script src="http://maps.google.com/maps?file=api&v=1&key=AADE_TU_CLAVE_AQU"
type="text/javascript"></script>
</head>

<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">

var map = new GMap(document.getElementById("map"));


map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);

</script>

</body>
</html>

Ejecutando este cdigo en un servidor pblico obtenemos como resultado el siguiente mapa,
que nos muestra una vista area de Madrid centrada en la Puerta de Alcal:

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 8


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Como se puede ver en el cdigo, hemos creado una nica capa con id="map" destinada a
contener nuestro Google Map. El script que viene a continuacin de la declaracin de esta capa
es el que genera el mapa. Veamos sentencia a sentencia qu hace el cdigo:
var map = new GMap(document.getElementById("map"));

Esta sentencia genera el mapa especificando como destino el id="map" que hemos
asignado previamente para nuestra capa contenedora. Ntese que el mapa se adaptar
al tamao que hayamos especificado para esta capa.
map.setMapType(G_SATELLITE_TYPE);

setMapType nos permite especificar el tipo de mapa que queremos visualizar. Como
puede verse en los selectores situados arriba a la derecha en el mapa, podemos elegir
entre las vistas "Map" (mapa vectorial), "Satellite" (fotografa de satlite) y "Hybrid"
(combina ambas vistas). En nuestro caso, ya que Google todava no dispone de mapas
vectoriales para Espaa, hemos elegido la vista de satelite que nos muestra la
fotografa area de la zona.
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

addControl nos permite incorporar elementos de control al mapa, tal y como son el
control de zoom que vemos a la izquierda y el selector de tipo de mapa. Dependiendo
de nuestras necesidades podemos incorporar estos controles, o incluso versiones de
menor tamao (GSmallMapControl) para mapas en tamao reducido. Por defecto el
mapa se muestra sin controles.
map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);

Con esta sentencia indicamos a nuestro GMap qu lugar queremos que muestre,
mediante el mtodo centerAndZoom. Los parmetros son un GPoint (que generamos a
continuacin a partir de su latitud y longitud) y el nivel de zoom que queremos mostrar,
de 1 a 16, siendo el nivel 1 el ms cercano y el 16 el ms alejado.

Google Maps ubica los puntos en los mapas a partir de su latitud y longitud. Esta
informacin debemos suministrarla nosotros, y para ello lo ms adecuado es usar
alguno de los servicios de geocoding disponibles en la red. Uno de ellos es por ejemplo
el de InfoSports, en el que con simplemente pulsar en cualquier punto del mapa
obtendremos la latitud y longitud deseadas para ese punto. Existen otros servicios de
geocoding disponibles de forma gratuita en la red que no exigen buscar el punto fsico
en el mapa, tales como Geocoder.us y geonames.org, en los que podemos realizar
bsquedas a partir del nombre de la ubicacin que buscamos.
Nota: El artculo continua en Desarrollar con Google Maps II. Pero atencin, que estos ejemplos de Mapas
de Google estn explicados para el API 1 de Google Maps. Pero si queremos ver explicaciones
actualizadas, siguiendo el API 2 de Google Maps, podemos consultar el artculo: Mapas de Google API 2.

Artculo por Javier Chaure

Lo bsico para empezar a desarrollar con Google Maps II


Como se puede ver en el artculo anterior sobre la creacin de mapas de Google, crear un

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 9


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

mapa y centrarlo en un punto es realmente simple. Sofistiquemos un poco nuestro mapa


aadindole unos marcadores, de tal forma que podamos ubicar determinados puntos de
inters en el mapa. El mapa con nuestros puntos de inters aadidos nos quedar de la
siguiente manera:

Lo primero que necesitamos son las coordenadas de los nuevos puntos, en este caso la Plaza
de Cibeles y la Plaza de Neptuno. A continuacin asociaremos un marcador a cada uno de los
puntos y lo mostraremos en el mapa. El cdigo que muestra este segundo mapa es el
siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">


<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Introduccin a Google Maps - Desarrolloweb</title>

<script src="http://maps.google.com/maps?file=api&v=1&key= AADE_TU_CLAVE_AQU"


type="text/javascript"></script>
</head>

<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">

var map = new GMap(document.getElementById("map"));


map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

//Puerta de Alcal
var point = new GPoint (-3.688788414001465, 40.41996541363825);
var marker = new GMarker(point);
map.addOverlay(marker);
//Plaza de Neptuno
var point = new GPoint (-3.6941099166870117, 40.4154238545226);
var marker = new GMarker(point);

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 10


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

map.addOverlay(marker);
//Plaza de Cibeles
var point = new GPoint (-3.693079948425293, 40.41940998761056);
var marker = new GMarker(point);
map.addOverlay(marker);
map.centerAndZoom(point, 3);

</script>

</body>
</html>

Como puede verse, declaramos una variable point a partir de la cual creamos el marcador para
posteriormente mostrarlo en el mapa con addOverlay. En esta ocasin hemos centrado el
mapa en el ltimo punto declarado, el correspondiente a la Plaza de Cibeles.

Estupendo, ya tenemos un mapa creado con una serie de puntos sealados sobre l, pero no
aportan ninguna informacin al visitante. Lo apropiado sera satisfacer la curiosidad del usuario
proporcionndole algo de informacin asociada a ese punto. Aadamos pues algo ms de
informacin a nuestros marcadores mostrando unas ventanas informativas que nos indiquen el
nombre de la ubicacin fsica sobre la que nos encontramos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">


<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Introduccin a Google Maps - Desarrolloweb</title>

<script src="http://maps.google.com/maps?file=api&v=1&key= AADE_TU_CLAVE_AQU"


type="text/javascript"></script>
</head>

<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">

var map = new GMap(document.getElementById("map"));


map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

function createMarker(point, nombre) {


var marker = new GMarker(point);
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(nombre);
});
return marker;
}

//Puerta de Alcal
var point = new GPoint (-3.688788414001465, 40.41996541363825);
var nombre = "Puerta de Alcal";
var marker = createMarker (point, nombre);
map.addOverlay(marker);
//Plaza de Neptuno
var point = new GPoint (-3.6941099166870117, 40.4154238545226);
var nombre = "Plaza de Neptuno"
var marker = createMarker (point, nombre);
map.addOverlay(marker);
//Plaza de Cibeles

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 11


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

var point = new GPoint (-3.693079948425293, 40.41940998761056);


var nombre = "Plaza de Cibeles"
var marker = createMarker (point, nombre);
map.addOverlay(marker);
map.centerAndZoom(point, 3);

</script>

</body>
</html>

Este cdigo nos genera el siguiente mapa, en el que al pulsar sobre el punto de la Plaza de
Cibeles

Efectivamente se muestra la ventana informativa con los datos asociados a ese punto. En este
ejemplo hemos creado una funcin que nos crea los markers y sus correspondientes
infoWindows para ahorrar algo de cdigo. Esta pequea funcin recibe como parmetros el
GPoint donde queremos ubicar el marker, y un parmetro "nombre" que contiene la
informacin que queremos mostrar en la ventana informativa asociada.

Hay que resear que para asociar la aparicin de la ventana con el clic del usuario sobre
nuestro punto tenemos que asociarle tal evento, que es lo que se hace en la sentencia:

GEvent.addListener(marker, 'click', function() {


marker.openInfoWindowHtml(nombre);
});

De esta manera cada vez que se hace un clic sobre el marker se muestra en la infoWindow la
informacin especificada en el parmetro "nombre". Ntese que hemos usado
openInfoWindowHtml, que toma su parmetro como cdigo html, de modo que podramos
incluir una maquetacin al contenido de nuestra nueva infoWindow.

A lo largo de este artculo hemos visto las funciones ms bsicas de Google Maps, que
proporcionan las herramientas ms rudimentarias para manejar el servicio. Pese a no haber
profundizado sobre la verdadera potencialidad del servicio, residente en el uso de XML, con lo
aqu aprendido tenemos ya el bagaje necesario para empezar a profundizar en la API de

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 12


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Google Maps y empezar a crear scripts ms avanzados.


Nota: Hemos visto aqu explicada el API 1 de Google Maps. Ahora estos cdigos deben actualizarse
siguiendo el API 2 de Google Maps. Para ello podemos consultar el artculo Mapas de Google API 2.

Artculo por Javier Chaure

Coop, tu propio buscador personalizado con Google Co-op


Presentamos un servicio de Google que puede ser muy interesante para los webmaster que
deseen disponer de su propio buscador interno en pocos minutos, utilizando la tecnologa de
Google y con la oportunidad de ganar dinero con Adsense. Es un producto que ha sido lanzado
hace relativamente poco, de hecho, en el momento de escribir este artculo todava se
encuentra en fase Beta.

Como decimos Google Co-op es un servicio que permite crear un buscador de Google
personalizado. La personalizacin ms destacada es que se puede elegir los sitios web de los
que Google muestre los resultados, aunque tambin existe la posibilidad que muestre
resultados en toda la web. Si nosotros le decimos que busque slo en nuestro sitio web,
obtenemos en minutos un buscador interno que podemos integrar en nuestra pgina.

La pgina donde se ofrece el servicio es http://www.google.com/coop/

Por ahora slo se encuentra en ingls, aunque suponemos que pronto presentarn la versin
en espaol.

Durante el registro nos solicita una informacin bsica para crear un buscador personalizado,
como el nombre del buscador y el sitio donde deseas que realice las bsquedas. Una vez
terminado el registro podemos configurar muchas otras cosas del buscador a travs de un
panel de control.

Adems, podemos crear un nmero ilimitado de buscadores personalizados, cada uno con sus
propias configuraciones. Para ello tenemos un panel de control independiente para cada
buscador personalizado, en el que podemos definir datos como:
Datos generales, como nombre del buscador y preferencias generales.
Sitios donde realizar las bsquedas, o sitios que excluir de los resultados.
Refinar sitios y conceptos para ayudar a los usuarios en las bsquedas
Aspecto del buscador
Cdigos para insertar en tu pgina web e integrar el buscador de diversas maneras.
Herramientas de colaboracin para mantenimiento del buscador.
Ganar dinero con adsense
Y otros asuntos.

De los aspectos del panel de control cabe destacar un par de puntos.

Sobre los cdigos de insercin del buscador en tu web: Google te ofrece una pgina de inicio
para el buscador, que puedes personalizar. Tambin te ofrece un cdigo para insertar la caja de
bsqueda en tu pgina. Entonces las bsquedas las realiza dentro del buscador personalizado,
ofreciendo los resultados desde los servidores de Google. Pero tambin dispone de otra

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 13


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

interesante forma de integracin, para que los resultados de las bsquedas los muestre en tu
propio servidor. Es muy interesante, porque los resultados se muestran en tu propia pgina
web y los visitantes no dejan de navegar por tu sitio. Para ello te proporciona dos cdigos, uno
para incluir la caja de bsqueda y otro que tienes que colocar en la pgina que ofrecer los
resultados.

Otro tema interesante es que podemos ganar dinero asociando nuestra cuenta de adsense con
Co-op. Esto se hace tambin desde el panel de control del buscador personalizado. Una vez
que lo asociamos con nuestra cuenta de adsense empezamos a ganar dinero por los clic que se
realicen en los anuncios patrocinados del buscador.

Conclusin sobre Google Co-op

Es un servicio realmente interesante, que nos permite crear un buscador en minutos. Adems
la integracin en tu sitio es realmente sencilla, por lo que puedes tener un buscador interno
personalizado en minutos, que aproveche las ventajas de la tecnologa Google para hacer
bsquedas.

Nosotros lo hemos puesto en funcionamiento dentro de DesarrolloWeb.com. La integracin nos


ha llevado poco tiempo, como una hora y estamos muy contentos con los resultados. Podis
probar el buscador por vosotros mismos en nuestra pgina, con el formulario de bsqueda de
la cabecera.

Tenemos un artculo en desarrolloweb para arreglar los acentos en Google Coop.

Artculo por Miguel Angel Alvarez

Google Print, buscador de texto en libros


Como gran buscador de informacin, Google tiene como finalidad, entre otras, organizar la
informacin del mundo, para poder ofrecer acceso universal a sta. Es evidente que hoy en da
existe todava mucha informacin que no se encuentra en la Red. Aqu es donde Google Print
quiere incidir, ya que su misin fundamental es volcar el contenido de libros a la Red, para que
de esta forma, podamos encontrar en nuestras bsquedas frecuentes referencias a libros
relacionados con conceptos que estamos buscando.

Este proyecto es muy ambicioso, debido al extenssimo material que a lo largo de siglos se ha
ido forjando en forma de libros, pero los retos son para los grandes y Google, nos guste o no lo
es,verdad?. La frmula que se emplea en este proyecto es cuando menos, muy atrayente, ya
que se conjugan las evidentes ventajas de la digitalizacin de libros con la gran potencia del
potente buscador de Internet.

Con este proyecto, que lleva ya funcionado desde finales del ao 2004, se acerca en gran
medida la cultura a los internautas, consiguiendo as que, con la ayuda de la Red, se pueda
acceder a una infinidad de libros y al conocimiento de siglos de trabajo.

El funcionamiento de esta aplicacin de Google se basa en dos puntos principales. Uno de ellos
es el denominado Library Project, que se encarga de cerrar acuerdos con las ms afamadas
bibliotecas de todo el mundo para poder digitalizar su contenido y volcarlo en Internet. De esta

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 14


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

forma, Google ha ido dando forma a este proyecto apoyndose en una base slida de
conocimientos histricos y notables.

El segundo punto se ha llamado Publisher Program, el cual ofrece a los editores la posibilidad
de digitalizar todos sus libros y colocar stos a disposicin de cualquier usuario para poder
consultar su inventario, incluso el descatalogado. As les brinda una posible nueva lnea de
negocio, derivada de los ingresos de la publicidad de los enlaces patrocinados que estn
relacionados con sus libros.

Se dispone ya de gran cantidad libros digitalizados en Google Print y se puede decir que los
resultados son buenos e interesantes. Si bien el sistema nos permite buscar en el contenido de
los libros, slo nos va a mostrar por completo los resultados pertenecientes a libros que son de
dominio pblico. Y por ello, en muchas ocasiones, veremos un mensaje con "Lo sentimos, pero
el contenido de esta pgina est restringido". Esto es debido al tratamiento que se da a los
libros con derechos de autor en vigor.

Google Print, de esta forma, lo que hace es mostrarnos solamente las partes que tengan
permiso expreso para poder reproducirse y otra caracterstica es el procedimiento que da a los
libros escaneados de una biblioteca y que no se han unido al programa para editores de
Google Print, de los cuales solo podemos ver informacin bibliogrfica y ciertas pequeas
frases del texto que surge junto a su trmino de bsqueda.

El proyecto en sus comienzos, firmo un acuerdo con varias universidades muy importantes en
el mundo (Michigan, Stanford, Harvard, Oxford) y tambin con la Biblioteca Pblica de Nueva
York, con el objetivo de digitalizar los contenidos de sus bibliotecas. Esta aplicacin fue
conocida en Europa en los primeros meses de 2005 y han surgido algunas voces disconformes
con este proyecto, desde el lado ms cerrado de la cultura europea.

Otra piedra que se ha encontrado en el camino es el aspecto legal, debido a los derechos de
autor. Y es que Google Print ha sufrido ya varias demandas de casas editoriales por supuesta
violacin de sus derechos de propiedad intelectual. stas demandan que Google pida permiso
antes de escanear sus libros.

Google se adelanto a los problemas que se iba a encontrar y con la reticencia de las editoriales
en lo relativo a los derechos de autor, y sabia que uno de los pilares del xito de Google Print
sera el respeto a estos derechos. Por ello, la propia aplicacin brinda la opcin al editor de
elegir la forma en la que se muestran sus obras, ya sea total o parcial.

En conclusin, con la versin beta de Google Print, disponemos de una aplicacin ms del
popular buscador que nos permite buscar en los textos de los libros impresos. En mi opinin,
funciona razonablemente bien, si buscas un trmino te muestra los libros en los que aparece, y
si clickeas en uno de ellos te muestra la pgina que contiene lo que has buscado. Adems se
tiene la opcin de comprar el libro en diferentes tiendas on-line: Amazon, La Casa del Libro, El
Corte Ingls, etc.

http://www.books.google.es/

Artculo por Borja Snchez

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 15


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Picasa 2
Se trata de Picasa, un programa recientemente adquirido por Google que est causando muy
buenas impresiones entre los usuarios de cmaras digitales, que son los ms necesitados de
herramientas que permitan clasificar los cientos de fotos que se van almacenando en sus
discos duros. En este artculo comentamos la segunda versin del programa, Picasa 2.

Uno de los atractivos de Picasa es que resulta gratuito para uso personal y es muy fcil de
obtener, directamente desde la web de Google, en la seccin de Downloads. La descarga ocupa
poco ms de 3 Megas.

Descarga Picasa

Una vez se ha instalado Picasa y lo ponemos en marcha, el programa hace una bsqueda de
todas las imgenes localizadas en nuestro disco duro, para clasificarlas por su fecha y su
carpeta. Para ello crea una serie de albums visuales, con las miniaturas de las fotos o videos,
que nos sirven para acceder a los archivos de una manera ordenada. Adems de esos albums
iniciales, se pueden crear etiquetas para crear nuevos grupos rpidamente con los criterios que
deseemos. Adems, Picasa tambin nos permite asignar estrellas a cada foto, para valorarlas
por su inters, de modo que podamos tambin disponer de un acceso rpido a las fotos que
ms nos pueden gustar.

Referencia: En DesarrolloWeb.com hemos publicado un manual de Picasa, con explicaciones de las


acciones ms comunes que puedes realizar con Picasa para el retoque y formateado de imgenes para
utilizarlas en pginas web.

Las funciones de bsqueda de imgenes, as como las de clasificacin, pueden ayudarnos a


que nuestras fotos digitales no se pierdan en el olvido. De hecho, uno de los ganchos o slogans
con los que se ha lanzado este programa consiste en que encuentra hasta aquellas fotos que
podas haber olvidado. Nuestra primera prueba as lo confirma. No cabe duda resulta til y
entretenido volver a ver las fotos ms antiguas.

Aparte de las funcionalidades relacionadas con la clasificacin, Picasa tambin ofrece algunas
herramientas para editar y retocar las fotos. Entre las posibilidades, todas extremadamente
simples de aplicar, destaca el ajuste del contraste, color, luminosidad, o herramientas para
recortar la foto, rotarla, etc. Tambin se pueden aplicar algunos filtros como pasar a blanco y
negro, color sepia, etc.

Por ltimo, con las fotos que deseemos, Picasa ofrece posibilidades de hacer presentaciones,
pases de diapositivas, CDs, Backups, enviarlas por mail, incluso publicarlas en Internet. Para
ello, Picasa puede publicar las fotos en un blog o bien en un chat sobre fotografas, aunque
para ello hace falta disponer de Hello, un programa adicional que se integra dentro de Picasa.

http://www.hello.com/

Conclusin:

Picasa es un software muy recomendable. Ofrece todas las utilidades necesarias para clasificar
y ordenar las fotografas, aparte de algunas funciones adicionales para retocarlas. El programa
dispone de una interfaz muy agradable y resulta sencillo de utilizar.

Sobretodo los usuarios de cmaras digitales van a agradecer este programa, con interesantes

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 16


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

virtudes a las que hay que unir que es gratuito.

Existe otro programa muy recomendable, tambin comentado en DesarrolloWeb.com, Adobe


Photoshop Album. Con la nica diferencia de que este programa no es gratuito.
Descarga Picasa

Artculo por Miguel Angel Alvarez

Mapas de Google API 2


Seguramente ya conozcamos los Mapas de Google, un sistema que permite acceder a fotos de
satlite de todo el mundo que ha tenido bastante xito entre los Internautas. Si estamos
leyendo este artculo hasta podremos saber que los Mapas de Google tienen un API a travs de
la cual podemos integrarlos como servicio en una pgina web. Esto permite que en una pgina
web desarrollada por nosotros podamos colocar mapas y vistas satlite de distintos puntos del
planeta, todo de manera gratuita.

Bueno, pues en DesarrolloWeb.com ya habamos publicado un par de artculos sobre los Mapas
de Google que explicaban las reglas ms bsicas para empezar a publicar mapas satlite en
nuestro sitio.
Lo bsico para empezar a desarrollar con Google Maps I
Desarrollar con Google Maps II
Pero estos dos artculos utilizaban una API que Google ha actualizado, por lo que se haca
necesaria una revisin para mostrar cdigos de integracin de Google Maps que sean
compatibles con el API que se utiliza ahora.

Sin embargo, los artculos anteriores siguen siendo muy interesantes para leer, porque
explican algunas cosas bsicas como obtener una llave (Key) de Google, registrndonos en el
sitio de Google Maps, para poder utilizar los mapas en nuestro sitio.

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 17


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Ahora vamos a ver un cdigo para crear un mapa conforme a las especificaciones del Google
Maps API 2.

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

//funcin para cargar un mapa de Google.


//Esta funcin se llama cuando la pgina se ha terminado de cargar. Evento onload
function load() {
//comprobamos si el navegador es compatible con los mapas de google
if (GBrowserIsCompatible()) {
//instanciamos un mapa con GMap, pasndole una referencia a la capa o <div> donde queremos mostrar el
mapa
var map = new GMap2(document.getElementById("map"));
//centramos el mapa en una latitud y longitud deseadas
map.setCenter(new GLatLng(40.407,-3.68), 5);
//aadimos controles al mapa, para interaccin con el usuario
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl()); ;
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>

El cdigo est comentado para una mejor comprensin. Ahora a dar unas explicaciones
adicionales:

Primero, aunque est ms tarde en el cdigo, vamos a ver lo que hay en el body de la pgina.
Hay que ver que hemos definido un evento onload="load()", que sirve para llamar a la funcin
que genera el mapa, una vez se ha terminado de cargar la pgina.

Dentro del cuerpo de la pgina nos fijamos en la etiqueta div donde se mostrar el mapa:

<div id="map" style="width: 615px; height: 400px"></div>

El tamao definido con estilos a esta capa es importante, porque ser el tamao de
visualizacin del mapa. El API de Google Maps reconocer la anchura y altura del contenedor
para mostrar un mapa justamente ocupando ese espacio.

Ahora nos fijamos en el cdigo Javascript.

Primero se incluye la librera donde est el API Javascript para los mapas de Google.

<script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#"


type="text/javascript"></script>

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 18


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Si nos fijamos, este cdigo necesita que indiquemos nuestra propia Key del API de Google
Maps, que hemos conseguido al registrarnos. La tendremos que poner sustituyendo el texto
=#TU LLAVE GOOGLE MAPS#.

Luego podemos pasar a la funcin que genera el mapa, que se carga cuando se termina de
mostrar la pgina (la llamamos por el evento onload).

Esa funcin est bastante comentada y adems quiero dejar para artculos posteriores
distintos pormenores de la generacin de mapas, pero es muy importante llamar la atencin
sobre un punto crtico, que me dio un quebradero de cabeza cuando estaba probando los
mapas, hasta que consegu dar con el error. Se trata del mtodo de la clase GMap2
setCenter():

setCenter() se tiene que invocar justo despus de instanciar el mapa!!!

Si intentamos instanciar el mapa y hacer cosas antes de centrarlo no funcionar. Esto es algo
que est muy claro en la documentacin del API, pero que como es un poco larga de leer, es
fcil que no nos percatemos.

En mis pruebas me fall porque intentaba ponerle un tipo de mapa (vista satlite) y luego lo
centraba. El problema es que no sale ningn error especfico y es difcil hallar el problema.

Artculo por Miguel Angel Alvarez

Caractersticas generales de Google Maps y Yahoo Maps


Adems de proporcionar un servicio til Google ha querido ir an ms lejos haciendo una
interfaz muy plstica en la que los mapas fluyen de manera fcil en nuestro navegador, esta
caracterstica lo hace un sistema muy absorbente para el usuario.

Los mapas de la API de Google se basan en tecnologa Javascript,que sin duda nos hace la vida
ms fcil, puesto que no necesitas instalar software alguno y es compatible con prcticamente
todos los navegadore,Firefox ,Mozilla ,Opera ,Internet Explorer ,Netscape... De cualquier
manera podrs utilizar el mtodo GBrowserIsCompatible() para comprobar la compatibilidad y
mostrar un mensaje de error en caso que sea necesario.

Sin embargo tambien nos ofrece algunas limitaciones:


No proporciona servicio geocoding, es decir tu debers proveerle la latitud y longitud
del lugar pretendido, lo cul significa que deberas de confiar en herramientas geocoder
de terceras personas para conseguir la latitud y longitud de una determinada direccin.
La Google Maps Key que nos proporciona Google para generar mapas esta limitada para
una nica URL lo que nos obliga a tener un sitio Web para el desarrollo de las
aplicaciones.
La Google Maps Key es solamente vlida para un directorio de nuestro sitio Web
Puede ser utilizada para propsitos comerciales, pero debbe estar disponible para los
usuarios finales libre de pago, igualmente se puede utilizar en sitio protegidos siempre y
cuando la autentificacion sea gratuita.
Su uso y trafico no esta restringido pero si tienes ms de 50000 visitas deberias
contactar con Google.

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 19


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Yahoo Maps tambien tiene su propia API con algunas diferencias significativas, segun mi punto
de vista la mayor diferencia es que yahoo ofrece Geocoder.

Aqui os dejo una pequea comparativa:

Acepta unicamente longitud y latitud no posee


Porporciona su propio geocoder
geocoder
Los mapas puedes ser generados en cualquier Los mapas sern unicamente generados en
pgina con su correspondiente Key Yahoo
Utiliza Ajax No utiliza Ajax
Puede ser utilizado para propsitos comerciales Puede ser utilizado para propsitos comerciales
siempre y cuando sea gratuito para el usuario final pero es necesaria autorizacin por escrito
Puede agregar texto HTML en una pequea
Puedes agregar texto HTML o XML en una
ventana de informacin y permite el uso de
pequea ventana de informacin
IFRAMES
No se restringe su uso hasta un lmite razonable Ninguna restriccin de uso

Encontrar una herramienta Geocoder

Hay varias herramientas libres geocoder que proporcionan latitud y longitud de una direccin
pero estas no son espaolas por lo que su uso es limitado pero no os preocupeis hay
soluciones, en este artculo explico como hacerlo Todo sobre la API de Google Maps (3 Parte).

Artculo por Manu Gutierrez

Tienes una mashup sin KML para Google Earth?


Ayer estuve mirando muchas mashups Made in Spain y me di cuenta que la mayora de ellas
no tienen un archivo KML para Google Earth. Me sorprendi muchsimo porque daba por hecho
que todas las mashups tenan un KML. En Panoramio tuvimos un KML desde el principio y fue
clave para que la gente se enganchase al sitio.

Los mapas de Google Maps son perfectos para la web, pero para complementar la experiencia
es casi obligatorio dar un archivo KML para poder ver la misma informacin pero en Google
Earth donde volar por las imgenes de satlite en tres dimensiones es un autntico placer.
Digo casi obligatorio porque crear el KML lleva solo algunas horas.

Se pueden dar KMLs completos, de toda la data del sitio (los ms tiles) y tambin por cada
elemento o categora del sitio, cuantos ms ofrezcas, mejor experiencia.

Tutorial para crear KMLs (versin en castellano).

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 20


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Nota: No suelo publicar artculos tan cortos, pero el rea de las mashups de Google Maps esta bastante
desarrollada en Espaa, mucha gente se ha lanzado al ruedo y se ha movido rpidamente, lo que es
genial, por eso creo que vale la pena llamar la atencin sobre esta grave carencia de KMLs.

Artculo por Eduardo Manchn

Estudio de los resultados de Google CAT, el primer dominio


genrico especfico
Segn informa la Fundaci puntCAT, que gestiona el dominio .cat.

La activacin de google.cat supone un paso ms en el reconocimiento de la cultura y la


lengua catalana en todo el mundo, segn el director de la Fundaci puntCAT, Jordi
Iparraguirre.

Qu es la Fundaci puntCat?

La Fundaci puntCAT es un organismo privado sin nimo de lucro ni afiliacin poltica, fundada
el 28 de diciembre del 2005 y es la heredera de la desaparecida Associaci puntCAT, que tiene
por objetivo administrar el dominio .cat, y ayudar a desarrollar la Sociedad de la Informacin
catalanohablante.

Por qu es importante para NetDebugger?

El cataln es la lengua y la cultura ms arraigada en mi vida diaria y cotidiana. Es un orgullo


para m comprobar como el dominio .cat haya sido el primero que Google haya decidido
activar.

Veamos sus tcnicas.

Ahora al entrar en www.google.cat por defecto se nos abre la interfaz del idioma que hasta
ahora estbamos utilizando, pero desde este enlace http://www.google.com/intl/ca/ podemos
ver como todos los textos aparecen traducidos al cataln.

Esta caracterstica no es nueva ya que haca tiempo que podamos ver los mensajes y botones
segn la interfaz que queramos desde el enlace Herramientas del idioma que vemos al la
derecha del buscador.

Otra forma ms rpida era modificando la URL que vemos en una bsqueda. Solo tenemos que
buscar el parmetro hl=es y cambiarlo por las iniciales del idioma que nos interese; en este
caso con hl=ca vemos la interfase en cataln, hl=en en ingls

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 21


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Ms sobre el dominio .CAT.

Comprobando informacin sobre el dominio Google.cat vemos que la fecha de registro fue del
14 de Febrero de 2006 y expira el prximo 2008.

Esto significa que hace 1 y medio que este dominio estaba registrado en Internet pero hasta
ayer no podamos verlo desde nuestro explorador.

Qu supone para el SEO?

Aunque el software de Google constantemente est en desarrollo y en algunos casos se


muestre como un servicio en fase beta, son muchas las variables que determinan la posicin
de una palabra clave en sus resultados, por ejemplo el algoritmo del buscador o la calidad de
las pginas que encuentra su araa google Bot.

Desde mi modesta postura considero que a Google le gustara que todos sus usuarios
empezramos aprender a buscar informacin, utilizando sus herramientas de interfaz.

De este modo y dentro de unos aos, cuando observara que hemos adquirido suficientes
habilidades podra segmentar an ms estos resultados segn el idioma en que estuviera
escrito el contenido, el dominio del buscador donde realizamos la bsqueda y el pas donde se
encuentren alojadas las pginas. En pocas palabras, solo existira el dominio .COM donde los
resultados dependeran de todos los factores tcnicos que los SEO siguen da a da.

Veamos en un caso prctico.

Podemos buscar cualquier palabra pero existen algunas que son propias de algunos pases,
ejemplo: regio es una palabra propia en argentina que significa pefecto, correfoc conocida

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 22


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

en Catalua, su traduccin al espaol sera correfuego, y obrigado significa gracias en


portugus.

Pero en esta prueba he utilizado un nombre propio Jordi Camps, un trmino donde
encontramos ms de dos millones de resultados desde cualquier idioma posible en el que se
hubiera escrito un contenido.

Utiliza tu cuenta Google para ver este estudio SEO de los resultados desde distintos dominios e
interfaces y observa como:

La posicin de las pginas y el nmero de resultados vara segn el dominio Google.com,


Google.es y Google.cat, y la interfase de los resultados hl=en, hl=es, hl=ca.

Artculo por Jordi Camps

Google Calendar
Vamos a hablar de Google Calendar, una interesante herramienta para llevar tu programacin
de actividades, reuniones, citas y eventos en general. Como nos tiene acostumbrados Google,
es una aplicacin gratuita para cualquier tipo de usuario.

Google Calendar es como una agenda o calendario de actividades, que podemos programar
como deseemos. Es algo as como lo que tiene el Outlook del Office, pero online y con las
ventajas que ello significa, como que lo podemos consultar en cualquier ordenador y en
cualquier lugar del mundo, siempre que contemos con una conexin a Internet.

Con Google Calendar podemos crear varios calendarios y mantener informacin de varios
asuntos para tener separados, por ejemplo, los asuntos personales y profesionales. Los
calendarios pueden tener un cdigo de color para identificar visualmente los eventos y saber si
corresponden a uno u otro calendario. Pero lo bueno es que la aplicacin combina
automticamente todos los calendarios que queramos, para ver todas las citas en una sola
clasificacin diaria, semanal o mensual.

Otra caracterstica muy interesante es la de poder compartir calendarios. Es decir, nosotros


podemos crear un calendario o agenda y hacerlo pblico a todos los usuarios o a algunas
personas especficas, siempre que sean usuarios de Google Calendar tambin, claro est. La
verdad es que esta funcionalidad puede ser extremadamente til para los usuarios que
comparten trabajo en empresas deslocalizadas, puesto que a travs de una nica herramienta,
todos los interesados pueden planificar reuniones o eventos que quedaran visibles a todos los
del mismo grupo de trabajo. As se pueden prevenir problemas de comunicacin y
planificacin.

Pero lo que ms me ha parecido un detalle por parte de Google es realizar recordatorios por
SMS gratuitos. Lo cierto es que lo bueno de un calendario es que te recuerden las citas o
eventos antes que estos se produzcan, para no olvidarte de ninguno. Con Google Calendar te
ofrecen tres mtodos distintos de recordar una cita. Por medio de una ventana emergente, por
correo electrnico y por SMS. Adems, podemos definir varios recordatorios. Por ejemplo, que
te recuerde el evento un da antes por email y 10 minutos antes por SMS. Con este calendario
ya podemos estar tranquilos de no olvidarnos ningn cumpleaos de las personas que

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 23


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

queramos, puesto que nos puede llegar el SMS a nuestro mvil y nosotros inmediatamente
llamar por telfono para felicitar a tu familiar o amigo.

En definitiva, Google Calendar es una solucin muy atractiva y con muchas posibilidades para
sacarle partido, sobretodo a las personas poco organizadas o muy ocupadas. En poco tiempo
esta agenda puede hacerse una herramienta imprescindible para el que se acostumbre a
utilizarla. Como experiencia personal, a mi siempre me fue imposible llevar mis notas y
planificaciones en las tpicas agendas en papel, pero con este calendario online por fin he
podido llevar al da mis planificaciones y no olvidarme de nada de lo que escribo o planifico.

http://www.google.com/calendar/

Artculo por Miguel Angel Alvarez

Google Trends
Vamos a comentar un servicio de Google, que no es nuevo, pero que se est consolidando
como una herramienta muy interesante, tanto para personas que desean promocionar y
conocer la marcha de su pgina web, como a las que desean encontrar nichos donde
promocionarse.

Google Trends bsicamente hace uso de informacin que Google tiene muy a mano, para
ofrecer datos a los internautas que desean conocer tendencias de los usuarios de Internet.
Informaciones que, sin duda, pueden servir de mucha utilidad a los editores de pginas web. El
gigante de las bsquedas controla y conoce muy bien datos como la frecuencia con que
determinadas palabras clave se buscan en Internet, as como el trfico de distintas pginas
que hacen uso de Google Analytics.

Seguro que el servicio encantar a cualquier editor de pginas web. Podemos probar Google
Trends en http://www.google.es/trends

Encontraremos dos tipos de informaciones tiles:


Tendencias en las bsquedas de palabras clave
Trfico de distintos sitios web
Veamos con detalle cmo ofrece Google Trends estos datos de inters.

Tendencias en bsquedas

En cuanto a las tendencias en bsquedas, Google Trends ofrece informaciones sobre lo


usualmente que los usuarios buscan ciertos criterios o palabras clave o frases clave. Permite
escribir un conjunto de hasta 5 criterios de bsqueda separados por comas, que pueden ser
palabras o frases clave. Entonces ofrece un grfico de la evolucin en el tiempo con el que
dichos criterios se han consultado en el buscador.

Podemos ver por ejemplo una bsqueda con los criterios:

html, css, php, asp, javascript

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 24


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Con ello nos comparar la frecuencia de bsquedas de estas 5 palabras clave y nos ofrecer un
grfico con el que podremos apreciar la evolucin a travs de los aos de uso del buscador.

Pero no slo eso, sino que luego podremos seleccionar pases o regiones donde deseamos
acotar la bsqueda. Por ejemplo para que nos muestre la evolucin de las bsquedas de dichos
criterios entre los usuarios espaoles. Tambin permite acotar el grfico en el tiempo, para
mostrar los datos relativos a un ao, determinados meses, etc.

Los datos que ofrece, sobre cualquier mbito de inters de los editores, son muy interesantes
para comparar unos con otros, con relacin a localizaciones concretas y en el tiempo. Pero no
son especialmente tiles para medir exactamente el nmero de bsquedas de un determinado
tema, porque no ofrece datos exactos. Si uno se autentica con su cuenta de Google ofrece
algunas informaciones adicionales, pero no los datos precisos que permitan cuantificar las
bsquedas.

Comparacin de trfico de sitios web

Otro detalle importante para obtener informacin sobre las tendencias de uso de Internet es la
comparacin del trfico de sitios web. Es un dato que nos dar algunas referencias sobre el
uso de Internet, en concreto sobre el uso o preferencia de los internautas sobre distintos sitios
web. Todos estos datos los obtiene del servicio de estadsticas de Google Analytics, por lo que
si nuestro sitio web o el que pretendemos consultar, no tiene implementado este servicio de
estadsticas, no nos ofrecer ninguna informacin.

Para hacer comparacin de sitios web tenemos que pulsar el enlace "Websites" de la barra
horizontal azul, abajo de la cabecera de la pgina. Entonces podremos hacer una bsqueda
como:

elpais.com, elmundo.es, lavanguardia.es, abc.es

Eso nos comparar el trfico de los principales diarios de noticias espaoles, ofreciendo una
medida aproximada del trfico de cada uno en usuarios nicos diarios, si es que estamos
autenticados como usuarios de Google.

Al igual que el anterior caso, Google Trends ofrece la posibilidad de acotar por pas o regin y
por periodo de tiempo.

Conclusin sobre Google Trends

Recomendamos probar el servicio y sacar conclusiones sobre nuestro sitio web. Seguro que
pasaremos un rato entretenidos con la herramienta.

Lo malo es que a veces, para bsquedas muy especficas, no dispone de datos para ofrecer
informacin a los usuarios. Pero sin duda satisfar a la mayora de los editores de pginas
web.

No dejes de probar Google Trends en http://www.google.es/trends

Artculo por Miguel Angel Alvarez

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 25


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

La cach de Google como copia de seguridad


Este artculo surge de una experiencia que hemos padecido en DesarrolloWeb.com, debida a
una prdida de datos de la pgina. Lamentablemente, nadie est a salvo que un da se pueda
estropear algn hardware del servidor o una de las personas que trabaja con la pgina cometa
un error grave. Claro que para solventar una posible papeleta de este estilo estn las copias de
seguridad propiamente dichas. Pero Qu hacer cuando tambin fallan los procesos de copia
de seguridad?

Nunca debemos dar por supuesto que una copia de seguridad est realizndose, aunque
estemos pagando religiosamente a un proveedor por el servicio de copias de seguridad. Puede
ocurriros como a nosotros, que el da que vamos a restaurar unos datos no estn las copias
realizadas. No viene al caso seguir comentando el cmulo de circunstancias que puede surgir
en el momento menos oportuno. Lo dejaremos para futuros artculos de desarrolloweb.com.
Ahora lo que vamos a hacer es escribir sobre la solucin que tuvimos que adoptar, cuando
todas las dems no funcionaron.

Pues bueno, cuando todo lo dems falla, tenemos a San Google.

Google guarda una copia de las pginas que tiene indexadas en el buscador, en una cach
interna que tambin se encuentra disponible para los usuarios del motor de bsqueda.
Tenemos modos de evitar que Google muestre la cach de las pginas, pero espero que no
hayamos hecho eso, porque entonces perderamos la oportunidad de restaurar nuestras
pginas por este mecanismo.

Para cualquier resultado del buscador de Google aparece en la parte de abajo varios enlaces,
en un color verde claro. Uno de ellos es el enlace de la cach. Si lo pulsamos Google nos
mostrar cmo estaba la pgina el ltimo da que la accedi.

De esa manera podemos sacar cualquier dato que tengamos necesidad restaurar en nuestro
sistema. Ya slo quedara copiar la informacin que necesitemos y pegarla en donde sea, o
insertarla en una base de datos.

Eso si, no podemos confiar en la cach de Google. Es muy arriesgado y a veces, por lo que
sea, Google no muestra la cach de una determinada pgina o dice que no est disponible. De
hecho, hemos experimentado que unas veces puede decir que no existe una pgina en la
cach y luego al rato decir que s. Incluso accediendo desde dos ordenadores distintos al
mismo tiempo, estando stos en distintas redes, en uno muestra una pgina en la cach y en
otro no. Esto debe ser porque la cach debe estar balanceada en decenas o cientos de
mquinas servidores y a veces puedes acceder a una mquina que no localiza una informacin,
mientras que otro usuario accede a otra que s la muestra.

En definitiva, no os deseamos que os ocurra nunca una prdida de datos. Como hemos
comprobado, infelizmente, en nuestras carnes con desarrollo web .com, puede ocurrir hasta en
las mejores familias. Si surge, esperamos que tengis copias de seguridad y stas funcionen.
Pero si todo se tuerce, podis intentarlo con la cach de Google. Claro que ser ms laborioso
recuperar los datos, pero al menos ah estn.

Lo que no sabemos es por cunto tiempo van a permanecer los datos en la cache, por lo que
sera recomendable darse prisa en la recuperacin, as evitar que, cuando vayamos a recoger
los datos, no estn. Si alguien tiene alguna informacin que complete este asunto, se
agradecern los comentarios.

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 26


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Artculo por Miguel Angel Alvarez

Coloca un Botn add to Google


Seguro que habremos visto infinidad de veces el tpico botn de agregar a Google en las
pginas web que visitamos. Este botn que tiene el signo mas (+) junto con el logo de Google,
sirve para aadir un feed RSS a Google Reader o bien a la pgina de inicio personalizada de
Google (iGoogle). En este artculo de DesarrolloWeb.com veremos cmo agregar este botn
fcilmente a vuestro sitio web.

Como una imagen de muestra siempre es mejor que 1000 explicaciones, a continuacin podis
ver el botoncito de add to Google, que si lo pulsis os agregar el RSS de novedades de
DesarrolloWeb.com en vuestra cuenta de Google Reader o bien a vuestra pgina de inicio de
Google, si es que utilizis el servicio iGoogle.

Si pulsis el botn, podis hacerlo sin miedo porque todava requerir vuestra confirmacin,
accederis a una pgina web donde os pregunta qu es lo que queris hacer, entre las dos
opciones que comentaba: agregar el feed a Google Reader o a iGoogle. La pgina que aparece
ser parecida a esta:

Pues bien, para tener vuestro propio botn personalizado para que vuestros visitantes puedan
suscribirse rpidamente a vuestros RSS, simplemente tenis que hacer lo siguiente. Es tan
sencillo que podris hacerlo en 2 minutos.

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 27


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Primero hay que acceder a la siguiente direccin:

http://www.google.com/webmasters/add.html

Luego, tendris que rellenar un sencillo formulario para generar el botn.

Primero debis elegir qu es lo que queris que se agregue al pulsar el botn. En este caso
queremos enlazar con un contenido RSS o Atom Feed.

Luego, tenis que elegir si queris enlazar con un RSS (one) o con varios (several).

A continuacin debis escoger el tipo de botn. En el momento de escribir este artculo de


desarrollo web .com existen dos posibles botones, uno mayor y otro menor.

Por ltimo tendis que especificar la URL de vuestro feed RSS. Ser algo como
http://www.desarrolloweb.com/rss/novedades_rss.php (esta es la URL donde est el feed RSS
de las novedades de artculos de DesarrolloWeb.com)

Para obtener el cdigo del botn bastar con pulsar el botn de generar HTML (generate
HTML). Con ello aparecer en el campo textarea de abajo el cdigo que tenis que copiar y
pegar en vuestra pgina.

Con esto estar todo listo y conseguiris una nueva va para que los usuarios de Google (casi
todos lo somos) estn al tanto de las novedades de vuestro sitio.

Artculo por Miguel Angel Alvarez

Todo sobre los servicios de Google: www.desarrolloweb.com/manuales/servicios-google.html 28


Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

You might also like