width en height in HTML

Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je, zoals altijd, in: docs/INSTRUCTIONS.md

The Client: OBA familie overzichtspagina

Inhoudsopgave

Beschrijving
Kenmerken
Bronnen
Licentie

User Story

Toon in een overzicht alle abonnementen van een familie met een verwijzing naar een indiviueel profiel van elk familielid. Functies:

Familieleden

Beschikbare diensten

Laatst geleende boeken

In te leveren boeken om boete te voorkomen

Beschrijving

Debriefing: OBA familie overzichtspagina | FDND | squad D

Contactgegevens

Bedrijfsnaam: openbare bibliotheek van Amsterdam
Voor-en achternaam contactpersoon: Mark Vos
Contactgegevens van contactpersoon: [email protected], 0634500414
Datum aanvraag: 25 september 2023
Datum oplevering: 13 oktober 2023

Achtergrondinformatie

Opdrachtgever: OBA, openbare bibliotheek van Amsterdam, 28 vestigingen, 2.5 miljoen uitleningen
Aangeboden diensten: uitleenpunt voor boeken, openbare studieplekken met gratis wifi
Unique selling points: de enige openbare bibliotheek in Amsterdam waar iedereen van alle leeftijden boeken kan lenen, verbinding van mensen, cultuur en de stad
Belangrijke mijlpalen of gebeurtenissen van het bedrijf:

Opdrachtomschrijving

De openbare bibliotheek van Amsterdam wil graag in het mijn OBA platform een overzicht van alle abonnementen van een familie
OBA wilt een toegankelijke mijn-oba omgeving, waar abonnees hun gegevens, betalingen, leningen, aanbevelingen en meer kunnen terugvinden en beheren, en waar onderscheid gemaakt wordt tussen de verschillende gebruikers van het abonnement.
Hier kunnen gebruikers inzicht krijgen in hun uitleengeschiedenis, abonnementsvorm, openstaande boetes en gepersonaliseerde suggesties voor boeken, activiteiten, etc.

Aanleiding

De OBA wil graag van fysiek naar hybride, overstappen op meer digitaal, een digitale klantcontactstrategie.

Doelstellingen

Een leven lang leren faciliteren voor elke leeftijdsgroep.
Kennis, cultuur en informatie voor iedereen bereikbaar en toegankelijk maken.
Reflectie, ontmoeting en betrokkenheid bij de stad en buurt stimuleren.

Oplevering

Beschrijf zo concreet mogelijk wat je oplevert (product/dienst/huisstijl)
Een toegankelijke familie overzichtspagina voor abonnementen binnen het mijn OBA platform.
Kopjes voor elke product of dienst, een zoekfunctie binnen de mijn OBA omgeving, een chatbot functie en visuele vormgeving voor meer toegankelijkheid
Dataretentie: abonnees de beschikking geven over eigen data en de mogelijkheid om opgeslagen data te verwijderen.
Een trendy huisstijl, deze moet overeenkomen met de OBA huisstijl. Bij verandering in huisstijl is een goede motivatie nodig.

Randvoorwaarden

Technieken: HTML, CSS, JavaScript
Op vrijdag 13 oktober leveren wij de basis van een mijn oba omgeving website op

Relatie met andere projecten

De pagina is een klein onderdeel van een groter systeem, namelijk van het mijn OBA platform.
Dit project is het voorwerk van de digitalisering van producten en diensten van de OBA.

Gebruikers van het eindresultaat

Doelgroep: gebruikers van familieabonnementen van de OBA, mensen van verschillende nationaliteiten en niveau digitale vaardigheid.
OBA wil een laagdrempelige en toegankelijke omgeving voor hun gebruikers, dit door minder tekst en meer visuele cues, een modern en overzichtelijk uiterlijk.
De mijn-OBA omgeving is nu niet erg toegankelijk en ziet er niet aantrekkelijk uit, het is verwarrend en lastig te navigeren.
De website wordt nu voornamelijk gebruikt op de desktop. Er is wel een toename in mobiele gebruikers, dus de mobiele versie moet ook toegankelijk zijn.

Voor deze opdracht moeten wij een overzicht van alle abonnementen van een familie met een verwijzing naar een indiviueel profiel van elk familielid maken. Ik en de andere mensen met OBA als opdrachtgever hebben de pagina's verdeeld en daarna op elk van onze pagina naar elkaar doorgelinkt.

De website is verder gebouwd vanuit een eerder gemaakt format van tweedejaars student Amber. Op de pagina waar ik aan gewerkt heb, uitleengeschiedenis, kan je de boeken zien die je in het verleden hebt geleend en daaronder een paar aanbevolen activiteiten van de OBA waar je op kan klikken om doorgeleid te worden naar de OBA informatiepagina van de desbetreffende activiteit.

Bovenaan de pagina staat een zoekfunctie, waar je later specifiek zou kunnen zoeken naar een boek. Daaronder staan een paar filters waar je later op zou kunnen klikken om te sorteren op tijd. Een andere functie aanwezig op deze pagina is de info knop onder de boeken. Als je hier op klikt komt er een venster tevoorschijn met meer informatie over wanneer het boek is uitgeleend, en wanneer het weer is ingeleverd.

Groot scherm Light mode

Groot scherm Dark mode

Mobiel Dark mode

Mobiel Light mode

Groot scherm popup

Klein scherm popup

Mijn website

Kenmerken

Voor deze website heb ik HTML en CSS gebruikt. De HTML is gestructureerd in articles, divs en een section. De belangrijkste dingen met css zijn de grids op de boekenlijst en op de aanbevolen activiteiten. Daarnaast gebruik ik flex om de boeken, titels, auteur en de info knop onder elkaar te zetten. Bekijk mijn wiki voor nog meer uitleg over de code!

Licentie

This project is licensed under the terms of the MIT license.

	<img src="./images/boek1.jpg" alt="foto-boek" width="180" height="285">
	<h2>The book of strange new things</h2>
	<p>Michel Faber</p>
	<a href="#">Info</a>
	</article>

	<article class="book">
	<img src="./images/boek2.png" alt="foto-boek" width="180" height="285">
	<h2>The sellout</h2>
	<p>Paul Beatty</p>
	<a href="#">Info</a>
	</article>

	<article class="book">
	<img src="./images/boek3.jpg" alt="foto-boek" width="180" height="285">
	<h2>Vallen is als vliegen</h2>
	<p>Manon Uphoff</p>
	<a href="#">Info</a>
	</article>

	<article class="book">
	<img src="./images/boek4.jpg" alt="foto-boek" width="180" height="285">
	<h2>De avond is ongemak</h2>
	<p>Marieke Lucas Rijneveld</p>
	<a href="#">Info</a>
	</article>

	<article class="book">
	<img src="./images/boek5.jpg" alt="foto-boek" width="180" height="285">
	<h2>Knielen op een bed violen</h2>
	<p>Jan Siebelink</p>
	<a href="#">Info</a>
	</article>

	<article class="book">
	<img src="./images/boek6.jpg" alt="foto-boek" width="180" height="285">

	<div class="buttons">
	<button>Afgelopen week</button>
	<button>Afgelopen maand</button>
	<button>Afgelopen jaar</button>
	</div>

	<div class="book-list">
	<article class="book">
	<img src="./images/boek1.jpg" alt="foto-boek" width="180" height="285">
	<h2>The book of strange new things</h2>
	<p>Michel Faber</p>
	<a href="#">Info</a>
	</article>

	<article class="book">
	<img src="./images/boek2.png" alt="foto-boek" width="180" height="285">
	<h2>The sellout</h2>
	<p>Paul Beatty</p>
	<a href="#">Info</a>
	</article>

	<article class="book">
	<img src="./images/boek3.jpg" alt="foto-boek" width="180" height="285">
	<h2>Vallen is als vliegen</h2>
	<p>Manon Uphoff</p>
	<a href="#">Info</a>
	</article>

	<article class="book">
	<img src="./images/boek4.jpg" alt="foto-boek" width="180" height="285">
	<h2>De avond is ongemak</h2>
	<p>Marieke Lucas Rijneveld</p>
	<a href="#">Info</a>
	</article>

	<article class="book">
	<img src="./images/boek5.jpg" alt="foto-boek" width="180" height="285">
	<h2>Knielen op een bed violen</h2>
	<p>Jan Siebelink</p>
	<a href="#">Info</a>
	</article>

	<article class="book">
	<img src="./images/boek6.jpg" alt="foto-boek" width="180" height="285">
	<h2>De heilige Rita</h2>
	<p>Tommy Wieringa</p>
	<a href="#">Info</a>
	</article>

annevd / the-client-website Goto Github PK

the-client-website's Introduction

The Client: OBA familie overzichtspagina

Inhoudsopgave

User Story

Beschrijving

Debriefing: OBA familie overzichtspagina | FDND | squad D

Groot scherm Light mode

Groot scherm Dark mode

Mobiel Dark mode

Mobiel Light mode

Groot scherm popup

Klein scherm popup

Kenmerken

Licentie

the-client-website's People

Contributors

the-client-website's Issues

Recommend Projects

Recommend Topics

Recommend Org