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:
    • ​🔗 JavaScript Essentials Training
    • 🔗 Git from Scratch

Waarom dit vak?

De pilaren van het web

• 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

• Vlot begrip en gebruik van low & no code tools
  • ​Framer 
  • Webflow

🚀 Veel JavaScript based tools

Hier gaan we in periode 4 mee aan de slag 🤩

• GSAP: JavaScript library om wicked animaties te maken
• Three.js
  • JavaScript library voor 3D animaties
  • obv. WebGL (= JavaScript API om 2D & 3D animaties te renderen)
• p5.js: JavaScript tool waarin je op een laagdrempelige manier JavaScript kan (leren) schrijven
• ...

🛠 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