Técnicas de optimización web

He encontrado una página muy interesante que habla sobre qué cosas hay que tener en cuenta si queremos optimizar nuestro desarrollo de front-ends.

La página es esta: Como perder peso (en el navegador)

Y comenta muchimas cosas interesantes. Yo voy a destacar las siguientes:

  • Usar archivos CSS desde la etiqueta <link> y Javascrit desde <script src>.
  • Los estilos en el <head>, los script al final.
  • Usar atributo async.
  • Comprimir y combinar el CSS.
  • Si voy a usar un FOR para recorrer un array, obtener la longitud del array antes.
  • Evitar document.write
  • Almacenar en variables lso elementos del DOM con los que vayamos a trabajar.
  • Comprimir y combinar el JavaScript.
  • Usar sprites.
  • Indicar tamaño de las imágenes.
  • No alterar el tamaño de las imágenes.
  • Optimizar las imágenes.

 

Extensiones LibreOffice: COOoder

COOoder es una interesante extensión para OpenOffice/LibreOffice que permite colorear la sintaxis de textos que representan códigos de diversos lenguajes de programación.

Podemos descargar la extensión de su Pagina Oficial o desde aqui:  coooder-1.1.2.oxt

Aunque la última versión es de septiembre de 2012, funciona perfectamente en LibreOffice 4.2.

Una vez obtenido el archivo .oxt, abrimos LibreOffice y nos vamos a Herramientas->Gestor de extensiones. En el cuadro que se nos abre pulsamos sobre añadir y buscamos el archivo que hemos descargado.

Cuando terminamos de instalar la extensión, debemos reiniciar el LibreOffice. Si todo ha ido bien, al final del panel Herramientas nos debe aparecer la opción complementos (si no la teníamos ya) y dentro de esta, la entrada Coooder.

Para usar el coloreado solo tenemos que seleccionar el texto a transformar, ir a Herramientas->complementos->coooder y elegir el lenguaje de programación.

Mi Android no conecta a internet

Recientemente he estado trasteando con un Xperia U. Le he puesto/quitado diferentes firmwares y ROMS.

Al final lo he downgradeado a la versión 2.3.7 de android tal y como se explica en este hilo y el teléfono va muy muy bien.

El único problema que he tenido es que no conectaba a internet (obviamente hablo sin utilizar wifi). La solución es sencilla, hay que configurar el APN de tu operador.

Dejo por aquí la configuración de los APN de movistar tanto para android 2.3.X como para 4.X:

Configurar APN Movistar en Android

Recorrer un objeto JSON en Javascript

Supongamos que tenemos un objeto JSON sencillo  como este:

var args = ['jaime', 'amparo@amparo.es', 'hola a todos'];

La manera más simple de recorrer ese objeto es usando un for:

for(var json in args){
    console.log(args[json]);
}

Si el objeto JSON tuviese valores asociativos:

var args = {
   "nombre": "jaime",
   "email": "amparo@amparo.es",
   "mensaje": "hola a todos"
}

Usaríamos el mismo for para recorrerlo y mostrar tanto sus claves como sus valores:

for(var json in args){
    console.log(json+': '+args[json]);
}

Bloquear listado de directorios

Cuando hacemos un proyecto web, lo normal es ser ordenado y tener varias carpetas. Carpeta para las hojas de estilo, carpeta para los archivos JavaSript, para las imagenes…

No se si os habéis parado a pensar alguna vez en esto pero, cuando subimos todas esas carpetas a nuestro host… nada impide que un visitante ponga la ruta de dichas carpetas en la URL y visualice el listado de todos los archivos y directorios que se encuentran dentro. Probadlo con algún proyecto vuestro que tengáis subido.

¿Cómo evitamos eso?

Los más rápidos habrán pensado: “Fácil, coloco un archivo index.html en cada carpeta  y así evito que se visualice nada”.

Pues es perfectamente correcta esta respuesta :) Ya sabemos  que, si dentro de una carpeta existe un archivo llamado index.html (si es .php os recuerdo que también vale), en la mayoría de los casos el navegador mostrará ese archivo (a no ser que se haya cambiado deliberadamente la configuración del servidor, que repito, no es lo normal).

Sin embargo, no me negaréis que esta solución es poco elegante. Por ejemplo: ¿Qué pinta un archivo .html (o .php) en el directorio de las imágenes?

Aquí os muestro una solución más elegante y correcta que la anterior:
Lo que tenemos que hacer es crear un archivo llamado .htaccess (Alguno de vosotr@s ya sabéis para que sirve este archivo. Para el resto, os basta con saber que es un archivo usado para configurar el comportamiento del servidor apache).

Dentro de ese archivo, tan solo debemos poner esta línea: Options All -Indexes

Una vez escrito eso, grabamos los cambios y guardamos el archivo en el directorio que queremos bloquear. De esta forma, cada vez que alguien intente acceder a dicho directorio le saldrá algo como esto:

Mensaje de bloqueo de un directorio

Mensaje de ejemplo de bloqueo de directorios