TechTalk Series: Instructor Introduction to Centriq C#.Net Career Track

Among other endeavors, I work with Centriq Training as an instructor. Centriq offers both public "corporate" training (typically for organizations sending their employees to learn new skills or gain certifications) as well as individual career training.

Back in February, amidst other projects, I began working on a short video to introduce people to our C# Application Developer Career Track. The track seeks to help people change careers, or upgrade their current background, into becoming a .Net web developer.

If you are interested in becoming a programmer, or in upgrading your programming skills, or you know someone who might be curious, feel free to check out my new TechTalk video on our C# Application Developer track.

I hope to continue adding new vlogs in this TechTalk series as time goes on, so stay tuned. You can also click "Subscribe" when viewing this on YouTube to be notified of new videos on my channel.

On the Road,

Eric J. Reid

Be sure to Topeka your web identity

It is very important to take stock of what is being said about you and/or your company on the Web. So you can just Topeka it.

To learn more about using Topeka to search for relevant links on the Web, just remember how it used to work when Topeka was called Google, before Google, KS was called Topeka, KS.

If you have any problems clearing this up, check with the mayor of Google, KS, and the jokesters behind Topeka's April Fools tradition. (Note, some of these links will only make sense if you visit them on 4/1/2010.)

On the Road,

Eric J. Reid

XeeSM: A Directory of Your Social Business Tools

Just a quick post noting that I've had my hands full the past several weeks working with Centriq's Social Business division on some projects. It's been exciting stuff. I have been enjoying some of the few social media tools out there that I've already been using (LinkedIn for business, Facebook for personal and Delicious especially for both). But I've been exposed to so many tools I never new existed, and it's cool stuff that can open your eyes to lots of new opportunities and methods to dealing with common problems.

For now, though, it's late and I just want to list one example of a helpful tool considering that there ARE so many of these social media/social computing tools/Web 2.0 services out there. It's called XeeSM (pronounced "See-Sam") and it helps you provide a one-stop listing of your various Web 2.0 profiles and social media publications.

As these tools continue to multiply (and as some of them fail or are replaced) it can be nice to be able to "keep up with" people in your network or that you respect.

Here's mine:
http://www.xeesm.com/EricReid/

Feel free to send me your XeeSM link or feedback as well!

On the Road,
Eric J. Reid

KC Coders for Charity 2010 event

Although ORC may not be able to participate this year, I did want to help publicize the Coders for Charity 2010 event taking place at Centriq Training again this year. The 3rd annual event maps web designers and programmers up in teams to various Kansas City area non-profit organizations. The volunteer effort should result in entirely new or revamped web applications for organizations that provide much-needed services in the community, but often do not have the resources to implement web technologies in aid of their work.

If you have coding or design skills and would be interested in volunteering to participate with a team on a project for the weekend (free catered meals, energy drinks, a Rock Band break room, and everything a crazy keyboard jockey needs to beat the weekend deadlines!) please visit the registration page.

Best wishes on the good work!

On the Road,
Eric J. Reid

Back Stateside

Just a quick note that our offices have reopened after the 2 week hiatus pending the company's president (me!) getting married. Good times in Spain.

And now, back from siesta and back to work!

On the Road,
Eric J. Reid

Fun with C#, Console Apps and Gaming

During one of my C# Fundamentals classes, I realized we were rehashing a few examples a little repetitively. Now, granted, they were solid real-world examples that we were building on (bank accounts, logins, calculators) but while shooting the breeze about roleplaying and computer games, I realized we could have some fun with a primitive console game. Sort of Zork meets Dungeons and Dragons combat.

So I formulated the beginnings of such a game and posted it for my students. It really is just a "story telling" mechanic right now, but I've started working on building it out into more of an interactive game that lets the user choose between a few basic commands for the characters in play, like Greet, Flee, or Fight. Again, intentionally primitive. But there's lots of fundamental code that a novice programmer can practice with to accomplish this humble undertaking.

At any rate, here is that initial draft of the console game if you are a C# coder and would care to kick the tires on this idea and take a shot at "building it out" further yourself. It will require you to unzip the file, and place the Gaming1 folder in your Projects folder, inside the Visual Studio folder, inside your Documents.

Have fun and fight the good fight!

On the Road,

Eric J. Reid

960 Grid System for CSS Layouts

With the past few websites I've designed, I've been experimenting with the 960.gs CSS grid system. I wanted to kick its tires for a more systematic approach to implementing CSS for various layouts. Although I have found it to be a little trickier than it looks, I am finding myself more and more pleased with it as a tool for accomplishing CSS layouts and avoiding HTML tables to accomplish similar goals. (That debate, of course, is a tired one in the web design industry.)

If you are not familiar with this project, it was created by Nathan Smith as a free open-source style system. The limitation, which I have accepted for many of my designs, is a page confined to a straight 960-pixel static width. Nathan describes it thusly:

"The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem."...

"The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements."...

"The 960 Grid System is free to use, and may be repurposed to meet your specific needs."

-Nathan Smith

One area that I have found helpful in this process has been to map out their demo.html page to really visually see what CSS is being used to accomplish various "rows and columns" of content. I literally sat down, printed out the html page and drew out the various classes being used on various divs. It made it much clearer how they worked together, I thought.

Contact me if you'd like to see a copy of my rough sketch -- but on the other hand, sketching it out for yourself may help you get a good feeling for what's really going on in the code. You'll have to really dig into the code and get your hands dirty when you make your own layouts with it, anyway!

On the Road,

Eric J. Reid

Can I load Adobe CS3 and CS4 on the same machine?

Just a quick blog... As I transition into more use of the Adobe CS4 suite, and as I've seen some big changes here and there from CS3, I have had to ask myself:
Can I load CS3 and CS4 on the same machine?

From working with students who had this version or the other, I've seen that Adobe's made some significant changes to how the timeline and motion tweens work in Flash, and that some really sweet Photoshop commands from the Bridge are more work to "reload" than when they came automatically in CS3. I imagine there are other differences I'll run into, so I've been curious if I can't load both side-by-side, to have the option to use either one.

This type of thing is especially helpful for a trainer who may sometimes be called upon to teach either version while people decide if they really are ready to upgrade. But I have found that this can really just be a nice feeling for anyone who uses a suite or a product and is shocked to see big changes in a new version -- some of them unwelcome.

The short, general answer is yes. This type of thing is more common and possible than it used to be. I have Visual Studio 2005 and 2008 loaded on the same machine, for example. (And yes, I have licenses for both.) And my research suggested that the CS3 and CS4 suites may work the same, with the exception of that pesky Acrobat program, which evidently prefers you have only one version. That's fine: my Acrobat program loads seem to be so temperamental lately that I wouldn't mind a total refresh there.

I've now had both CS3 and CS4 suites loaded on my machine for a few weeks and enjoy the flexibility of being able to hop between whichever one I am more interested in or comfortable with at the time.

On the Road,
Eric J. Reid

ACE Photoshop CS3 certification

Just a quick note to say we added Adobe Photoshop CS3 ACE (Adobe Certified Expert) certification to our roster today.

Photoshop is one of those software applications I admit, even as an amateur photography enthusiast, with which I enjoy a love-hate relationship. With so much power comes not only so much responsibility -- but also so much of a learning curve! And that's where some good training can always come in handy.

I love some of things that only Photoshop can do, but fully concede that there are easier and less expensive applications out there for a myriad of common and important photo editing tasks. For example, if you just need to crop, rotate, and/or resize a picture you took on your digital camera, but don't have or want to mess with other editing tools, consider the free and easily available www.phixr.com. You can edit a photo there without even signing up for an account.

That said, sometimes a professional or prosumer has "gotta have" the beast that can pretty much do it all, if you can tame it. And thus, the full version of Photoshop is out there.

(And finally, if you care to take this or other certification exams in the KC area, you can do so at Centriq Training.)

On the Road,

Eric J. Reid

Delicious a great bookmarking solution

Just a brief post here to note what a big fan I continue to be of Delicious.com... As time has gone on, and I have continued to use increasingly more PCs and laptops throughout my workday and personal life, it's gotten harder to manage Web information. Plus posting quick answers to questions students have on various topics (where I and others can reference later) can be a challenge.

With my free delicious account (and you can use the service to find bookmarks of the public at large or those of users you know in particular without even signing up), I am able to house all my Web bookmarks/favorites all in one place. I can't get to it without an Internet connection -- but if I am without one of those, I probably don't need access to my Web bookmarks. Plus I can segregate the bookmarks by the ones I want to be private (only viewable if a person logs in as the user who created the private bookmark).

And one of the most interesting things for me has been the method by which Delicious has you store your bookmarks for retrieval, using keywords instead of the standard "folder/subfolder" filing system. I suppose I should be used to this -- I've seen the process used in different places, including this blogging system I'm using. But I've never really gotten used to its power until I try to commonly use it for retrieval... It takes some getting used to, but it's actually more flexible to be able to find a bookmark by remembering one of several possible keywords (categories) you used for it than to have to find the exact folder path to your bookmark.

Anyway, try Delicious out today and use it for 1 week with all your new bookmarks, especially if you work from multiple machines throughout your day. I think you'll like it. (Plus you can find my links and a HOST of other resources, many of which are filed under keywords "webdesign", "programming", and "graphicdesign", at www.delicious.com/lucianosole.)

On the Road,
Eric J. Reid

Sounding Off On Browsers

Today, I just wanted to use the virtual scratchpad to talk about some of the things I don't like about modern browsers. And I'm not singling out any one browser. In my day-to-day activities of researching, working with common application tools, communicating and doing my stuff in the industry, I find that it's not uncommon for me to switch to different browsers for different needs. This is odd because browsers are supposed to do basically the same things.

When I am in the biggest hurry and I don't think I will need to print anything or be dealing with Flash content, then I open Google Chrome. I love its big thumbnails of commonly used sites, multiple tabs and quick start-up and browsing. But the second I go to print something, I am hamstrung because Chrome has no print preview feature. I am usually running from one thing to another, so now I have to jump to another browser to get this basic feature which I am learning is evidently not so basic to program. (I believe other browsers will be launched without this feature the for the first few generations). And if I come across a site with Flash content, Chrome screeches to a halt... it seems that getting the Flash player is difficult or impossible for Chrome. I don't know if this is the fault of Google or Adobe, but I suspect it's a bit of both. I was routed out to get the player for Firefox, which didn't work on the first install attempt. Bad.

On the other hand, on most of my machines, I like Firefox's multiple tabbing system, and its print preview and Flash player installs work just fine... But I find that it is the slowest of all my browsers, which is annoying. And some fairly mainstream web applications (like my banking website) simply choke and die when I run them on this browser. Switching over to Internet Explorer seems to get around this... Again, this may be a problem with how the bank coded their application, not including enough cross-browser support -- but in my workaday tasks, I am governed but what's out there, not by what "they should have done".

And then, finally, although Internet Explorer can be a good happy medium (on my machines, it's medium speed; it has print preview and Flash player compatibility), it has its problems as well. I remained on IE 5.5 or 6, I can't remember which, for the longest time to avoid the complete IE makeover that removed all my menu bars that let me get to common settings and features easily. (A complete makeover that in my opinion was completely unnecessary and counterproductive.) On top of that, IE settings began to become positively fascist with their blocking of common and harmless JavaScript, Flash, and other "active content". Every time I'd turn around, it would be blocking something. And I know I could go back into the security settings and "fix things" but this is also a hassle and a bigger pain when you, like me, use a lot of different computers in your work.

My final analysis -- although the new browser wars are producing some cool new features that the competitors rush to imitate, I for one am still far from ready to declare any one of them the "winner" for all situations.

On the Road,
Eric J. Reid

Internet Explorer 8 Now Available

IE 8 is available for download.

Per ZDNet, "Microsoft says that the new Internet Explorer 8 browser... is faster, more secure, and easier to use. It also adds a new private browsing feature."

Some of the more interesting features IE8 promises are compiled below.

For Users:

• Web slicing that lets you easily track a frequently-used site for updates.
• Compatibility view to help "adjust" the layouts designed for "older browsers" -- it disappears as an option if the page has been "updated for IE8". Of course, for me, this begs the question -- just how differently will IE8 "render" various CSS, that it will need this tool to compensate for hacks often used to accommodate previous versions of IE or maybe other browsers?
• Accelerators, to reduce the additional pages and typing you tend to use to perform standard functions on data, like mapping directions to an address, translating a foreign word, finding a product on eBay, or getting a definition. A nice subfeature here is that it's even updatable to use vendors other than Microsoft and its partners.

For Developers:

• CSS table layout support -- which should allow you to get table-style layouts without using HTML tables.
• Support for the :focus pseudo class
• Various tools for developers
  

Also, for developers, Microsoft has already published some tips on taking advantage of changes in IE8, as well as short-term and long-term approaches to making your pages more IE8-compliant.

I'm curious to see how this notably different version of Internet Explorer changes the way we surf and develop. The browser wars continue -- but instead of coming out with products that result in more variation in the rendering, and more problems for developers and users, the new competition seems to focus more on features to beat the other guy. And that looks promising for the rest of us.

On the Road,
Eric J. Reid

W3C on HTML 5

This month the W3C published info on the HTML 5, which is still a working draft of the latest version of HTML. According to Justin James, "The last round of Web browsers already included many of the HTML 5 features, and a number of Web sites use HTML 5 code". Changes may be coming down the highway after years of talking about it.

Note that HTML 5 is intended to replace XHTML (which is itself the XML-ized, later version of the HTML 4 family.) 

Some other interesting points (and a few big changes) include:

• It's designed to be backwards compatible. It will have separate requirements for authors (writers of the code) versus user agents (browsers, screen readers, etc). This is hoped to end the use of "deprecated" elements, as authors won't be able to use them in HTML 5, even though browsers will probably always support them so older code doesn't simply cease to function. Authors will have their rules; browsers will have different, broader ones.
• "HTML 5 specification will not be considered finished before there are at least two complete implementations of the specification". The idea is to make sure that coders and browsers are "following the program" as well as putting forth valuable feedback before the new version is embraced as complete.
• "New content model concepts (replacing HTML 4's block and inline concepts)". Gasp. Seriously. This would be a big departure from how HTML content has been coded.
• "The use of the DOM as a basis for defining the language" -- something previously synonymous with JavaScript, not HTML.
• The DTD will be shortened because it will not need to be specified in SGML. Removing that requirement will end the need for the much longer doctypes in previous versions of HTML.
• There will be a nav tag, intended just for navigation sections.
• There will be new input types for forms, including date/time and color options.
• Frames are finally removed from HTML. (I can't help but offer a personal hooray.)
  

Stay tuned for further updates... Exciting stuff for web designers and their users!

On the Road,
Eric J. Reid

How do I make a preloader in Flash?

Editor's note: Shortly after posting this, the Youtube version of the video discussed below was cut from 23 minutes to 14 seconds. You can still view (and purchase for $3.50) the fuller versions at the author's site: http://tutvid.com/tutorials/flash/tutorials/
simplePreloader.php

As with anything of some depth, it can take awhile to “circle” a topic you’re learning and get closer and closer to the details. In a class last week, several students commented on the common practice of using a Flash preloader in sites built primarily in Flash. This post is intended to summarize and explain generally what you are doing when you create a Flash preloader, and why.

A preloader plays while the larger “movie” is loading in the meantime. I told my students I’d get them some resources for different approaches to doing just that. Below are a couple that I’ve put on on my recommended Delicious list under the tag “preloader” for background information. Further down you’ll also see a great video tutorial that walks through the process quite well, and my blow-by-blow dissection of the ActionScript used.

• smartwebby.com info
  
• webmasterworld.com forum
  
• youtube.com tutorial from tutvid.com -- shown in embedded video below

Key Components to a Preloader
What do we really want out of a preloader, then, and how is it generally accomplished?

1. Amount Loaded So Far: You want to have a visual indicator of how much of the movie has loaded so far.
2. Constant Progress Updating: We need this progress to be updated contiuously. Intuitively, as visitors we will gauge how much time has passed versus how much progress has been made (amount loaded so far). This gives us a sense of not just the download’s progress, but also its speed.
3. Constant Progress Checking: In order to constantly update the progress of the amount loaded so far, we will need to check it.
4. Manipulating Visual Indicators: Finally, in order to continously display the information we’re gathering, we’ll manipulate some visual indicators. It could be dynamic text which displays the current “percent downloaded”, it could be a bar filling up proportionally to the amount downloaded, or any number of approaches.

The video tutorial above does a good job of illustrating how to create a preloader using ActionScript (he’s using ActionScript 2.0). You’ll need an animation that’s 2+MB so that you can use Flash’s Simulate Download settings in the Test Movie mode to see the effects of your preloader in action as you build it. (That also gives you a good appreciation of the pain caused by how long your movie takes to load at different speeds.) Then you’ll create a preloader bar and dynamic text to update the download progress, and use the timeline and ActionScript to bring it all together.

Actions Panel Color Coding
Below you’ll find a screenshot sample of finished code for the ActionScript that’s really the brains behind this whole preloader, as well as a basic dissection of what’s happening. (Notice in the screenshot below that the Actions panel color codes things for you.

• Names you created and basic syntax is in black.
• Text strings are in green.
• Flash keywords, properties and functions in blue.

Completed Code Sample
Click the code image below for a clearer and larger display.


Dissected Code Sample
So below is a summary of what you’re doing in the code, line by line. (By the way, all of this ActionScript code is going on frame 1, with the majority of your preloader elements also starting on frame 1. Your main movie elements start on their own layers on frame 2, after the preloader has completed its task.)

On line 1 we set the movie to stop. This doesn’t kick in until frame 1 has played through, which allows the rest of the preloader to do its job, but to make sure that the main movie doesn’t start playing until called by the IF statement we create starting line 8.

On line 2 we call a variable name textVar and set it to say “LOADING”. (We created this dynamic text and gave it a variable name in the Property Inspector when creating it on the Stage. )

On line 3 we create an initial container to hold preloader’s interval information, and to set the details of its repetition. We name the container “loaderInt” and set it to use the Flash function setInterval(), with parameters to run a function LBar that we’ll create next, and to run it every 10 milliseconds.

For readability we skip Line 4 and on Line 5 we create the function called LBar(). The lines beneath it get the opening and closing curly braces to contain the function’s logic. That logic will:

1. Line 7: Define the contents of another dynamic text field (percentInst) we created earlier on the stage. The contents will be the result of dividing the total bytes loaded so far by the total file size, multiplying that number by 100, and adding a percent sign to make it easily understood to visitors.
2. Line 8: Create an IF statement that says, each time this function is run, check to see if the bytes loaded is greater than or equal to the total file size. If so, then:
1. Line 10: Start playing again (which will run the main movie now),
2. Lines 11-14: Hide all the visual indicators we’d created to update the visitor on the download’s progress, and
3. Line 15: Clear out the “loaderInt” that we’d created to continously run our preloader.
3. Line 17: Use the _xscale property to increase the fill of the horizontal loader bar we created. Do this proportional to the percent of how much is loaded, divided by the total file size. Keep in mind that this line is outside of the IF statement, so it runs each time the Lbar function is being run. That continously updates the download progress bar until the movie is loaded and the LBar function is no longer called.

Closing
Hopefully that puts you on the right path to creating this and other preloaders in Flash, where needed, and is a good introduction to some handy use of ActionScript.

On the Road,
Eric J. Reid