Comment Feed for Touch PC: "Home UI" screencast (Coffeehouse on Channel 9)

Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

figuerres — Sat, 13 Jun 2009 03:32:11 GMT

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="./Untitled_1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="leftmenu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</body>
</html>

thats the basic menu - stack of buttons.

css: transforms the list into a menu:
#leftmenu ul {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
list-style-type: none;
}
#leftmenu ul li {
background-image: url('12.jpg');
line-height:86px;
height: 86px;
width: 288px;
margin: 0px;
padding: 0px;
}
#leftmenu ul li a:link {
color: white;
padding-left: 100px;
font-size: 30px;
line-height: 86px;
text-decoration: none;
display: block;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#leftmenu ul li a:visited {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding-left: 100px;
font-size: 30px;
line-height:86px;
text-decoration: none;
display: block;
}
#leftmenu ul li a:hover {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding-left: 100px;
font-size: 30px;
line-height:86px;
text-decoration: none;
background-image: url('12x.jpg');
display: block;
}
#leftmenu ul li a:active {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding-left: 100px;
font-size: 30px;
line-height:86px;
text-decoration: none;
display: block;
}

with the current graphic having text it does not look so good but this should give you the idea.

Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

Dorian Muthig — Sat, 13 Jun 2009 02:53:57 GMT

A pretty simple one, if you ask me. Just for you to copy and paste.

Download JS File

Put this in your HTML file:
[code language="HTML"]<script defer="defer" type="text/javascript" src="/scripts/ie6pngfix.js"></script>[/code]

Edit the location at need, or place the JS file in the scripts folder in the root of your domain. Done.

Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

me — Sat, 13 Jun 2009 02:47:02 GMT

ie6 still requires a kludge and is more popular than you might think

(inserts link i read about about ie6 last week ..somewhere)

"magority of corporate accounts still use ie6 bla bla

Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

figuerres — Sat, 13 Jun 2009 02:44:59 GMT

well it seems that the idea is to have a "rich" home-page ui that might not even come from a web server really.

so one time you download and cache that,m not a big hit. later you might do more with silverlight to do other animations and stuff.

yes the js clock is not huge... just an easy target to swap out ...

Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

Dorian Muthig — Sat, 13 Jun 2009 02:43:06 GMT

jamie said:
edit: no - pngs are garbage.. not fully supported yet

Do you live in the 90s? PNGs (without alpha channel) are supported since the times of IE5... when did that come out? 1998. It's 2009 now, every current browser supports them (with alpha channel).

Hey, I even have a 16bit (Windows 3.11) image editing program on an old CD around here that supports PNGs (without alpha channel though).

Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

me — Sat, 13 Jun 2009 02:25:20 GMT

ok well - lets file that under tomorrow then: remake all images transparent

or re-do everything ... its just a demo?

id rather make a new ui and call the images the same thing

edit: no - pngs are garbage.. not fully supported yet

jpgs stay - on this 1 theme (good enough for tests)
*replace all .jpg / .png ..later

*if there's a log in - fine - pngs - but if its me lookin after it - jpgs

*man i sounded irish/scottish there!

Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

JonathonW — Sat, 13 Jun 2009 02:13:53 GMT

You can't have JPEGs with transparent backgrounds... theming will be easier if you can separate the button backgrounds from the icons, and you can only do that if you use transparent PNGs (or GIFs, but you don't want to do that).

Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

Dorian Muthig — Sat, 13 Jun 2009 02:10:52 GMT

Don't do the clock in Silverlight, it's very simple JS... you don't need to load a browser plugin for that (which the user might have to download) unless you want to enhance the functionality to an extend where it would make sense. If you're doing anything Silverlight, do the whole thing in it, some sites don't like to be framed, you know?

@Jamie: Every graphics program has known of PNGs, and designers making skins have heard of the alpha channel advantage for years...

Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

me — Sat, 13 Jun 2009 02:08:16 GMT

....assuming there could be ... 1000's of people making their own themes - 1% of which who would have heard of png files... lets just stick with jpgs for the "demo"

Re: Re: Re: Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

figuerres — Sat, 13 Jun 2009 01:59:43 GMT

Jamie: Can you do a bit of graphic for me to work this out.

make 2 "button" images the normal and hover image w/o any text or icons.

then a set of the icons, png with transparent backgrounds.

I generaly use just a button and text but for this i will see how overlaying the icon works or does not work.

idealy we will only need to load the two images for the body of all the buttons.

then just the icon will be per-button.

the html for each button should then only have an img tag and an a-href tag

the css will do the swap of the background image w/o code by using the a:link a:hover and a:visited css style/behaviors

that removes all that javascript in the button stck for most of the buttons, the back button still gets it's script to do it's thing.

the rest i am leaving alone as i just want to "fix" one thing for you at this time :)

later we might think about doing the "Clock" with a bit of Silverlight and then go from there....

Re: Re: Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

me — Fri, 12 Jun 2009 23:39:38 GMT

ok :)

www.jgrant.com/touch/ui.zip

* please return it in a zipped file/folder that has a clear index to open in editor.

Re: Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

figuerres — Fri, 12 Jun 2009 23:22:14 GMT

Jamie:

ok forget the fact that i used the c* word and think about this, we can make the button stack's html markup go from the current size down to a fraction of the size. Slim down by about 75% in size.

same look, same function, less stuff to have to edit. easier to read when you do have to edit it.

anything wrong with that ? :)

Re: Touch PC: "Home UI" screencast

You can't handle my name — Fri, 12 Jun 2009 22:50:00 GMT

it blew my mind jamie.....nah it was the music ... was making me feel sleepy but it was so bad.. I just couldn't nod off ..

looks like it should belongs on the desktop really, oh thats bin done.

your photos page only goes to fakebook ? ..might want to look for some other css styles to use with stylish(ff addon) make some of those other sites fit in better with your all black ui. If you add flickr, I could donate you the best black flickr css, maybe.

I'm now thinking of something similar too, only I plan have it read my mind, while my eye movements provide gesturing control...and it will look like perfection with all the customization and control a user could have want. yes

Re: Re: Re: Touch PC: "Home UI" screencast

SlackmasterK — Fri, 12 Jun 2009 22:27:26 GMT

The HQ version is pretty decent. My point stands on the embeds.

Re: Re: Re: Touch PC: "Home UI" screencast

me — Fri, 12 Jun 2009 21:38:25 GMT

Couple of quick thoughts...

- Touch enters in a new era of interaction - and one that quite frankly does NOT work well will mouse style applications.
I would never want to use photoshop - and corel without a mouse - but when it comes to Touch - the way you view your computer is different.

for example - where on the net is this silly site/ui i made? its not...because all the tech giants dont work together - and are late to the game.

- with touch - amazing mouse things - are not so amazing. like mp3s are worse than cda cd music files. <borat>not!</b>)

Id like a chess game - to work with this. will i use the real cool 3d microsoft chess game? nope. not unless its online - and i can put it in an iframe.. - speaking of which - all of live.com takes over browser window... thats why calendar is bogus facebook one - because live/bing wants full control

*google is no better... if youve used their "office" everything opens in new windows to the point of madness (target=blank gone wild)

WHO out there will make a browser that will run applications like photoshop in an iframe? who will enable the world to make their own home UIs instead of trying to figure out ways to help the cable companies ream us all even further ($)

Finally - touch - as released in this version - only showcases how LAME non-touch apps are - and how lame - the entire experience is without basically - MAKING your own.

will anyone help us all do that?

last point - if i were MS - i would STOP hp from selling anymore of these pcs till i get a pen out - that is percice - that still works with windows and peoples apps

currently - this machine - (you gave me that i love) does nothing more than make a farce of everything you are doing (with no pen)

User UIs - charge!!! (errr.. no ...free!!!!)

The ultimate user mashup - between windows apps and the web. who will enable it? *whoever does will score a heck of a lot of good will

ok theres a rant.. true though to me

EDIT: - you could annouce the " Bing CrossBee" - bring back msn bee - he cross pollinates all sites and iframes with Bing apps. no target=top. no target=blank haha (..and NO ads)

Re: Re: Touch PC: "Home UI" screencast

me — Fri, 12 Jun 2009 21:01:15 GMT

its not the greatest quality... full screen at 1024x768 you can read most stuff (on that video)

Re: Touch PC: "Home UI" screencast

SlackmasterK — Fri, 12 Jun 2009 20:59:18 GMT

Dammit youtube, embeds without a fullscreen link are pretty much useless. Except that they link to the video which has a fullscreen button. Sigh.

Re: Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

me — Fri, 12 Jun 2009 20:38:18 GMT

great... css... non visual code for images
no thanks ... but if youd like to write a login - customize links.... ok css ;)

edit: that sounded over the top... i just hate css

- i like master template that you can edit and see

"NEW! Frontpage CSS - same ease of use - output to real code - wysiwyg"
but... nooooo... we get expression...with no table drawing or inline preview

edit: id love to know if Expression webs numbers match Frontpage numbers (when it was sold)

Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

figuerres — Fri, 12 Jun 2009 20:36:53 GMT

tonight i just might send you a bit of html -- we can make that button stack much nicer with some CSS....

and less stuff in the html file at the same time.

Re: Re: Re: Re: Re: Touch PC: "Home UI" screencast

PaoloM — Fri, 12 Jun 2009 20:33:46 GMT

Yeah, youtube is now borked.

Re: Re: Re: Re: Touch PC: "Home UI" screencast

me — Fri, 12 Jun 2009 20:27:38 GMT

cool - thanks

ps - there seems to be huge youtube outages in canada - not sure if its even showing up but if paolo saw it it must be youtube

(works...doesnt work...disappears on c9 .. youtube down... youtube up....

Re: Re: Re: Touch PC: "Home UI" screencast

PaoloM — Fri, 12 Jun 2009 20:19:39 GMT

It's good Jamie.

I'm actually working (on my spare time) on something similar, only the plan is to use voice instead of touch for the main UI.

Re: Re: Touch PC: "Home UI" screencast

me — Fri, 12 Jun 2009 20:14:27 GMT

...is that good or bad? ;)

remember - this is suposed to be a "walk by / quick" eXPerience

edit: note the browser i ended up having to use... IE is just too sensitive to touching the screen - kept zooming in and out - cant disable...FF did it correct (plus i loaded extention FULL fullscreen

Re: Touch PC: "Home UI" screencast

You can't handle my name — Fri, 12 Jun 2009 20:13:04 GMT