Cours de webdesign destiné aux étudiants de communication de l’école CREA Genève. Le but est qu’ils appréhendent le métier de webdesigner dans sa globalité et soient capables d’avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.

1. le glossaire
web pour les
profanes
CREA3 - Septembre 2011
Relax In The Air
a RITA teaching

2. MC Casal
Digital art director at relax in the air
www.relaxintheair.com
@mccasal
www.behance.com/mccasal
www.linkedin.com/in/mccasal

4. GLOSSAIRE

5. accessibilité
Degré auquel un site peut être utilisé par tous les
utilisateurs, en incluant ceux ayant un handicap.

6. ADRESSE ip
85.4.242.24
Une adresse IP (avec IP pour Internet
Protocol) est un numéro d'identification qui est
attribué à chaque branchement d'appareil à un
réseau informatique utilisant l'Internet Protocol.

7. adwords
AdWords est le nom du système publicitaire du
moteur de recherche Google. Celui-ci affiche des
bannières publicitaires, qui sont ciblées en
fonction des mots-clés que tape l'internaute.

8. agile
Les méthodes agiles sont des groupes de
pratiques de développement. Elles permettent une
grande réactivité aux demandes du client.

9. AJAX
Combinaison de technologies telles que
Javascript, CSS, XML, le DOM et le
XMLHttpRequest dans le but de réaliser des
applications Web qui offrent maniabilité et
confort d'utilisation.

10. ASP .net
Framework de développement web de Microsoft
qui permet aux développeurs de construire des
sites dynamiques, des applications web et des web
services.

11. BACK END
Partie cachée d’un site et invisible aux visiteurs.
Il inclut entre autres l’information de structure,
applications et le CMS qui contrôle le contenu.

12. BANDE PASSANTE
Taux auquel les data sont transférées ou la
quantité de datas autorisées à être transférées
depuis un hébergement web.

13. Bounce rate / taux de rebond
Pourcentage d'internautes qui sont entrés sur
une page Web et qui ont quitté le site après. Ils
n'ont vu qu'une seule page.

14. breadcrumb
Le fil d’Ariane ou chemin de fer est une aide à la
navigation sous forme de signalisation de la
localisation du lecteur dans un document.

15. browser
Logiciel pour présenter, afficher et consulter le
World Wide Web.

16. cache
Les fichiers cache sont ceux qui sont sauvés et
stockés par un browser (navigateur) pour
rendre la prochaine visite plus rapide.

17. cloud
Ressources numériques stockées sur des serveurs
distants et permettant un accès depuis n’importe
quel point de connection au web.

18. cool link
http://www.apple.com/icloud/

19. cms
Wordpress Drupal Joomla Magento Umbraco Typo3
Famille de logiciels destinés à la conception et à
la mise à jour dynamique de sites Web ou
d'applications multimédia.

20. cookie
Témoin de connection. Il stocke des informations
spécifiques sur l'utilisateur, comme les
préférences d'un site ou le contenu d'un panier
d'achat électronique.

21. css
Ou Cascading Style Sheets (feuille de style)
sont utilisées pour définir le look and feel d’un
site en dehors du code HTML du site.

22. css3
CSS3 est divisé en modules dont chacun permet
de gérer séparément les couleurs, des requêtes
médias ou encore des sélecteurs. Puissant wow!

23. cool link
www.css3.me

24. cool link
beta.theexpressiveweb.com

25. dns /DOMAIN NAME SERVICE
C’est un service permettant d'établir une
correspondance entre une adresse IP et un nom
de domaine.

26. e-commerce
Pour electronic commerce. Acheter ou vendre des
produits ou des services via internet ou tout
autre réseau informatique.

27. embed
Permet d’insérer du contenu multimédia ou des
formats qui nativement ne sont pas supportés par
les navigateurs dans des pages web.

28. favicon
Image de 16x16 pixel qui reprend généralement le
logo du site dans la barre d’adresse du
navigateur.

29. firewall
Logiciel permettant de faire respecter la politique
de sécurité d’un réseau. Il définit les types de
communication autorisés sur ce réseau.

30. fixed width
Largeur fixe dans le design d’un site. La largeur
reste la même quelque soit la résolution d’écran,
la taille du moniteur ou la taille du navigateur.

31. flash
Logiciel qui permet la création de graphiques
vectoriels et de bitmap animés par un langage
script appelé ActionScript.

32. cool link
www.nespresso.com/variations/

33. front end
L’opposé du back-end. Ce sont tous les
composants d’un site que le visiteur peut voir
(pages, images, contenu etc).

34. gif
http://gifparty.tumblr.com/
Format d’image permettant de faire des
animations sommaires avec des images en
couleurs pleines.

35. google analytics
Google Analytics lets you measure your
advertising ROI as well as track your Flash,
video, and social networking sites and
applications.

36. google fonts
Great creative
fonts for free on
your website
Collection de typographies gratuites et
compatibles pour le web.

37. grid / grille
Série de lignes horizontales et verticales à
espacement régulier servant à rétablir l’ordre
dans le chaos. Un outil puissantissime au service
du designer.

38. cool link
www.thegridsystem.org

39. gui
Graphical User Interface / Interface utilisateur
qui permet d’interagir avec des devices
électroniques avec des images plutôt qu’avec des
commandes texte.

40. hosting /hébergement
Serveur physique sur lequel se trouvent les pages
d’un site web.

41. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
html
<title>Hypertext Markup Language - Wikipédia</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="MediaWiki 1.17wmf1" />
<link rel="alternate" type="application/x-wiki" title="Modifier" href="/w/index.php?title=Hypertext_Markup_Language&amp;action=edit" />
<link rel="edit" title="Modifier" href="/w/index.php?title=Hypertext_Markup_Language&amp;action=edit" />
<link rel="apple-touch-icon" href="http://fr.wikipedia.org/apple-touch-icon.png" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="search" type="application/opensearchdescription+xml" href="/w/opensearch_desc.php" title="Wikipédia (fr)" />
<link rel="EditURI" type="application/rsd+xml" href="http://fr.wikipedia.org/w/api.php?action=rsd" />
<link rel="copyright" href="http://creativecommons.org/licenses/by-sa/3.0/" />
<link rel="alternate" type="application/atom+xml" title="Flux Atom de Wikipédia" href="/w/index.php?title=Sp%C3%A9cial:Modifications_r
%C3%A9centes&amp;feed=atom" />
<link rel="stylesheet" href="http://bits.wikimedia.org/fr.wikipedia.org/load.php?debug=false&amp;lang=fr&amp;modules=mediawiki%21legacy
%21commonPrint%7Cmediawiki%21legacy%21shared%7Cskins%21vector&amp;only=styles&amp;skin=vector" type="text/css" media="all" />
<meta name="ResourceLoaderDynamicStyles" content="" /><link rel="stylesheet" href="http://bits.wikimedia.org/fr.wikipedia.org/load.php?
debug=false&amp;lang=fr&amp;modules=site&amp;only=styles&amp;skin=vector" type="text/css" media="all" />
<style type="text/css" media="all">a.new,#quickbar a.new{color:#ba0000}
/* cache key: frwiki:resourceloader:filter:minify-css:5:f2a9127573a22335c2a9102b208c73e7 */</style>
<script src="http://bits.wikimedia.org/fr.wikipedia.org/load.php?
debug=false&amp;lang=fr&amp;modules=startup&amp;only=scripts&amp;skin=vector" type="text/javascript"></script>
<script type="text/javascript">if ( window.mediaWiki ) {
mediaWiki.config.set({"wgCanonicalNamespace": "", "wgCanonicalSpecialPageName": false, "wgNamespaceNumber": 0, "wgPageName":
"Hypertext_Markup_Language", "wgTitle": "Hypertext Markup Language", "wgAction": "view", "wgArticleId": 1386, "wgIsArticle": true,
"wgUserName": null, "wgUserGroups": ["*"], "wgCurRevisionId": 68371494, "wgCategories": ["Portail:Informatique/Articles liés", "Standard du
web", "Codage du texte", "SGML", "HTML", "Format ouvert", "Protocole réseau sur la couche présentation", "Bon article en ukrainien"],
"wgBreakFrames": false, "wgRestrictionEdit": [], "wgRestrictionMove": [], "wgSearchNamespaces": [0], "wgVectorEnabledModules":
Format de données conçu pour représenter les
{"collapsiblenav": true, "collapsibletabs": true, "editwarning": true, "expandablesearch": false, "footercleanup": false,
"sectioneditlinks": false, "simplesearch": true, "experiments": true}, "wgWikiEditorEnabledModules": {"toolbar": true, "dialogs": true,
"templateEditor": false, "templates": false, "addMediaWizard": false, "preview": false, "previewDialog": false, "publish": false, "toc":
false}, "Geo": {"city": "", "country": ""}, "wgNoticeProject": "wikipedia"});
}
pages web.
</script>
<style type="text/css">/*<![CDATA[*/
.source-html4strict {line-height: normal;}
.source-html4strict li, .source-html4strict pre {
line-height: normal; border: 0px none white;
}
/**
* GeSHi Dynamically Generated Stylesheet
* --------------------------------------
* Dynamically generated stylesheet for html4strict
* CSS class: source-html4strict, CSS id:

42. html5
C’est la révision majeure de d’HTML.

43. cool link
beta.theexpressiveweb.com

44. jpeg
Format d’image compressé pour le web (entre
autres)...

45. jquery
Bibliothèque JavaScript qui porte sur
l'interaction entre JavaScript et HTML, et a
pour but de simplifier des commandes communes
de JavaScript.

46. cool link
dropr.com

47. landing page
Page d’arrivée principale d’un site.

48. liquid layout
Site dont la largeur est basée sur le pourcentage
de la taille de la fenêtre du navigateur. Le layout
du site change en fonction de la taille du
navigateur.

49. navigation
C’est le système qui permet aux utilisateurs d’un
site de se déplacer à l’intérieur de celui-ci.

50. nom de domaine
tralala.com
Nom par lequel un site internet est identifié.Le
nom de domaine est associé à une adresse IP.

51. open source
Code source d’un programme informatique fait
pour être utilisable par le public. Les programmes
open source sont généralement gratuits ou low
cost et développés par des passionnés souvent
bénévoles.

52. pageview
Requête pour une page web par le navigateur d’un
visiteur. Pour chaque page vue sur votre site,
une personne (ou un search engine spider) a vu
votre page.

53. php
.Langage de développement adapté au web et
pouvant être embedded dans du HTML.

54. pixel
Le pixel, souvent abrégé px, est l'unité de base
permettant de mesurer la définition d'une image
numérique.

55. plugin
Un plug-in est un petit programme qui étend les
capacités et fonctionnalités d’un site sans devoir
retravailler tout le code.

56. PNG
Format d’image compressé pour le web (entre
autres)... et qui permet les transparences.

57. prototypage
Version papier ou informatique d’un site montrant
ses fonctionnalités et sa forme.

58. résolution
Nombre physique de pixels sur un écran (ex:
1280x1024).

59. responsive webdesign
C’est une approche ou philosophie qui défend
l’idée d’une grille fluide avec des colonnes qui
s’adaptent à l’espace disponible sur un écran.

60. cool link
colly.com

61. flux rss
Fichier dont le contenu est produit
automatiquement en fonction des mises à jour
d’un sitw. Les flux RSS sont souvent utilisés
par les sites d'actualité ou les blogs pour
présenter les dernières mises à jour.

62. ruby on rails
Langage de programmation open source avec
comme focus la simplicité et la productivité.

63. scrum
Framework de project management itératif et
incrémental souvent utilisé dans l’agile software
delopment.

64. seo / sem
Processus pour augmenter la visibilité d’une site
ou page dans les moteurs de recherche via le
référencement naturel.

65. sharepoint
Plateforme de développement web de Microsoft
qui permet de développer des sites axés le
management de contenu et de documents.

66. template
Fichier type utilisé pour créer un design
consistent sur tout le site web. Il sert de base de
travail pour d’autres pages.

67. theme
Templates de sites prédéfinis pour un CMS
donné et évitant l’étape de design dans un site.
Généralement payants.

68. ui / user interface
Espace dans lequel l’interaction entre les humains
et des machines ou des interfaces informatiques
ont lieu.

69. usability
Approche pour faire des sites faciles à utiliser
sans que cela demande des capacités particulières
à l’utilisateur.

70. ux / user experience
Créer des interfaces à haute valeur expérientielle
basées sur l’Affectif versus la Rentabilité.

71. cool link
littlebigdetails.com

72. safe web fonts
Arial / Helvetica
Times New Roman / Times
Courier New / Courier
Verdana
Georgia
Trebuchet MS
Typographies acceptées par défaut par tous les
navigateurs et systèmes d’exploitations

73. web standards
Ce sont des specifications recommandées par le
W3C pour standardiser le design des sites, cela
dans le but de rendre le travail des designers et
des développeurs plus consistent sur les
différentes plateformes.

74. web app ≠ app

75. wireframe
Guide visuel qui représente la structure filaire
(squelette) d’un site.

76. cool link
webdesignledger.com

77. wireflow
Combinaison de wireframe et Workflow. Utilisé
pour décrire l’architecture de l’information dans
un site ou une application.

78. wireflow