dotnetnuke seattle users group
Post on 20-May-2015
597 Views
Preview:
DESCRIPTION
TRANSCRIPT
Scott McCullochs.mcculloch@f5.com
DNN 6.2 SOCIAL FEATURES & MODULE DEVELOPMENT
SEADUG – 11 SEPT 2012
2© F5 Networks, Inc.
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© F5 Networks, Inc.
DotNetNuke – My story
• Started on IBUYSPY Workshop (December 24th, 2001)
4© F5 Networks, Inc.
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© F5 Networks, Inc.
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© F5 Networks, Inc.
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© F5 Networks, Inc.
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© F5 Networks, Inc.
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© F5 Networks, Inc.
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/
SharedResources.resx
10© F5 Networks, Inc.
DotNetNuke 6.2 Social Networking : Journal
11© F5 Networks, Inc.
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© F5 Networks, Inc.
DotNetNuke 6.2 Social Networking : Member Directory
13© F5 Networks, Inc.
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© F5 Networks, Inc.
DotNetNuke 6.2 Social Networking : Social Groups
15© F5 Networks, Inc.
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© F5 Networks, Inc.
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© F5 Networks, Inc.
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?
18© F5 Networks, Inc.
Part IISocial Images
19© F5 Networks, Inc.
DotNetNuke 6.2 Social Images
20© F5 Networks, Inc.
DotNetNuke 6.2 Social Images
21© F5 Networks, Inc.
DotNetNuke 6.2 Social Images
22© F5 Networks, Inc.
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© F5 Networks, Inc.
DEMO
24© F5 Networks, Inc.
DotNetNuke 6.2 Social Images : Key Technologies• jQuery Masonry (landing page scaffolding)
• http://masonry.desandro.com/
25© F5 Networks, Inc.
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© F5 Networks, Inc.
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© F5 Networks, Inc.
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© F5 Networks, Inc.
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© F5 Networks, Inc.
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© F5 Networks, Inc.
Questions?
31© F5 Networks, Inc.
devcentral.f5.com
facebook.com/f5networksinc
linkedin.com/companies/f5-networks
twitter.com/f5networks
youtube.com/f5networksinc
top related