¡Hola, encargados de las secuencias de comandos!En los scripts, como en la vida, las apariencias son importantes
Los encargados de las secuencias de comandos de Microsoft
A lo largo de centenares, más aún, de miles de años, los filósofos y sabios nos han dicho que debemos mirar más allá de la apariencia física al juzgar a alguien o algo. (No significa que debemos estar juzgando a la gente, tenga cuidado; después de todo, la belleza está en el ojo del observador.) Ya sabe, la belleza verdadera viene desde dentro, no desde fuera, y quién es usted es mucho más importante que su aspecto físico.
Sobre eso, los encargados del scripting sólo pueden decir una sola cosa: tonterías.
Exacto, tonterías. Los encargados del scripting son los primeros en admitir que en un mundo ideal, el aspecto físico no importa. Sin embargo, no vivimos en un mundo ideal. Si lo hiciéramos, la pizza y los helados con frutas, nueces y chocolate compondrían los principales grupos de alimento. Que nos guste o no, la apariencia es importante. Y eso es cierto tanto para los scripts como para todo el resto.
Los encargados del scripting conocen que pocas personas lloran de la emoción por la pura belleza de un script de VBScript que se ejecuta en una ventana de comandos. (Quizás Dean Tsaltas, uno de los encargados del scripting, pero es el único en quién podemos pensar.)
Por otro lado, también es verdad que en este mundo nuestro de alta tecnología, los creadores de scripts ya no están limitados a escribir scripts que se ejecutan en una ventana de comandos. Gracias a las aplicaciones HTML (HTA), los creadores de scripts pueden usar el poder de DHTML con el fin de crear GUI para sus scripts. Estas mismas habilidades HTML se pueden usar para crear gadgets de Windows Vista™, un nuevo escenario que tiene el potencial para revolucionar el scripting de administración de sistemas tal como la conocemos. Pero, ¿sabe qué? Tan pronto como comience a hablar acerca de las GUI, salen a relucir las opiniones muy trilladas que dicen que la belleza es algo sólo superficial. Para los scripts que se ejecutan en un entorno gráfico, las apariencias son tan importantes como la función y el rendimiento.
Y eso es un problema. A fin de cuentas, somos creadores de scripts; ¿qué sabemos acerca de crear interfaces gráficas de usuario? Parece que no estamos de suerte, ¿no es cierto?
A lo mejor sí. Pero quizá no. ¿Acabamos de escuchar que alguien dice, "Menos mal, por los encargados del scripting"?
No, en serio. ¿No acabamos de escuchar que alguien dijo eso? Quizá son de los que dicen algo entre dientes...
Bien, no importa. Alguien debe decirlo, porque los encargados del scripting están aquí para ayudar (aunque desee nuestra ayuda o no).
Para que comience en el maravilloso mundo de las GUI, echemos una mirada los inicios de una pequeña y sencilla HTA. Si desea obtener más información sobre la creación de las HTA, consulte Centro para desarrolladores de HTA).
Lo que tenemos en la figura 1 es la primera parte de un elegante sistema de información de escritorio. Como puede observar, comenzamos poniendo un pequeño y agradable gráfico en la esquina superior derecha de la ventana de la HTA. La idea es que la primera vez que se cargue la HTA, ésta recupere el nombre del usuario que ha iniciado sesión y muestre su nombre y el nombre de equipo encima de esta imagen. Más adelante agregaremos a la HTA otras cosas interesantes de todo tipo, como se dice, lo primero es lo primero.
Figura 1** El comienzo de nuestra bonita interfaz gráfica de la HTA **
Bueno, no estamos muy seguros de quién ha dicho eso. Probablemente otro de esos filósofos. Probablemente Voltaire. Parece el estilo de cosas que diría Voltaire.
De acuerdo, es una aplicación pequeña bastante sencilla y su... belleza... quizás ni haga llorar de emoción al encargado del scripting Dean. Pero sirve como una herramienta de demostración útil, con un concepto básico que se aplica a muchas situaciones diferentes. A fin de cuentas, muchos de esos presuntuosos gadgets de Windows Vista funcionan con un principio semejante; simplemente muestran un gráfico elegante (digamos, un indicador o esfera) y a continuación escriben algún texto encima de ese gráfico. Es eso lo que hace que parezca que tiene un indicador pequeño genial que muestra el espacio en disco disponible cuando, resulta que, todo lo que en realidad tiene es un gráfico genérico superpuesto con algún texto dinámico.
De acuerdo, para decirle la verdad, tampoco tiene mucho sentido para nosotros. Pero las cosas se deben aclarar un poco a medida que avancemos en esta columna.
Sólo hay un problema con la noción de que podemos mostrar un gráfico y, a continuación, escribir texto encima de ese gráfico: no funciona. En cambio, con etiquetado de HTML básico obtenemos algo similar a lo mostrado en la figura 2. No es exactamente lo que estábamos pensando. Quizá Nietzsche, que dijo eso de "los seres humanos nunca pueden esperar en colocar texto encima de un gráfico, al menos no con una HTA", tenía razón.
Figura 2** Un primer intento de texto superpuesto **
O quizá Nietzsche estaba equivocado: acabamos de escuchar que alguien dijo —bien, da lo mismo. Aparentemente, no podemos hacer lo que queremos mediante HTML sin formato; no funciona así. Seguro, teóricamente podríamos hacer de nuestro gráfico un gráfico en segundo plano y usar tablas y espacios sin saltos y todo otro tipo de pequeños trucos para poder superponer texto en la imagen. Pero decimos "teóricamente" por un buen motivo; excepto en el más simple de los casos, esa estrategia nunca funciona.
Aparentemente, hay una manera mucho mejor de crear diseños elegantes en una HTA o en un gadget de Windows Vista: Hojas de estilo en cascada, más conocidas como CSS.
CSS se usa para definir fuentes, márgenes y alineaciones, colores y otros aspectos de presentación de un documento. (Esto se aplica en especial a páginas web. Sin embargo, dado que las HTA y los gadgets son, en esencia, nada más que páginas web, CSS también se aplica a ellos). Ni siquiera podemos comenzar a explicar todas las posibles cosas que puede hacer con CSS, así que para obtener más información quizás desee consultar la práctica y completa documentación de referencia de CSS en MSDN®. Por ahora, es suficiente decir que podemos usar CSS para controlar detalladamente el diseño de la HTA, incluida la capacidad de superposición de un elemento (nuestro texto) en otro (nuestro gráfico).
Explicaremos cómo hacer todo eso. Pero antes de emprender esa explicación, observe el código de una HTA muy sencilla en la figura 3.
Figure 3 Por fin, llegamos al script...
<SCRIPT LANGUAGE=”VBScript”>
Sub Window_OnLoad
Set objNetwork = CreateObject(“Wscript.Network”)
strUser = objNetwork.UserDomain & “\” & objNetwork.UserName
strComputer= objNetwork.ComputerName
UserData.InnerHTML = “<p align = ‘center’> “ & _
“<font style=’font-size:18pt;color:white’>” & _
strUser & “<br>” & strComputer & “</font></p>”
End Sub
</SCRIPT>
<img src=“test2.jpg“ align=“right“>
<span id=UserData style=“position:absolute;left:770px;top:150px“></span>
Como puede ver, en realidad no es muy complicada. Tenemos una subrutina Window_OnLoad que (según el nombre) se ejecuta automáticamente cada vez que se inicia o actualiza nuestra HTA. Hablaremos acerca de esta subrutina en un minuto. Además, tenemos dos elementos HTML: nuestro gráfico y una extensión Como seguramente sabe, usamos ese trozo de etiquetado para insertar el gráfico, mediante el atributo align para asegurar que la imagen aparece en la parte derecha de la ventana:
<img src=”test2.jpg” align=”right”>
Eso nos conduce al etiquetado HTML para la extensión:
<span id=UserData style=”position:absolute;
left:770px;top:150px”></span>
De acuerdo, hemos usado aquí una etiqueta de extensión. ¿Qué es una etiqueta de extensión? Bien, a todos los efectos, una extensión es simplemente un área con nombre de la HTA; se trata de una sección "diferenciada" de la ventana de la HTA que podemos identificar mediante programación (principalmente porque le dimos a la extensión el Id. UserData). Una vez que establecemos una extensión, podemos escribir una subrutina que le asigne texto o código HTML. De hecho, no sólo podemos hacerlo, en nuestra HTA lo hicimos.
Pero, como decimos, hablaremos acerca de eso más adelante. Primero debemos observar el parámetro style agregado a la etiqueta de extensión:
style=”position:absolute;left:770px;top:150px”
Este parámetro, como quizás sospeche, es la clave para posicionar correctamente nuestro texto dinámico encima del gráfico. En realidad, aquí especificamos tres atributos style por separado.
Position Hemos dicho a nuestra HTA que queremos que la posición de nuestra extensión, sea, digamos, absoluta. Esto significa esencialmente que siempre deseamos que la extensión esté en el mismo lugar, incluso si eso significa, como en este caso, que el texto quedará escrito encima de otro elemento (como por ejemplo, un gráfico).
Left Esto simplemente especifica la posición de la extensión relativa al extremo izquierdo de la ventana de la HTA. En este caso, queremos que la extensión comience 770 píxeles (770px) a partir de la izquierda.
Top Esta configuración es bastante similar al atributo Left, excepto que esta vez especificamos la posición de la extensión relativa al extremo superior de la ventana de la HTA. En este caso queremos iniciar en la parte superior de la ventana y contar hacia abajo 150 píxeles (150px) antes de comenzar la extensión.
¿Cómo sabíamos que queríamos establecer el extremo izquierdo de nuestra extensión en 770 píxeles y el extremo superior en 150 píxeles? Bueno, a decir verdad, no lo sabíamos. En realidad lo adivinamos; colocamos el gráfico en la página y asignamos valores a los atributos Left y Top de la extensión. A continuación, abrimos la HTA y miramos los resultados. Como es de esperar, nos falta un poco, así que ajustamos los valores, actualizamos la HTA y miramos otra vez. Lo hicimos unas pocas veces hasta que, como Rubiales, encontráramos algo que fuera precisamente adecuado.
Nota: Imaginamos que conoce la historia de Rubiales y los tres osos, sus camas y sillas, el caldo que estaba demasiado caliente o demasiado frío, etc. Y no, no estamos seguros si Rubiales se podría considerar una gran filósofa o no. Pero podría argumentar que, viendo cómo ella no tuvo problemas en entrar en la casa de alguien, comer su caldo, sentarse en sus sillas y dormir hasta tarde en sus camas, definitivamente tenía una filosofía muy propia.
De todos modos, la figura 4 muestra cómo se ve ahora nuestra HTA. De acuerdo, quizá no sea una obra de arte, pero por otra parte, nos gustaría ver cómo Picasso imprimiría información mediante programación encima de un gráfico.
Figura 4** El poder de style **
Hablando de eso, ¿cómo imprimimos información encima de un gráfico mediante programación? Bueno, tenemos buenas noticias para usted: por fin es tiempo de hablar acerca de nuestra subrutina Window_OnLoad, mostrada en la figura 5.
Figure 5 Subrutina Window_OnLoad
Sub Window_OnLoad
Set objNetwork = CreateObject(“Wscript.Network”)
strUser = objNetwork.UserDomain & “\” & objNetwork.UserName
strComputer= objNetwork.ComputerName
UserData.InnerHTML = “<p align = ‘center’> “ & _
“<font style=’font-size:18pt;color:white’>” & _
strUser & “<br>” & strComputer & “</font></p>”
End Sub
Sabe, ahora que miramos un poco más de cerca esta subrutina, vemos que realmente no hay tanto de que hablar, ¿verdad? Como puede ver, primero creamos una instancia del objeto Wscript.Network. A continuación, usamos estas líneas de código para recuperar el nombre de usuario, de dominio y de equipo:
strUser = objNetwork.UserDomain & “\” & _
objNetwork.UserName
strComputer= objNetwork.ComputerName
Por supuesto, esto resulta ser la información que queremos escrita en la ventana de nuestra HTA. Todo lo que queda por hacer es combinar las variables strUser y strComputer con un pequeño etiquetado HTML y, a continuación, asignar la cadena resultante a la propiedad InnerHTML de nuestra extensión:
UserData.InnerHTML = _
“<p align = ‘center’> “ & _
“<font style=’font-size:18pt;color:white’>” _
& strUser & “<br>” & strComputer & _
“</font></p>”
Somos conscientes de que es un fragmento de código de aspecto complicado. Pero no es para tanto. Parece complicado simplemente porque combinamos varios elementos en una sola cadena. Comenzamos con una etiqueta del párrafo de apertura, que especifica que queremos centrar texto en el párrafo.
“<p align = ‘center’> “
A continuación, se encuentra una etiqueta de fuente de apertura, que especifica que debemos usar texto en blanco de 18 puntos:
“<font style=’font-size:18pt;color:white’>”
StrUser es la variable que contiene nuestro nombre de usuario, con el formato Dominio\Nombre de usuario. "<br>" inserta un salto de línea. Insertamos esto para que el nombre de usuario aparezca en una línea y el nombre de equipo aparezca en una segunda línea. strComputer es la variable que contiene el nombre de nuestro equipo. Por último, agregamos las etiquetas de fuente de cierre y de párrafo:
“</font></p>”
Cuando observa las partes individualmente puede ver que el código no es tan complicado como pensaba.
A propósito, puede posicionar casi cualquier elemento HTML que desee. Por ejemplo, supongamos que le gustaría tener un botón centrado debajo del gráfico. Para ello, simplemente lo agrega a su código de la HTA:
<input type=”button” value=”Test Button” style=”position:absolute;left:820px;top:300px”>
Deberá obtener una HTA similar a la de la figura 6.
Figura 6** Un botón encantador **
Nuevamente, tendrá que jugar un poco hasta conseguir posicionar correctamente el botón, pero no llevará demasiado tiempo. De hecho, si está dispuesto a realizar los cálculos, probablemente pueda determinar con antelación la posición correcta. Todo lo que necesita saber es el ancho y alto de cada objeto, algo que puede especificar mediante el parámetro style, y el ancho y alto de la ventana de la HTA. De forma predeterminada, por lo menos en el equipo de prueba de los encargados del scripting, las HTA tienen aproximadamente 1020 píxeles de ancho por 685 píxeles de alto (por supuesto, los resultados pueden variar). Si no hace otra cosa, puede comenzar con esos valores y, a continuación, ajustarlos para que satisfagan sus requisitos.
Obviamente ésta es una introducción demasiado breve a CSS, pero puede usarla como punto de partida para hacer hermosas sus scripts. Los filósofos pueden despreciar esos esfuerzos y decirle que la verdadera belleza de un script viene desde dentro, no desde fuera. Pero véalo de esta manera. ¿Quiénes son los filósofos más grandes de todos los tiempos? Efectivamente: Platón, Sócrates, Aristóteles, esas personas. Con eso en mente querríamos plantear una pregunta: ¿ha visto alguna vez una fotografía de cualquiera de esos filósofos? ¿No encuentra interesante que no exista ninguna fotografía de las personas que dicen que la belleza no importa? ¿No le parece extraño? Algo para pensar.
Los encargados de las secuencias de comandos de Microsoft trabajan para (bueno, son empleados de) Microsoft. Cuando no juegan al béisbol, ni entrenan ni lo ven (u otras actividades varias), dirigen TechNet Script Center. Visite la página web www.scriptingguys.com.
© 2008 Microsoft Corporation and CMP Media, LLC. Reservados todos los derechos; queda prohibida la reproducción parcial o total sin previa autorización.