Plus le temps passe et plus votre site consomme de bande passante ? Et oui, c’est le risque à prendre lorsque l’on devient populaire !
Voici donc quelques astuces pour réduire votre consommation de bande passante et, par le biais de quelques optimisations, accélérer la vitesse de votre site pour le confort de vos visiteurs.
L’optimisation fait partie d’un tout : images, code, feuilles de style, requêtes SQL… tout joue sur la navigation et la réactivité du site.
Aujourd’hui, je vous parle du Web 2.0, le sésame de toutes les nouvelles startups qui veulent effectuer une belle levée de fonds et capitaliser leurs idées.
Les médias se sont également emparés du terme et l’utilisent souvent à tort et à travers dans leurs reportages.
Voici donc quelques réponses qui vous permettront d’illuminer un dîner sur les nouvelles technologies.
Avant le Web 2.0, l’utilisateur était en contact frontal permanent avec sa machine et ses applications, Internet était bridé au débit maximum de sa ligne RTC ou RNIS, les sites étaient laids avec du HTML box-model mal dégrossi et non-optimisé pour un rendu uniforme dans chaque navigateur.
Les pages étaient statiques, rarement mises à jour et il n’y avait aucune interaction entre le créateur de la page et ses visiteurs. Sommairement, le Web 1.0 était souvent lent, laid et pas du tout user-friendly.
Le Web 1.5 commence la scission entre apparence et contenus et les sites deviennent dynamiques grâce à l’utilisation de PHP et de bases de données SQL. Le visage du réseau commence à se modifier.
Web 2.0
Le Web 2.0 – à prononcer “Web two point Oh” si on veut être vraiment in – est une nouvelle manière de concevoir Internet et l’environnement applicatif de l’utilisateur.
La première conférence Web 2.0 a lieu en octobre 2004, organisée entre autres par O’Reilly : le Web doit devenir une plateforme à part entière et les applications doivent disparaître au profits de services web équivalents et gratuits.
Les applications deviennent ainsi services nomades, accessibles partout dans le monde sur Internet.
Ces services web ne sont plus des versions définitives mais revendiquent un statut bêta (quasi permanent pour certains services comme Gmail), ce qui leur permet d’évoluer sans se soucier des numéros de version.
Les sites deviennent portails où se créent et se regroupent des communautés d’utilisateurs qui partagent des passions communes. Nous assistons à la naissance des réseaux sociaux comme Slashdot ou – plus “Web 2.0-ish” – Digg.
L’interaction est valorisée par le biais de commentaires (user-generated content) et d’un système référençant les sites qui échangent des liens entre eux (pingbacks et trackbacks).
Les contenus se syndiquent et s’agrègent grâce aux flux RSS, Atom et autres microformats; le contenu est séparé de la présentation grâce à l’utilisation d’un balisage XHTML et CSS sémantiquement valide.
Les rafraîchissements de page sont limités grâce à l’utilisation d’AJAX (Asynchronous JavaScript And XML) basé sur l’objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web et du Javascript pour afficher et interagir dynamiquement avec l’information présentée.
Les pages sont désormais étiquetées (“tagguées”) par folksonomie afin de faciliter le rapprochement de contenus semblables et les adresses (URL) sont plus parlantes et permettent à l’utilisateur d’identifier rapidement la cohérence des résultats d’un moteur de recherche par exemple.
Enfin, l’interopérabilité et le respect des standards W3C est de mise, l’utilisateur doit rester maître de ses données et il doit lui être aisé de rentrer et de faire sortir des informations du système.
Le Web 2.0 a bien évidemment ses limites et trop le considèrent encore aujourd’hui comme la panacée universelle, lui attribuant tout ce qui est arrivé de bien sur Internet depuis 2004. Cela est faux bien entendu et le fait d’entendre le terme “web 2.0” à toutes les sauces tend à agacer rapidement… il faut savoir faire la part des choses.
Le Web 2.0 a simplifié pas mal de choses pour l’utilisateur et a embelli notre vision d’Internet. Cependant, ce n’est pas lui qui est à l’origine de tout ce que nous connaissons et utilisons aujourd’hui.
Ceci étant dit, les designs Web 2.0 sont extrêmement jolis à regarder/utiliser : designs arrondis aux couleurs brossés, légers reflets, mariage des couleurs… le Web 2.0 c’est un style plus professionnel.
Savez-vous qu’il est possible de changer la manière dont Firefox présente ses menus, ses barres d’outils et même l’emplacement des boutons de navigation en changeant seulement quelques lignes de code dans un fichier CSS ?
Vous pouvez réorganiser pas mal d’éléments en quelques secondes seulement.
Voici un petit mode d’emploi en 4 étapes.
Rendez-vous dans le dossier de votre profil Firefox qui se trouve à l’emplacement C:\Documents and Settings\*username*\Application Data\Mozilla\Firefox\Profiles\*chaîne_aléatoire*.default\Chrome\.
Vous trouvez un fichier qui s’appelle userChrome-example.css, renommez-le en userChrome.css.
S’il n’existe pas, créez-le. Votre fichier CSS est maintenant prêt à être édité.
Une fois que l’on a fini de designer son site pour que tout le monde puisse le consulter et admirer vos talents d’artiste vient le moment de penser à la manière dont votre site est rendu lors de l’impression.
En effet, votre site n’est jamais imprimé sur une feuille tel que vous le voyez à l’écran. Si votre design utilise les feuilles de style (CSS), il suffit d’en créer une destinée à l’impression.
Faîtes une copie de la feuille CSS de votre site et nommez-la print.css par exemple.
Décidez ensuite quelles sont les parties qui sont superflues lors d’une impression papier : les menus peuvent être ignorés, tout comme les images de fond :
/* désactivation des menus pour l'impression */
.menu-right {
display : none;
}
.menu-left {
display : none;
}
Code language: CSS (css)Petit coup de flip tout à l’heure : j’étais en train de modifier une de mes feuilles de style avec l’interface des styles de WordPress lorsque tout à coup, bam ! WordPress me rejette sur la page de login.
Je rentre mes identifiants, valide : re-login. Tiens, c’est étrange cela. Je réessaie : re-login.
Cela commence à cogiter : quelqu’un aurait-il trouvé mon mot de passe, eu accès au compte et changé mes données de connexion. Assez peu probable tout de même.
Je demande donc un reset du mot de passe, que je reçoit par mail quelques secondes plus tard. Login, nouveau mot de passe, validation. Et re-login.
Décidément, je ne sais pas ce que je lui ai fait à mon WordPress mais il a l’air de m’en vouloir.
Et voilà, nous venons de terminer la troisième et dernière journée TICE de l’année. Je dois avouer que j’ai été agréablement surpris par les contenus de la formation : enfin du concret avec les ordinateurs. Bon je l’avoue, j’ai survolé certains contenus comme la création d’une page HTML mais d’autres ont sérieusement piqué ma curiosité. Les webquests, par exemple, me semblent être un très bon moyen d’insérer les nouvelles technologies dans le cours d’anglais : recherches sur Internet, sélection des informations pertinentes, création d’un panneau pour afficher en classe, compte-rendu oral. Tout se tient. L’essentiel est de bien détailler chaque étape : le professeur doit s’effacer et constater les progrès autonomes de l’élève. Cela me parle bien ce genre d’activité.
Le formateur – tuteur de Ben au demeurant – touche sa bille. Sérieusement, on voit qu’il aime cela et qu’il sait de quoi il parle, ce qui est toujours agréable. Par contre, j’émets quand même quelques réserves sur l’intérêt de tenter d’apprendre à la majeure partie du groupe le langage HTML et les CSS. Cela m’a semblé un peu overkill : bien sûr que cela serait génial si tout le monde pouvait coder ses pages à la main, même les CSS mais sérieusement, combien le feront ? J’ai eu l’impression que l’on dépassait largement le cadre des TICE en cours d’anglais pour s’approcher du côté obscur du code.
Bien, j’ai finalement trouvé la solution pour faire disparaître la barre de défilement horizontale (horizontal scrollbar) sous Internet Explorer. Pas besoin de toucher aux marges ou d’ajouter des divs imbriqués, il suffit de rajouter cette ligne dans votre fichier CSS :
html { overflow-x: hidden; }Code language: CSS (css)Quand je pense que j’ai quasiment réécrit tout le code CSS alors qu’une ligne de code suffit pour que tout rentre dans l’ordre…
Enfin, maintenant que cela fonctionne avec tous les navigateurs, j’ai défini le thème LSD comme le style par défaut de ce blog – vu que c’est celui que j’utilise depuis déjà pas mal de temps – et puis, cela donne un petit coup de jeune à la présentation générale. ^_^
J’ai aussi modifié le filtre anti-spam : désormais, les commentaires sont ouverts sur tous les posts, même les plus vieux dans une limite de 500 jours contre 100 auparavant.
Et en 2 jours, ce que j’avais prédit est finalement arrivé : j’ai maintenant plus de commentaires que de posts – yay ! ;-). Alors comme ça on aime les tutoriels hein ? Bon, je vais voir ce que je peux vous mitonner pour satisfaire votre soif de découverte…
J’en avais un peu marre de la présentation du blog en gris et rouge : j’ai donc travaillé sur un nouveau design le week-end dernier pour pouvoir le tester sous toutes les coutures cette semaine. Aujourd’hui marque donc la venue du nouveau look LSD.
Il n’y a rien de psychédélique du tout, c’est juste le seul nom qui m’est venu à l’esprit lorsque j’ai eu fini de jouer avec ma feuille de style – l’histoire du LSD est cependant intéressante.
J’ai repris le gris et abandonné le rouge qui commençait à me fatiguer les yeux : le thème est donc un peu plus bleuté et la rubrique “about” a enfin été ajoutée (remarquez, j’ai mis un an avant de me rendre compte qu’elle manquait à l’appel…), je l’étofferai lorsque je serai un peu plus inspiré ;-).
Le petit plus : j’utilise maintenant un header qui change aléatoirement à chaque lancement d’une des pages du blog. C’est plutôt sympa, j’ai même ajouté des photos qui n’ont peu (ou même pas du tout) de rapport avec le blog, juste pour varier les plaisirs. La largeur du blog a également été réduite, ce qui améliorera la lecture sur les grands écrans. Lecture parfaite sur un 17″, okay sur un 15″ d’après mes tests.
Il y a juste quelque chose qui me chiffonne un peu : IE. Bah oui, évidemment cela fonctionne sans problèmes avec Firefox, Opera et même Netscape mais IE m’affiche une scrollbar horizontale pour moins de 3 d’une dizaine de pixels qui dépassent. J’ai cherché tant et plus, pas moyen de trouver la ligne qui produit ce phénomène sans tout casser dans les autres navigateurs.
Je réitère donc mon (éternelle) requête : si vous lisez ce blog, faîtes-le avec un navigateur qui respecte les standards du Web. Sérieusement, c’est vraiment important pour tous ceux qui créent des designs. En plus, vous y gagnerez au change.
Voilà. Ah oui, j’oubliais : vous pouvez toujours revenir au look précédent grâce au Theme Switcher qui se trouve tout en bas du menu.