ブログデザインウェブデザインデビュー

私がデザインした最初の Web ページは次のとおりです。

私はこの業界に7年間在籍し、プログラミングとプロジェクト管理を行ってきました。アートデザインに携わったことはありませんが、日々アートデザインに触れ、ページをネストする際にIE6、Firefoxなどのブラウザの互換性に悩まされてきました。その結果、Webデザインに関する一定の基礎を身に付けました。会社のWebサイトの全面的な改訂を機に、ついにブログインターフェースを自分で作ろうと決心しました。

結局、私はプログラミングをやったことがあるので、インターフェース、特にコードの美しさは、あまり悪くはあり得ません。そこで、多くの素晴らしい CSS フレームワークを参考にして、最初は軽量なものを選びました。

何事も最初は難しいですね。Div+Cssレイアウトがどういうものなのかまだよくわかっていませんが、レイヤーをあちこち浮かべるだけというのはだいたいわかっているので、フレームワークをベースに浮かべていきました。左右の構造、2列レイアウト、幅と高さが固定、左右がフローティング、ページフレームがすぐに表示され、非常にシンプルに見えます。

2番目のステップは、フレームをコンテンツで埋めることです。アバターを入れた後、見栄えが良くないので、丸くしようと思いました。しかし、ブログのアバターはユーザーがアップロードしたもので、ユーザーが自分で角を丸くすることはできません。やはりスタイルコントロールを使う必要があるようです。インターネットで調べたところ、CSSは面倒で、4つのDIVを長い間いじらなければなりませんでした。あきらめて、既製のものを探しました。Googleで検索して、「丸い角のフレームコンポーネント-Bingjifeng」を見つけました。コードはJSで、中国製で、よく書かれていました。丸い角を実装するさまざまな方法を提供し、簡単に呼び出すことができました。それでそれを使用したところ、アバターの角が丸くなる問題が解決しました。

ステップ 3: タブ効果。タブ効果を使用してブログのカテゴリ切り替えを実装するにはどうすればよいでしょうか?答えは ------- Jquery です。既製のものに慣れている人が、自分で試してみようと思うでしょうか? オンラインで検索すると、たくさんのものが見つかりました。それらをふるいにかけて選択し、最終的に、切り替えとフェード効果を実現できるシンプルなものを使用することにしました。コードを挿入し、スタイルと画像を少し調整しました。ああ、すごい。私は才能がありすぎるのでしょうか、それとも、それだけ簡単なのでしょうか?

ステップ4：動的な効果を追加します。個人的には、派手なものが好きです。ウェブサイトで飛んでいる効果を見るのは嬉しいですが、ブログで派手なものは何でしょうか？本当に何もありません。それでは、チームメンバーのために下部に小さな効果を作りましょう。諺にあるように、既製のものに慣れているのに自分でやりたい人はいませんか？以前に整理したJqueryの特殊効果を開いて、ようやく使えるものを見つけました。効果はかなりクールに見えます。これは見栄えが良いですが、組み立てるのはかなり難しいです。しかし、ようやく完成しました。効果を見てみましょう。

ステップ 5: 登録、ログインボタン、リスト、その他のコンテンツ。これは簡単で、すぐに実行できます。次に、IE7 以外のブラウザーとの互換性にチャレンジし始めました。IE6 を開くとすぐに、ページが認識できなくなり、ひどい状態になりました。どうすればよいでしょうか。私が作成したインターフェイスは、こんなにも脆弱なのでしょうか。いいえ、CSS ナレッジベースを開いて、IE6 の 3 ピクセルバグや Firefox の特殊なスタイルなどについて学び始めました。学び終えると、すでに翌日の午後になっていました。無駄に学ぶわけにはいかないので、変更しました。少しずつスタイルを調整しました。ついに 3 日目の夜に完成し、ほっとしました。いくつかのブラウザのパフォーマンスは基本的に同じでした。1 ページの開発に 3 日半かかりましたが、これは私たちのアートデザインよりもはるかに効率が悪かったです。しかし、それでも注目すべき細部がたくさんありました。私は説明できない達成感を感じ、最初の傑作を見て喜びの涙を流しました。

ウェブプログラマーとして、CSSとJSを知らないのは悲しいことです。アーティストとして、プログラムとJSフレームワークに無関心なのも同様に悲しいことです。プログラムとアートの交差点には、やるべき仕事がたくさんあり、処理すべき詳細がたくさんあります。この認識があったからこそ、著者は勇気を出してインターフェースに取り組みました。結局、事実も証明しました。プログラムに精通した人が設計したインターフェースは、プログラマーがページをネストするときに遭遇する困難と不利な要素を考慮に入れ、事前に最適化しているため、プログラマーはコードをネストするときに半分の労力で2倍の結果を得ることができ、開発コストとデバッグ時間を大幅に節約できます。今、企業はコラボレーションとつながりにますます注意を払っています。プログラムとアートのつながりの空白を埋めたい場合は、同僚が関与してお互いの分野をさらに研究すると同時に、より多くの理解とサポートが必要です。この小さな進歩を過小評価しないでください。それはあなたに質の向上をもたらすかもしれません。

現在、インターフェースプログラムはネストされ、テスト用にオンラインになっています。アクセスアドレスは http://blog.transnal.com です。皆様のご意見をお待ちしています。

<<: Vue ミックスインの詳しい説明

>>: インライン要素スパンの最小高さの定義