Dokumentation
- Workshop Spektral, 19. Oktober 2016, 18 - 22 Uhr
- Betreuer:
- Stefan Kasberger (Open Knowledge Austria)
- Peter Grassberger
- Flooh Perlot (Drawing Data)
- Christopher Kittel (Open Knowledge Austria)
- OffeneWahlenAT
Es gibt von @murdelta auch Fotos vom Abend (unter CC BY). Vielen lieben Dank.
UrheberInnenrecht
Der Inhalt steht, soweit nicht explizit anders erwähnt, unter der Creative Commons Namensnennung 4.0 Lizenz.
Mitbringen
Laptop mit Maus + Netzteil
Vorbereiten
- Browser mit Browser Plugins installieren (Firefox oder Chrome wird empfohlen)
- Text Editor installieren: (z. B. notepad++)
- Optional
- Tutorial Visualisierungen ansehen
Foto by murdelta (CC BY 2.0)
ABLAUF
| Timetable | Agenda |
|---|---|
| 18:00 - 18:10 | Willkommen |
| 18:10 - 18:30 | Einleitung & Vorstellungsrunde |
| 18:30 - 18:45 | Gruppen bilden |
| 18:45 - 20:00 | Coden: Setup, Einführung, erste Schritte |
| 20:00 - 20:15 | PAUSE |
| 20:15 - 21:45 | Coden |
| 21:45 - 21:55 | Show & Tell |
| 21:55 - 22:00 | Sum Up & Good Bye |
| 22:00 | ENDE |
Einleitung
- Willkommen
- Ablauf
- Vorstellen Trainer, Event und Offene Wahlen
- Vorstellungsrunde TeilnehmerInnen
Offene Wahlen Österreich
Vorstellung des Projektes durch Stefan Kasberger (Folien).
Workshops
Website mit GitHub (AnfängerInnen)
Was du lernst: Website erstellen in HTML und CSS mit GitHub Pages mit Christopher Kittel und Stefan Kasberger.
Ablauf
- Account auf GitHub anlegen.
- Client installieren.
- Neuen branch anlegen:
gh-pages. - Bootstrap entpacken.
- HTML und CSS Templates kopieren.
- Alles in den lokalen Projektordner kopieren.
- Layout mit Bootstrap und Klassen anpassen.
- Design in CSS anpassen: Hauptfarbe ändern.
- Fotos von Wikipedia und Youtube-Videos einbetten.
- Committen und pushen.
- Das Ergebnis im Web ansehen und mit FreundInnen teilen. :)
Ressourcen
- GitHub Pages: GitHub ist eine Plattform für EntwicklerInnen, auf der einfach Quellcode geteilt werden kann. Der Service ermöglicht auch das einfache Erstellen und Veröffentlichen von statischen Webpages mittels GitHub Pages.
- Bootstrap: ein HTML, CSS und JavaScript Framework, das einfaches und responsives Webdesign ermöglicht.
- Font Awesome: ermöglicht das einfache Nutzen von Ikonographien.
- Adobe Color CC: zum einfachen Finden von zusammenpassenden Farben
- Colorbrewer 2.0: zum einfachen Finden von zusammenpassenden Farben
- Markdown mit GitHub Flavour: bei GitHub Pages kann auch mit Markdown geschrieben werden, eine einfache Textauszeichnung die für AnfängerInnen sehr geeignet ist.
- w3schools.com: Lerne Web-Technologien wie HTML, CSS und JavaScript.
- Codeacademy: Lerne verschiedene Technologien und Praktiken rund um Web-Entwicklung.
- Code School: Lerne verschiedene Technologien und Praktiken rund um Web-Entwicklung.
- Udacity Course: Intro to HTML & CSS
Einführung in das Programmieren mit JavaScript
Was du lernst: Die Grundlagen des Programmierens in JavaScript mit Peter Grassberger.
Ablauf
Hier die Präsentation.
Ressourcen
- Videos von GangMan2006 @ Youtube
- Nachschlagewerk: developer.mozilla.org
- Fragen stellen: Stackoverflow
- Interaktiv Lernen: CodeAcademy
- Interaktiv Lernen: Code School
- Interaktiv Lernen: Khan Academy
- Udacity Course: JavaScript Basis for Beginners
- Intro to jQuery
- Data Visualization and D3.js
Säulendiagramm mit JavaScript (AnfängerInnen)
Was du lernst: Wahlergebnisse als Säulendiagramm in JavaScript darstellen.
Die Dateien von Flooh Perlot:
Wahlkarte mit JavaScript (AnfängerInnen)
Was du lernst: Wahlergebnisse mittels JavaScript auf einer Karte darstellen.
Die Dateien von Flooh Perlot:
WIE WEITER MACHEN?
- Ergebnisse online stellen: Selber machen oder bei uns (Schreib uns!).
- Ergebnisse teilen: FreundInnen erzählen, twittern, facebook, bloggen, etc.
- diskutiere was du gemacht und gehört hast mit deinen FreundInnen und im Web
- nutze die Daten um weitere Visualisierungen zu erstellen.
RESOURCEN ALLGEMEIN
Coden lernen
- Stackoverflow: dort findet man jeden Menge Antworten auf häufig gestellte Fragen und kann auch selber Fragen an die Community stellen. Zuerst aber bitte nachsehen, ob die eigene Frage nicht schon mal wo beantwortet wurde (was zu Beginn zu 99% der Fälle so der Fall ist).
- w3schools: Die Grundlagen von Web-Technologien wie HTML, CSS und JavaScript zum Nachschlagen.
- Code Academy: interaktiv Coden lernen im Browser. Verschiedenste Programmiersprachen im Angebot.
- Code School: interaktiv Coden lernen im Browser. Verschiedenste Programmiersprachen im Angebot.
- Udacity: interaktiv Coden lernen im Browser. Verschiedenste Programmiersprachen im Angebot.
- edX: Programmieren lernen in Kursen. Ist eher akademisch geprägt.
- Coursera: Programmieren lernen in Kursen. Ist eher akademisch geprägt.