lunes, 28 de enero de 2013

Primer día de trabajo...

Hoy es mi primer día de trabajo. Esto debería ser motivo de alegría en los tiempos que corren y en cierto modo lo es, pero no puedo dejar de tener cierta nostalgia por el periodo que ahora termina.

Hace 7 años me ganaba bien la vida como analista en una consultora española. Mi mujer tenía un cargo similar en otra consultora. No es que fuéramos "ricos" pero podíamos permitirnos ciertos caprichos como tener coche y moto, PC de sobremesa y portátil, etc. En aquella época, gracias a un amigo, descubrimos el marketing de resultados y los programas de afiliación. Nos metimos en el negocio tímidamente y ganamos algo de dinero extra. Publicábamos anuncios en el programa Google Adwords y cobrábamos una comisión por clic o por venta. Esto era el año 2005 y apenas había competencia en España. Durante el 2006 me registré como autónomo para poder justificar esos ingresos extra que empezaban a ser abundantes. En ese momento decidimos emprender. Fundamos nuestra propia empresa y dejamos nuestros trabajos.

Los dos primeros años de actividad de la empresa fueron geniales. Hacíamos mini páginas web (landing pages) para promocionar los productos de los anunciantes; promocionábamos estas páginas mediante Adwords; y cobrábamos las comisiones. Tratábamos con multitud de artículos: vuelos, hoteles, viajes, cursos, ordenadores, etc. En aquella época creamos sitios como YoViajo.es, YoVuelo.es, InfoAerolineas.com, BuscoHoteles.es, MasQueCursos.org y otros que ya no existen. Fue un tiempo de considerable creatividad, mucho trabajo y grandes recompensas.

Luego Google cambió las reglas del juego. De la noche a la mañana decidió penalizar las landing pages y los buscadores de viajes en el programa Adwords. Eso fue el principio del fin para nuestro negocio.

En ese momento quizá deberíamos haber cerrado el negocio, recogido beneficios y buscado trabajo, pero decidimos mirar hacia adelante: sabíamos hacer páginas web, así que salimos a buscar clientes. Desgraciadamente ninguno de los dos somos buenos comerciales y además todo eso pasó en 2009, al principio de la crisis. Nos costó mucho encontrar clientes, aunque los que encontramos quedaron muy satisfechos con nuestro trabajo. Algunos ejemplos fueron: Corposalut, Vata-clan, Hierbalast entre otros. Mucho trabajo y pocos beneficios.

En 2012 tocamos fondo. La empresa no tenía beneficios y las reservas estaban ya bajo mínimos, así que llegó el momento de buscar trabajo. Igual esperamos demasiado pero siempre tuvimos la esperanza de sobrevivir hasta que acabara la crisis. Entonces empezó otra odisea: el mercado de la informática en España está fatal. Hay pocas ofertas reales y ofrecen unos sueldos simplemente ridículos hace unos años. La próxima vez que oiga que la informática es una profesión sin paro me va a dar algo. El caso es que tras más de 200 CV enviados entre Infojobs, LinkedIn y otras y unas 20 entrevistas de trabajo, he conseguido que me den una oportunidad.

Ahora inicio una nueva etapa. El trabajo no tiene mala pinta, aunque el sueldo es menor de lo que cobraba hace 10 años. No me queda más remedio que aceptarlo y esperar tiempos mejores (la crisis se acabará algún día).

A pesar de como ha acabado todo, nunca me he arrepentido de emprender. Estos años han sido fantásticos. Hemos trabajo mucho pero siempre que queríamos podíamos sacar tiempo para hacer cosas sencillas pero importantes como pasar tiempo con nuestra hija, llevarla al parque, jugar con ella o ver una película juntos. Siempre podíamos seguir trabajando después de acostarla.

viernes, 25 de enero de 2013

Uso de tipos de letra externos en un sitio web web

True Type Font Hasta la llegada de las especificaciones CSS3 a nuestros navegadores el uso de tipografías en los sitios web estaba limitada a las genéricas: "serif", "sans-serif", "cursive", "fantasy" y "monospace". También se podían usar las fuentes instaladas en el ordenador como "Arial", "Times New Roman", "Courier New" o "Comic Sans", pero con el problema de que los tipos de letra de Microsoft sólo funcionarían en PCs con Windows, los tipos de letra de Apple sólo funcionarían en sistemas Macintosh, etc. En aquella época los diseñadores web tenían que incluir largas ristras de compatibilidad en sus declaraciones de tipo de letra. Por ejemplo:

h1 {
    font-family: "Arial", "Helvetica", sans-serif;
}

Por suerte CSS3 definió la regla @font-face que permite añadir tipografías externas a nuestros sitios web. Hoy en día la mayoría de los navegadores (Firefox, Opera, Chrome, Safari, etc.) aceptan fuentes en dos formatos:

Por desgracia y como suele ser habitual Microsoft siguió su propio camino sin tener en cuenta a los demás y su Internet Explorer 9 sólo acepta tipos de letra en formato:

Además Internet Explorer 8 y anteriores no soportan la regla @font-face. Con lo cual los diseñadores siguen teniendo que poner lasgas ristras de compatibilidad en la declaración de la fuente a usar.


Uso de la regla @font-face

La regla @font-face permite definir un tipo de letra externo a usar en nuestro sitio web. En este ejemplo supondremos que los archivos ttf y eot se encuentran en una carpeta llamada fonts.

@font-face
{
    font-family: MiFuente;
    src: url('fonts/MiFuente.ttf'),
         url('fonts/MiFuente.eot'); /* IE9 */
}

h1 {
    font-family: MiFuente, serif;
}

Podemos definir tantas @font-face como necesitemos, de forma que podemos usar por ejemplo un tipo de letra para el título principal, otro para los títulos secundarios y otro para el texto.


Conversión de formatos

Ya hemos comentado que IE9 soporta únicamente el formato EOT, mientras que los demás navegadores aceptan TTF y OTF pero no EOT. Eso nos obligará disponer de antemano de los archivos de definición de fuente en varios formatos o bien convertir unos formatos en otros. Existen varias herramientas para realizar estas conversiones, aunque no siempre funcionan. Pongo aquí las más comunes:


Licencias, derechos y copyright

El uso de archivos de tipografías suele estar sujeto a licencias. Así podemos encontrarnos fuentes libres, fuentes libres con limitaciones, fuentes libres para proyectos personales pero no para comerciales, fuentes de pago, etc. Antes de usar cualquier tipo de tipo de letra en un sitio web debería comprobarse primero la licencia que tiene. En muchos casos será necesario contactar con el autor y pedir permiso para usar ese tipo de letra.

En Internet podemos encontrar sitios con multitud de tipografías. Uno muy interesante es Google Web Fonts [EN] que proporciona una colección de tipografías libres de derechos para usar en proyectos web de forma gratuita. Otro sitio muy útil es FontSquirrel.com, que proporciona listas de tipografías libres y algunas herramientas para el tratamiento de tipos de letra en la web. También tenemos sitios como FontYükle que proporcionan listas enormes de tipografías, aunque en este caso conviene estar atento a las licencias.


Enlaces y referencias

miércoles, 23 de enero de 2013

Abrir vínculos en ventana nueva con rel="external"

En las especificaciones de W3C sobre XHTML 1.0 y HTML 4.01 estricto el atributo target dejó de ser válido en los enlaces. Dicho atributo debía ser sustituido por el atributo rel. El problema es que los navegadores nunca llegaron a implementar este cambio y con las especificaciones de HTML 5 esta prohibición se ha relajado. Por lo tanto target vuelve a ser un atributo válido. Aun así si necesitamos que un código valide como XHTML no podemos incluir ese atributo.

Entonces, ¿Como hacemos que un vínculo se abra en una nueva ventana sin usar target="_blank"? Existen multitud de trucos, especialmente usando javascript. Hoy voy a poner un sencillo código jQuery que permitirá abrir en una ventana nueva cualquier enlace que incluya el atributo rel="external". Veamoslo:

$(document).ready(function() {
    $('a[rel="external"]').click(function() {
        $(this).attr('target', '_blank');
    });
});

Este truco añade en tiempo de ejecución el atributo target="_blank" a los enlaces con rel="external". Los validadores de XHTML indicarán que el código es válido y el navegador abrirá el enlace en una ventana nueva.


Ejemplos:

<a rel="external" href="http://www.ifraktal.com/">iFraktal</a>
<a rel="external" href="http://www.blogger.com/">Blogger</a>

¿Para que sirve realmente el atributo "rel"?

El atributo "rel" está asociado a la etiqueta "<a>" (hipervínculo) y sirve para indicar la relación entre el documento actual y el documento destino del enlace. Actualmente los navegadores más usados ignoran este atributo, aunque suele ser incluirse con propósitos de SEO, ya que algunos motores de búsqueda sí que lo tienen en cuenta. Algunos de los valores del atributo "rel" son:

  • alternate: Enlaza a una versión alternativa del documento actual.
  • author: Enlaza con el autor del documento actual.
  • external: Enlaza con un documento externo.
  • help: Enlaza a un documento de ayuda.
  • license: Enlaza a un documento con información sobre el coyright.
  • nofollow: Indica a los robots de búsqueda que no sigan ese enlace.
  • noreferrer: Indica al navegador que no envíe HTTP-REFERER.

Enlaces y referencias:

Especial arquitecturas hardware en Xataca

Acabo de leer en Xataca una serie de artículos muy interesantes sobre el origen de los procesadores y las diferentes arquitecturas existentes. Me han parecido muy completos porque sitúan las cosas en su contexto histórico-económico correcto y hacen un repaso exhaustivo de las arquitecturas CICS y RISC. Los procesadores actuales con sus varios núcleos tienen mucho que agradecer a aquellos pioneros de la informática.

La serie consta actualmente de varios artículos donde se habla de los primeros procesadores, de la diferencia entre arquitecturas CISC y RISC, de los procesadores ARM y de la arquitectura x86.

  1. Así comenzó todo: el origen de los procesadores.
  2. CISC frente a RISC, una batalla en blanco y negro.
  3. ARM, la 'navaja suiza' de los procesadores.
  4. Arquitectura x86, una historia imprescindible de la informática.

martes, 22 de enero de 2013

Samsung Galaxy S3

Samsung Galaxy S3

A estas alturas no voy a descubrir a nadie el Samsung Galaxy S3, actual buque insignia de los smartphones Android de Samsung, con permiso del Galaxy Note II y hasta que salga el futuro Galaxy S4, que según parece está previsto para abril o mayo de 2013. El caso es que desde hace una semana soy uno de los felices propietarios de uno de estos teléfonos y tengo que decir que todo lo que se ha escrito sobre el mismo es poco.

Samsung Galaxy S3

Sus características técnicas son de sobras conocidas por lo que no voy a abundar sobre ello. Como resumen: Pantalla de 4,8" Super AMOLED HD (1.280x720); CPU Exynos 4, quad-core 1.4 GHz; GPU Mali-400; 1GB de RAM; 16GB de memoria interna, ampliable por microSD a 64MB; etc. Lo que se dice "un maquinón". Pero no es sólo en el hardware en lo que destaca este smartphone. El software que lo acompaña es sencillamente increíble: rápido, preciso, completo, multiconfigurable, detallado,... se me acaban los adjetivos. Lo realmente bueno de este teléfono es como va. La experiencia de usuario es totalmente satisfactoria.

Mi teléfono vino de fábrica con la versión Android 4.1.1 (Jelly Bean), aunque nada más encenderlo ya tenía la posibilidad de ampliación hasta Android 4.1.2 que incluye la premium suite que Samsung desarrolló para el Galaxy Note II. He dejado la versión 4.1.1 una semana para poder apreciar las diferencias y cuando he instalado la 4.1.2 el "flipado" con el cambio. El soporte multiventana, la nueva galería o las nuevas aplicaciones como Paper Artist son un gran acierto. Además hasta parece que gasta menos batería.

Samsung Galaxy S3

Mi viejo HTC Desire era un gran teléfono también pero se había quedado algo anticuado debido sobre todo a su escasa memoria (576 MB, de los cuales hay menos de 256 a disposición del usuario), lo que hacía que para instalar programas nuevos tuviera que borrar otros programas. Además se había quedado anclado en la versión 2.2 de Android (Froyo). Cierto es que hay multitud de ROMs alternativas para este teléfono como las de CyanogenMod que pueden mejorar enormemente la experiencia de usuario con este teléfono, pero instalarlas requiere unas cuantas horas de estudio previo y grandes dosis de paciencia.

lunes, 21 de enero de 2013

Contacts Backup

Contacts Backup Contacts Backup en nuestra segunda aplicación Android. Lleva ya algún tiempo disponible en Google Play, pero aun no había contado aquí nada. Contacts Backup es una herramienta que permite realizar un backup completo de la información de los contactos del teléfono para posteriormente restaurarlo en el mismo o en otro dispositivo, sin pérdida de información. Además permite visualizar los datos de los contactos y exportar los datos de los contactos a ficheros en varios formatos (Excel, HTML, texto plano, etc) o borrar los datos de todos los contactos.

Funcionalidades

Contacts Backup

Contacts Backup no pretende sustituir al gestor de contactos de tu dispositivo, sino complementarlo. Sus funciones son:

  • Mostrar la lista de los contactos y los grupos del teléfono y de las cuentas externas (GMail, WhatsApp, Facebook, Twitter, etc).
  • Mostrar todos los detalles de un contacto, incluso los que están ocultos normalmente.
  • Obtener una lista de números de teléfono de los contactos diversos formatos: Excel, HTML, texto plano, etc.
  • Obtener una lista de teléfonos y emails de los contactos en diversos formatos: Excel, HTML, texto plano, etc.
  • Realizar una copia de seguridad completa de los contactos del teléfono en la tarjeta SD o memoria externa.
  • Restaurar una copia de seguridad desde una tarjeta SD o memoria externa.
  • Traspasar todos los contactos de un dispositivo a otro (backup + restore).
  • Borrar todos los contactos del dispositivo.

Miscelania

Contacts Backup

Contacts Backup, que se distribuye en inglés y en español, es una aplicación gratuita que incluye banners publicitarios como fuente de financiación. Acaba de pasar las 6.000 descargas en Google Play (en todo el mundo) y más de 1.800 personas lo han continuado usando después de descargarlo.

Desarrollo futuro

En el futuro tenemos previsto añadirle algunas de las siguientes funcionalidades:

  • Soporte para diferentes tipos de pantallas, especialmente para tabletas. ¡Prioritario!
  • Comparación de los contactos del teléfono con una copia de seguridad guardada para realizar restauraciones parciales.
  • Edición de datos de los contactos.
  • Soporte para otros idiomas.
  • Permitir exportar y restaurar datos de un sólo contacto. Enviarlo por email, compartirlo, etc.
  • Explorar los formatos estándar de traspaso de contactos de cara a intentar exportar todos los datos posibles a otros sistemas: iOS, Windows, Blackberry, etc.)
  • Backup de los contactos en la nube. Probablemente para una futura versión premium (de pago).

jueves, 17 de enero de 2013

Como hacer una llamada AJAX en jQuery

La librería jQuery dispone de varias funciones para hacer llamadas AJAX. Recordemos que AJAX (Asynchronous JavaScript And XML) es una técnica de desarrollo web basada en JavaScript que se usa para crear sitios web interactivos, permitiendo hacer llamadas al servidor en tiempo de ejecución y procesando la respuesta del servidor de forma asíncrona.

Algunas de las funciones de jQuery que facilitan el uso de tecnologías AJAX son:

Voy a poner un ejemplo de uso de la función jQuery.getJSON() para demostrar lo sencillo que es ejecutar una petición AJAX en jQuery:

Supongamos que tenemos un formulario con los campos "city" y "country". Queremos que se rellene una lista de sugerencias de ciudades y países según se va escribiendo en los campos. La lista se mostrará en un divisor llamado "suggested_cities".

Nuestro servidor es capaz de devolver una lista de ciudades mediante la URL "/getcities". Los parámetros que acepta son "city" y "country". El formato devuelto es JSON:

{
  [
    {
      'id' : int,
      'city' : 'string',
      'country' : 'string'
    }
  ]
}

El código jQuery que permite cargar la lista de ciudades sugeridas de forma asíncrona es el siguiente:


$(document).ready(function() {

    $("#city").keyup(loadSuggestedCities(event));
    $("#country").keyup(loadSuggestedCities(event));

    function loadSuggestedCities(event) {

        var city = $('#city').val();
        var country = $('#country').val();

        $.getJSON(
            '/getcities/',
            { 'city' : city, 'country' : country },
            function(json) {

                if(json == null)
                    return;

                var index, html = '<ul>';
                for (index = 0; index < json.length; index++) {
                    html += '<li>':
                    html += '<a href="javascript: ';
                    html += 'selectCity(\'';
                    html += json[index].city;
                    html += '\', \'';
                    html += json[index].country;
                    html += '\');">';
                    html += json[index].name;
                    if(json[index].country_name != null) {
                        html += ' (' + json[index].country_name + ')';
                    }
                    html += '</a>';
                    html += '</li>':
                }
                html += '</ul>';

                $('#suggested_cities').html(html);
        });
    }
});

function selectLocation(city, country) {
    $("#city").val(city);
    $("#country").val(country);
}

Como puede verse es muy sencillo. Primero capturamos el evento keyup de los controles city y country. En dicha función hacemos la llamada a $.getJSON (sinónimo de jQuery.getJSON), pasándole los parámetros adecuados y procesando la respuesta que estará en formato JSON.

miércoles, 16 de enero de 2013

Razones por las que los sueldos de los informáticos son tan bajos en España

A través de un grupo de LinkedIn he descubierto un artículo en el blog de Javier Garzás titulado ¿Por qué en España los informáticos tienen sueldos tan bajos? Aquí están las razones. Creo que ese artículo da totalmente en el clavo y es un análisis pormenorizado de la situación de todo el sector de las TIC en nuestro país, pretendiendo ser la respuesta a "Si hay una demanda tan grande de puestos para ingenieros informáticos, y cada vez hay menos ingenieros informáticos... ¿cómo pueden estar tan bajos los sueldos?".

Personalmente tras 15 años de experiencia en el sector de las TIC creo que puedo decir que lo que aparece en el artículo son verdades como puños. Además llevo algún tiempo buscando trabajo debido a que la situación económica actual dificulta enormemente la búsqueda de clientes para mi propia empresa y me he dado cuenta que a la hora de solicitar un trabajo prácticamente no importa mi titulación (Ingeniero Técnico en Informática de Gestión), ni los 15 años desarrollando software en distintos entornos: (C++, PHP, COBOL, Android, ...). La única pregunta que invariablemente me hacen en las entrevistas de trabajo y que determina el resultado de esta es: "¿Cuales son tus expectativas económicas?". Por supuesto dado el panorama actual he rebajado al máximo mis pretensiones pero curiosamente la mayoría no acepta mi respuesta estándar: "Estudio cualquier propuesta y no quiero que el salario inicial sea una barrera. Busco proyectos estables e interesantes, con posibilidades reales de progresión.". La mayoría no se contenta hasta que doy una cifra.

A continuación os dejo un extracto del artículo ¿Por qué en España los informáticos tienen sueldos tan bajos? Aquí están las razones:

Ni se ofertan tantos puestos, ni hay tan pocos "informáticos".

Una de las teorías económicas básicas es la de la oferta y la demanda que dice, entre otros, que cuando la demanda (en nuestro caso la demanda de informáticos por parte de las empresas) es superior la oferta (el número de informáticos disponibles en el mercado de trabajo), el precio (el salario) tiende a aumentar.

Y si lo anterior no se cumple, como es el caso, donde los salarios no se están disparando tan estrepitosamente como las ofertas de empleo, solo puede ser por dos razones...

a) Realmente la oferta, el número de "informáticos" disponibles para ocupar un puesto de trabajo... no es tan baja como nos creemos.

Esto tiene una explicación fácil: el aparentemente alto número de ofertas de trabajo no son sólo para los ingenieros en informática, son para "los ingenieros en informática" + "casi cualquier otra titulación" + "formación profesional".

Así que, aunque realmente haya pocos ingenieros en informática, los puestos de trabajo que no cubren los ingenieros en informática los acaban cubriendo profesionales de otras titulaciones.

[...]

¿Pero cómo? ¿Es que cualquier titulación puede ocupar el puesto de un ingeniero en informática? ¿Cómo puede ser?

[...]

i. Hay una gran separación Universidad – empresa, que provoca que los ingenieros recién licenciados no estén preparados para las verdaderas necesidades de la empresa. Lo que provoca que, al competir por un puesto de trabajo, los ingenieros en informática no tengan una gran ventaja competitiva y diferenciación frente a otras titulaciones (telecomunicaciones, industriales, etc.).

ii. La mayoría (no todas) de las empresas TI en España compiten entre ellas por coste no por calidad, es decir, el proyecto se lo lleva el que menos cobra, y no el que oferta más calidad, o mejores perfiles profesionales. A menor precio de venta de proyectos... menos margen para sueldos, y como realmente tener buenos perfiles no es diferenciador (y a los clientes no les preocupa mucho) se contratan ingenieros informáticos baratos o se contratan otros perfiles.

iii. El sector es principalmente de servicios (no de productos). Es decir, se compran horas, o "body shopping" (es decir, cesión de personas al cliente, siendo el cliente quien los gestiona). En cualquier caso no es un modelo de inversiones importantes a medio – largo plazo, no es un modelo en el que se quiera crear el mejor software para en un futuro venderlo y obtener rentabilidad. [...]

iv. No existe ninguna regulación, es decir, que aún siendo críticos ciertos sistemas informáticos, cualquier profesión puede trabajar en ellos.

[...]

b) Porque realmente la demanda, el número de ofertas de trabajo... no es tan alta como nos creemos.

Ojo que "número de ofertas de trabajo" no es igual a "número de puestos de trabajo disponibles". Aunque el subconsciente tienda a igualarlos.

Normalmente, en nuestro sector, muy de "boddy shopping" y servicios, sucede que una empresa cliente requiere un perfil profesional, se lo pide a varias consultoras, y si estas no tienen a nadie disponible sacan cada una de ellas una oferta de trabajo. Por tanto, no es raro que para realmente un único puesto de trabajo te encuentres con 4 o 5 ofertas de trabajo, correspondientes, cada una de ellas, a 4 o 5 empresas consultoras.

[...]

A este artículo sólo le añadiría una cosa: el problema de los clientes. Los clientes no quieren un producto de calidad, a prueba de fallos y garantizado. No. Ni mucho menos. Los clientes quieren un producto barato. Punto final. Y eso pasa tanto con pequeños clientes como en grandes empresas. Incluso en sitios donde el software puede ser crítico se contrata a "cualquiera". Luego si algo sale mal los clientes se quejan. Y mucho. Pero no se acuerdan de que están pagando 4 duros por un trabajador sub-sub-subcontratado y que de esos 4 a él sólo le llega 1 con suerte. Mientras no consigamos cambiar esa cultura será difícil cambiar el resto de las TIC.

martes, 15 de enero de 2013

[Truco] Importar un archivo CSV en una tabla MySQL

Hoy necesitaba importar un volcado inmenso de datos en una tabla MySQL. El archivo origen estaba en formato CSV para Excel, que es algo diferente del CSV estándar. Nunca había realizado una carga de datos similar, pero una búsqueda en Google me ha revelado el comando LOAD DATA INFILE. Sólo he encontrado referencias al mismo en inglés, así que paso a contar como funciona.

El comando MySQL LOAD DATA INFILE permite leer registros desde un fichero de texto, pudiendo determinar las características de los datos a procesar como el carácter de separación (coma, punto y coma, etc.), el carácter de fin de línea (CR, CRLF, etc.) y algunas cosas más. El formato de este comando se puede encontrar en el manual de MySQL.


Ejemplo #1:

LOAD DATA
LOCAL INFILE 'C:\\location.csv'
INTO TABLE location
FIELDS TERMINATED BY ';'
LINES TERMINATED BY '\r\n'
IGNORE 1 LINES;

En este ejemplo se procesará el archivo "C:\location.csv", que se encuentra en el ordenador cliente (LOCAL), grabando los datos en la tabla "location", indicando que los campos están separados por punto y coma (CSV para Excel) y las líneas acaban con "CRLF" (Windows). Además se salta la línea de cabecera (IGNORE).


Ejemplo #2:

LOAD DATA
INFILE 'location.csv'
INTO TABLE location
FIELDS TERMINATED BY ',' ENCLOSED BY '"'
LINES TERMINATED BY '\n';

En este segundo ejemplo se procesará el archivo "location.csv", que se encuentra en el servidor, grabando los datos en la tabla "location", indicando que los campos están separados por coma y delimitados por comillas (CSV estándar) y las líneas acaban con "LF" (Linux).

viernes, 11 de enero de 2013

Desarrollo de software

El desarrollo de software es una carrera entre los programadores tratando de hacer programas resistentes a idiotas y el universo haciendo más y mejores idiotas. Por ahora gana el universo.

Leído por ahí...

miércoles, 9 de enero de 2013

[Truco] Forzar la ejecución de código jQuery al volver atrás

Hoy quería comentar un truco de programación que he necesitado aplicar para resolver un problemilla. Creo que es interesante porque me ha costado bastante de encontrar la solución correcta.

El problema era el siguiente: en una página web que estoy desarrollando cuando el usuario rellena un formulario de búsqueda y pulsa el botón de submit, yo muestro un mensaje "Buscando, por favor espere" con el típico icono de progreso. Esto lo hago usando jQuery con un efecto fade-in muy chulo. Al cargarse la nueva página con el resultado de la búsqueda el mensaje naturalmente desaparece. El problema era que al volver a la página anterior (back) el mensaje seguía ahí, lo cual debería solucionarse con un sencillo código jQuery:

$(document).ready(function() {
    $("#searching").hide();
});

¡Debería solucionarse! Pero no funciona porque según parece la librería jQuery impide la ejecución de código javascript al cargar una página desde la cache (historial). He tenido que buscar bastante para solucionarlo, pero al final lo he encontrado:

<body onunload="">
    ...
</body>

Es una pequeña chapuza, pero es sencillo y efectivo... ¡y funciona!

martes, 8 de enero de 2013

Herramientas de programación web: Smarty

En este primer artículo del año y dentro de la serie de herramientas de programación web hoy quería hablar de una herramienta que he conocido hace poco: Se trata de Smarty, una librería de plantillas para PHP. Smarty permite separar totalmente el código PHP de la presentación (HTML/CSS) dentro de un proyecto. Normalmente cuando usamos un framework MVC como CodeIgniter el propio entorno ya nos separa la vista (HTML/CSS) del modelo y los controladores (PHP). Aun así una herramienta como Smarty podría ser muy útil en proyectos más pequeños o en aquellos donde el uso de un framework esté desaconsejado.

Smarty es Open Source y lleva varios años en el mercado. Su uso ayuda a evitar malas prácticas comunes, como mezclar PHP y HTML/CSS en el mismo fichero y permite separar los roles de programador y diseñador dentro de un proyecto, aumentando así la escalabilidad del mismo.

Como opinión personal, prefiero un MVC más tradicional, pero según he podido investigar parece ser que Smarty funciona muy bien. Lo único que suelen comentar sus detractores es que la librería es un poco demasiado pesada y si no se va con cuidado tiende a ralentizar la ejecución del código. Además requiere el aprendizaje de un nuevo pseudolenguaje a añadir a los PHP, HTML, CSS, Javascript, jQuery,...

Usando Smarty dividiremos el código fuente en dos archivos: Un archivo .php conteniendo la lógica de negocio y un archivo .tpl conteniendo la plantilla. En el modelo MVC el primero equivaldría al controlador y el segundo a la vista. La plantilla no debería incluir absolutamente nada de código PHP. Veamos un ejemplo de un controlador con dos vistas.


Ejemplo

Supongamos que tenemos una clase llamada Productos que tiene las funciones listarProductos() y datosProducto($id). Ambas funciones devuelven un array conteniendo los campos id, nombre, descri y precio. No voy a poner el código fuente de esa clase. Nuestro controlador tendrá dos modos de funcionamiento:

  1. Si no recibe parámetros $_GET, listará todos los productos.
  2. Si recibe el ID del producto, mostrará los datos de ese producto.

Código fuente de productos.php:

<?php
include('libs/Smarty.class.php');
include('Productos.class.php');

$smarty = new Smarty();
$productos = new Productos();

$id = isset($_GET['id']) ? $_GET['id'] : null;
if($id == null) {

  $lista = $productos->listarProductos();
  $smarty->assign('productos', $lista);
  $smarty->display('lista_productos.tpl');
}
else {

  $datos = $productos->datosProducto($id);
  $smarty->assign('producto', $datos);
  $smarty->display('datos_producto.tpl');
}

Código fuente de lista_productos.tpl:

<html>
<head>
  <title>Listado de productos</title>
</head>
<body>
  <h1>Listado de productos</h1>
  <ul>
  {foreach from=$productos item=producto}
    <li>
      <a href="?id={$producto.id}">
        {$producto.nombre}
      </a>
    </li>
  {/foreach}
  </ul>
</body>
</html>

Código fuente de datos_producto.tpl:

<html>
<head>
  <title>{$producto.nombre}</title>
</head>
<body>
  <h1>{$producto.nombre}</h1>
  <p>
    {$producto.descri}
  </p>
  <p>
    Precio: {$producto.precio}
  </p>
</body>
</html>

Este es un ejemplo muy sencillo en el que hemos omitido totalmente el control de errores, pero sirve para explicar como funciona Smarty. Como vemos cada una de las plantillas (archivos .tpl) contiene instrucciones especiales en un pseudolenguaje que permite representar variables y ciertas sentencias de control (if, while, foreach, etc) y en cambio no contiene nada de código PHP. Todas las instrucciones especiales se escriben directamente dentro del código HTML encerradas entre llaves.


Enlaces de interés y referencias