Post on 20-Oct-2020
transcript
Übung Open Data Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
Termin 5, 23. März 2017 Dr. Matthias Stürmer und Prof. Dr. Thomas Myrach
Forschungsstelle Digitale Nachhaltigkeit Institut für Wirtschaftsinformatik Universität Bern
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
2
Terminübersicht Open Data Übung
1. 23.02.2017 Einführung: Ablauf, Open Data Speed Dating, Data Coaching, App Demos etc. 2. 02.03.2017 Fragen und Antworten zu HTML & CSS, Informationen zum Ablauf der Übung 3. 09.03.2017 Open Data Speed Dating 4. 16.03.2017 Fragen und Antworten zu JavaScript
Daten der Data Coaches analysieren, Konzept der Anwendung überlegen 5. 23.03.2017 Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App 6. 30.03.2017 Fragen und Antworten zu D3.js, Kurzpräsentationen und Feedbacks zu den möglichen Apps 7. 06.04.2017 Gastreferat zu Datenvisualisierungen: Benjamin Wiederkehr, Interactive Things
App programmieren 8. 13.04.2017 Gastreferat zu OpenStreetMap: Prof. Stefan Keller, Hochschule Rapperswil
App programmieren 20.04.2017 Osterferien 9. 27.04.2017 Gastreferat zu User Experience: Philipp Murkowsky, Puzzle
Zwischenpräsentationen 10. 04.05.2017 App programmieren 11. 11.05.2017 App programmieren 12. 18.05.2017 App programmieren 25.05.2017 Auffahrt 13. 01.06.2017 Abschlusspräsentationen
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
3
Agenda
1. Fragen und Antworten zu Bootstrap 2. Nächste Runde: endlich D3.js! 3. Konzeption Open Data App 4. Weitere Informationen
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
4
Vorwissenstest Bootstrap (JavaScript/HTML)
Ergebnis Wert
Gesamtzahl der Personen, die den Test gestartet haben 5 (18/29)
Gesamtzahl aller beendeten Tests (Benutzer, die maximale Anzahl Passes eingereicht haben.) 4 (15/24)
Mittlere Bearbeitungsdauer aller Tests 00:05:34 (00:13:05/00:04:24)
Gesamtzahl der bestandenen Tests 1 (10/17)
Durchschnittliche Punktezahl der bestandenen Tests 27.00 von 29.00
(25.80 von 31.00/ 10.71 von 13.00)
Mittlere Bearbeitungsdauer aller bestandenen Tests 00:13:47 (00:17:09/00:05:25)
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
5
Fragen und Antworten zu Bootstrap
> Auch Feedback zu den Videos, Methodik etc. ist willkommen!
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
6
Agenda
1. Fragen und Antworten zu Bootstrap 2. Nächste Runde: endlich D3.js! 3. Konzeption Open Data App 4. Weitere Informationen
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
7
D3.js
> JavaScript Bibliothek für interaktive Datenvisualisierungen > Arbeitet mit JavaScript, HTML, CSS und SVG im DOM
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
8
Scalable Vector Graphics (SVG)
Quelle: https://www.w3schools.com/graphics/svg_intro.asp
https://www.w3schools.com/graphics/svg_intro.asp
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
9
SVG Beispiel
Quelle: https://bl.ocks.org/emeeks/raw/9d615418c71132129f20
https://bl.ocks.org/emeeks/raw/9d615418c71132129f20
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
10
Document Object Model (DOM)
Quelle: https://wiki.selfhtml.org/wiki/JavaScript/DOM
https://wiki.selfhtml.org/wiki/JavaScript/DOMhttps://wiki.selfhtml.org/wiki/JavaScript/DOM
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
11
D3.js Version 4.0 im Juni 2016
Quelle: https://github.com/d3/d3/releases/tag/v4.0.0
https://github.com/d3/d3/releases/tag/v4.0.0https://github.com/d3/d3/releases/tag/v4.0.0
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
12
Genau achten welche Version verwenden! (besonders bei Snippets vom Internet)
Version 3.x von D3.js
Verschachtelte Funktionsnamen (nested namespace) Beispiel: d3.scale.linear()
Version 4.x von D3.js
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
13
Application Programming Interface (API) Dokumentation von D3.js Version 3
Quelle: https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md
https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
14
Application Programming Interface (API) Dokumentation von D3.js Version 4
Quelle: https://github.com/d3/d3/blob/master/API.md
https://github.com/d3/d3/blob/master/API.md
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
15
Interactive Data Visualization for the Web
> Autor: Scott Murray
> Verlag: O'Reilly Media
> März 2013, 272 Seiten, Englisch
> ISBN-10: 1449339735
> Gratis online als ebook > Auf Amazon.de für CHF 22.50
> „Create and publish your own interactive data visualization projects on the Web-even if you have little or no experience with data visualization or web development.”
http://chimera.labs.oreilly.com/books/1230000000345/index.html
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
16
Gratis vollständiges Online-Buch
http://chimera.labs.oreilly.com/books/1230000000345/index.html
http://chimera.labs.oreilly.com/books/1230000000345/index.htmlhttp://chimera.labs.oreilly.com/books/1230000000345/index.htmlhttp://chimera.labs.oreilly.com/books/1230000000345/index.htmlhttp://chimera.labs.oreilly.com/books/1230000000345/index.html
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
17
D3.js in Action
> Autor: Elijah Meeks (Datenvisualisierer bei Netflix)
> Verlag: Manning Publications
> Februar 2015, 352 Seiten, Englisch
> ISBN: 9781617292118
> Auf Manning.com als eBook (PDF) für USD 35.99
> Zweite Auflage in Erarbeitung (Wechsel auf D3.js Version 4)
Quelle: https://www.manning.com/books/d3-js-in-action
https://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-action
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
18
Debugging
> Was tun wenn nichts dargestellt wird? F12 und Console
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
19
Debugging
> Was tun wenn nichts dargestellt wird? F12 und Console > Fehlermeldung lesen: «Uncaught SyntaxError: Unexpected token )» > Fehler finden: index.html:23 Zeile 23 (geschweifte Klammer fehlt)
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
20
Debugging
> Jetzt klappts!
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
21
Lernvideos zu D3.js
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
22
Agenda
1. Fragen und Antworten zu JavaScript 2. Nächste Runde: endlich D3.js! 3. Konzeption Open Data App 4. Weitere Informationen
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
23
Data Coaches und Gruppen
> Hansueli Pestalozzi, BAFU 1. Matthieu Pfenninger und Sandro Andermatt 2. Isabelle Dütsch und Stefanie Meili 3. Rok Rucigaj und Alexander Rieder 4. Sven Kellenberger
> David Oesch und Pasquale Di Donato, swisstopo 5. Syrel Aliaksei
> Christian Trachsel und Rahel Ryf, SBB 6. David Bösiger und Dominik Briner 7. Jan Dietrich 8. Lino Hess und Mario Hess 9. Benedikt Hitz-Gamper 10. Mathias Zuber und Patrick Roten
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
24
Data Coaches und Gruppen
> Daniela Nowak und Joel Fisler, MeteoSchweiz 11. Martina Locher und Mike Suter
> Christian Loosli, Bernmobil 12.Lisa Binkert und Jonas Schneuwly 13.Danilo Bigovic und Delia Meyer 14.Kevin Meichtry und Martin Stadelmann 15.Raoul Grossenbacher und Raphael Bodenmann 16.Piyush Rauch und Anna Roth
> François Delavy, SNF 17. Jonas Schwery und Matthias Busset
> Thomas Lo Russo, Statistisches Amt des Kt. ZH 18. Julien Diep
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
25
Data Coaches und Gruppen
> Patrick Trees, Grosser Rat des Kantons Bern 19. Victor Bankoul und Karl Michael Hundius 20. Thomas Eichenberger und Samuel Wüthrich 21. Simon Preisig
> Tobias Schalit, Bildungsdirektion Kanton Zürich 22.Leandra Kellerhals und Moritz Seiler 23.Carole Steiner und Jasmin Sert
> Michael Erne & Daniel Schwarz, smartvote 24. Bojan Stojkovic und Lia Steiner
> Marco Majoleth, Bundesarchiv 25. Leo Benmenni und Nina Liechti
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
26
Weitere Datenquellen
> data.worldbank.org 26. Mathias Stocker und Marco Indermühle
> Hydrologischer Atlas der Schweiz 27. Alain Bühlmann
Noch freier Data Coach: > Beat Estermann, Berner Fachhochschule:
Gedächtnisinstitutionen
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
27
Ein paar Tipps zur App-Entwicklung
Jetzt beginnen: > Selbständig Meeting mit Data Coach vereinbaren > Kontext und Daten kennen lernen, Datenvebindungen verstehen > Fragen stellen, Notizen machen, selber im Internet recherchieren > Immer von den Daten ausgehend sich überlegen, was man aussagen könnte > Inhaltliche Fragestellungen definieren, Zielsetzungen definieren > Skizzen der App machen, Visualisierungs-Varianten analysieren
Später bei der Umsetzung (nach den D3.js Videos): > Data Coach regelmässig kleine Fortschritte zeigen
App auf Sandbox hochladen: https://sandbox.opendata.iwi.unibe.ch/ > Feedback abholen vom Data Coach > Code Snippets recherchieren und ausprobieren > Unterstützung von Programming Coaches anfordern
https://sandbox.opendata.iwi.unibe.ch/
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
28
Agenda
1. Fragen und Antworten zu JavaScript 2. Nächste Runde: endlich D3.js! 3. Konzeption Open Data App 4. Weitere Informationen
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
29
Treffen der Data Visualization Group
Mittwoch, 5. April 2017 16:00 Uhr bis 18:00 Uhr http://www.digitale-nachhaltigkeit.unibe.ch/studium/data_visualization_group/05_april_2017/index_ger.html
http://www.digitale-nachhaltigkeit.unibe.ch/studium/data_visualization_group/index_ger.htmlhttp://www.digitale-nachhaltigkeit.unibe.ch/studium/data_visualization_group/05_april_2017/index_ger.html
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
30
Django Girls in Bern
https://djangogirls.org/bern/
https://djangogirls.org/bern/
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
31
Opendata.ch Konferenz in Luzern
https://opendata.ch/2017
https://opendata.ch/2017
FS 2017
Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App
32
Nacht der Forschung 2017
Samstag, 16. September 2017, mit Open Data Hack Room!
Übung Open Data��Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data AppTerminübersicht Open Data ÜbungAgendaVorwissenstest Bootstrap (JavaScript/HTML)Fragen und Antworten zu BootstrapAgendaD3.jsScalable Vector Graphics (SVG)SVG BeispielDocument Object Model (DOM)D3.js Version 4.0 im Juni 2016Genau achten welche Version verwenden! (besonders bei Snippets vom Internet)Application Programming Interface (API)�Dokumentation von D3.js Version 3Application Programming Interface (API)�Dokumentation von D3.js Version 4Interactive Data Visualization for the WebGratis vollständiges Online-BuchD3.js in ActionDebuggingDebuggingDebuggingLernvideos zu D3.jsAgendaData Coaches und GruppenData Coaches und GruppenData Coaches und GruppenWeitere DatenquellenEin paar Tipps zur App-EntwicklungAgendaTreffen der Data Visualization GroupDjango Girls in BernOpendata.ch Konferenz in LuzernNacht der Forschung 2017