Die Webvisitenkarte für Tiergestützte Pädagogik und Förderung im Vogelsberg von Elisabeth Rathay-Spohr.

Gestaltung (Webdesign und Flyer) und Entwicklung von macrominds.

Zertifizierte Fachkraft für tiergestützte Pädagogik und Förderung

Download Limited Categories Widget v0.1

Install it like any other plugin by simply uploading the extracted zip (the folder) to your wp-content/plugins/ directory.  Don’t forget to activate the plugin using the admin-web-interface of your blog.

Note: Since “limited categories” is a widget, you will need a wordpress-version compatible to widgets. Wordpress 2.2 should work. However, I just tested Wordpress 2.8.6.

If you notice any problems or bugs or if you have suggestions for improvements, just leave a comment.

Please notice that this is version 0.1 of the plugin, so don’t expect it to have much features or to be very comfortable. I hopefully will have the time to improve this plugin.

overflow:auto/hidden/scroll , etc

So if you have a css like this:

   @media all{
      html{
         /*fix ugly jumps for horizontally centered content when scrollbar appears*/
         overflow-y:scroll;
      }
      #content {
       /*create a separate floating space*/
         overflow:auto;
      }
   }

just add the following:

   @media print{
      html, #content{
        overflow:visible;
      }
   }

About the design

I wanted to keep the effect simple to use, yet flexible.

So the only thing you need to do is create a dynamic TextField, type your text, convert it to a MovieClip and assign the BaseClass TypeWriterTextField. That’s it.

I implemented a few hooks for you to customize the effect or to receive events, when characters are typed (in order to play a sound or something) and when it’s finished typing characters.

Note however, that I implemented it for a pretty much limited use-case, so it may be limited to simple texts. It can handle linked TextFields, but no HTML-Texts.

Screencast

A short screencast showing the usage of standard-TypeWriterTextField:

Extending / customizing

Customizing should be done by extending TypeWriterTextField and overriding methods.

You can adapt the typing speed to your needs, by overriding the following function


protected function getTimerDelayMS():Number{
return 50;
}


The function returns 50ms delay between each character-typing by default, return any value in milliseconds to adapt it.

The following methods can be overriden to react on events:


protected function onTypeEvent(typedCharacter:String){
}
protected function onFinishedTyping(){
}


The first method will be called each time, a character is typed and will be passed the character that has just been typed as parameter typedCharacter

The second method will be called once the typing effect finished, when all characters have been typed.

How it works

Upon creation, the TypeWriterTextField scans it children. The first TextField instance found will be used to determine which text to type. It’s text will be stored and then cleared. A timer is used to type the characters. Typing is performed by adding the next character to the original TextField’s .text-attribute.

Download

typewritertextfield v0.1

To read this article, you should have a glance on the TinyButStrong-manual and you should have an idea of the way TinyButStrong works, .

Let’s say you have managed to represent your website as a model of php-classes.

You have created a class Document, which provides the method getContentParagraphs() among others. This method returns an array of objects of the type Paragraph.

The class Paragraph provides the method getRichText() (and getTitle(), getSubTitle() and so on).

So a single page on your website can contain a list of n documents with m paragraphs. Paragraphs cannot be represented directly, but due to calling the method getRichText().

The easiest way would be to work with arrays. But let’s say, you don’t want to reprocess your clean object-oriented-stuff to tons of arrays, only for a Template-Engine.

Here comes the code. The example classes first (uncomplete, only for you to have an idea):

/*DOCUMENT.php*/
class Document{
  private $contentParagraphs = Array();
  private $title;
  public function &getContentParagraphs(){
    return $this->contentParagraphs;
  }
  public function &getTitle(){
    return $this->title;
  }
  ...
}

/*PARAGRAPH.php*/
class Paragraph{
 private $richtext;
 public function &getRichtext(){
  return $this->richtext;
 }
 ...
}

And here’s how you would manage to implement the presentation with TinyButStrong:

/*index.php*/
/*your logic already built the model, you retreive an array of Document-objects:*/
$documents = $controler->getCurrentFolder()->getDocuments();
//Here comes TinyButStrong
//include and initialize the template engine
include_once('tbs/tbs_class_php5.php') ;
$TBS = new clsTinyButStrong("", "tbs") ;
$TBS->LoadTemplate('templates/overview.xhtml') ;
/*TinyButStrong handles objects, so all we need to do to be able to display our
documents is to make the array $documents visible (giving it the name 'tbsArticleList'),
which is an array of Document-objects:*/
$TBS->MergeBlock('tbsArticleList', 'array','documents');
/*
Here comes the tricky part:
TinyButStrong cannot handle nested blocks (afaik), but needs to be provided so called dynamic
queries. %p1% is a parameter, that must be set in the template itself.
The engine just analyzes any part of the query (the third parameter) and seems not to
care about -> or [] syntax.
The aim of the query is to take the '%p1%'th element of the list documents
(which is a Document-object) and to call the method getContentParagraphs() on it.
*/
$TBS->MergeBlock('tbsParagraphList','array','documents[%p1%][getContentParagraphs]');
$TBS->Show() ;

Here comes the template (without any xhtml, because that just doesn’t matter here):
Note, that htmlconv=no is set, because I use richtext, which may contain html-tags.
I just don’t want them to be escaped. Simply skip htmlconv, if you want to escape html-tags.

<!-- start the list of documents-->
[tbsArticleList;block=begin]
 <!-- display the title of the document / article -->
 [tbsArticleList.getTitle();htmlconv=no]
 <!--start the list of paragraphs for each document, by assigning the parameter p1 the index of
the current article. This is done using the .$ syntax. It is important to wrap extra brackets
around this part, otherwise it will not be evaluated. -->
 [tbsParagraphList;p1=[tbsArticleList.$];block=begin]
  <!-- call the method getRichtext() on the currently iterated paragraph -->
  [tbsParagraphList.getRichtext();htmlconv=no]
 [tbsParagraphList;block=end]
[tbsArticleList;block=end]

That’s it. Pretty simple, he? Just the fact, that the documentation doesn’t cover it can be annoying..

Für flexible Dreispalten-Layouts verwende ich YAML.

Folgendes Layout soll flexibel erzeugt werden:

Die Spalten 1 (links) und 2 (rechts) sollen jeweils 25% der Gesamtbreite einnehmen und mit Hintergrundgrafiken versehen sein. Die Grafik der Spalte 1 soll sich am rechten Rand der Spalte 1 ausrichten und die Grafik der Spalte 2 am linken Rand der Spalte 2.

Verändert man dann die Größe des Browserfensters und somit die Größe der Spalten bleibt der in der Grafik gezeigte rote Verlauf somit immer am inneren Rand der Spalten.

Der Autor von YAML, Dirk Jesse, verweist in einem Abschnitt zu grafikfreien Spaltentrennern auf Faux-Columns. Diese Technik ließe sich zwar grundsätzlich für mein Ziel einsetzen, ermöglicht aber kein liquid Design, man ist auf ein fixes Layout festgelegt.

Eine weiteres Problem ist, daß die Spalten selbst nicht als Träger der Hintergrundgrafiken taugen, da sie nur so hoch sind, wie ihr Inhalt. Im YAML-Layout “layout_3col_vlines_v1.html”, das ich hierfür einsetze, wird die Spaltenordnung 1-3-2 eingesetzt, was bedeutet, dass nur Spalte 3 garantiert über die volle Höhe aller Spalten geht.

Die Lösung:

YAML verwendet ein Div mit der ID main als Eltern-Container für die Spalten.
Dieses Div alleine reicht für die Lösung nicht aus, es wird noch ein zusätzliches umrandendes Div benötigt:

   <div class="main">
      <div class="main2">
         <!-- YAML columns -->
      </div>
   </div>

Folgendes CSS definiert die Hintergrundgrafiken left_bg.gif und right_bg.gif:

.main{
   background-image:url(images/left_bg.gif);
   background-repeat:repeat-y;
   background-position:25% 0%;
}
.main2{
   background-image:url(images/right_bg.gif);
   background-repeat:repeat-y;
   background-position:75% 0%;
}

Der Kern der Sache ist, die Grafiken wie folgt zu erstellen:
Angenommen unsere Spalten haben eine maximale Breite von 100px, die vollständig mit einem Verlauf versehen sein soll, dann müssen unsere Hintergrund-Grafiken eine Breite von 400px besitzen.
In der Grafik left_bg.gif muss der Verlauf ganz links in der Grafik sitzen, der Rest ist transparent.
In der Grafik right_bg.gif muss der Verlauf ganz rechts in der Grafik sitzen, der Rest ist transparent.
Die folgende Grafik verdeutlicht das:

Zum Hintergrund – oder “warum ist das so?”

background-position ist ein wenig speziell, aber eigentlich genial:
background-position: 50% 50%; definiert, dass das Hintergrundbild zentriert dargestellt wird.

Das bedeutet, dass der Pixel des Hintergrundbildes, der auf 50% der Breite des Hintergrundbildes sitzt, auf 50% der Container-Breite dargestellt wird.

Das bedeutet im Rückschluss:
background-position:25% 0%;
definiert, dass der Pixel des Bildes, der auf 25% der Bildbreite sitzt auf 25% der Container-Breite ausgerichtet wird.
Wenn ich ein Bild rechtsbündig auf 25% der Container-Breite ausrichten will, muss ich es in der vierfachen Größe bereitstellen, als es eigentlich darstellen soll.
Will ich ein Bild linksbündig auf 75% der Container-Breite ausrichten gilt das gleiche.

Nennen wir es Advanced Faux-Columns.

Vielleicht hilft das ja dem ein oder anderen.