Диплом (1218689), страница 3
Текст из файла (страница 3)
Есть специальные теги подразумевающие структурувыводимой информации так например тег <nav> задает навигацию по сайту, Атег <aside> </aside> Определяет блок сбоку от контента для размещения рубрик,ссылок на архив, меток и другой информации.182.3 CSS3CSS3 – каскадные таблицы стилей третьего поколения. Представляет собойформальный язык , реализованный с помощью языка разметки. Главной особенностью языка является возможность анимации объектов без использованияJavaScript, а также поддержка линейных градиентов, сглаживания и многогодругого [14].Зачастую каскадные таблицы стилей используются не только для определения шрифтов, фона и цвета компонентов web-страницы, но и для определенияместоположения объектом относительно друг друга при отображении блоковстраницы сайта в браузере, что позволяет создавать многоуровневый дизайнстраниц, а так же выводить на экран окон по верх основных элементов ( модальное окно).
Что было не возможным при создании страниц с помощью табличной верстки.Хорошим правилом является вынесения CSS структуры в отельный файл, аподключается он с помнщью тега <link > , а подключение выглядит так:<link rel="stylesheet" type="text/css" href="name_file.css">А сама структура файла состоит из классов и идентификаторов, а так же модулей регламентирующих дизайн(рисунок 10) [15].19Рисунок 10 – Пример CSS файлаТак же необходимо помнить, что в СSS классах существует непоследовательность, это значит, что достаточно создать небольшие изменения в нужномнаследуемом классе, а не переписывать его полностью.2.5 JavaScriptJavaScript – сценарный язык программирования.Основной плюсом JavaScript является его работа c DOM (Document ObjectModel – «объектная модель документа»), что позволяет добавить интерактива вweb – интерфейс, добавление таймеров, анимации элементов, а так же подключения AJAX технологии [16].Вставка сценария JavaScript в HTML–документ начинается открывающимтегом <SCRIPT> и завершается закрывающим </SCRIPT>, где может быть указан не только сам код сценария, а только ссылка на файл с этим кодом.
Так жеможно подключать и сторонние библиотеки для облегчения кода и работы программиста.С появлением другихсценарных языков программирования на примерVBScript рекомендуется использовать указание какого типа скрипт. Кроме того,20если скрипт поместить в теги комментария <! - и // →, то если страница, содержащая сценарий, будет загружена браузер, то такой браузер пропустит текстпрограммы, воспринимая его как комментарий.
Но если этого не сделать тобраузер не поддерживающий языки сценариев просто выведит, строки программы на экран, тем самым засоряя его, и будут выведены как обычный текст программы.Ajax – или асинхронных JavaScript и XML. Это подход к построению интерактивных пользовательских интерфейсов web-приложений, заключающейся вфоновом обмене данными между браузером и сервером. Что позволяет не перезагружать web-страниц полностью, но получать новые данные с сервера.
[17]Так выглядит простой пример JavaScript кода Ajax с использованием библиотеки Jquery:$.ajax({type: "POST",url: "some.php",data: "name=John&location=Boston",success: function(msg){alert( "Data Saved: " + msg );} });Данный код загружает некоторые данные на сервер, и оповещает о окончанииоперации [18].Существует множество библиотек JavaScript, так одна из популярных Библиотека JQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими , атак же с легкостью менять компоненты CSS файла, без физического вмешательства в эти файлы. Также библиотека JQuery предоставляет удобный API функционал для работы с AJAX технологией.JQuery – это JavaScript-библиотека, предназначенная на взаимодействииJavaScript, HTML и CSS технологий.21JQuery позволяет:– обращаться к любому элементу DOM (объектной модели документа) и нетолько обращаться, но и манипулировать ими;– работать с событиями;– легко осуществлять различные визуальные эффекты;– работать с AJAX технологей;– имеет огромное количество JavaScript плагинов, предназначенных для создания элементов пользовательских интерфейсов (рисунок 11).Рисунок 11 – Пример JavaScript файлаТак же в отличие от других языков web-программирования, JavaScript ненужен сервер вся компиляция происходит непосредственно в браузере, что позволяет реализовывать функциональные расчетные формы, калькуляторы и календари .Как и с CSS структурой хорошим тоном является вынесение JavaScript кодав отдельный файл.
Это нужно, что бы структурировать весть проект, а так жеоблегчить объем строчок кода в файлах, что позволит легко находить и видоизменять модули и добавлять новый функционал.222.6 Системы управления версиями Git и GitHub DesktopВ разделе 1.5 были рассмотрены системы управления версиями необходимыдля безопасной работы с проектом и избежания случайных изменений и удаления файлов. А web-сервис GitHub позволяет делать резервные копирования совсеми изменениями.Существует множество систем управления версиями и одна из самых удобных и популярных является система Git. Которая была создана ЛинусомТорвальдом для разработки и размещения ядра Linux.Главное отличие Git системы от других – это, как Git хранит данные.Большинство других подобных систем хранит информацию как список изменений для файлов и относиться к хранимым данным как набор файлов и изменений (рисунок 12) [ 21].Рисунок 12 – Представление хранения данныех в других системахВ свою очередь Git не хранит в таком представлении.
В место этого Gitопределяет хранимые данные как набор слепков небольшой файловой системы. Всегда когда происходит фиксация текущей версии проекта, Git, сохраняетслепок того, как выглядит все файлы проекта на данный момент. Так же еслифайл не был изменен, Git не сохраняет файл снова, а делает ссылку на ранеесохраненный файл (рисунок 13).23Рисунок 13 – Представления хранения данных в системе GitGitHub Desktop – представляет собой графический интерфейс управленияверсиями, что позволяет наглядно удивить и создавать новые репозитории дляпроектов, а так же увидеть изменения в ветвях, а так же отправить весь код изменений на GitHub нажатием одной кнопки синхронизации (рисунок 14) [22].Рисунок 14 – Внешний вид GitHub DesktopТак же нужно помнить, что можно использовать и консольные системы загрузки копий на GitHub, но для начинающих пользователей проще использоватьDesktop версию Git.2.7 Текстовый редакторПри разработке проекта не как не обойтись без редактора кода, это можетбыть как обычный стандартный текстовый редактор, так и большие IDE системы.24Основным критерием редактора является удобность для разработчика инужные ему функционал.Так в ходе работы был использован текстовый редактор Sublime Text 3.
Таккак, он имеет большое количество открываемых файловиподсветкабольшинства языков программирования и разметки.Так же одним из плюсов является возможность быстрого доступа к открытым репозиториям, через панель файлов (рисунок 15).Рисунок 15 – Внешний вид Sublime Text 3В данной главе были рассмотрены множество технологий и программныхсредств которые не только для улучшения web-интерфейса приложений, увеличение производительности работы серверной части, но и облегчения работысамого разработчика.
Существуют и другие технологии, такие как фреймврки иCMS системы, но они не использовались в данной работе [23].253 ПОСТАНОВКА ЗАДАЧ И ИХ РЕАЛИЗАЦИЯВ ходе выполнения данной квалификационной работы, было получено следующее техническое задание от Общественного Совета министерства промышленности и транспорта Хабаровского края. Необходимо разработать информационный web-сайт с возможностью добавления новостей, мероприятий, документации регламентирующую работу Общественного Совета, а так же возможность просмотра личного кабинета, членами совета. И добавления информацииАдминистратором и модераторами сайта.На сайте необходимо добавить следующие web-страницы: «О Совете», «члены совета», «Новости», «Документы» и «Мероприятия». А так же возможностьаутентификации на сайте членами совета и модераторами.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
