sin programar

Tipografias por comunes en Windows, Mac OS, Ubuntu y smartphones

2012-01-25T18:07:00.000+01:00

Lista de fuentes tipográficas por defecto y comunes que encontraremos en la mayoría de sistemas operativos Windows, Mac OS y Ubuntu (Linux). Listado muy útil a la hora de elegir la tipografía para desarrollar nuestra web y que se vea igual en todos los navegadores y sistemas operativos.

Fuentes comunes en la mayoría de versiones de Windows, Mac OS y Ubuntu:

Arial
Comic Sans MS
Georgia
Trebuchet MS
Verdana

En móviles no hay fuentes comunes para todos, sino que depende del sistema que utilicen.

Fuentes instaladas por defecto en iPhone:

Helvetica

Fuentes instaladas por defecto en Android

Droid Sans

Crear gráficos con CANVAS III - Círculos y arcos

2011-11-10T18:46:00.000+01:00

Siguiendo con los casos prácticos, vamos a ver como dibujar arcos, circunferencias y círculos.

arc(x, y, radio, angulo-inicio, angulo-fin, sentido-giro[true o false])

El angulo de inicio y fin no se expresan en grados sino en radianes. 6,2831853 radianes (PI*2) equivalen a 360 grados. Podemos obtener los radianes a partir de los grados con este cálculo:

radianes = (Math.PI/180)*grados
Ejemplo:

    
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"> 
function dibujo(){
    var canvas = document.getElementById("dibujo").getContext('2d');
            
    var calculoRadian = Math.PI/180;
    var gradoInicio1 = 0;
    var gradoFin1 = calculoRadian * 360;
    var gradoInicio2 = 0;
    var gradoFin2 = calculoRadian * 360;
    var gradoInicio3 = 0;
    var gradoFin3 = calculoRadian * 90;
    
    //Circulo
    canvas.beginPath();
    canvas.arc(360,150,50,gradoInicio1,gradoFin1,false);
    canvas.fill();
    
    //Arco relleno
    canvas.beginPath();
    canvas.arc(120,150,50,gradoInicio2,gradoFin2,false);
    canvas.stroke();
    
    //Circulo relleno
    canvas.beginPath();
    canvas.arc(200,120,80,gradoInicio3,gradoFin3,false);
    canvas.fill();
}
</script>
</head>
<body onLoad="dibujo()"> 
<canvas id="dibujo" width="500" height="300"></canvas>
</body>
</html>

Resultado:

Crear gráficos con CANVAS - II

2011-10-07T09:00:00.000+02:00

Las funciones básicas para dibujar formas son: beginPath() - Inicio de nueva figura
closePath() - Cerrar figura
stroke() - Dibujar contorno
fill() - Dibujar figura con relleno. Cuando se utiliza no es necesario cerrar la figura
moveTo(x, y) - Punto de inicio de dibujo o salto en el dibujo
lineTo(x,y) - Linea recta
arc(x, y, radio, angulo-inicio, angulo-fin, sentido-giro[true o false]) - Arco
quadraticCurveTo(cx, cy, x, y) - Curva cuadrática ("cx" y "cy" son las posiciones x-y de punto de control de la curva)
bezierCurveTo(cx1, cy1, cx2, cy2, x, y) - Curva beizer ("cx1", "cy1", "cx2" y "cx2" son las posiciones x-y de los puntos de control 1 y 2)

Ejemplo triangulo:


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function dibujo(){
    var canvas = document.getElementById("dibujo").getContext('2d');
    
    //Contorno triangulo
    canvas.beginPath();
    canvas.moveTo(100,50);
    canvas.lineTo(150,150);
    canvas.lineTo(50,150);
    canvas.lineTo(100,50);
    canvas.stroke();
    
    //Triangulo relleno
    canvas.beginPath();
    canvas.moveTo(250,50);
    canvas.lineTo(350,200);
    canvas.lineTo(150,200);
    canvas.lineTo(250,50);
    canvas.fill();
    }

</script>
</head>
<body onLoad="dibujo()"> 
	<canvas id="dibujo" width="500" height="300"></canvas>
</body>
</html>

Resultado:

Crear gráficos con CANVAS - I

2011-10-05T09:00:00.000+02:00

El elemento "canvas" de HTML crea un area donde mediante javascript se puede crear gráficos de forma dinámica.

<canvas></canvas>

Los atributos permitidos son "width" y "height", de forma predeterminada tiene un tamaño de 300 x 150 pixels.

Nota: Asignar el tamaño de canvas mediante CSS distorsiona los gráficos de su interior.

El contenido que se añada dentro de canvas se puede utilizar como contenido alternativo para los navegadores que no lo soporten.

<canvas width="500" height="300">Texto alternativo para navegadores antiguos</canvas>

Empezar a dibujar

Mediante una función javascript y el método "getContext" prepararemos el elemento "canvas" para crear gráficos en su interior.
var canvas = document.getElementById('dibujo').getContext('2d');

Ejemplo:


<html>
<head>
<script>
    function dibujar(){
    var canvas = document.getElementById('dibujo').getContext('2d');
    }
<script>
</head>
<body onload="dibujar();">
    <canvas id="dibujo"></canvas>
</body>

Para generar los diferentes gráficos iremos añadiendo las funciones que los crean de esta manera:

	
function dibujo(){
    var canvas = document.getElementById("dibujo").getContext('2d');
    
    //grafico 1
    canvas.fillRect(10,10,100,100);
    
    //grafico 2
    canvas.fillRect(50,50,100,50);
 }

Dibujar cuadrados y rectángulos

Se pueden crear 3 tipos distintos de rectángulos:

fillRect(x,y,ancho,alto) - Rectángulo
strokeRect(x,y,ancho,alto) - Borde rectangular
clearRect(x,y,ancho,alto) - Agujero rectangular

Hay que definir la posición x, y, el ancho y el alto. Por defecto la posición es respecto a la esquina superior izquierda.

Ejemplo:

	
function dibujo(){
    var canvas = document.getElementById("dibujo").getContext('2d');
    
    //grafico 1
    canvas.strokeRect(10,10,100,100);
    
    //grafico 2
    canvas.fillRect(50,50,100,50);
    
    //grafico 23
    canvas.clearRect(55,55,30,30);
}

Resultado:

Formatos de vídeo HTML5 soportados por los navegadores

2011-10-02T19:15:00.000+02:00

Firefox: OGV
Google Chrome: MP4 y OGV
Safari: MP4
Internet Explorer 9: MP4
Opera: OGV

Conversor convertidor vídeo gratuito: Miro video converter

Estructura básica de HTML5

2011-09-28T10:57:00.000+02:00

Ejemplo de construcción de una web con los nuevos elementos incorporados a HTML5.

<!DOCTYPE html>
<body>

<header>

<hgroup>

<h1>Titulo 1</h1>
<h2>Titulo 2</h2>

</hgroup>

</header>
<nav>menu de navegación</nav>
<section>

<article>Bloque de texto</article>
<article>Bloque de texto</article>
<article>Bloque de texto</article>

</section>
<aside>Barra lateral, publicidad, citas, información secundaria.</aside>
<footer>Pie de pagina

<address>Autor, fecha creación o contacto</address>

</footer>

</body>

Estos elementos sustituyen al método de maquetación mediante <div>. La ventaja es un código mas limpio y semántico que a su vez mejora los resultados SEO. En todo caso el elemento "div" sigue vigente en HTML5.

Problema anchura input button en IE6 y 7

2011-09-06T18:52:00.000+02:00

Hoy me he percatado de que los input type ="button" aparecen con una especie de padding lateral que aumenta en función de la longitud del texto que contenga el botón. Este problema sólo sucede en Internet Explorer 6 y 7 (que raro) y no forzar el margin o padding no funciona.

La solución:

input.boton{
overflow: visible;
}

Detectar navegador con javascript y jQuery

2011-08-31T13:59:00.000+02:00

Con $.browser de jQuery podemos averiguar rápidamente y sin complicaciones el navegador y la versión.

$.browser = navegador
$.browser.version = versión del navegador

Navegadores soportados:
webkit
safari
msie
mozilla
opera

Ejemplo:

if($.browser.msie){

alert("Internet Explorer");

}

Cuenta atrás en PHP

2011-08-29T19:11:00.004+02:00

Sencillo pero práctico script de php que cuenta cuantos días faltan para la fecha indicada. Para usarlo sólo debemos modificar las variables $hora, $dia, $mes y $ano con la fecha final y la variable $cuenta_atras devuelve el resultado en días. Si la fecha ya ha pasado devolverá en 0.

//fecha fin (sin ceros delante y las horas en formato 24 h)

$hora = 0;

$dia = 21;

$mes = 12;

$ano = 2012;

$fin = mktime($hora,0,0,$mes,$dia,$ano);

$hoy = mktime(date('H,0,0,m,d,Y'));

$cuenta_atras = floor(($fin - $hoy) / 86400);

if($cuenta_atras <= 0){

$cuenta_atras = 0;

}

Tipografías originales en tu web usando font-face

2011-07-21T18:01:00.003+02:00

Hace algunas semanas os conté como insertar tipografías de google en nuestro site, en está ocasión os hablaré de como hacerlo con cualquier tipografía y sin necesidad de javascript.
La propiedad @font-face de CSS3 es la que hace posible que el navegador recoja la fuente directamente del servidor. Actualmente, lo soportan casi todos los navegadores, incluido Explorer 6, aunque añadiéndole algunas variantes.
Primero de todo, si queremos que la fuente sea soportada por todos los navegadores, la necesitaremos en formatos: eot (para internet explorer), ttf (para firefox, safari y chrome), svg (otros navegadores). Para generar estos formatos podemos hacer uso de herramientas como la que nos ofrecen en http://www.fontsquirrel.com/fontface/generator.
Una vez tenemos la fuente en todos los formatos, las guardamos en una carpeta de nuestro site, por ejemplo dentro de de la carpeta de los CSS.
A continuación tenemos que crear una hoja de estilos que contenga la propiedad font-face. Font-face le indica al navegador la ruta donde se encuentra la fuente tipográfica:

@font-face {

font-family: 'ChunkFiveRegular';

src: url('../fonts/Chunkfive.eot');

src: local('ChunkFive Regular'),

local('ChunkFive'),

url('fonts/Chunkfive.woff') format('woff'),

url('fonts/Chunkfive.ttf') format('truetype'),

url('fonts/Chunkfive.svg') format('svg');

}

Si hacemos uso de generadores, es posible que también nos genere el archivo css.
Atención, @font-face no funciona si lo ponemos en el HEAD del documento.

Por último creamos otra hoja de estilos donde llamamos a la fuente de la misma forma que lo hariamos con cualquier otra:

body{

font-family:'ChunkFiveRegular';

}

En el documento deberá enlazarse primero los estilos del font-face y a continuación el resto:

Cuidado, no abuséis de está propiedad, las tipografías pueden llegar a pesar bastante y el navegador puede trabajar más lentamente de lo habitual.

Estadísticas de google analytics en nuestros e-mailings

2011-06-27T17:12:00.000+02:00

¿como averiguar la efectividad de una campaña de e-mailing? Sencillo, simplemente añadiendo unos parámetros a los enlaces del e-mailing para que Google Analytics los procese. Previamente, debemos tener una cuenta en Google Analytics con nuestra pagina web de destino activa y su correspondiente script.
Para registrar el origen de los enlaces de entrada a nuestra web, Google nos facilita una herramienta para crear las URL con los parámetros.
Se admiten hasta 5 parámetros, 3 de ellos obligatorios:
utm_source (obligatorio) Identificación de la campaña, por ej.: boletin_semanal
utm_medium (obligatorio) Medio de publicación, por ej.: emailing
utm_term Palabras clave de la campaña, por ej.: portatil+consolas
utm_content Contenido de la campaña, por ej.: promocion_navidad
utm_campaign Nombre de la campaña, por ej.: navidades2011

Una vez generada la URL sólo queda añadirlas a nuestro e-maling. Si por ejemplo queremos estadísticas de los enlaces que han tenido más clicks, bastará con modificar el parámetro utm_content o utm_term para identificar cada uno de los enlaces. Si por ejemplo se trata de un boletín donde se muestran 3 ordenadores, pondremos tres enlaces así:

Ordenador pentium 4
http://misito.com/pentium4.html?utm_source=boletin&utm_medium=mailing&utm_term=pentium&utm_content=ordenadores&utm_campaign=promo_navidad

Ordenador Core 2 Duo
http://misito.com/pentium4.html?utm_source=boletin&utm_medium=mailing&utm_term=core_duo&utm_content=ordenadores&utm_campaign=promo_navidad

Ordenador i5
http://misito.com/pentium4.html?utm_source=boletin&utm_medium=mailing&utm_term=i5&utm_content=ordenadores&utm_campaign=promo_navidad

Los resultados, aparecerán de forma automática en tu cuenta de Google Analytics, en el apartado "Campañas" que está dentro de "Fuentes de tráfico". Recordar que los resultados no se muestran inmediatamente.

Los resultados se pueden clasificar según tipo de campaña, contenido, términos... todo depende de cuantos parámetros tengamos en los enlaces. Esto es especialmente útil si estamos realizando diferentes campañas o incluso si tenemos banners o publicidad en otros sitios que apunten a nuestra web.

Unificar las URL con o sin www para optimizar resultados SEO

2011-06-23T12:08:00.000+02:00

Muchos servidores admiten las URL con las www o sin ellas (www.sitio.com o sitio.com), la web mostrada en ambos casos será la misma, sin embargo para los buscadores puede tratarse de 2 paginas distintas. La solución para obtener unos resultados de indexación optimos es unificar en un solo formato de URL.

Para que la navegación por el site sea siempre con el mismo formato hay que redireccionar a uno de los formatos elegidos.

Redirección de URL con www a URL sin www desde cabecera de archivo PHP:

   if ($_SERVER["HTTP_HOST"] == 'www.tusitio.com')
   {
       header( "HTTP/1.1 301 Moved Permanently" );
       header( "Location: http://tusitio.com".$_SERVER['REQUEST_URI'] );
   }

Desde archivo .htacces:

    RewriteEngine On
    RewriteCond %{HTTP_HOST} ^www.(.*)$
    RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

Imágenes PNG con transparencia alpha en Internet Explorer 6

2010-12-02T10:52:00.011+01:00

Como algunos ya sabréis, Internet Explorer 6 no renderiza correctamente las transparencias alpha de las imágenes PNG 24. Afortunadamente, el propio Microsoft nos ofrece una solución: un filtro CSS. Los filtros CSS sólo funcionan en Explorer, e incluso varían según la versión, pero en este caso sólo nos interesa el Explorer 6.

div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/imagen.png', sizing='scale');
}

Este filtro se puede aplicar en los estilos en linea o en la hoja de estilos, pero cuidado, la ruta a la imágen debe ser absoluta o relativa al documento desde donde se ve la imagen, no relativa a la hoja de estilos como sucede con las imágenes de fondo.

A tener en cuenta
La manera que he conseguido que funcione es aplicandola cómo imagen de fondo en un div y después crear una clase para IE6 que elimine la imagen de fondo y aplique el filtro.

Ejemplo:

div{
background:url(../imagen.png) no-repeat;
width:100px;
height:100px;
}
*html div{
background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagen.png', sizing='scale');
}

Solución problema interlineado en Outlook 2007

2010-11-19T13:32:00.002+01:00

Los que diseñan y maquetan emails quizás se hallan percatado de que el interlineado en Outlook es mucho mayor del originalmente definido, provocando un descuadre en la maquetación si los textos están muy ajustados al diseño.

Hace algún tiempo estuve intentando encontrar una solución y no la encontré, hoy finalmente vi la luz.

Existe una regla de estilo nativa de Microsoft Office que mantiene los altos de linea tal y como los tengamos definidos. Unicamente tendremos el siguiente estilo dentro del "head":

<style type="text/css">

</style>

El resto de los estilos los definiremos en linea (la mayoría de gestores no procesan ni hojas de estilos ni los estilos de la cabecera.

Cambiar icono de blogger en el navegador

2010-10-24T19:27:00.003+02:00

Para cambiar el icono de blogger por un icono personalizado hay que hacer algunas "trampillas" que sobreescriban el que ya existe. Lo explicaré paso a paso para que lo puedan entender los usuarios sin conocimientos de HTML.

El logo debe tener extensión "ico" con un tamaño de 16x16 pixels. Se pueden utilizar imágenes jpg o gif directamente cómo icono, pero algunos navegadores no los soportan, así que no lo recomiendo. Si no tienes ningún programa para crear iconos puedes utilizar herramientas gratuitas online, por ejemplo el generador online de genfavicon.com.
Una vez tenemos el gráfico creado, tenemos que subirlo a un hosting propio u otro alternativo distinto al de blogger, porque blogger no nos dejará subir imágenes con este tipo de extensión. Una posibilidad es crearte un sitio en "google sites", es gratis y tardarás un minuto (si tienes hosting propio salta directamente al paso 3):

Cómo crear un sitio en "google sites" y subir un archivo

Entra a sites.google.com con tu cuenta de blogger, crea un nuevo sitio, dale el nombre que quieras (la plantilla es lo de menos).

Entra al sitio que has creado, en la parte superior aparecen los botones de edición, despliega "Más acciones" y pulsa en "Administrar sitio".

En el menú de la izquierda ves a "Archivos Adjuntos" y por último pulsa en el botón "subir". Te aparecerá un botón de "examinar" donde deberás cargar tu logo con extensión "ico" de 16x16 pixels (puedes subirlo al nivel superior o a otro).

Una vez cargado te aparecerá en la lista con un enlace directo (Ver y descargar), copia la url de destino de "Ver" (botón derecho del ratón sobre el enlace, y en el desplegable busca copiar acceso directo o copiar ruta del enlace o similar).

Pega la url copiada en algún editor de texto. Obtendremos algo parecido a esto:
https://sites.google.com/site/sinprogramar2/favicon.ico?attredirects=0
Hay que borrar de la url el interrogante y todo lo que viene después, en mí caso queda así:
https://sites.google.com/site/sinprogramar2/favicon.ico
Pues este será nuestro enlace a el icono.

Copia el siguiente código y sustituye las "xxx" por la url del icono:
<link href='xxx' rel='shortcut icon' type='image/x-icon'/>

En mí caso queda así:
<link href='https://sites.google.com/site/sinprogramar2/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

Sólo queda añadir este código resultante a nuestra plantilla de blogger en modo HTML (Panel del blog > Diseño > Edición de HTML) justo por encima de la línea que pone </head>. Quedaría así:

...
<link href='https://sites.google.com/site/sinprogramar2/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

</head>
<body>
..

Guardas los cambios y si vas a ver el blog el icono del navegador debería haber cambiado.

Tipografías libres para tu web con Google Fonts

2010-09-16T11:53:00.006+02:00

CSS3 permite entre otras cosas utilizar tipografías especiales directamente en el texto sin uso de javascript ni Flash. Para hacerlo posible debemos subir la fuente al servidor y enlazarla desde nuestra hoja de estilos.

Google nos lo pone aun más fácil y ha creado un directorio de fuentes libres que podemos enlazar directamente desde nuestra web.

Las tipografías actualmente disponibles:

Os voy a explicar brevemente como enlazar las tipografías de Google para que las podáis utilizar en vuestros proyectos:

Vamos al directorio de Google Fonts y elegimos la fuente deseada.

En el menú de opciones de la tipografía pulsamos "Get the code".

Dentro de "Get the code" podemos seleccionar el estilo de la tipo (no todas tienen esta opción) y justo debajo se genera el "link" que necesitamos.

Copiamos el link generado y lo pegamos en el "HEAD" de nuestra web, por encima del CSS:

<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='estilos.css" rel='stylesheet' type='text/css'>
...

Por último desde la hoja de estilos o desde los estilos en linea hacemos uso de la nueva fuente, en mi caso la "Lobster" y le añado 2 fuentes alternativas para los navegadores que no soporten CSS3 (por ejemplo Internet Explorer 8 e inferiores):

body{
font-family: 'Lobster', arial, serif;
}

El ejemplo terminado:

Si queremos utilizar varias tipografías simultáneamente sólo tenemos que añadir tantos "link" de las fuentes como queramos y crear nuevas clases.

Por último recordar que sólo los navegadores más modernos tienen soporte para CSS3 (Firefox 3, Safari 4, Google Chrome, Opera 10).

Cargar CSS distintos según versión de Internet Explorer

2010-09-15T09:29:00.002+02:00

Si llevas tiempo maquetando ya sabrás que las reglas HTML/CSS no son iguales para todos los navegadores. El asunto es especialmente escandaloso en Internet Explorer 6, un navegador que pese a los años que han pasado desde su lanzamiento, sigue teniendo un considerable número de usuarios. Cuando hablamos de versiones posteriores de Explorer las diferencias respecto a otros navegadores siguen siendo notables, incluso de una versión a otra hay distintos comportamientos.

Para corregir diferencias, una de las opciones que tenemos son los condicionales que sólo leen los Internet Explorer. Los condicionales se pueden utilizar tanto para cargar hojas de estilos especificas o estilos en linea. Se añaden dentro del "HEAD" después de los estilos comunes.

Ejemplo de condicional para todos los Internet Explorer que carga una hoja de estilo complementaria:



Ejemplo de condicional con estilo en linea para Explorer 6:



Ejemplo completo:

<html>
<head>
<title>CSS para explorer</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css">

</head>
<body>
<p>Contenido</p>
</body>
</html>

Forzar actualización hoja de estilos CSS del usuario

2010-09-09T17:43:00.002+02:00

A menudo los estilos CSS se quedan almacenados en el cache del navegador durante días o meses, provocando que los cambios posteriores en los mismos no se muestren hasta que el archivo haya sido eliminado de los temporales.

Una solución sería cambiar el nombre a la hoja de estilos, pero existen otras soluciones aun es mejores, como por ejemplo añadir un parámetro a la llamada del css:

<link rel="stylesheet" type="text/css" href="css/estilos.css?1" media="screen" />

En este ejemplo se añade "?1" cómo si estuviésemos enviando un parámetro pero las hojas de estilos no reciben los parámetros, pero será suficiente para que el navegador actue cómo si fuera una nueva hoja de estilos.

En skyandstars.net he encontrado una solución mejorada, que consiste en modificar los parámetros añadidos mediante un sencillo script de PHP.

Cargar CSS distintos según dispositivo

2010-07-29T12:44:00.004+02:00

Podemos cargar diferentes hojas de estilo dependiendo de si la web se está visualizando en un dispositivo móvil o en un PC gracias al atributo media. Esto nos permitirá adaptar la apariencia de nuestra web sin necesidad de crear 2 versiones del site.

El atributo media aplica los estilos dependiendo del dispositivo con el que se está navegando. Para los estilos de pantallas de PC y portátiles le ponemos "screen" y para móviles "handheld".

Enlazando a hojas de estilo:

Algunos valores para media:
all: Todos
screen: pantallas de PC
handheld: móviles
print: impresoras
projection: proyectores
tv: televisores

Quitar bordes redondeados de los input en iphone

2010-07-20T12:05:00.005+02:00

Adaptando una web a iphone me he dado cuenta que los input de formulario aparecen con las esquinas redondeadas, cosa que no siempre nos puede interesar, especialmente en los "input image". Pero con la ayuda de CSS podemos hacer que las esquinas de los input en iphone sean rectas.

input{
-moz-border-radius: 0px;
}

Para eliminar el sombreado de fondo nos puede servir:

input{
-webkit-appearance: textarea;
}

Averiguar ancho y alto del navegador con jQuery

2010-07-12T15:54:00.004+02:00

Con jQuery averiguar el alto y ancho del navegador cliente es tan simple como esto:

$(window).width();
$(window).height();

Si queremos saber el tamaño del HTML independientemente de lo que se está visualizando:

$(document).width();
$(document).height();

Simple ¿no?

Puedes ver más detalles aquí.

Las teclas rápidas de windows más útiles

2010-04-09T09:34:00.002+02:00

Para los que trabajamos todo el día con windows estas combinaciones de teclas nos permitirán ahorrar unos segundos en las tareas más repetitivas. Merece la pena memorizar algunas de ellas.

Escritorio = windows + D
Equipo = windows + E
Cambio de usuario = windows + L
Buscador = windows + F
Ventana ejecutar = windows + R
copiar = control + C
cortar = control + X
pegar = control + V
borrar sin pasar por la papelera = MAY + SUP
Deshacer último cambio = control + Z
Menu de programas abiertos = ALT + TABULADOR
Seleccionar todos los archivos = control + E
Ventana nueva = control + N (hace una copia de la ventana actual)

Impedir entrada de virus desde pendrive/USB

2010-03-26T11:10:00.006+01:00

Nuevamente me he encontrado una máquina infectada por un virus que se introdujo en el sistema desde un pendrive. Y es que hay que ir con mucho cuidado con lo que conectamos en nuestro PC.

Este tipo de virus entran en nuestro sistema a través de un archivo oculto de autorun que se encarga de ejecutar el virus.

La solución es tan simple como desactivar el autorun para dispositivos extraibles. Esto nos permitirá utilizar cualquier pendrive sin peligro de infección.

Desactivar el autorun (reproducción automática) en windows xp:

Menu de inicio > Ejecutar

Escribimos: gpedit.msc

Configuración del equipo > Plantillas administrativas > Sistema

En en listado buscamos: Desactivar reproducción automática

Clicamos sobre ella y le decimos Habilitar

Desactivar el autorun (reproducción automática) en windows vista y windows 7:

1. Opción desde el panel de control:

Menu de inicio > Panel de control > Hardware y sonido > Cambiar la configuración preterminada de medios y dispositivos

En la lista marcamos estas opciones:

Software y juegos = Preguntar cada vez
Contenido mixto = Abrir la carpeta...

2. Opción desde el registro:

Menu de inicio > Escribimos en el buscador: gpedit.msc

Configuración del equipo > Plantillas administrativas > Sistema > Acceso de almacenamiento extraíble

En el listado buscamos > Discos extraíbles: denegar acceso de ejecución

Clicamos y lo marcamos como Habilitada

Sombreados con CSS para todos los navegadores

2010-03-16T17:24:00.005+01:00

Ya es posible añadir bordes sombreados a nuestro HTML y de forma automática gracias a las recientes actualizaciones de Firefox y Safari. Para Internet Explorer los filtros nos dan su resultado equivalente.

Para aplicar un sombreado lo mejor es hacer un div que contenga por un lado el contenido y por otro un div que le aplicaremos el sombreado.

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">

.sombra{

box-shadow: 4px 4px 4px #666;
-moz-box-shadow: 4px 4px 4px #666;
-webkit-box-shadow: 4px 4px 4px #666;
filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3,MakeShadow=true,ShadowOpacity=0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=3,MakeShadow=true,ShadowOpacity=0.5)";
background: #666;
width:200px;
height:200px;
z-index:1;
}
.caja{
width:200px;
height:200px;
position:relative;
margin:20px;
}
.contenido{
width:200px;
height:200px;
position:absolute;
z-index:2;
background-color:#FFF;
}

</style>
</head>

La caja contenedora tiene un posicionamiento relativo y el contenido y la sombra posición absoluta. Esto nos permite posicionar la sombra en el fondo con un z-index:1.

Se puede variar la oscuridad y longitud de la sombra modificando la clase sombra. Hay que tener en cuenta cada linea actúa sobre un navegador distinto.

También remarcar que sólo funcionan para las últimas versiones de Firefox, Safari y para Explorer 6 y superiores.

Podéis ver este y otros efectos de CSS3 en css3please.com.

Cerrar y redireccionar pagina padre con javascript

2010-02-25T13:52:00.003+01:00

Abro un popup y quiero que al pulsar un enlace se cierre el popup y que la pagina que abrió el popup se redireccione a otra pagina. Esto se puede hacer muy fácilmente con javascript.

En el head del documento colocamos el script:

<script type="text/javascript">
redireccionar = function(){
opener.location.href="http://dominio.com/pagina.html";
window.close();
};
</script>

De este script sólo tenemos que cambiar la URL de destino.

Y en el enlace colocamos la llamada a la función al hacer click:

<a href="#" onclick="redireccionar()">pincha aquí</a>

Estadisticas uso dispositivos moviles Web

2010-02-24T18:09:00.007+01:00

Desde la aparición del Iphone el uso del móvil en la navegación Web no para de crecer, pese a eso aun están muy lejos del Windows y el Mac tradicionales.

Cifras correspondientes al tráfico a nivel mundial el mes de enero del 2010 por sistemas operativos:
Iphone: 0,48%
Symbian: 0,24%
Android: 0,06%

Fuente: http://marketshare.hitslink.com/

Quizás en el futuro el móvil desbanque al PC de toda la vida en el uso de internet. De momento falta mucho para ese día.

Guia rápida accesibilidad A/AA/AAA

2010-02-03T12:02:00.005+01:00

La accesibilidad web no tiene otro objetivo que facilitar la navegación web a personas con problemas visuales y también auditivos que generalmente utilizan software especial para leer y navegar por el contenido.
Desarrollar una web accesible tiene además la ventaja añadida de que son más fácilmente indexados por los buscadores.

Existen webs para comprobar la accesibilidad, y aunque pueden ser útiles para localizar determinados errores personalmente creo que no van a determinar si una web está siendo realmente accesible. Por ejemplo, un validador no va a ser capaz de valorar si el contenido tiene un orden coherente. Algo que con los estilos css esta perfectamente organizado y distribuido puede perder todo el sentido al quitarle los css e imágenes (que es lo que hará un lector de pantalla).

Existen 3 niveles de accesibilidad A, AA, AAA. El nivel se determina según las pautas ya establecidas que cumple.

Resumen de las pautas:

Imágenes con texto alternativo (alt)
Contenido multimedia: Se proporciona contenido descriptivo alternativo
El contenido debe tener un orden de lectura no dependiente del diseño o estilos
El contenido no debe depender de colores y debe ser fácilmente distinguible del fondo
Las funcionalidades de la pagina deben ser accesibles desde el teclado
Sin más de 3 destellos o cambios de imagen por segundo
Títulos descriptivos en cada pagina
Sistema para saltar de bloques de contenido y navegación secuencial

Debe cumplir las pautas del nivel A
Subtítulos para el contenido multimedia con audio
Contenido alternativo descriptivo para contenido multimedia con vídeo
Contraste alto entre fondo y texto (al menos 4,5:1)
Se puede variar tamaño de fuente hasta un 200% sin perdida de funcionalidad
Encabezados descriptivos
Al menos dos formas distintas para navegar por el site
En los envíos de información confidencial debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo.

AAA

Debe cumplir con las pautas del nivel A y AA
Lenguaje de signos para el contenido multimedia con audio
Descripción completa para el contenido multimedia con vídeo
Contraste muy alto entre fondo y texto (al menos 7,1:1)
Contenidos multimedia sin audio de fondo (sólo locución principal)
La pagina debe poseer un sistema para que el usuario pueda cambiar los colores de texto y fondo, limitar las lineas a 80 caracteres, alto de linea y tamaño de fuente. Todo ello sin que sea necesario utilizar el scroll horizontal para poder ver todo el contenido
Las imágenes con texto sólo pueden utilizarse para decorar.
Las funcionalidades de la pagina deben ser accesibles desde el teclado sin ningún tipo de excepción
Reanudación de sesión: Cuando un expira la sesión el usuario puede volver a reanudar sesión sin perdida de datos
Se proporciona al usuario información sobre su situación en la pagina
Texto descriptivo sobre el destino de cada enlace
Encabezados en cada sección
Definir el idioma de la pagina
En todos los envíos de información sistema debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo

Se pueden consultar todas las pautas en detalle y con sus excepciones aquí.

Solución problema mostrar archivos ocultos

2010-01-23T00:50:00.003+01:00

Recientemente tuve la necesidad de explorar los archivos de un pendrive, así que desde las opciones de carpeta le marque "mostrar carpetas y archivos ocultos". El problema fue que seguía sin mostrármelos, y las opciones de carpeta no conservaban el cambio. Esto está causado por un virus que nos a modificado el registro de windows.

Para solucionar este problema, lo primero es hacer un scaneo completo con el antivirus, y despues hacemos lo siguiente para recuperar esta opción de carpeta:

Inicio > Ejecutar > Escribimos: regedit > Aceptar

Nos aparecerá la ventana del editor del registro de windows, ahí seguimos la siguiente ruta:
HKEY_LOCAL_MACHINE > SOFTWARE >Microsoft > Windows > CurrentVersion > Explorer > Advanced > Folder > Hidden > SHOWALL

Pulsamos sobre la carpeta "SHOWALL" y en la información que muestra a la derecha hacemos doble click sobre "CheckedValue" y en la ventana que aparecé cambiamos su a valor a 1.

Ahora la opción de mostrar los archivos ocultos ya estará activa y sólo tendremos que activarla desde el menú de opciones de carpeta. Esto sirve tanto para windows XP como en VISTA.

Botones input "submit" con rollover

2009-11-18T13:43:00.003+01:00

Crear botones con rollover es muy sencillo, pero la cosa se complica con botones input para formulario. Para estos casos la mejor opción es el uso de input type="image" combinado con unos sencillos eventos de javascript.

Creamos 2 imágenes con los 2 estados del botón y le ponemos la ruta en el src a la imagen en reposo. Después le añadimos los eventos onmouseover (encima del botón) y onmouseout (fuera). Por último añadimos value="Submit" para que envíe el formulario.

<input type="image" src="img/boton_off.gif" onmouseout="javascript:this.src=img/boton_off.gif'" onmouseover="javascript:this.src='img/boton_on.gif'" value="Submit" />

Esto de podría hacer con estilos, pero en IE 6 obtendremos resultados indeseados.

Guia de meta etiquetas (metatags)

2009-10-22T13:38:00.005+02:00

Redireccionamiento a otra pagina:
<meta http-equiv="refresh" content="0 url=http://www.nuevaurl.com" />
tiempo en segundos

Rastreo de todos los vinculos de la web:
<meta name="robots" content="all" />
valores:
all, none, index, no index, follow, no follow

Fecha de caducidad de la pagina:
<meta http-equiv="expires" content="Wed, 27 july 2001 24:00:00 GMT" />

Autor:
<meta name="author" content="petito" />

Tema principal de la pagina:
<meta name="subject" content="diseño web" />

Descripción:
<meta name="description" content="diseño web y multimedia" / >

Palabras claves:
<meta name="keywords" content="diseño web, creaciones multimedia, ilustracion, posicionamiento" />

Programa utilizado en el desarrollo:
<meta name="generator" content="nvu" />

Lenguaje del sitio:
<meta name="language" content="spanish" />

Frecuencia de rastreo de los robots:
<meta name="revisit" content="30 days" />

Alcance de la web:
<meta name="Distribution" content="Local" />
valores: Local, Global

Clasificación tématica:
<meta name="classification" content="creaciones web" />

Meta que marca como pagina superior evitando que se abra dentro de otras webs (marcos o iframes):
<meta http-equiv="window-target" content="_top" />

Titulo de página (no se muestra en el navegador)
<meta name="title" content="diseño web" />

Para que no se guarde en caché:
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no cache" />

Indexación de los robots de la pagina actual y siguientes:
<meta name="robot" content="noindex,follow" />
valores:
"index,follow" //indexa y sigue
"index,nofollow" //indexa y no sigas
"noindex,nofollow" //no indexes y no sigas

Abrir nueva ventana con javascript

2009-10-07T12:51:00.004+02:00

Voy a explicar como abrir una nueva ventana del navegador con dimensiones definidas. Algo que para un programador no tiene ningún misterio, pero para el resto es algo útil que probablemente no sepan como hacer.

Para abrir la nueva ventana vamos a hacer uso de una pequeña función de javascript que personalizaremos desde el enlace.

La función:
function abrir_ventana(url,nombre,dimensiones){
window.open(url,nombre,dimensiones);
}

El enlace que abre la nueva ventana:
<a href="#" onclick="abrir_ventana('http://google.es','buscador','width=300,height=200')">Buscador </a>

Para ejecutar la función he añadido un evento de "onclick" al enlace donde llama la función y dentro de los paréntesis se definen los 3 parámetros (la URL, un nombre identificador y las dimensiones).

Para añadirlo en tu página debes incluir la función dentro del "HEAD" y personalizar los parámetros del enlace.

Ejemplo completo:
<html>
<head>
<script type="text/JavaScript">
function abrir_ventana(url,nombre,dimensiones){
window.open(url,nombre,dimensiones);
}
</script>
</head>

<body>
<a href="#" onclick="abrir_ventana('http://google.es','buscador','width=300,height=200')">Buscador</a>
</body>
</html>

Reglas de maquetación de e-mails HTML

2009-06-19T13:46:00.007+02:00

E-mails bien maquetados en HTML, con textos e imágenes es un tema básico para las grandes empresas que realizan campañas de e-mailing. Un e-mail incorrectamente maquetado puede convertir la campaña en un desastre. Este es un tema con poca información, pero si te interesa entonces es tu día de suerte.

La maquetación de e-mailings es una de mis principales tareas desde hace 2 años. Durante este tiempo, a causa de la poca información disponible, he tenido que ir aprendiendo a base de prueba y error. A día de hoy puedo considerar que se algo del tema.

Una maquetación HTML para una web no tendría porque ser distinta para un e-mail, pero si lo es. El problema principal de los e-mails en HTML es que no se ven igual a través del gestor de correo (hotmail, gmail, yahoo, mozilla thunderbird, outlook, ect...) que directamente en un navegador. Tampoco se ven igual en todos los navegadores aun utilizando el mismo gestor. La razón es que los gestores filtran el código y lo reformatean para evitar amenazas de seguridad, spam y mejorar su usabilidad.

Con los e-mails HTML se crea un submundo que no entiende de standares web ni nada por el estilo. Nuevamente el diseñador debe sacrificar su trabajo para conseguir un resultado aceptable en el mayor número posible de gestores.

Estas son algunas de las normas básicas que aplico a la maquetación de e-mailings:

Nada de scripts, enlaces a hojas de estilo, styles en <head>... nada de nada. El contenido del <head> lo eliminan la mayoría de gestores, especialmente los gestores on-line.
Flash, javascript y similares no se muestran y además puede hace creer al gestor de correo que nuestro e-mail es una amenaza acabando en la bandeja de correo basura o con el contenido bloqueado.
Los estilos CSS se pueden utilizar, pero siempre y cuando sean en linea, pero olvidaros de una maquetación con DIVs y similares. Lo mejor son las tablas.
Los gestores de correo añaden por defecto margenes, colores, alineamientos, interlineados... y si queremos que se conserve la apariencia visual hay que definir todas estas propiedades.
No utilizar imágenes de fondo, algunos gestores las eliminan.
Para evitar que las composiciones con imágenes se rompan hay que definir alturas y anchuras de las celdas que los contienen y añadir dentro de las propiedades del IMG un style="display:block".
Algunos gestores como Outlook 2007 aplican un interlineado por defecto que no podemos redefinir. Para evitar problemas haz composiciones que permitan un interlineado flexible.
Las imágenes siempre deben subirse a un servidor y enlazarlas en absoluto.

En próximos post dare más detalles sobre el diseño y la maquetación de e-mailings en HTML.

Transparencias con CSS compatibles con todos los navegadores

2009-06-18T13:02:00.007+02:00

Hace tiempo que existe la opción de variar la opacidad de los elementos mediante CSS para crear transparencias, pero esta propiedad se aplica de distinta forma según el navegador y su versión.

Aquí resumo como utilizar las transparencias en todos los navegadores:

-moz-opacity: 0.5; /*solo Firefox*/
opacity:.50; /*Versiones actuales de Firefox, Chrome, Opera y Safari*/
filter: Alpha(Opacity=50); /*Explorer 6, 7*/
-ms-filter:'alpha (opacity=50)'; /*Explorer 8*/
-khtml-opacity: 0.5; /*solo Safari*/

Este ejemplo crea una transparencia del 50%. Cuanto más alto es el valor menos transparente será. El valor va de 0 a 1 para opacity , moz-opacity y khtml-opacity, y de 0 a 100 en Alpha(opacity).

Los navegadores actuales se han puesto todos de acuerdo para funcionar con "opacity:.50" excepto Internet Explorer. Para asegurarte que funcione en todos los navegadores lo mejor es utilizar todas los hacks aunque puede que no pase las validaciones.

Un detalle:
En Internet Explorer si se aplica a un div hay definir la altura y anchura para que funcione.

El ejemplo en funcionamiento:

Soy transparente

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis magna nec nisl mattis non scelerisque lorem interdum. Proin ac commodo libero. Fusce ligula nisl, iaculis sed malesuada a, bibendum at augue. In feugiat ante ultrices nisi cursus viverra. Vestibulum eget ullamcorper ligula. Phasellus id est sed enim adipiscing luctus. Fusce convallis, enim at convallis iaculis, lacus ligula sollicitudin orci, quis suscipit magna massa eget lacus. Duis ullamcorper ullamcorper arcu, at fringilla risus interdum a. Nulla facilisi. Nunc porta rutrum tincidunt. Sed tempor malesuada iaculis.

Denunciar posicionamiento fraudulento buscadores Google

2009-06-17T17:28:00.005+02:00

¿Alguna vez has hecho una búsqueda en Google y al acceder a uno de los enlaces resulta que no tiene nada que ver con el resultado mostrado?

Podríamos pensar que nuevamente que a Google se le ha ido la "pinza", pero si investigamos un poco probablemente descubramos un posicionamiento fraudulento. Por posicionamiento fraudulento se entiende por paginas que se han posicionado utilizando técnicas SEO prohibidas. Viene a ser spam aplicado al SEO.

La técnica fraudulenta más habitual es generar una gran cantidad de contenido, generalmente frases de interés, que utilizan una o varias palabras clave repetidas y escritas de distinta forma y que mediante javascript o CSS se ocultan; la pagina final no tiene ninguna relación con el resultado de búsqueda.

Para estos casos donde Google no detecta las técnicas prohibidas existe un formulario de denuncia donde Google analiza los casos reportados y los banea en caso necesario.

Comprobar y validar formularios con jQuery

2009-06-09T11:05:00.013+02:00

Para validar formularios vía javascript existen muchas opciones, pero jQuery combinado con el plugin form validate es una de las soluciones más completas y fáciles de utilizar.

Form validate permite comprobar desde direcciones de e-mail hasta tarjetas de crédito. Solo hay que subir el js de jQuery y del form validate a tu sitio web y enlazarlos desde el head. Además tiene la ventaja que muestra los mensajes de error en muchos idiomas.

Instrucciones para utilizar el plugin jquery form validate

Vincular los js de jquery (primero) y del validador y añadir un script o un js mas con la personalización.

Ejemplo con los js en la raíz:
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-validate/jquery.validate.js"></script>
<script type="text/javascript" src="formulario.js"></script>
</head>

Para que se valide cada campo lo mas sencillo es añadir determinadas clases en cada input según lo que queramos validar.

Ejemplo para un input de e-mail:

<input type="text" name="email" id="email" class="required email" />

Algunas de las clases y su función:

required = campo obligatorio
email = email correcto
url = dirección url
number = número entero
numberDE = número con o sin decimales
date = formato fecha (31/12/2009)

Mensajes de error
Los mensajes de error se muestran por defecto a continuación del campo erróneo. Aparecen dentro de la etiqueta <label> pero se puede cambiar desde jquery.validate.js buscando "errorElement: label" y remplazando "label" por elemento deseado.
Tanto el nuevo elemento mostrado como el input que da el error se les añade la clase " error ". Deberemos ajustar su visualización con CSS.

Mensajes e idioma
Los mensajes ya están predefinidos según el error y se muestran por defecto en ingles. El plugin incluye múltiples idiomas en unos js que están dentro de la carpeta"localization". Para utilizar otro idioma enlazar el js después del plugin o copiar y pegar el texto en el js con la personalización.

Personalización de la validación
- Longitud de caracteres
  Para controlar el número de caracteres de un input añadir este código en el js personalizado:
  
  $(document).ready(function(){
  $("#formulario").validate({ /*sustituir "formulario" por el id de vuestro formulario*/
  rules: {
  nombre: { /*id del campo que se aplica la regla*/
  required: true,
  minlength: 3 /*caracteres mínimos*/
  }
  }
  });
  });
  
  Este ejemplo exije al menos 3 caracteres como mínimo en el input con el id "nombre".
  Para limitar la longitud máxima sustituir "minlength" por "maxlength".
  Para un rango mínimo y máximo pon "rangelength" Ejemplo: rangelength: [5, 10]
- Valores numéricos
  Funciona igual que el ejemplo anterior, solo debemos sustituir minlength por el método deseado.
  
  *Valor mínimo: min. Ej: min: 16
  *Valor máximo: max
  *Rango valores: range. Ej: range: [5, 10]
- Coincidencia entre campos
  Esto es útil para los campos de confirmación de contraseña o e-mail. Utilizaremos equalTo del mismo modo que los ejemplo anteriores y le indicaremos el id del campo con el que debe coincidir.
  
  $(document).ready(function(){
  $("#formulario").validate({ /*sustituir "formulario" por el id de vuestro formulario*/
  rules: {
  password2: { /*id del campo que se aplica la regla*/
  equalTo: "#password" /*id del input con el que debe coincidir*/
  }
  }
  });
  });
- Tipo archivos admitidos
  Con "accept" controlamos los archivos que se van a subir al servidor.
  
  $(document).ready(function(){
  $("#formulario").validate({ /*sustituir "formulario" por el id de vuestro formulario*/
  rules: {
  archivo: { /*id del campo que se aplica la regla*/
  accept: "jpg|gif" /*extensiones aceptadas*/
  }
  }
  });
  });

Para terminar un ejemplo con varias reglas juntas:

$(document).ready(function(){
$("#formulario").validate({
rules: {
nombre: {
minlength: 3,
maxlength: 10
},
repetir_clave: {
equalTo: "#clave"
},
imagen: {
accept: "jpg|gif|png"
}
}
});
});

Toda la documentación sobre el plugin en: http://docs.jquery.com/Plugins/Validation

Fuentes personalizadas con Javascript y Cufon

2009-06-03T11:37:00.011+02:00

¿Quieres utilizar tipografías especiales en tu blog o web y que todos los usuarios las puedan ver? pues es posible hacerlo.

Desde hace tiempo existen varias soluciones que mediante Flash, php o Javascript para incrustar las fuentes en el HTML permitiendo a cualquier usuario ver esa tipografía independientemente de que no la tenga.

Entre las muchas opciones he probado cufon, una muy buena opción que utiliza javascript, es muy fiable y responde a los estilos CSS.

Manual rápido de Cufon

Creamos un .js de la fuente, esto lo hacemos desde este formulario.
Desde este formulario buscamos la fuente (con extensión ttf) , configuramos algunos parámetros y marcamos los términos legales.
Nos aparecerá un archivo para descargar.
¡OJO! no se pueden cargar fuentes desde la carpeta "FONTS" de windows, copialas y pégalas en el escritorio.
Descargamos el código fuente de Cufon.
¡OJO! probablemente Firefox te abra el archivo en vez de descargarlo, bájalo con Explorer por ejemplo o haz un "guardar como".
Creamos un html donde enlacemos desde el <head> ambos .js y añadimos la regla que hace la sustitución:

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="fuente_personalizada.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>

Con "Cufon.replace('h1')" le decimos que añada la fuente en todas las etiquetas h1.

Otras configuraciones

Varias fuentes simultaneas
Si queremos utilizar varias tipografías hay que crear un .js de cada una (paso 1), enlazarlo desde el <head> e indicar las etiquetas que utilizan las fuentes:

<script src="script/cufon-yui.js" type="text/javascript"></script>
<script src="magic-font.js" type="text/javascript"></script>
<script src="BladeII.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'magic-font'});
Cufon.replace('p', { fontFamily: 'BladeII'});
</script>

De este modo indicamos que los h1 serán sustituidos con la fuente "magic-font" y los p con "BladeII".

Degradados

También tenemos opción de crear degradados muy conseguidos:

Cufon.replace('h1', {color: '-linear-gradient(white, black)'});

Podemos utilizar cualquier color, incluso conseguir degradados de varios colores:

Cufon.replace('h1', {color: '-linear-gradient(red, green, yellow)'});

Efecto hover
Si queremos añadir un enlace y que funcione el hover:

Cufon.replace('h1', {hover: true});

Con css podemos asignar las propiedades a cada estado.

Para terminar un ejemplo que incluye todos estos parámetros simultáneamente:

Cufon.replace('h1', { fontFamily: 'BladeII', color: '-linear-gradient(white, black)', hover: true});
Cufon.replace('p', { fontFamily: 'Magic-font', color: '-linear-gradient(red, yellow, black)' });

Recalcar que si utilizamos un degradado al mismo tiempo que un hover, el hover no funcionará correctamente.

Por último para evitar problemas en explorer podemos añadir este código justo antes de </body>:

<script type="text/javascript"> Cufon.now(); </script>

Podéis ver toda la información en http://wiki.github.com/sorccu/cufon/about (en ingles).

Como saber mi PageRank en Google

2009-05-28T11:31:00.005+02:00

El pagerank es un valor que va de 0 a 10 y afecta significativamente a tu posicionamiento en Google. Es especialmente decisivo cuando una palabra clave tiene muchos resultados.

¿que define mi PageRank?

Google asigna el pagerank en función del número de enlaces que apuntan a esa pagina, teniendo en cuenta a su vez el pagerank de las webs que lo enlazan. Cuantos más enlaces entrantes y más alto sea el pagerank de quien nos enlaza mejor.

¿Como puedo averiguar mi PageRank en Google?

Para averiguar tu pagerank o el de otros sitios puedes utilizar paginas web que ofrecen este servicio, instalarte la barra de Google(incorpora esta función) o instalarte PaRaMeter, un programa gratuito que nos permite hacer una seguimiento periódico del pagerank de nuestros sitios con un solo click.

Corregir errores incompatibilidad entre explorer 7 y 8

2009-05-22T11:43:00.006+02:00

Hace unas pocas semanas Microsoft lanzó de forma oficial el nuevo navegador Internet Explorer 8. Un nuevo dolor de cabeza para diseñadores y programadores web, ya que explorer 8 sigue sin cumplir los standares y además se comporta de forma distinta respecto a sus anteriores versiones.

Es posible que detectéis que vuestro site no funcione bien con esta nueva versión y sin embargo si lo hacia con la 7. Si este es tu caso, entonces, estas de suerte. Microsoft a creado una meta-etiqueta para explorer 8 que lo hace funcionar como en internet explorer 7.

Solo tienes que añadir este código dentro del <head> de cada pagina:

<meta equiv="X-UA-Compatible" content="IE=EmulateIE7">

Herramientas para averiguar posicionamiento en Google

2009-05-13T10:18:00.006+02:00

Hoy he tenido que realizar un informe sobre el posicionamiento del site de una empresa en Google con determinadas palabras clave. Una tarea que puede ser un auténtico trabajo de chinos sino dicha web no esta bien posicionada. Afortunadamente hace tiempo encontré unas herramientas SEO que agilizan el trabajo.

Free Monitor for Google
Análisis de posicionamiento en Google

Este software hace búsquedas en Google de las keywords (palabras clave) y te devuelve la posición de tu sitio web y los primeros resultados.
Puedes añadir una lista de palabras clave y configurar la profundidad del rastreo (por defecto los 10 primeros resultados).
El programa almacena las URL y sus respectivas palabras clave, permitiendo hacer seguimientos periódicos con un solo clic.

Su funcionamiento es muy intuitivo; para comenzar a utilizarlo solo debemos pulsar el signo "+" y escribir una URL, seguidamente nos pedirá las palabras clave, las añadimos una a una con el botón "Add" y cuando terminamos pulsamos "Ok". Si queremos busquedas mas profundas vamos a Options > Preferences y en el selector "Check first" seleccionamos hasta que posición queremos que la busque(cuanto más alto es el valor más tardará). Finalmente solo queda clicar en la lupa y esperar los resultados.

Puedes descargártelo gratis en:
http://www.cleverstat.com/en/google-monitor-query.htm

Varios cortos de animación 3D

2009-03-16T01:29:00.007+01:00

Robots luchadores

Futuro apocalíptico
Interesante corto de ESMA (Escuela superior de Arte Francesa).
Fuente: http://kazeweb.fr

Corto 3D sobre mensajeros futuristas

Web personal del diseñador 3D José María Andrés Martín
Si visitáis su web, en la pestaña "Animations" podréis ver algunas animaciones para publicidad.

Oktapodi: Pulpos escurridizos
Animación muy buena realizada por alumnos de la escuela Francesa Gobelins.
Fuente: http://motionographer.com/2009/02/04/oktapodi-back-up/

¿Me puedo ganar la vida con un Blog?

2009-03-09T17:28:00.011+01:00

Desde hace unos años a este tiempo el boom de los blog y demás ha hecho que la sociedad se lance a la red: tiendas on-line, blogs, catálogos, foros... Y parte de esta sociedad esperaba recibir ingresos de su aventura en la red.

Son muchos los que me han hablado y pedido presupuesto sobre sus ideas fantásticas de portales, ideas que ellos creen que son novedosas, fáciles de crear y que les darán miles de euros de beneficios. Pero la realidad es otra, amigos míos.

La primera decepción para el pequeño emprendedor (sin experiencia en internet), es descubrir que el desarrollo de su proyecto cuesta casi tanto como montar un negocio en alguna Avenida principal. Esto normalmente ya hace huir a la mayoría de pequeños empresarios. Si alguno se aventura a dar el paso, descubrirá que la red es tanto o más competitiva que la vida real.

Y esta es la realidad tanto para empresarios como para bloggers. Las historias que habréis oído por ahí de bloggers que se hicieron ricos de la noche a la mañana, son casos excepcionales; mentes prodigiosas, creativas e ingeniosas que supieron llenarse los bolsillos de billetes. Para el resto de mortales hacerse rico con cualquier Web es pura fantasía.

Pero supongamos que asumes que no te harás rico, ¿sería posible vivir de un blog?.
Quizás, pero... lo tienes difícil, muy difícil.

Para ganar dinero con un blog necesitas básicamente 3 cosas:

Publicidad
Los ingresos se pueden conseguir fácilmente con publicidad. La publicidad te la puede suministrar por ejemplo Adsense de Google, aunque existen otros sistemas, pero Adsense es sencillo, rentable y de confianza. Solo tienes que registrarte, dar unos datos y ellos te proporcionan el código que añadido a tu web generará la publicidad. Google te pagará por cada clic en un anuncio, ¿cuanto? eso depende de los anuncios , pero por poner un ejemplo esa cifra puede ser unos 0,10 $.
Contenidos
Necesitas contenidos originales que sean de interés, publicados de forma regular y mejor si son en cantidad. Pueden ser de interés general o especializado, pero tiene que interesar a mucha gente, y esto es un problema. Generar contenidos no está al alcance de cualquiera. Por ejemplo, si tienes un blog de coches tendrás que estar a la última en automoción, disponer de algunas fotografías y detalles de últimos modelos, salones, noticias... ,¡ y no vale con copiarlo de otra Web!. Además de eso tienes que tener cierta capacidad de redacción y conceptos básicos de maquetación. Si no tienes nada de eso tendrás que comprar la información o conseguirla, y eso vale pasta y tiempo. Lo importante es que tengas algo que ofrecer al mundo que nadie o muy pocos puedan ofrecer. Por ejemplo hablar de tu vida no tendrá ningún interés a menos que sea muy intensa o le des un enfoque peculiar y llamativo. Ten en cuenta que en Internet ya está casi todo inventado.
Visitas
Si generar contenidos de interés es complicado, obtener visitas es más complicado. Si tienes contenidos abundantes y de calidad las visitas llegarán solas. Pero para obtenerlas es imprescindible que los contenidos estén correctamente indexados en los buscadores, y aun así, dependiendo de la competencia necesitarás otras estrategias de captación, como por ejemplo la optimización para buscadores, la promoción en otros blogs, campañas de publicidad... lo que se te ocurra.
Este es el aspecto más critico e imprescindible; en la red existen miles de sitios que pese a ser de gran interés no tienen visitas, el tuyo podría ser uno de ellos.

Las cifras
Si consultas en la red sobre lo que ganan bloggers con la publicidad de su Web pocos hablarán de sus ingresos y algunos hablarán de números de 3 y 4 cifras. Pero por mi experiencia os puedo decir que muchos exagerán, otros engañan a sus anunciantes y solo unos pocos alcanzan esas cifras.
No nos podemos fiar ni dejar embaucar por otros, y mucho menos por aquellos que nos ofrecen fabulosas técnicas para hacerse millonario en internet. Internet funciona como el mundo real, y el éxito es solo para privilegiados y grandes empresas. Cada día que pasa aumenta más y más el número de blogs, foros y sitios especializados, provocando que disminuyan tus beneficios. Por esa razón tendrás que evolucionar de forma constante si no quieres desaparecer.

Para hacernos una idea de cuales pueden llegar a ser tus ingresos con un sistema como el de Adsense, analizaremos a la competencia directa. Para hacerlo tenemos en la red muchas herramientas a nuestra disposición. Os voy a enseñar paso por paso como hacerlo:

Supongamos que estamos pensando en montar un blog de viajes y turismo rural. Pues lo primero que debes hacer es buscar en Google "turismo rural", "blog viajes", etc. Visita los primeros resultados, contrasta, averigua en foros y quédate con almenos 3 o 4 sitios que estén ofreciendo el volumen y calidad de contenidos similares a lo que tu podrías llegar a ofrecer.
Con esos sitios seleccionados, nos vamos a alexa.com y contrastaremos resultados. Alexa nos ofrecerá datos aproximados de las visitas recibidas en los últimos meses.

En mi caso he obtenido estos resultados:

Si en tu caso no aparecen resultados es porque ninguno de los 3 sitios seleccionados están entre los 100.000 más vistos, pero prueba a cambiar una de las webs por otra cualquiera más popular, eso hará que se muestren el resultado de las otras.
Los resultados obtenidos son visitas diarias en millones. En el ejemplo vemos que una destaca claramente con una media de 2000 visitas diarias. Una segunda web debe estar sobre las 200 y la tercera no se muestra, por lo que debe tener menos de 100 visitas.
Tomaremos como referencia la primera y la segunda.
Cogemos la media de visitas y las multiplicamos por los 30 días de un mes.
2000 visitas por 30 días nos da 60.000 visitas mensuales para la primera y 6.000 para la segunda.
El porcentaje de clics varia mucho en función de la colocación de los anuncios y del tipo de anuncio, pero normalmente suele estar en 2 y 3% de clics cada 100 visitantes. Eso quiere decir que de cada 100 personas 3 encuentran interesante un anuncio y hacen clic en el.
Le pondremos una media de 0,10 $ a cada clic.

Calculemos:

Primera Web
3% de 60.000 = 1800
1800 x 0,10 = 180 $

Segunda Web
3% de 6.000 = 180
180 x 0,10 = 18 $
Los resultados son 180 $ mensuales de beneficio para la web de 60.000 visitas y de 18 $ para la de 6.000.

Con estos cálculos ya te podrás hacer una idea de lo que podrías llegar a ganar, y en este caso concreto pasarías hambre.
Pero existen otras posibilidades como el CPV (cobras si el usuario realiza una compra) o el CPM (cada 1.000 impresiones), también puedes negociar directamente con los anunciantes.

Para terminar os pongo unas referencias sobre temas fiscales y legales que hay que tener en cuenta:

http://www.webtaller.com/maletin/articulos/trece-delitos-que-todo-bloger-debe-conocer.php

http://cangurorico.com/2006/02/como-trabajar-legalmente-con-adsense.html

Centrado horizontal de una imagen con CSS

2009-02-22T23:08:00.003+01:00

Hoy me a surgido un problema a la hora centrar una imagen con CSS.

Centrar horizontalmente un elemento respecto a otro es tan sencillo como esto:

#elemento{
margin:auto;
}

Y hasta hoy creía que para central una imagen era suficiente con esto, pero no. Las imágenes no son elementos de bloque y al parecer el centrado automático es solo para elementos de bloque.

La solución:

#elemento{
margin:auto;
display:block;
}

Crear loop de imágenes y texto en movimiento con jQuery y CSS

2009-02-19T17:26:00.032+01:00

Un loop animado de contenidos al estilo "slide show" puede ser muy útil para presentar noticias, imágenes o por ejemplo en mi caso, anuncios clasificados.

Conseguir un efecto slide show es relativamente fácil de hacer gracias a jQuery. Unas pocas lineas de código y ya lo tienes funcionando, aunque yo he tardado varias horas para conseguir que funcionase como quería.

Aquí lo podéis ver en funcionamiento:

Ejemplo de slide
Camara digital 5Mpx

En mi caso he hecho un listado de imágenes acompañadas de un texto. Con CSS he convertido la lista en un bloque horizontal y mediante un div con "overflow:hidden" he dejado visible solo la parte que interesa.
De la animación a un lado y otro se encarga jQuery. Y el loop lo conseguimos con la función "setTimeout" autoejecutadola a si misma cada tiempo indicado. Inicialmente utilizé la función "setInterval" pero por algún motivo sólo lee los condicionales la primera vez y después se los salta.

Los detalles para crear el loop:

Añade la librería de jQuery a tu sitio y enlaza la desde el HEAD de esta manera:
<script src="jquery.js" type="text/javascript"></script>
A continuación añade el siguiente código javascript (importante que la librería jQuery este por encima para que el javascript puede hacer uso de ella):
<script type="text/javascript">
$(document).ready(function(){

var ancho = 160; //tamaño del visor
var cantidad = 3; //cantidad de visualizaciones
var duracion_movimiento = 1000; //tiempo en milisengundos que tarda en desplazarse
var duracion_detenido = 1500; //tiempo entre visualizaciones
var elemento = '#animacion' // ID al que aplicamos el movimiento

var total = ancho*cantidad-ancho;
var retrocediendo = false;
mover = function(){
var posicion = $(elemento).css('left');
var valor = parseInt(posicion,10);
var absoluto = Math.abs(valor);
if(retrocediendo){
if(absoluto <= 0){
retrocediendo = false;
}
else{
$(elemento).animate({left:'+='+ancho+'px'},duracion_movimiento);
}
}
else{
if(absoluto>= total){
retrocediendo = true;
}
else{
$(elemento).animate({left:'-='+ancho+'px'},duracion_movimiento);
}
}
setTimeout("mover()",duracion_detenido);
};
setTimeout("mover()",duracion_detenido);
});
</script>
Ahora sólo queda añadir el HTML y los estilos:
<div style="height:130px;width:140px;display:block;overflow:hidden;border:1px solid grey;position:relative;">

<ul id="animacion" style="margin:0; padding:0; position:absolute; top:0; left:0; width:480px; height:150px;">

<li style="list-style:none; width:140px; display:block; padding:10px; float:left;"><em style="height:90px;width:140px;display:block;"><img src="imagen1.jpg" /></em><p>Camara digital 7Mpx</p></li>

<li style="list-style:none; width:140px; display:block; padding:10px; float:left;"><em style="height:90px;width:140px;display:block;"><img src="imagen2.jpg" /></em><p>Camara digital 5Mpx</p></li>

<li style="list-style:none; width:140px; display:block; padding:10px; float:left;"><em style="height:90px;width:140px;display:block;"><img src="imagen3.jpg" /></em><p>Nokia</p></li>

</ul>

</div>

Sustituye las imágenes por las tuyas o por textos. He puesto los estilos en linea, pero mejor hacerlo en una hoja de estilos.

Si quieres configurar las velocidades, tiempos, tamaños y demás puedes hacerlo variando los valores de las 4 primeras lineas del código javascript. Justo al lado están los comentarios explicando para que sirven.

Se aceptan preguntas, criticas y sugerencias.

Eliminar spam en los comentarios de wordpress II

2009-02-11T10:43:00.007+01:00

En el anterior post os conté un truquillo para evitar el spam en los comentarios de wordpress generado de manera automática. El truquillo consistía en modificar el name (o el id en su defecto) de los campos del formulario para que los comentarios generados y enviados de forma automática diesen un error al no coincidir el nombre de los campos.

Pero al parecer esta solución solo funcionó unas horas, el tiempo que tardó nuestro "entrañable spammer" en modificar su plantilla de formulario.

Después de darle vueltas, aplique 3 nuevos frentes de ataque:

Cambiar el nombre del archivo procesa los comentarios. Fue efectivo durante unas horas.
Eliminar las trackbacks (origen de parte del spam). Prescindir de los trackbacks supone la perdida de una funcionalidad interesante de wordpress, pero en mi caso me da más problemas que beneficios.
La solución definitiva: Generar un código en cada formulario que cambia una vez por minuto. Si no coincide con el código del servidor o si se supera un tiempo determinado el formulario da un error.

El resultado final se puede ver en el gráfico:

De un pico de 1.269 spam interceptados por Akismet he pasado a uno o dos al día.

Para crear el sistema que genera el código basta con modificar 2 archivos:
wp-comments-post.php
/wp-content/themes/nombre_tema/comments.php

Abrimos comments.php y añadimos lo siguiente dentro de:
<?php $codigo = date("Hi")*10; ?>
<input type="hidden" name="codigo_servidor" value="<?php echo $codigo; ?>" />

La primera linea genera una variable llamada "codigo" con el valor de la hora y minuto del servidor multiplicada por 10. La segunda linea crea un campo oculto con el valor de la variable "codigo" y con el nombre de "codigo_servidor".

El cliente recibirá en su navegador algo así como:
<input type="hidden" name="codigo_servidor" value="12000" />
12000 corresponde a las 12:00 multiplicado por 10. Podemos personalizar el código generado cambiando el 10 por otro numero u otras operaciones más complejas.
Ahora hay que crear la función en wp-comments-post.php.

//control de validacion del codigo enviado en el formulario
$codigo_recibido = trim($_POST['codigo_servidor']);
$codigo_control = date("Hi")*10;

if( $codigo_recibido > $codigo_control -150 && $codigo_recibido < $codigo_control +150 ){
$comment_author = trim(strip_tags($_POST['author']));
$comment_author_email = trim($_POST['email']);
$comment_author_url = trim($_POST['URL']);
$comment_content = trim($_POST['comment']);
};

La variable "codigo_recibido" recoge el valor del campo oculto que hemos creado para el formulario y "codigo_control" contiene un valor estraido de la hora, minuto y multiplicado por 10 (misma operación que la de comments.php).

Después creamos una función que encierra las variables ya existentes (author, email, etc ) y que se encarga de comparar que el código que se envió en el formulario de comentarios sea igual que el del servidor.
Como el código se genera con la hora y minuto le añadimos un margen de 15 minutos para escribir el comentario desde que se recibió la página. Podemos aumentar el tiempo aumentando el valor. En mi caso 150 equivale a 15 minutos porque multiplicamos por 10. Si por ejemplo hubiésemos multiplicado por 2 pondríamos 30 para los 15 minutos.

El condicional no permite que se procesen las variables de su interior si el código del servidor y del formulario no son iguales y nos envía a la página de error del formulario. Esto es lo que les sucederá a los spammers que envíen comentarios automáticos ya que su plantilla no tendrá el código oculto, y en el caso de que lo añadiesen tampoco les serviría porque cambia continuamente.

Si se quiere complicar más el tema se puede añadir la fecha y otras operaciones, pero dudo mucho de que un spammer se dedique a estudiar detenidamente como funciona el sistema, averigüe de donde se obtiene el código y programe una plantilla que cree los códigos de forma sincronizada con la hora de tu servidor... aunque quién sabe.

Este apaño es de cosecha propia y lo he realizado con mis limitados conocimientos de programación. Existen otras maneras mejores de realizar esto, pero yo no sabría hacerla.

Espero que os sirva de ayuda.

Bloquear el spam en los comentarios de wordpress

2009-01-30T10:35:00.009+01:00

Desde hace un par de meses tengo un videoblog creado con wordpress. Y desde hace un mes tengo un grave problema de spam.

La verdad es que el blog apenas tiene 2 o 3 visitas diarias, pero he tenido la mala suerte que algún bot de spam me ha fichado. He llegado a recibir 1200 spam en un solo dia. Básicamente son comentarios en Ingles que enlazan con Webs donde se anuncian casinos y demás basura limpia bolsillos.

Al principio no tenía ninguna protección contra el spam y recibía todos los comentarios para moderar en mi correo. El primer día cuando vi más de 50 mensajes nuevos en la bandeja de entrada creí que de pronto mi blog había tenido un éxito terrible. Que gracia...

El segundo día fueron casi 200 mensajes, y viendo que el problema no iba a solucionarse solo, decidí activar el plugin anti-spam que incorpora wordpress: Akismet.
Desde ese día ningún mensaje de spam se me ha colado, pero hay algo que me preocupa: los recursos del servidor que mal gasta el envio del spam.

Buscando por la red encontré soluciones como un plugin de CAPTCHA o javascript. El plugin CAPTCHA no me convencía, así que opté por utilizar javascript.
Creé una función que oculta el botón de enviar mediante la librería jQuery y no lo muestra hasta que no se introduce la respuesta a una pregunta. Pero al parecer los bots de spam no interpretan ni el javascript ni el CSS. Así que no me sirvió de nada.

Otra idea que se me ocurrió es que probablemente los bots localizan los campos del formulario por su ID, ya que en todos los blogs de wordpress es el mismo... a no ser que... ¡¡los cambies!!.

Sabía que esto podía cortar por lo sano el spam, pero no tenía ni idea de como ni donde se manejan las variables que almacenan el contenido de los comentarios. Pero finalmente el señor google me dio su santa respuesta.

Los cambios son sencillos, se trata de cambiar el nombre que identifica el input de uno de los campos obligatorios y después poner el mismo nombre en la variable que lo recibe.

Vamos a ver como hacerlo:

Abrimos el archivo comments.php del tema que estas utilizando. Ej. tusitio.com/wp-content/themes/default/comments.php. Este es el archivo que genera el formulario.
Localizamos el siguiente texto:
<input name="email" type="text" value="<?php echo $comment_author_email; ?>"/>
(esta en por el final).
Sustituye "email" por otro nombre, por ej. "correo".
Guardamos y ahora abrimos el archivo wp-comments-post.php. que se encuentra en la raiz. Ej. tusitio.com/wp-comments-post.php
Localizamos:
$comment_author_email = trim($_POST['email']);
(hacia la mitad del documento).
Sustituye 'email' por el nombre que has puesto, en mi caso 'correo'.
Guardamos, lo subimos y listo.

Para más seguridad también se puede hacer con los otros inputs.

Desde que hice este cambio Akismet ya no ha vuelto a detectar spam. Espero que duré.

Comenten cualquier duda o crítica.

Revisión del 31/02/2009:
Un día después el truco del almendruco ya a perdido su efectividad. Malditos... seguiré investigando.

Revisión del 31/02/2009:
Estoy probando un nuevo sistema. En el próximo post daré mas detalles sobre el resultado.

Eliminando la barra de Blogger

2009-01-28T16:52:00.006+01:00

Esta es la primera vez que utilizó un sistema tipo Blogger para crear una Web. Tiene la ventaja de que tienes hosting gratuito y siempre esta operativo. La desventaja es que hay límites en la personalización del sitio tanto en diseño como programación. En un principio hubiese descartado Blogger para crear mi blog, pero el hecho de que ahora permitan utilizar la publicidad de Adsense, ha hecho que me haya "atrevido" a publicar mi blog en Blogger.

Pero nada más empezar a personalizar la plantilla ya surgen los primeros inconvenientes: ¿como quitar la barra superior de Blogger?.

Esta barra se añade automaticamente con un iframe y no se puede personalizar. Buscando por ahí he encontrado un par de soluciones basadas en ocultar el iframe mediante CSS. La primera usando "visibility:hidden" pero tiene el inconveniente que deja un espacio en el lugar de la barra. La segunda con la combinación de varías propiedades entre ellas "visibility:hidden" y "display:none". La segunda era más apropiada aunque se puede depurar y reducir a solo "display:none".
Vamos a ver como hacerlo (lo explicaré a modo para todos los públicos):

Abre el editor HTML (dentro de la pestaña Diseño).
Busca por el final la línea que pone: ]]></b:skin>
Justo encima añadimos el siguiente código CSS:

iframe#navbar-iframe{
display:none;
}

Este código ocultará el iframe que contiene la barra de Blogger.

Pero esto me plantea una duda: ¿Esto esta permitido?. La verdad no losé. Pero son muchos los blogs sin barra, así que... será que si... ¿o no?.

sin programar

Tipografias por comunes en Windows, Mac OS, Ubuntu y smartphones

Crear gráficos con CANVAS III - Círculos y arcos

Crear gráficos con CANVAS - II

Crear gráficos con CANVAS - I

Empezar a dibujar

Dibujar cuadrados y rectángulos

Formatos de vídeo HTML5 soportados por los navegadores

Estructura básica de HTML5

Problema anchura input button en IE6 y 7

Detectar navegador con javascript y jQuery

Cuenta atrás en PHP

Tipografías originales en tu web usando font-face

Estadísticas de google analytics en nuestros e-mailings

Unificar las URL con o sin www para optimizar resultados SEO

Imágenes PNG con transparencia alpha en Internet Explorer 6

Solución problema interlineado en Outlook 2007

Cambiar icono de blogger en el navegador

Tipografías libres para tu web con Google Fonts

Cargar CSS distintos según versión de Internet Explorer

Forzar actualización hoja de estilos CSS del usuario

Cargar CSS distintos según dispositivo

Quitar bordes redondeados de los input en iphone

Averiguar ancho y alto del navegador con jQuery

Las teclas rápidas de windows más útiles

Impedir entrada de virus desde pendrive/USB

Sombreados con CSS para todos los navegadores

Cerrar y redireccionar pagina padre con javascript

Estadisticas uso dispositivos moviles Web

Guia rápida accesibilidad A/AA/AAA

Solución problema mostrar archivos ocultos

Botones input "submit" con rollover

Guia de meta etiquetas (metatags)

Abrir nueva ventana con javascript

Reglas de maquetación de e-mails HTML

Transparencias con CSS compatibles con todos los navegadores

Denunciar posicionamiento fraudulento buscadores Google

Comprobar y validar formularios con jQuery

Instrucciones para utilizar el plugin jquery form validate

Fuentes personalizadas con Javascript y Cufon

Manual rápido de Cufon

Otras configuraciones

Como saber mi PageRank en Google

¿que define mi PageRank?

¿Como puedo averiguar mi PageRank en Google?

Corregir errores incompatibilidad entre explorer 7 y 8

Herramientas para averiguar posicionamiento en Google

Free Monitor for GoogleAnálisis de posicionamiento en Google

Varios cortos de animación 3D

¿Me puedo ganar la vida con un Blog?

Centrado horizontal de una imagen con CSS

Crear loop de imágenes y texto en movimiento con jQuery y CSS

Eliminar spam en los comentarios de wordpress II

Bloquear el spam en los comentarios de wordpress

Eliminando la barra de Blogger

Free Monitor for Google
Análisis de posicionamiento en Google