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 souv...
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...
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ésen...
CSS, le design 
Les feuilles de style en cascade, 
généralement appelées CSS, 
forment un langage informatique 
qui décrit...
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...
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 de...
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.b...
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èv...
Crédits 
CrossRoad - Responsive WordPress Magazine / Blog - Serge Kij 
https://www.flickr.com/photos/zergev/8145106535/ 
m...
Prochain SlideShare
Chargement dans…5
×

Intégration #1 : introduction

872 vues

Publié le

Intégration #1 : introduction

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
872
Sur SlideShare
0
Issues des intégrations
0
Intégrations
417
Actions
Partages
0
Téléchargements
20
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Intégration #1 : introduction

  1. 1. Une introduction à l’intégration web
  2. 2. Intégration ?
  3. 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. 4. Navigateur et intégration HTML CSS JS Images Client
  5. 5. une histoires de l’intégration
  6. 6. 1990 - 1992 : les débuts du web
  7. 7. 1993 - 1998 : tableaux & images mrshowbiz.com - 1998
  8. 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. 9. 2003 - 2005 : CSS devient le standard myspace.com - 2003
  10. 10. 2006 - 2009 : Javascript s’impose jeuxvideo.com - 2008
  11. 11. 2010 - 2012 : responsive web design mashable.com - 2012
  12. 12. 2013 - 2014 : web app spotify.com - 2014
  13. 13. Langages & librairies
  14. 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. 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. 16. Préprocesseurs CSS
  17. 17. Frameworks Bootsrap Foundation
  18. 18. Les outils de l’intégrateur
  19. 19. Un navigateur FireFox Chrome Chrome Canary + developer tools
  20. 20. Un éditeur de texte Sublime Text Coda 2 Brackets
  21. 21. Design Photoshop Illustrator
  22. 22. Test & validation
  23. 23. Intégrateur, un métier
  24. 24. Le boulot de l’intégrateur (1)
  25. 25. Le boulot de l’intégrateur (2) Découpage sémantique
  26. 26. Le boulot de l’intégrateur (3) Sites web & mobile Emails
  27. 27. Ou travaille l’intégrateur ? Startup Freelance Agence
  28. 28. Les contraintes de l’intégrateur Respect des standars Respect des formats Respect des délais Respect du design / de la plateforme
  29. 29. Le dilemme de l’intégrateur Principes VS Pratique
  30. 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. 31. Les compétences de l’intégrateur
  32. 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. 33. Combien gagne un intégrateur ? K€ brut/an – Source Urban Linker pour l’IDF
  34. 34. Merci pour votre attention.
  35. 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. 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/

×