Pour l’épreuve orale de BTS Informatique et Gestion 2007, il faut rendre un compte rendu de 20 pages sur un sujet particulier d’informatique. Ce rapport est nommé Note de Synthèse, et doit faire 20 pages environ.

A cet effet je me suis donc penché sur la question, et suis arrivé à la conclusion suivante : étant bidouilleur de nature sur la conception des pages internet, pourquoi ne pas faire un sujet complet là dessus ?

Je me suis lancé sur l’ Ancienne version de la note de synthèse qui parle des Normes de la Toile. Finalement je n’ai pas avancé, car le sujet est trop ciblé “COURS” ou “LECON PRATIQUES”. J’ai donc suivi l’affaire en pensant à une chose : Pourquoi ne pas partir d’un exemple pour construire la synthèse ? Ce n’est pas une mauvaise idée, après tout si je met en jeu deux journalistes ou plus, qui voudraient publier des informations, je peux facilement parler du HTML, du XHTML, du CSS et finalement du Python !

Ainsi je propose les pages suivantes, dans lesquelles nous retrouverons mes avancées du travail.

Titres possibles

Titres possible de la note de synthèse :

• Le développeur au service du journalisme
• La programmation au coeur de l’information
• Assemblage de plusieurs domaines dans une vision commune : L’information

Plan

1. I / Introduction
2. II / Le travail du journaliste amélioré par l’outil informatique 1. A / La numérisation des documents
   1. a) A la main
   2. b) La numérisation par périphériques 2. B / Les logiciels de traitement de texte
   3. a) L’interface
   4. b) Les couleurs, la mise en page
   5. c) Les styles 3. C / Exemple
   6. a) Un article de journal, tel ceux publiés dans le journal local : les DNA ou Dernières Nouvelles d’Alsace.
   7. b) Le même article tapé à l’ordinateur sur un logiciel tel que EDIT, NOTEPAD ou encore VIM
3. III / La découverte de la Toile 1. A / La balise, véritable vecteur structurant du texte pour l’impression sur la Toile
   1. a) HTML
   2. b) XHTML/XML 2. B / Notre journal traduit dans un langage de présentation : les balises en action
   3. a) L’article, façon HTML
   4. b) Sauce XHTML (quasi similaire)
4. IV / Une gestion plus simple de l’information : découverte du dynamisme sur la Toile (entretien, maintenance plus simple d’un site internet) 1. A / Présentation de quelques langages utilisés
   1. a) JS (Javascript)
   2. b) Java
   3. c) Flash
   4. d) Python
   5. e) PHP 2. B / Le PHP, ou les clés d’un succès rapide et facile sur le réseau des réseaux
   6. a) Se connecter à une base de donnée et afficher les informations récupérées
   7. b) Gérer les accès par modification du fichier .htaccess
   8. c) Notifier une personne par courriel
5. V / Présentation des pages, ou comment habiller son texte avec des feuilles de style 1. A / La séparation de l’âme avec le corps 2. B / Petits exemples pratiques
   1. a) Portedesetoiles .NET (V1.0), Section Résumés – Affichage à l’ancienne, cependant SANS tableaux)
   2. b) GeLinux, Page d’accueil – La simplicité grâce aux couleurs primaires
   3. c) Mathidounette.free.fr, Section Anniversaire – Aspect atypique, couleurs féminine appropriées au thème du site
6. VI / La cuisine gastronomique, ou comment marier quelques aliments parmi ceux cités 1. A / Quelques mots sur Python et Django
   1. a) Présentation de Python
   2. b) Présentation de Django 2. B /Un mélange bien mesuré
   3. a) Utilisation du langage Python au travers des librairies fournies par Django
   4. b) La séparation des pouvoirs ou comment avoir des templates
   5. c) L’utilisation du XHTML et du CSS chez Django
7. VII /Conclusion

Introduction de la note de synthèse

L’informatique a pour beaucoup amélioré le travail des différents salariés de par le monde. Désormais présent dans la plupart des foyer, un ordinateur permet à l’utilisateur la mise en forme de ses données, ou tout simplement de réduire la place prise par ces dernières (une disquette par exemple prend bien moins de place qu’une quantité de feuilles).

La période de stage effectuée à l’Université March Bloch de Strasbourg m’a permis de découvrir de nouveau langage de programmation, mais également des techniques nouvelles, permettant la présentation de l’information sur internet.

Nous verrons donc au travers l’exemple du journalisme, l’évolution des techniques employées dans la prise d’information, la mise en forme des données accumulées par les journalistes pour finalement montrer une solution possible à toutes celle présentées, sorte de mélange.

Contenu

Introduction

Cf. Chap précédent

II / Le travail du journaliste amélioré par l’outil informatique

Le travail du journaliste est simple : trouver l’information, faire quelques recherches complémentaires, et mettre à plat le tout. Un rapport manuscrit est alors formulé, sorte de synthèse du sujet choisi.

Aujourd’hui les choses sont différentes, nous utilisons l’outil informatique.

A / La numérisation des documents

Les documents sont de deux types dans le journalisme : Textuels et iconographiques.

Pour les insérer dans l’ordinateur, deux voies sont possibles :

a) A la main

La personne s’occupe d’entrer manuellement son texte ou encore l’image. Pour le texte, au départ il y avait EDIT (sous MS-DOS), Bloc – notes (Microsoft Windows), ou encore VI (sous UNIX).

Pour la création iconographique, il y a aussi des logiciels minimalistes tels que Paint ou Kpaint. Plus tard ce sont Adobe Photoshop ou The Gimp qui permettront d’affiner les images ou même de les créer. Mais d’autres méthodes permettent d’insérer texte ou images.

b) La numérisation par périphériques

Ainsi de nouveaux appareils sont apparus sur le marché de l’informatique : les numériseurs, ou scanneurs, mais également appareils photos numériques, caméra numériques, etc …

Ces engins permettent donc d’insérer sans trop de mal des documents dans l’ordinateur, facilitant la tâche de copie de ces dernières, de transmission, de mise en page, etc … Il existe également des logiciels permettant de traduire une image contenant du texte en un document texte modifiable.

Toutes ces tâches permettent d’avoir les données dans l’ordinateur, mais il y a mieux : les logiciels de traitement de texte.

B / Les logiciels de traitement de texte

Les logiciels de traitement de textes ont été une véritable révolution dans le monde informatique, cela permettait à la fois de taper du texte et de le mettre en forme. Ceci découle aussi de l’apparition des environnements graphiques.

a) L’interface

Les boutons et fonctions spécifiques à la mise en italique, en lettre grasses ou en souligné du texte sélectionné est une révolution faite il y a bien des années, et dont les méthodes portent toujours leurs fruits. Il est assez simple de faire ses présentations à l’aide des logiciels de traitement de texte, rien qu’en jouant sur les polices, la taille etc …

b) Les couleurs, la mise en page

Autre chose importante, les publicitaires vous le diront, les couleurs attirent l’oeil, ainsi que la zone géographique occupée par le texte. Ainsi les traitements de texte ajoute couleur, mais aussi ordonnancement au texte.

c) Les styles

Finalement il reste l’automatisation de certaines choses, liées aux couleurs et formats de texte : les styles. Nous pouvons, sous Openoffice.org par exemple (logiciel de traitement de texte), mettre tout nos titres dans un même format, pour finalement créer un sommaire d’un simple clic et quelques options. De la même façon il est possible de modifier le document, ajouter des pieds de pages, des images, etc … La présentation est donc un point important pour notre page.

C / Exemple

Rien de meilleur que du concret pour nourrir nos constatations :

a) Un article de journal, tel ceux publiés dans le journal local : les DNA ou Dernières Nouvelles d’Alsace.

INSERER IMAGE !!!

b) Le même article tapé à l’ordinateur sur un logiciel tel que EDIT, NOTEPAD ou encore VIM

Le même article peut être ainsi tapé à l’ordinateur, il est donc sous format numérique.

INSERER IMAGE !!!

L’outil informatique nous permet donc de présenter des informations de manière simple, nous permet de le stocker facilement, d’en faciliter la copie ou la transmission, mais aussi de prendre moins de place. Des méthodes ont cependant évolué pour permettre l’accès plus rapide à ces informations, c’est l’arrivée de la Toile.

III / La découverte de la Toile

La Toile (ou le Web) est arrivé il y a peu, et permettait au départ de passer d’un document à l’autre avec un système de liens, ces mêmes liens qui tissent une véritable Toile autour d’un sujet, d’un thème, de plusieurs sites, etc … En informatique, pour désigner du code qui permet de traiter des informations ou d’en créer s’appelle langage de programmation, cette fois ci, pour le réseau des réseaux (Internet), nous parlons souvent de langage de présentation, du moins pour les deux premiers que nous verrons (HTML et XHTML).

A / La balise, véritable vecteur structurant du texte pour l’impression sur la Toile

Pour présenter du texte il faut un code particulier, c’est pourquoi le HTML et le XHTML mettent, comme leur nom l’indique, une structure autour du texte à l’aide de balises.

a) HTML

Le HTML (HyperText Markup Language, ou langage de balisage d’hypertexte) permet de mettre en place des balises simples pour rendre compte de l’état de certaines parties du texte. Comme la balise

, par exemple, qui indique un nouveau paragraphe, ou encore

qui annonce un titre. Nous remarquons que les balises sont repérables à leur signe « < » et « > ».

b) XHTML/XML

Le XHTML (eXtensible HyperText Markup Language, ou langage de balisage d’hypertexte extensible) est un avant goût de la structure très stricte du XML, tout en gardant les balises de base du HTML. En somme l’on apprend à séparer le document en deux : L’un présente le contenu de la page, l’autre présente de manière cachée, les informations utiles pour le document, comme un titre, un auteur, etc …

Ceci était également possible avec le HTML, mais non obligatoire, le HTML se voulant assez souple, certains le définissaient comme étant un langage barbare.

B / Notre journal traduit dans un langage de présentation : les balises en action

En parler c’est bien, le voir c’est encore mieux, je vous propose de voir notre article en format HTML, puis en format XHTML, histoire de voir les quelques différences, mais aussi de souligner les points importants d’un tel langage.

a) L’article, façon HTML

<!DOCTYPE HTML PUBLIC "-*W3C*DTD HTML 4.01*EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>
  <title>Le tokay, c'est fini</title>
</head>
<body>
<h1 style="text-decoration: underline; color: rgb(255, 0, 0);">Le
tokay, c'est fini</h1>
<img src="Domaine%20des%20maronniers.png">
<p style="font-family: Lucida Sans;"><big>A partir
d'aujourd'hui, les viticulteurs alsaciens ne peuvent plus utiliser le
terme de tokay, restitu&eacute; officiellement &agrave; la
Hongrie, son pays d'origine. R&eacute;trospective en images de
l'histoire du tokay en Alsace.</big></p>
</body>

b) Sauce XHTML (quasi similaire)

<!DOCTYPE html PUBLIC "-*W3C*DTD XHTML 1.0 Strict*EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns######"http://www.w3.org/1999/xhtml" xml:lang"fr" lang="fr">
<head>
        <title>Le tokay, c'est fini</title>
        <link rel######"stylesheet" media"screen" type######"text/css" title"Defaut" href="dna.css" />
</head>
<body>
        <h1>Le tokay, c'est fini</h1>
        <img src="Domaine des maronniers.png" alt="Image du domaine des maronniers" />
        <p>A partir d'aujourd'hui, les viticulteurs alsaciens ne peuvent plus utiliser le terme de tokay, restitué officiellement à la Hongrie, son pays d'origine. Rétrospective en images de l'histoire du tokay en Alsace.</p>
</body>

Là encore nous découvrons des améliorations, mais le système présente toujours des inconvénients, comme par exemple qu’il faille à chaque fois ajouter des balises sur son texte, avant il fallait cliquer pour mettre en forme, puis imprimer notre oeuvre, désormais la publication est plutôt simple, c’est au tour de la création du documents d’être plus compliquée. Sans compter que le langage met en jeu (toujours d’après son nom, HyperText ou hypertexte) des liens vers d’autres pages, il faut donc tisser un réseau de documents grâce à des hyperliens, cela devient vite ingérable.

IV / Une gestion plus simple de l’information : découverte du dynamisme sur la Toile (entretien, maintenance plus simple d’un site internet)

Gestion, entretien, maintenance d’un site, toutes ces dénominations qui faisaient rager les constructeurs de sites internet avant que les langages de programmations ne viennent donner leur avis. En effet Internet présentait des informations au travers de pages écrites à la main, et modifiées pour permettre à l’utilisateur d’apprécier au mieux le contenu, mais du côté du créateur, c’était parfois barbant. Le développeur, lui, a vite su trouver une solution au problème des pages internet : mettre en jeu un langage de programmation pour construire les pages.

A / Présentation de quelques langages utilisés

Il y a plusieurs langages, plus d’une dizaine, mais nous n’en verrons que quelques uns. Je n’utilise d’ailleurs pas tous les langages présentés.

a) JS (Javascript)

Le Javascript, très utilisé actuellement pour les technologies AJAX (Asynchronous Javascript And Xml, ou XML et Javascript asynchrones), permet d’ajouter des fonctions à notre page, lancées au chargement de cette dernière ou encore durant la navigation. N’ayant personnellement pas utilisé, mais simplement modifié quelques bouts de code, je ne pourrais pas en dire plus.

b) Java

Le Java est un langage à première vue, proche du très connu langage C. Le Java est un langage interprété, c’est à dire qu’il demande de la part de l’utilisateur la présence d’une machine dite virtuelle (en gros un programme installé pour que cela fonctionne). Cette dernière s’occupera de traduire le code en langage machine, ce qui est un inconvénient, puisque cela demande du temps. Mais la puissance n’est pas à négliger, comme l’ont remarqué la plupart des webmestres (webmaster ou maîtres Web).

Exemple -> chat.portedesetoiles fait en Java (par PJIRC)

c) Flash

Un nombre en progression constante de sites Internet sont publiés en Flash. Cette technologie a surtout montré ses avantages au niveau du graphisme, puisque l’Action Script livré récemment avec Flash permet de réagir aux actions de l’utilisateur sur l’interface créée. La syntaxe pourrait être comparée au Javascript. La maîtrise d’un tel langage demande cependant une certaine expérience, n’est pas donné à chacun de fournir de bons résultats.

Exemple d’application créée avec Flash -> Le très célèbre jeu DOFUS.

d) Python

Le Python est un langage qui existe depuis bien des années. Celui ci est orienté objet, en Python tout est orienté objet. Il est très utilisé pour des applications scientifiques, seulement il existe un cadriciel (framework) permettant de l’utiliser pour créer des sites internet. Le plus notable dans Python est le fait que la documentation est sous licence libre, et que la fondation PSY (Python Software Foundation) en est la maîtresse. Autre chose intéressante : l’indentation est un point essentiel de ce langage, le code est donc très lisible et très épuré.

e) PHP

Notre petit dernier se nomme PHP, d’abord nommé Personal Home Page (ou page d’accueil personnelle) par son auteur, le nom est devenu HyPertext Preprocessor (préprocesseur d’hypertexte). Ce langage est très utilisé sur la Toile, entre autre car il est libre et permet de discuter facilement avec une base de données (lecture/enregistrement d’informations) comme MySQL, également libre.

A travers ce petit aperçu, nous comprenons rapidement que les langages ne manquent pas, le choix est vaste, il reste au développeur de faire sa propre mouture. Mais penchons nous plus amplement sur l’un de ceux là, par exemple PHP.

B / Le PHP, ou les clés d’un succès rapide et facile sur le réseau des réseaux

Comme nous l’avons constaté tout à l’heure, le langage PHP est un des plus utilisés. Il est très connu, et c’est pourquoi la plupart des webmestres sont amenés à l’étudier. Montrons quelques morceaux de codes qui constituent les fonctionnalités principale de cette merveilleuse plateforme.

a) Se connecter à une base de donnée et afficher les informations récupérées

L’un de mes travaux a été la gestion d’un site concernant une distribution Linux (un système d’exploitation alternatif) nommé GeLinux (Ganz Elsass Linux). A cet effet il m’a fallu m’occuper des nouvelles. Afficher des nouvelles se résume à ceci :

• Connexion à la base de données et authentification
• Choix de la table
• Récupération d’un jeu d’enregistrement à l’aide d’une requête
• Affichage des données sous forme d’un tableau ou encore de cadres (selon préférences) Voici donc les morceaux de code correspondants, pris du site GeLinux (page 011_listenews.php de l’administration):

<?php
	mysql_connect($_SESSION['sql_base'], $_SESSION['sql_id'], $_SESSION['sql_mdp']); // Connexion à MySQL
	mysql_select_db("blanko_gelinux"); // Sélection de la base

	$retour = mysql_query('SELECT * FROM wsne ORDER BY dex DESC');

	while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les news
        	{
?>
<tr>
<td><?php echo '<a href######"?pagenews&npage######ajoutnews&modifier_news' . $donnees['dex'] . '">'; ?>Modifier</a></td>
<td><?php echo '<a href######"?pagenews&supprimer_news=' . $donnees['dex'] . '">'; ?>Supprimer</a></td>
<td><?php echo $donnees['treti']; ?></td>
<td><?php echo date('d/m/Y', $donnees['stamptime']); ?></td>
</tr>
<?php
        } // Fin de la boucle qui liste les news
        mysql_close(); // Déconnexion de MySQL
?>

Ne pas oublier de fermer la base de données à l’aide de mysql_close après chaque utilisation.

Ceci permet donc de récupérer des données stockées dans une base de données, et de les afficher.

Selon les requêtes, le code utilisé et la base de données, nous pouvons ajouter, modifier ou supprimer des informations pour un site internet, et les retranscrire (selon usages). C’est très utile pour des journalistes qui aimerait avoir une interface d’insertion ou de rédaction d’articles, tout en permettant aux usagers de voir les articles au jour le jour.

Mais nous pouvons aussi ouvrir des fichiers, les modifier et les enregistrer.

b) Gérer les accès par modification du fichier .htaccess

Un autre point fort du PHP est l’accès aux fichiers. Nous pouvons ouvrir, lire, modifier, créer des fichiers, tout ceci grâce à un ensemble de fonctions.

L’utilisation d’un fichier texte s’opère ainsi :

• Ouverture du fichier
• Placement du curseur
• Lecture ligne à ligne jusqu’à la fin
• Affichage / Traitement du texte Voyons donc un pris du site APEPA (en cours de développement) permettant l’ouverture d’un fichier et d’afficher le résultat, c’est la page Permissions_espace.php qui permet d’ouvrir un fichier .htaccess :

<?php
        // 1 : on ouvre le fichier
        $monfichier = fopen($adresse_fichier_mdp, "r+");

        //2 : On lit la premi&#232;re ligne du fichier
        $ligne = fgets($monfichier);
        // 3 : Puis on lit les lignes du fichier tant que la fin du fichier n'est pas atteinte &#224; l'aide d'une boucle while et de la fonction feoef()
        while (!feof($monfichier))
        {
                $ligne .= fgets($monfichier);
        }

        // 4 : quand on a fini de l'utiliser, on ferme le fichier
        fclose($monfichier);

        $ligne = trim($ligne, "<br/>t"); // On supprime dans le texte retourn&#233;e l'ensemble des tabulations qui rendent impure les lignes. <br/>t d&#233;signe la tabulation.
?>

Là encore il ne faut pas oublier de fermer le fichier une fois les actions terminées.

Ceci permet l’ouverture et la lecture d’un fichier quelconque, ou plutôt présent sur le serveur où se situe PHP et dont nous avons l’accès en lecture. Nous pouvons aussi écrire un fichier ou encore le modifier.

Cette fonction peut être intéressante pour le journaliste s’il veut pouvoir transmettre son travail autrement que par voie internautique, et donc envoyer par courriel son texte tapé sur l’interface hypertexte. Mais il peut faire encore mieux, et envoyer directement un courriel contenant son texte ou même un message pour notifier les habitués qu’un nouvel article a été publié.

c) Notifier une personne par courriel

Cette pratique est de plus en plus utilisées sur le net, pour les gens « connectés » en permanence, toujours à l’affût de nouvelles d’un site internet, d’un message de réponse à un texte soumis sur un forum, etc …

En somme un courriel présente les caractéristiques suivantes :

• Un destinataire
• Un sujet de courriel
• Un message
• Une en-tête contenant certaines informations sur le courriel en question, par exemple l’émetteur Voici donc un exemple pris de http://mathidounette.free.fr/anniversaire , et plus particulièrement de la page ajout_anniversaire.php qui permet d’annoncer à l’administrateur de l’inscription d’un nouveau carton d’anniversaire :

<?php
        // On envoie un courriel &#224; l'administrateur pour le renseigner sur la demande de carton d'anniversaire
        $info_prenom_chanceux = $prenom; // Donnée récupérée d'un formulaire que nous venons d'envoyer
        $info_age_chanceux = $age; // Idem
        $info_ami_chanceux = $ami; // Idem

        $requete_ami_chanceux ###### mysql_query("SELECT prenomMembre FROM membres WHERE numeroMembre'$ami'"); // On récupère certaines valeurs dans les données enregistrées sur MySQL
        $tableau_ami_chanceux = mysql_fetch_array($requete_ami_chanceux);
        $info_prenom_ami_chanceux = $tableau_ami_chanceux['prenomMembre'];

        $info_destinataire = 'blankoworld@wanadoo.fr';
        $info_expediteur = 'mathidounette@free.fr';

        $destinataire_courriel = $info_destinataire;
        $sujet_courriel = "Nouvel demande de carton d'anniversaire";
        $message_courriel = "Le membre $info_prenom_ami_chanceux (n°$info_ami_chanceux) demande à ouvrir un carton d'invitation pour $info_prenom_chanceux, $info_age_chanceux ans.";
        $entete_courriel = "From: $info_expediteur" . "<br/>r<br/>n" . "Reply-To: $info_expediteur" . "<br/>r<br/>n" . 'X-Mailer: PHP/' . phpversion();

        //Envoi du courriel
        mail($destinataire_courriel, $sujet_courriel, $message_courriel, $entete_courriel);
?>

La fonction mail, comme bien d’autres, est très utile. L’ensemble de des fonctions présentées par PHP permet de donner au site une vie, une dynamique. Cela permet aussi de simplifier la vie des administrateurs de sites internet, ou tout simplement de faciliter l’accès aux personnes responsables du site, sans qu’elles connaissent pour autant un semblant de programmation ou de langage de présentation. D’ailleurs le côté esthétique ou présentation (appelez le comme bon vous semble), peut être géré à part, à l’aide du CSS.

V / Présentation des pages, ou comment habiller son texte avec des feuilles de style

Ceci est un point important dont il faut s’attacher, surtout lors de la création de sites internet ou d’interfaces d’administration par affichage sur navigateur Web. Je parle bien sûr des CSS. Mais qu’est ce que le CSS ? A quoi sert il au juste ? Et comment le fait il ? Nous aurons l’occasion de voir quelques brèves présentations.

A / La séparation de l’âme avec le corps

J’imagine déjà la question qui doit vous brûler les lèvres : qu’est ce que le CSS ? Quelques lignes que nous en parlons, mais le mystère reste entier. Levons le rideau, CSS veut dire Cascading Style Sheet, ou feuille de style en cascade.

Ce procédé permet, si la page est bien construite, de véritablement séparer fond et forme d’une page. A cet effet tous les paramètres concernant la localisation, la couleur, la police, etc du texte est contenu soit dans un fichier, soit dans l’en-tête du document (celle dont nous parlions quelques pages plus haut, et contenue entre les balises HEAD de la page). Le fait que nous puissions accumuler plusieurs pages CSS, a donné son nom à ce procédé (puisqu’utilisées en cascade).

L’avantage du CSS est que si nous séparons le corps et l’âme à chacune des pages, nous observons une vitesse accrue de l’affichage des pages de tout un site. En effet au lieu de décoder des lignes et des lignes de code, le navigateur internet peut s’occuper lui même d’afficher les pages, selon la feuille de style qu’il a acquis sur la page précédente. En somme une modification sur les feuilles de style (selon qu’elles sont requises par chacune des pages du site) se répercute sur l’ensemble du site.

Nous avons eu recours à ce type de stratagème d’une part pour gagner en rapidité, d’autre part pour rendre plus lisible les pages (le code). Et ce dernier point était le plus important. Pourquoi ? Tout simplement car la présentation des pages sur un navigateur Web a amené une sorte de valeur ajoutée aux documents : des images, un style particulier, finalement de l’art ! Outre le fait d’avoir un texte correct, le besoin d’attirer le client, les lecteurs et autres personnes sur le site a été pris comme dans le domaine de la publicité : la beauté, l’intrigue, la curiosité sont tous autant de facteurs permettant le visiteur de rester sur un site. Malheureusement les lignes de code pour afficher autant d’images, placer géographiquement les éléments sur la page ont complètement saturé la lisibilité des pages. D’où l’arrivée du CSS.

Et l’utilisation du CSS est un véritable plus, le rendu d’un site – graphiquement – revient à moins d’une dizaine de jours, contre deux à trois semaines auparavant ; tant ce procédé est utile.

Mais voyons plutôt quelques uns de mes essais sur la présentations de sites internet.

B / Petits exemples pratiques

Nous ne présenterons que des impressions d’écrans de certains des sites crées cette année, ceci pour ne pas polluer de trop cette note de synthèse. Est à observer la structure géographique des sites, les couleurs utilisées pour les liens, les fonds, et les images de fonds. Tout ceci est fait avec des CSS (présentés par date de création).

a) Portedesetoiles .NET (V1.0), Section Résumés – Affichage à l’ancienne, cependant SANS tableaux)

INSERER IMAGE !!!

####b) GeLinux, Page d’accueil – La simplicité grâce aux couleurs primaires

INSERER IMAGE !!!

c) Mathidounette.free.fr, Section Anniversaire – Aspect atypique, couleurs féminine appropriées au thème du site

INSERER IMAGE !!!

VI / La cuisine gastronomique, ou comment marier quelques aliments parmi ceux cités

Jusqu’à maintenant nous nous sommes efforcés de présenter quelque peu les différentes possibilités permettant d’afficher sur internet des oeuvres écrites par des journalistes, sans trop détailler, ni sans trop faire coïncider le tout. Et pourtant des liens existent entre tout ce que nous venons de montrer.

En effet il est possible de marier l’ensemble des langages : nous pouvons les faire communiquer entre eux et utiliser la puissance de chacun pour construire un tout cohérent et fonctionnel.

A / Quelques mots sur Python et Django

Il existe plusieurs types de cuisines, l’une d’elle concerne Python (langage de programmation tourné à la base vers le scientifique) et Django (un cadriciel écrit en Python et utilisant Python pour afficher des pages internet).

a) Présentation de Python

Python est avant tout un langage utilisé pour la création d’applications scientifiques. Que ce soit pour des calculs ou des traitements complexe, ce langage est très puissant. La particularité de ce langage est que tout est considéré comme étant objet. Sans s’épancher sur la question, sachez que l’objet est une autre manière de programmer, plus récente que la programmation impérative (fonctionnant d’une traite, début à fin). L’objet se démarque par l’encapsulation et l’héritage.

Autre particularité de Python : l’indentation du code est obligatoire, sans elle le code ne fonctionne pas correctement. C’est un avantage certain pour la LISIBILITE du code. C’est donc plus propre à lire et chacun peut utiliser le code de l’autre pour parfaire ses connaissances ou avancer sur un projet plus complexe.

b) Présentation de Django

Nous avions parlé de cadriciel (ou framework). Django est de cette famille, c’est à dire qu’il permet de créer une application plus rapidement, et avec peu de code.

Ainsi l’utilisation de Django par un administrateur le soulage :

• Des connexions à la base de données
• Des requêtes sur la base de données
• De la création d’une interface d’administration
• Du mélange de plusieurs langages dans une seule page
• D’une organisation des fichiers du site En somme c’est un outil intéressant, pour peu que l’on connaisse le Python, car il faut coder en Python pour utiliser Django …. A noter que Django peut être considéré comme une très grosse librairie, en plus de proposer un support complet pour les tests de son travail en local.

B /Un mélange bien mesuré

C’est bien connu, quand on cuisine il faut peser avec soin les aliments, ne pas trop ajouter d’aliments forts, d’épices, etc … C’est exactement le cas avec les applications internautiques. Il faut mesurer le pourcentage d’utilisation de chacun des langages, et c’est ce que Django fait très bien.

a) Utilisation du langage Python au travers des librairies fournies par Django

L’utilisation de Python à l’aide de Django permet la création de classes, d’objets, de fonctions mais également de créers des vues sur la base de données, de récupérer des données, etc … Ainsi Django a besoin pour fonctionner des fichiers suivants :

• manage.py : Ce fichier est crée par Django, il permet entre autre de lancer un serveur sur le port 8000 (à l’aide de la commande python manage.py runserver)pour tester le code que nous créeons. Il permet également de synchroniser la base de données après avoir crée les classes ou même pour la première utilisation (à l’aide de la commande python manage.py syncdb).
• settings.py : Contient les paramètres du site en cours de création, comme par exemple les accès à la base de données, le type de base de données, les accès aux templates du site, l’adresse des images, de la partie administration, l’encodage des caractères et les applications contenues dans notre projet.
• urls.py : Contient les informations sur la gestion des URLs, Uniform ressource Locator (ou Localisateur uniforme de ressources). Nous pouvons par ce biais récupérer tout un ensemble d’informations, ou tout simplement savoir quelle page afficher, avec quels paramètres. Ce fichier fonctionne surtout avec des expressions régulières, chose que j’ai encore du mal à comprendre et à maitriser. Pour une application au sein d’un projet, nous avons encore deux fichiers principaux :
• models.py : Ce fichier contient les classes d’objets, permettant à la fois de créer la base de données et les relations adéquates, mais aussi, et plus tard, d’instancier des objets.
• views.py : C’est ici que nous insérons les vues. C’est à dire les fonctions permettant de traiter la plupart des informations, de questionner la base de données, et d’en récupérer les informations pour plus tard les afficher.

C’est l’architecture même de Django, mais ce n’est que du code de programmation, qui permet de traiter l’information, mais comment l’affiche t on ?

b) La séparation des pouvoirs ou comment avoir des templates

Django utilise les templates. Les templates sont semblables à des moules. Ce sont eux qui vont définir le squelette principal d’une page. Ils requiert donc des données en entrée. Chez Django, comme pour la plupart d’autres cadriciels, les blocs sont justement des morceaux de code qui indique l’insertion de données, ou encore un ensemble de commandes à lancer lors de la lecture de la page, avant l’affichage. Nous les reconnaissons à ces deux crochets ouvrants et à ces deux crochets fermants autour du bloc en question. Par exemple <img style='margin-left: auto; margin-right: auto;' src=/img/objet.propriété'>.

Dans notre cas, ou plutôt dans l’application que j’ai créée, les templates se trouvent dans le dossier « revêtements ». L’accès à ces revêtements est indiqué au fichier settings.py, puis dans le fichier views.py nous pouvons les utiliser lors d’un appel de page :

python return render_to_response('joueb/billet_seul.html', {'auteur': info_auteur, 'billet': billet_seul},)

C’est un morceau d’une fonction qui s’occupe de récupérer les auteurs d’un billet, et le billet choisi afin de l’afficher, si tant est que l’URL est bien construite.

Ensuite dans le revêtement (template) nous pouvons utiliser les données, appelées ici auteur, et billet.

Il ne reste plus qu’à nourrir notre présentation de données, à l’aide de XHTML, mais aussi du CSS.

c) L’utilisation du XHTML et du CSS chez Django

Bien que les revêtements permettent l’affichage des données, elles ne sont pas correctes pour être affichées sur un navigateur Web. C’est pourquoi les revêtements requierent au minimum un langage internet. A cet effet c’est du XHTML que j’ai choisi.

Tandis que le XHTML sert à structurer la feuille de revêtement, que les blocs insèrent les données, il ne reste plus qu’à ajouter un affichage décent à l’aide du CSS. L’ensemble se retrouve alors dans ledit revêtement, sous le nom (selon l’exemple cité) billet_seul.html, dont voici une partie du code :

html<link rel######"stylesheet" media"screen" type######"text/css" title"Defaut" href="/media/css/pythoblog_index.css" />

Ceci est l’appel de la page CSS.

Nous avons alors un morceau de code s’occupant de l’affichage des données :

<div id="billet">
      <div id="billet_titre"><span><img style='' src='/img/billet.titre'></span> de <img style='margin-left: auto; margin-right: auto;' src='/img/auteur.prenom'> <img style='margin-left: auto; margin-right: auto;' src='/img/auteur.nom'></div>
      <div id="billet_contenu"><img style='margin-left: auto; margin-right: auto;' src='/img/billet.contenu'></div>
</div>

Les fameux blocs sont bien entre crochets, et nous utilisons les propriétés des objets pour un affichage. Ici nous appelons le titre de l’objet billet (reçu en entrée), le prénom de l’auteur, mais également son nom et le contenu du billet en question.

Ainsi nous pouvons lier dans les templates le langage de programmation, celui du XHTML (présentation) et celui du CSS (permettant un affichage sur l’ensemble du site crée).

VII /Conclusion

Nous avons parcouru les techniques utilisées dans le monde informatique pour le partage d’informations et la retranscription de celle ci à travers les sites internet. Beaucoup de possibilités sont offertes aux journalistes pour mener à bien leur mission de partage de la connaissance événementielle, les traitements de texte permettaient de numériser les textes, le numériseur ou les appareils photos permettent l’insertion des images dans l’ordinateur, puis le XHTML permet de structuer sa page correctement, après quoi une peinture à la CSS constitue un bon moyen de modifier fréquemment son site au niveau des couleurs et cela sans trop se fouler. En outre le dynamisme se faisant grâce à l’insertion des langages de programmation a permis de simplifier la création des pages par exemple, la gestion des nouvelles ou même l’envoi de courriel à ceux qui le désirent.

Finalement nous sommes arrivés au point où le développeur, pour répondre au mieux à ses clients, par exemple des journalistes, doit connaître un ensemble de langage, ceci afin de les marier au mieux, et d’obtenir ce petit plat connu et apprécié de tous : un site internet proposant toute l’information dont ont besoin les utilisateurs pour un thème donné.