Voici la suite du tuto Créer le template d'un blog responsive avec Photoshop où nous allons apprendre à intégrer un template Photoshop de site Web à l'aide du framework Bootstrap ce qui vous permettra d'obtenir un blog responsive, c'est à dire qui s'adapte à la taille de l'écran sur lequel il est consulté. Depuis le 21 avril 2015, Google sanctionne en effet les sites qui ne s'adaptent pas aux résolutions d'écrans. Il est donc primordial, voire vital, d'adapter votre blog. Cette formation vous explique comment !

Programme de ce tuto Intégration d'un Blog Responsive avec Bootstrap

Voici les notions qui seront abordées dans cette formation en vidéo :

• Convertir une police de caractère non standard en otf, woff, eot, svg...
• Déclarer une police de caractère non standard avec @font-face
• Créer un menu minifié sur tous les types d'écrans
• Créer des transitions avec CSS3
• Gérer la transparence des d'images
• Animer des boutons au rollover (changement de couleur de fond, rotation des icônes liées aux réseaux sociaux...)
• Utilisation du last-child
• Utilisation des balises HTML5 (header, nav, aside, footer...)
• Utilisation des rôles afin d'ajouter du contexte aux éléments de la sémantique
• Utilisation des media queries pour diminuer le logo en fonction de la résolution
• Afficher / Masquer des éléments en fonction du terminal (écrans / tablettes / mobiles...)

L'utilisation de Dreamweaver n'est pas obligatoire pour suivre ce tuto. Vous pouvez utiliser votre propre éditeur HTML.
Pour plus d'informations concernant ce cours, je vous invite à visionner l'extrait vidéo. Les fichiers sources sont fournis avec le tuto.

Bon tutoriel et à bientôt pour la suite qui portera sur l'intégration avec WordPress.