SAE 05-06 : partie “Développement d’Interfaces Web”





(article portfolio - github portfolio- copilot)

Livrable 1 (Partie Dev. Interfaces Web) : le vendredi 27 septembre (avant 18H) - semaine de cours 4



Figure 1 : sur le projet GitHub devraient apparaître tous les auteurs (“Contributors”) avec le nom ou prénom de tous les étudiants du groupe

Si vous rencontrez des problèmes, posez vos questions en TP de BDD à Alain Millet





Consignes pour le livrable 1 :

Figure 2 : “favicon” et “title” 
[Nom du référent du groupe](mailto:login@edu.univ-fcomte.fr?subject=SAE_1_05_06)


Exemple de convertisseur “markdown”.


Voici un exemple de fichier README.md, ce fichier est un fichier Markdown.

# Titre sujet   

## Sujet    

[Nom du projet](https://login.github.io/projet/)

## Membres du groupe :

Etudiant 1 (référent du groupe) :  [Nom du référent du groupe](mailto:login@edu.univ-fcomte.fr?subject=SAE_1_05_06)  
Etudiant 2 : [Nom](mailto:login@edu.univ-fcomte.fr?subject=SAE_1_05_06)   
Etudiant 3 : [Nom](mailto:login@edu.univ-fcomte.fr?subject=SAE_1_05_06)  
Etudiant 4 : [Nom](mailto:login@edu.univ-fcomte.fr?subject=SAE_1_05_06)  
Etudiant 5 : [Nom](mailto:login@edu.univ-fcomte.fr?subject=SAE_1_05_06) 

# Présentation du projet

...... (5/6 lignes)

ATTENTION dans le code ci-dessus les caractères ![]() sont obligatoires lorsqu’ils sont présents dans l’exemple. Ce code est transformé automatiquement en HTML par GitHub.



Livrable 2 (Partie Dev. Interfaces Web) : le vendredi 18 octobre (avant 18H) - semaine de cours 7



Site Web terminé :

Consignes et critères d’évaluation du livrable 2

Critères d’évaluation du site Web

validation sur W3C et eco-conception

Figure 3 : exemple d’affichage (liens + images) sur GitHub en regardant le fichier README.md pour attester que toutes les pages HTML sont conformes aux standards W3C

exemple de lien :

https://validator.w3.org/nu/?showsource=yes&showoutline=yes&showimagereport=yes&doc=https%3A%2F%2Fdemo-am90.github.io%2Fs1-demo%2Findex.html

Attention à l’encodage de l’URL : veillez à ne pas utiliser d’espaces, d’accents, etc., dans les noms de fichiers et de dossiers.


En plus du lien, ajoutez une image (capture d’écran) attestant que votre page est valide sur W3C.


Voici le code Markdown à ajouter dans votre fichier README.md pour afficher une image :

![écran qui vérifie si le document est valide sur W3C](doc/capture_1_W3C.png)


Si le site eco-index ne fonctionne pas (article), utilisez un autre site comme https://www.websitecarbon.com/ ou https://ecograder.com/

Figure 3.2 : exemple de capture d’écran du site ecoindex à ajouter après chaque capture d’écran du site W3C dans le fichier README.md pour attester que toutes les pages HTML ont une éco-conception correcte


Figure 3.3 : copie d’écran du diaporama https://perso.liris.cnrs.fr/stephanie.jean-daubias/enseignement/IHM/LifIHM-CM2-Conception.pdf à Lyon


En résumé : dans vos pages HTML, il ne faut pas d’images trop lourdes et surtout pas de vidéo.


Indiquez ensuite la répartition du travail dans le groupe.



# Titre sujet   

## Sujet    

[Nom du projet](https://login.github.io/projet/)

## Membres du groupe :

- [Nom prenom (référent)](mailto:nom.prenom@edu.univ-fcomte.fr?subject=SAE_1_05_06)  
- [Nom prenom](mailto:nom.prenom@edu.univ-fcomte.fr?subject=SAE_1_05_06)   
- [Nom prenom](mailto:nom.prenom@edu.univ-fcomte.fr?subject=SAE_1_05_06)   


## Présentation 

Ce dépôt correspond à un site web créé en HTML/CSS/JS dans le cadre de la SAÉ 05-06 à l'IUT de Belfort-Montbéliard. Ce site présente des informations concernant l'entreprise ******** et sert de vitrine pour présenter l'entreprise, ses activité, son organisation et son historique. Vous trouverez dans ce dépôt et sur le site un rapport économique analysant l'aspect économique de ************. 

## Choix de conception  

Pour la conception du site, nous nous sommes grandement inspirés du site officiel de ******* (disponible [ici](https://www.entreprise.com/fr-fr/)), du site d'un de ses principaux concurrents [xxxxxxxxxx](https://www.entreprise2.fr/) et nous avons pris comme référence la charte de ************** disponible [ici](doc/charte_graphique.pdf).    


## Développement Site Web et Validation des pages

### Page d'accueil

**Auteur : Nom Prénom**  

Vérification W3C : [Détail ICI](https://validator.w3.org/nu/?showsource=yes&showoutline=yes&showimagereport=yes&doc=https%3A%2F%2Fdemo-am90.github.io%2Fs1-demo%2Findex.html)


![capture d'écran de la conformité de la page ...](doc/capture_1_W3C.png)

ou 

<img src="doc/capture_1_W3C.png" style="width=400px" alt="capture ecran sur w3c">


![capture d'écran sur le site https://www.ecoindex.fr/ pour tester l'eco-conception](doc/capture_1_ecoconcept.png)

ou 

<img src="doc/capture_1_ecoconcept.png" style="width=400px" alt="capture ecran sur ecoconcept pour tester l'eco-conception">

<!--  style="width=400px" ne fonctionne pas -->

### Présentation générale

**Auteur : Nom Prénom**  

Verification W3C : [Détail ICI](https://validator.w3.org/nu/?showsource=yes&showoutline=yes&showimagereport=yes&doc=https%3A%2F%2Fdemo-am90.github.io%2Fs1-demo%2Findex.html)

<br>
<img src="doc/capture_1_W3C.png" width="400px" alt="capture ecran sur ecoconcept">

<br>
<img src="doc/capture_1_ecoconcept.png" width="400px" alt="capture ecran sur ecoconcept">

## Répartition du travail

### Planification - Diagramme de GANTT

- Nom Prénom

### Recherches d'informations

- Nom Prénom
- Nom Prénom


### Rapport économique

- Nom Prénom
- Nom Prénom
- Nom Prénom

### Développement site

- Nom Prénom
  - Page d’accueil
  - "Template" de page (Navbar/Footer)
  - Page présentation
- Nom Prénom
  - Page histoire
- Nom Prénom
  - Page organisation


## Contributeurs

![capture d'écran de sur la contribution des membres du projet](doc/livrable2_contributors.png)
Figure 4 : Exemple de capture d’écran de sur la contribution des membres du projet

Voir exemple sur :

REMARQUES :


Testez les commandes ci-dessous avec vos URL pour valider votre projet :

chromium  https://USERNAME.github.io/REPO
chromium  https://github.com/USERNAME/REPO


Il est possible de remplacer chromium par mozilla.

Utilisation avancée de Git et GitHub

Pour “cloner” votre projet

Voici la documentation de “GitHub Pages” : mise à jour avec git


Sur votre terminal :

git --version
git clone https://github.com/login/mon_repository.git

cd mon_repository
git status
git config -l

Le projet doit être public, la commande ci-dessus permet de récupérer les paramètres du dépôt.

L’authentification est un peu compliquée sur GitHub :

git config credential.helper store

“Pousser” vos modifications (votre code)

Modifiez le contenu du projet HTML/CSS.

Transférez vos modification dans le “repository gitHub”.

git add --all
git commit -m "modif projet ..."
git push

“Récupérer” (“tirer”) les modifications des autres (leur code)

git pull

Commande pour revenir en arrière dans son code si on a oublié de faire un “pull”

git reset --hard HEAD^

Pour lister les “logs” des “commits”

git log

Attention à la qualité des logs : message que l’on ajoute dans la commande git commit -m "message", il doit avoir du sens et indiquer clairement le travail effectué lors du commit (dépôt des modifications sur GitHub).

Démonstration en TP (DIW ou BDD)

Vous pourrez utiliser les commandes ci-dessous lors de votre démonstration :

git log --oneline
git log --oneline --author=votreUsername
git shortlog -s -n
git shortlog

procédure conseillée :

se déplacer depuis le terminal dans le dossier du projet (dépôt local)

git pull

# modifiez le contenu du dossier

git add --all
git commit -m "modif projet ..."
git push

Figure 5 : présentation push/pull (source)

GitLab : Groupe de 4 personnes et plus

Hébergement sur GitLab

Voir exemple sur :

# la première fois
git clone https://gitlab.com/************************.git
cd *******************

git status
git config -l
git config credential.helper store


# récupérer les modification des autres
git pull

# modifiez le contenu du dossier
git add --all
git commit -m "modif projet"
git push
Figure 6 : GitLab
Figure 7 : Exemple de token GitLab

🤖 PB de Mise en ligne sur GitLab Pages

(aurelien)
à la création d’un projet GitLab, la visibilité du site sur GitLab Pages est par défaut en privé. Pour régler ceci, il faut aller dans les paramètres :

BitBucket : Groupe de 4 personnes et plus

Hébergement sur BitBucket : Une autre forge : https://bitbucket.org/ :

Voir exemple sur :


Pour utiliser “Bitbucket Pages” : Il faut suivre la documentation : https://support.atlassian.com/bitbucket-cloud/docs/publishing-a-website-on-bitbucket-cloud/

😅 : Il faut créer un “repository” avec comme nom workspaceid.bitbucket.io

Figure 8 : ATTENTION au nom du repository 
# la première fois
git clone https://USERNAME@bitbucket.org/USERNAME/USERNAME.bitbucket.io.git
cd *******************

git status
git config -l
git config credential.helper store


# récupérer les modification des autres
git pull

# modifiez le contenu du dossier
git add --all
git commit -m "modif projet"
git push

Pour la connexion dans un terminal, la méthode la plus simple semble de générer un mot de passe et l’utiliser :

Figure 9 : BitBucket

* Remarque : Les Groupes de moins de 4 personnes n’auront que 50% des points si ils ne font pas l’hebergement sur Gitlab Pages et BitBucket Pages

fichier de connexion ~/.git-credentials

La commande système git config credential.helper store permet de stocker le login et le mot de passe dans un fichier .git-credentials qui se trouve sur le répertoire $HOME (répertoire de connexion), c’est la façon la plus simple de s’authentifier automatiquement sur Github, GitLab et BitBucket.

cat ~/.git-credentials

https://USERNAME:glpat-1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX@gitlab.com
https://USERNAME:1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX@bitbucket.org
https://USERNAME:ghp_1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX@github.com

Attention à 🤖 ChatGPT : Comment créer et utiliser le fichier .git-credentials sur Windows

Il est recommandé d’utiliser des méthodes plus sécurisées comme les clés SSH pour l’authentification avec Git.

Évaluation

Figure 10 : Exemple de critères d’évaluation (en 2023 et 2024)

Annexes


vidéos : git enzo 12 mn - git (moins rapide) - grafikart cours

attention à 🤖 ChatGPT : attention à l’utilisation et aux solutions proposées pour les commandes GitHUB


Pensez à utiliser des exemples : HTML : codepen exemple 1 exemple 2





résumé commandes git (github) - résumé commandes git (gitlab)