Dans le fichier excel, supprimez le contenu des cellules jaunes et modifiez le avec vos informations. Le contenu des cellules jaunes est un exemple du résultat attendu.
Pour le livrable 2 (URL Gitlab et Bitbucket), supprimez le contenu des cellules.
Créer un compte “GitHub” : Remarque, faire attention au choix du username et du nom du projet sur GitHub, comme il compose l’URL, les URL sont évaluées :
Le contenu des cellules jaunes du fichier joint est un exemple de résultat attendu. Testez les liens puis supprimez le contenu de toutes les cellules jaunes du fichier “tableur”. Par la suite aucune autre cellule que celles en jaune ne doit être complétée.
Complétez ensuite dans le fichier excel toutes les cellules jaunes du livrable 1 (vos noms, groupes et liens sur GitHub). (ne rien mettre dans celles du livrable 2).
Les URLs doivent être des liens dans les cellules pour GitHub. Vérifiez que les URLs fonctionnent dans les cellules du tableur y compris en étant déconnecté de GitHub (le projet doit être “publique”).
Pour la partie du livrable 2 (URLs “GitLab” et “BitBucket”), les cellules devraient être vides.
Le fichier “tableur” doit être déposé sur moodle par le référent.
Si ces consignes ne sont pas respectées, une pénalité importante est appliquée.
Fichier du projet (“repository”) : README.md
Dans le fichier README.md, indiquez le nom de votre groupe et les personnes qui le composent (ajoutez l’e-mail du référent).
Dans ce fichier, créez aux minimum 3 parties : “sujet” avec un lien sur le site web , “Membres du groupe” et “Présentation du projet”.
Ne pas mettre dans ce fichier un contenu qui n’a pas de sens (liens morts ou sans rapport avec votre sujet, texte sans rapport avec votre sujet ….).
Il doit y avoir à coté du fichier README.md un fichier index.html qui correspond à la page d’accueil.
Toutes les personnes du projet doivent apparaître de façon claire comme contributeurs (je dois être en mesure de reconnaître facilement leurs noms ou prénoms). Les personnes qui ne contribuent pas du tout seront pénalisées. Si il n’est pas possible d’identifier de façon claire tous les contributeurs, tous seront pénalisés ; Remarque la quantité de contribution n’est pas prise en compte.
Site web : page d’accueil + menu
Créer une simple page index.html avec un menu et les liens sur toutes les autres pages (cette page sera chargée par défaut sur l’URL https://username.github.io/nomProjet/)
Assurez-vous de la présence d’un fichier “favicon.ico” et d’un titre (balise TITLE) sur chaque page.
Les liens du menu doit avoir des intitulés qui ont du sens et doivent permettre d’ouvrir toutes les pages
Le menu est commun à toutes ou les pages sauf éventuellement la page d’accueil
Créez toutes les pages (au moins une par étudiant). Toutes les pages doivent indiquer, en pied de page, l’auteur (le futur auteur) de la page.
Toutes les pages doivent contenir un minimum de contenu qui a du sens (éviter le “Lorem Ipsum”).
Le contenu et la mise en forme est très peu évalués. Ce livrable est surtout l’occasion de vérifier que les tâches sont distribuées au sain du groupe.
Si vous rencontrez des problèmes, posez vos questions en BDD à Alain Millet
Consignes pour le livrable 1 :
Créez un compte GitHub pour votre projet : réfléchissez à un nom d’identifiant “username” et un nom de projet “repository” appropriés. L’URL aura ensuite la forme suivante : https://username.github.io/repository/
Créez la première page “index.html” de votre projet avec comme contenu le titre de votre projet de SAE. Il est obligatoire d’avoir un fichier “index.html”, à la racine du projet qui servira de page d’accueil. Ne pas respecter cette consigne entraînera une pénalité.
Ajoutez une balise “TITLE” avec un titre approprié.
Créez un fichier “favicon.ico” (image), vous pouvez utiliser un site comme https://www.favicon-generator.org/ pour convertir une image en icône.
Dans la page d’accueil, ajoutez le menu et les liens vers toutes les autres pages. Ajoutez également un peu de texte pour expliquer votre projet dans cette page.
Créez toutes les pages de votre site Web avec un minimum de contenu, et indiquez l’auteur de chaque page en pied de page.
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)
Ensuite, ajoutez une présentation du projet dans le fichier README.md : Utilisez un titre de niveau 1 suivi de quelques lignes pour présenter votre projet.
Livrable 2 (Partie Dev. Interfaces Web) : le vendredi 20 octobre (avant 18H) - semaine de cours 7
Dans le fichier excel, supprimez le contenu des cellules jaunes et modifiez le avec vos informations. Le contenu des cellules jaunes est un exemple du résultat attendu.
Site Web terminé :
Ensemble de pages homogènes, ergonomiques … (voir les critères d’évaluation).
Indiquez le(s) auteur(s) de chaque page en pied de page.
Dans le fichier README.md de votre dépôt de projet, modifiez si nécessaire le titre du sujet, le lien vers le site, les membres du groupe et le texte de présentation.
Dans le fichier README.md, ajoutez tous les éléments (images, liens, etc.) qui attestent que les pages ont été validées sur W3C. Indiquez clairement les auteurs de chaque page.
Dans le fichier README.md, ajoutez un court texte résumant les choix de conception ainsi que la répartition du travail dans le groupe.
Dans le fichier README.md, ajoutez une capture d’écran illustrant le calcul effectué par GitHub avec chacun des contributeurs. Les noms des contributeurs doivent être présentés de manière claire afin de pouvoir identifier facilement chaque membre du groupe (consultez la capture d’écran).
L’hébergement sur GitHub Pages est réalisé.
L’hébergement sur GitLab Pages est à réaliser par les groupes de 4 personnes et plus.
L’hébergement sur Bitbucket Pages est à réaliser par les groupes de 4 personnes et plus.
Consignes et critères d’évaluation du livrable 2
Critères d’évaluation du site Web
Mise en forme de l’interface
Présence de plusieurs niveaux hiérarchiques de l’information.
Lisibilité de l’information.
Présence d’images pour illustrer les propos.
Contenus en quantité satisfaisante.
Arborescence compréhensible.
Site homogène.
Ergonomie (accessibilité, menu, navigation).
Esthétisme général et homogénéité entre les pages.
Respect des normes HTML5 et CSS3.
Simplicité pour connaître le(s) auteur(s) de chaque page.
Indiquez clairement dans chaque page HTML l’auteur de la page en pied de page (sinon une pénalité sera appliquée)
validation sur W3C
Effectuez une vérification sur Nu Html Checker (identique au validator de W3C ) pour vous assurer que les normes HTML et CSS sont respectées. Joignez dans votre fichier README.md les éléments (captures d’écran, liens, etc.) attestant que vous avez effectué les tests de validité de votre site sur le site W3C. Créez un dossier “doc” et ajoutez-y les captures d’écran du résultat sur W3C. Indiquez aussi l’auteur de la page et la personne qui a fait le test de cette page (si ce n’est pas la même personne).
Ces informations doivent être facilement lisibles sur GitHub (redimensionner les tailles des captures d’écran si nécessaire).
Ajoutez des liens sur Nu Html Checker qui testent la conformité W3C les pages.
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.
Voici un exemple de fichier MarkdownREADME.md final
# 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
## Contributeurs
![capture d'écran de sur la contribution des membres du projet](doc/livrable2_contributors.png)
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 :
Veuillez noter qu’il n’est plus possible de modifier le projet sur GitHub avec l’utilisation de commandes dans un terminal du login/motdepasse, cela ne fonctionne plus. Il faut générer une clé : “un token” qui servira de mot de passe .
Pour générer un access token depuis l’interface web de GitHub, suivez ces étapes :
Cliquez sur le menu de votre profil sur GitHub.
Cliquez sur l’icône en forme d’avatar d’utilisateur située tout à droite du menu (sur votre photo de profil) . Ensuite, sélectionnez “⚙️ Settings” dans le menu
Dans le menu de gauche, faites défiler jusqu’en bas et cliquez sur “<> Developer settings”.
Dans le menu de gauche, cliquez sur “Personal access tokens”, puis sur “Generate new token”
Vous serez invité à fournir votre mot de passe GitHub pour confirmer votre identité (c’est le mot de passe du compte ).
Saisissez un nom descriptif pour votre token et sélectionnez les autorisations appropriées en fonction des actions que vous souhaitez effectuer : sélectionnez toutes les autorisations nécessaires sur les dépôts (“repo”).
GitHub générera un access token. Copiez ce token et gardez-le en lieu sûr : Recopiez le token de la forme ghp_1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX dans un fichier. Ce token servira de mot de passe, il faudra vous l’envoyer entre les membres du groupe si vous choisissez cette méthode.
IMPORTANT : enregistrez le login et mot de passe
git config credential.helper store
La commande ci-dessus copiera le login et le mot de passe dans le fichier ~/.git-credentials
le login est le username du compte
le mot de passe est le token de la forme ghp_1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX1xX
Il est possible de vérifier ou modifier ces informations qui sont dans le fichier ~/.git-credentials
“Pousser” vos modifications (votre code)
Modifiez le contenu du projet HTML/CSS.
Transférez vos modification dans le “repository gitHub”.
# 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
l’utilisation d’un token est obligatoire dans le terminal
Solution 1 : Depuis l’interface du profil “Edit profile”
Dans l’interface du profil > “Access Tokens” : bouton “Add new token” (pour tous les projets)
Mettre un nom au token “Token name”
date de 1 an maxi d’utilisation
au minimum “read/write” dans le “repository”
Bien recopier le token qui apparaît au dessus dans un fichier texte
Solution 2 : dans la gestion du projet (fin de de la barre de menu latéral)
Selectionner Access Token (token (clé) pour ce projet)
😅 : Il faut créer un “repository” avec comme nom 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 :
l’utilisation d’un mot de passe généré est obligatoire dans le terminal