Лабораторная работа "Сервисы web 2.0 для разработки сайтов"

Лабораторная работа «Форматы представления презентационных материалов»

Сервисы web 2.0 для разработки сайтов

1. Изучите материалы Лекции;

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

• Искусственный интеллект;

• Биг дата;

• Нейронная сеть;

• Блокейн-технологии;

• Облачные вычисления;

• Интернет вещей;

• «Умный город»;

• «Умный дом».

Регистрация на Wix занимает несколько минут. Для создания учётной записи вы можете использовать электронную почту или аккаунты Facebook и Google. Достаточно придумать пароль от аккаунта и подтвердить регистрацию с помощью ссылки, которая придёт в письме от Wix (рисунок 1).

Рисунок 1 - Регистрация

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

Следующее окно — выбор способа создания сайта. Есть два подхода:

• технология wix adi — искусственный интеллект задаёт несколько уточняющих вопросов и на основании предоставленной информации формирует интерфейс сайта.

• ручное создание сайта: выбор шаблона и доведение его до ума в визуальном редакторе (рисунок 2).

Рисунок 2 – Выбор способа создания сайта

Использование первого подхода не исключает второй способ. После работы Wix ADI вы всё равно попадёте в визуальный редактор, где сможете настроить внешний вид сайта. Так что давайте посмотрим, какими возможностями обладает искусственный интеллект конструктора (рисунок 3).

Рисунок 3 – Внешний вид сайта

После выбора опций Wix ADI самостоятельно соберёт отмеченные вами блоки, применит к ним тип шаблона и дизайн главной страницы, а также заполнит список контактов. Результат работы мастера откроется в визуальном редакторе (рисунок 4).

Рисунок 4 – Результаты работы мастера

Вы можете выбрать дизайн сайта вручную. Для этого в окне выбора способа создания используйте второй вариант. После нажатия на кнопку «Выбрать шаблон» вы окажетесь в каталоге тем Wix. Шаблоны разделены на категории, по умолчанию раскрыт тот раздел, который подходит для вашего типа проекта.

У категорий есть подкатегории — например, шаблоны интернет-магазинов есть для одежды, электроники, спорта, книг и других товаров. Тем оформления много. Все они разработаны профессионалами и имеют адаптивный дизайн. Перед выбором вы можете посмотреть шаблон. По умолчанию он открывается в полноэкранном режиме десктопа. Есть также возможность переключения на мобильную версию темы (рисунок 5).

Рисунок 5 – Шаблоны сайта

Все ссылки и кнопки в демо-режиме кликабельны, так что вы можете изучить каждый раздел шаблона. Если всё устраивает, нажмите «Редактировать». После короткой обработки выбранная тема откроется в визуальном редакторе. Название сайта и контактные данные вы будете менять уже в процессе настройки проекта — в этом ещё одно отличие от использования режима Wix ADI.

Каким бы способом вы ни создали сайт, в визуальном редакторе в любом случае будет шаблон с демонстрационным контентом. Все элементы, которые вы видите на экране, можно изменить, переместить или удалить. При наведении курсора на блок появляются инструменты для управления им. Если это текстовый элемент, то вы можете тут его переписать, изменить шрифт, начертание, размер букв, форматирование, цвет и другие параметры. У крупных блоков больше настроек — можно, например, выбирать способ отображения содержимого или добавлять анимацию (рисунок 6).

Рисунок 6 - Настройка функциональности и дизайна

Панель инструментов редактор состоит из 7 разделов. Чтобы вы понимали, что можно в них делать, пройдёмся кратко по каждой вкладке.

• «Меню и страницы» — здесь вы добавляете новые страницы и управляете отображением ссылок в меню навигации.

• «Фон» — управление фоном каждой страницы. Можно залить её цветом, добавить фото или видео.

• «Добавить» — каталог элементов интерфейса. Нужно добавить кнопку — просто перетащите её из этого списка на рабочее пространство. Элементов огромное количество, от простой фотографии до полноценной формы онлайн-записи, которая настраивается отдельно.

• Wix App Market — магазин приложений Wix. Позволяет расширить стандартную функциональность конструктора. Через него подключаются онлайн-чаты, поиск по сайту, различные формы, всплывающие окна и другие сложные элементы.

• «Медиа» — инструменты для загрузки файлов, а также каталог бесплатных фото и видео.

• «Блог» — отдельный модуль для управления блоковой функциональностью. Через него вы будете создавать и редактировать посты, сортировать их по категориям, скрывать или удалять.

• «Интернет-магазин» — модуль для управления товарами и продажами. Позволяет настроить все аспекты работы онлайн-магазина, в том числе способы оплаты и доставки заказов.

Для настройки сайта не требуются специальные знания. Вы можете полностью управлять интерфейсом вручную, добавляя, перетаскивая и видоизменяя элементы. Изменения сохраняются автоматически, но вы можете их отменить.

Редактор Wix позволяет также отдельно настраивать мобильную версию сайта. Важно, что вы не создаёте новые страницы с дублирующим контентом, а лишь настраиваете отображение блоков в зависимости от разрешения экрана пользователя, то есть делаете дизайн адаптивным (рисунок 7).

Рисунок 7 – Мобильная версия

Чтобы переключиться в режим мобильного редактора, нажмите на значок смартфона на верхней панели Wix. Сначала появится мастер настройки, который поможет установить основные параметры:

• выбрать, с какой стороны открывается меню в мобильной версии: сверху, слева, справа;

• указать, что происходит с шапкой сайта при прокручивании: прокручивается вместе с контентом, исчезает, становится прозрачной или фиксируется сверху;

• выбрать расположение иконок быстрый действий (позвонить, написать): сбоку, внизу, скрыть с сайта;

• добавить кнопку «Наверх» или отказаться от её использования.

После выбора этих параметров вы попадёте в мобильный редактор. Он предоставляет тот же набор инструментов, что и редактор полной версии сайта. Однако шаблон выглядит иначе — как его придумал для смартфонов дизайнер.

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

Рисунок 8 – Добавление новых постов

Наполнение магазина выполняется по схожему сценарию. При включении магазина на главной странице сайта по умолчанию появляется каталог в виде сетки. Вы можете также добавить слайдер, блок «Похожие товары», виджет отдельной позиции, иконку корзины и кнопку «Добавить корзину» — в общем, сформировать привычный интерфейс интернет-магазина.

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

Рисунок 9 – Добавление товаров

Чтобы сайт появился в выдаче поисковых систем, необходимо его оптимизировать. За это в конструкторе отвечает Wix SEO Мастер.

1. Раскройте меню «Настройка».

2. Нажмите на пункт «Поисковая оптимизация».

3. Укажите название сайта или бизнеса.

4. Добавьте физическое расположение офиса, если он есть.

5. Добавьте ключевые фразы, которые описывают бизнес. Например, интернет-магазин, бытовая техника и т.д.

После обработки, полученной информация Wix создаст индивидуальный SEO-путеводитель. Он состоит из большого количества пунктов, на выполнение которых потребуется значительное время. Но главное, что вы пройдёте все основные этапы оптимизации, после чего ваш сайт будет корректно отображаться в поисковой выдаче. Это значит, что его увидят пользователи, которые задают релевантные запросы (рисунок 10).

Рисунок 10 - SEO

После проверки готовности сайта можно размещать его в общем доступе. Для этого нажмите в редакторе кнопку «Опубликовать». После публикации сайт будет доступен для пользователей по тому доменному имени, которое вы прикрепили в его настройках.

Если у вас ещё нет личного аккаунта Google, его нужно создать. Для бизнес-клиентов предоставляется аналогичный сервис, но он работает как один из инструментов набора «Google Мой бизнес» (большая часть контента будет сгенерирована автоматически на основании заполненного профиля компании).

Рисунок 11 - Регистрация

Аккаунт Google нельзя создать на основе имеющейся почты стороннего сервиса (Яндекс, Майл и т.п.) или на основе аккаунтов социальных сетей, нужна новая регистрация с указанием имени/фамилии, а также номера телефона (обязательно для двухфакторной авторизации). Обратите внимание, если у вас есть аккаунт на Android-смартфоне, можно использовать его – Гугл поддерживает единую авторизацию во всех своих сервисах.

Если аккаунт Google у вас уже есть, просто авторизуйтесь и перейдите на страницу сервиса Google Sites.

На стартовой странице сервиса вам будет предложено несколько типовых шаблонов и возможность создания сайта «с нуля».

В любой момент вы можете удалить созданные страницы и сайты, поэтому мы рекомендуем начать с шаблонов, чтобы вы смогли разобраться с функционалом и познакомиться с основными возможности платформы (рисунок 12).

Рисунок 12 – Стартовая страница

Даже если вы выберите пункт «Пустой файл», в окне редактора будет создана базовая страница с блоком заголовка. Этот блок можно удалить, отредактировать или заменить другим типом блоков.

Возможность публикации появляется только после изменения названия сайта.