SlideShare une entreprise Scribd logo
Une introduction à l’intégration web
Intégration ?
Une définition de l’intégration 
L’intégration est la procédure par laquelle on part 
d’un fichier graphique (le plus souvent au format PSD 
de Photoshop) pour arriver à un contenu HTML de 
type page web ou email HTML. 
Source : definitions-webmarketing.com
Navigateur et intégration 
HTML 
CSS 
JS 
Images 
Client
une histoires de l’intégration
1990 - 1992 : les débuts du web
1993 - 1998 : tableaux & images 
mrshowbiz.com - 1998
1998 - 2002 : Flash is king 
http://free-flash-website.com/login/mm/flash/ 
fla_4_5_6/applications/CD_roms/res_cd_rom/ 
BU/free4u_vCS5.html
2003 - 2005 : CSS devient le standard 
myspace.com - 2003
2006 - 2009 : Javascript s’impose 
jeuxvideo.com - 2008
2010 - 2012 : responsive web design 
mashable.com - 2012
2013 - 2014 : web app 
spotify.com - 2014
Langages & librairies
HTML, la structure 
L’Hypertext Markup Language, 
généralement abrégé HTML, est 
le format de données conçu 
pour représenter les pages 
web. 
Source : wikipedia.org
CSS, le design 
Les feuilles de style en cascade, 
généralement appelées CSS, 
forment un langage informatique 
qui décrit la présentation des 
documents HTML 
Source : wikipedia.org
Préprocesseurs CSS
Frameworks 
Bootsrap 
Foundation
Les outils de l’intégrateur
Un navigateur 
FireFox Chrome Chrome Canary 
+ developer tools
Un éditeur de texte 
Sublime Text Coda 2 Brackets
Design 
Photoshop Illustrator
Test & validation
Intégrateur, un métier
Le boulot de l’intégrateur (1)
Le boulot de l’intégrateur (2) 
Découpage sémantique
Le boulot de l’intégrateur (3) 
Sites web & mobile 
Emails
Ou travaille l’intégrateur ? 
Startup Freelance Agence
Les contraintes de l’intégrateur 
Respect des standars 
Respect des formats 
Respect des délais 
Respect du design / de la plateforme
Le dilemme de l’intégrateur 
Principes 
VS 
Pratique
L’environnement de l’intégrateur 
Client Chef de projet Webdesigner 
Développeur front Développeur back Référenceur 
UX designer 
Rédacteur
Les compétences de l’intégrateur
Suggestion de veille pour l’intégrateur en français 
http://www.hteumeuleu.fr 
http://www.lesintegristes.net 
http://www.blogduwebdesign.com 
http://www.alsacreations.com
Combien gagne un intégrateur ? 
K€ brut/an – Source Urban Linker pour l’IDF
Merci pour votre attention.
Bibliographie 
Faire comprendre le métier d'intégrateur web - Rémi Parmentier 
http://vimeo.com/105428541 
Intégrateur lève toi et conçois- Bertrand Keller 
http://vimeo.com/51941103 
The evolution of webdesign - Design Juices 
http://www.designjuices.co.uk/2011/09/web-design-evolution/ 
L’intégration web, cette leçon d’humilité - Marie Guillaumet, 
http://www.lesintegristes.net/2013/03/19/integration-web-humilite/ 
La vie des intégrateurs, chapitre V : et plus si affinités… - Eric Le Bihan 
http://www.lesintegristes.net/2012/09/06/la-vie-des-integrateurs-chapitre-v-et-plus-si-affinites/ 
A Day in the Life-Front End Engineer - Elle Morgan 
https://www.youtube.com/watch?v=w9UDoIeOG-E 
Intégrateur dans la vraie vie - Christophe Andrieu 
http://www.stpo.fr/blog/integrateur-dans-la-vraie-vie/
Crédits 
CrossRoad - Responsive WordPress Magazine / Blog - Serge Kij 
https://www.flickr.com/photos/zergev/8145106535/ 
mrshowbiz.com, myspace.com, jeuxvideo.com, mashable.com 
http://archive.org/web/

Contenu connexe

En vedette

Startup & entrepreneuriat #2.1: disrupt me
Startup & entrepreneuriat #2.1: disrupt meStartup & entrepreneuriat #2.1: disrupt me
Startup & entrepreneuriat #2.1: disrupt me
Jean Michel
 
Javascript #2.2 : jQuery
Javascript #2.2 : jQueryJavascript #2.2 : jQuery
Javascript #2.2 : jQuery
Jean Michel
 
Dev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummiesDev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummies
Jean Michel
 
Gestion de projet #4 : spécification
Gestion de projet #4 : spécificationGestion de projet #4 : spécification
Gestion de projet #4 : spécification
Jean Michel
 
Architecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkArchitecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto framework
Jean Michel
 
Wordpress #3 : content strategie
Wordpress #3 : content strategieWordpress #3 : content strategie
Wordpress #3 : content strategie
Jean Michel
 
Html & Css #5 : positionement
Html & Css #5 : positionementHtml & Css #5 : positionement
Html & Css #5 : positionement
Jean Michel
 
Les modèles économiques du web
Les modèles économiques du webLes modèles économiques du web
Les modèles économiques du web
Jean Michel
 
Architecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designArchitecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented design
Jean Michel
 
Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!
Jean Michel
 
Wordpress #1 : introduction
Wordpress #1 : introductionWordpress #1 : introduction
Wordpress #1 : introduction
Jean Michel
 
Javascript #4.1 : fonctions for noobs
Javascript #4.1 : fonctions for noobsJavascript #4.1 : fonctions for noobs
Javascript #4.1 : fonctions for noobs
Jean Michel
 
Gestion de projet #3 : besoin client
Gestion de projet #3 : besoin clientGestion de projet #3 : besoin client
Gestion de projet #3 : besoin client
Jean Michel
 
PHP #7 : guess who?
PHP #7 : guess who?PHP #7 : guess who?
PHP #7 : guess who?
Jean Michel
 
PHP #4 : sessions & cookies
PHP #4 : sessions & cookiesPHP #4 : sessions & cookies
PHP #4 : sessions & cookies
Jean Michel
 
Html & Css #6 : formulaires
Html & Css #6 : formulairesHtml & Css #6 : formulaires
Html & Css #6 : formulaires
Jean Michel
 
#1 entreprendre au xxiè siècle
#1 entreprendre au xxiè siècle#1 entreprendre au xxiè siècle
#1 entreprendre au xxiè siècle
Jean Michel
 
PHP & MYSQL #5 : fonctions
PHP & MYSQL #5 :  fonctionsPHP & MYSQL #5 :  fonctions
PHP & MYSQL #5 : fonctions
Jean Michel
 
WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs
Jean Michel
 

En vedette (20)

Startup & entrepreneuriat #2.1: disrupt me
Startup & entrepreneuriat #2.1: disrupt meStartup & entrepreneuriat #2.1: disrupt me
Startup & entrepreneuriat #2.1: disrupt me
 
Javascript #2.2 : jQuery
Javascript #2.2 : jQueryJavascript #2.2 : jQuery
Javascript #2.2 : jQuery
 
Dev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummiesDev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummies
 
Gestion de projet #4 : spécification
Gestion de projet #4 : spécificationGestion de projet #4 : spécification
Gestion de projet #4 : spécification
 
Architecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkArchitecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto framework
 
Wordpress #3 : content strategie
Wordpress #3 : content strategieWordpress #3 : content strategie
Wordpress #3 : content strategie
 
Html & Css #5 : positionement
Html & Css #5 : positionementHtml & Css #5 : positionement
Html & Css #5 : positionement
 
Les modèles économiques du web
Les modèles économiques du webLes modèles économiques du web
Les modèles économiques du web
 
Architecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designArchitecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented design
 
Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!
 
Wordpress #1 : introduction
Wordpress #1 : introductionWordpress #1 : introduction
Wordpress #1 : introduction
 
Javascript #4.1 : fonctions for noobs
Javascript #4.1 : fonctions for noobsJavascript #4.1 : fonctions for noobs
Javascript #4.1 : fonctions for noobs
 
Gestion de projet #3 : besoin client
Gestion de projet #3 : besoin clientGestion de projet #3 : besoin client
Gestion de projet #3 : besoin client
 
PHP #7 : guess who?
PHP #7 : guess who?PHP #7 : guess who?
PHP #7 : guess who?
 
PHP #4 : sessions & cookies
PHP #4 : sessions & cookiesPHP #4 : sessions & cookies
PHP #4 : sessions & cookies
 
Projet timezone
Projet timezoneProjet timezone
Projet timezone
 
Html & Css #6 : formulaires
Html & Css #6 : formulairesHtml & Css #6 : formulaires
Html & Css #6 : formulaires
 
#1 entreprendre au xxiè siècle
#1 entreprendre au xxiè siècle#1 entreprendre au xxiè siècle
#1 entreprendre au xxiè siècle
 
PHP & MYSQL #5 : fonctions
PHP & MYSQL #5 :  fonctionsPHP & MYSQL #5 :  fonctions
PHP & MYSQL #5 : fonctions
 
WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs
 

Similaire à Intégration #1 : introduction

Webdesign
WebdesignWebdesign
Webdesign
Chris Gaillard
 
Réussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPressRéussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPress
Julien Dereumaux
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
ambin_fr
 
[TNT19] Hands on: Objectif Top Architecte!
[TNT19] Hands on: Objectif Top Architecte![TNT19] Hands on: Objectif Top Architecte!
[TNT19] Hands on: Objectif Top Architecte!
Alexandre Touret
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
David Roessli
 
201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1
Xavier Mouly
 
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œilVisual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Microsoft Technet France
 
Staelens cv 2019 word
Staelens cv 2019 wordStaelens cv 2019 word
Staelens cv 2019 word
Staelens Pierre-Henry
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Mohammed JAITI
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEO
Erlé Alberton
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
Laribi Aicha
 
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
Olivier Dommange
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
Gregory Renard
 
PRESENTATION_webclient.pptx
PRESENTATION_webclient.pptxPRESENTATION_webclient.pptx
PRESENTATION_webclient.pptx
AleskaVargas2
 
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
SEO CAMP
 
Portails Etat De L'art
Portails  Etat De L'artPortails  Etat De L'art
Portails Etat De L'art
Tugdual Grall
 

Similaire à Intégration #1 : introduction (20)

Webdesign
WebdesignWebdesign
Webdesign
 
Réussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPressRéussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPress
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
 
[TNT19] Hands on: Objectif Top Architecte!
[TNT19] Hands on: Objectif Top Architecte![TNT19] Hands on: Objectif Top Architecte!
[TNT19] Hands on: Objectif Top Architecte!
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
 
201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1
 
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œilVisual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
 
Staelens cv 2019 word
Staelens cv 2019 wordStaelens cv 2019 word
Staelens cv 2019 word
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEO
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
 
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
 
PRESENTATION_webclient.pptx
PRESENTATION_webclient.pptxPRESENTATION_webclient.pptx
PRESENTATION_webclient.pptx
 
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
 
Portails Etat De L'art
Portails  Etat De L'artPortails  Etat De L'art
Portails Etat De L'art
 
CV_MohamedHabibABIDI
CV_MohamedHabibABIDICV_MohamedHabibABIDI
CV_MohamedHabibABIDI
 

Plus de Jean Michel

HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : Bootstrap
Jean Michel
 
Architecture logicielle #4 : mvc
Architecture logicielle #4 : mvcArchitecture logicielle #4 : mvc
Architecture logicielle #4 : mvc
Jean Michel
 
Architecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezoneArchitecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezone
Jean Michel
 
Architecture logicielle #1 : introduction
Architecture logicielle #1 : introductionArchitecture logicielle #1 : introduction
Architecture logicielle #1 : introduction
Jean Michel
 
PHP #6 : mysql
PHP #6 : mysqlPHP #6 : mysql
PHP #6 : mysql
Jean Michel
 
PHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesPHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulaires
Jean Michel
 
PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles
Jean Michel
 
Startup #5 : pitch
Startup #5 : pitchStartup #5 : pitch
Startup #5 : pitch
Jean Michel
 
Javascript #8 : événements
Javascript #8 : événementsJavascript #8 : événements
Javascript #8 : événements
Jean Michel
 
WebApp #3 : API
WebApp #3 : APIWebApp #3 : API
WebApp #3 : API
Jean Michel
 
WebApp #2 : responsive design
WebApp #2 : responsive designWebApp #2 : responsive design
WebApp #2 : responsive design
Jean Michel
 
Projet timezone
Projet timezoneProjet timezone
Projet timezone
Jean Michel
 
WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introduction
Jean Michel
 

Plus de Jean Michel (13)

HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : Bootstrap
 
Architecture logicielle #4 : mvc
Architecture logicielle #4 : mvcArchitecture logicielle #4 : mvc
Architecture logicielle #4 : mvc
 
Architecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezoneArchitecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezone
 
Architecture logicielle #1 : introduction
Architecture logicielle #1 : introductionArchitecture logicielle #1 : introduction
Architecture logicielle #1 : introduction
 
PHP #6 : mysql
PHP #6 : mysqlPHP #6 : mysql
PHP #6 : mysql
 
PHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesPHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulaires
 
PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles
 
Startup #5 : pitch
Startup #5 : pitchStartup #5 : pitch
Startup #5 : pitch
 
Javascript #8 : événements
Javascript #8 : événementsJavascript #8 : événements
Javascript #8 : événements
 
WebApp #3 : API
WebApp #3 : APIWebApp #3 : API
WebApp #3 : API
 
WebApp #2 : responsive design
WebApp #2 : responsive designWebApp #2 : responsive design
WebApp #2 : responsive design
 
Projet timezone
Projet timezoneProjet timezone
Projet timezone
 
WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introduction
 

Intégration #1 : introduction

  • 1. Une introduction à l’intégration web
  • 3. Une définition de l’intégration L’intégration est la procédure par laquelle on part d’un fichier graphique (le plus souvent au format PSD de Photoshop) pour arriver à un contenu HTML de type page web ou email HTML. Source : definitions-webmarketing.com
  • 4. Navigateur et intégration HTML CSS JS Images Client
  • 5. une histoires de l’intégration
  • 6. 1990 - 1992 : les débuts du web
  • 7. 1993 - 1998 : tableaux & images mrshowbiz.com - 1998
  • 8. 1998 - 2002 : Flash is king http://free-flash-website.com/login/mm/flash/ fla_4_5_6/applications/CD_roms/res_cd_rom/ BU/free4u_vCS5.html
  • 9. 2003 - 2005 : CSS devient le standard myspace.com - 2003
  • 10. 2006 - 2009 : Javascript s’impose jeuxvideo.com - 2008
  • 11. 2010 - 2012 : responsive web design mashable.com - 2012
  • 12. 2013 - 2014 : web app spotify.com - 2014
  • 14. HTML, la structure L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. Source : wikipedia.org
  • 15. CSS, le design Les feuilles de style en cascade, généralement appelées CSS, forment un langage informatique qui décrit la présentation des documents HTML Source : wikipedia.org
  • 18. Les outils de l’intégrateur
  • 19. Un navigateur FireFox Chrome Chrome Canary + developer tools
  • 20. Un éditeur de texte Sublime Text Coda 2 Brackets
  • 24. Le boulot de l’intégrateur (1)
  • 25. Le boulot de l’intégrateur (2) Découpage sémantique
  • 26. Le boulot de l’intégrateur (3) Sites web & mobile Emails
  • 27. Ou travaille l’intégrateur ? Startup Freelance Agence
  • 28. Les contraintes de l’intégrateur Respect des standars Respect des formats Respect des délais Respect du design / de la plateforme
  • 29. Le dilemme de l’intégrateur Principes VS Pratique
  • 30. L’environnement de l’intégrateur Client Chef de projet Webdesigner Développeur front Développeur back Référenceur UX designer Rédacteur
  • 31. Les compétences de l’intégrateur
  • 32. Suggestion de veille pour l’intégrateur en français http://www.hteumeuleu.fr http://www.lesintegristes.net http://www.blogduwebdesign.com http://www.alsacreations.com
  • 33. Combien gagne un intégrateur ? K€ brut/an – Source Urban Linker pour l’IDF
  • 34. Merci pour votre attention.
  • 35. Bibliographie Faire comprendre le métier d'intégrateur web - Rémi Parmentier http://vimeo.com/105428541 Intégrateur lève toi et conçois- Bertrand Keller http://vimeo.com/51941103 The evolution of webdesign - Design Juices http://www.designjuices.co.uk/2011/09/web-design-evolution/ L’intégration web, cette leçon d’humilité - Marie Guillaumet, http://www.lesintegristes.net/2013/03/19/integration-web-humilite/ La vie des intégrateurs, chapitre V : et plus si affinités… - Eric Le Bihan http://www.lesintegristes.net/2012/09/06/la-vie-des-integrateurs-chapitre-v-et-plus-si-affinites/ A Day in the Life-Front End Engineer - Elle Morgan https://www.youtube.com/watch?v=w9UDoIeOG-E Intégrateur dans la vraie vie - Christophe Andrieu http://www.stpo.fr/blog/integrateur-dans-la-vraie-vie/
  • 36. Crédits CrossRoad - Responsive WordPress Magazine / Blog - Serge Kij https://www.flickr.com/photos/zergev/8145106535/ mrshowbiz.com, myspace.com, jeuxvideo.com, mashable.com http://archive.org/web/