%%CATEGORY%%:rss

<html>  
 <head>  
  <script type="application/javascript">  
    function draw() {  
      var canvas = document.getElementById("canvas");  
      if (canvas.getContext) {  
        var ctx = canvas.getContext("2d");  
 
        ctx.fillStyle = "rgb(200,0,0)";  
        ctx.fillRect (10, 10, 20, 20);  
 
//        ctx.fillText("Sample String", 40, 10);
        ctx.fillText("Sample String", 10, 50);
      }  
    }  
  </script>  
 </head>  
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>  
 </body>  
</html>

執行結果

參考文獻

Html5 Canvas Tutorial — ttp://www.html5canvastutorials.com/tutorials/html5-canvas-element/
2.3.6 HTML5 Canvas Save Drawing as an Image — http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

by ccckmit

HTML5 開發平台 -- Titanium Mobile

Fri, 02 Dec 2011 07:51:32 +0000

參考文獻

Titanium Mobile — http://www.appcelerator.com/products/titanium-mobile-application-development/

by ccckmit

HTML5 開發平台 -- Node.js

Fri, 02 Dec 2011 07:48:30 +0000

參考文獻

Syshen's Murmur : 很屌的 Node.JS (1) — http://syshen.cc/post/5452172966/node-js-1
2011網頁開發熱門技術 – Node.js — http://www.inside.com.tw/2011/03/13/new-tech-nodejs

by ccckmit

拖拉 (Drag&Drop)

Tue, 27 Sep 2011 04:54:21 +0000

來源：http://code.google.com/p/html5uploader/
檔案：html5uploader.zip

HTML

<!DOCTYPE html>  
<html>  
<head>  
        <meta charset="utf-8">  
        <title>HTML5</title>  
        <script src="html5uploader.js"></script>  
</head>  
<body>  
        <div id="box">  
                <div id="status">Przeciągnij plik z lokalnego folderu do pojemnika ...</div>  
                <div id="drop"></div>  
        </div>  
        <div id="list"></div>  
</body>  
</html>

PHP

<?php
$upload_folder = 'data';
 
if(count($_FILES)>0) {
        if( move_uploaded_file( $_FILES['upload']['tmp_name'] , $upload_folder.'/'.$_FILES['upload']['name'] ) ) {
                echo 'done';
        }
        exit();
} else if(isset($_GET['up'])) {
        if(isset($_GET['base64'])) {
                $content = base64_decode(file_get_contents('php://input'));
        } else {
                $content = file_get_contents('php://input');
        }
 
        $headers = getallheaders();
        $headers = array_change_key_case($headers, CASE_UPPER);
 
        if(file_put_contents($upload_folder.'/'.$headers['UP-FILENAME'], $content)) {
                echo 'done';
        }
        exit();
}
?>

參考文獻

[HTML5教學] HTML5 Drag&Drop拖拉上傳檔案(可直接套用) — http://www.minwt.com/?p=3655

by ccckmit

HTML5 的應用網站

Fri, 07 Jan 2011 06:05:37 +0000

WebGL — http://playwebgl.com/

by ccckmit

HTML 5 技術體系 -- 相關網站

Sun, 01 Aug 2010 23:58:15 +0000

by ccckmit

HTML 5 技術體系 -- 最新修改

Fri, 24 Dec 2010 06:11:51 +0000

by ccckmit

3d

Fri, 25 Jun 2010 02:15:59 +0000

Google Chrome Canary Build (支援 Web GL) — http://tools.google.com/dlpage/chromesxs
Google Operating System, Unofficial news and tips about Google, Google Chrome Canary, Build — http://googlesystem.blogspot.com/2010/07/google-chrome-canary-build.html

如何在 Google Chrome 瀏覽器中啟動 WebGL 功能。

How to enable WebGL on Google Chrome / Chromium?

Make sure you are in the dev channel. Google Chrome releases updates to different release channels. Currently, there are three channels; Stable (everyone is on this when the first install Google Chrome), Beta (every month or so, you will get an update), and Dev (the developer preview channel where stuff gets tested, like WebGL). In order to use WebGL at this current time, you would need the "Beta/Dev" release channel.

First, subscribe here: http://www.google.com/chrome/eula.html?extra=devchannel
Make sure all other windows are closed.
Install
Now you are subscribed to the Development Channel, yay!
After you have subscribed to the Development channel, you would need to put some command line parameters when you launch Google Chrome.

Right click on your "Chrome" icon.
Choose properties
At the end of your target line, place these parameters:
—enable-webgl
It should look like: "chrome.exe —enable-webgl"
Now you have WebGL installed! Lets look at a cool example! This example of Escher Droste effect, where one image, rotated, thinking its zooming in forever. So cool! Take a look here: http://wakaba.c3.cx/w/escher_droste.html

Have fun WebGL'n!

by ccckmit

免費電子書 -- HTML5 技術體系

Mon, 06 Sep 2010 05:09:22 +0000

簡介
- 前言
- 過去
- 現在
- 未來

JavaScript

HTML

More CSS Secrets Another 10 things you may not know about CSS
- http://cn.nytimes.com/article/education/2012/09/14/c14cheating/zh-hk/

CSS
- 修改進化
- 字體
- 特效
- 選擇器

by ccckmit

HTML5 技術體系 -- 目錄

Mon, 06 Sep 2010 01:30:45 +0000

簡介
- 前言
- 過去
- 現在
- 未來

JavaScript

HTML

More CSS Secrets Another 10 things you may not know about CSS
- http://cn.nytimes.com/article/education/2012/09/14/c14cheating/zh-hk/

CSS
- 修改進化
- 字體
- 特效
- 選擇器

by ccckmit

HTML5 技術體系 -- 簡介篇

Mon, 06 Sep 2010 01:33:56 +0000

簡介
- 前言
- 過去
- 現在
- 未來

by ccckmit

HTML5 技術體系

Fri, 25 Jun 2010 01:08:43 +0000

簡介

HTML 5 最早是由由 WHATWG 在 2004 年提出，2007年被 W3C 所接納，在2008年1月22日發布第一份正式草案，預計在 2012 年才會推出正式標準。

即便如此，各家瀏覽器廠商早已展開動作，紛紛將 HTML5 視為重要的戰場，Firefox、Opera、Google Chrome、Apple Safari 等瀏覽器都已經支援了 HTML5 的功能，微軟的 IE 可以說是最慢才宣布要支援 HTML5 的重要瀏覽器，但微軟也已明確宣布要在 IE9 當中全力擁抱 HTML5，這些現象讓 HTML5 可能成為下一代 Web 的最重要技術。

目前在 Web 上，關於繪圖等功能主要是採用 Adobe 的 Flash 技術所製作的，但是在 iPhone 成功佔領手機市場後，蘋果的老板 Steve Job 卻拒絕讓 Flash 登上 iPhone 平台，並且聲稱 HTML5 比 Flash 好太多了。Steve Jobs 更進一步以契約的方式借助法律規定任何 Flash 技術都不准登上 iPhone 平台，這個動作對 Flash 技術的殺傷力極大，但也讓 HTML5 陣營的氣勢大盛，網路上紛紛盛傳 Flash 即將死亡，HTML5 將取而代之。

技術體系

HTML 5 是新一代的網頁標準，其內涵並非只有 HTML5 一項而已，整個技術體系包含 HTML5、CSS3 與增強過的 JavaScript API 函式庫，這個架構可以用下列公式表示。

HTML5 = HTML5+CSS3+new JavaScript API

在上述公式中，最重要的角色其實是 new JavaScript API，因為這個新版的函式庫當中包含了 2D 的 Canvas 繪圖、3D 的 WebGL 技術、衛星定位函式庫、網路的 Socket 函式庫、WebSQL 資料庫函數、以及 local Storage 函數可用來永久儲存資料，這些技術讓瀏覽器能力大為增強，幾乎可以成為網路作業系統了。

結語

假如 HTML5 真的大為流行，那麼就會形成一個跨平台的程式開發環境，這個平台將會跨越電腦、筆電、平板電腦、手機、PDA 等裝置。因此，您只要開發一個 HTML5 的網站，就可以讓所有上網裝置都可以使用您所開發的功能，這對程式設計師而言無疑有極大的魅力。

由於 HTML5 已經讓瀏覽器具有網路作業系統的潛能，因此您的網站其實就是一個應用程式，而這個應用程式可以做 2D、3D 繪圖、衛星定位、存取資料庫等工作，您可以輕易的寫出多人網路線上 GPS 遊戲，以及大部分您在桌上型電腦所能寫出的應用程式，這實在是相當令人期待的一件事啊！

參考文獻

http://zh.wikipedia.org/zh/HTML_5

by ccckmit

HTML5 技術體系 -- JavaScript 篇

Mon, 06 Sep 2010 00:55:10 +0000

JavaScript

by ccckmit

HTML5 技術體系 -- HTML 篇

Mon, 06 Sep 2010 00:56:49 +0000

HTML

by ccckmit

HTML 5 技術體系中的新標記

Mon, 06 Sep 2010 00:51:02 +0000

簡介

HTML5 承襲了 HTML4 的大部分標記，並且進行大幅的擴增，這些擴增主要可以分為下列五類，包含 Semantics (New tags, Link Relations, Microdata)、Accessibility (ARIA roles)、Web Forms 2.0 (Input Fields)、Multimedia (Audio Tag, Video Tag)、2D and 3D drawing (Canvas, WebGL, SVG) 等。

New Semantics Tags

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>

  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <footer>
   Copyright © 2009.
  </footer>
</body>

New Link relations

<link rel='alternate' type="application/rss+xml" href="http://myblog.com/feed" />
<link rel='icon' href="/favicon.ico" />
<link rel='pingback' href="http://myblog.com/xmlrpc.php">
<link rel='prefetch' href="http://myblog.com/main.php">
...

<a rel='archives' href="http://myblog.com/archives">old posts</a>
<a rel='external' href="http://notmysite.com">tutorial</a>
<a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel='nofollow' href="http://notmysite.com/sample">wannabe</a>
<a rel='tag' href="http://myblog.com/category/games">games posts</a>
...

Microdata

<div itemscope itemtype="http://example.org/band">
 <p>My name is <span itemprop='name'>Neil</span>.</p>
 <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p>
 <p>I am <span itemprop='nationality'>British</span>.</p>
</div>

ARIA attributes

<ul id="tree1"
      role="tree"
      tabindex="0"
      aria-labelledby="label_1"
      >
  <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
  <li role="group">
    <ul>
      <li role="treeitem" tabindex="-1">Oranges</li>
      <li role="treeitem" tabindex="-1">Pineapples</li>
      ...
    </ul>
  </li>
</ul>

New form field types

Implemented
Dedicated UI:

<input type='range' min='0' max='50' value='0' />
<input results='10' type='search' />
<input type='text' placeholder='Search inside' />

Input Validation:

<style> :invalid { background-color: red; } </style>
<input type='color' />
<input type='number' />
<input type='email' />
<input type='tel' />

etc…
Not yet

<meter>
<progress>
<output>

etc…

Audio + Video

<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted = false;

<video src='movie.mp4' autoplay controls></video>
document.getElementById("video").play();

Canvas

<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var canvasContext = document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);

  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();
</script>

Canvas 3D (WebGL)

<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var gl = document.getElementById("canvas").getContext("experimental-webgl");
  gl.viewport(0, 0, canvas.width, canvas.height);
  ...
</script>

SVG in HTML5

<html>
  <svg>
    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100"
        fill="url(#myGradient)"
        onmousedown="alert('hello');"/>
  </svg>
</html>

by ccckmit

HTML 5 技術體系中的 CSS

Mon, 06 Sep 2010 00:51:57 +0000

簡介

在 HTML 5 當中，CSS 的改良主要集中在 Typography、Visuals、Transitions、transforms 與 animations 等方面，最主要的改變是增加了許多動態的效果。

CSS Selectors

Selectors

.row:nth-child(even) {
  background: #dde;
}
.row:nth-child(odd) {
  background: white;
}

Image-like display

div {
  display: inline-block;
}

Specific attributes

input[type="text"] {
  background: #eee;
}

Negation

:not(.box) {
  color: #00c;
}            
:not(span) {
  display: block;
}

More specific targetting

h2:first-child { ... }

div.text > div { ... }
h2 + header { ... }

New Font Support

@font-face {
  font-family: 'LeagueGothic';
  src: url(LeagueGothic.otf);
}

@font-face {
  font-family: 'Droid Sans';
  src: url(Droid_Sans.ttf);
}

header {
  font-family: 'LeagueGothic';
}

Text Wrapping

div {
  text-overflow: ellipsis;
}

Columns

-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

Text Stroke

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 0.00px;
}

Opacity

color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.75);

Hue/saturation/luminance color model

color: hsla(128, 75%, 33%, 1.00);

Rounded corners

border-radius: 22px;

Gradients

background: -webkit-gradient(linear, left top, left bottom,
                             from(#00abeb), to(white),
                             color-stop(0.5, white), color-stop(0.5, #66cc00))

background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))

Shadows

text-shadow:
  rgba(64, 64, 64, 0.5)
  5px
  0px
  0px;

box-shadow:
  rgba(0, 0, 128, 0.25)
  0px
  0px
  0px;

Instant Web 2.0 (just add sliders)

text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;

background:
  -webkit-gradient(linear, left top, left bottom,
                   from(rgba(200, 200, 240, 0.88)), to(rgba(255, 255, 255, 0.88)));

border-radius: 11px;

-webkit-box-reflect: below 10px
  -webkit-gradient(linear, left top, left bottom,
                   from(transparent), to(rgba(255, 255, 255, 0.75)));

Background enhancements

Background sizing

#logo {
  background: url(logo.gif) center center no-repeat;
  background-size:
    ;
}

Multiple backgrounds

div {
  background: url(src/zippy-plus.png) 10px center no-repeat,
              url(src/gray_lines_bg.png) 10px center repeat-x;
}

Transitions

#box.left {
  margin-left: 0;
}
#box.right {
  margin-left: 1000px;
}

document.getElementById('box').className = 'left';
document.getElementById('box').className = 'right';

#box {
  -webkit-transition: margin-left 1s ease-in-out;
}

document.getElementById('box').className = 'left'; Left
document.getElementById('box').className = 'right'; Right

Transforms

-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)

#threed-example {
  -webkit-transform: rotateZ(5deg);

  -webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
  -webkit-transform: rotateZ(-5deg);
}

Animations

@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

by ccckmit

%%CATEGORY%%:rss

HTML5 技術體系 -- CSS 篇

HTML5 參考文獻

最新文獻

HTML 標準文件

HTML 5 資源導覽

電子書

HTML 5 教學展示

相關新聞

瀏覽器

HTML5 開發工具 -- Aptana Studio

下載點

參考文獻

HTML5 的工具集

HTML5 中的 Canvas 繪圖

程式範例

執行結果

參考文獻

HTML5 開發平台 -- Titanium Mobile

參考文獻

HTML5 開發平台 -- Node.js

參考文獻

拖拉 (Drag&Drop)

HTML

PHP

參考文獻

HTML5 的應用網站

HTML 5 技術體系 -- 相關網站

HTML 5 技術體系 -- 最新修改

3d

如何在 Google Chrome 瀏覽器中啟動 WebGL 功能。

免費電子書 -- HTML5 技術體系

HTML5 技術體系 -- 目錄

HTML5 技術體系 -- 簡介篇

HTML5 技術體系

簡介

技術體系

結語

參考文獻

HTML5 技術體系 -- JavaScript 篇

HTML5 技術體系 -- HTML 篇

HTML 5 技術體系中的新標記

簡介

New Semantics Tags

New Link relations

Microdata

ARIA attributes

New form field types

Audio + Video

Canvas

Canvas 3D (WebGL)

SVG in HTML5

HTML 5 技術體系中的 CSS

簡介

CSS Selectors

New Font Support

Text Wrapping

Columns

Text Stroke

Opacity

Hue/saturation/luminance color model

Rounded corners

Gradients

Shadows

Instant Web 2.0 (just add sliders)

Background enhancements

Transitions

Transforms

Animations