Impresiones con Visual Basic 2010

Pese a que vivimos en una era digital y todo (bueno, casi todo) se hace por internet y con la computadora, aún hay momentos en que el papel es necesario.  Hace tiempo escribí un post donde indicaba cómo imprimir usando Visual Basic 6, pero no había tenido la oportunidad de hacer lo mismo con el Visual Basic .net.  Y eso precisamente es lo que pienso hacer en esta ocasión: mostrar como usar los controles y cajas de diálogo para imprimir y la forma de imprimir tanto texto como imágenes.

Antes de continuar con rollo, código, ejemplos y demases, voy a describir brevemente los componentes que tiene Visual Basic 2010 para imprimir.

Control PrintDocument

Este control se debe agregar a cualquier proyecto en el que se quiera imprimir algo.  Haz de cuenta que es la hoja en blanco donde puedes dibujar diferentes objetos, escribir texto y colocar imágenes de mapa de bits.  Cuando acabes de dibujar, escribir, etc., se llama el método Print para que la impresora escupa la hoja.  Acepta todos los métodos de dibujo que usa el objeto Graphics (mismo del que di ejemplos aquí y aquí), es decir que si tienes que escribir texto, usas el método DrawString; si quieres dibujar un marco alrededor del texto, puedes usar DrawLine o DrawRectangle.  Aunque el control es invisible (no aparece en la ventana ni hay forma de ir viendo conforme se va dibujando), es muy útil.

Control PrintDialog

Este control hace aparecer la ventana default que te permite elegir y configurar la impresora que se desea emplear.  Si no se usa, la impresión se hace en la impresora que se tiene definida como default con las propiedades que trae por default (o sea con lo default de lo default ).  Para que aparezca, se debe usar el método ShowDialog.

Control PageSetupDialog

Este control hace aparecer la ventana que te permite configurar el papel a usar: tamaño, orientación, márgenes, etc.  Se debe usar su método ShowDialog para que aparezca, igual que con el control PrintDialog.

Control PrintPreviewDialog

Este control hace aparecer una vista previa de lo que se va a imprimir.  Como mostraré más adelante, se debe vincular este control con lo el control PrintDocument para que todo lo que se va a imprimir, en lugar de ir a la impresora, aparezca en esta ventana.  También hay que tener cuidado: si no se tiene acceso a la impresora que está seleccionada (por ejemplo, una impresora de la red a la cual no tengo acceso en este momento o la que tengo conectada está apagada), no aparece la ventana y te marca error.  Es necesario recibir este error (con un Try…Catch) para que no termine abruptamente el programa solo porque no halla la impresora (cosa que no hago en este post, por cierto).

Ejemplo de su uso

Después de este rollo (que espero que haya sido breve), voy a ejemplificar el uso de estos controles en un programa que hice con mis queridísimos alumnos de 4TPO.  Es un ejemplo muy simple que solo muestra como se usan los controles.  Sin embargo, creo que con estas bases ya le pueden echar vuelo a la imaginación para aplicarlo en otros contextos.

Antes que nada, les muestro el diseño de la ventana principal.  Consta de 3 etiquetas, 3 cajas de texto (txtNombre, txtDir y txtRFC), un PictureBox (picCanoa) que sirve para mostrar como imprimir una imagen de mapa de bits, 7 botones cuyo código explicaré más adelante, 2 controles PrintDocument, un PrintDialog, un PageSetup y un PrintPreviewDialog.  Estos 5 últimos no aparecen en la ventana: cuando los agregas a la ventana aparecen en la parte inferior.

Para que un PrintDocument funcione, es necesario editar su evento PrintPage.  Si le das doble clic al icono PrintDocument1, verás este código:

Básicamente uso el parámetro e, que es “la hoja invisible” sobre la que voy a dibujar, para escribir 3 cadenas, un rectángulo y la imagen de la canoa.  Como mencioné con anterioridad, son las mismas funciones que se usan para dibujar gráficos sobre la ventana cosa que ya escribí en este post y en este también.

Una vez que tienes este evento listo, puedes mandar imprimir con la función Print.  Yo lo hago con el botón cuya etiqueta dice Imprimir y este es el código:

El PrintDocument2 muestra una idea para imprimir formatos.  Dibujé el esqueleto de un formato, lo guardé como PNG, lo importé a Visual Basic y lo puse en un PictureBox (llamado PictureBox1) en la ventana frmPicts.  Aquí está la ventana frmPicts y abajo el código que lo usa (primero el el botón que tiene la etiqueta Imprimir formato, btnImprime2, y luego PrintPage).

Configurar la impresora es muy simple usando el control PrintDialog.  Este es el código del botón con la etiqueta Configurar impresora.  Fíjate en la manera en que copio las propiedades puestas por el usuario en este cuadro de diálogo en los dos controles PrintDocument (en las 2 últimas instrucciones):

A la hora de ejecutarse, el control PrintDialog hace que aparezca esta ventana:

También es sencillo modificar la configuración de la página.  Este es el código del botón etiquetado Configurar página:

Antes del ShowDialog es necesario igualar sus propiedades a los que ya tiene un PrintDocument (en las dos instrucciones que siguen al comentario).  Al correr este evento, aparece esta ventana:

Una vista previa (o presentación preeliminar) de lo que se va a imprimir suele ser bastante útil para muchos usuarios.  Hacer que aparezca es sencillísimo.  Lo único que hay que hacer es hacer que, en lugar de que el evento PrintPage de un PrintDocument lo mande a la impresora, se le envía a esta caja de diálogo.  Abajo pongo el código y luego la ventana que aparece que muestra la vista preeliminar:

También es posible jugar con la configuración de la impresora.  Para leer algunas propiedades de las impresoras, hice el botón etiquetado Lista de impresoras que abre la ventana frmImpresoras desde donde se pueden ver la lista de impresoras instaladas y al seleccionar una de ellas, se ven algunas de sus propiedades.  Esta es la ventana frmImpresoras en la vista diseño:

Tiene una lista donde voy a escribir la lista de impresoras (ListBox1), etiquetas que muestran los valores de las copias, si es duplex (si puede imprimir por ambas caras de la hoja), el número máximo de copias permitidas y si puede recibir documentos a color (lblCopias, lblDuplex, lblCopiasMax y lblColor, respectivamente).  También es necesario un PrintDocument para poder ver estas propiedades.  Pero antes que nada, veamos el código con que llena ListBox1:

Nótese que estoy haciendo uso de la colección Printing.PrinterSettings.InstalledPrinters misma que contiene la lista de todas las impresoras instaladas en el equipo donde se está ejecutando.  Estoy usando la instrucción With para abreviar un poco y no escribir este rollo a cada rato.

No necesito escribir un evento PrintPage para el PrintDocument1 porque no voy a imprimir nada: solo lo necesito para poder mostrar las propiedades.  Por esta razón el otro código interesante es el que se ejecuta cuando ListBox1 cambia de elemento seleccionado:

Este es un ejemplo de como se ve esta ventana con una impresora seleccionada:

Espero que este documento te sea útil.  ¡Hasta la próxima!

P.D. La imagen que usé de la impresora verde fue hecho por OCAL.  De gran ayuda para elaborar este post fue el siguiente libro:

Tutoriales de Photoshop: Mayo 2011

Hace tiempo que había comenzado a compartir los mejores tutoriales de Photoshop (bueno, los que yo me había encontrado y consideraba buenos), pero por alguna razón, después de julio del 2010 ya no le seguí (claro que recién había comenzado en mayo, los anteriores los hacía en un post diferente).
Aquí les dejo algunos tutoriales con los que me he topado que creo que son muy buenos.  ¡Que los disfruten!

Crear un chuchillo
(PSDTuts)

Casita de Madera
(PSDTuts)

Saltador de nubes
(Tutorial9)

Tarjeta de presentación tipo caricatura
(Spryrestudios)

Personaje de la película “Mi villano favorito”
(PSDTuts)
Nota: este tutorial también hace uso de Ilustrador (pero como me encanta la película, no pude dejar de ponerlo)

Porsche de naranja (aplicar una textura a un objeto) 
(AlfoArt)

Efecto de texto interesante 
(PSDFan)

 
Letras en forma de galletas 
(Abuzeedo)

Bosque encantado 
(Ucoz)

Campo de flores 
(PSDBox)

Mini iMac 
(Photoshop Plus)

Tour de blogs, parte II

Y sigo haciendo tour para que mis alumnos se diviertan durante sus vacaciones, jeje.  Este es otro formulario para complementar la visión que tienen acerca de los blogs del post anterior para mis queridos alumnos de 2B TCM, 2C TCM, 2 TCB y 6 TIA.  ¡Se divierten!

-----------------------------------------

Práctica sobre Blogs, parte I

En esta ocasión, en lugar de ser un post sobre tecnología, programación, videojuegos u otro tema de los que estás acostumbrado a leer en este blog, voy a poner un formulario que es una práctica para mis alumnos de 2B TCM, 2C TCM, 2 TCB y 6 TIA.

Si alguien más quiere vagar por los blogs, ¡adelante!

------------------------------------------------------

¿Por qué usar Google Docs?

En mi post anterior, hice un video que da una introducción a Google Docs.  Pero tal vez la pregunta sea, ¿por qué lo debo usar?  Hay muchas razones, pero prefiero que el ilustre doctor en física cuántica y cosas afines Sheldon Cooper muestre lo que pasa cuando confías en una memoria USB cuando pudieras resolver tus problemas usando Google Docs.

Google Docs: una introducción

Hace como 3 años les compartí algo acerca de Google Docs, pero desde entonces ha mejorado mucho, tiene muchas funciones muy interesantes.  Por esa razón creo que amerita hablar de ello.  Se ha vuelto una opción viable para trabajar, no solo de forma individual, sino de forma colaborativa con otros independientemente del lugar donde estén.

Aquí les dejo un video introductorio que introduce a la introducción de lo introducido.  Bueno, hablando en serio, es un repaso rápido de algunas características de Google Docs; concretamente de trabajar con el procesador de palabras, compartir el trabajo con otros (ya sea para que lo modifiquen o solo puedan verlo), guardarlo a tu computadora, etc.

Espero que lo encuentren de utilidad.  También puedes ir a Google Docs aquí y comenzar a aplicar lo que aparece en el video.  Espero poder hacer otros videos mostrando otras capacidades y características de Google Docs en un futuro no muy lejano.  Espero que les sea útil.  ¡Saludos!

Una introducción a Google Docs from Tony Valderrama on Vimeo.

Spry Menu… poniéndole colorcito…

Hace unos días describí la manera de crear Spry Menus usando Dreamweaver.  Lo único que haría falta para que esos menús se vean profesionales es poder cambiarles tipo de letra, el color y el tamaño del menú para que estén estéticamente mejor.  En otras palabras, no solo debe ser útil sino que también debe estar bonito.

Voy a seguir editando el sitio que hicimos en el post anterior.  Voy a expandir el menú CSS de lado superior derecho de la ventana de Dreamweaver.  Si no aparece, lo puedes ver haciendo clic en el menú Window/CSS Styles.  La ventana es esta:

Es aquí donde puedo alterar la apariencia de cualquier elemento CSS (en nuestro caso, solo aplica al menú).  Antes que nada, voy a cambiar el ancho del menú.  Para esto, busco el estilo ul.MenuBarHorizontal porque esta regla define el estilo de todo el menú.  Abajito de este, está ul.MenuBarHorizontal li como puedes observar en la figura.  Esta regla solo afecta a los botones en el primer nivel (es decir que cambiar el ancho aquí no afecta el tamaño de los submenus).

Si le doy doble clic sobre ul.MenuBarHorizontal li, aparece la siguiente ventana que me deja modificar el formato:

Como puedes ver, puedo modificar el tipo de letra (en la propiedad Font), pero primero voy a cambiar el tamaño de la barra.  Para esto, hago clic sobre la opción Box y la ventana se ve así:

Aquí hay trabajo de prueba y error para dejar el menú del ancho deseado.  Cambia la propiedad Width (y a mi se me hizo más fácil cambiar también la unidad de medida a Pixels) hasta que quede como quieras.  En mi caso, como solo son dos opciones, no le cambié mucho que digamos: escribí que cada opción tenía ancho de 150 pixeles.

Ahora voy a cambiar las reglas ul.MenuBarHorizontal ul (cambia la li por ul) y la ul.MenuBarHorizontal ul li para cambiar el ancho de los submenus.  La ventana es casi igual (cambio la propiedad width dentro de la pestaña Box).  Con esto ya cambié el ancho de todos los menús y submenús habidos y por haber en mi Spry Menu.  Ahora mi página Web se ve así en la vista diseño (nótese que también cambié la propiedad Font como dije anteriormente):

Si observas bien, verás que se ve bien el menú, si lo previsualizas en un navegador verás que funciona de maravilla.  Sin embargo, tiene un color gris horroroso que no combina con el resto de mi página.  Así que es hora de cambiarlo.  Para hacer esto, debo modificar varias reglas para cambiarlos todos al mismo color de fondo y del color que va a tener cuando pasa el mouse por encima.  Básicamente las reglas que hay que cambiar son estos:

• ul.MenuBarHorizontal a – cambiando este color Background, cambia el color en todos los niveles de submenús.
• ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible – (¡ah pa’ nombrecito cortito) controla como se ve cuando el mouse pasa por encima.  Hay que cambiar la propiedad Background color de la pestaña Background como se ve en la siguiente figura.  Yo le puse un azul más oscuro, pero puedes elegir el que quieras.  Modificando la propiedad Background image puedes sustituir el color por alguna imagen (solo ten en cuenta el tamaño del botón cuando hagas la imagen).

¿Y cómo se ve esto?  Así se ve mi página en la vista diseño y posteriormente en Firefox cuando estoy seleccionando una opción del submenú más alejado (mi navegador favorito).  Espero que esto te haya sido de mucha utilidad.  ¡Nos vemos!

Microsoft Mathematics 4.0… ¡gratis!

Tal vez esto no sea una noticia nueva, pero creo que les puede ser de utilidad, sobre todo para los que batallan con matemáticas.

Tal vez te sobre el dinero y decides comprar una calculadora TI-84 u otra calculadora similar (o tal vez te obligaron a comprar una), pero si tienes una computadora cerca (cosa que probablemente no te van a dejar usar en un examen de matemáticas… pensándolo bien, tal vez comprar la calculadora no es tan mala idea), puedes usar Microsoft Mathematics 4.0.

Te sirve tanto para operaciones sencillas como para álgebra, precálculo, geometría y trigonometría (entre otros).  Está muy padre y es buena onda de Microsoft de regalarlo (antes vendían este producto).

Si te interesa, ve a esta página para descargarlo.  Funciona para Windows de 32 o 64 bits, así que asegúrate de saber cuál es tu versión de Windows antes de descargar.  La imagen del software en operación la bajé del blog de UpFlySoft.

Menus Chuvidubis con Dreamweaver (Spry Menu)

Es muy común ver menús interesantes en diferentes páginas güev.  Antes del advenimiento de los estilos CSS, solo podía hacerse en Flash.  Pero ahora Dreamweaver puede hacer menús bastante interesantes… tal vez no tienen la misma calidad gráfica que los de se pueden hacer con Flash, pero igual de funcionales.

Estos son los famosos Spry Menus.  Spry signfica ágil, algo que se mueve de forma ligera y rápida.  Pero en lo referente a sitoos web, parece que es un estándar propuesto por Adobe para crear contenido dinámico en páginas web.  Para los que gustan de explicaciones más técnicas, Spry framework es una biblioteca programada en Javascript que provee la funcionalidad que ofrece AJAX (nada que ver con el jabón) que permite crear páginas Web 2.0 de forma sencilla.  Si quieres ver una galería de ejemplos, visita los demos de Adobe.

A continuación presento un tour paso por paso de lo que hay que hacer para crear un menú Spry.

Antes que nada, comencé con una página nueva en un sitio (que ahorita no tiene nada).  Puse una imagen y modifiqué sus propiedades para que no se viera tan feo.  Posicioné el cursor abajo de la imagen.  Hasta ahorita, mi ventana de Dreamweaver se ve así:

Para insertar un menú Spry hay dos formas: voy al menú Insert, Layout Objects y Spry Menu Bar como se ve en la siguiente figura:

También puedo ir a la pestaña Spry y doy clic sobre Spry Menu Bar como se ve en esta figura (hay un círculo rojo alrededor de la opción Spry Menu Bar):

Independientemente de cual de las formas prefieras seleccionar esta opción, aparece una ventana como esta que te pregunta la distribución del menú.  En mi caso voy a elegir la opción horizontal:

Al presionar Ok mi página se ve así:

Y la barra de propiedades se ve así:

Lo primero que voy a hacer es llenar el menú con las opciones que quiero.  Dreamweaver automáticamente lo llena con Item 1, Item 2, etc. pero todo el mundo debe cambiarlo (al menos que su sitio web tenga una página “Item 1”, otra cuyo tema sea “Item 2”, etc.).  Esto se hace de forma sencilla: mientras tengo el menú Spry seleccionado, hago clic sobre el elemento que quiero cambiar (en este caso, “Item 1”) y luego cambio el texto en la propiedad Text.  Al dar Enter después de escribir el nuevo valor, se actualiza mi menú.  La barra de propiedades se ve así:

De igual manera puedo cambiar el resto de elementos.  Si quiero eliminar alguno, lo selecciono y presiono el botón –.  Si quiero agregar uno nuevo, presiono el botón +.  Y puedo seleccionar un elemento y usar los triángulos hacia arriba y hacia abajo para cambiar el orden en el que aparecen.

Al terminar de modificar estas opciones, el panel de propiedades se ve así (aunque no ponga la imagen, también se ven estos cambios en la vista diseño de mi sitio):

Si te fijas, tengo 3 ventanas de opciones.  Estas permiten que tenga un menú principal y hasta 2 subniveles.  En mi caso, voy a modificar las opciones de Sitios (que tiene las opciones Item 1.1, Item 1.2 e Item 1.3) para poner vínculos a mis sitios.  Cambiar nombres se hace igual que como expliqué con anterioridad, solo que ahora voy a cambiar la propiedad Link.  Así se ve con el primero cambiado:

Fíjate que en Link puse la dirección de la página que quiero abrir.  Como no es parte de este sitio, tuve que anteponer http:// a la dirección.  En el campo Target escribí _blank para que lo abra en otra ventana o pestaña (de acuerdo a la manera en que tengan configurado el navegador), pero si pongo _self o lo dejo sin nada lo abre en esta misma ventana.

Cambié el resto de los elementos y así quedó mi ventana de propiedades (todos los URLs que escribí con Link no se ven completos, pero los escribí bien):

Y la página en vista diseño se ve así (bueno, solo puse un pedazo de la ventana del sitio: el único que cambió):

Con el menú de Archivos voy a usar todos los submenus posibles. El primero es el que dice Archivos, va a tener 3 submenus: PDF, DOC y PNG, y adentro de cada uno de estos va a haber ligas para bajar a diferentes archivos.  Antes de hacer esto, copié unos cuantos archivos a mi sitio (se copian a la misma carpeta donde tienes almacenado tu sitio).  Organicé los archivos en carpetas correspondientes para que no hubiera demasiado relajo en mi sitio.  La ventana del sitio quedó así:

Fui agregando los submenus de la misma manera en que lo hice con anterioridad, solo que en esta ocasión las ligas (propiedad Link) son internas, es decir, liga a archivos que están en el sitio.  Por esto, en lugar de escribir un link comenzando con http://, presioné el botón de carpeta que está de lado derecho del campo Link para seleccionar el archivo deseado.  Cuando terminé la ventana de propiedades quedó así:

Para poder previsualizar mi sitio, tengo que guardar la página.  Cuando lo intento guardar, me aparece una ventana que te dice que necesita copiar unos archivos a tu sitio para que funcione el menú Spry.  Como no te queda de otra, presiona Ok.

Cuando visualices la página, verás como funciona todo a la perfección.  Ahora solo falta cambiar el tamaño del menú y el color de fondo.  Pero eso será en la siguiente ocasión.

Fotos semestre Agosto-Diciembre 2010

Perdonen la tardanza con las fotos, pero de todos modos les agradezco compartir ideas y locuras conmigo el semestre pasado.  Aquí están las fotos que nos tomamos en la última semana de clases (hagan clic sobre las imágenes para verlas con mejor resolución).

1er semestre Técnico en Mercadotecnia (1MKT)
TICs

1er semestre Técnico Comunicación Bilingüe
TICs

3er semestre Técnico Informática Administrativa
Algoritmos y Programación

3er semestre Técnico Programador
Principios de Programación

Se me cuatrapeó lo de la foto, pero les dejo la foto de cuando estaban en 2do.  Sorry , pero los quiero por igual .  Sirve que salen en la foto algunos ausentes .

5to semestre Técnico Programador
Estructura de Datos y Lenguaje Visual Basic

5to semestre Técnico Comunicación, grupo A
CTSV III

5to semestre Técnico Comunicación, grupo B
CTSV III

El último día estaban con la puerta en reparación y con los directores paseando por el pasillo.  Me puse nervioso y no la tomé, pero voy a buscar la foto que tengo de ustedes cuando les di clases en primer semestre que por allí tiene que andar en un respaldo.

El Rap de Photoshop

Hace tiempo, gracias a las ideas de algunos alumnos, hice mi primera incursión al Rap mediante el Rap del C++ (música y letra aquí y el video está aquí).  Fue divertido y (espero que haya sido) útil a mis alumnos.

No estoy listo para incursionar de nuevo en este género, pero me topé con este Rap que muestra como usar Photoshop.  Aunque está en inglés, quise compartirlo porque está genial.

See more funny videos and funny pictures at CollegeHumor.

Me lo encontré en el blog de MakeUseOf, pero originalmente está en CollegeHumor.

La evolución de Photoshop

Hace tiempo escribí sobre la historia de Photoshop cuando cumplió 20 años con un video de los creadores y toda la cosa.

Hoy me topé con este gráfico que narra su evolución desde la versión 1.0 hasta la CS5 en el blog de Smashing Apps.

Espero que lo disfruten (hagan clic sobre la imagen para verlo más grande).

Facebook: términos y condiciones

¿Alguna vez haz leído los términos y condiciones de los programas o sitios web que instalas o a los que te suscribes?  Generalmente solo le damos clic sobre el botón Aceptar sin leer.

Gracias a mi amiga Dorix, me topé con este post del blog de “El espíritu de los cínicos” donde describe con una imagen lo que aceptaste cuando le picaste “Acepto” cuando te diste de alta en Facebook.

¡Saludos!