RUPAL FÜR FORTGESCHRITTENE · Fortgeschrittenenschulung –weiterführendes Arbeiten mit Drupal...

DRUPAL FÜR FORTGESCHRITTENE

Fortgeschrittenenschulung – weiterführendes Arbeiten mit Drupal

Alexander Winterstein <alexander.winterstein@hrz.tu-freiberg.de> (Zentraler Webkoordinator)

HTML- / CSS-Crashkurs

Barrierefreiheit

Suchmaschinenoptimierung (SEO)

Inhaltstypen

Erweiterte Funktionen

Übungen

INHALTE

Auszeichnungssprache zur Strukturierung

digitaler Dokumente

Texte, Bilder, Hyperlinks, …

Grundlage des WWW

Darstellung im Browser

Semantische Strukturierung, keine Formatierung

Visuelle Darstellung über CSS (Cascading Style

Sheets)

HTML – HYPERTEXT MARKUP LANGUAGE

HTML-SYNTAX

Text erhält durch Auszeichnungen seine Struktur

HTML-Elemente meistens durch ein Tag-Paar

markiert

Start-Tag beginnt mit <, gefolgt vom Elementname,

endet mit >

End-Tag beginnt mit </, Rest analog zum Start-Tag

HTML-Elemente können auch Attribute enthalten

Klasse, Ziel, Beschreibung, …

<html>

<title>Titel der Webseite</title>

<!– weitere Angaben wie Meta-Daten -->

</head>

<h1>Überschrift der ersten Ordnung</h1>

<p>Ein Absatz mit dem Inhalt der Website.</p>

<h2>Überschrift der zweiten Ordnung</h2>

<p>Ein weiterer Absatz mit einem <a href=„URL“

title=„Linktitel“ target=„Ziel“>Hyperlink</a>.</p>

</body>

</html>

HTML-STRUKTUR

CSS = gestufte Gestaltungsbögen

Gestaltungsanweisungen werden mit CSS erstellt

Einsatz im Zusammenhang mit HTML und XML

Ziel: Darstellungsvorgaben weitgehend von

Inhalten trennen

Idealerweise in separaten CSS-Dateien ausgelagert

HTML-Elemente können z.B. über Klassen oder

IDs identifiziert werden

CSS – CASCADING STYLE SHEETS

Anweisung

Eigenschaft 1: Wert A;

Eigenschaft 2: Wert B;

Beispiel:

#content

margin: 20px 20px 20px 20px;

color: #d2691e;

AUFBAU VON CSS-ANWEISUNGEN

<html>

<title>Titel der Webseite</title>

</head>

<h1>Überschrift der ersten Ordnung</h1>

<p>Ein Absatz mit dem Inhalt der Website.</p>

<h2>Überschrift der zweiten Ordnung</h2>

<p>Ein weiterer Absatz mit einem <a href=„URL“ title=„Linktitel“

target=„Ziel“>Hyperlink</a>.</p>

</div>

</body>

</html>

HTML-STRUKTUR MIT CSS-ANGABEN

HyperText Markup Language

HTML-Syntax

HTML-Struktur

Cascading Style Sheets

CSS-Anweisungen

FRAGEN ZU HTML/CSS?

Barrierefreiheit

„Barrierefreies Webdesign ist die Kunst,

Webseiten so zu gestalten, dass jeder sie

nutzen und lesen kann.“

Quelle: http://www.barrierefreies-webdesign.de/

BARRIEREFREIHEIT

Barrierefreiheit

Schneller und unkomplizierter Zugriff

Zugänglichkeit für Menschen mit und ohne

Behinderungen sowie Webcrawlern

Prinzipien:

Wahrnehmbarkeit

Verständlichkeit der Inhalte

Bedienbarkeit

Navigation der Website

BARRIEREARMES INTERNET

Barrierefreiheit

= Barrierefreie-Informationstechnik-Verordnung

Verordnung zur Schaffung barrierefreier

Informationstechnik nach dem

Behindertengleichstellungsgesetz

Ergänzung des Behindertengleichstellungsgesetzes

Zugang für behinderte Menschen

(im Sinne des § 3 des Behindertengleichstellungs-

gesetzes) ermöglichen/erleichtern

Gilt für alle Internetauftritte der Bundesverwaltung

BITV 2.0

Barrierefreiheit

Sachsen ist BITV-freie Zone

Gesetz zur Verbesserung der Integration von Menschen mit Behinderungen im Freistaat Sachsen (Sächsisches Integrationsgesetz – SächsIntegrG), gültig ab 2005.

§ 7 Barrierefreie InformationstechnikDie Behörden und sonstigen öffentlichen Stellen des Freistaates Sachsen gestalten ihre Internetauftritte und -angebote sowie die von ihnen zur Verfügung gestellten graphischen Programmoberflächen, die mit Mitteln der Informationstechnik dargestellt werden, schrittweise technisch so, dass sie auch von Menschen mit Behinderungen grundsätzlich uneingeschränkt genutzt werden können.

BITV 2.0

Barrierefreiheit

BITV Bedingung 2.4.6 Beschreibungen

Überschriften und Label (Beschriftungen)

kennzeichnen das Thema oder den Zweck.

BITV Bedingung 2.4.10 Abschnittsüberschriften

Es sind Abschnittsüberschriften zu verwenden, die

den Inhalt weiter strukturieren.

HTML-Beispiel:

<h2>Überschrift der Größe 2</h2>

<h3>Überschrift der Größe 3</h3>

ÜBERSCHRIFTEN

Barrierefreiheit

Anlage 2 der BITV 2.0, Teil 2

Inhalte sind durch Absätze und Überschriften logisch

zu strukturieren. Aufzählungen mit mehr als drei

Punkten sind durch Listen zu gliedern.

HTML-Beispiel: ungeordnete Liste

<li>Ein Aufzählungspunkt</li>

<li>Noch ein Aufzählungpunkt</li>

<li>Aller guten Dinge sind drei</li>

LISTEN

Barrierefreiheit

BITV Bedingung 1.3.2 Aussagekräftige Reihenfolge

Wenn die Reihenfolge, in der der Inhalt präsentiert wird,

Auswirkungen auf dessen Bedeutung hat, ist die richtige

Lese-Reihenfolge durch Programme erkennbar.

BITV Bedingung 1.3.3 Sensorische Merkmale

Anweisungen zum Verständnis und zur Nutzung des

Inhalts stützen sich nicht ausschließlich auf sensorische

Merkmale der Elemente wie z. B. Form, Größe, visuelle

Platzierung, Orientierung oder Ton.

TABELLEN

Barrierefreiheit

HTML-Beispiel:

<table>

<thead>

<th>Spaltenüberschrift 1</th>

<th>Spaltenüberschrift 2</th>

</thead>

<tbody>

<td>Tabelleninhalt in Spalte 1</td>

<td>Tabelleninhalt in Spalte 2</td>

</tbody>

</table>

TABELLEN

Spaltenüberschrift 1 Spaltenüberschrift 2

Tabelleninhalt in

Spalte 1

Tabelleninhalt in

Spalte 2

Barrierefreiheit

BITV Bedingung 1.1.1 Nicht-Text-Inhalte

Für jeden Nicht-Text-Inhalt, der dem Nutzer oder der

Nutzerin präsentiert wird, ist eine Text-Alternative

bereitzustellen, die den Zweck dieses Inhalts erfüllt.

BITV Bedingung 1.4.9 Schriftgrafiken

Schriftgrafiken werden ausschließlich zur Dekoration

verwendet oder in Fällen, in denen eine bestimmte

Textpräsentation eine wesentliche Voraussetzung für

die Vermittlung der Informationen ist.

BILDER

Barrierefreiheit

HTML-Beispiel:

<img src=„/upload.wikipedia/…“

alt=„Die Nahaufnahme des linken

Endes einer Braillezeile zeigt

das schwarze Kunststoffgehäuse,

links drei Funktionstasten,

daneben einige 8-Punkt-Braille-

Elemente. Diese zeigen mit ihren

teilweise deutlich sichtbar

angehobenen weißen Stößeln

folgende Zeichen: zwei

Leerzeichen, dann die Zeichen

P56, P136, P123 und P12345678 und

weitere Leerzeichen.“

title=„Brailledisplay“ />

BILDER

Quelle:

http://upload.wikimedia.org/wikipedia/commons/0/06/R

efreshable_Braille_display.jpg

Brailledisplay

Barrierefreiheit

BITV Bedingung 2.4.9 Zweck eines Links

Ziel und Zweck eines Links sind aus dem Linktext

selbst ersichtlich.

HTML-Beispiel:

<a href=„Adresse“ target=„Ziel des Links“

title=„Zweck des Links“>verlinktes Element</a>

Barrierefreiheit

Bildschirmleseprogramm für

Blinde und Sehbehinderte

Zwei Arten:

Akustisch [Lautsprecher]

Taktil [Braillezeile]

Synthetische Sprache wirkt

monoton

SCREENREADER

Quelle:

http://upload.wikimedia.org/wikipedia/commons/0/06/R

efreshable_Braille_display.jpg

Brailledisplay

Barrierefreiheit

Alle dargestellten Elemente werden ausgegeben

Menüs, Auswahlboxen, Überschriften, Hervorhebungen…

Elemente werden interpretiert und sprachlich

ausgegeben

Z.B. <img src=„Bildquelle“ alt=„Alternativer

Titel“ />

Navigation zwischen Überschriften mittels H-Taste

möglich

Navigation zwischen Blöcken mittels Tab-Taste

möglich

SCREENREADER: FUNKTIONSWEISE

Barrierefreiheit

Name Funktion

Max Mustermann Otto Normalverbraucher

Erika Mustermann Personalausweisbeauftragte

Maria Musterfrau Führerscheinbeauftragte

SCREENREADER: TABELLEN

(Überschrift 2) Name <Pfeil nach unten> (Überschrift 2)

Funktion <Pfeil nach unten> Max (fett) Mustermann (fett

Ende) – Otto Normalverbraucher – Erika Mustermann –

Personalausweisbeauftragte – Maria Musterfrau –

Führerscheinbeauftragte

Tabellen werden von links nach rechts und von oben

nach unten gelesen; kein Hinweis beim Zeilenwechsel

Barrierefreiheit

SCREENREADER: VORLESEBEISPIEL

Screenshot von: http://de.wikipedia.org/wiki/Braillezeile

<h1>Braillzeile</h1>

<img src=„/upload.wikipedia/…“ alt=„Die Nahaufnahme des

linken Endes einer Braillezeile zeigt das schwarze

Kunststoffgehäuse, links drei Funktionstasten, daneben

einige 8-Punkt-Braille-Elemente. Diese zeigen mit ihren

teilweise deutlich sichtbar angehobenen weißen Stößeln

folgende Zeichen: zwei Leerzeichen, dann die Zeichen P56,

P136, P123 und P12345678 und weitere Leerzeichen.“

title=„Nahaufnahme“ /></a>

<p>Die <b>Braillezeile</b>, kurz <b>Zeile</b>, oder

<b>Brailledisplay</b> ist ein <a href=„Adresse“ title=„

Computer“>Computer</a>-Ausgabegerät für <a href=„Adresse“

title=„Blindheit“>blinde</a> Menschen, das Zeichen in <a

href=„Adresse“ title=„Brailleschrift“>Brailleschrift</a>

darstellt. Üblicherweise werden sie durch Screenreader

angesteuert, die Zeichen in ausgewählten

Bildschirmbereichen auslesen und in <a href=„Adresse“

title=„Computerbraille“>Computerbraille</a> darstellen.

Dadurch können Blinde große Teile der Standardsoftware

benutzen und selbständig am Computer arbeiten.</p>

Barrierefreiheit

SCREENREADER: VORLESEBEISPIEL

Barrierefreiheit

Barrierearmes Internet

BITV 2.0

HTML-Elemente

Screenreader

FRAGEN ZUR BARRIEREFREIHEIT?

SEO-Maßnahmen

Webinhalte im Suchmaschinen-Ranking höher

platzieren

Zwei Bereiche

OnPage-Optimierung

OffPage-Optimierung

WAS IST SUCHMASCHINENOPTIMIERUNG?

Optimierung des Seiteninhalts

Formatierungen, Überschriften etc.

Keywords im Inhalt

Landing-Pages für Suchmaschinen optimiert

Landing-Page stellt Angebot vor

SEO-Landing-Page optimiert, um bestimmte

Keywords ranken zu lassen

SEO: ONPAGE-OPTIMIERUNG

Google-Ranking beinhaltet über 200 verschiedene

Faktoren

1. Domain/Adresse: sollte Keyword enthalten

2. Seitentitel: aussagekräftig, sollte ebenfalls

Keyword enthalten

3. Überschriften: klare, saubere Struktur auf

Webseite, hierarchische Verwendung, Keywords

SEO: RANKINGFAKTOREN

Google-Ranking beinhaltet über 200 verschiedene

Faktoren

4. Page-Speed: schnellere Seiten haben Ranking-

Vorteil

5. SEO für Bilder: Keywords in Bildtiteln und Alt-

Attributen

6. Backlinks: aufgrund hochwertiger Inhalte

freiwillige Verlinkungen auf Landing-Page

SEO: RANKINGFAKTOREN

Unsichtbare Hinweise im <head>-Bereich einer

Website

Übermitteln diverse Informationen an

Maschinen/Robots

Technik aus den 90er Jahren

Suchmaschinen und Websites reagieren noch auf

einige meta-Tags

Beeinflussen das Ranking nur indirekt

WAS SIND META-TAGS?

content=„Beschreibungstext …“ />

KEYWORD 2, KEYWORD 3“ />

RELEVANTE META-TAGS

Attribut „description“

Wird im Ranking nicht berücksichtigt

Maßgeblich für Click-Through-Rate (CTR)

Aufbau nach AIDA-Prinzip ratsam

Attention, Interest, Desire, Action

160 Zeichen maximal [100 auf mobilen Endgeräten]

RELEVANTE META-TAGS

Attribut „title“

„title“ kein meta-Element

Interpretation ausschließlich von Webbrowsern und

Suchmaschinen

Verwendung zur Berechnung des Google-Rankings

RELEVANTE META-TAGS

Attribut „robots“

"index,follow" erlauben aktuelle Seite zu indizieren

"noindex" bzw, "nofollow" verhindern mehrfaches

indizieren

Redundante Inhalte Spam

PageRank kann verwässern

RELEVANTE META-TAGS

Meta-Tags für Social Media

Twitter<meta name="twitter:description" content="Twitter-

Beschreibung, kürzer als 200 Zeichen">

Google+<meta itemprop="description"

content="Seitenbeschreibung für Google Plus">

Facebook<meta property="og:description"

content="Beschreibung mehr auf Social Media-User

zugeschnitten" />

RELEVANTE META-TAGS

Description

Abstract

Keywords

Revisit-after

Robots

VERFÜGBARE META-TAGS IN DRUPAL 6

Spam vermeiden

Zielgruppe kennen und bedienen

Barrieren vermeiden

Links [Off-Page-Optimierung]

Keyword-Datenbank nutzen

https://adwords.google.de/KeywordPlanner

SEO IN ALLER KÜRZE

GOOGLE KEYWORD-PLANNER

Quelle: https://www.seo-book.de/tools-allgemein/es-muss-nicht-immer-google-sein-12-13-keyword-tools

Ranking-Faktoren

Meta-Tags

FRAGEN ZUR SUCHMASCHINENOPTIMIERUNG?

Inhaltstypen

INHALTSTYPEN

Benutzerprofil

Bildergalerie*

Infoblock

Publikation

Veranstaltung

Webform

Inhaltstypen

BILDERGALERIE: NEWS & SEITE

Inhaltstypen

News und Seite

Platzierung

Unterhalb des Textkörpers

Upload

Einzelbild oder Bulk-Upload

Darstellung

Galerie oder Slideshow

Inhaltstypen

Eintrag in rechten Spalte

Sichtbarkeit auf allen Seiten

des Bereichs

Verwendung primär für

Kontaktinformationen

INFOBLOCK

Inhaltstypen

Veranstaltungskalender:

Leben Veranstaltungen

Veranstaltung hinzufügen

Voraussetzung: zentrales Uni-Login

Hinweis:

"Vorschau"-Button "Speichern"-Button

Kein nachträgliches Bearbeiten möglich

VERANSTALTUNG

Inhaltstypen

Formular in Webseite

einbinden

Aufbau wie normale Seite

Hinzufügen und Konfigurieren

von Komponenten

E-Mail-Versand

Export der Ergebnisse [CSV]

WEBFORM

Inhaltstypen

Bildergalerie

Infoblock

Veranstaltung

Webform

FRAGEN?

Übersetzung für aktuelle Seite hinzufügen

Hinweis: Inhalte werden dadurch nicht übersetzt!

Vorgehen:

1. Sprache auswählen standardmäßig „Sprachneutral“

2. Seite speichern

3. Neuen Reiter „Übersetzen“ anklicken

4. Neue Sprachversion auswählen

5. Inhalte in der neuen Sprache einpflegen

MEHRSPRACHIGKEIT

GRUPPEN-ADMINISTRATION

MENÜ-ADMINISTRATION

BERECHTIGUNGEN

Bereichsadministratoren verwalten Berechtigungen

Meine Gruppen Mitglieder

Redakteure hinzufügen/entfernen

Redakteur zum Administrator ernennen/entfernen

Erst nach erstem

Login können

Berechtigungen

eingestellt werden!

FRAGEN?

Mehrsprachigkeit

Gruppen-Administration

Berechtigungen

Übungsaufgaben

Word-Dokument herunterladen

„Fortgeschrittenenschulung – weiterführendes

Arbeiten mit Drupal“

http://drupal2.hrz.tu-freiberg.de/schulungsbereich

Übungsaufgaben selbstständig bearbeiten

ÜBUNGEN

Webportal: http://tu-freiberg.de/webportal/

Informationen zum Webauftritt, Weiterbildungen, Anleitungen und Support

Fragen und Probleme: webteam@tu-freiberg.de

Weitere Weiterbildungen:

Webinhalte gestalten

Einführung in das Bloggen mit WordPress

Bloggen für Fortgeschrittene

Online-Umfragen erstellen mit LimeSurvey

WEITERFÜHRENDE INFORMATIONEN

RUPAL FÜR FORTGESCHRITTENE · Fortgeschrittenenschulung –weiterführendes Arbeiten mit Drupal...

Documents

Transcript of RUPAL FÜR FORTGESCHRITTENE · Fortgeschrittenenschulung –weiterführendes Arbeiten mit Drupal...

DOPPEL-KLICK IM ÜBERBLICK - static.cornelsen.de · Otto Ernst: Nis Randers ... Marco Polos Geschichte 156 Anke Dörrzapf: Die abenteuerlichen Reisen des Marco Polo 156 Weiterführendes:

Anleitung - brd.nrw.de · Umschalten zwischen Entwurfsdiagramm und Implementationsdiagramm ... (Beispiel int[][] für ein zweidimensionales int-Feld). Inhaltstypen

DOPPEL-KLICK IM ÜBERBLICK - cornelsen.de · Marco Polos Geschichte 156 Anke Dörrzapf: Die abenteuerlichen Reisen des Marco Polo 156 Weiterführendes: Bücher und Geschichten über

Weiterführendes PDF zum Thema Syntegris - DWH Szenarien1.72 MB

DOPPEL-KLICK IM ÜBERBLICK - bilder.buecher.de · Training: Die Inhaltsangabe eines Jugendbuch-Kapitels 194 Weiterführendes Extra Sprache Anwendungstraining ... Theodor Fontane:

Eye Care Hospital...Dr Rohit Shetty Dr Rupal Shah Dr Gitansha Sachdeva Dr Sharon D'Souza Dr Rajesh Fogla vs Dr Rupal Shah Deciphering corneal topography Problems in Ectasia scoring

Von Sonja Trageser und Bettina Mähler Gliederung 1. Einsatz 2. Aufbau 3. Layout 4. Weiterführendes.

Berufsakademie Rhein-Main Modulhandbuch Bachelor ... · Weiterführendes Modul zur Schaffung eines Grundverständnisses für die Bereiche Unternehmensführung, Human Resources Management

Thomas Reimann1 SVGSVG Scalable Vector Graphics. 2 Themenüberblick XML Grafiksysteme SVG Überblick Beispiel (step by step) Tools Weiterführendes Material.

Ausbildung und Studium für deine ZukUNft · ein weiterführendes Praktikum in einem Betrieb oder einen Schnuppertag an einer der Hochschulen, um euch noch besser zu orientieren.

Einführung in TYPO3 · 2019. 5. 21. · und Workflow •Werden durch den Administrator oder Teamleiter definiert • Inhaltstypen werden vom Administrator festgelegt Inhalte •Werden

Universität Kassel fileUmweltprofil Umweltstudium Weiterführendes Umweltstudium Masterstudiengänge Das Graduiertenzentrum für Umweltforschung und Lehre (GradZ Umwelt) bietet Nachwuchs-

Leseprobe - Carl Hanser Verlag...InhaltXI 12.5.2 HTML 5 Package (H5P) ..... 504 12.5.2.1H5P-Inhaltstypen ..... 506 12.5.2.2 H5P in Moodle-Aktivitäten ..... 509 12.5.2.3 H5P-Aktivität

ANJU - CCDI-HSG · 2018-10-08 · ANJU RUPAL Wie man 37.000 indische Mädchen mit einer Beauty-Marke zur Schule schickt ANITRA EGGLER Wieso es so unendlich langweilig ist, angepasst

Microsoft SharePoint 2013 für Anwender : das Handbuch · Inhaltsverzeichnis Jetzt wächst zusammen,waszusammengehört-VorlagenundTaxonomie 158 Bibliotheksvorlagen 158 Inhaltstypen

RUPAL-SCHULUNG - TU Bergakademie Freibergtu-freiberg.de/.../pdf/einsteigerschulung_drupal_ss2017.pdf · Web-Content-Management-System Drupal Core mit Grundfunktionalität User, Node,

DOPPEL-KLICK IM ÜBERBLICK - bilder.buecher.de · Eine Szene spielen 108 Das kann ich! Einen Text szenisch spielen 110 Das wiederhole ich! Ohne Worte sprechen 111 Weiterführendes:

ANJU - Diamond Scull · ANJU RUPAL Wie man 37.000 indische Mädchen mit einer Beauty-Marke zur Schule schickt ANITRA EGGLER Wieso es so unendlich langweilig ist, angepasst zu sein

A1 Weiterführende Monografien - link.springer.com978-3-540-38204-1/1.pdf · Anhang A1 Weiterführende Monografien Nachfolgend sind Monografien aufgeführt, die für ein weiterführendes

Möglichkeiten der automatischen Sprachverarbeitung mit · PDF fileEinführung Verarbeitung Django Weiterführendes Einführung - ASV Was macht man bei der automatischen Sprachverarbeitung?