Google

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.

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:

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css" mce_href="shadowbox/shadowbox.css" />

¿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: Opciones de Shadowbox - Shadowbox y Google Maps - Galería de Imágenes con Shadowbox - Shadowbox problemas con IE6 - Flash y Shadowbox

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.

<script src="http://maps.google.com/maps?file=api&v=2&key=TU KEY GOOGLE MAPS" mce_src="http://maps.google.com/maps?file=api&v=2&key=TU KEY GOOGLE MAPS" type="text/javascript"></script>
//funcion que carga Google Maps
<script type="text/javascript"><!--
	function load()
	{
		if (GBrowserIsCompatible())
		{
			var map = new GMap2(document.getElementById("mapa_google"));
			map.openInfoWindowHtml(new GLatLng(latitudGoogle,longitudGoogle),Midireccion);
			map.addControl(new GSmallMapControl());
			map.addControl(new GOverviewMapControl());
			map.setCenter(new GLatLng(latitudGoogle,longitudGoogle), 17);
		}
	}
// --></script>
//Capa donde se muestra google maps
<div id="mapa_google"></div>

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).

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.

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.

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:

<a class="option" onclick="GoogleMaps( 41.641265,-4.730043,'Texto descriptivo');" href="#" mce_href="#">Ver mapa</a>

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.

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

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:

<?php
require(′fpdf.php′);
$archivo_de_salida=′nombre_fichero′;
$pdf=new FPDF();  //crea el objeto
$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 ]

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

<?php
require(′fpdf.php′);
class PDF extends FPDF
{
function Header()//Cabecera de página
{
    $this->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:

<?php
$archivo_de_salida=’nombre_fichero’
//Creación del objeto de la clase heredada
$pdf=new PDF();
$pdf->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 ]

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.

[ 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:

<?php
// Clases Php
require_once("PHPExcel.php");
require_once("PHPExcel/Reader/Excel2007.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:

<?php
// Cargando la hoja de cálculo excel
//creamos objeto para leer del excel
$objReader = new PHPExcel_Reader_Excel2007(); 
//cargamos el archivo excel(extensión *.xlsx)
$objPHPExcel = $objReader->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:

<?php
//Obtenemos un listado de usuarios desde un archivo excel
$i=1; //Si existiera una fila con los títulos inicial $i=2
//Recorremos las filas del excel
while($objPHPExcel->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:

<?php
// Clases Php
require_once("PHPExcel.php");
require_once("PHPExcel/Reader/Excel2007.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:

<?php
// Cargando el excel
$objPHPExcel = $objReader->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:

<?php
//Extraemos los registros de la base de datos mysql
$conexion = mysql_connect("$dbhost", "$dbuser", "$dbpass");
$sql="SELECT  * FROM usuarios;
$rst=mysql_query($sql,$conexion); //Ejecutamos la SQL
if(!$rst) //Comprobamos si hay errores
die("Error MySQL de Extracción de Datos);
while($fila = mysql_fetch_array($rst))
{
$objPHPExcel->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 ]

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 name="title" content="Artículo Meta Tags"> 

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 name="description" content="Principales Meta tags de html, para que puedas crear tu página web y que google y otros buscadores la reconozcan" />

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 name="keywords" content="meta tags,metatags,crear meta tags,buscadores,google" />

Meta DC LANGUAGE

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

<meta name="DC.Language" scheme="RFC1766" content="Spanish" />

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 name="revisit" content="7 days" />

Meta AUTHOR

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

<meta name="author" content="www.ideasfrescas.es - jlago@ideasfrescas.es" />

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

<meta name="robots" content="all / index / follow" />

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 http-equiv="Cache-Control" content="no-cache">

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 http-equiv="expires" content="01 Feb 2012 00:00:01 GMT">

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 http-equiv="refresh" content="10;URL=http://www.url.es">

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 http-equiv="set-cookie" content="cookievalue=xxx ;expires=Friday, 01-Ene-11 00:00:01 GMT; path=/"/>

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

<meta http-equiv="window-target" content="_top" />

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

Otros Artículos relacionados con Shadowbox: Shadowbox - Shadowbox y Google Maps - Galería de Imágenes con Shadowbox - Flash y Shadowbox - Opciones del 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.

Otros Artículos relacionados con Shadowbox: Shadowbox - Shadowbox y Google Maps - Shadowbox problemas con IE6 - Flash y Shadowbox - Opciones del Shadowbox

Shadowbox es capaz de mostrar Flash mediante el uso del plug-in de Adobe Flash Player. Si Flash no está disponible, el usuario tendrá que descargarlo e instalarlo antes de poder ver el contenido.

Además de las imágenes y Flash, Shadowbox soporta todos los formatos de video más populares en la web, como QuickTime, Flash Video y Windows Media Player.

Para que detecte automáticamente la librería shadowbox se pone el parámetro: rel="shadowbox"

Videos y Archivos con Flash y Shadowbox

SWF individual

Con la propiedad rel="shadowbox;width=400;height=300" en la etiqueta

Ver ejemplo de un SWF en Shadowbox

Galería SWF con varios Flash Ocultos

swf
swf

Este ejemplo es una galería de archivos multimedia (*.swf) que se abren con la librería shadowbox, dos de ellos están ocultos, pero al tener la propiedad rel="shadowbox[multimedia];...." en la etiqueta

Ver ejemplo 1 Galería SWF en Shadowbox Ver ejemplo 2 Galería SWF en Shadowbox Ver ejemplo 3 Galería SWF en Shadowbox

Si quitamos el estilo visibility:hidden de los enlaces, este ejemplo vale perfectamente para mostrar todos los multimedia en pequeño, y una vez abierto el shadowbox, navegar a través de todos ellos.

Ver ejemplo 1 Galería SWF en Shadowbox Ver ejemplo 2 Galería SWF en Shadowbox Ver ejemplo 3 Galería SWF en Shadowbox

Video de YouTube con Shadowbox

En esta ocasión en la propiedad rel se añade el parámetro player=swf mediante el cual le decimos a la librería shadowbox que el archivo que va a abrir es del tipo *.swf.

Ver ejemplo de Video de YouTube con Shadowbox

Video de Quicktime con Shadowbox

Video de Yahoo! Video con Shadowbox

Ver ejemplo de Yahoo! Video con Shadowbox

Video de Google Video con Shadowbox

Ver ejemplo de Google Video con Shadowbox

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

//cargamos la css de shadowbox, el archivo está a nivel del raiz

//cargamos la librería javascript de shadoxbox, el archivo está a nivel del raiz

//inicializamos nuestro shadowbox indicando las opciones de configuración
//Las opciones que se pasan a Shadowbox.init, se aplicarán para todas las instancias de Shadowbox

Otra forma de configurar las opciones del Shadowbox cuando lo llamamos en nuestra página web es con:

//Podemos configurar las opciones del Shadowbox en la propiedad ′rel′
imagen a mostrar

Listado de Opciones de Shadowbox

animate: Poner a false para desactivar todas las animaciones de apertura y cierre de la ventana del Shadowbox. Esto puede mejorar el efecto general en los equipos con bajo rendimiento. Valor por defecto: true.

Ejem. 1: animate: [false | true]

Ejem. 2: rel="shadoxbox;options={animate: [false | true]}"

ver ejemplo opción shadowbox

animateFade: Establezca a false para desactivar todas las animaciones de coloración de apertura y cierre de la ventana del Shadowbox. Valor por defecto: true.

Ejem. 1: animateFade: [false | true]

Ejem. 2: rel="shadoxbox;options={animateFade: [false | true]}"

ver ejemplo opción shadowbox

animSequence: Especifica al shadowbox el efecto debe hacer al pasar a la siguiente animación Shadowbox. Valores:

′wh′: primero el ancho y luego el alto

′hw′: altura primero, y después el ancho.

′sync′: ambos a la vez. (valor por defecto).

Ejem. 1: animSequence: [‘wh′ | ‘hw′ | ‘sync′]

Ejem. 2: rel="shadoxbox;options={animSequence: [‘wh′ | ‘hw′ | ‘sync′]}"

autoplayMovies: Poner a false, para desactivar automáticamente la reproducción de películas cuando se cargan dentro del Shadowbox. Valor por defecto: true.

Ejem. 1: autoplayMovies: [false | true]

Ejem. 2: rel="shadoxbox;options={autoplayMovies: [false | true]}"

continuous: Establecer a true para permitir al usuario ir directamente a la primera imagen en una galería a partir de la última, seleccionando la opción "Siguiente". Valor por defecto: false.

Ejem. 1: continuous: [false | true]

Ejem. 2: rel="shadoxbox;options={continuous: [false | true]}"

counterLimit: Limita el número de enlaces de contador que se muestra en un contador de "skip" de estilo. Si el número real de elementos de la galería es mayor que este valor, el contador se verá limitada a los elementos inmediatamente anteriores y posteriores al elemento actual. Valor por defecto es 10.

Ejem. 1: counterLimit: 20

Ejem. 2: rel="shadoxbox;options={counterLimit: 6}"

counterType: El modo de utilizar para el contador de la galería. Valores:

"default": muestra la galería con el texto: "1 de 5". (valor por defecto).

"skip": muestra un enlace independiente para cada pieza en la galería, lo que permite una navegación más rápida. Ejem. 1 2 3 4 5

Ejem. 1: counterType: [‘default′ | ‘skip′]

Ejem. 2: rel="shadoxbox;options={counterType: [‘default′ | ‘skip′]}"

displayCounter: Establezca a false para ocultar el mensaje que define counterType. Es decir el texto "1 de 5" para countertype:′default′ y el texto 1 2 3 4 5 para countertype:′skip′. Valor por defecto: true.

Ejem. 1: displayCounter: [false | true]

Ejem. 2: rel="shadoxbox;options={displayCounter: [false | true]}"

displayNav: Establezca a false para ocultar los controles de navegación de la galería. Valor por defecto: true.

Ejem. 1: displayNav: [false | true]

Ejem. 2: rel="shadoxbox;options={displayNav: [false | true]}"

enableKeys: Establezca a false para deshabilitar la navegación del teclado en las galerías de Shadowbox. Valor por defecto es true.

Ejem. 1: enableKeys: [false | true]

Ejem. 2: rel="shadoxbox;options={enableKeys: [false | true]}"

fadeDuration: Establece la duración (en segundos) que debe tardar la atenuación de la carga de las imagenes. El valor predeterminado es 0,35. A más valor más tarda en cargar el shadowbox de la imagen.

Ejem. 1: fadeDuration: 1

Ejem. 2: rel="shadoxbox;options={fadeDuration: 3}"

ver ejemplo opción shadowbox

flashParams: Una lista de parámetros (en un objeto de JavaScript) que se pasa a un ′object′ flash cargado en el Shadowbox. Para obtener una lista parcial de los parámetros disponibles, consulte la página de Adobe. Sólo se especifica un parámetro por defecto: bgcolor. El valor predeterminado es {bgcolor: "# 000000"}.

Ejem. 1: flashParams: {bgcolor: "# 000000",...}

Ejem. 2: rel="shadoxbox;options={flashParams: {bgcolor: "# 000000",...}}"

flashVars: Una lista de variables (en un objeto de JavaScript) que se pasará a una película flash como FlashVars. El valor predeterminado es {}.

Ejem. 1: flashVars: {bgcolor: "# 000000",...}

Ejem. 2: rel="shadoxbox;options={flashVars: {bgcolor: "# 000000",...}}"

flashVersion: La mínima versión de Flash necesario para reproducir una película flash. Valor por defecto: "9.0.0".

Ejem. 1: flashVersion: ′10.0.0′

Ejem. 2: rel="shadoxbox;options={ flashVersion: ′10.0.0′}"

handleOversize: Indica al Shadowbox el modo de utilizar para el manejo de contenido que es demasiado grande para la vista. Valores:

"none":esta opción no va a alterar las dimensiones de imagen, aunque puede producirse la saturación.

"resize": esta opción redimensiona el shadowbox en función de la pantalla, ocupando de gran contenido. En este modo, la altura y la anchura de shadowbox de gran contenido, puede cambiar el tamaño para ajustarse y que pueda ser visto en su totalidad, manteniendo su aspecto original. (Valor por defecto).

"drag":(sólo para imágenes). Esta opción permite visualizar una imagen de gran tamaño en su resolución original, dando la opción al usuario de arrastrarse dentro de la vista para ver partes que pueden ser recortadas.

Ejem. 1: handleOversize: ["none" | "resize" | "drag"]

Ejem. 2: rel="shadoxbox;options={handleOversize: ["none" | "resize" | "drag"]}"

handleUnsupported: esta opción le indica al shadowbox como se debe interpretar cuando se está reproduciendo en un medio no compatible. Valores:

"link": muestra un mensaje de error fácil de usar con un enlace a una página en la que necesita el plugin se puede descargar. (Valor por defecto).

"remove": esta opción, elimina cualquier galería de elementos no compatibles antes de mostrarlo. Los medios de comunicación no son compatibles cuando el plug-in necesario para visualizar correctamente el shadowbox en el navegador no está instalado.

Ejem. 1: handleUnsupported: ["link" | "remove"]

Ejem. 2: rel="shadoxbox;options={handleUnsupported: ["link" | "remove"]}"

initialHeight: La altura de Shadowbox (en píxeles) en que aparece por primera vez en la pantalla. Valor por defecto: 160.

Ejem. 1: initialHeight: 180

Ejem. 2: rel="shadoxbox;options={initialHeight: 300}"

ver ejemplo opción shadowbox

initialWidth: : El ancho de Shadowbox (en píxeles) en que aparece por primera vez en la pantalla. Valor por defecto: 320.

Ejem. 1: initialWidth: 180

Ejem. 2: rel="shadoxbox;options={initialWidth: 300}"

ver ejemplo opción shadowbox

modal: Establecer a true para evitar clics del ratón en la plantilla fuera de la ventana de cierre del Shadowbox. Valor por defecto: false.

Ejem. 1: modal: [false | true]

Ejem. 2: rel="shadoxbox;options={modal: [false | true]}"

ver ejemplo opción shadowbox

onChange: función de enlace que se activa cuando los elementos del shadowbox cambian de uno a otro. El único argumento de esta función será el elemento de la galería que está a punto de ser exhibido.

onClose: Una función de enlace que se activa cuando se cierra la ventana del Shadowbox. El único argumento de esta función será el elemento de la galería que se mostró por última vez.

onFinish: Una función de enlace que se activará cuando la ventana del Shadowbox termine de cargar la pieza de la galería actual (después de que todas las animaciones estan completas). El único argumento de esta función será el elemento actual de la galería.

onOpen: Una función de enlace que se activa cuando se abre la venana del Shadowbox.El único argumento de esta función será el elemento actual de la galería. Si es false se evitará la apertura de la ventana Shadowbox.

overlayColor: El color se utilizará para la superposición entre modos de transporte (en hexadecimal). Valor por defecto: "# 000".

Ejem. 1: overlayColor: "# f00"

Ejem. 2: rel="shadoxbox;options={overlayColor:"# f00"}"

overlayOpacity: La opacidad que va a tener de utilizar para la superposición modal. Valor por defecto: 0,5.

Ejem. 1: overlayOpacity: 1

Ejem. 2: rel="shadoxbox;options={overlayOpacity: 1.2}"

resizeDuration: La duración (en segundos) que deben tardar las animaciones al cambiar de tamaño. Valor por defecto: 0,35.

Ejem. 1: resizeDuration: 1.9

Ejem. 2: rel="shadoxbox;options={resizeDuration: 2}"

ver ejemplo opción shadowbox

showOverlay :Determina si la plantilla se muestra de forma absoluta. Valor por defecto: true.

Ejem. 1: showOverlay: [false | true]

Ejem. 2: rel="shadoxbox;options={showOverlay: [false | true]}"

ver ejemplo opción shadowbox

showMovieControls: Establezca a false para desactivar las barras de control del reproductor de películas QuickTime y Windows Media. Valor por defecto: true.

Ejem. 1: showMovieControls: [false | true]

Ejem. 2: rel="shadoxbox;options={showMovieControls: [false | true]}"

skipSetup: asignar a true para que la ventana que se abre, se salte automáticamente la llamanda Shadowbox.setup cuando el Shadowbox se inicializa. Valor por defecto: true.

Ejem. 1: skipSetup: [false | true]

Ejem. 2: rel="shadoxbox;options={skipSetup: [false | true]}"

slideshowDelay: Un retraso (en segundos) para utilizar presentaciones de diapositivas. Si se establece en algo distinto de 0, este valor determina un intervalo en el que Shadowbox automáticamente se procederá a la siguiente pieza en la galería. Valor por defecto: 0.

Ejem. 1: slideshowDelay: 1

Ejem. 2: rel="shadoxbox;options={slideshowDelay: 1.5}"

troubleElements: se le pasan las etiquetas html de los elementos que deben ser ocultados cuando se produce la superposición con transparencia al abrir el shadowbox. Esta opción existe debido a que algunos navegadores no son capaces de mostrar una capa semitransparente por encima de estos elementos. Estos elementos vuelven a ser mostrados cuando Shadowbox se cierra. Valor por defecto: ["select", "object", "embed", "canvas"].

Ejem. 1: troubleElements: ["select", "object", "embed", "canvas"]

Ejem. 2: rel="shadoxbox;options={troubleElements: ["select", "object", "embed", "canvas"]}"

viewportPadding: le indicas el margen interior (padding) (en píxeles) que debe mantener en todo el borde de la ventana del navegador. Valor por defecto: 20.

Ejem. 1: viewportPadding: 10

Ejem. 2: rel="shadoxbox;options={viewportPadding: 15}"

ver ejemplo opción shadowbox

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

El Botón +1 de Google tiene la funcionalidad de "almacenar", de alguna manera, el contenido al que le hemos dado clic, para luego poder buscarlo en nuestro perfil de Google.

Para poder hacer +1 en una página web, necesitas un perfil público de Google. Esto permite a otros usuarios saber quién hizo una recomendación.

Los Botones Google+1  se guardan en una nueva pestaña de tu perfil de Google. Puedes mostrar tu pestaña de +1s a todo el mundo o bien configurarla como privada, y utilizarla sólo para administrar personalmente todo lo que encuentras en Internet y que te encanta.

El botón +1 de Google puede aparecer en diferentes sitios web. Por ejemplo, puede ver un botón +1 para un resultado de búsqueda de Google, un anuncio de Google o junto a un artículo que esté leyendo en una página web.

Tus recomendaciones de +1 ayudan a mejorar el contenido que aparece en las Búsquedas de Google

¿Qué sucede cuando se realiza una recomendación de Google +1 a una página web?

Cuando se realiza una recomendación del Botón Google +1 a un enlace de una página web, el botón +1 cambiará a color azul y se agregará a la pestaña de recomendaciones de +1 de tu perfil de Google.

Independientemente de si has decidido compartir públicamente su pestaña de recomendaciones de Google +1, dichas recomendaciones seguirán siendo visibles para los demás usuarios que vean el contenido que has recomendado.

Por ejemplo, su recomendación del Botón Google +1 podría aparecer como parte de un recuento acumulado anónimo de las personas que también han recomendado lo mismo con el botón +1. Tu nombre también podría aparecer junto a +1 para ayudar a sus amigos y contactos a identificar el contenido que les puede resultar más útil de las páginas web.

¿Cómo implementar el botón +1 de Google en mi sitio web?

Para añadir el botón +1 de Google en nuestro sitio sólo debemos seguir los siguientes pasos (Descargar botón +1 de Google personalizado):

- Añadimos la siguiente etiqueta javascript en nuestro

<script type=&rdquo;text/javascript&rdquo; src="&rdquo;http://apis.google.com/js/plusone.js&rdquo;"></script>

- Colocamos el siguiente código donde queramos mostrar el botón Google +1Tan fácil cómo eso, no olvidéis cambiar el href con la url de vuestras páginas web.

<g:plusone size="medium" href="http://www.tudominio.com/"></g:plusone>

Si quieres instalar el botón +1 de Google en vuestro blog wordpress, pueden seguir estos pasos en el archivo post.php o bien esperar a que salga algún plugin que cubra dicha función (si no está disponible ya).

NOTA: Google no da soporte del botón Google +1 para los navegadores Internet Explorer 6 y 7, por lo que el botón pierde su funcionalidad y no se muestra.

Google Web Fonts

Fuentes gratuitas y de código abierto

Todas las fuentes del Directorio de Fuentes de Google son de código abierto. Esto significa que son de libre uso, independientemente de si estás trabajando en un proyecto privado o comercial.

¿Cómo usar las fuentes del Directorio de Google?

Sólo necesitamos 3 pasos para comenzar a usar las fuentes en nuestra página web:

1. Elegimos la fuente: Buscamos entre cientos de familias de fuentes, y añadirmos las que nos gustan para nuestra página web a nuestra colección.

2. Revisión de las fuentes de la colección: Compara entre todas las fuentes de tu colección, para ver los estilos en un diseño web dinámico.

3. Usamos las fuentes seleccionadas para la página web: Copia el código necesario que ofrece en tres formas distintas, y ya estás listo para añadir la fuente a tus páginas web.

Implementar una tipografía de Google Web Fonts en nuestra página web

Una vez seleccionada la tipo que quieres, para configurarla en tu páginas web, Google nos ofrece tres formas distintas:

1. Stantdar: A través de la etiqueta Link, como cualquier otro estilo css, (dentro de las etiquetas head de la página web).

<link href="http://fonts.googleapis.com/css?family=Fuentes+Escogidas+Google" rel='stylesheet' type='text/css'>

2. @import: Haciendo un include de la fuente directamente en el archivo de estilos css (ejemplo style.css).

@import url(http://fonts.googleapis.com/css?family=Fuentes+Escogidas+Google);

3. Javascript: A través de un script de javascript (dentro las etiquetas head de la página web).

Para usar la fuente o tipografía seleccionada e implementada, solamente hay que indicarlo en la propiedad Font-family:

h1 { font-family: 'Metrophobic', Arial, serif; font-weight: 400; }

[Directorio de fuentes de Google para páginas web]

Firebug 

Firebug se integra en el navegador Firefox, poniendo una gran cantidad de herramientas de desarrollo web a nuestra disposición. Nos permitee editar, depurar y monitorear CSS, HTML y JavaScript en vivo en cualquier página web.

HTML

Firebug hace que sea fácil de encontrar elementos HTML dentro de la página web. Una vez que hayas encontrado lo que buscas, Firebug nos da gran cantidad de información, y nos permite modificar el HTML en vivo.

CSS

De igual forma Firebug también nos permite localizar código CSS y editarlo en vivo, modificando la página web al instante.

JavaScript

Firebug incluye un potente depurador de JavaScript que permite detener la ejecución en cualquier momento suiguiendo su ejecución. Podemos medir el rendimiento de nuestro JavaScript y encontrar los cuellos de botella de una forma rápida..

Document Object Model - DOM

Document Object Model es un gran jerarquía de objetos y funciones utilizada por JavaScript. Firebug nos permite encontrar los objetos DOM de forma rápida yeditarlos sobre la marcha.

[ Firebug Site oficial ]     [ Extensión para Firefox ]

Extensión Web Developer

La extensión Web Developer agrega varias herramientas de desarrollo web a un navegador, facilitando la depuración y edición de las páginas web. La extensión Web Developer está disponible para Firefox y Chrome, y se pueden ejecutar en cualquier plataforma que soporte estos navegadores, incluyendo Windows, Mac OS X y Linux.

[ Web developer Extensión Firefox ]

ColorZilla

Este plugin para Firefox permite "capturar" valores de colores de una página web mediante un gotero. ColorZilla es muy útil para los diseñadores web.

[ Sitio oficial de ColorZilla ] [ Extensión ColorZilla para Firefox ]

HTML Validator

HTML Validator es una extensión para Mozilla, que añade validación de HTML dentro de Firefox y Mozilla. El número de errores de una página web HTML se muestra mediante un icono en la barra de estado.

La extensión HTML Validator puede validar el HTML enviado por el servidor o el HTML en la memoria (después de la ejecución Ajax).

Los detalles de los errores se ve cuando se mira el código fuente HTML de la página web.

La extensión se basa en Tidy y OpenSP (analizador SGML). Ambos algoritmos están incrustados dentro de Firefox y hace que la validación a nivel local, sin necesidad de enviar HTML a un servidor externo.

- El analizador SGML es el mismo programa de validator.w3.org.

- Tidy ha comprobar la accesibilidad de los tres niveles definidos en el WAI.

- W3 en línea de validación para validar HTML 5 en páginas web.

[ HTML Validator para Firefox ]

YSlow

YSlow analiza las páginas web y sugiere formas para mejorar su rendimiento, sobre la base del conjunto de reglas de alto rendimiento de Yahoo!. YSlow es un complemento para Firefox, y se integra con la herramienta de desarrollo web Firebug. 

Ofrece sugerencias para mejorar el rendimiento de la página web, mediante un resumen de los componentes y mostrando las estadísticas obtenidas. También proporciona herramientas para el análisis de rendimiento, como Smush.it ^TM y JSLint.

[ YSlow extesión para Firefox ]

Características del carrusel de imágenes Coin Slider

- Efectos de transición únicos

- Compatible con Internet Explorer 6 +, Firefox 2, Safari 2 +, Google Chrome 3 +, Opera 9 +

- Configuración flexible

- Movimiento automático de diapositivas

- Botones de Navegación

- Ligero (sólo 8kb)

- Vinculación de imágenes

- Libre de uso bajo licencia MIT

- Totalmente personalizable mediante CSS

- Compatible con iPhone y Android

Descargar de librerías de Coin Slider

Lo primero es descargar la librería JQuery o enlazarla remotamente:

Descargar JQuery

Enlace desde Google APIs

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Descargamos los archivos javascript y CSS necesarios para el Carrusel Coin Slider:

Descargar librerías de Coin Slider

¿Cómo implementarlo dentro de la página web?

Incluimos las librerías:

Añadimos la capa que contiene el carrusel de imágenes, creando un div con el id. E incluimos las imágenes con sus descripciones de la siguiente forma:

	
		
		
			Description for img01
		
	
	......
	......
	
		
		
			Description for imgN
		
	

Para terminar, y que funcione el carrusel, añadimos la llamada al Carrusel Coin Slider:

Opciones disponibles del Carrusel de imágenes

El carrusel de imágenes Coin Slider tiene muchas opciones para de configuración.

width: 565, // ancho del contenedor del carrusel height: 290, // alto del contenedor del carrusel spw: 5, // ancho de los cuadrados de los efectos, a un número menor el cuadrado es mayor sph: 3, // alto de los cuadrados pequeños, a un número menor el cuadrado es mayor delay: 3000, // tardanza en millisegundos entre imágenes sDelay: 30, // retardo en milisegundos entre cuadrados opacity: 0.7, // opacidad del título y la navegación titleSpeed: 500, // rapidez de aparición del título en milisegundos effect: ′′, // efecto al azar, valores: random, swirl, rain, straight navigation: true, // mostrar/ocultar botones anterior y siguiente links : true, // mostrar las imágenes como enlaces hoverPause: true // hacer una pausa al estar el ratón encima

NOTA

Tener cuidado con las propiedades spw y sph, porque una cifra muy alta puede causar problemas en las transiciones, ya que los cuadrados son más pequeños y tardará más. Si no se establece efecto, todos los efectos se ejecutarán al azar.

[ DEMO Carrusel de imágenes Coin Slider ]

[ Página web Coin Slider ]