Introductie
Praktisch
Docenten
Sjouwke Van Parys
Jannes Lambrecht
ECTS
- Periode 3 = 8 weken
- 🏫 Les
- 2 x 4 uur per week
- fysiek op de campus
- ✍️ Taken
- Wekelijkse klasopdracht
- Één grote periode opdracht
- Elke les bereid je voor via tutorials & documentatie die je op Canvas terugvindt
Aanwezigheid
- 🥳 Verplicht
- 🤒 Gewettigd afwezig
- Laat vóór de start van de les via Teams weten dat je niet aanwezig zal zijn
- Upload zo snel mogelijk je ziektebriefje
- Neem zelfstandig de theorie, demo's en oefeningen door, tegen volgende les
- Stel eventuele vragen op Teams / tijdens volgende les
- Maak de klastaak thuis tegen volgende les
Klastaken
- Indienen tegen het einde van de les
- Niet klaar? Afwerken tegen de start van volgende les
-
Gewettigd afwezig?
- Maak de taak thuis tegen volgende les
- Uitstel vragen aan de docent kan enkel op het moment dat je je afwezigheid meldt
⚠️ Onwettig afwezig, niet aan het einde van de les ingediend of afwezigheid niet tijdig gemeld = 0 voor de klasoefening van die week.
Wat heb je nodig?
Benodigdheden
-
Browser:
Firefox Developer Edition
Google Chrome - Code editor: Visual Studio Code
- Basiskennis: HTML en CSS
- Een beetje goesting om coole, geanimeerde web pagina's te maken
🧠 Zit het allemaal nog wat ver? Fris je kennis van HTML & CSS even op door de slides van Web Technology te herbekijken.
Leerstof & oefeningen
-
Canvas
- Theorie & klastaken
- 🔗 Canvas cursuslink
-
Github
- Demo's en oefeningen
- 🔗 Git & GitHub 101
-
📚 Digitale Syllabus
- Uitgebreide uitleg AHS
- 🔗 Syllabuslink
-
Mozilla Developer Network (mdn):
- Uitgebreide open source documentatie over HTML, CSS & JS
- 🔗 developer.mozilla.org
-
LinkedIn Learning:
- Extra tutorials, waaronder:
Waarom dit vak?
De pilaren van het web
#Throwback
- Programmeertaal
- Vaak gebruikt samen met HTML & CSS
- Webpagina's interactief maken
-
Vanilla JavaScript
- = zonder libraries of frameworks
- Volgt de ECMAscript standaard
- 'ES14', 'ES15', ... = JavaScript versies
JavaScript
Waarom JavaScript?
-
client-side
- websites
- apps
- webapps
- games
- ...
-
server-side
- informatie uit een database halen of in opslaan
- formulieren afhandelen en emails versturen
- ...
🌐 Breed inzetbaar
🧨 Designs dynamisch maken
- Bewegende elementen
- Interactie: klikken, swipen, draggen,...
- Elementen in-animeren
- Scroll effecten
- Next level hover effecten
- Responsive interfaces
- ...
😻 Enkele voorbeelden
- masitupungato.com: loading state, appear-in animations, parallax
- knowlupus.org: interactie, animaties
- sbs.com.au/theboat: muziek, scrolljacking
- manayerbamate.com: page transitions, scrolljacking, mouse events
- multeor.com: game
- bavet.eu: scroll animations, hover effects
- ...
- Bestaande software uitbreiden:
- Adobe After Effects
- Adobe Photoshop
- Blender
🚀 Veel JavaScript based tools
🚀 Veel JavaScript based tools
Hier gaan we in periode 4 mee aan de slag 🤩
🛠 Grote community, libraries & frameworks
JavaScript frameworks zijn een verzameling van JavaScript libaries en kant-en-klare code:
- development vereenvoudigen
- tijdsbesparend
- geteste componenten & patronen
🛠 Grote community, libraries & frameworks
Je zal uiteraard eerst de basis van JavaScript moeten begrijpen vooraleer je met een framework te werk gaat.
Begrip van JavaScript helpt jou als designer om dynamische, interactieve en vooral realiseerbare designs op te leveren, dankzij:
- 😩 begrip van de technische restricties
- 😍 inzicht in de technische mogelijkheden
🤝 Vlotte samenwerking met developers
Let's get started 🏁
