Blog

  • Logiciels de compilation less, sass et compass

    less sass et compassLESS, SASS et Compass sont un langage dynamique de génération de feuilles de style, c’est-à-dire de CSS.

    Pour créer des fichiers CSS à partir de ces trois langages, il faut installer préalablement des logiciels pouvant les compiler.

    Quand j’ai commencé à utiliser le LESS, j’ai utilisé l’application Crunch, que vous pouvez récupérer sur le site crunchapp.net.
    Cette application peut-être installé sur Windows et Mac, et à besoin de Adobe Air pour fonctionner.

    Ensuite, quand j’ai appris à utiliser le SASS et le Compass, j’ai dû changer d’application pour 2 raisons.
    La première était dû au fait que j’utilisais principalement Linux.
    La deuxième était que Crunch ne compilait que le Less.

    Pour cela, j’ai choisi une application multi-plateforme, et qui pouvait compiler les 3 langages.

    Je me suis donc rabattu sur l’application Koala, créé en avril 2013, il en est actuellement à sa version 1.4.3 (en release), et en version 2.0.0 (en bêta).
    C’est une application souvent mise à jour. En plus de compiler pour le CSS, elle compile aussi le CoffeeScript vers le javascript.

    Bien sur, il existe d’autres logiciels pouvant compiler le LESS, le SASS et le Compass.
    Sur Windows, il y a winLess, très rapide à mettre en place.
    Sur Mac, il y a SiteFlow, et Codekit, application toutes les deux propriétaires, et donc payantes.
    Rare sont les applications multiplate-formes, mis-à-part Koala, il n’y a que Simpless actuellement.

  • Les commentaires indésirables sur WordPress, le retour

    Les commentaires indésirables sur WordPress, le retour

    Le 12 août 2013, j’avais fait un article vidéo sur les commentaires indésirables sur wordpress. Dans la vidéo, je vous expliquais comment diminuer les spams dans les commentaires.

    Je vous remet la vidéo ici si vous voulez la revoir :

    Depuis quasiment un mois et demi que j’ai écris cette article, aucuns spams n’est apparu en commentaires. Mais j’ai eu une recrudescence des commentaires indésirables dans le back-office (l’arrière-boutique) de mon WordPress.

    J’ai fait quelques recherches sur internet pour voir si il y avait d’autres techniques qui permettaient vraiment de se protéger contre les spams.

    Dans ces techniques, j’en ai retenu deux :
    1- La première est l’insertion d’un plugin anti-spam. Je pense que le meilleur plugin est  « Growmap Anti Spambot Plugin ». Une fois installé, il suffit de gérer 2-3 options mais de base, il n’y a rien à modifier, mais tout dépend de ce que vous voulez.
    2- La deuxième est l’utilisation de « reCAPTCHA ». C’est un plugin qui a été racheté par Google et il est utilisé par plein de site célèbre. Ce plugin génère aléatoirement des mots et des chiffres lisible seulement par l’œil humain (en temps normal).

    Avec ces 2 techniques supplémentaires, vous devriez être en mesure de recevoir que de vrai commentaires.

    Si vous avez d’autres techniques qui marchent contre les spams, n’hésitez pas à me les dire par commentaires.
    Je ne les considérerai pas comme des spam. Promis 🙂

  • Avoir un player vidéo perfectionné avec l’API de Youtube

    Avoir un player vidéo perfectionné avec l’API de Youtube

    Dans ce tutoriel vidéo, je vous montre comment mettre une vidéo dans une page web.
    La méthode que j’utilise ici est différente de celle donné dans les pages des vidéos de youtube (avec le code iframe).

    La méthode utilisé est donné par l’API de Youtube à cette adresse : https://developers.google.com/youtube/iframe_api_reference

     

    Voici le tutoriel vidéo :

  • Collection A Book Apart : pour ceux qui aime le web

    A-Book-Apart

     

    Cette collection de livre, commencé en 2011, comprend 8 livres en France (et bientôt 10 aux états-unis).

    Le premier livre de la collection est paru quand le HTML5 a commencé à apparaître. Il traite de sujet divers et varié sur les nouveautés et les tendances qui ont suivi le HTML5 comme la stratégie de contenu (web ou mobile), le design responsive, le mobile first.

    Ces livres sont tous très cours (moins de 200 pages chacun), et traitent à 100% du sujet donc ils font l’objet.
    La version 5 du langage HTML et la plus puissante écrite à ce jour et ce que nous pouvons créer avec est énorme. Liée avec d’autres langages comme le CSS3, le javascript et le PHP, le potentiel de création de projet web est illimité.

    Je conseille cette collection à tous ceux qui s’intéressent au Web. Elle est pleine de promesse.

    Ci-dessous, la liste des liens amazon pour les livres de la collection.

    Tome 1 : HTML5 pour les web designers

    Tome 2 : CSS3 pour les Web Designers

    Tome 3 : Stratégie de contenu Web

    Tome 4 : Responsive Web design

    Tome 5 : Design émotionnel

    Tome 6 : Mobile First

    Tome 7 : Metier web designer

    Tome 8 : Stratégie de contenu mobile

  • Faire du code maintenable et évolutif

    code évolutif et maintenableQuand on veut créer un projet de site internet, il faut faire en sorte d’avoir du code maintenable et évolutif. Voici quelques règles à respecter.

     

    Règle numéro 1 : faire en sorte de séparer le CSS, le PHP, et le javascript de l’HTML.
    Le CSS se met dans des fichiers CSS et le JavaScript dans des fichier JS. Les balises <link> et <script> aidant à inclure les fichiers CSS et JS.
    Pour le langage PHP, Le mieux est d’utiliser l’architecture MVC (ou Modèle-Vue-Contrôleur). Il sépare la gestion des données de votre site (Modèle), de l’affichage de ces données (Vue), et du décisionnel (Contrôleur).

    Règle numéro 2 : pour le JS et le PHP, langages dans lesquels on peut créer des variables. Il faut obligatoirement donner des noms compréhensibles à vos variables. Bannir les variables ressemblant à $a ou $b car elles ne savent pas à quoi elles correspondent
    Dans de rare cas, on peut utiliser les variables $i et $j.
    Exemple :

    for ($i = 1; $i <= 10; $i++) {
    echo $i;
    }

    Règle numéro 3 : Par extension de la règle 2, donner des noms compréhensible à vos fonctions.
    Bannir les fonctions  du genre « toto » ou « bigMac ». Choisir les fonctions du genre dateFR (pour une date française) ou dateUS (pour une date anglaise)

     

    Règle numéro 4 : Pour certaines fonctions, posez-vous la question si vous allez le faire en une fois ou en plusieurs fois.
    Imaginons qu’en PHP, vous deviez créer une fonction dateFR() qui affiche « 25/01/2013 » et une autre fonction dateUS() qui affiche « 01/25/2013 ». (voir le code ci-dessous)

    <?php
    function dateFR(){
    // Enregistrons les informations de date dans des variables
    $jour = date("d" );
    $mois = date("m" );
    $annee = date("Y" );
    
    // affiche une date au format FR
    $today = $jour."/".$mois."/".$annee;
    
    return $today;
    }
    
    function dateUS(){
    // Enregistrons les informations de date dans des variables
    $jour = date("d" );
    $mois = date("m" );
    $annee = date("Y" );
    
    // affiche une date au format US
    $today = $mois."/".$jour."/".$annee;
    
    return $today;
    }
    
    echo "Date française : ".dateFR()."<br />";
    echo "Date US : ".dateUS();
    
    ?>

    La moitié du code de chaque fonctions est le même, regroupez ce dans une fonction dateCommun() et appelez cette fonction dans les autres fonctions dateFR() et dateUS(). Comme le montre le code ci-dessous :

    <?php
    function dateCommun(){
    // Enregistrons les informations de date dans des variables
    $jour = date("d" );
    $mois = date("m" );
    $annee = date("Y" );
    
    return array($jour, $mois, $annee);
    }
    
    function dateFR(){
    list ($jour, $mois, $annee) = dateCommun();
    
    // affiche une date au format fr
    $today = $jour."/".$mois."/".$annee;
    return $today;
    }
    
    function dateUS(){
    list ($jour, $mois, $annee) = dateCommun();
    
    // affiche une date au format US
    $today = $mois."/".$jour."/".$annee;
    return $today;
    }
    
    echo "Date française : ".dateFR()."<br />";
    echo "Date US : ".dateUS();
    
    ?>

    A partir du deuxième code, vous améliorez grandement la qualité de votre code.

     

    Règle numéro 5 : commenter votre code, pour n’importe quel langage aussi facile soit-il (CSS, javascript, php, …).
    il y a 2 raisons pour cela :

    • Si vous ne touchez pas à votre code pendant un certain moment. Cela vous permet de le reprendre plus rapidement et facilement.
    • Si quelqu’un reprend votre code, il peut comprendre facilement ce que vous avez fait.

    Vous pouvez voir les exemples de la règle 4. Je les ai commenté.

     

    Règle numéro 6 : réduire au maximum le code utilisé.
    Si vous pouvez faire en une ligne ce que vous faites normalement en 2 ou 3 lignes, et que votre ligne est compréhensible, faites-le !
    Cette règle peut faire la différence quand il y a beaucoup de trafic sur votre site (plusieurs centaines de personnes au même moment.

     

    Règle numéro 7 : Pour les parties communes à toutes vos pages (par exemple le header, le menu, et le footer).
    Il faut faire une page spéciale pour chacune de ces parties et appeler ces parties en faisant des inclusions (avec PHP).
    Voici un exemple en image :
    inclusion-PHP
    Faire des inclusions vous fait gagner de la place dans chacune de vos pages. Et si vous faites une modification sur une de ces trois parties, la modification se fera sur toutes les pages de votre site appelant cette partie.

     

    Règle numéro 8 : Avec le CSS, utiliser des langages dynamique comme le Less, le SASS ou le Compass. Ces langages génère le CSS, et vous font gagner du temps.
    Le volume de code à maintenir est moindre grâce aux variables, aux fonctions et aux mixins.
    Des bibliothèques connu ont été créé à partir de ces langages, comme Twitter Bootstrap.

     

    Règle numéro 9 : Avec le JavaScript, il existe aussi un langage dynamique : le coffeescript. le javascript généré à partir du coffeescript est lisible et le volume de code à maintenir est moindre que si vous l’aviez fait à la main.

    J’ai réussi à trouver 9 règles pour faire du code maintenable et évolutif. Si vous avez des règles qui ne sont pas listé ici, vous pouvez me les donner en commentaire.