diff options
Diffstat (limited to 'files/ru/создание_темы/index.html')
| -rw-r--r-- | files/ru/создание_темы/index.html | 271 |
1 files changed, 0 insertions, 271 deletions
diff --git a/files/ru/создание_темы/index.html b/files/ru/создание_темы/index.html deleted file mode 100644 index 632cd73405..0000000000 --- a/files/ru/создание_темы/index.html +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: Создание темы -slug: Создание_темы -tags: - - NeedsUpdate - - Создание темы -translation_of: Archive/Themes/Building_a_Theme ---- -<h4 class="editable" id="Введение"><span>Введение</span></h4> - -<p>Это руководство проведет вас через шаги, необходимые, чтобы создать очень простую <a class="internal" href="/Add-ons/Themes" title="en/Themes">тему</a> - ту, которая обновляет фоновый цвет панелей инструментов в Firefox.</p> - -<div class="note"> -<p><strong>Примечание:</strong> Это руководство о создании тем для Firefox 29 и более поздних версий. Другие руководства существуют для создания тем для более ранних версий Firefox. Для старшего руководства, смотрите <a class="internal" href="/docs/Creating_a_Skin_for_Firefox_Getting_Started" title="en/Creating a Skin for Firefox//Getting Started">Создание скина для Firefox</a>.</p> -</div> - -<div class="warning"> -<p><strong>Примечание:</strong> В Firefox для Mac OS X изменились некоторые директории, так что руководство может быть устаревшим.</p> -</div> - -<div id="section_2"> -<h4 class="editable" id="Настройка_среды_разработки">Настройка среды разработки</h4> - -<p>Темы и расширения упакованы и распределены в ZIP файлах или <a href="/docs/Bundles" rel="internal">Пакетах</a>, с расширением <code>XPI</code> (произносится как "zippy").</p> - -<p>Пример содержимого в типичном XPI файле для темы:</p> - -<pre class="eval">example.xpi: - /<a href="/Add-ons/Install_Manifests" rel="internal">install.rdf</a> - /<a href="/docs/Chrome_Registration" rel="internal">chrome.manifest</a> - /preview.png - /icon.png - /chrome/ - browser/ - communicator/ - global/ - mozapps/ - -</pre> - -<p>Мы хотим создать файловую структуру аналогичную описанные структуре выше, так что давайне начнем с создания папки для вышей темы где-нибудь на вашем жестком диске (например <code>C:\themes\my_theme\</code> или <code>~\themes\my_theme\). </code>Внутри вашей новой папки для темы, создайте два пустых текстовых файла, один из них назовите <code>chrome.manifest</code> , а другой <code>install.rdf</code>. Файл <code>preview.png</code> отображается, как превью темы в панели тем в окне дополнений. Файл <code>icon.png</code> используется как инока в той же панели. Оставим оба из них сейчас, если вы уже выбрали что-то, что хотели использовать бы.<code> </code></p> - -<p>Остальные директории будут извлечены из темы по умолчанию. Во-первых, вы захотите создать где-нибудь каталог. Скопируйте ваши установки <code>omni.ja </code>в этот каталог. Расположение будет отличаться для различных операционных систем:</p> - -<p><strong>Linux:</strong> <code>/usr/lib/MozillaFirefox/chrome/classic.ja</code> <em>or</em> <code>/usr/lib/firefox-*.*.*/omni.ja</code></p> - -<p><strong>Windows:</strong> <code>\Program Files\Mozilla Firefox\omni.ja</code></p> - -<p><strong>Mac OS X: </strong><code>/Applications/Firefox.app/Contents/MacOS/omni.ja</code></p> - -<p>Теперь откройте (или распакуйте) этот файл в директорию, которую вы создали. Он содержит несколько папок, модули, jssubloader и другие. Файлы мы будем вынуждены расположить в папке <code>chrome\toolkit\skin\classic</code>.</p> - -<p>Создайте папку с именем хром в папке вашей темы. Далее, содержимое следующих каталогов расположите в соответствующие папки.</p> - -<ol> - <li><code>global</code> to <code>chrome/global</code></li> - <li><code>mozapps</code> to <code>chrome/mozapps</code></li> -</ol> - -<p>Теперь, когда вы скопировали папки <code>global</code> и <code>mozapps</code>, необходимы несколько других папок из <code>browser/omni.ja </code> archive. Они находится в папке браузера, в указанном выше месте. Файлы нам будут нужны чтобы browser/omni.ja archive расположить под <code>chrome/browser/skin/classic</code>.</p> - -<p>Скопируйте содержимое из следующих каталогов в соответствующие папки. Это даст нам базовый набор стилей для работы с.</p> - -<ol> - <li><code>browser</code> to <code>chrome/browser/</code></li> - <li><code>communicator</code> to <code>chrome/communicator/</code></li> -</ol> - -<p>Вы должны закончить с такой структурой каталогов:</p> - -<pre><ext path>/ - /install.rdf - /chrome.manifest - /chrome/ - browser/ - communicator/ - global/ - mozapps/ -</pre> - -<p>После этого, было бы замечательно прочитать статью <a href="/Add-ons/Setting_up_extension_development_environment" rel="internal">Setting up extension development environment</a> и следовать её инструкциям. Это особенно важно для установки <a class="internal" href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a>, который мы будем использовать в последующих стадиях.</p> -</div> - -<div id="section_3"> -<h4 id="Создание_инсталяции">Создание инсталяции</h4> - -<p>Откройте файл с именем <code><a href="/Add-ons/Install_Manifests" rel="internal">install.rdf</a></code>, который вы создали в верхней части вашей иерархии папок расширений и поместите это внутри:</p> - -<pre class="eval"><?xml version="1.0"?> - -<RDF xmlns="<a class="external" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" rel="freelink">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a>" - xmlns:em="<a class="external" href="http://www.mozilla.org/2004/em-rdf#" rel="freelink">http://www.mozilla.org/2004/em-rdf#</a>"> - - <Description about="urn:mozilla:install-manifest"> - <em:id><strong><a class="link-mailto" href="mailto:sample@example.net" rel="external nofollow" title="mailto:sample@example.net">sample@example.net</a></strong></em:id> - <em:version><strong>1.0</strong></em:version> - <em:type><strong>4</strong></em:type> - - <!-- Target Application this theme can install into, - with minimum and maximum supported versions. --> - <em:targetApplication> - <Description> - <em:id><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong></em:id> - <em:minVersion><strong>29.0</strong></em:minVersion> - <em:maxVersion>39<strong>.*</strong></em:maxVersion> - </Description> - </em:targetApplication> - - <!-- Front End MetaData --> - <em:name><strong>My Theme</strong></em:name> - <em:internalName><strong>sample</strong></em:internalName> - <em:description><strong>A test extension</strong></em:description> - <em:creator><strong>Your Name Here</strong></em:creator> - <em:homepageURL><strong><a class="external" href="http://www.example.com/" rel="freelink">http://www.example.com/</a></strong></em:homepageURL> - </Description> -</RDF> -</pre> - -<ul> - <li><strong><a class="link-mailto" href="mailto:sample@example.net" rel="external nofollow" title="mailto:sample@example.net">sample@example.net</a></strong> - ID из разширения. Это значение, которое вы придумали, чтобы определить ваш добавочный номер в формате адреса электронной почты (обратите внимание, что это не должна быть ваша электронная почта). Сделайте его уникальным. Кроме того, можно использовать GUID. Примечание: Этот параметр должен быть в формате адреса электронной почты, хотя он и не должен быть действительным адресом электронной почты. (example.example.example)</li> - <li><strong>4</strong> - тип дополнения. '4' заявляет, что она устанавливает тему. Если вы должны были установить расширение было бы 2 (смотрите <a href="/Add-ons/Install_Manifests#type" rel="internal">Install Manifests#type</a> для других типов кода).</li> - <li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - Firefox's заявление ID.</li> - <li><strong>29.0</strong> - точный номер самой ранней версии Firefox, которую вы указываете, для работы расширения. Никогда не используйте * в minVersion, это почти наверняка не будет делать то, что вы ожидаете от него.</li> - <li><strong>39.*</strong> - самая последняя версия Firefox, которую вы указываете, для работы расширения. Указанная версия должна быть не выше, чем новейшая версия доступная в настоящее время! В этом случае, "39.*" указывает на то, что расширение работает с Firefox 39 и любым последующим 39.x выпуском. Темы совместимы по умолчанию, если не установлен строгий режим совместимости для вашей темы.</li> -</ul> - -<p>Если вы получаете сообщение о том, что install.rdf деформирован, полезно загрузить его в Firefox с помощью команды File->Open File и он сообщит вам XML ошибки.</p> - -<p>See <a href="/Add-ons/Install_Manifests" rel="internal">Install Manifests</a> for a complete listing of the required and optional properties.</p> - -<p>Сохраните файл.</p> -</div> - -<div id="section_4"> -<h4 class="editable" id="Стилизация_браузеров_UI_с_CSS">Стилизация браузеров UI с CSS</h4> - -<p>Firefox's пользовательский интерфейс написан на XUL и JavaScript. <a href="/docs/Mozilla/Tech/XUL" rel="internal">XUL</a> является XML грамматика, которая обеспечивает виджеты пользовательского интерфейса, такие как кнопки, меню, панели инструментов, деревья и т.д. Действия пользователя связаны с функциональными возможностями, используя JavaScript. Эти XUL элементы оформлены с использованием <a class="internal" href="/en/CSS" title="en/CSS">CSS</a>. Если вы не знаете CSS, это будет шаг в сторону от обучения, используйте HTML-based обучающие программы, чтоб знать хотябы на уровне новичка .</p> - -<p>Браузер UI, сам по себе не имеет абсолютно никакого стиля - если вы пытаетесь начать с пустой темы, Firefox будет непригодным для использования, в качестве элементов, кнопок, будет отображен обычный текст. Именно поэтому мы скопировали стили по умолчанию на этапе установки.</p> - -<p>При написании темы, самый простой способ определить, какие CSS селекторы вам нужно написать, используйте DOM Inspector, который вы должны быть установлен, на этапе установки. Он используется, чтобы проверить любой элемент на веб-странице или XUL документе, что делает его бесценным для темы.</p> - -<h4 id="Обновление_Стилизация_панели_инструментов">Обновление Стилизация панели инструментов</h4> - -<div class="note"> -<p><strong>Примечание</strong>: В Firefox 4.0 и выше, основная способность DOM Inspector не работает. Чтобы обойти это, отключить аппаратное ускорение в Options Firefox '.</p> -</div> - -<p>Откройте DOM Inspector ( он находится в меню "Сервис"), и перейдите в раздел "Файл-> Проверить Chrome документ". вы попадете в меню, содержащее все документы XUL открытые в данный момент в Firefox.<br> - Выберите первый документ с заголовком веб-страницы, как "Firefox Start Page" и выберите его.</p> - -<p>Для этого урока мы будем обновлять цвет фона панели инструментов. Выберите инструмент в узле обнаружения (стрелка плюс квадрат в верхнем левом углу DOM Inspector), и нажмите на любое неиспользуемое пространство на панели инструментов. Это должно выбрать узел типа "xul:toolbar" в DOM Inspector.</p> - -<p>Сдесь вы можете поиграть с различными стилистиками для панели инструментов и связанных с ними элементов. По умолчанию правая панель должна показать DOM как узел, который имеет полезную информацию по созданию стиля как CSS класс и идентификатор узла. Элемент имеющий идентификатор <code>navigator-toolbox, </code>не имеет идеи. Для того, чтобы изменить стиль в вашей теме, вы должны написать правило выбора, чтобы выбрать этот класс.</p> - -<p>Откройте файл <code>chrome/browser/browser.css</code> в вашей теме. Найдите тот файл для селектора <code>#navigator-toolbox</code>, и добавьте<code> background: orange; </code>правило к ней.</p> - -<p>Сохраните файл.</p> -</div> - -<div id="section_6"> -<h4 class="editable" id="Chrome_URIs"><span>Chrome URIs</span></h4> - -<p>Далее, вы указываете Firefox, где найти файлы для вашей темы. CSS, XUL, и другие файлы являются частью "<a href="/docs/Chrome_Registration" rel="internal">Chrome Packages</a>" - расслоения компонентов пользовательского интерфейса, которые загружаются с помощью <code><a class="external" rel="external nofollow" title="chrome://">chrome://</a></code> URIs. Вместо того, чтобы загрузить браузер с диска с помощью <code><a class="external" rel="external nofollow" title="file://">file://</a></code> URI (так как местоположение Firefox в системе может меняться от платформы к платформе и от системы к системе), разработчики Mozilla придумали решение для создания URI, с содержимым известным установленной надстройке.</p> - -<p>Окно браузера: <code><a class="external" rel="external nofollow" title="chrome://browser/content/browser.xul">chrome://browser/content/browser.xul</a></code>. Попробуйте ввести этот URL в адресной строке в Firefox!</p> - -<p>Chrome URIs состоят из нескольких компонентов:</p> - -<ul> - <li>Во-первых, <strong>URI scheme</strong> (<code>chrome</code>), который говорит сетевым библиотекам Firefox's, что это Chrome URI, что указывает на то, что содержание URI должны быть обработанно как (<code>chrome</code>). Приравниваем (<code>chrome</code>) к (<code>http</code>), который указывает Firefox рассматривать URI, как веб-страницу.</li> - <li>Во-вторых, имя пакета (в приведенном выше примере, <code><strong>browser</strong></code>) который идентифицирует пакет компонентов пользовательского интерфейса.</li> - <li>В-третьих, тип запрашиваемых данных. Есть три типа: <code>content</code> (XUL, JavaScript, XBL bindings, etc. которые формируют структуру и поведение приложения UI), <code>locale</code> (DTD, .properties files etc, которые содержат строки для UI's <a href="/docs/Glossary/Localization" rel="internal">localization</a>), и <code>skin</code> (CSS и изображения, которые формируют <a href="/Add-ons/Themes" rel="internal">theme</a> из UI)</li> - <li>И, наконец, путь к файлу для загрузки.</li> -</ul> - -<p>Так, <code><a class="external" rel="external nofollow" title="chrome://foo/skin/bar.png">chrome://foo/skin/bar.png</a></code> загружает файл <code>bar.png </code>из тем <code>foo</code> раздела <code>skin</code>.</p> - -<p>При загрузке контента с помощью Chrome URI, Firefox использует Chrome реестр, чтобы перевести идентификаторы URI в исходные файлы на диск (или в пакет JAR).</p> -</div> - -<div id="section_7"> -<h4 id="Создание_Chrome_Manifest">Создание Chrome Manifest</h4> - -<p>Chrome Manifest это файл, показывающий путь для URI Chrome к файлам вашей темы. Для получения дополнительной информации о Chrome Manifest и свойствах, которые они поддерживают, см <a href="/docs/Chrome_Registration" rel="internal">Chrome Manifest</a> справка.</p> - -<p>Откройте файл под названием <strong>chrome.manifest</strong> вами создан бок о бок <code>chrome</code> каталог в корне расширений источника папки иерархии</p> - -<p>Добавьте в этом коде:</p> - -<pre class="eval">skin browser sample chrome/browser/ -skin communicator sample chrome/communicator/ -skin global sample chrome/global/ -skin mozapps sample chrome/mozapps/ -</pre> - -<p><strong>Не забывайте слэш, "<code>/</code>"!</strong> Без него пакет не будет зарегистрирован. Третий столбец должен соответствовать значению <strong>internalName</strong> вашей темы от установки манифеста выше.</p> - -<p>Это карта каталога мест внутри вашей темы. Например, линия <code>skin browser sample skin/browser/</code> означает "когда пользователь выбирая тему, использует каталог <code>browser/</code> чтобы посмотреть скины пакета <code>browser</code>." Более сжато, это означает, что URL <a class="external" title="chrome://browser/skin/some/path/file.css">chrome://browser/skin/some/path/file.css</a> будет искать файл <code>browser/some/path/file.css</code> в корневом каталоге вашей темы,.</p> - -<p>Сохраните файл.</p> -</div> - -<div id="section_9"> -<h4 class="editable" id="Тест"><span>Тест</span></h4> - -<p>Во-первых, вы должны сообщить Firefox о вашей теме. На стадии разработки для Firefox версии 2.0 и выше, вы можете указать Firefox на папку в которой вы разрабатываете тему, и она будет загружать её каждый раз при перезагрузке Firefox.</p> - -<ol> - <li>Разместить свою <a class="external" href="http://kb.mozillazine.org/Profile_folder" rel="external nofollow" title="http://kb.mozillazine.org/Profile_folder">profile folder</a> и под ней профиль, с которым вы хотите работать (e.g. <code>Firefox/Profiles/<profile_id>.default/</code>).</li> - <li>Откройте папку <code>extensions/</code> , создайте при необходимости.</li> - <li>Создайте новый текстовый файл и укажите полный путь к папке развития внутри (e.g. <code>C:\themes\my_theme\</code> or <code>~/themes/my_theme/)</code>. Пользователям Windows, следует сохранить направление слэш OS' , <em>все</em> должны помнить <strong>включать</strong> закрывающий слэш и <strong>удалить</strong> любые пробелы в конце строки.</li> - <li>Сохраните файл с идентификатором вашей темы, как его имя (e.g. <code><a class="link-mailto" href="mailto:sample@example.net" rel="external nofollow" title="mailto:sample@example.net">sample@example.net</a></code>). Нет Расширение файла.</li> -</ol> - -<p>Теперь вы готовы проверить вашу тему!</p> - -<p>Запустите Firefox. Firefox обнаружит текстовую ссылку на директорию темы и установит тему. Ваша тема не будет активена в первый раз после установки, и вам нужно будет нажать кнопку "Включить" и перезапустить, прежде чем вы увидите изменения. После перезапуска, это во второй раз, вы должны увидеть цвет фона панелей инструментов, который отображается оранжевым цветом.</p> - -<p>Теперь вы можете вернуться назад и внести дополнительные изменения в ваши CSS файлы, закройте и перезапустите Firefox, и увидите обновления.</p> -</div> - -<div id="section_10"> -<h4 id="Пакет">Пакет</h4> - -<p>Теперь, когда ваша тема работает, вы можете <a href="/Add-ons/Extension_Packaging" rel="internal">package</a> это для развертывания и установки.</p> - -<p>Zip вверх по <strong>содержанию</strong> папки вашей темы (не тема сама папка), и переименовать zip файл, чтобы иметь .xpi расширение.В операционной системе Windows, вы можете сделать это легко, выбрав все файлы и вложенные папки в папке расширения, щелкните правой кнопкой мыши и выберите "Send To -> Compressed (Zipped) Folder". .Zip файл будет создан для вас. Просто переименуйте его, и вы это сделали!</p> - -<p>В Mac OS или Linux, вы можете использовать командную строку zip tool:</p> - -<pre class="eval">zip -r my_theme.xpi install.rdf chrome.manifest browser communicator global mozapps -</pre> - -<p>Или, если у вас установлен 7-Zip, вы можете использовать его для архивирования:</p> - -<pre class="eval">7z a -tzip my_theme.xpi chrome chrome.manifest -</pre> - -<p><strong>Заметка: </strong>инструмент командной строки будет <strong>обновлять</strong> существующий архив, не заменив его - так что если вы имеете файлы, которые вы удалили из вашей темы, обязательно удалите <code>.xpi </code>файл перед повторным запуском команды архиватора.</p> - -<p>Теперь загружаем .xpi файл на сервер, убедившись, что он служит как <code>application/x-xpinstall</code>. Вы можете связаться с ним и дать людям возможность скачать и установить его. Для целей тестирования только своего .xpi, файл можно просто перетащить в менеджер дополнений через "Tools -> Add-ons Manager", либо открыть и использовать "File -> Open File...".</p> - -<div id="section_11"> -<h5 class="editable" id="Установка_с_веб-страницы">Установка с веб-страницы</h5> - -<p>Есть множество способов, которыми можно установить расширения с веб-страниц, в том числе по прямой связи с файлами XPI и использование объекта InstallTrigger. Создателям расширений и веб-авторам рекомендуется использовать <a href="/docs/Installing_Extensions_and_Themes_From_Web_Pages" rel="internal"> InstallTrigger method</a> чтобы установить XPIS, поскольку он обеспечивает лучший опыт для пользователей.</p> -</div> - -<div id="section_12"> -<h5 class="editable" id="С_помощью_addons.mozilla.org">С помощью <span>addons.mozilla.org</span></h5> - -<p>Дополнения Mozilla распределит на сайты, где вы можете разместить свою тему бесплатно. Ваша тема будет размещен на зеркале сети Mozilla, чтобы гарантировать загрузку, даже если это может быть очень популярным. сайт Mozilla также предоставляет пользователям более легкую установку, и автоматически сделает ваши новые версии доступными пользователям существующих версий при их загрузке. Кроме того, Дополнения Mozilla позволяет пользователям комментировать и обеспечить обратную связь по вашей теме. Настоятельно рекомендуется использовать Дополнения Mozilla, чтобы распространять свои темы!</p> - -<p>Посетите <a class="external" href="https://addons.mozilla.org/developers/" rel="external nofollow" title="http://addons.mozilla.org/developers/">https://addons.mozilla.org/developers/</a> чтобы создать учетную запись и начать распространять свои темы!</p> - -<p><em>Заметка:</em> Ваша тема будет передаваться быстрее и будет больше загруженна, если у вас есть хорошее описание и несколько скриншотов темы в действии.</p> -</div> -</div> - -<div id="section_21"> -<div id="section_23"> -<ul> - <li><a class="internal" href="/Add-ons/Themes" title="en/Themes">Themes</a></li> -</ul> - -<p>______________________________</p> -</div> -</div> - -<p> </p> |