Gogle Chrome está en su mejor momento, habiendo alcanzado una cuota de mercado record del 7,5% durante el mes de agosto.

Por otra parte Google ya trabaja en nuevas funcionalidades para 'tablets' y 'netbooks'.

Entre las últimas revisiones de Chrome, hay dos nuevas actualizaciones: control de orientación y comandos de voz.

En la misma semana, estas dos empresas de internet han hecho pública su política publicitaria online.

Google en su blog hace público por primera vez, las comisiones que reciben los dueños de websites con AdSense. El 68% de los ingresos generados se entregan a los propietarios de websites.

Twitter por otra parte ha anunciado que controlará más la publicidad e impedirá que terceros vendan tweets publicitarios gestionados por Twitter, según anuncian "no permitirán inyectar mensajes remunerados en flujos de mensajes de su red social". Toman esta medida por el engorro que puede suponer el aumento descontrolado de publicidad mal gestionada. 

Según un estudio de Internet World Stats, España es el sexto usuario de internet en Europa y el décimo cuarto puesto a nivel mundial. Las comunidades donde más usuarios existen son Madrid, Cataluña y País Vasco, mientras que Murcia y Extremadura son las que menos usuarios tienen.

El índice de penetración de internet en la población española es del 72% (en el ranking mundial el puesto ocupado sería el 20) y tiene un crecimiento medio del 440% desde el año 2000.

En el ranking de uso de redes sociales, España ocupa el séptimo puesto a nivel mundial, el 80% de los usuarios está en una red social y el 60% consulta estas todos los días. 

En el informe se recoge que los índices de penetración a destacar son: Madrid (58%), Cataluña (57%) y País Vasco (55%). Mientras que las comunidades con menor índice son Murcia (39%) y Extremadura (36%), estas dos últimas según el informe, son las que menor crecimiento han tenido en los últimos años.

Perfil de usuario de internet en España
Un 55% son hombres y un 45% mujeres. Una cuarta parte está entre los 14 y 24 años, otra entre 25 y 34 años, otra entre 35 y 44 años y el último grupo es de más de 45 años. El perfil de usuario que más ha crecido es el de más de 55 años.
Además, se informa de que el perfil social del usuario de la web es más alto que el de la población general.

Las redes sociales más populares en España: FaceBook, Tuenti y Twitter.
FaceBook con 7.900.000 usuarios es la más importante, seguida de Tuenti con 7 millones y Twitter. En el informe se comenta que las empresas que utilizan redes sociales superan en beneficios e ingresos a la competencia.

Si a esto le añadimos que un 30% de los usuarios que utiliza redes sociales recuerda la publicidad de estas, el 52% se convierte en fan de una marca y el 46% habla bien de una marca. 

Los pagos en serie de PayPal (batch payments) sirven para realizar múltiples pagos de forma masiva a personas que tengan una cuenta de PayPal para realizar pagos masivos o transferencias periódicas de dinero que es necesario para ciertas empresas o tiendas en Internet.

La gran ventaja es que podemos programar una aplicación que realice este pago a los usuarios que nosotros deseemos. Para ello deberemos crear un fichero en el que los datos de cada pago estarán separados por tabulaciones y cada pago por un salgo de línea. El formato de cada pago es el siguiente:

1. Dirección de correo electrónico del usuario
2. Importe en el formato 12.34
3. Código de la moneda de pago (monedas de pago en PayPal). En cada archivo sólo puede haber una moneda, por lo que si tenemos que hacer varios pagos de varias monedas deberemos generar diferentes archivos
4. Identificador del pago (sin espacios)
5. Texto explicativo del pago (opcional)

Un ejemplo de archivo de pago en serie sería el siguiente:

123456@dompruebas.es	2.43	EUR	transferencia_2245	Pago del día  14 de Mayo
abcdfeg@dompruebas.es	122.53	EUR	transferencia_2246	Pago del día  14 de Mayo

Ejemplo de generación de pago en serie en PHP

Con el siguiente sencillo ejemplo, conseguiremos hacer un script que realice pagos en serie. La fuente la suponemos de una base de datos, y tras crear el archivo, deberemos subir el archivo a la web de PayPal para realizar los pagos:

<?php
 
// Resultados obtenidos de una base de datos, XML, etc.
$moneda = "EUR";
 
$bp[0]['email'] = "123456@dompruebas.es";
$bp[0]['importe'] = "2.43";
$bp[0]['identificador'] = "transferencia_2245";
$bp[0]['mensaje'] = "Pago del día  14 de Mayo";
 
$bp[1]['email'] = "abcdfeg@dompruebas.es";
$bp[1]['importe'] = "122.53";
$bp[1]['identificador'] = "transferencia_2246";
$bp[1]['mensaje'] = "Pago del día  14 de Mayo";
 
// Procesamos
$archivo = "";
$icount = count($bp);
for($i=0;$i<$icount;$i++) {
   $archivo.=$bp[$i]['email']."\t";
   $archivo.=$bp[$i]['importe']."\t";
   $archivo.=$moneda."\t";
   $archivo.=$bp[$i]['identificador']."\t";
   $archivo.=$bp[$i]['mensaje']."\r\n";
}
 
$nombre_archivo = date("Ymd").'_'.$moneda.'_bp_'.time().'.txt';
$fd=fopen($nombre_archivo, 'a');
fwrite($fd,$archivo);
fclose($fd);
?>

Para más información, podemos leer la documentación oficial de los pagos en serie.

Artículos relacionados:

• Cómo pagar en tu web con PayPal

Cuando tenemos planeado hacer una aplicación web que va a hacer un trabajo intensivo de operaciones, base de datos, ficheros, etc. (por ejemplo página corporativa o de comercio electrónico) debemos plantearnos la velocidad final que tendrá con una alta carga de visitas diarias.

Por ello, vamos a explicar algunos trucos y consejos con ejemplos para poder escribir nuestro código PHP optimizado y por tanto nuestras aplicaciones corran más rápido.

Cadenas de texto

Usar echo en vez de print

Es más rápido hacer uso de la función echo que de la función print

echo “Hola”; // Más rápido
print “Hola”;

Evitar concatenar texto innecesariamente y utilizar múltiples echos

Es mejor realizar dos salidas de texto con dos echos diferentes que concatenar texto y después producir la salida.

echo “Bienvenido”; echo $usuario; // Más rápido
echo “Bienvenido”.$usuario;

Saber si una cadena de texto está vacía

Es más rápido saber si una variable está vacía con empty que saber si la longitud en número de caracteres es cero con strlen.

if (empty($cadena)) echo “vacía”; // Más rápida
if (strlen($s) == 0) echo “vacía”;

Substituir texto

La manera más rápida para substituir texto es con strtr y no con str_replace o preg_replace.

$salida = strtr("abd","d","c"); // Más rápida
$salida = str_replace("d","c","abd");
$salida = preg_replace("/d/","c","abd");

Saber si una cadena está contenida en otra

La función strpos es más rápida y ocupa menos memoria que strstr

if(strpos("Hola","o")!==false) echo "sí"; // Más rápida
$esta_contenida = strstr("Hola","o");
if(!empty($esta_contenida)) echo "sí";

Variables y arrays

Uso de variables locales

Es más rápido y eficiente en memoria trabajar con variables locales dentro de una función que con una variable de instancia de un objeto, declarada como global o sin definir:

class objeto {
   private $c;
   public function __Construct() {
      $this->c=0;
   }
   public function prueba() {
      // Inicialización
      global $a;
      $b = 0;
      // Incremento
      $a++;
      $b++;	// Más rápida
      $this->c++;
      $d++;
   }
}

Coste de memoria

Deberemos declarar variables que vayamos a usar. Si vamos a usar una variable con valores temporales podemos llamarla $auxiliar y así no declarar muchas variables diferentes que sólo usamos una vez.

Las variables que ocupen mucho espacio en memoria, por ejemplo un array muy grande, deberemos borrarlas cuando no se vayan usar con la función unset.

Calcular la longitud de un array antes de recorrerlo

Es más rápido recorrer un array de la siguiente forma

$icount = count($lista);
for($i=0;$i<$icount;$i++) {
   ...
}

que de ésta

for($i=0;$i<count($lista);$i++) {
   ...
}

ya que el cálculo de count se realiza tantas veces como posiciones tenga el array.

Acceder correctamente a un índice no númerico

Debemos acceder a los índices no numéricos de un array especificándolo con comillas

echo $lista[0]['nombre']; // Más rápido
echo $lista[0][nombre];

Funciones y objetos

Hacer uso de las funciones predefinidas en PHP

Las funciones incluidas en PHP siempre serán mucho más rápidas que las que podamos hacer nosotros

Uso de include y require

Es más rápido hacer uso de include o require que include_once o require_once.

Funciones declaradas en objetos hijos son más rápidos que los heredados

Una función declarada en un objeto hijo es más rápida que una función heredada de un objeto padre.

Bases de datos

Ordenar los resultados de múltiples consultas

Cuando tenemos que hacer múltiples consultas SQL que terminen siendo pesadas, es mejor realizar el procesamiento de ordenación mediante la función usort o similares que mediante SQL. Un ejemplo acerca de esto podéis leer en el siguiente artículo de como Digg consiguió optimizar su web notablemente mediante estos procedimientos.

Jedox Palo

Palo es un herramienta OLAP (Online Analytical Processing) de BI, que nos permite crear almacenar datos y generar informes en hojas de cálculo (via Microsoft Excel / OpenOffice) o en el navegador Web. Esta herramienta está creada por la empresa Jedox y en las aplicaciones básicas son software libre, por lo que nos permite el uso básico a un costo cero, y además posee de herramientas más avanzadas de pago.

Instalando lo necesario

Lo primero será descargarnos de la página oficial de Palo el cliente (Palo for Excel o Palo for Open Office) y el el servidor (Palo Suite) e instalarlo primero el cliente y después el servidor, si no podría haber algún problema en la instalación. Además, debemos bajarnos el manual de uso y configuración para conocer ciertas funcionalidades y configuraciones.

Para esta instalación, vamos a suponer que la instalación que hagamos el cliente y el servidor van a estar en el mismo ordenador. Si queremos que el servidor esté abierto deberemos abrir el puerto en la configuración del servidor Palo.

NOTA: Instalando el complemento de Palo en OpenOffice

Inicialmente la instalación del addin de Palo lo hice sobre Excel sin problemas en Office XP. Sin embargo noté que si queríamos hacerlo para OpenOffice bajo Linux mostraba un error Java. Tras buscar un poco por Google encontré la siguiente página http://software.krimnet.com/guide/guide-install-palooca-ubuntu-904-netbook-remix.htm en la que que explica los paquetes necesarios para instalarlo bajo Debian/Ubuntu.

Primeros pasos creando informes con Excel o OpenOffice

Ahora arrancaremos nuestra hoja de cálculo, si es desde Excel deberemos hacerlo haciendo doble click en el icono Palo Excel-Addin del escritorio, y veremos que tenemos una nueva opción que es la pestaña Palo.

Para crear un informe seleccionaremos la opción Pegar Vista. Las opciones básicas que se muestran son las siguientes:

• Servidor / Base de datos: nuestro ordenador se puede conectar a varios servidores que contengan diferentes bases de datos. En principio trabajaremos con la base de datos Demo.
• Área de hoja: son las dimensiones de las que disponemos. Podemos definir una dimensión como un dato medible, como por ejemplo: productos, ventas, años, clientes, etc.
• Título de columna: dimensión/es que irán en el eje X, en nuestro caso arrastraremos hasta aquí la dimensión Years.
• Título de renglón: dimensión/es que irán en el eje Y, arrastraremos la dimensión Products.

Tras seleccionarlo pulsaremos el botón insertar y el informe quedará creado.

Podemos ver que la vista consisten en dos zonas: la zona superior contiene las dimensiones no escogidas y la inferior contiene las dimensiones escogidas que queremos ver en detalle.

Si hacemos doble click sobre las celdas azules de la zona inferior podemos ir desplegando las secciones de años o productos, subdividiéndose en otras secciones hasta llegar a un elemento final. Mientras, en las celdas amarillas se muestra el valor calculado.

Podemos seleccionar las dimensiones de la zona superior para modificar el informe. Por ejemplo podemos hacer doble click sobre Europe y elegir Spain, todos los datos de la zona inferior que ahora salen son los pertenecientes a España, pudiendo ver en detalle los valores para los productos según años.

Por último, tras tener el informe que deseamos, si queremos exportarlo y visualizarlo en un ordenador sin que tenga Palo instalado, podemos pulsar la opción Guardar como Instantánea, pero este informe no será dinámico y sólo veremos los datos visualizados al generarlo.

Fuentes y más información

• Wikipedia, Business Intelligence: http://es.wikipedia.org/wiki/Business_intelligence
• Wikipedia, OLAP: http://es.wikipedia.org/wiki/OLAP
• Jedox, Palo: http://www.jedox.com/

A continuación vamos a explicar algunos conceptos básicos de brechas de seguridad más comunes y como solucionarlos mediante PHP permitiendo escribir aplicaciones web un poco más seguras.

Protección contra la inyección de código SQL

Es muy común trabajar contra una base de datos (MySQL, PostgreSQL, Oracle, etc.) y estas consultas dependen de parámetros llegados desde GET o POST, por lo que permitimos al usuario de cada web que en cierta manera modifique las consultas SQL de nuestra web.

Esto podría provocar que un usuario que construya una consulta SQL malintencionada pudiera obtener resultados indeseados, como poder hacer un login en una zona restringida de nuestra web sin conocer ningún usuario / contraseña.

Supongamos la siguiente situación: tenemos un nombre de usuario pruebas y una contraseña clave_pruebas guardados en base de datos. Para realizar la identificador obtenemos los parámetros por POST mediante las variables $_POST['usuario'] y $_POST['clave']. Tras ello realizamos la siguiente consulta SQL:

mysql_query('select id from usuariosWeb where usuario = '".$_POST['usuario']."' and password = '".$_POST['clave']."'');

Si existe un usuario con ese nombre y usuario, es que la identificación es correcta y por tanto debemos hacer el login. Pero sin embargo, si construyésemos el siguiente parámetro

$_POST['clave'] ="m' or 1='1"

podemos observar que nos devuelve un valor válido para identificarse conociendo sólo el nombre de usuario.

Para solucionarlo, tenemos diversos métodos pero lo más cómodo es substituir las comillas simples y dobles de todos los parámetros parámetros POST mediante el siguiente código:

foreach($_POST as $key => $value) {
	$_POST[$key] = str_replace("'","",$value);
	$_POST[$key] = str_replace('"','',$value);
}

Guardar contraseñas, números de tarjeta de crédito, dirección de correo, etc. de forma segura con MD5 ó SHA1

Para guardar las contraseñas de los usuarios en las bases de datos debemos guardarlas de manera que no puedan ser visibles a simple vista ya que si alguna persona malintencionada consiguiera acceder a la base de datos, además de conseguir el control de nuestra web, además tendrá acceso a información sensible de los usuarios que nos visitan.

Para ello podemos dificultarlo mediante los resúmenes hash MD5 o SHA-1, que aunque se tratan de algoritmos crackeados, por lo menos no mostraremos como texto plano esta información.

Ejemplo:

$a = "clave_pruebas";

echo "clave original: ".$a." ";

$b = md5($a);

echo "Hash MD5 de la clave original: ".$b." ";

$c = sha1($a);

echo "Hash SHA-1 de la clave original: ".$c." ";

Como podemos ver, con ello conseguimos ocultar mínimamente la contraseña de cada usuario. Cuando un usuario se identifique con su contraseña, realizaremos el cálculo del hash de su contraseña y compararemos contra la base de datos, no el texto plano de la contraseña, si no del hash.

Uso de variables de sesión y no de cookies

Normalmente, alguna zona de nuestra web necesite acceso mediante usuario y contraseña. Para que el usuario no tenga que introducirlas repetidamente podemos guardarla mediante cookies pero es una práctica muy insegura ya que si lo hiciéramos, esta información es transmitida mediante la red en texto plano y podría ser leída por cualquier persona que realice un sniffing de red o que lea las cookies guardadas en nuestro ordenador mediante un virus o troyano.

Por ello lo mejor es hacer uso de las variables de sesión. Estas variables se guardan en el servidor por lo que en cualquier caso, la información transmitida sólo es sensible la primera vez que se envía y no las sucesivas veces (por tanto esto sería evitable haciendo uso del protocolo HTTPS en vez de HTTP).

Como ejemplo del usuario de variables de sesión, haremos uso de dos archivos. En el primero creamos una variable de sesión:

session_start();
$_SESSION['clave'] = "clave_pruebas";

y en el segundo mostramos el valor en pantalla.

session_start();
echo $_SESSION['clave'];

Suplantación de sesiones (Session hijacking o Man in the middle)

Del uso de variables de sesión se deriva otra posible brecha de seguridad que es una persona malintencionada intente suplantar el cliente de cara al servidor. Cuando iniciamos una sesión, creamos una cookie con un identificador único para esa sesión. Si una persona malintencionada interceptase ese identificador único y mandase esa cookie al servidor, podría suplantar nuestra identidad y tener acceso a nuestras zonas restringidas de la web.

Lo solución ideal sería el uso del protocolo HTTPS que encriptaría toda nuestra conexión, pero si esto no es posible, podemos crear una serie de comprobaciones en las que intentemos asegurarnos de la real identidad de cada usuario.

Para ello podemos guardar una serie de variables de sesión de los datos que el usuario nos proporciona en cada visita, como son la dirección IP o la información de su navegador, etc. Si estos cambian significaría que es un intento de session hijacking y por tanto es un usuario que realiza un ataque. En el siguiente ejemplo tenemos dos archivos, en el que en el primer archivo realizamos un login satisfactorio y guardamos los datos iniciales de dirección IP y tipo del navegador con el que lo hemos hecho:

session_start();
$_SESSION['REMOTE_ADDR'] = $_SERVER['REMOTE_ADDR'];
$_SESSION['HTTP_USER_AGENT'] = $_SERVER['HTTP_USER_AGENT'];

En pantallas posteriores, comprobaremos si en cada pantalla los datos actuales de dirección IP y datos del navegador se corresponden con los que se realizó el login como usuario en la web:

session_start();
if($_SESSION['REMOTE_ADDR'] != $_SERVER['REMOTE_ADDR'] || $_SESSION['HTTP_USER_AGENT'] != $_SERVER['HTTP_USER_AGENT']) {
	exit();
}

Parámetros GET/POST explotables

Para finalizar, si hacemos uso de parámetros GET y POST deberemos comprobar siempre que se correspondan con el usuario actual o si tiene permisos.

Por ejemplo, si tenemos un archivo que edita productos llamado editarProducto.php y recibe el parámetro GET idproducto, que se corresponde con el identificador único del producto a editar y llamamos al archivo de la siguiente manera:

http://www.miweb.com/editarProducto.php?idproducto=15

deberemos comprobar en cualquier caso que en primer lugar seamos un usuario registrado y logueado y después que el producto de identificador único 15 corresponde a uno de los productos del usuario logueado.

• Open Source
• Ligero de peso
• Ampliable mediante plugins
• Usable en todos los navegadores.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo de un editor de textos Web simple con TinyMCE</title>

<!-- TinyMCE -->

<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
		mode : "exact",
		elements : "editor_texto",
		theme : "advanced",
		theme_advanced_buttons1:"bold,italic,underline,|,undo,redo,|,bullist,numlist",
		theme_advanced_buttons2:"",
		theme_advanced_buttons3:""

	});
</script>
<!-- /TinyMCE -->

</head>
<body>

<h3>Editor de textos Web</h3>

<textarea id="editor_texto" name="editor_texto" style="width: 30%;">Texto de prueba</textarea>

</body>
</html>

• mode "exact" y elements "editor_texto": con estas dos líneas indicamos que queremos aplicar el editor de textos sólo al elemento de la web de identificador editor_texto
• theme "advanced": elegimos utilizar el tema avanzado del editor para poder seleccionar los botones concretos que queremos que aparezcan mediante theme_advanced_buttons1, theme_advanced_buttons2 y theme_advanced_buttons3 donde seleccionaremos dentro de las tres posibles filas de botones del editor, que botones aparecerán. En este caso negrita, cursiva, subrayado, una separación, deshacer, rehacer, una separación, lista y lista numerada respectivamente.

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 la tienda virtual de 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:

<html>

<head>

<title>Ejemplo de pago mediante la API de PayPal</title>

</head>

<body>

<form name='formTpv' method='post' action='https://www.sandbox.paypal.com/cgi-bin/webscr'>

	<input type='hidden' name='cmd' value='_xclick'>
	<input type='hidden' name='business' value='mi_cuenta_sandbox@mi_pagina.com'>
	<input type='hidden' name='item_name' value='Nueva compra en mi web'>
	<input type='hidden' name='item_number' value='VENTA-X2561'>
	<input type='hidden' name='amount' value='10.15'>
	<input type='hidden' name='page_style' value='primary'>
	<input type='hidden' name='no_shipping' value='1'>
	<input type='hidden' name='return' value='http://mi_pagina/exito.html'>
	<input type='hidden' name='rm' value='2'>
	<input type='hidden' name='cancel_return' value='http://mi_pagina/cancelada.html'>
	<input type='hidden' name='no_note' value='1'>
	<input type='hidden' name='currency_code' value='EUR'>
	<input type='hidden' name='cn' value='PP-BuyNowBF'>
	<input type='hidden' name='custom' value=''>
	<input type='hidden' name='first_name' value='NOMBRE'>
	<input type='hidden' name='last_name' value='APELLIDOS'>
	<input type='hidden' name='address1' value='DIRECCIÓN'>
	<input type='hidden' name='city' value='POBLACIÓN'>
	<input type='hidden' name='zip' value='CÓDIGO POSTAL'>
	<input type='hidden' name='night_phone_a' value=''>
	<input type='hidden' name='night_phone_b' value='TELÉFONO'>
	<input type='hidden' name='night_phone_c' value=''>
	<input type='hidden' name='lc' value='es'>
	<input type='hidden' name='country' value='ES'>
</form>
<script type='text/javascript'>
	document.formTpv.submit();
</script>

</body>

</html>

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.

Artículos relacionados

• Pagos en serie de PayPal

• 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):

<html>

<head>

<title>Ejemplo sencillo de AJAX</title>

<script type="text/javascript" src="/js/jquery.js"></script>

<script>
function realizaProceso(valorCaja1, valorCaja2){
        var parametros = {
                "valorCaja1" : valorCaja1,
                "valorCaja2" : valorCaja2
        };
        $.ajax({
                data:  parametros,
                url:   'ejemplo_ajax_proceso.php',
                type:  'post',
                beforeSend: function () {
                        $("#resultado").html("Procesando, espere por favor...");
                },
                success:  function (response) {
                        $("#resultado").html(response);
                }
        });
}
</script>

</head>

<body>

Introduce valor 1

<input type="text" name="caja_texto" id="valor1" value="0"/> 


Introduce valor 2

<input type="text" name="caja_texto" id="valor2" value="0"/>

Realiza suma

<input type="button" href="javascript:;" onclick="realizaProceso($('#valor1').val(), $('#valor2').val());return false;" value="Calcula"/>

<br/>

Resultado: <span id="resultado">0</span>

</body>

</html>

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:

<?php 
$resultado = $_POST['valorCaja1'] + $_POST['valorCaja2']; 
echo $resultado;
?>

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

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.

	

		Item 1
		

			

				Option 1
			
			

				Option 2
			
		
	

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;
}

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%;
}

Hacks para Internet explorer 6 y 7:

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

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

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;
}

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";

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"
'

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?

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

¿Cómo ver el google calendar?

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;
}

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.

¿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 

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, mezcladas con los conocimientos de marketing tradicional, las utilizamos en Imaginanet para la consecución de los objetivos planteados en los proyectos de marketing online en que participamos.

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

<script type="text/javascript">
  $(document).ready(function() {
    $('#colorpicker').farbtastic('#color');
  });
</script>

$('idCampoDeTexto').ColorPicker();

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

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

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]
         }]
      });

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.

    

        Globos
    
    

        Coche
    
    

        Niebla
    
    

        Molino de viento
    
    

        Bosque
    

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

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);
}

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);
}

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

Fondos

Elección de los colores

Tablas

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.

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.

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.

Dándole estilo a tu sitio

Persistentes

Preferidas

Alternativas

Intercambiando estilos

El Script

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

HTMLListElement.getAttribute("title")

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

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

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; 
} 

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; 
} 

onLoad

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; 
} 

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

onUnload

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

Juntándolo todo

change style to default 
change style to paul 

¿PORQUÉ UN DOCTYPE?

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

DOCTYPES QUE FUNCIONAN

HTML 4.01 Strict, Transitional, Frameset

<!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">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

SIGUIENTES PASOS