Création et utilisation d`un site, exemple via le CMS Joomla!

Enseignement Informatique
Classe de BTS DATR 1
----------------------------------------------------------------------Savoir communiquer avec les TIC
& Être capable de s'adapter aux évolutions des TIC.
----------------------------------------------------------------------Partie 1: Savoir communiquer avec les TIC:
Création et utilisation d'un site, exemple via le CMS Joomla!
Présenté par BELMOKHE Hocine, enseignant Informatique, LPA Erstein, Année 2012/2013
Version 1.0, Octobre 2012
Table des Matières
1. Introduction
2. Définition Site Internet
3. Pourquoi Un Site Internet
4. Stratégie & Budget Site
5. Solutions Disponibles
6. Pages En HTML
7. Pages En HTML (Manip)
8. CMS
9. Démonstration
Introduction
✔
✔
✔
Nous allons voir dans ce cours l'un des moyens les plus utilisés de nos jours afin de
communiquer, de promouvoir, de vendre, etc... Le site internet;
Nous définierons d'abord ce qu'est un site internet, puis nous créerons une page très
simple en HTML afin que vous vous rendiez compte de la complexité de concevoir un
site complet puis nous terminerons cette première partie sur ce qu'est un CMS via
l'exemple de Joomla!
Remarques: N'oubliez pas de sauvegarder vos travaux sur votre compte en créant un
dossier en date du jour et en y insérant vos exemples en les nommant clairement afin
d'être retrouvés facilement. Et sauvegardez régulièrement vos travaux!!!!!
Définition Site Internet 1/3
✔
✔
Définition: Un site internet est composé d'un ensemble de documents structurés,
nommés pages web, stockés (hébergés) sur un ordinateur (serveur) connecté au réseau
mondial (internet);
Une page web contient essentiellement du texte, et est souvent enrichie d'images, de
sons, de vidéos et de liens vers d'autres pages web.
✔
✔
✔
✔
✔
Définition Site Internet 2/3
À quoi sert un site internet? Le monde évolue. Dans la vie quotidienne, internet est
devenu aussi indispensable que la télévision, le téléphone, le réfrigérateur, etc. Lorsque
vous arrivez sur un site web, il vous est possible de trouver les réponses à vos
questions, partager, communiquer, s'amuser, acheter, etc.
L'ère numérique implique l'accès à l'information en direct, répondant au besoin du tout et
tout de suite. Une page web contient des informations, généralement pour informer ou
faire connaître;
Dans le cadre d'une utilisation privée, une page web permet par exemple de
communiquer et de partager des ressources telles que des photos, des vidéos, des
messages, etc. Pour accéder à ces ressources, il suffit d'être connecté sur internet,
n'importe où dans le monde;
Les entreprises, quant à elles, auront tendance à vouloir développer leurs images et
notoriétés, et utiliser leurs sites web comme support de diffusion d'information et de
publicité: cela consiste à présenter l'entreprise, son activité et ses produits. C'est le
meilleur rapport qualité/prix par excellence pour être visible par l’ensemble de la planète;
L'intérêt d'un site web est de pouvoir être vu par tout le monde. Son potentiel, quel que
soit l'usage qu'on en fait, est illimité. Pour votre entreprise, un site web, c'est faire du
marketing ciblé à moindre coût, mettre en avant votre image et affirmer votre présence
sur le réseau internet. C'est surtout une façon de démontrer votre capacité d'ouverture et
d'évolution: les possibilités sont illimitées en terme de différenciation, de marketing et de
séduction des visiteurs.
Définition Site Internet 3/3
✔
✔
✔
Que trouve-t-on sur le web? Naviguer sur le web, c'est comme se promener dans une
jungle infinie. On n'en voit jamais le bout tellement il y a de sites web, et on y trouve
absolument de tout!
N'importe qui peut publier de l'information sur le web. Il existe des sites web personnels,
des sites web d'entreprises, et même des sites web gouvernementaux. Selon le rapport
de septembre 2012 de Netcraft, il existe près de 621 millions de sites web accessibles
gratuitement à travers le monde, et ce chiffre ne cesse de croître;
Pour trouver une information dans l'immensité du web, il suffit d'utiliser un moteur de
recherche, un annuaire, un portail ou tout service qui référence des sites web.
Pourquoi Un Site Internet 1/4
✔
✔
✔
✔
Un site web pour être visible: Avoir un site web pour répondre à l'effet de mode, c'est
dépenser de l'argent sans vraiment connaître les raisons de cette dépense;
Dans le monde des affaires et du commerce, si votre entreprise est absente du web,
vous vous privez d'une part de marché non négligeable au bonheur de vos concurrents.
De plus, les internautes qui vous cherchent, ne vous trouvant pas, auront un sentiment
de frustration et d'avoir perdu leur temps. Vous risquez de perdre un client potentiel, et
n'inspirez pas l'image d'une entreprise ouverte et moderne;
Il vaut mieux avoir un site web, même modeste, afin de renseigner les internautes et les
inviter à vous contacter, que d'être totalement absent du web;
Un site web va au-delà de la mode, votre visibilité sur le web est une nécessité pour votre
entreprise, pour son image, son développement et sa rentabilité.
Pourquoi Un Site Internet 2/4
✔
✔
✔
Communiquer, faire connaître, et vendre: Pour une entreprise, c'est une priorité d'avoir
des clients;
À travers votre site web, vous valorisez votre entreprise en informant vos visiteurs. Cela
consiste à présenter votre entreprise et vos activités et autres services, promouvoir votre
savoir-faire et vos qualités, mettre en avant les promotions et les nouveautés, etc.
Votre site web reflète votre entreprise. Le contenu est adapté à la cible marketing, la
vitrine est soignée et séduit les visiteurs. À ce stade, votre site web répond aux besoins
de votre entreprise, en terme d'image, de communication et de rentabilité, etc.
Pourquoi Un Site Internet 3/4
✔
✔
✔
Retour sur investissement rapide: Internet est un média qui permet de diffuser des
informations à faible coût. C'est surtout un moyen de faire de la publicité ciblée et
d'accroître votre clientèle;
Même si au départ l'investissement dans la création d'un site web est souvent non
négligeable, votre site web sera votre plus belle vitrine pour exposer vos offres de
services et vos produits, également le meilleur vecteur pour vous faire connaître et
séduire vos futurs clients;
Votre site web, à lui seul, peut rassembler les 5 autres médias:
✔
✔
✔
✔
✔
la presse: le contenu de votre site s'apparente déjà à une presse professionnelle
appliquant des techniques d'écriture journalistiques;
la radio: sur vos pages web, vous pouvez permettre à vos visiteurs de télécharger ou
d'écouter en direct son contenu. Les personnes mal-voyantes apprécieront, ainsi que
celles faisant plusieurs choses en même temps;
la télévision: créez des montages vidéos commentés pour présenter vos produits,
proposer une visite guidée, faire une démonstration, etc. et surtout faire de la publicité
avec du son et des images;
l'affichage: les panneaux muraux ou en chevalets sur les trottoirs, font partie du
paysage naturel de la vie citadine. Sur le web, cela correspond aux bannières
publicitaires et aux liens commerciaux;
le cinéma: vous pouvez faire des vidéos comme les publicités à la télévision, puis les
déposées sur les sites web spécialisés ou sites web de partage de vidéos.
Pourquoi Un Site Internet 4/4
✔
Un site web, c'est un point de contact sur internet accessible 24h/24 et 7j/7, et apporte
tous les avantages pour trouver de nouveaux clients rapidement. il ne vous reste plus
qu'à définir une stratégie commerciale ou de communication, puis attribuer un budget
pour sa réalisation.
Stratégie & Budget Site 1/4
✔
Stratégie commerciale ou de communication: Votre priorité est de trouver le maximum de
clients. Pour cela, il vous faut communiquer et séduire. Voici quelques éléments de
réflexion à exploiter à travers votre site web:
✔
✔
✔
✔
✔
✔
✔
✔
✔
✔
Votre site web est disponible 24h/24 et 7j/7 et accessible par une vaste clientèle
potentielle;
Informer des changements, promotions, nouveautés: activité, services, produits, etc.;
Votre site web est un espace de marketing ciblé et de publicité, comme pour le cas
d'un magazine ou journal;
Avoir plus d'arguments que vos concurrents pour être présent sur le web: les devancer
et gagner des parts de marché;
Un site web adapté et destiné à vos visiteurs: ils apprécieront et vous serez plus
crédible;
Les applications sur internet sont rapides, efficaces et de moins en moins coûteuses:
e-mailing, e-commerce, newsletter, etc.;
L'entreprise est présente sur le réseau mondial: plus de frontières et de limites
géographiques;
Service client amélioré: FAQ, conseils, pratiques, liens utiles. C'est moins de
sollicitation de la part des visiteurs;
Étude des visiteurs et des besoins par les sondages, statistiques de fréquentation,
commentaires, etc (Référencement, outil Google Analytics, etc.).
Dans un premier temps, adaptez votre site à votre stratégie, puis faîtes confiance à votre
imagination pour le faire évoluer et vous différencier.
Stratégie & Budget Site 2/4
✔
✔
Définition du cahier des charges et du budget: Vous savez ce que vous voulez faire avec
votre site web, pour cela vous avez (devez) rédigé un cahier des charges qui détermine
tous vos besoins, les spécifications techniques, la qualité du site, les contraintes, la
maintenance, le délai de réalisation, etc. sans oublier le budget. Un cahier des charges
est avant tout un travail de réflexion répondant à tous vos besoins fonctionnels et
techniques;
Cahier des charges: Sans rentrer dans le détail concernant la réalisation d'un cahier des
charges, commencez par les grandes lignes directrices les plus importantes, pour ensuite
les détailler et les finaliser petit à petit:
✔ Déterminer le nombre de pages: page d'accueil (vitrine), présentation de l'entreprise,
présentation des activités, services ou produits, formulaire de contact, etc.;
✔ Votre site web en plusieurs langues? Français, anglais, allemand, etc. Si le public visé
n'est pas internationnal, il ne sera pas utile de prévoir d'autres langues autre que celle
du pays d'origine;
✔ La charte graphique: il est logique que votre site web soit au couleur de votre logo,
mais il n'y a pas de règle. Les pages web claires, légères et simples seront appréciées
par vos visiteurs et par les moteurs de recherches (temps de chargement de la page);
✔ La maintenance de votre site web: modifier ou mettre à jour un contenu régulièrement,
ajouter de nouvelles pages web, ajouter de nouvelles fonctionnalités (ex: sondage,
newsletter, etc.), modifier la charte graphique, etc.;
✔ Le délai de réalisation de votre site web: prévoir un délai réaliste et une marge de
sécurité, car plus la réalisation est complexe et longue, et plus le risque de dépasser
le délai est grand.
Stratégie & Budget Site 3/4
✔
✔
✔
✔
Budget: Le budget estimé attribué à la création de votre site web doit être réaliste par
rapport à vos exigences. Pour connaître le budget final, prévoyez un autre cahier des
charges réduit au strict minimum. Ensuite, demandez à plusieurs agences web un devis
détaillé pour le cahier des charges réduit, et un autre pour le cahier des charges complet.
Vous aurez ainsi une idée du prix minimum et du prix maximum du coût de réalisation de
votre site web, ce qui vous permettra de réajuster les besoins (ajout ou suppression de
fonctionnalités) pour ne pas dépasser votre budget;
Si un devis répond favorablement à tous vos besoins, n'oubliez pas de prendre
connaissance des conditions de vente. Posez toutes les questions nécessaires sur le
contrat et les conditions (l'avant projet, pendant le projet et l'après projet) avant de vous
engagez. Après acceptation des conditions, vous pouvez déclencher le processus de
réalisation de votre site web;
Si les devis ne correspondent pas à vos attentes, ou si vous n'arrivez pas à trouver
l'agence web idéale, reconsidérez vos besoins à court terme: quelles sont réellement vos
priorités, trop de fonctionnalités d'un seul coup, budget insuffisant, demande trop
complexe, etc.?
Quel que soit votre budget, même modeste, vous trouverez toujours une solution (cette
dernière demandera plus ou moins d'investissements de votre part).
Stratégie & Budget Site 4/4
✔
✔
✔
✔
La solution adaptée à vos besoins: L'objectif principale pour une petite structure est d'être
présent sur internet, sans dépense inutile;
Il vaut mieux faire une bonne entrée sur le web avec un site web modeste (3 pages:
présentation de l'entreprise, services ou produits, formulaire de contact), étudier les
besoins des visiteurs, ajouter de nouvelles pages web en conséquence, et développer le
site web petit à petit que d'avoir un site web complet, puis de se rendre compte que la
moitié des pages web et des fonctionnalités sont inutiles ou inadaptées aux visiteurs.
Résultats: perte de temps et d'argents;
Un site web, c'est comme une entreprise, il a besoin de naître dans de bonnes
conditions, prendre un bon départ, et de temps pour se développer. Ne gaspillez pas
trop d'argents inutilement à vouloir aller trop vite, laissez du temps aux fondations de se
stabiliser avant de passer à l'étape suivante;
Tout budget a sa solution. Ne dépensez que ce dont vous avez besoin réellement à court
terme, surtout si c'est votre premier site web pour présenter votre entreprise ou vos
services.
Solutions Disponibles 1/1
Ci-dessous les solutions les plus répandues pour de petites et moyennes structures:
✔ La solution minimale: idéale pour commencer sa visibilité internet. Les pages de type
HTML peuvent être créées via un simple éditeur de texte. C'est la solution à moindre coût
pour vous faire connaître. Vos clients potentiels pourront consulter votre site web 24h/24,
7j/7 et à tout moment de l'année, puis s'ils le souhaitent, vous contacter (page d'accueil,
horaires d'ouvertures, adresses, page de contact);
✔
✔
✔
✔
✔
La solution vitrine: cette solution bénéficie de tous les avantages de la solution
précédente. Elle permet en plus de présenter vos offres de services ou vos produits, puis
de connaître les services ou les produits les plus populaires grâce aux statistiques de
fréquentation;
La solution Blog: un site web personnel ou professionnel pour publier vos articles et créer
du contenu sans connaissance technique? Alors le blog est fait pour vous. Communiquer,
échanger et partager vos passions avec vos lecteurs;
La solution CMS: des solutions Open Source existent afin de vous permettre de créer
vous-même votre site web de A à Z, sans connaissance technique (ou très peu): définir
l'arborescence, la navigation, publier du contenu avec texte, image, son et vidéo.
Devenez tout simplement l'administrateur de votre propre site web;
La solution e-commerce: vendre sur internet avec un logiciel de gestion de sites ecommerce (peut être inclus dans la solution CMS).
Pages En HTML 1/2
✔
Définition: L’Hypertext Markup Language, généralement abrégé HTML, est le format de
données conçu pour représenter les pages web. C’est un langage de balisage qui permet
d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer
sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources
multimédias dont des images, des formulaires de saisie, et des éléments programmables
tels que des applets. Il permet de créer des documents interopérables avec des
équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il
est souvent utilisé conjointement avec des langages de programmation (JavaScript) et
des formats de présentation (feuilles de style). HTML est initialement dérivé du Standard
Generalized Markup Language (SGML);
Pages En HTML 2/2
✔
Exemple d'une page HTML (en rouge les balises obligatoires):
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Hello World en HTML 5</title>
</head>
<body>
<header>
<center>
<h1>Introduction au HTML 5, LPA Erstein, BTS DATR 1</h1>
</center>
<nav>
<ul>
<li><a href="http://erstein.info.free.fr">erstein.info.free.fr</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h1>Hello World!</h1>
<p>Ceci est un hello world! en HTML 5.</p>
<aside>
<p><strong>Auteur :</strong> H. BELMOKHE</p>
</aside>
</article>
</section>
<footer>
<p>Tous droits réservés - erstein.info.free.fr</p>
</footer>
</body>
</html>
Pages En HTML (Manip) 1/1
✔
Créez une page HTML en vous aidant des liens ci-dessous (liste non exhaustive des
balises existantes). Pour ce faire, créez un fichier texte via le bloc note ou Wordpad, puis
une fois le code inséré, modifiez l'extension du fichier „.txt“ en „.html“.:
✔
✔
✔
✔
http://www.siteduzero.com/tutoriel-3-13661-memento-des-balises-html.html
http://www.codeshttp.com/baliseh.htm
http://www.vectorskin.com/referentiels-standards-w3c/balises-html5/#ul
Créez un dossier que vous nommerez „Page HTML“ et insérez-y le ou les fichiers HTML
que vous aurez conçu ainsi que les images que vous souhaiteriez inclure. L'intérêt de ce
petit exercice est de vous montrer la quantité de code à écrire afin de créé de simples
pages. Pour vous en rendre compte, cliquez bouton droit sur une page d'un site en HTML
(pour en trouver facilement, utilisez le filtre „filetype:htm“ dans Google) et sélectionnez
„Afficher le code source de la page“ sous Google Chrome (vous trouverez facilement
l'équivalent sur d'autres navigateur web);
CMS 1/2
✔
Définition: CMS signifie Content Management System (Système de Gestion de
Contenu en français ou SGC). C'est un outil permettant, dans le monde du web, à des
non-initiés de se créer un site web quasiment sans aucune connaissance technique et de
pouvoir simplement le mettre à jour. Par exemple, le site erstein.info.free.fr utilise le CMS
Joomla! en version 1.5;
CMS 2/2
✔
✔
Comment choisir un CMS: Il existe une multitude de CMS sur Internet, la majorité étant
Open Source (c'est-à-dire la possibilité de libre redistribution, d'accès au code source et
aux travaux dérivés). Certains sont plus orientés blog, d'autres plus e-commerce, etc. Le
choix est difficile et il n'y a pas de de méthodes fiables à 100% vous indiquant qu'il vaut
mieux utiliser tels ou tels CMS. J'utilise personnellement Joomla! pour trois raisons: sa
simplicité, sa communauté et ses nombreuses fonctionnalités (pour la plupart gratuites)
que l'on peut ajouter afin de personnaliser aux mieux son site. De plus, il est totalement
gratuit;
Dans la partie suivante, je vous ferai une démonstration afin de vous montrer la
puissance et les possibilités offertes par l'outil.
Démonstration 1/1
✔
J'ai créé et hébergé chez Free (gratuitement) deux sites, bts.datr.free.fr (groupe 1) et
bts.datr1.free.fr (groupe 2): Je vais vous faire la démonstration de l'administration d'un
site sous Joomla!, n'hésitez pas à me poser toutes les questions que vous pourriez avoir,
on essaiera à la rentrée de vous installer Joomla! en local sur vos postes afin que vous
puissiez pratiquer individuellement.