開始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 <!
Periodic Table of the Elements - Josh Duck. 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! Start Using HTML5 WebSockets Today. One of the coolest new features of HTML5 is WebSockets, which let us talk to the server without using AJAX requests. In this tutorial, we'll review the process of running a WebSocket server in PHP, and then building a client to send and receive messages to it over the WebSocket protocol. What are WebSockets? WebSockets is a technique for two-way communication over one (TCP) socket, a type of PUSH technology.
At the moment, it's still being standardized by the W3C; however, the latest versions of Chrome and Safari have support for WebSockets. What do WebSockets Replace? Websockets can replace long-polling. Many Ajax applications makes use of the above – this can often be attributed to poor resource utilization. Wouldn't it be great if the server could wake up one morning and send its data to clients who are willing to listen without some sort of pre established connection? Step 1: Get the WebSocket Server This tutorial will focus more on the client building rather than server implementation. 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. 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 We’ll be using the following code sample as a starting point: This is a basic example, with two headings and two paragraphs set within the article element. Adding the scoped attribute. 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.
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. The properties break-before, break-after break-inside can be used to control where the content falls within the pages. Regions. Cut the Rope 移植至 HTML5 網頁，週末一起來打發時間吧！ 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.