Langages classiques
HTML (HyperText Markup Language)
Le html est un langage de mise en page pour le web. Une page html complète comprend habituelement une/des feuille de style css et un/des scripts javascript. Voir la page sur le xhtml pour plus d'infos.
A noter depuis 2010 une effervescence autour de la naissance de la version 5 du html qui promet certaines évolutions majeures, au niveau des vidéos, des animations, des formulaires etc.
Ce site est écrit en html 5 par exemple ce qui augmente sa qualité sémantique.
Les réelles innovations fonctionnelles dépendront des capacités des navigateurs web de demain : firefox, chrome, safari et internet explorer 9 qui semble offrir un niveau de compatibilité surprenant pour un logiciel Microsoft.
CSS (Cascading Style Sheets)
css signifie Cascading StyleSheet (Feuille de Style en Cascade.)
Le langage css permet de definir l'apparence (couleur, taille, typographie…) des éléments d'une page html ou xhtml.
Réferences :
- http://www.csszengarden.com [lien vers un autre site web] [english] : le jardin zen css offre une excellente démonstration de la puissance des feuilles de style: une seule page web et n feuilles de styles donnent n aspects complètement différents!
- http://openweb.eu.org/ [lien vers un autre site web] :
excellents tutoriaux pour se mettre aux standards, css en particuliers. - http://www.alistapart.com/ [lien vers un autre site web] :
une référence en matière d'interface web.
Javascript
Le javascript est un langage de programmation utilisé pour valider l'envoi de formulaires, créer des effets visuels (DHTML) etc. Le fait qu'il soit interpreté coté client (sur le navigateur du visiteur et non coté serveur) signifie que son domaine de possibilité est plus restreint que pour des languages tels que php ou java par exemple - à moins d'utiliser ajax!
Il existe des librairies (API) qui simplifient la programmation et ajoutent des fonctionnalités utiles : JQuery est ma favorite mais il en existe d'autres comme Prototype [lien vers un autre site web] ou Motools [lien vers un autre site web] par exemple.
XSL (eXtensible Stylesheet Language)
xsl est une famille de langages dont le but est de mettre en page des données xml.
Une seule feuille de style xsl permet de donner la même mise en page à une grande quantité d'information. Aussi, ces mêmes informations pourront être exportées en différents formats ou aspects grâce à seulement quelques feuilles de styles…
xsl comprend:
- xpath: syntaxe permettant de localiser le fragment d'un document xml.
- xsl-t: feuille de style transformant un document xml en un autre document xml comme une page xhtml par exemple.
- xsl-fo: feuille de style permettant d'exporter des données xml en un format différent comme pdf, svg, png ou csv par exemple.
Référence : www.w3.org/Style/XSL/ [lien vers un autre site web] [english] : le site officiel
XML (eXtensible Markup Language)
Le xml est un langage non-propriétaire qui permet de stocker et de structurer des informations textuelles. Il se présente sous forme de texte ce qui fait que l'on peut facilement le manipuler, l'échanger, le comprendre…
xml consiste en fait en un ensemble de technologies basées sur une dissociation du fond et de la forme telles que xsl, dtd, schémas (xsd), dom…
Références:
- http://www.w3.org/XML/1999/XML-in-10-points.fr.html [lien vers un autre site web]: xml en 10 points
- http://www.w3schools.com/xml/xml_whatis.asp [lien vers un autre site web]: introduction à xml [english]
- http://www.adae.gouv.fr/upload/documents/Intro_cci_v2.pdf [lien vers un autre site web]: recommandations pour l'interopérabilité des systèmes publics - on y parle beaucoup de xml!
- cours xml @ eZoulou [lien vers un autre site web]
PHP (Hypertext Preprocessor)
php est un langage de programmation libre de droit. C'est un programme exécuté coté serveur (et non pas sur votre navigateur comme le javascript.) Il permet par exemple de créer des documents xml et de les modifier (comme lorsque vous laissez un commentaire à un projet dans ce site. )
Un des grand avantages de php est qu'il est accepté par la pluspart des hébérgeurs (cf java. )
Référence : http://faqfclphp.free.fr/#2 [lien vers un autre site web]: réponses sur php
MySQL
MySQL est un logiciel libre de base de données, qui est souvent utilisé pour stocker toutes les données d'un site.
MySQL fonctionne en général en association dans un système LAMP.
XHTML (eXtensible Hyper Text Markup Language)
Le xhtml est un langage de mise en forme pour le web. C'est grosso-modo du html qui répond à la syntaxe xml (et à la dtd xhtml of course. ) Ce site est écrit en xhtml par exemple.
De manière pratique, xhtml se présente sous forme de texte balisé, chaque balise ayant une signification donnée :
<html> <head> <title>titre de la page web</title> </head> <body> <p>Ceci est un paragraphe de texte avec un <a href="http://ezoulou.be">lien vers eZoulou.be</a>. </p> <body> <html>
La bonne manière de coder une page web est d'utiliser les balises pour ce qu'elles signifient (pas pour ce qu'elles rendent à l'écran) et des les styler avec css à votre guise.
Référence:
- http://openweb.eu.org/articles/html_au_xhtml/ [lien vers un autre site web]: passer du html au xhtml
- http://validator.w3.org [lien vers un autre site web]: outil de validation du w3c
- http://www.w3.org/QA/2002/04/valid-dtd-list.html [lien vers un autre site web] [english]: liste des dtd a utiliser dans vos documents html et xhtml
- http://w3csites.com [lien vers un autre site web] [english] : liste de sites xhtml, sympa pour le design aussi…
Nouveautés web 2.0
CDN, Content Delivery Network
Un CDN, littéralement "réseau de livraison de contenu", permet de partager des ressources (images, API javascript/css) via :
- un serveur optimisé : car ne fournissant que des données statiques
- un système de serveurs secondaires, qui garanti la disponibilité de ces ressources.
eZoulou utilise le CDN cdn.ezoulou.be [lien vers un autre site web].
Références
Fluxoulou
CMS crée par votre serviteur sur base de Flux CMS [lien vers un autre site web], un grand merci à ses concepteurs : liip.ch [lien vers un autre site web]. Fluxoulou est construit avec des logiciels 100% libre, ouvert & gratuits, il le reste naturellement. Le code est fourni sous licence GPL [lien vers un autre site web] [en] et/ou MIT [lien vers un autre site web] [en] pour certaines API.
+ d'infos sur fluxoulou.ezoulou.be [lien vers un autre site web]
JQuery
Jquery est une librairie javascript qui propose des outils bien pratique pour animer les pages html et offrir des interfaces plus ergonomiques. Un des avantages de cette librairie est qu'elle est testée sur les principaux navigateurs.
Un exemple vaut mieux qu'un long discours, voici le code : $('button').slideUp();
Référence : Site web: http://jquery.com [lien vers un autre site web] [english]
Ajax
ajax permet une communication entre un javascript (donc interprété coté client) et un script interprété coté serveur via un language simple : xml (encore!) En pratique, vous communiquez avec le serveur sans recharger de nouvelle page. Bien utile pour les formulaires mais à utiliser avec parcimonie sinon car cela entre en conflit avec la notion de ressource unique (URL) en vigeur dans le web.
SVG (Scalable Vector Graphic)
SVG est un format d'image à 2 dimensions, vectoriel, ouvert et formulé en xml.
![]()
Exemple d'image vectorielle versus image bitmap [lien vers un autre site web]
Vectoriel : c'est à dire que les éléments qui composent l'image sont considérés comme des formes et non une suite de points (ceci est le format bitmap = carte de points, comme jpeg [lien vers un autre site web] ou png [lien vers un autre site web]). L'interêt d'avoir une image au format vectoriel est qu'elle peut être agrandie à l'infini sans perdre sa qualité. Par contre si l'on agrandi trop une image bitmap, les point qui, imaginons, mesuraient quelques millimètres à l'initiale, deviendraient d'immenses carrés!
Ouverts : donc libre d'utilisation et interopérable.
Formulé en xml : cela garanti sa pérenité (entre autre). D'un point de vue technique, c'est particulierment intéressant si l'on souhaite modifier le contenu des textes de l'image -> il suffit d'éditer le xml.
Référence : http://www.w3.org/Graphics/SVG/ [lien vers un autre site web] [english] : le site officiel.
Exemple: Premier pas avec Inkscape, dessin réalisé par une débutante après quelques minutes d'expérimentation.
Pas trop web 2.0
Java
Java est un langage de programmation orienté objet développé par Sun Microsystems [lien vers un autre site web] et libre de droit à ce jour.
Il est beaucoup plus complexe est hiérarchisé que php et donc plutôt adapté à des applications volumineuses; en partie parce que il n'est que rarement supporté chez les hébergeurs, à moins d'avoir un serveur dédié, et aussi parce qu'il est gourmand en ressources (l'un explique peut-être l'autre. )
Java a rapidement crée des outils/bibliothèques pour manipuler/transformer les langages de la famille xml alors que php n'en a que depuis récemment.
Pour info, Java n'a rien à voir avec javascript.
Référence : Site web http://java.sun.com [lien vers un autre site web] [english]
TEI (Text Encoding Initiative)
tei signifie initiative pour l'encodage des textes.
Lancé en 1987, La tei est un standard international et pluri-disciplinaire permettant une représentation numérique de tous types de textes et utilisant une structure la plus expressive, la moins obsolète possible.
Référence : http://www.tei-c.org/Lite/teiu5_fr.html [lien vers un autre site web]: la tei simplifiée, texte français par François Role.
DTD
dtd signifie Data Type Declaration. C'est à dire qu'une dtd défini une structure type pour des données stockées au format xml. De manière simple, c'est un document où l'on décrit les règles concernant le choix, le nombre et l'enchaînement des balises dans un ou plusieurs documents xml.
Références:
- http://en.wikipedia.org/wiki/Document_Type_Definition [lien vers un autre site web] [english]: définition plus poussée.
- http://www.w3.org/QA/2002/04/valid-dtd-list.html [lien vers un autre site web] [english]: liste des dtd a utiliser dans vos documents html et xhtml.
Flash
Flash est un programme développé par adobe [lien vers un autre site web].
Ce programme permet de créer des pages beaucoup plus animées que en html. Il comprend un langage de programmation propriété de adobe [lien vers un autre site web]: actionscript. C'est le seul langage propriétaire que j'utilise car il n'a pas d'équivalent dans le domaine public… Je n'utilise pas ce langage de programmation. Pour animer les pages web, je préfère JQuery
Notions de base
Logiciel libre
Un logiciel libre est un logiciel dont l'utilisation, l'étude, la modification et la duplication en vue de sa diffusion sont permises (techniquement et légalement).
source : "logiciel libre" sur wikipédia [lien vers un autre site web]
En pratique, le logiciel est gratuit et fait partie d'un patrimoine (numérique) qui appartient déjà aux générations futures...
Format ouvert
Les termes format ouvert, format libre ou encore spécification ouverte, désignent des formats de données interopérables et dont les spécifications techniques sont publiques et sans restriction d’accès ni de mise en œuvre, par opposition à un format fermé ou propriétaire.
source : "format ouvert" sur wikipédia [lien vers un autre site web]
En pratique, l'utilisation de formats ouverts garanti que vous ne serrez jamais contraint dans l'accès à vos données (contraint à acheter un logiciel fort cher par ex. )
CMS (Content Management System)
Un CMS est un Système de Gestion de Contenu. Il s'agit d'une zone accessible par internet mais sécurisée via mot de passe et qui permet de modifier facilement le contenu d'un site web.

Exemple d'édition d'un site web via un CMS WYSIWYG, un peu comme un document word
Vous éditez les pages de votre site web (textes, images & vidéos) via une zone de saisie WYSIWYG et les informations sont enregistrées sur le serveur sous différentes formes (base de données MySQL, xml…)
Référence:
- http://fluxoulou.ezoulou.be [lien vers un autre site web] : le CMS que j'ai crée pour mes clients. sur base de fluxCMS [lien vers un autre site web] [english].
- http://www.la-grange.net/cms [lien vers un autre site web] [english]: liste de cms sous licence libre.
Intégrateur
L'intégrateur joue le rôle de passerelle entre le programmateur et le webdesigner.
Il prépare les éléments qui composent une page web (code html, images, feuilles de style css, javascript etc.) afin des les incorporer à une application web non mise en forme.
Par exemple, quand l'intégrateur travaille avec un CMS, il doit s'arranger pour que le système, qui possède déjà un aspect standard, ressemble à ce que le webdesigner a défini comme ligne graphique pour ce projet.
L'intégration, c'est aussi veiller à respecter les standards du web : xhtml, css, wai etc.
w3c (World Wide Web Consortium)
Le w3c est un organisme international chargé de développer et promouvoir des standards technologiques pour le web. Il a pour objectif d'améliorer l'aspect universel, ouvert et interopérable du web.
Le w3c développe des langages publics (non propriétaires) tels que xhtml, xml, css et beaucoups d'autres. Il propose aussi des instructions pour améliorer l'accessibilité des sites web aux personnes moins valides, des standards graphiques [lien vers un autre site web] [english]…
Je travaille uniquement avec des langages développés par le w3c à deux exceptions près: php mais qui fait aussi partie des langages ouverts et flash car je n'ai pas trouvé d'alternative jusqu'a présent… [je ne travaille plus avec flash]
Site web: www.w3c.org [lien vers un autre site web] [english]
WAI (Web Accessibility Initiative)
La WAI, initiative pour l'accessibilité du web, est mise en place par le w3c.
Elle a pour but de créer des règles de construction des sites internet (appellées wcag ou w.c.a.g. - Web Content Accessibility Guidelines) afin que ceux-ci soient accessibles aux personnes handicapées ou avec des moyens réduits.
Par exemple, une page conforme aux recommandantions WAI devra fournir un texte de remplacement pour toute illustration graphique. Un visiteur aveugle, ou ne chargeant pas les images, pourra comprendre, grâce à un synthétiseur vocal par exemple, l'ensemble de la page, y compris ses illustrations.
Il existe trois niveau de conformité aux recommandations WAI: A, AA and AAA (allant du site assez accessible au site accessible par le plus grand nombre, quelque soit nos handicaps.)
Références:
- http://www.w3.org/WAI/gettingstarted/Overview.html.fr [lien vers un autre site web]: les premiers pas pour construire un site accessible
- outils de test: http://www.vischeck.com [lien vers un autre site web]: simule une vision sans couleur de votre site.
- outils de validation: http://www.contentquality.com [lien vers un autre site web] [english], http://www.wave.webaim.org [lien vers un autre site web] [english]
System LAMP
LAMP = Linux, Apache, MySQL, PHP
Un serveur web LAMP constitue LE standard pour les applications web actuelles.
all2all, mon hébergeur propose d'excellentes formules d'hébergement [lien vers un autre site web] LAMP en l'occurrence.

