17 marzo 2008

El segundo concurso multimediático se acerca...

Se acerca nuestro segundo concurso multimediático en la prepa Univa que tendrá lugar el 29/May/08 y queremos invitarlos a que participen. Aquí les dejo las bases para que puedan comenzar a trabajar en sus proyectos y luego les haré llegar el cartel "oficial" del evento que está diseñando nuestro nuevo maestro Mike.

El concurso multimediático tiene cuatro categorías: carteles, animaciones, páginas web y videos. El tema alrededor del cual se tienen que realizar los proyectos es el desarrollo sustentable del medio ambiente.

El año pasado tuvimos premios muy interesantes: 3 reproductores MP4 y libros cortesía del Grupo Educare (y ya me confirmaron que este año también nos apoyan), 1 beca completa y una media beca para cursos por parte de Digitrain (cada curso cuesta alrededor de $4000), 2 iPods por parte de Aula24Horas, 6 sistemas home theater para computadora cortesía de MiPC Comunicaciones, 2 celulares Nokia 5300 que nos dió TelCel y dos vales de $500 de MixUp. Y este año estamos buscando a más patrocinadores para los alumnos se animen.

Esperamos contar con la participación de sus alumnos y seguimos en contacto...

Tema del concurso: Desarrollo sustentable del medio ambiente

Bases:
  • Podrán participar alumnos inscritos en cualquier preparatoria.
  • La cuota de inscripción es de $20 por proyecto y se puede pagar el día del evento.
  • Hay cuatro categorías: Carteles digitales, animaciones, video y páginas Web.
  • Categoría carteles digitales: Se tienen que enviar el cartel en cualquier formato digital y traer impreso el día del evento y los proyectos deberán elaborarse de manera individual.
  • Las demás categorías: cada participante debe traer lo necesario para mostrar su animación (computadora, monitor, bocinas, etc.), se les proporcionará una mesa y contacto eléctrico, harán una exposición durante la actividad, donde los participantes mostrarán su creación a los alumnos y jueces invitados, los proyectos se pueden realizar de forma individual o en parejas y deberán entregar su proyecto en formato digital.
  • Podrán competir cinco proyectos por escuela en cada categoría.
  • La fecha límite para inscripción y entrega de proyectos será el lunes 19 de mayo del 2008. Deberá enviarse por correo electrónico a academia_programacion@yahoo.com o a tony.valderrama@gmail.com
  • Los participantes deben desarrollar una propuesta digital visual acerca del tema.
  • El contenido del proyecto debe ser 100% original (no usar recursos bajados de internet, etc.).
  • Cada equipo deberá presentar su proyecto el día 29 de mayo en el salón de usos múltiples de la Univa de 8am a 12pm.
  • El jurado estará formado por instructores de diseño, diseñadores, catedráticos de diferentes instituciones y especialistas acerca del tema.
  • El fallo del jurado será inapelable. Los resultados se darán a conocer el día del evento.
  • Se premiarán los tres primeros lugares de cada categoría.
  • Cualquier evento no descrito en la presente será resuelta por el comité organizador.
  • La inscripción de un proyecto a este concurso supone la conformidad que tienen los participantes a estas bases.
Si tienes preguntas, dudas o lo que sea, deja un comentario y luego me contacto contigo. ¡Nos vemos en el concurso!

11 marzo 2008

RocketDock


RocketDock es una utilería que se ha vuelto indispensable para mi bienestar computacional. Es una aplicación gratuita, conocido como freeware, que es una barra desde donde puedo poner accesos directos a los programas que más uso. Es hecha por PunkSoftware quienes también tienen otros programas gratuitos interesantes que puedes ver, descargar o usar desde su página.

En mi caso, yo lo coloqué del lado izquierdo de la pantalla y aparece cada vez que el cursor de mi mouse se posiciona hasta la orilla izquierda de mi pantalla (abajo está como se ve mi pantalla cuando aparece RocketDock). Tiene mil opciones de configuración que puedes cambiar para que te sea más útil: colores, tamaño, efectos, etc.

Aquí les dejo la liga a la página desde donde puedes tener mayor información, descargarlo, ver un video de como funciona y toda la cosa. Haz clic aquí.

Espero que te sea útil el programa. Seguimos en contacto...

10 marzo 2008

Rodando por encima...

Aunque el título se oye raro, es la traducción cuasicorrecta y medio mal interpretada por mí del término Rollover (la traducción más cercana de roll over sería "darse la vuelta", pero ya ven que me gusta andar inventado...). Independientemente de las traducciones, en una página güev un rollover es una imagen que se sustituye por otra cuando el cursor del mouse está encima de él y vuelve a la primera imagen cuando el cursor del mouse se va a otro lado.

Antes de hacer cualquier otra cosa, hay que crear las imágenes que se van a sustituir. Esto se puede hacer en un sin fin de programas que hagan dibujos y los dejen en formato JPG, GIF o PNG (hasta el Paint, pese a ser tan chafa, sirve). Yo generalmente uso Photoshop porque ya estoy acostumbrado a sus malas mañas, jeje. Muchos prefieren usar Fireworks porque se integra muy bien con Dreamweaver (como los dos originalmente eran hechas por la misma compañía, Macromedia). Aquí pongo el botón que voy a usar: la primera imagen es para el estado normal (cuando el cursor del mouse está en otro lado) y el segundo se va a mostrar cuando el cursor del mouse esté encima de él.


Ok. Con estas imágenes, ya podemos usarlos en Dreamweaver. En Dreamweaver creo una nueva página en mi sitio, voy al menú Insert, Image objects y Rollover image. Esto se ve en la siguiente figura:


Al seleccionar esta opción, aparece la siguiente ventana:


Las opciones de esta ventana son las siguientes:
  • Image name: el nombre que se le va a dar al rollover.
  • Original image: el archivo que contiene la imagen en estado normal.
  • Rollover image: el archivo que contiene la imagen que aparecerá cuando pasa el mouse por encima.
  • Preload rollover image: siempre deja este tachado. Esto le indica a Dreamweaver que al cargar la página, primero cargue a la memoria la imagen del estado rollover antes de mostrar el botón.
  • Alternate text: texto que aparecerá en el lugar del botón en caso que el navegador no lo pueda desplegar.
  • When clicked, go to URL: la liga a la que va a ir si le dan clic sobre el botón.
En este ejemplo, llené la ventana con estos datos:


Al darle clic sobre el botón Ok mi ventana de la página se ve así:


Al previsualizar mi página con Firefox (me gusta mucho más que el Internet Explorer), si mi mouse no está sobre el botón, se ve así:


Y al posicionar mi mouse sobre el botón, se ve así:


Espero que esta información te sea útil. Si quieres otro ejemplo (aunque está apegado a Dreamweaver MX), haz clic aquí. ¡Hasta la próxima!

04 marzo 2008

Atrapado en mi historia

Para entender el presente, es necesario conocer el pasado. Esto se aplica en muchas áreas y campos de la vida, sin embargo, es posible vivir en el presente sin conocer el pasado, pero vas a carecer de un conocimiento a profundidad acerca de algo.

En Photoshop conocer la historia te ahorra tiempo, dinero y esfuerzo. Cuando estás diseñando algo, es muy común que hiciste un cambio del que luego te arrepentiste y quieres corregir. Y para poder volver a ver tu diseño como estaba antes del cambio indeseado, puede ser toda una pesadilla. Es por esto que nuestros amigos de Adobe pensaron en nuestro bienestar emocional e incluyeron en Photoshop muchas herramientas, palette y otros tiliches que me permiten deshacer el pasado o editar mi imagen actual con opciones que ya usé. En este mensaje hablaré un poco de esto.

Palette de Historia
Para empezar, vamos a usar un palette de Historia en la cual se guardan los últimos chorrocientas acciones que hice sobre mi imagen (bueno, tal vez exageré con los el número, pero si son muchos y si quieres editar cuántos son, ve al menú Edit-Preferences-General y da de alta un valor en History State, un número entre 1 y 1000). Hay dos modos en que este palette funciona: el lineal y no-lineal. Para cambiar entre estos modos de edición, puedes escoger las opciones de historia (History Options) del menú del palette Historia (History) como puedes ver en esta figura:


Al darle esta opción aparece la siguiente ventana que te permite "prender" o "apagar" diferentes opciones de la historia. Al ratito hablo de Snapshot (la traducción sería algo como foto instantánea), pero por lo pronto puedes ver donde puedes cambiar el modo del palette de historia.


En el modo lineal, si le das clic en un estado anterior y continúas editando la imagen a partir de ese estado o lo eliminas, todos los cambios subsiguientes (los que están atenuados, de color gris) serán deshechados, sin embargo en el modo no-lineal no son deshechadas. Si reanudas el trabajo con la imagen, las nuevas ediciones aparecen en el palette como los últimos estados y los estados anteriores son preservadas. Lo más común es trabajar en modo lineal, porque con el otro suelen haber confusiones (yo, por ejemplo, me hago bolas).

Este es el palette de historia con algunas partes resaltadas.


Aquí voy a describir como hacer algunas funciones con el palette de historia:
  • Para regresar a un estado anterior: Haz clic sobre un estado previo en el palette de historia o usa los comandos Step Foreward ó Step Backward del menú del palette o del lado izquierdo del palette mueve el deslizador hacia arriba o abajo hasta el estado deseado.
  • Para duplicar un estado: haz clic mientras presionas la tecla ALT sobre un estado. El estado duplicado aparecerá en el estado de hasta abajo.
  • Para borrar un estado: arrastra el nombre del estado que quieres borrar sobre el bote de basura que está en el palette

Snapshot
Los snapshots (como dije antes, snapshot se traduce en algo así como foto instantánea) son como copias de un estado de la historia, uno con una diferencia substancial. A diferencia de los estados de la historia, estas quedan fijas en el palette de historia, aunque se borren los estados anteriores a él. Aquí pongo una imagen de un palette con un snapshot:


Estas son las operaciones que se pueden hacer con Snapshots:
  • Crear un snapshot: cuando la imagen está en el estado deseado (o sea, se ve chuvidubis), das clic sobre el botón Create Snapshot del palette historia (fíjate en el dibujito del palette que puse casi al principio de este post) o haz clic derecho sobre el estado deseado y elige la opcion New Snapshot del menú que aparece.
  • Eliminar un snapshot: hacer clic derecho sobre la imagen del snapshot que está en el palette y selecciona la opción Delete.
  • Volver al estado de un snapshot: haz clic sobre el icono del snapshot que está en el palette historia.
  • Para crear un nuevo documento a partir de un estado de la historia o de un snapshot: arrastra el icono del snapshot o el estado sobre el botón "Crear nuevo documento del estado actual" o haz clic sobre un snapshot o estado y luego presiona el botón "Crear nuevo documento del estado actual" o haz clic derecho sobre un snapshot o estado y selecciona la opción New Document del menú que aparece.

Restaurar y eliminar
Puedes usar cualquier snapshot o estado del palette de historia para usar datos de los pixeles de ese estado para la herramienta History Brush. Al arrastrar esta herramienta sobre tu dibujo se restauran los pixeles que habían en el estado o snapshot seleccionado.

Pasos para usar la herramienta History Brush:
  1. Selecciona esta herramienta. La herramienta tiene este icono:

  2. Selecciona las opciones que creas pertinentes en la barra de opciones de la herramienta como lo es el tipo de brocha a usar, el modo en que se va a mezclar el color (Mode), el porcentaje de transparencia (Opacity) y el porcentaje de flujo (Flow). También puedes hacer clic sobre el botón de aerógrafo. La barra de opciones de esta herramienta se ve así:

  3. En el palette de historia, haz clic en la columna que está a la izquierda del estado o snapshot que quieres usar.
  4. Selecciona la capa en el que deseas dibujar y prende el bloqueo de pixeles transparentes (Lock Transparent Pixels) en el palette de capas (Layers). El icono de este bloqueo es este:

  5. Dibuja trazos sobre la imagen. La información de los pixeles del estado previo de esa capa va a reemplazar la información de los pixeles donde estás dibujando.
Este es un ejemplo se la manera en que se puede usar esta herramienta. Esta es la imagen original:


Aquí apliqué el filtro Graphic Pen a la capa y en una nueva capa dibujé sobre mis hijas usando esta herramienta con una opacidad de 90%. Creo que se entiende como funciona esta herramienta.


Hasta aquí todo está a todo dar, pero si quiero llenar toda una área con pixeles de un estado previo, esto puede ser todo un relajo, así que aquí voy a describir los pasos para llenar una selección o una capa con un estado de la historia.
  1. Escoge una capa que contiene pixeles.
  2. Opcional: Crea una selección.
  3. En el palette de historia, haz clic en la columna izquierda a un lado del estado o snapshot que quieres usar como relleno.
  4. Elige del menú Edit elige la opción Fill (o presiona SHIFT+F5).
  5. Elige en la parte de Use, la opción History como se ve en la siguiente figura:

  6. Elige un Blending Mode y un porcentaje de Opacity. Si quieres, puedes seleccionar la opción Preserve Transparancy para reemplazar solamente los pixeles existentes. La ventana queda así (bueno, para este ejemplo yo lo dejé así):

  7. Haz clic en Ok para terminar.
Este es el ejemplo. Esta es la imagen original:


Le apliqué el filtro Glass a la imagen, seleccioné el área de la cara de mi hija (bueno, más o menos), hice una nueva capa y lo rellené con lo que tenía la historia como describí con anterioridad. Así quedó:


Para terminar con la historiadera, hay una herramienta que trabaja con historia que da efectos muy chiroliros. Este es la herramienta Art History Brush que es casi igual que la herramienta History Brush (que ya describí en este mensaje) solo que tiene un montón de tipos de brochas que dan efectos muy padres. Esta herramienta se usa así:
  1. Edita una capa para que tengas algunos estados en el palette de historia.
  2. En el palette de historia haz clic sobre la columna que está a la izquierda del estado que quieres usar para pintar pixeles con esta herramienta (al igual que hiciste con los procedimientos anteriores).
  3. Escoge la herramienta Art History Brush. En la barra de herramientas está agrupada con la herramienta History Brush que usamos antes. El icono es este:

  4. Elige las opciones que creas pertinentes de la barra de opciones. Solo hay dos opciones que quiero resaltar, Area establece el tamaño del área que abarca la brocha. Si pones un valor bajo para Tolerance, los pincelazos aparecerán en cualquier lugar de la imagen; si le pones un valor alto, los brochazos solo parecerán sobre los pixeles que son muy diferentes del color original. La ventana de opciones es esta:

  5. Escoge una capa y luego dibuja con esta herramienta. Entre más tiempo tengas presionado el botón del mouse en el mismo lugar, mayor será el número de colores que se combinarán.
Este es un ejemplo de esta herramienta. Esta es la imagen original:


Le apliqué un filtro Dry Brush a la capa, usé las opciones que aparecen en el punto 4 para pintar sobre la cara y queda así:


Aquí cambié el tamaño y el estilo de la brocha a Dab y volví a pintar la cara de la imagen original y quedó así:


Espero que con esto quede claro toda la importancia y cosas interesantes que puedes hacer con la historia. Si puedes enriquecer este post, con toda confianza deja un mensaje.

¡Hasta la próxima!

28 febrero 2008

Jugando con tablas normalizadas y SQL

El otro día estábamos jugando a crear tablas normalizadas e instrucciones SQL y lo que resultó fue un ejemplo de diseñar tablas normalizadas (escribí algo acerca de la normalización de bases de datos que puedes leer aquí) y el uso de instrucciones SQL para usarlas. Por esta razón, publico aquí el ejercicio y la mejor solución que surgió esperando que te sea útil.

Antes que nada, este es el problema planteado:

Crear las tablas necesarias para almacenar los datos que necesita una tienda de autoservicio. El programa es de punto de venta, que controlará el inventario de producto, clientes que han solicitado facturas, recibos (ventas) y facturas.

Los datos (mínimos) que se tienen que almacenar son:
  • IdProducto – Número que identifica de manera única cada producto
  • Descripcion – Descripción del producto
  • PrecioCompra – El precio al que te venden el producto.
  • Min – Cantidad mínima que necesitas tener en el almacén. Si llegas a este valor, es necesario hacer otro pedido.
  • Max – Cantidad máxima que puedes almacenar de un producto.
  • Cantidad – Cantidad de producto que tienes actualmente.
  • PrecioVenta – Precio al que vendes el producto.
  • Proveedor – Nombre del proveedor que te surte un producto.
  • Tel – Teléfono del proveedor.
  • EMail – I-Meil del proveedor.
  • Cliente – Nombre del cliente.
  • RFC – del cliente.
  • Domicilio – del cliente.
  • CP – Código postal del cliente.
  • FechaVenta – Fecha en que se hizo la venta.
  • NoRecibo – El número que identifica un recibo.
  • NoFactura – Número de factura que se hizo de un recibo (si es que se hizo una fectura de ese recibo).
Ten en cuenta algunas de las funciones que tendrá el programa:
  • Emite recibos: almacena el número de recibo, la fecha en que se hizo la venta, la lista de productos que se vendieron (producto, cantidad, precio del producto ) y el número de factura, si es que el usuario solicitó una factura de este recibo.
  • Control de inventario: conforme se vayan vendiendo productos en la tienda, se va a ir ajustando la cantidad que se tiene en el almacén. Cuando llegue al tope mínimo, deberá mandar un aviso para que hagan un pedido de ese material y que el pedido (más lo que se tiene) no supere el límite máximo.
  • Facturación: que lleve un registro de las facturas que se emitieron. Se tiene que registrar que factura corresponde a qué recibo y a qué cliente.
  • Reportes: se necesitarán reportes de existencias en inventario, de lo que se ha vendido (reportes financieros) y uno que otro más.
Además de esto, debes guardar instrucciones SQL que hagan lo siguiente:

1. Los productos que se tienen en inventario (descripción, cantidad en inventario, precio compra y precio de venta, ordenado por la descripción).

2. La lista de los clientes (RFC, Nombre, Apellidos y Teléfono, ordenado por apellido paterno, luego por apellido materno y luego por nombre).

3. Nombres de todos los clientes cuyo apellido paterno comience con “Men” o su RFC contenga la cadena “2011”.

4. Listado de todos los recibos que contengan el producto 2 o el 9 y que se hayan comprado en el mes de septiembre de cualquier año.

5. Listado de todos los productos que contengan la cadena “coca”, “sprite” o “fanta” en la descripción. Ordénalos por descripción de forma descendente y luego por precio de venta.

6. Dar de alta un recibo de compra: número de recibo, fecha y 10 artículos que compró.

Este es el problema. Ahora la onda es ver cómo solucionarlo. Comencemos por el diseño de las tablas. No voy a hacer un repaso de las formas normales (que, como dije antes, puedes ver aquí), pero solo escribir como quedarían. Pongo un signo # antes del campo que sería la llave primaria de la tabla.

Tabla: Productos
Aquí se guardan los datos de los productos
#IdProducto
Descripcion
Min
Max
Cant
PrecioCompra
PrecioVenta
IdProveedor
(esto lo pongo solamente si cada producto tiene un solo proveedor. si no hay que hacer otra tabla que ilustro más adelante en la tabla ProveedorProducto)

Tabla: Proveedores
Aquí se guardan los datos de los proveedores
#IdProveedor
Nombre
Tel
EMail


Tabla: Clientes
Aquí se guardan los datos de los clientes
#RFC
Nombre
ApellidoP
ApellidoM
Domicilio
CP


Tabla: Recibos
Aquí se guardan los datos generales de los recibos y facturas, si la han hecho de este recibo
#NoRecibo
Fecha
NoFactura
(en caso que no haya factura de este recibo, este campo tiene 0 y el que sigue no le pongo valor, es nulo) RFCCliente

Tabla: ReciboProducto
Aquí se guardan los productos que se compraron en cada recibo
#NoRecibo
#NoProducto
Cant
Precio


Tabla: ProveedorProducto
En caso de que más de un proveedor puede proveer un producto, aquí se guarda quien provee qué
#IdProveedor
#IdProducto


Ahora van las instrucciones SQL. Como las consultas van enumeradas, voy a poner primero el numero y en el siguiente renglón la instrucción SQL correspondiente:

1.
SELECT Descripcion,Cant,PrecioCompra,PrecioVenta
FROM Productos
ORDER BY Descripcion


2.
SELECT RFC,Nombre,ApP,ApM,Tel
FROM Clientes
ORDER BY ApP,ApM,Nombre


3.
SELECT RFC,Nombre,ApP,ApM
FROM Clientes
WHERE ApP LIKE "Men*" OR RFC LIKE "*2011*"


4.
SELECT DISTINCT NoRec
FROM ReciboProducto
WHERE NoProd=2 OR NoProd=9


5.
SELECT Descripcion
FROM Productos
WHERE Descripcion LIKE "*coca*" OR Descripcion LIKE "*sprite*" OR Descripcion LIKE "*fanta*" ORDER BY Descripcion DESC,PrecioVenta


6.
En primer lugar, inserto los datos generales a la tabla Recibos. Como puedes ver, estoy omitiendo la información de la factura:
INSERT INTO Recibos (NoRec,Fecha) VALUES (1,"28/Feb/08")

Ahora todos estos dan de alta los 10 productos que ampara este recibo (en nuestor caos, el recibo número 1):
INSERT INTO ReciboProducto (NoRec,NoProd,Cant,Precio) VALUES (1,1,5,3.5)
INSERT INTO ReciboProducto (NoRec,NoProd,Cant,Precio) VALUES (1,3,1,13)
INSERT INTO ReciboProducto (NoRec,NoProd,Cant,Precio) VALUES (1,9,1,25.95)
INSERT INTO ReciboProducto (NoRec,NoProd,Cant,Precio) VALUES (1,25,1,14.5)
INSERT INTO ReciboProducto (NoRec,NoProd,Cant,Precio) VALUES (1,7,2,3.75)
INSERT INTO ReciboProducto (NoRec,NoProd,Cant,Precio) VALUES (1,2,1,5)
INSERT INTO ReciboProducto (NoRec,NoProd,Cant,Precio) VALUES (1,10,1,4)
INSERT INTO ReciboProducto (NoRec,NoProd,Cant,Precio) VALUES (1,13,2,8.5)
INSERT INTO ReciboProducto (NoRec,NoProd,Cant,Precio) VALUES (1,7,1,50)
INSERT INTO ReciboProducto (NoRec,NoProd,Cant,Precio) VALUES (1,24,3,30)


Espero que esto te ayude. Si no te queda claro, no dudes en dejar un mensaje. ¡Hasta la próxima!

22 febrero 2008

Escuchando música con pocos recursos


Escuchar MP3 en la computadora es una parte de nuestra vida diaria. Sin embargo, la mayoría de los reproductores son muy pesados y consumen muchos recursos de la computadora al ejecutarse. Por ejemplo, el archivo de instalación de iTunes (que yo solo lo tengo para poder sincronizar mi iPod shuffle), ocupa más de 65 MB, el Windows Media Player tarda muchísimo en abrir, y hasta el WinAmp, que era mi favorito por gratis, pequeño y fácil de usar, ya se ha vuelto más grande y me ha comenzado a dar lata.

El otro día, mientras vagaba por el internet, me topé con un artículo en un blog que de vez en cuando visito, Infoserranía, que recomendaba el AIMP2, un reproductor de MP3 que no es muy grande y se ejecuta rápido.

La página "oficial", www.aimp.ru, está en ruso pero tiene un botoncito que dice "EN" para que vean una parte en inglés (aunque todavía quedan muchos letreros en ruso). De allí lo puedes bajar.

Se los recomiendo. ¡Disfruta tu música!

19 febrero 2008

Dreamweaver: Sepultado entre capas

Las capas son elementos que te pueden ayudar mucho en diseñar una página güev son las capas. Las capas son cuadros que puedes poner en cualquier parte de tu página que puede contener cosas (como imágenes, texto, tablas, animaciones flash, etc.), similar a los cuadros de texto de Microsoft Word, pero más interesantes (digo, en Word no puedes meter una animación de flash y que se vea de forma decente). Las capas se pueden ocultar, mostrar o encimarse entre ellos, lo cual te da grandes posibilidades de diseño que solo son limitados por tu imaginación (bueno, tal vez seas demasiado imaginativo, pero ese es otro rollo).

Aquí te explicaré lo mejor que pueda la manera de incluir capas en tu página. Para empezar, haz clic en el menú Insert, luego Layout object y luego Layer, como puedes ver en esta imagen:


Al tener esto, aparece la capa dibujada sobre la página como se ve aquí:


Puedo manipular la posición o el tamaño de la capa se hace arrastrando el cuadrito que está sobre la esquina superior izquierda de la capa (para mover la capa) o arrastrando los cuadritos azules que están alrededor de la capa (para cambiar su tamaño). En la siguiente imagen puse el cursor del mouse sobre el cuadro y me marcó sus propiedades. También puedes ver los cuadritos azules que te permiten cambiar el tamaño.


Aquí hay un ejemplo de esta capa con texto y una imagen adentro. Para hacerlo, simplemente haz clic adentro de la capa y comienza a escribir o insertar imagen o lo que sea, tal y como lo harías en la página:


Cuando se tienen muchas capas en un mismo documento, se pueden seleccionar de manera más sencilla usando el panel Layers que está en el menú Window y luego Layers como puedes ver en esta figura:


Cuando lo seleccionas aparece una palomita a un lado indicando que el panel está visible (o sea que si no lo ves, saca tus lentes o acércate al monitor). El panel se ve así:


En este caso, solo se ve una capa (el Layer1) porque solo he incluido una capa en la página. Si tuviera más capas, desde aquí puedo decir el orden en que aparecen.

Siguiendo con la onda capeada pero pasando a otras cosas, Así se ve el inspector de propiedades cuando tienes una capa seleccionada. Voy a tratar de describir lo que hace cada parte, pero primero, ahi va la imagen:

  1. El nombre de la capa. Por default se llama Layer1, Layer2, etc.
  2. Posición de la capa. Es el número de pixeles desde la izquierda (Left) y desde la parte superior (Top) de la página y la esquina superior izquierda de la capa.
  3. El ancho (Width) y alto (Height) de la página.
  4. Es el orden en que se ponen las capas en el documento. Determina cual va enfrente y cual atrás.
  5. Indica la visibilidad inicial de la capa. Puede ser de 4 tipos: default, dará visibilidad según lo que crea conveniente el navegador, inherit muestra la capa mientras se la página sea visible, visible muestra la capa independientemente si la página se esté mostrando o no, y hidden es una capa oculta.
  6. Se encarga de controlar la manera en que aparecen las capas en el navegador cuando el contenido sea más grande de lo que cabe en la capa. Hay cuatro tipos: visible le dice que el contenido extra aparece en la capa, hidden que oculta el contenido "sobrante", scroll le permite al usuario moverse en la capa usando barras de scroll, auto hace que el navegador muestre las barra de scroll solo cuando se necesiten.
Espero que esto les aclare dudas y sirva de referencia. Si tienes dudas, déjame un mensaje. ¡Hasta la próxima!

17 febrero 2008

Arreglando arreglos

Una manera que es muy conveniente almacenar datos en la memoria son los arreglos. Un arreglo (conocido como array entre los gringos) es un grupo consecutivo de localidades de memoria que tienen el mismo nombre y el mismo tipo. Estos son muy útiles cuando trabajas con muchos datos que lógicamente deberían ir juntos, como pueden ser las edades de todos los que están en tu salón de clases.

Hablando de edades, hice un pequeño programa que trabaja con edades de 10 personas. Vienen funciones que lo hacen de dos maneras diferentes: con arreglos y sin arreglos. En este mensaje les comparto como funciona. Por si quieres, los archivos del proyecto los puedes bajar aquí (vienen comprimidas en formato RAR, así que necesitarás el programa WinRAR para poder accesarlos). Sin más rollo, vamos a ver el programa.

Para empezar, esta es la interfaz de mi programa. Alrededor escribí los nombres que le dí a cada control (la propiedad Name de cada control).


De lado izquierdo tengo 3 botones que llenan un arreglo de 10 elementos (le pido los datos al usuario mediante un InputBox). Después hay otros dos botones, uno que calcula el promedio de las edades y el otro que encuentra la edad mayor y la menor. Hay que recordar que si el usuario no ha dado de alta las edades en el arreglo, no puede calcular promedios ni mínimos ni máximos, así que los botones btnPromArreglos y btnMinMaxArr los deshabilito para que el usuario no tenga acceso a ellos hasta que el usuario dé de alta las edades (esto se hace poniéndole el valor de False a la propiedad Enabled de los botones).

Del lado derecho de la ventana dibujé otros 3 botones que realizan las mismas fucnioens que ya describí, solo que no usan arreglos. Los puse simplemente para ilustrar la gran diferencia.

Ahora vamos a la programadera. Para empezar, estas son las variables que declaro en el programa para almacenar las edades. Como podrás observar, con arreglos solo tengo que declarar una variable, sin embargo tengo que declarar 10 si no uso arreglos.


Una cosa que ahorra tiempo y código cuando se trabaja con arreglos es que, como están en posiciones adyacentes y se hace referencia a cada elemento por medio de un número que va desde 0 hasta el número de elementos menos uno, puedo usar ciclos (particularmente el ciclo For es muy útil) para recorrerlo. Esto hago en el procedimiento que pide las edades y las almacena en el arreglo Edades. Al final de todo, habilito los botones que calculan el promedio y el mínimo y máximo.


Hacer lo mismo sin arreglos cuesta un poco más de trabajo porque tengo que escribir 10 líneas de código. Se ve así:


Calcular el mínimo y máximo de todos los datos del arreglo es fácil. Primero declaro dos variables donde voy a guardar el dato más pequeño y el más grande (en este caso los nombré Min y Max). Luego inicializo los valores mínimos y máximos para que sean igual que lo que tiene el primer elemento del arreglo, el que está en la posición 0. Después recorro el resto de los elementos (desde la 1 hasta la 9) y si encuentro que un valor es menor a lo que tengo en Min, a Min le asigno el valor más pequeño. Lo mismo hago con Max, si el valor del elemento que estoy revisando es mayor a lo que tiene Max, a Max le asigno el valor del elemento. Cuando termino de esto, muestro los resultados en un MsgBox. El código con arreglos se ve así:


Sin arreglos se complica un poco la cosa. El código se vería así:


Calcular el promedio es fácil. Por si no recuerdas, solo se tienen que sumar todos los elementos y dividir el total entre el número de elementos. En nuestro caso, son 10 elementos.

Al usar arreglos, declaro una variable Prom que va a acumular la suma de todos los elementos. Esto lo hago en un ciclo For. Al terminar de calcular la suma, divido el valor entre 10 y despliego el resultado al usuario con otro MsgBox. Aquí está el código:


Sin arreglos, tengo que hacer la suma y división escribiendo todos los elementos. En este caso, como son solo 10 edades, parece menos código. Pero imagínate que de pronto te dicen que son 100 edades, con arreglos simplemente cambio el ciclo For para que en lugar de ir hasta el elemento 9, le siga hasta la 99 y en lugar de dividir la suma entre 10, lo divido entre 100. Sin arreglos tengo que escribir otras 90 variables para hacer lo mismo. El código se ve así:


Lo que falta es lo más sencillo: la función que exita del programa (entendiendo exitar como acción y efecto de ir hacia el Exit). Como está muy claro, solo pongo el código:


Con esto termino en esta ocasión. Si tienes dudas, no dudes (valga la redundancia) en dejar un comentario o mandarme un I-Meil. ¡Hasta la próxima!

14 febrero 2008

¿Con qué dibujo?

En esta vida, si quieres realizar cualquier trabajo, necesitas contar con la herramienta adecuada. Mi papá, experto en fontanería, carpintería, y casi cualquier cosa que termine con "ía", era fan de tener la herramienta exacta para el trabajo que se necesitaba: no era del tipo de cuates que, a falta de una llave inglesa usarían unas pinzas porque tardaría más y probablemente maltrataría la pieza que estaba manipulando. Lo mismo sucede con cualquier software: necesitas la herramienta adecuada para poder hacer un buen trabajo. Es por esto que en esta ocasión, hice una lista y muy breve comentario de todas las diferentes herramientas que tiene Photoshop CS2. Aunque ya hay en el mercado una versión más chida, la CS3 (la cual cuenta con estas herramientas y agrega uno que otro más), con estas herramientas puedes hacer todo lo que te puedas imaginar en el mundo de la imagen digital. Sin más preámbulo, comencemos entonces. Antes que nada, en esta imagen te presento la barra de herramientas de Photoshop. Ahora va un comentario sucinto sobre cada uno de ellos. Antes de arrancar, quiero que sepas que cada herramienta se puede seleccionar presionando una tecla, misma que escribí entre paréntesis a un lado de cada herramienta. Ahora sí, voy a apostillar: Con estas herramientas crear seleccionar de diferentes formas: rectangular, huevoide (bueno, elíptico), una sola fila (un pixel de alto) o una sola columna (1 pixel de ancho). En lo personal, con mi poca experiencia en el diseño, jamás he usado el que selecciona una fila o una columna, pero si existe es que hay quienes lo han necesitado (han requerido esa herramienta precisa para ciertos trabajos). En fin, mejor sigamos con la siguiente herramienta: La herramienta mover sirve para mover capas de un lado a otro (luego platicaremos de las capas, no se preocupen) o lo que está seleccionado, ya sea dentro de una imagen o entre imágenes. Estas herramientas también son para seleccionar partes de una capa. El primero selecciona todo lo que está dentro de un área trazado con tu mouse y tu buen pulso. El segundo crea selecciones poligonales y el tercero ajusta las selecciones hechas a mano alzada. La varita mágica es útil para seleccionar partes adyacentes de una capa que tienen el mismo color. Se puede establecer cierta tolerancia para que sepa que tan parecidos deben ser los colores que va a seleccionar. La herramienta recortar te permite dibujar un rectángulo con el nuevo tamaño de la imagen: todo lo que esté dentro de ese rectángulo se quedará y lo demás será deshechado. Puedes recortar una imagen en varias "rebanadas" (slice), los cuales son áreas rectangulares. Esto es útil para imágenes de ciertos sitios web, donde cada rebanada hace o dice algo diferente o simplemente para que cargue más rápido la imagen. La primera herramienta permite hacer las rebanadas y la segunda te permite seleccionar una rebanada para luego hacer algo con él. Estas herramientas me permiten corregir errores de diversos tipos y de diferentes maneras, como lo explica la imagen. Estas herramientas son de dibujo a mano alzada (o sea por donde arrastres el mouse, por allí "se pinta"). La diferencia entre la brocha y el lápiz es que la brocha puedes seleccionar una punta diferente con la que quieras pintar (o sea en forma de círculo, pasto, estrellitas, cuadrado, etc.) y el lápiz solo puedes establecer el grueso de la línea. La primera copia el color de un lugar de la imagen a otra y la segunda copia un patrón de de color de un lado a otro. Esta herramienta pinta un estado de la historia (luego hablaremos de la historia de un documento de Photoshop) o un snapshot usando una brocha (con todos los efectos que te permite realizar una brocha). Borrar implica sustituir el color que se está viendo (forecolor) por el de fondo (backcolor). La diferencia con el que borra el fondo es que éste último cambia por transparencia. El "mágico" permite borrar cosas del mismo color con un solo clic. Estas herramientas permiten rellenar una figura, ya sea de un color sólido o con un degradado (que un color va desapareciendo mientras que otro aparece). Estas herramientas me permiten hacer que una parte de la imagen se vea más borrosa, o enfatizarla un poco o bien mezclar colores como si embarraras pintura de un lado a otro. Estas herramientas permiten hacer pixeles más claros, más oscuros o saturarlos de color. Estas herramientas permiten trabajar con rutas ("caminitos" por donde se dibujan líneas), seleccionando y alterando los nodos que las componen (haz de cuenta que una ruta es como esos dibujos de "une los puntos": los puntos son los nodos y el resultado de todas las líneas trazadas es la ruta). Estas herramientas me permiten dibujar texto. Incluye la manera de hacer una selección en forma del texto. Esto es muy útil cuando quieres escribir algo, pero que el relleno sea sacada de una foto o algo por el estilo. Luego jugamos con él. Estas herramientas hacen una función similar que el lápiz, pero de manera diferente. Mientras que con el lápiz o brocha se dibujaba según donde pasara el mouse, aquí uno da clic sobre los lugares donde quieres colocar nodos de una ruta y Photoshop automáticamente la completa con la línea requerida. El de dibujo a mano alzada es muy similar al lápiz, solo que con este dibujas la línea y Photoshop pone los nodos. Se pueden agregar o quitar nodos a una ruta (recuerda que manipulando los nodos puedo modificar una ruta) o cambiar un nodo recto para que tenga curva o viceversa. Estos permiten dibujar diferentes figuras geométricas. Estas te permiten escribir comentarios sobre tu dibujo (cosa que no aparece sobre la imagen de forma definitiva, pero que sin embargo existen para ser consultados por el diseñador) ya sea en forma de texto o en audio. Estas herramientas permiten seleccionar un color que tienes pintado en otro lado, ya sea dentro de la imagen o en otro archivo abierto, pedazo de una ventana o lo que sea. La "mano pachona" solo sirve para desplazarse dentro de una imagen. Haz de cuenta que cuando presionas el botón del mouse es como si encajaras las uñas a la imagen y para donde muevas tu mano se recorre el papel. Si quieres evitar tener que seleccionar esta herramienta, mientras tengas seleccionada casi cualquier herramienta presiona la barra espaciadora y manténla presionada mientras te mueves. Cuando quieres regresar a tu herramienta, suelta la barra y sé feliz. Esta herramienta es clásica: te acercas y alejas en la imágen. Conocido también como el Zoom. Con esto termino con las herramientas. Hay todavía mucho por explorar y con qué jugar. Ya lo iremos viendo más adelante. ¡Hasta la próxima!

El Tony y sus ondas...

Related Posts Plugin for WordPress, Blogger...