28 febrero 2011

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:

00-Spry2

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).

01-Spry2

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

02-Spry2

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í:

03-Spry2

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):

04-Spry2

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).

05-Spry2

¿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!

06-Spry2

07-Spry2

23 febrero 2011

Microsoft Mathematics 4.0… ¡gratis!

o3Pq673tTal 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.

22 febrero 2011

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í:

Spry01

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:

Spry02

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):

Spry03

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:

Spry04

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

Spry05

Y la barra de propiedades se ve así:

Spry06

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í:

Spry07

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):

Spry08

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:

Spry09

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):

Spry10

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ó):

Spry11

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í:

Spry12

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í:

Spry13

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.

08 febrero 2011

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

1 MKT

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

1 TCB 0

1 TCB

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

3 TIA 0

3 TIA

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 Confundido, pero los quiero por igual Sonrisa.  Sirve que salen en la foto algunos ausentes Llorón.

2 TPO 2010

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

5 TPO

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

5A TCM 0

5A TCM 1

5A TCM

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.

 

Related Posts Plugin for WordPress, Blogger...