カテゴリー : HTML5

HTML5 全国統一実力テスト

「HTML5 全国統一実力テスト」
というものがありました。

HTML5 全国統一実力テスト

HTML5、JavaScriptの実力を試すのにどうでしょう?

HTML/CSSコースとJavaScriptコースが用意されている。
HTML/CSSコースは全16問、JavaScriptコースは全21問。
試験問題はカヤック、監修はピクセルグリッド。

ブラウザ上でコーディング共有ができるサービスを行っているjs do.it
Google chromeとWindowsIE9がスペシャルサポートとして参加している。

HTML5 全国統一実力テスト
http://jsdo.it/event/html5cat/2011/summer/

IE対策 Google Chrome Frame

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

これをHTMLのヘッダーに入れてやると、IEで閲覧している場合、Google Chrome Frameで表示します。
Google Chrome Frameがインストールされていない場合は、IEの利用可能な最新のレンダリングエンジンで表示します。
IE9でQuirksモードで表示が崩れてしまうときにも有効。

Google Chrome Frameとは、Google Chromeで使用されているレンダリングエンジンやJavaScriptエンジンなどを、IEの古いバージョンでも利用できるようにするプラグイン。
インストールすると、IE8以下でもCanvas、CSS3、HTML5、高速なJavaScriptエンジンが利用できるようになります。

Google Chrome Frame
http://www.google.com/chromeframe/?hl=ja

9月22日にInternet Explorer(IE)用プラグイン「Google Chrome Frame」の最新安定版が公開された。

HTML5・XHTML DOCTYPEと文字コード

HTML5とXHTMLのDOCTYPE・文字コード情報の違いについて。

http://www.w3.org/TR/html5-diff/
HTML5サンプル

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

このサンプルを見ると、

<!doctype html>

とDOCTYPE宣言されています。
HTML5では、頻繁に書く必要のあるものは簡単に書けるようにしよう!という考えがあり、簡単になっています。

XHTMLでは、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

でした。

文字コード情報も短くなりました。
HTML5
[hrml][/html]
となりました。

XHTML
[hrml][/html]
でした。

HTML5になると、いろいろ簡単になりますね。

HTML5 サイトリンク集『HTML5 Gallery』

ギャラリーサイト『HTML5 Gallery』ではHTML5で作られたサイトをまとめて紹介しています。

html5gallery

html5 gallery


HTML5 Gallery

HTML5のサイト制作するのに、参考になるかも。
頻繁に更新してます。

海外でHTML5の素晴らしいサイト紹介で日本のキャバクラのサイトが・・・

海外でHTML5の素晴らしいサイト紹介で日本のキャバクラのサイトが紹介されています。
どうして??w
会社でHTML5について調べててキャバクラのサイト開いてたら、絶対誤解されるよ。後ろに気をつけて!

HTML5 名古屋のキャバクラのサイト紹介

HTML5 名古屋のキャバクラのサイト紹介

Beautiful Collection Of HTML5 Websites
このブログは有名な海外ブログのようです。

XAMPPで自分のPC内(ローカル)WEB環境をつくる。

XAMPP(ザンプ)をインストールすれば、お金をかけてレンタルサーバーなど借りなくてもデータベースやプログラムのテストなどができるようになります。
サーバーなどの知識は、とりあえずは必要なく、一般のソフトウェアと同様にインストールするだけです。

勉強のためにお金を最初からかけなくても、自分のPCの中でWEB制作の環境をつくれることができます。

XAMPPとは

名前のAMPP部分は、Apache、MySQL、PHP、Perlの頭文字をつなげたもの。
これらのアプリケーションをひとつにまとめ、簡単にインストール・アンインストールできるようにしたアプリケーション。
もともとLINUXのアプリケーションで、そのときはLAMPPだったみたい。複数OSに対応するようになってXAMPPという名前になったようです。
対応OS:Windows、Linux、Mac OS X、Solaris
フリーウェアなので、無料です。


XMAPPの中身

  • Apache 2.2.14 (IPv6 enabled) + OpenSSL 0.9.8l
  • MySQL 5.1.41 + PBXT engine
  • PHP 5.3.1
  • phpMyAdmin 3.2.4
  • Perl 5.10.1
  • FileZilla FTP Server 0.9.33
  • Mercury Mail Transport System 4.72

がインストールするだけで、自分のPC内(ローカル)で使えるようになる!しかも、無償で!インストールも簡単!


XMAPPをとりあえず、インストール

  1. XAMPPのダウンロードをする。
    http://www.apachefriends.org/jp/xampp-windows.html
    こちらにアクセスして、スクロールしていくと、EXEとあるので、そこをクリック!
    XAMPP ダウンロード

    XAMPP ダウンロード

  2. 「インストールする!」Cドライブ直下にインストールした方が良いです。
  3. コマンド画面(黒い画面)がでてきますが、そのままEnterで進めていって、最後はxを押して終了させましょう!
  4. コントロールパネル内ApacheのStartボタンをクリック!Runingとなる。
    XAMPPコントロールパネル

    XAMPPコントロールパネル

  5. ブラウザで
    http://localhost/
    にアクセスしてこの画面が開けばインストールは成功!

HTML5 書籍の内容を無料公開

HTML5の刊行予定の書籍が無料公開されている。
その書籍名は「HTML5: Up and Runinig」(O’REILLY)
Web上で全ての情報を公開している!
執筆者である、Googleの開発者であるMark Pilgrim氏のサイト。
Dive into HTML5
ただ、残念(当然?)ながら英語です。

クリエイティブコモンズライセンスは
http://creativecommons.org/licenses/by/3.0/deed.ja

HTML5とは

次世代HTMLの規格。
HTML4やXHTMLから、記述の仕方や追加された機能が多くある。
他にもメリットとしてSEO対策が、今までと比べると楽になりそうですよ。

Dreamweaver CS5でHTML5に対応

AdobeのDreamweaver CS5でHTML5に拡張機能で対応していて、AdobeのサイトからWindowsとMacOSともに「HTML5 Pack」を無料でダウンロードできる。

HTML5 Packの拡張内容

  • HTML5とCSS3の各種機能向けの新たなコードヒントが採用
  • WebKitエンジンのアップデート
  • ライブビューで動画と音声の再生に対応
  • HTML5スターターレイアウト

「HTML5 Pack」はAdobe Labsから無料でダウンロードできる。
http://labs.adobe.com/

が、DreamWeaverCS5以前のバージョンでは、(CS4でも)HTML5に対応はしていない。
Dreamweaver CS4でHTML5のコードヒントを表示させたい場合は、以下のサイトでファイルが配布されていたので、気になる方はチェックしてみてはどうでしょうか?
dwlog.net

こういうサイトの管理者さんは本当にありがたいですね。