lunes, 18 de julio de 2011

Font-face: carga tu propia fuente tipográfica con CSS

Valencia, 18/07/2011 Gatsu

En el larguísimo camino que me he embarcado junto con otras personas hacia la creación de una web, nos hemos topado con un caso peculiar, para ser más originales, queríamos usar una tipografía de fuente distinta, por supuesto gratuita, pero claro, si no la tiene una persona instalada en su pc, de poco sirve, y mencionar que los usuarios se la descargasen era una idea loca, así que indagando encontré que con CSS3 ya se puede cargar un archivo de fuente tipográfica que esté alojado en el servidor. Para hacer esto utilizaremos el método de CSS @font-face.

El código es el siguiente:

@font-face {
 font-family: miFuente; /* requerido */
 src: source;                        /* requerido */
 font-weight: weight;                /* opcional */
 font-style: style;                /* opcional */
}

En font-family ponemos el nombre que le vamos a dar a la fuente, en src la ruta donde se encuentra el archivo ttf, eot... y los atributos font-weight y font-style son opcionales y son para si queremos negrita, cursiva, etc...
Luego simplemente en donde queramos poner el estilo de letra la fuente personalizada ponemos la propiedad "font-family: miFuente" y listo.

Si solo fuese eso sería demasiado fácil, imagino que a estas alturas ya sabréis que hay distintos navegadores, lo que implica que la compatibilidad con archivos de tipografía de fuente no es la misma en todos, por ejemplo Internet Explorer solo acepta la extensión .eot, mientras que Firefox, Chrome, Opera... menos Iphone, todos soportan .ttf, así que no es buena idea hacer una web en donde según el explorador se vea de una manera u otra porque no cargue, con lo que yo recomiendo hacerlo para IE y para el resto de navegadores. Para facilitar las cosas, primero os pongo esta imagen de que navegadores soportan que archivos


Lo más fácil es que os encontréis fuentes en .ttf, en ese caso utilizad esta web para convertirla a .eot (yo personalmente lo he probado y funciona): kirsle.net

Ahora solo queda la parte del código:

@font-face
{
 font-family: 'miFuenteIE';
 src: url('fuenteIE.eot');
}

@font-face
{
 font-family: 'miFuente';
 src: url('fuente.ttf');
}

body, a
{
 font-family:miFuente, miFuenteIE;
}

Con este código os cubrís las espaldas ante imprevistos por navegadores. Como veis creo 2 "@font-face", no pasa nada, funciona bien, de hecho ví por ahí que en un font-face podías poner varios src, yo no he querido complicarme la vida y lo he dejado más amigable ante el entendimiento propio por si en 2 meses tengo que editar código y me encuentro con éste

martes, 12 de julio de 2011

Aprendiendo a utilizar Cron Job

En un proyecto que tengo con unos colegas de la uni, me he visto ante una duda a la cual mis conocimientos de programador no hayaban respuesta, ¿cómo hacer para que a las 12 de la noche se actualice un campo de la base de datos?. Buscando por internet leo "Cron Job", así que indago sobre ello y milagrosamente descubro que es lo que necesito (bueno, y más).

Cron Job es un servicio de los servidores en Linux (para Windows está el "Programador de Tareas") que ejecuta en un momento, o varios, determinado por el usuario un script en PHP (es decir un archivo .php). Viene muy bien cuando tienes que ejecutar alguna modificación diaria de la base de datos, como actualizar o borrar registros, aunque se le podría dar mas usos (los que php permita).


El pantallazo corresponde al panel del Cron Job que tengo en mi servidor de pruebas, puede que a vosotros os salga algo distinto, pero la lógica es la misma, tienes que colocar la ruta donde se encuentra el archivo .php, y luego ya puedes configurar cuando quieres que se ejecute, si diariamente, semanalmente, cada hora o cuando sea, por ejemplo yo he programado un Cron Job con la misma configuración que sale en la imagen, eso significa que se ejecutará todos los días de todas las semanas de todos los meses a las 00:00, es decir, a media noche.

El servicio de Cron Job es esto, a partir de ahí está el script que cada uno le meta, yo esta noche comprobaré si mi script funciona.