After weeks of preparation, our first training offering in St. Louis is complete and I can finally relax a little bit. At Engage, we have offered on-site training for quite sometime; however, it is such a different and exciting experience for all of us for holding training classes in St. Louis.
I'd like to thank everyone who joined us in St. Louis the first week of April. It was such a great opportunity to meet new people, to network and to share stories and experiences in working with DotNetNuke.
Many times I have been asked the same question by various clients regarding the DotNetNuke CSS load order. Many of them were having difficulties when customizing their modules and skins to have uniform styles. Simply understanding the DotNetNuke CSS hierarchy is essential when performing these tasks.
Understanding DotNetNuke CSS precedence:
- Assists you to create detail-oriented and professional DotNetNuke skins
- Helps to troubleshoot issues with CSS in various context after installing skins and applying to use in a production environment (especially cross-browser troubleshooting)
- Provides the advantage to design your website in a consistent manner by customizing the modules in DotNetNuke
Having worked on many projects in UI design for software at Engage, I often ignore messages that come into my Inbox that are related to hard-core development regarding events around St. Louis. However, yesterday was the first time I attended the .NET user group meeting in St. Louis.
The topic was DotNetNuke Module Development presented by my colleague, Chris Hammond, a DotNetNuke core team member. He did a great job in presenting a brief overview of the framework with details on the module development process.
When I worked on a project for one of my clients a while back, I had to come up with a mechanism that allows user to switch layout design within a site. Not familiar with any programming language, I sought help from a bright colleague, Brian Dukes. With Dukes’ elite programming skills, he helped me to create a CssSelector (SkinObject in DotNetNuke) in just a few minutes to solve the issue.
The skin object works great as a tool to enhance user experience on your site and I'd like to share with professionals who are working with DotNetNuke.
Skinning has been one of the most challenging topics in DotNetNuke development. The community has created a fairly versatile skinning engine for non-developers to adapt; however, to achieve perfection or superiority in DotNetNuke skinning requires tremendous amount of time as well as being detail-oriented.
There are a few reasons that skinning has become cumbersome to master:
- Lack of resources (majority of resources including books and documentations are developer-oriented, it's difficult for non-developers to learn and comprehend the concepts).
- Although [TOKENS] makes skinning easier, the framework has poor user experience in demonstrating the skinning process.
- Lack of flexibility for web standards approach.
Back in November 2007, I was invited to be a technical reviewer for a book called DotNetNuke Skinning Tutorial
by Packt Publishing Company. Having seen limited resources about DotNetNuke skinning, I agreed to be involved in the project instantly. It was an exciting experience since I have never had any experience in working with formal documentations besides DotNetNuke training documentations I wrote with the team at Engage.
I got started with the actual review shortly after a few conversations regarding roles, responsibilities and agreements with the team at Packt. Four months later, we wrapped up the book and got ready for production.
Having seen quite a few people lately asking about how to get started with DotNetNuke skinning, I decided to compile a list of resources so everybody can share. Although it might not be the ultimate list of DotNetNuke skinning resources, it certainly helps providing a more in-depth guide in what is available out there.
It is always a challenge to get started on something (well, at least to me). But once you get familiar, it's an exciting learning curve.
Couple weeks ago I posted the experience about working on the book review for DotNetNuke Skinning Tutorial. Yesterday, it came in the mail with two copies and I'd like to share with you all here.
I was anxious to see the final product as I reviewed and recommended the changes to the book along with Jerry Spohn (another technical reviewer) more than six months ago. This is a light book that doesn't take long to complete reading it.
I sometimes run into beautiful designs provided by clients using great combinations of layout and type. I enjoy working with them because of the design focus spans across the website to give unique values to the brands. For those designs, the element called container as in DotNetNuke skinning language often plays a small role. They sometime just need to behave as a placeholder for content.
A few people were asking me about similar situation and how to approach when working with those designs. My suggestion to them is to use a clean simple container and manage the design through CSS.
I joined Engage back in early 2006 working with DotNetNuke skinning for both internal and clientèle projects. By working on numerous projects, I found that many people have different conceptions about skinning with DotNetNuke. And I could not satisfy myself with a clear definition of skinning in most of the books that I looked at. Today, let’s talk about skinning and its true meaning, and learn what we can do to fully accomplish a powerful DotNetNuke skinning engine.
Skinning is not a skill; it’s a profession that requires knowledge and experience in understanding the DotNetNuke platform (especially with the skinning engine), web standards, as well as aesthetic design.
One of the great advantages of using CSS is to separate content and presentation. Remember back in the day when we were all using spacer GIFs and font tags in our HTML? Oops, I think some of you out there are still using it in DotNetNuke development. Well, if you do, I strongly recommend that you should leave it behind. It is such an unpleasant experience when looking at the code especially when working in a team environment.
Today, using inline CSS is just like embedding font tags in your HTML. It is not a good practice in web development. Here are a few reasons why you shouldn't use inline CSS in your code (or in your skinning and UI design approach)
After reading “Are you sure you want to buy that module?” by Will Morgenweck at ActiveModule, it inspired me to write my own version of some sort that similar to it called “Are you sure you want to buy that skin?”.
When doing a search in Google for commercial skins, you might end up at some landing pages (if you lucky enough to see one) with the skin that you’re looking for. However, not everybody gets there in the first try.
Shopping for skins isn’t quite an easy job. It’s similar to taking your computer to BestBuy and have them “helped” with some issues when you don’t have much knowledge about it. The Geek Squad are probably speaking G(r)eek to you and you’ll be leaving the store paying whatever they told you to.
I’ve been there. So have hundreds of others. The nonsense styling of the default.css by developers, the non-standards approach that they take time to put in from regular text (.Normal), HTML headings (H1, H2, H3…in uppercase) to outdated CSS rules with the lack of knowledge in writing CSS shorthand to reduce file size and increase productivity. It’s all ended today.
For those of you who are experienced web developers that have adopted the web standards to reach out to the world, there is no need to struggle with using Firebug or IE Developer Toolbar to hunt for CSS attributes that should be overridden against the DNN’s default. I offer to you, the simplest solution—the default.css MUST DIE.
I’ve seen many developer created websites and skins with very similar mistakes lately. They all lack of knowledge about principles in web design. In my post about the truth of DotNetNuke Skinning, I mentioned that skinning is not a skill; it takes a bit of knowledge and understanding of the DotNetNuke framework as well as aesthetic design. Many seems to master the first part, however, they all missed the second. By learning how to use Photoshop doesn’t make one becomes a graphic designer.
To assist with future skinning approach, here are the five principles of building a DotNetNuke site or to design a skin. These principles are of course extended to web design and development in general, but the lack of implementation in DotNetNuke community intrigued me to put them together. I hope you all enjoy!
A good friend of mine, Ian Robinson (also a Lead Instructor for Module Development at Engage), went to Texas a few weeks ago to provide training for clients. When he was approached by a potential client asking about skinning, he immediately mentioned my name thought it just helps carried on the conversation. The gentleman took it seriously and asked more about what I have done in the past. Ian struggled to pull out the hard evidence because he doesn't know all the projects that I've worked on since we haven't had time to keep our portfolio up-to-date.
Today, I introduced a quick page listed some of the projects I've done and hope it helps to give a better idea to potential clients of Engage. Although the page you find lacks of detail about the projects, it does carry external links (if applicable) to the live sites so you can have a better look. Some of them are Engage projects and some are my personal work.
I intend to provide more detail about the projects when I get some free time. So if you have any questions, please feel free to contact me and I'll be happy to talk through the detail of each.
Also, if you find thumbnail images without the links, it's either a work in progress project or an off-line site. But I sure will provide detail of all the screenshots.
DotNetNuke has grown quickly over the past few years. But it has only been major changes for the developer community. The question we should ask here is how do we bring the framework closer to the general audiences where all businesses from small to large can understand and utilize it for their online presence?
dnnGallery was introduced to help answer it. dnnGallery is the place to showcase DotNetNuke projects to all audiences from non-technical, business professionals to DotNetNuke developers.
I designed the site with layout to showcase projects in a way that provides valuable information to visitors. Then the design was implemented into a DotNetNuke skin package with XHTML/CSS and Web Standards Compliance approach.
The site was developed with great help from a very good friend of mine, Ian Robinson. Ian also a DotNetNuke training instructor at Engage Software and has extensive knowledge of module development. Some of you may have already known him through taking our training courses at Engage.
It's been a few months since I launched this site and it has received some consistent decent traffics. I have visitors from all around the world (more than 70 countries) come to the site quite often. It's been well-received and I'm glad that I've written some simple but helpful information about DotNetNuke for the community out there. Thanks to the support from everybody!
Since the traffics to the site boost up a bit, I think it's time to ditch GoDaddy and move on to somewhere more reliable and provides instant access to it for me. I looked around and couldn't find anywhere that would fit my budget and my needs. My boss, Rich Campbell, offered to have my site hosted at Engage so it'd be easier for me to manage and update with some help from the team.
Today, my favorite colleague, John Eimer, helped me moved my site over to our server at Engage. I have notice the speed has changed a bit faster, but not quite sure because I still access it through internal IP.
I hope this small change will help increasing everybody's browsing experience on this site.
Since dnnGallery opened to public in less than two weeks, we received quite a bit attention from the community. Thanks to all the support and encouragements from the community especially to those who took the time to personally e-mailed me. Many thanks to Vitaly Kozadayev and Tom Kraak to show great support to us as well.
Today, I updated the site with the new blog and you will be seeing a bit of tips and tricks, industry news, and some other DotNetNuke related posts from myself and Ian Robinson, a lead instructor of module development training courses at Engage.
Also, a few changes in browser-computability have been made to better accommodate users from all platforms. I hope it enhance the browsing experience on dnnGallery and please feel free to contact me if you see anything not working properly.
I’ve been busy with work for the past few months and then off on a vacation to visit family all the way in the Pacific Rim area; therefore; I haven’t had any chance to update the information regarding OpenForce ’08 in Las Vegas. Well, here it is.
DevConnections updated their web site with detail information about the speakers and sessions. You can view the list of speakers this year here and the keynote sessions here. This might help in preparing for the trip in advance and see what you would like to learn in this conference.
One thing I notice is that there’s no easy access to the OpenForce microsite, you have to navigate to it using the entire URL (http://devconnections/openforce). It’s not easy for people to find.
Last year, the entire gang at Engage Software took off two days at work and headed South to Tulsa to attend the annual Tulsa TechFest event. We all had a good time learning from many industry experts and met like-minded people around the country. I learned a few things and so did many of my colleagues.
This year, Engage Software came back with the entire track of DotNetNuke. If you’re a DotNetNuke fan, be sure to come out to meet and learn a few more things or just plain exchanging ideas to help improving the community.
If you’re new to DotNetNuke and would like to learn more about it, this is a great opportunity to attend a free conference (or paying $2 per day to donate to charity). Our training courses at Engage often starts at $599 per day so this is a great bargain.
It is official that I joined the DotNetNuke Gallery team led by Néstor Sánchez. Compare to the last time I looked at the module was more than a year ago. Wow, if you haven’t seen it recently, you should definitely check it out.
Currently, the module is still in 4.3.0 Beta. But tremendous improvement and bug fixes have been implemented. You can view a live demo here and get a general idea for your next projects.
My main responsibility for the Gallery module will be helping with the UI design and usability in general. Keep an eye on the project; I’ll be updating some cool UI elements and templates if you wish to use this module for your production. Also, I’ll make sure that I’ll be picky about the workflow to make everybody’s job in managing this module easier.
I was excited a few months back when I got an e-mail from Joe Brinkman about being selected as a speaker for OpenForce ’08. But the good news doesn’t end there. Last week, I was informed that I’d be presenting with the creator of the DotNetNuke project, Shaun Walker, after the conference in Vegas on November 14th.
It’s official that we, Shaun Walker, Joe Brinkman, my very good friend—Chris Hammond, and I are joining together to present the best practices in DotNetNuke 5.0 this November in Vegas. In recent announcement from DotNetNuke, Engage Software, an Official DotNetNuke Training Provider, and DotNetNuke Corporation has partnered to offer the community with the best practices in one of the major releases of DotNetNuke. At this Post-Conference Workshop, not only you will have a chance to learn the best practices in DotNetNuke 5.0, but you also learn from the project creator himself. So go ahead and check on the Post-Conference Workshop option when you register for OpenForce to get the inside scoops from the team.
It seems a bit obvious to offer some advices in designing a great web site after I posted the principles of DotNetNuke design. But since I ran into many questions asked by friends and clients repeatedly and also saw people made mistakes in the community, I decided to put together this short list in no particular order. Hope it helps in your next projects.
1. Design your site for users, not machines.
2. Navigation is key to better user experience.
3. Leave the creative work to the pros.
4. Build a web site, not creating panes.
5. White space is your friend.
6. No detail is too small.
A long-awaited DotNetNuke 4.9 released last week has made the community excited. I personally upgraded my web site right at the minute DotNetNuke announced on their homepage the new version is available.
A few notable changes in 4.9 have been fairly documented this time after seeing the community’s frustration of the lack of such friendly documentation/release process when new versions introduced. Thanks to Joe Brinkman’s great documentation efforts, we all now can get the major highlights of updates.
As you can see beside the new default skin, a skin object called “TEXT” also introduced to allow text localization within skins. When Shaun Walker first blogged about it, I was excited to see the improved skinning process and a few enhancements, but let’s take a closer look to see what are the benefits this new skin object give us.
For those of you who took my classes at Engage, I have an update for you.
Prior to DotNetNuke 4.9, all skins created must contain the single most important token—ContentPane. I usually spend a good amount of time explaining how important this token is and make sure everybody understand before moving on.
Today, working on a project for my client, I made this very simple mistake by not including the ContentPane token in the skin file. Everything worked great from installation to managing content on a page and I didn’t notice there is something missing.
For all DotNetNuke versions prior to 4.9, the system immediately throws an error that it could not locate ContentPane. However, this new version never gives any hints about it.