DotNetNuke 6 underwent a major shift in both philosophy and implementation for the user interface of the built-in controls and modules. In this session you will learn about what has changed in the user interface (HTML, CSS, and JavaScript), and how you can take advantage of it in your modules, skins, and implementations. Learn about the new resources to take advantage of, and the old "best practices" that have been changed and updated.

1. DotNetNuke 6 UI/UX Patterns
Brian Dukes
Chief Software Architect
Engage Software
1 Company Confidential

2. About Me
2 Company Confidential

3. About Me
 Chief Software Architect at Engage Software
 DotNetNuke Developer since 2005
 Microsoft Certified Professional Developer
 Professional DNN 6 Form Pattern Implementer
3 Company Confidential

4. Agenda
 What’s new?
 What’s changed?
 How’s it done?
4 Company Confidential

5. What’s New?
5 Company Confidential
5

6. What’s New?
 Semantic Markup
 CSS Classes
 Tabs
 Panels
 Buttons
 Tooltips
 Dialogs
 Messages and Validation
 Icons
6 Company Confidential

7. What’s New?
To the Web!
(Demo Time)
7 Company Confidential

8. What’s Changed?
8 Company Confidential
8

9. What’s Changed?
 CSS classes and form markup
• Default.css provides default styles for you to take advantage of
 JavaScript goodies
• Common plugins
• jQuery UI
• Expectation that you can wire up some JavaScript if you need
to
 Expect better markup from core modules
 Expect to butt heads with default.css, that’s okay
• Textbox widths
9 Company Confidential

10. How’s it done?
10 Company Confidential
10

11. How’s it done?
To the Web!
(Demo Time)
11 Company Confidential

12. Questions
12 Company Confidential
12

13. “Engage!”
Oh yes we did. Free t-shirts at our booth.
13 Company Confidential
13