Tout sur le site Web

 Décode le code !

 Histoire, langages, liens, images, cms, normes, logiciels, on dégraisse tout... en vrac 

 

 

 


 

 

 


 

Histoire d’internet

 

Web 1.0 :

  • Site statique
  • Modification par FTP fichier par fichier
  • 1 webmaster (compétent)

 

Côté code :
Ecriture des styles directement dans le HTML
<p style=”font-family:times”>Youpi</p>

Exemple en ligne >> ici

 

Web 2.0 :    

  • Site dynamique
  • Mise en place de CMS
  • Modification par partie privée (backoffice)
  • 1 ou plusieurs administrateurs (compétences légères)

Côté code :

1 Fichier HTML  (index.html)
<p class=”soul”> Youpi </p>
Lié à un 1 ficher CSS (template.css)   
.soul { font-family:arial,serif ; }

 

Tableau WEB 1.0 / WEB 2.0

 

 

 


 

Les adresses / liens

Adresse absolue

L'adresse indiquée dans le lien ( URL), elle inclut tout le chemin en commençant par le protocole:

http://www.pasteur.fr/monfichier.html

Adresse relative

Elle n'inclut qu'une partie du chemin:

mon_repertoire/monfichier.html

 

 


 

Les images

 

Attention au poids des images, il est important d'optimiser son fichier image.

  • JPG (ou JPEG) : Format idéal pour les photos et les illustrations compliquées. Contient des millions de couleurs. La Compression de l’image se fait avec une perte de qualité qui va de 0% à 99% (à choisir pour chaque image en fonction de son poids final).

 

  • GIF : Très pratique pour les dessins et images simples, avec peu de nuances, ainsi que pour les logos. Peut contenir 256 couleurs ou moins. Ce qui veut dire qu’une image de plus de 256 couleurs enregistrée au format GIF ne va en retenir que 256. Gère la transparence et les animations.
  • PNG : Format libre de droits. Convient pour tout type d’image, la transparence mais pas les animations. Il existe en 8 bits (type GIF, 256 couleurs) et en 24 bits (type JPEG, millions de couleurs, mais pas de compression).

 

 


 

Les langages WEB

Html (xhtml, html4, html5)

Langage de balisage, de structure.
Il a son propre lexique par exemple des balises.

Principales balises HTML

head : tête
body : corps
p: paragraphe
h1 à h7 : titre
a : liens
ul, li, ol : puces et numérotations
table : tableaux
tr/td : ligne et cellule
div : claque (zone de texte)
strong/b :gras
i : italique
img : image
object : flash

Caractères spéciaux dans HTML

Certains caractères ont une signification spécifique dans HTML.
&nbsp; pour : espace
&quot; pour : "

 

 

Depuis 2012, arrivée du Html 5 : reprend le même lexique avec de nouvelles balises, et la possibilité de créer ses propres balises.
ex:  <matzen> …….. </matzen>

 

Php 

Langage de programmation, on part d’une “feuille blanche”. Il va s’écrire dans le html
      <p>
      [<?php……../>
      </p>
Indispensable pour travailler avec une base de données MySQL.

 

Xml

C’est un langage pour faire une “mini” base de données. C’est également des balises, mais que je crée à mon nom.
            <bibi><bobu> Matzen </bobu></bibi>

 

Ajax

Langage combiné. Aide à l’animation des sites.

 

Java script

Langage de programmation objet. Il va servir à animer des parties du site (Menu déroulant, bannière animée).

 

Css

“Cascading Style Sheet” Feuilles de styles pour mettre en page en vue du web design.

 

Flash

Disparait peu à peu (tablette et smartphone n’acceptant pas le Flash. Laisse place au HTML5/CSS3

 

 

Relation Html/Css

Editeur en ligne : http://www.cssdesk.com/



 

 

 


 

Les CMS


Système de gestion de contenu ou SGC ((en) Content Management System ou CMS) est une famille de logiciels destinés à la conception et à la mise à jour dynamique de site Web ou d''application multimédia. Le contenu est stocké le plus souvent dans une base de données, structurée en tables et en champs.

Ils partagent les fonctionnalités suivantes :

  • ils permettent à plusieurs individus de travailler sur un même document . Une interface WYSIWYG propose une mise en forme similaire à celle qui existe dans un traitement de texte;
  • ils permettent de séparer les opérations de gestion de la forme et du contenu ;
  • ils permettent de structurer le contenu (utilisation de FAQ, de documents, de blogs, de forums de discussion, etc.) ;
  • ils permettent de hiérarchiser les utilisateurs et de leur attribuer des rôles et des permissions (utilisateur anonyme, administrateur, contributeur, etc.) ;

On définit deux états:

  • le front-office (partie client): le site visible avec des parties réservées à certains utilisateurs si besoin
  • le back-office (partie administrateur): l''interface d''administration en ligne. 

Les principaux CMS:

WordPress

Le plus célèbre moteur de blog, il est utilisé par le journal « Le Monde » pour motorisé ses blogs. La version actuelle 2.9 peut convenir pour réaliser un blog (comme celui-ci) mais aussi permet de réaliser un site Internet
Site FR : http://www.wordpress-fr.net

Drupal

Le CMS qui monte actuellement, il peut paraître difficile au premier abord, mais une fois qu'on maître sa logique, il devient une solution …
Site FR : http://www.drupalfr.org

Joomla

Qui n'a pas entendu dans la presse ? Le plus célèbre CMS avec de nombreux modules téléchargeables
Site FR : http://www.joomlafrance.org


CMS Made Simple, SPIP, Prestashop (payant, vente en ligne)... 

L''administration Joomla 1.6


 

 

Logiciels Editeurs de code

 

Logiciels libres

 

NOTEPAD++     

Editeur de code HTML

Logiciel à télécharger.

http://notepad-plus-plus.org/fr/

 

PICMONKEY

Retouches de photos

Logiciel en ligne

http://www.picmonkey.com

 

THE GIMP

Retouches de photos

Logiciel en ligne

http://www.gimp.org

 

Firefox
Firebug :: Modules pour Firefox - Mozilla Add-ons / inspecteur de balises

ColorZilla :: Modules pour Firefox - Mozilla Add-ons / inspecteur de couleur sur une page web

Web Developer :: Modules pour Firefox - Mozilla Add-ons / outils de develeppement divers

 

Logiciel payant

Adobe Dreamweaver

Editeur de code

 

Adobe Muse

Créateur de pages web

 


 

 

Normes W3C et règles d'accessibilités

 

Les normes de la W3C ont pour but de fusionner les standards techniques afin que les internautes quel que soit leur handicap et quel que soit leur système d'exploitation ou leur navigateur puissent accéder facilement à tous les contenus et profitent de toutes les fonctionnalités possibles. De même pour les synthétiseurs vocaux ou tablettes tactiles, Smartphones et autres appareils lisant une page web.

 

LA W3C : QUEST-CE QUE CEST ?

Fondé en octobre 1994, le World Wide Web Consortium du sigle W3C, est un organisme de standardisation à but non lucratif comme un consortium chargé de promouvoir la compatibilité des standards du web, accessibilité du Web, recommandations W3C, World Wide Web Consortium.

 

LES BIENFAITS DE LA NORME W3C

En respectant la norme W3C l'accessibilité du web se fait naturellement ainsi les internautes handicapées quel que soit leur handicap visuelles, auditives, neurologiques, cognitives, motrices ou liées à la parole peuvent utiliser le web. Ils sont en mesure de comprendre, percevoir, créer du contenu, naviguer en interagissant de manière efficace face à une page HTML.

De même, les recommandations de la W3C permettent d'améliorer l'affichage dune page web, de profiter de toutes les fonctionnalités possibles, d'accéder facilement à tous les contenus. Ceci, quels que soient les navigateurs et versions de navigateurs, le système d'exploitation utilisé par l'utilisateur.

Autre avantage du respect de la World Wide Web Consortium est la consultation dun site Internet par la synthèse vocale, applications les plus évidentes concernant l'accessibilité pour les malvoyants. La synthèse vocale consiste à transformer un texte en sons se rapprochant le plus que possible de la parole humaine.

 

UN SITE INTERNET ACCESSIBLE DOIT :

  • Garantir une concordance sur n'importe quels terminaux
  • Avoir une navigation autre qu'avec la souris, tabulation et ou raccourcis clavier
  • Contenir un code HTML clair propre facile à maintenir
  • Avoir une possibilité de grossir la police
  • Avoir des images contenant leur description
  • Avoir une utilisation à bon escient des balises HTML
  • Avoir une architecture hiérarchisée
  • Avoir une navigation facilitée
  • Contenir des couleurs contrastées et déchiffrables

 

RÉFÉRENCEMENT ET NORME W3C FONT BON MÉNAGE

Au point de vue référencement également, un site web respectant les normes W3C reste accessible pour tout type dinternautes. Accessible aussi aux moteurs de recherche de façon optimale permettant une meilleure indexation globale de ces derniers. Le site sera plus réactif après une recherche lancée par des internautes dans un moteur de recherche.

De même si vous désirez augmenter votre visibilité sur la toile en rendant votre site aux normes vous pourriez accéder à un public plus large à savoir :

  • Les personnes âgées sénior
  • Les débutants sur Internet
  • Les personnes handicapées
  • Les internautes ayant une faible connexion
  • Les utilisateurs de périphériques spécifiques

 

"MENTIONS OBLIGATOIRES" , mentions obligatoire !

Tous les sites internet édités à titre professionnel, qu'ils proposent des ventes en ligne ou non, doivent obligatoirement indiquer les mentions légales suivantes :

  • pour un entrepreneur individuel : nom, prénom, domicile

  • pour une société : raison sociale, forme juridique, adresse de l'établissement ou du siège social (et non pas une simple boîte postale), montant du capital social

  • adresse de courrier électronique et numéro de téléphone

  • pour une activité professionnelle : numéro d'inscription au registre du commerce et des sociétés (RCS) ou numéro d'immatriculation au répertoire des métiers (RM) ou numéro individuel d'identification fiscale : numéro de TVA intracommunautaire

  • nom du directeur de la publication

  • coordonnées de l'hébergeur du site : nom, dénomination ou raison sociale, adresse et numéro de téléphone

  • pour un site marchand, conditions générales de vente (CGV) : prix (exprimé en euros et TTC), frais et date de livraison, modalité de paiement, service après-vente, droit de rétractation, durée de l'offre, coût de la technique de communication à distance

  • numéro de déclaration simplifiée Cnil, dans le cas de collecte de données sur les clients

  • en option : coordonnées du créateur du site et du photographe

 

Les CMS libres

  • Joomla!

    Joomla! est un CMS Open Source sous licence GNU GPL, très répandu. L'installation est facile, ne demandant que le trousseau d'accès au serveur MySql. L'utilisateur découvre un site préconfiguré avec des exemples de contenus structurés et un back-office qu'il peut

  • 1
  • 2
  • 3

Prenez contact

 Openspice
 Via formulaire
 +33686574003
 +33367083077
 FRANCE
 Strasbourg

Gardez contact