tag:blogger.com,1999:blog-86188095924792270492024-03-18T20:27:55.868-07:00Laboratorio de Software Libre UTN FRAUnknownnoreply@blogger.comBlogger54125tag:blogger.com,1999:blog-8618809592479227049.post-67771877212080523282015-07-24T14:40:00.000-07:002015-07-24T14:40:08.661-07:00LibreConference 2015<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN9G7YoP8xMREPevyF7n0Ldh2FHaHBt4pI4Bkni1sgmGwomOc6KpPT4gW_LnayuzZEGLz58KUEDJ0XuYxXVSuX7m1T_FzU3wW-V9mXjIi_YZGin6eVE24JlrTQVbxpi4ombgkoQM7kNrp2/s1600/logo_horizontal.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="66" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN9G7YoP8xMREPevyF7n0Ldh2FHaHBt4pI4Bkni1sgmGwomOc6KpPT4gW_LnayuzZEGLz58KUEDJ0XuYxXVSuX7m1T_FzU3wW-V9mXjIi_YZGin6eVE24JlrTQVbxpi4ombgkoQM7kNrp2/s400/logo_horizontal.png" width="400" /></a></div>
<br />
<br />
Aquí están los videos de las charlas realizadas en la LibreConference 2015 en UTN-FRA.<br />
<br />
<b><span style="color: orange;">WordPress para programadores</span></b><br />
<iframe allowfullscreen="" frameborder="0" height="532" src="https://www.youtube.com/embed/ndwn3itTeSc" width="640"></iframe>
<b><span style="color: orange;"><br /></span></b>
<b><span style="color: orange;"><br /></span></b><br />
<br />
<b><span style="color: orange;">GNU/Linux para programadores</span></b><br />
<iframe allowfullscreen="" frameborder="0" height="532" src="https://www.youtube.com/embed/7UHi0zOBYec" width="640"></iframe>
<b><span style="color: orange;"><br /></span></b>
<b><span style="color: orange;"><br /></span></b><br />
<br />
<b><span style="color: orange;">NoSQL más allá de BigData</span></b><br />
<iframe allowfullscreen="" frameborder="0" height="532" src="https://www.youtube.com/embed/MzlLqtIUHi8" width="640"></iframe>
<b><span style="color: orange;"><br /></span></b>
<b><span style="color: orange;"><br /></span></b><br />
<br />
<b><span style="color: orange;">Pensando en Micro, para el Macro: Arquitectura de Microservicios</span></b><br />
<iframe allowfullscreen="" frameborder="0" height="532" src="https://www.youtube.com/embed/T_6Ig0Gxr6k" width="640"></iframe>
<b><span style="color: orange;"><br /></span></b>
<b><span style="color: orange;"><br /></span></b><br />
<br />
<b><span style="color: orange;">In-seguridad Informática. Pensando como un Hacker</span></b><br />
<iframe allowfullscreen="" frameborder="0" height="532" src="https://www.youtube.com/embed/wl2ZpSgWWqI" width="640"></iframe>
<b><span style="color: orange;"><br /></span></b>
<b><span style="color: orange;"><br /></span></b><br />
<br />Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-79588559734905878262014-12-31T05:43:00.000-08:002015-08-27T04:52:47.115-07:00SummerJS 2014<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnp4ptQAD9qHs0VGMCoLHlpCVzsWwXzLbATET1x50sV23JBpvyFsjJC8cmKSp602-Sm53OU8BYOzA_x5KYx5EoO3hgL5wq87JGsq1VMaT2yL-ZMgRjlgXfS0ngvSAR1m-MLECsnjmv6my/s1600/summerjs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnp4ptQAD9qHs0VGMCoLHlpCVzsWwXzLbATET1x50sV23JBpvyFsjJC8cmKSp602-Sm53OU8BYOzA_x5KYx5EoO3hgL5wq87JGsq1VMaT2yL-ZMgRjlgXfS0ngvSAR1m-MLECsnjmv6my/s1600/summerjs.png" height="125" width="200" /></a></div>
<br />
Aquí están los videos de las charlas realizadas en el seminario.<br />
<br />
<b><span style="color: orange;">AngularJS y React, las nuevas estrellas de la web</span></b><br />
<iframe allowfullscreen="" frameborder="0" height="532" src="//www.youtube.com/embed/d4nL60X_SPM?list=PL_VQEgwix_S8rMxQZDsqEoyYfHRZ9NN0Y" width="640"></iframe>
<b><span style="color: orange;"><br /></span></b>
<b><span style="color: orange;"><br /></span></b><br />
<b>Source code de las demos:</b><br />
<b><br /></b>
<b><a href="http://www.lslutnfra.com/alumnos/cursos/SummerJS2014/DemosAngularJs.zip" rel="nofollow" target="_blank">Descarga aquí</a></b><br />
<b><br /></b>
<b><span style="color: orange;"><br /></span></b>
<b><span style="color: orange;">La verdadera Real-Time web.</span></b><br />
<iframe allowfullscreen="" frameborder="0" height="532" src="//www.youtube.com/embed/M4M5OQ_BgC4?list=PL_VQEgwix_S8rMxQZDsqEoyYfHRZ9NN0Y" width="640"></iframe>
<b><span style="color: orange;"><br /></span></b>
<span style="color: orange;"><b><br /></b></span><br />
<b>Source code de las demos:</b><br />
<b><br /></b>
<b><a href="http://www.lslutnfra.com/alumnos/cursos/SummerJS2014/demos3D.zip" rel="nofollow" target="_blank">Descarga aquí</a></b><br />
<b><br /></b>
<b><br /></b>
<span style="color: orange;"><b>Desarrollo de aplicaciones móviles con tecnologías web.</b></span><br />
<iframe allowfullscreen="" frameborder="0" height="532" src="//www.youtube.com/embed/8-UTNFWyme0?list=PL_VQEgwix_S8rMxQZDsqEoyYfHRZ9NN0Y" width="640"></iframe>
<span style="color: orange;"><b><br /></b></span>
<span style="color: orange;"><b><br /></b></span><br />
<span style="color: orange;"><b><br /></b></span>
<span style="color: orange;"><b>Security Stack para aplicaciones modernas.</b></span><br />
<span style="color: orange;"><b><br /></b></span>
<span style="color: orange;"><b>Parte 1: JSON Web Tokens</b></span><br />
<iframe allowfullscreen="" frameborder="0" height="532" src="//www.youtube.com/embed/9is84HRuiec?list=PL_VQEgwix_S8rMxQZDsqEoyYfHRZ9NN0Y" width="640"></iframe>
<span style="color: orange;"><b><br /></b></span>
<br />
<div>
<b><span style="color: orange;"><br /></span></b>
<b style="color: orange;">Parte 2: OAuth2.0 y OpenID Connect</b></div>
<iframe allowfullscreen="" frameborder="0" height="532" src="//www.youtube.com/embed/483kB83-st4?list=PL_VQEgwix_S8rMxQZDsqEoyYfHRZ9NN0Y" width="640"></iframe>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8618809592479227049.post-9897419459389600792014-11-08T17:05:00.001-08:002015-08-27T04:54:24.171-07:00PHP Conference 2014<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9PUIxenXY4yfa0A03oywYtSSrdg-TzYiagnCiJpiD7XQ8urVVSPqDcNjbUksCLuIZmQUmEmf1phluSqkbnVPsS7ASKshzmNeur5IJvhaAjbXWkHugkggDMO1bOynDSug6wB-CtnyZGCGn/s1600/logo-php.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9PUIxenXY4yfa0A03oywYtSSrdg-TzYiagnCiJpiD7XQ8urVVSPqDcNjbUksCLuIZmQUmEmf1phluSqkbnVPsS7ASKshzmNeur5IJvhaAjbXWkHugkggDMO1bOynDSug6wB-CtnyZGCGn/s1600/logo-php.png" height="200" width="197" /></a></div>
<br />
El sábado 8 de noviembre estuvimos en la <a href="http://2014.phpconference.com.ar/">PHP Conference 2014</a> mostrando un control de luces y temperatura con una interfaz web utilizando Python, Javascript y la placa de desarrollo Beaglebone Black.<br />
<br />
<iframe frameborder="0" src="http://docs.google.com/gview?url=http://www.lslutnfra.com/alumnos/cursos/phpConference/presentacionBBB-php-Conference-1.3.pdf&embedded=true" style="height: 480px; width: 590px;"></iframe>
Construimos una placa que nos permitió monitorizar la temperatura, y controlar 2 lámparas mediante dos salidas de la Beaglebone Black.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsP1SgmC2ROfwdnRlVOhFLSpNUtfFgrtkUmVmPkeqcqNh-BkIH2dF2nWtAow6w8QAxyitObODM_orJvzyNqaN2LhT6yXkOp_EZbvdJN0d0Wbu2KYEV2YyeRAImiMb1vpMtdR8FGADQDq8Q/s1600/bbbycape.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsP1SgmC2ROfwdnRlVOhFLSpNUtfFgrtkUmVmPkeqcqNh-BkIH2dF2nWtAow6w8QAxyitObODM_orJvzyNqaN2LhT6yXkOp_EZbvdJN0d0Wbu2KYEV2YyeRAImiMb1vpMtdR8FGADQDq8Q/s1600/bbbycape.jpg" height="400" width="243" /></a></div>
<br />
Utilizamos un servidor web Python para poder acceder a una página web que nos permitió controlar las luces:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuTZIXfOJLjUSo45OZEZsUxZDyxz9vn9j-vKoNaP6WHF1TOFZmaVaOotjhdSccTyBasdaxyEQj8Aq1AV3tm41d2fvsROZ4d-eJNNrBq2OffolPdXc86h-xRNlvNllQGq1kiRT6300MgM4Y/s1600/paginaBBB.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuTZIXfOJLjUSo45OZEZsUxZDyxz9vn9j-vKoNaP6WHF1TOFZmaVaOotjhdSccTyBasdaxyEQj8Aq1AV3tm41d2fvsROZ4d-eJNNrBq2OffolPdXc86h-xRNlvNllQGq1kiRT6300MgM4Y/s1600/paginaBBB.png" height="331" width="640" /></a></div>
<br />
Adjuntamos el código Python y Javascript utilizado, junto con los esquemáticos de la placa desarrollada:<br />
<br />
<br />
<ul>
<li><a href="http://www.lslutnfra.com/alumnos/cursos/phpConference/LSL_PCB_Project.pdf">Descargar Esquemáticos</a>.</li>
<li><a href="http://www.lslutnfra.com/alumnos/cursos/phpConference/pythonServer.zip">Descargar Código.</a></li>
</ul>
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8618809592479227049.post-66658738905760207202014-09-30T13:48:00.002-07:002014-09-30T13:48:42.656-07:00Django en Amazon Web Services (AWS) <div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFzgW9Vbi3Mp93GtROdRvs9xURQHqGMs978sfzbJJQOB1SeB6RUaJahuapd9OUwieXJ74okarSk4po9BGesEpTlniKjmkD9SUH7FxbCTMhf5xM46mxLfRX6CmsG_i3XqR7Bef5O1kbzM8k/s1600/django-frameword.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFzgW9Vbi3Mp93GtROdRvs9xURQHqGMs978sfzbJJQOB1SeB6RUaJahuapd9OUwieXJ74okarSk4po9BGesEpTlniKjmkD9SUH7FxbCTMhf5xM46mxLfRX6CmsG_i3XqR7Bef5O1kbzM8k/s1600/django-frameword.png" height="170" width="400" /></a></div>
Como sabemos <a href="https://www.djangoproject.com/" rel="nofollow" target="_blank">Django</a> es un <i>framework</i> web de código abierto basado en <a href="https://www.python.org/" rel="nofollow" target="_blank">Python</a>, el cual nos simplifica significativamente la creación de sitios web dinámicos de buena calidad en un corto tiempo.Con solo instalar <i>Django</i> en nuestro equipo local podemos llevar adelante el desarrollo del sitio sin la necesidad de instalar un servidor web, esto es gracias a que <i>Django</i> incluye un servidor de desarrollo.</div>
<div>
<br /></div>
El problema surge a la hora de publicar nuestro sitio web desarrollado en <i>Django</i>, nos topamos con una infinidad de limitaciones por parte de los web <i>hosting</i>. A pesar de que en muchos casos promocionan su supuesta compatibilidad, es normal encontrar serias limitaciones relacionadas a determinadas bibliotecas de uso habitual en el <i>framework</i>.<br />
<div>
<br /></div>
<div>
En este post proponemos una manera de salir de este problema, contratando y administrando un <a href="http://es.wikipedia.org/wiki/Servidor_virtual" rel="nofollow" target="_blank">servidor virtualizado</a>(VPS),el cual no es un servidor físico real, sin embargo, a diferencia del alojamiento compartido, en este tipo de alojamiento los usuarios tienen control de administración total del servidor.<br />
<br />
Analizamos algunas de las alternativas que ofrece el mercado y optamos por utilizar el <a href="http://aws.amazon.com/es/ec2/details/" target="_blank">Amazon EC2</a>. Al momento de escribir este post, el servicio ofrece de manera gratuita por un año una virtualización la cual es denominada microinstancia "t2micro". Les recomiendo leer las condiciones de la alternativa gratuita en el siguiente link <a href="http://aws.amazon.com/es/free/">http://aws.amazon.com/es/free/</a>.</div>
<div>
<br /></div>
<div>
Una vez creada la cuenta en Amazon, nos dirigimos al panel de control <a href="https://console.aws.amazon.com/">https://console.aws.amazon.com</a>.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWEmQnc_bsgt4VVRTh6XU_Yr64l6g5abZBVfNG8ZDJ8lTlD06v6qMmmKEiwAL1jEi2GG7subJCgKY8tU2xM8Kf8qTJeh7nyxrMSpuQKk0EC2c-cU3iFiRaNOqEEAQe4IVaIK49BDEV48Uc/s1600/ec2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWEmQnc_bsgt4VVRTh6XU_Yr64l6g5abZBVfNG8ZDJ8lTlD06v6qMmmKEiwAL1jEi2GG7subJCgKY8tU2xM8Kf8qTJeh7nyxrMSpuQKk0EC2c-cU3iFiRaNOqEEAQe4IVaIK49BDEV48Uc/s1600/ec2.png" height="156" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
</div>
<div>
Elegimos la opción <b>EC2</b>, una vez allí contamos con una interfaz que nos permitirá realizar una infinidad de tareas con nuestras instancias, comenzaremos por crear una, para ello presionamos el botón con la leyenda <i>launch instance</i></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3h2fyYdJVyvdTSLeARHx1rPJnDpVFD-UjTJdZQ7kOelPGXvcyNFcKsDm66LyzUd4rPim-iSDpQEx0aW2u7Wp7NYmp3ujvF3RlsEdArMzVsNvqgxYWEIHShZNjPUrScow2PALxl6Mg46x/s1600/lauch.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3h2fyYdJVyvdTSLeARHx1rPJnDpVFD-UjTJdZQ7kOelPGXvcyNFcKsDm66LyzUd4rPim-iSDpQEx0aW2u7Wp7NYmp3ujvF3RlsEdArMzVsNvqgxYWEIHShZNjPUrScow2PALxl6Mg46x/s1600/lauch.png" height="223" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
En este momento se despliega una lista de sistemas operativos que podemos instalar en nuestro equipo. Recomendamos como primer experiencia elegir <i>Ubuntu</i>, cuenta con una comunidad muy grande y resultará sencillo administrarlo.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMAqwlhsogcSzSKMHOR3KmvqBNP9LFt0B3SO_eaw0NfZxLHHqok3U3y9nig_wAxXfqveOBfj3lnEztSTh9qOEa1syoLPDmqKhJmqASRKU4-HNPAh-sOTNnq8eZwdOYQe8XhBpW9ezlZv8l/s1600/ubuntu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMAqwlhsogcSzSKMHOR3KmvqBNP9LFt0B3SO_eaw0NfZxLHHqok3U3y9nig_wAxXfqveOBfj3lnEztSTh9qOEa1syoLPDmqKhJmqASRKU4-HNPAh-sOTNnq8eZwdOYQe8XhBpW9ezlZv8l/s1600/ubuntu.png" height="148" width="400" /></a></div>
<div>
<br /></div>
<div>
Haremos click en <b>Siguiente</b> hasta llegar a la página de <b>Tag Instancia</b>, en él cargaremos algún nombre al servidor, la idea de este nombre es poder identificarlo cuando tengamos más de uno.<br />
<br />
<b>NOTA:</b> Recordar que si tenemos corriendo más de uno a la vez, se estaría extralimitando lo contemplado como gratuito.</div>
<div>
<br /></div>
<div>
Daremos algunos "siguientes" dejando los valores predeterminados hasta que llegamos a la página <i>Configure Security group page</i> (Configuración de la seguridad del grupo). Se le puede asignar un nombre Ej. "reglas_seguridad". A este grupo le vamos a agregar una regla relacionada a la apertura del puerto <i>HTTP</i>, hacemos click en <b>add rule</b> y seleccionamos <b>HTTP</b> en el menú desplegable. Esto abre la aplicación en el puerto 80, que es donde <i>Django</i> responde a las solicitudes <i>HTTP</i>.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmBIu3-AN2SD61xc86EN7x6B1jWH3XnNc3MWqG4jA2_h6xwKKUxWQt8U3MwWOiJ0jEO3LgrW4uH0Zq99H3bmfdwCKOFJvgROmaQ3okhcILeKCEYUqmRl_eLIE14yCziZ5rLlopWtn213k/s1600/reglas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmBIu3-AN2SD61xc86EN7x6B1jWH3XnNc3MWqG4jA2_h6xwKKUxWQt8U3MwWOiJ0jEO3LgrW4uH0Zq99H3bmfdwCKOFJvgROmaQ3okhcILeKCEYUqmRl_eLIE14yCziZ5rLlopWtn213k/s1600/reglas.png" height="86" width="400" /></a></div>
<div>
<br /></div>
<div>
Sólo resta hacer click en el botón <b>Review and Launch</b> y crear un nuevo par de claves para la instancia. Para crearla solo debemos asignarle un nombre y al momento de oprimir el botón <b>Lauch Instance</b> se descargará un archivo, el cual deberemos conservar siempre para poder acceder a nuestro servidor de manera remota. Es importante aclarar que el procedimiento para recuperar el archivo de llave es muy tedioso.</div>
<div>
<br /></div>
<div>
Debemos de esperar algunos segundos a la espera de que nuestro servidor se encuentre corriendo, una vez que se indica que su estado es <i>running</i> podemos proceder a conectarnos vía <i><a href="http://es.wikipedia.org/wiki/Secure_Shell" rel="nofollow" target="_blank">ssh</a></i>. Antes de poder hacerlo, es importante modificar los permisos de acceso del archivo de la llave, en el caso de no hacerlo, fallará el proceso de conexión.</div>
<div>
<br /></div>
<div>
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">#chmod 400 llave.pem
</code></pre>
</div>
<div>
<br /></div>
<div>
Antes de poder conectarnos, debemos averiguar o bien nuestro <i><a href="http://es.wikipedia.org/wiki/Domain_Name_System" rel="nofollow" target="_blank">DNS</a></i> o nuestra dirección <i>IP</i>, para ello nos dirigimos al panel de instancias.<br />
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE-c7iTukiznY-C5vjKkyDzs5AsgjfbH8FE_UhPSyky2PVQg5SynbdwGNGO1ZdcMcYLAV8A8PAyi9XEyTS2BAUueYn-zEa7a1Ss6J5Q9BmCPH0TUbYZWW5YfepOmP31rOVRUiwsP66OAkk/s1600/ip.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE-c7iTukiznY-C5vjKkyDzs5AsgjfbH8FE_UhPSyky2PVQg5SynbdwGNGO1ZdcMcYLAV8A8PAyi9XEyTS2BAUueYn-zEa7a1Ss6J5Q9BmCPH0TUbYZWW5YfepOmP31rOVRUiwsP66OAkk/s1600/ip.png" height="128" width="640" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br /></div>
<div>
En nuestro caso utilizaremos para conectarnos, la dirección <i>IP</i> 54.69.16.26 y la llave denominada <b>llave.pem</b> </div>
<div>
<br /></div>
<div>
<div style="orphans: auto; text-align: start; text-indent: 0px; widows: auto;">
<pre style="background-color: #f0f0f0; border: 1px dashed rgb(204, 204, 204); height: auto; margin: 0px; overflow: auto; padding: 0px; text-align: left; width: 646.46875px;"><code style="-webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-transform: none; word-spacing: 0px; word-wrap: normal;"><span style="font-family: 'Times New Roman'; font-size: small; line-height: normal; white-space: normal;"># ssh -i llave.pem ubuntu@54.69.16.26</span><span style="font-size: 12px; line-height: 20px;"> </span></code></pre>
<pre style="background-color: #f0f0f0; border: 1px dashed rgb(204, 204, 204); height: auto; margin: 0px; overflow: auto; padding: 0px; text-align: left; width: 646.46875px;"><span style="background-color: transparent; font-size: 12px; line-height: 20px;">
</span></pre>
<pre style="background-color: #f0f0f0; border: 1px dashed rgb(204, 204, 204); height: auto; margin: 0px; overflow: auto; padding: 0px; text-align: left; width: 646.46875px;"><span style="background-color: transparent; font-size: 12px; line-height: 20px;">Welcome to Ubuntu 14.04 LTS (GNU/Linux 3.13.0-29-generic x86_64)
* Documentation: https://help.ubuntu.com/
System information as of Sat Sep 20 18:27:49 UTC 2014
System load: 0.0 Processes: 102
Usage of /: 16.2% of 7.74GB Users logged in: 0
Memory usage: 23% IP address for eth0: 172.31.47.166
Swap usage: 0%
Graph this data and manage this system at:
https://landscape.canonical.com/
Get cloud support with Ubuntu Advantage Cloud Guest:
http://www.ubuntu.com/business/services/cloud
81 packages can be updated.
37 updates are security updates.
Last login: Sat Sep 20 18:27:50 2014 from 181.46.239.195</span></pre>
</div>
</div>
<div>
Ya estamos conectados a nuestro servidor, sólo resta instalar algunos paquetes y podremos desplegar nuestro primer sitio <i>Django</i>. Antes que nada realizaremos una actualización de la información de los repositorios.</div>
<div>
<br /></div>
<div>
<div>
<div>
<pre style="background-color: #f0f0f0; border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.46875px;"><span style="background-color: transparent;"># sudo aptitude update</span></pre>
</div>
</div>
<div>
<br /></div>
<div>
Una vez actualizados, instalaremos un paquete fundamental a la hora de trabajar con <i>Python</i>, llamado <i>pip</i> ya que con él es muy simple instalar bibliotecas de este lenguaje.</div>
<div>
<div>
<br /></div>
<div>
<div>
<pre style="background-color: #f0f0f0; border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.46875px;"><span style="background-color: transparent;">#sudo aptitude install python-pip</span></pre>
</div>
</div>
<div>
<br /></div>
<div>
Probemos <i>pip</i><b> </b>instalando <i>Django</i> en su última versión, si queremos especificar una versión distinta deberemos pasar la misma como parámetro.</div>
<div>
<br /></div>
<div>
<div>
<pre style="background-color: #f0f0f0; border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.46875px;"><span style="background-color: transparent;">#sudo pip install django</span></pre>
</div>
</div>
</div>
<div>
<br /></div>
<div>
Ahora instalaremos <i>Apache</i> junto al módulo <i>WSGI </i>el cual nos permitirá ejecutar <i>Python</i> al recibir <i>requests HTTP</i>.</div>
<div>
<br /></div>
<div>
<div>
<pre style="background-color: #f0f0f0; border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.46875px;"><span style="background-color: transparent;">#sudo aptitude install apache2 libapache2-mod-wsgi</span></pre>
</div>
</div>
<div>
<br /></div>
<div>
También instalaremos <a href="http://www.mysql.com/" rel="nofollow" target="_blank">MySQL</a> como motor de base de datos, es importante conservar la contraseña que se carga en el proceso de instalación de <i>MySQL,</i> ya que es la del usuario administrador.</div>
<div>
<br /></div>
<div>
<div>
<pre style="background-color: #f0f0f0; border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.46875px;"><span style="background-color: transparent;">#sudo aptitude install mysql-server python-mysqldb</span></pre>
</div>
</div>
</div>
<div>
<br /></div>
<div>
A esta altura tenemos todo lo básico instalado, puede que en según proyecto surja la necesidad de instalar bibliotecas adicionales, por lo pronto sólo nos resta crear un sitio de ejemplo y configurar al <i>Apache</i> para que lo sirva en la web.</div>
<div>
<br /></div>
<div>
Crearemos en el home del usuario <i>Ubuntu</i> un directorio con el nombre del sitio "ejemplo.com" una vez creado, nos posicionaremos dentro de él y ejecutaremos el comando <i>startproject</i> de <i>Django</i>.</div>
<div>
<br /></div>
<div>
<pre style="background-color: #f0f0f0; border: 1px dashed rgb(204, 204, 204); height: auto; overflow: auto; padding: 0px; width: 646.46875px;"><span style="font-family: arial;"><span style="font-size: 12px; line-height: 20px;">#cd ~
#mkdir ejemplo.com
#cd ejemplo.com
#django-admin.py startproject ejemplo</span></span><span style="font-family: arial; font-size: 12px; line-height: 20px;">
</span></pre>
</div>
<div>
<br /></div>
<div>
Ahora debemos crear el archivo de configuración asociado a nuestro sitio de ejemplo. Utilizando algún editor de texto como nano o vim:</div>
<div>
<br /></div>
<div>
<div>
<pre style="background-color: #f0f0f0; border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.46875px;"><span style="background-color: transparent;">#sudo vim /etc/apache2/sites-enabled/ejemplo.com.conf</span></pre>
</div>
</div>
<div>
<br /></div>
<div>
Dejamos preparado el código que se deberá pegar en él a efectos de simplificar. En futuros posteos explicaremos algunos de los aspectos relevantes de esta configuración.</div>
<div>
<br /></div>
<pre style="background-color: #f0f0f0; border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.46875px;"><code style="word-wrap: normal;"><div>
WSGIScriptAlias / /home/ubuntu/ejemplo.com/ejemplo/ejemplo/wsgi.py</div>
<div>
WSGIPythonPath /home/ubuntu/ejemplo.com/ejemplo </div>
<div>
<Directory /home/ubuntu/ejemplo.com/ejemplo/ejemplo></div>
<div>
<Files wsgi.py></div>
<div>
Order deny,allow</div>
<div>
Require all granted</div>
<div>
</Files></div>
<div>
</Directory></div>
<div>
<Directory /home/ubuntu/ejemplo.com/ejemplo/static></div>
<div>
Require all granted</div>
<div>
</Directory></div>
<div>
<Directory /home/ubuntu/ejemplo.com/ejemplo/media></div>
<div>
Require all granted</div>
<div>
</Directory> </div>
</code></pre>
<div>
<br /></div>
<div>
No olvidar salvar el archivo. A continuación reiniciaremos el servicio <i>Apache</i> a efectos de que levante esta nueva configuración.</div>
<div>
<br /></div>
<div>
<div>
<pre style="background-color: #f0f0f0; border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.46875px;"><span style="background-color: transparent;">#sudo service apache2 restart</span></pre>
</div>
</div>
<div>
<br /></div>
<div>
Cuando el servicio vuelva a estar activo, al colocar en el navegador la dirección pública de la instancia, se verá la siguiente página.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0GYcCMZ8U6zx9ZWDf7BRUTapY4UX-RRhSS3mX4BmBOlx9D1UU7o94MFcNCpYUcV59XBEUpALBpdbtxyWoYWLJq-UI1sZ-7_gZ4z6BXVp_p4Spp6vldItlfslXuycK8_yB3ku50px-DAQf/s1600/django-it-worked.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0GYcCMZ8U6zx9ZWDf7BRUTapY4UX-RRhSS3mX4BmBOlx9D1UU7o94MFcNCpYUcV59XBEUpALBpdbtxyWoYWLJq-UI1sZ-7_gZ4z6BXVp_p4Spp6vldItlfslXuycK8_yB3ku50px-DAQf/s1600/django-it-worked.jpg" height="148" width="400" /></a></div>
<div>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8618809592479227049.post-51616405221460668782014-09-16T18:45:00.002-07:002014-09-16T18:45:59.556-07:00Servidor web HTTP con Python<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl3zxUL610-35W4DlFqz1KkK_FwwUM_mqe_1Qm2RbH4bn-TLYg3xWV1lcaEZSf7CjkVv2AECx99_uN9h_xLc-I8LC_n6FUKZlNCdmwm0yGnV77C_Gn5xLLnB2z8JbmmlqTe7YAaLoeQ2Cf/s1600/text-x-python.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl3zxUL610-35W4DlFqz1KkK_FwwUM_mqe_1Qm2RbH4bn-TLYg3xWV1lcaEZSf7CjkVv2AECx99_uN9h_xLc-I8LC_n6FUKZlNCdmwm0yGnV77C_Gn5xLLnB2z8JbmmlqTe7YAaLoeQ2Cf/s1600/text-x-python.png" height="200" width="200" /></a></div>
<br />
<br />
Dentro de las bibliotecas de python, existen dos servidores web que podemos utilizar, con los cuales podemos servir archivos o ejecutar scripts de python.<br />
<br />
La ventaja de usar estas bibliotecas es que <b>no necesitamos escribir ninguna línea de código</b> para establecer el servidor web y comenzar a servir archivos.<br />
<br />
<h3>
Servidor de archivos</h3>
Comenzaremos creando una carpeta donde el servidor web servirá los archivos:<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> mkdir pythonServer </code></pre>
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> cd pythonServer
</code></pre>
<br />
Luego creamos una página, por ejemplo <i>index.html</i><br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> nano index.html
</code></pre>
<br />
Colocamos dentro de la página algún código html<br />
<br />
<i><b><html></b></i><br />
<i><b> <body></b></i><br />
<i><b> <h1>Sitio html</h1></b></i><br />
<i><b> </body></b></i><br />
<i><b></html></b></i><br />
<br />
Ahora lanzamos el servidor web en el puerto <i>8001</i> ejecutando el siguiente script de python que ya viene incluído en las bibliotecas:<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> python -m SimpleHTTPServer 8001
</code></pre>
<br />
Si abrimos en un browser la url: <b>http://localhost:8001/index.html</b> veremos nuestra página web.<br />
<br />
<h3>
Servidor CGI (puede ejecutar scripts de python)</h3>
Crearemos una carpeta llamada <i>cgi-bin</i> en donde colocaremos las páginas web que en realidad son scripts de python (archivos .py)<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> mkdir cgi-bin
</code></pre>
<br />
Ahora creamos el archivo <i>index.py</i> en donde devolveremos un texto html generado con python:<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> nano cgi-bin/index.py
</code></pre>
<br />
Dentro del archivo index.py escribimos el siguiente código python:<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> #! /usr/bin/env python
print("Content-Type: text/html")
print("")
import cgi
arguments = cgi.FieldStorage() #argumentos por GET o POST
print("<h1>Python script</h1>")
</code></pre>
<br />
Para lanzar el servidor web, deberemos ejecutar ahora un servidor web diferente:<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> python -m CGIHTTPServer 8001
</code></pre>
<br />
Si ahora abrimos con nuestro browser la url: <b>http://localhost:8001/cgi-bin/index.py</b> se ejecutará nuestro script y veremos la página que devuelve.<br />
<br />
Si queremos obtener los argumentos que la página puede recibir por GET o POST utilizamos la variable <i>arguments</i> de la siguiente manera:<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> valor = arguments["nombreCampo"].value
</code></pre>
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8618809592479227049.post-69542455877342014442014-08-20T16:10:00.000-07:002014-08-20T16:10:36.326-07:00Sistema Web de Tickets con Python+Django<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRE75CGpOjtCDWGt0uVFXD62iz84x627IxxQ7IMQtNrChF9rrVQeBjpPrEXW2NHbG8oOMlNZPuAKw3U_prRKfs_DIMISC3jm1QdxciR8pkeypKdDwmgF8KVSou694qvTG5sHxDOUDrCn_/s1600/Django-tux.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRE75CGpOjtCDWGt0uVFXD62iz84x627IxxQ7IMQtNrChF9rrVQeBjpPrEXW2NHbG8oOMlNZPuAKw3U_prRKfs_DIMISC3jm1QdxciR8pkeypKdDwmgF8KVSou694qvTG5sHxDOUDrCn_/s1600/Django-tux.png" height="85" width="200" /></a></div>
Django-help-desk es una aplicación creada para <b>Django</b> que nos permite generar nuestro propio sistema de reclamos y soporte técnico de manera sencilla, escalable y fácilmente administrable.<br />
<br />
Dentro de las ventajas de este sistema se encuentran:<br />
<ul>
<li>Generación automática de reclamos vía e-mail.</li>
<li>Sistema de control y estadísticas de incidentes.</li>
<li>Escalamiento automático de reclamos, avisos y alertas.</li>
<li>Templates de respuestas automáticas hacia clientes.</li>
<li>Identificación única de reclamo y posibilidad de multi-usuario tanto desde el soporte como de cliente.</li>
<li>Posibilidad de generar base de conocimiento y FAQ sobre preguntas frecuentes de usuario de acceso público.</li>
</ul>
Este sistema es completamente web y fue construido utilizando lenguaje <a href="https://www.python.org/" target="_blank">Python</a> y el framework <a href="https://www.djangoproject.com/" target="_blank">Django</a>.<br />
A continuación mostraremos como poner en funcionamiento este sistema sobre una distribución Linux basada en <a href="https://www.debian.org/index.es.html" target="_blank">Debian</a>.<br />
<br />
<h3>
<b>Previo a la ejecución:</b></h3>
<i>pypi</i>, también conocido como "PIP" es un gestor de bibliotecas <i>python</i>. El uso de <i>pypi</i> nos ayudará a instalar rápidamente bibliotecas sin necesidad de ejecutar python para instalar o descargar los archivos fuentes y ejecutarlos.<br />
<br />
Para instalar pypi desde Debian/Ubuntu solo deberemos ejecutar el siguiente comando desde consola sudoer / root:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> apt-get install python-pip
</code></pre>
<br />
<b>NOTA:</b> Para instalar Pypi desde otros sistemas operativos, por favor consultar los siguientes links:<br />
<a href="http://pip.readthedocs.org/en/latest/installing.html">http://pip.readthedocs.org/en/latest/installing.html</a><br />
<a href="https://pypi.python.org/pypi/">https://pypi.python.org/pypi/</a><br />
<br />
Una vez instalado pip, se deberá verificar en una primera instancia que el sistema posea Django instalado con el siguiente comando desde consola:<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> pip install django
</code></pre>
<br />
Luego de chequear django, deberán instalar los siguientes paquetes para utilizar django-helpdesk de la misma manera:<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> pip install django-markdown-deux #Reemplaza tags por markdown
pip install django-bootstrap-form #Plantillas de estilo con Twitter boostrap
pip install django-helpdesk #Base del helpdesk
pip install mail-reply-parser #Parseo de emails
pip install South #Para migración de bases de datos
</code></pre>
Es recomendable contar con una base datos que no sea SQLite3 para correr este tipo de aplicaciones, en nuestro caso utilizamos <a href="http://www.mysql.com/" target="_blank">MySQL</a>, pero se puede utilizar la que se considere más conveniente.<br />
<br />
<div>
<b>NOTA:</b> En este post no tratará como configurar una base de datos en Django, en caso de que se desee, se puede consultar la siguiente referencia para la correcta configuración de la base de datos:<br />
<a href="https://docs.djangoproject.com/en/dev/ref/databases/">https://docs.djangoproject.com/en/dev/ref/databases/</a><br />
<br /></div>
<div>
<h3>
<b>Creando el helpdesk:</b></h3>
</div>
<div>
Se deberá crear un proyecto Django y ejecutarlo para verificar el correcto funcionamiento de la web y base. Puede realizarse desde consola o vía Eclipse.<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> django-admin startproject helpdesk
python manage.py syncdb
</code></pre>
siendo <i>helpdesk</i> el nombre del proyecto Django y nombre del sitio.<br />
<br />
<b>NOTA:</b> Más información sobre crear proyectos Django en: <a href="https://docs.djangoproject.com/en/dev/intro/tutorial01/">https://docs.djangoproject.com/en/dev/intro/tutorial01/</a><br />
<br />
Si no se generó ningún error y el sitio está corriendo, iniciaremos la configuración del helpdesk.</div>
<br />
<u>Configuración settings.py:</u><br />
<blockquote class="tr_bq">
<i>INSTALLED_APPS = (</i><br />
<i> 'django.contrib.auth',</i><br />
<i> 'django.contrib.contenttypes',</i><br />
<i> 'django.contrib.sessions',</i><br />
<i> 'django.contrib.sites', # Si agregamos esta app, deberemos además agregar un SITE_ID en nuestro archivo settings.py</i><br />
<i> 'django.contrib.admin', # Administración / mantenimiento</i><br />
<i> 'bootstrapform',</i><br />
<i> 'django.contrib.humanize', # Requerido para formato de tiempo</i><br />
<i> 'south', #Altamente recomendado para migrar base de datos de forma sencilla</i><br />
<i> 'markdown_deux', # Requerido para formato de "base de conocimiento" en el helpdesk</i><br />
<i> 'helpdesk', # Motor del helpdesk</i><br />
<i>)</i></blockquote>
<u>Configuración urls.py:</u><br />
<u><br /></u>
Agregaremos la siguiente línea:<br />
<blockquote class="tr_bq">
<i>url(r'', include('helpdesk.urls')),</i></blockquote>
<br />
Obteniendo como resultado lo siguiente:<br />
<blockquote class="tr_bq">
<i>urlpatterns = patterns('',</i><br />
<i> url(r'^admin/', include(admin.site.urls)),</i><br />
<i> url(r'', include('helpdesk.urls')),</i><br />
<i>)</i></blockquote>
<div>
Al ingresar a <i>http://dirección:puerto/</i> nos dirigirá al helpdesk. En caso de querer direccionar desde una url distinta solo deberemos incluir la dirección dentro de " r'' ", como ser: r'^helpdesk/' obteniendo así acceso al sistema desde http://dirección:puerto/helpdesk/.</div>
<br />
Luego de agregar las apps y la url al proyecto se deberá sincronizar la base de datos nuevamente.<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> python manage.py syncdb
python manage.py collectstatic
python manage.py migrate helpdesk
</code></pre>
<br />
En caso de no encontrarse errores en la ejecución del sync ni en la migración, se podrá correr el proyecto y empezar a disfrutar del helpdesk funcionando.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLwEqW840MB4vvKnVx5ru10EXwWi8cm07DICSXI7jXST6EoBqQnSXr2GxPbWHWlzGnQ2S-OMNpvOEEh3GkVD0lSDjwRZk2_gVaMccI3WR043dvZBrFyIoL20XrO0JXMDUdo1O19EPPTE0/s1600/img.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLwEqW840MB4vvKnVx5ru10EXwWi8cm07DICSXI7jXST6EoBqQnSXr2GxPbWHWlzGnQ2S-OMNpvOEEh3GkVD0lSDjwRZk2_gVaMccI3WR043dvZBrFyIoL20XrO0JXMDUdo1O19EPPTE0/s1600/img.png" height="356" width="640" /></a></div>
<br />
<br />
Para mas información, consultar los siguientes links correspondientes django-helpdesk.<br />
<a href="https://pypi.python.org/pypi/django-helpdesk">https://pypi.python.org/pypi/django-helpdesk</a><br />
<a href="https://github.com/rossp/django-helpdesk">https://github.com/rossp/django-helpdesk</a><br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/07570175527043039921noreply@blogger.com1tag:blogger.com,1999:blog-8618809592479227049.post-82991712064792139922014-08-18T15:22:00.000-07:002014-08-18T15:22:03.708-07:00Instalar Android ADT en Ubuntu 13/14 de 64bits<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZAJlIBAc06Vcfnp8Z0CfcRtSCPwvWjYfCmpGT6yJJ6c4BPWdD70BsNvHHNYTj-1sfTzLeNRKX2wQljQtd3z04wqMYqoMdX_hr0B3T3HljQXADhab5hRhmIf5SQJ_STVMf4I5uNh0vi5Ec/s1600/Android-ADT-Bundle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZAJlIBAc06Vcfnp8Z0CfcRtSCPwvWjYfCmpGT6yJJ6c4BPWdD70BsNvHHNYTj-1sfTzLeNRKX2wQljQtd3z04wqMYqoMdX_hr0B3T3HljQXADhab5hRhmIf5SQJ_STVMf4I5uNh0vi5Ec/s1600/Android-ADT-Bundle.png" height="168" width="200" /></a></div>
<br />
Explicaremos como instalar el entorno de desarrollo de <b>Android ADT</b> en Ubuntu de 64 bits, el mayor problema es que las herramientas de Android (SDK) son programas de 32 bits, los cuales no pueden ejecutarse por defecto en Ubuntu de 64. Antiguamente, se instalaba el paquete <b>ia32-lib</b> el cual ya no existe en las nuevas versiones de <b>Debian</b>/<b>Ubuntu.</b><br />
<br />
Primero debemos bajar el ADT de la pagina de Android Developers, click <a href="http://developer.android.com/sdk/index.html" target="_blank">aqui</a>. El archivo quedará en la carpeta <i>Downloads</i> de nuestro home. Como se sabe, el ADT es un <b>Eclipse</b>, por lo que no es necesario instalarlo, solo descomprimirlo y ejecutarlo.<br />
<br />
<b>NOTA: </b>Antes de ejecutarlo debemos tener instalado <b>Java JDK</b> de Oracle, leer este <a href="http://lslutnfra.blogspot.com.ar/2014/08/instalar-java-8-jdk-de-oracle-en-ubuntu.html" target="_blank">post</a> con las instrucciones.<br />
<br />
Al ejecutarlo, notaremos que aunque el programa abre, lanza un error respecto al <b>adb</b>. Este es uno de los programas de 32 bits que el ADT intenta ejecutar y no puede.<br />
<br />
<u>Solución:</u> Instalaremos una serie de paquetes que nos permitirá ejecutar programas de 32 bits en Ubuntu de 64.<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> # sudo aptitude install libc6-i386 lib32stdc++6 lib32gcc1 lib32ncurses5
</code></pre>
<br />
En el caso que <i>aptitude</i> indique un error de dependencias y nos brinde una solución, elegimos "no" a la primera solución propuesta y "si" a la segunda.<br />
<br />
Luego instalamos el siguiente paquete:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> # sudo aptitude install lib32z1
</code></pre>
<br />
Ahora el ADT deberá abrir sin dificultades.<br />
<br />Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-77283317747390438332014-08-16T08:27:00.000-07:002014-08-16T08:27:19.675-07:00Dibujar sobre Canvas en Android: El principio de los videojuegos<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7kWHyk4Bl6z9xIf1NoNh7yHiP1Xg-FVtR1CwcFE6-3PqU35KebsCQXXoIZCIw6YVSlaeBmTN6cJrniELQIKc-FXXCXkHaxpgCxzktD13Soxej7f0Fss1zkFXsaWp5tAT9oW5qiPu1U96_/s1600/Android-Games-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7kWHyk4Bl6z9xIf1NoNh7yHiP1Xg-FVtR1CwcFE6-3PqU35KebsCQXXoIZCIw6YVSlaeBmTN6cJrniELQIKc-FXXCXkHaxpgCxzktD13Soxej7f0Fss1zkFXsaWp5tAT9oW5qiPu1U96_/s1600/Android-Games-logo.png" height="200" width="199" /></a></div>
<span style="font-family: Verdana, sans-serif;">Cuando desarrollamos <b>videojuegos</b> escritos en <b>Java</b>, debemos olvidarnos de todos los FormWidgets que nos presenta la API de Android (TextViews, EditTexts, Buttons, etc.) y concentrarnos en cómo dibujar figuras e imágenes sobre la pantalla.</span><br />
<br />
<h3 style="margin-bottom: 0cm; page-break-before: always;">
<span style="font-family: Verdana, sans-serif; font-size: small;"><b>View
Personalizada</b></span></h3>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;">Para poder dibujar
sobre la pantalla, deberemos crear un tipo de dato que herede de
View. De esta manera, podremos poner nuestra View como contenido de la
Activity, en vez de un archivo xml de layout como se acostumbra al
desarrollar aplicaciones.</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;"><br />
</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;">Crearemos una
clase llamada <i>GameView</i> y escribiremos un constructor que reciba
el <i>Context</i> como argumento, ya que deberemos pasárselo al constructor
de la clase superior.</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: #7f0055;"><b>public</b></span><span style="color: black;">
</span><span style="color: #7f0055;"><b>class</b></span><span style="color: black;">
GameView </span><span style="color: #7f0055;"><b>extends</b></span><span style="color: black;">
View </span>
</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;">{</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"></span><span style="color: #7f0055;"><b> public</b></span><span style="color: black;">
GameView(Context context) {</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"></span><span style="color: #7f0055;"><b> super</b></span><span style="color: black;">(context);</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;">}</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;">Luego
reemplazaremos la típica línea <i>setContentView(R.layout.main)</i> en
nuestra Activity por lo siguiente:</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"> </span><span style="color: #7f0055;"><b>protected</b></span><span style="color: black;">
</span><span style="color: #7f0055;"><b>void</b></span><span style="color: black;">
onCreate(Bundle savedInstanceState) {</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"></span><span style="color: #7f0055;"><b> super</b></span><span style="color: black;">.onCreate(savedInstanceState);</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;">
</span>
</span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"> GameView gameView = </span><span style="color: #7f0055;"><b>new</b></span><span style="color: black;">
GameView(</span><span style="color: #7f0055;"><b>this</b></span><span style="color: black;">);</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="color: black; font-family: Courier New, Courier, monospace;"> setContentView(gameView);</span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="color: black; font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;">De esta forma la
Activity tendrá a nuestra View personalizada como contenido en pantalla.</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<h3 style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif; font-size: small;"><b>Dibujando
en nuestra View</b></span></h3>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;">Ahora que tenemos
nuestra clase GameView, podremos reescribir el método “onDraw” el
cual se ejecuta al re dibujarse la pantalla.</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"> </span><span style="color: #646464;">@Override</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"> </span><span style="color: #7f0055;"><b>protected</b></span><span style="color: black;">
</span><span style="color: #7f0055;"><b>void</b></span><span style="color: black;">
onDraw(Canvas canvas) {</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="color: black;"><span style="font-family: Courier New, Courier, monospace;"> }</span></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;">El método recibe
como argumento un objeto del tipo Canvas, este objeto es sobre el cual se dibuja, es decir, que nos proveerá métodos para dibujar
textos, imágenes, figuras geométricas, etc.</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<h3 style="margin-bottom: 0cm;">
<b><span style="font-family: Verdana, sans-serif; font-size: small;">Dibujando un círculo en pantalla</span></b></h3>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;">Para dibujar un
círculo, primero debemos crear un objeto del tipo <i>Paint</i>, en el cual
se define el estilo con el que se dibujará (color de línea, color de
fondo, ancho de línea, etc.) De modo que creamos un atributo <i>Paint</i> en
nuestra clase y creamos un objeto en el constructor:</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"> Paint
</span><span style="color: #0000c0;">paint</span><span style="color: black;">; </span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"> </span><span style="color: #7f0055;"><b>public</b></span><span style="color: black;">
GameView(Context context) {</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"></span><span style="color: #7f0055;"><b> super</b></span><span style="color: black;">(context);</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"></span><span style="color: #0000c0;"> paint</span><span style="color: black;">
= </span><span style="color: #7f0055;"><b>new</b></span><span style="color: black;">
Paint();</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"></span><span style="color: #0000c0;"> paint</span><span style="color: black;">.setAntiAlias(</span><span style="color: #7f0055;"><b>true</b></span><span style="color: black;">);</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"></span><span style="color: #0000c0;"> paint</span><span style="color: black;">.setColor(Color.</span><span style="color: #0000c0;"><i>RED</i></span><span style="color: black;">);</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;">Ahora en nuestro método onDraw podemos indicarle al Canvas que dibuje un círculo aplicando como estilo el objeto Paint:</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"> </span><span style="color: #646464;">@Override</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"> </span><span style="color: #7f0055;"><b>protected</b></span><span style="color: black;">
</span><span style="color: #7f0055;"><b>void</b></span><span style="color: black;">
onDraw(Canvas canvas) {</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"> canvas.drawCircle(50,
50, 10, </span><span style="color: #0000c0;">paint</span><span style="color: black;">);</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="color: black; font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<br />
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;">Los parámetros pasados al método drawCircle son x,y, el radio del circulo, y el objeto Paint respectivamente. Cabe destacar que las coordenadas y el
radio tienen como unidad el pixel.</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilGW0McRLts1nMAgQmMla1fs9cnRyASxI8eReRbtFQcdvIZkhjeW_jWFX-9zdjm0lczygsZ2idcp4UjDNlZj1L4t885wWt5F3QVaW62ySSBaNCovy5Aifz9SjXvWVmL7u0ZwSaeuO85qoe/s1600/demo1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilGW0McRLts1nMAgQmMla1fs9cnRyASxI8eReRbtFQcdvIZkhjeW_jWFX-9zdjm0lczygsZ2idcp4UjDNlZj1L4t885wWt5F3QVaW62ySSBaNCovy5Aifz9SjXvWVmL7u0ZwSaeuO85qoe/s1600/demo1.png" height="320" width="192" /></a></div>
<h3 style="margin-bottom: 0cm;">
<b><span style="font-family: Verdana, sans-serif; font-size: small;">Dibujando texto en pantalla con un
tipo de fuente personalizada</span></b></h3>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;">Para dibujar un
texto, debemos utilizar el método <i>drawText</i> del objeto <i>Canvas</i>:</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"> canvas.drawText(</span><span style="color: #2a00ff;">"Laboratorio
de"</span><span style="color: black;">,
60, 110, </span><span style="color: #0000c0;">paint</span><span style="color: black;">);</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: black;"> canvas.drawText(</span><span style="color: #2a00ff;">"Software
Libre"</span><span style="color: black;">,
50, 210, </span><span style="color: #0000c0;">paint</span><span style="color: black;">);</span></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;">El tipo de fuente
y el tamaño del texto, lo debemos setear en el objeto paint:</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: #0000c0;">paint</span><span style="color: black;">.setTypeface(Typeface.</span><span style="color: black;"><i>createFromAsset</i></span><span style="color: black;">(context.getAssets(),</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: #2a00ff;"> "Snowtop.ttf"</span><span style="color: black;">));</span></span></div>
<div align="LEFT" style="margin-bottom: 0cm;">
<span style="font-family: Courier New, Courier, monospace;"><span style="color: #0000c0;">paint</span><span style="color: black;">.setTextSize(48);</span></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
</div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;">El archivo de
fuente, debemos colocarlo en la carpeta <i>assets</i>:</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH-iJy_5ChLO7eC9kxoNbwk2QCYRySIAI2T9w0ArTNaN8qgMYw_Eds6ZTwnnn09AMPxLCpc5KwGZES_59b-xATsdH1VDGvh3x398_tOCejhW_HrP0c7PZOX_X-hJecuibf20mvjyo3cQ2z/s1600/demo2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH-iJy_5ChLO7eC9kxoNbwk2QCYRySIAI2T9w0ArTNaN8qgMYw_Eds6ZTwnnn09AMPxLCpc5KwGZES_59b-xATsdH1VDGvh3x398_tOCejhW_HrP0c7PZOX_X-hJecuibf20mvjyo3cQ2z/s1600/demo2.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidFpfL2lvVyyLqp01PZ_MioYiNatU2-EwfLjDk8zUw85KxXZ__CFkpSVcANzED2rHztqrDlpaVW-48HQm96mT7hJgyz6TYeyRz_BznvuGacDPl38jiJe-IjeLu0rH9G9pbm4akEUVjYjwG/s1600/demo3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidFpfL2lvVyyLqp01PZ_MioYiNatU2-EwfLjDk8zUw85KxXZ__CFkpSVcANzED2rHztqrDlpaVW-48HQm96mT7hJgyz6TYeyRz_BznvuGacDPl38jiJe-IjeLu0rH9G9pbm4akEUVjYjwG/s1600/demo3.png" height="251" width="320" /></a></div>
<br />
<div style="margin-bottom: 0cm;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-70535707868290809142014-08-14T14:33:00.000-07:002014-08-14T14:33:44.840-07:00Instalar XAMPP en Ubuntu 13/14 con inicio automático<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNgBP8aoD6rJTpvP6amkiSJ6YgHn1no9ouqeXDmdtS-RJM6K3h6XTlLSkidtBbF9PKQ8onhKJU2GwPEnH1074llhyphenhyphenqAZPdAtXEv0ppxtQczBjNuue40WHMHQefPak1UOSQCSsqg-xzcYKt/s1600/xampp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNgBP8aoD6rJTpvP6amkiSJ6YgHn1no9ouqeXDmdtS-RJM6K3h6XTlLSkidtBbF9PKQ8onhKJU2GwPEnH1074llhyphenhyphenqAZPdAtXEv0ppxtQczBjNuue40WHMHQefPak1UOSQCSsqg-xzcYKt/s1600/xampp.png" height="200" width="192" /></a></div>
Explicaremos como instalar <b>XAMPP</b> ( Apache, PHP y MySQL ) en <b>Ubuntu</b> 13 o 14 de 32 o 64 bits y configurarlo para que inicie automáticamente al iniciar el equipo.<br />
<br />
Primero descargamos XAMPP de la página oficial, click <a href="https://www.apachefriends.org/download.html" target="_blank">aquí</a>. Elegimos la versión para Linux de 32 o 64 bits según corresponda. En nuestro ejemplo bajamos la versión 1.8.3.<br />
<br />
Abrimos una terminal y accedemos al directorio <i>Downloads</i> donde quedó el archivo descargado, le damos permisos de ejecución y lo ejecutamos, se abrirá el instalador.<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> # cd Downloads
# sudo chmod +x xampp-linux-x64-1.8.3-4-installer.run
# sudo ./xampp-linux-x64-1.8.3-4-installer.run
</code></pre>
<br />
XAMPP se instalará en <i>/opt/lampp</i>. El directorio donde se sirven las páginas web será <i>/opt/lampp/htdocs</i><br />
<br />
Al terminar de instalar, si queremos acceder al panel de control de xampp, donde podemos activar y desactivar los servicios, debemos instalar previamente una biblioteca de python:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> # sudo aptitude install python-glade2
</code></pre>
<br />
Ahora podemos ejecutar el panel de XAMPP de la siguiente manera:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> # sudo /opt/lampp/share/xampp-control-panel/xampp-control-panel
</code></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitNYPXyEQO6H_Dxu9_nax_iLjII62W0E_9_-kSFSXduzyxUWEJPUnOLR9c-Vf9FgIR3Xud0hk_D21qH1ooOo5Y1uu3NHQi_b_B-OcSpjuluPP0LQZldz4qhQfTahMWrL6w0FotM06ts40A/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitNYPXyEQO6H_Dxu9_nax_iLjII62W0E_9_-kSFSXduzyxUWEJPUnOLR9c-Vf9FgIR3Xud0hk_D21qH1ooOo5Y1uu3NHQi_b_B-OcSpjuluPP0LQZldz4qhQfTahMWrL6w0FotM06ts40A/s1600/Untitled.png" height="196" width="200" /></a></div>
<br />
Al iniciar el sistema, los servicios estarán detenidos, para configurar el inicio automático, debemos hacer lo siguiente:<br />
<br />
Primero creamos un archivo llamado lampp<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> # nano lampp
</code></pre>
<br />
Dentro del mismo colocamos:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> #!/bin/bash
/opt/lampp/lampp start
</code></pre>
<br />
Cerramos el nano con ctrl+x y presionamos ENTER.<br />
<br />
Ahora instalamos el script como un servicio, de esta manera se ejecutará al inicio:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> # sudo mv lampp /etc/init.d/lampp
# sudo chmod +x /etc/init.d/lampp
# sudo update-rc.d lampp defaults
</code></pre>
<br />
<br />Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-2154436443448759582014-08-10T07:42:00.004-07:002014-08-12T19:05:51.069-07:00Instalar Java 8 JDK de Oracle en Ubuntu 13/14<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMUmcbapoA9i8NLkiJitxwUrcYXcnvilFMCCufJOxUsgZcfI2gwFvjbb293B5XTSpqOGbVXshMyjhbe7ioIlCnyBgctb7iubb0FEkAYu-EUabvZaCFej2fHDzaN2ZMYpxJ4MieJGaMyYfC/s1600/Java8-Logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMUmcbapoA9i8NLkiJitxwUrcYXcnvilFMCCufJOxUsgZcfI2gwFvjbb293B5XTSpqOGbVXshMyjhbe7ioIlCnyBgctb7iubb0FEkAYu-EUabvZaCFej2fHDzaN2ZMYpxJ4MieJGaMyYfC/s1600/Java8-Logo.jpg" height="200" width="197" /></a></div>
<br />
Explicaremos como instalar <b>Java 8 JDK</b> de Oracle en <b>Ubuntu</b> 13/14 sin necesidad de agregar un repositorio de origen desconocido, sino descargando el paquete original de la página de Oracle.<br />
<br />
Primero debemos descargar JDK de la página de Oracle <a href="http://www.oracle.com/technetwork/es/java/javase/downloads/index.html" target="_blank">aquí</a>. Al hacer click en <i>Download</i> veremos la pantalla de descargas, donde deberemos aceptar la licencia y descargar el archivo <i>tar.gz</i> de 32 o 64 bits según corresponda.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXThCZiPQp_NaCtfVgoJyIYzb7JHJ9bbkSYex7fY_3DwNWyDtyvcEK-Og0zMpGP8wNpv1RWKAvMWudgdHYlXOOdBxX2YYTLnY4iJRBEooHhHl5Ns1LK54xapYd1Mhxiv-2Er6d7LOJLS8l/s1600/jdk.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXThCZiPQp_NaCtfVgoJyIYzb7JHJ9bbkSYex7fY_3DwNWyDtyvcEK-Og0zMpGP8wNpv1RWKAvMWudgdHYlXOOdBxX2YYTLnY4iJRBEooHhHl5Ns1LK54xapYd1Mhxiv-2Er6d7LOJLS8l/s1600/jdk.png" height="257" width="400" /></a></div>
<br />
<br />
En nuestro ejemplo bajamos <i>jdk-8u11-linux-x64.tar.gz</i>. El archivo quedará en la carpeta <i>Downloads</i> de nuestro home.<br />
<br />
Ahora abrimos una terminal, nos paramos en el directorio de descargas, descomprimimos el archivo y lo copiamos en <i>/usr/lib/jvm/</i> :<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> # cd Downloads
# sudo tar -xvf jdk-8u11-linux-x64.tar.gz
# sudo mkdir -p /usr/lib/jvm/jdk1.8.11
# sudo mv jdk1.8.0_11/* /usr/lib/jvm/jdk1.8.11/
</code></pre>
<br />
Ahora debemos ejecutar un comando para que los ejecutables de java existan desde la terminal:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> # sudo update-alternatives --install "/usr/bin/java" "java" "/usr/lib/jvm/jdk1.8.11/bin/java" 1
# sudo update-alternatives --install "/usr/bin/javac" "javac" "/usr/lib/jvm/jdk1.8.11/bin/javac" 1
# sudo update-alternatives --install "/usr/bin/javaws" "javaws" "/usr/lib/jvm/jdk1.8.11/bin/javaws" 1
# sudo update-alternatives --install "/usr/bin/javah" "javah" "/usr/lib/jvm/jdk1.8.11/bin/javah" 1
</code></pre>
<br />
Para probar que java se encuentre instalado correctamente, ejecutamos <i>java -version</i>:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> # java -version
java version "1.8.0_11"
Java(TM) SE Runtime Environment (build 1.8.0_11-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.11-b03, mixed mode)
</code></pre>
<br />Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-52389413774495777932014-08-01T15:15:00.001-07:002014-08-01T15:15:14.403-07:00Control de versiones con GIT y Eclipse<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhhiZFzAoKW5cN8HI-Ex_wgKTsYwrBvjAjsQ_I-WqPalUPTA8OyH-JoDVdIxvPmjpBnqjsn4FBe_EiMEU8lbxx6Og7udnX0UVHwNKjbEE2lPZjn9KTR-lTMhi6ZdDkEkUI2RjL13Zpm5qq/s1600/Git-Logo-2Color.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhhiZFzAoKW5cN8HI-Ex_wgKTsYwrBvjAjsQ_I-WqPalUPTA8OyH-JoDVdIxvPmjpBnqjsn4FBe_EiMEU8lbxx6Og7udnX0UVHwNKjbEE2lPZjn9KTR-lTMhi6ZdDkEkUI2RjL13Zpm5qq/s1600/Git-Logo-2Color.png" height="83" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 class="separator" style="clear: both; text-align: left;">
Qué es GIT</h3>
<div class="separator" style="clear: both; text-align: left;">
GIT es un sistema de control de versiones que facilita que muchas personas trabajen sobre un mismo proyecto. Para que esto sea posible, se introduce el concepto de <b>branch</b>. Generar un branch sobre un proyecto nos permite copiar su contenido y modificarlo y/o agregar cierta funcionalidad. En forma simultánea, otra persona pudo haber generado otro branch y haber agregado otra funcionalidad. De este modo tenemos un proyecto base y muchos branches que agregan diferentes funcionalidades. Para generar una nueva versión del proyecto con todas las funcionalidades de cada uno de los branches aplicada, se realiza el proceso de <b>merge</b>. Mediante este proceso se van "mezclando" uno a uno los branches, GIT nos indicará las porciones de código que cambiaron y una persona deberá decidir cómo hacer la mezcla para que la nueva versión del proyecto funcione correctamente.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 class="separator" style="clear: both; text-align: left;">
Qué necesitamos para utilizar GIT</h3>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
Para usar el sistema GIT, necesitamos instalar un servidor git, o utilizar uno online. El sevidor GIT online más popular es <a href="https://github.com/" rel="nofollow" target="_blank">GIT-HUB</a> el cual es completamente gratuito si dejamos públicos nuestros proyectos. En este servidor estará nuestro proyecto y todos los branches que realicemos. Es importante destacar que cada programador trabajará en forma local, y cuando lo decida, copiará su trabajo al servidor. Copiar el branch sobre el que se trabaja al servidor se conoce como <b>push</b>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 class="separator" style="clear: both; text-align: left;">
Creando un repositorio en GIT-HUB</h3>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
Después de registrarnos, presionamos el botón "add repository" le ponemos un nombre, una descripción y lo creamos. En este ejemplo creamos "proyectoPrueba1"</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQAXkYKk_-H8xuNu0AZfHEVb5u4AdaYiJ7EENglGEPyqRcrFbYdr1TtwizwW_Fvau68oflV9s2ABQpNh33P-NjyDgj1OQYEbTHcrZatZ4p5h9WcBRksHmj6RxsudxVJ2iWai7l0-AzpL-g/s1600/step1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQAXkYKk_-H8xuNu0AZfHEVb5u4AdaYiJ7EENglGEPyqRcrFbYdr1TtwizwW_Fvau68oflV9s2ABQpNh33P-NjyDgj1OQYEbTHcrZatZ4p5h9WcBRksHmj6RxsudxVJ2iWai7l0-AzpL-g/s1600/step1.png" height="379" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 class="separator" style="clear: both; text-align: left;">
Configurando Eclipse para trabajar con GIT</h3>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
A continuación, mostraremos cómo configurar eclipse para trabajar con GIT, para ello hay que instalar un plug-in de Eclipse, esto no es especifico de ningún lenguaje en particular. En este post utilizaremos Eclipse y un proyecto C, pero es válido para cualquier tipo de proyecto sobre Eclipse (Java,Python, etc.)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Para instalar el plug-in en el Eclipse, vamos a <i>Help->Install new Software</i> y colocamos la URL: <b>http://download.eclipse.org/egit/updates</b> elegimos "Eclipse Git Team provider" y seguimos los pasos para instalar el plug-in.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Creamos un proyecto C con Eclipse como el que se muestra en la figura:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_oK4d0KE4DYTK57T-Li80XLoMR0x2L_4w4mEEVWNq-fxQtS1tWzJyLhxMWLtpBzS20QydcQ8eITxVnTBc3ikDKPCPuRHjUG8tP_0rLAleGnVc6ZCEOt-jfIKkGO90W-7QPjcSzSLxm7U/s1600/proyectoc.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_oK4d0KE4DYTK57T-Li80XLoMR0x2L_4w4mEEVWNq-fxQtS1tWzJyLhxMWLtpBzS20QydcQ8eITxVnTBc3ikDKPCPuRHjUG8tP_0rLAleGnVc6ZCEOt-jfIKkGO90W-7QPjcSzSLxm7U/s1600/proyectoc.png" height="200" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Luego en la lengüeta “git repositories” (si no la vemos, podemos agregarla en: <i>Window->show view-> other-> git-> git repositories</i>) del Eclipse y hacemos click en “clone a git repository”: </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir45jz0IbZXeHANo9CfB2PKkrM2SjoMU1eLLi98bFskVrD0XFovydUib3wOeuiGs1Y5nuezUA8Rlpe61aOdhxZVQomNh2X3zaqJUCeqlhkKY38cpXQnJq6YINdYoSQ1rtq8V27ixzIyEIq/s1600/step2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir45jz0IbZXeHANo9CfB2PKkrM2SjoMU1eLLi98bFskVrD0XFovydUib3wOeuiGs1Y5nuezUA8Rlpe61aOdhxZVQomNh2X3zaqJUCeqlhkKY38cpXQnJq6YINdYoSQ1rtq8V27ixzIyEIq/s1600/step2.png" height="320" width="318" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Para cargar los datos de conexión contra github, tomaremos los datos proporcionados al crear el repositorio, elegimos como protocolo "https" y cargamos el nombre del host "github.com" y el path a nuestro repositorio, también ponemos nuestro usuario y clave de github:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyyJ_XNYkRlLpbc8NELzUU8lErPKbr_Rhdlsk0SIyjw-kr7Xmdd04zrunvX2J9z0v42VQkkLv6vj5cXHr4Qn4S3RvF8H7hs-GX8AzVEGEL70lGh3NfcL_hWQbZN1t7_JS5Q5ye3OWJgazC/s1600/step7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyyJ_XNYkRlLpbc8NELzUU8lErPKbr_Rhdlsk0SIyjw-kr7Xmdd04zrunvX2J9z0v42VQkkLv6vj5cXHr4Qn4S3RvF8H7hs-GX8AzVEGEL70lGh3NfcL_hWQbZN1t7_JS5Q5ye3OWJgazC/s1600/step7.png" height="355" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
Al presionar next nos dirá que el repositorio esta vacío. Al presionar next nuevamente, nos permitirá elegir el path donde se guardará la información requerida por el control de versiones para nuestro proyecto, por defecto, creara una carpeta "git" en nuestro home. Presionamos finish para terminar.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Ahora que estamos trabajando con el repositorio, debemos agregar el proyecto al mismo, para ello, hacemos click derecho sobre el proyecto<i>->Team->share project</i>. Luego seleccionamos "GIT" como tipo de repositorio y presionamos next. En la ventana que nos aparece, elegimos nuestro repositorio del combo "Repository":</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh42h9zGzXjxuU7Gw1hyphenhyphenHFqeGkqpChqjzPadYmrjqBL4JVUm5JGWybHZnHz0f9hwBcK7yYJYyKAoSM7R4pqLa78Mb0uqhrrwZUQOp3fVlLU1jncnotkoqTn-rstZKvY-TJi9lhTOEjWxwnd/s1600/step4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh42h9zGzXjxuU7Gw1hyphenhyphenHFqeGkqpChqjzPadYmrjqBL4JVUm5JGWybHZnHz0f9hwBcK7yYJYyKAoSM7R4pqLa78Mb0uqhrrwZUQOp3fVlLU1jncnotkoqTn-rstZKvY-TJi9lhTOEjWxwnd/s1600/step4.png" height="256" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Finalizamos presionando "finish".</div>
<h3 class="separator" style="clear: both; text-align: left;">
</h3>
<h3 class="separator" style="clear: both; text-align: left;">
</h3>
<h3 class="separator" style="clear: both; text-align: left;">
Branch Master y primer Commit</h3>
<div class="separator" style="clear: both; text-align: left;">
Anteriormente mencionamos que un branch era una copia del proyecto sobre el cual trabajamos para aplicarle cambios y luego lo podíamos "mezclar" junto con otros branches para generar una nueva versión del proyecto. Como todavía no tenemos el proyecto base en nuestro repositorio, debemos crearlo, y esta "base" no es más que otro branch, el primero, también llamado "branch Master".</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Para copiar el proyecto al server y generar el primer branch, debemos realizar previamente un <b>commit</b>. Un commit es una especie de punto de restauración de cambios que realizamos sobre el proyecto. Cuando nosotros estamos trabajando sobre un branch y terminamos una modificación, podemos ejecutar un commit para que el control de versiones genere un punto de restauración, al cual podremos volver ante algún error futuro. Los commits se realizan en forma local. Para copiar el branch modificado al servidor, debemos ejecutar un <b>push</b>. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Ambas acciones son las que realizaremos a continuación para copiar y generar nuestro primer branch ( que es el proyecto base ) en nuestro server github.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Hacemos click derecho sobre el proyecto<i>->Team->Commit</i>, debemos escribir un mensaje que describa qué cambios se aplicaron, y seleccionar los archivos del proyecto.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRTBUuBtYlLBAnGoNlQTXKclxSbxEd-Muw11-AfFXczxTV2rnghgpJwNBvJPzeViFy9rUIu4k6JemAWsrnMKXKsIreeyMgDnE7OblZKeo8_sHon3kEjZDcMHVokQA2fGUdztztlQvxSHE5/s1600/step5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRTBUuBtYlLBAnGoNlQTXKclxSbxEd-Muw11-AfFXczxTV2rnghgpJwNBvJPzeViFy9rUIu4k6JemAWsrnMKXKsIreeyMgDnE7OblZKeo8_sHon3kEjZDcMHVokQA2fGUdztztlQvxSHE5/s1600/step5.png" height="400" width="386" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Luego presionamos "Commit"</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Notaremos que a la derecha de nuestro proyecto, aparecerá la palabra "master" y si navegamos la ventana de git, dentro del proyecto, en <i>branches->local</i> nos aparece el branch "master".</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYrzkqEQaY2WGzuGocLLywObvvoRKGIRy2-E8fO-uSOXqJzHX8ibwVJwxeSc2d0v1gAaWl75yepzlNClK3jMsy3122xMeDdU8dG6wN54W3xVstlZvqKtKDCMFVxY3qMMt_iayr_c2iWLL/s1600/step6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYrzkqEQaY2WGzuGocLLywObvvoRKGIRy2-E8fO-uSOXqJzHX8ibwVJwxeSc2d0v1gAaWl75yepzlNClK3jMsy3122xMeDdU8dG6wN54W3xVstlZvqKtKDCMFVxY3qMMt_iayr_c2iWLL/s1600/step6.png" height="400" width="278" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
De este modo creamos el primer branch del repositorio, pero todavía no se encuentra en nuestro server de github, solo en forma local, para subirlo, debemos hacer un push, para ello, click derecho sobre el proyecto<i>->Team->Push branch</i>. Nos aparecerá una ventana en donde podemos elegir el repositorio remoto y cambiar el nombre del branch, presionamos next, finish y OK, y el proyecto comenzará a copiarse al servidor de github. Nuestra primera versión del proyecto ya se encuentra online.</div>
<h3 class="separator" style="clear: both; text-align: left;">
</h3>
<h3 class="separator" style="clear: both; text-align: left;">
</h3>
<h3 class="separator" style="clear: both; text-align: left;">
Agregando un segundo programador al equipo de desarrollo.</h3>
<div class="separator" style="clear: both; text-align: left;">
Lo explicado a continuación sera válido para todos los programadores que trabajen en el proyecto, el programador que generó el proyecto base (branch master) ya tendrá su proyecto en forma local, pero un segundo o tercer programador que quiera trabajar, no tiene nada en forma local, de modo que lo primero que se debe hacer es copiar el proyecto que se encuentra en el server git en forma local a su PC, este procedimiento se conoce como <b>clone</b>. Clonar un branch (en este caso el branch master). </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Partiendo de un workspace de Eclipse vacío, debemos hacer lo mismo que hizo el primer programador para conectarse al repositorio: en la lengüeta “git repositories” del Eclipse hacemos
click en “clone a git repository", cargamos los mismos datos de github que antes, pero ahora nos aparecerá una ventana (en la que antes nos decía que el repositorio estaba vacío) en donde aparecerá el branch "master". Seleccionamos ese branch, presionamos next y luego finish.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Ahora que el branch master se copió en forma local, debemos importar el proyecto para poder verlo en nuestro Project Explorer, para ello en la lengüeta “git repositories” navegamos “working directory” y hacemos click derecho sobre el proyecto y seleccionamos “import project”.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUsnc8PKSlHXC8nrtkMsVSPYHjwhzmNPym9Ovv4NNB9YrnZOp-Qo-R74O35AxeZ_ZE2g-QmtJpJDugDGS6iar7qLZyPz32p9kaDlpBVS6SJKXeZoPLXhWYHnL48YrQ4N-_LH7bzMJ1wXl/s1600/step8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUsnc8PKSlHXC8nrtkMsVSPYHjwhzmNPym9Ovv4NNB9YrnZOp-Qo-R74O35AxeZ_ZE2g-QmtJpJDugDGS6iar7qLZyPz32p9kaDlpBVS6SJKXeZoPLXhWYHnL48YrQ4N-_LH7bzMJ1wXl/s1600/step8.png" height="243" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
El proyecto aparecerá en nuestro área de trabajo y ya nos encontramos en las mismas condiciones que el primer programador que generó el branch master.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>NOTA:</b> Si un programador se suma al proyecto cuando ya existe una versión más avanzada del mismo, solo debe seleccionar el branch que corresponde a esa versión en vez del primero (master) de esta forma "clona" en forma local esa versión en particular.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<h3 class="separator" style="clear: both; text-align: left;">
Trabajando con branches </h3>
<div class="separator" style="clear: both; text-align: left;">
Ahora que tenemos dos programadores en el equipo trabajando sobre el mismo proyecto, planteamos el siguiente escenario: cada programador debe agregar una funcionalidad diferente al proyecto, cada uno trabajará en forma local generando un branch en particular, y al terminar ambos, generaremos la versión 2.0 del proyecto.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Tanto el programador 1 como el 2, debe generar un branch a partir del branch master, cada branch tendrá un nombre diferente, por ejemplo el programador 1 generará el "branch1" y el programador 2 generará el "branch2".</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Supongamos que somos el programador 1, de modo que hacemos click derecho sobre el proyecto<i>->Team->switch to->new branch</i>. Nos aparecerá una ventana donde nos pregunta el source (partiendo de qué branch queremos generar uno nuevo) en este caso dejamos master porque es el único existente, y luego debemos ingresar el nombre de nuestro nuevo branch "branch1": </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12mZciNERYuXs4tf32AsgW9Of0nnSOwRfMHS_8ba1Xn8UoYxGH5GBxNsBc3rWH_B1eMSgCkeu5DA5u1nGBe2PUSx93h6MA2V-qGkuqp5D_rRLP1szvf5g0qeT2kJBGWUc2y4vVULjoFw1/s1600/step9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12mZciNERYuXs4tf32AsgW9Of0nnSOwRfMHS_8ba1Xn8UoYxGH5GBxNsBc3rWH_B1eMSgCkeu5DA5u1nGBe2PUSx93h6MA2V-qGkuqp5D_rRLP1szvf5g0qeT2kJBGWUc2y4vVULjoFw1/s1600/step9.png" height="296" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Como dejamos tildado "Checkout new branch" automáticamente estaremos parados sobre el nuevo branch, en git, hacer un <b>checkout</b> significa cambiarse de branch y también puede realizarse manualmente en cualquier momento haciendo click derecho sobre el branch al que queremos pasarnos (en nuestra lista de branches locales) y seleccionando "checkout".</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIP2iJ-fL6t7l-VFfadvvcTw3tg9ZVs33bb5VohDyEDLeMtBzfv9nAfENdWvp_gbolM6jTLFXdxoujlamD4FRwRMZBMACh-JM70YqBg0E1Id86KJ5h4SXMVaa-B06-NTZhyphenhyphen38GWgeM6wN/s1600/step10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIP2iJ-fL6t7l-VFfadvvcTw3tg9ZVs33bb5VohDyEDLeMtBzfv9nAfENdWvp_gbolM6jTLFXdxoujlamD4FRwRMZBMACh-JM70YqBg0E1Id86KJ5h4SXMVaa-B06-NTZhyphenhyphen38GWgeM6wN/s1600/step10.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Si nos fijamos a la derecha del nombre del proyecto, ahora ya no dice "master" sino "branch1". Ya podemos hacer modificaciones sobre el proyecto y realizar commits cuando se crean convenientes hasta terminar la funcionalidad del branch. Lo mismo deberá hacer el programador 2.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>NOTA:</b> No necesariamente cada programador debe trabajar sobre un solo branch, de echo es conveniente separar los branches por funcionalidad mas allá de quién es el que los programa, de este modo podemos tener 2 o 3 programadores trabajando sobre 10 branches diferentes.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Supongamos que realizamos una modificación en el archivo <i>PruebaGit.c</i> y agregamos un mensaje más en el código:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBSJ1mVew5cH6Xo7Gc6zBUWdBGYiLosF3AoGBF7uXILi9u6oso0p-i8jwjHJ7tlmwgCvWitgKkDI0xAlP4m3LUc5zdIsKYG6EDSEI1lTOvC4JX9gkzBTRmy-ZkAiP7-nd__QUsgTVAwdJQ/s1600/step11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBSJ1mVew5cH6Xo7Gc6zBUWdBGYiLosF3AoGBF7uXILi9u6oso0p-i8jwjHJ7tlmwgCvWitgKkDI0xAlP4m3LUc5zdIsKYG6EDSEI1lTOvC4JX9gkzBTRmy-ZkAiP7-nd__QUsgTVAwdJQ/s1600/step11.png" height="251" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Luego hacemos un commit, al igual que se explicó anteriormente, click derecho sobre el proyecto<i>->Team->Commit</i>. Colocamos un mensaje y presionamos "Commit". </div>
<div class="separator" style="clear: both; text-align: left;">
Hasta aquí el cambio fue aplicado en forma local, para copiar los cambios de este branch al server git, debemos hacer un <b>push</b>. Click derecho sobre el proyecto<i>->Team->push branch</i>. Luego presionamos next,finish y OK.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 class="separator" style="clear: both; text-align: left;">
Generando la versión 2.0 : Merge</h3>
<div class="separator" style="clear: both; text-align: left;">
Supongamos que tenemos 3 branches generados por diferentes programadores y que ya están en el server git, no es importante quién los genero, pero sabemos que están terminados, cada uno agrega una línea en nuestro archivo <i>PruebaGit.c</i> imprimiendo un mensaje diferente por pantalla.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Ahora estamos en condiciones de generar la versión 2.0 de nuestro proyecto, para ello uno de los programadores deberá realizar el <b>merge</b> del branch master con los branches <i>branch1 branch2</i> y <i>branch3</i>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Supongamos que somos el programador que creó el branch1, de modo que solo conocemos el branch "master" y el branch "branch1", si queremos obtener los otros branches que se generaron y que están en el server, debemos ejecutar un <b>pull</b>. Mediante pull obtendremos la lista de los branches que están en el servidor. Click derecho sobre el proyecto<i>->Team->pull</i>. Nos aparecerán los otros dos branches que estaban en el servidor.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWVkq4AA3dLeM_MegdNeMikcS4MC6451mXFJ4C0-eUuYPjP4vGzuW5qOF-pE_J_LnGxaDCXDZ_YpQ__nwSic6DCAonkuWY2k6oK26Cruhsu1nAH7DSAKPPnX021H2XrK43PvTnj25gdEIn/s1600/step12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWVkq4AA3dLeM_MegdNeMikcS4MC6451mXFJ4C0-eUuYPjP4vGzuW5qOF-pE_J_LnGxaDCXDZ_YpQ__nwSic6DCAonkuWY2k6oK26Cruhsu1nAH7DSAKPPnX021H2XrK43PvTnj25gdEIn/s1600/step12.png" height="271" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Ahora en nuestra lista de "Remote tracking" aparecerán todos los branches que están en el servidor. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPJyRba1oAQukDM51PARK-haTUm601-gzjRqYbEkn4LN_LbAVZsUGFQ5RXE5-8UtUtkyUnmmF17GM5mLYkKv0MMUgvc5_g2hjRn1UOWuXDID7lqa0BDKEotne2jJ0eFXRFZ-Rt0t0kEO2d/s1600/step13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPJyRba1oAQukDM51PARK-haTUm601-gzjRqYbEkn4LN_LbAVZsUGFQ5RXE5-8UtUtkyUnmmF17GM5mLYkKv0MMUgvc5_g2hjRn1UOWuXDID7lqa0BDKEotne2jJ0eFXRFZ-Rt0t0kEO2d/s1600/step13.png" height="311" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Y en la lista de "Local", solo los que tenemos en forma local, el branch "master" y el branch "branch1". No es necesario tener local los otros branches para poder hacer el merge.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Para hacer el merge, primero debemos crear un nuevo branch que llamaremos "master2.0" y lo haremos tomando como base "branch1" (para no tener que hacer luego el merge entre master y branch1). Para esto hacemos click derecho sobre el proyecto<i>->Team->swicth to->new branch</i>. Ponemos como source el "branch1" y como nombre "master2.0". De esta forma generamos en forma local al branch "master2.0" que tiene el mismo contenido que "branch1".</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Ahora haremos merge con el branch2, para ello hacemos click derecho sobre el branch local "master2.0" y seleccionamos merge:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhuxn5V0SOm1mLmQUEmK1DckEYJI1pk3Gc7wVdHvP-UZboQjxKC87vqTbiTsR62MVINccgmkCno_Yl1MOe-p81-gBzis5OXiMG2x2VhI-WPu-GsTMbss5EqT_texiiO1BAuCtYsTyugbW/s1600/step14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhuxn5V0SOm1mLmQUEmK1DckEYJI1pk3Gc7wVdHvP-UZboQjxKC87vqTbiTsR62MVINccgmkCno_Yl1MOe-p81-gBzis5OXiMG2x2VhI-WPu-GsTMbss5EqT_texiiO1BAuCtYsTyugbW/s1600/step14.png" height="227" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ3micZ8PG7oZyEecc11P00PLNaCMKIuKcl3aRgvhdpmgJRuZdwvDINXNgiZYr4Tfvsxl24lwpp08sCYDuHFYPzdn_jlW4kuKct3C4zEAJSC2SJLpQqDkFWxKu62Wn7puj4kCN0N0Kqx88/s1600/step13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
En la ventana que nos aparece, deberemos elegir contra qué branch queremos hacer la mezcla, elegimos "branch2"</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezmA0n8fddafxIrRhBta6PkeJKLwM7CJXFinrcCx0jx_TJ8Tx7an2JTLvZQz4f0InT7S4inJEK1KZQ7StcU7dOP-UjSlwwXcbVKG2tIe0mBtngfA_JV9DZEDpeJHnajefdkHGa8RWoqU6/s1600/step15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezmA0n8fddafxIrRhBta6PkeJKLwM7CJXFinrcCx0jx_TJ8Tx7an2JTLvZQz4f0InT7S4inJEK1KZQ7StcU7dOP-UjSlwwXcbVKG2tIe0mBtngfA_JV9DZEDpeJHnajefdkHGa8RWoqU6/s1600/step15.png" height="267" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Presionamos "Merge"y luego OK. Nos aparecerán en rojo los archivos que tienen conflicto, en este caso, <i>PruebGit.c</i>. Si lo abrimos podremos observar que debemos elegir manualmente las líneas de código que deben quedar en esta nueva versión, ya que ambos branches modificaron el mismo archivo:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwbUiYwC1TBpY2JZmlShwEHWwP3oO-wyJrbeaMQF8KPS2JaD925MrZhMstk3r3GMjRQ9oD-0e3-ZD_Hhfo0dvymsbIebG1bBg9rMTq6L-EQykxa73PkzfhSF_dd3h3pz5C007Uc3wsC9vk/s1600/step16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwbUiYwC1TBpY2JZmlShwEHWwP3oO-wyJrbeaMQF8KPS2JaD925MrZhMstk3r3GMjRQ9oD-0e3-ZD_Hhfo0dvymsbIebG1bBg9rMTq6L-EQykxa73PkzfhSF_dd3h3pz5C007Uc3wsC9vk/s1600/step16.png" height="256" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Podemos notar que entre los tags de "HEAD" tenemos la línea que originalmente ya estaba en nuestro branch master2.0, mientras que entre "<i>==="</i> y ">>>>" nos aparece la línea incluida por el branch2. De este modo decidimos que las dos líneas deben quedar en la versión 2.0 y solo borramos los tags:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg27j63PDYvD1LQPnvYwO2l84DPQpFDFb-gOMFxzrO7csVHhqPRwiZHciYdg0j0Yz-rU_GApOJWsW-Te-4mNGZNW_kPtRp4IGQGKyZvoK5gTmlkrm_2P0Fr9SJwyG9Nv8e2Xvb7v6L5FKSh/s1600/step17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg27j63PDYvD1LQPnvYwO2l84DPQpFDFb-gOMFxzrO7csVHhqPRwiZHciYdg0j0Yz-rU_GApOJWsW-Te-4mNGZNW_kPtRp4IGQGKyZvoK5gTmlkrm_2P0Fr9SJwyG9Nv8e2Xvb7v6L5FKSh/s1600/step17.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
El archivo <i>PruebaGit.c</i> seguirá en rojo. Para aplicar los cambios, hacemos click derecho sobre el archivo<i>->Team->add to index</i>. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Luego hacemos un commit indicando que ya se realizó el merge con el branch2. En este caso el mensaje del commit ya estará cargado indicando los cambios realizados por el merge.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Este proceso lo repetimos para el branch3, de modo que al terminar, tendremos el branch master2.0 listo para subir al server, para ello recordar ejecutar un "push branch" como se indicó anteriormente.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
Modos de trabajo con GIT</h3>
<div class="separator" style="clear: both; text-align: left;">
Existen muchas formas de trabajar con git, el post publicado trata del modo <i>Feature Branch Workflow</i> en el cual se genera un branch dedicado para cada funcionalidad que se quiere agregar al proyecto, pero también es válido el modo <i>Centralized Workflow</i> en el cual existe un repositorio centralizado al estilo SVN.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
Bibliografía:</h3>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://git-scm.com/book/es">http://git-scm.com/book/es</a></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://www.atlassian.com/git/">https://www.atlassian.com/git/</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8618809592479227049.post-42222153175438946322014-07-21T15:37:00.000-07:002014-07-21T15:41:33.279-07:00Seminario 12/07/2014 en UTN-FRA<span style="font-family: Verdana, sans-serif;">Presentamos el material utilizado en las charlas organizadas por La secretaría de Cultura y Extensión Universitaria de la UTN-FRA el pasado 12 de Julio de 2014.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="color: orange; font-family: Verdana, sans-serif;"><b>Desarrollo de Aplicaciones Android</b></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<object class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="https://i1.ytimg.com/s_vi/CkYA3F_3Lw8/default.jpg?sqp=CJCprJ4F&rs=AOn4CLAzFPbUODbGNf7VIaSJXtypwbcxvw" height="266" width="320"><param name="movie" value="https://www.youtube.com/v/CkYA3F_3Lw8?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata" /><param name="bgcolor" value="#FFFFFF" /><param name="allowFullScreen" value="true" /><embed width="576" height="475" src="https://www.youtube.com/v/CkYA3F_3Lw8?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata" type="application/x-shockwave-flash" allowfullscreen="true"></embed></object></div>
<br />
<b style="color: orange; font-family: Verdana, sans-serif;">De 0 a PHP en 60 minutos.</b><br />
<b style="color: orange; font-family: Verdana, sans-serif;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<object class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="https://i1.ytimg.com/s_vi/wPrWc5Om3Yk/default.jpg?sqp=CJCprJ4F&rs=AOn4CLDyx-tbA0Ilf8IMHKXwigAgswS3Mw" height="266" width="320"><param name="movie" value="https://www.youtube.com/v/wPrWc5Om3Yk?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata" /><param name="bgcolor" value="#FFFFFF" /><param name="allowFullScreen" value="true" /><embed width="576" height="475" src="https://www.youtube.com/v/wPrWc5Om3Yk?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata" type="application/x-shockwave-flash" allowfullscreen="true"></embed></object></div>
<b style="color: orange; font-family: Verdana, sans-serif;"><br /></b>
<b style="color: orange; font-family: Verdana, sans-serif;">Python, un lenguaje en constante crecimiento.</b><br />
<b style="color: orange; font-family: Verdana, sans-serif;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<object class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="https://i1.ytimg.com/s_vi/SvaC5dSAxeQ/default.jpg?sqp=CJCprJ4F&rs=AOn4CLC09lSjTJI0OSgfkpNmjLk4zv_mcg" height="266" width="320"><param name="movie" value="https://www.youtube.com/v/SvaC5dSAxeQ?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata" /><param name="bgcolor" value="#FFFFFF" /><param name="allowFullScreen" value="true" /><embed width="576" height="475" src="https://www.youtube.com/v/SvaC5dSAxeQ?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata" type="application/x-shockwave-flash" allowfullscreen="true"></embed></object></div>
<b style="color: orange; font-family: Verdana, sans-serif;"><br /></b>
<br />
<div>
<b style="color: orange; font-family: Verdana, sans-serif;">La invasión Javascript.</b></div>
<div class="separator" style="clear: both; text-align: center;">
<object class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="https://i1.ytimg.com/s_vi/nchGmgjB3gc/default.jpg?sqp=CLyrrJ4F&rs=AOn4CLAqM4LSJvzDJEzk66leJKk1lrrphg" height="266" width="320"><param name="movie" value="https://www.youtube.com/v/nchGmgjB3gc?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata" /><param name="bgcolor" value="#FFFFFF" /><param name="allowFullScreen" value="true" /><embed width="576" height="475" src="https://www.youtube.com/v/nchGmgjB3gc?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata" type="application/x-shockwave-flash" allowfullscreen="true"></embed></object></div>
<div>
<b style="color: orange; font-family: Verdana, sans-serif;"><br /></b></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8618809592479227049.post-54908332170365905632014-05-26T10:52:00.000-07:002014-05-26T10:52:49.583-07:00Beaglebone Black custom eMMC flasher Image<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm4r7WjY0D8L7bP-ZtAtC2QkIkZSjPA6kl6UlKCLXEc_5C4fHE45Xb0kE0lvmeMg-LkDxx_Ad2yFyVjrOSfvINFAaqH4WZrnnYBMJZIUZ-roPcM8kfM_hIQ49gqt-LTDPZPMZWGyNvLdEz/s1600/beaglebone-black-board-logicsupply_pic1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm4r7WjY0D8L7bP-ZtAtC2QkIkZSjPA6kl6UlKCLXEc_5C4fHE45Xb0kE0lvmeMg-LkDxx_Ad2yFyVjrOSfvINFAaqH4WZrnnYBMJZIUZ-roPcM8kfM_hIQ49gqt-LTDPZPMZWGyNvLdEz/s1600/beaglebone-black-board-logicsupply_pic1.jpg" height="133" width="200" /></a></div>
<br />
In this tutorial we are going to create a flasheable microSD image with Debian 7 and we are going to add packages and programs to it. In this way, you can create a custom sd card that you could use to flash Debian into eMMC memory in all Beaglebones Black you want.<br />
<br />
1) Get microSD eMMC flasher image from <a href="http://elinux.org/BeagleBoardDebian#eMMC:_BeagleBone_Black" target="_blank">here</a> and follow the steps to flash Debian into eMMC memory in Beaglebone Black. We need Debian running from eMMC to customize our microSD image.<br />
<br />
2) Once you have Debian running from eMMC, we are going to use our microSD card with the flasher image into it, to customize the image, then we will be able to use this custom image with custom packages and programs and flash it in all beaglebones we want.<br />
<br />
3) With Debian running from eMMC, insert your microSD card and mount it:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> #cd /root
#mkdir root_fs_sd
#mount /dev/mmcblk1p2 /root/root_fs_sd/
</code></pre>
<br />
The trick is to use the sd card’s filesystem instead of our current filesystem, this allow us to install programs in that filesystem, the tool used for this purpose is “<a href="http://en.wikipedia.org/wiki/Chroot" target="_blank">chroot</a>”.<br />
<br />
4) Before executing chroot into root_fs_sd, we need to mount some directories:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> mount /proc -t proc root_fs_sd/proc
mount /sys -t sysfs root_fs_sd/sys
mount /dev/pts -t devpts root_fs_sd/dev/pts
mkdir root_fs_sd/run/lock
cp /etc/resolv.conf root_fs_sd/etc/resolv.conf
</code></pre>
<br />
5) Now we can chroot root_fs_sd directory<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> chroot root_fs_sd /bin/bash
ln -s /run/lock /var/lock
</code></pre>
<br />
6) Once we are inside sd card's filesystem, we are running our kernel with the filesystem mounted from microSD card, and we can install programs and packages in this filesystem, all changes will be saved into our microSD card. For example we can install lxde desktop:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> aptitude install lxde
</code></pre>
<br />
7) When we press CTRL+D, we go out from chroot command and our microSD card is ready to flash another Beaglebone Black, when we do that, that image will have lxde desktop installed.<br />
<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8618809592479227049.post-35067774327995533682014-05-22T14:39:00.000-07:002014-05-22T14:39:27.065-07:00Instalación IO-Python-Library adafruit en Beaglebone Black con Debian<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="line-height: 100%;">Para llevar adelante
proyectos de Python en nuestra Beaglebone Black, será de gran utilidad
instalar una biblioteca llamada "IO Python Library" publicada por <a href="https://learn.adafruit.com/setting-up-io-python-library-on-beaglebone-black/overview" target="_blank">adafruit</a> la cual nos permitirá tener acceso al hardware. En la página oficial se encuentra la explicación para instalar la biblioteca sobre Angstrom y Ubuntu, pero no sobre Debian, la cual detallaremos a continuación.</span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieq3mpTpRRSlv5Kmsapi3nHgOMHqzdKDZZkyLpz4IymGdpb8skFvet-3hQ3c2n4XNyaFZnq05csnHeT2tsLaxOtsi-6Af79BCG9GK_FrJLocSxOddC_zj25B5ExngOdAz4XSf8BmegDj3U/s1600/beaglepy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieq3mpTpRRSlv5Kmsapi3nHgOMHqzdKDZZkyLpz4IymGdpb8skFvet-3hQ3c2n4XNyaFZnq05csnHeT2tsLaxOtsi-6Af79BCG9GK_FrJLocSxOddC_zj25B5ExngOdAz4XSf8BmegDj3U/s1600/beaglepy.png" height="228" width="320" /></a></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Siempre antes de
realizar un proceso de instalación recordar previamente actualizar
la fecha y el listado de paquetes.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"><div style="line-height: 100%; margin-bottom: 0cm;">
root@arm:~# ntpdate -b -s -u pool.ntp.org
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
root@arm:~# aptitude update</div>
</code></pre>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Comencemos por
instalar algunos paquetes de Python que no se encuentran instalados
en Debian 7 por defecto:</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"><div style="line-height: 100%; margin-bottom: 0cm;">
root@arm:~# aptitude install python-pip python-setuptools python-dev python-smbus
</div>
</code></pre>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Ahora con el gestor
de paquetes easy_install instalamos el paquete “distribute”:</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"><div style="line-height: 100%; margin-bottom: 0cm;">
root@arm:~# easy_install -U distribute
</div>
</code></pre>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Solo nos resta
instalar y compilar Adafruit_BBIO:
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"><div style="line-height: 100%; margin-bottom: 0cm;">
root@arm:~# pip install Adafruit_BBIO</div>
</code></pre>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br />
Para probar el funcionamiento, desde una consola Python importaremos la biblioteca:</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"><div style="line-height: 100%; margin-bottom: 0cm;">
root@arm:~# python
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Python 2.7.3 (default, Mar 14 2014, 17:55:54)
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
[GCC 4.6.3] on linux2
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Type "help","copyright", "credits" or "license" for more information.
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
>>> import Adafruit_BBIO
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
</code></pre>
<br />Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-13570957516187645512014-05-21T08:05:00.002-07:002014-05-21T08:05:39.430-07:00Conexión túnel reverso de SSH<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9voIDy5SECttEOL_nQbr6ei4W1UAUExMjI3GemVrNy7uHfS7WBdADPm61dtdS8tb2uCB1vcY6Z5l-4scoIl4y1r_t9r1YvKToAquhZ54t7v37gcvvF5I5RqEc5GnfIKxQ2Sl6lRfiP-Ap/s1600/openssh_logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9voIDy5SECttEOL_nQbr6ei4W1UAUExMjI3GemVrNy7uHfS7WBdADPm61dtdS8tb2uCB1vcY6Z5l-4scoIl4y1r_t9r1YvKToAquhZ54t7v37gcvvF5I5RqEc5GnfIKxQ2Sl6lRfiP-Ap/s1600/openssh_logo.png" /></a></div>
<br />
Explicaremos como hacer una conexión túnel reverso SSH sobre Debian. Esto nos permitirá poder conectarnos a una PC remota que se encuentre detrás de un Firewall.<br />
<br />
En la pc
donde nos queremos conectar en forma remota (la llamaremos “pc_remota”), y que está
detrás de un firewall, debemos iniciar una conexión SSH a una pc intermedia (la
llamaremos “server”) de acceso público desde internet:<u><o:p></o:p></u></div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm;">
En PC
remota:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> ssh -R *:8009:localhost:22 usuario_server@ip_server
</code></pre>
<br />
Donde:</div>
<ul style="margin-top: 0cm;" type="disc">
<li class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-list: l0 level1 lfo1;"><b>8009</b> es el Puerto en el server por el cual tendremos
acceso a la pc remota.</li>
<li class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-list: l0 level1 lfo1;"><b>22</b> es el puerto donde funciona ssh en la pc remota.</li>
<li class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-list: l0 level1 lfo1;"><b>usuario_server</b> usuario de ssh del server.</li>
<li class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-list: l0 level1 lfo1;"><b>ip_server</b> es la IP de la PC server.</li>
</ul>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 36.0pt; margin-right: 0cm; margin-top: 0cm;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm;">
En el server,
se debe tener instalado el servidor openssh-server, y editar el archivo<b> /etc/ssh/sshd_config</b> y agregar al
final:</div>
<div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;">
<div class="MsoNormal" style="border: none; margin-bottom: .0001pt; margin-bottom: 0cm; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0cm;">
<b>GatewayPorts yes<o:p></o:p></b></div>
<div class="MsoNormal" style="border: none; margin-bottom: .0001pt; margin-bottom: 0cm; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0cm;">
<b>PermitTunnel yes<o:p></o:p></b></div>
</div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm;">
En la pc desde
donde nos queremos conectar a la pc remota (la llamaremos “cliente”),
ejecutamos una conexión ssh estándar pero en el puerto 8009<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> ssh –p 8009 usuario_pc_remota@ip_server
</code></pre>
<span lang="EN-US"><br /></span>
<span lang="EN-US"> </span>y esto nos conecta con
la pc remota directamente, desde la pc “Cliente”.</div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-79872632825927005072014-05-19T06:55:00.000-07:002014-05-19T06:55:20.791-07:00Instalación de LXDE y escritorio remoto en Beaglebone Black<div style="line-height: 100%; margin-bottom: 0cm;">
En este post
explicaremos como instalar y luego acceder de manera remota a un
escritorio muy liviano en nuestra <a href="http://beagleboard.org/Products/BeagleBone+Black" target="_blank">Beaglebone Black</a> previamente instalada con <a href="http://elinux.org/BeagleBoardDebian#Debian_Stable_.28wheezy.29" target="_blank">Debian 7</a>, el escritorio a
utilizar en nuestro caso es <b><a href="http://lxde.org/es" target="_blank">Lxde</a></b> el cual en su versión mínima de
instalación, ocupará menos de 73 MB.<br />
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPBuod4V-URgo0vC12mnIMll24q10DKm7PW7mAS5N6Hf-DZhvmQMH36IaMkKkVkHCNE2QWSVkoceRUoycojDw7geKxh7WE1hWgeosgklvJilSj55V3cGvRWlF51aeKDXG3OFnosYE1vrK/s1600/lxde.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPBuod4V-URgo0vC12mnIMll24q10DKm7PW7mAS5N6Hf-DZhvmQMH36IaMkKkVkHCNE2QWSVkoceRUoycojDw7geKxh7WE1hWgeosgklvJilSj55V3cGvRWlF51aeKDXG3OFnosYE1vrK/s1600/lxde.jpg" height="239" width="320" /></a></div>
<br />
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Comencemos por
conectarnos a nuestra placa como administradores, para ello abrimos
una terminal en nuestro equipo y escribimos:</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">$ ssh root@192.168.7.2
</code></pre>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br />
Una vez conectados a
nuestra Beagle realizaremos las instalación de nuestro escritorio:</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"><div style="line-height: 100%; margin-bottom: 0cm;">
root@arm:~# aptitude install --without-recommends lxde
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
The following NEW packages will be installed:
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
desktop-file-utils fontconfig{a} fontconfig-config{a} galculator gpicview leafpad
libasound2{a}
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
...</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
...</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
0 packages upgraded,80 newly installed, 0 to remove and 14 not upgraded.
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Need to get 22.4 MB of archives. After unpacking 72.7 MB will be used.
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Do you want to continue? [Y/n/?] Y</div>
</code></pre>
</div>
<span style="line-height: 100%;"><br /></span>
<span style="line-height: 100%;">Como se puede observar, solo ocupa 72.7 MB. Ahora instalaremos </span><b style="line-height: 100%;">xterm</b><span style="line-height: 100%;">,
se trata de una terminal gráfica que no se encuentra incluida en la instalación mínima de <b><a href="http://lxde.org/es" target="_blank">Lxde</a></b>.</span>
<br />
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">root@arm:~# aptitude install xterm
</code></pre>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
Solo nos resta instalar
<b>xterm</b> en nuestra PC (suponemos que corre Debian):
<br />
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">$ aptitude install xterm
</code></pre>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
Ahora ya podremos iniciar una sesión Lxde vía SSH:
<br />
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">$ xinit -e ssh -XY usuario@192.168.7.2 lxsession -- :1 </code></pre>
</div>
<br />
<b>Importante:</b><br />
1. Para regresar a la consola gráfica de nuestro equipo la combinación de teclas es: <b>CRTL+ALT+F7</b><br />
2. Para ir a la gráfica de nuestra Beagle una vez abierta la combinación de teclas es: <b>CRTL+ALT+F3
</b><br />
<br />Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-80021233181479777062014-05-15T16:52:00.000-07:002014-05-15T16:52:29.422-07:00Agregar un evento a un Widget en PyQt4Este post tiene por propósito explicar de manera simple como agregar un evento a un Widget de PyQt4, respetando las formas de dicha biblioteca.
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1tILnLe9W5tu1QOO0BQcn1Mj4uxczncWM0_RhHjkkjeKVIn4F1z8F_-jrQB1Y9d9KAqqp-2BlQlMMboA4QBJv5DXbJOoOXQ3u5eP4EBgGEzA3WtY_gvoFEhoFBBXpGG0QCc7-2CW2a50Y/s1600/qt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1tILnLe9W5tu1QOO0BQcn1Mj4uxczncWM0_RhHjkkjeKVIn4F1z8F_-jrQB1Y9d9KAqqp-2BlQlMMboA4QBJv5DXbJOoOXQ3u5eP4EBgGEzA3WtY_gvoFEhoFBBXpGG0QCc7-2CW2a50Y/s1600/qt.png" height="159" width="320" /></a></div>
<div style="line-height: 100%; margin-bottom: 0cm; page-break-before: always;">
<span style="font-family: inherit;">Tomaremos un <b>Qlabel</b> de
la biblioteca standart de Qt4 y le incorporaremos el evento click,
buscando que este se comporte de manera similar al evento “<b>click</b><b>ed()</b>”
del <b>Q</b><b>P</b><b>ushButton</b>, por lo tanto, no solo debemos
capturar dicho evento, sino también emitir una señal.
</span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;">Comenzaremos
construyendo una clase, la cual heredará de <b>QLabel</b>.</span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div dir="ltr" id="Section1" style="background: #e6e6ff;">
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-size: medium;"><span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">from</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
PyQt4 </span></span></span><span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">import</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
QtCore, QtGui</span></span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">class</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"><b>NewLabel</b></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">(QtGui.QLabel):</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;"></span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">def</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"><b>__init__</b></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">(</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>self</i></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">,
firstLabel,</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">parent</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">):</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">QtGui.QLabel.__init__(</span></span></span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>self</i></span></span></span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">,
firstLabel, </span></span></span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">parent</span></span></span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">)</span></span></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;">Hemos
heredado de <span style="color: black;"><span style="font-size: small;"><b>QtGui.QLabel</b></span></span>
y sobrescrito el constructor, en el caso de una <span style="color: black;"><span style="font-size: small;"><b>QLabel</b></span></span>
el primer parámetro hace referencia al texto que este mostrará y el
segundo a quién es el <b>W</b><b>idget</b> que contendrá dicho
elemento. Este parámetro suele ser pasado como <b>None</b> en el
caso de que un <b>W</b><b>idget</b> sea contenido por un <b>Layout</b>.</span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;">Generaremos
un módulo <b>Main.py</b> a solo efecto de poder incorporar nuestro
<b>NewLabel</b> a una ventana del tipo <b>Q</b><b>M</b><b>ainWindows</b>.</span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div dir="ltr" id="Section2" style="background: #e6e6ff;">
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">import</span></span></span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">
sys</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">from</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
PyQt4 </span></span></span><span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">import</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
QtGui</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">from</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
NewLabel </span></span></span><span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">import</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
NewLabel</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">def</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"><b>main</b></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">():</span></span></span></div>
<div align="left" style="font-style: normal; line-height: 100%; margin-bottom: 0cm; text-decoration: none;">
<span style="color: black;"> </span>
</div>
<div align="left" style="font-style: normal; line-height: 100%; margin-bottom: 0cm; text-decoration: none;">
<span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"> app
= QtGui.QApplication(sys.argv)</span></span></span></div>
<div align="left" style="font-style: normal; line-height: 100%; margin-bottom: 0cm; text-decoration: none;">
<span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"> w
= QtGui.QMainWindow()</span></span></span></div>
<div align="left" style="font-style: normal; line-height: 100%; margin-bottom: 0cm; text-decoration: none;">
<span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"> w.resize(</span></span></span><span style="color: maroon;"><span style="font-family: Monospace;"><span style="font-size: small;">400</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">,
</span></span></span><span style="color: maroon;"><span style="font-family: Monospace;"><span style="font-size: small;">200</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">)</span></span></span></div>
<div align="left" style="font-style: normal; line-height: 100%; margin-bottom: 0cm; text-decoration: none;">
<span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"> w.move(</span></span></span><span style="color: maroon;"><span style="font-family: Monospace;"><span style="font-size: small;">300</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">,
</span></span></span><span style="color: maroon;"><span style="font-family: Monospace;"><span style="font-size: small;">300</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">)</span></span></span></div>
<div align="left" style="font-style: normal; line-height: 100%; margin-bottom: 0cm; text-decoration: none;">
<span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"> w.setWindowTitle(</span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;">'Mi
primer widget'</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">)</span></span></span></div>
<div align="left" style="font-style: normal; line-height: 100%; margin-bottom: 0cm; text-decoration: none;">
<span style="color: black;"></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;"> #Creamos
nuestra primer etiqueta</span></span></span></div>
<div align="left" style="font-style: normal; line-height: 100%; margin-bottom: 0cm; text-decoration: none;">
<span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"> new_label
= NewLabel(</span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;">"Primer
etiqueta"</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">,
w)</span></span></span></div>
<div align="left" style="font-style: normal; line-height: 100%; margin-bottom: 0cm; text-decoration: none;">
<span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"> new_label.setStyleSheet(</span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;">"NewLabel
{background-color:red;}"</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">)</span></span></span></div>
<div align="left" style="font-style: normal; line-height: 100%; margin-bottom: 0cm; text-decoration: none;">
<span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"> w.show()</span></span></span></div>
<div align="left" style="font-style: normal; line-height: 100%; margin-bottom: 0cm; text-decoration: none;">
<span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"> sys.exit(app.exec_())</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">if</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
__name__ == </span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>'__main__'</i></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">:</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"> main()</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;">Al ejecutar la aplicación se mostrará lo siguiente:</span><br />
<span style="font-family: inherit;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBrzs82Ol0QE-2v5P-XfBPrgLkNq_ndehskLnoWEPNjFq0ar7i3_ro2hNaSdLx0ciZnVHZ_WSLpfN-TXCqPf2ALDVISWbhwsfH-9OSfVP-m5TyduHU_nGjudkF5TJHWtAhDN2n4A_39xTQ/s1600/label.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBrzs82Ol0QE-2v5P-XfBPrgLkNq_ndehskLnoWEPNjFq0ar7i3_ro2hNaSdLx0ciZnVHZ_WSLpfN-TXCqPf2ALDVISWbhwsfH-9OSfVP-m5TyduHU_nGjudkF5TJHWtAhDN2n4A_39xTQ/s1600/label.png" height="191" width="320" /></a></div>
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit; line-height: 100%;">Hasta
aquí solo hemos agregado una etiqueta del tipo </span><b style="font-family: inherit; line-height: 100%;">NewLabel</b><span style="font-family: inherit; line-height: 100%;"> a la
cual le modificamos, mediante el método </span><b style="font-family: inherit; line-height: 100%;">StyleSheet,</b><span style="font-family: inherit; line-height: 100%;"> el color
(es para diferenciarla de la ventana).</span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;">Antes
de agregar el evento debemos hacer algunas aclaraciones. Existe una
clase en Qt4 llamada <b>QWidget</b> la cual es la clase base de todos
los elementos gráficos de Qt4, por lo tanto conociendo esto, podemos
inferir que todos los métodos que nos brinda la clase base, estarán
presentes en cualquier <b>Widget</b> de la biblioteca <b>QtGui</b>.
</span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;">Para
ampliar información sobre qué eventos es capaz de manejar esta clase, se recomienda el siguiente enlace:
</span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><br /></span></div>
<div align="center" style="line-height: 100%; margin-bottom: 0cm;">
<a href="http://pyqt.sourceforge.net/Docs/PyQt4/qwidget.html"><span style="font-family: inherit;">http://pyqt.sourceforge.net/Docs/PyQt4/qwidget.html</span></a></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">El evento que necesitamos para cumplir con
la consigna, es:</span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><span style="font-variant: normal;"><span style="color: black;"><span style="font-style: normal;"><b>QWidget.mousePressEvent
(</b></span></span></span><span style="font-variant: normal;"><span style="color: black;"><i><b>self</b></i></span></span><span style="font-variant: normal;"><span style="color: black;"><span style="font-style: normal;"><b>,
</b></span></span></span><a href="http://pyqt.sourceforge.net/Docs/PyQt4/qmouseevent.html"><span style="font-variant: normal;"><span style="color: black;"><span style="text-decoration: none;"><span style="font-style: normal;"><b>QmouseEvent</b></span></span></span></span></a><span style="font-variant: normal;"><span style="color: black;"><span style="font-style: normal;"><b>)</b></span></span></span></span></div>
<div style="font-style: normal; font-variant: normal; font-weight: normal; line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;">A
pesar de que en este momento no lo utilizaremos, vale la pena destacar
que el segundo parámetro recibido (<b>QMouseEvent</b>) cuenta con
información del puntero del mouse, por citar alguna, las coordenadas
<b>X</b> e <b>Y</b>. </span>
<br />
<span style="font-family: inherit;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div dir="ltr" id="Section3" style="background: #e6e6ff;">
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue; font-size: medium; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">from</span></span></span><span style="color: black; font-size: medium; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">
PyQt4 </span></span></span><span style="color: blue; font-size: medium; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">import</span></span></span><span style="color: black; font-size: medium; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">
QtCore, QtGui</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">class</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"><b>NewLabel</b></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">(QtGui.QLabel):</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;"></span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">def</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"><b>__init__</b></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">(</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>self</i></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">,
firstLabel, parent = </span></span></span><span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">None</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">):</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">QtGui.QLabel.__init__(</span></span></span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>self</i></span></span></span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">,
firstLabel, parent)</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;"></span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">def</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"><b>mousePressEvent</b></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">(</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>self</i></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">,
event):</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;"></span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>self</i></span></span></span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">.emit(QtCore.SIGNAL(</span></span></span><span style="color: #00aa00; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>'clicked()'</i></span></span></span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">))</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;">
</span>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;">Como
podemos ver en esta re-implementación del método <b>mousePressEvent</b><span style="font-weight: normal;">,
emitimos la señal “</span><b>clicked()</b><span style="font-weight: normal;">”, a solo efecto de comportarnos de la misma forma que lo hace
el </span><b>QpushButton, </b><span style="font-weight: normal;">de
querer podríamos emitir cualquier señal</span><span style="font-weight: normal;">.</span></span></div>
<div style="font-weight: normal; line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: inherit;"><span lang="es-ES"><span style="font-weight: normal;">Por último, nos resta modificar nuestro mádulo </span></span><span lang="es-ES"><b>Main.py,
</b></span><span lang="es-ES"><span style="font-weight: normal;">conectando
el evento “</span></span><span lang="es-ES"><b>click</b></span><span lang="es-ES"><b>ed()</b></span><span lang="es-ES"><span style="font-weight: normal;">”</span></span><span lang="es-ES"><span style="font-weight: normal;">
del </span></span><span lang="es-ES"><b>NewLabel</b></span><span lang="es-ES"><span style="font-weight: normal;">
con un método capaz de imprimir por consola.</span></span><span lang="es-ES"><b>
</b></span>
</span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div dir="ltr" id="Section4" style="background: #e6e6ff;">
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;">#
-*- coding: </span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;"><u>utf</u></span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;">-8
-*-</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;">
</span>
</div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">import</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
sys</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">from</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
PyQt4 </span></span></span><span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">import</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
QtGui, QtCore</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">from</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
NewLabel </span></span></span><span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">import</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
NewLabel</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">def</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"><b>imprimir</b></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">():</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;">
</span><span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">print</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>"CLICK"</i></span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">def</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;"><b>main</b></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">():</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;">
</span>
</div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">app
= QtGui.QApplication(sys.argv)</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;">
</span>
</div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">w =
QtGui.QMainWindow()</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">w.resize(</span></span></span><span style="color: maroon;"><span style="font-family: Monospace;"><span style="font-size: small;">400</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">,
</span></span></span><span style="color: maroon;"><span style="font-family: Monospace;"><span style="font-size: small;">200</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">)</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">w.move(</span></span></span><span style="color: maroon;"><span style="font-family: Monospace;"><span style="font-size: small;">300</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">,
</span></span></span><span style="color: maroon;"><span style="font-family: Monospace;"><span style="font-size: small;">300</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">)</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">w.setWindowTitle(</span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>'</i></span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;"><i><u>Mi</u></i></span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>
primer widget'</i></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">)</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;"></span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;">#</span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;"><u>Creamos</u></span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;"><u>nuestra</u></span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;">
primer </span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;"><u>etiqueta</u></span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">new_label
= NewLabel(</span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>"Primer
</i></span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;"><i><u>etiqueta</u></i></span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>"</i></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">,
w)</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">new_label.setStyleSheet(</span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>"NewLabel
{background-color:red;}"</i></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">)</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;">
</span>
</div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;"></span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;">#</span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;"><u>Conectamos</u></span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;"><u>la</u></span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;"><u>señal</u></span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;"><u>con</u></span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;">
el </span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;"><u>lisener</u></span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;">
</span></span></span><span style="color: silver;"><span style="font-family: Monospace;"><span style="font-size: small;"><u>imprimir</u></span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">new_label.connect(new_label,\</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">QtCore.SIGNAL(</span></span></span><span style="color: #00aa00; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>"clicked()"</i></span></span></span><span style="color: black; line-height: 100%;"><span style="font-family: Monospace;"><span style="font-size: small;">),\</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;">imprimir)</span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: black;">
</span>
</div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">w.show()</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">sys.exit(app.exec_())</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="color: blue;"><span style="font-family: Monospace;"><span style="font-size: small;">if</span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">
__name__ == </span></span></span><span style="color: #00aa00;"><span style="font-family: Monospace;"><span style="font-size: small;"><i>'__main__'</i></span></span></span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">:</span></span></span></div>
<div align="left" style="line-height: 100%; margin-bottom: 0cm;">
<span style="font-family: monospace; line-height: 100%;"> </span><span style="font-family: monospace; line-height: 100%;"> </span><span style="color: black;"><span style="font-family: Monospace;"><span style="font-size: small;">main()</span></span></span></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
</div>
<div style="font-weight: normal; line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<a href="https://www.blogger.com/blogger.g?blogID=8618809592479227049" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><span style="font-family: inherit;"><span lang="es-ES"><span style="font-weight: normal;">Ya tenemos incorporado el evento “</span></span><span lang="es-ES"><b>clicked()</b></span><span lang="es-ES"><span style="font-weight: normal;">”
a nuestro label.</span></span></span></div>
<div style="line-height: 100%; margin-bottom: 0cm; text-align: left;">
<span style="font-size: 14pt;"><span style="color: silver;"><span style="font-family: Monospace;"><span lang="es-ES"><br /></span></span></span></span></div>
<div style="line-height: 100%; margin-bottom: 0cm; text-align: left;">
<span style="font-size: 14pt;"><span style="color: silver;"><span style="font-family: Monospace;"><span lang="es-ES"><br /></span></span></span></span></div>
<div style="line-height: 100%; margin-bottom: 0cm; text-align: left;">
<span style="font-size: 14pt;"><span style="color: silver;"><span style="font-family: Monospace;"><span lang="es-ES"><br /></span></span></span></span></div>
Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-74520435770401831602014-05-10T16:47:00.003-07:002014-05-15T16:34:54.652-07:00Configurar Internet en Beaglebone Black por USB con Debian 7En este post explicaremos como tener acceso a Internet desde nuestra BeagleBone Black con Debian 7, cuando ésta se encuentra sólo conectada vía USB a nuestra computadora.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwdcFrxoOQoGlQIyoj_Q1DVUHa6aMzARjLmNjwvChH3O_LK_G5x0oqSnJV9vQkbqhl-QX9BkQsihlXf8vp4kQ29KQS1SciZrsI_egvCJEd5zbpzIioo9eqLj1RHV13V7QYK_ENMH6_qs_L/s1600/beaglefra.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwdcFrxoOQoGlQIyoj_Q1DVUHa6aMzARjLmNjwvChH3O_LK_G5x0oqSnJV9vQkbqhl-QX9BkQsihlXf8vp4kQ29KQS1SciZrsI_egvCJEd5zbpzIioo9eqLj1RHV13V7QYK_ENMH6_qs_L/s1600/beaglefra.png" height="170" width="320" /></a></div>
<br />
<br />
Comencemos por conectar nuestra placa al puerto USB de nuestro equipo, una vez transcurrido el tiempo de booteo, en nuestra máquina se creará una nueva placa de red virtual, la cual típicamente tendrá la dirección IP “192.168.7.1”.<br />
<br />
Para verificar que esto sea así, desde una terminal escribiremos:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">#ifconfig -a
#enp0s29u1u1: flags=4163<up> mtu 1500
inet 192.168.7.1 netmask 255.255.255.252 broadcast 192.168.7.3
inet6 fe80::caa0:30ff:feb5:7c38 prefixlen 64 scopeid 0x20<link></link>
ether c8:a0:30:b5:7c:38 txqueuelen 1000 (Ethernet)
RX packets 364 bytes 40963 (40.0 KiB)
...</code></pre>
<br />
Ahora ya podremos acceder vía SSH a nuestra Beagle:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">#ssh root@192.168.7.2
</code></pre>
<br />
Una vez ingresado el password:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: Mon Feb 17 03:40:48 2014 from new-host-92.local
root@arm:~#
</code></pre>
<br />
Ya estamos en la terminal de nuestra Beagle, consultemos por las interfaces de red activas en nuestra placa.<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">root@arm:~# ifconfig -a</code></pre>
<br />
Como resultado obtendremos dos interfaces: una corresponde a "<b>localhost</b>" y la otra a "<b>usb0</b>". Sin embargo, cuando se requiere instalar un paquete desde un repositorio externo, por ejemplo:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">root@arm:~# aptitude install python-mysqldb</code></pre>
<br />
Nos encontraremos con que el sistema operativo no posee acceso a Internet.<br />
<br />
Para solucionar este problema, tenemos dos caminos a tomar: el primero es darle a nuestra Beagle otra forma de acceso a Internet (WiFi, LAN, etc...) y el segundo compartiendo la red de nuestra computadora.<br />
<br />
¿Cómo compartir?, es relativamente simple y se podrá aplicar para compartir acceso a Internet con cualquier dispositivo.<br />
<br />
Empecemos por crear en la Beagle una regla de ruteo dentro de un archivo al cual le daremos permisos de ejecución.<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">root@arm:~# echo "route add default gw 192.168.7.1 usb0" > red.sh
root@arm:~# chmod +x red.sh
root@arm:~# ./red.sh</code></pre>
<br />
Por otra parte editaremos el contenido del archivo <b>resolv.conf</b> a efectos de dejar como servidor de DNS a Google e incorporaremos un atributo que impida modificar dicho archivo en el futuro. En el caso de requerir modificarlo, se deberá ejecutar el mismo comando con el parámetro “-i”.<br />
<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">root@arm:~# echo "nameserver 8.8.8.8" >> /etc/resolv.conf
root@arm:~# chattr +i /etc/resolv.conf</code></pre>
<br />
Esta es toda la configuración que se debe aplicar en la BeagleBone Black. Ahora debemos trabajar del lado de nuestro equipo, en donde supondremos que también tenemos instalado el sistema operativo Debian. Comenzaremos creando un archivo al cual luego de creado lo haremos ejecutable.<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"># vim compartir.sh</code></pre>
<br />
En éste, cargaremos el siguiente contenido:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">#Habilitamos el forwardeo
echo 1 > /proc/sys/net/ipv4/ip_forward
#Borramos las tablas de iptables
iptables -F
#Agregamos una regla a IP tables
iptables -t nat -A POSTROUTING -s 192.168.7.2 -o wlp5s0 -j MASQUERADED
#Deshabilitamos el firewall
systemctl stop firewalld.service
</code></pre>
<br />
Por último le daremos permiso de ejecución y lo ejecutaremos:<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"># chmod +x compartir.sh
# ./compartir.sh</code></pre>
<br />
A esta altura ya contamos con acceso a Internet desde nuestra Beagle, para probarlo, basta con realizar un ping a Google.<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1USyxES1i1sM8KfxFvGxGs2h_UGeC7Zvi9HCF7-42p8UDMPD4W31Ge_kFqoBznxfGeduirl7jxkSJ5WU2h2F8Lqi2CNPS2nBBcfRTvn2xbP3Chj1RaOnuzl0fEfeZE3t85UNDbv1Gj-F/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">root@arm:~# ping www.google.com</code></pre>
<br />
Es importante recordar que cada vez que reiniciemos nuestra máquina o nuestra Beagle, deberemos volver a ejecutar los archivos que creamos.<br />
<br />
<b>Update:</b><br />
<br />
Si tenemos Windows en nuestra PC, deberemos habilitar la opción "compartir internet" en nuestra placa de red principal. Atención: luego de hacer esto, Windows le cambia la IP a nuestra máquina.<br />
<br />
<br />
<br />
<br />Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-84163408835623855892014-05-08T14:16:00.003-07:002015-08-27T04:56:28.874-07:00Charla Desarrollo en Python sobre BeagleBone Black en FLISOL Avellaneda 2014El sábado 26 de Abril estuvimos en FLISOL Avellaneda hablando sobre desarrollo de programas en Python utilizando Linux embebido en la plataforma BeagleBone Black.
<br />
<br />
Descarga de ejemplos en python: <a href="http://lslutnfra.com/alumnos/cursos/BeagleBoneBlackPython/EjemplosPython.zip">click aquí</a>.<br />
<br />
Presentación:<br />
<br />
<iframe frameborder="0" src="http://docs.google.com/gview?url=http://lslutnfra.com/alumnos/cursos/BeagleBoneBlackPython/presentacionBBB-0.5.pdf&embedded=true" style="height: 480px; width: 590px;"></iframe>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-8618809592479227049.post-64333826438659880202014-03-31T17:34:00.002-07:002015-08-26T19:58:58.973-07:00Curso gratis Android para no programadores Clase 9<b>Clase 9</b> : Java: Programación Orientada a Objetos
<br /> Android: TextView y Button vistos como objetos <br />
<iframe frameborder="0" src="http://docs.google.com/gview?url=http://www.lslutnfra.com/alumnos/cursos/AndroidNoProgramadores/Clase09.pdf&embedded=true" style="height: 800px; width: 590px;"></iframe>Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-38821451188508471472014-03-23T12:01:00.000-07:002015-08-26T19:58:50.380-07:00Curso gratis Android para no programadores Clase 8<b>Clase 8</b> : Java : Programación Orientada a Objetos <br />
<iframe frameborder="0" src="http://docs.google.com/gview?url=http://www.lslutnfra.com/alumnos/cursos/AndroidNoProgramadores/Clase08.pdf&embedded=true" style="height: 800px; width: 590px;"></iframe>
<a href="http://lslutnfra.blogspot.com.ar/2014/03/curso-gratis-android-para-no_31.html" > Ver clase 9 </a>Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-74202868170075685622014-03-23T11:19:00.002-07:002015-08-26T19:58:42.554-07:00Curso gratis Android para no programadores Clase 7<b>Clase 7</b> : Android: Elementos de la gráfica, XML, TextViews y Botones <br />
<iframe frameborder="0" src="http://docs.google.com/gview?url=http://www.lslutnfra.com/alumnos/cursos/AndroidNoProgramadores/Clase07.pdf&embedded=true" style="height: 800px; width: 590px;"></iframe>
<a href="http://lslutnfra.blogspot.com.ar/2014/03/curso-gratis-android-para-no_514.html" > Ver clase 8 </a>Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-67794856823647265092014-03-15T11:48:00.003-07:002015-08-26T19:58:31.682-07:00Curso gratis Android para no programadores Clase 6<b>Clase 6</b> : <br />Android: Proyecto, Layouts, Emulador,Manifest y Logcat.<br />
Java: Arrays de datos y constantes.<br />
<iframe frameborder="0" src="http://docs.google.com/gview?url=http://www.lslutnfra.com/alumnos/cursos/AndroidNoProgramadores/Clase06.pdf&embedded=true" style="height: 800px; width: 590px;"></iframe>
<a href="http://lslutnfra.blogspot.com.ar/2014/03/curso-gratis-android-para-no_23.html" > Ver clase 7 </a>Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-33520778284554270972014-03-13T17:32:00.001-07:002015-08-26T19:58:23.487-07:00Curso gratis Android para no programadores Clase 5<b>Clase 5</b> : Java: Tipos de datos. Primer proyecto Android<br />
<iframe frameborder="0" src="http://docs.google.com/gview?url=http://www.lslutnfra.com/alumnos/cursos/AndroidNoProgramadores/Clase05.pdf&embedded=true" style="height: 800px; width: 590px;"></iframe>
<a href="http://lslutnfra.blogspot.com.ar/2014/03/curso-gratis-android-para-no_15.html" > Ver clase 6 </a>Unknownnoreply@blogger.comtag:blogger.com,1999:blog-8618809592479227049.post-15589174590813508832014-03-08T15:14:00.002-08:002015-08-26T19:58:15.873-07:00Curso gratis Android para no programadores Clase 4<b>Clase 4</b> : Java: Métodos y operadores<br />
<iframe frameborder="0" src="http://docs.google.com/gview?url=http://www.lslutnfra.com/alumnos/cursos/AndroidNoProgramadores/Clase04.pdf&embedded=true" style="height: 800px; width: 590px;"></iframe>
<a href="http://lslutnfra.blogspot.com.ar/2014/03/curso-gratis-android-para-no_13.html" > Ver clase 5 </a>Unknownnoreply@blogger.com