Month: November 2008

Shell Scripting notes

Eight years ago, back in 2000, I was decided to learn shell scripting. I found the Bourne Shell Programming book by Robert P. Sayle a very good way to start, so I began my way through it, reading the concepts, making the exercises and taking advantage the opportunity to write a sort of personal notes (in Spanish) using LyX (a text processor I liked very much at the moment).

Some time later I submitted the notes to the GPUL mailing list and they were posted at the research groups page. Unfortunately, there’s no way to access the notes from there, because a disk failure and the website revamping got them lost. It’s a pity, because not even the Internet Archive preserves a copy of them.

Those notes have a symbolic value for me. They served as a basis for later bash scripting courses I taught and, after many changes and adaptations, are still the main inspiration for the shell scripting slides used in the Caixanova Free Software Master.

For that reason, today I did a bit of computer archaeology and searched through my old backups until I found it. Now that this material is back, I want to share it with all of you:

Enjoy it!

Spanish version / versión en español:

Hace ocho años, allá por el 2000, me decidí a aprender shell scripting. Descubrí que el libro Bourne Shell Programming de Robert P. Sayle era una muy buena forma de empezar, así que inicié mi camino a través de él, leyendo los conceptos, haciendo ejercicios y aprovechando la oportunidad para escribir una especie notas personales (en español) usando LyX (un procesador de textos que me gustaba mucho en aquel momento).

Algún tiempo después envié las notas a la lista de correo de GPUL y fueron publicadas en la página de grupos de investigación. Por desgracia, no hay forma de acceder a las notas desde allí, porque un fallo de disco y la remodelación del sitio web hicieron que se perdieran. Es una pena, porque ni siquiera el Internet Archive guarda una copia de ellas.

Esas notas tienen un valor simbólico para mi. Sirvieron como base para cursos posteriores de scripting bash que impartí y, tras muchos cambios y adaptaciones, son aún la inspiración principal para las transparencias de shell scripting usadas en el Master de Software Libre de Caixanova.

Por esa razón, hoy hice un poco de arqueología informática y estuve buscando en mis viejos backups hasta que lo encontré. Ahora que este material ha reaparecido, quiero compartirlo con todos vosotros:

  • Notas sobre Shell Scripting (versión PDF): bash.pdf
  • Notas sobre Shell Scripting (archivo con versiones LyX, tex, ps y HTML): articulo_scripting.tgz

Disfrutadlo!

How to interact with an SVG image from an HTML document

Did you know that modern browsers already implement builtin support to visualize SVG drawings? And that you can make changes on them from the HTML document and make changes into the document from the SVG? In this post I’m going to explain all that through a simple example.

To create the SVG document you can use Inkscape. This program has a nice feature that allows you to edit attributes of particular nodes. For instance, you can select such a node, open the XML editor (Edit –> XML Editor…) and add a new attribute onclick to the node with the value:

javascript:window.parent.document.form1.bodypart.value='head';

When you’ve finished, just save the document as “plain SVG” to prevent compatibility problems.

Let’s go to the HTML part now. The easiest way to show the SVG in the document is by using an “embed” tag:

<html>
<body>

<h1>Anatomy of a smiley</h1>

<form name="form1">
Body part: <input type="text" name="bodypart" /> <br/>
</form>

<embed id="smiley" src="smiley.svg" width="745" height="1053" />

</body>
</html>

But that’s not enough. If you want to change SVG attributes using javascript, just add this code:

<script type="text/javascript">
   function changeColor(color) {
   var path=document.getElementById("smiley")
      .getSVGDocument()
      .getElementById("path2383");
   path.style.setProperty("fill",color, "");
   }
</script>

[...]

Color: <input type="text" name="color" value="#FFFF00" /> <br/>

<input type="button" value="Change color"
 onclick="javascript:changeColor(this.form.color.value);"/> <br/>

And that’s all. Now you have bidirectional knowledge between your HTML document and your SVG document. Take a look here to see the whole example.

There are still pending issues, like embedding the SVG code as part of the HTML source. That can be done including the proper DTDs and making sure that the document is interpreted as XHTML (that’s the most important think). Here is a modified version of the previous example to illustrate that, but I hadn’t been able to resolve nodes using this kind of embedded drawings.