MEDIZINISCH ADMINISTRATIVE INORMATIONSTECHNOLOGIE Web Content Management System (WCMS) Intranet/Internet des Klinikums Basisschulung für Redakteure Ulrike Weisemann, Elke Biebelmann, Marija Skrtic, Josef Krattenmacher, Martin Aichberger, Robert Garus, Jürgen Primbs Internet & Lehre MIT
Das Team Internet und Lehre Personen: Marija Skrtic Elke Biebelmann Ulrike Weisemann Robert Garus Josef Krattenmacher Martin Aichberger Jürgen Primbs Projekte: MeCuM Erhalt des Ist-Zustands Intranet des Klinikums der Universität München Internet des Klinikums der Universität München 2
Vorstellung Jürgen Primbs, Dipl. Chemiker Seit 14 Jahren am Klinikum der Universität München 5 Jahre Psychiatrische Klinik, Abteilung Neurochemie 8 Jahre Institut für Notfallmedizin und Medizinmanagement (INM, Bereichleiter Internetentwicklungen und -dienste) seit Feb. 2008 Teamleiter Internet&Lehre des Bereichs Verfahren in Medizin, Pflege und Lehre in der MIT 3
Teil I Vorteile eines WebContentManagementSystems Barrierefreiheit Corporate Design (CD) des Klinikums Die WebContentManagementSysteme des Klinikums Das "Core-Pakets" - Trennung von Inhalt, Layout und Struktur Zugange zum WCMS des Klinikums 4
( WCMS Web Content Management System (= Gestaltung und Pflege von Websites Schnell und effektiv Im Corporate Design Barrierefrei Abgrenzung zu DMS, CMS, LMS, CRM und das ganze in Verbindung mit E (E=Enterprise)! 5
Vorteile eines WCMS Starke Vereinfachung der Eingabe und Pflege von Webinhalten Einhaltung von Corporate Design und Barrierefreiheit Trennung von Struktur, Layout und Content keine HTML- oder Programmierkenntnisse nötig Arbeiten im gewohnten Webbrowser Linkverwaltung interne Fehlerprüfung Mehrfachverwendung von Inhalten zeitgesteuertes Veröffentlichen Workflow-Regeln Archivfunktion Importfunktion Benutzerverwaltung mit Rechten und Rollen 6
7
8
Barrierefreiheit Verordnung zur Schaffung barrierefreier Informationstechnik ( BITV ) nach dem Behindertengleichstellungsgesetz http://www.stmas.bayern.de/behinderte/politik/baybitv.pdf http://www.gesetze-im-internet.de/bitv/bjnr265400002.html http://www.einfach-fuer-alle.de/ Zugänglichkeit, Benutzbarkeit, Wahrnehmbarkeit Alle Nutzer profitieren 9
Corporate Design (1) Leitlinie für das gesamte visuelle Erscheinungsbild eines Unternehmens Wiedererkennung Layout Inhalt Struktur Gestaltungsansatz: optisch schnell erfassbare Gliederungssystematik Seitenraster auf 1024 X 768 Pixel optimiert nach unten offenes Grundraster Kopfbilder mit flexiblem Boxensystem Corporate-Design Handbuch, Webstyleguide 10
11
12
( 2 ) Corporate Design Flexibles Boxensystem 13
( 3 ) Corporate Design 14
( 4 ) Corporate Design 15
Internet- und Intranet-Auftritt des Klinikums http://www.klinikum.uni-muenchen.de/ http://intranet.klinikum.uni-muenchen.de/ Von dort jeweils Verlinkung auf Webauftritte der Kliniken, Abteilungen und Institute Alle Webauftritte im Corporate Design (= CD) des Klinikums 16
Das Core-Paket Intranet der Aufbau des Corepakets der Bilder-Ordner der Download-Ordner der CSS-Ordner die Template-Dateien Trennung von Inhalt, Layout und Struktur Jürgen Primbs 17
Struktur Core-Paket Intranet De-Ordner: Startseite Menüpunkt 1 Menüpunkt 2 Legende: Inhaltsseiten Bilder Downloaddateien Layout/Struktur Bild-Ordner Download-Ordner Menüpunkt 1 Menüpunkt 2 Bild-Dokument(e) (jpg, gif, png) Bild-Dokument(e) (jpg, gif, png) CSS-Ordner Menüpunkt 1 Menüpunkt 2 Download-Dokument (pdf, zip, ) Download-Dokument (pdf, zip, ) Template-Dateien CSS-Dokument (css) Jürgen Primbs 18
Inhalt: die Startseite der de-ordner (en, ru, ) de Menüpunkt a 1. Untermenüpunkt a.1 2. Untermenüpunkt a.2 Menüpunkt b 1. Untermenüpunkt b.1 Menüpunkt c Menüpunkt d 1. Untermenüpunkt d.1 2. Untermenüpunkt d.2 Jürgen Primbs 19
Inhalt: der Bilder-Ordner bilder bilder/layout 1. bilder/layout/icons 2. bilder/layout/kopfbilder 3. bilder/layout/ bilder/<hauptmenü-punkte von de> 1. Menüpunkt a 2. Menüpunkt b 3. Menüpunkt c 4. etc. Jürgen Primbs 20
Inhalt: der Download-Order (Inhalt) download/<hauptmenü-punkte von de> Menüpunkt a Menüpunkt b Menüpunkt c etc. Jürgen Primbs 21
Layout: der CSS-Ordner css 1. print.css 2. screen.css Jürgen Primbs 22
Struktur: die Template-Dateien Templates t-top t-subnavigation t-mainnavigation t-maincontent Mastertemplate t-servicearea t-breadcrumb t-job-offer t-bottom Jürgen Primbs 23
Jürgen Primbs 24
Aufbau Core-Paket Intranet De-Ordner: Startseite Menüpunkt 1 Menüpunkt 2 Bild-Ordner Legende: Inhaltsseiten Bilder Downloaddateien Layout/Struktur Download-Ordner Menüpunkt 1 Menüpunkt 2 Bild-Dokument(e) (jpg, gif, png) Bild-Dokument(e) (jpg, gif, png) CSS-Ordner Menüpunkt 1 Menüpunkt 2 Download-Dokument (pdf, zip, ) Download-Dokument (pdf, zip, ) Template-Dateien CSS-Dokument (css) Jürgen Primbs 25
Trennung von Inhalt, Layout und Struktur Startseite Menüpunkt 1 Menüpunkt 2 Legende: Inhalt - Text: Redakteure verantwortlich Inhalt Bilder: Redakteure verantwortlich Inhalt - Downloaddateien: Redakteure verantwortlich Bild-Ordner Layout: CSS-Dateien/Bildelemente: Designer verantwortlich Struktur: template-dateien: Designer/Entwickler verantwortlich Download-Ordner Menüpunkt 1 Menüpunkt 2 Bild-Dokument(e) (jpg, gif, png) Bild-Dokument(e) (jpg, gif, png) CSS-Ordner Menüpunkt 1 Menüpunkt 2 Download-Dokument (pdf, zip, ) Download-Dokument (pdf, zip, ) Template-Dateien CSS-Dokument (css) Jürgen Primbs 26
Redaktionssystem MIT Live-System Vorlagen Content Templates Freigabe Aktualisierung 1x pro Stunde Webserver Vorschau separate Vorschau 27
Teil II - Basisfunktionen Das Autorensystem Ansichten und Vorschau Vorlagen, Feldgruppen und Felder Ordner und Dokumente Der HTML-Editor (WYSIWYG-Editor) Uploadmöglichkeiten (Bilder, PDF- und Zip-Dateien) Site-Bearbeitungen (Kopieren, Ausschneiden, Einfügen, Löschen) Der Freigabeworkflow zur Livestellung der Inhalte 28
Aufbau einer Website im WCMS des Klinikums 29
Aufbau des Redaktionssystems WCMS des Klinikums Textmenü Werkzeugleiste aktueller Pfad Baumansicht der Website Eigenschaften der aktuellen Datei 30
Ansichten im WCMS des Klinikums Baumansicht Spaltenansicht Listenansicht Miniaturansicht 31
Ansichten im WCMS des Klinikums Baumansicht 32
Eigenschaften und Details Eigenschaften Detailansicht 33
Vorschau und separate Vorschau Vorschau Separate Vorschau 34
Ordner vs. Dokumente Hat eine eigene Vorlage und somit auch direkte Inhalte, die auf der Website erscheinen Kann weitere Elemente aufnehmen (Ordner, Dokumente, Bilder, PDF s, etc.) Ordner Dokument 35
Fragen? 36
MEDIZINISCH ADMINISTRATIVE INORMATIONSTECHNOLOGIE Link zum Schulungs-CMS http://mitcms1.oit.med.uni-muenchen.de/schulung/nps Internet & Lehre MIT
Übung 1 Loggen Sie sich in das WebContentManagementSystem des Klinikums ein, bzw. entsperren den Arbeitsplatz und führen Sie zuerst das Logout und dann das Login durch. Gehen Sie auf schulung-präsentation und betrachten Sie die Seite in der Vorschau bzw. separaten Vorschau Stöbern Sie zusammen mit der/dem Referentin/Referenten durch den Menüpunkt Ansicht des Autorensystems 38
Vorlagen und Felder der Weg zu einer neuen Seite Um neue Seiten im WCMS anlegen zu können, müssen Sie eine Vorlage des Systems verwenden Mit Hilfe dieser erstellen Sie eine neue Seite im Intranet- /Internetauftritt des Klinikums Damit die Seite im Auftritt richtig angezeigt wird, müssen einige Felder bearbeitet werden In dieses Grundgerüst können Sie Inhalte über einen Editor einpflegen - später über weitere Felder der Vorlage(n) In der Fortgeschrittenenschulung werden Sie lernen, wie sie in Ihrem Auftritt mit diesem Vorlagen/Felder-System immer gleich aussehende, standardisierte Webseiten erstellen können. 39
Vorlage Standard-Ordner Auswahl der Vorlage Namensgebung der Seite 1 2 3 4 40
Kopfbilder I 4 Aktionen 41
Kopfbilder II Für die Webseite wird ein Kopfbild in der Startseite (de- Ordner) angegeben Kopfbild der Startseite wird für darunterliegende Seiten automatisch vererbt Wenn für eine Seite unterhalb der Startseite ein individuelles Kopfbild festgelegt ist, wird dieses für die entsprechende Seite verwendet und an die darunterliegenden Seiten weitervererbt 42
Fragen? 43
Übung 2 Erstellen Sie einen neuen Ordner mit der Vorlage Standard Ordner in schulung-uebungen/de bzw. Schulung Übungen/Startseite mit dem Namen (schulung<xx>, wobei <xx> für die Nr. Ihres Schulungs-PC s steht. Füllen Sie einige Felder in der Feldgruppe Darstellung aus. In der Navigation anzeigen: ja Navigationsname: Schulungs-PC s) Schulung<xx> (xx=nr. des Objekt zeigen: ja (alle geraden PC-Nummern), nein (alle ungeraden PC-Nummern) Gültig von: <heutiges Datum> Gültig bis: <ein Monat später> Fügen Sie in der Feldgruppe Inhalt den Titel ein: <Schulung xx> 44
Übung 3 Legen sie nun noch 2 weitere Ordner unterhalb Ihres Ordners schulung<xx> an: Name: meine-lieblingslinks (Vorlage: Standard Ordner), Titel: Meine Lieblingslinks Name: uebermich (Vorlage: Standard Ordner), Titel Über Mich Fügen Sie in der Seite Über Mich in der Feldgruppe Inhalt das Kopfbild kopfbild-ueber-mich.jpg ein (Pfad: schulunguebungen/bilder/layout/kopfbilder) Betrachten Sie Ihren Teil/Ast der Schulungs-Webseite mit der Vorschau der separaten Vorschau 45
Inhalt I 1 2 3 46
Inhalt II 47
Der HTML-Editor 48
HTML-Editor - Bild einbinden 49
HTML-Editor - Link einfügen 50
HTML-Editor unterschiedliche Verlinkung Standard=Eigenes Fenster der Anwender bleibt im selben Browser wenn der Link sich im Portal befindet interne Verlinkung Neues Fenster der Anwender verläßt den Browser ein neues Browwerfenster geht auf wenn der Link das Portal verläßt externe Verlinkung 51
Fragen? 52
Übung 4 Bearbeiten Sie den Hauptinhalt Ihrer Seite Über Mich Schreiben Sie einige Zeilen Text zu Ihrer Person Fügen Sie das Bild aus schulung-uebungen/bilder/de/smiley ans Ende Ihres Textes und geben Sie als Alternativ-Text Lachen an. Erstellen Sie einen internen Link zu Ihrem Menüpunkt Meine Lieblingslinks (interner Link) Betrachten Sie das Ergebnis in der separaten Vorschau Bearbeiten Sie den Hauptinhalt Ihrer Seite Meine Lieblingslinks und schreiben etwas Text Erstellen Sie mittels Aufzählungszeichen zwei Lieblingslinks von Ihnen, die Sie ins Internet verlinken wollen (externe Links). Betrachten Sie das Ergebnis in der separaten Vorschau 53
Upload von Bildern, PDF s und anderen Dateien 1. Übergeordneten Ordner auswählen 2. Datei importieren Beispiele: PDF-Datei Bild-Datei Zip-Datei 3. Datei kann nun beliebig im CMS verwendet werden (zur Anzeige oder als Link bzw. Download) 54
Mehrere Dateien importieren 1. Übergeordneten Ordner auswählen 2. Zu importierende Dateien auf dem lokalen Rechner in eine Zip-Datei packen. 3. Die erstellte Zip-Datei als Archiv importieren (! nicht als Datei importieren!) 4. Dateien werden im CMS-Fiona automatisch entpackt und importiert 55
Fragen? 56
Übung 5 Dateien für diese Übung finden sie auf Laufwerk T: med_temp/wcms-schulungen/uebungen Legen Sie unter /bilder/de/ einen eigenen Bildordner mit folgenden Namen an: schulungskennung<xx> Nr. Ihrer Kennung Importieren Sie das Bild mondlandung.jpg in Ihren soeben angelegten Bildordner /bilder/de/ schulungskennung<xx> Legen Sie unter /downloads/de/ einen eigenen Downloadordner mit folgendem Namen an: schulungskennung<xx> Nr. Ihrer Kennung Importieren Sie in einem Schwung die 3 PDF s (auf dem Laufwerk unter../uebungen/pdf) Vorgehensweise: Packen Sie die PDF-Dateien in eine Zip-Datei. Benutzen Sie als Zip-Name Ihre Schulungskennung Importieren Sie die Zip-Datei als Archiv in Ihren vorher angelegten Downloadordner /downloads/de/schulungskennung<xx> Importieren Sie nun dieselbe ZIP-Datei <schulungxx>.zip als Datei in Ihren Downloadordner schulungskennung<xx> Erläutern Sie Ihrem Nachbarn den Unterschied Zip-Datei als Archiv importieren und Zip-Datei als Datei importieren! 57
Bearbeitung auf Hierarchieebene Kopieren (nur einzelne Elemente) Ausschneiden (Teilbäume) Einfügen (abhängig von Kopieren/Ausschneiden) Löschen (Löscht einzelne Elemente) Wichtig: Ein Teilbaum kann nicht gelöscht werden, solange dieser noch Elemente enthält!! 58
Freigabe-Workflow Was bedeutet der Kringel, bzw. Das Kreissegment bei einem Element? 1. Freigegeben 2. Es existiert (mind.) eine freigegebene Version. Zudem ist momentan eine Arbeitsversion vorhanden 3. Es existiert nur eine Arbeitsversion. Dieses Element wurde noch nie zuvor freigegeben 1 2 3 59
Freigabe-Workflow Wie bekomme ich meine Inhalte ins Internet/Intranet des Klinikums? Einmalige Einrichtung des Webservers durch das Team Internet und Lehre Freigeben (die ausgewählte Datei wird für die Veröffentlichung freigegeben) Bearbeitung abschließen (alle - oder per Häckchen selektierte - Dateien, die meiner Bearbeitung unterliegen, können auf einmal freigegeben werden) 60
Fragen? 61
Übung 6 Geben Sie uebermich frei Schließen Sie nun die Bearbeitung für alle Ihre Dateien ab 62
Teil 3 Vorüberlegung 1: Inhalte für das Intranet bzw. Internet Vorüberlegung 2: Verlinkung von den Klinikumshauptseiten im Intranet bzw. Internet (Visitenkarten-System) Gruppen und Dateirechte Die ersten Schritte zum eigenen Auftritt Domain- und Schnittstellen-Policy Livestellung Vorgehen bei Aufbau bzw. Migration 63
Vorüberlegungen Inhalte Internet : Alles, was von der ganzen Welt aus aufrufbar sein soll Keine Internen Verwaltungsangelegenheiten Keine Vertraulichen Inhalte Inhalte Intranet : Alles, was nur im Medizinischen Netz des Klinikums aufrufbar sein soll Interne Verwaltungsangelegenheiten Interne Informationen, die für den Betrieb des Klinikums von Belange sind Interne Informationen, die nie oder noch nicht im Internet veröffentlicht werden sollen Achtung! Vermeiden Sie Redundanzen bzw. Doppelte Inhaltspflege 64
Die Gruppen Red (Redakteure) Chefred (Chefredakteure) Des (Designer) Admin (Administratoren) 65
Die Dateirechte Datei lesen Arbeitsversion bearbeiten (bestehende Datei bearbeiten) Dateien im Ordner anlegen (Dateien neu anlegen) Datei administrieren (Namen ändern, löschen) 66
Trennung von Inhalt, Layout und Struktur Startseite Menüpunkt 1 Menüpunkt 2 Legende: Inhalt - Text: Redakteure verantwortlich Inhalt Bilder: Redakteure verantwortlich Inhalt - Downloaddateien: Redakteure verantwortlich Bild-Ordner Layout: CSS-Dateien/Bildelemente: Designer verantwortlich Struktur: template-dateien: Designer/Entwickler verantwortlich Download-Ordner Menüpunkt 1 Menüpunkt 2 Bild-Dokument(e) (jpg, gif, png) Bild-Dokument(e) (jpg, gif, png) CSS-Ordner Menüpunkt 1 Menüpunkt 2 Download-Dokument (pdf, zip, ) Download-Dokument (pdf, zip, ) Template-Dateien CSS-Dokument (css) 67
Die ersten Schritte zum eigenen Auftritt 1. Der/die Redakteur(in) muss eine Schulung absolviert haben 2. Der/die Redakteur(in) muss einen Zugang zum Autorensystem bekommen Internet: Kennung beantragen Intranet: E-Mail an cms.support@klinikum.uni-muenchen.de 3. Domainname des Auftritts muss vor den Arbeiten bekannt sein Internet: Beantragung über die Projektwebseite Intranet: Domainname ergibt sich aus dem offiziellen Namen des Gliederungsbescheides 4. Die Einrichtung erhält eine Kopie des Core-Pakets Internet: Antrag neue Webseite Intranet: E-Mail an cms.support@klinikums.uni-muenchen.de 5. Rollen und Rechte-Zuweisung auf das Core-Paket 68
Die Domain-Policy Internet: http://www.klinikum.uni-muenchen.de/<name> Intranet: http://intranet.klinikum.uni-muenchen.de/<name> Intranet: <Name>: Name der Einrichtung laut Gliederungsbescheid der LMU Internet: <Name>: Name der Einrichtung laut Gliederungsbescheid der LMU Name des zeitlich befristeteten Internetauftritts (Kongress, Projekt) Name der interdisziplinären Arbeitsgruppe, des interdisziplinären Projekts Second-Level-Domain Name bei befristeten Internetauftritten und interdisziplinären Projekten 69
Die Schnittstellen-Policy Zuständigkeit des Teams Internet&Lehre für statische Inhalte des Intranets und dynamische Inhalte mit Bordmitteln des WCMS des Klinikums Keine Eigenentwicklungen können im Augenblick mit angeschlossen und unterstützt werden Evaluationsphase (Lenkungsausschuss, zentralisierte Angebote Einrichtungsspezifische Angebote Projektseite WebContentManagement 70
Fragen, Diskussion, Ausklang? 71
Bitte füllen Sie den Evaluationsbogen aus Vielen Dank Ihr Team Internet und Lehre Wir können nicht versprechen, dass wir immer alles richtig machen, jedoch versichern wir Ihnen, dass unsere Tür immer für Sie offen steht 72