Файл: Выпускная квалификационная работа разработка вебсайта для рекламного агентства rocont Погадаев Вячеслав Олегович.docx

---

1.2 Формулировка задачи

Все задачи можно разделить на 3 пункта.

Разработка макета веб-сайта для компании:

1. 
   разработать прототип веб-дизайна;
   
2. 
   разработать в соответствии с заказчиком веб-дизайнсайта;
   
3. 
   спроектировать структуру сайта, проработать расположение элементов (кнопок, текстовых и графических блоков);
   
4. 
   разработать навигацию сайта;
   
5. 
   определить набор функциональных возможностей сайта;
   
6. 
   заполнить страницы на сайте необходимым контентом;
   
7. 
   реализовать возможность отправки онлайн-форм;
   
8. 
   разработать планшетную, мобильную версию сайта.
   

Сайт должен обладать следующими качествами:

1. 
   гибкостью, удобной для просмотра различной информации;
   
2. 
   удобным расположением элементов для пользователя;
   
3. 
   удобной и простой навигацией;
   
4. 
   понятной и достоверной информацией;
   
5. 
   быстрой загрузкой всех веб-страниц и прочих вкладок;
   
6. 
   предоставление всех услуг с кратким описанием;
   
7. 
   привлекательным дизайном, с использованием анимацией.
   

Целью создание корпоративного сайта является:

1. 
   рассказать организации о себе (о предоставляемых услугах и товарах, о своем местоположении и т.д.);
   
2. 
   заинтересовать клиентов, увеличить спрос на услуги;
   
3. 
   увеличить узнаваемость компании, осуществить быстрый доступ к тому перечню товаров и услуг, которые она предлагает;
   
4. 
   развить клиентскую базу, а также привлечь новых партнеров и сотрудников.
   

Эти задачи являются основными для рекламного агентства «Rocont» и планируется, что данная автоматизация принесет дополнительную выгоду от

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

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

---

1.3 Современные технологии, используемые для разработки веб-сайта

1.3.1 Методы разработки веб-сайтов

Веб-сайт — это совокупность программных, информационных, а также медийных средств, логически связанных между собой, по сути, это отражение успешности компании, её лицо.

Доменное имя, символьное имя, служащее для идентификации, областей, которые являются единицами административной автономии в сети интернет. Например, «yandex.ru» является доменным именем, которое объединяет все странички, находящиеся на сервере.

Веб-сервером называют, как программное обеспечение, выполнявшие функции сервера, так и домашний компьютер на котором установлено программное обеспечение, может быть использован в роли сервера.

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

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

Основным способом верстки сайта является набор кода в текстовом редакторе. Это трудоёмкий и рутинный процесс подразумевает грамотное семантическое прописывание тегов, классов, продумывание иерархии сайта, умение работать стилями в CSS, работа с динамической анимацией по якорям, на языке программирования JavaScript.

Вторым способом верстки сайта является использование CMS. Это движок, который предоставляет возможности полуавтоматического создания веб-сайтапо шаблону, создание сайта на CMS. Такой движоктребует меньше знаний и времени, а также в CMSесть панель администратора с помощью, которой можно добавлять, удалять информацию, внедрять готовые плагины, скрипты в верстку веб-сайта.

---

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

Обозначим преимущества и недостатки веб-сайтов написанный на CMSи конструкторах. Что касается, достоинства CMSили сервиса конструктора, самым главным достоинством это будет скорость разработки, ручная верстка в редакторе займет гораздо больше времени. Главный недостаток таких методов — это качество сайта, если в CMSеще более читабельный и оптимизированный код, то в конструкторах в большинстве случаев код получается ужасный, также создание такого сайта будет стоить дороже.

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

Веб-сайты, сверстанные вручную отображаются горазда быстрее если их сравнивать с CMSсистемами, сервисами конструкторами. Так получается потому что, код получается более оптимизированным, файлы намного компактнее и не надо делать запросы MySQLбазу данных.

Скорость отображение веб-сайта положительно влияет на будущего клиента если загрузка долгая, то это негативный фактор, скорость влияет на позицию выдачи при поисковых запросах. При одинаковых условиях веб-сайт,

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

Для описание внешнего вида элементов страниц применяется CSS (каскадные таблицы стилей).CSSдовольно просто использовать в HTMLдокументах. Для этого нужно прописать в head(предназначен для хранения других элементов), тег style(применяется для определения стилей элементов веб-страницы) и внутри этого тега прописывать стили.

CSS довольно простой формальный язык, который был создан для описания внешнего вида документов. Язык прост и состоит из самобытных примитивных конструкций, которые не так сложны в запоминание, выполняющие определенные задачи. Самое сложное в запоминании не написание конструкций. Например, чтобы задать цвет тексту, достаточно, сделать перевод на английский в результате получиться color и название цвета.

---

CSSселектор (от слова выбирать) – это конструкция с которой начинается каждый блок объявлений, служит для выборки элемента или однотипных элементов на странице, для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега. Пример определения класса тегом приведен на рисунке 1.



Рисунок 1 – Определенный класса тега

Здесь селектором будет класс descriptionтега p, который получает необходимое оформление вHTMLдокументе, в теге . В данном случае цвет текста – cadetblue. Соответственно, если на странице есть

несколько тегов (не только p)с классом description, все элементы получат одинаковое оформление,цвет текста серо-голубой.

В проектах где, большой объём работы, использование CSSне целесообразно потому что, получатся большое и не структурированное количество кода, в котором сложно ориентироваться. Для решения этой проблемы есть CSS препроцессор. CSS препроцессор — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций. CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код.

При помощи препроцессоров вы можете писать код нацеленный на:

1. 
   читабельность для человека;
   
2. 
   структурированность и логичность;
   
3. 
   производительность.
   

Самым популярным предлагаемым функционалом любого CSS-препроцессора является, возможность вкладывать селекторы друг в друга. Оптимальным CSS-препроцессором для маленьких и средних проектов будет LESS, его функционала должно хватать.

В CSS-предпроцессоре LESS, есть примеси, если говорить совсем кратко, то используя примеси (от англ. Mixins), можно сделать код повторно используемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.

Переменные в LESS, переменные нужны для организации и упрощения написания кода и позволяют предварительно задать популярные значения, а затем повторно использовать их в любом месте кода, просто написав имя переменной. Это удобно, потому что нам при необходимости не придётся

---