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

Министерство науки и высшего образования Российской Федерации

Федеральное государственное бюджетное учреждение высшего образования

ИРКУТСКИЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ

Факультет среднего профессионального образования

Машиностроительный колледж

Статья на тему

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

Выполнил студент 2 курса группы мКС-18-2

Черепанов Владимир Андреевич

Руководитель: преподаватель

Почекунина Татьяна Борисовна

Введение

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

История всем известной Всемирной паутины началась около 25 лет назад. В 1989 инженер по имени Тим Бернерс-Ли, работавший тогда в CERN, дал старт проекту, который в дальнейшем превратился в “World Wide Web”. Позднее им и его командой были придуманы Протокол передачи гипертекста (HTTP) и Язык гипертекстовой разметки (HTML). С тех пор проект перерос в глобальную сеть: от одного сайта info.cern.ch в 1991 до миллионов в наши дни.

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

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

У любой современной компании существует сайт, как один из элементов престижа. Ведь именно в Интернете потенциальные клиенты будут в первую очередь искать информацию о фирме. Если у нее нет хотя бы одностраничника с прайсом, это покажется подозрительным – насколько же это неуспешная фирма, если не может даже небольшой веб-ресурс создать?

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

Цели создания сайта:

• Облегчение получения пользователями актуальной информации о компании.

• Необходимость увеличения трафика.

• Сокращение звонков в службу поддержки клиентов.

• Упрощение процесса продаж.

• Упрощение процесса обратной связи.

Задачи сайта:

• Обеспечивать надёжную работу.

• Производить манипуляции с данными пользователей.

• Обеспечить безопасность данных пользователя.

• Предоставить пользователю определённый функционал.

1. Основные этапы создания веб-сайтов

В целом, технология создания сайта всегда имеет схожую структуру. Она состоит из следующих шагов:

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

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

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

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

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

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

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

2. Технологии и инструменты используемые для создания веб-сайтов

Основные области разработки сайтов подразделяются на два лагеря: Backend и Frontend.

Фронтенд — все, что браузер может читать, выводить на экран и / или запускать. То есть это HTML, CSS и JavaScript.

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

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

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

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

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

3. Разработка сайта “Олимпус”

В качестве практической части представляю сайт “Олимпус”, который находится по адресу: olimpusclub.ru.

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

При разработке были поставлены следующие задачи:

• Публикация тестов преподавателей.

• Проведение тестов для студентов и проверка их знаний.

• Удобный просмотр итогов теста преподавателями.

• Доступность тестов в любой момент.

• Автоматизация процедуры проверки тестов.

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

Внешний вид сайта было решено сделать максимально простым и “лёгким” ввиду того, что далеко не все учебные заведения имеют возможность “Идти в ногу со временем” и модернизировать свою технику.

Внешний вид страницы олимпиад

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

Для реализации Frontend части были выбраны следующие инструменты:

Для HTML и CSS был выбран Bootstrap, поскольку он является одним из самых поддерживаемых и узнаваемых фреймворков. Так же он предоставляет огромное множество инструментов для вёрстки адаптивных макетов, ведь адаптивность – одна из ключевых особенностей моего сайта.

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

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

В качестве системы управления базой данных используется MySQL, поскольку в PHP уже реализовано огромное количество инструментов и библиотек для взаимодействия с этой СУБД. Конкретно на сайте “Олимпус”, применяется XPDO – это ORM, созданная разработчиками Modx, для безопасного взаимодействия PHP и MySQL, используя подготовленные запросы.

В роли CMS выступает довольно молодая система под названием – Modx, которая отличается User-friendly интерфейсом, что немаловажно, поскольку для преподавателей нет необходимости вникать в трудности интерфейса CMS для выкладывания своих олимпиад.

Заключение

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

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

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

Для организаторов тестов и олимпиад, у CMS Modx, имеются инструменты для отслеживания результатов пользователей.

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

Пример грамоты