W3Conf

W3Conf - Tuesday
W3Conf - Wednesday
Outcomes

http://w3conf.org/live.html http://www.w3.org/conf/#presentations http://calvinf.com/blog/2011/11/16/notes-from-w3conf/

W3Conf - Tuesday

http://www.w3.org/2011/11/15-w3conf-scribe-minutes.html

Testing to Perfection by @plhw3org

Community Groups: Web Payments @manusporny

New community groups
Opening the payments process

Developer Resources by @shepazu

http://www.w3.org/2011/Talks/11-schepers-w3conf/

w3Fools.com
Google's "Ground Up"

http://code.google.com/edu/submissions/html-css-javascript/

Opera Web Standards

http://dev.opera.com/articles/wsc/

MDN
Web Standards Project
InterAct Curriculum

CSS3 for Layout Troubles by @divya

http://nimbu.in/w3conf/#intro

Recently in the news:

http://coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/comment-page-1/

Layout proposals
HTML5 boilerplate

Current

What are

floats (requires clearing, not content agnostics, only recent clearfix)
absolute

Issues

breaks on smaller w/o media queries

What is the future?

Genrated Content for Paged

http://www.w3.org/TR/css3-gcpm/

-o-page-x-controls

Is part of the CSS used. Uses a media query of page:

@media paged {
overflow-style: paged-x | page-x-controls 
}

This also applied to

h1, h2 { break-avoid: after  }

Multiple Columns

http://www.w3.org/TR/css3-multicol/

Has the same control for column-span.

Regions

http://dev.w3.org/csswg/css3-regions/

Set up frow-from block containers.

Can set of up a region query with

@region #main {}

Event:

getRegionsByContentNode

Exclusions

http://dev.w3.org/csswg/css3-exclusions/

Grid

http://dev.w3.org/csswg/css3-grid-align/

#grid { 
  display: grid;
}

Doesn't need to be in document order.

Also includes a grid template.

grid-template: …

FlexBox

http://dev.w3.org/csswg/css3-flexbox/

body: { 
  display: flexbox;
  flex-pack: center;
  flex-align: cneter;
  width: 100%;
  height: 100%;
}

Recommendations

Only use for personal sites or experiments
Wrap with feature
Use media object

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

Use isotope for complex layout

http://isotope.metafizzy.co/

Web Graphics by @vincent_hardy

http://svg-wow.org/

Raphael example

SVG vs. Canvas

Canvas is imperative example.

Look at pointer events for fill and stroke. Very granular fill and stroke event event management.

Interacting with Multi-media

New work is happening on the audio API.

https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

SVG also has filter effects for working with video as well.

Example: GML

http://www.graffitimarkuplanguage.com/

Integrating

Can integrate by including sgv element with a new canvas element.

Don't create dom nodes if we don't want to add interactivity.
With SVG there's the cost associated with how often we will need the elements in SVG.
Uses toDataUrl on a Canvas.
Use offline Canvas.

Frameworks

May polyfill. Simplifies the abstraction. Look for a lively community, support, documentation.

Raphael

Paper.js

Easle.js

Logo

http://www.adobe.com/devnet/html5/articles/css-shaders.html

Web Performance by @arvindjain

Web Timing API

Navigation Timing

> window.performance.timing

function onLoad() {
  var now = new Date();
        var perceivedLatency = now - window.performance.timing.navigationStart
}

Resource Timing

Allows a way to get individual element timing.

User Timing msie chrome

Mark and measure functions in the page load.

> window.performance.mark
> window.performance.measure

Won't be available until March 2012.

Performance Timeline msie chrome

http://www.w3.org/TR/performance-timeline/

> window.performance.getEntries()

Won't be available until March 2012.

Security

Same origin policy is used.

Timing-Allow-Origin

Proxy exposure
Fingerprinting attach

Site could determine the use based on the networking behavior.

TODO Page Visibility API

window.addEventListener('visibilitychange', function() { alert(1); })

Should look at ensuring the bi implementation doesn't mark the page as rendered.

Notes

http://yuilibrary.com/gallery/show/idletimer

Getting offline with AppCache by @johnallsopp

Just a three-part approach to what should be cached.

TODO Review the FALLBACK directive

text/cache-manifest

http://www.softmodal.com/blog/2010/10/adding-a-mime-type-to-nginx/

Always verify the cache

Don't use app cache during development

Serve with the wrong mime-type during development.

A double refresh is required

First for the cache manifest then for resources.

N-screens problem by @rajeshlalnokia

http://www.slideshare.net/rajeshlal/n-screens-problem-w3c-conference-redmond2011

http://widgets-gadgets.com/html5/index.html

HTML History

Covers the general ground of HTML to web applications then moving to RIA -> HTML5 -> WebApp; this is part of the discussion around the type of applications taht we want to develop.

TODO Tools

Modernizer
> jQuery.support

Display: media queries > orientation > viewport > javascript

only screen and (max-width: 480px); handheld

$(document).mediaquery()

Animation: webgl > css3 animation > canvas + js > svg + js

See Modernizer.svg for support…

Audio: open al > audio data > ria audio / Flash > html5 audio

XDR: CORS > proxy > jsonp > Hybrid

> jQuery.support.cors

API: HTML5 API > Polyfills and shimes > js

Polyfills and Shims by @reybango

Web Typography

HTML5

http://dl.dropbox.com/u/39519/talks/html5-foundation/index.html#1

[16:38] <sylvaing> paul irish -> pour shots [16:38] <tantek> oh for a second I thought he was going to say HTML5 trading cards [16:38] <mongillo> out of towners: this awkward silence is known as the "Seattle Freeze". its common and i apologize [16:38] * plh thought this HTML5 thing was about his t-shirt.

History

1997: IE 4 innerHTML

createContetualFragment vs. innerHTML

1999 Gecko

mozInnerHtml

data:text/html <pre contenteditable>x

http://mothereffingunquotedattributes.com

W3Conf - Wednesday

Data Visualization by @mbostock

data driven documents

create the base visual encodings for linear or ordinal (as an example).

Standards-based for

Accessibility by @becka11y

Dojo is used by IBM and there were accessiblity reviews for the widgets.

PhoneGap is under current review by IBM.

http://www.weba11y.com/

Considerations for legal, purchase, regulatory

Still very document-centric

Keyboard binding. Completed in the past for paging.

What testing is really provided.

Accessiblity done in the past. Look at the markup generated in the examples.

Still very server-based

What are the limits for actions that have to be done in the headers. Still would need have the header on the original request.

http://dev.opera.com/articles/view/introduction-to-wai-aria/

Viewer should have server-based prev / next + keyboards

http://www.w3.org/TR/html4/struct/links.html

isWindowsHighContrast

role="presentation"

For images with just layout.

Aria Live Regions

Shows when

aria-live="assertive"

"Not much harder to to add an additional work to add an additional element": this discounts the testing costs.

Securing Web Apps by @scottstender and @hillbrad

History

1995 is the basis for much of the security review.

Hash exploit

Trivial example of

simple.html#alert(1)

eval(window.location.hash.split('#')[1])

Just a general case of loaders.

Threat models now need to focus on the client

Testing / verification

<iframe seamless sandbox

jqencoder

w3c

http://www.w3.org/2011/webappsec/

mario heiderich, gareth heys

Touch Events by @ggoodale

var events = ["touchstart", "touchmove", "touchend", "touchcancel"];

document.querySelector('#log').innerHTML = 'events';
for (var event in events) {
        document.querySelector('body').addEventListener(
                events[event],
                function(e) {
                        console.log(e);
                }
        );      
}

HTML5 Gaming by @gskinner

Asset manifests and loading

No actual loading progress.

UI

three.js http://mrdoob.github.com/three.js/ (webgl)

Sound

SoundJS, SoundManager2

Interaction

http://www.w3.org/2010/webevents/

JavaScript (ES5)

Recommend using strict at all times with freeze and seal.

JavaScript tools

Closure tools.

webstorm. http://www.jetbrains.com/webstorm/

haxe, coffeescript, jangaroo

w3

http://www.w3.org/community/games/

Modernizr by @kurafire

Browsers and Standards

Browser release of new tech

WEBP
SPDY
DART

Resources

caniuse.com
MDN

Outcomes

Dojo has IBM support for a11y

http://www-03.ibm.com/able/resources/dojo.html http://dojotoolkit.org/reference-guide/quickstart/writingWidgets/a11y.html

Use this as part of a comparison with Closure and YUI

http://code.google.com/p/closure-library/source/browse/trunk/closure/goog/dom/a11y.js?r=550

http://yaccessibilityblog.com/library/tag/yui

Rich applications need to be mocked and validated in HTML for ARIA

http://dev.w3.org/html5/markup/aria/aria.html

This isn't really a front-end considerations: plan for purely static implementation of core features that allow no Ajax functionality but includes metadata, link rel, ARIA.

W3Conf

Table of Contents

W3Conf - Tuesday

Testing to Perfection by @plhw3org

Community Groups: Web Payments @manusporny

Developer Resources by @shepazu

CSS3 for Layout Troubles by @divya

Current

Issues

What is the future?

Genrated Content for Paged

Multiple Columns

Regions

Exclusions

Grid

FlexBox

Recommendations

Web Graphics by @vincenthardy

Raphael example

SVG vs. Canvas

Interacting with Multi-media

Example: GML

Integrating

Frameworks

Raphael

Paper.js

Easle.js

Logo

Web Performance by @arvindjain

Web Timing API

Navigation Timing

Resource Timing

User Timing msie chrome

Performance Timeline msie chrome

Security

TODO Page Visibility API

Notes

Getting offline with AppCache by @johnallsopp

TODO Review the FALLBACK directive

text/cache-manifest

Always verify the cache

Don't use app cache during development

A double refresh is required

N-screens problem by @rajeshlalnokia

HTML History

TODO Tools

Display: media queries > orientation > viewport > javascript

Animation: webgl > css3 animation > canvas + js > svg + js

Audio: open al > audio data > ria audio / Flash > html5 audio

XDR: CORS > proxy > jsonp > Hybrid

API: HTML5 API > Polyfills and shimes > js

Polyfills and Shims by @reybango

Web Typography

HTML5

History

1997: IE 4 innerHTML

1999 Gecko

W3Conf - Wednesday

Data Visualization by @mbostock

Accessibility by @becka11y

Considerations for legal, purchase, regulatory

Still very document-centric

Still very server-based

Viewer should have server-based prev / next + keyboards

isWindowsHighContrast

role="presentation"

Aria Live Regions

Securing Web Apps by @scottstender and @hillbrad

History

Hash exploit

Threat models now need to focus on the client

Testing / verification

<iframe seamless sandbox

jqencoder

w3c

Touch Events by @ggoodale

HTML5 Gaming by @gskinner

Asset manifests and loading

UI

Sound

Web Graphics by @vincent_hardy