Este es rapidito y fácil, pero muchas veces cuando maquetas algo con columnas tienes el problemilla de los fondos… que no sabes el contenido que meterán en cada una de las columnas y resulta complicado que queden de la misma altura… pues bien, como de momento CSS3 está un poco lejano en este aspecto (algunos navegadores nos traerán problemas con ello), con un rápido jquery lo solucionamos, bueno bonito barato, aquí tenéis, tiene poco secreto pero es útil, os dejo el código:

$(document).ready(function() {
    var altMax = 0;
    ajustarAlturas(altMax, '.contenedor div');
});
function ajustarAlturas(altMax, elemento) {
    $(elemento).each(function(i) {
        var xL = $(this).height();
        if (xL > altMax) {
            altMax = xL;
        }
    });
    $(elemento).css('height', altMax);
}

HTML y CSS simplemente para resaltar las columnas y ver que está correcto:

<div class="contenedor">
    <div class="ajustable">lorem ipsum lorem lorem</div>
    <div class="ajustable">lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem</div>
    <div class="ajustable">lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem</div>
</div>

.contenedor{
    position:relative;
    overflow:hidden;
    border:1px solid #DDD;
    background-color:#EFEFEF;
}
.ajustable{
    position:Relative;
    float:left;
    padding:1%;
    margin:1%;
    width:29.3%;
    background-color:#FAFAFA;
    font-size:13px;
}

Podéis ver el ejemplo funcionando aquí.

Un saludo, espero que vayamos subiendo más experimientos :-)

©2012 Joan Ballester. All Rights Reserved.

Hoy  se trata de geolocalización mediante el Api de Google Maps (con sensor true).

Esta sí que no tiene secreto ninguno, como veréis no es más que activar el sensor (true) y un pequeño método de unas líneas.

var map;
function initialize() {
    var myOptions = {
        zoom: 6,
        center: new google.maps.LatLng(38.977029166667,1.5129795833333),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('mapa'), myOptions);
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var posicion = new google.maps.LatLng(position.coords.latitude,
                position.coords.longitude);
            map.setCenter(posicion);
            var marker = new google.maps.Marker({
                position: posicion,
                map: map,
                icon: "http://negociosenibiza.com/web_img/red.png"
            });
        }, function() { handleNoGeolocation(true); });
    } else {
        handleNoGeolocation(false);
    }
}
function handleNoGeolocation(errorFlag) {
    if (errorFlag) { alert("El servicio de Geolocalización ha fallado"); }
    else { alert("Tu navegador no soporta Geolocalización"); }
}
google.maps.event.addDomListener(window, 'load', initialize);

Podéis ver el ejemplo funcionando aquí.

Un saludo, espero que vayamos subiendo más experimientos :-)

©2012 Joan Ballester. All Rights Reserved.

Son entradas muy breves, de distinta índole (Estructura, Elementos, etc…) que luego podremos ir recuperando y crear un gran tutorial, pero paralelamente a eso, vamos a empezar a hacer algunos pequeños scripts y publicarlos.

La verdad es que en local tenemos miles de pruebas que vamos haciendo cuando sale algo nuevo, y el otro día pensamos… ya que igualmente lo hacemos en local, porque no subirlo y lo compartimos, siempre podemos ganar algo más (comentarios, mejoras, etc…).

El primero que voy a subir, se trata de subir ficheros con la ayuda de la API de HTML5.

El ejemplo está en PHP, pero podéis pasarlo rápidamente al lenguaje que os haga falta, realmente la forma de recibir los ficheros y subirlos es lo de menos, lo interesante es ver cómo los almacena el cliente y los pasa al fichero de servidor.

En realidad el código no tiene demasiado secreto, el HTML es simplemente un formulario con un input file

<form method="post" enctype="multipart/form-data"  action="upload.php">
    <input type="file" name="imgs" id="imgs" multiple />
</form>
<div id="ajax"></div>
<div id="imagenes"></div>

Y el javascript, también es bastante claro, únicamente utilizamos FormData(), añadimos un evento y vamos añadiendo ficheros, leyéndolos con FileReader(), al final un ajax para mandar todo al PHP, pero también es irrelevante para mostrar esto…

var formdata = new FormData();
document.getElementById("imgs").addEventListener("change", function (evt) {
    $("#ajax").html("Subiendo");
    var i = 0, len = this.files.length, img, reader, file;
    for ( ; i < len; i++ ) {
        file = this.files[i];
        if (!!file.type.match(/image.*/)) {
            if ( window.FileReader ) {
                reader = new FileReader();
                reader.onloadend = function (e) {
                    $('#imagenes').append('<img src="' +e.target.result+ '" />');
                };
                reader.readAsDataURL(file);
            }
            formdata.append("imgs[]", file);
        }
    }
}, false);

El PHP en realidad da igual, simplemente recibe los ficheros y los copia en el servidor.

La idea me vino de este experimento de mozilla.

Un saludo, espero que vayamos subiendo más experimientos :-)

©2012 Joan Ballester. All Rights Reserved.

Debo reconocer que hace un tiempo jamás hubiera pensado así. Ni por asomo…

Pero también debo reconocer, que en algunos casos, creo que no hay otro modo de avanzar. Y no solo de avanzar en el trabajo, o de avanzar tú, individualmente como desarrollador… Hablo de avanzar en general, de avanzar todos los desarrolladores, los estándares, la web como parte de un todo.

Puede que unos ya hayáis llegado a esta conclusión, puede que otros no, o que simplemente alguna vez os hagáis una serie de preguntas.

Pues bien, esas preguntas para mi ya tienen respuesta.

No hay modo alguno de trabajar, y sacar adelante los proyectos, y a la vez estudiar y practicar las novedades que trae el mundo web, pulirlos y luego aplicarlos, que, parece el procedimiento lógico… el problema empieza a ser realmente serio cuando cada semana hay nuevos cambios y novedades, que tienes que probar y aprender si no te quieres quedar cada vez más descolgado, cosa que te mataría profesionalmente, pero no solo eso… si no que a la vez, los clientes que tienes pasarían a estar todos desactualizados… y en el fondo, ya no serías el desarrollador que quieres ser, que está a la última, que aprende cada día, etc…

Yo antes, sin ninguna duda era de esos de aprender, probar, dominar totalmente, y luego ejecutar en clientes, ejecutarlo primero en los nuevos, aprovechando desarrollos desde 0, y luego poco a poco, ir reemplazando los antiguos hasta que más o menos todo estaba controlado.

Pero claro, ¿ahora cómo lo haces?, si estás puesto en el html5 y lo sigues, verás como cada día hay novedades, en el mundo css3 también, en las compatibilidades de navegadores… ya es que ni lo menciono, pero es uno de los quebraderos de cabeza que parecía que tarde o temprano se arreglaría, y lo único que sucede es que se agrava ese problema.

Y claro está, el mundo móvil ;-) Que aquí sí que es para darles de comer aparte… porque si básicamente te centras en apple/android, aún te salvas, pero como quieras llegar más allá… ya puedes empezar a prepararte cafés.

Por tanto, ¿solución? No queda otra que los proyectos de tus clientes pasen a ser tu campo de aprendizaje, si no lo haces así, amigo… estás jodido.

A la larga, también tus clientes, porque no puedes darles ese plus de innovación, o de estar totalmente a la última, por tanto no les costará entenderlo… siempre que tengas un buen sistema de tickets o de control de proyectos y puedas monitorizar todos los errores y solucionarlos, es decir, organízate, o estás vendido.

Ah, y luego viene lo peor de todo… mirar atrás. Una vez que has pasado a NodeJS este proyecto (o JADE, o STYLUS), HTML5 bien trabajado… ahora mira atrás, a los otros proyectos, y llora ;-)

En resumen, que si estás en esto porque te gusta, porque es tu vocación, porque te apasiona y vives el día a día como más te gusta… que es programando y aprendiendo: ENHORABUENA, y si no es así… ESTÁS JODIDO, cambia de trabajo YA. Os lo dice alguien del primer grupo ;-)

Un saludo!

Imagen de Flickr (konch)

©2012 Joan Ballester. All Rights Reserved.

¿Quién, a día de hoy, no tiene instalada alguna app en su smartphone?

Una de las cosas que me cuesta entender en la mayoría de ocasiones (hay otras en las que sí lo entiendo), es el porque molestarse en programar una App para móvil, pudiendo adaptar la web. Es más, no solo porque molestarse en programarla, si no también el usuario en instalarla… Si te lías a instalar Apps, te quedas solo, no termino de entender el propósito, exceptuando algunas que realmente si son útiles.

Desde el punto de vista del desarrollador, pasa un poco lo mismo, ya que tienes que programar específicamente con determinados lenguajes en función del móvil para el que vas a desarrollar la aplicación.

Por poner un ejemplo sencillo… ¿Para qué una app móvil que busca hoteles según tus preferencias de búsqueda, si tuya tienes una web de búsqueda de hoteles?… ¿No es má sencillo (tanto para tí como para el usuario) utilizar la web, y prepararla para la versión móvil? ;-)

Conclusión

Desde mi punto de vista, y siempre que puedo, prefiero desarrollar web para dispositivo móvil antes que app para el móvil, así se aprovecha más la infraestctura montada.

Es más, lo veo mejor desde 3 puntos de vista:

• El usuario, que no se va a instalar cientos y cientos de aplicaciones.
• El desarrollador, que “simplemente” (que también tiene trabajo…) tendrá que adaptar el visionado de la web o aplicación web.
• La marca y/o web, que compartirá bases de datos y funcionalidades, y centralizará un poco el control (al dispersar más, siempre pierdes algo de control y dependes de más factores)

PS: Ojo, estoy hablando siempre desde el punto de vista en que el app pertenece a una web o similar pudiendo compartir funcionalidades, bases de datos, llamadas, etc… Es decir, no veo extraño programar y utilizar una app para jugar al ajedrez, por poner un ejemplo :-)

©2012 Joan Ballester. All Rights Reserved.