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 e- commerce (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.