Archivo por de la categoria 'Google'

Guia de optimización para motores de búsqueda (1/2)

Nov 07 2011 Autor: J.P Aulet under General,Google,Internet,SEO

Para que una página tenga su público tiene que ser visible en la inmensa red y uno de los mejores formas son los motores de búsqueda. Segun informes de Google, sólo entre el 2 y el 4% de sus usuarios acceden a la segunda página o anteriores de su motor, quedándose un 96% de ellos en la página principal y obteniendo el primer resultado un 40% de las visitas (ver imagen inferior):

1 2 google serps1 300x173 Guia  de optimización para motores de búsqueda
Imagen 1 – Porcentaje visitas en Google: 1er. Resultado, 1ª Página y 2a. Página

Esto determina la importancia que tiene un buen posicionamiento web (también conocido cómo SEO). Existen muchos trucos y practicas para mejorar una página Web y así quedar mas bien posicionados. Algunos son muy conocidos, pero no por esto poco importantes, como son el ‘title’, ‘description’, ‘keywords’, pero otros aspectos importantes pasan desapercibidos. En este artículo intentaremos ponerlos todos al descubierto y además de mencionar los aspectos claves, también incluiremos las prácticas a evitar, que restan puntuación.

Las 20 Principales claves (y prácticas a evitar) para un buen posicionamiento web

1. El Título, etiqueta ‘title’

Indica los títulos de las páginas utilizando las etiquetas <title>. Usualmente será el contenido de esta etiqueta la que se mostrará como resultado de la búsqueda además de cómo título del navegador y la página. Se debe escoger bien al ser el principal motivo de que un usuario eliga o no el resultado como bueno para su búsqueda.

ejemplo google 650x279 Guia  de optimización para motores de búsqueda

Ejemplo real en Google de las ventajas de títulos individuales para cada página de contenido.

Prácticas a evitar:

seo stop Guia  de optimización para motores de búsquedaEl mismo título para todas las páginas de la Web, intenta hacer títulos personalizados y descriptivos del contenido que encontraremos en ésa página. Por ejemplo: ‘mi sitio.php’, ‘pagina.html’ o ‘Index.html’.

seo stop Guia  de optimización para motores de búsquedaTítulos largos, con gran número de palabras claves innecesarias. Muchos buscadores cortarán el texto y puntuarán como ‘spam’ el uso repetitivo y excesivo de ‘keywords’.

2. La Descripción, etiqueta ‘description’

Indica la descripción más detallada del contenido con la etiqueta <meta name=”description” content=”Tu descripción”>. Este texto se ubicará debajo del texto del título cómo descripción completa del sitio para ayudar a decidir al usuario si el sitio responde a su búsqueda.

ejemplo yahoo Guia  de optimización para motores de búsqueda

Ejemplo real de Yahoo

Prácticas a evitar:

seo stop Guia  de optimización para motores de búsquedaAl igual que en el título, evitaremos descripciones genéricas, repetitivas y no descriptivas del contenido de la página web. Además también evitaremos descripciones muy largas, con palabras claves o copias de grandes trozos de nuestra página web.

3. Keywords, palabras claves

Las palabras clave son la forma más abreviada de definir el contenido principal de nuestro sitio, para determinar la categoría o tema principal, se describen dentro la etiqueta <meta name=”keywords” content=”palabras,claves,separadas,por,comas”>.

Prácticas a evitar:

seo stop Guia  de optimización para motores de búsquedaUsar muchas palabras clave o palabras clave demasiado genéricas o no apropiadas por el contenido. Esto es considerado spam y reducir la puntuación del sitio o generar visitas cortas al no adecuarse el contenido con la descripción del sitio.

4. El contenido, de calidad

Al final, el resultado de nuestra web dependerá del contenido. Se deben escribir contenidos de calidad, ésto en resumen quiere decir:

  • Cuidar la ortografía (cómo explica Matt Cutts en el vídeo inferior, Google tiene en cuenta la ortografía a la hora de posicionar una Web) así como la gramática. El buen uso de sinónimos e incluso antónimos pueden reportar búsquedas diferentes de las habituales, además de no interferir en el ‘ratio’ de uso de esa palabra (podemos evitar que un buscador crea que hacemos spam con un termino).  Además los usuarios agradecerán esta lectura más agradable y volverán con mas asiduidad.
  • Contenidos originales (no hacer copy+paste o duplicar contenidos), muchos navegadores premian los contenidos únicos y exclusivos.
  • Entender el concepto de ‘hipertextual’ y aprovecharlo. Nuestro contenido puede (y debe) ser enlazado con otros contenidos de nuestro sitio web (navegación) y con referencias exteriores (links externos) para dar más información, mejor contexto a la información y aprovechar el potencial de Internet. Los buscadores penalizan las páginas ‘isoladas’ sin enlaces salientes. Además, enlazar contenido te hace visible en la red y puede ayudar a conseguir enlaces a nuestro sitio.

Prácticas a evitar:

seo stop Guia  de optimización para motores de búsquedaIntroducir imágenes con texto que quieres que forme parte del contenido. Los motores de búsqueda no pueden leerlos y los usuarios no pueden seleccionarlos.

seo stop Guia  de optimización para motores de búsquedaInsertar texto dirigido a los motores de búsqueda escondido para los usuarios o gran cantidad de palabras claves. Poner mucho contenido de varios temas en un mismo bloque sin separar la estructura de forma lógica.

Seguir leyendo »

Comments Off

El arte de visualizar datos: Mapas

La web sigue generando datos a un gran ritmo, algunos de estos son datos con información geográfica asociada (posición actual, altura, guardar rutas, sitios preferidos, etc.) y con la introducción de los móviles aún más.  Pero los datos en sí no son relevantes, se deben tratar y visualizar para hacerlos útiles a los ciudadanos, entidades y empresas. Aquí empieza toda una reciente tendencia de visualizar sobre un mapa la información extraída de los usuarios (ver Flickr, Foursquares, GoogleMaps,etc.) pero no todas las formas són iguales. Analizaremos la formas disponibles para crear mapas y añadir información útil en ellos.

toilets

Lavabos en SF

Empezamos con la nueva jerga surgida para entender mejor todo el elenco que nos ofrecen los mapas interactivos:

  • - SIG es el acrónimo de Sistema de Información Geográfica, software diseñado para capturar, almacenar, manipular, analizar y visualizar información geográfica referenciada.
  • - Geolocalización conocer nuestra ubicación geográfica en el mundo real  de un objeto (móbil, GPS, punto de acceso, etc.).
  • - Geocodificación es el proceso de asignar coordenadas geográficas (latitud, longitud, altura, etc.) a puntos del mapa (direcciones, puntos de interés, etc.).
  • - Geoetiquetado proceso de agregar información geográfica en los metadatos de archivos de imágenes, vídeos, sonido, sitios web, etc. que sirva para su georeferenciación.
  • - Base de datos espacial es un sistema de base de datos que maneja datos existentes en un espacio o datos espaciales.
  • - GeoRSS es un conjunto de estándares para representar información geográfica mediante el uso de capas y está construido dentro de la familia de estándares RSS.
  • - Información Geográfica Voluntaria o Participativa es crear, reunir y difundir información geográfica proporcionada voluntariamente por personas.

Representación de Datos Geográficos:

  • - GML (Geography Markup LanguageLenguaje de Marcado Geográfico). Permite el modelaje, transporte y almacenamiento de información geográfica a partir de XML.
  • - KML (Keyhole Markup Language) permite guardar información geográfica en 3 dimensiones.
  • - WMS es un servicio de creación de mapas de forma dinámica a partir de información geográfica que devuelve mapas en formato de imagen (.JPEG, .PNG, .SVG, etc.). Al ser un servicio, la propia URL de solicitud del mapa define qué información debe ser mostrada en el mapa, qué porción de la tierra debe dibujar, el sistema de coordenadas de referencia, y la anchura y la altura de la imagen de salida.
  • - Otros formatos: SVF (Simple Vector Format) , DWF (Drawing Web Format), SWF (ShockWave Flash), PGML (Precision Graphics Markup Language), VML (Vector Markup Language) y  HGML (Hyper Graphics Markup Language).

Programas SIG:

Existen muchos programas en éste ámbito (consultar tabla en Wikipedia) que se pueden instalar en un ordenador y crear mapas.

Aplicaciónes Web:

  • Google Maps: Aplicación de mapas de Google que ofrece mapas desplazables, fotos de satélite, servicios, imágenes a pie de calle.
  • Bing Maps:  plataforma de asignación de geoespaciales producida por Microsoft.
  • Via Michelin: Ofrece servicio de cartografía, itinerarios, hoteles, restaurantes, información del tráfico, turismo, etc.

Proyectos de código abierto

  • OpenLayers: biblioteca de JavaScript para mostrar mapas interactivos en los navegadores web. OpenLayers ofrece un API para acceder a diferentes fuentes de información cartográfica en la red: Web Map Services, mapas comerciales, Web Features Services, distintos formatos vectoriales, etc.
  • GeoServer: servidor sobre Java que permite compartir y editar datos geoespaciales y publicar sobre estándares abiertos.
  • OpenStreetMap: es un proyecto colaborativo para crear mapas libres y editables. Su base de datos, se distribuye bajo licencia CC.

Mapeando Datos Abiertos:

Una de las principales ventajas de los mapas es su fácil interpretación y gran valor añadido y esto se ha visto de forma evidente con la gran proliferación de aplicaciones y páginas webs que usan los datos abiertos disponibles para insertarlos sobre un mapa. En cualquier móbil inteligente existen multitud de ‘apps‘ que usan mapas cómo parte principal de la información, ejemplos muy claros són las aplicaciones y webs de ayuda a la conducción (tanto en tiempo real cómo TomTom, cómo la creación de rutas como Via Michelin) o de localización de diferentes temas de interés: sucursales de bancos, tiendas de ropa, paradas de autobus cercanas, etc.

Así ahora podemos visualizar sobre un mapa todo tipo de información y grácias a las políticas de gobierno abierto y datos abiertos que están empezando a surgir en todo el mundo, se dispone de información que antes era ‘secreta’ o exclusiva de las Administraciones Públicas lo que nos lleva a un nuevo concepto de visualización de info sobre mapas. Los proyectos innovadores en éste campo permiten hacer cosas cómo:

sf_crimespotting

Mapa San Francisco Crimespotting

ny_bike

Mapa New York Bike Sharing

wikicrimes

Mapa Wikicrimes con un 'heatmap' en Brasil

Los tres ejemplos anteriores son ejemplos reales de diferentes soluciones para mostrar información en el mapa por parte de diversos ayuntamientos cómo San Francisco y Nueva York o un gobierno cómo Brasil. No existe una tipologia de mapas estandard y cada uno debe escojer como representará los datos sobre el mapa.

Los tipos mas frequentes són:

  • Iconos georeferenciados
  • HeatMaps

Calidad de los mapas:

Uno de los aspectos más relevantes es la calidad del mapa en sí (representación fidel de la realidad, actualización, nivel de zoom disponible, número de información disponible (altitud, carreteras, edificios), etc). Los diferentes servicios anteriomente mencionados disponen de diferentes calidades y formatos.  Otro de los aspectos más relevantes es la representación de la información sobre el mapa, ésta debe ser clara y entendible, para esto veremos diferentes tipos de mapas para analizar su calidad.

Aquí unos ejemplos de mapas:

mapa solar

Mapa 1 - Buena visualización con 'heatmap': datos claros. Mala interacción: imposibilidad hacer zoom o seleccionar zonas

Seguir leyendo »

Comments Off

Google Weather API + PHP

Ago 12 2011 Autor: J.P Aulet under API's,Google,PHP,Programación

El Tiempo en tu Web con PHP

Si quieres mostrar el tiempo de una ciudad / país en tu página web, puedes usar la API de Google Weather (Tiempo)  que es facil de configurar y cambiar para ajustarlo a tu localización. Puedes realizar consultas sobre la URI de Google con el siguiente formato:

http://www.google.com/ig/api?weather = [nombre de la ciudad]

Por ejemplo, solicitando la siguiente URI:

http://www.google.com/ig/api?weather=barcelona

Esta consulta retornará un archivo XML que se puede procesar facilmente con PHP con el siguiente código:

<?
$xml = simplexml_load_file(‘http://www.google.com/ig/api?weather=barcelona’);
$information = $xml->xpath(“/xml_api_reply/weather/forecast_information”);
$current = $xml->xpath(“/xml_api_reply/weather/current_conditions”);
$forecast_list = $xml->xpath(“/xml_api_reply/weather/forecast_conditions”);
?>
<html>
<head>
<title>Google Weather API</title>
</head>
<body>
<h1><?= print $information[0]->city['data']; ?></h1>
<h2>Hoy:</h2>
<div class=”weather”>
<img src=”<?= ‘http://www.google.com’ . $current[0]->icon['data']?>” alt=”weather”?>
<span class=”condition”>
<?= $current[0]->temp_f['data'] ?>&deg; F,
<?= $current[0]->condition['data'] ?>
</span>
</div>
<h2>Prevision:</h2>
<? foreach ($forecast_list as $forecast) : ?>
<div class=”weather”>
<img src=”<?= ‘http://www.google.com’ . $forecast->icon['data']?>” alt=”weather”?>
<div><?= $forecast->day_of_week['data']; ?></div>
<span class=”condition”>
<?= $forecast->low['data'] ?>&deg; F – <?= $forecast->high['data'] ?>&deg; F,
<?= $forecast->condition['data'] ?>
</span>
</div>
<? endforeach ?>
</body>
</html>

El resultado del código és el siguiente:

google weather api + php

Esperamos que os sirva de ayuda.

Comments Off

App Recomendada de la semana (I)

Jul 28 2011 Autor: J.P Aulet under Android,Apps,General,Google

Open Spot

App recomenada: open spot

Open spot

Icono

Icono

Esta aplicación para Android sirve para encontrar y com partir parking. Funciona al permitir que las personas que están dejando plazas de aparcamiento, las etiqueten cómo ‘Libres’ para compartir sus puntos con las personas que están buscando estacionamiento por la zona. Los conductores simplemente tendrán que pulsar un botón en la interfaz de Open Spot y el sistema, basado en tecnología de geolocalización GPS, enviará un aviso al resto de usuarios que busquen sitio por la zona.

Empezar a ayudar a otros a encontrar estacionamiento, y en conjunto todos vamos a ahorrar tiempo, ahorrar combustible y reducir la contaminación. Como ganar puntos? Cuantos más puntos libres marque, más Karma tendrá.

Open Spot requiere Android 2.0 o versiones posteriores, y actualmente solo está disponible en EE.UU., en Canadá y en los Países Bajos.

Descarga: Open Spot Download

 

Comments Off

Google News Badges

Jul 20 2011 Autor: J.P Aulet under Google,Internet,Notícias

google news badges

Insignias o medallas

Con todo el revuelo que ha generado el lanzamiento de la nueva red social Google+, otro lanzamiento (sólo disponible de momento en EEUU) está pasando más inadvertido. Google News Badges es un nuevo servicio de Google que pretende recompensar a los lectores de su plataforma de noticias con medallas y así medir su asiduidad a la hora de leer diferentes tipos de temas. Así, los lectores recibirán insignias de los siguientes niveles: “Bronce”, “Plata”, “Oro”, “Platino” y “Ultimate”. También contará con más de 500 tipos diferentes de metallas según la temática de la noticia. Estas pueden ir desde medallas de ‘Deportes’ o ‘Borsa’ a más específicas cómo ‘Harry Potter’.  Las insignias son privadas por defecto, pero pueden compartirse gracias a la integración con Google+, así podrán crearse grupos de lectores similares, etc. Éste sistema ya se usa por ejemplo en ‘Foursquare‘ que recompensa a sus usuarios según su asiduidad. Goolge pretende hacer más ‘divertida’ o ‘social’ el echo de leer noticias, y no todas estas puntuarán igual. Se volverá a salir con la suya el gigante de Internet?

Aquí podemos ver un vídeo informativo:

Comments Off

22 Apps para Android

Jul 14 2011 Autor: J.P Aulet under Android,Apps,General,Google

Android ya ocupa el trono como la plataforma más utilizada (destronando al que era el consolidado líder, Symbian) con más de 500.000 activaciones diarias en el mundo. Cada día hay mas aplicaciones (apps) para este sistema operativo. Además se ha anunciado la inclusión en ‘Android Market’ de libros y películas, así pues a partir de ahora los usuarios de Android podran optar entre: aplicaciones, juegos, libros y películas. Para no perdernos aquí una lista de algunas de las aplicaciones más valoradas / útiles.

Apps

1. Layar

Layar permite interacción entre el mundo real y virtual mediante la llamada ‘realidad aumentada’.  Dispone de una gran base de datos en forma de capas (hay gratuitas y de pago) que te informan añaden información al espacio que te rodea. Desde localización de restaurantes, cajeros, museos hasta guías de viaje, rutas en coche, precios de la vivienda, etc. La aplicación te informa de su situación en forma de ‘radar’ y ‘brújula’ y añade información útil para el usuario.

layar

layar

2. Advanced Task Killer

Una de las realidades de tener un sistema operativo multitarea móvil de Android es que usted tiene que controlar sus aplicaciones para que no perjudicar el rendimiento o la duración de la batería. Advanced Task Killer te permite saber que aplicaciones y servicios se están ejecutando y cerrarlos individualmente o de forma colectiva.

3. TED móvil

Seguro que ya conoces las conferencias y charlas TED. Sino sólo decir que es un evento dedicado a expandir ideas y pensamientos de las mejores mentes del mundo (si no las conoces, te recomiendo que visites su página oficial) . Esta aplicación proporciona gratuitamente una excelente forma de acceder a los videos de este evento en cualquier lugar y momento.

4. Dropbox

Dropbox es un servicio en nube que sincroniza automáticamente una carpeta de archivos entre varios ordenadores (Windows, Mac o Linux). Esta aplicación se extiende Dropbox para Android e interactúa con otras aplicaciones (por ejemplo, Documents To Go) para abrir los archivos.

5. Amazon Kindle

Permite la lectura de libros en su dispositivo Android. Lea todos los títulos mismos de su cuenta de Amazon y disfrutar de la misma funcionalidad en un formato de bolsillo. Muy útil al poder leer libros al tener unos minutos disponibles.

6. Google Voice

Google Voice se ha llamado a veces ‘llamadas desde GMail‘, pero esta aplicación le ofrece más incluso. Le da un número de teléfono que puede llamar a varios lugares o dispositivos y que permite acceder a todos los correo de voz y mensajes de texto a través de Internet además de centralizar varios números telefónicos en el mismo dispositivo entre otras cosas.

7. Evernote

El bloc de notas definitivo, permite guardar textos, enlaces, fotos y centralizado en la nube .

droid-analytics
Droid-analytics

8. DroidAnalytics

Android no dispone de una aplicación oficial para GoogleAnalytics y esta aplicacion permite mantener el control de todos tus blogs y páginas web con este sólido cliente de Google Analytics.

9. 3G Watchdog

Si usted no tiene un plan de datos ilimitado, que es vital para realizar un seguimiento de su asignación mensual – 3G Watchdog se asegurará de que no incurrirá en ningún cargo oculto. Introduces la tarifa de datos, el límite mensual y la aplicación se encarga de mantenerte informado del uso 3G con un código de  colores en la esquina de la pantalla: un icono verde significa que estás a salvo, de color anaranjado indica que estás a punto de su límite, y un símbolo rojo indica que probablemente ha de reinar en las descargas.

10. WordPress para Android

Esta app que empezó de forma independiente cómo wpToGo fue adquirida por WordPress para convertirse en aplicación oficial para Android. Permite actualizar los blogs des de cualquier parte y ofrece integración con otras aplicaciones.

11. Site Directories

Esta es una aplicación impresionante para encontrar tiendas y servicios cercanos a su ubicación actual. Desde restaurantes hasta las salas de cine a los servicios médicos a los taxis, esta aplicación es muy preciso y se aprovecha de la información empresarial de Google Local. Esta aplicación es mejor que la información que se obtiene de una unidad GPS (o aplicación) y mejor que cualquiera de las aplicaciones similares disponibles en el iPhone.

12. Seesmic

seesmic
Seesmic

Seesmic es un cliente de Twitter que permite soporte para múltiples cuentas, un widget en tu escritorio con los últimos tweets y una interfaz muy cuidada e intuitiva.

13. Astro File Manager

Astro es una aplicación que te permite navegar por el sistema de archivos para Android. Astro no es más que un explorador de archivos al estilo de Windows, y permite instalar aplicaciones o archivos directamente. Esto te permite controlar más a fondo tu dispositivo y ordenar carpetas/archivos.

14. Gist

Sus contactos personales están en todas partes. Desde plataformas de correo, redes sociales, teléfonos móviles y muchas otras fuentes. Gist agrupa sus contactos en un solo lugar para darle una visión completa de la red, lo que facilita encontrar a alguien en cualquier momento.

15. Shazam

Alguna vez has escuchado una canción en una tienda, radio o anuncio y te preguntas "¿Qué canción es esa?". Aquí es donde entra Shazam, al ejecutar esta aplicación pulsando un botón, ‘escucha’ esa canción unos 15 segundos (incluso menos) y devolverá el nombre del artista y canción con una tasa de acierto del 80%.

16. Google Goggles

Esta aplicación permite tomar una foto de cualquier cosa y esta trata de decirte que son. De momento es un poco limitada, pero tiene mucho futuro. Por ejemplo agunas de sus funcionalidades son capturar fotos de textos en varios idiomas y traducirlo a otro idioma (útil en el extranjero) o descifrar el significado de señales de transito, etiquetas, marcas comerciales y un largo etc. Divertida y útil aplicación.

17. Google Sky Map

Google SkyMap le permite enfocar el cielo nocturno y obtener la información de las constelaciones y estrellas mediante ‘realidad aumentada’.

18. FxCamera

Mejora las funcionalidades basicas de la cámara cómo tomar fotos al estilo ‘Polaroid’, ‘FishEye’, ‘ToyCam’ o otras y añadir efectos. En su versión de pago añade mas tipos de camaras, pero mucho menos potente que su ‘primo’ Instagram de iPhone.

19. Photoshop Mobile

Photoshop es uno de los mejores editores de fotos por escritorio y su aplicación móvil no daña esta reputación, incluso siendo mucho más sencillo. Permite ajustar el brillo, ajustar contraste, colores, etc.

20. Dolphin

dolphin
Dolphin

Dolphin es uno de los mejores navegadores Web móviles. Es rápido, fiable, tiene pestañas reales, control multi-touch, gestor RSS, menús… Por si esto fuera poco, acaba de lanzarse la versión ‘Dolphin Mini’ que consume menos bateria.

21. Barcode Scanner

Esta aplicación convierte a la cámara de Android en un escáner de código de barras. Usted sólo tiene que escanear el código de un producto y dejar que la aplicación va a trabajar para encontrarlo en Google Product Search, o una búsqueda en la Web abierta. Puede servir para comparar precios de un producto antes de comprarlo con los precios de tiendas alrededor.

22. AroundMe (Gratis)

AroundMe pone la radio GPS en el interior de su teléfono para usar espectacularmente bueno, que le ayuda a encontrar todo, desde los cajeros automáticos en las salas de corazón en la vecindad local. Los resultados se presentan como una lista (la más cercana primer resultado) o como alfileres en un mapa de Google, lo que le permite medir con exactitud la distancia que tendrá que viajar para encontrar lo que estás buscando.

 

Bonus: 5 Juegos
¡ Atención: Timekillers !

robo-defense
Robo defense

1. Robo Defense – juego sencillo y adictivo. Todo fan de juegos de plataformas se verá agradecido de poseer este juego. Robo Defense integra diversoso mapas con diferentes tipos de defensas (torres, lanzacoetes y relentizadores) para parara el avanze por el mapa de varios tipos de enemigos. Grááficos de buena resolucion, compra de avances, mejoras de defensas, diferentes niveles y retos, etc.

2. Angry Birds – El más famoso juego de iPhone también está disponible para Android. Diviértete destruyendo estructuras con los graciosias aves de este juego. Grandes gráficos y música entretenida.

3. Fruit Ninja – Corta fruta como un ninja con movimientos rápidos de tu dedo y suma puntos. Sencillo y entretenido.

4. SNesoid – juga a todos tus juegos favoritos de la legendaria consola SNES desde tu dispositivo con este emulador.

5. ‘Juegos Clasicos’ – Me gusta tener unos cuantos juegos clásicos, cómo pueden ser el ‘chess free’ (ajedrez), ‘labyrinth lite’ que imita el juego de meter una bolita dentro un agujero evitando obstáculos usando el sensor de aceleración y inclinación o el tres en raya.

Comments Off

Empezando con GoogleMaps 3

Mapas, iconos, geolocalización, eventos, API3…

Después de ver la ‘Introducción a la nueva API 3 de GoogleMaps‘ podemos empezar ha trastear y crear funcionalidades a nuestro mapa básico. Para esto, crearemos primero un archivo .HTML donde defiremos el aspecto de la página y incluiremos los códigos necesarios para empezar:

map.html
1 <html>
2 <head>
3 <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=true“></script>
4 <script type=”text/javascript” src=”http://tupagina.com/map_functions.js“></script>
5 </head>
6 <body onLoad=”inicialize();”>
7 <div id=”map“></div>
8 </body>
9 </html>

Éste es el código de una página HTML muy simple que mostrará nuestro mapa. Pero incluso en los ejemplos más básicos, debemos tener en cuenta algunas partes, estas resaltadas en negrita:

  1. Debemos incluir GoogleMaps en nuestra pàgina mediante su API. Esto se realiza con con JavaScript en la línea 3. El parámetro ‘sensor=true/false’ para indicar si esta aplicación utiliza un sensor para determinar la ubicación del usuario.
  2. Las funcionalidades de nuestro mapa, incluidos en un único archivo .js, línea 4 (se ha separado para facilitar la lectura).
  3. Iniciar las una función llamada ‘inicialize()’ al cargar la página. En nuestro caso esta función se encuentra especificada en ‘map_functions.js’
  4. Un contenedor para el mapa. En este caso llamado ‘map’, línea 7.

Con esto nos falta definir las funcionalidades de nuestro mapa, que guardaremos en el archivo ‘map_functions.js‘. Empezaremos por crear un mapa e insertarlo en nuestro contenedor ‘map‘:

map_function.js
1 function initialize() {
2 geocoder = new google.maps.Geocoder();
3 var latlng = new google.maps.LatLng(-35.397, 150.644);
4 var myOptions = {
5 zoom: 14,
6 center: latlng,
7 mapTypeId: google.maps.MapTypeId.ROADMAP,
8 mapTypeControl: false
9 };
10 map = new google.maps.Map(document.getElementById(“map”), myOptions);
11 }

En éste fichero se crea el objeto del mapa (línea 11) en el elemento con ‘id‘ especificado y las opciones definidas en la variable ‘myOptions’. En este caso hemos definido el zoom (1 és el menor zoom y 21 el máximo) a nivel de ciudad, centrado en la latitud y longitud especificada en la variable ‘latlng’. Esta variable se crea con un objeto LatLng, definiendo un punto en el mapa.

Además se puede definir el tipo de mapa y muchas otras opciones (consultar el tutorial oficial de Google):

  • RoadMap, capa que muestra las calles.
  • Satellite, capa que muestra imagen por satelite.
  • Hybrid, capa entre Roadmap y Satellite.
  • Terrain, capa que muestra un mapa físico.

Éste seria el resultado del código:

google maps 3 tutorial - 1

Ahora añadiremos funcionalidades extras a nuestro mapa. GoogleMaps permite añadir eventos en los objetos del mapa (por ejemplo, al pulsar sobre el mapa, sobre un icono del mapa, etc.). Vamos pues a añadir iconos al pulsar sobre el mapa añadiendo las siguientes líneas en nuestra función ‘inicialize()‘:

inicialize()
1 google.maps.event.addListener(map, “click”, function(event) {
2 marker = new google.maps.Marker({
3 position: event.latLng,
4 map: map
5 });
6 });

Con este codigo se crea una respuesta siempre que el evento ‘click‘ sea activado sobre el objeto ‘map‘. En este caso se crea un icono (marker) en el punto especificado por el click que recoge el código ‘event.latLng‘.

En este momento tenemos un mapa geoposicionado en un sitio estático, con un zoom establecido y con la posibilidad de crear iconos al pulsar sobre el mapa. Però seguramente querramos que cada usuario pueda ver su própio mapa dependiendo de donde se encuentren, es decir, geoposicionar el mapa segun la ubicación del usuario. Para hacer esto no hace falta que reinventamos la rueda, ya hay soluciones creadas. Primero comprobaremos si el navegador usado por el usuario soporta la geolocalización (empezando con el método estándard de W3C, sinó con GoogleGears). Si es así, necesitaremos la confirmación del usuario para compartir su ubicación con la aplicación (imagen inferior).

compartir ubicacion googlemaps 3

Mensaje de confirmación por parte del usuario para compartir la ubicacion googleMaps 3 en Firefox.

Si su navegador no lo soporta, lo mostraremos por pantalla avisando al usuario y lo dirigiremos a un sitio predefinido. Lo haremos con el siguiente código:

inicialize()
1 // Probar Geoposicionamiento
2 if(navigator.geolocation) {
3 browserSupportFlag = true;
4 navigator.geolocation.getCurrentPosition(function(position) {
5 initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
6 map.setCenter(initialLocation);
7 }, function() {
8 handleNoGeolocation(browserSupportFlag);
9 });
10 // Try Google Gears Geolocation
11 } else if (google.gears) {
12 browserSupportFlag = true;
13 var geo = google.gears.factory.create(‘beta.geolocation’);
14 geo.getCurrentPosition(function(position) {
15 initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
16 map.setCenter(initialLocation);
17

}, function() {

18 });
19 // Browser doesn’t support Geolocation
20 } else {
21 browserSupportFlag = false;
22 handleNoGeolocation(browserSupportFlag);
23 }
24
25 function handleNoGeolocation(errorFlag) {
26 if (errorFlag == true) {
27 alert(“Geolocation service failed.”);
28 initialLocation = newyork;
29 } else {
30 alert(“Your browser doesn’t support geolocation. We’ve placed you in Siberia.”);
31 initialLocation = siberia;
32 }
33 map.setCenter(initialLocation);
34 }}

Aún que el código sea largo, es senzillo de seguir. Primero probamos si el navegador soporta geoposicionamiento (línea 2), si es así extraemos la latitud y longitud con ‘getCurrentPosition‘ y centramos el mapa a ese punto con ‘setCenter‘. Sinó probamos con GoogleGears de la misma forma. Si ninguno de los dos es soportado, lanzamos la funcion ‘handleNOGeolocation()’ que se encargará de avisar al usuario y establecer el mapa dónde querramos. El resultado final es (el zoom se ha variado por motivos de privacidad):

geolocalizacion

Y hasta aquí todo, a partir de aquí podeis leer más documentación en la página oficial de Google.

En la siguiente entrega, crearemos las funciones necesarias para guardar los puntos definidos por los usuarios y cargarlos al iniciar. De esta forma, cada usuario dispondrá de un mapa geoposicionado en su ubicación actual y de sus iconos y los de otros usuarios. Para hacer esto, guardaremos cada punto en un archivo y cargamos todos los puntos del mapa al inicarlo. También mostraremos  como crear diferentes tipos de iconos para señalar diferentes tipos de puntos en el mapa (por ejemplo bares, restaurantes, hoteles…) y definir iconos para cada tipo distinto, entre otras más cosas.

Comments Off

Buscador de imágenes inverso de Google

Jun 26 2011 Autor: J.P Aulet under Google,Innovación

Cada poco tiempo Google anuncia la creación de un nuevo servicio, uno más de los muchos que ya posee. Esta vez ha sido el buscador de imágenes inverso, es decir, arrastramos una imagen desde nuestro ordenador o desde una URL y el buscador nos mostrará sitios donde aparece esta imágen. Esto tiene una gran utilidad para controlar fotografias con derechos de autor, controlar fotografias privadas dentro de Internet, cópias, imagenes muy similares o modificaciones sin permiso de una imagen serán mucho más faciles de encontrar con este nuevo servicio.

Cómo hemos dicho, su funcionamiento es muy simple, arrastrar la imagen al recuadro de búsqueda y automáticamente se empieza la búsqueda de dicha imagen y de imágenes similares. Debajo podeis observar un ejemplo real de la búsqueda del cuadro ‘Noche Estelada’ de Vincent Van Gogh. Los ejemplos demuestran unos buenos resultados :

Ejemplo del uso de imagenes google

Comments Off

Huevos escondidos… en Google

Jun 22 2011 Autor: J.P Aulet under Curiosidades,Google,Internet

¿

Sabias que…

Easter Eggs (huevos de pascua virtual) son mensajes o capacidades ocultas adrede en todo tipo de tecnologías (DVD’s, juegos, programas y ahora también en páginas Web). Por ejemplo, has probado nunca de introducir ‘the answer to life, the universe, and everything‘ en Google.com? O has encontrado nunca el buscador para hackers ? Prueba también en escribir “google gothic“ o “mental plex” o “google cheese (y hacer zoom totalmente)” o “ascii art” y pulsar sobre ‘Voy a tener suerte“… Has jugado a la serpiente con Youtube.com?

?

Comments Off

Introducción a la API 3 de GoogleMaps

Abr 08 2011 Autor: J.P Aulet under API's,General,GoogleMaps

Con este senzillo ejemplo, podemos crear en nuestra pàgina web un mapa de GoogleMaps con la nueva versión de la API (version 3). Podemos ver la diferencia entre los dos tipos de mapa en la siguiente imagen:

google maps
La imagen de la izquierda corresponde a la API 2 y la derecha con API3. Nótese el cambio de la barra de zoom y navegación (más elegante en la version 3) y la aparición del ‘muñeco’ que permite canviar a StreetView en la nueva versión.

Para construir este mapa debemos seguir sólo 3 pasos:

Paso 1: Declaración de la nueva libreria de googleMaps:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Paso 2: Declaración del mapa y sus opciones dentro de un script ‘javascript‘ (antes de la etiqueta </header>):

<script type="text/javascript">
function initialize()
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP // Tipo de mapa (ROADMAP,SATELLITE,HYBRID,TERRAIN)
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
</script>

Paso 3: Emplazamos el mapa en la pàgina web y creamos la execución del codigo 2 al inicializar la pàgina:

<body onload="initialize()">
  <div id="map" style="width:100%; height:100%"></div>
</body>
</html>

Esto es todo.
Esperabas más? Con este senzillo codigo tendremos un mapa con la nueva versión de GoogleMaps en nuestra página. Lógicamente podemos añadir opciones, funciones y otros parámetros en el mapa, pero lo dejamos para otros artículos más especializados.

Comments Off

Artculos anteriores »