<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>revolt! &#187; tutorial</title>
	<atom:link href="http://dako.rawrstudios.com/category/tutorial/feed/" rel="self" type="application/rss+xml" />
	<link>http://dako.rawrstudios.com</link>
	<description></description>
	<lastBuildDate>Tue, 22 Nov 2011 12:44:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Probando y Customizando Firefox 4 Beta 1</title>
		<link>http://dako.rawrstudios.com/2010/07/probando-y-customizando-firefox-4-beta-1/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=probando-y-customizando-firefox-4-beta-1</link>
		<comments>http://dako.rawrstudios.com/2010/07/probando-y-customizando-firefox-4-beta-1/#comments</comments>
		<pubDate>Fri, 09 Jul 2010 01:58:31 +0000</pubDate>
		<dc:creator>Sergio Kossio</dc:creator>
				<category><![CDATA[tech]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://dako.rawrstudios.com/?p=628</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>Pues continuando mi saga de los <em>browser blues</em>, 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.</p>
<div id="attachment_629" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/revolt-«-Mozilla-Firefox-4.0-Beta-1_3.png"><img class="size-medium wp-image-629" title="Mozilla Firefox 4.0 Beta 1" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/revolt-«-Mozilla-Firefox-4.0-Beta-1_3-630x388.png" alt="" width="630" height="388" /></a><p class="wp-caption-text">Firefox 4.0 Beta 1</p></div>
<p>Looking good. Me gustan las modificaciones que le hicieron a la interfaz de usuario, ahora es más hmm&#8230; <em>streamlined</em> (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.</p>
<h2>Title Bar + Tab Bar</h2>
<p>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.</p>
<p>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</p>
<pre style="padding-left: 30px;"><strong>XP</strong>: C:\Documents and Settings\&lt;user&gt;\Application Data\Mozilla\Firefox\Profiles\&lt;profile&gt;\chrome\

<strong>Vista\7</strong>: C:\Users\&lt;user&gt;\AppData\Roaming\Mozilla\Firefox\Profiles\&lt;profile&gt;\chrome\
</pre>
<div id="attachment_630" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/chrome_2.png"><img class="size-medium wp-image-630" title="Firefox Profile" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/chrome_2-630x424.png" alt="" width="630" height="424" /></a><p class="wp-caption-text">Firefox Profile</p></div>
<p>Una vez que encuentren la carpeta, hacen una copia del <em>UserChrome-example.css</em> y lo renombran a <em>UserChrome.css</em>, abren el archivo en su editor de texto favorito (personalmente me gusta Programmer&#8217;s Note para este tipo de cosas), y agregar las siguientes lineas despues la linea de @namespace (fuente original: <a href="http://gdgtry.com/2010/07/thinning-down-firefox-4s-tab-bar/">Gdgtry</a>)</p>
<pre>
#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;
}
</pre>
<div id="attachment_631" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/Programmers-Notepad-userChrome.css-.png"><img class="size-medium wp-image-631" title="Programmer's Notepad - userChrome.css" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/Programmers-Notepad-userChrome.css--630x360.png" alt="" width="630" height="360" /></a><p class="wp-caption-text">Programmer&#39;s Notepad - userChrome.css</p></div>
<p>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).</p>
<div id="attachment_632" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/PrtScr-capture_3.png"><img class="size-medium wp-image-632" title="Tab Options" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/PrtScr-capture_3-630x399.png" alt="" width="630" height="399" /></a><p class="wp-caption-text">Tabs  - Activar &quot;Always show the tab bar&quot;</p></div>
<p>No es la única customización que se le puede hacer, esta <a href="http://www.downloadsquad.com/2010/07/06/remove-stuck-firefox-4-orange-menu-button-css/">otra página</a> 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.</p>
<h2>Customize</h2>
<p>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 <em>Customize&#8230;</em>, pero también es posible abrirlo desde el menú, en <em>Customize &#8211; Customize Toolbar&#8230;</em>.</p>
<div id="attachment_633" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/revolt-«-Mozilla-Firefox-4.0-Beta-1_4.png"><img class="size-medium wp-image-633" title="Mozilla Firefox 4.0 Beta 1" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/revolt-«-Mozilla-Firefox-4.0-Beta-1_4-630x400.png" alt="" width="630" height="400" /></a><p class="wp-caption-text">Firefox 4.0 Beta 1 - Customize</p></div>
<h2>
<p><div id="attachment_634" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/revolt-«-Mozilla-Firefox-4.0-Beta-1_5.png"><img class="size-medium wp-image-634" title="Firefox 4.0 Beta 1" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/revolt-«-Mozilla-Firefox-4.0-Beta-1_5-630x400.png" alt="" width="630" height="400" /></a><p class="wp-caption-text">Firefox 4.0 Beta 1 - Casi listo...</p></div></h2>
<h2>Omnibar + Downloads</h2>
<p>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.</p>
<p>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.</p>
<p>Lo primero que hacemos es abrir un tab nuevo y entrar a la dirección <em>about:config</em>, aparecera un dialogo con un botón, el cual presionamos.</p>
<div id="attachment_635" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/aboutconfig-Mozilla-Firefox-4.0-Beta-1_2.png"><img class="size-medium wp-image-635" title="Firefox 4.0 Beta 1 - about:config" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/aboutconfig-Mozilla-Firefox-4.0-Beta-1_2-630x400.png" alt="" width="630" height="400" /></a><p class="wp-caption-text">Firefox 4.0 Beta 1 - about:config</p></div>
<p>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.</p>
<div id="attachment_636" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/aboutconfig-Mozilla-Firefox-4.0-Beta-1_3.png"><img class="size-medium wp-image-636" title="Firefox 4.0 Beta 1 - about:config" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/aboutconfig-Mozilla-Firefox-4.0-Beta-1_3-630x398.png" alt="" width="630" height="398" /></a><p class="wp-caption-text">Firefox 4.0 Beta 1 - about:config</p></div>
<p>Saldra un dialogo para introducir el nombre, ponemos</p>
<pre>extensions.checkCompatibility.4.0b</pre>
<div id="attachment_637" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/PrtScr-capture.png"><img class="size-medium wp-image-637" title="extensions.checkCompatibility.4.0b" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/PrtScr-capture-630x401.png" alt="" width="630" height="401" /></a><p class="wp-caption-text">extensions.checkCompatibility.4.0b</p></div>
<p>Despues de eso seleccionamos<em> false</em> como valor de la nueva variable, y le damos Ok.</p>
<div id="attachment_638" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/Enter-boolean-value.png"><img class="size-medium wp-image-638" title="Enter boolean value" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/Enter-boolean-value-630x399.png" alt="" width="630" height="399" /></a><p class="wp-caption-text">Enter boolean value - false</p></div>
<p>Con eso listo ya debemos de poder brincarnos la protección de instalación de las extensiones. Hora de instalar <a href="https://addons.mozilla.org/en-US/firefox/addon/8823/">Omnibar</a>, que combina la barra de dirección con el buscador, y <a href="https://addons.mozilla.org/en-US/firefox/addon/26/">Download Statusbar</a>, que hace aparezca una barra en la parte inferior con las descargas.</p>
<p>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.</p>
<div id="attachment_639" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/Add-ons-Manager-Mozilla-Firefox-4.0-Beta-1.png"><img class="size-medium wp-image-639" title="Add-ons Manager" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/Add-ons-Manager-Mozilla-Firefox-4.0-Beta-1-630x400.png" alt="" width="630" height="400" /></a><p class="wp-caption-text">Add-ons Manager</p></div>
<div id="attachment_640" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/Add-ons-Manager-Mozilla-Firefox-4.0-Beta-1_3.png"><img class="size-medium wp-image-640" title="Add-ons Manager" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/Add-ons-Manager-Mozilla-Firefox-4.0-Beta-1_3-630x400.png" alt="" width="630" height="400" /></a><p class="wp-caption-text">Add-ons Manager</p></div>
<div id="attachment_642" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/8bitpeoples-Mozilla-Firefox-4.0-Beta-1.png"><img class="size-medium wp-image-642" title="Download Statusbar" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/8bitpeoples-Mozilla-Firefox-4.0-Beta-1-630x400.png" alt="" width="630" height="400" /></a><p class="wp-caption-text">Download Statusbar - Todos deberian de escuchar a Trash80</p></div>
<p>(fuente original: <a href="http://www.howtogeek.com/howto/21478/how-to-bypass-firefox-4.0-betas-incompatible-add-on-error-and-install-extensions-anyway/">How-to Geek</a>)</p>
<h2>Otros Detalles</h2>
<p>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.</p>
<p>Volvamos a abrir un tab con la dirección de <em>about:config</em>, y utilizando el filtro buscamos la variable:</p>
<pre>browser.tabs.tabMinWidth
</pre>
<p>Damos click derecho y seleccionamos modificar el valor, el cual cambiamos a 0.</p>
<div id="attachment_641" class="wp-caption aligncenter" style="width: 640px"><a href="http://dako.rawrstudios.com/wp-content/uploads/2010/07/Enter-integer-value.png"><img class="size-medium wp-image-641" title="Enter integer value" src="http://dako.rawrstudios.com/wp-content/uploads/2010/07/Enter-integer-value-630x400.png" alt="" width="630" height="400" /></a><p class="wp-caption-text">Enter integer value - 0</p></div>
<p>Ahora solo reiniciamos el browser, y el scrolling debe de desaparecer.</p>
<p>(fuente original: <a href="http://lifehacker.com/251068/firefox-tip--disable-tab-scrolling">Lifehacker</a>)</p>
<p>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&#8230;, ya veremos que pasa. Por ahora, rockanroll, que los browsers siguen y siguen mejorando.</p>
]]></content:encoded>
			<wfw:commentRss>http://dako.rawrstudios.com/2010/07/probando-y-customizando-firefox-4-beta-1/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>tutorial: photowire</title>
		<link>http://dako.rawrstudios.com/2008/09/tutorial-photowire/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=tutorial-photowire</link>
		<comments>http://dako.rawrstudios.com/2008/09/tutorial-photowire/#comments</comments>
		<pubDate>Mon, 22 Sep 2008 09:40:36 +0000</pubDate>
		<dc:creator>Sergio Kossio</dc:creator>
				<category><![CDATA[photography]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://dako.berserkstudios.net/blog/?p=163</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p><a style="text-decoration: none;" href="http://dako.rawrstudios.com/wp-content/uploads/2008/09/photowire.jpg"><span style="color: #000000;"><br />
</span><img class="aligncenter size-medium wp-image-164" style="text-decoration: underline;" title="Photowire" src="http://dako.rawrstudios.com/wp-content/uploads/2008/09/photowire-490x207.jpg" alt="" width="490" height="207" /></a></p>
<p>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í).</p>
<p><a href="http://dako.rawrstudios.com/wp-content/uploads/2008/09/photowire-002.jpg"><img class="aligncenter size-medium wp-image-165" title="Photowire Desk" src="http://dako.rawrstudios.com/wp-content/uploads/2008/09/photowire-002-490x734.jpg" alt="" width="490" height="734" /></a></p>
<p>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.</p>
<p><span lang="ES-MX">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.</span></p>
<p><a href="http://dako.rawrstudios.com/wp-content/uploads/2008/09/photowire-006.jpg"><img class="aligncenter size-medium wp-image-166" title="Materials" src="http://dako.rawrstudios.com/wp-content/uploads/2008/09/photowire-006-490x324.jpg" alt="" width="490" height="324" /></a></p>
<h2>Materiales</h2>
<ul>
<li>Clavos (los míos eran de concreto)</li>
<li>Nudos para cables, o wire rope clip en ingles (ya      puesto en la foto)</li>
<li>Alambre (del largo que necesiten, ustedes ahí le      miden)</li>
<li>Imanes</li>
</ul>
<p class="MsoNormal"><span lang="ES-MX">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 <a href="http://www.dealextreme.com/details.dx/sku.4248">los pedí por internet</a> 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. </span></p>
<p class="MsoNormal"><span lang="ES-MX">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í.</span></p>
<p><a href="http://dako.rawrstudios.com/wp-content/uploads/2008/09/photowire-003.jpg"><img class="aligncenter size-medium wp-image-167" title="Close-up" src="http://dako.rawrstudios.com/wp-content/uploads/2008/09/photowire-003-490x335.jpg" alt="" width="490" height="335" /></a></p>
<p class="MsoNormal"><span><span lang="ES-MX">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. </span></span></p>
]]></content:encoded>
			<wfw:commentRss>http://dako.rawrstudios.com/2008/09/tutorial-photowire/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

