toggle

Carga diferida del Javascript (defer loading)

Llamarme rarito, pero soy de los que le gusta tener una nota lo más alta posible en los test de «Page Speed» y me gusta que mis páginas carguen lo más rápido posible. Para intentar conseguir esto una de las recomendaciones es cargar tus ficheros Javascript de manera diferida, después de que el contenido de la página haya sido cargado y mostrado, pero esto no es tan fácil como podría parecer.

Hay varios métodos, y no todos ellos valen para todos los navegadores. Según he leído en el artículo Defer loading of javascript de Patrick Sexton este es el método que recomienda Google:

<script type="text/javascript">
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}
if (window.addEventListener)
  window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
  window.attachEvent("onload", downloadJSAtOnload);
else
  window.onload = downloadJSAtOnload;
</script>

Esta porción de código la debemos de insertar justo antes de la etiqueta </body>, al final de nuestro documento html.

Asegúrate que la ruta al fichero es correcta. En este ejemplo el fichero defer.js debe de estar en el mismo directorio que el fichero HTML.

Parece una práctica fácil de implementar y con buenos resultados, así que ¿por qué no usarla?

Ajustar el tamaño de texto según su contenedor

En mi último proyecto necesito ajustar el tamaño de texto según el tamaño de su contenedor. Inicialmente opte por usar el plugin FitText.js, que aunque funciona muy bien no era lo que necesitaba, ya que yo desconozco el tamaño de la cadena de texto, y con fitText  necesitas saberlo para proceder a ajustarlo.

Por eso, y gracias a mi compañera Nerea, voy a usar esta función, que encaja mejor con lo que busco:

ACTUALIZACIÓN (Nov-13): La función que usaba tenía serios problemas de rendimiento, y la he actualizado mejorando bastante su comportamiento y funcionalidad. A parte de mejorar el rendimiento, tambien he añadido 2 parametros. El primero «set_max_size» es para decirle al plugin si quieres limitar el redimensionado a un tamaño máximo (el dado por el tamaño del texto en el CSS) y si quieres un tamaño mínimo «min_size»

adjustTextSize

 

(más…)

Editor de texto HTML WYSIWYG sencillo y muy ligero

Cuando necesito incorporar un editor de texto HTML suelo necesitar algo muy sencillo y ligero, y siempre acabo recurriendo a los más populares como el TinyMCE, que está muy bien, pero tiene demasiadas opciones para mis necesidades, y ocupa un poco más de los deseado.

En esta ocasión me han recomendado el TinyEditor, y creo que he dado en el clavo. Es un editor de los mas ligero (menos de 10 Kb), y con todas las opciones básicas que podemos necesitar.

editor

(más…)

Mensaje de alerta si abandonas un formulario sin salvar

En ocasiones creamos formularios en los que queremos prevenir que el usuario abandone la página sin haber salvado los cambios.

Para conseguir esto podemos usar el metodo de javascript, que es invocado antes de que el ususario se vaya de la pagina (click en un link, o refresco de pantalla) :

window.onbeforeunload  = function(e) {
   return "message";
};

Pero no es suficiente con esto, tenemos que cambiar un poco esta función, para mejorar el comportamiento en varios navegadores, y para evitar que salga dicho mensaje al hacer submit del formulario.

$('form').find(':input').change(function(){
	var dirtyForm = $(this).parents('form');

	// change form status to dirty
	dirtyForm.addClass('unsavedForm');
});

$('form').submit(function () {
	$(this).removeClass('unsavedForm');
});

window.onbeforeunload = function(e) {
	e = e || window.event,
	message = "lorem ipsum";

	// show alert if there are some unsaved form
	if ($('.unsavedForm').size()) {
		// For IE and Firefox
                if (e) {
                  e.returnValue = message;
                }
                // For Safari
                return message;
	}
};

Con este pequeño código conseguiremos nuestro objetivo.

El alert que sale es de sistema (vamos, muy feo) y no se puede customizar mas que el mensaje (y no en todos los navegadores), pero evitaremos alguna que otra perdida de datos por parte de nuestros usuarios.

Espero que os sea de ayuda.

¿Qué debo conocer para empezar a Maquetar?

Una buena amiga me ha pedido recientemente ayuda para introducirse en el mundo de la maquetación. Aunque ya llevo muchos años maquetando, nunca he tenido que formar a nadie desde cero, y he querido aprovechar mis consejos para ella en un nuevo post.

La maquetación web se sabe donde empieza; en la combinación de HTML (estructura del código) y CSS (estilos aplicados al código HTML), pero donde acaba ya no está tan claro. Según a quien preguntes, algunos te dirán que termina ahí, y otros te dirán que el Javascript (comportamientos) también forma parte del «pack». Yo no tengo ninguna duda de que el no se puede separar Javascript y maquetación, y que un maquetador que no sabe aplicar Javascript en sus aplicaciones web, no es un buen maquetador.

Antiguamente las tres patas del «pack» se agrupaban en un fichero HTML, pero es una buena practica el desacoplar estructura (HMTL), de estilos (CSS) y de comportamientos (Javascript). Esto hace que el código esté mejor estructurado, sea mas limpio, y sea mas sencillo trabajar en equipo.

¿Por donde debo empezar?

Pues en mi opinión creo que se debe de empezar por conocer bien HTML. Es un lenguaje muy sencillo, y con el que muy rápido veremos resultados. Puedes consultar este manual online de introducción a HTML.

Posteriormente deberíamos de familiarizarnos con HTML5, la versión actual de HTML, para conocer el potencial actual y futuro de este lenguaje.

Una vez que nos sintamos cómodos con HTML, deberíamos pasar a conocer CSS, y profundizar todo lo que se pueda en las técnicas más avanzadas de CSS, ya que será la base de nuestro trabajo.

Con estos dos lenguajes de programación ya sabríamos lo básico para empezar a maquetar, pero a poco que maquetes vas a sentir la necesidad de conocer Javascript para ampliar tus superpoderes.

Deberías de conocer al menos lo básico de Javascript, y luego pasarte a un framework como jQuery, que facilitará mucho tu tarea de trabajar con Javascript.

¿y esto es todo?

Pues en lo que a conocimiento teórico se refiere si. Si lees todos los enlaces anteriores tendrás la base teórica necesaria para ser un buen maquetador, pero el 90% del éxito de tus trabajos se basaran en práctica, práctica y práctica.

Cuando veas paginas que tengas cosas que te gustan, no dudes en revisar su código, y averiguar como lo han hecho. Con estos ejercicios obtendrás mucho conocimiento práctico.

¿Que herramientas debo de usar?

Pues para crear y editar código yo te recomiendo que uses un editor de textos sencillos. Yo uso el notePad++, pero puedes usar con el que mas cómodo te sientas.

Podrías usar programas que te facilitarían mucho la tarea de maquetar páginas, como DreamWeaver, pero yo creo necesario el escribir tu propio código desde cero, sin ayudas, ni autocompletados, ya que este esfuerzo extra repercutirá de manera muy positiva en el conocimiento de las etiquetas, y en consecuencia en nuestra valía como maquetadores.

La herramienta de la que no te debes de separar ni a sol ni a sombra es del inspector de código de tu navegador favorito. Si usas Chrome, tendrás instalado por defecto el inspector de código (pulsa F12 en chrome, si usas windows, y lo verás). En cambio si eres de Firefox, tendrás que instalarte el Firebug, ya que aunque Firefox tiene un inspector de código instalado por defecto, creo que todavía no es muy potente.

Por último, instálate un arsenal de navegadores, con los que pruebes todo tu código. Que hagas algo que se vea bien en Firefox, no significa que se vea bien en Explorer, y aunque con las nuevas versiones de Explorer cada vez son menos las incompatibilidades, todavía es algo que te dará muchos dolores de cabeza.

Yo en mi caso, pruebo mis páginas con: Chrome, Firefox, Opera, Explorer 9, Explorer 8 y Explorer 7. Creo que ya no deberíamos de pelearnos con Explorer 6, su tiempo pasó.

Y para empezar no se me ocurre ningun consejo mas, aunque seguro que los habrá. Sientete libre para solicitar o aportar más consejos en los comentarios.

Media Queries en Internet Explorer 6-8

Surgen muchos problemas a la hora de hacer aplicaciones web fluidas con responsive design. Uno de ellos es que Internet Explorer (hasta su versión 9) no acepta nativamente las css media-queries (mostrar estilos diferentes según el tamaño del navegador).

Hay unos cuantos plugins javascript que solucionan este problema:

  • respond.js: quizás el más popular, pero yo no lo he usado por que la necesidad de tener que incluir varias llamadas a diferentes ficheros. El motivo de tener que hacer esto es que el plugin hace una petición por ajax de los CSS con cada redimensión.
  • css3-mediaqueries-js: Mi elegido por la simpleza, y por que simplemente funciona. Su alcance es más limitado, pero es mas que suficiente para el uso que yo hago de

Y vosotros, ¿Cual habéis usado?

HeadJS un script para todos los demás

HeadJS es una librería javscript que tiene multitud de virtudes, pero sobre todas ellas yo destacaría las siguientes:

Cargar Javascript en Paralelo:

HeadJS nos facilita cargar varios javscript en paralelo, pero ejecutarlos en orden.

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
    // all done
});

Esto nos permite cargar librerías javascript sin bloquear la página, y reducir el número de peticiones al servidor.

Puede parecer una tontería, pero el cargar los javascript en paralelo puede hacer que nuestra pagina reduzca el tiempo de carga en varios segundos, dando a nuestros usuarios la sensación de que nuestra web es mucho más rápida.

Degración de CSS 3

HeadJS añade clases a la etiqueta HTML, informándonos de la capacidad del navegador para soportar determinadas propiedades de CSS3

/* target CSS for browsers without box-shadow support */
.no-boxshadow .box {
    border: 2px solid #ddd;
}

Diferentes diseños para diferentes dispositivos

Podemos definir diferentes estilos en función del tamaño de la pantalla. Si el usuario redimensiona la pantalla, las reglas CSS cambiarán automáticamente.

/* screen size less than 1024 pixels */
.lt-1024 #hero { background-image:(medium.jpg); }

/* fine tune for mobile phone */
.lt-640 #hero { background-image:(small.jpg); }

Otras Ventajas

  • También nos permite usar etiquetas de HTML5 aunque el navegador todavía no lo soporte
  • Detección del navegador
  • Es una librería muy ligera. Tan solo pesa 2.5Kb (minimizada y comprimida)
  • …

Si queréis conocer en mayor profundidad esta librería os recomiendo leer la documentación desde su web

Uso

Todos los scripts se cargar a través de head.js()

// el caso mas simple.carga y ejecuta un fichero js.
head.js("/path/to/file.js");

// carga un script y ejecuta una function cuando se cargue
head.js("/path/to/file.js", function() {

});

// carga ficheros en paralelo pero ejecutalos en el siguiente orden
head.js("file1.js", "file2.js", ... "fileN.js");

//carga los ficheros  en paralelo y ejecutalos segun se carguen
head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

//el ejemplo anterior también se puede poner así
head.js("file1.js").js("file1.js").js("file3.js");

Con head.js() podemos ejecutar javscript antes de que los scripts sean cargados. Esto elimina ese molesto lapso de tiempo que pasa desde que se carga el HTML de la pagina hasta que se ejecuta el $(document).ready()

Organización de Script

// llamar a una funcción después de que todos los scripts hayan sido cargados
head.ready(function() {   });

// llamar a una funcción cuando un determinado fichero sea cargado
head.ready("file2.js", function() {   });

Estos es útil cuando tienes ficheros javasciprt muy grandes, y quieres ejecutar algo antes de que sean cargados.

// head.ready() tambien se puede escribir así

head(function() {   });

Configuración

HeadJS es configurado con un variable global llamada head_conf antes de que el script sea cargador:

<script>
    var head_conf = { screens: [640, 1024, 1280, 1680] };
</script>

<script src="/js/head.min.js"></script>

Conclusión

En definitiva, esta parece una herramienta extremadamente útil y fácil para cargar asíncronamente nuestro javascript. Además aporta otras ventajas, que siendo en mi opinión de menor importancia, pueden ser también de gran utilidad.

Estoy deseando poderlo probar en un proyecto real, y así comprobar de todo lo que es capaz.

Y Vosotros ¿lo habéis probado ya? ¿os ha gustado? ¿conocéis alguna otra alternatíva?