Как украсить динамическое веб-приложение HTML5 с помощью онлайн-инструментов

Когда я начинаю последнюю статью в этой серии, я надеюсь, что вы смогли понять важность HTML 5 и мобильной/адаптивной веб-разработки.

Независимо от того, какой дистрибутив рабочего стола вы выберете, Netbeans — это мощная среда разработки, которая при использовании вместе с базовыми навыками работы с командной строкой Linux и инструментами, обсуждаемыми в части 3, может помочь вам создавать выдающиеся приложения без особых хлопот.

Однако учтите, что в этой серии статей мы рассмотрели только основы HTML 5 и веб-разработки и предполагаем, что вы в некоторой степени знакомы с HTML, однако WWW полна замечательных ресурсов – некоторые из них FOSS – чтобы расширить то, чем мы здесь поделились.

В этом последнем руководстве мы поговорим о некоторых из этих инструментов и покажем вам, как их использовать для добавления к существующей странице, над которой мы работаем. Украшаем наш пользовательский интерфейс (пользовательский интерфейс).

Украшение пользовательского интерфейса веб-сайта

Font Awesome — это полный набор инструментов для значков, шрифтов и CSS, который может легко интегрироваться с Bootstrap. Вы можете не только добавлять на свои страницы множество других значков, но также изменять их размер, отбрасывать тени, менять цвет и выполнять многие другие параметры с помощью CSS.

Однако, поскольку работа с CSS выходит за рамки этой серии статей, мы будем иметь дело только со значками размера по умолчанию, но в то же время рекомендуем вам «копнуть немного глубже», чтобы узнать, насколько далеко этот инструмент может взять вас.

Чтобы загрузить Font Awesome и включить его в свой проект, выполните следующие команды (или смело зайдите непосредственно на Github проекта, загрузите потрясающий zip-файл через браузер и распакуйте его с помощью инструментов графического интерфейса):

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

И добавьте файл .css в список ссылок вверху нашей страницы, как мы это делали ранее с jQuery и Bootstrap (помните, что вам не обязательно вводить все — просто перетащите файл с вкладки Проекты в окно кода):

Давайте возьмем, к примеру, раскрывающийся список на нашей панели навигации:

Приятно, правда? Все, что для этого нужно, — это заменить содержимое существующего ul class с именем dropdown-menu внизу index.php на:

<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>

Поверьте, вложение своего времени в изучение того, как использовать эти инструменты, будет очень полезным опытом.

Куда обратиться за помощью

Как ИТ специалист, вы должны быть хорошо знакомы со многими ресурсами, которые предоставляет Интернет. Поскольку веб-разработка не является исключением, вот несколько ресурсов, которые, мы уверены, окажутся вам полезными при настройке ваших приложений.

При работе с кодом Javascript (например, при работе с jQuery, как мы это делали в Части 2) вам потребуется использовать JSHint, онлайн-программу проверки качества кода Javascript, целью которой является помогая разработчикам обнаруживать ошибки и потенциальные проблемы. Когда эти ловушки обнаружены, JSHint указывает номер строки, в которой они расположены, и дает подсказки по их устранению:

Это, конечно, выглядит великолепно, но даже с этим замечательным автоматизированным инструментом будут моменты, когда вам понадобится кто-то еще, чтобы взглянуть на ваш код и сказать, как его исправить или иным образом улучшить, что подразумевает каким-то образом поделиться им.

JSFiddle (онлайн-тестер кода Javascript/CSS/HTML) и Bootply (тот же, что и JSFiddle, но специализируется на коде Bootstrap) позволяют сохранять фрагменты кода. (также известные как скрипки) и предоставить вам ссылку, по которой можно легко поделиться ими через Интернет (по электронной почте друзьям, через профили в социальных сетях или на форумах).

Краткое содержание

В этой статье мы предоставили вам несколько советов по настройке ваших веб-приложений и поделились некоторыми ресурсами, которые пригодятся, если вы застрянете или захотите, чтобы еще одна пара глаз (и не один, а несколько) взглянула на них. свой код, чтобы увидеть, как его можно улучшить.

Скорее всего, вы знаете и о других ресурсах. Если да, не стесняйтесь поделиться ими с остальным сообществом Tecmint, используя форму комментариев ниже. И, кстати, не стесняйтесь сообщать нам, если у вас есть какие-либо вопросы по поводу представленного контента. в этой статье.

Мы надеемся, что эта серия дала вам представление об огромных возможностях мобильной и адаптивной веб-разработки.