Presentation plone conference 2012

2,901 views
2,857 views

Published on

Presentation that demonstrates the Patterns library, which aim to facilitate a fruitful cooperation between designers and developers in a multidisciplinary team.

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
2,901
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Presentation plone conference 2012

  1. 1. Patterns A library that aims to bring design and development togethervrijdag 19 oktober 12
  2. 2. Developers and designers http://www.flickr.com/photos/a_ninjamonkey/3565672226/vrijdag 19 oktober 12
  3. 3. Developers and designers Image: http://thebonehouse.cavrijdag 19 oktober 12
  4. 4. ?vrijdag 19 oktober 12
  5. 5. Pourquoi? Zergatik? Waarom? Why? Varfor? ? Hoekom? Warum? Miks? Por quê? Почему? ¿Por qué? Miksi? 為什麼 ? Hvorfor? Perché? Mengapa? De ce?vrijdag 19 oktober 12
  6. 6. jQuery UI - Quantity vs Quality ± Lots of freedom + Rich interaction patterns + Focus on interaction patterns - Still need to program + Good for dev - Not wel suited for prototypingvrijdag 19 oktober 12
  7. 7. jQuery UI Twitter bootstrap - Quantity vs Quality + Well defined library of interaction ± Lots of freedom patterns + Rich interaction patterns - Lacks certain rich patterns + Focus on interaction patterns - Focus on layout - Still need to program - Little need for programming + Good for dev - Less good for dev - Not wel suited for prototyping + Great for prototypingvrijdag 19 oktober 12
  8. 8. ery UI Patterns library Twitter boy vs Quality + Well defined library of interaction + Well defined libraof freedom patterns patteaction patterns + Loved by designers & developers - Lacks certaineraction patterns + No need for programming - Focus od to program + Focus on interaction patterns - Little need ford for dev + Great for dev + Less good for prototyping + Great for prototyping + Great for p vrijdag 19 oktober 12
  9. 9. Patterns’ solution • Only one predefined tag to include in the <head> runs Patterns. • Works directly in the markup with attributes. • Uses a syntax that’s compact and not scary to anyone. • Start rapidly with boilerplate CSS • Extensible: add your own patterns. • Can grow rapidly by selecting and integrating excelelnt jQuery plugins if available.vrijdag 19 oktober 12
  10. 10. http://leaverou.github.com/prefixfree/vrijdag 19 oktober 12
  11. 11. vrijdag 19 oktober 12
  12. 12. background: rgb(252,234,187); /* Old browsers */ background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,rgba(252,234,187,1)), color-stop(50%,rgba(252,205,77,1)), color- stop(51%,rgba(248,181,0,1)), color-stop(100%,rgba(251,223,147,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#fceabb, endColorstr=#fbdf93,GradientType=0 ); /* IE6-9 */vrijdag 19 oktober 12
  13. 13. background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C *vrijdag 19 oktober 12
  14. 14. Modernizr Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the users browser. http://modernizr.comvrijdag 19 oktober 12
  15. 15. Markup example <div class=”pat-collapsible”> <h3>Click me!</h3> <p>Lorem ipsum dolor sit amet</p> </div>vrijdag 19 oktober 12
  16. 16. Markup example <div class=”pat-collapsible”> <div class=”pat-collapsible open”> <h3>Click me!</h3> <h3>Click me!</h3> <p>Lorem ipsum dolor sit amet</p> <div class=”panel-content”> </div> <p>Lorem ipsum dolor sit amet</p> </div> </div>vrijdag 19 oktober 12
  17. 17. Carousel <ul class=”pat-carousel”> <li><img src=”http://lorempixel.com/400/200” alt=”Random image” /></li> <li><img src=”http://lorempixel.com/400/200” alt=”Random image” /></li> <li><img src=”http://lorempixel.com/400/200” alt=”Random image” /></li> </ul>vrijdag 19 oktober 12
  18. 18. Carousel <ul class=”pat-carousel” data-pat-carousel=”loop: false; control-arrows: true;”> <li><img src=”http://lorempixel.com/400/200” alt=”Random image” /></li> <li><img src=”http://lorempixel.com/400/200” alt=”Random image” /></li> <li><img src=”http://lorempixel.com/400/200” alt=”Random image” /></li> </ul>vrijdag 19 oktober 12
  19. 19. Carousel <ul class=”pat-carousel” data-pat- carousel=”loop: false; control- arrows: true;”> <li><img src=”http:// lorempixel.com/400/200” alt=”Random image” /></li> <li><img src=”http:// lorempixel.com/400/200” alt=”Random image” /></li> <li><img src=”http:// lorempixel.com/400/200” alt=”Random image” /></li> </ul>vrijdag 19 oktober 12
  20. 20. Markup examplevrijdag 19 oktober 12
  21. 21. Tooltip <a class=”pat-tooltip” data-pat-tooltip="position: tm-rt-rm-rb-lt; method: click"”> Tooltip top middle, show on hover </a>vrijdag 19 oktober 12
  22. 22. Injection <a href="my-page.html" class="pat-inject" data-pat-inject="#content"> My first AJAX </a> <div id="content"> This is going to be replaced by the entire content of my-page.html </div>vrijdag 19 oktober 12
  23. 23. Injection <a href="my-page.html#content" class="pat-inject"> My first AJAX </a> <div id="content"> This is going to be replaced by the contents of #content of my-page.html </div>vrijdag 19 oktober 12
  24. 24. Injection <a href="my-page.html#my-id" class="pat-inject" data-pat-inject="#content" > My first AJAX </a> <div id="content"> This is going to be replaced by the contents of #my-id of my-page.html </div>vrijdag 19 oktober 12
  25. 25. Injection <a href="my-page.html" class="pat-inject" data-pat-inject="#my-id #content && h1 .btn"> My first AJAX </a> <div id="content"> This is going to be replaced by the contents of #my-id of my-page.html </div> <a href=”#” class=”btn”> This is going to be replaced by the H1 contents of my-page.html </a> <a href=”#” class=”btn”> This is also going to be replaced by the H1 contents of my-page.html </a>vrijdag 19 oktober 12
  26. 26. Injection <a href="my-page.html" class="pat-inject" data-pat-inject="method: modal"> My first AJAX </a>vrijdag 19 oktober 12
  27. 27. Injection <a href="my-page.html" class="pat-inject" data-pat-inject="method: self-healing"> My first AJAX </a>vrijdag 19 oktober 12
  28. 28. Injection <a href="foo.html" class="pat-inject" data-pat-inject="before-element: #content"> My first AJAX </a> <!-- The content of my-page.html will appear here --> <div id="content"> This content will stay here </div>vrijdag 19 oktober 12
  29. 29. Injection <a href="foo.html" class="pat-inject" data-pat-inject="after-element: #content"> My first AJAX </a> <div id="content"> This content will stay here </div> <!-- The content of my-page.html will appear here -->vrijdag 19 oktober 12
  30. 30. Injection <a href="foo.html" class="pat-inject" data-pat-inject="before: #content"> My first AJAX </a> <div id="content"> <!-- The content of my-page.html will appear here --> This content will stay here </div>vrijdag 19 oktober 12
  31. 31. Injection <a href="foo.html" class="pat-inject" data-pat-inject="after: #content"> My first AJAX </a> <div id="content"> This content will stay here <!-- The content of my-page.html will appear here --> </div>vrijdag 19 oktober 12
  32. 32. Toggle <fieldset id="document-filters" class="closed fancy-select"> <p class="legend" data-pat-toggle="#document-filters; open closed; class">Filters</p> <fieldset class="flyout"> <fieldset class="sorting radio-list"> <label><input name="sorting" type="radio" checked="checked" />Sort by date</label> ! ! ! <label><input name="sorting" type="radio" />Sort by author</label> ! ! ! <label><input name="sorting" type="radio" />Sort by type</label> ! ! </fieldset> ! ! <fieldset class="filter check-list"> ! ! ! <label><input type="checkbox" />Show my documents only</label> ! ! </fieldset> ! ! <fieldset class="grouping radio-list"> ! ! ! <label><input name="grouping" type="radio" checked="checked" />Group by Label</label> ! ! ! <label><input name="grouping" type="radio" />Group by author</label> ! ! ! <label><input name="grouping" type="radio" />Group by period</label> ! ! ! <label><input name="grouping" type="radio" />Group by type</label> ! ! ! <label><input name="grouping" type="radio" />No grouping</label> ! ! </fieldset> ! </fieldset> </fieldset>vrijdag 19 oktober 12
  33. 33. Developers and designersvrijdag 19 oktober 12
  34. 34. w w w. p a t t e r n s l i b . c o mvrijdag 19 oktober 12

×