INSOR Handbuch Web Profawo 1. GRUNDLAGEN ...................................................................................................................................................... 2 2. ALLGEMEINE WEBSITE INHALTE BEARBEITEN ....................................................................................................... 5 3. DATEIABLAGE UND DOWNLOADLISTEN ............................................................................................................. 10 4. SPEZIFISCHE INHALTE PROFAWO WEBSEITE ....................................................................................................... 12 5. ADMINISTRATION DER GOOGLE MAPS .............................................................................................................. 18 6. STEUERUNG DES LAYOUTS ................................................................................................................................. 19 7. NEWSLETTER ...................................................................................................................................................... 21 8. MEHRSPRACHIGKEIT .......................................................................................................................................... 24 9. ANHANG A: SPEZIFIKATIONEN ........................................................................................................................... 26 10. ANHANG B: KONTAKTADRESSEN, SCHULUNGEN UND WORKSHOPS .................................................................. 27 INSOR AG Handbuch zu Ihrer Website 1. Grundlagen 1.1. Was ist ein Content Management System? Ein Content Management System (CMS) bedeutet auf Deutsch „Inhaltverwaltungssystem“. Damit ist eine Software gemeint, mit welcher Inhalte fürs Web erstellt, bearbeitet und entfernt werden können. Ein CMS hat verschiedene Benutzer: einen Administrator, Programmierer und Redaktoren. Letztere sind diejenigen, welche die Inhalte der Webseite pflegen. Dank einem CMS ist es möglich, eine Website ohne jegliche Programmierkenntnisse zu betreiben. Bis der Redaktor aber seine Website selber verwalten kann, braucht es etwas Vorbereitung: Ein Programmierer erstellt zuerst eine Seitenvorlage. Dies ist etwas Ähnliches wie eine PowerPoint Vorlage: Die Positionierung der Elemente, sowie Farben und Layout sind vorgegeben. Zum Beispiel ist in der Vorlage definiert, welches Logo verwendet und wo angezeigt werden soll. Der Redaktor kann sich an ein CMS anmelden, und hat so die Möglichkeit, über einen einfachen Editor die Texte für seine Website zu aktualisieren. Speichert der Redaktor die Texte, so finden sich diese sofort auch auf der Website. Ein Up- und Download von Web-Dateien ist damit nicht nötig. Der Editor gleicht einem kleinen Textverarbeitungsprogramm, ist aber weitaus weniger kompliziert. Viele hilfreiche Funktionen vereinfachen zudem die Verwaltung. So können Inhalte beispielsweise mit Startund Enddatum versehen werden, oder der gleiche Inhalt kann auf verschiedenen Seiten gebraucht werden ohne dass dieser mehrfach erfasst werden muss. Die Vorteile eines CMS liegen auf der Hand: Der Inhalt ist komplett vom Design getrennt, Designanpassungen sind damit einfacher Die einzelnen Seiten finden sich strukturiert in einem Seitenbaum Der Unterhalt der Seite ist einfach und bequem Inhalte können von mehreren Personen, unabhängig vom Standort, erstellt und bearbeitet werden Viele professionelle Erweiterungen können eingesetzt werden, welche sonst hohen Programmieraufwand bedeuten würden. Dies sind z.B. Mehrsprachigkeit, Bildergalerien, geschützte Bereiche, und so weiter. 1.2. Was ist TYPO3? TYPO3 ist ein frei erhältliches Open Source Content Management System, für das professionelle sowie einfache Verwalten von gesamten Internetseiten. TYPO3 wird dabei weltweit für kleinste bis sehr umfangreiche und internationale Webseiten eingesetzt. TYPO3 ermöglicht es Redaktoren, ihre Internetseiten selbstständig inhaltlich zu bearbeiten und zu erweitern. So können die Internetseiten mit dem Betrieb wachsen und bleiben aktuell. Nur eine aktuelle Internetseite mit interessanten Informationen für die Besucher kann auf Dauer erfolgreich sein und wird auch über die Suchmaschinen gefunden. TYPO3 bietet eine intuitiv bedienbare Benutzeroberfläche, über welche die Inhalte der Webseiten direkt aus dem Webbrowser heraus bearbeiten werden, ganz ohne sich um die Programmierung kümmern zu müssen. Es können schnell und einfach Seiten erstellt werden, in die dann Texte, Bilder und bei Bedarf auch Videos eingebunden werden können. Version 2.10 Seite 2 von 27 INSOR AG Handbuch zu Ihrer Website 1.3. Wie funktioniert TYPO3? Mit TYPO3 kann von jedem internetfähigen Computer oder Tablet auf die Webseiten Verwaltung zugegriffen werden, um Inhalte zu bearbeiten. Die Änderungen in der TYPO3 Verwaltung (auch Backend genannt) sind nach dem Speichern sofort auf dem Web sichtbar. Die Änderungen werden technisch gesprochen in einer Datenbank nachgeführt, und können auch wieder rückgängig gemacht werden. Ein Mechanismus sorgt im Hintergrund dafür, dass die richtigen Inhalte am richtigen Ort auf der Website erscheinen. 1.4. Anmelden und Abmelden als Redaktor Um Seiteninhalte in TYPO3 zu unterhalten, rufen Sie Ihre Webseite auf und hängen der URL einfach nur „/typo3“ an. Beispiel: www.insor.ch/typo3 Geben Sie Ihren Benutzername und Ihr Kennwort ein, und klicken Sie danach auf „anmelden“. Um sich abzumelden, klicken Sie rechts oben auf die Schaltfläche „Abmelden“ oder schliessen einfach den Browser. 1.5. Übersicht der TYPO3 Oberfläche Nachdem Sie sich angemeldet haben, sehen Sie auf der linken Seite den Seitenbaum, in welchem alle Ihre Seiten abgelegt sind. Der Seitenbaum entspricht dem Menü auf der Website. Wenn Sie eine Seite anklicken, können Sie diese auf der rechten Seite bearbeiten. Version 2.10 Seite 3 von 27 INSOR AG Handbuch zu Ihrer Website 1. Dies sind die Bereiche der Verwaltung. Normalerweise arbeitet man im Bereich „Seite“, dort können alle Inhalte bearbeitet werden. Im Papierkorb befinden sich gelöschte Inhalte, und in der Dateiliste befinden sich alle Dateien, welche man zum Download zur Verfügung stellen kann. 2. Der Seitenbaum enthält sämtliche Seiten der Website. Die Seiten sind hier in der Reihenfolge aufgelistet, wie sie im Menü auf der Webseite erscheinen sollen. Einige spezielle Seiten (wie die Kontaktseite oder das Extranet) sind allenfalls versteckt und werden im Menü nicht angezeigt. 3. Der Inhaltsbereich enthält die Spalte für den Hauptinhalt und die Spalte für die Infoboxen. Hier können beliebig viele Kästchen erstellt werden, welche dann auf der Website entsprechend erscheinen. Bei den Infoboxen kann unterschieden werden, ob die Box auf allen Seiten erscheinen soll, oder nur auf der aktuellen Seite. Version 2.10 Seite 4 von 27 INSOR AG Handbuch zu Ihrer Website 2. Allgemeine Website Inhalte bearbeiten 2.1. Seiten 2.1.1. Neue Seite erstellen Um eine neue Seite zu erstellen, bedient man sich des Kontextmenüs des Seitenbaums. Ein Klick mit der rechten Maustaste auf diejenige Seite, unter welcher eine neue Seite erstellt werden soll und das Menü erscheint. Der Eintrag „Seitenaktionen“ und darunter auf „Neu“ klicken, erstellt eine neue Seite. TYPO3 fragt sicherheitshalber nochmals nach, wo die Seite genau erstellt werden soll. Die exakte Position der Seite kann so nochmals angepasst werden. Es zeigt sich folgender Dialog: 1. Geben Sie einen Seitentitel ein. Dies ist die Beschriftung, die dann auch im Menü verwendet wird, und die beim Browser oben in der Titelleiste angezeigt wird. Wählen Sie hier einen kurzen und prägnanten Namen! 2. Speichern und schliessen Sie den Dialog. Sie sehen nun im Seitenbaum Ihre soeben neu erstellte Seite. TYPO3 hat diese vorerst mal auf „Versteckt“ gestellt, damit die Besucher auf der Website nicht sofort diese leere Seite sehen. So können Sie die Seite in aller Ruhe bearbeiten, und diese erst dann sichtbar machen, wenn Sie so weit damit fertig sind! Mit einem Rechtsklick im Seitenbaum, können Sie die Seite wieder sichtbar machen. 2.1.2. Bestehende Seite löschen Um eine Seite zu löschen, machen Sie einen Rechtsklick auf die entsprechende Seite im Baum, und klicken unter „Seitenaktionen“ auf „Seite löschen“: . Bestätigen Sie dann die Sicherheitsabfrage. Aus Sicherheitsgründen können Sie keine Seiten löschen, die noch Unterseiten haben. Wenn Sie wirklich einen ganzen Ast im Seitenbaum löschen möchten, so müssen Sie erst die Unterseiten löschen. Löschen Sie die Hauptseite erst, wenn es keine Unterseiten mehr hat. Version 2.10 Seite 5 von 27 INSOR AG Handbuch zu Ihrer Website 2.2. Inhalte 2.2.1. Neuer Inhalt erstellen Wählen Sie im Seitenbaum die Seite aus, auf welcher Sie einen weiteren Inhalt erstellen möchten. Fahren Sie mit der Maus über den Bereich „Hauptinhalt“, es zeigt sich zuoberst das Symbol an, mit welchem Sie einen neuen Inhalt hinzufügen können. Klicken Sie nun auf dieses Symbol, und es zeigt sich folgendes: Hier wählen Sie, ob Sie einen Inhalt mit reinem Text, einen Text mit Bilder, oder nur Bilder erstellen möchten. Wenn Sie sich nicht sicher sind, wählen Sie einfach „Text mit Bilder“ – die Bilder können im ersten Schritt auch weg gelassen werden. Sie befinden sich jetzt in der Erfassungs- und Bearbeitungsansicht der Inhalte. 1. Im Feld Überschrift können Sie einen Titel setzen, müssen dies aber nicht. Der Titel erscheint auf der Webseite automatisch in fetter Schrift. 2. Im Feld „Text“ können Sie den Inhalt eingeben. Der Editor erlaubt gewisse Formatierungen wie fett, kursiv, nummerierte Listen, und so weiter. 3. Nachdem Sie den Text fertig eingegeben haben, klicken Sie ganz oben auf „Speichern“, damit die Änderungen übernommen werden. 2.2.2. Inhalt bearbeiten Nachdem Sie im Seitenbaum die Seite angeklickt haben, klicken Sie einfach das Kästchen (Inhaltselement) auf der rechten Seite an, welches Sie bearbeiten möchten. Klicken Sie bei Textelementen direkt in den Text um den Text zu bearbeiten. Es öffnet sich direkt der Editor, der schon aus dem Schritt 2.2.1 bekannt ist. 2.2.3. Inhalt löschen Wenn Sie ein Inhaltselement löschen möchten, so fahren Sie mit der Maus über das entsprechende Kästchen, und klicken Sie dann rechts oben auf das Symbol für den Papierkorb. Das Inhaltselement wird damit in den Papierkorb verschoben, und ist damit auf der Website nicht mehr aufgeführt. Version 2.10 Seite 6 von 27 INSOR AG Handbuch zu Ihrer Website 2.3. Umgang mit dem Editor Der Texteditor ist einfach zu bedienen. Es wurde absichtlich auf viele Funktionen verzichtet, so dass die Webseite einen sauberen, einheitlichen Auftritt erhält. So ist es zum Beispiel nicht möglich, eine andere Schriftart oder –Farbe zu wählen. Sollte dies jedoch für Sie erforderlich sein, so können diese Funktionen durch uns freigeschalten werden – wir empfehlen es aber nicht! 2.3.1. Standard-Funktionen des Editors Die wichtigsten Funktionen sind (von links nach rechts in der ersten Zeile): 2.3.2. Blockformat: Überschrift 1-3 und normaler Absatz Fett Kursiv Nummerierte Liste Nicht nummerierte Liste (wie im Beispiel oben) Link einfügen (im Beispiel deaktiviert) Tabelle einfügen Alle Formatierungen entfernen (nützlich, wenn Texte aus Word übernommen werden!) Bearbeiten – Rückgängig Die zweite Zeile enthält Symbole, die nur für die Bearbeitung von Tabellen aktiviert werden Link einfügen Um einen Link auf eine andere Seite zu erstellen, oder um einen Download einzufügen, gehen Sie wie folgt vor: 1. Markieren Sie das Wort / die Worte, welche verlinkt (unterstrichen) werden sollen 2. Klicken Sie auf das Symbol um einen Link einzufügen: 3. Klicken Sie im Fensterchen den Seitenbaum auf, und wählen Sie die Seite aus, auf welche verlinkt werden soll (siehe Bild rechts) Version 2.10 Seite 7 von 27 INSOR AG Handbuch zu Ihrer Website 2.3.3. Download einfügen Dies funktioniert gleich wie wenn Sie einen Link einfügen möchten, aber Sie wählen im Fensterchen den Reiter „Datei“ aus (siehe rechts). Nun haben Sie die Möglichkeit, in der Dateiliste eine Datei auszuwählen, die Sie zuvor allenfalls bereits mal auf das TYPO3 hinaufgeladen haben. In dem Falle öffnen Sie beim Punkt 1 das entsprechende Verzeichnis und klicken die Datei an. Falls die Datei im TYPO3 noch nicht hinterlegt ist, so können Sie diese gleich hier in Ihre Dateiliste hochladen: 1. Wählen Sie bei Punkt 1 den Ordner, in welchen Sie die Datei hochladen möchten 2. Klicken Sie bei Punkt 2 auf die Schaltfläche „Dateien auswählen“, und wählen Sie die Datei von Ihrem Computer aus. 3. Klicken Sie auf „Hochladen“ und warten Sie, bis die Seite aktualisiert hat. Die Datei befinden sich nun in Ihrer Dateiliste, und Sie können diese beim Punkt 1 nun auswählen. Damit ist die Datei verlinkt! 2.3.4. Bilder einfügen Sie können Ihre Texte mit Bildern bestücken, um die Attraktivität des Artikels zu steigern. Dabei können die Bilder verschieden dargestellt werden, sogar auch von Text umflossen. Damit Sie Bilder einsetzen können, müssen Sie ein Inhaltselement vom Typ „Text mit Bild“ verwenden. Den Typ eines Inhaltselementes können Sie problemlos über das Feld „Typ“ ändern. Klicken Sie, während Sie im Bearbeiten-Modus eines Inhaltselementes sind, auf die Registerkarte „Bilder“, und klicken Sie auf Es öffnet sich das gleiche Fenster wie unter Punkt 2.3.3 beschrieben. Dort können Sie entweder Bilder hochladen, oder ein bestehendes Bild aus Ihrer Dateiliste auswählen. Nachdem Sie das Bild ausgewählt haben, wird dieses in der Registerkarte „Bilder“ angezeigt. Wiederholen Sie den Schritt für alle Bilder, die Sie im Artikel drin haben möchten (in der Regel fügt man aber pro Inhaltselement nur ein Bild hinzu). Danach wechseln Sie in die Registerkarte „Erscheinungsbild“. Dort können Sie nun wählen, wie das Bild ausgerichtet werden soll. Wählen Sie eine der Ausrichtungen über die entsprechenden Icons aus, und speichern Sie das Inhaltselement. Wenn Sie nun die Seite im Web anschauen, werden Sie sehen, dass das Bild Version 2.10 Seite 8 von 27 INSOR AG Handbuch zu Ihrer Website entsprechend erscheint und allenfalls vom Text umflossen wird. Sollte das Bild zu gross sein, können Sie die Grösse einschränken, indem Sie im Feld „Breite“ oder „Höhe“ die Pixelzahl eingeben. Zum Vergleich: Die volle Breite des Inhaltsbereichs beträgt ungefähr 450 Pixel. Wenn ein Bild also nur ein Drittel so breit sein soll, so sind 150 Pixel Breite zu wählen, und die Höhe leer zu lassen. Bilder können auch direkt über den Editor eingefügt und frei im Text mit der Maus platziert werden. Das schafft zwar viele Freiheiten, aber aus Layout technischer Sicht ist diese Vorgehensweise nicht empfehlenswert! Version 2.10 Seite 9 von 27 INSOR AG Handbuch zu Ihrer Website 3. Dateiablage und Downloadlisten Alle Dateien, welche Sie auf Ihrer Webseite zur Verfügung stellen, finden Sie im Modul „Dateiliste“. Dies ist Ihr Speicherplatz auf unserem Server, und die Dateien können Sie dort in Verzeichnissen ablegen. Diese Dateien sind für Ihre Besucher erst sichtbar, wenn Sie auf einer Seite eine solche Datei dann einfügen. 3.1. Die Dateiablage – Ihr persönlicher Speicherplatz Wenn Sie im linken Bereich auf klicken, wird Ihnen Ihr Speicherplatz angezeigt. Anstatt dem sonst üblichen Seitenbaum sehen Sie den Verzeichnisbaum; und auf der rechten Seite wird der Inhalt des angeklickten Verzeichnisses angezeigt. 1. Verzeichnisbaum der Dateiliste, mit allen Unterverzeichnissen 2. Inhalt des im Verzeichnisbaum angklickten Verzeichnisses. Über die Kästchen ganz unten in der Anzeige können weitere Symbole angezeigt werden wie im Beispiel („Erweiterte Ansicht“). Über diese Liste können Sie auch Dateien löschen oder umbenennen. Gleichzeitig sehen Sie in der letzten Spalte, an wie vielen Orten die Datei in Inhalten bereits verwendet wird. 3. Über die beiden Symbole ganz oben, können Dateien hochgeladen oder neue Unterverzeichnisse erstellt werden. 3.2. Erstellen einer Downloadliste mit Dateien Wenn Sie einzelne Dateien auf Ihrer Webseite in einer Liste anzeigen möchten, bietet sich die Downloadliste an. Dabei wählen Sie aus, welche Dateien in der Liste erscheinen sollen. Das Erstellen der Dateiauflistung ist einfach und funktioniert fast gleich wie das Einstellen von Bildern. 1. Erstellen Sie ein neuen Inhaltselement, und wählen Sie als Typ im Register „Spezielle Elemente“ den Eintrag „Dateilinks“: Version 2.10 Seite 10 von 27 INSOR AG Handbuch zu Ihrer Website 2. Klicken Sie nun auf „Datei hinzufügen“. Es öffnet sich ein Fenster, in welchem Sie die Datei suchen, oder ganz unten neue Dateien rauf laden können. 3. Wählen Sie nun die Dokumente aus, welche Sie in dieser Liste zur Verfügung stellen möchten – oder laden Sie hier gleich neue Dokumente rauf. Nachdem Sie alle Dokumente ausgewählt haben, klicken Sie auf „Auswahl importieren“ Danach werden diese Dokumente auf der Seite eingefügt, was ein paar Sekunden dauern kann. Danach können Sie den einzelnen Dokumenten noch einen Titel setzen, diese sortieren lassen oder auch von Hand umsortieren. 4. Optional: Wenn Sie möchten, können Sie bei Ihrem Inhaltselement „Dateilinks“ auch noch das Layout einstellen – zum Beispiel „Box Grün“ im Reiter Erscheinungsbild. Damit erscheinen dann die Downloads schön aufgelistet mit einem entsprechenden Icon (PDF, Excel, Word, usw.) Wir empfehlen sehr, dass Sie beim Hochladen von Dateien jeweils das Verzeichnis auswählen, wo die Datei hin geladen werden soll. So behalten Sie auch nach längerer Zeit die Übersicht und bleiben mit den Dateien organisiert. Version 2.10 Seite 11 von 27 INSOR AG Handbuch zu Ihrer Website 4. Spezifische Inhalte Profawo Webseite Jede Seite auf dem Profawo Web-Auftritt ist in der Grundstruktur mit einem Header Slider und einem Inhaltsbereich versehen. Dazu kommen der automatische Header mit dem Menü, und der immer gleich bleibende Footer mit Links und Suchfunktion. 4.1. Slider Jede Seite sollte einen Slider mit mindestens einem Bild enthalten. Um einen Slider einzufügen, wählen Sie im Register „Dynamic Content Elements“ den Inhaltstyp „Slider“. In der sich anzeigenden Maske können Sie nun beliebig viele Bilder hinzufügen. Sobald mehr als ein Bild eingefügt ist, zeigt die Webseite die entsprechenden Bedienelemente für das sliden nach links und nach rechts an. Die Beschriftung der Slides steuern Sie über die Felder „Titel“ und „Beschreibung“. Welche Seite beim Anklicken des Slides geöffnet werden soll, bestimmen Sie über das Feld „Link“. 4.2. Kacheln Die Kacheln dienen dem Anpreisen der Inhalte auf einer Übersichtsseite. Dabei bestehen die Kacheln in der Regel aus einem Bild, einem Stichwort und einem Text. Die Kacheln werden vom System möglichst optimal selbst angeordnet, wobei Sie die Reihenfolge der Kacheln weitgehend beeinflussen können. Damit dies funktioniert, müssen die Kacheln in einem KachelContainer liegen: 1. Den Kachel Container finden Sie im Register „Grid Elements“ als „Kachel Container“. 2. Erstellen Sie einen solchen, speichern Sie den Container und schliessen Sie ihn. 3. Zurück in der Übersicht, können Sie innerhalb des Kachelcontainers nun Kacheln hinzufügen. Das System weiss, dass im Container nur Kacheln zu liegen kommen dürfen, entsprechend werden Ihnen auch nur diese Elemente vorgeschlagen. 4. Wählen Sie nun das Inhaltselement „Kachel“ und machen Sie die entsprechenden Einstellungen gemäss Eingabemaske. Version 2.10 Seite 12 von 27 INSOR AG Handbuch zu Ihrer Website Wenn die Texte in einer Kachel zu lange sind, so werden diese zugunsten eines einheitlichen Layouts in der Kachel abgeschnitten. Wählen Sie in einem solchen Fall am besten eine etwas grössere Kachel. Die Webseite ist responsive aufgebaut. Prüfen Sie bei neuen Kacheln auf jeden Fall die Darstellung für mobile Geräte, indem Sie das Browserfenster schmal machen. 4.3. Artikelaufbau Um den Inhaltsbereich auf einer Unterseite zu gestalten, stehen Ihnen vielfältige Möglichkeiten zur Verfügung. Strukturelle Elemente zur Gestaltung finden Sie im Register „Grid Element“, während Sie Inhaltsobjekte selbst im Register „Dynamic Content Elements“ finden. Version 2.10 Seite 13 von 27 INSOR AG Handbuch zu Ihrer Website 4.3.1. Strukturelle Seitenelemente 4.3.1.1. Artikel Textblock mit Sidelinks Der Haupttext des Artikels befindet sich nur in der mittleren Spalte, rechts davon besteht die Möglichkeit zur Platzierung von Downloads oder Links. Dieses Inhaltselement verwenden Sie, um einen Artikel einzuleiten. 4.3.1.2. Inhaltsblock 4:2:2 Der Haupttext des Artikels befindet sich auf der linken Seite, daneben können kontextbezogene Informationen, oder auch Bilder angezeigt werden. Sie verwenden diesen Inhaltsblock, wenn Sie den Platz möglichst optimal verwenden möchten. 4.3.1.3. Artikel Textblock zweispaltig Dieses Inhaltselement verwenden Sie, wenn Sie zweispaltige Artikel schreiben, oder Inhalte gegenüber stellen möchten. Version 2.10 Seite 14 von 27 INSOR AG Handbuch zu Ihrer Website 4.3.1.4. Artikel Bilderblock Illustrationen in einem Artikel können Sie – abgesehen von den mehrspaltigen Inhaltstypen – sehr prominent mit diesem Inhaltselement anzeigen. Dabei verwenden Sie ein grosses, und zwei kleinere Bilder. Die Spalte ganz rechts ist für die Bildbeschreibung (Legende) vorgesehen. 4.3.1.5. Filter Im Filter-Container können Inhalte eingefügt werden, welche eine Kategorie tragen (jeweils im Register „Kategorie“). Mehr zu den Filtern findet sich im Kapitel 6.1. Version 2.10 Seite 15 von 27 INSOR AG Handbuch zu Ihrer Website 4.3.2. Inhaltsobjekte 4.3.2.1. Job / Inserat Dies verwenden Sie, um die Ausschreibungen auf den Unterseiten unter „Jobs“ zu erstellen. Dabei hinterlegen Sie Titel, Untertitel und den Text strukturiert in die dafür vorgesehene Maske. Klicken Sie in der Maske zuunterst die Checkbox „Merken-Funktion“ an, wenn das Inserat anklickbar und mit dem Formular auf derselben Seite verknüpft werden soll. Das Formular muss hierfür zwingend ein Feld mit dem Variablennamen “markreceptor“ eingerichtet haben. 4.3.2.2. News / Veranstaltung Dies verwenden Sie, um eine Veranstaltung, oder einen Newsblock zu erstellen. Dabei hinterlegen Sie Titel, Untertitel, den Text, das Datum und das Kachelbild. Alle Links, welche Sie im Textbereich definieren, werden als Buttons dargestellt. Damit können Sie einerseits Links auf interne oder externe Seiten erstellen, Links auf ein Anmeldeformular, ein PDF, usw. Im Register „Zugriff“ können Sie zudem ein Veröffentlichungsdatum und ein Deaktivierungsdatum hinterlegen. Das System kümmert sich dann automatisch um die Anzeige. 4.3.2.3. Person / Kontakt Mit diesem Inhaltselement erstellen Sie einen Kontakt mit Foto, Name, Funktion, Telefonnummer und E-Mail Adresse. Dies verwenden Sie auf den Kontaktübersichten der Unterseiten (neben der Google Karte), oder auch auf der Präsentation der Gesamtorganisation (dort vierspaltig). Version 2.10 Seite 16 von 27 INSOR AG Handbuch zu Ihrer Website 4.3.2.4. Zitat Aussagen von Personen, welche zur Auflockerung eines Artikels verwendet werden können. Dabei geben Sie das Zitat und den Autor an. Beim Hinterlegen des Bildes müssen Sie darauf achten, dass Sich der Kopf in der Mitte des Bildes befindet. Das System schneidet das Bild automatisch zu, und befindet sich der Kopf nicht in der Mitte, so wird dieser vom Zuschnitt abgeschnitten. 4.3.2.5. Kita Kachel Die Kita Kachel ist ein komplexes Konstrukt, welches eng mit der Google Map und dem Kita-Locator zusammenspielt. Die Erfassung jedoch ist relativ einfach. Sie geben in den entsprechenden Feldern den Kita Namen, den Text und den Link zur Unterseite an. Version 2.10 Seite 17 von 27 INSOR AG Handbuch zu Ihrer Website 5. Administration der Google Maps Damit die Google Maps die Marker richtig darstellen, müssen Adressen alle im TYPO3 erfasst und mit Koordinaten versehen werden. Die Koordinaten im Lat/Lon Dezimalformat kann man über diverse Webdienste errechnen lassen. Ein gut funktionierender Dienst findet sich unter http://mygeoposition.com/. 5.1. Adressen der Geschäftsstellen Die Adressdatensätze befinden sich im Ordner „Adressdatensätze“, in der Listenansicht. Die Adressen können zum Bearbeiten geöffnet, und die Koordinaten darin hinterlegt werden. Die Google Maps holen sich die Koordinaten und Adressen automatisch aus diesen Datensätzen. Kommen weitere Geschäftsstellen hinzu, so müssen die neuen Adressdatensätze mittels Typoscript mit den Karten verlinkt werden (durch einen Entwickler zu erledigen). 5.2. Adressen der Kitas Diese Adressdatensätze befinden sich auf der jeweiligen Kita-Unterseite. Für die Darstellung der Kitas auf der Google Map, durchsucht diese alle Kita Unterseiten nach Koordinaten und stellt diese dar. Kommen weitere Kitas hinzu, ist es ausreichend, eine bestehende Kita-Seite zu kopieren und den Adressdatensatz mit den Koordinaten anzupassen. Ab dann erscheint die Kita automatisch in der Google Map. 5.3. Limitationen Google Maps API 5.3.1. Kartendarstellung 25‘000 Kartenaufrufe pro Tag. Dies betrifft sämtliche Google Maps, welche auf der Webseite angezeigt werden. Wird diese Menge während 90 Tagen konstant überschritten, muss ein kostenpflichtiges Kontingent erworben werden. Die Preise von Google liegen bei 0.50 US-Dollar pro 1‘000 weitere Aufrufe. 5.3.2. Geocodierung 100‘000 Anfragen pro Tag 10 Anfragen pro Sekunde ratenbegrenzt Dies betrifft die Positionierung der Google Map beim Wechseln des Filters bei den Kitas, sowie die Umwandlung des im Suchfeld eingegebenen Standorts in Koordinaten. Version 2.10 Seite 18 von 27 INSOR AG Handbuch zu Ihrer Website 6. Steuerung des Layouts 6.1. Filter Wählt der Benutzer auf der Webseite einen Filter aus, so werden nur jene Elemente angezeigt, bei welchen die Kategorie der Inhaltselemente mit dem Filter übereinstimmen. Die Kategorie kann ein Benutzer über das Register „Kategorien“ in den jeweiligen Inhaltselementen einstellen. Zu beachten ist, dass bei jeder Kategorie ein Haken zu setzen ist, für welche das Element auch angezeigt werden soll. Damit ein Inhaltselement beim gewählten Filter „Alle“ auch angezeigt wird, muss das Inhaltselement die Kategorie „Alle“ ebenfalls angewählt haben. Ein Inhaltselement kann auch mehreren Kategorien gleichzeitig zugeordnet sein – es wird dann bei den entsprechenden Filterungen angezeigt. 6.1.1. Filteroption „Alle“ ein- oder ausblenden Mittels Checkbox kann gewählt werden, ob die Filteroption „Alle“ angezeigt werden soll, oder nicht. 6.1.2. Koppelung mit Formularen Ein spezielles Feature des Filtercontainer ist, dass es sich mit den Formularen verbinden kann. Beim Wechseln des Filters wird die Region in den Formularen dann vorbestückt. Diese Option kann pro Filtercontainer aktiviert oder deaktiviert werden. Hierzu muss das Formular zwingend ein Feld mit dem Variablennamen „region“ enthalten, auf welchen die Regionen numerisch hinterlegt sind. Formulare, die sogenannte Conditionals beinhalten, funktionieren mit der Koppelung nicht. Conditionals werden mittels AJAX abgearbeitet, womit der Filter beim Seitenaufbau das Formular noch nicht fernsteuern kann. 6.2. Layouts Bei allen Inhaltselementen in TYPO3 besteht die Möglichkeit, ein spezifisches Layout zu wählen. Die Layout-Einstellung befindet sich im Register „Erscheinungsbild“. Hierüber kann gesteuert werden, wie das Element sich im Gesamtlayout der Webseite verhalten soll. 6.2.1. Volle Breite, mit Hintergrund Das Inhaltselement nimmt mit einem violetten Hintergrund die volle Browserfenster Breite in Anspruch. Der Inhaltsbereich hingegen ist durch die definierte Inhaltsbreite limitiert. Dieses Layout wird in der Regel dann Version 2.10 Seite 19 von 27 INSOR AG Handbuch zu Ihrer Website verwendet, wenn auf einer Seite eine Abhebung der Inhalte erreicht werden soll. Typische Beispiele sind die Kontaktsektionen oder die Jobs-Inserate. 6.2.2. Abstand 12.5% links und rechts Dieses Layout nimmt zwar die Inhaltsbreite in Anspruch, zieht davon aber 1/8 auf der linken und rechten Seite ab. Somit stehen für den Inhalt nur noch 85% Breite zur Verfügung. Dieses Layout wird dann verwendet, wenn einspaltige, kurze Artikel zu breit wären, oder zum Beispiel um die Formulare in ihrer Breite zu limitieren. 6.2.3. Volle Breite Entspricht Punkt 6.2.1, aber ohne violetten Hintergrund. Typisches Beispiel hierfür ist der Filterbalken, welcher die ganze Breite in Anspruch nimmt (zum Beispiel unter Kids & Co). Version 2.10 Seite 20 von 27 INSOR AG Handbuch zu Ihrer Website 7. Newsletter Beim Newsletter handelt es sich um ein Zusatzmodul zu Ihrer Webseite. Wenn Sie im Seitenbaum keinen Newsletter sehen, so ist das Modul nicht aktiviert. Melden Sie sich bei uns, damit wir es aktivieren können! Mit dem Newsletter Modul versenden Sie Informationen an Personen, welche sich für den Newsletter angemeldet haben. Die Personen melden sich über Ihre Webseite an und ab. Sie können auch eine bestehende Adressliste importieren, wir helfen Ihnen dabei gerne. Der Newsletter Versand funktioniert so, dass Sie eine ganz normale Seite im Redaktionssystem erstellen, und für den Versand dann diese Seite und die Empfängerliste anwählen. Damit wird die entsprechende Seite an die Empfänger versendet. Das ist praktisch, denn so ist das Gestalten eines Newsletters sehr einfach, und Sie müssen keine neuen Programme hierfür kennen lernen. 7.1. Erstellen eines Newsletters Als Erstes erstellen Sie im speziellen Newsletter-Ordner, den Sie im Seitenbaum finden, eine neue Unterseite (siehe hierzu Kapitel 2.1.1). Sie können die Seite frei gestalten, wir empfehlen jedoch, beim Layout möglichst einfach zu bleiben. Viele E-Mail Programme stellen Layouts immer wieder anders dar, und es ist damit nicht sicher, ob aufwändige Layouts dann überall gleich gut aussehen werden. Übrigens: Wenn Sie den Newsletter erstellt haben, erscheint dieser auch auf Ihrer Webseite unter dem Menüpunkt „Newsletter“ als neue Seite. So können Ihre Besucher den Newsletter auch später noch lesen, selbst wenn sie sich nicht für den Newsletter angemeldet haben. 7.2. Versenden des Newsletters Hierfür klicken Sie als erstes den Bereich „Direct Mail“ an. Unter Punkt 2 werden Ihnen alle Newsletter Themen angezeigt, die Sie für den Versand verwenden können. In diesem Beispiel haben wir nur ein Newsletter Thema. Beim Punkt 3 sehen Sie alle Newsletter, die Sie schon erstellt haben. Wählen Sie hier Ihren Newsletter aus, indem Sie diesen anklicken. Version 2.10 Seite 21 von 27 INSOR AG Handbuch zu Ihrer Website 7.2.1. Schritt 2: Bearbeiten der Versandeinstellungen In diesem zweiten Schritt könnten Sie noch die Absender EMail Adresse anpassen. Im Normalfall müssen Sie hier nichts verstellen, und können direkt mit Klick auf „Weiter“ zum Schritt 3 weitergehen. Wenn der Hinweis „Der HTML-Inhalt enthält keine Newsletter-Bereiche“ angezeigt wird, müssen Sie diesen nicht beachten. Das System meldet lediglich, dass die ganze Seite versendet wird, und nicht nur ein Unterbereich davon. Sie können die Meldung also getrost ignorieren, da wir diese Funktion nicht brauchen werden. 7.2.2. Schritt 3: Testversand an eine E-Mail Adresse In diesem dritten Schritt geben Sie am besten Ihre eigene EMail Adresse an und klicken auf „Senden“. Sie erhalten nun per E-Mail eine Vorschau auf den Newsletter, und können ein letztes Mal alles nochmals überprüfen. Wenn Sie einen Fehler feststellen, können Sie diesen auf der entsprechenden Seite korrigieren, und die obigen Schritte nochmals durchführen. Wenn alles okay ist, dann klicken Sie auf weiter, um die Empfänger auszuwählen. 7.2.3. Schritt 4: Auswählen der Empfänger Bei diesem letzten Schritt wählen Sie die Empfängerliste aus (im Normalfall haben Sie nur eine). Wenn Sie möchten, können Sie auch einen bestimmten Versandzeitpunkt auswählen. Nun lösen Sie den Versand mit einem Klick auf „An alle Empfänger der Empfängerliste versenden“ aus. 7.3. Versandstatus und sofortiger Versand Möchten Sie wissen, ob Ihre Newsletter versendet worden ist, so können Sie den Status mit Klick auf den Bereich jederzeit einsehen. Sie sehen dort, wann ein Newsletter Versand startet, ob der Versand schon gestartet hat, und ob der Versand beendet ist. Sollte hier eine Meldung angezeigt werden, dass der Automatismus für den Versand nicht eingeschaltet ist (weil wir dies allenfalls für Sie so eingerichtet haben), so können Sie den Versand von Hand starten. Klicken Sie hierfür einfach auf „Versand anstossen“. 7.4. Empfängerlisten einsehen und bearbeiten Mit einem Klick auf den Bereich und danach auf den Newsletter Ordner, können Sie Ihre Empfänger verwalten und einsehen. Dort haben Sie die Möglichkeit, neue Empfänger zu erstellen, die Adressen zu Version 2.10 Seite 22 von 27 INSOR AG Handbuch zu Ihrer Website bearbeiten oder Adressen zu löschen. Beachten Sie beim erstellen neuer Empfänger-Adressen, immer die Checkbox „E-Mails im HTML Format emfpangen“ anzuklicken. Vorsicht beim Erstellen gänzlich neuer Empfängerlisten im Zusammenhang mit einer NewsletterAnmeldung auf der Webseite. Bei der Newsletter Anmeldung sind Anpassungen notwendig, damit die Anmeldungen dann in die richtige Liste rein gehen. Im Zweifelsfalle, kontaktieren Sie uns. Version 2.10 Seite 23 von 27 INSOR AG Handbuch zu Ihrer Website 8. Mehrsprachigkeit Das System erkennt die Sprache des Besuchers, und zeigt die Webseite dann in dieser Sprache an. Der Besucher kann aber auch über das Sprachmenü der Webseite zwischen den einzelnen Sprachen hin- und herwechseln. 8.1. Technisches Prinzip Ihre Web Präsenz hat eine Stammsprache, dies ist in der Regel Deutsch. Wenn Sie nun mit den einzelnen Seiten arbeiten, so sehen Sie normalerweise immer die deutsche Version davon. Möchten Sie nun eine Seite auch in einer zweiten Sprache zur Verfügung haben, so können Sie diese z.B. in einer neuen, französischen Version eröffnen, und dort mit den Übersetzungen der Inhaltselemente beginnen. Öffnet ein Besucher nun eine Seite, so wird das System die Inhalte zwar in der deutschen Sprache laden, aber dabei die französischen Versionen der jeweilig entsprechenden Inhaltselemente „darüberlegen“. Wenn also ein Inhaltselement noch nicht in eine andere Sprache übersetzt wurde, dann sieht man stattdessen die deutsche Version davon. Es ist wichtig, dieses Prinzip zu verstehen, um mit den Übersetzungen klar zu kommen. 8.2. Seiten in einer anderen Sprache anlegen Dieser Schritt ist recht einfach. Beim Anlegen einer neuen Sprachversion einer Seite können Sie dann zudem angeben, wie die Seite in der neuen Sprache heisst, und wie der Menüpunkt in der neuen Sprache lauten soll. Um mit den Sprachen zu arbeiten, empfehlen wir in den „Sprachen“Modus umzuschalten (siehe Bild rechts). Diesen Modus stellen Sie im Modul ein. Damit wird die Ansicht geändert: Einerseits können Sie nun neue Übersetzungen der Seite anlegen, andererseits sehen Sie die einzelnen Übersetzungen der Seite in den Spalten unterhalb (im Beispiel untern hervorgehoben ist Rot für Deutsch, Blau für Englisch und Grün für Französisch): Mit dem Bleistift Symbol können Sie nun die Seiteneigenschaften ändern – also den Titel, wie er in den Menüs auf der Webseite erscheint. Die einzelnen Inhaltselemente können Sie wie folgt nun bearbeiten. Version 2.10 Seite 24 von 27 INSOR AG Handbuch zu Ihrer Website 8.3. Erstellen von Inhaltselementen in anderen Sprachen Für die Erstellung der Übersetzungen empfehlen wir, wie folgt vorzugehen: 1. Öffnen Sie das zu übersetzende Inhaltselement in der Stammsprache (Deutsch), indem Sie es einfach anklicken. 2. Oben wählen Sie nun in der Auswahlbox die entsprechende Sprache aus. 3. Nun öffnet sich ein neuer Editor, und Sie können die Übersetzung vornehmen. Damit Sie wissen, was zu übersetzen ist, wird unterhalb der einzelnen Felder immer noch der deutsche Originaltext angezeigt. So müssen Sie nicht immer zwischen mehreren Fenstern hin und her wechseln. 8.4. Bearbeiten von übersetzten Inhaltselementen Sie können bestehende Inhaltselemente immer in allen Sprachen bearbeiten, indem Sie die Inhaltselemente wie gewohnt anklicken und bearbeiten. Doch das Anlegen muss immer über die Stammsprache mit der Sprachauswahl oben geschehen. Version 2.10 Seite 25 von 27 INSOR AG Handbuch zu Ihrer Website 9. Anhang A: Spezifikationen 9.1. Bildspezifikationen Alle Bilder sollten für eine gute Qualität den Qualitätsindex 80/100 oder höher verwenden. Bildelement Slider Kacheln, Veranstaltungen, Kita Personen / Zitatautor Artikelbild gross Artikelbild klein Spezifikation Minimalbreite: 960px Ideale Breite: 1600px Ideale Grösse: 500KB Minimalbreite: 720px Ideale Grösse: 200KB Minimalgrosse: 200px Gesicht zentriert (automatischer Zuschnitt) Alle Bilder einheitlich: - Horizontale Guideline bei Augen und Mund - Vertikale Guideline bei Nase Minimalbreite: 960px Minimalbreite: 360px 9.2. Piktogramme Als Piktogramme sind ausschliesslich PNG Dateien mit transparentem Hintergrund zu verwenden. Die PNG Dateien müssen mindestens 256px breit sein. Sämtliche PNG Dateien stehen in der Bild-Bibliothek zur Verfügung. Für die Hinterlegung eines Piktogramms im Menü, muss das Piktogramm im Template-Ordner img/menuicons mit der entsprechenden Seiten-ID abgelegt werden. 9.3. Farbcodes Ein zu verwendendes Bild kann für ein Optimum auf folgende Farbtöne abgestimmt werden. Diese Farben werden im Design der Webseite verwendet. Farbe Orange Violett Blau Violett hell Violett heller HEX-Code #EF861B #A10074 #0094C0 #D7AAD2 #EFD1E7 9.4. Schriftarten Reguläre Schrift: Aller-Regular Fettgedruckte Schrift: Aller-Bold 9.5. Google Sitemap Der XML Sitemap Stream wird über folgende URL abgerufen: http://www.profawo.ch/index.php?eID=dd_googlesitemap Version 2.10 Seite 26 von 27 INSOR AG Handbuch zu Ihrer Website 10. Anhang B: Kontaktadressen, Schulungen und Workshops 10.1. Kontaktadressen für allgemeine Fragen Per E-Mail auf [email protected], oder per Telefon auf 044 585 27 00 Unsere Büros sind in der Regel besetzt von Montag bis Freitag, 08:00-12:00 und 13:00-17:00. 10.2. Kontaktadresse für Support Für technische Anliegen bitte immer per E-Mail auf [email protected]. Ihre Anfrage beantwortet ein Techniker schnellstmöglich, aber immer innert maximal 2-3 Arbeitstagen. 10.3. Schulungen und Workshops Die nächsten Kurstermine finden Sie auf der Webseite von INSOR (www.insor.ch/seminare). Ab 3 Teilnehmer führen wir auch individuelle Schulungstermine. 10.3.1. TYPO3 für Redakteure Wir bieten 5-6 Mal im Jahr halbtägige regionale TYPO3-Schulungen für Redakteure an. Dabei kommen vor allem diese Unterlagen zum Zuge, und wir gehen auch weiterführende Themen an. Wir schaffen eine Umgebung, um Übungen auf einer Testwebseite zu machen, und es bleibt genügend Raum für Fragen und einem interessanten Austausch zwischen Teilnehmern und Kursleiter. 10.3.2. Themenbezogene Workshops Speziell für Redakteure aber auch für alle Interessierten, veranstalten wir von Zeit zu Zeit themenbezogene Workshops rund um die digitale Welt. Dabei geht es vor allem um Themen wie Datenschutz, Umgang mit Kinderfotos im Internet, den Einsatz von sozialen Medien, und weiteren. Version 2.10 Seite 27 von 27
© Copyright 2024 ExpyDoc
