“And thus you will dance to your death here, on this hilltop, at the end of the day. An din your last dance you will tell of your struggle, of the battles you have won and of those you have lost; you will tell of your joys and bewilderments upon encountering personal power. Your dance will tell about the secrets and about the marvels you have stored. And your death will sit here and watch you.”
Carlos Castaneda

Journey to Ixtlan

Yoga Asana Practice Sequences meet WordPress & HTML

n

I’ve been gradually looking for better ways to display and communicate asana and practice sequences:

  1. It started with some basic hand drawings which were clumsy because I had to use a marker instead of a fine pen to get a result that would scan and display properly on screen.
  2. I’ve described some asana in depth with photographs and animation.
  3. At one point I started drawing some stick figures.
  4. I then began aggregating stick figures into practice sequences.
  5. Until a few days ago, as I was working on documenting another sequence and I began to think “there has to be a better way to do this”.

Well I’m happy to say that now there is. I’ve used a semantic (predefined) structure of HTML together with some CSS and Javascript that arange and transform the HTML text into a visual practice sequence. It uses a set of images (which can be enriched and modified regardless of the script) which are inserted instead of the posture names (which are actually the file names). You would need a basic understanding of HTML tags to use it.

It’s not as user-friendly as it could be and I have some ideas on how to enhance it and make it easier to use – but implementing that goes beyond my programming skills. So if you’re a WordPress plugin author with experience in Javascript – please do contact me – I’d love to work with you on this.

Here’s an example of how it works. Following is an image of a practice sequence – it is one large JPG file:

Next is a semantic HTML representation of that practice. If you understand Yoga and basic HTML structuring then you should be able to quickly see the underlying structure – I’ve kept it fairly simple:

<div class="asana-practice-sequence">
<ol>
	<li class="sequence-container">
		<div class="sequence">
			<div class="asana">samasthiti</div>
			<div class="breath">breath-inex</div>
			<div class="asana">tadasana</div>
		</div>
		<div class="instructions">
			<div class="breath">r3</div>
		</div>
	</li>
	<li class="sequence-container">
		<div class="sequence">
			<div class="asana">samasthiti</div>
			<div class="breath">breath-inex</div>
			<div class="asana">tadasana_v-backbend</div>
		</div>
		<div class="instructions">
			<div class="breath">r3</div>
		</div>
	</li>
	<li class="sequence-container">
		<div class="sequence">
			<div class="asana">samasthiti</div>
			<div class="breath">breath-inex</div>
			<div class="asana">tadasana</div>
			<div class="breath">breath-exin</div>
			<div class="subsequence">
				<div class="sequence">
					<div class="asana">uttanasana</div>
					<div class="breath">breath-inex</div>
					<div class="asana">ardha-uttanasana</div>
					<div class="breath">breath-exin</div>
					<div class="asana">ardha-uttanasana</div>
				</div>
				<div class="instructions">
					<div class="guide">midrange-micromovement-static</div>
				</div>
			</div>
		</div>
		<div class="instructions">
			<div class="breath">r3</div>
		</div>
	</li>
</ol>
</div>

And here’s how that code is rendered with CSS and a Javascript:

If images are not showing – refreshing the page may correct it!

  1. samasthiti
    breath-inex
    tadasana
    r3
  2. samasthiti
    breath-inex
    tadasana_v-backbend
    r3
  3. samasthiti
    breath-inex
    tadasana
    breath-exin
    uttanasana
    breath-inex
    ardha-uttanasana
    midrange-micromovement-static
    r3

The benefits:

  • Easy: very easy and quick authoring of practice sequences.
  • Green: each posture is a very small file (as opposed to larger images with whole practice sequences) – resulting in a small and lightweight page.
  • Adapatable: alternate image sets could be used for different representations of the same practice: stick figures, photos, body illustrations, male, female, etc.
  • Scalable: the script can be configured for automatic scaling/resizing of images.
  • Printable?: I haven’t tested this yet – but I have created high (print resolution) graphics which are scaled down by the script. Zooming in reveals that the images are indeed on high resolution and so I have a feeling they may print well too.

There are still a few issues to tweak and finalize – but is does work 🙂

Thanks: To create this I had to use Javascript which I haven’t used in quite some time – I hate it as a programming language and I love what it can do. I was motivated to use it again (a disturbing and aggravating learning curve) by the inspiration I experienced in helping my teacher move into WordPress. Thank you Paul, again and again, for your inspiring presence.

Note: I haven’t and probably won’t test or maintain this script for Internet Explorer (any version – old or new). It was developed with and works with Mozilla Firefox. If you are a Yoga practitioner and can relate to Svatantra then I recommend you stop using Internet Explorer and start using an open-source browser like Firefox and other open-source applications.

This entry was posted in Asana, Open Source, outside, Practice Sequences, Tech Stuff, Wordpress, Yoga, Yoga & I. You are welcome to add your comment