RSS-Feed anzeigen

zocka

Write less, do more - ein Manialink Konzept

Bewerten
In meinem neu eingerichtet Blog hier kann ich nun etwas die Früchte meiner Arbeit der letzten Tage vorstellen. Aus eigentlich anderem Antrieb hatte ich mir überlegt, wie toll es doch sein könnte, wenn man Manialinks auch für Einsteiger relativ simpel formatierbar macht - Einsteiger, die vielleicht vorher eher mit html und css gearbeitet haben.

Angedacht, getan: als Dreh- und Angelpunkt meines neuen Projektes entstand eine Klasse, die Methoden wie getElementById, getElementsByClass und getElementsByTag bereitstellt. Diese erhält den Manialink vor der Ausgabe und "rendert" ihn dann.

Als Ergebnis meiner Tests entstand dieser Manialink:
Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	preview1.jpg 
Hits:	532 
Größe:	47,9 KB 
ID:	891
Klar, nichts besonderes, sieht fürchterlich aus, war aber auch nicht sehr arbeitsintensiv

Nun der interessante Teil:
Spoiler: Der xml-Code, den ich vorgegeben habe war lediglich folgender:


Hier fällt wohl zunächst auf, dass dort sehr wenig steht. Weiterhin hat jedes Element ein class oder id Attribut (was in der letztendlichen Anwendung nicht zwingend nötig wäre). Außerdem finden sich gleich zu beginn die beiden fremden Tags
Code:
<style href="styles.css" />
<script src="script.mq" />
Ersterer legt die Vermutung nahe, dass hier irgendein Stylesheet am Werk ist (Beachte: seit der Einführung von <stylesheet> ist die Benennung hier vlt etwas unglücklich - es besteht kein Zusammenhang!)
Auf den zweiten Tag komme ich noch zu sprechen.

ManialinkStyleSheets
Was steht aber nun in dieser styles Datei? (Die Endung ist mehr oder weniger egal, css bietet sich wegen der Struktur aber an ^^)
Spoiler:

Die meisten der vorkommenden Attribute sind native Manialink Attribute, die dann stupide übernommen werden. Auf der anderen Seite gibt es auch einige abgekürzte Attribute, die später übersetzt werden (color->textcolor/bgcolor, x/y/z/width/height sind klar). Weiterhin gibt es ein paar schicke Attribute, die gewisse Dinge automatisieren. Im Beispiel findet sich "border" (border-top/left/right/bottom sind auch möglich) mit Farbe und Dicke - im Bild oben sieht man die eingerahmten weißen Quads.
Ein anderes Beispiel wäre strip-tags: (format|color|all);. Als Anwendungsbeispiel könnte man damit z.B. sämliche Nicknameformatierungen in einer Shoutbox rausschmeißen.

Wem sich nun noch die Frage stellt "Wozu das Ganze?":
Oben sind zwar hauptsächlich ids verwendet, aber sobald man mehr mit classes arbeitet kann man sich einiges an Arbeit sparen indem man nicht alles doppelt und dreifach formatieren muss.

Damit komme ich eigentlich auch schon zum zweiten großen Punkt:
ManiaQuery
Wen das Motto aus dem Titel an jQuery erinnert, wird im Folgenden noch einige Ähnlichkeiten finden.
Hiermit gehe ich auf den zweiten der oben genannten Tags ein.
Spoiler: Was verbirgt sich hinter dieser Datei?

Letztlich ist es nichts abschließend Sinnvolles und von mir nur zu Testzwecken erstellt. Ähnlich wie bei jQuery werden an einen selector Funktionen geknüpft. (Die Klasse Navi gibt es im Bild oben nicht mehr, es wurde ja auch nichts sinnvolles mit ihr gemacht, aber der ManiaQuery Code ist hier doch recht interessant.) Zur Funktionsweise der dargestellten Funktionen will ich hier nicht viel sagen - das meiste erklärt sich auch selbst.
Das interessante aber ist, dass im Hintergrund alles notwendige gemacht wird, damit die Elemente tun können was sie sollen. Mit $(selector).clock(); lässt sich eine laufende Uhr erstellen, die optional noch formatiert werden kann. (Auch wenn der Maniascript Aufwand hierfür überschaubar ist, ist mein ManiaQuery kürzer )
Besonders effektiv wird die Sache bei Klassen, wo automatisiert eine Funktion mit nur einem Aufruf auf alle gefundenen Elemente angewendet wird!
Der nächste Punkt ist, dass die Sache vor der Erstellung des Manialinks greift, eine ManiaQuery Funktion also noch automatisiert notwendige Elemente erstellen kann!


Damit werde ich meinen Einblick nun wohl auch schon beschließen - es ist erstmal genug zu lesen

Da das Projekt noch nicht allzu alt ist, befindet es sich noch in einer sehr frühen - z.T. instabilen Phase mit einigen Fehlern.
Sollte euch die Sache interessieren, kann ich in diesem Blog gerne meine Fortschritte teilen.

Mich würden eure Meinungen zu und vlt Erwartungen an das Projekt interessieren!

"Write less, do more - ein Manialink Konzept" bei Facebook speichern "Write less, do more - ein Manialink Konzept" bei Twitter speichern "Write less, do more - ein Manialink Konzept" bei Mister Wong speichern "Write less, do more - ein Manialink Konzept" bei Google speichern "Write less, do more - ein Manialink Konzept" bei del.icio.us speichern "Write less, do more - ein Manialink Konzept" bei Webnews speichern

Kommentare

  1. Avatar von TomRiddle
    Sehr interessantes Projekt. Ich hab selbe auch schon mal ähnliches gemacht was so vage in die Richtung geht und finde das darum auch sehr interessant, da ich zwar mal über ein maniaquery nachgedacht habe (hat mal einer im Forum erwähnt) aber das nicht umgesetzt habe und dann auch anders gemacht hätte.

    Von den Funktionen glaube ich kann das ganze sehr praktisch werden. Allerdings sehe ich eventuell einen Nachteil in dem ganzen preprocessing.
    Allgemein finde ich auch, dass das eher für Anfänger geeignet ist.
    Ich würde mich jetzt noch brennend dafür interessieren, wie das ganze in ein eigenes manialink script integriert wird bzw wie man auf deinem "system" aufbaut. Wäre vielleicht was für deinen nächsten Blogpost