Wahlpflichtkurs "Webdesign"

Im seit 2008 eingerichteten WPU-Kurs "Webdesign" - WPU steht für Wahl-Pflicht-Unterricht - erlernen Schülerinnen und Schüler der 10. Klasse unter der Leitung von Herrn Kabrhel Grundkenntnisse in der Programmierung von Internetseiten und der digitalen Grafikbearbeitung und erstellen anschließend Internetseiten für Odenwälder Unternehmen oder Institutionen. Ursprünglich fand der Kurs lediglich im zweiten Halbjahr der 10. Klasse statt. Aufgrund des Erfolges und der großen Nachfrage bezüglich der Webseitenerstellung für Unternehmen läuft der Kurs seit dem Schuljahr 2010/11 über ein komplettes Schuljahr.

WPU Webdesign - Kurs 2010

Diese zusätzlich zur Verfügung stehende Zeit gibt Lehrer und Schülern die Gelegenheit, die bisherigen Schwerpunkte tiefergehender zu behandeln und sich darüber hinaus mit weiteren möglichen Themen wie etwa Fotografie, Arbeit mit Content Management Systemen (CMS), Datenbanken oder auch Logodesign zu beschäftigen. Mehr dazu im folgenden Text.

Die Hauptinhalte des WPU-Kurses "Webdesign"

  1. (X)HTML-Programmierung
  2. Formatierung mittels CSS
  3. Fotografie
  4. Bild- und Grafikbearbeitung
  5. Erstellen von Webseiten für Odenwälder Unternehmen
  6. Anpassung von Webseiten an ein Content Management System (CMS)

 

1. (X)HTML-Programmierung

Im ersten Drittel des Kurses werden an praktischen Beispielen (einer kleinen eigenen Homepage) die Grundlagen der HTML- bzw. XHTML-Programmierung erlernt. Dies geschieht sowohl mit dem auf jeden PC installierten Editor als auch mit speziellen HTML-Editoren. Hier ein grober Überblick über die Inhalte:

  • Aufbau einer HTML-Datei WPU Webdesign 2010 - Schüler bei der Arbeit
  • Zeilenumbruch und Abschnittsumbruch
  • Schriftformatierung (fett, kursiv, unterstrichen, rechtsbündig, linksbündig, Blocksatz, Schriftgröße und -farbe, ...)
  • Aufzählungen und Nummerierungen
  • Tabellen
  • Hyperlinks
  • Grafiken einfügen
  • Gestaltung eines typischen Seitenaufbaus mit Navigationsbereich, Kopfzeit, Fußzeile, etc.
  • Mehrspaltenlayouts mittels Framesets und div-Containern (CSS-Frameworks)
  • usw.

Das hier erarbeitete Wissen schreiben die Schülerinnen und Schüler nicht in ein Heft, sondern in eine Word-Datei. Hierbei erlernen Sie quasi nebenbei auch noch den Umgang mit speziellen Funktionen von Microsoft Word. Außerdem können auch Interessen der Schüler aufgegriffen werden. Das Wissen aus dem Theorieteil wird in Lernkontrollen abgefragt.

2. Formatierung mittels CSS

WPU Webdesign 2010 - Schüler bei der ArbeitParallel zur HTML-Programmierung erarbeiten sich die Schülerinnen und Schüler auch die HTML-Ergänzungssprache CSS (Cascading Style Sheets), welche für moderne, suchmaschinenfreundliche Webseiten unerlässlich ist. Werden mit HTML die Inhalte einer Seite geschrieben, so geht es beim CSS um die Formatierung dieser Inhalte, d.h. um das Aussehen. Mit CSS werden beispielsweise die oben genannten Tabellen optisch ansprechend gestaltet. Der Bereich CSS des Theorieteils umfasst folgende Inhalte:

  • Inline-CSS
  • externe CSS-Stylesheets
  • Hintergrundfarben/-grafiken
  • Linien, Ränder
  • Abstände und Ausrichtung
  • Arbeit mit CSS-Klassen
  • Anpassung eines CSS-Frameworks (YAML von Dirk Jesse)
  • barrierefreies Programmieren

CSS ist ebenfalls Bestandteil der oben genannten Lernkontrollen.

3. Fotografie

Seit 2010/11 ist die Fotografie fester Bestandteil des Kurses. Digitalkamera oder Fotohandy besitzt heutzutage jede/r, das Wissen, wie man auch wirklich gute Fotos macht, nicht unbedingt. Hier geht es deshalb um das 1x1 des Fotografierens, speziell ...

  • die Arbeit mit Belichtungszeit, Blende, ISO-Empfindlichkeit und Belichtungsautomatiken
  • Aufnahmen mit und ohne Blitz
  • kreativen Bildaufbau
  • die Positionierung von Motiv, Hinter- und Vordergrund
  • den "goldenen Schnitt"
  • die Arbeit mit Schärfentiefe und Brennweite
  • Portrait-, Landschafts-, Gebäude und Produktfotografie
  • etc.

Dieses praktische Wissen um die Geheimnisse der Fotografie ist natürlich besonders nützlich, wenn es darum geht, für eine Homepage auch Fotos zu machen - etwa von den Angestellten des Betriebs, den Produkten, Arbeitsräumen, etc. Hier kommen dann natürlich unsere mit Spendengeldern erworbenen Spiegelreflexkameras samt diversen Objektiven (vom Ultraweitwinkel bis zum Telezoom) zum Einsatz.

Unmittelbar an die Fotografie schließt sich natürlich der folgende Punkt an, die digitale Bildbearbeitung.

4. Bild- und Grafikbearbeitung

WPU Webdesign 2009 - Schüler bei der GrafikbearbeitungAuf jeder guten Webseite finden sich natürlich auch Grafiken. Dies können Fotos sein, aber auch Buttons, Hintergründe, Verläufe, ein Logo, usw. Im WPU-Kurs "Webdesign" erlernen Schülerinnen und Schüler deshalb auch essentielle Grundlagen der Grafikbearbeitung. Gearbeitet wird mit dem Programm Adobe Photoshop Elements. Hierbei geht es vornehmlich um Folgendes:

  • Optimierung von Fotos
  • Veränderung von Helligkeit, Kontrast, Farbsättigung
  • Farbverläufe
  • Arbeit mit speziellen Pinselspitzen (Brushes)
  • Arbeit mit Ebenen und Ebenentransparenz
  • Zuschneiden von Grafiken
  • Skalieren von Grafiken
  • Optimierung von Portraits (rote Augen entfernen, Hautoptimierung, Faltenretusche, etc.)
  • Eigenschaften der gängigen Dateitypen (.jpg, .gif, .png, .bmp, .psd)
  • Erstellen von Layoutvorschlägen für Webseiten
  • usw.

5. Erstellen von Webseiten für Odenwälder Unternehmen/Institutionen

WPU Webdesign 2009 - Schüler bei der ArbeitAll das Wissen wird erst zu 'Wissenswertem', wenn es 'im richtigen Leben' gebraucht wird. Deswegen erstellen die Schülerinnen und Schüler des WPU-Kurses "Webdesign" nach ein paar Monaten der Einführung Webseiten für Odenwälder Unternehmen oder Institutionen. Das vorher gelernte theoretische Wissen wird jetzt benötigt und ganz praktisch angewendet.

Das Erstellen einer Webseite erfolgt in direkter und fortwährender Absprache mit dem 'Kunden' und umfasst grob die folgenden Arbeitsphasen:

  • Sichtung bereits vorhandener Materialien bzw. Vorgaben (z.B. Firmenlogo, Firmenfarben, Designs, ...)
  • evtl. auch Entwurf eines Firmenlogos
  • Zielgruppenanalyse (Für welche Zielgruppe soll die Webseite gestaltet werden?)
  • Fotos machen und digital nachbearbeiten
  • Vorschläge für die Gestaltung der Seiten sammeln
  • nach Rücksprache Weiterarbeit am Design
  • Programmierung der HTML-Dokumente
  • Auswahl eines geeigneten Providers (Webspace)
  • Buchung des Webspace
  • Upload der fertigen Seite
  • Suchmaschinenoptimierung und -registrierung
  • NEU seit 2013/14: responsives Webdesign mit Linearisierung des Layouts (Anpassung der Darstellung der Webseite an mobile Endgeräte wie Tablet-PCs oder Smartphones)
  • offizielle Übergabe einer Spende des Unternehmens an den Förderverein der Schule am Sportpark

6. Anpassung von Webseiten an ein Content Management System

Neu seit dem Kurs 2010/11 ist die Arbeit mit einem Content Management System, kurz CMS.

Content Management System, das hört sich ziemlich kompliziert an, ist es aber nicht. Ein CMS erlaubt es jemandem, eine Webseite auch ohne HTML-Kenntnisse zu pflegen. So ist es beispielsweise möglich, neue Unterseiten zu erstellen, Texte zu schreiben, Tabellen, Aufzählungen oder Bilder und Benutzeroberfläche von MODxGrafiken einzufügen, mit wenigen Klicks eine Dia-Show zu erstellen, etc. Dazu werden weder HTML-Kenntnisse noch auf dem PC zu installierende Programme benötigt. Es bedarf lediglich einer Internetverbindung - dann lässt sich eine Homepage von jedem beliebigen Computer auf der Welt pflegen.

Als Content Management System benutzen wir das kostenlose Open Source CMS MODX, mit welchem auch die Homepage der Schule am Sportpark von Lehrern und Schülern gepflegt wird. In Verbindung mit dem bekannten und bewährten CSS-Framework YAML sind wir so in der Lage, eine frei und individuell zu gestaltende Homepage zu erstellen, die darüber hinaus extrem barrierearm ist und in fast allen Browsern korrekt dargestellt wird.

Im Zuge der Arbeit mit einem CMS werden wir uns im Unterricht auch kurz mit den Themen PHP (serverseitige Skriptsprache) und MySQL (Datenbanken) auseinandersetzen.

Bisher erstellte Homepages

In der Menüleiste auf der linken Seite finden Sie eine Auflistung dessen, was die Schülerinnen und Schüler bisher geleistet haben. Hier gelangen Sie direkt zu den ...

Interesse?

Wollen Sie für Ihr Unternehmen, Ihre Institution, Ihren Verein von Schülerinnen und Schülern der Schule am Sportpark unter der Leitung eines Pädagogen eine Webseite erstellen lassen? Oder wollen Sie eine bereits bestehende Webseite überarbeiten oder an ein Content Management System anpassen lassen, um somit die Seite in Zukunft selbst pflegen zu können? Dann melden Sie sich einfach bei bei der Schule am Sportpark - siehe Kontakt - oder schreiben eine Email an webdesign@schule-am-sportpark.de.

Dieses Dokument wurde erstellt am 30.11.07 durch Christoph Kabrhel.
Die letzte Bearbeitung erfolgte am 16.08.13 durch Christoph Kabrhel.