"1">
 
$connect=mysql_connect("localhost","user","pass");
mysql_select_db("anniversaire",$connect);
 

$requete="SELECT nom, prenom, date_naissance FROM membres";
 
$query=mysql_query($requete, $connect);
while
	  
    
		
    
      
      null@janeirostudio.com
      Wed, 14 Mar 2007 00:00:00 +0100
      http://www.janeirostudio.com/?articles=65
      http://www.janeirostudio.com/?articles=65
      Lorsqu’on  passe d'un ordinateur Windows à Macintosh, la phase d’adaptation à ce nouvel environnement n’est pas toujours évidente et peut même s’avérer longue et ardue. A mes débuts sur Macintosh, il m'a fallu du temps pour comprendre comment faire toutes les choses que j’effectuais naturellement sur mon PC.

Cet article a pour objectif de vous faciliter cette démarche afin que vous vous sentiez très vite à l'aise sur ce nouveau système d'exploitation. Ce qui suit est une présentation des concepts de base Mac OS X qui met  l'accent sur les différences par rapport à Windows XP.

Vous noterez que, dans les images illustrant l'article, je n'utilise pas le jeu d'icônes fourni par Apple. La forme et la signalétique étant pratiquement identiques, vous ne devriez pas éprouver de difficulté à les reconnaître. Vous pouvez télécharger le jeu d'icônes  Agua sur Iconfactory.

Mac OS X
Le système d'exploitation (ou OS pour Opérating System en anglais) gérant votre nouvelle machine est Mac OS 10.4 Tiger. Depuis la version 10 (X), Mac OS fait partie de la famille des systèmes UNIX (BSD). Cette particularité lui apporte une stabilité et une sécurité accrue, mais aussi certaines différences par rapport à Windows. 

Différentes versions de Mac OS X 
10.0 (Cheetah), 10.1 (Puma), 10.2 (Jaguar), 10.3 (Panther), 10.4 (Tiger), et enfin Mac OS 10.5 Leopard (attendu au cours de l'année 2007).

Le gestionnaire de fichiers 
Au premier démarrage de votre système, vous remarquerez qu'il n'y a pas de poste de travail. La quasi totalité des actions commence et se termine sur le bureau. C'est à partir de cet espace de travail que vous accédez aux disques durs, CD-ROM ou tout autre périphérique de stockage.
 
L'accès aux fichiers se fait par le Finder qui est l'équivalent de l'explorateur de Windows. Tout comme son homologue, arrêter l'exécution du Finder empêche la navigation dans l'architecture des répertoires de votre ordinateur.
 
La fenêtre du Finder est composée sur la gauche d'une partie représentant des raccourcis vers les disques et les dossiers les plus utilisés (Maison, Applications, Documents, Images, Musique, ...). Vous pouvez placer d'autres raccourcis vers vos répertoires ou documents préférés en faisant glisser ceux-ci dans cette zone. Pour supprimer un raccourci, il suffit de le glisser hors de la zone. L'animation (nuage de fumée) confirme la suppression.




 
L'interaction avec les dossiers et les fichiers se fait comme sur Windows avec quelques petites particularités :
Le mode de présentation "colonnes", inexistant sur Windows, qui vous permet de naviguer dans l'architecture sans vous perdre.
Le mode de présentation "Liste"  différent de celui qui existe sur Windows. Ce mode s'apparente plus à l'architecture "en escalier" de l'explorateur Windows.  
Pour renommer un fichier ou un répertoire, il faut le sélectionner et taper sur la touche Entrée (retour chariot). Oubliez la méthode clic droit, renommer.
La modification manuelle de la taille des fenêtres  ne peut se faire que par le coin inférieur droit.
Sur Mac OS X la fonction "couper/coller"  de Windows est remplacée par la fonction "glisser/déposer". Elle vous permet de  déplacer un fichier d'un répertoire à un autre. Néanmoins, cette fonction "couper/coller" telle qu'elle existe sur Windows est disponible dans le cas de la manipulation de texte.
Si vous écrasez un dossier (placer un dossier identique de même nom dans un même répertoire), contrairement à Windows qui fusionne les contenus de 2 dossiers (sauf dans le cas de noms de fichiers identiques dans les dossiers de même nom), le Finder va supprimer l'ancien dossier pour le remplacer par le nouveau. Attention donc à la perte de données à cause de cette action.

Pour modifier les options de la barre d'outils du Finder, faites un clic droit (ctrl+clic) sur celle-ci et choisissez Personnaliser la barre d'outils. 

Comportement des fenêtres
Comme sur Windows il est possible d'agir sur le comportement (agrandir, réduire, ...) des fenêtres. Sur Mac OS X les boutons sont situés en haut à gauche. Le bouton rouge ferme la fenêtre (pas l'application : voir chapitre sur le Dock), l'orange la réduit dans le Dock, et enfin, le vert l'agrandit dans la limite du contenu. Le mode plein écran étant généralement réservé à la vidéo.


Pour finir, le mode Exposé permet de faire le tri et de naviguer parmi les fenêtres ouvertes à l'aide d'un raccourci clavier. En appuyant sur la touche F9, Exposé vous affichera les vignettes de toutes les fenêtres ouvertes, la touche F10, celles de l'application en cours d'utilisation, et enfin, la touche F11 masquera sur les bords de l'écran toutes les fenêtres pour vous permettre d'accéder au bureau.



Depuis Mac OS 10.4 Tiger, la touche F12 est dédiée à Dashboard. Quand vous appuyez sur cette touche (ou sur l'icône dans le Dock), une couche translucide s'affiche au dessus de votre bureau, vous donnant accès à des applications appelées Widgets (Post-it, calendrier, météo, ...). Cliquez sur le signe "+" sur le coin inférieur gauche pour ajouter des nouveaux Widgets et sur le petit "i" pour le réglage des options d'un Widget.
La barre des menus
Ce qui déstabilise au début l'utilisateur Windows est que Mac OS dissocie les menus d'une application des fenêtres de celle-ci. Sur Mac OS X vous ne trouverez pas les menus Fichier, Édition, ... sur les fenêtres, mais sur l'unique barre des menus en haut de l'écran. Les menus changent en fonction de l'application en cours d'utilisation. La barre des menus commence toujours par le menu Pomme (options du système), suivi du nom de l'application (options de l'application) et enfin par les éléments communs (Fichier, Édition, ...).

Le Dock
Le Dock peut être considéré comme la barre de tâches de Windows (la barre où s'ouvrent les fenêtres des programmes en bas de l'écran). Le Dock permet de placer aussi des alias (raccourcis) vers vos applications préférées. En fait, seules les 2 icônes (le Finder et la Corbeille) situés aux extrémités du Dock ne sont pas de simples raccourcis. Pour placer un raccourci vers une application, il suffit de faire glisser l'icône correspondant à celle-ci  vers le Dock. Pour la supprimer, il suffit de la faire glisser en dehors du Dock. L'animation (nuage de fumée) confirme la suppression du raccourci du Dock.

À chaque fois que vous ouvrez une application, son icône apparaît dans le Dock, quand vous la quittez l'icône disparaît. Faire glisser l'icône d'une application à l'intérieur du Dock, quand elle est en cours d'exécution, conservera l'icône qui, alors, deviendra un raccourci.
Une des particularités de Mac OS est  que,  lorsqu’on clique sur le bouton rouge pour fermer une fenêtre, celà n'arrête pas l'exécution du programme, mais ferme uniquement la fenêtre. Les applications en cours d'exécution sont matérialisées dans le Dock par un triangle noir sous l'icône de l'application. On arrête l'exécution d'une application par le menu Nom de l'application → Quitter, par le raccourci clavier PommeQ, ou encore en faisant un clic droit (ctrl+clic ou clic gauche prolongé) sur l'icône dans le Dock pour faire apparaître un menu contextuel et choisir Quitter.
Architecture des répertoires
Comme sur les systèmes UNIX, les fichiers de l'utilisateur sont placés dans un répertoire Maison (qui porte votre nom de connexion) séparant ainsi les fichiers systèmes importants de vos documents et réglages personnalisés. Sauf si vous êtes un utilisateur averti, vous ne devez donc pas toucher aux fichiers qui ne se trouvent pas dans votre dossier utilisateur (maison).
L'utilisation de ce concept (isolement du répertoire de l'utilisateur) est un avantage pour la sauvegarde de vos données, mais aussi pour la sécurité. Dans votre dossier utilisateur (maison), vous remarquerez qu'il y a des répertoires prédéfinis qui n'ont pas d'importance particulière (à l'exception du dossier Bibliothèque) et contribuent simplement à l'organisation de vos documents.
Il est important de ne pas renommer les répertoires prédéfinis de votre répertoire utilisateur (maison). Mac OS X étant multilingue, il traduira dynamiquement Library par Bibliothèque, Pictures par Images, etc. Si vous renommez Bibliothèque en Réglages, par exemple, cela entraînera une confusion du système.
Particularité du dossier "Bibliothèque" (Library) dans votre répertoire utilisateur
C'est dans ce répertoire que sont placés les fichiers de configuration de l'utilisateur. Ce dossier correspond au répertoire Documents and setting sur Windows. Même si vous ne risquez pas de détruire le système, il est important de bien réfléchir avant de manipuler les fichiers à l'intérieur de ce dossier pour ne pas avoir à reconfigurer certaines fonctions ou perdre des données telles que vos emails, vos mots de passe, vos favoris, etc. 
Dans les cas extrêmes, vous pouvez supprimer votre dossier utilisateur   en passant par la gestion des comptes dans les Préférences Système. Créez ensuite un nouveau compte (donc un nouveau répertoire Maison). Avant de supprimer votre compte utilisateur, n'oubliez pas de faire une sauvegarde de vos documents.
Particularité du dossier "Sites" dans votre répertoire utilisateur
Ici, vous pourrez stocker vos fichiers HTML (ou autre) si vous souhaitez héberger un site internet sur votre ordinateur. Mac OS X est fourni avec le serveur Web Apache. Pour utiliser le serveur Web, vous devez activer l'option "Partage Web personnel" dans les préférences systèmes (icône partage).
Particularité du dossier "Musique" dans votre répertoire utilisateur
Ce répertoire n'a pas d'importance particulière sauf si vous utilisez le logiciel iTunes (fourni avec votre Mac) pour gérer votre musique. iTunes est un logiciel puissant capable de gérer une grande quantité de musique et de ce fait, il peut déstabiliser l'utilisateur et iTunes lui-même dès qu'on essaye de modifier les dossiers prédéfinis.
Si vous supprimez (ou renommez) le dossier iTu ]]>
	  
    
		
    
      
      null@janeirostudio.com
      Sat, 20 Jan 2007 00:00:00 +0100
      http://www.janeirostudio.com/?articles=64
      http://www.janeirostudio.com/?articles=64
      En matière de photographie, vous avez sans doute déjà entendu parler de lumière et d'exposition. Tous ces clichés de vacances trop sombres ou trop éclairées, toutes ces photos d'anniversaires où l'on ne distingue pas grand-chose. Mais qu'est-ce qui ne va pas ? Nous laissons par facilité ou ignorance la gestion de l'exposition à l'appareil photo. Généralement, il ne s'en sort pas trop mal selon la situation et le type de boîtier que vous avez acheté, mais le résultat n'est pas toujours idéal.

Nous verrons dans cet article comment maîtriser l'éclairage naturel de vos cliché .
 

Note : dans le cadre de cet article, nous avons utilisé un appareil Canon EOS 300D muni d'un objectif 28-55mm.

Réaliser une photographie correctement exposée
La théorie
L'exposition en photographie est la combinaison de l'ouverture du diaphragme et de la vitesse d'obturation. Ce résultat donne une quantité de lumière qui parvient au capteur de l’appareil photo. On parle de résultat, car différents facteurs influencent ce processus. Bien coordonner tous ces paramètres vous permettra d’avoir une photo correctement éclairée, donc de meilleurs atouts pour réussir vos clichés.
La pratique
Comme nous l'avons précisé en introduction, le but est de réaliser une photographie correctement exposée, nous allons donc repérer les bonnes valeurs d'exposition par la prise d'un cliché en mode auto.
1. Choisissez un sujet d’essai fixe avec une luminosité globale uniforme,
2. faites une photo en mode auto et repérez les valeurs de vitesse et d'ouverture (exemple : f 5,6 et 1/100s),
3. positionnez votre appareil en mode manuel, puis rentrez les valeurs retenues précédemment.
4. Une fois ces valeurs définies, vous ne manipulerez que le réglage de la vitesse d'obturation.
Trois types d'expositions 
Sous-exposition (1/200s) : pour avoir une photographie sous-exposée il suffit d’augmenter la vitesse d’obturation, c'est à dire passer de 1/100s à 1/200s, la quantité de lumière suffisante n’aura pas le temps d’arriver au capteur, ce qui donnera une image trop sombre.
 
Surexposition (1/13s) : pour avoir une photographie surexposée, il suffit de faire l’inverse, c'est-à-dire diminuer la vitesse d’obturation (de 1/100s vers 1/13s) et la quantité de lumière arrivera en excès au capteur, ce qui donnera une image trop éclairée.
 
Exposition idéale (1/100s) : pour avoir une exposition idéale, il faut calculer la quantité de lumière nécessaire au capteur pour qu’il soit éclairé correctement. Cela peut être fait en manuel (ex : mettre la vitesse sur 1/100s) mais en général c’est le boîtier qui s’en charge dans des situations normales d’éclairage. 
 
Ne vous inquiétez pas si les premiers clichés ne sont pas réussis, c'est avec de la persévérance que l'on maîtrise son sujet. En effet, chaque sujet possède une intensité lumineuse différente qu'il faudra maîtriser à l'aide de votre boîtier. 
Cas d'un éclairage complexe
La théorie 
Maintenant étudions le cas d'une scène à photographier où l’éclairage est complexe, car comportant des zones très sombres et d'autres très claires. En effet, si celle-ci comporte un fort contraste cela pose problème au boîtier, le mécanisme n’arrive à évaluer correctement ces zones ou ne possèdent pas les moyens de le faire tout simplement (composants électroniques bas de gamme).
Sur la photo à droite, on constate que le ciel est surexposé et que le feuillage garde ses couleurs. Tout le travail réside maintenant dans l’évaluation des zones de lumières par le photographe qui doit prendre les bonnes décisions, changer de point de vue ou alors faire l’impasse sur certains détails qui seront trop sombres. On peut également faire un compromis des deux plus fortes valeurs.
On préférera toujours une photo sous-exposée (mais pas trop)  à une photo surexposée, car les zones brûlées (blanches) ne peuvent pas être rattrapées par un logiciel de traitement d’image. Cela dit, certains boîtiers haut de gamme permettent de différencier plus facilement les forts contrastes de lumière par de multiples points de calcul TTL (through the lens). Les surexpositions et sous-expositions sont alors régulées facilitant de ce fait le travail du photographe.
La pratique
Nous allons donc essayer de prendre un cliché d'une scène comportant un fort contraste de lumière, mais d'abord localisons ces fameux capteurs TTL.

1. Mettez-vous en mode auto (A),
2. Pressez le déclencheur à mi-course vous constaterez qu'un ou plusieurs points lumineux TTL s’allument dans le viseur aux endroits définis par calcul automatique (ici, une mesure 4 points TTL)
3. Relâchez le déclencheur.
 
 
Pour prendre ce cliché, nous allons placer l'appareil en mode Programme (P) puis,

1. Choisissez le collimateur Auto-focus central fixe
2. Cadrez et pressez le déclencheur à mi-course 
 
Vous constaterez que la netteté et l’exposition se feront grâce au point central de l’image. Si celui-ci est à la bonne luminosité par rapport à l’image entière vous aurez une photo correctement exposée dans l’ensemble. Si ce n’est pas le cas, vous aurez trop de zones sous-exposées ou surexposées.
La solution
Lorsqu'une scène comporte des particularités au niveau de la luminosité, il faut décider de la zone de lumière à prendre en compte :

1. Visez la zone la plus éclairée du viseur    
2. Appuyez sur le déclencheur à mi-course
3. Recadrez à votre convenance sans lâcher le bouton
4. Pressez le déclencheur complètement.
 
    Vous n’aurez aucune zone surexposée, mais sûrement des zones sous-exposées (voir ci-dessus). Ici on constate que le ciel très lumineux est correctement exposé, par contre le feuillage lui est trop sombre et flou, car la mise au point s’est fait sur le ciel (profondeur de champ).
Conclusion
Ces photos n’ont aucun intérêt artistique, mais illustrent très bien la différence de calcul de la luminosité.
Par contre, si vous souhaitez obtenir un juste milieu, vous pouvez mettre le boîtier en mode manuel (M) et agir directement sur les paramètres d'ouverture et de vitesse pour obtenir un résultat homogène sans avoir à recadrer. Vous pourrez ensuite, faire le rattrapage lumineux et colorimétrique avec un logiciel dédié.
Et si ce n’était qu’une histoire de lumière? L’affaire ne serait pas aussi dure à négocier. À cela s’ajoute la gestion de la profondeur de champ (netteté), le type de sujet et bien d’autres paramètres encore. Dans cet exemple, il aurait fallu associer la profondeur de champ et l’exposition pour réussir la prise de vue.
 À vous de jouer maintenant, en n'oubliant pas que de multiples clichés sont nécessaires afin d'obtenir le meilleur résultat possible.
 ]]>
	  
    
		
    
      
      null@janeirostudio.com
      Tue, 14 Nov 2006 00:00:00 +0100
      http://www.janeirostudio.com/?articles=61
      http://www.janeirostudio.com/?articles=61
      À l'occasion de la sortie de la nouvelle version de CSSEdit, je me suis décidé à écrire un article pour présenter ce logiciel de création de feuille de style. Ce logiciel est en partie responsable de mon passage de la plate-forme Windows à celle d'Apple, je me devais donc de faire une présentation de cette petite merveille. CSSEdit 1x était déjà sans aucun doute le meilleur éditeur CSS du marché, car il savait allier puissance, convivialité et productivité. La version 2.0 nous offre un logiciel encore plus puissant et intuitif qui permet à quiconque de créer, analyser, déboguer des feuilles de styles avancées en très peu de temps.


Note : CSSEdit, ne vous exempte pas de l'apprentissage du code CSS, même s'il contribue beaucoup à la compréhension du résultat d'un style appliqué à un élément. C'est un outil pour vous permettre d'améliorer votre productivité en vous évitant de taper des centaines de lignes de code ou d'utiliser plusieurs outils moins ergonomiques. La compréhension du code vous permettra de détecter d'éventuels bogues de l'application ou d'insérer des fonctions avancées qui ne peuvent se faire via l'interface graphique.

Présentation de l'interface
Comme vous pouvez le voir (figure 1), l'interface du logiciel est très simple. Elle peut être encore simplifiée en choisissant de ne pas afficher le code source. Dans l'exemple ci-dessous, (figure 1) j'ai choisi de vous présenter l'interface la plus complète (avec le code source) qui se présente en 3 panneaux (de gauche à droite) : 1 - l'organisation des styles, 2 - l'éditeur de code source et enfin 3 - l'éditeur graphique pour créer vos styles sans écrire la moindre ligne de code.

La barre d'outils contient les icônes pour accéder aux actions principales  :
 Cette icône vous permert créer un nouveau style qui peut être associé à une classe (.), un identifiant unique (#) ou une balise HTML (p, img, ul, ...)
Ce bouton permet d'organiser les styles visuellement pour retrouver plus facilement un style lors d'une édition future de la feuille de style.
Grâce à ce bouton vous pouvez créer des commentaires. Ils sont utiles pour comprendre rapidement un code lorsqu'on édite celui-ci dans le futur.  
Cette action permet d'exporter la feuille de style entière ou uniquement une déclaration dans les entêtes des pages HTML.
En cliquant sur cette icône on accède à l'aperçu pour se rendre compte des effets de la feuille de style (nous reviendrons plus tard sur cet outil).
 L'icône "Milestones" (bornes) permet de créer et gérer les différentes versions de votre feuille de style. cet outil permet de revenir à des versions antérieures pour une plus grande souplesse dans le processus de développement.
En cliquant sur cette icône, vous soumettez votre feuille de style au valideur CSS du W3C. En cas d'erreur, il suffit de cliquer sur celle-ci pour accéder directement à l'erreur dans votre code pour le corriger.
Vous avez enfin deux outils qui n'agissent pas vraiment dans le processus de création mais dans le domaine du confort. Il s'agit du moteur de recherche (à critères multiples) et la sélection du mode de présentation. Le groupe "Editors" vous permet de passer un mode d'édition graphique, en mode d'édition graphique et code source et enfin en mode d'édition code source uniquement.
Panneau de gestion des styles
Cette partie du logiciel (figure 2) vous montre les styles créés en vous proposant un aperçu du style (taille de police, couleur d'arrière-plan, texte souligné ou pas, ...) et permet aussi de gérer ceux-ci en les incluant dans des groupes (dossiers) afin d'obtenir une meilleure lisibilité de votre feuille de style. Quoi de plus agréable que de comprendre rapidement la structure d'un code quand on doit l'éditer plusieurs mois après sa création ? Les groupes peuvent contenir eux aussi d'autres groupes ce qui donne à CSSEdit une ergonomie hors pair. 
Dans le panneau des styles vous pouvez également réorganiser les différents éléments (styles, groupes, commentaires) manuellement (figure 3) par glisser/déposer et le code généré se modifie instantanément. 
L'éditeur de code source 
 À chaque fois que vous créez un style dans le panneau des styles, le code CSS correspondant est automatiquement généré. Si vous êtes un puriste du code fait à la main ou tout simplement pour y rajouter rapidement des petites corrections à votre code, vous pouvez travailler directement dans le panneau du code source. Là aussi CSSEdit intègre des fonctions pour améliorer votre productivité par exemple le remplissage automatique des déclarations dès les premières lettres tapées (figure 4) ou encore la numérotation des lignes de code pour mieux se repérer. Il est même capable de corriger vos erreurs d'inattention en rajoutant automatiquement les points-virgules (;) après chaque déclaration et l'accolade (}) de fermeture de la définition d'un style. Ce n'est pas parce que ce logiciel est axé sur la création de feuille de style de manière visuelle que son module code source n'est qu'un simple éditeur de texte.
L'éditeur graphique
Le gros avantage de CSSEdit vient de son module de création de feuille de style graphique. Il est même possible de ne taper aucun code et de faire du CSS avancé. Ce module est présenté avec les différentes catégories principales des définitions des feuilles de style (figure 5).
Une description détaillée des options disponibles sur l'éditeur graphique serait trop longue à faire dans un seul article. Pour faire court, on peut dire que la réalisation de feuilles de style par l'interface graphique, se fait simplement en renseignant des champs. Chaque option est décrite par un petit schéma qui rend le processus intuitif. Sachez tout de même que dans les options d'arrière-plan, il est possible de voir l'aperçu d'une image depuis l'éditeur sans avoir à parcourir l'architecture de votre site pour l'ouvrir. Pour cela, cliquez sur le bouton avec la petite roue dentée pour ouvrir l'inspecteur d'image.
Remarques
Il est important de comprendre quelques définitions de bases HTML et CSS avant d'aborder le positionnement des éléments. La méconnaissance du comportement de certaines déclarations mène souvent le débutant à renoncer à l'utilisation du CSS et à rester sur le modèle des tables. Je n'ai pas l'intention de rentrer dans une description détaillée, mais juste présenter quelques notions afin de comprendre le comportement des éléments auxquels vous souhaitez appliquer un style de position.
Éléments de type bloc :     Dans le langage HTML il existe des balises de type blocs. Elles s'affichent sur toute la largeur de l'élément qui les contient et font passer le contenu suivant à la ligne. C'est le cas par exemple, des balises p (paragraphe) ou div (divider). Pour information la balise div est un élément bloc neutre, il sera représenté sur tous les navigateurs avec des marges (externes et internes) nulles.
Éléments de type ligne :     Comme pour les éléments de type bloc, il existe des balises HTML dites "en ligne" qui n'interfèrent pas avec le contenu du document. Les balises en lignes n'influencent que le contenu à l'intérieur de la balise, il n'y a pas de passage à la ligne du contenu suivant. La balise span est un élément en ligne neutre qui sera représenté sur tous les navigateurs avec des marges (internes et externes) nulles.
Propriétés CSS "block/inline" :     Ces propriétés permettent de forcer le comportement inverse d'un élément bloc ou en ligne. Si vous appliquez le style, display: block; à une balise HTML span (élément en ligne) elle se comportera comme un élément bloc. De la même façon si vous appliquez un style display: inline; à une balise div (élément bloc) elle se comportera comme un élément en ligne.
Propriété CSS "float" :     Cette propriété permet de retirer un élément du flux du document, il ne tient plus compte des interlignes et espacements. Les valeurs float: left; (à gauche) et float: right; (à droite) permettent de placer cet élément hors du flux en le positionnant à gauche ou à droite du contenu. On appliquera un style float: left; à une image pour laquelle on veut que le texte l'enveloppe par la droite.
Propriété CSS "Clear" :     Nous avons vu que le style float: left; sur une image fait le contenu envelopper l'image par la droite. Dans le cas ou nous ne le voudrions pas, le style appliqué à notre image devient float:left; clear: right;. La propriété clear (effacer) empêche le contenu d'enrouler l'élément qui subit un style float. Les valeurs de clear sont right (effacer à droite), left (effacer à gauche) et both (effacer à droite et à gauche).
Propriété CSS "Position" :     Elle permet de positionner (avec une unité) un élément de manière relative (par rapport au flux courant), absolue (par rapport à l'élément parent qui le contient), statique (dans le flux normal du document) et fixe (fixe par rapport à l'écran)
Propriété CSS "Visibility" :      La propriété visibilité (visibility) permet de cacher ou d'afficher un élément. Les valeurs de cette propriété sont visible pour afficher un élément, hidden (caché) pour cacher un élément et enfin collaspe (chute) pour cacher les éléments qui ne sont ni des lignes et des colonnes.
Propriété CSS "Overflow" :     Avec cette propriété vous pouvez recadrer le contenu d'un élément de type bloc quand celui-ci déborde de l'élément parent. Les valeurs appliquées à Overflow (débordement) sont visible pour permettre le débordement de contenu de l'élément parent, auto pour recadrer le contenu avec des barres de défilement en fonction de la taille de ce contenu, 
	  
    
		
    
      
      null@janeirostudio.com
      Wed, 25 Oct 2006 00:00:00 +0200
      http://www.janeirostudio.com/?articles=60
      http://www.janeirostudio.com/?articles=60
      Parfois   appelé pousse-pousse ou puzzle, le jeu de taquin est un jeu solitaire   inventé par Sam Loyd en   1870. Il s'agit d'un puzzle constitué de 15 carrés qui peuvent   coulisser sur une case vide et dont le but est d'ordonner une série   de chiffres ou de reconstituer une image. 
Nous allons voir comment nous pouvons assez facilement reproduire ce jeu en   utilisant la bibliothèque AJAX OpenRico et   quelques commandes PHP. 
 

Note : des notions simples de javascript et de PHP sont nécessaires   pour comprendre l'exemple. Quelques références aux CSS seront utilisées. 

Ajax et la bibliothèque Rico 
Ajax (Asynchronous JAvaScript   and XML) est certainement le terme le plus à la mode en     ce moment    en ce qui concerne l'évolution du Web (voir Web 2.0). Il s'agit d'une méthode   de développement nouvelle utilisant des technologies courantes tel que le HTML/XHTML, les CSS, DOM et Javascript, XMLHttpRequest et XML. Le but est de créer des applications Web plus riches et plus légères.  
 Avec le succès   récent   des technologies AJAX est apparu un certain nombre de bibliothèques   proposant des fonctionnalités       originales. Parmi elles, plusieurs s'appuient sur l'excellent cadre d'application   (framework) prototype.       C'est le cas de OpenRico qui va nous       servir de support pour notre jeu de taquin.     
  
Analyse du jeu de taquin 
Pour simplifier l'explication, nous allons   nous baser sur un carré de 9 cases (dont une vide). Le puzzle est constitué   d'une image découpée en 8 carrés. Les différentes   parties de l'image sont positionnées   aléatoirement et les carrés contigus à la case vide peuvent   se déplacer lorsqu'on   clique dessus pour échanger leur place afin de reconstituer l'image   originale.
Positionnement des images 
Il vous faut dans un premier temps disposer   d'une image   carrée (par exemple de 300 pixels par 300 pixels) que vous découperez   avec votre logiciel préféré (photoshop, gimp,...)   en 9 images de 100 pixels par 100 pixels (dont une ne sera pas utilisée) .   Nous nommerons ces images img1, img2, ..., img8 (figure 1 et 2). 
  
Nous allons positionner ces images dans un document HTML tous les 100 pixels   de manière à former un carré. Cet à dire que la   première   image sera placée aux coordonnées (left:100,top:100), la suivante   (200, 100), la dernière   de la première rangée (300,100), puis pour la rangée suivante   (100,200) etc.  Nous avons également besoin d'un bloc vide que nous   positionnons à (300,300).
    Nous utilisons des blocs div auquel on attribut les propriétés     CSS suivante :

    
position:absolute → le bloc est positionné   de manière absolue dans son bloc parent 
    
left:100px → on place le bloc à 100 pixels   de la gauche du bloc parent positionné
    
top:100px → on place le bloc à 100 pixels   du haut du bloc parent positionné

 

 

     
     

  


 
 

etc...
   


 Voir le résultat n°1 (pensez à regarder le code source) 

Note : Nous verrons que nous pouvez considérablement réduire le nombre     de lignes en utilsant une boucle PHP.
A vous de mélanger les images comme bon vous semble.

  
Déplacement d'image avec OpenRico 
Une des fonctionnalités de base de la bibliothèque Rico et de pouvoir créer   un déplacement de bloc. Vous pouvez trouver une démo de cet effet (et bien   d'autres) sur le site de OpenRico. Voyons comment cela fonctionne.
Une fois les bibliothèque prototype.js et rico.js chargées dans   l'entête de   la page HTML grâce aux instructions :
 
   
Il est très facile d'obtenir le mouvement d'un bloc en instanciant   la classe:
 new Rico.Effect.Position(element, x, y, duration,     steps, options);
Avec :

    
→ element :    l'id  du bloc à déplacer
    
→ x :               l'abscisse   de destination du bloc
    
→ y :               l'ordonnée de destination du bloc 
    
→ duration :   la durée de déplacement du bloc   (en ms) 
    
→ steps :         le nombre de pas du déplacement 
    
→ options :     des options complémentaires   éventuelles 

 
Par exemple, soit une image que l'on souhaite bouger de 220 pixels à droite   et 136 pixels vers le bas. Nous devons créer une fonction javascript   appelé   par un clic sur cette image, qui lance l'instanciation de la classe Rico.Effect.Position.
Voilà, ce que cela donne sur la figure 3 : 



 


Recommencer
Voici le code associé à cet effet:


 
 

 
   
   
 

   


 Voir le résultat n°2 (pensez à regarder le code source)
La fonction javascript BougeLogo() est exécuté via le lien sur   l'image et consiste simplement en l'instanciation de la classe Rico.Effect.Position   avec les arguments de notre choix (id du bloc à bouger, position finale   du bloc, vitesse et nombre de pas)
 
Application au jeu de Taquin
Quels sont les difficultés pour transposer cet effet à notre jeu.

    
→ En premier lieu, nous devons faire bouger 8 images différentes (plus le bloc   vide)
    
→ Nous ne connaissons pas les coordonnées de la position finale
    
→ Tous les blocs n'ont pas le droit de bouger (seul ceux contigus au bloc vide)

 
Bouger des images différentes
En partant du résultat n°1, nous pouvons ajouter un lien sur chaque image   pointant vers une fonction javascript Bouge(). Nous allons simplement passer   l'identifiant du bloc en argument, par exemple: Bouge('img1') 

 

     
      
      
     

 


Notre fonction javascript va devoir récupérer le nom de l'argument   afin de reprendre le nom de l'id dans l'instanciation de la classe.
function Bouge(idbloc) {
   new Rico.Effect.Position( idbloc, abscisse_arrivee,ordonne_arrivee,   800, 10);   
 
Gérer les positions des blocs
Nous devons à présent déterminer quels sont les coordonnées des objets à déplacer.   En fait, dans ce jeu, il ne s'agit que de permuter 2 blocs: le bloc image   sur lequel on clique doit prendre la position du bloc vide et inversement.
La position d'un bloc peut être récupéré grâce aux  propriétés javascript   offsetLeft et offsetTop
Par exemple :
 Position_image_X= $(idbloc).offsetLeft;
   Position_image_Y   = $(idbloc).offsetTop; 
Il nous suffit donc de stocker les coordonnées de l'image cliquée   ainsi que celles de l'élément vide et d'inverser leur position.   Notre fonction prend alors cette forme : 
  

function Bouge(idbloc) {
     Pos_image_X= $(idbloc).offsetLeft;
     Pos_image_Y = $(idbloc).offsetTop;
     
     Pos_blocvide_X=$('vide').offsetLeft;
     Pos_blocvide_Y=$('vide').offsetTop;    
     
       new Rico.Effect.Position( idbloc, Pos_blocvide_X,       Pos_blocvide_Y, 800, 10);
     new Rico.Effect.Position( 'vide', Pos_image_X, Pos_image_Y,     800, 10);     
     } 

 
Ne déplacer que les blocs contigus au bloc vide 
La dernière difficulté réside dans le fait que nous n'avons pas le droit de   déplacer un bloc qui ne "touche" pas le bloc vide. Examinons quelles conditions   permettent à un bloc d'être déplacé :
Le bloc doit posséder la même abscisse que le bloc vide (ils   sont alors sur la même ligne) 
   ou
   le bloc doit posséder la même ordonnée que le bloc vide (ils sont sur la même   colonne) 
dans tous les cas, le bloc vide et le bloc "image" ne doivent pas être à plus   d'une largeur d'un bloc (100 px) l'un de l'autre.
Traduisons cela avec une condition javascript :
  if((Pos_image_X==Pos_blocvide_X && Math.abs(Pos_image_Y-Pos_blocvide_Y)<=100)   || (Pos_image_Y==Pos_blocvide_Y && Math.abs(Pos_image_X-Pos_blocvide_X)<=100))
L'abscisse de l'image doit être égale à l'abscisse du   bloc vide mais la différence   entre l'ordonnée de l'image et du bloc vide ne doivent pas dépasser   la largeur d'un bloc (100px). La fonction javascript Math.abs permet de prendre   la valeur absolue de la différence des 2 ordonnées. Le principe   est le même pour les   ordonnées de l'image et du bloc. 
Notre Taquin est désormais fonctionnel. Vous pouvez voir le résultat et télécharger   le code ci-dessous. 
→ Voir le résultat n°3 (pensez à regarder le code source)
 
Version PHP 
Afin de réduire le code HTML,   nous pouvons associer le langage PHP à ce jeu. Il s'agit principalement   de réduire le code HTML redondant qui est chargé du placement   des images. Il existe de nombreuses façons de réaliser cela,   nous vous en proposons une permettant d'avoir un placement aléatoire   des images.
Nous allons utiliser plusieurs tableaux PHP. Le premier va contenir le nom   des images ou leur numéro si elle ne diffère que par celui-ci.   La fonction shuffle()  appliqué à ce   tableau permet de le mélanger. Il sera alors possible   de récupérer séquentiellement le contenu du tableau dans   la boucle et ainsi de positionner un nom d'image aléatoirement.

$photo=array(1,2,3,4,5,6,7,8); // ou le nom de l'image 
 shuffle($photo); //on mélange le tableau
     
     


Note : En toute rigueur, nous devrions prendre en compte le fait que     toutes les positions de départ ne permettent pas d'arriver à une reconstitution     de l'image. 

   Voir à ce sujet, par exemple: http://etu.ensimag.fr/perso/Remi.Zara/taquin/legalite.html

Deux autres tableaux ($x et $y) vont contenir les coordonnées des abscisses   et ]]>
	  
    
			
		
		
    
      
      null@janeirostudio.com
      Wed, 27 Dec 2006 00:00:00 +0100
      http://www.janeirostudio.com/?journal=14
      http://www.janeirostudio.com/journal=14
      Depuis le 15 décembre dernier Adobe propose au téléchargement la version β de Photoshop CS3 son logiciel de traitement d'image. Cette nouvelle version était très attendue dans le monde des créatifs surtout depuis la transition des machines Apple sur l'architecture Intel. En effet, cette version est Universal Binary (fonctionne sur les Macintosh munis de processeurs Intel ou PowerPC) ce qui garantit des performances optimales sur les 2 architectures.
Evaluer Adobe Photoshop CS3 β
Le logiciel est disponible au téléchargement pour Windows XP, Windows Vista et Mac OS 10.4.8 en anglais. Cette version β est limitée aux détenteurs d'une licence Adobe Creative Suite 2 ou tout simplement de Photoshop CS2 (quelle que soit la langue). Pour télécharger Adobe Photoshop CS3 β il faut vous rendre sur http://labs.adobe.com/ , ouvrir un compte (si vous n’en avez pas) et télécharger l'application selon votre système d'exploitation. Après l'installation, il vous sera demandé d'insérer un numéro de série sans lequel vous pourrez évaluer le logiciel que pendant 2 jours. Pour obtenir un numéro de série pour cette version β, il vous faut retourner sur le site d'Adobe  et saisir le numéro de série de votre ancienne version de Photoshop CS2 ou de la Suite CS2.
Performances
Avant de passer aux nouveautés, j'aimerai préciser que cette nouvelle version (qui n'est pas une version finale) est très véloce. D'après les tests que l'on trouve sur le web, elle serait 20% plus rapide sur les plates-formes Windows et Macintosh (PowerPC) et 30 à 40% sur les Macintosh Intel. Bien sur, cette grande différence vient du fait que Photoshop CS2 tournait sur les Macintosh Intel grâce un émulateur (Rosetta) ce qui réduisait ses performances.
Nouveautés de Photoshop CS3
Pour vous faire rapidement une idée sur les nouveautés, il suffit d'éditer les menus de Photoshop CS3 en passant par le menu Edit → Menu. Sur la nouvelle boite de dialogue qui apparaît dans le menu déroulant "Set" choisissez "What's New - CS3" et validez. Cette action provoquera la colorisation de toutes les nouveautés dans les différents menus de l'application.

Principales nouveautés : 
une nouvelle interface (plus de palettes volantes, mais comme dit Adobe des "docks"), 
un nouveau mode de présentation qui permet d'avoir un plan de travail homogène (les palettes ne couvrent jamais l'illustration ou la photo sur laquelle vous travaillez), 
une refonte complète de Bridge (le gestionnaire d'images), 
un nouvel outil de sélection intelligent (quick selection tool), 
l'amélioration de l'outil contraste/lumière, 
une nouvelle commande pour transformer les images en noir et blanc, 
l'alignement et la fusion automatique des calques, 
une nouvelle version de Vanishing Point,
les filtres non destructifs. 

Filtres non destructifs : avant Adobe Photoshop CS3 l'application d'un filtre "détruisait" l'original, la seule façon de revenir à l'original était de revenir dans l'historique ou d'annuler simplement la dernière action. Cette nouvelle version propose de convertir votre photo originale pour accepter les filtres intelligents (Smart Filters) en passant par la menu Filter → Convert for Smart Filters. Une fois votre photo convertie, les filtres s'appliquent sur les calques comme les effets dynamiques (ombre, bevel, ...) avec la possibilité de les masquer ou de les éditer.
Plutôt que de rentrer dans les détails des nouveautés de la nouvelle version d'Adobe Photoshop, je vous conseille de visionner ces 19 vidéos (en anglais) faites par l'excellent Deke McClelland. Non seulement vous allez avoir un aperçu détaillé des nouveautés, mais également des exemples pratiques des nouvelles fonctions. Il suffit de regarder et de se laisser guider !
Si l'anglais vous gêne vraiment, vous pouvez visionner ces vidéos (en français) qui font une présentation globale des nouveautés.
Icônes de la nouvelle version
Si comme moi, après l'installation de la version β de Photoshop CS3 vous vous êtes dit "ce n'est qu'une version β, les nouvelles icônes viendront avec la version finale", sachez qu'il s'agit en faite des icônes qui seront livrées avec toutes les suites Adobe (même celles des anciennes applications Macromedia rachetées par Adobe).

Comme vous pouvez le voir sur l'image ci-dessus, il semblerait qu'Adobe ait choisi de représenter ses différentes applications dans un style minimaliste avec 2 lettres et une couleur caractérisant chaque logiciel. 
Je ne trouve pas ce choix judicieux, car même si les anciennes icônes n'avaient rien a voir avec les applications en elles-mêmes (la plume pour Photoshop, la fleur pour Illustrator, le coquillage pour Bridge,...) elle avait le mérite de remplir leur rôle d'icône en terme d'ergonomie, c'est-à-dire repérer un logiciel par la forme sans avoir à lire son nom. De plus, les illustrations des anciennes icônes donnaient une touche artistique qui collait bien avec une suite dite "Créative". 
Si Adobe livre vraiment ses nouvelles applications avec ce type d'icônes (je dit "si", car beaucoup de blogueurs et des designers reconnus critiques ces icônes) il va falloir apprendre que "Ps" veut dire Photoshop, "Ai" Illustrator, "Dw" Dreamweaver, .... ce qui est plutôt moyen dans un flux de travail professionnel.
]]>
	  
    
	
		
    
      
      null@janeirostudio.com
      Fri, 20 Oct 2006 00:00:00 +0200
      http://www.janeirostudio.com/?journal=12
      http://www.janeirostudio.com/journal=12
      Comme prévu Microsoft a rendu disponible au téléchargement la nouvelle version d'Internet Explorer 7. Cinq ans après Internet Explorer 6, la nouvelle version apporte des améliorations autant sur le plan de l'ergonomie, la sécurité et enfin un meilleur respect des normes W3C. Avec cette version Internet Explorer, Microsoft devrait remettre son navigateur dans la course face Mozilla Firefox, mais aussi faciliter la vie des développeurs.

Ergonomie, Convivialité
Bien que les nouvelles avancées dans ce domaine ne font que reprendre une grande partie de ce qui existe déjà chez la concurrence, celles-ci sont les bienvenues au regard de la part de marché de ce butineur. Internet Explorer 7 propose :

Une nouvelle interface épurée, où les boutons visibles mènent aux fonctions principales.
Le support des flux RSS
Une gestion des favoris améliorée
Un moteur de recherche intégré au navigateur
La gestion des onglets (ouverture de plusieurs pages dans une fenêtre unique) avec la possibilité de les grouper ou d'afficher des vignettes des pages ouvertes.
Une fonction zoom permettant d'agrandir la page visitée
Des options avancées d'impression

Sécurité et vie privée
Les faiblesses d'Internet Explorer 6 dans ce domaine était bien connues, notamment à cause des ActiveX et surtout au manque de mises à jour. Dans le domaine de la sécurité, Internet Explorer 7 propose les améliorations suivantes :

Un filtre de protection contre le "Phishing" qui permet d'identifier les sites frauduleux. Le "phishing" permet aux pirates informatiques de faire croire à l'internaute qu'il est sur un site de confiance (banque, administration, ...) pour lui soutirer des informations confidentielles (numéro de carte de crédit, mot de passe, ...).
L'activation ou non des contrôles "ActiveX", ils ne sont pas activés par défaut. Les contrôles "ActiveX" sont une technologie de Microsoft pour permettre le langage entre les programmes.
Une protection contre le "Spoofing". Le "Spoofing" est une technique de piratage consistant à voler l'adresse IP (numéro d'une machine sur internet) d'un ordinateur pour usurper l'identité de celle-ci. Grâce à cette technique, on se fait passer pour quelqu'un autre pour accéder à des informations confidentielles.
Une fonction pour bloquer l'exécution de scripts entre plusieurs domaines.

Standards
Dans ce domaine aussi Internet Explorer rattrape son retard avec cette nouvelle version, même s'il ne fait pas aussi bien que la concurrence.

Un support amélioré des standards dans les domaines du HTML, mais aussi des CSS
Le support de la transparence progressive (Canal Alpha) des images PNG.

Conclusion
La nouvelle mouture d'Internet Explorer est dans l'ensemble une bonne nouvelle, autant pour les internautes pour les fonctions de sécurité et d'ergonomie, mais aussi par un support amélioré des standards pour faciliter la tâche aux développeurs web. Bien qu'il soit loin de Mozilla Firefox ou Safari dans ce domaine, Internet Explorer 7 permet de réaliser des feuilles de style simple sans avoir recours à l'écriture d'une autre feuille de style spécifique.
À l'heure actuelle Internet Explorer 7 est disponible qu'en version anglaise et ne peux s'installer que sur Windows XP avec le service pack 2 (SP2). La version française sera disponible à partir du 1er novembre. La version livrée avec le prochain système d'exploitation de Microsoft "Vista" intégrera en plus un mode de navigation sécuritaire et une option de contrôle parental.
]]>
	  
    
	
		
    
      
      null@janeirostudio.com
      Tue, 10 Oct 2006 00:00:00 +0200
      http://www.janeirostudio.com/?journal=11
      http://www.janeirostudio.com/journal=11
      Le thème de bureau "Organic" contient une série d'images haute définition dans un style minimaliste et élégant. Chaque image de bureau vous procurera un environnement de travail clair sans vous distraire de vos tâches. Le thème est disponible en 4 couleurs "aqua", "tangerine", "lemon" et "graphite".

Vous pouvez télécharger le set complet en cliquant sur l'image ci-dessous ou choisir directement la couleur de votre choix en cliquant sur les vignettes. N'hésitez pas à nous laisser une appréciation par le biais des commentaires.

       
]]>
	  
    
	
		
    
      
      null@janeirostudio.com
      Sat, 7 Oct 2006 00:00:00 +0200
      http://www.janeirostudio.com/?journal=9
      http://www.janeirostudio.com/journal=9
      Après quelques mois de travail acharné, la nouvelle version du site de Janeiro Studio arrive au terme de son développement. Il y a plus d’un an Janeiro Studio évoluait en devenant une entité à part entière et il était devenu nécessaire de faire évoluer le site internet. Aujourd’hui nous sommes heureux de vous présenter le résultat. La charte graphique minimaliste, la signalétique, le contraste, et enfin les techniques utilisées ont été pensées dans le but unique de servir l’internaute.

Bien que nous soyons une entreprise commerciale, nous avons voulu faire de ce site web un espace où l’on partage la connaissance. Nous sommes avant tout des passionnés même si nous vivons de notre passion
 
 Architecture
Le site est articulé autour de deux espaces. À gauche sont présentés les éléments communs à toutes les rubriques : un moteur de recherche instantané, un menu contextuel, un résumé des cinq derniers articles et les liens annexes. À droite vous trouverez simplement la présentation du contenu en fonction de la rubrique choisie.

Accueil : Nous présentons brièvement Janeiro Studio, mais aussi les résumés des dernières entrées du journal.
  Journal : Cette rubrique présente notre point de vue sur divers sujets de l’actualité. Elle sert aussi à présenter une information qui n’entre pas dans le cadre des articles. L’internaute à la possibilité de lancer le débat avec Janeiro Studio à travers les commentaires.
Articles : Ici, nous présentons divers articles et tutoriels dans plusieurs domaines informatiques (Design, HTML/CSS, PHP, Systèmes, Réseaux, Technologies Web). Actuellement nous vous proposons deux articles (Transparence des images PNG et Les CAPTCHA). N’hésitez à revenir sur cette rubrique pour consulter les nouveaux articles que nous mettrons à votre disposition.
Services : À travers cette rubrique, nous présentons nos produits et services (Internet, intranet, applications de gestion, communication PAO/PRINT). Nous expliquons succinctement notre méthode de travail pour garantir à nos clients un produit adapté de qualité.
Portfolio : Nos références clients, les démarches artistiques et techniques de chaque projet sont présentées dans cette rubrique. Vous avez également la possibilité de filtrer nos références clients par type de projet.
Contact : Vous trouverez ici toutes les informations pour prendre contact avec nous.

Nous vous souhaitons une bonne lecture.
L'équipe de Janeiro Studio.
]]>
	  
    
	
		
    
      
      null@janeirostudio.com
      Mon, 25 Sep 2006 00:00:00 +0200
      http://www.janeirostudio.com/?journal=10
      http://www.janeirostudio.com/journal=10
      Depuis le 25 septembre dernier GuyaWeb a présenté à ses clients une nouvelle version de son site de petites annonces en ligne. La réussite économique d'un site internet passe par la satisfaction des utilisateurs, ce qui génère une augmentation de trafic et de popularité.

Pour sa deuxième version GuyaWeb a souhaité mettre l’accent sur une ergonomie accrue et un « relifting » du design. Nous avons pris en compte les demandes de notre client, mais avons profité pour y intégrer des fonctionnalités utilisant la technologie AJAX permettant de maximiser l’ergonomie. Grâce à cette technologie, la consultation d’annonces se fait quasi instantanément sans que l’internaute ait à changer de page pour afficher le détail d’une annonce.
]]>
	  
    
	
					
		
		
		

Nom
Prénom
Né le