5 Déc 2023
C’est quoi, développer un site web ?
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 :
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…
- 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.
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 !
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…
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.
Donc quand le graphiste m’envoit la maquette visuelle de mon nouveau site, il reste en fait beaucoup de boulot ?
Conclusion : la validation est le moment clé
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 ?