wal.sh
home > events > w3conf · Nov 15, 2011

W3Conf

conference

W3Conf

Table of Contents

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

1. W3Conf - Tuesday

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

1.2. Community Groups: Web Payments @manusporny

  • New community groups
  • Opening the payments process

1.4. 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

1.4.1. Current

What are

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

1.4.2. Issues

  • breaks on smaller w/o media queries

1.4.3. What is the future?

1.4.3.1. 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  }
1.4.3.2. Multiple Columns

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

Has the same control for column-span.

1.4.3.3. 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

1.4.3.5. 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: …

1.4.3.6. FlexBox

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

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

1.4.4. 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/

1.5. Web Graphics by @vincent_hardy

http://svg-wow.org/

1.5.2. SVG vs. Canvas

Canvas is imperative example.

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

1.5.3. 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.

1.5.5. 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.

1.5.6. Frameworks

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

1.5.6.1. Raphael
1.5.6.2. Paper.js
1.5.6.3. Easle.js

1.6. Web Performance by @arvindjain

1.6.2. Navigation Timing

> window.performance.timing 

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

1.6.3. Resource Timing

Allows a way to get individual element timing.

1.6.4. 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.

1.6.5. Performance Timeline   msie chrome

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

> window.performance.getEntries()

Won't be available until March 2012.

1.6.6. Security

  • Same origin policy is used.

Timing-Allow-Origin

  • Proxy exposure
  • Fingerprinting attach

Site could determine the use based on the networking behavior.

1.6.7. TODO Page Visibility API

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

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

1.7. Getting offline with AppCache by @johnallsopp

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

1.7.4. Don't use app cache during development

Serve with the wrong mime-type during development.

1.7.5. A double refresh is required

First for the cache manifest then for resources.

1.8. N-screens problem by @rajeshlalnokia

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

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

1.8.1. 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.

1.8.2. TODO Tools

  • Modernizer
  • > jQuery.support

1.8.3. Display: media queries > orientation > viewport > javascript

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

$(document).mediaquery()

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

See Modernizer.svg for support…

1.8.6. XDR: CORS > proxy > jsonp > Hybrid

> jQuery.support.cors

1.11. 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.

1.11.1. History

1.11.1.1. 1997: IE 4 innerHTML

createContetualFragment vs. innerHTML

1.11.1.2. 1999 Gecko

mozInnerHtml

data:text/html <pre contenteditable>x

http://mothereffingunquotedattributes.com

2. W3Conf - Wednesday

2.1. Data Visualization by @mbostock

data driven documents

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

Standards-based for

2.2. 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/

2.2.2. 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.

2.2.3. 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/

2.2.6. role="presentation"

For images with just layout.

2.2.7. 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.

2.3. Securing Web Apps by @scottstender and @hillbrad

2.3.1. History

1995 is the basis for much of the security review.

2.3.2. Hash exploit

Trivial example of

simple.html#alert(1) 

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

Just a general case of loaders.

2.3.6. jqencoder

2.3.7. w3c

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

mario heiderich, gareth heys

2.4. 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);
                }
        );      
}

2.5. HTML5 Gaming by @gskinner

2.5.1. Asset manifests and loading

No actual loading progress.

2.5.2. UI

2.5.3. Sound

SoundJS, SoundManager2

2.5.5. JavaScript (ES5)

Recommend using strict at all times with freeze and seal.

2.5.6. JavaScript tools

Closure tools.

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

haxe, coffeescript, jangaroo

2.7. Browsers and Standards

2.7.1. Browser release of new tech

  • WEBP
  • SPDY
  • DART

2.7.2. Resources

  • caniuse.com
  • MDN

3. Outcomes

3.2. 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.

3.3. Input sanitizing and validation would need to be built with RIA

Will need to build this internally if not using a library.

3.4. UI Toolkit Options

3.4.2. namespacing

3.4.5. accessibility

3.4.6. encoding

3.4.7. shims and polyfills

Progressive enhancement, graceful degredation.

3.4.8. model support

3.4.9. data binding

3.4.10. sockets support