This article contains 10 images. You will find them at the very end of the article.

This article contains 3754 words.

Web Directions » html5

Web Directions » html5 http://www.webdirections.org Just another WordPress weblog Fri, 19 Apr 2013 05:24:33 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 Getting all touchy feely with the mobile web — Andrew Fisherhttp://www.webdirections.org/resources/getting-all-touchy-feely-with-the-mobile-web-andrew-fisher/ http://www.webdirections.org/resources/getting-all-touchy-feely-with-the-mobile-web-andrew-fisher/#comments Fri, 10 Aug 2012 00:21:14 +0000 Maxine http://www.webdirections.org/?p=4395 As the majority of web users shift to touch devices, the expectation is becoming that everything becomes touchable — including the mobile web. This session will provide a practical and pragmatic view of where touch is at from a web standards perspective and how you can start weaving touch interactions into your mobile web applications.]]> Andrew Fisher gets all touchy feely with the mobile web. See below for full session description and more resources.

Got a taste for it? Be there for the dev track at Web Directions South 2012.

This presentation was recorded at Web Directions Code in Melbourne on May 23 2012.

Session description

As the majority of web users shift to touch devices, the expectation is becoming that everything becomes touchable — including the mobile web. This session will provide a practical and pragmatic view of where touch is at from a web standards perspective and how you can start weaving touch interactions into your mobile web applications.

Resources from this presentation

• Presentation slides
• W3C spec
• HTML Rocks Touch
• Big list of touch stuff
• Demo code
• Touch patent issues
• Touch Events Patent Advisory Group Charter
• Code sample

About Andrew Fisher

Andrew Fisher is deeply passionate about technology and is constantly tinkering with and breaking something — whether it’s a new application for mobile computing, building a robot, deploying a cloud or just playing around with web tech. Sometimes he does some real work too and has been involved in developing digital solutions for businesses since the dawn of the web in Australia and Europe for brands like Nintendo, peoplesound, Sony, Mitsubishi, Sportsgirl and the Melbourne Cup.

Andrew is the CTO for JBA Digital, a data agency in Melbourne Australia, where he focuses on creating meaning out of large, changing data sets for clients. Andrew is also the founder of Rocket Melbourne, a startup technology lab exploring physical computing and the Web of Things.

]]> http://www.webdirections.org/resources/getting-all-touchy-feely-with-the-mobile-web-andrew-fisher/feed/ 0 HTML5 technologies and game development — Rob Hawkeshttp://www.webdirections.org/resources/html5-technologies-and-game-development/ http://www.webdirections.org/resources/html5-technologies-and-game-development/#comments Thu, 12 Jul 2012 06:11:36 +0000 Maxine http://www.webdirections.org/?p=4376 With Angry Birds, Cut the Rope and other block­buster games now working in modern web browsers, it’s fair to say native, browser based gaming has arrived for real. But how do they do it? In this session, Mozilla Technical Evangelist Rob Hawkes looks at the features now in your browsers to help develop games (and other interactive web based experiences) including the Canvas and WebGL, HTML5 Audio API, Mouselock and the Joy­stick API.]]> Rob Hawkes uses HTML5 technologies for game development. See below for full session description and more resources.

Got a taste for it? Be there for the dev track at Web Directions South 2012.

This presentation was recorded at Web Directions Code in Melbourne on May 24 2012.

Session description

With Angry Birds, Cut the Rope and other block­buster games now working in modern web browsers, it’s fair to say native, browser based gaming has arrived for real. But how do they do it? In this session, Mozilla Technical Evangelist Rob Hawkes looks at the features now in your browsers to help develop games (and other interactive web based experiences) including the Canvas and WebGL, HTML5 Audio API, Mouselock and the Joy­stick API.

Resources from this presentation

• Slides from this presentation
• Foundation HTML5 Canvas
• HTML5 Games Most Wanted
• Rawkets — built with HTML5 and Websockets

About Rob Hawkes

Rob thrives on solving problems through code. He has an addiction to visual programming and can’t get enough of HTML5 and JavaScript. He’s the author of Foundation HTML5 Canvas and is a Technical Evangelist at Mozilla. He leads the gaming side of Mozilla’s work within the developer community.

]]> http://www.webdirections.org/resources/html5-technologies-and-game-development/feed/ 0 Designing in the browser — Divya Manianhttp://www.webdirections.org/resources/designing-in-the-browser-divya-manian/ http://www.webdirections.org/resources/designing-in-the-browser-divya-manian/#comments Mon, 09 Jul 2012 11:14:40 +0000 Maxine http://www.webdirections.org/?p=4368 Each website is a product used daily by people to take actions, not just read the content on it. Your product is amorphous, it takes the shape of whatever container it fills: a mobile browser, a touch enabled desktop browser, or a 30″ iMac that is connected to the Internet via tethering. Photoshop is just one of the means to an end in this new age of utilitarian web sites. The new technologies available in HTML5 already allow you to create prototypes quickly in the browser. Learn how to create a prototype from start to finish using these new technologies while taking advantage of quick prototyping tools.]]> Divya Manian designs in the browser. See below for full session description and more resources.

Got a taste for it? Be there for the dev track at Web Directions South 2012.

This presentation was recorded at Web Directions Code in Melbourne on May 24 2012.

Session description

Each website is a product used daily by people to take actions, not just read the content on it. Your product is amorphous, it takes the shape of whatever container it fills: a mobile browser, a touch enabled desktop browser, or a 30″ iMac that is connected to the Internet via tethering. Photoshop is just one of the means to an end in this new age of utilitarian web sites. The new technologies available in HTML5 already allow you to create prototypes quickly in the browser. Learn how to create a prototype from start to finish using these new technologies while taking advantage of quick prototyping tools.

Resources from this presentation

• Slides from this presentation
• A related presentation from Stephen Hay
• Docpad
• Jekyll
• HTML5 Boilerplate
• Sass
• LESS
• Stylus
• BEM: Block, Element, Modifier
• Mustache
• Eco
• HAML
• Faker.js
• Bootstrap
• Codekit
• LiveReload
• Docco
• Style Docco
• Lorem Pixel

About Divya Manian

Divya Manian works for the Adobe Web Platform Team in San Francisco. She made the jump from developing device drivers for Motorola phones to designing websites and has not looked back since. She takes her duties as an Open Web vigilante seriously which has resulted in collaborative projects such as HTML5 Readiness and HTML5 Boilerplate.

]]> http://www.webdirections.org/resources/designing-in-the-browser-divya-manian/feed/ 2 The Web’s Third Decade — Faruk Ateşhttp://www.webdirections.org/resources/the-webs-third-decade-faruk-ates/ http://www.webdirections.org/resources/the-webs-third-decade-faruk-ates/#comments Mon, 09 Jul 2012 11:13:00 +0000 Maxine http://www.webdirections.org/?p=4364 Our medium has entered its third decade of existence, and is ready for some growing up. Our definitions and understand­ing of the web are rapidly getting out of date, as, too, are our practices for building on it. It is time to re-evaluate where things are and, more importantly, where they are going.]]> Faruk Ateş on The Web's Third Decade. See below for full session description.

Got a taste for it? Be there for the dev track at Web Directions South 2012.

This presentation was recorded at Web Directions Code in Melbourne on May 23 2012.

Session description

Our medium has entered its third decade of existence, and is ready for some growing up. Our definitions and understand­ing of the web are rapidly getting out of date, as, too, are our practices for building on it. It is time to re-evaluate where things are and, more importantly, where they are going.

About Faruk Ateş

Faruk is a designer, developer and web standards educator with a strong passion for accessible techniques and progressive enhancement. Now busy with a new startup of his own, Faruk previously worked as Lead Designer at Apture, User Interface Engineer at Apple, and before that he built and designed Content Management Systems at a startup in The Netherlands.

Whenever time permits him, Faruk works on open source tools like Modernizr and jQuery Runloop, aiming to help people make better websites and applications. He also frequently writes for publications both online and print, and speaks at conferences and events all around the world. He now lives in San Francisco.

]]> http://www.webdirections.org/resources/the-webs-third-decade-faruk-ates/feed/ 1 Getting offline: appcache, localStorage for HTML5 apps that work offline — John Allsopphttp://www.webdirections.org/resources/getting-offline-appcache-localstorage-for-html5-apps-that-work-offline-john-allsopp/ http://www.webdirections.org/resources/getting-offline-appcache-localstorage-for-html5-apps-that-work-offline-john-allsopp/#comments Wed, 04 Jul 2012 00:27:54 +0000 Maxine http://www.webdirections.org/?p=4340 One of the perceived benefits of “native” apps is that they can be installed on a device, then run when the user isn’t connected. But web apps can do this too. In this session, John Allsopp will show you how to use HTML5 features such as appcache and webStorage to create apps that the user can install, and which will work even when the user is cruising at 30,000 feet with no web connection. These features also have the added bonus of helping to improve the performance of web sites and apps, and even work in all modern browsers and devices, including IE8 up!]]> John Allsopp takes HTML5 apps offline. See below for full session description and more resources.

Got a taste for it? Be there for the dev track at Web Directions South 2012.

This presentation was recorded at Web Directions Code in Melbourne on May 24 2012.

Session description

One of the perceived benefits of “native” apps is that they can be installed on a device, then run when the user isn’t connected. But web apps can do this too. In this session, John Allsopp will show you how to use HTML5 features such as appcache and webStor­age to create apps that the user can install, and which will work even when the user is cruising at 30,000 feet with no web connection. These features also have the added bonus of helping to improve the performance of web sites and apps, and even work in all modern browsers and devices, including IE8 up!

Resources from this presentation

• webStorage: Persistent client side data storage — tutorial by John Allsopp
• Get off(line) — tutorial by John Allsopp

About John Allsopp

John Allsopp has spent more than 15 years developing for the web, creating software like the acclaimed CSS editor Style Master, and writing and publishing training for web developers. John frequently speaks at conferences and delivers workshops around the world. He is a co-founder of the Web Directions conferences for web designers and developers, held on several continents. In 1999, John wrote the still highly regarded Dao of Web Design and his Microformats: Empowering Your Markup for Web 2.0 was the first book published on Microformats. He is also the author of Developing with Web Standards. When not bathed in the glow of various computer screens, he’s a volunteer surf lifesaver and lives at the southern edge of Sydney with his wife and young daughters, who are the light of his life.

]]> http://www.webdirections.org/resources/getting-offline-appcache-localstorage-for-html5-apps-that-work-offline-john-allsopp/feed/ 0 HTML5, device APIs and PhoneGap — Dave Johnsonhttp://www.webdirections.org/resources/html5-device-apis-and-phonegap-dave-johnson/ http://www.webdirections.org/resources/html5-device-apis-and-phonegap-dave-johnson/#comments Wed, 04 Jul 2012 00:03:31 +0000 Maxine http://www.webdirections.org/?p=4334 Where once web pages were sand­boxed, with little if any access to the underlying device capabilities, increasingly, this is no longer the case. From the first steps of geolocation, which enables any web site or application to ask the browser for a user’s location, an increasing range of device features are being exposed in the DOM: the file system, camera, gyrosopes, address book, com­passes and more. In this session, Dave Johnson, originator of the phoneGap project delves into HTML5 and related device APIs, enabling us to build richer, more sophisticated applications in the browser.]]> Dave Johnson HTML5, device APIs and PhoneGap. See below for full session description and more resources.

Got a taste for it? Be there for the dev track at Web Directions South 2012.

This presentation was recorded at Web Directions Code in Melbourne on May 24 2012.

Session description

Where once web pages were sand­boxed, with little if any access to the underlying device capabilities, increasingly, this is no longer the case.

From the first steps of geolocation, which enables any web site or application to ask the browser for a user’s location, an increasing range of device features are being exposed in the DOM: the file system, camera, gyrosopes, address book, com­passes and more.

In this session, Dave Johnson, originator of the phoneGap project delves into HTML5 and related device APIs, enabling us to build richer, more sophisticated applications in the browser.

About Dave Johnson

Dave is a co-founder of Nitobi. He holds a BASc in Electrical Engineering (UBC) and a PhD in Solid State Physics from London’s Imperial College which both have pretty much nothing to do with mobile phones or software development. Dave spends most of his time working on and talking about the PhoneGap project.

]]> http://www.webdirections.org/resources/html5-device-apis-and-phonegap-dave-johnson/feed/ 0 The HTML5 History API — Anson Parkerhttp://www.webdirections.org/resources/the-html5-history-api-anson-parker/ http://www.webdirections.org/resources/the-html5-history-api-anson-parker/#comments Thu, 28 Jun 2012 23:07:26 +0000 Maxine http://www.webdirections.org/?p=4301 Get the low-down on this excellent HTML5 feature and learn how you can add it to your own web projects (and why you'd want to!). We'll also look at some of the missteps made along the way (like the 2011/12 Twitter web interface).]]> Anson Parker gives us the lowdown on this excellent HTML5 feature. See below for full session description and more resources.

Got a taste for it? Be there for the dev track at Web Directions South 2012.

This presentation was recorded at Web Directions Code in Melbourne on May 23 2012.

Session description

Get the low-down on this excellent HTML5 feature and learn how you can add it to your own web projects (and why you’d want to!). We’ll also look at some of the missteps made along the way (like the 2011/12 Twitter web interface).

Resources referred to in this presentation

• HTML5 History API tutorial
• Twitter engineer Dan Webb on their choice to use #! URLs
• A History API library that supports older browsers (with #‘s — so beware!)

About Anson Parker

Anson Parker is a web developer based in Melbourne, Australia. His past has included stints at Optus and News Limited in Sydney, as well as a couple of years with a tech startup in San Francisco. Over that time he has moved from design to programming to product development. He is the man behind the domain name search engine Domize and plans on launch­ing an automotive search engine in 2012.

]]> http://www.webdirections.org/resources/the-html5-history-api-anson-parker/feed/ 0 Fantastic forms for mobile web — Tammy Butowhttp://www.webdirections.org/resources/fantastic-forms-for-mobile-web-tammy-butow/ http://www.webdirections.org/resources/fantastic-forms-for-mobile-web-tammy-butow/#comments Tue, 26 Jun 2012 21:53:31 +0000 Maxine http://www.webdirections.org/?p=4282 Let’s have a look at how new features such as autofocus, required fields, native date pickers, place­holder text and popping up tailored keyboards for numbers and email addresses on mobile devices can make life more enjoyable!]]> Tammy Butow has a look at the new HTML5 form features. See below for full session description and more resources.

Got a taste for it? Be there for the dev track at Web Directions South 2012.

This presentation was recorded at Web Directions Code in Melbourne on May 23 2012.

Session description

Let’s have a look at how new features such as autofocus, required fields, native date pickers, place­holder text and popping up tailored keyboards for numbers and email addresses on mobile devices can make life more enjoyable!

Resources referred to in this presentation

• Slides from this presentation
• W3C listing of differences between HTML5 and HTML4
• Dive Into HTML5 on Forms
• HTML5 inputs and attribute support
• H5F JavaScript library that allows you to use the HTML5 Forms chapters new field input types, attributes and constraint validation API in non-supporting browsers
• Modernizr
• Initializr
• HTML5 Boilerplate

About Tammy Butow

Tammy is studying a Master of Computer Science at RMIT and is the co-chair of @GGDMelb. She also spends her time making HTML5 mobile apps, travelling, blogging and filming music videos for chuckingamosh.com.

]]> http://www.webdirections.org/resources/fantastic-forms-for-mobile-web-tammy-butow/feed/ 0 Ben Birch — HTML5, PhoneGap and What’s Nexthttp://www.webdirections.org/resources/ben-birch-html5-phonegap-and-whats-next/ http://www.webdirections.org/resources/ben-birch-html5-phonegap-and-whats-next/#comments Sun, 06 Nov 2011 01:40:56 +0000 Guy Leech http://www.webdirections.org/?p=3858 If this year is all about the mobile space maturing, then your web skills are where it’s at and a key player is PhoneGap, which supercharges your code and gets you into the app store(s).]]> Web Directions South 2011, Sydney, October 14th.

• Presentation slides
• Session description
• About Ben Birch

Presentation slides

Session description

If this year is all about the mobile space maturing, then your web skills are where it’s at and a key player is PhoneGap, which supercharges your code and gets you into the app store(s).

We look at one small framework’s journey from birth at a 2 day hacking event to become the preeminent method for distributing packaged web apps on mobile devices. We will have a look at the all the goodies that PhoneGap provides, then peek inside and see how it integrates with the web stack. We will explore some of the pain points and work arounds. Then, we take a quick pass through the community and resources available. Finally, we finishing up with a look at where PhoneGap is going and explore the interesting places your web dev skills could take you in the next 12 months.

About Ben Birch

Ben is Senior UI Engineer and Beer Baron at Aconex in Melbourne. About 5 years ago a revelation turned him from back end programming to concentrate full time on client side development. At Aconex he brought the rigours of testing to javascript and css well before it was easy and along the way built a lightweight UI framework. The same framework now drives jQuery Mobile using pure javascript.

By day he builds enterprise tablet apps on PhoneGap and by night he contributes to several open source projects and changes nappies. He is slightly over excited by all the awesome technology and rapid pace of change in the web space and it’s open and collaborative buzz.

Ben has a wife, two small kids and hangs out at #melbjs and on GitHub.

Follow Ben on Twitter: @mobz

]]> http://www.webdirections.org/resources/ben-birch-html5-phonegap-and-whats-next/feed/ 1 Greg Rewis — Move it! CSS3 Transitions and Animationshttp://www.webdirections.org/resources/greg-rewis-move-it-css3-transitions-and-animations/ http://www.webdirections.org/resources/greg-rewis-move-it-css3-transitions-and-animations/#comments Sat, 05 Nov 2011 22:37:38 +0000 Guy Leech http://www.webdirections.org/?p=3797 In this session, we’ll take a look at all of the possibilities and explore what works and where — from the simplest effects, to creative usability enhancements including the combination of CSS with mobile Javascript frameworks.]]> Web Directions South 2011, Sydney, October 14th.

• Audio recording of session
• Presentation slides
• Additional resources
• Session description
• About Greg Rewis

Presentation slides

Session description

Since the early days of the web, the only reliable way to get movement on your site was through Flash, or more recently, Javascript. But now, with WebKit and Mozilla leading the way, transformations and transitions can be done with pure CSS, even on mobile devices. And for those in need of even more movement, CSS3 provides for keyframe-based animations. In this session, we’ll take a look at all of the possibilities and explore what works and where — from the simplest effects, to creative usability enhancements including the combination of CSS with mobile Javascript frameworks.

About Greg Rewis

Greg Rewis is the Principal Evangelist for Adobe Systems, focusing on Adobe’s open web products and technologies such as HTML5, CSS3 and Javascript. With over 20 years of computer industry experience, Greg spends in excess of 200 days of the year on the road, talking with customers, giving product demonstrations at seminars, and speaking at industry conferences.

Greg has been passionate about the web since putting his first “home page” online in 1994. His career has taken him around the world, from the early days of desktop publishing, to a start-up in Hamburg, Germany, the glory days of the web at Macromedia and finally his current role at Adobe.

The original GoLive Cyberstudio Product Manager and former Dreamweaver Technical Product Manager, Greg is the co-author of “Mastering CSS with Dreamweaver CS3″ and “Mastering CSS with Dreamweaver CS4″ published by New Riders, as well as a regular contributor to industry publications.

Follow Greg on Twitter: @garazi

]]> http://www.webdirections.org/resources/greg-rewis-move-it-css3-transitions-and-animations/feed/ 0