プログレッシブ ウェブアプリの概要
このコースでは、初めてのプログレッシブ ウェブアプリ（ネイティブ アプリでこれまで活用してきた多くの機能を活用できるウェブアプリ）の作業を開始します。Service Worker を使用して、オフラインで動作するウェブアプリの作成についてもさらに学習します。最後に、ウェブアプリ マニフェスト ファイルを使用してユーザーのホーム画面にアプリをインストールできるようにします。
このコースは無料で提供されています Udacity
コースを受講するウェブ アクセシビリティ
このコースでは、ウェブ アプリケーションを利用できるようにするための実践演習を行います。ユーザーがユーザー補助を必要とするタイミングと理由を把握できます。その後、「スクリーン リーダーでページを適切に動作させる」、「入力フォーカスを管理する」（フォームでのタブ操作によって表示されるハイライト表示など）「仕組み」を詳しく確認します。ウェブページにおける「セマンティクス」と「セマンティック マークアップ」の意味を理解し、ARIA マークアップを追加して、さまざまな支援デバイスでインターフェースを操作できるようにします。最後に、部分的な視覚をお持ちのユーザーが簡単かつ確実にページを移動できるようにするスタイル設定手法について説明します。
このコースは無料で提供されています Udacity
コースを受講するブラウザ レンダリングの最適化
パフォーマンスはユーザーにとって重要です。ウェブ デベロッパーは、すばやく反応してスムーズにレンダリングできるアプリを構築する必要があります。Google のパフォーマンスのエキスパートである Paul Lewis が、ジャンクを破棄し、60 フレーム/秒のパフォーマンスを維持するウェブアプリの作成を支援します。このコースでは、アプリのプロファイリングやジャンクの原因の特定に必要なツールを使用します。ブラウザのレンダリング パイプラインについて学び、高性能なアプリを簡単に構築できるパターンを見つけます。
このコースは無料で提供されています Udacity
コースを受講するレスポンシブ ウェブ デザイン
このコースでは、Google の Pete LePage を使ったレスポンシブ ウェブ デザインの基礎を学びます。スマートフォン、タブレット、パソコンなど、どのようなデバイスでも適切に機能する、レスポンシブな独自のウェブページを作成できます。
まずは、サイトをレスポンシブにしている理由と、さまざまなレスポンシブ デザイン パターンが各種デバイスでどのように機能するのかを説明します。ここでは、ビューポート タグと CSS メディアクエリを使用して独自のレスポンシブ レイアウトを作成する方法を学びます。次に、メジャー ブレークポイントとマイナー ブレークポイントを試し、テキストを読みやすく最適化します。
このコースは無料で提供されています Udacity
コースを受講するクリティカル レンダリング パス
モバイル ブラウザとデスクトップ ブラウザのページ表示について詳細を確認することで、ウェブサイトの速度を最適化する方法について説明します。
クリティカル レンダリング パス、つまりブラウザが HTML や CSS、JavaScript を生き生きとした呼吸系ウェブサイトに変換するために実施する必要がある一連のステップについて学習します。そこから、パフォーマンスを測定するためのツールや、初期画面への配信をできるだけ早く行うためのシンプルな戦略を試すことができます。PageSpeed Insights から推奨事項や Google Chrome のデベロッパー ツールのタイムライン ビューに活かして、パフォーマンスを迅速に向上させるために必要なデータを見つけることができます。
このコースは無料で提供されています Udacity
コースを受講するレスポンシブ画像
画像は、ウェブページの読み込みに必要なバイトの平均 60% 以上を占めていることをご存じですか？
このコースでは、最新のウェブで画像を扱う方法を学習し、画像がどのデバイスでも適切に表示され、すばやく読み込まれるようにします。
その過程で、レスポンシブな画像を開発ワークフローにスムーズに統合するためのさまざまなスキルや手法を習得します。このコースを修了すると、さまざまなビューポートのサイズと使用シナリオに適応し、それに反応する画像で開発できるようになります。
このコースは無料で提供されています Udacity
コースを受講するオフライン ウェブ アプリケーション
このコースでは、ユーザー エクスペリエンスに重点を置いています。デベロッパーに、理想的なシナリオだけでなく、どのようなシナリオでもアプリが最高のパフォーマンスを発揮できるように、オフラインファーストを考える最適な方法を示すことを目的としています。接続の良し悪し、断続的、欠落、ユーザー間での移動が容易なアプリなどを認識する方法を学びます。
このコースで習得したスキルを使って、オンラインとオフラインの両方で機能し、可能な場合は新しいデータを読み込むアプリを作成します。ウェブアプリは、ネイティブ アプリと同様にネットワークとやり取りします。これにより、鉄道トンネルに固執したり、混雑した会議用 Wi-Fi に依存したり、モバイル通信で「デッドゾーン」を経由したりするなど、従来は難しい接続シナリオにおいてもユーザー エクスペリエンスが向上します。
このコースは無料で提供されています Udacity
コースを受講するウェブツールと自動化
このコースでは、開発を設定し、日常の業務やイテレーション中に生産性を高める方法、自身とサイトの障害を防ぐ方法、自動最適化と自動化によって時間と労力を節約する方法について学習します。最後に、実際の複数のデバイスで動作するコードを確実に実行しながら、上記のすべてを行う方法を学びます。
このコースは無料で提供されています Udacity
コースを受講するコンバージョン率の高いウェブフォームの作成
ウェブでの有意義なエクスペリエンスには、なんらかのフォームがあります。テキスト ボックス、切り替えボタン、ボタン、チェックボックス、またはタップ可能なウィジェットで構成されるフォームであっても、ウェブ デベロッパーは、ユーザーを満足させ、コンバージョンを増やすためのフォームを意識する必要があります。
このコースでは、最新のフォームに関するベスト プラクティスについて学びます。e コマース チェックアウトやイベント プランナー アプリなど、自主的なプロジェクトでスキルを磨きましょう。
また、Google のプロダクト ディレクターでウェブ フォーム デザインの著名人である Luke Wroblewski とのインタビューでは、現代のウェブとの関わり方についても紹介しています。
このコースは無料で提供されています Udacity
コースを受講する