Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Open Data- und HTML-Coding-Workshop

31 vues

Publié le

Workshop für 2 Tage. Tag 1, alles rund um offene Daten und interaktive Grafiken. Tag 2, wie entwickle ich eine HTML-Seite mit Texten, Bildern und einer Karte

Publié dans : Formation
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Open Data- und HTML-Coding-Workshop

  1. 1. 22. und 23. März 2019, Rathaus Moers,Thomas Tursics Coding-Workshop Offener auchfürAnfänger*innen
  2. 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. 3. • Opendata-Aktivist seit 6+ Jahren • Apps + Webseiten +Visualisierungen mit Open Data: 20+ • Community +Vernetzung @tursics THOMASTURSICS
  4. 4. EINFÜHRUNG IN OPEN DATA
  5. 5. “Offene Daten und Inhalte können frei verwendet, geändert und von jedermann für jeden Zweck freigegeben werden” • OPENDEFINITION.ORG
  6. 6. NUTZUNGSBEDINGUNGEN
  7. 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.”
  8. 8. NUTZUNGSBEDINGUNGEN
  9. 9. DATEIFORMATE
  10. 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. 11. EXCEL
  12. 12. PDF
  13. 13. STRICHLISTE
  14. 14. SCAN
  15. 15. FAX
  16. 16. !!!
  17. 17. • per Brief • 198 Seiten • 1 kg Papier • 25 Tackerklammern • Jahrgänge 1990 bis 2014 
 • BRIEF
  18. 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
  19. 19. KEINEN PERSONENBEZUG
  20. 20. OPEN DATA GESETZ
  21. 21. OPEN DATA GESETZ
  22. 22. EIGENE DATEN SUCHEN
  23. 23. DATENPORTAL
  24. 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. 25. • OSM ⇢ openstreetmap.org • Wikipedia ⇢ wikidata.org • Wetter, Bahn, ESA, … • Ratsinformationssysteme • kleineanfragen.de • Frag den Staat MEHR DATEN
  26. 26. BLICK INS DATENPORTAL
  27. 27. BLICK INS DATENPORTAL
  28. 28. BLICK INS DATENPORTAL
  29. 29. BLICK INS DATENPORTAL
  30. 30. „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
  31. 31. • 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
  32. 32. • 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
  33. 33. 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)
  34. 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) 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)
  35. 35. DATENVISUALISIEREN
  36. 36. OPEN GOVERNMENT DATA Daten von Behörden, Gemeinden, Städten, Ländern und vom Bund
  37. 37. WAS STECKT IN MEINEM LEITUNGSWASSER?
  38. 38. WARTEZEITEN MOERS
  39. 39. WEIHNACHTSMÄRKTE
  40. 40. JUGEND HACKT 2018, PEACEFINDER
  41. 41. OPEN CULTURE DATA Daten von Gallerien, Bibliotheken, Archiven und Museen
  42. 42. ALT-BERLIN, CODING DAVINCI
  43. 43. ZZZWITSCHERWECKER - CODING DAVINCI
  44. 44. CYBERBEETLE - CODING DAVINCI
  45. 45. OPENTRANSIT DATA Daten vonVerkehrsunternehmen
  46. 46. VERKEHRSZÄHLDATEN - HACKDAY MOERS
  47. 47. TRANSIT HOPPER
  48. 48. ZEITKUGELN, U-BAHNHOF SEESTADT,WIEN
  49. 49. BUS-ABFAHRTSTAFEL - MOERS 2019
  50. 50. OPEN GEO DATA Daten mit geografischem Bezug
  51. 51. NYT, A MAP OF EVERY BUILDING
  52. 52. NYT, A MAP OF EVERY BUILDING
  53. 53. TEMPELHOFER FELD - MORGENPOST
  54. 54. KASTANIENAPP - OK LAB HEILBRONN
  55. 55. OPEN PRIVATE DATA Daten von jedermann
  56. 56. THINGS ON BIKE LANES - HAMBURG
  57. 57. JUGEND HACKT 2014,AWEARNESS
  58. 58. MOERSER WETTER
  59. 59. 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
  60. 60. 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
  61. 61. INTERAKTIVE GRAFIKEN ERSTELLEN
  62. 62. OFFICE-PAKET Excel, Numbers, Calc Spreadsheet Text Editor
  63. 63. 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
  64. 64. HANDSON Account bei DataWrapper holen Daten aussuchen Gestallten Veröffentlichen
  65. 65. 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>
  66. 66. HTML BAUEN
  67. 67. • Markierungssprache • definiert Struktur und Inhalt • definiert nicht die Darstellung • immer in Blöcken denken HTML
  68. 68. • 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
  69. 69. • Stilvorlage • Browser hat einen Standart-Stil • Man kann alles überschreiben CSS
  70. 70. • innerhalb von <STYLE>-Tag • innerhalb von anderen Tags • als eigene CSS-Datei • leider andere Schreibweise • der letzte Stil gewinnt CSS
  71. 71. • Dynamisch Dokument ändern • kann den Inhalt ändern • kann den Stil ändern • erlaubt Interaktionen JAVASCRIPT
  72. 72. • innerhalb von <SCRIPT>-Tag • als eigene JS-Datei • leider nochmals andere Schreibweise • verändert das DOM JAVASCRIPT
  73. 73. AUFGABE erstelle deine erste HTML-Datei zeige eine Überschrift und einen Text ändere die Farbe füge einen Rahmen ein
  74. 74. AUFGABE zeige eine Linie an zeige ein Bild an zeige ein Diagramm an zeige eine Karte an
  75. 75. 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
  76. 76. HANDSON noch 2 Links auf die Leaflet-Seite hier einbauen
  77. 77. ERSTE HTML-DATEI <html>
 <body>
 
 <h1>Überschrift</h1>
 <p>Hello World</p>
 <hr>
 <div>Hallo 2</div>
 
 </body>
 </html>
  78. 78. <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> …
  79. 79. ...
 
 <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>
 
 ...
  80. 80. ...
 
 <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>

×