14 abril 2011

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!

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


11 abril 2011

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!

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

31 marzo 2011

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


09 marzo 2011

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.

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.

15 enero 2011

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.

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

13 enero 2011

La evolución de Photoshop

the-evolution-of-photoshopHace 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 Sonrisa (hagan clic sobre la imagen para verlo más grande).

10 enero 2011

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!

27 diciembre 2010

Los mejores videojuegos gratuitos del 2010

Hace rato estaba leyendo un post viejo de Gizmo’s Freeware donde habla sobre los mejores videojuegos gratuitos del 2010.  Ordena los juegos en las siguientes categorías: casuales, de cartas, rompecabezas, de plataforma, de acción, RPG que no se juega en línea, de estrategia en tiempo real, de estrategia por turnos, tipo “Worms”, de pelea, de carreras, para niños, etc.

Es una lista bastante completa y, si te gustan los videojuegos y las fiestas navideñas te dejaron sin dinero, te recomiendo que veas la liga.


¡Que te diviertas!

13 diciembre 2010

Humor mientras califico

Me encuentro evaluando a mis alumnos y me topé con estos comics que reflejan lo que pasa cuando dejo proyectos.  Aunque en mi caso casi no hago exámenes, sin embargo se produce el mismo efecto.
phd120310sphd120610s
Estos son cortesía de PHD Comics Sonrisa

03 diciembre 2010

Humor con tecnología y agua bendita…

He andado bastante ocupado últimamente (se notará en la poca frecuencia con la que he posteado en estos meses), pero me encontré estas imágenes que se me hicieron muy chistosas.
Este tiene que ver con la confesión, vista desde un ambiente moderno:
cntrldel
Este es un producto real (puedes ver la página con todo y medidas aquí) y te puede dar ideas para esta navidad, por si no sabes que regalarle a ese familiar/amigo/etc. que es sumamente cristiano y le guste la música:
ibeleive
Ambas imágenes me las encontré en el blog de MakeUseOf, el del confesionario aquí y el iPod en forma de cruz aquí.

25 noviembre 2010

Dibujando, dibujando… en VB .NET

manos_escherHace muchos años, cuando recién hice este blog, el primer post que escribí tuvo que ver con dibujar líneas y rectángulos al azar en la pantalla (el 13/Nov/2006), misma que era un intento de explicar como dibujar sobre la ventana usando objetos de System.Drawing.Graphics.
El tiempo ha pasado y desde entonces también he escrito acerca de la manera de integrar menús, tanto “normales” como contextuales (de esos que aparecen cuando le das clic derecho sobre un objeto o ventana).
Y como dice la canción “…el tiempo pasa y nos vamos volviendo viejos…”, pasaron otro par de años y el otro día estábamos con alumnos viendo como meter menús contextuales y continuamos haciendo cosas con gráficos, así que surgió una combinación de ambos temas: un programa que te muestra diferentes figuras al azar y si presionas el botón derecho del mouse sobre la ventana aparece un menú contextual que te permite cambiar de figura, cambiar de color o salir del programa.
Las explicaciones ya fueron dadas en los dos post que mencioné, así que solo les dejo la liga desde donde pueden descargar el proyecto en formato RAR: descargue aquí.
¡Se divierten!

El Tony y sus ondas...

Related Posts Plugin for WordPress, Blogger...