ウェブサイト検索

オンライン ツールを使用して動的 HTML5 Web アプリを美しくする方法

このシリーズの最後の記事を始めるにあたって、HTML 5 とモバイル フレンドリー/レスポンシブ Web 開発の重要性を理解していただければ幸いです。

選択したデスクトップ ディストリビューションに関係なく、Netbeans は強力な IDE であり、基本的な Linux コマンドライン スキルやパート 3 で説明したツールと併用すると、手間をかけずに優れたアプリケーションを作成できます。

ただし、このシリーズでは HTML 5 と Web 開発の基本のみを取り上げており、読者が HTML にある程度精通していることを前提としていることに注意してください。ただし、WWW には素晴らしいリソースが満載です。 FOSS – ここで共有した内容をさらに拡張します。

この最後のガイドでは、これらのツールのいくつかについて説明し、それらのツールを使用して UI (ユーザー インターフェイス) を美しくするために取り組んできた既存のページに追加する方法を示します。

ウェブサイトのユーザーインターフェースを美しくする

Font Awesome は、Bootstrap とシームレスに統合できる可能性を備えたアイコン、フォント、CSS の完全なツールキットです。ページに他の多くのアイコンを追加できるだけでなく、CSS を使用してアイコンのサイズ変更、影の付け方、色の変更、その他多くのオプションを変更することもできます。

ただし、CSS の扱いはこのシリーズの範囲外であるため、デフォルト サイズのアイコンのみを扱いますが、同時に「もう少し深く掘り下げて」、どの程度の範囲にあるのかを確認することをお勧めします。このツールがあなたを連れて行ってくれます。

Font Awesome をダウンロードしてプロジェクトに組み込むには、次のコマンドを実行します (または、プロジェクトの Github に直接アクセスし、ブラウザから fontawesome zip ファイルをダウンロードし、GUI ツールを使用して解凍します)。

wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.15.4/fontawesome-free-5.15.4-web.zip

(はい、ドメイン名は実際にはFortAwesome にR が付いているため、タイプミスではありません)。

unzip fontawesome-free-5.15.4-web.zip
cp fontawesome-free-5.15.4-web/css/fontawesome.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles
cp fontawesome-free-5.15.4-web/webfonts/* /home/ubuntu/NetBeansProjects/TecmintTest/public_html/fonts

そして、以前に jQuery と Bootstrap で行ったように、.css ファイルをページ上部の参照リストに追加します (次のことを思い出してください)。すべてを入力する必要はありません。ファイルをプロジェクト タブからコード ウィンドウにドラッグするだけです)。

たとえば、ナビゲーション バーのドロップダウン リストを見てみましょう。

いいですね？必要なのは、index.php の下部にある dropdown-menu という名前の既存の ul class の内容を次のように置き換えることだけです。

<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>

信じてください。これらのツールの使用方法を学ぶために時間を投資することは、非常に価値のある経験となるでしょう。

どこに助けを求めるべきか

あなたはIT担当者として、インターネットで利用できる多くのヘルプ リソースをよく知っている必要があります。 Web 開発も例外ではないため、アプリケーションをチューニングする際に役立つと思われるリソースをいくつか紹介します。

Javascript コードを扱う場合 (たとえば、パート 2 で行ったように jQuery を使用する場合)、オンラインの Javascript 品質コード チェッカーである JSHint を使用するとよいでしょう。開発者がエラーや潜在的な問題を検出できるように支援します。これらの落とし穴が見つかると、JSHint はその落とし穴が存在する行番号を示し、修正するためのヒントを提供します。

それは確かに素晴らしく見えますが、この優れた自動化ツールを使用したとしても、他の人にコードを見て修正方法や改善方法を教えてもらう必要がある場合があります。これは何らかの方法でコードを共有することを意味します。

JSFiddle (オンライン Javascript/CSS/HTML コード テスター) と Bootply (JSFiddle と同じですが、ブートストラップ コードに特化しています) を使用すると、コード スニペットを保存できます。 （フィドルとも呼ばれます）、インターネット上で（友人との電子メール、ソーシャル ネットワーク プロフィールの使用、またはフォーラムのいずれかで）簡単に共有するためのリンクが提供されます。

まとめ

この記事では、Web アプリケーションを調整するためのいくつかのヒントを提供し、行き詰まった場合や別の目 (1 つだけでなく多くの目) で見てもらいたい場合に役立ついくつかのリソースを共有しました。コードを見て、どのように改善できるかを確認してください。

他のリソースについてもご存知の可能性があります。その場合は、以下のコメント フォームを使用して、Tecmint コミュニティの他のメンバーと自由に共有してください。ちなみに、提示された内容について質問がある場合は、遠慮なくお知らせください。記事上で。

このシリーズで、モバイル フレンドリーでレスポンシブな Web 開発の大きな可能性を垣間見ることができれば幸いです。