Презентация на тему: Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии

Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии front-end разработки
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии
Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии front-end разработки
1/16
Средняя оценка: 4.3/5 (всего оценок: 47)
Код скопирован в буфер обмена
Скачать (5379 Кб)
1

Первый слайд презентации: Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии front-end разработки

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

Изображение слайда
2

Слайд 2

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

Изображение слайда
3

Слайд 3

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

Изображение слайда
4

Слайд 4

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

Изображение слайда
5

Слайд 5

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

Изображение слайда
6

Слайд 6

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

Изображение слайда
7

Слайд 7

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

Изображение слайда
8

Слайд 8

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

Изображение слайда
9

Слайд 9

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

Изображение слайда
10

Слайд 10

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

Изображение слайда
11

Слайд 11

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

Изображение слайда
12

Слайд 12

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

Изображение слайда
13

Слайд 13

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

Изображение слайда
14

Слайд 14

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

Изображение слайда
15

Слайд 15

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

Изображение слайда
16

Последний слайд презентации: Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии: Создание сайта салона мягкой мебели «Интерьер Холл» с использованием технологии front-end разработки

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

Изображение слайда