Upload
siarhei-barysiuk
View
45.958
Download
0
Tags:
Embed Size (px)
DESCRIPTION
The presentation we gave together with Mikita Mikado at The First European Day of DotNetNuke in Paris. It show how you can create a nice navigation menu for DotNetNuke.
Citation preview
1. European Day of DotNetNuke @ Paris - Session
Pure CSS skinning with Menu Box and Menu Factory
Mikita MikadoSerge Barysiuk
6
2
Coding Staff Inc.
Mikita MikadoCEO, Coding Staff Inc.
Expertise: DNN Skinning UI Design Online Marketing
Serge BarysiukCTO, Coding Staff Inc.
Expertise: JavaScript (jQuery,
qooxdoo, …) RIA Development Application Architecture
3
Agenda
• A new menu platform concept• Menu Box how it is• A menu theme under the hood and how to
create your own
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
4
DotNetNuke design concept
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
• Ability to install a new design with no coding• Separation between CMS and site design• Design is page-specific• Control design of every element of the site
with skins and containers
5
What are the parts of the skin?
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Containers
Navigation
Layout
6
DotNetNuke skin parts
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Skins Containers
+ +Navigation
7
DotNetNuke skin parts
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Skins & Containers are reusable.
Navigation is a part of the skin.
8
What if we would have…
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Skins Containers
+ +Navigation
9
… it would be handy.
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
… and we decided to go custom. Why?!
10
Problems with existing solutions
• DNN navigation is time consuming to skin;• DNN Navigation is not SEO friendly, not
optimized and not flexible;• Third party modules are too developer-centric
and not-easy to integrate and create a theme.
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
11
5 ideas behind the platform
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
5
5 the most important ideas behind the platform.
12
5 ideas behind the platform
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
1
Menu is a separate part of the skin.
13
5 ideas behind the platform
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
2
Menu theme could be shared and easily installed without a need to
be a programmer.
14
5 ideas behind the platform
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
3
High extensibility in terms of structure, presentation and behavior.
15
5 ideas behind the platform
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
4
Easy themes creation reusing thousands of scripts and menus
across the web.
16
5 ideas behind the platform
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
5
… and finally an open platform to build state of the art menus.
17
Meet Menu Box
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
18
Menu Box Motto
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
There are no limitations but your own imagination.
19
Menu Box Concept
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
ThemesBox
Put themes into the box.
20
Using the module as…
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
DNN Module Skins Object
21
Installing a theme
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
22
Using the module for…
• … main DNN navigation.• … sub navigation for inner pages.• … site map.• … page index.
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
23
Menu Theme
Menu theme under the hood
24
What is a theme?
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
+ +=Menu Theme Structure
(HTML)Presentation
(CSS)Behavior
(JS)
25
What is a theme?
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Structure(HTML)
Presentation(CSS)
Behavior(JS)
How theme is rendered.
How theme looks like.
How theme acts.
26
What is a theme?
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
css
html
images
js
skin.xml
CSS files used for the theme
HTML templates to render structure
Images used in the theme
JavaScript libraries used in the theme
Theme manifest file
27
Menu theme manifest
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Manifest file connects all them together.
Structure(HTML)
Presentation(CSS)
Behavior(JS)
Theme Manifest(skin.xml)
28
Menu theme manifest (skin.xml)
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Theme name and additional information
HTML templates declaration
JavaScript files and inline scripts declaration
CSS files declaration
Theme Manifest(skin.xml)
=
29Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
0 Theme meta info
30
Menu theme manifest (skin.xml)
<?xml version="1.0" encoding="utf-8"?>
<skin>
<skin_id>AnimatedDropdownMenu</skin_id>
<skin_image>skin_preview.png</skin_image>
<template_name>Animated Dropdown Menu</template_name>
<description>Drop down menus are a really convient way to fit a large menu into a really small initial space. This menu based on tutorial by www.clarklab.net. Note: This menu shows only top-level menu items.</description>
<default>false</default>
<version>1.0</version>
...
</skin>
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
General information about the theme
31
Menu themes management
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
32
Structure (HTML)
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
1 Structure (HTML)
33
Structure (HTML)
Main points:- Easy customizable- Easy understandable
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
34
Structure (HTML)
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
WrapperNode (Level 1)
Node (Level 2)
Node (Level 2)
Node (Level 2)
Node (Level 2)
Node (Level 1)
…
……
Node (Level 1)
WrapperTemplate.ascx
NodeTemplate.ascx
35
Structure (HTML)
<div class="<%= CssClass%>" id="<%= ClientContainerID %>">
<ul class="topnav">
<asp:repeater runat="server" id="Menu">
<ItemTemplate>
<uc:NodeItem runat="server" Node="<%# Container.DataItem %>“/>
</ItemTemplate>
</asp:repeater>
</ul>
</div>
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
WrapperTemplate.ascx
36
<li class='<%=(IsActive ? "current" : "") %>'>
<a href="<%= Node.NavigateURL %>"><%= Node.Text %></a>
<% if (HasChildren)
{%>
<ul class="subnav">
<asp:PlaceHolder runat="server" ID="phChildNodes"></asp:PlaceHolder>
</ul>
<%} %></li>
Structure (HTML)
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
NodeTemplate.ascx
Additional properties: IsLast, IsFirst, Level, Node.*
37
Registering renderer in manifest
<?xml version="1.0" encoding="utf-8"?>
<skin>
...
<html>
<renderer>html/WrapperTemplate.ascx</renderer>
</html>
...
</skin>
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
38
Structure (HTML)
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Done!
39
Presentation (CSS)
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
2 Presentation (CSS)
40
Presentation (CSS)
Main points:- No predefined CSS classes names- No any specific about the module, just CSS
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
41
Presentation (CSS)
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
css CSS files used for the theme
styles.css
theme.css
…
…
42
Presentation (CSS)
<?xml version="1.0" encoding="utf-8"?>
<skin>
...
<css>
<files>
<file>
<path>css/styles.css</path>
</file>
<file>
<path>css/theme.css</path>
</file>
</files>
</css>
...
</skin>
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
43
Presentation (CSS)
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Done!
44
Behavior (JS)
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
3 Behavior (JS)
45
Behavior (JS)
Main points:- No limits to particular JS library- Inline scripts support
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
46
Behavior (JS)
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
js JS scripts used for the theme
jquery.myplugin.js
jquery.hoverIntent.js
…
…
47
Behavior (JS)
<?xml version="1.0" encoding="utf-8"?>
<skin>
...
<js>
...
<files>
<file>
<path>js/jquery.myplugin.js</path>
</file>
<file>
<path>js/jquery.hoverIntetn.js</path>
</file>
</files>
</js>
...
</skin>
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
48
Behavior (JS)
<?xml version="1.0" encoding="utf-8"?>
<skin>
...
<js>
<startup_scripts>
<script>
<data><![CDATA[
$(function(){
$("#{container_id}").myplugin();
});
]]></data>
</script>
</startup_scripts>
<files>...</files>
</js>
...
</skin>
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Startup scripts is a general way to initialize your menu
49
Behavior (JS)
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Done!
50
What we got so far…
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Structure(HTML)
Presentation(CSS)
Behavior(JS)
Theme Manifest(skin.xml)
51
Let’s pack them together
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
css
html
images
js
skin.xml
MyTheme
MyTheme.zip
52
Custom Menu Theme
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Finish!
53
Developers only?
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
But… what if I’m a designer, not a developer?
Can I still use it?
54
Good news for you!
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Menu Factory - Online menu theme builder.
55
Menu Factory service
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
56
Menu Factory service
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
http://factory.codingstaff.com
57
More sugar
• Localization support– Apollo Localization– Ealo Localization components– Adequation Localization Extensions– Locopon DSLocalizator
• Conditional comments (for scripts, styles)• Side navigation mode• A set of built themes• Good documentation to get started
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
58
… and even more
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
It’s free and it’s going to be open sourced!
59
More information
• http://www.codingstaff.com• http://www.codingstaff.com/blog• http://factory.codingstaff.com• http://twitter.com/codingstaff
Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
60Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory
Thank you!