Catégorie : Programmation Web

programmation Web

  • Créer un Fly-in menu en HTML5 & CSS3

    Flyin-menu
    Pour cet article, je vous présente un script qui permet l’affichage d’un Fly-in Menu. C’est un genre de menu que l’on voit souvent sur les supports Android.

    Ce script est très simple, et il n’y a pas beaucoup de Jquery. Le peu d’animation se fait en CSS3 avec les commandes Transform.
    Et selon l’état du menu (affiché ou non), l’icône du menu prend la forme d’un hamburger ou d’une croix.

    Vous pouvez retrouver mon script sur mon Github à l’adresse suivante : github Flyin-menu.

    Enjoy !

  • Optimiser ses projets Web avec des outils javascript

    Optimiser ses projets Web avec des outils javascript

    Aujourd’hui,je vous présente plusieurs d’outils qui facilitent l’optimisation et la publication de site internet.

    Ce sont tous des outils connus et qui ont fait leurs preuves.

    Grunt et Gulp.js sont deux Task Runner qui organisent une série de tâches grâce à des lignes de codes. Yeoman permet le démarrage d’un projet web en installant des outils front-end connu (jquery, angular, etc…). Bower est un gestionnaire de paquet nécessaire à la création d’un Front-end.

    Si vous connaissez d’autres outils de ce genre, n’hésitez pas à les donner en commentaires.

     

    Enjoy :

  • Comment manipuler l’historique du navigateur

    pushstate_ajaxA l’apparition de l’Ajax, nous pouvions modifier les informations dans une page sans la recharger. Ajax permettait le rechargement spécifique de ces informations.

    Ce rechargement n’avait, pendant plusieurs années, qu’un seul défaut : il ne permettait pas de manipuler l’historique comme on le voulais.

    Javascript permet de manipuler l’historique de navigation grâce à l’objet window.history.
    Le site de mozilla contient une page complète sur la manipulation de l’historique du navigateur.

    Pour utiliser correctement cette manipulation, il suffit d’utiliser les méthodes pushState() et replaceState(), et l’évènement popstate.

     

    Avec cette objet Javascript, vous deviendrez un professionnel de l’historique avec votre navigateur.

    Enjoy !

  • Comment créer un plugin Jquery ?

    jqueryLa création de plugin n’est pas évidente en soi, sauf quand le site de « learn Jquery » propose plusieurs pages sur ce concept.

    La page spécifique sur la création de plugins est la suivante : https://learn.jquery.com/plugins/.
    C’est une série de quelques pages complètes, avec quelques exemples basiques. Parfait pour les bonnes pratiques.

    En suivant ces différentes pages, vous pouvez créer un template de plugin, base de tous vos futurs développement de plugins.

    Voici, ci-dessous, un exemple de template :

    /*
     * template jquery
     */
    (function ($) {
    	// Création de la fonction
    	$.fn.name_plugin = function(options) {
    
    		var settings = $.extend( {} /* defaults here */, options );
    		// Globals here
    
    		// Functions here
    
    		// Execute here
    
    	};
    })(jQuery);
    

    J’ai pu faire quelques tests. C’est facile à faire.

    Enjoy !

  • Créer votre propre Framework PHP

    logo_symfonyDerrière ce titre aguicheur se cache tout une série de tutoriel sur le site de Symfony.

    Cette série d’articles est visible sous le titre Create your own PHP Framework. Tout est en anglais, mais c’est très bien expliqué.

    Beaucoup de développeur pense qu’il est laborieux de recréer la roue, mais Symfony pousse la réflexion plus loin. En effet, quand on développe une application, il faut utiliser le meilleur outil possible (framework, CMS, etc…). Le fait de créer son propre micro-framework a ses avantages, comme la maîtrise totale de ce micro-framework (entre autre).

    Pas mal de chose sont traité, comme le Front Controller, le Routing, le Templating, etc…, et ce tutoriel permet pas mal de liberté comme l’ajout de nouvelles fonctionnalités. Le micro-framework pourra être modifiable comme vous le souhaitez.

    En suivant ce tutoriel, j’ai créé moi-même un micro-framework, qui en est à sa version 1.
    Vous pouvez le retrouver sur mon github à cette adresse : Guillaume-RICHARD/micro-framework.