Microsoft Brings Designers into the Fold with Sketch Flow

As far as web development goes, the Microsoft offering of tools has traditionally revolved around the programmer…and why not? The programmers are the ladies and gentlemen that make it all happen, right? Wrong! I am not questioning tha ability of programmers to “make it happen”, but a functional application is not the same as a killer application. Programmers are focused on creating functional applications and generally they do an awesome job at it.

What transforms a functional application into a killer application is a user interface that  makes the functionality fun to use (yes fun…don’t laugh).   Those responsible with this daunting task are the designers who, almost exclusively, work with adobe tools (Creative Suite) to do their job.  This has worked for years, with designers creating inspring designs in photoshop, slicing them up in to useable graphics, which are then stitched back together with HTML, CSS and JavaScript , and then integrated with presentation and business logic developed by the programmers.  Exhausting!!

Microsoft takes some of the effort out of the process for those designers and developers deciding to make the leap to Silverlight and WPF with it’s Expression Suite of tools and specifically SketchFlow.  SketchFlow, is basically a prototyping tool that creates a Silverlight or WPF presentation layer that can be edited with the friendly visual interface or XAML code view (or both).  A decent prototyping tool alone would be a good step forward in gaining the favor of traditional aAdobe loyal designers, but the goodies don’t stop there.  The prototypes can be exported to a website or exe to be reviewed by the team and/or stakeholders with a built in feedback feature.  Once the designs have been approved, their ready to be imported to Visual Studio, and since the designs are built with XAML, the prototypes become a working user interface that the programmers can stat hooking up to their well built services or classes or whatever programmers are working with nowadays.

I’ve glossed over some really cool concepts without the appropriate level of detail, but I hope it’s enough to get you interested enough to start looking into it.  I’ll be delving into some of the specific features in upcoming posts.

Browser Busting: Getting an IFrame Document

Before I present a browser busting tip on how to retieve the document of an IFrame element, I must provide the following warning:

Surgeon General’s Warning: IFrame’s should never be used when developing an application and will cause application defects.  Legacy applications with pre-exisiting IFrames are harmful to your health and should be replaced immediately.

If the above warning is news to you, don’t worry, the damage is reversible.  If you need to retrieve data without doing a full postback to the server please look into the brand spanking new technology known as AJAX (sarcasm).  For those of us stuck, for any number of lame and insufficient reasons, with working with IFrames, below is a cross browser compatible method for accessing the IFrame’s document object.


function GetIframeDocument(_id) {
var frameDoc;
if (document.getElementById(_id).contentWindow != null) {
frameDoc = document.getElementById(_id).contentWindow.document;
}
else {
frameDoc = document.getElementById(_id).contentDocument;
}
return frameDoc;
}


There you have it. Before I sign off I’d like to get into the holiday spirit by leaving you with my pick for best Halloween costome of 2009. I based my selection on obscurity, execution, and general awesomeness…say hello to Dr. Byron Orpheus of the Adult Swim classic “Venture Brothers”.

Happy Halloween!

Browser Busting: attachEvent

If you’ve been developing web sites or apps for any length of time you’ve probably at least heard that HTML and JavaScript should be segregated. It’s such a good idea that the concept got it’s own fancy buzz term “Unobtrusive JavaScript”. The basic idea is that presentation, content, and behavior (oh my!) should be decoupled and replacable, which will make the code easier to maintain, enhance, overhaul or disable without causing it to implode.

But this is easy, right? You probably already have your JavaScript in an external JavaScript file where you have all of your functions defined. The onclick or onload attributes for your elements describe which functions defined in the external script should be called. …Wait a second, isn’t defining what happens when you click an element defining a behavior … what is behavior doing in HTML? This is where attachEvent comes into play.

The JScript method attachEvent allows you to attach events from the script – a decoupled, replaceable, external script. If you implement something like what is shown below you can set the onclick event handler of an element in your HTML to call doSomething().
element.attachEvent("onclick", doSomething);


This probably looks great in Internet Explorer but if you run it in FireFox, clicking on that same element will do nothing. This reason for this is that Firefox does not recognize JScript methods – it’s implementation of JavaScript is standards compliant (imagine that). Firefox, instead, recognizes attachEventListener for the same purpose. So, you are stuck with a method that works for Internet Explorer and a method that works everywhere else, but before you jump into the code and use the useragent to detect which browser is being used, consider checking the support of each feature and then use the feature that is supported. This is demonstrated in the code snippet below.
if (element.addEventListener) {
element.addEventListener("click", doSomething, null)
}
else if (element.attachEvent) {
element.attachEvent("onclick", doSomething);
}


Hope this helps and keep on bustin’.

Microsoft Commands you to “See the Light”

It’s natural to be a little skeptical when Microsoft asks you to do anything (Windows Updates?), especially if it sounds like a mantra for a creepy cult, but it is a good time to “See the Light”. The light Microsoft wants you to see is their new rich interface framework Silverlight, and in it’s 3rd version it is ready for some serious consideration.

Silverlight is a web subset of windows larger UI library known as Windows Presentation Foundation (WPF) that provides for a user experience closer to that of a desktop application with the freedom of versatility of the web. Silverlight is cross-browser, cross-platform and is accessible to end users once they’ve downloaded (about 4mb) and installed the plug-in. The technology has been around for more than two years, but here are some reasons why Silverlight 3 introduces a great opportunity to join the cult…

• The library has never been more complete, with controls ranging from labels to data grids to autocomplete boxes to tree views.
• The tools have never been more useful and integrated.  Microsoft’s Expression Blend studio encompasses all that interface designers need to design an application.  This can be imported into Visual Studio for programmers to hook into the business logic, most likely in the form of Silverlight enabled WCF services.
• It has been adopted and implemented successfully by small are large companies alike.  A short list includes NetFlix, March Maness, Beijing Olympics, Hard Rock Memorbilia and more.
• Microsoft is betting the barn on this one to go up against flash based platforms.  You can expect many more improvements to the platform to come.
• The framework is the first by Microsoft to embrace the interaction design community.  The Sketchflow tool is a nice addition to aid in quick prototyping that can be resused to be the actual front end to the application.

I’ve got my re-education seminar to attend and I need to change into my Microsoft standard issue jump suit, but think about looking into the light if you are interested in going beyond what the traditional web application can offer. 

Microsoft’s official cult website can be found at SeeTheLight.com

Dev-It-Yourself: iPhone Apps

Thinking about how far cell phone technology has come, I wonder if it is even appropriate to call them phones any more.  They act as toys, TVs, radios, music players, cameras, computers, maps, oh and you can still call your friends.  It has been a revolution of hardware and software, hindered (or enhanced?) by the demand to make the devices more compact.  The revolution continues as cell phone manufacturers make available the ability to write software for these devices.

Perhaps the most high profile example of this is the iPhone with the ability for developers to create iPhone apps and then make them available in the iTunes store.  How cool is that? Very cool… and real people (as opposed to mannequins) are taking full advantage of the opportunity.  In fact, a former boss of mine has recently finshed and put to market, with the blessing of the MTA in San Diego, an iPhone app that provides helpful information on train schedule and fares in the San Diego area.  The app is called SD Trains and can be found in the iTunes store and purchased for the very modest fee 99 cents.  What a novel concept: let your users drive the product feature, don’t spend a dime developing these features, and rake in the royalties generated by your users.  Apple doesn’t get EVERYTHING right (replacable batteries anyone?) but they sure do hit a lot of home runs.

SDTrains, developed by Matt Fishman for the iPhone

If you are interested in doing some Dev-It-Yourself for iPhone check out a few of the resources below:

• iPhone Developer Center
• Port Your Web Apps to iPhone (and other dvices)
• iPhone UI library

Browser Busting: General Tips

Now that I’ve disected a very specific issue whithin one aspect of cross browser web development (see: Browser Busting: innerText), I’d like to pull way back and provide some general tips that will — hopefully — make browser busting a little easier for you.

You will find in solid cross browser applications that there are three technologies that make it all possible: (x)HTML, CSS, and JavaScript.  You can think of the application as a three legged stool (as shown in the technical diagram below) with each of these technologies being one leg of the stool.  The stool is at it’s most sturdy when all three legs are planted firmly.  I will provide a few tips below on how you can make these legs a little more sturdy and less like a pile of … well … stool.

The Failure Flea demonstrates the "pile of stool" principle.

Tip #1 – Treat HTML Like XML

Each browser has a slightly different take on how HTML elements should be rendered.  Writing HTML as if it were XML (XHTML) takes some confusion out of the situation and makes the code cleaner.

All tags should be close properly (<div><input /></div> is good) 

Tags should be nested properly (<div><span></div></span> is bad) 

Only use supported attributes with tags (<div width=100%></div> is ugly) 

 

Tip #2 – Only HTML Should be on an HTML Page

HTML defines content, CSS defines presentation, and JavaScript describes behavior.  They should be decoupled and replaceable.  This will help with debugging and enhancing the code.

Tip #3 – Don’t Abuse HTML Tags

Understand what each HTML tag is meant to be used for so that you can properly use them.  Though one browser may allow you to misuse a tag, another will render exactly what you programmed…a mess.

For starters…

•          DO NOT use tables to position stuff on the page.  Tables are meant to display tables of data.
•          DO NOT use divs as a substitute for tables.  Divs are convenient way to organize page content, but they should not be added simply to apply a style or position.
•          DO NOT use HTML tags that are meant to style the page.  Examples are: <b>, <i>, <u>, <br/>, <hr/>, <font>, dtc.
•          DO research what HTML tags are meant to do.

Tip #4 – CSS Belongs in an External Stylesheet

Maintaining css in an external stylesheet makes the code cleaner and easier to maintain and debug.  Setting style properties directly on HTML elements does not have support across all browsers and can have varied effects.

Bad Example:
<p width=100px border=red color=green>
This is green text with a red border.  It is also 100px wide.
</p>

Good Example:
<p class=“DebugMessage”>
This is green text with a red border.  It is also 100px wide.
</p>

Tip #5 – CSS is not Treated Equally in Browsers

One of the biggest challenges in X-Browser development is that HTML elements are rendered with built in styles by default which are different in each browser.  One way to alleviate this problem is to identify what those defaults are and change them using CSS.  This is called browser normalization (or css reset) .  Check out Eric Meyer’s blog at http://meyerweb.com/eric/tools/css/reset/ for one such strategy.

Tip #6 – JavaSscript Belongs in an External JS File

Maintaining js in an external file makes the code cleaner and easier to maintain and debug.  Anything that can be done using inline script can be done in an external file.

Tip #7 – Do Not Use JScript (IE Specific JavaScript)

Microsoft, eager to jump on the JavaScript bandwagon, created a non-standards compliant implementation called Jscript.  Some of the Jscript properties that we have come to rely on are no supported in standards compliant browsers.  Lucky for us there is usually a work around that results in the same behavior.  See my post on innerText for an example of this.

Tip #8 – Consider Using a JavaScript Library

If you don’t know what a JavaScript library is, do a web search for JQuery, or Dojo, or YUI, or Prototype…  You’ll find that some rabidly passionate people have come together to organize Javascript functionality (libraries) to solve common problems, such as cross browser scripting.  Introducing a third party set of JavaScript code to your project may not be appropriate, but if it is, it will save you hundereds of hours of cross browser debugging.

My apologies for the War and Peace size post here but I hope you find it helpful.  Good luck and keep on bustin’.

Nerdiest fundraiser ever?

Scum Club, an L.A. based professional interest group for agile software development, has developed an interesting (and super nerdy) way to raise funds for the group – a trading card game. That’s right, the Scrum Club is developing a game in the mold of such icons as Magic the Gathering, Star Wars, Pokemon, and Yu-Gi-Oh.  My Kevin Smith senses are tingling.  The game, dubbed “Corporate Espionage” ditches the mythical beasts and wizardy, however, and features characterizations of heros and wannabes of the business world.  Of course, the game is being developed using the Scrum agile development methodology and is used as a tool for exploring what Scrum is and how it should be used.  ‘Nuff said … you can check out Scrum Club here and Corporate Espionage here.

I couldn’t help but make a couple of suggestions for new cards in the “Not Another…” expansion pack.

Browser Busting: innerText

It’s no secret that JScript, MicroSoft’s implementation of JavaScript, is woefully non compliant with the ECMA standard.  So as a service to the web development community involved in browser busting their websites or web apps, I will be highlighting several JScript conventions that make consistent browser behavior a challenge.

The first of these conventions is the innerText property, which is commonly used to set the content of an element.  For example, the below JScript will attempt to set the content of “MyParagraph” to “Hello World”:

MyParagraph.innerText = "Hello World";

This property only exists in the JScript implementation of JavaScript and therefore should be avoided. What can be tricky about debugging the lack of support of innerText in modern browsers is that using innerText does not throw errors like other JScript conventions do, it is simply ignored.

OK, so the thought of having an important property that sets content on the page not work across browsers is certainly enough for us to realize that innerText shoud not be used, but what can we do about it? There are three methods that will accomplish the effect and are appropriate to some degree, but the I suggest the third.

The first option is to use the innerHTML property. The benefit to using this property is supported by JScript and modern Javascript, therefore, a simple global copy and replace of innerText can be sufficient to bring your code up to muster. The draw-back is that innerHTML doesn’t do exactly what innerText does. As the name implies renders HTML within the string passed to it. So if there are HTML tags that should not be rendered, this solution is not appropriate. Here is how it works:

MyParagraph.innerHTML = "Hello World";

The second option is to use textContent. The textContent property alleviates the HTML issue because it behaves exactly like innerText. Unfortunately, the price for this convenience is that textContent is not supported by JScript, and therefore, your code will be a little longer to make sure you use innerText or textContent as appropriate. Show me the money:


if(document.getElementsByTagName("body")[0].innerText == undefined)){
MyParagraph.textContent = "Hello World";
} else{
MyParagraph.innerText = "Hello World";
}


I saved the best for last … we don’t have to settle for HTML rendering issues or feature detection because we have firstChild.nodeValue. We can take advantage of the DOM tree structure to set the content of an element. This works across the modern browsers and Internet Explorer. Let there be light:

MyParagraph.firstChild.nodeValue = "Hello World";

Happy Busting!

Cross Domain Scripting … Ancient JavaScript Secret

Scott Cate, MicroSoft MVP and INETTA speaker, stopped by the UCLA campus to share some Visual Studio tips and trick with the LADOTNET user group.  It was a sampling of tips and tricks from Sara Ford, which Scott puts to video on his site http://scottcate.com/tricks/.  The tricks varied in value and relevancy, but they were new to me for the most part and definitely kept my attention.

The most interesting part of the presentation to me, however, was the introduction to JSONP.  JSONP (or JSON with padding) is a way to do cross domain scripting  using native JavaScript (impossible right?).  It’s actually an old technique that has gained popularity recently, as Scott Cate pointed out, but it is worth (re)learning to see if it is relevant to the work you do today – especially if you do AJAX development.  Other sites have described it better than I ever could, and I am still working through it myself, but do yourself a favor and educate yourself a little.  If this is something that has stumped you before, you’ll think to yourself  ”why didn’t I think of this before?”

Resources:
http://en.wikipedia.org/wiki/JSONP#JSONP
http://ajaxian.com/archives/jsonp-json-with-padding
…or just bing it.  I can’t do all of your work for you.

Not Another Tech WordPress Blog

…okay, maybe it is.  So what if it is?  If I’ve learned anything in the countless hours I’ve spent on crafting the perfect key words for a google search on why my code won’t work, it is that the tech community is a social one.  We are all familiar with the Hollywood portrayal of tech savvies as paranoid, underachieving, shut-ins, and though I can’t say that I don’t possess a bit of each of those three qualities, it is easy to see that the only thing tech savvies like more than excersizing their expertise is sharing it.  And so, I set forth on my modest quest to bring to others what others have brought to me … guidance, misguidance, inspiration, exasperation and maybe a chuckle or two.

The only thing I like more than run-on sentences is polls, and so I kick things off by asking what should the next windows foundation acronym from microsoft be?