Cours de Web Design part.1

UX / Webdesign/ visual designFévrier 2013a RITAteachingRelax In The Air1

www.relaxintheair.com@mccasal @relaxintheairMC CasalUX STRATEGIST & DESIGNER

relax in the air© Relax In The Air 2013

Relax in The Air is a digital consultancythat thinks and designs user experiencesfor a digital world.Strategy & ResearchBenchmarking & User ResearchDigital & UX StrategyMulti Platforms Content StrategySocial Media IntegrationAuditTrainingUX & DesignInformation Architecture (IA)User Centered Design (UCD)Wireframing & PrototypingUser Interface Design (UI)Interaction Design (IxD)Digital Branding & Visual Design© Relax In The Air 2013

We value our work on digital by thehappiness we bring to the customer.____________________Relax In The Air

Cliquez sur les images qui vont suivre pour accéder aux lienspartage

social networks report

apps/websites reviews

conférences

vidéos

#RITAsawi

ICE BREAKER

end of ICE BREAKER

GLOSSAIRE

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

ADRESSE ip85.4.242.24Une adresse IP (avec IP pour InternetProtocol) est un numéro didentificationqui est attribué à chaque branchementdappareil à un réseau informatiqueutilisant lInternet Protocol.

adwordsAdWords est le nom du systèmepublicitaire du moteur de rechercheGoogle. Celui-ci affiche des bannièrespublicitaires, qui sont ciblées enfonction des mots-clés que tapelinternautep.

agileLes méthodes agiles sont des groupesde pratiques de développement. Ellespermettent une grande réactivité auxdemandes du clientp.

ASP .netFramework de développement web deMicrosoft qui permet aux développeursde construire des sites dynamiques,des applications web et des webservices.

BACK ENDPartie cachée d’un site et invisible auxvisiteurs. Il inclut entre autresl’information de structure, applicationset le CMS qui contrôle le contenu.

BANDE PASSANTETaux auquel les data sont transféréesou la quantité de datas autorisées à êtretransférées depuis un hébergementweb.

Bounce rate / taux de rebondPourcentage dinternautes qui sontentrés sur une page Web et qui ontquitté le site après. Ils nont vu quuneseule page.

breadcrumbLe fil d’Ariane ou chemin de fer est uneaide à la navigation sous forme designalisation de la localisation dulecteur dans un document.

browserLogiciel pour présenter, afficher etconsulter le WorldWide Web.

cacheLes fichiers cache sont ceux qui sontsauvés et stockés par un browser(navigateur) pour rendre la prochainevisite plus rapide.

cloudRessources numériques stockées surdes serveurs distants et permettant unaccès depuis n’importe quel point deconnection au web.

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

Wordpress Drupal Joomla Magento Umbraco Typo3cmsFamille de logiciels destinés à laconception et à la mise à jourdynamique de sitesWeb oudapplications multimédia.

cookieTémoin de connection. Il stocke desinformations spécifiques surlutilisateur, comme les préférencesdun site ou le contenu dun panierdachat électronique.

cssOu Cascading Style Sheets (feuille destyle) sont utilisées pour définir le lookand feel d’un site en dehors du codeHTML du site.

css3CSS3 est divisé en modules dont chacunpermet de gérer séparément lescouleurs, des requêtes médias ouencore des sélecteurs. Puissant wow!

www.css3.mecool link

beta.theexpressiveweb.comcool link

dns /DOMAIN NAME SERVICEC’est un service permettant détablirune correspondance entre une adresseIP et un nom de domaine.

e-commercePour electronic commerce. Acheter ouvendre des produits ou des services viainternet ou tout autre réseauinformatique.

embedPermet d’insérer du contenumultimédia ou des formats quinativement ne sont pas supportés parles navigateurs dans des pages web.

faviconImage de 16x16 pixel qui reprendgénéralement le logo du site dans labarre d’adresse du navigateur.

firewallLogiciel permettant de faire respecterla politique de sécurité d’un réseau. Ildéfinit les types de communicationautorisés sur ce réseau.

fixed widthLargeur fixe dans le design d’un site.La largeur reste la même quelque soitla résolution d’écran, la taille dumoniteur ou la taille du navigateur.

flashLogiciel qui permet la création degraphiques vectoriels et de bitmapanimés par un langage script appeléActionScript.

www.thefwa.comcool link

front endL’opposé du back-end. Ce sont tous lescomposants d’un site que le visiteurpeut voir (pages, images, contenu etc).

gifFormat d’image permettant de fairedes animations sommaires avec desimages en couleurs pleines.http://gifparty.tumblr.com/

google analyticsGoogle Analytics lets you measure youradvertising ROI as well as track yourFlash, video, and social networkingsites and applications.

Great creativeyour websitegoogle fontsCollection de typographies gratuites etcompatibles pour le web.fonts for free on

grid / grilleSérie de lignes horizontales etverticales à espacement régulierservant à rétablir l’ordre dans le chaos.Un outil puissantissime au service dudesigner.

www.gridulator.comcool link

guiGraphical User Interface / Interfaceutilisateur qui permet d’interagir avecdes devices électroniques avec desimages plutôt qu’avec des commandestexte.

hosting /hébergementServeur physique sur lequel se trouventles 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&action=edit" /><link rel="edit" title="Modifier" href="/w/index.php?title=Hypertext_Markup_Language&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&feed=atom" /><link rel="stylesheet" href="http://bits.wikimedia.org/fr.wikipedia.org/load.php?debug=false&lang=fr&modules=mediawiki%21legacy%21commonPrint%7Cmediawiki%21legacy%21shared%7Cskins%21vector&only=styles&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&lang=fr&modules=site&only=styles&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&lang=fr&modules=startup&only=scripts&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 duweb", "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:htmlFormat de données conçu pourreprésenter les pages web.

html5C’est la révision majeure de l’HTML.

cool linkwww.thewildernessdowntown.com

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

jqueryBibliothèque JavaScript qui porte surlinteraction entre JavaScript et HTML,et a pour but de simplifier descommandes communes de JavaScript.

www.zensorium.com/tinke/cool link

landing pagePage d’arrivée principale d’un site.

liquid layoutSite dont la largeur est basée sur lepourcentage de la taille de la fenêtre dunavigateur. Le layout du site change enfonction de la taille du navigateur.

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

tralala.comnom de domaineNom par lequel un site internet estidentifié.Le nom de domaine est associé à uneadresse IP.

open sourceCode source d’un programmeinformatique fait pour être utilisablepar le public. Les programmes opensource sont généralement gratuits oulow cost et développés par despassionnés souvent bénévoles.

phpLangage de développement adapté auweb et pouvant être «inséré» dans duHTML.

pixelLe pixel, souvent abrégé px, est lunitéde base permettant de mesurer ladéfinition dune image numérique.

pluginUn plug-in est un petit programme quiétend les capacités et fonctionnalitésd’un site sans devoir retravailler tout lecode.

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

prototypageVersion papier ou informatique d’unsite montrant ses fonctionnalités et saforme.

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

retinaTechnologie développée par Apple quipermet d’afficher les applications enhaute résolution à l’écran (326 dpi).

responsive webdesignC’est une approche ou philosophie quidéfend l’idée d’une grille fluide avecdes colonnes qui s’adaptent à l’espacedisponible sur un écran.

colly.comcool link

flux rssFichier dont le contenu est produitautomatiquement en fonction desmises à jour d’un site. Les flux RSS sontsouvent utilisés par les sites dactualitéou les blogs pour présenter lesdernières mises à jour.

ruby on railsLangage de programmation opensource avec comme focus la simplicitéet la productivité.

scrumFramework de project managementitératif et incrémental souvent utilisédans l’agile software delopment.

seo / semProcessus pour augmenter la visibilitéd’un site ou page dans les moteurs derecherche via le référencementnaturel.

sharepointPlateforme de développement web deMicrosoft qui permet de développerdes sites axés le management decontenu et de documents.

templateFichier type utilisé pour créer undesign consistent sur tout le site web.Il sert de base de travail pour d’autrespages.

themeTemplates de sites prédéfinis pour unCMS donné et évitant l’étape de designdans un site. Généralement payants.

ui / user interfaceEspace dans lequel l’interaction entreles humains et des machines ou desinterfaces informatiques ont lieu.

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

ux / user experienceCréer des interfaces à haute valeurexpérientielle basées sur l’Affectifversus la Rentabilité.

littlebigdetails.comcool link

safe web fontsArial / HelveticaTimes New Roman / TimesCourier New / CourierVerdanaGeorgiaTrebuchet MSTypographies acceptées par défaut partous les navigateurs et systèmesd’exploitations.

web standardsCe sont des specificationsrecommandées par le W3C pourstandardiser le design des sites, celadans le but de rendre le travail desdesigners et des développeurs plusconsistent sur les différentesplateformes.

web app ≠ appHTMLVS Natif

wireframeGuide visuel qui représente lastructure filaire (squelette) d’un site.

wireframes.linowski.cacool link

wireflowCombinaison de wireframe etworkflow. Utilisé pour décrirel’architecture de l’information dans unsite ou une application.

Cours de Web Design part.1

by Casal MC

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 411

Statistics

Cours de Web Design part.1 Presentation Transcript

http://www.scoop.it	410
http://webcache.googleusercontent.com	1