Your SlideShare is downloading. ×
0
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The web standards gentleman: a matter of (evolving) standards)

5,991

Published on

This talk discusses standards evolution, HTML5 and CSS3 in detail. Starting with the history of HTML and CSS, it goes on to show how HTML5 and CSS3 were developed, why they were necessary, the …

This talk discusses standards evolution, HTML5 and CSS3 in detail. Starting with the history of HTML and CSS, it goes on to show how HTML5 and CSS3 were developed, why they were necessary, the problems they aim to solve, what the main new features are and why they are so useful, and how we can start using these features in the real world, right now. It also provides advice for the discerning web standards gentleman.

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

No Downloads
Views
Total Views
5,991
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. The web standards gentleman:A matter of (evolving) standards Chris Mills, April 6th 2011
    • 2. Who the hell am I?• Opera dev relations guy• Open standards evangelist• Tech author and editor• Web education agitator• Metal drummer
    • 3. A matter of standardsof standards evolutionof HTML5of CSS3of gentlemanly conduct!
    • 4. Gentleman spotting...
    • 5. Gentleman spotting... ✓
    • 6. Gentleman spotting...
    • 7. Gentleman spotting... ✘
    • 8. Gentleman spotting...
    • 9. Gentleman spotting... ✓
    • 10. Gentleman spotting...
    • 11. Gentleman spotting... ✘
    • 12. Gentleman spotting...
    • 13. Gentleman spotting... ✘
    • 14. Your style is defined by what makes you feel most comfortable. http://www.therulesofagentleman.com/no-35/
    • 15. How did this stuff evolve?
    • 16. Brief history: inception•HTML first proposed around 1990/1 by Tim Berners-Lee•CSS invented by Håkon Wium Lie and Bert Bos 1994/5
    • 17. Brief history: standards? •HTML3 standardised 1995, HTML4.01 finished 2001 •CSS1 standardised 1996, CSS2 in followed in 1998, CSS2.1 in 1999
    • 18. Finished! Whats next?
    • 19. Theres nothing wrongwith HTML4 and CSS2
    • 20. But things dont stand still!•People started to use HTML/ CSS for things they werent intended for•Browsers implemented new features•New browsing devices appeared
    • 21. This led to...•Inefficiency•Inaccessibility•Inconsistency•Incompatibility
    • 22. CSS3•CSS3 work started around 1999•Over 40 modules as of 03-2011•Some are more stable than others
    • 23. HTML5•W3C decided the future was XHTML•This didnt go down well with the web community•HTML5 started by WHATWG around 2004•Adopted by W3C 2008
    • 24. HTML5 and CSS3 designed to•Be backwards compatible•Compete with plugin tech•Be more in keeping with what we are actually doing•Add more efficient, powerful features•Be as accessible as possible
    • 25. HTML5 and CSS3have more bling!
    • 26. Common Sense Always Wins.Common Sense is the new black. http://www.therulesofagentleman.com/no-1/
    • 27. Why are HTML5 andCSS3 so good for us?
    • 28. Theres many reasons agentleman should care •More consistency •Less presentational/ unsemantic markup •Better built in accessibility •Less JavaScript/Photoshop •Less Flash •More tipples
    • 29. Shut the computer and pick up anewspaper every once in a while. http://www.therulesofagentleman.com/no-12/
    • 30. New markup: better semantics
    • 31. A typical web site<div
id="header"></div><div
id="nav"></div><div
id="main">

<div
class="article"></div>

<div
class="article"></div>



...</div><div
id="footer"></div>
    • 32. Common classes and IDs Google and Opera carried out studies: • http://code.google.com/webstats/ 2005-12/classes.html • http://devfiles.myopera.com/articles/ 572/idlist-url.htm • http://devfiles.myopera.com/articles/ 572/classlist-url.htm
    • 33. Most common IDs
    • 34. Most common classes
    • 35. New HTML5 markup<header></header><nav></nav><section
id="main">

<article></article>

<article></article>



...</section><aside></aside><footer></footer>
    • 36. Where does this leave the humble Div? Use it for anything that isn’t covered by the other new elements, and is just a general grouping for styling purposes.
    • 37. Lax syntax?•You dont need to quote attribute values•Or self-close empty elements•You can minimise attributes•You can mix lower and upper case•& have a really small doctype
    • 38. Lax syntax?•Thismore accurately reflects what we REALLY do•Not what the W3C thinks we should do•The browser fills things in for you•HTML5 defines error handling
    • 39. The line between confidence and arrogance is very thin. http://www.therulesofagentleman.com/no-6/
    • 40. Less Flash, more control
    • 41. Flash has its uses•Video•Custom fonts on pages (siFR)•Animation
    • 42. But HTML5 and CSS3 can fill many needs here •<video> •Web Fonts •CSS3 transitions and animation •<canvas>
    • 43. Old school video<object
width="425"
height="344"><param
name="movie"

value="http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1"></param><param
name="allowFullScreen"
value="true"></param><embed
src="http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1"

type="application/x‐shockwave‐flash"

allowfullscreen="true"
width="425"
height="344"></embed></object>
    • 44. Badass sexy new video<video
width="480px"






height="283px"






controls






poster="poster.png">

<source
src="video.mp4"
type="video/mp4">

<source
src="video.webm"
type="video/webm">

<p>Your
browser
doesn’t
support
HTML5
video.
<a
href="video.webm">Download
the
video
instead</a>.</p></video>
    • 45. Native video rocks!•Plays nicely with other open standards•Better accessibility features•Dont need to use Flash•API for easy customisation
    • 46. Web fonts@font‐face
{

font‐family:
ActionIsRegular;

src:
url(actionis‐webfont.eot?)
format(eot),






url(actionis‐webfont.woff)
format(woff),






url(actionis‐webfont.ttf)
format(truetype),






url(actionis‐webfont.svg#webfontg3JxrxOm)
format(svg);

font‐weight:
normal;

font‐style:
normal;}
    • 47. Web fontsp
{

font‐family:
"My
font";}
    • 48. Web fonts also rock•Download custom fonts along with your web pages•Solve our typography nightmares, without having to worry about hackish solutions like siFR and Cufon
    • 49. AnimationsYou can smoothly animatefeatures on your page usingCSS3:•Based on state changes (transitions)•Or independent of anything else (animations)
    • 50. Animations<canvas> also allows animation•But it has a lot more power, and its own problems•And its JS•Different use cases...
    • 51. Learn from those who came before you. http://www.therulesofagentleman.com/no-23/
    • 52. Less JavaScript!
    • 53. Designers dont like scripting!•HTML5 and CSS3 gives you awhole bunch of behaviour•Complicated form controls•Form validation•Animation (see earlier)•Showing/hiding
    • 54. HTML5 form controls<input
type=date><input
type=color><input
type=slider>
    • 55. Client-side form validation......used to be horrendous!
    • 56. 
var
str
=
"";

 Who wants to write this
var
elements
=
document.getElementsByTagName(input);


 s**t?
//
loop
through
all
input
elements
in
form


for(var
i
=
0;
i
<
elements.length;
i++)
{





//
check
if
element
is
mandatory;
ie
has
a
pattern





var
pattern
=
elements.item(i).getAttribute(pattern);




if
(pattern
!=
null)
{






var
value
=
elements.item(i).value;




//
validate
the
value
of
this
element,
using
its
defined
pattern



var
offendingChar
=
value.match(pattern);




//
if
an
invalid
character
is
found
or
the
element
was
left
empty


    • 57. HTML5 gives you this<input
type=text
required







pattern="[A‐z]{1,20}
[A‐z]{1,20}">
    • 58. There are otheradvantages too
    • 59. Showing/hiding using :target<li><a
href="#target">Click
me
to
target
the
paragraph
below</a></li><p
id="target">I
am
targeted
by
the
above
link
when
clicked</p>p:target
{

//
I
am
applied
to
the
paragraph
when
the
link


//
is
clicked}
    • 60. Opening the door for a lady is not optional, and will never go out of style ~ Andy RutledgePlease Note: This means any door. http://www.therulesofagentleman.com/no-28/
    • 61. Less Photoshop!
    • 62. Programmatically is much easier and more flexible •Drop shadows •Gradients •Rounded corners •Transparency
    • 63. Examplesdiv
{

text‐shadow:
black
3px
3px
5px;

box‐shadow:
black
4px
4px
5px;

background‐image:
‐o‐linear‐gradient(top

left,rgba(0,0,0,0),rgba(0,0,0,0.6));

background‐color:
rgb(204,204,204);

border‐radius:
10px;

//
opacity:
0.6;}
    • 64. Brunch and Brinner are acceptable meal choices. Please Note: Bacon needs to be present at both. http://www.therulesofagentleman.com/no-17/
    • 65. Optimising layout
    • 66. Controlling layouts•Media queries: apply CSS depending on media features eg resolution, screen width and height.•Viewport: customise initial display of pages on mobile•Multi-column layout: easy columns
    • 67. Media queries@media
screen
and
(max‐width:480px)
{

//
applied
when
the
browser
width
is
480px

//
or
less,
AND
when
the
media
type
is
screen}
    • 68. mediaqueri.es
    • 69. Media features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio griddevice-aspect-ratio
    • 70. Viewport<meta
name="viewport"
content="width=500,
user‐scalable=no">@viewport
{

width:
500px;

user‐zoom:
fixed;}
    • 71. Without viewport
    • 72. With viewport
    • 73. Media featureswidth/min-width/ max-width user-zoomheight/min-height/ max-height orientation zoom/min-zoom/ max-zoom
    • 74. CSS multi-coldiv
{

column‐width:
100px;

column‐count:
4;

column‐gap:
20px;

column‐rule:
2px
solid
#33c;}p#bottom
{

break‐after:
column;}
    • 75. A gentleman is one who puts more into the world than he takes out. ~ George Bernard Shaw http://www.therulesofagentleman.com/no-18/
    • 76. When (and how) can westart using these tools?
    • 77. Weve looked at spec development•Specs dont matter if browsers dont have consistent support•Browser adoption doesnt matter if we dont care...•...though more often this isnt exactly the case•Often we are not in the position to use new features
    • 78. Stuck between a rock and a hard place? •Older browsers dont support this stuff •Some of us are forced to support them •Many clients are still obsessed with "pixel perfect layouts" across all browsers
    • 79. However•Even IE9 supports most of it•Most of it degrades gracefully•You can work around many problems (eg Modernizr, Selectivizr)•Depending on your client needs
    • 80. Besides•"identicalacross every browser" is outdated•Impossible considering the range of devices on the Web•Flash doesnt work on iDevices•IE6 is 10 years old
    • 81. I say use them now, as much as possible!
    • 82. Thanks!cmills@opera.com | @chrisdavidmills http://dev.opera.com
    • 83. Flickr credits... Håkon pic: http://www.flickr.com/photos/friprog/3305250482/ Bert Bos pic: http://www.flickr.com/photos/tantek/85288202/ Tim Berners-Lee pic: http://www.flickr.com/photos/j-o-n-o/151830908/ Newspapers: http://www.flickr.com/photos/birdfarm/519230710/ Spongebob: http://www.flickr.com/photos/mafleen/3780072133/ Futuresplash disc: http://www.flickr.com/photos/monkeytime/4120229885/JQuery old site: http://www.flickr.com/photos/philliecasablanca/2816530573/ Wooden blocks: http://www.flickr.com/photos/zscheyge/49012397/ Monkey pic: http://www.flickr.com/photos/dyanna/3202542828/ No Flash inside: http://www.flickr.com/photos/josefdunne/5410923901/ JavaScript books: http://www.flickr.com/photos/xhtmled/1536251128/ Photoshop: http://www.flickr.com/photos/didbygraham/541417137/ Human layout: http://www.flickr.com/photos/mythoto/5546666524/ Bike tools: http://www.flickr.com/photos/bre/552152780/ Angry bird: http://www.flickr.com/photos/ilamont/5538511847/ Slides licensed under http://creativecommons.org/licenses/by-sa/2.0/

    ×