senäh

17senäh und so…

HTML/CSS/JS
16. Jul 2011
Kommentare: 2

One-Page-Apps: Fundstücke für Webdesigner und -entwickler

Kategorien: HTML/CSS/JS | 16. Jul 2011 | Kommentare: 2

Es ist schon toll. Dank dem immer weiter verbreitetem Open-Source-Gedanken und dem Servicewahn der modernen Internetwelt profitieren auch wir Web-Nerds von dem, was dabei rumkommt. Konkret meine ich damit diese kleinen, nützlichen Helferlein namens One-Page-Apps.

Was sind One-Page-Apps?

One-Page-Apps sind einfache Services, die bestimmte oft wiederkehrende Aufgaben erleichtern. Das ist zumindest meine Definition davon :D

Bestes Beispiel: Fülltext. Wie oft benötigt man mal ein bisschen Lorem Ipsum? Ich google dann immer schnell und finde irgendeinen Generator. Wahrscheinlich sollte ich mir aber einfach mal ein Plugin/Makro/Snippet in meinen Komodo reinhauen, hehe.

Aber es gibt auch durchaus wichtigere Anwendungsfälle. Durch diese One-Page-Apps kann man eine Menge Zeit sparen. Ich habe dazu gerade diesen Artikel von Chris Coyier auf CSS-Tricks (kennste, ne?) gefunden. Neben seinen eigenen Ausführungen dazu habe ich auch mal einen Blick in die 114 Kommentare (Stand: jetzt gerade) geworfen und möchte nun hier mal die meiner Meinung nach nützlichsten Tools zusammenfassen.

Ein Klassiker – AJAX-style loading.gif-Generator

Kennen sicherlich viele von euch schon, aber trotzdem wichtig: ein Tool zum Generieren des in Zeiten von AJAX & Co typischen Ladekreises. Man klicke hier, suche sich Stil aus (angenehm große Auswahl), gebe Vor- und Hintergrundfarbe (bzw. -Transparenz) ein und schon ist der Drops gelutscht.

Generierung eines Loading-Gifs

Generierung eines Loading-Gifs

CSS3 Browser-Kompatibilität

CSS3 ist was feines, wie die nachfolgenden Beispiele noch demonstrieren werden. Allerdings gibt es durch die fehlenden Standards viel Mehraufwand auf Seiten eines Webentwicklers. So wird im Allgemeinen nicht die rohe Eigenschaft implementiert (z.B. border-radius), sondern bekommt je nach Browser entsprechende Präfixe (z.B. -moz-border-radius für den Firefox). Das nervt. Aber ist nun mal so.

Um sich nicht alle Präfixe und die damit einhergehenden Abweichungen in der Syntax merken zu müssen, gibt es “CSS3, please!“. Dort gibt es das aktuell notwendige Markup für die Cross-Browser-Kompatibilität diverser CSS3-Eigenschaften, z.B. border-radius, box-shadow, background-image und und und. Prädikat “äußerst nützlich”.

abgerundete Ecken über CSS3 - Browser-spezifischer Code inkl. Kommentaren

abgerundete Ecken über CSS3 - Browser-spezifischer Code inkl. Kommentaren

Kleiner Tip dazu: statt die veränderlichen (=unterstrichenen) Werte manuell einzugeben, kann man sie auch einfach auswählen und über Scrollen (nach oben und unten) verändern. Die Live-Vorschau des Elements dazu funktioniert natürlich einwandfrei ;)

Einen kleinen Nachteil hat diese One-Page-App allerdings: was ist, wenn ich mal verschiedene Radien der abgerundeten Ecken haben möchte? There’s an One-Page-App for that! Sie nennt sich…

CSS Border Radius Generator

Ist ziemlich selbsterklärend. Einfach an jeder Ecke einen Wert eingeben, bis man hat, was man möchte.

Einstellen unterschiedlicher Abrundungen mit dem CSS3 Border Radius Generator

Einstellen unterschiedlicher Abrundungen mit dem CSS3 Border Radius Generator

Button Maker

Jetzt mal noch 2 Sachen, die wesentlich mehr in die WYSIWYG-Richtung gehen. Hier erstmal der Button Maker von Chris Coyier.

Dem aufmerksamen Blogleser wird auffallen, dass es sich hierbei um denselben Typen handelt, den ich oben bereits in der Einleitung verlinkt hab. Jopp, jopp, jopp, der Kerl ist ordentlich dabei ;) Aber hier mal ein Screen vom besagten Button Maker.

Erstellung eines CSS3-Buttons mit dem Button Maker

Erstellung eines CSS3-Buttons mit dem Button Maker

Einer der großen Vorteile von CSS3 ist ja, dass mehr den Client ausgelagert wird. Dadurch wird die Datenübermittlung vom Server als Flaschenhals umgangen, um so die allgemeine Performance einer Webseite zu verbessern. Bahnhof? Ok, etwas Nicht-Nerd-freundlich: alle Bilder, die euer Browser über CSS3 von Grund auf selbst rendern kann, brauchen nicht vom Server geladen werden. Das bedeutet für euch einen schnelleren Seitenaufbau und für den Server ein wenig Entlastung. Win-Win-Situation nennt man sowas, oder? ;)

Will man einen stylishen Button ohne allzu viel Tamtam zaubern, ist der Button Maker dafür prädestiniert.

Layer Styles

Wer das Ganze allerdings etwas Photoshoppiger und mit mehr Optionen mag, der schaut mal bei Layer Styles vorbei. Hammer-Service, wie ich finde. Ohne Umgewöhnung die wesentlichen Eigenschaften des Elements zurecht friemeln und am Ende kommt CSS Code bei raus. Mein Favorit unter den hier vorgestellten Tools.

Bearbeiten von Ebeneneigenschaften einer HTML-Box. Not bad, man...

Bearbeiten von Ebeneneigenschaften einer HTML-Box. Not bad, man...

Einziges Manko, was ich sehe: das Einstellungsfester ist nicht skalierbar. So kommt es auf meinem 13″ Display dazu, dass jenes Fenster eigentlich immer einen Teil der Box verdeckt. Nicht weiter wild, hätte man aber einfach durch ein dezentraleres Ausrichten der HTML-Box ändern können :(

Noch 2: CopyPasteCharacter und CSS Font Stack

Ersteres ist zum einfachen Kopieren und Einfügen von Sonderzeichen (⌥, , †, ½, ♫, …) in Texte, Tweets oder wozu man sie halt einfach gerade benötigt, gedacht. Einfach Sonderzeichen suchen und zum Kopieren draufklicken. Simple und supi. Stammt übrigens aus einer skandinavischen Schmiede namens “Konst & Teknik & Martin” :D

Brauchste Sonderzeichen? Gehste zu CopyPasteCharacters!

Brauchste Sonderzeichen? Gehste zu CopyPasteCharacters!

Letzteres habe ich vorhin erst gefunden und stelle ich mir recht nützlich vor. Ziel: man will seine Webseite in einer bestimmten Schrift darstellen. Problem: Abwärtskompatibilität sowohl zu älteren Versionen des eigenen Betriebssystems als auch zu fremden. Helvetica gibt’s auf Windows nicht, Calibri auf’m Mac ebenso wenig. Diese Seite bietet die naheliegendsten Alternativen an, damit man sich selbst keine Platte machen muss und auf wichtigere Sachen konzentrieren kann.

CSS Font Stack

CSS Font Stack

Fehlt was?

Wie findet ihr die Tools? Kennt ihr noch nützliche Links? Muss hier noch unbedingt etwas herein? Immer her damit!

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)

Kommentare (2)

  1. genialer Post. Die iOS und Androidbrowser haben ja eine der besten CCS3-Implementationen. Da find ich z.B den Buttonmaker grad mal sehr nützlich. 

Hinterlasse einen Kommentarsenäh

Pflichtfelder sind mit * markiert.