Cet article est dédié à tous ceux qui se demandent pourquoi la ligne “Développement web” est si importante dans un devis. Ou ceux qui se disent “Ca y est, mon site est terminé j’ai validé la maquette”. Si vous n’avez jamais entendu parler de code source, suivez-moi ! Mais si, c’est tout simple !

Comment est fait un site Internet ?

Je vous invite à faire un clic droit sur cette page, et “Afficher la source”. Vous devriez voir apparaître ce genre d’horreur :
code

Mon travail, c’est de rédiger ces codes. Ou plutôt rédiger les codes qui vont générer les codes qui affichent ce code. Mais n’allons pas trop loin pour l’instant. VOUS, que voulez-vous ? Vous avez besoin d’un site internet pour :

  • Augmenter votre notoriété
  • Améliorer votre image
  • Organiser un événement
  • Vendre des produits
  • Disposer d’outils en ligne
  • Etc…
En résumé, si je peux me permettre, tout ça sert à une chose : gagner de l’argent. Un site est un investissement dans ce sens, il a toujours un but. Alors, quel rapport avec mon code ?
Pour que votre outil en ligne fonctionne, il doit obéir à toutes ces règles non exaustives :
  • Fonctionner sur tous les navigateurs (Internet Explorer, Firefox, Safari, Chrome) et toutes les plateformes (PC, MAC, Linux, votre Iphone ou Ipad…)
  • Être beau, fluide et ergonomique pour favoriser la navigation de votre visiteur et donc lui plaire, ce qui augmente l’effet cognitif de votre entreprise sur le visiteur
  • Se charger rapidement pour éviter de perdre le navigateur
  • Et surtout, avant tout, être bien positionné dans les moteurs de recherche.
A votre avis, où se situe la réponse à toutes ces problématiques (il en manque beaucoup mais j’ai fait court). Dans le code, effectivement.

Concrètement, tu fais quoi ?

En amont

Avant le travail graphique réalisé par Damien, je réfléchis à tous les outils en ligne dont le client a besoin et qui peuvent lui rendre le plus service dans le but visé. Ensuite, on rabote les options en fonction du budget, car le développement, c’est très chronophage. Ce n’est pas parce que je travaille dans un contexte “virtuel” que ce n’est pas long et fastidieux (Par exemple un ébéniste peut vous réaliser un escalier en deux heures. Mais à vos risques et périls, à bon entendeur…).

L’intégration

Ensuite, un graphiste me réalise une très chouette maquette graphique bien pensée, une image de votre site que je vais diviser en tout plein de petits blocs. La différence entre cette image fixe qu’on m’a donné et la page html avec le code dedans, c’est que mes jolis blocs pourront :

  • S’étirer ou se compresser en fonction du contenu
  • Être chargés dans votre navigateur beaucoup plus vite
  • Dire à Google de quoi on parle ici, et comment la page est organisée, pour que vous soyez bien référencé
  • Vous permettre de mettre à jour vos contenus vous-même
  • Permettre à un aveugle de lire votre site. Et oui, ça compte !
Etc…

Le développement

Une fois que le site est en place en HTML, il va bien. Oulalah, qu’il est beau. Mais vous ne pouvez rien faire dessus : vous n’allez pas apprendre à coder comme moi pour ajouter une actualité ou changer une apostrophe. Je crée donc des outils d’administration qui vous permettront par exemple :

  • De changer les contenus texte aussi aisément que dans MS Word
  • De poster de belles actualités qui vont toutes seules télécharger vos images, les redimensionner et les alléger pour les diffuser sur votre site, dire l’heure de diffusion et faire le café…
  • D’envoyer des e-mailings personnalisés en HTML à vos abonnés
  • De gérer votre comptabilité en ligne
  • D’ajouter vos points de vente sur une carte intéractive google map
  • De vendre des produits en ligne, etc, etc…
Les possibilités sont infinies…

Débugs, tests, validation

Une fois votre site codé, on l’envoit sur internet pour être sûr qu’il fonctionne sur votre hébergeur. Et là, rebelote, on corrige tout ce qui peut ne pas aller, ou qu’il faut repenser, modifier…

 

Mais c’est toujours pareil en fait, il ne suffit pas de copier/coller ?

Ah, pas du tout. Chaque développeur s’organise à sa façon. Mais plus on utilise une solution “avancée” de création de site (WordPress, Jooomla…), et plus on est bridé par la technologie à employer. Chez Here We Com, on travaille sur-mesure, on a donc créé un CMS (un squelette de base) qui est en constante évolution depuis 4 ans et qui nous permet d’être très souple sur les options qu’on peut offrir au client, ce qui implique un temps de travail légèrement supérieur. Celà nous permet à la fois d’optimiser au mieux le référencement et de vous proposer des outils au top de l’ergonomie : comprenez que même en ayant découvert internet il y a trois jours, vous POURREZ mettre à jour votre site.

Dans tous les cas, si certains outils peuvent être récupérés d’un projet à l’autre, la partie intégration, elle, est incompressible.

Donc quand le graphiste m’envoit la maquette visuelle de mon nouveau site, il reste en fait beaucoup de boulot ?

A cette étape, ce que vous avez, c’est une image. Mon travail est de rendre cette image vivante pour qu’elle soit présente sur Internet, qu’elle fonctionne au mieux sur chacun des points vu ci-dessus

Conclusion : la validation est le moment clé

Quand un client me demande si on peut “ajouter un bouton“, moi je vois les 14 fichiers différents qui vont être influencé par le fait d’ajouter un bouton. C’est pourquoi quand la maquette est soumise à validation, prenez le temps d’y jeter un oeil car modifier un élément visuel minime peut changer la composition même de l’ensemble du site et prendre un temps considérable.
Un exemple ? Voici le code pour afficher un bouton :
Facile.
Voici un exemple rapide de code qui pourrait éventuellement rendre ce bouton utile, ce que vous ne voyez pas :
var runningOption=0;
function doIt(){
function turnRadioOn(){
var microtime=new Date().getTime();
var volume=1; // updated next by ajax
var mp3=”; // updated next by ajax
var soundlength=0; // updated next by ajax
// visuel
$(‘#playpause span’).hide();
$(‘#playpause img’).attr(‘src’, ‘img/pause.png’);
// turn radio session on and get volume
$.ajax({
type: “POST”,
url: “scripts/ajax_radio.php”,
dataType: ‘json’,
data: “power=on”,
success: function(jsonMsg){
volume=jsonMsg.volume;
mp3=jsonMsg.mp3;
soundlength=jsonMsg.soundlength;
// add flash
$(‘#playercontent’).flash(
{
src: ‘swf/backsound.swf’,
width: 30,
height: 20,
wmode: ‘transparent’,
flashvars: { microtime:microtime, myvolume:volume, mp3:mp3, soundlength:soundlength }
}
);
soundon=true;
}
});
}
function turnRadioOff(){
// visuel
$(‘#playpause span’).show();
$(‘#playpause img’).attr(‘src’, ‘img/play.png’);
// turn session off
$.ajax({
type: “POST”,
url: “scripts/ajax_radio.php”,
data: “power=off”
});
// remove
$(‘#playercontent *’).remove();
soundon=false;
}
}


PHP :
// débug UTF-8 <- accent important
$result=array();
$result[‘mp3′]=’sherpas.mp3’;
$result[‘soundlength’]=50;

// $devmode=true;
$log .= “n accès à “.date(“H:i:s”);

// allume ou éteint la radio
if($_POST[‘power’]){
if($_POST[‘power’]==’on’) $_SESSION[‘radio’]=true;
if($_POST[‘power’]==’off’) $_SESSION[‘radio’]=false;
$log .= “n turning radio “.$_SESSION[‘radio’];
}
// définit le volume en cours
if($_POST[‘volume’]){
$_SESSION[‘radio_volume’]=floatval($_POST[‘volume’]);
$log .= “n volume défini à “.$_SESSION[‘radio_volume’];
}

// retourne le volume en cours (de 0 à 1) si existant, 1 par défaut
if(isset($_SESSION[‘radio_volume’]))
$result[‘volume’]=$_SESSION[‘radio_volume’];
else
$result[‘volume’]=’1′;

echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

if($devmode){
$log.=” n n FIN”;
$fp = fopen(‘dev.txt’, ‘w’);
fwrite($fp, $log);
fclose($fp);
}
?>

Alors, je fais un beau métier ou pas ?