Thomas Tursics, profile picture
Hochgeladen vonThomas Tursics
123 aufrufe

Open Data- und HTML-Coding-Workshop

Am 22. und 23. März 2019 fand ein Coding-Workshop in Moers statt, der sich an Anfänger*innen richtete und sich mit offenen Daten, deren Beschaffung und verschiedenen Visualisierungswerkzeugen befasste. Der Workshop umfasste neben theoretischen Grundlagen auch praktische Aufgaben wie das Erstellen von Grafiken und Karten mit diesen Daten. Es wurden Datenportale und -formate vorgestellt, die es ermöglichen, öffentliche Daten zu nutzen und zu visualisieren.

Präsentation einbetten

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

PDF
Open Data und Tourismus
vonWolfgang Ksoll
 
PDF
Open Data - Wertschöpfung im digitalen Zeitalter
vonWolfgang Ksoll
 
PDF
Grosse Projekte in der Wissenschaft am Beispiel von NextGEOSS
vonWolfgang Ksoll
 
PDF
Satellitendaten für Smart Cities
vonWolfgang Ksoll
 
PPTX
Ineraktive Karten
vonbrillux
 
PDF
basemap.at, swisstopo und WebAtlasDE – Wie passt das zusammen?
vonStadt Wien
 
PDF
Uni bern datenpolitik_20160303
vonAndre Golliez
 
PDF
Kolloquium GE+BIGDATA+REALTIME 2017
vongeoportal of the federal authorities of the Swiss Confederation
 
Open Data und Tourismus
vonWolfgang Ksoll
 
Open Data - Wertschöpfung im digitalen Zeitalter
vonWolfgang Ksoll
 
Grosse Projekte in der Wissenschaft am Beispiel von NextGEOSS
vonWolfgang Ksoll
 
Satellitendaten für Smart Cities
vonWolfgang Ksoll
 
Ineraktive Karten
vonbrillux
 
basemap.at, swisstopo und WebAtlasDE – Wie passt das zusammen?
vonStadt Wien
 
Uni bern datenpolitik_20160303
vonAndre Golliez
 
Kolloquium GE+BIGDATA+REALTIME 2017
vongeoportal of the federal authorities of the Swiss Confederation
 

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

PDF
Geben Sie Ihre Daten frei...! - Chancen, Nutzen und praktische Umsetzung von...
vonGovData - Das Datenportal für Deutschland
 
PDF
Open Data Apps
vonThomas Tursics
 
PDF
Open (Government) Data | Chancen - Risiken - Nutzen
vonOliver Bildesheim
 
PDF
GoverBreak Bonn: Impuls Open Data
vonGoverBreak
 
PPT
Open Data & Data Driven Journalism - Tools & Best Practices
vonRobert Seyfriedsberger
 
PDF
Open Data aus Sicht eines Entwicklers
vonThomas Tursics
 
PDF
Open Data, Hochschule für Technik und Wirtschaft Berlin
vonThomas Tursics
 
PDF
34. Open Government-Plattform Wien
vonStadt Wien
 
PDF
Wie offene Daten in Berlin helfen
vonThomas Tursics
 
PPTX
Open Government Data in Österreich
vonRobert Seyfriedsberger
 
PDF
Open Data und interaktive Datenvisualisierungen
vonMatthias Stürmer
 
PDF
Wo stehen wir mit Open Government Data in der Schweiz? (Juni 2012)
vonOpendataCH
 
PDF
43. Open Data MeetUp Wien
vonStadt Wien
 
PDF
Open Data und interaktive Datenvisualisierungen
vonMatthias Stürmer
 
PPTX
Open Data / Open Government "Best Practice"
vonGerrit Schloessl
 
PDF
Opendata
vonOpen Knowledge Foundation
 
PDF
2022_49.OpenDataMeetUp.pdf
vonStadt Wien
 
Geben Sie Ihre Daten frei...! - Chancen, Nutzen und praktische Umsetzung von...
vonGovData - Das Datenportal für Deutschland
 
Open Data Apps
vonThomas Tursics
 
Open (Government) Data | Chancen - Risiken - Nutzen
vonOliver Bildesheim
 
GoverBreak Bonn: Impuls Open Data
vonGoverBreak
 
Open Data & Data Driven Journalism - Tools & Best Practices
vonRobert Seyfriedsberger
 
Open Data aus Sicht eines Entwicklers
vonThomas Tursics
 
Open Data, Hochschule für Technik und Wirtschaft Berlin
vonThomas Tursics
 
34. Open Government-Plattform Wien
vonStadt Wien
 
Wie offene Daten in Berlin helfen
vonThomas Tursics
 
Open Government Data in Österreich
vonRobert Seyfriedsberger
 
Open Data und interaktive Datenvisualisierungen
vonMatthias Stürmer
 
Wo stehen wir mit Open Government Data in der Schweiz? (Juni 2012)
vonOpendataCH
 
43. Open Data MeetUp Wien
vonStadt Wien
 
Open Data und interaktive Datenvisualisierungen
vonMatthias Stürmer
 
Open Data / Open Government "Best Practice"
vonGerrit Schloessl
 
Opendata
vonOpen Knowledge Foundation
 
2022_49.OpenDataMeetUp.pdf
vonStadt Wien
 

Mehr von Thomas Tursics

PDF
Auf der anderen Seite der Lizenzen
vonThomas Tursics
 
PDF
Best practices für Open Data-Anwendungen
vonThomas Tursics
 
PDF
Was sind offene Daten?
vonThomas Tursics
 
PDF
Open Data mit Daten vom Bund
vonThomas Tursics
 
PDF
Jugend hackt - Open Data
vonThomas Tursics
 
PDF
Open Data Day 2018 in Köln
vonThomas Tursics
 
PDF
Das ABC der offenen Daten
vonThomas Tursics
 
PDF
Wie kaputt ist deine Schule?
vonThomas Tursics
 
PPTX
Open Tech Summit '17
vonThomas Tursics
 
PDF
Open Data in der Schulverwaltung
vonThomas Tursics
 
PDF
ABC des Wissens - O wie Open Data
vonThomas Tursics
 
PDF
Open Data Barcamp Potsdam
vonThomas Tursics
 
PDF
How to Open data
vonThomas Tursics
 
PDF
Open Data für Dummies
vonThomas Tursics
 
PDF
Code for Berlin bei Open Data Day Moers 2015
vonThomas Tursics
 
Auf der anderen Seite der Lizenzen
vonThomas Tursics
 
Best practices für Open Data-Anwendungen
vonThomas Tursics
 
Was sind offene Daten?
vonThomas Tursics
 
Open Data mit Daten vom Bund
vonThomas Tursics
 
Jugend hackt - Open Data
vonThomas Tursics
 
Open Data Day 2018 in Köln
vonThomas Tursics
 
Das ABC der offenen Daten
vonThomas Tursics
 
Wie kaputt ist deine Schule?
vonThomas Tursics
 
Open Tech Summit '17
vonThomas Tursics
 
Open Data in der Schulverwaltung
vonThomas Tursics
 
ABC des Wissens - O wie Open Data
vonThomas Tursics
 
Open Data Barcamp Potsdam
vonThomas Tursics
 
How to Open data
vonThomas Tursics
 
Open Data für Dummies
vonThomas Tursics
 
Code for Berlin bei Open Data Day Moers 2015
vonThomas Tursics
 

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 seit6+ Jahren • Apps + Webseiten +Visualisierungen mit Open Data: 20+ • Community +Vernetzung @tursics THOMASTURSICS
  • 4.
  • 5.
    “Offene Daten undInhalte können frei verwendet, geändert und von jedermann für jeden Zweck freigegeben werden” • OPENDEFINITION.ORG
  • 6.
  • 7.
    MITVERTRAGSSTRAFE? Nürnberg 
 „Die Daten sindnach Abschluß des Projektes auf allen Datenträgern zu löschen.” „FürVerstöße des Nutzers wird eineVertragsstrafe von 2.000 Euro vereinbart.”
  • 8.
  • 9.
  • 10.
    Sehr geehrter HerrTursics, 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.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
    • per Brief •198 Seiten • 1 kg Papier • 25 Tackerklammern • Jahrgänge 1990 bis 2014 
 • BRIEF
  • 18.
    DATEIFORMATE Irgendwas mit offenerLizenz, PDF " # $ % & ' Querverlinkung mit Kontext, LOD Eindeutige URLs für Datensätze, RDF Offenes Format, CSV Strukturiert, Excel Irgendwas im Internet
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 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
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
    „Seit 2017 sinddie 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 Thomasund 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 Thomasund 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)
  • 36.
  • 37.
    OPEN GOVERNMENT DATA Datenvon Behörden, Gemeinden, Städten, Ländern und vom Bund
  • 38.
    WAS STECKT INMEINEM LEITUNGSWASSER?
  • 39.
  • 40.
  • 41.
    JUGEND HACKT 2018,PEACEFINDER
  • 42.
    OPEN CULTURE DATA Datenvon Gallerien, Bibliotheken, Archiven und Museen
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
    OPEN GEO DATA Datenmit geografischem Bezug
  • 52.
    NYT, A MAPOF EVERY BUILDING
  • 53.
    NYT, A MAPOF EVERY BUILDING
  • 54.
  • 55.
    KASTANIENAPP - OKLAB HEILBRONN
  • 56.
  • 57.
    THINGS ON BIKELANES - HAMBURG
  • 58.
  • 59.
  • 60.
    NETZSPINNEN RB55 RE5 RB12 RB20 RB27 RE3 RB24 RB25 RB26 RE1 RB36 RE4RE5RE7 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) FreibadWendenschloss 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
  • 65.
  • 66.
    OFFICE-PAKET Excel, Numbers, CalcSpreadsheet Text Editor
  • 67.
    ONLINE https://www.datawrapper.de/
 Freemium
 10,000 Monthly chartviews 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 DataWrapperholen 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>
  • 70.
  • 72.
    • Markierungssprache • definiertStruktur und Inhalt • definiert nicht die Darstellung • immer in Blöcken denken HTML
  • 73.
    • ist eineTextdatei • 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 • Browserhat 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 ersteHTML-Datei zeige eine Überschrift und einen Text ändere die Farbe füge einen Rahmen ein
  • 79.
    AUFGABE zeige eine Liniean zeige ein Bild an zeige ein Diagramm an zeige eine Karte an
  • 81.
    EINE KARTE wir brauchenkostenloses 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 Linksauf die Leaflet-Seite hier einbauen
  • 83.
  • 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>
 <divid="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>