Week planning

1. De template Portfolio Module 2 downloaden

• Net als in module 1 ga je nu weer jouw portfolio template downloaden. Deze keer de template van module 2
• De template voor jouw portfolio kun je downloaden van GitHub.
  Klik eerst op de groene Code knop, en daarna op de blauwe Download ZIP knop.
• Sla je nieuwe portfolio op naast je vorige op in je METE web map op OneDrive. (laat’m dus niet in je downloadmap staan)
• Pas je naam overal aan. Zoek in de code (Command F) naar Naam student

Voor elke opdracht die je deze module gaat maken heb je een tegel nodig. In de vorige module stonden alle tegels voor je klaar. Nu ga je zelf voor elke opdracht een tegel aanmaken. Natuurlijk ga je deze tegels kopiëren.

Inhoud online expo NL vormgever

Hieronder staan alle opdrachten die in jouw online expo worden verwacht. Voor elke opdracht maak je een tegel. Elke tegel voorzie je van een korte beschrijving van de opdracht (naam, datum van de opdracht, wat heb je gemaakt, hoe heb je het gemaakt). En natuurlijk voorzie je elke opdracht van beeld (afbeelding, pdf of video/audio).

1. AVO: geluidsopname waarin je vertelt over het gemaakte beeld dat is geïnspireerd op de gekozen Nederlandse vormgever
2. BO-Ontwerpproces: beeldend onderzoek naar jouw gekozen vormgever
3. BO-Ontwerpproces: het 3-dimensionaal, interactief of bewegend beeld geïnspireerd op je gekozen Nederlandse vormgever
4. Ontwerp: de poster in de stijl van de gekozen vormgever (jpg of png, geen pdf want dat is minder mooi online)
5. DTP: expo-informatiefolder (dit kan weer wel als pdf want het is een folder met meerdere pagina’s)
6. Motion Graphics: promotiefilmpje (Youtube, Ms Stream of zelf hosten)
7. Eigen werk of werk van andere expertises (FLEX) die jij graag wil laten zien in jouw portfolio/online expo Nederlandse ontwerper

Tip kopiëren met sneltoetsen

Op een Mac is kopiëren Command C, en plakken Command V.

Op een Windows PC is dat Control C en Control V.

Ken je de toetscombinatie voor opslaan al?

2. Tegels maken voor alle opdrachten

1. Verschil tegels Module 1 en 2
2. Tegels dupliceren
3. Tegels met uniek id
4. Tegels een titel geven

Opdracht 2: Tegels maken

Maak voor elke opdracht die je krijgt bij de units en expertises (zie hierboven) een tegel aan.

• Plaats de titel van de opdracht in de <h2> van de tegel
• Plaats de naam van de unit in de <h3> van de tegel
• De beschrijving komt later. Die ga je waarschijnlijk maken bij taalvaardigheid.
• Je bent waarschijnlijk nog niet begonnen aan die opdrachten dus je weet nog niet exact wat je gaat maken en of je een afbeelding, een pdf of een filmpje moet plaatsen. Dat komt dus ook later.

3. CSS intro

In onderstaande instructievideo’s leer je over Cascading Style Sheets oftewel CSS

1. HTML-versies & W3C (05:53)
2. CSS (2:27)
3. Eigen stylesheet (CSS) maken

Structuur van de code van style-declaraties

CSS (oftewel stylesheets) schrijf zoals je ziet in de afbeelding hiernaast.

• Dus eerst de HTML-tag, .class of #id (dat heet de selector in het Engels)
• Dan een accolade, zo’n sierlijke haak {
• Dan de declaratie zelf. Elke declaratie sluit je af met een punt-komma ;
• Ben je klaar met alle style declaraties, dan sluit je af met weer een sierlijke haak }
• Het maakt niet uit of je alles op een regel schrijft of alles onder elkaar. Maar onder elkaar is wel duidelijker voor jou.

4. CSS color en background-color

Geef je tegels een eigen stijl. Dat kan bijvoorbeeld met kleur.

1. CSS color, kleuren in je eigen stylesheet (CSS)
2. CSS color, kleuren op verschillende manieren schrijven
3. CSS background-color, achtergrond kleuren met CSS
4. Kleuren selecteren met de element inspector. Met de element inspector kun je heel goed kleurcombinaties testen.

5. CSS background-image

In dit hoofdstuk ga je weer een stapje verder. Je gaat werken met achtergrond afbeeldingen.

1. CSS Background-image en rechtenvrij beeldmateriaal
2. CSS Background-image properties (-repeat, -attachment, -size, -position). Verschillende eigenschappen van background-image
3. CSS Background-color in de header aanpassen
4. CSS gradient. Kleurverloop maken met een gradient generator

6. CSS border

CSS border gaat over de rand van je HTML elementen. Ook die kun je opmaken.

1. CSS border, randen om HTML elementen stylen
2. CSS border-radius, randje met rond hoekje
3. CSS border-image, een plaatje als randje

7. CSS typografie lettertype/font

Als laatste ga je ook op zoek naar een ander lettertype. Jouw online expo maakt waarschijnlijk nog gebruik van het standaard lettertype Verdana.

Opr regel 4 van de basis-style.css staat dit:

Dat betekent dat het standaard lettertype Verdana wordt geladen. Dit is een lettertype die op elke mac of pc beschikbaar is. In dit hoofdstuk ga je dat aanpassen. Kopieer en plak dit stukje CSS-code uit de basis-style.css in jouw eigen stylesheet. Bekijk vervolgens onderstaand filmpje hoe je een ander lettertype kunt toevoegen aan jouw pagina.

Wat betekent dat * achter de body?
Het sterretje * achter de style beschrijving body * {...} betekent dat alle html elementen binnen de body-tag een bepaalde style krijgen. Zo’n * werkt als een joker of wild-card.

Met onderstaande style beschrijving maak je bijvoorbeeld in een keer alles rood binnen de div met class container.

/*CSS*/
div.container *{
   color: red;
}

<!--HTML-->
<div class="container">
   <h1>Deze titel wordt rood</h1>
   <p>Deze broodtekst wordt ook rood</p>
   <p>
      <a href="http://mamv.nl">En deze link wordt ook rood</a>
   </p>
</div>

8. HTML elementen met class en id

De tegels in jouw online expo hebben allemaal twee classes: tegel en helft_breed. Die helft_breed kun je zelf aanpassen zodat je tegels smaller of breder worden. In dit hoofdstuk leer je ook de volgorde van de tegels aan te passen in je stylesheet. En als laatste zijn er 2 instructie video’s hoe jouw header beeldvullend te maken en jouw titel aan te passen.

1. class en id gebruiken in CSS
2. breedte van de tegels aanpassen d.m.v. class (kwart_breed, een_derde_breed, helft_breed, twee_derde_breed, volle_breedte)
3. drie_kwart_breed class bijmaken in je stylesheet
4. volgorde van de tegels aanpassen in je CSS met order
5. beeldvullend achtergrondplaatje in de header
6. font-size aanpassen van de h1 in de header

9. Startpagina opmaken en linken

Jouw webpagina’s gaan samen een geheel vormen. In dit hoofdstuk maak je een startpagina met links naar jouw 2 webpagina’s van module 1 en module 2. Hiervoor moet je een aantal technieken combineren die je al hebt geleerd in de basiscursus HTML, module 1 en module 2:

• Het maken van een html pagina (basiscursus HTML hoofdstuk 1)
• Het maken van een titel (<h1>) (basiscursus HTML hoofdstuk 1)
• Het maken van hyperlinks (<a href) naar je 2 webpagina’s (basiscursus HTML hoofdstuk 2)
• Het opmaken van deze pagina met kleuren, randen, (achtergrond)plaatjes, etc. Dat heb je geleerd tijdens deze module.

Opdracht 9: startpagina maken

Eerst zorg je ervoor dat je beide webpagina’s naast elkaar in een portfolio map staan in Finder (of Windows Verkenner)

• Maak in Finder (Mac) of in Windows Verkenner (Windows PC) naast jouw 4 module mappen een nieuwe map en noem die portfolio
• Verplaats jouw portfolio mappen van Module 1 én Module 2 naar die nieuwe portfolio map.
  Jouw mappenstructuur ziet er dan zo uit:
  

• Maak nu een nieuwe html pagina aan in Brackets. Sla deze op in jouw nieuwe portfolio map. Noem deze pagina weer index.html
• Deze pagina wordt jouw startpagina om naar al jouw webpagina’s te gaan.
• Zet in deze pagina een
  • <h1>met jouw naam</h1>
  • Twee keer een link:
    • <a href="portfolio-module-1/index.html">Module 1</a>
    • <a href="portfolio-module-2/index.html">Module 2</a>
• Let op. In de href van de links moet natuurlijk precies de mapnaam staan die jij jouw webpagina’s hebt gegeven.
• Maak deze pagina op zoals jij dat mooi vindt. Je hebt hier nu bijna alles voor geleerd. Geef je pagina kleur en/of een achtergrond afbeelding, geef je links kleur en een rand. Zoek een mooi lettertype uit. Maak dit helemaal jouw pagina.

Laat zien wat je kunt.

10. QR-code naar audiofragment en online expo

Bij deze opdracht voeg je het audiofragment dat je bij Taalvaardigheid maakt toe aan je online expo. Tevens maak je een aparte pagina met jouw audiofragment die je koppelt aan een QR-code.

Maak 2 QR-codes die je beide toont op de fysieke expositie:

• 1 naar je audiofragment
• 1 naar je online expositie pagina.

1. Audiofragment converteren naar mp3
2. HTML code van de audioplayer in jouw pagina plaatsen
3. Audioplayer opmaken met CSS
4. Audiofragment in aparte pagina zetten
5. QR-code maken en linken naar jouw audiofragment

In bovenstaande instructievideo’s worden deze links gebruikt:

• Audioplayer kopiëren met behulp van de HTML Audioplayer op W3schools
• MP3 formaat converteren kan je doen met deze MP3 converter
• QR code maken kan met goqr.me

Media insluiten: afbeelding, PDF, video in jouw webpagina’s

Afbeelding, PDF en video in jouw portfolio

• Project aanmaken in Brackets (in VS Code gaat het net zo)
• PDF exporteren vanuit InDesign
• PDF verkleinen met Acrobat
• PDF insluiten (embedden) in je portfolio
• Plaatje (jpg, gif, png, svg) toevoegen in je html pagina
• Youtube video insluiten in jouw portfolio
• Ms Stream video insluiten in jouw portfolio
• Plaatjes - (basiscursus) (07:14)
• Submappen - (basiscursus) (04:18)
• Links maken - (basiscursus) (03:52)
• Plaatje dat linkt - (basiscursus) (01:34)
• Iets online zetten op jouw ma-cloud.nl en inleveren in een Teams opdracht/assignment.

Inleveren portfolio link

1. Zet je portfolio online via Filezilla op: 
   http://studentnummer.hosts1.ma-cloud.nl/portfolio-module-2
   of
   http://studentnummer.hosts2.ma-cloud.nl/portfolio-module-2
2. Geef daarna je link door in de Teams opdracht

Extra info
Bestanden verkleinen voor websites:

1. bestanden aanpassen (Photoshop) (04:18)
2. Wanneer maak je een JPG en wanneer een PNG? Save for Web in Photoshop (5:17)
   Stelregel: JPG gebruik je voor foto’s, PNG voor logo’s.
   Want:
   • Een foto opslaan als JPG is meestal beter van kwaliteit en lichter qua KB’s dan dezelfde afbeelding in PNG
   • En andersom: een logo of lijntekening opslaan als PNG is meestal lichter en beter van kwaliteit dan dezelfde afbeelding als JPG
3. kleine PDF maken in Indesign en AcrobatPro vanaf 02:45 (03:32)
4. verschillende bestanden combineren tot 1 PDF (Acrobat) (03:45)
5. kleine PDF maken met Illustrator (02:05)
6. kleine PDF maken in Word en Powerpoint (02:40)
7. video's kleiner maken (01:39)

Afbeeldingen

Afbeeldingen stop je in een img tag. Afbeeldingen zijn jpg, gif, png of svg.

Wanneer gebruik je een jpg?

JPG is het meest geschikt voor foto’s. Foto’s van je telefoon of camera bijvoorbeeld. Een jpg sla je op via bijvoorbeeld Photoshop.

Waneer gebruikt je gif of png?

GIF en PNG zijn vooral geschikt als logo. Strakke vlakken? Dan GIF of PNG. Gif is wat ouderwets. Tegenwoordig gebruiken we vooral png. Tenzij je natuurlijk een animated gif maakt.
PNG is er in twee varianten: PNG 8 en PNG 24. PNG 24 heeft transparantie maar is veel zwaarder (KB) dan PNG 8. Een png of gif sla je op via bijvoorbeeld Photoshop of Illustrator.

Wanneer gebruik je svg?

SVG is een schaalbaar vector plaatje. Dit is heel licht en heel goed van kwaliteit. Vooral logo’s en strakke vormen zijn geschikt voor SVG. Een svg maak je met bijvoorbeeld illustrator.

Video

Video’s zet je bij voorkeur op een streaming dienst zoals Youtube, Vimeo of Ms Stream. Zo’n video embed je dan via een iframe. De code kopieer je via de delen functionaliteit van Youtube of Ms Stream.

Video’s op je eigen server van het Mediacollege zetten heeft 2 nadelen: je server ruimte is heel snel vol. Je hebt maar 1GB. En het streamen video zonder streaming dienst als Youtube is trager. Een video op je eigen server maak je met een video tag

Youtube

Youtube is natuurlijk gratis en veel studenten hebben daar een account. En de streaming dienst is van heel goede kwaliteit. Maar youtube heeft ook nadelen:

Nadelen Youtube

• Youtube levert je ook reclame en aan het eind van je video krijg je altijd suggesties voor meer video te zien.
• Heb je een bekend muziek nummer (wat niet rechtenvrij is) in jouw filmpje verwerkt? Dan kan je je filmpje niet insluiten in jouw website.

Ms Stream

Ms Stream hoort bij jouw Ms Office pakket, net zoals Outlook en OneDrive. Daar kun je je video’s streamen zolang je dat school account hebt. Het grote voordeel is dat je ook video’s kunt insluiten die bekende muziek nummers bevatten. Bij Youtube kan dat niet.

Nadelen Ms Stream

• Ms Stream heb je zolang je op het Mediacollege zit. Zodra je school verlaat wordt dat account opgeheven.
• Ms Stream is niet openbaar. Alleen mensen met een Mediacollege account kunnen jouw video’s zien.
• Ms Stream is trager en heeft een minder prettige interface.

Leerdoelen

Kerntaak 1.5:

1. Presenteert een media-uiting

Kerntaak 2: Realiseert media-uiting

1. Bereid realisatie voor
2. Maakt de media-uiting
3. Levert een media-uiting op
4. Houdt archief bij

Resultaat

Altijd en overal je portfolio up to date en online bij de hand. Nooit meer zoeken om oude opdrachten, docenten kunnen je werk vinden via je studentnummer, want de URL daarna is voor iedere student hetzelfde: http://studentnummer.hosts1.ma-cloud.nl/portfolio