menu

Contraintes techniques du web-design, concevoir graphiquement un site web

Comprendre les contraintes, les enjeux graphiques et ergonomiques d'un site Internet

Comprendre les principes du développement informatique permet de rendre tangible notre dépendance aveugle et inconsciente envers les personnes qui savent coder.


Cet atelier a pour but de faire comprendre aux créateurs visuels (graphistes, artistes plasticiens) les contraintes graphiques d’un site Internet en leur proposant une initiation au développement HTML / CSS / Javascript. 

PHILOSOPHIE DE L’ATELIER

L’atelier ne se présente pas comme une formation clé en main avec un formateur sachant et des élèves. Les participant.s.es sont invité.s.es à co-produire le contenu. Ils.elles conçoivent eux-mêmes des parties du programme à travers les notions qu’ils.elles souhaitent aborder et les questionnements liés à leurs projets et leurs pratiques.

INFORMATIONS PRATIQUES

Durée : 30 heures

Date : 5 jours, selon les disponibilités des participants

Horaires : 9H30 à 12H30 - 14H à 17H

Coût : 300 euros : prix conseillé minimum par participant

Effectif : 5 participants minimum, 10 participants maximum

Lieu : Un Lieu Pour Respirer, 15 rue Chassagnolle 93260 - Les Lilas

PUBLICS

L’atelier s’adresse aux graphistes ayant une culture visuel du print souhaitant se familiariser avec les contraintes des sites web et aux artistes plasticiens cherchant à utiliser l’internet dans leur pratique ou souhaitant simplement présenter leurs projets.

PRÉREQUIS

L’atelier nécessite l’utilisation d’un ordinateur, il est conseillé d’apporter une machine personnelle disposant de Google Chrome ou Firefox et d’un logiciel de FTP (Filezila ou équivalent), un smartphone.

OBJECTIFS 

A l’issue de l’atelier, les participants comprennent les principes fondamentaux de la programmation d’un site Internet, ils sont capables de concevoir graphiquement un site prenant en compte les contraintes techniques liées au HTML et celles liées au multi-écran. Ces connaissances leur permettront de collaborer avec des développeurs et seront un premier pas vers plus d’autonomie technique.

PROGRAMME

Le programme doit évoluer en fonction des souhaits et des savoirs de chaque participant.e. Une première session de travail entre les participant.s.es et le formateur a pour but de déterminer plus précisément son contenu.


JOUR 1 : Introduction, co-conception du programme. Historique et principaux concepts du web, les outils de développement

JOUR 2 : Comprendre le HTML/CSS, une initiation à la programmation orientée visuelle

JOUR 3 : La conception graphique d’un site web, ergonomie vs design, 

JOUR 4 : Programmer du design et de l’interaction, initiation au javascript, découverte de bibliothèques de code orienté animation et design

JOUR 5 : Ethique, co-conception, éco-conception d’un site web

{"item_0":{"type":"breadcrump","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","backgroundColor":"#FFFFFF","sectionColor":"#EEEEEE"},"item_1":{"type":"h1","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","backgroundColor":"#FFFFFF","sectionColor":"#EEEEEE"},"item_2":{"type":"text","value":"\u003Cp\u003E\u003Cem style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003EComprendre les principes du d\u00e9veloppement informatique permet de rendre tangible notre d\u00e9pendance aveugle et inconsciente envers les personnes qui savent coder.\u003C\/em\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003ECet atelier a pour but de faire comprendre aux cr\u00e9ateurs visuels (graphistes, artistes plasticiens) les contraintes graphiques d\u2019un site Internet en leur proposant une initiation au d\u00e9veloppement HTML \/ CSS \/ Javascript. \u003C\/span\u003E\u003C\/p\u003E","backgroundColor":"transparent","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","sectionColor":"#EEEEEE","section-id":""},"item_3":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"1"},"item_4":{"type":"text","value":"\u003Ch5\u003E\u003Cspan style=\u0022color: rgb(67, 67, 67); background-color: transparent;\u0022\u003EPHILOSOPHIE DE L\u2019ATELIER\u003C\/span\u003E\u003C\/h5\u003E\u003Cp\u003E\u003Cspan style=\u0022color: rgb(0, 0, 0); background-color: transparent;\u0022\u003EL\u2019atelier ne se pr\u00e9sente pas comme une formation cl\u00e9 en main avec un formateur sachant et des \u00e9l\u00e8ves. Les participant.s.es sont invit\u00e9.s.es \u00e0 co-produire le contenu. Ils.elles con\u00e7oivent eux-m\u00eames des parties du programme \u00e0 travers les notions qu\u2019ils.elles souhaitent aborder et les questionnements li\u00e9s \u00e0 leurs projets et leurs pratiques.\u003C\/span\u003E\u003C\/p\u003E","backgroundColor":"transparent","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","sectionColor":"#EEEEEE","section-id":"Philosophie"},"item_5":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"0"},"item_6":{"type":"text","value":"\u003Ch5\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(67, 67, 67);\u0022\u003EINFORMATIONS PRATIQUES\u003C\/span\u003E\u003C\/h5\u003E\u003Cp\u003E\u003Cstrong style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003EDur\u00e9e\u003C\/strong\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003E : 30 heures\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cstrong style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003EDate\u003C\/strong\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003E : 5 jours, selon les disponibilit\u00e9s des participants\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cstrong style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003EHoraires \u003C\/strong\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003E: 9H30 \u00e0 12H30 - 14H \u00e0 17H\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cstrong style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003ECo\u00fbt : \u003C\/strong\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003E300 euros : prix conseill\u00e9 minimum par participant\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cstrong style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003EEffectif\u003C\/strong\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003E : 5 participants minimum, 10 participants maximum\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cstrong style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003ELieu : \u003C\/strong\u003EUn Lieu Pour Respirer, 15 rue Chassagnolle 93260 - Les Lilas\u003C\/p\u003E","backgroundColor":"transparent","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","sectionColor":"#EEEEEE","section-id":"Informations pratiques"},"item_7":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"0"},"item_8":{"type":"text","value":"\u003Ch5\u003E\u003Cspan style=\u0022color: rgb(67, 67, 67); background-color: transparent;\u0022\u003EPUBLICS\u003C\/span\u003E\u003C\/h5\u003E\u003Cp\u003E\u003Cspan style=\u0022color: rgb(0, 0, 0); background-color: transparent;\u0022\u003EL\u2019atelier s\u2019adresse aux graphistes ayant une culture visuel du print souhaitant se familiariser avec les contraintes des sites web et aux artistes plasticiens cherchant \u00e0 utiliser l\u2019internet dans leur pratique ou souhaitant simplement pr\u00e9senter leurs projets.\u003C\/span\u003E\u003C\/p\u003E","backgroundColor":"transparent","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","sectionColor":"#EEEEEE","section-id":"Publics"},"item_9":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"0"},"item_10":{"type":"text","value":"\u003Ch5\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(67, 67, 67);\u0022\u003EPR\u00c9REQUIS\u003C\/span\u003E\u003C\/h5\u003E\u003Cp\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003EL\u2019atelier n\u00e9cessite l\u2019utilisation d\u2019un ordinateur, il est conseill\u00e9 d\u2019apporter une machine personnelle disposant de Google Chrome ou Firefox et d\u2019un logiciel de FTP (Filezila ou \u00e9quivalent), un smartphone.\u003C\/span\u003E\u003C\/p\u003E","backgroundColor":"transparent","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","sectionColor":"#EEEEEE","section-id":"Pr\u00e9requis"},"item_11":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"1"},"item_12":{"type":"text","value":"\u003Ch5\u003E\u003Cspan style=\u0022color: rgb(67, 67, 67); background-color: transparent;\u0022\u003EOBJECTIFS \u003C\/span\u003E\u003C\/h5\u003E\u003Cp\u003E\u003Cspan style=\u0022color: rgb(0, 0, 0); background-color: transparent;\u0022\u003EA l\u2019issue de l\u2019atelier, les participants comprennent les principes fondamentaux de la programmation d\u2019un site Internet, ils sont capables de concevoir graphiquement un site prenant en compte les contraintes techniques li\u00e9es au HTML et celles li\u00e9es au multi-\u00e9cran. Ces connaissances leur permettront de collaborer avec des d\u00e9veloppeurs et seront un premier pas vers plus d\u2019autonomie technique.\u003C\/span\u003E\u003C\/p\u003E","backgroundColor":"transparent","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","sectionColor":"#EEEEEE","section-id":"Objectif"},"item_13":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"1"},"item_14":{"type":"text","value":"\u003Ch5\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(67, 67, 67);\u0022\u003EPROGRAMME\u003C\/span\u003E\u003C\/h5\u003E\u003Cp\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003ELe programme doit \u00e9voluer en fonction des souhaits et des savoirs de chaque participant.e. Une premi\u00e8re session de travail entre les participant.s.es et le formateur a pour but de d\u00e9terminer plus pr\u00e9cis\u00e9ment son contenu.\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cstrong style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003EJOUR 1\u003C\/strong\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003E : Introduction, co-conception du programme. Historique et principaux concepts du web, les outils de d\u00e9veloppement\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cstrong style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003EJOUR 2\u003C\/strong\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003E : Comprendre le HTML\/CSS, une initiation \u00e0 la programmation orient\u00e9e visuelle\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cstrong style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003EJOUR 3\u003C\/strong\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003E : La conception graphique d\u2019un site web, ergonomie vs design, \u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cstrong style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003EJOUR 4\u003C\/strong\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003E : Programmer du design et de l\u2019interaction, initiation au javascript, d\u00e9couverte de biblioth\u00e8ques de code orient\u00e9 animation et design\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cstrong style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003EJOUR 5\u003C\/strong\u003E\u003Cspan style=\u0022background-color: transparent; color: rgb(0, 0, 0);\u0022\u003E : Ethique, co-conception, \u00e9co-conception d\u2019un site web\u003C\/span\u003E\u003C\/p\u003E","backgroundColor":"transparent","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","sectionColor":"transparent","section-id":"Programme"},"item_15":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"1"},"item_16":{"type":"line","items":[{"id":"16","table":"personne","label":"J\u00e9r\u00f4me Sullerot","preview":"0","edit_url":"\/extra\/data\/personne\/edit\/","titre":"J\u00e9r\u00f4me Sullerot","item_id":0,"online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","backgroundColor":"#FFFFFF","sectionColor":"#EEEEEE","type":"bloc","size":4,"link":"\/","data":{"nom":"Sullerot","prenom":"J\u00e9r\u00f4me","email":"jerome@pottiok.com","color":null,"photo_id":null,"civilite":null,"langue_id":null,"profession":"Formateur","typologie":null,"jeton":null,"description":null,"preview":"0","label":"J\u00e9r\u00f4me Sullerot","links":"[{\u0022label\u0022:\u0022site\u0022,\u0022value\u0022:\u0022https:\/\/www.cheminement.io\u0022}]","tags":"","telephone":"","mobile":null,"has_page":"1","online":"0","date_online":"2020-06-09 07:38:13","statut":"ALL","URL":"\/","compta_slug":null,"background":"[]","versions":{"slug_fr":"jerome-sullerot","description_fr":"Fondateur et concepteur de CHEMINEMENT","profession_fr":"D\u00e9veloppeur","template_lang_fr":"{\u0022item_0\u0022:{\u0022type\u0022:\u0022text\u0022,\u0022value\u0022:\u0022\u003Cp\u003E\u003Cstrong style=\\\u0022background-color: transparent; color: rgb(0, 0, 0);\\\u0022\u003EJ\u00e9r\u00f4me Sullerot \u003C\/strong\u003E\u003Cspan style=\\\u0022background-color: transparent; color: rgb(0, 0, 0);\\\u0022\u003Eest d\u00e9veloppeur WEB depuis plus de 22 ans.\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cspan style=\\\u0022background-color: transparent; color: rgb(0, 0, 0);\\\u0022\u003EApr\u00e8s une formation en graphisme (ESAG) et de cin\u00e9ma, il devient d\u00e9veloppeur, sp\u00e9cialis\u00e9 en flash\/actionscript, puis HTML, CSS,  javascript et PHP.\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cspan style=\\\u0022background-color: transparent; color: rgb(0, 0, 0);\\\u0022\u003EEn 2000, il fonde l'agence web lomitko, qui participe \u00e0 l\u2019\u00e9mergence d\u2019Internet au d\u00e9but des ann\u00e9es 2000 en cr\u00e9ant des sites exp\u00e9rimentaux ou des web-documentaires  pour de grands groupes internationaux, des lieux culturels et des artistes. Il collabore entre autres avec Kenzo, Azzaro, Thierry Mugler, Dargaud, Renault, Toyota, Cartier, Le batofar, Le Grands Palais, Festival Tokyozone\u2026 \u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cspan style=\\\u0022background-color: transparent; color: rgb(0, 0, 0);\\\u0022\u003EIl est intervenant et formateur aux Gobelins pendant deux ans.\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cspan style=\\\u0022background-color: transparent; color: rgb(0, 0, 0);\\\u0022\u003EEn 2016, il quitte ses fonctions \u00e0 lomitko, \u00e9crit et r\u00e9alise deux moyens m\u00e9trages exp\u00e9rimentaux, et devient consultant ind\u00e9pendant.\u003C\/span\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cspan style=\\\u0022background-color: transparent; color: rgb(0, 0, 0);\\\u0022\u003EIl est membre fondateur \u003C\/span\u003E\u003Cspan style=\\\u0022color: rgb(0, 0, 0);\\\u0022\u003Ed\u2019Un Lieu Pour Respirer, \u003C\/span\u003E\u003Cspan style=\\\u0022background-color: transparent; color: rgb(0, 0, 0);\\\u0022\u003Eespace social et culturel aux Lilas.\u003C\/span\u003E\u003C\/p\u003E\u0022,\u0022backgroundColor\u0022:\u0022transparent\u0022,\u0022online\u0022:1,\u0022paddingTop\u0022:\u002220\u0022,\u0022paddingBottom\u0022:\u002220\u0022,\u0022paddingLeft\u0022:\u002220\u0022,\u0022paddingRight\u0022:\u002220\u0022,\u0022sectionColor\u0022:\u0022#EEEEEE\u0022,\u0022section-id\u0022:\u0022\u0022}}","id":"16"},"erreurs":[],"id":"16","slug":null,"droits":"pottiok","created":"2020-06-09 07:37:24","created_id":"1","updated":"2020-11-24 11:31:34","updated_id":"1","deleted":"0","table":null,"created_label":null,"updated_label":null,"properties":[],"origine":"BACK","created_user":null,"_table":null,"client_id":null,"date_offline":"0000-00-00 00:00:00"}}],"online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","backgroundColor":"#FFFFFF","sectionColor":"transparent","label":"L'intervenant","chapeau":""},"item_17":{"type":"data","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","backgroundColor":"#FFFFFF","sectionColor":"#EEEEEE","table":"personne","data_id":"","data":null}}
play_circle_filled 00:00

Mon son

Mon auteur