Webauftritt FHNW WebCMS-Basiskurs vom 2. Juli 2015.

Webauftritt FHNWWebCMS-Basiskurs vom 2. Juli 2015

FHNW Basiskurs Web-CMS

• Organisation Web FHNW 3• FHNW & Webdienste 4-5• Plone WebCMS

• Was ist ein CMS? 6-7• Ordner (Teil 1)

– Funktionsweise 8-9

– Übung 10

• Seiten (Teil1)– Erstellen und Umbenennen 11-13

– Titel und Zusammenfassung 14-15

– Webeditor

– Schaltflächen

16

– Bilder einbinden

17-18

– Links zu Seiten und Dateien

19-23

• Linkartikel 24-26

FHNW CMS-BasiskursInhaltsverzeichnis

• Seiten (Teil 2)– Webeditor 27

– Tabelle 28-29

– Editor vergrössern 30

– Einstellungen 31

– Suchmaschinenoptimierung 32

– Historie 33

– Arbeitskopie 34-36

• Ordner (Teil 2)– Übersicht 37-38

– Startseite 39

– Ordnerbefehle 40

– Dateien hochladen 41

– Navigation sortieren 42-43

– Status 44

• Ressource: help.fhnw.ch 45

2


WebLeitung FHNW

• Kommunikation FHNW Thomas Langholz

Raphael Küttel• Web-Technik Tom Schneider

Kommunikation Hochschulen:• HSA Christina

Beglinger• PH Christian Irgl• HSW Richard Pöllinger

Ansprechpartner Direktion• Leiterin Stab FHNW Karin Hiltwein • Vizepräsident FHNW R. Weisskopf

& Leiter Services

Organisation Web FHNWWeb-Team und Webleitung

3


FHNW & WebdiensteElemente des FHNW-Auftritts

6 Portlets /

Webkom

ponente1

Por

tlet

4


Auch FHNW: Die Webdienste Für Projekte, Kooperationen und Sonderthemen

FHNW & WebdiensteDie Webdienste-Sites

5


Plone WebCMSWas ist ein WebCMS? Der Server

fe0878a8c4346be89748de19b6a19814

72880af05eed5824fb46d5664f3e1346

1f0d36dcb58a1423be1b8ff454332e96

46b3f291a609316480f1573333e1bf46

6da29cb256825f1671e5e46b59e01c42

alle Artikel (Ordner, Seiten, Bilder, PDF usw.)

Bild

PDF

Seite

Ordner

Formular

Plone-ID

6


Persönliches Menü

Pfadnavigation

ArtikelmenüNavigation(max 5 Ebene)

Fusszeile

Ordnerinhalt

Was ist was im CMS?

Ordnerbefehle

English

7


StartseiteDienstleistungen

Auftrag

Zuständigkeiten

Angebot

Ausbildungen

Forschung

Berichte

Nav

igat

ion

Ordner (Teil 1)Funktionsweise

8

Website

Startseite

Dienstleistungen

Auftrag Zuständigkeiten

Angebot

Ausbildungen Berichte

Forschung

Kontakt

Ortspläne

Kontakt

Ortspläne

Seminare

Seminare

Publikationen

Publikationen

Team

Leitung

Team

Leitung

Über uns

Über uns

Ebene 1

Ebene 2


Funktionsweise: Ordner in der URL

Uniform Resource Locator (Webadresse)Eine URL identifiziert und lokalisiert eine Ressource wie z. B. eine Webseite.

http://www.fhnw.ch/sozialearbeit/bachelor-und-master/bachelorstudium/studienformen

Domain Ordner Ordner OrdnerOrdner, Seite,

Formular, Datei, Bild usw.

Ordner (Teil 1)

«URL-ID», «Kurzname»

9


Plone WebCMSWissenswertes: Status eines Artikels

Der Status eines Artikels im FHNW-Webauftritt• privat = nicht veröffentlicht (nur für berechtigte RedaktorInnen)• Published Web = veröffentlicht

• Neue Artikel (Seiten und Ordner) werden immer «privat» erstellt.• Artikelkopien werden ebenfalls «privat» erstellt

10

Þ zur obersten Ebene im Ihrem Aufgabenbereich gehen Þ Ordner erstellen: «Schulung-[deine Initialen]»Þ in diesem Ordner nochmals einen Ordner erstellenÞ Übungsdateien herunterladen:

https://help.fhnw.ch/fhnw/2013/basiskurs-cms-fhnw#dateien

Erste Übung





Seite erstellen mit dem Titel:

«Testseite Nummer Eins für die WebCMS-Schulung»

Seiten (Teil 1)

11

Seite erstellen


Seite umbenennen : Zwei VariantenSeiten (Teil 1)

12


Seiten (Teil 1)Umbenennen : Was das bewirkt

13

URL umbenennen nur mit:• Kleinbuchstaben• Unterstriche• Bindestrich

und ohne:• Sonderzeichen (öäü)• Leerschläge


Seiten (Teil 1)

14

Titel und Zusammenfassung


Seiten (Teil 1)

15

Titel und Zusammenfassung


Seiten (Teil 1)Webeditor: Schaltflächen

Die wichtigsten Funktionen

1. Schnellspeicherung (nur Editors Inhalt)2. Textformat neutralisieren3. Überschriften4. Bild einfügen5. Link erstellen/löschen

16

auch bekannt als:• Wysiwyg-Editor (what you see is what you get)• Visual Editor• TinyMCE (Plone-Produkt Name)


Seiten (Teil 1)Webeditor: Bilder einbinden

17


Seiten (Teil 1)Webeditor: Bilder einbinden

Pfadnavigation

Bild vom PC hochladen

18

Bildgrösse (in Pixel) wählen


Seiten (Teil 1)Webeditor: Link zu Seiten und DateienInterner Link

Linktext mit der Maus markieren:

Interner Link:1. Zielseite suchen2. Linktitel eingeben3. Fenster-Option auswählen

19


Seiten (Teil 1)Webeditor: Link zu Seiten und Dateien

Aus dem Linkbrowser eine Datei hochladen

20



Aus dem Linkbrowser eine Datei ersetzen

21



Externer Link und Linkchecker

Externer Link:

1. URL eingeben2. Linktitel eingeben3. Fenster-Option auswählen

22

Der Linkchecker überprüft (in der Nacht) alle externen Links.Im rechten Portlet werden angezeigt: • defekte Links• andere Seiten die mit der aktuellen Seite verknüpft sind

Linkchecker für die aktuelle Seite

Linkchecker für die ganze Organisation (Hochschule oder Institut)


Seiten (Teil 1)Webeditor: Link zu Seiten und Dateien Der Anker Link

1. Linktext auswählen2. Linkbrowser aufmachen und zu «Anker» wechseln3. Anker auswählen

manuell gesetzter Anker

Überschrift im Text

23


LinkartikelLinkartikel als Umleitung

Wie kann ich eine kurze Webadresse erstellen?Aufgabe:

Für einen Zeitungsartikel soll unsere Seite "Spatenstich" mit einer kurzen Webadresse erreichbar sein. Die gewünschte Webseite befindet sich hier: www.fhnw.ch/services/immobilien-und-infrastruktur/neubauprojekte/campus-olten/news/spatenstich-2010 Wir wollen, dass die Seite mit dieser Adresse erreichbar wird: www.fhnw.ch/services/spatenstich

Lösung:

Im Ordner http://www.fhnw.ch/services müssen wir ein Linkartikel erstellen, der "spatenstich" heisst Im URL-Feld des Linkartikels wird eingegeben: http://www.fhnw.ch/services/immobilien-und-infrastruktur/neubauprojekte/campus-olten/news/spatenstich-2010

Effekt:

www.fhnw.ch/services/spatenstich

www.fhnw.ch/services/immobilien-und-infrastruktur/neubauprojekte/campus-olten/news/spatenstich-2010

24


LinkartikelLinkartikel als Umleitung

Beispiel um diese Umleitung zu erstellen: www.fhnw.ch/services/spatenstichmit dem Ziel: www.fhnw.ch/services/immobilien-und-infrastruktur/neubauprojekte/campus-olten/news/spatenstich-2010

1. Zu webcms.fhnw.ch/services gehen2. Dort einen Linkartikel hinzufügen mit dem Titel «spatenstich» 3. Als Webadresse die URL der Zielseite verwenden:

www.fhnw.ch/services/immobilien-und-infrastruktur/neubauprojekte/campus-olten/news/spatenstich-20104. Linkartikel von der Navigation verbergen, speichern und veröffentlichen

25

http://www.fhnw.ch/services/immobilien-und-infrastruktur/neubauprojekte/campus-olten/news/spatenstich-2010

http://www.fhnw.ch/services

http://www.fhnw.ch/services

http://www.fhnw.ch/services/immobilien-und-infrastruktur/neubauprojekte/campus-olten/news/spatenstich-2010


Plone WebCMSWissenswertes: die CMS URL

Vorsicht beim Linkartikel !

• WebCMS-Adresse ¹ allgemein zugängliche Webadresse

CMS-Server Web-ServerAustausch

https://webcms.fhnw.ch/... http://www.fhnw.ch/...

26

Auf webcms haben nur berechtigten Redaktoren Zugriff

https: verlangt ein Login, auch wenn es gar nicht erforderlich wäre


Seiten (Teil 2)

Die wichtigsten Funktionen

6. Vollbildschirm7. Tabellen8. Editor erweitern

27

Webeditor

Rücksicht nehmen auf den Benutzer von mobilen Geräte.Blättern (scroll) ist leichter als auf einem Link zu klicken


Seiten (Teil 2)Webeditor: Tabelle

Einfügen/bearbeiten einer Tabelle Wählen Sie sofort die Tabellenart (z.B. FHNW-Standard), Anzahl Zeilen & Spalten. Die Zusammen-fassung ist für die Barrierefreiheit und Suchmaschinen bestimmt.

Erstellen / Bearbeiten

Erstellen / Bearbeiten

Zeile einfügen / löschen

Zeile einfügen / löschen

Spalte einfügen / löschen Spalte einfügen / löschen

Verbundene Zellen trennen Verbundene Zellen trennen

Zellen verbinden Zellen verbinden

Zeilenhöhe Verbunde-ne Zellen trennen

Zellenbreite und -höhe Verbundene Zellen tren-nen

28


Seiten (Teil 2): WebeditorWebeditor: Tabellenstile

Es wurden 3 Tabellenstile definiert: FHNW-Standard, FHNW-Rahmen und FHNW Kein Rahmen. Die verschiedenen Stile sehen so aus:

Der Tabellenstil kann beliebig ausgewechselt werden. Dazu muss zuerst der Mauszeiger irgendwo in der Tabelle gesezt werden.

29

Rücksicht nehmen auf den mobilen Geräte. Tabelle mit mehr als 3 Spalten können schnell kritisch werden.


Seiten (Teil 2): WebeditorWebeditor vergrössern

Mit der Vollbildschirm-Ansicht

Editorfenster nach unten erweitern

30


Einstellungen Seiten (Teil 2)

31


Seiten (Teil 2)SuchmaschinenoptimierungSEO Properties

Seitentitel Seitenbeschreibung

32


Seiten (Teil 2)

Historie: Ältere Versionen einer Seite hervorholen

33


Seiten (Teil 2)Im Voraus arbeiten: Arbeitskopie erstellen

Eine Arbeitskopie:• kann bearbeitet und gespeichert werden• trägt in der URL: «copy_of»• hat den Status «privat» (und darf nicht

veröffentlicht werden)

34


Arbeitskopie in der Navigation

Original

Arbeitskopie

Seiten (Teil 2)

35


Seiten (Teil 2)Arbeitskopie anwenden / verwerfen

Die Arbeitskopie darf nicht• nochmals kopiert und irgendwo eingefügt werden • selbst veröffentlicht werden

Sie soll entweder• das Original ersetzen (die URL bleibt dann erhalten)• oder verworfen werden

36


Der Ordner (Teil 2)Ordnerübersicht

Um eine Darstellung für die Ordnerübersicht zu wählen: Darstellung Wichtigste Varianten (aus der Besuchersicht): 1. Kurzfassung (zeigt Titel und Beschreibung) 2. Album: darf nur Bilder enthalten 3. Diaschau (prettyPhoto Album view): darf nur Bilder enthalten 4. Kurzfassung mit Bild (für Kollektionen und anderen Artikel mit Vorschaubilder) 5. Artikel als Startseite verwenden (Artikel; Cover-Seite, Kollektion oder übliche Seite)

─

─

─

─

Album

Diaschau

Kurzfassung

Kurzfassung mit Bild

37


Der Ordner (Teil 2)Ordnerübersicht

38

Eine Startseite für den Ordner

Meistens wird für ein Ordner keine Standarddarstellung verwendet. Stattdessen wird eine im Ordner bestehende Webseite als «Startseite» bestimmt.

Wenn auf «Ordner mit Seiten» geklickt wird …

sollte nicht das Inhaltsverzeichnis kommen, sondern eine Seite


Der Ordner (Teil 2)Startseite

39

Im Menü «Anzeigen / Darstellung»: klicken auf «Artikel als Startseite verwenden»

und hier eine Startseite auswählen

Im Ordnerinhalt wird die Startseite in Fettschrift angezeigt


Der Ordner (Teil 2)Ordnerbefehle

40

Bestimmte Befehle können für mehrere Seiten und Dateien gleichzeitig ausgeführt werden.Hier gibt es Artikel zu kopieren: https://www.fhnw.ch/services/uebungsordner


Der Ordner (Teil 2)Dateien hochladen

Mit Firefox ist es möglich, Dateien und Bilder per Drag&Drop von einem PC oder einem Datei-Server in den CMS-Ordner zu ziehen.

41


Der Ordner (Teil 2)Navigation sortieren

• Sortieren nach Titel: nach Seitentitel und nicht Navigationstitel• Sortieren nach ID: nach URL-ID wie …/test-gab/seiten/die-tabellen

→ Grossbuchstaben und Zahlen haben einen Einfluss auf der Reihenfolge• Sortieren nach Änderungsdatum• Sortieren nach Erstellungsdatum• Sortieren nach Datum: nach Freigabedatum

Sortiert vorübergehend den Ordnerinhalt, um das Suche zu erleichtern

Schickt den Artikel zuoberst oder zuunterst im Navigationsmenü

42


Der Ordner (Teil 2)Navigation sortieren

Die Reihenfolge der Artikel (und somit die Navigation) kann auch per Drag&Drop innerhalb des Ordners umgestellt werden. Der Artikel kann mit einem Mausklick beim Titel gefasst und an einem beliebigen Ort wieder losgelassen werden:

43


Der Ordner(Teil 2)Dateien und Ordnerstatus

44


Ressourcenhelp.fhnw.ch und [email protected]

45

Formular für Supportanfrage im WebCMS:

wie wird ein Screenshot erstellt?https://help.fhnw.ch/services/2012/weboffice-faq/screenshot-erstellen

WebCMS Handbuchhttps://help.fhnw.ch/fhnw/2014/web-cms-handbuch

https://help.fhnw.ch/services/2012/weboffice-faq/screenshot-erstellen



https://help.fhnw.ch/fhnw/2014/web-cms-handbuch



Webauftritt FHNW WebCMS-Basiskurs vom 2. Juli 2015.

Documents

Transcript of Webauftritt FHNW WebCMS-Basiskurs vom 2. Juli 2015.