do ´s and don ´ts - deutsche schachjugend...deutsche schachjugend -nÖrt 2016 -hanau -erik kothe...
TRANSCRIPT
![Page 1: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/1.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Do ́s and Don ́tsErik Kothe, Beauftragter für Internet DSJ
![Page 2: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/2.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Einstieg
Themen:
- Seitenaufbau
- Callenge
- HTML
- Thesen (Do’s and Don ‘ts)
- Planung2
![Page 3: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/3.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Was gehört zu einer Webseite?
3
![Page 4: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/4.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Bausteine einer Webseite - Teil 1Header (Logo, Quicknavigation, Kontakt)
NavigationsbereichBrotkrumenpfad
Untermenü,Partnerlogos,...
Hauptinhaltsbereich
Kontakt,Termine,
Facebook,RSS,
...
Fußbereich (Copyright, SocialMedia, Seitenstruktur, …)
4
![Page 5: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/5.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Bausteine einer Webseite - Teil 2
- Überschriften (H1 - H6)- Absätze- Links- Punktlisten- Nummerierungen- Bilder inkl. Bildunterschriften- Formulare (bspw.
Feedbackformular, Newsletter)- Kontaktelemente (Telefonnummer,
E-Mail, …)
- Bilder-Galerien- Videoplayer- News-Boxen (eigene News / fremde News)- Download-Bereich- Mitglieder-Login inkl. geschützter Bereich- Forum- Gästebuch- Liga-Plugin (Paarungen, Tabellen, …)- Taktik-Aufgaben- ...
5
![Page 6: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/6.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Aller Anfang ist ein “Baum”
Tool: mindmeister.com6
![Page 7: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/7.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Challenge: Die “perfekte” Navigation
Kleingruppenarbeit: Seitenstruktur einer Schachseite
Ziel:- Inhalt anhand der Navigation strukturieren und auffindbar machen- Erklärende Navigationsnamen für den Webseitenbesucher finden- Pluspunkte: Nicht mehr als drei Navigationsebenen benutzen bei maximal fünf Hauptmenüpunkten
Vorgehen:- Aufteilung in drei Gruppen.- Jede Gruppe wählt ein Thema: Verein, Bezirk, Landesverband- Zeit: 15min
Anschließend kurze Ergebnisvorstellung
7
![Page 8: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/8.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Eigentlich war das so nicht gedacht...
Der heutige Theorieteil: HTML syntaktisch korrekt verwendet!
Quelle: http://www.fernuni-hagen.de/barrierefrei/beispiele.shtml
8
![Page 9: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/9.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
ThesenBilder immer in maximaler Auflösung hochladen.
Der Besucher wird schon warten bis die Seite aufgerufen ist.
Musik mag doch jeder.
9
![Page 10: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/10.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
ThesenJeder freut sich, wenn man seine Inhalte ohne Quellenangabe kopiert.
Kontaktdaten brauche ich nicht, jeder weiß doch wer die Seite gemacht hat.
Funktionsadresse (spielbetrieb@, vorsitzender@) verschleiern, wer dahinter steht.
Kommentare für alle Inhalte fördert die Interaktivität auf der Webseite.
10
![Page 11: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/11.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
ThesenWenn ein Webseitenbenutzer die Suche benutzen muss, ist die Struktur nicht selbsterklärend
Man kann nicht genug verlinken.
Was gelöscht ist, ist gelöscht und muss nicht weiter beachtet werden.
11
![Page 12: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/12.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
ThesenNehmt ein “bekanntes” CMS, das hilft Mitstreitern mitzumachen.
Akkordeon und Slider mit soviel wie möglich Slides bestücken.
Bei Formularen reicht doch das Label damit man weiß was man reinschreibe muss.
12
![Page 13: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/13.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
ThesenAlle Inhalte sind ohne JavaScript und Flash erreichbar.
Alle wichtigen Inhalte sollten auch mobile erreichbar sein
Duplicate Content verhindern (einfachstes Beispiel www. und ohne www.)
13
![Page 14: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/14.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
ThesenEnde des Inhaltes muss nicht Ende der Seite sein!
Ich weiß was die Leute interessiert, da brauche ich keine Analysesoftware.
Dokumentation ist für Warmduscher.
Sicherungen der Webseite macht doch der Hoster.
14
![Page 15: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/15.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
ThesenWerbung finanziert die Webseite, dann darf es auch mal ein wenig mehr sein.
Wiederverwendbarkeit von Inhalten: Webseite, Facebook, Twitter, Newsletter, Integrated Content (RSS-Feeds anderer Webseiten), Pressemitteilungen, …
Technische Spielereinen sind super, je mehr desto sinnvoller ist meine Seite.
Bilder stören nur beim Lesen des Textes.
Soviel Inhalt wie möglich auf kleinsten Raum, damit man gleich alles sieht.15
![Page 16: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/16.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Gute geplant ist die halbe Gewonnen
Eine Webseite ist doch nur Text und Bilder?!
- Inhalte können vorbereitet werden
- Wo soll es überall veröffentlicht werden (Twitter, Facebook, Pinterest)?
- Interview Partner organisieren
- Ideal: Redakteursplan für das komplette Jahr
- Überraschungen vermeiden! 16
![Page 17: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/17.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Beispielsplanung - Aufstellung
17
![Page 18: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/18.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Beispielsplanung - Termine
18
![Page 19: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/19.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Jetzt wird geplantKleingruppenarbeit: Jahresplanung
Ziel:- Einen Überblick zu bekommen, welche zu produzierenden Inhalten anstehen können.- Pluspunkte: Jede Woche min. 1 Eintrag
Vorgehen:- Aufteilung in drei Gruppen.- Jede Gruppe hat ein anderes Thema: Verein, Bezirk, Landesverband- Material: Notizblatt, Stift- Zeit: 10min
Anschließend kurze Ergebnisvorstellung
19
![Page 20: Do ´s and Don ´ts - Deutsche Schachjugend...Deutsche Schachjugend -NÖRT 2016 -Hanau -Erik Kothe Bausteine einer Webseite -Teil 2 - Überschriften (H1 -H6) - Absätze-Links - Punktlisten](https://reader036.vdocuments.net/reader036/viewer/2022081614/5fc9ab640cb5651e6a5afae2/html5/thumbnails/20.jpg)
Deutsche Schachjugend - NÖRT 2016 - Hanau - Erik Kothe
Die letzte Seite
20