Catégories: "Développement Web"

Les URL, c'est pas pour les chiens!

Les URL, c'est pas pour les chiens!

Suite à un problème de synchro, je suis en train de passer en revue tous mes bookmarks... et je me rends compte que les trois quarts de mes vieux bookmarks (période 2002 à 2005) vers des sites français sont cassés... erreur 404... alors que concernant les sites US, c'est à peine 20%.

Encore une fois, les français brillent par leur totale incompréhension du web...

Les adresses web, les URL, oui vous savez les trucs qui commencent par http:// là... c'est important ces trucs là... à chaque fois que vous les changez sur votre site, eh bien vous perdez des visiteurs... qui comme moi vous avaient mis dans leur signets... et je ne parle pas de la page principale de votre site, je parle des pages tout au fond de votre site! Celles que vous négligez, mais celles qui intéressent en réalité les internautes...

Pire encore, il y a surement des liens vers ces pages depuis d'autres sites... ces liens là se retrouvent cassés...

Quel gâchis!

PS: la solution existe, elle s'appelle redirections 301. Cherchez donc sur Google ;)

Design web: étape par étape

Design web: étape par étape

Parfois, ça fait du bien de récapituler... ;)

EtapeCe qui est faitCe qui est livré Par qui?
Conception Le concepteur propose un concept, une structure générale pour le site, y compris une arborescence de navigation. Il est particulièrement important de connaître le nombre de niveaux d'arborescence avant de commencer le design des menus de navigation! Croquis, schémas, organigrame Client / SEO / Interaction designer / DA
Design graphique Un graphiste propose un ou plusieurs styles graphiques en tenant comptes des contraintes exprimées à l'étape précédente. Fichier image "à plat" pour validation client DA / Graphiste
Maquette Un graphiste finalise un design graphique ("pixel perfect") qui correspond au pixel près à ce que le site donnera dans un navigateur web typique. Fichier PSD calé au pixel près, calques séparés Graphiste
Découpage

Le fichier PSD est découpé en images indépendantes, soit par zones, soit par calques ou encore une combinaison des deux, envue de l'étape d'intégration.
Diverses icônes sont rassemblées en un seul fichier pour l'optimisation des temps de chargement (techniques des "sprites"). Ce fichier inclue également les versions "roll over" des icônes ou boutons.

Plusieurs fichiers PNG, GIF et/ou JPG Graphiste / Intégrateur
Intégration Une page HTML statique est crée avec des contenus d'exemple "lorem ipsum", les éléments graphiques sont positionnés et tous les styles sont appliqués par CSS. Les rollovers sont gérés dans le fichier CSS.
On obtient une page HTML qui, une fois ouverte dans un navigateur, ressemble en tous points à la Maquette d'origine. Les rollovers fonctionnent.
Page HTML ou XHTML statique, accompagnée d'une feuille de style CSS et d'images PNG, GIF ou CSS. Graphiste / Intégrateur / SEO
Dévelopement client side Un dévelopeur rajoute les éléments javascripts dynamiques tels que menus déroulants, onglets montrant des contenus interactifs, animations, et autres "gadgets" potentiels. Même page HTML que précédemment augmentée d'un fichier Javascript (.js) Développeur client side / Interaction designer / SEO
Dévelopement server side Un développeur réalise l'interfaçage avec la base de données, par exemple en PHP. Les contenus "lorem ipsum" sont remplacés par de vrais contenus en temps réel. Les champs de recherche permettent de lancer des recherches. C'est également à cette étape que sont rajoutés les interfaces AJAX telles que: suggestions de recherche d'après les premiers caractères tapés... Le fichier .html devient un fichier .php . Pour le voir fonctionner il faut le placer sur un serveur web. Développeur sever side / Développeur client side / Interaction designer / SEO

Mac/PC divergences de couleur...

Mac/PC divergences de couleur...

En quête de couleur

Sur mon bureau il y a 3 écrans plats (SONY SM-S95DR) rigoureusement identiques. Les réglages sont identiques et les numéros de série se suivent, ce qui permet également de présumer raisonnablement de composants électroniques “identiques". En temps normal, les 3 écrans sont reliés numériquement (DVI-D) à mon PC et affichent rigoureusement les mêmes couleurs.

Le problème du jour: éditer des images sur Photoshop (CS2) sur Mac et obtenir les mêmes couleurs à l’arrivée sur PC dans un browser web… Ben c’est pas simple!! :(

Je commence par brancher mon Mac (OS X 10.4.8 Tiger) en DVI sur l’écran du milieu et je laisse le PC sur les écrans des côtés. J’affiche le même fond d’écran et la même image PNG de test – sous ACDSee sur PC et Preview (la Visionneuse) sur Mac. Et bien sûr… rien n’est pareil!

Calibration

Je clique dans tous les sens et je fini par trouver une solution à peu près satisfaisante: sur le Mac, je vais dans les Préférences Système puis Moniteurs puis Couleur. Un profil nommé “SDM-S95DR/FR” et correspondant à mon moniteur est présélectionné. (Je me demande d’où vient ce profil? Est-ce qu’il est intégré à OS X ou bien est-ce que c’est le moniteur qui a envoyé ses valeurs par DVI au Mac. Je table sur la deuxième solution parce que ça ressemble plus à de la science fiction mais en réalité je n’en sais rien…)

Post complet »

LiveHTTPHeaders for Firefox

Link: http://fplanque.com/dev/web-dev/livehttpheaders-for-firefox

Live HTTP headers is a FireFox extension that lets you look at all HTTP headers for all requests issued by the browser. Now updated for Firefox 1.5.

Rasmus: "I don't like SOAP"

Link: http://fplanque.com/dev/php/rasmus-i-dont-like-soap

At PHP Forum, Rasmus wisefully explained that SOAP is intrinsically broken because it's too complex... just as anything that takes more than 20 minutes to understand.

When it comes to webservices, I myself tend to prefer XML-RPC ("Does distributed computing have to be any harder than this? I don't think so.")... and sometimes I wonder wether REST would be a nice alternative...