Lumière sur Drupal

DRUPAL

Petite video introductive sur les CMS et leur usage
http://www.youtube.com/watch?v=yhMZ3ODsDeM

Qu’est-ce qu’un CMS ?

Gestion de site web
Tout d’abord quelques petites explications, un CMS est un programme qui permet la gestion d’un site web dynamique sans avoir besoin de connaissances avancées en webdesign et programmation. Chaque CMS a ses spécificités mais tous proposent généralement un certain nombre de « modules » complémentaires qui vont vous permettre d’ajouter de nouvelles fonctionnalités à votre site. En fonction du type de site web et de ce que vous voulez en faire, vous aurez la possibilité de personnaliser votre interface et de créer de nouveaux outils pour vos utilisateurs. Par exemple certains CMS vous proposeront d’ajouter une boutique en ligne, nécessaire si vous voulez créer un site web commercial. 

Multitude de gadgets
Les modules et les extensions permettront d’incorporer une galerie photo ou encore de comptabiliser les statistiques du site. Autant de choix qui, au final, font de votre site web un espace original et facile à administrer. Il est possible d’adapter chaque module selon vos désirs puisque chacun d’eux est généralement paramétrable et bénéficie de plusieurs options.

Nombreux designs personnalisables

En ce qui concerne le design, la plupart du temps les CMS possèdent un outil de gestion des thèmes. Ainsi, d’un simple clic, vous pouvez changer le rendu graphique et passer d’un thème à l’autre. Ces derniers sont généralement téléchargeables sur le net, souvent gratuitement mais parfois aussi à un certain prix si vous voulez bénéficier d’un design « pro ». Mais ne vous en faites pas, de manière générale les thèmes de base disponibles sont clairs et bien conçus. Les utilisateurs plus expérimentés pourront toutefois toujours modifier ou créer leurs propres thèmes puisque le design est dissocié du contenu.

Prend en compte le langage PHP et les bases de données

Pour utiliser la plupart des CMS, vous aurez besoin d’un hébergeur qui accepte le langage PHP et qui fournit l’accès aux bases de données MySQL. L'intégralité du contenu du site sera stocké dans une base de donnée qui peut être au format MySQL ou PostgreSQL.

Les différents CMS

Les CMS en quelques points :

• Crée en janvier 2011
• Publié sous la licence publique générale GNU
• Système de gestion de contenu (CMS)
• Libre et open source
• Ecrit en PHP
• Nombreuses fonctionnalités sont aussi programmées en JavaScript, principalement en utilisant la bibliothèque JQuery.

Drupal parvient à se démarquer

Il existe un certain nombre de CMS gratuits, sous license GPL. Parmis les plus connus, on peut citer « Joomla », « WordPress » ou encore « Xoops ». Drupal est considéré par beaucoup comme l’un des meilleurs, étant très intuitif dans son utilisation, possédant une importante communauté active et proposant des centaines de modules complémentaires. Contrairement à de nombreux CMS, Drupal est codé de manière à être évolutif. Si votre site web s’inscrit dans la durée, il s’agit d’un bon choix étant donné que le système à été conçu pour que les développeurs indépendants puisse facilement réaliser des extensions. Le design de base respecte les standards W3C pour une compatibilité maximale avec tous les navigateurs.

Destiné aux novices et aux confirmés

Très complet, Drupal s’adresse autant aux novices qu’aux webmasters confirmés. Lors des premiers pas, l’utilisation peut paraître déroutante et un peu compliquée comparée à la facilité de « Joomla », cependant le système s’avère rapidement être plus complet. Une fois le principe assimilé, on acquiert une certaine satisfaction à gérer et administrer notre propre site web, que ce soi en ajoutant des modules ou en personnalisant le design

Facile à administrer

Le panneau d’administration permet de configurer absolument tout les éléments du site. Sans compter les innombrables modules dont certains indispensables (Views, CCK…) qui ajouterons de nouvelles fonctionnalités et outils. Chaque élément est représenté par un bloc, positionnable selon vos désirs. Les menus sont facilement paramétrables et il est aisé d’en créer de nouveaux, ou de modifier les liens vers vos « nodes » (pages du site). Conçu pour être un blog collectif, il trouve aujourd’hui des applications très variées : du portail communautaire au site corporate, en passant par l’intranet ou encore le site e-commerce.

Permissions très précises

La création de contenu est à la fois simple et complète. A l’aide du module CCK vous pourrez même créer vos propre type de contenus (Par default : article ou page) et ajouter de nouveaux champs disponibles (exemple l’insertion d’images ou de fichiers dans vos articles).

Les permissions sont paramétrables à l’extrême. Vous pouvez déterminer avec précision qui peut lire tel type de contenu, qui voit tel menu ou encore qui à accès à tel module ou option.

Un référencement efficace

Très utile pour le référencement, Drupal permet d’activer les URL simplifiée, ce qui signifie que vous avez la possibilité d’utiliser des alias pour l’adresse de chacune de vos pages. Vous augmentez ainsi la quantité de mots clef tout en rendant vos adresses plus agréables à lire. L’outil d’insertion de « Tags » pour chacun de vos contenus permet également de participer au SEO (Search Engine Optimisation).

Apprécié des professionnels

La question du meilleur CMS est un débat sans fin, cependant Drupal semble depuis quelques temps faire l’unanimité. Elu grand gagnant des CMS Awards 2007 et 2008 par les professionnels, le système connaît un grand succès et est bien parti pour continuer son expansion.

Chaque CMS a une finalité

Pour créer un simple blog, préférez par exemple «Wordpress », pour un site personnel rapide à mettre en oeuvre, essayez « Joomla », pour un site web complet combinant à la fois l’aspect communautaire, la publication de contenus catégorisés et l’interface personnalisable, Drupal ne vous décevra pas.

Drupal

 Professionnel et communautaire.

- Professionnel car il regroupe l’ensemble des fonctionnalités majeures que l’on peut attendre d’un CMS. Mais aussi parce que son développement s’est véritablement professionnalisé avec une équipe dédiée assurant une réelle dynamique.

- Communautaire car Drupal s’appuie sur une communauté ouverte, composée de milliers d’utilisateurs (intégrateurs comme Smile et indépendants, par exemple), qui contribuent sans cesse à son évolution.

Ces deux aspects font de Drupal un acteur majeur de la gestion de contenu (sites et applications Web). Drupal est un CMS collaboratif et intègre (de base) une gestion de droits d'édition complète et configurable. En fait chaque éditeur peut avoir son propre thème et voit un site différent. Il en est de même pour les utilisateurs enregistrés. C'est un CMS puissant doté d'un système de cache des pages pour un affichage accéléré.

Trois types de contenus sont réalisables

- Les stories sont des billets de blog, des articles.

- Les pages sont des documents de référence et peuvent être gérés différemment des billets, avoir des droits d'édition propres notamment.

- Les books (livres) sont des articles stucturés hiérarchiquement en chapitres dans des pages différentes.

Divers types d'accès

L'accès au site peut se faire à travers le panel d'administration lorsqu'on a les droits d'un administrateur, ou par FTP ce qui permet de charger des modules et des thèmes, ou avec PHPMyAdmin pour la base de données (si l'hébergeur procure cette fonctionnalité).

Vocabulaire propre à Drupal

• Les rôles correspondent au types d'utilisateurs: enregistré, éditeur, administrateur... 
• Les blocks (widgets sous Wordpress) sont des éléments de l'interface que l'on place dans les zones prédéfinies: contenu, panneau gauche, droit, header, footer... 
• Les types de contenus: Book, Page, Story comme on l'a vu. 
• Les modules (plugins sous Wordpress) sont des programmes tiers pour ajouter des fonctionnalités.

 

Parmi les modules populaires on pourra citer

• CCK (Content Construction Kit), permet d’ajouter des champs personnalisés pour vos contenus. Il permet également de créer ses propres types de contenu (magasin, produit, …).

• CTools (Chaos tool suite), permet d’améliorer le développement grâce à la gestion de formulaire avancée, l’ajout de l’Ajax pour les formulaires, la création de simples contenus utilisables dans les panels et bien d’autres.

• Views, permet de faire abstraction de beaucoup de code PHP. Le système de vue repose sur une ensemble de critères, de filtres et d’affichages qui vont générer automatiquement une requête SQL.

• Panels, permet d’ajouter n’impore quel type de contenu (un node, un custom content pane ou même une vue) à un gabarit.

• Block Class, permet d’ajouter une classe CSS à un block pour le styliser facilement.

• Wysiwyg, permet de saisir du contenu html.

• ImageField, permet d’ajouter un champ Upload de fichier.

• i18n, permet différentes améliorations au système natif de traduction de Drupal.

• Admin menu, ajoute une barre de raccourcis en front office, vers les différentes pages de l’admin.

La gestion des url sous Drupal

Toute page d'information mise à disposition par Drupal, bien que stockée dans une base de données relationnelle, possède un URL comme s'il s'agissait d'une page statique. Cela garantit une bonne visibilité de toute l'information publique par les moteurs de recherche d'Internet.

Avantages

• Grande possibilité de personnalisation 
• programmable ensuite 
• Developer friendly 
• Permet de construire des sites complexes 
• CMS qui dispose du plus grand nombre de documents à son sujet

Inconvénients 

• Requiert de l’expertise et de l’experience en CMS 
• Interface complexe à gérer pour les débutants

Sites celebres construits avec Drupal

Le site de la Maison Blanche
http://www.whitehouse.gov/


Amnesty International
http://www.amnesty.fr/

MTV Grande-Bretagne

WEBOGRAPHIE

http://fr.slideshare.net/saveoursmile/drupal-presentation-10312357
http://fr.wikipedia.org/wiki/Drupal
W3Techs (2011-07-15). "Usage of content management systems for websites".
http://trends.builtwith.com/cms/Drupal http://www.access-dev.com/pdf/CMS-comparatif.pdf
http://www.youtube.com/watch?v=yhMZ3ODsDeM

Read More

Les applications pour la creation des sites Web et les extensions pour les développeurs

LES APPLICATIONS POUR LA CREATION DES SITES WEB

Les éditeurs de code

Un éditeur de code (ou éditeur Web) est un logiciel conçu pour faciliter la préparation et la modification de documents écrits en Hypertext markup language (HTML).

Un document HTML est le principal composant d'une page web. Il existe deux catégories d'éditeur :
• Les éditeurs de texte seuls
• Les éditeurs tel-tel (WYSIWYG)

Il existe une multitude de logiciels de ce type, certain sont payants, beaucoup sont gratuits. Nous en citerons une sélection parmis les plus connus.

Les éditeurs de texte

Ces éditeurs éditent directement dans différents langages (HTML, CSS, Java, PHP etc…) : le code y apparaît et y est traité comme du texte. Ils requierent donc une compétence dans ces langages. En contrepartie, ils permettent à un utilisateur compétent de s'assurer de la qualité du document produit.
Néanmoins, il existe différentes aides et assistance au développement.

Les principales fonctionnalités :
- colorisation syntaxique automatique
- Le formatage de texte en charactères gras, italiques, soulignés et colorés;
- L’alignement des textes à gauche, à droite, au centre et justifié;
- La création de liens (URLs) vers des pages Internet;
- L’insertion et la manipulation d’images;
- La création de tableau pour faciliter la disposition des textes et images.
- Vérification du code HTML, conversion en CSS, XML, XHTML (librairie TiDy)
- version gratuite d’un 'éditeur CSS comme TopStyle Lite (permet de créer facilement et avec précision des feuilles de style en cascade que vous pourrez ensuite implémenter sur votre site web. Il est compatible avec les principaux navigateurs internet et comprend un vérificateur et validateur multi-browser. Celui-ci vous alerte des entrées non-valides dans votre feuille de style et vous montre les bugs qui pourraient affecter l'affichage de votre feuille de style)
- correction orthographique
- mise en évidence des parenthèses
- Sauvegarde d’une session pour réouvrir tous les fichiers la fois suivante
- auto-completion des mots clés
- Une trentaine de langages peuvent être supportés en standard tels que Perl, C#, Java, Python, HTML, Ruby, etc…

Les principaux logiciels 

• Smultron — Pour Mac. Conçu à la fois pour ne pas effrayer les débutants et satisfaire les utilisateurs avancés.
- Affichage des caractères invisibles
- Coloration syntaxique gérant beaucoup de langages informatiques
- Division de la fenêtre en deux
- Gestions des blocs
- Gestion des projets
- Indentation intelligente
- Intégration à Quick Look
- Liste des fonctions
- Mise en évidence de la ligne sélectionnée
- Multilingue
- Numérotation des lignes
- Onglets
- Recherche avancée

• Notepad++ 
- Editeur de code source qui supporte plusieurs langages.
- Il utilise la même composante que SciTE (Scintilla).
- Possibilité d'auto-complétion de texte avec certains langages en proposant une liste de fonctions de base utiles. Tout est paramétrable.
- Coloration syntaxique par défaut.
- Distribué gratuitement sous licence GPL.

• PSPad
- Excellent éditeur en mode code sous Windows. Beaucoup de fonctionnalités et détails pratiques. En plus, il est très léger. Il ressemble beaucoup à Notepad++
- On peut lui ajouter des extensions, disponibles sur le site officiel.
- Gratuit, mais propriétaire.
- Il intègre Tidy, ainsi que divers outils spécifiques HTML: compression du code HTML, reformattage, pipette de couleur avec insertion du code RGB, reformattage CSS, import CSV vers HTML, etc.
- La coloration syntaxique peut prendre en compte plusieurs langages dans la même page: HTML, php, Javascript...

• SciTE est un éditeur contextuel, comme XEmacs : pour plusieurs langages de programmation ou types de fichiers, il supporte la coloration syntaxique de la source, l'autocomplétion des mots-clés, la navigation entre les fichiers à l'aide d'onglets, ou encore l'exécution de programmes depuis la ou les sessions d'édition avec aide au débugage. Il convient bien aux langages tels que Perl, C#, Java, Python, HTML, Ruby, etc. Une trentaine de langages sont supportés en standard, l'utilisateur pouvant ajouter le support d'un langage manquant. Il reconnait également le "mélange de langages", par exemple un source contenant du PHP, de l'HTML et des CSS
• Bluefish compatible Linux, Mac et PC.
• Quanta+ (permet également de créer des livrets de documentation). Pour Linux exclusivement
• BBedit Pour les Apple Addict (payant) Le logiciel contient un nombre imposant de fonctionnalités : coloration syntaxique pour de nombreux langages (PHP4, C++, Java, HTML, XML, Javascript, CSS...), rechercher/remplacer sur des fichiers multiples, intégration avec des logiciels externes comme Codewarrior ou Dreamweaver, aperçu des pages PHP sur un serveur local ...
• TextWrangler – Par le même éditeur de BBEdit dont il est une version allégée (et gratuite), cet éditeur autorise la manipulation de texte et l’administration de serveur Unix.
• cssedit — un très bon éditeur de CSS.
• Coda —Editeur de texte et de CSS qui intègre un module de transfert FTP.

LES WYSYWIG

« WYSIWYG » est l’acronyme de la locution anglaise « What you see is what you get », signifiant littéralement en français « ce que vous voyez est ce que vous obtenez » ou de façon plus concise « tel affichage, tel résultat » ou encore « tel écran, tel écrit ».

- Permet de composer visuellement le résultat voulu, typiquement pour un logiciel de mise en page, un traitement de texte ou d’image. C'est une interface « intuitive » : l’utilisateur voit directement à l’écran à quoi ressemblera le résultat final.
- Le code est généré automatiquement.
- Il propose les fonctions classiques des traitements de texte WYSIWYG.
- Ses deux principaux avantages sont la facilité d'utilisation et l'observation immédiate du rendu graphique.
- Ses deux principaux désavantages sont le manque de maîtrise sur la qualité du document HTML produit et les risques d'incompatibilité avec des navigateurs non prévus par l'éditeur (plus récents, plus anciens, ou moins courants).

Les principaux logiciels :

• Dreamweaver (payant) : Un des meilleurs WYSIWYG.
C'est celui qui génère le code le plus propre en mode création, et l'auto-complétion des balises et attributs en mode code est appréciable.
Mais évidemment, le prix s'en ressent.
Si vous ne voulez pas forcément d'un logiciel professionnel, un gratuit conviendra amplement.

Nouveauté CS6 : 
- Ajout simplifié de contenu audio et video
- Importation d’animation standard avec Adobe Edge Animate
- Meilleure prise en charge Jquery mobile (creation d’applications pour terminaux mobiles)
- Meilleure prise en charge de PhoneGap  (pour créer des applications natives Android et Ios)
- Transition CSS3
- Optimisation de l’affichage en direct (utilise la derniere version du moteur de rendu webkit pour garantir une meilleure prise en charge du code HTML5

• KompoZer Il remplace avantageusement Nvu (dont le développement a été arrêté à la version 1.0, en juin 2005) et apporte de nombreuses améliorations.


• BlueGriffon :
- logiciel libre d'édition de pages web WYSIWYG, successeur de Mozilla Composer et Nvu. C'est un logiciel libre multiplateforme sous triple licence MPL/GPL/LGPL développé par Daniel Glazman et fondé sur la plateforme Mozilla.
- Il se démarque notamment par son support du CSS3 et du HTML5.
- Son moteur de rendu supporte la plupart des éléments HTML5 et les propriétés CSS3 compatibles avec Mozilla Firefox, même si l'éditeur génère également des règles de style pour les autres navigateurs web, lorsque cela est possible.
- Il propose de nombreuses interfaces visuelles permettant d'utiliser les propriétés CSS3 sans en connaitre la syntaxe précise, ce qui en fait un excellent compagnon pour le développeur, surtout lorsque la syntaxe des propriétés expérimentales varie selon les navigateurs.
- BlueGriffon a pris en compte les enjeux de l'Accessibilité du Web puisqu'il propose notamment l’ajout de rôles ARIA (Accessible Rich Internet Applications) aux différents éléments présents dans une page web, l'ajout d'un attribut "longdesc" (description longue) pour les images, etc.

• Amaya développé conjointement par l'INRIA et le W3C, pour éditer et publier très simplement des pages contenant du texte (en HTML ou XHTML), du graphique (en SVG) et des expressions mathématiques (en MathML), le tout avec des feuilles de style CSS.

EXTENSIONS POUR LES DÉVELOPPEURS

 Après s'être imposés sur Firefox, les plugins ou modules complémentaires sont aussi rapidement venus enrichir le navigateur de Google et son Web Store. Certaines de ces extensions Chrome ont pu s'imposer en entreprise.

FIREFOX 

 Outil de débogage, validateur, gestionnaire de CSS, de couleurs... Le navigateur de la fondation Mozilla offre une multitude d'extensions pour la conception Web. En voici quelques unes : S'il fallait n'en posséder qu'une, ce serait Firebug.
Manipulation du DOM HTML, des feuilles de style CSS, et du Javascript en direct live, c'est un must. Sans compter l'onglet des requêtes réseau, l'inspection très pratique des éléments par le curseur de la souris, l'affichage en sur-impression des marges, l'exécution de code JavaScript au vol et sa console.

 Vénérable extension plébiscitée depuis les débuts de Firefox, Web Developer Toolbar regroupe en une barre d'outils la plupart des opérations facilitant l'intégration et le diagnostic d'un document: activation/désactivation/édition des CSS, du JavaScript, consultation et modification des cookies, et affichage de nombreuses informations concernant les formulaires, les images et la source ; redimensionnement de la fenêtre du navigateur, ou encore menu de validation W3C directe, il est bien difficile de résumer tout ce que permet ce best-of-all-in-one, chaque menu est à explorer.

 Fireshot permet d'effectuer des captures d'écran de sites, de les copier dans le presse-papier, de les enregistrer en image ou de les retoucher (un peu). On peut prendre en compte la partie visible uniquement (celle dans la zone d'affichage du navigateur) ou l'intégralité de la page (masquée selon la résolution de l'écran). Existe aussi pour Internet Explorer.

 Dust-Me Selectors trouve les sélecteurs CSS inutilisés dans vos feuilles de style, d'après la page consultée en cours ou un ensemble de page au cours d'une visite.

 CHROME

Accès au code source dans le navigateur, test de performance, exécution du moteur de rendu d'IE... Tour d'horizon de huit extensions du navigateur de Google utiles pour le développement.

Déclinaison pour Chrome de la célèbre extension Firefox, Firebug Lite est conçue pour naviguer visuellement au sein des différents éléments que forme une page Web (code HTML, DOM...). L'outil donne aussi la possibilité d'éditer et tester certains éléments de code (typiquement les styles CSS). Comparé à l'originale, Firefox Lite affiche quelques limitations. La Principale d'entre elles : le débogueur JavaScript n'est pas disponible dans la version pour Chrome.

Autre extension Chrome bien utile pour la phase de test d'un site Web, Window Resizer redimensionne la fenêtre du navigateur dans le but d'émuler différentes résolutions d'écran. Trois grands types de résolution sont disponibles : environnements de bureau (Desktop), ordinateurs portables (Laptop/Notebook) et terminaux mobiles (Mobile). Il est possible d'ajouter des résolutions personnalisées à la liste. Window Resizer se révélera notamment utile dans le cadre de développement de sites ou d'applications Web multiplate-forme. Sa principale alternative : Resolution Test.

SpeedTracker fournit un tableau de bord pour suivre la performance d'accès à une page Web. Il détaille les temps d'exécution par composants en temps réel : JavaScript, styles CSS, DOM, requêtes Ajax... Les indicateurs sont représentés sous forme de graphique animé. En matière de test de performance, SpeedTracker est considéré par beaucoup de développeurs comme une référence au sein de la galerie d'extensions Chrome (au même titre que Firebug sur la gestion de code).

Signé Yahoo, YSlow ne se contente pas d'analyser une page web et de fournir des statistiques, il suggère également des pistes pour améliorer les performances. Au programme des points passés au crible : le poids des images et fichiers CSS, des fichiers JavaScript, du contenu HTML, le caractère ou non imprimable de la page, la présence ou non d'un cache Ajax, d'un CDN... Les indicateurs et conseils sont très riches. YSlow est souvent comparé à Google Page Speed : cette extension Chrome proposée par Google propose certains indicateurs en plus (CSS inutilisées, images qui pourraient être plus lourdes...).

Pendule est sans doute l'une des extensions Chrome les plus complètes que nous présentons dans cette sélection. Elle permet aussi bien de visualiser le code source d'une page, et ce en ayant la possibilité d'en sélectionner qu'une partie (HTML, CSS et JavaScript). Mais aussi de visualiser le rendu final d'une page, également de manière sélective. Il est possible notamment de désactiver certains styles CSS, et de faire apparaitre à la demande les composants masqués, les données d'images, les attributs alt... L'outil permet enfin de tester l'affichage en fonction de la résolution, et de s'appuyer sur plusieurs services pour valider la conformité du code.

Centrée sur le débogage de code PHP, l'extension PHP Console génère ses codes d'erreur en se basant sur les librairies Lagger et PhpConsole. Pour les développeurs PHP, d'autres extensions Chrome, également plutôt bien notées, existent. Parmi elles figurent beaucoup d'outils gérant l'accès à la documentation technique (PHP Ninja Manual et PHP Docs-to-go notamment).

Autre extension Firefox adaptée à Chrome; Web Developer permet, à la manière de Pendule, de visualiser les différents éléments d'une page de façon sélective (HTML, images, JavaScript, CSS...). Mais aussi de réaliser des tests en fonction de résolutions différentes. Les référenceurs pourront voir l'ancre des liens, les metatags, les attributs alt des images ou les balises H1, H2, H3, etc. Web Developer pour Chrome est un moins riche que sa version pour Firefox, notamment en termes de localisation d'éléments. La désactivation du JavaScript est impossible du fait des API de Chrome.

Egalement présente sur Firefox, IE Tab est une extension bien utile pour la phase de test des projets Web. Elle permet en effet d'exécuter le moteur de rendu d'Internet Explorer directement dans Chrome. Il est même possible de choisir la version de son choix : IE6, IE7, IE8 ou IE9. Reste une restriction, IE Tab n'est pris en charge que par les versions Windows de Chrome.

Read More

L'hébergement

1. Qu'est-ce qu'un hébergeur Internet ?

A) But de l'hébergement d'un site web

• disponible 24h/24h, 7/7j

• être visible par tous

• avoir une importante bande passante et un espace de stockage.

Héberger un site veut dire le stocker dans un serveur web en uploadant son contenu (dossiers, fichiers, images, etc.) via un logiciel FTP assurant les transferts (download et upload) de fichiers entre client et serveur.

Un serveur n'est qu'un ordinateur connecté à internet 24h/24h et 7j/7J, chargé de transmettre le contenu de votre site aux internautes.
Le principe est simple : un internaute (vous) demande une page via un navigateur (Internet Explorer, Firefox etc.), cette requête (demande) sera transmise au serveur. Un logiciel, généralement 'Apache' va chercher la page demandée dans toute l'arborescence (dossiers, sous-dossiers et fichiers) se trouvant dans le serveur. Une fois trouvée, la page sera transmise au navigateur qui se chargera de sa visualisation.

L'hébergeur s'engage :
Trafic : une bande passante minimale
Disponibilté : le site en ligne 24/24h
Fiabilité (peu de failles de sécurité : virus...)

Responsabilité de l'hébergeur :

Retirer les info illicites lorsqu'elles sont signalées

Déclaration des fichiers de données personnelles (CNIL)

Sur demande du juge, des données peuvent être communiqués (sécurité)

B) Critères de choix

Un hébergeur gratuit peut suffire, tout dépend de ce que l'on veut faire et pour qui...
La plupart des hébergeurs payants offrent des packs tout inclus.

Quelques critères pour choisir son hébergeur Internet :

1. Le coût
2. L’espace de stockage
3. La bande passante / Le trafic
4. Plateforme et serveur Web
5. Achat et transfert de nom de domaine
6. Email
7. Langages de programmation Internet et base de données
8. La sauvegarde des données
9. Le support client
10. Sécurité
11. Référencement, statistiques…
12. Aide à la création de site

Petit glossaire :

La bande passante
Capacité, limite de vitesse à laquelle les données peuvent être transférées entre serveur et le public web.
Quantité d'informations qui transite sur le réseau à un instant donné vers votre site Internet.
Elle est exprimée en Mo par secondes ou en Mbytes par secondes.
Pour un petit site, une bande passante de 1 Mo par seconde suffit.
Pour économiser la bande passante, pensez à réduire le poids de vos pages web, par exemple en limitant la taille des images et en les optimisant pour Internet grâce à des logiciels comme Photoshop.

Le trafic
Volume de données passant entre serveur et le public web sur une période données (un mois) exprimé en Mo.
À ne pas confondre avec le nombre de visites ni avec le nombre de visiteurs.
Il faut tenir compte à la fois des données entrantes, les fichiers que vous transférez par ftp, et des données sortantes, les pages web que les visiteurs téléchargent. On désigne aussi entrant/ sortant  : I/O.
Pour un petit site, un trafic autorisé de 100 Go suffit amplement.
Encore une fois, pensez à optimiser vos pages pour réduire le trafic.

Plateforme et serveur Web
En général, vous avez le choix entre une plateforme Linux/serveur Apache et une plateforme Windows/serveur IIS.
Si votre site Internet comporte uniquement des pages en html, les deux conviennent.
Si vous utilisez le langage Php ou Perl, Linux/Apache est recommandé.
Si vous utilisez le langage Asp* ou .Net, Windows/IIS est nécessaire.
*Asp : ensemble de logiciel développés par Microsoft et utilisé dans la programmation web.

Achat et transfert de nom de domaine
Vérifiez que le transfert du nom de domaine est compris dans l'offre d'hébergement.
Si vous avez déjà acheté votre nom de domaine en passant par un prestataire spécialisé, vous devrez le transférer vers votre hébergeur.

Email
Les hébergeurs proposent souvent de créer un ou plusieurs comptes email associés à votre nom de domaine.
C'est une solution pratique car elle vous permet d'avoir une adresse email personnalisée, associée au nom de votre activité, société ou association par exemple.
Vérifiez que le nombre de comptes email proposé est suffisant pour vos besoins. Si vous êtes une société, pensez qu'il faudra sans doute un compte email par salarié.

Langages de programmation Internet et base de données
La plupart des sites sont faits en langages HTML, parfois en FLASH.
Les langages de programmation comme Php ou Asp permettent d'accéder à une base de données, de stocker des informations sur vos visiteurs ou clients, et de proposer un catalogue de vente en ligne.

La sauvegarde des données
Un hébergement professionnel comprend la sauvegarde des données présentes sur le serveur.
C'est la garantie de préserver votre site en cas de panne grave du serveur.
La sauvegarde s'effectue le plus souvent sur des bandes.
Pour encore plus de sécurité, un système de disques durs montés en RAID est envisageable.
Le "RAID" permet de dupliquer les données en temps réel sur plusieurs disques durs de manière à garantir la pérennité des données si un des disques durs tombe en panne.

Le support client
Ne négligez pas le support client dans le choix de votre hébergeur.
Une cellule de support client réactive et compétente est essentielle pour répondre aux questions que vous vous poserez au quotidien, pour vous aider à résoudre les problèmes auxquels vous serez confronté.
Les personnes compétentes vous aideront à identifier l'évolution de vos besoins en hébergement au fil du temps, à résoudre les petits problèmes, à faire les mises à jour importantes pour garantir la sécurité de votre site.
Pensez que l'administration d'un serveur web est un métier en soi.

Sécurité
SSL, sous le nom TLS (pour Transport Layer Security). C'est devenu l'un des standards les mieux reconnus, au travers du système d'adressage "https://".
SSL/TLS permet de sécuriser le transport d'informations via le Web.

SSH est un protocole de communication sécurisé par chiffrement des données. Il permet une connexion totalement sécurisée entre votre PC et votre site. Avec SSH vous pouvez accéder à votre site et le gérez à distance comme s'il était branché à votre ordinateur. Vous pouvez également gérer vos fichiers sans passer par un logiciel intermédiaire tel que FTP.
SSH est une véritable plate-forme de sécurisation pour toutes formes de communications électroniques.

C) Type d'hébergement

• Hébergement gratuit
• Hébergement professionnel
• Hébergement mutualisé (en anglais mutualized hosting)
• Hébergement dédié (en anglais dedicated hosting)
• Hébergement dédié virtuel
• Colocation (en anglais housing)
• Cloud


• Hébergement gratuit
Les fournisseurs d'accès à internet (FAI) / Diverses sociétés de création de blog.

Le service d'hébergement est souvent rendu en contrepartie de publicités affichées sur le site, soit dans un coin, soit sous la forme de pop-ups. De plus il y a souvent moins d'espace de stockage...
Il est relativement rare de pouvoir mettre en place un nom de domaine avec ce type d'hébergement.
Possibilité de redirection du site sur un nom de domaine plus court et plus attrayant soit via un hébergeur payant soit un organisme proposant des noms de domaines gratuits (V3.com, new.fr, one.com, bzh.bz, maximum.org…)

• Hébergement payant

L’hébergement mutualisé (parfois hébergement partagé )

• Une "portion" de la machine à disposition
• Moins rapide, plus de risques de sécurité
• Beaucoup moins cher
C’est l’hébergement de base d’un site web qui suffit souvent dans la plupart des cas, c’est une offre packagée et prête à l’emploi. On parle de mutualisation, car le site web partage les ressources d’un serveur avec d’autres sites web. Il existe de nombreuses offres d’hébergement offrant plus ou moins d’espace disque, de bande passante, de bases de données...

L’hébergement dédié

• Une machine entière à disposition 
• Plus rapide, plus disponible, plus de stockage
• Plus cher



Hébergeur OVH (ovh.com)


L’administrateur en est responsable et choisi quels programmes et logiciels y installer. Cette solution demande du temps d’administration et des connaissances. Elle est réservée aux clients ayant une audience importante et un fort contenu dynamique.
Si le serveur est capable de gérer 500 connexions simultanées alors elles seront réservées exclusivement à vos internautes.
Si le serveur dispose d’une bande passante à 10Mb par seconde alors elle sera affectée exclusivement à votre site.

Serveur dédié virtuel également appelé serveur virtuel, en anglais, virtual private server (VPS) ou virtual dedicated server (VDS) est une méthode de partitionnement d'un serveur en plusieurs serveurs virtuels indépendants qui ont chacun les caractéristiques d'un serveur dédié, en utilisant des techniques de virtualisation.  Chaque serveur peut fonctionner avec un système d'exploitation différent et redémarrer indépendamment.
Le seul but du serveur physique devient de gérer et de veiller au bon fonctionnement des serveurs virtuels.
Les principales raisons de partitionner une machine physique en plusieurs serveurs dédiés virtuels sont d'améliorer la sécurité (si une des applications est corrompue ou pose problème, les autres applications se trouvant dans d'autres serveurs dédiés virtuels continueront à fonctionner normalement. Cela permet aussi de réduire le prix de revient et le nombre de serveurs physiques nécessaires.

Colocation ou Housing

• La machine appartient au client
• L'hébergeur fournit l'infrastructure, le réseau, la maintenance, la bande passante ainsi qu'un certain nombre de services et de garanties.
Ce type d'offre permet au client d'installer les serveurs de son choix et d'en avoir la totale maîtrise.

Le Cloud Computing est un concept qui consiste à déporter sur des serveurs distants des stockages et des traitements informatiques traditionnellement localisés sur des serveurs locaux ou sur le poste de l'utilisateur. Le cloud computing est l'accès via le réseau, à la demande et en libre-service, à des ressources informatiques virtualisées et mutualisées.

En français : nuage, informatique dématérialisée, stockage dans les nuages, stockage à distance ou encore infonuagique.
Forme particulière de gérance de l'informatique, puisque l'emplacement des données dans le nuage n'est pas porté à la connaissance des clients. Les utilisateurs ou les entreprises ne sont plus gérants de leurs serveurs informatiques mais peuvent ainsi accéder de manière évolutive à de nombreux services en ligne sans avoir à gérer l'infrastructure sous-jacente, souvent complexe. Les applications et les données ne se trouvent plus sur l'ordinateur local, mais – métaphoriquement parlant – dans un nuage (cloud) composé d'un certain nombre de serveurs distants interconnectés au moyen de liaisons ayant une excellente bande passante indispensable à la fluidité du système. L'accès au service se fait par une application standard facilement disponible, la plupart du temps un navigateur web.






2. Avantages et inconvénients

 

	HEBERGEUR GRATUIT	HEBERGEUR PAYANT
Avantages	*Aucun coût donc aucun risque pour débuter dans la création d’un site. *Intéressant pour les blogs  et sites à des fins non professionnelles *Résiliation du compte possible à tout moment	*Choix de l’espace de stockage *Choix entre un hébergement mutualisé ou un serveur dédié *Possibilité de changer d’options et d’offres en quelques clics *Pas de publicités *Choix libre du nom de domaine *Plusieurs options disponibles  *Support de clientèle disponible en cas de problème technique  *Sécurité informatique accrue grâce aux mises à jour régulières de l'hébergeur.
Inconvénients	*Limitation de l’espace de       stockage *Limitation de la bande passante  *Performances moyennes  *Présence de publicités incontrôlables dans la plupart des cas *Nom de domaine peu intuitif et long *Limitation des fonctionnalités *Pas de garantie sur la pérennité du site *Aucun support clientèle  *Possibilité d'utilisation et de revente à notre insu de nos bases de donnés clients, de nos profils...	*Coût  *Délai à respecter en cas de résiliation
Fournisseurs	Free, Orange, Webou...	OVH, 1and1, Mavenhosting...












TABLEAU COMPARATIF DES OFFRES




Hébergeurs gratuits



Hébergeur	Free (FAI)	Orange (FAI)	Webou	11vm	Rezoo
Espace Disque	10Go	100Mo	250Mo	100Mo	20Mo
Nombre de comptes email			5	Aucun	Aucun
Base de données	1 MySQL	Aucun	1 MySQL	1 MySQL	1 MySQL
Options		Aucun	PHP	PHP	PHP
Trafic		illimité		illimité	illimité
Bande passante			10 000 Mo	100 Mbps	illimité
URL	www.free.fr	pages.perso.orange.fr	www.webou.net	www.11vm-serv.net	www.rezoo.fr







Hébergeurs payants (pour l’offre de base)





Hébergeur	OVH	1and1	Mavenhosting	Easy hébergement	1 hébergement.com
Espace disque	25Go	10 Go	70Go	25Go	illimité
Nombre de comptes email	MySQL illimité	10 de 2Go	illimité	5 de 100Mo	illimité
Base de données	1 MySQL	1 MySQL	MySQL illimité	1 MySQL	illimité
Options	PHP, Perl, Python, C	PHP, Perl, Python, C	PHP, CGI, Perl, RoR	PHP, Perl, Python, C	PHP, Perl, Python, C
Trafic	illimité	illimité	illimité	illimité	illimité
Tarif mensuel	1,99€	1,99€	4,99€	1,99€	4,95€
URL	www.ovh.com	www.1and1.fr	www.mavenhosting.com	www.easy-hebergement.fr	www.1hebergement.com




3. Concrètement, comment je fais pour mettre mon site en ligne ?

L'hébergement est une chose à s'occuper légèrement en amont dans un projet de conception de site Web, compte tenu des délais d'activation du compte hébergeur (de 2 jours à une semaine généralement), sauf pour les blogs (hors CMS) et certains créateurs de sites en ligne, ou on héberge directement chez eux dès le départ.
Après avoir choisi son hébergeur selon ses besoins et contraintes (budgétaires, espace de stockage, site statique ou dynamique, pour quel type de public, l'accessibilité du site pour la maintenance et les maj à faire après, soit par le concepteur soit par le client...), ça se fait en 3 ou 4 étapes.


a) Création et activation du compte hébergé

Dans tous les cas il vous faut une adresse mail valide sur laquelle vous seront envoyées vos infos de compte (login et pwd), les liens d'activation...
A noter chez Free, un site web par compte email secondaire associé, en plus du compte principal.


b) Choix du nom de domaine

Choisir sa formule d'hébergement parmi les nombreux packages proposés, si on a jeté son dévolu sur un hébergeur payant.
Certainement que votre site possède déja un nom, mais il faut lui associer un nom de domaine pour que son adresse URL soit complète. Soit on en a déjà un que l'on veut rediriger vers un nouveau prestataire (pas forcément besoin de transférer ses fichiers vers ce dernier), soit il faut l'acheter, soit dans le cas d'un hébergeur gratuit, choisir l'une des propositions la plus claire et la moins pénalisante possible.


c) Joindre une base de données

On vous propose généralement de créer dans la foulée une base de données (nom de la DB, login et pwd), principalement dans le cas d'un site dynamique, mais il vaut mieux le prévoir, si on pense faire évoluer son site ( forum, newsletter, données de formulaire de contact à récupérer, livre d'or...). A noter que la plupart de ces fonctions peuvent être hébergées par d'autres sites, qui fournissent ce service gratuitement.


d) Transfert de ses fichiers

Après activation du compte (et des pages persos dans le cas d'une FAI), il suffit de transférer ses fichiers via un logiciel FTP gratuit: celui offert par l'hébergeur, celui de DW, ou directement en WebFTP ( ftp://ftp.mozilla.org/, http://ftpperso.sfr.fr/, ftp://ftp.chez.com, http://ftpperso.free.fr/) ou un autre à télécharger et à installer (comme Filezilla, CuteFTP, Cyberduck pour Mac.... ). Il faut en revanche penser à récuperer les infos du serveur FTP de votre hébergeur pour la configuration du compte FTP lié à chacun de vos sites que vous voulez transférer.
Le nom de l'hôte du serveur FTP est en effet différent selon votre hébergeur, par ex.: ftpperso.free.fr, ftpperso.sfr.fr, ftp.chez.com, perso-ftp.orange.fr...



Sous DW CS5.5, il faut aller dans Site-->Gérer vos sites-->Editer-->Serveur pour rentrer ces infos :
Renseigner les champs Nom du serveur, Adresse FTP. le Username pour se connecter au compte FTP, choisir le port 21 et le mode FTP pour la connexion, parfois rajouter l'adresse URL du serveur FTP (par ex.http://ftp.chez.com/), ainsi que le mode passif dans plus d'options, pour contourner un éventuel pare-feu.
Le pwd pour raison de sécurité ne le rentrer que lors du lancement de la connexion proprement dite quand on clique sur connect par la suite.


Nb : Pour DW CS4, il faut aller dans Site-->Gérer vos sites-->Modifier-->dans l'onglet Avancé-->Infos distantes-->Accès: FTP
Renseigner l'hôte FTP, le répertoire FTP, le Username, le mode passif.



Exemple de configuration d'un client-serveur FTP (exemple de Filezilla)

Téléchargement et installation

Filezilla permet de mettre rapidement et facilement des données en ligne en vue de mettre des photos ou des fichiers sur internet, pour créer des galeries photos, un forum ou un site web. Contrairement au WebFTP où l'interface est assez pauvre graphiquement, les options de gestion peu nombreuses, et où le nombre de fichiers que l'on peut envoyer simultanément, ainsi que leur poids, est très limité, ce logiciel offre la possibilité à travers une interface assez intuitive: de créer des dossiers, de renommer ou de supprimer des fichiers directement sur le serveur distant ainsi que de modifier les permissions d'accès (le fameux chmod ou change mode) des fichiers en lecture, écriture...tel que le .htaccess (fichier que l'on place dans le répertoire qu'on veut protéger en général.




Téléchargez la dernière version de Filezilla en "setup.exe": Filezilla sur SourceForge. Suivez les instructions d'installation par défaut et lancez l'application. A la difference du .Zip, le programme d'installation vous permettra de choisir la langue francaise si elle existe ( Menu Edit, Settings, Language, Francais).


Configurer un compte FTP dans Filezilla

Aller dans le menu Fichier --> Gestionnaire des sites
Cliquez sur nouveau site (en bas à gauche). Attribuer un nom correspondant à votre site pour la connexion (2). (Vous pourrez ensuite y acceder via le petit ordinateur en haut à gauche).




Maintenant, il faut rentrer les renseignements fournis par votre hébergeur (vous les retrouverez dans votre espace client en ligne en general).




Rentrer l'adresse de votre serveur FTP, comme vu précedemment (par ex. perso-ftp.orange.fr...) au niveau de l'hôte (3), dans le champ du port mettre 21, c'est celui attribué par défaut pour le FTP.
Protocole FTP (File Transfer Protocol) à sélectionner, les autres options concernent le cryptage et le tranfert sécurisé des données.
Il faut sélectionner normal (et non anonyme) pour le choix du logon type (4), ce qui permettra de demander une authentification pour la connexion à votre serveur FTP.
Votre login nom d'utilisateur (5).
Votre mot de passe (recommandé de le renseigner que lors de la connexion, sinon tjrs visible).
Dans les parametres avancés, cocher le mode passif (pour le pare-feu).
Cliquez sur "Enregistrer et Quitter" (6), pour que la configuration, pour cette connexion, soit prise en compte.


Transfert des fichiers sur votre serveur distant (et donc chez votre hébergeur)

Votre site apparaitra toujours dans le Gestionnaire des sites, menu déroulant à côté du petit ordinateur.
En cliquant dessus, vous activez la connexion pour accéder à votre serveur distant. Une fois dans le répertoire de votre serveur, vide par défaut, faire glisser les fichiers que vous désirez transférer depuis l'arborescence de votre PC (Site Local à gauche) jusqu'à la fenêtre de droite, qui représente votre serveur (Site Distant).
Voilà les différentes parties qui devraient composer votre écran :





1) Tout en haut, les étapes de connexion (si c'est vert, ok, si c'est rouge...allo Houston !)
2) Fenêtre de gauche en 2 parties sur le Site Local, les dossiers et fichiers de votre ordinateur
3) A droite, les dossiers et fichiers de votre site sur le Serveur Distant
4) La fenêtre tout en bas, l'état de téléchargements des fichiers sur le serveur ou l'inverse, qui permet de vérifier si tous les fichiers sont bien passés (particulierement utile dans le cas des plugins de CMS à installer).




A la fin de vos transferts, n'oubliez pas de vous déconnecter de votre serveur grâce au petit ordi barré, à côté de la croix.




En ligne, vous pourrez visualiser vos photos/fichiers en tapant directement l'adresse dans votre navigateur: http://login.free.fr, http://login.perso.sfr.fr/, http://login.chez.com/...

N.B: Si vous mettez plein de trucs pêle-mêle (photos, mp3,...), n'ayant aucun lien entre eux sur votre serveur distant, une simple liste de tous vos fichiers, s'affichera sur un fond blanc.
Pour avoir un menu, ou une mise en forme, il faut que vous ayez une page index.html ou .php.

Pour améliorer un peu la présentation de votre site une fois les fichiers mis dessus et qui sont destinés au téléchargement, créer un fichier index.html et mettez quelque chose de ce style dedans :



Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Bienvenue sur mon site de téléchargement!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<a href="monfichier.zip">Nom du fichier</a>

<a href="monfichier2.zip">Nom du fichier2</a>

</body>
</html>
Le <a href="monfichier.zip">Nom du fichier</a>, étant le lien vers votre fichier.
Si vous l'avez mis dans un dossier, par exemple telechargement, le lien sera <a href="telechargement/monfichier.zip">Nom du fichier</a>.
-->
Après, mettre cette page index.html à la racine de votre site (pas dans un dossier).




Webographie :

http://www.hebergement-conseils.com/articles/notions_essentielles_sur_l_hebergement.html

damien.nouvels.net/cours/sites-web/6_HebergementDeSiteWeb.pdf

http://www.buvetteetudiants.com/cours/15/tous-ce-qu-il-faut-savoir-sur-l-hebergement-de-sites-web

http://fr.wikipedia.org/wiki/H%C3%A9bergeur_web

http://fr.wikipedia.org/wiki/Serveur_informatique

http://www.journaldunet.com/developpeur/tutoriel/sec/050719-difference-ssl-tls-ssh.shtml

http://www.100pour100net.com/services/dossier-du-mois/bien-choisir-son-nom-de-domaine

http://fr.wikipedia.org/wiki/Serveur_d%C3%A9di%C3%A9_virtuel

http://fr.wikipedia.org/wiki/Cloud_computing

Read More