- repository :
becode-AHOD - team :
false - Durée :
6 hours
-
Client: Scout Unite 48e Impeesa
-
Qui ? :
-
Quand?: Le 07 Juin 2018 de 10 à 16h.
-
Où ? : A Becode
Sur base d'un site inexistant, notre groupe doit réaliser et déployer en quelques heures un one-pager qui propose une meilleure version de ce projet. Le résultat doit être attractif, aller à l'essentiel, utiliser un framework CSS, et proposer au moins une animation CSS.
Ce challenge est une mise en situation pour nous permettre d'appréhender des conditions réelles, mais ne sera pas livré à un client.
- Introduction au User-Centric Design.
- Travail de groupe coordonné avec de nouveaux collaborateurs.
- Introduction aux Progressive Web Apps*.
- Travailler les animations CSS.
- Voir comment réaliser en urgence un site web d' une page (= un "one-pager"), sur base de templates existantes. Guerilla style.
- Utiliser des outils de validation, tels que le Lighthouse Test ou le W3C Validator, pour améliorer ses compétences de frontend.
- Travailler les compétences acquises dans un cas concret.
- Découvrir les vertus du suffisfaisant comme alternative au perfectionnisme.
- Nous avons débuté par un brainstorming pour mieux cerner le persona type de notre page et le message à faire passer (qu'est-ce que le client espère de ses visiteurs ? Qu'est-ce qui les fait vivre ?).
- Comme nous n'avions pas de base de travail, nous avons alors cherché du contenu.
- Nous avons ensuite créé un mockup pour visualiser la solution que nous allions proposer.
- Puis nous avons initié un dépôt Github, nous nous sommes répartis les tâches et chacun a créé une branche thématique (plutôt que nominative).
- Enfin, nous avons sélectionné un template pour établir l'apparence de notre page.
- Lorsque la page a atteint un état satisfaisant, nous l'avons déployé sur GitHub Pages.
- Nous avons choisi de respecter les consignes en produisant un one-pager qui répond aux caractéristiques décrites, c'est-à-dire une liste d'arguments et un "call to action" (CTA), en l'occurrence un formulaire de contact.
- Il nous a semblé pertinent d'utiliser le framework Boostrap v4.1.1 pour respecter la deadline donnée et pour améliorer notre pratique vu son utilisation répandue.
- Nous avons choisi d'animer discrétement la page avec une Pure CSS3 Gradient Background Animation.
L'idée du projet
Nous pensons pouvoir améliorer ce score avec du temps supplémentaire.
- Imaginer une page sans connaître les attentes du client a été compliqué pour nous, ça aurait été utile d'en savoir plus. On s'est sentis plus à l'aise lorsque nous avons trouvé un template satisfaisant.
- Performance, SEO, Progressive, Accessibility, via le lighthouse Test : Perf: 87 / PWA : 64 / Acc : 75 / Partice : 94 / SEO 94
- Score validation W3C : 3 erreurs
- Présence de bugs : FALSE
- Respect de la deadline : TRUE
- Respect des consignes : TRUE
- Readme utile, pertinent et informatif : Bien
Voici les réactions des jurés :
- Cédric : très vide, peu fonctionnel, peu original (et pas de favicon)
- Tom : Bof : assez simple, erreurs de ponctuation (sorry :p), pas compris le "on a des cookies" qui redirige en bas de page
- Ayaan : Très très simple, pas assez audacieux ----- Voilà, bravo déjà d'avoir été parmi les 13 projets qui nous ont été remis.
- Afin de travailler efficacement à distance malgré les différences de disponibilité, nous avons utilisé un tableau Trello et un canal d'équipe sur Ryver.
- Pour pouvoir proposer une PWA, nous avons déployé notre page sur un hébergement mutualisé : https://www.claudejanssen.myownweb.be/
- Nous avons également mis en place une URL avec l'extension tk : http://www.48eimpeesa.tk/
- Notre attention s'est surtout portée sur les performances Lighhouse et les erreurs W3C, où nous avons pu apporter quelques améliorations quantifiables :
- En terme de contenu, l'originalité et l'audace sont des concepts encore difficiles à appréhender à ce stade, cela viendra probablement avec la pratique et au contact des artistes qui nous entourent.
