presentation plone conference 2012
DESCRIPTION
Presentation that demonstrates the Patterns library, which aim to facilitate a fruitful cooperation between designers and developers in a multidisciplinary team.TRANSCRIPT
Patterns
A library that aims to bring design and development together
vrijdag 19 oktober 12
Developers and designers
http://www.flickr.com/photos/a_ninjamonkey/3565672226/
vrijdag 19 oktober 12
Image: http://thebonehouse.ca
Developers and designers
vrijdag 19 oktober 12
?vrijdag 19 oktober 12
Why?Waarom?Pourquoi?
Por quê?
De ce?
Warum?
Hvorfor?
Miks?
Miksi?
Mengapa?
Varfor?
?Perché?
Hoekom?
Почему?
為什麼呢？
Zergatik?
¿Por qué?
vrijdag 19 oktober 12
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 prototyping
vrijdag 19 oktober 12
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 prototyping
Twitter bootstrap
+ Well defined library of interaction patterns
- Lacks certain rich patterns- Focus on layout
- Little need for programming- Less good for dev
+ Great for prototyping
vrijdag 19 oktober 12
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 prototyping
Twitter bootstrap
+ Well defined library of interaction patterns
- Lacks certain rich patterns- Focus on layout
- Little need for programming+ Less good for dev
+ Great for prototyping
Patterns library
+ Well defined library of interaction patterns
+ Loved by designers & developers+ No need for programming
+ Focus on interaction patterns+ Great for dev
+ Great for prototyping
vrijdag 19 oktober 12
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
http://leaverou.github.com/prefixfree/
vrijdag 19 oktober 12
vrijdag 19 oktober 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
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
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user's browser.
Modernizr
http://modernizr.com
vrijdag 19 oktober 12
Markup example
<div class=”pat-collapsible”><h3>Click me!</h3><p>Lorem ipsum dolor sit amet</p>
</div>
vrijdag 19 oktober 12
Markup example
<div class=”pat-collapsible”><h3>Click me!</h3><p>Lorem ipsum dolor sit amet</p>
</div>
<div class=”pat-collapsible open”><h3>Click me!</h3><div class=”panel-content”>
<p>Lorem ipsum dolor sit amet</p></div>
</div>
vrijdag 19 oktober 12
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
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
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
Markup example
vrijdag 19 oktober 12
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
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
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
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
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
Injection
<a href="my-page.html" class="pat-inject" data-pat-inject="method: modal">My first AJAX
</a>
vrijdag 19 oktober 12
Injection
<a href="my-page.html" class="pat-inject" data-pat-inject="method: self-healing">My first AJAX
</a>
vrijdag 19 oktober 12
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
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
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
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
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
Developers and designers
vrijdag 19 oktober 12
www. p a t t e r n s l i b . c o m
vrijdag 19 oktober 12