Le Blog

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

Ligne de commande

Prospectives WEBDEV 2014

Yo, Grunt, Bower

En parcourant les tutoriaux qui circulent sur la toile à la fin de l'année 2013 on peut anticiper que 2014 sera l'année de l'utilisation d'outils en ligne de commande. Aussi surprenant que cela peut paraître, l'utilisation de la ligne de commande à la UNIX ou MS/DOS est très encouragée auprès des développeurs. Ceci dans un souci d'efficacité dans la mise en oeuvre, la maintenance, le partage et l'installation de projets Web.

Simplicité, minimum d'installation d'environnements (Node le plus souvent) Grande efficacité en terme de temps de réponse, l'interface ici est minimaliste et donc très rapide. Faible consommation, grande performance, ces outils on toutes les qualité pour fournir aux développeurs les moyens de travailler de partout avec des versions distribuées et à jour de leurs sources de code.

2014, année de l'efficacité dans le petit monde du développement pour Internet. On peut le prédire, les preuves sont la :

  • Chez Alsacreation (http://www.alsacreations.com/tuto/lire/1609-bower-pour-les-nuls.html)
  • Chez Grafikart  (http://www.grafikart.fr/tutoriels/grunt/grunt-introduction-470)

Configurer le path

Pour que cela fonctionne sous Windows il faut que les outils installés soit accessibles à l'aide de la variable d'environnement PATH

Pour XP et Seven
  • Cliquer droit sur icone Poste de Travail
  • Sélection : Propriétés
  • Onglet : Avancés
  • Bouton : Variable d'environnement

Pour Windows 8

Windows 8

Utiliser la ligne de commande

Jusqu'à présent et certainement pour longtemps encore, la ligne de commande apparait comme  un environnement de travail rédhibitoire. Lorsqu’on est habitué depuis toujours à une interface utilisateur, la ligne de commande n’est évidemment pas sexy, elle est aussi très obscure. Pour l’utiliser il faut lacher la souris et taper des commandes sur son clavier. Il faut les connaître, elles utilisent parfois beaucoup de paramètres, qu’il faut connaître aussi. Pour se faciliter la tache on peut toujours écrire un fichier batch… la aussi, il faut connaître !

Toutes ces commandes peuvent dérouter voir rebuter. C’est pourquoi je trouve que de les voir à présent sur le devant de la scène des «méthodes de développement pointues » est un fait étonnant mais qui me semble pleinement  justifié. A  l'usage cette pratique, largement eprouvée dans d'autres environements (moins graphique) peut tout à fait se généraliser et passer dans la catégorie des  «bonnes pratiques» , bonnes à savoir et à utiliser.

workflow

  • Yeoman pour poser les bases d'un projet et fédérer tous les outils
  • Accompagner le développement avec Grunt (minification, concaténation, surveillance…)
  • Installer un projet avec Bower et gérer les dépendances web (Javascript, Css, fonts, ..)
Voir aussi
Divers
  • Git en français.

Yoeman et les packages

Catégories: Développement WEB, Humeur

Commentaires: Pas de commentaires

0

ProcessWire Commentaires

ProcessWire : nouveau module

Illustration commentaire

Après avoir été spamé avec les commentaires des posts de ce blog, j'ai reconfiguré le paramétrage du champ commentaire (type : Comments) et installé un module officiel (en bêta), développé par Ryan Cramer (concepteur de ProcessWire). Le module CommentManager rajoute dans le menu Setup la gestion de tous les commentaires du blog,de façon beaucoup plus aisé que page par page dans le post lui même.

Modification paramétre du champ comments :

  • Cocher : M'envoyer un mail lorsque'un commentaire est posté
  • Cocher : Redirect after comment post?

Installation du module CommentManager :

Après cela procéder comme d'habitude pour faire détecter et intégrer ce nouveau module dans ProcessWire.

Catégories: Développement WEB, Processwire

Commentaires: Pas de commentaires

0

ProcessWire Vidéo Adaptative

Nouvelle fonctionnalité JavaScript

C'est le début de l'année, une bonne résolution pour ce blog était de rendre les vidéos embarquées "responsives". C'est chose faite !!! En intégrant dans le fichier main.js, la librairie JavaScript FLUIDVID.JS et la fonction qui l'utilise  (http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/ ) et en recodant le HTML des posts contenant des vidéos Youtube, cela fonctionne parfaitement, les vidéos conservent une proportions 16:9 dans toutes les résolutions d'écran. Merci à Todd Motto pour sa solution pure JS (Jquery Free !)

Cette fonction permet d'analyser les balises <iframe> de la page, de tester qu'il s'agit des plateformes Youtube ou Viméo et de les enfermer dans  une <div class="fluid-vids"></div> avec un  style inline placée à la volée dessus.

Le style

        element.style { padding-top: 56.25%; position: relative; width: 100%; }
    

La librairie à aussi été modifiée pour accepter les vidéos sur Dailymotion.

Pour que cela fonctionne avec le module blog de ProcessWire il faut s'assurer que l'éditeur WYSING accepte la balise <iframe> en mode HTML et placer simplement le code fournit par les plateformes pour le partage embarquée des vidéos.

1.Editeur WYSING TinyMCE

Le champ Body doit être configuré ( voir : ici ) pour accepter le mot : iframe et toutes les options.

2.Exemples de code à placer dans l'éditeur HTML (fournit par les plateformes vidéos)

Code à recopier

En noir gras l'adresse URL de la vidéo

Youtube
    <iframe src="http://www.youtube.com/embed/
    
        JMl8cQjBfqk
    
    " frameborder="0" width="560" height="315"></iframe>
Viméo
    <iframe src="http://player.vimeo.com/video/
    
        23919731
    
    " width="500" height="281" frameborder="0"></iframe>

Solution en CSS

Une autre solution basée sur du CSS peut-être trouvée ici ( http://www.lije-creative.com/creer-video-responsive/ ) mais il faut avoir la main sur les balises vidéo pour ajouter une <div> avant la balise <iframe>, ce qui n'est pas le cas avec 'un champ crée par un utilisateur et son éditeur WISING ou non, à moins de transformer le code HTML à la volée. L'avantage c'est qu'il est possible aussi de gérer les vidéo embarquées avec Flash.

Tutoriel de Grafikart sur les vidéos Responsive en CSS

Catégories: Développement WEB, Processwire, Vidéo

Commentaires: Pas de commentaires