Front End Hero Evolution
mbella.georges@gmail.com
De Man of Styles
à
Man of Steel
Front End Hero Evolution
mbella.georges@gmail.com
3
De L’intégrateur Html
au
Développeur Front-end
01
Les Pouvoirs du
Développeur Front-end
02
Le Développeur Front-
End dan...
01. Au commencement était l’Intégrateur HTML(/CSS)
Avant j’étais
intégrateur… mais
ça, c’était avant
7
01. Au commencement était l’Intégrateur HTML(/CSS)
Bref Historique
HTML
1991 : 1er vrai site web par Tim Berners-Lee (in...
8
Sa mission était de :
• découper des design
• les porter au format html css
Une autre époque, un autre contexte technolo...
9
Plus une activité qu’un métier à part entière
Profil hybride : Montage des pages par
• Développeur ou
• Infographiste
Le...
10
Le (dur) quotidien de l’intégrateur
• Monopole de IE 6
• Layout en tableau
• CSS à ses débuts
• DOM et JavaScript très ...
11
01. Au commencement était l’Intégrateur HTML(/CSS)
12
01. Au commencement était l’Intégrateur HTML(/CSS)
HTML
HyperTexte Markup Language : langage de balise utilisé pour
cré...
13
01. Au commencement était l’Intégrateur HTML(/CSS)
Cascading Style Sheets (feuilles de style en cascade) : gère la
prés...
14
01. Au commencement était l’Intégrateur HTML(/CSS)
Page Html sans CSS
Quelques notions utiles
15
01. Au commencement était l’Intégrateur HTML(/CSS)
Quelques notions utiles
Page Html avec CSS +
16
01. Au commencement était l’Intégrateur HTML(/CSS)
17
Ce qui a vraiment changé pour nous, les Front’
AJAX
jQuery
véritable naissance du duo HTML5 / CSS3 (CSS3 créé en 1999!)...
18
Quelques notions utiles
Dernière version en date du langage de développement web HTML
De nouvelles balises (plus sémant...
19
Quelques notions utiles
CSS3 est la dernière évolution du langage css et vise à étendre CSS2.1
01. Au commencement étai...
20
Quelques notions utiles
01. Au commencement était l’Intégrateur HTML(/CSS)
Java Script = Langage de programmation exécu...
21
Les compétences du Développeur Front End
01. Au commencement était l’Intégrateur HTML(/CSS)
22
This wind of change …
23
It’s a new dawn …
02. L’Avènement du Développeur Front-End
02-1. Les nouveaux outils / pouvoirs
02-2. La Kryptonite du ...
24
02-1-1. Les Super Pouvoirs !
B. La Super Force
C. La Nouvelle Vision
A. La Super Vitesse
It’s a new day …
25
A. La Super Vitesse : les Frameworks
It’s a new life …
26
A. La Super Vitesse : les Frameworks
Encore des frameworks CSS ?
B. La Super Force : les Pré-Processeurs
Définition
Langage de script qui étend le CSS natif, et qui est compilé en
syntaxe CSS normale
Intérêt et Philisophie
 Co...
Cependant, tout le monde n’est pas pour le progrès
B. La Super Force : les Pré-Processeurs
Sass = CSS with Super Powers : the Proof
B. La Super Force : les Pré-Processeurs
31
C. New Vision
32
This is a new life …
C. New Vision : X-Ray
Inspecteur de Navigateur (ici Chrome) : notre « X-Ray vision »
33
C. New Vision : X-Ray
les « Playground Css–Js » : ici CodePen (autres JSFiddle, JS Bin…)
->permettent de simuler, teste...
34
The HOT topics
C. New Vision : UI on Fire
Font-Icons (Font Awesome, Ico Moon…)
SVG (Icons, Animation…)
Web GL (permet d...
35
This is a new world …
02-1-2. The New WorkFLYflow
36
Why run, when you can… fly !
02-1-2 . The New WorkFLYflow
37
02-1-2 . The New WorkFLYflow
Why run, when you can… fly !
The Yeoman ‘Super Heroes’ Team
Google I/O
2012
Grunt & Gulp
Exécuteurs de Tâches ou Outils de Build
• La minification (compression) de fichiers CSS, JS
• La compilation ...
Car on n’est jamais à l’abri du danger …Mais aussi savoir revenir sur TerreSavoir prendre de la hauteurS’éclater
41
Watch out Clark …
02-2. La Kryptonite du Développeur Front-End
42
02-2-1. Les limites techniques / technologiques
Internet
Explorer, que
fais tu ici !?
43
This is a new life …
02-2-1 . Les limites techniques / technologiques
F**k, il est dans le
cahier de charge !
Multiplic...
44
I can’t help it …
02-2-2. Les contraintes en mode projet
Délais exigeants
Attentes grandissantes : maîtrise multi-disci...
45
You are not alone …
03. La place du Super-Héros dans son nouvel univers
03-1. Les autres personnages
03-2. The Future i...
46
03-1. Les autres personnages
47
03-1. Les autres personnages
48
03-1. Les autres personnages : Développeur Back End
Comment ca
l’inté n’est
pas finie ??!
49
03-1. Les autres personnages : le Directeur Artistique
50
03-1. Les autres personnages : le Chef de Projet
I’m
always
angry
51
S comme STYLES …
03-2. The Future is today
STYLES comme dans GUIDE DE STYLES
Base commune de travail
pour toute l’équip...
52
03-2 . The Future is today : les Guides de Styles
53
03-2 . The Future is today : les Guides de Styles
Evolution
De Man of Styles à…
Fly safe
Vos idées ?
MERCI !
Front end Hero Presentation
Front end Hero Presentation
Prochain SlideShare
Chargement dans…5
×

Front end Hero Presentation

52 vues

Publié le

A brief description of my vision of the Front-End Developer Job through the evolution of the Web

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

Front end Hero Presentation

  1. 1. Front End Hero Evolution mbella.georges@gmail.com
  2. 2. De Man of Styles à Man of Steel Front End Hero Evolution mbella.georges@gmail.com
  3. 3. 3 De L’intégrateur Html au Développeur Front-end 01 Les Pouvoirs du Développeur Front-end 02 Le Développeur Front- End dans son nouvel univers 03
  4. 4. 01. Au commencement était l’Intégrateur HTML(/CSS) Avant j’étais intégrateur… mais ça, c’était avant
  5. 5. 7 01. Au commencement était l’Intégrateur HTML(/CSS) Bref Historique HTML 1991 : 1er vrai site web par Tim Berners-Lee (inventeur du web avec Robert Cailliau) 1994 : Création du W3C, World Wide Web Consortium (T.Berners-Lee) CSS 1; 1998 : CSS 2 - Révisée en 2002. Publiée officiellement en 2011! CSS Web 2.0, Essor des Media Sociaux, Blogs.. Apparition du JavaScript dans Netscape Navigator XHTML 1 (XML + HTML), et 2002 : Table Less Design 1990 1996 1996 2000 présent dans la plupart des Browsers - IE5 leader 2001 2003
  6. 6. 8 Sa mission était de : • découper des design • les porter au format html css Une autre époque, un autre contexte technologique • parc de périphériques connectés réduit • fonctionnalités moins complexes Les compétences requises moins nombreuses 01. Au commencement était l’Intégrateur HTML(/CSS)
  7. 7. 9 Plus une activité qu’un métier à part entière Profil hybride : Montage des pages par • Développeur ou • Infographiste Le principe était : « Tu sais te servir de Dreamweaver : tu es intégrateur web. » 01. Au commencement était l’Intégrateur HTML(/CSS)
  8. 8. 10 Le (dur) quotidien de l’intégrateur • Monopole de IE 6 • Layout en tableau • CSS à ses débuts • DOM et JavaScript très différents selon le navigateur 01. Au commencement était l’Intégrateur HTML(/CSS)
  9. 9. 11 01. Au commencement était l’Intégrateur HTML(/CSS)
  10. 10. 12 01. Au commencement était l’Intégrateur HTML(/CSS) HTML HyperTexte Markup Language : langage de balise utilisé pour créer des pages web Universel et compris de tous les navigateurs. (Cependant n'est pas à proprement parlé un langage de programmation) Les balises HTML permettent de • structurer sémantiquement les pages • mettre en forme le contenu • inclure des éléments interactifs (liens, images, formulaires…) Quelques notions utiles
  11. 11. 13 01. Au commencement était l’Intégrateur HTML(/CSS) Cascading Style Sheets (feuilles de style en cascade) : gère la présentation d'une page web CSS Les styles permettent de définir des règles appliquées à un ou plusieurs documents HTML Ces règles portent sur • le positionnement des éléments, • les polices de caractères, • les couleurs, • les marges et espacements • les images de fond, etc. Le but de CSS est séparer la structure d'un document HTML et sa présentation Quelques notions utiles
  12. 12. 14 01. Au commencement était l’Intégrateur HTML(/CSS) Page Html sans CSS Quelques notions utiles
  13. 13. 15 01. Au commencement était l’Intégrateur HTML(/CSS) Quelques notions utiles Page Html avec CSS +
  14. 14. 16 01. Au commencement était l’Intégrateur HTML(/CSS)
  15. 15. 17 Ce qui a vraiment changé pour nous, les Front’ AJAX jQuery véritable naissance du duo HTML5 / CSS3 (CSS3 créé en 1999!) 2007 Responsive Design (Ethan Marcotte) Progressive Enhancement / Amélioration Progressive = Séparation entre Markup - Styles - Comportement 2005 2006 iPhone 2010
  16. 16. 18 Quelques notions utiles Dernière version en date du langage de développement web HTML De nouvelles balises (plus sémantiques) <header> ; <section> ; <article> ; <footer> ; <aside> … Permet désormais d’utiliser et d’échanger avec des fonctionnalités propres aux smartphones Dans le langage courant, HTML5 désigne souvent un ensemble de technologies Web (HTML5, CSS3 et JavaScript) permettant notamment le développement d'applications 01. Au commencement était l’Intégrateur HTML(/CSS) (carnet d’adresse, géolocalisation, appareil photo, etc.) NB :
  17. 17. 19 Quelques notions utiles CSS3 est la dernière évolution du langage css et vise à étendre CSS2.1 01. Au commencement était l’Intégrateur HTML(/CSS) Beaucoup de nouveautés : • les Media Queries, • les angles arrondis, • les ombres, les dégradés, • les @font-face • les transitions et animations, • nouvelles mises en page (multi-colonnes, les boîtes flexibles ou les mises en page en grille)
  18. 18. 20 Quelques notions utiles 01. Au commencement était l’Intégrateur HTML(/CSS) Java Script = Langage de programmation exécuté côté client (directement depuis le navigateur de l’internaute), par opposition aux langages dits côté serveur (ex PhP) L’intérêt du JavaScript est d'exécuter un code sans avoir à recharger une nouvelle fois la page (via AJAX notamment) Gère l’interaction avec l'utilisateur en fonction de ses actions ("hover" de la souris au dessus d'un élément, clic dans un champs de formulaire, redimensionnement de la page...) Permet d'ajouter des animations ou des effets particuliers sur la page HTML
  19. 19. 21 Les compétences du Développeur Front End 01. Au commencement était l’Intégrateur HTML(/CSS)
  20. 20. 22 This wind of change …
  21. 21. 23 It’s a new dawn … 02. L’Avènement du Développeur Front-End 02-1. Les nouveaux outils / pouvoirs 02-2. La Kryptonite du Développeur Front-End
  22. 22. 24 02-1-1. Les Super Pouvoirs ! B. La Super Force C. La Nouvelle Vision A. La Super Vitesse It’s a new day …
  23. 23. 25 A. La Super Vitesse : les Frameworks It’s a new life …
  24. 24. 26 A. La Super Vitesse : les Frameworks
  25. 25. Encore des frameworks CSS ? B. La Super Force : les Pré-Processeurs
  26. 26. Définition Langage de script qui étend le CSS natif, et qui est compilé en syntaxe CSS normale Intérêt et Philisophie  Code plus clair, plus facile à organiser et à maintenir (ex: un fichier par tâche ou rubrique)  Propriétés et bouts de code réutilisables dans d’autres projets  Principe du DRY, Don’t Repeat Yourself  Code CSS généré valide pour tout navigateur B. La Super Force : les Pré-Processeurs
  27. 27. Cependant, tout le monde n’est pas pour le progrès B. La Super Force : les Pré-Processeurs
  28. 28. Sass = CSS with Super Powers : the Proof B. La Super Force : les Pré-Processeurs
  29. 29. 31 C. New Vision
  30. 30. 32 This is a new life … C. New Vision : X-Ray Inspecteur de Navigateur (ici Chrome) : notre « X-Ray vision »
  31. 31. 33 C. New Vision : X-Ray les « Playground Css–Js » : ici CodePen (autres JSFiddle, JS Bin…) ->permettent de simuler, tester et partager du code depuis le navigateur)
  32. 32. 34 The HOT topics C. New Vision : UI on Fire Font-Icons (Font Awesome, Ico Moon…) SVG (Icons, Animation…) Web GL (permet d'afficher, de créer et de gérer dynamiquement des éléments graphiques complexes en 3D pour les pages et applications HTML5)
  33. 33. 35 This is a new world … 02-1-2. The New WorkFLYflow
  34. 34. 36 Why run, when you can… fly ! 02-1-2 . The New WorkFLYflow
  35. 35. 37 02-1-2 . The New WorkFLYflow Why run, when you can… fly !
  36. 36. The Yeoman ‘Super Heroes’ Team Google I/O 2012
  37. 37. Grunt & Gulp Exécuteurs de Tâches ou Outils de Build • La minification (compression) de fichiers CSS, JS • La compilation des fichiers Sass/Less en CSS • Fonctionnalité de “watch” (= détection de toute modification) • Livereload/BrowserSync (rafraîchissement automatique du navigateur) • Test Unitaires • Réduction de la taille des fichiers images • Déploiement automatique sur FTP • … • Quasiment tout ce qu’on veut! 02-1-2 . The New WorkFLYflow
  38. 38. Car on n’est jamais à l’abri du danger …Mais aussi savoir revenir sur TerreSavoir prendre de la hauteurS’éclater
  39. 39. 41 Watch out Clark … 02-2. La Kryptonite du Développeur Front-End
  40. 40. 42 02-2-1. Les limites techniques / technologiques Internet Explorer, que fais tu ici !?
  41. 41. 43 This is a new life … 02-2-1 . Les limites techniques / technologiques F**k, il est dans le cahier de charge ! Multiplicité des supports de diffusion Compatibilité Cross-Browser Technologie en permanente évolution Les challenges du responsive : le tactile
  42. 42. 44 I can’t help it … 02-2-2. Les contraintes en mode projet Délais exigeants Attentes grandissantes : maîtrise multi-disciplinaire Education des clients : les sensibiliser sur les possibilités Organiser sa veille technologique Marge de manoeuvre étroite (initiatives à prendre en douceur)
  43. 43. 45 You are not alone … 03. La place du Super-Héros dans son nouvel univers 03-1. Les autres personnages 03-2. The Future is today …
  44. 44. 46 03-1. Les autres personnages
  45. 45. 47 03-1. Les autres personnages
  46. 46. 48 03-1. Les autres personnages : Développeur Back End Comment ca l’inté n’est pas finie ??!
  47. 47. 49 03-1. Les autres personnages : le Directeur Artistique
  48. 48. 50 03-1. Les autres personnages : le Chef de Projet I’m always angry
  49. 49. 51 S comme STYLES … 03-2. The Future is today STYLES comme dans GUIDE DE STYLES Base commune de travail pour toute l’équipe Livrable au client (idéalement)
  50. 50. 52 03-2 . The Future is today : les Guides de Styles
  51. 51. 53 03-2 . The Future is today : les Guides de Styles
  52. 52. Evolution
  53. 53. De Man of Styles à…
  54. 54. Fly safe Vos idées ? MERCI !

×