sprint2-website's Introduction

Mijn OBA

Ontwerp en maak een interactieve familiepagina voor de OBA website.

User Story

Als oba-account-beheerder wil ik op de website een familieoverzicht waarin ik de leesactiviteit van mijn kinderen kan bijhouden.

Beschrijving

In deze sprint staat het maken van een interactieve website centraal. Voor deze opdracht kies je een user Story waarin een gebruiker iets moet doen, zoals het toevoegen van informatie aan een agenda of stap voor stap door een vragenlijst klikken, een chat-formulier of bijvoorbeeld een filter systeem. Als een gebruiker interactie heeft met een systeem, moet je goede feedback/feedforward ontwerpen en maken. Zo weet een gebruiker wat die kan verwachten en of de actie gelukt is.

Deze sprint ben ik helemaal opnieuw begonnen op advies van de leraar. Dit zodat ik leer om eerst te bouwen voor de mobiel. Ik heb voor deze sprint gekozen voor twee verschillende interacties/animaties. Dit is het in en uitklappen van de navigatie en het aanzetten van dark mode. Voor meer toegankelijkheid heb ik gekozen om een dark mode te maken (ik wilde dit ook in de vorige sprint doen). Ik heb een toggle animatie gemaakt dat als je op de knop klikt, de toggle naar rechts gaat, en wanneer je er nogmaals op klikt, de toggle weer terug naar links gaat. Voor de navigatie heb ik iets soortgelijks gemaakt. Wanneer je op de knop drukt, gaat de navigatie zichzelf inklappen waardoor je alleen nog de icoontjes ziet staan. Wanneer je weer op de knop drukt, klap de navigatie weer uit en zie je meer informatie. Hieronder zal ik de animaties laten zien:

Desktop

Familieoverzicht

Dark Mode

Mobiel

Ingeklapt

Uitgeklapt

Dark Mode Ingeklapt

Dark Mode Uitgeklapt

Kenmerken

Bekijk even mijn wiki! In de wiki is meer te zien over het werkproces!

Licentie

This work is licensed under GNU GPLv3.

sprint2-website's People

Contributors

Watchers

sprint2-website's Issues

Veel witregels

Het is niet per se fout, maar je gebruikt erg veel witregels.

Zoals bijvoorbeeld in index.html; maar eigenlijk ook in de rest van de pagina's

</head>
<body>

    <img src="./image/oba_20.png">

    <h1>Kies je profiel:</h1>

    <section class="profielen">
        <ul>
            <li><a href="./mijnoba.html"><img src="./image/AmberFoto.jpeg">Papa</a></li>
            <li><a href="./mijnoba.html"><img src="./image/AmberFoto.jpeg">Mama</a></li>
            <li><a href="./mijnoba.html"><img src="./image/AmberFoto.jpeg">Kind 1</a></li>
            <li><a href="./mijnoba.html"><img src="./image/AmberFoto.jpeg">Kind 2</a></li>
        </ul>
    </section>
    
</body>

Wanneer je veel witregels gebruikt, raken ze hun betekenis een beetje kwijt. Wanneer ieder element een witregel ertussen heeft, staan ze eigenlijk allemaal weer op dezelfde afstand van elkaar. Een witregel werkt (naar mijn mening) beter wanneer er minder in staan, omdat het dan een duidelijk verschil aangeeft tegenover elementen waar geen witregel tussen staat

Id

https://github.com/TygoWolven/the-client-website/blob/a9f8bed46644082c995ff12707085890adff12b6/depositos.html#L148

Waarom zit hier een id op?

Meer ruimte in je code

https://github.com/TygoWolven/the-client-website/blob/a9f8bed46644082c995ff12707085890adff12b6/familieoverzicht.html#L154-L159

Je kan beter de "li" tags onder elkaar tussen de "h3" "p" en "img", je kan ook een toevoegen voor de images!

Style code in HTML

In de HTML code van je familieoverzicht.html pagina, staat een style attribuut binnen je HTML code:

line 59-64

    <li class="nav-link" style="background: #FF0000; border-radius: 6px;">
        <a href="./familieoverzicht.html">
             <i class='bx bx-group icon' style="color: #FFF;"></i>
             <span class="text nav-text" style="color: #FFF;">Familieoverzicht</span>
        </a>
    </li>

Het is beter om alle styling buiten de HTML te houden, en dit alleen in je CSS bestand te hebben staan. Als je een specifiek element andere styling wil geven, kun je er beter een class (of id) op zetten.