EC2 Plone Presentation - Plone Conference Washington DC, October 8,2008
Presentation plone conference 2012
-
Upload
cornelis-kolbach -
Category
Technology
-
view
2.537 -
download
0
description
Transcript of Presentation plone conference 2012
![Page 1: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/1.jpg)
Patterns
A library that aims to bring design and development together
vrijdag 19 oktober 12
![Page 2: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/2.jpg)
Developers and designers
http://www.flickr.com/photos/a_ninjamonkey/3565672226/
vrijdag 19 oktober 12
![Page 3: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/3.jpg)
Image: http://thebonehouse.ca
Developers and designers
vrijdag 19 oktober 12
![Page 4: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/4.jpg)
?vrijdag 19 oktober 12
![Page 5: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/5.jpg)
Why?Waarom?Pourquoi?
Por quê?
De ce?
Warum?
Hvorfor?
Miks?
Miksi?
Mengapa?
Varfor?
?Perché?
Hoekom?
Почему?
為什麼呢?
Zergatik?
¿Por qué?
vrijdag 19 oktober 12
![Page 6: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/6.jpg)
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
![Page 7: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/7.jpg)
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
![Page 8: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/8.jpg)
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
![Page 9: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/9.jpg)
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
![Page 10: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/10.jpg)
http://leaverou.github.com/prefixfree/
vrijdag 19 oktober 12
![Page 11: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/11.jpg)
vrijdag 19 oktober 12
![Page 12: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/12.jpg)
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
![Page 13: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/13.jpg)
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
![Page 14: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/14.jpg)
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user's browser.
Modernizr
http://modernizr.com
vrijdag 19 oktober 12
![Page 15: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/15.jpg)
Markup example
<div class=”pat-collapsible”><h3>Click me!</h3><p>Lorem ipsum dolor sit amet</p>
</div>
vrijdag 19 oktober 12
![Page 16: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/16.jpg)
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
![Page 17: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/17.jpg)
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
![Page 18: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/18.jpg)
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
![Page 19: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/19.jpg)
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
![Page 20: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/20.jpg)
Markup example
vrijdag 19 oktober 12
![Page 21: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/21.jpg)
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
![Page 22: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/22.jpg)
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
![Page 23: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/23.jpg)
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
![Page 24: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/24.jpg)
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
![Page 25: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/25.jpg)
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
![Page 26: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/26.jpg)
Injection
<a href="my-page.html" class="pat-inject" data-pat-inject="method: modal">My first AJAX
</a>
vrijdag 19 oktober 12
![Page 27: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/27.jpg)
Injection
<a href="my-page.html" class="pat-inject" data-pat-inject="method: self-healing">My first AJAX
</a>
vrijdag 19 oktober 12
![Page 28: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/28.jpg)
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
![Page 29: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/29.jpg)
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
![Page 30: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/30.jpg)
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
![Page 31: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/31.jpg)
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
![Page 32: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/32.jpg)
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
![Page 33: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/33.jpg)
Developers and designers
vrijdag 19 oktober 12
![Page 34: Presentation plone conference 2012](https://reader034.fdocuments.in/reader034/viewer/2022051314/54bf85884a795949518b456d/html5/thumbnails/34.jpg)
www. p a t t e r n s l i b . c o m
vrijdag 19 oktober 12