Week 5 - Fabienne02/cmda-mid-term GitHub Wiki

Dit is de laatste sprint week die we hebben, bestaande uit 3 dagen. Tijdens deze week hebben we er volop voor gezorgd 1 pagina tot de detail uit te werken om de tevredenheid van onze opdrachtgevers vast te stellen.

Week 5

  • Eindgesprek 1
  • Gespeeld met V-model
  • Responsiveness van elementen bijgewerkt
  • HeaderPaginaComp
  • Summary / bulletpoint Comp
  • Eindgesprek 2

Eindgesprek 1

Wij hebben een eindgesprek gehad dinsdag ochtend om te kijken hoe de tevredenheid van onze opdrachtgevers ervoor ligt. Hierbij kwam eruit dat ze nog niet tevreden waren omdat het resultaat voor hun oog nog te vercweg lag. Daarom hebben we besloten sowieso 1 pagina tot de puntjes af te maken om dit te laten kunnen zien.

eerst CMD Agency

sprint meeting; aan de slag met design iteratie en iteratie op responsiveness

index pagina is hetzelfde als die van ons dus dat is mooi.

tabel is aangepast van oud en nieuw (dus dit moet even anders)

genummerde tabel heeft unieke OL

design padding en afstanden niet consistent

2.7 heeft een video? styleguide heeft geen informatie over grootte van de micro icons.

op iPad de belangrijkste kaartjes (cmd methods) of een carousel van fotos van de kaartjes.

2.2 klapt uit naar de zijkant?

typo controle van de standaarden.

3.1 heeft iets uniek met de onderwijs- en toetsbeleid?

een link naar 3.1 voor de content. (pdf van de website).

toetsplan van CMD is anders dan die van HvA.

David: uitklap dingetje i is popup, en driehoek is detaillist?

Volle breedte ipv kwart van scherm (popup Element)

NSE resultaten open blijven lijkt op popup maar is anders.

Dit is niet mogelijk met de CMS want de content is staat niet uitgelijnd, staat gewoon naast elkaar. dus de componenten vallen naast elkaar.

nog even over nadenken wat er met de footer gedaan moet worden.

intro tekstje kan je zelf aanpassen.

ontbreekt volgens CMDA: inleiding, info footer, schoonheidspuntjes

visualisatie van de diagram standaard 1.0

Onze iteratie

Titels moeten nog uniform gemaakt worden

Hero intro van iedere standaard

Footer moet nog gemaakt worden

summary ook nog verbeteren.

We moeten ook onze iteratieslag laten zien hoe wij van componenten naar slices zijn gegaan. (de verandering van statisch naar dynamisch)

Image moet wss ook een video zijn. niet perse een image

kopjes lopen nog niet helemaal mee maar dat kan aan te passen zijn. schoonheid styling

uitleg van Prismic en slices.

Enkele componenten moeten nog weergegeven worden.

irene lachte om de colour picker.

redesign van component nog niet maar wel nieuwe design ontworpen.

feedback ongeacht tijd;

irene prettig: wat krijg ik te zien.

inloggegevens prismic.

hoeverre ingevuld. wat wij invullen, aanpassen log je in en kan je aanpassen wat je wilt.

wij zetten alles erin wat zij hebben(?)

componenten responsinve te maken zodat het alleen aangeroepen moet worden.

david: letters lijken kleiner

2.4 en onderwijs hebben dubbele lijn. tekst lijkt klein.

nog iets wat opvalt; ergens denk ik dat het mooier is dat de hele bank van onder tot boven zwart wordt. Dat is het voor nu - david

ben je tevreden mee met wat we nu aanleveren? Lijkt okay, zou eerst moeten testen als het werkt of niet. volgens mij wel prima. lijkt goed te werken. wat david zelf weet opmerking inconsistenties.

nieuwschierig: wat niet in CMS staat, footer toevoegen, via github.

bijhouden wat niet toegevoegd is, hoe wat waar add ons etc.

loopt door elkaar heen, onrealistische hoop. heel weinig tot geen animaties (animatie on scroll?)

Kan ik dit in een dag

technische aspect documentatie wat levendiger, gifjes aanleveren. eigenlijk SVG.

animatiecomponent waar je de SVG /GIF opstuurt. (CM3D) de 3D duurzaam, diversiteit, toegankelijkeheid, )

vind het ook prima als het Gif is.

Jos moet wel duurzaam zijn;

rijtje voor de duurzaamheid PWA.

activew state meer duidelijker css

tab focus heeft een betere view nodig. (tab border)

hebben ze een goed beeld hoe het er netjes staat.

betekent de deadline af: niet af. maar voor david en irene.

alle componenten komen erin staan.

hoe tevreden zijn wij: nog niet. hoe kunnen we jou wel tevreden maken: overtuigt, dat het goed zal staan. komt af dan ben ik tevreden.

niet het vullen maar de content componenten

vragen stellen vandaag later, of morgen te stellen. donderdag zijn zij niet beschikbaar maar David bijvoorbeeld wellicht misschien wel.

irene gelooft ons wel maar ziet het nog niet. niet tevreden wat er staat maar wel tof dat het al kan. Wat heeft irene nodig; netjes eruit ziet.

kleine details waar ik mij erger aan staat (titels van de cms bv)

zo ver mogelijk aanleveren met de tijd dat ons mogelijk is.

vast dingen te vullen, theoretisch mogelijk dat een van de pagina’s af is.

donderdag 1 link met goeie dingen.

spreken over twee dagen (donderdag)

baal ervan dat het er niet in zit: 3d maar behalve dat (persoonlijk uit david)

Irene kan nu niet iets verzinnen

(we moesten eigenlijk gewoon beetje voorbereiden, maarja dit krijg je als je een dag van te voren hoort dat we de volgende dag een deadline hebben)

documentatie hoe er verder aangewerkt kan worden.

blij dat we toch nog samen zijn en samen kunnen werken.

ik als onderwijzer denkt dat dit een waardevolle ontwikkeling is geweest hoe jullie eruit zijn gekomen ← david

benieuwd voor david omdat het bijna af is maar nog wat details zijn.

prioriteiten;

  1. basic pagina die er al okay uit ziet dan iets dat niet helemaal af is. ← realistisch?

Gespeeld met V-model

Ik heb om Vue beter onder de knie te krijgen wezen kijken naar V-model. Deze heb ik geïnplementeerd in mijn quotecomp.vue om mijn javascript code te verminderen. Hierbij heb ik V-model gezet op mijn input samen met een eventlistener op input change. Deze verwijze naar de method die de kleur defineerd.

<script>
export default {
  name: 'QuoteComp',
  data() {
    return {
      colorCode: '',
    }
  },
  methods: {
    changeColor() {
      const bubble = document.querySelector('.bubble')
      bubble.style.backgroundColor = this.colorCode
      bubble.style.setProperty('--border-color', this.colorCode)
    },
  },
}

 <input
            type="color"
            id="colorWeel"
            value="#f8f0d5"
            v-model="colorCode"
            @input="changeColor"
          />
          <label for="colorWeel"
            ><img
              src="https://images.prismic.io/cmd-midterm/5aa4c117-b663-4f09-9144-1c33b6798026_colorpicker.png?auto=compress,format"
          /></label>

Responsiveness van elementen bijgewerkt

Ook heb ik de responsiveness bijgewerkt door middel van fonts in VW of EM, Display:Flex / Wrap en @media tags.
@media only screen and (max-device-width: 1200px)

Bij de elementen

  • Summary
  • Header
  • Index
  • BulletPoints

HeaderPaginaComp

Ik heb een header component gemaakt voor elke pagina.

Summary / bulletpoint Comp

Daarnaast heb ik bulletpoint component gemaakt en de summary component verbeterd in content, responsiveness en positionering.

⚠️ **GitHub.com Fallback** ⚠️