Создать свой виджет: Создание виджета с помощью конструктора – Как создать виджет самостоятельно?

Leave a Comment / Разное / By /

Как создать виджет для сайта?

Опубликовано:
  2016-09-03 15:25:00 | 5381

 

Считается, что основная задача вебмастера – привлечение аудитории пользователей. Но это не совсем так. Можно сколь угодно много привлекать аудиторию, но если среди неё не будет лояльной – результаты конверсии опечалят. Чтобы увеличить активность пользователей при взаимодействии с сайтом, стоит сделать для него виджет.

О сколько виджетов нам разных…

Если обратиться к словарю, выяснится, что виджет (widget) – небольшое графическое приложение, встраиваемое в пользовательский интерфейс браузера или сайта, и показывающее какую-либо информацию из какого-нибудь места. Именно поэтому они могут быть очень разнообразны. Когда речь заходит о создании виджета для сайта, обычно под этим подразумевается одно из трех графических приложений:

  • Обновляемый или просто визуально привлекательный элемент панели быстрых закладок;
  • Лента обновлений для размещения на главной странице поисковой системы «Яндекс»;
  • Модуль обновлений или комментариев, связанный с социальной сетью Facebook и отображаемый непосредственно на сайте.

Что ж, разберемся, как создать каждый из этих виджетов – и зачем он вам вообще нужен.

Создание виджета для Визуальных закладок (для движков WordPress и других)

Сервис Визуальных закладок от «Яндекс» в последнее время становится всё более популярным. Он удобен, красив и функционален. Визуальные закладки встраиваются в браузеры на движке Chromium из соответствующего магазина, а также входят в Яндекс.Браузер прямо «из коробки».

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

Чтобы сделать его более привлекательным для пользователей, стоит совсем немного потрудиться. А именно – «поколдовать» с API Табло.

Но сначала требуется создать логотип сайта. Картинка должна соответствовать следующим правилам:

  • Формат .PNG;
  • Размер 150х60 пикселей;
  • Прозрачный фон.

Сам виджет пишется на XML. В блокноте набирается следующий код:

{

“version”: “1.0”,

“api_version”: 1.

“layout”:

{

“logo”: “http://домен_вашего_сайта/адрес_файла_с_логотипом/название_файла_с_лого.png”,

“color”: “#номер_желаемого_цвета_в_HEX”,

“show_title”: false,

}

}

Файл нужно сохранить под названием manifest.json и закинуть в корневой каталог сайта.

Следующий этап – немного поколдовать с PHP. Ну, или HTML – в зависимости от того, на каком языке написан движок сайта. Если хедер находится в header.php, то изменения вносятся в этот файл. А если в каком-нибудь другом месте – нижеследующую строчку нужно вписать, соответственно, туда.

А вот код для включения:

<link rel=”yandex-tableau-widget” href=”/manifest.json” />

Этот код нужно вписать в хедер – то есть между открывающим и закрывающим HTML-тегами <head>.

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

Виджет сайта для главной страницы Яндекс

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

Создать виджет для сайта несложно. Не нужно даже HTML изучать! Для такого виджета требуется, чтобы у сайта была RSS-лента. У движка WordPress она имеется по умолчанию и располагается по следующему адресу:

http://домен/feed

А вот для других движков потребуется создавать её самостоятельно.

Итак, виджет для Яндекса делается в два простых шага:

  1. Зайти на http://wdgt.yandex.ru/widgets и ткнуть на кнопку «Создать виджет»;
  2. Заполнить панели с названием виджета, описанием, картинкой и адресом RSS-ленты.

Всё! Копировав ссылку для установки на Яндекс, можно убедить пользователей добавить виджет вашего сайта на главную страницу поисковой системы.

А ещё этот виджет можно разместить на вашем сайте – на боковой панели, например, или в «вылетающем окошке» pop-up.

Виджет Facebook

Социальные сети плотно вошли в повседневную жизнь современного человека. Правда, в «наших широтах» наиболее распространены «ВК» и «Одноклассники». Однако Facebook – лучшее место для продвижения сайта, особенного предлагающего какие-либо товары или услуги.

Почему? Причина тут проста. Именно в Facebook проще всего организовать вирусное продвижение контента среди «интеллектуальной элиты». Различные профессионалы в самых разных областях предпочитают пользоваться именно этой социальной сетью, а значит – тут проще всего создать лояльную, «думающую» аудиторию, от которой даже можно подчерпнуть какую-нибудь новую информацию.

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

Итак, вот она, пошаговая инструкция о том, как создать виджет для сайта. Только предполагается, что у вашего сайта – или компании – уже есть соответствующая страница на Facebook, созданная человеком, у которого также есть аккаунт в Facebook:

  1. Нужно зайти от имени этого человека (авторизоваться через его логин и пароль) и нажать кнопку «Редактировать профиль» на главной странице профиля;
  2. Пролистать страницу до конца и открыть «Разработчикам»;
  3. На открывшейся странице отыскать кнопку Sharing, сопровождающуюся знаком Like, и смело в неё ткнуть;
  4. Затем требуется выбрать «Социальные плагины»;
  5. Найти Like Box;
  6. Откроется страница настройки виджета, где можно установить его размеры, цветовую схему, контент и визуальную составляющую;
  7. Затем нажатием кнопки Get Code можно получить код, выбрав язык разметки, максимально совместимый с движком сайта.

Виджет для WordPress

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

Второе – место непосредственного размещения виджета, например, сайдбар. Туда требуется скопировать CSS-код с div-блоком, в котором расположена ссылка на скрипт.

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

! Copyright © 2016 «Design ONE»



Похожие статьи:

5 приемов оптимизации страницы товара в интернет-магазине 10 приёмов для создания дружественного интерфейса сайта Продвижение сайта с помощью видео Раскрываем секреты: основные источники стабильного трафика на сайт Как правильно использовать видео в процессе поискового продвижения сайта? Онлайн конкурсы — секреты успеха Продвижение туристического сайта Продвижение бухгалтерского сайта Почему на ваш сайт приходят, но не покупают? Генерируем карту сайта и устраняем битые ссылки

Способы и процесс создания виджетов для рабочего стола

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

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

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

Начнем создание виджета мы с дизайна. Благо, компания Google предоставила весьма полезные UI Guidelines для разработчиков программного обеспечения, где подробно описан процесс создания дизайна и основные принципы эргономичности. Есть также и отдельная официальная инструкция для создания виджетов, с которой можно ознакомиться по ссылке: http://developer.android.com/guide/practices/ui_guidelines/widget_design.html.

Виджет, занимающий одну «клетку» на рабочем столе, имеет разрешение 80х100 точек, соответственно, для создания продолговатый виджет длиной в 4 клетки и высотой в одну, то нужно, соответственно, 320х100 пикселей. Такой размер мы и возьмем за основу создаваемого нами виджета.

Теперь виджет нужно нарисовать. В принципе, виджет вполне может и не иметь никакой графической части, и отображать только текст или элементы управления, без фона и рамки, но, естественно, красивый и приятный глазу виджет просто обязан иметь качественный дизайн. Поэтому нарисуем фон. За основу возьмем фон из упомянутого выше UI Guideline. Открываем доступную нам заготовку в Photoshop или другом графическом редакторе и делаем всё, что заблагорассудится, после чего сохраняем полученное изображение в формате .png. Нужный нам формат PNG-24, с 8-битным цветом и прозрачным фоном. Вот и готова основа для нашего виджета.

Теперь перейдем к созданию программной части. Виджет может не иметь программной части. Проще говоря, в меню добавления виджетов он будет, но в основном меню приложений – нет. Мы создадим виджет именно такого типа. Создаем новый проект, и называем его для удобства так, чтобы основной класс имел имя widget.java.

Редактируем AndroidManifest.xml. Объявляем наш виджет:

            <?xml version=»1.0″ encoding=»utf-8″?>

<manifest xmlns:android=»http://schemas.android.com/apk/res/android»

      package=»com.example.widget»

      android:versionCode=»1″

      android:versionName=»1.0″>

    <application android:icon=»@drawable/icon» android:label=»@string/app_name»>

        <receiver android:name=»widget» >

                            <intent-filter>

                                <action android:name=»android.appwidget.action.APPWIDGET_UPDATE» />

                            </intent-filter>

                            <meta-data android:name=»android.appwidget.provider»

                                       android:resource=»@xml/widget_info» />

            </receiver>

    </application>

</manifest> 

            Теперь редактируем widget.java. Тут необходимо описать, как будет реагировать виджет на различные условия. Класс AppWidgetProvider имеет такие методы:

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

onDeleted – метод выполняется при удалении виджета с рабочего стола.

onEnabled – метод вызывается при первой активации виджета. Но если добавляется еще один точно такой же виджет, данный метод уже не выполняется.

onDisabled – метод выполняется тогда, когда удаляется последняя копия виджета с рабочего стола. Соответственно, данный метод является обратным onEnabled.

onReceive – метод вызывается одновременно со всеми остальными. Зачастую не используется вообще.

Сильно углубляться в программную часть виджета мы не будем, а потому не будем переполнять наш пример какими-либо обработчиками, а просто реализуем весь функционал посредством Layouts. Необходимо следующим образом объявить класс AppWidgetProvider:

            package com.example.widget; 

import android.appwidget.AppWidgetProvider; 

public class widget extends AppWidgetProvider{ 

} 

Далее, описываем наш виджет – это нужно для того, чтобы мобильный аппарат понимал, с чем имеет дело. Для этого нужно создать папку xml в папке res. В ней создаем файл с именем widget_info.xml. Открываем созданный файл и прописываем в него вот такой код:

            <?xml version=»1.0″ encoding=»UTF-8″?>

<appwidget-provider xmlns:android=»http://schemas.android.com/apk/res/android»

    android:minWidth=»294dp»

    android:minHeight=»72dp»

    android:updatePeriodMillis=»0″

    android:initialLayout=»@layout/widget»>

</appwidget-provider> 

Приведем краткое описание заданных параметров:

minWidth – минимальная необходимая для работы виджета ширина.

minHeight – минимальная необходимая для работы виджета высота.

updatePeriodMillis – период, за который происходит обновления виджета, указывается в миллисекундах. Параметр весьма полезен, так как по истечении указанного временного промежутка срабатываем метод onUpdate объекта AppWidgetProvider.

initialLayout – параметр указывает на ресурс с описанием интерфейса нашего виджета.

Формула подсчета размеров виджета имеет такой вид: (количество клеток * 74) — 2.

Приступим к описанию интерфейса создаваемого нами виджета. Здесь-то нам и пригодится созданный ранее фон. Импортируем рисунок фона в папку dwawable (или во всех три папки drawable для разных разрешений экрана). В папке layout создаем файл с именем widget.xml. Интерфейс описывается как для обычных Activity, но есть некоторые ограничения. Допустимы для использования такие элементы:

LinearLayout

FrameLayout

RelativeLayout

AnalogClock

Button

Chronometer

ImageButton

ImageView

ProgressBar

TextView

Создадим LinearLayout, к которому применим созданную картинку-фон и добавим для примера AnalogClock. Сами часы в рамку не влезут, но как наглядный пример вполне сгодятся. Итак:

<?xml version=»1.0″ encoding=»utf-8″?>

<LinearLayout xmlns:android=»http://schemas.android.com/apk/res/android»

            android:id=»@+id/Widget»

    android:layout_width=»fill_parent»

    android:layout_height=»fill_parent»

    android:orientation=»horizontal»

    android:gravity=»center_vertical»

    android:background=»@drawable/frame»> 

     <AnalogClock

        android:layout_width=»fill_parent»

        android:layout_height=»wrap_content»/> 

</LinearLayout> 

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

Оцените статью: Поделитесь с друзьями!

Делаем свой гаджет для windows 7 (seven) — Блог Вебмастера

Думаю каждый из пользователей windows 7 хоть раз но задумывался как работают гаджеты в вашей боковой панели. И я как то задумался, оказалось все до удивительного просто — гаджет имеет структуру схожую с веб страницей, и по суте ей и является, только для удобства её запаковали в ZIP архив и поменяли разрешение на *.gadget.

Ну а теперь подробнее из чего состоит гаджет:

1) Файл gadget.xml (и думаю самый главный), в нем описан манифест гаджета, имя разработчика, сайт, версия, путь к логотипу и т.п. Вот его примерная структура:

<gadget>

<name>

Название гаджета

</name>

<version>

версия гаджета

</version>

<author name=»имя автора»>

<info url=»ссылка на сайт разработчика»/>

<logo src=»путь к логотипу»/>

</author>

<copyright>

Владелец гаджета

</copyright>

<icons>

<icon width=»64″ height=»64″ src=»путь к иконке гаджета»/>

</icons>

<hosts>

<host name=»sidebar»>

<base type=»HTML» apiVersion=»1.0.0″ src=»путь к файлу .html основное окно»/>

<permissions>

full

</permissions>

<platform minPlatformVersion=»0.3″/>

</host>

</hosts>

</gadget>

Тут подробнее описаны элементы манифеста:

Особое внимание уделите 20 строчке — в ней путь к файлу html основного окна гаджета.

2) Создайте ваш основной html файл, в нем описывайте все как в обычной веб страничке, можете подключить CSS, javascript и др.

Для описания заднего плана вашего гаджета воспользуйтесь строкой:

<g:background

id=»background»

src=»background.png»

style=»position:absolute;top:0;left:0;z-index:-999;no=repeat;» />

Эта строка взята с моего гаджета.

Собственно когда гаджет готов, вам остается только запаковать его в zip архив, а затем переименовать .zip в .gadget, после запуска он попросит установку и начнет работать.

Когда я делал гаджет, я задумывал сделать гаджет онлайн радио, и вот собственно что у меня вышло:

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

Создаем гаджет для Windows 7 / Microsoft User Group Community

Гаджет — это оригинальное, нестандартное техническое приспособление. Сегодня поговорим, как создать гаджет для Windows 7.

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

Минимальный гаджет должен состоять из двух файлов — gadget.xml (мета информация) и main.html (собственно, гаджет).

gadget.xml

Вся мета информация о нашем гаджете должна храниться в файле с названием gadget.xml:

<?xml version="1.0" encoding="utf-8" ?>
    <gadget>  
       <name>Microsoft User Group Винница</name>
       <namespace>msug.vinnitsya.gadget</namespace>  
       <version>1.0.1</version>  
       <author name="Microsoft User Group Винница">    
            <info url="http://msug.vn.ua/" text="Официальный сайт Microsoft User Group Винница" />    
            <logo src="logo.png" />  
        </author>  
        <copyright>Microsoft User Group Винница</copyright>  
        <description>Последние сообщения из блогов сайта Microsoft User Group Винница.</description>  
        <icons>    
            <icon src="logo.png" />  
        </icons>  
        <hosts>    
           <host name="sidebar">      
              <base type="HTML" apiVersion="1.0.0" src="main.html" />      
              <permissions>Full</permissions>      
              <platform minPlatformVersion="1.0" />      
              <defaultImage src="icon.gif" />    
           </host>  
      </hosts>
</gadget>

Информация будет использоваться для отображения таким образом:

main.html

Собственно, в этом файле можно писать, все что угодно, также вы можете использовать JavaScript (jQuery, например), CSS, изображения и т.д. Для публикации RSS в HTML был использован соответствующий сервис, в результате получился такой вот файл:

<html>
<head>    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
    <style type="text/css">        
        body 
        { 
            width: 220px;            
            height: 220px;            
            font-family: Verdana, Tahoma;            
            overflow: scroll;        
        }        
        a        
        {            
            color: #338ACC;            
            font-size: 12px;        
        }        
        li        
        {            
            margin-left: -20px;        
        }    
    </style>
</head>
<body>    
    <div>        
    <script language="JavaScript" src="http://webmaster-verzeichnis.de/contentsyn/feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2FMicrosoftUserGroupVinnitsya&chan=title&num=10&utf=y&html=p" type="text/javascript"></script>        
    <noscript><a href="http://webmaster-verzeichnis.de/contentsyn/feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2FMicrosoftUserGroupVinnitsya&chan=title&num=10&utf=y&html=y">RSS Feed aufrufen</a> powered by <a href="http://webmaster-verzeichnis.de" title="Webkatalog">Webmaster Verzeichnis</a> </noscript>    
       </div>
</body></html>

Добавляем logo.png:

Сохраняем наши файлы в виде zip архива и переименовываем zip на gadget.

Запускаем наш файл и получаем сообщение:

Жмем «Установить» и вуаля, видим наш гаджет на боковой панели:

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

P.S. Вы уже можете пользоваться нашим гаджетом, загрузив его внизу статьи.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *