i blog you to the ground
Beiträge getaggt mit Webdevelopment
CSS – Attributselektoren
01. Okt
Attributselektoren sind toll und praktisch. Und jetzt mal hier zusammengefasst für mich zum merken:
div[class] Element div mit Attribut class
div[class="blubb"] Element div mit Attribut class und Wert blubb
div[class~="bar"] Element div mit Attribut class, dessen durch Leerzeichen getrennte Liste von Werten blubb enthält (p[class~="blubb"] entspricht p.blubb)
div[class|="blubb"] Element div mit Attribut class, dessen durch Trennstriche (-) getrennte Liste von Werten mit blubb beginnt
div[class^="blubb"] Element div mit Attribut class, dessen Wert mit blubb beginnt
div[class$="blubb"] Element div mit Attribut class, dessen Wert mit blubb endet
div[class*="blubb"] Element div mit Attribut class, das die Zeichenkette blubb enthält
Coda zum halben Preis!
27. Mai
Von heute bis am 29. May um 11:59 PM PST gibts es das geniale Webdevelopment-Tool Coda von Panic zum halben Preis! $49.50 statt $99. Da ich Coda schon seit geraumer Zeit teste hab ichs mir gleich zugelegt. Denn ich hab noch kein praktischeres Programm gefunden. Unter keinem Betriebssystem. Passt wunderbar in meinen Workflow!
Am ehesten geht noch Espresso in die Richtung. Aber da fehlt schon noch einiges im Direktvergleich zu Coda. Aber falls sich Espresso mal noch macht in nächster Zeit bin ich gewappnet. Mit dem letzten MacHeist-Bundle – welches ich gekauft habe – kam auch eine Espresso Lizenz mit! 
Also heute: Coda kaufen!
FancyBox
30. Apr
Schon länger hat mich bei dem allseits beliebten Lightbox-PlugIn zur Bild-Vergrößerung einiges gestört. Zum Beispiel wurden Bilder immer so groß angezeigt wie sie auch waren und nicht nur so groß wie auch das Browserfenster ist. Außerdem fand ich es relativ umständlich Galerien zu erstellen.
Vor kurzem hab ich dann FancyBox entdeckt. Ein hübsches kleines jQuery-Plugin welches das alles besser macht. Bilder werden, egal wie groß sie sind nur so groß angezeigt wie man sie auch sieht. Außerdem kann man automatisch von Bild zu Bild springen ohne irgendwas einstellen zu müssen!
Toll! Übrigens: Apple nutzt wohl auch FancyBox! 
WordPress Theme
20. Mrz
Eigentlich wollte ich mal was über mein schönes Theme hier schreiben. Aber seit ner Weile schreibt der Author meines Themes in seinem Blog nur noch darüber wie man möglichst gut Geld verdient mit seinem Blog. Und jetzt kostet mein Theme in der neuen Version etwas. Und zwar nicht 5$, sondern gleich 65$. Ja toll. Ich hoffe es kauft keiner. Hallo? Das ist kein CMS das ist ein WordPress Theme. Pixelmator kostet weniger und das ist in vollwertiges Bildbearbeitungsprogramm, damit kann man bald soviel machen wie mit Photoshop!
Naja, zum Glück kann ich selbst mit HTML, CSS und PHP umgehen und kann mir so mein eigenes WordPress Theme schrauben. Ich werde mir jetzt für den Anfang mal die WordPress Theme Vorlage die ich hier gefunden habe ansehen. Mal sehen wie schnell ich damit klar komm.
Wenn ichs dann mal kann bau ich mein jetziges Theme nach und verkauf es für 55$, ha!
nobr-Tag-Ersatz in XHTML und HTML 5
10. Mrz
Manchmal möchte man ja in einem Text gewährleisten dass eine zeichenkette auf keinen Fall umgebrochen wird. Zum beispiel ein Produktname der Leerzeichen enthält. Bei “MacBook Pro” z.B. sieht es eifach unschön aus wenn das “Pro” in einer neuen Zeile steht. Früher gab es um einen Umbruch zu verändern folgenden Tag:
<nobr>MacBook Pro</nobr>
Keine Ahnung wann das mal erlaubt war. Aber seit HTML 4.01 ist dieser Tag eigentlich nimmer erlaubt. Trotzdem wird er von allen Browsern unterstützt. Er war immer mal wieder im Gespräch hat es dann aber nie in eine endgültige Version eines Standards geschafft.
Darum sollte man sich als korrekter Webdesigner mit CSS behelfen:
span.nobr { white-space: nowrap; }
Das Markup dazu sieht dann so aus:
<span class="nobr">MacBook Pro</span>
Eine bessere Möglichkeit hab ich noch nicht gefunden. Funktioniert auch und zwar mit allen Standards!
jQuery Plugin: Validation
10. Feb
Ich arbeite ja leider momentan (noch) nicht so viel mit AJAX. Aber wenn, dann mit jQuery. Besonders angetan hat es mir das Formularvalidierungs-Plugin Validation.
Das Web 2.0 lebt durch Formulare. Da muss man als Webdesigner/-entwickler auch oft überprüfen ob denn eine korrekte E-Mail-Adresse, eine korrekte Postleitzahl, ein korrektes deutsches Datum usw. eingegeben wurde. Man kann das ganz umständlich mit PHP machen. Man wertet aus was eingegeben wurde und bastelt für jeden Fehler eine Fehlermeldung mit Hinweis. Das kostet ungefähr pro Formular einen Tag mehr Zeit und macht soviel Spaß wie Walnüsse zählen.
Mit Validation schreibt man sein Formular fast wie gewohnt und wie von Geisterhand bekommt man direkt unter dem jeweiligen Formularfeld eine wunderschöne Fehlermeldung angezeigt wenn etwas falsch eingegeben wurde. Der einzige Unterschied ist dass man in das class-Attribut der jeweiligen Formularfelder Anweisungen wie “required” oder “date” schreibt. Man muss nur jQuery einbinden, Validation einbinden und Validation dann noch sagen was es validieren soll.
Gesammelte Beispiele finden sich hier. Eine ausführliche Doku ist bei jQuery selbst zu finden.
Das Plugin ist sehr flexibel. Falls man mit den Angaben im class-Attribut nichtmehr weiter kommt kann man auch mit JavaScript Angaben die Validierung beeinflussen. Näheres dazu steht ausführlich in der Doku.
Ein geniales jQuery-Plugin welches man an allen Ecken und Enden im Webdesign brauchen kann! Ich benutze es inzwischen für alle meine Formulare.
