Il etait une fois une maquette - Thomas ZILLIOX - Paris Web 2012

1,122 views
1,076 views

Published on

Conférence sur la collaboration entre les intégrateurs HTML et les développeurs métier, dispensée lors de Paris-Web 2012.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,122
On SlideShare
0
From Embeds
0
Number of Embeds
672
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Il etait une fois une maquette - Thomas ZILLIOX - Paris Web 2012

  1. 1. 1. Il était une fois une maquetteParis-Web 2012 #htpl
  2. 2. Il était une fois une maquetteThomas ZILLIOXJe suis indépendant : Pixel418.Dualité : intégrateur & développeur.
  3. 3. Il était une fois une maquetteIls se sont mariés
  4. 4. Il était une fois une maquetteIls ont été retrouvés en petits morceaux
  5. 5. 1. Il était une fois une maquette2. Deux visions
  6. 6. Deux visionsInterrogatoire Intégrateur DéveloppeurClient ? Contact Marketing Contact SIProjet ? Website WebappImportant ? Apparence FonctionnelRésultat ? Maquette Template
  7. 7. Deux visionsMaquette ou templateHiérarchique et globale : HTML CSSModulaire et distribué : Framework Métier
  8. 8. Deux visionsLe développeur exécuteLe bonheur est dans laccolade. <ul> {foreach $products as $product} {include link/to/a/product} {/foreach} </ul>
  9. 9. 1. Il était une fois une maquette2. Deux visions3. La solution idéale
  10. 10. La solution idéaleUne template valideBatmanJS ou Distal garde du HTML valide. <ul> <li data-foreach-product="Product.all"> <span data-bind="product.name">name here</span> </li> </ul>
  11. 11. La solution idéaleUne template séparéePure sépare la maquette et la template <ul class="products"> <li> <span>name here</span> </li> </ul> { ".products": { "product <- products": { "span": "product.name" } } }
  12. 12. La solution idéaleUne template maquette-freeUne piste pour un monde meilleur. <ul class="products"> <li> <span>name here</span> </li> </ul> if ( $maquette.has_container( .products ) ) { foreach ( $products as $product ) { [ ... ] } } else { $maquette.render( $products, aside ); }
  13. 13. 1. Il était une fois une maquette2. Deux visions3. La solution idéale4. En attendant
  14. 14. En attendantInversons les rôles
  15. 15. En attendantSolution évidente
  16. 16. En attendantSolution pas adaptée à tous les projetsCest une solution qui marche !Mais attention : Lintégrateur nest pas magicien ; Coopération intégrateur - développeur ; Retarde la validation du rendu.
  17. 17. 1. Il était une fois une maquette2. Deux visions3. La solution idéale4. En attendant5. Conclusion
  18. 18. ConclusionLe coupable
  19. 19. ConclusionPour résumer 1. Il faut de meilleurs outils ; 2. Le chef de projet : décide qui génère lHTML ; 3. Le développeur : découpe raisonnablement ; 4. Lintégrateur : sépare le layout du contenu ; 5. Lintégrateur et le développeur : utilisent un même repository ; 6. Le développeur : fait du CSS dans une feuille séparée.
  20. 20. ConclusionMerciDes questions ? Maintenant ou dans la soirée ; Par mail : thomas@zilliox.me ; Par twitter : @__tzi.

×