Design Wedge バックナンバー：No.84

　
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━



◆     D e s i g n  W e d g e           internet/web design mail magazine 

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
2004/03/13｜no 84｜ http://www.karadesign.com/designwedge/ ｜post>>magmag

((！))

最近のウェブ制作で起きている大きな奔流として、CSSを用いたページデ
ザインがあります。CSS2を使い、XHTML上で展開されるのですが、よく考
えてみるとXHTMLはXML文書の一つであり、そのサマリー情報を伝えるRSS
やAtomもまたXMLです。いつのまにかウェブはXML全盛の季節にはいって
いたのだなあと感じました。そんなわけで、今回の号ではサイトサマリ
ー関連の特集をお送りします。

今号から登録された皆様、はじめまして。ご登録ありがとうございます。
Design Wedgeは、現在月２回発行のウェブデザインの専門誌です。
毎月１１日と２６日の発行を予定してます。

１１日発行予定号では、サイトデザインのレポートとモバイルデザイン
関連＋α、２６日発行予定号では、ニューストピックとウェブアプリケ
ーション関連のデザイン＋αという感じで、ウェブデザインの世界を様
々な角度から探究していっています。これからもDesign Wedgeをよろし
くお願いします。

―――――――――――――――――――――――――――――――――――――

-PR-----------------------------------------------------------------------

◆Design Wedgeに広告を掲載してみませんか？
◆掲載場所はヘッダー部分
◆広告スペースは横幅全角３７文字×７行です
◆メールにてお気軽にお問い合わせ下さい
                                     >> mailto:designwedge@karadesign.com

-PR-----------------------------------------------------------------------


    ≫ c o n t e n t s


   +01 特集１：ワールドサイトデザインレポート

            -- Design In-Flight
            -- May 1st Reboot
            -- xpeia
            -- 3Dmercenary.dk home
            -- Web Site Template Store
            -- www.supertotto.com
            -- www.twink.net
            -- Scary Stories Inc.
            -- KARINA BEDNORZ FOTOGRAFEN
            -- css Zen Garden: The Beauty in CSS Design
            -- fluor

   +02 特集２：デジタルデバイスのゆくえ
               「セマンティック時代のウェブサイトデザイン」

            -- セマンティック時代のウェブサイトデザインとは？
            -- 現在の状況
            -- Atomを作るには
            -- サイトサマリーの検証
            -- セマンティック時代のウェブサイト構成の提案

   ---
   +03 プレスブース
   ---
   +04 Design Wedgeよりお知らせ
   +05 編集後記

   今号のバックナンバーは、
   ( http://www.karadesign.com/designwedge/backnumbers/0084.shtml )
   にてご覧になれます。


 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +01 特集１：ワールドサイトデザインレポート
       ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

 " Design In-Flight "
 ( http://designinflight.com/ )

orkutって知っていますか？　ソーシャルネットワーキングサイトという
ジャンルのサイトで、誰かの紹介がないと入れないという仕組みになっ
ています。そのorkut内に作ったDesign Wedgeのリーダーズコミュニティ
で教えてもらったプロジェクトDesign In-Flightを紹介します。
Design In-Flightは、グラフィックデザインやウェブデザイン、ウェブ
デベロップメントを中心とした７月に創刊される季刊の有料PDFマガジン
です。新しいサービス上の新しいコミュニティで、新しいメディアの誕
生に立ち会えるのはすごくエキサイティングなことだと感じてます。

 Design In-Flightのエディターを勤めるArikawa氏のサイトはこちら。
 " MODULO26 "
 ( http://modulo26.net/daily/ )



 " May 1st Reboot "
 ( http://www.may1reboot.com/ )

May 1st Rebootがリニューアルされて2004年版になっています。
Lounge72でMay 1st Rebootのインタビュー記事を読んで初めて知ったの
ですが、May 1st Rebootを制作しているPaul Antonio Szypulaは1977年
生まれで僕とほぼ同世代なのだそうです。May 1st Rebootは５月１日に
サイトを一斉にリブートすることでデザインコミュニティを活気付けよ
うとするプロジェクト。リブートに賛同したサイト制作者は登録をし、
コンテストに参加します。大抵のサイトは更新のタイミングを見失うと
ほったらかしにされたままいつまでもずるずると公開されていくことに
なります。そういう事態に陥らせないためにもこういったサイトの存在
は素晴らしいと思います。

 Lounge72とCobalt revolterに掲載されているMay 1st Rebootのインタ
 ビュー記事

 " Interview Paul Szypula， May 1st Reboot "
 ( http://www.lounge72.com/04/18/index.php )

 " cobalt.revolter ::: Interviews "
 ( http://www.cobaltrevolter.net/interviews/13paulszypula/index.htm )



 " xpeia "
 ( http://www.xpeia.dk/ )

BLOGをはじめCMSでの更新が、使いにくいなあと感じたことはありません
か？　使いやすいものが生まれにくい理由の一つとして、CMSのインター
フェイスがウェブサイトのトップページのように誰でも見れるものと違
ってなかなか他のインターフェイスを見る機会がないということがある
のではないかと思っています。xpeiaのサイトではツアー内でCMSのイン
ターフェイスの一端を見ることが出来ます。言葉がわからなくてもアイ
コンでわかりますよね。

 " xpeia tour "
 ( http://www.xpeia.dk/Default.asp?Page=22 )



 " 3Dmercenary.dk home "
 ( http://www.3dmercenary.dk/ )

3dmercenaryはデンマークのコペンハーゲンに住む同世代のデザイナーの
サイトです。3Dグラフィックとウェブデザインを専門としています。サ
イトは非常にシンプルで美しいだけでなく、トップページのみで全てが
分かるようになっています。



 " Web Site Template Store "
 ( http://www.coolhomepages.com/store/ )

少し前に、PSD形式でグラフィックのみを作って納品するという仕事をし
たのですが、coolhomepages.comのデザインドテンプレートストアでは、
膨大な量のテンプレートを取り扱っています。既にスライスされたPSD形
式のファイルやHTMLファイル、FLAファイルなどがセットになっていて、
すぐにでもサイトに適用できる段階になってます。ただし、これらのソ
ースファイルを扱う技術が多少は必要といえそうです。各テンプレート
のクオリティは非常に高く、そして安価です。



 " www.supertotto.com "
 ( http://www.supertotto.com/ )

supertotto.comはエントランス部分で大量のピクセルキャラクターが歓
迎してくれます。このサイトでは様々なピクセルアートを見ることが出
来ます。面白いと思ったのは、クライアントリストやリンクリストに掲
載してある各会社、各サイトのロゴが全て単色のピクセルベースに書き
起こされている点です。元々ピクセルベースのロゴもありますが、そう
でない会社のロゴもそれなりに見えるので、これをサイト用ロゴとして
使いたいと思うサイトもいるのではないでしょうか。



 " www.twink.net "
 ( http://www.twink.net/ )

POPなデザインというのは作るのがなかなか難しく、作る人がPOPでない
と出来ないのではと思っているのですが、twinkのサイトは見事にPOPです。



 " Scary Stories Inc. "
 ( http://www.scarystories.com/ )

scarystoriesのサイトは完成されたといえる数少ないサイトではないで
しょうか？　下手にいわゆるデザイナーが手を加えてしまえば、この雰
囲気が壊れてしまうばかりだけでなく、後の人がこの素晴らしい世界感
を体験することができなくなってしまうのです。リニューアルの必要が
ないサイトといえるでしょう。このまま残しておいてもらいたいもので
す。キャラクターの紹介を一通り見たらCartoonを見てみましょう。ショ
ッピングへの結び付け方、ファンとの交流もうまくいっているように見
えます。



 " KARINA BEDNORZ FOTOGRAFEN "
 ( http://www.karinabednorz.de/ )

 " Adopt Design "
 ( http://www.adoptdesign.com/ )

Design Wedgeで過去に取り上げたことがある「Adopt Design」の制作です。
彼らは写真を中心としたサイトの制作に長けていて、サイトでは過去の
実績を見ることが出来ます。僕が写真家だったら彼らに依頼したいかも
とか考えます。Karina Bednorzのサイトは写真のみに目が行くようにイ
ンターフェイスの存在感をおさえた造りになってます。



 " css Zen Garden: The Beauty in CSS Design "
 ( http://www.csszengarden.com/?cssfile=/074/074.css&page=1 )

 " css Zen Garden: The Beauty in CSS Design HOME "
 ( http://www.csszengarden.com/ )

CSSZENは、トップページのコンテンツや文章構造はそのままに、CSSでど
ういうデザインができるかということを追及しています。様々なエント
リーサイトの中でも、このヴィジュアルは特異です。エジプトの暑さ、
まぶしさといったものが感覚として伝わってくるヴィジュアルに仕上
がっています。
もちろん僕はエジプトに行ったことはないのですが、昔エジプトの人と
メル友になったことがあります。そんな体験があるせいかデザインが視
覚効果だけでなく感覚効果を生み出したのには驚きました。



 " fluor "
 ( http://www.fluordesign.com/index.html )

Flour Designのサイトを見ていると、従来からあった要素を組み合わせ
て新しいイメージを紡ぎだすということの大事さについて考えさせられ
ます。Flour Designは洗練された美しいサイトですが、個々の要素を見
ていくと、昔ウェブで盛んに使われてきた手法がミニマライズされて使
用されているのがわかります。矢印ボタンやスクロールバーや書類アイ
コンなどはMac OS8時代のものをデフォルメして使用されており、冒頭
に出るCASE STUDYの右の画像は大昔ウェブで盛んに使われたビデオノイ
ズ風の画像となっています。当時のビデオノイズは単にエフェクト的な
要素だけでなく、画素の低い画像をそれなりに見せたり、線をはさんで
画像を間引くことでGIF画像の容量を減らしたりといった実用的な側面が
ありました。



 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +02 特集２：デジタルデバイスのゆくえ
       ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

--- セマンティック時代のウェブサイトデザイン ---

今回はセマンティック時代のウェブサイトデザインと題して、最近台頭
してきたRSSをはじめとするメタデータといかにつきあっていくかという
ことを中心にお送りします。今後、ウェブサイトをデザインする上で踏
まえておかなければならないサイトを構成するパッケージに変化がおき
るのではないかと思っているのです。


 -- セマンティック時代のウェブサイトデザインとは？

セマンティック時代のウェブサイトということで少し定義してみます。
セマンティック時代のウェブサイトというと少し大げさですが、ウェブ
サイト＋サイトサマリーというのがセマンティック時代のウェブサイト
ではないかと最近考えています。

例えば、様々なウェブサイトが並んでいる中（横でも縦でもいいのです
が、横に並んでいると仮定します）、普通、ユーザーは情報を見つける
ためにトップページより縦方向にサイトの奥にアクセスしていきます。
また、サーチエンジンやリンクにより、各ページにピンポイントにアク
セスするということもあります。

これが従来の一般的な情報へのアクセスだったと思います。RSSのような
サイトサマリーの普及により、更新状態を時系列に沿って様々なサイト
を横断できるようになるので、情報へたどり着く経路が単純に一つ増え
るのではないかと思えるのです。

また、サイトサマリーは、第３のナビゲーションインターフェイスと考
えることも出来ます。ウェブサイトでナビゲーションがトップページを
中心として奥へ導くものなら、サイトサマリーのようなファイルは横断
的にサイトを訪問するためのナビゲーションと言えるのではないでしょ
うか。サイトサマリーがなければそもそもこういうブラウジングをする
人からアクセスされないわけで、ナビゲーションが一つ消えるのと同じ
くらいに痛くなる可能性があります。



 -- 現在の状況

セマンティック関連をとりまく状況の中で、大きな変化の一つが、最近
W3CでRDFとOWLが勧告されたということではないでしょうか。

 " RDF 及び OWL の公開について (W3C 勧告) "
 ( http://www.w3.org/2004/01/sws-pressrelease )

RDFは、以前Design WedgeでRSSの手書き講座の際にとりあげ、

 " Design Wedge No.71 "
 ( http://www.karadesign.com/designwedge/backnumbers/0071.shtml )

 " Design Wedge RSS "
 ( http://www.karadesign.com/designwedge/dwrss.xml )

Blogには必ずといってもついているので目にした機会も多いと思います。
OWLについてはなんだか聞きなれませんね。いったいなんでしょうか。
OWLはWeb Ontology Languageと言い、W3Cによれば「OWL は、アプリケー
ション間でのより高度なデータ統合と相互運用を実現する、Web に基づ
く構造的なオントロジを定義する言語」ということだそうです。

 " Web Ontology Language 勧告候補の公開について "
 ( http://www.w3.org/2003/08/owl-pressrelease.html.ja )

これでは意味がまだ不明瞭ですね。OWLについては、

 " ウェブ・オントロジー言語OWL "
 ( http://www.kanzaki.com/docs/sw/webont-owl.html )

 " W3CがセマンティックWeb用言語「OWL 1.0」関連文書のワーキング・ドラフトを公開 "
 ( http://xml.fujitsu.com/jp/comment/2003_6/06_04.html )

この２つを読んでいただければ、だいたいの意味がわかるのではないで
しょうか。OWLの中でも例にあげて説明しやすいそうなのは、言葉の階層
性と同義語について書いてみます。

言葉の階層性は、例えば、RSSはRDFの一種で、RDFはXMLの一種であるみ
たいなことです。同義語でこの業界にわかりやすい例を出すと、ウェブ
サイト、ウェブページ、ホームページといった用語があげられます。こ
ういう単語の関連性の定義を記述する際に使われるのがOWLというわけで
す。OWLは、概念の説明もあったり、オブジェクト指向とも少しからんで
おり、RDF以上に敷居が高い気がします。

W3C勧告のRDF、OWLに関するW3Cドキュメントは一杯あるのですが、一度
入門用やオーバービューに以下の２つだけでも目を通しておくといいと
思います。

 RDFはこちら
 " RDF Primer "
 ( http://www.w3.org/TR/2004/REC-rdf-primer-20040210/ )

 OWLはこちら
 " OWL Web Ontology Language Overview  "
 ( http://www.w3.org/TR/2004/REC-owl-features-20040210/ )


セマンティック関連のトピックで、もう一つ興味深いのは、Google提供
のBloggerでAtomが採用されたという話題です。このAtomというのは、
RSSを高度に書き直したもので、XML文書であるという点は同じなのです
が、RSSが主にサイトのサイトサマリーを扱うのに対して、Atomはサイト
サマリーに加えてコンテンツ部分を扱うことが出来ます。なので、手書
きをしようと思うとすこし大変です。

RSSのAtom違いを、利用者がニュースリーダーで利用する場合と限定して
説明してみます。RSSは従来のウェブ用ツールで例えると、更新を調べる
巡回ツールの結果のようなものといえます。一方Atomは、サマリーだけ
でなくコンテンツを書く箇所もあるため巡回サイトのページダウンロー
ドツールの結果のように使うことが出来るのではないでしょうか。つま
り、RSSの場合は、各サイトに飛ぶ必要があるのですが、Atomではそれを
無くすことが可能といえそうです。

 より詳しく知りたい方はこちらがおすすめです。
 " Atom - RSS改訂の試み "
 ( http://www.kanzaki.com/docs/sw/atom.html )

 こちらも是非目を通してみましょう。
 " The Atom Syndication Format 0.3 (PRE-DRAFT) "
 ( http://www.mnot.net/drafts/draft-nottingham-atom-format-02.html )



 -- Atomを作るには

Atomを作る最も手っ取り早い方法は、既にAtom出力のモジュールが出て
いるBlogを使うことです。ですが、企業サイトなどでも使いたい場合は
しばらく手書きでやってみるという手もあります。手書きAtomについて
は次回やりたいと思います。もう一つ、プログラミングが出来る人なら、
言語ごとに出ているAtom用のモジュールを使うという手があります。例
えば、CGIでおなじみのPerlでは、「XML::Atom」というモジュールが既
に出ています。

 " XML-Atom-0.05 "
 ( http://search.cpan.org/~btrott/XML-Atom-0.05/ )


これからはRSSではなくAtomなのかというと必ずしもそんな感じではなく、
両者が対抗している感じです。国内においては、Blogの流行などからRSS
の利用率がかなりの割合をしめているのではと思います。それは、RSS専
門の検索エンジン、

 " Bulkfeeds "
 ( http://bulkfeeds.net/ )

を見てもRSSを出力するサイトはこんなにあるのかと驚かされます。RSS
が流行る原因の一つとして、RSSの記述が手書きでいけるほど簡単である
ということもあると僕は考えています。



 -- サイトサマリーの検証

手書きでRSSやAtomを書くとして、不安になってくるのはマークアップの
妥当性です。HTMLはいろいろと過去からの事情があって必ずしも正しく
といかない場合が多いですが、新しく身に付ける言語は出来るだけValid
なマークアップを心がけたいものです。

FEED Validatorでは、RSSと、Atomについての検証が可能です。

 " FEED Validator "
 ( http://feedvalidator.org/ )

Design Wedgeで発行しているRSSを試しに放り込んでみたら、数箇所間違
いがありました。早速訂正し、無事ValidなRSSとなったので一安心です。
このサイトをうまく使いながらRSSを書いてみるといい勉強になります。



 -- セマンティック時代でのウェブサイト構成の提案

RSSを眺めていると、ウェブサイトとサイトサマリーは本来セットである
べきだったのではないか、と思えてきます。サマリーらしきものの前兆
は随分昔にHTMLで起きていて、<meta>タグというのが潜在的にRSSのよう
なものを待望していた現われではないでしょうか。

現在、更新情報、新着情報、新製品やトピックなどにメルマガを利用し
ているサイトは、手書きもしくは自動生成のRSSをサイトに置いておいた
ほうがいいかもしれません。簡単なRSSの生成ならこういうソフトを使う
手があります。

 " RSSエディタHeadline-Editor Lite版 "
 ( http://www.infomaker.jp/editorlite/index.htm )

RSSをとりまく環境は劇的に変化していて、例えば去年から今年にかけて
ブレイクしたBlogは、ほとんどがRSSの出力を備えているため、RSSの数
は膨大な量に上ると思われます。加えて、それらRSSを閲覧するためのビ
ューワーも様々なものがリリースされています。大手企業のニュースサ
イトでも、

 " アサヒ・コム "
 ( http://www.asahi.com/ )

 " CNET Japan "
 ( http://japan.cnet.com/ )

のようにRSSを配信しています（RDFと書かれた小さなアイコンがそうです）

利用例としては、

 " Bulknews "
 ( http://bulknews.net/ )

でチェックできたり、各個人がRSSやAtomが読めるHeadline-Reader

 " Headline-Reader  "
 ( http://www.infomaker.jp/headline/ )

のようなソフトを使うことで、簡単に利用できます。
僕は将来的にはブラウザのお気に入りとサイトサマリーリーダーが一緒
になるような気がしています。


絵画は写真が登場して以降、記録のための役目から解放されたという文
章を読んだことがありますが、情報のみを伝える書類はXMLに任せて、
HTMLは簡単に使える表現手段になるという方向性もアリなのではないか
と思っています。



ご意見、ご感想、ご質問、お問い合わせは
info@karadesign.com へ



 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +03 プレスブース
       ￣￣￣￣￣￣

((！))
Design Wedgeでは、企業の皆様からの広告記事、プレスリリースやイベ
ント情報、企業情報や求人募集スペースとして場所を提供しています。
掲載場所はこのスペースで、３２文字×２０〜２５行くらいとなります。
掲載のご依頼お待ちしてます。ヘッダー広告についても募集しています
ので、メールにてお気軽にお問い合わせ下さい。

  ↓
 mailto:designwedge@karadesign.com



 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +05 Design Wedgeよりお知らせ
       ￣￣￣￣￣￣￣￣￣￣￣￣

((！)) 

Design WedgeのRSSを公開中です。Design Wedgeはメールマガジンなので、
ニュースの一覧というよりはバックナンバーの参照用にと思って公開し
てます。

 " Design Wedge | RSS "
 ( http://www.karadesign.com/designwedge/dwrss.xml )

 - - -

ハニーモジュールでは、ウェブアプリケーションのデザインに焦点を置
いたメーリングリストを開設しました。概要を読んで参加してみてくだ
さい。

 " Design Wedge | WAD_ML参加申し込みページ "
 ( http://www.karadesign.com/designwedge/wad_ml.shtml )

 - - -

リーダーズリンク、随時募集中です。お申し込みフォームはサイト名と
ＵＲＬ、サイトの紹介コメントのみ必須です。

 " Design Wedge | リーダーズリンク "
 ( http://www.karadesign.com/designwedge/readerslink.shtml )

 - - -

制作者同士のコミュニケーションがメインとなったメーリングリストを
やってます。大きなコミュニティ形成を主としてはいませんので、クロ
ーズドな形式を採用してみてます。資格は、最低限の礼儀を守れてメー
リングリストに参加していく意志がある人としています。技術レベルな
どは問いません。

参加方法に関するお問い合わせは、登録したいメールアドレス、簡単な
自己紹介など添えまして、dwml@karadesign.com までお便りください。

 → mailto:dwml@karadesign.com

 - - -

現在Design Wedgeではヘッダー部分に掲載する広告を募集しています。
全角３５文字×７行。詳細はメールにてお問い合わせ下さい。

 → mailto:designwedge@karadesign.com



 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +06 編集後記
       ￣￣￣￣

最近、新品同様のカシオペアA-50がタダ同然で手に入った。
カシオペアA-50といえば国産Windows CEデバイスの草分け的存在で、
９７年に発売されWindows CE 1.0を搭載し、モノクロ液晶、単三乾電池
２本で２０時間近く動く。

何で今更A-50なのかというと、状態がよかったのもあるが単三乾電池駆
動というのにすごく惹かれたからである。いまどきのPDAはほとんどが充
電池で動くが、乾電池駆動というのは外出した際にバッテリー切れを心
配することがないためすごく安心出来る。PDAも、Pocket PCがあるにも
かかわらずいまだにVisorを使ったりする。ちなみにA-50では、ワードも
エクセルもIEも使うつもりはなく、テキストエディタ専用機として使っ
ている。枯れたデバイスはわびさびに似た趣がある。

 " カシオペアA-50のニュースリリース "
 ( http://www.casio.co.jp/productnews/a_5051.html )


次号の発行は３月２６日を予定しています。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

D e s i g n  W e d g e

    ≫ M a g a z i n e  i n f o

   +01 発行：KaRa designstudio
       http://www.karadesign.com/
       mailto:info@karadesign.com
   +02 編集・発行人：原　一浩　[Kara_D]
       mailto:khsoul@alles.or.jp
   ---
   +03 現在の購読者数：7000人
   +04 Design Wedge公式ページ：
       http://www.karadesign.com/designwedge/
       登録・解除はもちろんのことバックナンバーも見ることが出来
       ます。
   ---
   +05 お便りはこちら：
       mailto:designwedge@karadesign.com
       感想・情報提供・お問い合わせなどはこちらまで。お便り待っ
       てます。
   ---
   +06 配信元：右上部の「post」というところで配信システム名がわかり
       ます。
             
           + まぐまぐ
             ( post>>magmag )    id:0000005412
             ( http://www.mag2.com/ )
           + melma!
             ( post>>melma! )    id:m00103069
             ( http://www.melma.com/ )
           + カプライト
             ( post>>kapu )      id:8588
             ( http://kapu.biglobe.ne.jp/ )
           + E-magazine
             ( post>>e-mag )     id:deswedge
             ( http://www.emaga.com/ )
           + めるまる
             ( post>>melmal )    id:deswedge
             ( http://www.melmal.com/ )
   ---
   +07 コピーライト（著作権）：
       Copyright(c)，1998-2004  KaRa designstudio
       許可無く転載することを禁じます。参照としてのバックナンバー
       へのリンクや引用は自由です。

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +99 スタジオ１×１行プチニュース

       " Mac OSXへの移行を少しずつはじめています "
       ( http://www.apple.co.jp/macosx/index.html )

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━