| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> |
| <html> |
| <head> |
| <title>Поддержка разработки веб-приложений HTML5</title> |
| <meta http-equiv="content-language" content="en"> |
| <meta name="description" content="DESCRIPTION HERE"> |
| <link rel="stylesheet" type="text/css" href="../../features.css"> |
| <link rel="stylesheet" type="text/css" href="/images_www/js/colorbox/colorbox.css"> |
| <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=UTF-8"></head> |
| <body> |
| <script type="text/javascript" src="/images_www/js/colorbox/jquery.colorbox-min.js"></script> |
| |
| <script type="text/javascript"> |
| $(document).ready(function(){ |
| $('a.cbox').colorbox({rel:'cbox',opacity:0.7}); |
| }); |
| </script> |
| <div style="margin:10px 20px 0px 0px;"> |
| <h1>Поддержка разработки веб-приложений HTML5</h1> |
| <p><a href="../../images_www/v7/3/features/html5-dev.png"><img alt="Разработка приложений Java Enterprise в IDE NetBeans" border="0" src="../../images_www/v7/3/features/html5-dev-cut.png"><br /> <span class="font-11">Для перехода к полноэкранному предварительному просмотру щелкните изображение</span></a><br /></p> |
| <p class="intro"> |
| Начиная с IDE NetBeans 7.3 были представлены новые функции по поддержке и усовершенствованию процесса разработки с клиентскими веб-приложениями, которые используют семейство технологий HTML5. Эта интуитивная технология позволяет быстро создавать многофункциональные веб-приложения, отвечающие принципам интерактивной веб-разработки и работающие как на настольных системах, так и на мобильных платформах. Кроме того, технологии HTML5 можно использовать в приложениях <a href="../java-on-server/index.html">Java EE</a> и <a href="../php/index.html">PHP</a>. |
| </p> |
| <div class="line"> </div> |
| |
| <!-- left text section start --> |
| <a name="o1"></a> <span class="overview-right" id="im1"><a class="cbox" href="../../images_www/v7/3/features/html5-app.png" title="Поддержка разработки приложений HTML5"><img alt="" src="../../images_www/v7/3/features/html5-app-cut.png" width="320" /></a></span> |
| <h2>Поддержки ускоренной разработки HTML5</h2> |
| <p> |
| IDE NetBeans обеспечивает возможность ускоренной разработки веб-приложений HTML5 сразу с момента создания проекта HTML5. Можно выбрать из списка популярных шаблонов в Интернете для проектов HTML5 или указать местоположение .ZIP архива шаблона сайта. При создании проекта на основе шаблона сайта, файлы, библиотеки и структура проекта определяются шаблоном.</p> |
| <p>Также все описанные далее возможности HTML5 можно использовать после создания <a href="../java-on-server/index.html">приложений Java EE</a> и <a href="../php/index.html">приложений PHP</a>. |
| <p> |
| Настройка динамического просмотра веб-страниц, поддержки редактора, возможностей отладки и других функций помогает в разработке, тестировании и отладке приложений HTML5, Java EE и PHP.<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-gettingstarted.html">Начало работы с HTML5 Development</a> |
| </p> |
| <div class="line"> </div> |
| <!-- left text section end --> |
| |
| <!-- right text section start --> |
| <a name="o2"></a> <span class="overview-left" id="im2"><a class="cbox" href="../../images_www/v7/3/features/html5-preview.png" title="Динамический просмотр веб-страниц"><img alt="" src="../../images_www/v7/3/features/html5-preview-cut.png" width="320" /></a></span> |
| <h2>Динамический просмотр веб-страниц</h2> |
| <p> |
| Большинство профессиональных разработчиков признает, что по сравнению с WYSIWYG более предпочтительной является тесная интеграция с браузером Chrome и внутренним встроенным браузером WebKit, которая обеспечивает стабильную связь между кодом и дизайном страницы. |
| </p> |
| <p> |
| При использовании удаленных API WebKit сохраняется полная прозрачность и контроль кода в IDE и появляется возможность получать мгновенную визуальную обратную связь от страницы браузера <br /> |
| </p> |
| |
| <p><b>Примечание.</b> Динамический предпросмотр веб-страниц возможен и на мобильных устройствах. Эту возможность можно использовать не только в браузере Chrome и внутреннем встроенном браузере WebKit, но и в браузере Chrome на устройствах Android и в браузере Mobile Safari на устройствах iOS. |
| </p> |
| |
| <div class="line"> </div> |
| <!-- right text section end --> |
| |
| <!-- left text section start --> |
| <a name="o1"></a> <span class="overview-right" id="im3"><a class="cbox" href="../../images_www/v7/3/features/html5-layout.png" title="Параметры создания макетов"><img alt="" src="../../images_www/v7/3/features/html5-layout-cut.png" width="320" /></a></span> |
| <h2>Функция Responsive Web Design </h2> |
| <p> |
| IDE NetBeans поддерживает использование архитектур Responsive Web Design, позволяя пользователям выбирать различные форм-факторы для веб-страниц и мгновенно предоставляя доступ к визуальным элементам веб-страницы в браузере для этого форм-фактора. Предусмотрен выбор из целого ряда заданных форм-факторов, начиная от смартфонов до настольных компьютеров, как в портретном, так и в альбомном режимах. |
| </p> |
| <p> |
| Редактор стилей CSS в IDE не только улучшает возможности браузера, но и распознает текущие запросы носителей, отображаемые в браузере, и автоматически вносит изменения CSS в этот запрос носителя.</p> |
| <div class="line"> </div> |
| <!-- left text section end --> |
| |
| <!-- right text section start --> |
| <a name="o2"></a> <span class="overview-left" id="im4"><a class="cbox" href="../../images_www/v7/3/features/javascript-editing.png" title="Поддержка JavaScript"><img alt="" src="../../images_www/v7/3/features/javascript-editing-cut.png" width="320" /></a></span> |
| <h2>Расширенная поддержка JavaScript</h2> |
| <p> |
| Поддержка JavaScript в IDE была переработана. Поддержка включает в себя функции, характерные для платформы JavaScript: выделение синтаксиса цветом, автозавершение кода и другие средства редактирования и рефакторинга кода. |
| </p> |
| <p>Поддерживаются следующие платформы JavaScript: jQuery, JSON, Knockout, Ext Js, AngularJS, JsDoc, ExtDoc и ScriptDoc.</p> |
| <p> |
| Теперь вы также можете контролировать параметры форматирования для языка JavaScript в диалоговом окне 'Параметры'. |
| </p> |
| <div class="line"> </div> |
| <!-- right text section end --> |
| |
| <!-- left text section start --> |
| <a name="o1"></a> <span class="overview-right" id="im5"><a class="cbox" href="../../images_www/v7/3/features/html5-css-rules.png" title="Изменить правила CSS"><img alt="" src="../../images_www/v7/3/features/html5-css-rules-cut.png" width="320" /></a></span> |
| <h2>Поддержка редактирования и применения стилей CSS</h2> |
| <p>Реализована поддержка редактирования для препроцессоров Sassy CSS и LESS CSS, включая выделение цветом синтаксических и семантических элементов в языковых конструкциях, отступы, изменение форматирования, свертывание кода и шаблоны файлов. Предусмотрены средства автозавершения и рефакторинга кода для переменных и примесей. |
| </p> |
| <p> |
| Тесная интеграция с браузерами Webkit позволяет просматривать в браузере изменения, внесенные в окне стилей CSS, в реальном времени по мере их внесения. Не нужно больше гадать, как будут выглядеть изменения CSS, до момента обновления браузера. Изменения отображаются в браузере и вносятся в исходный код.</p> |
| <p> |
| Вы также можете "выполнить проверку" из браузера, и в окне стилей CSS будут отображаться правила CSS для элемента, выбранного в браузере автоматически. Теперь можно редактировать CSS из окна стилей CSS с помощью свойств или перейти напрямую к исходному коду CSS и внести исправления с помощью функции автозавершения кода и встроенной документации.<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-editing-css.html">Работа с CSS в приложениях HTML5</a> |
| </p> |
| |
| <p><b>Примечание.</b> Поддержка редактирования и применения стилей CSS реализована и для мобильных устройств. Эту возможность можно использовать не только в браузере Chrome и внутреннем встроенном браузере WebKit, но и в браузере Chrome на устройствах Android и в браузере Mobile Safari на устройствах iOS. |
| </p> |
| |
| <div class="line"> </div> |
| <!-- left text section end --> |
| |
| <!-- right text section start --> |
| <a name="o2"></a> <span class="overview-left" id="im4"><a class="cbox" href="../../images_www/v7/3/features/html5-device.png" title="Поддержка устройств HTML5"><img alt="" src="../../images_www/v7/3/features/html5-device.png" width="320" /></a></span> |
| <h2>Поддержка мобильных устройств и разработка по технологии Cordova</h2> |
| <p>При разработке приложений на HTML5, JavaScript и CSS3 среда IDE создает встроенные пакеты распространения благодаря поддержке технологий Cordova/PhoneGap. Каждый проект HTML5 в среде IDE можно преобразовать во встроенный пакет для iOS или Android, который можно развернуть на соответствующем устройстве непосредственно из IDE. |
| <p> |
| IDE позволяет редактировать файлы CSS в визуальном редакторе и выполнять отладку приложений JavaScript в браузере Chrome, встроенном браузере WebKit и непосредственно на устройствах iOS (в браузере Safari) и Android (в браузере Chrome). |
| </p> |
| <p><b>Примечание.</b> Любое веб-приложение (HTML5, Java EE или PHP) можно протестировать и отладить на мобильном устройстве. |
| </p> |
| <div class="line"> </div> |
| <!-- right text section end --> |
| |
| <table> |
| <tr> |
| <td class="valign-top"><h2>Отладка и тестирование</h2></td> |
| <!--<td></td>--> |
| <td class="valign-top"><h2>Потребление веб-служб</h2></td> |
| <!--<td></td>--> |
| <td class="valign-top"><h2>Соответствие для нескольких браузеров</h2></td> |
| </tr> |
| <tr> |
| <td class="valign-top" style="width:33%;padding-right:10px;"> |
| <p> |
| <span class="overview-centre" id="im5"><img alt="" src="../../images_www/v7/3/features/html5-debug-cut.png" width="200" /></span><br /> Отладку кода JavaScript можно выполнять в браузере Chrome, внутреннем встроенном браузере WebKit, а также в браузере Chrome на устройствах Android и в браузере Mobile Safari на устройствах iOS.<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-js-support.html">Тестирование и отладка JavaScript</a> |
| </p> |
| </td> |
| <!--<td> </td>--> |
| <td class="valign-top" style="width:33%;padding-right:10px;"> |
| |
| <p> |
| <span class="overview-centre" id="im6"><img alt="" src="../../images_www/v7/3/features/html5-rest-client-cut.png" width="200" /></span><br /> Получите удобный доступ к данным предприятия путем создания клиентов JavaScript для веб-служб RESTful. <br /><br />Использование мастера клиентов RESTful, быстрое создание клиента JavaScript для веб-службы RESTful, расположенной в проекте NetBeans, который содержит веб-службу. |
| </p> |
| </td> |
| <!--<td> </td>--> |
| <td class="valign-top" style="width:33%"> |
| <p> |
| <span class="overview-centre" id="im7"><img alt="" src="../../images_www/v7/3/features/html5-css-doc-cut.png" width="200" /></span><br /> Убедитесь, что приложение работает в нескольких браузерах. <br /><br />С помощью встроенной документации, сопровождающей автозавершение кода, IDE предоставляет информацию о поддержке браузеров для определенных конструктов кода.<br /> |
| </p> |
| </td> |
| </tr> |
| </table> |
| <h2>См. также</h2> |
| <ul class="bigger"> |
| <li><a href="/community/releases/81/index.html">На странице сведений о версии IDE netbeans 8.1</a> приведен список выделенных функций в последней стабильной версии.</li> |
| <li><a href="../../kb/trails/php.html">Учебная карта по PHP и HTML5</a> для учебных курсов по началу работы.</li> |
| </ul> |
| |
| </div> |
| </body> |
| </html> |
