LE DEBUGGER's blog - Tag - web design

Weekly report

Mox Folder — Sat, 10 May 2008 19:16:00 -0400

Ça s'est passé cette semaine sur mon Twitter.

On commence par la (petite) grosse nouveauté de Google Reader (voir sur Faaabulous) qui permet de publier des notes grâce à la fonction de partage intégrée (shared items). Google avance doucement sur les terres du micro-blogging. Si vous voulez voir mon flux Google Reader et vous y abonner c'est là. Pour le moment je continue de privilégier Twitter... je réfléchi à une manière d'utiliser les deux.

Sans intérêt aucun : Oh Shiit, daaamn et aargh ;

Design

Ode au pixel art ;
J'aime bien cette bannière web pour un tour opérateur anglais ;
Un livre : Designing for the Social Web de Joshua Porter ;
Des logiciels : 25 éditeurs web WYSIWYG pour les tafiotes, et 25 éditeurs de texte pour puristes ;
Peux toujours servir : Nutrition Facts CSS Code ;
Mignon : Baby Car Logos ;
Utile : SEO Guide For Designers :
Explorateur de fontes en ligne : TypeSQL.

Web

Gandli Flex, la solution d'hébergement de Gandi est disponible en beta ;
Client Twitter pour iPhone : Hahlo ;
Avec MyTVRSS on peut suivre la programmation de ses séries TV favorites sous forme de flux RSS (sinon y a l'excellent widget TV Forecast pour Dashboard et iPhone) ;
Time Tube, un moteur de recherche qui affiche les résultats sous forme de Timeline ;

Gadgets

Le HTC Touch Diamond, c'est vrai qu'il est beau. Particlulèrement le dos, j'aime bien le coté déstructuré, un certain coté Picasso ;
Mise à jour du Firmware du Zune (qui sort au Canada incessement sous peu par ailleurs, mais j'ai comme l'impression que tout le monde s'en fiche, surtout depuis qu'on sait que l'iPhone arrivera cette année aussi au Canada) ;
NMG de Myer Motors, je rêve d'une ville avec uniquement des voitures de ce genre là ;
Discret : Sac à dos pour laptop... j'adore le look que ça fait ;
Encore un qui se lance un défi avec Wii Fit.
Le média server idéal par Sony.

Principaux billets de la semaine

Indiana Jones IV : le secret des crânes de cristal et Michael Bay se moque de Tonton Spielberg ;
Quelle distribution Linux pour en finir avec Windows ;
Les première images de W, le film d'Oliver Stone sur George Bush Jr.

Les CSS par l'exemple

Mox Folder — Thu, 10 Apr 2008 06:00:00 -0400

Dans mon entourage professionnel, des graphistes print totalement étrangers au design web me demandent régulièrement de leur expliquer brièvement comment créer des pages web, c'est quoi le HTML, etc. La question qui revient le plus souvent c'est de savoir si avec Dreamweaver on peut créer un site Internet sans connaitre le HTML. Là, ma réponse est systématiquement la même : Oubliez Dreamweaver !!!. En effet le logiciel de feu-Macromedia est devenu une telle usine à gaz, que si on veut apprendre à faire du web c'est sûrement pas par là qu'il faut commencer. Un graphiste pense souvent à tort que s'il maitriste Quark X-Press ou InDesign sur le bout des ongles, il peut donc se familiariser en quelques heures avec Dreamweaver et arriver à produire des page web.

Alors, oui il y arrivera sûrement avec un peu de détermination - après tout un logiciel reste un logiciel. Cependant je ne pense pas que ce soit la bonne solution.

Back to Basics

Comme pour tout, il faut revenir aux basics, on ne se met pas à résoudre des équations si on ne connaît pas les principes élémentaires d'algèbre. La plupart des graphistes print voudraient résoudre leur équation sans même apprendre à compter, la première vérité c'est qu'il ne veulent pas mettre les mains dans le cambouis... tellement habitués qu'ils sont au confort de leur interface WYSIWYG... alors que dans le fond il y a peu de différence entre une page Quark X-Press et un fichier HTML. La seconde vérité c'est que ÉNORMÉMENT de graphistes ont trop peu de méthodologie, genre les feuilles de style j'en ai entendu parler, je sais ce que c'est, je sais que c'est utile mais je m'en sers jamais, pire ... je ne sais pas m'en servir.

Parti de là, on comprend bien vite que parler à un ~~artiste~~ graphiste de balisage de texte ça va vite le barber. Pourtant, qu'on face de la PAO (avec X-Press ou InDesign), du traitement de texte (avec Word), ou encore qu'on face du HTML on fait tous du balisage de texte. Quand je slectionne un mot (au passage je vous rappelle des raccourcis bien pratiques ;o) et que je clique sur B pour le mettre en Bold je fais du balisage de texte, de même que lorsque j'enveloppe un mot d'une d'une balise <strong>.

CSS

Ce qu'il faut donc retenir de cette longue mais nécessaire introduction c'est qu'une page HTML n'est plus ni moins qu'un agencement d'éléments dans un page. Sur X-Press ou InDesign on agencera sa page par boites (box) alors qu'en HTML agencera sa page par balises. Dans les 2 cas on stylisera sa page grâce et des feuilles des style.

En HTML, les feuilles sont ce qu'on appelle CSS pour Cascading Style Sheet et ce qui est vraiment tripant par rapport à de la mise en page traditionnelle (traitement de texte ou PAO) c'est que c'est beaucoup plus puissant. Alors que dans les logiciels de mise en page traditionnels les feuilles de style n'agissent que sur le texte (ou presque). En HTML avec les CSS on peut paramétrer tous les éléments qui servent de balise, que ce soit un <DIV> (l'équivalent d'une boite) ou un <EM> (l'équivalent de l'italique - pour qui par exemple on peut attribuer un autre style que l'italique pour les esprits les plus tordus).

Bref tout ça c'est bien théorique, en fait plutôt que tout ce blabla j'aurais bien pu me contenter de ces derniers mots. Je vais donc conclure par un exemple des plus parlant, avec une représentation de diagrammes uniquement en CSS et HTML. Sur l'image ci dessous à gauche, la mise en page en HTML sans style, à droite la même mis en page HTML avec les styles appliqués.

Voir le code associé et toute l'explication sur le blog de l'auteur de cette démonstration.

En vrac, quelques outils et applications bien pratiques

Mox Folder — Sun, 16 Mar 2008 18:55:00 -0400

Productivité

Instapaper : vous êtes sur une page web très intéressante, vous n'avez pas le temps de la lire ? Grâce à l'application web Instapaper, pas de soucis vous pouvez bookmarker vos pages et revenir les lire quand vous voulez à partir de votre ordinateur ou n'importe quel appareil mobile connecté à Internet ;
Read It Later rempli plus ou moins les mêmes fonctions mais sous la forme d'un plugin Firefox... impose d'avoir Firefox et d'utiliser toujours la même machine, à priori moins puissant, donc, qu'Instapaper ;
Une fois que vous bien pris le temps de lire des trucs intéressants, vous avez sûrement besoin de partager votre lecture. Vous allez donc ressentir aussi le besoin d'envoyer une URL ou de la poster sur votre appli web 2.0 préférée (Twitter par exemple). Et bien Awesome Highlighter et un outil très pratique qui vous permet de n'highlighter qu'une partie du texte d'une page web. L'application garde en mémoire vos textes highlighités et fourni le lien adequat. Ne vous reste alors qu'à l'envoyer (cette dernière fonction ne semble par contre pas encore être vraiment au point).

Design

Splashup est un outil de retouche de photos en ligne ;
csstypeset est un outil de formatage de texte en ligne qui vous permet d'obtenir le code CSS approprié. Simple et efficace ;
xScope est un petit logiciel pour Mac qui vous permet d'effectuer tout un tas de mesures à l'écran.

Divertissement

Plein de petits jeux en Flash amusants, mignons et addictifs sur Orisinal.

Web 2.0

Compfight permet de faire des recherches de photos sur Flickr ;
Ma Résidence permet de mettre en relation propriétaires, locataires, syndics et pouvoirs publics.

Revue web, spéciale DESIGN

Mox Folder — Sun, 10 Feb 2008 06:00:00 -0500

Je laisse tomber mes revues web hebdo, la régularité étant trop contraignante je préfère faire des revues du web par thèmes lorsque j'ai assez de contenu. Ça permet de revenir sur des articles ou des news qui datent aussi. Cette revue est consacrée au design.

Typographie

J'avais déjà parlé du film Helvetica rendant hommage au créateur de la fonte du même nom, en septembre dernièr Écran.fr revenait sur le film et la fonte à l'occasion d'une exposition chez Collette. L'Helvetica en quelques mots :

Elle est l’amie des entreprises, de toutes les entreprises : Toyota, Tupper ware, Lufthansa, Muji, Nestlé, Orange, ou American Apparel. Et la chouchoute des administrations. Tous aiment sa neutralité, son efficacité, sa transparence. Son côté rassurant et un poil autoritaire. C’est elle qui dit ce qu’on a le droit de faire ou pas dans la rue : « Ne pas jeter ! », « Tirez », « Poussez », « Interdit de se garer », « Défense d’afficher » ; mais elle aussi qui nous guide dans le métro new-yorkais.

En octobre dernier SimpleBits nous apprenait que Webkit (le moteur de rendu de Safari) supporte désormais la balise CSS @font-face qui permet à l'utilisateur de télécharger la fonte spécifiée par le web-designer. Ainsi on n'est plus limité aux polices sytèmes (soit Arial, Trebuchet, Verdana, Times;o), et ça tombe bien puisque SimpleBits conçoit et vend des polices de caractère dont DingBit. Espérons une généralisation proche sur tous les navigateurs. Pour ceux qui ça intéresseraient, j'ai trouvé sur cette page de mozilla un exemple de CSS :

@font-face {
  font-family: nom-de-police-distante;
  src: uri;
}

Tester les caractères spéciaux d'une fonte parmi les fontes système Mac et PC, via Swissmis ;
A Dialogue With Public Space, Robin Howie joue avec la typograhique dans un contexte urbain, ça rappelle certains travaux d'Antoine Bardou-Jacquet (Noos vous vous souvenez ?) ;
Présidentielle US, que disent les fontes des affiches des candidats ?

Web design

Dan Cederholm de SimpleBits faisait remarquer que le site d'Ikea bénéficie d'une mise en page élastique. En clair, la mise en page s'adapte autoutomatiquement en fonction de la taille de la fonte sans déformer la maquette. Allez sur le site d'Ikea, pour tester faites pomme + plusieurs fois ou ctrl + si vous êtes sur PC (pomme 0 et ctrl 0 pour revenir à la taille de police par défaut) . Essayer avec d'autres sites, vous verrez que souvent la mise en page ne supporte pas le changement de la taille de fonte. Dan Cederholm est l'auteur du livre Bulletprooff Web Design, une introduction au design Web dans lequel il définit son concept qu'il nomme bulletproof (à l'épreuve des balles en français). Cet exemple avec Ikea illustre parfaitement ce concept.

Général

Un ouvrage comprenant 500 grilles et feuille de style prêtes à l'emploi ;
10 Ways To Get Design Approval : Je retiendrai particulièrement le 4 - Avoid multiple concepts - qui, il est vrai, est contre-productif en plus d'ouvrir la porte grande ouverte à des absurdités... It is common for a client to request one element from one design and another from the second. As any designer knows this seldom works ... et là n'importe quel designer se reconnaîtra dans ces mots ;o) ;
Le meilleur des tutoriaux Illustrator par Smashing Magazine ;
10 idées pour un design web pertinent, toujours via Smashing Magazine ;
Yang Liu, étudiante chinoise à transcrit sous forme graphique les différences de culture entre les allemands et les chinois, via Fubiz.

CommandShift3, votez pour le meilleur site web

Mox Folder — Wed, 30 Jan 2008 17:13:00 -0500

Voilà un site typiquement web 2.0, très bien fait avec un joli design. Reprenant le principe des sites de battle de photos de pin-up dans lesquels ont doit voter pour celle qu'on trouve la mieux, ici il faut voter pour le design de site qui nous attire le plus...

Et je dois bien avouer qu'avec prés de 40% de victoires, je suis un peu déçus de mon ranking, je suis dans la petite moyenne quoi. À voir comment ça évoluera avec le temps, mais ça semble baisser de jours jours :o(...

Vous pouvez ajouter vos propres sites et vous aurez droit en prime à des messages vidéos de personnalités du design web. Accessoirement ce site est aussi une très bonne source d'inspiration pour les designers, relever les tendances, etc.

Elysee.fr, DÉ-COM-PLE-XÉ

Mox Folder — Sat, 29 Sep 2007 11:54:00 -0400

La président n'aura pas tardé à effectuer une refonte du site de l'Élysée qui laisse quelque peu perplexe... En effet, on apprend via Embruns et Versac que non seulement c'est un copier/coller presque conforme du site de Sarkozy candidat mais qu'en plus ça aurait été développé avec les pieds. Enfin, toujours chez Versac : ça aurait été fait bénévolement (manquerait plus qu'ils facturent un copier/coller ;o). Bon de toutes façons que soit le site de campagne de Sarkozy ou le site de l'Élysée c'est le français qui paie au final, mais : à t-on payé deux fois plein pot ?

Cerise sur le gâteau : cliquez sur accessibilité en bas à droite, le player flash est un player mp3 développé par Dew qui a un blog et lorsque l'on clique sur le point d'interrogation du player on tombe sur le blog de Dew le développeur qui en ce moment poste des photos sur son voyage aux USA ... c'est dire le niveau de développement du site censé représenter la présidence, c'est vraiment de l'amateurisme... y a des limites au bénévolat quand même, les gars seraient probablement plus utile à préparer l'hiver pour les SDF.

Pour l'occasion je vous invite à découvrir ou redécouvrir ce que J'avais écrit à l'époque concernant le site de Sarkozy candidat :

Je suis quand même bluffé par la machinerie mise en place : Vidéo, flux RSS, financement par SMS... Manque un blog et/ou un espace d'expression et, pourquoi pas, l'attirail communautaire pour faire du site de campagne de Nicolas Sarkozy un vrai réseau communautaire en ligne et fédérer ainsi une communauté autour du site.

Quand on se connecte sur le site on peut voir le favicon du site avec la tête-à-Sarkozy sur son navigateur (là présentement j'ai un onglet avec la tête-à-Sarkozy qui s'affiche à coté du titre de l'onglet... troublant) ;

Sur la première page, un message de bienvenu et un bandeau de soutien pour aider à financer la campagne... via SMS. Je voudrais bien connaitre les retombées d'un tel système de financement. Je trouve ça génial dans l'idée, ça donne l'image d'un parti résolument moderne dans les moyens utilisés MAIS quel est l'impact réél ? ;

Passée la première page, on accède enfin au site, et là il y a un énorme compte à rebours en haut à droite de la page. Ce compte à rebours a quelque chose d'hypnotique et puis on est plus habitué à ce genre de comptes à rebours sur des sites de promotion de films pour annoncer un nouveau trailer prochainement disponible par exemple... évidemment c'est too much : À quand le “COMING SOON, Sarkozy président !” ? ;

Pour continuer dans le too much : la fenêtre vidéo NS TV... on se croirait dans un univers SF futuriste parodique à la Verhoeven comme on peut voir dans les films “Robocop”, “Starhip Trooper” ou encore “Total Recall”), comme pour renforcer ce coté parodique le TV sur fond rouge rappelle étrangement le logo de YouTube.

30 astuces pour Photoshop

Mox Folder — Thu, 27 Sep 2007 17:40:00 -0400

Nick La, auteur du blog Web Designer Wall nous livre 30 raccourcis et tips pour Photoshop qu'il a appris à manipuler à force de pratiquer le fameux logiciel d'Adobe. Si vous êtes utilisateur de Photoshop y en a que vous connaitrez surement déjà, voici ci-dessous mes découvertes préférées :

Drag selection (n° 1) ;
Drag to adjust numeric value (n° 6) ;
Scroll to adjust numeric value (n° 7) ;
Collapse or expand all layer groups (n° 10) ;
Navigate layer blending mode (n° 13) ;
Switch between document windows (n° 26).

Je vous invite aussi à découvrir un autre site de l'auteur : Best Web Gallery qui, comme son nom l'indique, est une gallerie qui répertorie le meilleur du web, un peu comme l'initiative dont je vous parlais dans ce billet.

Revue du web, semaine 34

Mox Folder — Fri, 31 Aug 2007 16:17:00 +0000

Va falloir que je sois plus sélectif à l'avenir... Là je me rend compte que ça fait beaucoup pour pas grand chose, mais bon pour l'occasion j'ai classé par thèmes :

Design, Web et médias

Gandi annonce le lancement du .mobi, je me demande quel est l'intérêt... Ne vaut-il mieux pas créer une URL du genre m.ledebugger.com comme beaucoup de sites le font ? ;
Le mobile a le vent en poupe, voir l'ouvrage Mobile Web Design de Cameron Moll dont je vous parlais hier (voir billet)... pour les news iPhone c'est en bas dans la catégorie Apple ;
Un algorithme étonnant de redimensionnement d'images présenté par Fred Cavazza ;
Le format RAW démystifié sur Neophoto ;
Smashing Magazine nous présente une liste de 45 blogs qui bénéficient d'un design excellent (via Embruns), dommage que ce soit uniquement des blogs anglophones et par ailleurs Dotclear est cruellement absent de la sélection... qui se dévoue pour une sélection francophone ? ;
Les Vélib' ont fait couler beaucoup d'encre, en bien ou en mal le procédé a beaucoup de détracteurs. Peter Gabor adopte le concept mais déplore d'autant plus le piètre logo, il s'en explique dans ce billet et se fend même d'une vidéo démonstrative ;
Aziz nous fait découvrir une vidéo d'anticipation sur le future des médias : J'aime bien la réalisation, mais pour arriver à Google va dominer le monde c'est quand même une vision bien limitée... enfin c'est le lot des œuvres d'anticipation que de cristalliser les peurs du présent en les projetant dans le futur ;
C'est la rentrée télé, les chaines présentent leur grille de programme, ainsi Écrans.fr nous apprend que Paul Amar succèdera à Daniel Schneiderman dans une émission qui aura comme mission de décrypter les médias et l'actualité. Nom de code : Revu et corrigé chaque samedi à 19h sur France5, j'espère juste qu'ils le passeront sur TV5 Monde.

ce sera un décryptage de l’actualité, virgule, un décryptage de l’actualité par les médias, virgule, et l’actualité des médias eux-mêmes. Ça m’intéresse de savoir comment la presse parle du voyage de Kouchner à Bagdad, mais je veux aussi savoir pourquoi Kouchner est allé à Bagdad

VOD et contenu numérique

La grosse news de la semaine, c'est la chaine TF1 qui annonce qu'à la rentrée elle diffusera sur son site TF1vision des épisodes de la saison 2 de Heroes le lendemain de la diffusion US en VO sous-titrée à partir de 2€ par épisode (voir chez Hubert Michaux). Streaming plus DRM avec visionnage temporaire, cette offre s'apparente plus à de la location, à comparer avec des services équivalents donc mais c'est une très bonne nouvelle de voir TF1 avancer et innover (voir aussi sur Point-Blog et MacBidouille) ;
Pour continuer avec Heroes, cette semaine Écrans.fr nous propose une interview de Dennis Hammer, co-producteur exécutif de la série de NBC, dans laquelle on apprend notamment que l'audimat aurait été décevant lors de la diffusion cet été sur TF1 (à mettre en relation avec le point ci-dessus évidemment). Hammer déclare aussi qu'à l'avenir les séries de ne sont regarderont peut-être que sur Internet (à mettre en relation avec le point ci-dessous) ;
Dans le même temps News Corp, le réseau de Rupert Murdoch, en collaboration avec NBC annonce que sa future plateforme de visionnement de vidéos en ligne Hulu sera disponible en béta privée en octobre pour une concurrence frontale avec Youtube et Dailymotion (via Info du Net et Mashable.fr) ;
Un petit monde en ébullition donc, les participants fourbissent leurs armes, tout le monde avance ces pions, ainsi on apprend aussi dans la foulée que NBC (encore eux !) souhaite mettre un terme à son partenariat avec Apple dans le cadre de l'iTMS (à voir sur MacBidouille, Engadget et MacGénération;
DERNIÈRE MINUTE : Apple anticipe et met fin au contrat avec NBC dès la rentrée de septembre (via Engadget) ;
Pendant ce temps là Sony abandonne discrètement l'ATRAC que tout le monde a déjà oublié au profit de l'AAC (bon point pour Apple, via Mac Bidouille), et ferme du même coup sa plateforme Connect (via génération MP3), voir aussi sur Écrans.fr ;
Ce dernier évènement vient nous rappeler à quel point dans le cadre de la vente de produit numériques - et attention je différencie bien là vente et location - les DRM sont une belle supercherie, heureusement Tristant Nitot veille et vient aussi nous le rappeler !

Apple et Hi-Tech

Le nouvel iMac est beau mais Mac Bidouille nous explique qu'il est difficile à démonter et que les centres techniques se plaignent notamment à cause de la plaque de verre (encore une prouesse technique de design et d'intégration de la barre d'Apple, pour ceux qui pensent encore que le design n'est qu'affaire d'esthétisme...), néanmoins on apprend aussi qu'elle ne sera pas chère à remplacer en cas de bris ;
Le Sanyo's Xacti DMX-HD1000 serait le plus petit camcorder HD 1080p au monde, pas très beau mais assez classe je suis curieux de voir le résultat, perso je suis relativement déçu de mon Xacti C6 (bon rapport qualité prix mais performances conséquentes au petit prix) à ce niveau je préfèrerais mettre un peu plus cher pour avoir un camcorder digne de ce nom même s'il ne fait pas de 1080p, via Engadget ;
Les premières machines à base de Windows Home Server font leurs premières apparitions, présentée lors de dernier CES de Las Vegas (voir compte-rendu) j'en parlais dans ce billet... là aussi je suis curieux de voir ce que ça donne malgré que ça tourne sous Windows (Engadget présente le Fujitsu-Siemens' Scaleo Home Server, le HP MediaSmart Home Server et Medion's Windows Home Server MD 90110), je suis vraiment intrigué par ces produits, j'y reviendrai surement prochainement ;

iPhone

L'iPhone sera t-il le produit de se début de siècle qui aura déchainé le plus de passion ? On commence avec un test de Génération MP3 qui a jugé l'appareil sur ces fonctionnalités PMP (Portable Media Player) ;
iPhone bashing : Mac Génération rapporte que le Canard Enchainé s'est payé l'iPhone dans ses colonnes, Libération j'aurai compris c'est leur fond de commerce, mais le Canard ils sont plus habitués aux révélations politique et aux questions de société non ? ;
iPhone hacking : ça vire au ridicule, un abonné de Rogers à Montréal aurait dépensé 200$ en plus du prix de l'iPhone et de l'abonnement à Rogers qui coute la peau du cul (je suis abonné à Rogers) pour commander une carte Turbo Sim afin de déSIMlocker son iPhone... allez festival : Mac Bidouille a testé déSIMlockage hardware et ça marche mais c'est fastidieux et risqué du coup ils nous montrent une vidéo de la méthode software, évidemment Apple et AT&T réagissent et ceux qui promettent le logiciel sésame sa ravisent (via Engadget, Écrans.fr et Mac Génération), enfin Génération MP3 fait le bilan des solutions disponibles.