DotNetNuke Seattle Users Group
Download as PPTX, PDF0 likes903 views
The document discusses the evolution of DotNetNuke (DNN) leading up to version 6.2, highlighting key updates in user interface design, client resource management, and new social networking features. Major additions in DNN 6.2 include a journal module, member directory, social groups, private messaging, and a services layer for data interaction. The presentation concludes with insights into social images functionality, emphasizing the use of APIs and technologies such as jQuery to enhance user experience.
DotNetNuke Seattle Users Group
- 1. DNN 6.2 SOCIAL FEATURES & MODULE DEVELOPMENT SEADUG – 11 SEPT 2012 Scott McCulloch s.mcculloch@f5.com
- 2. Agenda • My Story • DotNetNuke, Ventrian & F5 Networks • The DotNetNuke 6 Evolution • Social, Services Layer, Client Resources Management, UI • Module Development • Social Images (Pinterest clone) • Q&A
- 3. DotNetNuke – My story • Started on IBUYSPY Workshop (December 24 th, 2001)
- 4. DotNetNuke – My story • Core contributions • Hierarchical pages (Tabs) • Users online • HttpModule pipeline • UrlRewriting • Books (co-author of first two DotNetNuke books) • Ventrian • Began as smcculloch.net (code samples) • News Articles, Simple Gallery, Property Agent • F5 • Joined in 2012 to help support their DotNetNuke environment (devcentral.f5.com)
- 5. DotNetNuke 6 – The story thus far… • DNN 6.0 (released July 2011) • Major conversion of codebase to C# • UI Improvements* • DNN 6.1 (released November 2011) • Mobile device support • Client resource management* • DNN 6.2 (released May 2012) • Social Networking* • Service Layer* • DNN 7 (released ???) • Improved default styling • Shift away from MVC to WEB API * discussed in this presentation
- 6. DotNetNuke 6.0 UI Improvements • New UI design patterns (http://uxguide.dotnetnuke.com/) • Combination of functionality and styling • Forms • Tabs, Panels, Labels, Dialogs, Tooltips, Grids & Input controls • Messages • Information, Success, Warning, Error • Vastly improves consistency between modules • Implementation • Add “dnnForm” class to the wrapper of your module • <div class=“dnnForm”> … Contents … </div> • Side notes • Primarily for forms
- 7. DotNetNuke 6.1 Client Resource Management • Problem • Explosive growth of page payloads has reduced performance • 25% larger each year! • (2010 –> 700kb, 2012 –> 1042kb, 2015 –> 2344 kb) • Centralised resource API • Allows module & skin developers to register JS & CSS scripts • Result • Reduce size of resources • Only deliver resources that are needed • Combine resources into few as possible • Enable instructions (http://bit.ly/UD7EN5) • Turn on in host -> Client Resource Management
- 8. DotNetNuke 6.2 Social Networking • Integrated social networking features into core • Not a port of active social, but built from the ground up • Not just new modules, an API! • Features • Journal module • Member directory • Social groups • Messaging • Notifications
- 9. DotNetNuke 6.2 Social Networking : Journal • Similar to Facebook, allows for Status updates posted by site users • Allows for text updates, photo + attachments • Set privacy per Journal post • Administrator : allow photo/attachments, posts per page and length of posts. • Developers: can post Journal items through Journal API • Journal is templated but not through module settings, you must use RESX to do it: • /DesktopModules/Journal/App_LocalResourceses/SharedResource s.resx
- 10. DotNetNuke 6.2 Social Networking : Journal
- 11. DotNetNuke 6.2 Social Networking : Member Directory • List members on the site • Provides comprehensive search for members • Social actions : message, friend, follow • Administrator : templates (item, alternate, popup), filters (user, profile, relationship) & sorting, members per page • Links to public user profile page
- 12. DotNetNuke 6.2 Social Networking : Member Directory
- 13. DotNetNuke 6.2 Social Networking : Social Groups • Social Groups are a public or private way of members to associate • Similar in theme but not execution to Facebook groups • Groups can have a group-specific Journal • Social Groups are now extended Security Roles – ie, existing DNN roles with more metadata
- 14. DotNetNuke 6.2 Social Networking : Social Groups
- 15. DotNetNuke 6.2 Social Networking : Messaging • Member to Member private messaging • Provides messages in conversation format, with replies linked together • Can send to groups or individuals • Developers: can post messages through API
- 16. DotNetNuke 6.2 Social Networking : Notifications • Special type of message that may be actionable • E.g. A comment is pending approval (Approve, Reject) • Developers: can post items through API
- 17. DotNetNuke 6.2 Services Layer • Service Layer – non visual way of interacting with the data stored in a DotNetNuke site • /DesktopModules/<ModuleName>/API/<Handler>.ashx/<Method> • Comprises of : • Authentication: ensuring person accessing data is authorised to do so • Core Functions : GetUserDetails, PosttoJournal, GetPageDetails • Extensible : Implement your own Service functions specific to an individual DotNetNuke Module • Side Notes : • Built on MVC – what does this mean for DNN 7 which is moving to web API?
- 19. DotNetNuke 6.2 Social Images
- 20. DotNetNuke 6.2 Social Images
- 21. DotNetNuke 6.2 Social Images
- 22. DotNetNuke 6.2 Social Images • Image sharing module inside DNN • Registered users may submit images • Images post to user’s journal • Images are viewable by all • Registered users may follow other users • Option to see images of those they are following • Notification sent to user that they are being followed
- 23. DEMO
- 24. DotNetNuke 6.2 Social Images : Key Technologies • jQuery Masonry (landing page scaffolding) • http://masonry.desandro.com/
- 25. DotNetNuke 6.2 Social Images : Key Technologies • jQuery/jQuery UI • Standard popup/UI was not good enough • Used for popup/transitions, client side calls to services framework • jQuery TimeAgo (http://timeago.yarp.com/) • Renders any date into auto-updating fuzzy timestamps (e.g. “4 minutes ago” or “about a day ago” ) • Refreshes automatically allowing you to do “heavy” caching
- 26. DotNetNuke 6.2 Social Images : Key Technologies • DNN Services Framework • Follow/Unfollow/IsFollowed • Configured to allow requests only from Social Images and to users that have “view” permission
- 27. DotNetNuke 6.2 Social Images : Journal API • Submitted to user’s journal when an image is added • Find your journal type (Journal_Type table) • 32 different journal types (I used “Photo”) • Creating custom types is discouraged • See open source blog module for complete code • Can also post from the client through the Services Framework API
- 28. DotNetNuke 6.2 Social Images : Future Ideas • Usability • Infinite scroll • http://masonry.desandro.com/demos/infinite-scroll.html • User interaction • “Like” image • User Boards • “Pin” other user images to your own repository • Comments • Performance • Thumbnail caching • Object caching
- 29. DotNetNuke 6.2 Social Images : Further Resources • DNN 6 Wiki (http://www.dotnetnuke.com/Resources/Wiki.aspx) • Specifically, “quick starts” • Services framework getting started (http://bit.ly/PfCXx4) • See also, framework security (http://bit.ly/Okc2Bs) • VS 2012 Templates (http://bit.ly/U3Bk3J) • DotNetNuke 7 CTP (http://bit.ly/SCbU22) • Biggest tip: read core code!
- 30. Questions?