Муниципальное бюджетное общеобразовательное учреждение

Школа №1286

ИНДИВИДУАЛЬНЫЙ ПРОЕКТ
Веб-разработка или сайт для каждого

Работу выполнил:
Казначеев Даниил Алексеевич,
ученик 10 “А” класса
Руководитель:
Меркулов Александр
Александрович,
Учитель информатики

г. Москва, 2022
 СОДЕРЖАНИЕ

Актуальность, проблема, цели и задачи проекта....................................................................................2

Основы веб-разработки............................................................................................................................4
Как же создать сайт?.................................................................................................................................8
Практическая часть..................................................................................................................................16
Заключение..............................................................................................................................................16

Актуальность, проблема, цели и задачи проекта.

На протяжении моего повествования я постараюсь понятно и доступно

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

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

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

Основы веб-разработки

Все мы пользуемся интернетом, главной составляющей которого

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

Что же такое сайт?

Сайт – это совокупность страниц, объединенных одной общей темой,
дизайном, имеющих взаимосвязанную систему ссылок, расположенных в
сети Интернет.
Каждая страничка, на которую вы заходите в интернете, будь то
страница в соцсети, или онлайн магазин, и есть сайт
 Как каждый человек имеет уникальный набор хромосом, так каждый
ресурс имеет набор отличительных особенностей. В их число входят:
IP- адрес;
доменное имя;
название сайта;
перечень ключевых слов.
Каждая страница имеет собственный URL. Это адрес, по которому она
располагается в сети. По ключевым словам, поисковые машины распознают
контент, размещенный на страницах. Действуя по заданному алгоритму, они
выдают пользователям URL страниц, которые могут заинтересовать их.
Порядковый номер в выдаче определяет степень популярности сайта.

Какими бывают сайты?

Ресурс может принадлежать частному лицу или компании. Нет
официально утверждённого разделения на виды или типы сайтов. Но
существуют признаки, которые позволяют их классифицировать.
Сайт-визитка. Эта форма позволяет знакомить пользователей с вами и
вашей деятельностью. Небольшие и лёгкие страницы быстро
открываются. Они содержат концентрированную и очень полезную
информацию. Их используют и начинающие веб-мастера и акулы бизнеса.
Корпоративный сайт. Такой ресурс поможет сформировать позитивное
мнение о компании. Он доносит миссию бизнеса и знакомит с
деятельностью фирмы. Это уникальный инструмент привлечения новых
клиентов. На страницах излагается информация о продукте компании и
предоставляется возможность связи с менеджерами.
Промо-сайт. Структура такого ресурса напоминает буклет или рекламный
проспект. Эта форма используется для представления информации о
товаре или услуге. В объёме до 10 страниц размещается информация о
продукте и контакты для связи. На страницах активно используются
 инструменты наглядной рекламы: видеоролики, музыка, галереи картинок
и фото.
Сайт-витрина. Форма отлично подходит для бизнеса, связанного с
продажами. Сайт представляет собой сборный каталог продукции с
подробными описаниями каждого вида товаров. Удобный интерфейс
обеспечивает быстрое передвижение по страницам ресурса. Пользователь
может быстро выбрать и заказать нужный товар.
Интернет-магазин. Это сложный ресурс, который помимо каталога с
товарами включает в себя целую систему обслуживания клиента.
Пользователь может не только связаться с менеджером компании, но и
оформить заказ, выбрать форму оплаты и доставки покупки. Интернет-
магазины оснащаются такой функцией, как виртуальная корзина. Это
раздел, в который покупатель может откладывать понравившиеся товары,
чтобы потом вернуться к их рассмотрению.
Мало кто знает, но есть топ самых популярных сайтов, 3 место
которого занимает википедия, 2 место - самая популярная за рубежом соц
сеть - фейсбук, ну а первое - видеохостинг youtube, более 8 млрд посещений
каждый месяц!

Кто такой создатель сайтов?

Это весьма опытный человек, который должен владеть не только
написанием кода, но и уметь создавать дизайн, пересадить код на CMS,
выставить в интернет. Обычно, таких людей называют верстальщиками или
веб-разработчиками
Выделяют всего три типа веб-разработчика:
Frontend-разработчик — программист, который создаёт интерфейс,
видимую часть приложения. Она, как кассир в McDonald’s, берёт на себя
общение с клиентом, принимает заказы. Когда мы заходим на сайты, мы
обычно нажимаем на кнопки или отправляем товар в корзину. За всё это
отвечает frontend. Нас не интересует, что там внутри, — главное, чтобы всё
хорошо работало. Ну а если мобильная версия сайта по бокам вылезает за
экран — виноват frontend-разработчик.
Backend-разработчик — отвечает за внутренности, серверную часть
сайта. Как повар в McDonald’s, он принимает заказы от кассира, готовит и
передаёт обратно на кассу. Если вы поставили галочку напротив «китайские
чайники до 2 000 рублей», а сайт показал гаечные ключи — передайте привет
backend-разработчику.
Fullstack-разработчик — многостаночник, который умеет и backend, и
frontend. Как хозяин небольшого кафе, который принимает заказы, готовит и
разносит еду. Делает он всё немного медленнее, а навыки до идеала
прокачать сложно. Зато в курсе всех процессов — от и до. Опытные
разработчики говорят, что в fullstack проще прийти из backend.

Роль веб-разработчика на мировом рынке

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

Как же создать сайт?

А теперь отойдем от темы, связанной с профессией создателя сайтов, и

поговорим непосредственно о его создании
Я расскажу из каких этапов состоит создание сайта, а чуть позже мы
разберем каждый шаг поподробнее
Приступая к разработке, определитесь с целями создания ресурса,
продумайте структуру и его дизайн. Когда образ будущего сайта сложился,
выбирайте технологию создания. Здесь всё зависит от уровня ваших знаний
Конструктор. Использовать его могут люди без малейшего понятия о
веб-программировании. Создать ресурс можно за считанные минуты.
Недостатком конструкторов является невозможность переноса сайта на
другой хостинг, а также плохая адаптивность ресурса
CMS-система. Для того, чтобы разобраться с ней, потребуется немного
больше времени. Существую платные и бесплатные движки. Все они имеют
свои особенности, недостатки и преимущества. С помощью интерфейса
программы вы сможете модернизировать свой сайт
Самостоятельное создание. Этот способ требует знаний языков.
Сначала создаётся макет сайта. Затем нужно заняться его вёрсткой (задать
параметры отображения в браузере).
Шаги
Создание сайта начинается непосредственно с разработки обложки - то
есть дизайна. Далее следует воплощение картинки в код - этап верстки(без
учета программирования), называется он Front-End, то есть то, что находится
снаружи сайта. Третий этап - программирование, более сложный и
требующий ежедневной практики этап. Он включает в себя в большинстве
случаев работу с JavaScript и библиотеками. Минуя программирование идет
этап работы с базами данных. Подключение CMS - системы баз данных,
которая помогает заказчику изменять контент на сайте не используя код. И
заключительная часть - посадка сайта на домен и вывод его в интернет.
Конечно, можно пропустить 3 и 4 этапы, но без интересных анимаций,
скриптов, модальных окон и без возможности заказчику при отсутствии
знания кода изменить что-либо на своем сайте, создание сайта будет менее
прибыльное, хоть и проще. Но сделать качественный сайт, имея хорошее
денежное вознаграждение, потратив больше времени, гораздо лучше, чем,
сэкономив время, облегчить себе задачу, и не взять в оборот работу с базой
данных и JS.
ШАГ 1: Дизайн
Создание сайта начинается с разработки ДИЗАЙНА и идеи. Вкратце,
это совокупность графических элементов, шрифтов и цветов, реализованных
на сайте.
Уникальный дизайн стоит дороже, но и предполагает отрисовку с нуля,
полностью уникальную разработку под конкретный заказ. В зависимости от
профессионализма и/или политики компании веб-дизайнер либо
разрабатывает идею и концепцию дизайна полностью самостоятельно, либо
получает ряд требований (цвет, стиль и тому подобное), ожиданий и идей от
заказчика или творческого директора (арт-директора) и старается держаться
этого направления при разработке макета. Большинство заказчиков
ошибочно отождествляют веб-дизайнера и веб-мастера, поручая ему и
публикацию сайта.
Иногда дизайнер может предложить дизайн-решение на основе
шаблонов (своих или даже чужих), это ускоряет работу и обойдется
заказчику дешевле. Некоторые дизайнеры даже специализируются на
изготовлении дизайн-макетов для продажи в качестве готовых шаблонов,
которые затем могут быть куплены и использоваться менее опытными
дизайнерами или веб-мастерами для изготовления типовых сайтов (по сути,
без уникального дизайна). Иной раз разработкой веб-дизайна называют
небольшую перекомпоновку и адаптацию такого шаблона под конкретный
заказ.
Конечным продуктом работы веб-дизайнера является дизайн-макет:
картинка, представляющая предполагаемый будущий внешний вид страниц
сайта. Картинка эта является многослойной, где, на усмотрение дизайнера,
почти каждая деталь — отдельный слой, приложенный к другим слоям-
картинкам, за счёт чего может легко выполняться доработка, замена,
перекомпоновка и другие задачи. В зависимости от идеи и целей макет
может включать фотографии, сложные коллажи, иллюстрации, текстовые
слои, уникальные иконки. Для главной страницы и внутренних иногда
рисуются отдельные макеты с дополнениями или изменениями в
соответствии с тематикой страницы.
Большинство людей, зайдя на сайт, смотрят в первую очередь на его
дизайн - то есть на его структуру, сочетание цветов, картинок, и в целом как
выглядит сайт
Это делает дизайн чуть ли не самым важным этапом создания сайта.
Так как зачастую, если человеку понравится дизайн, то ему будет приятно
работать на этом сайте или просто посещать его
ШАГ 2: Верстка
За дизайном следует не менее важный этап - верстка. Это реализация
дизайна в виде кода. Этап верстки на первый взгляд кажется простым, но на
самом деле, создание основы сайта - дело непростое, так как присутствует
множество трудностей, что делает этот этап одним из самых сложных.
Код пишется зачастую с помощью специальных редакторов кода, но
можно работать в обычном блокноте, но визуально, с подсказками и
автозаполнением приятнее работать в Atom’е или в Sublime Text. Из
сложностей - нужно выучить два языка программирования - html и css,
которые имеют разное строение и напичканы различными функциями,
тегами, нововведениями. Но при этом связаны, и правильное использование
их вместе дает отличный результат реализации дизайна в код.
HTML (от английского HyperText Markup Language) — это язык
гипертекстовой разметки страницы. Он используется для того, чтобы дать
браузеру понять, как нужно отображать загруженный сайт. Язык состоит из
тегов — это своеобразные команды, которые преобразовываются в
визуальные объекты в браузере пользователя. Например, тег <img>
используется для размещения изображений на странице. У него есть
обязательный атрибут src, в котором указывается ссылка на файл.
Простыми словами, HTML — это каркас сайта. В нем могут быть
прописаны:
ссылки;
таблицы;
изображения;
блоки;
абзацы;
формы;
заголовки и так далее.
Также есть ограниченные возможности по изменению внешнего вида:
поменять цвет;
указать фоновое изображение;
изменить шрифт;
сделать текст жирным, курсивным, подчеркнутым, зачеркнутым и так
далее.
На данный момент выпущено пять версий языка. Первая версия была
разработана между 1986 и 1991 годами, а последняя (5.2) — в 2017.
Изначально он должен был стать независимым от каких-либо платформ —
отображаться везде одинаково. Но этого не случилось, потому что у
пользователей росли требования к мультимедиа.
 Для создания полноценной страницы все еще нужно подключить
таблицу стилей CSS и язык скриптов JavaScript. В CSS прописываются
отступы, выравнивания, позиционирование, прозрачность, границы, тени и
многое другое. Можно даже указать стили для разных состояний элемента —
например, поменять фон кнопки при наведении.
ШАГ 3: Программирование
Постверстальный этап является самым сложным, из-за языка, на
котором он строится - JavaScript, который в разы сложнее html и css вместе
взятых. JavaScript это язык, который позволяет вам применять сложные вещи
на web странице — каждый раз, когда на web странице происходит что-то
большее, чем просто её статичное отображение — отображение
периодически обновляемого контента, или интерактивных карт, или
анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. —
можете быть уверены, что скорее всего, не обошлось без JavaScript. Это
третий слой слоёного пирога стандартных web технологий, два из которых те
самые html и css. Ещё более увлекательным является функциональность,
созданная поверх основного языка JavaScript. Так называемые интерфейсы
прикладного программирования (API) предоставляют вам дополнительные
сверхспособности для использования в вашем коде JavaScript. API - это
готовые наборы блоков кода, которые позволяют разработчику
реализовывать программы, которые в противном случае было бы трудно или
невозможно реализовать. Они делают то же самое для программирования,
что готовые комплекты мебели делают для домашнего строительства -
гораздо проще брать готовые панели и скручивать их вместе, чтобы сделать
книжную полку, чем самому разрабатывать дизайн, ходить в поисках
правильной древесины, вырезать все панели необходимого размера и формы,
найти подходящие винты, а затем собрать их вместе, чтобы сделать книжную
полку.
На этапе программирования так же используются сторонние
библиотеки и дополнения к скриптам(JQuery, который и является API, о
котором было сказано выше). Все это нужно для создания визуала на сайте,
то есть анимаций, модальных окон, скриптов-взаимодействий с
пользователем.
ШАГ 4: Работа с базой данных
С этого этапа начинаются сложности, ведь здесь недостаточно выучить
что-то, а потом постоянно, не получая новых знаний использовать навык.
Нет. А что именно трудного встретится на этом этапе, сейчас разберемся.
Начнем с того, что же такое база данных.
База данных для сайта - это место на веб-сервере, где хранится контент
веб-ресурса. Каждая база состоит из таблиц, в которой размещены записи —
кортежи данных.
Данный этап безусловно облегчает задачу не верстальщику, а именно
заказчику. Ведь в большинстве своем, заказчики не знают языков
программирования, из-за этого у них порой возникают такие вопросы:
Как удалить неактуальную информацию?
Как обновить устаревшую фотографию?
Как изменить номер телефона организации?
На помощь приходит CMS система
Что же такое база данных?
Это место на веб-сервере, где хранится контент веб-ресурса. Каждая
база состоит из таблиц, в которой размещены записи — кортежи данных.
Что такое CMS?
Тут все еще проще! Это система управления сайта, являющееся веб-
приложением для обслуживания и облегчения работы заказчика с сайтом.
Какую бы CMS вы ни выбрали, работать над сайтом будете в специальном
личном кабинете — панели управления. Иногда это место также называют
админкой или консолью. В плане функционала сайта сразу после установки
CMS на сайте будет необходимый минимум, но недостающие функции
обычно можно подключить отдельно. Это делается при помощи дополнений.
Их ещё называют расширениями, плагинами или модулями. С их помощью
на сайт можно добавить, например, функционал интернет-магазина,
контактную форму, всплывающее окно, форму подписки на рассылку,
онлайн-чат, популярный в вашем регионе метод оплаты или доставки.
Сложно ли работать с базами данных?
Определенно да, но CMS системы в разы облегчают процесс, так как
есть уже готовое приложение, для работы с контентом сайта
ШАГ 5: Посадка сайта на домен и вывод его в интернет
Заключительная часть создания сайта является очень простой, ведь
особых навыков для вывода творения в интернет не нужно. Главное лишь
знать определения нескольких слов, первое из которых доменное имя. Это
определенная буквенная последовательность, обозначающая имя сайта или
используемая в именах электронных почтовых ящиков. Доменное имя
должно начинаться и заканчиваться буквой латинского алфавита или цифрой.
Промежуточными символами могут быть буквы латинского алфавита, цифры
или дефис.
Другими словами, домен – это адрес ресурса, который будут
вводить пользователи при обращении к сайту. Адрес домена состоит из двух
частей: доменов первого и второго уровня. По международному соглашению
каждой стране выделили доменное имя первого уровня, обозначающее
принадлежность сайта к определенному государству: .ru, .by, .uk, .ua, .fr и т.
д.
Вторым не менее важным словом является хостинг. Это место, где
физически находится сайт. Ресурс можно разместить на личном
персональном компьютере, но качественный хостинг требует глубоких
знаний в администрировании и должен быть высоконадежным, обеспечивать
высокую скорость доступа, защищен от DDoS-атак и т. д. Поэтому
целесообразней приобрести хостинг у специализированных компаний –
хостинг-провайдеров. Такие компании разместят Ваш сайт на сервере, на
котором установлено специальное программное обеспечение. Как правило,
хостер берет на себя обязанности по техподдержке хостинга и
администрированию сервера.
В итоге главное найти хороший хостинг и разместить на нем сайт,
предварительно привязав домен. Как я и говорил, ничего трудного!
 Практическая часть
В качестве практической части исследовательской работы я покажу вам
сайты, сделанные мною за время создания проекта, а также по просьбе моего
наставника и учителя информатики Меркулова А. А., я сделаю сайт-
портфолио лично для него, где будет находиться и своевременно обновляться
информация о нем.

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