Ah, ce moment magique durant lequel tu constates que ta note PageSpeed monte à 99%, via GTmetrix :
C’est beau, sachant qu’au niveau CSS, c’est la barre WordPress du haut qui génère l’overhead.
Prochaine étape : mettre les fichiers statiques sur un sous-domaine cookieless.
Il y a quelques mois, je me suis amusé à transformer mon script javascript maison qui me permet d’afficher certaines zones de textes sur le site, notamment dans les articles de la catégorie Music/Séries.
Étant donné que jQuery est présent sur toutes les pages du site, j’ai adapté le script pour qu’il utilise jQuery. Cela fera aussi une librairie maison de moins à maintenir (et à charger).
J’écris pas mal de code afin de répondre à mes besoins sur le site, le but étant de me simplifier la vie au maximum.
Dans certains articles, il existe des zones de textes qui ne sont pas tout public et qui nécessitent une authentification préalable à leur lecture. La zone de texte doit apparaître lorsque l’on clique sur un des liens présents dans l’article.
Pour voir ce script en action, il suffit de cliquer sur ce lien.
toggle().
Il m’est arrivé plusieurs fois de ne pas pouvoir afficher une image en arrière-plan (background image) en CSS et cela tout simplement parce que le code CSS doit être écrit dans un certain ordre, notamment lorsque l’on utilise la syntaxe courte.
Alors voilà : imaginons que nous voulons créer une DIV ayant pour identifiant “banner”. Nous voulons que cette DIV affiche l’image background.png.
Il faut commencer par mettre l’URL de l’image entre guillements puis la position horizontale, ensuite la position verticale et enfin la répétition de l’image ou non.
Exemple en utilisant la propriété background (short-hand syntax) :
#banner {
background:url("background.png") center top no-repeat;
}
Je me suis rendu compte en rédigeant mes articles sur l’installation du serveur dédié que le code bash, lorsqu’il était un peu long, n’allait pas à la ligne automatiquement.
Il était écrit d’une seule ligne dans son conteneur, forçant une barre de navigation horizontale bien disgracieuse… Heureusement, cela est maintenant une chose du passé.
Le code est affiché sur le site avec la balise pre, qui permet l’affichage d’un texte pré-formaté.
Or la particularité de cette balise est qu’elle désactive le retour à la ligne. Voici une astuce en CSS pour contre-carrer cet effet indésirable.
/* Forcer le retour à la ligne de la balise PRE - skyminds.net */
pre {
white-space: pre-wrap; /* CSS3 */
}
Il y a eu assez peu de changement dans le design de SkyMinds.net en 10 ans : je dirai qu’il y a eu 5 ou 6 versions “majeures” en tout. Vous aurez sûrement remarqué que je m’attache facilement à un design particulier (que je finis par hacker jusqu’à l’os !). Hé bien pour ce dixième anniversaire, je voulais quelque chose qui résume le site, qui colle un peu plus au nom de domaine et qui soit un peu plus identifiable.
Un article en guise de remerciements pour Matt qui avait, à ma demande, rédigé un petit guide sur la mise en ligne d’un site internet. Armé de ses précieux conseils, j’ai donc lancé les opérations.
Le plus simple : aller sur le site d’un hébergeur qui peut aussi enregistrer un nom de domaine. Il n’a fallu que quelques minutes pour créer www.question-college.fr et le faire héberger.
Toutes les informations ont été envoyées par mail : les codes pour accéder aux écrans de gestion de l’hébergement du site, pour transférer les fichiers par FTP, pour configurer les adresses mail liées au site…
Bon. Voilà. Mais c’est le grand vide. J’ai fait le choix de SPIP, que je connais un peu, puis je me suis mis à l’écriture du squelette. Pas simple, parce qu’il a fallu que je me remette au HTML et au CSS…
J’ai donc dû réapprendre à lire à l’aide de squelettes disponibles et me suis principalement inspiré du travail d’Alternatives, que j’ai ensuite largement modifié et adapté quand j’ai commencé à apprendre à écrire.
Et voilà le résultat !
N’oubliez pas de tester le tout en local. Il suffit d’installer un logiciel comme EasyPHP et le tour est joué. Pour ma part, j’ai testé, testé , retesté, modifié – contraint et forcé… grâce à mon FAI qui n’a rien trouvé de mieux à faire que de faire une énorme bourde qui m’a privé de connection du 30 juillet au 12 août !
Reste le plus difficile : donner un contenu à question-college.fr
Ce site abordera toutes les questions concernant le collège. Je vais commencer à écrire, mais je souhaite que d’autres se joignent à moi.
Aussi, je vous invite à faire un petit tour sur le site et à me contacter.
Il y a quelques jours, j’ai été confronté à un bug d’affichage du champ de recherche du site : le champ était trop large et débordait sur le design du site.
Ce bug avait été constaté par Agat il y a plusieurs mois mais comme je ne l’avais jamais constaté, je ne savais comment le résoudre.
Et bien la solution est toute simple ! Lorsque l’on crée un champ texte, on a l’habitude de faire comme ceci :
<label for="recherche">Login:</label> <input id="recherche" tabindex="10" name="recherche" size="15" type="text" value="" />En fait, la déclaration size="15" ne définit que le nombre de caractères visibles (ce que vous pouvez écrire) dans le champ. Cela ne définit donc pas la taille du champ en lui-même.
J’ai eu l’occasion récemment d’écrire un formulaire de contact ainsi que son traitement PHP pour une entreprise de construction canadienne qui cherche à recruter du personnel.
Je commence à écrire le code. Je connais bien les formulaires étant donné que c’est l’un de mes premiers scripts (2001 si je ne m’abuse).
Je place le script sur mon serveur, commence ma batterie de tests histoire de pallier toutes les situations auxquelles un utilisateur lambda peut être confronté. Le code que je livre est en en CSS3 et HTML5 valides.
Tout s’affiche impeccablement dans tous les navigateurs. Je me dis que c’est une affaire qui roule lorsque le client m’envoie quelques emails pour me demander quelques corrections, additions, et l’intégration du script dans son site.
C’est là que le vent a commencé à tourner.
Je viens d’effectuer une jolie petite optimisation qui devrait bien alléger le serveur sur lequel nous tournons. Vous vous souvenez de l’article WordPress : réduire le nombre de requêtes SQL des thèmes, écrit il y a quelques mois ?
Et bien il se trouve que j’avais tout optimisé tous les fichiers de mon thème – sauf le menu du site qui se trouve dans le fichier header.php !
Ce dernier contenait quasiment une trentaine de requêtes SQL destinées à obtenir les permalinks des pages statiques…
Je m’étais dit à l’époque que si je changeais le permalink d’une page, cela se reflèterait immédiatement dans le menu. Quand j’y pense aujourd’hui, c’est vraiment ridicule.
Il y a eu pas mal de changements sur le site depuis quelques jours et même s’ils sont invisibles à l’oeil nu, il y a eu des ajouts progressifs de fonctionnalités importantes qui peuvent vous faciliter la navigation.
Tout d’abord, un nuage de tags a été ajouté dans la barre de droite. Cela peut permettre de retrouver des articles par mots-clés, qui sont souvent plus “parlant” que le nom des catégories.
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.
