Télécharger Adobe Photoshop CS6 beta

À découvrir deux autres vidéos si vous ne les aviez pas vues dans : « Photoshop CS6 en vidéo« .

Raccourcis utilisés dans la vidéo :

• ↑ (Flèche haut) : Lire la ligne précédente
• ↓ (Flèche bas) : Lire la ligne suivante
• Ctrl : Interrompre la vocalisation
• Inser + F5 : Liste des champs de formulaires
• Inser + F6 : Liste des titres (<h1> à <h6>)
• Inser + F7 : Liste des liens (<a>)

Vous pouvez également trouver une liste complète des raccourcis claviers de Jaws sur Ideose : Raccourcis clavier pour le lecteur d’écran JAWS.

Sneak Peek #1

Sneak Peek #2

De ce fait, pour appliquer cette propriété il est nécessaire de multiplier les instructions.

button {
	background-image:linear-gradient(green, blue); /* Norme W3C */
	background-image:-moz-linear-gradient(green, blue); /* Firefox */
	background-image:-webkit-gradient(linear, green, blue); /* Chrome, Safari */
	background-image:-o-linear-gradient(green, blue); /* Opera */
	background-image:-ms-linear-gradient(green, blue); /* IE */
}

Faire des dégradés en CSS c’est bien. Le faire correctement, c’est mieux ! Voici donc un récapitulatif de ce qu’il ne faut oublier lorsque l’on les utilise.

D’abord le fallback

Lorsque vous utilisez des dégradés, le premier item de votre checklist doit impérativement être la couleur de fond de fallback (càd de secours). Il s’agit de la couleur de fond qui sera affichée si le dégradé n’est pas chargé.

En effet, un navigateur ne comprenant pas les dégradés (ex : FF3.6 et IE6 à 9), n’appliquera pas de couleur par défaut si on ne lui spécifie pas. Dans ce cas, vous serez à coup sûr confrontés à des problèmes d’affichage et de contrastes.

N’oubliez donc jamais de placer un background-color sous peine d’obtenir un résultat du même type que la capture ci-dessous.

Utiliser des valeurs relatives

Un internaute n’a ni le même navigateur ni les mêmes préférences que vous et ne naviguera jamais comme vous sur un site. On ne le dira jamais assez, un site Web est un média flexible. Styler en utilisant des unités de grandeurs en pixel, c’est le mal.

Pour survivre à cette torture, vos propriétés CSS se doivent d’être définies avec des unités de valeurs relatives : %, em, etc.

Cette bonne pratique s’applique également au dégradés. Si vous les définissez en pixels, vos dégradés n’auront plus l’effet escompté lors d’un agrandissement de texte par l’utilisateur.

La transparence pour la maintenance

Ne nous le cachons pas, définir des dégradés en CSS3, c’est chiant : code complexe à retenir, calibrage hasardeux des couleurs et ajustements à tâtons. C’est pourquoi il existe de formidables outils nous permettant de copier-coller des dégradés tout fait, par exemple : Ultimate CSS Gradient Generator de ColorZilla ou CSS3 Gradient Generator de Damian Galarza.

Un axe pour se faciliter les dégradés est d’utiliser la transparence de ceux-ci en couplant avec un couleur de fond. Le principe, n’utiliser des dégradés que de blanc ou noir vers le transparent qui seront affichés en sur couche d’une couleur unie.

Cette méthode se révèle particulièrement utile lorsque des changements de couleurs sont prévues sur les pseudo-classes visited, hover ou active.

Démo sur les dégradés transparents

“Keep it Simple & Smart.”
« Faites simple et élégant. »

Nous aimerions vous entendre sur la mise en pratique de ce principe dans les métiers du web et leurs processus de décision. Cet axe de réflexion n’est pas limitatif, mais vous aurez plus de chances en faisant simple plutôt que compliqué. ;‑)

Nous invitons tous les orateurs intéressés à soumettre leur proposition par courriel avant le 18 juin 2011 à : propositions@paris-web.fr.

Vous pouvez proposer un ou plusieurs sujets dans les formats suivants :

• Conférence : 50 minutes, questions comprises.
• Mini-conférence : 15 minutes, sans questions du public.
• Atelier : 1 heure 30 (ou 3 heures pour un atelier double).

Les conférences et mini-conférences auront lieu dans les amphithéâtres les jeudi 13 et vendredi 14 octobre. Les ateliers auront lieu dans des salles de 40 à 60 personnes le samedi 15 octobre. Ils sont l’occasion d’une grande interactivité, et peuvent être soit sous une forme théorique, soit sous une forme pratique.

Idéalement, merci de présenter votre proposition de la façon suivante :

• Vous : en quelques lignes, qui êtes-vous ? Quel est votre parcours ? Votre spécialité ?
• Votre sujet : en dix lignes maximum, un titre (qui n’a pas besoin d’être définitif) et un résumé de ce que vous allez traiter. Merci d’indiquer le niveau du public estimé.
• La forme de votre intervention : sera-t-elle plutôt une conférence, une mini-conférence, un atelier ? Pour un atelier pratique, les participants auront-ils besoin d’un ordinateur et de certains logiciels, ou d’une organisation particulière ? (Nous pouvons en rediscuter ensemble.)

Toutes les personnes qui ont fait une proposition seront avisées personnellement de la suite donnée.

Si vous êtes retenu, vous aurez la possibilité d’être défrayé pour votre intervention (transport, logement et repas, dans certaines limites et selon votre lieu de résidence). Vous serez filmé et les vidéos ainsi que les supports de présentation seront mis à disposition gratuitement sur internet (sous licence CC-By-NC). L’envoi d’une proposition implique votre acceptation des conditions de participation à l’événement.

Enfin nous préparons une « journée de mise en jambes » comme l’an dernier pour encourager des vocations d’orateurs, et en communiquerons les détails ultérieurement. Suivez l’actualité de Paris Web pour ne rien manquer de nos activités.

En attendant de vous lire,
et vivement octobre !

L’équipe Paris-Web.

• Ajax
• Attributes
• Build
• Core
• CSS
• Data
• Deferreds
• Effects
• Event
• Manipulation
• Misc
• Offset
• Support
• Traversing

Télécharger jQuery 1.6

Attention, il n’y a pas de rétro-compatibilité sur le camel-casing des attributs data- et les fonctions .prop(), .removeProp(), et .attr().

Le logo a été réalisé par l’agence hawaïenne Ocupop et personnellement, j’adore. Et à ce que je peux constater, les développeurs détestent !

La seule chose qui me laisse perplexe, c’est le CSS3 dilué dans le terme « HTML5″ . En effet, en marge de la création de ce logo, le W3C a voulu iconographier les nouvelles fonctionnalités qu’offre le HTML5 :

• Offline & Storage
• Device Access
• Connectivity / Realtime
• Performance & Integration
• Multimedia
• Semantics
• Graphics, 3D & Effects
• CSS3 / Styling

Le CSS3, même s’il est indissociable de HTML5, est une techno à part. Enfin bref.

Toujours est-il que vous pouvez vous créer facilement un p’tit badge image qui va bien sur le site officiel.

Ah ! Aussi, si vous voulez vous gaver de goodies, y a des T-shirts, des stickers et des bannières !

Pour gagner le bouquin « HTML5 pour les web designers » de Jeremy Keith, soyez le premier à trouver le nom d’une personne.

À partir d’aujourd’hui, je donnerai chaque indice via Twitter.

Voici le récapitulatif des indices donnés :

1. (17 janvier à 11h) Je suis l’un des premiers rois de ma dynastie
2. (17 janvier à 15h) La région où j’ai régné fait partie d’un pays actuellement en guerre
3. (17 janvier à 18h) Un fleuve portant le nom d’un animal passe par mon royaume
4. (18 janvier à 11h) J’ai vécu au XIXe siècle av. J.-C

Pour donner votre réponse, il vous suffit de donner votre réponse par le formulaire de contact en spécifiant dans le sujet « Concours ».

Soyez rapide et bonne chance à tous !

Sumu-la-El

Sumu-la-El est un roi babylonien du XIXe siècle av. J.-C., qui a régné approximativement de 1881 à 1845 av. J.-C.. Il est le deuxième roi de la Ire dynastie babylonienne.

Pourquoi cet illustre inconnu me direz-vous ? Bin en tombant dessus par hasard la similitude entre « Sumu-la-El de Babylone » et moi « Samuel de Babylon Design » m’a bien fait rire !

En tout cas je me suis bien amusé à faire ce petit concours ! J’ai ré-ouvert les commentaires du billet si vous avez des remarques.

Voici un petit florilège des réponses reçues : Henri IV, Pépin le Bref, Mérovée, Charlemagne, Nabuchodonosor I, Nabuchodonosor II, Gilgamesh, Harun al-Rashid, Sargon d’Akkad, Fayçal ibn Hussein, Sumu-abum, Hammurabi, Le roi David et Saül.

Et en 2011, va falloir que ça cesse !

Nul n’est censé ignorer la loi de la police

Le tort est de découper du texte comme on découpe des photos, or cela n’a rien à voir. Lorsque l’on découpe une photo, on rogne pour ne plus avoir d’espace blanc ou vide. Pour un caractère typographique l’espace autour de lui-même est indispensable car il fait partie de son anatomie.

L’intégrateur peu soucieux de la typographie, et qui en veut viscéralement à tous ces salauds de designers qui lui balancent quotidiennement des PSD bordéliques de 150Mo, se venge inconsciemment en amputant sauvagement les jambages et en égrugeant le rythme vertical du design.

Lorsque l’on découpe du texte, il est nécessaire de conserver l’espace pour les jambages inférieurs et supérieurs même si ceux-ci ne sont pas utilisés. En effet, si l’on découpe un texte sans jambages à ras (ex: « coucou maman ») les espacements entre les paragraphes précédents et suivants sont faussés. Malheureusement, ces espacements irréguliers sont fréquemment compensés par des marges ajustées au pifomètre.

Par conséquent, si le wording d’une image texte change, les espacements également. Les marges rustines cassent et le rythme vertical explose.

Ma technique du « Éq »

Pour découper proprement mes images textes, je vous partage ma petite routine qui me permet rogner correctement.

Avant de recadrer, j’ajoute les deux lettres « q » et « É » (alt + 144). Le « q » prends la place du jambage inférieur et « É » le supérieur plus l’accent éventuel. Je rogne une première fois avec ces deux lettres supplémentaires pour obtenir mon espace vertical puis je les supprime et je rogne horizontalement.

Si ce n’est pas clair, voici une petite vidéo explicative :

Grâce à ma petite manipulation, les images textes sont toujours propres et soyeuses. Peu importe que mon wording change, mon rythme vertical est toujours respecté !

Démo de bons et mauvaises découpes d’images textes

La polyvalence de l’intégrateur toujours en question

Ce problème que j’ai souvent constaté révèle une fois de plus l’indispensable curiosité de l’intégrateur. Il doit entre autres s’intéresser un minimum au design et par conséquent à la typographie.

Photoshop ne doit pas être assimilé à sa simple fonctionnalité Image > Rognage, mais c’est souvent le cas.

Si je peux donner un conseil général aux intégrateurs, faites vos propres PSD de découpes et d’images textes. Ça vous fera gagner du temps et de l’énergie.