3.63M

Category:

internet

ПГ1

1.

Каменский технологический институт – филиал
ПензГТУ (Кам ТИ – ПензаГТУ)

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

3.

Цель предстоящей работы:
Разработка web-сайта для Кафе
Путь Самурая, который
автоматизирует бизнес-процессы и
обеспечить удобный интерфейс для
сотрудников и пользователей.

4.

Актуальность данной работы
обусловлена необходимостью создания
качественного интернет-ресурса для
ресторана японской кухни «Путь
Самурая». Сайт позволит потенциальным
клиентам ознакомиться с меню, узнать о
новинках и специальных предложениях,
а также зарегистрироваться для
получения дополнительных услуг.
Объектом разработки является сайт
ресторана ООО «Путь Самурая».

5.

Служба — это модель взаимодействия двух программ по определенным
правилам (протоколам).
Примеры основных служб Интернета:
— WWW (World Wide Web) — самая
популярная служба. Это множество
связанных между собой документов,
расположенных на разных серверах.
— Электронная почта (E-mail) — служба
для обмена сообщениями.
— Файловые архивы (FTP) — служба для
передачи файлов.
— Облачные сервисы — предоставление
вычислительных мощностей и хранилищ
как услуга.

6.

UI-дизайн (пользовательский интерфейс) фокусируется на визуальном
оформлении: подборе цветовой гаммы, шрифтов, композиционных решений,
обеспечивающих эстетику и узнаваемость продукта.
UX-дизайн (пользовательский опыт) направлен на создание удобной структуры
сайта или приложения, чтобы взаимодействие было интуитивным и
эффективным для конечного пользователя.
Графический интерфейс пользователя — это тип интерфейса, где все средства
взаимодействия реализованы через графические элементы. Его конкретная
форма зависит от контекста использования и целевой платформы.
Типы пользовательских интерфейсов по платформе:
Мобильный интерфейс
Веб-интерфейс
Диегетический
Недиегетический
Пространственный
Мета-интерфейс

7.

Графический интерфейс
пользователя — это тип
интерфейса, где все средства
взаимодействия реализованы
через графические элементы. Его
конкретная форма зависит от
контекста использования и
целевой платформы.

8.

HyperText Markup Language (HTML) – это
стандартизированный язык разметки документов,
предназначенный для создания веб-страниц. HTML не
является языком программирования; его задача –
описывать структуру документа и указывать браузеру,
как должны отображаться элементы: заголовки,
абзацы, списки, изображения, ссылки и т.д.
Гипертекст означает, что документ содержит ссылки
(гиперссылки), позволяющие переходить к другим
документам или разделам. Именно гиперссылки
формируют «паутину» интернета, объединяя
миллиарды страниц. Разметка осуществляется с
помощью тегов – специальных команд, заключённых в
угловые скобки. Теги бывают парными (например,
<p>...</p> для абзаца) и одиночными (например, <img>
для изображения). Язык задаёт строгие правила
синтаксиса, которым должен следовать разработчик.
<html>
<head>
Службы
интернета
</head>
<body>
Бабаба с
бебебе
</body>
</html>

9.

CSS (Cascading Style Sheets) – это язык, который
отвечает за внешний вид веб-страниц. Он
работает в паре с HTML: если HTML создаёт
структуру документа, то CSS задаёт цвета,
шрифты, отступы, расположение блоков и
анимации. Главная идея CSS – разделение
содержания и оформления. Благодаря этому
один стиль можно применить сразу ко всем
страницам сайта, а изменения вносятся быстро и
без ошибок. База каскадирования. Название
«каскадные» отражает главный принцип: стили
«стекаются» в одном документе из разных
источников, и браузер должен решить, какое
правило применить в случае конфликта.
a
{
background-color red;
}
b
{
margin: 0;
}
Img {
height: 10px;
width: 20px;
}

10.

представляет собой концептуальную модель пользовательского интерфейса, отражающую структурную
организацию веб-страницы и взаимное расположение её функциональных элементов. Разработка макета является одним
из ключевых этапов проектирования, поскольку позволяет на ранней стадии определить визуальное представление сайта, а
также обеспечить логичность и удобство взаимодействия пользователя с системой.
— Фреймовая основа (файл FR_FR.php) делит
окно браузера на две вертикальные области:
левый фрейм шириной 30% (содержит
навигационное меню) и правый фрейм
шириной 70% (отображает контент). Каждый
фрейм загружает отдельный HTML-документ.
— Навигационное меню (MENU.php) содержит
кнопки-гиперссылки на категории блюд и
форму регистрации. Все ссылки имеют
атрибут target="content", что заставляет
загружать страницы в правый фрейм.
— Контентные страницы (FR_BASE.php,
FR_BASE_ZAP.php, FR_BASE_SET.php,
FR_BASE_GR.php, FR_BASE_NOV.php, REG.php и
другие) оформлены в едином стиле и
содержат таблицы с товарами, формы
регистрации, детальные описания роллов.

11.

Создание сайта — это комплексный
процесс, который включает несколько
взаимосвязанных этапов. Каждый этап
важен для получения качественного и
функционального ресурса, который
будет решать поставленные задачи.
Планирование.
Дизайн.
Вёрстка.
Программирование.
Наполнение контентом.
Тестирование.
Запуск.
Поддержка.

12.

Шапка сайта (или хедер, от англ.
header — «заголовок») —
это верхняя часть веб-страницы,
которая располагается над основ
ным контентом и обычно отобра
жается на всех страницах ресурс
а. Это первый элемент, который
видит посетитель: от него во мно
гом зависит первое впечатление
о сайте и решение пользователя
остаться на нём.

13.

Шапка сайта в HTML и CSS

14.

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

15.

Подвал сайта в HTML и CSS

16.

Форматирование веб-страницы выполнено с использованием каскадных таблиц стилей CSS. Заданы
параметры шрифтов, цветовая схема и фоновое оформление, соответствующие тематике ресторана.
Общее оформление сайта подчинено единой стилистике, сочетающей тёмный фон, красные акценты
и белую типографику. Форматирование реализовано с помощью каскадных таблиц стилей CSS и
охватывает все ключевые элементы: фон, шрифты, цветовую схему, анимации и адаптивность.
В данном сайте для форматирования используется следующие способы:
Изменение размера, шрифта,
цвета производится с помощью
“СSS”
Заполнение с помощью “HTML”

17.

18.

В данном сайте используется
только вставка изображений с
помощью тега “JPG” с
соответствующими
атрибутами для корректной
вставки

19.

Меню сайта (или навигация) —
это набор ссылок на ключевые страницы или разделы ресурса. Оно помогает по
льзователям ориентироваться в контенте и быстро находить нужную информац
ию. По сути, меню —
это «карта» сайта: оно наглядно показывает структуру проекта и даёт доступ к ег
о основным разделам.
Добавление меню через “HTML”
Добавление кнопок через “HTML”

20.

Гиперссылка (англ. hyperlink), или просто ссылка —
это элемент гипертекстового документа (веб-страницы, PDF-файла и т. д.), который позволяет перейти к
другому фрагменту внутри этого же документа либо к другому объекту: файлу, странице, приложению
, разделу сайта и т. п.
Проще говоря, гиперссылка —
это «мост» между разными цифровыми объектами: нажав на неё, пользователь мгновенно перемеща
ется к нужному ресурсу.
Изменение стиля гиперссылки
через “СSS”
Добавление гиперссылок через “HTML”

21.

Фрейм (англ. frame —
«рамка», «каркас») —
это область веб-страни
цы, которая может ото
бражать отдельный HT
ML-документ независи
мо от остального соде
ржимого. Проще говор
я, фрейм позволяет ра
збить окно браузера н
а несколько секций, в
каждой из которых заг
ружается своя веб-стра
ница.

22.

Добавление фреймов

23.

Веб-форма (website form) —
это интерактивный элемент на веб-странице, который позволяет пользователю
вводить и отправлять данные. По сути, это цифровой аналог бумажной анкеты
или бланка. Формы делают взаимодействие с сайтом активным: через них посе
тители регистрируются, оформляют заказы, оставляют отзывы и т. д.

24.

Добавление форм через “CSS”
Добавление форм через “HTML”

25.

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

English Русский Rules