======Fortbildung »Erfolgreiche Schulhomepage«======


===== Willkommen zur Fortbildung =====
Liebe Teilnehmer,

ich freue mich über Ihr Interesse an dieser Fortbildung. Auf dieser Seite finden Sie alle wichtigen Materialien und Links sowie einen Überblick über das Programm des heutigen Tages (einschließlich der Arbeitsaufträge für die Arbeitsphasen).

Ich hoffe, Sie können von der Fortbildung profitieren.

Freundliche Grüße,\\ 
Andreas Kalt

===== Umfrage zum verwendeten CMS =====
Bitte [[https://spreadsheets.google.com/spreadsheet/viewform?formkey=dEJRMHEzcDZZVXZ5eGlNWVFMZHJlMVE6MQ|füllen Sie diese Umfrage rasch aus]] , so dass wir einen guten Überblich über die verwendeten Systeme bekommen.

Einen Überblick möglicher Systeme finden Sie auf der Website http://php.opensourcecms.com/.

===== Schulwebsites der Teilnehmer =====
In zufälliger Reihenfolge. Diese Liste ist evtl. nicht vollständig.
  * [[http://www.ks-og.de|Kaufmännische Schulen Offenburg]]
  * [[http://www.schlossbergschule-kappelrodeck.de/cms/|Schlossbergschule Kappelrodeck]]
  * [[http://www.brandenkopf-schule.de/|Brandenkopf - Schule  Oberharmersbach]]
  * [[http://www.neuenburg.de/servlet/PB/menu/1300591_l1/index.html|Mathias-von-Neuenburg Realschule Neuenburg]]
  * [[http://www.wentz.fr.schule-bw.de/|Wentzinger-Gymnasium Freiburg]]
  * [[http://www.realschule-denzlingen.de/| Realschule Denzlingen]]
  * [[http://www.mws.fr.bw.schule.de/|Max-Weber-Schule Freiburg]]
  * [[http://waldbachschule2.de/|Waldbachschule Offenburg]]
  * Eichenwaldschule Legelshurst
  * [[http://www.fwg.fr.bw.schule.de/|FWG FREIBURG]]
  * [[http://vhs-freiburg.de/index.php?id=73|Abendrealschule der Volkshochschule Freiburg]]
  * Gewerbeschule Löffingen
  * [[http://www.klosterschulen-offenburg.de/|Klosterschulen Unserer Lieben Frau, Offenburg]]
  * [[http://www.bbzstegen.de/|Bildungs- und Beratungszentrum für Hörgeschädigte Stegen]]

===== Impulsvortrag: Benutzerfreundliches Webdesign =====

{{url>http://www.slideshare.net/slideshow/embed_code/976606?rel=0 595px,497px noscroll noborder}}

===== Arbeitsphase I: Analyse eines bestehenden Designs =====
In dieser ersten Arbeitsphase sollten Sie zu zwei arbeiten und ein bestehendes Design analysieren. Außerdem sollten Sie versuchen, anhand der vorgestellten Prinzipien konkrete Verbesserungsvorschläge zu erarbeiten.

==== Arbeitsauftrag 1 ====
  - Wählen Sie zwei Websites aus, die Sie analysieren möchten. – Idealerweise wären das die Schulwebsites Ihrer beiden Schulen. Sie können aber auch andere Schulwebsites auswählen, die Ihnen bekannt sind.
  -  Gehen Sie den Vortrag noch einmal durch und vergegenwärtigen Sie sich die angesprochenen Designbereiche.
  - Arbeiten Sie pro Website aus jedem der vorgestellten 4 Bereiche (Layout, Text & Typographie, Interaktion, Orientierung) je zwei Beispiele heraus, die verbessert werden könnten. (Notieren Sie darüber hinaus gerne auch Beispiele für die gelungene Umsetzung der Prinzipien). – Wir werden diese Beispiel anschließend im Plenum besprechen.
  - Notieren Sie sich ggf. die wichtigsten Punkte Ihrer Analyse sowie die Seiten(bereiche), die Sie bearbeitet haben, so dass wir uns bei der Diskussion die Elemente anschauen können.
  - Erabeiten Sie konkrete Vorschläge, wie eine verbesserte Version aussehen könnte. Das kann eine verbale Beschreibung sein oder auch eine Handskizze oder ein bearbeiteter Screenshot etc.

===== Plenum: Diskussion der erarbeiteten Vorschläge =====
Wir werden den Rest der Zeit bis zur Mittagspause eine Auswahl der von Ihnen erarbeiteten Vorschläge besprechen.

===== Mittagspause =====

===== Impulsvortrag: Technische Grundlagen =====

{{url>http://www.slideshare.net/slideshow/embed_code/976605?rel=0 595px,497px noscroll noborder}}

===== Arbeitsphase II: Webstandards umsetzen  =====
In dieser Arbeitsphase stehen Ihnen mehrere Möglichkeiten offen. Bearbeiten Sie **EINE** der genannten Optionen.

==== Option 1 ====
Probieren Sie die Grundlagen von XHTML im Zusammenspiel mit CSS aus indem Sie mit dem beigefügten Beispieldokument arbeiten.
  * [[http://download.andreas-kalt.de/css-test.html|HTML Beispieldokument]]  (öffnen Sie diese Datei in Ihrem HTML-Editor).
  * [[http://download.andreas-kalt.de/test.css|Zugehörige CSS Datei]]  (die CSS Datei ist noch nicht mit der HTML-Datei verknüpft, entfernen Sie die HTML-Kommentare um den entsprechenden Link im <head> der HTML-Datei.
  * Die [[http://reference.sitepoint.com/|Sitepoint Referenz]]  wird Ihnen dabei helfen, die einzelnen Elemente der beiden Sprachen zu verstehen.

==== Option 2 ====
Setzen Sie einige der technischen oder Designanregungen konkret in Ihrer Schulwebsite um.

==== Option 3 ====
Besprechen Sie konkrete Fragen mit den Teilnehmern und/oder dem Referenten.

==== Option 4 ====
Machen Sie sich Gedanken, wie Sie die Arbeit an der Website dokumentieren können, so dass das Wissen darüber auch an andere Personen weiter gegeben werden kann. Nützliche Tools dafür sind z.B.
  * [[http://www.screenr.com/|Screenr]]: Online Screencasts erstellen
  * [[http://www.wikispaces.com/content/for/teachers|Wikispaces]]: Sehr ausgereifte Wiki-Software, für Lehrer kostenlos gute Features, Bsp: [[http://kreisgymnasiumneuenburg.wikispaces.com/Startseite|KGN Wiki]]

===== Zu Hause weiterarbeiten =====
  * Die Beispieldateien sowie die Vorträge im PDF Format und als Quicktime Filme können Sie sich [[http://download.andreas-kalt.de/fortbildung-schulwebsite.zip|als zip-Datei herunterladen]].
  * Weiterführende Links zu allen angesprochenen Themen finden Sie in einer [[http://www.rete-mirabile.net/lernen/fortbildung-schulwebsite-einleitung| Beitragsserie auf meiner Website]]


===== Abschluss =====
/* 
{{url>http://spreadsheets.google.com/embeddedform?key=pl4QLCZelTtM0b6P1q-LoVQ 600px,1221px noscroll noborder}} */


{{tag>fuer-lehrer fortbildungen web gestalten reflexion}}