Einleitung

Diese Seite ist anders. Sie werden viele Rechtschreibfehler und unfertige Tutorials finden. Das Design ist eher wild und unstimmig. Dafür kann man mit Klick auf den Knopf im Kopf, die Hintergrundfarbe verändern. Es fehlt an vielen Funktionen. Entscheidend für mich ist dabei, dass mir dieser Zustand durchaus bewusst ist. Es hilft und motiviert weiter zu machen. Die Seite selbst wird dadurch zur Plattform für weitere Feststellungen und Erklärungen notwendiger Schritte um eine Internetseite einzurichten. Aus den Rechtscheibffehlern z.B., lässt sich ableiten, dass eine Kontrollinstanz in irgendeiner Form sinnvoll oder eigentlich notwendig ist. Eine solche Form der Absicherung kann auf sehr unterschiedliche Arten erfolgen. Möglich wäre eine Beurteiligung des Textes/Artikels in unfertig und fertig. Sollte der Text nicht abgeschlossen sein, könnte er, auch wieder auf verschiedene Wege, nicht angezeigt werden.
Aufgabe des Web-Design Bereiches dieser Seite ist es mögliche Denkmuster aufzuzeigen. Die hier forgestellten Ergebnisse spielen sich bewusst im OpenSource Umfeld ab. Nach langer Experimentierphase nutze ich bestimmte Programme und (Programmier-)Sprachen um meine Ziele umzusetzen. Die Erklärungen sollen jedoch trotzdem auch allgemeinnützlich verpackt werden. Wie weit das immer gelingen wird, ist eine andere Frage.

Warum Webdesign?

Aus meiner Perspektive würde ich sagen, dass mir die zu erlernenden Sprachen sehr gut gefallen, weil es sich beim Internet um das wahrscheinlich wichtigste Medium unserer Zeit handelt, die Möglichkeiten und Quellen nahezu unbegrenzt erscheinen, ich auf meine Weise mit dem Internet wachse und mir z.B. auch die Vorstellung, sich über das erworbene Wissen auszutauschen sehr gefällt.

Webdesign

Programmierung und Gestaltung einer Internetseite

Die Programmierung und Gestaltung einer Internetseite, erfordert je nach Anspruch, Fähigkeiten, heranziehbaren Grundgerüsten und je nach größe des Teams eine sehr genaue Vorbereitung und Planung. Doch selbst wenn alle Punkte gut zusammenspielen, können sich sehr leicht Fehler einschleichen. Mit fortschreitender Übung wird es ohne Frage einfacher, Fehler von Anfang an zu vermeiden oder sie schnell zu identifizieren und zu lösen.

Die hier vorliegende Seite ist sowohl positives als auch negatives Beispiel. Es scheint daher sinnvoll die Stärken und Schwächen dieser Testseite zu analysieren. Die gewonnenen Erkenntnisse werden Aufschluss über die erforderlichen Schritte geben, die für eine gut funktionierende Seite notwendig sind. Sollten Sie diese Seite zu einem Zeitpunkt aufrufen, zu welchem dieser Text auf der ersten Seite steht und nicht mit einem festen Datum versehen ist, befinden sich höchstwahrscheinlich sowohl die Seite insgesammt als auch dieser Artikel selbst in einem Entstehungsentwicklungsveränderungsprozess.(11.12.09)

Ich versuche den Code einfach und simpel zu halten, problematisch ist jedoch, dass er dadurch nicht unbedingt optimal zu nutzen ist und weiter überarbeitet werden sollte. Zu dem gegebenen Zeitpunkt handelt es sich um 537 Zeilen Code und Text. Die Funktionen sind sehr eingeschränkt.

Was bietet diese Seite im Moment dieser Bildschirmaufnahme an 1./2./3.?

1. Möglichkeiten
2. Effekten
3. Inhalten

1. Die Möglichkeiten beschränken sich aus Sicht der gewohnten Interaktion, auf teilweise anklickbare Bilder. Auf sie selbst verlinkt hierbei ein, das jeweilige Bild umschliessender Link.
2. Wenn man mit der Maus über das jeweilige li-Element fährt, bewegen sich die Texte der Menüpunkte, auf der linken Seite, nach rechts. Die li-Element sind alle Kinder des divs mit dem Namen menü. Das Menü als auch das <div id="content">...</div> verschwinden, wenn man unten über den Erde-artigen Planeten fährt. Die Sonne dreht, wenn ich mich gerade richtig erinnere, zehn Runden. Ein Achtung Baustellenschild erscheint, wenn die Maus über dem seltsamen Knopf im Kopf der Seite steht.

1.1 Seitenquelltext

Das Internet ist die "neue" Informationsquelle Nr.1. Zu nahezu allem was einen interessiert wird man, mit entsprechendem Vorgehen, mehr oder weniger brauchbare Informationen finden. Wenn es wie hier darum geht selber z.B. Informationen ins Internet zu stellen, kann anfünglich nahezu jede Internetseite interessant sein. Sie kann sowohl als positives, als auch als negatives Beispiel dienen. Natürlich ist auch eine Mischung von Beidem ist nicht selten anzutreffen. Endscheidend ist dabei zu lernen, wie das herangezogene Material, ausgewertet und genutzt werden kann.

Es kann sein, dass wir auf eine "schöne" Seite stoßen, die uns zwar in vielen Punkten gefüllt, welche jedoch zugleich auf eine bestimmte uns weitgehend unbekannte Programmiersprache aufbaut. In einem solchen Fall müssen wir abschätzen ob es sinnvoll ist, sich mit einer weiteren Programmiersprache zu beschäftigen oder jediglich die Ideen, die uns gefallen, festgehalten werden sollten. Für Letzteres gilt dann z.B. entweder eigene Lösungsansätze innerhalb der eigenen Möglichkeiten zu entwickeln und/oder nach besser verwendbaren, ähnlichen Ideen zu suchen.

Wichtig ist aber überhaupt ersteinmal zu verstehen, das dass Ergebnis was im Brower angezeigt wird, auf einen Quelltext beruht. Diese Seite z.B. basiert derzeit auf ein einziges xhtml-Dokument, einer Datei mit dem Namen "index.html". Der darin enthaltene Text wiederrum wird, wenn Zugriff auf die Domane: "planetrobin.net" erfolgt, vom jeweiligen Browser aufgerufen, verarbeitet und als fertig gestalltete Seite ausgegeben. Diesen Quelltext kann man sich anziegen lassen. In Firefox 3, der hier als der Standartbrowser verwendet wird, kann dieser z.B. mit einem Rechtsklick auf der Maus und der Auswahl des Punktes "Seitenquelltext anzeigen" angezeigt werden. Da es, wie mit dem fortschreitenden Wachsen dieser Seite immer deutlicher werden wird, darum geht aufzuzeigen, wie mit einem einfachen Texteditor anschpruchsvolle Internetseiten realisiert werden können, kann ein solcher Quelltext Gold wert sein.

1.2 Seitenquelltext - Schwierigkeiten

Wenn man einen Rechtsklick auf einer Grafik, wie z.B. auf der umherwandernden Sonne macht, wird ein Menü in Bezug auf die Grafik geöffnet. Sicherere Wege zum Quelltext sind daher z.B. der Firefoxmenupunkt "Ansicht" unter welchem auch wieder der Punkt: "Seitenquelltext anzeigen" zu finden ist, oder die Tastenkombination: "Strg+u".Geeignet ist jedoch normalerweise ein Rechtsklick auf den Hintergrund. Doch auch das gilt nicht für jede Seite.

Eine weitere Schwierigkeit besteht darin, dass meist im allgemeinen als auch mit zunehmendem Unfang einer Seite sinnvoll ist, den Code in verschiedene Dateien aufzuteilen. In dem Fall hier, wäre eine Dreiteilung denkbar, nach der wir das Seitenlayout(CSS) und den Effektteil(Javascript(jQuery) in jew. eigenständigen Dateien abspeichern, welche dann einfach nur als Verlinkung im html-Dokument aufgeführt werden, doch dazu später mehr.

1.3 Seitenquelltext - verlinkte Dateien

Um an den im Steitenquelltext verlinkten Code heranzukommmen, sind Zusatztools(Add-ons) wie z.B. Web-developer(Add-on Link) oder Firebug(Add-on Link) sehr nützlich. Beide Tools können uns in vielfacher Weise bei der Entwicklung von Internetseiten helfen. Z.B. ermöglichen sie uns Veränderungen am CSS-Stylesheet "live" anzuzeigen. Eine schöne Tastenkombination beim Web-developer stellt z.B. "shift+strg+f" dar. Mit dieser Kombination sollte sich ein Fenster mit dem Titel "Elementinformationen" als Teil der offenen Internetadresse öffnen. Die mit Snipping Tool gemachte Aufnahme trägt nach dem Mausklick auf dem ersten Bild zu diesem Thema, den Titel "img .floatl img0 img4" mit Blick auf die Informationen unter dem Punkt Attribute sieht man dass zum einen der Titel selbst Infomationen über das Bild enthält als auch wie das Bild heisst und wo genau es abgespeichert ist. Aus der Position des Bildes kann man ableiten, dass es höchstwahrscheinlich relativ zum umfliessenden Text angeordnet ist, da gerade z.B. der Abstand von "Oben" wenig sinnig von Hand definiert wäre. Das dieses Bild eine Schriftart trägt liegt in diesem Fall an einer definition im CSS-Code. Auch die folgenden Verwandtschaftsangaben sind sehr aufschlußreich. Versteht man grob die Angaben, können wichtige Rückschlüsse auf den kompletten HTML-Text gemacht werden. Die Reihenfolge stellt weitere Verwandtschaften dar. Es sind noch allgemeiner gesprochen, bestimmte in HTML definierte Bereiche.

Planetrobin.net entsteht in großem Maße von Hand. Auf diese Weise ist es immer wieder möglich zu überprüfen ob man gute oder wenigstens funktionierende Lösungswege kennt. Diese Seite lässt sich derzeit eigentlich nahezu ohne jeglichen Aufwand auch auf großen Monitoren darstellen. Für ein schönes, wirklich angepasstes Ergebnis muss der #content-bereich auseinander gezogen werden. Hierdurch sind jedoch die gefloateten Bilder anders positioniert. Im Falle des kleinen Screenshots löse ich das Problem einfach durch weiteren Text. Dadurch liegt das Bild wieder sauber im umfliessenden Text.

1.4 Seitenquelltext - Verstehen

Wenn Wir nun z.B. den Quelltext dieser Seite betrachten, müssen wir ihn ersteinmal verstehen. In gewisser Hinsicht müssen wir lernen wie ein Browser zu denken. Jeder Befehl wird auf eine bestimmte Weise interpretiertund angewandt.

Die grobe Struktur lässt sich in vier Teilen beschreiben:

1. Die DTD-Angabe des Standards, nach dem der Browser den Code interpretieren soll.
2. Das CSS-Stylesheet, welches definiert wie der Code dargestellt werden soll.
3. Der Javascript(jQuery)-Abschnitt, der hier z.B. die Bilder wechselt oder die Sonne animiert.
4. Der HTML-Code, welcher definiert dass dieser Text z.B. als Unterpunkt mit Nummer in einer Liste steht.

1.5 Zwischenstand

1.6 Testvideo

Hier wird ein divx-Video mit eigenem Vorschaubild und Text eingeblendet. Es ist kein wirklich perfektes Video, aber es funktioniert und basiert komplett auf frei nutzbarer Software. Das Orgnial hat eine Größe von 400MB, zeigt eine deutlich bessere Bildquailität und unterbricht nicht. Die Unterbrechungen liegen an meinem Laptop, der zwischendurch in den Standbymodus wechselte da die Prozessortemperatur ständig auf über 90° Grad anstieg. Umgewandelt habe ich das Video mit VirtualDub und dem divx-Codec. Das Orginal ist ein direkt mit CamStudio erstelltes Lossless-Codec *.avi-File. Als Mikrofon diente ein Sinn7. Leider ist der Ton zu leise, die Tonqualität lässt aber ohne Probleme eine Lautstärkenerhöhung zu.

Mangelnde Linux-Unterstüzung gilt meines Erachtens leider auch für den divx-webplayer. Ich werde das nochmal prüfen. Das hier angezeigte Video ist ziehmlich genau 102MB groß und dauert ungefähr 25 min. Neben vielen "eben", erkläre ich grob einen jQuerycode. Hierbei spielen Begriffe wie, z.B. RegEx, each, function, if, this eine Rolle. Als Grundlage dient ein, zu diesem Zweck, unverändertes HTML-Dokument.

• Dieses Bild zeigt ein Feature des Divx-players. Wenn, während der Wiedergabe, die Maus nicht bewegt wird und nicht der Vollbildmodus ausgewählt wurde, wird der Hintergrund nach einer gewissen Zeit abgedunkelt.
• Der Player ermöglicht desweiteren, das Video in einem externen Fenster zu öffnen. Der Fenstermodus bietet sich z.B. gerade gut bei großen Monitoren an, da dort der Platz vorhanden ist, um weitere Fenster überschaubar unterzubringen.
• Das abspeichern des heruntergeladenen Videos ermöglicht ein rechtsklick auf diesem. Diese Funktion können Sie gerne für die von mir angebotenen Videos nutzen. Sollten Sie das Tutorial erneut betrachten wollen, sparen Sie auch gleich noch Ladezeiten und entlasten den Server.

2 Quellcode - Codepress

Mit der folgenden Funktion wird bei Aufruf/Neuladen der Seite geprüft, ob es sich um einen Monitor handelt, in dem das html-Dokument breiter als 1400px ist. Wenn dem so ist, wird der content-Bereich entsprechend angepasst. Wenn Sie einen großen Monitor z.B. 22" haben, kann die Funktion leicht getestet werden, indem man das Browserfenster verkleinert und die Seite neu läd. Die untere textarea wurde mit CodePress erweitert. Ich danke dem/den Entwickler/n für die wundervolle Arbeit. Da die Textarea editierbar ist, können Sie anderen Javascriptcode hinein kopieren.
Wenn man z.B. "function(" schreibt, wird die integrierte Autovervollständigung aktiv. htmlwidth = $('html').css("width"); htmlwidth = htmlwidth.replace(/px/,""); if (htmlwidth > 1400) { $('#main').css({width:"1408px"}); $('#content').css({width:"1036px"}); }

Schön sind bei CodePress auch die css-Dateien die den Code entsprechend hervorheben: /* * CodePress color styles for CSS syntax highlighting */ b, b a, b u {color:#000080;} /* tags, ids, classes */ i, i b, i s, i a, i u {color:gray;} /* comments */ s, s b {color:#a0a0dd;} /* parameters */ a {color:#0000ff;} /* keys */ u {color:red;} /* values */

Der Code ist auf angenehme Art erweiterbar. Die nächste Textarea zeigt den Kompletten css.js-Code von CodePress. In diesem Fall ist die readonly-on-Klasse aktiv. Der Code ist damit nicht editierbar. Desweiteren sind die Zeilen nichtmehr durchnummeriert (Klasse: linenumbers-off). Schön ist aber auch generell an der Nummerierung, dass es über ein Hintergrundbild gelöst wurde. Dies ermöglicht das herauskopieren von Text ohne die Zeilennummierung, selbst wenn diese eingeschaltet ist.
/* * CodePress regular expressions for CSS syntax highlighting */ // CSS Language.syntax = [ { input : /(.*?){(.*?)}/g,output : '<b>$1</b>{<u>$2</u>}' }, // tags, ids, classes, values { input : /([\w-]*?):([^\/])/g,output : '<a>$1</a>:$2' }, // keys { input : /\((.*?)\)/g,output : '(<s>$1</s>)' }, // parameters { input : /\/\*(.*?)\*\//g,output : '<i>/*$1*/</i>'} // comments ] Language.snippets = [] Language.complete = [ { input : '\'',output : '\'$0\'' }, { input : '"', output : '"$0"' }, { input : '(', output : '\($0\)' }, { input : '[', output : '\[$0\]' }, { input : '{', output : '{\n\t$0\n}' } ] Language.shortcuts = []

Codepress2 - html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <LINK REL="SHORTCUT ICON" HREF="gimp-logo.png"> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="functions.js"></script> <link id="style" rel="stylesheet" type="text/css" href="style.css" media="screen" /> <style> @import "style.css"; </style> <script type="text/javascript"> </script> </head> <body> <div id="container"> <div id="head"> <div id="ueberschrift"> <h1>Gimp Tutorials</h1> <h2>A Page about Gimp and its posibilities</h2> </div> <img id="gimpimg" src="gimp-logo.png" /> <a href="http://codepress.org/">CodePress</a> </div> </div> </body> </html>

HTML syntax highlighting(html.js) in CodePress:

/* * CodePress regular expressions for HTML syntax highlighting */ // HTML Language.syntax = [ { input : /(<[^!]*?>)/g, output : '<b>$1</b>' }, // all tags { input : /(<a .*?>|<\/a>)/g, output : '<a>$1</a>' }, // links { input : /(<img .*?>)/g, output : '<big>$1</big>' }, // images { input : /(<\/?(button|textarea|form|input|select|option|label).*?>)/g, output : '<u>$1</u>' }, // forms { input : /(<style.*?>)(.*?)(<\/style>)/g, output : '<em>$1</em><em>$2</em><em>$3</em>' }, // style tags { input : /(<script.*?>)(.*?)(<\/script>)/g, output : '<strong>$1</strong><tt>$2</tt><strong>$3</strong>' }, // script tags { input : /=(".*?")/g, output : '=<s>$1</s>' }, // atributes double quote { input : /=('.*?')/g, output : '=<s>$1</s>' }, // atributes single quote { input : /(<!--.*?-->.)/g, output : '<ins>$1</ins>' }, // comments { input : /\b(alert|window|document|break|continue|do|for|new|this|void|case|default|else|function|return|typeof|while|if|label|switch|var|with|catch|boolean|int|try|false|throws|null|true|goto)\b/g, output : '<i>$1</i>' } // script reserved words ] Language.snippets = [ { input : 'aref', output : '<a href="$0"></a>' }, { input : 'h1', output : '<h1>$0</h1>' }, { input : 'h2', output : '<h2>$0</h2>' }, { input : 'h3', output : '<h3>$0</h3>' }, { input : 'h4', output : '<h4>$0</h4>' }, { input : 'h5', output : '<h5>$0</h5>' }, { input : 'h6', output : '<h6>$0</h6>' }, { input : 'html', output : '<html>\n\t$0\n</html>' }, { input : 'head', output : '<head>\n\t<meta http-equiv="content-type" content="text/html; charset=utf-8" />\n\t<title>$0</title>\n\t\n</head>' }, { input : 'img', output : '<img src="$0" alt="" />' }, { input : 'input', output : '<input name="$0" id="" type="" value="" />' }, { input : 'label', output : '<label for="$0"></label>' }, { input : 'legend', output : '<legend>\n\t$0\n</legend>' }, { input : 'link', output : '<link rel="stylesheet" href="$0" type="text/css" media="screen" charset="utf-8" />' }, { input : 'base', output : '<base href="$0" />' }, { input : 'body', output : '<body>\n\t$0\n</body>' }, { input : 'css', output : '<link rel="stylesheet" href="$0" type="text/css" media="screen" charset="utf-8" />' }, { input : 'div', output : '<div>\n\t$0\n</div>' }, { input : 'divid', output : '<div id="$0">\n\t\n</div>' }, { input : 'dl', output : '<dl>\n\t<dt>\n\t\t$0\n\t</dt>\n\t<dd></dd>\n</dl>' }, { input : 'fieldset', output : '<fieldset>\n\t$0\n</fieldset>' }, { input : 'form', output : '<form action="$0" method="" name="">\n\t\n</form>' }, { input : 'meta', output : '<meta name="$0" content="" />' }, { input : 'p', output : '<p>$0</p>' }, { input : 'script', output : '<script type="text/javascript" language="javascript" charset="utf-8">\n\t$0\t\n</script>' }, { input : 'scriptsrc', output : '<script src="$0" type="text/javascript" language="javascript" charset="utf-8"></script>' }, { input : 'span', output : '<span>$0</span>' }, { input : 'table', output : '<table border="$0" cellspacing="" cellpadding="">\n\t<tr><th></th></tr>\n\t<tr><td></td></tr>\n</table>' }, { input : 'style', output : '<style type="text/css" media="screen">\n\t$0\n</style>' } ] Language.complete = [ { input : '\'',output : '\'$0\'' }, { input : '"', output : '"$0"' }, { input : '(', output : '\($0\)' }, { input : '[', output : '\[$0\]' }, { input : '{', output : '{\n\t$0\n}' } ] Language.shortcuts = []

Das hier rechts floatende Bild zeigt die derzeit möglichen html-Befehle, die Sie auch in der unteren textarea ausprobieren können. Wenn die textarea angeklickt ist, kann der gesamte, darin enthaltene Text mit strg+a makiert und strg+c kopiert werden. Die Nutzung solcher Tastenkombinationen, ist nützlich anzuwenden um noch flüssiger arbeiten zu können.

<!-- * Aus der html.js wird ersichtlich, dass in dieser html-textarea Abkürzungen für * ganze html-Befehle möglich sind. Das Hinzufügen weiterer Befehle bietet sich an. * Im body dieses html-Gerüstes, sind sie in leicht lesbarer Form aufgeführt. * Der Aufruf erfolgt über: aref + tab (Abkürzung + Tabulatortaste) --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Html-Editor</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <LINK REL="SHORTCUT ICON" HREF="logo.png"> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style> @import "style.css"; </style> <script type="text/javascript"> </script> </head> <body> aref + tab = <a href="Cursorposition"></a> h1 = <h1>$0</h1> h2 = <h2></h2> h3 = h4 = h5 = h6 = html = head = img = input = label = legend = link = base = body = css = div = divid = dl = fieldset = form = meta = p = script = scriptsrc = span = table = style = </body> </html>

Hilfreich zur Benutzung ist die im Download integrierte index.html-Datei.

XML Zugriff mit PHP

<?php $book = $_POST['book']; //tloc[1] $item = $_POST['item']; //tloc[2] $bookpath ="../etc/".$book."/ped.xml";//book 0-5 $xmlpath ="/top/data[".++$item."]/sdata";//a lot! $xml = simplexml_load_file($bookpath); if (file_exists($bookpath)) { $xmlobj = $xml->xpath($xmlpath); foreach ($xmlobj as $all) { echo $all; } } ?>

Ich dachte mir na gut, dann eben mit PHP. Doch hat es etwas gedauert, bis ich bei dem oben angezeigten Ergebnis angelangt bin. Letztendlich hat es aber sogar mit xpath geklappt. Ich nutze für den xml-Zugriff, simplexml, was seit PHP 5.2 von Haus aus integriert ist. Wie zu sehen ist, geht es um zwei Variablen. Die Buchnummer und das entsprechende $item aus diesem. Die Variable $xml fülle ich mit dem, in $bookpath enthaltenen xml-Dokument. Wenn dieses in dem entsprechenden Ordner vorhanden ist, wird das entsprechende ++$item aufgerufen. Als letzten Schritt werden alle dort vorhandenen children ausgegeben.

Digital Pali Reader, die Grundlage. Die Entnahme des PEDs war eine gute Übung. ArtikelPlan:(Frenden Javascrpitcode lesen, grob erklären, Ziel Probleme und Lösungen vorstellen).

Hier geht es zu meiner nicht fertigestellten PED (Pali English Dictionary) Wörterbuch-Version von Rhys Davids... (siehe auch die: PTS (Pali Text Society))

JustPED Erweiterungen

Die bisher einfach gehaltene Oberfläche beschränkt sich bisher auf die Wörterliste, ihrer Kurzform, dem Wörterbucheintrag und auf die Farbwähler. Eine durchaus sinnvolle Ergänzung, die ohne große Mühe umgesetzt werden könnte, wären Tabs, die das jeweilig ausgewählte Wort beinhalten. Mit dieser Funktion wäre ein Wechsel zwischen den verschieden herausgesuchten Wörtern möglich. Die stehts zu berücksichtigende Benutzerfreundlichkeit erfordert, dass diese Tabs wieder geschlossen werden können und z.B. der jeweils ausgewählte Tab hervorgehoben wird. Die angeklickten Wörter könnten desweiteren in einer Schnellauswahl aufgeführt werden. Auch denkbar ist eine Chronik der geschlossenen Tabs. Die Schnellauswahl hätte in der Kombination mit einer auf den Benutzer bezogenen Speicherung, den Vorteil, dass beim Schliessen der Seite auch schon die Liste der aufgerufenen Wörter komplett wäre. Bei der Chronikvariante hingegen, müsste berücksichtigt werden, dass im Falle des Schließens der Seite, noch offene Tabs mit in die Chronik aufgenommen werden sollten. Die Schnellauswahl scheint demzufolge, der günstigere Weg. So wie die Farben derzeit, bei Neuladen der Seite, in ihren Ursprungszustand zurückversetzt werden, kann auch hier die benutzerspezifische Speicherung als weiteren Folgesschritt ersteinmal unbeachtet gelassen werden. Da die Wortchronik erst wirklich nützlich wird, wenn sie auch mit dem Link auf die Übersetzung versehen ist, scheint ein Blick auf die neu hinzugefügte Kurzform der Wörtersuche sinnvoll, da dort auch schon der entsprechende link kopiert wurde.

Zusammenfassend sind die nächsten denkbaren Schritte:

1. Anzeige mehrerer Wörter über Tabs.
2. Erstellung einer Wörtauswahlchronik.
3. Ergänzung von z.B. Cookies und einer PHP-Datenbank zur Benutzerspezifischen Speicherung der Farben und der gesuchten Wörter.

Warum jQuery

Langsam werden PlanetRobin weitere Elemente hinzugefügt.

Die Antwort ist nicht unbedingt die Beste, denn ganz entscheidend ist wohl letztendlich, dass ich mir das Webdesign mit Hilfe vieler Beiträgte in Form von z.B. Tutorials selbst beibringe. jQuery wähle ich jetzt als auch damals wegen seiner Einfachheit und seiner vielfältigen Möglichkeiten. Mit jQuery alleine umgehen zu können, reicht wenn man entsprechend denken kann, wahrscheinlich aus, um in einer Firma gutes Geld zu verdienen. Es kann richtig Spaß machen, damit zu arbeiten.

jQuery ist ein meines Erachtens sehr schönes Framework zum Schreiben von Funktionen innerhalb von Javascript. Die Funktionen beziehen sich auf eine in html definierte Internetseite, den positionierenden css-Code und zu guter letzt auf PHP um auf eine Datenbank, ein xml-Dokument oder auch den Server zuzugreifen. jQuery ist in all diesen Punkten sehr direkt.

1. index.html

   Aufruf der in HTML und CSS definierten Elemente:

   Da die Browser JavaScript normalerweise integrieren, CodePress darin geschrieben wurde und hier miteingebunden ist, stellt die normalerweise schlichte textarea, die Worte anders dar.

   jQuery(document).ready(function(){ $("#PlanetButton1").mouseover(function() { $(this).attr({src: "./bilder/PlanetRobin9.png"}); //$(this).attr({src: "./bilder/'bild'.png",mehr:"attrs"}); $("#Achtung").css("display","block"); //Das Element mit der id Achtung wird angeziegt. }); });

   jQuery-Code mit CodePress dargestellt.

   Versteht man die Codezeilen selbst, wirkt die Erklärung hier richtig umständlich.

   Wenn das Dokument fertig geladen wurde, greife auf das Element mit der id="PlanetButton1" zu und wenn die Maus über dieses Element fährt, füre eine weitere Funktion aus. Der zweite Teil dieses Beispiels ergeift dessen(this) Attribut (attr) src und ersetzt den Text mit dem Pfad zu einen konkreten Bild. Dieser Pfad wird, wie zu sehen ist als einfacher Text angegeben.
   
   Zur: jQuery_Api_Reference mit jQuery und download Links, ganz oben.
   
   

   Das Buch:Amazon = jQuery in Action ist ein gutes englisches Buch über das javascript framework jQuery.

2. CSS-Zugriff:

   Veränderung des Designs und Erstellung von Animationen:

   //jQuery(document).ready(function(){ $("#PlanetButton1").mouseover(function() { $("#Achtung").css("display","block"); //}); $("#PlanetRobin").click(function() { //$('#base').toggle(); $("#kopf, #main, #base").toggle(); for(i=1;i<4;i++){ $("#base").animate({"marginLeft": "+=30px"}, 500) .animate({"marginLeft": "-=30px"}, 500); } });

3. PHP-Zugriff mit Ajax:

   Variablen an PHP senden und das Ergebnis ausgeben:

   function send() { var ID = $save.parent().find('.pali').attr("ID"); //console.log(ID); var Word = $save.parent().find('.pali').text(); //console.log(Word); /*var Translation = $('.Translation').val();*/ var Translation = $save.parent().find('.Word').val(); //console.log(Translation); var Details = $save.parent().find('.Translation').val(); //console.log(Details); var Text = $save.parent().find('.Textarea').text(); //console.log(Text); /* $.get("./cgi-bin/get_befehl_name.php", function(data){ $('#loading').fadeIn(500, function() { //$(this).remove(); $('#response').remove(); $('#form').append('<p id="response">' + data + '</p>'); }); }); */ $.ajax({ url: './cgi-bin/send_befehl_name.php', type: 'POST', data: 'ID=' + ID + '&Word=' + Word + '&Translation=' + Translation + '&Details=' + Details + '&Text=' + Text, success: function(result) { $('#loading').fadeOut(500, function() { //$(this).remove(); }); $.get("./cgi-bin/get_befehl_name.php", function(data){ $('#ergebnis').append('<p id="response">' + data + '</p>'); $('#ergebnis').fadeIn(500, function() { //$(this).remove(); /*$('#erbebnis').remove();*/ }); }); $.post("./cgi-bin/write_PHPdict.php"); /* , function(data){ $('#ergebnis').append('<p id="response">' + data + '</p>'); $('#ergebnis').fadeIn(500, function() { //$(this).remove(); //$('#erbebnis').remove(); }); }); */ } }); return false; }

marginpar2

class="floatl marginpar2"

Das hier eingeblendete Schild in schwarzweis oder mit z.B. einer border:2px solid black; und der font-size:von18px; soll hier erklärt werden.

Webdesign lernen:

Sie möchten Webdesign lernen? - Was hält Sie davon ab?

Voraussetzungen Grundlagen Ziele

webdesign lernen

Was Sie unter dem Begriff Webdesign verstehen, kann etwas vollkommen anderes sein, als das was jemand anderes darunter versteht. Schon der im Wort enthaltene Begriff Design, gibt eine Richtung vor. Eine Richtung über die sich streiten lässt. Eine gängige Auffassung wäre es wahrscheinlich, unter Webdesign die visuelle Gestaltung einer Internetseite zu verstehen. Vorteilhaft ist, wenn Struktur und Text der Seite fertig sind. Das Design hängt massgeblich vom Umfang der Seite ab.
Falls es Effekte geben soll, wer kümmert sich darum? Ist es Aufgabe eines Teams oder übernimmt das auch der Designer? Gib es noch eine weitere Person, die sich um die Progammierung der Effekte und der einzubindenden Datenbanken kümmert?

Ob nun Einzelperson oder ganzes Team, ob Firma oder kleiner Laden, alle sollten den groben roten Faden kennen, nach welchem die jeweilige Internetseite gebaut wird.

Ein Mensch mit einem kreativen Geist der Spaß daran hat zu erschaffen, könnte nach einer Weile im Internet surfen, auf die Idee kommen sich selbst damit auseinandersetzen, wie solche Seiten gebaut werden. Zu Zeit soll damit gesagt werden, dass es hier derzeit weniger darum geht, wie mit dem erlangten Wissen Geld verdient werden kann, sondern was überhaupt möglich ist und wie man dafür denken muss.

Voraussetzungen

Als Equipment ist ein Computer möglichst mit Internetanschluss zu empfehlen. Vielmehr bedarf es nicht.

1. Computer
2. Firefox mit Firebug und Webdevloper
3. Kreativitivität

Grundlagen

Ziele

Ein Kurs kann durchaus nützlich sein, um sich etwas zu orientieren.

Titel:

Detailierter:

Text