Перейти к содержимому
  • Блок 5 - Интересные фишки

    Узнаете о самых полезных фишках работы в Adobe Muse. Каким образом делаются интересные эффекты. Про интеграцию сайта с разными сервисами. Интересные фишки в общем.

    5 занятий в этой категории

    1. Установка Яндекс.Метрики

      66 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_02/5.1_Kak_ustanovit_YAndeks.Metriku.mp4.9c4e4ff4b5b1532a493d6fcf23b6cfba.mp4 4 До 5 минут https://creatura.club/uploads/ Средняя сложность Скрыть

      В этом уроке мы рассмотрим, как установить Яндекс.Метрику на свой сайт в программе AdobeMuse. Заходим в программу и, допустим, у нас есть некий сайт, на который мы хотим установить Яндекс.Метрику. Для того чтобы установить ее, нам необходимо взять код Яндекс.Метрики в самом Яндексе. Для этого мы заходим в браузер и заходим в поисковую систему yandex.ru Нам необходимо быть зарегистрированным в данной системе. Далее нажимаем "Еще" - "Все сервисы". Прокручиваем страницу вниз, выбираем "Вебмастер". Здесь нажимаем "Метрика".

      Мы попадаем в сервис Яндекса, который позволяет добавить счетчик Яндекс."Метрики. Нажимаем на кнопку "Добавить счетчик". Придумываем какое-нибудь имя счетчику, вписываем домен сайта, на котором будет размещен данный счетчик. Далее ставим флажок "Я принимаю условия пользовательского соглашения", можем установить "Принимать данные только с указанных доменов", поставить "Уведомления о проблемах в работе сайта", уведомления будут приходить на вашу почту Яндекса, либо вы можете указать другую почту.

      Также можете указать, чтобы вам приходили уведомления смс-сообщением. Выставляем свой часовой пояс и тайм-аут. Далее нажимаем "Создать", и теперь мы создали наш счетчик. У него есть свой номер, вы сможете настроить все те же самые параметры. Нажимаем закладку "Код счетчика",чтобы его получить. Обычно выставляют флажки "Вебвизор", а все остальное оставляем по умолчанию. Если мне нужен будет дополнительный инфомер для размещения на сайте, то можем поставить галочку и здесь.

      Далее копируем весь код, который нам предоставил Яндекс, в буфер обмена. Мы можем нажать на кнопку "Скопировать в буфер", либо просто кликнуть 1 раз левой кнопкой мыши, нажать правую кнопку мыши и нажать "Копировать". Теперь идем в программу, заходим в "Шаблоны". В шаблон мы заходим, потому что нам нужно разместить этот код счетчика на всех страницах сайта. Если у вас только одна страница, то вы можете размещать код на одной странице. Но если у вас таких страниц несколько, то для ого, чтобы не размещать этот код на каждой странице отдельно, мы переходим в "Шаблон А", так как он применен ко всем этим страницам, нажимаем на него 2 раза левой кнопкой мыши и идем в "Страница" - "Свойства страницы".

      Далее идем в раздел "Метаданные" и вставляем код счетчика в окошко. Нажимаем правую кнопку мыши, выбираем "Вставить". Нажимаем Ок, и на этом все. Теперь код счетчика Яндекс.Метрики у нас размещен на сайте в программе Adobe Muse. Через некоторое время, если вы добавили на свой сайт этот счетчик, у вас будет доступна "Статистика" по данному счетчику. Нажимаем  кнопку "Сохранить", чтобы все настройки остались.

      А "Статистику" вы сможете просматривать в разделе "Вебмастер" на закладке "Метрика". Здесь будут доступны все счетчики, которые вы создавали для своих сайтов. Нажимаете на имя своего сайта, и вам будет доступна вся статистика по счетчику на вашем сайте. На этом мы заканчиваем данный урок. В нем мы рассмотрели, как добавить Яндекс.Метрику на сайт в программе Adobe Muse. А вам необходимо будет выполнить задание, ответить на вопрос и переходить к следующему уроку.

      • 3 комментария
      • 652 просмотра
    2. Установка Google Analytics

      70 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_02/5.2_Kak_ustanovit_kod_Google.Analytics.mp4.08cbf9dea42dbf9b83625b0a68d4795b.mp4 4 До 5 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В этом уроке мы рассмотрим установку Google Analytics в программе Adobe Muse. Сразу перейдем в браузер и зайдем на сайт www.google.com/analytics/ У вас уже должен быть зарегистрирован адрес почты на gmail.com для быстрого входа. Здесь вы нажимаете "Войти", вводите свой логин и пароль, который вас спросят при входе, далее вы попадаете на страницу, где нужно выполнить 3 шага для начала анализа трафика своего сайта.

      В первую очередь вам нужно было зарегистрироваться в Google Analytics, затем разместить свой код отслеживания на сайте, и через несколько часов у вас появится первая статистика по сайту в Google Analytics. Нажимаем "Регистрация" и попадаем на страницу нового аккаунта. Здесь мы должны ввести настройки аккаунта. Пишем сначала название аккаунта, далее указываем название сайта, например, "Тестовый сайт", и ввeсти URL вашего сайта? например, testmuse.ru

      Далее выбираем отрасль информации, которую вы предоставляете на своем сайт. Выберем, например," Компьютеры и электроника". Поставим часовой пояс, выберем, например, Россия. И далее выбираете свой город. В дальнейшем я обычно отключаю все флажки и нажимаю "Получить идентификатор отслеживания". У вас появится окно об условиях использования Goggle Analytics. Здесь вы выбираете свою страну, чтобы прочитать на своем языке.

      Читаете все, что здесь написано, и нажимаете на кнопку "Принимаю". Затем нажимаем на значок Google Analytics для перехода сразу в свой рабочий кабинет, скажем так, и переходите на главную страницу. Здесь вы сможете указать, какие рассылки вы хотите получать от Google и нажимаете "Сохранить настройки". Далее идем во вкладку "Администратор" и в столбце "Ресурс" выбираем "Код отслеживания". Нажимаем на код отслеживания, попадаем на страницу, где у нас есть окошко, в котором размещен сам код отслеживания.

      Этот код вам и нужно будет разместить на сайте в программе Adobe Muse. Копируем все, что здесь написано, нажимаем "Копировать" и переходим в программу Adobe Muse в раздел "Шаблоны", кликаем по нему 2 раза левой кнопкой мыши. Заходим в "Страница" - "Свойства страницы", в разделе "Метаданные" добавляем "html для head" Вставляем сюда код отслеживания и нажимаем Ок. Таким образом мы разместили код у себя на сайте в программе.

      Теперь если вы будете делать несколько страниц, то этот код будет размещен на всех страницах сразу. Все это потому, что мы поместили код в настройки шаблона А, а этот шаблон применен ко всем страницам. через несколько часов вы сможете отслеживать статистику по данному размещенному коду на главной станице, если перейдете в раздел "Все данные по веб-сайту".

      Здесь будет доступна полная статистика посещений, сеансов, и вы сможете отслеживать ваших посетителей по демографическому признаку, из какой системы к вам заходят на сайт и с каких мобильных устройств, с каким разрешением экрана. На этом урок закончен. В нем мы рассмотрели установку кода Google Analytics на свой сайт в программе Adobe Muse. А вам будет необходимо выполнить задание к уроку, ответить на вопросы и переходить к следующему уроку.

      • 2 комментария
      • 573 просмотра
    3. Установка онлайн-консультантов на сайт

      67 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_02/5.2_Kak_ustanovit_onlayn_konsultanta.mp4.5e4c199afd057c424e3ffd674b80f082.mp4 9 До 10 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В этом видеоуроке мы поговорим об установке и настройке онлайн консультанта на сайт в программе Adobe Muse. Онлайн консультанты позволяют вести диалог с клиентами в онлайн формате прямо со страницы сайта, а также более оперативно отвечать на все их вопросы. Как показывает практика, установка онлайн консультанта увеличивает продажи в 2-4 раза и работает намного лучше, чем обычный звонок на номер или просто заявка на почту.

      Существуют различные сервисы, предоставляющие услуги по размещению у себя на сайте такой функции:

      • www.jivosite.ru
      • chatra.io/ru/
      • livetex.ru
      • cleversite.ru
      • onicon.ru

      Посмотрим установку и настройку онлайн консультанта на примере www.jivosite.ru Давайте откроем этот сайт, он уже у нас открыт в браузере. Здесь вы можете почитать, какие услуги предоставляет данный сервис, из чего он состоит, и сколько сайтов его уже используют. Давайте сразу перейдем в раздел "Тарифы" и посмотрим. Профессиональная версия доступна вам бесплатно на 14 дней использования. При этом вам будут доступны все функции, которые входят в данный сервис. Также вам доступна бесплатная версия на 5 операторов. Она действует бессрочно и ограничена по возможностям.

      Для того чтобы начать использовать его, вам необходимо нажать на кнопку "Регистрация". Либо если вы нажмете на кнопку "Попробовать бесплатно", то вы также попадете на страницу "Регистрация".  После этого вам необходимо ввести ваши данные, то есть адрес почты, придумать или сгенерировать пароль. Если у вас есть промо-код, можете его написать в отдельном окне. Далее нажимаем кнопку "Продолжить". Далее вас попросят заполнить профиль. Здесь вы должны ввести свое имя, которое будет отображаться в чате. И потом нужно ввести адрес сайта, на котором будет расположен онлайн-консультант.

      У нас это сайт jivosite.businesscatalyst.com Здесь же вы сможете ввести номер телефона для того, чтобы быстрее решать возникшие вопросы по данному сервису, но это поле не обязательно для заполнения. Нажимайте кнопку "Продолжить". И далее нам сразу предлагают скачать приложение, без которого вы не сможете принимать сообщения от ваших клиентов. Можете скачать и установить это приложение сразу, а можете немного позже. Данное приложение доступно как для Windows, так и для Mac. Нажимаем "Установить позже" и Ок.

      На следующей странице вам предоставлен код, который нужно установить на каждую страницу вашего сайта перед закрывающим тегом body. Вы можете просто скопировать данный код либо отправить веб-мастеру, чтобы он вставил код на ваш сайт. Но поскольку мы делаем сайт сами, то нажимаем кнопку "Скопировать" - Ок. Далее переходим в программу Adobe Muse.

      В режиме "План" нам необходимо перейти в "Дизайн шаблона" и добавить данный код в шаблон. Тогда код разместится на всех страницах сайта, к которым применен шаблон. Идем в меню "Объект"  - "Вставить HTML" Нажимаем кнопку ОК и у нас появляется прямоугольник консультанта. Размещаем его где-нибудь внизу или в любой другой части сайта. И уже сейчас если мы перейдем в режим "Просмотр", то мы увидим прямоугольник в правом нижнем углу с надписью "Отправьте нам сообщение". Если мы на него нажмем, то у нас развернется окно, где мы сможем написать что-нибудь сами себе со своего сайта.

      Давайте перейдем снова в режим "Дизайн шаблона". Если мы перейдем режим "Дизайн страницы", то мы увидим тот же самый прямоугольник, поскольку данный шаблон применен к данной странице. Теперь экспортируем сайт на Business Catalyst. Проходит передача на сервер. И мы сразу видим в браузере, что онлайн консультант работает. Но он еще не полностью работает, так как нас нет онлайн. Для того чтобы мы были онлайн, нам необходимо установить программу. Если мы сейчас зайдем снова на данный сайт www.jivosite.ru, пролистаем вниз и перейдем в "Панель управления", то мы сначала увидим, что код консультанта не вставлен на нашем сайте. Давайте разберемся, в чем дело.

      Переходим в настройки, далее в "Опции" и читаем "Название сайта: Адрес вашего сайта нужно вводить префиксом http//" У нас он введен неправильно. Так что перейдем в наш сайт, скопируем здесь адрес нашего сайта, вернемся в "Панель управления" и вставим название сайта уже как положено. Листаем вниз, нажимаем "Сохранить". Теперь снова переходим на главную страницу и видим, что все в порядке. Наш сайт привязан к онлайн консультанту. Давайте посмотрим, что мы можем настроить.

      Все настройки делаются в панели управления на данном сайте. Во-первых, вам доступен сам код постоянно, чтобы вы смогли его устанавливать на сайт. В любой момент вы сможете его снова скопировать в буфер и вставить на свою страницу сайта либо отправить веб-мастеру на почту. Ниже у нас есть кнопки с движками. Также вы сможете скачать приложение для Windows. Нажимаем "Скачать приложение", объем 35 Мб. Пока оно скачивается, перейдем в режим "Дизайн", в котором мы можем настроить любое цветовое решение. Вы можете выбрать цвет окна консультанта из списка, также можете выбрать и свой цвет.

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

      Поставим его на место, нажимаем "Сохранить", и  все изменения у нас сохранены. Нажимаем на кнопку "Вернуться". Это были основные настройки, которые вы можете использовать в онлайн консультанте. Здесь есть также и другие настройки, которые вы можете оставить по умолчанию или изменить под себя. После каждого изменения необходимо нажимать на кнопку "Сохранить". Все, что вы здесь изменяете, будет автоматически меняться и на вашем сайте. 

      Давайте установим сейчас приложение, нажав "Запустить" - "Установить". Происходит копирование файлов  и установка программы. Нажимаем сразу "Запустить jivosite". После запуска программы вам необходимо будет вести здесь свою почту и пароль, на который вы регистрировались, и нажать Login. Далее вы можете протестировать свой микрофон. Здесь в программе вы сразу видите, что вы сейчас онлайн, в правом верхнем углу. Если вы перейдете в браузер, увидите, что мы уже онлайн. Например, напишем "Добрый день". Теперь ваш Windows показывает зеленое сообщение от консультанта с написанным нами текстом.

      Если вы нажмете на кнопку "Игнорировать", то в чате будет надпись "К сожалению, сейчас никто не может ответить". Пользователю будет предложено написать сообщение через обычную форму чата. Если мы перезагрузим страницу и напишем в окне консультанта снова что-то, то нам снова покажется зеленое окно, нажимаем кнопку "В чат" и автоматически переходим в окно самой переписки. При отправлении ответа в чате на сайте появляется сообщение клиенту. Таким образом мы можем разговаривать с нашими пользователями онлайн со страницы своего сайта. Пользователь вводит сообщение на сайте, а мы принимаем через данную программу.

      Если у нас несколько сайтов и несколько онлайн консультантов, например, 5 операторов, то мы сможем прямо через эту программу общаться с нашими пользователями. Для того чтоб онлайн консультант не так часто выскакивал и не раздражал пользователей, все настройки делаются через панель управления на офиц. сайте в разделе "Автоматические действия": "Активное приглашение в диалог", например, можете просто отключить или изменить.

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

      • 4 комментария
      • 650 просмотров
    4. Оптимизация графики для сайта

      68 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_02/5.3_Optimizatsiya_grafiki_ispolzuemoy_na_sayte.mp4.66cf6f242cccf9a29bbf249a8b6fb892.mp4 5 До 5 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В этом уроке мы поговорим об оптимизации графики, используемой на сайте в программе Adobe Muse. Для того чтобы оптимизировать графику своего сайта, все картинки, которые вы размещаете у себя на сайте, должны оптимизировать под определенный размер и объем файла. Мы уже скачали несколько картинок, которые занимают, например, 290 кб, 1628 кб, 198 кб, 412 кб. Они все a формате .jpeg примерно 1920 на 1200, а остальные даже больше, но уже немного оптимизированы.

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

      • tinypng.com
      • www.optimizilla.ru
      • fotomini.ru
      • webresizer.com/resizer
      • compressor.io
      • tools.dynamicdrive.com/imageoptimizer
      • www.jpegreducer.com
      • www.picresize.com
      • jpeg-optimizer.com
      • www.jpegmini.com/main/shrink_photo
      • tinypng.org
      • www.punypng.com
      • quasimodo.com/ZorroSVG

      Давайте перейдем в браузер, у нас, например, уже открыт сайт tinypng.com. Он позволяет оптимизировать .png и .jpeg файлы, достаточно переместить сюда файлы или выбрать картинку из папки. Выберем самую большую картинку, которая занимает 1.58 Мб, нажимаем "Открыть", и происходит автоматическая компрессия картинки. После того, как все закончено, мы видим, что изначальный файл был 1.7 мб, а конечный 225 кб То есть мы на 86% уменьшили объем картинки и сэкономили 1 Мб.

      Далее вы можете сохранить эту картинку на dropbox или просто скачать ее, нажав на кнопку "Download". Есть еще другой сервис - fotomini.ru Здесь также перетаскиваете картинку или выбираете из папки. Вы видите, что данный сервис уменьшил объем на 80%. Точно также вы сможете ее скачать и использовать в своих проектах. Но есть еще один очень интересный способ, который есть в самой программе Adobe Muse. Давайте разместим на наш сайт картинку через функцию "Поместить".

      Выбираем самую большую картинку, нажимаем "Открыть" и вставляем ее на свою страницу сайта. Немного уменьшим ее до того размера, как нам необходимо. Размер моего сайта 960 пикселей и картинку мы хотим разместить по ширине сайта. Давайте разместим еще пару картинок. Вставим еще раз эту же картинку, изменим размер до 200 пикселей и разместим ее на странице. Третью картинку уменьшим до 500 пикселей и разместим ее рядом в другими картинками.

      Далее идем в панель "Ресурсы", выделяем все картинки, зажимая Shift, нажимаем правую кнопку мыши и "Оптимизировать размер ресурса". После выбора данной функции, если вы еще раз нажмете правой кнопкой мыши на данных изображениях, то вы больше не увидите такую функцию. Ресурсы все оптимизированы. Теперь мы выгрузим сайт в HTML через "Экспорт через HTML" и сохраним сайт в папку на рабочем столе с именем "123". Эта папка сейчас пустая. Нажимаем Ок, происходит выгрузка сайта. Автоматически нас перебрасывает в браузер для просмотра.

      Давайте перейдем в папку "123" у себя на компьютере и посмотрим, какой размер картинок после оптимизации программой Adobe Muse. И вот, что мы видим, наши картинка 1 самая большая, которая весила 1.7 V, теперь весит всего 162 кб. Это еще меньше, чем мы оптимизировали с помощью онлайн сервиса. Там, как вы помните, было 227 кб. Таким образом, даже не используя онлайн сервисы, вы можете оптимизировать свои изображения, которые размещаете в программе Adobe Muse, прямо в это программе. На этом данный урок закончен. Вам необходимо будет выполнить задание, ответить на вопросы и переходить к дальнейшему обучению.

      • 4 комментария
      • 689 просмотров
    5. Где найти вдохновение для работы над сайтом?

      69 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_02/5.4_Gde_nayti_vdohnovenie_dlya_rabotyi_nad_saytom.mp4.3b6041e32dc37a6e31fc356e3f150d92.mp4 5 До 5 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

      Мы уже открыли в браузере несколько ссылок, и первый сайт - это onepagelove.com Эти сайты на английском, но вы сможете посмотреть лучшие сайты, сделанные другими людьми. Также сможете отсортировать сайты, например, выбрать сайты с параллаксом, сможете его открыть и посмотреть. И далее вам предлагают посмотреть похожие сайты по данной тематике. 

      Следующий сайт, где вы сможете взять вдохновение - это land-book.com Здесь тоже есть множество интересных сайтов, на которых вы сможете что-то для себя подчеркнуть и узнать, как другие видят дизайн сайтов, взять необходимые элементы, которые вам хотелось бы привнести на свой сайт. Например, открыв один из этих сайтов, вы захотели сделать на своей странице какой-либо из элементов, например, разместить элемент анимации ближе к футеру своего сайта. 

      Следующий сайт, который мы хотели бы вам порекомендовать - это zurb.com/patterntab На этом сайте размещено огромное множество отдельных элементов для сайта и очень удобная система поиска. Но сайт опять же на английском. Например, выбираете кнопку "Стиль", далее "Градиенты", и перед нами появляется серия сайтов, которые используют элементы градиента. Вы видите, что на данном сайте использован градиент от синего к фиолетовому. Давайте перейдем назад и посмотрим, что можно еще здесь найти. Например, отсортируем "По типу" - "Слайдер". Например, открываем какой-то слайдер, и этот слайдер можно посмотреть подробнее и увидеть, как он работает. Мы видим, что данный сайт имеет награду, листаем вниз и видим слайдер, который размещен на данной странице. если мы нажимаем на кнопки, то картинки перед нами меняются. 

      Следующий сайт, где мы можем найти вдохновение - это muse.adobe.com/site-of-the-day Здесь каждый день появляется новый сайт, который заслуживает внимания с точки зрения компании Adobe. Все сайты, расположенные здесь, сделаны в Adobe Muse. Вы можете открыть любой сайт и посмотреть, из каких элементов он состоит.

      Также очень большая галерея сайтов находится на сайте muse.digitalmakers.ru в разделе "Галерея сайтов". Здесь есть очень удобный поиск. Весь поиск на русском языке. Все данные сайты созданы исключительно с помощью Adobe Muse. Вы можете отсортировать сайты по количеству страниц, интернет-магазинам, тематикам, продающим сайтам, курсам и тренингам, другим сайтам, по используемым эффектам, по оптимизации под определенные устройства, по языку сайта, а также можете выбрать сайт по премии(без премии и высшая лига) То есть либо по простым сайтам, либо по самым крутым.

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

      • 4 комментария
      • 556 просмотров
×