Download - Buttons
![Page 1: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/1.jpg)
BUTTONS
A small unit of Input+Functionality+Design That turns out to be pretty important to get right...
![Page 2: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/2.jpg)
How Buttons used to be designed...
![Page 3: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/3.jpg)
Then it all became Cheesy(We began to use Mice rather than Keyboards...)
![Page 4: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/4.jpg)
These Buttons are all an illusion, of course...
![Page 5: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/5.jpg)
That code is still down thereunder the hood, even in Windows7
![Page 6: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/6.jpg)
And then Skinning came in Vogue...(circa 2000?)
Unintuitive interfaces (a lot of them just reacted to hotspots, and didn’t take the time to implement alternate images for mouse over, clicked, selected, etc... A good attempt...but spotty results...
![Page 7: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/7.jpg)
So the OS’s implemented it...
First some Linux branch used skinning... Then Apple copied them...Then MS followed suit... ... but sometimes copying just doesn’t come off as well as you thought it should have...
Dev costs shot through the roof: win controls got chromed, custom ones didn’t, etc.In addition 16, 32, 48 px icons was only a stopgap
![Page 8: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/8.jpg)
Skinning... explains how the HTML <Input type=“Button”...>
Got 15 years of extra game time, while not improvingStyling, Functionality, or Behavior.
![Page 9: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/9.jpg)
The (payed for) Web waits for no one...
Web developers tired of waiting... So now we ‘make’ buttons out of:
images + Anchor Tags + AJAX, JScript to short circuit the spec’s HREF
functionality... and replace it with custom functionality...
More images for Hover, Clicked, effects...
Creative, yes...but adds up to lots of added dev and QA testing time, swearing, and costs.
In addition: we’re not using the Specs.Why? Because the specs are not keeping up to the times.
![Page 10: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/10.jpg)
It’s all going to get better, right?
Nothing addressing this in the HTML 5 specs.
Admittedly, could be added before 2022, which is when HTML5 is due.
Yup. 2022.
![Page 11: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/11.jpg)
In 2022 you’ll be 12 years older...
![Page 12: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/12.jpg)
An exaggeration?A little HTML History...(Historically, Too Much LagTime)
When Dinosaurs roamed: SGML
1989: Tim Berners-Lee/Cauillau develop HTML in CERN’s basement. That was Cool. Unfortunately, right after that: IETF meetings, blah, blah, blah, bickering: everything slows down
1992: HTML 2.2 1995: HTML 3.0 proposed, but dies on the vine.
3.2 was unofficial....“included extensions to control stylistic aspects of documents, contrary to the "belief [of the academic engineering community] that such things as text color, background texture, font size and font face were definitely outside the scope of a language when their only intent was to specify how a document would be organized.“
1997: HTML 4.0 1999: HTML 4.1 2000: XHTML 1.0 2001: XHTML 1.1 2008: HTML 5 (18 years later!) proposed as a working draft
![Page 13: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/13.jpg)
Late, but still, CANVAS is coming, right?Get real. Reality is HTML5 Canvas is...graphically challenged...
HTML 5 Specs for the famous Canvas look more paltry than Silverlight version 1.0 (and really miles behind Silverlight 4.0 features)
![Page 14: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/14.jpg)
The problems are not limited to Buttons...
Or Controls: No AutoComplete combo, etc. <Input type=“StillNoDateControlAfter18Years”.../> <input type=“NoSliderEither”.../> No new controls being added (Grid, Trees, TreeGrids, Accordion, etc)
Or layout: No opacity, no zoom, no rotation... No drop shadow, no blur, no reflection... And woohooo -- you can have Tables...or CSS pretending to be Tables...but you
can’t go further (circular, triangle, perspective). Or distribution architecture:
Spare parts flying in close formation (No packaging, no versioning system). A slew of languages/ frameworks (Jack of all trades, master of none). No unit testing of whole swaths of functionality (Unit Tests of Jscript?!?) Not keeping up with the Jones (iPhone, Android, Mobile 7, TV ads...)
Wow. We can have Video. Just not in a format anybody uses yet...
No solution to dealing with different hardware specs Multiple DPI’s (higher and higher resolutions)
Hence Icons now are 16x16,32x32,64x64...before they woke up...
![Page 15: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/15.jpg)
Developers are creative...
It’s just that it’s maybe not the best use of their intellects to solve artificial problems...
![Page 16: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/16.jpg)
If things are broken...Let’s rethink things...
![Page 17: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/17.jpg)
I really did mean anything...
![Page 18: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/18.jpg)
I really did mean anything...
![Page 19: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/19.jpg)
Or a totally new Button...Same Functionality. Just Done my way...
![Page 20: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/20.jpg)
20
XAML: UI EventsTriggering StoryboardsAgControl62.xaml One use for UI Events is to
Launch or Stop Storyboards of Animations.
Again, Storyboards are defined as Resources Dictionary Items
So we know how to get at them (with their keyName)
And re-Type them to a StoryBoard
And Begin() them!
![Page 21: Buttons](https://reader033.vdocument.in/reader033/viewer/2022060109/55526c50b4c9052e1f8b5091/html5/thumbnails/21.jpg)
So what’s the answer?Horses for Courses. HTML is fantastic for Text. That’s what
it was designed for... Canvas ...in 2022... will be great. If
you are doing movies, it will be very useful.
If doing apps though, use something appropriate: better framework, better patterns, better controls, etc.