Rapport exercice 1 de STIC I

Créations des différentes pages

Auteur·rice
Date de publication

15 octobre 2023

1 Liens

Voici les différents liens qui composent ce dispositif :

-Vers ma page perso TECFA

-Vers ma page du Wiki EduTech

-Vers ma page Travaux

-Vers mon profil LinkedIn

2 Objectifs

Page Personnelle TECFA :

Cette page personnelle a pour objectif de transmettre des informations quant à mes productions lors de mon cursus académique. Elle permet également de transmettre des informations sur mon identité en tant qu’étudiant. Le public cible de cette page regroupe les professeurs et les étudiants du MALTT. Cependant, elle peut également être accessible aux personnes externes, à condition qu’elles disposent du lien.

Page EduTechWiki :

Cette page vise à contribuer à l’EduTechWiki et à répertorier ces contributions. Elle offre également la possibilité aux autres utilisateurs du Wiki de consulter mon profil pour évaluer la qualité des informations que je partage sur ce site.

Page Travaux :

Cette page a pour objectif de regrouper tous les exercices réalisés pendant le MALTT au même endroit. Actuellement, seuls les exercices STIC-1 sont disponibles sur cette page. Étant donné que le lien est public, tous les utilisateurs du web peuvent y accéder, à condition qu’ils connaissent l’URL.

Page LinkedIn :

Avoir un profil sur une plateforme comme LinkedIn permet de partager celui-ci avec des professionnels et, in fine, de développer sa présence sur un réseau professionnel. Cela offre l’opportunité de se faire connaître auprès de futurs employeurs, d’élargir son réseau et de rechercher des emplois ou des stages.

3 Design

Page Personnelle TECFA :

Pour ma page TECFA, j’ai décidé de m’inspirer d’une ancienne étudiante du MALTT (cf. ressources) afin d’avoir une idée de la structure. Le design de ce site web comprend une barre de navigation et différentes parties (en-tête, etc.) qui s’articulent avec la page. J’ai sélectionné une palette de couleurspour qu’elles s’harmonisent entre elles et rendent le site plus agréable visuellement pour les visiteurs.

Page EduTechWiki :

Ma page EduTechWiki est divisée en plsuieurs parties. Elle comptabilise actuellement 6 sections : une brève présentation, mon parcours académique, mes travaux de recherche, mes intérêts, ainsi que mes contributions sur ce site. J’ai inclus une image vectorielle à ma page personnelle afin d’illustrer mes propos. J’ai suivi les règles d’édition afin de réaliser les diverses sections et j’ai inclus des liens textuels pour relier les différents concepts que je mets en avant dans mon Wiki.

Page Travaux :

Quant à ma page : Travaux, j’ai suivi les consignes pour sa réalisation. Elle ressemble ainsi à la page par défaut. Néanmoins, j’ai tout de même changé la couleur du fond et celle des titres de celle-ci. Elle reste rudimentaire et comprend des titres, des liens textuels pour accéder aux exercices réalisés et des éléments en gras.

Page LinkedIn :

Mon profil LinkedIn résume succinctement mon parcours. Il fournit des informations quant à mon parcours académique et professionnels. Le design de ce dernier ne peut pas être personnalisé, compte tenu des standards de la plateforme - qui sont les mêmes pour tous les utilisateurs.

4 Production

Afin de réaliser ces différentes pages, j’ai dû assimiler des notions HTML5 supplémentaires qui m’ont permis de peaufiner ma formation MINIT. Une fois le squelette établi grâce à HTML5, j’ai dû me concentrer sur la création de pages CSS pour rendre mes pages plus attrayantes. De plus, pour la page que j’ai rédigé avec XML, j’ai dû suivre un ordre de production précis pour satisfaire aux exigences.

La partie CSS a été la plus complexe pour moi, car j’avais du mal à percevoir ce que certaines fonctions allaient donner sur certains blocs, notamment pour ma page perso TECFA. Pour m’aider à progresser, j’ai étudié quelques structures CSS réalisées par les anciens étudiants du MALTT, en cherchant à comprendre le fonctionnement de chaque balise - et son impact- en utilisant la fonction de prévisualisation disponible sur VSC pour chaque modification. Bien que cela m’ait pris du temps, j’ai réussi à assimiler les balises indispensables liées à CSS. Je prévois également d’améliorer cette page au fur et à mesure que je découvre de nouvelles propriétés CSS.

J’ajouterais également que j’ai fait face à deux petits écueils. Le premièr est apparu lorsque j’ai pu tester mon code html sur le site W3C. Ce dernier m’a indiqué que lorsque des liens sont inclus au code HTML, il est préférable d’ajouter une barre oblique à la fin pour améliorer la rapidité d’exécution. Le second a trait à la saisie correcte des chemins. En effet, lorsque j’ai essayé d’inclure le chemin de ma page CSS sur ma page TECFA, j’avais oublié d’inclure le point devant la barre oblique; ce qui a empêché l’affichage de la mise en page CSS. Il est ainsi essentiel de faire attention à mettre un point ou deux points afin d’atteindre l’endroit désiré en fonction de l’emplacement du fichier.

Concernant ma page EduTechWiki, celle-ci avait déjà été entamée lors de la semaine d’introduction, mais n’aboutissait pas à un résultat satisfaisant, selon moi. Ainsi, cela m’a obligé à repenser les jalons de celle-ci pour produire une page appropriée en incluant, entre autres, des sections et une structure plus compréhensible.

Quant à ma page “Travaux”, je me suis contenté d’appréhender la logique hiérarchique à travers la vidéo explicative, ainsi que le schéma, afin de reproduire ces étapes dans ma page.

5 Auto-évaluation

Je suis relativement satisfait de ma compréhension des règles liées au langage HTML5. Néanmoins, le CSS, qui permet de rendre l’HTML5 plus attrayant, a été davantage difficile à assimiler pour moi. C’est d’ailleurs pour cela que ma homepage TECFA ne contient rien d’extravagant et possède une structure relativement simple. J’ai l’intention, dans les mois à venir, de l’améliorer en utilisant les nouvelles compétences que j’aurai acquises dans ce langage-là.

Ma page “Travaux” pourrait également être améliorée en rajoutant davantage de CSS, car elle garde la même structure que l’originale.

Je n’ai pas eu de problèmes pour l’ajout de liens hypertextes et d’images. Je suis satisfait que cela ait bien fonctionné, car cela permet à la page d’établir des liens avec d’autres pages et de la rendre plus complète pour les visiteurs.

6 Bibliographie

Règles du Wiki

Fonctionnement de XML

7 Ressources

Afin d’appréhender les éléments attendus de ce rapport, j’ai consulté les deux exemples recommandés dans sur la page STIC I. Voici les liens vers ces derniers disponibles ci-dessous :

-https://tecfaetu.unige.ch/etu-maltt/concordia/schenea7/

-http://tecfaetu.unige.ch/etu-maltt/pixel/ardiri6/

Pour ma page personnelle TECFA, j’ai utilisé une image entièrement libre de droit, disponible à l’adresse : https://pixabay.com/photos/bagan-hot-air-balloons-sunrise-1137015/

Cette image est sous licence CC-0, car, selon les termes du site, toute image publiée avant 2019 - ce qui est le cas pour celle-ci - appartient à cette licence. Dès lors, l’oeuvre appartient ainsi au domaine public et aucun droit n’est applicable.

Image utilisée pour pour mon EduTechWiki, disponible à l’adresse : https://www.flickr.com/photos/thekbriodys/8195430621/

Cette image est sous licence : CC BY-NC-SA 2.0 DEED, ce qui implique que les auteurs doivent être explicitement cités et qu’un lien doit être disponible pour accéder à l’oeuvre originale. J’ai explicitement mentionné l’auteur et mentionné le lien sur le wiki afin que cette image puisse être utilisée en toute légalité sur le wiki.

Pour réaliser ma page perso TECFA, je me suis inspiré de la structure css de la page de Brigitte Steiner.