Forums
|
Round Tables TopCoder Studio Contests |
|
My
Post History | My Watches | User
Settings View: Flat | Threaded | Tree Watch Thread Previous Thread | Next Thread |
| Forums > TopCoder Cookbook > Studio Build Competitions (Prototypes, Flash, etc) > Studio Basic #2: Getting Started to UI Prototype | ||
| Studio Basic #2: Getting Started to UI Prototype | Reply | |
|
This preceding text is created to help anyone who interested to participate in UI Prototype contest. To participate in this contest is easy, you must be a TopCoder member, at least 18 years of age, meeting all of the membership requirements. So what is it UI prototype, and why prototype are created? (Note: I took this text from this thread, created by adroc) 1) Client communication - an HTML prototype helps a client visual all the interactions their website or application is going to do as opposed to verbal descriptions or staring at one or two storyboards. 2) To test usability and user interest - To make sure the click-paths/user workflow makes sense before going into development 3) Help sell an idea 4) To prove that something is possible or a design can be done as planned At TopCoder they take it one step farther and try and make its HTML prototypes ready for development (correct HTML/CSS markup) so a client knows their code is ready for production and works in the browsers they have specified. (End of adroc's credits) Here are several official online documents provided by TopCoder for anyone interested in UI Prototype contests: - UI Prototype Competitions http://www.topcoder.com/wiki/display/tc/UI+Prototype+Competitions - Getting Started in UI Prototype Competitions http://www.topcoder.com/w.....pe+Competitions - UI Prototype Review Board Guidelines http://www.topcoder.com/wiki/display/tc/UI+Prototype+Review+Board+Guidelines UI Prototype Basic In addition to official documents above, here is my personal account as a prototype competitor at TopCoder. I will covers informal aspect of it, and go further some fun stuff in it. Skills To compete in UI Prototype contest you must have knowledges in several areas: from (X)HTML, Cascading Style Sheet, and some JavaScript skills would add a lot benefit. Those main required skills. XHTML or HTML code is formed from a specific XML specification. It contains tags and properties to wrap contents used in web sites. This HTML documents then be styled by CSS document. CSS is formed selectors and classes, and apply them with several user interface rules. The rules ranging from layout, color, and typography. For better understanding on how to build web sites using HTML and CSS, you could read some references available online or read some books. Some addition skills need also a good understanding on how to use Adobe Photoshop, and some knowledge to operate Adobe Illustrator is a bonus. The other skill needed is some good understanding on one of many text editor to work with the code for the prototype. As you know, prototype work mostly done by hand-coding all the stuff, whether it is HTML, CSS, and javascript code. You must at lest have known one good text editor you could work with. My personal picks is Adobe Dreamweaver (available for both PC & Mac). If some considers Dreamweaver license is bit pricey, there are several alternative free software like Eclipse based IDE (Win & Mac), Crimson Editor (Win), as well Notepad++ and Notepad (win), and TextEdit (mac). Aptana is also a good choice, and it has a separate licensed option. For macintosh platform, there are some cool software for prototype work like BBEdit, Textmate, and Coda. For CSS editing there is CSS Edit. Looks a lot huh? As for my personal preferences, I use mac for work and I own Dreamweaver and Coda license and I used both often. Tough one of all editor is Dreamweaver. Several of Dreamweaver's key feature was auto class naming suggestion, auto finding for image or resources as you type in the code, and the powerful global auto-updating links when you move or rename files. For quick edits, I use Coda as it light and beautiful. Working Environments To able to work on most UI Prototype projects, there are some working environment requirements that you should met, at least minimally. As stated in most UI Prototype contest requirement, your prototype must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. Sound a bit crazy, huh? Should you own Mac or PC? Wow, that would take a huge investment before competing to prototype contests. But don't worry. The real concern is browsers. You don't need to test in all platforms, but you should do well testing the prototype in any mentioned browsers. IE6 is available on XP. IE7 or IE8 is available on Vista. Firefox available on all platforms, and you can only take one version as testing because it is impossible to have both at once. Chrome and Safari are also available on mac and PC environments. So my best bet is, it much be better own a mac, then you can run virtualization on it, so you will have Mac, XP, and Vista at once. For virtualization software in mac, you can use Parallels or VMWare Fusion, both sold at the same range price. If you only having Windows machine, don't worry. You should, however, still tests your work in both XP and Vista platforms. Be gentle and explain your environment by making proper documentation on your work, and stated clearly if you are unable to met to the requirements testing. The key to successful prototype is test and much more test on all required platforms and browsers. So, if you didn't have the environments, you might lose a sight of your work. Slicing UI Prototype contests usually provides one or more storyboard (mockup) that taken from previous contest. These documents usually in Adobe Photoshop format, but rarely in Adobe Illustrator. You must able to slice this graphic files into appropriate small chunks of graphic files that will be used as images into your prototype. The first step to start your prototype work is to slice any provided storyboard into small graphic files. All the background, headers, some navigations if needed, are cropped or sliced from the huge provided storyboard. A good understanding of design as well as image optimization is needed to better create a good prototype, as the final result needed is a fast-load web page template that will get into production. ........continued in another post (8000 chars exceeded) |
|
| Re: Studio Basic #2: Getting Started to UI Prototype (response to post by oton ) | Reply | |
|
...continued text... Coding After you did the slicing part. Now is the coding time. There are many tutorials, articles or books that will give you good understanding on how creating good web site. O'Reilly does published some good books you could read. One of my favorite are High Performance Web Sites (Steve Souders, O'Reilly, September 2007). This book will help you to meet high standard web sites development as practiced by some high profile company. By participating in UI Prototype contests, you should also aware some standards that TopCoder make the prototype works flawlessly. Here are some useful habits:
Please note, some contest allowed the use of a JavaScript libraries created by others. Some are not. However, good understanding of some JavaScript libraries are necessary. Some of the popular libraries are jQuery, YUI, Script.aculo.us (Prototype JS framework) and also Dojo. Debugging and Testing Then the most boring part. It really is. However, if you do some good amount of prototype works, you will find some good habits and future work will become easier and faster. I even experienced that I don't need to have to deal with some nasty bugs (hint: IE6, hello!). Here are some of good habits:
...End for now... Will be editing later :) |
|
| Re: Studio Basic #2: Getting Started to UI Prototype (response to post by oton ) | Reply | |
|
Really useful information. I think you should use the format problem-solution-discussion. I have some notes: - You don't need vista to use IE7/IE8 and to install IE6 you can use "multiple_ie" which let you install probably all IE versions (I'm not sure about IE8) So, one win OS is enough for all IEs. - In the debugging/testing part it's worth mentioning Firebug extension for Firefox as the ultimate tool for web developers, and the developer toolbar for IE. Tidy (and Firefox tidy extension) is also a good tool to have as a web developer, it fasten your web development by making easy validating/formatting your code. - I disagree with you when you say : "Tests your work from the most modern browser first. Do not deal with IE6 first, as this browser having lots of bugs rendering." I used to test my work entirely on Firefox first, then test the other required browsers, and I missed many deadlines because of that :) For me, The best think to do it to test whenever you think it's necessary and test in ALL browsers. This way you're sure that you are in the right track and that you won't have to correct the same mistake many times :) Great work oton ;) |
|
| Re: Studio Basic #2: Getting Started to UI Prototype (response to post by AjJi ) | Reply | |
|
Just small notes too from me: - You can use IETester too, as far as i know can running IE8, IE7 IE 6 and IE5.5 on Vista and XP. And for me to completed the prototype, i always used to test my work on Safari 4 Mac then test the other browser on Mac or Windows. Cheers guys :) |
|
| Re: Studio Basic #2: Getting Started to UI Prototype (response to post by lunarkid ) | Reply | |
|
Hey guys! Thanks for the feedback. Really appreciate it. I hope I can fixing it in the next two days as the deadline approaching. Well, to write this cookbook, we need a lot of time :) I still have others idea need to write. Oh, only 24 hours a day.... |
|
|
Forums
>
TopCoder Cookbook
>
Studio Build Competitions (Prototypes, Flash, etc)
> Studio Basic #2: Getting Started to UI Prototype
Previous Thread | Next Thread |
|
