Научное общество учащихся «Эврика»

Государственное бюджетное общеобразовательное учреждение

«Лицей-интернат «Центр одаренных детей»

г. Нижний Новгород

Создание современного веб-ресурса на примере сайта лицейской технолаборатории

Выполнил: Назаров Николай,обучающийся 10 «Г» класса

Научный руководитель:Лазарева Мария Владимировна,

учитель информатики

Нижний Новгород2019

ОГЛАВЛЕНИЕ

ВВЕДЕНИЕ………………………………………………………………………… 3

1. СОВРЕМЕННЫЕ МЕТОДЫ РАЗРАБОТКИ ВЕБ-РЕСУРСОВ ……………4

1.1. Основные средства создания сайтов………………..………………..4

1.2. Выбор одного из методов для создания собственного сайта…….7

1.3. Этапы создания веб-ресурса…………………………..………….…8

2. ОСОБЕННОСТИ СОЗДАНИЯ ПРОЕКТА «САЙТ ЛИЦЕЙСКОЙ ТЕХНОЛАБОРАТОРИИ».……………………………………………….….……9

2.1. Макет сайта…………………………………………………………....9

2.2. Верстка макета………………………………………………………..12

2.3. Проблемы разработки……………………………………………….13

ЗАКЛЮЧЕНИЕ……………………………………………………………....…..20

СПИСОК ЛИТЕРАТУРЫ………………………………………………………..21

ВВЕДЕНИЕ

2

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

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

Объект исследования – процесс создания веб-ресурса

Предмет исследования – современные технологии и стандарты создания веб-сайтов

Цель работы: создать сайт технолаборатории ГБОУ «Лицей-интернат «Центр Одаренных Детей»

Задачи:

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

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

данных. Выбрать площадку для размещения сайта в сети Интернет. Подготовить сайт к постоянному пополнению и расширению. Запустить сайт в работу.

ГЛАВА 1. СОВРЕМЕННЫЕ МЕТОДЫ РАЗРАБОТКИ ВЕБ-РЕСУРСОВ

3

1.1. Основные средства создания сайтов

На самом деле, существует много способов, но наиболее доступные и известные следующие:

Создание с помощью написания программного кода. Использование визуального редактора. С помощью сервиса. На движке CMS.

Рассмотрим их более подробно.

Создание сайтов с помощью языков программирования

При работе над созданием сайтов данным методом необходимо изучить его особенности и тонкости.

При данном методе, разработка обычно разделяется на два типа: frontend и backend.

Frontend - все, что браузер может читать, выводить на экран и / или запускать. Реализуется с помощью HTML, CSS и JavaScript, а также с помощью их фреймворков.

HTML (HyperText Markup Language) – это язык гипертекстовой разметки. Он говорит браузеру, каково содержание страницы, например, «заголовок», «параграф», «список», «элемент списка».

CSS (Cascading Style Sheets) – это язык каскадных таблиц стилей. Он говорит браузеру, как отображать элементы, например, «после первого параграфа отступ в 20 пикселей» или «весь текст в элементе «body» должен быть темно-серым и написан шрифтом Verdana».

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

Backend — все, что работает на сервере, то есть «не в браузере» или «на компьютере, подсоединенном к сети (обычно к Интернету), который отвечает на сообщения от других компьютеров».

Для бэкенда вы можете использовать любые инструменты, доступные на вашем сервере (который, по сути, является просто компьютером, настроенным для ответов на сообщения). Это означает, что вы можете использовать любой универсальный язык программирования: Ruby, PHP, Python, Java, JavaScript / Node, bash. Это также означает, что вы можете

4

использовать системы управления базами данных, такие как MySQL, PostgreSQL, MongoDB, Cassandra, Redis, Memcached.

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

Использование визуального редактор

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

Такой метод создания сайта подходит только для новичков. Исходный код таких сайтов несовершенен, т.к. захламлен лишними тегами.

Таким способом можно создать статический сайт с небольшим количеством страниц.

Сервисы создания сайта

Для начала – неплохой вариант. Очень хорошо подойдет новичкам. В интернете существует много сервисов, позволяющих создавать сайты.

Среди них наиболее популярны: Jimdo Wix uKit A5 UCOZ

И много других.

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

У таких сайтов есть некоторые недостатки:

Ограничение функционала, наличие рекламы данных сервисов (они ведь должны как — то зарабатывать). Все эти неудобства можно преодолеть, купив премиум – аккаунт.

Если сравнивать цены, то легче воспользоваться следующим способом создания сайта.

5

Создание сайта на CMS движке

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

CMS пишутся на разных языках программирования (в основном это PHP), но обязательно используют CSS- и HTML-код, так что знание этих инструментов разработки всегда пригодится.

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

Наиболее популярные CMS на сегодняшний день: WordPress Joomla Drupal

1.2. Выбор одного из методов для создания собственного сайта

Рассмотрев все вышеописанные методы разработки, я остановился на создании сайта с помощью языков программирования.

По сравнению с другими методами, при создании самописного сайта возникнут ряд определенных трудностей:

Продумывание архитектуры Написание контроллеров Планирование структуры баз данных Написание всех функций (к примеру: создание статей, авторизация пользователей, загрузка файлов на сервер) Проработка интерфейса админ панели

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

6

Сайт, созданный на конструкторе имеет ряд недостатков.

1. Ограничен в функционале Из-за ограниченного функционала, Вы не сможете делать с сайтов все, что захотите. Будет только определенный набор базовых функций, предусмотренный разработчиками.

2. Шаблонный, не уникальный дизайн Как правило, нельзя заказать дизайн под себя. На выбор дается несколько десятков уже нарисованных макетов, и выбрать можно только из них. При любом раскладе, Ваш сайт будет еще чьей-то 300-й копией.

3. Медленная работа и мало места Бесплатные и самые дешевые тарифы не предполагают мощных серверов и SSD дисков для хранения Ваших файлов. Так что по сравнению с “обычными” сайтами, сайт на конструктор будет все же медленнее.

4. Сложность индексирования и продвижения сайта Из-за ограничения на большинство настроек, будет проблема с продвижением сайта в поисковиках. Только на платных тарифах, и то не везде есть возможность настроить файлы .htaccess, robots.txt, сделать редиректы и вручную прописать нужны мета-теги на всех страницах. 

5. Этот сайт принадлежит не вам По сути, созданный сайт является собственностью компании разработчика конструктора. Вы имеете доступ к аккаунту, к сайту, текстам и товарам. Но как правило, Вы не имеете полных прав на сайт.

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

1.3. Этапы создания веб-ресурса

Любой сайт в ходе создания претерпевает множество изменений и доработок. Однако общее сходство всех сайтов состоит в том, что они создаются последовательно. Единый для всех сайтов выделить достаточно трудно, но есть некоторые общие этапы:

Создание макета дизайна сайта, прототипирование Верстка готового шаблона Программирование Заполнение сайта информацией

7

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

8

ГЛАВА II. ОСОБЕННОСТИ СОЗДАНИЯ ПРОЕКТА

«САЙТ ЛИЦЕЙСКОЙ ТЕХНОЛАБОРАТОРИИ»

2.1. Макет сайта

С создания функциональных макетов будущих сайтов начинается 98% проектов веб-дизайна, и практически все они сейчас рисуются в Фотошопе. Что же такое макет?

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

В идеале, на выходе должна получиться многослойная раскладка, полностью готовая к верстке и кодированию.

Рис 1. Создание макета «шапки» сайта

Создание макета сайта – творческая задача. Здесь требуется особый подход не только к интерфейсу, но и к опыту взаимодействия.

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

9

На этапе проектирования сайт был задуман как многостраничный ресурс, где отдельно для каждой категории выделена отдельная страница

Рис 2. Использование инструмента «Линейка»

В ходе разработки дизайна было задействовано следующее программное обеспечение: Adobe Photoshop CS6.

Рис 3. Временный логотип сайта

При создании макета сайта активно использовался инструмент «Линейка», позволяющий отмерять расстояние от краев макета до объекта и находить его

размер, что в дальнейшем облегчит верстку сайта по готовому макету.

Сложностью в процессе создания макета сайта было создание логотипа, вписывающегося в общий стиль сайта.

10

2.2. Верстка макета

В процессе верстки макета (переноса дизайна шаблона на язык гипертекстовой разметки для взаимодействия в Интернете) были использованы язык разметки HTML5, таблицы стилей CSS3, а для программирования JavaScript и PHP. Используемые в ходе верстки программы:

Редактор кода – Atom Браузер – Yandex Browser Локальный сервер – Open Server

Для того, чтобы ускорить верстку, был использован фреймворк Bootstrap 4.

Bootstrap 4 – это свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для

типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

 Рис 4. Редактор кода Atom

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

11

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

При верстке макета сайта необходимо постоянно ссылаться на созданный ранее макет psd – макет сайта, в котором без особого труда можно узнать точный размер объектов в пикселях, расположение объекта и его характеристики, что необходимо при описании стиля объекта с помощью CSS3.

Рис 5. Использование языка стилей CSS3

12

2.3. Проблемы разработки

При непосредственном написании внутренних механизмов сайта пришлось столкнуться со многими сложностями, на которых остановимся подробнее.

Проблема 1. Мобильная версия сайта

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

Для написания сайта, адаптированного под различные типы экранов используют CSS-правило @media screen, которое определяет ширину и высоту страницы, открытой непосредственно на устройстве.

1. @media (max-width: 767px) {2. .navbar-default .navbar-collapse {3. border-color: none;4. }5. .flex-caption {6. display: none;7. }8. .navbar .nav > li > a {9. color: #FFF;10. text-shadow: none;11. border: 1px solid rgba(255, 255, 255, 0) !important;12. padding: 4px 15px 4px;13. }14. }

Пример использования @media screen для устройств с максимальной шириной экрана в 767 пикселей

13

Проблема 2. Создание базы данных

Для создания базы данных и ее таблиц я использовал PhpMyAdmin.

PhpMyAdmin - это программа написанная на PHP и предназначенная для управления сервером MySQL через всемирную сеть. phpMyAdmin поддерживает широкий набор операций над MySQL. Наиболее часто используемые операции поддерживаются с помощью пользовательского интерфейса (управление базами данных, таблицами, полями, связями, индексами, пользователями, правами, и т. д.), одновременно вы можете напрямую выполнить любой SQL запрос.

Рис 6. Интерфейс PhpMyAdmin

База данных сайта MySQL – это система, предназначенная для хранения и обработки информации. Комплекс таблиц, взаимосвязанных между собой, для доступа к которым применяется система управления базами данных (СУБД) MySQL. По сути, MySQL – это специальная программа с открытым кодом, которая используется на сервере SQL. Данная программа не способна обрабатывать большое количество информации, однако она идеальна для небольших и крупных веб-ресурсов.

1. <?php2.3. $connection = mysql_connect("localhost" ,"root" ,"123");4. $db = mysql_select_db("techlab");5. mysql_set_charset("utf8");6.

14

7. if(!$connection || !$db )8. {9. exit(mysql_error());10. }11.12.13. ?>

Подключение к базе данных в отдельном файле db.php

1. <? include 'db.php' ?>

Подключение файла db.php во всех файлах сайта

Проблема 3. Создание слайдера

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

Рис 7. Слайдер используемый для просмотра газеты

1. <link rel="stylesheet" type="text/css" href="styleshet02.css" />2. <script type="text/javascript" src="jscript.js"></script>3. <div id="wrapper">4. <div id="container">

15

5. <div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>

6. <div id="slider">7. <ul>

8. <li><img src="photos/1.jpg" width="558" height="235" alt="Первое фото" /></li>

9. <li><img src="photos/2.jpg" width="558" height="235" alt="Второе фото" /></li>

10. <li><img src="photos/3.jpg" width="558" height="235" alt="Третье фото" /></li>

11. <li><img src="photos/4.jpg" width="558" height="235" alt="Четвертое фото" /></li>

12. <li><img src="photos/5.jpg" width="558" height="235" alt="Пятое фото" /></li>

13. </ul>14. </div>15. <div class="sliderbutton" id="slideright"

onclick="slideshow.move(1)"></div>16. <ul id="pagination" class="pagination">17. <li onclick="slideshow.pos(0)"></li>18. <li onclick="slideshow.pos(1)"></li>19. <li onclick="slideshow.pos(2)"></li>20. <li onclick="slideshow.pos(3)"></li>21. <li onclick="slideshow.pos(4)"></li>22. </ul>23. </div>24.</div>

Пример вывода слайдера на экран через код HTML

1. <script type="text/javascript">2. var slideshow=new TINY.slider.slide('slideshow',{3. id:'slider',4. auto:4,5. resume:false,6. vertical:false,7. navid:'pagination',8. activeclass:'current',9. position:0,10. rewind:false,

16

11. elastic:true,12. left:'slideleft'13. right:'slideright’14.});15.</script>

JS код настроек слайдера

Проблема 4. Ошибка 404

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

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

Автоматическое перенаправление пользователя на нужную страницу при возникновении ошибки происходит с помощью файла .htaccess(именно так, с точкой впереди и без расширения). Этот файл добавляется в корень сайта и должен содержать следующую строку.

1. ErrorDocument 404 http://techlab/404.php

Перенаправление пользователя в случае ошибки 404

17

Рис 8. Страница ошибки 404

Проблема 5. Сторонний видеопроигрыватель

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

1. <iframe src="//vk.com/video_ext.php?oid=400480076&id=456239115&hash=a885190db271504d&hd=2" width="853" height="480" frameborder="0" allowfullscreen></iframe>

Вставка видеофайла с сайта vk.comВ перспективах планируем написать свой видеопроигрыватель с использованием JavaScript.

18

Заключение

При работе над исследованием ставилась цель – изучить различные методы разработки современных веб-ресурсов и создать на основе одного из них сайт лицейской технолаборатории, для достижения которой были решены следующие задачи:

Изучены и проанализированы современные технологии создания сайтов

Выбран метод создания сайта Выполнен макет дизайна сайта с учетом последних трендов и

стандартов в веб-дизайне Сверстан HTML-шаблон сайта Запрограммированы основные механизмы сайта

Работа над проектом не завершена. Сайт находится в стадии разработки. Планируем улучшение отдельных частей сайта: повышение безопасности сайта, написание собственного видеопроигрывателя для воспроизведения видеофайлов на сайте, появление вкладки «Блог», постоянно увеличивать наполняемость сайта.

19

Список литературы

1. http://htmlbook.ru 2. https://habr.com/ru/ 3. http://seitostroenie.ru/sposoby-sozdaniya-sajta.html 4. https://rabota-vinete.ru/saitostroenie/sposobi-sozdaniya-saitov.html 5. https://text.ru/rd/

aHR0cHM6Ly92aWRlb3Vyb2tpLm5ldC9yYXpyYWJvdGtpL3Nwb3NvYnktc296ZGFuaWlhLXNhaXRvdi5odG1s

6. https://text.ru/rd/ aHR0cDovL3NlaXRvc3Ryb2VuaWUucnUvc3Bvc29ieS1zb3pkYW5peWEtc2FqdGEuaHRtbA%3D%3D

20

21