Glossaire web pour les profanes - Webdesign

  • View
    1.598

  • Download
    0

  • Category

    Design

Preview:

DESCRIPTION

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.

Citation preview

le glossaireweb pour lesprofanesCREA3 - Septembre 2011

a RITA teaching

Relax In The Air

www.relaxintheair.com @mccasalwww.behance.com/mccasalwww.linkedin.com/in/mccasal

MC CasalDigital art director at relax in the air

GLOSSAIRE

accessibilité

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

ADRESSE ip

85.4.242.24Une 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.

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.

agile

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

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.

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.

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.

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.

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.

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.

browser

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

cache

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

cloud

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

http://www.apple.com/icloud/

cool link

Wordpress Drupal Joomla Magento Umbraco Typo3

cms

Famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d'applications multimédia.

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.

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.

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!

www.css3.me

cool link

beta.theexpressiveweb.com

cool link

dns /DOMAIN NAME SERVICE

C’est un service permettant d'établir une correspondance entre une adresse IP et un nom de domaine.

e-commerce

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

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.

favicon

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

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.

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.

flash

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

www.nespresso.com/variations/

cool link

front end

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

gif

Format d’image permettant de faire des animations sommaires avec des images en couleurs pleines.

http://gifparty.tumblr.com/

google analytics

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

Great creative fonts for free on your website

google fonts

Collection de typographies gratuites et compatibles pour le web.

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.

www.thegridsystem.org

cool link

gui

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

hosting /hébergement

Serveur physique sur lequel se trouvent les pages d’un site web.

<!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><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": {"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"});}</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: * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) * -------------------------------------- */.html4strict.source-html4strict .de1, .html4strict.source-html4strict .de2 {font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}.html4strict.source-html4strict {font-family:monospace;}.html4strict.source-html4strict .imp {font-weight: bold; color: red;}.html4strict.source-html4strict li, .html4strict.source-html4strict .li1 {font-weight: normal; vertical-align:top;}.html4strict.source-html4strict .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}.html4strict.source-html4strict .li2 {font-weight: bold; vertical-align:top;}.html4strict.source-html4strict .kw2 {color: #000000; font-weight: bold;}.html4strict.source-html4strict .kw3 {color: #000066;}.html4strict.source-html4strict .es0 {color: #000099; font-weight: bold;}.html4strict.source-html4strict .br0 {color: #66cc66;}.html4strict.source-html4strict .sy0 {color: #66cc66;}.html4strict.source-html4strict .st0 {color: #ff0000;}.html4strict.source-html4strict .nu0 {color: #cc66cc;}.html4strict.source-html4strict .sc-2 {color: #404040;}.html4strict.source-html4strict .sc-1 {color: #808080; font-style: italic;}.html4strict.source-html4strict .sc0 {color: #00bbdd;}.html4strict.source-html4strict .sc1 {color: #ddbb00;}.html4strict.source-html4strict .sc2 {color: #009900;}.html4strict.source-html4strict .ln-xtra, .html4strict.source-html4strict li.ln-xtra, .html4strict.source-html4strict div.ln-xtra {background-color: #ffc;}.html4strict.source-html4strict span.xtra { display:block; }

/*]]>*/</style><style type="text/css">/*<![CDATA[*/@import "/w/index.php?title=MediaWiki:Geshi.css&usemsgcache=yes&action=raw&ctype=text/css&smaxage=2678400";/*]]>*/</style><style type="text/css">/*<![CDATA[*/.source-xml {line-height: normal;}.source-xml li, .source-xml pre {

html

Format de données conçu pour représenter les pages web.

html5

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

cool linkbeta.theexpressiveweb.com

jpeg

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

jquery

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

dropr.com

cool link

landing page

Page d’arrivée principale d’un site.

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.

navigation

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

tralala.com

nom de domaine

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

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.

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.

php

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

pixel

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

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.

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

PNG

prototypage

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

résolution

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

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.

colly.com

cool link

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.

ruby on rails

Langage de programmation open source avec comme focus la simplicité et la productivité.

scrum

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

seo / sem

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

sharepoint

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

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.

theme

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

ui / user interface

Espace dans lequel l’interaction entre les humains et des machines ou des interfaces informatiques ont lieu.

usability

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

ux / user experience

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

littlebigdetails.com

cool link

safe web fontsArial / Helvetica

Times New Roman / TimesCourier New / Courier

VerdanaGeorgia

Trebuchet MSTypographies acceptées par défaut par tous les navigateurs et systèmes d’exploitations

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.

web app ≠ app

wireframe

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

wireflow

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

wireflow