Wk09 / UI/UX

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

This lesson contains 52 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 60 min

Items in this lesson

UI/UX
CSD-I
Week 9

Slide 1 - Slide

This item has no 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 - Slide

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 - Slide

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 - Slide

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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no instructions

Eerst nog even herhalen
  • Bestand in een variabele zetten




  • De data in de variabele omzetten naar een list

Slide 10 - Slide

This item has no instructions

Eerst nog even herhalen
  • Bestand in een variabele zetten






Slide 11 - Slide

This item has no instructions

Eigenlijk is dit twee keer hetzelfde programma.

Slide 12 - Slide

This item has no instructions

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

Slide 13 - Slide

This item has no 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 - Slide

This item has no 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

This item has no 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

This item has no instructions

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

Slide 17 - Open question

This item has no instructions

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

Slide 18 - Drag question

This item has no 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 - Slide

This item has no instructions

Voor we het vergeten - de For Loop

Slide 20 - Slide

This item has no instructions

Voor we het vergeten - de 'for-loop'

Slide 21 - Slide

This item has no instructions

Slide 22 - Slide

This item has no instructions

de for-loop

Slide 23 - Slide

This item has no instructions


Nu 

naar
de

grid 

lay-out

Slide 24 - Slide

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 - Slide

This item has no instructions

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

Slide 26 - Slide

This item has no instructions

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

Slide 27 - Slide

This item has no instructions

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

Slide 28 - Slide

This item has no instructions

Elementen plaatsen op een rij

Slide 29 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no instructions

Opbouw van je Grid

Slide 32 - Slide

This item has no instructions

Opbouw van je grid

Slide 33 - Slide

This item has no instructions

Opbouw van je grid



Grid.Row="0"                                            



Grid.Row="1"                                            












Slide 34 - Slide

This item has no instructions

Opbouw van je grid



Grid.Row="0"                                            



Grid.Row="1"                                            












Slide 35 - Slide

This item has no instructions

Attributen en Elementen van Grid

Slide 36 - Slide

This item has no 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 - Slide

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 - Slide

This item has no 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 - Slide

This item has no instructions

Voorbeelden

Slide 40 - Slide

This item has no instructions

Voorbeelden

Slide 41 - Slide

This item has no 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 - Slide

This item has no instructions

Dark Patterns
Opzettelijk een slechte UX gebruiken

Slide 43 - Slide

This item has no instructions

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

Slide 44 - Slide

This item has no instructions

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



Laten we kijken of we nog meer conventies nodig hebben.

Slide 45 - Slide

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



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

Slide 46 - Slide

This item has no instructions




Allemaal gevonden?

Slide 47 - Slide

This item has no 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 - Slide

This item has no instructions

Event Handlers


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

Slide 49 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

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 - Slide

This item has no instructions