#Lesprogramma Frontend 2 Frontend 2 is een techniek van voor studenten CMD Amsterdam die Frontend developer willen worden. Het vak is een vervolg op Frontend development in de V1. In Frontend 2 gaan we dieper in op technische mogelijkheden van HTML5 API's ==JavaScript. Aan het eind van de cursus kun je een webapp maken met HTML5 API's en JavaScript. Je leert methoden om met meer developers tegelijk aan een project te werken, je leert (server) data verwerken en (responsive) layout en navigatie patronen realiseren.
##Intentie van het vak
#Randvoorwaarden
##Kenmerken onderwijsleersituatie
##Kenmerken studenten
##Kenmerken docenten Joost faber j.faber@hva.nl Koop Reynders k.g.reynders@hva.nl
##Didaktische uitdaging
#Doelstelling
##Leerdoelen
##Relatie eindtermen van de opleiding en beroepsprofiel
#Doceer- en leeractiviteiten
##lesopbouw Didaktische ordening en strategie Van een les. Volgorde van onderdelen. Welke materialen zijn nodig? Opstelling van het lokaal.
##Toetsplan
###Toetsmatrijs Hoe verhouden de competenties zich tot de opgestelde leerdoelen
###Toetsvormen en feedbackprocedure
###Integratie leerdoelen, toetsen en leeractiveiten
##Lesprogramma Het lesprogramma bestaat uit 9 lessen inclusief de eindtoets in lesweek 9.
| Lesweek | Beschrijving | College | Werkopdrachten | Weekly Nerd | Toetsing | Huiswerk | | ------- | ------------ | --- | --- | --- | --- | | 1 Codemonkies | Introductie JavaScript OOP - Leren denken in objecten 1 | HTML5 API's | Mini college over local, global en objecten | Oefenen met objecten | - | Voorbereiden Javascript fundamentals | Values, Variables, Control flow, Functions, Objects and Arrays | | | | | Scoping, local, Global en objecten | | | | | Self invoked function | | | | | Codecadamy: Introduction to Objects I - What is an Object, over methods en properties | | | | | Object constructor, Prototype, Object literal | | 2 I'm an Object | OOP - Leren denken in objecten 2 | - | Oefenen met objecten | | - | | | | | | Codecadamy: Introduction to Objects II - Closer look at Objects, over Classes en Prototype, Inheritance / Overerving, Public, private and methods | | | | | Omzetten van een aantal functies naar een script gebaseerd op objecten, breakdown maken, Objecten maken. Let op scoping, self-invoked functies, object literal | | 3 Fork me | Introduktie MVC - Backbone 1 | Wat is MVC? | Backbone skeleton opzetten | | - | | | | | | mvc1 Teams maken en Repo op Github | | | | | mvc2 Breakdown maken van de 3 pagina's Schedule.html, Ranking.html, Game.html | | | | | mvc3 Backbone skeleton opzetten, model, collection, view, template | | | | | mvc4 1 script omzetten naar losse bestanden | | 4 | MVC - Backbone 2 | - | Backbone skeleton opzetten | | - | | | | | | mvc5 Filteren & ordenen | | | | | mvc6 Evenst | | | | | mvc7 Toevoegen & Weghalen | | | | | mvc8 (optioneel of als huiswerk) Werken met een API, Json binnenhalen/GET| | 5 | MVC - Backbone 3 | - | Backbone skeleton opzetten | | Deeltoets 1 Mondeling (summatief) | | | | | | webapp1 Routing | | | | | webapp2 Werken met een API, Json wegschrijven/POST | | | | | webapp3 Breakdown maken en beoordelen (summatief) tekenen, lijst (js/html/css/general stuff), tijds inschatting| | Kerstvakantie | | 6 | Interface & interactie | Mobile development | | | Herkansing Deeltoets 1 | | | | | | webapp4 | | 7 | Interface & interactie | - | | | | | | | | | webapp5 | | 8 | Crashtest Webapp | - | Webapp testen | - | test rapport | | | 9 | Eindtoets Webapp | - | - | - | Beoordeling eindopdracht (formatief) | |
Beoordelingen Wekelijks Weekly Nerd Deeltoets 1 Mondeling 3 pagina'≠s (summatief) > Vragen aan Server side scripting + elkaars code nakijken Breakdown vd Webapp (summatief) > Vragen aan Data modeleren Crashtest Webapp beoordeling > Vragen aan Evidence based design Eindtoets Webapp + elkaars code nakijken
Wanneer vertellen over Meteor? En/of advanced framworkers? Misschien Redactiegroep? Mooi als refelctie opdracht nadat studenten wat ervaring hebben opgedaan met MVC
Wanneer relecteren op het beroep Frontend developer? Misschie de klas ook de vraag voorleggen wat deze moet leren? Vasilis van Gemert uitnodigen?
Als ze dit hebben gehad (en snappen), den ben ik tevreden:
Model
1 Fundamentals (voor de webdeveloper) :
Programmeren in JavaScript - Objecten, Local en Global Scope, Methods, Properties, Classes, Inheritance en meer
2 Gestructureerd programmeren in JavaScript :
MVC, Waarom ?
Met meer mensen tegelijk aan een webapp werken
Code hergebruiken, denken in componenten en modules
Unit tests
Efficienteren code
Leesbaarheid
Bedrijven werken daarom zo
Breakdown maken
Wat moet het worden
Bepalen MosCoW > prioritiseren Must - Should - Could - Wont
Hoeveel tijd kost het om het te maken
Wie doet welk werk
Code structureren
Mappenstructuur
Hierarcheren
Functies inititaliseren
3 Layout & Interactie
Interactie- en interfacepatronen voor een mobiele webapp
Creatief programeren aan de frontend
Code gebruiken voor de interactie
Les 3: Lesdoelen
- Opzetten van applicatie in Backbone > Skeleton
- Hiërarchieren van je code. Waar ga je je functies inititliseren/uitvoeren
- Breakdown maken
- Versiecontrolle en issuetracking opzetten
Les 3: College over MVC
Voordelen van MVC
Nadelen van MVC, bv bedrijven die hier vastzitten
Les 3: Werkopdrachten: Kennismaken met MVC
Werken in Teams >
Hoe werken met Github ?
Skeleton neerzetten voor de eindopdracht
[Breakdown Webapp] 3 pagina's
- Schedule: Schedule laten zien, rondes en volgende rondes (+auto-updates op schedule inbouwen)
- Games: Wedstrijd laten zien (+met scores posten)
- Ranking: Ranglijsten & Pools laten zien (+met timeline?)
Studenten worden individueel beoordeelt
ze gaan alledrie 1 van de 3 functionaliteiten maken
ze maken een apparte pagina met eingen backbone scripts.
Wat moet in deze 3 pagina's
Focus op Model? Of Controler? Routing?
Data binnenhalen met de API?
Local storage?
Les 3 & 4 & 5: Vanaf hier werken aan de eindopdracht
vanaf les 5 > Views/Templates
Progressive enhancement? Gracefull degredation
Crossbrowser?
CSS, object georienteerd?
Les 5 Waar gaat de deeltoets over? MVC Skeleton.
Hoe laten zien
Toetsen wat we behandelen in les 3 en 4
Les 6,7 Routing in Backbone, interface en interactie
Vanaf hier Routing functionaliteit en interface + interactie
Mobile interaction patronen
1 page app maken met 1 index.html
###Eindopdracht
API en dev omgeving Leaguevine
Toernooi Threesome invullen om te gebruiken voor Frisbee toernooi
Threesome frisbee toernooi specs afmaken voor de zg eindopdracht
Volgende week werken aan de eindopdracht
Wat moet erin
hoe werken met groepen
Wat moeten de studenten maken met een MVC:
Eindopdracht:
* Online tournament software met
- scores posten
- ranglijsten laten zien
- wedstrijden/schedule laten zien
* Interactie moet usable zijn
* Groepen van 3 developpers
- Werken met Github
- Versies bijhouden met comments
- Logboek
* Elkaars code beoordelen
Threesome Ultimate Tournament - http://www.playwithlv.com/tournaments/18334/threesome/
Skeleton neerzetten in MVC
Data binnenhalen
Data in collecties plaatsen
en zo nodig (geen internet meer?) lokaal: teams wijzigen, deleten, toevoegen, scores opslaan en synchroniseren op de achtergrond
Collecties ordenen en filteren
Elkaar beoordelen in Github, oefenen deeltoets 1?
Studenten moeten elkaar beoordelen op de code.
Rubrik ontwikkelen.
Je krijgt zelf een cijfer als je iemand ander hebt beoordeeld.
https://class.coursera.org/interactivepython-2012-001/human_grading/view?assessment_id=11
###Weekly Nerd