Wk09 / UI/UX

UI/UX
CSD-I
Week 9
1 / 52
suivant
Slide 1: Diapositive
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

Cette leçon contient 52 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 60 min

Éléments de cette leçon

UI/UX
CSD-I
Week 9

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Deze week
Deze week:
  • Nog even herhalen
  • Voor we het vergeten - de For Loop
  • UI en UX
  • Werken met Grids
  • Herhalen/Ophalen naamgevingsconventies
  • Documenteren

Slide 2 - Diapositive

We bouwen verder op het tonen van data uit een tekstbestand. Waar we vorig hoofdstuk met weinig data hebben gewerkt, gaan we nu met veel data uit een csv-bestand werken. We gaan alle regels met data uit een csv-bestand in een lijst in onze app laten zien. Iedere regel krijgt dan een eigen plek in de lijst.
Opdracht: bekijk programma en antwoord
  1. Op regel 55 staat var csvReader = ..... gebruikt. Wat staat in deze variabele?
  2. Wat is een betere naam voor deze variabele (op regel 55)?
  3. Wat staat en waarom staat er iets tussen de haakjes bij new CsvReader(????) ?
  4. r23 -  Wat wordt er bedoeld met x:DataType = "local:Worker" ?
  5. Welke code zorgt er voor dat er een afbeelding in je app verschijnt en hoe werkt dat?
timer
6:00
Stilte, werk voor jezelf
Overleg met buur is ok
Werk in groepjes
Klik en zoom

Slide 3 - Diapositive

Vragen laten beantwoorden in textdocumentje en daarna "cold call" vragen in de klas.
Opdracht: bekijk programma en antwoord
  1. Op regel 55 wordt var csvReader = ..... gebruikt. Wat staat in deze variabele?
  2. Op welk regelnummer begint het sjabloon voor ieder item in de ListView en op welk eindigt het?
  3. r23 -  Wat wordt er bedoeld met x:DataType = "local:Worker" ?
  4. Welke code zorgt er voor dat er een afbeelding in je app verschijnt en hoe werkt dat?
timer
6:00
Stilte, werk voor jezelf
Overleg met buur is ok
Werk in groepjes
Klik en zoom

Slide 4 - Diapositive

Vragen laten beantwoorden in textdocumentje en daarna "cold call" vragen in de klas.
Van bestand naar List
  • Bestand selecteren
  • Bestand openen
  • Stream opzetten zodat we de inhoud kunnen lezen 
  • Reader maken waarmee we het bestand gaan lezen
  • De inhoud van het hele bestand in een variabele stoppen
  • De data in de variabele omzetten naar een list

Slide 5 - Diapositive

Cet élément n'a pas d'instructions

Eerst nog even herhalen
  • Bestand in een variabele zetten
  • Bestand openen
  • Stream opzetten zodat we de inhoud kunnen lezen 
  • Reader maken waarmee we het bestand gaan lezen
  • De inhoud van het hele bestand in een variabele stoppen
  • De data in de variabele omzetten naar een list

Slide 6 - Diapositive

Cet élément n'a pas d'instructions

Eerst nog even herhalen
  • Bestand in een variabele zetten

  • Stream opzetten zodat we de inhoud kunnen lezen 
  • Reader maken waarmee we het bestand gaan lezen
  • De inhoud van het hele bestand in een variabele stoppen
  • De data in de variabele omzetten naar een list

Slide 7 - Diapositive

Cet élément n'a pas d'instructions

Eerst nog even herhalen
  • Bestand in een variabele zetten


  • Reader maken waarmee we het bestand gaan lezen
  • De inhoud van het hele bestand in een variabele stoppen
  • De data in de variabele omzetten naar een list

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

Eerst nog even herhalen
  • Bestand in een variabele zetten



  • De inhoud van het hele bestand in een variabele stoppen
  • De data in de variabele omzetten naar een list

Slide 9 - Diapositive

Cet élément n'a pas d'instructions

Eerst nog even herhalen
  • Bestand in een variabele zetten




  • De data in de variabele omzetten naar een list

Slide 10 - Diapositive

Cet élément n'a pas d'instructions

Eerst nog even herhalen
  • Bestand in een variabele zetten






Slide 11 - Diapositive

Cet élément n'a pas d'instructions

Eigenlijk is dit twee keer hetzelfde programma.

Slide 12 - Diapositive

Cet élément n'a pas d'instructions

Eigenlijk is dit twee keer hetzelfde programma. Enige verschil:
  • Links is de lijst handmatig gevuld

Slide 13 - Diapositive

Cet élément n'a pas d'instructions

Eigenlijk is dit twee keer hetzelfde programma. Enige verschil:
  • Links is de lijst handmatig gevuld
  • Rechts wordt de lijst gevuld vanuit een csv-file

Slide 14 - Diapositive

Cet élément n'a pas d'instructions

Je wil een lijst met namen opslaan

Wat is de juiste aanpak?
A
Maak een klasse "Namen" in de MainPage.
B
Maak een klasse "Naam" in de MainPage.
C
Maak een List van strings en vul deze met namen.
D
Maak een klasse "Naam" in een eigen file Naam.cs.

Slide 15 - Quiz

Cet élément n'a pas d'instructions

Je wil een lijst met studenten opslaan met een naam en leeftijd

Wat is de juiste aanpak?
A
Maak een klasse "Studenten" in de MainPage.
B
Maak een klasse "Student" in een eigen file Student.cs
C
Maak een klasse " Students" in een eigen file Students.cs
D
Maak een List en vul deze met Dictionaries van studenten

Slide 16 - Quiz

Cet élément n'a pas d'instructions

Schrijf de code om de properties Naam en
Leeftijd te declareren in de class Student

Slide 17 - Question ouverte

Cet élément n'a pas d'instructions

<ListView.ItemTemplate>
<ListView ...>
<DataTemplate ...>
<TextBlock Text="{x:Bind ...}">

Slide 18 - Question de remorquage

Cet élément n'a pas d'instructions

Belangrijk
                                               



Xaml kijkt naar de gecompileerde code van je applicatie. Is je programma nog niet succesvol een keer gestart (en dus gecompileerd) dan zal Xaml de class niet kunnen vinden. 
Oplossing:
      - Maak eerst de extra class aan die je gaat gebruiken.
      - Start hierna je 'lege' applicatie zodat je zeker weet dat er geen fouten zijn en je applicatie       
         dus succesvol gecompileerd wordt.
      - Ga hierna verder met het bouwen van je applicatie.

Slide 19 - Diapositive

Cet élément n'a pas d'instructions

Voor we het vergeten - de For Loop

Slide 20 - Diapositive

Cet élément n'a pas d'instructions

Voor we het vergeten - de 'for-loop'

Slide 21 - Diapositive

Cet élément n'a pas d'instructions

Slide 22 - Diapositive

Cet élément n'a pas d'instructions

de for-loop

Slide 23 - Diapositive

Cet élément n'a pas d'instructions


Nu 

naar
de

grid 

lay-out

Slide 24 - Diapositive

We bouwen verder op het tonen van data uit een tekstbestand. Waar we vorig hoofdstuk met weinig data hebben gewerkt, gaan we nu met veel data uit een csv-bestand werken. We gaan alle regels met data uit een csv-bestand in een lijst in onze app laten zien. Iedere regel krijgt dan een eigen plek in de lijst.
Grid
  • Grid is een raster dat bestaat uit rijen en kolommen
  • Een hokje in een grid noemen we cell

Slide 25 - Diapositive

Cet élément n'a pas d'instructions

Grid
  • Grid is een raster dat bestaat uit rijen en kolommen
  • Een hokje in een grid noemen we cell

Slide 26 - Diapositive

Cet élément n'a pas d'instructions

Standaard Grid
Een standaard grid bestaat uit 1 rij en 1 kolom (dus 1 cel)

Slide 27 - Diapositive

Cet élément n'a pas d'instructions

Standaard Grid
Een standaard grid bestaat uit 1 rij en 1 kolom (dus 1 cel)

Slide 28 - Diapositive

Cet élément n'a pas d'instructions

Elementen plaatsen op een rij

Slide 29 - Diapositive

Cet élément n'a pas d'instructions

Elementen plaatsen op een rij










 1* geeft aan dat de hoogte van de rij 1/4e van het totaal inneemt
3* geeft aan dat de hoogte van de rij 3/4e van het totaal inneemt

Slide 30 - Diapositive

Cet élément n'a pas d'instructions

Elementen plaatsen op een rij










 Auto -- geeft aan dat de hoogte automatisch wordt bepaald door de inhoud
     *     -- geeft aan dat de andere rij de rest van de ruimte inneemt.

Slide 31 - Diapositive

Cet élément n'a pas d'instructions

Opbouw van je Grid

Slide 32 - Diapositive

Cet élément n'a pas d'instructions

Opbouw van je grid

Slide 33 - Diapositive

Cet élément n'a pas d'instructions

Opbouw van je grid



Grid.Row="0"                                            



Grid.Row="1"                                            












Slide 34 - Diapositive

Cet élément n'a pas d'instructions

Opbouw van je grid



Grid.Row="0"                                            



Grid.Row="1"                                            












Slide 35 - Diapositive

Cet élément n'a pas d'instructions

Attributen en Elementen van Grid

Slide 36 - Diapositive

Cet élément n'a pas d'instructions

Aan de slag


Opdracht 5: Vlaggen
Pagina 126

  • Maak voor iedere vlag een nieuw project maar binnen één solution.
  • Kijk naar het gele kader hoe je al deze projecten in één solution kunt plaatsen.
  • Lees het tweede gele kader Extra: Andere type lay-out
Stilte, werk voor jezelf
Overleg met buur is ok
Werk in groepjes
Doel:
* Leren werken met de attributen en elementen van Grid

* Leren met Grid je lay-out op te maken

* Leren meerder projecten in één solution te plaatsen

Hulp:
Zie paragraaf 2 + 3
Klaar?
Zie gele blok aan het einde van het hoofdstuk voor meer oefeningen

Slide 37 - Diapositive

We bouwen verder op het tonen van data uit een tekstbestand. Waar we vorig hoofdstuk met weinig data hebben gewerkt, gaan we nu met veel data uit een csv-bestand werken. We gaan alle regels met data uit een csv-bestand in een lijst in onze app laten zien. Iedere regel krijgt dan een eigen plek in de lijst.
UX

Slide 38 - Diapositive

Cet élément n'a pas d'instructions

Wat is UX?
  • UX staat voor User Experience
  • De beleving van de gebruiker
  • De UX en UI zijn nauw met elkaar verbonden in een applicatie

Slide 39 - Diapositive

Cet élément n'a pas d'instructions

Voorbeelden

Slide 40 - Diapositive

Cet élément n'a pas d'instructions

Voorbeelden

Slide 41 - Diapositive

Cet élément n'a pas d'instructions

Accessibility / Toegankelijkheid
Door ontwikkelaars vaak geschreven al a11y

Nadenken over a11y
  • Niet alleen voor mensen met een permanente
      beperking
  • Mensen in het gips
  • Kleurenblind
  • Responsive websites (mobiel toegankelijk)

Slide 42 - Diapositive

Cet élément n'a pas d'instructions

Dark Patterns
Opzettelijk een slechte UX gebruiken

Slide 43 - Diapositive

Cet élément n'a pas d'instructions

Toegankelijke code
Denk bij het maken van een applicatie ook aan je collega ontwikkelaars!

Slide 44 - Diapositive

Cet élément n'a pas d'instructions

Nettere code schrijven
Conventies
   - lowerCamelCase   -- Elementen, lokale variabelen
   - UpperCamelCase  -- Properties, Klassen
 



Laten we kijken of we nog meer conventies nodig hebben.

Slide 45 - Diapositive

Conventies = afspraken,
bijvoorbeeld naamgevingsconventies = afspraken over namen van structuren in code



Zoek de elementen...
(die in de XAML een x:Name heeft)

Slide 46 - Diapositive

Cet élément n'a pas d'instructions




Allemaal gevonden?

Slide 47 - Diapositive

Cet élément n'a pas d'instructions

Elementen
Naamgeving
We gaan elementen beter herkenbaar maken in onze code:
Geef vanaf nu een element altijd een beschrijvende lowerCamelCase naam die eindigt op El (van Element).

Bijv.:
nameEl
emailEl
receiveNewsEl

Slide 48 - Diapositive

Cet élément n'a pas d'instructions

Event Handlers


IntelliSense verzint voor meerdere knoppen, slechte namen voor event handlers:

Slide 49 - Diapositive

Cet élément n'a pas d'instructions

Event Handlers
Vanaf nu gaan we dit netjes oplossen door knoppen altijd eerst een x:Name te geven. Daarna koppelen we de Event Handler pas:




Dan kunnen we iedere knop een beschrijvende naam geven.

Slide 50 - Diapositive

Cet élément n'a pas d'instructions

Aan de slag


Opdracht 10
pagina 134


Let op dit moet je ook inleveren!

Stilte, werk voor jezelf
Overleg met buur is ok
Werk in groepjes
Doel:
* Vergaarde kennis vastleggen in een document

* Documenteren als belangrijk onderdeel van je vakgebied

* Oefenen maken "Conventiedocument"
Hulp:
Zie paragraaf 6 t/m 9 en doorzoek het moduleboekje op "conventie"
Klaar?
Start met de weekcheck

Slide 51 - Diapositive

We bouwen verder op het tonen van data uit een tekstbestand. Waar we vorig hoofdstuk met weinig data hebben gewerkt, gaan we nu met veel data uit een csv-bestand werken. We gaan alle regels met data uit een csv-bestand in een lijst in onze app laten zien. Iedere regel krijgt dan een eigen plek in de lijst.
Weekcheck H10
Introductie + zelfstandig werken.


Slide 52 - Diapositive

Cet élément n'a pas d'instructions