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

1.

Автономная Некоммерческая Организация Дополнительного
Профессионального Образования «Инфосфера»
Создание сайта салона мягкой мебели
«Интерьер Холл» с использованием
технологии front-end разработки
Выполнил: ученик группы ИП22
Шиптенко Ростислав

2.

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

3.

Введение
Цель исследования:
Определить возможности использования средств front-end
разработки для создания сайта салона мягкий мебели
Объект исследования:
Технология современных средств web-программирования.
Предмет исследования:
Технологии front-end разработки при создании сайта салона
мебели
Гипотеза:
С помощью современных средств front-end
программирования можно создать адаптивный сайт салона
мягкой мебели.

4.

Задачи проекта
1.
Изучение технологий web-программирования;
2.
Демонстрация преимуществ технологий front-end разработки;
3.
Сравнение функциональных особенностей аналогичных сайтов;
4.
Выбор функциональных особенностей будущего продукта на
основе анализа и обобщения данных аналогичных сайтов;
5.
Сбор необходимой информации
6.
Создание макета сайта
7.
Вёрстка и разработка интерфейса веб-страницы
8.
Наполнение сайта контентом
9.
Тестирование и отладка программного кода

5.

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

6.

Преимущества front-end разработки
Front-end разработка - это практика преобразования
данных в графический интерфейс с использованием
HTML, CSS и JavaScript, чтобы пользователи могли
просматривать и взаимодействовать с этими
данными.

7.

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

8.

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

9.

Создание макета сайта
Чтобы понять структуру сайта необходимо создать его макет. Для этого
был использован онлайн сервис Balsamiq Mockups.
Balsamiq Mockups — это сервис для построения макетов
пользовательских интерфейсов для упрощения разработки веб-сайтов.
1. Заголовок
2. Навигация
3. Каталог
3.1. Прямые диваны
3.2. Угловые диваны
3.3. Кухонные уголки
3.4. Детские диваны
4. Популярные заказы
5. Отзывы
6. Информация о салоне
7. Наши преимущества
Структура сайта

10.

Вёрстка и разработка интерфейса страницы
Следующим шагом будет воплощение макета в настоящий сайт. Для
этих целей прекрасно подходит текстовой редактор Brackets.
Brackets — свободный текстовый редактор для веб-разработчиков.
Brackets ориентирован на работу с HTML, CSS и JavaScript. Эти же
технологии лежат в основе самого редактора, что обеспечивает его
кроссплатформенность.

11.

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

12.

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

13.

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

14.

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

15.

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

16.

English Русский Rules