Speed-meeting technique Créer un site internet / un blog M. ANDRE Pier Animateur Espace Cyber-Base Brassac sur Agout (Tarn...
Plan de l’intervention  : <ul><li>1) Un site… Pour qui ? Pourquoi ? Les évolutions. </li></ul><ul><li>2) Les différentes t...
1) Un site. Pour qui ? Pourquoi ? Evolutions. <ul><li>Introduction. </li></ul><ul><ul><li>Cet exposé ne traitera pas de l’...
<ul><li>Un peu de vocabulaire. </li></ul><ul><li>Aujourd’hui on entend beaucoup de termes désignant souvent la même chose....
<ul><li>Comment se lancer ? </li></ul><ul><li>Avant de commencer un quelconque travail sur l’ordinateur, il est vivement c...
2) Techniques et outils. <ul><li>Un site « traditionnel » et ses limites. </li></ul><ul><li>De quoi a-t-on nécessairement ...
<ul><ul><li>Le logiciel Kompozer. </li></ul></ul><ul><ul><li>Anciennement NVU (prononcer « nviou ») ce logiciel libre est ...
<ul><li>Le CMS et ses limites. </li></ul><ul><li>Comment déployer facilement et efficacement un blog ou un site internet s...
<ul><ul><li>Prenons le cas de Dotclear. </li></ul></ul><ul><ul><li>Cet outil est à télécharger à partir d’internet. Il fau...
<ul><ul><li>Attention cette opération demande quand même quelques connaissances notamment au niveau du renseignement conce...
<ul><ul><li>Prenons le cas de Spip. </li></ul></ul><ul><ul><li>Plus difficile à appréhender que le précédent système de pu...
<ul><ul><li>Ce système de publication est géré de manière assez complexe par un ensemble de ‘boucles’ (une sorte de langag...
<ul><li>Les outils issus du Web 2.0. </li></ul><ul><li>Depuis plusieurs mois le Web 2.0 a fait son apparition. Il met à di...
<ul><ul><li>Prenons le cas de Jimdo. </li></ul></ul><ul><ul><li>Lancé en 2007 Jimdo réunit en une interface les 3 éléments...
<ul><ul><li>Cependant une  version payante  (60 euros / an) existe, elle permet de s’affranchir du logo « jimdo » présent ...
3) Et si l’on bloggait ? <ul><li>Prenons le cas de Blogger. </li></ul><ul><li>Proposé par le géant google, blogger est une...
<ul><li>Prenons le cas d’Over-blog. </li></ul><ul><li>Cet outil reste l’un des meilleurs du genre. Facile à administrer, e...
4) Enrichir ses sites et blogs avec des objets. <ul><li>Calaméo </li></ul><ul><li>http://fr.calameo.com </li></ul><ul><li>...
<ul><li>Youtube </li></ul><ul><li>http://fr.youtube.com   </li></ul><ul><li>Il n’est plus nécessaire de présenter ce porta...
<ul><li>Slideshare </li></ul><ul><li>http://www.slideshare.net   </li></ul><ul><li>Un outil très puissant pour rendre des ...
<ul><li>Picasa </li></ul><ul><li>http://picasaweb.google.com   </li></ul><ul><li>Cet outil lié au logiciel du même nom per...
5) Comment faire évoluer son site pour aller plus loin ? <ul><li>Un site, même s’il est bien conçu dés le départ, ne deman...
<ul><li>La première idée. </li></ul><ul><li>Il est déjà possible de  passer d’une plateforme technique à une autre .  </li...
<ul><li>La seconde idée. </li></ul><ul><li>L’utilisateur va vouloir utiliser les services détaillés  dans le point 4, c'es...
<ul><li>La troisième idée. </li></ul><ul><li>Il serait judicieux de proposer à l’utilisateur aguerri des  outils de survei...
6) Annexes <ul><li>Onglet Partage du portail cybanim (cyber-base). </li></ul><ul><li>Ateliers transversaux. </li></ul><ul>...
<ul><li>Hébergeurs. </li></ul><ul><ul><li>Pages mises à disposition de son FAI. </li></ul></ul><ul><ul><li>Pages perso de ...
Prochain SlideShare
Chargement dans…5
×

Création de blog et sites internet

1 435 vues

Publié le

Support utilisé lors des rencontres cyber-bases 2009 à Paris.
Pier ANDRE.
Espace cyber-base de la Marquise.
Brassac, 81.

Publié dans : Formation, Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 435
Sur SlideShare
0
Issues des intégrations
0
Intégrations
10
Actions
Partages
0
Téléchargements
43
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Création de blog et sites internet

  1. 1. Speed-meeting technique Créer un site internet / un blog M. ANDRE Pier Animateur Espace Cyber-Base Brassac sur Agout (Tarn) Mél : apier@cyber-base.org
  2. 2. Plan de l’intervention  : <ul><li>1) Un site… Pour qui ? Pourquoi ? Les évolutions. </li></ul><ul><li>2) Les différentes techniques, les différents outils. </li></ul><ul><li>3) Et si l’on bloggait ?! </li></ul><ul><li>4) Enrichir ses sites et blogs avec des objets. </li></ul><ul><li>5) Comment faire évoluer son site pour aller plus loin. </li></ul><ul><li>6) Annexes. </li></ul><ul><li>Problématique  : comment aborder le thème de la création de sites internet / de blog dans son espace cyber-base ? Quelles sont les contraintes techniques ? A quel public s’adresser et avec quels outils ? </li></ul>
  3. 3. 1) Un site. Pour qui ? Pourquoi ? Evolutions. <ul><li>Introduction. </li></ul><ul><ul><li>Cet exposé ne traitera pas de l’élaboration du site internet / du blog de votre espace cyber-base. Il existe pour cela le mini-site qu’il est possible de « personnaliser ». Remarque sur les flux RSS (ateliers et actualités) qu’il est possible de « capter ». </li></ul></ul><ul><li>A qui s’adresse-ton ? </li></ul><ul><ul><li>Nous verrons 3 façons d’aborder la création de site internet. Pour chacune d’entre elles il existe des avantages et des inconvénients. Avant de commencer un atelier de création de site internet / blog il faut à tout prix cerner le public et sa demande pour l’orienter de la meilleure façon. </li></ul></ul>
  4. 4. <ul><li>Un peu de vocabulaire. </li></ul><ul><li>Aujourd’hui on entend beaucoup de termes désignant souvent la même chose. D’autre part certains amalgames peuvent être faits en ce qui concerne notamment les blogs. </li></ul><ul><ul><li>Qu’est-ce qu’un blog ? </li></ul></ul><ul><ul><li>Il s’agit d’un site dynamique. Cela veut dire à la fois administrable de n’importe quel endroit de la planète pourvu qu’on ait internet, d’autre part cela indique également que le visiteur peut interagir avec l’information présentée sous forme d’articles. Enfin ces articles sont classés de manière chronologique, la page d’accueil ne proposant que les 5, 10 ou 20 publications. </li></ul></ul><ul><ul><li>Qu’est-ce qu’un CMS (Content Manager System) ? </li></ul></ul><ul><ul><ul><li>Ces termes anglais désignent un système permettant la gestion de données. </li></ul></ul></ul><ul><ul><ul><li>Aujourd’hui ces outils sont largement utilisés par les médias s’affichant sur </li></ul></ul></ul><ul><ul><ul><li>Internet. Faciles à installer, à paramétrer et « libres » ils fonctionnent avec une </li></ul></ul></ul><ul><ul><ul><li>partie « cachée » (backoffice) accessible avec un identifiant et un mot de </li></ul></ul></ul><ul><ul><ul><li>passe et une partie publique. </li></ul></ul></ul>
  5. 5. <ul><li>Comment se lancer ? </li></ul><ul><li>Avant de commencer un quelconque travail sur l’ordinateur, il est vivement conseillé de produire une réflexion par écrit. Chaque feuille de papier devient ainsi une page du futur site. Ainsi il est plus facile de penser une navigation, d’anticiper une information indispensable… </li></ul><ul><li>Selon la nature du site, un tour sur Internet web n’est pas à négliger. En effet il peut être bénéfique de s’armer d’un peu de patience et de lister les points négatifs et les points positifs d’un site ayant le même thème. . Ce que je trouve bien en terme de navigation, de charte graphique. </li></ul><ul><li>. Ce que je veux éviter à tout prix. . Synthétiser les rubriques qui reviennent souvent. </li></ul>
  6. 6. 2) Techniques et outils. <ul><li>Un site « traditionnel » et ses limites. </li></ul><ul><li>De quoi a-t-on nécessairement besoin dés lors que l’on veut créer un site internet ou un blog ? </li></ul><ul><li>Une adresse / une url : qui va pointer sur le site. </li></ul><ul><li>Un hébergeur – un serveur : ce qui va permettre d’accéder au site 24h/24 et 7j/7. </li></ul><ul><li>Un logiciel d’édition de site : pour créer les pages. </li></ul><ul><li>Ces trois notions essentielles ne me semblent pas être accessibles aux débutants. De plus cela suppose un investissement personnel important de la part de l’utilisateur. Il va devoir, en effet, trouver un fournisseur de domaine (pour l’adresse) mais aussi un hébergeur. </li></ul><ul><li>De plus le langage utilisé pour la création de sites internet s’articule autour de l’HTML et du CSS. Dans le cas d’un site dynamique il faudra en plus connaître le PHP et les bases de la manipulation de bases de données par exemple MySql. </li></ul>
  7. 7. <ul><ul><li>Le logiciel Kompozer. </li></ul></ul><ul><ul><li>Anciennement NVU (prononcer « nviou ») ce logiciel libre est largement suffisant dans l’apprentissage du langage HTML. Il permet de visionner le code et d’avoir un aperçu de la page en cours de réalisation. </li></ul></ul><ul><ul><li>C’est l’outil idéal pour travailler sur la structure du site, son organisation et le langage propre aux développement de sites internet. </li></ul></ul><ul><ul><li>Aujourd’hui de nombreux outils permettent de créer plus aisément des pages web. La facilité, le rendu final en sont les principales qualités. De plus une interface masquée par un mot de passe permet de mettre à jour sa création dés lors que l’on a accès à internet. </li></ul></ul><ul><ul><li>. </li></ul></ul>
  8. 8. <ul><li>Le CMS et ses limites. </li></ul><ul><li>Comment déployer facilement et efficacement un blog ou un site internet sans la contrainte de l’apprentissage d’un langage dédié ? </li></ul><ul><li>De nombreux outils permettant de déployer un site complet en quelques clics existent. Avant de les détailler il est nécessaire de posséder un hébergement. Une offre gratuite peut suffire (par exemple free) mais un hébergement payant (de l’ordre d’une trentaine d’euros par an) s’avèrera bien plus utile (absence de publicité, prise en compte de différentes versions des langages …). </li></ul><ul><li>Je m’appuierai sur deux CMS que j’ai l’habitude d’utiliser Spip et Dotclear . Plusieurs ressources vous seront proposées ultérieurement sur le portail cyber-base (onglet Partage). </li></ul>
  9. 9. <ul><ul><li>Prenons le cas de Dotclear. </li></ul></ul><ul><ul><li>Cet outil est à télécharger à partir d’internet. Il faut dézipper le fichier obtenu. Nous obtenons alors un dossier contenant une multitude de fichiers. </li></ul></ul><ul><ul><li>Grâce à un logiciel FTP, il faut envoyer cet ensemble de fichiers sur le compte de l’hébergement choisi. </li></ul></ul><ul><ul><li>A ce moment là une procédure, généralement détaillée sur le site dédié à l’outil, permet de finir d’installer le CMS qui devient opérationnel. </li></ul></ul><ul><ul><li>. </li></ul></ul>
  10. 10. <ul><ul><li>Attention cette opération demande quand même quelques connaissances notamment au niveau du renseignement concernant la base de données. </li></ul></ul><ul><ul><li>Une fois la procédure finie, le site devient accessible par un identifiant et un mot de passe. A partir de ce moment il est demandé un certain nombre de renseignements (nom du site, adresse, mél, description…) et le choix d’un thème. </li></ul></ul><ul><ul><li>Le blog devient alors accessible en entrant l’adresse fourni par l’hébergement. </li></ul></ul><ul><ul><li>Son mode de fonctionnement est simple : chaque article rédigé (et publié) est géré de manière chronologique. Les plus récents remplaçant les plus anciens. </li></ul></ul><ul><ul><li>Il est toutefois possible de lui adjoindre des pages fixes qui ne bougeront donc pas au fur et à mesure des publications. Très pratique pour indiquer une page sommaire, une page de contact… </li></ul></ul><ul><ul><li>Pour l’ensemble des articles il est possible de mettre en forme le texte, de rajouter des images, de rendre le contenu attractif. </li></ul></ul><ul><ul><li>. </li></ul></ul><ul><ul><li>. </li></ul></ul>
  11. 11. <ul><ul><li>Prenons le cas de Spip. </li></ul></ul><ul><ul><li>Plus difficile à appréhender que le précédent système de publication, cet outil est également à récupérer sur internet. Sa procédure d’installation et de déploiement est sensiblement la même que Dotclear, je ne m’étendrai donc pas. </li></ul></ul><ul><ul><li>En revanche la publication des articles est gérée différemment. Elle n’est plus forcément chronologique. Elle peut être thématique, gestion de rubriques et de sous-rubriques. Mais elle peut revêtir aussi un caractère chronologique si on laisse la date de publication des articles. </li></ul></ul>
  12. 12. <ul><ul><li>Ce système de publication est géré de manière assez complexe par un ensemble de ‘boucles’ (une sorte de langage propre à Spip) qui identifie des processus à réaliser. Exemple : lister les 10 derniers articles en page d’accueil, ou bien n’afficher que les 5 articles de telle rubrique… </li></ul></ul><ul><ul><li>L’aspect le plus contraignant reste le « squelette » c’est-à-dire la partie graphique à proprement dite. Heureusement une multitude d’habillages propres à Spip existe, et il est conseillé pour une première approche de voir le fonctionnement de l’un d’entre eux. </li></ul></ul>
  13. 13. <ul><li>Les outils issus du Web 2.0. </li></ul><ul><li>Depuis plusieurs mois le Web 2.0 a fait son apparition. Il met à disposition de tous des solutions souvent simples et efficaces dans de nombreux domaines. La réalisation de sites en fait partie. </li></ul>
  14. 14. <ul><ul><li>Prenons le cas de Jimdo. </li></ul></ul><ul><ul><li>Lancé en 2007 Jimdo réunit en une interface les 3 éléments dont nous parlons depuis le début, à savoir : l’adresse, l’hébergement et le logiciel de conception de pages. </li></ul></ul><ul><ul><li>Il s’agit d’un système entièrement gratuit pour concevoir un site internet. </li></ul></ul><ul><ul><li>Une rapide inscription et vous pouvez commencer à modifier les pages déjà créées. </li></ul></ul><ul><ul><li>Le site est très ergonomique, les menus et les options tombent sous la main. </li></ul></ul>
  15. 15. <ul><ul><li>Cependant une version payante (60 euros / an) existe, elle permet de s’affranchir du logo « jimdo » présent automatiquement sur la page d’accueil dans la version gratuite, elle supprime également le nom « jimdo » présent de la même façon dans l’adresse. Enfin des possibilités supplémentaires sont disponibles : statistiques poussées, lettre d’informations, aucun publicité jimdo, plus de thèmes graphiques, possibilité d’inclure un blog… </li></ul></ul><ul><ul><li>Ce système est véritablement selon moi la solution pour lancer un utilisateur à lancer son site internet. </li></ul></ul><ul><ul><li>La question à se poser est de savoir s’il faut prendre la version gratuite ou la version payante et bien avertir avant l’utilisateur de cette alternative. </li></ul></ul>
  16. 16. 3) Et si l’on bloggait ? <ul><li>Prenons le cas de Blogger. </li></ul><ul><li>Proposé par le géant google, blogger est une plate-forme de création de blog très efficace. Les options proposées restent simples mais elles sont très bien organisées. De plus il est possible d’intervenir sur le code HTML et donc de vraiment personnaliser son blog. </li></ul>
  17. 17. <ul><li>Prenons le cas d’Over-blog. </li></ul><ul><li>Cet outil reste l’un des meilleurs du genre. Facile à administrer, excellente ergonomie, des facilités pour intégrer des vidéos provenant de youtube par exemple… Il me semble moins intuitif que blogger mais reste néanmoins une référence. </li></ul>
  18. 18. 4) Enrichir ses sites et blogs avec des objets. <ul><li>Calaméo </li></ul><ul><li>http://fr.calameo.com </li></ul><ul><li>Publier, partager, explorer. </li></ul><ul><li>Un site à découvrir, une grande richesse dans le contenu et la possibilité d’enrichir son blog / son site à partir d’informations présentées dans un format plutôt « traditionnel » : doc, xls, ppt et pdf. </li></ul><ul><li>. </li></ul>
  19. 19. <ul><li>Youtube </li></ul><ul><li>http://fr.youtube.com </li></ul><ul><li>Il n’est plus nécessaire de présenter ce portail à vidéos qu’il est possible d’insérer dans sa page web. D’autres sites existent cependant : dailymotion, wat.tv , zapiks… </li></ul><ul><li>. </li></ul>
  20. 20. <ul><li>Slideshare </li></ul><ul><li>http://www.slideshare.net </li></ul><ul><li>Un outil très puissant pour rendre des présentations attractives. </li></ul><ul><li>. </li></ul>
  21. 21. <ul><li>Picasa </li></ul><ul><li>http://picasaweb.google.com </li></ul><ul><li>Cet outil lié au logiciel du même nom permet de publier des albums photos sur internet de manière restreinte. Il peut être lié à blogger (vu plus haut) mais également à d’autres sites internet du moment que vous avez accès au code html. Grâce à quelques manipulations simples on peut par exemple afficher un diaporama sur ses pages personnelles . </li></ul><ul><li>. </li></ul>
  22. 22. 5) Comment faire évoluer son site pour aller plus loin ? <ul><li>Un site, même s’il est bien conçu dés le départ, ne demande qu’à être amélioré ! </li></ul><ul><li>Vous le verrez avec vos utilisateurs, s’ils tombent dedans ils ne voudront pas en sortir et vous demanderont même comment envisager des améliorations ! </li></ul>
  23. 23. <ul><li>La première idée. </li></ul><ul><li>Il est déjà possible de passer d’une plateforme technique à une autre . </li></ul><ul><li>Par exemple, l’utilisateur commence avec Jimdo puis souhaite évoluer vers un hébergement et l’outil Dotclear. Cela impose un certain investissement de la part de l’utilisateur quiva devoir réfléchir à : - Un nom de domaine. </li></ul><ul><li>- Un hébergeur. </li></ul><ul><li>- Les améliorations possibles du site actuel. </li></ul>
  24. 24. <ul><li>La seconde idée. </li></ul><ul><li>L’utilisateur va vouloir utiliser les services détaillés dans le point 4, c'est-à-dire proposer des fonctionnalités supplémentaires à son site. </li></ul><ul><li>Rajouter un diaporama, une vidéo youtube, … tout ceci est possible et rend le site plus attrayant, plus dynamique. De plus il sera nécessaire d’ouvrir un compte youtube (par exemple), d’envoyer ses vidéos mais sûrement de travailler celles-ci avant. </li></ul><ul><li>. </li></ul>
  25. 25. <ul><li>La troisième idée. </li></ul><ul><li>Il serait judicieux de proposer à l’utilisateur aguerri des outils de surveillance de son site internet . Nous pouvons penser à google analytics par exemple ou xiti . </li></ul><ul><li>Pourquoi ne pas envisager de retirer quelques euros de la fréquentation de son site en mettant des bandeaux de publicitaires choisis avec google advance ? </li></ul><ul><li>Autre solution : le référencement ! Une bonne gestion des metatags permet d’être référencé plus facilement. On augmente sa visibilité sur internet. Amener l’utilisateur à comprendre les rouages (complexes) des moteurs de recherche et de la façon dont il capture les informations d’un site internet. </li></ul><ul><li>. </li></ul><ul><li>. </li></ul>
  26. 26. 6) Annexes <ul><li>Onglet Partage du portail cybanim (cyber-base). </li></ul><ul><li>Ateliers transversaux. </li></ul><ul><ul><li>Travail autour du multimédia (vidéo, son, image). </li></ul></ul><ul><ul><li>Mise en pratique de la publication. </li></ul></ul><ul><ul><li>Création de documents PDF lisibles par tous. </li></ul></ul><ul><ul><li>Héberger des documents compressés (Zip). </li></ul></ul><ul><ul><li>Projet de rédaction d’un journal avec des établissements scolaires. </li></ul></ul><ul><ul><li>Notions sur les risques encourus par les ados (à travers les blogs). </li></ul></ul>
  27. 27. <ul><li>Hébergeurs. </li></ul><ul><ul><li>Pages mises à disposition de son FAI. </li></ul></ul><ul><ul><li>Pages perso de Free. </li></ul></ul><ul><ul><li>Phpnet.org / Association grenobloise. </li></ul></ul><ul><ul><li>OVH.com / Prestataire professionnel. </li></ul></ul><ul><ul><li>1and1.fr / Prestataire professionnel. </li></ul></ul><ul><li>Fournisseurs de nom de domaine et méls dédiés. </li></ul><ul><ul><li>Gandi / Acteur historique. </li></ul></ul><ul><ul><li>OVH / Regrouper les services. </li></ul></ul><ul><li>Logiciels de développement. </li></ul><ul><ul><li>Kompozer / Création HTML CSS PHP. </li></ul></ul><ul><ul><li>Dreamweaver / Création HTML CSS PHP. </li></ul></ul><ul><li>Sites utiles. </li></ul><ul><ul><li>Le site du zéro. </li></ul></ul><ul><ul><li>Alsacreations. </li></ul></ul>A compléter ! ;-)

×