Создание сайта салона мягкой мебели Интерьер Холл

Содержание

Слайд 2

Актуальность В наше время многие понимают, что все крупные фирмы и

Актуальность

В наше время многие понимают, что все крупные фирмы и известные

бренды не могут существовать без своего личного сайта. Наличие сайта позволяет расширить возможности по рекламе и реализации готовой продукции. Созданием сайтов занимаются web-программисты. Именно поэтому профессия web-программиста является актуальной.
Слайд 3

Цель исследования: Объект исследования: Предмет исследования: Определить возможности использования средств front-end

Цель исследования:

Объект исследования:

Предмет исследования:

Определить возможности использования средств front-end разработки для создания

сайта салона мягкий мебели

Технология современных средств web-программирования.

Гипотеза:

Технологии front-end разработки при создании сайта салона мебели

С помощью современных средств front-end программирования можно создать адаптивный сайт салона мягкой мебели.

Введение

Слайд 4

Задачи проекта Изучение технологий web-программирования; Демонстрация преимуществ технологий front-end разработки; Сравнение

Задачи проекта

Изучение технологий web-программирования;
Демонстрация преимуществ технологий front-end разработки;
Сравнение функциональных особенностей аналогичных

сайтов;
Выбор функциональных особенностей будущего продукта на основе анализа и обобщения данных аналогичных сайтов;
Сбор необходимой информации
Создание макета сайта
Вёрстка и разработка интерфейса веб-страницы
Наполнение сайта контентом
Тестирование и отладка программного кода
Слайд 5

Современные технологии web-программирования Веб-программирование ориентировано на разработку веб-приложений. Архитектурой полноценного сайта

Современные технологии web-программирования

Веб-программирование ориентировано на разработку веб-приложений. Архитектурой полноценного сайта являются

технологии front-end и back-end разработки.
Слайд 6

Преимущества front-end разработки Front-end разработка - это практика преобразования данных в

Преимущества front-end разработки

Front-end разработка - это практика преобразования данных в графический

интерфейс с использованием HTML, CSS и JavaScript, чтобы пользователи могли просматривать и взаимодействовать с этими данными.
Слайд 7

Сравнение аналогичных сайтов

Сравнение аналогичных сайтов

Слайд 8

Сбор информации Создание сайта началось с организации сбора информации о салоне «Интерьер Холл».

Сбор информации

Создание сайта началось с организации сбора информации о салоне «Интерьер

Холл».
Слайд 9

Создание макета сайта Balsamiq Mockups — это сервис для построения макетов

Создание макета сайта

Balsamiq Mockups — это сервис для построения макетов пользовательских интерфейсов для упрощения

разработки веб-сайтов.

Чтобы понять структуру сайта необходимо создать его макет. Для этого был использован онлайн сервис Balsamiq Mockups.

Заголовок
Навигация
Каталог
3.1. Прямые диваны
3.2. Угловые диваны
3.3. Кухонные уголки
3.4. Детские диваны
4. Популярные заказы
5. Отзывы
6. Информация о салоне
7. Наши преимущества

Структура сайта

Слайд 10

Brackets — свободный текстовый редактор для веб-разработчиков. Brackets ориентирован на работу

Brackets — свободный текстовый редактор для веб-разработчиков. Brackets ориентирован на работу

с HTML, CSS и JavaScript. Эти же технологии лежат в основе самого редактора, что обеспечивает его кроссплатформенность.

Вёрстка и разработка интерфейса страницы

Следующим шагом будет воплощение макета в настоящий сайт. Для этих целей прекрасно подходит текстовой редактор Brackets.

Слайд 11

С помощью HTML5 создан блочный скелет сайта, который в дальнейшем наполнялся

С помощью HTML5 создан блочный скелет сайта, который в дальнейшем наполнялся

контентом.

Разметка и наполнение сайта контентом

Слайд 12

CSS помог смоделировать внешний вид сайта, расположить элементы в нужных местах,

CSS помог смоделировать внешний вид сайта, расположить элементы в нужных местах,

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

Стилизация и адаптивная вёрстка

Слайд 13

Благодаря JS сделана кнопка «Наверх» и плавные якоря. Систематизация диванов и

Благодаря JS сделана кнопка «Наверх» и плавные якоря. Систематизация диванов и

раздел отзывов были сделаны с помощью готового jQuery кода.

Анимация и систематизация

Слайд 14

Тестирование и отладка программного кода Сайт практически готов. Осталось только протестировать

Тестирование и отладка программного кода

Сайт практически готов. Осталось только протестировать его

на различных устройствах. Адаптивность сайта проверялась на телефоне, планшете и компьютерах с различной величиной экрана. Это помогло найти и исправить недочёты.
Слайд 15

Вывод В процессе создания сайта, закреплен изученный ранее материал, получены новые

Вывод

В процессе создания сайта, закреплен изученный ранее материал, получены новые знания

в сфере программирования на JavaScript. В итоге получилось создать адаптивный сайт, основанный на front-end разработке. Гипотеза проекта подтверждена.