Me mudo

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

lunes, 15 de julio de 2013

Me mudo: enricflorit.com

Este es mi último post en la plataforma blogger con este blog. Me cambio de plataforma, me paso a Wordpress. Hay dos razones para hacerlo: la primera, quería tener mi propio dominio, la segunda, quería más personalización y mejores herramientas para manejar el blog.

Hoy por la mañana he hecho el traspaso de todas las entradas, así que si accedes a la nueva url enricflorit.com todavía podrás acceder a los posts antiguos.

A partir de ahora no publicaré más entradas nuevas, así que tendrás que ir a la nueva URL para poder leerlas. Te recomiendo suscribirte por email para no perderte ni una ;-).

No tengo mucho más que decir. Te vuelvo a dejar un enlace para que puedas disfrutar del nuevo blog. Hasta ahora mismo ;):

http://www.enricflorit.com

domingo, 14 de julio de 2013

Cómo subir múltiples archivos usando AJAX

Hola. Me he mudado a enricflorit.com, así que ahora puedes leer esta entrada aquí:

http://www.enricflorit.com/como-subir-multiples-archivos-usando-ajax/

viernes, 12 de julio de 2013

Usa HTML5 Boilerplate como punto de partida para tus páginas web

Hola. Este artículo está cambiando de URL, ahora lo podrás leer aquí:

http://www.enricflorit.com/usa-html5-boilerplate-como-punto-de-partida-para-tus-paginas-web/

miércoles, 10 de julio de 2013

LocalStorage, la nueva API de Javascript

Hola :) este artículo está disponible en una nueva dirección:

http://www.enricflorit.com/localstorage-la-nueva-api-de-javascript/

lunes, 8 de julio de 2013

Cómo usar las notificaciones de HTML5 en Firefox y Google Chrome

Hola, aquí tienes este artículo en su nueva ubicación:

http://www.enricflorit.com/notificaciones-de-html5-en-firefox-y-chrome/

sábado, 6 de julio de 2013

¿Sabes qué es VanillaJS?

Hola. Este blog está cambiando su URL por enricflorit.com. Puedes leer este artículo aquí:

http://www.enricflorit.com/sabes-que-es-vanillajs/

martes, 2 de julio de 2013

Cómo subir archivos al servidor con AJAX - Parte 2: mensajes de estado

Hola, si quieres puedes leer este artículo en mi nueva URL enricflorit.com:

http://www.enricflorit.com/como-subir-archivos-al-servidor-con-ajax-parte-2-mensajes-de-estado/

domingo, 23 de junio de 2013

Eventos en Javascript: addEvent, removeEvent

Hola, si quieres leer este artículo puedes hacerlo aquí:

http://www.enricflorit.com/eventos-en-javascript-addevent-removeevent/

domingo, 17 de febrero de 2013

PHP Orientado a Objetos 1: base teórica

Hola, si quieres puedes leer este artículo en la nueva URL:

http://www.enricflorit.com/php-orientado-a-objetos-base-teorica/

sábado, 9 de febrero de 2013

Procesadores de css para acelerar la producción de una web

Puedes leer este artículo en el siguiente enlace:

http://www.enricflorit.com/procesadores-de-css-para-acelerar-la-produccion-de-tu-web/

sábado, 2 de febrero de 2013

Creando un compilador de Javascript con PHP


Hoy voy a hablaros de una técnica para la producción de páginas web. Como de costumbre, usaré PHP, pero supongo que debe ser algo fácil de implementar en cualquier otro lenguaje para servidor.

Normalmente, las páginas web grandes suelen tener una estructura compleja. Más últimamente, que usamos todo tipo de bibliotecas para mejorar nuestras aplicaciones. A nivel de cliente, se ha puesto muy de moda Javascript, con un gran abanico de usos: páginas que cargan dinámicamente con AJAX, efectos en menús, cambios de estilos, objetos escondidos...

Centrándonos en la parte del cliente de una aplicación web: al menos personalmente, tiendo a separar las diferentes partes de mi código en más de un archivo. Uno contiene algunas funciones de uso general, otro la lógica para el árbol de carpetas o menú de la página, otro para ajustar la página a la pantalla del usuario (como complemento al Responsive Design en CSS)... En una de las páginas web que mantengo, el número de estos archivos *.js llega a alcanzar los veinte scripts diferentes.

A nivel de organización, todo esto está más que bien: cualquier problema será detectado (en principio) con facilidad, y sabremos en todo momento a qué archivo acudir en caso de que una parte de la web nos falle. Pero, mirándolo de otro modo, esto sólo nos beneficia a nosotros como programadores y no tanto al usuario. Y es que no es precisamente rápido en términos de velocidad de Internet tener que descargar 20 archivos adicionales (a parte de la página web propiamente).

Cuando vi las dimensiones que estaba alcanzando la página web de los 20 .js, me preocupé un poco. Pensé en lo que acabo de decir: no es mucha carga para el usuario? Ya no te digo si la página se descarga desde un dispositivo móvil, donde la velocidad no suele ser el fuerte. Así que me hice con el siguiente pedazo de código PHP:

<?php
require 'jsmin.php';
$files = array('script1.js','script2.js','script3.js');

foreach( $files as $file) {
$parts = explode('.',$file);
$extension = strtolower( end($parts) );
if ($extension === 'js') {
$f = fopen($file,'r');
$buffer[] = fread($f,200000);
}
}
$output = JSMin::minify(implode(";\n", $buffer));

header("Content-type: application/x-javascript; charset: UTF-8");
echo $output;
?>

Digamos que le pasamos a PHP una lista de los archivos a usar. Simplemente los lee y los comprime usando una clase que encontré “por ahí”. Luego declara una cabecera de archivo Javascript y devuelve la cadena con todo nuestro código comprimido. Podríamos llamarlo un “compilador” de código javascript (aunque es muy mejorable).

Como le damos la cabecera application/x-javascript, podemos incluir este archivo directamente:

<script src=”/js/javascript.php”></script>

Es de lo más útil, y solo se tiene que cambiar los nombres de archivo del array $files.

Con este código, no sólo conseguimos que el usuario tenga que descargar un único archivo javascript. También nos libramos de un problema entre las fases de desarrollo y producción: en vez de usar una web al estilo jscompress.com cada vez que queramos liberar una nueva versión de un script javascript, php lo hará por nosotros con solo subir el archivo modificado (en bruto, sin comprimir ni nada) al servidor.

Os dejo el código fuente y la clase jsmin.php aquí.

Hasta la semana que viene ;-)

sábado, 26 de enero de 2013

Porqué SÍ usar jQuery?

Hace un tiempo escribí dando argumentos en contra de usar jQuery. Lo hice por pura alarma personal: estaba viendo como cada vez más gente responde en preguntas a foros sobre cualquier tema de JS con un simple:

“Usa jQuery.
--Fulanito”
Decidí escribir ese post porque este tipo de respuestas y esa forma de pensar refleja a años luz una cosa: que la persona que afirma eso aprendió jQuery antes que JavaScript (posiblemente no sepa cómo funciona realmente el segundo). Pero jQuery (y cualquier otra biblioteca) no es mala, nos ayuda a economizar nuestro tiempo y a hacer más eficaces nuestras aplicaciones.

Hay que tener presente una cosa: JavaScript es un lenguaje interpretado. Cualquier lenguaje interpretado tiene un gran obstáculo: depende en un 80% del entorno en que se interpreta el código. Así pasa con Python: necesitamos tener ciertas bibliotecas para hacer determinadas cosas. También con PHP: el núcleo de PHP lo tienen montones de servidores web, pero para ciertas tareas necesitaremos usar extensiones, por ejemplo para usar cURL.

Pero aunque JavaScript sea interpretado, últimamente están cambiando muchas cosas. Gran parte de los navegadores web están evolucionando hacia unos estándares cada vez más aceptados, más útiles y más simplificados. Pero parece ser que aún no es suficiente, y por eso nos siguen sirviendo las bibliotecas de JS, ampliamente usadas.

Así que sin más introducción, me pongo a citar razones positivas por las que usar jQuery con JS:
  • Fácil manejo del DOM usando selectores CSS, con algunos añadidos fuera del estándar por usar Sizzle.
  • Posibilidad de tomar el código de un servidor CDN. Si vas a usar este método, te recomiendo que uses el servidor de Google. Tienen varios datacenters repartidos por el mundo y es fácil que el usuario pueda establecer una conexión rápidamente. En esta página encontrarás el enlace a la última versión.
  • Fácil uso con ajax si necesitamos usar un modelo complejo y enviar recibir muchos parámetros. Es decir, enviar datos en formato JSON es mucho más sencillo que hacerlo a mano.
  • Animaciones muy sencillas: si queremos crear objetos animados (banners...) es muy útil Alternativa: Adobe Edge Animate.
  • Inicialización al cargar el árbol DOM, no la pagina entera. Aunque no sea complicado escribir una función window.ready, el uso de $(document).ready simplifica mucho las cosas, y es mucho más estable.
  • Manejo rápido de propiedades y css. Si tienes que cambiar más de 3 o 4 propiedades css de un elemento, el código que usarás será muy repetitivo. Con jQuery, hacer esto es simplemente pasar las propiedades a cambiar con sus respectivos valores en formato JSON.
Seguramente podríamos citar algunas características también buenas. Pero espero haber hecho una buena lista que pueda compensar la última que hice en contra de jQuery.


Un saludo ;-)

Hay otra cara de la moneda... Haz click para ver razones en contra de jQuery
Related Posts Plugin for WordPress, Blogger...