Blog de Imaginanet S.L. Programacion web y marketing online.

Cómo utilizar PayPal para realizar compras en tu web

Imaginanet S.L. — Wed, 17 Feb 2010 09:32:57 +0100

Vamos a explicar cómo llamar al API de PayPal para realizar pagos en tu página web. En primer lugar deberemos crear una cuenta como desarrollador de PayPal Sandbox (https://developer.paypal.com/) que usaremos para verificar que lo hacemos de manera correcta antes de hacerlo funcionar en nuestra página web.

Tras hacerla y meternos en nuestra cuenta de desarrollador, deberemos seleccionar la opción Create a preconfigured buyer or seller account donde rellenaremos con nuestros datos el formulario teniendo en cuenta que debe ser una cuenta de vendedor.

Una vez creada, entraremos a nuestro listado de cuentas de PayPal Sandbox. Estas cuentas no son cuentas reales de PayPal y sólo funcionarán dentro de su Sandbox. Para entrar en ella pulsaremos el botón de Enter Sandbox Test Site y podremos introducir el usuario y contraseña para esta cuenta de prueba. Una vez dentro podemos observar que es como si fuera una cuenta de PayPal pero los pagos que se hagan a ella no serán reales.

Ejemplo de pago con el API de PayPal

Para realizar el pago utilizaremos un documento HTML en el que le pasaremos los parámetros que PayPal necesita (importe, código de venta, etc.) y otros opcionales como los datos del usuario que compra para que le aparezcan rellenados en el formulario de pago. Un ejemplo sería el siguiente:





Ejemplo de pago mediante la API de PayPal

La dirección de llamada del formulario de pruebas es https://www.sandbox.paypal.com/cgi-bin/webscr pero al pasar a ventas reales deberemos indicar https://www.paypal.com/cgi-bin/webscr

Como podemos ver, existente multitud de parámetros en el formulario que son fáciles de ver cuales son su propósito (nombre, dirección, etc.). A continuación detallamos los más importantes o que podemos tener duda de qué son realmente:

business: indicaremos la cuenta de PayPal asociada al vendedor. Mientras estemos de pruebas indicaremos la cuenta de pruebas del Sandbox, pero para ventas reales deberemos indicar nuestra cuenta de vendedor.
item_name: título que aparecerá en la pantalla de pago.
item_number: código de la venta, actuará como identificador único de cada venta.
amount: importe a pagar, donde si hay decimales no podrán indicarse con una coma ni con más de dos números.
return: página de vuelta a nuestra web indicando éxito en el pago.
cancel_return: página de vuelta a nuestra web indicando que no se realizó el pago por que el usuario lo canceló.
currency_code: código de la moneda usada en el pago. Para el caso del euro es EUR.
lc: idioma de la pantalla de pago.
country: código ISO del país del cliente.

Usando AJAX: Un simple ejemplo con PHP y jQuery.

Imaginanet S.L. — Wed, 10 Feb 2010 10:48:36 +0100

>Descrito de una manera muy resumida, AJAX es una tecnología que nos permite realizar acciones en una página web que necesiten respuesta del servidor sin recargarla. Con ello conseguimos que nuestra web sea dinámica y por tanto obtener un diseño más atractivo. Algunos ejemplos de lo que podemos hacer:

Un enlace que compruebe si un valor existe ya en una base de datos.
Completar un campo de texto de búsqueda con valores sugeridos por nuestra web.
Un chat web
etc.

En este artículo vamos a describir como realizar una sencilla llamada AJAX a una fichero externo que ejecutará un proceso (una suma entre dos valores enviados mediante POST) y nos devolverá la salida correspondiente apoyándonos con la librería jQuery, que aunque no es necesario su uso, lo haremos sobre ella para aprovechar la potencia que nos proporciona. Se podría decir que es el típico Hola mundo en AJAX.

El código se compone de dos archivos: un archivo donde mostraremos los formularios con datos de entrada y otro con el archivo de procesamiento.

A continuación mostramos el código del fichero de entrada de datos (habrá que tener cuidado con escribir correctamente la ruta a la librería jQuery):





Ejemplo sencillo de AJAX









Introduce valor 1

 


Introduce valor 2



Realiza suma






Resultado: 0

En este código, utilizamos los id de las cajas de texto para pasarle sus valores a la función realizaProceso. En esta función recogemos los valores de entrada en un array parametros y enviamos mediante AJAX especificando el parámetro data (datos que mandamos), url (dirección del archivo de proceso) y type (POST o GET).

Por último vemos que tenemos dos eventos: beforeSend y success donde podemos indicar la acción a realizar mientras se procesan los datos y tras terminar de procesarlos (en este caso jugar con el contenido HTML del id resultado).

Ahora vemos el archivo de procesamiento de datos (ejemplo_ajax_proceso.php) que únicamente suma los datos recibidos por POST:

Crear plugins de jquery

Imaginanet S.L. — Sat, 6 Feb 2010 21:09:29 +0100

>Jquery es una de las bibliocas javascript más simples e utilizadas. Crear plugins para esta biblioteca es muy sencillo. Vamos a ver los pasos necesarios:

Primero tenemos que incluir la biblioteca jquery en la cabecera. Nos la descargamos desde su web y la añadimos de la siguiente forma:
```
			
		
```
Luego creamos nuestro archivo del plugin, que luego también tendremos que añadirlo en la cabecera para utilizarlo.
```
			$.fn.duplicar = function () {
				this.each(function () {
					var html = "
"+$(this).html();
					$(this).append(html);
				});
			}
		
```
Lo que hace este plugin es duplicar el contenido de los elementos seleccionados.
$.fn es el objeto de jquery que contiene las funciones que nosotros le definimos. Dentro del código de la función, el this es un array con los elementos seleccionados con jquery. Con la función each, recorremos ese array.
Para utilizarlo:
```
			$("div.doble").duplicar();
		
```
Así duplicaríamos el contenido de todos los divs con la clase "doble"

Éste es un ejemplo muy básico. Para más información sólo hay que pasarse por la web de jquery la cual tiene una bastante buena documentación.

Display inline-block e internet explorer.

Imaginanet S.L. — Sat, 6 Feb 2010 19:41:50 +0100

La propiedad display de css (en la versión 2.1), puede contener un valor muy interesante, inline-block. Con este valor conseguimos que el elemento con esa propiedad se comporte como una caja, pero mostrandose en la misma línea, como si tuviese display: inline.

¿Y esto de qué nos sirve?, pues si no usamos esta propiedad tendríamos que añadirle a la caja un "float: left", por ejemplo, pero esto trae unas consecuencias, a veces, muy molestas. Por ejemplo, si queremos mostrar contenido dividido en cajas y que se muestren filas de 3 cajas, si éstas varían con la altura, pasaría esto:

Esto pasa porque al tener "float:left", las cajas "buscan" el primer espacio disponible a su izquierda. Ésto podría solucionarse desde el html, añadiendo cada tres cajas un elemento que tenga la propiedad "clear:both". Pero si queremos que el número de cajas por fila varíe dependiendo de la anchura de nuestra ventana del navegador, ya no valdría esta solución. Además si usamos la propiedad "display: inline-block", podemos alinear las cajas arriba, abajo, al centro , con tan solo cambiar la propiedad vertical-align. Si ponemos "vertical-align:top", tendremos esto:

Hacks para conseguir "display: inline-block" en internet explorer 6 y 7

Nuestros amigos Ie6 e Ie7, como siempre, mostrandonos su tecnología punta (recordemos que ésto es CSS 2.1), no implementan esta propiedad completamente.

De todas formas es muy sencillo hacerlo funcionar con un pequeño truco. En vez de usar "display: inline-block", tendríamos que ponerles "display: inline" y añadirles la propiedad "zoom:1"

	div.block {
		display: inline-block;
		#display: inline-block;
		_display: inline;
		zoom: 1;
	}

La "#" es un hack para que solo aplique esa propiedad IE7 y el "_" para IE6. La propiedad zoom solo la cojeran esos 2 navegadores, puesto que no es estándar, haciendo que el elemento se comporte como una caja.

Ver ejemplo en funcionamiento.

HTML 5 y el famoso tag "video"

Imaginanet S.L. — Thu, 28 Jan 2010 08:27:06 +0100

>HTML5 ha llegado, y aunque sea pronto para que el usuario pueda disfrutar de todo su potencial, los programadores hace ya unos meses que podemos ir viendo como serán las webs de dentro de unos años.

El tag es el que más revuelo está teniendo, y no solo por su integración en sitios como Youtube o Vimeo, sinó por los estándares soportados por cada navegador.

Mozilla se ha puesto firme al respecto y ha anunciado que no piensa incluir el estandar h264, ya que este no es un codec abierto y existen otros que si lo son y pueden ofrecer mejor calidad.
Esto nos deja en una situación en la que los navegadores web que actualmente soportan el tag de HTML5:

•Presto/Opera: HTML5 mediante GStreamer (incluye sólo Ogg/Theora).
•WebKit/Chrome: HTML5 mediante ffmpeg (Ogg/Theora y H.264/MP4).
•Gecko/Firefox: HTML5 con Ogg/Theora.
•WebKit/Epiphany: HTML5 mediante GStreamer (Ogg/Theora garantizado).
•WebKit/Safari: HTML5 mediante QuickTime (H.264/MOV/M4V, puede reproducir Ogg/Theora con XiphQT components).

Nos encontramos frente a una guerra en la que empresas como Apple y Microsoft, forman parte de la MPEG-LA, empresa que tiene la patente del codec h264, frente a Mozilla (por el momento) que se ha posicionado en contra de usar una tecnología propietaria que condicione la red.

Por su parte, Youtube no da su brazo a torcer. A pesar de que hay decenas de peticiones y de comentarios pidiendo el soporte de Ogg Theora, no sueltan prenda al respecto.

Menú desplegable con CSS

Imaginanet S.L. — Mon, 28 Dec 2009 18:28:03 +0100

>Vamos a crear un menú desplegable utilizando únicamente CSS. En principio no necesitaremos nada de javascript. Este menú funcionará en las últimas versiones de firefox, chrome, safari, opera, e internet explorer (versión 8). Para que funcione en Internet explorer 7 sólo necesitaremos añadir unos pequeños hacks. En explorer 6 necesitaremos utilizar javascript, puesto que este navegador no reconoce el selector ":hover" en elementos que no sean "a", los cuales no pueden contener elementos de tipo bloque dentro, si queremos cumplir los estándares, claro. Al final se explican los hacks necesarios.

Para comenzar definimos la estructura del menú, basándonos en listas desordenadas (ul, li):


	
		Item 1
		
			
				Option 1
			
			
				Option 2

Cada li tendrá un "a" con clase "item", y si queremos añadirle un submenú, un "ul", en este caso le tendremos que añadir la clase more al "a" por cuestión de estilo, así mostrará una flecha a la derecha, indicando que hay un submenú oculto.

Ahora tenemos que ocultar los submenús desde la hoja de estilos, para eso le añadimos la propiedad "display:none" a los "ul" dentro del "ul" principal:

ul.menu {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
	white-space: nowrap;
}
ul.menu ul {
	display: none;
}
ul.menu li {
	position: relative;
	display: inline-block;
}
ul.menu ul li {
	display: block;
}

A los li del primer nivel les aplicamos la propiedad "display: inline-block", para que se muesten en una sola línea, a los demás les ponemos "display:block". El primer ul tiene la propiedad "white-space: nowrap", para forzar a que sus "li" no salten de línea. Ahora ya tenemos los submenús ocultos, falta hacerlos aparecer:

ul.menu > li:hover > ul {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
}

ul.menu ul li:hover > ul {
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
}

Los submenús están posicionados absolutamente con respecto al "li" que los contiene, ya que éstos están posicionados relativamente. En el caso de los submenús del primer nivel los colocamos con "top:100%,left:0", para que salgan justo debajo del item padre. Para los demás submenús ponemos "top: 0; left: 100%", con lo que saldrán justo a la derecha del item padre.

Al final nos quedará algo parecido a esto:

Hacks para Internet explorer 6 y 7:

En Internet explorer 6 y 7, no funciona la propiedad "display: inline-block", pero con un sencillo truco podemos conseguir el mismo efecto:

ul.menu li {
	position: relative;
	display: inline-block;
	_display: inline;
	_zoom: 1;
	#display: inline;
	#zoom: 1;
}

Para hacer que los submenús aparezcan en internet explorer 6, tendremos que utilizar javascript, como comentábamos al principio. Utilizando la librería jquery, por ejemplo, haríamos lo siguiente:

$("ul.submenu li").hover(
	function () {
		$(this).addClass("hover");
	},
	function () {
		$(this).removeClass("hover");
	}
);

Como tampoco funciona el selector ">" en IE6, necesitaremos hacer unos cambios en la hoja de estilos:

ul.menu li.hover ul {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
}

ul.menu li.hover ul ul {
	display: none;
}

ul.menu ul li.hover ul {
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
}

ul.menu ul li.hover ul ul {
	display: none;
}

Para probar este menú accede aquí.
Para descargarte los archivos utilizados haz click aquí.

Creando un buscador para tu página usando Yahoo! Query Language

Imaginanet S.L. — Thu, 24 Dec 2009 11:01:31 +0100

Hace un par de semanas vi un vídeo tutorial en el que se muestra la potencia y la facilidad de uso de Yahoo! Query Language donde creando un código HTML y Javascript muy simple obtiene como respuesta (por cierto una respuesta muy rápida) la búsqueda en los buscadores de Yahoo!, Google y Bing. El vídeo en cuestión es el siguiente:

Building a search mashup with YQL using Google, Yahoo and Bing - live :) from Christian Heilmann on Vimeo.

Tras verlo empecé a realizar pruebas con la consola de YQL para ver que nos permite hacer esta API y realicé la primera consulta:

select * from search.web(20) where query="PHP";

Después probé a realizar la misma búsqueda en todos los buscadores:

select * from query.multi where queries='
  select *  from microsoft.bing.web(20) where query="PHP";
  select *  from search.web(20) where query="PHP";
  select *  from google.search(20) where q="PHP"
'

Lo más interesante, es que en la consola nos proporciona la dirección para obtener esta consulta y devuelve los datos en formato XML, por lo que hacer una aplicación que realice la llamada y obtenga la respuesta es realmente fácil de realizar.

Tras buscar por la documentación no he encontrado ninguna opción de poder filtrar los resultados por país o idioma, por lo que habrá que esperar hasta que añadan esta característica y podamos realizarlas en otros idiomas.

Finalmente, viendo la documentación observamos que tiene posibilidades muy variadas como añadir un post a tu blog Wordpress, interactuar con Flickr, con Yahoo! Maps, Amazon o Facebook entre otras, pudiendo usar YQL como API para estos servicios, por lo que es un servicio a tener en cuenta para integrarlo con otro uso que no sea el de realizar búsquedas.

Como usar Google Apps en tu web

Imaginanet S.L. — Thu, 24 Dec 2009 10:41:10 +0100

>Si alguna vez necesitas incluir google apps en tu dominio, aqui tienes una sencilla explicación de como puedes empezar.

1.Regístrate y accede a tu cuenta

En la página principal de Google Apps, haz clic en "Comparar ediciones y registrarse" para empezar a utilizar el programa y acceder al panel de control.

Más información

2.Verifica la propiedad del dominio

Confirma que eres el propietario del dominio con el que te has registrado para habilitar Google Apps.

3.Personaliza Google Apps

Google Apps permite modificar fácilmente varias configuraciones para aplicarlas a toda tu organización.

4.Crea cuentas de usuario

En el panel de control, crea tantas cuentas de usuario como necesite tu organización.

5.Migrar datos y activa el correo electrónico

Configura los registros Mail Exchange (MX) de tu dominio para habilitar la entrega de correo electrónico.

6.Implanta Google Apps

Ahora que has creado cuentas de usuario y has activado los servicios, ha llegado el momento de ayudar a tus usuarios para que empiecen a utilizar Google Apps.

¿Cómo ver el correo de nuestra cuenta?

- Podemos usar las funciones de php imap. Aquí va un pequeño ejemplo de como sacar un listado de los últimos 7 mensajes de correo.

function fix_text($str)
{
    $subject = '';
    $subject_array = imap_mime_header_decode($str);

    foreach ($subject_array AS $obj)
        $subject .= rtrim($obj->text, "t");

    return $subject;
} 


$mail = imap_open('{imap.gmail.com:993/novalidate-cert/ssl}', 'cuenta de correo', 'contraseña de la cuenta');
$last = imap_num_msg($mail);

echo 'Mensajes de correo ('.$last.') / Nuevos ('.$nuevos.')';

if ($last>7) $ini=($last-7);
else $ini=1;

$nuevos=0;
for ($i=$last;$i>=$ini;$i--){
	$header = imap_header($mail, $i);
	$from=$header->from;
	if (is_array($from)){
	        $de=$from[0]->personal;
	}

	$asunto=fix_text($header->subject);
	$asunto=''.$asunto."";

	if ($header->Unseen=="U"){
		$de=''.$de.'';
		$asunto=''.$asunto."";
		$nuevos++;
	}
	echo ''.$de.' - '.$asunto.' '.date('d/m', $header->udate);
}

imap_close($mail);

En el ejemplo conectamos con la cuenta de correo con la contraseña y obtenemos los últimos 7 mensajes de correo.
Luego vamos sacando mensaje a mensaje con el formato html que más no interese.
La condición de la linea 32 es para saber si el mensaje ha sido visto por el usuario o todavía no.

¿Cómo ver el google calendar?

Para esta opción hay que tener requerido en nuestro php las librerías de Zend que podemos descargar de la web http://www.zend.com
A continuación nos logueamos con nuestro usuario y contraseña de google apps y pedimos la información del tramo de fechas de google calendar que queremos obtener.
A continuación tenéis un ejemplo de como obtener los datos de google calendar del mes de enero de 2010

require_once('Zend/Loader.php');
Zend_Loader::loadClass('Zend_Gdata');
Zend_Loader::loadClass('Zend_Gdata_AuthSub');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
Zend_Loader::loadClass('Zend_Gdata_Calendar');

$service = Zend_Gdata_Calendar::AUTH_SERVICE_NAME;
$client = Zend_Gdata_ClientLogin::getHttpClient('usuario google apps', 'contraseña', $service);
$service = new Zend_Gdata_Calendar($client);
$dominioGapps=explode('@','usuario google apps');

echo 'http://www.google.com/calendar/hosted/'.trim($dominioGapps[1]).'/render?account_id='.urlencode('usuario google apps');

$query = $service->newEventQuery();
$query->setUser('id del calendario'); //Tambien se puede poner la opcion 'default' para el calendario común

$query->setVisibility('private');
$query->setProjection('full');
$query->setOrderby('starttime');
//$query->setFutureevents('true');// Retrieve the event list from the calendar server
$query->setStartMin('2010-01-01');
$query->setStartMax('2010-01-30');
try {    
	$eventFeed = $service->getCalendarEventFeed($query);
} catch (Zend_Gdata_App_Exception $e) {
	echo "Error: " . $e->getResponse();
}

foreach ($eventFeed as $event) {
	$valor=$event->when;
	$donde=$event->where;
	$autor=$event->author;
	$categoria=$event->category;
	$idevento=$event->link;
	$diaEvento=$valor[0]->startTime;
	$diaMesEvento = intval(substr($diaEvento,8,2));
	$dias[$diaMesEvento] .= $event->title->text.". Hora: ".substr($diaEvento,11,5)." (".substr($diaEvento,23,6).")n";
	$enlaceEvento[$diaMesEvento]=$idevento[0]->href;
}

En este ejemplo obtenemos un array con los eventos que hay por dia

Usando el API de Google Analytics para mejorar nuestra web

Imaginanet S.L. — Wed, 23 Dec 2009 16:11:32 +0100

Desde que Google sacó su herramienta Analytics nos proporcionó una nueva perspectiva gratuita para ver nuestra web desde los ojos de las personas que la visitan permitiéndonos conocer lo que "realmente opinan" los usuarios de tu web.

A primera vista desde el panel de control de Google Analytics, la gran cantidad de opciones y menús que tenemos resulta hasta confusa para entender realmente que nos están diciendo y más aún para gente inexperta. Así que tras un tiempo trabajando con ella, decidí ponerme manos a la obra para simplificar esta gran herramienta para hacerla un poco más sencilla.

¿Cómo usar el API?

En primer lugar, damos por supuesto que tenemos una cuenta de Google Analytics y un sitio web con el código Javascript que nos haga recolectar las estadísticas en nuestra cuenta.

En segundo lugar deberemos elegir unas librerías que nos ayuden a usar el API en función del lenguaje de programación que vayamos a usar. Para ello, podemos encontrar en la sección de librerías de Google Analytics una buena cantidad de librerías para diferentes lenguajes (Java, Python, PHP, etc.).

Tras estos dos pasos iniciales, tenemos todo listo para empezar a utilizar el API. Podemos echar un vistazo a la documentación del API y como era de esperar las posibilidades que nos ofrece esta completísima API son muchas.

Lo que más nos interesa es conocer los parámetros con los que podemos utilizarla: dimensiones qué es lo que vamos a medir y las métricas son en qué unidad lo vamos a medir. Estas dimensiones y métricas las podemos agrupar de la manera que queramos, aunque para obtener unos buenos resultados deberemos hacerlo con sentido y además, podemos hacer el uso de filtros, que nos permite filtrar los valores devueltos por una métrica o una dimensión (por ejemplo una dirección web en concreto).

A continuación vamos a hablar de los datos básicos que se desprenden de su uso.

¿Tiene buen contenido o diseño mi web?

Tras interpretar los datos que obtenemos, podemos considerar si nuestra web tiene buenos contenidos o no desde dos puntos de vista, globalmente o específicamente para una página determinada.

Desde el punto de vista global, deberemos prestar atención al grupo de métricas ga:bounces y ga:entrances que nos dirá el tanto por cien de rebote de nuestra web. Este cálculo lo haremos realizando la división de ga:bounces entre ga:entrances dándonos como resultado el número de cuantas personas abandonan la web tras visitar nuestra página inicial.

Un alto número en el tanto por cien de rebotes nos indica que la página inicial no contiene o no muestra de manera correcta lo que el usuario esperaba encontrar en ella y por tanto vuelve a la página anterior por donde llegó.

Otra valoración que podemos hacer es si estos contenidos globales son interesantes o no para el usuario mediante la métrica ga:timeOnSite que nos proporciona la cantidad de tiempo que estuvo el usuario en nuestra web y la dimensión ga:pageDepth, que nos dice la cantidad media que los usuarios ven cuando entran en nuestra web.

Desde el punto de vista específico para una determinada página, si existe un alto número número de rebotes significa que al llegar a esa página es confusa o no tiene interés para el usuario así que deberíamos mejorar los aspectos donde falle. Este cálculo lo realizaremos realizando la división de las dimensiones ga:bounces entre ga:uniquePageviews añadiendo la dimensión ga:pagePath a la consulta.

¿Son buenas las palabras clave que utilizo para cada página?

Las palabras claves nos sirven junto al contenido de cada página para describirla de cara a los buscadores. Para ver si las palabras claves que describen nuestras páginas son buenas podemos utilizar las dimensiones ga:source filtrando por ga:pagePath, especificando en esta última la página deseada a comprobar.

Si el resultado que nos devuelve es alto desde los buscadores Google, Yahoo, Bing, etc. significa que de cara a los buscadores las palabras clave describen bien el contenido.

¿Cuál es el comportamiento de los visitantes de mi web?

Un valor interesante es el que nos proporciona la dimensión ga:secondPagePath, que nos dice cuál fue la segunda página que visitó el usuario tras ver nuestra web. Ésto nos indica que es lo que más llama la atención en nuestra web pudiendo potenciar otras páginas que deberían tener mejores resultados.

Podemos observar también la navegación que realizan los usuarios para páginas determinadas y ver desde qué página llegaron y a qué página fueron desde ella. En este caso, para saber desde qué página llegaron a otra deberemos usar como parámetros la dimensión ga:previousPagePath,métrica ga:pageviews y el filtro ga:nextPagePath especificando la página objetivo.

Por el contrario, para saber qué página visitaron desde la actual usaremos la dimensión ga:nextPagePath, métrica ga:pageviews y filtro ga:previousPagePath con la página que queremos consultar

Los datos obtenidos nos dirán si la navegación que realiza el usuario es la que esperamos o por el contrario no lo es y por tanto el contenido no le interesa.

Conclusiones

Aunque esta herramienta es muy potente para el marketing web y sólo hemos comentado algunas de las más importantes posibilidades que nos ofrece el API, también nos ofrece muchas más como seguimiento de campañas, comercio electrónico, fidelización de clientes, etc.

Todo estos datos sobre el patrón de comportamiento de los usuarios nos sirve para conseguir un mejor posicionamiento web y por tanto tener más posibilidades de éxito. Estas técnicas las utilizamos desde Imaginanet para asesorar a nuestros clientes y éstos puedan mejorar sus proyectos para conseguir el éxito deseado.

En próximas entradas, hablaremos de posibilidades más avanzadas que nos ofrece.

Desde que Google sacó su herramienta Analytics nos proporcionó una nueva perspectiva para ver nuestra web desde los ojos de las personas que la visitan con un montón de estadísticas de todo tipo.

En primer lugar eché un vistazo a la documentación del API en la dirección http://code.google.com/intl/es-ES/apis/analytics/ y como era de esperar las posibilidades que nos ofrece esta completísima API son numerosas. A continuación hablaremos de las conclusiones básicas que podemos obtener con ella, aunque en primer lugar deberemos conocer que estos datos están divididos en dos grupos, dimensiones que es lo que vamos a medir y las métricas, que es en qué unidad lo vamos a medir.

¿Tiene buen contenido o diseño mi web?

Tras interpretar los datos que obtenemos, podemos considerar si nuestra web tiene buenos contenidos o no desde dos puntos de vista, globalmente y específicamente para una página determinada.

Desde el punto de vista global, deberemos prestar atención al grupo de métricas M1. Visitor que nos dirá el tanto por cien de rebote de nuestra web. Este cálculo lo haremos realizando la división de las métricas ga:bounces entre ga:entrances dándonos como resultado el número de cuantas personas abandonan la web tras visitar nuestra página inicial.

Un alto número en el tanto por cien de rebotes nos indica que la página inicial no contiene o no muestra de manera correcta lo que el usuario esperaba encontrar en ella y por tanto se va a otra.

Una vez determinado que el tanto por cien de rebote es lo más bajo posible, podemos estimar si estos contenidos globales son interesantes o no para el usuario mediante la métrica ga:timeOnSite que nos proporciona la cantidad de tiempo que estuvo el usuario en nuestra web y la dimensión ga:pageDepth, que nos dice la cantidad media que los usuarios ven cuando entran en nuestra web.

¿Son buenas las palabras clave que utilizo para cada página?

Las palabras claves nos sirven junto al contenido de cada página para describirla de cara a los buscadores. Para ver si las palabras claves que describen nuestras páginas son buenas podemos utilizar la métrica ga:entrances junto a la dimensión ga:landingPagePath y así indicarnos si hemos conseguido nuevas visitas desde buscadores a una página concreta.

¿Cuál es el comportamiento de los visitantes de mi web?

Podemos observar también la navegación que realizan los usuarios para páginas determinadas y ver desde qué página llegaron y a qué página fueron desde ella. Para ello tenemos que utilizar una gran característica de esta API que son los filtros, que nos permiten obtener una combinación de dimensiones y métras filtrando los resultados para una dimensión o métrica determinada.

En este caso, para saber desde qué página llegaron a otra deberemos usar como parámetros

dimensión ga:previousPagePath métrica ga:pageviews

filtro ga:nextPagePath pagina_objetivo.html

y para saber qué página visitaron desde la actual

dimensión ga:nextPagePath métrica ga:pageviews

filtro ga:previousPagePath%3D~test.html

Los datos obtenidos nos dirán si la navegación que realiza el usuario es la que esperamos o por el contrario no lo es y por tanto el contenido no le interesa.

Finalmente, debo decir que aunque esta herramienta es muy potente y que sólo hemos comentado algunas de las más importantes posibilidades que nos ofrece el API y que podemos ver todo lo que podemos hacer aquí

http://code.google.com/intl/es-ES/apis/analytics/docs/gdata/gdataReferenceDimensionsMetrics.html

, nos sirve para conseguir un mejor posicionamiento web y por tanto tener más posibilidades de éxito. Estas técnicas las utilizamos desde Imaginanet para conseguir que nuestros clientes tengan éxito http://www.imaginanet.com/posicionamiento-seo.html

En próximas entradas, hablaremos de posibilidades más avanzadas que nos ofrece.

La vida más fácil con Google Mail (Gmail y Google Apps for your domain)

Imaginanet S.L. — Wed, 16 Dec 2009 11:05:45 +0100

>Acabo de darme cuenta de que en GMail, aparece una novedad en color rojo que dice "¡Nuevo! Videos de Gmail" y veo que es una campaña que Google está haciendo a sus usuarios enseñándoles todo lo que pueden hacer con GMail. Podeis verla aquí.

En los vídeos se explican las distintas maravillas del cliente de correo electrónico y del servidor.
Valorando todo lo que dicen, realmente es aplicable a Google Apps. Nosotros usamos Google Apps y estamos encantados, pero resulta que somos integradores de Google Apps - para intranets, extranets, gestores de contenido, y hasta en las páginas web que diseñamos y desarrollamos - y los clientes que también utilizan Google Apps for your Domain, también están muy contentos.
Razones que tenemos para ello son las explicadas en esta página que ha creado Google, pero además incluimos una serie de ventajas adicionales:
- Google Mail. Al poder configurarlo como servidor IMAP, es fantástico, te permite sincronizar el correo desde cualquier dispositivo. Cuando leo un email en mi teléfono móvil, me lo marca como leído en el resto de clientes de correo, si envío un email, lo veo en la bandeja de enviados de todos mis clientes de correo. Es algo muy cómodo.
- Google Calendar. Permite tener calendarios de empresa para distintas tareas, por ejemplo, podemos tener el calendario de trabajos de diseño web, el cual está compartido con diseñadores y maquetadores, el calendario de entrega de proyectos que está compartido con las personas encargadas de hacer seguimiento de proyectos, ... Además, con cada cliente compartimos un calendario con los diferentes hitos del proyecto, conforme el proyecto va avanzando, el calendario se actualiza inmediatamente. Y todo sincronizado con el teléfono móvil, portatil, ...
- Google Docs. Qué podemos decir de una herramienta ofimática que permite compartir con clientes y compañeros de trabajo hojas de cálculo con presupuestos, documentos de texto con el seguimiento o la funcionalidad de un proyecto, etc.
- Google Talk. Una herramienta imprescindible en una intranet, permite mantener conversaciones privadas entre usuario y entre distintas sucursales de la empresa, con la gran ventaja de que todo el texto que hemos escrito nos lo envía por email a nuestra cuenta de correo y de nuestro compañero de charlas.

...

Y lo que cuentan en los vídeos colgados explican los siguientes temas:
- Cadenas de conversación de Gmail. Aquí vemos cómo al iniciar un mensaje, las respuestas que este tiene se guardan todas agrupadas de forma que la conversación esté toda en el mismo mensaje. Esta utilidad está muy bien, aunque a veces genera pequeñas confusiones, es muy útil os lo aseguro.

- ¿No hay conexión a internet? Sin problemas, usando Google Gears podemos trabajar con nuestro Google Mail y cuando tengamos conexión a internet, automáticamente lo detectará y recibirá los mensajes pendientes de recibir, así como enviará aquellos que estén pendientes de envío.

- AntiSpam. Una aplicación anti-spam que funciona muy fina.

- Chat de video y voz.

Texto a voz usando el elemento Audio de HTML5

Imaginanet S.L. — Tue, 15 Dec 2009 11:18:24 +0100

>Weston Ruter ha creado un mashup que enlaza el soporte de Audio en HTML5 en navegadores modernos (no more Internet Explorer please) con la nueva API de traducción de Google.

Hace poco que Google Translate anunció la posibilidad de escuchar traducciones habladas en inglés via texto a voz (TTS - Text To Speech). Buscando en el panel de red de Firebug de donde estaban llegando los datos TTS, se ve que el audio está en formato MP3 y se ejecuta con una consulta HTTP GET: http://translate.google.com/translate_tts?tl=en&q=text.

Google Translate, advierte de que el servicio sólo está disponible para pequeñas traducciones a inglés, y el servicio web de texto a voz se limita a una cantidad de texto no superior a 100 caracteres.

Otra restricción es que el servicio devuelve un error 404 si la petición incluye un Referer en el header (parece ser que el referer debe ser translate.google.com).

Según dice Weston Ruter, creó este mashup viendo las limitaciones del web service TTS que sólo puede usarlo Google Translate, para utilizarlo desde cualquier navegador que admita el elemento Audio de HTML5. El mashup web utiliza este último y un atributo rel="noreferrer".

Hay otros experimentos de texto a voz, por ejemplo esta página. Ójala que Google haga pública su API de traducción.

jQuery ColorPicker. Tres plugins que merece la pena tener en cuenta.

Imaginanet S.L. — Tue, 15 Dec 2009 10:47:35 +0100

>Todos alguna vez, hemos necesitado incluír campos de selección de color (colorpicker) cuando realizamos zonas de administración o backOffice.
Está muy pasado de moda y queda demasiado rudimentario incluir campos de texto donde se introduzca el código hexadecimal del color deseado, además, de esta forma es un poco complicado explicar lo qué significa el código #ff0000. Si queremos hacer las cosas fáciles de usar, y proporcionar al usuario algo fácil e intuitivo, hay que incluir una aplicación de selección de color desde donde el usuario seleccione el color deseado de forma visual.

En este artículo mencionamos tres plugins de jQuery para la inclusión de un colorPicker en campos de formularios.

Farbtastic está escrito por Steven Writtens con licencia GPL. Si quieres más información sobre el plugin, pulsa aquí. Es muy fácil de incluir:
1. Incluir los archivos javaScript y CSS en el HTML de tu página web.

2. Añadir un elemento que sea el contenedor del gráfico y el campo de texto, y asignarles un identificador a cada uno de ellos.

3. Añadir al evento ready() un controlador que inicializa el color picker y lo enlaza con el campo de texto.

ColorPicker, está programado por Stefan Petre. Con dos tipos de licencia, MIT y GPL. Puedes ver su página web pulsando aquí.
Si quieres ver la guía rápida de implementación, pulsa aquí. La inclusión en tu página web es muy rápida, cargas los archivos javaScript y CSS necesarios, creas un campo de texto que sea el que incluya el colorPicker y le asignas un identificador, a continuación, en el evento ready(), lo inicializamos asignándoselo al identificador del campo creado.

$('idCampoDeTexto').ColorPicker();

Si queremos activarlo con opciones personalizadas:

$('idCampoDeTexto').ColorPicker({option1:val1,opt2:val2,...});

jPicker es una migración del plugin escrito para Prototype por John Dyers (fantástico plugin). Puedes ver más información sobre el plugin en la página de jPicker.

Rendimiento de las URIs con datos

Imaginanet S.L. — Mon, 14 Dec 2009 11:55:47 +0100

>En el blog de Ravelrumba, han hecho un pequeño experimento con URIs de datos y su rendimiento en la carga de una página web. En el estudio sólo se ha utilizado Firefox 3.5 con la caché vacía.

Los resultados no son interesantes por las respuestas que nos proporcionan, sino por las preguntas que hacen aparecer al respecto.

En el experimento se han usado 31 imágenes y se han convertido a data URIs con CSSEmbed. En un caso adicional, se ha usado DURIS para separar todas las URIs de datos en un archivo CSS aparte, así, la etiqueta se queda mucho más pequeña y así, carga más rápido.

Los tres escenarios planteados, llevan a un rendimiento muy parecido (usando HTTPWatch, los tiempos de carga son 1,35 s, 1,13 s y 1,13 s), viendo que los escenarios con data URI son un poco mejores. Es más interesante ver que un usuario que deja un comentario desde Suráfrica proporciona unos resultados bastante distintos: 4,04 s, 1,44 s, 1,92 s. En este caso, el retardo que existe para cargar 31 imágenes, puede conllevar estos tiempos de carga.

Otro factor importante es la velocidad que percibe el usuario, al fin y al cabo, lo que más tiene que ver con el rendimiento. Los dos escenarios funcionan con la misma velocidad percibida, el segundo de ellos parece ser mejor ya que las imágenes se cargan en una hoja de estilos al final de la página, después de haberse cargado un script.

El estudio saca a la luz preguntas sobre la carga de URIs con datos. Otro usuario del web, comenta que ha enviado un gráfico que muestra como las URIs a imágenes tardan más en cargar que las imágenes descargadas de una forma convencional. Este es el tipo de cosas que sería bueno investigar.

En el mismo blog se puede ver un estudio sobre el rendimiento de las imágenes de fondo en distintos navegadores.

Google: más búsquedas en tiempo real.

Imaginanet S.L. — Mon, 14 Dec 2009 11:22:11 +0100

>En abril de este año, Google empezó a mostrar resultados de búsquedas en Twitter en tiempo real y así ver lo que dice la gente en el mismo momento.
Ahora, los usuarios podrán ver que en la parte superior de una búsqueda de resultados y siempre que tenga sentido para la búsqueda, actualizaciones en direto de los contenidos que la gente escribe en Twitter, FriendFeed, Facebook, MySpace, FriendFeed, Jaiku e Identi.ca.

Además, incluirá los artículos que se hayan rastreado para este tema en los medios que rastrea Google News o el buscador de blogs de Google.

En Google Trends se ha incluído también esta opción para ver estadísticas de las palabras que más se consultan en el buscador en tiempo real.

En el video siguiente se ve como una búsqueda se va llenando de comentarios de Twitter que van dejando los usuarios sobre el tema:

Google Goggles. Usa imágenes para buscar en la web.

Imaginanet S.L. — Sat, 12 Dec 2009 17:29:13 +0100

>Como una imagen vale más que mil palabras, en Google acaban de lanzar un servicio de búsqueda a partir de una foto. Sácale una foto y te devolverá resultados relacionados con el tema.
Sólo funciona en dispositivos con Android y reconoce lugares, obras de arte, logotipos… incluso, si estás en un lugar destacado, sólo has de activar el GPS, mandar la localización y se te devolverá la información sobre el lugar donde te encuentres..

Búsquedas personalizadas para todos los usuarios.

Imaginanet S.L. — Mon, 14 Dec 2009 11:34:54 +0100

Hace unos años, nacían las búsquedas personalizadas de Google, en donde se comenzaba a modificar los resultados en función de los intereses del usuario. Un año más tarde, se comenzaba a almacenar y a mostrar el historial de búsquedas de cada usuario que se había registrado previamente con una cuenta de usuario de Google.

El buscador venía almacenando, por cuestiones técnicas, las búsquedas que se realizan desde cada una de las direcciones IP que se conectan al servicio. Sin embargo, la compañía ha anunciado oficialmente que el historial de búsquedas se va a almacenar durante 6 meses para todos los usuarios, y no se relacionará con nuestra dirección IP, sino con una 'cookie' de nuestro navegador web, incluso cuando el usuario no dispone de cuenta en Google.

Con esta 'cookie' (que se puede borrar en cualquier momento), Google va a distinguirnos no ya por nuestra dirección IP, sino por el navegador web que utilicemos. De esta manera, aunque nuestro proveedor de Internet nos cambie la dirección IP, o aunque estemos con nuestro portátil en otro país, Google va a saber durante 180 días las búsquedas que hemos realizado.

El objetivo es, según este post oficial personalizar nuestras búsquedas, y ofrecernos los resultados más adecuados a nuestros gustos y preferencias. Así, por ejemplo, si cuando buscamos 'barcelona' siempre acabamos haciendo click en las páginas de hoteles, la siguiente vez que lo consultemos quizá veamos sitios web de hoteles en las primeras posiciones.

Esta nueva característica del buscador nos trae consigo de nuevo la duda acerca de si Google va a tener en cuenta estos clicks para modificar los resultados también del resto de usuarios y cambiar el posicionamiento general de las búsquedas. Pero también traerá consigo una importante polémica sobre la privacidad de todos nosotros, puesto que desde ahora, en caso de que queramos cuidar un poco más los datos expuestos ante Google, habrá que preocuparse de eliminar la 'cookie' de 'google.com' (o el dominio de la versión local que utilicemos).

Para borrar esta 'cookie' existen varias soluciones, para Firefox, están las extensiones 'Google-anon' o 'Cookie Manager', este link sobre las cookies en MS IExplorer, o esta página más genérica sobre 'cookies'.

HighCharts. Un API de gráficos bastante buena.

Imaginanet S.L. — Mon, 14 Dec 2009 15:46:27 +0100

>Todos queremos mejores librerías javascript de gráficos. Dojo tiene una buena opción que es Protovis, y por ahí hay muchas librerías (deja un comentario con tu favorita).
La última en aparecer es HighCharts que usa tanto jQuery como MooTools para las tareas JavaScript más frecuentes. Además, Internet Explorer necesita ExCanvas que emula al elemento Canvas.
Un ejemplo de gráfica:

var chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'chart-container-1',
            defaultSeriesType: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges]
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });

Devuelve algo así:

Google Analytics desbloquea la carga de webs lanzando el modo asíncrono (Async Mode)

Imaginanet S.L. — Wed, 2 Dec 2009 16:10:25 +0100

>Gran noticia la que acabo de leer que Google Analytics lanza un modo de seguimiento asíncrono "Google analytics launches Asynchronous Tracking" (click aquí para ver artículo original).

Al fin nuestro navegador no se va a enganchar cargando el código JavaScript.

El sistema hará que las webs funcionen más rápido:
El mayor problema de cargar archivos JavaScript es que bloquea el renderizado de la página web y la descarga de otros recursos. En el nuevo modelo asíncrono de Google Analytics, se utiliza el elemento Script del DOM.
Google Analytics, con su archivo ga.js, es un ejemplo perfecto de un script que debiera cargarse de forma asíncrona, ya que no añade contenido alguno a la página, con lo cual, sería ideal cargarlo sin bloquear las imágenes y hojas de estilo que harán que los usuarios vean lo que realmente han venido a ver: nuestra página web.

Se ha mejorado la estabilidad:
¿Qué pasa si un script tarda mucho tiempo en cargarse, o falla su carga? El usuario se encuentra ante una página en blanco, ya que los scripts bloquean el renderizado de la web. Aunque Google Analytics tiene una infraestructura muy grande tras él, cualquier recurso, sobre todo de terceros, tiene que añadirse con cautela. Es una gran noticia que GA está proporcionando patrones que permite el renderizado de las webs mientras se carga ga.js.

¿Qué hay que hacer para incluir ga.js en modo asíncrono? cambia tu script para que sea de la forma siguiente:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
   var ga = document.createElement('script');
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   ga.setAttribute('async', 'true');
   document.documentElement.firstChild.appendChild(ga);
})();

Lógicamente, tienes que sustituir "UA-XXXXX-X" por tu ID.
Al cargarse ga.js de forma asíncrona, tiene que existir una forma para que algunas funciones de GA se puedan utilizar cuando el código se termina de cargar. Esto se hace introduciendo comandos en la cola del objeto de Google Analytics, _gaq.
Una vez que todos los comandos callback se han puesto en cola, se carga el script ga.js. Esto se empaqueta en una función asíncrona para así evitar conflictos de namespace.
Se crea un elemento "script" y su fuente "src" se pone al valor correcto de la URL de ga.js. Mirando más alla, en el soporte que se incluye en HTML5 a los scripts asíncronos, el atributo "async" se pone a "true", muy bueno! La ventaja más importante es que le dice al navegador que los siguientes scripts se pueden ejecutar de forma inmediata (no tienen que esperar a que se carge ga.js). La última línea añade el elemento script al DOM. Esto es lo que ejecuta la descarga de ga.js. En muchos códigos se hace document.getElementsByTagName(”head”)[0].appendChild, pero esto falla si el documento no tiene elemento head. Esta forma de hacerlo, es más robusta.

Galería de fotos polaroid, sólo usando CSS 3

Imaginanet S.L. — Wed, 2 Dec 2009 10:55:49 +0100

>Viendo la galería de fotos con estilo polaroid que han creado en el blog de Tutorialzine, la cual utiliza jQuery y un mínimo CSS3, que es una sombra "box-shadow" y una rotación que utiliza "-webkit-transform".
Así hemos creado una galería de fotos similar pero que únicamente utiliza CSS 3, pero aplicando las diferentes opciones que permite este.

El código XHTML creado, únicamente consta de una lista de imágenes (ul > li) con su respectivo pie de imagen:


    
        Globos
    
    
        Coche
    
    
        Niebla
    
    
        Molino de viento
    
    
        Bosque

La hoja de estilos, la teneis aquí, en ella, lo más destacable es:
Por un lado, tenemos el contenedor de todas las imágenes (UL), al cual le aplicamos un gradiente de fondo utilizando "-webkit-gradient" en la propiedad "background" del elemento. Aplicamos un gradiente circular o radial con una posición y tamaño, que va de un gris más oscuro, a un gris más claro.

ul.thumb {
   position: relative;
   list-style: none;
   background: -webkit-gradient(radial, 45 45, 50, 50 10, 640, from(#555), to(#222)) !important;
   background: #666;
}

También tenemos el posicionamiento y la rotación que damos a cada LI, con su respectiva imagen y texto. Posicionamos el elemento centrado tanto en altura como en anchura, lo redimensionamos y le aplicamos sombra, además, es importante tener en cuenta que este elemento tiene un efecto "ease-in-out" en el "-webkit-transition" con una duración de 3 segundos, es el que hace que en WebKit, se amplien y reduzcan con el efecto de zoom . Además, con el selector ":nth-child()", cambiamos la posición y giramos cada imagen, además de aplicar a cada imagen una sombra.

ul.thumb li {
   position: absolute;
   top: 50%;
   left: 50%;
   padding: 6px 6px 24px 6px;
   background: #FFF;
   width: 150px;
   height: 130px;
   -moz-box-shadow:1px 1px 6px #222;
   -webkit-box-shadow:1px 1px 6px #222;
   box-shadow:1px 1px 6px #222;
   -webkit-transition: all 3s ease-in-out;
   z-index: 0;
}
ul.thumb li img {
   width: 100%;
   height: 100%;
}
ul.thumb li:nth-child(1) {
   margin-top: -130px;
   margin-left: -130px;
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   transform: rotate(30deg);
}

Para terminar, también es muy destacable el estilo que aplicamos al estado ":hover" de cada imagen, en este, utilizamos "-webkit-transform" para cambiar la rotación y poner la imagen completamente horizontal:

ul.thumb li:hover{
   font-size: 1.3em;
   z-index: 10;
   width: 480px;
   height: 322px;
   margin-top: -151px;
   margin-left: -240px;
   -moz-box-shadow:8px 8px 24px #111;
   -webkit-box-shadow:8px 8px 24px #111;
   box-shadow:8px 8px 24px #111;
   -moz-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}

La galería de fotos podeis visualizarla aquí y es únicamente funcional desde FireFox 3.5 (no veremos efecto de ampliación alguno) y desde navegadores utilizando últimas versiones de WebKit, como por ejemplo Safari y Google Chrome (en estos, el efecto de ampliación funciona gracias a -webkit-transition).

La razón por la que no funcionará en Internet Explorer (cualquier versión), es que este, ni en su última versión cumple con el estandar CSS 3, por ejemplo, el selector :nth-child(N) no es reconocido por IE.

Aumenta la longitud de búsqueda. Sobre todo en Google.

Imaginanet S.L. — Wed, 2 Dec 2009 12:18:42 +0100

>En el blog que Alan Long tiene en Hitwise, han sacado un nuevo estudio sobre la longitud de las búsquedas en los distintos buscadores web.

En el informe se ve cómo la longitud de las frases de búsqueda está aumentando paulatinamente, y sobre todo, donde más está aumentando es en Google. Esto último nos lleva a pensar si realmente esto está asociado a la cada vez menor calidad de los resultados que obtenemos al realizar búsquedas con el buscador.
Y es que la larga cola está comenzando a entrar en la mente de los usuarios, que pasan de querer algo poco definido a realizar consultas cada vez más elaboradas para llegar a la información que realmente quieren conseguir.

El informe, además de otros detalles, nos revela que la longitud de las consultas ha aumentado poco a poco con el paso del tiempo, y conforme aumenta el número de personas que se erigen como profetas del posicionamiento en buscadores, y únicamente buscan un posicionamiento, pero que para nada creo que se pueda llamar orgánico, sino posicionamiento que únicamente genere tráfico. No importa si el tráfico generado es de buena, mediana o mala calidad.

En mi opinión, la longitud de búsqueda aumenta por una simple razón, los resultados tienen mucho posicionamiento, aunque el posicionamiento lo único que busque sea el click y no el cliente de calidad, esto, hace que los resultados iniciales tengan cada vez menos relevancia, y el usuario cada vez tenga que aumentar el número de palabras de búsqueda para hacerla más específica para lo que está buscando.

Tengo que decir además, que es curioso ver cómo la calidad del tráfico generado por otros buscadores como puede ser Yahoo, es mucho mejor, y los usuarios captados a través de estos, tienen un perfil de usuario que se ajusta muchísimo mejor al perfil deseado.

Para terminar, os incluyo una tabla resumen de las longitudes de búsqueda:

El siguiente gráfico muestra la longitud media de búsqueda, para todos los buscadores en general:

Mientras que en la siguiente, se muestra para los buscadores más importantes. En él se puede apreciar cómo dependiendo del buscador, hay bastante diferencia en longitudes de cadena de búsqueda:

Haciendo páginas web atractivas y usables.

Imaginanet S.L. — Tue, 24 Nov 2009 10:05:37 +0100

El presente artículo ha sido traducido del publicado en http://www.lazycat.org/postcards/

Diseños abiertos y elegantes, menores costes de ancho de banda y un mantenimiento mucho más fácil.

¿Os gusta la idea? Leed este artículo para conocer pequeños trucos que puedes aplicar al código, diseño y contenidos de tus páginas web, y si alguno de los sitios web que visitas normalmente no da la talla, ¿porqué no comentarles que pueden hacer un cambio limpio, rápido y con muchas ventajas sobre lo que tiene?

Muchas páginas web incluyen enlaces a artículos relacionados y más información. Envíales URLs que creas les puedan ayudar y pienses que son útiles.

Hojas de estilo alternativas

Son distintos puntos de vista. Añadir la posibilidad de visualizar una página web en formato impreso, o por ejemplo, en terminales de mano (pocket pc, palm os, ...), hacen que un sitio web sea visible por una mayor audiencia y así, aumente la satisfacción del cliente. De esta forma, los usuarios no tienen porque buscar una versión para imprimir (si existe claro) ya que las hojas de estilo para imprimir se cargan de forma automática en cualquier navegador web.
Si está vendiendose algo, una disposición dedicada a la impresión, ahorra el esfuerzo y coste de crear y mantener archivos PDF independientes. Las hojas de estilo para medio impreso, pueden incluir reglas que impriman las urls junto con los enlaces, expandan los acrónimos y muestren la información de copyright.
Existen hojas de estilo para TV, proyectores, lectores de texto, ...

Fondos

Una imagen de fondo puede ser la diferencia entre una página web que atraiga todas las miradas y una página web que genere dolores de tripa. La elección de imagenes que puedan estirarse con el fondo, es esencial, así como el uso de colores apropiados y el hecho de asegurarse de que ls imágenes de fondo permanecen en el fondo.
Si tienes dudas, quítala: un diseño simple y limpio, a veces funciona mejor que un diseño complejo y visualmente rico en grafismos. A veces, una página web diseñada de forma pobre da peor imagen que no tener página web.
Hay que recordad que cualquier elemento puede tener una imagen de fondo o color de fondo si usa CSS, aprovechar esta ventaja permite la construcción de webs ricas en grafismo.

Elección de los colores

Con los colores, como con muchas otras cosas, cuanto menos, a veces es mejor. Lo ideal es elegir entre tres y cinco colores para un diseño o para una sección del sitio web si se desea que estas sean distintas.
Hay que ser cuidadoso con las connotaciones de los colores y amoldarlos a la audiencia que se espera atraer. Por ejemplo los visitantes del este pueden estar buscando colores vivos como rojos y amarillos para estar cómodos, por otro lado, los visitantes de occidente los pueden encontrar demasiado chillones para sus ojos e incluso ofencivos. Por ejemplo, Ladbrokes, amolda su esquema de colores a la procedencia de sus visitantes; si quieres una página web global, esta es posible.

Tablas

Si todavia alguien está diseñando páginas web con tablas HTML, ¿cuantos años llevas perdido por el mundo? ¿dónde has estado? La comida ya se ha terminado y también te has perdido los postres, esto hace que no conozcas lo fácil y cómodo que puede ser hacer páginas web con CSS (hojas de estilo). Cuando alguien quiere atornillar un tornillo, que usa, ¿un martillo o un destornillador? Por la misma razón, porqué usar tablas HTML para maquetar páginas web.
Es aconsejable diseñar de acuerdo con las especificaciones web estandares del momento, y además, conseguiras mayor control de la maqueta si la haces usando hojas de estilo. Las páginas web modernas estan basadas en los estandards web, cargan mucho más rápido, se ven más bonitas y te harán ahorrar dinero. Si tu jefe se entera de que no has estado cenando, ve pensando la explicación que vas a darle.

19 consejos para construir páginas web

Imaginanet S.L. — Mon, 23 Nov 2009 20:25:48 +0100

>Esto significa, que no pretendas re-inventar la navegación por los sitios web. Pon las cosas a la izquierda, arriba, abajo, donde quieras, pero no reinventes la forma en que la gente interactua con entornos o interfaces digitales si lo que quieres es vender tu marca, tus productos o tus servicios. No confundas al usuario, puede sentirse mal y abandonar la web.

Introducción

Este artículo se ha extraido del original (click aquí) titulado 19 Things NOT To Do When Building a Website. El artículo es muy didáctico y creemos que expone cada uno de los casos con criterio y desde el punto de vista de la usabilidad.
El autor ha recopilado una pequeña lista de reglas básicas y fundamentales que todo webmaster debe tener en cuenta a la hora de desarrollas un sitio web que pretenda llegar a su público con un mínimo de éxito. Esta lista también pueden usarla las empresas que esten pensando en la creación o re-estructuración de su sitio web.

No redimensionar la ventana del navegador

No cambiar el tamaño de la ventana del navegador del usuario. Todos sabemos que se puede modificar el tamaño de la ventana del usuario, y sabemos lo bien que uno se siente cuando tras poner un pequeño trozo de código Javascript ocurre un milagro que redimensiona la ventana al tamaño que queremos, pero NO. Esta mala técnica web se ve en la mayoría de casos con sitios web denominados spam o cuando un diseñador gráfico no acostumbrado al entorno web, diseña un sitio web, es decir, alguien del sector de la fotografía, video o artístico que también hace sitios web (ver consejo número 6 para conocer más cosas sobre estos), pero a decir verdad no tiene idea alguna de cómo crear un web exitoso y usable.

Si quieres cargar una home, y a continuación tu web en un pop-up, para nada te lo recomendamos.

Si tu web necesita que el visitante carge una página de inicio y entonces acceda a la verdadera página web en un pop up (ventana emergente), estas mareando al usuario, le das la bienvenida pero no es así, le vuelves a dar la bienvenida. Si tu web no carga de forma inmediata con un inicio que aporte valor al visitante, es muy dificil que espere a que termine tu show de inicio (no le preocupa lo bonita y espectacular que es la página de introducción). Esta técnica se ve con la mayoría de desarrolladores web con Flash, los cuales, por alguna razón piensan que todos los sitios web en flash tienen que abrirse en una ventana emergente (estan dando por hecho que burlan los programas que bloquean ventanas emergentes) y tienen 30 segundos de carga de una introducción como www.2advanced.net

Si preguntas que versión quieres: versión flash, html, alta resolución, baja resolución. También pierdes oportunidad.

Es como si le preguntases a alguien que quiere entrar en tu tienda, si quiere pasar a la tienda mala o a la buena (pero claro, hay que tener en cuenta que para entrar en la tienda buena hacen falta unas gafas especiales y una pequeña espera de 30 segundos... MMM, NO gracias), lo que les estas preguntando es: "¿Quieres irte y comprar en mi competencia? porque te estoy poniendo una muralla que tienes que saltar antes de que conozcas los productos o servicios que te ofrezco.

Si tienes una web, toda en flash, hazla de nuevo.

Si tu web está toda en Flash, echa a tu diseñador web y si la hiciste tú, añádela a tu curriculum bajo la sección de "Proyectos sin utilidad que he realizado" y empieza de nuevo a hacer la web.
Flash es una herramienta, una herramienta con muchísimas posibilidades como animaciones, vídeo, carritos de la compra, interfaces, etc, la lista es muy grande pero las cosas en su medida. Esto no quiere decir que tengas que hacer un sitio web todo en Flash y si lo haces tendrás una gran desventaja con tu competencia. Fíjate en una cosa, hasta el propietario de Flash, Macromedia/Adobe no tiene su web toda en Flash, ¿sabes porqué? Quieren hacer negocio y no hacen caso a los diseñadores.

NO intentes REinventar la navegación por páginas web

Situa los elementos gráficos en la zona de tu página web que quieras, ponlos arriba, a la izquierda, también en la parte derecha puedes colocar elementos, pero sobre todo, no inventes la lógica de navegación, esto es, la manera en que las personas interactuan con interfaces digitales, a la misma vez que estás intentando vender un producto o servicios. El usuario se confundirá, se enfadará, y se irá.

Este trabajo me va a dar bastantes dolores de cabeza

Si eres un diseñador gráfico, y "de paso ofreces páginas web", estas dando consejos sobre diseño web, a tus clientes de trabajos gráficos impresos, se cauto con este tema. El diseño gráfico para impresión se parece al diseño web lo mismo que un anuncio de un coche de carreras a conducir y construir ese coche de carreras. No cometamos errores, el diseño gráfico es fantástico por si mismo, sabes hacer gráficas perfectas y perfectos slogans para impresión. Un usuario no puede comprarte el producto con un anuncio impreso (por el momento), no pueden comunicarse con tu negocio a través de un anuncio impreso. Dedícate al diseño gráfico y no metas tus narices en un medio que no conoces ni entiendes (lo mismo les digo a esos "técnicos" que haces websites "aprovechando la situación")

Si una página de inicio no tiene contenido o cualquier texto Real (no incluido en una imagen) y esto mismo es extensible a todo el sitio web. Contrata a una persona que dote de contenido a la página web y despide a tu webmaster.

El contenido es el rey. Los buscadores no indexan gráficos o animaciones flash deslumbrantes, sólo indexan texto. Contrata una persona que de contenidos relevantes y vinculados con tu negocio (es básico para tener un buen ranking y poder vender / ofrecer tus productos o servicios a través de una página web)

Si tu página web no funciona con Firefox, da la bienvenida a la metedura de pata más común de 2007.

Realmente, Firefox sólo genera entre el 10-15% de la cuota de mercado de los navegadores de usuario, pero en el caso de algunos sitios web, esta cuota es mucho más alta, por ejemplo, oomny.com tiene más del 80% de sus usuarios con Firefox. Además, si quien hizo tu página web, no la hizo compatible y funcional con Firefox, obviamente no tienen idea de lo que están haciendo y se están saliendo del juego. No hay razón por la que se necesite un sitio web sólo compatible y totalmente dependiente de Internet Explorer para que no funcione en Firefox, y francamente, no hay razón alguna para ello. Que un webmaster no conozca Firefox, quiere decir que no está en la cultura de Internet y esto puede hacer que tu imagen y la de tu negocio en Internet se vean afectados.

Este punto es una colección de pequeñas cosas que han hecho desaparecer a otros sitios web.

Son principios básicos pero repetidos, como no mostrar texto parpadeante, no usar Frontpage, no utilizar pop-ups o ventanas emergentes, no hacer texto con scroll, obligar a la descarga de fuentes o tipografías especiales, utilizar introducciones Flash, ...

Si utilizas música en tu página web cerciorarte de que el usuario pueda detenerla,

y es MEJOR NO cargarla con la página web sin que la solicite el usuario. Esto mismo, es aplicable al vídeo con audio, muchos usuarios de páginas web navegan desde su trabajo y no les hace mucha gracia que sus altavoces empiecen a sonar con tu espantosa música de forma totalmente intrusiva en su ordenador, y más si su jefe está pendiente y con ganas de darle a alguien una patada en el trasero.

Activado automático de componentes en IE (Actualización de los cambios en componentes ActiveX de IE)

Imaginanet S.L. — Thu, 29 Oct 2009 13:28:38 +0100

>Si miramos a abril de 2006, hicimos un cambio en la forma en que Internet Explorer manejaba los controles incrustados (embed) en bastantes páginas web. Algunos sitios web obligaban a los usuarios a "pulsar para activar" antes de que pudieran interactuar con el control. A dia de hoy, Microsoft ha obtenido la licencia de Eolas, eliminando con esta el requisito de Internet Explorer de "pulsa para activar". Por esto, vamos a quitar el comportamiento "pulsar para activar el control" que ahora tiene IE.

Es importante tener en cuenta que este cambio no necesitará que se modifiquen las páginas web existentes hoy en día , ni acciones nuevas a tomar por parte de quienes crean y desarrollan páginas web. Simplemente estamos retrocediendo al comportamiento anterior. Una vez se actualice Internet Explorer, todas las páginas que ahora necesitan del "pulsar para activar" dejarán de necesitarlo para que el control se active. Simplemente funcionará.

Lo más normal es que actualmente te preguntes para cuando está previsto lanzar esta actualización.

La primera versión en pruebas, saldrá con una actualización opcional llamada Activación de Componentes Automática para Internet Explorer (Internet Explorer Automatic Component Activation Preview), y estará disponible en Diciembre de 2007 en el Centro de Descargas de Microsoft. Además, este cambio formará parte de las próximas versiónes pre-release de Windows Vista SP1 y Windows XP SP3. Después de haber dado tiempo a que los usuarios se preparen para este cambio, haremos que este comportamiento forme parte de la "Cumulative Update" de Internet Explorer en Abril de 2008, así, todos los clientes que instalen esta actualización, aplicarán este cambio a su IE.

Si tienes una aplicación a medida usando WebOC o MSHTML, habrá algunos cambios que afectarán tu aplicación. Por ejemplo:
- Si la aplicación usa el flag DOCHOSTUI para el "pulsar para activar", ese comportamiento se respetará y tu aplicación seguirá necesitando del "pulsar para activar".
- Si la aplicación usa la clave del registro FEATURE_ENABLE_ACTIVEX_INACTIVE_MODE para optar por el "pulsar para activar", esta clave de registro no será mantenida. Si quieres seguir utilizando el "pulsar para activar", por favor, utilliza el flag DOCHOSTUI.

En las próximas semanas actualizaremos en artículo en MSDN con las descripciones del nuevo comportamiento. Estate atento en este enlace para saber cuando sale la preview.

Haciendo funcionar a las hojas de estilos alternativas

Imaginanet S.L. — Tue, 20 Oct 2009 12:35:41 +0100

>Autor Original: Paul Sowden
URL ORIGINAL: http://www.alistapart.com/stories/alternate/
TÍTULO ORIGINAL: A List Apart: CSS: Making Alternate Style Sheets Work
Traducción al castellano: http://kusor.net/traducciones/ala.es/alternate/

Así, TIENES UN DOCUMENTO XHTML. Has sido un diseñador web bueno y utilizado hojas de estilos para controlar el aspecto de tu documento. Incluso has ido mucho más allá y has creado varias hojas de estilo alternativas para demostrar lo duro que eres.

Estupendo. Pero ahora necesitas un modo cross–browser de elegir dinámicamente entre las distintas hojas de estilos.

Dándole estilo a tu sitio

Las hojas de estilos pueden ser asociadas con los documentos usando una lista de elementos link en la cabecera del documento. Hay tres tipos de relación distintos que pueden tener las hojas de estilos externas con el documento: persistentes, preferridas, y alternativas.

Persistentes

Estas hojas de estilos están habilitadas siempre (siempre están “encendidas”) y son combinadas con la hoja de estilos activa. Pueden utilizarse para compartir reglas comunes a todas las hojas de estilos. Para hacer una hoja de estilos persistente, el atributo rel es fijado a “stylesheet” y no se fija ningún atributo title.

Para hacer persistente la hoja de estilos paul.css, el siguente elemento link debería ser incluido en la cabecera del documento:

Preferidas

Estas hojas de estilo están habilitadas por defecto (están “encendidas” cuando se ha cargado la página). Pueden ser deshabilitadas entonces, si el usuario eleige una hoja de estilos alternativa.

Para hacer una hoja de estilos preferida, el atributo rel se fija a “stylesheet” y a la hoja de estilos se le asigna un nombre con el atributo title.

Varias hojas de estilo preferidas pueden ser agrupadas dándoles atributos title idénticos. Estas hojas de estilos agrupadas serán entonces habilitadas y deshabilitadas juntas. Si se declara más de un grupo de hojas de estilo preferidas, el primero que se declare tendrá preferencia.

Para hacer preferida a paul.css, es añadido un atributo title, dándole al estilo por defecto un nombre.

Alternativas

Estas hojas de estilo pueden ser seleccionadas por el visitante como alternativas a la hoja de estilos preferida. Esto permite al visitante personalizar un sitio y elegir su disposición favorita. También pueden ser utilizadas para accesibilidad (por ejemplo, ALA tiene la hoja de estilos “friendly fonts” que proporciona fuentes mayores).

Para especificar una hoja de estilos alternativa, el atributo rel se fija a “alternate stylesheet” y la hoja de estilos se nombra con un atributo title. Como pasa con las hojas de etilo preferidas, estas hojas de estilos pueden ser agrupadas juntas también dándoles atributos title idénticos.

Usando de nuevo el ejemplo previo; para convertir paul.css en una hoja de estilos alternativa, la palabra “alternate” es añadida al atributo rel.
Notar que estas relaciones sólo se aplican a hojas de estilo externas que hayan sido incluidas usando el elemento link.

Intercambiando estilos

Cuando un documento es cargado inicialmente, las hojas de estilo persistentes y preferidas son aplicadas al documento. Las hojas de estilo alternativas pueden ser seleccionadas por el usuario. El W3C nos dice que el navegador debería proporcionarnos un medio de elegir la hoja de estilos que queremos utilizar, y sugiere que quizá un menú sesplegable o un abarra de herramientas debería ser proporcionada.

Hasta aquí, muy bien. Tenemos varias hojas de estilos y el visitante puede elegir sus favoritas desde un menú. Pero entonces nos encontramos con un prolema. Uno importante. Mozilla proporciona un menú para seleccionar las hojas de estilos que queremos usar bajo un item del menú ver. Pero Microsoft Internet Explorer (MSIE) no proporciona ningún menú. Por lo que tenemos varias hojas de estilos, y ningún modo de acceder a ellas en MSIE.

Aquí es donde un poco de JavaScript puede ser utilizado junto con el DOM para proporcionar un modo mediante el cuál los usuarios de MSIE y Mozilla puedan seleccionar la hoja de estilos que quieran utilizar. Sus preferencias pueden guardarse también en una cookie. Y como estamos utilizando las etiquetas link tal como nos dice el W3C, JavaScript no va a interferir con el menú en Mozilla, y va a degradar grácilmente.

El Script

Primero necesitamos que el script sea capaz de diferenciar entre tres tipos diferentes de hojas de estilo. Esto es relativamente fácil de hacer, dado que sólo necesitamos comprobar dos de los atributos de cada elemento link.

¿Hay algún enlace a un elemento link?

HTMLLinkElement.getAttribute("rel").indexOf("style") != -1

¿Hay un atributo title?

HTMLListElement.getAttribute("title")

¿Contiene el atributo rel la palabra clave "alternate"?

HTMLLinkElement.getAttribute("rel").indexOf("alt") != -1

Notar que estamos buscando la cadena “alt” porque algunos navegadores aceptan la palabra reservada “alternative” en lugar de “alternate.”

Usando estos tres tipos de chequeo podemos escribir una función para elegir las hojas de estilos. Esto implica buscar todos los elemoentos link en el documento, deshabilitando todas las hojas de estilo preferidas y alternativas que no queremos que estén activas, y habilitando todas las hojas de estilo preferidas y alternativas que queremos que estén activas.

Notar que sólamente los elementos link de hojas de estilo alternativas y preferidas tendrán un atributo title.

La función de cambio tiene el aspecto siguiente:

function setActiveStyleSheet(title) { 
 var i, a, main; 
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { 
     a.disabled = true; 
     if(a.getAttribute("title") == title) a.disabled = false; 
    } 
  } 
}

Cookies

Ahora podemos cambiar las hojas de estilo. Estupendo. Tenemos una página más personalizada. Excelente. Pero no tenemos un sitio personalizado. Las preferencias se aplican sólo a la página actual; cuando la dejemos las preferencias se irán con ella. De cualquier modo, esta situaciónpuede ser rectificada con una cookie.

Para guardar una cookie necesitamos otra función que devuelva la hoja de estilo actual. También necesitamos dos funciones que guarden y lean la cookie.

Para devolver la hoja de estilo actual buscaremos una hoja de estilo preferida o alternativa que esté activa y miraremos su atributo title.

Primero buscaremos de nuevo a través de todos los elementos link en el documento. Entoncdes comprobaremos que el link es una hoja de estilo. Si es así, comprobaremos que la hoja de estilo tiene un atributo title. Esto nos dirá que la hoja de estilo es bien preferida, bien alternativa.

La última comprobación es ver si la hoja de estilo está activa o no. Si las tres búsquedas devuelven verdadero, tendremos la hoja de estilo actual y podremos devolver su atributo title.

La función terminada tiene este aspecto:

function getActiveStyleSheet() { 
 var i, a; 
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) 
    return a.getAttribute("title"); 
   } 
 return null; 
}

Como este es un artículo sobre estilos, y las cookies son un tópico completamente diferente, no voy a explicar las funciones de las cookies aquí, pero si voy a incluirlas para tu conveniencia (estas funciones fueron escritas por el autor de ALA Peter-Paul Koch).

function createCookie(name,value,days) { 
   if (days) { 
    var date = new Date(); 
    date.setTime(date.getTime()+(days*24*60*60*1000)); 
    var expires = "; expires="+date.toGMTString(); 
   } 
   else expires = ""; 
 document.cookie = name+"="+value+expires+"; path=/"; 
} 
 
function readCookie(name) { 
 var nameEQ = name + "="; 
 var ca = document.cookie.split(';'); 
    for(var i=0;i < ca.length;i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') c = c.substring(1,c.length); 
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
    } 
 return null; 
}

Para usar estas funciones de cookies, necesitamos agregar onload y onunload event listeners a la ventana.

onLoad

Hay un atributo especificado por el w3c DOM Level 2, “disabled,” que se fija a false cuando una hoja de estilos se aplica al documento. Este atributo es implementado correctamente en Mozilla, pero desafortunadamente no lo es en MSIE.

MSIE tiene un atributo HTML propietario, también llamado “disabled”, que se aplica a los elementos link. Este atribute es fijado inicialmente a false para todos los elementos link.

Para fijar el atributo disabled de MSIE tal como el atributo disabled del DOM Level 2, podemos llamar a la función setActiveStyleSheet() con el nombre de la hoja de estilo preferida.

Para encontrar qué hoja de estilo es la preferida, necesitamos otra función. Dado que esta función es bastante similar a la función getActiveStyleSheet() no voy a explicar como funciona, pero aquí está su aspecto:

function getPreferredStyleSheet() { 
 var i, a; 
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
     if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title")) 
     return a.getAttribute("title"); 
    } 
 return null; 
}

en la función onload, primero fijamos una variable title. Ésta guardará el valor de la hoja de estilos previa que está almacenada en la cookie, o si no hay ninguna, el título de nuestra hoja de estilos preferida. Para hacer las cosas lógicas, vamos a llamar a la cookie “style.”

Lo siguiente será llamar a la función setActiveStyleSheet() pasándole la variable title como title. Nuestra función onload será algo parecido a esto:

window.onload = function(e) { 
   var cookie = readCookie("style"); 
   var title = cookie ? cookie : getPreferredStyleSheet(); 
   setActiveStyleSheet(title); 
}

Notar que es muy deseable llamar a esta función antes del evento onload, haciendo al documento que “pinte” con nuestro estilo preferido.

Si eleiges hacer esto, asegúrate que dicha función es llamada después de haber definido las otras funciones y que los elementos link han sido definidos.

onUnload

Guardar la cookie en el evento onunload es simple. Todo lo que tenemos que hacer es usar la función getActiveStyleSheet() para que nos devuelva la hoja de estilos activa, y guardarla en una cookie. Usando la función para guardar una cookie tendríamos finalmente algo como esto:

window.onunload = function(e) { 
   var title = getActiveStyleSheet(); 
   createCookie("style", title, 365); 
}

Juntándolo todo

Para usar estas funciones para hacer tu sitio web más sexy, necesitas incluirlas en tu documento. Para hacerlo más fácil, las he puesto todas juntas en un fichero javascript, preparado para que lo descargues y lo añadas a tu sitio.
» Descargar styleswitcher.js

Para incluir el fichero javascript, necesitas añadir un elemento script a la cabecera de tu documento, asegurándote de que está puesto después de todos los elementos link pertenecientes a hojas de estilo que tengas. El código HTML debería tener este aspecto:

Para permitir al visitante cambiar la hoja de estilos activa, podrías usar los eventos onClick de javascript. Por ejemplo, para tener la opción de elegir entre dos temas con los títulos “default” y “paul,” podrías usar el siguiente HTML:

change style to default 
change style to paul

Una vez que el visitante ha seleccionado un tema, éste será almacenado en una cookie. Para usar el mismo tema en todo tu sitio web, los mismos elementos link javascript link deberían ser incluidos en la cabecera de cada página del sitio.
¡Eso es todo Gente!

Ahí lo tienes, un sitio web personalizable que utiliza elementos link para enlazar hojas de estilo como el W3C nos ha dicho que deberíamos hacer. ¡Disfrútalo!

::: Paul Sowden tiene 17 años (Londres, Inglaterra), y cree que la web sería un lugar mejor si todos usásemos tecnicas de diseño que cumpliesen con los estándares.

Arreglando tu página web con el DOCTYPE correcto

Imaginanet S.L. — Mon, 23 Nov 2009 19:49:19 +0100

>Autor Original: Jeffrey Zeldman
URL ORIGINAL: http://www.alistapart.com/articles/doctype/
TÍTULO ORIGINAL: A List Apart: Fixing Your Site With the Right DOCTYPE

LO HAS HECHO TODO BIEN, pero tu sitio web no tiene el aspecto deseado o funciona como debería hacerlo en los últimos navegadores.

Has escrito XHTML y CSS válidos. Has utilizado el Modelo de Objetos del Documento (DOM) estándar del W3C para manipular dinámicamente los elementos de la página. A pesar de todo, en navegadores diseñados para soportar todos estos estándares, tu sitio está fallando. Un DOCTYPE - tipo de documento - defectuoso tiene la culpa de ello.

Este pequeño artículo te proporcionará DOCTYPEs que funcionen, y explicará el efecto práctico, en el mundo real de estas etiquetas aparentemente abstractas.

¿PORQUÉ UN DOCTYPE?

Para los estándares HTML y XHTML, un DOCTYPE (abreviatura de “declaración de tipo de documento”) informa al validador de la versión de (X)HTML que estás utilizando, y debería aparecer al principio de cada página web. Los DOCTYPEs son un componente clave de las páginas veb de conformidad: tu marcado y tus CSS no validarán sin ellos.

Como fué mencionado en artículos previos de ALA (y en otros lugares interesantes), los DOCTYPES también son esenciales para la apropiada renderización y funcionamiento de los documentos web en navegadores de conformidad como Mozilla, IE5/Mac, y IE6/Win.

Un DOCTYPE reciente, que incluye una URI completa(una dirección web completa) les dice a estos navegadores que rendericen tu página en modo conforme con los estándares, tratando tus (X)HTML, CSS, y DOM como esperas que deben ser tratados.

Usando un DOCTYPE incompleto u obsoleto—o ningún DOCTYPE—colocará a los mismos navegadores en modo “Caprichoso”, bajo el que el navegador asume que has escrito a la vieja usanza, marcado inválido y código para las deprimentes normas de la industria de finales de los 1990.

Con esta configuración, el navegador va a intentar parsear tu página en modo compatible hacia atrás, renderizando tus CSS como deberían haber sido vistas en IE4, y revirtiendo a un DOM propietario, específico de los navegadores. (IE revierte al DOM IE; Mozilla y Netscape 6 revierten a vaya usted a saber.)

Claramente, esto no es lo que querías. Pero es frecuentemente lo que tienes, dada la preponderancia de información incompleta o incorrecta sobre el DOCTYPE que este artículo espera corregir.

(Nota: El navegador Opera no se rije por estas reglas; siempre trata de renderizar las páginas en modo conforme con los estándares. ¡Vamos, Opera! En el otro lado, Opera todavía no ofrece un soporte sólido para el DOM del W3C. Pero están trabajando en ello.)

¿DÓNDE HAN IDO A PARAR TODOS LOS DOCTYPES?

Partiendo de que los DOCTYPES son vitales para el apropiado funcionamiento de los estándares de la web en los navegadores, y dado que el W3C es el principal creador de los estándares de la web, podrías esperar que el sitio web del W3C proporcionase un listado de DOCTYPEs apropiados, y podrías esperar también ser capaza de encontrar esta información rápida y fácilmente en una localización única. Pero como que esto está escrito, que no puedes.

W3.org no es A List Apart, WebReference, o Webmonkey. Su intención no es ayudar a los diseñadores web, desarrolladores, y gente que trabaja con contenidos similares a avanzar más rápido en las últimas prácticas y recomendaciones tecnológicas. Ese no es su trabajo.

W3C publica una serie de tutoriales, que la mayoría de diseñadores web ignoran. Sin embargo, el sitio web del W3C aloja principalmente una colección de propuestas, borradores, y Recomendaciones, escritas por especialistas para especialistas. Y cuando digo especialistas, no quiero decir profesionales web ordinarios, como tú y como yo. Quiero decir especialistas que hacen que el resto de nosotros la Abuela el primer día que Ella Tuvo un Mail.™

Puedes buscar DOCTYPEs todo el día en w3.org sin encontrar una página que ofrezca un listado completo de todos ellos. Y cuando consigues cazar un DOCTYPE (generalmente en relación con una Recomendación o Borrador de Trabajo), frecuentemente se trata de uno que no funciona en tu sitio web.

Dispersos por el sitio web del W3C hay DOCTYPEs con URIs perdidas, y DOCTYPEs con URIs relativas que apuntan a documentos en el propio sitio web del W3C. Una vez que son desplazados del sitio del W3C y utilizados en tus propias páginas web, dichas URIs apuntan a documentos no existentes, haciendo por tanto que sean en vano tus mayores esfuerzos y que fallen los navegadores.

Por ejemplo, mucho sitios muestran estos DOCTYPEs, copiados y pegados directamente de w3.org:

Si te fijas en la última parte del DOCTYPE (“DTD/xhtml1-strict.dtd”), podrás ver que es un link relativo a un documento en el sitio del W3C. Partiendo de que este documento está en el sitio web del W3C pero no en el tuyo, la URI carece de utilidad para el navegador.

El DOCTYPE que te gustaría utilizar es:
Debes observar que este último DOCTYPE incluye una URI completa al final de la etiqueta. Y como la etiqueta proporciona una localización válida en la web, el navegador sabe dónde encontrarla, y renderizará tu documento en modo conforme con los estándares.

DOCTYPES QUE FUNCIONAN

Entonces, ¿qué DOCTYPEs deberíamos utilizar? Me alegro de que lo preguntes. Los siguientes DOCTYPEs completos son los únicos que necesitamos:

HTML 4.01 Strict, Transitional, Frameset

XHTML 1.0 Strict, Transitional, Frameset

XHTML 1.1 DTD

SIGUIENTES PASOS

¿Cómo puedes colaborar a la mejora del soporte de los estándares en la web? Además de agregar a favoriots esta página (y copiar y pegar estos DOCTYPEs para tu propio uso), si tu editor web inserta DOCTYPEs, deberías echarles un vistazo y compararlos con los listados arriba.

Demasiados fabricantes de software bien-intencionados han copiado y pegado DOCTYPEs incompletos del W3C en su software. Resultado: cuando usas la funcionalidad de estos programas de insertar DOCTYPEs en tus páginas, los navegadores se ponen en modo Caprichoso, deshaciendo todo tu laborioso trabajo.

Merece la pena contactar con la gente que hace tu paquete de autor favorito, mostrándoles los DOCTYPEs apropiados, y sugerirles cortésmente que tengan en cuenta este aspecto en la siguiente actualización. (En algunos casos, también serás capaz de modificar tu editor por tí mismo.)

Tenemos todas las razones para creer que el sitio del W3C lanzará pronto una lista de DOCTYPES acertados, utilizables, y otra información esencial en una localización fácil de encontrar. De hecho, Karl Dubost, Conformance Manager del equipo del W3C Quality Assurance, contribuyó a la información de este pequeño artículo.

Del mismo modo, el relanzamiento de The Web Standards Project proporciona en sus páginas esta información.

Blog de Imaginanet S.L. Programacion web y marketing online.

Cómo utilizar PayPal para realizar compras en tu web

Ejemplo de pago con el API de PayPal

Usando AJAX: Un simple ejemplo con PHP y jQuery.

Crear plugins de jquery

Display inline-block e internet explorer.

Hacks para conseguir "display: inline-block" en internet explorer 6 y 7

HTML 5 y el famoso tag "video"

Menú desplegable con CSS

Hacks para Internet explorer 6 y 7:

Creando un buscador para tu página usando Yahoo! Query Language

Como usar Google Apps en tu web

1.Regístrate y accede a tu cuenta

2.Verifica la propiedad del dominio

3.Personaliza Google Apps

4.Crea cuentas de usuario

5.Migrar datos y activa el correo electrónico

6.Implanta Google Apps

¿Cómo ver el correo de nuestra cuenta?

¿Cómo ver el google calendar?

Usando el API de Google Analytics para mejorar nuestra web

¿Cómo usar el API?

¿Tiene buen contenido o diseño mi web?

¿Son buenas las palabras clave que utilizo para cada página?

¿Cuál es el comportamiento de los visitantes de mi web?

Conclusiones

La vida más fácil con Google Mail (Gmail y Google Apps for your domain)

Texto a voz usando el elemento Audio de HTML5

jQuery ColorPicker. Tres plugins que merece la pena tener en cuenta.

Rendimiento de las URIs con datos

Google: más búsquedas en tiempo real.

Google Goggles. Usa imágenes para buscar en la web.

Búsquedas personalizadas para todos los usuarios.

HighCharts. Un API de gráficos bastante buena.

Google Analytics desbloquea la carga de webs lanzando el modo asíncrono (Async Mode)

Galería de fotos polaroid, sólo usando CSS 3

Lo más buscado durante 2009

Aumenta la longitud de búsqueda. Sobre todo en Google.

Haciendo páginas web atractivas y usables.

Hojas de estilo alternativas

Fondos

Elección de los colores

Tablas

19 consejos para construir páginas web

Introducción

No redimensionar la ventana del navegador

Si quieres cargar una home, y a continuación tu web en un pop-up, para nada te lo recomendamos.

Si preguntas que versión quieres: versión flash, html, alta resolución, baja resolución. También pierdes oportunidad.

Si tienes una web, toda en flash, hazla de nuevo.

NO intentes REinventar la navegación por páginas web

Este trabajo me va a dar bastantes dolores de cabeza

Si una página de inicio no tiene contenido o cualquier texto Real (no incluido en una imagen) y esto mismo es extensible a todo el sitio web. Contrata a una persona que dote de contenido a la página web y despide a tu webmaster.

Si tu página web no funciona con Firefox, da la bienvenida a la metedura de pata más común de 2007.

Este punto es una colección de pequeñas cosas que han hecho desaparecer a otros sitios web.

Si utilizas música en tu página web cerciorarte de que el usuario pueda detenerla,

Activado automático de componentes en IE (Actualización de los cambios en componentes ActiveX de IE)

Haciendo funcionar a las hojas de estilos alternativas

Dándole estilo a tu sitio

Persistentes

Preferidas

Alternativas

Intercambiando estilos

El Script

Cookies

onLoad

onUnload

Juntándolo todo

Arreglando tu página web con el DOCTYPE correcto

¿PORQUÉ UN DOCTYPE?

¿DÓNDE HAN IDO A PARAR TODOS LOS DOCTYPES?

DOCTYPES QUE FUNCIONAN

HTML 4.01 Strict, Transitional, Frameset

XHTML 1.0 Strict, Transitional, Frameset

XHTML 1.1 DTD

SIGUIENTES PASOS