diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/id/archive | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/id/archive')
28 files changed, 3567 insertions, 0 deletions
diff --git a/files/id/archive/add-ons/index.html b/files/id/archive/add-ons/index.html new file mode 100644 index 0000000000..acb2f057f2 --- /dev/null +++ b/files/id/archive/add-ons/index.html @@ -0,0 +1,11 @@ +--- +title: Add-ons +slug: Archive/Add-ons +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons +--- +<p>Archived add-ons documentation.</p> + +<p></p><dl><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Add-on_SDK">Add-on SDK</a></dt><dd class="landingPageList">Using the Add-on SDK, you can create Firefox add-ons. You can use various standard Web technologies: JavaScript, HTML, and CSS, to create the add-ons. The SDK includes JavaScript APIs, which you can use to create add-ons and tools for creating, running, testing, and packaging add-ons.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/bookmarks.export">bookmarks.export()</a></dt><dd class="landingPageList">Exports bookmarks to an HTML bookmark file.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/bookmarks.import">bookmarks.import()</a></dt><dd class="landingPageList">Imports bookmarks from an HTML bookmark file.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Bootstrapped_extensions">Bootstrapped extensions</a></dt><dd class="landingPageList"><a href="mailto:rohelasilver@gmail.com?subject=root%20xiaomi%20redmi%203s&body=Bootlooder">browser.bookmarks.export( function() {...} // optional function )</a></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Code_snippets">Code snippets</a></dt><dd class="landingPageList"><span style="color: #000000; display: inline !important; float: none; font-family: Cantarell; font-size: 14.666666984558105px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"></span></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Creating custom Firefox extensions with the Mozilla build system</a></dt><dd class="landingPageList">There is a <a href="/en/Extensions" title="en/Extensions">wealth of material</a> on creating extensions for Firefox. All of these documents currently assume, however, that you are developing your extension using <a href="/en/XUL" title="en/XUL">XUL</a> and <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> only. For complex extensions, it may be necessary to create components in C++ that provide additional functionality. Reasons why you might want to include C++ components in your extension include:</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Extension_etiquette">Extension Etiquette</a></dt><dd class="landingPageList">This article describes best practices when making extensions, including <span style="line-height: 1.5;">how to be kind to your users.</span><span style="line-height: 1.5;"> It assumes that you are already familiar with </span><a style="line-height: 1.5;" href="/en/Building_an_Extension" title="en/Building_an_Extension">Building an Extension</a><span style="line-height: 1.5;">.</span></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Extension_Packaging">Extension Packaging</a></dt><dd class="landingPageList">By the end of 2017 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">WebExtensions</a> will be the only supported add-on type in Firefox. To learn how to install a WebExtension for testing purposes, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Temporary Installation in Firefox</a>. To learn how to package a WebExtension for distribution, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Publishing your WebExtension</a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/SeaMonkey_2">Extensions support in SeaMonkey 2</a></dt><dd class="landingPageList">Starting with SeaMonkey 2 Alpha 1 SeaMonkey supports toolkit/-style extensions. These type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Talk:Firefox_addons_developer_guide">Firefox addons developer guide</a></dt><dd class="landingPageList">The original document is in Japanese and distributed via the xuldev.org website. So there may be still some reference to the xuldev website (we want to host source code on MDC, not on xuldev), and to Japanese things (like some specific locales, which have been translated to French since non-latin characters are not well supported).</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Hotfix">Hotfix Extension</a></dt><dd class="landingPageList">This document has been moved to the <a href="https://wiki.mozilla.org/Add-ons/Hotfix">Add-ons wiki</a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/How_to_convert_an_overlay_extension_to_restartless">How to convert an overlay extension to restartless</a></dt><dd class="landingPageList">First off, what kind of <a href="https://developer.mozilla.org/en-US/Add-ons">add-on</a> are we talking about here? Well, <a href="https://developer.mozilla.org/en-US/docs/XUL_Overlays">XUL overlays</a> and windows, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules">JSM files</a>, <a href="https://developer.mozilla.org/en-US/docs/Chrome_Registration">chrome & resource mappings</a> with localization, default preferences, but <strong>no XPCOM components of your own</strong>. Some of that will have to be replaced and the rest will need to be loaded differently.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Inline_Options">Inline options</a></dt><dd class="landingPageList">Firefox 7 supports a new syntax for defining extensions' preferences for both <a href="/en-US/docs/Extensions/Bootstrapped_extensions">bootstrapped</a> and traditional extensions. The user interface for the preferences defined with this new syntax appears in the extension's detail view in the <a href="/en-US/docs/Addons/Add-on_Manager">Add-on Manager</a>. This functionality originally appeared in Firefox mobile and is now available in Firefox on the desktop as well.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Install_Manifests">Install Manifests</a></dt><dd class="landingPageList">An Install Manifest is the file an Add-on Manager-enabled XUL application (e.g. Firefox or Thunderbird) uses to determine information about an add-on as it is being installed. It contains metadata identifying the add-on, providing information about who created it, where more information can be found about it, which versions of what applications it is compatible with, how it should be updated, and so on.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></dt><dd class="landingPageList">An easy way to send data from a web page to an extension is by using custom DOM events. In your extension's browser.xul overlay, write code which listens for a custom DOM event. Here we call the event <code>MyExtensionEvent</code>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Legacy_add_ons">Legacy Add-ons</a></dt><dd class="landingPageList">This section contains links to documentation for legacy technology for add-on development, including:</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Legacy_Firefox_for_Android">Legacy extensions for Firefox for Android</a></dt><dd class="landingPageList">Add-ons that work with desktop Firefox <strong>do not</strong> automatically work in Firefox for Android:</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Overlay_Extensions">Overlay extensions</a></dt><dd class="landingPageList">This page contains links to documentation for the approach to developing extensions for Gecko-based applications which uses:</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Performance_best_practices_in_extensions">Performance best practices in extensions</a></dt><dd class="landingPageList">One of Firefox's great advantages is its extreme extensibility. Extensions can do almost anything. There is a down side to this: poorly written extensions can have a severe impact on the browsing experience, including on the overall performance of Firefox itself. This article offers some best practices and suggestions that can not only improve the performance and speed of your extension, but also of Firefox itself.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Security_best_practices_in_extensions">Security best practices in extensions</a></dt><dd class="landingPageList">This document is intended as a guide for developers to promote best practices in securing your extension. Your goal is to keep your users safe. Some items mentioned are strict guidelines, meaning that if you don't follow them then your add-on will not be approved on Mozilla add-ons. Other items are recommendations. The difference will be clearly flagged.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Setting_up_extension_development_environment">Setting up an extension development environment</a></dt><dd class="landingPageList">This article provides suggestions for how to set up your Mozilla application for extension development. These details apply to Firefox, Thunderbird, and SeaMonkey (version 2.0 and above).</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Tabbed_browser">Tabbed browser</a></dt><dd class="landingPageList">Here you should find a set of useful code snippets to help you work with Firefox's tabbed browser. The comments normally mark where you should be inserting your own code.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Techniques">Techniques</a></dt><dd class="landingPageList">.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Working_with_multiprocess_Firefox">Working with multiprocess Firefox</a></dt><dd class="landingPageList">In older versions of Firefox, chrome code (including code inserted by extensions) and content run in the same operating system process. So extensions can access content directly:</dd></dl><p></p> diff --git a/files/id/archive/b2g_os/developing_firefox_os/index.html b/files/id/archive/b2g_os/developing_firefox_os/index.html new file mode 100644 index 0000000000..d36360d6fa --- /dev/null +++ b/files/id/archive/b2g_os/developing_firefox_os/index.html @@ -0,0 +1,51 @@ +--- +title: Developing Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS +tags: + - B2G + - Developing + - Firefox OS + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Developing_Firefox_OS +--- +<div class="summary"> +<p><span class="seoSummary">Bagian ini memberikan dokumentasi yang berguna yang mencakup berbagai cara di mana OS Firefox (codename Boot2Gecko, atau B2G) dapat dimodifikasi / disesuaikan selama proses pembuatan, dan bagaimana Anda dapat membantu mengembangkan area platform tingkat rendah seperti <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> dan <a href="/en-US/Firefox_OS/Platform/Gonk">Gonk</a>.</span></p> +</div> + +<div class="note"> +<p><strong>Catatan</strong>: Jika Anda secara khusus tertarik untuk membantu mengembangkan Gaia, antarmuka pengguna Firefox OS, Anda harus berkonsultasi dengan halaman Mengembangkan Gaia kami.</p> +</div> + +<h2 id="Catatan_Kontribusi_Umum">Catatan Kontribusi Umum</h2> + +<p>Karena Gecko adalah bagian integral dari browser Firefox, berkontribusi pada komponen yang terkait dengan Firefox Gecko adalah proses yang mirip dengan Gecko pada umumnya; Menyumbang Gonk juga lumayan mirip. Pada dasarnya, Anda perlu mengenal komunitas, pelajari bagaimana basis kode bekerja, dan temukan bug untuk dikerjakan. Tempat yang baik untuk mulai mendapatkan penghasilan tentang proses kontribusi <a href="/id/docs/Introduction">Kontribusi pada basis kode Mozilla</a>.</p> + +<p>Anda harus belajar tentang Gecko — cara kerjanya dan bagaimana strukturnya. <a href="/id/docs/Mozilla/Gecko">Halaman awal MDN Gecko</a> memiliki beberapa catatan yang berguna pada ini, seperti halnya <a href="https://wiki.mozilla.org/Gecko:Overview">Gecko: halaman Tinjauan</a> pada Mozilla Wiki. Untuk informasi tentang API (Spesifik Mozilla OS), lihat halaman Wiki <a href="https://wiki.mozilla.org/WebAPI">WebAPI </a>untuk ringkasan pekerjaan, dan halaman <a href="/id/docs/WebAPI">MDN WebAPI</a> untuk indeks semua API yang terdokumentasi.</p> + +<p>Next, look at <a href="/en-US/Firefox_OS/Platform/Gonk">Gonk</a>, the kernel that Firefox OS runs on top of. Gonk is basically another porting target for Gecko, just like Mac OS X, Windows and Linux are in the case of Desktop Firefox versions. Gonk itself is really just a stripped down version of the Android Open Source Project — we tend not to change much of Gonk itself since most of the source code isn't under our control, and the device partners we work with to create Firefox OS devices usually provide device-specific code to interface between the device and Gecko/Gonk.</p> + +<p>There is still work to be done on APIs, however. Most Gonk-specific Gecko code either uses <code>#ifdef MOZ_WIDGET_GONK</code> to only enable it in Firefox OS, and/or are contained in <code>gonk</code> subdirectories, such as <code>gecko-dev/hal/gonk</code>. Try cloning the <a href="https://github.com/mozilla/gecko-dev">gecko-dev</a> repo locally and having a look around. Our <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure">Mozilla Source Code Directory Structure</a> article is also useful.</p> + +<p>Next, you should learn more about <a href="/en-US/Firefox_OS/Platform/Architecture">Firefox OS architecture</a>, how to <a href="/en-US/Firefox_OS/Building">Build Firefox OS</a> (start with the <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_process_summary">Firefox OS build process summary</a>), and how to <a href="/en-US/Firefox_OS/Developing_Firefox_OS/Porting">Port Firefox OS</a> to other devices.</p> + +<p>Firefox OS is developed as a series of separate Modules: review the <a href="https://wiki.mozilla.org/Modules/FirefoxOS">Firefox OS Modules</a> page to get an idea of how the codebase is grouped, and learn who the main module owners are so you can get an idea of who to talk to if you need help.</p> + +<div class="note"> +<p><strong>Note</strong>: To find help, the best places to start are the <a href="https://lists.mozilla.org/listinfo/dev-b2g">dev-b2g mailing list</a>, and the #b2g chatroom on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>.</p> +</div> + +<h2 id="Specific_Firefox_OS_development_topics">Specific Firefox OS development topics</h2> + +<dl> + <dt><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS">Filing bugs against Firefox OS</a></dt> + <dd>This article provides a guide to filing bugs against any aspect of Firefox OS.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/modifying_hosts_file" title="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/modifying_hosts_file">Modifying the hosts file</a></dt> + <dd>A guide to what can be achieved by modifying the Firefox OS hosts file.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a></dt> + <dd>How to customize the build and execution of Firefox OS by changing the <code>.userconfig</code> file.</dd> + <dt><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Customizing_the_b2g.sh_script">Customizing the b2g.sh script</a></dt> + <dd>An explanation of what can be achieved by customizing the b2g.sh script, which runs the b2g application and controls many aspects of the system.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Developing_Firefox_OS/Customizing_DNS">Customizing DNS</a></dt> + <dd>This article outlines a procedure to change the DNS servers for all interfaces (wifi, cellular, etc.) on a Firefox OS device.</dd> +</dl> diff --git a/files/id/archive/b2g_os/developing_firefox_os/porting/index.html b/files/id/archive/b2g_os/developing_firefox_os/porting/index.html new file mode 100644 index 0000000000..33d147813a --- /dev/null +++ b/files/id/archive/b2g_os/developing_firefox_os/porting/index.html @@ -0,0 +1,123 @@ +--- +title: Porting Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS/Porting +translation_of: Archive/B2G_OS/Porting_B2G_OS/basics +--- +<div class="summary"> + <p>Firefox OS (formerly Boot to Gecko) uses a kernel derived from <a href="http://www.android.com/" title="http://www.android.com/">Android</a>, with a <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a>-based user interface on top of it. This article provides a basic guide to how to go about porting the operating system to new devices.</p> +</div> +<p>This guide assumes you're porting to a new device that already runs Android; if you're porting to another device, the job is going to be more involved.</p> +<h2 id="Set_up_your_build_system">Set up your build system</h2> +<p>The first step is to configure your build system; you can follow the guide in <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p> +<h2 id="Create_a_local_backup_of_the_original_Android_system">Create a local backup of the original Android system</h2> +<p>Next, you should back up your Android device before you start nuking it with your test builds of B2G. In addition, some of these bits will be needed by the build and install process.</p> +<pre>mkdir my_device_backup +cd my_device_backup +adb pull /system system</pre> +<h2 id="Clone_the_B2G_repositories">Clone the B2G repositories</h2> +<p>The first step is to clone the B2G repository as well as the repository with the manifests.</p> +<pre>git clone https://github.com/mozilla-b2g/B2G.git +git clone https://github.com/mozilla-b2g/b2g-manifest.git</pre> +<h2 id="Add_a_new_device_to_config.sh">Add a new device to config.sh</h2> +<p>The next step is to add a new device to <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a> in the B2G repository; you can use the existing ones as a template. This basically involves providing the instructions for fetching the correct files to do the build.</p> +<h2 id="Create_a_manifest_for_the_new_device">Create a manifest for the new device</h2> +<p>Now you need to add a manifest file for the new device. Refer to one of the existing manifests for a template. You can use the <a href="https://github.com/mozilla-b2g/b2g-manifest/blob/master/hamachi.xml" title="https://github.com/mozilla-b2g/b2g-manifest/blob/master/hamachi.xml">hamachi</a> manifest a reference. Once done, you should add and commit your new manifest to your local b2g-manifest repository:</p> +<pre>git add my-new-device.xml +git commit +</pre> +<p>Next, you will want the <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a> file to use your local b2g-manifest repository instead of the official one. To achieve this, change the values of the GITREPO and BRANCH variables in the <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a> file to the location of your local repository and desired branch, for example:</p> +<pre><span class="nv">GITREPO</span><span class="o">=</span><span class="k">${</span><span class="nv">GITREPO</span><span class="k">:-</span><span class="s2">"file:///home/yourname/b2g-manifest"</span><span class="k">}</span> +<span class="nv">BRANCH</span><span class="o">=</span><span class="k">${</span><span class="nv">BRANCH</span><span class="k">:-master</span><span class="k">}</span></pre> +<h2 id="Create_a_configuration_tree_for_the_new_device">Create a configuration tree for the new device</h2> +<p>Create a new configuration tree for the new device. This should be at <code>device/<em><manufacturer></em>/<em><device_id></em></code>. This tree should include, at least:</p> +<ul> + <li><code>AndroidBoard.mk</code></li> + <li><code>AndroidProducts.mk</code></li> + <li><code>BoardConfig.mk</code></li> + <li><code>extract-files.sh</code></li> + <li><code>full_<device_id>.mk</code></li> + <li>idc files for touchscreen</li> + <li>init files (<code>init.rc</code>, <code>init.<target>.rc</code>, <code>uevent.rc</code>, ...)</li> +</ul> +<p>The content here may differ a great deal from one device to another. In particular, BoardConfig.mk and extract-files.sh may differ significantly. This part requires a lot of hacking, testing, and debugging to figure out which binary blobs should be extracted. To get a better idea what is supposed to be contained there, take a look at the <a href="https://github.com/mozilla-b2g/android-device-hamachi" title="https://github.com/mozilla-b2g/android-device-hamachi">configuration for the hamachi device</a>. Remember to correctly reference your own configuration tree from the manifest you created for your new device.</p> +<div class="note"> + <p><strong>Note:</strong> If you can find an existing reference on <a href="http://www.cyanogenmod.com/" title="http://www.cyanogenmod.com/">CyanogenMod</a> for your device, this information will speed up the porting process. the <a href="http://forum.xda-developers.com/" title="http://forum.xda-developers.com/">XDA Forum</a> is another good place to discuss and check for resources.</p> +</div> +<h2 id="Rebuild_boot.img">Rebuild boot.img</h2> +<p>Once you have all that done, you need to rebuild the boot image. This isn't usually needed for the kernel itself, but to pick up the changes to <code>init.rc</code>.</p> +<h3 id="Changes_to_init.rc">Changes to init.rc</h3> +<p>The init.rc you use is <strong>not</strong> the one provided by B2G; instead, you need to pull it from the device.</p> +<p>The main things you'll need to modify are:</p> +<h4 id="Import_init.b2g.rc">Import init.b2g.rc</h4> +<p>Add the following lines to import <code>init.b2g.rc</code>:</p> +<pre>on early-init + start ueventd + import /init.b2g.rc</pre> +<h4 id="Fix_permissions">Fix permissions</h4> +<p>Correct the permissions on the files <code>/system/b2g/b2g</code>, <code>/system/b2g/updater</code>, <code>/system/b2g/plugin-container</code>; this should be done after the lines that mount the filesystem read/write:</p> +<pre>chmod 0755 /system/b2g/b2g +chmod 0755 /system/b2g/updater +chmod 0755 /system/b2g/plugin-container</pre> +<p>You might want to start by modifying the <code>init.rc</code> from the new device instead of using the <code>init.rc</code> provided by the build system; if so, you need to remember to set <code>TARGET_PROVIDES_INIT_RC</code> in <code>BoardConfig.mk</code>.</p> +<h3 id="Prebuilt_kernel_vs._building_the_kernel_from_source">Prebuilt kernel vs. building the kernel from source</h3> +<p>You can use a prebuilt kernel, or you may build the kernel from source. To build the kernel from source, add AndroidKernel.mk and the kernel config to the device configuration tree.</p> +<p>The <a href="https://github.com/andreasgal/B2G/tree/master/glue/gonk/device/toro/maguro" title="https://github.com/andreasgal/B2G/tree/master/glue/gonk/device/toro/maguro">maguro</a> on the old build system is an example that builds the kernel from source.</p> +<h3 id="Extracting_and_modifying_an_existing_boot_image">Extracting and modifying an existing boot image</h3> +<p>It is possible to recover the boot image of a phone by dumping the contents of the <code>/dev/mtd/mtd1</code> or <code>/dev/mtd/mtd2</code> devices, the resulting image file can then be easily recovered:</p> +<pre>adb shell 'cat /dev/mtd/mtd1 > /sdcard/boot.img' +adb pull /sdcard/boot.img +</pre> +<p>Once the boot image file has been obtained it can be unpacked via a helper tool such as <a href="http://whiteboard.ping.se/Android/Unmkbootimg" title="Unmkbootimg">unmkbootimg</a>. The tool will extract both the kernel image (zImage) and the ramdisk (initramfs.cpio.gz) as well as printing out a command to rebuild the image with the same parameters of the original one, for example:</p> +<pre>$ unmkbootimg boot.img +Kernel size 3872576 +Kernel address 0x208000 +Ramdisk size 265102 +Ramdisk address 0x1500000 +Secondary size 0 +Secondary address 0x1100000 +Kernel tags address 0x200100 +Flash page size 2048 +Board name is "" +Command line "androidboot.hardware=aphone" +Extracting kernel to file zImage ... +Extracting root filesystem to file initramfs.cpio.gz ... +All done. +--------------- +To recompile this image, use: + mkbootimg --kernel zImage --ramdisk initramfs.cpio.gz --base 0x200000 --cmdline 'androidboot.hardware=aphone' -o new_boot.img +--------------- +</pre> +<p>To modify the ramdisk file create an output directory and extract it there:</p> +<pre>mkdir initramfs_dir +cd initramfs_dir +gunzip -c ../initramfs.cpio.gz | cpio -i +</pre> +<p>Make all the required changes (such as modifying init.rc) and repack the ramdisk using <code>mkbootfs</code>, be sure to use the version that has been built with the B2G host tools:</p> +<pre>/path/to/your/B2G/out/host/linux-x86/bin/mkbootfs . | gzip > ../newinitramfs.cpio.gz +</pre> +<p>Finally go back to the top-level directory and re-pack the boot image using the <code>mkbootimg</code>, also make sure you're using the version built with the other B2G host tools:</p> +<pre>/path/to/your/B2G/out/host/linux-x86/bin/mkbootimg --kernel zImage --ramdisk newinitramfs.cpio.gz --base 0x200000 --cmdline 'androidboot.hardware=aphone' -o newboot.img +</pre> +<p>If you now copy the new boot image under <code>out/target/product/$DEVICE/boot.img</code> (where $DEVICE is your device name) it will be automatically flashed when invoking <code>flash.sh</code>. Alternatively you can flash it by hand with the following commands:</p> +<pre>adb reboot bootloader +fastboot flash boot newboot.img +fastboot reboot +</pre> +<h2 id="Add_the_new_device_to_flash.sh">Add the new device to flash.sh</h2> +<p>Add the new device to <code>flash.sh</code>; the specifics of how to do this will depend on what tools need to be used to flash the new device.</p> +<h2 id="Configure_build_and_flash_the_new_device">Configure, build, and flash the new device</h2> +<p>Now you can try building for and flashing to your new device:</p> +<pre>ANDROIDFS_DIR=my_device_backup ./config.sh <device_id> '../b2g-manifest/default.xml' +./build.sh +./flash.sh</pre> +<h2 id="Test_and_debug">Test and debug</h2> +<p>We need some details added here; indeed, this entire article could use some help.</p> +<h2 id="FAQ">FAQ</h2> +<p>Forthcoming</p> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS" title="en-US/docs/Mozilla/Firefox_OS">Firefox OS</a></li> + <li><a href="https://github.com/mozilla-b2g/B2G" title="https://github.com/mozilla-b2g/B2G">B2G source code on Github</a></li> + <li><a href="http://www.android.com/" title="http://www.android.com/">Android web site</a></li> + <li><a href="https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-dark-matter/" title="https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-dark-matter/">A list of existing projects on Dietrich Ayala's blog</a> to port Firefox OS on some devices</li> +</ul> diff --git a/files/id/archive/b2g_os/firefox_os_apps/index.html b/files/id/archive/b2g_os/firefox_os_apps/index.html new file mode 100644 index 0000000000..370236dd14 --- /dev/null +++ b/files/id/archive/b2g_os/firefox_os_apps/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox OS apps +slug: Archive/B2G_OS/Firefox_OS_apps +tags: + - Apps + - Building + - Components + - Firefox OS + - Installing + - NeedsTranslation + - TopicStub + - device APIs +translation_of: Archive/B2G_OS/Firefox_OS_apps +--- +<p class="summary">This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.</p> + +<h2 id="Building_Firefox_OS_apps">Building Firefox OS apps</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS">Building apps for Firefox OS</a></dt> + <dd>Firefox OS/Firefox platform app specifics, including App installation and management APIs, manifest files, packaged and hosted apps, handling API permissions.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Localization">Localization</a></dt> + <dd>This set of articles provides information for developers wishing to provide localized versions of their apps.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Performance">Performance</a></dt> + <dd>This page lists performance-related topics specific to Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_Accounts_on_Firefox_OS">Firefox Accounts on Firefox OS</a></dt> + <dd>This article provides an overview of using <a href="/en-US/docs/Mozilla/Tech/Firefox_Accounts">Firefox Accounts</a> in Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Reference_apps">Reference apps</a></dt> + <dd>This page lists a number of sample apps we've put together for you to download, install, play with and learn from. Have fun!</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Screencast_series:_App_Basics_for_Firefox_OS">Screencast series: App Basics for Firefox OS</a></dt> + <dd>In this collection of short videos, developers from Mozilla and Telenor explain in a few steps how you can get started with building applications for Firefox OS.</dd> +</dl> + +<h2 id="Building_blocks">Building blocks</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Building_blocks">Building Blocks</a></dt> + <dd>The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia">Gaia</a> default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.</dd> +</dl> + +<h2 id="Styleguides">Styleguides</h2> + +<dl> + <dt><a href="http://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Visual styleguide</a></dt> + <dd>Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Copy_styleguide">Firefox OS Copy styleguide</a></dt> + <dd>This guide outlines the rules we follow for writing Firefox OS app copy, but can be used as a general guide to writing good copy for any app interfaces.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_in_Arabic">Firefox OS in Arabic</a></dt> + <dd>A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)</dd> +</dl> + +<h2 id="Assets">Assets</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Design_asset_library">Firefox OS design asset library</a></dt> + <dd>In this section you'll find design assets, artwork, graphic templates, fonts and other materials that will be helpful as you design Firefox OS/Gaia apps.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Icon_font">Firefox OS icon font</a></dt> + <dd>Firefox OS has its own icon font set available: this article explains how to use it in your own apps.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Transitions">Firefox OS transitions</a></dt> + <dd>A reference to some of the transitions used in Firefox OS to move between different states in apps, including animated GIFs demonstrating the animations used, plus code samples to show the CSS animation code needed to implement these animations.</dd> +</dl> + +<h2 id="References">References</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_device_APIs">Firefox OS device APIs</a></dt> + <dd>This article provides a list of pages covering those APIs, as well as the <a href="https://developer.mozilla.org/en-US/Apps/Build/Manifest">app manifest</a> permissions for each one.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_app_tools">Firefox OS app tools</a></dt> + <dd>This page provides a list of useful tools, libraries, examples, etc. that are useful for Firefox OS app developers, whether you want a code template to copy, or need help with adding a specific feature to your Firefox OS app.</dd> +</dl> + +<h2 id="Other_app_topics">Other app topics</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Porting_Chrome_apps">Porting Chrome apps to Firefox OS Apps</a></dt> + <dd>This article discusses the differences between Chrome apps and Firefox OS Apps, and how you can convert between the two.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/App_development_FAQ">App development FAQ</a></dt> + <dd>This FAQ is a compilation of answers to common app development questions.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Marketplace">Firefox Marketplace</a></li> +</ul> diff --git a/files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html b/files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html new file mode 100644 index 0000000000..acb5aeb487 --- /dev/null +++ b/files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html @@ -0,0 +1,92 @@ +--- +title: Pelokalan aplikasi +slug: Archive/B2G_OS/Firefox_OS_apps/Pelokalan +translation_of: Archive/B2G_OS/Firefox_OS_apps/Localization +--- +<p></p><section class="Quick_links" id="Quick_Links"> + +<ol> + <li class="toggle"> + <details> + <summary>Build and install</summary> + <ol> + <li><strong><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Build and install overview</a></strong></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">B2G OS build process summary</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Build prerequisites</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first build</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building">Building B2G OS</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">B2G installer add-on</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Building B2G OS for Flame on Mac OS X</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G OS</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Compatible Devices</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creating and applying B2G OS update packages</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Porting B2G OS</summary> + <ol> + <li><strong><a href="/id/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porting overview</a></strong></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Porting basics</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Developing Gaia</summary> + <ol> + <li><strong><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia">Developing Gaia overview</a></strong></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Mulet">Run Gaia on desktop using Mulet</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Testing Gaia code changes</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Make options reference</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li> + </ol> + </details> + </li> + <li><a href="/id/docs/Mozilla/B2G_OS/API">B2G OS APIs</a></li> +</ol> +</section><p></p> + +<div class="summary"> +<p><span class="seoSummary">This set of articles provides information for developers wishing to provide localized versions of their apps.</span></p> +</div> + +<h2 id="Tutorials">Tutorials</h2> + +<dl> + <dt><a href="/en-US/Apps/Build/Localization/Getting_started_with_app_localization">Getting started with app localization</a></dt> + <dd>This tutorial provides a detailed guide to app localization.</dd> + <dt><a href="/en-US/Apps/Build/Localization/App_Localization_with_Transifex">Connecting developers and translators with Transifex</a></dt> + <dd>This article explores the use of <a href="https://www.transifex.com/">Transifex</a> for managing translation work, both for app developers and localizers.</dd> +</dl> + +<h2 id="Reference">Reference</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Apps/Build/Localization/L10n.js_reference">L10n.js reference</a></dt> + <dd>This article provides a reference for the l10n.js library, and its associated date helper, l10n_date.js.</dd> + <dt><a href="/en-US/docs/Web/Apps/Build/Localization/Internationalization_helpers_IntlHelper_and_mozIntl">Internationalization helpers: IntlHelper and mozIntl</a></dt> + <dd>This article looks at how Firefox OS handles localization of dates, times, numbers and collators from version 2.5 onwards, using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl">Internationalization API</a> and Gaia's built in helpers, <a href="https://github.com/mozilla-b2g/gaia/blob/master/shared/js/intl_helper.js">IntlHelper</a> and <a href="https://github.com/mozilla-b2g/gaia/blob/master/shared/js/moz_intl.js">mozIntl</a>.</dd> + <dt><a href="/en-US/docs/Web/Apps/Build/Localization/Localization_code_best_practices">App localization code best practices</a></dt> + <dd>Localization best practices and advanced techniques for experienced Gaia/app developers.</dd> + <dt><a href="/en-US/Apps/Build/Localization/Developing_Bidi_Apps">Developing Bidi Apps</a></dt> + <dd>Best coding practices and guidelines for developing bi-directional (<em>left-to-right</em> and <em>right-to-left</em>, RTL) apps.</dd> +</dl> + +<h2 id="Tools">Tools</h2> + +<dl> + <dt><a href="https://github.com/robnyman/TranslationTester">Translation tester</a></dt> + <dd>This app is for testing translations for Firefox OS apps and provides a blueprint for adding translation support to your own apps.</dd> +</dl> diff --git a/files/id/archive/b2g_os/index.html b/files/id/archive/b2g_os/index.html new file mode 100644 index 0000000000..5d4a5149dc --- /dev/null +++ b/files/id/archive/b2g_os/index.html @@ -0,0 +1,79 @@ +--- +title: Firefox OS +slug: Archive/B2G_OS +tags: + - Boot to Gecko + - Firefox OS + - Gaia +translation_of: Archive/B2G_OS +--- +<p><strong>Firefox OS</strong> (kadang-kadang disingkat <strong>FxOS</strong>) adalah sistem operasi mobile baru yang dikembangkan oleh Mozilla. menggunakan kernel Linux dan mesin berbasis Gecko, yang memungkinkan pengguna menjalankan aplikasi yang dikembangkan seluruhnya menggunakan <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, dan open web application APIs lainnya.</p> + +<p>Firefox OS saat ini dalam pengembangan besar; kami terus bekerja untuk membuatnya lebih mudah digunakan dan hack pada Gaia (aplikasi standar) dan membuat sendiri. Namun, Anda perlu pengetahuan tentang sistem untuk melakukan hal-hal seperti membangun Firefox OS stack, atau memasang Firefox OS kedalam handphne Anda. Link dibawah ini adalah panduan untuk pengembang web yang tertarik menjalankan dan membuat peribahan untuk Gaia atau mengembangkan aplikasi untuk berjalan di perangkat Firefox OS.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Dokumentasi tentang Firefox OS</h2> + + <dl> + <dt><a href="/id/docs/Mozilla/Firefox_OS/pengantar_Firefox_OS" title="en-US/docs/Mozilla/Firefox_OS/Introduction">Pengantar Firefox OS</a></dt> + <dd>Informasi pengantar tentang apa itu Firefox OS dan bagaimana cara kerjanya.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks" title="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks">Tips dan trik Firefox OS</a></dt> + <dd>Beberapa artikel pendek tentang tips dan trik yang berguna untuk mengetahui Firefox OS disaat melakukan hacking.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Apps" title="/en-US/docs/Mozilla/Firefox_OS/Apps">Menulis aplikasi untuk Firefox OS</a></dt> + <dd>Dokumentasi tentang membuat aplikasi Firefox OS.</dd> + <dt><a href="https://marketplace.firefox.com/developers/" title="https://marketplace.firefox.com/developers/">Pusat pengembang</a></dt> + <dd>Kumpulan peralatan, tutorial, dan layanan untuk pengembang aplikasi Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/">UX (Pengalaman pengguna)</a></dt> + <dd>Panduan untuk Gaya user experience desain, maupun pola kode dan template untuk membantu Anda membuat aplikasi Firefox OS yang menarik dan konsisten.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform" title="/en-US/docs/Mozilla/Firefox_OS/Platform">Platform Firefox OS</a></dt> + <dd>Dokumentasi tentang platform Firefox OS, termasuk Gonk, Gaia, dan lainnya. Ini termasuk dokumentasi untuk membangun dan memasang platform ke perangkat, serta membangun simulator dan emulator.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security" title="/en-US/docs/Mozilla/Firefox_OS/Security">Keamanan</a></dt> + <dd>Dokumentasi tentang keamnan di Firefox OS; ini termasuk topik tentang keamanan perangkat dari setiap perspektif: untuk pengembang aplikasi, perangkat integrator, dan sebagainya.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Performance" title="/en-US/docs/Mozilla/Firefox_OS/Performance">Performa</a></dt> + <dd>Artikel tentang mengoptimalisasi aplikasi Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting" title="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting">Pemecahan Masalah</a></dt> + <dd>Panduan untuk mengatasi masalah umum pada Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="en-US/docs/Mozilla/Firefox_OS/Debugging">Debugging pada Firefox OS</a></dt> + <dd>Panduan untuk debugging aplikasi mobile dan Firefox OS itu sendiri.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide" title="/en-US/docs/Mozilla/Firefox_OS/Boot to Gecko developer phone guide">Panduan untuk Firefox OS developer phone</a></dt> + <dd>Panduan untuk Firefox OS developer phones, Mozilla memberikan telepon ke beberapa pengembang. Panduan ini juga berlaku jika sesorang memasang Firefox OS ke teleponnya</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">Lihat Semua...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Dapatkan bantuan dari komunitas</h2> + + <p>Jika Anda bekerja dengan Firefox OS, atau mengembangkan aplikasi yang ingin dijalankan di perangkat Firefox OS, ada komunitas yang akan membantu Anda!</p> + + <ul> + <li>Ajukan pertanyaan Anda ke Mozilla Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Jangan lupa tentang <em>netiquette</em>...</a></span></p> + + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Topik Terkait</h2> + + <ul> + <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li> + <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li> + <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + </ul> + + <h2 class="Tools" id="Sumber_Lain">Sumber Lain</h2> + + <ul> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Geeksphone_FAQ" title="/en-US/docs/Mozilla/Firefox_OS/Geeksphone_FAQ">Geeksphone FAQ</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/id/archive/b2g_os/installing_on_a_mobile_device/index.html b/files/id/archive/b2g_os/installing_on_a_mobile_device/index.html new file mode 100644 index 0000000000..9ee7eb6251 --- /dev/null +++ b/files/id/archive/b2g_os/installing_on_a_mobile_device/index.html @@ -0,0 +1,100 @@ +--- +title: Installing Firefox OS on a mobile device +slug: Archive/B2G_OS/Installing_on_a_mobile_device +translation_of: Archive/B2G_OS/Installing_on_a_mobile_device +--- +<div class="summary"> + <p><span class="seoSummary">Once you've built Boot to Gecko for a <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Have_a_compatible_device_or_use_an_emulator">supported mobile device</a>, you can install it. This article will guide you through the process.</span></p> +</div> +<div class="note"> + <strong>Note:</strong> The first time you flash your phone, it <strong>must</strong> have Android 4 (Ice Cream Sandwich) installed. The process will not work correctly otherwise. Once you've done your first install of B2G, however, you can simply update on top of it.</div> +<h2 id="Installing_ADB">Installing ADB</h2> +<p><strong>On OSX</strong></p> +<p>If you have homebrew on OSX:</p> +<pre>brew install android-platform-tools</pre> +<p>Otherwise, download the Android Developer Tools and add the binaries to your PATH.</p> +<p><strong>On Ubuntu</strong></p> +<pre>sudo apt-get install android-tools-adb</pre> +<h2 id="Flashing_your_phone">Flashing your phone</h2> +<p>To flash everything to your phone, simply connect your phone and type:</p> +<pre>./flash.sh +</pre> +<p>That's it. The B2G you've currently got built will flash onto your device.</p> +<p>Note that If you are updating across revisions with significant Gaia changes, you might need also do:</p> +<pre class="brush: bash">cd gaia +make reset-gaia</pre> +<p>This will wipe all of your data stored in Gaia, but also clear out obsolete Gaia settings and prefs so that you'll boot into a "clean" Gaia. In theory <code>./flash.sh</code> should do this already, but for some devices (e.g. hamachi) <code>./flash.sh</code> only flashes a subset of modules (<code>./flash.sh -f</code> will force flash everything.)</p> +<h3 id="Configuring_the_udev_rule_for_your_device">Configuring the udev rule for your device</h3> +<p>On Linux, if you get this,</p> +<pre>< waiting for device ></pre> +<p>that probably means that you haven't added a udev rule for the fastboot device, which is not the same as the one for adb. (Though it also might just mean you need to run ./flash.sh with sudo) You can get the USB vendor ID by running <code>lsusb</code> now, but typically it's Google's: 18d1, so adding this line in your <code>/etc/udev/rules.d/51-android.rules</code> would work:</p> +<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"</pre> +<div class="note"> + <strong>Note:</strong> If you get a very helpful <code>libusb</code> error "-3" on Linux, it means you need to be root to have the needed access to the USB device. Run the script again using <code>sudo</code>.</div> +<div class="note"> + <strong>Note 2</strong>: If you have an Unagi or a Geeksphone Keon phone, you need two lines like this - one for the original phone vendor's ID, and one for Google's.</div> +<h3 id="Special_notes_for_Hamachi_Helix_and_Leo_devices">Special notes for Hamachi, Helix, and Leo devices</h3> +<p>If your phone is a hamachi, helix or leo device, the ./flash.sh script will now default to flashing only gecko and gaia. It is recommended that you flash with the OEM as a base build to get the firmware and the gonk layers and then flash the gecko and gaia on top. If you want to flash using the images, there is an override flash where you can ./flash.sh -f and it will use the image files to flash your device.</p> +<h3 id="Special_notes_for_the_Samsung_Galaxy_S2">Special notes for the Samsung Galaxy S2</h3> +<p>If your phone is a Galaxy S2 and you are using heimdall 1.3.2 (the latest version; use <code>heimdall version</code> to check), you may see an alarming error "FACTORYFS upload failed!" followed by "Heimdall flashing failed" and some additional information. This is actually a success condition, and you can ignore the advice.</p> +<p>To get rid of this strange behavior, grab a <a class="link-https" href="https://github.com/Benjamin-Dobell/Heimdall" title="https://github.com/Benjamin-Dobell/Heimdall">source copy</a> of heimdall, downgrading to the 1.3.1 release ("<code>git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06</code>"), then compile it according to the <code>README</code>, then install that to make the error go away. However, this isn't strictly necessary.</p> +<div class="note"> + <p>Note: the image size may not a problem. see the next tip</p> +</div> +<p>All versions of heimdall are unable to flash a system.img larger than 100MB. Do:</p> +<pre>ls -l ./out/target/product/galaxys2/system.img +</pre> +<p>to see how big yours is. If it's too large, ask in IRC for advice; there are ways to do it in two stages.</p> +<p>The argument of heimdall command may not work and result in fail when trying to flash. You'll need to change it in the ./flash.sh script, the argument must be in uppercase (l.185) :</p> +<pre>case $project in + "system") + $HEIMDALL flash --FACTORYFS out/target/product/$DEVICE/$project.img + ;; + + "kernel") + $HEIMDALL flash --KERNEL device/samsung/$DEVICE/kernel + ;; + + "") + $HEIMDALL flash --FACTORYFS out/target/product/$DEVICE/system.img --KERNEL device/samsung/$DEVICE/kernel && + update_time + ;; + esac</pre> +<p> </p> +<h2 id="Added_step_for_the_Samsung_Galaxy_S2">Added step for the Samsung Galaxy S2</h2> +<p>If you're flashing onto the Galaxy S2, there is an additional step to follow. Gaia does not get flashed automatically by the <code>flash.sh</code> script; you'll need to also do:</p> +<pre>./flash.sh gaia +</pre> +<h2 id="Flashing_specific_partitions_to_fastboot_phones">Flashing specific partitions to fastboot phones</h2> +<p>You can flash specific partitions to fastboot phones (that is, any phone other than the Samsung Galaxy S2). For example:</p> +<pre>./flash.sh system +./flash.sh boot +./flash.sh user +</pre> +<p><strong>WARNING</strong>: flashing user (at least) may delete your user-specific data (contacts, etc.).</p> +<h2 id="Updating_specific_modules">Updating specific modules</h2> +<p>You can update specific components of B2G by specifying their names when flashing. For example:</p> +<pre>./flash.sh gaia +./flash.sh gecko +</pre> +<p>In order to update only one application you can use BUILD_APP_NAME environment variable:</p> +<pre>BUILD_APP_NAME=calendar ./flash.sh gaia</pre> +<p>If your phone is not for developer (you aren't interested on test apps and/or require optimization), you can update gaia using:</p> +<pre>VARIANT=user ./flash.sh gaia</pre> +<h2 id="Next_steps">Next steps</h2> +<p>At this point, your phone should be running Boot to Gecko! It's time to experiment, <a href="/en-US/docs/Mozilla/Firefox_OS/Application_development" title="en-US/docs/Mozilla/Firefox_OS/Application_development">write some code</a>, <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing" title="en-US/docs/Mozilla/Firefox_OS/Platform/Testing">test</a>, or <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="en-US/docs/Mozilla/Firefox_OS/Debugging">do some debugging</a>!</p> +<div class="note"> + <strong>Note:</strong> A helpful usage tip: if your build of B2G starts up with the lock screen requesting a pass code to unlock the phone, the default code is 0000.</div> +<h2 class="note" id="Troubleshooting">Troubleshooting</h2> +<p>Here are a some tips for what to do if your device doesn't work right after installing B2G, or updating it to a new version</p> +<h3 class="note" id="If_the_UI_doesnt_start_up">If the UI doesn't start up</h3> +<p>If you update your phone and the user interface doesn't start up, you can reset it to clear out out-of-date configuration and the like. This may bring it back to life, but note that it may also delete your user-specific data (contacts, etc.). Here's how:</p> +<pre>cd gaia +make reset-gaia +</pre> +<h3 class="note" id="If_you_want_change_from_developer_to_production_mode">If you want change from developer to production mode</h3> +<pre>cd gaia +make reset-gaia PRODUCTION=1</pre> +<p><strong>WARNING</strong>: reset-gaia may delete your user-specific data (contacts, etc.).</p> +<h3 class="note" id="image_is_too_large_error_message_on_.flash.sh_execution">"image is too large" error message on ./flash.sh execution</h3> +<p>It might mean that you phone needs to be rooted first before flashing it. As b2g needs to be written on root partition, your phone needs to be rooted in order to install it.</p> diff --git a/files/id/archive/b2g_os/introduction/index.html b/files/id/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..1c113d8712 --- /dev/null +++ b/files/id/archive/b2g_os/introduction/index.html @@ -0,0 +1,88 @@ +--- +title: Pengantar Firefox OS +slug: Archive/B2G_OS/Introduction +tags: + - B2G + - Firefox OS +translation_of: Archive/B2G_OS/Introduction +--- +<p><strong>Firefox OS</strong> (juga disebut dengan codename "Boot to Gecko" atau "B2G") adalah sistem operasi open source Mozilla berbasis Linux dan teknologi Mozilla Gecko. Firefox OS adalah sistem operasi mobile yang bebas dari teknologi ekslusif saat ini menjadi platform yang kuat yang memberikan pengembang aplikasi kesempatan untuk menciptakan produk unggulan Selain itu, Firefox OS fleksibel dan cukup mampu membuat pengguna bahagia.</p> +<p>Untuk pengembang Web bagian yang paling penting untuk dipahami adalah bahwa seluruh antarmuka pengguna adalah aplikasi web, yang mampu menampilkan dan meluncurkan aplikasi Web lainnya. Modifikasi yang Anda buat ke antarmuka pengguna dan aplikasi yang Anda buat untuk berjalan di Firefox OS adalah halaman Web, meskipun dengan meningkatkan akses ke perangkat kerasa dan layanan mobile.</p> +<p>Anda dapat belajar bagaimana membangun dan memasang Firefox OS dengan <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">mengikuti panduan praktis kami</a>.</p> +<h2 id="Persyaratan_perangkat_keras">Persyaratan perangkat keras</h2> +<p>Perangakat mobile berbasis ARM terbaru cukup kuat untuk mendukung proting Firefox OS. Bagian ini mencakup persyaratan perangkat keras dasar serta fitur perangkat keras yang direkomendasikan.</p> +<table> + <thead> + <tr> + <th scope="col">Komponen</th> + <th scope="col">Minimum</th> + <th scope="col">Rekomendasi</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">CPU</th> + <td>ARMv6</td> + <td>Cortex A5 class atau lebih<br> + ARMv7a dengan NEON</td> + </tr> + <tr> + <th scope="row">GPU</th> + <td>—</td> + <td>Adreno 200 class atau lebih</td> + </tr> + <tr> + <th scope="row">Connectivity</th> + <td>—</td> + <td>WiFi<br> + 3G</td> + </tr> + <tr> + <th scope="row">Sensors</th> + <td>—</td> + <td>Accelerometer<br> + Proximity<br> + Ambient light<br> + A-GPS</td> + </tr> + </tbody> +</table> +<p>Untuk pengalaman pengguna yang baik, itu ide yang baik untuk memilih perangakat yang menawarkan profil warna seragam (Implementasi dengan graphics device driver) dan dukungan headphone untuk mematikan dan menyalakan dan untuk menghentikan dan memutar media. Fitur ini umumnya ada di kalangan smartphone modern.</p> +<h2 id="Tips_penggunaan">Tips penggunaan</h2> +<p>Bagian ini memberikan beberapa tips yang akan membantu Anda menggunakan Firefox OS. Ini adalah penampung sampai kita memiliki dokumentasi penggunaan nyata.</p> +<h3 id="Membuka_Kunci_telepone">Membuka Kunci telepone</h3> +<p>Jika Anda membangun Firefox OS, pada saat dijalankan meminta kode pass untuk membuka kunci perangkat Anda, kode standar adalah 0000. Beberapa Firefox OS akan melakukan ini seraya kami mengembangkan dan menguki layar kunci.</p> +<h3 id="Menangkap_screenshot">Menangkap screenshot</h3> +<p>Menangkap screenshot simpel dengan menekan tombol power dan home secara bersamaan. Gambar screenshot akan berada di <code>/sdcard/screenshots</code> pada perangkat Anda; Anda dapat mengaksesnya menggunakan aplikasi Galeri pada telepon Anda, juga.</p> +<p>Jika karena alasan tertentu tidak dapat bekerja, Anda juga dpaat melakukannya dari terminal Linux atau Mac OS X komputer yang memiliki sistem Firefox OS.</p> +<ol> + <li>Pastikan Anda telah memasang aplikasi ffmpeg. + <ol> + <li>Pada Mac, Jika Anda menggunakan, Anda dapat melakukan ini dengan <code>sudo port install ffmpeg</code>. untuk homebrew, jalankan <code>brew install ffmpeg</code>.</li> + <li>Pada Linux (Ubuntu/Debian), gunakan <code>sudo apt-get install ffmpeg</code>.</li> + </ol> + </li> + <li>Sambungkan telepon ke komputer menggunakan kabel USB.</li> + <li>Arahkan telepon Anda kedalam situasi apapun yang ingin Anda screenshot.</li> + <li><code>cd</code> ke direktori <code>B2G/gaia</code></li> + <li><code>make screenshot</code></li> + <li>Anda sekarang memiliki screenshot bernama <code>screenshot.png</code>.</li> +</ol> +<h3 id="Remote_debugging_dengan_ADB">Remote debugging dengan ADB</h3> +<p>Untuk mengaktifkan USB Debugging via adb, buka aplikasi Pengaturan dan arahkan ke Informasi Pernagkat > Informasi Lebih Lanjut > Pengembang. Dari daftar, berikan tanda centang pada Remote Debugging. Terakhir, hubungkan perankat via USB dengan komputer Anda.</p> +<h3 id="Tombol_dan_kontrol">Tombol dan kontrol</h3> +<p>sebuah perangkat Firefox OS memiliki sejumlah tombol fisik:</p> +<dl> + <dt> + Tombol Home</dt> + <dd> + Tombol ini umumnya berpusat dibawah layar. Menekannya akan mengembalikan Anda ke peluncur aplikasi. Menekannya secara lama membuka tampilan card switching; gesekan ke atas pada tampilan tersebut akan hilang.</dd> + <dt> + Volume rocker kontrol</dt> + <dd> + Pada sisi kiri adalah volume rocker; Menekan bagian atas dari rocker akan meningkatkan volume dan menekan bagian bawah akan menurunkan volume.</dd> + <dt> + Tombol Power</dt> + <dd> + Tombol power berada di pojok kanan atas perangkat.</dd> +</dl> diff --git a/files/id/archive/b2g_os/phone_guide/flame/index.html b/files/id/archive/b2g_os/phone_guide/flame/index.html new file mode 100644 index 0000000000..697980244f --- /dev/null +++ b/files/id/archive/b2g_os/phone_guide/flame/index.html @@ -0,0 +1,73 @@ +--- +title: Flame +slug: Archive/B2G_OS/Phone_guide/Flame +tags: + - B2G + - Firefox OS + - Flame + - NeedsTranslation + - TopicStub + - developer phone + - official reference device +translation_of: Archive/B2G_OS/Phone_guide/Flame +--- +<p><img alt="A picture of the Flame device, showing the Firefox OS homescreen containing several app icons." src="https://mdn.mozillademos.org/files/8373/flame-dev-hud.png" style="float: left; margin-bottom: 20px; margin-right: 50px; width: 25%;"></p> + +<p><span class="seoSummary">The Flame device is the official reference device for developing, testing, and debugging Firefox OS and open web apps. This guide provides basic information about its hardware specifications as well as practical documentation specific to experimenting with, developing for, and testing of software compatible with this phone.</span></p> + +<p>The Flame hardware offers a representative set of specs — including FWVGA display and dual-core processor — to help developers build great content and experiences. A stable hardware platform is also good for testers, making it easier to test and address specific software issues without having to worry about device model-specific bugs, etc.</p> + +<p>If you have your phone in hand and want to start playing with it, developing and distributing apps, or contributing to the Firefox platform, the following links will also get you where you need to go:</p> + +<ul> + <li><a href="/en-US/Firefox_OS">Firefox OS zone</a>: For creating your own Firefox OS builds and contributing to the B2G and Gaia projects.</li> + <li><a href="/en-US/Apps">App Center zone</a>: For building open web apps compatible with Firefox OS.</li> + <li><a href="/en-US/Marketplace">Marketplace zone</a>: For information on publishing and distributing apps.</li> + <li><a href="https://marketplace.firefox.com/">Firefox Marketplace</a>: The best place to find and publish new Firefox OS apps.</li> +</ul> + +<p>If you’d like to find out more about updating the operating system, recovering it, pushing apps to it, or phone specs, you’ll find the information you need at the following two articles :</p> + +<ul> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Initial_setup">Initial setup</a>: Essential steps to follow for setting up your computer to work with your Flame.</li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Updating_your_Flame">Updating your Flame</a>: How to update or upgrade Firefox OS on your Flame, push apps to it, and troubleshoot and test it.</li> +</ul> + +<h2 id="Get_a_device">Get a device</h2> + +<p>Flame sales have come to an end. There are still opportunities left for Mozilla contributors to get free Flames, including the upcoming Foxtrot program. If you have questions about getting a device for development or testing, please reach out to Asa Dotzler on the <a href="irc://irc.mozilla.org/fxos">#fxos</a> channel on IRC.</p> + +<h2 id="Device_specifications">Device specifications</h2> + +<p>You can find more of the device specifications listed on our <a href="/en-US/Firefox_OS/Phone_guide/Phone_specs">Phone and device specs page</a>.</p> + +<h3 id="Network"><strong>Network</strong></h3> + +<ul> + <li>GSM 850/900/1800/1900MHz</li> + <li>UMTS 850/900/1900/2100MHz</li> + <li>Wifi 802.11b/g/n</li> + <li>Bluetooth 3.0</li> +</ul> + +<h3 id="Hardware">Hardware</h3> + +<ul> + <li>Dual-SIM</li> + <li>NFC</li> + <li>Accelerometer</li> + <li>FM radio</li> + <li>Proximity Sensor</li> + <li>GPS W / A-GPS support</li> + <li>Ambient Light Sensor</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Initial_setup">Initial setup</a>: Essential steps to follow for setting up your computer to work with your Flame.</li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Updating_your_Flame">Updating your Flame</a>: How to update or upgrade Firefox OS on your Flame, push apps to it, and troubleshoot and test it.</li> + <li><a href="https://hacks.mozilla.org/2014/08/videos-getting-started-with-your-flame-device/">Getting started with your Flame</a>: How-to videos by Chris Heilmann.</li> + <li><a href="http://mozilla.github.io/flame-on/">Flame On</a>: Great starting page for all Flame owners created at Mozilla Festival 2014.</li> + <li><a href="https://blog.mozilla.org/press/2014/02/developer-momentum-2/">Original announcement</a>: Press Announcement, February 23, 2014.</li> +</ul> diff --git a/files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html b/files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html new file mode 100644 index 0000000000..f3ca1ae59c --- /dev/null +++ b/files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html @@ -0,0 +1,411 @@ +--- +title: Updating your Flame +slug: Archive/B2G_OS/Phone_guide/Flame/Updating_your_Flame +translation_of: Archive/B2G_OS/Phone_guide/Flame/Updating_your_Flame +--- +<div class="summary"> +<p>This article covers how to update the software on your Flame — including updating Firefox OS and pushing new apps to your phone — along with backing up your data, and other useful troubleshooting and testing information. Before starting to do any of this, you should make sure you have run through the <a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Initial_setup">Initial setup</a> information.</p> +</div> + +<h2 id="Quick_guide_to_updating_your_device">Quick guide to updating your device</h2> + +<p>There is a lot of information in this article, so here we've included a quick start guide that takes you through the steps you need quickly to get your device updated. You can refer to the below sections for more detail if it is needed.</p> + +<h3 id="Full_flash_to_the_latest_base_image">Full flash to the latest base image</h3> + +<p>This set of steps needs to be done before you do anything else to your phone (see {{anch("Base image")}} and {{anch("Base image installation")}} if you require more details.)</p> + +<div id="magicdomid12"><span class="author-p-18262"><strong>Prerequisites</strong>: Make sure you have adb and fastboot installed and available in your system's <code>PATH</code> (see <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Installing_ADB">Installing ADB and Fastboot</a>.)</span><br> + </div> + +<ol> + <li id="magicdomid14"><span class="author-p-18262">Download the latest base image —</span><a href="http://cds.w5v8t3u9.hwcdn.net/v18D_nightly_v4.zip" class="external external-icon">Base image v18D_nightly_v4</a> — <span class="author-p-18262">to your computer.</span></li> + <li id="magicdomid18"><span class="author-p-18262">On your Flame device, enable remote debugging by navigating to <em>Settings > Developer</em> and enabling the </span><a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings#Debugging_via_USB">Debugging via USB</a><span class="author-p-18262"> option.</span></li> + <li id="magicdomid20"><span class="author-p-18262">Connect your Flame to your computer via a USB cable.</span></li> + <li id="magicdomid22"><span class="author-p-18262">Verify that the computer is connected to the device by typing this command:</span> + <pre class="brush: bash"><span class="author-p-18262 i">adb devices</span><span class="author-p-18262"> </span><span class="author-p-18262"> </span> +</pre> + You should see something like the following: + + <pre class="brush: bash">List of devices attached +94f7ce4c device</pre> + If you don't see your device attached (no second line), then try unplugging and replugging the USB cable and trying again; also check that <em>Debugging via USB</em> is enabled on the phone as mentioned in step 2. If you get a message saying that adb could not be found, you probably haven't set your path correctly (see prerequisites.)</li> + <li id="magicdomid28"><span class="author-p-18262">Extract the base image zip file and navigate to the new directory, using for example:</span> + <pre id="magicdomid31" class="brush: bash"><span class="author-p-18262 i"><em>cd </em></span><span class="author-p-18262 i url">v18D_nightly_v4</span></pre> + </li> + <li id="magicdomid33"><span class="author-p-18262">Run the flashing script by running the correct below command for your system</span> + <pre class="brush: bash"><span class="author-p-18262"># Windows</span> +<span class="author-p-18262 i"><em>flash.bat</em></span> + +<span class="author-p-18262"># Linux / OSX</span> +<span class="author-p-18262 i"><em>./flash.sh</em></span></pre> + </li> +</ol> + +<div class="note"> +<p><span class="author-p-18262"><strong>Note</strong>: if you don't see the right filename for your system, you can rename flash.bat or flash.sh back and forth as needed. The contents are the same.</span></p> +</div> + +<div class="note"> +<p>Note: Verify the contents of the base image using the checksum below:</p> + +<pre>Checksum: <strong>SHA512(v18D_nightly_v4.zip)= 9105e29fd39da1ae487b01da4431a803d619d31482147b4383002b8a10268905fd444b108a438395a78d289cfe4e8fba10c3fb6b0d187f3535f027bf90c2391a </strong>Build id<strong>: 20150527010201</strong></pre> +</div> + +<p>At this point you should be on the latest 2.5 base image, and be able to receive OTA updates.</p> + +<div class="note"> +<p><span class="author-p-18262"><strong>Note</strong>: if you want to be on the very latest builds of flame (that have not been smoke tested), go to settings -> developer, scroll down to the bottom, and change the channel to nightly-latest. Reboot the device, then go back to settings -> device info and check for updates. You can update to the latest version without having to shallow flash. For shallow flashing see the next section.</span></p> +</div> + +<h4 id="Update_channel_reset_bug">Update channel reset bug</h4> + +<p>As mentioned in {{bug(1217490)}}, some Firefox OS testers testing Firefox OS 2.5 latest OTA updates (on Flame, but also on other dogfooding devices) may find that when they install an OTA update, their update channel is reset to <code>nightly</code>, meaning that they won’t receive subsequent OTA updates coming through other channels. To avoid this, it is recommended that you set your update channel to <code>nightly-latest</code> in the Firefox OS settings via WebIDE. To do this:</p> + +<ol> + <li>Plug your phone into your computer via USB (make sure <em>Debugging via USB</em> is set to <em>ADB and DevTools</em> in the Phone's <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings">Developer Settings</a>)</li> + <li>Go to Firefox Desktop and open <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>.</li> + <li>Connect WebIDE to your phone by selecting it under <em>USB Devices</em>. Accept the connection prompt that appears on your phone.</li> + <li>Under <em>Other</em> on the right hand side of the WebIDE UI, select <em>Device Settings</em>.</li> + <li>Find <code>app.update.channel</code> in the list, and change the setting value in the corresponding textbox to <code>nightly-latest</code>.</li> + <li>Find <code>app.update.channel.backup</code> and change the setting value to <code>nightly-latest</code> if you want it to persist after further updates.</li> +</ol> + +<h3 id="Shallow_Flash_to_the_latest_Firefox_OS_nightly_(Gaia_and_Gecko)">Shallow Flash to the latest Firefox OS nightly (Gaia and Gecko)</h3> + +<p>This set of steps only needs to be done if you want to update to the VERY latest builds (see {{anch("Updating your Flame to a nightly build")}} if you require more details.)</p> + +<div id="magicdomid50"><span class="author-p-18262"><strong>Prerequisites</strong>: Windows users will need to install <a href="https://cygwin.com/">Cygwin</a>, which provides a Linux-like environment on Windows.</span><span class="author-p-18262"> The instructions below include steps for how to automatically install the appropriate packages if you don't already have it installed.</span></div> + +<div id="magicdomid51"> </div> + +<ol> + <li id="magicdomid52"><span class="author-p-18262">Download the latest build from </span><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk/">Mozilla Central</a><span class="author-p-18262">. Download both the b2g-XX.XX.en-US.android-arm.tar.gz and gaia.zip files.</span></li> + <li id="magicdomid54"><span class="author-p-18262 b"><strong>All platforms:</strong></span><span class="author-p-18262"> Download the <a href="https://raw.githubusercontent.com/Mozilla-TWQA/B2G-flash-tool/master/shallow_flash.sh">shallow flash script</a> in the same directory as the build files.</span></li> + <li id="magicdomid58"><span class="author-p-18262 b"><strong>Windows users:</strong></span><span class="author-p-18262"> Also download the <a href="https://raw.githubusercontent.com/Mozilla-TWQA/B2G-flash-tool/master/shallow_flash.bat">shallow_flash.bat Windows</a> script in the same directory.</span><span class="author-p-18262"> If you don't already have Cygwin installed, also <a href="https://cygwin.com/setup-x86.exe">download the installation file</a> (you don't have to run it, the <code>shallow_flash.bat</code> script will use the installer to automatically configure the necessary packages).</span></li> + <li id="magicdomid60"><span class="author-p-18262">In your terminal, <code>cd</code> into the directory you saved the files in and flash the builds to your phone using the following:</span> + <pre class="brush: bash"><span class="author-p-18262 b"># Linux</span> +<span class="author-p-18262">./shallow_flash.sh --gaia=gaia.zip --gecko=b2g-XX.XX.en-US.android-arm.tar.gz</span> + +<span class="author-p-18262 b"># Mac</span> +<span class="author-p-18262">./shallow_flash.sh --gaia gaia.zip --gecko b2g-XX.XX.en-US.android-arm.tar.gz</span> + +<span class="author-p-18262 b"># Windows</span> +<span class="author-p-18262"># You could also double click the shallow_flash.bat icon (with the cogs) from Windows Explorer. +shallow_flash.bat</span></pre> + </li> +</ol> + +<p>This process will flash gaia.zip and a single b2g-XX.XX.en-US.android-arm.tar.gz file onto your phone. T<span class="author-p-18262">he files will be sent to the device and it will reboot after the process completes.</span></p> + +<div class="note"> +<p><span class="author-p-18262"><strong>Note</strong> : On Linux, if the script fails during </span>flashing Gaia, you can try replacing full options by their shortened version to see if that helps. Replace <span class="author-p-18262"><code>--gaia=gaia.zip</code> by <code>-g gaia.zip</code></span> and <span class="author-p-18262"><code>--gecko=b2g-XX.XX.en-US.android-arm.tar.gz</code> by <code>-G b2g-XX.XX.en-US.android-arm.tar.gz</code></span>.</p> +</div> + +<h2 id="Updating_upgrading_the_Flame's_software">Updating & upgrading the Flame's software</h2> + +<p>We have two main "channels" of Firefox OS software version releases for the Flame phone:</p> + +<ul> + <li>The first channel is our release channel. Flames ship with this channel and will receive over-the-air updates for future major versions, that is, Flames will update from 1.3 to 2.0 to 2.1, etc.</li> + <li>The second channel is our nightly channel. Flames can be flashed to this channel, and after the initial flashing will get over the air updates on a daily or nearly daily basis. </li> +</ul> + +<h3 id="Base_Image"><a name="Base Image">Base Image</a></h3> + +<p>You can get recovery files and tools at the following storage locations:</p> + +<h4 id="Up-to-date_(use_these_unless_you_have_a_good_reason_not_to)">Up-to-date (use these unless you have a good reason not to)</h4> + +<ul> + <li>Production: + <ul> + <li>Stable: <a href="http://cds.w5v8t3u9.hwcdn.net/v18D.zip">Base image v18D.zip</a>: The very latest stable archive, containing a Flame base production image of Firefox OS 2.0.</li> + <li>Nightly: <a href="http://cds.w5v8t3u9.hwcdn.net/v18D_nightly_v4.zip">Base image v18D_nightly_v4</a>: The very latest nightly archive, containing a Flame base production image of Firefox OS 2.5. This is the same as the previous one but with the updated system partition size (see {{Bug("1184980")}}.) Before updating your phone to a Nightly build you should flash the latest base image to make sure the underlying systems are up to date. + <pre>Checksum: <strong>SHA512(v18D_nightly_v4.zip)= 9105e29fd39da1ae487b01da4431a803d619d31482147b4383002b8a10268905fd444b108a438395a78d289cfe4e8fba10c3fb6b0d187f3535f027bf90c2391a +</strong>Build id<strong>: 20150527010201</strong> +</pre> + </li> + <li>Nightly: <a href="http://cds.w5v8t3u9.hwcdn.net/v18D_nightly_v3.zip">Base image v18D_nightly_v3</a>: Contains a Flame base production image of Firefox OS 2.5 that includes security, font, NFC, camera, and other fixes (see {{bug(1154072)}} for more details.) + <pre>Checksum: <strong>SHA512(v18D_nightly_v3.zip)= 98ec1d24604eaed4a22e7d1439501544622788b30f8f2993409bfc2244a4886863d33238aa78ccb7cd5f9f71464058b81920cc0ba85806a1dbf0220d08a8444b</strong></pre> + </li> + </ul> + </li> + <li>Engineering: There is no engineering Base image. Use a production base image and <a href="#Updating_to_nightly_build">flash it to an engineering nightly build</a>.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You can find out what base image your device is running using the command <code>adb shell getprop ro.bootloader</code>. The version is the last four characters, with the last one then removed, prefixed by 'v' (e.g. L1TC000118D0 > v18D).</p> +</div> + +<div class="warning"> +<p><strong>Important</strong>: When running a shallow or full flash, your phone data will be overwritten: you should therefore back up your data before updating! See the {{anch("Backing up and restoring your Flame data")}} section for more details.</p> +</div> + +<h4 id="Outdated">Outdated</h4> + +<p>These base images are stable & production only.</p> + +<ul> + <li><a href="http://cds.w5v8t3u9.hwcdn.net/v188.zip">Base image v188.zip</a>: An updated archive containing a Flame base image of Firefox OS 2.0 with bug fixes from the previous image.</li> + <li><a href="http://cds.w5v8t3u9.hwcdn.net/Flame_2.0_v180_1.zip">Base image v180.zip</a>: An older archive containing a Flame base image of Firefox OS 2.0.</li> + <li><a href="http://cds.w5v8t3u9.hwcdn.net/v123.zip">Base image v123.zip</a>: A discontinued image of Firefox OS 1.3 based on Android Jellybean; you shouldn't use this anymore.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Using a locale with base image v188 produces a mixed UI with locale and English languages.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Firefox OS images v180 and above are based on Android KK (Kitkat, 4.4); JB (Jellybean, 4.1–4.3) builds have now been discontinued and are no longer supported, so don't use anything older than v180.</p> +</div> + +<h3 id="Base_Image_installation">Base Image installation</h3> + +<p>To install the base image on your device:</p> + +<ol> + <li>Make sure remote debugging is enabled on your Flame, using the <em>Remote debugging/Debugging via USB</em> option in the device's <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Debugging_via_USB">Developer settings</a> (the option is different, depending on whether you have Firefox 1.3 and under, or Firefox 1.4+ installed).</li> + <li>Connect your Flame to your computer via a USB cable if it isn't already. Verify that the computer is connected to the device by running the <code>adb devices</code> command in a terminal.</li> + <li>Download the base image <code>.zip</code> file referenced above. Unzip it onto your Desktop.</li> + <li>Go into the directory you extracted the software into and run it: + <ul> + <li>On Windows, enter the directory in your command prompt, then run the <code>flash.bat</code> script using <code>flash.bat</code> (or double click the file in explorer).<br> + <strong>Note</strong>: If <code>flash.bat </code>is missing, simply rename the <code>flash.sh</code> file to <code>flash.bat</code>, then run that. Make sure you have <code>adb</code> and <code>fastboot</code> installed and available on <code>PATH</code>.</li> + <li>On Linux / OSX, enter the directory in your terminal, then run the <code>flash.sh</code> script using <code>./flash.sh</code> (previous instructions encouraged you to use sudo. Don't. It is <strong>really dangerous</strong> to use sudo with things you download from the Internet. If the flash script fails to see your device, please double-check that your <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#For_Linux.3A_configure_the_udev_rule_for_your_phone">udev rules</a> are correct). If you do not see a <code>flash.sh</code> file, simply rename <code>flash.bat</code> to <code>flash.sh</code> first and then use the above command.</li> + </ul> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you get a "permission denied" error when running the above commands, your shell script probably doesn't have the right permissions. Running <code>chmod +x flash.sh</code> on it should solve this problem.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: If the flash script gets stuck at "< waiting for device >" while the display shows "ThunderSoft(R)", the script doesn't have permission to access the device while in fastboot mode. You need to setup the <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#For_Linux.3A_configure_the_udev_rule_for_your_phone">udev rules</a> to give it access. Also USB 3 ports may not work well with fastboot and can be the cause of this problem.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You are also welcome to build your own builds to install on the Flame: see <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>.</p> +</div> + +<h4 id="Font_fix">Font fix</h4> + +<div class="warning"> +<p><strong>Important</strong>: This step is only needed for base image v180.</p> +</div> + +<p>After updating Gecko and Gaia to nightly with the v180 base image, there will be a mismatch between the fonts that Gecko and Gaia expects and what the base image provides (this has been fixed as of v188). To fix this, you have two choices:</p> + +<ul> + <li>download our <a href="https://people.mozilla.org/~mwu/fira-font-update.zip">font update package</a>, extract it, navigate into the directory created by extracting, and run the supplied <code>flash.sh</code> script.</li> + <li>use the <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/update_system_fonts.sh"><code>update_system_fonts.sh</code></a> script, which will download and flash the system fonts automatically.</li> +</ul> + +<h3 id="Updating_your_Flame_to_a_nightly_build"><a name="Updating_to_nightly_build" id="Updating_to_nightly_build">Updating your Flame to a nightly build</a></h3> + +<div class="note"> +<p><strong>Note</strong>: For the current build, Nightly development builds of Firefox OS do not support A-GPS, which may lead to slow performance of GPS functionality. We plan to resolve this in an updated future Nightly channel.</p> +</div> + +<div class="warning"> +<p><strong>Important</strong>: When running a shallow or full flash, your phone data will be overwritten: you should therefore back up your data before updating! See the {{anch("Backing up and restoring your Flame data")}} section for more details.</p> +</div> + +<ol> + <li>Before updating your phone to a Nightly build you should flash the latest base image to make sure the underlying systems are up to date. Download a <a href="#Base Image">base image</a> <u>with the same or a higher version of Firefox OS than the version you intend to use in step 3 below</u> and use it to update your device's software, as explained above.</li> + <li>Because the above step installs a fresh operating system on your device, you'll need to enable remote debugging on your Flame again, using the <em>Remote debugging </em>option in the device's <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a>.</li> + <li>Next, choose a build to install (found on <a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/">https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/</a>). You'll want one of the following: + <ul style="margin-left: 40px;"> + <li>Production builds (including locales) + <ul> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk/">Latest master builds</a> (currently 2.6)</li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g44_v2_5-flame-kk/">Latest v2.5 builds</a></li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g37_v2_2-flame-kk/">2.2 build</a></li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/2015/07/2015-07-24-00-12-07-mozilla-b2g34_v2_1-flame-kk/">2.1 build</a></li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/2015/07/2015-07-23-00-02-07-mozilla-b2g32_v2_0-flame-kk/">2.0 build</a></li> + </ul> + </li> + <li>Engineering builds (with test apps and only pseudo-locales) + <ul> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk-eng/">Latest master builds</a> (currently 2.6)</li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g44_v2_5-flame-kk-eng/">Latest v2.5 builds</a></li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g37_v2_2-flame-kk-eng/">2.2 build</a></li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/2015/07/2015-07-24-00-12-07-mozilla-b2g34_v2_1-flame-kk-eng/">2.1 build</a></li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/2015/07/2015-07-22-16-02-01-mozilla-b2g32_v2_0-flame-kk-eng/">2.0 build</a></li> + </ul> + </li> + </ul> + </li> + <li>Pick a version and download both the <code>b2g-XX.XX.en-US.android-arm.tar.gz</code> and <code>gaia.zip</code> files. Save them inside a directory on your Desktop called something like <code>fxos</code>.</li> + <li>Download the <a href="https://raw.githubusercontent.com/Mozilla-TWQA/B2G-flash-tool/master/shallow_flash.sh">shallow flash script</a> and save it in the same directory as the above two files.</li> + <li><strong>For Windows users:</strong> Also download the <a href="https://raw.githubusercontent.com/Mozilla-TWQA/B2G-flash-tool/master/shallow_flash.bat">shallow_flash.bat</a> windows script and install <a href="https://cygwin.com">Cygwin</a>, which provides a Linux-like command environment on Windows. You will need to install the default Cygwin <em>base</em> category plus the <em>unzip</em> package but shallow_flash.bat will do this for you if you download and copy the Cygwin setup*.exe to the same folder as the script.</li> + <li> + <p>In your Terminal, <code>cd</code> into the directory you saved the files in and Flash the builds to your phone using the following:</p> + + <p><strong>Linux</strong>:</p> + + <pre class="brush: bash">./shallow_flash.sh --gaia=gaia.zip --gecko=b2g-XX.XX.en-US.android-arm.tar.gz +</pre> + + <p><strong>Mac</strong>:</p> + + <pre class="brush: bash">./shallow_flash.sh --gaia gaia.zip --gecko b2g-XX.XX.en-US.android-arm.tar.gz</pre> + + <p><strong>Windows</strong>:</p> + + <p>Double click <code>shallow_flash.bat</code> (with the cogs icon) or run it from a command shell. It will flash <code>gaia.zip</code> and a single <code>b2g-XX.XX.en-US.android-arm.tar.gz</code> file.</p> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If your update fails with an error "Flashing out/target/product/flame/system.img failed because the image was too large.", you will need to update to the newest {{anch("Base Image","base image")}}, then try applying the nightly build again. This is because the system partition size has been updated (see {{Bug("1184980")}}.)</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: If you get a "permission denied" error when running the above commands, your shell script probably doesn't have the right permissions. Running <code>chmod +x shallow_flash.sh</code> on it should solve this problem.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: A "shallow flash" updates <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> and <a href="/en-US/Firefox_OS/Platform/Gaia">Gaia</a> plus data directories, as opposed to a full flash, which updates Gecko/Gaia, but also the underlying <a href="/en-US/Firefox_OS/Platform/Gonk">Gonk</a> layer and associated binaries particular to that device type. This is why it is a good idea to update to the official <a href="#Base Image">base image</a> first, as suggested above, then shallow flash over the top of that, once you've got the Gonk/binary layer right.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You can check the update status of each build on <a href="https://wiki.mozilla.org/B2G/QA/Flame_OTA">the Flame OTA status page</a>.</p> +</div> + +<p>Once the install procedure finishes the phone should reboot into the updated build and display the first time user workflow.</p> + +<h4 id="Switch_to_nightly_update_channel">Switch to nightly update channel</h4> + +<p>In v2.2 you can change the <strong>Update channel</strong> from <code>default</code> to <code>nightly</code> under <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Update_channel">Developer settings</a>.</p> + +<p>Below is the older method, if you don't find that setting in your device.</p> + +<ol> + <li>Make sure remote debugging is enabled on your Flame, using the <em>Remote debugging/Debugging via USB</em> option in the device's <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a>.</li> + <li>Download the <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/change_channel.sh">change channel</a> script: follow the link, press the <em>Raw</em> button, then use your browser's save functionality to save the page directly as <code>change_channel.sh</code>.</li> + <li>In your Terminal, <code>cd</code> into the directory you saved the script in and change the update channel on your phone using the following command:<br> + + <pre class="brush: bash">./change_channel.sh -v nightly</pre> + </li> + <li>Once the phone reboots, check for updates by going into <em>Settings > Device information > Check now.</em></li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: This step isn't needed in newer versions of the Firefox OS software — you should just get OTA updates automatically.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> You can choose between several different update channels. Run "<code>./change_channel.sh -h</code>" to see the other channel options.</p> +</div> + +<h3 id="Fastboot_mode">Fastboot mode</h3> + +<p>If flashing a new build to your phone fails to work, your phone may become unresponsive, leading to the phone rebooting in recovery mode. The recovery mode provides few options (<em>Reboot</em>, <em>Update from adb</em>, <em>Wipe data</em>, <em>Wipe cache</em>, and <em>Update from sdcard</em>). Unfortunately, selecting <em>Update from adb</em> triggers a sideload mode in which you cannot use the other adb commands. The <code>adb sideload</code> command would work but the various flash scripts rely on other adb commands.</p> + +<p>You can force fastboot mode as follows:</p> + +<ol> + <li>Power off the phone (which may involve removing the battery in extreme cases...).</li> + <li>Plug in the USB cable.</li> + <li>Power the phone up again by pressing the Volume Down and Power buttons together.</li> +</ol> + +<p>The phone should now display the text "FASTBOOT": it is in fastboot mode and is waiting for a USB connection. At this point, a USB-connected, computer with adb installed should see the phone listed when the <code>fastboot devices</code> command is run. Note that regular adb would not see the device — only fastboot sees it. In this mode, you can use the flash script to install the last <a href="#Base Image">base image</a> as explained above. As the script does use both adb and fastboot commands, you may see some initial error and warnings from adb, but the device should be flashed properly at the end of the procedure.</p> + +<h3 id="Emergency_download_mode">Emergency download mode</h3> + +<p>If flashing a new build to your phone fails to work, your phone becomes unresponsive, and the phone cannot enter fastboot mode, you can use emergency mode for recovery. You'll need the provided emergency USB cable with the “Recovery Cable” red label on it and the <a href="http://cds.w5v8t3u9.hwcdn.net/Flame_Rescure_Tool_(updated_with_tutorial).zip">Emergency Download Tool</a> to enter this mode. For full instructions, see the Flame emergency rescue tool tutorial included in the download tool's files. Contact the device maker (flameservice [at] thundersoft.com) if you need any more technical support.</p> + +<p><img src="https://mdn.mozillademos.org/files/9787/EmergencyDownloadTool.jpg" style="height: 363px; width: 497px;" alt="Emergency download tool dialog box as it is when it start."></p> + +<div class="note"> +<p><strong>Note</strong>: The tool provided is Windows-only.</p> +</div> + +<h3 id="Recovery_mode">Recovery mode</h3> + +<p>You can enter recovery mode to clear your phone data or manually update the firmware. There are two ways to enter this mode:</p> + +<ul> + <li>If <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> tools are available, make sure Remote debugging is turned on in the phone's <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Remote_debugging">Developer settings</a>, connect your phone to your computer via USB and enter <code>adb reboot recovery</code> on the command line.</li> + <li>If your phone is powered off, press the Volume Up + Power buttons together.</li> +</ul> + +<p>When in recovery mode, press the Volume up/down keys to move the selection highlight, and the Power key to select. Make sure you have your phone data (Contacts, SMS, etc.) backed up before clearing data, and your upgrade packages downloaded before updating.</p> + +<h2 id="Backing_up_and_restoring_your_Flame_data">Backing up and restoring your Flame data</h2> + +<p>When using a Flame, you won't want to lose your phone's contacts and other data while upgrading to a new build (as explained earlier in this article). To backup and restore data you can use our Backup and restore profile tool, which is contained in the <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool">B2G-flash-tool Git repo</a>.</p> + +<ol> + <li>To use this, first open up your terminal/command line.</li> + <li>Clone the above repo (you'll need <a href="http://www.git-scm.com/downloads">Git installed</a>) using + <pre class="brush: bash">git clone https://github.com/Mozilla-TWQA/B2G-flash-tool</pre> + </li> + <li>The tool is a Python file: <code>backup_restore_profile.py</code>. Make sure you have <a href="https://www.python.org/downloads/">Python installed</a> (2.7.x is probably best.) Linux and Mac systems should have this out of the box.</li> + <li>Enter the directory you just cloned using <code>cd B2G-flash-tool</code>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: When using this tool, you'll also need to make sure that your phone is connected via USB to your computer, and that ADB (see {{anch("Important steps to follow first")}} above) and Debugging via USB (in your device's <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a>) are enabled.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: If you get a message complaining about lack of permissions to execute this file, <code>cd</code> into the directory where you saved the file, and run the following command:</p> + +<pre class="brush: bash">chmod +x backup_restore_profile.py</pre> +</div> + +<h3 id="Backing_up_data_from_your_phone">Backing up data from your phone</h3> + +<p>Before backing up you should make sure your device is updated with the most recent OTA update. To do this, on your phone go to <em>Settings app > Device Information > Check for updates > click Check Now</em>. If there is an update available, you should shortly get a notification of an available update. Choose to install the update.</p> + +<p>Now, in the directory where you saved the <code>backup_restore_profile.py</code> file, run the following:</p> + +<pre class="brush: bash">python backup_restore_profile.py -b</pre> + +<p>This should save your device profile to a directory called <code>mozilla-profile</code>, in the same directory as the script is located.</p> + +<div class="warning"> +<p>Warning: by default, it does not save the internal sd card content. So files like photos or videos from the gallery app will not be saved. If you want to backup the sd card content, add the --sdcard option</p> + +<pre class="brush: bash">python backup_restore_profile.py -b --sdcard</pre> +</div> + +<h3 id="Restoring_data_to_your_phone">Restoring data to your phone</h3> + +<p>Before restoring you should again make sure your device is updated with the most recent OTA update. Go to <em>Settings app > Device Information > Check for updates > click Check Now</em>. If there is an update available, you should shortly get a notification of an available update. Choose to install the update.</p> + +<p>In the directory where your <code>mozilla-profile</code> directory is located (see above section), run the following:</p> + +<pre class="brush: bash">python backup_restore_profile.py -r</pre> + +<div class="note"> +<p><strong>Note</strong>: You can get a list of all the options the tool supports by running <code>python backup_restore_profile.py -h</code>.</p> +</div> + +<h2 id="Pushing_apps_to_your_Flame">Pushing apps to your Flame</h2> + +<p>The <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a> and <a href="/en-US/docs/Tools/WebIDE">WebIDE</a> tools make it easy to push apps to your phone, for testing, etc.</p> + +<h2 id="RAM_adjustment">RAM adjustment</h2> + +<p>You can adjust the available RAM capacity to see how apps perform on Firefox OS phones with lower memory footprints.</p> + +<p>This is accomplished by entering fastboot mode (install fastboot first, which is available on the same SDK page as <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a>) and typing:</p> + +<pre class="brush: bash">adb reboot bootloader +fastboot oem mem [0|256-1024]</pre> + +<p>“0” is the memory automatically detected and “256-1024” is the number of megabytes. For example, if you want to adjust device RAM capacity to 512M, enter <code>fastboot oem mem 512</code>.</p> + +<p>You'll need to then reboot your device for the settings to take effect. This can be done using:</p> + +<pre class="brush: bash">fastboot reboot</pre> + +<p>The current memory size can be returned by entering fastboot mode and typing:</p> + +<pre class="brush: bash">fastboot getvar mem +</pre> diff --git a/files/id/archive/b2g_os/phone_guide/index.html b/files/id/archive/b2g_os/phone_guide/index.html new file mode 100644 index 0000000000..bbfc5ecee3 --- /dev/null +++ b/files/id/archive/b2g_os/phone_guide/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox OS phone guide +slug: Archive/B2G_OS/Phone_guide +tags: + - Firefox OS + - Landing + - NeedsTranslation + - Phones + - TopicStub +translation_of: Archive/B2G_OS/Phone_guide +--- +<div class="summary"> +<p><span class="seoSummary">This section contains developer information relevant to specific phones that run Firefox OS — both developer and consumer devices.</span> We have general information available on <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS" title="Building and installing Firefox OS">Building and installing Firefox OS</a> and <a href="/en-US/Firefox_OS/Developing_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS">Hacking Firefox OS</a>, so please go there for information about building and installing the platform from scratch. Developers with specific phones in their possession may however find the following articles useful.</p> +</div> + +<h2 id="Developer_phone_information">Developer phone information</h2> + +<p>The phones listed here are specifically geared towards developers wanting to experiment with Firefox OS, including developing apps and contributing to the operating system itself. As such, they typically have unlocked SIMs, system files, etc.</p> + +<dl> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Flame">Flame</a></dt> + <dd>The Flame device is the official reference device for developing, testing, and debugging Firefox OS and open web apps, produced in partnership with T<sup>2</sup>Mobile.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Geeksphone">Geeksphone</a></dt> + <dd>In this article we cover some basic tips on how to keep your Geeksphone up-to-date and how to tweak the system Gaia applications.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Nexus_5">Nexus 5</a></dt> + <dd>This article provides information about using Firefox OS on a Nexus 5, including Flashing Firefox OS onto your device.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Nexus_4">Nexus 4</a></dt> + <dd>This article provides information about using Firefox OS on a Nexus 4, including Flashing Firefox OS onto your device.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/ZTE_OPEN">ZTE OPEN</a></dt> + <dd>This article contains information on the ZTE OPEN Firefox OS device.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/ZTE_OPEN_C">ZTE OPEN C</a></dt> + <dd>The ZTE Open C is an updated ZTE-produced Firefox OS device, with higher end hardware and newer software.</dd> +</dl> + +<h2 id="Consumer_phone_information">Consumer phone information</h2> + +<p>The phones listed here are consumer models, so not ideal for developers wanting to hack on devices. However, might be still useful for developers looking for more technical information on these consumer models. For a more complete list of devices, see our <a href="https://www.mozilla.org/en-US/firefox/os/devices/">Find Firefox OS near you</a> page.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_One_Touch_Fire">Alcatel One Touch Fire</a></dt> + <dd>Based on Firefox OS 1.3 and available in more than 5 countries.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Alcatel_One_Touch_Pixi_3_%283.5%29">Alcatel One Touch Pixi 3 (3.5)</a></dt> + <dd><span>High-end consumer smartphone, powered by Firefox OS 2.0, with a 2 megapixel camera.</span></dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Alcatel_Onetouch_Fire_C_4020D">Alcatel Onetouch Fire 2C 4020D</a></dt> + <dd>Based on Tarako Firefox OS (1.3T) and released in India.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_One_Touch_Fire_C">Alcatel Onetouch Fire C</a></dt> + <dd>Based on Tarako Firefox OS (1.3T) and released in India.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_One_Touch_Fire_E">Alcatel Onetouch Fire E</a></dt> + <dd>Available in 5 countries.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Cherry_Mobile_Ace">Cherry Mobile Ace</a></dt> + <dd>Based on Firefox OS 1.3T and available in the Philippines.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Fx0">Fx0</a></dt> + <dd>First Firefox OS phone released in Japan, by KDDI.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Huawei_Y300_II">Huawei Y300 II</a></dt> + <dd>Based on Firefox OS 1.1 and available in the Philippines and Mexico.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Intex_Cloud_FX">Intex Cloud FX</a></dt> + <dd>First Firefox OS Tarako phone released in India and based on Firefox OS 1.3T.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/LG_fireweb">LG Fireweb</a></dt> + <dd>Based on Firefox OS 1.1 and available in Uruguay and Brasil.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Spice_Fire_One_MI_FX1">Spice Firefox MI FX1</a></dt> + <dd>Based on Tarako Firefox OS (1.3T) and released in India.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Spice_Fire_One_MI_FX2">Spice Firefox MI FX2</a></dt> + <dd><span>High-end consumer 3G smartphone powered by FirefoxOS 1.4 with a 2 megapixel camera, released in India.</span></dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Symphony_GoFox_F15">Symphony GoFox F15</a></dt> + <dd>First Firefox OS Device to come with 3G video calling capability, launched in Bangladesh.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Zen_U105_Fire">Zen U105 Fire</a></dt> + <dd>Based on Firefox OS Tarako, available in India.</dd> + <dt style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/ZTE_Open_II">ZTE Open II</a></dt> + <dd style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">Has a</span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">1.2 GHz dual core </span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">processor and a </span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">2.0 MP </span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">Rear Camera</span>, available in 7 countries.</dd> + <dt style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"><a href="/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Orange_Klif">Orange Klif</a></dt> + <dd style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"><span>The Orange Klif is a 3G Smartphone, powered by Firefox OS 2.0, with a 2 megapixel camera. It is available in a number of African countries.</span></dd> +</dl> + +<h2 id="General_Firefox_OS_information">General Firefox OS information</h2> + +<dl> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Phone_specs">Firefox OS phone data</a></dt> + <dd>In this article we list the various available Firefox OS phones along with information such as their code names, availability, and specific hardware features.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Firefox_OS_device_features">General device features</a></dt> + <dd>This page lists typical Firefox OS hardware features and minimum hardware requirements.</dd> + <dt><a href="/en-US/Firefox_OS/Troubleshooting">Troubleshooting</a></dt> + <dd>This article provides tips for resolving common problems you may have while using Firefox OS.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Best_practices_open_reference_devices">Best practices for open reference devices</a></dt> + <dd>A set of best practices that we believe should come highly recommended for any widely available open reference devices. All of the recent Firefox OS reference devices have followed these practices.</dd> +</dl> diff --git a/files/id/archive/b2g_os/platform/index.html b/files/id/archive/b2g_os/platform/index.html new file mode 100644 index 0000000000..ec17b4cd1d --- /dev/null +++ b/files/id/archive/b2g_os/platform/index.html @@ -0,0 +1,82 @@ +--- +title: The Firefox OS platform +slug: Archive/B2G_OS/Platform +translation_of: Archive/B2G_OS/Platform +--- +<div class="summary"> + <p><span class="seoSummary">The Firefox OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on Firefox OS, if you're working on developing or porting the platform — or are simply curious — the following documentation may be of interest to you.</span></p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation about the Firefox OS platform</h2> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture">Firefox OS architecture overview</a></dt> + <dd> + An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture">Firefox OS apps architecture</a></dt> + <dd> + An overview of the application model on Firefox OS.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a></dt> + <dd> + Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a></dt> + <dd> + Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a></dt> + <dd> + Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security" title="/en-US/docs/Mozilla/Firefox_OS/Security"> Security</a></dt> + <dd> + Documentation about security in Firefox OS; this includes topics about security devices from every perspective: for app developers, device integrators, and so forth.</dd> + <dt> + <a href="/en-US/Firefox_OS/Debugging/Out_of_memory_management_on_Firefox_OS">Out of memory management on Firefox OS</a></dt> + <dd> + This article explains how low memory situations are managed on Firefox OS, using the low memory killer and low memory notifications.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart">Feature support chart</a></dt> + <dd> + A chart of which features are available in which types of Firefox OS builds.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Settings_list" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Settings_list">Firefox OS settings list</a></dt> + <dd> + A list of common setting names that can be used with the <a href="/en-US/docs/WebAPI/Settings" title="/en-US/docs/WebAPI/Settings">Settings</a> API.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> + <p>If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!</p> + <ul> + <li>Consult the Boot to Gecko project forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}</li> + </ul> + <ul> + <li>Ask your question on Mozilla's Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + <br> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2> + <ul> + <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li> + <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li> + <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + </ul> + <h2 class="Tools" id="Resources">Resources</h2> + <ul> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html b/files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html new file mode 100644 index 0000000000..ecc95018a2 --- /dev/null +++ b/files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html @@ -0,0 +1,210 @@ +--- +title: Aplikasi Pertama Kamu +slug: Archive/B2G_OS/Quickstart/aplikasi_pertama_kamu +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +<article class="brush: js"> + <div class="summary"> + <p>Aplikasi Open web memberikan kemudahan kepada Pengembang web persis seperti apa yang mereka inginkan selama ini: lingkungan cross-platform yang didedikasikan untuk aplikasi yang diinstal dan dibuat hanya dengan menggunakan HTML, CSS, dan JavaScript saja - dengan Firefox OS sebagai yang pertama yang mendedikasikan platform Aplikasi Open web ini. Panduan ini bertujuan untuk membuat Anda belajar dan membangun aplikasi, dengan petunjuk arsitektur dasar dan petunjuk membangun Aplikasi sehingga Anda dapat membuat aplikasi besar berikutnya!</p> + </div> + <p>Jika Anda tidak ingin mengikuti panduan ini, Anda dapat men-download template aplikasi <a href="https://github.com/chrisdavidmills/mdn-app-template">quick start </a>kami. Cari tahu lebih banyak tentang apa ini, dengan membaca panduan <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template">Template aplikasi</a> kami.</p> + <h2 id="Struktur_Aplikasi">Struktur Aplikasi</h2> + <h3 id="Paket_vs._Aplikasi_yang_dihost">Paket vs. Aplikasi yang dihost</h3> + <p>Ada dua jenis aplikasi Open web yaitu: dikemas dan dihosting.</p> + <ul> + <li>Aplikasi dikemas dasarnya berformat file zip yang berisi semua aset aplikasi: HTML, CSS, JavaScript, gambar, manifest, dll.</li> + <li>Aplikasi Hosted dijalankan dari server di domain yang diberikan, seperti situs web standar.</li> + </ul> + <p>Kedua jenis aplikasi ini memerlukan file manifest yang valid. Ketika tiba saatnya Anda ingin untuk mendaftarkan aplikasi Anda di Firefox Marketplace, Anda akan meng-upload aplikasi Anda sebagai file .zip atau memberikan URL di mana aplikasi anda dihosting.</p> + <div style="width: 480px; margin: 0 auto;"> + <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/Q7x-B13y33Q/?feature=player_detailpage" width="480"></iframe></p> + <div class="video-caption"> + <p><span class="long_text short_text" id="result_box" lang="id"><span class="hps">Dibuat</span> <span class="hps">dalam kemitraan dengan</span> <span class="hps">Treehouse</span><span>:</span></span> <a class="button" href="http://teamtreehouse.com/?cid=1154"><span class="long_text short_text" id="result_box" lang="id"><span class="hps">Periksa mereka</span><span>!</span></span></a></p> + </div> + </div> + <p>Untuk tujuan panduan ini, Anda akan membuat aplikasi host yang akan tinggal di alamat localhost Anda. Setelah aplikasi Anda sudah siap untuk daftar di Firefox Marketplace, Anda dapat membuat keputusan untuk bundel sebagai aplikasi dikemas atau meluncurkannya sebagai aplikasi host.</p> + <h3 id="Manifests_Aplikasi">Manifests Aplikasi</h3> + <p>Every Firefox app requires a manifest.webapp file at the app root. The <a href="/en-US/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a> file provides important information about the app, such as version, name, description, icon location, locale strings, domains the app can be installed from, and much more. Only the name and description are required. The simple manifest included within the app template is similar to the following:</p> + <pre class="brush: js">{ + "version": "0.1", + "name": "Open Web App", + "description": "Your new awesome Open Web App", + "launch_path": "/app-template/index.html", + "icons": { + "16": "/app-template/app-icons/icon-16.png", + "48": "/app-template/app-icons/icon-48.png", + "128": "/app-template/app-icons/icon-128.png" + }, + "developer": { + "name": "Your Name", + "url": "http://yourawesomeapp.com" + }, + "locales": { + "es": { + "description": "Su nueva aplicación impresionante Open Web", + "developer": { + "url": "http://yourawesomeapp.com" + } + }, + "it": { + "description": "La tua nuova fantastica Open Web App", + "developer": { + "url": "http://yourawesomeapp.com" + } + } + }, + "default_locale": "en" +}</pre> + <div style="width: 480px; margin: 0 auto;"> + <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/dgAUgHQOm8M#t/?feature=player_detailpage" width="480"></iframe></p> + <div class="video-caption"> + <p>Made in partnership with Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p> + </div> + </div> + <p> </p> + <p>A basic manifest is all you need to get started. For more details about manifests, read <a href="/en-US/docs/Web/Apps/Manifest">App Manifest</a>.</p> + <h2 id="App_Layout_Design">App Layout & Design</h2> + <p>Responsive design has become increasingly important as more screen resolutions become standard on different devices. Even if the main target of your app is mobile platforms such as Firefox OS, other devices will likely have access to it as well. <a href="//developer.mozilla.org/docs/CSS/Media_queries">CSS media queries</a> allow you to adapt layout to device, as shown in this skeleton CSS example:</p> + <pre class="brush: css">/* The following are examples of different CSS media queries */ + +/* Basic desktop/screen width sniff */ +@media only screen and (min-width : 1224px) { + /* styles */ +} + +/* Traditional iPhone width */ +@media + only screen and (-webkit-min-device-pixel-ratio : 1.5), + only screen and (min-device-pixel-ratio : 1.5) { + /* styles */ +} + +/* Device settings at different orientations */ +@media screen and (orientation:portrait) { + /* styles */ +} +@media screen and (orientation:landscape) { + /* styles */ +}</pre> + <p>There are many JavaScript and CSS frameworks available to aid in responsive design and mobile app development (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, etc.) Choose the framework(s) that best fit your app and development style.</p> + <h2 id="Web_APIs">Web APIs</h2> + <p>JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page. JavaScript feature detection is still the best practice, as shown in the following example:</p> + <pre class="brush: js">// If this device supports the vibrate API... +if('vibrate' in navigator) { + // ... vibrate for a second + navigator.vibrate(1000); +}</pre> + <p>In the following example, the display style of a <code><div></code> is modified based on changes in the battery state of the device:</p> + <pre class="brush: java">// Create the battery indicator listeners +(function() { + var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery, + indicator, indicatorPercentage; + + if(battery) { + indicator = document.getElementById('indicator'), + indicatorPercentage = document.getElementById('indicator-percentage'); + + // Set listeners for changes + battery.addEventListener('chargingchange', updateBattery); + battery.addEventListener('levelchange', updateBattery); + + // Update immediately + updateBattery(); + } + + function updateBattery() { + // Update percentage width and text + var level = (battery.level * 100) + '%'; + indicatorPercentage.style.width = level; + indicatorPercentage.innerHTML = 'Battery: ' + level; + // Update charging status + indicator.className = battery.charging ? 'charging' : ''; + } +})();</pre> + <p>In the code sample above, once you confirm that the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery">Battery API</a> is supported, you can add event listeners for <code>chargingchange</code> and <code>levelchange</code> to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.</p> + <p>Check the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page frequently to keep up to date with device API statuses.</p> + <h3 id="Install_API_functionality">Install API functionality</h3> + <p>In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:</p> + <pre class="brush: html"><button id="install-btn">Install app</button></pre> + <p>This button's functionality is implemented using the Install API (see install.js):</p> + <pre class="brush: js">var manifest_url = location.href + 'manifest.webapp'; + +function install(ev) { + ev.preventDefault(); + // define the manifest URL + // install the app + var installLocFind = navigator.mozApps.install(manifest_url); + installLocFind.onsuccess = function(data) { + // App is installed, do something + }; + installLocFind.onerror = function() { + // App wasn't installed, info is in + // installapp.error.name + alert(installLocFind.error.name); + }; +}; + +// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button. +var button = document.getElementById('install-btn'); + +var installCheck = navigator.mozApps.checkInstalled(manifest_url); + +installCheck.onsuccess = function() { + if(installCheck.result) { + button.style.display = "none"; + } else { + button.addEventListener('click', install, false); + }; +}; +</pre> + <p>Let's run through briefly what is going on:</p> + <ol> + <li>We get a reference to the install button and store it in the variable <code>button</code>.</li> + <li>We use <code>navigator.mozApps.checkInstalled</code> to check whether the app defined by the manifest at <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> is already installed on the device. This test is stored in the variable <code>installCheck</code>.</li> + <li>When the test is successfully carried out, its success event is fired, therefore <code>installCheck.onsuccess = function() { ... }</code> is run.</li> + <li>We then test for the existence of <code>installCheck.result</code> using an <code>if</code> statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.</li> + <li>If the app isn't installed, we add a click event listener to the button, so the <code>install()</code> function is run when the button is clicked.</li> + <li>When the button is clicked and the <code>install()</code> function is run, we store the manifest file location in a variable called <code>manifest_url</code>, and then install the app using <code>navigator.mozApps.install(manifest_url)</code>, storing a reference to that installation in the <code>installLocFind</code> variable. You'll notice that this installation also fires success and error events, so you can run actions dependent on whether the install happened successfully or not.</li> + </ol> + <p>You may want to verify the <a href="/en-US/docs/Web/Apps/JavaScript_API">implementation state of the API</a> when first coming to Installable web apps.</p> + <div class="note"> + <p>Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allows you to install installable web apps on the desktop. See <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs about apps manifests</a> for more information on origins.</p> + </div> + <h2 id="WebRT_APIs_(Permissions-based_APIs)">WebRT APIs (Permissions-based APIs)</h2> + <p>There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the <code>manifest.webapp</code> file like so:</p> + <pre class="brush: js">// New key in the manifest: "permissions" +// Request access to any number of APIs +// Here we request permissions to the systemXHR API +"permissions": { + "systemXHR": {} +}</pre> + <p>The three levels of permission are as follows:</p> + <ul> + <li>Normal — APIs that don't need any kind of special access permissions.</li> + <li>Privileged — APIs available to developers to use in their applications, as long as they set access permissions in the app manifest files, and distribute them through a trusted source.</li> + <li>Certified — APIs that control critical functions on a device, such as the call dialer and messaging services. These are generally not available for third party developers to use.</li> + </ul> + <p>For more information on app permission levels, read <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">Types of packaged apps</a>. You can find out more information about what APIs require permissions, and what permissions are required, at <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a>.</p> + <div class="note"> + <p>It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.</p> + </div> + <h2 id="Tools_Testing">Tools & Testing</h2> + <p>Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.</p> + <h3 id="Firefox_OS_Simulator">Firefox OS Simulator</h3> + <p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.</p> + <h3 id="App_Manager">App Manager</h3> + <p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p> + <h3 id="Unit_Testing">Unit Testing</h3> + <p>Unit tests are extremely valuable when testing on different devices and builds. jQuery's <a href="http://qunitjs.com">QUnit</a> is a popular client-side testing utility, but you can use any set of testing tools you'd like.</p> + <h3 id="Installing_Firefox_OS_on_a_Device">Installing Firefox OS on a Device</h3> + <p>Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a>.</p> + <p>Dedicated Firefox OS developer preview devices are also available: read our <a href="https://marketplace.firefox.com/developers/dev_phone">Developer preview phone page</a> for more information.</p> + <h2 id="App_Submission_and_Distribution">App Submission and Distribution</h2> + <p>Once your app is complete, you can host it yourself like a standard web site or app (read <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">Self-publishing apps</a> for more information), or it can be <a href="https://marketplace.firefox.com/developers/submit/app/manifest">submitted</a> to the <a href="https://marketplace.firefox.com">Firefox Marketplace</a>. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.</p> + <h3 id="More_Marketplace_Listing_Information">More Marketplace & Listing Information</h3> + <ol> + <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an App to the Firefox OS Marketplace </a></li> + <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Review Criteria </a></li> + <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false">App Submission Video Walkthrough </a></li> + </ol> +</article> diff --git a/files/id/archive/b2g_os/quickstart/index.html b/files/id/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..ebe1f7c220 --- /dev/null +++ b/files/id/archive/b2g_os/quickstart/index.html @@ -0,0 +1,49 @@ +--- +title: Build +slug: Archive/B2G_OS/Quickstart +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +<div class="summary"> + <p>Quickstart information on coding open web apps.</p> +</div> +<dl> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></dt> + <dd> + What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></dt> + <dd> + This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></dt> + <dd> + An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduction to manifests</a></dt> + <dd> + An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></dt> + <dd> + If you're a web developer, how do open web apps differ from what you're used to? This article explains all.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></dt> + <dd> + If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></dt> + <dd> + This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></dt> + <dd> + How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></dt> + <dd> + Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.</dd> +</dl> diff --git a/files/id/archive/b2g_os/simulator/index.html b/files/id/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..6bc32a3c38 --- /dev/null +++ b/files/id/archive/b2g_os/simulator/index.html @@ -0,0 +1,120 @@ +--- +title: Firefox OS Simulator +slug: Archive/B2G_OS/Simulator +translation_of: Archive/B2G_OS/Simulator +--- +<div class="note"> +<p><span class="notranslate">Halaman ini menjelaskan Firefox OS Simulator untuk pengembang menargetkan Firefox OS 1.2 atau yang lebih baru.</span> <span class="notranslate"> Jika Anda sedang mengembangkan aplikasi untuk Firefox OS 1.1, maka Anda harus memeriksa dokumentasi untuk <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator&usg=ALkJrhjLGmEfIFMgZfT5XpZ_Sly2k5a4QQ">Firefox OS 1.1 Simulator</a> gantinya.</span></p> +</div> + +<p><span class="notranslate"><span style="line-height: 1.5;">Firefox OS Simulator adalah versi dari lapisan yang lebih tinggi dari Firefox OS yang mensimulasikan perangkat Firefox OS, tapi berjalan pada desktop.</span></span> <span class="notranslate"> <span style="line-height: 1.5;">Ini berarti bahwa dalam banyak kasus, Anda tidak perlu perangkat nyata untuk menguji dan men-debug aplikasi Anda. Ini berjalan di jendela ukuran yang sama sebagai perangkat Firefox OS, termasuk antarmuka pengguna Firefox OS dan built-in aplikasi, dan mensimulasikan banyak dari Firefox OS perangkat API.</span></span></p> + +<p> </p> + +<p><span class="notranslate"><span style="line-height: 1.5;">Simulator ini dikemas dan didistribusikan sebagai Firefox add-on.</span></span> <span class="notranslate"> <span style="line-height: 1.5;">Setelah Anda download dan diinstal di Firefox, Anda dapat menjalankannya, mendorong aplikasi untuk itu, dan melampirkan alat pengembang untuk itu menggunakan <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager&usg=ALkJrhhiU_VHfZmBfFqWM876lmojeCcK0Q">App Manajer</a> alat atau <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/docs/Tools/WebIDE&usg=ALkJrhg95QnRVJFRYvYWSZqZ7xKohU0MDw">WebIDE.</a></span></span></p> + +<h2 id="Instalasi"><span class="notranslate"><span style="line-height: 1.5;">Instalasi</span></span></h2> + +<p><span class="notranslate"><span style="line-height: 1.5;">Untuk menginstal simulator, menggunakan <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/docs/Tools/WebIDE/Setting_up_runtimes&usg=ALkJrhgPJxcVX3YxJ-BpvTbvIveBUD_nSQ#Adding_a_Simulator">WebIDE ini Mengelola penambahan Komponen panel</a> (tersedia sebagai bagian dari Firefox 34 dan seterusnya).</span></span> <span class="notranslate"> <span style="line-height: 1.5;">Beberapa versi yang tersedia, dan Anda disarankan untuk menginstal mereka semua, untuk fleksibilitas maksimum.</span></span></p> + +<div class="note"> +<p><span class="notranslate"><span style="line-height: 1.5;">Dimulai dengan Firefox 43, tentang: halaman addons mungkin menampilkan peringatan tentang addon Anda menjadi unsigned.</span></span> <span class="notranslate"> <span style="line-height: 1.5;">Simulator yang benar ditandatangani pada waktu menginstal, namun mereka kemudian dimodifikasi sehingga muncul "rusak".</span></span> <span class="notranslate"> <span style="line-height: 1.5;">Mereka akan terus berjalan dengan sukses meskipun pesan peringatan ini.</span></span> <span class="notranslate"> <span style="line-height: 1.5;">Rinciannya di <a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://bugzilla.mozilla.org/show_bug.cgi%3Fid%3D1197262&usg=ALkJrhh8Nr70Eiyi7fTUlTWRBzBuY4UIvg" title="Simulator harus berhenti mengubah isinya">bug 1.197.262.</a></span></span></p> +</div> + +<p><span class="notranslate">Untuk memulai Simulator, Anda memilih dari daftar runtime WebIDE ini.</span> <span class="notranslate"> Untuk lebih jelasnya, lihat <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/docs/Tools/WebIDE/Setting_up_runtimes&usg=ALkJrhgPJxcVX3YxJ-BpvTbvIveBUD_nSQ#Selecting_a_runtime" style="font-size: 14px; font-weight: normal; line-height: 1.5;">petunjuk pada dokumentasi WebIDE.</a></span> <span class="notranslate"> Setelah menjalankan Simulator, Anda dapat mendorong aplikasi untuk itu dan debug mereka menggunakan WebIDE, seperti yang Anda bisa dengan perangkat nyata.</span></p> + +<p><span class="notranslate">Jika Anda menggunakan <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/Firefox_OS/Using_the_App_Manager&usg=ALkJrhilhaVxZ6vwknqLTSb4902e4mkm7w">Manajer App</a> (alat tua tersedia sebelum WebIDE), Anda dapat menginstal simulator melalui tombol berikut:</span></p> + +<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; color: white; text-align: center; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.298039) 0px -1px 0px 0px inset;">Install Simulator</a></p> + +<h2 id="Simulator_UI" style="line-height: 30px;"><span class="notranslate">Simulator UI</span></h2> + +<p><span class="notranslate"><span style="line-height: 22.00800132751465px;">Simulator muncul sebagai jendela terpisah, berukuran sehingga area layar simulasi adalah 320x480 piksel. Untuk mensimulasikan peristiwa sentuhan Anda dapat mengklik tombol mouse dan tarik sambil memegang tombol ke bawah.</span></span> <span class="notranslate"> <span style="line-height: 22.00800132751465px;">Jadi dengan mengklik dan menyeret kanan-ke-kiri dari Home Screen, Anda akan melihat aplikasi built-in, serta setiap aplikasi yang telah ditambahkan:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7173/simulator-1.2.png" style="display: block; height: 623px; margin: 0px auto; width: 810px;"></p> + +<p><span class="notranslate">Simulator ini memiliki dua tombol di toolbar di bagian bawah:</span></p> + +<ul> + <li><span class="notranslate">tombol di sebelah kiri membawa Anda ke layar Home, atau switch Simulator off jika Anda terus ke bawah</span></li> + <li><span class="notranslate">tombol di sebelah kanan switch Simulator antara potret dan orientasi landscape.</span> <span class="notranslate"> Ini akan menghasilkan <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation&usg=ALkJrhia-icPKIA4rWz0jVVStupylXzb-w#Listening_orientation_change" title="/ en-US / docs / WebAPI / Detecting_device_orientation">orientationchange</a> acara.</span></li> +</ul> + +<h2 id="Emulasi_kartu_SD"><span class="notranslate">Emulasi kartu SD</span></h2> + +<p><span class="notranslate">Dalam Simulator kartu SD perangkat dipetakan ke "fake-sdcard" direktori di profil Simulator ini, yang itu sendiri terletak di dalam "ekstensi" direktori di bawah profil Firefox yang Simulator diinstal.</span> <span class="notranslate"> Sebagai contoh:</span></p> + +<pre>/path/to/Firefox/Profiles/Firefox-profile-name/extensions/fxos_2_2_simulator@mozilla.org/profile/fake-sdcard</pre> + +<p><span class="notranslate">File membaca atau menulis menggunakan <code><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getDeviceStorage&usg=ALkJrhgI8i4x7Pb6fpAI6dNl1Xnbktkcjw">getDeviceStorage</a></code> API akan muncul di sini.</span></p> + +<p><span class="notranslate">Sebelum versi 2.2 dari Simulator, Anda harus menciptakan "palsu-sdcard" direktori secara manual untuk bekerja.</span> <span class="notranslate"> Dari 2,2 dan seterusnya, "palsu-sdcard" direktori dibuat untuk Anda secara otomatis.</span></p> + +<p><span class="notranslate">Juga dari versi 2.2 dan seterusnya, jika Anda menjalankan Simulator dari baris perintah Anda dapat menentukan direktori yang berbeda dengan melewati <code>--storage-path</code> option.</span></p> + +<p>.</p> + +<div class="note"><span class="notranslate"><strong>Catatan:</strong> ini sebagian besar dimaksudkan untuk pengujian API.</span> <span class="notranslate"> Musik akan dibaca tidak dari "palsu-sdcard" direktori, tapi dari sistem anda <code>~/Music</code> gambar dari <code>~/Pictures</code> video dari <code>~/Videos</code></span> <span class="notranslate"> Download pergi ke <code>~/Downloads</code></span> <span class="notranslate"> user-dirs.dirs redefinitions didukung.</span></div> + +<h2 id="Keterbatasan_Simulator"><span class="notranslate">Keterbatasan Simulator</span></h2> + +<p><span class="notranslate">Perhatikan bahwa Firefox OS Simulator bukan simulasi sempurna.</span></p> + +<h3 id="Keterbatasan_hardware"><span class="notranslate">Keterbatasan hardware</span></h3> + +<p><span class="notranslate">Terlepas dari ukuran layar, Simulator tidak mensimulasikan keterbatasan perangkat keras dari perangkat Firefox OS seperti memori yang tersedia atau kecepatan CPU.</span></p> + +<h3 id="Codec_audio_video"><span class="notranslate">Codec audio / video</span></h3> + +<p><span class="notranslate">Codec berikut tergantung pada decoding hardware-accelerated dan karena itu belum didukung:</span></p> + +<ul> + <li><span class="notranslate">MP3</span></li> + <li><span class="notranslate">AAC</span></li> + <li><span class="notranslate">H.264 (MP4)</span></li> + <li><span class="notranslate">WebM</span></li> +</ul> + +<p><span class="notranslate">Ini berarti tidak mungkin untuk menggunakan Simulator untuk pemutaran video tes di aplikasi dan di website seperti Youtube yang mengandalkan codec ini.</span></p> + +<h3 id="API_yang_tidak_didukung"><span class="notranslate"><a name="Unsupported-APIs">API yang tidak didukung</a></span></h3> + +<p><span class="notranslate">API tertentu yang bekerja pada perangkat tidak akan bekerja pada Simulator, umumnya karena hardware pendukung tidak tersedia pada desktop.</span> <span class="notranslate"> Kami telah menerapkan simulasi untuk beberapa API seperti geolocation, dan berharap untuk menambahkan lebih banyak dalam rilis mendatang.</span> <span class="notranslate"> Namun, saat ini API tidak didukung.</span> <span class="notranslate"> Menggunakan mereka mungkin melemparkan kesalahan atau hanya mengembalikan hasil yang salah:</span></p> + +<ul> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/WebAPI/WebTelephony&usg=ALkJrhh_j20hjW62I2PCym0uEk6ZDkC5Xg" title="/ en-US / WebAPI / WebTelephony">Telephony</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/WebSMS&usg=ALkJrhh0fNSSadvAgfRc9m70E6kKQZJGEw" title="/ en-US / docs / WebAPI / WebSMS">WebSMS</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/WebBluetooth&usg=ALkJrhjXZD0gnn2DdWRATWs9oCF_kPonGA" title="/ en-US / docs / WebAPI / WebBluetooth">WebBluetooth</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/Using_Light_Events&usg=ALkJrhjOPaB1T9SgcUHrHvlW1t4OQMDxNg" title="/ en-US / docs / WebAPI / Using_Light_Events">Ambient Light</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/Proximity&usg=ALkJrhi2L5Fy4geflJxjlU_qpL01_j7Cnw" title="/ en-US / docs / WebAPI / Proximity">Kedekatan</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/Network_Information&usg=ALkJrhhGKVIjQCodDQ084RRO-Ae72XkRqw" title="/ en-US / docs / WebAPI / Network_Information">Jaringan Informasi</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/Online_and_offline_events&usg=ALkJrhjP-JiIr8ZtxgMe3IkezGhTVaZM-w" title="/ en-US / docs / Online_and_offline_events">navigator.onLine dan acara offline</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/Vibration&usg=ALkJrhh_8iOJaMHxPBtgnmqCyAoSLAJfzg" title="/ en-US / docs / WebAPI / Getaran">Getaran</a></span></li> +</ul> + +<p> </p> + +<h2 id="Mendapatkan_bantuan"><span class="notranslate">Mendapatkan bantuan</span></h2> + +<p><span class="notranslate"><span style="line-height: 1.5;">Jika Anda memiliki pertanyaan, mencoba meminta kami pada</span> <a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://lists.mozilla.org/listinfo/dev-developer-tools&usg=ALkJrhhBFGFa27xpIxOaSVb4c839Bbe4gQ" style="line-height: 1.5;">daftar dev-pengembang-alat mailing</a> <span style="line-height: 1.5;">atau</span> <a href="irc://irc.mozilla.org/#devtools" style="line-height: 1.5;">#devtools pada <span style="line-height: 1.5;">irc.mozilla.org.</span></a></span></p> + +<h3 id="Cara_mengaktifkan_verbose_logging"><a name="Simulator-verbose-logging"></a> <span class="notranslate"> Cara mengaktifkan verbose logging</span></h3> + +<p><span class="notranslate">Anda dapat melihat pesan login dari aplikasi Anda di <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/Tools/Web_Console&usg=ALkJrhiZzzNSS8b4UW2tadz4NXa5XpKhBw">Web Console,</a> yang dapat Anda melampirkan ke aplikasi Anda menggunakan <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/docs/Tools/WebIDE/Troubleshooting&usg=ALkJrhhlei8rYKFPh9dfWSZTe603GWFmKA">WebIDE.</a></span> <span class="notranslate"> Jika Anda ingin menangkap pesan awal terjadi selama startup aplikasi, sebelum konsol akan terhubung dan bekerja, Anda dapat mengaktifkan verbose logging di Simulator.</span></p> + +<p><span class="notranslate">Kunjungi about: config <strong>dan</strong> menciptakan preferensi baru.</span> <span class="notranslate"> Nama preferensi yang berbeda untuk setiap versi Simulator:</span></p> + +<ul> + <li>extensions.fxos_1_3_simulator@mozilla.org.sdk.console.logLevel untuk Firefox OS 1.3</li> + <li>extensions.fxos_1_2_simulator@mozilla.org.sdk.console.logLevel untuk Firefox OS 1.2</li> +</ul> + +<p><span class="notranslate">Set ke nilai string "semua", dan menonaktifkan, kemudian mengaktifkan kembali, add-on di Add-on manajer.</span> <span class="notranslate"> Sekarang pesan tambahan tentang operasi Simulator akan muncul di <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/Tools/Browser_Console&usg=ALkJrhi-YOakQ7mjFwTBMJ03WnwFGnM_TQ">Browser Console.</a></span></p> + +<h2 id="Membangun_Simulator"><span class="notranslate">Membangun Simulator</span></h2> + +<p><span class="notranslate">Jika Anda ingin menguji patch ke Gecko atau Gaia kode yang Simulator mengandung, Anda mungkin tertarik dalam <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/Firefox_OS/Running_custom_builds_in_the_App_Manager&usg=ALkJrhjAsJ_jEMen5cjEL52j67pWM6pJ9A">memodifikasi simulator</a> untuk menggunakan kustom Gecko membangun atau profil Gaia.</span> <span class="notranslate"> Atau, Anda dapat <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/Firefox_OS/Building_the_Firefox_OS_simulator&usg=ALkJrhgT9AvDL9qx7tKDFir9gbYZUI1kOA">membangun Simulator baru</a> dari checkout Gecko Anda.</span></p> + +<h2 id="Alternatif"><span class="notranslate">Alternatif</span></h2> + +<p><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia&usg=ALkJrhgLVoOC-gJPhHeon-XAPX5KUhI3zg">Berbagai cara untuk menjalankan Gaia</a> - termasuk daftar <em>mereka</em> dalam rangka kemudahan untuk menjalankan <em>dan</em> ketertiban kedekatan <em>membalikkan</em> untuk produk dikirim (sesuai dengan itu, Firefox OS Simulator paling mudah tapi terjauh.</span></p> diff --git a/files/id/archive/b2g_os/using_the_app_manager/index.html b/files/id/archive/b2g_os/using_the_app_manager/index.html new file mode 100644 index 0000000000..39a43a9762 --- /dev/null +++ b/files/id/archive/b2g_os/using_the_app_manager/index.html @@ -0,0 +1,233 @@ +--- +title: Using the App Manager +slug: Archive/B2G_OS/Using_the_App_Manager +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +<div class="summary"> +<p>The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.</p> +</div> + +<p>{{EmbedYouTube("z1Bxg1UJVf0")}}</p> + +<p>The App Manager is composed of:</p> + +<ul> + <li>An <a href="#Apps_panel"><em>Apps panel</em></a>, which manages local apps (app source code located on your computer) and apps hosted externally, allowing you to package and install them on your device or simulator, and debug them using Toolboxes</li> + <li>A <a href="#Device_panel"><em>Device panel</em></a>, which displays information about the connected device including Firefox OS version installed, permissions required for using device APIs on the device, and apps installed</li> + <li><a href="/en-US/docs/Tools_Toolbox"><em>Toolboxes</em></a>, which are are sets of developer tools (web console, inspector, debugger, etc.) that can be connected to a running app via the Apps panel to perform debugging operations</li> +</ul> + +<h2 id="Quick_setup"><a name="Configuring_device">Quick setup:</a></h2> + +<p>This section is designed to get you up and running as soon as possible; if you need some more detail please skip forward to the {{ anch("Device and system configuration") }} section and start reading from there. Also see the {{ anch("Troubleshooting") }} section for help if you are having trouble.</p> + +<ol> + <li>Make sure you have Firefox Desktop 26+ installed</li> + <li>Open the App Manager (in the URL bar, type <code>about:app-manager</code>)</li> + <li>If you don't have a real device: + <ol> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the Firefox OS Simulator</a></li> + <li>In App Manager's bottom toolbar, click on <em>Start Simulator</em>, then click on the name of the installed simulator, which should appear there.</li> + </ol> + </li> + <li>If you have a real device: + <ol> + <li>Make sure your device is running Firefox OS 1.2+</li> + <li>In the Settings of your device, disable Screen Lock (<code>Settings > <code>Screen Lock</code></code>) and enable Remote Debugging (<code>Settings > Device information > More information > Developer</code>)</li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper</a> add-on in Firefox Desktop</li> + <li>Connect your device to your machine via a USB cable</li> + <li>You should see the name of your device in the App Manager's bottom bar. Click on it.</li> + </ol> + </li> + <li>The bottom bar should show "Connected to: xxx"</li> + <li>Click on the <em>Apps</em> panel and add an app (packaged or hosted)</li> + <li>The <em>Refresh</em> button validates your app and installs it on the Simulator/Device</li> + <li>The <em>Debug</em> button connects the developer tools to the running app</li> +</ol> + +<h2 id="Device_and_system_configuration">Device and system configuration</h2> + +<p>The first thing you'll need to do when using the App Manager is make sure your system and phone are set up correctly. This section will run thrugh all the steps required.</p> + +<h3 id="Firefox_1.2_required">Firefox 1.2+ required</h3> + +<p>Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check which version of Firefox OS the device is runing, go to <code>Settings > Device Information > Software</code>.</p> + +<p>If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.</p> + +<p>Builds available:</p> + +<ul> + <li><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak builds</a> (to find out more about using these, read <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>)</li> + <li>More to follow</li> +</ul> + +<p>To build your own Firefox OS 1.2+ distribution, follow the instructions located at <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>, starting with <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p> + +<h3 id="Remote_debugging">Remote debugging</h3> + +<p>Next, you need to enable remote debugging in Firefox OS. To do so, go to <code>Settings > Device information > More information > Developer</code> and check the Remote Debugging checkbox.</p> + +<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB or ADB helper</h3> + +<p>The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:</p> + +<ul> + <li> + <p>Let Firefox handle ADB (recommended). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper add-on</a>, which makes the process easier. With this installed, there's no need to install the ADB, and no need to type the <code>adb forward</code> command: everything is handled by the add-on.</p> + <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" title="https://addons.mozilla.org">Download ADB Helper Add-on</a></li> + <li>Use ADB manually. You need to have it installed on your computer - download and install <code>adb</code> (see the <a href="http://developer.android.com/sdk/index.html">Get the Android SDK</a>) as part of the Android SDK package. You'll need to enable port forwarding by entering the following command into your terminal: + <pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + Note that you'll need to do this every time the phone is restarted or unplugged then re-plugged.</li> +</ul> + +<div class="note"> +<p>Note: There's no need to run this command if you installed the ADB Helper Add-on.</p> +</div> + +<h2 id="Connecting_your_device_to_the_App_Manager">Connecting your device to the App Manager</h2> + +<p>With all your configuration done, it's now time to plug your device into your computer and start the App Manager:</p> + +<ol> + <li>Plug the device into your computer via USB.</li> + <li>Disable Screen lock on your device by going to <code>Settings > Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li>Start the App Manager — In Firefox Desktop select the <code>Tools > Web Developer > App Manager</code> menu option, or type <code>about:app-manager</code> in the URL bar.</li> + <li>At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.</li> + <li>If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="width: 600px; height: 30px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>Note that the other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.</p> +</div> + +<h2 id="Using_a_Firefox_OS_Simulator_Add-on"><a name="Simulator">Using a Firefox OS Simulator Add-on</a></h2> + +<p>If you haven't got a real device available to use with App Manager, you can still try it out using a <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> Add-on. To start off, install the appropriate simulator for your operating system:</p> + +<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Install Simulator</a></p> + +<div class="note"> +<p>Note that currently there is only a Firefox OS 1.2 simulator available, although more may appear in the future.</p> +</div> + +<p>Once you've installed the simulator, you need to go to the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. Three buttons will appear:</p> + +<ul> + <li>"Firefox OS 1.2" ... etc (or something similar): the leftmost button contains the name of the simulator version you have installed. Click it to start the connection to the simulator.</li> + <li>"Add": the middle button navigates to the simulator install links in this article, so you can add more Simulators (Firefox OS 1.2, Firefox OS 1.3, ...).</li> + <li>"Cancel": the right hand button cancels the connection.</li> +</ul> + +<h2 id="Apps_panel_2"><a name="Apps_panel">Apps panel</a></h2> + +<p>Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps Panel. From here, you can import an existing app to push onto your device and debug:</p> + +<ul> + <li>To install a local app, click on the plus next to the "Add Packaged App" label and use the resulting file chooser dialog to select the directory your app is contained inside.</li> + <li>To install an externally hosted app, enter the absolute URL of the app's manifest file into the text field inside the "Add Hosted App" box, then press the plus button.</li> +</ul> + +<p>Information about your app should appear on the right hand side of the window, as seen below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>Clicking on <em>"Update"</em> will update (install) the app on the device. Clicking on <em>"debug"</em> will connect a toolbox to the app, allowing you to debug its code directly:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.</p> +</div> + +<p>If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.</p> + +<h2 id="Device_panel_2"><a name="Device_panel">Device panel</a></h2> + +<p>The <em>Device</em> tab displays information about the connected device. From the <em>"</em>Installed Apps<em>"</em> window, apps on the device can be started and debugged.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>Note: Certified Apps are not listed by default. <a href="#Debugging_Certified_Apps">See how to debug certified apps</a>.</p> +</div> + +<p>The "Permissions" window shows the required priviledges for different <a href="/en-US/docs/WebAPI">Web APIs</a> on the current device:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.</p> + +<h2 id="Debugging_Certified_Apps_2"><a name="Debugging_Certified_Apps">Debugging Certified Apps</a></h2> + +<p>Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref <code>devtools.debugger.forbid-certified-apps</code> to <code>false</code> in your profile. To do this, follow the steps below:</p> + +<ol> + <li> + <p>On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:</p> + + <pre class="brush: bash">adb shell</pre> + + <p>Your prompt should change to <code>root@android</code>.</p> + </li> + <li> + <p>Next, stop B2G running using the following command:</p> + + <pre class="brush: bash">stop b2g</pre> + </li> + <li> + <p>Navigate to the following directory:</p> + + <pre>cd /data/b2g/mozilla/*.default/</pre> + </li> + <li> + <p>Here, update the prefs.js file with the following line:</p> + + <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js</pre> + </li> + <li> + <p>After you've finished editing and saving the file, start B2G again using the following command:</p> + + <pre class="brush: bash">start b2g</pre> + </li> + <li> + <p>Exit the android filesystem using the <code>exit</code> command; this will return you to your normal terminal prompt.</p> + </li> + <li> + <p>Next, reconnect to the App Manager and you should see certified apps appear for debugging.</p> + </li> +</ol> + +<div class="note"> +<p>Note: If you want to add this preference to your Gaia build you can run <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p> +</div> + +<h2 id="Troubleshooting_2"><a name="Troubleshooting">Troubleshooting</a></h2> + +<p id="My_device_is_not_recognized">If the device is not recognized:</p> + +<ul> + <li>Read the <a href="#Configuring_device">Device and system configuration</a> section thoroughly, and make sure all the steps are followed:</li> + <li>Is your device running at least Firefox OS 1.2?</li> + <li>Did you enable "Remote Debugging" in the settings of your phone?</li> + <li>If you are not using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a>: + <ul> + <li>Did you successfully run the <code>adb forward</code> command?</li> + </ul> + </li> + <li>If you are using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> and your device is not listed in the bottom toolbar: + <ul> + <li>If you use Linux, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to setup udev correctly</a></li> + <li>If you use Windows, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to install the appropriate drivers</a></li> + </ul> + </li> + <li>Is your phone screen unlocked?</li> +</ul> + +<p>Can't connect your device to the App Manager or start the simulator? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Let us know</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g_1_1_hd=---&cf_status_b2g_1_2=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox26=---&cf_status_firefox27=---&cf_status_firefox_esr17=---&cf_status_firefox_esr24=---&cf_tracking_b2g18=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox26=---&cf_tracking_firefox27=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_esr24=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Developer%20Tools%3A%20App%20Manager&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-803=X&flag_type-809=X&flag_type-825=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Firefox&qa_contact=developer.tools%40firefox.bugs&rep_platform=x86&requestee_type-203=&requestee_type-41=&requestee_type-5=&requestee_type-607=&requestee_type-748=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=&status_whiteboard=&target_milestone=---&version=Trunk">file a bug</a>.</p> diff --git a/files/id/archive/css3/index.html b/files/id/archive/css3/index.html new file mode 100644 index 0000000000..0c5eae08d5 --- /dev/null +++ b/files/id/archive/css3/index.html @@ -0,0 +1,972 @@ +--- +title: CSS3 +slug: Archive/CSS3 +translation_of: Archive/CSS3 +--- +<p><span class="seoSummary"><strong>CSS3 merupakan perubahan terakhir</strong> dari bahasa <em>Cascading Style Sheets </em>dan bertujuan untuk perpanjangan dari CSS2.1. Menghadirkan banyak catatan yang lama dinantikan, seperti di seputar lingkaran sudut, bayangan, <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients" title="Using CSS gradients">gradients</a>, <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="CSS transitions">transitions</a> or <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations" title="CSS animations">animations</a>, sama halnya pada layout baru <a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="Using CSS multi-column layouts">multi-columns</a> (beberapa kolom), <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">flexible box</a> (kemudahan tampilan) atau grid layouts.</span> Bagian bagian pengalaman vendor-prefixed (penyedia-memperbaharui) dan kemungkinan yang lainnya dihilangkan dalam lingkungan pembuatan, atau digunakan dengan berlebihan menyebabkan keduanya syntax (penulisan) and semantics (bentuk penulisan) dapat berubah kemudian.</p> + +<h2 id="Modul_and_Proses_Standarisasi">Modul and Proses Standarisasi</h2> + +<p>CSS Tingkat 2 diperlukan 9 tahun, dari Agustus 2002 sampai Juni 2011 yang kaya status rekomendasi. Ini merupakan tindakan nyata bahwa featur bagian kedua kembali didasarkan pada spesifikasi yang menyeluruh. Dalam melengkapi percepatan featur standarisasi tanpa gangguan, the <a class="external" href="http://www.w3.org/blog/CSS/" title="http://www.w3.org/blog/CSS/">CSS Working Group</a> of the W3C (Pekerjaan Group CSS W3C), dalam sebuah bagian mereferensi pada <a class="external" href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules" title="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules">Beijing doctrine</a>, CSS dibagi dalam komponen komponen lebih kecil disebut <em>modules</em> . Masing masing modul sekarang ini merupakan sebuah bagian yang berdiri sendiri dari bahasa dan bergerak pada standarisasi percepatannya sendiri. Selagi beberapa modul telah menjadi rekomendasi W3C, yang lainnya masih merupakan bagian yang baru dalam rancangan atau draft pekerjaan. Modul modul baru juga ditambahkan ketika dibutuhkan pengidentifikasin baru.</p> + +<p><a href="/@api/deki/files/6120/=CSS_Modules_and_Snapshots.png" title="CSS_Modules_and_Snapshots.png"><img alt="CSS Modules and Snapshots as defined since CSS3" class="internal lwrap" src="/files/3623/CSS_Modules_and_Snapshots.png" style="float: left; width: 550px;"> </a> Secara bentukan, tidak ada uraian standar CSS. Masing masing modul dijadikan standar secara independen. Standar CSS terdiri dari CSS2.1 perubahan and diperpanjang dengan modul yang lengkap. Seluruhnya tidak diperlukan pada angka yang sama. Di tiap tiap titik waktu, sebuah snapshot (tampilan) dari standar CSS dapat digambarkan, daftar CSS2.1 dan modul saat ini.</p> + +<p>Konsorsium W3C secara priode dipublikasikan yang menampilkan, seperti dalam tahun <a class="external" href="http://www.w3.org/TR/css-beijing/" title="http://www.w3.org/TR/css-beijing/">2007</a> atau <a class="external" href="http://www.w3.org/TR/css-2010/" title="http://www.w3.org/TR/css-2010/">2010.</a></p> + +<p>Meski hari ini tanpa modul dengan tingkat yang lebih tinggi dari standarisasi CSS3, ini dapat berubah ke depannya. Beberapa modul, seperti Selectors 4 or CSS Borders and Backgrounds Level 4 telah mempunyai sebuah rancangan atau draft editor, meski mereka belum diperkaya dengan publikasi awal status Draft atau Rancangan Pekerjaan.</p> + +<h2 id="Status_Modul_CSS" style="">Status Modul CSS</h2> + +<h3 id="Stabilitas_Modul">Stabilitas Modul</h3> + +<p>Sedikitnya modul CSS telah stabil secara bersamaan dan telah kaya dari satu atau tiga tingkatan rekomensasi dari CSSWG: Rekomendasi Kandidat, Proposal Rekomendasi atau Rekomendasi. Ini dapat digunakan tanpa sebelum perbaikan dan merupakan kestabilan yang baik, meski sedikitnya featur dapat dihilangkan pada Tingkat Kandidat Rekomendasi.</p> + +<p>Perpanjangan modul modul ini dan perubahan CSS2.1 spesifikasi yang mana membangun inti dari spesifikasi. Bersamaan dengan itu, mereka adalah tampilan sekarang dari spesifikasi CSS.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="thirdColumn greenBg"><strong>{{ SpecName("CSS3 Colors", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Colors") }} since June 7th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds the {{ cssxref("opacity") }} property, and the <code>hsl</code><code>()</code>, <code>hsla()</code>, <code>rgba()</code> and <code>rgb()</code> functions to create {{cssxref("<color>")}} values. It also defines the <code>currentColor</code> keyword as a valid color.</p> + + <p>The <code>transparent</code> color is now a real color (thanks to the support for the alpha channel) and is a now an alias for <code>rgba(0,0,0,0.0)</code> .</p> + + <p>It deprecates the <a href="http://www.w3.org/TR/CSS2/ui.html#system-colors">system-color keywords that shouldn't be used in a production environment anymore</a>.</p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Selectors") }} since September 29th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>Substring matching attribute selectors, <code>E[attribute^="value"]</code>, <code>E[attribute$="value"]</code>, <code>E[attribute*="value"]</code> .</li> + <li>New pseudo-classes: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.</li> + <li>Pseudo-elements are now characterized by two colons rather than one: <code>:after</code> becomes {{ cssxref("::after") }}, <code>:before</code> becomes {{ cssxref("::before") }}, <code>:first-letter</code> becomes {{ cssxref("::first-letter") }}, and <code>:first-line</code> becomes {{ cssxref("::first-line") }}.</li> + <li>The new <em>general sibling combinator</em> ( <code>h1~pre</code> ).</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a class="external" href="http://dev.w3.org/csswg/selectors4/" title="http://dev.w3.org/csswg/selectors4/">next iteration of the Selectors specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Namespaces", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds the support for the XML Namespaces by defining the notion of <em>CSS qualified name</em>, using the ' <code>|</code> ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.</p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Media Queries", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends the former media type ( <code>print</code>, <code>screen</code>, <code>…</code> ) to a full language allowing <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">queries on the device media capabilities</a> like <code>only screen and (color)</code> .</p> + + <p>Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the {{ htmlattrxref("media","link") }} attribute of the {{ HTMLElement("link") }} element.</p> + </td> + </tr> + </tbody> +</table> + +<p>The <a href="http://dev.w3.org/csswg/mediaqueries4" title="http://dev.w3.org/csswg/mediaqueries4">next iteration of this specification</a> is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like <code>hover</code> or <code>pointer</code>. Detection of EcmaScript support, using the <code>script</code> media features is also proposed.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Style", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Style") }} since November 7th, 2013</td> + </tr> + <tr> + <td colspan="2">Formally defines the syntax of the content of the HTML <a href="/en/HTML/Global_attributes#attr-style" title="en/HTML/Global_attributes#attr-style"> <code>style</code> </a> global attribute.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Backgrounds", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Backgrounds") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>Support, on backgrounds, for any type of {{cssxref("<image>")}}, and not only for <code>uri()</code> defined ones.</li> + <li>Support for multiple background images.</li> + <li>The {{ cssxref("background-repeat") }} <code>space</code> and <code>round</code> values, and for the 2-value syntax of this CSS property.</li> + <li>The {{ cssxref("background-attachment") }} <code>local</code> value.</li> + <li>The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.</li> + <li>Support for curved border corners, with the CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, and {{ cssxref("border-bottom-right-radius") }} properties.</li> + <li>Support for the use of an {{cssxref("<image>")}} as the border with the CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} properties.</li> + <li>Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a class="external" href="http://dev.w3.org/csswg/css4-background/" title="http://dev.w3.org/csswg/css4-background/">CSS4 iteration of the Backgrounds and Borders specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, and {{ cssxref("border-clip-left") }} properties) or to control the shape of the border in a corner (using the CSS {{ cssxref("border-corner-shape") }} property).</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Multicol", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Multicol") }}</td> + </tr> + <tr> + <td colspan="2">Adds support for easy multi-column layouts using the CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Speech", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Speech") }}</td> + </tr> + <tr> + <td colspan="2">Defines the <code>speech</code> media type, an aural formatting model and numerous properties specific for speech-rendering user agents.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Images", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Images") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Defines the {{cssxref("<image>")}} data type.</p> + + <p>Extends the <code>url()</code> syntax to support image slices using media fragments.</p> + + <p>Adds:</p> + + <ul> + <li>The <code>dppx</code> unit to the {{cssxref("<resolution>")}} data type.</li> + <li>The <code>image()</code> function as a more flexible alternative to <code>url()</code> to define an image from an url.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the <code>image()</code> function may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Support for <code>linear-gradient()</code>, <code>repeating-linear-gradient()</code>, <code>radial-gradient()</code> and <code>repeating-radial-gradient()</code>.</li> + <li>The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a href="#Images_(Level_4)">CSS Image Values and Replaced Content Level 4</a> which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Values", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Values") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Makes <code>initial</code> and <code>inherit</code> keywords usable on any CSS property.</p> + + <p>Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.</p> + + <p>Adds:</p> + + <ul> + <li>Definition for new font-relative length units: <code>rem</code> and <code>ch</code> .</li> + <li>Definition for viewport-relative length units: <code>vw</code>, <code>vh</code>, <code>vmax</code>, and <code>vmin</code> .</li> + <li>Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the <em>reference pixel</em> .</li> + <li>Definition for {{ cssxref("<angle>") }}, {{cssxref("<time>")}}, {{cssxref("<frequency>")}}, {{cssxref("<resolution>")}}.</li> + <li>Normative value to the definition of {{cssxref("<color>")}}, {{cssxref("<image>")}}, and {{ cssxref("<position>") }}.</li> + <li>Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and <code>toggle()</code> functional notations.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>calc()</code>, <code>attr()</code>, and <code>toggle()</code> functional notations may be postponed to </em> <em>the next iteration of this module</em><em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>Several types definition, like <code><ident></code> and <code><custom-ident></code>, have been deferred to CSS Values and Units Module Level 4.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Flexbox", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Flexbox") }}</td> + </tr> + <tr> + <td colspan="2">Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Conditional", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Conditional") }}</td> + </tr> + <tr> + <td colspan="2">Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of a new CSS at-rule, {{ cssxref("@supports") }}, and a new DOM method {{domxref("CSS.supports()")}}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Text Decoration", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Text Decoration") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.</li> + <li>Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.</li> + </ul> + + <p>Clarifies:</p> + + <ul> + <li>The paint order of the decorations.</li> + </ul> + + <p><em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>text-decoration-skip</code>, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to </em> <em>the next iteration of this module</em><em>.</em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Fonts", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Fonts") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.</p> + + <p>Adds:</p> + + <ul> + <li>Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.</li> + <li>The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.</li> + <li>The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.</li> + <li>The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.</li> + <li>The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.</li> + <li>The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-feature-values") }} at-rule.</li> + <li>The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Cascade", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Cascade") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>The <code>initial</code>, <code>unset</code> values for properties.</li> + <li>The CSS {{ cssxref("all") }} property.</li> + <li>The scoping mechanism.</li> + </ul> + + <p>Clarifies:</p> + + <ul> + <li>Interaction of media-dependent @import statements and style sheet loading requirements.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Writing Modes", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Writing Modes") }}</td> + </tr> + <tr> + <td colspan="2">Defines the writing modes of both horizontal and vertical scripts and clarifies how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Shapes", "", "") }}</strong></td> + <td>{{ Spec2("CSS Shapes") }}</td> + </tr> + <tr> + <td colspan="2">Defines geometric shapes, which can be applied to floats. These shapes describe areas, around which inline content wraps instead of wrapping around the bounding box.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Masks", "", "") }}</strong></td> + <td>{{ Spec2("CSS Masks") }}</td> + </tr> + <tr> + <td colspan="2">Defines a way for partially or fully hiding portions of visual elements. It describes how to use another graphical element or image as a luminance or alpha mask.</td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_refining_phase">Modules in the refining phase</h3> + +<p>Specifications that are deemed to be in the <em>refining phase</em> are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Web Animations", "", "") }}</strong></td> + <td>{{ Spec2("Web Animations") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Counter Styles", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Counter Styles") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td> + <td>{{ Spec2("Compositing") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Syntax", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Syntax") }}</td> + </tr> + <tr> + <td colspan="2">Clarifies how charsets are determined; minor changes in parsing and tokenization algorithms.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS Will Change", "", "") }}</strong></td> + <td>{{ Spec2("CSS Will Change") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transitions", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Transitions") }}</td> + </tr> + <tr> + <td colspan="2">Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Animations", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Animations") }}</td> + </tr> + <tr> + <td colspan="2">Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transforms", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Transforms") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: <code>matrix</code><code>()</code>, <code>translate()</code>, <code>translateX()</code>, <code>translateY()</code>, <code>scale()</code>, <code>scaleX()</code>, <code>scaleY()</code>, <code>rotate()</code>, <code>skewX()</code>, and <code>skewY()</code>.</li> + <li>the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: <code>matrix</code> <code>3d()</code>, <code>translate3d()</code>, <code>translateZ()</code>, <code>scale3d()</code>, <code>scaleZ()</code>, <code>rotate3d()</code>, <code>rotateX</code><code>()</code>, <code>rotateY</code><code>()</code>, <code>rotateZ()</code>, and <code>perspective()</code>.</li> + </ul> + + <p><em><strong>Note:</strong> this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms. </em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Fragmentation", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Fragmentation") }}</td> + </tr> + <tr> + <td colspan="2">Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling. + <p>Adds:</p> + + <ul> + <li>Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Text", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Text") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the CSS {{ cssxref("text-transform") }} property with the value <code>full-width</code>.</li> + <li>the CSS {{ cssxref("text-align") }} property with the value <code>start</code>, <code>end</code>, <code>start end</code>, and <code>match-parent</code> for a better support of documents with multiple directionalities of text.</li> + <li>the CSS {{ cssxref("text-align") }} property with a {{cssxref("<string>")}} value to align on that character. This is useful to align number on the decimal point.</li> + <li>the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.</li> + <li>Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.</li> + <li>Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.</li> + <li>Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>A few features present in early CSS Text Level 3 draft have being <a class="external" href="http://dev.w3.org/csswg/css3-text/#recent-changes" title="http://dev.w3.org/csswg/css3-text/#recent-changes">postponed to the next iteration of this module</a> .</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Variables", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Variables") }}</td> + </tr> + <tr> + <td colspan="2">Defines a mechanism allowing to define variables in CSS.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td> + <td>{{ Spec2("Compositing") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_revising_phase">Modules in the revising phase</h3> + +<p>Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Basic UI", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Basic UI") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.<br> + <strong><em>At risk:</em> </strong> <em> due to insufficient browser support, standardization of the <code>padding</code><code>-box</code> value may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new <code>icon</code> value of the CSS {{ cssxref("content") }} property.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the <code>icon</code> value may be postponed to CSS4. </em></li> + <li>Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.</li> + <li>Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.</li> + <li>Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.<br> + <em><strong>At risk:</strong> due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("<string>")}} values may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to define the hotspot of a cursor as well as the new <code>none</code>, <code>context-menu</code>, <code>cell</code>, <code>vertical-text</code>, <code>alias</code>, <code>copy</code>, <code>no-drop</code>, <code>not-allowed</code>, <code>nesw-</code><code>resize</code>, <code>nwse-</code><code>resize</code>, <code>col-resize</code>, <code>row-resize</code>, <code>all-scroll</code>, <code>zoom-in</code>, <code>zoom-out</code>, extending the {{ cssxref("cursor") }} property.</li> + <li>The ability to specify the sequential navigation order (that is the <em>tabbing order</em> ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the navigation properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>An early list of what could be in the next iteration of the CSS Basic User Interface Module is <a class="external" href="http://wiki.csswg.org/spec/css4-ui" title="http://wiki.csswg.org/spec/css4-ui">available</a>.</p> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Grid", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Grid") }}</td> + </tr> + <tr> + <td colspan="2">Add a grid layout to the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" title=""><code>display</code></a> property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Box Alignment", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Box Alignment") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Paged Media", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Paged Media") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSSOM View", "", "") }}</strong></td> + <td>{{ Spec2("CSSOM View") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS4 Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Selectors") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_exploring_phase">Modules in the exploring phase</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Images", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Images") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the <code>image()</code> functional notation to describe the directionality of the image (<code>rtl</code> or <code>ltr</code>), allowing for bidi-sensitive images.</li> + <li>the {{ cssxref("image-orientation") }} property by adding the keyword <code>from-image</code>, allowing to follow EXIF data stored into images to be considered.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>the <code>image-set()</code> functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.</li> + <li>the <code>element()</code> functional notation allowing the use of part of the page as image.</li> + <li>the <code>cross-fade()</code> functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.</li> + <li>the <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> functional notation describing a new type of gradient.</li> + <li>the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Device") }}</td> + </tr> + <tr> + <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 GCPM", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 GCPM") }}</td> + </tr> + <tr> + <td colspan="2">Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Exclusions", "", "") }}</strong></td> + <td>{{ Spec2("CSS Exclusions") }}</td> + </tr> + <tr> + <td colspan="2">Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Lists", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Lists") }}</td> + </tr> + <tr> + <td colspan="2">Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Regions", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Regions") }}</td> + </tr> + <tr> + <td colspan="2">Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Device") }}</td> + </tr> + <tr> + <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Filters 1.0", "", "") }}</strong></td> + <td>{{ Spec2("Filters 1.0") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Template", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Template") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Sizing", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Sizing") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Line Grid", "", "") }}</strong></td> + <td>{{ Spec2("CSS Line Grid") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Positioning", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Positioning") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Ruby", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Ruby") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSSOM", "", "") }}</strong></td> + <td>{{ Spec2("CSSOM") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Overflow", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Overflow") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Font Loading", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Font Loading") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Display", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Display") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Scope", "", "") }}</strong></td> + <td>{{ Spec2("CSS Scope") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Media Queries", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Media Queries") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Non-element Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS Non-element Selectors") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Geometry Interfaces", "", "") }}</strong></td> + <td>{{ Spec2("Geometry Interfaces") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Inline", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Inline") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_rewriting_phase">Modules in the rewriting phase</h3> + +<p>Modules that are in the rewriting phase are outdated and require to be rewritten. The syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.</p> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Box", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Box") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Content", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Content") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Inline Layout", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Inline Layout") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/id/archive/index.html b/files/id/archive/index.html new file mode 100644 index 0000000000..6361867424 --- /dev/null +++ b/files/id/archive/index.html @@ -0,0 +1,18 @@ +--- +title: Arsipkan konten usang +slug: Archive +translation_of: Archive +--- +<p>Di sini, di MDN, kami mencoba untuk menghindari penghapusan konten secara langsung yang mungkin berguna bagi orang-orang yang menargetkan platform, sistem operasi, dan browser lawas. Mungkin target pemirsa Anda adalah orang-orang yang menggunakan perangkat keras lama, misalnya, dan tidak dapat melakukan upgrade ke browser terbaru dan terbaik. Atau untuk "alasan", perusahaan Anda diharuskan menggunakan perangkat lunak yang sangat tua dan Anda perlu membangun konten Web yang berjalan pada perangkat lunak itu. Atau mungkin Anda hanya ingin tahu tentang sejarah fitur usang atau API, dan bagaimana cara kerjanya.</p> + +<p>Ada banyak alasan dokumentasi yang lebih tua bisa bermanfaat. Jadi, kami telah menetapkan area ini untuk mengarsipkan dokumentasi yang lebih tua. Materi di zona Konten yang Diarsipkan ini seharusnya tidak digunakan untuk membuat situs Web baru atau aplikasi untuk peramban modern. Itu hanya untuk referensi sejarah saja.</p> + +<div class="note"> +<p><strong>Catatan untuk penulis</strong>: Kita perlu mencoba untuk menjaga bagian halaman di sini diatur bukan semua dibuang ke dalam satu folder besar. Cobalah untuk membuat bagan pohon untuk kategori materi. Selain itu, hanya memindahkan halaman di sini yang <strong>sangat </strong>usang. Jika ada orang yang secara realistis memerlukan informasi dalam produk yang hidup, mungkin tidak tepat untuk memindahkannya ke sini. Secara umum, sebaiknya Anda mendiskusikannya di saluran <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs</a> sebelum memindahkan konten di sini.</p> +</div> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 id="Subnav">Subnav</h2> + +<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p> diff --git a/files/id/archive/meta_docs/index.html b/files/id/archive/meta_docs/index.html new file mode 100644 index 0000000000..55e2f91374 --- /dev/null +++ b/files/id/archive/meta_docs/index.html @@ -0,0 +1,11 @@ +--- +title: Arsip MDN "meta-documentation" +slug: Archive/Meta_docs +tags: + - Archive + - MDN +translation_of: Archive/Meta_docs +--- +<p>Di sini Anda akan menemukan arsip "meta-documentation"; Yaitu dokumentasi tentang bagaimana menulis dokumentasi tentang MDN. Artikel di sini sudah usang dan seharusnya tidak lagi direferensikan; Kami mempertahankannya di sini untuk referensi sementara kami memigrasikan beberapa konten ke tempat baru, namun sangat sedikit hal ini berguna.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/id/archive/mozilla/index.html b/files/id/archive/mozilla/index.html new file mode 100644 index 0000000000..132253aacf --- /dev/null +++ b/files/id/archive/mozilla/index.html @@ -0,0 +1,8 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +translation_of: Archive/Mozilla +--- +<p>In progress. These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p> + +<p>{{SubpagesWithSummaries}}</p> diff --git a/files/id/archive/mozilla/xul/index.html b/files/id/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..17aa6ed66c --- /dev/null +++ b/files/id/archive/mozilla/xul/index.html @@ -0,0 +1,84 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - NeedsTranslation + - TopicStub + - XUL +translation_of: Archive/Mozilla/XUL +--- +<div class="callout-box"><strong><a href="/en-US/docs/XUL_Tutorial" title="en-US/docs/XUL_Tutorial">XUL Tutorial</a></strong><br> +A guided tutorial that will help you get started with XUL, originally from XULPlanet.</div> + +<div> +<p><strong>XUL</strong> (XML User Interface Language) is Mozilla's <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>-based language for building user interfaces of applications like Firefox. The term XUL is sometimes used to refer to the whole <a href="/en-US/docs/The_Mozilla_platform" title="/en-US/docs/The_Mozilla_platform">Mozilla platform</a> (e.g. XUL applications are applications using XUL and other components of the platform).</p> + +<p><a href="/en-US/docs/XUL_controls" title="en-US/docs/XUL_controls">XUL Controls</a> lists some of the common controls provided by XUL.</p> +</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation">Documentation</h2> + + <dl> + <dt><strong><a href="/en-US/docs/XUL_Tutorial" title="en-US/docs/XUL_Tutorial">XUL Tutorial</a></strong></dt> + <dd>A guided tutorial that will help you get started with XUL, originally from XULPlanet.</dd> + <dt><a href="/en-US/docs/XUL_Reference" title="en-US/docs/XUL_Reference">XUL Reference</a></dt> + <dd>XUL elements, attributes, properties, methods, and event handlers.</dd> + <dt><a href="/en-US/docs/XUL_controls" title="en-US/docs/XUL_controls">XUL Controls</a></dt> + <dd>A quick list of all of the available XUL controls.</dd> + <dt><a href="/en-US/docs/The_Joy_of_XUL" title="en-US/docs/The_Joy_of_XUL">The Joy of XUL</a></dt> + <dd>Describes the key features and components of XUL.</dd> + <dt><a href="/en-US/docs/XUL/PopupGuide" title="en-US/docs/XUL/PopupGuide">Menus and Popups Guide</a></dt> + <dd>A guide on using menus and popup panels.</dd> + <dt><a href="/en-US/docs/XUL/Template_Guide" title="en-US/docs/XUL/Template_Guide">Template Guide</a></dt> + <dd>A detailed guide on XUL templates, which is a means of generating content from a datasource.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></dt> + <dd>How to perform drag and drop operations.</dd> + </dl> + + <dl> + <dt>XUL Periodic Table</dt> + <dd>This collection of XUL demos was available as a <a href="/en-US/docs/" title="/en-US/docs/">web page</a>, but can no longer be viwed in Firefox since support for <a href="/en-US/docs/Remote_XUL" title="/en-US/docs/Remote_XUL">Remote XUL</a> was disabled. There is a XULRunner application containing the XUL Periodic Table which can be opened with Gecko based browsers. <a href="https://github.com/matthewkastor/XULRunner-Examples" title="https://github.com/matthewkastor/XULRunner-Examples">You can get it here</a>. See: <a href="/en-US/docs/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications" title="/en-US/docs/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications">XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications</a> for instructions on running XULRunner apps in Firefox.</dd> + <dt>Changes to XUL</dt> + <dd>New XUL features and changes to existing features are included in the <a href="/en-US/docs/Mozilla/Firefox/Releases" title="/en-US/docs/Mozilla/Firefox/Releases">Firefox developer release notes</a>.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/XUL" title="tag/XUL">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + + <ul> + <li>View Mozilla forums...{{ DiscussionList("dev-tech-xul", "mozilla.dev.tech.xul") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/xul">#xul on irc.mozilla.org</a></li> + </ul> + + <h2 class="Tools" id="Tools">Tools</h2> + + <ul> + <li><a class="external" href="/en-US/docs/XUL_Explorer" title="en-US/docs/XUL_Explorer">XUL Explorer</a> (a lightweight XUL IDE)</li> + <li><a href="https://github.com/matthewkastor/XULExplorer" title="https://github.com/matthewkastor/XULExplorer">XULExplorer</a> (Patched version of XUL explorer)</li> + <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension developer's extension</a> (featuring a Live XUL Editor)</li> + <li><a class="external" href="http://forum.addonsmirror.net/index.php?showtopic=751" title="http://forum.addonsmirror.net/index.php?showtopic=751">XULRef sidebar</a></li> + <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> + <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://www.spket.com/">Spket IDE</a>, IDE for XUL/XBL</li> + <li><a class="external" href="http://www.amplesdk.com" title="http://www.amplesdk.com/">Ample SDK</a>, (Cross-browser XUL renderer in JavaScript/HTML)</li> + </ul> + + <p><span class="alllinks"><a href="/en-US/docs/tag/tools" title="tag/tools">View All...</a></span></p> + + <h2 class="Related_Topics" id="Related_Topics">Related Topics</h2> + + <ul> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XBL" title="en-US/docs/XBL">XBL</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/RDF" title="en-US/docs/RDF">RDF</a>, <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">Extensions</a>, <a href="/en-US/docs/XULRunner" title="en-US/docs/XULRunner">XULRunner</a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html b/files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html new file mode 100644 index 0000000000..d3ddd60359 --- /dev/null +++ b/files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html @@ -0,0 +1,23 @@ +--- +title: International characters in XUL JavaScript +slug: Archive/Mozilla/XUL/International_characters_in_XUL_JavaScript +translation_of: Archive/Mozilla/XUL/International_characters_in_XUL_JavaScript +--- +<h3 id="Introduction" name="Introduction">Introduction</h3> +<p><a href="/en-US/docs/Gecko" title="en/Gecko">Gecko</a> 1.8, as used in <a href="/en-US/docs/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a> and other applications, added support for non-ASCII characters in <a href="/en-US/docs/JavaScript" title="en/JavaScript">JavaScript</a> files loaded from <a href="/en-US/docs/XUL" title="en/XUL">XUL</a> files.</p> +<p>This means that such script files can use any character from virtually any language of the world. For example, they can contain a line:</p> +<pre class="eval">var text = "Ein schönes Beispiel eines mehrsprachigen Textes: 日本語"; +</pre> +<p>This mixes German and Japanese characters.</p> +<p>Earlier versions always interpreted JS files loaded from XUL as <a class="external" href="http://en.wikipedia.org/wiki/ISO_8859-1#Code_table">ISO-8859-1</a> (Latin-1), in both local and remote cases. Unicode escapes, <a href="#Cross-version_compatibility">as discussed below</a>, have always worked.</p> +<h3 id="How_the_character_encoding_is_determined_in_Gecko_1.8_and_later" name="How_the_character_encoding_is_determined_in_Gecko_1.8_and_later">How the character encoding is determined in Gecko 1.8 and later</h3> +<p>When the JavaScript file is loaded from a <code>chrome://</code> URL, a <a href="/en-US/docs/Byte_Order_Mark" title="en/Byte_Order_Mark">Byte Order Mark</a> ({{todo}})({{ interwiki('wikipedia', 'Byte_Order_Mark', 'BOM') }}) is used to determine the character encoding of the script. Otherwise, the character encoding will be the same as the one used by the XUL file (which can be specified using an <code>encoding</code> attribute in the <code><?xml?></code> tag). By default this will use UTF-8, which can represent virtually all characters in the world.</p> +<p>If the script file is loaded via HTTP, the HTTP header can contain a character encoding declaration as part of the <code>Content-Type</code> header, for example:</p> +<pre class="eval">Content-Type: application/javascript; charset=UTF-8 +</pre> +<p>If no charset parameter is specified, the same rules as above apply.</p> +<h3 id="Cross-version_compatibility" name="Cross-version_compatibility">Cross-version compatibility</h3> +<p>If you want the same code to work in both Gecko 1.8 and earlier versions, you must limit yourself to ASCII. However, you can use <a href="/en-US/docs/Core_JavaScript_1.5_Guide/Unicode#Unicode_Escape_Sequences" title="en/Core_JavaScript_1.5_Guide/Unicode#Unicode_Escape_Sequences">unicode escapes</a> – the earlier example rewritten using them would be:</p> +<pre class="eval">var text = "Ein sch\u00F6nes Beispiel eines mehrsprachigen Textes: \u65E5\u672C\u8A9E"; +</pre> +<p>An alternative might be to use property files via {{interface("nsIStringBundle")}} or the <a href="/en-US/docs/XUL_Tutorial/Property_Files" title="en/XUL_Tutorial/Property_Files">XUL <stringbundle> element</a>; this would allow for localization of the XUL. This can not be done in XUL files loaded from the web, only in privileged code, e.g. in <a href="/en-US/docs/Extensions" title="en/Extensions">extensions</a>.</p> diff --git a/files/id/archive/mozilla/xul/school_tutorial/index.html b/files/id/archive/mozilla/xul/school_tutorial/index.html new file mode 100644 index 0000000000..4ae723e85a --- /dev/null +++ b/files/id/archive/mozilla/xul/school_tutorial/index.html @@ -0,0 +1,59 @@ +--- +title: XUL School Tutorial +slug: Archive/Mozilla/XUL/School_tutorial +tags: + - Add-ons + - Extensions + - NeedsTranslation + - References + - TopicStub + - Tutorials + - XUL +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School +--- +<p>XUL School is a comprehensive add-on development tutorial, focusing on Firefox extension development. It is recommended that you read through all of it at least once. While Firefox changes rapidly, the content in this tutorial should be up to date and valid.</p> +<dl> + <dt>Introduction</dt> + <dd><ul> + <li><a href="/en-US/docs/XUL/School_tutorial/Introduction" title="XUL/School_tutorial/Introduction">Introduction</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Getting_Started_with_Firefox_Extensions" title="XUL/School_tutorial/Getting Started with Firefox Extensions">Getting Started with Firefox Extensions</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/The_Essentials_of_an_Extension" title="XUL/School_tutorial/The Essentials of an Extension">The Essentials of an Extension</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Setting_Up_a_Development_Environment" title="XUL/School_tutorial/Setting Up a Development Environment">Setting Up a Development Environment</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/JavaScript_Object_Management" title="XUL/School_tutorial/JavaScript Object Management">JavaScript Object Management</a></li> + </ul></dd> + <dt>Basic functionality</dt> + <dd><ul> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_menus_and_submenus" title="XUL/School_tutorial/Adding menus and submenus">Adding menus and submenus</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_Toolbars_and_Toolbar_Buttons" title="XUL/School_tutorial/Adding Toolbars and Toolbar Buttons">Adding Toolbars and Toolbar Buttons</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_Events_and_Commands" title="XUL/School_tutorial/Adding Events and Commands">Adding events and commands</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_windows_and_dialogs" title="XUL/School_tutorial/Adding windows and dialogs">Adding windows and dialogs</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_sidebars" title="XUL/School_tutorial/Adding sidebars">Adding sidebars</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/User_Notifications_and_Alerts" title="XUL/School_tutorial/User Notifications and Alerts">User notifications and alerts</a></li> + </ul></dd> + <dt>Intermediate functionality</dt> + <dd><ul> + <li><a href="/en-US/docs/XUL/School_tutorial/Intercepting_Page_Loads" title="XUL/School_tutorial/Intercepting Page Loads">Intercepting page loads</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Connecting_to_Remote_Content" title="XUL/School_tutorial/Connecting to Remote Content">Connecting to Remote Content</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Handling_Preferences" title="XUL/School_tutorial/Handling Preferences">Handling preferences</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Local_Storage" title="XUL/School_tutorial/Local Storage">Local Storage</a></li> + </ul></dd> + <dt>Advanced topics</dt> + <dd><ul> + <li><a href="/en-US/docs/XUL/School_tutorial/The_Box_Model" title="XUL/School_tutorial/The Box Model">The Box Model</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/XPCOM_Objects" title="XUL/School_tutorial/XPCOM Objects">XPCOM Objects</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Observer_Notifications" title="XUL/School_tutorial/Observer Notifications">Observer Notifications</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Custom_XUL_Elements_with_XBL" title="XUL/School_tutorial/Custom XUL Elements with XBL">Custom XUL Elements with XBL</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Mozilla_Documentation_Roadmap" title="XUL/School_tutorial/Mozilla Documentation Roadmap">Mozilla Documentation Roadmap</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Useful_Mozilla_Community_Sites" title="XUL/School_tutorial/Useful Mozilla Community Sites">Useful Mozilla Community Sites</a></li> + </ul></dd> + <dt>Appendices</dt> + <dd><ul> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_A:_Add-on_Performance" title="XUL/School_tutorial/Appendix A: Add-on Performance">Appendix A: Add-on Performance</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_B:_Install_and_Uninstall_Scripts" title="XUL/School_tutorial/Appendix B: Install and Uninstall Scripts">Appendix B: Install and Uninstall Scripts</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_C:_Avoid_using_eval_in_Add-ons" title="XUL/School_tutorial/Appendix C: Avoid using eval in Add-ons">Appendix C: Avoiding using eval in Add-ons</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_D:_Loading_Scripts" title="XUL/School_tutorial/Appendix D: Loading Scripts">Appendix D: Loading Scripts</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/DOM_Building_and_HTML_Insertion" title="XUL/School_tutorial/Appendix E: DOM Building and HTML Insertion">Appendix E: DOM Building and HTML Insertion</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_F:_Monitoring_DOM_changes" title="XUL/School_tutorial/Appendix F: Monitoring DOM changes">Appendix F: Monitoring DOM changes</a></li> + </ul></dd> +</dl> +<p>The XUL School project was developed by <a href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (formerly Glaxstar). The project is now published here following its <a href="/Project:Copyrights" title="https://developer.mozilla.org/Project:Copyrights">sharing licenses</a>. Its contents have been modified from the original source as necessary.</p> diff --git a/files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html b/files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html new file mode 100644 index 0000000000..5ce760d1be --- /dev/null +++ b/files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html @@ -0,0 +1,32 @@ +--- +title: Perkenalan +slug: Archive/Mozilla/XUL/School_tutorial/Perkenalan +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Introduction +--- +<div> + {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}</div> +<p><span id="result_box" lang="id"><span title="Welcome to the XUL School Tutorial!">Selamat datang di Tutorial Sekolah XUL !</span></span></p> +<p><span id="result_box" lang="id"><span title="This tutorial is meant to be the stepping stone that will turn you into a professional Firefox extension developer in no time.">Tutorial ini dimaksudkan untuk menjadi batu loncatan yang akan mengubah Anda menjadi seorang pengembang ekstensi Firefox profesional dalam waktu singkat . </span><span title="We have poured years of XUL experience into it, providing many solutions for problems extension developers commonly run into.">Kami telah dituangkan tahun pengalaman XUL ke dalamnya , menyediakan banyak solusi untuk masalah pengembang ekstensi pada umumnya.</span></span></p> +<p>XUL School was created by <a href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (formerly Glaxstar), one of the few companies dedicated to building high-quality Firefox extensions. A team of over a dozen XUL developers conformed Glaxstar at the time this tutorial was created, and the combined experiences of years creating Firefox extensions are reflected here.</p> +<p>With this tutorial you'll learn how to develop Firefox extensions. You'll learn how to quickly do the most common tasks in extension development, comparing several different approaches to solve them. In most cases we'll provide code samples that you can easily copy and adapt to your needs, as well as some working example extensions. The tutorial aims to be as brief as possible, often falling back on Mozilla documentation for more detailed information. You can think of it as a quick guide to the expansive world that is the Mozilla platform. Most links in this documentation are meant to be clicked and read.</p> +<p>We'll start with a brief introduction to some key concepts, in case you're not familiar with Mozilla and Firefox.</p> +<h2 id="Mozilla_and_Firefox">Mozilla and Firefox</h2> +<p>The term <a href="http://en.wikipedia.org/wiki/Mozilla" title="http://en.wikipedia.org/wiki/Mozilla">Mozilla</a> can be used to refer to several concepts: the Mozilla project, the <a href="http://en.wikipedia.org/wiki/Mozilla_Foundation" title="http://en.wikipedia.org/wiki/Mozilla_Foundation">Mozilla Foundation</a>, the <a href="http://en.wikipedia.org/wiki/Mozilla_Corporation" title="http://en.wikipedia.org/wiki/Mozilla_Corporation">Mozilla Corporation</a> and the old <a href="http://en.wikipedia.org/wiki/Mozilla_Application_Suite" title="http://en.wikipedia.org/wiki/Mozilla_Application_Suite">Mozilla browser</a>. Even Firefox is sometimes referred to as "Mozilla". If you're unfamiliar with these terms, it's good that you take some time and learn a little about Mozilla. This will help you understand the culture that surrounds the Mozilla community.</p> +<p>Mozilla has spawned several <a href="http://www.mozilla.org/projects/" title="http://www.mozilla.org/projects/">products and projects</a>, the most notable being the Mozilla Firefox web browser. Firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies.</p> +<p>Version 1.0 of Firefox was released in November 2004, version 2.0 in October 2006, and version 3.0 in June 2008. This tutorial was written after Firefox 3 was released, and has been updated with time. While most of it should still work for creating extensions Firefox 3 (and even Firefox 2), it is strongly recommended that you aim to support modern Firefox versions, to encourage users to stay up to date with security fixes. A release that is more than 6 months old is likely vulnerable to published security bugs.</p> +<p>Firefox and other Mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built. The user interface is built with technology known as <a href="/en-US/docs/XUL" title="XUL">XUL</a>, and the platform is known as <a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a>.</p> +<h2 id="XUL">XUL</h2> +<p><a href="/en-US/docs/XUL" title="XUL">XUL</a> (pronounced "zool") is one of many technologies used for creating Mozilla-based products and extensions. It is only one part of the development landscape, but given that it's practically exclusive to Mozilla, it tends to be used to identify all Mozilla-related development. You'll sometimes read terms like "XUL applications" and "XUL extensions", but rarely will they refer to projects that are exclusively built with XUL. It usually means that the projects were built using Mozilla technologies. Even this project, called XUL School, covers several other technologies such as JavaScript, CSS, XBL and XPCOM.</p> +<h2 id="XULRunner">XULRunner</h2> +<p><a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a> includes the <a href="/en-US/docs/Gecko" title="Gecko">Gecko rendering engine</a>, the <a href="/en-US/docs/Necko" title="Necko">Necko networking library</a>, and several other components that provide OS-independent file management, accessibility, and localization, among others. It is this very powerful platform that has allowed such a fast growth of the development community surrounding Mozilla and Firefox.</p> +<p>XULRunner is available in binary form at the <a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a> page, and it is the base for several projects, such as Songbird, Miro and Eudora. There's a very comprehensive list of XULRunner applications in the <a href="/en-US/docs/XULRunner_Hall_of_Fame" title="XULRunner Hall of Fame">XULRunner Hall of Fame</a>.</p> +<h3 id="Gecko">Gecko</h3> +<p>The <a href="/en-US/docs/Gecko" title="Gecko">Gecko engine</a> is the part of Firefox used to render web pages and its own user interface. You can identify the level of compatibility of web standards in <a href="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers" title="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers">Gecko-based browsers</a> looking at their <a href="http://en.wikipedia.org/wiki/User_agent" title="http://en.wikipedia.org/wiki/User_agent">User Agent</a> string, which should include the Gecko version. Gecko versions are somewhat independent from Firefox versions, and you can see a mapping of Firefox versions and Gecko versions at the <a href="/en-US/docs/Gecko" title="Gecko">Gecko page</a>. The User Agent String for Firefox at the time of this writing (in US English, Mac OS X) is:</p> +<p>Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:<strong>7.0.1</strong>) Gecko/20100101 Firefox/7.0.1</p> +<p>The highlighted section is the Gecko version: 7.0.1. You can read and copy the user agent string of any Firefox window, choosing "Help > Troubleshooting Information" from the main menu.</p> +<h2 id="On_to_the_Tutorial">On to the Tutorial</h2> +<p>With the basic concepts out of the way, we can now get right into extension development. You are probably still wondering what exactly is an extension, what can it do, and how can you make them. Well, this whole tutorial is devoted to explaining that to you.</p> +<p>Welcome to the world of extension development. Now let's get to it.</p> +<div> + {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}</div> +<p><small>This tutorial was kindly donated to Mozilla by Appcoast.</small></p> diff --git a/files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html b/files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html new file mode 100644 index 0000000000..9fa34889f3 --- /dev/null +++ b/files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html @@ -0,0 +1,344 @@ +--- +title: The Essentials of an Extension +slug: Archive/Mozilla/XUL/School_tutorial/The_Essentials_of_an_Extension +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/The_Essentials_of_an_Extension +--- +<p>{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}</p> +<h2 id="The_install.rdf_File">The install.rdf File</h2> +<p>In the last section we looked at the contents of the Hello World extension. Now we'll look into its files and code, starting with the <em>install.rdf</em> file. You can open it with any text editor.</p> +<p>The file is formatted in a special flavor of XML called <a class="external" href="http://en.wikipedia.org/wiki/Resource_Description_Framework">RDF</a>. RDF used to be the central storage mechanism for Firefox, but it is now being replaced for a simpler database system. We'll discuss both of these storage systems further ahead in the tutorial.</p> +<p>Now let's look at the important parts of the file.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:id>helloworld@xulschool.com</em:id></pre> + </div> +</div> +<p>This is the unique identifier for the extension. Firefox needs this to distinguish your extension from other extensions, so it is required that you have an ID that is unique.</p> +<p>There are two accepted standards for add-on ids. One is the email-like format in the Hello World example, which should be something like <span style="color: #0000ff;"><em><project-name>@<yourdomain></em></span>. The other standard practice is to use a generated <a class="external" href="http://en.wikipedia.org/wiki/Uuid">UUID</a> string, which is extremely unlikely to be duplicated. Unix-based systems have a command line tool called <em>uuidgen</em> that generates UUIDs. There are also downloadable tools for all platforms that generate them. The enclosing brackets are just notation, and they're just common practice. As long as your id has some uniqueness to it, it's OK to use either form.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:name>XUL School Hello World</em:name> +<em:description>Welcome to XUL School!</em:description> +<em:version>0.1</em:version> +<em:creator>Appcoast</em:creator> +<span class="code-comment"><em:homepageURL>https://developer.mozilla.org/en/XUL_School</em:homepageURL></span></pre> + </div> +</div> +<p>This is the data that is displayed before and after the extension is installed, that you can see in the Add-ons Manager. There are many other tags that can be added, for contributors and translators. The <a href="/en/Install_Manifests" title="en/Install Manifests">full specification</a> of the install.rdf file has all the details.</p> +<p>Since extensions can be translated to multiple languages, it is often necessary to translate the extension's description, or even its name. A localized description and name can be added with the following code:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:localized> + <Description> + <em:locale>es-ES</em:locale> + <em:name>XUL School Hola Mundo</em:name> + <em:description>Bienvenido a XUL School!</em:description> + </Description> +</em:localized></pre> + </div> +</div> +<p>The <em>es-ES</em> locale string indicates that this is the Spanish (es) localization for Spain (ES). You can add as many <em><em:localized></em> sections as you need. For Firefox 2, localizing this file is a <a href="/en/Localizing_extension_descriptions#Localizing_before_Gecko_1.9" title="en/Localizing extension descriptions#Localizing before Gecko 1.9">little more complicated</a>. We'll discuss localization further ahead in this section.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:type>2</em:type></pre> + </div> +</div> +<p>This specifies that the add-on being installed is an extension. You can read about different possible types in the <a href="/en/Install_Manifests#type" title="en/Install Manifests#type">install.rdf specification</a>.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:targetApplication> + <Description> + <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> + <em:minVersion>4.0</em:minVersion> + <em:maxVersion>10.*</em:maxVersion> + </Description> +</em:targetApplication> +</pre> + </div> +</div> +<p>This node specifies the target application and target versions for the extension, specifically Firefox, from version 4 up to version 10. The UUID is Firefox's unique ID. Other Mozilla and Mozilla-based applications such as Thunderbird and Seamonkey have their own. You can have an extension that works on multiple applications and versions. For example, if you create a Firefox extension, it would normally take little effort to port it to SeaMonkey, which has very similar features and UI.</p> +<p>The min and max version specify the version range in which the extension can be installed. Here's more about the <a href="/en/Toolkit_version_format" title="en/Toolkit version format">version format</a>. If the application or version range don't match, you won't be allowed to install the extension, or the extension will be installed in a disabled state. Users can disable version checks through preferences or installing add-ons like the <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/15003" title="https://addons.mozilla.org/en-US/firefox/addon/15003">Add-on Compatibility Reporter</a>. Beginning with Firefox 11, add-ons will default to compatible and Firefox will mostly ignore the version range. Testing your add-ons with every Firefox version is always recommended, though.</p> +<p>This is the information Firefox and other Mozilla applications need to install an add-on. Any errors or missing information will cause the installation process to fail, or the extension to be installed in a disabled state.</p> +<h2 id="The_chrome.manifest_File">The chrome.manifest File</h2> +<blockquote> + <p><span style="color: #0000ff;">Chrome is the set of user interface elements of the application window that are outside of a window's content area.</span> Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.</p> +</blockquote> +<p>Taken from <a href="/en/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a>.</p> +<p>In other words, the chrome is everything you see in Firefox. All Firefox windows can be seen as having two parts: (1) the chrome and (2) possibly a content area, like the one that displays web pages in a Firefox tab. Windows like the Downloads window are pure chrome. Most of the code for an extension resides in the chrome folder, just like in the Hello World example.</p> +<p>As we saw in the directory structure of the unpacked extension, the chrome is composed of 3 sections: <span style="color: #0000ff;">content</span>, <span style="color: #0000ff;">locale</span> and <span style="color: #0000ff;">skin</span>. The 3 are necessary for most extensions. If we open the <em>chrome.manifest</em> file (again, any text editor will do), we see that the same 3 sections are mentioned:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">content xulschoolhello content/ +skin xulschoolhello classic/1.0 skin/ +locale xulschoolhello en-US locale/en-US/ +</pre> + </div> +</div> +<p><span style="color: #0000ff;">The <em>chrome.manifest</em> file tells Firefox where to look for chrome files.</span> The text is spaced to look like a table, but that is not necessary. The parser ignores repeated spaces.</p> +<p>The first word in a line tells Firefox what it is that is being declared (content, skin, locale, or others mentioned later on). The second is the package name, which we will explain shortly.</p> +<p>Skin and locale packages have a third value to specify what locale or what skin they are extending. There can be multiple skin and locale entries relating to different skins and locales. The most common case is having one skin entry for the global skin, <em>classic/1.0</em>, and multiple locale entries, one for each translation. Finally, the location is specified.</p> +<p>There are some additional options that can be included in the entries of a <em>chrome.manifest</em> file. They are documented in the <a href="/en/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a> page. Notably, we can have entries that are OS-specific. This is important because the appearance of the browser is very different for each operating system. If our extension needed to look differently on different systems, we could change the manifest file so that it looks like this:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">content xulschoolhello content/ +skin xulschoolhello classic/1.0 skin/unix/ +skin xulschoolhello classic/1.0 skin/mac/ os=Darwin +skin xulschoolhello classic/1.0 skin/win/ os=WinNT +locale xulschoolhello en-US locale/en-US/ +</pre> + </div> +</div> +<p>This way we can have separate skins for Windows, Mac OS X, and Linux (plus other unix-like systems), each defined in a separate directory. Since most other systems are Unix-based, the "unix" skin is the default, with no flags.</p> +<h2 id="The_Chrome">The Chrome</h2> +<p>As mentioned earlier, the chrome is composed of 3 sections: content, locale and skin. The content is the most important section, holding user interface (XUL) and script (JS) files. The skin section has the files that define most of the look and feel of the UI (using CSS and images, just like web pages). Finally, the locale section holds all text used in the extension, in DTD and properties files. This division allows other developers to create themes that replace skins, and translators to create localizations in different languages, all of this without having to change your extension or your code. This gives Firefox extensions a great deal of flexibility.</p> +<p>Chrome files are accessed through the chrome protocol. This is what a chrome URI looks like:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">chrome:<span class="code-comment">//packagename/section/path/to/file</span></pre> + </div> +</div> +<p>So, for instance, if I want to access the file <em>browserOverlay.xul </em>in the extension, the chrome URI would be <em><a class="external" rel="freelink">chrome://xulschoolhello/content/browserOverlay.xul</a></em>.</p> +<p>If you have too many files in the content and you want to organize them in subdirectories, there's nothing you need to change in <em>chrome.manifest</em>, all you need is to add the right path after <em>content</em> in the URI.</p> +<p>Skin and locale files work in the same way, and you don't need to specify skin names or locale names. So, to access the DTD file in the Hello World extension, the chrome path is <em><a class="external" rel="freelink">chrome://xulschoolhello/locale/browserOverlay.dtd</a></em>. Firefox knows what locale to look for.</p> +<p>Here's an interesting experiment. Open a new Firefox tab, type <em><a class="external" rel="freelink">chrome://mozapps/content/downloads/downloads.xul</a></em> on your location bar and press ENTER. Surprised? You just opened the Downloads window in a Firefox tab! You can access any chrome file by just typing its URI in the location bar. This can come in handy if you want to inspect script files that are part of Firefox, other extensions, or your own. Most of these files are opened as text files, with the exception of XUL files, which are executed and displayed like you would normally see them on a window.</p> +<h3 id="Content">Content</h3> +<p>There are 2 files in the content directory. Let's look at the XUL file first.</p> +<p><a href="/en/XUL" title="en/XUL">XUL</a> files are XML files that define the user interface elements in Firefox and Firefox extensions. XUL was inspired by HTML, so you'll see many similarities between the two. However, XUL is also an improvement over HTML, having learned from many of the mistakes made during the evolution of HTML. XUL allows you to create richer and more interactive interfaces than the ones you can create with HTML, or at least XUL makes it easier.</p> +<p>XUL files usually define one of two things: windows or overlays. The file you opened before, <em>downloads.xul</em>, has the code that defines the Downloads window. The XUL file included in the Hello World extension is an overlay. An overlay extends an existing window, adding new elements to it or replacing some of the elements in it. The line that we skipped in the <em>chrome.manifest</em> file states that this XUL file is an overlay for the main browser window:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">overlay chrome:<span class="code-comment">//browser/content/browser.xul chrome://xulschoolhello/content/browserOverlay.xul</span></pre> + </div> +</div> +<p>With this line, Firefox knows that it needs to take the contents of <em>browserOverlay.xul</em> and overlay it on the main browser window, <em>browser.xul</em>. You can declare overlays for any window or dialog in Firefox, but overlaying the main browser window is the most common case by far.</p> +<p>Now let's look at the contents of our XUL file. We'll skip the first few lines because they relate to skin and locale, and we'll cover them later.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><overlay id="xulschoolhello-browser-overlay" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"></pre> + </div> +</div> +<p>The root element in the file is an <em>overlay</em>. Other XUL documents use the <em>window</em> or <em>dialog</em> tag. The element has a unique id, which you should have on most elements in your XUL. The second attribute is the namespace, which is something you should always define in your XUL root element. It says that this node and all child nodes are XUL. You only need to change namespace declarations when you mix different types of content in the same document, such as XUL with HTML or SVG.</p> +<div class="panel" style="border-width: 1px;"> + <div class="panelContent"> + <div class="note"> + You may have noticed the naming we use on several places, such as the id <em>xulschoolhello-browser-overlay</em>. This is the namespacing standard that we use to avoid conflicts with Firefox and other extensions, as well as making some development tasks easier. We namespace all ids and style classes in overlay elements because they will be mixed with other elements in the main browser window. If we used generic ids like <em>container</em> or <em>input</em>, they will likely conflict with ids used within Firefox, or with ids from other extension overlays. Using namespaces minimizes compatibility problems with other extensions. We use camel casing for file names, and all lower case with dashes for element ids and CSS style class names, but you're free to use your own system.</div> + </div> +</div> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><script type=<span class="code-quote">"application/x-javascript"</span> + src=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/content/browserOverlay.js"</span> /></span></pre> + </div> +</div> +<p>Just like in HTML, this includes a JavaScript script file. You can have as many <em>script</em> elements in a XUL document as you need. We'll look into its code later.</p> +<div class="panel" style="border-width: 1px;"> + <div class="panelContent"> + <div class="note"> + You also probably noticed how we format our code, and wonder about the rules we follow. Our general rule on line length is not having lines longer than 80 characters. This feels very restrictive, specially with XML files, but the number was chosen to allow pretty much any text editor to handle these files easily. Even old command line editors work well with files that cut their lines at 80 characters. The tabulation is very straightforward: 2 blank space indents. We never use actual tab characters, with the exception of Makefiles, which will be covered later on. Most of our coding standards are based on Mozilla's or other known and used standards.</div> + </div> +</div> +<p> We'll skip some code that is covered in the locale section, moving on to the most important part of the content:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><menubar id="main-menubar"> + <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu"> + <menupopup> + <menuitem id="xulschoolhello-hello-menu-item" + label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloItem.accesskey;" + oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /> + </menupopup> + </menu> +</menubar> + +<vbox id="appmenuSecondaryPane"> + <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloMenu.accesskey;" + insertafter="appmenu_addons"> + <menupopup> + <menuitem id="xulschoolhello-hello-menu-item-2" + label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloItem.accesskey;" + oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /> + </menupopup> + </menu> +</vbox> +</pre> + </div> +</div> +<p>This is the code that adds the <em>Hello World</em> menu to the browser window.</p> +<p>There are two similar code blocks, because in modern versions of Firefox, particularly on Windows, a single Firefox menu button is presented, with simplified menu options, rather than an extensive menu bar. The second code block covers the common menu button case; the first code block covers all other cases. Check <em>Menu Bar </em>under the <em>Options </em>menu of the menu button to toggle display of the classic menu on Windows and some Linux distributions.</p> +<p>In order to write this code, we needed some knowledge of the XUL code in <em>browser.xul</em>. We needed to know that the id of the right pane in the unified menu is <em>appmenuSecondaryPane</em>. We're adding a menu of our own, and telling Firefox to add it in that pane, right after the Add-ons item. That's the purpose of the attribute:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">insertafter=<span class="code-quote">"appmenu_addons"</span> +</pre> + </div> +</div> +<p><em>appmenu_addons</em> is the id of the menu element that corresponds to the Add-ons menu item in the main menu. We'll see later how we can find out things like the ids of browser elements, but for now let's look at the elements that compose the Hello World menu.</p> +<p>For the classic menu, we added the Hello World menu right in the "root" of the menu so that it would be very easy for you to spot it, but this is not a recommended practice. Imagine if all extensions added menus to the top menu; having a few extensions would make it look like an airplane dashboard, full of knobs and switches. In the case of the unified menu, things are a little more difficult due to lack of options. If your menu item fits in the Web Developer section, it is recommended that you add it there. Otherwise, the root menu might be your only recourse.</p> +<p>One recommended location for menus in the classic menu vase is under the <em>Tools</em> menu, so the code should really look like this:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><menupopup id=<span class="code-quote">"menu_ToolsPopup"</span>> + <menu id=<span class="code-quote">"xulschoolhello-hello-menu"</span> label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span> + accesskey=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloMenu.accesskey;"</span> + insertbefore=<span class="code-quote">"</span>devToolsEndSeparator<span class="code-quote">"</span>> + <menupopup> + <menuitem id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-hello-menu-item" + </span> label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span> + accesskey=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloItem.accesskey;"</span> + oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span> /> + </menupopup> + </menu> +</menupopup> +</pre> + </div> +</div> +<p>We're overlaying the menu that is deeper into the XUL tree, but it doesn't matter because all we need is the id of the element we want to overlay. In this case it is the <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a> element that's inside of the Tools <a href="/en/XUL/menu" title="en/XUL/menu">menu</a> element. The <em>insertbefore</em> attribute tells Firefox to add the menu at the bottom of the dev tools section, above its end separator. We'll discuss more about menus later on in the tutorial.</p> +<p>Now let's look at the actual code:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span> +</pre> + </div> +</div> +<p>This attribute defines an event handler. The <em>command</em> event is the most frequently used in Firefox, since it corresponds to the main action for most UI elements. The value of the attribute is JavaScript code that invokes a function. This function is defined in the JS file that was included with the <em>script</em> tag. The JS function will be called once the user clicks on the menu item in the Hello World menu. All event handlers define a special object named <em>event</em>, which is usually good to pass as an argument to the function. Event handlers are explained in greater depth further ahead.</p> +<p>Now let's look at the JavaScript file and see what's going on when the event is fired.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="brush: js">/** + * XULSchoolChrome namespace. + */ +if ("undefined" == typeof(XULSchoolChrome)) { + var XULSchoolChrome = {}; +};</pre> + </div> +</div> +<p>The <em>XULSchoolChrome</em> namespace is defined. All objects and variables we define in this JavaScript are global, meaning that scripts in Firefox and other extensions can see them and interact with them. This also means that if we define an object called <em>MenuHandler</em> or some other generic name, it's likely going to conflict with an existing object. What we do here is define a single global object: <em>XULSchoolChrome</em>. Now we know that all of our objects are inside this object, which is unlikely to be duplicated or overwritten by other extensions.</p> +<p>You can read more about the <a href="/en/JavaScript/Reference/Operators/typeof" title="en/Core JavaScript 1.5 Reference/Operators/Special Operators/typeof Operator"><span class="external">typeof operator</span></a>. If you're unfamiliar with JavaScript or this particular syntax, initializing an object as <em>{}</em> is the equivalent of initializing it to <em>new Object()</em>.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="brush: js">/** + * Controls the browser overlay <span class="code-keyword">for</span> the Hello World extension. + */ +XULSchoolChrome.BrowserOverlay = {</pre> + </div> +</div> +<p>Finally, <em>BrowserOverlay</em> is our object. Naming and referencing objects in such a long and verbose manner can feel uncomfortable at first, but it's worth the cost.</p> +<div class="panel" style="border-width: 1px;"> + <div class="panelContent"> + <div class="note"> + We use <a class="external" href="http://java.sun.com/j2se/javadoc/writingdoccomments/index.html">Javadoc</a> style comments on all namespaces, objects and object members. This is a similar standard to the one used in Mozilla code, and some tools can generate documentation automatically from Javadoc.</div> + </div> +</div> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="brush: js">sayHello : function(aEvent) { + let stringBundle = document.getElementById("xulschoolhello-string-bundle"); + let message = stringBundle.getString("xulschoolhello.greeting.label"); + + window.alert(message); +}</pre> + </div> +</div> +<p>And, finally, this is our function declaration. Three lines of code are all we need for it to work. The first line in the body of the function declares a variable that will hold the <a href="/en/XUL/stringbundle" title="en/XUL/stringBundle">stringbundle</a> element defined in the overlay. The variable is declared using <em>let,</em> which is similar to <em>var</em> but with more restricted scope. Here you can read more about <a href="/en/JavaScript/Reference/Statements/let" title="let"><span class="external">let declarations</span>.</a></p> +<p>Just like in regular JS, we can use the <a href="/en/DOM" title="en/DOM"><span class="external">DOM</span></a> (Document Object Model) in order to manipulate the XUL document. First we get a reference of the <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle"><span class="external">stringbundle element</span></a> in the document. This is a special element that allows us to obtain localized strings dynamically, by only providing a "key" that identifies the string. This is what we do on the second line. We call the <a href="/en/XUL/stringbundle#m-getString" title="en/XUL/stringbundle#m-getString">getString method</a> of the bundle element and get the localized message to be displayed. We then call the <a href="/en/DOM/window.alert" title="en/DOM/window.alert">window.alert</a> function with the message, just like we would do in an HTML document.</p> +<h3 id="Locale">Locale</h3> +<p>There are two types of locale files: DTD and properties, and in this example we use them both. DTD is the most efficient way of showing text in XUL, so you should use it whenever possible. It is somewhat inflexible so it can't be used for dynamically generated text, hence the need for an alternate way of getting localized strings.</p> +<p>Looking back at the menu code, you probably noticed some attributes such as this:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">label=<span class="code-quote">"&xulschoolhello.hello.label;"</span> accesskey=<span class="code-quote">"&xulschoolhello.helloItem.accesskey;"</span></pre> + </div> +</div> +<p>These attributes define the text that you see on the menus, and they are string keys that are defined in our DTD file, <em>browserOverlay.dtd</em>. The DTD file was included in the XUL file with the following code:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" ></pre> + </div> +</div> +<p>And in the DTD file you can see the association between keys and localized strings:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><!ENTITY xulschoolhello.hello.label <span class="code-quote">"Hello World!"</span>> +<!ENTITY xulschoolhello.helloMenu.accesskey <span class="code-quote">"l"</span>> +<!ENTITY xulschoolhello.helloItem.accesskey <span class="code-quote">"H"</span>></pre> + </div> +</div> +<p>Notice that on the XUL file you enclose the string key with <em>&</em> and <em>;</em> while on the DTD file you only specify the key. You may get weird parsing errors or incorrect localization if you don't get this right.</p> +<p>Access keys are the shortcuts that allow you to quickly navigate a menu using only the keyboard. They are also the only way to navigate a menu for people with accessibility problems, such as partial or total blindness, or physical disabilities that make using a mouse very difficult or impossible. You can easily recognize the access keys on Windows because the letter that corresponds to the access key is underlined, as in the following image:</p> +<div> + <p><img alt="" class="internal" src="../../../../@api/deki/files/4226/=accesskeys.png" style="width: 167px; height: 58px;"></p> +</div> +<p>Most user interface controls have the <em>accesskey</em> attribute, and you should use it. The value of the access key is localized because it should match a letter in the label text. You should also be careful to avoid access key repetition. For example, within a menu or submenu, access keys should not be repeated. In a window you have to be more careful picking access keys because there are usually more controls there. You have to be specially careful when picking access keys on an overlay. In our case, we can't use the letter "H" as an accesskey in the Main menu item, because it would be the same as the access key in the Help menu. Same goes with "W" and the Window menu on Mac OS. So we settled on the letter "l".</p> +<p>DTD strings are resolved and set when the document is being loaded. If you request the <em>label</em> attribute value for the Hello World menu using DOM, you get the localized string, not the string key. You cannot dynamically change an attribute value with a new DTD key, you have to set the new value directly:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="brush: js">let helloItem = document.getElementById(<span class="code-quote">"xulschoolhello-hello-menu-item"</span>); + +<span class="code-comment">// The alert will say <span class="code-quote">"Hello World!"</span> +</span>alert(helloItem.getAttribute(<span class="code-quote">"label"</span>)); +<span class="code-comment">// Wrong +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label;"</span>); +<span class="code-comment">// Better +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"Alternate message"</span>); +<span class="code-comment">// Right! +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, someStringBundle.getString(<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label"</span>));</pre> + </div> +</div> +<p>This is the reason DTD strings are not a solution for all localization cases, and the reason we often need to include string bundles in XUL files:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><stringbundleset id="stringbundleset"> + <stringbundle id="xulschoolhello-string-bundle" + src="chrome://xulschoolhello/locale/browserOverlay.properties" /> +</stringbundleset></pre> + </div> +</div> +<p>The <a href="/en/XUL/stringbundleset" title="en/XUL/stringbundleset">stringbundleset</a> element is just a container for <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle">stringbundle</a> elements. There should only be one per document, which is the reason why we overlay the <em>stringbundleset</em> that is in <em>browser.xul</em>, hence the very generic id. We don't include the <em>insertbefore</em> or <em>insertafter</em> attributes because the ordering of string bundles doesn't make a difference. The element is completely invisible. If you don't include any of those ordering attributes in an overlay element, Firefox will just append your element as the last child of the parent element.</p> +<p>All you need for the string bundle is an id (to be able to fetch the element later) and the chrome path to the properties file. And, of course, you need the properties file:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">xulshoolhello.greeting.label = Hi! How are you?</pre> + </div> +</div> +<p>The whitespace around the equals sign is ignored. Just like in <em>install.rdf</em>, comments can be added using the # character at the beginning of the line. Empty lines are ignored as well.</p> +<p>You will often want to include dynamic content as part of localized strings, like when you want to inform the user about some stat related to the extension. For example: "Found 5 words matching the search query". Your first idea would probably be to simply concatenate strings, and have one "Found" property and another "words matching..." property. This is not a good idea. It greatly complicates the work of localizers, and grammar rules on different languages may change the ordering of the sentence entirely. For this reason it's better to use parameters in the properties:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">xulshoolhello.search.label = Found %S words matching the search query!</pre> + </div> +</div> +<p>Then you use <a href="/en/XUL/stringbundle#m-getFormattedString" title="en/XUL/stringbundle#m-getFormattedString">getFormattedString</a> instead of <em>getString</em> in order to get the localized string. Thanks to this we don't need to have multiple properties, and life is easier for translators. You can read more about it on the <a href="/en/XUL_Tutorial/Property_Files#Text_Formatting" title="en/XUL Tutorial/Property Files#Text Formatting">Text Formatting section</a> of the XUL Tutorial. Also have a look at the <a href="/en/Localization_and_Plurals" title="en/Localization and Plurals">Plurals and Localization</a> article, that covers a localization feature in Firefox that allows you to further refine this last example to handle different types of plural forms that are also language-dependent.</p> +<h3 id="Skin">Skin</h3> +<p>Styling XUL is very similar to styling HTML. We'll look into some of the differences when we cover the XUL Box Model, and other more advanced topics. There isn't much styling you can do to a minimal menu and a very simple alert message, so the Hello World extension only includes an empty CSS file and the compulsory global skin file:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><?xml-stylesheet type=<span class="code-quote">"text/css"</span> href=<span class="code-quote">"chrome:<span class="code-comment">//global/skin/"</span> ?> +</span><?xml-stylesheet type=<span class="code-quote">"text/css"</span> + href=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/skin/browserOverlay.css"</span> ?></span></pre> + </div> +</div> +<p>The global skin CSS file holds the default styles for all XUL elements and windows. Forgetting to include this file in a XUL window usually leads to interesting and often unwanted results. In our case we don't really need to include it, since we're overlaying the main browser XUL file, and that file already includes this global CSS. At any rate it's better to always include it. This way it's harder to make the mistake of not including it. You can enter the chrome path in the location bar and inspect the file if you're curious.</p> +<p>This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.</p> +<h2 id="Exercise">Exercise</h2> +<p>Make the following changes to the example extension:</p> +<ul> + <li>Edit the welcome message that is displayed in the alert window.</li> + <li>Move the Hello World menu to the <em>Tools</em> menu, where it belongs.</li> +</ul> +<p>Repackage the XPI. Issue the following command from within the extension root directory on Linux or Mac OS X:</p> +<pre>zip ../xulschoolhello2.xpi **/* +</pre> +<p>On Windows, use a ZIP tool to compress all files and subdirectories within the extension root directory. Name the file with extension <em>.xpi</em></p> +<p>Re-install the XPI. You can just drag the XPI file to the browser and it will be installed locally.</p> +<p>Test it and verify your changes worked. If you run into problems at installation, it's likely that you didn't reproduce the XPI structure correctly, maybe adding unnecessary folders.</p> +<div class="note"> + <strong>Note:</strong> Packaging an extension is really just creating a ZIP archive of the contents of the main folder, then changing the filename extension to <code>.XPI</code>. Do <strong>not</strong> zip the containing folder, just its contents. The <code>content</code> folder, <code>chrome.manifest</code>, <code>install.rdf</code>, and other files and directories should be at the root level of your archive. If you zip the containing folder, your extension will not load.</div> +<p>Note that the <em>Tools </em>menu is hidden by default on Firefox 4 and above, on Windows and some Linux distributions. Check <em>Menu Bar </em>under the <em>Options </em>menu of the Firefox menu button to enable it.</p> +<p>Once you're done, you can look at this reference solution: <a href="/@api/deki/files/5141/=xulschoolhello2.xpi" title="https://developer.mozilla.org/@api/deki/files/5141/=xulschoolhello2.xpi">Hello World 2</a>.</p> +<p>{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}</p> +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/id/archive/mozilla/xulrunner/index.html b/files/id/archive/mozilla/xulrunner/index.html new file mode 100644 index 0000000000..2bc8fd2c15 --- /dev/null +++ b/files/id/archive/mozilla/xulrunner/index.html @@ -0,0 +1,84 @@ +--- +title: XULRunner +slug: Archive/Mozilla/XULRunner +translation_of: Archive/Mozilla/XULRunner +--- +<div class="callout-box"> + <strong><a href="/en-US/docs/Getting_started_with_XULRunner" title="Getting_started_with_XULRunner">Getting Started with XULRunner</a></strong><br> + A short introduction to XULRunner.</div> +<div> + <span class="seoSummary"><strong>XULRunner</strong> is a Mozilla runtime package that can be used to bootstrap <a href="/en-US/docs/XUL" title="XUL">XUL</a>+<a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> applications that are as rich as Firefox and Thunderbird. It provides mechanisms for installing, upgrading, and uninstalling these applications.</span> XULRunner also provides <code>libxul</code>, a solution which allows the embedding of Mozilla technologies in other projects and products.</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="Releases" name="Releases">Releases</h2> + <div class="note"> + <p>XULRunner can be <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/latest" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/">downloaded from ftp.mozilla.org</a>. Please read the <a class="internal" href="/en-US/docs/XULRunner_1.9.2_Release_Notes" title="XULRunner 1.9.2 Release Notes">release notes</a> for installation, uninstallation, and other information.</p> + <p>Firefox 3 and later ships with a private XULRunner package, which can run any compatible XULRunner application using the <code>-app</code> switch.</p> + <p><a href="/en-US/docs/XULRunner/Old_Releases" title="XULRunner/Old_Releases">Older builds</a> are also available.</p> + </div> + <h2 id="Overview" name="Overview">Overview</h2> + <ul> + <li>{{ interwiki('wikimo', 'XULRunner', 'Development Plan') }}</li> + <li><a href="/en-US/docs/XULRunner/What_XULRunner_Provides" title="XULRunner/What_XULRunner_Provides">What XULRunner Provides</a></li> + <li><a href="/en-US/docs/XULRunner_FAQ" title="XULRunner_FAQ">XULRunner FAQ</a></li> + <li>Nightly builds: <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/nightly/latest-trunk/">unstable-trunk</a></li> + </ul> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + <dl> + <dt> + <a href="/en-US/docs/Getting_started_with_XULRunner" title="Getting_started_with_XULRunner">Getting Started with XULRunner</a></dt> + <dd> + Short tutorial on building desktop applications with XULRunner.</dd> + <dt> + <a href="/en-US/docs/XUL_Tutorial" title="XUL Tutorial">XUL Tutorial</a></dt> + <dd> + Once you have a working XULRunner application, use the XUL tutorial to expand it into a fantastic XUL application.</dd> + <dt> + <a href="/en-US/docs/XULRunner_tips" title="XULRunner_tips">XULRunner tips</a></dt> + <dd> + A collection of tips for working with XULRunner.</dd> + <dt> + <a href="/en-US/docs/XULRunner/Deploying_XULRunner_1.8" title="XULRunner/Deploying_XULRunner_1.8">Deploying XULRunner</a></dt> + <dd> + An introduction on how to package your application with XULRunner.</dd> + <dt> + <a href="/en-US/docs/XULRunner_Hall_of_Fame" title="XULRunner_Hall_of_Fame">XULRunner Hall of Fame</a></dt> + <dd> + Tracks all available applications based on XULRunner.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Build_Instructions" title="Build_Documentation">Build Documentation</a></dt> + <dd> + Learn how to get the source and build it.</dd> + <dt> + <a href="/en-US/docs/Debugging_a_XULRunner_Application" title="Debugging_a_XULRunner_Application">Debug Documentation</a></dt> + <dd> + Steps to configure Venkman to debug your App</dd> + <dt> + <a class="external" href="http://zenit.senecac.on.ca/wiki/index.php/XULRunner_Guide">XULRunner Guide</a></dt> + <dd> + A fairly complete, but outdated, introduction and tutorial for XULRunner which collates much of the documentation found here.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/XULRunner" title="tag/XULRunner">View all...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Community</h2> + <ul> + <li>View Mozilla forums... {{ DiscussionList("dev-platform", "mozilla.dev.platform") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/#xulrunner">#xulrunner on irc.mozilla.org</a></li> + <li><a href="/en-US/docs/XULRunner/Community" title="XULRunner/Community">Other community links...</a></li> + </ul> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2> + <ul> + <li><a href="/en-US/docs/XUL" title="XUL">XUL</a></li> + </ul> + <h2 id="See_also" name="See_also">See also</h2> + <ul> + <li><a class="external" href="http://www.kodewerx.org/wiki/A_Brief_Introduction_To_XULRunner:_Part_1" title="http://www.kodewerx.org/wiki/A_Brief_Introduction_To_XULRunner:_Part_1">A brief introduction to XULRunner</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/id/archive/web/index.html b/files/id/archive/web/index.html new file mode 100644 index 0000000000..1784816dc4 --- /dev/null +++ b/files/id/archive/web/index.html @@ -0,0 +1,15 @@ +--- +title: Arsip dokumentasi Web terbuka +slug: Archive/Web +tags: + - Archived + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Web +--- +<p>{{obsolete_header}}</p> + +<p>Dokumentasi yang tercantum di bawah ini adalah arsip, materi usang tentang topik Web terbuka.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/id/archive/web/standards-compliant_authoring_tools/index.html b/files/id/archive/web/standards-compliant_authoring_tools/index.html new file mode 100644 index 0000000000..2126ebd25c --- /dev/null +++ b/files/id/archive/web/standards-compliant_authoring_tools/index.html @@ -0,0 +1,25 @@ +--- +title: Standards-Compliant Authoring Tools +slug: Archive/Web/Standards-Compliant_Authoring_Tools +translation_of: Archive/Web/Standards-Compliant_Authoring_Tools +--- +<p>Creating cross-browser code upfront will save you lots of time quality testing your web content. The following authoring tools adhere to the W3 standards. If you're using older versions of tools that rely on old browser bugs or generate browser-specific code, it may be time to upgrade:</p> +<ul> + <li><a class="external" href="http://www.nvu.com/">NVu</a> is a standalone editor created from the remains of Mozilla Composer. Currently the work done on NVu is being ported back to mozilla source code.</li> + <li><a class="external" href="http://www.chami.com/html-kit/">HTML-Kit</a> is a full-featured, low priced editor designed to help HTML, XHTML and XML authors to edit, format, lookup help, validate, preview and publish web pages. Validation is done with HTML Tidy, so you can verify standards compliance.</li> + <li><a class="external" href="http://www.macromedia.com/software/dreamweaver/">Macromedia™ Dreamweaver™ CS6</a></li> + <li><a class="external" href="http://www.westciv.com/style_master/">Style Master</a> and <a class="external" href="http://www.westciv.com/layout_master/">Layout Master</a> by Western Civilisation</li> +</ul> +<p>Some caveats: It appears that tools currently available from Namo generate IE-specific or Netscape 4-specific code that may require extra debugging for compatibility with standards-based browsers. Newer versions of Microsoft FrontPage™ have improved, however be sure not to rely on FrontPage-specific extensions for critical website content or functionality. Some versions of Microsoft Word create invalid HTML code that only works with Internet Explorer. Always be sure to <a href="/en-US/docs/Tools/Validators">validate</a> your web pages.</p> +<div class="originaldocinfo"> + <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + <ul> + <li>Last Updated Date: January 30th, 2003</li> + <li>Copyright © 2001-2003 Netscape. All rights reserved.</li> + </ul> +</div> +<h2 id="Related_links" name="Related_links">Related links</h2> +<ul> + <li><a href="/en-US/docs/Tools/Validators">Validators</a></li> + <li><a href="/en-US/docs/HTML">HTML Central</a></li> +</ul> |