Dfg Intranet Development

DFG Intranet Development

Using the DotNetNuke (DNN) Content Management System

Today’s Presentation High-Level Design

Makes Use of the Standard DTS Templates Consistent Look-and-Feel Throughout the Entire Site Cascading Style Sheets Leveraging Learning

Ergonomic Considerations Human Factors Based Site Organization Efficient Use of Real Estate Consistent Navigation Minimize the need to scroll Make your site accessible (Section 508 Compliance)

Using a Content Management System (CMS) Enforcing Standards Access and Editing Control User-Friendly “Semi-Technical” Interface Numerous Out-of-the-Box Features

Today’s Presentation Intranet Content Considerations

Who is your audience? Internal staff The rest of DFG

Why do they come to your area of the site? What do they want to accomplish there? What resources do they need to locate? What is the best way to organize your content? What is the best way to present your content? How do you determine if you’ve succeeded?

Today’s Presentation DotNetNuke Overview

Logging In What to do if you forget your password Showing/Hiding the Control Panel Switching Between View/Edit Modes Page Settings vs. Module Settings

Adding a New Page Page Name Page Title Parent Page “Include in Menu” Checkbox Setting View Permissions Setting Edit Permissions Saving/Updating the Page

Today’s Presentation Building Left-Hand Navigation

Adding the “I Need To…” Module (SSILinks) Adding the “Additional Links” Module (SSILinks)

Adding Center Content Choosing the right module Overview of available modules Adding a new module

Today’s Presentation The Default Module (Text/HTML)

Editing the Module Settings Editing the Module’s Contents Adding Links Inserting Images Adding New Text Pasting Existing Text

Today’s Presentation Remaining Major DNN Modules

Rounded Corner Module Tabbed Module Announcements Event Calendar Frequently Asked Questions (FAQ)

Additional Modules RSS Feeds

Reusing an Existing Module

Today’s Presentation Accessibility (section 508 compliance)

What is accessibility Advantages of accessibility It’s the Law! Our role Be simple and intuitive 10 accessibility tips Creating accessible documents Conclusion

DotNetNuke Resources

High-Level Design

DFG Intranet High-Level Design Search Box

Left-Nav (links)

Center Content Area (multiple content types)

Top-Nav (tabs)

Sub-Nav (links)

Login LinkTop Skip-Nav

Intranet Logo

DFG Intranet High-Level Design

Back to Top Skip-Nav

Terms of Use

Privacy Statement

Ergonomic Considerations

DFG Intranet Ergonomic ConsiderationsTop-Nav Tabs and Sub-Nav Links

Top-Nav (tabs)

Sub-Nav (links)

There are Currently 43 Destinations Reachable Just By Using the Tabs and the Sub-Nav Links!

Left-Nav (links)

DFG Intranet Ergonomic ConsiderationsLeft-Nav Links (“I Need To…” and “Additional Links”)

There are Currently 24 Destinations Reachable from This Page Just By Using the Left-Nav Links!

Left-Nav (links)

DFG Intranet Ergonomic ConsiderationsTop-Nav and Left-Nav Tabs and Links

In total, there are Currently 67 Destinations Reachable from This Page Just By Using the Top-Nav and Left-Nav Links!

Top-Nav (tabs)

Sub-Nav (links)

DFG Intranet Ergonomic ConsiderationsCenter Content Area

Center Content Area (multiple content types)

Accessibility

What is Accessibility?

"Accessible Design" calls for an Intranet that can be used as effectively by those whose physical, mental, or environmental conditions limit their performance as by anyone else. Designing and building accessible sites not only benefits individuals with disabilities, but also improves the overall usability of the site for everyone.

Advantages to Accessibility

Minimizes roadblocks to any employee in benefiting from our Intranet resources

Makes it easier for everyone to use Requires less work to maintain Improves search engine optimization It’s the law!

The Law “In order to improve accessibility of existing

technology, and therefore increase the successful employment of individuals with disabilities, particularly blind and visually impaired and deaf and hard-of-hearing persons, state governmental entities, in developing, procuring, maintaining, or using electronic or information technology, either indirectly or through the use of state funds by other entities, shall comply with the accessibility requirements of Section 508 of the Rehabilitation Act of 1973, as amended (29 U.S.C. Sec. 794d), and regulations implementing that act as set forth in Part 1194 of Title 36 of the Federal Code of Regulations.”

Application of the Law

The Rehabilitation Act Amendments (Section 508)

“…agencies must ensure that this technology is accessible to employees and members of the public with disabilities…”

Our Role Make our site accessible Become an advocate for accessibility in

the department Gain an appreciation for Web accessibility

by understanding the user perspective Be as knowledgeable as possible on the

subject when validating for accessibility Test with people with disabilities (including

Blackberryholics)

Be Simple and Intuitive Do not design something differently from

user expectations just to be different Eliminate unnecessary complexity Maintain consistency from page to page Provide feedback to the user Consider multiple browser compatibility

Ten Accessibility Tips Images and animations: Use the alt attribute

to describe the function of each visual. Multimedia: Provide captioning and

transcripts of audio, and descriptions of video. Hypertext links: Use text that makes sense

when read out of context. For example, avoid "click here."

Page organization: Use headings, lists, and consistent structure.

Page construction: Avoid Frames and Tables as much as possible

Ten Accessibility Tips (cont.) Graphs and charts: Summarize or use the

longdesc attribute. Scripts, applets, and plug-ins: Provide

alternative content in case active features are inaccessible or unsupported.

Style flexibility: Make the page equally readable with styles turned off.

PDA access: Remember that some users will be accessing the Intranet via Blackberry!

Check your work: Use tools, checklist, and guidelines at validator.w3.org, www.w3.org/TR/WCAG, www.cynthiasays.com and webxact.watchfire.com

Accessible Word Docs & PDFs Review and complete the Document Properties Apply tags to the document Use tooltips and correct tab order for form fields Create alternative text for figures, images,

graphs and tables Add bookmarks if document is over 10 pages Use proper tags for table headers and rows Entire document must flow in a logical reading

order (top to bottom, left to right) No scanned images of documents—real text!

Conclusion We have an obligation to create an

accessible Intranet It’s much easier to do so if you plan this

from the beginning Not much more time nor effort is required Accessibility benefits everyone!

Using a Content Management System

How Does a CMS Help?

Enforces look-and-feel standards throughout the site

Enables the average content owner to maintain their content

Easily controls viewing and editing access Avoids “islands of information” Simplifies site-wide modifications

Enforces Look-and-Feel Standards

Provides a universal template for all pages Limits components/containers to agreed-

upon standards Helps conform navigation options Helps control font choices, font sizes, font

colors Limits and enforces styles

Simplifies Content Management

Makes editing pages as easy as editing Word documents

Maximizes content management; minimizes presentation management

Increases likelihood that content will remain current

Controls Access

Roles define viewing and editing access Assignment of users to roles is simple and

straightforward Provides content owners with clear

parameters, i.e. what is editable, what is not

Reduces “Islands of Information”

Create content in one location; propagate to many locations

Avoids problems with static pages Helps avoid content synchronization

issues

Quick Site-Wide Modifications

Change content one place, updates everywhere

Change template one place, updates everywhere

Change style one place, updates everywhere

Conclusion

Enforces standards Helps keep content current Avoids content redundancy and

synchronization issues Advantages of dynamic vs. static content

Intranet Content Considerations

Intranet Content ConsiderationsWho is Your Audience?

Internal Staff Who will be coming to your site? What interest groups do they represent? How often will they make use of your site?

The Rest of DFG What others in the department might be interested? Who else might have some involvement in your

programs or projects?

Intranet Content ConsiderationsWhy Do Staff Come?

What resources do staff need to locate that are otherwise hard to find or time-consuming to share?

What documents can you offer on-line to avoid clogging email inboxes and hogging bandwidth?

What methods of collaboration and cooperation are optimized in an Intranet environment?

What can you tell each other about who you are and what you do that will help everyone feel more connected and invested?

Intranet Content ConsiderationsWhy Do Others Come?

What do you want the rest of the department to know about who you are?

What do you want the rest of the department to know about what you do?

What resources can you offer for everyone’s benefit?

What do you do that may affect what they do?

Intranet Content ConsiderationsWhat Do They Want to Accomplish?

Identify what tasks those who come to your site are most likely to want to accomplish there

Maximize the likelihood that they will be able to accomplish those tasks quickly, easily and fully

Organize content in such a way that makes it intuitive to find things

Minimize the number of steps it takes to reach and access related resources

Find out what you can do to keep people coming back

Intranet Content ConsiderationsWhat Resources To They Need to Locate?

What documents, maps, photos, spreadsheets, audio or video files do you want to make available?

What external Web sites need to be regularly accessed?

What other areas of the Intranet do I want to connect to?

What collaborative resources (calendar, blog, Wiki, document library) would be productive?

Intranet Content ConsiderationsHow Should Your Content be Organized?

Prioritize tasks and prominently display the most common or important

Keep related resources together in one place Divide related resources into intuitive groupings Redundancy is fine if it improves efficiency Maintain consistency throughout your site Keep it simple--usability studies confirm this!

Intranet Content ConsiderationsHow Should Your Content Be Presented?

Keep the content that is accessed the most in the most prominent position--top or left side

Choose the best module/container for the type of content it will contain

Try and get into the mind-set of your visitors in order to determine “what” and “where”

Avoid unnecessary fonts, colors, styles, etc.—keep it simple, consistent and attractive

Intranet Content ConsiderationsHow Do I Know If I’ve Succeeded

Ask! Keep your ear to the ground Provide a feedback or contact link on your area

of the site, requesting questions or comments Use the “Survey” module to solicit feedback Request statistics reports from ITB

DotNetNuke Overview

DotNetNuke OverviewLogin Link

DotNetNuke Overview Login Link

DotNetNuke Overview Login Account

Note:

You must have a GEO account in order to log in to DotNetNuke. You can obtain an account by having your supervisor submit a “Request New DFG Account” form to the Help Desk. The form is available by clicking the top “I Need To…” link on the Help Desk’s Intranet home page.

DotNetNuke Overview Login Page

DotNetNuke Overview Forgot Password?

DotNetNuke Overview Logged In

DotNetNuke Overview Control Panel - Left Side

DotNetNuke Overview Control Panel - Center

DotNetNuke Overview Control Panel - Right Side

DotNetNuke Overview Editing and Settings Icons

DotNetNuke Overview Page Settings vs. Module Settings

Adding a New Page

Adding a New PageAdd Icon

Adding a New PageEditing the Page Settings

Adding a New PageSaving the Page Settings

Adding a New PageNew Blank Page

Building Left-Hand NavigationAdding the “I Need To…” Links

Adding the “I Need To…” Links Adding the “I Need To…” Module

Adding the “I Need To…” Links Selecting the SSILinks Module

Adding the “I Need To…” Links Adding Links to the “I Need To…” Module

Adding the “I Need To…” Links Adding Link to an External Web Site

Adding the “I Need To…” Links Link Added

Adding the “I Need To…” Links Adding a Link to Another Intranet Page

Adding the “I Need To…” Links The Intranet Page Hierarchy

Adding the “I Need To…” Links Adding a Link to Another Intranet Page

Adding the “I Need To…” Links Adding a Link to a File

Adding the “I Need To…” Links Selecting the Correct File Directory

Adding the “I Need To…” Links Uploading a File

Adding the “I Need To…” Links Saving Your File Link

Adding the “I Need To…” Links File Link Created Successfully

Building Left-Hand NavigationAdding the “Additional Links” Module

Adding the “Additional Links” Module

Adding Center Content

Adding Center Content Choosing the Right Module

Adding Center Content Available Modules

Adding Center Content Announcements Module

AnnouncementsUsed to announce time-sensitive events,

news, meetings, problems, etc.Announcements disappear when they expire Individual announcement can link to a

document or Web site

Adding Center Content Events Module

EventsCreate a shared calendar for posting

meetings, events, vacations, RDOs, etc.Month, week or list viewHandles recurring eventsEmail notificationsLink events to documents or Web sites

Adding Center Content FAQs Module

FAQsShort for “Frequently Asked Questions”Display common questions and their answersClick on question to reveal answerClick again to hide answerQuestions can be organized by category

Adding Center Content Feedback Module

FeedbackSolicit feedback about your site or about

specific issuesSends feedback as email to designated

recipient(s)Can set up feedback categories in advanceDisplay all feedback in report format

Adding Center Content Form Master Module

Form MasterCreate powerful, full-featured Web formsAdd edit boxes, drop-down lists, checkboxes,

radio buttons, etc.Submit form data via email, save it to a

database, or bothExcellent reporting capabilities from the

database

Adding Center Content News Feeds (RSS) Module

News Feeds (RSS)RSS = “Really Simple Syndication”Dynamically display news from any RSS

sourceDynamically display document collections

from the DFG Document LibraryTailor news feeds by typeLimit news feeds by number

Adding Center Content SSILinks Module

SSILinksSSI = “Server-Side Include”Used for all Left-Navigation links (“I Need

To…” and “Additional Links”)Can link to other Intranet pages, documents

or external Web sites

Adding Center Content Survey Module

SurveyUse to create simple surveys for people to

complete and submitCreate either yes/no or multiple-choice

questionsResults emailed to specified recipient(s)

Adding Center Content Text/HTML Module

Text/HTMLDefault module on all newly-created pagesUse for text, links, images, etc.Can contain any HTMLCan contain JavascriptBasis for creating Rounded Corner containersBasis for creating Tabbed Module containers

Adding Center Content What’s New/What’s Hot Module

What’s New/What’s HotUsed only on DFG Intranet Home pageDynamically changes based on Intranet

activity“What’s New” automatically displays all newly

added or modified pages“What’s Hot” automatically displays the most

frequently visited pages

The Default Module (Text/HTML)

Text/HTML ModuleEdit Settings Link

Text/HTML ModuleEditing the Module Settings

Text/HTML ModuleSaving the Module Settings

Text/HTML ModuleEdit Text Link

Text/HTML Module Editing the Contents

Text/HTML Module Rich Text Format

Text/HTML Module HTML “Source” Format

Text/HTML Module Formatting Text in the Rich Text Editor

Text/HTML Module Unformatted Text

Text/HTML Module Modifying Text Format

Text/HTML Module Selecting Text Format

Text/HTML Module Text Format Modified

Text/HTML Module Creating a Hyperlink

Text/HTML Module Creating a Hyperlink (continued)

Text/HTML Module Hyperlink Created

Text/HTML Module Save Text Formatting Changes

Text/HTML Module Text Formatting Complete

Text/HTML Module Inserting Images

Text/HTML Module Saving Your Changes

Text/HTML Module Image Successfully Added

Text/HTML Module Adding Additional Text

Text/HTML Module Copying and Pasting Web Content

Text/HTML Module Viewing a Web Page’s Source Code (HTML)

Text/HTML Module Copying a Web Page’s Source Code (HTML)

Text/HTML Module Pasting a Web Page’s Source Code (HTML)

Text/HTML Module Saving a Web Page’s Source Code (HTML)

Remaining Major DNN Modules

Adding a Rounded CornerContainer

Adding Center Content Adding a Rounded Corner Container

Adding Center Content Adding Link Lists to a Rounded Corner Container

Adding Center Content Adding a Link to an Email Address

Adding Center Content Adding Link Lists to a Rounded Corner Container

Adding a Tabbed ModuleContainer

Adding Center Content Adding a Tabbed Module Container


The default is a two-column display on each tab. You can force a 1-column display, 3-column display, or (if you have short labels) more, but using curly brackets and specifying the column number between them. Locate this tag before the tab name.

Adding an Anouncements Module

Adding Center Content Adding an Announcements Module

Adding an Event Calendar

Adding Center Content Adding an Event Calendar


When you hover your mouse over the event, its description pops up


If you click on the event, the full details appear

Adding a FAQ Module

Adding Center Content Adding a FAQ Module

Additional Modules

Adding Center Content Adding an RSS Feed Module


This is the URL in the “Location” field:

https://nrmsecure.dfg.ca.gov/documents/RSS/SecureRssHandler.ashx?Cat=LSAHeadquarters&Sub=TechSummariesArchives&ItemLimit=7


https://nrmsecure.dfg.ca.gov/documents/RSS/SecureRssHandler.ashx (URL to the Document Library)

?Cat=LSAHeadquarters (limit to a certain category)

&Sub=TechSummariesArchives (limit to a certain sub-category)

&ItemLimit=7 (Limit to a certain number of items)

Here’s how it breaks down:

Reusing Existing Modules

Reusing Existing ModulesModule Default

Reusing Existing ModulesAdd Existing Module

Reusing Existing ModulesSelect Page With Existing Module

Reusing Existing ModulesSelect Correct Module

Reusing Existing ModulesChoose Its New Location

Reusing Existing ModulesModule Added


DotNetNuke is “open source” software which means that it is available at no charge to anyone who wants to use it. Having the largest install base of any open source content management systems, it is widely supported throughout the Web. The main Website at www.dotnetnuke.com is a rich source of information and support!


You can also join the DotNetNuke forums at:

http://www.dotnetnuke.com/Community/Forums/tabid/795/Default.aspx


You can join the DotNetNuke user group at:

http://www.dotnetnuke.com/Community/UserGroups/tabid/1074/Default.aspx


The DotNetNuke FAQ is located at:

http://www.dotnetnuke.com/Resources/Knowledge/FrequentlyAskedQuestions/tabid/546/Default.aspx

DotNetNuke ResourcesForms Master Module

For those using the Forms Master module, here is a good resource, the Forms Master User Guide:

http://www.code5systems.com/default.aspx?tabid=211


For those using the Forms Master module, here is a good resource, the Forms Master User Guide:

http://www.code5systems.com/default.aspx?tabid=211

Accessibility Resources

http://www.webtools.ca.gov/Accessibility/ http://www.webaim.org/ http://www.digital-web.com/articles/accessibility_from_th

e_ground_up/ http://www.hisoftware.com/uaen/WebHelp/uaen.htm http://www.webreference.com/authoring/design/usability/

accessibility/index.html http://jimthatcher.com/whatnot.htm http://www.adobe.com/accessibility/

Dfg Intranet Development

Design

Transcript of Dfg Intranet Development