Caouinche

n.f : tête.

étym : bourguignon

syn : binette, bourrichon, caboche, ciboulot, caillou, trogne, tronche…

Offline

Lors de la création

XXXX

fabrice-villard-Jrl_UQcZqOc-unsplash

L’arborescence

Un plan de site cohérent

La création d’une arborescence réfléchie vous permettra de créer des pages web qui devraient pouvoir s’indexer et se référencer rapidement.

Votre arborescence doit être pensée pour l’utilisateur (mais aussi pour les robots avec l’utilisation de termes vous permettant de vous placer convenablement), comment vais-je présenter les catégories, que vais je rassembler ou séparer, etc.

Utilisez des dossiers, des sous-dossiers (pas à outrance) pour organiser et structurer le tout, qu’il s’agisse de dossiers pour les pages HTML

Exemple de structure d’un portfolio :



    
index.html
contact.html
presentation-bibi.html
services-bibi.html
   realisation-site-web
      troc-cadeaux.html
      mes-architectes.html
      mariage-et-confettis.html
      omg.html
   realisation-logotype-print
      troc-cadeaux.html
      instant.html
      halles.html
      gestion.html
style.css
   css
      slideshow.css
      countdown.css
   js
      scroll-top.js
      slideshow-left.js
      countdown.min.js
   images
      logotype.png
      logo-guillaume.png
      fleche-left.jpg
      fleche-right.jpg
      scroll-top.png  
mentions-legales.html
    
  

Il est même recommander de structurer aussi son dossier images.

    
   images
      logotype.png
      logo-guillaume.png
      fleche-left.jpg
      fleche-right.jpg
      scroll-top.png
   realisation
      site-web
         troc-cadeaux
            ecran-accueil-site-revente-cadeaux.jpg
            page-annonce-site-revente-cadeau.jpg
            page-liste-site-echange-cadeaux-noel.jpg
            inscription-site-echange-cadeau.jpg
            mise-situation-smartphone.jpg
            mise-situation-tablette.jpg
            mise-situation-laptop.jpg
         mes-architectes
            ecran-accueil-annuaire-architecte.jpg
            page-annuaire-presentation-agence-architecte.jpg
            page-liste-agences-architecture.jpg
            architectes-inscription-agences.jpg
            mise-situation-smartphone.jpg
            mise-situation-tablette.jpg
            mise-situation-laptop.jpg
			…
    
  

Ici, tout comme pour l’organisation de mes fichiers HTML, j’ai créé des dossiers pour organiser mes images. Le but ?
Pouvoir me repérer plus rapidement et simplement dans mes fichiers. J’ai besoin de remplacer une image, d’en ajouter une nouvelle ou autre, je n’ai qu’à me rendre dans le dossier correspondant et y faire ce que j’ai à faire.
Plus simple et plus pratique que d’avoir à lire l’ensemble des noms des images pour retrouver celle sur laquelle je souhaite intervenir.
Et ça me permet aussi d’avoir des noms d’images identiques : mise-situation laptop, tab et smartphone

Conclusion
Le web, c’est rigoureux
En deux mots :
Organisation et hiérarchisation

Le rédactionnel

Des contenus de qualité

    
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    
  

Le rédactionnel est à faire avec intérêt. Ce n’est pas parce que vous êtes dans un métier lié à l’image que vos textes doivent être inexistants.

Les moteurs de recherches se servent des contenus textuels pour référencer les sites, il est donc impératif d’en avoir sur son site, et ceci même si on est photographe.

Les contenus rédactionnels doivent être pensés pour l’utilisateur et pour le référencement, en jouant sur des mots clefs, des champs lexicaux, des synonymes.

Un impératif : Éviter le Duplicate content
Les moteurs de recherche aiment les contenus de qualité et uniques. Le duplicata content est donc à proscrire, car il est repéré par les moteurs de recherches et est sanctionné. Si vous utilisez un contenu issu d’un autre site veillez à bien indiquer la source.

Structure du doc

du code

h(n), p et balise de structure.
Une bonne structure et hiérarchisation de l’information dans le document est la première chose mettre en place pour avoir pour un site web optimisé.
Vos titres et sous-titres doivent être hiérarchisés :
Le titre principal de votre page doit être unique et présent dans la balise h1
Les sous-titres et titres secondaires eux seront placés dans des balises de h2 à h6, toujours organisés par ordre croissant
Bien qu’avec le html5 il est possible d’avoir plusieurs h1
Vos différents textes doivent être contenus dans les balises p

Cas de figure simple

    
<h1> </h1>


<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

<p> </p>
    
  

Cas de figure avec répétition de h(n).
Ordre numérique important

    
<h1> </h1>


<h2> </h2>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3> </h3>


<h2> </h3>
<h3> </h3>
<h4> </h4>


<h3> </h3>
<h4> </h4>


<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

<h3> </h3>
<h4> </h4>


<h2> </h2>
<h2> </h2>

<p> </p>
    
  

Utilisez les balises de structure de document, comme le header, la nav, le footer, les sections, article, aside. Toutes ces balises vous permettront de faire comprendre aux robots à quoi les parties correspondent et vous seront utiles à vous aussi.

– Le header pour le haut du site. Partie dans laquelle on retrouve en général le logo et la navigation du site
– La nav, navigation principale du site
– La section regroupera des éléments ayant une même thématique, on sectionne la page en plusieurs partis
– L’article est un contenu qui a un « sens » différent ce ceux du reste de la page, il fait sens de en lui-même et peut être vu comme indépendante du reste du site.
– L’aside regroupe des informations non essentielles ou en rapport avec un article sur le site
– Le footer est le bas du site, on y retrouve en général les coordonnées, les crédits et éléments légaux

    
<header> </header>

<nav> </nav>

<section> </section>

<article> </article>

<aside> </aside>

<footer> </footer>

<p> </p>
    
  

Pour les éléments n’aillant pas de balise de structure on utilisera la div, balise générique à laquelle on attribuera un id ou une class dans le but de nommer le type de contenu ciblé.

    
<div> </div>

<div class="nomdelaclass"> </div>

<div id="nomdelid"> </div>
    
  

Si l’on souhaite cibler un élément dans une balise on peut, s’il est joué en ligne, au lieu de le cibler à l’aide d’une div utiliser une span, toujours en lui attribuant une class dans le but de la différencier des éventuelles autres class

    
<span> </span>

<span class="nomdelaclass"> </span>
    
  

Une structure saine avec une sémantique respectée et le plus gros du travail est fait.

L'élément <h1> est un élément sémantique qui donne au texte qu'il contient le rôle (ou le sens) de "titre de premier niveau de votre page."

source

URL et noms de fichiers

Des noms de pages cohérents

    
projet1.html
    
  
    
troc-cadeaux.html
    
  

projet1.html : le nom de la page ne m’apportera en termes de compréhension pour mon utilisateur et en termes de référencement strictement rien, tandis que troc-cadeaux.html : sera beaucoup plus compréhensible et pourrait éventuellement me permettre de faire venir sur mon site des personnes effectuant des recherches sur troc-cadeaux (étant donné que le nom troc cadeaux est dans l’URL de mon site)

La bonne combinaison de structure, balise et URL permettra à votre site de se faire une place à Googland et les autres moteurs de recherches.

Les liens

Maillage interne

Le maillage interne des liens permettra aussi aux robots et utilisateurs de passer d’une page à l’autre.

Un bon maillage interne permettra d’optimiser la navigation dans son site.

    
<p> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
<a target="_blank" href="#">Aenean commodo ligula eget dolor.</a> 
Aenean massa. Cum sociis natoque penatibus et <a href="#">magnis</a> 
dis parturient montes, nascetur ridiculus mus.
</p> 
    
  

Les images

Poids, affichage et nom

    
<img src="images/logotype.png" alt="logotype bibi creation de site web nantes"> 
    
  
    
<img src="images/logotype.png" alt="logotype bibi creation de site web nantes" 
title="logotype bibi creation de site web nantes"> 
    
  

Poids et nom… Pour vos designs vous allez probablement devoir utiliser des images afin d’illustrer certains propos.
Vos images devront être optimisées pour le web.
En web, on ne travaille pas en cm ou mm, mais en px
Les images ne sont pas en 300 DPI, mais en 72 DPI
Pour les rétinas, prévoir des images en 144 DPI (si je ne dis pas de bêtises…)

Sous Photoshop ou ilustrator, vous devez enregistrer vos images pour le web.
Personnellement je compresse une autre fois le poids de mes images, permettant ainsi à ces dernières d’être plus légères et donc, de s’afficher plus rapidement
J’utilise (pour Mac) l’utilitaire ImageOptim

Les images doivent être nommées à l’aide de la balise alt afin de permettre :
– aux robots de pouvoir les lires
– de pouvoir repérer dans un répertoire quelle image supprimer ou modifier
– permettre d’indexer ses images dans les moteurs de recherches grâce à leur nom

Certains CMS renomment le nom des images, ce qui est important est surtout d’avoir la balise alt remplie correctement.

Il est aussi possible d’associer un title en plus de la balise alt
Attention, à la base la balise alt doit décrire le contenu de l’image pour permettre en termes d’accessibilité la compréhension de l’image par les personnes avec un handicap visuel. La balise title elle sert à nommer l’image

Debugage

un site sans soucis

Les soucis d’accessibilités et de rendus en fonction des OS et navigateurs sont de plus en plus rares.
Il est néanmoins important de tester son site sous les diverses plateformes et sur les navigateurs les plus utilisés tels Chrome, Firefox, Edge, IE (petit ange parti trop trop), Safari (qui n’est pas un navigateur)…

En cas de dysfonctionnement visuel, il est impératif de remédier aux soucis, soit en revoyant une partie du code, soit en utilisant des hacks afin de cibler un moteur de rendu, un navigateur ou une version d’un navigateur.

Il est de plus en plus rare de devoir en utiliser. Il existe des hack css et html

    
/*HACK CSS*/	
	
/*Hack FF*/	
.coucou {
  border:1px solid green;
}

/*Hack 1*/
html:not([lang*=""]) .coucou {
  border:1px solid red;
}

/*ou hack 2*/
@-moz-document url-prefix() {
  .coucou {
    border:1px solid red;
  }
}

/*Opera*/
html:first-child .coucou {
  border:1px solid blue;
}
    
  

head du document

balises meta et title

    
<meta name="title" content="Créateur indépendant de sites internet à Grand-Fougeray, 
entre Rennes et Nantes" /> 
<meta name="description" content="Bloc Design, créateur indépendant de site internet 
et site mobile,  logotype et charte graphique à Grand-Fougeray, 
entre Rennes et Nantes" /> 
<meta name="language" content="fr" /> 
<meta name="robots" content="index, follow, all" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, user-scalable=no"/> 

<title> Créateur indépendant de sites internet à Grand Fougeray, 
entre Rennes et Nantes</title> 
    
  
    
<meta name="title" content="Créateur indépendant de sites internet à Grand-Fougeray, 
entre Rennes et Nantes" /> 
<meta name="description" content="Bloc Design, créateur indépendant de site internet 
et site mobile,  logotype et charte graphique à Grand-Fougeray, 
entre Rennes et Nantes" /> 
<meta name="language" content="fr" /> 
<meta name="robots" content="index, follow, all" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, user-scalable=no"/>

<title>Créateur indépendant de sites internet à Grand Fougeray, 
entre Rennes et Nantes</title>

<meta property="og:title" content="Créateur indépendant de sites internet à Grand-Fougeray, 
entre Rennes et Nantes" />
<meta property="og:description" content="Bloc Design, créateur indépendant de site internet 
et site mobile,  logotype et charte graphique à Grand-Fougeray, 
entre Rennes et Nantes" />
<meta property="og:url" content="https://www.bloc-design.fr/creation-site-internet-rennes-et-nantes.html" />
<meta property="og:image" content="https://www.bloc-design.fr/img/bloc-design-creation-site-internet.png" />
    
  
    
<meta name="language" content="fr" /> 
    
  
    
<meta name="language" content="de" /> 
    
  
    
<meta name="language" content="be" /> 
    
  
    
<html lang="fr-FR"> 
    
  

Votre site est terminé, vous êtes sur le point de le mettre en ligne.
Avant de le faire il faut s’assurer que
– chaque page dispose d’une balise title unique, bien remplie et comprenant un nombre de caractères maximum
– les balises meta sont toutes bien remplies, que leur contenu est unique, pertinent et qu’il correspond d’un point de vue numérique (taille des éléments) aux recommandations des moteurs de recherches.



Les balises les plus courantes
- title : longueur maximale : 20 et 70 caractères espaces compris
– meta description : longueur maximale : 70 et 160 caractères espaces compris
– meta language : spécifie la langue utilisée sur le site
– meta robots : permets d’indexer ou non une page et permets de dire aux robots de suivre les liens de la page
– meta viewport : permets de faire en sorte que le site sera visible sur des périphériques mobiles (s’il a été codé pour)



Autres balises possibles
– meta author pour préciser l’auteur du contenu
– meta keywords (obsolète)



Il existe aussi des balises à destination des réseaux sociaux, les balises OG (Open Graph)
Placées dans des balises meta avec l’attribut property
– og:title : correspond au titre de votre page comme la balise title
– og:description : correspond à une description syntétique de la page comme la balise meta description
– og:url : correspond à l’url de la page
– og:image : correspond à l’image choisie qui sera partagée sur les réseaux sociaux
– og:site_name : corresponds à l’url de votre site



Concernant le fait de déterminer une langue utilisée sur un site, cela peut passer via la meta language avec comme content un fr pour la France, de pour l’Allemagne ou un be pour la Belgique.
Il est aussi possible d’attribuer un attribut lang directement sur la balise html de la page web

Le balisage sémantique

schema.org

Il s’agit d’un balisage sémantique créé par les trois principaux acteurs du web, à savoir Google, Yahoo et Bing. Ces balises apportent du sens au contenu qu’elles encadrent pour faciliter la compréhension des moteurs de recherche, ce qui influence donc sur le référencement du site.

Grâce à ce balisage, on peut apporter un plus grand nombre d’informations aux robots et leur dire précisément à quoi correspond telle partie du code.

Le procédé est assez simple à comprendre bien que pénible…
Ce balisage est encore peu (pour X raisons) utilisé bien qu’il apporte une grande plus-value au site.

https://schema.org/

    
/*balisage schema.org pour une partie servant à présenter une personne*/

<div id="side-item" itemscope itemtype="https://schema.org/Person"> 
<p class="item-user-name"<<span itemprop="name"> Bibi 21</span> </p> 
<div itemscope itemtype="https://schema.org/PostalAddress"> 
<h3> <span itemprop="postalCode" class="item-zip-code"> 44200</span> 
<span itemprop="addressLocality" class="item-city"> Nantes</span> </h3> 
</div> 
</div> 
    
  
    
/*balisage schema.org pour une partie servant à présenter un produit*/

<div class="item-description-prix" itemprop="offers" 
itemscope itemtype="https://schema.org/Offer">
<h2 itemprop="name">PS5 Standard + GoT-1 Manette-Disque Dur 2 To</h2>
<span itemprop="price" class="price">600,00 €</span> 
<meta itemprop="priceCurrency" content="EUR">
</div>
</div>
<p>
<span class="item-p-type-titre-description">Description du cadeau</span><br>
<span class=itemprop="description">A vendre PS5 Standard + 
GoT-1 Manette-Disque Dur 2 To-184(PS4 & PS5) Jeux Cloud, 
encore sous garantie, avec factures à l’appuie Avec qu’une manette
PS5 blanche, Ghost of Tsushima (PS5 CD) ainsi qu’un disque dur de 2 To.<br>
Fonctionne parfaitement.</span></p>
    
  

Fichiers externes

css et js

    
/*CSS de base sans plugin*/	
<link href="style.css" rel="stylesheet" type="text/css"> 
    
  
    
/*CSS de base et plugins ou effets utilisés sur le site*/	
<link href="style.css" rel="stylesheet" type="text/css"> 

<link href="slide.css" rel="stylesheet" type="text/css"> 
<link href="form.css" rel="stylesheet" type="text/css"> 
<link href="galerie.css" rel="stylesheet" type="text/css"> 
<link href="scroll.css" rel="stylesheet" type="text/css"> 
<link href="hover-pic.css" rel="stylesheet" type="text/css"> 
<link href="countdown.css" rel="stylesheet" type="text/css"> 
<link href="highlight.css" rel="stylesheet" type="text/css"> 

  
    
/*CSS de base et plugins avec cumul des effets sur le CSS principal*/
<link href="style.css" rel="stylesheet" type="text/css"> 

<link href="css/slide.css" rel="stylesheet" type="text/css"> 
<link href="css/galerie.css" rel="stylesheet" type="text/css"> 

  
    
/*CSS de base et plugins cumulés sur le CSS principal*/	
<link href="style.css" rel="stylesheet" type="text/css"> 
    
  

Lorsque l’on conçoit un site, on utilise le CSS pour styliser les éléments.
Pour la conception d’animation on va utiliser des plugins qui eux aussi utiliseront du css.

Il est préférable pour une question de ressources de cumuler si possible les css pour n’en faire qu’un seul.
Un CSS bien construit permettra de s’y repérer facilement, en structurant bien les parties de la feuille de style.

Bien sûr si le cumul de tous les css est trop complexe il est toujours plus intéressant d’avoir deux ou trois appels à des css que d’en avoir une dizaine.

Ce que l’on vient de voir pour le css est identique au JS avec de possibles différences
Au lieu d’avoir des appels à un grand nombre de fichiers JS comportant de petites fonctions, pourquoi ne pas faire plus simple et toutes les cumuler sur un même script js ?

Attention néanmoins avec cette technique, car cela signifie que tous les scripts JS seraient appelés sur chacune des pages même si la page ne bénéficie pas de l’effet.

On peut donc imaginer avoir un JS avec les scripts qui sont utilisés partout, et des JS que l’on appellera uniquement sur les pages proposant l’effet.

Pour des minis script, le fait de les incorporés directement dans le HTML est aussi une solution.

    
<!-- JQUERY --> 
<script src="https://code.jquery.com/jquery-1.11.2.min.js"> </script> 

<!-- SLIDE --> 
<script src="js/responsiveslides.min.js"> </script> 

<script> 
    $(function () {
      $("#slider-intro").responsiveSlides({
       speed: 250, "timeout": 750, auto:true
      });
    });
 </script> 

<!-- NAV --> 
<script> 
(function($) {
    $(document).ready(function() {
        $('.hamburger__container').click(function() {
            $('.nav').toggleClass('open');
            $(this).children().first().toggleClass('open');
            $('html, body').toggleClass('noscroll');
        });        
    });
})(jQuery);
</script> 

<!-- SCROLL LINE--> 
<script> 
	$(function(){
	  $(window).scroll(function(){
	var top = $(window).scrollTop(),
		height = $(document).height(), 
		windowheight = $(window).height();
	var width = (top/(height-windowheight))*100;  
	$('#scroll-line').css('width', (width + '%'));
	});
	})();
</script>