Quoi de plus ennuyeux que de répéter plusieurs fois les mêmes étapes et les mêmes actions sur un ordinateur. Ces tâches répétitives représentent le quotidien de nombreux de web designers, développeurs, et autres personnes passant leurs journées sur un ordinateur.
Des outils existent pourtant pour vous mâcher le travail. Peu connus du grand public les logiciels d’automation peuvent effectuer des tâches basiques, comme reproduire le mouvement et les clics d’une souris, renommer un fichier, etc…
En combinant diverses actions, on peut imaginer mettre en place un script qui créé plusieurs vignettes d’une image avant de les envoyer sur un serveur défini.
Dans cet article, nous allons voir à quoi pourrait ressembler un tel script dans Automator, la solution d’automatisation proposée par Apple et installée par défaut sur tout nouveau Mac. Nul besoin d’être un développeur confirmé, Automator a l’avantage d’être accessible par le grand public et ne requiert aucune connaissance en programmation. Il suffit de raisonner de manière logique.
Définir ses besoins
La première étape consiste à définir nos besoins :
À partir d’une image située sur le disque de l’ordinateur, je veux obtenir une vignette de 200px par 200px qui sera d’abord mise en ligne sur un serveur pour être ensuite supprimée du disque de l’ordinateur. Le fichier original ne doit pas être modifié ou supprimé.
Transcription logique
Il faut ensuite transcrire ces besoins de manière algorithmique :
1. Obtenir le fichier original
2. Créer une copie du fichier
3. Renommer la copie
4. Recadrer l’image 200x 200
5. Envoyer l’image sur un serveur
6. Supprimer l’image (vignette) de l’ordinateur
Création du script Automator
Maintenant que nous savons tout du script que nous voulons créer, lançons-nous dans Automator. Il faut trouver des actions Automator qui correspondent à nos besoins. Automator intègre par défaut les actions qui nous permettront de renommer le fichier, recadrer une image, mais il vous faudra le logiciel de transferts FTP Transmit pour pouvoir envoyer un fichier sur un serveur distant. Panic propose avec le téléchargement de Transmit des actions Automator permettant de contrôler l’application et d’envoyer des fichiers :
Installez ces actions, vous aurez peut-être besoin de relancer Automator.
Les actions qui composent notre script sont donc les suivantes dans Automator :
1. Obtenir les éléments sélectionnés
2. Copier les éléments du Finder
3. Renommer les éléments du Finder
4. Rogner des images
5. Téléversement de fichiers
6. Placer les éléments du Finder dans la corbeille
Vous pouvez observer que chacune des actions définies de manière algorithmique à trouvé son équivalent dans Automator.
Résumé image de l’exemple
Autre exemple
Sur Motion Reels, les vidéos que nous ajoutons doivent être envoyées avec deux captures d’écran. La première de 650/480px et la seconde 200/200px.
Afin de nous faciliter le travail nous avons créé un script similaire à ce tutorial qui permet de recadrer deux fois une image et d’envoyer les deux fichiers dans deux dossiers différents.
J’espère que cet article vous aidera à optimiser votre temps de travail ! N’hésitez pas à réagir dans les commentaires si vous rencontrez des problèmes ou pour partager les méthodes qui facilitent votre quotidien.
Un design pattern, ou patron de conception est destiné à résoudre les problèmes récurrents d’un développeur. Ces patrons peuvent aussi s’appliquer pour des problèmes liés au Web.
Les patterns font ainsi une entrée discrète sur le Web mais pourraient rapidement modifier nos habitudes en matière de développement de sites ou services web.
Un site, Welie.com, regroupe déjà une multitude de web patterns, liés à des problèmes récurrents pour le Web :
Navigation
Interactions basiques
Recherche
Affichage des données
Personnalisation
Shopping
Faire des choix
Permettre la saisie de données
Divers
Sur ce site, le problème que l’on tente de résoudre est clairement expliqué (ex : The user needs to find an item in the main navigation), et la solution qui s’offre à vous est illustrée de captures d’écran et de liens vers des démonstrations.
Des conseils utiles vous permettent aussi de savoir dans quelles situations utiliser ce genres d’effets.
Et vous, pensez-vous que les patterns vont changer nos méthodes de développement ?
Ce tutorial présente une technique permettant de créer des boutons sauce Web 2.0 avec Fireworks.
Deux versions de boutons sont disponibles : une version sobre avec peu de reliefs, et un autre bouton plus “glossy” comme ils disent là-bas. Avant toute chose, commençons par voir le résultat que nous voulons obtenir.
Commencez par créer une forme vectorielle “étoile” sur un nouveau document.
Il faut ensuite augmenter le nombre d’extrémités. Nous plaçons ici le nombre de points à 25. Votre étoile devrait alors avoir cette forme bizarre que nous pouvons voir ci-dessous.
Pour réduire la hauteur des pics, jouez sur la propriété radius de l’étoile jusqu’à obtenir le résultat suivant.
Seconde étape : Colorisation du bouton
Donnons maintenant un peu de caractère à notre bouton. Appliquez un dégradé radial de la couleur que vous souhaitez en veillant à mettre la couleur la plus claire au centre du dégradé.
Seconde étape : Relief
Dupliquez la forme de votre étoile et réduisez la taille de ce second calque à l’aide de l’outil de redimensionnement (Q). Vous pouvez maintenir les touches ALT et SHIFT lors du redimensionnement afin de garder un ratio égal à l’original (SHIFT), et appliquer une réduction de taille par rapport au centre de la forme (ALT).
Appliquez ensuite une ombre intérieure (inner shadow) selon les réglages suivants (voir l’image).
Résultat classique
Appliquer un effet “glossy” au bouton
Si vous voulez donner un effet “glossy” ou “aqua” à votre bouton, il vous suffit de dupliquer une nouvelle fois la forme de votre étoile.
Créer ensuite une forme rectangulaire appliquée au dessus du bouton.
Sélectionnez cette forme et en restant appuyé sur (SHIFT), sélectionnez la dernière étoile que nous avons créé. Allez dans le menu “Modifier > Combiner > Poinçonner”. Ceci devrait avoir pour effet de couper la dernière forme d’étoile créée. Sélectionnez l’outil Plume (P) pour créer un nouveau point sur la ligne diagonale.
Modifiez le point afin d’arriver à un résultat tel que celui ci-dessous
Définissez une opacité à 30 afin d’aller la couleur blanche de la forme, et voilà le travail. Il ne vous reste qu’à ajouter du texte à votre bouton si nécessaire.
Mobile Me est un service qui a été lancé par Apple en 2008. Son logo représente un nuage visuellement sympathique que je vous propose de recréer à l’aide de Fireworks CS3.
Le logo de Mobile Me intrègre derrière le nuage des icônes d’applications que nous n’allons pas aborder pour que ce tutorial puisse rester accessible à un plus grand nombre de personnes. Il n’est cependant pas impossible que vous retrouviez les méthodes de construction de ces icônes dans des tutoriaux ultérieurs.
Commencez par créer un rectangle aux bords arrondis. Appliquez un raduis maximum pour que les extrémité du rectangle ressemblent à des cercles. Appliquez ensuite un dégradé bleu clair et une bordure plus foncée.
Étape 2
Prenez maintenant la plume afin de modifier la forme que nous venons de créer. Il vous faudra créer un nouveau point et modifier les courbes de bézier afin de faire ressembler l’une des extrémités de notre rectangle à un cercle.
Étape 3
Créez un nouveau cercle d’une couleur quelconque et appliquez une ombre intérieure selon les réglages suivants. Veillez à cocher la case “Knock Out” qui fera apparaître unique l’ombre intérieur que nous voulons appliquer.
Positionnez le cercle de telle manière à ce qu’il soit décalé par rapport au reste de la forme.
Étape 4
Maintenant, vous allez devoir créer un nouveau cercle en appliquant un dégradé. Ce dégradé doit aller du bleu vers le blanc et l’opacité de 50% à 100%.
Étape 5
Créez ensuite un second cercle un peu plus petit. Appliquez une ombre interne selon les réglages suivants. Veillez à cocher la case “Knock Out” comme vous l’avez fait précédemment.
Placez ensuite ce cercle derrière notre forme principale.
Étape 6
Dupliquez la forme que vous avez créé dans l’étape 5. Placez le cercle au-dessus de tous les autres, de la même manière que dans la figure suivante.
Étape 7
Vous pouvez vous amuser à ajouter autant de cercles que vous voulez à votre nuage. Vous pouvez par exemple supprimer le contour de certains cercles afin de varier les effets.
Étape 8
Créons maintenant un peu de brouillard. Dessinez une forme de type “patate” et remplissez-le d’un dégradé allant du blanc vers le bleu clair.
Étape 9
Appliquez un flou gaussien d’environ 7 à la forme que vous venez de créer. Ceci va permettre de masquer les croisement des bordures des bulles qui sont en trop. Modifiez votre patate en fonction de ce que vous voulez masquer ou “brouiller”.
Étape 10
Ajoutons le texte “mobile” avec la police Arial Rounded. Vous pouvez appliquer une légère ombre intérieure au texte pour lui donner plus de profondeur.
Étape 11
Au tour du “me” maintenant. Appliquez un dégradé à ce texte si vous voulez un résultat identique à celui qu’Apple a voulu donner. De la même manière que pour le texte précédent, vous pouvez appliquer une ombre intérieure afin de donner de la profondeur à ce texte.
Étape 12
Dernière petite touche : Dessinez une forme de couronne et remplissez-la de bleu. Cette forme va permettre de donner un peu de relief à notre nuage.
Étape 13
Appliquez un dernier flou gaussien à cette forme, et voilà !
Étape 14
Pour ceux qui veulent aller un peu plus loin, je vais maintenant décrire les techniques permettant d’appliquer une ombre et de faire un reflet sur le nuage.
Créez une nouvelle forme grise derrière votre nuage.
Étape 15
Applatissez la forme comme ci-dessous :
Étape 16
Pour créer le reflet, il faut d’abord dupliquer notre nuage.
Transformez ensuite le nuage en le renversant.
Étape 17
Pour créer le dégradé du reflet, nous allons utiliser un masque. Créez un rectangle rempli d’un dégradé allant de gris foncé (en haut) vers noir (en bas). Sélectionnez ensuite votre rectangle, appuyez sur SHIFT, et sélectionnez le calque correspondant à votre nuage retourné.
Sélectionnez ensuite Modify > Mask > Group as mask pour créer le masque. Libre à vous de retoucher le dégradé de votre masque pour modifier l’opacité du reflet.
La plupart des web designers sont un jour confrontés à un problème de pages faisant une longueur incroyable. Smooth Scroll vous propose de créer automatiquement une navigation fluide et animée entre les différentes rubriques de vos pages.
Ce script est basé sur Mootools 1.2 et Mootools 1.2 More. Il utilise le plugin SmoothScroll intégré à Mootools 1.2 More.
Ce script est très simple et facile d’accès. Vous pouvez facilement l’adapter à vos besoins en modifiant le fichier javascripts/smooth-navigation.js
Vous pouvez jeter un oeil au script Smooth Navigation sur la page de démonstration prévue à cet effet. Vous pourrez sur cette page télécharger les sources de la démonstration si vous le souhaitez.
Nous continuons le développement de Smooth Navigation, alors n’hésitez pas à nous faire part de vos commentaires, avis, et idées dans les commentaires !
Mac OS X permet de faire des captures de fenêtre. Pour ce faire, il vous faut simplement effectuer ce composé de touches :
Command + Shift + 4 ( + Control pour copier la capture dans le presse papier)
Appuyez ensuite sur Espace pour que le viseur se transforme en appareil photo et que vous puissiez capturer une fenêtre. Ce mode de capture fonctionne aussi avec les Widgets.
Avec l’arrivée de Mac OS X Leopard ce même raccourci a un peu changé son mode de capture. Il applique en effet une ombre autour de la fenêtre. Personnellement, je ne trouve pas cet effet opportun, et j’ai donc opté pour la suppression de cette ombre.
