HTML Elements  Standards         by: Tiago Cardoso
Why bother? I can still do it● I can do it all with client-side handling● Every element is standard-natively clickable● Pr...
Well, you kinda should bother!● Yahoo: 2% of their users are jscript-disabled● Statistics dont tell whole story: No-js-use...
● Browser native styling for elements.● Screen readers, Mobile Devices, etc...  devices with other user inputs. Semantics ...
● Specific events. ex: visited/clicked/etc.... for  anchor tags.● - anchor tags get crawled, button tags do not  ("nofollo...
Part 1Anchor Tags and Buttons
ElementsAnchor Tag: <a ....></a>Button Tag: <button>....</button>Input Submit: <input type="submit"/>Input Button: <input ...
<a href=#a> The Anchor Tag </a>●    A link is a connection from one Web resource to another.●    The link starts at the "s...
<button> The Button Tag </button>● form inner element● Defines a push button, submission of form.● Inside the element you ...
<input type=submit value=Submit/>● form inner element● Defines a button for submission of form.● Label of the button is de...
<input type=button value=but /input>● form inner element● The input buttons represents a button in a  form with no default...
ConclusionLinks vs. buttons- Links must never change state, while buttons could potentially change state.- similar to REST...
Use case: the post action links             Like/Comment/Share
Use case: the post action links              like
Use case: the post action links            comment
Use case: the post action links             share
Use case: the post action links     like
Use case: the post action links    comment
Use case: the post action links     share
Semantic AnalysisLike ActionAdds a new “Like/Follower” to a post -> changes state in the server.Comment ActionMakes the co...
Use case: the post action links           semantic match               3-1
Questions?Possible Topics:● discuss the nofollow attribute;● web-crawling implications in our HTML documents;
End of Part 1
Part DeuxForm Elements
Intro● Design and Appearance decisions sometimes drive the  Architectural Design.● Clients sometimes (most of times?) base...
Why you should use?          (form elements)● No need to provide script that handles  functionality● Works for JS and no-J...
Why would you run away from it?● Form native elements are usually hard to  style.● Cross-browser styling on top of that (<...
Radio Buttons and CheckboxesRadio Buttons:   - used for selection of an item from a list of items.Checkboxes:   - used for...
Radio Buttons and CheckboxesIssues:● how to style them like tag buttons?● how to make the radio/checkboxes  disappear and ...
Use case - RightclearingThe Tags ● Multiple selection of items, orthodoxly represented by   checkboxes; ● styling concerns...
Use case - RightclearingPros:● looks really good in all of the supported browsers!Cons:● a lot of client-side scripting (t...
LET THE BROWSER WARS BEGIN!standard css:.genres {                                      div, span, applet, object, iframe, ...
Tryout 1: Anchor Tag Tags                                                                              (present)          ...
Anchor Tag Tags: OutputFirefox
Anchor Tag Tags: OutputFirefoxChrome
Anchor Tag Tags: OutputFirefoxChromeOpera
Anchor Tag Tags: OutputFirefoxChromeOperaIE9
Anchor Tag Tags: OutputFirefoxChromeOperaIE9IE8
Anchor Tag Tags: OutputFirefoxChromeOperaIE9IE8IE7
Tryout Deux: Checkbox Tags                                                                                (future?)HTML:  ...
Checkbox Tags: OutputFirefox
Checkbox Tags: OutputFirefoxChrome
Checkbox Tags: OutputFirefoxChromeOpera
Checkbox Tags: OutputFirefoxChromeOperaIE9
Checkbox Tags: OutputFirefoxChromeOperaIE9IE8
Checkbox Tags: OutputFirefoxChromeOperaIE9IE8IE7
Checkbox Tags: OutputFirefoxChromeOperaIE9IE8IE7Safari (it will work in IE 10)
ConclusionsAppearance1 - Everything looks good.   (unsupported css features in the IE <=9, like border-radius and text-sha...
Appearance over Functionality               orFunctionality over Appearance?
Questions?Possible Topics:● Why doesn’t the checkbox disappear in the IEs 8-?(hint: IE is evil)
Referenceshttp://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/http://www.w3.org/TR/...
Upcoming SlideShare
Loading in …5
×

Html standards presentation

751 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
751
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html standards presentation

  1. 1. HTML Elements Standards by: Tiago Cardoso
  2. 2. Why bother? I can still do it● I can do it all with client-side handling● Every element is standard-natively clickable● Prevent any native handling in every custom element event scripting (e.preventDefault...)● it only works with javascript in some cases.
  3. 3. Well, you kinda should bother!● Yahoo: 2% of their users are jscript-disabled● Statistics dont tell whole story: No-js-users cant reach all pages in only-javascript websites and tend not to come back if nothing works.
  4. 4. ● Browser native styling for elements.● Screen readers, Mobile Devices, etc... devices with other user inputs. Semantics very important.● Focusable elements (tabindex does not solve it all)● Navigable through keyboard tab key.
  5. 5. ● Specific events. ex: visited/clicked/etc.... for anchor tags.● - anchor tags get crawled, button tags do not ("nofollow" rule is not followed 100%)
  6. 6. Part 1Anchor Tags and Buttons
  7. 7. ElementsAnchor Tag: <a ....></a>Button Tag: <button>....</button>Input Submit: <input type="submit"/>Input Button: <input type="button"/>
  8. 8. <a href=#a> The Anchor Tag </a>● A link is a connection from one Web resource to another.● The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.)x.html c.html<a href="#b">..</a> <html....> ...<a id="b" href="c.html">...</a>
  9. 9. <button> The Button Tag </button>● form inner element● Defines a push button, submission of form.● Inside the element you can put content, like text or images.
  10. 10. <input type=submit value=Submit/>● form inner element● Defines a button for submission of form.● Label of the button is defined by its value attribute. No option to change background image natively.
  11. 11. <input type=button value=but /input>● form inner element● The input buttons represents a button in a form with no default behavior.● Input buttons and input submits are styled similarly (the same difficulties, therefore).● Typically associated to client-side behaviour.
  12. 12. ConclusionLinks vs. buttons- Links must never change state, while buttons could potentially change state.- similar to RESTful semantics; GET vs. POST/PUT/DELETE
  13. 13. Use case: the post action links Like/Comment/Share
  14. 14. Use case: the post action links like
  15. 15. Use case: the post action links comment
  16. 16. Use case: the post action links share
  17. 17. Use case: the post action links like
  18. 18. Use case: the post action links comment
  19. 19. Use case: the post action links share
  20. 20. Semantic AnalysisLike ActionAdds a new “Like/Follower” to a post -> changes state in the server.Comment ActionMakes the comment form visible to the client -> client side flickering.Share ActionFacebook: Opens a pop-up formRestorm: Loads an inline form
  21. 21. Use case: the post action links semantic match 3-1
  22. 22. Questions?Possible Topics:● discuss the nofollow attribute;● web-crawling implications in our HTML documents;
  23. 23. End of Part 1
  24. 24. Part DeuxForm Elements
  25. 25. Intro● Design and Appearance decisions sometimes drive the Architectural Design.● Clients sometimes (most of times?) base their requisites on something they saw, like how it looked, but dont know what it does. Developers tend to sometimes follow that lead. Should it be the other way round? Is there a balance?
  26. 26. Why you should use? (form elements)● No need to provide script that handles functionality● Works for JS and no-JS forms ( <3 )● All reasons described in Part 1 that apply to them
  27. 27. Why would you run away from it?● Form native elements are usually hard to style.● Cross-browser styling on top of that (<3 your IEs)(please interrupt me if you have something to add to this list)
  28. 28. Radio Buttons and CheckboxesRadio Buttons: - used for selection of an item from a list of items.Checkboxes: - used for selection of multiple items from a list of items.checked: Gives the default checkedness of the input element.name: Gives the name of the input element.required: When specified, the element is required.value: Gives the default value of the input element.
  29. 29. Radio Buttons and CheckboxesIssues:● how to style them like tag buttons?● how to make the radio/checkboxes disappear and leave only the label?● And how to make them work in every used browser?
  30. 30. Use case - RightclearingThe Tags ● Multiple selection of items, orthodoxly represented by checkboxes; ● styling concerns led to the decision of implementing them with anchor tags supported by an hidden input field and a javascript plugin;
  31. 31. Use case - RightclearingPros:● looks really good in all of the supported browsers!Cons:● a lot of client-side scripting (the better part of a custom plugin of ours) was written to simulate part of the behaviour that the checkbox natively provides.● non-focusable, does not respond to keyboard events (no mouse, no fun. could be part of the plugin mentioned above, but it would just bloat it).● javascript-dependent, main reason why the RC search doesn’t work without script (correct me if I’m wrong).
  32. 32. LET THE BROWSER WARS BEGIN!standard css:.genres { div, span, applet, object, iframe, h1, h2, border: medium none; h3, h4, h5, h6, p { border-radius: 0 0 3px 3px; background: none repeat scroll 0 0 float: left; transparent; margin: 0; border: 0 none; padding: 5px; font-size: 100%; display: inline-block; margin: 0; vertical-align: middle; outline: 0 none; background: url("http://www. padding: 0;rightclearing.com/images/rightclearing/blue. vertical-align: baseline;png?54f75c7") repeat scroll 0 0 transparent; } margin-right: 0;}
  33. 33. Tryout 1: Anchor Tag Tags (present) a {HTML: border: 1px solid rgba(33, 33, 38, 0.55); color: rgba(33, 33, 38, 0.9); cursor: pointer; float: left; font-size: 13px;<div class="genres"> font-weight: normal; line-height: 24px; <a href="#" data-value="2" class="genres_2"> margin: 0 0 3px 3px; position: relative; <div class="left"></div> white-space: nowrap; border: medium none; <div class="center"> opacity: 1; background: none repeat scroll 0 0 transparent; border: 0 none; <span class="tag_text">Alternative</span> font-size: 100%; outline: 0 none; </div> vertical-align: baseline; text-decoration: none; <div class="right"></div> } .left { </a> border-radius: 3px 0 0 3px; width: 5px; <a href="#" data-value="3" class="genres_3 selected"> } .right { <div class="left"></div> border-radius: 0 3px 3px 0; width: 5px; } <div class="center"> a:hover { color: #0096E6; <span class="tag_text">Rock</span> text-shadow: 0 0 4px rgba(0, 150, 230, 0.4); } </div> a:hover > div { background: none repeat scroll 0 0 #0096E6; <div class="right"></div> color: #FFFFFF; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6); </a> } a.selected {</div> background: url("http://www.rightclearing.com/images/rightclearing/blue.png? 54f75c7") repeat scroll 0 0 transparent; }CSS:a div { display: inline-block; float: left; height: 24px !important; color: #FFFFFF;}
  34. 34. Anchor Tag Tags: OutputFirefox
  35. 35. Anchor Tag Tags: OutputFirefoxChrome
  36. 36. Anchor Tag Tags: OutputFirefoxChromeOpera
  37. 37. Anchor Tag Tags: OutputFirefoxChromeOperaIE9
  38. 38. Anchor Tag Tags: OutputFirefoxChromeOperaIE9IE8
  39. 39. Anchor Tag Tags: OutputFirefoxChromeOperaIE9IE8IE7
  40. 40. Tryout Deux: Checkbox Tags (future?)HTML: CSS: label { border: 1px solid rgba(33, 33, 38, 0.55); color: rgba(33, 33, 38, 0.9);<div class="genres"> cursor: pointer; float: left; <label> font-size: 13px; font-weight: normal; <input type="checkbox" name="search[genres]" line-height: 24px; margin: 0 0 3px 3px;value="2"> position: relative; white-space: nowrap; <div class="title"> border: medium none; opacity: 1; Alternative background: none repeat scroll 0 0 transparent; border: 0 none; </div> font-size: 100%; outline: 0 none; </label> vertical-align: baseline; } <label> .title:hover { <input type="checkbox" name="search[genres]" background: none repeat scroll 0 0 #00AAFA;value="3"> color: #FFFFFF; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6); <div class="title"> } :root input { Rock position: absolute; clip: rect(0,0,0,0); </div> } </label> .title { display: inline-block;</div> *display: inline; border-radius: 3px; padding: 0 5px; } input:checked + .title { background: none repeat scroll 0 0 #0096E6; color: #FFFFFF; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6); }
  41. 41. Checkbox Tags: OutputFirefox
  42. 42. Checkbox Tags: OutputFirefoxChrome
  43. 43. Checkbox Tags: OutputFirefoxChromeOpera
  44. 44. Checkbox Tags: OutputFirefoxChromeOperaIE9
  45. 45. Checkbox Tags: OutputFirefoxChromeOperaIE9IE8
  46. 46. Checkbox Tags: OutputFirefoxChromeOperaIE9IE8IE7
  47. 47. Checkbox Tags: OutputFirefoxChromeOperaIE9IE8IE7Safari (it will work in IE 10)
  48. 48. ConclusionsAppearance1 - Everything looks good. (unsupported css features in the IE <=9, like border-radius and text-shadow)2 - Everything looks at least functional. GracefulDegradation.Functionality1 - Works with javascript.2 - Works. point.
  49. 49. Appearance over Functionality orFunctionality over Appearance?
  50. 50. Questions?Possible Topics:● Why doesn’t the checkbox disappear in the IEs 8-?(hint: IE is evil)
  51. 51. Referenceshttp://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/http://www.w3.org/TR/html401/struct/links.htmlhttp://www.w3schools.com/tags/tag_button.asphttp://discuss.joelonsoftware.com/default.asp?design.4.541972.17http://www.w3.org/wiki/HTML/Elements/input/submithttp://www.w3.org/wiki/HTML/Elements/input/buttonhttp://www.w3.org/wiki/HTML/Elements/input/radiohttp://www.w3.org/wiki/HTML/Elements/input/checkboxhttp://jsfiddle.net/http://lea.verou.me/2011/05/rule-filtering-based-on-specific-selectors-support/http://yfrog.com/h7ja8ep

×