diff --git a/README.md b/README.md index 197db9071..9f4e39774 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,7 @@ Ontwerp en maak met een team voor een opdrachtgever een interface waar gebruiker De instructie vind je in: [INSTRUCTIONS.md](https://github.com/fdnd-task/pleasurable-ui/blob/main/docs/INSTRUCTIONS.md) +![poster oncollaboration](https://github.com/user-attachments/assets/a2db428b-6a3f-41c6-853d-abf2109516d5) ## Inhoudsopgave @@ -16,18 +17,187 @@ De instructie vind je in: [INSTRUCTIONS.md](https://github.com/fdnd-task/pleasur * [Licentie](#licentie) ## Beschrijving - - - +### Home +De `home` pagina geeft de gebruiker het allereerste beeld van de website, daarom is het belangrijk dat ze een vertrouwd gevoel krijgen op deze pagina en geïnteresseerd zijn of worden om verder te kijken op de website. Op de home pagina staat de belangerijkste informatie over Oncollaboration met linkjes naar de andere pagina's als de gebruiker hier meer over wilt lezen.
+Met het ontwerpen en maken van deze pagina heb ik rekening gehouden met de **Hierarchy of User Needs**. Hieronder leg ik stap voor stap uit hoe ik dit heb toegepast. -## Gebruik - +#### 1 - Functional (Functioneel) +Ik heb ervoor gezorgd dat alle data op deze pagina ook zichtbaar / bruikbaar is als er alleen HTML wordt ingeladen in de browser. Ook heb ik gewerkt volgens het **mobile first** principe, dit houd in dat de pagina gebouwd is voor een mobiel scherm. Door de juiste HTML structuur is de pagina ook volledig toegankelijk voor gebruikers die via het toetsenbord navigeren. +Vanaf hier ben ik verder gaan werken aan de styling van de website, om zo verder in de Hierarchy of User Needs driehoek te komen. +![image](https://github.com/user-attachments/assets/1b23dca7-1457-4957-a3d1-1304b328a813) -## Kenmerken - +#### 2 - Reliable (Betrouwbaar) +De pagina bied snel de content die word ingeladen uit de database, de links naar andere pagina's werken zoals de gebruiker dit zal verwachten. Kortom de pagina zal niet voor gekke verassingen zorgen. + +#### 3 - Usable (Gebruiksvriendelijk) +Door het uiterlijk van de pagina in de huisstijl van Oncollaboration krijgt de gebruiker een fijne indruk van de webpagina. In de huisstijl is rekening gehouden met het contrast van de kleuren, zo is de website voor iedere gebruiker goed toegankelijk. Om het voor de gebruikers die met een toestenbord over de pagina navigeren duidelijk te maken waar ze zich bevinden op de pagina is de focus state op de buttons/links opvallender gemaakt. +
![image](https://github.com/user-attachments/assets/d646dd06-5492-43a0-b628-b5110810b066) + +#### 4 - Pleasurable (Aangenaam) +De hover states op de buttons/links geven de gebruiker het gevoel dat de interface "leeft" en met hen communiceert. Door de speelse styling hiervan maakt dit de pagina meer aantrekkelijk voor de gebruikers. +https://github.com/user-attachments/assets/8fbcc7a0-380f-4317-bedf-b517917bc338 + +*** +### Webinars + +#### **Bookmark functionaliteit webinars** + +De webinars hebben een bookmark functionaliteit. Dit houdt in dat de webinars toegevoegd en verwijderd kunnen worden aan/uit de bookmarks. Op deze manier kunnen gebruikers de favoriete webinars op een later moment terugkijken. + +- **Toegankelijkheid (reliable):** De bookmark functionaliteit is bruikbaar voor iedereen inclusief screenreaders. Het is ontwikkeld met semantische HTML hierdoor goed navigeerbaar met de tab-toets. Dit is getest in deze issue # +- **Responsiveness: (Usable):** De bookmark knop werkt op verschillende devices en formaten. Er wordt mobile first gewerkt aan de hand van `@media queries` +- **Performance (Reliable):** De bookmarkstatus wordt visueel geüpdatet dit zorgt voor een snelle performance en betrouwbare interpretatie bij de gebruiker. +- **Progressive Enhancement (Pleaserable)** De core functionaliteit: het toevoegen en verwijderen van bookmarks werkt zonder JS. In moderne browsers is de bookmark functionaliteit enhanced (mooier gemaakt) met een loading state en animaties. Hierdoor voelt de het bookmarken van webinars aangenamer aan voor gebruikers. + +https://github.com/user-attachments/assets/c81888a4-6d88-4df4-9ce2-953a6c339c87 + +#### **Filter functionaliteit webinars** + +De webinars zijn via de filter functionaliteit te filteren op categorie en datum. Op deze amneir kunnen gebruikers gemakkelijker een webinar vinden naar interesse. + +De webinars zijn via de filter functionaliteit te filteren op categorie en datum. Op deze manier kunnen gebruikers gemakkelijker een webinar vinden naar interesse. + +- **Toegankelijkheid (Reliable):** De filteropties zijn opgebouwd met semantische HTML elementen: ` + + + + + {% if bookmarkedIds contains speaker.id %} + + {% else %} + + {% endif %} + + \ No newline at end of file diff --git a/views/partials/webinar-card.liquid b/views/partials/webinar-card.liquid new file mode 100644 index 000000000..bc5fc3602 --- /dev/null +++ b/views/partials/webinar-card.liquid @@ -0,0 +1,67 @@ + \ No newline at end of file diff --git a/views/profile-bookmarks.liquid b/views/profile-bookmarks.liquid new file mode 100644 index 000000000..bd73e2e49 --- /dev/null +++ b/views/profile-bookmarks.liquid @@ -0,0 +1,6 @@ +{% assign pageTitle = "Profile | Oncollaboration" %} +{% include "partials/head.liquid" %} + +

Profile Bookmarks

+ +{% render "partials/foot.liquid" %} \ No newline at end of file diff --git a/views/profile.liquid b/views/profile.liquid new file mode 100644 index 000000000..65f36bc79 --- /dev/null +++ b/views/profile.liquid @@ -0,0 +1,10 @@ +{% assign pageTitle = "Profile | Oncollaboration" %} +{% include "partials/head.liquid" %} + +

Profile

+ + + +{% render "partials/foot.liquid" %} \ No newline at end of file diff --git a/views/speakers-detail.liquid b/views/speakers-detail.liquid new file mode 100644 index 000000000..bc8622d6c --- /dev/null +++ b/views/speakers-detail.liquid @@ -0,0 +1,106 @@ +{% assign pageTitle = "Speakers | Oncollaboration" %} +{% include "partials/head.liquid" %} + + {% comment %} {% include "partials/header.liquid" %} {% endcomment %} + + {% for speaker in speakers %} +
+
+ +
+ Meet +

{{ speaker.fullname }}

+

{{ speaker.entitle }}

+
+ +
+
+ + + + + + + + + +
+ + +
+ + + + + {% if isBookmarked %} + + {% else %} + + {% endif %} +
+
+
+ + + +
+
+

About

+
+
+

{{ speaker.about }}

+
+
+ +
+
+

Webinars from this speaker

+
+
+ {% for webinar in speaker.webinars %} + {{ webinar.avl_webinars_id.title }} + {% endfor %} +
+
+
+ {% endfor %} + + {% comment %} {% include "partials/footer.liquid" %} {% endcomment %} + +{% render "partials/foot.liquid" %} \ No newline at end of file diff --git a/views/speakers.liquid b/views/speakers.liquid new file mode 100644 index 000000000..d71d3cb2c --- /dev/null +++ b/views/speakers.liquid @@ -0,0 +1,58 @@ +{% assign pageTitle = "Speakers | Oncollaboration" %} +{% include "partials/head.liquid" %} + {% comment %} {% include "partials/header.liquid" %} {% endcomment %} + +
+
+
+ +

Speakers

+
+
+

Lorem ipsum odor amet, consectetuer adipiscing elit. Enim ipsum non egestas; primis luctus cubilia. Donec ut venenatis.

+
+
+ +
+
+

Filter

+
+ + +
+ + + + + +
+
+ +
+
+

All

+
+ +
+ + {% for speaker in speakers %} + {% include "partials/speaker-card.liquid" %} + {% endfor %} +
+
+
+ + + +{% render "partials/foot.liquid" %} \ No newline at end of file diff --git a/views/webinars-detail.liquid b/views/webinars-detail.liquid new file mode 100644 index 000000000..8173fa5ee --- /dev/null +++ b/views/webinars-detail.liquid @@ -0,0 +1,69 @@ +{% assign pageTitle = "Webinars | Oncollaboration" %} +{% include "partials/head.liquid" %} + +
+{% for webinar in webinars %} + +
+ + +

{{ webinar.title }}

+
+ + {% if webinar.video %} + + {% endif %} + +
+

vieuws {{ webinar.views }}

+

date{{ webinar.date }}

+ + {% for category in webinar.categories %} +

{{ category.avl_categories_id.name }}

+ {% endfor %} +
+ +
+

Description

+
+ Read description +
+

{{ webinar.description }}

+
+
+
+ +
+

Q & A

+

Comments

+
+ {% for comment in comments %} +

{{ comment.content }}

+ {% endfor %} +
+ +

Ask a question

+
+
+ + +
+
+
+ +
+

The speaker

+ {% for speaker in speakers %} + {% include "partials/speaker-card.liquid" %} + {% endfor %} +
+ +{% endfor %} +
+{% render "partials/foot.liquid" %} \ No newline at end of file diff --git a/views/webinars.liquid b/views/webinars.liquid new file mode 100644 index 000000000..cdfb30154 --- /dev/null +++ b/views/webinars.liquid @@ -0,0 +1,71 @@ +{% assign pageTitle = "Webinars | Oncollaboration" %} +{% include "partials/head.liquid" %} + +
+ + + +

Webinars

+ +

Lorem ipsum odor amet, consectetuer adipiscing elit. Enim ipsum non egestas; primis luctus cubilia. Donec ut + venenatis. + Lorem ipsum odor amet.

+ +
+ +
+

Filter

+

Filter webinars on category or sort on date.

+ +
+ + + + + +
+
+ +
+

Results

+ +

+ {% if webinars.size == 1 %} + 1 webinar + {% else %} + {{ webinars.size }} webinars + {% endif %} +

+ +
+ + {% if webinars.size > 0 %} + {% render "partials/webinar-card.liquid", webinars: webinars, bookmarkIds: bookmarkIds %} + {% else %} +
+

There are no webinars available for the categorie: {{ selectedCategory }}. + View other categories for your interests. +

+
+ {% endif %} + +
+ + + +{% render "partials/foot.liquid" %} \ No newline at end of file