Web Directions » html http://www.webdirections.org Just another WordPress weblog Fri, 27 Jan 2012 00:02:10 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Michael Mahemoff — HTML5 offline for fun and performancehttp://www.webdirections.org/resources/michael-mahemoff-html5-offline-for-fun-and-performance/ http://www.webdirections.org/resources/michael-mahemoff-html5-offline-for-fun-and-performance/#comments Sat, 04 Jun 2011 06:56:02 +0000 Guy Leech http://www.webdirections.org/?p=3368 Photo of Michael MahemoffIn this session we’ll get hands-​​on with the application cache to make the app run when it’s not online. We’ll check out the techniques for client-​​side persistence: web storage and indexed database. Finally, we’ll look at the latest techniques for file access — reading and writing files on the user’s hard drive from a web app is being defined by web standards and implemented in today’s modern browsers.

]]> Web Directions @media 2011, London, May 27th 10:45am.

Presentation slides

Presentation slides (external site)

Session description

With HTML5, we can now cache our applications and the data that goes with them. This means our favourite programming platform can now be used to build apps that work offline, survive intermittent downtimes, and gain in performance from cached content. In this session we’ll get hands-​​on with the application cache to make the app run when it’s not online. We’ll check out the techniques for client-​​side persistence: web storage and indexed database. Finally, we’ll look at the latest techniques for file access — reading and writing files on the user’s hard drive from a web app is being defined by web standards and implemented in today’s modern browsers.

About Michael Mahemoff

Photo of Michael MahemoffMichael Mahemoff is a Chrome Developer Advocate for Google, based in London, always looking at ways to make the web a more habitable place for users and developers alike. He’s been programming on the web since the mid ’90s, in a range of public-​​facing and enterprise (Java, what else?) contexts, and is the author of Ajax Design Patterns (O’Reilly, 2006) and a blogger for Ajaxian​.com. Server side, he’s mostly a Ruby, PHP, and NodeJS guy and sushi is his preferred coding fuel. Michael holds a PhD from the University of Melbourne, covering software design patterns for improving user experience.

Follow Michael on Twitter: @mahemoff

]]> http://www.webdirections.org/resources/michael-mahemoff-html5-offline-for-fun-and-performance/feed/ 0 Bruce Lawson — Native multimedia with HTML5http://www.webdirections.org/resources/bruce-lawson-native-multimedia-with-html5/ http://www.webdirections.org/resources/bruce-lawson-native-multimedia-with-html5/#comments Sat, 04 Jun 2011 06:16:02 +0000 Guy Leech http://www.webdirections.org/?p=3363 Photo of Bruce LawsonWe’ll look at the pros and the cons of HTML5 multimedia and see how to write simple controls with JavaScript. Most excitingly, we’ll also look at how HTML5 builds in support for subtitles and captions for multimedia accessibility. And you might pick up a Turkish dancing tip on the way.

]]> Web Directions @media 2011, London, May 26th 1:40pm.

Presentation slides

Session description

A much-​​​​hyped feature of HTML5 is native multimedia. In this session we’ll look at embedding

We’ll look at the pros and the cons of HTML5 multimedia and see how to write simple controls with JavaScript. Most excitingly, we’ll also look at how HTML5 builds in support for subtitles and captions for multimedia accessibility. And you might pick up a Turkish dancing tip on the way.

About Bruce Lawson

Photo of Bruce LawsonBruce evangelises Open Web Standards for Opera. He’s currently working with the British Standards Institution to draft the new Standard for commissioning accessible web sites and writing a book about HTML5. Previously, he’s been front-​​end technical lead for the Law Society and Solicitors Regulation Authority web sites, tutor to a princess’ daughter in Thailand, a movie extra in Bombay, and a tarot card reader in Istanbul. He blogs at brucelawson​.co​.uk, drinks Guinness and is training for a blue belt in kickboxing.

Follow Bruce on Twitter: @brucel

]]> http://www.webdirections.org/resources/bruce-lawson-native-multimedia-with-html5/feed/ 0 Dave Balmer — Rockstar graphics with HTML5http://www.webdirections.org/resources/dave-balmer-rockstar-graphics-with-html5/ http://www.webdirections.org/resources/dave-balmer-rockstar-graphics-with-html5/#comments Sat, 04 Jun 2011 04:39:06 +0000 Guy Leech http://www.webdirections.org/?p=3348 Photo of Dave BalmerIn this session Dave will cover high-​​performance presentation and animation using HTML5, JavaScript, CSS3 and Canvas. Examples will include mobile-​​friendly techniques you can use today for creating game effects and “flashy” user experiences across a range of browsers and devices.

]]> Web Directions @media 2011, London, May 27th 11:45am.

Presentation slides

Session description

In this session Dave will cover high-​​performance presentation and animation using HTML5, JavaScript, CSS3 and Canvas. Examples will include mobile-​​friendly techniques you can use today for creating game effects and “flashy” user experiences across a range of browsers and devices.

About Dave Balmer

Photo of Dave BalmerAs a Senior Software Engineer with Palm Developer Relations, Dave is a JavaScript guru currently focused on mobile app development. He is the creator of four JavaScript application frameworks, including Jo, which is a lightweight solution for cross-​​platform mobile apps.

In his spare time, Dave designs and writes games, makes music, and writes.

Follow Dave on Twitter: @balmer

]]> http://www.webdirections.org/resources/dave-balmer-rockstar-graphics-with-html5/feed/ 2 Dave Orchard — Offline Web Apps with HTML5http://www.webdirections.org/resources/dave-orchard-offline-web-apps-with-html5/ http://www.webdirections.org/resources/dave-orchard-offline-web-apps-with-html5/#comments Sat, 04 Jun 2011 02:22:52 +0000 Guy Leech http://www.webdirections.org/?p=3271 Photo of Dave OrchardThere’s an old expression, that there are only 2 hard problems in computing: naming, cache invalidation and off-by-one errors. Building offline web apps is all about those hard problems. We’ll spend the bulk of our time on these hard problems, which is probably more useful than api description and sample code.

]]> Web Directions Unplugged 2011, Seattle, May 13th 11:30am.

Presentation slides

Session description

There’s an old expression, that there are only 2 hard problems in computing: naming, cache invalidation and off-by-one errors. Building offline web apps is all about those hard problems. There are some different ways of storing stuff — such as html5 caching, html5 storage, sqllite, and even native stores such as contacts and calendars — and we’ll sing their praises. But the really hard problems are knowing what to store, whether the stuff is still good or needs refreshing, how much to store, how to resolve conflicts between the client and server, how to integrate with data-specific stores, all in a bewildering cacophony of network and storage limited devices. We’ll spend the bulk of our time on these hard problems, which is probably more useful than api description and sample code.

About Dave Orchard

Photo of Dave OrchardDave Orchard is Mobile Architect at Salesforce.com and located in Vancouver, Canada. This means being involved in many mobile platforms, architectures, tools, technologies and APIs. Prior to that, he was a co-founder of Ayogo Games and focused on iPhone and ruby/merb/mysql based casual social games. Back further in the mists of time, he was the Web standards lead for BEA Systems for 7 years, including being elected three times to 2 year terms on the W3C Technical Architecture Group chaired by Sir Tim Berners-Lee.

Follow Dave on Twitter: @DaveO

]]> http://www.webdirections.org/resources/dave-orchard-offline-web-apps-with-html5/feed/ 0 Robby Ingebretsen — Get your game on: HTML5 for game buildinghttp://www.webdirections.org/resources/robby-ingebretsen-get-your-game-on-html5-for-game-building/ http://www.webdirections.org/resources/robby-ingebretsen-get-your-game-on-html5-for-game-building/#comments Sat, 04 Jun 2011 01:53:14 +0000 Guy Leech http://www.webdirections.org/?p=3331 Photo of Robby IngebretsenYou’ve seen a lot of demos, but is HTML5 really ready for primetime? We made an HTML5-based pool game with the explicit goal of creating an experience that defies your expectations for what a browser can do. In this session we’ll take you through the challenges and triumphs of working with this new technology. For the experienced HTML5 dev, we’ll share tips and tricks. For the rest of us, it will be a great primer on the exciting potential that HTML5 brings to the web.

]]> Web Directions Unplugged 2011, Seattle, May 12th 1:40pm.

Presentation slides

Session description

You’ve seen a lot of demos, but is HTML5 really ready for primetime? We made an HTML5-based pool game with the explicit goal of creating an experience that defies your expectations for what a browser can do. In this session we’ll take you through the challenges and triumphs of working with this new technology. For the experienced HTML5 dev, we’ll share tips and tricks. For the rest of us, it will be a great primer on the exciting potential that HTML5 brings to the web.

About Robby Ingebretsen

Photo of Robby IngebretsenRobby Ingebretsen is a user experience designer and developer with a singular purpose: making great ideas real. As the founder of Pixel Lab, a user experience consultancy that specializes in Silverlight, HTML5 and mobile technologies, he helps clients make cool stuff–the kind that needs the unique full-bodied blend of a little design love and a little engineering kung-fu.

Follow Robby on Twitter: @ingebretsen

]]> http://www.webdirections.org/resources/robby-ingebretsen-get-your-game-on-html5-for-game-building/feed/ 0 Dave Balmer — HTML5 Graphics: Canvas Deep Divehttp://www.webdirections.org/resources/dave-balmer-html5-graphics-canvas-deep-dive/ http://www.webdirections.org/resources/dave-balmer-html5-graphics-canvas-deep-dive/#comments Sun, 29 May 2011 00:10:48 +0000 Guy Leech http://www.webdirections.org/?p=3280 Photo of Dave BalmerThe Canvas tag has been around for a while, and HTML5 has given it more visibility. It’s now finding its way into most mobile browsers, and even a majority of desktop browsers. This talk will give a solid overview of what the canvas tag is, what it can do, and how it compares with other technologies like SVG and Flash.

]]> Web Directions Unplugged 2011, Seattle, May 13th 2:25pm.

Presentation slides

Session description

The Canvas tag has been around for a while, and HTML5 has given it more visibility. It’s now finding its way into most mobile browsers, and even a majority of desktop browsers. This talk will give a solid overview of what the canvas tag is, what it can do, and how it compares with other technologies like SVG and Flash. Several practical code examples will show how you can use it along with CSS3 and other HTML5 goodies to make your web apps more featured, efficient and downright cool.

About Dave Balmer

Photo of Dave BalmerAs a Senior Software Engineer with Palm Developer Relations, Dave is a JavaScript guru currently focused on mobile app development. He is the creator of four JavaScript application frameworks, including Jo HTML5 Mobile App Framework, which is a lightweight solution for cross-platform mobile apps.

In his spare time, Dave designs and writes games, makes music, and writes.

Follow Dave on Twitter: @balmer

]]> http://www.webdirections.org/resources/dave-balmer-html5-graphics-canvas-deep-dive/feed/ 1 Silvia Pfeiffer — HTML5 Audio and Videohttp://www.webdirections.org/resources/silvia-pfeiffer-html5-audio-and-video/ http://www.webdirections.org/resources/silvia-pfeiffer-html5-audio-and-video/#comments Mon, 01 Nov 2010 03:19:55 +0000 Guy Leech http://www.webdirections.org/?p=2921 Silvia Pfeiffer PortraitWith three different audio and video codec formats each supported by the diverse HTML5 capable Web browsers, plus the need to deal with fallback for older browsers, HTML5 media is not the simple solution we have all been hoping for.W3C invited expert Silvia Pfeiffer will talk through the big issues on this important topic.]]> Web Directions South 2010, Sydney Convention and Exhibition Centre, October 14 10.45am.

Presentation slides

The slides are available on Silvia’s website.

Video

Session description

With three different audio and video codec formats each supported by the diverse HTML5 capable Web browsers, plus the need to deal with fallback for older browsers, HTML5 media is not the simple solution we have all been hoping for. But on the other hand, HTML5 media will make your life easier, since it offers some features that are hard to get with traditional Adobe Flash, such as a standardised JavaScript API, integrated CSS support, and built-in support for accessibility and internationalisation through captioning, subtitling, and audio descriptions. Additionally, devices such as the iPhone and iPad will only support HTML5 media and not Flash. So for any serious practitioner it’s a technology you can no longer ignore. W3C invited expert Silvia Pfeiffer will talk through the big issues on this important topic.

About Silvia Pfeiffer

Silvia Pfeiffer PortraitDr Silvia Pfeiffer has worked on novel media technology for more than 15 years and is an internationally renowned expert in new Web video standards. Silvia completed her PhD in Mannheim, Germany, on audio-visual content analysis. She then spent 7 years at the CSIRO developing new video technology for the Web in the "Annodex" project. In 2007, she co-founded Australian video company Vquence which offers consulting and technology services for Web 2.0 video.

Silvia is now an invited expert on four W3C video-related working groups. She is making contributions to the new audio and video elements in HTML5, to media annotation standards, to media fragment addressing via URIs, and to video accessibility technology for hearing and seeing-impaired people (captions, audio annotations etc).

Speaker photo: (C) Alice Boxhall

Follow Silvia on Twitter: @silviapfeiffer

]]> http://www.webdirections.org/resources/silvia-pfeiffer-html5-audio-and-video/feed/ 1 Dan Rubin — Creativity, design and interaction with HTML5 and CSS3http://www.webdirections.org/resources/dan-rubin-creativity-design-and-interaction-with-html5-and-css3/ http://www.webdirections.org/resources/dan-rubin-creativity-design-and-interaction-with-html5-and-css3/#comments Sun, 31 Oct 2010 23:58:00 +0000 Guy Leech http://www.webdirections.org/?p=2909 Dan Rubin PortraitHTML5 and CSS3 are the newest stars of the web: the cornerstones of progressive enhancement, the future of online video, the easiest way to build web applications for desktop and mobile devices, and a brilliant foundation upon which we can add complex interaction and animation layers with javascript and Canvas; happily — thanks to much-improved browser support — we can now use them. In this session, Dan Rubin will show you who’s already taking advantage of these latest additions to our toolbox, what this means for interface designers, and how you can bring the same techniques to your projects.

]]> Web Directions South 2010, Sydney Convention and Exhibition Centre, October 14 1.40pm.

Presentation slides

The presentation slides are available on Dan Rubin’s website (PDF).

Session description

HTML5 and CSS3 are the newest stars of the web: the cornerstones of progressive enhancement, the future of online video, the easiest way to build web applications for desktop and mobile devices, and a brilliant foundation upon which we can add complex interaction and animation layers with javascript and Canvas; happily — thanks to much-improved browser support — we can now use them. In this session, Dan Rubin will show you who’s already taking advantage of these latest additions to our toolbox, what this means for interface designers, and how you can bring the same techniques to your projects.

About Dan Rubin

Dan Rubin PortraitAn accomplished designer, author and speaker, Dan Rubin has over ten years of experience as a leader in the fields of user interface design and web standards, specifically focusing on the use of HTML and CSS to streamline development and improve accessibility.

His passion for all things creative and artistic isn’t a solely selfish endeavor either—you’ll frequently find him waxing educational about a cappella jazz and barbershop harmony, philosophy, web standards, typography, psychology, and design in general.

In addition to his contributions to sites including Blogger, the CSS Zen Garden, Yahoo! Small Business and Microsoft's ASP.net portal, Dan is a contributing author of Cascading Style Sheets: Separating Content from Presentation (2nd Edition, friends of ED, 2003), technical reviewer for Beginning CSS Web Development (Apress, 2006), The Art & Science of CSS (SitePoint, 2007) and Sexy Web Design (SitePoint, 2009), coauthor of Pro CSS Techniques (Apress, 2006), and Web Standards Creativity (friends of ED, 2007), writes about web standards, design and life in general on his personal site, Superfluous Banter, and spends his professional time on a variety of online and offline projects for Sidebar Creative, Webgraph and Black Seagull, consulting on design, user interaction and online publishing for Garcia Media, and speaking and teaching at events, conferences and workshops (including An Event Apart, @media, SXSW Interactive, Future of Web Design, Web Directions, and various Refresh and AIGA events) around the world.

Photo: © John Morrison / Subism Studios

Follow Dan on Twitter: @danrubin

]]> http://www.webdirections.org/resources/dan-rubin-creativity-design-and-interaction-with-html5-and-css3/feed/ 0 Michael™ Smith — HTML5 Report Cardhttp://www.webdirections.org/resources/michaeltm-smith-html5-report-card/ http://www.webdirections.org/resources/michaeltm-smith-html5-report-card/#comments Sun, 31 Oct 2010 23:17:28 +0000 Guy Leech http://www.webdirections.org/?p=2907 Michael(tm) Smith PortraitRemember how fun it was to do hands-on classroom projects together in kindergarten? Well, this interactive session is going to be like that, but just with bigger people.

]]> Web Directions South 2010, Sydney Convention and Exhibition Centre, October 15 10.45am.

Presentation slides

Session description

Remember how fun it was to do hands-on classroom projects together in kindergarten? Well, this interactive session is going to be like that, but just with bigger people.

In the first part of the session, I’ll hand out blank report cards, and each of us will — individually and based on whatever criteria we personally want to use — use those report cards to assign A, B, C, D, and E letter grades to particular new features that are part of HTML5 and related specifications that are supported to some degree in browsers.

Then I’ll collect those, and use the info to judge which HTML5 features to focus the discussion on during the second part of the session. During the second part of the session, we’ll make a handful of poster-side HTML5 Report Cards together, by taking a look at the HTML5 features we identified during the first part of the session, and then assigning A, B, C, D, and E letter grades to those together — based on the current quality of the features/implementations, and on criteria such as if/how well the features actually work as expected, as well as on some criteria such as “plays well with others”, “areas where improvement is needed”, etc.

About Michael™ Smith

Michael(tm) Smith PortraitMichael(tm) Smith joined the W3C in 2007. He help with work on W3C core standards related to browsing technologies; in particular, the phenomenon known as HTML5, as well as other standards related to Web application APIs. Michael has been based in Tokyo since 2001. Prior to joining the W3C, he worked for Opera Software, and prior to that, for Openwave Systems — most of that time involved with design, development, testing, and deployment of software for mobile operators.

Follow Michael(tm) on Twitter: @sideshowbarker

]]> http://www.webdirections.org/resources/michaeltm-smith-html5-report-card/feed/ 0 Divya Manian — Active web developmenthttp://www.webdirections.org/resources/divya-manian-active-web-development/ http://www.webdirections.org/resources/divya-manian-active-web-development/#comments Sat, 23 Oct 2010 02:42:36 +0000 Guy Leech http://www.webdirections.org/?p=2860 Divya Manian PortraitWeb technologies are evolving at such a frenetic pace that it becomes almost mandatory to learn on your own. A lot of us still depend on other people to do this learning for us, and we tend to use their answers to solve our everyday problems. Inconsistent implementations, rapidly evolving specs, questionable performance impacts and maintenance implications mean we cannot always depend on others for answers but must involve ourselves actively in the process of developing specifications for new Web technologies. But how do we go about it? There are some simple rituals we can all do, which can have us be better-informed and also better inform the people and groups who are most directly involved in the development of new Web technologies.

]]> Web Directions South 2010, Sydney Convention and Exhibition Centre, October 14 10.45am.

Presentation slides

Session description

Web technologies are evolving at such a frenetic pace that it becomes almost mandatory to learn on your own. A lot of us still depend on other people to do this learning for us, and we tend to use their answers to solve our everyday problems. Inconsistent implementations, rapidly evolving specs, questionable performance impacts and maintenance implications mean we cannot always depend on others for answers but must involve ourselves actively in the process of developing specifications for new Web technologies. But how do we go about it? There are some simple rituals we can all do, which can have us be better-informed and also better inform the people and groups who are most directly involved in the development of new Web technologies.

About Divya Manian

Divya Manian PortraitDivya Manian is a Web Designer in Seattle. 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.

Speaker Photo: © Mohini Patel Glanz.

Follow Divya on Twitter: @nimbuin

]]> http://www.webdirections.org/resources/divya-manian-active-web-development/feed/ 0