Me mudo

Este blog no recibirá ya más actualizaciones. Ve al nuevo blog enricflorit.com o averigua por qué me mudo.

jueves, 6 de septiembre de 2012

Porqué usar características que no son cross-browser

Últimamente hay mucho revuelo en el mundo del desarrollo web. Constantemente aparecen nuevas funciones en los navegadores, algunas quedan obsoletas por las nuevas especificaciones del HTML5, CSS3 y JavaScript. Lo cierto es que a veces puede ser un auténtico lío implementar determinadas cosas en un sitio web.
Pongo un ejemplo: el audio/vídeo nativo en todos los navegadores aún no termina de ser una realidad. Pongo otro: las fuentes CSS que son compatibles en IE no lo son en FF, Chrome y viceversa. Aún hay más: el método matchesSelector de JS requiere un mínimo de 4 prefijos para funcionar correctamente.
Podríamos seguir así indefinidamente... Pero a veces, puede ser bueno usar funciones nuevas que sabemos que no serán soportadas por todos los usuarios. Y sí, tengo razones para afirmar esto:
  • Exclusividad. Convence a tus usuarios de la mejor experiencia que obtendrán actualizando su navegador. Así lo hace gmail, por poner un ejemplo. Y ahora es muy fácil mandarlos a browsehappy para que descarguen un navegador más nuevo.
  • Estética y/o decoración. Border radius es una propiedad CSS soportada por el 79% de los usuarios web. El resto ve unos bonitos bordes de 90º. Pero en la mayoría de los casos, el uso de border-radius (y su uso con prefijos) se limita a razones estéticas. A los usuarios que no lo vean no les pasará nada por no ver del todo bien tu sitio.
  • Funcionalidades no imprescindibles. Sólo Chrome y Safari 6 soportan las notificaciones web. ¿Imprescindibles? No lo creo, son sustituíbles por un <div> que aparezca en una esquina de la página o por la función alert(). Pero evidentemente, queda mucho mejor si se ve de forma nativa en el navegador.
  • Fallbacks. Si pones un input type="search/email/number/date/url/range" (etc), los navegadores que no lo soporten mostrarán una caja de texto normal y corriente. Y como igualmente en el lado del servidor es prácticamente obligatorio comprobar los datos introducidos, no supone un problema.
    Otro ejemplo son los de los degradados en CSS. Definimos un color de fondo por si acaso, y luego creamos el degradado.
  • Alternativas (polyfills). Muchas veces, para hacer funcionar una determinada característica, función o API en nuestra web no tenemos más que ir a google, buscar un poco y descargar un script. Y la mayoría de estas veces, habremos tardado 2 minutos en poder avanzar en nuestra aplicación con garantías.
  • Soporte progresivo. Lo que hoy no está soportado por la mayoría, lo estará mañana. Un buen ejemplo es Internet Explorer 10: hace unos años era impensable que el navegador de Microsoft pudiera llegar a soportar ni la mitad de estándares web (aparte de los que ellos mismos introdujeron, claro).
Riesgos
Está muy bien usar nuevas funciones: aportan un aire de avance tecnológico a la web y una mejor experiencia para el usuario. Pero no todo son ventajas. Por ejemplo, una web con un diseño muy catastrófico en navegadores antiguos hará que los nuevos visitantes huyan más rápido. Un visitante que llega a tu web a través de una búsqueda quiere respuestas. Luego si acaso (y no siempre) ya se interesará por el resto del contenido de tu web.
Así que hay que tener en cuenta una cosa: siempre mostrar la información de manera adecuada, pese a que el diseño y/o los efectos "extra" no estén soportados en todas las plataformas.
Por último, una recomendación: HTML5 Please. Esta web tiene como lema "Utiliza lo nuevo y brillante responsablemente" (Use the new and shiny responsibly). Tiene muy buenos consejos y recomendaciones sobre qué es mejor usar (o no usar) en el campo de las últimísimas nuevas tecnologías web. No dejéis de visitarla: html5please.com.
Un saludo! ;-)

lunes, 3 de septiembre de 2012

Cómo crear paletas de colores en PHP

Hoy me he despertado con una idea en mente: crear un script que imprima marcas de agua (con un copyright, url de una web o similar) en las fotos que se vayan a mostrar en una web. Pero planteando el problema más detenidamente, nos encontramos con que:
  1. La imagen no siempre tendrá los mismos colores, por lo que el color del texto deberá variar,
  2. Puede que el texto tape algún detalle de la foto que no nos interese, así que deberíamos poder cambiar la posición del texto,
  3. Si el texto va a ser semitransparente, tal vez no sea necesario lo anterior.
Fijándome en el primer punto, me he decidido a buscar un poco por internet para encontrar una función que pudiera solucionar el problema del color.
He encontrado más que eso: una función que crea paletas de colores. Devuelve los valores hexadecimales de los colores predominantes por orden de importancia. Una maravilla salida de los foros de StackOverflow. Aquí tenéis el enlace. El código de la función es el siguiente:
function colorPalette($imageFile, $numColors, $granularity = 5) {
    $granularity = max(1, abs((int)$granularity)); 
    $colors = array(); 
    $size = @getimagesize($imageFile); 

    if( $size === false ){ 
        user_error("Unable to get image size data"); 
        return false; 
    }

    $img = @imagecreatefromstring(file_get_contents($imageFile));

    if( !$img ){ 
        user_error("Unable to open image file"); 
        return false; 
    } 

    for($x = 0; $x < $size[0]; $x += $granularity){ 
        for($y = 0; $y < $size[1]; $y += $granularity){ 
            $thisColor = imagecolorat($img, $x, $y); 
            $rgb = imagecolorsforindex($img, $thisColor); 

            $red = round(round(($rgb['red'] / 0x33)) * 0x33); 
            $green = round(round(($rgb['green'] / 0x33)) * 0x33); 
            $blue = round(round(($rgb['blue'] / 0x33)) * 0x33); 
            $thisRGB = sprintf('%02X%02X%02X', $red, $green, $blue); 

            if(array_key_exists($thisRGB, $colors)){ 
                $colors[$thisRGB]++; 
            }else{ 
                $colors[$thisRGB] = 1; 
            } 
        } 
    } 
    arsort($colors); 
    return array_slice(array_keys($colors), 0, $numColors); 
}
A este código se le pueden dar múltiples aplicaciones, a parte de servirme para el script de marcas de agua:
  • Poder crear un mosaico de imagenes (teniendo una buena base de datos).
  • Crear paletas de colores para sitios web.
  • Obtener los colores predominantes de una web, combinándolo con un script de captura de pantalla.
¿Qué otras aplicaciones se os ocurren para este tipo de scripts?

Descarga el ejemplo en Dropbox
Related Posts Plugin for WordPress, Blogger...