Download - Community Code: SCircles
![Page 1: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/1.jpg)
COMMUNITY CODES-CIRCLES
![Page 2: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/2.jpg)
AGENDA
· THE TEAM
· WHAT IS S-CIRCLES?
· THE PERSPECTIVE
· CODING SESSION
· LIVE DEMO
· QUESTIONS
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 3: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/3.jpg)
THE TEAM
MAX WIDDRA· Occupation: Art Director at WINCOMMUNICATION (http://www.wincommunication.de)
·Specialized in: Web, interface and editorial-design, User Experience
· Tools: Photoshop, Illustrator, Indesign, mindmaps
· Online projects since 2001
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 4: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/4.jpg)
THE TEAM
BASTIAN HAUSTEIN· CEO of source lounge(http://www.source-lounge.de)
· Works mainly as consultant
· Uses PHP, MySQL, HTML and JavaScript but isspecialized in HTML5 and software architecture
· Loves to be a „front end freak“, giving modern apps the feeling of being native, but even cooler ;-)
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 5: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/5.jpg)
THE TEAM
TOBIAS UHLIG· Woking fulltime with the Sencha Frameworks since May 2007
· User Interface engineer at Refined Labs for the last 1.5 years (http://www.refinedlabs.com/en/)
· Extthemes.com
· fieldmanager
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 6: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/6.jpg)
WHAT IS S-CIRCLES
WELCOME TO OUR SOCIALMEDIA EXPERIMENT· S-Circles is a prototype of a brand new community platform
· The idea of the name: custom subdomains like Tobias-Uhlig.sCircles.net→
· Users shall use it everywhere with native support for their environment ( Ext JS 4 + Sencha Touch Version)
· S-Circles communities can exist in the open space but we will focus usage on company intranets
· Development still in progress (beta is scheduled for the end of 2011)
·Long TODO List including connecting to other neworks that offer API access, webinars (Video Chat), an own API, ST 2 version + Phonegap to upload fotos, ...
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 7: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/7.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 8: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/8.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 9: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/9.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 10: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/10.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 11: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/11.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 12: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/12.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 13: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/13.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 14: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/14.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 15: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/15.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 16: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/16.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 17: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/17.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 18: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/18.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 19: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/19.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 20: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/20.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 21: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/21.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 22: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/22.jpg)
THE PERSPECTIVE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 23: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/23.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE· To keep it simple, we are not using the Ext JS MVC Pattern
· The first structure:
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 24: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/24.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE· We start with an Ext Window
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 25: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/25.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE· The Custom Component
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 26: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/26.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE· The Custom Component
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 27: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/27.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 28: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/28.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 29: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/29.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 30: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/30.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 31: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/31.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 32: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/32.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 33: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/33.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 34: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/34.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 35: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/35.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 36: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/36.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 37: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/37.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 38: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/38.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 39: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/39.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 40: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/40.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE· Contact Icons
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 41: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/41.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE· Custom Positions
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 42: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/42.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 43: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/43.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 44: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/44.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 45: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/45.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 46: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/46.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE· Contact Icons mouseenter, mouseleave→
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 47: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/47.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 48: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/48.jpg)
CODING SESSION
SO, LET'S BUILD A CIRCLE· Drag & Drop
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 49: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/49.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 50: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/50.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 51: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/51.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 52: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/52.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 53: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/53.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 54: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/54.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 55: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/55.jpg)
CODING SESSION
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 56: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/56.jpg)
LIVE DEMO
· Ext JS Version: http://circles.source-lounge.de (Webkit only!)
· Sencha Touch Version: http://circles.source-lounge.de
· Sencha Touch Version for non mobile device: http://circles.source-lounge.de/mobile/SCirclesMobile/app/frame_debug.html
· Coding Session: http://circles.source-lounge.de/SenchaCon/Circles/
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
![Page 57: Community Code: SCircles](https://reader033.vdocuments.net/reader033/viewer/2022061111/54544b28af795904308b5524/html5/thumbnails/57.jpg)
QUESTIONS?
Sencha Forum Topic: http://www.sencha.com/forum/showthread.php?152143
Via S-Circles soon!
S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.