Skip to content
This repository has been archived by the owner on Apr 6, 2021. It is now read-only.

Home

Jump to bottom
Christian Noss edited this page Oct 18, 2017 · 37 revisions

Workshops, Trainings und Co. - Sammlung

in Arbeit

Web-basics / How the Web Works

Vortrag, ca. 60 Min, für alle

Definitions and History, Client-Server Model, Domain Name System, Hypertext Transfer Protocol (HTTP), Uniform Resource, Locators(URL), Web Servers, The Web Standards Project

Am Ende des Vortrages kennen die Teilnehmer wesentliche Definitionen, Technologien und Konzepte des Web.

Tooling & Dev Basics

Training, ca. 120 Min, für Rookies

WBA relevante Konsolenbefehle; SSH; FTP; Editor; BrowserDev Tools; (ADV)-Webserver

Nach dem Training haben die Teilnehmer ihre WebDev Umgebung aufgebaut und sind arbeitsfähig. Sie haben eine erste Website auf dem ADV Server deployed.

Anmerkung Sascha: Eventuell wäre es hilfreich einen Editor vorzugeben, da die Betreuung mit unterschiedlichen Editoren oft schwierig ist. Allein in AP war es schon schwierig und da gibt es effektiv nur 3-4 Optionen. Im Bereich WebDev gibt es ja unzählige Möglichkeiten.

c: AUs meiner Sicht können die nutzen, was sie wollen, aber wir sollten klar machen, was wir supporten, ok?

Liste Konsolenbefehle:

  • cd /directorypath
  • (chmod [options] mode filename)
  • cp [options] source destination
  • ls [options]
  • mkdir [options] directory
  • mv [options] source destination
  • pwd
  • rm [options] directory
  • (tail [options] [filename])
  • touch filename
  • clear

GIT, GitHub Basics & GitHub Pages

Training, ca. 120 Min, für Rookies

Definitionen und Funktionen; Konzepte; wesentliche Commands: .gitignore, init, commit, merge, pull, push, branch, checkout, ???; GitHub Pages

Anmerkung Sascha: git reset / rebase (um "unpushed commits" zu entfernen), git log, git rm, git remote (wegen init), git config (email / username - sonst haben wir wieder falsche user auf github), Markdown? (cn: ja)

c: Ich fürchte da müssen wir zwei Workshops draus machen

Am Ende des Trainings kennen die Teilnehmer die Funktionsweise von GIT, sind arbeitsfähig und haben eine kleine Website als GitHub Page veröffentlicht.

HTML Basics / HTML1: Overview

Workshop, ca. 240 Min, für Rookies

HTML Defined and its History; HTML Syntax; Semantic Markup; Structure of HTML; Quick Tour of HTML; HTML Semantic Elements; Validation.

Am Ende des Workshops haben die Teilnehmer eine einfache HTML erstellt.

CSS Basics / CSS1: Introduction

Workshop, ca. 240 Min, für Rookies

What is CSS?; CSS Syntax; Location of Styles; Selectors; The Cascade: How Styles Interact; The Box Model; CSS Text Styling; Font Embedding

Nach dem Workshop wissen die Teilnehmer, was CSS ist, wie es funktioniert und können einfache CSS Befehle auf ihr HTML Markup anwenden.

HTML Advanced / HTML2: Tables and Forms

Workshop, ca. 240 Min, für Rookies

Introducing Tables; Styling Tables; Introducing Forms; Form Control Elements; Table and Form Accessibility; Microformats

Anmerkung Sascha: (Video Element (Brücke AVM / Youtube))?

c: Gute Idee, vielleicht aber besser bei Web-Media

Advanced CSS: Layouts

Workshop, ca. 240 Min (oder länger), für Rookies & Intermediates

Normal Flow; Positioning Elements; Floating Elements; Multicolumn Layouts; Flexbox; Approaches to CSS Layout; Responsive Design; CSS Frameworks

JavaScript Basics: Client-Side Scripting

Workshop, ca. 240 Min, für Rookies

What is JavaScript; JavaScript Design; Using JavaScript; Syntax; Objects; DOM; Events

Web Media

Workshop, ca. 240 Min, für Rookies & Intermediates

Digital Representation; Color Models; Image Concepts; File Formats; Audio and Video; HTML5 Canvas;

Advanced JavaScript

Workshop, ca. 240 Min (oder länger), für Rookies & Intermediates

JavaScript Pseudo-Classes; AJAX; Canvas; Closures; Asynchronous File Transmission; jquery?; Debugging; JSON; JS Frameworks?

Anmerkung: ES6 (Compat Table)?, ES6 Compiler (https://babeljs.io/)?, Canvas besser hinten anstellen, JQuery raus, Frameworks eher optional, dann doch lieber Patterns (Module, Memoization, Singleton)

Weitere Vorschläge

  • CSS Methodologien?
  • Responsive Design
  • Reverse Engineering/ Disassemble
  • Group Programming
  • SEO?
  • Security?
  • Performance?
  • Web Application Design? (Real World Web Software Design, Principle of Layering, Design Patterns in Web Context. Presentation Patterns, Data and Domain Patterns)
  • Managing State? (The Problem of State; Passing Information via Query Strings; Passing Information via the URL Path; Serialization; HTML5 Web Storage; Cookies; Caching; Session State)
  • JS Frameworks/ SPA Development?
  • Testing?
  • Build Tools?
  • CSS Tools?
  • State of the art Stack
  • Fun with Canvas & CSS (colored mosaic)

Allgemeine Anmerkungen Sascha:

  • Fokus auf ECMA6 durchaus sinnvoll (siehe compat table)
  • GitHub Probleme aus WBA 2:
    • .gitignore (bspw /node_modules, dadurch Commit History unlesbar)
    • Branches (oft Branches für einzelne Personen oder gar Inhalte ("Anwendung", "Dokumentation", ...)
    • git config (falsche E-Mails konfiguriert, daher Commit History unlesbar)
    • git merge (Man arbeitet lieber für sich alleine oder kopiert Daten hin und her, weil man merge Konflikten aus dem Weg gehen will und das Verständnis dahinter nicht hat)
  • Testing (Frameworks) in JS schwierig, da man zu wenig Zeit für die Basics hat
  • SEO sollte raus
  • SPA für diesen Rahmen zu aufwendig

Anforderungen WB2

  • Objekte
  • Function (dazu: Callbacks)
  • Synchrone und Asynchrone Funktionen in JS (großes Problem in WBA2)
    • (Callbacks)
    • Promises
  • Arrays
  • JSON

Allgemein formuliert: Sie müssen genug Javascript beherrschen um einigermaßen mit Node.js und aktuellen Modulen klar zu kommen

Clone this wiki locally