Scénarisation et Création Multimédia

Logiciel : Adobe Photoshop CS3

Niveau : moyen

Je vous propose aujourd’hui un tutoriel afin de créer des effets 3D sur une forme quelconque. J’ai réalisé ce tutoriel avec le logiciel Photoshop CS3. Voici donc quelques étapes permettant de donner une forme réaliste à une réalisation. Cela pourra vous permettre par la suite de créer des prototypes de stands, d’objets publicitaires ou encore de supports PLV…

1. Première étape :

Créez une forme à l’aide de l’outil plume en sélectionnant l’option en haut à gauche « calque de forme ». J’ai choisi pour ce tutoriel de dessiner une fleur. C’est cette première forme qui sera donc mise en relief par la suite. Si comme moi, vous n’avez pas un grand talent de dessinateur, récupérez un dessin déjà réalisé et faites-en les contours avec l’outil cité plus haut.

2. Deuxième étape :

En faisant un clique droit sur le calque de forme dans la fenêtre calque, sélectionner « dupliquer le calque ». Votre nouveau calque s’appellera donc Forme 1 copie. A l’aide du raccourci clavier ctrl+j dupliquer 40 fois cette forme, en la descendant avec la flèche du bas de votre clavier (n’appuyer qu’une seule fois sur la flèche du bas par forme dupliquée, cela vous permettra d’espacer chaque forme d’1 pixel).

3. Troisième étape :

Sélectionner toutes vos copies de calques et les fusionner comme dans le visuel ci-dessous.

Vous obtenez donc deux calques (je ne prend pas en compte le calque 1 qui est vide pour le moment). Le calque « Forme 1 » et le calque « Forme 1 copie 40 ». Vous pouvez désormais faire passer le calque « Forme 1 copie 40 » sous le calque « Forme 1 ».

1. Quatrième étape.

Vous pouvez commencer à colorier en donnant, à l’aide de dégradé de couleurs, différents effets de reliefs.

Commencez à sélectionner le calque Forme 1 en lui appliquant un dégrader de blanc et de gris moyen. Désormais vous pouvez appliquer sur chaque pétales des effets de dégradés spécifiques à leur orientation.

Petit rappel : Afin de sélectionner les pétales les uns après les autres pour leur appliquer un dégradé vous devez tout d’abord les détourer à la plume en mode « tracés ». Assurer vous bien que le tracé soit fermé. Vous pouvez ensuite vous rendre sur la forme que vous venez de créer sur la fenêtre tracé. Faite un clique droit sur l’image et sélectionner « définir une sélection ». Un cadre comme ci-dessous. Rentrer les informations suivantes : rayon 0 pixels et opération nouvelle sélection.

Pour finir, vous pouvez placez un fond de couleur afin de faire ressortir l’objet si les dégradés choisis sont de couleurs clairs.

Voici donc le résultat :

Salut les kidz ! Aujourd’hui nous allons vous montrer comment, en l’espace de 5 minutes, créer des boutons « web2.0 » de la forme que vous souhaitez, et ce, en toute simplicité sur Illustrator !.

Pour commencer, choisissez une forme de votre choix pour votre bouton. Dans le cas de ce tutoriel, nous choisirons d’utiliser une forme rectangulaire aux bords arrondis.

N.B : Durant ce tutoriel, nous allons effectuer une superposition de cette forme travaillée avec plusieurs effets différents. C’est pourquoi il vous est recommandé de garder votre forme originale et de la dupliquer.

Commencez par colorer le fond de cette forme en noir, allez ensuite dans les filtres  et effectuez un flou gaussien d’environ 12 pixels de rayon. Nous venons de créer l’ombre de notre bouton.

Dupliquez maintenant une nouvelle fois la forme originale en blanc par dessus la forme qui servira d’ombre : nous avons maintenant une première couche, qui dans notre cas, servira de contour pour notre bouton.

Dupliquez une fois de plus la forme d’origine et rétrécissez-la légèrement. Coloriez-la de la couleur de votre choix (bleu marine dans l’exemple) et centrez-la sur ce qui existe de notre bouton.

C’est ici  que vous allez libérer toute votre créativité en mêlant et mélangeant les couleurs de cette forme.

Pour ce faire vous avez plusieurs possibilités :

-       créer un dégradé

-       effectuer une superposition de plusieurs dégradés de forme, superpositions de calques, couleurs et directions différentes

-       utiliser l’outil de maillage, également appelé l’outil filet .

Dans notre cas nous allons utiliser l’outil filet

Cliquez donc dans un coin de la forme de couleur avec cet outil : un point devrait alors apparaître.

Il ne vous reste plus alors qu’à choisir une couleur à laquelle assigner ce point.

Nous allons maintenant créer un petit effet de reflet. Pour ce faire, dupliquez une nouvelle fois votre forme d’origine en blanc, et découpez le d’une forme ressemblant à un reflet (voir image ci-dessous)

Placez ensuite cette forme sur le bouton, et réglez son opacité à 40% environ.

Il ne vous reste plus qu’à mettre le texte de votre choix dans cette forme

Tips & Astuces

Vous pouvez de cette manière créer des tonnes de boutons, de formes très différentes : octogonale, prismatique, rond, en forme de goutte… voici quelques exemples de bouton que vous pourrez créer en suivant les principales lignes de ce tutorial :

Vous pouvez également effectuer des effets sur les boutons à partir des outils de déformations spirales, fronce, cristallisation ou encore feston (même icône que l’outil déformation )

A vos mac, prêt, partez !

Voilà un titre qui en jette.

Et concrètement, dont on se dit “ouais, mais ça va me servir à rien cette connerie, je veux pas lancer de WebTV…”

C’est exact. Moi-même je n’ai pas de WebTV. Et je ne compte pas en faire une.

Mais WTF ?; comme dirait l’autre.

Pour entrer dans le vif du sujet, la vidéo est le coeur d’internet. Ca fait plusieurs années qu’on le dit, mais ça reste vrai. Les vidéos permettent de dynamiser des contenus, d’amuser, de créer du buzz, etc etc; je vais pas vous apprendre votre boulot.

Donc dans la continuité de mon premier tuto vidéo, celui-ci va vous aider un peu plus à vous familiariser avec ce type de contenus peu abordés en cours.

Objectif de ce tuto : vous apprendre à créer et diffuser des contenus vidéos polyvalents, à l’aide d’un outil simple : ustream.

Applications concrètes :

• Filmer ce qui se passe sur votre écran (pour faire un tuto ici par exemple… Non, je l’ai pas fais parce que c’est en réalité pas pratique du tout pour l’utilisateur, qui doit sans cesse mettre sur pause, rewind, etc. Mais cela reste possible, et notamment dans le domaine du design c’est assez dévastateur.)
• Enregistrer le son de votre ordinateur (qui a parlé d’enregistrer les cours de sociologie des médias ?! Sûrement pas moi, c’est interdit et anti-pédagogique.)
• Filmer à partir de votre webcam ou autres auxilliaires vidéo (Enregistrer un évènement, une fête, n’importe quoi !)
• Diffuser ces contenus (Diffusion en direct ou en différé. Possibilité d’enregistrer évidemment. Et donc d’uploader sur un site internet ensuite.)

Etape 1 : Télécharger Ustream Producer

www.ustream.com/producer

Je vais pas vous dire que si vous avez un mac, vous prenez pour mac, et pour pc, pour pc. Trop tard, je l’ai dis. Et vous l’installez aussi. Et vous vous enregistrez sur le site. Bref, si vous arrivez pas à faire ça, je peux pas grand chose pour vous. Il faut également créer sur le site le nom de votre WebTV (en haut de l’écran du site Ustream, cliquez sur “Your Shows” pour configurer le tout.)

Etape 2 : Lancement de Ustream

Vous démarrez l’application. Si si, je vous jure. Et là, vous entrez votre identifiant et votre mot de passe crées précédemment.

Etape 3 : L’interface Ustream Producer

Un petit visuel avec des flèches que vous compreniez mieux.

Le coeur de Ustream : Les menus Add, Change et Transition.

• Live Input = Sélection / création de nouvelle caméra

• Media = Insertion de média (vous ajoutez une vidéo de votre ordinateur dans une vidéo que vous diffusez par exemple, pour faire des montages dynamiques.)

• Screencast = Le menu le plus complexe. J’utilise ustream depuis quelques mois, pourtant ce menu ne marche qu’une fois sur deux. Son principe : sélectionner quelle fenêtre vous allez enregistrer. Ainsi, vous pouvez être sur photoshop et en train de faire un solitaire, mais en sélectionnant la bonne fenêtre, le programme n’enregistrera et ne diffusera que votre photoshop.
• Picture & Sound = Une base de retouche audio et vidéo, toujours dans l’optique de faire des montages dynamiques.
• Le meilleur : Le menu PiP (Picture in Picture.) Permet de faire très facilement des choses assez sympathiques, très pro, façon grand reporter. Par exemple :

Bon, là on est loin du grand reporter. Mais on peut aisément imaginer que je suis en train de commenter une sublime vidéo sur les risques de la noyade dans les steppes de Mongolie.

Etape 4 : C’est bien beau ça, mais comment mes amis voient ce que j’ai fais ?

Outre les diffusions annexes en différé avec l’enregistrement de la vidéo, il est possible de voir votre “WebTV” en direct sur le site Ustream. Notez d’ailleurs que l’outil Ustream gratuit (celui là, le professionnel coûte cher donc je le connais pas vous propose de se lier avec vos comptes Facebook, Twitter, AIM et MySpace afin de tenir vos contacts au courant des nouveautés sur votre WebTV.

J’en perds le fil, donc l’adresse de votre show est http://www.ustream.tv/channel/nomdevotreshow.

Je ne vous donne pas mon canal, j’ai fais toutes sortes de tests dessus, c’est donc une véritable horreur. Et si je crée un nouveau “show”, vous avez directement le lien vers mes créations. Ce qui ne me plaît pas. Donc pas de démonstration…!

Etape 5 : S’amuser !

Et pour cela, je peux évidemment répondre à toutes les questions que vous vous posez. Je bidouille déjà un peu la vidéo au départ, donc des choses peuvent me paraître évidentes… Demandez !

Bonjour à tous !

Je vais développer ici un petit tutoriel pour utiliser le logiciel de gestion de base de données Access.

Qu’est-ce que c’est que Microsoft Access?

Microsoft Access est un logiciel comprenant un système de gestion de base de données relationnel. Pour faire simple, il vous sert à gérer de multiples bases de données que vous pouvez entrez dans le logiciel.

Qu’est-ce qu’une base de données?

En informatique une base de données est un lot d’informations stockées dans un dispositif informatique. Les technologies existantes permettent d’organiser et de structurer la base de données de manière à pouvoir facilement manipuler le contenu et stocker efficacement de très grandes quantités d’informations.

Donc, on peut stocker multiples informations dans une base de données, et l’intérêt du logiciel est de pouvoir les utiliser comme on le veut.

On a accès à l’information plus rapidement et plus facilement. Toutes les informations se retrouvent stockées dans un endroit unique dans la base de données. On peut même faire des recherches beaucoup plus facilement, et on possède un meilleur suivi de l’information.

Pour une entreprise, cela peut par exemple lui faciliter sa gestion des stocks !

Ex: Combien me reste-t-il en stock du produit X? Qui sont mes dix clients les plus importants en ce moment?

Grâce à Access, on a ici plusieurs avantages qui se présentent à nous :

• Meilleur suivi de l’information.

• Meilleure gestion des données.

• Meilleure analyse des données.

• Meilleure prise de décision.

• Mieux apte à répondre aux besoins de la clientèle.

• Automatisation de certaines tâches répétitives.

Ce type de base de données a plusieurs avantages comparés à une base de données simple aussi appelée “flat file”. Elle utilise beaucoup moins d’espace parce qu’elle réduit au minimum les redondances ou les répétitions des données. Pour mieux comprendre l’avantage d’un système de gestion de base de données relationnel (SGBDR), utilisons un exemple de factures (formation GEA à la base pour moi).

Regardons quelques-unes des données que l’on retrouve normalement sur une facture:
Date, Numéro de facture, Numéro du vendeur, Numéro du produit, Quantité vendue, Prix unitaire, Description du produit….

Voici quelques-unes de ces données dans une BD simple.

No. Facture	Client	Produit	Description	Prix Unitaire	Qté
1001	ABC	415	TRIANGLE	12.75	50
1002	ABC	416	CARRÉ	10.00	20
1003	XYZ	415	TRIANGLE	12.75	75

L’idée d’une base de données relationnelle est de répartir les données dans plusieurs base de données ou tables et de créer des connexions, des relations entre chacune d’elles. Voici comment les variables pourraient être divisées dans une BD relationnelle.

Facture	Client	Vendeur	Inventaire
No. Facture	No. Client	No. Vendeur	No. Produit
No. Produit	Adresse	Nom	Description
Qté vendue	Code Postal	Prénom	Prix unitaire
No. Vendeur	No. téléphone	No. Ass. Soc.	Qté disponible
No. Client	Personne autorisée	Date d’embauche	Qté commandée

Dans le tableau précédent, la table Facture va chercher les informations sur le client de la table Client par le champ commun NO. CLIENT (en rouge). Il est inutile de réécrire les données du client plusieurs fois. On peut aller chercher l’information grâce à une relation entre ces deux tables par le champ No. Client. La même chose se produit pour les informations nécessaires pour les tables Vendeur et Inventaire par leurs variables communes No. Vendeur et No. Produit respectivement.

De cette manière, il est inutile de réécrire les données redondantes ou répétitives. Ceci conserve de l’espace pour d’autres données. Pour les trois factures de l’exemple, on économise de l’espace et du temps à ne pas avoir à réécrire les informations sur le client “ABC” ni la description et le prix unitaire du produit “415″.

Définitions

L’utilisation d’une base de données apporte aussi de nouveaux termes à comprendre. Voici une liste des termes qui seront nécessaires de connaître pour gérer au mieux le logiciel Access.

Champ :	Une information nécessaire sur une personne, une chose ou un événement. Ex.: couleur, taille, modèle, date, nom, prénom, téléphone, adresses, description, commentaires etc.
Enregistrement:	Un regroupement de champs qui décrient une personne, une chose ou un événement. Ex.: nom, prénom, date de naissance, téléphone, numéro d’assurance sociale ou compagnie, adresse, téléphone, télécopieur, personne responsable ou département, personne responsable, téléphone.Le champ téléphone est utilisé de trois manières différentes. Il est soit le numéro de téléphone d’un employé, d’une personne dans une compagnie ou d’un département.
Table:	Un regroupement d’enregistrements sur un thème un commun. Ex.: employés, inventaire, client, fournisseurs, véhicules, contacts etc.
Base de données:	Un regroupement de tables, de requêtes, de formulaires, et de rapports et de programmation qui constitue un système complet. Ex.: gestion de la facturation, gestion de l’inventaire, immatriculation des véhicules, carnet de numéro de téléphone, réservations etc.

La définition d’une base de données prend maintenant un sens plus large qu’auparavant. Ce n’est plus juste un fichier qui contient de l’information utile pour l’utilisateur. Il contient aussi les requêtes, les formulaires, les états, les macros et les modules pour développer une “application” ou un “système” qui répond aux besoins spécifiques de l’utilisateur.

Quelles sont les composantes d’Access?

Tables :	Structure de la table, type de champs et les informations qui y sont entreposées.
Requêtes :	Recherche d’informations qui répond à certains critères déterminés par l’utilisateur.
Formulaire :	Présentation de l’information à l’écran d’une manière pratique pour l’utilisateur.
État :	Présentation de l’information sur papier d’une manière pratique pour l’utilisateur.
Macro :	Développement de routines pour automatiser certaines tâches.
Modules :	Programmation

Création d’une base de données

La première étape de la création d’une base de données est l’analyse. C’est d’ailleus l’étape la plus importante. Si vous passez trop rapidement sur cette étape, vous allez ensuite perdre beaucoup de temps et d’efforts à refaire ce qui aurait dû être accompli auparavant.

Avant de créer votre base de données, il faut avoir une idée claire. Il faut préparer une analyse des besoins auxquels il vous faudra répondre. Quelles sont les informations dont vous avez besoin? Ex.: Quelles informations ai-je besoin sur mes clients, sur mes fournisseurs, sur mon inventaire, sur mon personnel etc.

Par exemple, pour connaître le total des ventes, il me faudra connaître les quantités vendues et le prix unitaire de celle-ci.

Gardons l’exemple de la facture, et voyons les champs qui nous seront utiles….

Liste des champs

Voici la liste de champs que l’on peut retrouver une facture.

Date, Numéro de facture, Numéro de client, Adresse de facturation du client, Ville, Numéro de téléphone,  Adresse E-mail, Adresse de livraison, Personne contact, Conditions de paiement, Numéro de produit, Description du produit, Prix unitaire du produit, Quantité achetée, Total, sous-total, TPS (Taxe sur le Produits et Services, 7% du total), Grand total, Escompte, Bon de commande, Numéro du vendeur, Nom du vendeur …

On dirait pas, mais toutes ces informations peuvent être très utiles (j’ai suivi une formation GEA comptabilité avant de venir ^^)

La seconde étape : regrouper les informations dans des tables.

Il faut ensuite regrouper en entités tous ces champs dans une table ou un “thème” en commun. Ex.: Est-ce que le champ “Escompte” ou “Conditions de paiement” ira dans la table “Facture” ou avec “Client”?

Le concept est de distribuer les champs dans le plus grand nombre de tables possibles. Mais il y a certaines règles à suivre:

• Regroupement des champs dans des tables qui peuvent être reliées.

• Pas de dédoublement de champs, sauf pour les champs en commun.

• Pas de dédoublement d’entrée d’information.

• Pas de champs calculables dont on peut avoir le résultat avec les informations des autres champs des tables. Ex.: Total = Qté * Prix unitaire, donc le total ne sera pas une table.

Il faut regrouper les champs dans des tables. Quels sont les champs que l’on peut regrouper ensemble? Pour la facture, on retrouve des éléments qui distinguent la facture, le client, les produits et le vendeur. Ce sont les quatre tables qui seront utilisées.

Il faut aussi s’assurer que les champs sont dans la bonne table, qu’il n’y a pas de tables cachées à l’intérieur des autres (ça ferait tout “buggé” pour les requêtes après).

À l’exception des champs en commun qui servent à “relier” les tables, un champ ne devrait pas se retrouver dans plusieurs tables.

Déterminer les clés primaires

Une clé primaire est un champ qui permet de différencier un enregistrement des autres. Par exemple, bien qu’il puisse avoir plusieurs factures avec la même date, la même quantité achetée, au même client ou avec le même vendeur, il est impossible de retrouver deux factures avec le même numéro. Une clé primaire n’est pas obligatoire pour une table. Elle le devient lorsque vous voulez relier deux tables. L’une des tables doit avoir une clé primaire.

Déterminer les relations entre les tables

Pour qu’une relation soit possible entre deux tables, il faut:

• 2 tables (ou requêtes ou une combinaison des deux)

• 1 champ en commun dans chacune des tables.

• Même type de champ (Texte avec texte, numérique avec numérique… sauf exception de numéro auto avec numérique)

• Même longueur (Pas un champ long de 15 caractères avec un autre long de 50 caractères !)

• Même genre d’information

Vous n’êtes pas obligé de relier toutes les tables l’une à l’autre. Il est possible d’accéder à l’information tant que les tables soient reliées directement ou indirectement entre elles (l’intérêt d’un logiciel comme Accès….).

Déterminer les types de relations , appelées cardinalités

Il existe trois types de relations : 1 à 1, 1 à plusieurs et plusieurs à plusieurs.

Pour l’exemple, voilà comment on relie les tables voici comment relier les tables dont les informations se retrouvent sur une facture.

L’image ci-dessus démontre la liste des tables avec les champs qui les composent. De plus, les traits indiquent les relations entre les tables. La relation de types plusieurs à plusieurs requiert une table intermédiaire composée, au minimum de la clé primaire (d’où l’importance de bien créer des clés primaires) des deux tables à relier (ici, la table “Facture” fait le lien entre la table “clients” et la table “employés”). C’est la raison d’être de la table Transition Fact-Inv qui pourrait tout aussi s’appeler Items de la facture.

La normalisation et les formes normales.

L’avantage d’une base de données relationnelle est d’éviter au maximum les répétitions ou les redondances d’information. La normalisation sert à séparer la liste des champs en plusieurs tables pour avoir une base de données qui est plus efficace.

Première forme normale : répétition des données

Pour atteindre la première forme normale, il faut éliminer les groupes répétitifs en les séparant en plusieurs tables. Le travail à accomplir pour atteindre la première forme normale est d’éviter complètement les répétitions d’entrée de données.

Par exemple, une facture peut contenir plusieurs produits.

Numéro de facture	Numéro de produit
1	1, 3, 5

Donc, il peut avoir plusieurs numéros de produits pour une même facture. Ceci est de la redondance et ce n’est pas une forme appropriée pour conserver de l’information dans une base de données relationnelle. Comment fera-t-on ensuite pour relier une modification au bon produit? Il faut donc mettre Numéro de produit dans une table autre que Facture. On peut en même temps déplacer les champs similaires dans l’autre table.

Il faut s’assurer que l’utilisateur ne va pas entrer plusieurs fois la même information. Par exemple, cela ne serait pas efficace d’avoir une table “Facture” qui contiendrait aussi les champs “Nom du client”, “Adresse de livraison”, “personne contact”. Cela ne passerait pas à la première forme normale. La norme est qu’il faut que l’utilisateur rentre pour chaque facture la même information qu’il a déjà entrée dans les factures précédentes pour le même client.C’est pour cette raison qu’il faut “découper” la liste des champs dont vous avez besoin dans plusieurs tables pour avoir une forme efficiente d’entrée et d’utilisation des données.

Facture: Numéro de facture, date, bon de commande, escompte

Clients : Numéro de client, adresse de facturation, ville, numéro de téléphone, numéro de télécopieur, adresse de courriel, adresse de livraison, personne-contact, escompte.

Employés : Numéro du vendeur, nom, prénom, numéro d’assurance sociale

Inventaire : Numéro de produit, description, prix unitaire, quantité achetée, quantité disponible

Il faut ensuite déterminer la clé primaire pour chaque table. Cela est nécessaire pour la seconde forme normale. Une clé primaire est un champ, ou une série de champs, qui permet de distinguer un enregistrement des autres. Pour la table Facture, la clé primaire est le champ Numéro de facture. Le contenu de tous les autres champs de la table peut se répéter ce qui serait contraire à la convention d’une clé primaire.

Deuxième forme normale: Dépendance directe à la clé primaire

Il faut ici éliminer les dépendances partielles. Cela veut dire qu’il faut s’assurer que tous les champs de la table dépendent de la clé primaire de la table. Sinon, il faudra créer une nouvelle table ou déplacer le champ.

Le problème pour ce niveau est le champ Quantité achetée. Il dépend en même temps du numéro de facture et du numéro de produit. Une facture peut avoir plusieurs produits. Mais un produit peut aussi se retrouver sur plusieurs factures. Il y a donc une relation de plusieurs à plusieurs entre ces deux tables.

Facture : Numéro de facture, Date, bon de commande, escompte

Clients : Numéro de client, adresse de facturation, ville, numéro de téléphone, numéro de télécopieur, adresse e-mail, adresse de livraison, personne contact, escompte.

Employés : Numéro du vendeur, nom, prénom, numéro d’assurance sociale

Inventaire : Numéro de produit, description, prix unitaire, quantité disponible

Items : Numéro de facture, Numéro de produit, Quantité achetée

Voici un exemple du contenu de la table items. Pour cette base de données, la table permet de relier les tables Facture et Inventaire. La clé primaire de cette table est composée de deux champs: Numéro de facture et Numéro de produit. Ce sont aussi les clés primaires des tables Facture et Inventaire.

Numéro de facture	Numéro de produit	Quantité achetée
1	1	10
1	2	25
2	1	50
2	2	100

Dans cette table, un même numéro de facture et un même numéro de produit peuvent être utilisés plusieurs fois. Mais seulement un à la fois. Il n’y aura jamais deux fois le même numéro de facture et le même numéro de produit.

Troisième forme normale : Dépendances partielles de la clé

Il faut ici éliminer les dépendances transitives. Il faut s’assurer qu’il n’y a pas de tables qui soient cachées parmi les autres.

Aussi, les tables ne devraient jamais contenir de champs calculés (dit précédemment). Il est possible d’avoir le “sous total” en multipliant les “Quantité vendue” par les “Prix unitaire”. Donc, il est inutile de l’avoir dans les tables.(ne nous encombrons pas avec des informations inutiles….)

La troisième étape est de déterminer les relations entre les différentes tables. Il faut regarder quelles sont les relations possibles entre les entités. Pour avoir une relation, deux tables doivent avoir au moins un champ en commun. Une fois que vous avez réalisé les regroupements et déterminé les relations, vous avez votre base pour la création des tables.

Maintenant que vous avez les entités et les champs qui les composent, pensez à quoi devrait ressembler vos formulaires et vos états. Est-ce que les champs que vous avez choisis répondent à tous vos besoins? Réfléchissez bien, car cela est super important pour que la base de données et les requêtes fonctionnent correctement après.

Voici un aperçu de ce que le logiciel Access permet de faire. Il n’est pas très compliqué à prendre en main, une fois qu’on a compris le principe. Je vous ai expliqué ici jusqu’au stade des relations entre les tables. Le but de ce tutoriel n’est pas de tout vous expliquer (car cela est très facile à prendre en main pour des gens comme vous qui utilisez beaucoup l’informatique) mais à vous démontrez que si un jour vous créez votre entreprise, vous pourrez avoir besoin de ce logiciel très utile qui vous aidera dans votre gestion (afin que votre entreprise survive plus d’une année   ).

J’espère que vous avez compris le principe général, et que vous utiliserez ce logiciel si jamais vous êtes amenés à gérer une entreprise plus tard.

Votre site tout beau tout neuf pour la promotion du tout dernier Bilboquet a débarqué sur la toile, vous en êtes fier, le contenu est intéressant, le webdesign est sublime, en d’autres termes vous êtes prêts pour être élu Web Site Of The Day par le FWA siouplai !
Petit bémol : Nombre de visite depuis 1 mois = 8 (dont 6 by yourself). C’est-à-dire encore moins que le Skyblog de Miguel qui nous parle de toute l’actu de la nouvelle star des 6-8 ans !

LA question est donc : CKOMENKONFAIPOURKELESGENSYVIENNE ?
LA réponse est donc : La création d’une bannière web. Celle-ci peut-être très bénéfique, car elle a pour but de promouvoir votre site en affichant vos publicités sur différents sites Internet.

Tout d’abord il faut se rendre compte qu’une bannière sera une sorte de pré entrée pour un site internet, si un internaute n’aime pas votre publicité il n’aimera pas votre site, pire encore il n’y rentrera tout simplement pas ! Pour éviter cela il faut créer une bannière esthétique (par son design et son graphisme), percutante (par sa mise en page, son dynamisme et son contenu) et efficace (par son concept, son originalité et son message). Je ne promets rien ici en revanche.

Sur internet plusieurs formats sont devenus des standards, c’est sur ces formats qu’il faudra vous baser pour créer vos bannières. Trois grands formats sont disponibles : La bannière standard : 468 pixels sur 60. Le carré : 250 pixels sur 250. Et le bouton : 88 pixels sur 31. Dans l’exemple ci-dessous nous allons créer un bandeau de 468 x 60 pixels.

En ce qui me concerne je vais travailler sur la bannière du site Americandad.fr que j’ai relooké il y a quelques mois de cela.

Pour commencer ouvrez Photoshop. Et oui pas de Flash avec moi dsl.
Créez un nouveau document de 468 x 60 pixels

Vous devriez avoir un document de ce type :

la première chose que je vais ajouter à mon bandeau, c’est mon logo, en effet une bonne pub est une pub identifiée. L’internaute doit reconnaitre d’un seul coup d’œil à qui il a affaire.

Je place ensuite mon arrière plan aux couleurs américaines pour donner un peu plus d’impact visuel à ma bannière

La bannière prend déjà forme. Je vais désormais appliquer un effet d’ombre portée à mon logo afin de le faire ressortir de l’arrière plan. Pour cela  je double clique sur mon calque “logo” pour accéder à la fenêtre “style de calque”.
Je sélectionne “Ombre portée” et je modifie les indications suivantes : Distance = 5 px / Grossi = 15 % / Taille = 10 px

Ce qui nous donne ceci :

Je rajoute ensuite le portrait du héros de la série, Stan Smith, en lui appliquant les mêmes propriétés que celles du logo.

Il est temps de placer la description de l’offre du site. Ici je veille à ne pas être trop commerciale, je ne vends pas de produit, mais si tel était le cas il serait indispensable de placer un slogan et une accroche publicitaire.
Je veille également à respecter la charte du site et à être lisible.

Petite mise en scène de ce que cela pourrait donner :

Voila votre bannière est terminée. En plus de l’aspect publicitaire de la chose vous pouvez maintenant l’uploader sur votre serveur (via votre logiciel FTP) et donner l’adresse à tous pour que les visiteurs puissent directement créer un lien vers votre site.

Aujourd’hui, le but va être d’apprendre (ou de revoir pour certains) comment faire un rollover.

Niveau du tutoriel : facile

Logiciels utilisés : photoshop ou illustrator,  puis dreamweaver CS3

Temps : une dizaine de minutes

I Un peu de théorie !

Avant de commencer, nous allons rapidement définir ce qu’est un rollover.

Le rollover est un événement déclenché par le survol de la souris, ce qui explique que l’on appelle aussi cette technique : l’image survolée.

Le rollover est composé en 2 parties : le roll-over (lorsque la souris est au dessus de l’élément) et le roll-out (lorsqu’elle sort de l’élément). De manière plus simple, le rollover correspond en une succession de 2 images, permettant ainsi de donner un effet de dynamisme et rendre le site plus attrayant. La première image est donc visible en permanence sur le site alors que l’a seconde n’apparaît que lorsque l’internaute passe ou clique dessus.

II Passons maintenant à la pratique !

Pour commencer, nous allons faire un rollover basique :  une barre de menu qui change d’aspect lors du survolage de la souris.

• Ouvrez photoshop (ou illustrator)
• Créer votre l’architecture de votre page web (un petit rappel : 1024 / 768 en RVB) puis enregistrez-la.

Voici par exemple la page que je viens de créer :

• N’oubliez pas de créez vos tranches pour que l’on passe ensuite sur du web.
• Je souhaiterais que lorsque la souris passe sur un mot de ma barre de menu, celui-ci s’éclaircisse.
• Pour cela, je vais enregistrer mon document sous un autre titre : par exemple “siterollover”.
• A partir de là, on peut faire les modifications que l’on souhaite afin de rentre le résultats final. Je souhaite rester assez discrète dans mon effet. Pour cela, je vais lui faire un léger effet de lumière externe. Ce qui donne ceci :

mon onglet avant :

mon onglet après :

• Oui, je sais, c’est très discret, mais je vous rappelle que c’est ce qui est souvent le plus simple qui marche le mieux.
• Une fois que tous vos onglets ont pris la forme que vous souhaitiez (celle qu’ils auront lorsque le curseur sera dessus), enregistrez (refaites vos tranches si elles n’y sont plus) puis passez sur Dreamweaver.
• Ouvrez Dreamweaver
• Faites les méthodes habituelles pour créer votre site (”site” > “nouveau site” > “fichier” > “nouveau”…)
• enregistrer le premier gabarit que vous avez fait au départ (sans les effets de rollover) comme page de modèle
• Une fois cela fait, cliquez sur votre premier onglet. Un contour noir se créé. Il correspond à la tranche que vous aviez faite auparavant sur Photoshop ou Illustrator.

• Une fois votre onglet sélectionné, il est important de regarder la fenêtre en bas de votre écran pour avoir certaines informations concernant votre image telle que la source ou encore le lien.

• Par exemple, mon fichier s’appelle “site-web_03.gif” Le numéro 3 correspond au numéro de ma tranche. C’est la 3eme que j’ai faite. L’image est actuellement en roll-out. C’est l’image permanente.
• Il faut maintenant la remplacer par l’image roll-over, c’est à dire celle qui s’affichera quand la souris passera dessus.
• Pour cela, copier double cliquez dans l’onglet source pour tout sélectionner puis faite copier.
• Supprimez l’image. Il ne reste plus que la couleur de votre fond.

• Dirigez-vous dans votre menu du haut, cliquez sur “insertion” > “objet image” > “image survollée”.
• La fenêtre intitulée “Insérer une image survolée” s’ouvre.
• Cliquez sur “Parcourir” pour trouver votre image originale. Cela consiste à sélectionner dans vos dossiers votre l’image de base (la roll-out)
• Faites la même chose pour votre image survolée (la rool-over)
• Vous pouvez rentrer un texte secondaire si vous le souhaitez. Par exemple, le titre de votre onglet.
• Une fois tout cela fait, cliquez sur OK

• Puis enregistrer de nouveau votre modèle.
• Vous venez de faire votre premier roll-over. Vous pouvez faire la même chose avec tous vos autre onglets.
• L’image survolée est maintenant insérée dans votre page. Cependant, vous ne pourrez la voir que vous lancerez le navigateur et réactualiserez votre page.

III Et le code dans tout ça !

Pour ceux qui n’aime pas faire la création graphique et préfère le code, il existe plusieurs solutions.

La plus simple, utiliser un générateur de roll-over sur Internet qui ressemble à ceci : Mais attention, ces générateurs se sont pas toujours bons et mettent beaucoup plus de code qu’ils n’en devraient, ce qui peut être source de problèmes!

Le plus simple revient dont à utiliser le code ci-dessous, en remplaçant les éléments en gras tels que “monrollover”, “image-substitution”, “votre lien”…

<HTML>
<HEAD>
<SCRIPT LANGUAGE=”Javascript”>
<!–
monrollover= new Image( );
monrollover.src=”image-substitution.gif“;
//–>
</SCRIPT>
</HEAD>
<BODY>
<A HREF=”votre-lien.html” onmouseover=”monrollover.src=’image-subsitution.gif‘;” onmouseout=”monrollover.src=’image-defaut.gif‘;”>
<IMG SRC=”image-defaut.gif” name=”monrollover” border=0>
</A>
</BODY>
</HTML>

Pour ceux qui souhaiteraient plus d’informations concernant cette partie, je vous conseille d’aller sur ce site, qui est très intéressant et explique de manière simple.

Voilà, vous savez maintenant faire des rollovers ! Comme vous avez pu le voir, c’est très simple et rapide! Alors n’hésitez plus a en avoir recours !

Petite recette simple et efficace pour créer une interface en 3D avec Photoshop.

Nous partirons sur la base de 3 images, au choix. A titre d’exemple j’utiliserais 3 captures d’écran à partir d’i Tunes.

Ensuite ouvrez Photoshop et importez vos 3 images, que vous disposerez ensuite sur une même page afin d’avoir vos 3 images en 3 calques.

Sélectionnez les 3 calques et faites une transformation manuelle (cmd + T) et réduisez l’image puis Entrer pour valider.

Dupliquer ces 3 calques / Clic droit => dupliquer les calques

Sur ces 3 calques sélectionnés, faites un clic droit et sélectionner symétrie axe verticale. Ces 3 calques verticaux feront l’objet de l’effet graphique voulu.  Glissez ces 3 calques juste en dessous de l’image de base.

Puis sur le premier calque dupliqué, insérez un masque de fusion. Avec l’outil dégradé (couleur noir et blanc) effectué le dégradé que vous souhaitez. (Histoire de faire un reflet de l’image originale)

Sur chaque calque dupliqué, dupliquer le masque de fusion, (Alt + clic). Vous devez normalement avoir 3 calques sans effet et 3 calques avec le masque de fusion souhaité.

Créer un nouveau calque que vous nommerez « arrière plan ». Prenez l’outil pot de peinture et appliquer la couleur blanche.

Affichez tous les calques et créez 3 groupes.

Que vous nommerez visuel 1 / visuel 2 et visuel 3 et les 2 calques qui correspondent, c’est à dire le visuel de base et ce même visuel avec l’effet  (Cmd + G)

Puis sélectionnez le groupe visuel 1, allez dans Menu, 3D et cliquez sur « nouvelle carte postale 3D  à partir de ce calque ».

Vous effectuerez cette opération sur les 3 groupes.

Séelctionnez le groupe 1, cliquez sur l’outil Rotation 3D, une flèche apparaît alors, C’est la représentation des axes.

Avec cet outil vous pouvez régler l’orientation de votre image. Avec l’outil panoramique 3D vous glisser votre image ou vous le voulez et enfin avec l’outil glissement 3D vous déplacer votre image avec perspective.

Faites ceci pour vos 3 images et placez-les comme vous le souhaitez.

La prochaine étape ? A vous de mettre en mouvement ces objets via Flash !!!

En espérant que ce tutoriel vous ait plu !

Envie de Programmation Web ?

Vous voulez vous initiez à la programmation d’un site web, mais vous ne voulez pas vous prendre la tête ?

Vous avez envie de vous prendre pour un programmeur en herbe et concevoir vous même vos pages internet ?

Il existe un moyen simple de satisfaire ces envies !  Pour cela, il vous suffit de deux choses : d’un navigateur, et du bloc note.

Présentation du HTML

Le langage HTML (HyperText Mark-up Language) est un language de  marquage, aussi appelé de structuration, ou de balisage. C’est un format de données conçu pour représenter les pages web. HTML permet de mettre en forme le contenu des pages, d’inclure des ressources multimédia (images, vidéo, formulaires de saisies…).

Le langage HTML permet la lecture de documents sur Internet à partir de machines différentes, grâce au protocole HTTP; permettant d’accéder via le réseau à des documents représentés par une adresse unique, appelée URL.

C’est donc un langage simple de programmation, qui avec un peu d’entraînement, peut être très vite maîtrisé. Les balises se retenant facilement.

Structure du HTML

Un document HTML est séparé en 2 parties, d’un côté, on retrouve un en-tête, et de l’autre un corps.  L’en-tête contient les informations principales du document, il s’agit donc là d’exposé le sujet que vous allez traiter avec un titre. Le corps de texte contient ce qui sera affiché sur votre page web.

Voici un exemple d’une structure d’un fichier HTML :

<html>

<head>

<title> Exemple d’une structure HTML </title>

</head>

<body>

Ceci est donc le contenu de la page web. Le titre mis entre les balises <title> et </title> n’apparait pas dans la page web, mais dans le bandeau de titre de votre naviguateur. Vérifiez vous devez donc lire “Exemple d’une structure HTML”. C’est bien ça ?

</body>

</html>

Essayer de taper cela dans votre bloc notes, une fois cette écriture effectuée, enregistré votre document avec l’extension “.html” .

Pour vérifier que cela marche, retrouver l’emplacement où vous avez enregistré votre document, puis ouvrez le. Normalement, votre icône de votre document doit être en rapport avec le navigateur utilisé.

(more…)

Hello les geeks…

Tutoriel sur CS3 et CS4

Aujourd’hui je vous propose un petit avant goût de Flash.

Je vous guiderais premièrement sur un exercice qui vous permettra de créer une interpolation de forme.

Créer tout d’abord un nouveau fichier  adobe flash.

• Commencez par renommer votre calque comme vous le souhaitez
• Cliquer sur l’outil Ovale et dessiner dans votre zone de travail un cercle et sans contour.

• Puis allez dans le menu insertion => scénario => image clé
• Une fois cette étape faite, sélectionner votre rond et supprimer le.
• Vous allez maintenant créer la forme de destination, faite par exemple un carré de couleur jaune, et sans  contour.
• placer votre curseur sur l’image de départ, allez dans Menu Interpolation et choisissez Forme

• Allez dans le menu contrôle, et cliquer sur Lire.

BRAVO, vous avez réussi à créer une interpolation de forme !!

L’exercice numéro 2 consiste à créer cette fois-ci une interpolation de mouvement ou autrement dit de morphing !

L’objectif principal étant de paramétrer une animation, par sa taille et sa cadence.

Alors,  commencez par créer un nouveau fichier Flash

• vous allez tout d’abord changer la dimension de l’animation via le bouton “taille” et régler la hauteur à 150 px.
• Faites un double clique sur l’outil main, puis régler la cadence dans la barre d’outil du bas et régler la sur 24.
• Créez ensuite la forme de votre choix, par exemple un rond vert sans contour.
• Votre rond est apparent, sélectionnez le et convertissez le en symbole. Ce qui est une étape indispensable pour créer une interpolation de mouvement.
• Pour ceci, allez dans le menu MODIFICATION, convertir en symbole. Donnez un nom à ce symbole et coché “clip”.
• Votre objet est maintenant une occurrence de symbole. La prochaine étape sera d’animer cette occurrence.
• Dans le menu Insertion, sélectionnez scénario, puis image clé et déplacer l’objet vers la droite.
• Sélectionner la première image et choisissez dans interpolation : Mouvement
• Appuyez sur entrée et vous verrez votre objet se déplacer

Voici un petit tutoriel rapide mais qui vous donnera les clés pour comprendre ce logiciel !

A bientôt les loulous !