HTML5の使用を開始するにはどうすればよいですか？[閉まっている]

HTML5を学習するための推奨ワークフローは何ですか？どのツールをインストールする必要がありますか？どのSDKですか？どこから始めれば？テスト方法 デバッグ方法 私は何を読みますか？

「HTML5開発」と呼ばれることが多いのは、実際にはHTML、CSS、JSなどの混合物であることを理解していますが、より大きなプロジェクトがメモ帳で開発されているとは思いません。だからこそ、ワークフローに関するヒントやコツを明らかにするようお願いしています。

今すぐゼロから新しいHTML5プロジェクトを開始する場合、おそらく次のようなことをします。

HTML5 Boilerplateをダウンロードして使用します。これにより、重要なもののほとんどが初期化され、テストの準備ができた新しいページが表示されます。また、firebugと一緒に使用する必要のある優れたデバッグ機能も含まれています

上で見てHTML5にしてダイブコードの歴史と使用を参照してください。

MacではCodaを使用し、職場ではコードビューでDreamweaverを使用します。彼らはあなたのためにページを構築するつもりはありませんが、コード補完、ヒント、色分けはうまく機能します。Aptanaなどは優れた機能を提供していると確信していますが、htmlの場合は常にシンプルな方が優れていることがわかりました。

HTML5とCSS3の本を「A Book Apart」から確実にピックアップします（CSS3は今月中に公開されます）

そして最後に-この全体をチェックしてみてください：

Opera Developer Network- http://dev.opera.com/articles/view/html-5-canvas-the-basics/

キャンバスのチートシート -http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

HTML5 Canvasでの描画方法http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

HTML5は、単一の統合されたものではありません。これはHTMLの拡張機能のコレクションであり、その一部は広く実装されており、安全に使用できます。一部はまだ誰も実装しておらず、その中間にあります。HTML5を一貫した単一の開発プラットフォームとして扱い、「すべてを学ぶ」ことを試みると、本当に苦労することになります。

代わりに、学習する必要があるのは、基本的なHTML、CSS、JavaScript、コアDOM、HTML DOM、基本的なブラウザオブジェクトモデルというWeb全体です。次に、新しいWebの機能を必要な場所に追加できます。ブラウザーのサポートにより、HTML5拡張機能、CSS3プロパティ、キャンバス描画、Webソケット、HTML5の作業から派生した他のDOMおよびBOM拡張機能が可能になります...

Webの機能セットは常に進化しており、単一の参照ポイントはありません。W3Schools（偶然W3C とは関係ありません）が試行しますが、エラーがぎっしり詰まっています。それが福音と言っていることを信用しないでください。

決定的なHTML4であるCSS2を参照する必要があるかもしれません。DOMコアおよびDOM HTML仕様を確認してください。FirefoxとIEがサポートするものについては、おそらくMDCのDOMリファレンスとMSDNのDOMリファレンスもご覧ください。HTML5の仕様では、あまりにも多くの最新のDOMの多くのものだけでなく、新しいHTMLの拡張機能が含まれていますが、それは規格文書の基準でさえも使用することは非常に難しい、長くて扱いにくい文書です。不可解なECMAScript仕様ほど悪くはありませんが。（ありがたいことに、ActionScriptでの作業に慣れている場合は、おそらくすでにその多くに精通しているでしょう。）

HTML / CSS / JSを開発するのにSDKやIDEは必要ありません。必要に応じてIDEを使用できますが、お気に入りのテキストエディターですべてを実行できて非常に満足しています。心配するビルド/コンパイル手順はありません。ファイルを保存してリロードするだけで、作業は完了です。最近のほとんどのWebブラウザーには、デバッガーとその他の開発ツールが組み込まれている（IE8など）か、拡張機能（Firebugなど）としてすぐに使用できます。

JetBrainsのWebStorm（またはHTMLStormをサポートするPHPStorm、RubyMine、PyCharmなどのIntelliJベースの製品）を強くお勧めします。CSS、HTML自動補完、および（入力中の）ライブの正確性チェックを取得します。Javascriptのリファクタリングサポート（私は他のどこにも見たことがない）、およびIDEでJavascriptをデバッグする機能（FirebugまたはChrome Developerツールが不足している場合）。SVN、Git、Perforce、CVSのサポートだけでなく、プロジェクトもサポートしています。そして、他の多くの機能、強くお勧めします...

いくつかの貴重なツール

• FireBug-Firefoxの開発者プラグイン。JS、HTML、スタイルをデバッグできます。
• IEの古いバージョン（6,7）用のIE Developerツールバー。ただし、HTML5はそれほど多くありません。新しいIEにはF12ツールがあります。
• Chromeにはデベロッパーツールがあります

これらのツールは主にJavascriptのデバッグ用であり、要素の配置と適用されたCSSスタイルに関することを把握するためのものです。

IDEの推奨事項を探しているなら、Eclipseはかなり良いです。Javascriptツールを探している場合、Firebugはデバッグに最適です。

ただし、「ツール」は必要ありません。「より大きなプロジェクトはメモ帳で開発できない/開発できない」という考え方は、まったく間違っていると思います。Notepad ++を使用してすべてのHTML / CSS / Javascriptを記述しますが、これは非常に一般的なアプローチだと思います-プロのWebデザイナーにとってもです。Notepad ++には、自動補完だけでなく、HTML、CSS、およびJavascriptの構文強調表示があります。それ以上の機能を提供するソフトウェアが必要な場合は、どの機能があなたにとって重要かを明確にしてください。（ところで、あなたがMacユーザーなら、BBEditを試してみてください）。

大規模なサイトは多くの場合、DjangoやRuby on Railsなどのフレームワークで記述されていますが、それはHTML5の使用や学習とはまったく関係ありません。

Adobe（Flashの作成者）は、実際にFlashからHTML5への変換ツールをリリースする過程にあると思います。

http://news.softpedia.com/news/Adobe-Showcases-Flash-to-HTML5-Converter-163709.shtml

事実上、FlashはHTML5を開発するためのツールになります。

そして今週現在、MicrosoftはSilverlightと同様の方向に進んでいると発表しているため、すべてがHTML5に移行しているようです。

私が持っている1つの質問は、これら2つのツールによって生成されたHTML5コードがどれほど良いかということです。実際にリリースされるまで、その答えはわかりませんが、生成されたコードが特に良質であるとは思いません。うまくいけば、MS Front Pageに相当する最新のものにならないことを願っています。

Javascriptコード用のビルドシステムをセットアップし、ビルドごとにJSLintをチェックすることを強くお勧めします。私はこれが早い段階で多くのエラーを拾い、良いコーディングを促進することを発見しました（それが厳しすぎる場合はオプションを試してください）。良い例については、GitHub上のjQueryのビルドシステムを参照してください。

それ以外の編集のために、私はNotepad ++の大ファンです。私はまだ肥大化とGUIのトリックの負荷なしで有用な機能を提供するIDEを見つけていません。

ただし、最新のDreamweaverを見ることができます。コードエディターは悪くなく、ドロップインできるHTML5 ウィジェットが多数あるウィジェットギャラリーがあります。

メモ帳で大きなプロジェクトを開発できるとは思わない

あなたはそこで間違っているでしょう。私は長年のメモ帳ユーザーであり、それが最善の方法だと思います。デバッグには、IEの開発者ツール、FirefoxのFireBug、Chromeのインスペクターを使用します。

HTML5に関しては、基本的には、通常のHTMLにいくつかの余分なおもちゃが追加されています。それに、HTML5文書を宣言し、HTMLの古いバージョンのものだけを使用することを妨げるものは何もありません。

私がすべてのコストで避けることをお勧めすることの1つは、Dreamweaverのようなプログラムです。グラフィカルなデザインツールで物事が簡単に見えるようになりますが、独自の作業を行う場合は非常に困難になります。（私がこれを言うとき、私がやっているコースの他の学生を見ています）