“LiveBlogging” the In>Control Web Design Workshop Conference

February 22-23, 2010 | Orlando, Florida
Day One

7:42am 02.22.10

Check in process was almost too smooth. Now I have 20 minutes to wait until the Keynote begins the day. I had a brief moment of panic when I read the cover of the brochure at my seat that said the conference was February 21-22. Trying to figure out how to explain that one at the office. Turned out to be a typo.

7:54am 02.22.10

So far the room is pretty empty with 5 minutes to kickoff, but folks are trickling in. I have a great wifi signal here, but have no idea who it is that is providing it. Name is "EOD Executive Office." I hope I don't get into trouble.

Keynote: Day 1

8:01am 02.22.10

And we are off! Telling us where the bathrooms are and other basic announcements. Ach! The JQuery session for today is cancelled!! Adobe will be doing something called "Javascript for Designers" which could be good as well. Starting off with a disappointment here.

Keynote speaker is Kelly Goto: "Designing for Lifestyle"

Different types of interaction…

Creating comfort with machine->human interaction is key. Do you trust the computer in your car/airplane/coffee maker not to crash?

Augmented Reality (AR) Layar iPhone App for London Tube Finder

8:32am 02.22.10

User Experience (UX) Components

8:37am 02.22.10

Weird non-segue into usability testing. And now a frothing Steve Jobs worship rant.

Experience Sampling: questions asked of users to target design issues.

Interesting talk overall. A bit disjointed, but gives a decent overview of the importance of considering the emotional components of design balanced with the practical.

On a brief break before the HTML5 session. Playing "Here Come the Hotstepper" on the sound system. Wow big flashback to the early 90s. Just thinking about this song a couple of days ago

HTML5 Workshop

9:16am 02.22.10

Here we go. Author, Christopher Schmidt, of the CSS Cookbook is our presenter. He must be nervous, he is talking really fast. I hope my brain can catch up.

Book: "Microformats Made Simple" by Emily Lewis

HTML5 "Take care of the luxuries and the necessities will work themselves out." Meaning, HTML5 is allowing for what we WANT to do with HTML with the assumption that it will work out in the end.

HTML5 is not as rigourous to validate.
<!DOCTYPE html>
<title>small</title>
<p>hello world</p>

This is a valid HTML5 page. No HTML HEAD BODY tags are required.

HTML5 tags include things like: HEADER, NAV, SECTION, ARTICLE, FOOTER. By default they display:inline.

9:51am 02.22.10

Also tags like VIDEO, TIME, AUDIO… wow! Here is an example:
<audio src="audio.ogg" autoplay controls></audio>

Really freakin' cool!

HTML5 Video: example:
<video src="video.ogg" width=320 height=240 autoplay=1 loop=1 controls></video>

HTML5 Canvas: can "draw" graphics using javascript. There is a JQuery plugin that creates graphics based on your HTML TABLE using the CANVAS tag. Download example at http://tr.im/Pjzy

10:17am 02.22.10

Taking a 5 minute break from the action.

There is a Google "shiv" javascript that makes HTML5 work in IE.

10:22 02.22.10

Getting started again. Watching a video from Google about HTML5 local database, app-caching and geolocation features. Very cool stuff, but probably not a whole lot of practical applications for Scitent.

10:35 02.22.10

Doing a very cool geolocation demo. Ooooh and ahhh. See the example here: http://2010.incontrolconference.com/eats/

11:09am 02.22.10

We had another little break. I took advantage and went for a short walk around downtown. Nice place walked by the public library. Very cool building.

CSS Workshop

11:15am 02.22.10

Author, Stephanie Sullivan hosts this workshop.

Original vision for the Web

A web site is content at its core.

The preamble continues. So far nothing other than stating the obvious. Let's keep our fingers crossed for some good content soon…

She seems to be shilling for Adobe: Flash is not evil, Adobe AIR is cool, a little afraid of HTML5. Hmmmmm…

11:31am 02.22.10

Three layers of content

Now we are onto an explanation of the box model. This ain't no CSS3 workshop.

Specificity: good slide here doing mathematical display of selectors. I hope she makes them available. Too much to copy here.

Not going to hold my breathe for her to provide her specificity slide: this is an even better description.

11:46am 02.22.10

Positioning: Static, Relative, Absolute and Fixed

OK, this was a good description of a fairly complex CSS technique.

12:00pm 02.22.10

Clearing: Wow. I never knew it was so complex. Look into the overflow:hidden property as a better solution than clear:all. It is the float that throws a wrench into the clear:all works. Good to know.

Margin Collapse: when two vertical margins touch, the larger takes precedence and smaller collapses into it. Does not work on floated elements.

12:13pm 02.22.10

Taking a quick break. Man, these people must have bladders the size of thimbles. Anyway, looking forward to the mobile styles part of the workshop. Stay tuned…

12:22pm 02.22.10

Getting back into it now. Yay!

Troubleshooting IE. "has layout" feature: proprietory property for IE6. Anything that gives dimension or positioning will instatiate the "has layout" trigger. Can be "fixed" with another proprietary property: zoom. Yuck. For more info look it up on her website.

12:33pm 02.22.10

Units of Measure:

12:39pm 02.22.10

Content on Mobile Devices:

1:09pm 02.22.10

Time to find some lunch…

1:58pm 02.22.10

Back to the action now after tracking down an awesome lunch: a "Shoyster Po' Boy" and buffalo fries at a place called the Crooked Bayou.

AJAX for Designers

2:02pm 02.22.10

Greg Rewis presenting. Described as an Adobe Evangelist. Lord help me.

Ajax = A collection of techniques for creating interactive web pages without having to reload web pages.

Giving some preliminaries about Javascript: manipulation of DOM, functions (anon. and named), syntax, variables (local and global), etc.

2:23pm 02.22.10

Firing up a Dreamweaver demo…

Using DW as a text editor. Feh…

That said, this is a pretty good basic intro to writing Javascript from scratch. DW does seem to have some good completion tools for writing JS code.

2:49pm 02.22.10

Now showing the effects of moving the script (a simple one to count the number of links on a page) around within the HTML. This is the segue into making scripts into functions…

2:54pm 02.22.10

The last example was a script to get information from the DOM. Now looking at manipulating the DOM using javascript.

Using a loop to identify each link on the page so that we can determine which link is clicked. Going to do this by adding an id element to each link on the page.

3:08pm 02.22.10

This is cool stuff. Of course watching someone who knows JS run a canned demo always makes things look so easy. It really does look easy. I wonder if the Matts will let me write some JS?

Check out Ajax Rain and
Assorted Garbage

Now talking about Widgets

3:25pm 02.22.10

Showing the implementation of a JQuery Accordion. Warning: JQuery does put presentation (rounded corners) into the JS. Changing it is difficult if you don't know where to edit the script.

3:40pm 02.22.10

Continuing on with a really good JQuery demo. Some extraneous bragging on Dreamweaver and how cool it is a Javascript editor.

Wrapping up the show by showing his favorite framework examples.

Advanced XHTML & CSS

4:02pm 02.22.10

Ethan Marcotte of Happy Cog presenting.

I like this: looking at building websites as a craft rather than meeting a bottom line or a simple means to an end.

That said, this could be more of a feel good session rather than a technical session. He keeps saying "wholistic." Oy.

4:15pm 02.22.10

Grid-based web design

This guy redesigned the w3c site. Using this design process as a real world example of grid based web design.

Big challenge of this design is a completely fluid width for the site.

4:25pm 02.22.10

Busting on fixed width web design. Too many different screen sizes and devices out there right now. Now more than ever.

Another plug for relative font-size. As a global CSS command is to set font-size: 100%;. Using a reset style to get all type to the browser default of 16px.

We do math to get the font sizes correct. Target Value / Baseline = Result. Example: 20px / 16px = 1.25em or 23px.

Oh, hey! This is the guy that wrote this article on A List Apart that I really love. Cool!.

4:44pm 02.22.10

Now we are going to learn how to apply the same sort of math to the column widths. We are going to get rid of all pixel widths. Need to set the overall max-width in ems. Cool. So if you want a max-width container of 1000px we have to do 1000px / 16px = 62.5em. The next step is to then use percentages to calculate the columns within the container.

4:51pm 02.22.10

This stuff is easy for doing type online. But what about media? Now we are onto that…

There is one simple css rule to handle this img{max-width: 100%}. Damn that was easy.

Oh, but of course this cool image trick does not work in IE6.

5:03pm 02.22.10

Now he is showing his favorite fluid layout sites. OK, I am officially a convert.

 

Now we are off on his second real world example of web design: the redesign of New York Magazine's Agenda…

5:20pm 02.22.10

Putting a plug in for TABLEs for tabular data. Making full use of tags like THEAD, TFOOT, TBODY and COLGROUP. Wow. COLGROUP? WTF?

Positioning elements off the page using left: -1000em; is used for accessibility as talking browsers still have access to the information that display: none; does not.

Ethan's blog is Unstoppable Robot Ninja.

5:35pm 02.22.10

Now are we going to the Q&A session…

5:42pm 02.22.10

Awesome stuff here today. Now time to call it a day…

6:21pm 02.22.10

Just made the long walk back to my hotel room from the venue. I was walking up my stairs just as it started raining. I reckon it will be a quiet evening at home tonight. Thankfully I have some leftovers from last night's take out. See y'all tomorrow…