CSS Specification - Net

sprocketexponentialMobile - Wireless

Dec 10, 2013 (3 years and 6 months ago)

74 views

Application Development

with HTML5

Chris Ching and Nathaniel Bagnell

Interactive Developers

Digiflare

a bit about us


www.digiflare.com


chris.ching@digiflare.com


nathaniel.bagnell@digiflare.com


Web and mobile developers


HTML5
usergroup

(http://
bit.ly/ncOoEh)


Toronto, ON

agenda


Defining HTML5


Utilizing HTML5 Technologies


Spicing It Up With
CSS3


Make Your Life Easier With Tools


HTML5 and Beyond


Getting Started

Defining HTML5

d
efining HTML5


What do people think when they hear “HTML5”?


A set of specifications


A goal toward a more open web


What is an “HTML5” application?

HTML5 applications

HTML5 technology areas

Performance

3D Effects

Semantics

Offline &
Storage

Styling

Connectivity

Multimedia

Device Access

CSS3


Border Radius


Custom
Fonts


Box Shadow


Multiple Backgrounds


Selectors


Media Queries


& More…

JavaScript APIs


Canvas


Video & Audio


Drag & Drop


Geolocation


Local Storage


Offline Apps


…& more

Utilizing HTML5 Technologies

HTML5 technologies


Semantic elements


Canvas


Geolocation


Local Storage


Video & audio


s
emantic
e
lements


More descriptive markup


Allows programs to extract data


Header


Article


Time


Nav


Footer


… & more

demo

Semantic Markup

canvas


A
drawable

surface to render graphs, images,
shapes dynamically via JavaScript


Paths


fillRect


fillText


createLinearGradient


drawImage


c
anvas


<canvas id=“
canvasArea
” height=“300” width=“400”>

</canvas>


var

context =
document.getElementById
("
canvasArea
").
getContext
("2d
");


context.beginPath
();

context.moveTo
(width/2
,
0);

context.lineTo
(width
,
height);

context.lineTo
(0, height);

context.closePath
();


context.fillStyle

= "#ffc821";

context.fill
();

SVG

<
svg

xmlns
='http://www.w3.org/2000/svg'
xmlns:xlink
='http://www.w3.org/1999/xlink' version='1.1'
viewBox
='0 0 512
512
'>


<path fill='#E34F26' d='M71,460 L30,0 481,0 440,460 255,512'/>

<path fill='#EF652A' d='M256,472 L405,431 440,37 256,37'/>

<path fill='#EBEBEB' d='M256,208 L181,208 176,150 256,150 256,94 114,94
129,265 256,265zM256,355 L192,338 188,293 132,293 139,382 256,414z'/>

<path fill='#FFF' d='M255,208 L255,265 325,265 318,338 255,355 255,414
371,382 387,208zM255,94 L255,150 392,150 397,94z
'/>


</
svg
>











demo

Canvas & SVG

g
eolocation


The user’s location is available via JavaScript API


Geolocation

is opt
-
in


The browser asks for permission


g
eolocation

navigator.geolocation.getCurrentPosition
(located);


f
unction located(position) {


var

latitude =
position.coords.latitude
;


var

longitue

=
position.coords.longitude
;

}


demo

Geolocation

local storage


Key/Value store


Up to 5mb


No expiration


Store string data


Offline support for applications



local storage



window.localStorage.setItem
(‘name’, ‘value’);


window.localStorage.name = ‘value’;



var

name =
window.localStorage.getItem
(‘name’);


var

name = window.localStorage.name;



window.localStorage.removeItem
(‘name’);

demo

Local Storage

v
ideo & audio

<video width=“320” height=“280” controls>


<source
src
=“
video.webm
” type=‘video/
webm
; codecs=“vp8,



vorbis
”’/>



<
source
src
=“
video.ogv

type
=‘video/
ogg
; codecs=“
theora
,



vorbis
”’/>



<
source
src
=“video.mp4” />

</video>

demo

Video & Audio

Spicing It Up With
CSS3

quick CSS primer


CSS stands for Cascading
Style Sheets



CSS is used to apply
styling to mark
-
up
elements



With presentation
separate from content, the
pages become more
flexible

CSS
specification stages


The CSS specification goes through “stages”
from the W3C.



CSS3
module’s stages varies significantly



Only three modules have reached
recommendation status: Selectors
Level 3,
Colour, and Namespaces.



Progress is relatively quick; a little over a year
ago there was no modules at the
Recommendation stage; only Selectors Level 3
was a Proposed Recommendation

Recommendation

(REC)

Working Draft

(WD)

CSS milestones


CSS1 became
a W3C
Recommendation in
December 1996



In the year 2000, Internet
Explorer 5.0 for Mac was the
first browser to fully support
the CSS1 specification



CSS has been gradually
building on top of each
previous version, CSS3 is no
different

where CSS is now: CSS3


CSS3 builds on top of CSS 2.1



CSS3 brings forth a lot of exciting new features,
in a different approach than previous
iterations



CSS3 and CSS moving forward, is organized into
modules



Updates to the CSS specification will actually be
updates to the respective module being updated

why CSS modules?


CSS3 is being released in modules, instead
of one
giant release



W3C can bring modules up to the
Recommendation Level (REC) at different
times, based on their
priority



Priority is determined by feedback and real
-
world implementation of WD, CR, and PR
specifications



Browser
developers can implement CSS3
piece by piece, this helps speed up the
overall
adoption process

Low
Priority

Medium
Priority

High
Priority

CSS Specification

Browser

Rendering

Engine

Module X Already
Supported

Module Y Support
Soon

Module Z
Support Later

Module

Module

Module

what CSS modules exist?


There are many modules in the CSS
specification.


As of October 2011, there are 52 modules



Each module is specific to it’s
purpose


i.e
. the
“Fonts”
module will contain all
font
-
related functionality



Some modules come from entirely new
functionality, while others come from
previous features


i.e. the “Animations” module is all new, but
the “Text” module contains both previous
and new functionality related to text

i
mplementing CSS3 today


Build your site with the bare minimums first


All required functionality should be there


Required structural and
core visual
elements
implemented



Add on
additional value
afterward with
Progressive
Enhancement


Alternatively, you can do it in reverse with
graceful degradation



Using either method, have
these value
-
add features subtly appear/disappear if the user
agent does/does not support
them



If your project requires the functionality regardless of native user agent support,
implement fallbacks that either substitute or imitate the desired functionality

i
mplementing CSS3 today


Browser Fallbacks


Implement required
functionality natively
first


Provide
fallbacks to
browsers that do not support the functionality
natively



Fallbacks can be
done with


JavaScript
alternatives (e.g.
jQuery

plug
-
ins that replicate features)


Proprietary
functionality
(e.g.
IE’s “Filter
”)


Pseudo
effects (i.e. extra markup, images, etc
.)



The need for a fallback can be determined by


Tools like
modernizr

to determine native support


General knowledge of what is/is not supported by your target browsers


quick
jQuery

primer


We will use
jQuery

and several
jQuery

plug
-
ins
to replicate CSS3 features that may
not be supported in some of your target
browsers



jQuery

is a JavaScript
library that
allows you to quickly develop
JavaScript solutions



It has great cross browser support including IE6+, FF2+, Safari 3+, and Opera 9+. So,
let’s
dive into some
demos!


demo

Spicing It Up With CSS3

Making Your Life Easier With
Tools

t
ools


HTML5test.com


HTML5 Boilerplate


HTML5 Animations Tools


CSS3 Generators


Visual Studio, Expression


Adobe Tools


Modernizr


… increasingly more support for HTML5 in existing toolsets

HTML5 and Beyond

First Published
Working Draft

Working Draft

Last Call

Candidate
Recommendation


Recommendation

f
uture of HTML5


With each new browser release, support for the
HTML5 specification is growing


A work in progress:

prototyping emerging standards

multi
-
platform/screen support


Increasing support for JavaScript and HTML5 as a
multi
-
platform technology


Develop rich applications for Mobile, Tablet,
Desktop screens with frameworks


Sencha

Touch


jQuery


Windows 8

Getting Started

next steps


Implement some of the features we talked about
today on your own


Continue learning more about HTML5 and then
expand your knowledge on JavaScript and
jQuery


Identify opportunities around you to utilize
HTML5 technologies

resources


Diveintohtml5.org


I
nitializr.com


Css3please.com


Modernizr.com


Html5labs.com


chris.ching@digiflare.com and
nathaniel.bagnell@digiflare.com


Twitter: nathaniel401,
chriswching


r
elated
s
essions

Breakouts


26
th

October,
DEV334
-

HTML5
and
CSS3
Techniques
You
Can Use
Today
, 10:30am


26
th

October,
WIN312
-

Digging
into an
HTML5
Line
of Business
Start Kit
, 2:45pm


All sessions will be available online after the
tour


Remember
T
o Complete Your Evaluations!

You could WIN a Samsung Focus
Windows Phone 7!

Let us know what you liked & disliked!

Remember, 1=Bad
,
5=Good



Please provide comments!

No purchase necessary.

The contest is open to residents of Canada (excluding government employees). The Toronto
Tech∙Days

evaluation form contest begins on October 25
th
, 2011 and
ends on October 26
th
, 2011.

The Vancouver
Tech∙Days

evaluation form contest begins on November 15
th
, 2011 and ends on November 16
th
, 2011. The Montreal
Tech∙Days

evaluation
form contest begins on November 29
th
, 2011 and ends on November 30
th
, 2011. Participants can enter the contest in one of two ways:

(1) complete and submit an evaluation form by the
contest close date; or (2) provide contact information by the contest close date.

The draw for Toronto will take place on Octobe
r 31
st
, 2011. The draw for Vancouver will take place on
November 21
st
, 2011. The draw for Montreal will take place on December 5
th
, 2011.

The chances of being selected depend upon the number of eligible entries.

Selected participants will be
contacted by phone and/or e
-
mail and will be required to answer correctly a time
-
limited skill
-
testing question.

There are three

(3) prizes available to be won. One (1) prize will be given away
for each
Tech∙Days

event in Toronto (October 25
-
26 2011), Vancouver (November 15
-
16 2011) and Montreal (November 29
-
30 2011). The prize consists o
f a Samsung Focus Windows
Phone 7 (handset only; voice and/or data plan not included) (approximate retail value of $499 CAD).

The prize will be delivered
to the shipping address designated by the winner within 6
-
8
weeks.

The winner may be required to sign a declaration and release form. For full contest rules, please see a Microsoft
Tech∙Days

representative.

You
can

email
any

additional

comments

directly

to
td_can@microsoft.com
at

any

time.

Q & A

©
2011 Microsoft
Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademar
ks
and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the
dat
e of this presentation. Because Microsoft must respond to changing market conditions, it should
not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any informatio
n p
rovided after the date of this presentation.

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.