Templaterie Blog

Sei kein Esel, delegate

Das so scheint das Fazit zu sein, dass ich meiner jüngsten Suche nach dem onLoad-Script entnehme. Es began mit einem Beitrag vom Mai 2004: addLoadEvent von Simon Wilson. Dann begegnete mir eine Übersicht des Onloads Stand 30. Januar 2007: The window.onload problem (still) von Peter Micheaux. Lesenswert auch wenn einige Bahnhöfe für mich dabei sind. Peter Micheaux publiziert im August des selben Jahres noch einmal zum Thema: The window.onload Problem – Really Solved!, Aha. Interessant … und am Ende der Kommentare stößt man auf eine Kommentar von Diego Perini, die besagt … Pfeiff auf onLoad-Funktionen und delegier: Delegates (Da sämtliche verlinkten Beispiele seiner vorherigen Kommentare verschwunden sind, macht es Sinn, sich die Seite irgendwo lokal für den zukünftigen Zugriff zu speichern, bevor auch diese Seite vom 19. Februar 2008 sich in Luft auflöst.). Ob und in wie weit es wirklich Sinn macht, auf den Eventhandler zu verzichten und schlicht alles zu delegieren, klärt Christian Heilman in seinem Beitrag: Vergleich Eventhandling und Eventdelegation

Schaut man sich weiter um, dann scheint die Delegation aktuell im Gespräch zu sein. Noch weitere Beiträge:

1. A Look at Sun.COM’s New Event Delegation Library
2. Poor man’s JavaScript Behaviours
3. Event-Delegation made easy in jQuery

Bildquelle Esel auf flickr.com vom User Jaxxon

Filed under: Programmierung
No Comments

Es ist schon bald nicht mehr wahr, da publizierte Jacob Nielsen einen Beitrag über “Mystery Meat Navigation” bei der er die Schwierigkeiten einer solchen Navigation ausführlich darlegte, z.B. sich zu merken wofür Symbole stehen oder hinter welcher Schaltfläche noch einmal dieser oder jener Navigationspunkt liege, erkennen, wo eine Mausbewegung Erfolg verspricht und wo nicht. Wo er recht hat, hat er recht.

<_aber und überhaupt_ >
Die Navigation ist für mich gar nicht so selten ein störendes Element in meiner kleinen grafischen Erlebniswelt in Photoshop; z.B. fast immer, wenn ich Seiten so im Daddelmodus in Photoshop arbeite. Sprich die Maus von Werkzeug zu Filter zu Werkzeug in Photoshop huscht, ohne konkreten Kunden, ohne konkretes Ziel.
</ _aber und überhaupt_ >

Das sind Arbeiten, die dem kreativen Zustand ähneln, wenn man mit Stift und Papier dem Anrufer am Telefon lauscht und dabei mit dem Stift Doodles fabriziert, Figürchen kritzelt, Hexenhäuschen schafft und was sonst so auf dem Notizblock zu finden ist, wenn es nichts zu notieren gibt. In diesen Arbeiten ist die Navigation ein Nachgedanke und es macht einige Mühe eine felxible Navigation, die sich unterschiedlichsten Sitekonzepten fügen kann, stimmig zum Gesamteindruck zu integrieren. So ein “ich daddle noch so ein wenig rum”-Entwurf entstand auch heute zwischen zwei Anrufen, neben dem Vesper und zwischen rein zwischen Dies und Das. Doch diesmal blieb ich bockig. Nein, einen Kasten will ich nicht. Nein einen Kasten will ich nicht. Ich will keinen Kasten, nicht! stampfte mein kleiner innerer kreativer Kasper:

Eine Alternative ist ein Link, der alle Texte einblendet. Weil es Javasript ist, müsste man insgesamt wohl dafür Sorge tragen, dass ohne Javascript die Navigation klassisch im Kasten untergebracht ist und seitlich oder oberhalb des Textes und somit den Text nicht wie beim Mouseover unproblematisch, Textbereiche überdeckt. Durch die Möglichkeit sämtliche Links ein und wieder Auszublenden, entfällt die Kritik am Ratespiel einer klassischen Mystery Meat Navigation. Die Seite kann damit zum optischen Erlebnis werden, bei dem einmal nicht irgendwo eine Navigationsleiste steht oder ein starrer Kasten erscheint oder eine Textliste dem Inhalt kostbaren Platz nimmt und um Aufmerksamkeit buhlt. Die Navigation geht auf in ein grafisches Erlebnis.

Übrigens, dass sich der Text um die Kugel und andere Objekte winden kann, dafür gibt es im Netz schon Designbeispiele und Lösungsbeispiele:

1. Die CSS-Kurve
2. Text um Bilder

Filed under: Design
No Comments

Der Weg zu einer Silhouette ist sehr einfach und blitzschnell erzeugt:

Nachdem ich die Quelle der 8 Vektorgrafiken^[1] erst heute alle abgeklappert habe und dabei nur eine Sammlung für nichtkommerzielle Zwecke außerhalb von Demianart zur Verwertung vorfand, stehe ich ein wenig in der Schuld. Daher hier das Tutorial. Es fängt damit an, dass man ein geeignetes Bild heraussucht. Entweder ein helles Objekt vor dunklem Untergrund oder ein dunkels Objekt vor hellem Untergrund. Um Urheberrechte muss man sich nur bedingt Gedanken machen, da das Endergebnis sehr weit vom Original entfernt ist und es der Fotograf schwerhaben dürfte, der späteren Vektorgrafik anzusehen, dass sein Foto einst die Basis darstellte. Hier im Tutorial sieht das anders aus. Das Foto steht in direktem Zusammenhang mit der Silhouette. Ich nehme daher aus Flickr.com ein Foto aus dem creativ commons by 2.0 des Users officialstarwarsblog.

Die fünf Schritte zur Vektorgrafik: (more…)

Filed under: Design, Tools, Tutorials
No Comments

Der Fuß im Bigfoot des Gespaa-Wordpress-Template hat ein kleines Problem, wenn bei Kommentaren viele sehr lange Titel vorkommen, denn dann werden diese in den roten Fuß hineingeschoben, oder auch wer wie ich etwas zu heftig in der Kategorienvergabe wird … die zwei neuen Kategorien, waren dann einfach zu viel, nun war nicht mehr nur das input-Feld etwas schepps im Rot, sondern das ganze *****deite Formular und die Begriffe nur noch schwer lesbar. Langer Rede kurzer Flicken, die absolute Höhe einfach aufbrechen mit min-height achten Sie auf die Anderungen in Zeile 4:

1. #ancillary{
2. padding:20px 0 0 0;
3. background: #415262;
4. height: 440px;
5. color:#8798A8;
6. border-top:6px solid #7C8999;
7. border-left:1px solid #7C8999;
8. border-right:1px solid #7C8999;
9. }

Die Stelle sieht dann so aus:

1. #ancillary{
2. padding:20px 0 0 0;
3. background: #415262;
4. min-height:440px;
5. height: auto !important;
6. height: 440px;
7. color:#8798A8;
8. border-top:6px solid #7C8999;
9. border-left:1px solid #7C8999;
10. border-right:1px solid #7C8999;
11. }

Ein einfacher schmerzfreier Hack:

1. min-height:440px;
2. height: auto !important;
3. height: 440px;

Zunächst einmal min-height für alle modernen Browser, dann die eigentlich überflüssige Anweisung “height: auto” welche standardmäßig vorliegt, weil aber gleich im Anschluß diese überschrieben wird, hier noch ein “!important” ergänzt, denn der IE<7 hat nicht nur ein Problem mit min-height, er hat glücklicher weise auch ein Problem mit "!important", während andere Browser das "!important" ernst nehmen. Eleganter und zukunftssicherer wäre es über conditional comment ein Stylesheet für den IE zu nehmen und dort die height anzugeben, damit könnte auf das "height: auto !important" verzichtet werden, aber dazu war ich zu faul und die meisten, die wie ich das Gespaa verwenden, werden diese Ergänzung über die eingebaute Editierfunktion des Styles schnell vornehmen können.

Wer sich mein Anderungen im Quelltext genauer anschaut, wird noch zwei Anderungen feststellen, diese aber sind nicht relevant um das Problem zu flicken, sondern eher nicht bereinigte Reste meiner ersten Versuche.

Zum einen ist das in der sidbar.php in der letzten Zeile ein <div class="clear0"></div> und zum anderne im Stylesheet das dazu passende "clear0":

1. .clear0 {
2. clear: both;
3. height: 0px;
4. width: 0;
5. overflow: hidden;
6. }

Aber wie gesagt, das wird man nicht brauchen. Schon die erste Anderung sollte dem Big-Foot ein felxibleres Verhalten geben.

Filed under: HTMl&CSS
No Comments

Quellen, Listen, Snippets und gute Ratschläge aus dem Netz:

• 100+ nützliche PHP-Codeschnipsel
• 40 Tipps seine PHP-Skripte zu optimieren
• 20+ PHP-Ressourcen (Aus der mashable PHP-Toolbox)
• 25 PHP template engines mit Kurzbeschreibung
• 6 Anlaufstellen für werdende PHP-Programmierer
• Der PHP Sicherheitslotse vom PHP Security Consortium

So und damit ist mit der Reihe 1001 Linktipp-Overload für heute erst mal Schluss

Einen hab ich noch, einen hab ich noch: 5 Coole Sachen machen mit Windows und PHP

Filed under: 1001 Linktipp, Programmierung
No Comments

… und kommen wir nun zu Javascript. Zur Einstimmung erst einmal der ultimative Rahmen für jeden Startrek-Fan: Through Space 2 (Source) und noch ein wenig Daddeln mit JS bevor es Ernst wird: Das Labyrinth

Javascript

• Crossbrowser scripten via feature-detection (… mehr von jener Quelle / Google-group: comp.lang.javascript, Autor Richard Comford)

Ressourcen:

• Der Top-Link: comp.lang.javascript FAQ
• Wo sind all die Referenzlisten zu Javascript?
  Da kann man nachschlagen: Crockfords Javascript-Liste
• Eloquent Javascript
• Yahoo Developer Center Javascript
• Mit halben Auge die Google.Group comp.lang.javascript verfolgen per Feed kann nicht schaden
• 40 freie Ajax- und Javascript-Scripts
• Noupés bestOf-Liste in DHMTL, AJAX und Javascript (Teil 1)
• 5 Wege Javascript zu beschleunigen
• 7 Regeln zu barrierearmes Javascript

Für Fortgeschrittene vermutlich interessant (mir derzeit schlicht noch zu komplex und ~iziert): Curried Javascript

Filed under: 1001 Linktipp, Programmierung
No Comments

Designdetails:

• Shopping Carts
• 70 beeindruckende Headergrafiken

Techniktricks:

• htaccess: Do thy bidding oder wie man dem Server seinen Willen aufzwingt
• 7 Webmastertools vom Seo getestet und empfohlen

Weitere Links werden folgen, wenn diese mir über den Weg laufen.

Filed under: 1001 Linktipp, Design
No Comments

Fehler und Empfehlungen:

• 8 Design-Fehler der Entwicker
• 10 Prinzipien für effektives Webdesign
• Unverrückbare Gesetze in Webdesign und ~Entwicklung
• 11 Dinge, die man über das sematisches Web wissen sollte
• SEO-Grundlagen
• 8 grobe Schnitzer aus dem Bereich Usabiltiy
• 11 Wege als Designer aufzufallen

Ressourcen, Give aways, Freebies

• 20 Ressourcen für Freelancer
• Design Patterns
• Nützliche Cheats Sheets auf scottklarr.com gelistet per Google-Suche statt Linksammlung für Cheat Sheets für PHP, CSS, Javascript … etc usw auf der Seite von scottklarr.com
• 8.000 freie Schriften (laut Noupé high quality … ob’s stimmt? Egal. Wer braucht 8.000 Schriften. Zum kruschteln und Stöbern dennoch einen link wert.)
• 8 Vektorgrafik-Silhouetten: Menschen^{!!!Ups: Go to …}
• 69 Werkzeuge der Website-Analyse
• Auf der Suche nach dem richtigen Domainnamen? Tools die helfen …
• 54 Quellen zum Thema Typography
• 89 Communities für Webmaster

Filed under: 1001 Linktipp, Webdesigner sein
1 Comment

Wer sich intensiv in CSS einarbeiten möchte, dem seien die folgenden Links ans Herz gelegt:

1. 70 Expert Ideas For Better CSS Coding
2. 53 CSS-Techniques You Couldn’t Live Without vom letzten Jahr
3. Und 50 Powerful CSS-Techniques For Effective Coding in diesem Jahr
4. Chic Chic, 32 Tipps zur Gestaltung von Tabellen
5. 25 Linktipps: CSS für Formulare

Mit bester Empfehlung des Smashing Magazins.

[Nachtrag]

1. Teil: 101 CSS techniques of all times
2. Teil: 101 CSS techniques of all times

Nun kann man sich frage wer von wem … baer generell gilt, dass diese Links im Netz schwirrenudn wer seine Bookmarks einmal leert wird vermutlich ähnliche Listen zusammenstellen können. Einiges ist definitiv doppelt, das bleibt nicht aus. Ein Dankeschön geht also auch an Noupe.com für die Zusammenstellung.

[/Nachtrag]

Was den @import ./. link des Stylesheets anbelangt, so ist das Argument der alten Browser reichlich hinfällig. Wo in der freien Netzwelt wird der Netscape 4 noch verwendet? Allenfalls die Möglichkeit ältere CSS-Versionen vorrätig zu halten, wie z.B. Saisonale Stylesheets , und für alle HMTL-Template diese an einer Stelle auszutauschen überzeugen mich vom @import, wobei es auch ein umtaufen der Stylesheets täte …

In Bezug auf den @import url(style.css) ist die Liste @import-Hacks sicher von Interesse.

Generell gilt, je weniger Hacks, desto besser.

via Vandelay Design Weekly Links

Nachtrag: Hacks:

• Die 10 besten CSS-Hacks
• 7 CSS Hacks die man verwenden sollte

Wenn man meint es zu brauchen … ich persönlich verzichte lieber auf Hacks und suche alternative Lösungen ohne Hack. Nur manchmal … manchmal eben

Excessiv: Übersicht der Methoden für runde Ecken … (Bestandteil der Liste oben. Aber gesondert erwahnenswert, wei ich finde.)

Ich ich bin noch am Ordnen und Sortieren meiner Feeds und der extrem vielen Tipps darin. Es sind so viele, dass ich primär hier einen Washout mache. Es folgen in Kürze weitere Listen nach Themen sortiert. Nicht verzweifeln … ich habe sie auch nur grob gescannt und was mir nützlich erschien auf die Platte gezogen und vermutlich wandert es unsortiert auf eine CD. Ich muss dringend meine Spielwiese auf Vordermann bringen, denn nur so werde ich die vielen, vielen Techniken und Tipps auch abrufbar haben. Aber immerhin ich habe es gesehen und wenn es CSS ist, dann wird mir dieser Beitrag helfen, es wieder zu finden. Sind ja nur rund 150 Links Um eine kleine Vorstellung zu haben: Ich hatte heute ca. 200 Fenster offen und zuletzt im Feedreader 150 Beiträge auf “Keep new” ohne ansurfen … Ich nenn das den totalen Overload und ich erinnere mich, warum ich den Feedreader zuletzt nur noch selten aufgesucht habe. Ich fühlte mich von der Menge schlicht erschlagen. Nicht mangelnde Güte der Beiträge machte mir zu schaffen, sondern die Beiträge so für mich zu verarbeiten, dass ich mit der Info noch etwas anfangen kann. Leiden wie gemeinsam.

Filed under: 1001 Linktipp, Design, Webtechniken
2 Comments

Überraschung! Statt nun mich vom Flash der BMW-Site quälen zu lassen, werde ich in HTML 4.01 Layouttabelle und Javascript inline darüber informiert, dass die Programmierer der Site nicht in Lage waren, alle gängigen Browser in das Besuchererlebnis einzuschließen. Siehe Screenshot (1:1-Ansicht via Klick auf die Vorschau)

Angesichts der hohen Qualität des Opera-Browsers kann ich eine Meldung bezüglich mangelnder Kompatibilität nur als mangelnde Befähigung des Verantwortlichen für die Site des BMW-Konzerns interpretieren. Ich hätte nicht gedacht, dass mir heute noch mit dem Opera auf nur einer Site, die auf sich was hält, jener alte Schwachsinn oder Ahnliches begegnet:

Zugegeben: BMW schließt die Opera-User nicht aus, wie das die Grafik vermuten lässt, sie informiert nur den Opera-User über Inkompatibilität und überlässt es im weiteren dem Opera User, ob er den Browser wechselt oder austestet wie schlecht oder gut die Site wirklich programmiert ist.

Ich habe den Browser übrigens gewechselt, weil der Firefox seit geraumer Zeit ziemlich mies in der Performanz ist und ich Java und Flash mit dem FF meide und lieber mit dem Opera solche Seiten aufsuche. Der Opera setzt seltener aus. Den IE setze ich für’s surfen nur im Notfall ein. BMW fällt nicht unter die Kategorie Notfall. Ich überlege noch, ob ich nach diesem Blogeintrag mir die BMW-Seite noch antun will oder nicht. Ich tendiere zum “oder nicht”!

Filed under: Webmarketing, Webtechniken
1 Comment