Intégration #1 : introduction

1. Une introduction à l’intégration web

2. Intégration ?

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

13. Langages & librairies

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

16. Préprocesseurs CSS

17. Frameworks
Bootsrap
Foundation

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

21. Design
Photoshop Illustrator

22. Test & validation

23. Intégrateur, un métier

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/