Cambiando las tipografías en Firefox

Todo diseñador (normalmente) especifica el tipo de tipografía que tendrá su página web y eso Firefox suele respetarlo.


Pero... en el caso de Investigando Ubuntu, Firefox (en Ubuntu) parece no respetar mucho mi Tipografía, así que una buena alternativa es cambiarla directamente desde el navegador a nuestro gusto, sin depender de los diseñadores.


*La primera Tipografía es la que se vería en Firefox (con Ubuntu) que se trata de "Serif" y la segunda sería si yo la cambiara a "FreeSerif".

Para cambiarlas nos situamos en "Editar/Preferencias/Tipos y colores" y elegimos la que queramos con sus características. Si se quisiera usar esa siempre para todo, inhabilitar la opción de "permitir a las páginas elegir sus propia Tipografía"

Firefox Aurora en los repositorios PPA

Firefox 6 ya se encuentra en fase de pruebas y se puede descargar desde la página oficial de Mozilla en distintos idiomas, pero podemos instalarlos desde los repositorios PPA de Ubuntu de una forma más sencilla:

Las versiones antiguas serán actualizadas sin eliminar los complementos.

Añadimos el repositorio PPA de Firefox Aurora
sudo add-apt-repository ppa:ubuntu-mozilla-daily/firefox-aurora
Actualizamos
sudo apt-get update
 sudo apt-get upgrade
*La instalación de Aurora está indicada para las versiones 10.10 de Ubuntu en adelante, instalándose la segunda versión Alpha del Firefox 6.

comentarios

El botón de "apagar" en GNOME 3

Si ya te has instalado GNOME 3 y te has vuelto loco buscando el botón de "apagado" y solo has encontrado el de "suspender", la solución a este problema es muy sencilla, tan solo situaros en vuestro usuario, y presionando el botón "alt", aparecerá el botón de apagado.


Uno se vuelve loco buscando estas cosas tan... necesarias.

comentarios

Instalando GNOME 3 en Ubuntu

Con las nuevas modas, el entorno de escritorio actual es Unity, algo que para la mayoría es un error. Con la salida de GNOME 3 me dio curiosidad y lo probé, definitivamente, me sorprendió.

La forma rápida de instalarlo, es la que uso yo mismo vía PPA del proyecto:

sudo add-apt-repository ppa:gnome3-team/gnome3
sudo apt-get update
sudo apt-get dist-upgrade
sudo apt-get install gnome-shell
Con esto ya lo tendremos instalado, falta reiniciar el equipo y elegir al iniciar la sesión el entorno de escritorio GNOME. El idioma también hay que elegirlo y salir de la sesión para que empiece a funcionar.

Para configurar el escritorio, tendremos que ir a "usuario" y "configuración del sistema". Pero a veces se da el caso de que el escritorio no responde, para ello instalamos esto:
sudo apt-get install gnome-shell gtk3-engines gnome-tweak-tool gnome-themes gnome-themes-selected gnome-themes-standard
Nos situamos ahora en "ajustes de retoques avanzados", y en "File manager" cambiamos la opción predeterminada para manejar el escritorio. Para rematar la faena, podemos hacer compatible aún más el escritorio activando las opciones en la interfaz.

Nada más que añadir sobre la instalación de GNOME 3, la apariencia depende de cada uno.



comentarios

Pasando los textos al sistema binario

Seguramente ya conozcáis lo que es el sistema binario, aquel lenguaje que está compuesto únicamente por 0 y 1. Este lenguaje se utiliza principalmente en computadoras (apagado o encendido), y así traducir todo lo que queramos en textos, imágenes, sonidos...


NickCiske.com nos da la posibilidad de traducir cualquier texto normal y corriente en base 2, es decir, en binario. Personalmente no le encuentro utilidad alguna, pero uno se divierte.

Ejemplo:

Soy un texto normal y corriente en castellano, ¿se puede entender?

Esto en binario sería algo así:

010100110110111101111001001000000111010101101110001000000111010001100101011110000111010001101111001000000110111001101111011100100110110101100001011011000010000001111001001000000110001101101111011100100111001001101001011001010110111001110100011001010010000001100101011011100010000001100011011000010111001101110100011001010110110001101100011000010110111001101111001011000010000010111111011100110110010100100000011100000111010101100101011001000110010100100000011001010110111001110100011001010110111001100100011001010111001000111111

comentario

Las imágenes semitransparentes

Si ya sabemos hacer el fondo de una imagen transparente, falta aprender a diseñar imágenes semitransparentes con las que poder adornar nuestra web, blog o simplemente para divertirnos un rato.

Estas imágenes pueden ser de gran utilidad cuando las queremos colocar en sitios específicos (flechas de los slider, botones, o sprites ), así las cosas que hay detrás seguirán viéndose. Aquí va un ejemplo:


La imagen de la izquierda es una imagen normal con fondo transparente, y la de la derecha es una imagen semitransparente con fondo transparente. ¿Cómo lo demuestro?, muy fácil añadiendo algo detrás de cada una así:


Sobran las palabras ¿verdad?, hacerlo es bastante sencillo, creamos un fondo transparente a la imagen, seguidamente nos situamos en "Filtros/Luces y sombras/Moteado...", ahora ajustamos los parámetros que nosotros queramos añadir a la imagen; en este ejemplo lo he realizado así:

comentarios

Decora tu Firefox con Personas

En antiguas entradas me empeñé en personalizar Firefox de una manera general, pero existen otras maneras más fáciles que no requieren conocimientos en CSS y que solo con un poco de practica en un editor de imágenes, podemos modificar nuestro navegador como queramos.

Podemos cambiar el tema de una forma fácil y rápida sin cambiar la visión de nuestro navegador usando Personas, e integrarlo en nuestro navegador con el complemento Personas plus.

Para cambiar los temas podemos hacerlo desde la galería de temas de la página oficial o con el complemento dar click en el zorro que está abajo a la derecha y elegir el tema de la lista. Otra forma es hacer el tuyo propio y subirlo a personas para que toda la comunidad se beneficie. Por ejemplo, el tema de Investigando Ubuntu sería este:

Esta imagen puede descargarse para Firefox desde personas y se instalará directamente 


1er paso: Nos registramos, y aceptamos los términos.

Lo primero de todo sería crearnos una cuenta en personas, y a continuación nos vamos a la pestaña de crear la persona. Tendremos que aceptar las condiciones del servicio y elegir la licencia que tendrá nuestro diseño.

2do paso: Creamos la persona.

Una vez aceptados los términos y elegido la licencia, crearemos la persona. Ésta deberá tener un nombre y las características de los colores del texto, además de otras cosas.

3er paso: Terminamos.

Una vez hecho esto, la persona debe ser aprobada. El proceso puede tardar unos pocos días, hasta entonces toca esperar impacientemente a que se publique.

comentarios

Cambiar aspecto de Firefox usando CSS

Esta vez quisiera cambiar el aspecto de Firefox de una forma más personal y profesional. Para ello necesito ChromEdit Plus, un complemento para Firefox que me permite reescribir el archivo donde se encuentra los estilos predeterminados de Firefox o simplemente buscar el archivo userChrome.css y userContent.css y modificarlos.

Paso 1: Aprendiendo a usar este complemento.

Desde la página oficial tenemos la opción de añadirlo a Firefox directamente o descargarlo a nuestro disco. Si queremos usarlo ya, la opción más sencilla es añadirlo a Firefox.

Una vez instalado y activado, se encontrará en Herramientas de Firefox. Lo abrimos y veremos que nos sale una ventana con tres pestañas. La primera "userChrome.css", es la que me interesa para modificar el aspecto de Firefox.

Paso 2: Añadir estilos. 

Para añadir nuevos estilos tenemos que tener en cuenta la palabra !important. ¿Qué es?, pues es una palabra clave para ignorar las reglas de cascada. Cualquier definición que vaya acompañada de un !important tendrá mayor importancia que cualquier otra, y por tanto, todas las reglas predeterminadas serán ignoradas siempre y cuando se sustituyan con esta palabra. Un ejemplo sería este:

window {
  font-size: 3.5mm;
  font-family: "Arial", serif;
  font-weight: bold;
}

*Este código dice que el tamaño de los textos en las ventanas es 3.5mm, que la familia es Arial y está en negrita, pero yo no quiero este estilo, así que en el complemento añado esto:

window {
  font-size: 4.9mm !important;
  font-family: "Palatino", sans-serif !important;
  font-weight: normal !important;
}

Así sustituyo el tamaño del texto, la familia y le quito la negrita. El ejemplo gráfico sería así:


También podría cambiar el CSS del color de la barra así:

.autocomplete-richlistitem {
background: #333333 !important; /* Color de fondo */
color: #FFFFFF !important; /* color del texto */
}
.autocomplete-richlistitem:hover,
.autocomplete-richlistitem[selected="true"] {
background: #666666 !important; /* color del Fondo al pasar el cursor */
}


Es simple CSS con un !important, nada más, todo depende del interés y paciencia de uno. Algunas bases de esto se encuentran en un ejemplo de Mozilla.

¡Suerte y ánimo!, con un poco de perseverancia se puede conseguir crear un tema personal y único.

comentarios

Cambiando el aspecto de Firefox

Firefox puede personalizarse con los temas que desarrolladores han creado modificando el CSS del tema predeterminado. Estos son muy fáciles de instalarlos, ya que la mayoría de ellos están añadidos a los complementos de Firefox.

Para instalarlos basta con elegir el tema y "añadir a firefox", cuando termine la descarga tenemos que aceptar la instalación y reiniciar el navegador. ¡Ya tengo el complemento!

Ahora, si no me gustan o me he aburrido de ellos, puedo cambiarlos si me voy a "Herramientas/Complementos/Apariencia" y elegir entre los temas que me he instalado.

Es extremadamente sencillo y aunque no lo recomiendo para investigar, si lo recomiendo para hacer las cosas más rápidas y por curiosidad.

comentarios