5 vor 12 – oder 5 kostenlose HTML/CSS-Tools
Unser Kursleiter Alex Kereszturi stellt Ihnen in diesem Blogbeitrag fünf kostenlose Tools vor, die Sie nach einem HTML/CSS-Kurs nicht nur verstehen, sondern auch nie mehr missen möchten.
Ich stelle Ihnen in diesem Beitrag fünf kostenlose Tools vor, die Sie nach einem HTML/CSS-Kurs nicht nur verstehen, sondern auch nie mehr missen möchten.
Tool 1: Internet Explorer (IE) EntwicklertoolsMittwoch, 11:54 Uhr. Der Webauftritt eines grossen Kunden ist gestern online gegangen. Kurz vor dem Mittagessen macht sich Ausgelassenheit bei mir breit. Da klingelt das Telefon: «Layoutfehler im Internet Explorer 8!» Da war sie also, meine Mittwochvormittags-Herausforderung. Und nur noch fünf Minuten bis zum Mittagessen. Also greife ich in meine Werkzeugkiste …
Der Internet Explorer ist etwas ganz Spezielles – und das weiss er auch
Wer schon Webdesigns online geschaltet hat, kennt das Sorgenkind, wenn es um Darstellung geht. Der IE war da schon immer speziell. Mittlerweile ist das bekannt und so lassen sich in aktuellen IE-Versionen mit der F12-Taste die sogenannten «Entwicklertools» einschalten, wo sich dann in den Menüs Browsermodus und Dokumentenmodus auch ältere Versionen des IE simulieren lassen.
Das ist einerseits effizienter als mit Mehrfachinstallationen. Zudem musste ich den alten Laptop nicht eigens wegen dem IE8 aufbewahren und konnte ihn den Kindern schenken.
Also schnell umgeschaltet auf IE-Version 8 und einen Blick ins Layout geworfen. Autsch…! Ja, ich sehe es! Aber das wird gelöst, auch wenn ich inzwischen nur noch vier Minuten habe bis zum Mittagessen …
Tool 2: browserstack.com
Traue keiner Browservorschau, die du nicht selbst gefälscht hast
In jeder HTML5-Einführung und in jedem CSS-Kurs weise ich gerne darauf hin, dass man als Webdesigner nicht darum herumkommt, Websites in unterschiedlichen Browsern und Browser-Versionen zu testen. Selten hat man allerdings zig Betriebssystemversionen und Browserinstallationen zur Hand – es sei denn, man betreibt ein Museum. Abhilfe schafft www.browserstack.com. Da erhält man, was das Browservorschau-Herz begehrt. Und das nicht nur als Screenshot, sondern auch live in Echtzeit zum Selberklicken!
|
Digicomp bietet verschiedene Kure für Webentwickler an: |
Die Verwendung von BrowserStack fühlt sich für mich jedes Mal an, als wär ich im Süsswarenladen. Ich staune jeweils über die vielen «Geschmacksrichtungen» von Chrome und Firefox, aber schliesslich ruft das Mittagessen und ich konzentriere mich auf meine Aufgabe.
Tool3: css3generator.com
CSS3 ist, wenn man gewisse Dinge dreimal sagen muss
Mittlerweile ist das Problem erkannt: Das CSS muss angepasst werden. Wie im letzten CSS3-Workshop demonstriert, achte ich bei der nun folgenden Anpassung darauf, die korrekten Vendor-Prefixes zu verwenden und wenn es sein muss eben auch CSS-Befehle für jeden Browser einzeln einzugeben. Da mich Mittagshunger und Zeitnot plagen, greife ich da gerne zu www.css3generator.com und lasse mir die benötigten fünf Zeilen mit einer einzigen Eingabe automatisch erstellen.
So, und was mache ich mit den restlichen zwei Minuten …?
Tool4: LESS
CSS ist KEINE Programmiersprache! Also machen wir eine daraus
Eine der häufigsten Fragen in CSS-Kursen ist jene nach Variablen. Die Antwort fällt jedes Mal gleich aus: «Nein, in CSS gibt es keine Variablen, weil CSS keine Programmiersprache ist.» Das demotivierte Schweigen, das mir da entgegenschlägt, koste ich jeweils kurz aus und zeige meinen Kursteilnehmenden dann www.lesscss.org.
Mit sehr wenig Einarbeitungsaufwand ermöglicht {less} das Schreiben von Code, inklusive Verwendung von Variablen. Dieser Code wird dann vorab oder zur Laufzeit in CSS umgewandelt. Dies spart vor allem bei Farb- oder Grössenanpassungen im Nachhinein nicht nur Zeit, sondern auch Nerven.
Also lasse ich den neuen Code bei {less} durchrattern und blicke auf die Uhr: 11:59!
Tool5: HTML- und CSS-Validator
Validieren statt warten
Noch eine Minute. Warum sich nicht einmal an das halten, was man seinen Teilnehmenden in HTML-Kursen predigt und die fertige Seite durch die beiden Validatoren des W3C schicken. Einmal zum HTML-Validator unter http://validator.w3.org gesurft … Nein, halt! Am HTML habe ich ja gar nichts geändert. Also ab zum CSS-Validator: http://jigsaw.w3.org/css-validator/. Da entdecke ich mit Schrecken 19 Fehler. Das wird wohl nichts mehr vor dem Mittagessen. Oder doch?!
Schnell überfliege ich die angezeigten Fehlermeldungen und stelle fest, dass es sich um jene Fehler handelt, die man heutzutage wegen HTML5 und/oder CSS3 einfach einbauen «muss». Mission erfolgreich beendet! Die Uhr springt auf 12:00. Auf zur nächsten Mission, dem Mittagessen.