Code Monkey home page Code Monkey logo

fix-the-flow-interactive-website's People

Contributors

anna-kyra avatar doriend avatar joostf avatar ju5tu5 avatar koopreynders avatar krijnhoetmer avatar

fix-the-flow-interactive-website's Issues

Stakeholders individueel beschrijven

  • Bij de individuele stakeholder pagina's de echte klanten, medewerkers, leveranciers, etc. benoemen.
  • Website met highly rated in stakeholders en daaronder subsecties van bijvoorbeeld suppliers, customers etc. (geen personen)

Feedback 2e jaar

Niet echt veel feedback kan meteen beginnen. De tweede jaar was wel een beetje verdwaald bij de eerste schets, omdat de frames boven elkaar staan. Dit kan ik verholpen om ze de volgende keer achterelkaar te schetsen, zodat de flow goed zichtbaar is. Ook kreeg ik een tip om bij een andere eerste jaars (Robin) te kijken, omdat hij ongeveer een zelfde soort interactie had.

Feedback Michel

  • Meer hameren bij Michel of iets werkt of misschien niet werkt. Geef meer advies.
  • Michel zit vast aan het 1e idee, ben je er niet mee eens dan moeten we het laten weten.

Interactieve checkboxes

Heel cool hoe je dit met :checked gemaakt hebt! Twee issues alleen:

  1. De alt attributen van de images hier zijn wel nuttig. Zet hier bijvoorbeeld alt="1. No poverty" en alt="2. Zero hunger", zodat je hele interface voor iedereen bruikbaar wordt.

Maar belangrijker:

  1. Hoe bedien ik deze interface met m'n toetsenbord? Doordat je de checkboxes display: none hebt gegeven, kan ik niet naar ze toe tabben. Waarschijnlijk krijg je met opacity: 0 en :focus + img voor de focus styles ongeveer precies wat je bedoelt :)

fix-the-flow-interactive-website/vragenlijst.html

Lines 37 to 105 in 6fd4eb3

<label>
<input type="checkbox">
<!-- Goal-01 -->
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-01.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-02.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-03.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-04.png" alt="bedrijf">
</label>
<label>
<input type="checkbox" >
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-05.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-06.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-07.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-08.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-09.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-10.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-11.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-12.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-13.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-14.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-15.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-16.png" alt="bedrijf">
</label>
<label>
<input type="checkbox">
<img src="styles/assets/images/SDG Icons 2019_WEB/E-WEB-Goal-17.png" alt="bedrijf">
</label>

Minder div's schrijven als het niet nodig is.

fix-the-flow-interactive-website/index.html

Lines 18 to 24 in d930f9f

<li><div class="icon"><img src="styles/assets/icons/icons_bedrijf.svg" alt="bedrijf"></div><a href="#">Bedrijf</a></li>
<li><div class="icon"><img src="styles/assets/icons/icons_klanten.svg" alt="klanten"></div><a href="#">Klanten</a></li>
<li><div class="icon"><img src="styles/assets/icons/icons_leveranciers.svg" alt="leveranciers"></div><a href="#">Leveranciers</a></li>
<li><div class="icon"><img src="styles/assets/icons/icons_medewerkers.svg" alt="medewerkers"></div><a href="#">Medewerkers</a></li>
<li><div class="icon"><img src="styles/assets/icons/icons_aandeelhouders.svg" alt="financiers"></div><a href="#">Financiers</a></li>
<li><div class="icon"><img src="styles/assets/icons/icons_omgeving.svg" alt="omgeving"></div><a href="#">Omgeving</a></li>
<li class="meer"><div class="icon"><img src="styles/assets/icons/icons_meer.svg" alt="medewerkers"></div><a href="#">Meer</a></li>

Probeer niet te veel div's te gebruiken. Misschien kan je deze weglaten en alleen classes gebruiken. Als dit niet gaat en je krijgt er conflicten door dan kan je het altijd nog zo terug zetten. Probeer dit wel even uit.

Calculeer button

Kijk of je de calculeer button kunt verplaatsen naar de nav bar.

alt attributen op iconen in hoofdmenu

Kijk bij alt attributen altijd naar de context van de image. Staat er al tekst omheen? Is het plaatje decoratief? Vraag je af: (hoe) zou ik dit voorlezen aan de telefoon? Zou ik “Bedrijf Link Bedrijf” voorlezen? Zie ook https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images

fix-the-flow-interactive-website/index.html

Lines 22 to 28 in 6fd4eb3

<li><div class="icon"><img src="styles/assets/icons/icons_bedrijf.svg" alt="bedrijf"></div><a href="#">Bedrijf</a></li>
<li><div class="icon"><img src="styles/assets/icons/icons_klanten.svg" alt="klanten"></div><a href="#">Klanten</a></li>
<li><div class="icon"><img src="styles/assets/icons/icons_leveranciers.svg" alt="leveranciers"></div><a href="#">Leveranciers</a></li>
<li><div class="icon"><img src="styles/assets/icons/icons_medewerkers.svg" alt="medewerkers"></div><a href="#">Medewerkers</a></li>
<li><div class="icon"><img src="styles/assets/icons/icons_aandeelhouders.svg" alt="financiers"></div><a href="#">Financiers</a></li>
<li><div class="icon"><img src="styles/assets/icons/icons_omgeving.svg" alt="omgeving"></div><a href="#">Omgeving</a></li>
<li class="meer"><div class="icon"><img src="styles/assets/icons/icons_meer.svg" alt="medewerkers"></div><a href="#">Meer</a></li>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.