2018年の2004年のフラッシュウェブサイトを再構築する

Sep 15, 2025

操作方法

1999年、私はWeb Studio 1.0を使って最初のウェブサイトを構築しました。 Web Studioはグラフィックユーザーインターフェースでした。新品を作成することは可能でした ランディングページ 要素をドラッグアンドドロップします。それから私は無料のドメインを設定し、ジオサイティとボーラでホスティングします！私はウェブサイトを持っていました。 2004年まで早送り、私は他の多くのように、私はバンドのウェブサイトを構築するために会いました。

12の一般的なJavaScriptの質問に回答しました

それ以来、たくさん変更されました。この記事では、メモリレーンをダウンロードして、今日のWeb用に同じサイトを再作成するつもりです。

ファイルを入手してください このチュートリアルのために。

I built my first website in 1999 — 私は1999年に私の最初のウェブサイトを構築しました

だから、始めましょう！最初にオフ、私のためのすべての新しいプロジェクトはMKDから始まり、それに続くG INITで始まります。私を知っているあなたのために、ある時点で、私はおそらくあなたにとってdotfilesを言及しました。 DotFilesは単にドットから始まるファイルです（実際にその接続をするのは驚くほど長い時間がかかりました！）そしてそれらは多くの目的のために使用することができます。私のお気に入りのDotfilesのうちの2つは、.aliasasと。関数です。私に精巧にさせてください...

BASHでは、コマンドMKDIRを使用して新しいディレクトリを作成することができます。その後、Directory CDを作成したばかりのディレクトリに変更する必要があります。私が持っているコードを使用してください。関数ファイルでは、MKDを実行することが可能になりました。これは新しいディレクトリを作成するだけでなく、そのディレクトリにも変更されています。これは最初はオーバーキルになるように思えるかもしれませんが、私はこれらのマイクロウィンが大好きです。そして、特にこれらのコマンドを1日に数回実行している場合、彼らはすぐに多くの保存された時間に加算されます。

＃新しいディレクトリを作成して入力します
関数mkd（）{
    MKDIR -P "$ @"＆amp;＆amp; CD "$ _";

Gitに精通している場合は、次のコマンドは単にgit init initです。これは私達がプロジェクトをバージョン管理することを可能にします。買い物リストでもgitを使います！それでは、毎回gitを入力する必要があるよりもむしろ、.Aliasesへのエイリアスg = "Git"をもう一度追加することは、私のために素晴らしい、小さな時間節約です。

最近では、さまざまなフレームワークやテクノロジの専門家があります。このプロジェクトでは、物事を簡単にしたいと思います。私はHTML、CSSを使用して、必要に応じてJavaScriptを振りかけるつもりです。最初に、基本的なHTMLマークアップを作成しましょう。ちょっと待って！停止してちょっと考えましょう。

The 2advanced.com site heavily inspired me to learn Flash — 2advanced.comサイトは私にフラッシュを学ぶように刺激しました

時々開発者は、私自身が含まれている、プロジェクトについて超興奮し、すぐにクラックしてコードを書くために直接行くことを望みます。しかし、私はこれが最良のアプローチではないと思います。最初にプロジェクトに念頭に置いて概観を得るのが大好きです。これを行い、プロジェクト全体のはるかに明確なビジョンを持っていることによって、それはそれがはるかに優れた意思決定を可能にします。たとえば、コードにまっすぐ分割された場合、私は戻ってリファクタリングする必要があるという問題に遭遇するかもしれません。このアプローチといくつかの異なる結果があります。まず、私が完全にコードを削除してもう一度始める必要があるということかもしれません。第二に、このような方法で続けるならば、私は将来的に更新、デバッグ、そしてパフォーマンスの損失をもたらすために困難であることを「スパゲッティコード」で終わるかもしれません。第三に、時にはそれは大丈夫でうまくいき、あなたはより良いコードで終わるが、私は最初と第二の成果がはるかに一般的であると言う傾向があります。

このプロジェクトはかなり小さいです。それはいくつかのページがあります：ホーム、ニュース、ギグ、メディア、アルバム、リンク、および共通の部分の中に、ヘッダー、ナビゲーション、タイポグラフィーコンテンツ、リスト、イメージ、ビデオ。 2004年にFlashサイトを構築するとき、物事はテストの観点からもっと単純でした。サイトはフラッシュ内に組み込まれていました。マウスとキーボードを搭載したデスクトップコンピュータのFlash用です。最近では、モバイルとタブレットのインターネット使用量はデスクトップコンピュータよりも一般的ですが、この傾向は上昇し続けています。

このサイトを閲覧した人にとってより良い経験をするために、私はプロジェクトの開始時にいくつかのことを考慮に入れ、モバイルの最初の戦略を使用するつもりです。そうするために、そしてやはりコードを書く前に、私は古き良きペンと紙を出るつもりです。まず、サイトマップを書き出します。そうすることで、私が改善することができるいくつかの重要な領域があります。たとえば、私の元のサイトはバンドの各アルバムのさまざまなページで構成されていました。彼らは3つのアルバムを持っていて、ナビゲーションでうまくフィットしました。今、彼らはもう少し潜在的に来るのにもっと多くのものを持っているので、私はすでに私の心の中で私はサイトをより将来の証拠にする方法について考えています（オールディーながグッディーはダンセディルムのダンです。弾丸のWebデザイン）。

今、私はサイトマップとページの頭の中で大まかなアイデアを持っています、次の上にいくつかの低いワイヤーフレームを作成することです。以前の経験から多くのレスポンシブサイトを構築することで、モバイルには興味深いデザインの課題、つまりナビゲーションを作成する方法がありますが、それでも人々がサイトの主な内容を見ることができます。私たちはすべて愛/憎しみに成長したデザインの結果と一緒に行くつもりです：ハンバーガーメニューアプローチ。しかし、少しねじれを追加するつもりです。元のアートワークは鳥を使用しているので、標準的なハンバーガーメニューのアイコンではなく、メニューがアクティブかどうかを示す方法として翼を開いて閉じるバードアートワークを使用します。

Flash tree navigation in Adobe Animate CC 2018 — Adobe Animate CC 2018でのフラッシュツリーナビゲーション

私の心の中の物事は現在、人々がどのようにサイトをナビゲートすることができるかという考えで、形をし始めています。私は今ページ自体がどのように見えるかについて考えるつもりです。ホームページから始めて、タイポグラフィコンテンツではかなり簡単です。次に、ニュース - やはりタイポグラフィコンテンツ、潜在的に画像、そして古い投稿を見るためのいくつかの種類のナビゲーション。ギグ - 購入チケットへのリンクを持つ今後のギグのリスト。前のサイトを振り返って、私は2つの異なるセクションとして「イメージ」と「ビデオ」を持っていましたが、ここでは改善の余地があると思い、「メディア」として統合することを考えています。アルバム、ああ、はいアルバム - 今これはこのようなものをする場所です。表示された、アルバムページにはタイポグラフィとイメージがあり、古い投稿を見るにはある種のナビゲーションが必要になります。聞きなさい？ニュースページと同じ構造のようにたくさん聞こえます！このトップレベルの概要を持つことは、よりきめ細かい、コンポーネントで物事を見て考えることができます。 アトミックデザイン あなたがブラッドフロストの作品に精通しているなら、レベル。

今、私はサイトがより小さなデバイスと再利用可能な要素でどのように機能しようとしているかという考えを持っています、それはより大きなデバイスでプロセスを繰り返す時が来ました。このサイトはかなり簡単で、すでにモバイルのために作成されているワイヤーフレームがあるので、私たちは余分な部屋を持っているので、私たちはいくつかの余分な部屋を持ちます。

サイドナビゲーションは、私が最も興奮しているオフセットからのサイトのビットです。バンドのオリジナルのアートワークからインスピレーションを受けて、私は葉を持つ木のシルエットとしてナビゲーションを作りました。各リーフは、サイトの別のページにリンクされたボタンでした。また、あなたが葉からスクロールして遊んだように、葉はアニメートし、地面に落ちるでしょう。これは素晴らしかった。 Tweeningと呼ばれました。タイムライン上のインターフェイス内の1つのキーフレームで要素を設定し、タイムラインに沿って別のキーフレームを作成し、続く要素のパスを追加することができます。落下葉の道、期間とスピードを変える、私は私が非常に満足していた何かに夢中になった。

しかし今、私たちはFlashを使っていませんので、どうやってこれを行うのですか？非常に頻繁にCodepenまたはJS Binにジャンプします。知っていない人のために、CodepenとJS Binはオンラインサービスです。これにより、すばやくコーディングして保存することができます。もっとデザインLEDとしてコードペンを見る傾向があり、JS BinはもっとJavaScriptが集中しました。このプロジェクトでは、コードペンを使用してツリーナビゲーションを作成します。まず、私はサイトの主要なモバイル版の構築を開始します。素敵な葉のナビゲーションとアニメーションを追加することによって作られたサイトへの機能強化がありますが、これは生産するのが時間がかかります。ツリーナビゲーションのためのコードペンで作業するという利点は、メインサイトとコードベースから分離されていることを意味します。物事がそれを完了して難しいことを得るならば、私がいる場所を節約し、主要なサイトのビルドを持って続けてからナビゲーションに戻ることができます。時々私は問題から離れているのか、それとも寝ていることさえ、私の潜在意識はそれについて考えることを続けることができます。その後、問題に戻ると、解決策がそれ自体を紹介します。

SVGS！私はsvgsが大好きです。以前はフラッシュで、イラストレーターのリーフアセットを描きました。驚くほど私はまだオリジナルのアートワークを使って仕事をしていて開くことができました。最近ではスケッチを使い、ファイルを開く素晴らしい仕事をしました。私は今、リーフアセットをSVGSとしてエクスポートする準備ができています。なぜSVGS？多くの理由があります。網膜装置でJPG、またはGIFを使用する場合は、もっと大きな資産を供給する必要があります。そうしないと、ぼやけて見えます。また、SVGSでは、CSSを使用できます。これは素晴らしいです、そして、私たちが別のイメージアセットを作成するのではなく、少しのCSSを使用してSVGの色を単純に変更させるだけです。これは維持が簡単で、そしてそれがもっと慣習的なものであることを意味します。あなたがSVGに慣れていないのなら、私は彼らを読むことを強く私の親友から信じられないほどの仕事を強く勧めます、サラ・ソーイダン。

Mobile first, responsive navigation menu — モバイルの最初の、レスポンシブナビゲーションメニュー

現在の場所に木と葉の資産を使って、追加する最後のものはアニメーションです。これを使って取ることができるいくつかのアプローチがあります。私がしたオリジナルのフラッシュパスに忠実に滞在することです。これにより、パスの複製とSVGを使用してから、パスとAnimateMotionを使用して潜在的にSVGが動作します。私はこのような考えが懐かしい見方から非常に好きですが、CSSは長年にわたってたくさん来ています、そして私たちは今私たちの処分で変身して翻訳するので、これは別のアプローチです。物事をさらに一歩踏み出すと、落下葉をランダムにするであろういくつかのJavaScriptを追加することもできます。

どちらのオプションもいいですが、私はより多くのCSS-LEDルートに向かって揺れています。 Codepenを使用するもう1つの利点があります。私はすぐに行って1つのアプローチを試してみることができます。もともと思われるよりも複雑であることが判明した場合、または正しく感じていない場合は、無駄な時間がほとんどないと別のアプローチを試すことができます。実際、これは素晴らしいアイデアであることがわかりました！私はまだこれのためのオプションを見ています - 最終結果はgithubのプロジェクトを参照してください。

ツリーナビゲーションがソートされた状態で、私はモバイルの最初のアプローチに戻り、ナビゲーションを構築しました。あなたがSASSに精通しているならば、あなたは可能性が高い変数に遭遇しました。しかし、あなたは変数がCSSで利用可能であることを知っていましたか？彼らは持っているかなりまともなブラウザのサポートクロム、エッジ、サファリ、サムスンのインターネットでも！基本的なCSSを維持し、追加の依存関係の必要性を避けようとしているように、これは素晴らしいニュースです。だから私たちはこれをどのように実装しますか？スタイルシートの上部に、私は私の変数を宣言します：

：ルート{
  --grey：#ccc;
   - 赤：＃FB0F0C;
   - グリッドサイズ：10px;

彼らが宣言されているので、私はそれらを呼び出すことができますので、例えばボディの背景色を設定することは次のようになります：

ボディ{
  背景：var（ - 灰色）;

これをさらに一歩進み、グリッドの調整、空白、垂直リズムを手助けするために、私はまたグリッドサイズ変数を定義したことに気付いた可能性があります。変数はCalcと非常によく機能し、それはこのようなものに見えます。

 //標準変数が使用されている、出力10px。
PADDING-TOP：VAR（ - グリッドサイズ）;

// Calcを追加すると、可変単位を2に乗算すると、20pxが出力されます。
PADDING-BOTTOM：CALC（VAR（ - グリッドサイズ）* 2）。

モバイルナビゲーションスタイルが完了したら、隠して表示するための機能に取り組みましょう。トグルボタンの場合、ラベルタグを適用してから、NAVタグで入力を追加します。

＆lt;ヘッダークラス= "ヘッダー"＆gt;
  ＆lt; h1 class = "header_title"＆gt;バンドのウェブサイト＆lt; / h1;
  ＆lt; h2 class = "header_currentpage"＆gt; home＆lt; / h2＆gt;
  ＆lt; label for = "mobilenav_toggle" class = "mobilenav_toggle"＆gt;トグル＆lt; / label＆gt;
＆lt; / header＆gt;

＆lt; NAV CLASS = "MOBILENAV"＆GT;
  ＆lt;入力TYPE = "チェックボックス" id = "mobilenav_toggle" role = "button"＆gt;
  ＆lt; ul class = "mobilenav_list"＆gt;
    ＆li class = "mobilenav_listItem"＆gt; a class = "mobilenav_listItemLink" href = "＃"＆gt; home＆lt; / a＆gt;
    ＆li class = "mobilenav_listitem"＆gt; a class = "mobilenav_listItemLink" href = "＃"＆gt;＆lt; / a> / gt;
    ＆li class = "mobilenav_listitem"＆gt; a class = "mobilenav_listItemLink" href = "＃"＆gt;ポートフォリオ＆lt; / A＆gt;
    ＆li class = "mobilenav_listItem"＆gt; a class = "mobilenav_listItemlink" href = "＃"＆gt; news＆lt; / gt;＆lt; / gt;
    ＆li class = "mobilenav_listitem"＆gt; a class = "mobilenav_listItemlink" href = "＃"＆gt;接触＆lt; / a＆gt;
  ＆lt; / ul＆gt;
＆lt; / NAV＆GT;

次のCSSを使用して、ナビゲーションメニューを表示および非表示にすることができます。ヘッダーのラベルを望んでいるので、~AKA Tildeまたは（U + 007e）を使用することができますので、最初の要素にすぐに成功していない間は機能します。

 #mobilenav_toggle [type =チェックボックス] {
  表示：なし
}

#mobilenav_toggle [type = checkbox]：checked~ .mobilenav_list {
  表示ブロック;

モバイルナビゲーションが完了したら、それはいくつかを実装する時が来た レスポンシブウェブデザイン 。そのサイトのメインコンテンツを追加し、次にChrome Developer Toolsでレスポンシブビューを使用して、ツリーナビゲーションを適切に保持するのに十分なスペースがあるまでビューポートの幅を増やすことができます。これにより、600pxになると、これはメディアクエリを使用できます。

 .Treenav {
  表示：なし
}

@mediaスクリーンと（最小幅：600px）{
  。Treenav {
    表示ブロック;
  }

ほとんどそこに！最後にツリーナビゲーションのためにメインコンテンツエリアの横に座るために、FlexBoxを利用します。

。コンテナ{
  表示：Flex;
}

。Treenav {
  表示：なし
  最小幅：140px。

今、ツリーナビゲーションは100％の高さを占め、コンテンツは同じで、その右側に座っています。つまり、コンテンツがどのくらいの期間にわたっても、ツリーナビゲーションの下には発生することはありません。 FlexBoxについてもっと知りたい場合は、チェックアウトをお勧めします。 FlexBox.io. 唯一のWes Bosによって。できることがたくさんあります！

An example showing 'display: flex' preventing content from wrapping underneath the tree navigation — 例を示す例を示す例：ツリーナビゲーションの下にコンテンツの折り返しの防止

その間に時間があるのはそれだけですが、このプロジェクトをさらに良くするために私たちができることがまだたくさんあります。ご質問がある場合、または記事が好きな場合は、こんにちはと言ってください Twitter上でまたはスルー私のサイトまたはGithubでプルリクエストを送ってください！

この記事はもともと第304号に発行されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 ここで問題304を購入してください または ここで購読する 。

関連記事：

超高速CSSのための5つのヒント
JavaScriptでSVGをアニメートしてください
CSSディスプレイプロパティを理解する

2018年の2004年のフラッシュウェブサイトを再構築する

操作方法 - 最も人気のある記事

iPhoneでPhotoshopの方法（はい、それは物です）

脳を使用してニューラルネットワークを構築する

ペンとインクに文字を描く方法

14 Zbrushワークフローのヒント

あなたのキャラクターが色と光でポップします

VRの文字を彫刻する方法

塗料の影の色を混ぜる方法

3Dプリントゴブリンを彫刻する方法

カテゴリ