4. 3.に基づいて、ソリューションのスケーラビリティ、再利用性、ページパフォーマンスを同時に考慮できるようにする(画像の切り取り方、構造の書き方、スタイルの書き方を含む)
5 . 4 をベースに、サイト全体の構造的な分散（ファイルの分散、ディレクトリ構造を含む）を検討します
上記はすべて、制作を開始する前に行う必要があることです。
2. カッティング
カッティングとは、デザインの下書きをページに作りやすい写真に切り出すことを指します。写真をカットするということは、写真を切り出すことを意味するという誤解がありますが、実際には、カットした写真を結合することも含まれます。
パフォーマンスを最大化することもできます。 「カッティングは芸術」と言っても過言ではありません。 写真のカットもいくつかの段階に分けることができます: 1. 必要な写真にカットする (必要な部分を切り出す方法)
2. 1. に基づいて、カットされた写真にいくつかの最適化を実行します (
を含む) 圧縮ファイルサイズ
、画像タイプの選択) 3. 2に基づいて、カット画像を計画します(ファイル配布を含む)
4. 3. に基づいて、全体的なパフォーマンスを検討します
(画像の結合とファイルサイズの圧縮を含む) 三、
HTMLとCSSの作成 HTMLとCSSの作成とは、デザイン案をWEBページに変換する上で最も重要な部分です。 HTML の記述方法は CSS の記述方法に影響を与えるため、それらをまとめるのにも注目する必要があります。
1.デザインドラフトの視覚効果を復元し、標準検証に合格する (HTML) 2. 1 に基づいて、複数のブラウザーとの互換性を実現します (
HTML
) 2. 2 に基づいて、 3.タグ セマンティック (HTML)
4. 3 に基づいて、より良い実装方法を選択します (モジュール構造、プログラム スクリプト、HTML および CSS の便利な使用を含む) 5. 4 に基づいて、 を検討しますスケーラビリティ、再利用性、保守性 (HTML と CSS)
6. 5.をベースに、サイト全体のスタイルの分散を検討する(実装方法も含む)
7. 6.をベースに、スタイルの最適化を行う。ライティング (テクニックの応用を含む) もう 1 つのポイントは
遭遇した問題を解決する能力 であり、これはさまざまな段階で遭遇する可能性があるため、上記には何も書かれていません。
3、4、または 5 に達したか、それを超えた場合、おめでとうございます。あなたはすでにプロの「ページ再構築作業者」です。独自の開発では、新しいテクノロジー、技術革新、ユーザー エクスペリエンス、美観、プログラム スクリプトの実装の向上にも注意を払う必要があります。一緒に進歩しましょう。
から/*============= ====== ====分割線========================*/
ページ再構築の作業内容はすでに理解されていますが、もう 1 つ非常に重要なことがあります。注意すべき重要な点は、Web デザイナーとのコミュニケーションと協力です
必須情報! Web デザインと再構築に関すること
http://www.uisdc.com/website-reconstruction
もう 1 つのトピック: 再構築に関連して、デザイナーがページのデザインについて不平を言い続けることもあります。ページは、ページほど美しくありません。デザイン ドラフトの間隔が大きすぎるか小さすぎる、フォントが小さいか大きい、画像が圧縮されすぎている、または画像が単純に切り取られているか、またはアニメーションが希望どおりの効果ではありません。 。 。 。これについて彼らを完全に責めることはできません。結局のところ、彼らはデザイナーではないので、私たちにも責任があります。しかし、私の個人的な見解は、再構築にはある程度の PS スキルまたはデザイン理論が必要であり、デザイナーが再構築するときに比較的高い品質を出力できるようにするためです。ページを確認する時間がありません。
市場には大小さまざまなブラウザがあり、一般的なブラウザも 12 ほどあります。各ブラウザによるページのレンダリングの違いにより、同じページがすべてのブラウザで同じように表示されるわけではありません。 、私はそれを測定するために大まかに90％の復元を使用しますが、100％の復元を必要とするデザイナーもいるでしょう。その場合、ページを確実に復元するにはかなりの労力が必要です。デザイン ドラフトと 90% 一致しています。デザイナーとリファクタリングが共同で関与します。つまり、デザイナーは時間の許す限り、ピクセル数、使用される色の値、高さを含めてページにマークを付けます。
リファクタラーは、コード自体に注意を払わないで、実際にいくつかのピクセルが見えない場合は、コードから飛び出して視覚的表現レイヤーを確認することもできます。この方法は、コストも比較的低く、自分で問題を見つけるのが簡単です。 テーブルが Web ページに組み込まれていた時代には、ほとんどすべての画像とアイコンは 1 つの http リクエストであり、サーバーは頻繁にそれを読み取る必要があり、多数のユーザーが常にアクセスしていました。サーバーに負荷をかける余裕がないため、電話を切る可能性があります。したがって、http リクエストをできるだけ減らす必要があり、背景画像の結合は非常に有効な方法です。
通常、背景画像の出力品質の割合は60〜80%に調整でき、より重要なアイコンや写真については100%に調整して高品質の画像を出力できます。
Web ページの読み込みプロセス中、またはネットワーク速度が原因で画像が一時的に読み込まれず、短期間の空白スペースが生じる場合は、ユーザーに次のことを思い出させるために、この領域の背景色を事前に定義することをお勧めします。このエリアにはコンテンツがあります。
画像の上にマウスを置いたときに、タイトルまたは alt を適切に追加して、画像の読み込みに失敗したときにユーザーが画像が何に使用されているかを理解できるようにします。
オンデマンド読み込み、非同期読み込み。Apple の公式 Web サイトの多くの場所で使用されている非同期読み込みに似ています。利点は、メイン ページの読み込み速度が向上し、ユーザーが必要な場合にのみ他の添付ページを読み込むことです。
CSS フィルターの使用を減らします。現在、それらを使用している人はほとんどいません。基本的に、グレースフル ダウングレードを使用したり、ユーザーにブラウザーのアップグレードを促したりします。
Web サイトを起動する前に CSS および JS ファイルを圧縮し、必ずバックアップしてください。
私はコードのエレガンスを達成していませんが、コードのエレガンスを達成するには、専門家がプロフェッショナルとしての資質を持っているかどうかを判断するのに十分な継続的な努力が必要です。ここで写真を見てみましょう~
著者: @Lerroyli Tencent MIG ワイヤレス研究開発部 Web アート デザイナー
/*=================== ==== 分割線 ==================*/
Zhang Xinxu は非常に長いブログ投稿で「宗派」の概念を紹介しました。
学習の過程で、Zhang Xinxu の関連ブログ記事をよく見つけます
フロントエンド初心者として、深く感謝いたします
ここを読むことを強くお勧めします。読者は Zhang Xinxu のオリジナルのブログ投稿を参照してください。読者は復興についてより深く理解できると思います。
これは、記事の最後に著者が書いた本来の意図と希望。
CSS ページ再構築の「学校」
5. CSS ページ再構築の「学校」の意識と寛容
なぜ「学校」という概念が提案されているのか、皆さんに見ていただければと思います。包括的な態度で他のピアの CSS コードとページの再構築方法をサポートします。
上記の QQ 同窓会ボタンとアダプティブ ボタンの例を見てみましょう。同僚の中には、特定のボタンを使用するときにボタンの仮想フレームが非対称であることに気づき、この Web サイトまたはこのページの制作者が非対称であると密かに思うかもしれません。私と細部へのこだわりの間にはまだギャップがあります。QQ Alumni や他の多くの Web サイトのアダプティブ ボタンを好む同僚は、密かにそのフロントエンド テクノロジだと思うかもしれません。これらのウェブサイトは本当に良くないし、ボタンには再利用性がまったくありません。
最終的な結果は、相互の軽蔑と軽蔑になるかもしれません。
実際には、それは必要ではありませんが、インクルーシブな精神は自分自身の成長にとって非常に重要であることに気づきました。
他人のコードを判断したり判断するために、決して自分自身の基準を使用しないでください。
あなたは直線上の点Aに立っていて、点Bに含まれる考えをどうすれば簡単に理解できますか。
私たちがすべきことは、あなたが軽蔑しているように見える他の人のコードやページの再構築方法を広い心で見て、そこから新しいことを学ぶことです。
この精神が私たちの成長の高さを決定します。私たちは常に飢え渇きを持ち、自分の決めたことに固執せず、柔軟に吸収し、変化していかなければなりません。
したがって、IE6 で特定のページのどこかが 3 ピクセルずれていることに気付いた場合でも、これがバグであり、このページのエンジニアの情熱が足りないなどと簡単に結論付けないでください。
おそらく、このエンジニアはページのスケーラビリティと CSS コードの数を重視しているため、一般のユーザーは気にしないでしょうが、それを解決するためのハックを作成する必要はありません。ページ上にボタンが表示されます。テキストも画像に切り込まれています。エンジニアのスキルが不十分でボタンが再利用できないとは考えないでください。おそらく、人々はより多くの画像を作成し、視覚的なエクスペリエンスを重視しているのでしょう。ボタンはより優れた視覚体験を提供します。
6. 実践的な指導 「スクール」という明確な概念はありませんが、実際には、CSS の世界には暗黙の「スクール」が存在します。
これを知ることには、一定の実用的な意味もあります。たとえば、（個人的な意見です。参考までに）テンセントに入社したい場合は、ページを書くときにテンセントが何を重視しているかを知る必要があります。 -scale company 大手インターネット企業のプロセス仕様は比較的成熟しています。先人から継承したものは、コード スタイルとそれに合わせてページを再設計することによって制御できるものではありません。
たとえば、拡張性と再利用性を第一に考え、エクスペリエンス、特に互換性 (ブラウザ間での一貫性) を第二に置くなど、自分のやり方に固執すると、最終的には間違いなく不幸になるでしょう。必要なのは、CSS コード (名前、スタイル) と製品ページの HTML 再構築のアイデアについて調査することだけです。
大企業の場合、通常の方法で CSS コードを記述することが適切ではない可能性がありますが、それが最善であることがよくあります。
将来、私がもっと成熟して、幸運にも他の人にインタビューできるようになったら、私がもっと注目するのは、相手の CSS と HTML コードの再利用性と拡張性が十分に高いかどうかです。 CSS コードが十分に簡潔であるかどうか、いわゆる互換性のためにパフォーマンスが十分に高いかどうか (これも重要です) は、最も必要な条件ではありません。
現時点で、あなたのコードとページがレンガの家のように四角くて規則的であれば、私は間違いなくあなたを切り倒します。流れるようなページレイアウトが必要です。
From
/*= = ====================区切り線===================*/
以下の抜粋は Bai の言葉を引用しますフロントエンド朝読教室の公開アカウントに載っているShuzaiさんの記事が、これからフロントエンドを始める学生さんの参考になれば幸いです
Baishu - Blog Garden:
フロントエンドの学び方
グループの誰かが私に、「今からフロントエンドを学び始めるべきか？」と尋ねたのを覚えています。木を植えるのに最適な時期は 10 年前で、次にやりたいことをすぐに実行し、それに固執します。 。
フロントエンドに入ったばかりの学生にとって、最も重要なことは、CSS と JavaScript の基本的な原則を何度読んでも古くならないことを学ぶことです。体系的に学ぶための本を読むか、オンライン チュートリアルを探してから、プロジェクトを見つけるか、前述したようにデモを実行して、知識を経験に変え、それを続けるのが最もシンプルで最も簡単な学習方法です。明らか。
仕事が忙しくて勉強する時間があまりないという学生もいますが、例えば私は毎日仕事の前後に1時間ほど時間を費やしています。バスや地下鉄の中で、特に朝の通勤中に携帯電話で読書や勉強をすると、学習効率が非常に高くなります。
現在、フロントエンド業界は非常に奥深く、さまざまなビジネス上の問題を解決し、生産効率を向上させるために、技術革新が非常に速いため、迅速に学習する能力が重要な競争力の 1 つではありません。つまり、あらゆるテクノロジーを学ぶ必要があり、他のことを理解したら、必要なときに学ぶのに遅すぎるということはありません。新しいフレームワークを使用するための学習の敷居はそれほど高くなく、簡単に始めることができます。この観点から、フロントエンドに入ったばかりの初心者は、その奥深い原則を習得するのに特に有利です。この段階で学ぶ努力をすれば、上級エンジニアのレベルに到達できるかもしれません。
誰にとっても有益な学習方法であっても、他の人にとっては適さないものもあります。自分自身の生活習慣や考え方に基づいて、実践を通して自分の方法を見つけなければなりません。
学習の過程で、遭遇した問題をどのように解決しましたか?
グループの中に 3D 回転アニメーションについて尋ねてきた大学院生の女の子がいました。簡単な原理を説明した後、参考のためにサンプルを送りたいと思ったのですが、彼女はそれをどうやって行うか考えなければならないと言いました。彼女自身も笑顔で親指を立てます。
問題に遭遇したときに「自分で考える」ことを学ぶことは、最も基本的な能力の1つであり、どの業界で働いていても、それを習慣化することができます。 。残念なことに、フロントエンド分野に入ったばかりの多くの学生が、問題に遭遇するとすぐに質問したり、既製のデモを要求したりするのを目にしました。
考えても解けない場合はBaiduやGoogle（stackoverflowなど）で検索できますが、ある程度の英語力は必要です。グループに参加したり他の方法で「質問する」という問題がどうしても解決できない場合は、Zhang Xinxu 著「フロントエンドマスターへ進むための質問の仕方」 http:// www.zhangxinxu.com/wordpress/2015/05/how-to-ask-web -front-question//
/*===================== ===区切り線================ ===*/
優れたフロントエンド再構築エンジニアになる方法
From
著者: smallni 出典: Tencent TGideas 公開時間: 2013-01-05 16:58
専門的な観点から:
明確なセルフポジショニング
現時点では、国内のフロントエンドはリファクタリングとJS開発に分かれているわけではありません。PSはリファクタリングに必須のソフトウェアですが、リファクタリングは「絵を切り取る」作業ではないことを知っておく必要があります。 。リファクタリングをするからといって他のテクノロジーを学ばない理由はありません。リファクタリングは一生行わないことを知っているからです。JS を失うことはできませんし、新しいフロントエンド テクノロジーにも精通していなければなりません。ページを再構築するときは、ページ モジュールの分離、パフォーマンスの最適化、メンテナンスの容易さ、使いやすさにほとんどの時間を費やし、コードの実装には最小限の時間を費やす必要があります。おそらく、あなたが作成したページは何百万ものユーザーによって使用され、障害のあるユーザーもいる可能性があるため、コードの完成だけではなく、さまざまなユーザーの感情や経験を考慮する必要があります。
フロントエンドの基礎スキルに集中
フロントエンドの基礎知識は家の基礎のようなもので、基礎がしっかりと築かれていないと、地震が起こったときに倒壊する可能性があります。同時に、それは城のドアのようなもので、ドアがしっかりと構築されていないと、敵の砲撃ですぐに突破されてしまう可能性があるため、フロントエンドがより多くの知識を学ぶには、適切な基礎を築くことが重要です。 CSS 属性の特性、HTML タグのセマンティクス、JS の基本知識、および W3C 仕様 (ブロック フォーマット コンテキスト、カスケード コンテキスト、ボックス モデルなど) については、より多くの時間をかけてこれらを学習して統合することができます。正しく合理的である可能性がある 特定のフロントエンド テクノロジ ソリューションを使用します。
最先端のテクノロジーを正しく扱いましょう
インターネットは日進月歩で発展しており、私たちが CSS2 を学んでいると、CSS3 も世界中で普及しています。 CSS3、CSS4が議題に上りました。フロントエンドロードの学びには終わりがないので、新しい技術が生まれたときは、それを正しく検証する必要があります。
仕事をうまくこなしながらも、学習に対する情熱を持ち続けてください。新しいテクノロジーを使用してみることもできますが、まず、なぜこの新しいテクノロジーを使用する必要があるのかを理解してください。このテクノロジーを使用するとどのような改善ができるでしょうか?フロントエンド テクノロジーには、最適な技術ソリューションというものは決してなく、最も適切な技術ソリューションのみが存在します。最新のものが必ずしも優れているわけではなく、古いものが必ずしも悪いわけではありません。 盲目的にトレンドを追いかけるのではなく、自分が学んでいることが応用できるかどうかを知る必要があります。 (著者注: 実際、多くの場合、これは新しいテクノロジではありません。このテクノロジはずっと前に誕生しましたが、新しいフロントエンド ソリューションまたは標準が推進されています。たとえば、CSS3 は実際には 2003 年に誕生しました。)
より良いコミュニケーションスキル
私たちは開発、製品、設計、対話、テストなどで毎日さまざまな人々とやり取りする必要があるため、より良いコミュニケーションスキルと調整スキルが必要であり、より良いコミュニケーションスキルに重点を置く必要があります、コスト上のコミュニケーションを削減します。 「すべてはユーザーの価値に基づいている。」これは、他の同僚とコミュニケーションするときに誠実であることに加えて、ユーザーのことをもっと考える必要がある概念でもあります。「本当にそうする必要があるのか？」
技術フォーラムに選択的に参加する
小さな会社に留まり、フロントエンドの人材も少なく、良い雰囲気がない場合、ネットワーキングとフォーラムの2つの方法でネットワークを広げるしかありません。 QQ Group、Blue Ideal などのネットワークや対面のフォーラムは、間違いなくネットワークを広げる最も確実な方法です。実際、現在の国内環境では、フロントエンド技術フォーラムの数は数え切れません。現時点では、フォーラムに選択的に参加することが特に重要であり、参加するかどうかに関係なく、どのフォーラムにも参加すべきではありません。それを理解しているかどうか、無料か有料かは、実際には自分に合ったものであることが最も重要です。 ブラウザメーカーをフォローしましょう 10年前、IEは世界のほとんどを独占していましたが、現在、他の主要なブラウザメーカーが世界シェア争いに参入しています。フロントエンドと最も切り離せないのはブラウザです。ブラウザメーカーのパターンは、将来を見据えた視点を与えてくれます。一部のブラウザ メーカーの開発者ライブラリ: Microsoft の MSDN、Firefox の MDN、Google の開発者ライブラリ、Opera の開発者ライブラリ。また、Firefox 中国では新バージョンがリリースされるたびにプロモーション活動が行われており、Microsoft の最新の IE10 の機能についても知ることができます。これらの新しいバージョンのブラウザと css3html5 のサポートについては、どの程度サポートされていますか?
より多くの責任と共有
平時は、チームのコラボレーション標準やコーディング標準を再構築するための合理的な提案を出したり、他の同僚がより速く、より効率的に作業できるようにするための提案を出したりするなど、より多くの追加作業を引き受けます。ドキュメントも改善されました。自分の仕事の中で優れた作業方法や新しいテクノロジーの研究に出会ったら、それをみんなと共有することができます。リファクタリングのチームの雰囲気は非常に重要です。一日中コードを書くだけのチームに留まりたい人はいません。これは個人にとってもチームにとっても有害です。
その他の考えと要約
思考とは「意識の流れ」、特に再構築プロセス中の私たちの思考や概念を指します。
リファクタリングとして、多くの人はデザインドラフトを取得した後、さまざまなニーズを実現するためにさまざまな「奇妙なトリック」を使用して写真を切り取ることに没頭し始めます。デザインドラフトを取得した後、綿密な分析さえ行いません。合理的なアーキテクチャ、適切なモジュールを抽出する方法、よりエレガントな方法と軽量コードでページ上の要件を実装する方法。
おそらく、私たちが前進し続けることを促しているのは、現在の環境です。さまざまなフロントエンド フォーラムのほとんどは、特定のテクノロジーについて話しており、特定の技術的な詳細の実装に絡み、パフォーマンスの最適化が不十分であることについて話しています。フロントエンド ソリューションを合理的に選択する方法、リファクタリング中にさまざまなシナリオで遭遇する一連の問題を解決する方法、そして最も重要なことに、私たち自身のキャリアに関する考え方、つまり一生コードを書く準備ができているかどうかについて語る人はほとんどいません。
概要は「レビュー」とも呼ばれ、レビューとレビューを意味します。定期的なプロジェクトレビューは、プロジェクト内の問題を発見し、将来の再発を防ぐことができます。
もちろん、プロジェクトのレビューは 1 つの側面であり、さらに重要なのは、コードレベルのレビューを不定期に行うことで、コードの品質を向上させるだけでなく、より洗練されたコードの管理を行うこともできます。チームの協力精神を強化し、チームの全体的な技術能力を向上させます。明らかに、これは非常に意味のあることです。チームメンバーは全員のコードを一緒にレビューして、各人の欠点やハイライトを見つけることができます。そうでなければ、私たちは自分のコードに埋没しているだけの勤勉なプログラマーになってしまいます。
人生の観点から:
読書への情熱を持ち続けましょう
インターネット上の情報は断片化されており、断片を整理する能力が十分にない場合、物理的な本は特に重要です。私たちの魂を慰めてください。時々、人生や仕事に圧倒されてしまうことがあります。そのようなとき、私たちはストレスを解消する方法を見つける必要があります。読書は良い方法です。
スポーツ趣味を貫きなさい
自分の仕事方法を決め、必要なものの優先順位を整理し、自分自身をリラックスさせるための一定の時間を確保し、このリラックスによって筋肉や骨が動き、おそらく遊びができるようにする必要があります。バドミントンしたり、ランニングしたり、ジムに行ったり。体を強くすることによってのみ、モンスターを倒したりアップグレードしたりするためのより多くのエネルギーを得ることができます。
人生に対して楽観的な態度を維持しましょう
人生の小さな幸せの粒子を捉えるのが上手になれば、私たちは幸せに生きることが多くなります。前回、私は騰訊健康ガソリンスタンドでの生活についての話を聞きました。その中で、「人生は鶏のスープを煮込むようなもので、時には調味料やディップソースを加える必要があります。まさに、これらのディップソースは、小さな幸せを発見するためのものです。」とありました。人生を楽観的で、オープンマインドで陽気なフロントエンドの人になりましょう。疲れすぎないように、仕事と生活のバランスを調整しましょう。
そうですね、プロの観点から見ても、人生の観点から見ても、優れたリファクタラーになるのは簡単ではありません。楽観的で熱心で前向きな心を維持し、学び続け、シンプルに生きることが不可欠です。そして幸せな人生、これで十分です。
実際、コードをリファクタリングしているだけでなく、自分の生活もリファクタリングしているのです。
から
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
