- 5
- 4
- 3
- 1
- 8
- 0
- 0
- 0
- 1
- 3
- 2
Создание виджета для Оперы
Сегодня мы будем говорить об «Оперовских» виджетах, точнее, как их создать. Виджет — это дополнительное приложение к той или иной программе. В Опере так-же существуют виджеты, даже с недавних пор они стали независимы от самого браузера, т.е можно запустить виджет как программу, нежели дополнение.
Некоторое время я задавался вопросом: «как-же они создают эти виджеты?». Совсем недавно нашел ответ на свой вопрос на . Там много написано, я распишу все вкратце.
Дабы подготовить наш виджет, создаем папку произвольным названием, я назвал «widget», в этой папке заранее создаем три файла:
index.html — для построение каркаса виджета,style.css — стили,config.xml — все настройки для виджета.
Перейдем к написанию каркаса:
Code
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<title>Widget.</title>
<link rel="stylesheet" type="text/css" href="style.css"><!-- ссылку к стилям -->
</head>
<body>
<div id='all'>
<!-- заголовок -->
<div id='header'><h3>Create a widget.</h3></div>
<div id='container'>
<!-- содержимое -->
<h2>Hello, I'm a new widget!</h2>
</div>
<div id='footer'>(c) UnderShot</div>
</div>
</body>
</html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<title>Widget.</title>
<link rel="stylesheet" type="text/css" href="style.css"><!-- ссылку к стилям -->
</head>
<body>
<div id='all'>
<!-- заголовок -->
<div id='header'><h3>Create a widget.</h3></div>
<div id='container'>
<!-- содержимое -->
<h2>Hello, I'm a new widget!</h2>
</div>
<div id='footer'>(c) UnderShot</div>
</div>
</body>
</html>
Прописываем стили:
Code
<style>
/* стили */
html, body {
width: 100%;
height: 100%;
font: 14px 400 'Trebuchet MS';}
#all {
width: 300px;
margin: 0 auto;
background: #ddd;
border-radius: 5px;
box-shadow: 0 5px 10px #777;}
#header {
background: #2799db;
color: #fff;}
#container, #header {
padding: 10px;}
#footer {
font-size: 12px;
margin-top: 10px;
padding: 0 0 5px 10px;}
h2 {
text-shadow: 0 1px 1px #fff;}
h3 {
text-shadow: 0 1px 3px #000;}
</style>
/* стили */
html, body {
width: 100%;
height: 100%;
font: 14px 400 'Trebuchet MS';}
#all {
width: 300px;
margin: 0 auto;
background: #ddd;
border-radius: 5px;
box-shadow: 0 5px 10px #777;}
#header {
background: #2799db;
color: #fff;}
#container, #header {
padding: 10px;}
#footer {
font-size: 12px;
margin-top: 10px;
padding: 0 0 5px 10px;}
h2 {
text-shadow: 0 1px 1px #fff;}
h3 {
text-shadow: 0 1px 3px #000;}
</style>
Пишем xml-файл с конфигурациями:
Code
<?xml version='1.0' encoding='utf-8'?>
<widget>
<widgetname>Имя виджета.</widgetname>
<description>Описание для виджета.</description>
<width>440</width>
<height>200</height>
<author>
<name>Имя автора.</name>
<email>Почта.</email>
<link>Сайт автора.</link>
</author>
<id>
<host>Хост.</host>
<name>Имя виджета.</name>
<revised>2010-04</revised>
</id>
</widget>
<widget>
<widgetname>Имя виджета.</widgetname>
<description>Описание для виджета.</description>
<width>440</width>
<height>200</height>
<author>
<name>Имя автора.</name>
<email>Почта.</email>
<link>Сайт автора.</link>
</author>
<id>
<host>Хост.</host>
<name>Имя виджета.</name>
<revised>2010-04</revised>
</id>
</widget>
width — ширина в пикселах;height — высота в пикселах;host — сайт, на котором будет работать виджет (например undershot.ru);revised — дата создания.
После этого, все созданные файлы сохраняем, а саму папку архивируем в формат
Нужное отмечено красным.
Для примера гляньте на тестовый виджет, созданный в ходе написания поста. Opera.Widget
Дата: 04.04.2010 • Теги:
widget, soft, создание, оформление, виджет, Opera, опера
↑ +5 ↓
- Не найдено.
#1:
marchenkovdmitry
http://img5.immage.de/04043d0a1f6201004041221.jpg
04.04.2010, 13:22
#2
Опа, будем исправлять 
UnderShot
UnderShot
#3:
Культура
. Собираюсь заглядывать чаще.
12.05.2010, 19:32
17.07.2011, 15:42
#5:
mLenter
2 дня не открывался...
12.08.2011, 10:21
