Joost
In deze week hadden we niet veel les door een paar feestdagen, daarom hebben wij dan ook niet veel deze week gedaan naast het oriënteren van wat wij als team aan willen werken en maken. Wij hebben uiteindelijk gekozen om met de Spotify API te gaan werken. Ook hebben we nog de een dev branch aangemaakt en een read.me toegevoegd.
-
Verbeelden & Conceptualiseren -> Ik heb deze week samen met ons team aam ons eerste concept gewerkt, hiervoor hebben wij een Moodboard samen gemaakt en vanuit daar een logo, naam en font gekozen. Ik heb daarna een Style Guide uitgewerkt die de basis legde voor onze site.
-
Orienteren & Begrijpen -> Als team hebben wij ook nog een User Requirement List en Empathy Map gemaakt om de wensen en doelen van de doelgroep te verbeelden.
Al ons werk van deze week is te zien in de Wiki/Ontwerp
Deze week zijn we begonnen met het maken van de Lo-Fi ontwerpen op Figma en heb ik basis gestart voor de Front-End coden.
-
Verbeelden & Conceptualiseren -> Annika en ik zijn in de les de Lo-Fi schermen gaan uitwerken in Figma. Hiervoor hebben wij gekeken wat de gebruiker allemaal wel en niet nodig heeft om onze app te gebruiken. Ook had ik een snelle schetsen hiervoor gebruikt hoe de gebruiker door de app zal gaan.
-
Evalueren -> Voor dat we begonnen met coderen had ik met Annika voorgesteld en afgesproken dat we mobile first zouden en doen en later uitwerken naar desktop. Wij hebben hiervoor gekozen omdat ons concept meer app/mobile gericht is en het überhaupt makkelijker is om mobile eerst te doen.
-
Prototypen & uitwerken -> Verder ben ik begonnen met hoe we ons Style Guide om konden zetten naar coden. Hiervoor heb ik gebruik gemaakt van de var() function in css. bron:https://www.w3schools.com/css/css3_variables.asp
Ook stelde ik voor aan Annika dat we gebruik zullen maken van partials voor de nav, zodat wij deze niet overal op elke pagina opnieuw der in hoefde te zetten. bron: https://www.digitalocean.com/community/tutorials/how-to-use-ejs-to-template-your-node-application#step-2-creating-the-ejs-partials
Als laatst heb ik ook een start gemaakt met het maken van de zoek-pagina.
-
Orienteren & Begrijpen -> Samen met Annika hebben wij nagedacht over hoe de navigatie er uit zou komen te zien. Wij hadden 2 opties en zijn op basis van gebruiksvriendelijkheid en funcionaliteit voor de eerste onderstaande Lo-Fi nav gegaan.
-
Samen ontwerpen -> Deze week heb ik veel samengewerkt met Annika in de lessen en heb daar toen veel kleinen ontwerp vragen aan elkaar gesteld en samen over ontwerp keuzes nagedacht.
Moeten we nou .index of .ejs bestanden schrijven?
- sep: .ejs!
Hoe zien we het swipen op desktop voor ons? Ook swipen of met toetsenbord? Misschien video op desktop?
- Video is niet handig, en kunnen zowel swipen als met toetsenbord en ook buttons.
Ik ben verder gegaan met het uitwerken van ons prototypen deze week. En verder verbeeld na maten van functies die wij toch niet of juist wel nog willen.
- Prototypen & uitwerken -> Ik heb deze week allen de Genre pagina gemaakt aangezien ik het naast school deze week wat drukker had.
- Verbeelden & Conceptualiseren -> Ook heb ik de Lo-fi aangepast op figma nadat we hadden besloten toch geen afspeellijst uit Spotify toe te voegen.
- Samen ontwerpen ->
Als we geen Afspeellijsten doen, wat willen we daarvoor in de plaats op de profiel-pagina? Misschien iets van statistieken?
- Ja statestieken zijn prima.
- Sep: misschien je top-genre met een horizontale scroll.
- Prototypen & uitwerken -> Deze week ben ik begonnen met het uitwerken van de Profiel-pagina en list.js gebruikt voor de genre-pagina.
Daarnaast heb ik ook geleerd hoe ik er voor zorg dat een tekst op een regel blijft en hidden is wanneer het uit de container gaat.
Voor de genre horizontale scroll heb ik ook hier weer gebruik gemaakt van overflow, maar ik kreeg hierbij omdat het een scroll werd ook een scroll bar die niet passende bij onze vormgeving en ook niet nodig was aangezien je al aan de blokken die aan de rechter kant half verdwenen te zien was dat het scrolbaar was. Daarom wou ik die weg halen en heb na wat zoeken de volgende informatie opgedaan. bron: https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
Als laatst wou ik deze week ook nog listJs gebruiken voor de genre pagina omdat die informatie niet uit de Spotify API halen. Ik had de opdracht ook al een keer in de les gedaan maar was dit nu al weer vergeten en heb nogeens naar Les 2.3 gekeken en de opdracht bekeken. Daarnaast heb ik ook de listjs website nog eens geinspecteerd en heb toen met npm install listjs gewerkt maar dat werkte niet dus ben ik eerst het gaan vragen aan chatgpt en daar kwam het volgende uit:
Dit had ik nog eens nagevraagd aan Ivo en die zei inderdaad dat npm install niet nodig is.
bronnen:
Aan Vivanne: Hebben we een zoekknop nodig bij de searchbar?
- Ja dat is wel zo handig voor een betere User Interface.
- Voor de list.js Genre is het niet nodig aangezien je toch al direct resultaat ziet wanneer er ingetypt wordt.
In de laatste week heb ik nog veel stappen gemaakt en nieuwe dingen geleerd! Ook was er een besluit gemaakt dat het swipen op genre niet mogelijk was en dus hebben we nagedacht en besloten om mijn listjs deel naar de liked/disliked pagina te verplaatsen.
- Samen ontwerpen -> Deze week hadden we de keuze gemaakt dat de setting eigenlijk niet hoefde aangezien we de bio weg lieten en daarnaast toch alleen maar de darkmode knop hadden. Dus we hebben toen samen besloten dat we de darkmode alleen op basis van systeem voorkeuren zouden doen en de settings knop naar een uitlog knop veranderde aangezien wij die nog miste.
Ook was ik tijdens het bezig zijn met het maken van de darkmode tegen veel visuele problemen aangelopen waarna ik heb geappt met Annika wat bij sommige items beter was. Dit hebben wij de les daarna ook nog mondiaal gedaan.
-
Prototypen & uitwerken -> Ik heb mij deze week bezig gehouden met de Counter-animatie, Darkmode, Liked-pagina listjs en het finetune van de laatste dingen.
-
Code counter animatie:
gebruikte bron hiervoor: https://codepen.io/JoostLocher/pen/rNgGqBr
- Listjs op liked pagina hoefde ik alleen listArtiest toe te voegen:
Uiteindelijk resultaat:
- Darkmode was in het begin vrij makkelijk aangezien we al gebruik maakten van de kleur in var() op te slaan. Alleen moest dit op sommige plekken weer aangepast omdat het soms niet meer leesbaar werd of de aandacht weg trok van de belangrijke acties. Ook pakte hij de icons niet mee en moest die ik ook nog aanpassen.
bronnen: -https://dev.to/whitep4nth3r/light-and-dark-mode-in-just-14-lines-of-css-424e -https://web.dev/articles/light-dark
Code:
Voor de desktop versie zag de nav er niet uit en was de volgende code nodig met @media query's.
andere element aanpassingen:
Wat voorn animatie zou ik allemaal nog kunnen toevoegen?
- Vivanne: Je kan de statiestiken van swipes, liket en disliket met een counter op laten tellen/animeren. (ze liet een voorbeeld zien van website van haar werk.)
willen we de settings een apparte pagina?
- Nee want eigenlijk