Mini-site (un site monopage à onglets) html – css3

Une application web monopage (en anglais single-page application ou SPA) est une application web accessible via une page web unique. Le but est d’éviter le chargement d’une nouvelle page à chaque action demandée, et de fluidifier ainsi l’expérience utilisateur. Deux méthodes existent pour ce faire : soit on charge l’ensemble des éléments de l’application (contenu, images, CSS et JavaScript) dans un unique fichier HTML, soit on récupère et affiche dynamiquement les ressources nécessaires en fonction des actions de l’utilisateur. Le terme a été introduit par Steve Yen en 2005. (Wikipédia)

Nous n’avons qu’une seule page html contenant plusieurs onglets.

Utiliser fullcalendar avec Angular 2

logo

Fullcalendar est un plugin jQuery très célèbre pour la gestion des rendez-vous du côté client. Il peut interagir avec des frameworks Javascript. Avec les fonctionnalités fournis par AngularJs 1, nous pouvons facilement interagir avec fullcalendar, enregistrer des dates de rendez-vous via un Web Service en utilisant l’Ajax. Mais dans notre article, nous allons voir comment le faire avec Angular 2. (Télécharger ou cloner les exemples)

Il y a deux approches que nous allons étudier avec le plugin Fullcalendar de jQuery:

  • La séparation de la logique de jQuery et Angular 2
  • L’utilisation d’Angular 2 seulement. 

Ajouter des effets de transitions sur les contenus avec un Slider

slider-image

Le fait

Aujourd’hui, toute page d’accueil d’un site qui se respecte contient un slider (ou carrousel) qui montre des produits phares, des actualités mises en avant ou simplement des activités maitrisés, selon sa vocation (e-commerce, blog, corporate ….). En plus, les contenus des slides s’affichent progressivement avec des effets de transitions qui nous éblouissent parfois. Nous pouvons obtenir ce résultat en utilisant un plugin. Un des plus populaires est par exemple Slider revolution : très complet, puissant et existe en plugin WordPress, mais payant.

Dans notre article, nous allons vous montrer comment nous pouvons obtenir à peu près le même résultat en utilisant des composants gratuits disponibles sur la toile.

Introduction à Angular 2

angular2

C’est quoi Angular 2 ?

Si vous connaissez AngularJS (Angular 1.x), vous pensez peut-être qu’Angular2 est une upgrade d’AngularJS. En réalité, Angular2 a été totalement réécrit par Google, ce qui en fait un nouveau framework à part entière, avec une philosophie et des concepts propres à lui.

AngularJS nous a fourni beaucoup de fonctionnalités, comme la gestion des routes, interaction entre client et serveur, interpolation, directives, filtres, …, le tout sous une architecture MVW.

Certaines de ses fonctionnalités telles que le data-binding et les filters ont été reprises et modifiées dans Angular 2. Nous allons voir une liste de comparaisons, côté HTML et script.

Parcourir l’article

Créer des catégories avec jQuery

Comment créer à l’aide de jQuery des catégories et utiliser leurs scopes pour trier des éléments présents dans le DOM ?

jquery

Problème:

Mon code m’affiche une liste de boutiques d’une même enseigne sur l’ensemble des villes françaises. Cette liste ne fait l’objet d’aucun tri. J’ai besoin de créer 3 groupes bien distincts de boutiques:

  • Les boutiques sur Paris
  • Les boutiques en région parisienne
  • Les boutiques en province

NPM – Un peu plus qu’un gestionnaire de librairies

Dans l’écosystème du développement Web, l’incontournable Node Package Manager est l’outil de gestion des dépendances le plus naturel lorsque que l’on démarre un projet JavaScript.

npm-logo

Et on y adjoint souvent un orchestrateur gérant les taches de packaging (Gulp, Grunt, etc.). Avec les « bundlers » (Webpack, Browserify) de plus en plus fourni en fonctionnalités (minification, versioning…), la question du rôle de ces orchestrateurs se pose car il ne se résume alors qu’en l’exécution de simples macro-commandes.

Les animations CSS

css3-webdesign-lien-web

Les animations CSS sont très utilisées. Elles permettent de porter l’attention de l’utilisateur vers un endroit en particulier de votre interface.

Elles sont, de ce fait, des transitions et permettent de passer un objet par un état A puis un état B puis un C et cela autant de fois que vous le souhaitez et comme vous le voulez (position, vitesse etc.).

Par exemple, vous pouvez déplacer un carré, changer sa couleur, sa taille etc. Dans cet article, nous allons voir comment créer de simples animations avec des keyframes puis nous verrons en détails des animations plus complexes.