lunes, 17 de diciembre de 2012

"Las solicitudes que se indican a continuación están serializadas. Intenta dividir las dependencias para que se carguen en paralelo."

Hoy toca optimizacion.

Si estais optimizando vuestra web con Google Page Speed y os suelta esto... :

Las solicitudes que se indican a continuación están serializadas. Intenta dividir las dependencias para que se carguen en paralelo.

Significa que debéis intentar reducir las llamadas a archivos de forma repetida y agrupar lo máximo posible, reduciendo así la cantidad de Request al servidor.

Este mensaje es habitual ya que es probable que en la misma pagina web haya varios CSS, JS's o imágenes estáticas que se están llamando varias veces durante la interpretación del código.

SOLUCIÓN:

Agrupar cuando sea posible esos archivos (y minimizarlos / comprimirlos).

En el caso de archivos CSS y JS, se pueden minimizar, agrupar y reducir con esta herramienta: http://www.refresh-sf.com/yui/

Esta otra optimiza vuestro código Javascript (una vez lo hayáis agrupado todo puede ser útil . Lo recompila para optimizarlo, checkea la sintaxis, etc  https://developers.google.com/closure/compiler/

Si lo veis interesante podríamos hacer un ciclo de Optimizacion de tiempos de carga de paginas web, tratando una por una las causas mas comunes y dando una solución para que vuestras paginas carguen lo mas rápido posible

Hasta ahora!

viernes, 16 de noviembre de 2012

Error 403 en wordpress, permisos y seguridad


Problema: Al instalar un plugin en wordpress las imagenes no se ven por errores del tipo 403 Forbidden access.

Solución: Es un error de permisos, debido a falta de permisos en la carpeta / archivo o bien hay algun modulo en nuestro servidor que bloquea el acceso.

Lo más probable es que ocurran estos problemas al cambiar de servidor o instalar un plugin nuevo a la base de Wordpress.

- La solucion más habitual es dar permisos de lectura y escritura a las carpetas de wp-content y a los archivos en cuestion. Hacedlo de forma recursiva para que se apliquen a todos los subdirectorios (con el Filezilla se puede hacer, si nuestro usuario de FTP tiene los permisos para hacerlo).

- Otra forma de cambiar los permisos es utilizar el panel de control de vuestro alojamiento. Explorad dentro del panel de control a alguna opcion tipo "control permisos" "permisos directorios"...

Hasta aquí lo fácil, pero este error puede tener una causa algo más complicada de resolver. Se trata que el servidor donde esta alojado nuestro blog tenga algun modulo de seguridad e impida accesos/llamadas a los archivos o impida que hagan hotlinking de nuestras imagenes (que se usen en otros blogs por ejemplo).

Más soluciones:

- Según el modulo de seguridad instalado podremos "saltarlo" añadiendo algunas opciones en el archivo .htaccess de la raiz. Por ejemplo:


- Otra forma de arreglar esos problemas es averiguar quien y como lo bloquea (revisad el error_log del servidor, a veces visible como carpeta desde vuestro FTP). Si es un modulo de apache y no lo podéis "saltar" con lo comentado anteriormente, añadid una excepción en sus archivos de configuración (normalmente en usr/local/apache/conf/MODULO/whitelist.conf)

Me topé un caso en que habia una regla (la 666666 del modulo de seguridad de apache) que bloqueaba la redimension de imágenes. Añadiendo esta regla en el servidor se arreglo :)

<LocationMatch "/wp-content/themes/theagency/image.php">
SecRuleRemoveById 666666
</LocationMatch>

Espero que os haya servido de ayuda, saludos!

viernes, 26 de octubre de 2012

¿Cómo arreglar ñ, acentos y carácteres extraños en páginas web? Varias soluciones:


Problema: Se ven caracteres raros en lugar de los acentos o caracteres especiales como la Ñ o ¿

Solución: El origen del problema puede ser variado por lo que la solución puede variar. Las pongo en el orden personal de "popularidad".

  • Codificación del archivo, tiene que coincidir con el formato que envía el servidor; ANSI, UTF-8 etc, si desconoces que juego utiliza el servidor es cuestión de prueba y error, y probar caso por caso.
  • Indicar mediante un tag "meta" la codificación usada en la página:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  • Indicar en el archivo que genera la pagina la codificación de lo que envía (por ejemplo en PHP y UTF-8):

header('Content-Type: text/html; charset=UTF-8');
    • Indicar en el archivo .htaccess la codificación por defecto

    AddDefaultCharset utf-8
    • Revisar el contenido por si viene generado desde una base de datos. Revisar si esta codificado en origen o si se debe antes descodificar para mostrarlo (función urldecode(str) por ejemplo).
    • Si no hay mas remedio y se precisa una solución rápida, utilizar códigos HTML para generar dichos caracteres:
    a = &aacute;
    
    é = &eacute;
    
    í = &iacute;
    
    ó = &oacute;
    
    ú = &uacute;
    
    ñ = &ntilde;
    
    € = &euro;

      Si os habéis encontrado con este problema y tenéis otra solución, compartidla en los comentarios!

      domingo, 21 de octubre de 2012

      Vincular Blogger con Google analytics

      Problema: Ver las estadísticas de visitas de mi blog de Blogger en Google Analytics

      Solución rápida: Configuración / Otros / Google Analytics (al final de la página, introducir un codigo UA nuevo).

      Paso a paso:
      No es necesario ningun widget nuevo ni nada, esta simplemente un poco escondido. Necesitaras crear un nuevo registro en tu cuenta de Analytics y copiar el codigo UA en la casilla de configuracion.


      El codigo "UA" lo puedes encontrar en la pestaña "Administrador / Información de seguimiento" de tu cuenta de Google Analytics:



      sábado, 20 de octubre de 2012

      Scroll de pagina con jQuery

      Problema: Utilizar links internos para mover el scroll en una pagina web, utilizando jQuery

      Solución rápida:

      1. Añadir este script:
       $(".scroll").click(function(event){
              event.preventDefault();
              var full_url = this.href;
              var parts = full_url.split("#");
              var trgt = parts[1];
              var target_offset = $("#"+trgt).offset();
              var target_top = target_offset.top;
              $('html, body').animate({scrollTop:target_top}, 500);
      });
      
      2. Link:
      <a class='scroll' href='#finalPagina'>pulsa aqui para ir al final de esta pagina</a>
      
      3. Etiqueta "destino":
      <span id="finalPagina"></span>


      Paso a paso:
      Esta es una buena solución para dar un buen toque a tu pagina cuando hay mucho contenido y el usuario tiene que utilizar mucho el scroll lateral. Muy usado al final de paginas para "Go To Top" o tambien usado en pagina de "condiciones de uso" para ir directamente a algun apartado en concreto.

      El hecho de utilizar jQuery es porque nos permite, al implementarlo, añadir muchas otras funcionalidades y alterar su comportamiento. Ademas, es una plataforma de desarrollo muy extendida y estandarizada por lo que es una buena solucion independientemente del navegador utilizado.

      La funcion en jQuery:
      La primera parte sera añadir a nuestro archivo de javascript el evento "click" para los tags que tengan como clase "scroll". El nombre de la clase, se puede modificar por el que queramos.
      $(".scroll").click(function(event){ ...

      Como el "hacer un click" es un evento, debemos quitar el comportamiento standard. En jQuery lo evitamos asi:
      event.preventDefault();

      Las siguientes variables captan el atributo "href" del tag y parten (split) la cadena por donde haya el signo "#".
      var full_url = this.href;
      var parts = full_url.split("#");

      Con la cadena partida, nos quedamos con la parte interesante [1]
      var trgt = parts[1];
      var target_offset = $("#"+trgt).offset();
      var target_top = target_offset.top;

      Obtenemos a que altura desde el "top" esta nuestra etiqueta de destino mediante la función offset();
      var target_offset = $("#"+trgt).offset();
      var target_top = target_offset.top;

      Finalmente, con la función animate jQuery movera la pantalla hasta la posicion de la "etiqueta destino" en 0,5 segundos (500 ms).
      $('html, body').animate({scrollTop:target_top}, 500);

      PDPF (Post data para flamers): Evidentemente no hace falta declarar tantas variables, ya que muchas se podrian agrupar o concatenar. Podria quedar asi (más optimo en recursos).
      $(".scroll").click(function(event){
      event.preventDefault();
      $('html, body').animate({scrollTop:$("#"+this.href.split("#")[1]).offset().top},500);}


      Las "etiquetas":

      Por una parte pondremos una etiqueta <a> con los atributos "class" y "href". A esta etiqueta se puede dar el estilo que queramos y poner dentro, texto o imagen igual que un "anchor" normal y corriente:

      <a class='scroll' href='#finalPagina'>Go Top!</a>
      La etiqueta destino es en este caso un simple <span>, pero podria ser cualquier otro tag, pero para que funcione el "id" debe coincidir con el "href" del link anterior.

      <span id="finalPagina"></span>

      Espero que haya servido de ayuda, seguro que hay otras mas soluciones, si las quereis compartir dejadlas en los comentarios, gracias !

      viernes, 19 de octubre de 2012

      Post [0] ¿De que va este blog?


      Me presento, me llamo Joan y soy internauta desde el 96. Desarrollador de soluciones web de profesión.

      La intención de este blog no es otra que dar soluciones a problemas comunes en el desarrollo de páginas web. A veces es difícil encontrar la solución adecuada, a veces es la mezcla de varias soluciones o cuando la encuentras, está explicada de una forma completamente complicada que es dificil de aplicar.

      Así que, en mis ratos libres iré publicando las soluciones que me he encontrado, que (creo) a su tiempo son comunes en gente que desarrolla paginas web. Este blog es una herramienta para mi también, ya que a menudo tengo que recurrir a buscar paginas para arreglar los mismos problemas.

      Al publicar la solución intentare poner la versión corta y rápida, esa que cuando la ves dices... "era esto! vaya tontería..." y otra más detallada, para ver paso por paso la solución e intentar comprender el funcionamiento.

      Quizá también te encuentres con algún post que me parezca oportuno de publicar y que como desarrollador que (posiblemente) eres te pueda interesar. Ah! y si tenéis alguna duda y algo en lo que no dais la solución intentare ayudaros o utilizar este blog para que otros webdevelopers den su opinión.