Z-i-G-Z-a-G

Créer une galerie d’images — Javascript & jQuery


Cette semaine, je vous propose de créer votre propre galerie d’images à insérer dans votre site. Il existe de nombreux sites qui proposent des galeries toutes faites, mais le problème c’est que lorsque que vous décidez de modifier un petit peu les paramètres comme le menu ou la manière d’interagir avec les images, cela devient tout de suite compliqué. Là, en développant vous même votre galerie, vous pourrez à votre guise modifier tout ce que vous désirerez dans les moindres détails.
Pour se faire, nous allons dans un premier temps créer une liste en langage html contenant nos images, nous styliserons le tout avec du css puis nous terminerons par du javascript et de la bibliothèque jQuery pour rendre interactive notre galerie.

gggalery-1.0 (suite…)

Share Button

Rubrique: Section 17 | 12 Commentaires


Flux messages — API Twitter


Après avoir découvert comment intégrer un flux de photos via l’API d’Instagram il y a deux semaines, c’est maintenant au tour de l’API de Twitter. La démarche est un peu moins complexe que pour celle d’Instagram et cela vous permettra d’afficher sur votre site les derniers tweets de votre compte. Twitter est un outil de microblogage (un dérivé concis du blog, qui permet de publier des articles très cours). Il permet à un utilisateur d’envoyer gratuitement de brefs messages, appelés tweets, sur internet, par messagerie instantanée ou par SMS. Ces messages sont limités à 140 caractères*.

twitter2

Pour ceux qui ne connaissent pas le terme API, vous pouvez trouver une brève signification dans le précedant article de cette section, Flux photos — API Instagram.

CRÉER UNE APPLICATION

Commençons par nous rendre sur l’Application Management de Twitter à cette adresse: https://apps.twitter.com, afin de créer notre API Twitter.
La première étape consiste à créer cette application, en cliquant sur « Create New App« , assurez vous d’être connecté à votre compte Twitter. Si vous n’avez pas de compte, créez en un et revenez à l’adresse précédente.

Après avoir cliqué, nous sommes invités à remplir les détails de cette nouvelle application, pour se faire, remplissez les différents formulaires.

create (suite…)

Share Button

Rubrique: Section 17 | Commenter


Flux photos — API Instagram


Aujourd’hui, je vous propose de découvrir l’API d’Instagram qui vous permettra d’afficher sur votre site web vos dernières images postées depuis l’application. Instagram est une application, disponible sur plates-formes mobiles de type iOS, Android et Windows Phone, qui permet de partager ses photographies et ses vidéos avec son réseau d’amis, de noter et de laisser des commentaires sur les clichés déposés par les autres utilisateurs*.

instagram

Tout d’abord pour ceux qui ne connaissent pas le terme API, en informatique, une interface de programmation (API, pour Application Programming Interface) est un ensemble normalisé de classes, de méthodes ou de fonctions qui sert de façade par laquelle un logiciel offre des services à d’autres logiciels. Elle est offerte par une bibliothèque logicielle ou un service web, le plus souvent accompagnée d’une description qui spécifie comment des programmes consommateurs peuvent se servir des fonctionnalités du programme fournisseur*.

CRÉER UNE APPLICATION

Pour commencer je vous invite à vous rendre sur le coin des développeurs sur le site d’Instagram à l’adresse: http://instagram.com/developer/
La première étape consiste à crée cette application, en cliquant sur Register Your Application (voir photo ci-dessous) une fois vous être préalablement connecté à votre compte Instagram. Si vous n’avez pas de compte, créez en un et revenez à l’adresse précédente.

Register Your Application
(suite…)

Share Button

Rubrique: Section 17 | 2 Commentaires


Typographie adaptative (responsive) — Web design


flowtype.js

Pour ce troisième tutoriel, je vous partage une « fonctionnalité » que j’ai découverte récemment en me demandant si il était possible de mettre en place une police responsive comme on sait le faire facilement avec les blocs de texte, les images, les menus… Le terme « responsive » (adaptatif ou RWD en anglais pour Responsive Web Design), désigne le faite d’adapter de façon optimal la consultation et la navigation de son site web sur tous les supports: ordinateurs de bureau, mobiles, tablettes ou autres. Pour exemple, si vous lisez ce texte sur un ordinateur de bureau et que vous réduisez la taille de la fenêtre de votre navigateur, vous pourrez observer que ce site propose le responsive design et qu’à partir d’une certaine largeur de fenêtre le contenu est adapté.
(suite…)

Share Button

Rubrique: Section 17 | Commenter


Convertisseur binaire vers décimal [2/2] — Arduino


Il y a 15 jours, je vous proposais de confectionner un afficheur digital 3×7-segments, afin de lui attribuer un simple compteur. Aujourd’hui, nous allons voir comment brancher 8 commutateurs (ou boutons poussoirs pour cet exemple) sur notre carte Arduino afin de lui envoyer des valeurs binaires.
Pour cela c’est assez simple, il suffit d’ajouter les 8 switchs (boutons poussoirs) à la suite sur notre plaque d’essai. On les connecte au 5v d’un coté et aux broches analogiques A0 à A5 et numériques 12 et 13 comme suit:

7-segments_buttons

Voyons maintenant quelles lignes de code nous allons modifier et ajouter à notre programme précédant (voir Convertisseur binaire vers décimale [1/2] — Arduino).
(suite…)

Share Button

Rubrique: Section 17 | Commenter


Convertisseur binaire vers décimal [1/2] — Arduino


Vous êtes dans la Section 17, ici vous pourrez suivre des tutoriels sur des logiciels de création ou sur des « bidouilles » électroniques. Cette section est plutôt destinée aux bidouilleurs curieux, qui ont quelques notions en programmation, qui aiment découvrir et tester, comme moi, des logiciels et/ou des programmes informatiques.

Pour ce premier tutoriel, je vous propose de créer un convertisseur de langage binaire vers du décimal, à l’aide de commutateurs (pour le binaire) et d’un afficheur digital (pour l’affichage de la conversion en décimal). Pour un récent projet, j’ai dû me pencher sur le sujet et je n’ai trouvé aucun tutoriel sur le web qui combinait ces deux caractéristiques. Je vous partage donc la solution que j’ai fini par obtenir.

Le principe est simple, avec 8 commutateurs à deux états : ouvert (0) et fermé (1), il est possible de créer 256 combinaisons possible allant de 00000000 à 11111111 (256 étant la valeur maximale contenue dans 1 octet (en réalité 255, plus le 0, 256 valeurs), l’équivalent de 8-bits, d’où nos 8 commutateurs. Ces suites de 1 et de 0 sont converties en valeurs décimales grâce à un programme et peuvent être lues sur 3 afficheurs digital 7-segments, un pour les centaines, un pour les dizaines et le dernier pour les unités. Les commutateur eux, enverront des informations aux broches d’entrée d’une carte Arduino (j’ai choisi le modèle d’entrée de gamme, l’Arduino Uno, qui suffit amplement), qui convertira ces informations avec le programme que je vais vous proposer puis enverra du courant sur les broches de sortis qui alimenteront successivement les segments nécessaires.

Pour cette semaine je vous propose de nous concentrer sur l’afficheur décimal en créant un simple compteur, nous verrons comment ajouter les commutateurs dans prochain post. Commençons alors par le branchement des 3 afficheurs, je ne vous expliquerais pas ici comment fonctionne une carte Arduino ou pourquoi j’ai choisi tel ou tel composant, libre à vous d’améliorer et d’adapter selon vos envies. Je vous avais prévenu il faut avoir quelques notions et il existe de nombreux sujets sur la toile ou vous pourrez trouver réponses à vos questions (je peux toutefois tenter d’y répondre via les commentaires si vous éprouvez des difficultés).

7-segments
(suite…)

Share Button

Rubrique: Section 17 | 6 Commentaires