Projekt: Neue Homepage

Aus Wikifinum
Wechseln zu: Navigation, Suche

Unsere Homepage der Schule, die anlässlich des 425. Schuljubiläums 2007 entstand, war - technisch und inhaltlich - veraltet. Deshalb wurde im März 2014 ein Arbeitskreis "Neue Homepage" ins Leben gerufen, in dem sich Lehrer, Eltern und Schüler engagieren. Zur Begrifflichkeit: Als Homepage bezeichnet man im engeren Sinn die Startseite einer Präsenz im Internet. Mit Website bezeichnet man einen breit gefächerten Auftritt (Inhalte, Aktivitäten, Anbindung an weitere Module) im Netz.

Die neue Homepage http://adolfinum.de ging am 23. Februar 2015 online!

Inhaltsverzeichnis

Arbeitskreis "Neue Homepage"

Lehrer

  • Herr van Stephoudt (Schulleitung, Technikgruppe)
  • Herr Lind (Koordinator Neue Medien, Technikgruppe)
  • Herr Nolte (Webmaster, Technikgruppe)
  • Herr Kozianka (Homepage "Aktuelles", Technikgruppe)
  • Herr Heisig (Co-Webmaster, Technikgruppe)
  • Herr Herrmann (Technikgruppe)

"Paten" für Homepage-Inhalte

  • Herr Dr. Dinkelmann (Kunst, Bilder?)
  • Herr Schattenberg (Sport)
  • Herr Herrmann (MINT, Medienkonzept)
  • Herr Schubert (MINT, SV)
  • Herr Klag (Oberstufe)

Eltern

  • Frau Manzke (Förderverein)
  • Frau Minhorst (Förderverein)
  • Herr Dawel (Förderverein, ab 08/2015)
  • Frau Mehlan (Elternverein)
  • Frau Klaassen (Elternverein)

Schüler

  • Philipp Richter (SV; Q1)
  • Leah Wilmsen (SV; Q2)
  • Jana Filtmann (Q2)
  • Philip Oberberg (SV; Q1)


Contao Anwender- und Administratoren-Schulung

Folien zur Contao-Schulung am 20.11.2014

1. Schulung am 20.11.2014

  • Zeit: 16-18 Uhr für die Redakteure und zusätzlich 18-20 Uhr für die Administratoren (Herr Heisig und Herr Nolte),
  • Raum: Altbau, Computerraum I/18

Anwenderschulung

  • Überblick im Backend - Wo finde ich was
  • Erstellen und Verwalten von Artikeln
  • Einpflegen und Verwalten von News (Aktuelles)
  • Editieren von Texten und Bildern
  • Einfügen von Links
  • Behandlung der unterschiedlichen Inhaltstypen
  • Dateiverwaltung: Dokument- und Bildverwaltung
  • (Erläuterung der Funktionsweise von Modulen)

Adminschulung

  • Erläuterung des grundsätzlichen technischen Aufbaus
  • Benutzer- und Benutzergruppenverwaltung
  • Seitenstruktur
  • Erläuterung der verwendeten Module
  • Arbeit mit Modulen, Formularen und Events

Arbeitskreis Sitzungen

Sitzung vom 22.10.2014

Für ein kollaboriertes Arbeiten an einem gemeinsamen Dokument wurde bei ZUM.DE ein Etherpad eingerichtet. Dort können Schritte zur weiteren Arbeit eingestellt und bearbeitet werden.

Ergebnisprotokoll:

  • Herr Nolte und Herr Heisig werden die neue Homepage - in Kontakt mit dem Webdesigner - administrieren.
  • Das erste Redakteur-Team soll neben den Administratoren bestehen aus: Herrn T. Kozianka ("Aktuelles"); Herrn Schubert (MINT); Frau Schüttauf (Schulprogramm / QA); Herrn Dr. Dinkelmann (Kunst); Frau Klaassen (Elternverein); Frau Manzke / Frau Minhorst (Förderverein)
  • Später können weitere Redakteure eingewiesen werden.
  • Die 1. Redakteur- / Admin-Schulung soll am Donnerstag, 20.11.2014, 16:00 - 18:00 Uhr bzw. 18:00 - 20:00 Uhr stattfinden.
  • Für die Bilder auf der Hauptebene und den Oberkategorien (Inversalien) sollen repräsentative Bilder angefertigt werden (Dr. Dinkelmann / Fotograf). Die Option langsam durchlaufender Bilder auf der Startseite prüfen!
  • Auf der nächsten Lehrerkonferenz (18.11.2014) soll ein Votum bzgl. Lehrer- / Fachschaftsbildern und Veröffentlichung der dienstl. E-Mail Adresse auf der neuen Homepage eingeholt werden.
  • Aktuelle Beiträge der Fachschaften sollen unter "Aktuelles" und in Kopie in der jeweiligen Fachschaft veröffentlicht werden. Verfallsdatum einstellen!
  • Die Fachschaften stellen jeweils in ihrer Rubrik ihr Fach vor (vgl. Schulprogramm / QA) und veröffentlichen dort auch ihr schulinternes Curriculum als PDF-Datei. Hinweise zu den Kernlehrplänen und zum Zentralabitur NRW als Weblink.
  • Die Gliederung der neuen Homepage wird nochmals auf Benutzerfreundlichkeit hin überprüft.
  • Die Standards für die Artikelgestaltung (Teaser / Artikeltext / Bildgröße / Typografie / Dateibenennung) werden im Contao-Backend in der FAQ definiert (Vorlage T. Kozianka).

Sitzung vom 25.06.2014

Tagesordnung:

  • Umsetzungen unserer Vorschläge prüfen
2. Version der Testseite Neue Homepage
  • Weitere Detailplanungen
  • Konkrete Wünsche für Schulfoto-Motive an Jana Filtmann
  • Zuständigkeiten für die Rubriken (siehe PDF-Dokument von Herrn Lind)

Ergebnisprotokoll:

  • Der verschwommene Bereich des Altbaus rechts von den Leistungslogos sollte reduziert werden. Können die Leistungslogos nicht weiter verkleinert werden? Aufteilung: Leistungslogos (ganz links) und Altbau-Bild (restlicher Bereich)?
  • Im blauen Band sollten die Begriffe "Gymnasium" und "Adolfinum" noch um 1-2 Schriftgrade verkleinert werden.
  • Kann man den Suchbereich in das blaue Band integrieren? - Der Suchbereich sollte hervorgehoben werden (Lupensymbol?).
  • Kann die oberste Zeile auch beim Aufruf von Untermenüs permanent erscheinen?
  • Kann man im Terminbereich A+B Wochen einblenden (A = gerade, B = ungerade Kalenderwochen)?
  • Die derzeitige AD-Website soll in http://www.archiv.adolfinum.de hinterlegt werden.

Sitzung vom 04.06.2014

Tagesordnung:

  • Testseite prüfen und Ergänzungen / Wünsche festhalten (am besten auch hier im Wiki!)
  1. Datei:Entwurf Neue Homepage Adolfinum.doc Entwurf Nolte
  2. Datei:AD Homepage Testseite 01 Manzke.docx Entwurf Manzke
  • Design der Neuen Homepage: Positivbeispiele im Internet suchen / dokumentieren (s.o)
  1. Edles Design: Contao Premium Theme "Quantum"
  • Corporate Identity: Schullogo, Homepage, Broschüren, Briefpapier, ...
  • Schnittstellen: Terminplan (ggfls. mit Logineo?), Mensaplan, Logineo, Moodle, WikiFinum
  • Interner Bereich: Vertretungsplan, Dokumente (ggfls. mit Logineo oder Moodle?), ... (Herr van Stephoudt / Herr Lind)

Ergebnisprotokoll

  • Die Auszeichnungslogos links im Titelbild verkleinern und etwas transparenter gestalten
  • Den oberen blauen Bereich der Hauptmenüpunkte in der Höhe stauchen (Platzverschwendung)
  • Den Suchbereich von ganz unten nach ganz oben rechts verlegen und den Bereich links davon für Kontaktangabe Adresse, Telefon, Fax, E-Mail nutzen (vgl. Premium-Contao-Theme "Quantum")
  • Alternativ: Kontaktinfos alle gesammelt unten anordnen, zusammen mit Facebook, Google+, Twitter (Farbe der Logos etwas kräftiger blau)
  • Login für Logineo, Moodle, Wikifinum mit Logos in die rechte Spalte ganz oben unter dem Hauptmenü anordnen
  • Termine in der rechten Spalte direkt unterhalb des Login-Bereichs, Mensaplan weiter unten anordnen
  • Die grünlich-blaue Farbe ersetzen durch taubenblau (Hintergrundfarbe); besonders den Fußbereich schlichter gestalten; Adolfinum-Logo weiß, statt schwarz!
  • Bewegtes Fotodesign? --> Jana Filtmann kümmert sich um repräsentative Schulbilder
  • Menüpunkt abhängige, aussagekräftige Bilder? Nur für Hauptmenüpunkte, damit es nicht zu unruhig wirkt?
  • Newsletter / RSS-Feed automatisch aus der Rubrik "Aktuelles" generieren
  • Neues Adolfinum-Logo? Wettbewerb
  • weitere Ergebnisse der Sitzung bitte hier eintragen!

Inhalte für die neue Website

Hier befindet sich die für den AK Neue Homepage überarbeitete Vorlage der erweiterten Schulleitungsrunde (Autor: Herr Lind, Stand: 25.06.2014):

Inhaltsübersicht zur neuen Homepage
(als PDF-Datei)

Erste Testseite, Version 0.2

Für einen ersten Testklick wurde folgende Seite angelegt:

Diese Seite wurde mit dem Content Management System (CMS) Contao erstellt. Bitte mit verschiedenen digitalen Endgeräten mit verschiedenen Auflösungen testen und Rückmeldungen geben an: webmaster@adolfinum.de

Versionshistorie der Homepage des Gymnasium Adolfinum

Die alten Versionen sind als Archiv unter folgenden Subdomains abrufbar:

Technische Anforderungen für die Neue Homepage

Die neue Website sollte ...

  • barrierefrei sein (gesetzliche Vorschrift in NRW für Websites öffentlicher Einrichtungen)
  • von den Bildschirmauflösungen für verschiedene digitale Endgeräte angepasst sein (herkömmlicher Desktop, Tablet, iPad, Smartphone, iPhone).
  • Termine als Excel-Datei verarbeiten und als Kalender verfügbar machen können (Einzeltermine per Klick in Kalender digitaler Endgeräte übertragen (iCal)).
  • ein Einloggen in Logineo, Moodle und WikiFinum ermöglichen.
  • eine Verlinkung jedes einzelnen Artikels vorsehen.
  • eine Navigationszeile (Krümmelpfad) beinhalten.
  • eine Anbindung an soziale Netzwerke (Facebook, Google+, Twitter) erhalten, um durch Teilen und Vernetzen von Inhalten Breitenwirkung zu erreichen.
  • dreispaltig: links Auszeichnungen/Buttons Moodle, Logineo, WikiFinum (schmal), Mitte Aktuelles (breiter), rechts Termine / Speiseplan
    • Herr Martin Kozianka (Webdesign-Unternehmen) plädiert für zweispaltiges Design, da die Homepage dann insbesondere auf kleineren Displays (Tablets, Smartphones) besser lesbar sei.
  • Interner Bereich (Stundenplan, schulinterne Formulare, Krankmeldung online, Gesprächswünsche)

Weitere Wünsche

  • Ansicht der Homepage an das Endgerät anpassen (Tablet, Phone, PC)
  • ...

Umsetzung Neue Homepage / Website

Arbeitskreissitzungen: Siehe oben!

Design der bisherigen Website (2007-2014)

Ad banner.jpg Erklärungen zum Banner und zur Farbgebung der Website

Positive Beispiele von Schulwebsites

Der erweiterten Schulleitungsrunde gefiel z.B. die preisgekrönte Schulwebsite des Konrad-Adenauer-Gymnasium in Langenfeld, die mit neuster Menüklapptechnik ausgestattet ist, sofern man einen aktuellen Browser verwendet (mind. Internet Explorer 8Wikipedia-logo-v2.svg; Firefox 10Wikipedia-logo-v2.svg; Android 4.xWikipedia-logo-v2.svg; Apple iOS 5Wikipedia-logo-v2.svg):

Beispiele für eine mit WordpressWikipedia-logo-v2.svg erstellte Schul-Website. Den Wechselbild-Bereich der Website vom Kurt-Körber-Gymnasium in Hamburg kann man auch ruhiger gestalten. Die Website des Freiherr-vom-Stein Gymnasium in Frankfurt zeigt Verknüpfungen mit Untis 2014 (Vertretungsplan) und einem Terminplan-Modul von WordPress (Termine sind abonnier- / exportierbar). WordPress zeichnet sich als "Blog" durch eine gute Archivierung aus:

Contao

Herr Lind macht auf fertige Contao-Designs (Themes / Templates) aufmerksam, die man für max. 199 EUR + 20% MWSt (Österreich) erwerben und umgestalten / anpassen kann: "Das Quantum-Design ist für alle Varianten vorkonfiguriert (Tablet, Desktop, Handy,..) besitzt CSS-Merkmale, eine Palette von Plugins (Formulare, Downloadmanager, Anbindung an Social-Network, ...)."

Herr Martin Kozianka (Webdesign-Unternehmen) machte die Technikgruppe darauf aufmerksam, dass solche Templates kompliziert sein können in der technischen Handhabung (Backend für Admin / Redakteure). Contao bringe bereits zahlreiche Tools als Software mit. Alles weitere könne er nach unseren Wünschen selbst anpassen.

  • Literatur zum CMS Contao:
    • Contao-Videotraining Gesprochen von Harry Boldt
    • Peter Müller: Websites erstellen mit Contao, ISBN: 978-3836220101
    • Leo Feyer: Das offizielle Contao-Handbuch, ISBN: 978-3827330147
    • Nina Gerling: Contao für Redakteure, ISBN: 978-3827328939

Software

Die aktuelle Website (2007-2014) arbeitet mit dem Content Management System (CMS) "ConPresso" und wurde seinerzeit in der Internet-AG mit PHP SkriptspracheWikipedia-logo-v2.svg kundigen Schülern erarbeitet. Die verwendeten TemplatesWikipedia-logo-v2.svg enthalten Programmiermängel (u.a. teilweise uneinheitliches Schriftbild; defekter "Krümmelpfad" zur Orientierung).

Die optische Gestaltung (z.B. Menüführung) wäre über technisch veränderte Templates (PHP-Skript Programmierung) möglich. Das würde aber nicht das unzureichende Dateimanagement (z.B. Bilder, PDF-, Word-Dateien) in ConPresso lösen.

Mögliche CMS-Software Alternativen

Die nachfolgenden Wikipedia-Artikel geben jeweils Auskunft über die Eigenschaften und die Versionsentwicklung der aufgeführten CMS-Software Alternativen. Teilweise werden auch die Schwächen der Software benannt und vermerkt, ob eine größere Entwicklergemeinschaft bzw. Help-Community dahinter steht (nicht unwichtig für Updates und Wartung!). Zudem enthalten sie weiterführende Weblinks und Literaturhinweise (ob z.B. Handbücher vorhanden sind).




Die technische Einrichtung einer neuen Website muss durch ein Unternehmen bzw. einen Fachmann für Webdesign erfolgen:

  • Content Management System aufsetzen (Provider Webspace)
  • PHP-Skripte entwickeln (globales Design)
  • Templates programmieren (Artikel Design)
  • Plugins (Tools / Anbindungen)