creation site
TRANSCRIPT
-
8/8/2019 Creation Site
1/20
Crer un site internet
Crer un site
Internet
Par
Patrick Lanneau
-
8/8/2019 Creation Site
2/20
-
8/8/2019 Creation Site
3/20
Crer un site Internet
Crer un site internet
Vous avez un projet: la culture de base.Les mots pour comprendreLes clefs pour russir son projet
Le fonctionnement dun site internet:Logiciel client
Questce quun logiciel client ?On lappelle en gnral Navigateur Le plus connu est Internet
Explorer mais on peut aussi utiliser Netscape ou Safari Dans lecadre du logiciel libre on utilise Mozilla ou les projets qui en sontissus
Comment on visite les sites internet ? Les divers navigateursleurs diffrences
Les navigateurs respectent des normes de dfinition du langageHTML
Les dernires versions des navigateurs se prtent mieux unemise en page de qualit des possibilits dinteraction plus richesPour accder un site on indique son URL au navigateurLURL se prsente sous la forme suivante :Protocole:Nom du siteLocalisation dans
larborescence du siteLe protocole est en gnral httpOn utilise aussi le protocole https pour les liaisons scurisesLe nom du site est de la forme :Nom de la machine dans le domainenom de sous
domainenom de domaineLe nom de domaine est soit un code national sur caractres
soit un code international Souvent on utilise le domaine com dot com !!!
Le nom de sousdomaine appartient une personne morale ouphysique On peut lacheter auprs dun REGISTRAR
Le nom de machine est souvent www pour un serveur internet
ServeurO est le site ? Comment il est accessibleLe site est sur une machine physique il est accessible par le
systme dadressage IPPratique : test du fonctionnement de lIP Document : exo
tramepdf
-
8/8/2019 Creation Site
4/20
Crer un site internet
HbergeurQui peut mettre un site en ligne comment activer le logiciel
serveur ? Quels moyens matriels ? Herberger un site sur sa propremachine utiliser les services dune socit spcialise Questce quelhbergement mutualis ?
Qui peut mettre un site en ligne?Toute personne disposant dun ordinateur reli en permanence
internet et disposant dune IP fixe En pratique on utilise rarementun ordinateur personnel comme serveur
Si cependant on choisit dtre son propre hbergeur on doitutiliser un logiciel serveur Le plus utilis est un logiciel libre Apache
Utiliser les services dune socit spcialise.
En gnral les serveurs sont hbergs dans des fermes
Pour des raisons de cot on pratique lhbergement mutualiso une seule machine physique va rpondre des clients pourplusieurs URL
Pour un tablissement scolaire,on peut utiliser les services dhbergementdu rectorat.
Les plus : la visibilit du rectorat sa scurit la disposition dePHP de Mysql
Les moins : les contraintes scuritaires un nom de site long etpeu lisible
Utiliser un hbergeur gratuit.
Intressant pour un projet local atelier dcriture de la classeprojet pdagogiqueLongtemps le plus intressant tait free Depuis le
laccs FTP est rserv une IP free il faut tre connect par freeSi le site fonctionne avec SPIP qui permet une mise jour selon leprotocole html cela ne pose pas de problme
Voil Lycos imposent des bandeaux
Acheter un nom et un hbergement
Cela donne un nom plus facile retenir le cot nest pas aussilev quon le pense :
Nom de domaine com : infrieur an
Hbergement : en chez online ht par an pour unespace de Mo et mysql chez OVHan pour MO pour Mo et base Mysql
voir sur wwwonlinenet et sur wwwovhcom
Nom de domaineQuest ce quun nom de domaine ? Comment le lire le
dcoder ? Les rgles de nommage ? Comment sont attribus lesnoms ?
On la vu un nom de domaine cest une URLLes noms sont attribus au premier qui le demande Dans le
domaine franais il y a des rgles plus strictes On ne peut acheter
-
8/8/2019 Creation Site
5/20
Crer un site internet
un nom que si cest le nom de lentreprise qui lachte nom dpossur le K bis
On achte un nom de domaine un registrarActuellement en France le registrar le moins coteux est
GANDICertains hbergeurs proposent des cots infrieurs car ils
bnficient de lapport de lhbergementUn nom de domaine en com cote environ
Questions de cot
Cot de la cration dun site.
Tout dpend de ce que lon en attendSi lon dveloppe en interne le cot du logiciel permet
dconomiser sur le temps de dveloppement : on peut dvelopperavec un simple traitement de texte mais un site important devient
vite ingrableLogiciel recommand : dreamweaver MX ou adobe
golivePour un site graphique prvoir :Un logiciel de traitement dimage : photoshop ou
photoshop element ou paintshop pro version dvaluationtlchargeable
Logiciels de traitement danimations flash
Cot de la maintenance.
Tout dpend de la maintenance
En fonction de la rgularit des mises jour Des mises jourrgulires assurent des visites rgulires donc de la visibilit
Cot dun nom de domaine?Voir les prix chez wwwovhcomOu chez wwwonlinenet
Cot dun hbergement?Voir les prix chez wwwovhcomOu chez wwwonlinenet par anPour choisir on peut utiliser les conseils glans sur les forums
de news En particulier frreseauxinternethebergement
Choisir son hbergeurDes exemples dhbergeurs de cotsDu gratuit au plus coteux :Un hbergement gratuit sur freeDes hbergeurs mutualiss OVH OnLine
Un hbergement gr par votre FAI ex : lerelaisinternet
-
8/8/2019 Creation Site
6/20
Crer un site internet
Des hbergeurs classiques
Choisir des logiciels approprisAdapt au budget au matriel au projet
Logiciels de cration de page logiciels graphiquesgratuit payantEn plus des logiciels indiqus dans le cot de cration du site
prvoir un logiciel de ftp pour transfrer les pages sur le site delhbergeur Ce transfert peut tre ralis par le logiciel de crationde page dreamweaver On peut utiliser des sharewares ws_ftpcute_ftp
Une remarque importante : Non seulement on ne peutpr juger des logiciels que lon utilisera il nexiste pas un logicielincontournable mais encore on ne sait de quelle version ondisposera Pour cette raison il faut apprendre penser en terme defonctionnalits plutt quen terme de procdure pas pas
Je choisirai un logiciel en fonction du prix payant ou gratuitcher ou pas cher de sa disponibilitdploy sur ma plate forme ounon En outre les versions se succdent et il y a parfoisdimportantes modifications cosmtiques dune version lautre
Logiciels de cration de page
Il permet de crer des pages en mode wysiwig ou non Ilpermet ou non de grer les sites
Les deux plus communs : macromdia dreamweaver et Adobegolive Ils sont hlas chers et surdimmensionns pour un dbutantMais ce peut tre un investissement incontournable pour un site unpeu ambitieux
Les facilits font gagner du tempsOn utilise aussi Freeway qui ressemble plus un logiciel dePAO
Se mfier de loption enregistrer en html de word et defrontpage qui prend trop dinitiatives sans nous prvenir Il fait sonsite pas le notre
Logiciels de transfert ftp
Beaucoup de logiciels gratuits ou payants souvent peu chersEn vrac : WS_ftp Cute_ftp fetch captain FTP oxygenSouvent ils prsentent deux fentres qui mettent en visvis
larborescence de lordinateur local et celle du site distant On faitalors glisser les fichiers de lun lautrePour tablir une connexion on doit renseigner :
ladresse du site distant,
le login (mon identificateur unique),le mot de passe.
-
8/8/2019 Creation Site
7/20
Crer un site internet
Pourquoi un site?Aujourdhui tout le monde veut son site le particulier comme
lentreprise Parce que lon a entendu dire que a ne cotait pas cheret que cela donnait une visibilit mondiale
Un site personnelParce que lon a quelque chose dire un CV par exemple Ce
peut tre compltement gratuit y compris pour un site de grandequalit car quand on travaille pour soi on ne compte pas le tempsLe bnfice est en gnral moral Mais on peut imaginer unemarotte qui devienne un modle conomique ;
Un site personnel peut devenir une entreprise commerciale Cepeut tre une faon de se vendre
exemple du site de Ludovic Pascalon wwwpowerbookfrcom
Un site dassociationParce que lon a quelque chose dire puisque lon est une
association Le cot est comparable celui dun site personnellesite de B GEE sur le wifi Montauban
Un site dentrepriseCela devient de plus en plus incontournable Tout dpend de
lentreprise Cest une vitrine virtuelle de lentreprisetre prsent cest comme avoir son nom sur lannuaireCest li la mondialisation de lconomieDe plus en plus cest une ouverture indispensable exemple de
Lien Socialwwwliensocialcom
Des sites pourActuellement on parle souvent de types catgories de sites
Le site portail
Il sagit dun page qui oriente le lecteur vers un certain nombrede services On y trouve des liens Ses exigences sont la lisibilit et laconcision
Les Blogs
Ils rpondent au besoin de chacun de sexprimer Il sagit dunoutil qui permet quelquun dexprimer ce quil a dire Ce sont dessortes de journaux intimes publics Parti des USA un site permet depublier son propre blog Noam Chomsky luimme a succomb cemdia : http:blogzmagorgttt de tels services apparaissent enFrance comme http:wwwbloggorg ou bien http:wwwublognetsite
Pourquoi ne pas utiliser le blog comme un atelier dcriture ?On utilise trop peu lcole les besoins dexpression des franais leblog cest le Journal dAnne Branks le SMS cest une pratique delcrit que naurait pas reni Perec et lOULIPO
-
8/8/2019 Creation Site
8/20
Crer un site internet
La publication en ligne
Cre au dbut par des organismes de presse le premier : lemonde diplomatique il sagit doutils qui facilitent la mise en lignedinformations de type articles de presse
Loutil le plus connu est SPIP Il est gratuit
Lorsquil est install il nest plus besoin daucune comptencetechnique pour lutiliser et publier La production des textes et lagestion des publications passe par un outil en ligne base deformulaires
La seule contrainte est quil vaut mieux avoir une connexionpermanente Cest le cas dans un lyce cest le cas avec ladsl
-
8/8/2019 Creation Site
9/20
Crer un site internet
Les premiers pas pour crer son site et le publier.
Thorie et application
Crer le site
Utiliser un logiciel de cration et de gestion de siteLes divers types de logicielActuellement on nutilise plus que des logiciels wysiwig On
utilise parfois des automates des systmes avec formulaires quipermettent de publier lintrieur dun canevas graphique Ce typedoutil ne convient pas un site dentreprise On ne limagine quepour un site de blog ou de news ! lorsque ce qui importe estuniquement le texte
Certains prestataires de services proposent de tels outils voilOn sen mfiera car ils laissent peu dautonomie ;
Un exemple de cration de page avec un logiciel wysiwygDreamwaever
Architecture dun sitePenser un site organiser linformationVoir lanimation power point
Base de donnesGrer des donnes structures Les bases de donnes MySQLUn exemple de base de donnes : la gestion dun blogatelier
dcriture :
La table des auteurs
Un auteur cest un nom un prnom un mail un prof rfrent
La table des contributions
Une contribution cest un auteur lien sur la table des auteursun titre un soustitre un texte un tat en cours dcriture valid
Les blogs et singulirement SPIP utilisent beaucoup les bases dedonnesActuellement les sites sont de plus en plus construits autour de
bases de donnes car cest la seule faon de grer de manirestructure des donnes importantes
Lorsque lon dispose dimportantes quantits de donnes on aintrt grer un site sous la forme dun base de donnes
En particulier les blogs sont architecturs autour dun base dedonnes
-
8/8/2019 Creation Site
10/20
-
8/8/2019 Creation Site
11/20
Crer un site internet
Cette caractristique vite dutiliser un logiciel de FTP pourtransfrer chaque fichier individuellement
Procdure pas pas.
Je lance Dreamweaver
Au lancement de Dreamweaver II on obtient sur unenvironnement Windows un cran qui pourrait ressembler cela :
Une grande fentre de type traitement de texte o lonrdigera la page
Trois barres doutils qui nous serviront nous orienter dans lesdiverses phases de travail Au cas o les barres ne seraient pasprsentes on peut les faire apparatre en activant les premiersitems du menu fentre de la page document
- La barre objet - La barre proprits - La barre lanceur
La barre objet:Elle permet dinsrer par glisserdposer des objets spcifiques
sur le document Dans un premier temps on se limitera aux troispremiers objets :
-
8/8/2019 Creation Site
12/20
Crer un site internet
Une image
On choisit limage dans un dialogue interactif Si elle nest pasdans lespace dtermin pour le site le logiciel la copiera dans ledossier image par dfaut
Un tableauA la cration on dtermine le nombre de lignes de colonnes la
largeur lpaisseur de la bordure Ces paramtres restentmodifiables
On peut crer un tableau dans une cellule de tableauOn peut fusionner des cellules de tableau
Une barre horizontale
Elle sert sparer deux lments dune page On peut rglerson paisseur sa largeur
La barre propritsElle se modifie en fonction du type dobjet slectionn sur le
documentAinsi ici elle correspond la gestion de texte
Le texte qui va tre saisi sera au format paragraphe fer gauche
Le paragraphe prcdent tait au format Titre centrCest dans cette barre que lon pourra raliser les liens
hypertexte lutilisateur peut par un clic de souris accder uneautre page soit en inscrivant ladresse de la page recherche dans lazone Lien soit en droulant un fil au moyen de la pelote droite de la zone dadresse du lien jusqu la page cible dans lapalette de site voir le chapitre grer les sites
La barre lanceurElle permet dafficher le code HTML de la page On laissera cela
aux plus aguerrisElle permet de faire apparatre la fentre de gestion du site
Grer le site
-
8/8/2019 Creation Site
13/20
Crer un site internet
Avant de crer la moindre page il faut prparer lespace detravail Dreamweaver nous aide pour cela avec ses outils de gestionde site
Aprs avoir activ la fentre de gestion de site icne Site dela barre Lanceur on active le menu droulant dfinir les sites
On obtient une zone de dialogue
On donne un nom au site, et surtout, on dfinit dans Dossier racine
local la localisation de notre site. On le localise par exemple dans un
dossier ad hoc du dossier Mes documents .
Crer ma premire page
Lorsque le site est dfini il est temps de crer sa premire pagemenu fichier item nouvelle page
-
8/8/2019 Creation Site
14/20
Crer un site internet
Une fentre survient o lon dite notre page comme avec untraitement de texte Pour la mise en forme on utilise la palette de mise en forme vue plus haut
On peut insrer des objets images ou tableaux avec la palette objets vue plus haut
Il est temps denregistrer notre fichier On veillera lenregistrer dans le dossier que nous avons dfini comme tantnotre site dans la zone de dfinition du site cf supra On veillera respecter les consignes de nommage : extension htm ou html prisen charge par le logiciel Pas despace pas daccents pas de signesde ponctuation dans le nom Par prcaution utiliser exclusivementles lettres minuscules Sil sagit de la page dentre de notre site ilest recommand de lappeler indexhtm car elle sera lancedirectement si on rentre sur le site sans prciser le nom de la pagedemande
On vrifiera dans la fentre site que notre page estenregistre au bon endroit
Insrer des images
Avant dinsrer une image dans la page indexhtm il faut lescollecter et les sauvegarder dans un emplacement dtermin Onmnagera un dossier spcifique dans le site fentre site boutondroit de la souris nouveau dossier on le renomme image parexemple On enregistre les images dans ce dossier Ce nest qualorsque lon intgrera les images sur la page
-
8/8/2019 Creation Site
15/20
Crer un site internet
Crer une autre page
Pour vrifier notre nouvelle comptence nous allons crer unenouvelle page et lenregistrer sur notre site sous le nom de pagehtm par exemple
Etablir des liens
Nous pouvons maintenant tablir un lien interne de lindex lapage : sur la page indexhtm on crit : Passer la page Onsurligne cette phrase Dans la palette proprits on tire un fil dela zone lien au nom du fichier cible pagehtm dans la fentre site
-
8/8/2019 Creation Site
16/20
Crer un site internet
Publier le siteOn supposera maintenant que nous avons cr un dossier qui
contient tous les fichiers de notre site
Pour le tester nous lavons ouvert en local avec notrenavigateur et avons vrifi que tous les liens sont actifs
Si nous le pouvons nous avons vrifi avec plusieursnavigateurs et plusieurs configurations dcran pour viter lesdisfonctionnements les plus flagrants
Le transfert des pages du site par FTPTransfrer des donnes sur son site Utiliser un logiciel de ftp
exemple de ws_ftpCertains logiciels comme dreamweaver prennent en charge le
transfert et sa gestion ne transfrer que les fichiers qui ont tmodifis
Informations retenir :
Lurl du site ftp (sur free, ftpperso.free.fr)
Mon Login
Mon mot de passe.
Bien veiller conserver prcieusement toutes les infostransmises par lhbergeur et en particulier les mots de passe
Savoir utiliser les FAQ de lhbergeur car laide tlphoniqueest factureEn guise dexemple voici quelques copies dcran de laspect
que peut avoir WS_FTP Lite la version universitaire gratuite deWS_FTP :
Au lancement on renseigne les donnes de connexion :
-
8/8/2019 Creation Site
17/20
Crer un site internet
On cre un nouveau profil auquel on donne un nom, on indique un
serveur (ici, celui de free), un login, et un mot de passe :
Si la connexion russit, on obtient ceci :
-
8/8/2019 Creation Site
18/20
Crer un site internet
A gauche lespace local ici le dossier site du dossier patrick dudossier public du dossier Mes documents sur le disque C : droitelespace distant mon site sur le serveur free accessible par :
http:tpebourdellefreefr
Maintenance du site
Faire vivre son siteMettre linformation jour
Rpondre aux messages Aussitt que possible Une rponseimmdiate cest un contact assur
Faire connatre son site: lindexation sur les moteurs derecherche.
Comment fonctionne un moteur de rechercheLes piges viter !Comment fonctionne GoogleQuelques astuces pour donner de la visibilit mon site
Le cas dun site SPIP
Dans le cas dun site SPIP aprs la phase dinstallation de SPIPil ny a plus discontinuit entre la cration de linformation et sapublication La publication nest que la phase terminale de la crationde linformation
Installer SPIP
On tlcharge SPIP sur wwwspipnetOn copie ensuite le dossier tlcharg sur lespace
dhbergementOn peut aussi procder une installation automatique sur :
http:wwwspipnetspipdevINSTALL On na tlcharger sur le
-
8/8/2019 Creation Site
19/20
Crer un site internet
site distant que le script dinstallation qui se chargera luimme deprocder au chargement de tous les fichiers
Avant de continuer il faut veiller prendre garde de disposerdune base de donnes MySql chez son hbergeur et de senqurir deson URL et des mots de passe autorisant laccs
Pour le rectorat contacter la cellule informatique pour freeactiver la base sur : http:supportfreefrweb
Pour ce faire il faut connatre son login et son mot de passe Labase est active dans un dlai qui ne dpasse pas quelques heures
Administrer SPIP
Supposons que lon ait install SPIP au toplevel dewwwmonsitecom
La premire fois que jaccderai cette adresse un formulairedinstallation me permettra de paramtrer SPIP Jindiquerai enparticulier lURL de la base MySql le login daccs et le mot de passe
le lmogin de ladministrateur et son mot de passeEnsuite jaccderai la page de base de la porte simple clientde SPIP
Pour le moment SPIP est vide Il faut donc commencer parl administrer Soit en cliquant sur le bouton espace priv danslinterface client soit en accdant directement cet espace par :wwwmonsitecomecrire
Configurer lenvironnement SPIP
La premire chose faire sera de configurer monenvironnement SPIP le nom du site les droits dont je veux user telsque lactivation ou non des fora et leur visibilit
Grer les auteurs
Si je veux autoriser plusieurs personnes intervenir sur monsite je dois crer les identifiants correspondants Pour chaquerdacteur je choisis un login unique un mot de passe et garnis desinformations de scuritnom courriel Je peux aussi confrer certains auteurs des droits dadministrateur
Seul ladministrateur peut crer des auteurs et valider lapublication en ligne des contributions
On peut imaginer que dans un lyce le professeur de lettressoit aussi administrateur et quil se charge implicitement de grer lesautorisations de publications de ses lves quil a autoris comme
auteursUn auteur peut accder lespace de cration intervenir sur leforum priv mais pas publier vers lextrieur La publication nestrelle quaprs autorisation dun administrateur
Ladministrateur peut aussi supprimer laccs un auteur
Grer larchitecture de publication
Une publication SPIP se structure en rubriques et sousrubriques Cest ladministrateur qui les cre Une rubrique est unestructure smantique
Dans une rubrique on peut crer :
-
8/8/2019 Creation Site
20/20
Crer un site internet
Des articles
Leur taille peut tre consquente Ils ont un titre et peuvent enoutre disposer dun surtitre dun soustitre dun rsum de motsclefs
Des brvesComme leur nom lindique Elle ne disposent que dun titre ;
Crer un article
Lorsquun rdacteur accde lespace de publication il peutcrire une brve o un article
Pour le rdiger il utilise un formulaire Il peut bnficier dequelques lments de mise en page puces soulignements graisseitalique mais loutil ddition reste peu ergonomique Lobjectif estdabord le contenu !
Larticle est visible de tous les auteurs du site qui peuvent le
critiquer par un systme de forum Mais il ne sera visible delextrieur quaprs autorisation de ladministrateur
Personnaliser SPIP
Voil qui est plus difficile On demandera laide duninformaticien qui connaisse les feuilles de style CSS Pour changer lelook il suffit de modifier et enrichir une feuille de style CSS etdcrire pages modles partir des squelettes fournisrubriquephp articlephp brevephp forumphp resumephpplanphp recherchephp
On pourra se rfrer la documentation publie sur le site SPIP
TP
Pour sentraner on utilisera une zone internet :tpebourdellefreefr
Login : tpebourdelleMot de passe : atout