<?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>TecnoCaos</title>
	<atom:link href="http://www.tecnocaos.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.tecnocaos.com</link>
	<description></description>
	<lastBuildDate>Wed, 11 May 2011 00:33:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Desarrollo en Android (V): interfaz con degradados</title>
		<link>http://www.tecnocaos.com/desarrollo-en-android-v-interfaz-con-degradados/</link>
		<comments>http://www.tecnocaos.com/desarrollo-en-android-v-interfaz-con-degradados/#comments</comments>
		<pubDate>Wed, 11 May 2011 00:33:25 +0000</pubDate>
		<dc:creator>Martín Chamarro</dc:creator>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Desarrollo Android]]></category>
		<category><![CDATA[Android gradient]]></category>
		<category><![CDATA[degradado Android]]></category>
		<category><![CDATA[gradient]]></category>
		<category><![CDATA[GradientDrawable]]></category>
		<category><![CDATA[layout]]></category>
		<category><![CDATA[shape]]></category>
		<category><![CDATA[XML]]></category>

		<guid isPermaLink="false">http://www.tecnocaos.com/?p=487</guid>
		<description><![CDATA[Hace unos días estuve buscando la forma de añadir degradados a los elementos de las interfaces Android. El método es muy sencillo, tan sólo hay que seguir estos pasos: Crear un fichero .xml para el nuevo degradado, para ello hacemos &#8230; <a href="http://www.tecnocaos.com/desarrollo-en-android-v-interfaz-con-degradados/">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-11-a-las-01.49.07.png"><img class="aligncenter size-medium wp-image-488" title="Captura de pantalla 2011-05-11 a las 01.49.07" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-11-a-las-01.49.07-197x300.png" alt="" width="197" height="300" /></a>Hace unos días estuve buscando la forma de añadir degradados a los elementos de las interfaces Android. El método es muy sencillo, tan sólo hay que seguir estos pasos<span id="more-487"></span>:</p>
<ul>
<li>Crear un fichero .xml para el nuevo degradado, para ello hacemos click en el botón derecho del ratón sobre el proyecto Android y seleccionamos <strong>New &gt; Other &gt; XML &gt; XML File</strong>. Debemos incluir estos ficheros en el directorio <em>res/drawable</em>, como si se trataran de una imagen.</li>
<li>Una vez creado el documento lo editamos e incluimos un elemento de tipo <strong><em>&lt;shape&gt;</em></strong> (figura o forma). Dentro de este debemos añadir otro de tipo <strong><em>&lt;gradient&gt;</em></strong> (degradado). Como ocurre con el resto de elementos de las interfaces en Android, esto mismo que vamos a hacer con el XML se puede hacer empleando clases del API, en concreto la clase <a href="http://developer.android.com/reference/android/graphics/drawable/GradientDrawable.html"><strong>GradientDrawable</strong></a>. Aquí tenéis algunos ejemplos:</li>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;shape</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: #ff0000;">&quot;http://schemas.android.com/apk/res/android&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;gradient</span> <span style="color: #000066;">android:startColor</span>=<span style="color: #ff0000;">&quot;#ffffff&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">android:endColor</span>=<span style="color: #ff0000;">&quot;#000000&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000066;">android:angle</span>=<span style="color: #ff0000;">&quot;270&quot;</span></span>
<span style="color: #009900;">	<span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/shape<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-11-a-las-01.38.32.png"><img class="aligncenter size-medium wp-image-490" title="Captura de pantalla 2011-05-11 a las 01.38.32" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-11-a-las-01.38.32-192x300.png" alt="" width="192" height="300" /></a></p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;shape</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: #ff0000;">&quot;http://schemas.android.com/apk/res/android&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;gradient</span> </span>
<span style="color: #009900;">        <span style="color: #000066;">android:startColor</span>=<span style="color: #ff0000;">&quot;#000000&quot;</span> </span>
<span style="color: #009900;">        <span style="color: #000066;">android:endColor</span>=<span style="color: #ff0000;">&quot;#FFFFFF&quot;</span></span>
<span style="color: #009900;">        <span style="color: #000066;">android:angle</span>=<span style="color: #ff0000;">&quot;45&quot;</span></span>
<span style="color: #009900;">     <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/shape<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-11-a-las-01.42.38.png"><img class="aligncenter size-medium wp-image-491" title="Captura de pantalla 2011-05-11 a las 01.42.38" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-11-a-las-01.42.38-189x300.png" alt="" width="189" height="300" /></a></p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;shape</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: #ff0000;">&quot;http://schemas.android.com/apk/res/android&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;gradient</span> </span>
<span style="color: #009900;">        <span style="color: #000066;">android:startColor</span>=<span style="color: #ff0000;">&quot;#000000&quot;</span></span>
<span style="color: #009900;">        <span style="color: #000066;">android:centerColor</span>=<span style="color: #ff0000;">&quot;#DF0101&quot;</span></span>
<span style="color: #009900;">        <span style="color: #000066;">android:endColor</span>=<span style="color: #ff0000;">&quot;#FFFFFF&quot;</span></span>
<span style="color: #009900;">        <span style="color: #000066;">android:angle</span>=<span style="color: #ff0000;">&quot;270&quot;</span></span>
<span style="color: #009900;">     <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/shape<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-11-a-las-01.49.071.png"><img class="aligncenter size-medium wp-image-492" title="Captura de pantalla 2011-05-11 a las 01.49.07" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-11-a-las-01.49.071-197x300.png" alt="" width="197" height="300" /></a></p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;shape</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: #ff0000;">&quot;http://schemas.android.com/apk/res/android&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;gradient</span> </span>
<span style="color: #009900;">    	<span style="color: #000066;">android:type</span>=<span style="color: #ff0000;">&quot;radial&quot;</span> </span>
<span style="color: #009900;">    	<span style="color: #000066;">android:gradientRadius</span>=<span style="color: #ff0000;">&quot;180&quot;</span>    </span>
<span style="color: #009900;">    	<span style="color: #000066;">android:startColor</span>=<span style="color: #ff0000;">&quot;#DF0101&quot;</span> </span>
<span style="color: #009900;">    	<span style="color: #000066;">android:centerColor</span>=<span style="color: #ff0000;">&quot;#FFFF00&quot;</span> </span>
<span style="color: #009900;">    	<span style="color: #000066;">android:endColor</span>=<span style="color: #ff0000;">&quot;#74DF00&quot;</span> </span>
<span style="color: #009900;">    <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/shape<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-11-a-las-01.56.51.png"><img class="aligncenter size-medium wp-image-493" title="Captura de pantalla 2011-05-11 a las 01.56.51" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-11-a-las-01.56.51-194x300.png" alt="" width="194" height="300" /></a></p>
<li>El último paso es añadir el degradado como <em>background</em> de un elemento que nos interese. Para ello abrimos el <em>layout</em> que nos interese en <em>res/layouts</em> y en ventana de preferencias (<em>Preferences</em>) hacemos click sobre el campo. A continuación nos mostrará un menú para seleccionar el elemento que queremos fijar como degradado:</li>
</ul>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-11-a-las-01.38.01.png"><img class="aligncenter size-medium wp-image-489" title="Captura de pantalla 2011-05-11 a las 01.38.01" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-11-a-las-01.38.01-294x300.png" alt="" width="294" height="300" /></a></p>
<p>Como se puede ver en los ejemplos hay que definir un tipo de degradado (lineal, radial o sweep), el ángulo para los lineales, el radio para los radiales, un color de inicio, otro medio y otro fin (el medio es opcional, y van en <a href="http://html-color-codes.info/codigos-de-colores-hexadecimales/">RGB</a>), etc. A mi me ha servido con eso, el que quiera más atributos que se pase por <a href="http://developer.android.com/reference/android/graphics/drawable/GradientDrawable.html#attr_android:angle">aquí</a>. </p>
<p>Un saludo!</p>
<div align="left" style="float:left; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"><a name="fb_share" type="button_count" share_url="http://www.tecnocaos.com/desarrollo-en-android-v-interfaz-con-degradados/"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.tecnocaos.com/desarrollo-en-android-v-interfaz-con-degradados/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Desarrollo en Android (IV): creación de interfaces y acceso a recursos</title>
		<link>http://www.tecnocaos.com/desarrollo-en-android-iv-creacion-de-interfaces-y-acceso-a-recursos/</link>
		<comments>http://www.tecnocaos.com/desarrollo-en-android-iv-creacion-de-interfaces-y-acceso-a-recursos/#comments</comments>
		<pubDate>Tue, 10 May 2011 00:50:05 +0000</pubDate>
		<dc:creator>Martín Chamarro</dc:creator>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Desarrollo Android]]></category>
		<category><![CDATA[Button]]></category>
		<category><![CDATA[crear layout]]></category>
		<category><![CDATA[EditText]]></category>
		<category><![CDATA[elementos interfaz]]></category>
		<category><![CDATA[hint]]></category>
		<category><![CDATA[LinearLayout]]></category>
		<category><![CDATA[R]]></category>
		<category><![CDATA[RelativeLayout]]></category>
		<category><![CDATA[TextView]]></category>
		<category><![CDATA[XML file]]></category>

		<guid isPermaLink="false">http://www.tecnocaos.com/?p=472</guid>
		<description><![CDATA[Ahora me toca hablar de las interfaces, los componentes gráficos de las aplicaciones. Como dije en otra entrada anterior, los diseños o layouts se encuentran en el directorio res/layout. Para crear un nuevo diseño hacemos click en el botón derecho &#8230; <a href="http://www.tecnocaos.com/desarrollo-en-android-iv-creacion-de-interfaces-y-acceso-a-recursos/">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/intefaz.png"><img class="aligncenter size-medium wp-image-473" title="intefaz" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/intefaz-180x300.png" alt="" width="180" height="300" /></a></p>
<p>Ahora me toca hablar de las interfaces, los componentes gráficos de las aplicaciones. Como dije en otra entrada anterior, los diseños o <em>layouts</em> se encuentran en el directorio <em>res/layout.<span id="more-472"></span><br />
</em></p>
<p>Para crear un nuevo diseño hacemos click en el botón derecho y vamos a la opción <strong>New &gt; Android XML File</strong>. A continuación tenemos que poner nombre a nuestro diseño y seleccionar, si no viene por defecto, el tipo layout:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-01.57.18.png"><img class="aligncenter size-medium wp-image-474" title="Captura de pantalla 2011-05-10 a las 01.57.18" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-01.57.18-263x300.png" alt="" width="263" height="300" /></a></p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-01.57.48.png"><img class="aligncenter size-medium wp-image-475" title="Captura de pantalla 2011-05-10 a las 01.57.48" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-01.57.48-300x300.png" alt="" width="300" height="300" /></a>Después de eso sólo tenemos que abrir el nuevo fichero para ver la vista del editor de interfaces. Es posible editar el fichero como texto, pero por comodidad suelo usarla (aunque algunas veces impida hacer cosas que puedas hacer editando a mano).</p>
<p>La vista de edición de interfaces muestra a la izquierda la lista de componentes que podemos arrastrar a la pantalla, en el centro, y del tamaño que seleccionemos en las opciones de arriba, y a la derecha se muestra el árbol de elementos:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-01.58.21.png"><img class="aligncenter size-medium wp-image-476" title="Captura de pantalla 2011-05-10 a las 01.58.21" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-01.58.21-300x228.png" alt="" width="300" height="228" /></a></p>
<p>Para empezar hay que echar un ojo al apartado de Layouts. Por ahora he utilizado dos tipos:</p>
<ul>
<li><a href="http://developer.android.com/reference/android/widget/LinearLayout.html">LinearLayout</a>: funciona como un vector de elementos gráficos al que podemos fijar orientación vertical u horizontal. Yo antes combinaba varios de este tipo para crear filas y columnas, como si se tratara de una tabla.</li>
<li><a href="http://developer.android.com/reference/android/widget/RelativeLayout.html">RelativeLayout</a>: permite definir las posiciones de unos elementos a partir de otros. Para empezar arrastramos un componente de la interfaz a uno de sus cuatro márgenes para alinearlo. Después de esto podemos arrastrar los otros unos sobre otros empleando una cuadrilla que nos permite decir donde se sitúan. La ventaja es que permite crear diseños complejos empleando sólo un layout (<em>NOTA: conviene dar un ID a un elemento antes de colocar y añadir otro</em>). Aquí un ejemplo de lo de la cuadrilla:</li>
</ul>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-02.22.12.png"><img class="aligncenter size-medium wp-image-477" title="Captura de pantalla 2011-05-10 a las 02.22.12" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-02.22.12-207x300.png" alt="" width="207" height="300" /></a></p>
<p>Y el resultado de soltar el botón sobre su esquina inferior derecha:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-02.20.38.png"><img class="aligncenter size-medium wp-image-478" title="Captura de pantalla 2011-05-10 a las 02.20.38" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-02.20.38-300x297.png" alt="" width="300" height="297" /></a></p>
<p>Las interfaces no tienen mayor misterio, es echarle un rato a añadir botones, campos de texto, imágenes, fondos, etc, etc, yo iré poniendo en el blog trucos que aprenda. ¡Hay que jugar mucho con la pestaña de <em>properties</em> de cada componente, tienen de todo! (<em>Nota2: para alinear elementos dentro de los layouts, emplear el atributo Gravity</em>). Pestaña de properties de un campo de texto (<a href="http://developer.android.com/reference/android/widget/EditText.html">EditText</a>):</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-02.29.49.png"><img class="aligncenter size-medium wp-image-479" title="Captura de pantalla 2011-05-10 a las 02.29.49" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-02.29.49-105x300.png" alt="" width="105" height="300" /></a></p>
<p>Y para acabar me voy a crear un label (<a href="http://developer.android.com/reference/android/widget/TextView.html">TextView</a>), un botón (<a href="http://developer.android.com/reference/android/widget/Button.html">Button</a>) y un campo de texto dentro de un LinearLayout y voy a enseñaros como llamar a los elementos desde la actividad. Mi árbol de elementos queda así:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-02.35.43.png"><img class="aligncenter size-full wp-image-480" title="Captura de pantalla 2011-05-10 a las 02.35.43" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-02.35.43.png" alt="" width="190" height="143" /></a></p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-10-a-las-02.35.43.png"></a>Y el código de la actividad HelloAndroid:</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">com.example.helloandroid</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.app.Activity</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.graphics.Color</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.os.Bundle</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.widget.Button</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.widget.EditText</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.widget.TextView</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> HelloAndroid <span style="color: #000000; font-weight: bold;">extends</span> Activity <span style="color: #009900;">&#123;</span>
    <span style="color: #008000; font-style: italic; font-weight: bold;">/** Called when the activity is first created. */</span>
    @Override
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onCreate<span style="color: #009900;">&#40;</span>Bundle savedInstanceState<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">super</span>.<span style="color: #006633;">onCreate</span><span style="color: #009900;">&#40;</span>savedInstanceState<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        setContentView<span style="color: #009900;">&#40;</span>R.<span style="color: #006633;">layout</span>.<span style="color: #006633;">new_layout</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">//Cargo los elementos de la interfaz haciendo un casting y usando los IDs con R</span>
        TextView mi_etiqueta <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>TextView<span style="color: #009900;">&#41;</span> findViewById<span style="color: #009900;">&#40;</span>R.<span style="color: #006633;">id</span>.<span style="color: #006633;">mi_etiqueta</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        EditText mi_texto <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>EditText<span style="color: #009900;">&#41;</span> findViewById<span style="color: #009900;">&#40;</span>R.<span style="color: #006633;">id</span>.<span style="color: #006633;">mi_texto</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #003399;">Button</span> mi_boton <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #003399;">Button</span><span style="color: #009900;">&#41;</span> findViewById<span style="color: #009900;">&#40;</span>R.<span style="color: #006633;">id</span>.<span style="color: #006633;">mi_boton</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">//Cambio el texto del label</span>
        mi_etiqueta.<span style="color: #006633;">setText</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Introduce un texto&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #666666; font-style: italic;">//NOTA: El hint es la sugerencia que se ve antes de teclear</span>
        mi_texto.<span style="color: #006633;">setHint</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;El texto debe ir aquí&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #666666; font-style: italic;">//Fijo el color de fondo del boton</span>
        mi_boton.<span style="color: #006633;">setBackgroundColor</span><span style="color: #009900;">&#40;</span><span style="color: #003399;">Color</span>.<span style="color: #006633;">YELLOW</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Hasta ahora he hablado por encima de como instalar el SDK y correr un emulador, como crear un proyecto nuevo, que es una actividad, como cambiar entre ellas y como crear una interfaz y llamar a sus elementos.</p>
<p>Creo que a partir de ahora voy a escribir trucos y otras cosas que vaya encontrando y que me hagan falta, como descarga y envio de ficheros, galerias, eventos, degradados y efectos de la intefaz, etcs. Un saludo!</p>
<div align="left" style="float:left; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"><a name="fb_share" type="button_count" share_url="http://www.tecnocaos.com/desarrollo-en-android-iv-creacion-de-interfaces-y-acceso-a-recursos/"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.tecnocaos.com/desarrollo-en-android-iv-creacion-de-interfaces-y-acceso-a-recursos/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Desarrollo en Android (III): la clase Activity y cambio entre actividades</title>
		<link>http://www.tecnocaos.com/desarrollo-en-android-iii-la-clase-activity-y-cambio-entre-actividades/</link>
		<comments>http://www.tecnocaos.com/desarrollo-en-android-iii-la-clase-activity-y-cambio-entre-actividades/#comments</comments>
		<pubDate>Mon, 09 May 2011 00:43:01 +0000</pubDate>
		<dc:creator>Martín Chamarro</dc:creator>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Desarrollo Android]]></category>
		<category><![CDATA[activity]]></category>
		<category><![CDATA[AndroidManifest]]></category>
		<category><![CDATA[cambiar de actividad]]></category>
		<category><![CDATA[funciones Activity]]></category>
		<category><![CDATA[Intent]]></category>

		<guid isPermaLink="false">http://www.tecnocaos.com/?p=464</guid>
		<description><![CDATA[Para seguir con Android voy a hablaros de la clase Activity, ya que es la que compone las aplicaciones de este OS. Voy a empezar con la actividad HelloAndroid que creamos en la entrada anterior: package com.example.helloandroid; &#160; import android.app.Activity; &#8230; <a href="http://www.tecnocaos.com/desarrollo-en-android-iii-la-clase-activity-y-cambio-entre-actividades/">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Android_Activity-Class_Lifecycle.png"><img class="aligncenter size-medium wp-image-465" title="Android_Activity-Class_Lifecycle" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Android_Activity-Class_Lifecycle-241x300.png" alt="" width="241" height="300" /></a>Para seguir con Android voy a hablaros de la clase <a href="http://developer.android.com/reference/android/app/Activity.html"><em>Activity</em></a>, ya que es la que compone las aplicaciones de este OS. Voy a empezar con la actividad HelloAndroid que creamos en la entrada anterior<span id="more-464"></span>:</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">com.example.helloandroid</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.app.Activity</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.os.Bundle</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> HelloAndroid <span style="color: #000000; font-weight: bold;">extends</span> Activity <span style="color: #009900;">&#123;</span>
    <span style="color: #008000; font-style: italic; font-weight: bold;">/** Called when the activity is first created. */</span>
    @Override
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onCreate<span style="color: #009900;">&#40;</span>Bundle savedInstanceState<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">super</span>.<span style="color: #006633;">onCreate</span><span style="color: #009900;">&#40;</span>savedInstanceState<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        setContentView<span style="color: #009900;">&#40;</span>R.<span style="color: #006633;">layout</span>.<span style="color: #006633;">main</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Al crear una clase que extienda de <em>Activity</em> hay que implementar al menos la función <em>onCreate()</em>, que es la que se ejecuta cuando se crea la actividad. Por defecto esa función recibe un paquete (<a href="http://developer.android.com/reference/android/os/Bundle.html"><em>Bundle</em></a>), que contiene el estado anterior de la actividad en caso de que haya sido suspendida. Como se puede ver arriba, la clase <em>HelloAndroid</em> le pasa ese paquete a la superclase de la que extiende.</p>
<p>Lo siguiente que se hace en la función de creación es cargar el <em>layout</em> o diseño de la actividad, cargando una interfaz definida en XML. Como ya expliqué en otra entrada anterior, los diseños se guardan en &#8220;res/layout/&#8221;, y para llamarlos se utiliza R, indicando el nombre del fichero, como en este caso, &#8220;main.xml&#8221; pasa a ser &#8220;R.layout.main&#8221;. Si quisiéramos cargar otro layout sólo tendríamos que crearlo y cargarlo con &#8220;R.layout.LO_QUE_SEA&#8221;</p>
<p>Por ahora, de entre las funciones que incluye la actividad he usado:</p>
<blockquote><p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco} --></p>
<ul>
<li><strong>onConfigurationChanged()</strong><span style="font-style: normal;">: a la que se llama cuando cambia la configuración, la usé para dejar fija la pantalla y que no rotara (ya explicaré otro día como).</span></li>
<li><strong>getResources()</strong><span style="font-style: normal;">: para obtener los recursos asociados a R.</span></li>
<li><strong>startActivity()</strong><span style="font-style: normal;">: para cambiar de actividad, más abajo explicaré como.</span></li>
<li><strong>finish()</strong><span style="font-style: normal;">: para finalizar la actividad, OJO, cuando sea posible, no corta la ejecución en seco, termina de ejecutar. Con esto quiero decir que si debajo de un finish tenemos otras lineas de código, no van a dejar de ejecutarse.</span></li>
<li><strong>getIntent()</strong><span style="font-style: normal;">: devuelve la intención que ha comenzado la actividad. Se utiliza para pasar variables entre actividades, eso irá a otra entrada del blog&#8230;</span></li>
<li><strong>getSharedPreferences()</strong><span style="font-style: normal;">: para obtener las preferencias compartidas de la aplicación, que son variables que se almacenan en el móvil y no se borran si no la desinstalas, otra cosa que va a otra entrada.</span></li>
</ul>
</blockquote>
<p>Ahora para terminar voy a poner un ejemplo de uso de la clase<em> <a href="http://developer.android.com/reference/android/content/Intent.html">Intent</a></em> (Intención?), que indica una operación a realizar, como puede ser el cambio entre dos actividades. Para el ejemplo voy a crear otra actividad que se llame <em>GoodbyeAndroid</em>:</p>
<ul>
<li>Primero creo una nueva clase Java que extienda de Activity:</li>
</ul>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-09-a-las-02.22.49.png"><img class="aligncenter size-medium wp-image-468" title="Captura de pantalla 2011-05-09 a las 02.22.49" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-09-a-las-02.22.49-247x300.png" alt="" width="247" height="300" /></a></p>
<ul>
<li>A continuación creo un nuevo layout goodbye.xml (esto no lo explico hoy) y lo cargo en la función de creación de la nueva clase, de forma que quede:</li>
</ul>
<blockquote><p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco} span.s1 {text-decoration: underline} --></p></blockquote>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">com.example.helloandroid</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.app.Activity</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.os.Bundle</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> GoodbyeAndroid <span style="color: #000000; font-weight: bold;">extends</span> Activity <span style="color: #009900;">&#123;</span>
	@Override
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onCreate<span style="color: #009900;">&#40;</span>Bundle savedInstanceState<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">super</span>.<span style="color: #006633;">onCreate</span><span style="color: #009900;">&#40;</span>savedInstanceState<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        setContentView<span style="color: #009900;">&#40;</span>R.<span style="color: #006633;">layout</span>.<span style="color: #006633;">goodbye</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #666666; font-style: italic;">//El resto del codigo</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<ul>
<li> Ahora añado la nueva actividad al AndroidManifest, ya sea usando la herramienta gráfica o añadiendo directamente al XML debajo de &lt;/activity&gt; lo siguiente:</li>
</ul>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;activity</span> <span style="color: #000066;">android:name</span>=<span style="color: #ff0000;">&quot;.GoodbyeAndroid&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/activity<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>Como se puede ver <em>GoodbyeAndroid.java</em> pasa a ser &#8220;<em>.GoodByeAndroid</em>&#8220;, y eso ocurre con el resto de actividades.</p>
<ul>
<li>Por último añado a la función de creación de <em>HelloAndroid</em> el código con el <em>Intent </em>que cambia entre las dos actividades (para que funcione hay que importar el paquete <em>android.content.Intent</em>):</li>
</ul>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;">Intent intent <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Intent<span style="color: #009900;">&#40;</span>HelloAndroid.<span style="color: #000000; font-weight: bold;">this</span>, GoodbyeAndroid.<span style="color: #000000; font-weight: bold;">class</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
startActivity<span style="color: #009900;">&#40;</span>intent<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Y ya está, lo próximo será como usar la herramienta de crear interfaces y como cargar los elementos desde el código. Un saludo!</p>
<div align="left" style="float:left; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"><a name="fb_share" type="button_count" share_url="http://www.tecnocaos.com/desarrollo-en-android-iii-la-clase-activity-y-cambio-entre-actividades/"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.tecnocaos.com/desarrollo-en-android-iii-la-clase-activity-y-cambio-entre-actividades/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Desarrollo en Android (II): Crear un proyecto y listado de directorios y ficheros</title>
		<link>http://www.tecnocaos.com/desarrollo-en-android-ii-crear-un-proyecto-y-listado-de-directorios-y-ficheros/</link>
		<comments>http://www.tecnocaos.com/desarrollo-en-android-ii-crear-un-proyecto-y-listado-de-directorios-y-ficheros/#comments</comments>
		<pubDate>Sun, 08 May 2011 14:30:58 +0000</pubDate>
		<dc:creator>Martín Chamarro</dc:creator>
				<category><![CDATA[Aplicación]]></category>
		<category><![CDATA[Desarrollo Android]]></category>
		<category><![CDATA[activity]]></category>
		<category><![CDATA[AndroidManifest]]></category>
		<category><![CDATA[directorios Android]]></category>
		<category><![CDATA[drawable]]></category>
		<category><![CDATA[Eclipse]]></category>
		<category><![CDATA[layouts]]></category>
		<category><![CDATA[Min SDK Version]]></category>
		<category><![CDATA[nuevo proyecto Android]]></category>
		<category><![CDATA[proyecto Android]]></category>
		<category><![CDATA[res]]></category>
		<category><![CDATA[values]]></category>

		<guid isPermaLink="false">http://www.tecnocaos.com/?p=454</guid>
		<description><![CDATA[Vamos a seguir con los tutoriales de Android, hoy toca crear un proyecto con Eclipse y listar los directorios y ficheros más importantes que se generan. Por pasos, para crear un proyecto hacemos: File &#62; New &#62; Android Project, o &#8230; <a href="http://www.tecnocaos.com/desarrollo-en-android-ii-crear-un-proyecto-y-listado-de-directorios-y-ficheros/">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/android.png"><img class="aligncenter size-medium wp-image-455" title="android" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/android-273x300.png" alt="" width="164" height="180" /></a>Vamos a seguir con los tutoriales de Android, hoy toca crear un proyecto con Eclipse y listar los directorios y ficheros más importantes que se generan.<span id="more-454"></span></p>
<p>Por pasos, para crear un proyecto hacemos:</p>
<ul>
<li><strong>File &gt; New &gt; Android Project</strong>, o en caso de que no exista esa opción click en <strong>Other</strong> y luego seleccionar &#8220;Android Project&#8221;.</li>
</ul>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-08-a-las-15.24.53.png"><img class="aligncenter size-medium wp-image-456" title="Captura de pantalla 2011-05-08 a las 15.24.53" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-08-a-las-15.24.53-300x285.png" alt="" width="300" height="285" /></a></p>
<ul>
<li>A continuación tenemos que escribir los parámetros de configuración del nuevo proyecto:</li>
</ul>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-08-a-las-15.30.46.png"><img class="aligncenter size-medium wp-image-457" title="Captura de pantalla 2011-05-08 a las 15.30.46" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-08-a-las-15.30.46-228x300.png" alt="" width="228" height="300" /></a></p>
<ul>
<li>Como se puede ver primero tenemos que seleccionar un nombre de Proyecto, luego un nombre para la aplicación, que es el que se va a mostrar en el móvil, un paquete principal (he elegido lo de com.example porque estoy acostumbrado a ver cosas como com.google.x o org.apache.x&#8230;), después un nombre de actividad, que es el nombre del fichero .java principal que se creará con el proyecto, y una versión mínima del SDK para la que queremos que el proyecto sea compatible. Estos números se pueden mirar aquí:</li>
</ul>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-08-a-las-15.51.14.png"><img class="aligncenter size-medium wp-image-458" title="Captura de pantalla 2011-05-08 a las 15.51.14" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-08-a-las-15.51.14-300x177.png" alt="" width="300" height="177" /></a></p>
<ul>
<li>Una vez creado el proyecto nos encontramos con los siguientes directorios y ficheros:</li>
</ul>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-08-a-las-15.32.10.png"><img class="aligncenter size-medium wp-image-460" title="Captura de pantalla 2011-05-08 a las 15.32.10" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-08-a-las-15.32.10-180x300.png" alt="" width="180" height="300" /></a></p>
<ul>
<li>Nos encontramos con:</li>
<blockquote>
<li><span style="color: #000000;"><strong>com.example.helloandroid</strong>: paquete principal del proyecto, que hemos creado en el paso anterior</span></li>
<li><strong>HelloAndroid.java</strong>: es la actividad que se ejecuta al inicio, y la hemos creado en el paso anterior.</li>
<li><strong>gen</strong>: es un directorio en el que se guardan ficheros java generados automáticamente. Por curiosidad he abierto &#8220;R.java&#8221; y he visto que contenía constantes con nombres de recursos que apuntaban a direcciones de memoria o identificadores del tipo &#8220;﻿﻿0x7f020000&#8243;. Contiene un comentario que dice que no debe tocarse.</li>
<li><strong>res</strong>: es el directorio de &#8220;resources&#8221; o recursos, en el se encuentra todo lo relacionado con las interfaces, sus imágenes,  frases mostradas, estilos, sonidos, etc.</li>
<li><strong>res/drawable-xdpi</strong>: en estos directorios se guardan las imágenes, los degradados y demás cosas relacionadas con los estilos. Antes sólo existía un directorio drawable, ahora existen tres, para mantener separadas las imágenes en función de su resolución (h de high, m de medium y l de low)</li>
<li><span style="color: #000000;"><strong>res/layout</strong>: es el directorio en el que se guardan los diseños de las interfaces definidas en XML. Por defecto se crea &#8220;main.xml&#8221;, que viene con un elemento de texto (TextView) con un &#8220;Hello World, Hello Android!&#8221;.</span></li>
<li><strong>res/values</strong>: este directorio contiene el fichero &#8220;strings.xml&#8221;, en el que se definen cadenas de caracteres de forma clave-valor, y que luego se pueden mostrar en elementos de la interfaz. También permite definir colores, estilos, números, etc.</li>
<li><strong>AndroidManifest.xml</strong>: fichero XML que contiene el manifiesto de la aplicación, en el que entre otras cosas se guarda información sobre el proyecto, se declaran las actividades y se piden los permisos de ejecución de la aplicación. Lo he tenido que usar para añadir nuevas actividades, pedir permisos como el acceso a internet o desactivar el giro de una interfaz.</li>
</blockquote>
<li>Ahora toca correr el proyecto, hacemos click con el botón derecho sobre el nombre del mismo y le damos a <strong>Run as &gt; Android Application</strong>. Si ya teníamos abierto un AVD lo instalará y lo ejecutará, si no, abrirá una nueva máquina virtual:</li>
</ul>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-08-a-las-16.27.11.png"><img class="aligncenter size-medium wp-image-461" title="Captura de pantalla 2011-05-08 a las 16.27.11" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-08-a-las-16.27.11-215x300.png" alt="" width="215" height="300" /></a></p>
<p>El próximo día explicaré un poco las actividades y los cambios entre ellas.</p>
<p>Un saludo!</p>
<div align="left" style="float:left; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"><a name="fb_share" type="button_count" share_url="http://www.tecnocaos.com/desarrollo-en-android-ii-crear-un-proyecto-y-listado-de-directorios-y-ficheros/"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.tecnocaos.com/desarrollo-en-android-ii-crear-un-proyecto-y-listado-de-directorios-y-ficheros/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Desarrollo en Android: Instalar el SDK y primeros pasos</title>
		<link>http://www.tecnocaos.com/desarrollo-en-android-instalar-el-sdk-y-primeros-pasos/</link>
		<comments>http://www.tecnocaos.com/desarrollo-en-android-instalar-el-sdk-y-primeros-pasos/#comments</comments>
		<pubDate>Fri, 06 May 2011 00:11:22 +0000</pubDate>
		<dc:creator>Martín Chamarro</dc:creator>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Desarrollo Android]]></category>
		<category><![CDATA[2.3.3]]></category>
		<category><![CDATA[ADT Plugin]]></category>
		<category><![CDATA[Android SDK]]></category>
		<category><![CDATA[AVD]]></category>
		<category><![CDATA[Eclipse]]></category>
		<category><![CDATA[Empezar con Android]]></category>
		<category><![CDATA[Inicio Android]]></category>
		<category><![CDATA[máquina virtual]]></category>
		<category><![CDATA[SDK]]></category>

		<guid isPermaLink="false">http://www.tecnocaos.com/?p=440</guid>
		<description><![CDATA[Vuelvo al blog una vez más, y esta vez para hablar de programación para Android, ya que mi proyecto de fin de carrera consiste en una aplicación social para este Sistema Operativo. Si no me rajo en el intento, tengo la &#8230; <a href="http://www.tecnocaos.com/desarrollo-en-android-instalar-el-sdk-y-primeros-pasos/">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Android_tools.png"><img class="aligncenter size-full wp-image-441" title="Android_tools" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Android_tools.png" alt="" width="232" height="172" /></a></p>
<p>Vuelvo al blog una vez más, y esta vez para hablar de programación para Android, ya que mi proyecto de fin de carrera consiste en una aplicación social para este Sistema Operativo. Si no me rajo en el intento, tengo la intención de ir contando desde 0 todo lo que he aprendido las últimas semanas y publicar entradas cortas con cada &#8220;descubrimiento&#8221; nuevo.</p>
<p><span id="more-440"></span></p>
<p>Hoy para empezar voy a contar como preparar las herramientas necesarias para programar, vamos por pasos:</p>
<ol>
<li>Descargar e instalar el <strong><a href="http://www.eclipse.org/downloads/">Eclipse</a></strong>, un entorno de desarrollo gratuito para unos cuantos lenguajes, que cuenta con muchas herramientas y plugins. Yo me he descargado la versión para desarrollo Java, pero la Clásica también os vale.</li>
<li>Lo siguiente es instalar las Android Development Tools o ADT en Eclipse. Para ello hay que ir a <strong>Help &gt; Install New Software</strong>, y en la ventana que aparece hacer click en Add y añadir lo siguiente: &#8220;ADT Plugin&#8221; y la URL &#8220;https://dl-ssl.google.com/android/eclipse/&#8221;<a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.29.09.png"><img class="aligncenter size-medium wp-image-442" title="Captura de pantalla 2011-05-06 a las 01.29.09" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.29.09-300x259.png" alt="" width="300" height="259" /></a></li>
<li>A continuación tenemos que seleccionar las &#8220;Developer Tools&#8221;, darle a Next una o dos veces y aceptar las condiciones de la ventana:<a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.32.55.png"><img class="aligncenter size-medium wp-image-443" title="Captura de pantalla 2011-05-06 a las 01.32.55" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.32.55-300x259.png" alt="" width="300" height="259" /></a><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.33.12.png"><img class="aligncenter size-medium wp-image-444" title="Captura de pantalla 2011-05-06 a las 01.33.12" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.33.12-300x258.png" alt="" width="300" height="258" /></a></li>
<li>Después de la instalación de las herramientas y de reiniciar el Eclipse tenemos que descargarnos el <a href="http://developer.android.com/sdk/index.html">kit de desarrollo de Android (SDK)</a> de la página de desarrolladores, eligiendo el de nuestra versión de OS. Para continuar tenemos que descomprimir el .ZIP y en <strong>Eclipse &gt; Preferences &gt; Android</strong> seleccionar el directorio donde se encuentra:<a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.44.28.png"><img class="aligncenter size-medium wp-image-445" title="Captura de pantalla 2011-05-06 a las 01.44.28" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.44.28-300x234.png" alt="" width="300" height="234" /></a></li>
<li>Lo siguiente que hice fue descargar la versión 2.3.3 desde el listado de paquetes de Android en Eclipse:<a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.47.49.png"><img class="aligncenter size-full wp-image-446" title="Captura de pantalla 2011-05-06 a las 01.47.49" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.47.49.png" alt="" width="287" height="280" /></a></li>
<h6><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.48.05.png"><img class="aligncenter size-medium wp-image-447" title="Captura de pantalla 2011-05-06 a las 01.48.05" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.48.05-300x176.png" alt="" width="300" height="176" /></a>Tras instalar el 2.3.3 y para configurar el terminal del emulador, desde el menú de Virtual Devices de la pantalla anterior configuré uno nuevo de la siguiente forma:<a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.53.06.png"><img class="aligncenter size-medium wp-image-448" title="Captura de pantalla 2011-05-06 a las 01.53.06" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.53.06-300x176.png" alt="" width="300" height="176" /></a><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.56.14.png"><img class="aligncenter size-medium wp-image-449" title="Captura de pantalla 2011-05-06 a las 01.56.14" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-01.56.14-209x300.png" alt="" width="209" height="300" /></a><strong>Nota: </strong>la opción de Snapshot permite que se guarden imágenes del estado del emulador y su carga (salvo la primera vez) sea más rápida.</h6>
<li>Por último sólo hay que elegir el menú de dispositivos en que acabamos de crear y darle al botón &#8220;Start&#8221; para arrancarlo:<a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-02.02.46.png"><img class="aligncenter size-medium wp-image-450" title="Captura de pantalla 2011-05-06 a las 02.02.46" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-02.02.46-217x300.png" alt="" width="217" height="300" /></a><a href="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-02.06.47.png"><img class="aligncenter size-medium wp-image-451" title="Captura de pantalla 2011-05-06 a las 02.06.47" src="http://www.tecnocaos.com/wp-content/uploads/2011/05/Captura-de-pantalla-2011-05-06-a-las-02.06.47-175x300.png" alt="" width="175" height="300" /></a></li>
</ol>
<p>El próximo día contaré un poco como crear un nuevo proyecto Android, que es cada directorio (o que se de ellos), y como correr el &#8220;Hello World!&#8221;.</p>
<p>Un saludo!</p>
<div align="left" style="float:left; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"><a name="fb_share" type="button_count" share_url="http://www.tecnocaos.com/desarrollo-en-android-instalar-el-sdk-y-primeros-pasos/"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.tecnocaos.com/desarrollo-en-android-instalar-el-sdk-y-primeros-pasos/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Firmware DD-WRT en una Fonera 2100</title>
		<link>http://www.tecnocaos.com/firmware-dd-wrt-en-una-fonera-2100/</link>
		<comments>http://www.tecnocaos.com/firmware-dd-wrt-en-una-fonera-2100/#comments</comments>
		<pubDate>Thu, 13 Jan 2011 03:11:16 +0000</pubDate>
		<dc:creator>Martín Chamarro</dc:creator>
				<category><![CDATA[Periféricos]]></category>
		<category><![CDATA[Redes]]></category>
		<category><![CDATA[Bricolaje]]></category>
		<category><![CDATA[Cable serial]]></category>
		<category><![CDATA[COM]]></category>
		<category><![CDATA[DD-WRT]]></category>
		<category><![CDATA[firmware]]></category>
		<category><![CDATA[flashear]]></category>
		<category><![CDATA[flashear Fonera]]></category>
		<category><![CDATA[Fon]]></category>
		<category><![CDATA[Fonera]]></category>
		<category><![CDATA[Fonera 2100]]></category>
		<category><![CDATA[Fonera Hack]]></category>
		<category><![CDATA[PuTTY]]></category>
		<category><![CDATA[Tftpd32]]></category>
		<category><![CDATA[USB to TTL]]></category>
		<category><![CDATA[USB to TTL/COM]]></category>

		<guid isPermaLink="false">http://www.tecnocaos.com/?p=422</guid>
		<description><![CDATA[Hace unas semanas os hablé sobre como resucitar una Fonera 2100, y después de trastear un poco se volvió a quedar frita (supongo que tenía algún que otro problema no resuelto). Ya he recibido el conversor USB a TTL/COM que &#8230; <a href="http://www.tecnocaos.com/firmware-dd-wrt-en-una-fonera-2100/">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/01/RESULT.png"><img class="aligncenter size-medium wp-image-423" title="RESULT" src="http://www.tecnocaos.com/wp-content/uploads/2011/01/RESULT-268x300.png" alt="" width="268" height="300" /></a>Hace unas semanas os hablé sobre como <a href="http://www.tecnocaos.com/desbrickear-fonera-2100-y-restaurar-el-firmware-original/">resucitar una Fonera 2100</a>, y después de trastear un poco se volvió a quedar frita (supongo que tenía algún que otro problema no resuelto). Ya he recibido el conversor USB a TTL/COM que pedí en Ebay/China y voy a explicaros como instalar este increíble firmware directamente conectando el ordenador a la placa.</p>
<p><span id="more-422"></span></p>
<p>Este que veis es el conversor:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/01/CONVERTER.jpg"><img class="aligncenter size-medium wp-image-425" title="CONVERTER" src="http://www.tecnocaos.com/wp-content/uploads/2011/01/CONVERTER-225x300.jpg" alt="" width="225" height="300" /></a>Me ha costado cerca de 4 euros al cambio, y si no tenéis muchos conocimientos de electrónica como en mi caso, es más sencillo que <a href="http://blog.unlugarenelmundo.es/2006/11/02/habilitando-acceso-por-ssh-a-la-fonera/">fabricarse uno</a>. Sólo nos interesan 4 de sus patillas, que vienen con el nombre encima, y son: +5v (corriente, Vcc), Rxd (recibir) y Txd (transmitir) y Gnd (tierra). Van conectadas directamente a la placa siguiendo este esquema:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/01/PINES.jpg"><img class="aligncenter size-medium wp-image-426" title="PINES" src="http://www.tecnocaos.com/wp-content/uploads/2011/01/PINES-300x213.jpg" alt="" width="300" height="213" /></a>El montaje me ha quedado de la siguiente manera:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/01/TINGLADO.jpg"><img class="aligncenter size-medium wp-image-427" title="TINGLADO" src="http://www.tecnocaos.com/wp-content/uploads/2011/01/TINGLADO-300x225.jpg" alt="" width="300" height="225" /></a>Ahora voy a contar los pasos para instalar el DD-WRT:</p>
<ol>
<li>Descargar el fichero <a href="http://www.dd-wrt.com/routerdb/de/download/FON/LaFonera/2100/linux.bin/3593">linux.bin</a> de la página oficial de <a href="http://www.dd-wrt.com/site/support/router-database#">DD-WRT</a> (en mi caso buscando Fonera 2100)</li>
<li>Conectar el ordenador a la Fonera por cable de red (pero sin alimentación, que no es necesaria porque la pillará del USB) y configurar la tarjeta de red del ordenador con una IP como 192.168.1.166 y la máscara 255.255.255.0</li>
<li>Resolver todo el cableado como en la foto que está encima, para ello he utilizado cables de los que venían con los lectores de DVD y CD del ordenador para activar la <a href="http://www.uxsight.com/product/images/c/en/mpc-mpc-4pin-4pin-audio-cdrom-cable-wires-for-computer-xs0023090214c.jpg">salida de auriculares</a>, pero será por cables&#8230;</li>
<li>Enchufar el USB a Window$ (yo uso VMWare) para que salte el aviso de &#8220;Nuevo Hardware&#8221; y os diga el modelo que tenéis&#8230; yo no tenía ni idea, Made in China, y en Linux no lo reconocía&#8230; descubrí que lo fabricaba Silicon Labs y los descargué de <a href="http://www.silabs.com/products/interface/usbtouart/Pages/usb-to-uart-bridge.aspx">aquí</a>. Tras instalarlos y reiniciar, si os vais a la parte de COM del &#8220;Administrador de Dispositivos&#8221; os tiene que aparecer esto:</li>
<li><a href="http://www.tecnocaos.com/wp-content/uploads/2011/01/COM.png"><img class="aligncenter size-medium wp-image-428" title="COM" src="http://www.tecnocaos.com/wp-content/uploads/2011/01/COM-300x211.png" alt="" width="300" height="211" /></a> A continuación, reinicias el cacharro, abrís el <a href="http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html">Putty</a> con la configuración que aparece en la imagen (en mi caso el COM3) y cuando el icono de red del Window$ indique que la conexión se ha establecido, le dais a Open en la aplicación:<a href="http://www.tecnocaos.com/wp-content/uploads/2011/01/PUTTY.png"><img class="aligncenter size-medium wp-image-430" title="PUTTY" src="http://www.tecnocaos.com/wp-content/uploads/2011/01/PUTTY-286x300.png" alt="" width="286" height="300" /></a></li>
<li>Si todo lo anterior lo habéis hecho bien, y tenéis el Redboot en la Fonera (imprescindible), os encontraréis con algo así:<br />
<a href="http://www.tecnocaos.com/wp-content/uploads/2011/01/REDBOOT.png"><img class="aligncenter size-medium wp-image-429" title="REDBOOT" src="http://www.tecnocaos.com/wp-content/uploads/2011/01/REDBOOT-300x181.png" alt="" width="300" height="181" /></a></li>
<li>Lo siguiente es seguir el Manual que aparece en un fichero de la página de DD-WRT junto al firmware (<a href="http://www.dd-wrt.com/routerdb/de/download.php?file=3592">fonera_flashing.txt</a>), y desde el Redboot:
<ol>
<li>Configurar la IP y la máscara de la Fonera y del servidor de ficheros TFTPD32 (mirar el <a href="http://www.tecnocaos.com/desbrickear-fonera-2100-y-restaurar-el-firmware-original/">manual</a> del otro día para aprender a usarlo), que a estas alturas debería estar corriendo y compartiendo linux.bin:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">Redboot<span style="color: #000000; font-weight: bold;">&gt;</span> ip_addr <span style="color: #660033;">-h</span> IP_DEL_ORDENADOR <span style="color: #660033;">-l</span> IP_DE_LA_FONERA<span style="color: #000000; font-weight: bold;">/</span><span style="color: #000000;">24</span></pre></div></div>

<li>Flashear la Fonera:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">RedBoot<span style="color: #000000; font-weight: bold;">&gt;</span> fis init
About to initialize <span style="color: #7a0874; font-weight: bold;">&#91;</span>format<span style="color: #7a0874; font-weight: bold;">&#93;</span> FLASH image system - <span style="color: #7a0874; font-weight: bold;">continue</span> <span style="color: #7a0874; font-weight: bold;">&#40;</span>y<span style="color: #000000; font-weight: bold;">/</span>n<span style="color: #7a0874; font-weight: bold;">&#41;</span>? y
<span style="color: #000000; font-weight: bold;">***</span> Initialize FLASH Image System
... Erase from 0xa83e0000-0xa83f0000: .
... Program from 0x80ff0000-0x81000000 at 0xa83e0000: .</pre></div></div>

<li>Cargar el linux.bin en la Fonera desde el TFTPD32:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">Redboot<span style="color: #000000; font-weight: bold;">&gt;</span> load <span style="color: #660033;">-r</span> <span style="color: #660033;">-v</span> <span style="color: #660033;">-b</span> 0x80041000 linux.bin
Using default protocol <span style="color: #7a0874; font-weight: bold;">&#40;</span>TFTP<span style="color: #7a0874; font-weight: bold;">&#41;</span>
Raw <span style="color: #c20cb9; font-weight: bold;">file</span> loaded 0x80041000-0x802e3fff, assumed entry at 0x80041000</pre></div></div>

<li>Flashear la Fonera con el nuevo firmware (tarda un buen rato&#8230; paciencia):</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">RedBoot<span style="color: #000000; font-weight: bold;">&gt;</span> fis create linux
... Erase from 0xa8030000-0xa82f0000: ............................................
... Program from 0x80041000-0x80301000 at 0xa8030000: ............................................
... Erase from 0xa83e0000-0xa83f0000: .
... Program from 0x80ff0000-0x81000000 at 0xa83e0000: .</pre></div></div>

<li>Cambiar la configuración de la Fonera para que arranque con carga de script. Meter las lineas de código que vienen tras >> y a todo lo demás ENTER. Al final pide una &#8216;y&#8217; para confirmar.</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">Redboot<span style="color: #000000; font-weight: bold;">&gt;</span> fconfig
enter the bootscript:
<span style="color: #000000; font-weight: bold;">&gt;&gt;</span>fis load <span style="color: #660033;">-l</span> linux
<span style="color: #000000; font-weight: bold;">&gt;&gt;</span><span style="color: #7a0874; font-weight: bold;">exec</span>
<span style="color: #000000; font-weight: bold;">&gt;&gt;</span></pre></div></div>

<li>Y por último un reinicio</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">Redboot<span style="color: #000000; font-weight: bold;">&gt;</span> reset</pre></div></div>

</ol>
</li>
</ol>
<p>Si todo a ido bien, vuestra Fonera con DD-WRT arrancará y abrirá una interfaz web en la IP que le hayáis puesto (http://192.168.1.254 o lo que sea).</p>
<p>¿Vale la pena todo esto? Pues digamos que a parte de que dejas de tener una red wifi de Fon (cosa que se agradece si como en mi caso nadie la usa) pasas de tener una interfaz &#8220;para tontos&#8221; con 4 botones:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/01/INTERFAZ1.jpg"><img class="aligncenter size-medium wp-image-431" title="INTERFAZ1" src="http://www.tecnocaos.com/wp-content/uploads/2011/01/INTERFAZ1-300x277.jpg" alt="" width="300" height="277" /></a>A una interfaz increíble con miles de opciones y un montón de funciones nuevas:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2011/01/Captura-de-pantalla-2011-01-13-a-las-03.38.59.png"><img class="aligncenter size-medium wp-image-432" title="Captura de pantalla 2011-01-13 a las 03.38.59" src="http://www.tecnocaos.com/wp-content/uploads/2011/01/Captura-de-pantalla-2011-01-13-a-las-03.38.59-300x246.png" alt="" width="300" height="246" /></a></p>
<ul>
<li>Modos de wifi: Access Point, Client, Client Bridge, Adhoc, WDS Station, WDS AP, Wifi Repeater</li>
<li>VPN</li>
<li>SSH</li>
<li>Telnet</li>
<li>Firewall</li>
<li>Mac Address Clone</li>
<li>XBOX kaid</li>
<li>Hotspots (Chilispot, Wifidog, Sputnik&#8230;)</li>
<li>Filtros de contenido (Cookies, Java, Proxy)</li>
<li>Ad-supported Hotspot (compartes wifi y pones banners xD)</li>
<li>Milkfish Sip Router</li>
<li>Bloqueo de URLs</li>
<li>Cron</li>
<li>Wake On Lan</li>
<li>BusyBox</li>
<li>Connection Warning Notifier</li>
<li>Estadísticas (memoria, conexiones, CPU, transferencias&#8230;)</li>
<li>&#8230;</li>
</ul>
<p>En resumen, conviertes un trasto &#8220;un poco inútil&#8221; en una navaja suiza. El próximo paso será conseguir otra salida de antena, o añadirle un lector de tarjetas, o&#8230; ¡a lo mejor trato de hacerle lo mismo a un Zyxel de Telefónica!</p>
<div align="left" style="float:left; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"><a name="fb_share" type="button_count" share_url="http://www.tecnocaos.com/firmware-dd-wrt-en-una-fonera-2100/"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.tecnocaos.com/firmware-dd-wrt-en-una-fonera-2100/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>TP-LINK TL-WA701ND, configurando mi nuevo juguete como Wifi repeater&#8230;</title>
		<link>http://www.tecnocaos.com/tp-link-tl-wa701nd-configurando-mi-nuevo-juguete-como-wifi-repeater/</link>
		<comments>http://www.tecnocaos.com/tp-link-tl-wa701nd-configurando-mi-nuevo-juguete-como-wifi-repeater/#comments</comments>
		<pubDate>Tue, 28 Dec 2010 16:40:34 +0000</pubDate>
		<dc:creator>Martín Chamarro</dc:creator>
				<category><![CDATA[Periféricos]]></category>
		<category><![CDATA[Redes]]></category>
		<category><![CDATA[802.11bgn]]></category>
		<category><![CDATA[Access Point]]></category>
		<category><![CDATA[antena]]></category>
		<category><![CDATA[APN]]></category>
		<category><![CDATA[cliente]]></category>
		<category><![CDATA[configuración]]></category>
		<category><![CDATA[punto de acceso]]></category>
		<category><![CDATA[repetidor universal]]></category>
		<category><![CDATA[repetidor wifi]]></category>
		<category><![CDATA[router]]></category>
		<category><![CDATA[TL-WA701ND]]></category>
		<category><![CDATA[TP-Link]]></category>
		<category><![CDATA[universal repeater]]></category>
		<category><![CDATA[WDS]]></category>
		<category><![CDATA[Wifi Repeater]]></category>
		<category><![CDATA[Wireless]]></category>

		<guid isPermaLink="false">http://www.tecnocaos.com/?p=403</guid>
		<description><![CDATA[Hace un par de semanas mi padre se quejaba de la mala cobertura Wifi que había en una casa que tenemos en el campo que tiene dos plantas. Le propuse colocar un router Telefónica viejo que tengo en casa como &#8230; <a href="http://www.tecnocaos.com/tp-link-tl-wa701nd-configurando-mi-nuevo-juguete-como-wifi-repeater/">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/TL-WA701ND-03.jpg"><img class="aligncenter size-medium wp-image-406" title="TL-WA701ND-03" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/TL-WA701ND-03-294x300.jpg" alt="" width="294" height="300" /></a></p>
<p>Hace un par de semanas mi padre se quejaba de la mala cobertura Wifi que había en una casa que tenemos en el campo que tiene dos plantas. Le propuse colocar un router Telefónica viejo que tengo en casa como segundo punto de acceso, conectado por cable de red al primero y creando una segunda red inalámbrica, pero no le convenció el tema de tener que tirar cable de red por la fachada de atrás de la casa (sacarlo por una ventana de arriba y meterlo por una ventana de abajo del otro extremo).<br />
<span id="more-403"></span></p>
<p>El estuvo mirando un sistema que convierte la instalación eléctrica en una red de cable como <a href="http://www.pcbox.com/comprar-kit-2-adaptador-de-homeplug-ethernet-netgear-200mbps-xavb2001_ngr198.aspx?ch=00000205110003070212031200060812b3b34d14d852738c5d44c8d34c4d0b660&amp;tar=31920&amp;tarc=0">este</a>, instalando tomas en algunos enchufes, pero es caro y he leído que la velocidad suele bajar y no da buenos resultados.</p>
<p>Yo encontré los Wifi Repeater de TP-Link y me compre en <a href="http://www.pccomponentes.com/tp_link_tl_wa701nd_punto_acceso_repetidor_11n_extended_range.html">PCComponentes</a> por 40,70€ (gastos de envío incluidos) el modelo de la foto de arriba. Tiene un montón de modos: punto de acceso, cliente, repetidor WDS, repetidor universal y puente. El que me interesaba y el que voy a explicar como configurar es el repetidor universal:</p>
<ol>
<li>Configurar la IP de la tarjeta de red del ordenador como 192.168.1.X (siempre que X no sea 254) y la máscara de red a 255.255.255.0</li>
<li>Conectar el aparato por cable de red (viene uno en la caja) al ordenador</li>
<li>Abrir un navegador y poner como URL la IP del aparato, que es 192.168.1.254</li>
<li>Escribir Usuario = &#8220;admin&#8221; y Password = &#8220;admin&#8221;, que es la configuración por defecto</li>
<li>Cambiar en el menú Network:  Gateway = &#8220;IP_DEL_ROUTER&#8221; (en mi caso 192.168.1.1) y Subnet Mask (sólo en el caso de que no sea la que viene por defecto, 255.255.255.0) y guardar los cambios.</li>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/network.png"><img class="aligncenter size-medium wp-image-408" title="network" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/network-300x106.png" alt="" width="300" height="106" /></a></p>
<li>Cambiar en Wireless Settings: Operation Mode = &#8220;Universal Repeater&#8221;, Region (en mi caso Spain), y clickar en Search, para que muestre la lista de redes Wifi disponibles. Después clickar en la que queréis repetir y comprobar que MAC of AP pasa a ser la Mac de vuestro router (BSSID), entonces guardar los cambios.</li>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/settings.png"><img class="aligncenter size-medium wp-image-409" title="settings" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/settings-300x147.png" alt="" width="300" height="147" /></a></p>
<li>Cambiar en Wireless Security la configuración de seguridad de la Wifi del router principal (yo por ejemplo tengo WPA con AES) y guardar los cambios.</li>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/security.png"><img class="aligncenter size-medium wp-image-410" title="security" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/security-300x195.png" alt="" width="300" height="195" /></a></p>
<li>Tras unos reinicios (después de guardar cosas) veréis que en la página de Status aparece correctamente la configuración</li>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/resumen.png"><img class="aligncenter size-medium wp-image-411" title="resumen" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/resumen-300x258.png" alt="" width="300" height="258" /></a></ol>
<p>Ahora en el salón tengo un 100% de cobertura de Wifi:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/Pantallazo.png"><img class="aligncenter size-medium wp-image-404" title="Pantallazo" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/Pantallazo-300x254.png" alt="" width="300" height="254" /></a></p>
<p>Y como además permite sustituir la antena por otra con conector SMA pues he sustituido la de 4dBi por otra de 12-14dBi que tenía por casa:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/antena.jpg"><img class="aligncenter size-medium wp-image-415" title="antena" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/antena-225x300.jpg" alt="" width="225" height="300" /></a></p>
<p>Ya os contaré que tal resultado da dentro de unos meses&#8230;</p>
<div align="left" style="float:left; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"><a name="fb_share" type="button_count" share_url="http://www.tecnocaos.com/tp-link-tl-wa701nd-configurando-mi-nuevo-juguete-como-wifi-repeater/"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.tecnocaos.com/tp-link-tl-wa701nd-configurando-mi-nuevo-juguete-como-wifi-repeater/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>Tor: navegación anónima en Ubuntu</title>
		<link>http://www.tecnocaos.com/tor-navegacion-anonima-en-ubuntu/</link>
		<comments>http://www.tecnocaos.com/tor-navegacion-anonima-en-ubuntu/#comments</comments>
		<pubDate>Sun, 26 Dec 2010 16:44:14 +0000</pubDate>
		<dc:creator>Martín Chamarro</dc:creator>
				<category><![CDATA[Aplicación]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[Seguridad]]></category>
		<category><![CDATA[Servidores]]></category>
		<category><![CDATA[anónimo]]></category>
		<category><![CDATA[anonymous]]></category>
		<category><![CDATA[cadena proxy]]></category>
		<category><![CDATA[DNS]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Polipo]]></category>
		<category><![CDATA[privacidad]]></category>
		<category><![CDATA[proxy]]></category>
		<category><![CDATA[Sinde]]></category>
		<category><![CDATA[The Onion Router]]></category>
		<category><![CDATA[Tor]]></category>
		<category><![CDATA[Torbutton]]></category>
		<category><![CDATA[Ubuntu]]></category>
		<category><![CDATA[Vidalia]]></category>

		<guid isPermaLink="false">http://www.tecnocaos.com/?p=386</guid>
		<description><![CDATA[Tor (The Onion Router) es un proyecto de software libre que ofrece a los usuarios una forma de navegación anónima mediante el empleo de cadenas de proxys entre los que se cifran las transmisiones, lo que les defiende de los &#8230; <a href="http://www.tecnocaos.com/tor-navegacion-anonima-en-ubuntu/">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/tor-browsing.jpg"><img class="aligncenter size-medium wp-image-387" title="tor-browsing" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/tor-browsing-300x210.jpg" alt="" width="300" height="210" /></a></p>
<p><a href="http://www.torproject.org/">Tor</a> (The Onion Router) es un proyecto de software libre que ofrece a los usuarios una forma de navegación anónima mediante el empleo de cadenas de proxys entre los que se cifran las transmisiones, lo que les defiende de los análisis de tráfico y oculta la IP pública de sus routers. Esto puede ser muy útil ahora que las cosas por Internet se están poniendo feas y quieren terminar con las libertades y controlarlo todo&#8230;<span id="more-386"></span></p>
<p>Esta imagen ilustra lo que ocurre entre el usuario y el servidor de destino:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/htw3.png"><img class="aligncenter size-medium wp-image-390" title="htw3" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/htw3-300x191.png" alt="" width="300" height="191" /></a>El inconveniente es que al aumentar el número de saltos se disminuye la velocidad de navegación, pero es lo que cuesta conseguir ser anónimo.</p>
<p>Ahora pasemos a la instalación en Ubuntu:</p>
<ol>
<li>Tenemos que añadir al OS los repositorios de Tor, para ello abrimos una terminal y escribimos:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #7a0874; font-weight: bold;">echo</span> deb http:<span style="color: #000000; font-weight: bold;">//</span>deb.torproject.org<span style="color: #000000; font-weight: bold;">/</span>torproject.org $<span style="color: #7a0874; font-weight: bold;">&#40;</span>lsb_release -cs<span style="color: #7a0874; font-weight: bold;">&#41;</span> main <span style="color: #000000; font-weight: bold;">|</span> <span style="color: #c20cb9; font-weight: bold;">sudo</span> <span style="color: #c20cb9; font-weight: bold;">tee</span> <span style="color: #000000; font-weight: bold;">/</span>etc<span style="color: #000000; font-weight: bold;">/</span>apt<span style="color: #000000; font-weight: bold;">/</span>sources.list.d<span style="color: #000000; font-weight: bold;">/</span>torproject.list</pre></div></div>

<li>Ahora toca añadir la clave de ese repositorio con lo siguiente (a mi me falló unas cuantas veces&#8230; paciencia hasta que funcione):</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">gpg <span style="color: #660033;">--keyserver</span> keys.gnupg.net <span style="color: #660033;">--recv</span> 886DDD89 <span style="color: #000000; font-weight: bold;">&gt;&gt;</span> gpg <span style="color: #660033;">--export</span> A3C4F0F979CAA22CDBA8F512EE8CBC9E886DDD89 <span style="color: #000000; font-weight: bold;">|</span> <span style="color: #c20cb9; font-weight: bold;">sudo</span> <span style="color: #c20cb9; font-weight: bold;">apt-key</span> add -</pre></div></div>

<li>El siguiente paso consiste en actualizar la lista de paquetes de Aptitude tras haber añadido un repositorio nuevo:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">sudo</span> <span style="color: #c20cb9; font-weight: bold;">aptitude</span> update</pre></div></div>

<li>En este paso vamos a instalar Tor y Vidalia (interfaz gráfica de configuración), seleccionando durante la instalación del segundo la opción &#8220;Yes (and disable it for every boot)&#8221;, para que controle el funcionamiento de Tor:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">sudo</span> <span style="color: #c20cb9; font-weight: bold;">aptitude</span> <span style="color: #c20cb9; font-weight: bold;">install</span> tor tor-geoipdb
<span style="color: #c20cb9; font-weight: bold;">sudo</span> <span style="color: #c20cb9; font-weight: bold;">aptitude</span> <span style="color: #c20cb9; font-weight: bold;">install</span> vidalia</pre></div></div>

<li>Una vez hecho esto, tenemos que descargarnos el fichero de configuración de Polipo (un proxy HTTP que se instala en el paso anterior y que impide que Firefox haga peticiones DNS fuera de la red Tor) desde Git y sustituir al que se encuentra en /etc/polipo/config, reiniciando a continuación el servicio:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">wget</span> https:<span style="color: #000000; font-weight: bold;">//</span>gitweb.torproject.org<span style="color: #000000; font-weight: bold;">/</span>torbrowser.git<span style="color: #000000; font-weight: bold;">/</span>blob_plain<span style="color: #000000; font-weight: bold;">/</span>a973a0bddeec5d35efbcf1defbfab5d0e8682a71:<span style="color: #000000; font-weight: bold;">/</span>build-scripts<span style="color: #000000; font-weight: bold;">/</span>config<span style="color: #000000; font-weight: bold;">/</span>polipo.conf
<span style="color: #c20cb9; font-weight: bold;">sudo</span> <span style="color: #c20cb9; font-weight: bold;">cp</span> <span style="color: #000000; font-weight: bold;">/</span>etc<span style="color: #000000; font-weight: bold;">/</span>polipo<span style="color: #000000; font-weight: bold;">/</span>config<span style="color: #7a0874; font-weight: bold;">&#123;</span>,.original<span style="color: #7a0874; font-weight: bold;">&#125;</span>
<span style="color: #c20cb9; font-weight: bold;">sudo</span> <span style="color: #c20cb9; font-weight: bold;">mv</span> polipo.conf <span style="color: #000000; font-weight: bold;">/</span>etc<span style="color: #000000; font-weight: bold;">/</span>polipo<span style="color: #000000; font-weight: bold;">/</span>config
<span style="color: #c20cb9; font-weight: bold;">sudo</span> service polipo restart</pre></div></div>

<li>Después de esto ya podemos arrancar Vidalia desde el menú Aplicaciones>Internet>Vidalia y comprobar que Tor funciona</li>
<p>
<a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/Pantallazo-Panel-de-Control-de-Vidalia-1.png"><img class="aligncenter size-medium wp-image-391" title="Pantallazo-Panel de Control de Vidalia-1" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/Pantallazo-Panel-de-Control-de-Vidalia-1-300x231.png" alt="" width="300" height="231" /></a><br />
</p>
<li>Por último sólo tenemos que añadir a Firefox el plugin Torbutton que podemos encontrar <a href="http://www.torproject.org/torbutton/">aquí</a>, y que permite activar y desactivar Tor desde el navegador con un botón que se encuentra en la barra inferior a la derecha. Para quedarnos tranquilos, y después de activar el Torbutton haciendo click en su icono, tenemos que ir a <a href="https://check.torproject.org/">https://check.torproject.org/</a>, en donde nos debe aparecer el siguiente mensaje:</li>
<p>
<a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/Pantallazo-Are-you-using-Tor-Mozilla-Firefox.png"><img class="aligncenter size-medium wp-image-392" title="Pantallazo-Are you using Tor? - Mozilla Firefox" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/Pantallazo-Are-you-using-Tor-Mozilla-Firefox-300x169.png" alt="" width="300" height="169" /></a><br />

</ol>
<p>Esto es todo, yo seguí un tutorial de hace medio año que se encuentra en <a href="http://www.taringa.net/posts/linux/5663209/navegar-anonimo-en-ubuntu-10_04-guia-completa.html">Taringa!</a>, pero con los meses había cambiado una cosa, y decidí escribir aquí lo que me ha funcionado y tenerlo al día.</p>
<p>Espero que sepáis utilizarlo y os sea útil!</p>
<div align="left" style="float:left; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"><a name="fb_share" type="button_count" share_url="http://www.tecnocaos.com/tor-navegacion-anonima-en-ubuntu/"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.tecnocaos.com/tor-navegacion-anonima-en-ubuntu/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Repodroid: repositorios de Android en Dropbox</title>
		<link>http://www.tecnocaos.com/repodroid-repositorios-de-android-en-dropbox/</link>
		<comments>http://www.tecnocaos.com/repodroid-repositorios-de-android-en-dropbox/#comments</comments>
		<pubDate>Wed, 22 Dec 2010 02:29:05 +0000</pubDate>
		<dc:creator>Martín Chamarro</dc:creator>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Aplicación]]></category>
		<category><![CDATA[Desarrollo web]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[Servidores]]></category>
		<category><![CDATA[APKator]]></category>
		<category><![CDATA[APKtor]]></category>
		<category><![CDATA[aplicaciones]]></category>
		<category><![CDATA[BASH]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[descargas]]></category>
		<category><![CDATA[Dropbox]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JS]]></category>
		<category><![CDATA[Repodroid]]></category>
		<category><![CDATA[repositorio]]></category>
		<category><![CDATA[Ubuntu]]></category>

		<guid isPermaLink="false">http://www.tecnocaos.com/?p=372</guid>
		<description><![CDATA[Llevo tiempo usando APKtor, pero la gran cantidad de fallos de descarga que muestra la aplicación (al menos con los repositorios que uso) me ha llevado a buscar otro sistema. Hace unas semanas traté de hacer en PHP un código &#8230; <a href="http://www.tecnocaos.com/repodroid-repositorios-de-android-en-dropbox/">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/Repodroid.jpg"><img class="aligncenter size-medium wp-image-373" title="Repodroid" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/Repodroid-180x300.jpg" alt="" width="180" height="300" /></a></p>
<p>Llevo tiempo usando <strong>APKtor</strong>, pero la gran cantidad de fallos de descarga que muestra la aplicación (al menos con los repositorios que uso) me ha llevado a buscar otro sistema. Hace unas semanas traté de hacer en PHP un código parecido al que utilizaba Aptoide en la parte de servidor pero que contara con un par de mejoras: una interfaz web que permitiera descargar las aplicaciones del repositorio sin tener que instalar nada en el móvil y un formulario para subir .apk directamente desde el navegador de Android.</p>
<p><span id="more-372"></span></p>
<p>Lo terminé, pero descubrí en mal momento que debido a un <a href="http://code.google.com/p/android/issues/detail?id=2519">bug</a> (o <em><a href="http://e-abaco.net/wp-content/uploads/2009/06/bug-feature.jpg">feature</a></em>) no está permitido subir aplicaciones desde el navegador oficial (en cambio es posible con Opera Mobile). Como sin la mejora de la subida de ficheros desde el móvil no veía demasiado sentido a lo que estaba haciendo se me ocurrió darle un par de vueltas más, y decidí que lo mejor era buscar un sistema para que cualquiera pudiera montar un repositorio, sin necesidad de tener un alojamiento web a mano. Aquí entro en juego <a href="https://www.dropbox.com/">Dropbox</a>, y su sistema de ficheros compartidos.</p>
<p>Lo que acabé haciendo fue una interfaz web (HTML + algo de CSS3 + Javascript) sencilla y un script en BASH que extrae la información de los paquetes y te genera un fichero XML con toda la información que veis en la imagen de arriba (click para ampliar). ¿Y que permite esto? Pues crear una página accesible desde Internet y que contenga una lista de aplicaciones descargables junto a su información, todo ello desde Linux y usando Dropbox. Y se llama <strong>Repodroid</strong> (Repositorio Android, original 1000%).</p>
<p>Intrucciones de uso:</p>
<ol>
<li>Descomprimir en la carpeta pública de Dropbox que tenéis en local el contenido de <a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/Repodroid.zip">ESTE .ZIP</a>, de forma que quede así:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">~<span style="color: #000000; font-weight: bold;">/</span>Dropbox<span style="color: #000000; font-weight: bold;">/</span>Public$ <span style="color: #c20cb9; font-weight: bold;">ls</span>
aapt  apks  generateXML.sh  images  index.html  js  style</pre></div></div>

<li>Cambiar los permisos para permitir la ejecución de aapt y generateXML.sh:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">chmod</span> +x aapt generateXML.sh</pre></div></div>

<li>Instalar un par de linbrerías por medio de apt-get o aptitude (no es obligatorio, pero sin ellas no se pueden comprimir los iconos de las aplicaciones, y ocupan demasiado&#8230;</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">sudo</span> <span style="color: #c20cb9; font-weight: bold;">aptitude</span> <span style="color: #c20cb9; font-weight: bold;">install</span> imagemagick pngnq</pre></div></div>

<li>Ahora hay hay que añadir las aplicaciones que queramos compartir en el directorio apks/</li>
<li>Por último hay que ejecutar el script (tiene dos modos &#8220;-c&#8221; o con compresión y &#8220;-n&#8221; o normal), que dará una salida parecida a la de este ejemplo:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">~<span style="color: #000000; font-weight: bold;">/</span>Dropbox<span style="color: #000000; font-weight: bold;">/</span>Public$ .<span style="color: #000000; font-weight: bold;">/</span>generateXML.sh <span style="color: #660033;">-c</span>
T <span style="color: #000000; font-weight: bold;">&gt;</span> apks<span style="color: #000000; font-weight: bold;">/</span>ADW.Launcher_pre_1.3.0_themers_only.apk
T <span style="color: #000000; font-weight: bold;">&gt;</span> apks<span style="color: #000000; font-weight: bold;">/</span>androidVNC_build20101119.apk
T <span style="color: #000000; font-weight: bold;">&gt;</span> apks<span style="color: #000000; font-weight: bold;">/</span>anycut.apk
T <span style="color: #000000; font-weight: bold;">&gt;</span> apks<span style="color: #000000; font-weight: bold;">/</span>ConnectBot-git-<span style="color: #000000;">2010</span>-<span style="color: #000000;">12</span>-09_02-<span style="color: #000000;">45</span>-<span style="color: #000000;">59</span>.apk
T <span style="color: #000000; font-weight: bold;">&gt;</span> apks<span style="color: #000000; font-weight: bold;">/</span>k9-<span style="color: #000000;">3.400</span>-release.apk
T <span style="color: #000000; font-weight: bold;">&gt;</span> apks<span style="color: #000000; font-weight: bold;">/</span>python_for_android_r1.apk
T <span style="color: #000000; font-weight: bold;">&gt;</span> apks<span style="color: #000000; font-weight: bold;">/</span>RemoteDroid-v1.4.apk
T <span style="color: #000000; font-weight: bold;">&gt;</span> apks<span style="color: #000000; font-weight: bold;">/</span>Term.apk
Enjoy your repo<span style="color: #000000; font-weight: bold;">!</span> ;<span style="color: #7a0874; font-weight: bold;">&#41;</span></pre></div></div>

<li>Después de eso ya tenéis todo el sistema montado en la parte pública de Dropbox, para compartirlo sólo tenéis que acceder desde la web a la parte pública y hacer click en el siguiente enlace:<a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/Captura-de-pantalla-2010-12-22-a-las-02.53.50.png"><img class="aligncenter size-medium wp-image-379" title="Captura de pantalla 2010-12-22 a las 02.53.50" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/Captura-de-pantalla-2010-12-22-a-las-02.53.50-300x257.png" alt="" width="300" height="257" /></a></li>
<li>Con esto obtendréis un enlace del tipo &#8220;<em>http://dl.dropbox.com/X/XXXXXXX/index.html</em>&#8221; al que podréis acceder desde el móvil y que podréis compartir con quien queráis (una posible mejora es conseguir un dominio gratuito, más sencillo de recordar, y hacer que apunte a esa URL).</li>
</ol>
<p>Cada vez que queráis actualizar el contenido del repositorio, sólo tenéis que repetir los pasos 4 y 5 desde el ordenador y automáticamente Dropbox se actualizará con los cambios.</p>
<p><span style="line-height: 24px; font-size: 16px;"><span style="color: #ff0000;">Por último dejar claro que la finalidad de este sistema es la de ayudar a difundir aquellas aplicaciones desarrolladas por vosotros mismos o de software libre, en ningún caso aplicaciones piratas descargadas de internet. Del mismo modo sóis libres de modificar el código y hacer lo que queráis con él (siempre que nombréis el origen) y de sugerir modificaciones que lo puedan hacer mejor o notificar fallos.</span></span></p>
<p><span style="color: #000000;">Espero comentarios!</span></p>
<p><span style="color: #000000;"><br />
</span></p>
<p><strong>NOTA</strong>: esta optimizado para Android 2.x y lo he probado en Dropbox, pero vamos, que el mismo sistema se puede usar en otros discos duros en la nube (me imagino). También puedo colgar un PHP que hace lo mismo que el BASH para colgarlo en algún server.</p>
<div align="left" style="float:left; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"><a name="fb_share" type="button_count" share_url="http://www.tecnocaos.com/repodroid-repositorios-de-android-en-dropbox/"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.tecnocaos.com/repodroid-repositorios-de-android-en-dropbox/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Comandos para redimensionar y modificar la calidad de imágenes PNG</title>
		<link>http://www.tecnocaos.com/comandos-para-redimensionar-y-modificar-la-calidad-de-imagenes-png/</link>
		<comments>http://www.tecnocaos.com/comandos-para-redimensionar-y-modificar-la-calidad-de-imagenes-png/#comments</comments>
		<pubDate>Tue, 14 Dec 2010 02:30:15 +0000</pubDate>
		<dc:creator>Martín Chamarro</dc:creator>
				<category><![CDATA[Aplicación]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[BASH]]></category>
		<category><![CDATA[comandos]]></category>
		<category><![CDATA[compresión]]></category>
		<category><![CDATA[convert]]></category>
		<category><![CDATA[du]]></category>
		<category><![CDATA[filtros]]></category>
		<category><![CDATA[imagemagic]]></category>
		<category><![CDATA[imágenes]]></category>
		<category><![CDATA[PNG]]></category>
		<category><![CDATA[pngcrush]]></category>
		<category><![CDATA[pngnq]]></category>
		<category><![CDATA[script]]></category>
		<category><![CDATA[Terminal]]></category>
		<category><![CDATA[Ubuntu]]></category>

		<guid isPermaLink="false">http://www.tecnocaos.com/?p=363</guid>
		<description><![CDATA[Este fin de semana he estado buscando una forma de reducir el tamaño de unas imágenes y su calidad, porque me interesaba hacer una interfaz web ligera para móviles. En los repositorios de Ubuntu he encontrado unas herramientas que no &#8230; <a href="http://www.tecnocaos.com/comandos-para-redimensionar-y-modificar-la-calidad-de-imagenes-png/">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/colores.png"><img class="aligncenter size-medium wp-image-364" title="colores" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/colores-300x300.png" alt="" width="300" height="300" /></a>Este fin de semana he estado buscando una forma de reducir el tamaño de unas imágenes y su calidad, porque me interesaba hacer una interfaz web ligera para móviles.</p>
<p>En los repositorios de Ubuntu he encontrado unas herramientas que no están mal y que al poder ser usadas desde linea de comandos, se pueden añadir a scripts<span id="more-363"></span>:</p>
<ul>
<li>El paquete <strong>imagemagic</strong>,  y el comando <strong>convert</strong>. Con este comando se puede cambiar el formato de una imagen, girarla, cambiarla de tamaño&#8230; ¡hasta aplicar efectos! Yo la he usado para redimensionarla de la siguiente manera:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">convert imagen.jpg <span style="color: #660033;">-resize</span> 1024x640 nueva_imagen.jpg</pre></div></div>

<p>Donde 1024&#215;640 son las dimensiones de la imagen resultante, que se guarda en nueva_imagen.jpg</p>
<li>El paquete <strong>pngnq</strong> con el comando de mismo nombre. Utiliza un algoritmo de cuantización de imágenes que permite pasar de un PNG de 32-bits de color a uno de 256 colores o menos. El tamaño que ocupa la imagen se reduce muchísimo, y el resultado suele ser bueno. He llegado a obtener buenos resultados incluso con una paleta de 32 colores. El comando se utiliza así:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">pngnq imagen.png <span style="color: #660033;">-n</span> <span style="color: #000000;">32</span></pre></div></div>

<p>Donde 32 es el número de colores de la paleta y el fichero resultante se llama imagen-nq8.png</p>
<li>El paquete <strong>pngcrush</strong> con el comando de mismo nombre. Es un optimizador de imágenes PNG, que utiliza varios algoritmos de compresión y filtros para reducir el tamaño de los ficheros. Recomiendan su uso combinado con pngnq, y se utiliza así:</li>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">pngcrush <span style="color: #660033;">-rem</span> <span style="color: #660033;">-reduce</span> <span style="color: #660033;">-brute</span> imagen.png nueva_imagen.png</pre></div></div>

<p>En este ejemplo se elimina la información adicional del fichero (-rem), se reduce el tamaño (-reduce) y se prueban por fuerza bruta 114 filtros y compresiones, eligiendo la mejor (-brute)</p>
<p>Con estos comandos podemos hacernos un script sencillo que modifique todas las imágenes de un directorio, con estos comando como:</ul>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">#!/bin/bash</span>
<span style="color: #000000; font-weight: bold;">for</span> imagen <span style="color: #000000; font-weight: bold;">in</span> <span style="color: #000000; font-weight: bold;">*</span>.png; <span style="color: #000000; font-weight: bold;">do</span>
    convert <span style="color: #007800;">$imagen</span> <span style="color: #660033;">-resize</span> 1000x1000 <span style="color: #007800;">$imagen</span>;
    pngnq <span style="color: #007800;">$imagen</span> <span style="color: #660033;">-n</span> <span style="color: #000000;">256</span>;
    pngcrush <span style="color: #660033;">-rem</span> <span style="color: #660033;">-reduce</span> <span style="color: #660033;">-brute</span> <span style="color: #660033;">-force</span> <span style="color: #800000;">${imagen%.*}</span>-nq8.png <span style="color: #007800;">$imagen</span>;
    <span style="color: #c20cb9; font-weight: bold;">rm</span> <span style="color: #660033;">-f</span> <span style="color: #800000;">${imagen%.*}</span>-nq8.png;
<span style="color: #000000; font-weight: bold;">done</span>;</pre></div></div>

<p>Y para acabar, un ejemplo con un par de imágenes, la primera antes de aplicar <strong>pngnq</strong> y <strong>pngcrush</strong> como en el script anterior, y la segunda como resultado:</p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/poster1.png"><img class="aligncenter size-medium wp-image-366" title="poster1" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/poster1-215x300.png" alt="" width="215" height="300" /></a></p>
<p><a href="http://www.tecnocaos.com/wp-content/uploads/2010/12/poster2.png"><img class="aligncenter size-medium wp-image-367" title="poster2" src="http://www.tecnocaos.com/wp-content/uploads/2010/12/poster2-215x300.png" alt="" width="215" height="300" /></a></p>
<p>Si aplicamos el comando <strong>du</strong> para comprobar el tamaño en bytes:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">du</span> <span style="color: #660033;">-b</span> poster<span style="color: #000000; font-weight: bold;">*</span>
<span style="color: #000000;">1854398</span>	poster1.png
<span style="color: #000000;">474083</span>	poster2.png</pre></div></div>

<p>Estamos pasando de 1.85MB a 474KB y conservamos las dimensiones(y aunque en la vista previa no se aprecie, las dos tienen transparencias).</p>
<p>Un saludo, y comentad si lo probáis!</p>
<div align="left" style="float:left; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"><a name="fb_share" type="button_count" share_url="http://www.tecnocaos.com/comandos-para-redimensionar-y-modificar-la-calidad-de-imagenes-png/"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.tecnocaos.com/comandos-para-redimensionar-y-modificar-la-calidad-de-imagenes-png/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

