Monday, March 03, 2008

DotNetNuke (DNN): An ASP.NET CMS

Here are the bookmarks that have been helping me work with DNN over the past 3 months:

Let's Get It Started
How to install DotNetNuke 4.3.x
DotNetNuke Quick Start Guide Flash Videos | DNN Creative Magazine
Configuring DotNetNuke® before installation

DOT net nuke hosting - Install It! - DotNetNuke
http--www.dnncreative.com-Forum-tabid-88-forumid-13-postid-2127-view-topic-Default.aspx

DNN Improvements
How to install the FCKEditor in DotNetNuke. Text Editor.

DNN Modules (aka Plug-Ins, Widgets, Features, Add Ons)

Snowcovered.com : FavIcon by Terence Golla: Give your portals a professional customized appearance by adding a unique favicon file used by Internet Explorer and other browsers to display an icon next to your site URL in the address bar and faviortes folder. FavIcon also includes friendly security URLs like /Login, /Admin and /Logout.
Snowcovered.com : Free Tell A Friend/Social Web Site Module by Eric Shafer: This module allows you to cusomtize a mailto tag and various links and automatically inserts the current page URL.
Snowcovered.com : Testify! 1.0 by DNNDev.com: Easily display testimonials, reviews, comments, and quotes on your site in an attractive, professional, and highly flexible manner.
Snowcovered.com : Inventua HrefExchanger for DotNetNuke by Inventua: The Inventua HrefExchanger for DotNetNuke automatically swaps outgoing DotNetNuke URLs for friendly URLs, and incoming URLs for DotNetNuke URLs.
Snowcovered.com : Free 282 W3C Compliant CSS Containers by DotNetNukeContiners: 282 Containers in 141 Colors with Preview Images, W3C Compliant, CSS Only, No Images, SEO Search Engine Friendly
Snowcovered.com : Only $10 282 W3C Compliant CSS Containers by DotNetNukeContiners: 282 Containers in 141 Colors with Preview Images, W3C Compliant, CSS Only, No Images, Search Engine friendly
Snowcovered.com : MAS.ActionRedirect by Marcelo Sampaio: Tool to manage URL's to be redirected
Snowcovered.com : DNNMasters DNN SEO Pack (PA) by DNNMasters: If you want better Search Engine ranking you need KeepAlive, URL Rewrite, Custom 404 error, Custom Redirect, Friendly URL's. DNNMasters SEO Pack delivers all of it and more!
Ventrian Systems > Resources > Projects > Friendly Urls: DotNetNuke Modules, Skins, Skin Objects

Post to multiple sites

Multiple Website Management Test Home

Shadow: Inventua Web Site
Sharing Module data across multiple portals? > Nina's DotNetNuke Forums > eXtra Dimensions: Hey guys, I am currently evaluating DNN for a client... One requirement is as follows: I have multiple (parent) Portals. I develop a module that lists some content (for e.g. a list of restaurants and associated reviews of each restaurant).Now, I nee
Modules & Tools: DotNetNuke Modules and other DotNetNuke related downloads.
Installing DotNetNuke Portal for the first time!: Installing dnn for the first time [dotnetnuke] installing dotnetnuke portal for the first time!
multiple portals on same IIS server - ASP.NET Forums
still need help accessing dnn portal - ASP.NET Forums
Managing and Configuring DotNetNuke Portals as a Host Super User: How to manage and configure DotNetNuke portals. Assigning premium modules to a portal. How to configure site log, disk space, file types, skin upload, expiry date for each portal. DNN video tutorial.
Sharing Module data across multiple portals? > Nina's DotNetNuke Forums > eXtra Dimensions: Hey guys, I am currently evaluating DNN for a client... One requirement is as follows: I have multiple (parent) Portals. I develop a module that lists some content (for e.g. a list of restaurants and associated reviews of each restaurant).Now, I nee
EThuongmai > :: Products > Content Sharing > Product Information: DotNetNuke Modules Free Services Development Dot Net
DotNetNuke Portal Templates and the Site Wizard: How to use DotNetNuke Portal Templates and the Site Wizard. Covering creating and exporting a template. Installing a template using the site wizard and automatically when creating a portal. Using templates to transfer data from a localhost installation to a live website. Step by step DNN video tutorial.
Using DotNetNuke Portal Aliases: How to point multiple domain names to a portal. How to use portal alias when transferring a localhost installation to a live website. How to convert a child portal to a parent portal. Video tutorial covering DNN portal alias.
How to create DotNetNuke Portals (Parent and Child), DNN: Video tutorials. How to create parent and child portals using domains and sub-domains on a live website. Configuring DNS Nameserver settings, Host Headers, portal alias, and administering step by step.
DotNetNuke Parent, Child, Multiple Portals: How to create and configure Dot Net Nuke portals. Discussing the multiple portal method. using Parent and Child portals, the differences. Explanations of DNS, IIS, IP, Portal Alias settings. As well as administration functions in DNN.

Skin Ideas

Travel Skin by Dnncovered: DNN Covered
Free Skins > MyFirstSkin: Download DotNetNuke skins for free! No registration required.

DotNetNuke Marketplace - Vitality Skin Pack :: 2 Skins :: 3 Widths 1.0: Vitality Skin Pack :: 2 Skins :: 3 Widths 1.0
DotNetNuke Marketplace - PDA Skin 1.0: PDA Skin 1.0
Snowcovered.com : Imagination 7 Skins Pack by DnnCovered: Imagination skin pack is a fixed size skin fully eleborate the choice of dynamic business, the contents area is divided into panes such that the user can put contents in any desired format as per market trends. This skin is easy to deploy in DNN 3.x, DNN 4.x versions.
Snowcovered.com : Engage: Adaptive Skin by Engage Software: Designed and developed using pure XHTML/CSS, Includes 4 great color combinations, Two different widths, fixed width at 900px and 100% full width A total of 8 different skins and 6 containers, Compatible with DotNetNuke versions 3.x through 4.x, Search engine friendly, PSD file included
DotNetNuke Marketplace - Professional Skin Pack :: 12 Colours 1.0: Professional Skin Pack :: 12 Colours 1.0
How to create a DotNetNuke CSS skin from an XHTML template – part 1: How to convert a XHTML template to a DotNetNuke skin. Videos explain step by step. Covers creation of content panes, how to create a menu and adding the DotNetNuke tokens. Full adaption demonstrated, so you can convert the 1000s of free templates that are available.
Andreas 01 Free pure CSS DotNetNuke skin: Free DotNetNuke pure CSS XHTML compliant skin, Andreas 01. Download skin for DotNetNuke 4.4+. Comes with free site wizard template to quickly get you started using the skin.
DotNetNuke XHTML CSS free Skin Templates: Free DotNetNuke pure CSS XHTML compliant skin templates. For the latest 4.5+ versions of DNN. Use these free templates to learn css skinning.
Issue 25 – Pure CSS SEO Layouts for DotNetNuke skins: How to create pure CSS SEO xhtml skin layouts. Powerful and advanced techniques to help you beat the competition. Plus multiple skin layout techniques with minimal CSS code. Enhance your DNN skills with these video training tutorials
_DotNetNuke Skin Objects and Container Objects Dynamic Reference: DotNetNuke Skin Objects and Container Objects Dynamic Reference
__Create your first DotNetNuke Skin with Dreamweaver: Tips, tutorials, news, resources and general writing.
DotNetNuke Marketplace - Aurora (24 Skins) 01.00.00: Aurora (24 Skins) 01.00.00
DotNetNuke Marketplace - Aquilon Skin Pack 01.00.00: Aquilon Skin Pack 01.00.00
DotNetNuke CSS Skin Resources > Home: DotNetNuke CSS Skins, Free Skinning Resources and Downloads. All to help you create tableless skins for DNN.
XHTML SKINS > DNN Skins > 1024px: skins for dotnetnuke in valid xhtml
XHTML SKINS > Downloads: skins for dotnetnuke in valid xhtml
Free DotNetNuke Skin: Free DNN skin that uses CSS for the layout. No tables. DotNetNuke skin features accessibility, search engine friendly, print view, browser compatible, fluid design. Learn how to create a CSS skin. Simple Red Leaf Skin.
How to create a skin for DotNetNuke, Video Tutorial DNN: Video Tutorials demonstrating skinning for DotNetNuke. From initial setup to designing with tables, how to package a skin, menu design, xml and css file creation, Testing and releasing the skin.
dnnExperts > Skins / Containers > Optimized DNN 3.0 Skins
DotNetNuke CSS menu, how to configure the HouseMenu: How to install and configure the House of Nuke menu to a DotNetNuke skin. An alternative CSS menu system to the Solpart menu. Video tutorial providing step by step examples and benefits of the HouseMenu.
How to create a pure CSS skin in DotNetNuke - 9 Video Tutorials: DNN Creative Newsletters
How to create resizable text in DotNetNuke - part 10 - 5 Video Tutorials: Podcasting and DotNetNuke all the information you need to set up Podcasting with DNN.
Browser Quirks, Standard Compliance modes and Doc Types for DotNetNuke skins: Skinning. Setting up DotNetNuke for CSS compliance mode. Using XHTML Transitional. Provides a consistent look across the various browsers for your DNN skin.
Create your first DotNetNuke Skin with Dreamweaver: Tips, tutorials, news, resources and general writing.
Erwin Yulianto : Create a Simple DNN Container with CSS (Single Image)

Indexing/URLs/SEO

Making DNN Friendly URLs even more friendlier - ASP.NET Forums
How to Redirect a Web Page Using a 301 Redirect: what is a 301 redirect how to implement it
Is Dnn (dotnetnuke) Search Engine Friendly? - High Rankings Search Engine Optimization Forum: SEO forum for anyone looking to learn more about search marketing. For beginner SEOs through advanced. Come hang out with the best search marketers in the biz!
Venexus DotNetNuke Blog - Friday, December 02, 2005
Crafty Code - A Programming Blog: Tales of Technical Head Scratchers, and shared moments of inspiration

Marketing Yourself
Working with Vendors, Banners and Affiliates in DotNetNuke 4.3 and 3.3

Tuesday, February 26, 2008

Proper use of a H1 tag

Beginner's Luck

I referred a beginner to CSS tutorials and after they we're instructed how to write the CSS for their header, they were informed that they should forget using a div and use a h1 tag instead because:

Using semantic markup (eg. the h1-element for the main header) makes sites more accessible to search engines as well as people with no CSS (though I’d personally put more emphasis on point one, but it’s just me).

This advice was listed as Dave Shea's Image Replacement Technique. I wondered where this idea originated from. Dave's page currently does not suggest to replace an h1 tag with an image and uses h3's in all his examples.

Can does not equal should

The first time I saw this technique in Layout Gala's templates, yes, I thought it was cool too. You can do a lot of things with CSS. And for each standard you break, you can find a way to compensate for it. But this does not correct the misunderstanding that an h1 tag is semantically a "site header" rather than a "section header". From what I understood this advice was not only incorrect, but leads to actually sacrificing the h1's SEO value.

Good Intentions

The intent for the "image replacement" suggestion was to be semantically correct which I can respect. The purpose for the html element h1 is clearly stated on the W3C as a section header in the 1999-2007 documentation. I have always suspected that this practice was part of an obsession with code minimalism. The practice of reducing the number of classes and ids by using elements without regard to their purpose is pretty common.

To define the proper use of an h1 tag we should look at it from various standards.

Semantics

W3C Style Recommendations: Device Independent

one h1 is recommended -
one heading level 1 at the top of the document

W3C's Global Structure of an HTML (4.0) Document: Section 7.5.5 Headings

h1 is a section title -
heading briefly describes the topic of the section it introduces

h1 should be wrapped in a div for that section -
example shows how to use the DIV element to associate a heading with the document section that follows it

h1 can be used multiple times on a page (validates successfully) -
The practice of skipping heading levels is considered to be bad practice. The series h1 h2 h1 is acceptable, while h1 h3 h1 is not, since the heading level h2 has been skipped.

W3 QA Tips on Good Titles and Use for h1 Title

shows an h1 title reflecting a "section title" (ie. "Section One") rather than a "site title" (ie. "Welcome to My Site!")
the top level heading (h1) should assume a certain amount of context (ie. a page about "h1 tags" should have something along the lines of "H1 Tags and How to Use Them" written in between the h1 tags)

W3C XHTML Text Module

use the h tag nested in section tags to define structure -

Structured headings use the single h element, in combination with the section element to indicate the structure of the document

W3C QA Tip: Use Headings to Structure Your Document

the generic h tag can be used in addition to the h1-h6 tags (no examples have been found yet) -
It is foreseen that XHTML 2 will also provide generic headings, with a level determined by their depth in the structure.

W3C as an example noted by a user on the boagworld forum

h1 is page name except on home page -
The W3C's own practice seems to be to put the site name in the h1 for the 'home' page, and in other pages, have a logo icon in a link at the top of the page going back to the home page, using the h1 for the name of the page.

SEO

seoconsultants.com on the webmasterworld forum:

At least one heading tag
h1 should appear at the top of your page
well written using prime keywords and keyword phrases

SEOMoz on H1s and H2s

an observation: search engines will penalize you for use of multiple H1's -
Each page should contain only one H1 tag but can have any number of H2s and subsequent levels of header tags

Accessibility

W3C's Header Nesting Example

h1 is your "page title" -
Using heading levels appropriately will ensure your document is more accessible.

University of Minnesota's Accessibility Guidelines

use h1 as header graphic on home page -
because the page title is the same as the site title
for interior pages (all other pages), do not use h1 for the header graphic -
h1 tag should be applied to the page headline rather than the header graphic

The Proper and Practical Use Guidelines for H1 Tags

use one h1 tag per page
the h1 contains the keyword rich title for that page
h1 tag is not the same on every page of your site
place h1 tag as close to the top of page as possible

As long as these 4 guidelines are followed, you can image replace, negative margin, absolute position, and whatever other css tricks you want to try.

On using an h1 for your header image
I have never seen anyone who has used the image replacement technique to make the h1 the header image of their page, change the text in the h1 tag on every page. This is why I feel that this method confuses people about what the purpose of a h1 tag is. This method should not be used for the creation of a template page unless it is only to be used on a specific page like the home page. Each page of your site is valuable for different phrases and the h1 tag is very important in delivering that information to search engines.

Monday, February 25, 2008

CSS design work flow

Choose your inspiration.
Right now I am working strictly off a flickr set I created of screen shots, artwork, ads, print layouts, and anything else that I find aesthetically pleasing.

Start with a framework.
I made my own. It helps eliminate the time spent recreating code that I've already written and covers all the things that I double check for when I'm done with a site. I can rest easy knowing that the standard, basic best practices involving naming conventions, web standards, content order, SEO, web typography, accessibility, usability and design principles are all accounted for.

[insert a comparison of css frameworks covering a list of best practices]

CSS for beginners

I never needed to cover this subject for any of the projects I work on but the more I learn, the more my mind may complicate how easy it can be to learn CSS. I had to teach myself using the internet as a resource and I basically learned other people's bad habits and kept making sites until I could troubleshoot everything without looking anything up.

Then I took the time to do research on a weekly basis to improve my skills and find out why each decision is made instead of imitating other people's coding habits. This blog was started when my research became the most thorough.

To define where beginners should start, there are 2 questions to be answered:
What's the right way to learn when everyone learns differently?
What skills are the most important to develop early on?

Wednesday, February 20, 2008

travel websites

SEO and marketing:

Travel Affiliate Web Sites

White paper on Web 2.0 for travel marketers

Thursday, January 31, 2008

Just an Old Fashioned Weblog v.2

Thursday

1. A cute dress on Full Table:

I love her dress.
found by a google image search for "kitsch"

2. Ramrod
I like how the comments section is layed out. Site layout created by Warpswire.
found by a google image search for "kitsch"

3. The cutest gnome picture:

Photo by: http://besotin.blogspot.com/2005/08/el-rinconcito-kitsch-i.html
found by a google image search for "kitsch"

4. Bombalurina Jewlery Mash Ups
I like a lot of the pieces she uses and every detail seems to be chosen carefully. It's refreshing after seeing an overdose of stuff wire wrapped on cheap chains.
found on http://myindiejewelry.blogspot.com/

5. Counterjumper
Now this person cranks out content! I think they had a link to everything in their life on this one page.
found while searching for a specific em calculator (not this one)

6. Disposable
Addition to convenience at portrayed in a picture.
found on Counterjumper (they're the site designer)

7. Jon Tan
Happy to see a website that is exciting! He works for grow collective.
found while searching for the unfindable em calculator (he has an em chart)

8.

9.

10.

Yard Sale Checklist to plan your garage sale

Purpose
A yard sale is to get rid of things. Sell on ebay or craigslist if you want top dollar.

Recommendations

group sale
be ready the night before
price carefully
label well
do not bad mouth your items
be less flexible at the start and willing to bargain as the day goes on
write down each item and how much you sold it for
keep money on you not in cash box
check all pockets and purses to make sure you are not giving away hidden valuables
schedule on a non-holiday weekend and on paydays (1st and 15th)
give friends/family boxes weeks ahead of time if they want to get rid of stuff at your sale
let your neighbors know ahead of time (may evolve into a block sale)
post a start time
Move your cars so others will have room to park

List of stuff you need

roll of quarters
25 singles
2-3 fives
paper & pen
purse, fanny pack, or deep pockets to keep money on you
large boxes for signs and makeshift tables
rocks to weigh down sign boxes
blankets and/or table cloths
radio
paper and/or poster board
tape
markers
print outs of amazon/ebay info for more expensive items
extension cord & batteries to test electronics
ice and drinks for sellers and to sell
place to hang clothes
tall mirror
hangers
masking tape or colored dots for pricing
calculator
newspapers and small boxes for items sold that need packaging
tape measure

Setting Up Shop

Have a collector's or boutique section or table for stuff of higher value
highly desirable items near road
if you don't have tables, you can stack large boxes and lay a blanket over them
play background music (that everyone will love-like johnny cash)
categories like shoes all at the same price point makes things easier on everyone
offer bulk discounts (ie. 5 for a dollar on 25 cent items)
free section
sort by size
provide changing area and mirror if you are able
$1 or less section
$5 or less section
rug or blanket on ground for toys and play area
put cash table near the entrance
specialty sections like kitsch or vintage to attract buyers who value those items
"10 cents" box

Getting the word out

advertise
post on craigslist
simple yet effective signs (large card board box as sign)
sign's with big bold text!
free classifieds

Closing Time

slash prices or move stuff to free section
TAKE SIGNS DOWN
donate to charity with a pick up service if you have a lot of huge items

Resources:

Tuesday, January 29, 2008

A old fashioned Weblog

Tuesday - Wednesday's 10

1. Top 10 Tips for New Bloggers From Original Blogger Jorn Barger
Pretty much sums up what the purpose of blogging was suppose to be vs what it has become.
found on digg.com

2. Lula Magazine
The most recent issue mentions "The Virgin Suicides". A magazine after my own heart.
found on http://blog.urbanoutfitters.com/

3. Squidoo
Social Network of "How To" and "Need to Know" Lists. I hope all this content creating for other sites eventually pays off.
found on 2007 SXSW Web Awards

4. Urban Outfitters Website Redesign
I felt that I somehow had an advantage over them because I had moved on from the collage style that has defined them since I first visited the site in 2003. It looks fantastic! I'm somewhere between inspired and defeated.
found when clicking on their newsletter

5. Page Rank SEO Blog
The best looking SEO site I've seen. The owner is behind JoJo CMS which I am really excited about.
don't remember how I got there but I will be there until I finish reading everything

6. Edward Hann's IDP06 Information Diagram
I love information diagrams. A lot.
found on http://www.cpluv.com/

7. This picture of SomethingLabs:

I believe in putting things back where you found them instead of losing things on a regular basis.
found on http://www.cpluv.com/ also

8. The Horizontal Way
Call me old fashioned but I'm still not ready for this. Day 19 was the first site I actually noticed doing this in 2003 and I just remember that first "wtf" moment and that has been enough to steer me away.
found on 2007 SXSW Web Awards

9. Soulwax
Now I have no excuse to keep up with their every move.
found on http://www.thehorizontalway.com/

10. Evolution of a Header
I love the results.
remembered the site when I saw UO's redesign (#4)

Honorable Mention: I can't get this grid layout out of my head.

Monday, January 28, 2008

Will this website be used?

Ask yourself this question before building a website: "Will people actually use this website?"
To determine your purpose, the potential for usefulness should be considered.

Here's a list of 15 Ridiculously Useful Websites to use as case studies.

Tuesday, January 22, 2008

online retail and ecommerce

http://www.twentytwentyone.com/

Friday, December 14, 2007

Semantic Naming Conventions for CSS

Be Consistent

Consistently write the code the same way. This helps make the code easier to read and more managible.

Be Managable

As well as consistency, you may have to do other things to help other people on your team manage code more easily like not using shortcuts when working with programmers who are less familiar with css and having a set of semantic naming conventions for everyone to use.

Semantic Naming Conventions

Consider "structural naming, as opposed to presentational naming" - Eric
Meyer

Consider the semantic role. Here's a naming conventions table of names used on popular websites.

Using the same names helps write code faster. This means that you may end up writing the same code over and over. A CSS Framework can help you use the CSS you have already written for other projects.

CSS Frameworks

Here is a place to start on the subject:

Modular CSS

A CSS Framework

Other ways to make your life easier

Introducing Bleached Black and White: without the distractions of colour

Global White Space Reset

Vintage Games

Handhelds

Commodore 64
What you can do with a commodore 64?
Free C64 Games
Commodore 64 Still Loved After All These Years

Atari
Atari Game Manuals

NES

Web Design Reference