Проектирование и веб-разработка

Тема: Введение в веб-проектирование и веб-разработку

Цели этого урока:
- определение понятия веб-сайт и веб-страница;
- выявление отличия между Интернетом и WWW;
- определение разницы между понятиями «веб-дизайн» и «веб-разработка»;
- роль веб-браузера при просмотре веб-страниц.

Начнем мы с определения основных понятий в области веб, таких как: сайт, URL-
адрес, скрипт, веб-браузер, веб-дизайн, веб-разработка.

Интернет и WWW
Интернет - это всемирная компьютерная сеть. Слово «интернет» происходит от
английских слов «Interconnected Networks».

Глобальная сеть Интернет обеспечивает доступ ко многим службам, таким как

электронная почта или веб-служба. Многие путают веб-службы с Интернетом...
Веб-служба или WWW или World Wide Web - это мультимедийная часть глобальной
сети Интернет. Веб состоит из миллионов страниц, которые могут отображаться на
экране пользователя, но не без помощи компьютерной сети - Интернет.
В WWW ресурсы указаны через специальные адреса, называемые URL-адресами
(Uniform Resource Locator). URL-адрес однозначно определяет Интернет-ресурс,
Проектирование и веб-разработка

такой как: веб-страница, веб-сервер, изображение и др. Точно так же как IDNP
человека однозначно идентифицирует его по всей нашей стране.
Вот несколько примеров URL-адресов:
https://www.microsoft.com или https://unsplash.com/photos/KTdzeb28jyo

Веб сайт
Веб-сайт представляет собой набор веб-страниц с мультимедийным контентом.
Мультимедиа включает в себя комбинацию текста, аудио, изображений, анимации,
видео или других форм интерактивного контента.
Веб-сайт обычно идентифицируется по доменному имени и публикуется как
минимум на одном веб-сервере. Доменное имя является частью URL-адреса.
Например, microsoft.com или facebook.com - это доменные имена.
Таким образом, веб-сайт может состоять из одной или нескольких веб-страниц,
между которыми установлены логические связи.

Веб-страница определяется веб-документом и является информационным

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

Кроме того, могут быть созданы сайты, позволяющие людям общаться, как
например: форумы, чаты, социальные сети и т. д., или чтобы убедить пользователя
в чем-то, или обучить пользователя, или предложить товары на продажу. Про
facebook.com – думаю все слышали, многие его используют чтобы пообщаться с
коллегами или знакомыми.
Пользователи получают доступ к веб-сайту с помощью специального приложения -
веб-браузера, такого как: Google Chrome, Internet Explorer, Mozilla Firefox, указав при
этом в адресной строке браузера доменное имя сайта, например: microsoft.com или
google. com или полное URL.

Веб-браузер, называемый и «клиентской программой», создает запрос веб-

сервера и запрашивает домашнюю страницу сайта, доменное имя которого было
Проектирование и веб-разработка

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

главной странице сайта, которую еще называют «стартовой страницей» на
английском - «HOME PAGE». Веб-сервер обработает запрос «клиента» и вернет веб-
ресурс или, в случае неправильного запроса, ответит сообщением об ошибке,
например «404 Not Found» - на экране сейчас представлено взаимодействие
клиента и сервера:

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

формальных языках, таких как: HTML, CSS, JavaScript, а затем представлять в своем
окне результат интерпретации этого кода.

Веб-дизайн
Понятия «веб-дизайн» и «веб-разработка» иногда путают, но они отличаются, а в
некоторых случаях эти два процесса даже пересекаются.
Английское слово «design» (дизайн) можно перевести на руcский как
«проектирование» и является одним из основных этапов в процессе разработки
веб-сайтов.
Проектирование и веб-разработка

Веб-проектирование относится как к проектированию структуры веб-сайта, то есть

из скольких страниц состоит сайт: из одной или нескольких страниц, так и к дизайну
каждого элемента страниц веб-сайта. Эта деятельность очень творческая и во
многом зависит от человека, который ее выполняет, включая разработку
прототипов или графических макетов для страниц сайта. В данном случае говорят
что создаётся «дизайн» страниц сайта.
Дальнейшая разработка продолжается версткой и созданием всех компонентов
сайта, с использованием языков разметки и стилизации.
Разработка может продолжаться программированием функциональности сайта
или написанием программных кодов с целью анимации различных компонентов
сайта или для повышения интерактивности страниц сайта. На этом этапе языки
программирования могут быть использованы для написания скриптов
интерпретируемых браузером, также называемых и «клиентскими» скриптами.
Также, можно написать скрипты, которые не могут быть интерпретированы
браузером, но «понимаются» сервером и которые генерируют какой-то веб-
контент. Этот код называется «серверным» скриптом.
Скрипт или сценарий представляет собой специальный программный код,
написанный на языке программирования, для выполнения которого требуется
особый контекст. Что влечет за собой понятие контекст? Скрипт, как правило,
встраивается в другой код, например, в HTML.
Веб-дизайн включает в себя несколько различных дисциплин из области
проектирования веб-сайтов, таких как:
Проектирование и веб-разработка

• графический веб-дизайн;
• дизайн пользовательского интерфейса - насколько удобно вам читать текст на

этих цветах фона?

Уверяю вас, ваши глаза не будут очень рады, потому что на этих фонах сложно
читать текст, написанный синим цветом;
• дизайн пользовательского опыта (”user experience design”) - нам необходимо
спроектировать сайт таким образом, чтобы пользователю было удобно и
понятно как - получать доступ к сайту и его компонентам;
• адаптивный дизайн - пользователь должен получать доступ к веб-контенту с
любого устройства отображающий веб-контент - будь то телефон, планшет,
экран ноутбука или экран ПК;
• ● и др.
Веб-дизайн частично пересекается с остальными этапами «веб-разработки», то
есть влияет и на верстку и на процесс программирования. Веб-разработка на
английском языке называется «web development», то есть разрабатывается то что
было запланировано, спроектировано, по отношению веб-сайта, на начальных
этапах.

Front-end разработчики
Фронтенд разработчики - это те люди, которые понимают, что делают веб-
дизайнеры, а также какие технологии будут использованы на стороне сервера. Их
цель - разработать удобные веб-интерфейсы, так чтобы обеспечить
функциональность веб-сайта.
Обычно фронтенд-разработчики используют три основных языка:
● HTML - язык разметки, используемый для определения содержимого веб-страниц;
● CSS - язык, используемый для стилизации веб-контента;
● и язык программирования JavaScript – который используется для добавления
интерактивности на сайт или для динамического создания веб-контента.
Или же они могут использовать другие новые технологии – как например
фреймворки или библиотеки, имеющие в основе эти три языка.
Проектирование и веб-разработка

Редакторы кода и браузеры. Их установка

Редакторы кода - это приложения, которые можно загрузить из Интернета и которые
используются для создания и редактирования файлов, содержащих различные
коды. Сегодня существует множество редакторов кода. Самыми
распространенными, для редактирования веб-документов, можно считать:
VisualStudioCode, NotePad++, Sublime etc. На изображении ниже представлен
редактор кода VisualStudioCode:

Проверьте, установлен ли на вашем компьютере какой-либо из этих редакторов.

Если нет - рекомендую установить VisualStudioCode. Его можно скачать по ссылке
https://code.visualstudio.com/download - после нажатия кнопки загрузки следуйте
стандартным инструкциям по установке.
Проектирование и веб-разработка

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

интерпретирования кодов, которые были написаны в процессе создания сайта.
Рекомендуется установить GoogleChrome, потому что он лучше всего
интерпретирует коды HTML, CSS и JavaScript на данный момент.
Но, в любом случае, вы должны иметь в виду, что вам нужно писать
кроссплатформенные коды.
GoogleChrome можно скачать бесплатно по ссылке
https://www.google.com/chrome/. Нажав на кнопку загрузки - следуйте стандартным
инструкциям по установке данного программного обеспечения на вашем
компьютере.
Проектирование и веб-разработка

ОК!... Подведем итоги этого урока:

● Интернет и веб-службы - это совершенно разные понятия. Доступ к веб-
службам можно получить через компьютерную сеть Интернет;
● Веб-сайт состоит из одной или нескольких веб-страниц, которые содержат:
текст, изображения, ссылки на другие страницы и т. д .;
● Доступ к веб-сайтам осуществляется через веб-браузеры, с указанием URL-
адреса в адресной строке;
● Веб-сайт сначала концептуализируется, затем проектируется - путем
разработки моделей, а затем страницы сайта создаются с использованием
разных формальных языков или других веб-технологий, как например
фреймворки. Весь процесс, состоящий из этих этапов, называется
разработкой веб-сайта;
● Для определения страниц веб-сайта создаются веб-документы, которые
имеют форму файлов, хранящихся на компьютере;
● Веб-страницы могут быть созданы с использованием языка разметки HTML,
стилизованы с помощью CSS, а некоторые динамические элементы - могут
быть добавлены с помощью языков программирования. Одним из таких
языков может быть JavaScript.

На следующем уроке мы разберем пример сайта, который можно будет создать на

этом курсе.