DotNetNuke Seattle Users Group

31
Scott McCulloch [email protected] DNN 6.2 SOCIAL FEATURES & MODULE DEVELOPMENT SEADUG – 11 SEPT 2012

description

Presentation at the DotNetNuke Seattle Users Group in September 2012. The presentation features a walkthrough of the social features in DotNetNuke and building a module on the DotNetNuke Social API.

Transcript of DotNetNuke Seattle Users Group

Page 1: DotNetNuke Seattle Users Group

Scott [email protected]

DNN 6.2 SOCIAL FEATURES & MODULE DEVELOPMENT

SEADUG – 11 SEPT 2012

Page 2: DotNetNuke Seattle Users Group

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

Page 3: DotNetNuke Seattle Users Group

3© F5 Networks, Inc.

DotNetNuke – My story

• Started on IBUYSPY Workshop (December 24th, 2001)

Page 4: DotNetNuke Seattle Users Group

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)

Page 5: DotNetNuke Seattle Users Group

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

Page 6: DotNetNuke Seattle Users Group

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

Page 7: DotNetNuke Seattle Users Group

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

Page 8: DotNetNuke Seattle Users Group

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

Page 9: DotNetNuke Seattle Users Group

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

Page 10: DotNetNuke Seattle Users Group

10© F5 Networks, Inc.

DotNetNuke 6.2 Social Networking : Journal

Page 11: DotNetNuke Seattle Users Group

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

Page 12: DotNetNuke Seattle Users Group

12© F5 Networks, Inc.

DotNetNuke 6.2 Social Networking : Member Directory

Page 13: DotNetNuke Seattle Users Group

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

Page 14: DotNetNuke Seattle Users Group

14© F5 Networks, Inc.

DotNetNuke 6.2 Social Networking : Social Groups

Page 15: DotNetNuke Seattle Users Group

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

Page 16: DotNetNuke Seattle Users Group

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

Page 17: DotNetNuke Seattle Users Group

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?

Page 18: DotNetNuke Seattle Users Group

18© F5 Networks, Inc.

Part IISocial Images

Page 19: DotNetNuke Seattle Users Group

19© F5 Networks, Inc.

DotNetNuke 6.2 Social Images

Page 20: DotNetNuke Seattle Users Group

20© F5 Networks, Inc.

DotNetNuke 6.2 Social Images

Page 21: DotNetNuke Seattle Users Group

21© F5 Networks, Inc.

DotNetNuke 6.2 Social Images

Page 22: DotNetNuke Seattle Users Group

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

Page 23: DotNetNuke Seattle Users Group

23© F5 Networks, Inc.

DEMO

Page 24: DotNetNuke Seattle Users Group

24© F5 Networks, Inc.

DotNetNuke 6.2 Social Images : Key Technologies• jQuery Masonry (landing page scaffolding)

• http://masonry.desandro.com/

Page 25: DotNetNuke Seattle Users Group

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

Page 26: DotNetNuke Seattle Users Group

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

Page 27: DotNetNuke Seattle Users Group

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

Page 28: DotNetNuke Seattle Users Group

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

Page 29: DotNetNuke Seattle Users Group

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!

Page 30: DotNetNuke Seattle Users Group

30© F5 Networks, Inc.

Questions?

Page 31: DotNetNuke Seattle Users Group

31© F5 Networks, Inc.

devcentral.f5.com

facebook.com/f5networksinc

linkedin.com/companies/f5-networks

twitter.com/f5networks

youtube.com/f5networksinc