Posts tagged tutorial
Probando y Customizando Firefox 4 Beta 1
Jul 8th
Pues continuando mi saga de los browser blues, Chrome me sigue dando lata de vez en cuando (en realidad creo que me estoy acostumbrando a reiniciar el browser más seguido, lo cual es malo), y vi que salio el beta del Firefox y me dio bastante curiosidad.
Looking good. Me gustan las modificaciones que le hicieron a la interfaz de usuario, ahora es más hmm… streamlined (a veces me choca no saber español). No me termina de convencer al 100%, pero al parecer tomaron notas de lo que hizo el equipo de Google Chrome y subieron los tabs y eliminaron los menus, pero sigue quedando ese espacio vacio despues del botón y me molesta. Por suerte Firefox sigue siendo el browser más customizable, y creo que podemos arreglar esos detalles.
Title Bar + Tab Bar
Primero lo primero: combinar la barra del título con la barra de tabs. Creo que no solo aplica para Firefox, y de hecho esta es la manera en que funciona la extensión Greasemonkey y los UserScripts en general: userChrome.css y userContent.css. Estos dos archivos contienen y definen los fonts, colores y otras propiedades de la interfaz de Firefox, además de lo que se muestra en las paginas. Por default no existen (aunque existe un archivo de ejemplo), pero al crearse, el programa le da prioridad a las propiedades del archivo sobre las default de la interfaz o la página.
Para combinar la barra del título y la barra de tabs, habra que crear (o modificar si ya lo habían hecho antes) el archivo userChrome.css y agregar unas lineas de código. La carpeta del archivo esta medio escondida (y también depende del sistema operativo), pero basicamente se encuentra junto con la información del perfil de usuario de Firefox
XP: C:\Documents and Settings\<user>\Application Data\Mozilla\Firefox\Profiles\<profile>\chrome\ Vista\7: C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>\chrome\
Una vez que encuentren la carpeta, hacen una copia del UserChrome-example.css y lo renombran a UserChrome.css, abren el archivo en su editor de texto favorito (personalmente me gusta Programmer’s Note para este tipo de cosas), y agregar las siguientes lineas despues la linea de @namespace (fuente original: Gdgtry)
#appmenu-button-container{
position: fixed !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 80px !important;
margin-right: 105px !important;
padding-top: 2px !important;
}
#appmenu-button{
padding: 3px 5px 3px 5px !important;
height: 20px !important;
}
Listo, le dan guardar y reinician el browser. Ah, y antes de que se me olvide, este hack se ve feo cuando no existe ningun tab en la ventana, asi que hay que activar la opción de siempre mostrar el tab bar (Always show the tab bar).
No es la única customización que se le puede hacer, esta otra página muestra modificaciones al color del botón, entre otras cosas, y con un poco de conocimiento de CSS de seguro es posible configurarla al gusto.
Customize
Bueno, ahora que ya tenemos combinada la barra del título con la barra de tabs, empecemos a mover otros detallitos. Esto es al gusto de cada quien, pero yo elimine el botón de crear nueva ventana, subi el botón de crear nuevo tab a la barra de tabs, y movi bookmarks a un lado del search. Es simplemente cosa de arrastrar los objetos (y si se quiere eliminar uno lo devuelves al panel). Yo usualmente saco el dialogo dando click derecho en algun espacio vacio de la barra y seleccionando Customize…, pero también es posible abrirlo desde el menú, en Customize – Customize Toolbar….
Omnibar + Downloads
Además de los tabs en la barra del título, el otro feature que más me gusta de Chrome es el Omnibar: la barra de dirección que tambien hace busquedas. Firefox tiene la Awesomebar, que es bastante awesome, pero le falta la parte de ser buscador también. Por otra parte, también me gusta que los downloads aparecen abajo y no en una ventana aparte.
Ambos se pueden lograr en Firefox utilizando extensiones, sin embargo, por la naturaleza de los betas y para evitarse problemas, Mozilla bloquea las extensiones que no han sido probadas y hechas especificamente para las versiones más nuevas del programa. Aun así, es posible brincarse la protección.
Lo primero que hacemos es abrir un tab nuevo y entrar a la dirección about:config, aparecera un dialogo con un botón, el cual presionamos.
Aparecera una pantalla con muchos nombres de variables y sus valores. Damos click derecho en cualquier parte de la pantalla, le damos New y seleccionamos Boolean.
Saldra un dialogo para introducir el nombre, ponemos
extensions.checkCompatibility.4.0b
Despues de eso seleccionamos false como valor de la nueva variable, y le damos Ok.
Con eso listo ya debemos de poder brincarnos la protección de instalación de las extensiones. Hora de instalar Omnibar, que combina la barra de dirección con el buscador, y Download Statusbar, que hace aparezca una barra en la parte inferior con las descargas.
Desafortunadamente descubri que Omnibar de verdad es incompatible, pero Download Statusbar si funciona sin problemas. Será cosa de esperar a que el desarrollador actualice su extensión.
(fuente original: How-to Geek)
Otros Detalles
Por último, hay otro detalle que me molesta de la configuración default de Firefox: al tener muchos tabs abiertos, enves de hacerlos más chicos, aparecen unas flechas para hacer scrolling entre ellos. Personalmente prefieron que sigan decreciendo en tamaño, así que modificaremos otra variable.
Volvamos a abrir un tab con la dirección de about:config, y utilizando el filtro buscamos la variable:
browser.tabs.tabMinWidth
Damos click derecho y seleccionamos modificar el valor, el cual cambiamos a 0.
Ahora solo reiniciamos el browser, y el scrolling debe de desaparecer.
(fuente original: Lifehacker)
Y terminamos. Dudo que deje Chrome, me gusta demasiado y ya lo tengo bastante customizado, pero lo mismo dije de Firefox hace unos años y pues…, ya veremos que pasa. Por ahora, rockanroll, que los browsers siguen y siguen mejorando.
tutorial: photowire
Sep 22nd
Aquí les va un mini-tutorial (más bien una idea de cómo hacerlo, porque no documente el proceso al hacerlo) de cómo hacer lo que llamo un Photowire; ¿Qué es eso? Pues simplemente es un alambre funcional y bonito, donde vas poniendo fotos y rotándolas con el tiempo, muy útil para los que toman un montón de fotos. Ahí les va un fullshot de mi área de trabajo (sospecho que tengo desorden de déficit de atención o algo así).
Es mi escritorio semi-nuevo (medio lo diseñe yo, lo tengo desde Mayo más o menos), y funciona dos-tres con lo que estoy intentando hacer mi workflow, algo entre trabajo y tareas, libros, diseño, fotografía, dibujo, notas, ideas, cosas que hacer, música, etc.
Bueno, dejando (de presumir) el escritorio y volviendo al photowire, la cosa es bastante sencilla; en lo mas básico, es un alambre bonito en la pared, y unos imanes para detener las fotos, aunque yo use unas cositas mas para armar el mío. Ahí les van los materiales.
Materiales
- Clavos (los míos eran de concreto)
- Nudos para cables, o wire rope clip en ingles (ya puesto en la foto)
- Alambre (del largo que necesiten, ustedes ahí le miden)
- Imanes
Y ya, es todo. Les debe salir en unos $20-40 pesos todo el material. Yo compre 2 metros de alambre (y termine usando solo 1), y los nudos en el Home Depot, y me salió en $20. Los imanes de la foto los pedí por internet y me salieron en $2 dólares, pero había estado usando unos imanes de $10 pesos del Office Depot. Los clavos ya los tenía.
Ya con el material en mano, solo se arma y listo. Básicamente se hace una orejita con las puntas del cable y los nudos, y se clavan a la pared. Por último se ponen fotos y listo, les debe quedar algo así.
Y con eso concluimos el primer mini-tutorial del blog. A ver que más les pongo luego, mientras vayan por material y armen uno, es divertido y bastante barato.


















