Templaterie Blog

~Webdesign, Layout, Templates, Beispiele~

25.05.2006

Javascript: Loop

Silke Schümann wrote this 09:09:

Aktuell bin ich ja fleißig in die Programmierung eingestiegen und so manches Problem löst man in dem man durch das Netz surft.
Wie üblich lernt man dabei sehr viel. Z.B. wenn man in der Schleife das Maß für die Anzahl der Schleifen nicht in eine Variable schreibt, wird dieses Maß bei jedem Durchlauf neu gemessen.

Ich war ziemlich erstaunt, dass das Folgende einen Unterschied macht:

for (i = 0, j = objColl.length; i < j; i++)

for (i = 0; i < objColl.length; i++)

Ich hätte nun vermutet, dass objColl.length auch bei der ersten Variante bei jedem Durchlauf der Schleife geprüft wird, steht es doch schließlich in der Klammer in der die Bedingung für den Durchlauf der Schleife abgearbeitet wird und eben nicht vor der Klammer. Ich hätte angenommen, dass es wie folgt aussehen muss:

var j = objColl.length;
for (i = 0; i < j; i++)

for ( i = 0, j = objColl.length; i < j; i++)

Man beachte die Semikolons. Danke an DonKult in den Kommentaren.

for ( Ausgangslage vor der Schleife; PrüfKriterium, das nach jeder Schleife verglichen wird; Vorgang, der nach jeder Schleife ausgeführt wird )

</Nachtrag>

Aber kann ja sein, dass sich Stuart von den Muffin Research Labs hier irrt. Vielleicht kann mich ja noch jemand über meinen Denkfehler aufklären, sollte Stuart mit seinem Statement in dem Beitrag zu getElementbyClassName recht haben. In jedem Fall ist es ein Gedanke Wert, das Maß separat in einer Variable zu deklarieren.

Loops und der Ausstieg aus derselben, sobald klar ist, dass nicht weiter dieser Loop (=Schleife) gebraucht wird, auch denn wenn es zwei Loops sind, soll hier näher erläutert sein. Das schaue ich mir dann bei Gelegenheit an. Das Javascript-Schleifchen war jetzt nicht mein Thema, sondern die Attribute der Nodes an Dialogfenster zu übergeben, die in einem contenteditable vorkommen könnten.

Filed under: Programmierung
4 Comments

Website-Entwurf

Website-Entwurf

Website Entwurf

Flußlandschaft die sich dem Viewport anpasst

Website-Entwurf

20.05.2006

Farbe: Versteckte Barrieren

Silke Schümann wrote this 22:38:

Die Farbkontrast sieht gut aus, oder? Nun nicht für Schwarzweißdisplays und für Augen, die nur Greyscale sehen.

Man vergißt diesen Umstand gern. Es macht also viel Sinn von Zeit zu Zeit sich der Tatsache bewusst zu machen, dass Farbkombinationen gibt, die man bei einer Barrierearmen Site vermeiden muss. Zur Demo ist das Bild mit eine Variation in Greyscale verlinkt.

Diesen Ausschnitt eines Farbchecks findet man auf dieser Seite, wo noch weitere Farbkombinationen zu finden sind.

Filed under: Design, Projektplanung
No Comments

16.05.2006

Javascript: Neue Werte ermitteln bei veränderter Fenstergröße

Silke Schümann wrote this 13:23:

Eigentlich bin ich ja gerade auf der Suche nach der Abfrage der Objektmaße in Javascript und bislang weiß ich nur, wie das funktioniert, wenn die Größe im Element angegeben ist, nicht aber, wenn mir das noch nicht bekannt ist … vielleicht wird das ja nur über die Differenz zweier Objektpositionen oder so etwas ähnliches zu ermitteln sein … Wie das aber beim Suchen so ist, man findet tausend andere nützliche kleine Sachen, die man nicht gesucht hat und im Augenblick auch nicht braucht … sie lenken aber ab und sind nicht selten grausame Zeitfresser. Sachdienliche Hinweise nehme ich zum Thema Objektmaße gerne entgegen.

Vielleicht in diesem Zusammenhang noch nützlich ist das Reload on Resize.

<body onResize="window.location.href = window.location.href;">

Grundsätzlich sehr lesenswert im Zusammenhang mit Javascript und Barrierearmut fand ich auch diese Beiträge:

Der sinnvolle Einsatz von JavaScript (selfHTML-Blog-Eintrag Dez. 2005)
Flexible Javascript Events
The Behaviour Layer
Barrierearmes Javascript die Übersetzung von unobtrusive Javascript
Unobtrusive show/hide behavior reloaded

Aber jetzt werde ich wohl erst einmal die Grafiken fertig machen, damit mein Agentur-Kunde keine schlaflosen Nächte bekommt und dieses Thema vertragen … denn im Moment habe ich die Zeit für die interessante und aufschlußreiche Surftour nicht. Was mir schwer fällt … aber das Leben ist nun mal hart.

Filed under: Programmierung, Projektplanung
No Comments

14.05.2006

Noch einmal HG-Definiton — die Hintergrundfarbe definieren

Silke Schümann wrote this 12:00:

Nach dem Feedback der ersten Tester ließ mich mein Ehrgeiz nicht mehr zufrieden an anderen Dingen arbeiten. Der Stand der Entwicklung des Plugins genügte mir nicht für einen ersten Stop. Hatte ich doch selbst bei dem Entwicklungsstand gestern die Umständlichkeit und eine kleine Unbequemlichkeit für Nutzer bemerkt, die HTML und CSS gut genug kennen und eine Websafepalette nicht genügt. Zumal eine Farbe aus der 24Bit-Palette passend zur Hintergrundsgrafik bei liquiden Designs sich nur allzuhäufig zwingend ergibt.

Es nagte und nun ist auch das gelöst.

Das Plugin hat nun Colorpicker für das Hintergrundbild und einen Colorpicker bei einer erweiterten Grafik. Es sind zwei verschiedene Lösungen. Die eine nutzt PHP-Funktionen und lädt die Seite in den iFrame neu, die andere macht einen Layer sichtbar und die Farbe wird rein über Javascript übernommen.

(more…)

Filed under: Programmierung, Projektplanung
No Comments

12.05.2006

Ein neues Plugin in der Templaterie

Silke Schümann wrote this 10:13:

HG-Definition: Hintergrundgrafiken im Header selber ändern können

Auf das erste Plugin, das ganz unter der Flagge von tempus creativ steht, bin ich mächtig stolz. Ich danke Esim Can (für die Grundlagen, dass es dieses Plugin geben konnte), dem Strohhalm (für den entscheidenden Hinweis für die Kontextsensitive Hilfefunktion) und die unzähligen Quellen im Netz für die Unterstützung.

(more…)

Filed under: Design, Programmierung, Webmarketing
1 Comment

11.05.2006

Editland-Sites vs Weblog (am Beispiel Wordpress)

Silke Schümann wrote this 13:45:

Editland bietet, wie Nutzer wissen, eine sehr angenehme Benutzeroberfläche und den Vorteil, dass Anderungen direkt in die Seite geschrieben werden.
Das Weblog Wordpress sowie einige andere Systeme haben mittlerweile zwar einen WYSIWG-Editor, der den Nutzer davon entbindet sich mit HTML-Elementen auseinanderzusetzen, jedoch arbeitet man immer noch in einem Formularfeld. Fehler, die sich auf das umgebende Template auswirken werden erst nach dem Speichern und dem Wechsel der Ansicht offensichtlich.

(more…)

Filed under: Projektplanung, Seitentypen
No Comments

10.05.2006

Dialogboxen mit Webseiten als Inhalt

Silke Schümann wrote this 09:02:

Der Internet Explorer hat ein paar interessante Feature, wie z.B. die showModalDialog Methode, sucht man eine Entsprechung im DOM (Crossbrowserstandarddingens) sieht es schon düsterer aus. "window.open" hält eben nicht den Prozess an und verhindert, dass die Verbindung von einem Fenster zum anderen Unterbrochen wird und der schöne Dialog zwischen zwei Fenstern auch dann noch funktioniert, wenn zwischenrein der Nutzer am Telefon hängt, eine neue Instanz öffnet, und zig andere Seiten ansurft und dann irgendwann stundenspäter zurück zu seiner unterbrochenen Arbeit zurückkehrt. Etwas ähnliches scheint window.opener zu sein, doch scheint es mir nicht Ratsam überhaupt ein neues Fenster aufzumachen und statt dessen besser nur einen CSS-Layer zu erzeugen. Siehe hierzu auch den Beitrag zu Window popping im DOM-Scripting-Blog, das aber ist wenn es so elegant wie im IE funktionieren soll nur mit HTTPrequest möglich, so dass in die Seite je nach Status der Arbeit Teile nachgeladen und anschließend auch wieder aus der Seite rausgeworfen werden können. Denn es macht keinen Sinn das Equivalent des Romans Krieg und Frieden in eine einzige Seite zu laden.

DOM-Experten mögen mir das Licht zeigen. Ich habe es beim Stöbern im Netz noch nicht gefunden, mit dem ich so etwas feines wie den showModalDialog crossbrowser hinbekäme. Es macht es verständlich, dass der eine oder andere auf Crossbrowser verzichtet und bei Webapplikationen in der Asministration den Microsoft Internet Explorer schlicht voraussetzt.

Nachtrag: Hier noch eine Hilf-Dir-Selbst-Lösung für Firefoxler: showModalDialog in Firefox and frames, was natürlich keine wirkliche Lösung darstellt, sondern maximal eine Krücke für diejenigen, die mit ihrem Browser auf öffentlichen Seiten sind, die IE-only gescriptet wurden, was ich nun widerrum nicht gut heiße. Denn eine Seite die im Netz für alle gemacht wird, sollte niemandem vorschreiben, welchen Browser er nun verwenden sollte. Eine Applikation aber die intern genutzt wird, kann sich auf einen Browser beschränken. Schließlich ist es die Entscheidung des Nutzers, ob er diese oder die entsprechende Applikation des Konkurrenzbrowsers nutzen will.

Für die kontextsensitive Hilfe ist dann doch showModelessDialog() die bessere Wahl. Das Fenster kann im Hintergrund stehenbleiben, während man den Prozess fortfährt und wird geschlossen, wenn alles fertig ist und das ursprüngliche Dialogfenster, das für die Bearbeitung der Seite oder was immer zustänig ist, geschlossen wird.

Filed under: Programmierung, Webtechniken
8 Comments

09.05.2006

Was ist denn eine Syntax?

Silke Schümann wrote this 14:23:

Viele Begriffe verwenden wir in Fachwelten wie selbstverständlich und es ist schwer unsere Scheuklappen zu erkennen, wenn wir nicht hilfreiche Menschen haben und uns ohne Scheu fragen, welche Begriffe unklar sind. So ein Begriff ist Syntax. Viele Programmskripte kann man anpassen ohne auch nur eine Zeile Programmiercode zu verstehen, wenn man das Wesen der Syntax begreift und Analogien und Muster ausfindig macht. Weil das nicht immer klappt, wenn kein Superexperte einem verrät, was geht und was nicht geht, sollte man das Original in jedem Fall vorher sichern und bei jeder Anderung das Programm einmal durchtesten, ob es noch geht. Auch sollte man wissen, dass so eine Skriptänderung richtig böse in die Hose gehen kann, selbst wenn das Programm scheinbar noch tadellos funktioniert.

Aber nun zur Syntax.

Die Syntax (griechisch ÏƒÏÎ½Ï„Î±Î¾Î¹Ï‚ ['sÊntaksÉªs] – die Zusammenstellung) behandelt die Muster und Regeln, nach denen Wörter zu größeren funktionellen Einheiten wie Phrasen (Teilsätze) und Sätzen zusammengestellt und Beziehungen wie Teil-Ganzes, Abhängigkeit etc. zwischen diesen formuliert werden (Satzbau).Die Syntax (griechisch ÏƒÏÎ½Ï„Î±Î¾Î¹Ï‚ ['sÊntaksÉªs] – die Zusammenstellung) behandelt die Muster und Regeln, nach denen Wörter zu größeren funktionellen Einheiten wie Phrasen (Teilsätze) und Sätzen zusammengestellt und Beziehungen wie Teil-Ganzes, Abhängigkeit etc. zwischen diesen formuliert werden (Satzbau).

Quelle: Wikipaedia Syntax

(more…)

Filed under: Programmierung
No Comments

07.05.2006

Spielerei mit dem Grashalm

Silke Schümann wrote this 15:44:

Manchmal dauert es etwas länger bis man sich zu einer aktuelleren Version entscheidet. Wenn es aber dann soweit ist, kann man nicht widerstehen und herauskommt …

Dieser Quicky für ein Weblogdesign wird vermutlich nicht das Licht der Welt erblicken … allerdings habe ich das PSD abgespeichert, sollte ich meine Meinung ändern. Unterhalb der Grassode müsste dann über ein Big-Foot-Design die übliche Navigation und Funktionen typisch Weblogs integriert werden … denn so schick diese Navigation mit der Jahresübersicht wäre, so unpraktisch ist diese auch. Dass man das ganze Jahr fleißig war, ist nicht unbedingt für andere eine interessante und sinnreiche Navigations-Variante.

Filed under: Design
No Comments