Как сделать демо версию сайта

Как написать хорошую демку

Что такое демо

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

Разнообразная линейка демок позволяет компании охватить более широкую аудиторию

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

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

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

Существует много видов демонстрации программных продуктов

Чем отличается плохое демо от хорошего

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

Если демо низкого качества, покупатель разочаруется в продукте

Обычная демка вряд ли восхитит и вдохновит кого-нибудь

А вот хорошее демо способно творить чудеса

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

Из-за чего демо становится плохим

Любая мелочь, незначительная ошибка или просто невнимательность может привести к плохому демо, потому что все это портит впечатление от продукта у пользователя.

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

Как сделать хорошее демо

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

Здесь демонстрируется несколько типов графика и то, как с ними можно работать

Источник

Демо-данные для интернет-магазинов или верстаем правильно

Не многие разработчики наполняют сайт реальными, или похожими на них, данными. В большинстве случаев все заканчивается созданием категорий Тест1, Тест2… и товаров Товар1, Товар2… Естественно, это не может отразить/показать настоящее поведение сайта/шаблона. Если с товаром еще не всегда все плохо, то с категориями почти всегда что-то не в порядке. Как качественно протестировать верстку сайта читайте ниже.

По роду своей деятельности постоянно сталкиваемся с наполнением интернет-магазинов.
Поэтому хотелось бы рассказать о проблеме/ситуации/наболевшем, которая возникает довольно часто, и сталкивались с нею, я думаю, все.

Состоит она в следующем: клиенту недавно закончили разработку сайта/дизайна/верстки, все ровненькое и красивое, и он, довольный и счастливый, начинает его наполнять. После добавления/импорта товаров и категорий, начинают «ехать» те или иные части сайта. «Все пропало!» — думает клиент, и начинает искать виноватого…

Что обычно “едет” в дизайне?:
— не отображаются уровни вложенности больше третьего;
— дизайн не рассчитан на большие тексты в описаниях (именах товаров);
— удобство навигации по нескольким картинкам;
— невероятно, но pagination не работает;
— неожиданные таблицы в тексте описаний, которые могут быть со своими стилями.

Причин почему «едет» не много, одна из них — это плохое тестирование, или его отсутствие, темы (шаблона) сайта.

до импорта:

после импорта:

Для нормального тестирования необходимо создавать как минимум несколько уровней (вложенности) категорий, названия категорий делать разной длины (а не Тест1 или Категория1), из пары-нескольких слов и т.д.
С товаром так же — разная длина имени товара, разная длина цены товара, с дробной частью и без нее, 1 и несколько фото товара и т.д.

Чтобы дизайнеру и заказчику сократить число доводок дизайна, мы подготовили и предлагаем (бесплатно!) демо-данные для интернет-магазинов.
Демо-данные подготовлены для различных cms, все шаблоны файлов импорта стандартные и импортируются через стандартные модули импорта.

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

Ссылки:
Скачать демо-данные можно здесь.
Пожелания, замечания, «если Вашей cms нету в списке» — все можно писать в комментариях здесь и на форуме.

В архиве находится следующее содержимое:
images/
OSCommerce.csv
ShopOs.csv
ImageCMS.csv
InSales.csv
OpenCart_categories.csv
OpenCart_products.csv
Phpshop_categories.csv
Phpshop_products.csv
Simpla.csv
ShopCMS.csv \ WebAsyst
TomatoCart.csv
CS-Cart.csv
HostCMS.csv
Ecwid.csv
VirtueMart.csv
Amiro-CMS.csv
ShopScript.csv
Vamshop161.csv
Prestashop.csv
Prestashop_Cat.csv
offers.xml — CommerceML-файл / Bitrix
import.xml — CommerceML-файл / Bitrix

PS.
По поводу Magento.
У Magento гибкая логика импорта CSV, поэтому почти любой пример из архива можно импортировать в Magento.
В ближайшее время добавим специальный шаблон для Magento.

Источник

Как я разрабатываю демо-материалы: от идеи до публикации

На странице iSpring Suite есть раздел «Примеры», где мы показываем, какие курсы, тесты, диалоговые тренажеры и видеолекциии можно создать при помощи наших инструментов. Часть этих материалов присылают клиенты, а часть делаю я.

Ольга Жолудова, создает демо-курсы в iSpring

Вот, например, курс «Россия и космос» — интерактивный путеводитель по истории космонавтики. Он родился из обычной PowerPoint-презентации, которую мы прокачали и сконвертировали в онлайн-формат инструментом iSpring Suite.

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

В чем особенность демо-материалов

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

У демо-курса есть и вторая функция — демонстрация возможностей программы. Значит, курс должен быть крутым: классно выглядеть, плавно работать и рождать у пользователя кучу идей: как он сможет применить функционал программы в своих проектах.

В процессе разработки демо-материалов нужно помнить об обеих функциях и стараться их сбалансировать.

1. Техническое задание

Получение ТЗ — очень важный этап. Это возможность обговорить все спорные моменты, страхи и недопонимания на берегу.

Во время обсуждения ТЗ я стараюсь конспектировать основные моменты, записывать идеи, даже самые сырые. Также уточняю сроки.

В конце обсуждения стараюсь описать своими словами, как я поняла задачу: это помогает синхронизироваться с собеседником. А еще — запускает подкорку мозга на обдумывание задачи.

ТЗ на курс «Россия и космос» выглядело примерно так: «Нам нужен курс ко дню космонавтики на русском языке. Можно рассказать о достижениях России в космосе. В курсе должна быть навигация, чёткая структура, красивые лейауты. Нужно продемонстрировать функции программы: вставка YouTube-видео в PowerPoint, вставка web-объекта и другие».

2. Первичное исследование

Когда ТЗ уложилось в голове, я иду в интернет за информацией. Этот этап не должен занимать много времени — важно охватить всю тему целиком и составить общее представление.

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

Вот такой файлик я составляла для курса «Россия и космос»

3. Грубый скетч

Я — визуал, и мне надо порисовать и пописать на настоящей, осязаемой бумаге. Обычно после первичного исследования в голове уже выстраивается некая история — как можно раскрыть тему.

Не вдаваясь в детали, я стараюсь зафиксировать на бумаге основные «вехи» этой истории. В итоге складывается грубый каркас будущего курса.

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

Грубый скетч помогает мне продумать структуру будущего курса

4. Исследование и сбор информации

Теперь, когда есть примерный каркас — я уже знаю, что искать. А благодаря списку источников знаю, где искать. Внимательнее изучаю подобранные источники, выписываю самое интересное.

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

Каркас презентации — это по сути пачка слайдов. Поэтому мой каркас выглядит не как план, а скорее как раскадровка.

5. Бумажный прототип

К бумажному прототипу я подхожу серьезно — его предстоит согласовывать с заказчиком. Поэтому я стараюсь проработать сразу несколько важных элементов:

Структура. Важно продумать иерархию и визуально отобразить ее в прототипе. Это можно сделать при помощи заголовков и подзаголовков.

Лейауты. Чтобы презентация не была скучной и монотонной, стараюсь использовать разные компоновки.

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

Картинки. Рисую скетчи и карикатуры. Местами некрасиво и смешно, но за счет иллюстраций создается целостный образ слайда. Никакая заглушка не сравнится с пусть кривым-косым, но явно человеческим лицом Циолковского.

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

6. Обсуждение прототипа

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

Вот вам позитивное фото процесса обсуждения одного из макетов =)

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

7. Работа с замечаниями

Иногда все получается с первого раза. Иногда правки вносятся на ходу. Но бывают случаи, когда нужно заново пройтись по шагам 1–5.

8. Цифровой прототип: версия 0

Если на этапе 7 было много правок, я стараюсь перерисовать прототип заново, на чистовик. На основании этого прототипа дизайнер будет дизайнить дизайн — лучше, чтобы в нём было все чётко и понятно.

Далее я просто фоткаю прототип на телефон и загружаю в «Гугл Диск». Нулевой цифровой прототип готов. Можно передать его дизайнеру, чтобы тот начинал подбирать картинки, прорабатывать лейаут и т.п.

Бумажный прототип я загружаю на «Гугл Диск» и отдаю дизайнерам

9. Работа над текстами

Пока дизайнер трудится над визуальным обликом будущего курса, я пишу тексты. В качестве основы использую все те же источники, которые собрала на этапе 2.

Копипастить не круто, а с большинства сайтов — нельзя 🙂 Поэтому стараюсь объяснить тему своими словами. Часто получается даже понятнее 😉

Для текстов я обычно завожу гугл-табличку с тремя колонками:

Готовый файлик я передаю дизайнеру. Дальшеидет работа над цифровым прототипом.

10. Цифровой прототип

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

11. Публикация на сайте

Для этого есть iSpring, который прямо из PowerPoint опубликует наш прототип в формат HTML5. Файл в этом формате можно загрузить на сайт, что мы и сделали.

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

Система дистанционного обучения для бизнеса

Поставит на автопилот развитие сотрудников.
Быстрый старт онлайн‑обучения за 1 день.

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

Источник

Как посмотреть демо-версию программы по ссылке?

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

Подключение через браузер

В окне браузера в адресной строке вставляем ссылку и нажимаем клавишу «Enter» на клавиатуре. В результате откроется окно:

Выбираем пользователя (пароль вводить не надо) и нажимаем кнопку «ОК».

Важно! Для успешной работы необходимо разрешить всплывающие окна на сайтах в браузере. Прилагаем инструкции для ознакомления для разных браузеров:

Подключение при наличии установленной платформы 1С

Если у Вас на компьютере установлена платформа «1С: Предприятие» и Вы не хотите работать через браузер, то базу можно запустить следующим образом:

Запускаем 1С:Предприятие, нажимаем «Добавить», указываем вариант «Добавление существующей информационной базы» и нажимаем кнопку «Далее»:

Указываем название, тип расположения информационной базы «На веб-сервере», вводим ссылку в поле «Адрес информационной базы» и нажимаем кнопку «Далее»:

На последнем этапе нажимаем кнопку «Готово»:

После этого можно запускать добавленную базу.

Подключение при отсутствии платформы 1С

Если у Вас нет платформы 1С и Вы не хотите работать через браузер, то можно скачать бесплатную версию платформы и запустить ссылку с помощью неё, для этого:

Заходим на сайт http://online.1c.ru/catalog/free/ и скачиваем платформу 1С:

Скачать нужно версию 8.3.15.1830:

1С:Предприятие 8. Тонкий клиент. Версия платформы 8.3.15.1830 от 19.11.2019

или 1С:Предприятие 8. Тонкий клиент. (64-bit) Версия платформы 8.3.15.1830 от 19.11.2019

При нажатии по выбранной версии открывается окно с описанием программы, выбираем пункт «Получить продукт бесплатно»:

Заполняем анкету и нажимаем кнопку «Отправить»:

После этого на указанный Вами электронный адрес придет письмо со ссылкой на дистрибутив платформы.

Открываем письмо, скачиваем дистрибутив платформы и устанавливаем:

Запускаем файл setup.exe:

В окне приветствия нажимаем «Далее»:

Затем снова нажимаем «Далее» (каталог установки можно оставить по умолчанию):

Выбираем язык интерфейса и нажимаем «Далее»:

Для начала процесса установки нажимаем «Установить»:

После завершения установки открываем программу 1С:Предприятие и нажимаем кнопку «Добавить»:

Указываем название, тип расположения информационной базы «На веб-сервере», вводим ссылку в поле «Адрес информационной базы» и нажимаем кнопку «Далее»:

Для завершения добавления базы нажмем «Готово»:

Базу можно запускать:

Что делать если ссылка не открывается через 1С и браузер

При открытии базы по ссылке из 1С может появиться такое сообщение:

В таком случае необходимо выполнить следующие действия:

Выключить антивирусник и снова открыть программу

Открыть ссылку через браузер. Если через браузер не открывается, рекомендуется также выключить антивирусник и открыть ссылку повторно.

Источник