Kopfgrafik

Webproduktion

Hier findest Du die Inhalte aus dem Unterrichtsfach Online nochmal im Überblick. Vergleiche dazu auch die entsprechenden Einträge in unserem Notizbuch.

Einführung in HTML und CSS

Webseiten sind Textdateien. Wir erstellen Webseiten mit einfachen Texteditoren wie Bluefish, Sublime oder Brackets, mit komplexen Entwicklungsumgebungen wie Aptana, oder mit WYSIWYG-Programmen wie Dreamweaver und  Kompozer oder anderen Editoren. Webseiten sind in HTML, der HyperText Markup Language geschrieben.

Das Grundgrundgerüst einer HTML-Datei

Einzelne Bereiche innerhalb der Webseite werden durch sogenannte Tags (Auszeichnungsmarken) gekennzeichnet. Solche Elemente sind beispielsweise p („paragraph“ für Absätze) oder h1 („heading“ für Überschriften). Das Gerüst einer HTML-Datei sieht vereinfacht wie folgt aus:

<html>
<head>
</head>
<body>
</body>
</html>

Für eine korrekte Webseite brauchen wir allerdings noch einige weitere Angaben, wie z.B. Informationen über den Dokumententyp oder den verwendeten Zeichensatz. Und so sieht nun das vollständige Grundgerüst aus:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Der Seitentitel</title>
</head>
<body>
  Hier steht der eigentliche Inhalt der Webseite
</body>
</html>

Dieses Grundgerüst kann nun mit Texten, Bildern und anderen Inhalten gefüllt werden. Dafür gibt es in HTML einen Vorrat an Tags (Auszeichnungsmarkierungen) wie <h2>, <p> <a> und viele weitere Elemente.

Literaturtipp: Unter https://www.w3schools.com/html/html_intro.asp findest Du eine gute gemachte (englischsprachige) Einführung in die Grundlagen von HTML.

Formatierungen mit CSS

Um die Webseiten zu gestalten, nutzt man CSS (Cascading Style Sheets). Die ersten CSS-Eigenschaften, die Du kennen lernst, sind unter anderem font-family, font-size oder background-color. In unseren ersten Übungen formatieren wir beispielsweise ein Überschrift mit der folgenden Anweisung:

h1{color:#fc0;}

Die oben stehende Anweisung färbt eine Überschrift erster Ordnung gelb ein.
Neben der Farbe gibt es viele weitere CSS-Eigenschaften die Du z.B. auf https://www.w3schools.com/css/css_intro.asp nachlesen kannst.

Die CSS-Anweisungen schreiben wir zunächst in den Headbereich unserer HTML-Datei. Wie zum Beispiel mit folgendem Code:

<style type="text/css">
h1 {
    font-family:Arial, Helvetica, sans-serif;
    background-color:#396;
    color:#fc0;
    }
</style>

Ein einfaches Seitenlayout gestalten

Für die erste Aufgabe brauchst Du noch eine weitere CSS-Eigenschaft mit der sich einzelne Teile des Layouts links oder rechts anordnen lassen. Das kann man unter anderm mit der CSS-Eigenschaft float erreichen. Damit rückst Du ein Bild zum Beispiel nach rechts, wobei der nach dem Bild folgende Text um das Bild links herumfließt.

Probleme, die zu Anfang auftauchen können

Bei den ersten Übungen wird das größte Problem sein, die Dateien für unsere Übungen an der richtigen Stelle zu speichern. Mach Dich mit den Grundlagen des Betriebsystems vertraut und speichere Deine Dateien nicht irgendwo hin, sondern immer in den extra für die aktuelle Übung angelegten Ordner.

Das solltest Du jetzt wissen

Wie ist das Grundgerüst einer HTML-Datei aufgebaut?
Wofür werden CSS-Anweisungen eingesetzt?
Welche CSS-Eigenschaft bestimmt die Hintergrundfarbe eines Objekts?
Warum darf ich ein Bild nicht an einen anderen Ort auf einem Datenträger bewegen, wenn ich das Bild bereits in eine Webseite eingebaut habe?

Einstiegsaufgabe

Anhand eines kleinen Webprojekts kannst Du die grundlegenden Schritte bei einer Webproduktion noch mal wiederholen.

So geht's

Dazu gehört zunächst das Erstellen einer geeigneten Ordnerstruktur. Lege für diese Aufgabe einen Projektordner mit zwei Unterordnern an. In den einen Unterordner kommen Materialien wie gelieferte Bilder, Rohtexte etc. Der andere Unterordner ist der Uploadordner (die eigentliche Website). Hier gehört alles hinein, was später im Web veröffentlicht wird.

Nach dem Anlegen der Ordner und dem Kopieren der gelieferten Materialien, wird der Rohtext in die HTML-Datei gesetzt und der Inhalt mit h1, h2, h3 und p strukturiert.

Eine weitere Möglichkeit, Inhalte zu strukturieren, ist das Anlegen einer Liste. Eine ul (unordered list) hat folgenden Aufbau:

<ul>
   <li>ein Listenelement</li>
   <li>ein weiteres Listenelement</li>
</ul>

Unter http://www.w3schools.com/html/html_basic.asp kannst Du nachlesen, welche Elemente zur Textstrukturierung Du in HTML nutzen kannst.

Wir kümmern uns wieder um HTML und lernen zwei neue Tags kennen: span und div. Was tust Du, wenn Du innerhalb eines Absatzes nur eine bestimmte Textpassage formatieren möchtest? hierfür erstellst Du Dir erstmal eine eigene Klasse und wendest diese Klasse auf ein span-Element an. Willst Du einen größeren Bereich, z.B. mehrere Absätze formatieren, nimmst Du ein div. Ein div definiert ein sogenanntes Blocklevel- und span ein Inline-Element. Mit dem Element span werden wir in Zukunft nicht all zu häufig arbeiten, aber divs brauchen wir regelmäßig.

Bislang läuft der Inhalt noch über die gesamte Breite des Browserfensters. Das änderst Du, indem Du um die komplette Seite einen div-Container legst, ihm eine feste Breite zuweist und den Container mit margin:0 auto; zentrierst.

Im nächsten Schritt wird das Layout mehrspaltig. Dabei hilft uns die CSS-Eigenschaft float, mit der ein Container rechts oder links angeordnet werden kann. Mit Hilfe der CSS-Eigenschaft clear wird unter dem 2-spaltigen Layout das floaten beendet. Der Inhalt fließt jetzt wieder über die gesamte Breite des Seiten-Containers.
Das Erstellen von Seitenlayouts mit CSS erfordert Übung; nicht verzweifeln, wenn es nicht auf Anhieb funktioniert ;-)

Zum Schluss der Einstiegsaufgabe duplizierst Du Deine HTML-Datei und speicherst sie unter einem neuen Namen ab. Im Duplikat nimmst Du noch die nötigen Änderungen am Inhalt vor und anschließend verlinkst Du beide Seiten.

Wie und wo lassen sich CSS-Angaben definieren?

CSS-Angaben können auf drei Arten in HTML eingebunden werden: im Head-Bereich einer HTML-Seite (das hatten wir zu Anfang gemacht). Stylesheets können aber auch in externe CSS-Dateien ausgelagert werden und HTML-Elemente können auch lokal direkt formatiert werden. Das Auslagern der CSS-Anweisungen in externe Dateien ist für eine Website die übliche Methode.

Aufbau von CSS-Deklarationen

Eine CSS-Deklaration ist immer nach dem gleichen Schema aufgebaut: Selektor{Eigenschaft:Wert;}.
Bislang hast Du folgende Selektoren kennen gelernt:

Darüber hinaus gibt es noch eine Reihe weiterer Selektoren – dazu später mehr.

Beliebte Fehlerquellen

Ein häufig gemachter Anfängerfehler ist das nachträgliche Verschieben von Dateien oder das Umbennen von Datei- oder Ordnernamen. Da das zu Fehlern bei verknüpften Dateien führt, sollte man sich schon zu Anfang eines Web-Projekts genau die Ordnerstruktur überlegen und nachträglich nicht mehr ändern.
Tipp: wenn Du eine Verknüpfung siehst, die mit file:/// ... beginnt, wird diese Verknüpfung nur auf Deinem Computer funktionieren, aber nicht mehr, wenn die Seite vom Server geladen wird.
Weitere Fehlerquellen sind:

Tipps zur Fehlervermeidung

Schließe jedes Tag und jede öffnenden Klammer sofort beim Erstellen.

Zum guten Stil gehört es, seinen Quellcode in den HTML- und CSS-Dateien zu kommentieren (in HTML <!-- HTML-Kommentar --> und in CSS /* CSS-Kommentar */). Mach davon Gebrauch und dokumentiere in Kommentaren, welche CSS-Anweisungen Du zu welchem Zweck in Deinem Webprojekt verwendest.

Ein HTML-Quellcode lässt sich übrigens komfortabel mit Browsereigenen Werkzeugen untersuchen oder validieren, also auf korrekte Syntax überprüfen. Um herauszufinden, welche CSS-Angaben auf ein Element wirken, klickst Du in Firefox oder Chrome mit der rechten Maustaste auf das betreffende Objekt und wählst „Element untersuchen“. Ein weiteres praktisches Hilfsmittel für die Fehlersuche ist die Webdeveloper Extension. Validiere Dein Werk regelmäßig!

Literaturhinweise

Das bislang Gelernte lässt sich auf den Seiten von https://www.w3schools.com nochmal nachlesen.
Literaturhinweise findest Du auch in den Aufgabenstellungen der bisherigen Übungen.

Das solltest Du jetzt wissen

Wie sieht ein Uploadordner für ein Webprojekt aus und welche Dateien gehören in diesen Ordner?
Warum darf ich in Webseiten eingebundene Dateien wie Bilder oder externe CSS-Dateien nicht nach dem Einbinden an einen anderen Ort auf einem Datenträger bewegen?
Mit welcher CSS-Eigenschaft definiere ich die Schriftgröße?
Mit welcher CSS-Eigenschaft bestimme ich Außen- und Innenabstand eines Elements?
Für welchen Zweck werden die Elemente span und div eingesetzt und wie unterscheiden sie sich?
Wozu dienen Klassen in einer CSS-Anweisung?

Bilder

Gängige Dateiformate für Bilder, die im Web genutzt werden können sind JPEG, PNG und GIF.

GIF
Vorteil: Animation möglich, transparenter Hintergrund, für Grafiken mit wenigen Farben geeignet, geringe Dateigröße.
Nachteil: maximal 256 Farben, die transparenten Bereiche haben keine weichen Übergänge.

JPEG
Vorteil: starke Komprimierung (bei entsprechendem Qualitätsverlust) möglich. Im Gegensatz zu GIF ist das JPEG Format mit 16,7 Mio Farben (bei 24 Bit Farbtiefe) für Halbtonbilder geeignet. Als „progressive“ JPEG stufenweiser Bildaufbau im Webbrowser möglich.
Nachteil: Je stärker die Komprimierung, desto größer sind die Qualitätseinbußen. Patentrechtlich geschützt.

PNG
Das PNG-Format (Portable Networks Graphics) gibt es in den Geschmacksrichtungen PNG-8 (8-Bit Farbtiefe) und PNG-24 (24-Bit Farbtiefe).
Vorteil: im transparenten PNG kannst Du eine weich abgestufte Transparenz abspeichern. Das PNG-Dateiformat ist erweiterbar.
Nachteil: ggf. hohe Dateigröße im Vergleich zu JPEG.

Bei den oben stehenden Dateiformaten handelt es sich um Pixelgrafik. Später werden wir auch andere Möglichkeiten kennen lernen, um Grafiken im Browser zu zeichnen wie z.B. Vektorgrafiken.

In Photoshop werden Bilder für unsere HTML-Seiten übrigens nur über den Dialog „für Web speichern“ als JPEG, GIF oder PNG exportiert und nicht mit dem Befehl „Sichern unter“.

Aufgabe mehrseitiges Webprojekt

In folgenden Beispielprojekt erstellst Du ein zweispaltiges Layout mit Kopf- und Fußbereich. Bei dieser Übung ist das Analysieren der Vorlage und anschließend der korrekte Aufbau der HTML-Seite mit sinnvoll verschachtelten Containern wichtig.
Führe bei dieser Aufgabe die vorbereitenden Arbeiten anhand der Checkliste Schritt für Schritt zum Web-Projekt durch.
Das zweispaltige Layout wird wieder über die CSS-Eigenschaft float realisiert. Um die Fußzeile wieder über die gesamte Breite laufen zu lassen, setzt Du die CSS-Eigenschaft clear ein.

Zunächst ist diese Website ganz ähnlich, wie die vorherige. Im weiteren Verlauf lernst Du anhand dieser Aufgabe aber wichtige neue Techniken im Zusammenhang mit HTML und CSS kennen.
Dazu gehören:

Bewahre die HTML und CSS-Dateien dieser Übung gut auf. Du kannst Sie nutzen, um Dir später das Gelernte nochmal vor Augen zu führen.

Webprojekte veröffentlichen und Webhosting

Wie Du Dein Webprojekt in's Internet stellst und wie man den geeigneten Webhoster findet, erfährst Du auf der Seite Webprojekte veröffentlichen.

Und das solltest Du jetzt wissen bzw. anwenden können

Welche Bild-Dateiformate können im Webbrowser angezeigt werden?
Nenne 4 Kriterien bei der Auswahl eines Webhosting-Anbieters
Wozu dient auf einem Webserver die .htacess-Datei?
Erläutere die Begriffe favicon.ico und robots.txt
Nenne vier unterschiedliche Arten von Selektoren für CSS-Anweisungen
Wie wird ein Navigationsmenü horizontal ausgerichtet?
Du solltest den Quelltext einer Liste und einer Tabelle in HTML aufzeichnen können
Und Du solltest ein 3-spaltiges CSS-Layout mit Kopf- und Fußzeile erstellen können

Neue Aufgabe: Gestaltung

In dieser Übung gestaltest Du ein Screendesign und setzt es anschließend in HTML, CSS und JavaScript um.
Wichtig ist hierbei, dass das Screendesign eine individuelle Botschaft, ein eigenes Image transportiert.
Du beschäftigst Dich bei dieser Aufgabe mit Kreativitätstechniken wie Brainstorming oder Moodboards.
Literaturtipps:
Kribbeln im Kopf: http://www.mariopricken.com/de/publications
oder http://www.amazon.de/Praxishandbuch-Digitale-Illustration-Die-Meisterklasse/dp/3830713169.

Listen, Tabellen und Formulare

In der folgenden Unterrichtseinheit beschäftigen wir uns noch mal mit Listen (http://www.w3schools.com/html/html_lists.asp) und Tabellen (http://www.w3schools.com/tags/tag_table.asp) und erstellen Formulare (https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare_erstellen_und_gestalten) in HTML, anschließend wird das Werk per CSS formatiert. Zum Schluss erstellst Du eine einfache Formularüberprüfung per JavaScript.

Aufgabe Nachbau einer kompletten Website

Setze ein vorgegebenes Screendesign in HTML und CSS um. Für diese Nachbauaufgabe solltest Du Dir noch ein paar weitere Techniken anschauen.
Zum einen das Positionieren von Elementen. Und zum anderen das Erstellen einer Navigation mit aufklappender Unternavigation, auch Dropdown-Navigation genannt. Die Navigation wird in HTML wie üblich als Liste erstellt, wobei die Unternavigation als Liste in einem Listenelement verschachtelt ist. Im untenstehenden Beispiel ist die Navigation in dem HTML5-Element nav verpackt. Das dazugehörige Stylesheet sieht dann wie folgt aus:

Navigation mit Unternavigation

nav a{
      text-decoration:none;
      color:#222;
      padding:2px;
     }

/* Aufklappnavigation */
   
nav ul li{
    list-style-type:none;
    /* Listenpunkte per float horizontal anordnen. */
    float:left;
    /* jetzt brauchen wir noch einen horizontalen Abstand zwischen den Listenelementen */
    margin:0 6px;
    /* erster Schritt fürs Ausklappen: Bezugspunkt für absolut positionierte verschachtelte Elemente setzen */
    position:relative;
        }
       
nav ul li ul li{
     /* zweiter Schritt für das Ausklappen: Breite der verschachtelten Unternavigation definieren, um unschöne Umbrüche zu verhindern. */
    width:10em;
    background-color:#F8F2A2;
    border-bottom: 1px #ccc solid;
    }

nav ul li ul{
    /* dritter Schritt fürs Ausklappen: verschachtelte Liste positionieren und ausblenden. Die verschachtelte Liste wird erstmal verborgen, in diesem Beispiel nicht per display:none sondern über die CSS-Eigenschaft position. */
    position:absolute;
    left:-99999em;
    }

nav ul li:hover ul{
    left:0em; /* die verschachtelte Liste wird wieder eingeblendet beim hover über das Elternelement. */
    }

/* und nun das gleiche für die dritte Navigationsebene */       
nav ul li ul li ul li {
    background-color:#CAEDC4;
    /* die verschachtelte Liste wird verborgen, über position. */
    left:-9999em;
    }

nav ul li ul li:hover ul li{
     /* die verschachtelte Liste wird wieder eingeblendet beim hover über das Elternelement. */
    left:0em;
    }

Weitere Beispiele für Dropdown-Navigationen siehe auch http://www.drweb.de/magazin/responsives-css-dropdown-menue-ohne-javascript.
Eine per Javascript angereicherte Variante bietet zum Beispiel Superfish (http://users.tpg.com.au/j_birch/plugins/superfish/examples bzw. http://www.elmastudio.de/webdesign/javascript-dropdown-menus-mit-superfish).

Auf Tablets, Smartpones und anderen Touchscreens haben wir zwar keine hover-Effekte per CSS oder mouseOver-Effekte per JavaScript, sie lassen sich aber imitieren. Zum Beispiel in JavaScript mit einem touchstart-Event statt einem mouseOver. Den in der obenstehen CSS-Anweisung stehenden hover (nav ul li:hover ul) kann man per JavaScript emulieren. Siehe z.B. https://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly, https://blog.travelvictoria.com.au/2012/03/31/make-sure-your-websites-drop-down-menus-work-on-an-ipad/ oder http://stackoverflow.com/questions/20818863/handling-hover-events-on-a-touch-screen.

Diese Nachbauaufgabe bietet neben der aufklappenden Navigation noch ein paar weitere Hürden.
Beliebte Fehler sind beim CSS-Layout unter anderem:

Tipps zur Fehlerbehebung:


Responsive Webdesign

Webseiten sollten auf möglichst vielen Ausgabegeräten und Medien ohne Probleme betrachtet werden können. Egal ob sie auf einem Desktop-PC, einem Smartphone oder einer Smartwatch angezeigt werden. Man spricht bei der Technik für solche universell funktionierenden plattformübergreifenden Websites vom „responsive webdesign“.
Mit Hilfe von Media-queries lassen sich für unterschiedliche Ausgabegeräte spezielle CSS-Anweisungen anwenden.

Literaturhinweise zu Media-queries findest Du unter http://wiki.selfhtml.org/wiki/CSS/Media_Queries oder http://www.heise.de/ix/artikel/Allen-recht-1058764.html.

Bei der Darstellung von Webseiten auf Smartphones stellen sich Fragen wie:

Eine gute Lösung für anpassbare Bilder ist z.B. das Attribut srcset für Bilder. Oder auch http://adaptive-images.com und http://www.pc-magazin.de/ratgeber/adaptive-bilder-mit-responsive-design-1332512.html.  Adaptive-images benötigt allerdings PHP und Zugriff auf die .htaccess-Datei auf dem Webserver. Hat man das nicht, bieten sich auch Lösungen wie https://github.com/joshje/Responsive-Enhance oder http://scottjehl.github.io/picturefill an.

Lösungen für Navigation auf mobilen Endgeräten sind beispielsweise http://astuteo.com/mobilemenu oder http://webdesignerwall.com/demo/responsive-menu.

Um Tabellen auf Smartphones darzustellen, bietet sich die Lösung von Zurb an.

Ein Blick in die Geschichte des WorldWideWeb.

Das Internet auf dem das WWW (World Wide Web) aufbaut, entstand bereits in den 1960er Jahren. Es war ein Forschungsprojekt des US-amerikanischen Verteidigungsministeriums. Ziel war es, ausfallsichere Netzwerkverbindungen aufzubauen und knappe Rechnerresourcen gemeinsam nutzen zu können. 1969 bildeten vier Universitäten in den USA den ersten Rechnerverbund im sogenannten Arpanet.ARPANET

Anfang der 70er Jahre entstehen weitere Protokolle und Dienste im Arpanet wie FTP (1971) oder eMail (1972). 1982 wird TCP/IP zum Standardprotokoll im Arpanet. Eine Methode, um sich auf diese einheitliche Standards für die plattformübergreifenden Netzwerktechnologien zu einigen sind die sogenannten RFCs. Das US-amerikanische Verteidigungsministerium zieht sich in den 80er Jahren aus dem Arpanet zurück, das dann zum Internet wird.

Das WWW hingegen gibt es erst seit Anfang der 1990er Jahre. Es wurde ab 1989 von Sir Tim Berners-Lee am europäischen Forschungszentrum CERN konzipiert. Er entwickelte den ersten Webserver, den ersten Webbrowser und die dazugehörigen Netzwerkprotokolle (http) samt dazugehöriger Seitenbeschreibungssprache HTML.

Wichtige Stationen in der Entwicklung des WWW waren:

Die zur Entwicklung des WWW dazugehörigen Versionen von HTML und CSS sind:

XHTML war um die Jahrtausendwende als Übergangslösung von HTML zu XML geplant. XML hat sich als Seitenbeschreibungssprache für Webseiten allerdings nicht durchgesetzt, es spielt im Medienbereich nur noch als Austauschformat für unterschiedliche Systeme und Plattformen eine Rolle.

Die beiden Gremien, die sich um die Standardisierung des WWW kümmern, sind die WhatWG und das W3C. Wobei die Weiterentwicklung von HTML5 und CSS3 vor allem von der WhatWG, den großen Browserherstellern und der internationalen Entwicklergemeinde vorangetrieben wird.
Einen Überblick über die Neuerungen in HTML 5 und CSS 3 findest Du unter anderem auf http://www.w3schools.com/tags/default.asp oder http://www.mediaevent.de/css/css3.html.

Das solltest Du jetzt wissen:
Welche Gremien kümmern sich um die Weiterentwicklung von HTML und CSS?
Was ist der Unterschied zwischen dem WWW und dem Internet?
Nenne drei Dienste und Protokolle, die im Internet genutzt werden können

Neues zum Thema Bilder

Du solltest wissen, welche Dateiformate für Grafiken und Bilder in Webprojekten verwendet werden und deren Vorteile, Nachteile und Einsatzgebiete nennen können. Neben den bereits bekannten Dateiformaten wie JPEG, Gif oder PNG gibt es noch weitere, wie SVG, WebP oder das Canvas-Element. Aber auch eher selten in Websites eingesetzte Dateiformate wie Flash oder Java-Applets.

Du solltest wissen, wie Du Bilder im responsive Webdesign einsetzt und das Picture-Element oder Attribute wie srcset und sizes kennen.

Für CSS-Layouts ist der Einsatz von Hintergrundbildern eine häufig eingesetzte Technik. Dazu nutzt Du CSS-Eigenschaften wie background-image, background-repeat, background-attachment, background-position oder background-size. In CSS3 gibt es auch Angaben für background-origin oder Multiple Background Images.
Für kachelnde also sich wiederholende Hintergrundbilder solltest Du wissen, wie man eine nahtlose kachelbare Textur erstellt.

Imagemaps sind mehrere anklickbare Bereiche auf einem Bild. Sie lassen sich komfortabel über die Eigenschaftenpalette von Dreamweaver erstellen.

Im Zusammenhang mit JavaScript lassen sich viele schicke Effekte auf Bilder anwenden. Einen Bildwechsel per JavaScript kann man in Dreamweaver z.B. über die Verhaltenpalette erzeugen. Natürlich haben auch jQuery und vergleichbare Frameworks hier viel zu bieten.

Gif-Animationen sollten eher sparsam eingesetzt werden, aber wenn man sie nutzt, gibt es dafür in Photoshop gute Animationsmöglichkeiten.

Ein weiteres für Webdesigner interessantes Werkzeug in Photoshop ist das Slicewerkzeug. Damit teilst Du eine Photoshopdatei in mehrere einzelne Bilddateien auf, die dann einzeln exportiert werden können. Einige Agenturen arbeiten auch noch mit Adobe Fireworks, um ein Webseitenlayout zu erstellen und direkt in HTML umzusetzen. Mit welchem Werkzeug man arbeitet, ist letztendlich Geschmacksache.
Weitere Werkzeuge um Bilder für Webprojekte zu bearbeiten sind z.B. ImageOptim, Imagemagick oder RIOT.

Auch Favicons gehören zum Thema Bilder. Sie lassen sich z.B. mit http://www.favicon.cc oder http://www.xiconeditor.com erstellen.

Nachbau einer umfangreichen Website

Am Beispiel des weiteren Webauftritts lernst Du neue Techniken wie Neues von Hyperlinks; neue Selektoren in CSS3; weitere Lösungen für ausklappende Menüs oder das Einbinden von Webfonts und vieles mehr.

Schriften einbinden

Mit Hilfe von Webfonts sind wir bei Webseiten nicht auf die Systemschriften wie Arial und Times beschränkt. Um eine Schrift verwenden zu können, wird sie in der CSS-Datei eingebunden:

@font-face {
    font-family: Delicious;
    src: url('../fonts/Delicious-Roman.otf');
}

@font-face {
    font-family: Delicious;
    font-weight: bold;
    src: url('../fonts/Delicious-Bold.otf');
}


Anschließend läßt sich die Schrift in der HTML-Datei auf ein Element wie z.B. eine Überschrift anwenden:

h3 { font-family: Delicious, sans-serif; }

Einen großen Vorrat an Schriften findest Du zum Beispiel unter http://www.google.com/fonts.
Siehe auch http://www.elmastudio.de/typografie/schriften-mit-font-face-einbetten-so-funktionierts, http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp, http://caniuse.com/fontface und http://www.mediaevent.de/css/font-face.html.

Fortgeschrittene Techniken

Weitere neue Techniken bei dieser Aufgabe sind: Userinterface mit CSS3 und JavaScript aufwerten (Akkordeon und andere jQuery-PlugIns): Bilder in Webauftritten präsentieren: Lightbox, jAlbum & Co.; Frames und iFrames; Audio- und Video-Dateien in Webseiten integrieren (http://www.html5rocks.com/en/tutorials/video/basics). Mit Sprites die Ladezeiten von Hintergrundbildern in Webseiten optimieren. Du lernst das Multi-column-Layout (http://www.w3schools.com/css/css3_multiple_columns.asp) kennen  und das vertikale Zentrieren mit der display-Eigenschaft, wie im folgenden Code:
.zentriertesElement {display: table-cell;
            vertical-align: middle;
}.
Du arbeitest mit neuen Techniken, um Navigationen zu erstellen. Wie zum Beispiel ein animiertes Menü (http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu) oder mit andere jQuery angefettete Navigationen (http://www.1stwebdesigner.com/36-eye-catching-jquery-navigation-menus).

Das solltest Du jetzt wissen

Nach welchen Kriterien sucht man sich ein Webhostingangebot aus?
Was ist eine ImageMap?
Erläutere die Vor- und Nachteile der unterschiedlichen Bilddateiformate, die im Web verwendet werden
Wie werden eigene Fonts in Websites eingebunden?
Du solltest Formulare, Listen und Tabellen erstellen können
Du solltest eine clientseitige Formularvalidierung durchführen können
Und Du solltest eine Navigation mit einem Dropdown-Menü, also einer dynamisch ausklappender Unternavigation erstellen können

Apps

Falls für unsere Zwecke eine mobile Website nicht in Frage kommt und wir unseren Smartphonebenutzern eine App anbieten wollen, die aus dem Apple Store oder Google Play Store geladen werden soll (um zum Beispiel mit dem Verkauf Einnahmen zu erzielen), lässt sich eine normale Website auch in eine native App umwandeln. Hilfsmittel dafür sind z. B. Phonegap oder Titanium. Normalerweise wird eine native App mit Programmiersprachen wie Java oder Objective-C entwickelt. Bei Phonegap können wir allerdings mit den aus dem Webdesign bekannten Techniken wie HTML, CSS und JavaScript arbeiten. Eine einfache Lösung für das Erstellen einer App ist der Phonegap-Builder.

Webkonzeption

Anhand eines Realprojekts planen wir einen Webauftritt und behandeln Themen wie:

Marketingtechnische Vorüberlegungen zur Zielgruppe (Personaskonzept) und Wettbewerbsanalyse (Kompendium der Mediengestaltung - Band I - Konzeption und Gestaltung (5. Auflage); Seite 579 ff.).

Mögliche Inhalte von Websites über Texte und Bilder hinaus; Texten für das Web; Navigationsideen und Benutzerführung sowie Usability-Analyse siehe http://mediengestalter-mm-hamburg.de/Unterrichtsmaterialien/Web-Konzeption.php. Außerdem geht es um Barrierefreiheit und Suchmaschinenoptimierung.

Nach den marketingtechnischen und inhaltlichen Vorüberlegungen folgt die gestalterische Umsetzung: wir beschäftigen uns mit Kreativitätstechniken: Brainstorming und Mindmapping. Metaphern finden. Moodboards. Bildersprache und Farbwelten.

Zum Schluss kannst Du für den Kunden ein Design-Manual erstellen wie man es z.B. beim Auswärtigen Amt oder Becking-Kaffee sieht.

Fortgeschrittene Webprojekte

In einem weiteren Webprojekt lernst Du fortgeschrittene Techniken, wie das Modularisieren der Webseiten, den semantisch korrekten Einsatz von HTML5-Elementen oder neue Eigenschaften in CSS3 kennen.

Frameworks

Wozu das Rad immer wieder neu erfinden? Um sich die tägliche Arbeit zu erleichtern, lassen sich Frameworks wie Boilerplate, Bootstrap oder jQuery einsetzen. Beim Arbeiten mit diesen Framworks werfen wir nochmal einen Blick auf Lösungen wie Modernizr, Grid-Systeme oder CSS-Präprozessoren.

Qualitätssicherung und Fehlerbehebung

Bevor die Website an den Kunden ausgeliefert wird, muss sie einwandfrei funktionieren. Dazu erstellen wir Checklisten für das Testen von Websites und die Fehlersuche in HTML und CSS.

Checkliste Fehlersuche

Literaturhinweise

15 Fragen vor dem Website-Launch: https://www.drweb.de/checkliste-website-live-geht-77441/

Fehlerbehebung

Die meiste Zeit verbringt man bei der Qualitätssicherung üblicherweise mit der Fehlersuche in CSS-Dateien. Hier ist das Verständnis von Kaskadierung und Vererbung in Stylesheets hilfreich.
Leider können unterschiedliche Browser und ältere Browserversionen Probleme bereiten, wenn man neue Techniken in einer Website verwendet. Um herauszufinden, welcher Browser welche Fähigkeiten hat, ist die Website caniuse.com nützlich.
Gerade ältere Versionen des IE (Microsoft Internet Explorer) vor Version 9 machen dem Webdesigner das Leben mitunter schwer. Lösungen hier sind zum Beispiel:

Um eine Qualitätssicherung sinnvoll durchführen zu können, muss vor Beginn der Produktionsphase mit dem Kunden vertraglich geregelt oder zumindest abgesprochen sein, auf welchen Plattformen und Browsern die Website laufen soll.
Nun steht dem erfolgreichen Launch der Website nichts mehr im Weg :-)

Mit dem erworbenen Wissen zu den oben stehenden Themen auf dieser Seite bist Du in der Lage, anspruchsvolle und komplexe Webprojekte umzusetzen.
Ich wünsche Dir dabei viel Spaß und viel Erfolg!

Literaturhinweise und Links zum Thema Webproduktion

http://www.w3schools.com
http://caniuse.com

Kai Laborenz, CSS - Das umfassende Handbuch Galileo Computing
791 S., 2., aktualisierte und erweiterte Auflage 2013, geb., mit DVD und Referenzkarte
39,90 Euro, ISBN 978-3-8362-2313-3
Böhringer, Bühler, Schlaich, Kompendium der Mediengestaltung: Produktion und Technik für Digital- und Printmedien. Springer Verlag ISBN 978-3-642-20581-1

Autor: Stephan Franke · sfranke@mediengestalter-mm-hamburg.de · Version vom: 12.03.2021
Dieses Dokument ist unter der Creative Commons Lizenz BY-SA veröffentlicht.