Design

{"item_0":{"type":"text","value":"\u003Ch3\u003EDesign \u00e9thique\u003C\/h3\u003E\u003Cp\u003ELe design doit \u00eatre profitable \u00e0 tous les utilsateurs. Il ne doit pas r\u00e9pondre \u00e0 un mod\u00e8le \u00e9conomique de la captation de l'attention rendant profitable la consommation continue de contenus.\u003C\/p\u003E\u003Cp\u003EEn aucun cas, le design ne doit tromper l'utilisateur.\u003C\/p\u003E","backgroundColor":"transparent","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","sectionColor":"#EEEEEE","section-id":"","param_selector":"#view-params","editor":""},"item_1":{"type":"text","value":"\u003Ch3\u003EEcodesign & philosophie low-tech\u003C\/h3\u003E\u003Cp\u003E\u003Cstrong\u003EFavoriser un design simple, \u00e9pur\u00e9, adapt\u00e9 au web sur tous types de terminal, va dans le sens de la sobri\u00e9t\u00e9.\u003C\/strong\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\/p\u003E\u003Cp\u003ELa plupart des th\u00e8mes cl\u00e9s en main disponible pour les principaux CMS privil\u00e9gient l'esth\u00e9tique et la richesse fonctionnelle au d\u00e9triment de l'efficience, de l'accessibilit\u00e9, et de l'\u00e9coconception.\u003C\/p\u003E","backgroundColor":"transparent","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","sectionColor":"#EEEEEE","section-id":"","param_selector":"#view-params","editor":""},"item_2":{"type":"text","value":"\u003Ch3\u003EEsth\u00e9tique\u003C\/h3\u003E\u003Cp\u003ELe site web sont de plus en plus complexes \u00e0 concevoir, les r\u00e8gles d'ergonomie, d'accessibilit\u00e9 et de compatibilit\u00e9 multi-\u00e9crans forcent les concepteurs et les designers \u00e0 utiliser des biblioth\u00e8ques de logiciel ou des mod\u00e8les de template pr\u00eates \u00e0 l'emploi, tr\u00e8s souvent maintenu par les monopoles de la Silicon Valley.\u003C\/p\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\/p\u003E\u003Cp\u003ELes contraintes environnementales ne facilitent pas non plus la recherche de la singularit\u00e9.\u003C\/p\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cstrong\u003EDe ce point de vue le site cheminement.io est un parfait exemple. \u003C\/strong\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\/p\u003E\u003Cp\u003EEn d\u00e9pendant des mod\u00e8les pour cr\u00e9er le Web, nous envoyons un message sur notre moment actuel: celui-ci est domin\u00e9 par le contr\u00f4le de l'entreprise, nos propres pr\u00e9f\u00e9rences individuelles et sensibilit\u00e9s esth\u00e9tiques influenc\u00e9es par la commodit\u00e9 et la conformit\u00e9.\u003C\/p\u003E","backgroundColor":"transparent","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","sectionColor":"#EEEEEE","section-id":"","param_selector":"#view-params","editor":""},"item_3":{"type":"text","value":"\u003Ch3\u003EAnimations\u003C\/h3\u003E\u003Cp\u003ELes animations sont consommatrices d'\u00e9nergie et leur int\u00e9r\u00eat fonctionnel le plus souvent inutile. Dans un souci de sobri\u00e9t\u00e9, elles sont \u00e0 \u00e9viter.\u003C\/p\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\/p\u003E","backgroundColor":"transparent","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","sectionColor":"#eeeeee","section-id":"","param_selector":"#view-params","editor":""},"item_4":{"type":"separator","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","backgroundColor":"#c2c2c2","sectionColor":"#EEEEEE","height":1,"fullwidth":"1","param_selector":"#view-params"},"item_5":{"type":"line","items":[{"id":"83","table":"page","label":"Comprendre les contraintes techniques du web-design, concevoir graphiquement un site web","preview":"0","edit_url":"\/extra\/site\/page\/edit\/","titre":"Comprendre les contraintes techniques du web-design, concevoir graphiquement un site web","item_id":0,"param_selector":"#view-params","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","backgroundColor":"#FFFFFF","sectionColor":"#EEEEEE","type":"bloc","size":4,"link":"\/fr\/services\/education-populaire\/ateliers-formations\/comprendre-les-contraintes-techniques-du-web-design","data":{"children":[],"parent":null,"rank":1,"label":"Contraintes techniques du web-design, concevoir graphiquement un site web","icone":"","hidden":0,"depth":0,"statut":"ALL","login":"LOGIN","versions":{"title_fr":"Contraintes techniques du web-design, concevoir graphiquement un site web","slug_fr":"comprendre-les-contraintes-techniques-du-web-design","description_fr":"Comprendre les contraintes, les enjeux graphiques et ergonomiques d'un site Internet","tags_fr":"D\u00e9veloppement,Design,Conception","template_lang_fr":"{\n\t\u0022item_0\u0022: {\n\t\t\u0022type\u0022: \u0022text\u0022,\n\t\t\u0022value\u0022: \u0022\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\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022transparent\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u002220\u0022,\n\t\t\u0022paddingBottom\u0022: \u002220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022sectionColor\u0022: \u0022#EEEEEE\u0022,\n\t\t\u0022section-id\u0022: \u0022\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022,\n\t\t\u0022editor\u0022: \u0022\u0022\n\t},\n\t\u0022item_1\u0022: {\n\t\t\u0022type\u0022: \u0022separator\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u00220\u0022,\n\t\t\u0022paddingBottom\u0022: \u00220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022#9c9c9c\u0022,\n\t\t\u0022sectionColor\u0022: \u0022transparent\u0022,\n\t\t\u0022height\u0022: \u00221\u0022,\n\t\t\u0022fullwidth\u0022: \u00221\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022\n\t},\n\t\u0022item_2\u0022: {\n\t\t\u0022type\u0022: \u0022text\u0022,\n\t\t\u0022value\u0022: \u0022\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\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022transparent\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u002220\u0022,\n\t\t\u0022paddingBottom\u0022: \u002220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022sectionColor\u0022: \u0022#EEEEEE\u0022,\n\t\t\u0022section-id\u0022: \u0022Philosophie\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022,\n\t\t\u0022editor\u0022: \u0022\u0022\n\t},\n\t\u0022item_3\u0022: {\n\t\t\u0022type\u0022: \u0022separator\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u00220\u0022,\n\t\t\u0022paddingBottom\u0022: \u00220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022#9c9c9c\u0022,\n\t\t\u0022sectionColor\u0022: \u0022transparent\u0022,\n\t\t\u0022height\u0022: \u00221\u0022,\n\t\t\u0022fullwidth\u0022: \u00220\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022\n\t},\n\t\u0022item_4\u0022: {\n\t\t\u0022type\u0022: \u0022text\u0022,\n\t\t\u0022value\u0022: \u0022\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\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022transparent\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u002220\u0022,\n\t\t\u0022paddingBottom\u0022: \u002220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022sectionColor\u0022: \u0022#EEEEEE\u0022,\n\t\t\u0022section-id\u0022: \u0022Informations pratiques\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022,\n\t\t\u0022editor\u0022: \u0022\u0022\n\t},\n\t\u0022item_5\u0022: {\n\t\t\u0022type\u0022: \u0022separator\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u00220\u0022,\n\t\t\u0022paddingBottom\u0022: \u00220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022#9c9c9c\u0022,\n\t\t\u0022sectionColor\u0022: \u0022transparent\u0022,\n\t\t\u0022height\u0022: \u00221\u0022,\n\t\t\u0022fullwidth\u0022: \u00220\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022\n\t},\n\t\u0022item_6\u0022: {\n\t\t\u0022type\u0022: \u0022text\u0022,\n\t\t\u0022value\u0022: \u0022\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\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022transparent\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u002220\u0022,\n\t\t\u0022paddingBottom\u0022: \u002220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022sectionColor\u0022: \u0022#EEEEEE\u0022,\n\t\t\u0022section-id\u0022: \u0022Publics\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022,\n\t\t\u0022editor\u0022: \u0022\u0022\n\t},\n\t\u0022item_7\u0022: {\n\t\t\u0022type\u0022: \u0022separator\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u00220\u0022,\n\t\t\u0022paddingBottom\u0022: \u00220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022#9c9c9c\u0022,\n\t\t\u0022sectionColor\u0022: \u0022transparent\u0022,\n\t\t\u0022height\u0022: \u00221\u0022,\n\t\t\u0022fullwidth\u0022: \u00220\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022\n\t},\n\t\u0022item_8\u0022: {\n\t\t\u0022type\u0022: \u0022text\u0022,\n\t\t\u0022value\u0022: \u0022\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\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022transparent\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u002220\u0022,\n\t\t\u0022paddingBottom\u0022: \u002220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022sectionColor\u0022: \u0022#EEEEEE\u0022,\n\t\t\u0022section-id\u0022: \u0022Pr\u00e9requis\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022,\n\t\t\u0022editor\u0022: \u0022\u0022\n\t},\n\t\u0022item_9\u0022: {\n\t\t\u0022type\u0022: \u0022separator\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u00220\u0022,\n\t\t\u0022paddingBottom\u0022: \u00220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022#9c9c9c\u0022,\n\t\t\u0022sectionColor\u0022: \u0022transparent\u0022,\n\t\t\u0022height\u0022: \u00221\u0022,\n\t\t\u0022fullwidth\u0022: \u00221\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022\n\t},\n\t\u0022item_10\u0022: {\n\t\t\u0022type\u0022: \u0022text\u0022,\n\t\t\u0022value\u0022: \u0022\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\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022transparent\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u002220\u0022,\n\t\t\u0022paddingBottom\u0022: \u002220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022sectionColor\u0022: \u0022#EEEEEE\u0022,\n\t\t\u0022section-id\u0022: \u0022Objectif\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022,\n\t\t\u0022editor\u0022: \u0022\u0022\n\t},\n\t\u0022item_11\u0022: {\n\t\t\u0022type\u0022: \u0022separator\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u00220\u0022,\n\t\t\u0022paddingBottom\u0022: \u00220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022#9c9c9c\u0022,\n\t\t\u0022sectionColor\u0022: \u0022transparent\u0022,\n\t\t\u0022height\u0022: \u00221\u0022,\n\t\t\u0022fullwidth\u0022: \u00221\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022\n\t},\n\t\u0022item_12\u0022: {\n\t\t\u0022type\u0022: \u0022text\u0022,\n\t\t\u0022value\u0022: \u0022\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\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022transparent\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u00220\u0022,\n\t\t\u0022paddingBottom\u0022: \u00220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022sectionColor\u0022: \u0022transparent\u0022,\n\t\t\u0022section-id\u0022: \u0022Programme\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022,\n\t\t\u0022editor\u0022: \u0022\u0022\n\t},\n\t\u0022item_13\u0022: {\n\t\t\u0022type\u0022: \u0022separator\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u00220\u0022,\n\t\t\u0022paddingBottom\u0022: \u00220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022#9c9c9c\u0022,\n\t\t\u0022sectionColor\u0022: \u0022transparent\u0022,\n\t\t\u0022height\u0022: \u00221\u0022,\n\t\t\u0022fullwidth\u0022: \u00221\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022\n\t},\n\t\u0022item_14\u0022: {\n\t\t\u0022type\u0022: \u0022line\u0022,\n\t\t\u0022items\u0022: [\n\t\t\t{\n\t\t\t\t\u0022id\u0022: \u002216\u0022,\n\t\t\t\t\u0022table\u0022: \u0022personne\u0022,\n\t\t\t\t\u0022label\u0022: \u0022J\u00e9r\u00f4me Sullerot\u0022,\n\t\t\t\t\u0022preview\u0022: \u00220\u0022,\n\t\t\t\t\u0022edit_url\u0022: \u0022\/extra\/data\/personne\/edit\/\u0022,\n\t\t\t\t\u0022titre\u0022: \u0022J\u00e9r\u00f4me Sullerot\u0022,\n\t\t\t\t\u0022item_id\u0022: 0,\n\t\t\t\t\u0022online\u0022: 1,\n\t\t\t\t\u0022paddingTop\u0022: \u002220\u0022,\n\t\t\t\t\u0022paddingBottom\u0022: \u002220\u0022,\n\t\t\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\t\t\u0022backgroundColor\u0022: \u0022#FFFFFF\u0022,\n\t\t\t\t\u0022sectionColor\u0022: \u0022#EEEEEE\u0022,\n\t\t\t\t\u0022type\u0022: \u0022bloc\u0022,\n\t\t\t\t\u0022size\u0022: 4\n\t\t\t}\n\t\t],\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u002220\u0022,\n\t\t\u0022paddingBottom\u0022: \u002220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022#FFFFFF\u0022,\n\t\t\u0022sectionColor\u0022: \u0022transparent\u0022,\n\t\t\u0022label\u0022: \u0022L'intervenant\u0022,\n\t\t\u0022chapeau\u0022: \u0022\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022\n\t},\n\t\u0022item_15\u0022: {\n\t\t\u0022type\u0022: \u0022data\u0022,\n\t\t\u0022online\u0022: 1,\n\t\t\u0022paddingTop\u0022: \u002220\u0022,\n\t\t\u0022paddingBottom\u0022: \u002220\u0022,\n\t\t\u0022paddingLeft\u0022: \u002220\u0022,\n\t\t\u0022paddingRight\u0022: \u002220\u0022,\n\t\t\u0022backgroundColor\u0022: \u0022#FFFFFF\u0022,\n\t\t\u0022sectionColor\u0022: \u0022#EEEEEE\u0022,\n\t\t\u0022table\u0022: \u0022personne\u0022,\n\t\t\u0022data_id\u0022: \u0022\u0022,\n\t\t\u0022param_selector\u0022: \u0022#view-params\u0022\n\t}\n}","options_lang_fr":"","id":"83"},"template":"free","photo_id":0,"preview":"0","controller":"","options":"","attach":"","droits":"pottiok","popin":0,"background":"","slug":"comprendre-les-contraintes-techniques-du-web-design","description":"","URL":"\/fr\/services\/education-populaire\/ateliers-formations\/comprendre-les-contraintes-techniques-du-web-design","url":"","role":0,"commentable":"0","nbComments":0,"comments":[],"main_entity_table":"","main_entity_id":"0","a":null,"p":"","title":"","params":[],"deletable":"0","categorie":"","typologie":"","liens":null,"has_page":"1","date_online":"2020-06-08 15:32:43","date_offline":"0000-00-00 00:00:00","online":"1","isOnline":true,"alaune":"0","date_page":"0000-00-00 00:00:00","option_english":0,"erreurs":[],"links":{"page":"comprendre-les-contraintes-techniques-du-web-design"},"id":"83","created":"2020-06-08 15:32:34","created_id":"1","updated":"2021-06-13 12:28:25","updated_id":"1","deleted":"0","table":"page","created_label":null,"updated_label":null,"properties":{"template":{"item_0":{"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":"","param_selector":"#view-params","editor":""},"item_1":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"1","param_selector":"#view-params"},"item_2":{"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","param_selector":"#view-params","editor":""},"item_3":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"0","param_selector":"#view-params"},"item_4":{"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","param_selector":"#view-params","editor":""},"item_5":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"0","param_selector":"#view-params"},"item_6":{"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","param_selector":"#view-params","editor":""},"item_7":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"0","param_selector":"#view-params"},"item_8":{"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","param_selector":"#view-params","editor":""},"item_9":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"1","param_selector":"#view-params"},"item_10":{"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","param_selector":"#view-params","editor":""},"item_11":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"1","param_selector":"#view-params"},"item_12":{"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","param_selector":"#view-params","editor":""},"item_13":{"type":"separator","online":1,"paddingTop":"0","paddingBottom":"0","paddingLeft":"20","paddingRight":"20","backgroundColor":"#9c9c9c","sectionColor":"transparent","height":"1","fullwidth":"1","param_selector":"#view-params"},"item_14":{"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}],"online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","backgroundColor":"#FFFFFF","sectionColor":"transparent","label":"L'intervenant","chapeau":"","param_selector":"#view-params"},"item_15":{"type":"data","online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","backgroundColor":"#FFFFFF","sectionColor":"#EEEEEE","table":"personne","data_id":"","param_selector":"#view-params","data":null}},"pages":[]},"origine":"BACK","created_user":null,"client_id":null,"_table":null}},{"id":"121","table":"page","label":"Albums","preview":"52","edit_url":"\/extra\/site\/page\/edit\/","titre":"Albums","link":"albums","data":{"children":[],"parent":null,"rank":1,"label":"Albums","icone":"","hidden":0,"depth":0,"statut":"ALL","login":"LOGIN","versions":{"title_fr":"Albums","slug_fr":"albums","description_fr":"","tags_fr":"","template_lang_fr":"{\u0022item_0\u0022:{\u0022type\u0022:\u0022breadcrump\u0022,\u0022online\u0022:1,\u0022paddingTop\u0022:\u002220\u0022,\u0022paddingBottom\u0022:\u002220\u0022,\u0022paddingLeft\u0022:\u002220\u0022,\u0022paddingRight\u0022:\u002220\u0022,\u0022backgroundColor\u0022:\u0022#FFFFFF\u0022,\u0022sectionColor\u0022:\u0022#EEEEEE\u0022},\u0022item_1\u0022:{\u0022type\u0022:\u0022h1\u0022,\u0022online\u0022:1,\u0022paddingTop\u0022:\u002220\u0022,\u0022paddingBottom\u0022:\u002220\u0022,\u0022paddingLeft\u0022:\u002220\u0022,\u0022paddingRight\u0022:\u002220\u0022,\u0022backgroundColor\u0022:\u0022#FFFFFF\u0022,\u0022sectionColor\u0022:\u0022#EEEEEE\u0022}}","options_lang_fr":"","id":"121"},"template":"albums","photo_id":0,"preview":"52","controller":"","options":"","attach":"","droits":"pottiok","popin":0,"background":"","slug":"albums","description":"","URL":"albums","url":"","role":0,"commentable":"0","nbComments":0,"comments":[],"main_entity_table":"","main_entity_id":"0","a":null,"p":"","title":"","params":[],"deletable":"0","categorie":"","typologie":"","liens":null,"has_page":"1","date_online":"0000-00-00 00:00:00","date_offline":"0000-00-00 00:00:00","online":"1","isOnline":true,"alaune":"0","date_page":"0000-00-00 00:00:00","option_english":0,"erreurs":[],"links":{"page":"albums"},"id":"121","created":"2020-07-01 17:23:25","created_id":"1","updated":"2021-06-13 07:44:07","updated_id":"1","deleted":"0","table":"page","created_label":null,"updated_label":null,"properties":{"template":{"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"}},"pages":[]},"origine":"BACK","created_user":null,"client_id":null,"_table":null}}],"online":1,"paddingTop":"20","paddingBottom":"20","paddingLeft":"20","paddingRight":"20","backgroundColor":"#FFFFFF","sectionColor":"#EEEEEE","label":"Voir aussi","chapeau":"","param_selector":"#view-params"}}