HTML5とCSS3の可能性を解き放つ

HTML5とCSS3のリリースは、飛躍的な進歩に他なりませんでしたが、このテクノロジーが提供する新機能をあまり活用していないデザイナーはほとんどいません。 これは、HTML5とCSS3の可能性がすべて見過ごされてきたため、コーディングのわずかな違いだけで、人々は多かれ少なかれ同じサイトを開発し続けているためです。

特に問題はありませんが、HTML5とCSS3を使用すると、これまで以上に素晴らしい作品を作成するために活用できることがたくさんあります。

キャンバスを無視しないでください

canvasオブジェクトを理解することは、新しいHTML5コーダーが行う最も難しいタスクのXNUMXつです。特に、そのコーダーが以前に他のバージョンのHTMLでコーディングしていて、コンピューターグラフィックプログラミングの背景がない場合はなおさらです。

キャンバスオブジェクトを使用することを学ぶことは、描画を行うつもりがほとんどない場合でも、すべての真剣なコーダーが時間をかけて学ぶべき貴重なスキルです。 アニメーションインフォグラフィック、スライドショー、チャート(インタラクティブチャートを含む)など、さまざまな用途に使用できます。

イラスト提供:

キャンバスを使用することは、HTML5でオブジェクトを作成し、それをJavaScriptで生成するだけです。 含まれているテクニックは別の日のトピックですが、このサイトには、開始するのに役立つチュートリアルが既にいくつかあります。

もうフラッシュは必要ありません

以前にFlashを使用していたもののほとんどは、Flashを必要としません。 CSS3トランジション、HTML5描画、HTML5アニメーション、HTML5ビデオ、HTML5オーディオを使用して、すべてを行うことができます。

Flashで許可されていた、HTML5で行われていない唯一のことは、ユーザーをスパイしてプライバシーを侵害することですが、それはあなたがやりたいことではありませんか。

ほとんどのユーザーはFlashが非常に煩わしいと感じましたが、ほとんどの場合、Flashは必然的に必然的にインストールされました。 Flashに関連する深刻なセキュリティリスクとプライバシーの問題により、ほとんどのユーザーはまったくインストールしないか、実行するタスクに厳密に必要な場合にのみ、ケースバイケースでのみアクティブ化するようになりました。 。

CSS3は新しい疑似クラスを提供します

CSS2にはいくつかの疑似クラスがありましたが、CSS3を使用すると、重要な位置疑似クラスを使用して、より詳細な制御を行うことができます。 疑似クラス名が示すように、主にテキストで使用されます:前、後、最初の文字、最初の行…

また、トランジションにもアクセスできます。トランジションは、テキストを含め、何でも変更するために使用できます。 これらの遷移は、ユーザーが画面に表示するものをアニメーション化または変換します。

ウェブページはGPUと直接通信できます

どんな種類のハードウェアアクセラレーションもモバイルデバイスのバッテリ寿命を消耗するため、これを行うにはいくつかの注意が必要ですが、それができることはまだかなりクールです。

GPUアクセラレーションは、トランジション、3D変換、3Dモードのキャンバス、およびWebGL 3Dを使用するときに機能します。 後者が私のお気に入りですが、WebGLに関係するすべてのものを理解するためには、多くの資料を読む必要があります。 ただし、アニメーションやゲームを作成するための多くのスコープが提供されます。

GPUアクセラレーションは、HTML5およびCSS3をサポートしていても、古いブラウザーでは機能しません。

gifの礼儀

ゲームエンジンを使用して、3Dグラフィックからハードワークを取り除く

ゲームプログラマーは、ゲームプログラミングのタスクをよりシンプルにするために永遠にゲームエンジンを使用しています。ブラウザベースの環境。

PlayCanvasを使い始めるのが最も簡単な方法のXNUMXつは、試してみるのは無料で、個人ライセンスの場合は非常に安価ですが、軽量ではありません。 ここに 急襲、PlayCanvasで作成されたゲーム:

 

そして、これはある ロボストーム:

このようなゲームを作成できますか? もちろん、今までよりもはるかに簡単になりました。

レトロなゲーム作成体験をお試しください。 構成2 or 構成3。 ドラッグアンドドロップベースでゲームの作成を開始するために必要なものがすべて揃っています(ただし、制限が多すぎると感じる人もいます)。 あなたはオンラインでゲームを作成し、人々はそれらをオンラインでプレイします。 プログラミングを知らない、学習に煩わされたくない人のためのエンジンです。

ここでの キウイストーリー、Construct2で作成された旧式の3Dプラットフォーマー:

これらのエンジンを使用するゲームだけに限定されません。 映画やプレゼンテーション全体を作るには、 ブレンダー or マヤ、そして特定のプラットフォーム専用のゲームでは、通常、そのプラットフォーム専用のネイティブプログラミング環境を使用する方が良いでしょう。 クロスプラットフォームのインタラクティブゲーム、ストーリーテリング、教育ソフトウェア、プレゼンテーションの場合、HTML5エンジンは優れたオプションです。

HTML5とCSS3はより強力な機能を提供します

HTML5とCSS3を使用すると、ページに表示されるすべての要素を完全に制御できるようになります。これには、実際に希望する方法で各オブジェクトを操作する機能も含まれます。

基本的な構成単位は依然として長方形ですが、Webサイトは長方形の線形性に従う必要はありません。 好きな角度に物を置いたり、回転させたり、傾けたり、ねじったり、曲げたりできます。Webブラウザーは少し不満を感じません。

また、以前よりはるかに簡単に不透明度とスケーリングを制御できるようになり、テクニックはすべての主要なブラウザで機能します。

2018年の初めの執筆時点では、異なるブラウザー間でのスケーリングにはまだいくつかの問題があります。一部のブラウザーは正確にスケーリングできますが、同じページに対して非常に異なる結果をもたらすブラウザーもあります。

つまり、少なくとも今のところ、レスポンシブな目的でスケーリングを使用したい場合は、サイトのさまざまなバージョンをプログラムする必要があるという問題に直面しています。

幸いなことに、それが必要になることはめったにありませんが、その画面がどれほど小さくても主な目的になる場合でも、画面に何かを合わせることがあります。 これらの場合、異なるブラウザー間での標準化されたスケーリングの欠如は問題のままです。

それでも、これらの問題はHTML5またはCSS3の問題ではなく、ブラウザ開発者がHTML5およびCSS3によって提供される機能を適切にサポートできないという問題です。

時間が経つにつれ、ブラウザーに改善が見られ、すべてが期待どおりに機能するようになります。 それまでにHTML6とCSS4の学習を開始するときかもしれませんが、少なくともそれは正しい方向への一歩です。

ヘッダー画像提供

ボグダン・ランセア

ボグダンはインスパイアードマグの創設メンバーであり、この期間でほぼ6年の経験を積んでいます。 余暇には、クラシック音楽を学び、視覚芸術を探索するのが好きです。 彼はフィクシーにもかなり夢中です。 彼はすでに5を所有しています。