jueves, 24 de noviembre de 2011

Voldemort (el innombrable) o Bugs ie7

Primero fué ie6 y ahora que oficialmente dejamos de maquetar en él  .... ie7 se nos queda obsoleto!

La mayoría de problemas que me he encontrado con ie7 son con javascript. Modernos frameworks como jQuery deben ser adaptados con pinzas para que funcionen en la versión 7 de este navegador maldito!

Aquí os dejo los bugs más freqüentes con los que me suelo encontrar y su resolución!

::  ie7 no interpreta bien los paddings de los buttons y los hace más grande.
Solución: Añadir un overflow:visible.
Ejemplo:  input[type="submit"] { overflow:visible;}

::  ie7 no funciona bien con los z-index.
Solución: Después de pelearme con mi varita mágica, derroté a Voldemort añadiendo z-index negativos, y evitando las position:relative, position:absolute o position:fixed.
Ejemplo:  .node-teaser {  position:static!important; z-index:-1!important;}

:: ie7 no funciona bien con position:absolute.
Solución: Siempre debe tener definidas las coordenadas top, y left aunque sean 0.
Ejemplo: .newsletter { position:absolute; left:0; top:10px; }

:: ie7 no interpreta bien el text-indent en los input type="submit" o type="button".
Si quieres que desaparezca el texto interior, debemos añadir:
{ font-size: 0; line-height: 0; }

::  ie7 y javascript (jQuery)

I. No interpreta bien los comandos attr("style","display:none;"); y attr("style", "display:block;")
Solución: Substituirlos por .hide() y .show()


Actualizado!

miércoles, 23 de noviembre de 2011

jueves, 10 de noviembre de 2011

Maphilight

Los mapas interactivos se han puesto muy de moda.
Hoy en día cualquier cliente quiere un mapa interactivo, después de investigar varias formas de elaborar estos mapas encontré esta librería JQuery.

El Sr.David Lynch (no se si será el cineasta que en sus ratos libres programa) pone a nuestra disposición una manera muy rápida de hacer mapas, utilizando sólo la etiqueta <map> y <area>, sin necesidad de recortar imágenes!

Maphilight

Se puede configurar el color del área, que la selección se quede marcada o no ... etc.

Realmente esta librería nos ha hecho ahorrar mucho tiempo, pq. cada vez que tenía que programar un mapa por ej./ de España ... debía marcar las coordenadas de 55 províncias y además, recortar las imágenes de 55 províncias. Si además, queríamos diferenciar efectos, había que recortar otras 55 províncias en otro color... (ya tenemos 110 recortes) y se convertía en una tarea realmente pesadaaa.
De esta manera, nos ahorramos el trabajo de recortar!

Espero que os sirva de ayuda.

martes, 8 de noviembre de 2011

Captcha - Eres un humano o un robot? (se aceptan replicantes)

Vamos a explicar como adaptar un captcha.
Por un lado, utilizamos una librería que nos abastece de códigos captchas y por otro lado, vamos a explicar como insertarlo en nuestro formulario a validar (mediante AJAX).

Hace poco estuve buscando captchas para un proyecto y me dí cuenta que todo el mundo ponía a la disposición de los programadores código para generar captchas, pero no pude encontrar ninguna explicación sobre cómo realizar la implementación.

Se acabaron vuestras inquietudes, os ayudaré!


HTML:
<form action="" name="form0" method="post" >

<div>
<img src="/captcha.php" id="captcha" /><br/>
<!-- CHANGE TEXT LINK -->
<a href="#" onclick="document.getElementById('captcha').src='captcha.php?'+Math.random();" id="change-image">Recargar Captcha.</a>
<input type="text" name="captcha" id="captcha-form" />
</div>

<input type="button" value="Enviar" onclick="MM_validateForm('variable1','variable2');return document.MM_returnValue" />
</form>

PHP 1:
En la raíz del directorio debe añadirse el archivo: captcha.php
Podemos descargarlo en: captcha.php
Gentileza del programador José Rodríguez.

Hasta aquí muy sencillo, enviamos el formulario (post o get).

JAVASCRIPT:
<script type="text/javascript">

function MM_validateForm() { //v4.0

//Aquí validamos el formulario como queramos con JQuery.validate,  con Dreamweaver ... etc.
//Y llegamos al punto en que decimos: Si no hay errores llamamos a la función isCaptcha();

if (errors) { alert(''+errors); } else { isCaptcha(); }


}


En esta función hacemos una llamada Ajax a validacaptcha.php, pasándole el parámetro captcha.

function isCaptcha(){

var captcha=document.getElementById("captcha-form").value;
var validador="http://www.dominio.es/validacaptcha.php?captcha="+captcha;

var data = $.ajax({
url: validador,
async: false
}).responseText;

//ALERT width the white spaces!!!
data=data.trim();

//alert("data valor:"+data);
if (data=="true"){
document.form0.submit();
} else {
$("#result").remove();
$("#captcha-form").before("

El captcha es incorrecto!

");
$("#result").attr("style","background-color:#f46f6f;");
return false;
}

}
</script>



PHP 2:
Validacaptcha.php
Tamibén lo añadimos en la raíz del directorio debe añadirse el archivo.

<?php session_start(); ?>
<?php

/** Validate captcha */
if (!empty($_REQUEST['captcha'])) {

//echo "SES:".$_SESSION['captcha']."
";
//echo "REquest:".$_REQUEST['captcha']."
";

if (empty($_SESSION['captcha']) || trim(strtolower($_REQUEST['captcha'])) != $_SESSION['captcha']) { echo "false"; } else { echo "true"; }


unset($_SESSION['captcha']);

}?>


Todo este código se puede optimizar escribiendo llamadas JQuery etc... pero lo importante es quedarnos con el flujo de la llamada, para así entender la implementación.

Actualmente, existen librerias muy potentes para implementar un captcha como Recaptcha de Google, de esta manera la implementación es mucho más sencilla pero depende de un código externo y como siempre, si realizamos algún ejemplo manual aunque sólo sea uno en nuestra vida, entenderemos cómo funciona!

Espero que os sirva de ayuda.

jueves, 3 de noviembre de 2011

Console.log ... es un consuelo tenerte!

Herramienta básica para el programador web (tanto FrontEnd como BackEnd) "Firebug" Add-on de "Mozilla Firefox".

Firebug Wiki

Firebug adds a global variable named "console" to all web pages loaded in Firefox.
This object contains many methods that allow you to write to the Firebug console to expose information that is flowing through your scripts.