Classe de maître - CSS3 et HTML5 | TECHNOCompétences

Classe de maître - CSS3 et HTML5

Maîtriser les nouveaux standards Web et Angular.

CSS3 avec Juan Stéphan

En 2007, Apple lançait le iPhone. Une révolution commença. Quelques années plus tôt, un regroupement de grands joueurs du Web travaillait pour repenser le futur du HTML et du JavaScript. Leur idée était de développer une famille élargie de spécifications qui définiraient le poste client moderne. Le résultat est le HTML5 avec son ensemble d'API Web. La série de modules CSS3, elle, est utilisée pour la stylisation de l'interface. L'accès aux principaux senseurs, la livraison de médias enrichis, la possibilité de travailler hors ligne, les notifications, pour ne nommer que ceux-là, ne sont plus limités aux applications natives.

Les applications natives resteront pour ceux qui veulent une expérience optimale. Elles donnent accès à tous les senseurs et moyennant l'accord de l'usager, ont accès à différentes données applicatives. Un élément de friction important cependant est que les utilisateurs doivent les repérer et les installer. Chaque application native prend de l'espace sur l'appareil. C'est donc pour cette raison qu'elles sont plus pertinentes pour un public engagé que pour un public occasionnel. Comme Scott Jensen faisait remarquer dans une de ses présentations : ce n’est pas vrai que je vais télécharger une app pour faire tomber une barre de chocolat dans une des machines distributrices de l’aéroport à Berlin que je ne visiterai qu’une seule fois. D'un point de vue développement, l'écosystème de programmation pour les applications natives est différent dépendamment que l’on conçoive l'application pour Android ou iOS.

HTML5 avec Benoit Dubuc

Le HTML5 nous permet aujourd'hui de développer des applications JavaScript multi plateformes et universelles. L'écosystème de développement est unique: HTML5, JavaScript et CSS3. Les développements récents avec la définition des progressive web apps (PWA) et les service workers nous rapprochent du but d'avoir un pendant côté application web qui rivalise avec une application native pour l’installation sur l'appareil, l’accès hors ligne et les notifications. Avec les CSS3, nous avons l'appareillage pour styliser l'interface sans avoir besoin d'astuces de contournement et ainsi de configurer des interfaces usager agréables et efficaces.

Pour donner un exemple, Alibaba, le leader mondial en échanges commerciaux B2B a récemment fait une mise à jour vers une PWA pour les usagers qui viennent pour la première fois sur leur site web mobile.  L’objectif de cette mise à jour était d’offrir une excellente expérience usager même lors de la première visite, avec l’espoir d’un réengagement avec la plateforme de commerce en ligne.  Pour cela, Alibaba.com a mis en place une PWA qui livre une expérience web mobile à la fois rapide, efficace et fiable. Après cette migration ils ont noté une augmentation de 76% de conversions web, 30% plus d’usagers actifs sur Android et 14% de plus sur iOS. La fonctionnalité d’incitation pour ajouter à l’écran d’accueil a eu pour résultat que les usagers se sont réengagés quatre fois plus souvent que ceux de la version mobile d’avant.

La formation offerte à Montréal et à Québec

Dans ce cours nous couvrirons quelques aspects clés de cette révolution. Au niveau des senseurs, nous travaillerons avec l'API pour la géolocalisation extérieure qui est très bien supportée dans les navigateurs. Ceci nous permet de livrer un contenu auquel nous attachons une notion de proximité. Au niveau du support hors ligne nous verrons la persistance web et quelques concepts liés aux bases de données web, pour permettre de sauvegarder des données (texte et binaires) localement pour un usage hors ligne. Pour être en mesure de travailler hors ligne, nous avons aussi besoin d'avoir accès aux ressources qui forment l'application. À cet effet nous verrons d'abord la cache applicative et puis comment avec son successeur, les service workers, nous pouvons mettre en place une PWA. La stylisation de notre application sera faite avec les CSS3 en utilisant les sélecteurs avancés, les coins arrondis, les gradients, les polices téléchargeables, les transitions et animations et finalement les requêtes média. C'est grâce aux requêtes média que la stylisation pourra s'adapter en fonction de la taille d'écran de l'appareil et de son orientation.

Article composé par les formateurs Juan Stéphan et Benoit Dubuc pour la Classe de maître CSS3/Angular et HTML5

Un prochain article concernant la partie Angular suivra sous peu.

Voir le plan de cours