iX und die fehlende Dokumentation

Im iX-Special 1/2007 wird angemerkt, dass Prototype und Scriptaculous keine Dokumentation bzw. Turorials liefern. Mir ist nicht bekannt wie lange das schon der Fall ist, aber es gibt sehr wohl Dokus:

• Prototype API Documentation
• Prototype Tips and Tutorials
• scriptaculous wiki
• scriptaculous Usage
  
• scriptaculous FAQ
  

Video: The JavaScript Programming Language

Douglas Crockford von Yahoo! über JavaScript:

[via Digg]

C64 Wordpress Theme

Echt retro: blog.elinc.ca/rod
(JavAscript wird man wohl aktivieren müssen)

[via Robert Basic]

7 JavaScript Techniken, die man kennen sollte

Dustin Diaz, der erst neulich von Yahoo! zu Google wechselte um dort als Interface-Designer zu arbeiten, hat eine Liste von 7 JavaScript-Techniken zusammengestellt, die jeder kennen und auch verwenden sollte:

digital-web.com/articles/seven_javascript_techniques

[via Dustin Diaz]

Dojo goes offline

Vom Dojo JavaScript Toolkit, dass auch durch seine Ajax-Funktionen bekannt ist, gibts jetzt eine neue Version, das Dojo Offline Toolkit. Wie der Name schon sagt ist das Toolbit auf Offline-Web-Anwendungen zugeschnitten, ein Schwerpunkt, auf den auch Mozilla mit Firefox3 großen Wert legt.

www.dojotoolkit.org
www.dojotoolkit.org/dojo-offline-beta-released-toolkit-offline-web-apps

[via O'Reilly Radar]

Feeds parsen in JavaScript leicht gemacht

Google hilft nun auch beim clientseitigen (JavaScript/Ajax) parsen von Feeds (JSON und XML):

Google AJAX Feed API
Dokumentation
API-Key holen

(Achtung! JavaScript muss nicht jeder aktiviert haben. Außerdem können nur die wenigsten Suchmaschinen-Bots und Handy-Browser damit was anfangen.)

[via Blogoscoped]

JavaScript Kurzreferenz

(Für die Schule; nur ausgewählte Methoden!
Beispiele von SelfHTML übernommen.)

document
erzeugen von HTML-Knoten
document.createAttribute(AttributeName);
Attributknoten erzeugen

var Ausrichtung = document.createAttribute("align");
Ausrichtung.nodeValue = "right";
var Element = document.getElementsByTagName("h1")[0];
Element.setAttributeNode(Ausrichtung);

document.createElement(TagName);
Elementknoten erzeugen

var myH1 = document.createElement("h1");
var myText = document.createTextNode("Eine sehr dynamische Seite");
myH1.appendChild(myText);
var Ausgabebereich = document.getElementById("Bereich");
Ausgabebereich.appendChild(myH1);

document.createTextNode(Text);
Textknoten erzeugen

var Zeitstempeltext = document.createTextNode(document.lastModified);
var TextZuvor = document.createTextNode("Datum des letzten Updates: ");
document.getElementById("Absatz").appendChild(TextZuvor);
document.getElementById("Absatz").appendChild(Zeitstempeltext);

---

node
hinzufügen, kopieren, löschen von Knoten, ermitteln von Werten der Knoten

node.appendChild(Element/TextNode);
Kindknoten hinzufügen
node.appendData(NodeValue);
Zeichendaten hinzufügen

var Rest = document.createTextNode("vollkommen!");
document.getElementById("Absatz")
.firstChild.appendData(Rest.nodeValue);

node.cloneNode(true);
Knoten kopieren

Dolly2 = document.getElementById("Dolly").cloneNode(true);
document.getElementById("Dolly").firstChild.nodeValue += Dolly2.firstChild.nodeValue;

node.deleteData(Start, Anzahl);
Zeichendaten löschen

var AnzahlZeichen = document.getElementsByTagName("p")[0].firstChild.nodeValue.length;
document.getElementsByTagName("p")[0].firstChild.deleteData(0, AnzahlZeichen);

node.insertBefore(Element/Node, childNode);
Knoten einfügen

var neuB = document.createElement("b");
var neuBText = document.createTextNode("mit fettem Text ");
neuB.appendChild(neuBText);
document.getElementById("derText").insertBefore(neuB, document.getElementById("derKursiveText"));

node.insertData(Position, Value);
Zeichendaten einfügen

document.getElementsByTagName("h1")[0]
.firstChild.insertData(7, "duemilauno ");

node.removeAttribute(AttributeName);
Attribut löschen

document.getElementById("rechts").removeAttribute("align");

node.removeAttributeNode(AttributeNode);
Attributknoten löschen

document.getElementById("rechts")
.removeAttributeNode(document.getElementById("rechts")
.getAttributeNode("align"));

node.removeChild(Child);
Knoten löschen

var Knoten = document.getElementsByTagName("ol")[0].firstChild;
verschwunden = document.getElementsByTagName("ol")[0].removeChild(Knoten);
alert(verschwunden.firstChild.nodeValue);

node.replaceChild(NewNode, Node);
Kindknoten ersetzen

var Textknoten = document.createTextNode("Du darfst!");
document.getElementById("z2").replaceChild(Textknoten, document.getElementById("z2").firstChild);

node.replaceData(Start, Anzahl, Value);
Zeichendaten ersetzen

var Text = "Du darfst!";
var rd_Start = 0;
var rd_Laenge = document.getElementById("z2").firstChild.nodeValue.length;
document.getElementById("z2").firstChild.replaceData(rd_Start, rd_Laenge, Text);

node.setAttribute(AttributeName, AttributeValue);
Wert eines Attributknotens setzen

document.body.setAttribute("bgColor", document.Formular.bgcolor.value);
document.body.setAttribute("text", document.Formular.text.value);

node.setAttributeNode(AttributeNode);
Attributknoten erzeugen

var Ausrichtung = document.createAttribute("align");
Ausrichtung.nodeValue = "center";
document.getElementsByTagName("h1")[0].setAttributeNode(Ausrichtung);

HTML–Elementobjekte:
InsertRow: Tabellenzeilen hinzufügen

var TR = document.getElementById("Tabelle").insertRow(Zeile);

deleteRow: Tabellenzeile löschen. Parameter ist die Nummer der zu löschenden Zeile.

document.getElementById("Tabelle").deleteRow(0);

createTHead: Tabellenkopfelement thead erzeugen.

document.getElementById("Tabelle").createTHead();

insertCell: Tabellenzelle in Tabellenzeile hinzufügen.

var TD = document.getElementById("Zeile").insertCell(5);

deleteCell: Tabellenzelle aus Tabellenzeile

löschen.document.getElementById("Zeile").deleteCell(0);

Array:
join: Array in Zeichenkette umwandeln

var Zahlenkette = Zahlen.join(" ");

pop: letztes Array-Element löschen

Zahlen.pop();
alert(Zahlen.length + " Zahlen im Array");

push: neue Array-Elemente anhängen

var NeuestesElement = Orte.push("Villach");

reverse: Elementreihenfolge umkehren

Name.reverse();

sort: Sortiert die Elemente eines Arrays.

Namen.sort();

String:
charAt: Zeichen an einer Position ermitteln

var Vollversion = navigator.appVersion.charAt(0);

concat: Zeichenketten zusammenfügen

var Name = Vorname.concat(Zuname);

indexOf: Position eines Zeichens ermitteln

var Suche = Aussage.indexOf("Mensch");

slice: Teil aus Zeichenkette extrahieren

var Extrakt = Begriff.slice(0, 4);

split: Zeichenkette aufsplitten

var Woerter = Satz.split(" ");

substr: Teilzeichenkette ab Position ermitteln

var Teil = Begriff.substr(5, 11);

substring: Teilzeichenkette ermitteln)

var Teil = Begriff.substring(5, 16);

toLowerCase: Alles klein schreiben

var neu = document.Test.Eingabe.value.toLowerCase();

toUpperCase: Alles groß schreiben

neu = document.Test.Eingabe.value.toUpperCase();

SelfHTML - Document: de.selfhtml.org/javascript/objekte/document.htm
SelfHTML - Node: de.selfhtml.org/javascript/objekte/node.htm
Gecko DOM Reference: mozilla.org/docs/dom/domref/dom_shortTOC.html
DOM:document: developer.mozilla.org/en/docs/DOM:document
DOM:event: developer.mozilla.org/en/docs/DOM:event
DOM:style: developer.mozilla.org/en/docs/DOM:style
DOM Definition: www.w3.org/DOM

//Updated@21.3.2007, 08:35
//Updated@27.3.2007, 17:50
//Updated@27.3.2007, 20:50

miniAjax

All for free, this site has some excellent DHTML and AJAX code you can download. Under Drag and Drop it even has the basics of an AJAX homepage!

Gratis Ajax-Scripte: Fenster, Bewertungen, Formulare, Tabs, JS-PopUp, Tooltipps, Reflexionen, Inline-Editor, RSS-Boxen, Umfragen, Drag&Drop, Fade-Effekte, Diagramme, Instant Messaging, Slideshow, Spy, Feld validation, Magnetic, Transparenz,... Was will man mehr? ;-)

www.miniajax.com

[via digg]

Just an Easy Blog

Folgendes: Einerseits bin ich mit Blogger sehr zufrieden, weil man unter anderem Bilder uploaden kann, ein guter aber übersichtlicher Online-Editor (Javascript) zur Verfügung steht, und auch sonst die Funktionen von XML-passiertem Blog-Design über Kommentar-Verwaltung und vor allem kostenloses Hosting bereit stehen. Andererseits fehlt mir schon lange die Flexibilität, die so ein Fertig-Blog (mag er noch so gut sein) eben nicht bieten kann. Eigene Eingriffe in den Code, Benutzerdefinierte Trackbacks/Pingbacks,...

Dadurch kam ich zuerst auf die Idee, Wordpress/Typo usw. zu nutzen und auf einem eigenen (eventuell anzuschaffenden Paid- oder Free-) Space zu hosten bzw. den Wordpress.com-Service zu nutzen. Doch auch da stießen meine Wünsche an ihre Grenzen. ;)

So kam ich nach einiger Zeit auf die Idee, einen eigenen Blog zu schreiben (welchen ich vielleicht auch irgendwann mal zum Download anbieten werde). Da ich bereits die Scriptsprachen PHP und JavaScript plus die Auszeichnungssprache HTML (mit CSS) einigermaßen gut beherrsche, sowie mit der OpenSource Datenbank MySQL recht gut zurechtkomme, lag es nahe, so viele dieser Techniken wie möglich zu verwenden. Und so entstand ungefähr folgendes "Konzept":

• So viele Funktionen wie nötig, soviel Übersichtlichkeit wie möglich...
• Im Frontend simples Design, jedoch durch JavaScript/Ajax dynamischer machen
• Übersichtliches, dynamisches Design
  
• Template System (Trennung von Logik (PHP) und Design (HTML))
• Rekursive Templates (Template A enthält Marker für Template B und C)
  
• Ein Blog pro System, mehrere User pro Blog/System
• Zwei Usergruppen: Admin und Autor (eventuell noch Gast)
• Kommentare und Track-/Pingbacks
• Benutzerdefinierte Trackbacks (Möglichkeit zum Speichern und automatischen pingen)
  
• Tags (Autovervollständigung im Editor, Tagwolke,...)
  
• HTML-Code in Blog-Posts, gewisse Tags sperren. Erweiterung: WYSIWYG-Editor
• RSS- und Atom-Feed(s)
• Buttons für Digg und co.
• Kleine Seitenverwaltung (Team, Impressum, Kontakt, Links,...)
• Statistiken (Referer, Browser, OS, Land, PlugIns,...)
• Zwischenspeichern (chachen) von Index sowie Feeds
  
• Schnell (Priorität liegt im Frontend, das Backend ist nicht zu vernachlässigen)
• Sauberer Code, OOP
  
• usw
• usw...

Irgendwann merkte ich, dass das etwas viel ist, und so kam ich auf die Idee einige Kollegen aus der Schule (denen ist sowieso immer Fad [: ) zu fragen, ob sie denn nicht Lust hätten, mitzucoden. Kurz darauf (10 Minuten) hatten sich zwei gefunden: R3dl!n3 (aka TheUncle) und chille! Ersterer ist allerdings momentan mit einem anderen Projekt beschäftigt. Chille, welcher bereits einige Web-Projekte am Laufen hat, ist momentan (hoffentlich) mit der Datenbankstruktur beschäftigt. ;)

So, das wars erst mal von JEB. Ich werde hier in nächster Zeit ein wenig über dessen Entwicklung berichten. Mit der (hoffentlich baldigen) Umstellung wird sich dann (hoffentlich) mein Tag (hier noch Label)-Wahn etwas legen. Und meine Leserschaft wird aktiver kommentieren. Hoffentlich!

Montlandung mit Canvas

Ein erneutes Canvas-Experiment: Moon Lander using the CANVAS tag

Easy CMS

Alle, für die Typo3 zu kompliziert ist oder die einfach nicht mehr brauchen, sollen sich mal das einfache CMS auf cms4u.at.tf anschaun! Ein Beispiel-CMS gibts auch.

Canvas

Mit Firefox 1.5 hat Firefox ein neues HTML Objekt für programmierbare Grafik bekommen: Canvas!

Was sich damit schon alles anstellen lasst, sehen Firefox (min. 1.5) Opera (min. 9) und Safari (min. 1.3) User hier:

• http://canvaspaint.org
• http://www.abrahamjoffe.com.au/ben/canvascape
• http://www.abrahamjoffe.com.au/ben/canvascape/textures.htm
  
• http://cow.neondragon.net/stuff/reflection
• http://caimansys.com/painter
• http://www.liquidx.net/canvasgraphjs/#examples
  

(InternetExplorer wird noch nicht vollständig unterstützt.)
Siehe auch: http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas