Your SlideShare is downloading. ×
0
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Presentation plone conference 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Presentation plone conference 2012

2,668

Published on

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

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,668
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Patterns A library that aims to bring design and development togethervrijdag 19 oktober 12
  • 2. Developers and designers http://www.flickr.com/photos/a_ninjamonkey/3565672226/vrijdag 19 oktober 12
  • 3. Developers and designers Image: http://thebonehouse.cavrijdag 19 oktober 12
  • 4. ?vrijdag 19 oktober 12
  • 5. Pourquoi? Zergatik? Waarom? Why? Varfor? ? Hoekom? Warum? Miks? Por quê? Почему? ¿Por qué? Miksi? 為什麼 ? Hvorfor? Perché? Mengapa? De ce?vrijdag 19 oktober 12
  • 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. 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. 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. 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. http://leaverou.github.com/prefixfree/vrijdag 19 oktober 12
  • 11. vrijdag 19 oktober 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. 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. Modernizr Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the users browser. http://modernizr.comvrijdag 19 oktober 12
  • 15. Markup example <div class=”pat-collapsible”> <h3>Click me!</h3> <p>Lorem ipsum dolor sit amet</p> </div>vrijdag 19 oktober 12
  • 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. 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. 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. 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. Markup examplevrijdag 19 oktober 12
  • 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. 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. 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. 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. 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. Injection <a href="my-page.html" class="pat-inject" data-pat-inject="method: modal"> My first AJAX </a>vrijdag 19 oktober 12
  • 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. 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. 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. 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. 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. 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. Developers and designersvrijdag 19 oktober 12
  • 34. w w w. p a t t e r n s l i b . c o mvrijdag 19 oktober 12

×