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





(portfolio - copilot)

Livrables Partie Dev. Interfaces Web

Livrable 1 : le vendredi 29 septembre (avant 18H) - semaine de cours 4



Créer un compte “GitHub”

Travail à déposer sur GitHub


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



Bien lire les consignes dans la suite du document.

Livrable 2 : le vendredi 20 octobre (avant 18H) - semaine de cours 7



Site Web terminé :



Consignes pour le livrable 1 :

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)



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

Critères d’évaluation du site Web

validation sur W3C

exemple d’affichage sur github

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)


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">


<!--  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 w3c">



## 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

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

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
présentation push/pull (source)

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

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 username.bitbucket.io ou dans leur documentation workspaceid.bitbucket.io

# 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 :

fichier de connexion ~/.git-credentials

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.

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 exemple 2





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

https://librecours.net/module/sr/git02/index.xhtml
https://www.atlassian.com/fr/git/tutorials/setting-up-a-repository