jueves, 6 de septiembre de 2012

Centrar un div en nuestra web con css

Si programáis en entorno web es bastante probable que hayáis encontrado este problema. Entre los atributos de estilo de un div podemos especificar la alineación central del contenido del div (con text-align), pero no del propio contenedor.

Algunos hemos hecho "ñapas" del tipo de declarar un div contenedor con text-align=center que contenga al div que queremos centrar, pero la solución es mucho más sencilla: poner tanto el margen derecho como el izquierdo a auto:


En css



#centrar{ 
  width:500px; /* Por ejemplo, si ocupa el 100% de la página no hay centrado ;) */
  margin-right: auto;
  margin-left: auto; 
  /* Estas dos siguientes son sólo para ilustrar mejor el ejemplo */
  padding:20px;
  color:red;
 }

(Y en nuestra página)
<div id="centrar">div centrado con contenido a la izquierda</div>

En HTML 


<div style="width:500px;margin-left:auto;margin-right:auto;background-color:red;padding:20px;">div centrado con contenido a la izquierda </div>

El resultado



Está probado en Firefox 15 y Explorer 9. Espero que os sea tan útil como a mí

martes, 4 de septiembre de 2012

Convertir juegos de caracteres latin1 a UTF-8

Un problema frecuente que nos encontramos al diseñar o migrar bases de datos es la elección del juego de caracteres. Para el castellano nos encontramos con varias alternativas, destacando dos principalmente:


  • Latin1 o ISO 8859-1 es una norma de la ISO (Organización Internacional para la estandarización) que comprende todos los alfabetos latinos para Europa Occidental (con tildes, caracteres especiales como "ñ" o "ç",etc...).
  • UTF-8 (8-bit Unicode Transformation Format) es un formato de codificación de caracteres Unicode e ISO 10646.
 Las normas ISO utilizan distintos juegos de caracteres que superponen conjuntos de símbolos (por ejemplo, el decimal 243 que corresponde a "ó" en latin1 puede corresponder a otro símbolo en cualquier otra norma ISO).

Una de las principales ventajas de UTF es que no superponen conjuntos de símbolos: el símbolo "ó" será el mismo valor independientemente del UTF que utilicemos (8, 16...).


¿Entonces UTF-8 es mejor que Latin1?


No queremos que los adeptos a uno de los dos sistemas se líen a pedradas con nosotros, así que no entraremos en polémicas ;-). Cada sistema tiene sus ventajas e inconvenientes (UTF-8 es más universal pero, ¿vamos a trabajar con alfabetos diferentes a latin1 como para justificar el mayor tamaño de almacenamiento de los datos?).


El problema


Es posible que hayáis encontrado una base de datos en un juego de caracteres que queráis migrar al otro. Si lo hacéis directamente os quedan caracteres que no tienen correspondencia exacta con el otro (no se representan bien los caracteres especiales del castellano como las "Ñ" y las tildes).


Una solución


Hablo de "una" solución porque afortunadamente existen muchas soluciones para este problema. Esta es la que yo utilizo por su sencillez. Os voy a describir el proceso para el paso de tablas en latin1 a UTF-8, el proceso inverso es similar.

El único software que vamos utilizar (además del propio de nuestra base de datos) es un editor de texto plano capaz de guardar cambiando el juego de caracteres. Yo trabajo con una versión de evaluación de Textpad, aunque el propio Notepad de Windows o el Notepad++ también pueden hacerlo, como casi cualquier editor de texto plano.

Entrando en faena, lo que debemos hacer es:


1) Exportamos

Hacemos una exportación (o dump) de la(s) tabla(s) de la base de datos de origen en texto plano (a un archivo sql). En el ejemplo que os muestro se trata de una tabla de municipios de España exportada en latin1.


2) Editaremos ese archivo exportado:


 Como podéis ver, en la sentencia SQL de creación de la tabla se especifica el juego de caracteres en dos puntos.  Vamos a eliminar el juego de caracteres de la columna y cambiaremos el general por defecto de la tabla a UTF-8 manualmente:




 Por último pulsamos sobre guardar cómo para poder cambiar el juego de caracteres:




3) Importamos el archivo editado


Al importar a nuestra base de datos de destino tenemos que especificar que se trata de un archivo en UTF-8.

En nuestro caso utilizamos una base de datos MySQL con phpMyAdmin:



Si sois de los que preferís utilizar la línea de comandos:


mysql -u mi_usuario -p  db_destino   --default-character-set=utf8 < archivo_editado_utf8.sql


Et voilá, tendremos nuestra tabla importada con sus caracteres correctos sin artefactos en las tildes, "ñ", "ç"...


Activar / Desactivar javascript en Firefox con un clic

Si sois desarrolladores es posible que necesitéis activar y desactivar Javascript para comprobar como se comportan vuestros scripts. Si trabajáis con Firefox habréis comprobado que es un poco farragoso activarlo y desactivarlo (ir al menú herramientas, la pestaña concreta, entrar en las opciones...). Afortunadamente somos muchos los que nos encontramos con este "problema" y hay numerosas soluciones para no perder tiempo en ello. 

También puede ser útil a la hora de copiar contenidos (texto, imágenes...) de esas páginas web que nos deshabilitan el botón derecho del ratón ;-)


QuickJava

Doug G  ha desarrollado la extensión QuickJava para Firefox. Se trata de una barra de botones que nos permite desactivar y activar Javascript con un solo clic:


El botón estará azul o rojo en función del estado de activación de javascript (rojo desactivado). Como podéis observar incluye también la posibilidad de activar y desactivar (en su versión actual):
  • Java
  • Flash
  • Silverlight
  • Cookies
  • Imágenes animadas
  • Hojas de estilos
 Realmente merece la pena, probadla. Podéis descargarla desde:

https://addons.mozilla.org/en-US/firefox/addon/quickjava/




Recomendaciones de Alcasoft