Министерство образования и науки Республики Казахстан

Карагандинский университет имени Е.А. Букетова

Факультет математики и информационных технологий

Кафедра «Прикладная математика и информатика»

УЧЕБНАЯ ПРОГРАММА (SYLLABUS)

по дисциплине

«WEB-ТЕХНОЛОГИИ (Front End и Back End)»

для образовательной программы

«7М06102-IT-предпринимательство и цифровая экономика»

очная
курс: 2
семестр: 3

Караганда 2021
Составители: к.п.н., доцент кафедры ПМиИ Спирина Е.А.

Учебная программа предназначена для изучения веб-

технологий, предназначенных для разработки Front End и Back
End приложений, а именно технологий HTML, CSS, JavaScript;
знакомство с системами WCMS, которые позволяют управлять
текстовым и графическим контентом сайта, предоставляя
пользователю интерфейс для работы с контентом сайта.

Учебная программа по дисциплине «WEB-технологии (Front End

и Back End)» для образовательной программы «7М06102 IT-
предпринимательство»/ Сост.: Спирина Е.А. - Караганда: Изд-
во КарУ, 2021. - 64 с.

 Карагандинский университет, 2021.

1. Учебная программа очной формы обучения

Практические

контроля
обучения

Кредиты
Семестр

Лекции

Форма
СРСП
Срок

Курс

СРС
4 3 6 4 30 30 15 70 Экзамен

№ Наименование темы Лекции Практ СРСП СРС

1 Интернет-технологии 2 4 2
2 Структура Web технологий 2 2 1
3 Web приложения 4 2 1 20
4 Классификация Web 2 2 1
ресурсов
5 Структура Web сайта 2 4 2
6 Процесс разработки Web 6 4 2 30
сайта
7 Web дизайн 4 4 2
8 Инструменты разработки 4 4 2
Интернет приложений
9 Usability Web сайта 4 4 2 20
Всего (часов) 30 30 15 70

2. Данные о преподавателе:
Спирина Елена Александровна – к.п.н., доцент кафедры
«Прикладная математика и информатика» (корпус №2, кабинет
321). Электронный адрес: seа_spirina@[Link]

3. Пререквизиты:
Информационно-коммуникационные технологии
(бакалавриат)

3
 4. Постреквизиты:
Оформление и защита магистерской диссертации

5. Краткое описание дисциплины.

Целью дисциплины является формирование умений и
навыков использования современных интернет технологий в
профессиональной деятельности.
Основной целью учебной дисциплины является изучение
теоретических основ и приобретение практических навыков по
разработке интернет (веб) приложений на основе технологии
проектирования и разработки сайта.
В процессе обучения студент должен приобрести
компетенции:
Знание и понимание: виды и основные принципы
функционирования интернет и веб-технологий, технологий и
инструментов для разработки веб-ресурсов.
Применение знаний и понимания: обосновать выбор
инструментов для разработки веб-ресурса, владеть
технологиями для создания веб-ресурсов, использовать веб-
технологии в будущей профессиональной деятельности.
Формирование суждений: уметь применять веб-технологии
в профессиональной деятельности, интегрировать знания о веб-
технологиях при разработке прикладных приложений.
Коммуникативные способности: навыки креативного
мышления и творческого подхода к решению проблем и
ситуаций, навыки владения методами поиска и обработки
информации.
Навыки обучения: уметь работать в команде, правильно
отстаивать свою точку зрения, предлагать новые решения
проблемных ситуаций, навыки ежедневного приобретения
новых знаний для профессиональной деятельности.

4
6. График выполнения и сдачи заданий по дисциплине

Ссылка на список
рекомендованной

Форма контроля

рейтинг-шкале)

рейтинг-шкале)

Сроки сдачи
содержание
Виды работ

литературы

отчетности
(согласно

(согласно
задания
Цель и

Форма
Баллы
№

1 2 3 4 5 6 7 8
1 Контрольна Проверка [1-7], ТК1 50-100 ПЗ, 5 нед.
я работа знаний по [9], [12] письм
темам 1-3 енно
2 Практическ [1-7], ТК2 50-100 файлы 8 нед
Задания по
ая работа [9], [12]
темам 1-5
3 Практич [1-7], ТК3 50-100 файлы 11 нед
Задания по
еские [9], [12]
темам 6-9
работы
4 Проектн [1-13] ТК4 50-100 файлы 14 нед
ая
Разработка
работа
сайта
по курсу
согласно
(СРС1,
варианту
СРС2,
СРС3)
5 Проверка ТК5 50-100 устно 15 нед
За
своевременн
активнос
ой сдачи
ть
заданий

7. Карта учебно-методической обеспеченности дисциплины

№№ Наименование учебников, пособий, используемых по Кол-во
п/п курсу учебников,
пособий в
Научной
библиотек
е КарГУ
1. Основная литература
1 Дронов, В. А. HTML 5, CSS 3 и Web 2.0. Разработка 1
современных Web-сайтов [Текст] : практическое пособие /
Владимир Дронов. - СПб. : БХВ-Петербург, 2011. - 414 с. :
ил. - (Профессиональное программирование). -

5
2 Прохоренок, Н. А. HTML, JavaScript, PHP и MySQL: 1
джентльменский набор Web-мастера / Николай
Прохоренок. - 3-е изд., перераб. и доп. - СПб. : БХВ-
Петербург, 2011. - 890 с. : ил. + 1 эл. опт. диск (CD-ROM).
- (Профессиональное программирование).
3 Гоше, Х. Д. 1
HTML5. Для профессионалов [Текст]: научное
издание / Хуан Диего Гоше. - 2-е изд. - СПб.: Питер,
2015. - 559 с.: ил. - (Для профессионалов). - Пер. изд.
: [Link] masterminds / [Link]
4 Пьюривал Сэмми. 0
Основы разработки веб-приложений (Learning Web
App Development). - СПб: Питер, 2015 – 272 с.
5 Дунаев, В. JavaScript: учебное пособие / В. Дунаев. - 2-е 1
изд. - СПб. : Питер, 2010. - 394 с.
6 Дженкинс, С. М. Web-дизайн: научное издание / пер. с 2
англ. . - М. : Эксмо, 2010. - 477 с.
7 Jeremy Keith. HTML5 For Web Designers. – New-N:
A Book Apart
2. Дополнительная литература
8 Евсеев, Д. А. Web - дизайн в примерах и задачах 1
[Текст] : учеб. пособие / Д. А. Евсеев, В. В.
Трофимов ; под ред. В. В. Трофимова. - М. :
КНОРУС, 2010. - 263 с.
9 Основы web - технологий [Текст]: учеб. пособие / 2
П.Б. Храмцов [и др.]. - 2-е изд., испр. - М.:
Интернет-Университет Информационных
технологий: Бином. Лаборатория Знаний, 2010. - 374
с
10 Чебыкин, Р. И. 1
Самоучитель HTML и CSS. Современные
технологии [Текст] : учеб. пособие / Ростислав
Чебыкин. - СПб.: БХВ-Петербург, 2008.
2.1 Список периодических изданий
11 Журнал КомпьютерПресс // [Link]
2.2 Список источников на электронных носителях
12 [Link]
13 [Link]
2.3 Интернет источники
14 Http://[Link]/Downloading_jQuery#Download_jQuery

6
 8. Лекционный комплекс (тезисы лекций)

Тема 1. Интернет-технологии
Интернет — это объединение взаимосвязанных сетей в
мировом масштабе.
Интернет - всемирная система интегрированных
компьютерных сетей для хранения и передачи информации.
Интернет можно рассматривать как «сеть сетей», каждая из
которых управляется независимым оператором - провайдером
услуг Интернета.
Это самая большая сеть в мире, которая не имеет единого
центра управления, но работает по единым правилам и
предоставляет своим пользователям единый набор услуг. С
точки зрения пользователей, Интернет представляет собой набор
информационных ресурсов, распределенных по различным
сетям, включая сети интернет-провайдеров, корпоративные сети,
сети и отдельные компьютеры домашних пользователей.
Каждый отдельный компьютер в данной сети называется
хостом.
Интернет имеет следующие особенности:
- Интернет - это всемирная глобальная система
взаимосвязанных компьютерных сетей.
- Интернет использует стандартный интернет-протокол -
TCP / IP.
- Каждый компьютер в интернете идентифицируется по
уникальному IP-адресу.
- Система доменных имен используется для присвоения
имени IP-адресу, чтобы пользователь мог найти компьютер по
имени.
- Интернет доступен каждому пользователю во всем мире
Интернет обязан своим появлением единой сети ARPANET,
которая началась как скромный эксперимент с тогдашней новой
технологией коммутации пакетов.
Интернет - это децентрализованная сеть, которая имеет
свои преимущества и недостатки.
1. Преимущества:

7
 Простота создания интернета путем заключения
соглашения между двумя провайдерами.
2. Недостатки:
Сложность обновления интернет-технологий и услуг,
поскольку требуются согласованные усилия всех поставщиков
услуг.
Низкая надежность интернет-услуг.
Ответственность за работоспособность отдельных
сегментов этой сети лежит на интернет-провайдерах.
Существуют различные типы интернет-провайдеров:
Просто поставщик Интернет-услуг выполняет функцию
транспорта для конечных пользователей - передает свой трафик
в сети других поставщиков Интернет-услуг;
Provider Интернет-провайдер имеет свои информационные
и справочные ресурсы, предоставляя свой контент в виде веб-
сайтов;
Provider Хостинг-провайдер предоставляет свои
помещения, каналы связи и серверы для размещения внешнего
контента;
Provider поставщик услуг доставки контента доставляет
контент только нескольким точкам доступа, чтобы повысить
скорость доступа пользователей к информации;
Provider поставщик услуг поддержки приложений
предоставляет клиентам доступ к крупным универсальным
программным продуктам, таким как SAP R3;
- поставщик биллинговых услуг обеспечивает оплату
счетов в интернете.
Интернет - это очень сложная сеть, и, соответственно, это
сложная задача организации взаимодействия между сетевыми
устройствами. Разложение используется для решения таких
проблем. Разбиение сложной задачи на несколько простых
задач-модулей. Одним из понятий, которые реализуют
декомпозицию, является многоуровневый подход. Такой подход
позволяет разрабатывать, тестировать и модифицировать
каждый отдельный уровень независимо от других уровней.
Иерархическая декомпозиция позволяет, двигаясь в направлении
от более низкого уровня к более высокому, перейти к более
простому представлению решаемой проблемы.

8
 Поскольку сеть представляет собой соединение
разнородного оборудования, проблема совместимости является
актуальной, что, в свою очередь, требует согласия всех
производителей общепринятых стандартов. Открытая система -
это система, построенная в соответствии с открытыми
спецификациями.
Интернет был построен в полном соответствии с
принципами открытых систем. В разработке стандартов этой
сети приняли участие тысячи сетевых специалистов из
университетов, научных организаций и компаний. Результат
работы по стандартизации воплощен в документах RFC. RFC
(англ. Request for Comments) - это документ из серии
пронумерованных информационных документов в Интернете,
содержащих технические спецификации и стандарты, широко
используемые в World Wide Web.
Стек протоколов TCP/IP изначально ориентирован на
глобальные сети. Это позволяет создавать глобальные сети,
компьютеры в которых связаны друг с другом различными
способами - от высокоскоростных оптоволоконных кабелей и
спутниковых каналов до телефонных линий с коммутируемым
доступом. TCP/IP довольно условно соответствует модели OSI и
содержит 4 уровня. Уровень стека приложения соответствует
трем верхним уровням модели OSI: приложению,
представлению и сеансу.
Несмотря на то, что аппаратное и программное обеспечение
в сетях TCP / IP использует IP-адреса для идентификации
хостов, пользователи предпочитают символические имена
(доменные имена).
Интернет-адресация
Три типа адресов используются для идентификации
сетевых интерфейсов:
- аппаратные адреса или MAC-адреса или физический адрес
- сетевые адреса (IP-адреса);
- символьные (доменные) имена.
Для установления соответствия между доменным именем и
IP-адресом используется специальная система доменных имен
DNS (Domain Name System), которая основана на таблицах
соответствия, созданных администраторами сети.

9
 Сети TCP / IP используют систему доменных имен, которая
имеет иерархическую (древовидную) структуру. Эта структура
имен напоминает иерархию имен, используемых во многих
файловых системах. Запись доменного имени начинается с
самого младшего компонента, затем после точки следует
следующая наиболее значимая символьная часть имени и так
далее. Последовательность заканчивается корневым именем,
например: [Link]. Набор имен с несколькими
старшими компонентами, совпадающими, образует домен имен.
Сеть WWW формирует миллионы веб-серверов,
расположенных по всему миру. Веб-сервер - это программа,
которая работает на сетевом компьютере и передает данные по
протоколу HTTP.
Для идентификации ресурсов (часто файлов или их частей)
в WWW используются идентификаторы ресурсов (URI) (Uniform
Resource Identifier). Чтобы найти ресурсы в этой сети, вы
используете локаторы ресурсов URL (Uniform Resource Locator).
Такие локаторы URL являются комбинацией URI и системы
DNS.
Имя домена (или IP-адрес) является частью URL-адреса,
указывающего компьютер (его сетевой интерфейс), на котором
работает программа веб-сервера.
Интернет Услуги
Услуги связи:
Электронная почта (E-mail), используется для отправки
электронных сообщений через Интернет;
Телеконференции, или группы новостей (Usenet),
предлагает форум для людей, чтобы обсудить темы общих
интересов
Сервис Telnet, предназначенный для управления
удаленными компьютерами в режиме терминала;
IRC-сервис, позволяет людям со всего мира общаться в
режиме реального времени (чат);
Информационно-поисковые услуги
Сервис FTP - система файловых архивов, обеспечивающая
хранение и передачу файлов различных типов;
Потоковое мультимедиа.

10
 World Wide Web (WWW, W3, «World Wide Web») -
гипертекстовая (гипермедиа) система, предназначенная для
интеграции различных сетевых ресурсов в единое
информационное пространство.
На клиентском компьютере для просмотра информации,
получаемой с веб-сервера, используется специальная программа
- веб-браузер. Основной функцией веб-браузера является
отображение гипертекстовых страниц (веб-страниц). Для
создания гипертекстовых страниц в Интернете изначально
использовался HTML. Несколько веб-страниц образуют веб-
сайт.
Литература: [1-7], [12]

Тема 2. Структура Web технологий

Техническое определение: Всемирная паутина - это все
ресурсы и пользователи в Интернете, которые используют
протокол передачи гипертекста (HTTP).
Основные компоненты технологии WWW:
1) Язык гипертекстовой разметки HTML (HyperText
Markup Language). HTML включает в себя набор команд,
используемых для описания структуры документа. С помощью
HTML документ делится на соответствующие логические
компоненты: абзацы, заголовки, списки и т. Д.
2) универсальный способ адресации ресурсов по сетевому
URL - унифицированный указатель ресурса - универсальный
указатель ресурса, т.е. обеспечивает адресацию (ссылки) на
информационные ресурсы Интернета.
3) протокол обмена гипертекстовой информацией HTTP
4) Универсальный интерфейс шлюзов CGI - используется
для организации диалога с пользователем
Основным протоколом сети гипертекстовых веб-ресурсов
является протокол HTTP. Он основан на взаимодействии
«клиент-сервер», то есть предполагается, что:
1. Клиент-клиент, инициирующий соединение с сервером-
провайдером, отправляет ему запрос;
2. Провайдер-сервер, получив запрос, выполняет
необходимые действия и возвращает клиенту ответ с
результатом.

11
 Существует два возможных способа организации работы
клиентского компьютера:
Thin Тонкий клиент - это клиентский компьютер, который
передает все задачи для обработки информации на сервер.
Примером тонкого клиента может служить компьютер с
браузером, используемый для работы с веб-приложениями.
- Толстый клиент, с другой стороны, обрабатывает
информацию независимо от сервера, используя последний в
основном только для хранения данных.
HTTP (протокол передачи гипертекста - RFC 1945, RFC
2616) - это протокол прикладного уровня для передачи
гипертекста.
Центральным объектом в HTTP является ресурс, на
который указывает URI в запросе клиента. Как правило, этими
ресурсами являются файлы, хранящиеся на сервере.
Все программное обеспечение для работы с протоколом
HTTP делится на три основные категории:
• Серверы - провайдеры хранения и обработки информации
(обработки запросов).
• Клиенты - конечные пользователи серверных услуг
(отправка запросов).
• Прокси-серверы для поддержки работы транспортных
служб.
Например, основными клиентами являются браузеры:
Internet Explorer, Opera, Mozilla Firefox, Netscape Navigator и
другие. Наиболее популярные реализации веб-серверов: Internet
Information Services (IIS), Apache, lighttpd, nginx. Наиболее
известными реализациями прокси-серверов являются Squid,
UserGate, Multiproxy, Naviscope.
«Классическая» схема HTTP-сессии выглядит следующим
образом.
1. Установите TCP-соединение.
2. Запрос клиента.
3. Ответ сервера.
4. Ошибка соединения TCP.
Таким образом, клиент отправляет запрос на сервер,
получает от него ответ, после чего взаимодействие
прекращается. Как правило, клиентский запрос является

12
требованием для отправки документа HTML или другого
ресурса, а ответ сервера содержит код для этого ресурса.
HTTP-запрос, отправляемый клиентом на сервер, включает
следующие компоненты.
После получения запроса от клиента сервер должен
ответить на него. Знание структуры ответа сервера необходимо
для разработчика веб-приложения, поскольку программы,
которые запускаются на сервере, должны независимо
генерировать ответ клиенту.
Для уникальной идентификации ресурсов в Интернете
используются уникальные идентификаторы URL.
Унифицированный идентификатор ресурса (URI) - это
короткая последовательность символов, которая
идентифицирует абстрактный или физический ресурс. URI не
указывает, как извлечь ресурс, а только идентифицирует его.
Это позволяет описывать ресурсы с использованием RDF
(Resource Description Framework), которую нельзя получить
через Интернет (имена, имена и т. Д.). Наиболее известными
примерами URI являются URL и URN.
• URL (Uniform Resource Locator) - это URI, который,
помимо идентификации ресурса, также предоставляет
информацию о местонахождении этого ресурса.
• URN (Uniform Resource Name) - это URI, который
идентифицирует ресурс в определенном пространстве имен, но,
в отличие от URL, URN не указывает местоположение этого
ресурса.
URL имеет следующую структуру:
<Схема>: // <логин>: <пароль> @ <хост>: <порт> / <путь
URL>
где:
• Схема - схема доступа к ресурсу (обычно это сетевой
протокол);
• логин - имя пользователя, используемое для доступа к
ресурсу;
• пароль - пароль, связанный с указанным именем
пользователя;
• host - полностью зарегистрированное доменное имя хоста
в системе DNS или IP-адрес хоста;

13
 • порт - порт хоста для подключения;
• URL-путь - указание информации о местонахождении
ресурса.
Распространенные протоколы (протоколы) URL включают
протоколы: ftp, http, https, telnet, gopher, mailto, news, file.
HTTP-сервер не запоминает историю клиентских запросов,
каждый запрос обрабатывается независимо от других, и у
сервера нет возможности определить, исходят ли запросы от
одного и того же клиента или разных клиентов.
Механизм cookie позволяет серверу хранить информацию
на компьютере клиента и извлекать ее оттуда.
Инициатором куки является сервер. Если в ответе сервера
присутствует поле заголовка Set-cookie, клиент видит это как
команду для записи куки. В будущем, если клиент обращается к
серверу, с которого он ранее получил поле заголовка Set-cookie,
в дополнение к другой информации, он передает данные cookie
на сервер. Для передачи указанной информации сервер
использует поле заголовка Cookie.
Литература: [1-7], [12]

Тема 3. Web приложения

Веб-приложение - это приложение, в котором клиент
является браузером, а сервер - веб-сервером.
Результатом веб-приложения является веб-страница,
отображаемая в окне браузера. В этом случае само веб-
приложение может работать как на клиентском компьютере, так
и на сервере.
1. Программы, работающие на клиентской машине
Одним из типов программ, предназначенных для
выполнения на клиентском компьютере, являются скрипты,
например, JavaScript (VBScript). Исходный текст скрипта
является частью веб-страницы, поэтому скрипт JavaScript
передается клиенту вместе с документом, в который он включен.
При обработке документа HTML браузер обнаруживает
исходный текст скрипта и запускает его для выполнения.
Для всех программ, которые передаются с сервера на
клиентские машины и запускаются для выполнения,

14
предъявляется одно общее требование: эти программы должны
быть защищены от доступа к ресурсам компьютера, на котором
они работают. Это требование полностью оправдано.
В конце концов, отправка по сети и запуск Java-апплетов и
JavaScript-скриптов происходит автоматически без
вмешательства пользователя, поэтому работа этих программ
должна быть абсолютно безопасной для компьютера. Другими
словами, языки, предназначенные для создания программ,
запущенных на клиентском компьютере, должны быть
совершенно непригодны для написания вирусов и подобных
программ.
2. Программы, работающие на сервере
Код программы, запущенной на сервере, не передается
клиенту. При получении специального запроса от клиента,
предполагающего выполнение такой программы, сервер
запускает ее и передает параметры, включенные в запрос.
Инструменты для генерации такого запроса обычно включены в
HTML-документ.
Программа подготавливает результаты своей работы в виде
HTML-документа и передает его на веб-сервер, а последний, в
свою очередь, дополняет полученные данные HTTP-заголовком
и передает их клиенту.
Чтобы расширить возможности взаимодействия клиент-
сервер по протоколу HTTP, помимо создания клиентских
расширений стандартных функций, предоставляемых языками
разметки и браузерами, вы также можете разрабатывать
приложения, плагины и сценарии, расширяющие возможности
Интернета. сервер на стороне веб-сервера.
Плагин (plug-in) - это независимо скомпилированный
программный модуль, динамически подключаемый к основной
программе, предназначенный для расширения или
использования его возможностей. Обычно выполняется как
общие библиотеки.
Скрипт (скрипт, скрипт) - это программа, которая
автоматизирует некоторые задачи, которые пользователь
выполняет вручную, используя программные интерфейсы.
Веб-сервис - это программная система с идентификатором
URI, открытые интерфейсы которой определены на языке XML.

15
Описание этой программной системы может быть найдено
другими приложениями, которые могут взаимодействовать с ней
в соответствии с этим описанием через сообщения на основе
XML и передаваться по интернет-протоколам. Веб-сервис - это
единица модульности при использовании сервис-
ориентированной архитектуры приложений.
Веб-приложения - миграционные программы
Программа навигации (браузер), выполняемая на рабочей
станции, выполняет следующие действия:
- визуализирует (отображает) веб-страницы и выполняет
переходы на другие ресурсы
- активировать программы на сервере
- интерпретирует и запускает программы, связанные с веб-
документом, которые передаются вместе с этим документом с
сервера.
Этот тип распределенной обработки информации позволяет
сконцентрировать всю систему приложений непосредственно на
сервере.
Существует три основных типа программ, которые можно
связать с веб-документом и перенести на рабочую станцию для
выполнения:
- Java-апплеты, подготовленные и используемые с
использованием технологии Java;
- Программы написаны на скриптовом языке JavaScript,
VBScript, VRML;
- программные компоненты ActiveX Controls,
соответствующие технологии ActiveX.
Доступ к реляционным базам данных
В архитектуре клиент-сервер, основанной на веб-
технологии, веб-сервер доставляет информацию из различных
источников, а затем с помощью веб-браузера предоставляет ее
пользователю.
Прямая интеграция разнородной информации
осуществляется во время визуализации и интерпретации веб-
документов, что реализуется веб-навигатором при
взаимодействии с веб-сервером, а также другими серверами для
предоставления информационных ресурсов.

16
 Взаимодействие веб-навигатора с сервером системы
управления базами данных (сервером СУБД) может
осуществляться двумя основными способами:
- доступ к серверу СУБД через веб-сервер;
- доступ к серверу СУБД напрямую.
Литература: [1-7], [12]

Тема 4. Классификация Web ресурсов

Большинство ресурсов Всемирной паутины
гипертекстовые. Гипертекстовые документы, размещенные в
World Wide Web, называются веб-страницами.
Несколько веб-страниц, объединенных общей темой,
дизайном, а также связанными ссылками и обычно
расположенных на одном веб-сервере, называются веб-сайтами.
Портал - многокомпонентная разветвленная структура,
состоящая из функционально автономных сайтов независимых
организаций или подразделений корпоративной структуры.
Веб-сайты создаются с использованием языка
гипертекстовой разметки HTML, каскадных таблиц стилей (CSS)
и сценариев (сценарии на JavaScript, PHP и т. Д.). HTML
используется для создания (разметки) структуры документа или
веб-страницы, таблицы стилей используются для внешнего
дизайна (стилизация, оформление) и позиционирования
элементов документа, а сценарии используются для обеспечения
интерактивности и динамичности веб-страниц. что касается
обработки данных, которыми обмениваются браузер и веб-
сервер.
Типы классификаций веб-ресурсов
Существует много разных подходов к классификации веб-
ресурсов. Классификация отражает не только тему, но и
технологию ресурса. Универсальной классификации не
существует.
Из-за разнообразия веб-ресурсов на практике удобно
классифицировать в соответствии с определенным
определяющим атрибутом, а именно:
доступностью услуг;
по месту нахождения;

17
 в соответствии со схемой представления информации, ее
объемом и категорией задач;
на технологии отображения;
в соответствии с особенностями примененного макета.
Классификация веб-ресурсов по доступности сервиса
По доступности услуг веб-ресурсы делятся на:
открыто - все сервисы полностью доступны для любых
посетителей и пользователей;
полуоткрытый - вы должны зарегистрироваться для
доступа;
закрытые - полностью закрытые официальные сайты
организаций (в том числе корпоративных сайтов), персональные
сайты физических лиц. Доступ к новым пользователям обычно
предоставляется через так называемые приглашения.
Классификация веб-ресурсов по физическому
расположению:
общедоступные интернет-сайты.
локальные сайты - доступны только внутри локальной
сети
Классификация веб-ресурсов по типу представления
информации
Информационные ресурсы:
Тематический сайт - это сайт, который предоставляет
конкретную узко тематическую информацию по любой теме.
Тематический портал - это очень большой веб-ресурс,
который предоставляет исчерпывающую информацию по
конкретным темам.
Интернет-представительства:
Визитная карточка сайта - содержит наиболее
распространенную информацию о владельце сайта.
Представительский сайт - визитная карточка с
расширенным функционалом: подробное описание услуг,
портфолио, отзывы, форма обратной связи и т. Д.
Корпоративный сайт - содержит полную информацию о
владельце компании, услугах / продуктах, событиях в жизни
компании. Он отличается от сайта-визитки и представительского
сайта полнотой предоставляемой информации, часто содержит
различные функциональные инструменты для работы с

18
контентом (поиск и фильтры, календари событий, фотогалереи,
корпоративные блоги, форумы). Он может быть интегрирован с
внутренними информационными системами компании-
владельца. Может содержать закрытые разделы для
определенных групп пользователей - сотрудников, дилеров,
контрагентов и т.д.
Каталог товаров - каталог содержит подробную
информацию о товарах / услугах, сертификаты, технические и
потребительские данные, обзоры экспертов и т. Д., Которые
нельзя разместить в прайс-листе.
Интернет-магазин - это сайт с каталогом товаров, с
помощью которого покупатель может заказать нужный ему
товар.
Промосайт - сайт о конкретном бренде или продукте; такие
сайты содержат исчерпывающую информацию о бренде и
различных акциях.
Квест-сайт - это веб-ресурс, на котором организован
конкурс для решения последовательно взаимосвязанных
логических головоломок.
Веб-сервис - сайт, созданный для выполнения каких-либо
задач или предоставления услуг в сети WWW.
Доска объявлений - ресурс, на котором можно разместить
публичные объявления о товарах или услугах, также можно
оставить любую информацию краткого содержания.
Каталог сайтов - это ресурс, на котором размещаются сайты
и блоги. Каталоги могут помочь в продвижении ресурса,
размещенного в каталоге сайтов.
Поисковые сервисы - например, Yahoo!, Google, Bing,
Yandex.
Почтовый сервис - например, [Link] и Gmail.
Одноранговая служба обмена файлами - например,
Bittorrent.
Облачное хранилище - например, OneDrive.
Сервис редактирования данных - например, Google Docs.
Хостинг фотографий - например, Picnik, ImageShack,
Panoramio, Photobucket.
Видео-хостинг - например, YouTube, Dailymotion.
Социальные сети - например, Facebook, ВКонтакте.

19
 Специализированные социальные сети - например,
MySpace, Flickr
Интернет-портал или веб-портал - многокомпонентная
разветвленная структура, состоящая из функционально
автономных сайтов.
Концепция веб-порталов заключается в предоставлении
максимального количества интернет-сервисов (например, поиск,
электронная почта, новостные ленты и т. Д.) В одном месте для
привлечения наибольшего числа пользователей.
Литература: [1-7], [12]

Тема 5. Структура Web сайта

Любая веб-страница содержит набор стандартных
элементов, которые являются важными компонентами каждого
интернет-ресурса. Конечно, ассортимент и количество таких
объектов может варьироваться в зависимости от тематической
направленности сайта.
Основные элементы веб-страницы
1. Заголовок / Логотип (Кепка)
2. Поиск
3. Рекламный баннер
4. Контент / Контент (текстовое поле)
5. Элементы навигации
6. Информация о разработчике сайта
7. Счетчик посещаемости
Первым элементом веб-страницы является ее заголовок.
Это может быть выполнено как в текстовом, так и в
графическом виде, однако в обоих случаях оно должно быть
расположено вверху документа.
Логотип или название сайта находится на титульной
(первой) странице.
Непосредственно под/над заголовком документа, как
правило, есть место, зарезервированное для размещения
рекламного баннера.
Размещение баннера точно в верхней части веб-страницы в
большинстве случаев является необходимым условием для
регистрации сайта в службах обмена баннерами - системах,

20
которые рекламируют созданный вами ресурс в обмен на показ
других участников сети обмена баннерами на страницах вашего
сайта. сайт.
Текстовое поле является основной частью документа -
разделом, в котором размещается семантическое содержание
страницы: информативный информационный текст и
иллюстрации (Контент).
Элементы навигации - гиперссылки, связывающие этот
документ с другими разделами сайта. Элементы навигации
могут быть выполнены в виде текстовых строк, графических
объектов, то есть кнопок или активных компонентов, таких как
Java-апплеты. Элементы навигации - это те же кнопки, которые
могут реагировать на движения мыши, выполняя любые простые
действия при наведении на них курсора (включение подсветки,
создание эффекта «щелчка», изменение формы и т.д.).
Внизу документа принято публиковать информацию о
разработчике сайта и адреса электронной почты, по которым
посетители ресурса могут отправлять свои отзывы, предложения
и пожелания владельцам страниц.
Если веб-страница является исходным документом, в его
нижней части также располагается счетчик посещений -
небольшой скрипт, который вызывает скрипт CGI,
установленный на сервере, который записывает каждое
открытие документа в браузере пользователей, изменяя значение
счетчик индикатора.
Счетчик посещений устанавливается только на первой
странице, вызываемой при доступе к сайту, в других документах
ресурса он отсутствует. Также не рекомендуется размещать
несколько разных счетчиков на одной странице.
Типы позиционирования элементов: слева / справа / сверху /
Смешанное позиционирование элементов навигации.
Набор тематических заголовков с документами,
распределенными по соответствующим разделам и
предварительно разработанными гиперссылками между всеми
страницами ресурса, называется логической структурой сайта.
Физическая структура, напротив, подразумевает алгоритм
размещения физических файлов в подкаталогах папки, в которой
опубликован ваш сайт.

21
 Литература: [1-7], [12]

Тема 6. Процесс разработки сайта

Условно процесс создания сайта (веб-проекта) можно
разделить на 4 этапа:
- Исследования и Планирование
- Дизайн
- Разработка
- Тестирование и запуск, поддержка
Этап 1. Исследования и планирование
Шаг 1. Определение цели проекта
Созданный веб-сайт может быть предназначен для решения
одной из следующих задач.
• Привлекать новых потребителей.
• Обеспечить существующих потребителей новыми
способами покупки товаров.
• Сделать каталоги товаров и услуг доступными в
Интернете.
• Предоставлять общественности информацию о компании.
Шаг 2. Создание идеи проекта
На этом этапе необходимо определить предмет проекта
(сайт, сервис).
Далее в соответствии с выбранной темой необходимо
выполнить следующие действия:
1) Определение содержания:
- Соберите соответствующие материалы: текст, графика.
- собирать текст, логотипы, фотографии, иллюстрации,
аудиофайлы и другие данные.
- Определите, какая информация является наиболее важной
и как она должна быть размещена на веб-сайте.
- Распределить данные по темам.
- Рассмотрим способ представления данных.
- Определите, сколько содержимого узла должно быть
текстом и сколько изображений должно быть представлено на
узле.
- Определить, нужны ли дополнительные материалы,
графические данные, таблицы или интерактивные компоненты?
2) Определение размера сайта

22
 - Оценить (определить) объем информации и подумать о
том, как лучше всего распространять ее на сайте.
- Количество информации определяет количество веб-
страниц, их внешний вид и инструменты навигации.
- Подумайте, как эффективно представить данные на сайте.
Шаг 3 Разработка структуры проекта (Карта сайта)
3) разработка информационной архитектуры (логической
структуры) сайта
Информационная архитектура позволяет организовать
содержимое веб-сайта и определяет, как пользователь получает
доступ к информации.
Шаг 4. Планирование и управление проектом.
- Разработка требований проекта,
- Определение команды разработчиков проекта (команда)
- определение бюджета
- разработка графика работ и согласование с заказчиком
- Формирование физической структуры сайта
Этап 2. Дизайн
Шаг 1. Разработка каркаса проекта
После определения информационной структуры проекта
необходимо составить макет (каркас) проекта (wireframe, mock-
up).
Макет (wireframe) - это визуальное представление будущего
интерфейса сайта.
Но, в отличие от шаблона, макет не содержит таких
элементов дизайна, как цвет, логотипы и т.д.
Макет описывает, какие элементы будут размещены на
странице и как они будут расположены.
Макет - это своего рода эскиз будущего сайта. Вы можете
использовать один из доступных онлайн-сервисов для создания
макетов.
Шаг 2. Визуальный дизайн (Дизайн / Визуальный дизайн /
Визуальный стиль)
После создания макета проекта вы можете перейти
непосредственно к созданию дизайна. На этом этапе создается
шаблон страницы.

23
 Основным назначением шаблона является визуализация
структуры страницы, ее содержимого, а также отображение
основных функциональных возможностей.
В отличие от макета, шаблон использует элементы дизайна.
1) Определение цветовой схемы проекта.
Для работы с выбранным цветом и составления цветовой
палитры сайта вы можете использовать следующие
инструменты:
Color Scheme Designer 3 ([Link]
3.5/)
Шаг 3. Принципы интерактивного и визуального дизайна
2) Визуальные принципы Просмотр страницы
- схема просмотра страницы (наиболее естественный
способ движения глаз на странице): Z-pattern и F-pattern
- визуальные направляющие. Визуальные направляющие
называются декоративными элементами страницы, которые
перенаправляют глаза пользователя на различные элементы
дизайна, формы, кнопки и т. д.
Шаг 4. Тенденции веб-дизайна
При разработке визуального дизайна сайта необходимо
учитывать современные тенденции веб-дизайна.
Шаг 5. Создание контента
- Написание нового контента. Этот этап включает создание
привлекательных и броских заголовков, написание и
редактирование текста, компиляцию существующих текстов и т.
Д.
- подготовка контента для переноса на сайт
- SEO-оптимизация
Этап 3. Верстка (Layout) и разработка сайта
Шаг 1. Макет сайта
Макет сайта в соответствии с разработанной картой сайта.
Требуемый тип макета сайта выбран.
Типы сайтов MarkUp (верстка)
1) Резиновая и фиксированная компоновка
Фиксированный макет означает, что независимо от
разрешения экрана пользователя ваш сайт всегда будет занимать
одну и ту же ширину.

24
 «Резиновая» верстка означает, что страница сайта будет
занимать все доступное пространство на экране пользователя,
подстраиваясь под разрешение.
В настоящее время определяют:
Отзывчивый веб-дизайн, RWD - концепция вписывается в
понятие «резиновая» и означает, что при изменении размера
экрана ваш сайт адаптируется к нему
Адаптивный веб-дизайн, AWD означает, что во время
разработки вы определяете основные разрешения (размеры
экрана), к которым будет адаптироваться ваш контент.
Шаг 2. Разработка
Создание страницы выполняется поэтапно:
- HTML верстка (HTML code)
- добавлены стили CSS,
- а затем, если необходимо, пишутся сценарии (JS),
- добавлены необходимые плагины и библиотеки.
или
- использование систем управления контентом CMS
(WordPress, Drupal, Joomla, Bitrix)
- использование конструкторов сайтов
Этап 4. Тестирование и запуск
Тестирование:
- Каждая ссылка должна быть проверена, каждая форма и
каждый скрипт должен быть проверен.
- Текст должен быть проверен средством проверки
правописания для выявления возможных опечаток и ошибок.
- Валидаторы кода используются для обеспечения того,
чтобы код, созданный на предыдущем шаге, полностью
соответствовал современным веб-стандартам.
Литература: [1-7], [12]

Тема 7. Веб-дизайн
Веб дизайн (Visual Design). После создания каркаса проекта
вы можете перейти непосредственно к созданию макета дизайна.
На этом этапе создается макет страницы.

25
 Основным назначением макета является визуализация
структуры страницы, ее содержимого, а также отображение
основных функциональных возможностей.
В отличие от каркаса, макет использует элементы дизайна.
Макет содержит цвета, логотипы и изображения.
1) Определение цветовой схемы проекта.
2) Выбор тренда в WEB дизайне
3) Определение / подбор ключевых особенностей «фишек»
проекта. Способы сделать сайт заметным и удобным для
посетителей
Принципы веб-дизайна
Хороший дизайн - это результат тщательного изучения
характеристик задачи и соблюдения основных правил.
Принципы выбора элементов, композиции и использования
цвета в основном совпадают с принципами, используемыми при
создании изображений на традиционных носителях.
Чтобы добиться хороших результатов при разработке веб-
сайта, вы должны придерживаться следующих принципов.
• Удобство восприятия. Текст, изображения и символы,
используемые на веб-сайте, должны быть понятны всем
пользователям.
• последовательность. Все элементы должны быть
объединены друг с другом, чтобы сайт был оформлен в едином
стиле.
• Использование шрифтов. Шрифты являются одним из
элементов графического дизайна.
Простота Не перегружайте веб-страницы вторичной
информацией. Содержание должно быть представлено
небольшими порциями, которые легко читаются.
• Структура. Каждая веб-страница и весь веб-сайт должны
иметь иерархическую структуру, обеспечивающую выбор
наиболее важных элементов, группировку похожих
компонентов.
Навигационная карта. Основой навигационной схемы
может служить информационная архитектура - карта сайта.
Навигационная карта - это реалистичный план перехода с одной
страницы на другую.

26
 Разработка цветовой схемы. Цвета, выбранные для веб-
сайта, должны соответствовать имиджу компании-заказчика и
способствовать восприятию идеи (сообщения) - основной
информации, представленной на веб-сайте.
• Используйте ограниченную палитру гармонизирующих
цветов для фона, текста, элементов
• Использование контрастов для текста, изображений.
Контрасты помогают пользователю воспринимать элементы.
• Использование акцентов используется для привлечения
внимания к необходимым компонентам: блокам текста,
диаграмм и т.д. С использованием цветов, шрифтов, размеров,
композиции.
Литература: [1-7], [12]

Тема 8. Инструменты веб-разработки

Существуют различные инструменты для разработки веб-
сайтов, в зависимости от типа и цели разрабатываемого ресурса:
- HTML;
- CSS;
- Javascript. Рамки Javascript
- Специализированные языки программирования
- Веб-редакторы или HTML-редакторы
- CMS;
- Онлайн конструкторы сайтов
Создание веб-сайтов, их разработка и поддержка
осуществляется с использованием языков и инструментов для
создания гипертекстовых документов, CMS (система управления
контентом) и специализированного программного обеспечения.
Инструменты разработки приложений веб-клиента:
HTML - язык разметки гипертекста - это
стандартизированный язык разметки документов, инструмент
для структурирования и форматирования документов в
Интернете.
Технология CSS (каскадные таблицы стилей) - каскадные
таблицы стилей используются для форматирования внешнего
вида веб-страниц.

27
 JavaScript может использоваться для разработки программ
для самых разных платформ.
На этом языке вы можете писать серверные сценарии
(используя .NET или [Link]), обычные приложения (способные
работать в любой операционной системе) и расширения для
приложений, приложения для мобильных устройств и сценарии
командной строки.
Javascript Framework: Angular, React, Vue и другие
Фреймворки JavaScript стали неотъемлемой частью каждого
современного веб-проекта, наиболее часто используемыми
являются [Link], React, Angular.
Специализированные языки программирования
PHP - это серверный язык сценариев.
PHP - это язык программирования, специально
разработанный для написания веб-приложений (скриптов,
скриптов), которые выполняются на веб-сервере. Синтаксис
языка в значительной степени основан на синтаксисе C, Java и
Perl.
Сценарии PHP могут выполняться на сервере в виде
отдельных файлов или могут быть встроены в HTML-страницы.
Perl (Practical Extraction and Report Language) -
интерпретируемый язык программирования, предназначенный
для обработки текстовой информации и написания различных
системных программ в операционной системе UNIX.
- ASP (Active Server Page) - активные страницы сервера, то
есть скрипт интерпретируется и выполняется непосредственно
на сервере, после чего готовый HTML-документ с результатами
ASP-скрипта отправляется в браузер пользователя.
Веб-редакторы.
Adobe Dreamweaver - программа для создания
профессиональных сайтов. Adobe Dreamweaver содержит
интуитивно понятный визуальный интерфейс, который
позволяет создавать и редактировать веб-сайты и мобильные
приложения.
Microsoft SharePoint Designer - это программа для
разработки сайтов SharePoint. Microsoft Office SharePoint
Designer - это типичный веб-редактор, который сочетает в себе

28
отличительные элементы управления веб-сайта MS Sharepoint со
средствами редактирования веб-страниц.
Adobe Muse - отличный выбор для дизайнеров и тех, кто
профессионально разрабатывает веб-страницы. Программа
имеет серьезный функционал.
Bluefish Editor - это мощный редактор, ориентированный на
программистов и веб-разработчиков, с множеством вариантов
написания веб-сайтов, сценариев и программного кода.
Графические редакторы и мультимедийные системы
являются частью разработки веб-сайтов. Например, Adobe Flash,
Adobe Photoshop.
Система управления контентом (CMS) - информационная
система или компьютерная программа, используемая для
поддержки и организации процесса создания, редактирования и
управления контентом (контентом).
Типы CMS: WordPress, Joomla !, Drupal, ModX, 1C-Битрикс,
Magento.
WordPress - это современная бесплатная платформа CMS.
WordPress используется для разработки интернет-ресурсов
практически любого типа: от обычных блогов до сложных
новостных порталов. Веб-сайт на основе Joomla состоит из
нескольких элементов, которые вместе образуют веб-страницу.
Drupal - это открытая система, которая используется для
создания веб-сайта, а также платформа для управления его
контентом с помощью дополнительных модулей расширения.
1С-Битрикс - это коммерческая CMS, которая по праву
широко используется в электронной коммерции.
Онлайн конструкторы сайтов
Существуют различные конструкторы сайтов: Wix, Weebly,
uKit (uCoz), Google Sites, Webnode, Jimdo, uCraft, Webstarts, Tilda
и др.
Различают онлайн-строителей (конструктор) и
программистов (конструкторы). Онлайн-конструктор полностью
работает в браузере, а данные хранятся на его собственном
сервере. Чаще всего сервис хранения платный, а пользователи
сильно ограничены тарифными планами сервиса.
Программы-конструкторы устанавливаются на компьютер
как программа.

29
 Литература: [1-7], [12]

Тема 9. Usability сайта

Usability (юзабилити) - это качественная оценка простоты
и удобства работы с сайтом.
Usability сайта оценивается по 5 основным критериям
качества:
1. Ориентация: как легко новым посетителям сайта
совершать основные действия.
2. Эффективность: насколько быстро пользователь может
перемещаться по сайту и выполнять необходимые действия.
3. Запоминаемость: насколько легко пользователю будет
перемещаться по сайту после длительного отсутствия на сайте.
4. Ошибки: количество ошибок, допущенных посетителем
сайта, способы устранения этих ошибок и простота устранения
последствий этих ошибочных действий.
5. Удовлетворенность: это субъективная степень
удовлетворенности пользователя, эмоциональное восприятие
сайта:
контент + дизайн + навигация + отображение в браузере
Полезность является показателем функциональности сайта
для пользователя: дает ли сайт пользователю то, что он ищет.
В целом, удобство использования и полезность являются
двумя наиболее важными критериями для определения
практичности чего-либо.
Но при определенных условиях:
1. этот сайт должен быть действительно нужен посетителю
2. Интерфейс сайта не должен мешать пользователю
выполнить целевое действие и получить то, что он хочет
Основные правила юзабилити сайта:
1. Гарантии надежности. Вкладка «О компании»,
контактные данные, сертификаты, адрес офиса, отзывы
клиентов, дела, банковские реквизиты - все это дает нам
хорошее свидетельство посетителю о том, что компания имеет
статус и полностью компетентна в своей сфере деятельности.

30
 2. Кнопка «Поиск» является важным элементом сайта.
Кнопка «Поиск» - первый помощник посетителя и лучший друг
на любом сайте.
Как минимум - если пользователь уже нашел эту кнопку в
течение первых 2 секунд, он чувствует себя в безопасности, и
его уровень напряжения и тревоги на сайте резко упадет.
3. Навигация («хлебные крошки»). Правило состоит в том,
что пользователь всегда должен иметь представление о том, где
он находится: тема, раздел, номер страницы.
4. Создание веб-сайтов. Правильное отображение
элементов страницы на различных устройствах снижает процент
посетителей сайта и увеличивает глубину просмотра, что, в свою
очередь, напрямую влияет на коэффициент конверсии сайта.
5. Удобство использования сайта. Этот принцип состоит из
правил о том, как скрасить пребывание посетителей на сайте.
Вот некоторые из этих идей: правило 3 кликов, правило 1
секунды, правило перевернутой пирамиды, закон близости
элементов, синдром утенка.
6. Дизайн. Минималистичный дизайн, не отвлекающий
элементов, не мешающий посетителю воспринимать
информацию. Стоит отметить, что дизайн и удобство
использования сайта - это два показателя, которые очень часто
пересекаются.
7. Содержание. Дизайн и структура текста, логическая
последовательность и оптимизация контента - все это должно
соответствовать определенным правилам, которые помогают
пользователям быстро находить необходимую информацию.
Литература: [1-7], [12]

9. Планы практических (семинарских) занятий

Тема 3 Web приложения

Практическая работа №1. Структура документа HTML
Вопросы:
1. Какова структура HTML-документа?
2. Что такое дескриптор? Что такое атрибут?

31
 3. Какие обязательные теги должны включать любой HTML-
документ?
4. Почему используются дескрипторы <HEAD> и <TITLE>?
5. Назовите основные атрибуты дескриптора <BODY>.
6. Какие дескрипторы используются для создания абзацев и
какие атрибуты они могут включать?
7. Для чего используется дескриптор <DIV>? Каковы
возможные атрибуты этого дескриптора?
Задания:
1. Создайте HTML-документ, заголовок которого будет
«Первая веб-страница», который будет содержать только
основные дескрипторы, и напечатайте следующий текст:
«Привет, я твой первый текст!». Для текста установите цвет на
синий. Сделать страницу фоновым рисунком.
2. Создайте HTML-документ с заголовком «Параграф 1»,
который будет выводить любой текст. Разделите этот текст на 3
абзаца. Для фона страницы используйте любое фоновое
изображение. Для каждого абзаца используйте заголовки разных
уровней. Выровняйте абзацы и заголовки по центру.
Используйте горизонтальные линейки в качестве разделителей
абзацев.
3. Используйте заголовок 3 уровня для текста. Для каждого
абзаца установите разные выравнивания: для первого - справа,
для второго - по центру, для третьего - слева. Название
центрировано. Поэкспериментируйте с тегом <BR>.
Литература: [1-10], [12]

Практическая работа 2.
HTML списков
Вопросов:
1. Что такое список? Типы списков.
2. Для чего используется тег <LI>?
3. Особенности маркированных и нумерованных списков
Задания:
1. Создайте HTML-документ под названием «Списки 1»,
который выведет маркированный список различных языков
программирования. Используйте для текста: название уровня 1

32
«Языки программирования», разные типы маркеров, различное
выравнивание.
2. Создайте HTML-документ под названием «Списки 2»,
который выведет нумерованный список различных языков
программирования. Используйте заголовок «Языки
программирования 2» уровня 1 для текста. Совместите список и
заголовок в центре. При нумерации используйте римские цифры
в верхнем регистре.
3. Создайте HTML-документ с именем «Списки 3», который
выведет 2 любых нумерованных списка. Нумерация первого
списка должна начинаться с буквы «d», а после шестого пункта
списка нумерация должна начинаться с буквы «a», а затем с
буквы «c». Нумерация второго списка должна начинаться с
римской цифры «III», а после пятого пункта списка за
нумерацией должны следовать арабские цифры.
4. Создайте HTML-документ под названием «Списки 4», в
котором будут перечислены три различных определения для
информатики. Для фона страницы используйте любое фоновое
изображение. Используйте заголовок 2 уровня для списка.
Литература: [1-10], [12]

Практическая работа 3. Форматирование текста HTML

Вопросы:
1. Какова цель физического форматирования тегов?
2. Какие теги используются для установки следующих
параметров текста: полужирный, курсив, крупный и мелкий
шрифт, подчеркивание и зачеркивание?
3. Какие теги используются для создания индексов и
индексов?
4. Для чего используется дескриптор <FONT>? Какие
атрибуты он может иметь?
5. Сущность логического форматирования
6. Моноширинные шрифты для HTML-документа
7. Какой дескриптор используется для описания цитат?
Задания:
1. Создайте HTML-документ с заголовком «Стили 1»,
который будет отображать 3 абзаца текста. Для текста в первом
абзаце установите жирный шрифт и выровняйте его по центру;

33
Для текста второго абзаца укажите курсив и выровняйте его
вправо; И распечатать текст третьего абзаца шрифтом телетайпа.
Используйте цвет фона страницы, чтобы использовать любое
фоновое изображение.
2. Создайте HTML-документ с заголовком «Стили 2», в
котором будут отображаться 3 различных математических
выражения, в которых будут использоваться верхний и нижний
индексы. Каждое выражение печатается с новой строкой и
другим цветом. Используйте синий цвет фона.
3. Добавьте текст с различными специальными символами.
Чтобы вывести эти символы, используйте их escape-
последовательности.
4. Примените моноширинные шрифты к тексту.
Используйте теги <TT> <CODE> <KBD> <SAMP>.
5. Создайте HTML-документ с заголовком «Документ 1»,
который отобразит список из трех разных цитат. После каждой
цитаты пропустите 2 строки.
6. Разработать Web-документ
HTML-документ WEB-документ

34
<HTML>
<HEAD>
</HEAD>
<BODY>
<B>жирный</B> шрифт<BR>
<I>курсив</I><BR>
шрифт <TT>фиксированной</TT>
ширины<BR> <U>подчёркнутый</U>
текст<BR>
<S>перечёркнутый</S> текст<BR>
шрифт <BIG>большего </BIG>
размера<BR>
шрифт <SMALL>меньшего
</SMALL>размера<BR>
<B>Абзацы могут располагаться</B>
<P align=left>слева,</P>
<P align=center>по центру</P>
<P align=right>или справа</P>
</BODY>
</HTML>

Литература: [1-10], [12]

Практическая работа 4. Гиперссылки

Вопросы:
1. Что такое гиперссылка?
2. В чем разница между абсолютными и относительными
гиперссылками?
3. Какой дескриптор используется для описания
гиперссылок и какими атрибутами он может обладать?
4. Для чего используется элемент BASE?
5. Что такое URL?
6. Как создать гиперссылку на другую страницу?
Задания:
1. Создайте HTML-документ «Гиперссылки 1», в котором
будут реализованы все предыдущие примеры страниц.
Например:
Примеры
Стили 1

35
 Списки 2
Document3
и т.п.
2. Создайте HTML-документ «Гиперссылки 2», в котором
будут реализованы ссылки на ваши любимые сайты в
Интернете. Настройте страницу по своему вкусу.
3. Создайте HTML-документ «Гиперссылки 3». В начале
текста должны быть его название и параграфы по содержанию
текста. Реализуйте внутренние ссылки на этот документ.
4. Реализуйте гиперссылки на разделы другого документа
Литература: [1-10], [12]

Практическая работа 5. Вставка изображения в

документ HTML
Вопросы:
1. Какой дескриптор используется для вставки изображения
в документ HTML?
2. Какие атрибуты используются для изменения размера
изображения в документе HTML?
3. Какие атрибуты используются для настройки
выравнивания изображения в тексте?
4. Какие атрибуты HSPACE и VSPACE используются для?
5. Какие теги можно использовать для выравнивания
изображения без текста?
6. Почему текст заменяет используемое изображение?
7. Как использовать изображение в качестве гиперссылки?
Задания:
1. Создайте HTML-документ и добавьте одно и то же
изображение 4 раза, но только для каждой копии, укажите
разные размеры.
2. Создайте HTML-документ и добавьте в него 3 разных
изображения одинакового размера. К каждому рисунку добавьте
строку текста, но с разным выравниванием текста относительно
рисунка: текст первого рисунка должен идти сразу после него;
Текст второго рисунка должен быть разбит рисунком; Третий
рисунок должен появиться сразу после вашего текста. Вокруг
каждого изображения используйте рамку одинаковой толщины.
Добавьте всплывающую подсказку к каждой картинке.

36
 3. Создайте HTML-документ, который будет выводить
любой текст. В тексте должно быть 2 цифры. Для каждого
изображения установите различное расстояние до окружающего
текста. Добавьте всплывающую подсказку к каждому
изображению, а затем в своем браузере отмените отображение
графики и посмотрите, что будет отображаться вместо рисунков.
Каждая картинка связана со страницами с двумя предыдущими
заданиями.
Литература: [1-10], [12]

Практическая работа 6. Вставка таблицы в документ

HTML
Вопросы:
1. Основные описания тегов таблицы.
2. Какие теги описывают строки и ячейки таблицы?
3. Для чего используется тег <CAPTION> и какими
атрибутами он может обладать?
4. Какие атрибуты можно использовать в дескрипторе
<TABLE>? Для чего используется каждый атрибут?
5. Методы сервировки стола
6. Какие элементы используются для форматирования?
Данные в таблице?
7. По каким атрибутам вы можете объединять и разбивать
ячейки в таблице?
8. Какие атрибуты задают цвет границ таблицы и цвет
заливки (фона) внутри таблицы?
Задания:
1. Создайте HTML-документ с заголовком «Таблицы 1»,
который будет содержать таблицу из 4 столбцов и 6 строк с
заголовком. Заполните таблицу любыми данными и выровняйте
ее по центру страницы. Для заголовка таблицы установите
желтый цвет фона и синий для всех остальных ячеек.
2. Создайте HTML-документ с заголовком «Таблицы 2»,
который будет содержать 2 таблицы из 3 столбцов и 4 строки с
заголовками. Заполните таблицы любыми данными и
выровняйте одну таблицу слева от страницы, а другую - справа.
Укажите разную ширину для каждой таблицы. Установите
таблицы для разных толщин и цветов рамок. Установите

37
параметры для таблиц, используя атрибуты CELLSPACING и
CELLPADDING.
3. Создайте HTML-документ с заголовком «Таблицы 3»,
который будет содержать таблицу из 3 столбцов и 5 строк с
заголовком. Заполните таблицу любыми данными. Укажите
ширину таблицы в полноэкранном режиме. Установите таблицы
для разных толщин и цветов рамок. В заголовке таблицы
объедините все ячейки и в любом другом месте таблицы
разделите ячейки. Установите цвет фона для таблицы и цвет
границы.
4. Создайте HTML-документ с заголовком «Таблицы 4»,
который будет содержать таблицу из 3 столбцов и 3 строк.
Используйте эту таблицу для равномерного расположения
изображений на странице: добавьте изображение (кроме средней
ячейки) в каждую ячейку таблицы и напишите любой текст в
средней ячейке. Затем сделайте границы таблицы невидимыми.
Укажите ширину таблицы в полноэкранном режиме.
Литература: [1-10], [12]

Практическая работа 7. Изображения и

мультимедийные объекты.
Вопросы:
1 Форматы аудио файлов?
2 Отметить, чтобы вставить фоновую музыку?
Цель работы: научиться работать с мультимедийными
объектами
Задания:
1 Интегрируйте фоновую музыку в веб-страницу.
Рекомендации:
<html>
<head>
<title>Musik in html</title>
</head>
<body>
Композиция "Love Me Do" Beatles
<embed src="Love_Me_Do_Beatles.mid"
height="60" width=144>
</body>

38
 </html>

2 Task
<html>
<head>
<title>Фоновое изображение</title>
</head>
<body background="../images/[Link]" bgcolor="pink">
Здесь содержание документа
</body>
</html>
Литература: [1-10], [12]

Практическая работа 8. Использование форм в HTML-

документе
Вопросы:
1. Для чего используются формы в документах HTML?
2. Каков основной синтаксис для описания формы?
3. Почему используется тег <INPUT>? Какие атрибуты он
может иметь?
4. Какой дескриптор используется для выбора из
нескольких вариантов в форме?
5. Для чего используется дескриптор <TEXTAREA>?
Задания:
1. Разработать различные виды форм для гостевой книги,
заполнить персональные данные посетителя сайта, ввести
информацию для регистрации на сайте и т.д.

39
 Литература: [1-10], [12]

Тема 3. Web приложения

Практическая работа 9. CSS
Вопросы:
1. CSS технология
2. Подключение таблиц стилей
3. Основные параметры CSS
4. Каковы основные настройки шрифта?
5. Каковы основные параметры абзаца?
6. Элементы измерения в CSS?
Задания:
1. Создайте файл стиля CSS, содержащий дизайн сайта.
Обязательно определить дизайн следующих элементов:
Заголовки 1-4 уровней.
Пункты меню 1-4 уровня.
гиперссылок.
Таблицы и ячейки таблиц.
Основной текст.
2. Стандартные графические элементы используются для
макета страницы. Разработка:
Banner.
Список.
иконки (дома, назад и т. Д.).
3. Создайте страницу со стилями CSS:

Рекомендации
1 задание

40
CSS использует блоки (div) для позиционирования элементов.
Код, таким образом, становится компактным, логичным и легко
модифицируемым.
<html>
<head>
<title>CSS position</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>
</html>
На странице [Link] устанавливаем те свойства, которые уже
знаем, а именно ширину, высоту и фон каждого блока:
body{
margin:0px;
}
#header
{
background:darkred;
width:715px;
height:100px;
}
#menu{
background:oldlace;
width:190px;
height:300px;
}
#content{
background:oldlace;
width:525px;
height:300px;
position:absolute;
left:190px;
top:100px;

41
 }
#footer{
background:darkred;
width:715px;
height:30px;
}

2 задание.
В предыдущем задании было использовано абсолютное
позиционирование. При абсолютном позиционировании, чтобы
не перепутать значения смещения, сначала определите
«родителя» и помните, что смещение происходит относительно
«родителя».
При относительном позиционировании блока необходимо
установить свойство position: относительный и свойства
смещения. Смещение в этом случае будет происходить не
относительно «родительского» элемента (как при абсолютном
позиционировании), а относительно самого блока в нормальном
потоке<html>
<head>
<title> relative block positioning </title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<div id="blok1">Блок 1</div>
<div id="blok2">Блок 2</div>
<div id="blok3">Блок 3</div>

42
 </body>
</html>

Установим размеры и границы этих блоков в таблице

стилей:
#blok1, #blok2, #blok3 {
border:1px solid red;
width:150px;
height:50px;
}
#blok2{
position:relative;
left:50px;
top:25px;
}

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

где он был бы в нормальном потоке. Оставшиеся блоки остались
на своих местах.
Плавающие блоки определяются свойством float, которое
определяет, будет ли блок плавать и в каком направлении он
будет двигаться. Возможны три варианта:
слева - блок прижат к левому краю, остальные элементы
обтекают его с правой стороны.
вправо - блок прижимается к правому краю, остальные
элементы обтекают его с левой стороны.
none - блок не перемещается и позиционируется в
соответствии со свойством position.
<html>
<head>

43
 <title> Positioning blocks </title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<div id="blok1"> Text block 1 </div>
Некоторые элементы на странице. Это может быть просто
текст, ссылки, списки, картинки и т.д..
</body>
</html>
And the [Link] page with the following code:
#blok1{
border:1px solid red;
width:150px;
height:50px;
float:left;
}
</body>
</html>
Плавающий блок прижат к левому краю:

Now let's push the block to the right edge:

#blok1{
border:1px solid red;
width:150px;
height:50px;
float:right;
}
Литература: [1-10], [12]

Практическая работа 10
Тема 5. Структура Web сайта
Вопросы:
1 Определите цель и потенциальную аудиторию
разрабатываемого сайта.
2. Планирование сайта
3 Определение содержания сайта

44
 Задания:
1 Выберите вариант работы. Определите цель и
потенциальную аудиторию разрабатываемого сайта.
2. Планирование сайта
2.1 Определите содержание:
- соберите соответствующие материалы: текст, графика.
- соберите текст, логотипы, фотографии, иллюстрации,
аудиофайлы и другие данные.
- Определите, какая информация является наиболее важной
и как она должна быть размещена на веб-сайте.
- Распределите контент по темам.
- Рассмотрим способ представления данных.
- Определите, какой контент узла должен быть текстом и
какие изображения должны быть представлены на узле.
- определите, нужны ли дополнительные материалы,
графические данные, таблицы или интерактивные компоненты?
3 Разработка структуры проекта
3.1. Создание карты сайта. Разработка информационной
архитектуры (логической структуры) сайта.
Варианты:
1. Кондитерская фабрика. Сайт небольшой кондитерской
фабрики. Содержит разделы: каталог товаров, заказ товара,
возможность формирования корзины и отправки заказа, отзывы
и др. Страницы. Категории: «О нас», «Контакты», «Цены».
2. Салон красоты. Сайт салона красоты. Содержит разделы:
каталог услуг, заказ услуг, список мастеров, контакты и др.
Страницы. Категории: «О нас», «Контакты», «Цены».
3. Продажа спортивного инвентаря. Сайт магазина по
продаже спортивного инвентаря для различных видов спорта.
Содержит разделы: каталог товаров, возможность формирования
корзины, онлайн-заказ, отзывы, информацию о гарантии,
доставку и т. Д. Категории: «О нас», «Контакты», «Цены».
4. Продажа и установка кондиционеров. Сайт интернет-
магазина. Содержит разделы: каталог товаров, возможность
формирования корзины, онлайн-заказ, отзывы, информацию о
гарантии, доставку и т. Д. Категории: «О нас», «Контакты»,
«Цены».

45
 5. Ресторан или кафе. Сайт для ресторана или кафе. Сайт
содержит: информацию о меню с ценами и фото блюд, описание
интерьера, отзывы посетителей, возможность заказа столика
через интернет, карту расположения. Категории: «О нас»,
«Контакты», «Цены».
6. Языковые курсы. Сайт языкового курса. Содержит
разделы: описание учебных программ, групповые расписания,
цены на услуги, заказ тестирований через интернет, адрес и
карту. Категории: «О нас», «Контакты», «Цены».
7. Мебельный салон. Сайт для мебельного салона.
Содержит разделы: каталог товаров с возможностью
формирования корзины и отправки заказа, информацию о
компании, гарантиях и скидках. Интерактивная гостевая книга.
Категории: «О нас», «Контакты», «Цены».
8. Ремонт квартир. Сайт для компании по ремонту квартир.
Содержит разделы: отзывы клиентов, каталог услуг с
приблизительными ценами, фотоальбом с выполненными
работами, форму заказа, страницу с вакансиями. Категории: «О
нас», «Контакты», «Цены».
9. Ювелирный магазин. Сайт ювелирного магазина.
Включает в себя каталог товаров, с возможностью
формирования корзины, отправки заказа, информации о
компании и контактной информации. Категории: «О нас»,
«Контакты», «Цены».
10. Автосервис. Сайт небольшого автосервиса. Содержит
разделы: подробное описание услуг с ценами, форму для
отправки заказа, новости. Категории: «О нас», «Контакты»,
«Цены».
11. Бытовая техника. Сайт интернет-магазина бытовой
техники. Содержит разделы: каталог товаров, возможность
формирования корзины, онлайн-заказ, отзывы, информацию о
гарантии, доставку и т. Д. Категории: «О нас», «Контакты»,
«Цены».
12. Дом отдыха. Сайт дома отдыха. Содержит разделы:
подробное описание услуг с ценами, форму заказа, новости,
отзывы и др. Категории: «О нас», «Контакты», «Цены».
Литература: [1-10], [12]

46
 Практическая работа 11
Тема 6. Процесс разработки Web сайта
Вопросы:
1 каркас.
2. Каркасные инструменты
Задания:
1. Разработка макета сайта согласно варианту.
Используйте любой инструмент для разработки макета:
- Gomockingbird
- Бальзамик Макеты
- Axure
- Gliffy
Рекомендуется использовать онлайн-программу, например:
[Link]
Элементы интерфейса включают, но не ограничиваются:
элементы управления вводом: флажки, переключатели,
раскрывающиеся списки, списки, кнопки, переключатели,
текстовые поля, поле даты
Навигационные компоненты: крошка, слайдер, поле поиска,
нумерация страниц, слайдер, теги, значки
Информационные компоненты: подсказки, значки,
индикатор выполнения, уведомления, окна сообщений
Пример макета:

Практическая работа 12
Вопросы:
1. Визуальный дизайн
2. Дизайн шаблона.
3. Определение шаблона страницы.

47
 Задания:
1. Определить цветовую схему проекта
2. Для работы с выбранным цветом используйте
инструменты:
Color Scheme Designer 3
(Http://[Link]/csd-3.5/)
3. Определение веб-дизайна сайта согласно варианту
Методические рекомендации:
После создания макета проекта вы можете перейти
непосредственно к созданию шаблона дизайна. На этом этапе
создается верстка страницы.
Основным назначением шаблона является визуализация
структуры страницы, ее содержимого, а также отображение
основных функциональных возможностей.
В отличие от макета, шаблон использует элементы дизайна.
шаблон содержит цвета, логотипы и изображения.
Литература: [1-10], [12]

Тема 9. Usability Web сайта

Практическая работа 13
Вопросы:
1. Удобство использования
2. Качественные компоненты юзабилити
Задания:
1. Проанализируйте дизайн и удобство использования
подобных сайтов. Количество изучаемых сайтов должно быть не
менее двух.
2. Просмотрите следующее:
- структура сайта, представление структуры в меню;
- информация, представленная на главной странице;
- макет сайта (фиксированный / резиновый набор текста);
- наличие свободного места (достаточное / недостаточное);
- цвета сайта, актуальность цветовой схемы для данной
темы;
- графические элементы, их соответствие теме сайта;
- удобство использования сайта
Методические рекомендации:

48
 Юзабилити сайта оценивается по пяти основным
качественным компонентам:
1. Ориентация: как легко новым посетителям сайта
выполнять элементарные действия.
2. Эффективность: насколько быстро пользователь может
перемещаться по сайту и выполнять необходимые действия.
3. Запоминаемость: насколько легко посетителям будет
удобно перемещаться по сайту после длительного отсутствия на
сайте.
4. Ошибки: количество ошибок, допущенных посетителем
сайта, способы устранения этих лагов и простота устранения
последствий этих ошибочных действий.
5. Удовлетворенность: субъективная степень
«удовлетворенности» посетителя, эмоциональное восприятие
сайта: сочетание информации + дизайн + навигация +
отображение в браузере.
Литература: [1-10], [12]

10. Планы лабораторных занятий

Лабораторные занятия учебным планом не предусмотрены

11. Планы занятий в рамках самостоятельной работы

студентов под руководством преподавателя

СРСП 1
Тема 1. Интернет-технологии
Вопросы:
1. Система доменных имен DNS
2. Браузер
3. Особенности веб-браузера Microsoft Internet Explorer 9,
10
Задания:
1. Посмотреть новые функции IE9
2. Изменения в пользовательском интерфейсе браузера IE9

49
 3. Инструменты разработчика в IE9: вкладки «Консоль»,
«Сеть»
[Link]
Литература: [1-10], [12]

СРСП 2
Тема 2. Структура Web технологий
Вопросы:
1. Клиент-серверные технологии Web
2. Cookie
3. Веб-сервисы
Задания:
1. Изучите возможности сервиса Google Docs
2. Организация совместной работы с документами и
публикация документов в сети, используя сервис Google Docs
3. Создайте форму документа на Google Disc
4. Создайте анкету на Google Disc
Литература: [1-10], [12]

СРСП 3
Тема 3. Web приложения
Вопросы:
1. Структура документа HTML
2. Синтаксис HTML-элемента: списки, таблицы
Задания:
1. Повторите страницу как в образце
([Link]
[Link])

50
2. Повторите страницу как в образце

3. Повторите страницу как в образце

4. Повторите страницу как в образце

5. Повторите страницу как в образце

51
 Литература: [1-10], [12]

СРСП 4
Тема 3. Web приложения
Вопросы:
1. Определение стилей
2. Комментарии CSS.
3. Группа селекторов в группе
4. Дополнительные CSS-селекторы
5. Универсальные селекторы
Задания:
Для страницы добавьте дизайн CSS
([Link]
[Link]).
1. Для решения задач этого блока вам понадобятся свойства
CSS: font-family.
1.1. Создайте абзац для шрифта <p> Arial.
1.2. Создайте шрифт Times New Roman для <h2 class =
"block">.
1.3. Сделайте любой шрифт без засечек для <h3>.
2. Для решения задач этого блока вам понадобятся
следующие свойства CSS: шрифт.
2.1 Закомментируйте все стили для абзацев.
2.2. Для <p> сделайте шрифт Arial, 16 пикселей, курсив,
полужирный, межстрочный интервал в 30 пикселей.
2.3. Для <h1> сделайте следующий шрифт: с низким
содержанием жира, 20 пикселей, Verdana.

52
 3. Для решения задачи вам понадобятся следующие
свойства CSS: вертикальное выравнивание.
3.1. Поместите текст в таблицу <table> вдоль верхнего
края вертикально.
3.2. Поместите текст в <th> в центре по вертикали.
4. Для решения задачи вам понадобятся следующие CSS-
свойства: text-decor.
Повторите страницу с образцом:

5. Для решения задачи вам понадобятся свойства CSS:

border-style, border-width, border-color, border, border-radius.

Литература: [1-10], [12]

СРСП 5
Тема 4. Классификация Web ресурсов.
Вопросы:
1. Классификация веб-ресурсов по доступности сервиса
2. Классификация веб-ресурсов по физическому
расположению
3. Классификация веб-ресурсов по типу представления
информации.
Задания:
1. Найдите 2 веб-ресурса, расположенных в Интернете,
которые относятся к типам сайтов:
Тематический сайт
Представительский сайт
Корпоративный сайт

53
 Онлайн магазин
Поисковые услуги
2. Проанализируйте эти сайты в соответствии с критериями
(в виде таблицы):
- содержание
- количество и название разделов (функционал)
- специфические особенности
Литература: [1-10], [12]

СРСП 6
Тема 5. Структура Web сайта
Вопросы:
1 Планирование сайта
2 Определение содержания сайта
Задания:
1. Определите содержание сайта в соответствии с
вариантом
2 Разработка структуры проекта
3. Создание карты сайта.
Литература: [1-10], [12]

СРСП 7
Тема 6. Процесс разработки Web сайта
Вопросы:
1 Макет.
2. Инструменты создания макета
Задания:
1. Разработка макета сайта согласно варианту
2. Используйте любой инструмент для разработки макета:
- Gomockingbird
- Balsamiq Mockups
- Axure
- Gliffy
Литература: [1-10], [12]

СРСП 8
Тема 7. Web дизайн
Вопросы:

54
 1. Тенденции веб-дизайна (Визуальный дизайн)
2. Принципы веб-дизайна
Задания:
1. Изучить современные тенденции веб-дизайна
2. Определить веб-дизайн для сайта по варианту работы
Литература: [1-10], [12]

СРСП 9
Тема 8. Инструменты разработки Интернет приложений
Вопросы:
1. Веб-редакторы
2. CMS - Система управления контентом
3. Онлайн конструкторы сайтов
Задания:
1. Сравните веб-редакторы по критериям: назначение,
функциональность, интерфейс. Результаты анализа представьте
в виде таблицы.
- Visual Studio Code
- Notepad ++
- Adobe Dreamweaver CC
- Sublime Text
- Webshorm на базе IntelliJ
- Vim
- Eclipse
- Atom
- Brackets
- CoffeeCup HTML редактор
- HTML-Online
[Link]
2. Сравните системы CMS по критериям: назначение,
функциональность, интерфейс. Результаты анализа
представлены в виде таблицы
3. Сравните онлайн-конструкторы сайта по критериям:
назначение, функциональность, интерфейс. Результаты анализа
представлены в виде таблицы
Литература: [1-10], [12]

СРСП 10
Тема 9. Usability Web сайта

55
 Вопросы:
1. Удобство использования
2. Качественные компоненты юзабилити
Задания:
1. Проанализировать дизайн и юзабилити разработанного
сайта
Литература: [1-10], [12]

12. Планы занятий в рамках самостоятельной работы

студентов

СРС 1
Theme 3. Web приложения
Работа 1. Hypertext Markup Language HTML
Задание:
1. Создайте веб-страницу, которая содержит как минимум 4
раздела на произвольную тему. Используйте макет на основе
таблицы.
2. Cascading style sheets CSS. Для веб-страницы добавьте
ссылку, например кнопку.
Сделайте ссылку, которая при наведении на нее изменяет ее

внешний вид, как показано на рис.1.

[Link]

3. Добавьте выпадающее меню

Вид меню при наведении на первый пункт

56
 Вид меню при наведении на второй пункт Правка

[Link]
Reference: [3-9], [14-16], [19- 22]

[Link]
Литература: [1-10], [12]

СРС 2
Тема 6. Процесс разработки Web сайта
Задания:
1. Планирование сайта согласно варианту
2.1 Определите контент:
- Соберите соответствующие материалы: текст, графика.
- соберите текст, логотипы, фотографии, иллюстрации,
аудиофайлы и другие данные.
- Определите, какая информация является наиболее важной
и как она должна быть размещена на веб-сайте.
- Распределите информацию по темам.
- Рассмотрите способ представления данных.
- Определите соотношение контента узла: текст-графика,
изображения.
- определить, нужны ли дополнительные материалы,
графические данные, таблицы или интерактивные компоненты?
2 Разработка информационной структуры проекта
2.1. Создание карты сайта.
2.2 Разработка информационной архитектуры (логической
структуры) сайта.

3. Выполните разработку шаблона сайта согласно варианту

4. Выберите для шаблона сайта цвета, конструктивные
элементы.

57
 Литература: [1-10], [12]

СРС 3
Тема 9. Usability Web сайта
Задания:
1. Выполните юзабилити сайта
Ниже приведен список основных требований юзабилити
сайта. Необходимо выполнить анализ разных сайтов (3-5) на
соответствие этим требованиям. Заполните таблицу, например,
скриншотами или отметьте наличие анализируемых атрибутов
процента (%). Таблицу сохраните в вашем файле.
Заполните таблицу требований к юзабилити сайтов другими
рекомендациями, например, веб-дизайн или контент.

58
 Критерии Адрес Адрес Адрес Адрес Адрес
сайта сайта сайта 3 сайта сайта
1 2 4 5
1. Простая и понятная
структура сайта
2. Простая и интуитивно
понятная навигационная
система
3. Текст должен быть 1. i. ii. iii.
читаемым (простой шрифт) и
должен быть понятным и
доступным. Читаемость
текста зависит не только от
выбора правильного шрифта,
но и от его языковых
характеристик.
4. Логотип должен вести на
главную страницу. Логотип
сайта должен быть
кликабельным, даже если у
вас уже есть кнопка в меню,
которая ведет на главную
страницу
5. Гиперссылки должны
открываться в новой вкладке.
Навигация по сайту будет
удобнее
6. Слоган сайта должен быть
указан в заголовке, который
отражает цель сайта.
7. Ссылки должны выглядеть
одинаково. Члены
распознают ссылки по
методу, выбирающему текст
другим цветом при наведении
мыши. Способ подсветки
ссылок должен быть
одинаковым на всем сайте.
8. Желательно наличие
строки поиска
9. Приятный дизайн сайта
Юзабилити-тестирование включает в себя следующее:
1) Тест на навигацию:
Навигация означает, как пользователь просматривает веб-
страницы, различные элементы управления, такие как кнопки,

59
поля или как пользователь использует ссылки на страницах для
просмотра различных страниц.
2) Проверка содержания и дизайна:
- Содержание должно быть логичным и легким для
понимания
- Простота восприятия: изображения и символы должны
быть понятны всем пользователям
- согласованность элементов: единство дизайнерских
размеров и цветов
- Четкая информационная структура
- Ограничить количество шрифтов, стили шрифтов,
размеры
- использование контрастов
- Легкость восприятия – незагроможденность элементами
- использовать акценты
- Элементы макета (привязка к узлам сетки модульная)
- Используйте ограниченную палитру цветов - не более 3
основных цветов
- Используйте эффективный фон
3) Помощь для пользователя
Другая информация пользователя для справки
пользователя:
как опция поиска,
Карта сайта
файлы справки и т. Д.
Search «Поиск по сайту»
Карта сайта должна присутствовать со всеми ссылками на
веб-сайтах с правильным древовидным представлением
навигации. Проверьте все ссылки на карте сайта.
Опция «Поиск по сайту» поможет пользователям легко и
быстро находить контентные страницы, которые они ищут. Это
все необязательные элементы, и если они присутствуют, они
должны быть проверены.
Это некоторые из основных важных стандартов, которым
следует следовать в веб-разработке.
Ваша задача - проверить все для тестирования
пользовательского интерфейса.
Литература: [1-10], [12]

60
13. Тематика письменных работ по курсу

Тематика рефератов:
1. Всемирная паутина; Web-технологии; Страница URI
контента (унифицированный идентификатор ресурса).
2. Веб-технологии. Особенности; преимущества и
недостатки.
3. Поисковые системы Интернет
4. Адресация в Интернет
5. Веб-серверы и веб-браузеры. Взаимодействие веб-
сервера и веб-браузера.
6. Макеты сайтов. Классификация версток сайта: резиновая,
Эластичная; Адаптивная; Комбинированная. Преимущества и
недостатки.
7. HTTP (Протокол передачи гипертекста - «Протокол
передачи гипертекста»). Структура. Методы запросов.
8. CSS (Каскадные таблицы стилей - «Каскадные таблицы
стилей»). Способы использования каскадных таблиц стилей в
документе HTML.
9. Языки веб-программирования. Языки клиента. Языки
сервера.
10. Системы управления контентом CMS
11. HTML (язык разметки гипертекста - «язык разметки
гипертекста»). Структура HTML-документа. Основные теги.
12. Удобство использования сайта
15. Гиперссылки. Абсолютные и относительные ссылки,
понятие относительного пути. Типы ссылок: посещенные;
непосещенные; Активные. Атрибуты ссылок. Якоря.
16. CMS (Система управления контентом).
17. HTML. Списки. Нумерованные списки. Маркированные
списки. Списки определений.
18. Создание шаблона для CMS (Система управления
контентом - «Система управления контентом») на примере
Joomla CMS.
19. HTML. Таблицы. Использование таблиц для макета
документа HTML, преимущества и недостатки.

61
 20. Способы настройки модулей в CMS Joomla:
использование каскадной таблицы стилей; Использование
стилей CMS Joomla; Создав шаблон модуля.

Тематика курсовых работ

(учебным планом по данной дисциплине не
предусмотрены)

14. Информация по оценке включает рейтинговую шкалу

оценки знаний студентов в разрезе принятых форм контроля.
Рейтинговая шкала оценки знаний студентов
Рейтинг Баллы
Текущий 50-100
Рубежный 50-100
Итоговый 50-100
Всего: 100

15. Экзаменационные вопросы по курсу

1. История возникновения Интернет. Компоненты Интернет.

2. Аппаратное обеспечение для подключения Интернет.
Технологии передачи информации.
3. Протоколы, используемые в Интернет. Модель
взаимодействия открытых систем OSI.
4. Доменная организация сети. IP-адрес компьютера и URL-
адрес документа.
5. Алгоритм разработки веб приложений
6. Поиск информации в Интернет. Поисковые системы.
7. «Технические» требования к страничке. Мета – тэги.
8. Создание электронного магазина. Элементы, составляющие
дизайн электронного магазина.
9. Язык HTML. Создание и просмотр простого HTML-
документа. Создание заголовков, использование стилей
форматирования текста, организация абзацев.

62
10. Горизонтальные линии. Комментарии. Бегущая строка.
Спец. символы. Шрифт, цвет, фон.
11. Включение списка в HTML-документы. Нумерованные,
маркированные списки. Списки определений.
12. Включение таблиц в HTML-документы. Таблицы и
компоновка страниц. Заголовок таблицы.
13. Включение гиперссылок в HTML-документы.
Использование URL адресов в HTML-документах,
указателей и ссылок.
14. Подготовка мультимедийных компонентов.
15. Включение изображений в HTML-документы.
Использование изображений в качестве гиперссылок.
16. Карты изображений.
17. Объекты в JavaScript.
18. Система доменных имен DNS
19. Структура и принципы WWW
20. Прокси-серверы
21. Интернет-протоколы приложений
22. Клиент-серверные технологии Web
23. HTTP протокол
24. Обеспечение безопасности передачи данных HTTP
25. Cookie
26. Клиентские скрипты и приложения
27. Сервер веб-приложений
28. Веб-сервисы
29. Облачные вычисления
30. Структура документа HTML
31. Синтаксис HTML-элемента
32. CSS верстка
33. Определение стилей

63
 Содержание

1. Учебная программа очной формы обучения .......................... 3

2. Данные о преподавателе……………………………………….3
3. Пререквизиты: ........................................................................... 3
4. Постреквизиты: ......................................................................... 4
5. Краткое описание дисциплины ……………………………….4
6. График выполнения и сдачи заданий по дисциплине ........... 5
7. Карта учебно-методической обеспеченности дисциплины .. 5
8. Лекционный комплекс (тезисы лекций) ................................. 7
9. Планы практических (семинарских) занятий ....................... 31
10. Планы лабораторных занятий.............................................. 49
11. Планы занятий в рамках самостоятельной работы
студентов под руководством преподавателя ............................ 49
12. Планы занятий в рамках самостоятельной работы
студентов ..................................................................................... 56
13. Тематика письменных работ по курсу ................................ 61
14. Информация по оценке. …………………………….……..62
15. Экзаменационные вопросы по курсу ……………………..62

64
 УЧЕБНАЯ ПРОГРАММА
по дисциплине

«WEB-технологии (Front End и Back End)»

для специальности: 7М06102-IT-предпринимательство и

цифровая экономика

Спирина Елена Александровна

65