Canalblog
Editer la page Suivre ce blog Administration + Créer mon blog
...Chez Francky

Initiation Kompozer

Débutez la création de pages web avec Kompozer

Diapositive1

Il existe de très nombreux moyens de communication ou de mise en valeur de ses savoirs à l’heure actuelle. Blog, page FaceBook, Tweet… Si le projet de création d’une page Internet est peu à peu abandonné par les individus, les sociétés restent tributaires d’un « vrai site » et bien que ce soit un métier, il est possible, avec peu de connaissance de créer sa propre page et son propre site. De plus, ce n’est pas parce qu’il existe une foule d’outils ou de sites Internet qui proposent des mises-en-page toutes faites, qu’un minimum de connaissance sur le langage HTML ne doit pas être connu. C’est l’objectif de ce cours. Mais, avant d’entrer dans la programmation, quelques informations sur le contexte et le vocabulaire…

Diapositive2

Pour comprendre l’Internet d’aujourd’hui, il faut remonter aux origines, soit, 1948, date de l’invention de ce qu’on considère comme étant le premier ordinateur. Je passe sur le fait qu’il faisait la taille d’un bâtiment, qu’il chauffait horriblement et qu’il était capable de faire des calculs dignes d’une calculette de poche aujourd’hui… tout le monde connaît cette histoire… Plus intéressant est la question du « pourquoi », c’est-à-dire de l’origine de l’invention. Eh bien, comment beaucoup (trop ?) d’inventions et d’avancées technologiques qui parsèment l’Histoire de l’Humanité, l’ordinateur est une invention… militaire ! Développée pour faire des calculs balistiques, c’est-à-dire de trajectoires de missiles !!!  Et, tant qu’à développer les ordinateurs, les militaires ont aussi « inventé» la notion de machines partagées avec le réseau ARPANET reliant 40 machines en 1972. Parallèlement, dès 1977, des scientifiques américains relient une centaine d’ordinateurs dans un réseau nommé THEOYNET, puis CSNET. La naissance « officielle » d’INTERNET survient en 1980 quand réseau militaire et réseau scientifique s’interconnectent. 1988, 60 000 machines sont reliées, mais l’explosion Internet intervient avec l’accès grand-public aux ordinateurs personnels à partir des années 1990. En 1994, 69 pays et 2.2 millions de machines font partie de la toile ; 2 milliards d’utilisateurs en 2007 et, avec le marché des Smartphones et téléphones portables connectés ce sont probablement de l’ordre de 4 à 5 milliards d’utilisateurs réguliers d’Internet qui composent le web aujourd’hui.

Diapositive3

Mais c’est quoi d’abord le web ? C’est tout simplement une idée géniale (hélas, toujours d’ordre stratégico-militaire !) : Si l’on relie des machines le long d’un même segment depuis un central (en étoiles), il suffit qu’un maillon du segment soit coupé et toutes les machines en aval de la coupure seront muettes. Un seul problème et c’est tout le système qui s’effondre. Si par contre on relie les machines suivant plusieurs segments, en cercle ET en étoile, on multiplie les « chemins » potentiels : si un segment est coupé, on peut atteindre le but en passant par un autre segment. La forme prise par ce système ressemble à une toile d’araignée, web en anglais ! C’est le word wide web, littéralement la grande (large) toile d’araignée (web) mondiale (world) le www. Ce qui veut dire que pour atteindre un site en Californie, votre ordinateur est peut-être passé par des serveurs russes ou japonais. C’est totalement transparent pour l’utilisateur

Diapositive4

Pour pouvoir aller chercher de l’information sur une autre machine ou sur un serveur, il existe 2 façons de traiter l’information. Soit c’est une information « figée », statique et l’utilisateur se contente de récupérer l’info (la même pour tous), soit c’est une information « dynamique », c’est-à-dire que ce que l’utilisateur récupère est généré en fonction de sa demande en ayant fait appel à des bases de données. L’information est alors spécifique. Dans ce cours, nous nous contenterons de parler et de générer de l’information statique.

Diapositive5

Ce qu’on appelle le n°IP pour Internet Protocol correspond à un numéro « physique » pour une machine. C’est-à-dire  que ce n’est pas un fichier ou un site, mais bien une adresse unique de machine définie par le numéro de réseau général et le numéro de la machine. C’est avec ce système que l’on peut « tracer » un ordinateur : à partir du moment où vous vous connectez au web, vous « ouvrez » votre machine au réseau et il est possible à des extérieurs d’atteindre votre ordinateur, aussi bien pour remonter des filières (cyber police) que pour installer sur votre machine des programmes parasites. Attention, même si ce n’est vous « physiquement » qui êtes sur l’ordinateur, si vous êtes propriétaire de la machine, vous êtes en partie responsable de son utilisation...

Diapositive6

Ici, ce n’est pas une machine que vous appelez mais un site Internet ou plutôt des « pages » en langage compatible avec Internet – C’est le Uniform Resource Locator défini par un protocole, un nom de serveur et un chemin.

Diapositive7

Quelques chiffres (très rapidement obsolètes !) qui font tourner la tête. En 24 heures, sur ce réseau mondial, 9 000 nouveaux articles sont créés dans l’encyclopédie WIKI ; 104 000 heures de vidéo nouvelles sont mises en ligne sur YouTube ; 400 millions de tweets sont échangés ; 540 millions de SMS ; 552 millions de personnes se sont connectés sur FaceBook ; 4.5 milliards de recherches ont été effectuées sur Google et 145 milliards de mails ont été échangés. En d’autres termes des milliards et des milliards d’informations circulent sur les réseaux (pas seulement Internet) avec une formidable explosion des SMS depuis quelques années. Deux questions : comment alors se faire voir dans cette cacophonie d’information ? Comment trouver la bonne information ?

Diapositive8

En d’autres termes, si vous voulez vous « faire connaître » quelle forme de communication utiliser ? Avoir sa page FaceBook ? Son compte Twitter ? Ou, plus « sérieusement » ne serait-il pas préférable d’avoir un blog ou un site web ?

Diapositive9

Oui, mais l’Internet, ce sont plusieurs centaines de millions de sites avec une augmentation de 5% par mois et plusieurs dizaines de milliards de pages. Au final que faire ? Vous voulez vous faire connaître : faites une ânerie monumentale (depuis danser nu devant l’Elysée en passant par sortir un clip débile) et mettez votre vidéo en ligne ! Vous aurez votre heure de gloire, ou plutôt vos 2 minutes ! C’est hélas la tendance lourde des réseaux actuellement : faire le buzz ! ça n’a aucun intérêt.

Une autre philosophie est de considérer la toile non pas comme un « moyen de faire un scoop » mais bien comme un espace de dépôt d’informations accessible à tous et en particulier à ceux que ça intéresse. En d’autres termes une page web ou un blog est une carte de visite que vous donnez à voir, une extension de votre propre réseau, une forme de communication qui complète celles que vous utilisez déjà.

Diapositive10

Il existe pléthore d'outils pour créer des pages Internet, depuis des outils qui "préparent" une grande partie du travail (et notamment de la mise en page de base) comme Wordpress ou Izispot, jusqu'à des outils professionnels comme Dreamweaver ou Golive. Kompozer est un outil gratuit et open source qui se rapproche plutôt des outils "professionnels...

Diapositive11

Quel peut-être le coût de la création d'un site ? Voici un exemple (que mon frère a eu la gentillesse de me fournir) pour un site assez simple (www.christianvidalconseil.com) à vocation commerciale et entièrement pris en charge par un prestataire privé qui assure la création, l'hébergement et le suivi. Ce site revient au commanditaire à un peu plus de 100 euros par mois. Pour un très grand site (de type FNAC, Amazon...) on peut parler en termes de millions d'euros par an !

Diapositive12

Dans le cas d'une création à but non commercial en fonction des choix des hébergeurs et des outils de création, cela peut revenir à 0 euro par an jusqu'à quelques dizaines d'euros. Dans le cas de ce blog sur lequel vous êtes : J'ai ouvert un compte gratuitement sur canalblog, j'ai fait un choix simple dans des mises en page déjà proposées et j'alimente moi-même le site. J'ai acheté mon nom de domaine et l'entreprise canalblog me fournit 6 Go de stockage et la maintenance du site pour 28 euros par an. Donc, faire une page web simple qui peut être vue par des milliards d'internautes ne revient vraiement pas cher !

Diapositive13

Quelles que soient vos pages, vos sites, ils seront toujours écrit dans un langage universel qui sera lu par tous les navigateurs. Ce langage très simple s'appelle le HTML pour Hyper Text Markup Langage. Chaque fichier HTML est composé de 3 parties :

  • les métadonnées qui regroupent des informations sur le fihcier (auteur, logiciel, mots-clés...)
  • le corps (Body) qui définit toute la mise en page générale
  • Les données en elle-même

Diapositive14

Le HTML est un langage très simple composé de balises <> permettant d'affecter des propriétés à des objets. On ouvre une balise <> avec des caractéristiques, par exemplesignifie qu'on ouvre une ligne d'un tableau, puis on referme cette balise </>.  Entre ces commanbdes on définit les objets.

Diapositive15

Les balises sont imbriquées, ouvertes puis fermées, que ce soit pour définir le contenu ou le contenant.

Diapositive16

Kompozer est un outil dit WYSIWYG (what you see is what you get), c'est-à-dire qu'on n'est pas obligé de passer par des lignes de commande pour créer ses pages HTML, les lignes se génèrent à la volée en fonction des actions. Kompozer est gratuit et surtout Open Source. C'est-à-dire que son code source est accessible et qu'il peut être amélioré ou transformé librement.

Diapositive17

Pour la petite histoire (qu'il ne faut pas chercher à comprendre !) Kompozer est issu d'un logiciel appelé NVU jusqu'en 2005, dont on retrouve toutes les caractéristiques dans Mozilla Composer et dont le successeur est BlueGriffon. Les prochains développements se feront d'ailleurs sur BlueGriffon. Pourquoi changer de nom ? Bonne question !

Diapositive18

Quand on ouvre Kompozer on trouve une fenêtre assez classique avec les outils en haut, en icônes et en liste, et, en bas, des signets permettant de changer de mode de création.

Diapositive19

L'utilisateur a ainsi accès aux 3 modes : "Conception" : C'est la partie WYSIWYG ou l'utilisateur voit ce qu'il génère comme s'il était sur navigateur - le mode "Source" : montrant les lignes de codes HTML - Le mode "Mixte" montrant l'écran et le code des objets sélectionnés.

Diapositive20

Diapositive21

Diapositive22

Diapositive23

Diapositive24

Diapositive25

Diapositive26

Diapositive27

Diapositive28

Diapositive29

Diapositive30

Diapositive31

Diapositive32

Diapositive33

Diapositive34

 

 

 

 

 

 

...Chez Francky
...Chez Francky