30 nov 2010

Código de colores en tu Blog

En muchas de nuestras publicaciones al Blog necesitamos mostrar un código o parte de este, para explicar como resolvimos un determinado problema, o simplemente explicar que hace alguno de nuestros códigos.

Y bien sabemos que en ocasiones es incomodo ver Blogs donde el código no se puede apreciar bien, o al aparecer como texto llano, no es fácil reconocer que es lo que se supone que debería de hacer cierto código de programa.

Una de la forma en que podemos mostrar código a los lectores del Blog es agregando el color al código tal y como, por ejemplo, Emacs lo haría en un cierto lenguaje, esto podría ser cambiando de color a cada función, pero esto es un proceso tardado y tedioso cuando ya hablamos de un código extenso, así que no es el mejor camino.

Afortunadamente ya existe una forma de colocar código en nuestro Blog con la sintaxis adecuada y colocando colores según sean variables, funciones, comentarios, etcetera. Esta forma es agregando unos Java Script, que harán estos cambios en nuestro código agregado al Blog.

Estos archivos las obtendremos de SyntaxHighlighter, que es un proyecto de Alex Gorbatchev, especialmente pensado para los que ocupamos poner código en nuestras páginas web. Es gratuito y fácil de usar.

SyntaxHighlighter nos permite colorear nuestros códigos para diferentes lenguajes, entre los que se encuentran: Bash, C#, C++, CSS, Erlang, JScript, Java, Perl, PHP, Python, SQL, XML, HTML, entre otros.

Agregar SyntaxHighlighter al Blog

Paso 1

Primero debemos modificar nuestra plantilla del Blog. Para esto nos dirigimos a la esquina superior derecha de nuestro Blog, y entramos a Diseño.

Paso 2

Una vez ahí, nos dirigimos a la Edición de HTML, que es nuestra plantilla del Blog.

Paso 3

En la sección que dice Editar Plantilla es donde vamos a agregar unas lineas nuevas.

En mi caso ya tengo agregadas las necesarias para ciertos lenguajes.
Las lineas que agregaremos son de un archivo CSS y otros Java Script, uno por cada lenguaje del que deseemos poner código en nuestro blog.

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"/>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"/>
<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Estas lineas de código son necesarias agregar. Se deben colocar antes de la etiqueta <head>. Las lineas que coloqué anteriormente son las que tengo actualmente en mi Blog, son para colocar código de Java, Python y Xml.

La página de edición de nuestra plantilla quedaría así:

Nota: No olvides dar clic en Guardar Plantilla.

Paso 4

Una vez agregadas correctamente las lineas para añadir los archivos CSS y Java Script necesarios para colorear nuestro código, es tiempo de editar una de nuestras entradas con algún código o crear una entrada nueva para probar si nos funciona.

De ahora en adelante cuando hagamos una entrada que incluya código haremos lo siguiente:
Debemos entrar a la sección de Edición de HTML de una Nueva entrada. Es aquí donde nos permiten agregar etiquetas html para darle un formato diferente a nuestras entradas.

Nuestro código estará siempre entre las etiquetas <pre> ... </pre>.

Ahora un ejemplo de como debería de colocarse el código para Python:

<pre class="brush:python">
#!/usr/bin/python

print "Hola Mundo!"
n = 2010
print n
# Comentarios
</pre>

Y en tu Blog se vería tal y como se muestra enseguida:

#!/usr/bin/python

print "Hola Mundo!"
n = 2010
print n
# Comentarios

Más lenguajes

En mi caso personal solo tengo por el momento los Java Script para tres lenguajes, pero como les decía al inicio existen para varios lenguajes más. Aquí les pongo una tabla con los otros lenguajes que pueden agregar.

Lenguaje	Brush:	Nombre del archivo
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html	shBrushXml.js

El enlace que tiene cada lenguaje te lleva a la página de SyntaxHighlighter, donde te muestra un código ejemplo para que observes que tal se vería tu código.

Creo que esto dará mayor presentación a un código en tu Blog, espero que esta entrada haya sido de gran ayuda, y que logren poner código presentable.

Sugerencia:
Debido a que las lineas que agregamos a nuestra plantilla hacen un llamado a esos archivos ubicados en el servidor de SyntaxHighlighter, y se encuentran ubicados al inicio de la plantilla, no les recomiendo agregar lenguajes que no usen, porque estos se tienen que descargar al tiempo que se cargue su Blog, por lo tanto si agregamos muchos lenguajes, nuestros visitantes tal vez tengan que esperar segundos de más a que cargue la página debido a esto. Así que yo creo que cargando no más de 8 lenguajes las cosas andarán de maravilla.

Enlaces: SyntaxHighlighter

29 nov 2010

Tutorial de Emacs

En una de mis primeras búsquedas por un buen tutorial de Emacs, me encontré con la siguiente página donde nos muestran los comando más comunes al usar Emacs, y nos dice para que sirve cada uno. No son todos los que se pueden utilizar en Emacs pero si son los más básicos.

Introducción al GNU Emacs

Pero dado a que el enlace anterior es una página con puro texto, busque otra donde fuera un poco más ilustrativo y encontré la siguiente página donde te enseñan Emacs con algunos comandos y como funciona desde la interfaz gráfica.

Comenzando con Emacs

Espero les sea de gran ayuda a aquellos que comienzan a usar este editor de texto, y que logren sacar provecho a todas las cosas que podemos hacer con Emacs.

Torres de Hanói

En una de mis publicaciones anteriores se encuentra la presentación del tema de las Torres de Hanoi, es lo que en clase explique, pero como no tienen mucho texto que explique lo que yo dije en clase, entonces hago esta publicación con una breve explicación de cada diapositiva.

Explicación de mi presentación "Torres de Hanói"

El juego consiste en pasar todos los discos del poste ocupad, es decir, la que posee la torre de discos, a una de los otros postes vacantes. Para realizar este objetivo, es necesario seguir tres simples reglas:
1) Sólo se puede mover un disco cada vez.
2) Un disco de mayor tamaño no puede descansar sobre uno más pequeño que él mismo.
3) Sólo puedes desplazar el disco que se encuentre arriba en cada varilla.

El juego de las Torres de Hanói consiste en tres postes que serán indicados con las letras A, B y C, por lo general de izquierda a derecha, aunque el orden realmente no importa, es solo para poder referirnos a cada uno de los postes. El juego clásico contiene todos los discos en el poste A, estos son apilados en orden según su tamaño, estando el de radio mayor en la base de nuestra torre. Para referirnos a los discos, estos son numerados del 1 al 8, en el ejemplo de la diapositiva, por ser 8 discos totales, sabiendo que el disco 1 será el de la punta de la torre.

En mi caso especial, tome la instancia de 5 discos, así que para saber cuantos son el mínimo de movimientos requeridos para pasar toda la torre del poste A al C, se calcula con la formula (2^n)-1, donde n es el número de discos que tiene nuestra torre. En este caso por ser la torre de 5 discos tenemos que los movimientos mínimos necesarios para resolver esta torre es de 31 movimientos.

También podemos saber cuantas veces será necesario mover cada disco para resolverlo, y se tiene que el disco de la base, en este caso el 5, solo se mueve una vez. Esto va en orden de la potencias del 2, empezando del "dos a la cero", hasta llegar a "dos a la cuatro", que corresponde al disco 1, el más pequeño. Y para comprobar que si son los movimientos de cada disco, podemos sumar los movimientos de cada disco y nos dará en este caso 31, que es lo que calculamos con la formula.

Para darnos una idea del número de movimientos posibles y permisibles, empezamos con un solo disco para ejemplificar. En este caso solo se tienen dos posibilidades de movimiento si en un inicio se estaba en la torre A, podemos mover a la torre B o C.

Ahora vemos el ejemplo con dos discos, y ya nuestras opciones de movimientos se incrementaron. Podemos observar mediante los dibujos que se encuentran en cada nodo del árbol, como quedaría nuestras tres torres según el disco que movamos.

Desde que tenemos dos discos nos topamos en que si no se piensa correctamente los movimientos que haremos, podríamos entrar en un ciclo sin salida, ya que después de un movimiento es posible regresar al estado anterior, pero aquí el objetivo del juego es tener todos los discos en una torre diferente a la inicial.

En esta imagen podemos observar el árbol con todos los movimientos posibles y permisibles que un jugador lograría hacer en el caso de 5 discos, no se diga si se desea resolver uno de 8 discos o más.

Pero como ya mencionaba, el objetivo es realizar el mínimo de movimientos posibles, que ya calculamos para el caso de 5 discos, que nos resultó 31 movimientos de discos, y esto como se indica en la linea amarilla, es el camino para resolver la torre de 5 discos con solo 31 movimientos.

Representando los posibles movimientos como un grafo, siempre tendremos que la diagonal del costado derecho nos guiará a el mínimo de movimientos, que es ir de la torre A (punto verde), a la torre C (punto rojo).

Y por tener tantos posibles movimientos, es posible perderse en alguno de estos y guiarnos a un movimiento innecesario o repetido, lo que nos llevaría a no lograr el objetivo del juego.

En la imagen se observa el camino más largo que se puede tomar para llegar a la solución.

En siguiente enlace encontré muy buena información, y una explicación a detalle del juego, junto con algunas variantes:
Las torres de Hanói

Y si desean jugar un poco, les dejo otro enlace, donde pueden jugar desde 3 a 12 discos, o si lo desean también pueden observar los movimientos para resolver cierta torre con el número de discos que desees:
Mazeworks
Nota: Es probable que necesites instalar algún plugin.

26 nov 2010

Comandos del Terminal

En alguna de nuestras practicas del laboratorio de lenguajes estuvimos trabajando algunos comandos útiles desde el terminal, que en realidad son herramientas sencillas, pero son de gran ayuda. Estas herramientas entre algunas por mencionar son less, cut, sort, grep, sed, entre otros más.

Veamos para que sirven estas y otras herramientas más del terminal.

less
Nos permite visualizar el contenido de un archivo pero desde el terminal, y podemos usar las teclas de dirección hacia arriba y abajo para avanzar en el documento.
Desde mi terminal deseo mostrar el archivo prueba.c entonces se escribe así:

esteban@usb:~/Documents/> less prueba.c

Esta instrucción despliega el contenido dentro del terminal como en la imagen.

Y para salir basta con presionar la tecla Q.

cat
Se utiliza para concatenar archivos.

En la imagen anterior podemos ver que en la carpeta Documents tengo dos archivos con la extensión .dat los cuales unire con la herramienta cat, y estos serán enviados a un nuevo archivo al que llamo juntos.dat y por ultimo con la herramienta less veo como quedo el archivo.

sort
Se usa para ordenar lineas de texto y por defecto se ordenan alfabéticamente pero también es posible ordenar de forma numérica o a la inversa.

Ahora con el comando ls muestro los archivos que tengo en la carpeta. Luego igualmente con el comando ls y la herramienta sort muestro en orden alfabético los archivos dentro de la carpeta.

grep
Nos muestra en pantalla las líneas que contengan la palabra o parte de esta que es indicada junto a esta instrucción.

En el primer uso de grep pido que se muestren indicadas todas las letras mayúsculas del archivo datos.dat y en la instrucción siguiente solo muestra las letra A en mayúscula y minúscula.

sed
Lo podemos usar para cambias o sustituir ciertas partes del texto de un documento.

Ahora el texto que estoy imprimiendo en el terminal, pido que cambie la letra "m" por una "p".

cut
Nos permite cortar caracteres o cadenas de caracteres, y es usado para quitar aquellas cosas que no queremos de algún archivo en el archivo de salida.

El texto que imprimo en terminal, solo pido que me imprima desde el caracter 11 al 15.

echo
Este comando se utiliza para imprimir el texto que le indiques en la pantalla y junto con otras indicaciones lo podemos enviar a algún archivo.

man
Cuando no sabemos como usar algún comando del terminal podemos hacer uso de esta herramienta para que nos muestre que acciones podemos hacer con cierto comando.

ps
Mostrar los procesos que están ocurriendo en nuestra computadora.

La segunda imagen muestra todos los procesos en ejecución en el sistema.

kill
Se usa para terminar procesos del sistema.

Al presionar Enter en este caso mataría el proceso que tiene el PID indicado. Si el proceso no termina aun después de ejecutar lo anterior, podemos incluir un -9 para forzar al proceso a terminar.

ping
Nos permite saber el tiempo que tarda en viajar una pequeña cantidad de información de nuestra computadora a otra.

Para dar un ejemplo hice ping al servidor de la Wikipedia y podemos observar la velocidad en milésimas de segundo.

which
Nos muestra la ruta donde se encuentra cierto programa.

La imagen anterior muestra la ruta de algunos programas, importante para la ejecución de scripts por ejemplo en python donde es necesario especificar la ruta de nuestro interprete.

Keyboard shortcuts

Cuando estamos trabajando en Ubuntu, y queremos realizar acciones con mayor rapidez podemos hacer todo con nuestro teclado, sin necesidad de tocar el ratón o touchpad de nuestra computadora, cosa que nos hace perder valiosos segundos al trabajar.

Por ejemplo, si queremos desplegar el menú principal de nuestro panel superior, el método abreviado del teclado es Alt + F1.

Si queremos cambiar de ventana usamos Alt + Tab.

Para mover una ventana hacia otro lugar de nuestro escritorio Alt + F7.

Para minimizar la ventana activa Alt + F9.

Y para cerrar una ventana tenemos Alt + F4

Y el que me interesa más por el momento, Ctrl + Alt + T que nos abre un Terminal en nuestro escritorio.

Y estando en la ventana del Terminal tenemos también unos cuantos shortcuts útiles como:

Shift + Ctrl + N Para abrir otro terminal

Shift + Ctrl + Q Cerrar la ventana del terminal por completo

Shift + Ctrl + T Para abrir una pestaña dentro de la ventana

Shift + Ctrl + W Cerrar la pestaña actual

F11 Para ver el terminal en pantalla completa

Ctrl + + Hacer zoom in

Ctrl + - Hacer zoom out

Ctrl + 0 Restablecer al tamaño normal

Ubuntu cuenta con más shortcuts, estos los podemos encontrar en System > Preferences > Keyboard Shortcuts.

25 nov 2010

Terminal en Ubuntu

Todos los sistemas operativos derivados de Unix, GNU/Linux, disponen de un intérprete de órdenes o terminal que hace de interfaz entre el usuario y el propio sistema operativo.

Un terminal es una forma de acceder al sistema sin utilizar la interfaz gráfica, es decir, realizar todo tipo de tareas en formato texto. La forma de utilizar el sistema de este modo es mediante órdenes.

Estas ordenes se dan mediante comandos ya establecidos en el terminal.

Para acceder al terminal de Ubuntu, en el panel superior entramos en Applications > Accessories > Terminal

Al dar clic en Terminal se nos abrirá una ventana en nuestro escritorio, y es donde comenzaremos a trabajar.

Comandos más útiles:

cd = cambiar de directorio

user@ubuntu:~$ cd Documents
user@ubuntu:~/Documents$

cd .. = regresar al directorio anterior

user@ubuntu:~/Documents/Homework$ cd ..
user@ubuntu:~/Documents$

ls = mostrar una lista con las carpetas o archivos dentro del directorio actual

user@ubuntu:~/Pictures$ ls
logo.png tio.jpg yo.gif
user@ubuntu:~/Pictures$

ls –l = listado de archivos y carpetas con información sobre permisos, fecha de creación, tamaño

user@ubuntu:~/Documents$ ls -l
total 3105
drwxr-xr-x 2 ubuntu ubuntu 4096 2010-11-22 00:47 Homework
-rw-r--r-- 1 ubuntu ubuntu 1378063 2010-11-15 01:07 lenprog1.pdf
-rw-r--r-- 1 ubuntu ubuntu 808544 2010-11-15 01:08 lenprog2.pdf
-rw-r--r-- 1 ubuntu ubuntu 1057595 2010-11-15 01:11 lenprog3.pdf

mkdir = crear nuevo directorio

user@ubuntu:~/Downloads$ mkdir Music
user@ubuntu:~/Downloads$ ls
Music salsa.mp3
user@ubuntu:~/Downloads$

rmdir = eliminar un directorio

user@ubuntu:~/Downloads$ rmdir Music
user@ubuntu:~/Downloads$ ls
salsa.mp3
user@ubuntu:~/Downloads$

cp = copiar un archivo o directorio

user@ubuntu:~/Documents$ ls
hola.c prueba.txt
user@ubuntu:~/Documents$ cp prueba.txt copia.txt
user@ubuntu:~/Documents$ ls
copia.txt hola.c prueba.txt
user@ubuntu:~/Documents$

mv = mover un archivo o directorio, o cambiar el nombre de un archivo o directorio

user@ubuntu:~/Music$ ls
CarpetaBelanova Forever.mp3 TusOjos.mp3
user@ubuntu:~/Music$ mv TusOjos.mp3 CarpetaBelanova/TusOjos.mp3
user@ubuntu:~/Music$ ls
CarpetaBelanova Forever.mp3
user@ubuntu:~/Music$ cd CarpetaBelanova
user@ubuntu:~/Music/CarpetaBelanova$ ls
TusOjos.mp3
user@ubuntu:~/Music/CarpetaBelanova$

Estos son solo algunos de los tantos comandos que podemos usar desde la terminal, son los más sencillos, y creo que los primeros que debemos aprender a manejar cuando somos nuevos en Ubuntu.

Enlaces: Terminal - Guía Ubuntu

Lenguaje ensamblador

Uno de los lenguajes de bajo nivel es el lenguaje ensamblador, usado para crear programas informáticos. Este lenguaje es de bajo nivel dado que el código que se crea tiene que ser especifico al hardware de la máquina o computadora para la cual se hace el programa.

Este lenguaje es difícil de aprender -mas no imposible-, porque no usa términos que el programador pueda memorizar con facilidad como lo es con los lenguajes de alto nivel.

Cuando se crean programas con lenguaje ensamblador, estos tienen una velocidad mayor en su ejecución, ya que tienen un acceso directo a los recursos de la computadora, pero su portabilidad es mínima porque esta restringida a las especificaciones de cada computadora.

El lenguaje ensamblador fue usado mayoritariamente en los inicios del desarrollo de software, porque no se contaba aún con los lenguajes de alto nivel, sin embargo se sigue utilizando en ámbitos académicos y de investigación.

Lo malo del lenguaje ensamblador:

Es difícil entender el código escrito, ya que es muy cercano el lenguaje máquina.
La portabilidad es casi nula, debido a que hasta en computadoras con el mismo microprocesador se tienen que hacer modificaciones.

Lo bueno del lenguaje ensamblador:

Los programas creados suelen ser más rápidos.
Se consumen menos recursos del sistema.
Suelen ocupar menos espacio en disco.
Hay mayor control de las tareas que debe hacer el microprocesador.

Enseguida esta el código para nuestro querido programa Hola mundo! para un procesador x86:

.model small
.stack
.data
   saludo   db "Hola mundo!", "$"
.code
 
main  proc              ;Inicia proceso
   mov   ax,seg saludo  ;hmm ¿seg?
   mov   ds,ax          ;ds = ax = saludo
   mov   ah,09          ;Function(print string)
   lea   dx,saludo      ;DX = String terminated by "$"
   int   21h            ;Interruptions DOS Functions
   ;mensaje en pantalla
   mov   ax,4c00h       ;Function (Quit with exit code (EXIT))
   int   21h            ;Interruption DOS Functions
 
main  endp              ;Termina proceso
end main

El código no es mio, fue obtenido de una página que al final de la publicación se encuentra el enlace, pero lo pongo aquí para tener una idea de como sería programar en este lenguaje.

Afortunadamente contamos con lenguajes de alto nivel, que le hacen la vida menos complicada a los programadores, pero era necesaria esta entrada para conocer un poco los inicios de la programación.

Enlace: Hola mundo en ensamblador