Перейти к содержимому

Олег Поддубный

Участник
  • Публикации

    252
  • Зарегистрирован

  • Посещение

  • Дней в лидерах

    22

Последний раз Олег Поддубный выиграл 25 декабря 2017

Публикации Олег Поддубный были самыми популярными!

Репутация

217 Очень хороший

5 подписчиков

О Олег Поддубный

  • Звание
    Бывалый

Посетители профиля

1 214 просмотра профиля
  1. Всем доброго времени суток. Недавно вышло замечательное обновление Muse, которое очень качественно повлияло на возможности для разработчиков виджетов. Теперь стало намного проще работать с цветом и файлами, которые пользователю необходимо выбирать или добавлять для работы виджета. Но теперь все по порядку. Новые параметры работают в версии Muse 2014.3 и старше. Для этого в <HTMLWidget formatNumber=”3”> указываем формат 3. Оба параметра содержат уже давно известные нам атрибуты name и label. О них мы сегодня не будем говорить. Мы поговорим о более интересных специфических параметрах. Параметр Выбора цвета (<color>) Параметр позволяет в меню виджета открыть мини-окно где пользователь может удобно выбрать цвет, как и при выборе цвета любого другого элемента в Muse. Данные из этого параметра передаются в виджет как в формате RGB (0, 0, 0) так и в формате HEX (#000000). Способ передачи определяться при создании виджета. Значение цвета по-умолчанию - ( defaultValue ) – изначальное значение параметра цвета при первом его размещении в Adobe Muse. Может быть задано как в формате RGB (0, 0, 0) так и в формате HEX (#000000). (Обязательный атрибут) Формат RGB ( rgbColor ) – Имеет формат да или нет (true, или false). Если включен, то передаст в виджет цвет в формате RGB через запятую (Пример: 255, 255, 255). Формат HEX( formatHexColor ) – Имеет формат да или нет (true, или false). Если включен, то передаст в виджет цвет в формате HEX через запятую (Пример: #ff0000). Поддержка отсутствия цвета ( supportsNoneColor ) - Имеет формат да или нет (true, или false). Если включен, позволит пользователю не выбирать цвет, другими словами – выбрать прозрачный цвет. Теперь сразу разберем параметр на примере: Для первого примера возьмем уже известный нам Text Shadow. Ранее параметр цвета тени состоял из 3 параметров и был крайне неудобный для настройки: <number name="redColor" defaultValue="0" min="0" max="255" stap="1" snap="1" /> <number name="greenColor" defaultValue="0" min="0" max="255" stap="1" snap="1" /> <number name="blueColor" defaultValue="0" min="0" max="255" stap="1" snap="1" />И передавался в виджет следующим образом: text-shadow: 1px 1px 1px rgba({param_redColor}, {param_greenColor}, {param_blueColor}, 1);Теперь же все стало намного проще и удобней. Одна строка – один параметр: <color name="shadowColor" rgbColor="true" defaultValue="0, 0, 0"/>А вот как теперь будет выглядеть передача параметра в виджет: text-shadow: 1px 1px 1px rgba({param_shadowColor}, 1);Для второго пример возьмем параметр цвета секунд в таймере обратного отсчета. Ранее цвет секунд в таймере задавался через параметр текст: <text name="colorTimerSec" defaultValue="#FF0000" />Вполне понятно, но не удобно для выбора. Приходилось вручную копировать значение цвета где-то и переносить его в заданное поле. После текущего обновления данный параметр можно указать следующим образом: <color name="colorTimerSec" formatHexColor="true" defaultValue="#FF0000" />При этом суть передачи в само тело виджета не поменялось: .sectext { color: {param_colorTimerSec}; }В следующем мини-уроке мы рассмотрим параметр передачи файлов <file> на конкретном примере. Вопросы к этому уроку задавайте в комментариях ниже.
  2. Теперь перейдем от теории к практике. Сегодня Мы с Вами напишем небольшой простой виджет для тени текста, который будет работать следующим образом – В специально отведенное поле необходимо будет ввести ID элемента, для которого вы захотите прорисовать тень, после чего будут уже идти настройки этой тени. Начнем создавать наш виджет: Открываем свой Notepad++;Создаем файл с названием TextShadow.mucow;Приступаем к составлению виджета.Для начала пропишем первую строку: <?xml version="1.0" encoding="UTF-8"?>И пропишем указание начала и конца виджета: <HTMLWidget> </HTMLWidget>Теперь можно приступить к прописанную основных параметров: Для начала укажем имя самого виджета: name=”MyShadow”; Если мы хотим, чтоб наш виджет отображаться во всех версиях то определяем его версию как 1: formatNumber=“1”; Теперь укажем будем ли мы локализовать виджет при помощи таблицы символов, или оставим это до лучших времен. По моему опыту скажу, лучше это отложить на потом, в виджете частенько приходится что-то добавлять или убирать, т.к. постоянно находятся новые идеи и новые баги а работа с таблицей символов отнимает дополнительное время, по этой причине ее лучше прописать тогда, когда Вы свой виджет уже готовы выпустить в «прод». Итого пишем: localization=“none”; Как и любой уважающий себя родитель мы же тоже хотим, чтоб смотря на наше творение человек понимал кто сие чудо сделал)) И по этой причине прописываем creator=“Me” и от себя добавляем немного «бла-бла» по желанию: termsText= “I’m the Best of the Best of the Best!!!” И напоследок укажем размеры нашего виджета: defaultWidth="20px" defaultHeight="20px"; И с учетом того, что нам не нужно выводить что-то при помощи этого виджета на дисплей указываем, что его размеры менять нельзя. Да и зачем? : isResizable="false";Вот мы и основную информацию о нашем будущем виджете. В куче это будет выглядеть примерно так: <HTMLWidget name="MyShadow" formatNumber="1" localization="none" creator="Me" termsText=" I’m the Best of the Best of the Best!!!" defaultWidth="20px" defaultHeight="20px" isResizable="false">Для того чтоб начать параметры нам в первую очередь необходимо понять чего вообще мы хотим туда передать. Для этого разберемся немного с атрибутом text-shadow. У него есть несколько способов написания. Я предпочитаю следующий: text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); Для предпросмотра эффекта вы всегда можете воспользоваться ресурсом http://css3gen.com/ . Там можно легко выбрать все настройки и сразу увидеть результат, что часто бывает очень полезно. Что же за что тут отвечает: text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); Отмеченное зеленым цветом - отвечает за расположение тени.Отмеченное синим - отвечает за размытие тениОтмеченное оранжевым - указывает rgb формат цвета тениОтмеченное красным - указывает прозрачность текста.Нам нужно прописать поля для каждого из этих параметров. Помимо их нужно будет поля для указания для какого блока текста Вам необходимо применить тень. Приступим... В первую очередь укажем начало и конец блока параметров:<parameters> </parameters>Первой сделаем возможность ввода ID элемента: Для прописывания этого блока лучше всего подойдет однострочный текстовый блок. <text> Дадим имя этому блоку name= “TextID” и после этого укажем значение по умолчанию defaultValue=“#” в итоге получится строка похожая на эту: <text name="textID" defaultValue="#" />Теперь поместим параметры расположения Для того, чтоб понять как он работает нужно посмотреть на систему координат: при указании 1px 1px тень будет смещена вправо и вниз на 1px, а при -1px и -1px – соответственно на 1px влево и вверх. При прописывании этих параметров они будут похожи и отличатся у них будет только имя по этому, и пропишем только один параметр а второй можно будет просто копировать. Для прописывания этого параметра очень кстати будет <number> Указываем имя блока: name=“hShadow” и его значение по умолчанию: defaultValue=“1” Теперь нужно указать минимальные и максимальные значения для данного параметра. (min=“-1000” max=“1000”) В итоге получится что-то вроде этого:<number name="hShadow" defaultValue="1" min="-1000" max="1000"/> <number name="vShadow" defaultValue="1" min="-1000" max="1000"/>Следующим укажем параметры размытия тени. Тут все просто, чем выше значение от 0 тем больше размытие. Прописываем имя name=“blureShadow” и сразу же указываем defaultValue="0". Допустимые значения будут от 0 и до 1000 (min=“0” max=“1000”) Итог:<number name="blureShadow" defaultValue="1" min="0" max="1000"/>Пришло время присвоить цвет и так как мы указываем его в формате rgb, то нужно вывести поле для трех параметров, которые будут отвечать за каждый цвет. Отличатся у этих полей так же будет только имя. Цвет в rgb задается в диапазоне от 0 до 255. Имя присвоим соответствующее каждому цвету. Чтоб было понятно что куда подключать name=“rColor” (для красного цвета). defaultValue=“0” и min=“0” max=“255”. Получаем вот что:<number name="rColor" defaultValue="0" min="0" max="255"/>И последний параметр, который мы пропишем – прозрачность тени. Увы параметр <number> не подойдет, так как, сколько я не пробовал значение меньше 1,00 там не вводятся (речь идет о значениях после запятой), по этой причине применим параметр <text>. Пропишем имя name="textOpacity" и defaultValue="1.00". При этом обязательно следует указать через точку “1.00”. Тут 1.00 значит абсолютно не прозрачный и 0.00 – абсолютно прозрачный.<text name="textOpacity" defaultValue="1.00" />Вот мы и прописали параметры. Теперь можно приступить и к телу самого виджета. Как вы уже, наверное, знаете то Text-Shadow это стиль оформления текста, поэтому и прописывать его мы будем в месте для стилей – в <head> документа. При этом обязательно внутри <style> ... </style> Для того чтоб нам это сделать нам нужно для начала указать то что мы хотим, чтоб виджет добавил этот текст именно в блоке <head> Для этого пишем следующие строки: <headHTML> <[CDATA[ тут код который надо разместить в <head> ]]> </headHTML>Теперь вписываем то что мы хотим, чтоб виджет добавил. В нашем случае это: <style> #someID {text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); } </style>Но при этом все значения нам необходимо заменить на те, которые хотим указать мы. Для этого нужно подключить параметры. Вместо интересующего нас значения пишем {param_ TextID } (Где TextID – это name параметра, который мы хотим подставить в данную область) Получится вот такой вот текст в итоге: <headHTML> <![CDATA[ <style> {param_textID} { text-shadow: {param_hShadow}px {param_vShadow}px {param_blureShadow}px rgba({param_rColor}, {param_gColor}, {param_bColor}, {param_textOpacity}); } </style> ]]> </headHTML>Сохраните файл .mucow! Вот и все. Теперь его можно спокойно перетащить из папки в рабочую область Muse и он будет работать. Главное проверить все ли скобки и параметры закрыты верными скобками. Ведь если нет, то Вам будет выдано сообщение о том, что произошла ошибка XML и виджет не поместится на Вашу страницу.
  3. Олег Поддубный

    Урок седьмой. Папка Assets

    Сегодня мы с Вами поговорим о замечательном инструменте в арсенале Adobe Muse –папке Assets. При создании сайта Adobe Muse генерирует несколько папок при экспорте в HTML, среди которых такие знакомые нам: image, css и scripts. Дело все в том, что поместить в эту папку файл возможно только уже после экспорта в HTML… Это не позволяет нам работать с этим файлом в самом проекте Muse, а нам иногда это очень даже необходимо. Особенно это актуально для виджетов, ведь в нем часто приходится ссылается на различные файлы. Для этих целей и существует возможность помещать файлы в папку Assets. Assets – это единственная папка, в которую возможно поместить нужные файлы и мы сможем на них указать относительный путь. Для того, чтоб поместить файл в эту папку необходимо зайти в: Меню -> Файл -> Добавить файл для передачи -> Выбираем нужный файл. Теперь файл уже доступен в нашем проекте для использования. Его мы можем увидеть в панели инструментов во вкладке ресурсы и при необходимости переподвязать файл, или удалить, если Вы передумали его помещать. Чем же эта папка так важна для виджетов? В коде виджета часто приходится ссылается на различные файлы для их последующего отображения, или использования в виджете. Этими файлами чаще всего бывают таблицы стилей css, файлы и библиотеки скриптов js. Давайте разберем сразу на примере как это будет выглядеть: Допустим Вам в бекграунд какого-то элемента не обходимо поместить картинку image.jpg. Делаем следующие действия: -> Файл -> Добавить файл для передачи -> поместить image.jpg Теперь мы можем сослаться на этот файл для отображения в бекграунде и это будет выглядеть следующим образом: #someID { Background-image: url(assets/image.jpg) }В результате image.jpg будет отображен как бекграунд элемента someID и будет видна при предпросмотре сайта в браузере. Если же Вам необходимо указать путь к скрипту, то в этом случае это будет выглядеть следующим образом: <script src=”assets/samescript.js” type=”text/javascript”>Подобные ссылки пишутся в теле самого виджета и тогда виджет сможет прочитать этот файл и отобразить в предпросмотре и при генерации HTML версти сайта. Следует отметить, что очень часто в самих файлах которые нужно добавить существуют ссылки на другие файлы и в случае их наличия эти ссылки необходимо изменить на ссылку в папку assets, куда вы этот файл в последствии поместите. Вопросы по уроку пишите в комментариях ниже.
  4. Олег Поддубный

    Урок шестой. Локализация

    И последним штрихом в Вашем виджете будет локализация. По сути виджет можно сделать и без нее, но именно она позволяет Вашему клиенту с огромным удовольствием использовать виджет вне зависимости от языка Adobe Muse, который у него установлен. Как уже говорилось ранее, подключена ли локализация или нет указывается в информационной части виджета, а сама локализация помещена в таблицу строк ( <stringTable> ). Далее я ее буду называть просто «таблицей». Именно в этой таблице уже указываются параметры для какого языка, какой текст будет отображен в пользовательском интерфейсе виджета. Каждый язык, который будет поддерживается виджетом – прописывается отдельно в элементе <locate>. У элемента <locate> , есть специальный аттребут name, где и указываются доступные языки. На данный момент в программе Adobe Muse доступны следующие языковые версии: Датский (da_DK)Нидерландский (nl_NL)Английский (США) (en_US)Английский (международный)Французский (fr_FR)Немецкий (de_DE)Итальянский (it_IT)Япония (ja_JP)Корейский (ko_KR)Норвежский (nn_NO)Испанский (es_ES)Шведский (sv_SE)Китайский (традиционное письмо) (zh_TW)Турецкий (tr_TR)Русский (ru_RU)Код языка прописывается в формате : «en_US» Не обязательно добавлять все языки. Достаточно будет двух или трех (К примеру: русский, английский и испанский). В каждом языке в «таблице» отдельно прописывается каждая строчка которая будет отображается в пользовательском интерфейсе. Настройка каждой стоки идет в параметре <string>. Для настройки <string> используются следующие атрибуты: Ключ строки ( keyString ) - указывает на пользовательское имя ( lable ) к которому будет подключен перевод;Перевод ( translation ) - Текст который будет отображен для этой языковой версии.Пример локализации: <parameters> <text name="userText" label="kUserText" defaultValue="Hello World!"/> </parameters> <stringTable> <locale name="en_US"> <string keyString="kUserText" translation="Text:"/> </locale> <locale name="fr_FR"> <string keyString="kUserText" translation="Texte:"/> </locale> </stringTable>Робота по локализации достаточно кропотливая и, как по мне, нудноватая, но крайне полезная для пользователя. И не большой совет: если вы собираетесь в дальнейшем локализировать Ваш виджет, то атрибут lable стразу старайтесь указывать ключами, как это сделано в примере выше. Вопросы по уроку задавайте в комментариях ниже.
  5. Олег Поддубный

    Урок пятый. Тело виджета

    Финальная часть в виджете – тело виджета, сюда передаются все параметры и настройки для работы с ними, после чего Ваше маленькое творение начинает свою работу. Первое, о чем следует упомянуть – способ подключения параметров к телу. Для подключение параметра в нужном Вам месте достаточно указать следующий текст: {param_PARAMNAME} – где в поле PARAMNAME вы указываете уникальное имя параметра ( name ) Пример: year = {param_myYear}; month = {param_myMonth}; day = {param_myDay}; hour= {param_myHour};Каждый из блоков в этой части виджета за то, куда будет помещен на сайте интересующий Вас кусок виджета. Размещение возможно в HEAD Вашего сайта и в разные части BODY. Сразу стоит отметить, что если две идентичных части скрипта будут помещены в один и тот же блок, то помещена на сайт будет только одна копия, остальная же при генерации HTML будет - проигнорирована. Блок для размещения элементов в HEAD: ( <headHTML> ) - Для помещения элементов в шапку сайта необходимо пометить их внутрь этого блока. Обычно в шапке размещаются разные ссылки и прописываются стили отображения элементов. Блок для размещения элементов в BODY: В начале BODY ( <bodyBeginHTML> ) – При размещении информации в этом блоке она будет помещена в самое начало Вашей страницы после открытия <body>;В текущем месте BODY ( <pageItemHTML> ) – Размещенная в этой части информация будет отображенна точно там где вы ее поставили и видите на рабочей области в Adobe Muse;В конце BODY ( < bodyEndHTML> ) - При размещении информации в этом блоке она будет помещена в самый конец Вашей страницы перед закрытием </body>. Обычно именно в этом месте и размещаются скрипты. Особый элемент: Альтернативный постер ( < pageItemPosterHTML> ) – несет в себе специфическую функцию. Как я понял, это та информация (контент), которая отобразится пользователю, в случае, если браузер по тем, или иным причинам (к примеру: устарел...), не сможет загрузить, отобразить, прочитать, интерпретировать основной контент. Каждый из этих блоков начинается не только со свой строки. Для того. чтоб поместить информацию в него необходимо добавить: <![CDATA[ бла-бла-бла ]]>В итоге получится что-то вроде этого: <pageItemHTML> <![CDATA[ <img src="http://example.com/logo.jpg" alt="My Logo"> ]]> </pageItemHTML>По сути после этого урока вы уже самостоятельно можете создать свой первый виджет. Стоит только отметить, что для многих виджетов используется библиотека jQuery. Adobe Muse подключает последнюю версию этой библиотеки. И Вам нет необходимости подключать ее повторно. Повторное ее добавление может вызвать ошибку на странице. Вопросы по этому уроку задавайте в комментариях.
  6. В это части мы поговорим о атрибутах параметров, а точнее о тех, что не попадают под категорию «Общие для всех». Их вполне достаточно у каждого параметра и по этой причине о каждом параметре мы поговорим отдельно. Текст (<text> ): Тип кодировки ( paramEncoding ) – Тип кодировки который будет применён к введенным параметрам.Многострочность ( multiline ) – указание этого атрибута с пометкой true изменит однострочное поля для ввода на многострочное.Предупреждение ( defaultIllegalForOutput ) – Если true , то при экспорте или при публикации сайта, если изначальные параметры не были изменены, пользователю будет выведено предупреждение о том, об этом. Этот атрибут встречается и в других параметрах, но не во всех. (Доступно только для версии 2014 и выше)Список – значение списка ( <value> ): Имя ( name ) – уникальное имя параметра, которое будет передано в тело виджета при выборе этого поля;Значение ( label ) – Имя параметра, которое будет отображено пользователю в пользовательском интерфейсе.Номер ( < number > ): Минимальное значение ( min ) – Минимальное допустимое значение для этого поля. Обязательно для заполнения;Максимальное значение ( max ) - Максимально допустимое значение для этого поля. Обязательно для заполнения;Шаг ( step ) – Шаг с которым будет изменяться значение при клике по верхней или нижней стрелке в пользовательском интерфейсе;Вылечена перехода ( snap ) – Шаг на которое минимально должно изменятся значение;Количество знаков после запятой ( digitsPrecision ) – тут все достаточно прозрачно. Это то количество символов, что будет отображено после запятой.Ссылка ( <url> ): Префиксы ( urlStart ) – список ссылок, указанных через запятую. Все введенные пользователем ссылки должны или включать в себя ссылки из списка или быть не полными;Текущие страницы ( currentPageOrURL ) - атрибута с пометкой true позволит пользователю выбирать ссылки из списка текущих страниц в проекте Muse;Префиксы по умолчанию (dummyDomainPrefix ) – Если пользователь для данного сайта еще не ввел адрес в настройках, то будет применен этот префикс сайта по умолчанию.Да/Нет- Что если Да/Нет ( <trueVal> и <falseVal> ) – значения атрибутов одинаковые для обеих параметров: Имя ( name ) – Значение, которое будет передано в поле виджета если галочка поставлена/не поставлена;Отключаемые опции ( disableOptions ) – Список опций указанных через запятую, для которых будет отключена возможность вносить изменения.Вот и все параметры и их атрибуты доступные для ввода в Adobe Muse. В дальнейшем мы поговорим о том ка эти параметры подключить в теле виджета и о самом теле (основной части) виджета. Вопросы к этому уроку пишите в комментариях ниже.
  7. Это самая интересная часть (на мой взгляд) написания виджета и как результат множества вариаций настроек она будет сама длинная и будет разбита на две части. Именном эта часть отвечает за то что увидит пользователь в своем интерфейсе и какие параметры он сможет передавать в виджет. Когда мы говорим о пользовательском интерфейсе, то тут речь идет о том окошке, что отображается когда мы клацаем на синий кружочек с похожий на кнопочку “Play”. Огромный спектр возможностей настроек позволяет сделать Ваш виджет действительно не только полезным а и очень удобным и простым в понимании для Вашего клиента. Для начала разберёмся в структуре и основных параметрах общих аттребутов для всей этой группы, а в следующей части уже поговорим более подробно о каждом элементе. Все элементы этой группы помещаются внутрь блока <parameters>. Он начинается строкой <parameters> и заканчивается </parameters> Как уже писалось ранее в прошлой статье. Параметры можно условно поделить на три группы: Основные параметры: Текст ( <text> ) - позволяет пользователю вписать необходимый текст;Список ( <list> ) – позволяет выбрать одно из значений из выпадающего списка;Значение ( <value>) – значения, доступные для выбора в выпадающем списке;Число ( <number>) - Позволяет пользователю задавать число. При этом есть удобные стрелочки вверх и в низ;Ссылка ( <url> ) – Позволяет пользователю задать локальную (в рамках сайта), или полную ссылку (с полным указанием адреса);Да/Нет ( <bool> ) – Опция, позволяющая передавать в виджет значение Да, или Нет, а также включать или выключать другие функции. Отображается в виде галочки в интерфейсе пользователя.Что если Да? ( <trueVal> ) – Какой параметр будет передан в виджет и какие функции будут отключены, если галочка будет нажата.Что если Нет? ( <falseVal> ) - Какой параметр будет передан в виджет и какие функции будут отключены, если поле галочки будет пустым.Общие атрибутов: Наименование параметра ( name ) – Уникальное имя параметра. Такое имя должен носить только один параметр в Вашем виджете. Поле обязательное для заполнения.Значение по умолчанию ( defaultValue ) – то значение, которое отобразится пользователю при первом размещении на рабочую область Adobe Muse. Если он не будет изменено, то именно оно и будет передано на сайт при экспорте в HTML, или при передаче на FTP. Поле обязательное для заполнения.Имя в интерфейсе ( label ) – это то название параметра, которое отобразится пользователю вместо «Наименование параметра ( name )». Этот параметр позволит отобразить пользователю ту информацию, которая будет ему понятна, а не непонятное название что после передается в виджет для обработки.Подсказка ( tooltip ) – Подсказка, которая будет отображена пользователю при наведение на поле для заполнения.Вспомогательные параметры (Доступны начиная с 2014 версии): Информация ( < info > ) – Текст который будет отображен пользователю в интерфейсе. Может содержать ссылку.Текст ( value ) – Текст информационного сообщения;Ссылка ( linkURL ) – Ссылка для перехода по клику;Разделитель ( < separator > ) – Черта разделяющая блоки параметров. Позволяет разбить виджет визуально на структурированные блоки.Особый параметр builtIn Он позволяет получить значения, которые определяется Adobe Muse, речь идет об ID, которые программа присваивает каждому отдельному элементу. Существует несколько типов этого запроса. После этого этими данными можно манипулировать при помощи jQuery. В зависимости от выбора того, или иного типа запросов вы получите тот или иной результат. Возможные типы: Ширина ( width ) - ширине элемента;Высота ( height ) - высота элемента;Код элемента ( itemUID ) - уникальное ID которое создано для этой странициКод сайта ( siteUID ) - уникальное ID определяющее сайт MuseКод страны документа ( country ) - код страны для текущего документа Muse (e.g. US, FR, JP)Язык документа ( language ) - кодировка символов для текущего языка документа Muse (e.g. en, fr, es)Язык и код страны ( locale ) - язык и код страны для текущей версии документа Muse (e.g. en_US, fr_FR, es_ES)На этом по этой части пока все. Вопросы по этому уроку задавайте в комментариях.
  8. Теперь поговорим о каждом элементе отдельно и начнем мы с основной информации и характеристиках виджета. Именно в этом блоке указывается версия кто же создал виджет, с какой версией программы он будет совместим, какое имя будет иметь и т.п. Эта часть виджета указывается внутри <HTMLWidget> в самом начале виджета и выглядит примерно следующим образом: <?xml version="1.0" encoding="UTF-8"?> <HTMLWidget name="My Widget" formatNumber="2" localization="none" creator="My Name" defaultWidth="50" defaultHeight="50" isResizable="true"> <!-- ... Тут бла-бла ... --> </HTMLWidget>Возможно, Вам не совсем понятно, что же тут написано, но сейчас мы все разберем. Согласно схеме, что была приведена в прошлой статье, этот блок можно условно поделить на три части: Основная информация: Имя ( name ) – имя себе, как имя… что тут еще сказать.Версия ( formatNum ) – в этом пункте указывается версия под которую будет подходит виджет. Связано это с тем, что не все элементы доступны более ранних версиях программы. Имеет два значения: 1 – до Adobe Muse 2014, 2 – свыше Adobe Muse 2014Язык ( localization ) – Позволяет указать будет ли потдерживатся виджетом разные языковые версии Muse. У этого параметра есть два возможных значения: none – и в этом случае будет применен Английский язык и stringTable (“Таблица строк”) – в которой прописываются параметры отображения виджета при разных языковых версиях (подробней об этом будет написано в другой статье). Персонализация: Создатель ( creator ) - Имя или адрес электронной почты творца.Ссылка на условия использования ( termsURL ) – внешняя ссылка на сайт, где указаны условия использования виджета.Текст условий использования ( termsText ) – Описание условий использования виджета в самом пользовательском интерфейсе ( В тексте может быть приписана ссылка на внешний ресурс).Примечание: Указывается или termsURL, или termsText. Размеры: Значения по умолчанию ( defaultWidth и defaultHight ) – ширина и высота при первом размещении на страницу сайта в интерфейсе Adobe Muse из библиотеки.Доступность трансформации ( isResizable ) – включает, или отключает возможность пользователю делать виджет больше или меньше в размерах.Минимальные значения ( minWidth и maxWidth ) – минимальное значение ширение и высота.Максимальное значение ( minHight и maxHight ) – максимально допустимое значение для высоты и ширение виджета.В итоге у нас может получится что-то подобное: <HTMLWidget name="MyTimer" formatNumber="2" localization="stringTable" creator="IvanIvanov" termsText="Some Text" defaultWidth="200px" defaultHeight="200px" isResizable="false" minWidth="200px" minHight="200px" maxWidth="200px" maxHight="200px">Где: - Эта часть кода: <HTMLWidget name="MyTimer" formatNumber="2" localization="stringTable" creator="IvanIvanov" termsText="Some Text" defaultWidth="200px" defaultHeight="200px" isResizable="false" minWidth="200px" minHight="200px" maxWidth="200px" maxHight="200px">Это обязательная для указания информация; - Эта часть кода: creator="IvanIvanov" termsText="Some Text"Это персонализация где указана информация о авторе и условия использования; - Эта часть кода: defaultWidth="200px" defaultHeight="200px" isResizable="false" minWidth="20px" minHight="20px" maxWidth="400px" maxHight="400px"Это размеры виджета в которых указано, что при замещении он будет 200х200 и его при изменении размера он не может быть меньше 20х20 и больше 400х400. На этом о информационном блоке все. А дальше мы поговорим о параметрах, которые и позволяют пользователю указывать свои параметры в виджет. Вопросы по уроку задавайте ниже, в комментариях.
  9. В этом посте речь пойдет о том из каких частей состоит виджет. Виджет всегда начинается со следующей строки: <?xml version="1.0" encoding="UTF-8"?> <HTMLWidget name="My Widget" formatNumber="2" localization="none"> И заканчиваться: </HTMLWidget> Как видно из написанного выше .mucow файл - это по сути XML, но со своей особой структурой, что определена возможностями и функциями программы Adobe Muse. После этих первых строк уже начинается сам виджет. Его можно поделить на четыре логических группы: Параметры и информация Пользовательские параметры Локализация (перевод) Основная часть виджета (Тело) Отдельно стоит выделить локализацию (Таблица локализации), которая позволяет настроить параметры отображения информации в виджете в зависимости от языка Adobe Muse. Об этом пункте будет более подробно рассказано позже. У каждого блока имеются свои подблоки (назовем их так), а у тех иногда еще свои. Все это разветвлении зависит от возложенных на эти элементы функции. Схема приведенная ниже, это мое видение структуры виджета. Все отдельные элементы со схожими функциями я распределил по группам. Так намного легче понимать что и как работает. *Примечание Ваш виджет в себе должен содержать минимум один из блоков тела виджета. И по желанию может содержать параметры и таблицу локализации.
  10. Доброго времени суток! Это первое, вступительное слово к последующему материалу, посвященному созданию виджетов для программы Adobe Muse. Скорее всего каждому из Вас приходилось, и порой даже не раз, сталкивается с ситуацией, когда выделенных функциональных возможностей программы Adobe Muse Вам явное не хватает… И Вам приходилось прибегнуть к использованию виджетов. Но бывает и такое , когда нужного виджета ну просто нет. Ни в бесплатном ни даже в платном исполнении… И вот в такой ситуации наступает и паника и разочарование и все что только угодно… Мне ли не знать об этом?!... Но…! Если виджета нет, то после этого курса Вы сами сможете его написать и не ждать помощи извне. Что же такое виджет в Adobe Muse? Это отдельно созданное мини-приложение, что позволяет расширить возможности Muse. В этот файл, соответственно определенных не сложных правил помещаются некоторые логические блоки. В каждом из этих блоков определяются функции необходимые для функционирования Вашего виджета. В них же и указывается, что увидит пользователь Adobe Muse при работе с ним, а что увидит посетитель сайта, после публикации его на хостинг. Создание файла MuCow: Сам изначальный файл создать очень просто. Для этого будет достаточно обычного текстового редактора NotePad: Создаем новый файл;Нажимаем «Файл – Сохранить как»;Задаем имя файла и через точку дописываем следующее «.mucow».Если вы это только что сделали, то поздравляю Вы создали свой первый файл для виджета Adobe Muse! Для того, чтоб поместить виджет в саму программу. Вам достаточно его перетащить на рабочую панель и он сразу появится на странице Вашего проекта Adobe Muse. И если вы сейчас уже попытались это сделали. То наверное заметили. Что перенести файл не удалось… Это все потому, что он еще не до конца сформирован, скажем так - для того чтоб он работал в него нужно вдохнуть жизнь. О том как это сделать мы с Вами и поговорим в следующих уроках.
  11. Олег Поддубный

    Олег Поддубный,
    Автоматический редирект через 10 секунд на главную

    Код вставляете в файл страницы перед закрытием </body>. Или в Muse через виджет вставки кода к конец страницы. Да можно
  12. Олег Поддубный

    Олег Поддубный,
    Нормальная форма отправки данных.

    Дело в том что форма делиться на 2 части. Ее внешняя оболочка HTML и программная РНР часть. Валидацию можно сделать как там так и там, но средствами HTML это будет проще.
  13. Олег Поддубный

    Олег Поддубный,
    Переход по ссылке после 0.5 сек композиции

    Создается JS код, в который вписывается ID Вашего тригера и по клику на него вызывается функция редиректа, но с задержкой в 500.
  14. Олег Поддубный

    Олег Поддубный,
    Автоматический редирект через 10 секунд на главную

    <script language="JavaScript" type="text/javascript"> function GoHome(){ location="index.html"; } setTimeout( 'GoHome()', 5000 ); </script>
  15. Олег Поддубный

    Олег Поддубный,
    Можно ли встроить стороннюю HTML форму взамен стандартной

    Я пользуюсь исключительно своими верстаными формами в последнее время а не Muse. Намного удобней, к тому же я заменил много файлов РНР одним и через него идет вся отправка со всех форм, при этом тайтл письма меняеться в зависимости от формы. В кастомной форме можно сверстать так же красивую версию письма и настроить те элементы для получения которые не предполагает стандартная форма Muse. З.Ы. Можно даже сделать выгрузку в Exсel фаил на хостинге + отправить несколько копий на разные адреса с разным текстом)))
×