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.