Site-web : Différence entre versions

De fablabo
Aller à : navigation, rechercher
(Page créée avec « {{Projet |status=Concept |status_pub=Publié |image=Site-web.gif |description=Site web du projet Quiet cook |license=CC-by-sa-3.0 - Creative Commons Attribution CC-by-sa-3... »)
 
(→‎Référencement du site ou SEO)
 
(26 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 2 : Ligne 2 :
 
|status=Concept
 
|status=Concept
 
|status_pub=Publié
 
|status_pub=Publié
−
|image=Site-web.gif
+
|image=a3c-hd.png
−
|description=Site web du projet Quiet cook
+
|description=Site web A3C Presqu'île
 
|license=CC-by-sa-3.0 - Creative Commons Attribution CC-by-sa-3.0 France
 
|license=CC-by-sa-3.0 - Creative Commons Attribution CC-by-sa-3.0 France
 
|contributeurs=LERUSTE REGIS,
 
|contributeurs=LERUSTE REGIS,
Ligne 10 : Ligne 10 :
 
|url=http://fablabo.net/wiki/SCAO
 
|url=http://fablabo.net/wiki/SCAO
 
}}
 
}}
 +
==Site web==
 +
Ce projet traite de la création de '''A''' à '''Z''' d'un site web.
 +
Avis aux amateurs ! un peu de patience et de persévérance et ça marche.
 +
Il suffit de cliquer [http://a3cp.org a3cp.org].
 +
===Objet===
 +
L'objet du [https://fr.wikipedia.org/wiki/Site_web site web] est de constituer une vitrine qui permette la promotion et la communication de l'association [http://fablabo.net/wiki/A3CP A3C Presqu'île] et du [http://fablabo.net/wiki/SCC SCC] qui lui est attaché.
 +
 +
===Contexte de travail===
 +
* La [https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3 formation]
 +
* Le [https://github.com/AIREL46/SCAO/blob/master/wiki/site-web-1.odt support de cours].
 +
 +
===Organisation et réalisation du projet===
 +
L'[https://fr.wikipedia.org/wiki/Site_web#Organisation_d'un_projet_web organisation d'un projet web] repose sur les différentes étapes de conduite du projet, lancement, conception, '''réalisation''', production et exploitation.
 +
 +
La '''réalisation''' consiste à :
 +
* choisir un [https://fr.wikipedia.org/wiki/H%C3%A9bergeur_web hébergeur web] dont les prestations sont :
 +
** la réservation et gestion d'un [https://fr.wikipedia.org/wiki/Nom_de_domaine nom de domaine]
 +
** la mise en œuvre d'une infrastructure d'hébergement
 +
* communiquer avec l'hébergeur
 +
* développer l'interface utilisateur (frontend), la partie visible dans le navigateur
 +
* développer l'arrière plan (backend), la partie qui fonctionne côté serveur
 +
* publier le site.
 +
====Choix de l'hébergeur web====
 +
L'[https://www.icann.org/ ICANN] est une organisation à but non lucratif et reconnue d'utilité publique rassemblant des participants du monde entier qui œuvrent à la préservation de la sécurité, la stabilité et l'interopérabilité de l'Internet.
 +
 +
The  [https://www.internic.net/regist.html companies list] have been accredited by ICANN to act as registrars in one or more TLDs.
 +
 +
Mon choix s'est orienté sur [https://registrar.1and1.info/domains_raa/home 1&1]
 +
 +
Le site [http://www.top10hebergeurs.com/categorie/hebergement-linux.html Top 10 Hébergeurs] donne une "liste hébergeur linux" dont 1&1 fait partie.
 +
 +
J'ai réalisé un devis, en date du 3 janvier 2018, à partir des données recueillies sur le site [https://www.1and1.fr/hebergement-web?ac=OM.FR.FR575K03696T2847a&ref=374121 1&1] :
 +
* 1ère année :
 +
** 1&1 Starter pour 23,88 € HT
 +
** Quiet-cook.com ([https://fr.wikipedia.org/wiki/Nom_de_domaine nom de domaine]) offert
 +
** '''Soit un total de 23,88 € HT'''
 +
* 2ème année et suivante :
 +
** 1&1 Starter pour 35,88 € HT
 +
** Quiet-cook.com pour 9,99 € HT
 +
** '''Soit un total de 45,87 € HT'''
 +
A cette même date, j'ai notifié ce devis.
 +
 +
====Communication avec l'hébergeur====
 +
La communication avec l'hébergeur s'établit avec un outil de gestion de fichier adapté au '''protocole''' de communication [https://fr.wikipedia.org/wiki/File_Transfer_Protocol '''FTP''' (File Transfert Protocol)] ou [https://fr.wikipedia.org/wiki/SSH_File_Transfer_Protocol '''SFTP''' (Secure File Transfert Protocol)]. Il se concrétise avec le logiciel [https://en.wikipedia.org/wiki/FileZilla FileZilla]. Deux sites Filezilla coexistent :
 +
* un site français non officiel [http://filezilla.fr/ filezilla.fr]
 +
* un site anglophone officiel [https://filezilla-project.org/ filezilla-project.org]
 +
Pour Ubuntu, le site français met à disposition un [http://filezilla.fr/tutoriel-filezilla-pour-ubuntu/ tutoriel] qui préconise l'installation du logiciel via :
 +
* les dépôts officiels
 +
* l'archive du site filezilla
 +
* un PPA.
 +
J'ai utilisé la ligne de commande :
 +
 +
<code>sudo apt-get install filezilla</code>
 +
 +
====Développement de l'interface utilisateur (frontend)====
 +
Le développement de l'interface utilisateur est réalisé à partir :
 +
* l'édition du html et du css avec l'éditeur [https://doc.ubuntu-fr.org/gedit gedit] en tapant dans un '''premier''' terminal :
 +
**gedit SCAO/wiki/tp_quiet-cook/index.html SCAO/wiki/tp_quiet-cook/style.css
 +
* l'affichage du rendu à l'écran à l'aide du [https://www.mozilla.org/fr/firefox/ navigateur firefox] en tapant dans un '''deuxième''' terminal :
 +
**firefox  SCAO/wiki/tp_quiet-cook/index.html
 +
Les fichiers du répertoire tp_quit-cook sont disponibles sur le site [https://github.com/AIREL46/SCAO/tree/master/wiki/tp_quiet-cook Github]
 +
 +
Pour déclarer [https://www.w3.org/International/questions/qa-html-language-declarations.fr la langue] dans le fichier html.
 +
 +
====Développer l'arrière plan (backend)====
 +
====Publication du site====
 +
La publication du site se réalise à l'aide de filezilla en relation avec le site de l'hébergeur.
 +
=====Données de connexion=====
 +
Les données de connexion sont copiées sur le site de l'hébergeur puis collées dans filezilla :
 +
* consulter le site de l'hébergeur [https://www.1and1.fr/ 1&1] - '''Espace client''' (identifiant + mot de passe), puis accès '''FTP sécurisé''', pour '''copier''' successivement les données de connexion
 +
* lancer filezilla :
 +
** puis cliquer successivement sur Fichier - Gestionnaire de sites - Quiet cook - Connexion
 +
** ou '''coller''' successivement les données de connexion comme indiquées dans le tableau :
 +
{| class="wikitable alternance centre"
 +
|+ Données de connexion :
 +
|-
 +
|
 +
! scope="col" | <center>Site de l'hébergeur 1&1</center>
 +
! scope="col" | <center>Filezilla</center>
 +
|-
 +
! scope="row" | 1
 +
| <center>Serveur : home717469283.1and1-data.host</center>
 +
| <center>Hôte (*) : home717469283.1and1-data.host</center>
 +
|-
 +
! scope="row" | 2
 +
| <center>Identifiant : u91894517</center>
 +
| <center>Nom utilisateur : u91894517</center>
 +
|-
 +
! scope="row" | 3
 +
| <center></center>
 +
| <center>Mot de passe : ........</center>
 +
|-
 +
! scope="row" | 4
 +
| <center>Port : 22</center>
 +
| <center>Port : 22</center>
 +
|}
 +
 +
=====Transfert des fichiers de l'ordinateur vers l'hébergeur=====
 +
* sélectionner les fichiers à tranférer
 +
* faire un clic droit sur la sélection, sur la fenêtre qui s'ouvre cliquer sur '''"Envoyer"'''.
 +
=====Test de l'accès au site web=====
 +
* firefox http://a3cp.org.
 +
 +
=====Mémorisation des données de connexion=====
 +
Avant de quitter filezilla :
 +
* Fichier - Gestionnaire de sites - Donner un nom - Valider.
 +
===Référencement du site ou SEO===
 +
[https://fr.wikipedia.org/wiki/Optimisation_pour_les_moteurs_de_recherche SEO] est l'acronyme de Search Engine Optimization. En français, optimisation pour les moteurs de recherche. Il inclut l'ensemble des techniques qui visent à améliorer le positionnement d'un site, Cette technique est maîtrisée par le [https://fr.wikipedia.org/wiki/Community_manager Community manager].
 +
 +
Prévoir d'ajouter une annonce sur la plateforme [https://www.benevolt.fr/dashboard Benevolt] :
 +
* J'ai besoin de faire connaître mon projet d'invention qui consiste en un Système de Cuisson Intelligente...
 +
 +
===Changement du nom de domaine===
 +
Tout d'abord un rappel chronologique :
 +
* le site [http://quiet-cook.com Quiet cook] a été créé le 03/01/2018, il est remplacé en 2021 par le site [http://a3cp.org a3cp.org]
 +
* l'association [https://fablabo.net/wiki/A3CP A3C Presqu'île] a été créée le 02/04/2019.

Version actuelle en date du 18 novembre 2021 à 13:19


Site web A3C Presqu'île

A3c-hd.png

Contributeur·ice·s

LERUSTE REGIS

Statut du projet

Concept

Statut de la publication

Publié

License

CC-by-sa-3.0 - Creative Commons Attribution CC-by-sa-3.0 France

Inspiration

Vitrine

Fichiers source

Machines

Matériaux

Matière grise

Lien

http://fablabo.net/wiki/SCAO




Site web

Ce projet traite de la création de A à Z d'un site web. Avis aux amateurs ! un peu de patience et de persévérance et ça marche. Il suffit de cliquer a3cp.org.

Objet

L'objet du site web est de constituer une vitrine qui permette la promotion et la communication de l'association A3C Presqu'île et du SCC qui lui est attaché.

Contexte de travail

Organisation et réalisation du projet

L'organisation d'un projet web repose sur les différentes étapes de conduite du projet, lancement, conception, réalisation, production et exploitation.

La réalisation consiste à :

  • choisir un hébergeur web dont les prestations sont :
    • la réservation et gestion d'un nom de domaine
    • la mise en œuvre d'une infrastructure d'hébergement
  • communiquer avec l'hébergeur
  • développer l'interface utilisateur (frontend), la partie visible dans le navigateur
  • développer l'arrière plan (backend), la partie qui fonctionne côté serveur
  • publier le site.

Choix de l'hébergeur web

L'ICANN est une organisation à but non lucratif et reconnue d'utilité publique rassemblant des participants du monde entier qui œuvrent à la préservation de la sécurité, la stabilité et l'interopérabilité de l'Internet.

The companies list have been accredited by ICANN to act as registrars in one or more TLDs.

Mon choix s'est orienté sur 1&1

Le site Top 10 Hébergeurs donne une "liste hébergeur linux" dont 1&1 fait partie.

J'ai réalisé un devis, en date du 3 janvier 2018, à partir des données recueillies sur le site 1&1 :

  • 1ère année :
    • 1&1 Starter pour 23,88 € HT
    • Quiet-cook.com (nom de domaine) offert
    • Soit un total de 23,88 € HT
  • 2ème année et suivante :
    • 1&1 Starter pour 35,88 € HT
    • Quiet-cook.com pour 9,99 € HT
    • Soit un total de 45,87 € HT

A cette même date, j'ai notifié ce devis.

Communication avec l'hébergeur

La communication avec l'hébergeur s'établit avec un outil de gestion de fichier adapté au protocole de communication FTP (File Transfert Protocol) ou SFTP (Secure File Transfert Protocol). Il se concrétise avec le logiciel FileZilla. Deux sites Filezilla coexistent :

Pour Ubuntu, le site français met à disposition un tutoriel qui préconise l'installation du logiciel via :

  • les dépôts officiels
  • l'archive du site filezilla
  • un PPA.

J'ai utilisé la ligne de commande :

sudo apt-get install filezilla

Développement de l'interface utilisateur (frontend)

Le développement de l'interface utilisateur est réalisé à partir :

  • l'édition du html et du css avec l'éditeur gedit en tapant dans un premier terminal :
    • gedit SCAO/wiki/tp_quiet-cook/index.html SCAO/wiki/tp_quiet-cook/style.css
  • l'affichage du rendu à l'écran à l'aide du navigateur firefox en tapant dans un deuxième terminal :
    • firefox SCAO/wiki/tp_quiet-cook/index.html

Les fichiers du répertoire tp_quit-cook sont disponibles sur le site Github

Pour déclarer la langue dans le fichier html.

Développer l'arrière plan (backend)

Publication du site

La publication du site se réalise à l'aide de filezilla en relation avec le site de l'hébergeur.

Données de connexion

Les données de connexion sont copiées sur le site de l'hébergeur puis collées dans filezilla :

  • consulter le site de l'hébergeur 1&1 - Espace client (identifiant + mot de passe), puis accès FTP sécurisé, pour copier successivement les données de connexion
  • lancer filezilla :
    • puis cliquer successivement sur Fichier - Gestionnaire de sites - Quiet cook - Connexion
    • ou coller successivement les données de connexion comme indiquées dans le tableau :
Données de connexion :
Site de l'hébergeur 1&1
Filezilla
1
Serveur : home717469283.1and1-data.host
Hôte (*) : home717469283.1and1-data.host
2
Identifiant : u91894517
Nom utilisateur : u91894517
3
Mot de passe : ........
4
Port : 22
Port : 22
Transfert des fichiers de l'ordinateur vers l'hébergeur
  • sélectionner les fichiers à tranférer
  • faire un clic droit sur la sélection, sur la fenêtre qui s'ouvre cliquer sur "Envoyer".
Test de l'accès au site web
Mémorisation des données de connexion

Avant de quitter filezilla :

  • Fichier - Gestionnaire de sites - Donner un nom - Valider.

Référencement du site ou SEO

SEO est l'acronyme de Search Engine Optimization. En français, optimisation pour les moteurs de recherche. Il inclut l'ensemble des techniques qui visent à améliorer le positionnement d'un site, Cette technique est maîtrisée par le Community manager.

Prévoir d'ajouter une annonce sur la plateforme Benevolt :

  • J'ai besoin de faire connaître mon projet d'invention qui consiste en un Système de Cuisson Intelligente...

Changement du nom de domaine

Tout d'abord un rappel chronologique :

Récupérée de « https://archive.fablabo.net/mediawiki/index.php?title=Site-web&oldid=35587 »