“Sorcerers are convinced that all of us are a bunch of nincompoops. We can never relinquish our crummy control voluntarily, thus we have to be tricked.”
Carlos Castaneda

Tales of Power

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