Ideas Frescas - articulos

Galería de Imágenes con Shadowbox

Fri, 30 Jul 2010 21:38:37 +0200

Mostrar una Imagen con Shadowbox

La forma más sencilla de mostrar imágenes con Shadowbox es de una en una, es decir, con un enlace en la miniatura de la imagen en la página web. Cuando el usuario hace clic sobre la miniatura de la imagen, Shadowbox se abrirá para mostrar una versión más grande de la imagen.

Ejemplo de una imagen en Shadowbox

Galería de Imágenes con Shadowbox

Cuando lo que queremos es que todas la imágenes estén agrupadas formando una galería, se utiliza el shadowbox con el nombre de la galería entre corchetes dentro del atributo ′rel′ de la etiqueta html ′a′ :

rel=shadowbox[nbGaleria]

Vemos un ejemplo de código html con Shadowbox de la galería de imágenes:

Ejemplo de galería de imágenes con Shadowbox

En este ejemplo de galería de imágenes, utilizamos la propiedad de Shadowbox counterType. Esta opción de Shadowbox se utiliza para mostrar un contador con las fotos de la galería. Valores que toma: " default" o " skip". Si lo dejamos por defecto muestra la galería de imágenes de esta forma: " 1 de 5". Cuando le damos el valor Skip muestra las imágenes con un numero (imagen inferior), permitiendo la navegación rápida entre las fotos de la galería de imágenes. El valor que toma por defecto es " default".:

rel="shadowbox[mustang];options={counterType:′skip′}"

Propiedades para imágenes de Shadowbox

content - El contenido real del objeto (por ejemplo, dirección, código HTML, etc.)

player - El tipo de archivo o contenido que va a contener el objeto (opcional, la mayoría de los casos lo detecta automáticamente). (* ver opciones)

title - El título que del objeto (opcional)

gallery - Nombre de la galería a la que va a pertenecer el objeto (opcional)

height - La altura del objeto (en píxeles, sólo se requiere para las películas y Flash)

width - El ancho del objeto (en píxeles, sólo se requiere para las películas y Flash)

* options - Conjunto de opciones que se pueden aplicar al objeto shadowbox.

Shadowbox en IE6

Fri, 30 Jul 2010 21:38:37 +0200

Aunque Shadowbox nos indica en su página oficial que soporta IE6 (Internet Explorer 6), podemos encontrarnos con más de un problema en la apertura de un iframe desde Shadowbox.

Problema en la carga de un iframe con Shadowbox en IE6

Si os estáis volviendo locos, porque en unas ocasiones cuando realizáis la carga de un documento en un iframe con Shadowbox, y utilizáis internet explorer 6, la página no carga dando error de url. Y en otras ocasiones no ocurre; el problema es de IE6 es con el DOCTYPE que estáis usando.

Para solucionar este problema debemos utilizar cualquiera de las cabeceras de documento que indicamos a continuación, en el archivo que se va ha cargar en el iframe. Donde indicamos que el DOCTYPE o tipo de documento html que utilizamos es ′strict′ o estricto.

NOTA: Es importante comprobar que en las metas del documento no tenemos el siguiente código:

Ya que nos seguirá dando problemas la carga del iframe con Shadowbox

Meta Tags para Páginas Web

Fri, 30 Jul 2010 21:38:37 +0200

Las meta tags son etiquetas de html que funcionan como identificadores ocultos de nuestras páginas web. Las Metatags no se muestran directamente en el navegador al usuario que visita nuestra página web, excepto la metatags title, sino que es información de nuestras páginas web para los buscadores como Google. Estas etiquetas Html, bien editadas, pueden mejorar nuestro posicionamiento en buscadores y lo que es más importante, ofrecer una referencia de nuestras páginas web a los usuarios de los buscadores.

Las Meta Tags en definitiva son la tarjeta de presentación de nuestras páginas web, para los buscadores como Google. Donde indicamos quienes somos, a que nos dedicamos y como contactarnos...

Robots y las Meta Tags

Los Robots de los buscadores como Googlebot, robot de Google, son utilizados para rastrear las páginas web en internet. Obteniendo la información y el contenido de las páginas web que les indicamos o sugerimos, mejor dicho.

No todos los buscadores utilizan las Meta Tags, para las búsquedas que ofrecen a sus usuarios. Pero aún así, es más que recomendable incluirlas para que los buscadores que las utilizan, las encuentren en nuestras web. Y sin olvidar que Google, si las valora, y más importante, las muestra en sus resultados de buúsqueda.

Que nuestras páginas web, estén en los resultados de los principales buscadores, solamente por el contenido de nuestras metatags. Es algo que no va a ocurrir !!!, sino que, en el posicionamiento en buscadores como Google, hay cientos de factores que intervienen para ofrecer sus resultados de búsqueda.

Lo que si que es cierto, es que pueden facilitar nuestra aparición en los buscadores por el contenido de nuestras páginas web. Siempre es importante, que el contenido de la página web esté relacionado con las metatags que mostramos a los robots de los buscadores.

Tipos de Meta Tags

Existen 2 tipos de Meta Tags:

META NAMES :Informan a los buscadores del continido de la página web. Son utilizadas para la optimización para buscadores.

HTTP-EQUIV : Controlan actividades de los exploradores y detallan la información de la página web.

Metatags META NAMES

Meta TITLE

Indica el título de nuestra página web. La Meta Title, es una de las metas más importantes, y debe tener la mayor concordancia posible con el contenido de la web. Se recomienda que sea una frase corta y concreta.

Google muestra la Meta Title, si la considera relevante, en sus resultados de la siguiente forma (texto seleccionado):

Meta DESCRIPTION

Esta Metatag facilita la descripción del contenido de nuestra página web. Se recomienda una frase de mayor tamaño que el Meta Title, o un breve párrafo que no supere los 120 y 140 caracteres. Y siempre en relación con el contenido y otras metas como la Meta Title y la Meta Keywords.

Google muestra la Meta Description, si la considera relevante, en sus resultados de la siguiente forma (texto seleccionado):

Meta KEYWORDS

Esta metatag indica a los buscadores las palabras por las que deseamos aparecer en sus búsquedas. Las palabras pueden estar separadas por espacios, por comas o por ambos a la vez. No es recomendable repetir palabras, sólo las palabras mas importantes y utilizando mayúsculas sólo cuando sea necesario. El número de palabras para la Meta Keywords, suele ser de 10 a 20.

Meta DC LANGUAGE

Esta metatag indica el idioma de nuestras páginas web.

Meta REVISIT

Esta metatag indica la configuración de la caché del explorador, permitiendo la actualización de la página web durante el periodo de tiempo especificado en la meta tag.

Meta AUTHOR

Esta metatag indica el autor de la página web.

Meta ROBOTS

Esta meta tag indica a los robots de los buscadores, como indexar nuestra página web.

Listado de atributos de la Metatag Robots:

all - Todo el contenido de la página web, es indexado. También archivos relacionados none - No se indexa nada del contenido de la página web index - Permite la indexación de la web por los robots de los buscadores noindex - La página no podrá ser indexada por los robots. follow - Permite que los robots rastreén los enlaces salientes de la página web nofollow - No se permite que los robots rastreén los enlaces salientes de la página web

Metatags HTTP-EQUIV

Meta Pragma o Cache-Control

Esta metatag nos permite controlar la caché del explorador (donde se guardan las páginas web que visitamos). Esta meta tag tiene 2 valores:

cache : utiliza la memoria caché para guardar la página web, con lo cual se cargará mas rápido en el ordenador.

no-cache : no utiliza la caché del explorador para guardar la página web.

Meta EXPIRES

Indicamos al explorador cuando acaba la vida de una página web, esta metatag limita el uso de una página web indicando una fecha y una hora determinada.

Meta REFRESH

Esta metatag, marca el tiempo en segundos al explorador para redireccionar ana segunda URL, una vez que se haya cargado la página web que contiene a la meta tag.

Meta SET-COOKIE

Es una de las formas de crear una cookie en el explorador del usuario que visita nuestra página web. La cookie sea guardada en el disco duro del usuario, si indicamos una fecha de expiración. En caso contrario, la cookie se eliminará al acabar la sesión actual.

Meta WINDOW-TARGET

Esta metatag especifica el nombre de la ventana en la cual se debe visualizar la página web. Es muy útil para evitar que nuestra página web, sea vista en el marco de otra página web. Puesto que con el parámetro _top elimina todos los marcos existentes en el explorador.

Valores de la Metatag:
_black : La página web se visualiza en una ventana nueva
_top : La página web se visualiza en la ventana superior del explorador, eliminando los marcos que existan
_self : La página web se visualiza en el mismo marco desde el cual se originó la llamada

Excel con PHP para Páginas Web

Fri, 30 Jul 2010 21:38:37 +0200

La librería PHPExcel nos permite generar archivos excel con PHP. PHPExcel permite leer y manipular el contenido de una hoja de cálculo hecha con Microsoft Excel.

[ Descargar PHPExcel ]

Funciones Básicas de PHPExcel

$objPHPExcel->getActiveSheet()->getCell("A1")->getValue(): Nos devuelve el texto (getValue()) de la celda A1 (getCell("A1")) de la hoja Excel activa (getActiveSheet()).

$objPHPExcel->getActiveSheet()->setCellValue("A1","Pepe"): Asignamos a la celda A1 (setCellValue()) el valor "Pepe" de la hoja Excel activa (getActiveSheet()).

Leer un Excel con Php y guardar los datos en una base de datos Mysql

Después de descargar la librería PHPExcel, comenzamos con la lectura del Excel. Lo que requiere la inserción de las librerías php:

Una vez que hemos cargado las librerías de php, debemos cargar la hoja de calculo excel para ello utilizamos el siguiente código en php:

load($archivo_loc.$archivo_nom);
// Asignamos el excel activo
$objPHPExcel->setActiveSheetIndex(0);
?>

Cuando ya hemos creado el objeto excel, comenzamos la lectura de los registros, filas o columnas. En el siguiente código recorremos las filas del fichero excel y guardamos los datos en mysql:

getActiveSheet()->getCell("A".$i)->getValue() != ′′)
{	
$nombre = $objPHPExcel->getActiveSheet()->getCell("A".$i)->getValue();
	$email = $objPHPExcel->getActiveSheet()->getCell("B".$i)->getValue();
	$telefono = $objPHPExcel->getActiveSheet()->getCell("C".$i)->getValue();
	
//inserto los datos en la table usuarios:
$ conexion = mysql_connect("$dbhost", "$dbuser", "$dbpass");
$sql = "INSERT INTO usuarios (nombre, email, telefono) VALUES (′$nombre′, ′$email’, ′$telefono’)";
$rst=mysql_query($sql,$conexion); //Ejecutamos la SQL
if(!$rst) //Comprobamos si hay errores
		die("Error MySQL de Inserción de Datos);
$i++;
}
?>

Escribir un Excel con Php, extrayendo los datos desde una base de datos Mysql

Después de descargar la librería PHPExcel, comenzamos con la lectura del Excel. Lo que requiere la inserción de las librerías php:

Una vez que hemos cargado las librerías de php, debemos cargar la hoja de calculo excel para ello utilizamos el siguiente código en php:

load($archivo_loc.$archivo_nom); //cargamos el archivo excel (extensión *.xlsx)
$objWriter = new PHPExcel_Writer_Excel2007($objPHPExcel); //objeto de PHPExcel, para escribir en el excel
?>

Cuando ya hemos creado el objeto excel para su escritura, comenzamos la lectura de los registros desde la base de datos Mysql. Y los escribimos en el archivo excel cade registro en una fila:

getActiveSheet()->setCellValue("A".$i, $ fila[nombre]);
$objPHPExcel->getActiveSheet()->setCellValue("B".$i, $ fila[email]);
$objPHPExcel->getActiveSheet()->setCellValue("C".$i, $ fila[telefono]);
}
	
$objWriter->save($archivo_loc.$archivo_nom);//guardamos el archivo excel
?>

[ Documentación PHPExcel ] [ Más ejemplos con PHPExcel ]

Evitar el SPAM en Foros PhpBB

Fri, 30 Jul 2010 21:38:37 +0200

Herramientas contra el Spam en Foros PhpBB

Para evitar el Spam en nuestros Foros PhpBB, debemos seguir una serie de pasos, con ellos conseguiremos pararlo parcialmente ya que la evolución de los bots que causan el Spam, ya son capaces de saltarse protecciones como el Captcha, pero podrás evitar el Spam casi en un 100%.

Desactivar la escritura anónima del foro phpbb Tan solo debes permitir que escriban los usuarios registrados en el foro, es una manera sencilla de evitar el Spam anónimo y poder hacer un seguimiento de las publicaciones de los usuarios registrados en el foro.

Instala el MOD Captcha o Módulo Captcha para PhpBB Este MOD de PhpBB, muestra una imagen aleatoria que el usuario debe de introducir en un campo. Los últimos bots se saltan hasta estas protecciones, podemos realizar acciones como invertir los colores del Captcha para dificultar el reconocimiento por los bots.

Es aconsejable NO llegar a extremos, en los que resulte complicado su identificación para los usuarios humanos.

Activar la confirmación visual Esta opción se activa desde administración general del foro phpbb, en Configuración -> Activar confirmación visual.

Activación de la cuenta por el usuario Los usuarios deberán activar las cuentas de usuario, una vez registrados por email, para activarlo debéis ir a Configuración -> Uusuarios -> Activar cuenta

MOD para eliminar la casilla de URL en el registro del foro PhpBB Con este módulo de PhpBB, evitamos que los bots introduzcan sus URL cuando se registran, así en la mayoría de los casos al bot le dará un error y no seguirá con el registro, los usuarios normales podrán escribir su URL en su perfil privado una vez activada la cuenta.

¿Eres Humano? en el registro del foro PhpBB Este módulo de PhpBB, "¿Eres humano?", permite eliminar el SPAM casi por completo en nuestro foro.

PDFs con PHP para Páginas Web Avanzado

Fri, 30 Jul 2010 21:38:37 +0200

En un artículo anterior Generar PDFs con PHP explicamos la forma básica de generar los archivos PDF, ahora vamos a documentar como insertar la Cabecera, el Píe, Saltos de página y añadir imágenes al documento PDF con PHP.

Ejemplo de PDF en PHP con Cabecera, Pie y Salto de Páginas

Image(′logo_pb.png′,10,8,33); //Logo
    $this->SetFont(′Arial′,′B′,15);
    $this->Cell(80); //Movernos a la derecha
    $this->Cell(30,10,′Title′,1,0,′C′); //Título
    $this->Ln(20); //Salto de línea
}
function Footer()//Pie de página
{
    $this->SetY(-15); //Posición: a 1,5 cm del final
    $this->SetFont(′Arial′,′I′,8);
    $this->Cell(0,10,′Page ′.$this->PageNo().′/{nb}′,0,0,′C′); //Número de página
}
}?>

Para generar la cabecera del archivo PDF, llamamos a la función Header(), en la que definimos una imagen de fondo, un título.De igual forma con la función Footer(), creamos el pie del documento PDF. En la que numeramos las páginas o insertamos diferentes objetos.

Tanto la función Header() como Footer(), existen en la clase FPDF original, pero no hacen nada. Por ello, tenemos que heredar la clase y sobrescribirlas.

El logotipo se imprime en el PDF con el método Image() especificando su esquina superior izquierda y su anchura. La altura se calcula automáticamente respetando las proporciones de la imagen.

Para imprimir el número de página del PDF, se le pasa un valor nulo (null) como ancho de la celda. Eso significa que la celda se extenderá hasta el margen derecho de la página; puede ser útil centrar el texto.

El número actual de la página se devuelve por el métodos PageNo(), mientras que el número total de páginas se obtiene mediante un valor especial de {nb} que será sustituido cuando se cierre el documento (suponiendo que antes utilizamos AliasNbPages() como se detalla en el siguiente bloque de codigo PHP).

A continuación creamos el objeto de la clase PDF, insertando páginas u objetos:

AliasNbPages();
$pdf->AddPage();
$pdf->SetFont(′Times′,′′,12);
for($i=1;$i<=40;$i++)
    $pdf->Cell(0,10,′Imprimiendo línea número ′.$i,0,1);
$pdf->Output($archivo_de_salida);//cierra el objeto pdf generando el fichero
?>

[ Descarga de la librería FPDF ] [ Manual de FPDF ] [ FAQ′S ]

Generar PDFs con PHP en Web Básico

Fri, 30 Jul 2010 21:38:37 +0200

Para generar o trabajar con PDFs y PHP en páginas web, os aconsejamos la librería FPDF.

FPDF es una clase escrita en PHP que permite generar documentos PDF directamente desde PHP, es decir, sin usar la biblioteca PDFlib.

La F de FPDF significa Free (gratis y libre): puede usted usarla para cualquier propósito y modificarla a su gusto para satisfacer sus necesidades. FPDF no necesita de ninguna extensión para PHP (excepto zlib para activar la compresión y GD para soporte a GIF) y funciona con PHP4 (≥ 4.3.10) y PHP5.

Entre las funcionalidades que nos ofrece esta librería nos encontramos:

• Elección de la unidad de medida, formato de página y márgenes

• Gestión de cabeceras y pies de página

• Salto de página automático

• Salto de línea y justificación del texto automáticos

• Admisión de imágenes (JPEG y PNG)

• Colores • Enlaces

• Admisión de fuentes TrueType, Type1 y codificación

• Compresión de página

• Posibilidad de usar otro idiomas y caracteres especiales. La instalación es sencilla, lo copias en el directorio donde guardes las librerías e incluyes la ruta en el include_path del php.ini. Se recomienda leer las preguntas frecuentes antes de empezar a utilizarla.

¿Cómo generar un PDF sencillo con PHP?

Ejemplo básico de PDF:

AddPage();  //añadimos una página. Origen coordenadas, esquina superior izquierda, posición por defeto a 1 cm de los bordes.
$pdf->SetFont(′Arial′,′B′,16);
$pdf->Cell(40,10,′¡Hola, Mundo!′);
$pdf->Output($archivo_de_salida);//cierra el objeto pdf
?>

En este caso, el constructor FPDF() se usa con sus valores por defecto. Pero si éstos cambian se puede declarar de la forma:

FPDF([string orientation [, string unit [, mixed format]]])

Parámetros de la Clase FPDF:

Orientation: Orientación de la Página del Documento PDF

Valores: P (normal, valor por defecto) o L (apaisado)

Unit: Unidad de medida del usuario.

Valores: pt (punto), mm (milímetro, valor por defecto), cm (centímetro), in (pulgada).

Format: Formato de las páginas Valores: A3, A4 (valor por defecto), A5, Letter, Legal.

Antes de que podamos imprimir texto, es obligatorio escoger una fuente con SetFont(), si no, el documento no será válido. Escogemos Arial en negrita de tamaño 16:

$pdf->SetFont(′Arial′,′B′,16);

Para imprimir o escribir una línea utilizamos la función Cell(). Una celda es una superficie rectangular, con borde si se quiere, que contiene texto. Especificamos sus dimensiones, el texto (centrado o alineado), si queremos dibujar o no los bordes, y dónde se ubicará la posición actual después de imprimir la celda (a la derecha, debajo o al principio de la siguiente línea).

Otros ejemplos:

$pdf->Cell(40,10,′¡Hola, Mundo!′,1);//añade borde
$pdf->Cell(60,10,′Hecho con FPDF.′,0,1,′C′); //texto centrado y salto de línea.

Nota: el salto de línea puede provocarse también mediante Ln(). Este método le permite especificar además la altura del salto.

En el artículo Generar PDFs con PHP Avanzado explicamos como incluir la cabecera, el píe de página al documento PDF, y realizar saltos de páginas e insertar imágenes.

[ Librería FPDF descarga ] [ Manual FPDF ] [ FAQ’S ]

Shadowbox con Google Maps

Fri, 30 Jul 2010 21:38:37 +0200

Para mostar mapas de Google Maps dentro de nuestras páginas web, podemos utilizar Shadowbox.

Para ello, antes de nada, debemos descargar las librerías de Shadowbox; también sería conveniente que echarais un vistazo al artículo Shadowbox, donde detallamos algunas funciones muy útiles de manejo de shadowbox y propiedades.

De igual forma echar un vistazo a Google Maps donde detallamos como detallar la localización y descripción del sitio que deseamos mostrar, como su integración dentro de la página web.

Una vez que hemos repasado esto, incluimos la siguiente función JavaScript que lanza la llamada al objeto Shadowbox mendiante la función Shadowbox.open(), que a su vez carga el objeto Google Maps:

function GoogleMaps(latitud,longitud,texto)
{
    Shadowbox.open({
        player:     ′html′,
        content:    ′′,
        height:     300,    //alto de la ventana del Shadowbox
        width:      500,    //ancho de la ventana del Shadowbox
        options:    {
   overlayColor: "#644224",  //el color para la seccion inactiva de la pantalla del Shadowbox
            onFinish: function(item){
                if(GBrowserIsCompatible()){
                    var body = document.getElementById(Shadowbox.contentId());
                    var map = new GMap2(body);
//centramos el mapa en la posición señalada
                    map.setCenter(new GLatLng(latitud,longitud), 16);
                         //mostramos en bocadillo del mapa con el texto pasado como parámetro
         map.openInfoWindowHtml(new GLatLng(latitud,longitud),""+texto+"");   
 
                    // añadimos algunos controles de Google Maps para la visualización 
                    map.addControl(new GSmallMapControl());
                    map.addControl(new GOverviewMapControl());
                    map.addControl(new GMapTypeControl());
                }
            }
        }
    });
}

Una vez incluida la función del llamada al Shadowbox, insertamos la función JavaScript que la realiza dentro de un enlace en la página web:

Ver mapa

En la llamada a la función que lanza el Shadowbox pasamos como parámetros las coordenadas de localización del punto, como el texto descriptivo.

Google Maps Rutas en Coche

Fri, 30 Jul 2010 21:38:37 +0200

Hay varias formas de obtener indicaciones de rutas en coche con Google Maps:

- Haz clic en una ubicación del mapa para ver la ventana desplegable la información del punto. A continuación, sigue estos pasos:

Haz clic en ′Hasta aquí′.
Escribe tu dirección de inicio.
Haz clic en ′Cómo llegar′.

- Incluye las palabras "hasta" o "desde" en tu búsqueda en el cuadro de búsqueda principal. Por ejemplo, puedes escribir [Valladolid hasta calle de la Princesa 15, Madrid] para obtener la ruta en coche con Google Maps desde Valladolid hasta la dirección de Madrid.

- Haz clic en el enlace ′Cómo llegar′ en la parte superior del panel izquierdo de Google Maps, introduce las direcciones de origen y destino y haz clic en el botón ′Cómo llegar′. Haz clic en la doble flecha derecha para intercambiar el origen y el destino y obtener la ruta de vuelta.

Para todo lo anterior, Google Maps muestra la ruta en coche y proporciona instrucciones paso a paso. Puedes hacer clic en cualquier instrucción para aumentar el tamaño del mapa o las vistas de satélite y relieve.

Consejos para Google Maps y Rutas en Coche

Añade varias paradas en una sola ruta haciendo clic en Añadir destino en el panel izquierdo. Para cambiar tramos de la ruta, arrastra y suelta los destinos en el panel de la izquierda. Para personalizar la ruta, arrastra y suelta los puntos de la línea de ruta violeta en una ubicación del mapa. Google Maps vuelve a crear las rutas en el mapa y el panel izquierdo, y actualiza la duración del viaje y la distancia estimados. Selecciona la casilla de la parte superior del panel izquierdo para evitar autopistas.

Google Map Maker

Fri, 30 Jul 2010 21:38:37 +0200

Google Map Maker permite colaborar, compartir y editar información sobre los mapas de Google Maps de 174 países y territorios.

Google Map Maker te ofrece varias herramientas con las que podrás crear y editar los elementos de los mapas, mejorando la calidad de los mapas y la información local de tu región.

Haz clic aquí para ver cómo empezar con Google Map Maker.

Tele Atlas: puedes informarles de un error en sus mapas utilizando el sistema Map Insight de Google Maps.

Google Maps en Páginas Web

Fri, 30 Jul 2010 21:38:37 +0200

Características de Google Maps

La característica que sin duda más llama la atención del funcionamiento de Google Maps es su interactividad.

Podemos pinchar una y otra vez en el mapa de Google Maps para movernos por el mundo, hacer zoom y elegir el tipo del mapa sin necesidad de recargar la página, todo ello de forma fácil e intuitiva.

Este tipo de aplicación web se encuadra dentro de la tecnología que Adaptive Path ha dado por denominar AJAX (Asynchronous Javascript + XML).

Google Maps Key

El primer paso para usar Google Maps es obtener una clave o key para el dominio donde lo vamos a insertar Google Maps, que se nos concede cuando nos damos de [alta el servicio Google Maps]. Esta key de Google Maps es única para cada usuario y dominio, y es restrictiva en lo que se refiere a su uso.

Configurar Google Maps

Primero incluimos la librería donde está el API Javascript para los mapas de Google.


//funcion que carga Google Maps

//Capa donde se muestra google maps

Calcular la Longitud y la Latitud

Para calcular las geocoordenadas longitud y latitud que te pide Google Maps, utiliza el siguietne enlace.

Enlace para [calcular las coordenadas]

Parámetros de Google Maps

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" (fotografía de satélite) y "Hybrid" (combina ambas vistas). En nuestro caso, ya que Google todavía no dispone de mapas vectoriales para España, hemos elegido la vista de satelite que nos muestra la fotografía aérea de la zona.

Además existen otras 2 vistas de google maps.

• Street View vista del mapa a pie de calle y desplazarse por ellas.

• Tráfico: esta vista es idéntica a la vista de mapa (mira más abajo), pero también ofrece información sobre el tráfico si está disponible en el área mostrada en ese momento. El color rojo indica un tráfico denso, el amarillo tráfico lento, el verde velocidad normal y el gris indica que no hay datos disponibles acerca del tráfico.

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 tamaño (GSmallMapControl) para mapas en tamaño reducido. Por defecto el mapa se muestra sin controles.

map.centerAndZoom(new GPoint (latitud,longitud), 3);

Con esta sentencia indicamos a nuestro GMap qué lugar queremos que muestre, mediante el método centerAndZoom.

Los parámetros son un GPoint (que generamos a continuación a partir de su latitud y longitud) y el nivel de zoom que queremos mostrar, de 1 a 16, siendo el nivel 1 el más cercano y el 16 el más alejado.

Google Maps ubica los puntos en los mapas a partir de su latitud y longitud.

Esta información debemos suministrarla nosotros, y para ello lo más 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 físico en el mapa, tales como Geocoder.us y geonames.org, en los que podemos realizar búsquedas a partir del nombre de la ubicación que buscamos.

Podemos crear marcadores de diversos puntos en el mapa.

var point = new GPoint (latitud, longitud);
var marker = new GMarker(point);
map.addOverlay(marker);
map.centerAndZoom(point, 3);

Creamos en punto con Gpoint. Creamos un marcador en el punto correspondiente y centramos el mapa en dicho punto.

Vistas adicionales:

Street View: En algunas ubnicaciones puedes ver imágenes a pie de calle y desplazarte por ellas.

Tráfico: esta vista es idéntica a la vista de mapa (mira más abajo), pero también ofrece información sobre el tráfico si está disponible en el área mostrada en ese momento. El color rojo indica un tráfico denso, el amarillo tráfico lento, el verde velocidad normal y el gris indica que no hay datos disponibles acerca del tráfico.

Enlace al [manual de referencia de la API de Google Maps]

Asistente de Google Maps

Otra opción es añadir el mapa de google con el [asistente de Google Maps]

Añadir una Ubicación, Lugar o Dirección a Google Maps

Busca el lugar que te gustaría añadir en Google Maps, para averiguar si ya se ha incluido. Si no está incluido, haz clic en Añadir un lugar al mapa en el panel de la izquierda.

Se mostrará un marcador en el centro del mapa. Arrastra el marcador a la ubicación correcta o escribe una dirección. Haz clic en Siguiente. Añade los detalles del lugar y haz clic en Guardar.

Si eres el propietario de una empresa, puedes añadir tu empresa a Google Maps y verificarla utilizando [Local Business Center]. Si quieres añadir un lugar o una empresa de la que no eres el propietario, observa este [vídeo sobre cómo añadir lugares a Google Maps] (en inglés).

Shadowbox

Fri, 30 Jul 2010 21:38:37 +0200

Shadowbox es una aplicación en línea para el visonado de medios web más populares (JPG, GIF, PNG, Flash, QuickTiem, Windows Media Player, Flip4Mac, HTML, PHP, ASP, etc..).

Shadowbox está escrito totalmente en JavaScript y CSS siendo altamente configurable y editable. Shadowbox permite, a los desarrolladores de páginas web, mostrar una amplia variedad de medios de comunicación en los principales navegadores, sin tener que visitar las páginas web externas que poseén los medios.

Internet Explorer 6+ FireFox 1.5+ Google Chrome 1 Safari 2+ Opera 9+

Aunque Shadowbox también destaca como un recurso inmejorable para mostrar elementos dentro del propio sitio web, de forma personalizada para sus múltiples páginas web.

Características de Shadowbox

Estándares Internacionales: Shadowbox es validado mediante el estándar internacional web HTML de w3.org. Sin Marcos: Aunque Shadowbox tiene la capacidad de adaptarse a cualquier marco de JavaScript, y es capaz de ejecutarse como una aplicación independiente, dando al desarrollador de una gran flexibilidad. Flexible: Shadowbox soporta los formatos más populares de medios de publicación web, incluyendo imágenes, QuickTime, Windows Media Player, Flash, vídeo de Flash, HTML, e incluso las páginas web externas. Personalizable: Soporta una gran cantidad de opciones que hacen que Shadowbox sea altamente configurable y editable. Si no te gusta la manera en que funciona algo, puedes cambiarlo. Ordenado y compacto: El código de Shadowbox es limpio, modular y compacto.

Ejemplos de aplicaciones para Shadowbox

Shadowbox como galería de imágenes

Shadowbox como reproductor de videos de YouTube

Shadowbox y GoogleMaps

Llamada a las librerías y el objeto Shadowbox

Guadamos las librerías que hemos descargado [ Descargar Shadowbox.js ] en la carpeta shadowbox, y las llamamos tanto las css como los ficheros javascript:

¿Cómo puedo abrir Shadowbox desde una película de Flash?

Usando ActionScript y la función getURL para llamar al código de Shadowbox. La forma más fácil es definir una función de JavaScript de llamada similar a la siguiente función:

Puedes poner esta función en la etiqueta head, o bien incluirlo como archivo externo mediante un script. Luego, en la película Flash se utiliza getURL para llamar a su función de llamada del Shadowbox:

getURL("javascript: openShadowbox( ′movie.swf′, ′swf′, ′Title′)");

¿Cómo puedo abrir Shadowbox desde un iframe?

Cuando un iframe se coloca dentro de otra ventana, esa ventana se convierte en la ventana principal de ese iframe. Para ejecutar JavaScript en la ventana padre desde el interior de un iframe, debes encontrar la manera de hacer llamadas a objetos generados en la ventana padre. Por lo tanto, se puede utilizar el código siguiente dentro del documento iframe para acceder al objeto Shadowbox que se encuentra en la ventana padre:

var = Shadowbox window.parent.Shadowbox;/ / Hacer lo que quieras con Shadowbox aquí

Una vez que se tiene acceso al objeto Shadowbox, podemos utilizarlo como se haría normalmente. Todas las acciones tendrán lugar en la ventana principal. Para utilizar Shadowbox dentro de un iframe, debemos incluir el código del Shadowbox en la parte superior del documento dentro del iframe.

¿Cómo puedo cerrar un Shadowbox desde el propio Shadowbox?

Para cerrar el objeto Shadowbox debemos quenerar una función de llamada en JavaScript en la ventana padre o superior que generó el objeto Shadowbox original, ya que un objeto Shadowbox puede llamar a otro objeto Shadowbox.

Enlaces de Shadowbox.js: [ Descargar Shadowbox.js ] [ DEMO Shadowbox ] [ API Shadowbox ]

Otros Artículos relacionados con Shadowbox: Shadowbox y Google Maps - Galería de Imágenes con Shadowbox - Shadowbox problemas con IE6

Googlebot-News el Nuevo Agente de Google

Fri, 30 Jul 2010 21:38:37 +0200

Google ha desarrollado un nuevo agente de usuario (user-agent) para robots.txt, que se llama Googlebot-News, que proporciona a los editores de noticias y artículos más control sobre su contenido.

Googlebot-News trabaja sobre robots.txt, buscando si tiene permiso para rastrear e indexar una página web, podemos indicarle exactamente lo queremos que indexe y más importante lo que no queremos que indexe de la misma forma que hacíamos con Googlebot. Pudiendo distinguir los permisos para cada agente de google. Los dueños de las páginas web pueden especificar que páginas web deberían rastrearse y aparecer en Google Noticias.

Ejemplos para editores de robots.txt para agentes de Google Googlebot y Googlebot-News :

Incluir páginas tanto en la búsqueda web de Google como en Noticias:

User-agent: Googlebot
Disallow:

Este es el caso más sencillo. De hecho, no se necesita un archivo robots.txt para este caso.

Incluir páginas en la búsqueda web de Google, pero no en Noticias:

User-agent: Googlebot
Disallow:
User-agent: Googlebot-News
Disallow: /

Este archivo robots.txt dice que no hay ningún archivo al que no se puede acceder para el rastreador general de Google para la web, llamado Googlebot; pero el agente de usuario "Googlebot-News" tiene bloqueado el acceso a todos los archivos del sitio web.

Incluir páginas en Google Noticias, pero no en la búsqueda web de Google:

User-agent: Googlebot
Disallow: /
User-agent: Googlebot-News
Disallow:

Cuando se mira un archivo robots.txt, Google ataja las directivas más específicas. Las dos primeras líneas nos dicen que Googlebot (el agente de usuario para el índice web de Google) está bloqueado para rastrear cualquier página del sitio web. La siguiente directiva, que es para un agente de usuario más específico, para Google Noticias, suprime el bloqueo de Googlebot y da permiso a Google Noticias para rastrear las páginas de su sitio web.

Bloquear grupos diferentes de páginas de la búsqueda web de Google y Google Noticias:

ser-agent: Googlebot
Disallow: /latest_news
User-agent: Googlebot-News
Disallow: /archives

Las páginas bloqueadas para la búsqueda web de Google y Google Noticias pueden controlarse de forma independiente. Este archivo robots.txt bloquea para la búsqueda web de Google las noticias más recientes (las URL que están en la carpeta /latest_news), pero permite que éstas aparezcan en Google Noticias. En cambio, bloquea contenido premium a Google Noticias (las URL que están en la carpeta /archives folder), pero permite que aparezcan en la búsqueda web de Google.

Evitar que se rastreen páginas para la búsqueda web de Google y para Google Noticias:

User-agent: Googlebot
Disallow: /

Este archivo robots.txt le dice a Google que Googlebot, el agente de usuario para nuestro rastreador de la búsqueda web, no debería rastrear ninguna página de este sitio web. Y debido a que no se ha especificado ninguna directiva a Googlebot-News, nuestra búsqueda de Noticias seguirá la guía general que de Googlebot, y no rastreará páginas para Google Noticias.