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


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

選択したデスクトップディストリビューションに関係なく、パート3は、それほど面倒なことなく優れたアプリケーションを作成するのに役立ちます。

ただし、このシリーズではHTML 5とWeb開発の基本についてのみ説明し、HTMLにある程度精通していることを前提としていますが、WWWには、私たちの機能を拡張するための優れたリソースがたくさんあります。ここで共有しました。

この最後のガイドでは、これらのツールのいくつかについて説明し、それらを使用して、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と同じですが、Bootstrapコードに特化しています)を使用すると、コードスニペット(フィドルとも呼ばれます)を保存し、インターネット上で非常に簡単に共有するためのリンクを提供できます(どちらか友達とのメール、ソーシャルネットワークプロファイルの使用、またはフォーラムで)。

概要

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

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

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