XalalinuX Grupo de Usuarios de Linux de Xalapa

1Mar/091

Tutorial Básico (muy básico) de PyGTK

Últimamente he estado programando un poco con Python y pyGTK y me gustó la facilidad que tiene este lenguaje para crear intefaces de usuario. A continuación explicaré un pequeño tutorial sobre el desarrollo de un programa sencillo. Existe un muy buen tutorial en esta página http://www.pygtk.org/pygtk2tutorial-es/index.html . Muchas cosas que muestro aquí salieron de ese tutorial. La idea es generar una ventana que muestre una imagen, una etiqueta, un caja de texto y un botón. Al presionar el boton cambiará el contenido de la etiqueta, donde tendremos el siguiente resultado.

y el código para generar este programa es el siguiente:

try:
    import gtk
except:
    print 'Se necesita pyGTK para correr este programa'

class VentanaXalalinux(gtk.Window):
    ''' Ventana principal, es una clase que contiene
    otras clases '''

    def delete_event(self, widget, event):
        print 'Se genero el evento delete'
        return False
        # Si devuelve True no se cierra el programa

    def destroy(self, widget):
        gtk.main_quit()

    def __init__(self):
        # Constructor de la clase
        gtk.Window.__init__(self)
        self.connect('delete_event', self.delete_event)
        self.connect('destroy', self.destroy)
        self.set_border_width(0)
        self.set_title('-:: XalalinuX ::-')
        self.set_role('main')
        self.set_position(gtk.WIN_POS_CENTER)
        # Se agrega el contenedor principal
        self.contenedor = gtk.VBox()
        # Cargamos una imagen
        self.imagen = gtk.Image()
        self.imagen.set_from_file('logo-xalalinux.png')
        self.contenedor.pack_start(self.imagen, True, True)
        # Creamos una etiqueta y le damos formato
        self.LMensaje = gtk.Label()
        self.LMensaje.set_markup('Etiqueta modificada ')
        self.contenedor.pack_start(self.LMensaje, True, True)
        # Creamos un contenedor horizontal para poner
        # una caja de texto y un boton
        self.hbox = gtk.HBox()
        self.Entrada = gtk.Entry()
        self.Boton = gtk.Button(stock=gtk.STOCK_APPLY)
        self.Boton.connect('clicked', self.modificar_etiqueta)

        self.hbox.pack_start(self.Entrada, True, True)
        self.hbox.pack_start(self.Boton, False, False)
        self.contenedor.pack_start(self.hbox, False, False)

        self.add(self.contenedor)
        self.show_all()

    def modificar_etiqueta(self, widget):
        texto = self.Entrada.get_text()
        self.LMensaje.set_markup(''+ texto + '')

    def main(self):
        gtk.main()

if __name__ == '__main__':
    ventana = VentanaXalalinux()
    ventana.main()

Este programa se puede descargar de aqui y el logo de aqui. Para correr el programa deben darle desde la terminal

python xalalinux.py

Aqui viene la explicación de cada parte. Al inicio del programa importamos el modulo gtk que es el que nos permite generar todos los objetos para la interfaz gráfica. En Python TODOS los elementos son objetos y siempre se debe pensar en ellos como objetos. Aqui sólo creamos una clase llamada VentanaXalalinux que se hereda de la clase gtk.Window, es decir VentanaXalalinux es una clase gtk.Window (más lo que nosotros le agreguemos), osea una ventana.

class VentanaXalalinux(gtk.Window):

Cuando creamos un objeto de la clase VentanaXalalinux primero se llama al constructor que se encarga de inicializar al objeto. En este caso en el constructor dibujamos toda la ventana. Primero llamamos al constructor de la clase gtk.Window. Esto es para tener acceso a todos los atributos de la clase.

gtk.Window.__init__(self)

Luego definimos algunas propiedades en particular. Primero se conectan eventos generados con las funciones definidas en la clase.El evento delete_event se genera el cerrar la ventana. Cuando se cierra la ventana se ingresa a la funcion self.delete_event que devuelve un valor False, si esta función devuelve un valor True el programa no terminará, esto sirve para poner dialogos de "Seguro que desea salir" dentro de esa funcion. Si devuelve False se genera el evento destroy y se termina la aplicacion.

self.connect('delete_event', self.delete_event)
self.connect('destroy', self.destroy)

Posteriormente cambiamos algunos atributos de la ventana como el titulo, si se trata de la ventana principal el borde y la posición en la pantalla.

self.set_border_width(0)
self.set_title('-:: XalalinuX ::-')
self.set_role('main')
self.set_position(gtk.WIN_POS_CENTER)

Ya con la ventana definida ahora se agregan los controles que tendrá la ventana. Cuando vamos a utilizar varios controles, en GTK es necesario empaquetarlos para distribuirlos en la ventana. Primero agregamos una caja vertical que será el contenedor principal del programa.

self.contenedor = gtk.VBox()

y comenzamos a agregar controles dentro de ese contenedor. En este ejemplo quise cargar una imagen. Se debe tener una imagen con ese nombre en el mismo directorio donde se ejecuta el programa.

self.imagen = gtk.Image()
self.imagen.set_from_file('logo-xalalinux.png')
self.contenedor.pack_start(self.imagen, True, True)

La última línea agrega la imagen al contenedor. Ahora creamos una etiqueta con el texto formateado y la agregamos al contenedor.

self.LMensaje = gtk.Label()
self.LMensaje.set_markup('Etiqueta modificada ')
self.contenedor.pack_start(self.LMensaje, True, True)

Para poner la caja de texto junto con el boton necesitamos otro contenedor pero ahora horizontal. Y ahora agregar la caja de texto y el boton a ese contenedor horizontal. Tambien asociamos el evento clicked a la funcion self.modificar etiqueta para que siempre que se de click al boton se ejecute esta funcion

self.hbox = gtk.HBox()
self.Entrada = gtk.Entry()
self.Boton = gtk.Button(stock=gtk.STOCK_APPLY)
self.Boton.connect('clicked', self.modificar_etiqueta)

self.hbox.pack_start(self.Entrada, True, True)
self.hbox.pack_start(self.Boton, False, False)
self.contenedor.pack_start(self.hbox, False, False)

Por ultimo agregamos el contenedor a la ventana y mostramos todos los widgets.

self.add(self.contenedor)
self.show_all()

La funcion modificar_etiqueta sólo toma el valor de la caja de texto y la concatena con el codigo de formato para la etiqueta. Por ultimo aqui es donde creamos y ejecutamos nuestro objeto. La funcion main() se encarga de comenzar con el programa.

if __name__ == '__main__':
    ventana = VentanaXalalinux()
    ventana.main()
10Dec/082

Mi archivo .emacs

Emacs es uno de los editores más poderosos que hay. Es toda una plataforma de desarrollo que puede ser tan compleja como nosotros querramos. Este es el editor que uso y me funciona muy bien para las tareas que hago.

No explicaré como se utiliza emacs, sólo les compartiré mi pequeño (y si, es muy pequeño comparado con otros que he visto) archivo .emacs. Es por este archivo donde se definen las configuraciones del editor. A mi me gusta tener el resaltado de sintaxis y el asistente de indentación que solito acomoda el codigo.

Los colores del resaltado de sintaxis son de un tema del paquete emacs-goodies-el instalable en debian/ubuntu.

Este es el archivo en cuestión.

; Archivo .emacs de Erich Cordoba
; erich.cm en gmail.com

(setq search-highlight t)
(setq query-replace-highlight t)

(require 'cc-mode) ; Modo para C/C++

(setq default-fill-column 77)
(add-hook 'text-mode-hook 'turn-on-auto-fill)
(add-hook 'c++-mode-hook 'turn-on-auto-fill)
(add-hook 'c-mode-hook 'turn-on-auto-fill)

; No agregar lineas vacias al final
(setq next-line-add-newlines nil)
(require 'paren)

; No sangra si estamos en literales
(setq c-tab-always-indent "other")
; Espacio en lugar de tabuladores.
(setq-default indent-tabs-mode nil)

(set-default-font "-bitstream-bitstream vera sans mono-*-r-normal--*-120-*-*-*-*-iso8859-*")
(require 'color-theme)
(setq color-theme-is-global t)
(color-theme-calm-forest)
(setq transient-mark-mode 1)
5Dec/080

Cerebros 2.0

A través de los años internet ha ido revolucionando la forma en que nos comunicamos, la forma en que nos relacionamos y hasta la forma en que vivimos; sin embargo cuando se pensó que estaba por demás establecido el concepto y definida la finalidad de la Web nos asombra con una serie de fenómenos en la red: youtube, blogger,flickr,Del.icio.us,GoogleMaps,Wikipedia,Gmail,Technorati por mencionar algunos.Pero….¿Que es la Web 2.0?

Según la Wikipedia es una segunda generación de Web basada en comunidades de usuarios y una gama especial de servicios, como las redes sociales, los blogs, los wikis o las folcsonomías, que fomentan la colaboración y el intercambio ágil de información entre los usuarios.

Es decir; la nueva generación de servicios a través de internet está cambiando, si antes las páginas en internet eran un depósito de lineas y lineas de información hoy son sitios basados en la retroalimentación por parte del usuario, sitios que le dan al usuario una importancia que antes no tenia,páginas que invitan a una plática entre el dueño y el usuario; a través de blogs, foros de discusión, Wikis, etiquetas, comentarios, votaciones y una serie de características que hacen que te sientas cómodo participando, clasificando,seleccionando,recordando y por tanto creando una participación activa en internet.

Tú, como empresa,vendedor,comerciante o informàtico deberias replantearte tús métodos tradicionales de llegar a la gente; primero: si no tienes presencia en internet ya deberias estar gestionando tu lugar ¿o no quieres sumarte a las nuevas tecnologías, pero sobre todo a la revolucionaria forma de relacionarnos?

Segundo, si tienes presencia en internet cerciorate de que tu presencia sea agradable, colaborativa, interesante y acorde a la tendencia de red social.

Y por último; nosotros como informàticos tenemos la tarea de ofrecer nuestros servicios de forma visionaria, que nuestros conocimientos esten actualizados, que trabajemos en base a tendencias y planes actuales, y sobre todo que sobre la mesa coloquemos la mejor idea para un sitio, un sistema o cualquier tipo de servicio.

En realidad la Web 2.0 no es una tecnología o una moda pasajera sino toda una forma de convivencia totalmente nueva, una revolución social, no te la pierdas; en internet hay multitud de ejemplos de éxito de este tipo de sitios: vemos por ejemplo a Facebook, myspace, hi5, sonico..... ¡y hasta la horrible Metroflog!!! tiene miles de usuarios. Súmate al cambio y piensa con un cerebro 2.0 como lo hacen en los paises desarrollados; comenta,vota,escribe,califica,selecciona,etiqueta,genera información valiosa.

Es más si has leido hasta aqui ya deberias estar empezando a crearte una cuenta en la red social de tu preferencia o si tus labores tienen que ver con los sistemas que mueven al mundo pues create un blog sobre algun hosting barato o mòntalo sobre wordpress, blogger etc. creeme!!! el futuro de internet es convertirse en una Red totalmente Social en donde hasta el sistema operativo y todos nuestros datos estaràn en internet.

Porsupuesto que el sistema del pinguino y todo el software libre han tenido que ver mucho en esto, si la Red no fuera neutral seguramente no se habrian dado estos impresionantes desarrollos que vivimos hoy en dia.

¿Te vas a quedar sentado viendo como los demás interactúan en la red y tù como si nada?

  • Crea tu lista de preferencias musicales en lastfm.com
  • Sube y comparte tus fotos a Flickr o Picasa.
  • Anota lo que haces en todo momento y ponte a Twittear.
  • Empieza a escribir tu blog en blogger o montándolo con WordPress quizás.
  • Marca tus páginas favoritas y compártelas en Del.icio.us.
  • Despeja tus dudas en la Wikipedia.

…Y un largo etcétera.

Filed under: Desarrollo, Linux, Web No Comments
20Nov/080

Colorzilla

Si unos post atrás nos presentaban la navaja suiza del desarrollador web aqui les presento otra estupenda herramienta a la hora de diseñar o desarrollar sitios web, se llama colorzilla, es de esas utilidades que la conoces y no la puedes dejar; porsupuesto, funciona como extension de firefox.

Colorzilla

Colorzilla

Colorzilla es un selector de color principalmente además de traer otras "pintorescas" utilidades como un zoom. Yo cuando estoy desarrollando
algun sitio y necesito algo de inspiración en cuanto a color, lo que hago es buscar uno de esos sitios que contiene galerias de las mejores páginas de todo el mundo, luego entonces, encuentro esa fantástica combinación de colores que le vienen bien al mio.

¿Pero como saber que color es?

Antes, hacia una captura de pantalla y la imagen la abria con el Gimp, luego usaba el cuentagotas y averiguaba que color era, para posteriormente insertar el código de color en el html.
Para los que no lo sepan, en el monitor los colores se forman de una combinación de Rojo Verde y Azul que en inglés es RGB  O Red, Green, Blue; por lo tanto el código de un color en html se representa en las cantidades en hexadecial que se le den- en ese orden- a estos tres colores básicos.

Asi el rojo se representa como #ff0000, el verde: #00ff00 y el azul: #0000ff...................... ¿ fácil no?

Ahora, simplemente voy a la esquina inferior izquierda, doy un click en el cuentagotas de colorzilla y luego un click en el área de color del sitio que me interesa, y automáticamente me devuelve el código de color que necesito.
En la imagen estoy capturando el color amarillo del logo de xalalinux.

Yo al menos con Firebug, Webdeveloper y colorzilla; todo sobre firefox, no me ha hecho falta nada más.

Y tu, con que desarrollas, desarrollaste o desarrollarás?

24Oct/083

Android una realidad…

Muy buenas noticias para todos los amantes de las tecnologías móviles e interesados en el desarrollo de las mismas, recientemente me entenero que T-Mobile ha lanzado a la venta el tan esperado primer SmartPhone powered by Android llamado G1 el cual como es de esperarse revolucionará la industria de los móviles, comenzando con la noticia del día anterior de su lanzamiento al mercado donde Google anuncia la liberación del código de Android.

Para los que estan familiarizados con el tema Android es un sistema operativo para móviles desarrollado por Google basado en Linux bueno ellos lo definen como:

Android is the first free, open source, and fully customizable mobile platform. Android offers a full stack: an operating system, middleware, and key mobile applications.

Así es que si alguien tiene la posibilidad de conseguir los G1 yo quiero uno!! =p

De momento ahí esta todo!! que comience el hack!! xD

Tagged as: 3 Comments
12Oct/083

Firebug – La navaja suiza del desarrollador web

Muchas de las veces al estar creando o modificando alguna página web nos topamos que en varias ocaciones no todo funciona como quisieramos, ya sea que los javascripts tengan errores o la estructura de la página aparezca descuadra por cuestion de una mala implementación de los css, etc. y a diferencia de que cuando uno desarrolla una aplicación para el desktop donde se cuenta con debuggers y otras herrarmientas para análisis de errores, para el web por lo regular resulta un poco mas complicado detectar y corregir estos problemas por no contar con herramientas como esas - aun cuando mucho del desarrollo de hoy en día esta orientado al web - es por ello que quiero compartir Firebug con todos aquellos que no lo conocen.

Firebug es una excelente herramienta que nos permite analizar, detectar y reparar este tipo de problemas desde nuestro navegador. Firebug es una extensión de Firefox, la cual cuenta con multiples herramientas como son: El inspector de HTML, analizador y debuggeador de Javascript, explorador DOM entre muchas más para poder editar,  debuggear y monitorear el comportamiento de nuestra página web, solo basta con ejecutar el inspector y seleccionar el objeto a analizar para que nos muestre todas sus propiedades, dandonos la oportunidad de modificarlas al vuelo para analizar el comportamiento de la misma con los cambios que vayamos realizando.

Es iimportante mensionar que Firebug actualmente funciona con Firefox y existe una versión (no muy buena) para aquellos que usan o necesitan testear su trabajo en IE :-p, en lo personal me gusta mucho Opera y también cuenta con una herramienta similar llamada Dragonfly pero aun esta un poco verde a comparación de lo que hace Firebug.

Espero les sirva de ayuda para futuros desarrollos. ;-)