SlideShare ist ein Scribd-Unternehmen logo
1 von 88
Downloaden Sie, um offline zu lesen
22. und 23. März 2019, Rathaus Moers,Thomas Tursics
Coding-Workshop
Offener
auchfürAnfänger*innen
Freitag 16:00 Uhr – 19:30 Uhr

Samstag 9:00 Uhr – 12:00 Uhr
• Was sind offene Daten
• Wie finde ich Daten vom Niederrhein
• Welche Werkzeuge brauche ich
• Erste eigene Grafik mit Daten
• Daten und Landkarten
• Wir programmieren eine eigene Landkarte
AGENDA
• Opendata-Aktivist seit 6+ Jahren
• Apps + Webseiten +Visualisierungen mit
Open Data: 20+
• Community +Vernetzung
@tursics
THOMASTURSICS
EINFÜHRUNG IN OPEN DATA
“Offene Daten und Inhalte können frei
verwendet, geändert und von jedermann für
jeden Zweck freigegeben werden”
•
OPENDEFINITION.ORG
NUTZUNGSBEDINGUNGEN
MITVERTRAGSSTRAFE?
Nürnberg


„Die Daten sind nach Abschluß des Projektes auf
allen Datenträgern zu löschen.”
„FürVerstöße des Nutzers wird eineVertragsstrafe
von 2.000 Euro vereinbart.”
NUTZUNGSBEDINGUNGEN
DATEIFORMATE
Sehr geehrter Herr Tursics,
anbei übersenden wir Ihnen die häufigsten
Geburtsnamen in Potsdam seit 2003.Wir
werten jährlich eine csv-Datei aus und
ermitteln so die beliebtestenVornamen für
Potsdam.
CSV
EXCEL
PDF
STRICHLISTE
SCAN
FAX
!!!
• per Brief
• 198 Seiten
• 1 kg Papier
• 25 Tackerklammern
• Jahrgänge 1990 bis 2014 

•
BRIEF
DATEIFORMATE
Irgendwas mit offener Lizenz, PDF
"
#
$
%
&
' Querverlinkung mit Kontext, LOD
Eindeutige URLs für Datensätze, RDF
Offenes Format, CSV
Strukturiert, Excel
Irgendwas im Internet
KEINEN
PERSONENBEZUG
OPEN DATA GESETZ
OPEN DATA GESETZ
EIGENE DATEN SUCHEN
DATENPORTAL
• Stadt offenedaten.moers.de
• ENNI offenedaten.moers.de
• „Hänsel+Gretel“ offenedaten.moers.de
• Sensordaten offenedaten.moers.de
• Telepano offenedaten.moers.de
• Gemeinden open.nrw
• Bundesländer govdata.de
• Bundesbehörden govdata.de
• EU34 europeandataportal.eu
•
DATENPORTAL
• OSM ⇢ openstreetmap.org
• Wikipedia ⇢ wikidata.org
• Wetter, Bahn, ESA, …
• Ratsinformationssysteme
• kleineanfragen.de
• Frag den Staat
MEHR DATEN
BLICK INS DATENPORTAL
BLICK INS DATENPORTAL
BLICK INS DATENPORTAL
BLICK INS DATENPORTAL
„Seit 2017 sind die digitalen Geobasisdaten
des Landes und der Kommunen in
Nordrhein-Westfalen auf dem Open.NRW
Portal und dem Geoportal.NRW kostenfrei
verfügbar.“
- nach 3 Monaten lag das Downloadvolumen
bei 227 Terrabyte
- nach 1 Jahr bei 500 Terrabyte
- bis heute 1 Petabyte
OPEN.NRW PORTAL
• 302x offenedaten.moers.de
• 48x offenesdatenportal.de/organization/krefeld
• 93x opendata.wesel.de
• 100x offenesdatenportal.de/organization/kreis-kleve
• 7x offenesdatenportal.de/organization/kreis-viersen
• Duisburg
• 3069x open.nrw
LOKALE DATENPORTALE
März 2018
• 338x offenedaten.moers.de
• 49x offenesdatenportal.de/organization/krefeld
• 100x opendata.wesel.de
• 136x offenesdatenportal.de/organization/kreis-kleve
• 10x offenesdatenportal.de/organization/kreis-viersen
• 36x opendata-duisburg.de
• 3796x open.nrw
LOKALE DATENPORTALE
März 2019
AUFGABE
Wie viele Thomas und Tom wurden 2018 in Moers und Wesel geboren (und dein eigener
Vorname)
Wo befindet sich die nächste Hundekotstation
Wie viele Schulen hat die Stadt Wesel?
Geologische Karte von Preußen (mit dem Stadtgebiet von Moers)
AUFGABE
Wie viele Thomas und Tom wurden 2018 in Moers und Wesel geboren (und dein eigener
Vorname)
Wo befindet sich die nächste Hundekotstation
Wie viele Schulen hat die Stadt Wesel?
Geologische Karte von Preußen (mit dem Stadtgebiet von Moers)
Moers: 1x Thomas, 9x Tom
Wesel: 1x Thomas, 6x Tom
Am Altmarkt Stadtmitte
Königssee, Zugang zum Denkmal
hundekotstationen: 3 Treffer (Moers + Krefeld)
hundekotstation: 0 Treffer
hundekot: 1 Treffer (Wesel)
15 - „Schulstatistik 2018/2019 für Wesel“
23 - „Schulen in Wesel“
GK 25 PR A - Geologische Karte von Preussen 1:25.000 (analog)
DATENVISUALISIEREN
OPEN GOVERNMENT DATA
Daten von Behörden, Gemeinden,
Städten, Ländern und vom Bund
WAS STECKT IN MEINEM LEITUNGSWASSER?
WARTEZEITEN MOERS
WEIHNACHTSMÄRKTE
JUGEND HACKT 2018, PEACEFINDER
OPEN CULTURE DATA
Daten von Gallerien, Bibliotheken,
Archiven und Museen
ALT-BERLIN, CODING DAVINCI
ZZZWITSCHERWECKER - CODING DAVINCI
CYBERBEETLE - CODING DAVINCI
OPENTRANSIT DATA
Daten vonVerkehrsunternehmen
VERKEHRSZÄHLDATEN - HACKDAY MOERS
TRANSIT HOPPER
ZEITKUGELN, U-BAHNHOF SEESTADT,WIEN
BUS-ABFAHRTSTAFEL - MOERS 2019
OPEN GEO DATA
Daten mit geografischem Bezug
NYT, A MAP OF EVERY BUILDING
NYT, A MAP OF EVERY BUILDING
TEMPELHOFER FELD - MORGENPOST
KASTANIENAPP - OK LAB HEILBRONN
OPEN PRIVATE DATA
Daten von jedermann
THINGS ON BIKE LANES - HAMBURG
JUGEND HACKT 2014,AWEARNESS
MOERSER WETTER
NETZSPINNEN
RB55
RE5 RB12
RB20
RB27
RE3 RB24
RB25
RB26
RE1
RB36
RE4 RE5RE7 RB33RB23
RE1
RB20
RB22
RE4
RB13
RB21
RE2
RB12 RB25
RB26
RB27
RB27
RB27
RB14
RE3 RE7
RB14
RE1
RE1
RE2
RB24
RE6.RB20
RB20 RE5.RB12
RB12
.RB24
RE3.RE5.RB27
RE6.RB20
RE4.RE6.RB10.RB13
RE4.RE6.RB10
RB20
RB23
RB22
RE1.RE7.RB21
RB22.RB33
RE5.RB22 RE7.RB22
RE7.RB14.RB22
RE2
.RB22
.RB24
RE2.RE7.RB14
RE1
RE7.RB14
RE3.RE4.RE5
RE1.RE2.RE7.RB14.RB21
RB22
RE3.RE5.RE6
RE3.RE4.RE5
RB10
RB12.RB24.RB25
RB25
RB26
RE2.RB14
RE2
.RE6
RE4.RB13
RB27
RE2.RE4.RE6.RB10.RB13.RB14
RE3
.RE4
.RE5
.RB10
RB36
RE1.RE2
RB21
RB20
RB27
RE1.RE2.
RB23
RB14
RB20.RB21.RB22
RB22
RB21
RE1.RE2.RE7.RB14
RB10
RB10
RB33
RE1.RE7.RB21.RB22
RB21 RB22
RE6 RB55
RB10
RE6
RB22 RB36
RE3.RE4.RE5.RB10
RB24
RB13
11
11
33
3 3
2
2
22
4
4
:5
:5
:5
:5
eE
eE
6
6
6
6
7
7
7
7
8
88
8
9
9
9
9
1 1
1 1
2
2
bE
bE
2
2
bE
bE
33
33
<
S41
<
S41
<S41
<S41
<S42
<S42
<
S42
<
S42
dF
dG
dF
dG
dF
dF
dG
dG
dE
dE
dE
5 5
55
7
7
gE
gE
7
gE
gE
7
8
8
8
8
88
9 9
9
9
CBAX9
109
TXL
128
TXL 128
X7
171
N7
128
TXL X9 109 128
X9 109
TXL
X7 171 N7
X7 171 N7
X9 109
Schönefeld SXF0A
0A Tegel TXL
<
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4: 4:
4:
4:
4:
4:
4:
4: 4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4: 4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4: 4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4: 4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4: 4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4:
4: 4:
4:
4:
4:
4:
4:
<
>
<
<
<
Velten (Mark)
Bärenklau
Vehlefanz
Sachsenhausen (Nordb)
Templin StadtStralsund/
Rostock
Hohen Neuendorf West Schönwalde (Barnim)
Schönerlinde
Basdorf
Wandlitz
Wandlitzsee
Zühlsdorf
Wensickendorf
Schmachtenhagen
Groß Schönebeck (Schorfheide)
Rüdnitz
Stralsund/Schwedt (Oder) Eberswalde
Werneuchen
Blumberg-Rehhahn
Blumberg
Ahrensfelde Nord
Kostrzyn
(Küstrin)
Fangschleuse
Frankfurt
(Oder)
Eisen-
hütten-
stadt
Niederlehme Zernsdorf
Frankfurt
(Oder)
Cottbus
Senftenberg
Dahlewitz
Rangsdorf
Elsterwerda Wünsdorf-Waldstadt
Thyrow
Jüterbog
Ludwigsfelde-
Struveshof
Medienstadt Babelsberg
Rehbrücke
Wilhelmshorst
Saarmund
Jüterbog
MichendorfSeddinFerch-
Lienewitz
Caputh
Schwielowsee
Caputh-
Geltow
Pirschheide
Park
Sans-
souci
Char-
lotten-
hof
Werder
(Havel)
Branden-
burg
Magde-
burg
Golm
Marquardt
Priort
Wuster-
mark
Rathenow
Brieselang
Wismar
Nauen
Elstal
Dallgow-
Döberitz
Staaken
Albrechtshof
Seegefeld
Falkensee
Finkenkrug
Ludwigsfelde
Ahrensfelde Friedhof
Teltow
Großbeeren
Birkengrund
Lutherstadt Wittenberg/Elsterwerda-Biehla
Kablow
DessauBeelitz-Heilstätten
Zeesen
KremmenWittenberge
Seefeld (Mark)
Rathaus Spandau
Rathaus Steglitz
Alt-Mariendorf
Wittenau
Osloer Str.
Pankow
Schöneweide
Uhlandstr.
Spandau
Strausberg Nord
Hermannstr.
Krumme Lanke
Potsdam Hbf
Alt-Tegel
Hennigsdorf
Oranienburg
Wartenberg
Ahrensfelde
Erkner
Spindlersfeld
Hönow
Flughafen Berlin-Schönefeld
Königs Wusterhausen
Innsbrucker
Platz
Bernau
Teltow Stadt
Blankenfelde (Kr. Teltow-Fläming)
Grünau
Zeuthen
Waidmannslust
Karow
Westkreuz Charlotten-
burg
Hohen Neuendorf
Blankenburg
Treptower Park
Lichtenberg
Ostkreuz
Hauptbahnhof
Westend
Springpfuhl
Alexanderplatz
Südkreuz
Branden-
burger Tor
Wannsee
Nollen-
dorfplatz
Warschauer Str.
Ruhleben
Bundesplatz
Grunewald
Walther-Schreiber-Platz
Britz-Süd
Hackescher Markt
Zoologischer Garten
Schwartz-
kopffstr.
Köpenick
Oskar-Helene-Heim
Mehringdamm Hermannplatz
Lichtenrade
Rudow
Ostbahnhof
Gesundbrunnen
Lichterfelde Süd
Halemweg
Siemens-
dammRohrdammPaulsternstr.HaselhorstZitadelle
Altstadt Spandau
Birkenstr.
Tiergarten
Ernst-Reuter-
Platz
Deutsche
Oper
Richard-Wagner-Platz
Bismarckstr.
Sophie-
Charlotte-Platz
Savignyplatz
Olympia-
Stadion
Neu-Westend
Theodor-Heuss-Platz
Messe Süd
Messe Nord/
ICCHeerstr.
Olympiastadion
Pichelsberg
Stresow
Konstanzer Str.
Fehrbelliner Platz
Spichernstr.
Hohenzollern-
platz
Blissestr.
Berliner Str.
Heidelberger Platz
Rüdesheimer Platz
Breitenbachplatz
Podbielskiallee
Dahlem-Dorf
Thielplatz
Onkel Toms Hütte
Friedrich-Wilhelm-Platz
Zehlendorf
Mexikoplatz
Sundgauer Str.
Botanischer Garten
Schlachtensee
Babelsberg
Attilastr.
Südende
Schichauweg
Gneisenaustr. Südstern
Boddinstr.
Leinestr.
Rathaus
Neukölln
Karl-Marx-
Str.
Neukölln
Grenzallee
Parchimer Allee
Platz der
Luftbrücke
Paradestr.
Tempelhof
Kaiserin-Augusta-Str.
Ullsteinstr.
Westphalweg
Lipschitzallee
Wutzkyallee
Zwickauer Damm
Schlesisches Tor
Heinrich-
Heine-Str.
Schönleinstr.
Prinzenstr.
Weberwiese
Strausberger Platz
Schillingstr.
Märkisches
Museum
Klosterstr.
Spittel-
markt
Hermsdorf
Frohnau
Birkenwerder
Borgsdorf
Lehnitz
Wilhelmsruh
Schönholz
Pankow-Heinersdorf
Buch
Röntgental
Zepernick (bei Bernau)
Bernau-Friedenstal
Reinicken-
dorfer Str. Humboldthain
Voltastr.
Leopoldplatz
Nauener Platz
Afrikanische Str.
Franz-Neumann-Pl.
Residenzstr.
Paracelsus-Bad
Lindauer Allee
Alt-Reinickendorf
Amrumer Str.
Westhafen
Scharnweberstr.
Otisstr.
Holzhauser Str.
Borsigwerke
Rathaus Reinickendorf
Eichborndamm
Tegel
Schulzendorf
Heiligensee
Gehrenseestr.
Mehrower Allee
Raoul-Wallenberg-Str.
Betriebsbahnhof
Rummelsburg
Rummelsburg
Wuhlheide
Hirschgarten
Friedrichshagen
Rahnsdorf
Wilhelmshagen
Plänterwald
Baumschulenweg
Oberspree
Betriebsbahnhof Schöneweide
Elsterwerdaer Platz
Biesdorf-Süd
Biesdorf Wuhletal
Kaulsdorf-Nord
Neue Grottkauer Str.
Cottbusser Platz
Kaulsdorf Mahlsdorf Birkenstein Hoppegarten
(Mark)
Neuenhagen
Louis-Lewin-Str.
Nöldnerplatz
Samariterstr. Magdalenen-
str.
Storkower Str.
Adlershof
Altglienicke
Grünbergallee
Eichwalde
Wildau
Poelchaustr.
Senefelderplatz
Mohrenstr.
Rehberge
Hansaplatz
Bellevue
Bayerischer Platz
Güntzelstr.
Augsburger
Str.
Viktoria-Luise-
Platz
Rathaus
Schöneberg
Eisenacher
Str.
Kleistpark
Möckern-
brücke
Friedenau
Hohenzollerndamm
Osdorfer Str.
Schloßstr.
Mahlow
Bernauer Str.
Eberswalder Str.
Blaschkoallee
Mühlenbeck-MönchmühleSchönfließBergfelde
Fredersdorf
Petershagen Nord
Strausberg
Hegermühle
Strausberg Stadt
Wilmers-
dorfer Str.
Kaiserdamm
Beusselstr.
Friedrichsfelde
Am Schäfersee
Großgörschenstr.
Adenauer-
platz
Mierendorffplatz
Jakob-Kaiser-Platz
Halensee
Marienfelde
Buckower
Chaussee
Johannisthaler
Chaussee
Köllnische Heide
Sonnenallee
Frankfurter Tor
Landsberger Allee
Friedrichs-
felde Ost
Marzahn
Mendelssohn-Bartholdy-
Park
Potsdamer Platz
Anhalter Bhf
MoritzplatzKochstr.
Seestr.
Kurt-Schumacher-Platz
Karl-Bonhoeffer-
Nervenklinik
Pankstr.
Hohenschönhausen
Hellersdorf
Tierpark
Frankfurter
Allee
Greifswalder Str.
Prenzlauer AlleeSchönhauser Allee
Bornholmer
Str.
Wollankstr.
Karlshorst
Rosa-Luxemburg-Platz
Rosenthaler
Platz
Weinmeisterstr.
Oranien-
burger
Str.
Naturkunde-
museum
Nordbahnhof
Oranien-
burger Tor
Vinetastr.
Turmstr.
Kurfürsten-
damm
Yorckstr.
Schöneberg
Alt-Tempelhof
Priesterweg
Lichterfelde West
Lichterfelde Ost
Lankwitz
Feuerbachstr.
Wedding
Yorckstr.
Jannowitz-
brücke
Bundestag
Julius-
Leber-Brücke
Flughafen Berlin Brandenburg Airport
Waßmannsdorf BER
Hausvogtei-
platz
Stadtmitte
Französische Str.
Fried-
richstr.
Nikolassee
Griebnitz-
see
Kurfürsten-
str.
Kottbusser Tor Görlitzer BhfHallesches TorGleis-
dreieckBülow-
str.
Wittenberg-
platz
Jungfernheide
Messe ZOB
ICC
Redaktionsschluss: 15. Januar 2016
© 2016 Kartographie Berliner Verkehrsbetriebe (BVG)
1 1
3 3
dA dA
dB dB
dF
dF
dG
dG
5 5
7 7
gE
8
8
9
9
bE bE
2 2
gE
Wannsee <> Oranienburg
Blankenfelde <> Bernau
Teltow Stadt <> Hennigsdorf
Erkner <> Ostkreuz
Ring im Uhrzeigersinn
Ring gegen Uhrzeigersinn
Flughafen Berlin-Schönefeld <>
Südkreuz (<> Bundesplatz)
Königs Wusterhausen <> Westend
Königs Wusterhausen <> Südkreuz
Spindlersfeld <> Hermannstr.
Spindlersfeld <> Schöneweide
Strausberg Nord <> Spandau
Ahrensfelde <> Potsdam Hbf
Wartenberg <> Westkreuz
Wartenberg <> Lichtenberg
(Zeuthen <>) Grünau <> Birkenwerder
Grünau <> Pankow (<> Birkenwerder)
(Grünau <>) Schöneweide <>
Waidmannslust (nur Mo-Fr) (only Mon-Fri)
Flughafen Berlin-Schönefeld <> Pankow
Flughafen Berlin-Schönefeld <> Treptower Park
dE
Warschauer Straße <> Uhlandstraße
Pankow <> Ruhleben
Nollendorfplatz <> Krumme Lanke
Nollendorfplatz <> Innsbrucker Platz
Hönow <> Alexanderplatz
Brandenburger Tor <> Hauptbahnhof
Alt-Tegel <> Alt-Mariendorf
Rathaus Spandau <> Rudow
Wittenau <> Hermannstraße
Osloer Straße <> Rathaus Steglitz
1 1
2 2
3
5 5
6 6
7 7
8 8
9 9
4
3
S+U-Bahn-Nachtverkehr
nur Fr/Sa ca. 0:30-5:30 Uhr
Sa/So und vor Feiertagen ca. 0:30-7:00 Uhr
S+U-Bahn nighttime traffic
Fri/Sat ca. 0:30 am-5:30 am
Sat/Sun and prior to holidays
ca. 0:30 am-7:00 am
eE BA C
Berlin Liniennetz Routemap
www.s-bahn-berlin.de
S-Bahn Kundentelefon 030 29 74 33 33
Verkehrsverbund Berlin-Brandenburg
VBB.de
VBB Infocenter: 030 25 41 41 41
Service service
Barrierefreier Zugang/Aufzug nur zu den
angegebenen Verkehrsmitteln
Entrance barrier-free/Lift to the stated
means of transportation only
Zugang über Rampe nur zu den
angegebenen Verkehrsmitteln
Entrance via ramp to the stated
means of transportation only
Tarifbereich Berlin
Fare zone
Legende Legend
S+U-Bahn-Linie mit Umsteigemöglichkeit
Urban Rail and Metro line,
change of trains optional
Linie des Bahn-Regionalverkehrs
Line of regional train
Baustelle
Construction site
Bus-Anbindung zum Flughafen
Bus service to airport
Fernbahnhof
Long-distance railway station
Zentraler Omnibusbahnhof
Main bus station
67
ZOB
Barrierefreier Zugang/Aufzug zum Bahnhof
Entrance barrier-free lift to the station
Zugang zum Bahnhof über Rampe
Entrance via ramp to the station
Barrierefrei durch Berlin
Barrier-free Service
4:
0A
RB22RE1 RB22
0b
Stand: 29. Januar 2016
4: 4:4:
Berliner Verkehrsbetriebe (BVG)
www.BVG.de
BVG Call Center: 030 19 44 9
Sommerbad
Olympia-
stadion
Sommerbad
Staaken-West
Strandbad Jungfernheide
Sommerbad
am Insulaner
Sommerbad
„Spucki“
Sommerbad
Mariendorf
Kombibad
Mariendorf
Kinderbad
Monbijou
Kinderbad
Platsch
Sommerbad
Wilmersdorf
Strandbad
Halensee
Sommerbad
Gropiusstadt
Sommerbad
Humboldthain
Sommerbad
Pankow
Sommerbad
Seestrasse
Sommerbad
Neukölln
Sommerbad
Kreuzberg
(Prinzenbad)
Freibad Wendenschloss
Sommerbad Wuhlheide
Grossglienicker See
Großer WukenseeLiepnitzsee
Strandbad Kiessee Schildow
Strandbad Rahmer See
Strandbad Lübars
Wannsee
Schlachten-
see Krumme LankeHeiliger See
Stadtbad Park
Babelsberg
Strandbad Lehnin
am Klostersee
Flughafensee
Plötzensee
Tegeler See
Schermützelsee
Straussee
Dämeritzsee
Kleiner Müggelsee
Müggelsee
Krimnicksee
Flakensee
Flussbad an
der Dahme
Strandbad Grünau
Strandbad Schmökwitz
Berlin Bade-Karte
Badesee / Strandbad
Freibad
INTERAKTIVE GRAFIKEN ERSTELLEN
OFFICE-PAKET
Excel, Numbers, Calc Spreadsheet
Text Editor
ONLINE
https://www.datawrapper.de/

Freemium

10,000 Monthly chart views
https://www.tableau.com/de-de

Testen Sie Tableau jetzt 14 Tage kostenlos.
https://www.google.com/maps/d/

Google My Maps

kostenlos
HANDSON
Account bei DataWrapper holen
Daten aussuchen
Gestallten
Veröffentlichen
HANDSON
<iframe id="datawrapper-chart-ErsN3" src="//datawrapper.dwcdn.net/ErsN3/1/" scrolling="no"
frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;"
height="12115"></iframe><script type="text/javascript">if("undefined"==typeof
window.datawrapper)window.datawrapper={};window.datawrapper["ErsN3"]={},window.datawrapper["
ErsN3"].embedDeltas={"100":12170.5,"200":12142.5,"300":12115.5,"400":12115.5,"500":12115.5,"700":
12115.5,"800":12115.5,"900":12115.5,"1000":
12115.5},window.datawrapper["ErsN3"].iframe=document.getElementById("datawrapper-chart-
ErsN3"),window.datawrapper["ErsN3"].iframe.style.height=window.datawrapper["ErsN3"].embedDeltas
[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["ErsN3"].iframe.offsetWidth/100),100))]
+"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-
height"])for(var b in a.data["datawrapper-
height"])if("ErsN3"==b)window.datawrapper["ErsN3"].iframe.style.height=a.data["datawrapper-height"]
[b]+"px"});</script>
HTML BAUEN
• Markierungssprache
• definiert Struktur und Inhalt
• definiert nicht die Darstellung
• immer in Blöcken denken
HTML
• ist eine Textdatei
• wird mit Tags geschrieben
• Tags tauchen paarweise auf
• Tages kann man schachteln
• es gibt einen <HEAD> und einen <BODY>
• der Browser „verzeiht“ Fehler
HTML
• Stilvorlage
• Browser hat einen Standart-Stil
• Man kann alles überschreiben
CSS
• innerhalb von <STYLE>-Tag
• innerhalb von anderen Tags
• als eigene CSS-Datei
• leider andere Schreibweise
• der letzte Stil gewinnt
CSS
• Dynamisch Dokument ändern
• kann den Inhalt ändern
• kann den Stil ändern
• erlaubt Interaktionen
JAVASCRIPT
• innerhalb von <SCRIPT>-Tag
• als eigene JS-Datei
• leider nochmals andere Schreibweise
• verändert das DOM
JAVASCRIPT
AUFGABE
erstelle deine erste HTML-Datei
zeige eine Überschrift und einen Text
ändere die Farbe
füge einen Rahmen ein
AUFGABE
zeige eine Linie an
zeige ein Bild an
zeige ein Diagramm an
zeige eine Karte an
EINE KARTE
wir brauchen kostenloses Kartematerial (OpenStreetMap)
wir brauchen eine kostenlose JavaScript-Bibliothek (Leaflet JS)
wir wollen 3D-Karten (Mapbox GL JS)
mapbox.com/mapbox-gl-js
HANDSON
noch 2 Links auf die Leaflet-Seite hier einbauen
ERSTE HTML-DATEI
<html>

<body>



<h1>Überschrift</h1>

<p>Hello World</p>

<hr>

<div>Hallo 2</div>



</body>

</html>
<html>

<head>

<link rel="stylesheet" href=„https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity=„sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/
SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>

<script src=„https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity=„sha512-
QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>



<style>

h1 {

background-color: lightsteelblue;

}

p {

border-left: black 1px solid;

padding-left: 10px;

}

#mapid {

height: 180px;

}

</style>

</head>
…
...



<body>

<h1 style="color:darkorchid;" >Überschrift</h1>

<div id="mapid"></div>

<img src=„file:///Users/thomastursics/Pictures/Familienfotos%202016/Thomas.jpg" style="

width: 200px;

border-radius: 50px;

border-top-left-radius: 0;

border: 2px black solid;">

<p>Hello World</p>

<hr>



<iframe id="datawrapper-chart-ErsN3" src="http://datawrapper.dwcdn.net/ErsN3/1/" scrolling="no"
frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="12115"></
iframe><script type="text/javascript">if("undefined"==typeof
window.datawrapper)window.datawrapper={};window.datawrapper["ErsN3"]={},window.datawrapper["ErsN3"].embedDe
ltas={"100":12170.5,"200":12142.5,"300":12115.5,"400":12115.5,"500":12115.5,"700":12115.5,"800":
12115.5,"900":12115.5,"1000":
12115.5},window.datawrapper["ErsN3"].iframe=document.getElementById("datawrapper-chart-
ErsN3"),window.datawrapper["ErsN3"].iframe.style.height=window.datawrapper["ErsN3"].embedDeltas[Math.min(1e
3,Math.max(100*Math.floor(window.datawrapper["ErsN3"].iframe.offsetWidth/100),100))]
+"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-
height"])for(var b in a.data["datawrapper-
height"])if("ErsN3"==b)window.datawrapper["ErsN3"].iframe.style.height=a.data["datawrapper-height"][b]
+"px"});</script>



...
...



<script>



var mymap = L.map('mapid').setView([51.45354266285481, 6.626253812538288], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?
access_token={accessToken}', {

attribution: 'Map data &copy; <a href="https://
www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://
creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://
www.mapbox.com/">Mapbox</a>',

maxZoom: 18,

id: 'mapbox.streets',

accessToken: 'pk.eyJ1IjoidHVyc2ljcyIsImEiOiI1UWlEY3RNIn0.U9sg8F_23xWXLn4QdfZeqg'

}).addTo(mymap);



</script>



</body>

</html>
Open Data- und HTML-Coding-Workshop
Open Data- und HTML-Coding-Workshop

Weitere ähnliche Inhalte

Ähnlich wie Open Data- und HTML-Coding-Workshop

Open Data Day 2018 in Köln
Open Data Day 2018 in KölnOpen Data Day 2018 in Köln
Open Data Day 2018 in KölnThomas Tursics
 
Open Data in Österreich - Kür oder Pflicht
Open Data in Österreich - Kür oder PflichtOpen Data in Österreich - Kür oder Pflicht
Open Data in Österreich - Kür oder PflichtOGD-DACHLI Konferenzreihe
 
Vo gis open_data_schweiz_20141120
Vo gis open_data_schweiz_20141120Vo gis open_data_schweiz_20141120
Vo gis open_data_schweiz_20141120Andre Golliez
 
23. Open Government - Plattform Wien
23. Open Government - Plattform Wien23. Open Government - Plattform Wien
23. Open Government - Plattform WienStadt Wien
 
OkLab Leipzig (state: 2017)
OkLab Leipzig (state: 2017)OkLab Leipzig (state: 2017)
OkLab Leipzig (state: 2017)joergreichert
 
Open Data auf dem Webmontag in Nürnberg
Open Data auf dem Webmontag in NürnbergOpen Data auf dem Webmontag in Nürnberg
Open Data auf dem Webmontag in NürnbergMarkus Teschner
 
#SOMEXcircle “Open Data – alles offen oder was?” – André Golliez
#SOMEXcircle “Open Data – alles offen oder was?” – André Golliez#SOMEXcircle “Open Data – alles offen oder was?” – André Golliez
#SOMEXcircle “Open Data – alles offen oder was?” – André GolliezSOMEXCLOUD
 
Somex circle open_data_20160123
Somex circle open_data_20160123Somex circle open_data_20160123
Somex circle open_data_20160123Andre Golliez
 
Wie offene Daten in Berlin helfen
Wie offene Daten in Berlin helfenWie offene Daten in Berlin helfen
Wie offene Daten in Berlin helfenThomas Tursics
 
OSenR Dipl.-Ing. Johann Mittheisz (Magistratsdirektion der Stadt Wien - CIO)
OSenR Dipl.-Ing. Johann Mittheisz (Magistratsdirektion der Stadt Wien - CIO)OSenR Dipl.-Ing. Johann Mittheisz (Magistratsdirektion der Stadt Wien - CIO)
OSenR Dipl.-Ing. Johann Mittheisz (Magistratsdirektion der Stadt Wien - CIO)Agenda Europe 2035
 
Open Data mit Daten vom Bund
Open Data mit Daten vom BundOpen Data mit Daten vom Bund
Open Data mit Daten vom BundThomas Tursics
 
26. Open Government-Plattform Wien #OpenDataDay
26. Open Government-Plattform Wien #OpenDataDay26. Open Government-Plattform Wien #OpenDataDay
26. Open Government-Plattform Wien #OpenDataDayStadt Wien
 
Open Data. frei verfügbar, frei nutzbar - was tun damit?
Open Data. frei verfügbar, frei nutzbar - was tun damit?Open Data. frei verfügbar, frei nutzbar - was tun damit?
Open Data. frei verfügbar, frei nutzbar - was tun damit?Andre Golliez
 
Vorstellung DINAcon, Parldigi, Forschungsstelle Digitale Nachhaltigkeit und C...
Vorstellung DINAcon, Parldigi, Forschungsstelle Digitale Nachhaltigkeit und C...Vorstellung DINAcon, Parldigi, Forschungsstelle Digitale Nachhaltigkeit und C...
Vorstellung DINAcon, Parldigi, Forschungsstelle Digitale Nachhaltigkeit und C...Matthias Stürmer
 
Crowdsourcing speedlab
Crowdsourcing speedlabCrowdsourcing speedlab
Crowdsourcing speedlabUlrike Langer
 
2022_46.OpenDataMeetUp.pdf
2022_46.OpenDataMeetUp.pdf2022_46.OpenDataMeetUp.pdf
2022_46.OpenDataMeetUp.pdfStadt Wien
 
Sst open data und nationale dateninfrastruktur 20150824
Sst open data und nationale dateninfrastruktur 20150824Sst open data und nationale dateninfrastruktur 20150824
Sst open data und nationale dateninfrastruktur 20150824Andre Golliez
 
GI2016 final programm &amp; proceedings of abstracts &amp; summaries
GI2016 final programm &amp; proceedings of abstracts &amp; summariesGI2016 final programm &amp; proceedings of abstracts &amp; summaries
GI2016 final programm &amp; proceedings of abstracts &amp; summariesIGN Vorstand
 

Ähnlich wie Open Data- und HTML-Coding-Workshop (20)

Open Data Day 2018 in Köln
Open Data Day 2018 in KölnOpen Data Day 2018 in Köln
Open Data Day 2018 in Köln
 
Open Data Apps
Open Data AppsOpen Data Apps
Open Data Apps
 
Open Data in Österreich - Kür oder Pflicht
Open Data in Österreich - Kür oder PflichtOpen Data in Österreich - Kür oder Pflicht
Open Data in Österreich - Kür oder Pflicht
 
Vo gis open_data_schweiz_20141120
Vo gis open_data_schweiz_20141120Vo gis open_data_schweiz_20141120
Vo gis open_data_schweiz_20141120
 
23. Open Government - Plattform Wien
23. Open Government - Plattform Wien23. Open Government - Plattform Wien
23. Open Government - Plattform Wien
 
OkLab Leipzig (state: 2017)
OkLab Leipzig (state: 2017)OkLab Leipzig (state: 2017)
OkLab Leipzig (state: 2017)
 
Open Data auf dem Webmontag in Nürnberg
Open Data auf dem Webmontag in NürnbergOpen Data auf dem Webmontag in Nürnberg
Open Data auf dem Webmontag in Nürnberg
 
#SOMEXcircle “Open Data – alles offen oder was?” – André Golliez
#SOMEXcircle “Open Data – alles offen oder was?” – André Golliez#SOMEXcircle “Open Data – alles offen oder was?” – André Golliez
#SOMEXcircle “Open Data – alles offen oder was?” – André Golliez
 
Somex circle open_data_20160123
Somex circle open_data_20160123Somex circle open_data_20160123
Somex circle open_data_20160123
 
Wie offene Daten in Berlin helfen
Wie offene Daten in Berlin helfenWie offene Daten in Berlin helfen
Wie offene Daten in Berlin helfen
 
OSenR Dipl.-Ing. Johann Mittheisz (Magistratsdirektion der Stadt Wien - CIO)
OSenR Dipl.-Ing. Johann Mittheisz (Magistratsdirektion der Stadt Wien - CIO)OSenR Dipl.-Ing. Johann Mittheisz (Magistratsdirektion der Stadt Wien - CIO)
OSenR Dipl.-Ing. Johann Mittheisz (Magistratsdirektion der Stadt Wien - CIO)
 
OKLab Leipzig 2021
OKLab Leipzig 2021OKLab Leipzig 2021
OKLab Leipzig 2021
 
Open Data mit Daten vom Bund
Open Data mit Daten vom BundOpen Data mit Daten vom Bund
Open Data mit Daten vom Bund
 
26. Open Government-Plattform Wien #OpenDataDay
26. Open Government-Plattform Wien #OpenDataDay26. Open Government-Plattform Wien #OpenDataDay
26. Open Government-Plattform Wien #OpenDataDay
 
Open Data. frei verfügbar, frei nutzbar - was tun damit?
Open Data. frei verfügbar, frei nutzbar - was tun damit?Open Data. frei verfügbar, frei nutzbar - was tun damit?
Open Data. frei verfügbar, frei nutzbar - was tun damit?
 
Vorstellung DINAcon, Parldigi, Forschungsstelle Digitale Nachhaltigkeit und C...
Vorstellung DINAcon, Parldigi, Forschungsstelle Digitale Nachhaltigkeit und C...Vorstellung DINAcon, Parldigi, Forschungsstelle Digitale Nachhaltigkeit und C...
Vorstellung DINAcon, Parldigi, Forschungsstelle Digitale Nachhaltigkeit und C...
 
Crowdsourcing speedlab
Crowdsourcing speedlabCrowdsourcing speedlab
Crowdsourcing speedlab
 
2022_46.OpenDataMeetUp.pdf
2022_46.OpenDataMeetUp.pdf2022_46.OpenDataMeetUp.pdf
2022_46.OpenDataMeetUp.pdf
 
Sst open data und nationale dateninfrastruktur 20150824
Sst open data und nationale dateninfrastruktur 20150824Sst open data und nationale dateninfrastruktur 20150824
Sst open data und nationale dateninfrastruktur 20150824
 
GI2016 final programm &amp; proceedings of abstracts &amp; summaries
GI2016 final programm &amp; proceedings of abstracts &amp; summariesGI2016 final programm &amp; proceedings of abstracts &amp; summaries
GI2016 final programm &amp; proceedings of abstracts &amp; summaries
 

Mehr von Thomas Tursics

Auf der anderen Seite der Lizenzen
Auf der anderen Seite der LizenzenAuf der anderen Seite der Lizenzen
Auf der anderen Seite der LizenzenThomas Tursics
 
Best practices für Open Data-Anwendungen
Best practices für Open Data-AnwendungenBest practices für Open Data-Anwendungen
Best practices für Open Data-AnwendungenThomas Tursics
 
Was sind offene Daten?
Was sind offene Daten?Was sind offene Daten?
Was sind offene Daten?Thomas Tursics
 
Jugend hackt - Open Data
Jugend hackt - Open DataJugend hackt - Open Data
Jugend hackt - Open DataThomas Tursics
 
Das ABC der offenen Daten
Das ABC der offenen DatenDas ABC der offenen Daten
Das ABC der offenen DatenThomas Tursics
 
Wie kaputt ist deine Schule?
Wie kaputt ist deine Schule?Wie kaputt ist deine Schule?
Wie kaputt ist deine Schule?Thomas Tursics
 
Open Data in der Schulverwaltung
Open Data in der SchulverwaltungOpen Data in der Schulverwaltung
Open Data in der SchulverwaltungThomas Tursics
 
ABC des Wissens - O wie Open Data
ABC des Wissens - O wie Open DataABC des Wissens - O wie Open Data
ABC des Wissens - O wie Open DataThomas Tursics
 
Open Data Barcamp Potsdam
Open Data Barcamp PotsdamOpen Data Barcamp Potsdam
Open Data Barcamp PotsdamThomas Tursics
 
Open Data für Dummies
Open Data für DummiesOpen Data für Dummies
Open Data für DummiesThomas Tursics
 
Open Data, Hochschule für Technik und Wirtschaft Berlin
Open Data, Hochschule für Technik und Wirtschaft BerlinOpen Data, Hochschule für Technik und Wirtschaft Berlin
Open Data, Hochschule für Technik und Wirtschaft BerlinThomas Tursics
 
Code for Berlin bei Open Data Day Moers 2015
Code for Berlin bei Open Data Day Moers 2015Code for Berlin bei Open Data Day Moers 2015
Code for Berlin bei Open Data Day Moers 2015Thomas Tursics
 
Open Data aus Sicht eines Entwicklers
Open Data aus Sicht eines EntwicklersOpen Data aus Sicht eines Entwicklers
Open Data aus Sicht eines EntwicklersThomas Tursics
 

Mehr von Thomas Tursics (15)

Auf der anderen Seite der Lizenzen
Auf der anderen Seite der LizenzenAuf der anderen Seite der Lizenzen
Auf der anderen Seite der Lizenzen
 
Best practices für Open Data-Anwendungen
Best practices für Open Data-AnwendungenBest practices für Open Data-Anwendungen
Best practices für Open Data-Anwendungen
 
Was sind offene Daten?
Was sind offene Daten?Was sind offene Daten?
Was sind offene Daten?
 
Jugend hackt - Open Data
Jugend hackt - Open DataJugend hackt - Open Data
Jugend hackt - Open Data
 
Das ABC der offenen Daten
Das ABC der offenen DatenDas ABC der offenen Daten
Das ABC der offenen Daten
 
Wie kaputt ist deine Schule?
Wie kaputt ist deine Schule?Wie kaputt ist deine Schule?
Wie kaputt ist deine Schule?
 
Open Tech Summit '17
Open Tech Summit '17Open Tech Summit '17
Open Tech Summit '17
 
Open Data in der Schulverwaltung
Open Data in der SchulverwaltungOpen Data in der Schulverwaltung
Open Data in der Schulverwaltung
 
ABC des Wissens - O wie Open Data
ABC des Wissens - O wie Open DataABC des Wissens - O wie Open Data
ABC des Wissens - O wie Open Data
 
Open Data Barcamp Potsdam
Open Data Barcamp PotsdamOpen Data Barcamp Potsdam
Open Data Barcamp Potsdam
 
How to Open data
How to Open dataHow to Open data
How to Open data
 
Open Data für Dummies
Open Data für DummiesOpen Data für Dummies
Open Data für Dummies
 
Open Data, Hochschule für Technik und Wirtschaft Berlin
Open Data, Hochschule für Technik und Wirtschaft BerlinOpen Data, Hochschule für Technik und Wirtschaft Berlin
Open Data, Hochschule für Technik und Wirtschaft Berlin
 
Code for Berlin bei Open Data Day Moers 2015
Code for Berlin bei Open Data Day Moers 2015Code for Berlin bei Open Data Day Moers 2015
Code for Berlin bei Open Data Day Moers 2015
 
Open Data aus Sicht eines Entwicklers
Open Data aus Sicht eines EntwicklersOpen Data aus Sicht eines Entwicklers
Open Data aus Sicht eines Entwicklers
 

Open Data- und HTML-Coding-Workshop

  • 1. 22. und 23. März 2019, Rathaus Moers,Thomas Tursics Coding-Workshop Offener auchfürAnfänger*innen
  • 2. Freitag 16:00 Uhr – 19:30 Uhr
 Samstag 9:00 Uhr – 12:00 Uhr • Was sind offene Daten • Wie finde ich Daten vom Niederrhein • Welche Werkzeuge brauche ich • Erste eigene Grafik mit Daten • Daten und Landkarten • Wir programmieren eine eigene Landkarte AGENDA
  • 3. • Opendata-Aktivist seit 6+ Jahren • Apps + Webseiten +Visualisierungen mit Open Data: 20+ • Community +Vernetzung @tursics THOMASTURSICS
  • 5. “Offene Daten und Inhalte können frei verwendet, geändert und von jedermann für jeden Zweck freigegeben werden” • OPENDEFINITION.ORG
  • 7. MITVERTRAGSSTRAFE? Nürnberg 
 „Die Daten sind nach Abschluß des Projektes auf allen Datenträgern zu löschen.” „FürVerstöße des Nutzers wird eineVertragsstrafe von 2.000 Euro vereinbart.”
  • 10. Sehr geehrter Herr Tursics, anbei übersenden wir Ihnen die häufigsten Geburtsnamen in Potsdam seit 2003.Wir werten jährlich eine csv-Datei aus und ermitteln so die beliebtestenVornamen für Potsdam. CSV
  • 11. EXCEL
  • 12. PDF
  • 14. SCAN
  • 15. FAX
  • 16. !!!
  • 17. • per Brief • 198 Seiten • 1 kg Papier • 25 Tackerklammern • Jahrgänge 1990 bis 2014 
 • BRIEF
  • 18. DATEIFORMATE Irgendwas mit offener Lizenz, PDF " # $ % & ' Querverlinkung mit Kontext, LOD Eindeutige URLs für Datensätze, RDF Offenes Format, CSV Strukturiert, Excel Irgendwas im Internet
  • 24. • Stadt offenedaten.moers.de • ENNI offenedaten.moers.de • „Hänsel+Gretel“ offenedaten.moers.de • Sensordaten offenedaten.moers.de • Telepano offenedaten.moers.de • Gemeinden open.nrw • Bundesländer govdata.de • Bundesbehörden govdata.de • EU34 europeandataportal.eu • DATENPORTAL
  • 25. • OSM ⇢ openstreetmap.org • Wikipedia ⇢ wikidata.org • Wetter, Bahn, ESA, … • Ratsinformationssysteme • kleineanfragen.de • Frag den Staat MEHR DATEN
  • 26.
  • 31. „Seit 2017 sind die digitalen Geobasisdaten des Landes und der Kommunen in Nordrhein-Westfalen auf dem Open.NRW Portal und dem Geoportal.NRW kostenfrei verfügbar.“ - nach 3 Monaten lag das Downloadvolumen bei 227 Terrabyte - nach 1 Jahr bei 500 Terrabyte - bis heute 1 Petabyte OPEN.NRW PORTAL
  • 32. • 302x offenedaten.moers.de • 48x offenesdatenportal.de/organization/krefeld • 93x opendata.wesel.de • 100x offenesdatenportal.de/organization/kreis-kleve • 7x offenesdatenportal.de/organization/kreis-viersen • Duisburg • 3069x open.nrw LOKALE DATENPORTALE März 2018
  • 33. • 338x offenedaten.moers.de • 49x offenesdatenportal.de/organization/krefeld • 100x opendata.wesel.de • 136x offenesdatenportal.de/organization/kreis-kleve • 10x offenesdatenportal.de/organization/kreis-viersen • 36x opendata-duisburg.de • 3796x open.nrw LOKALE DATENPORTALE März 2019
  • 34. AUFGABE Wie viele Thomas und Tom wurden 2018 in Moers und Wesel geboren (und dein eigener Vorname) Wo befindet sich die nächste Hundekotstation Wie viele Schulen hat die Stadt Wesel? Geologische Karte von Preußen (mit dem Stadtgebiet von Moers)
  • 35. AUFGABE Wie viele Thomas und Tom wurden 2018 in Moers und Wesel geboren (und dein eigener Vorname) Wo befindet sich die nächste Hundekotstation Wie viele Schulen hat die Stadt Wesel? Geologische Karte von Preußen (mit dem Stadtgebiet von Moers) Moers: 1x Thomas, 9x Tom Wesel: 1x Thomas, 6x Tom Am Altmarkt Stadtmitte Königssee, Zugang zum Denkmal hundekotstationen: 3 Treffer (Moers + Krefeld) hundekotstation: 0 Treffer hundekot: 1 Treffer (Wesel) 15 - „Schulstatistik 2018/2019 für Wesel“ 23 - „Schulen in Wesel“ GK 25 PR A - Geologische Karte von Preussen 1:25.000 (analog)
  • 37. OPEN GOVERNMENT DATA Daten von Behörden, Gemeinden, Städten, Ländern und vom Bund
  • 38. WAS STECKT IN MEINEM LEITUNGSWASSER?
  • 41. JUGEND HACKT 2018, PEACEFINDER
  • 42. OPEN CULTURE DATA Daten von Gallerien, Bibliotheken, Archiven und Museen
  • 51. OPEN GEO DATA Daten mit geografischem Bezug
  • 52. NYT, A MAP OF EVERY BUILDING
  • 53. NYT, A MAP OF EVERY BUILDING
  • 54. TEMPELHOFER FELD - MORGENPOST
  • 55. KASTANIENAPP - OK LAB HEILBRONN
  • 56. OPEN PRIVATE DATA Daten von jedermann
  • 57. THINGS ON BIKE LANES - HAMBURG
  • 60. NETZSPINNEN RB55 RE5 RB12 RB20 RB27 RE3 RB24 RB25 RB26 RE1 RB36 RE4 RE5RE7 RB33RB23 RE1 RB20 RB22 RE4 RB13 RB21 RE2 RB12 RB25 RB26 RB27 RB27 RB27 RB14 RE3 RE7 RB14 RE1 RE1 RE2 RB24 RE6.RB20 RB20 RE5.RB12 RB12 .RB24 RE3.RE5.RB27 RE6.RB20 RE4.RE6.RB10.RB13 RE4.RE6.RB10 RB20 RB23 RB22 RE1.RE7.RB21 RB22.RB33 RE5.RB22 RE7.RB22 RE7.RB14.RB22 RE2 .RB22 .RB24 RE2.RE7.RB14 RE1 RE7.RB14 RE3.RE4.RE5 RE1.RE2.RE7.RB14.RB21 RB22 RE3.RE5.RE6 RE3.RE4.RE5 RB10 RB12.RB24.RB25 RB25 RB26 RE2.RB14 RE2 .RE6 RE4.RB13 RB27 RE2.RE4.RE6.RB10.RB13.RB14 RE3 .RE4 .RE5 .RB10 RB36 RE1.RE2 RB21 RB20 RB27 RE1.RE2. RB23 RB14 RB20.RB21.RB22 RB22 RB21 RE1.RE2.RE7.RB14 RB10 RB10 RB33 RE1.RE7.RB21.RB22 RB21 RB22 RE6 RB55 RB10 RE6 RB22 RB36 RE3.RE4.RE5.RB10 RB24 RB13 11 11 33 3 3 2 2 22 4 4 :5 :5 :5 :5 eE eE 6 6 6 6 7 7 7 7 8 88 8 9 9 9 9 1 1 1 1 2 2 bE bE 2 2 bE bE 33 33 < S41 < S41 <S41 <S41 <S42 <S42 < S42 < S42 dF dG dF dG dF dF dG dG dE dE dE 5 5 55 7 7 gE gE 7 gE gE 7 8 8 8 8 88 9 9 9 9 CBAX9 109 TXL 128 TXL 128 X7 171 N7 128 TXL X9 109 128 X9 109 TXL X7 171 N7 X7 171 N7 X9 109 Schönefeld SXF0A 0A Tegel TXL < 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4:4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: 4: < > < < < Velten (Mark) Bärenklau Vehlefanz Sachsenhausen (Nordb) Templin StadtStralsund/ Rostock Hohen Neuendorf West Schönwalde (Barnim) Schönerlinde Basdorf Wandlitz Wandlitzsee Zühlsdorf Wensickendorf Schmachtenhagen Groß Schönebeck (Schorfheide) Rüdnitz Stralsund/Schwedt (Oder) Eberswalde Werneuchen Blumberg-Rehhahn Blumberg Ahrensfelde Nord Kostrzyn (Küstrin) Fangschleuse Frankfurt (Oder) Eisen- hütten- stadt Niederlehme Zernsdorf Frankfurt (Oder) Cottbus Senftenberg Dahlewitz Rangsdorf Elsterwerda Wünsdorf-Waldstadt Thyrow Jüterbog Ludwigsfelde- Struveshof Medienstadt Babelsberg Rehbrücke Wilhelmshorst Saarmund Jüterbog MichendorfSeddinFerch- Lienewitz Caputh Schwielowsee Caputh- Geltow Pirschheide Park Sans- souci Char- lotten- hof Werder (Havel) Branden- burg Magde- burg Golm Marquardt Priort Wuster- mark Rathenow Brieselang Wismar Nauen Elstal Dallgow- Döberitz Staaken Albrechtshof Seegefeld Falkensee Finkenkrug Ludwigsfelde Ahrensfelde Friedhof Teltow Großbeeren Birkengrund Lutherstadt Wittenberg/Elsterwerda-Biehla Kablow DessauBeelitz-Heilstätten Zeesen KremmenWittenberge Seefeld (Mark) Rathaus Spandau Rathaus Steglitz Alt-Mariendorf Wittenau Osloer Str. Pankow Schöneweide Uhlandstr. Spandau Strausberg Nord Hermannstr. Krumme Lanke Potsdam Hbf Alt-Tegel Hennigsdorf Oranienburg Wartenberg Ahrensfelde Erkner Spindlersfeld Hönow Flughafen Berlin-Schönefeld Königs Wusterhausen Innsbrucker Platz Bernau Teltow Stadt Blankenfelde (Kr. Teltow-Fläming) Grünau Zeuthen Waidmannslust Karow Westkreuz Charlotten- burg Hohen Neuendorf Blankenburg Treptower Park Lichtenberg Ostkreuz Hauptbahnhof Westend Springpfuhl Alexanderplatz Südkreuz Branden- burger Tor Wannsee Nollen- dorfplatz Warschauer Str. Ruhleben Bundesplatz Grunewald Walther-Schreiber-Platz Britz-Süd Hackescher Markt Zoologischer Garten Schwartz- kopffstr. Köpenick Oskar-Helene-Heim Mehringdamm Hermannplatz Lichtenrade Rudow Ostbahnhof Gesundbrunnen Lichterfelde Süd Halemweg Siemens- dammRohrdammPaulsternstr.HaselhorstZitadelle Altstadt Spandau Birkenstr. Tiergarten Ernst-Reuter- Platz Deutsche Oper Richard-Wagner-Platz Bismarckstr. Sophie- Charlotte-Platz Savignyplatz Olympia- Stadion Neu-Westend Theodor-Heuss-Platz Messe Süd Messe Nord/ ICCHeerstr. Olympiastadion Pichelsberg Stresow Konstanzer Str. Fehrbelliner Platz Spichernstr. Hohenzollern- platz Blissestr. Berliner Str. Heidelberger Platz Rüdesheimer Platz Breitenbachplatz Podbielskiallee Dahlem-Dorf Thielplatz Onkel Toms Hütte Friedrich-Wilhelm-Platz Zehlendorf Mexikoplatz Sundgauer Str. Botanischer Garten Schlachtensee Babelsberg Attilastr. Südende Schichauweg Gneisenaustr. Südstern Boddinstr. Leinestr. Rathaus Neukölln Karl-Marx- Str. Neukölln Grenzallee Parchimer Allee Platz der Luftbrücke Paradestr. Tempelhof Kaiserin-Augusta-Str. Ullsteinstr. Westphalweg Lipschitzallee Wutzkyallee Zwickauer Damm Schlesisches Tor Heinrich- Heine-Str. Schönleinstr. Prinzenstr. Weberwiese Strausberger Platz Schillingstr. Märkisches Museum Klosterstr. Spittel- markt Hermsdorf Frohnau Birkenwerder Borgsdorf Lehnitz Wilhelmsruh Schönholz Pankow-Heinersdorf Buch Röntgental Zepernick (bei Bernau) Bernau-Friedenstal Reinicken- dorfer Str. Humboldthain Voltastr. Leopoldplatz Nauener Platz Afrikanische Str. Franz-Neumann-Pl. Residenzstr. Paracelsus-Bad Lindauer Allee Alt-Reinickendorf Amrumer Str. Westhafen Scharnweberstr. Otisstr. Holzhauser Str. Borsigwerke Rathaus Reinickendorf Eichborndamm Tegel Schulzendorf Heiligensee Gehrenseestr. Mehrower Allee Raoul-Wallenberg-Str. Betriebsbahnhof Rummelsburg Rummelsburg Wuhlheide Hirschgarten Friedrichshagen Rahnsdorf Wilhelmshagen Plänterwald Baumschulenweg Oberspree Betriebsbahnhof Schöneweide Elsterwerdaer Platz Biesdorf-Süd Biesdorf Wuhletal Kaulsdorf-Nord Neue Grottkauer Str. Cottbusser Platz Kaulsdorf Mahlsdorf Birkenstein Hoppegarten (Mark) Neuenhagen Louis-Lewin-Str. Nöldnerplatz Samariterstr. Magdalenen- str. Storkower Str. Adlershof Altglienicke Grünbergallee Eichwalde Wildau Poelchaustr. Senefelderplatz Mohrenstr. Rehberge Hansaplatz Bellevue Bayerischer Platz Güntzelstr. Augsburger Str. Viktoria-Luise- Platz Rathaus Schöneberg Eisenacher Str. Kleistpark Möckern- brücke Friedenau Hohenzollerndamm Osdorfer Str. Schloßstr. Mahlow Bernauer Str. Eberswalder Str. Blaschkoallee Mühlenbeck-MönchmühleSchönfließBergfelde Fredersdorf Petershagen Nord Strausberg Hegermühle Strausberg Stadt Wilmers- dorfer Str. Kaiserdamm Beusselstr. Friedrichsfelde Am Schäfersee Großgörschenstr. Adenauer- platz Mierendorffplatz Jakob-Kaiser-Platz Halensee Marienfelde Buckower Chaussee Johannisthaler Chaussee Köllnische Heide Sonnenallee Frankfurter Tor Landsberger Allee Friedrichs- felde Ost Marzahn Mendelssohn-Bartholdy- Park Potsdamer Platz Anhalter Bhf MoritzplatzKochstr. Seestr. Kurt-Schumacher-Platz Karl-Bonhoeffer- Nervenklinik Pankstr. Hohenschönhausen Hellersdorf Tierpark Frankfurter Allee Greifswalder Str. Prenzlauer AlleeSchönhauser Allee Bornholmer Str. Wollankstr. Karlshorst Rosa-Luxemburg-Platz Rosenthaler Platz Weinmeisterstr. Oranien- burger Str. Naturkunde- museum Nordbahnhof Oranien- burger Tor Vinetastr. Turmstr. Kurfürsten- damm Yorckstr. Schöneberg Alt-Tempelhof Priesterweg Lichterfelde West Lichterfelde Ost Lankwitz Feuerbachstr. Wedding Yorckstr. Jannowitz- brücke Bundestag Julius- Leber-Brücke Flughafen Berlin Brandenburg Airport Waßmannsdorf BER Hausvogtei- platz Stadtmitte Französische Str. Fried- richstr. Nikolassee Griebnitz- see Kurfürsten- str. Kottbusser Tor Görlitzer BhfHallesches TorGleis- dreieckBülow- str. Wittenberg- platz Jungfernheide Messe ZOB ICC Redaktionsschluss: 15. Januar 2016 © 2016 Kartographie Berliner Verkehrsbetriebe (BVG) 1 1 3 3 dA dA dB dB dF dF dG dG 5 5 7 7 gE 8 8 9 9 bE bE 2 2 gE Wannsee <> Oranienburg Blankenfelde <> Bernau Teltow Stadt <> Hennigsdorf Erkner <> Ostkreuz Ring im Uhrzeigersinn Ring gegen Uhrzeigersinn Flughafen Berlin-Schönefeld <> Südkreuz (<> Bundesplatz) Königs Wusterhausen <> Westend Königs Wusterhausen <> Südkreuz Spindlersfeld <> Hermannstr. Spindlersfeld <> Schöneweide Strausberg Nord <> Spandau Ahrensfelde <> Potsdam Hbf Wartenberg <> Westkreuz Wartenberg <> Lichtenberg (Zeuthen <>) Grünau <> Birkenwerder Grünau <> Pankow (<> Birkenwerder) (Grünau <>) Schöneweide <> Waidmannslust (nur Mo-Fr) (only Mon-Fri) Flughafen Berlin-Schönefeld <> Pankow Flughafen Berlin-Schönefeld <> Treptower Park dE Warschauer Straße <> Uhlandstraße Pankow <> Ruhleben Nollendorfplatz <> Krumme Lanke Nollendorfplatz <> Innsbrucker Platz Hönow <> Alexanderplatz Brandenburger Tor <> Hauptbahnhof Alt-Tegel <> Alt-Mariendorf Rathaus Spandau <> Rudow Wittenau <> Hermannstraße Osloer Straße <> Rathaus Steglitz 1 1 2 2 3 5 5 6 6 7 7 8 8 9 9 4 3 S+U-Bahn-Nachtverkehr nur Fr/Sa ca. 0:30-5:30 Uhr Sa/So und vor Feiertagen ca. 0:30-7:00 Uhr S+U-Bahn nighttime traffic Fri/Sat ca. 0:30 am-5:30 am Sat/Sun and prior to holidays ca. 0:30 am-7:00 am eE BA C Berlin Liniennetz Routemap www.s-bahn-berlin.de S-Bahn Kundentelefon 030 29 74 33 33 Verkehrsverbund Berlin-Brandenburg VBB.de VBB Infocenter: 030 25 41 41 41 Service service Barrierefreier Zugang/Aufzug nur zu den angegebenen Verkehrsmitteln Entrance barrier-free/Lift to the stated means of transportation only Zugang über Rampe nur zu den angegebenen Verkehrsmitteln Entrance via ramp to the stated means of transportation only Tarifbereich Berlin Fare zone Legende Legend S+U-Bahn-Linie mit Umsteigemöglichkeit Urban Rail and Metro line, change of trains optional Linie des Bahn-Regionalverkehrs Line of regional train Baustelle Construction site Bus-Anbindung zum Flughafen Bus service to airport Fernbahnhof Long-distance railway station Zentraler Omnibusbahnhof Main bus station 67 ZOB Barrierefreier Zugang/Aufzug zum Bahnhof Entrance barrier-free lift to the station Zugang zum Bahnhof über Rampe Entrance via ramp to the station Barrierefrei durch Berlin Barrier-free Service 4: 0A RB22RE1 RB22 0b Stand: 29. Januar 2016 4: 4:4: Berliner Verkehrsbetriebe (BVG) www.BVG.de BVG Call Center: 030 19 44 9
  • 61. Sommerbad Olympia- stadion Sommerbad Staaken-West Strandbad Jungfernheide Sommerbad am Insulaner Sommerbad „Spucki“ Sommerbad Mariendorf Kombibad Mariendorf Kinderbad Monbijou Kinderbad Platsch Sommerbad Wilmersdorf Strandbad Halensee Sommerbad Gropiusstadt Sommerbad Humboldthain Sommerbad Pankow Sommerbad Seestrasse Sommerbad Neukölln Sommerbad Kreuzberg (Prinzenbad) Freibad Wendenschloss Sommerbad Wuhlheide Grossglienicker See Großer WukenseeLiepnitzsee Strandbad Kiessee Schildow Strandbad Rahmer See Strandbad Lübars Wannsee Schlachten- see Krumme LankeHeiliger See Stadtbad Park Babelsberg Strandbad Lehnin am Klostersee Flughafensee Plötzensee Tegeler See Schermützelsee Straussee Dämeritzsee Kleiner Müggelsee Müggelsee Krimnicksee Flakensee Flussbad an der Dahme Strandbad Grünau Strandbad Schmökwitz Berlin Bade-Karte Badesee / Strandbad Freibad
  • 62.
  • 63.
  • 64.
  • 66. OFFICE-PAKET Excel, Numbers, Calc Spreadsheet Text Editor
  • 67. ONLINE https://www.datawrapper.de/
 Freemium
 10,000 Monthly chart views https://www.tableau.com/de-de
 Testen Sie Tableau jetzt 14 Tage kostenlos. https://www.google.com/maps/d/
 Google My Maps
 kostenlos
  • 68. HANDSON Account bei DataWrapper holen Daten aussuchen Gestallten Veröffentlichen
  • 69. HANDSON <iframe id="datawrapper-chart-ErsN3" src="//datawrapper.dwcdn.net/ErsN3/1/" scrolling="no" frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="12115"></iframe><script type="text/javascript">if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["ErsN3"]={},window.datawrapper[" ErsN3"].embedDeltas={"100":12170.5,"200":12142.5,"300":12115.5,"400":12115.5,"500":12115.5,"700": 12115.5,"800":12115.5,"900":12115.5,"1000": 12115.5},window.datawrapper["ErsN3"].iframe=document.getElementById("datawrapper-chart- ErsN3"),window.datawrapper["ErsN3"].iframe.style.height=window.datawrapper["ErsN3"].embedDeltas [Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["ErsN3"].iframe.offsetWidth/100),100))] +"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper- height"])for(var b in a.data["datawrapper- height"])if("ErsN3"==b)window.datawrapper["ErsN3"].iframe.style.height=a.data["datawrapper-height"] [b]+"px"});</script>
  • 71.
  • 72. • Markierungssprache • definiert Struktur und Inhalt • definiert nicht die Darstellung • immer in Blöcken denken HTML
  • 73. • ist eine Textdatei • wird mit Tags geschrieben • Tags tauchen paarweise auf • Tages kann man schachteln • es gibt einen <HEAD> und einen <BODY> • der Browser „verzeiht“ Fehler HTML
  • 74. • Stilvorlage • Browser hat einen Standart-Stil • Man kann alles überschreiben CSS
  • 75. • innerhalb von <STYLE>-Tag • innerhalb von anderen Tags • als eigene CSS-Datei • leider andere Schreibweise • der letzte Stil gewinnt CSS
  • 76. • Dynamisch Dokument ändern • kann den Inhalt ändern • kann den Stil ändern • erlaubt Interaktionen JAVASCRIPT
  • 77. • innerhalb von <SCRIPT>-Tag • als eigene JS-Datei • leider nochmals andere Schreibweise • verändert das DOM JAVASCRIPT
  • 78. AUFGABE erstelle deine erste HTML-Datei zeige eine Überschrift und einen Text ändere die Farbe füge einen Rahmen ein
  • 79. AUFGABE zeige eine Linie an zeige ein Bild an zeige ein Diagramm an zeige eine Karte an
  • 80.
  • 81. EINE KARTE wir brauchen kostenloses Kartematerial (OpenStreetMap) wir brauchen eine kostenlose JavaScript-Bibliothek (Leaflet JS) wir wollen 3D-Karten (Mapbox GL JS) mapbox.com/mapbox-gl-js
  • 82. HANDSON noch 2 Links auf die Leaflet-Seite hier einbauen
  • 84. <html>
 <head>
 <link rel="stylesheet" href=„https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity=„sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/ SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
 <script src=„https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity=„sha512- QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
 
 <style>
 h1 {
 background-color: lightsteelblue;
 }
 p {
 border-left: black 1px solid;
 padding-left: 10px;
 }
 #mapid {
 height: 180px;
 }
 </style>
 </head> …
  • 85. ...
 
 <body>
 <h1 style="color:darkorchid;" >Überschrift</h1>
 <div id="mapid"></div>
 <img src=„file:///Users/thomastursics/Pictures/Familienfotos%202016/Thomas.jpg" style="
 width: 200px;
 border-radius: 50px;
 border-top-left-radius: 0;
 border: 2px black solid;">
 <p>Hello World</p>
 <hr>
 
 <iframe id="datawrapper-chart-ErsN3" src="http://datawrapper.dwcdn.net/ErsN3/1/" scrolling="no" frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="12115"></ iframe><script type="text/javascript">if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["ErsN3"]={},window.datawrapper["ErsN3"].embedDe ltas={"100":12170.5,"200":12142.5,"300":12115.5,"400":12115.5,"500":12115.5,"700":12115.5,"800": 12115.5,"900":12115.5,"1000": 12115.5},window.datawrapper["ErsN3"].iframe=document.getElementById("datawrapper-chart- ErsN3"),window.datawrapper["ErsN3"].iframe.style.height=window.datawrapper["ErsN3"].embedDeltas[Math.min(1e 3,Math.max(100*Math.floor(window.datawrapper["ErsN3"].iframe.offsetWidth/100),100))] +"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper- height"])for(var b in a.data["datawrapper- height"])if("ErsN3"==b)window.datawrapper["ErsN3"].iframe.style.height=a.data["datawrapper-height"][b] +"px"});</script>
 
 ...
  • 86. ...
 
 <script>
 
 var mymap = L.map('mapid').setView([51.45354266285481, 6.626253812538288], 13);
 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png? access_token={accessToken}', {
 attribution: 'Map data &copy; <a href="https:// www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https:// creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https:// www.mapbox.com/">Mapbox</a>',
 maxZoom: 18,
 id: 'mapbox.streets',
 accessToken: 'pk.eyJ1IjoidHVyc2ljcyIsImEiOiI1UWlEY3RNIn0.U9sg8F_23xWXLn4QdfZeqg'
 }).addTo(mymap);
 
 </script>
 
 </body>
 </html>