Les différentes composantes de Bootstrap

Bootstrap se compose de plusieurs éléments aidant la fondation d’un bon design web.

Scafolding

• Utilisation de HTML5
• Un « reset » CSS très simple basé sur Normalize.css
• Un système de grille css (grid system)
• Un système simple de « layout »
• Un système pour faire un site « responsive » vraiment très bien fait

Framework CSS

• Un système de typographique
• Gestion des styles et « helper » pour les tableau HTML
• Gestion des éléments de formulaire
• Des boutons personnalisables (très chics)
• « helper » pour les images
• Un kit d’icônes d’actions fournis par Glyphicons

Composants de design 

• Groupes de boutons
• « Labels » et badges
• Fils d’ariane (breadcrumbs)
• « Alerts box » : Info, succès, échec, attention
• Barres de progression
• « Thumbnails »
• …

Framework Javascript

• « Modal box » très bien faites et facile à modifier
• Gestion des transitions
• Système de « tabs »
• Système de « tooltips »
• Alert javascript amélioré
• Autocompletion pour formulaire
• Système de « Popover » très bien fait
• …

Boostrap est hautement « skinable »

Le plus interessant avec Bootstrap, c’est qu’on peut créer des thèmes (« skins ») assez facilement. La cerise sur le gâteau c’est que, à l’instart de WordPress, il existe des thèmes gratuit ou payant développés par une communauté grandissante. VOus en trouverez une bonne quantité sur le site http://wrapbootstrap.com

Conclusion sur Bootstrap

Bootstrap est définitivement un outil à connaître pour tout bon développeur web. Il permet de créer des interfaces très rapidement et très proprement. Je ferais quelques tutoriels dans les prochains articles. 

Ressources pour le framework Bootstrap

• Bootstrap home
• Wrap Bootstrap

A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Mais là où d3.js est très efficace est dans la manipulation de SVG.

Manipuler ou créer une div avec d3.js

Ajouter et manipuler un rectangle SVG

Dessiner plusieurs éléments dans un groupe svg

Gérer des données au format JSON et dessiner en fonction de ces données

Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class « node ». Ensuite, on va dessiner, suivant les données (variable data) un cercle et afficher le nom de ce cercle dans celui -ci.

Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter().

selectAll()

la methode de selection selectAll permet, comme son nom l’indique de selectionner les éléments définis par le selecteur css passé en argument. selectAll(« p ») va selectionner tous les éléments présents dans le DOM.

data()

La methode data() permet de « binder » (attacher) des données à des éléments sélectionnés par la methode selectAll(). Ces données une fois attachées seront utilisables dans la suite du chainage. Exemple : attr(« fill »,function(d){return d.color});

enter()

Cette fonction va « binder » les données à des éléments et créer les éléments sélectionnés par selectAll(). Si vous n’utilisez pas enter() alors aucun élément ne sera crée. Seul les éléments existants seront utilisés et donc s’il sont inexistant, rien ne s’affichera.

Ressources

• W3 School, documentation sur le SVG
• Le site de d3.js
• Approfondir sur le DOM (Document Object Model)

Quelques photos du concours Smithsonian

Voir la suite du concours sur le site theatlantic.com

Comment lancer le débogueur 3D de Firefox

Rien de plus facile! Ouvrez votre firefox et aller sur votre site préféré : Undisconnected.com par exemple Ensuite « cliquez droit » sur un élément de la page que vous aimeriez inspecter et choisissez l’option contextuelle « Examiner l’élément ». Ceci a pour effet de lancer la console web et de vous afficher l’élément sélectionné dans l’arbre du DOM (Document Object Model) et de vous afficher le CSS relié à cet élément. Jusque là rien de bien nouveau!

Diriger vous ensuite en bas à droite de la fenêtre de firefox, vous devriez voir un bouton 3D apparaître. Cliquer sur ce bouton … et ô magie, une vue 3D de la page apparaît. Il est possible de sélectionner des éléments de la page et d’en voir le CSS ainsi que leur place dans le DOM. 

Vidéo de la vue 3d dans Firefox : TILT en action 

Pour mieux voir à quoi cela ressemble rien de tel qu’une petite vidéo. 

Cliquer ici pour voir la vidéo.

Conclusion 

Soulignons l’effort de la fondation Mozilla pour amener aux développeurs une nouvelle génération d’outils puissants pour le débogage. J’espère que cet article vous aidera à gagner du temps et aussi à perdre moins de cheveux Si vous avez des questions ou que vous souhaitez partager votre expérience de l’outil laissez un commentaire.

Ce que j’ai commandé sur Prinstagram

J’ai commandé 48 photos de 2.5 X 2.5 pouces ainsi que 24 photos de 4 X 4 pouces. Cette commande m’a coûté 36$ (frais de livraison inclus). La livraison a mis un peu plus d’ne semaine et est arrivé via DHL en très bon état. La livraison peut-être faites à l’international, donc en France comme au Canada pour 12$.

Le site de Prinstragram

Le site est vraiment facile a utiliser. Il suffit de connecter son compte Instagram et de sélectionner les photos souhaités. Une fois ceci fait, on ajoute au panier, on paye … et c’est partis !

D’autres services sympa existent comme la possibilité de faire un backup physique (Memory Box) de toutes vos photos Instagram, faire un calendrier basé sur 365 de vos photos, faire un poster avec plusieurs de vos photos.

Conclusion 

Si vous aimez Instagram et sa facilité ! Vous adorerez Prinstagram, c’est toujours cool d’avoir ses photos imprimés pour afficher à la maison ou simplement donner à des amis ou à la famille.

Portez-vous bien ! 

history | grep « mot-clé de la commande à trouver »

ou 

ctrl+r : « mot-clé de la commande à trouver »

 http://invisiblejam.com. 

Cliquer ici pour voir la vidéo.

Ressources

• Concours photo National Geographic 2011 au complet
• Voir l’article Concours photo National Geographic 2012

http://www.mixcloud.com/Dr_Lemon/winter-heating/

Lisez la prescription avant écoute : 

Dr Lemon’s prescriptions are based on various medications made of funk, jazz, hip-hop, afrobeats, rare grooves, latin-jazz, crazy boogaloos and unexpected covers. Depending on your needs, Dr Lemon can also recommend a stronger therapy based on the beats of Detroit techno and other electronic materials…

Quels sont les problèmes qui se posent ? 

• Mon diaporama doit rester court pour être agréable à regarder.
• J’ai trop de photos en double ( les fameuses 10 photos du même paysage que vous avez prises).
• Je veux générer un diaporama avec uniquement les meilleures photos de mon évènement.
• Je veux garder mes photos en double pour mes archives personnelles.
• Comment partager facilement mon diaporama à tous mes amis

Effectivement, vous souhaitez éviter d’assomer votre public par des longueurs dû à des photos répétitives. Pour améliorer la qualité et captiver votre publique, vous devez limiter le nombre de photos. Il n’y a pas de règle mais je dirais que 100 photos (1 photo toute les 3 secondes pour un temps total de 5 minutes) semble correcte.

Masquez les photos non désirées dans Iphoto

Exemple : 

J’ai pris 5 photos de la patinoire sous tous les angles, je veux les garder pour archive (au cas ou) mais je ne souhaite pas les présenter dans le diaporama que je ferais voir à tout le monde. Pour ce diaporama, je veux montrer LA meilleure photo de la patinoire. 

Comment faire cela dans Iphoto ? C’est très simple, il faut utiliser la fonction de masquage.  Masquez les photos non désiré dans l’évènement. (Click droit sur une image ou une selection d’image & Masquer – c’est la croix jaune).

Dans le menu Présentation (Barre de menu en haut) vous pouvez décider d’afficher ou non les photos masquée en sélectionnant « Photos masquées ». Les photos masquées ne seront donc pas prise en compte par le diaporama.

Réglage de votre diaporama 

À cette étape vous allez générer un diaporama avec les réglages de votre choix. Choisissez le style, la musique et les réglages de défilement. Par défaut 1 photo toutes les 3 secondes est un bon réglages. (mais vous pouvez tester d’autres réglages). Pour la musique, Apple propose des musique libre de droit , mais vous pouvez aussi choisir une musique de votre librarie Itunes. Attention cependant Youtube est capable de bloquer une vidéo à cause du droit d’auteur.

Exportez votre diaporama au format video

Il est effectivement possible d’exporter le diaporama en cours au format video. Pour se faire, une fois les réglages de votre diaporama fini (étape ci-dessus), allez dans le menu Fichier (Barre de menu en haut) puis Exporter. Cliquez sur l’onglet Diaporama puis choisissez la qualité de la vidéo que vous désirez. Pour ma part j’utilise le format « grand », car la plupart du temps je vais faire voir cette video sur mon laptop ou l’envoyer sur Youtube. Avec ce format la qualité reste très bonne.

Envoyer votre video sur Youtube

Une fois votre diaporama exporté en video, il est pas mal pratique d’envoyer la video sur Youtube (ou autre gestionnaire de video en ligne, Vimeo, Dailymotion). Pourquoi? Pour partager facilement votre diaporama en envoyant juste un lien menant vers Youtube à vos amis / famille.

Pour se faire, ouvrez votre diaporama au format video avec Quicktime Player. Aller dans le menu fichier (Barre de menu en haut) puis Partagez, choisissez Youtube (ou autre si désiré, mais cet article traîte de Youtube). Si c’est la première fois que vous utilisez cet fonctionnalité, il vous faudra renseigner votre compte Youtube (ou compte Google).

Si vous n’en avez pas, créez en un en allant ici.

Choisissez la catégorie de votre video, donnez un titre, entrez une description, choisissez des mots-clés (Balises). Laissez la case « Rendre cette vidéo personnelle » cochée. La vidéo va être envoyer sur Youtube et vous pouvez suivre la progression avec cette fenêtre : 

Gérer les permissions de la vidéo sur Youtube

Sur Youtube, allez dans votre compte puis « Gestionnaire de vidéos ». Cliquez sur « Modifier » près de la vidéo que vous avez créé à l’étape précédente puis sélectionnez « Infos et paramètres ». Une nouvelle page apparaît permettant de régler les droits de la vidéo à droite de la page. Sélectionnez : Non répertorié. La vidéo sera alors accessible aux gens à qui vous donnez le lien mais ne sera pas trouvable dans le moteur de recherche Youtube.

Le résultat en video

Voici donc le résultat de la video de mon diaporama sous Youtube. Pour l’exercice, j’ai pris quelques photos de ma vie quotidienne à Montréal. Photos pour la plupart prise avec mon Iphone.

Cliquer ici pour voir la vidéo.

Conclusion du tutoriel

J’espère que ce tutoriel vous sera utile! Si vous avez des questions, n’hésitez pas à les poser dans les commentaires ci-dessous. Aussi, si vous voyez comment améliorer le processus, n’hésitez pas à en faire part. Pour finir je dirais que ce tutoriel demande à bonne concentration environ 30 min. Si vous souhaitez partager vos diaporamas, n’hésitez pas.

Bonne création!