В качестве текстового редакторадля работы с кодом был выбран sublimetext.Text очень мощный текстовый редактор с богатым набором расширений. Редактор является условно бесплатным, но ограничений без покупки лицензии нет.
Из удобный функций, доступных в этой версии можно назвать Go To Definition, который позволяет с легкостью перемещаться по определениям функций и переменных в рамках текущего проекта, и скорость работы редактора.
Теперь плагины изолированы от основного приложения. Так можно отметить графическое исполнения данного редактора, удобный дизайн и изменяемый цветовые схемы позволяют настроить данный инструмент под себя, что бы максимально повысить скорость разработки.
Для отображения webстраницы нужен интернет браузер, который распознает код и отображает различные элементы. В качестве браузера для отображения страниц был выбран GoogleChrome. Google Chrome это качественный быстрый и легкий браузер, имеющий много функций при этом крайне прост в освоении.
Так же в нем имеются встроенные инструменты webразработчика, которые так же облегчают процесс разработки, например webконсоль и webинспектор.
ОПИСАНИЕ СТРУКТУРЫ
Приступая к созданию данного шаблона не обходимо определиться с тем из каких глобальных элементов будет состоять шаблон.
Это нужно для лучшего понимания дальнейшей верстки.
Данный шаблон будет состоять из трех глобальных блоков имеющих иерархию.
Это блок рабочая области, которая обрамляет все рабочее пространство, в котором пользователь будет производить действия.
В блоке рабочая область есть еще два глобальных блока это горизонтальное меню и форма ввода запроса, которые в свою очередь включают в себя боле мелкие блоки, это сделано для возможности более точного редактирования.
Так как каждая отдельная страница имеет набор мелких блоков с похожими свойствами, то все страницы адресованы к одному файлу стилей.
В целом концепцию верстки шаблона можно описать так: сначала в файле index.html создаются все необходимые для реализации функционала блоки, вводится вся необходимая на странице информация, после чего в файле style.css описываются все графические свойства каждого блока. Графическими свойствами могу быть: положение блоков на экране, цвет блоков, цвет текста в блоках, тени, рамки, скругления и даже анимации.
Так как сервис по учету ошибок программных продуктов предполагает в основном работу с пользовательским интерфейсом, то интерфейс должен быть простым, но в тоже время должен обладать всем необходимым функционалом для заведения ошибки.
Экран заведения ошибок должен позволять указать все необходимые атрибуты, что бы разработчик имел всю необходимую информацию для устранения ошибки.
Так на экранной форме должны быть: поле для выбора типа запроса, поле для выбора проекта, поле выбора приоритета, поле выбора текущей версии, поле для ввода полного описания ошибки.
На рисунке 5 можно наглядно посмотреть реализацию данного условия.
Рис. 5
Так как функционал сервиса не ограничивается только экраном создания запроса, в экранную форму так же были добавлены элементы горизонтального меню: запросы и проекты.
Что бы в дальнейшем при адаптации данного шаблона можно было подгружать готовые значения, на экранной форме были реализованы элементы множественного выбора, их работу можно увидеть на рисунке 6.
Рис. 6