Le Blog

Le blog laboratoire de F.L.D. Studio
0

Laravel 4.1

Le dossier L41

Le dossier L41

Le site : L41

La sortie de la version 4.1 du framwork PHP Laravel à été l'occasion de le tester en profondeur. Pour cela nous avons développé un site Internet et son back-office : le dossier L41.

Son étude et la conception du code on été élaboré sur une période de 2 mois. Cela correspond à une courbe d'apprentissage plutôt courte sachant que beaucoup d'autres composants ont aussi été mis en oeuvre. Le but du site étant justement de détailler l'ensemble des briques logiciels (toutes Open Sources) qui ont permis de le construire.

Comme on le constate, l'élaboration d'un site Internet et avant tout constitué de l'assemblage de multiples ressources que l'on fait fonctionner ensembles.

La première impression est que la version 4 constitue une version majeure de ce framwork. A partir de cette fondation très solide l'avenir du produit semble assuré auprès des 'artisans' du Web que sont les développeurs. Simple à utiliser et à comprendre, très complet, robuste, permissif et relativement rapide à l'exécution, Laravel reste mon outil de conception préféré pour tous les projets de développements professionnels pour l'Internet. Le buz autour de LARAVEL me semble donc tout à fait justifié. Il devient plus aisé aujourd'hui de trouver des ressources et des tutoriels et il est tout fait possible de se former tout seul.

Webapp

Le site intégre une mini-web application, pretexte à l'utilisation des API de Google DRIVE. Elle démontre qu'il est tout a fait possible de downloader un fichier issu du site directement dans le DRIVE de l'utilisateur ou de Uploader un document local sur celui-ci sans sortir de l'application.

Webapp Landing page

Une fois enregistré l'utilisateur peut gérer son profil et tester l'application.

Webapp

Le Back-Office

le site est entirement administrable à cette adresse : http://www.flds.fr/l41/public/admin/auth/login

Un aperçu de la page Tableau de bord du Back-Office

L41 - Back-office - Tableau de bord

Pour information, voici l'URL utilisée dans le tableau de bord pour la comparaison des recherches de Framwork PHP : http://www.google.fr/trends/explore?hl=fr#q=laravel,+codeigniter,+cakephp,+symphony+2&date=1/2011+48m&cmpt=q

Catégories: Développement WEB

Commentaires: Pas de commentaires

0

Grunt

Workflow de développement Web

Logo Grunt

L’intégration web est une discipline qui reste encore très artisanale. De nombreuses manipulations sont necessaires pour vérifier le code, concatener les fichiers, les minifier et les distribuer sur un serveur en ligne. Tout ces processus demandent du temps et surtout une grande attention, voir concentration de la part du développeur qui en à la charge le plus souvent. Tout ce temps et cette energie sont perdues pour le développement du code du projet lui-même.

Grunt

Une solution : Grunt, le planificateurs de taches. Après avoir consulté la vidéo de Grafikart et son  tuto sur le sujet, une fois de plus grace à lui tout devenais lumineux et surtout simple.

Les pré-requis à l'utilisation de Grunt :

Intaller  NodeJS

  • Se rendre sur le site de NodeJS : http://nodejs.org/
  • Cliquer sur le gros bouton : INSTALL
  • C'est tout !

Installer Grunt

  • Ouvrir une console ( cmd )
  • Taper : npm init pour créer un fichier de configuration. Répondre aux questions. Cela va créer un fichier : package.json et un dossier node_modules dans le dossier du projet.
  • Compléter l'installation en tapant :
  •             
    npm install -g grunt-cli
    
    
  • Cela va installer Grunt en mode ligne de commande.
  • Vérifier que cela fonctionne en tapant : grunt
Utiliser Grunt

Par défaut Grunt et installé sans aucunes taches. L'intégration d'une tache incombe au développeur qui fait son marché sur le site de Grunt à l'aide de la page Plugings .

Les plus courrant sont :

  • grunt-contrib-jshint , permet de vérifier la syntaxe de votre code
  • grunt-phpcs , permet de vérifier que le PHP respecte les normes (PSR)
  • grunt-contrib-imagemin , pour optimiser les images
  • grunt-text-replace , permet de remplacer du texte
Installer un plugin

Une fois le plugin trouvé, il faut l'installer pour Grunt.

La page du plugin fournit toutes les informations necessaires. En général il suffit de taper :

    
npm install nom-du-pluging --save-dev
    

L'option --save-dev permet d'enregistrer le pluging dans la variable devDependencies du fichier package.json A noter que pour reutiliser Grunt à partir d'un autre poste ou pour un autre développeur il suffira de disposer de Grunt, du fichier package.json et de taper : grunt, toutes les dépendances et les plugins seront installé de nouveau dans le dossier du projet.

Une fois installé il faut déclarer l'utilisation du pluging dans le fichier Gruntfile.js (à la racine du projet)

        
// La tâche par défaut qui va s'éxécuter lorsque l'on tape "grunt" dans le terminal grunt.registerTask(
        
        
'default', [ 'nom-du-pluging' ]);
    
Pour finir, toujours dans le fichier Gruntfile.js on paramétre le pluging.
Exemple d'un fichier Gruntfile.js contenant plusieurs plugings et une tache par défaut.
module.exports = function(grunt) {
 
 
    grunt.initConfig({
 
        // Ici le code de nos plugins
        
        // Configuration du plugin JsHint
        // Les fichiers fld.js et main.js dans le répertoire js seront
        // testés, la tache s'arrete en cas d'anomalies trouvés dans le code
        jshint: {
          all: ['js/fld.js','js/main.js' ]
        },
        // Configuration du plugin UglifyJS2
        // Les fichiers fld.js et main.js dans le répertoire js seront
        // minifiés et concaténés pour produire le fichier
        // js/min.js
        uglify: {
            dist: {
                files: {
                    'js/min.js': ['js/fld.js', 'js/main.js']
                }
            }
        },
        // Configuration du plugin CssMin
        // Les fichiers bootstrap.css,bootstrap-responsive.css et extras.css dans le répertoire css seront
        // minifiés et concaténés pour produire le fichier
        // css/min.cs      
        cssmin: {
            combine: {
                files: {
                    'css/min.css': ['css/bootstrap.css', 'css/bootstrap-responsive.css', 'css/extras.css']
                }
            }
        },
        // Configuration du plugin ImageMin
        // Les fichiers images .png et .gif
        // seront optimisé dans le dossier 
        // img/min
        //  ATTENTION : Cette version ne sait pas traiter les .jpg
        imagemin: {
            dist: {                           // Another target
            files: [{
              expand: true,                   // Enable dynamic expansion
              cwd: 'img/',                    // Src matches are relative to this path
              src: ['*.{png,gif}'],           // Actual patterns to match
              dest: 'img/min/'                // Destination path prefix
            }]
          }
        },
        // Configuration du plugin ftpush
        // Pousse les fichier sur le serveur via ftp
        // Utilise le fichier .ftppass pour les paramétres de connexion.
        // lancer la tache en tapant : grunt ftpush       
        ftpush: {
          build: {
            auth: {
              host: 'ftp.flds.fr',
              port: 21,
              authKey: 'fld'
            },
            simple: true,
            src: '.', // le dossier courrant ou src: 'path/to/source/folder'
            dest: '/www/cv',
            exclusions: ['./**/.DS_Store', './**/Thumbs.db', '.ftppass','.grunt','node_modules', 'js/z-nocopy','z_nocopy', 'dist/tmp']
            //keep: ['/important/images/at/server/*.jpg']
          }
        }          
 
    });
 
    // Ici on indique quel plugin on utilise
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');    
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-ftpush');
     
    // La/Les tâche(s) par défaut qui va s'éxécuter dans l'ordre lorsque l'on tape "grunt" dans le terminal
    // Ici on défini une tache dont le nom est : default et qui va lancer plusieur plugin dasns l'ordre demandé.
    // sinon taper le nom de la tache à effectuer : grunt nom-de-la-tache
    // exemple : grunt cssmin
    grunt.registerTask('default', ['uglify', 'cssmin', 'imagemin']);
 
};
Exemple du fichier package.json correspondant aux plugings installés.
{
  "name": "CV",
  "version": "0.1.0",
  "description": "Mon CV en ligne",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-cssmin": "~0.7.0",
    "grunt-contrib-jshint": "~0.8.0",
    "grunt-contrib-imagemin": "~0.4.1",
    "grunt-contrib-ftpush": "~0.3.2"
  }
}
Utiliser Grunt

A partir de cette configuration l'utilisation de Grunt va être très simple.

Si on souhaite concaténer les fichiers CSS et JS, minifier le JS, optimiser les images en une seule opération taper juste : grunt , il executera alors tous les plugins définis dans la tache nomée default .

Si on souhaite pousser les fichiers sur le serveur ftp, taper : grunt ftpush

Bilan

Après avoir testé Grunt sur mon site C.V., j'obtiens du CSS et du JS concaténé et minifié. Jshint m'a permis de voir quelques anomalies dans mon code JavaScript et de le corriger. Pour information ma libriarie JS de validation du formulaire, optimisée au maximum (pas de fonction inutiles)  pése 5Ko (12Ko en sources, 16Ko avant optimisation) elle est appellée avec une seule requête HTPP contre 2 auparavant.


Voila, le plus compliqué c'est la configuration des plugins, ensuite utiliser Grunt est un vrai bonheur. Simple, rapide, efficace, il permet d'automatiser toutes les petites taches manuelles qui finissaient par prendre beaucoup de temps et d'energie sur les projets. Gageons que ce type d'outils va fleurir sur le Net pour devenir des incontournables du développement professionnel. Grunt et le premier, il aura toujours cet avantage sur les autres et donc sa liste de plugins sera plus grande et réputée de bonne qualité. Le terminal mode de commande va devenir le compagnon indispensable du développeur de sites Web !

Voir aussi ce post sur la l'utilisation d'outils en ligne de commande.

Catégories: Développement WEB

Commentaires: Pas de commentaires

0

C.V. nouvelle version 2014

Nouveau C.V.

Jquery

Après la mise à jour de ce blog et du site FLDS, voici venu à présent le toilletage du mini site de mon C.V.

Tout d'abord une petite mise à jour s'impose concernant le téléphone (qui change) , l'age du candidat (qui augmente) et le lien de téléchargement pour le CV au format .PDF

Jquery no more

Et en y regardant de plus prés je me suis apperçu que moi aussi j'avais cédé à la facilité du tout JQuery. Pour concevoir les pages Porfolio et Contact, j'utilisais cette librairie simplement parce que c'étais pratique et que j'en avais pris l'habitude. Hors nous savons à présent que la vitesse de chargement d'une page est un des éléments privilégiés par LE moteur de recherche Google et que c'est aussi un gage de satisfaction pour l'utilisateur. Ah le bonheur de voir une page s'afficher tout de suite même sur son téléphone avec un débit très lent !

Autre tendance forte de l'année dernière après le "tout JQuery" (qui reste une librairie formidable) et ses plugings ont peut parfois se demander si elle est parfaitement toujours indispensable. Pourquoi sortir 100Ko de code pour juste sélectionner un ID et changer une valeur !!!

Si on souhaite s'adresser au plus grand nombre d'utilisateurs en se souciant que chacun est une bonne expérience sur le site il faut garder JQuery, son aspect cross plateforme est très précieux. Maintenant si on raisonne d'une autre façon en se disant que pénaliser le plus grand nombre, à savoir les utilisateurs qui ont des navigateurs modernes (pas IE6 ou 7) et qui sont le plus grand nombre aujourd'hui c'est les pénaliser au nom du plus petit nombre et cela n'est pas juste, voir stupide. Si les gens utilisent encore IE6 ou 7, voir 8 c'est qu'ils n'ont pas d'autre choix et il y a longtemps qu'ils se sont fait une raison sur l'expérience utilisateur qu'il pouvait obtenir avec leur navigateur d'une autre époque.

Donc l'idée de se toilletage à été de se passer de JQuery sur mon site de CV parce qu'il n'étais pas indispensable et donc pénalisant en terme de poids de pages et de temps d'affichage.

Portfolio

Pour la page  Portfolio il a été très simple de remplacer le pluging d'affichage des photos de mes réalisations par la librairie  ShadowBox (http://www.shadowbox-js.com/). Après avoir télécharger la version il suffit de dé-zipper tous les fichiers dans le même dossier (shadowbox par exemple) et de les appeller dans sa page.

Le CSS dans le head

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">

Le JavaScript avant la fermeture de la balise <body>

<script type="text/javascript" src="shadowbox/shadowbox.js">
</script> <script type="text/javascript">
Shadowbox.init({       
language:   "fr",
//players:    ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']       
players:['img','iframe'],       
continuous: true,       
counterType: "skip"           
});     
</script> 
</body>

D'abord on appelle la librairie et ensuite on l'initialise avec les paramètres de son choix.

Pour que cela fonctionne il faut juste modifier légerement les markup d'affichage des images dans la page en ajoutant : rel="shadowbox[gallerie]

Exemple

<a href="img/3.jpg" rel="shadowbox[gallerie]" title="Le titre"><img src="img/3.jpg" ></a>

Et ça marche !!!

Donc au départ la page utilisais le CSS jquery.lightbox-0.5.css (1Ko),la librairie Jquery (minifiée à 91Ko) et son pluging lightbox.js (5Ko) soit un total de 96Ko pour le même résultat à présent avec 38Ko de code (2Ko pour le CSS et 37Ko pour shadowbox.js) soit un gain de 58Ko.

Contact

Pour se passer de Jquery pour gérer le formulaire de  contact cela à été un peux plus de travail mais pour 13Ko de Javascript la ou j'en consommais 96Ko cela valais la peine.

Tout d'abord j'ai codé mon propre framwork sous la forme d'une mini librairie JavasScript permettant de manipuler le DOM. L'ensemble des fonctions peuvent être appellées en utilisant le préfixe $FLD. (au lieu de $ comme dans JQuery). Cette librairie je l'avais déjà conçue en 2011 et pour l'occasion je l'ais  adaptée à mes besoins (8Ko) avec du HttpRequest  et retour au format JSON.

La lecture de cet article sur la gestion des événement en JavaScript m'a été très utile et j'ai choisi la méthode DOM-0

Ensuite j'ai reconçu le code des tests et envoi par mail du formualire de contact avec les nouvelles méthodes de ma librairie.(5Ko)

Prochaine étape

Voila, je suis JQuery free à présent sur mon site CV. La prochaine étape consistera à concatener le code CSS et JS et à le minifier pour le rendre plus compact et aussi charger les ressources avec le moins possible de requêtes HTTP.

Alternative

Un projet à suivre pour redécouvrir les API du JavaScript natif :

Catégories: Développement WEB

Commentaires: Pas de commentaires