例

状態遷移図

• オンライン書店 - 書籍カタログと購入フロー。タグによる分類、docやdefの活用例
• Amazonショッピング - 商品検索からレビュー、ウィッシュリスト、定期購入まで。大規模プロファイルの構成例
• 学習管理システム - コース管理、課題提出、成績評価。ネストされたdescriptorとhrefによる再利用の例

HTMLモック

ALPSプロファイルから生成されたセマンティックワイヤーフレームのデモです。

• オンライン書店モック — 同一のセマンティックHTML上の3段階CSSフィデリティ:
  • Level 1 - Bare — 最小限の可読性、レイアウトなし
  • Level 2 - Wireframe — 情報スケルトン。要素にホバーするとALPSのセマンティックディスクリプタIDが表示されます
  • Level 3 - Production — タイポグラフィ、カラー、レスポンシブレイアウトを含むフルデザインシステムのデモ