5lide: HTML5-based Slides Maker At last week's GTUG campout, a 3-day long HTML5 hackathon, I signed up to be a TA for the weekend. That meant I spent most of my time wandering around answering random questions and helping developers debug their hacks. But, I can't be surrounded by a bunch of people hacking on cool shit and not join in myself -- it's just way too tempting. As some of you know from my posts about Prezi and Ignite, I am a fan of alternative slide formats and presentation techniques. Early last year, the HTML5 advocates started using a set of slides that both showed off HTML5 features and were written in HTML5 - so they could do interactive samples and harness the power of HTML5 at the same time. Since I had limited time to work on the app, I looked around for a sample application to start off with. I demoed the app in this form on demo night, and as usual, I haven't had time to add anything else to it since then. Happy 5lide-ing!
5lide: HTML5-based Slides Maker At last week's GTUG campout, a 3-day long HTML5 hackathon, I signed up to be a TA for the weekend. That meant I spent most of my time wandering around answering random questions and helping developers debug their hacks. But, I can't be surrounded by a bunch of people hacking on cool shit and not join in myself -- it's just way too tempting. So, on Friday night, after coming home from the pitches and discovering that drinking 2 Dr. Pepper's was not in fact a good way to avoid jet lag, I stayed up into the wee hours hacking on an idea I'd been brewing for a few weeks. As some of you know from my posts about Prezi and Ignite, I am a fan of alternative slide formats and presentation techniques. Early last year, the HTML5 advocates started using a set of slides that both showed off HTML5 features and were written in HTML5 - so they could do interactive samples and harness the power of HTML5 at the same time. Happy 5lide-ing!
location.hash is dead. Long live HTML5 pushState! For a long time, location.hash was a way for AJAX applications to get back button and bookmarking support, and libraries like jQuery BBQ from Ben Alman made dealing with it cross browser a cinch. Now, with HTML5 coming of age, there is a new feature that aims to replace the use of location.hash with a better solution: pushState. Over on the Spoiled Milk blog, Jamie Appleseed describes the API as “a way to change the URL displayed in the browser through JavaScript without reloading the page.” It works on the history object like this: window.history.pushState(data, "Title", "/new-url"); The last argument is the new URL. In order to support the back and forward buttons you must be notified when they are clicked. Currently, pushState has support from the latest versions of Safari and Chrome, and Firefox 4 will be supporting it as well. If you’d like to read a more in depth overview of these new features, you should check out the aforementioned blog post by Jamie Appleseed.
開始HTML5 – Web Workers « 色胚子部落 開始HTML5 – Web Workers Posted in 四月 24th, 2010 by 阿育 | Filed under Web開發 , 程式設計 | HTML5帶來了許多的改變，除了標記語意上的增強之外，最令人震撼的莫過於它所附屬的Javascript APIs。而 Web Workers 是 HTML5 提供的一個多執行緒(Multi-Thread)的解決方案，讓我們可以把需要大量運算的程式交由Web Workers去做背景執行，如此的好處就是其他的工作仍可以順利進行。 Web Workes 目前支援的瀏覽器有：Firefox 3.5+ / Safari 4.0+ / Chrome 5.0+ HTML5 的不同 HTML5在標記上有著相當大的變化，其中最為明顯的即是語意上的標籤，在HTML5中，結構化網頁的語意更加清晰了，除了移除許多不必要的標記之外也增加了許多標記及有用的屬性，本文只簡述範例中會用到的部份。 若想知道自己編寫的HTML5是否有錯誤可以利用 HTML5 validator 來驗證。 現在DOCTYPE只需簡短的這樣寫： 在XHTML裡標籤必須要閉合，例如： 而在HTML5中，以下的寫法也是正確的，而這也是比較建議的寫法： 同樣的方法也適用於meta，而且在指定content-type時，也只需要指定charset而不必定義文件類型text/html，例如： Web Workers基本概念 在使用Web Workers時，我們必須建立一個Worker實體，並傳入要被呼叫的Javascript檔案所在URL，而我們必須把Worker要跑的程式寫在這個檔案中，例如： var worker = new Worker( "worker.js" ); var worker = new Worker("worker.js"); 在worker.js中我們必須綁定onmessage來執行我們想要執行的動作，在這裡我們可以使用postMessage()來觸發Worker.onmessage事件，例如： onmessage = function (evt) { for ( var i=0; i<100000000; i++) { postMessage(i); worker.onmessage = function (e){ console.log(e.data); worker.html <!
Ordering CSS3 Properties When writing CSS3 properties, the modern wisdom is to list the "real" property last and the vendor prefixes first: Why is this method of ordering properties so commonly taught? Here is what it would look like "the wrong way": Even doing it "the wrong way", won't the border radius be the same no matter what, forever? The Long Long Ago: None of the properties are supported, order doesn't matter.The Past: Only vendor prefixes are supported, order doesn't matter.The Now: Both vendor prefixes and actual property are supported. Here's a simple chart with this concept at work. Woah there, Cowboy The fact is, the ordering of CSS3 properties is important, and the above is fundamentally flawed. Why does that matter? The spec or "real" version will render the top left and bottom right corners at 30px and the top right and bottom left corners at 10px. See here Border radius isn't the only example here. Thanks to @mattwiebe and @snookca for helping me understand this better. Share On
The scoped attribute The scoped attribute for the <style> element allows you to include styles mid-document that targets a specific element and its children. Depending upon how you look at this, it’ll either be a godsend or a curse. Once you’ve reached the end of this article, I hope you can form your own opinion. Let’s take a quick look at the spec: The scoped attribute is a boolean attribute. If set, it indicates that the styles are intended just for the subtree rooted at the style element’s parent element, as opposed to the whole Document. Isn’t this bad practice? For years, we’ve been told (and have actively told others) to separate content and presentation layers. The separation of these layers is still vitally important, but let’s look at a few use cases to shed some light on why this attribute has been introduced. Add one-off CSS styles. How does it work? In this section, I’ll show you how this new attribute will work when it gets rolled out to browsers. Our starting point Adding the scoped attribute
HTML5 presentation Six CSS Layout Features To Look Forward To - Smashing Coding Advertisement A few concerns keep bobbing up now and then for Web developers, one of which relates to how to lay out a given design. Developers have made numerous attempts to do so with existing solutions. Several articles have been written on finding the holy grail of CSS layouts1, but to date, not a single solution works without major caveats. At the W3Conf2, I gave a talk on how the CSS Working Group is attempting to solve the concerns of Web developers with multiple proposals. There are six layout proposals that are relevant to us, all of which I described in the talk. Generated Content For Paged Media This proposal outlines a set of features that would modify the contents of any element to flow as pages, like in a book. This would make the content look something like this: Here, @media paged indicates that the browser understands paged media and that all of the selectors specified for it should have their styles applied when paged media is supported. Multiple Columns Regions Exclusions
Expanding Images using HTML5′s contenteditable tabindex HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form elements like text inputs support the :focus pseudo class, which allow us to style those elements when they are clicked upon or otherwise navigated to. Giving an element the contenteditable attribute means it also now supports the :focus pseudo class, which opens up some interesting possibilities! We'll exploit this little trick to make an expanding image (like a lightbox without the overlay) right within some content. UPDATE: Even better, you can give attributes a tabindex attribute, like you would a form element, which allow allows :focus without the editability. HTML5 Markup HTML5 has nice elements for including captioned images. <section class="image-gallery"><figure><img src="images/img-1.jpg" alt="jump, matey" /><figcaption">Jump! The Images The CSS Related
The Edge of HTML5 The Edge of HTML5 Eric Bidelman · Legend: Not quite ready. Keep it on your radar. Relevant Chrome/WebKit bug. Bug has been fixed/resolved. Specification link ( Press 'n' for additional notes on some slides. Agenda CSS & Beyond JavaScript APIs for and Multimedia APIs Media Capture Web RTC Web Audio API ( the undocumented parts ) Multimedia Helpers For 2011: The Latest in HTML5 Stuff you probably missed: AppCache mimetype removed from HTML spec cancelRequestAnimationFrame renamed to cancelAnimationFrame. Typed Arrays Learn them! XHR2 xhr.responseType = 'arraybuffer' File APIs reader.readAsArrayBuffer(file) WebGL ( textures ) Binary Websockets ws.binaryType = 'arraybuffer' <canvas> ctx.getImageData().data == Uint8ClampedArray Transferable Objects webkitPostMessage() Media Source API video.webkitSourceAppend(new Uint8Array(...)) CSS & Beyond 2012 is the year for CSS! More: "Six CSS Layout Features To Look Forward To" Style elements mid-document, confined to immediate parent: Add one-off CSS styles.
Plan B: Font Fallbacks « coding@scribd This is the fourth post in our series about Scribd’s HTML5 conversion. The whole process is neatly summarized in the following flowchart: In our previous post we wrote about how we encode glyph polygons from various document formats into browser fonts. The next challenge the aspiring HTML5 engineer faces is if even after hand-crafting a @font-face (including self-intersecting all the font polygons and throwing together all the required .ttf, .eot and .svg files ), a browser still refuses to render the font. Luckily enough, HTML has for ages had a syntax for specifying font fallbacks in case a @font-face (or, for that matter, a system font) can’t be displayed: There’s a number of fonts one can always rely on to be available for use as fallback: Arial (+ bold,italic) Courier (+ bold,italic) Georgia (+ bold,italic) Times (+ bold,italic) Trebuchet (+ bold,italic) Verdana (+ bold,italic) Comic Sans MS (+ bold) (Yes, that’s right- every single browser out there supports Comic Sans MS) -Matthias Kramm
The Future of Web Apps - Single Page Applications | The Worm Hole The Future of Web Apps – Single Page Applications Mark Boas The world wide web is constantly evolving and so is the way we write the applications that run upon it. The web was never really designed as a platform for today’s applications, nevertheless we continue to bend it to our will. Due to differing paradigms we are forced to design our web apps in a completely different way to native apps. The price is high. In this article I propose that we can have our cake and eat it. But first let’s take a look at the advantages of a single-page approach. 1. What we are essentially talking about here is having an application where ‘virtual pages’ are loaded into one single web-page, which means switching between pages need not involve a trip to the server and so the switch occurs almost instantly. 2. Using the ‘traditional’ approach we load a lot of duplicated content for each page we visit. 3. Making it Work I’m assuming that for a web application we are using some kind of server-side language. 2.
2 Common infrastructure — HTML5 1 Introduction 1.1 Where does this specification fit? This specification defines a big part of the web platform, in lots of detail. 1.2 Is this HTML5? This section is non-normative. In short: Yes. In more length: the term "HTML5" is widely used as a buzzword to refer to modern web technologies, many of which (though by no means all) are developed at the WHATWG. 1.3 Background HTML is the World Wide Web's core markup language. 1.4 Audience This specification is intended for authors of documents and scripts that use the features defined in this specification, implementers of tools that operate on pages that use the features defined in this specification, and individuals wishing to establish the correctness of documents or implementations with respect to the requirements of this specification. This document is probably not suited to readers who do not already have at least a passing familiarity with web technologies, as in places it sacrifices clarity for precision, and brevity for completeness.
VexFlow - HTML5 Music Engraving