Как создать базовый проект HTML5 в Ubuntu с использованием Netbeans
В этой серии из четырех статей по мобильной веб-разработке мы покажем вам, как настроить Netbeans в качестве IDE (также известной как Интегрированная среда разработки). в Ubuntu, чтобы начать разработку удобных для мобильных устройств и адаптивных веб-приложений HTML5.
Ниже представлена серия из четырех статей о Разработке мобильных веб-сайтов на HTML5:
Хорошо отточенная рабочая среда (как мы увидим позже), автодополнение для поддерживаемых языков и плавная интеграция с веб-браузерами — это, по нашему мнению, некоторые из наиболее отличительных особенностей Netbeans.
Давайте также помнить, что спецификация HTML 5 дала разработчикам множество преимуществ – вот несколько примеров: более чистый код благодаря множеству новых элементов), встроенные возможности воспроизведения видео и аудио (которые заменяют необходимость для Flash), кросс-совместимость с основными браузерами и оптимизация для мобильных устройств.
Хотя первоначально мы будем тестировать наши приложения на нашей локальной машине разработки, в конечном итоге мы перенесем наш веб-сайт на сервер LAMP и превратим его в динамический инструмент.
Попутно мы будем использовать jQuery (известную кроссплатформенную библиотеку Javascript, значительно упрощающую создание сценариев на стороне клиента) и Bootstrap (популярный HTML, CSS и JavaScript-фреймворк для разработки адаптивных веб-сайтов). В новых статьях вы увидите, как легко настроить приложение, адаптированное для мобильных устройств, с помощью этих инструментов HTML 5.
Прочитав эту краткую серию статей, вы сможете:
- использовать описанные здесь инструменты для создания базовых динамических приложений HTML5 и
- Продолжайте изучать более продвинутые навыки веб-разработки.
Однако обратите внимание: хотя в этой серии статей мы будем использовать Ubuntu, инструкции и процедуры вполне применимы и для других дистрибутивов настольных компьютеров (Linux Mint, Debian, CentOS, Fedora, что угодно).
С этой целью мы решили установить необходимое программное обеспечение (Netbeans и Java JDK, как вы увидите через минуту), используя общий архив (. tar.gz) в качестве метода установки.
При этом давайте начнем с Части 1.
Установка Java JDK в Ubuntu
В этом руководстве предполагается, что у вас уже установлена настольная версия Ubuntu. Если вы этого не сделали, прежде чем продолжить, обратитесь к статье «Установка Ubuntu на рабочем столе», написанной нашим коллегой Матеем Сезаром.
Поскольку версия Netbeans, доступная для загрузки из официальных репозиториев Ubuntu, немного устарела, мы загрузим пакет с веб-сайта Oracle, чтобы получить более новую версию.
Для этого у вас есть два варианта:
- Вариант 1: загрузите пакет, включающий Netbeans + JDK, или
- Вариант 2: Установите обе утилиты отдельно.
В этой статье мы выберем #2, потому что это не только означает, что загрузка будет немного меньше (поскольку мы будем устанавливать только Netbeans с поддержкой HTML5 и PHP), но и позволит нам иметь автономный Установщик JDK, если он нам понадобится для другого набора, который не требует Netbeans и не включает веб-разработку (в основном связанную с другими продуктами Oracle).
Чтобы загрузить JDK, перейдите на сайт Oracle Technology Network и перейдите в раздел Java → Java SE → Загрузки. .
Когда вы нажмете на изображение, выделенное ниже, вам будет предложено принять лицензионное соглашение, а затем вы сможете загрузить необходимую версию JDK (в нашем случае это архив для 64). -битные машины). При появлении запроса в веб-браузере выберите сохранение файла вместо его открытия.
Когда загрузка завершится, перейдите в ~/Downloads и распакуйте архив в /usr/local/bin
:
sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
Установка Netbeans в Ubuntu
Чтобы установить Netbeans с поддержкой HTML5 и PHP, перейдите на https://netbeans.org/downloads/ и нажмите Загрузить< или используйте следующую команду wget для загрузки, как показано.
cd ~/Downloads
wget https://dlcdn.apache.org/netbeans/netbeans/12.5/Apache-NetBeans-12.5-bin-linux-x64.sh
chmod 755 Apache-NetBeans-12.5-bin-linux-x64.sh
sudo ./Apache-NetBeans-12.5-bin-linux-x64.sh --javahome /usr/local/bin/jdk-17.0.1
После этого следуйте инструкциям на экране для завершения установки, оставив значения по умолчанию:
и дождитесь завершения установки.
Создание базового проекта HTML5 в Ubuntu
Чтобы открыть Netbeans, выберите его в меню:
Чтобы создать новый проект HTML5 с использованием базового шаблона, предоставленного Netbeans, выберите Файл → Новый проект → HTML5 → HTML5 Application . . Выберите описательное имя для своего проекта и, наконец, нажмите Готово (на данный момент не добавляйте внешний шаблон сайта или библиотеки JavaScript):
Затем мы перейдём в пользовательский интерфейс Netbeans, где при необходимости сможем добавлять папки и файлы в корень сайта. В нашем случае это будет означать добавление папок для шрифтов, изображений, файлов Javascript (скриптов) и каскадных таблиц стилей (стилей), чтобы помочь нам лучше организовать наш контент в будущих статьях.
Чтобы добавить папку или файл, щелкните правой кнопкой мыши Корень сайта и выберите Создать → Папка или HTML. файл.
Теперь давайте добавим несколько новых элементов HTML5 и изменим тело страницы:
и определяют верхний или нижний колонтитул соответственно для документа или раздела. - представляет основное содержимое документа, в котором показана центральная тема или функциональность.
- используется для автономного материала, такого как изображения или код, и это лишь несколько примеров.
показывает заголовок для элемента , поэтому его необходимо поместить в теги . - зарезервирован для содержимого, каким-либо образом связанного с содержимым страницы, обычно связанного с ним. Его можно разместить как боковую панель с помощью CSS (подробнее об этом в следующих статьях).
Теперь скопируйте следующий фрагмент кода в файл index.html
в Netbeans.
СОВЕТ. Не просто копируйте и вставляйте из этого окна в свою среду разработки, а найдите время, чтобы ввести каждый тег, чтобы визуализировать функции автозаполнения. Netbeans, который пригодится позже.
!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header style="background-color: #6699CC">THIS IS A HEADER</header>
<main>
<article>
<p>This is some sample text.</p>
<p>Another line of sample text for this HTML 5 article</p>
<aside>
<figure>
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML 5 logo" />
<figcaption>Figure 1: The HTML 5 logo</figcaption>
</figure>
<h2>Web development basics series at linux-console.net</h2>
<h3><a href="http://dev.w3.org/html5/html-author/">This is HTML 5!</a></h3>
<p>Some text here</p>
</aside>
</article>
</main>
<footer style="background-color: #CC6699">THIS IS A FOOTER</footer>
</body>
</html>
Вы можете просмотреть страницу, выбрав веб-браузер (предпочтительно Firefox, как показано на рисунке ниже) и нажав значок Воспроизвести:
Теперь вы можете просмотреть прогресс вашего развития на данный момент:
Краткое содержание
В этой статье мы рассмотрели некоторые преимущества написания веб-приложений с использованием HTML 5 и настроили среду разработки с помощью Netbeans в Ubuntu. .
Мы узнали, что эта спецификация языка представила новые элементы и, таким образом, дала нам возможность писать более чистый код и заменять ресурсоемкие компоненты, такие как Flash-фильмы, встроенными элементами управления.
В следующих статьях мы представим jQuery и Bootstrap, чтобы вы могли не только использовать эти элементы управления и наблюдать за более быстрой загрузкой страниц, но и сделать их удобными для мобильных устройств.
А пока вы можете экспериментировать с другими элементами управления в Netbeans и сообщать нам, если у вас есть какие-либо вопросы или комментарии, используя форму ниже.