Les animations en CSS semblent être un peu hors du cadre pour les débutants en CSS. La philosophie, la syntaxe, c’est complètement différent du CSS de propriété et valeur qu’on connait tous.

Animation en CSS3

Avec les animations en CSS, il faut commencer d’abord par définir les règles Keyframes, qui sont autrement dit, les phases de transitions que votre animation va devoir passer

Et c’est après la définition du keyframes que l’habitude du CSS ordinaire se reprenne. Les propriétés et valeurs.

Tester ce code

Se répéter dans le but d’apprentissage n’est pas mauvais mais dans un cadre professionnel n’est vraiment pas évident si ce n’est nécessaire.

Animate.css

Découvrez avec moi dans cet article animate.css, une petite librairie CSS qui regroupe plusieurs animations utilisable facilement avec l’appelle des classes CSS prédéfinies !

Installation

Tous ce que vous avez à faire c’est d’inclure le fichier animate.css dans le head de votre document HTML et le tour est joué.

Utilisation

L’utilisation est simple. Tous vos éléments ou balises HTML à animer doivent avoir deux classes.

  1. animated
  2. Le nom de l’animation que vous voulez utiliser, à retrouver dans ce lien

Exemple

Tester ce code

Listes de nom des animations

Voulez-vous faire un formulaire d’auto complétion avec HTML5 ? Dans cet article je veux vous présenter comment le faire sans trop d’effort. Habituellement, pour faire une telle chose, on fait recourt au Javascript mais ce dernier a une réputation d’être difficile à prendre à main.

Système d’auto complétion, KEZAKO ?

N’allons pas par quatre chemins, un système d’auto complétion c’est du genre ça

facebook auto complétion

Ou ça

auto complétion google

Bref, cela complète le terme qu’on écrit au fur et à mesure qu’on écrit le terme.

Auto complétion en HTML5

En HTML5, c’est très simple de faire un système d’auto complétion. Avec la balise datalist, vous pouvez lister les éléments avec la balise option de la même manière que ça se fait avec la balise select

Après vous avez besoin d’un input de type text ou search par le quel vous allez indiquer l’attribut list qui aura comme valeur l’id de la balise datalist précédent.

Le code complet est donc

Exemple :


Remarques

Cette manière de faire bien que très simple mais a certains désavantages. Pour par exemple faire un système d’auto complète de données statique, ce système sera suffisant. Par exemple, l’auto complétion des villes, communes; mais quand c’est une base de données dynamiques comme les articles d’un blog ou bien évidemment le cas de Google ou Facebook dans les images ci-haut, malheureusement il n’y a pas de choix que de faire recourt à JavaScript et l’API Ajax. Vous pouvez utilisez cette librairie jQuery EasyComplete qui est facile à mettre en place.

WordPress est sans nul doute le CMS le plus utilisé actuellement. il gagne ce marché surtout pour sa facilité, sa flexibilité et surtout la possibilité de faire son développement localement.

Voici dans cet article comment installer wordpress de manière professionnelle en locale

Installation du serveur web

On va se servir de Apache, Php et MySQL et pour se simplifier la tâche en tous et pour tout, nous allons utiliser un All in One. Je préfère Xamp mais vous pouvez utiliser wamp ou EasyPHP

  1. Télécharger et installer Xamp

Configuration du serveur web

Création de projet

De manière professionnelle, on aura tendance à travailler sur plusieurs projets. Et donc, créons un dossier pour ce projet aussi.

  1. Aller dans C:\xampp\htdocs
  2. Et créer un répertoire avec le nom de votre projet. C:\xampp\htdocs\monprojet

Configuration système

L’environnement local doit chercher à tout pris se ressembler à celui de la production pour éviter les complications lors du déploiement. Nous allons enregistrer un nom de domaine locale correspondant au nom de domaine de production. bref, on évite à tout pris une adresse comme  http://localhost/monprojet. au lieu de ça, avoir un vrai url comme http://monprojet.com mais sans avoir besoin d’internet.

Pour cela :

    1. Copier le fichier C:\windows\system32\drivers\etc\hosts dans votre bureau
    2. Ouvrir le fichier hosts du bureau et ajouter à la fin à la ligne

      Où monprojet.com est à remplacer avec le nom de domaine de votre site en production
    3. Recopier le fichier modifié dans C:\windows\system32\drivers\etc\hosts

Apache

Après avoir développé un site wordpress localement, le plus dure revient à le rendre disponible en ligne. ça demande tant de configuration telle que :

  • Désactiver les plugins
  • Exporter la base de données locale
  • Modifier les urls pour l’adapter au nom de domaine

Bref, il y possibilité d’éviter tout ça dès l’installation locale de wordpress. Pour cela nous allons utiliser les hôtes virtuels d’apache.

  1. Avec Xampp, Ouvrir le fichier C:\xampp\apache\conf\extra\httpd-vhosts.conf
  2. Ajouter ces lignes à la fin

    Cela permet de configurer le serveur pour qu’il puisse, quand on essaye de se connecter sur le site avec nomdedomaine.com, amorcer directement les fichiers qui se trouvent dans le dossier C:\xampp\htdocs\monprojet comme localhost le fait avec C:\xampp\htdocs
    Rappel : Remplacer donc monprojet.com par le nom de domaine de votre site quand il sera en ligne
  3. Redémarrer le serveur web ou arrêter puis relancer celui ci

Téléchargement et installation WordPress en local

Création de la base de données

Pour créer la base de données, nous allons nous servir de Phpmyadmin. Depuis votre navigateur, si vous utilisez comme moi xampp, allez dans http://localhost/phpmyadmin

creation-bsae-données-wordpress

  1. Cliquez dans base de données
  2. Taper le nom de la base de données, généralement on tape le nom du projet comme étant le nom de la base de données
  3. Cliquez sur “créer” pour créer la base de données

Installation WordPress

Rendez-vous dans cette adresse et téléchargez la dernière version de WordPress et :

  1. Décompressez-le
  2. Placez les fichiers extraits dans le répertoire C\xampp\htdocs\monprojet. Faites en sorte que les fichiers et dossiers (wp-content, wp-includes, wp-admin…) soient directement dans le dossier monprojet et non dans le projet wordpress.
  3. Visitez directement http://monprojet.com (à remplacer à ce que vous avez mis dans le fichier hosts) et cliquez sur “C’est parti !”
  4. Complétez les informations en adaptant avec l’image ci-dessous et cliquez sur “Valider”. le nom de la base de données est la base de données que vous avez créée, l’identifiant, c’est l’identifiant du serveur de la base de données, par défaut c’est root et le mot de passe par défaut c’est vide !
    wordpress-local
  5. Dans la page suivante, cliquer sur “lancer l’installation”. WordPress procédera à la création des tables et configuration des paramètres par défaut !
  6. Et dans cette étape, configurez votre site et après vous n’avez qu’à cliquer sur “Installer wordpress”

wordpress local

Félicitation ! Vous venez professionnellement d’installer WordPress localement ! Il ne vous reste plus qu’à vous connecter http://monprojet.com/wp-admin dans votre tableau de bord dans  avec les identifiants que vous venez de choisir ci-dessus.

Conclusion

Très subtile ce qu’on a fait de spécial, mais en réalité, Installer WordPress de cette manière vous fait gagner un gain quand vous voudriez déployer le site ! Vous n’auriez qu”à utiliser votre client ftp et envoyez les fichiers du site chez votre hébergeur et importer la base de données telle qu’elle est localement chez votre hébergeur sans travail additionnel !

Une clé primaire, dans la notion de base de données est systématiquement une colonne qui contient pour chaque enregistrement une valeur non redondante que doit avoir une table. Cela doit identifier chaque enregistrement de manière unique.

phpmyadmin

Vous avez peut-être marre d’utiliser l’auto_increment de MySQL ou tout autre alternative pour d’autres SGBD qui a une forme un peu restreinte et pas sémantique, nous allons écrire notre script en PHP pour customiser cette colonne qui généralement est nommée « id » mais libre de le nommer comme on le veut.

Admettons que vous informatisez une école, un identifiant d’un élève « ELE01 » ou d’un enseignant « ENS01 » serait mieux que d’être simplement « 1 »

On va faire une chose assez simple, nous allons avoir une logique ETUDIANT_ID où

  • ID : est le numéro unique de l’étudiant

Donc, on aura une suite comme ETUDIANT_1, ETUDIANT_2…. ETUDIANT_n…

Concept

Coté logique de notre code aussi on ferra très simple :

Lors de l’enregistrement dans la table, on vérifie d’abord s’il y a une donnée dans la table. Si non, on enregistrement sans problème la donnée avec le numéro unique qu’on aura par default, soit ETUDIANT_1. S’il y a un ou plusieurs enregistrements, on récupère l’id du dernier enregistrement et on l’incrémente.

ETUDIANT_1 n’est pas de type numérique mais bel et bien alphanumérique. Pensez bien à mettre le type de l’id en VARCHAR sinon ça ne va pas bien fonctionner

Schématiquement, cela peut se résumer en ceci :

ordinogramme

Code

Je pense que je n’ai pas à expliquer car le code est commenté et au final, on voit bien que notre système fonctionne très bien et aussi que la requête sql est évidente.

Après vous n’avez qu’à utiliser la variable $increment lors de l’enregistrement comme ceci :

customAI

Cette implémentation n’est pas si mal mais si vous voulez changer la structure de votre clé primaire (par exemple ELEVE01), vous devriez écrire à chaque fois le code correspondant. pas très idéal.

Librairie CustomAI

Raison pour laquelle j’ai développé la librairie CustomAI qui va vous permettre de gagner en rapidité. La librairie n’a fait qu’implémenter la logique qu’on a vue ci-haut.

Exemple d’implémentation de la même chose qu’on a fait mais avec la librairie

Explications :

  1. Dans la ligne 1, rien de compliqué qu’en requirent le fichier de la librairie
  2. J’ai customisé mon masque pour qu’elle prenne une forme à souhait. (plus d’infos)
  3. J’ai instancié la librairie CustomAI avec le premier paramètre, la connexion PDO de la base de données et le second paramètre c’est le nom de ma table, le troisième paramètre qui est la colonne clé primaire de ma table et le 5ème argument, j’ai customisé mon masque pour qu’elle prenne une forme à souhait. (Plus d’infos)

 

L’avantage c’est qu’on a un code réutilisable. Et si on veut pour les élèves, on a simplement qu’à modifier le 4ème paramètre avec « ELEVE(0) ». Pour plus d’informations.

Je suis programmeur, je suis aussi développeur. Comment est-ce possible ? Bah parce qu’il y a aucune différence entre un programmeur et développeur ! Eux tous tapent le code ! FAUX !

Souvent, on parle d’un développeur ou d’un programmeur et fait allusion que c’est la même chose, ce sont juste synonyme, alors que c’est faux parce qu’un développeur peut ou ne pas être programmeur et vice-versa

Concrètement, c’est qui un développeur et c’est qui un programmeur ?

Un programmeur

Un programmeur est celui qui écrit les programmes sur base de spécifications qu’on lui donne. Sur base de la spécification, il écrit l’algorithme en concernant et l’implémente le plus optimisé possible, c’est-à-dire de manière SMART quoi… Bref, un programmeur sait comment écrire un programme, script dans un langage de programmation donné.

Un développeur

Un développeur quant à lui, qu’on appelait aussi analyste-programmeur , est celui qui doit avoir une vision générale sur le projet techniquement parlant pendant que le programmeur se contente d’implémenter sa fonctionnalité. Il connecte les différentes technologies ensembles, il organise les différentes spécifications qu’il aura à donner aux programmeurs pour l’implémentation. Une connaissance minimale sur les technologies en question est importante au développeur enfin de mieux voir grand. Bref, un développeur sait trouver des solutions

Enfin compris ? Mais actuellement si on pose à un développeur s’il est programmeur 80% diront oui parce qu’ils font le développement et la programmation ensemble et vice-versa.