Файл: Критерии выбора средств разработки WEB-приложений (Основы WEB-технологий).pdf

Он занимает сравнительно небольшой объем, компактен, а текстовое содержание может легко создаваться и поддаваться чтению вычислительной техникой и человеком. Можно без особого труда преобразовать в структуру практически для всех видов формальных языков, использующихся для создания компьютерных программ.^[45]

Большинство языков программирования, будь то JavaScript, Ruby, Python или PHP, наделены функциями и специальными инструментами для работы с JSON.^[46]

В общей сложности выделяют шесть основных типов данных в JSON: числительный, строковый, литералы или константы, массивы, объекты, пустое значение (обозначающееся словом «Null»).

2.5 Технология динамического обращения AJAX

Ajax расшифровывается, как Asynchronous Javascript And XML (Асинхронные Javascript и XML).^[47] Если в стандартном WEB-приложении обработкой всей информации занимается сервер, тогда как браузер отвечает только за взаимодействие с пользователем, передачу запросов и вывод поступившего HTML, то в Ajax-приложении между пользователем и сервером появляется еще один посредник – движок Ajax. Он определяет, какие запросы можно обработать «на месте», а за какими необходимо обращаться на сервер.^[48]

Поведение сервера тоже изменилось. Если раньше на каждый запрос сервер выдавал новую страницу, то теперь он отсылает, лишь те данные, которые нужны клиенту, а HTML из них прямо в браузере формирует движок Ajax.

Асинхронность проявляется в том, что далеко не каждый клик пользователя доходит до сервера, причем обратное тоже справедливо – далеко не каждая реакция сервера обусловлена запросом пользователя. Большую часть запросов формирует движок Ajax, причем его можно написать так, что он будет загружать информацию, предугадывая действия пользователя.^[49]

Ajax позволяет оптимизировать приложения, где используются формы, голосования и т.д., где не желательно перезагружать страницу целиком.

2.6 Языки программирования и разметки

Существует большое количество языков программирования и разметки, которые позволяют создавать WEB-приложения. Выбор конкретных языков зависит от типа решаемой задачи. Рассмотрим некоторые, основные языки.^[50]

HTML – язык разметки гипертекста (Hypertext Markup Language), лежащий в основе World Wide Web (Всемирной Паутины). Благодаря языку HTML любой текст можно разметить, преобразовав его в гипертекст с последующей публикацией в WEB.^[51]

Одной из отличительных особенностей HTML-документов является то, что сам документ содержит только текст, а все остальные объекты встраиваются в документ в момент его отображения Браузером с помощью специальных тегов и хранятся отдельно.

CSS (Cascading Style Sheets) – язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML). Обычно CSS-стили используются для создания и изменения стиля элементов WEB-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL. Отделяя стиль представления документов от содержимого документов, CSS упрощает создание WEB-страниц и обслуживание сайтов.^[52]

JavaScript – разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык программирования для разработки встраиваемых приложений, выполняющихся как на стороне клиента, так и на стороне сервера. Синтаксис языка очень похож на синтаксис Java, поэтому его называют – Java-подобным.^[53]

Основные области применения JavaScript – это динамическое обновление данных на странице, проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер, взаимодействие с пользователем при решении «локальных» задач, решаемых приложением JavaScript, встроенном в HTML-страницу.

PHP – в основном используется для создания скриптов, работающих на стороне сервера, для этого его, собственно, и придумали. PHP способен решать те же задачи, что и любые другие CGI-скрипты^[54], в том числе обрабатывать данные HTML-форм, динамически генерировать HTML страницы и тому подобное. Но есть и другие области, где может использоваться PHP.^[55]

Еще одна область применения – это создание скриптов, выполняющихся в командной строке. С помощью PHP можно создавать такие скрипты, которые будут исполняться, вне зависимости от WEB-сервера и браузера, на конкретной машине.^[56]

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

ГЛАВА 3. СРЕДСТВА WEB-РАЗРАБОТКИ И ОТЛАДКИ

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

3.1 Программы для разработки дизайна

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

WEB-страницы могут содержать много элементов – текст HTML, растровые изображения, векторную графику. В Illustrator можно использовать фрагменты для определения границ различных WEB-элементов в объекте. WEB-страница делится на ячейки, которые представляются в трёх типах: изображения, без изображения, HTML-текст.^[57]

При этом можно сохранить каждый фрагмент как независимый файл со своим форматом, настройками и цветовой палитрой. Блокировка фрагментов предотвращает случайные изменения позиции. Размеры фрагмента привязываются к содержащемуся в нем объекту. Поэтому при перемещении или изменении размера объекта границы фрагмента корректируются автоматически, но при необходимости их всегда можно откорректировать вручную.^[58]

Adobe Photoshop^[59] – самая популярная, мощная и широко распространенная программа редактирования изображений и создания макетов сайтов. Она содержит всё необходимое для создания и редактирования профессиональной графики.

Программа позволяет ретушировать изображение и подвергать его спецэффектам, переносить детали одного снимка на другой, вносить текст, менять соотношение цветов. Средства Photoshop совместимы с графическими планшетами, что дает возможность более удобной работы.^[60]

3.2 Конструкторы сайтов

Если у вас ограничено время или желание разбираться во всех этапах и технологиях построения WEB-приложений, то оптимальным способом будет создание сайта в конструкторе. Ниже будут рассмотрены самые эффективные из них и простые в использовании. Для создания сайта вам не потребуется каких-либо знаний в области верстки, программирования и WEB-дизайна. Но для более серьезного проекта, возможностей конструкторов может не хватить.^[61]

• Wix – один из наиболее популярных конструктов сайтов, который позволяет быстро и просто создавать интернет-ресурсы действительно высокого качества.
• UKit – конструктор, который позволяет создавать современные сайты, а затем успешно заниматься их SEO-продвижением^[62]. Он имеет простой в освоении и интуитивно понятный пользовательский интерфейс, а также включает в себя продвинутую систему аналитики.
• UMI – еще один простой в освоении и использовании конструктор сайтов.

3.3 Редакторы кода

Vim – расширенный вариант классического редактора текстов Vi, используемого в системах UNIX^[63]. Редактирование кода изначально не было его предназначением, но расширения и плагины довели его практически до совершенства. Существует забавная обучающая онлайн-игра, которая помогает освоить Vim, – Vim Adventures. Также начинающим будет полезна небольшая шпаргалка.^[64]

Возможности:

• Огромное количество дополнений;
• Многоязычность;
• Поддержка множества файловых форматов;
• Мощные поисковые инструменты;
• Возможность бесконечно отменять внесенные изменения;
• Интеграция с большим количеством сторонних приложений.
• Поддержка кодировки Unicode^[65];

Adobe Brackets – относительно молодой кодовый редактор Brackets сделал основной упор на визуализацию и упрощение работы с CSS-препроцессорами. Проектирование WEB-страницы прямо в браузере становится очень быстрым и легким делом. Brackets – отличное решение для программистов и дизайнеров, имеющих дело с пользовательскими интерфейсами и фронтендом в целом.

Есть визуализация HTML-кода и стилей, возможность просмотра изменений в режиме реального времени и мгновенного редактирования. Поддерживается работа с PSD-файлами^[66], возможность импорта изображений без использования Adobe Photoshop. А также имеется удобная компиляция CSS-препроцессоров.

Visual Studio Code – многофункциональный, но компактный кодовый редактор VSC изначально был предназначен для обработки JavaScript и его расширений, но плагины позволяют добавить другие популярные языки, например, PHP и C#. Программа отлично поддерживает платформу Node.JS.

Технология IntelliSense^[67] обеспечивает умное авто дополнение кода: редактор может дописывать названия уже объявленных функций, а подсказки содержат ссылки на нужные главы документации. В редактор встроен отладчик кода.

Atom от GitHub – текстовый редактор Atom хорош уже в базовой конфигурации, а дополнительные настройки могут сделать его идеальным.

Встроенный пакетный менеджер облегчает поиск, установку и создание модулей. Редактор имеет умное авто дополнение, удобный файловый менеджер и механизмы поиска внутри проекта. Есть возможность разделения рабочей области для удобства анализа нескольких файлов благодаря многопанельному интерфейсу.^[68]

Sublime Text – это удобный и быстрый редактор, работать с которым одно удовольствие. Он кроссплатформенный, нетребовательный к ресурсам компьютера и легко расширяемый. Бесплатная базовая версия предоставляет всю необходимую функциональность:

• Подсветку синтаксиса распространенных языков;
• Авто дополнение;
• Множественное выделение;
• Сворачивание блоков кода;
• Удобные комбинации горячих клавиш;
• Возможность разделить рабочую область на несколько окон;
• Широкие возможности кастомизации.

Для Sublime создано большое количество плагинов. С их помощью можно легко добавить дополнительные возможности, такие как отладку, темы оформления и поддержку языков.

3.4 Интегрированные среды разработки (IDE)

Adobe Dreamweaver^[69] – визуальный HTML-редактор компании Adobe. Изначально разработан и поддерживался компанией Macromedia^[70], вплоть до 8-й версии (2005 год). Следующие версии, начиная с Dreamweaver CS3 (2007), выпускает Adobe.

Самая основная особенность этого редактора – поддержка режима WYSIWYG. Это только название такое страшное, потому что обозначает аббревиатуру, расшифровать которую можно так: What You See Is What You Get (что ты видишь, то и получишь).

Это означает, что если вы делали исправления на HTML-страничке, и хотите увидеть полученный результат, то вам уже не нужно заново открывать страничку или обновлять окно браузера, потому что на все изменения можно посмотреть в самом редакторе Dreamweaver и непосредственно в режиме правки кода.

Программа предоставляет полный набор возможностей, чтобы помочь создать собственный сайт. Работать можно, начиная с дизайна, оформления, и заканчивая рабой с кодом, скриптами, плагинами и т.д. ^[71]

Dreamweaver полностью поддерживает HTML5, а это дает новые возможности в использовании онлайн-видео, анимации, что, в свою очередь, придаст уникальность любому сайту. К программе подсоединен jQuery – это значит, что пользователь с легкостью может использовать JavaScript при создании WEB-странички.