1 So geht der Workshop vor

Transkript

1

2 6 1 So geht der Workshop vor HTML und CSS werden auch übergreifend als Webstandards bezeichnet.»hello, my name is Kai«. Diesen Satz beherrschen und verstehen Sie bereits nach der ersten Englischstunde. Aber im Grunde haben Sie zu diesem Zeitpunkt weder Kenntnis von der Grammatik, der Orthografie noch ein gefestigtes Vokabular der Sprache. Diese Herangehensweise steht auch hinter dem Workshop HTML5 & CSS3. Niemand beschäftigt sich wochenlang mit der Theorie einer Sprache, um erst dann den ersten Satz zu sprechen. Und so möchte ich mit Ihnen sofort loslegen,»webdesign reden«, sprich HTML5 und CSS3 ausprobieren auch wenn Sie nicht sofort jede einzelne Codezeile verstehen. Learning by Doing lautet die Devise. Gerade bei CSS macht es oft dann»klick«, wenn man erst einmal selbst am Code»herumgeschraubt«hat. Nichtsdestotrotz bin ich mir sicher, dass es zwei Sorten von Lernenden gibt: jene, die sich durch»herumprobieren«wissen erarbeiten, sowie andere, die sich erst einen (theoretischen) Überblick verschaffen möchten. Für Letztere ist es empfehlenswert, sich zuerst den Teil 2 mit den Grundlagen von HTML5 und CSS3 vorzunehmen. Ziel des Workshops Am Ende des Workshops stehen fertige Templates, bestehend aus solidem HTML und zeitgemäßem CSS, die Sie als Grundlage für Ihre eigene Webseite verwenden können. Wie oben bereits angedeutet, ist»solide«in Bezug auf HTML5 und CSS3 eine kritische Formulierung: Denn in diesem Buch lernen Sie Techniken kennen, die nicht von allen marktrelevanten Browsern unterstützt werden. Webdesign sollte jedoch so gestaltet sein, dass eine Webseite in den unterschiedlichen Browsern wie Firefox, Internet Explorer & Co. gleich aussieht und gleichermaßen bedienbar ist.

3 7 Ziel ist daher vor allem, ein grundlegendes Verständnis von HTML und CSS mit einem Blick auf die Qualität einer Frontendcodierung zu vermitteln. Umsetzung eines fertigen Grafikdesigns Der Workshop basiert auf einem professionellen Layout für ein Kinoportal, was bedeutet: Das Grafikdesign ist bereits vorhanden, der Workshop konzentriert sich auf die eigentliche Codierungsarbeit. Dies entspricht dem»tagesgeschäft«von Frontendentwicklern. Bevor Sie mit der Arbeit beginnen, haben sich schon andere Menschen Gedanken darüber gemacht, wie das eigentliche Layout aussehen soll. Ein Entwurfslayout besteht in der Regel aus einer kleinen Auswahl von Screendesigns. Unter nebenstehendem Link finden Sie vier verschiedene Seiten des Layouts. Arbeitsweise pro Kapitel Am Anfang eines Kapitels finden Sie einen Link mit der Bezeichnung»Kapitel [Nr.] Startpaket«, unter dem Sie eine Zip-Datei herunterladen können, in der die erarbeiteten Inhalte aus vorherigen Kapiteln berücksichtigt sind. So haben Sie die Möglichkeit, mit jedem Kapitel in den Workshop einsteigen. Am Ende der Kapitel finden Sie ebenfalls einen Link»Kapitel [Nr.] Ergebnispaket«zu dem entsprechenden Ergebnisdownloadpaket. Abb. 1 1 Startseite des Beispiellayouts Download der Layoutvorlagen: Barrierefreiheit und Suchmaschinenoptimierung Im Workshop befassen sich zwei Kapitel explizit mit diesen Themen. Allerdings sind Suchmaschinenoptimierung und Barrierefreiheit nicht auf diese Kapitel beschränkt, da sie keine abgekapselten Arbeitsschritte darstellen. Vielmehr finden sich diese Themen quasi in jedem Stück HTML-Quelltext wieder, beispielsweise im zielgerichteten Einsatz der richtigen HTML-Elemente oder in der sinnvollen Vergabe eines guten Alternativtextes beim Einbau von Bildern. Auch wenn diese Themen nicht regelmäßig hervorgehoben werden, so entsteht während des Workshops doch ein Template, welches grundlegend barrierefrei und suchmaschinenoptimiert ist. Barrierefreiheit und Suchmaschinenoptimierung: Kapitel 17 und 18

4 8 2 Vorbereitungen Mehr über Layouttypen und skalierbare Einheiten in Kapitel 17 Grundlegendes über die Aufgabenverteilung von HTML und CSS finden Sie in Kapitel 22. In diesem Workshop entsteht eine Website des sogenannten elastischen Layouttyps einschließlich skalierbarer Maßeinheiten. Die Seite wird dabei so aufgebaut, dass sie auch von Browsern verstanden wird, die noch kein HTML5 beherrschen. Diese technischen Details bzgl. Layouttyp oder Maßeinheit setzen bereits ein grundlegendes Wissen über die Webseitengestaltung voraus also keine Themen für die Grundlagenvermittlung auf den ersten Seiten. Denn der Workshop verfolgt ein anders Ziel: Er soll Ihnen HTML und CSS Stück für Stück näherbringen, ohne dass Sie durch zu viele Nebenschauplätze abgelenkt werden. Erst wenn die Seite als solche steht, werden diese speziellen Themen und die damit verbundenen Anforderungen in Angriff genommen. Die Layouttypen werden in Kapitel 17.3 beschrieben. Dabei geht es weniger um einzelne Techniken als um eher grundsätzliche Herangehensweisen an die Frontendentwicklung. Skalierbare Einheiten werden in Kapitel 17.2 behandelt. Bis dahin arbeitet der Workshop mit Pixelwerten, was für das eigentliche Verstehen von HTML und CSS keinen Unterschied macht. Mit der Umstellung des Templates auf»relative Maßeinheiten«schaffen Sie eine bessere Bedienbarkeit der Website. Durch ein wenig Erfahrung mit relativen Einheiten werden Sie Ihre Website in Zukunft dann von Anfang an damit aufbauen können. Der»Umweg«über Pixelwerte dient vor allem dem langsamen Herantasten an die Frontendentwicklung. Verschiedene Fallback-Lösungen für alte Browser, die noch kein HTML5 unterstützen oder bestimmte CSS-Eigenschaften nicht kennen, finden Sie in Kapitel Diese Extralösungen von Anfang an zu berücksichtigen wäre grundsätzlich zwar möglich, aber sicher nicht dem Begreifen der Materie förderlich. Von daher legt der Workshop erst einmal den Fokus auf HTML5 selbst, bevor die kon

5 Anlegen einer sinnvollen Ordnerstruktur 9 kreten Probleme zur Sprache kommen. Auch hier werden Sie diese Fallbacks später von Anfang an berücksichtigen. 2.1 Anlegen einer sinnvollen Ordnerstruktur Am Anfang jeder Website steht eine brauchbare Ordnerstruktur. Jede einzelne Webseite ist eine HTML-Datei. Dort wird das eigentliche HTML-Grundgerüst aufgebaut: Inhalte und vor allem Struktur finden dort ihren Platz. Zusätzlich besteht das, was später im Browser angezeigt wird, aus in HTML eingebundenen Grafiken und dem CSS, welches das Layout steuert. Zusätzlich binden die meisten Websites JavaScript-Dateien ein, um kleine Features zur besseren Bedienbarkeit hinzufügen zu können. Diese Struktur kann bereits angelegt werden, sowohl die Verzeichnisse als auch die Dateien, auch wenn diese erst mal leer sind. Dabei sollte jeder Ordner und jede Datei mit sprechenden Namen bezeichnet werden, damit auf einen Blick deutlich wird, was Sie vor sich haben. Die Startseite eines Webangebots wird für Webserver mit»index«bezeichnet. Damit wird diese auch ohne die Eingabe von index.html in der Browserleiste aufgerufen. Homepage, Website, Webseite was die Begriffe unterscheidet, lesen Sie unter Download der leeren Ordnerstruktur: Abb. 2 1 Varianten einer Grundstruktur In Abb. 2 1 sehen Sie zwei mögliche Ordnerstrukturen. Links befindet sich die Variante, die wahrscheinlich intuitiver erscheint. Es spricht nichts dagegen, Ordner mit deutschen Namen anzulegen und die Dateien voll auszuschreiben. Die Struktur rechts ist in der Praxis eher üblich. Ein Bilderordner wird gerne mit img bzw. images, seiten-ordner oder auch pages benannt. Für CSS und JavaScript können Kürzel verwendet werden. Dies macht die Pfade für ihre Einbindung im HTML-Code kürzer. Zusätzlich können Ordner, wie hier _css und _js, mit einem Unterstrich beginnen. Das führt dazu, dass diese im Windows Explorer oder unter Mac im Details zum Umgang mit Pfadangaben finden Sie in Kapitel 24.5.

6 10 2 Vorbereitungen Finder oben angezeigt werden, was in großen Projekten mit vielen Ordnern recht praktisch sein kann. Grundsätzlich ist anzumerken, dass in Datei- und Ordnernamen weder Leer- noch Sonderzeichen verwendet werden sollten. Was unter Windows funktioniert, kann auf dem Webserver zu Problemen führen, auf denen zumeist Unix-Systeme laufen und diese ein Leerzeichen als Ende des Dateinamens interpretieren könnten (dies hängt von der Unix-Version ab). Auch unterscheidet Unix im Gegensatz zu Windows zwischen Groß- und Kleinschreibung; von daher ist es ratsam, Ordner und Dateien stets mit Kleinbuchstaben zu benennen. 2.2 Das brauchen Sie, um loslegen zu können Kostenlose Editoren: Für die Webentwicklung benötigen Sie einen Texteditor und einen Browser. Letzteren werden Sie bereits haben. Beim Editor brauchen Sie im Grunde keine spezielle Software, denn sowohl HTML, CSS als auch JavaScript-Dateien können mit jedem beliebigen Texteditor bearbeitet werden. Allerdings ist es hilfreich, von Anfang an einen HTML/CSS- Editor zu verwenden, der über ein Syntax-Highlighting verfügt. Damit werden die einzelnen HTML- und CSS-Elemente farblich hervorgehoben dies erleichtert das Zurechtfinden in den Quelltexten. Als Editor können Sie Notepad++ für den PC oder Aptana Studio auf dem Mac nutzen. Eine Auswahl an kostenlosen Editoren finden Sie unter nebenstehendem Link. Neben den Ordnern können bereits die leeren Dateien angelegt werden, in denen später der Code aufgebaut wird. Damit der Browser den richtigen Dateityp erkennt, müssen die Dateien eine entsprechende Dateierweiterung haben. Übliche Dateierweiterungen sind:.html oder.htm für HTML-Dateien.css für CSS-Dateien.js für JavaScript-Dateien Praxistipp: Dateien schnell anlegen (Windows) Dateien über den Editor anzulegen ist zuverlässig, aber mit viel Klickerei verbunden. Schneller geht s, indem Sie über die rechte Maustaste»Neu«und»Textdokument«eine leere Textdatei erzeugen. Diese so entstandene Datei»Neues Textdokument.TXT«können Sie beispielsweise in»style.css«umbenennen und haben damit bereits eine gültige CSS-Datei.