You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@netbeans.apache.org by gi...@apache.org on 2020/01/16 17:47:15 UTC
[netbeans-website] branch asf-site updated: Automated site
publishing by Jenkins build 1123
This is an automated email from the ASF dual-hosted git repository.
git-site-role pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/netbeans-website.git
The following commit(s) were added to refs/heads/asf-site by this push:
new 309658e Automated site publishing by Jenkins build 1123
309658e is described below
commit 309658e7987c91143d62bda1ee44e58e0c9baa09
Author: jenkins <bu...@apache.org>
AuthorDate: Thu Jan 16 17:47:10 2020 +0000
Automated site publishing by Jenkins build 1123
---
content/kb/docs/php/ajax-quickstart.html | 175 +++++++---
content/kb/docs/php/ajax-quickstart_ja.html | 180 +++++++---
content/kb/docs/php/ajax-quickstart_pt_BR.html | 232 +++++++++----
content/kb/docs/php/ajax-quickstart_ru.html | 241 +++++++++----
content/kb/docs/php/ajax-quickstart_zh_CN.html | 237 ++++++++++---
content/kb/docs/php/code-templates.html | 231 ++++++++++---
content/kb/docs/php/code-templates_ja.html | 261 ++++++++++----
content/kb/docs/php/code-templates_pt_BR.html | 248 ++++++++++---
content/kb/docs/php/code-templates_ru.html | 242 ++++++++++---
content/kb/docs/php/code-templates_zh_CN.html | 261 ++++++++++----
.../docs/php/configure-php-environment-mac-os.html | 6 +-
.../php/configure-php-environment-mac-os_ja.html | 177 +++++++---
.../configure-php-environment-mac-os_pt_BR.html | 177 +++++++---
.../php/configure-php-environment-mac-os_ru.html | 177 +++++++---
.../configure-php-environment-mac-os_zh_CN.html | 171 +++++++--
.../php/configure-php-environment-ubuntu_ja.html | 127 ++++---
.../configure-php-environment-ubuntu_pt_BR.html | 127 ++++---
.../php/configure-php-environment-ubuntu_ru.html | 127 ++++---
.../configure-php-environment-ubuntu_zh_CN.html | 125 ++++---
.../php/configure-php-environment-windows.html | 8 +-
.../php/configure-php-environment-windows_ja.html | 163 ++++++---
.../configure-php-environment-windows_pt_BR.html | 159 ++++++---
.../php/configure-php-environment-windows_ru.html | 163 ++++++---
.../configure-php-environment-windows_zh_CN.html | 163 ++++++---
content/kb/docs/php/debugging.html | 324 ++++++++++++++---
content/kb/docs/php/debugging_ja.html | 373 ++++++++++++++++----
content/kb/docs/php/debugging_pt_BR.html | 349 +++++++++++++++----
content/kb/docs/php/debugging_ru.html | 355 +++++++++++++++----
content/kb/docs/php/debugging_zh_CN.html | 349 +++++++++++++++----
content/kb/docs/php/phpunit.html | 232 ++++++++++---
content/kb/docs/php/phpunit_ja.html | 255 ++++++++++----
content/kb/docs/php/phpunit_pt_BR.html | 247 ++++++++++---
content/kb/docs/php/phpunit_ru.html | 253 ++++++++++----
content/kb/docs/php/phpunit_zh_CN.html | 229 +++++++++---
content/kb/docs/php/project-setup.html | 2 +-
content/kb/docs/php/project-setup_ja.html | 183 ++++++++--
content/kb/docs/php/project-setup_pt_BR.html | 183 ++++++++--
content/kb/docs/php/project-setup_ru.html | 189 ++++++++--
content/kb/docs/php/project-setup_zh_CN.html | 183 ++++++++--
content/kb/docs/php/quickstart_ja.html | 94 +++--
content/kb/docs/php/quickstart_pt_BR.html | 94 +++--
content/kb/docs/php/quickstart_zh_CN.html | 94 +++--
.../docs/php/remote-hosting-and-ftp-account.html | 92 ++++-
.../php/remote-hosting-and-ftp-account_ja.html | 118 +++++--
.../php/remote-hosting-and-ftp-account_pt_BR.html | 105 +++++-
.../php/remote-hosting-and-ftp-account_ru.html | 105 +++++-
.../php/remote-hosting-and-ftp-account_zh_CN.html | 111 ++++--
content/kb/docs/php/wish-list-lesson1.html | 308 ++++++++++-------
content/kb/docs/php/wish-list-lesson1_ja.html | 260 +++++++++-----
content/kb/docs/php/wish-list-lesson1_pt_BR.html | 268 ++++++++++-----
content/kb/docs/php/wish-list-lesson1_ru.html | 262 +++++++++-----
content/kb/docs/php/wish-list-lesson1_zh_CN.html | 268 ++++++++++-----
content/kb/docs/php/wish-list-lesson2.html | 341 +++++++++++-------
content/kb/docs/php/wish-list-lesson2_ja.html | 379 +++++++++++---------
content/kb/docs/php/wish-list-lesson2_pt_BR.html | 320 +++++++++--------
content/kb/docs/php/wish-list-lesson2_ru.html | 382 ++++++++++++---------
content/kb/docs/php/wish-list-lesson2_zh_CN.html | 349 +++++++++++--------
content/kb/docs/php/wish-list-lesson3.html | 237 ++++++-------
content/kb/docs/php/wish-list-lesson3_ja.html | 209 ++++++-----
content/kb/docs/php/wish-list-lesson3_pt_BR.html | 209 ++++++-----
content/kb/docs/php/wish-list-lesson3_ru.html | 207 ++++++-----
content/kb/docs/php/wish-list-lesson3_zh_CN.html | 207 ++++++-----
62 files changed, 9261 insertions(+), 3642 deletions(-)
diff --git a/content/kb/docs/php/ajax-quickstart.html b/content/kb/docs/php/ajax-quickstart.html
index fb9aa48..152cee3 100644
--- a/content/kb/docs/php/ajax-quickstart.html
+++ b/content/kb/docs/php/ajax-quickstart.html
@@ -248,9 +248,18 @@ If you need to compare your project with a working solution, you can <a href="ht
<p>Choose File > New Project. Under Categories, select <strong>PHP</strong>. Under Projects, select <strong>PHP Application</strong> then click <strong>Next</strong>.</p>
</li>
<li>
-<p>In Step 2: Name and Location, name the project <code>MyAjaxApp</code>. The Sources Folder field enables you to specify the location of the project on your computer. Leave other options at their defaults and click <strong>Next</strong>.
-image::images/php-name-location.png[title="New PHP Project wizard - Name and Location panel"]</p>
+<p>In Step 2: Name and Location, name the project <code>MyAjaxApp</code>. The Sources Folder field enables you to specify the location of the project on your computer. Leave other options at their defaults and click <strong>Next</strong>.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-name-location.png" alt="php name location">
+</div>
+<div class="title">Figure 3. New PHP Project wizard - Name and Location panel</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>In Step 3: Run Configuration, specify how you want to deploy your application. If you have set up your PHP development environment by configuring an <strong>AMP package, you should select *Local Web Site</strong> from the drop-down list, and specify the URL of the project, as it will appear in a browser.</p>
</li>
@@ -259,7 +268,7 @@ image::images/php-name-location.png[title="New PHP Project wizard - Name and Loc
</li>
</ol>
</div>
-<div class="openblock">
+<div class="openblock feature">
<div class="content">
<div class="imageblock left">
<div class="content">
@@ -269,7 +278,7 @@ image::images/php-name-location.png[title="New PHP Project wizard - Name and Loc
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Click <strong>Finish</strong>. The IDE creates the project folder in your file system and the project opens in the IDE.</p>
</li>
@@ -285,10 +294,10 @@ image::images/php-name-location.png[title="New PHP Project wizard - Name and Loc
<div class="content">
<img src="images/php-proj-win.png" alt="php proj win">
</div>
-<div class="title">Figure 3. Projects window displays MyAjaxApp project</div>
+<div class="title">Figure 4. Projects window displays MyAjaxApp project</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Before beginning to code, quickly try running the application to ensure that configuration between the IDE, your server, and browser is set up properly.</p>
</li>
@@ -306,7 +315,7 @@ image::images/php-name-location.png[title="New PHP Project wizard - Name and Loc
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>In the Projects window, right-click on the project node and choose Run. The IDE opens your default browser and displays the Hello World message you just created in <code>index.php</code>.</p>
</li>
@@ -330,7 +339,7 @@ If you have difficulty setting up your project or establishing communication bet
<div class="content">
<img src="images/palette.png" alt="palette">
</div>
-<div class="title">Figure 4. Palette displaying HTML elements</div>
+<div class="title">Figure 5. Palette displaying HTML elements</div>
</div>
<div class="paragraph">
<p>Now that you are certain your environment is set up correctly, begin by developing the auto-complete interface that will be viewed by users. Because the index page that we’ll create does not require any server-side scripting elements, start by creating an HTML page and setting it as the entry point for the application.</p>
@@ -359,7 +368,7 @@ If you have difficulty setting up your project or establishing communication bet
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
@@ -374,7 +383,7 @@ If you have difficulty setting up your project or establishing communication bet
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Add some explanatory text to describe the purpose of the text field. You can copy and paste in the following text at a point just beneath the <code><h1></code> tags:</p>
</li>
@@ -391,7 +400,7 @@ If you have difficulty setting up your project or establishing communication bet
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Add an HTML form to the page. You can do this by making use of the elements listed in the IDE’s Palette. If the Palette is not open, choose Window > Palette from the main menu. Then, under HTML Forms, click on and drag a Form element into the page to a point beneath the <code><p></code> tags that you just added. The Insert Form dialog box opens. Specify the following:</p>
<div class="ulist">
@@ -403,19 +412,24 @@ If you have difficulty setting up your project or establishing communication bet
<p>Method: GET</p>
</li>
<li>
-<p>Name: autofillform
-image::images/php-insert-form.png[title="Insert form dialog"]</p>
+<p>Name: autofillform</p>
</li>
</ul>
</div>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-insert-form.png" alt="php insert form">
+</div>
+<div class="title">Figure 6. Insert form dialog</div>
+</div>
<div class="paragraph">
<p>Click OK. The HTML <code><form></code> tags are inserted into the page containing the attributes you specified. (GET is applied by default, and so is not explicitly declared.)</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Add an HTML table to the page. Under the HTML category in the Palette, click on a Table element and drag it to a point between the <code><form></code> tags. The Insert Table dialog box opens. Specify the following:</p>
<div class="ulist">
@@ -436,12 +450,21 @@ image::images/php-insert-form.png[title="Insert form dialog"]</p>
<p>Cell Spacing: 0</p>
</li>
<li>
-<p>Cell Padding: 5
-image::images/insert-table.png[title="Insert table dialog"]</p>
+<p>Cell Padding: 5</p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-table.png" alt="insert table">
+</div>
+<div class="title">Figure 7. Insert table dialog</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>Right-click inside the Source Editor and choose Format. This tidies up the code. Your form should now display similar to that below:</p>
</li>
@@ -449,7 +472,7 @@ image::images/insert-table.png[title="Insert table dialog"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><form name="autofillform" action="autocomplete.php">
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><form name="autofillform" action="autocomplete.php">
<table border="0" cellpadding="5">
<thead>
<tr>
@@ -472,7 +495,7 @@ image::images/insert-table.png[title="Insert table dialog"]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Within the first row of the table, type the following text into the first column (changes in <strong>bold</strong>):</p>
</li>
@@ -480,11 +503,11 @@ image::images/insert-table.png[title="Insert table dialog"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><td>*<strong>Composer Name:</strong>*</td></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><td>*<strong>Composer Name:</strong>*</td></code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="9">
<li>
<p>Within the second column of the first row, instead of dragging a Text Input field from the Palette, type in the code below manually.</p>
</li>
@@ -492,7 +515,7 @@ image::images/insert-table.png[title="Insert table dialog"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><input type="text"
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><input type="text"
size="40"
id="complete-field"
onkeyup="doCompletion();"></code></pre>
@@ -500,15 +523,33 @@ image::images/insert-table.png[title="Insert table dialog"]</p>
</div>
<div class="paragraph">
<p>When you type, try using the IDE’s built-in code completion support. For example, type in <code><i</code>, then press Ctrl-Space. A list of suggested options displays below your cursor, and a description of the selected element appears in a box above. You can in fact press Ctrl-Space at anytime you are coding in the Source Editor to bring up possible options. Also, if there is only one possible option, pressing Ctrl-Space will automatically complete the element name.
-image::images/code-completion.png[title="Ctrl-Space triggers code completion in the Source Editor"]
-The <code>onkeyup</code> attribute that you typed in above points to a JavaScript function named <code>doCompletion()</code>. This function is called each time a key is pressed in the form text field, and maps to the JavaScript call depicted in the Ajax <a href="#flow-diagram">flow diagram</a> above.
-10. Before moving on to work in the JavaScript editor, make the new <code>index.html</code> file replace the <code>index.php</code> file as the entry point for the application.</p>
+<span class="image"><img src="images/code-completion.png" alt="code completion" title="Ctrl-Space triggers code completion in the Source Editor"></span>
+The <code>onkeyup</code> attribute that you typed in above points to a JavaScript function named <code>doCompletion()</code>. This function is called each time a key is pressed in the form text field, and maps to the JavaScript call depicted in the Ajax <a href="#flow-diagram">flow diagram</a> above.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="10">
+<li>
+<p>Before moving on to work in the JavaScript editor, make the new <code>index.html</code> file replace the <code>index.php</code> file as the entry point for the application.</p>
+</li>
+</ol>
</div>
<div class="paragraph">
-<p>To do so, right-click the project node in the Projects window and choose Properties. Select the <strong>Run Configuration</strong> category, then enter <code>index.html</code> in the Index File field. image::images/php-entry-point.png[title="Specify the application’s entry point in the Project Properties window"]
-11. Click OK to save changes and exit the Project Properties window.
-12. Run the project to see what it looks like in a browser. Click the Run Project ( image::images/run-project-btn.png[] ) button. The <code>index.html</code> file displays in your default browser.
-image::images/index-page.png[title="Run project to view its current state in browser"]</p>
+<p>To do so, right-click the project node in the Projects window and choose Properties. Select the <strong>Run Configuration</strong> category, then enter <code>index.html</code> in the Index File field. <span class="image"><img src="images/php-entry-point.png" alt="php entry point" title="Specify the application’s entry point in the Project Properties window"></span></p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="11">
+<li>
+<p>Click OK to save changes and exit the Project Properties window.</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="12">
+<li>
+<p>Run the project to see what it looks like in a browser. Click the Run Project ( <span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span> ) button. The <code>index.html</code> file displays in your default browser.
+<span class="image"><img src="images/index-page.png" alt="index page" title="Run project to view its current state in browser"></span></p>
+</li>
+</ol>
</div>
</div>
<div class="sect2">
@@ -523,7 +564,7 @@ image::images/index-page.png[title="Run project to view its current state in bro
<div class="content">
<img src="images/php-javascript-options.png" alt="php javascript options">
</div>
-<div class="title">Figure 5. JavaScript Options panel</div>
+<div class="title">Figure 8. JavaScript Options panel</div>
</div>
<div class="paragraph">
<p>The IDE provides out-of-the-box support for Firefox, Internet Explorer, Safari, and Opera. From the JavaScript Options panel, you can also specify the JavaScript engine version that code completion applies to.</p>
@@ -546,7 +587,7 @@ image::images/index-page.png[title="Run project to view its current state in bro
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">var req;
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">var req;
var isIE;
function init() {
@@ -578,7 +619,7 @@ function initRequest() {
<p>The above code performs a simple browser compatibility check for Firefox 3 and Internet Explorer versions 6 and 7). If you would like to incorporate more robust code for compatibility issues, consider using this <a href="http://www.quirksmode.org/js/detect.html">browser detect script</a> from <a href="http://www.quirksmode.org">http://www.quirksmode.org</a>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Switch back to <code>index.html</code> and add a reference to the JavaScript file between the <code><head></code> tags.</p>
</li>
@@ -586,14 +627,14 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><script type="text/javascript" src="javascript.js"></script></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><script type="text/javascript" src="javascript.js"></script></code></pre>
</div>
</div>
<div class="paragraph">
<p>You can quickly toggle between pages opened in the editor by pressing Ctrl-Tab.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Insert a call to <code>init()</code> in the opening <code><body></code> tag.</p>
</li>
@@ -601,7 +642,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><body *onload="init()"*></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><body *onload="init()"*></code></pre>
</div>
</div>
<div class="paragraph">
@@ -641,7 +682,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">var url = "autocomplete.php?action=complete&amp;id=" + escape(completeField.value);</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">var url = "autocomplete.php?action=complete&amp;id=" + escape(completeField.value);</code></pre>
</div>
</div>
<div class="ulist">
@@ -656,7 +697,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">req.open("GET", url, true);</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">req.open("GET", url, true);</code></pre>
</div>
</div>
<div class="paragraph">
@@ -664,7 +705,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">req.onreadystatechange = callback;</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">req.onreadystatechange = callback;</code></pre>
</div>
</div>
<div class="paragraph">
@@ -763,7 +804,7 @@ class ComposerData {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>In the editor, paste in the following code within the class (changes in <strong>bold</strong>).</p>
</li>
@@ -852,11 +893,19 @@ class ComposerData {
<ol class="arabic">
<li>
<p>In the Projects window, click the <code>index.php</code> file node. The file name becomes editable, enabling you to modify the name.
-image::images/edit-file-name.png[title="Click on file nodes to edit names"]</p>
+<span class="image"><img src="images/edit-file-name.png" alt="edit file name" title="Click on file nodes to edit names"></span></p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>Name the file <code>autocomplete</code>, then click Enter. Double-click the new <code>autocomplete.php</code> file to have it display in the editor.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Replace the file’s existing code with the following script.</p>
</li>
@@ -1081,8 +1130,14 @@ The functions and elements that you create in the following steps work interdepe
</div>
</div>
<div class="paragraph">
-<p>This new row, which can be identified as ‘auto-row’, serves as a handle for the JavaScript code in order to insert a new HTML table that will form the auto-complete box.
-2. Open <code>javascript.js</code> in the editor and the following three variables to the top of the file.</p>
+<p>This new row, which can be identified as ‘auto-row’, serves as a handle for the JavaScript code in order to insert a new HTML table that will form the auto-complete box.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Open <code>javascript.js</code> in the editor and the following three variables to the top of the file.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1092,7 +1147,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Add the following lines (in <strong>bold</strong>) to the <code>init()</code> function.</p>
</li>
@@ -1124,7 +1179,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Add <code>appendComposer()</code> to <code>javascript.js</code>.</p>
</li>
@@ -1161,8 +1216,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>This function creates a new table row, inserts a link to a composer into it using the data passed to the function via its three parameters, and inserts the row into the index page’s <code>complete-table</code> element.
-5. Add <code>clearTable()</code> to <code>javascript.js</code>.</p>
+<p>This function creates a new table row, inserts a link to a composer into it using the data passed to the function via its three parameters, and inserts the row into the index page’s <code>complete-table</code> element.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>Add <code>clearTable()</code> to <code>javascript.js</code>.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1177,8 +1238,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>This function sets the display of the <code>complete-table</code> element to 'none', (i.e., makes it invisible), and it removes any existing composer name entries that were created.
-6. Add <code>getElementY()</code> to <code>javascript.js</code>.</p>
+<p>This function sets the display of the <code>complete-table</code> element to 'none', (i.e., makes it invisible), and it removes any existing composer name entries that were created.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
+<li>
+<p>Add <code>getElementY()</code> to <code>javascript.js</code>.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1214,7 +1281,7 @@ See <a href="http://www.quirksmode.org/js/findpos.html">this explanation</a> of
</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Modify the <code>callback()</code> function to call <code>clearTable()</code> each time new data is received from the server. Any composer entries that already exist in the auto-complete box are therefore removed before it becomes populated with new entries.</p>
</li>
@@ -1235,7 +1302,7 @@ See <a href="http://www.quirksmode.org/js/findpos.html">this explanation</a> of
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Add <code>parseMessages()</code> to <code>javascript.js</code>.</p>
</li>
@@ -1294,8 +1361,8 @@ See <a href="http://www.quirksmode.org/js/findpos.html">this explanation</a> of
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Run the project to see what it looks like in a browser. Click the Run Project ( image::images/run-project-btn.png[] ) button. The <code>index.html</code> file displays in your browser.
-image::images/no-css.png[title="Successful deployment without stylesheet"]</p>
+<p>Run the project to see what it looks like in a browser. Click the Run Project ( <span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span> ) button. The <code>index.html</code> file displays in your browser.
+<span class="image"><img src="images/no-css.png" alt="no css" title="Successful deployment without stylesheet"></span></p>
</li>
</ol>
</div>
@@ -1311,7 +1378,7 @@ image::images/no-css.png[title="Successful deployment without stylesheet"]</p>
<p><strong>CSS Preview:</strong> A preview window which, when you place your cursor within a rule, displays sample text rendered according to the declaration block of that rule. (Window > Other > CSS Preview)</p>
</li>
<li>
-<p><strong>Style Rule Editor:</strong> A dialog enabling you to create rules based on classes, ID’s and HTML elements, and set their position in the document hierarchy. (Create Rule ( image::images/style-rule-editor-btn.png[] ) button, located in upper-left region of CSS editor toolbar)</p>
+<p><strong>Style Rule Editor:</strong> A dialog enabling you to create rules based on classes, ID’s and HTML elements, and set their position in the document hierarchy. (Create Rule ( <span class="image"><img src="images/style-rule-editor-btn.png" alt="style rule editor btn"></span> ) button, located in upper-left region of CSS editor toolbar)</p>
</li>
</ul>
</div>
@@ -1407,7 +1474,7 @@ a:hover {
<p>Perform a check on the validity of your CSS code by right-clicking in the CSS Editor and choosing Check CSS. Any errors encountered are displayed in the Output window (Windows > Output).</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Switch to the <code>index.html</code> page in the editor (press Ctrl-Tab), and add a reference to the stylesheet between the <code><head></code> tags.</p>
</li>
@@ -1419,7 +1486,7 @@ a:hover {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Run the application again. The index page displays in the browser using the stylesheet you just created. Each time you type in a character, an asynchronous request is sent to the server, and returned with XML data that has been prepared by <code>autocomplete.php</code>. As you enter more characters, the number of composer names decreases to reflect the new list of matches.</p>
</li>
diff --git a/content/kb/docs/php/ajax-quickstart_ja.html b/content/kb/docs/php/ajax-quickstart_ja.html
index d4bea84..3c40b84 100644
--- a/content/kb/docs/php/ajax-quickstart_ja.html
+++ b/content/kb/docs/php/ajax-quickstart_ja.html
@@ -243,12 +243,25 @@
<p>「ファイル」>「新規プロジェクト」を選択します。「カテゴリ」から「<strong>PHP</strong>」を選択します。「プロジェクト」で「<strong>PHPアプリケーション</strong>」を選択し、「<strong>次</strong>」をクリックします。</p>
</li>
<li>
-<p>ステップ2の「名前と場所」で、プロジェクト名に「<code>MyAjaxApp</code>」と入力します。「ソース・フォルダ」フィールドでコンピュータ上でのプロジェクトの場所を指定できます。他のオプションはデフォルトのままにして、「<strong>次</strong>」をクリックします。
-image::images/php-name-location.png[title="新規PHPプロジェクト・ウィザード - 「名前と場所」パネル"]</p>
+<p>ステップ2の「名前と場所」で、プロジェクト名に「<code>MyAjaxApp</code>」と入力します。「ソース・フォルダ」フィールドでコンピュータ上でのプロジェクトの場所を指定できます。他のオプションはデフォルトのままにして、「<strong>次</strong>」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-name-location.png" alt="php name location">
+</div>
+<div class="title">Figure 4. 新規PHPプロジェクト・ウィザード - 「名前と場所」パネル</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>ステップ3の「実行構成」で、アプリケーションのデプロイ方法を指定します。<strong>AMPパッケージを構成してPHP開発環境を設定した場合は、ドロップダウン・リストから「*ローカルWebサイト</strong>」を選択し、ブラウザに表示するプロジェクトのURLを指定します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>「ファイルをソース・フォルダから別の場所にコピー」オプションを選択します。次に、「フォルダにコピー」フィールドに、サーバー上のデプロイ先のパスを入力します。(Apacheでは、デフォルトの`htdocs`ディレクトリを使用します。)</p>
</li>
@@ -262,7 +275,7 @@ image::images/php-name-location.png[title="新規PHPプロジェクト・ウィ
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>「<strong>終了</strong>」をクリックします。IDEによってプロジェクト・フォルダがファイル・システム内に作成され、プロジェクトがIDEで開きます。</p>
</li>
@@ -278,10 +291,10 @@ image::images/php-name-location.png[title="新規PHPプロジェクト・ウィ
<div class="content">
<img src="images/php-proj-win.png" alt="php proj win">
</div>
-<div class="title">Figure 4. MyAjaxAppプロジェクトが表示された「プロジェクト」ウィンドウ</div>
+<div class="title">Figure 5. MyAjaxAppプロジェクトが表示された「プロジェクト」ウィンドウ</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>コーディングを始める前に、アプリケーションを実行してみて、IDE、サーバー、ブラウザの間の構成が正しく設定されていることを確認します。</p>
</li>
@@ -299,7 +312,7 @@ image::images/php-name-location.png[title="新規PHPプロジェクト・ウィ
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。IDEによってデフォルトのブラウザが開き、`index.php`で作成したメッセージ「Hello World」が表示されます。</p>
</li>
@@ -314,7 +327,7 @@ image::images/php-name-location.png[title="新規PHPプロジェクト・ウィ
<div class="content">
<img src="images/palette.png" alt="palette">
</div>
-<div class="title">Figure 5. HTML要素が表示されたパレット</div>
+<div class="title">Figure 6. HTML要素が表示されたパレット</div>
</div>
<div class="paragraph">
<p>環境が正しく設定されていることを確認したら、まず、ユーザーに表示するオートコンプリート・インタフェースの開発から始めます。作成するインデックス・ページにはサーバー側のスクリプト要素は必要ないため、まずHTMLページを作成し、そのページをアプリケーションのエントリ・ポイントとして設定します。</p>
@@ -343,7 +356,7 @@ image::images/php-name-location.png[title="新規PHPプロジェクト・ウィ
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
@@ -358,7 +371,7 @@ image::images/php-name-location.png[title="新規PHPプロジェクト・ウィ
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>テキスト・フィールドの目的を説明するテキストを追加します。次のテキストをコピーして、`<h1>`タグのすぐ下に貼り付けることもできます。</p>
</li>
@@ -375,7 +388,7 @@ image::images/php-name-location.png[title="新規PHPプロジェクト・ウィ
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>ページにHTMLフォームを追加します。この操作を行うには、IDEのパレットに表示されている要素を使用します。パレットが開いていない場合は、メイン・メニューから「ウィンドウ」>「パレット」を選択します。次に「HTMLフォーム」の下にある「フォーム」要素をクリックし、ページ内に追加した`<p>`タグの下までドラッグします。「挿入フォーム」ダイアログ・ボックスが表示されます。次の値を指定します。</p>
<div class="ulist">
@@ -387,19 +400,24 @@ image::images/php-name-location.png[title="新規PHPプロジェクト・ウィ
<p>メソッド: GET</p>
</li>
<li>
-<p>名前: autofillform
-image::images/php-insert-form.png[title="「挿入フォーム」ダイアログ"]</p>
+<p>名前: autofillform</p>
</li>
</ul>
</div>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-insert-form.png" alt="php insert form">
+</div>
+<div class="title">Figure 7. 「挿入フォーム」ダイアログ</div>
+</div>
<div class="paragraph">
<p>「OK」をクリックします。指定した属性を含むHTMLの`<form>`タグがページに挿入されます。(GETはデフォルトで適用されるので、明示的に宣言しません。)</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>HTML表をページに追加します。パレットの「HTML」カテゴリの下で「表」要素をクリックし、`<form>`タグの間の位置までドラッグします。「挿入表」ダイアログ・ボックスが開きます。次の値を指定します。</p>
<div class="ulist">
@@ -420,12 +438,21 @@ image::images/php-insert-form.png[title="「挿入フォーム」ダイアログ
<p>セルの間隔: 0</p>
</li>
<li>
-<p>セルのパディング: 5
-image::images/insert-table.png[title="「挿入表」ダイアログ"]</p>
+<p>セルのパディング: 5</p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-table.png" alt="insert table">
+</div>
+<div class="title">Figure 8. 「挿入表」ダイアログ</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>ソース・エディタ内を右クリックし、「フォーマット」を選択します。これでコードの体裁が整います。フォームは次のようになります。</p>
</li>
@@ -433,7 +460,7 @@ image::images/insert-table.png[title="「挿入表」ダイアログ"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><form name="autofillform" action="autocomplete.php">
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><form name="autofillform" action="autocomplete.php">
<table border="0" cellpadding="5">
<thead>
<tr>
@@ -456,7 +483,7 @@ image::images/insert-table.png[title="「挿入表」ダイアログ"]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>表の1行目の1列目に次のテキストを入力します(*太字*部分が変更箇所)。</p>
</li>
@@ -464,11 +491,11 @@ image::images/insert-table.png[title="「挿入表」ダイアログ"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><td>*<strong>Composer Name:</strong>*</td></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><td>*<strong>Composer Name:</strong>*</td></code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="9">
<li>
<p>1行目の2列目では、パレットから「テキスト入力」フィールドをドラッグしないで、次のコードを手動で入力します。</p>
</li>
@@ -476,7 +503,7 @@ image::images/insert-table.png[title="「挿入表」ダイアログ"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><input type="text"
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><input type="text"
size="40"
id="complete-field"
onkeyup="doCompletion();"></code></pre>
@@ -484,15 +511,33 @@ image::images/insert-table.png[title="「挿入表」ダイアログ"]</p>
</div>
<div class="paragraph">
<p>入力するときは、IDEに組み込まれているコード補完サポートを使用してみてください。たとえば、「<code><i</code>」と入力して[Ctrl]-[Space]を押します。カーソルの下に候補のリストが表示され、選択されている要素の説明が上のボックスに表示されます。ソース・エディタでコーディングしているときはいつでも[Ctrl]-[Space]を押して候補を表示できます。候補が1つのみの場合は、[Ctrl]-[Space]を押すと要素名が自動的に補完されます。
-image::images/code-completion.png[title="[Ctrl]-[Space]を押してソース・エディタでトリガーされたコード補完"]
-入力した`onkeyup`属性はJavaScript関数`doCompletion()`を指しています。この関数は、フォームのテキスト・フィールド内でキーが押されるたびにコールされ、Ajaxの<a href="#flow-diagram">フロー図</a>に示したJavaScriptコールに対応します。
-10. JavaScriptエディタでの作業に移る前に、アプリケーションのエントリ・ポイントとして`index.php`ファイルを新しい`index.html`ファイルに置き換えます。</p>
+<span class="image"><img src="images/code-completion.png" alt="code completion" title=""[Ctrl"></span>-[Space]を押してソース・エディタでトリガーされたコード補完"]
+入力した`onkeyup`属性はJavaScript関数`doCompletion()`を指しています。この関数は、フォームのテキスト・フィールド内でキーが押されるたびにコールされ、Ajaxの<a href="#flow-diagram">フロー図</a>に示したJavaScriptコールに対応します。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="10">
+<li>
+<p>JavaScriptエディタでの作業に移る前に、アプリケーションのエントリ・ポイントとして`index.php`ファイルを新しい`index.html`ファイルに置き換えます。</p>
+</li>
+</ol>
</div>
<div class="paragraph">
-<p>これを行うには、「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「プロパティ」を選択します。「<strong>実行構成</strong>」カテゴリを選択し、「開始ファイル」フィールドに「<code>index.html</code>」と入力します。image::images/php-entry-point.png[title="「プロジェクト・プロパティ」ウィンドウで、アプリケーションのエントリ・ポイントを指定します。"]
-11. 「OK」をクリックして変更を保存し、「プロジェクト・プロパティ」ウィンドウを終了します。
-12. プロジェクトを実行して、ブラウザでどのように表示されるかを確認します。「プロジェクトの実行」(image::images/run-project-btn.png[])ボタンをクリックします。`index.html`ファイルがデフォルトのブラウザに表示されます。
-image::images/index-page.png[title="プロジェクトを実行してブラウザに現在の状態を表示"]</p>
+<p>これを行うには、「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「プロパティ」を選択します。「<strong>実行構成</strong>」カテゴリを選択し、「開始ファイル」フィールドに「<code>index.html</code>」と入力します。<span class="image"><img src="images/php-entry-point.png" alt="php entry point" title="「プロジェクト・プロパティ」ウィンドウで、アプリケーションのエントリ・ポイントを指定します。"></span></p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="11">
+<li>
+<p>「OK」をクリックして変更を保存し、「プロジェクト・プロパティ」ウィンドウを終了します。</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="12">
+<li>
+<p>プロジェクトを実行して、ブラウザでどのように表示されるかを確認します。「プロジェクトの実行」(<span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span>)ボタンをクリックします。`index.html`ファイルがデフォルトのブラウザに表示されます。
+<span class="image"><img src="images/index-page.png" alt="index page" title="プロジェクトを実行してブラウザに現在の状態を表示"></span></p>
+</li>
+</ol>
</div>
</div>
<div class="sect2">
@@ -507,7 +552,7 @@ image::images/index-page.png[title="プロジェクトを実行してブラウ
<div class="content">
<img src="images/php-javascript-options.png" alt="php javascript options">
</div>
-<div class="title">Figure 6. JavaScriptの「オプション」パネル</div>
+<div class="title">Figure 9. JavaScriptの「オプション」パネル</div>
</div>
<div class="paragraph">
<p>IDEでは、Firefox、Internet Explorer、Safari、およびOperaをデフォルトでサポートしています。JavaScriptの「オプション」パネルでは、コード補完を適用するJavaScriptエンジンのバージョンを指定することもできます。</p>
@@ -530,7 +575,7 @@ image::images/index-page.png[title="プロジェクトを実行してブラウ
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">var req;
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">var req;
var isIE;
function init() {
@@ -562,7 +607,7 @@ function initRequest() {
<p>上のコードは、Firefox 3およびInternet Explorerバージョン6と7の単純なブラウザ互換性チェックを行います。互換性の問題に対してさらに堅牢なコードを取り込むには、<a href="http://www.quirksmode.org">http://www.quirksmode.org</a>の<a href="http://www.quirksmode.org/js/detect.html">ブラウザ検出スクリプト</a>を使用することを検討してください。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p><code>index.html`に戻り、JavaScriptファイルへの参照を</code><head>`タグの間に追加します。</p>
</li>
@@ -570,14 +615,14 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><script type="text/javascript" src="javascript.js"></script></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><script type="text/javascript" src="javascript.js"></script></code></pre>
</div>
</div>
<div class="paragraph">
<p>[Ctrl]-[Tab]を押すと、エディタ内で開いているページを簡単に切り替えることができます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p><code>init()`へのコールを開始</code><body>`タグ内に挿入します。</p>
</li>
@@ -585,7 +630,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><body *onload="init()"*></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><body *onload="init()"*></code></pre>
</div>
</div>
<div class="paragraph">
@@ -625,7 +670,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">var url = "autocomplete.php?action=complete&amp;id=" + escape(completeField.value);</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">var url = "autocomplete.php?action=complete&amp;id=" + escape(completeField.value);</code></pre>
</div>
</div>
<div class="ulist">
@@ -640,7 +685,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">req.open("GET", url, true);</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">req.open("GET", url, true);</code></pre>
</div>
</div>
<div class="paragraph">
@@ -648,7 +693,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">req.onreadystatechange = callback;</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">req.onreadystatechange = callback;</code></pre>
</div>
</div>
<div class="paragraph">
@@ -747,7 +792,7 @@ class ComposerData {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>エディタで、次のコードをクラス内に貼り付けます(変更箇所は*太字*で表示)。</p>
</li>
@@ -835,9 +880,18 @@ class ComposerData {
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>「プロジェクト」ウィンドウで`index.php`ファイル・ノードをクリックします。ファイル名が編集可能になり、名前を変更できるようになります。
-image::images/edit-file-name.png[title="ファイル・ノードをクリックして名前を編集"]</p>
+<p>「プロジェクト」ウィンドウで`index.php`ファイル・ノードをクリックします。ファイル名が編集可能になり、名前を変更できるようになります。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/edit-file-name.png" alt="edit file name">
+</div>
+<div class="title">Figure 10. ファイル・ノードをクリックして名前を編集</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>ファイル名を`autocomplete`にし、[Enter]を押します。新しい`autocomplete.php`ファイルをダブルクリックし、エディタに表示します。</p>
</li>
@@ -1056,8 +1110,14 @@ if(isset($_GET['action']) &amp;&amp; isset($_GET['id']) &amp;&am
</div>
</div>
<div class="paragraph">
-<p>この新しい行は「<code>auto-row</code>」として識別でき、オートコンプリート・ボックスを形成する新しいHTML表を挿入するための、JavaScriptコード用のハンドルの役割を果たします。
-2. `javascript.js`をエディタで開き、次の3つの変数をファイルの先頭に追加します。</p>
+<p>この新しい行は「<code>auto-row</code>」として識別でき、オートコンプリート・ボックスを形成する新しいHTML表を挿入するための、JavaScriptコード用のハンドルの役割を果たします。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>`javascript.js`をエディタで開き、次の3つの変数をファイルの先頭に追加します。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1067,7 +1127,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>次の*太字*の行を`init()`関数に追加します。</p>
</li>
@@ -1099,7 +1159,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>`appendComposer()`を`javascript.js`に追加します。</p>
</li>
@@ -1136,8 +1196,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>この関数は、表の新しい行を作成し、3つのパラメータによって関数に渡されたデータを使用して作曲家へのリンクを挿入してから、行をindexページの`complete-table`要素に挿入します。
-5. `clearTable()`を`javascript.js`に追加します。</p>
+<p>この関数は、表の新しい行を作成し、3つのパラメータによって関数に渡されたデータを使用して作曲家へのリンクを挿入してから、行をindexページの`complete-table`要素に挿入します。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>`clearTable()`を`javascript.js`に追加します。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1152,8 +1218,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>この関数は`complete-table`要素の表示を’none’に設定し(非表示にし)、作成された既存の作曲家の名前エントリを除去します。
-6. `getElementY()`を`javascript.js`に追加します。</p>
+<p>この関数は`complete-table`要素の表示を’none’に設定し(非表示にし)、作成された既存の作曲家の名前エントリを除去します。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
+<li>
+<p>`getElementY()`を`javascript.js`に追加します。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1180,7 +1252,7 @@ var autoRow;</code></pre>
<p>*注意: *<a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a>にある`offset`に関する<a href="http://www.quirksmode.org/js/findpos.html">説明</a>を参照してください。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>`callback()`関数を変更して、サーバーから新しいデータを受け取るたびに`clearTable()`をコールするようにします。オートコンプリート・ボックスに作曲家のエントリがある場合は、新しいエントリが入力される前に除去されます。</p>
</li>
@@ -1201,7 +1273,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>`parseMessages()`を`javascript.js`に追加します。</p>
</li>
@@ -1260,8 +1332,8 @@ var autoRow;</code></pre>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>プロジェクトを実行して、ブラウザでどのように表示されるかを確認します。「プロジェクトの実行」(image::images/run-project-btn.png[])ボタンをクリックします。`index.html`ファイルがブラウザに表示されます。
-image::images/no-css.png[title="スタイル・シートなしでの正常なデプロイメント"]</p>
+<p>プロジェクトを実行して、ブラウザでどのように表示されるかを確認します。「プロジェクトの実行」(<span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span>)ボタンをクリックします。`index.html`ファイルがブラウザに表示されます。
+<span class="image"><img src="images/no-css.png" alt="no css" title="スタイル・シートなしでの正常なデプロイメント"></span></p>
</li>
</ol>
</div>
@@ -1277,7 +1349,7 @@ image::images/no-css.png[title="スタイル・シートなしでの正常なデ
<p><strong>CSSプレビュー:</strong> ルール内にカーソルを置くと、そのルールの宣言ブロックに従ってサンプル・テキストがレンダリングされるプレビュー・ウィンドウです(「ウィンドウ」>「その他」>「CSSプレビュー」)。</p>
</li>
<li>
-<p>*スタイル・ルール・エディタ: *クラス、ID、HTML要素に基づいてルールを作成し、ドキュメント階層における位置を設定できるダイアログです(CSSエディタのツールバーの左上側にある「ルールを作成」(image::images/style-rule-editor-btn.png[])ボタン)。</p>
+<p>*スタイル・ルール・エディタ: *クラス、ID、HTML要素に基づいてルールを作成し、ドキュメント階層における位置を設定できるダイアログです(CSSエディタのツールバーの左上側にある「ルールを作成」(<span class="image"><img src="images/style-rule-editor-btn.png" alt="style rule editor btn"></span>)ボタン)。</p>
</li>
</ul>
</div>
@@ -1373,7 +1445,7 @@ a:hover {
<p>CSSエディタ内を右クリックして「CSSの確認」を選択し、CSSコードの妥当性のチェックを実行します。エラーがあった場合は「出力」ウィンドウ(「ウィンドウ」>「出力」)に表示されます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>エディタで`index.html`ページに切り替え([Ctrl]-[Tab]を押します)、`<head>`タグの間にスタイル・シートへの参照を追加します。</p>
</li>
@@ -1385,7 +1457,7 @@ a:hover {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>アプリケーションをもう一度実行します。インデックス・ページが、作成したスタイル・シートを使用してブラウザに表示されます。文字を入力するたびに非同期のリクエストがサーバーに送信され、`autocomplete.php`によって作成されたXMLデータが返されます。さらに文字を入力すると、新しい一致リストを反映して作曲家の名前の数が減ります。</p>
</li>
diff --git a/content/kb/docs/php/ajax-quickstart_pt_BR.html b/content/kb/docs/php/ajax-quickstart_pt_BR.html
index 37f1ee2..fea300a 100644
--- a/content/kb/docs/php/ajax-quickstart_pt_BR.html
+++ b/content/kb/docs/php/ajax-quickstart_pt_BR.html
@@ -129,12 +129,6 @@
<div class="paragraph">
<p>Ajax significa Asynchronous JavaScript and XML. Na essência, o Ajax é uma forma eficiente de uma aplicação web tratar as interações do usuário com uma página web: uma forma que reduz a necessidade de fazer uma atualização da página ou uma recarga completa da página para cada interação do usuário. Isso permite um comportamento detalhado (semelhante ao de uma aplicação de área de trabalho ou aplicação web com base em plug-in) na utilização de um browser. As interações do Ajax são tratad [...]
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0</div>
-</div>
<div class="paragraph">
<p><strong>Para concluir este tutorial, você precisa dos seguintes recursos e softwares.</strong></p>
</div>
@@ -196,7 +190,7 @@
<div class="content">
<img src="images/sample-app.png" alt="sample app">
</div>
-<div class="title">Figure 2. Aplicação de amostra exibida no browser</div>
+<div class="title">Figure 1. Aplicação de amostra exibida no browser</div>
</div>
<div class="paragraph">
<p>Implementar a funcionalidade autocompletar em um campo de pesquisa é algo que pode ser feito por meio do Ajax. O Ajax funciona com o emprego de um objeto <code>XMLHttpRequest</code> para passar solicitações e respostas assincronamente entre o cliente e o servidor. O diagrama a seguir ilustra o fluxo do processo da comunicação que acontece entre o cliente e o servidor.</p>
@@ -205,7 +199,7 @@
<div class="content">
<img src="images/ajax-process-flow.png" alt="ajax process flow">
</div>
-<div class="title">Figure 3. Diagrama de fluxo de processo do Ajax</div>
+<div class="title">Figure 2. Diagrama de fluxo de processo do Ajax</div>
</div>
<div class="paragraph">
<p>O fluxo de processo do diagrama pode ser descrito pelas seguintes etapas:</p>
@@ -243,18 +237,28 @@
<p>Escolha Arquivo > Novo Projeto. Em Categorias, selecione <strong>PHP</strong>. Em Projetos, selecione <strong>Aplicação PHP</strong> e, em seguida, clique em <strong>Próximo</strong>.</p>
</li>
<li>
-<p>Na etapa 2: Nome e Localização, nomeie o projeto <code>MyAjaxApp</code>. O campo Pasta de Códigos-Fonte permite que você especifique o local do projeto no seu computador. Deixe as outras opções como default e clique em <strong>Próximo</strong>.
-image::images/php-name-location.png[title="Assistente Novo Projeto PHP: painel Nome e Localização"]</p>
+<p>Na etapa 2: Nome e Localização, nomeie o projeto <code>MyAjaxApp</code>. O campo Pasta de Códigos-Fonte permite que você especifique o local do projeto no seu computador. Deixe as outras opções como default e clique em <strong>Próximo</strong>.</p>
</li>
+</ol>
+</div>
+<div class="paragraph">
+<p><span class="image"><img src="images/php-name-location.png" alt="php name location" title="Assistente Novo Projeto PHP: painel Nome e Localização"></span></p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Na etapa 3: Configuração de Execução, especifique como você deseja implantar a aplicação. Se tiver definido o ambiente de desenvolvimento do PHP configurando um pacote <strong>AMP, deverá selecionar *Local Web Site</strong> na lista drop-down e especificar o URL do projeto, como ele aparecerá em um browser.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Selecione a opção Copiar arquivos da Pasta de Códigos-Fonte para outra localização. Em seguida, no campo Copiar para Pasta, digite o caminho para o local de implantação no servidor. (No Apache, é o diretório <code>htdocs</code> default.)</p>
</li>
</ol>
</div>
-<div class="openblock">
+<div class="openblock feature">
<div class="content">
<div class="imageblock left">
<div class="content">
@@ -264,7 +268,7 @@ image::images/php-name-location.png[title="Assistente Novo Projeto PHP: painel N
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Clique em <strong>Finalizar</strong>. O IDE criará a pasta do projeto em seu sistema de arquivos e o projeto será aberto no IDE.</p>
</li>
@@ -280,10 +284,10 @@ image::images/php-name-location.png[title="Assistente Novo Projeto PHP: painel N
<div class="content">
<img src="images/php-proj-win.png" alt="php proj win">
</div>
-<div class="title">Figure 4. A janela Projetos exibe o projeto MyAjaxApp</div>
+<div class="title">Figure 3. A janela Projetos exibe o projeto MyAjaxApp</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Antes de começar a codificar, tente rapidamente executar a aplicação para garantir que a configuração entre o IDE, seu servidor e o browser esteja configurada corretamente.</p>
</li>
@@ -301,14 +305,23 @@ image::images/php-name-location.png[title="Assistente Novo Projeto PHP: painel N
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Executar. O IDE abrirá o browser default e exibirá a mensagem Olá Mundo que você acabou de criar em <code>index.php</code>.</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p><strong>Observação:</strong> se tiver dificuldade em configurar o projeto ou estabelecer comunicação entre o IDE, o servidor e o browser, consulte <a href="project-setup.html">Configurando um Projeto PHP</a> para obter uma descrição mais aprofundada. A <a href="../../trails/php.html">Trilha de Aprendizado do PHP</a> pode oferecer mais informações sobre como configurar o ambiente.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+se tiver dificuldade em configurar o projeto ou estabelecer comunicação entre o IDE, o servidor e o browser, consulte <a href="project-setup.html">Configurando um Projeto PHP</a> para obter uma descrição mais aprofundada. A <a href="../../trails/php.html">Trilha de Aprendizado do PHP</a> pode oferecer mais informações sobre como configurar o ambiente.
+</td>
+</tr>
+</table>
</div>
<div class="sect2">
<h3 id="html">Usando o Editor HTML</h3>
@@ -316,7 +329,7 @@ image::images/php-name-location.png[title="Assistente Novo Projeto PHP: painel N
<div class="content">
<img src="images/palette.png" alt="palette">
</div>
-<div class="title">Figure 5. Paleta que exibe elementos HTML</div>
+<div class="title">Figure 4. Paleta que exibe elementos HTML</div>
</div>
<div class="paragraph">
<p>Agora que você tem certeza de que seu ambiente está configurado corretamente, comece desenvolvendo a interface da funcionalidade autocompletar que será vista pelos usuários. Como a página de índice que criaremos não requer nenhum elemento de script do lado do servidor, comece criando uma página HTML e configurando-a como ponto de entrada da aplicação.</p>
@@ -345,7 +358,7 @@ image::images/php-name-location.png[title="Assistente Novo Projeto PHP: painel N
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
@@ -360,7 +373,7 @@ image::images/php-name-location.png[title="Assistente Novo Projeto PHP: painel N
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Adicione algum texto explicativo para descrever a finalidade do campo de texto. Você pode copiar e colar no texto a seguir, no ponto logo abaixo das tags <code><h1></code>:</p>
</li>
@@ -377,7 +390,7 @@ image::images/php-name-location.png[title="Assistente Novo Projeto PHP: painel N
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Adicione um form HTML à página. Faça isso utilizando os elementos listados na Paleta do IDE. Se a Paleta não estiver aberta, selecione Janela > Paleta no menu principal. Em seguida, em Forms HTML, clique e arraste um elemento Form para a página, um ponto abaixo das tags <code><p></code> que você acabou de adicionar. A caixa de diálogo Inserir Form será aberta. Especifique o seguinte:</p>
<div class="ulist">
@@ -389,19 +402,24 @@ image::images/php-name-location.png[title="Assistente Novo Projeto PHP: painel N
<p>Método: GET</p>
</li>
<li>
-<p>Nome: autofillform
-image::images/php-insert-form.png[title="Caixa de diálogo Inserir form"]</p>
+<p>Nome: autofillform</p>
</li>
</ul>
</div>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-insert-form.png" alt="php insert form">
+</div>
+<div class="title">Figure 5. Caixa de diálogo Inserir form</div>
+</div>
<div class="paragraph">
<p>Clique em OK. As tags HTML <code><form></code> serão inseridas na página que contém os atributos especificados. (GET é aplicado por default e, portanto, não é declarado explicitamente.)</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Adicione uma tabela HTML à página. Na categoria HTML na Paleta, clique em um elemento Tabela e arraste-o para um ponto entre as tags <code><form></code>. A caixa de diálogo Inserir Tabela será aberta. Especifique o seguinte:</p>
<div class="ulist">
@@ -422,12 +440,21 @@ image::images/php-insert-form.png[title="Caixa de diálogo Inserir form"]</p>
<p>Espaçamento da Célula: 0</p>
</li>
<li>
-<p>Preenchimento de Células: 5
-image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]</p>
+<p>Preenchimento de Células: 5</p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-table.png" alt="insert table">
+</div>
+<div class="title">Figure 6. Caixa de diálogo Inserir tabela</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>Clique com o botão direito do mouse no Editor de Código-Fonte e selecione Formatar. Isso limpa o código. Seu form agora deve ser semelhante ao abaixo:</p>
</li>
@@ -435,7 +462,7 @@ image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><form name="autofillform" action="autocomplete.php">
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><form name="autofillform" action="autocomplete.php">
<table border="0" cellpadding="5">
<thead>
<tr>
@@ -458,7 +485,7 @@ image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Na primeira linha da tabela, digite o seguinte texto na primeira coluna (alterações em <strong>negrito</strong>):</p>
</li>
@@ -466,11 +493,11 @@ image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><td>*<strong>Composer Name:</strong>*</td></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><td>*<strong>Composer Name:</strong>*</td></code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="9">
<li>
<p>Na segunda coluna da primeira linha, em vez de arrastar um campo Entrada de Texto da Paleta, digite o código abaixo manualmente.</p>
</li>
@@ -478,7 +505,7 @@ image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><input type="text"
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><input type="text"
size="40"
id="complete-field"
onkeyup="doCompletion();"></code></pre>
@@ -486,15 +513,35 @@ image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]</p>
</div>
<div class="paragraph">
<p>Enquanto digita, tente utilizar o suporte à funcionalidade autocompletar código incorporado do IDE. Por exemplo, digite <code><i</code> e, em seguida, pressione Ctrl-Espaço. Uma lista de opções sugeridas será exibida abaixo do seu cursor e uma descrição do elemento selecionado aparecerá em uma caixa acima. De fato, você pode pressionar Ctrl-Espaço a qualquer momento em que estiver codificando no Editor de Código-Fonte para ter acesso às opções possíveis. Além disso, caso só haja um [...]
-image::images/code-completion.png[title="Ctrl-Espaço aciona a função autocompletar código no Editor de Código-Fonte"]
-O atributo <code>onkeyup</code> que você digitou acima aponta para uma função JavaScript chamada <code>doCompletion()</code>. Essa função é chamada toda vez que uma tecla é pressionada no campo de texto do form, e mapeia para a chamada JavaScript representada no <a href="#flow-diagram">fluxograma</a> do Ajax acima.
-10. Antes de prosseguir para trabalhar no editor JavaScript, faça com que o novo arquivo <code>index.html</code> substitua o arquivo <code>index.php</code> como ponto de entrada da aplicação.</p>
+<span class="image"><img src="images/code-completion.png" alt="code completion" title="Ctrl-Espaço aciona a função autocompletar código no Editor de Código-Fonte"></span>
+O atributo <code>onkeyup</code> que você digitou acima aponta para uma função JavaScript chamada <code>doCompletion()</code>. Essa função é chamada toda vez que uma tecla é pressionada no campo de texto do form, e mapeia para a chamada JavaScript representada no <a href="#flow-diagram">fluxograma</a> do Ajax acima.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="10">
+<li>
+<p>Antes de prosseguir para trabalhar no editor JavaScript, faça com que o novo arquivo <code>index.html</code> substitua o arquivo <code>index.php</code> como ponto de entrada da aplicação.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>Para fazê-lo, clique com o botão direito do mouse no nó do projeto na janela Projetos e selecione Propriedades. Selecione a categoria <strong>Configuração de Execução</strong> e, em seguida, digite <code>index.html</code> no campo Arquivo de Índice. <span class="image"><img src="images/php-entry-point.png" alt="php entry point" title="Especificar o ponto de entrada da aplicação na janela Propriedades do Projeto"></span></p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="11">
+<li>
+<p>Clique em OK para salvar as alterações e sair da janela Propriedades do Projeto.</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="12">
+<li>
+<p>Execute o projeto para ver como ele é em um browser. Clique no botão Executar Projeto (<span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span>). O arquivo <code>index.html</code> será exibido no browser default.</p>
+</li>
+</ol>
</div>
<div class="paragraph">
-<p>Para fazê-lo, clique com o botão direito do mouse no nó do projeto na janela Projetos e selecione Propriedades. Selecione a categoria <strong>Configuração de Execução</strong> e, em seguida, digite <code>index.html</code> no campo Arquivo de Índice. image::images/php-entry-point.png[title="Especificar o ponto de entrada da aplicação na janela Propriedades do Projeto"]
-11. Clique em OK para salvar as alterações e sair da janela Propriedades do Projeto.
-12. Execute o projeto para ver como ele é em um browser. Clique no botão Executar Projeto (image::images/run-project-btn.png[]). O arquivo <code>index.html</code> será exibido no browser default.
-image::images/index-page.png[title="Executar projeto para exibir seu status atual no browser"]</p>
+<p><span class="image"><img src="images/index-page.png" alt="index page" title="Executar projeto para exibir seu status atual no browser"></span></p>
</div>
</div>
<div class="sect2">
@@ -509,7 +556,7 @@ image::images/index-page.png[title="Executar projeto para exibir seu status atua
<div class="content">
<img src="images/php-javascript-options.png" alt="php javascript options">
</div>
-<div class="title">Figure 6. Painel Opções do JavaScript</div>
+<div class="title">Figure 7. Painel Opções do JavaScript</div>
</div>
<div class="paragraph">
<p>O IDE fornece suporte imediato para Firefox, Internet Explorer, Safari e Opera. No painel Opções do JavaScript, você também pode especificar a versão do mecanismo JavaScript à qual a funcionalidade autocompletar código se aplica.</p>
@@ -532,7 +579,7 @@ image::images/index-page.png[title="Executar projeto para exibir seu status atua
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">var req;
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">var req;
var isIE;
function init() {
@@ -564,7 +611,7 @@ function initRequest() {
<p>O código acima executa um verificação simples de compatibilidade do browser para o Firefox 3 e para o Internet Explorer versões 6 e 7). Se desejar incorporar um código mais robusto para problemas de compatibilidade, considere usar este <a href="http://www.quirksmode.org/js/detect.html">script de detecção de browser</a> disponível em <a href="http://www.quirksmode.org">http://www.quirksmode.org</a>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Volte para <code>index.html</code> e adicione uma referência ao arquivo JavaScript entre as tags <code><head></code>.</p>
</li>
@@ -572,14 +619,14 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><script type="text/javascript" src="javascript.js"></script></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><script type="text/javascript" src="javascript.js"></script></code></pre>
</div>
</div>
<div class="paragraph">
<p>Você pode alternar rapidamente entre as páginas abertas no editor pressionando Ctrl-Tab.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Insira uma chamada a <code>init()</code> na tag de abertura <code><body></code>.</p>
</li>
@@ -587,7 +634,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><body *onload="init()"*></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><body *onload="init()"*></code></pre>
</div>
</div>
<div class="paragraph">
@@ -627,7 +674,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">var url = "autocomplete.php?action=complete&amp;id=" + escape(completeField.value);</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">var url = "autocomplete.php?action=complete&amp;id=" + escape(completeField.value);</code></pre>
</div>
</div>
<div class="ulist">
@@ -642,7 +689,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">req.open("GET", url, true);</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">req.open("GET", url, true);</code></pre>
</div>
</div>
<div class="paragraph">
@@ -650,7 +697,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">req.onreadystatechange = callback;</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">req.onreadystatechange = callback;</code></pre>
</div>
</div>
<div class="paragraph">
@@ -749,7 +796,7 @@ class ComposerData {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>No editor, cole no código a seguir dentro da classe (alterações em <strong>negrito</strong>).</p>
</li>
@@ -838,7 +885,7 @@ class ComposerData {
<ol class="arabic">
<li>
<p>Na janela Projetos, clique no nó de arquivo <code>index.php</code>. O nome do arquivo se tornará editável, permitindo modificar o nome.
-image::images/edit-file-name.png[title="Clique nos nós dos arquivos para editar os nomes"]</p>
+<span class="image"><img src="images/edit-file-name.png" alt="edit file name" title="Clique nos nós dos arquivos para editar os nomes"></span></p>
</li>
<li>
<p>Nomeie o arquivo <code>autocomplete</code> e, em seguida, clique em Entrar. Clique duas vezes no novo arquivo <code>autocomplete.php</code> para que ele seja exibido no editor.</p>
@@ -912,8 +959,17 @@ if(isset($_GET['action']) &amp;&amp; isset($_GET['id']) &amp;&am
?></code></pre>
</div>
</div>
-<div class="paragraph">
-<p>*Observação: * o arquivo composerView.php não é descrito neste tutorial. Você pode criar um arquivo para ver o resultado final da pesquisa. Uma amostra do arquivo é incluída na <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FPHP%252FMyAjaxApp.zip">aplicação de amostra</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+o arquivo composerView.php não é descrito neste tutorial. Você pode criar um arquivo para ver o resultado final da pesquisa. Uma amostra do arquivo é incluída na <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FPHP%252FMyAjaxApp.zip">aplicação de amostra</a>.
+</td>
+</tr>
+</table>
</div>
<div class="paragraph">
<p>Como você pode ver, não há nada realmente novo que precise ser aprendido para escrever código no servidor para processamento em Ajax. O tipo de conteúdo da resposta precisa ser definido como <code>text/xml</code> para casos em que você deseje trocar documentos XML. Com o Ajax você também pode trocar texto simples ou até mesmo snippets de JavaScript, que podem ser avaliados ou executados pela função chamada de retorno no cliente. Observe também que alguns browsers podem armazenar no ca [...]
@@ -1038,8 +1094,17 @@ if(isset($_GET['action']) &amp;&amp; isset($_GET['id']) &amp;&am
<div class="paragraph">
<p>A função <code>parseMessages()</code> trata os dados XML de entrada. Fazendo isso, ela conta com várias funções auxiliares, como <code>appendComposer()</code>, <code>getElementY()</code> e <code>clearTable()</code>. Você também deve introduzir novos elementos na página de índice, como uma segunda tabela HTML que serve como a caixa autocompletar, e os IDs dos elementos, para que eles possam ser referenciados em <code>javascript.js</code>. Finalmente, crie novas variáveis que correspond [...]
</div>
-<div class="paragraph">
-<p>*Observação: *As funções e elementos que você cria nas etapas seguintes funcionam de forma interdependente. Recomendamos que você percorra esta seção e, em seguida, examine o código quando tudo estiver no lugar.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+As funções e elementos que você cria nas etapas seguintes funcionam de forma interdependente. Recomendamos que você percorra esta seção e, em seguida, examine o código quando tudo estiver no lugar.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -1058,8 +1123,14 @@ if(isset($_GET['action']) &amp;&amp; isset($_GET['id']) &amp;&am
</div>
</div>
<div class="paragraph">
-<p>Essa nova linha, que pode ser identificada como “auto-row”, funciona como um handler para o código JavaScript cujo objetivo é inserir uma nova tabela HTML que formará a caixa da funcionalidade autocompletar.
-2. Abra <code>javascript.js</code> no editor e as três variáveis a seguir na parte superior do arquivo.</p>
+<p>Essa nova linha, que pode ser identificada como “auto-row”, funciona como um handler para o código JavaScript cujo objetivo é inserir uma nova tabela HTML que formará a caixa da funcionalidade autocompletar.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Abra <code>javascript.js</code> no editor e as três variáveis a seguir na parte superior do arquivo.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1069,7 +1140,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Adicione as seguintes linhas (em <strong>negrito</strong>) na função <code>init()</code>.</p>
</li>
@@ -1101,7 +1172,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Adicione <code>appendComposer()</code> a <code>javascript.js</code>.</p>
</li>
@@ -1138,8 +1209,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Essa função cria uma nova linha da tabela, insere um link em um criador utilizando os dados passados para a função por meio de seus três parâmetros e insere a linha no elemento <code>complete-table</code> da página de índice.
-5. Adicione <code>clearTable()</code> a <code>javascript.js</code>.</p>
+<p>Essa função cria uma nova linha da tabela, insere um link em um criador utilizando os dados passados para a função por meio de seus três parâmetros e insere a linha no elemento <code>complete-table</code> da página de índice.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>Adicione <code>clearTable()</code> a <code>javascript.js</code>.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1154,8 +1231,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Essa função define a exibição do elemento <code>complete-table</code> como "none" (ou seja, o torna invisível) e remove quaisquer entradas de nome de criador existentes que tenham sido criadas.
-6. Adicione <code>getElementY()</code> a <code>javascript.js</code>.</p>
+<p>Essa função define a exibição do elemento <code>complete-table</code> como "none" (ou seja, o torna invisível) e remove quaisquer entradas de nome de criador existentes que tenham sido criadas.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
+<li>
+<p>Adicione <code>getElementY()</code> a <code>javascript.js</code>.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1178,11 +1261,20 @@ var autoRow;</code></pre>
<div class="paragraph">
<p>Essa função é aplicada para localizar a posição vertical do elemento pai. Isso é necessário porque a posição real do elemento, quando ele é exibido, frequentemente depende do tipo e da versão do browser. Note que o elemento <code>complete-table</code>, quando é exibido contendo nomes de criador, é deslocado para o lado direito inferior da tabela em que ele está. O posicionamento correto da altura é determinado por <code>getElementY()</code>.</p>
</div>
-<div class="paragraph">
-<p>*Observação: *Consulte <a href="http://www.quirksmode.org/js/findpos.html">esta explicação</a> de <code>offset</code> em <a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+Consulte <a href="http://www.quirksmode.org/js/findpos.html">esta explicação</a> de <code>offset</code> em <a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a>.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Modifique a função <code>callback()</code> para que chame <code>clearTable()</code> cada vez que novos dados forem recebidos do servidor. Quaisquer entradas do criador que já existam na caixa autocompletar serão, portanto, removidas, antes que esta seja preenchida com novas entradas.</p>
</li>
@@ -1203,7 +1295,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Adicione <code>parseMessages()</code> a <code>javascript.js</code>.</p>
</li>
@@ -1262,8 +1354,8 @@ var autoRow;</code></pre>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Execute o projeto para ver como ele é em um browser. Clique no botão Executar Projeto (image::images/run-project-btn.png[]). O arquivo <code>index.html</code> será exibido no seu browser.
-image::images/no-css.png[title="Implantação com sucesso sem folha de estilo"]</p>
+<p>Execute o projeto para ver como ele é em um browser. Clique no botão Executar Projeto (<span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span>). O arquivo <code>index.html</code> será exibido no seu browser.
+<span class="image"><img src="images/no-css.png" alt="no css" title="Implantação com sucesso sem folha de estilo"></span></p>
</li>
</ol>
</div>
@@ -1279,7 +1371,7 @@ image::images/no-css.png[title="Implantação com sucesso sem folha de estilo"]<
<p><strong>Visualização de CSS:</strong> uma janela de visualização que, quando você coloca o cursor em uma regra, exibe o texto de amostra renderizado de acordo com o bloco de declaração dessa regra. (Janela > Outro > Visualização CSS)</p>
</li>
<li>
-<p><strong>Editor de Regras de Estilo:</strong> uma caixa de diálogo que permite que você crie regras com base em classes, IDs e elementos HTML e que defina sua posição na hierarquia do documento. (Botão Criar Regra ( image::images/style-rule-editor-btn.png[] ), localizado na região esquerda superior da barra de editores do CSS)</p>
+<p><strong>Editor de Regras de Estilo:</strong> uma caixa de diálogo que permite que você crie regras com base em classes, IDs e elementos HTML e que defina sua posição na hierarquia do documento. (Botão Criar Regra ( <span class="image"><img src="images/style-rule-editor-btn.png" alt="style rule editor btn"></span> ), localizado na região esquerda superior da barra de editores do CSS)</p>
</li>
</ul>
</div>
@@ -1375,7 +1467,7 @@ a:hover {
<p>Execute uma verificação da validade do seu código CSS, clicando com o botão direito do mouse no Editor CSS e selecionando Verificar CSS. Quaisquer erros encontrados são exibidos na janela de Saída (Janelas > Saída).</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Alterne para a página <code>index.html</code> no editor (pressione Ctrl-Tab) e adicione uma referência à folha de estilo entre as tags <code><head></code>.</p>
</li>
@@ -1387,7 +1479,7 @@ a:hover {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Execute a aplicação novamente. A página de índice é exibida no browser utilizando a folha de estilo recém-criada. Toda vez que você digita um caractere, uma solicitação assíncrona é enviada para o servidor e retornada com dados XML que foram preparados por <code>autocomplete.php</code>. Conforme você digita mais caracteres, o número de nomes de criador diminui para refletir a nova lista de correspondências.</p>
</li>
diff --git a/content/kb/docs/php/ajax-quickstart_ru.html b/content/kb/docs/php/ajax-quickstart_ru.html
index f1b7f77..37809b5 100644
--- a/content/kb/docs/php/ajax-quickstart_ru.html
+++ b/content/kb/docs/php/ajax-quickstart_ru.html
@@ -243,12 +243,25 @@
<p>Выберите команду "Файл" > "Новый проект". В области "Категории" выберите <strong>PHP</strong>. В области "Проекты" выберите <strong>Приложение PHP</strong> и нажмите кнопку <strong>Далее</strong>.</p>
</li>
<li>
-<p>На втором экране "Имя и местоположение" назовите проект <code>MyAjaxApp</code>. Поле "Папка источников" позволяет определять местоположение проекта в системе. <strong>Для всех остальных параметров примите значения по умолчанию и нажмите кнопку "Далее".</strong>
-image::images/php-name-location.png[title="Мастер создания проектов PHP - панель 'Имя и местоположение'"]</p>
+<p>На втором экране "Имя и местоположение" назовите проект <code>MyAjaxApp</code>. Поле "Папка источников" позволяет определять местоположение проекта в системе. <strong>Для всех остальных параметров примите значения по умолчанию и нажмите кнопку "Далее".</strong></p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-name-location.png" alt="php name location">
+</div>
+<div class="title">Figure 4. Мастер создания проектов PHP - панель 'Имя и местоположение'</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>На третьем экране "Настройки выполнения" укажите способ развертывания приложения. Если среда разработки PHP формировалась путем настройки пакета <strong>AMP, необходимо выбрать в раскрывающемся списке пункт *Локальный веб-сайт</strong> и указать URL-адрес проекта, который должен использоваться в браузере.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Выберите параметр "Скопировать файлы из папки источников в другое расположение". Затем в поле "Скопировать в папку" введите путь к местоположению для развертывания на сервере. На сервере Apache по умолчанию используется каталог <code>htdocs</code>.</p>
</li>
@@ -264,7 +277,7 @@ image::images/php-name-location.png[title="Мастер создания про
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Нажмите кнопку <strong>Готово</strong>. Среда IDE создает папку проекта в файловой системе, после чего этот проект открывается в среде IDE.</p>
</li>
@@ -280,10 +293,10 @@ image::images/php-name-location.png[title="Мастер создания про
<div class="content">
<img src="images/php-proj-win.png" alt="php proj win">
</div>
-<div class="title">Figure 4. В окне 'Проекты' отображается проект MyAjaxApp</div>
+<div class="title">Figure 5. В окне 'Проекты' отображается проект MyAjaxApp</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Перед написанием программы попробуйте запустить приложение в целях проверки правильности настройки взаимосвязи между средой IDE, сервером и браузером.</p>
</li>
@@ -301,14 +314,23 @@ image::images/php-name-location.png[title="Мастер создания про
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>В окне "Проекты" щелкните правой кнопкой мыши узел проекта и выберите команду "Выполнить". В среде IDE открывается браузер по умолчанию, и на экране появляется сообщение "Hello World", только что созданное в <code>index.php</code>.</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p><strong>Примечание.</strong> При возникновении ошибок при настройке проекта или создании соединения между IDE, сервером и браузером более детальное описание см. в разделе <a href="project-setup.html">Настройка проекта PHP</a>. Дополнительные сведения относительно настройки среды содержатся в <a href="../../trails/php.html">учебной карте PHP</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+При возникновении ошибок при настройке проекта или создании соединения между IDE, сервером и браузером более детальное описание см. в разделе <a href="project-setup.html">Настройка проекта PHP</a>. Дополнительные сведения относительно настройки среды содержатся в <a href="../../trails/php.html">учебной карте PHP</a>.
+</td>
+</tr>
+</table>
</div>
<div class="sect2">
<h3 id="html">Работа с редактором HTML</h3>
@@ -316,7 +338,7 @@ image::images/php-name-location.png[title="Мастер создания про
<div class="content">
<img src="images/palette.png" alt="palette">
</div>
-<div class="title">Figure 5. На палитре отображаются элементы HTML</div>
+<div class="title">Figure 6. На палитре отображаются элементы HTML</div>
</div>
<div class="paragraph">
<p>Теперь, после выполнения проверки правильности настройки среды, можно приступить к преобразованию страницы-указателя в интерфейс автозаполнения, который будет отображаться для пользователей. Поскольку для страницы-указателя не требуются сценарии на стороне сервера, начните с создания страницы HTML и установки ее в качестве точки входа приложения.</p>
@@ -345,7 +367,7 @@ image::images/php-name-location.png[title="Мастер создания про
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
@@ -360,7 +382,7 @@ image::images/php-name-location.png[title="Мастер создания про
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Для описания назначения текстового поля следует добавить соответствующий пояснительный текст. Непосредственно под тегами <code><h1></code> можно скопировать и вставить следующий текст:</p>
</li>
@@ -377,7 +399,7 @@ image::images/php-name-location.png[title="Мастер создания про
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Добавьте к странице форму HTML. Для этого можно использовать элементы, содержащиеся в палитре среды IDE. Если палитра не открыта, выберите в главном меню "Окно" > "Палитра". Затем перейдите к узлу "Формы HTML", выберите элемент "Форма" и перетащите его на страницу под только что добавленные теги <code><p></code>. Появится диалоговое окно "Вставить форму". Введите следующее:</p>
<div class="ulist">
@@ -389,19 +411,24 @@ image::images/php-name-location.png[title="Мастер создания про
<p>Method: GET;</p>
</li>
<li>
-<p>Имя: autofillform
-image::images/php-insert-form.png[title="Диалоговое окно 'Вставить форму'"]</p>
+<p>Имя: autofillform</p>
</li>
</ul>
</div>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-insert-form.png" alt="php insert form">
+</div>
+<div class="title">Figure 7. Диалоговое окно 'Вставить форму'</div>
+</div>
<div class="paragraph">
<p>Нажмите кнопку "ОК". Теги HTML <code><form></code> вставляются в страницу, содержащую указанные атрибуты. (Метод GET применяется по умолчанию, и, следовательно, не объявляется явно).</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Добавьте к странице таблицу HTML. В категории палитры "HTML" выберите элемент "Таблица" и перетащите его непосредственно под теги <code><form></code>. Откроется диалоговое окно "Вставить таблицу". Введите следующее:</p>
<div class="ulist">
@@ -422,12 +449,21 @@ image::images/php-insert-form.png[title="Диалоговое окно 'Вста
<p>Интервал между ячейками: 0</p>
</li>
<li>
-<p>Заполнение ячеек: 5
-image::images/insert-table.png[title="Диалоговое окно 'Вставить таблицу'"]</p>
+<p>Заполнение ячеек: 5</p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-table.png" alt="insert table">
+</div>
+<div class="title">Figure 8. Диалоговое окно 'Вставить таблицу'</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>Щелкните правой кнопкой мыши редактор исходного кода и выберите команду "Форматировать". Последует выравнивание кода. Теперь форма должна выглядеть следующим образом:</p>
</li>
@@ -435,7 +471,7 @@ image::images/insert-table.png[title="Диалоговое окно 'Встав
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><form name="autofillform" action="autocomplete.php">
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><form name="autofillform" action="autocomplete.php">
<table border="0" cellpadding="5">
<thead>
<tr>
@@ -458,7 +494,7 @@ image::images/insert-table.png[title="Диалоговое окно 'Встав
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>В первый столбец первой строки таблицы введите следующий текст (изменения выделены <strong>полужирным шрифтом</strong>):</p>
</li>
@@ -466,11 +502,11 @@ image::images/insert-table.png[title="Диалоговое окно 'Встав
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><td>*<strong>Composer Name:</strong>*</td></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><td>*<strong>Composer Name:</strong>*</td></code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="9">
<li>
<p>Во второй столбец первой строки вручную введите указанный ниже код (вместо перетаскивания поля "Ввод текста" из окна "Палитра").</p>
</li>
@@ -478,7 +514,7 @@ image::images/insert-table.png[title="Диалоговое окно 'Встав
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><input type="text"
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><input type="text"
size="40"
id="complete-field"
onkeyup="doCompletion();"></code></pre>
@@ -486,15 +522,38 @@ image::images/insert-table.png[title="Диалоговое окно 'Встав
</div>
<div class="paragraph">
<p>При вводе кода можно использовать встроенную в среду IDE функцию автозавершения кода. Например, введите <code><i</code>, а затем нажмите CTRL+ПРОБЕЛ. Список предлагаемых вариантов выбора отображается под курсором, а в расположенном выше поле появляется описание выбранного элемента. Для получения возможных вариантов выбора при написании кода достаточно в любой момент нажать в редакторе исходного кода сочетание клавиш CTRL+ПРОБЕЛ. Кроме того, при наличии единственного возможного вари [...]
-image::images/code-completion.png[title="Нажатие Ctrl-Space инициирует автозавершение кода в редакторе исходного кода"]
-Атрибут <code>onkeyup</code>, введенный выше, указывает на функцию JavaScript с именем <code>doCompletion()</code>. Эта функция вызывается при каждом нажатии клавиши в текстовом поле формы и соответствует вызову JavaScript на приведенной выше <a href="#flow-diagram">блок-схеме</a> Ajax.
-10. Перед переходом к работе с редактором JavaScript, замените файлом <code>index.html</code> файл <code>index.php</code> в качестве точки входа приложения.</p>
+<span class="image"><img src="images/code-completion.png" alt="code completion" title="Нажатие Ctrl-Space инициирует автозавершение кода в редакторе исходного кода"></span>
+Атрибут <code>onkeyup</code>, введенный выше, указывает на функцию JavaScript с именем <code>doCompletion()</code>. Эта функция вызывается при каждом нажатии клавиши в текстовом поле формы и соответствует вызову JavaScript на приведенной выше <a href="#flow-diagram">блок-схеме</a> Ajax.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="10">
+<li>
+<p>Перед переходом к работе с редактором JavaScript, замените файлом <code>index.html</code> файл <code>index.php</code> в качестве точки входа приложения.</p>
+</li>
+</ol>
</div>
<div class="paragraph">
-<p>Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите команду "Свойства". Выберите категорию <strong>Конфигурация выполнения</strong>, затем введите <code>index.html</code> в поле 'Файл индекса'. image::images/php-entry-point.png[title="Укажите точку входа приложения в окне 'Свойства проекта'"]
-11. Нажмите кнопку "ОК" для подтверждения изменений и закройте окно "Свойства проекта".
-12. Выполните проект и посмотрите, как он выглядит в браузере. Нажмите кнопку 'Запустить проект' ( image::images/run-project-btn.png[] ). Файл <code>index.html</code> открывается в браузере по умолчанию.
-image::images/index-page.png[title="Выполните проект для просмотра его текущего состояния в браузере"]</p>
+<p>Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите команду "Свойства". Выберите категорию <strong>Конфигурация выполнения</strong>, затем введите <code>index.html</code> в поле 'Файл индекса'. <span class="image"><img src="images/php-entry-point.png" alt="php entry point" title="Укажите точку входа приложения в окне 'Свойства проекта'"></span></p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="11">
+<li>
+<p>Нажмите кнопку "ОК" для подтверждения изменений и закройте окно "Свойства проекта".</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="12">
+<li>
+<p>Выполните проект и посмотрите, как он выглядит в браузере. Нажмите кнопку 'Запустить проект' ( <span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span> ). Файл <code>index.html</code> открывается в браузере по умолчанию.</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/index-page.png" alt="index page">
+</div>
+<div class="title">Figure 9. Выполните проект для просмотра его текущего состояния в браузере</div>
</div>
</div>
<div class="sect2">
@@ -509,7 +568,7 @@ image::images/index-page.png[title="Выполните проект для пр
<div class="content">
<img src="images/php-javascript-options.png" alt="php javascript options">
</div>
-<div class="title">Figure 6. Панель 'Параметры' JavaScript</div>
+<div class="title">Figure 10. Панель 'Параметры' JavaScript</div>
</div>
<div class="paragraph">
<p>Среда IDE предоставляет встроенные возможности поддержки для Firefox, Internet Explorer, Safari и Opera. На экране "Параметры JavaScript" можно также указать версию механизма JavaScript, по отношению к которой применяется автозавершение кода.</p>
@@ -532,7 +591,7 @@ image::images/index-page.png[title="Выполните проект для пр
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">var req;
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">var req;
var isIE;
function init() {
@@ -564,7 +623,7 @@ function initRequest() {
<p>С помощью этого кода выполняется простая проверка совместимости веб-браузеров Firefox 3 и Internet Explorer версий 6 и 7). Если требуется добавить более надежный код, устраняющий ошибки совместимости, используйте <a href="http://www.quirksmode.org/js/detect.html">сценарий для определения браузера</a> с веб-сайта <a href="http://www.quirksmode.org">http://www.quirksmode.org</a>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Вернитесь к <code>index.php</code> и добавьте справочную информацию в файл JavaScript между тегами <code><head></code>.</p>
</li>
@@ -572,14 +631,14 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><script type="text/javascript" src="javascript.js"></script></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><script type="text/javascript" src="javascript.js"></script></code></pre>
</div>
</div>
<div class="paragraph">
<p>Для быстрого перехода между страницами, открытыми в редакторе, можно воспользоваться сочетанием клавиш CTRL+TAB.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Вставьте вызов <code>init()</code> после открывающего тега <code><body></code>.</p>
</li>
@@ -587,7 +646,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><body *onload="init()"*></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><body *onload="init()"*></code></pre>
</div>
</div>
<div class="paragraph">
@@ -627,7 +686,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">var url = "autocomplete.php?action=complete&amp;id=" + escape(completeField.value);</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">var url = "autocomplete.php?action=complete&amp;id=" + escape(completeField.value);</code></pre>
</div>
</div>
<div class="ulist">
@@ -642,7 +701,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">req.open("GET", url, true);</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">req.open("GET", url, true);</code></pre>
</div>
</div>
<div class="paragraph">
@@ -650,7 +709,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">req.onreadystatechange = callback;</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">req.onreadystatechange = callback;</code></pre>
</div>
</div>
<div class="paragraph">
@@ -749,7 +808,7 @@ class ComposerData {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Вставьте в класс в редакторе следующий код (изменения выделены <strong>полужирным шрифтом</strong>).</p>
</li>
@@ -837,12 +896,25 @@ class ComposerData {
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>В окне "Проекты" щелкните узел файла <code>index.php</code>. Появляется поле редактирования имени файла.
-image::images/edit-file-name.png[title="Щелкните узлы файлов для редактирования имен"]</p>
+<p>В окне "Проекты" щелкните узел файла <code>index.php</code>. Появляется поле редактирования имени файла.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/edit-file-name.png" alt="edit file name">
+</div>
+<div class="title">Figure 11. Щелкните узлы файлов для редактирования имен</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>Назовите файл <code>autocomplete</code> и нажмите ENTER. Дважды щелкните файл <code>autocomplete.php</code>, чтобы открыть его в редакторе.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Замените код файла на следующий.</p>
</li>
@@ -912,8 +984,17 @@ if(isset($_GET['action']) &amp;&amp; isset($_GET['id']) &amp;&am
?></code></pre>
</div>
</div>
-<div class="paragraph">
-<p>*Примечание. * Файл composerView.php в данном учебном курсе не описывается. Этот файл можно создать для просмотра итоговых результатов поиска. Образец файла включен в <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FPHP%252FMyAjaxApp.zip">образец приложения</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+Файл composerView.php в данном учебном курсе не описывается. Этот файл можно создать для просмотра итоговых результатов поиска. Образец файла включен в <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FPHP%252FMyAjaxApp.zip">образец приложения</a>.
+</td>
+</tr>
+</table>
</div>
<div class="paragraph">
<p>Итак, создание кода на стороне сервера для обработки с использованием Ajax не требует каких-либо новых знаний. Для случаев, когда требуется обмен документами XML, тип содержимого ответа должен иметь значение <code>text/xml</code>. Кроме того, Ajax позволяет осуществлять обмен простыми текстами или даже фрагментами JavaScript, которые могут анализироваться или выполняться с использованием функции обратного вызова на стороне клиента. Обратите внимание на то, что некоторые браузеры могут [...]
@@ -1038,8 +1119,17 @@ if(isset($_GET['action']) &amp;&amp; isset($_GET['id']) &amp;&am
<div class="paragraph">
<p>Функция <code>parseMessages()</code> позволяет выполнять обработку входящих данных XML. При этом, в указанной функции используются несколько вспомогательных функций, например <code>appendComposer()</code>, <code>getElementY()</code> и <code>clearTable()</code>. Кроме того, необходимо ввести новые элементы для страницы-указателя, например, вторую таблицу HTML, которая служит в качестве поля автозавершения, и идентификаторы для элементов, обеспечивающие возможность вызова в <code>javasc [...]
</div>
-<div class="paragraph">
-<p><strong>Примечание.</strong> Функции и элементы, которые создаются в следующих действиях, являются взаимозависимыми. После выполнения рекомендаций, приведенных в этом разделе, необходимо выполнить тщательную проверку реализованного кода.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+Функции и элементы, которые создаются в следующих действиях, являются взаимозависимыми. После выполнения рекомендаций, приведенных в этом разделе, необходимо выполнить тщательную проверку реализованного кода.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -1058,8 +1148,14 @@ if(isset($_GET['action']) &amp;&amp; isset($_GET['id']) &amp;&am
</div>
</div>
<div class="paragraph">
-<p>Эта строка с идентификатором “auto-row” служит меткой для кода JavaScript, который вставляет новую таблицу HTML для формирования окна автозавершения.
-2. Откройте файл <code>javascript.js</code> в редакторе и добавьте к верхнему фрагменту файла следующие переменные.</p>
+<p>Эта строка с идентификатором “auto-row” служит меткой для кода JavaScript, который вставляет новую таблицу HTML для формирования окна автозавершения.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Откройте файл <code>javascript.js</code> в редакторе и добавьте к верхнему фрагменту файла следующие переменные.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1069,7 +1165,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Добавьте следующие строки (выделенные <strong>полужирным шрифтом</strong>) к функции <code>init()</code>.</p>
</li>
@@ -1101,7 +1197,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Добавьте <code>appendComposer()</code> в <code>javascript.js</code>.</p>
</li>
@@ -1138,8 +1234,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Эта функция позволяет создавать новую строку таблицы и вставлять в нее ссылку на композитора с использованием данных, передаваемых в функцию посредством соответствующих трех параметров, а затем вставлять эту строку в элемент <code>complete-table</code> страницы-указателя.
-5. Добавьте <code>clearTable()</code> в <code>javascript.js</code>.</p>
+<p>Эта функция позволяет создавать новую строку таблицы и вставлять в нее ссылку на композитора с использованием данных, передаваемых в функцию посредством соответствующих трех параметров, а затем вставлять эту строку в элемент <code>complete-table</code> страницы-указателя.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>Добавьте <code>clearTable()</code> в <code>javascript.js</code>.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1154,8 +1256,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Эта функция позволяет скрывать элемент <code>complete-table</code> (т.е. делать его невидимым), но не удаляет какие-либо существующие записи имен композиторов, созданные ранее.
-6. Добавьте <code>getElementY()</code> в <code>javascript.js</code>.</p>
+<p>Эта функция позволяет скрывать элемент <code>complete-table</code> (т.е. делать его невидимым), но не удаляет какие-либо существующие записи имен композиторов, созданные ранее.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
+<li>
+<p>Добавьте <code>getElementY()</code> в <code>javascript.js</code>.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1178,11 +1286,20 @@ var autoRow;</code></pre>
<div class="paragraph">
<p>Указанная функция применяется для определения вертикальной позиции исходного элемента. Это является необходимым, поскольку фактическое расположение элемента при его отображении часто зависит от типа и версии браузера. Следует отметить, что при отображении на экране элемент <code>complete-table</code>, содержащий имена композиторов, перемещается в нижнюю правую часть таблицы, в которой он расположен. Правильное расположение по высоте определяется <code>getElementY()</code>.</p>
</div>
-<div class="paragraph">
-<p><strong>Примечание.</strong> См. <a href="http://www.quirksmode.org/js/findpos.html">это описание</a> <code>смещения</code> в <a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+См. <a href="http://www.quirksmode.org/js/findpos.html">это описание</a> <code>смещения</code> в <a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a>.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Для вызова <code>clearTable()</code> при каждом получении данных с сервера можно соответствующим образом изменить функцию <code>callback()</code>. Поэтому любые скомбинированные записи, существующие в окне автозавершения, удаляются до того, как выполняется заполнение новыми записями.</p>
</li>
@@ -1203,7 +1320,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Добавьте <code>parseMessages()</code> в <code>javascript.js</code>.</p>
</li>
@@ -1262,8 +1379,8 @@ var autoRow;</code></pre>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Выполните проект и посмотрите, как он выглядит в браузере. Нажмите кнопку 'Запустить проект' ( image::images/run-project-btn.png[] ). В браузере отображается файл <code>index.html</code>.
-image::images/no-css.png[title="Успешное развертывание без таблицы стилей"]</p>
+<p>Выполните проект и посмотрите, как он выглядит в браузере. Нажмите кнопку 'Запустить проект' ( <span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span> ). В браузере отображается файл <code>index.html</code>.
+<span class="image"><img src="images/no-css.png" alt="no css" title="Успешное развертывание без таблицы стилей"></span></p>
</li>
</ol>
</div>
@@ -1279,7 +1396,7 @@ image::images/no-css.png[title="Успешное развертывание бе
<p>*"Предварительный просмотр CSS": *окно предварительного просмотра, в котором при помещении курсора внутри правила отображается стандартный текст, соответствующий блоку объявления этого правила. ("Окно > Прочие> Предварительный просмотр CSS")</p>
</li>
<li>
-<p>*Редактор правил стиля: *диалоговое окно, позволяющее создавать правила на основе классов, идентификаторов и элементов HTML и определять их положение в иерархии документа. Кнопка ('Создать правило' ( image::images/style-rule-editor-btn.png[] ), расположенная в верхнем левом углу панели инструментов редактора CSS)</p>
+<p>*Редактор правил стиля: *диалоговое окно, позволяющее создавать правила на основе классов, идентификаторов и элементов HTML и определять их положение в иерархии документа. Кнопка ('Создать правило' ( <span class="image"><img src="images/style-rule-editor-btn.png" alt="style rule editor btn"></span> ), расположенная в верхнем левом углу панели инструментов редактора CSS)</p>
</li>
</ul>
</div>
@@ -1375,7 +1492,7 @@ a:hover {
<p>Выполните проверку кода CSS, щелкнув редактор CSS правой кнопкой мыши и выбрав команду "Проверить CSS". В окне "Вывод" можно просмотреть все ошибки ("Окно" > "Вывод").</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Перейдите к странице <code>index.php</code> в редакторе и добавьте справочную информацию в таблицу стилей между тегами <code><head></code>.</p>
</li>
@@ -1387,7 +1504,7 @@ a:hover {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Выполните проект еще раз. В браузере отображается страница-указатель с созданной таблицей стилей. При каждом вводе символа на сервер передается асинхронный запрос, который возвращается с данными XML, подготовленными при помощи <code>AutoCompleteServlet</code>. При вводе последующих символов количество вариантов имен композиторов уменьшается, и на экране появляется новый список соответствий.</p>
</li>
diff --git a/content/kb/docs/php/ajax-quickstart_zh_CN.html b/content/kb/docs/php/ajax-quickstart_zh_CN.html
index 2b47f04..84fd671 100644
--- a/content/kb/docs/php/ajax-quickstart_zh_CN.html
+++ b/content/kb/docs/php/ajax-quickstart_zh_CN.html
@@ -168,9 +168,13 @@
</tr>
</tbody>
</table>
-<div class="paragraph">
-<p><strong>注：</strong></p>
-</div>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
<div class="ulist">
<ul>
<li>
@@ -184,6 +188,10 @@
</li>
</ul>
</div>
+</td>
+</tr>
+</table>
+</div>
</div>
</div>
<div class="sect1">
@@ -243,18 +251,31 @@
<p>选择 "File"（文件）> "New Project"（新建项目）。在 "Categories"（类别）下，选择 <strong>PHP</strong>。在 "Projects"（项目）下，选择 <strong>PHP Application</strong>（PHP 应用程序），然后单击 <strong>Next</strong>（下一步）。</p>
</li>
<li>
-<p>在“步骤 2：Name and Location（名称和位置）”中，将项目命名为 <code>MyAjaxApp</code>。使用 "Sources Folder"（源文件夹）字段可以在计算机上指定项目的位置。将其他选项保留为默认设置，然后单击 <strong>Next</strong>（下一步）。
-image::images/php-name-location.png[title="新建 PHP 项目向导 - "Name and Location"（名称和位置）面板"]</p>
+<p>在“步骤 2：Name and Location（名称和位置）”中，将项目命名为 <code>MyAjaxApp</code>。使用 "Sources Folder"（源文件夹）字段可以在计算机上指定项目的位置。将其他选项保留为默认设置，然后单击 <strong>Next</strong>（下一步）。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-name-location.png" alt="php name location" width="Name and Location"（名称和位置）面板"">
+</div>
+<div class="title">Figure 4. 新建 PHP 项目向导 - </div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>在步骤 3 "Run Configuration"（运行配置）中，指定您要部署应用程序的方式。如果您已通过配置 <strong>AMP 包设置了 PHP 开发环境，则应该从下拉列表中选择 *Local Web Site</strong>（本地 Web 站点），并指定项目的 URL（将显示在浏览器中）。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>选中 "Copy files from Sources Folder to another location"（将源文件夹中的文件复制到其他位置）选项。然后，在 "Copy to Folder "（复制到文件夹）字段中，键入到服务器上部署位置的路径。（在 Apache 上，部署位置是默认的 <code>htdocs</code> 目录。）</p>
</li>
</ol>
</div>
-<div class="openblock">
+<div class="openblock feature">
<div class="content">
<div class="imageblock left">
<div class="content">
@@ -264,7 +285,7 @@ image::images/php-name-location.png[title="新建 PHP 项目向导 - "Name and L
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>单击 <strong>Finish</strong>（完成）。IDE 在您的文件系统中创建项目文件夹，项目在 IDE 中打开。</p>
</li>
@@ -280,10 +301,10 @@ image::images/php-name-location.png[title="新建 PHP 项目向导 - "Name and L
<div class="content">
<img src="images/php-proj-win.png" alt="php proj win" width="Projects"（项目）窗口将显示 MyAjaxApp 项目"">
</div>
-<div class="title">Figure 4. </div>
+<div class="title">Figure 5. </div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>在开始编码前，请立即尝试运行该应用程序以确保正确设置了 IDE、您的服务器和浏览器之间的配置。</p>
</li>
@@ -301,14 +322,23 @@ image::images/php-name-location.png[title="新建 PHP 项目向导 - "Name and L
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>在 "Projects"（项目）窗口中，右键单击项目节点，然后选择 "Run"（运行）。IDE 会打开您的默认浏览器，并显示您刚在 <code>index.php</code> 中创建的 Hello World 消息。</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p>*注：*如果您在设置项目或在 IDE、服务器和浏览器之间建立通信时遇到困难，请参见<a href="project-setup.html">设置 PHP 项目</a>以获取更详细的说明。<a href="../../trails/php.html">PHP 学习资源</a>可以提供有关配置环境的更多信息。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+如果您在设置项目或在 IDE、服务器和浏览器之间建立通信时遇到困难，请参见<a href="project-setup.html">设置 PHP 项目</a>以获取更详细的说明。<a href="../../trails/php.html">PHP 学习资源</a>可以提供有关配置环境的更多信息。
+</td>
+</tr>
+</table>
</div>
<div class="sect2">
<h3 id="html">使用 HTML 编辑器</h3>
@@ -316,7 +346,7 @@ image::images/php-name-location.png[title="新建 PHP 项目向导 - "Name and L
<div class="content">
<img src="images/palette.png" alt="palette" width="Palette"（组件面板）"">
</div>
-<div class="title">Figure 5. 显示 HTML 元素的 </div>
+<div class="title">Figure 6. 显示 HTML 元素的 </div>
</div>
<div class="paragraph">
<p>现在，您已确定正确设置了环境，接下来首先开发由用户查看的自动完成界面。由于我们将创建的索引页不需要任何服务器端脚本元素，因此将先创建一个 HTML 页，并将其设置为应用程序的入口点。</p>
@@ -360,7 +390,7 @@ image::images/php-name-location.png[title="新建 PHP 项目向导 - "Name and L
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>添加一些说明性文本以介绍文本字段的用途。您可以复制以下文本并将其粘贴在 <code><h1></code> 标记下方的某一位置：</p>
</li>
@@ -377,7 +407,7 @@ image::images/php-name-location.png[title="新建 PHP 项目向导 - "Name and L
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>向该页面中添加一个 HTML 窗体。可以利用 IDE "Palette"（组件面板）中列出的元素执行此操作。如果组件面板没有打开，请从主菜单中选择 "Window"（窗口）> "Palette"（组件面板）。然后，在 "HTML Forms"（HTML 窗体）下，单击某个窗体元素，并将其拖至该页面中您刚添加的 <code><p></code> 标记下的某一位置。此时将打开 "Insert Form"（插入窗体）对话框。指定以下内容：</p>
<div class="ulist">
@@ -389,19 +419,24 @@ image::images/php-name-location.png[title="新建 PHP 项目向导 - "Name and L
<p>"Method"（方法）：GET</p>
</li>
<li>
-<p>"Name"（名称）：autofillform
-image::images/php-insert-form.png[title=""Insert form"（插入窗体）对话框"]</p>
+<p>"Name"（名称）：autofillform</p>
</li>
</ul>
</div>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-insert-form.png" alt="php insert form" width="Insert form"（插入窗体）对话框"">
+</div>
+<div class="title">Figure 7. </div>
+</div>
<div class="paragraph">
<p>单击 "OK"（确定）。HTML <code><form></code> 标记已插入到包含您所指定的属性的页面中。（GET 在默认情况下应用，因此没有进行显式声明。）</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>向该页面添加一个 HTML 表格。在 "Palette"（组件面板）中的 "HTML" 类别下，单击某个表格元素，并将其拖至 <code><form></code> 标记之间的位置。"Insert Table"（插入表格）对话框即打开。指定以下内容：</p>
<div class="ulist">
@@ -422,12 +457,21 @@ image::images/php-insert-form.png[title=""Insert form"（插入窗体）对话
<p>"Cell Spacing"（单元格间距）：0</p>
</li>
<li>
-<p>"Cell Padding"（单元格边距）：5
-image::images/insert-table.png[title=""Insert table"（插入表格）对话框"]</p>
+<p>"Cell Padding"（单元格边距）：5</p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-table.png" alt="insert table" width="Insert table"（插入表格）对话框"">
+</div>
+<div class="title">Figure 8. </div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>在源代码编辑器中单击鼠标右键，然后选择 "Format"（格式化代码）。此操作将对代码进行整理。现在，您的窗体应该如下显示：</p>
</li>
@@ -458,7 +502,7 @@ image::images/insert-table.png[title=""Insert table"（插入表格）对话框"
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>将以下文本键入到此表格第一行的第一列中（更改的内容以*粗体*显示）：</p>
</li>
@@ -470,7 +514,7 @@ image::images/insert-table.png[title=""Insert table"（插入表格）对话框"
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="9">
<li>
<p>在第一行的第二列中，手动键入以下代码（而不从 "Palette"（组件面板）中拖动一个文本输入字段）。</p>
</li>
@@ -486,15 +530,38 @@ image::images/insert-table.png[title=""Insert table"（插入表格）对话框"
</div>
<div class="paragraph">
<p>在键入时，请尝试使用 IDE 内置的代码完成支持。例如，键入 <code><i</code>，然后按 Ctrl-空格组合键。建议的选项列表会显示在光标下方，并且选中元素的说明会显示在上方的框中。事实上，在源代码编辑器中编写代码时，可以随时按 Ctrl-空格键调出可能的选项。而且，如果只有一个可用的选项，按 Ctrl-空格键将自动完成元素名称。
-image::images/code-completion.png[title="在源代码编辑器中按 Ctrl-空格键可以触发代码完成"]
-您在上文中键入的 <code>onkeyup</code> 属性指向名为 <code>doCompletion()</code> 的 JavaScript 函数。每次在窗体文本字段中按下一个键时，此函数都会被调用，并映射到以上 Ajax <a href="#flow-diagram">流程图</a>中所描述的 JavaScript 调用。
-10. 在转为使用 JavaScript 编辑器之前，请将应用程序的入口点由 <code>index.php</code> 文件替换为新的 <code>index.html</code> 文件。</p>
+<span class="image"><img src="images/code-completion.png" alt="code completion" title="在源代码编辑器中按 Ctrl-空格键可以触发代码完成"></span>
+您在上文中键入的 <code>onkeyup</code> 属性指向名为 <code>doCompletion()</code> 的 JavaScript 函数。每次在窗体文本字段中按下一个键时，此函数都会被调用，并映射到以上 Ajax <a href="#flow-diagram">流程图</a>中所描述的 JavaScript 调用。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="10">
+<li>
+<p>在转为使用 JavaScript 编辑器之前，请将应用程序的入口点由 <code>index.php</code> 文件替换为新的 <code>index.html</code> 文件。</p>
+</li>
+</ol>
</div>
<div class="paragraph">
-<p>要执行此操作，请右键单击 "Projects"（项目）窗口中的项目节点，然后选择 "Properties"（属性）。选择 <strong>Run Configuration</strong>（运行配置）类别，然后在 "Index File"（索引文件）字段中输入 <code>index.html</code>。image::images/php-entry-point.png[title="在 "Project Properties"（项目属性）窗口中指定应用程序的入口点"]
-11. 单击 "OK"（确定）以保存更改，然后退出 "Project Properties"（项目属性）窗口。
-12. 运行该项目以查看其在浏览器中的外观。单击 "Run Project"（运行项目）(image::images/run-project-btn.png[]) 按钮。在默认浏览器中显示 <code>index.html</code> 文件。
-image::images/index-page.png[title="运行项目以在浏览器中查看其当前状态"]</p>
+<p>要执行此操作，请右键单击 "Projects"（项目）窗口中的项目节点，然后选择 "Properties"（属性）。选择 <strong>Run Configuration</strong>（运行配置）类别，然后在 "Index File"（索引文件）字段中输入 <code>index.html</code>。<span class="image"><img src="images/php-entry-point.png" alt="php entry point" width="Project Properties"（项目属性）窗口中指定应用程序的入口点"" title="在 "></span></p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="11">
+<li>
+<p>单击 "OK"（确定）以保存更改，然后退出 "Project Properties"（项目属性）窗口。</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="12">
+<li>
+<p>运行该项目以查看其在浏览器中的外观。单击 "Run Project"（运行项目）(<span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span>) 按钮。在默认浏览器中显示 <code>index.html</code> 文件。</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/index-page.png" alt="index page">
+</div>
+<div class="title">Figure 9. 运行项目以在浏览器中查看其当前状态</div>
</div>
</div>
<div class="sect2">
@@ -509,7 +576,7 @@ image::images/index-page.png[title="运行项目以在浏览器中查看其当
<div class="content">
<img src="images/php-javascript-options.png" alt="php javascript options" width="JavaScript Options"（JavaScript 选项）面板"">
</div>
-<div class="title">Figure 6. </div>
+<div class="title">Figure 10. </div>
</div>
<div class="paragraph">
<p>IDE 对 Firefox、Internet Explorer、Safari 和 Opera 提供了快捷支持。在 JavaScript 选项面板中，您还可以指定代码完成功能适用的 JavaScript 引擎版本。</p>
@@ -564,7 +631,7 @@ function initRequest() {
<p>以上代码将对 Firefox 3 以及 Internet Explorer 版本 6 和 7 执行简单的浏览器兼容性检查。如果希望包含更多强健的代码以处理兼容性问题，建议您使用 <a href="http://www.quirksmode.org">http://www.quirksmode.org</a> 中的<a href="http://www.quirksmode.org/js/detect.html">浏览器检测脚本</a>。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>切换回 <code>index.html</code>，然后在 <code><head></code> 标记之间添加对 JavaScript 文件的引用。</p>
</li>
@@ -579,7 +646,7 @@ function initRequest() {
<p>您可以按 Ctrl-Tab 组合键在编辑器中打开的页面之间快速切换。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>在开始标记 <code><body></code> 中，插入对 <code>init()</code> 的调用。</p>
</li>
@@ -749,7 +816,7 @@ class ComposerData {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>在编辑器中，将以下代码粘贴到该类（更改内容以*粗体*显示）。</p>
</li>
@@ -837,12 +904,25 @@ class ComposerData {
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>在 "Projects"（项目）窗口中，单击 <code>index.php</code> 文件节点。文件名变为可编辑状态，以便您修改其名称。
-image::images/edit-file-name.png[title="单击文件节点可编辑名称"]</p>
+<p>在 "Projects"（项目）窗口中，单击 <code>index.php</code> 文件节点。文件名变为可编辑状态，以便您修改其名称。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/edit-file-name.png" alt="edit file name">
+</div>
+<div class="title">Figure 11. 单击文件节点可编辑名称</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>将该文件命名为 <code>autocomplete</code>，然后单击 Enter 键。双击新的 <code>autocomplete.php</code> 文件，使其显示在编辑器中。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>将该文件的现有代码替换为以下脚本。</p>
</li>
@@ -912,8 +992,17 @@ if(isset($_GET['action']) &amp;&amp; isset($_GET['id']) &amp;&am
?></code></pre>
</div>
</div>
-<div class="paragraph">
-<p>*注：*本教程中未描述文件 composerView.php。您可以创建这样的文件来查看搜索的最终结果。<a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FPHP%252FMyAjaxApp.zip">样例应用程序</a>中包含了此文件的样例。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+本教程中未描述文件 composerView.php。您可以创建这样的文件来查看搜索的最终结果。<a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FPHP%252FMyAjaxApp.zip">样例应用程序</a>中包含了此文件的样例。
+</td>
+</tr>
+</table>
</div>
<div class="paragraph">
<p>正如您看到的，编写用于进行 Ajax 处理的服务器端的代码时并没有什么真正的新内容要了解。如果希望交换 XML 文档，则需要将响应内容类型设置为 <code>text/xml</code>。通过 Ajax，您还可以交换纯文本，甚至可以交换可在客户端由回调函数计算或执行的 JavaScript 片段。还请注意，有些浏览器可能会缓存结果，因此可能需要将 Cache-Control HTTP 头信息设置为 <code>no-cache</code>。</p>
@@ -1038,8 +1127,17 @@ if(isset($_GET['action']) &amp;&amp; isset($_GET['id']) &amp;&am
<div class="paragraph">
<p><code>parseMessages()</code> 函数用于处理传入的 XML 数据。为了实现此功能，它需要依靠若干附属的函数，如 <code>appendComposer()</code>、<code>getElementY()</code> 和 <code>clearTable()</code>。您还必须向此索引页引入新的元素（如用作自动完成框的另一个 HTML 表格），以及元素的 ID，以便它们可以在 <code>javascript.js</code> 中引用。最后，创建对应于 <code>index.php</code> 中元素 ID 的新变量，并且在之前实现的 <code>init()</code> 函数中对其进行初始化，然后添加每次加载 <code>index.php</code> 时所需要的一些功能。</p>
</div>
-<div class="paragraph">
-<p>*注：*您在以下步骤中创建的函数和元素之间存在相互依赖关系。建议您完成此部分，然后在代码全部完成之后检查此代码。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+您在以下步骤中创建的函数和元素之间存在相互依赖关系。建议您完成此部分，然后在代码全部完成之后检查此代码。
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -1058,8 +1156,14 @@ if(isset($_GET['action']) &amp;&amp; isset($_GET['id']) &amp;&am
</div>
</div>
<div class="paragraph">
-<p>此新行（可以标识为 “auto-row”）用作 JavaScript 代码的处理程序，以便插入一个新 HTML 表，该表将形成自动完成框。
-2. 在编辑器中打开 <code>javascript.js</code>，并在文件顶部添加以下三个变量。</p>
+<p>此新行（可以标识为 “auto-row”）用作 JavaScript 代码的处理程序，以便插入一个新 HTML 表，该表将形成自动完成框。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>在编辑器中打开 <code>javascript.js</code>，并在文件顶部添加以下三个变量。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1069,7 +1173,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>将以下行（以*粗体*显示）添加到 <code>init()</code> 函数中。</p>
</li>
@@ -1101,7 +1205,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>将 <code>appendComposer()</code> 添加到 <code>javascript.js</code>。</p>
</li>
@@ -1138,8 +1242,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>此函数创建了一个新的表行，并用其所含的三个参数传递的数据将指向作曲家的链接插入此表行中，然后将此行插入索引页的 <code>complete-table</code> 元素中。
-5. 将 <code>clearTable()</code> 添加到 <code>javascript.js</code>。</p>
+<p>此函数创建了一个新的表行，并用其所含的三个参数传递的数据将指向作曲家的链接插入此表行中，然后将此行插入索引页的 <code>complete-table</code> 元素中。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>将 <code>clearTable()</code> 添加到 <code>javascript.js</code>。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1154,8 +1264,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>此函数用于将 <code>complete-table</code> 元素的显示方式设置为 "none"（无）（也就是使其不可见），并删除所有已创建的现有作曲家名字条目。
-6. 将 <code>getElementY()</code> 添加到 <code>javascript.js</code>。</p>
+<p>此函数用于将 <code>complete-table</code> 元素的显示方式设置为 "none"（无）（也就是使其不可见），并删除所有已创建的现有作曲家名字条目。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
+<li>
+<p>将 <code>getElementY()</code> 添加到 <code>javascript.js</code>。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1178,11 +1294,20 @@ var autoRow;</code></pre>
<div class="paragraph">
<p>此函数用于查找父元素的垂直位置。这是必要的，因为此元素的实际位置（如果显示）通常根据浏览器的类型和版本而定。请注意，如果 <code>complete-table</code> 元素显示包含作曲家名字，则会移动到其所在表格中的右下角。正确的高度定位由 <code>getElementY()</code> 确定。</p>
</div>
-<div class="paragraph">
-<p>*注：*请在 <a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a> 上查看 <code>offset</code> 的<a href="http://www.quirksmode.org/js/findpos.html">说明</a>。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+请在 <a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a> 上查看 <code>offset</code> 的<a href="http://www.quirksmode.org/js/findpos.html">说明</a>。
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>修改 <code>callback()</code> 函数以便每次从服务器接收到新数据时都调用 <code>clearTable()</code>。因此，在用新条目填充自动完成框之前其中已存在的任何作曲家条目均会删除。</p>
</li>
@@ -1203,7 +1328,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>将 <code>parseMessages()</code> 添加到 <code>javascript.js</code>。</p>
</li>
@@ -1262,8 +1387,8 @@ var autoRow;</code></pre>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>运行该项目以查看其在浏览器中的外观。单击 "Run Project"（运行项目）(image::images/run-project-btn.png[]) 按钮。在浏览器中显示 <code>index.html</code> 文件。
-image::images/no-css.png[title="不带样式表的成功部署"]</p>
+<p>运行该项目以查看其在浏览器中的外观。单击 "Run Project"（运行项目）(<span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span>) 按钮。在浏览器中显示 <code>index.html</code> 文件。
+<span class="image"><img src="images/no-css.png" alt="no css" title="不带样式表的成功部署"></span></p>
</li>
</ol>
</div>
@@ -1279,7 +1404,7 @@ image::images/no-css.png[title="不带样式表的成功部署"]</p>
<p>*CSS 预览：*如果您将光标置于某个规则中，此预览窗口就会显示根据此规则的声明块所呈现的样例文本。（"Window"（窗口）> "Other"（其他）> "CSS Preview"（CSS 预览））</p>
</li>
<li>
-<p>*样式规则编辑器：*通过此对话框，您可以基于类、ID 和 HTML 元素创建规则，并在文档分层结构中设置其位置。（位于 CSS 编辑器工具栏左上角区域的 "Create Rule"（创建规则）(image::images/style-rule-editor-btn.png[]) 按钮）</p>
+<p>*样式规则编辑器：*通过此对话框，您可以基于类、ID 和 HTML 元素创建规则，并在文档分层结构中设置其位置。（位于 CSS 编辑器工具栏左上角区域的 "Create Rule"（创建规则）(<span class="image"><img src="images/style-rule-editor-btn.png" alt="style rule editor btn"></span>) 按钮）</p>
</li>
</ul>
</div>
@@ -1375,7 +1500,7 @@ a:hover {
<p>对 CSS 代码的有效性执行检查，方法是右键单击 CSS 编辑器，然后选择 "Check CSS"（检查 CSS）。遇到的任何错误都会显示在 "Output"（输出）窗口中（"Windows"（窗口）> "Output"（输出））。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>切换到编辑器中的 <code>index.html</code> 页（按 Ctrl-Tab 组合键），然后在 <code><head></code> 标记之间添加对样式表的引用。</p>
</li>
@@ -1387,7 +1512,7 @@ a:hover {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>再次运行应用程序。将使用您刚创建的样式表在浏览器中显示索引页。每次您键入字符时，都会向服务器发送异步请求，并返回 <code>autocomplete.php</code> 准备好的 XML 数据。随着您输入的字符增多，为了反映匹配项的新列表，作曲家名字的数量会越来越少。</p>
</li>
diff --git a/content/kb/docs/php/code-templates.html b/content/kb/docs/php/code-templates.html
index 25fed64..d292084 100644
--- a/content/kb/docs/php/code-templates.html
+++ b/content/kb/docs/php/code-templates.html
@@ -219,14 +219,23 @@ The syntax of the new class ( <code>cls</code> ) code template is explored in th
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>The placeholder class name ( <code><strong>class_name</strong></code> ) is selected automatically. You can move between placeholders by pressing Tab. You can immediately type the name you want for the class and this name overwrites the placeholder. Press Enter when you are done and the IDE selects the name of the first function, which in this case is the constructor.</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p>*Note: *Placeholder names are discussed in more detail in the <a href="#placeholder">Placeholder name section</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+Placeholder names are discussed in more detail in the <a href="#placeholder">Placeholder name section</a>.
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -234,7 +243,7 @@ The syntax of the new class ( <code>cls</code> ) code template is explored in th
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Edit the function name or accept the default. Press Enter again, and the cursor moves to the inside of the function’s body. In a real world scenario, you would now start coding the function and the rest of the class.</p>
</li>
@@ -263,16 +272,36 @@ The syntax of the new class ( <code>cls</code> ) code template is explored in th
<p>Wait for the code completion dialog to open.</p>
</li>
<li>
-<p>Locate the new class template, which is listed with its abbreviation ( <code>cls</code> ). The PHPDoc frame shows the expanded template.
-image::images/insert-template-with-cc.png[]</p>
+<p>Locate the new class template, which is listed with its abbreviation ( <code>cls</code> ). The PHPDoc frame shows the expanded template.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-template-with-cc.png" alt="insert template with cc">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Select the new class template and press Enter. The IDE inserts it into your code.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>The placeholder class name ( <code><strong>class_name</strong></code> ) is selected automatically. You can move between placeholders by pressing Tab. You can immediately type the name you want for the class and this name overwrites the placeholder. Press Enter when you are done and the IDE selects the name of the first function, which in this case is the constructor.
-image::images/select-constructor-name.png[]</p>
+<p>The placeholder class name ( <code><strong>class_name</strong></code> ) is selected automatically. You can move between placeholders by pressing Tab. You can immediately type the name you want for the class and this name overwrites the placeholder. Press Enter when you are done and the IDE selects the name of the first function, which in this case is the constructor.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/select-constructor-name.png" alt="select constructor name">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Edit the function name or accept the default. Press Enter again, and the cursor moves to the inside of the function’s body. In a real world scenario, you would now start coding the function and the rest of the class.</p>
</li>
@@ -318,7 +347,7 @@ image::images/select-constructor-name.png[]</p>
<p>In addition, you can <a href="#create">create a new template</a> that can surround code if the template includes the <code>allowSurround</code> <a href="#complex">parameter hint</a>. (Hat tip to the <a href="http://www.mybelovedphp.com/2012/05/14/tips-for-using-the-netbeans-editor-for-kohana-and-kostache-mustache-templates-using-surround-with/">+ My Beloved PHP blog+</a>.)</p>
</div>
<div class="paragraph">
-<p>To surround code with a template, select the code and open the Surround with…​ dialog. To open the Surround with…​ dialog, either press Alt-Enter or click the Hint image::images/hint-icon.png[] icon.</p>
+<p>To surround code with a template, select the code and open the Surround with…​ dialog. To open the Surround with…​ dialog, either press Alt-Enter or click the Hint <span class="image"><img src="images/hint-icon.png" alt="hint icon"></span> icon.</p>
</div>
<div class="paragraph">
<p><strong>To surround code with an if(true) template:</strong></p>
@@ -332,34 +361,74 @@ image::images/select-constructor-name.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-php" data-lang="php"><?php$a = false;$b = 10;?></code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php"><?php
+ $a = false;
+ $b = 10;?
+></code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
-<p>Select the line <code>$b = 10;</code>
-image::images/selected-variable.png[]</p>
+<p>Select the line <code>$b = 10;</code></p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/selected-variable.png" alt="selected variable">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>Click the Hint image::images/hint-icon.png[] icon or press Alt-Enter. The Surround with…​ dialog opens.
-image::images/surround-hint.png[]</p>
+<p>Click the Hint image::images/hint-icon.png[] icon or press Alt-Enter. The Surround with…​ dialog opens.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/surround-hint.png" alt="surround hint">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>Click <code> Surround with if{<strong>true</strong>){…​</code>
-image::images/surround-if-true.png[]</p>
+<p>Click <code> Surround with if{<strong>true</strong>){…​</code></p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/surround-if-true.png" alt="surround if true">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>The IDE surrounds the line <code>$b = 10;</code> with an <code>if(<strong>true</strong>){…​ </code> template.
-image::images/inserted-if-true.png[]</p>
+<p>The IDE surrounds the line <code>$b = 10;</code> with an <code>if(<strong>true</strong>){…​ </code> template.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/inserted-if-true.png" alt="inserted if true">
+</div>
+</div>
<div class="paragraph">
<p>The IDE automatically inserts the nearest preceding suitable variable as the <code>if</code> statement’s condition. In this case, that variable is <code>$a</code> , because <code>$a</code> is a boolean and the <code>if(<strong>true</strong>){} </code> statement takes a boolean variable as its condition. Furthermore, the condition is automatically selected for editing, in case the variable that the IDE inserts into the condition is not the correct variable. This means you c [...]
</div>
-<div class="paragraph">
-<p><strong>Note: *The <code>if(*true</strong>){}</code> template is described in detail in the section <a href="#complex">Parameter defined by hints</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+The <code>if(<strong>true</strong>){}</code> template is described in detail in the section <a href="#complex">Parameter defined by hints</a>.
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -371,7 +440,12 @@ image::images/inserted-if-true.png[]</p>
</div>
<div class="imageblock">
<div class="content">
-<img src="images/cursor-after-not-editing.png" alt="]image::images/cursor-after-editing.png[">
+<img src="images/cursor-after-not-editing.png" alt="cursor after not editing">
+</div>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/cursor-after-editing.png" alt="cursor after editing">
</div>
</div>
<div class="paragraph">
@@ -391,15 +465,27 @@ image::images/inserted-if-true.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>In an empty PHP block, type <code>for</code> and press Ctrl-Space to open code completion. Select the iteration template (abbreviation <code>iter</code> ) and press Enter. A new iteration is inserted into your code.
-image::images/iter-cc.png[]</p>
+<p>In an empty PHP block, type <code>for</code> and press Ctrl-Space to open code completion. Select the iteration template (abbreviation <code>iter</code> ) and press Enter. A new iteration is inserted into your code.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/iter-cc.png" alt="iter cc">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>The iteration has two variables as parameters, <code>$index</code> and <code>$array</code> . <code>$index</code> is selected automatically for editing. (Pressing Tab moves between parameters.)
-image::images/iteration1.png[]</p>
+<p>The iteration has two variables as parameters, <code>$index</code> and <code>$array</code> . <code>$index</code> is selected automatically for editing. (Pressing Tab moves between parameters.)</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/iteration1.png" alt="iteration1">
+</div>
+</div>
<div class="paragraph">
<p>Type <code>i</code> . All three instances of <code>$index</code> change to <code>$i</code> .</p>
</div>
@@ -409,10 +495,14 @@ image::images/iteration1.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Press Enter or Tab. The parameter <code>$array</code> is selected.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Press Enter. The cursor enters the method body of the iteration.</p>
</li>
@@ -428,7 +518,7 @@ image::images/iteration1.png[]</p>
<p><strong>To associate a variable in a template with the correct method:</strong></p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="1">
<li>
<p>In an empty PHP block, type the follwing code:</p>
</li>
@@ -436,15 +526,24 @@ image::images/iteration1.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-php" data-lang="php"><?php$arr = array(new ArrayIterator($array()), new ArrayObject($array()));?></code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php"><?php
+ $arr = array(new ArrayIterator($array()), new ArrayObject($array()));?></code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
-<p>After the line declaring the <code>$arr</code> array, type <code>fore</code> and use code completion to insert the <code> foreach</code> template (abbreviation: <code>fore</code> ).
-image::images/cc-foreach.png[]</p>
+<p>After the line declaring the <code>$arr</code> array, type <code>fore</code> and use code completion to insert the <code> foreach</code> template (abbreviation: <code>fore</code> ).</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/cc-foreach.png" alt="cc foreach">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Place the cursor in the body of the <code>foreach</code> function (you can press Enter twice to move the cursor there) and type <code>$value</code> , or only type <code>$</code> and select <code>$value</code> from code completion.</p>
</li>
@@ -452,17 +551,23 @@ image::images/cc-foreach.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-php" data-lang="php"><?php$arr = array(new ArrayIterator($array()), new ArrayObject($array()));foreach ($arr as $value) {$value}?></code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php"><?php
+ $arr = array(new ArrayIterator($array()), new ArrayObject($array()));
+ foreach ($arr as $value) {$value}?></code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
-<p>After <code>$value</code> , type <code>→</code> . Code completion offers you the correct methods for the <code>$value</code> variable, which is derived from the array <code>$arr</code> .
-image::images/value-method-cc.png[]</p>
+<p>After <code>$value</code> , type <code>→</code> . Code completion offers you the correct methods for the <code>$value</code> variable, which is derived from the array <code>$arr</code> .</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/value-method-cc.png" alt="value method cc">
+</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -542,7 +647,8 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">class ${ClassName} {function ${__construct} {${selection}${cursor}}}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">class ${ClassName} {
+ function ${__construct} {${selection}${cursor}}}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -561,7 +667,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">${PARAMETER_NAME hint1[=value] [hint2...hint n]}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">${PARAMETER_NAME hint1[=value] [hint2...hint n]}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -569,7 +675,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">$$${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$$${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">$$${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$$${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -577,7 +683,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">if (${CONDITION variableFromPreviousAssignment instanceof="boolean" default="true"}) {${selection}${cursor}}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">if (${CONDITION variableFromPreviousAssignment instanceof="boolean" default="true"}) {${selection}${cursor}}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -663,20 +769,45 @@ image::images/value-method-cc.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Open Tools > Options (NetBeans > Preferences on Mac), select the Editor features, and select the Code Templates tab.
-image::images/code-template-options.png[]</p>
+<p>Open Tools > Options (NetBeans > Preferences on Mac), select the Editor features, and select the Code Templates tab.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-template-options.png" alt="code template options">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>Click New to open the New Code Template dialog box. Type in the abbreviation you want for the template and click OK.
-image::images/new-abb.png[]</p>
+<p>Click New to open the New Code Template dialog box. Type in the abbreviation you want for the template and click OK.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-abb.png" alt="new abb">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>A new row is added to the table of code templates. This row contains only the abbreviation you provided. The cursor is in the Expanded Text tab, where the IDE placed the cursor automatically. You can begin typing the template’s code immediately.</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p>*Note: *To learn about the syntax of the code template’s expanded text, see the section <a href="#syntax">PHP Code Template Syntax.</a></p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+To learn about the syntax of the code template’s expanded text, see the section <a href="#syntax">PHP Code Template Syntax.</a>
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -753,7 +884,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Expanded text:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">defined('_JEXEC')or die('Restricted access');${cursor}
----</p></td>
@@ -791,7 +922,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Expanded text:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}
----</p></td>
@@ -829,7 +960,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Expanded text:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">public function ${functionName}Action () {${selection}${cursor} }
----</p></td>
@@ -864,7 +995,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Expanded text:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">${ELEMENT newVarName default="element"} = new Zend_Form_Element_Submit('submit', array('label' => 'Send data to server')); this→addElement($$${ELEMENT}); ${cursor}
----</p></td>
diff --git a/content/kb/docs/php/code-templates_ja.html b/content/kb/docs/php/code-templates_ja.html
index 0d36d32..62f7490 100644
--- a/content/kb/docs/php/code-templates_ja.html
+++ b/content/kb/docs/php/code-templates_ja.html
@@ -130,12 +130,6 @@
<div class="paragraph">
<p>コード・テンプレートは、NetBeans IDEによって提供される記述済のコード・スニペットです。コード補完を使用するか、またはテンプレートの省略名に続けて[Tab]キーを押すことによって、スニペットを自分のコードに貼り付けることができます。適切なPHPスニペットでコードを囲むこともできます。さらに、独自のコード・テンプレートも定義できます。このチュートリアルでは、コード・テンプレートの使用方法を解説し、独自のコード・スニペットを定義するために役立つケースを紹介します。</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます</div>
-</div>
<div class="paragraph">
<p><strong>このチュートリアルを完了するには、次のソフトウェアとリソースが必要です。</strong></p>
</div>
@@ -180,8 +174,17 @@
<div class="paragraph">
<p>このイメージでは、新規クラス( <code>cls</code> )コード・テンプレートが選択され、「展開されるテキスト」タブにはテンプレートが展開されたときの内容が表示されています。次の項では、Tab機能を使用してコード内でこのテンプレートを展開します。</p>
</div>
-<div class="paragraph">
-<p><strong>注意:</strong> 新規クラス( <code>cls</code> )コード・テンプレートの構文については、<a href="#syntax">PHPコード・テンプレートの構文</a>の項で説明します。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+新規クラス( <code>cls</code> )コード・テンプレートの構文については、<a href="#syntax">PHPコード・テンプレートの構文</a>の項で説明します。
+</td>
+</tr>
+</table>
</div>
</div>
</div>
@@ -236,8 +239,17 @@
</li>
</ol>
</div>
-<div class="paragraph">
-<p><strong>注意:</strong> 省略名のスペルを間違えないようにしてください。省略名のスペルが間違っていると展開は機能しません。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+省略名のスペルを間違えないようにしてください。省略名のスペルが間違っていると展開は機能しません。
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -245,14 +257,23 @@
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>プレースホルダのクラス名( <code><strong>class_name</strong></code> )が自動的に選択されます。[Tab]を押して、プレースホルダ間を移動できます。クラスに付ける名前をここで入力でき、入力した名前によってプレースホルダが上書きされます。終了して[Enter]を押すと、最初の関数(この場合はコンストラクタ)の名前がIDEで選択されます。</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p><strong>注意:</strong> プレースホルダ名については<a href="#placeholder">プレースホルダ名</a>の項で詳しく説明します。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+プレースホルダ名については<a href="#placeholder">プレースホルダ名</a>の項で詳しく説明します。
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -260,7 +281,7 @@
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>関数名を編集するか、またはデフォルトの名前をそのまま使用します。もう一度[Enter]を押すと、カーソルが関数本体の内部に移動します。実際には、ここで関数およびクラスの残り部分のコーディングを開始します。</p>
</li>
@@ -287,16 +308,36 @@
<p>コード補完ダイアログが表示されるまで待ちます。</p>
</li>
<li>
-<p>省略名( <code>cls</code> )とともに一覧表示される新規クラス・テンプレートを探します。PHPDocフレームには展開されたテンプレートが表示されます。
-image::images/insert-template-with-cc.png[]</p>
+<p>省略名( <code>cls</code> )とともに一覧表示される新規クラス・テンプレートを探します。PHPDocフレームには展開されたテンプレートが表示されます。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-template-with-cc.png" alt="insert template with cc">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>新規クラス・テンプレートを選択し、[Enter]キーを押します。IDEによって、コードに挿入されます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>プレースホルダのクラス名( <code><strong>class_name</strong></code> )が自動的に選択されます。[Tab]を押して、プレースホルダ間を移動できます。クラスに付ける名前をここで入力でき、入力した名前によってプレースホルダが上書きされます。終了して[Enter]を押すと、最初の関数(この場合はコンストラクタ)の名前がIDEで選択されます。
-image::images/select-constructor-name.png[]</p>
+<p>プレースホルダのクラス名( <code><strong>class_name</strong></code> )が自動的に選択されます。[Tab]を押して、プレースホルダ間を移動できます。クラスに付ける名前をここで入力でき、入力した名前によってプレースホルダが上書きされます。終了して[Enter]を押すと、最初の関数(この場合はコンストラクタ)の名前がIDEで選択されます。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/select-constructor-name.png" alt="select constructor name">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>関数名を編集するか、またはデフォルトの名前をそのまま使用します。もう一度[Enter]を押すと、カーソルが関数本体の内部に移動します。実際には、ここで関数およびクラスの残り部分のコーディングを開始します。</p>
</li>
@@ -340,7 +381,7 @@ image::images/select-constructor-name.png[]</p>
<p>また、テンプレートに`allowSurround`<a href="#complex">パラメータ・ヒント</a>が含まれている場合にコードを囲む<a href="#create">新しいテンプレートを作成</a>できます。(<a href="http://www.mybelovedphp.com/2012/05/14/tips-for-using-the-netbeans-editor-for-kohana-and-kostache-mustache-templates-using-surround-with/">My Beloved PHPブログ</a>に感謝します。)</p>
</div>
<div class="paragraph">
-<p>テンプレートでコードを囲むには、コードを選択して「囲む」ダイアログを開きます。「囲む」ダイアログを開くには、[Alt]-[Enter]を押すか、またはヒントimage::images/hint-icon.png[]・アイコンをクリックします。</p>
+<p>テンプレートでコードを囲むには、コードを選択して「囲む」ダイアログを開きます。「囲む」ダイアログを開くには、[Alt]-[Enter]を押すか、またはヒント <span class="image"><img src="images/hint-icon.png" alt="hint icon"></span>・アイコンをクリックします。</p>
</div>
<div class="paragraph">
<p><strong>if(true)テンプレートでコードを囲む</strong></p>
@@ -358,30 +399,67 @@ image::images/select-constructor-name.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
-<p>「 <code>$b = 10;</code> 」行を選択します。
-image::images/selected-variable.png[]</p>
+<p>「 <code>$b = 10;</code> 」行を選択します。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/selected-variable.png" alt="selected variable">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>ヒントimage::images/hint-icon.png[]・アイコンをクリックするか、[Alt]-[Enter]を押します。「囲む」ダイアログが開きます。
-image::images/surround-hint.png[]</p>
+<p>ヒントimage::images/hint-icon.png[]・アイコンをクリックするか、[Alt]-[Enter]を押します。「囲む」ダイアログが開きます。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/surround-hint.png" alt="surround hint">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>「 <code>Surround with if{<strong>true</strong>){…​</code> 」をクリックします。
-image::images/surround-if-true.png[]</p>
+<p>「 <code>Surround with if{<strong>true</strong>){…​</code> 」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/surround-if-true.png" alt="surround if true">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>IDEで、「 <code>$b=10;</code> 」行が「 <code>if(<strong>true</strong>){…​</code> 」テンプレートで囲まれます。
-image::images/inserted-if-true.png[]</p>
+<p>IDEで、「 <code>$b=10;</code> 」行が「 <code>if(<strong>true</strong>){…​</code> 」テンプレートで囲まれます。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/inserted-if-true.png" alt="inserted if true">
+</div>
+</div>
<div class="paragraph">
<p>IDEでは自動的に、出現済で最も近い位置にある適切な変数が <code>if</code> 文の条件として挿入されます。 <code>$a</code> はブール型であり、 <code>if(<strong>true</strong>){}</code> 文はその条件としてブール型の変数を取るため、この場合の該当する変数は <code>$a</code> です。また、IDEで条件に挿入された変数が正しい変数でない場合、その条件が自動的に編集のために選択されます。つまり、テンプレートが挿入された後、すぐに正しい変数の入力を開始できます。この場合、コード補完が正しい変数の選択に役立つことがあります。</p>
</div>
-<div class="paragraph">
-<p><strong>注意:</strong> <code>if(<strong>true</strong>){}</code> テンプレートについては、<a href="#complex">ヒントによって定義されるパラメータ</a>の項で詳しく説明します。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+<code>if(<strong>true</strong>){}</code> テンプレートについては、<a href="#complex">ヒントによって定義されるパラメータ</a>の項で詳しく説明します。
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -393,7 +471,12 @@ image::images/inserted-if-true.png[]</p>
</div>
<div class="imageblock">
<div class="content">
-<img src="images/cursor-after-not-editing.png" alt="]image::images/cursor-after-editing.png[">
+<img src="images/cursor-after-not-editing.png" alt="cursor after not editing">
+</div>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/cursor-after-editing.png" alt="cursor after editing">
</div>
</div>
<div class="paragraph">
@@ -411,15 +494,27 @@ image::images/inserted-if-true.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>空のPHPブロックで「 <code>for</code> 」と入力し、[Ctrl]-[Space]を押してコード補完を開きます。繰返し処理テンプレート(省略名 <code>iter</code> )を選択して[Enter]を押します。新しい繰返し処理がコードに挿入されます。
-image::images/iter-cc.png[]</p>
+<p>空のPHPブロックで「 <code>for</code> 」と入力し、[Ctrl]-[Space]を押してコード補完を開きます。繰返し処理テンプレート(省略名 <code>iter</code> )を選択して[Enter]を押します。新しい繰返し処理がコードに挿入されます。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/iter-cc.png" alt="iter cc">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>繰返し処理には、パラメータとして <code>$index</code> および <code>$array</code> の2つの変数があります。 <code>$index</code> が編集のために自動的に選択されます。([Tab]を押すと、パラメータ間を移動します。)
-image::images/iteration1.png[]</p>
+<p>繰返し処理には、パラメータとして <code>$index</code> および <code>$array</code> の2つの変数があります。 <code>$index</code> が編集のために自動的に選択されます。([Tab]を押すと、パラメータ間を移動します。)</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/iteration1.png" alt="iteration1">
+</div>
+</div>
<div class="paragraph">
<p>「 <code>i</code> 」と入力します。 <code>$index</code> の3つのインスタンスがすべて <code>$i</code> に変更されます。</p>
</div>
@@ -429,10 +524,14 @@ image::images/iteration1.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>[Enter]または[Tab]を押します。パラメータ <code>$array</code> が選択されます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>[Enter]を押します。カーソルが繰返し処理のメソッド本体に移動します。</p>
</li>
@@ -460,11 +559,19 @@ image::images/iteration1.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
-<p><code>$arr</code> 配列を宣言する行の後に「 <code>fore</code> 」と入力し、コード補完を使用して <code>foreach</code> テンプレート(省略名 <code>fore</code> )を挿入します。
-image::images/cc-foreach.png[]</p>
+<p><code>$arr</code> 配列を宣言する行の後に「 <code>fore</code> 」と入力し、コード補完を使用して <code>foreach</code> テンプレート(省略名 <code>fore</code> )を挿入します。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/cc-foreach.png" alt="cc foreach">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>([Enter]を2回押すか、またはカーソルを移動して) <code>foreach</code> 関数の本体にカーソルを置き、「 <code>$value</code> 」と入力するか、または「 <code>$</code> 」とのみ入力してコード補完から「 <code>$value</code> 」を選択します。</p>
</li>
@@ -476,13 +583,17 @@ image::images/cc-foreach.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
-<p>「 <code>$value</code> 」に続けて「 <code>→</code> 」と入力します。コード補完により、配列 <code>$arr</code> から派生した <code>$value</code> 変数に対する適切なメソッドが提示されます。
-image::images/value-method-cc.png[]</p>
+<p>「 <code>$value</code> 」に続けて「 <code>→</code> 」と入力します。コード補完により、配列 <code>$arr</code> から派生した <code>$value</code> 変数に対する適切なメソッドが提示されます。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/value-method-cc.png" alt="value method cc">
+</div>
+</div>
</div>
</div>
</div>
@@ -517,8 +628,17 @@ image::images/value-method-cc.png[]</p>
<div class="paragraph">
<p>後続の各項では、コード・テンプレート・パラメータの各形式について説明します。</p>
</div>
-<div class="paragraph">
-<p><strong>注意:</strong> <code>${VARIABLE...}`` PHPコード・テンプレートの構文が、 ``${…​}</code> のように3つのドル記号に中括弧が続く形式になっている場合があります。この場合、コード・テンプレートには変数とその名前が含まれています。ここで示す構文では、エスケープされたドル記号(二重のドル記号 <code>`` として記述される)に、変数名に対応するパラメータ ``${VARIABLE...}`` を続いています。たとえば、コード・テンプレート「 ``catch${Exception}${exc}</code> 」は「[examplecode]# <code>catch Exception$exc</code> #」に展開されます。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+<code>${VARIABLE...}`` PHPコード・テンプレートの構文が、 ``${…​}</code> のように3つのドル記号に中括弧が続く形式になっている場合があります。この場合、コード・テンプレートには変数とその名前が含まれています。ここで示す構文では、エスケープされたドル記号(二重のドル記号 <code>`` として記述される)に、変数名に対応するパラメータ ``${VARIABLE...}`` を続いています。たとえば、コード・テンプレート「 ``catch${Exception}${exc}</code> 」は「[examplecode]# <code>catch Exception$exc</code> #」に展開されます。
+</td>
+</tr>
+</table>
</div>
<div class="sect2">
<h3 id="_プレースホルダ名">プレースホルダ名</h3>
@@ -554,7 +674,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">class ${ClassName} {function ${__construct} {${selection}${cursor}}}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">class ${ClassName} {function ${__construct} {${selection}${cursor}}}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -573,7 +693,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">${PARAMETER_NAME hint1[=value] [hint2...hint n]}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">${PARAMETER_NAME hint1[=value] [hint2...hint n]}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -581,7 +701,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">$$${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$$${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">$$${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$$${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -589,7 +709,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">if (${CONDITION variableFromPreviousAssignment instanceof="boolean" default="true"}) {${selection}${cursor}}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">if (${CONDITION variableFromPreviousAssignment instanceof="boolean" default="true"}) {${selection}${cursor}}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -675,20 +795,45 @@ image::images/value-method-cc.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>「ツール」>「オプション」(Macでは「NetBeans」>「プリファレンス」)を開き、「エディタ」機能を選択し、「コード・テンプレート」タブを選択します。
-image::images/code-template-options.png[]</p>
+<p>「ツール」>「オプション」(Macでは「NetBeans」>「プリファレンス」)を開き、「エディタ」機能を選択し、「コード・テンプレート」タブを選択します。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-template-options.png" alt="code template options">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>「新規」をクリックして、「新規コード・テンプレート」ダイアログ・ボックスを開きます。テンプレートの省略名を入力して「OK」をクリックします。
-image::images/new-abb.png[]</p>
+<p>「新規」をクリックして、「新規コード・テンプレート」ダイアログ・ボックスを開きます。テンプレートの省略名を入力して「OK」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-abb.png" alt="new abb">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>コード・テンプレートの表に新しい行が追加されます。この行の内容は、指定した省略名のみです。IDEで「展開されるテキスト」タブにカーソルが自動的に移動します。テンプレートのコードの入力をすぐに開始できます。</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p><strong>注意:</strong> コード・テンプレートの展開されるテキストの構文については、<a href="#syntax">PHPコード・テンプレートの構文</a>の項を参照してください。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+コード・テンプレートの展開されるテキストの構文については、<a href="#syntax">PHPコード・テンプレートの構文</a>の項を参照してください。
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -760,7 +905,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">展開されるテキスト:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">defined('_JEXEC')or die('Restricted access');${cursor}
----</p></td>
@@ -796,7 +941,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">展開されるテキスト:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}
----</p></td>
@@ -832,7 +977,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">展開されるテキスト:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">public function ${functionName}Action () {${selection}${cursor} }
----</p></td>
@@ -868,7 +1013,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">展開されるテキスト:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">${ELEMENT newVarName default="element"} = new Zend_Form_Element_Submit('submit', array('label' => 'Send data to server')); this→addElement($$${ELEMENT}); ${cursor}
----</p></td>
diff --git a/content/kb/docs/php/code-templates_pt_BR.html b/content/kb/docs/php/code-templates_pt_BR.html
index 6da84f3..e741b52 100644
--- a/content/kb/docs/php/code-templates_pt_BR.html
+++ b/content/kb/docs/php/code-templates_pt_BR.html
@@ -130,12 +130,6 @@
<div class="paragraph">
<p>Os modelos de código são snippets pré-escritos de código fornecidos pelo NetBeans IDE. Você pode colar um snippet no código utilizando a funcionalidade autocompletar código ou a abreviação do modelo seguida da tecla Tab. Você também pode incluir o código entre snippets apropriados de PHP. Finalmente, você pode definir seus próprios modelos de código. Este tutorial mostra como utilizar os modelos de código e sugere casos úteis para definição de seus próprios modelos de código.</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0</div>
-</div>
<div class="paragraph">
<p><strong>Para concluir este tutorial, você precisa dos seguintes recursos e softwares.</strong></p>
</div>
@@ -180,8 +174,17 @@
<div class="paragraph">
<p>Nesta imagem, o novo modelo de código classe ( <code>cls)</code> está selecionado e na guia Texto Expandido você vê como fica o modelo quando está expandido. Na próxima seção, você usa a função Tab para expandir este modelo no código.</p>
</div>
-<div class="paragraph">
-<p><strong>Observação:</strong> a sintaxe do novo modelo de código classe ( <code>cls</code> ) é explorada na seção <a href="#syntax">Sintaxe do Modelo de Código PHP</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+a sintaxe do novo modelo de código classe ( <code>cls</code> ) é explorada na seção <a href="#syntax">Sintaxe do Modelo de Código PHP</a>.
+</td>
+</tr>
+</table>
</div>
</div>
</div>
@@ -245,14 +248,23 @@
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>O nome de classe do placeholder ( <code><strong>class_name</strong></code> ) é selecionado automaticamente. Você pode mover-se entre os placeholders pressionando Tab. Você pode digitar imediatamente o nome desejado para a classe e este nome substitui o placeholder. Pressione Enter quando tiver terminado e o IDE selecionará o nome da primeira função, que neste caso é o construtor.</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p>*Observação: *os nomes do placeholder são abordados com mais detalhes na <a href="#placeholder">seção Nome do Placeholder</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+os nomes do placeholder são abordados com mais detalhes na <a href="#placeholder">seção Nome do Placeholder</a>.
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -260,7 +272,7 @@
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Edite o nome da função ou aceite o default. Pressione Enter novamente e o cursor irá para dentro do corpo da função. Em uma situação real, você poderia agora começar a codificar a função e o resto da classe.</p>
</li>
@@ -287,16 +299,36 @@
<p>Espere que a caixa de diálogo da função autocompletar código seja aberta.</p>
</li>
<li>
-<p>Localize o novo modelo de classe, que está listado com a abreviação ( <code>cls</code> ). O quadro do PHPDoc mostra o modelo expandido.
-image::images/insert-template-with-cc.png[]</p>
+<p>Localize o novo modelo de classe, que está listado com a abreviação ( <code>cls</code> ). O quadro do PHPDoc mostra o modelo expandido.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-template-with-cc.png" alt="insert template with cc">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Selecione o novo modelo de classe e pressione Enter. O IDE o insere no código.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>O nome de classe do placeholder ( <code><strong>class_name</strong></code> ) é selecionado automaticamente. Você pode mover-se entre os placeholders pressionando Tab. Você pode digitar imediatamente o nome desejado para a classe e este nome substitui o placeholder. Pressione Enter quando tiver terminado e o IDE selecionará o nome da primeira função, que neste caso é o construtor.
-image::images/select-constructor-name.png[]</p>
+<p>O nome de classe do placeholder ( <code><strong>class_name</strong></code> ) é selecionado automaticamente. Você pode mover-se entre os placeholders pressionando Tab. Você pode digitar imediatamente o nome desejado para a classe e este nome substitui o placeholder. Pressione Enter quando tiver terminado e o IDE selecionará o nome da primeira função, que neste caso é o construtor.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/select-constructor-name.png" alt="select constructor name">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Edite o nome da função ou aceite o default. Pressione Enter novamente e o cursor irá para dentro do corpo da função. Em uma situação real, você poderia agora começar a codificar a função e o resto da classe.</p>
</li>
@@ -340,7 +372,7 @@ image::images/select-constructor-name.png[]</p>
<p>Além disso, você pode <a href="#create">criar um novo modelo</a> que pode circundar o código, se o modelo incluir <code>allowSurround</code> <a href="#complex">parameter hint</a>. (Dica para o <a href="http://www.mybelovedphp.com/2012/05/14/tips-for-using-the-netbeans-editor-for-kohana-and-kostache-mustache-templates-using-surround-with/">+ Blog My Beloved PHP+</a>.)</p>
</div>
<div class="paragraph">
-<p>Para circundar o código com um modelo, selecione o código e abra a caixa de diálogo Circundar com…​ Para abrir a caixa de diálogo Circundar com…​, pressione Alt-Enter ou clique no ícone Dica image::images/hint-icon.png[].</p>
+<p>Para circundar o código com um modelo, selecione o código e abra a caixa de diálogo Circundar com…​ Para abrir a caixa de diálogo Circundar com…​, pressione Alt-Enter ou clique no ícone Dica <span class="image"><img src="images/hint-icon.png" alt="hint icon"></span>.</p>
</div>
<div class="paragraph">
<p><strong>Para circundar o código em um modelo if(true):</strong></p>
@@ -358,30 +390,67 @@ image::images/select-constructor-name.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
-<p>Selecione a linha <code>$b = 10;</code>
-image::images/selected-variable.png[]</p>
+<p>Selecione a linha <code>$b = 10;</code></p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/selected-variable.png" alt="selected variable">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>Clique no ícone Dica image::images/hint-icon.png[] ou pressione Alt-Enter. A caixa de diálogo Circundar com…​ será aberta.
-image::images/surround-hint.png[]</p>
+<p>Clique no ícone Dica image::images/hint-icon.png[] ou pressione Alt-Enter. A caixa de diálogo Circundar com…​ será aberta.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/surround-hint.png" alt="surround hint">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>Clique em <code>Circundar com if{<strong>true</strong>){…​</code>
-image::images/surround-if-true.png[]</p>
+<p>Clique em <code>Circundar com if{<strong>true</strong>){…​</code></p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/surround-if-true.png" alt="surround if true">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>O IDE circunda a linha <code>$b = 10;</code> com um modelo <code>if(<strong>true</strong>){…​</code> .
-image::images/inserted-if-true.png[]</p>
+<p>O IDE circunda a linha <code>$b = 10;</code> com um modelo <code>if(<strong>true</strong>){…​</code> .</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/inserted-if-true.png" alt="inserted if true">
+</div>
+</div>
<div class="paragraph">
<p>O IDE insere automaticamente a variável apropriada precedente mais próxima como a condição da instrução <code>if</code> . Neste caso, essa variável é <code>$a</code> , porque <code>$a</code> é um booliana e a instrução <code>if(<strong>true</strong>){}</code> toma uma variável booliana como sua condição. Além disso, a condição é selecionada automaticamente para edição caso a variável que o IDE insira na condição não seja a variável correta. Isso significa que você pode começar a [...]
</div>
-<div class="paragraph">
-<p><strong>Observação: *o modelo <code>if(*true</strong>){}</code> é descrito com detalhes na seção <a href="#complex">Parâmetro definido por dicas</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+o modelo <code>if(<strong>true</strong>){}</code> é descrito com detalhes na seção <a href="#complex">Parâmetro definido por dicas</a>.
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -393,7 +462,12 @@ image::images/inserted-if-true.png[]</p>
</div>
<div class="imageblock">
<div class="content">
-<img src="images/cursor-after-not-editing.png" alt="]image::images/cursor-after-editing.png[">
+<img src="images/cursor-after-not-editing.png" alt="cursor after not editing">
+</div>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/cursor-after-editing.png" alt="cursor after editing">
</div>
</div>
<div class="paragraph">
@@ -411,15 +485,27 @@ image::images/inserted-if-true.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Em um bloco PHP vazio, digite <code>for</code> e pressione Ctrl-Espaço para abrir a funcionalidade autocompletar código. Selecione o modelo de iteração (abreviação <code>iter</code> ) e pressione Enter. Uma nova iteração será inserida no seu código.
-image::images/iter-cc.png[]</p>
+<p>Em um bloco PHP vazio, digite <code>for</code> e pressione Ctrl-Espaço para abrir a funcionalidade autocompletar código. Selecione o modelo de iteração (abreviação <code>iter</code> ) e pressione Enter. Uma nova iteração será inserida no seu código.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/iter-cc.png" alt="iter cc">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>A iteração tem duas variáveis como parâmetros, <code>$index</code> e <code>$array</code> . <code>$index</code> é selecionada automaticamente para edição. (Pressionando Tab elas são movidas entre os parâmetros.)
-image::images/iteration1.png[]</p>
+<p>A iteração tem duas variáveis como parâmetros, <code>$index</code> e <code>$array</code> . <code>$index</code> é selecionada automaticamente para edição. (Pressionando Tab elas são movidas entre os parâmetros.)</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/iteration1.png" alt="iteration1">
+</div>
+</div>
<div class="paragraph">
<p>Digite <code>i</code> . Todas as três instâncias de <code>$index</code> mudam para <code>$i</code> .</p>
</div>
@@ -429,10 +515,14 @@ image::images/iteration1.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Pressione Enter ou Tab. O parâmetro <code>$array</code> é selecionado.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Pressione Enter. O cursor insere o corpo do método da iteração.</p>
</li>
@@ -460,11 +550,19 @@ image::images/iteration1.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
-<p>Depois da linha que declara o array <code>$arr</code> , digite <code>fore</code> e use a funcionalidade de autocompletar código para inserir o modelo <code>foreach</code> (abreviação: <code>fore</code> ).
-image::images/cc-foreach.png[]</p>
+<p>Depois da linha que declara o array <code>$arr</code> , digite <code>fore</code> e use a funcionalidade de autocompletar código para inserir o modelo <code>foreach</code> (abreviação: <code>fore</code> ).</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/cc-foreach.png" alt="cc foreach">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Coloque o cursor no corpo da função <code>foreach</code> (você pode pressionar Enter duas vezes para tirar o cursor de lá) e digite <code>$value</code> , ou digite somente <code>$</code> e selecione <code>$value</code> na funcionalidade autocompletar código.</p>
</li>
@@ -476,13 +574,17 @@ image::images/cc-foreach.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
-<p>Depois de <code>$value</code> , digite <code>→</code> . A funcionalidade autocompletar código oferece os métodos corretos para a variável <code>$value</code> , que se deriva do array <code>$arr</code> .
-image::images/value-method-cc.png[]</p>
+<p>Depois de <code>$value</code> , digite <code>→</code> . A funcionalidade autocompletar código oferece os métodos corretos para a variável <code>$value</code> , que se deriva do array <code>$arr</code> .</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/value-method-cc.png" alt="value method cc">
+</div>
+</div>
</div>
</div>
</div>
@@ -517,8 +619,17 @@ image::images/value-method-cc.png[]</p>
<div class="paragraph">
<p>As seções a seguir abordam cada uma das formas de um parâmetro de modelo de código.</p>
</div>
-<div class="paragraph">
-<p><strong>Observação:</strong> <code>${VARIABLE...} `` às vezes, é exibido um modelo de código PHP no qual a sintaxe parece ser três cifrões seguidos das chaves ``${…​}</code> . Neste caso, o modelo de código inclui uma variável e seu nome. A sintaxe aqui é um cifrão com escape, escrito como dois cifrões <code>`` , seguido de um parâmetro do nome da variável, ``${VARIABLE...}`` . Por exemplo, o modelo de código ``catch ${Exception} ${exc}</code> é expandido como [examp [...]
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+<code>${VARIABLE...} `` às vezes, é exibido um modelo de código PHP no qual a sintaxe parece ser três cifrões seguidos das chaves ``${…​}</code> . Neste caso, o modelo de código inclui uma variável e seu nome. A sintaxe aqui é um cifrão com escape, escrito como dois cifrões <code>`` , seguido de um parâmetro do nome da variável, ``${VARIABLE...}`` . Por exemplo, o modelo de código ``catch ${Exception} ${exc}</code> é expandido como [examplecode]# <code>catch Exception $e [...]
+</td>
+</tr>
+</table>
</div>
<div class="sect2">
<h3 id="_nome_do_placeholder">Nome do placeholder</h3>
@@ -554,7 +665,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">class ${ClassName} {function ${__construct} {${selection}${cursor}}}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">class ${ClassName} {function ${__construct} {${selection}${cursor}}}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -573,7 +684,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">${PARAMETER_NAME hint1[=value] [hint2...hint n]}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">${PARAMETER_NAME hint1[=value] [hint2...hint n]}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -581,7 +692,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">$$${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$$${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">$$${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$$${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -589,7 +700,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">if (${CONDITION variableFromPreviousAssignment instanceof="boolean" default="true"}) {${selection}${cursor}}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">if (${CONDITION variableFromPreviousAssignment instanceof="boolean" default="true"}) {${selection}${cursor}}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -675,20 +786,45 @@ image::images/value-method-cc.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Abra Ferramentas > Opções (NetBeans > Preferências no Mac), selecione as funcionalidades do Editor e selecione a guia Modelos de Código.
-image::images/code-template-options.png[]</p>
+<p>Abra Ferramentas > Opções (NetBeans > Preferências no Mac), selecione as funcionalidades do Editor e selecione a guia Modelos de Código.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-template-options.png" alt="code template options">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>Clique em Novo para abrir a caixa de diálogo Novo Modelo de Código. Digite a abreviação que deseja para o modelo e clique em OK.
-image::images/new-abb.png[]</p>
+<p>Clique em Novo para abrir a caixa de diálogo Novo Modelo de Código. Digite a abreviação que deseja para o modelo e clique em OK.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-abb.png" alt="new abb">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>É adicionada uma nova linha à tabela de modelos de código. Esta linha contém somente a abreviação fornecida. O cursor está na guia Texto Expandido, onde o IDE colocou o cursor automaticamente. Você pode começar a digitar imediatamente o código do modelo.</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p>*Observação: *para saber mais sobre a sintaxe do texto expandido do modelo de código, consulte a seção <a href="#syntax">Sintaxe do Modelo de Código PHP.</a></p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+para saber mais sobre a sintaxe do texto expandido do modelo de código, consulte a seção <a href="#syntax">Sintaxe do Modelo de Código PHP.</a>
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -760,7 +896,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Texto expandido:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">defined('_JEXEC')or die('Restricted access');${cursor}
----</p></td>
@@ -796,7 +932,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Texto expandido:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}
----</p></td>
@@ -832,7 +968,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Texto expandido:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">public function ${functionName}Action () {${selection}${cursor} }
----</p></td>
@@ -868,7 +1004,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Texto expandido:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">${ELEMENT newVarName default="element"} = new Zend_Form_Element_Submit('submit', array('label' => 'Send data to server')); this→addElement($$${ELEMENT}); ${cursor}
----</p></td>
diff --git a/content/kb/docs/php/code-templates_ru.html b/content/kb/docs/php/code-templates_ru.html
index 74ac771..1c4b09d 100644
--- a/content/kb/docs/php/code-templates_ru.html
+++ b/content/kb/docs/php/code-templates_ru.html
@@ -180,8 +180,17 @@
<div class="paragraph">
<p>В примере на рисунке выбран шаблон кода нового класса ( <code>cls)</code> , а на вкладке "Расширенный текст" отображается развернутый шаблон. В следующем разделе описывается использование клавиши TAB для развертывания шаблона в коде.</p>
</div>
-<div class="paragraph">
-<p><strong>Примечание.</strong> Синтаксис нового шаблона кода класса ( <code>cls</code> ) описывается в разделе <a href="#syntax">Синтаксис шаблона кода PHP</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+Синтаксис нового шаблона кода класса ( <code>cls</code> ) описывается в разделе <a href="#syntax">Синтаксис шаблона кода PHP</a>.
+</td>
+</tr>
+</table>
</div>
</div>
</div>
@@ -245,14 +254,23 @@
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Имя класса метки-заполнителя ( <code><strong>class_name</strong></code> ) выбирается автоматически. Для перехода от одного заполнителя к другому можно использовать клавишу Tab. Можно сразу указать требуемое имя класса, которое будет перезаписано для метки-заполнителя. После завершения ввода нажмите ENTER. В среде IDE будет выбрано имя первой функции, которой в данном варианте является конструктор.</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p>*Примечание: * Имена заменителей описываются более детально в разделе <a href="#placeholder">Раздел имен заменителей</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+Имена заменителей описываются более детально в разделе <a href="#placeholder">Раздел имен заменителей</a>.
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -260,7 +278,7 @@
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Отредактируйте имя функции или примите значение по умолчанию. Затем снова нажмите ENTER. Курсор переместится в тело функции. В реальном сценарии после этого начинается кодирование функции и остального класса.</p>
</li>
@@ -287,16 +305,36 @@
<p>Дождитесь открытия диалогового окна дополнения кода.</p>
</li>
<li>
-<p>Выполните поиск шаблона нового класса, рядом с которым указана аббревиатура ( <code>cls</code> ). Развернутый шаблон отображается в рамке PHPDoc.
-image::images/insert-template-with-cc.png[]</p>
+<p>Выполните поиск шаблона нового класса, рядом с которым указана аббревиатура ( <code>cls</code> ). Развернутый шаблон отображается в рамке PHPDoc.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-template-with-cc.png" alt="insert template with cc">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Выберите шаблон нового класса и нажмите Enter. В среде IDE выполняется его вставка в код.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>Имя класса метки-заполнителя ( <code><strong>class_name</strong></code> ) выбирается автоматически. Для перехода от одного заполнителя к другому можно использовать клавишу Tab. Можно сразу указать требуемое имя класса, которое будет перезаписано для метки-заполнителя. После завершения ввода нажмите ENTER. В среде IDE будет выбрано имя первой функции, которой в данном варианте является конструктор.
-image::images/select-constructor-name.png[]</p>
+<p>Имя класса метки-заполнителя ( <code><strong>class_name</strong></code> ) выбирается автоматически. Для перехода от одного заполнителя к другому можно использовать клавишу Tab. Можно сразу указать требуемое имя класса, которое будет перезаписано для метки-заполнителя. После завершения ввода нажмите ENTER. В среде IDE будет выбрано имя первой функции, которой в данном варианте является конструктор.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/select-constructor-name.png" alt="select constructor name">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Отредактируйте имя функции или примите значение по умолчанию. Затем снова нажмите ENTER. Курсор переместится в тело функции. В реальном сценарии после этого начинается кодирование функции и остального класса.</p>
</li>
@@ -340,7 +378,7 @@ image::images/select-constructor-name.png[]</p>
<p>Кроме того, можно <a href="#create">создать новый шаблон</a>, который будет окружать код, если шаблон включает в себя <a href="#complex">подсказку параметра</a> <code>allowSurround</code>. (Выражаем благодарность за предоставленную информацию авторам блога <a href="http://www.mybelovedphp.com/2012/05/14/tips-for-using-the-netbeans-editor-for-kohana-and-kostache-mustache-templates-using-surround-with/">+ My Beloved PHP+</a>.)</p>
</div>
<div class="paragraph">
-<p>Чтобы добавить шаблон вокруг кода, выберите код и откройте диалоговое окно "Окружение…​". Чтобы открыть диалоговое окно 'Окружить…​', нажмите Alt-Enter или щелкните значок 'Подсказка' image::images/hint-icon.png[].</p>
+<p>Чтобы добавить шаблон вокруг кода, выберите код и откройте диалоговое окно "Окружение…​". Чтобы открыть диалоговое окно 'Окружить…​', нажмите Alt-Enter или щелкните значок 'Подсказка' <span class="image"><img src="images/hint-icon.png" alt="hint icon"></span>.</p>
</div>
<div class="paragraph">
<p><strong>Для добавления шаблона if(true) вокруг кода выполните следующее:</strong></p>
@@ -358,30 +396,67 @@ image::images/select-constructor-name.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
-<p>Выберите строку <code>$b = 10;</code>
-image::images/selected-variable.png[]</p>
+<p>Выберите строку <code>$b = 10;</code></p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/selected-variable.png" alt="selected variable">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>Нажмите на значок 'Подсказка' image::images/hint-icon.png[] или нажмите Alt-Enter. Откроется диалоговое окно "Окружение…​".
-image::images/surround-hint.png[]</p>
+<p>Нажмите на значок 'Подсказка' image::images/hint-icon.png[] или нажмите Alt-Enter. Откроется диалоговое окно "Окружение…​".</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/surround-hint.png" alt="surround hint">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>Щелкните <code> Surround with if{<strong>true</strong>){…​</code>
-image::images/surround-if-true.png[]</p>
+<p>Щелкните <code> Surround with if{<strong>true</strong>){…​</code></p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/surround-if-true.png" alt="surround if true">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>В среде IDE строка <code>$b = 10;</code> будет окружена шаблоном <code>if(<strong>true</strong>){…​ </code> .
-image::images/inserted-if-true.png[]</p>
+<p>В среде IDE строка <code>$b = 10;</code> будет окружена шаблоном <code>if(<strong>true</strong>){…​ </code> .</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/inserted-if-true.png" alt="inserted if true">
+</div>
+</div>
<div class="paragraph">
<p>В среде IDE в качестве условия оператора <code>if</code> автоматически вставляется ближайшая предшествующая допустимая переменная. В данном варианте используется переменная <code>$a</code> , поскольку <code>$a</code> является логическим значением, а условие оператора <code>if(<strong>true</strong>){} </code> подразумевает логическую переменную. Более того, если переменная, вставленная в среде IDE в условие, неправильна, это условие автоматически выделяется для редактирования. Эт [...]
</div>
-<div class="paragraph">
-<p><strong>Примечание *. Шаблон <code>if(*true</strong>){}</code> описывается подробно в разделе <a href="#complex">Параметр, определяемый подсказками</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+. Шаблон <code>if(<strong>true</strong>){}</code> описывается подробно в разделе <a href="#complex">Параметр, определяемый подсказками</a>.
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -393,7 +468,12 @@ image::images/inserted-if-true.png[]</p>
</div>
<div class="imageblock">
<div class="content">
-<img src="images/cursor-after-not-editing.png" alt="]image::images/cursor-after-editing.png[">
+<img src="images/cursor-after-not-editing.png" alt="cursor after not editing">
+</div>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/cursor-after-editing.png" alt="cursor after editing">
</div>
</div>
<div class="paragraph">
@@ -411,15 +491,27 @@ image::images/inserted-if-true.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>В пустом блоке PHP введите <code>for</code> и нажмите сочетание клавиш CTRL+ПРОБЕЛ для открытия дополнения кода. Выберите шаблон итерации (аббревиатура <code>iter</code> ) и нажмите Enter. В код будет вставлена новая итерация.
-image::images/iter-cc.png[]</p>
+<p>В пустом блоке PHP введите <code>for</code> и нажмите сочетание клавиш CTRL+ПРОБЕЛ для открытия дополнения кода. Выберите шаблон итерации (аббревиатура <code>iter</code> ) и нажмите Enter. В код будет вставлена новая итерация.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/iter-cc.png" alt="iter cc">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>В итерации в качестве параметров используются две переменных: <code>$index</code> и <code>$array</code> . Переменная <code>$index</code> выбирается для редактирования автоматически. (Для перемещения между параметрами используйте клавишу Tab.)
-image::images/iteration1.png[]</p>
+<p>В итерации в качестве параметров используются две переменных: <code>$index</code> и <code>$array</code> . Переменная <code>$index</code> выбирается для редактирования автоматически. (Для перемещения между параметрами используйте клавишу Tab.)</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/iteration1.png" alt="iteration1">
+</div>
+</div>
<div class="paragraph">
<p>Введите <code>i</code> . Все три экземпляра параметра <code>$index</code> изменятся на <code>$i</code> .</p>
</div>
@@ -429,10 +521,14 @@ image::images/iteration1.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Нажмите Enter или Tab. Будет выбран параметр <code>$array</code> .</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Нажмите ENTER. Курсор переместится в тело метода итерации.</p>
</li>
@@ -460,11 +556,19 @@ image::images/iteration1.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
-<p>После строки с объявлением массива <code>$arr</code> введите <code>fore</code> и с помощью дополнения кода вставьте шаблон <code> foreach</code> (аббревиатура: <code>fore</code> ).
-image::images/cc-foreach.png[]</p>
+<p>После строки с объявлением массива <code>$arr</code> введите <code>fore</code> и с помощью дополнения кода вставьте шаблон <code> foreach</code> (аббревиатура: <code>fore</code> ).</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/cc-foreach.png" alt="cc foreach">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Поместите курсор в тело функции <code>foreach</code> (для перемещения курсора можно дважды нажать ENTER) и введите значение <code>$value</code> или введите только <code>$</code> и выберите <code>$value</code> из дополнения кода.</p>
</li>
@@ -476,13 +580,17 @@ image::images/cc-foreach.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
-<p>После <code>$value</code> введите <code>→</code> . Дополнение кода обеспечивает корректные методы для переменной <code>$value</code> , значение которой можно получить из массива <code>$arr</code> .
-image::images/value-method-cc.png[]</p>
+<p>После <code>$value</code> введите <code>→</code> . Дополнение кода обеспечивает корректные методы для переменной <code>$value</code> , значение которой можно получить из массива <code>$arr</code> .</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/value-method-cc.png" alt="value method cc">
+</div>
+</div>
</div>
</div>
</div>
@@ -517,8 +625,17 @@ image::images/value-method-cc.png[]</p>
<div class="paragraph">
<p>В следующих разделах рассматриваются все формы параметров шаблона кода.</p>
</div>
-<div class="paragraph">
-<p><strong>Примечание.</strong> <code>${VARIABLE...} `` Иногда отображается шаблон кода PHP во фрагментах, где синтаксис состоит из трех знаков доллара, после которых стоят фигурные скобки ``${…​}</code> . В этом случае шаблон кода содержит переменную и ее имя. Здесь знак доллара пропущен, и в синтаксисе присутствует двойной знак доллара <code>`` , за которым следует параметр имени переменной ``${VARIABLE...}`` . Например, шаблон кода ``catch ${Exception} ${exc}</code> [...]
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+<code>${VARIABLE...} `` Иногда отображается шаблон кода PHP во фрагментах, где синтаксис состоит из трех знаков доллара, после которых стоят фигурные скобки ``${…​}</code> . В этом случае шаблон кода содержит переменную и ее имя. Здесь знак доллара пропущен, и в синтаксисе присутствует двойной знак доллара <code>`` , за которым следует параметр имени переменной ``${VARIABLE...}`` . Например, шаблон кода ``catch ${Exception} ${exc}</code> расширяется как [examplecode]# <c [...]
+</td>
+</tr>
+</table>
</div>
<div class="sect2">
<h3 id="_Имя_метки_заполнителя">Имя метки-заполнителя</h3>
@@ -554,7 +671,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">class ${ClassName} {function ${__construct} {${selection}${cursor}}}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">class ${ClassName} {function ${__construct} {${selection}${cursor}}}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -573,7 +690,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">${PARAMETER_NAME hint1[=value] [hint2...hint n]}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">${PARAMETER_NAME hint1[=value] [hint2...hint n]}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -581,7 +698,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">$$${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$$${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">$$${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$$${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -589,7 +706,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">if (${CONDITION variableFromPreviousAssignment instanceof="boolean" default="true"}) {${selection}${cursor}}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">if (${CONDITION variableFromPreviousAssignment instanceof="boolean" default="true"}) {${selection}${cursor}}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -675,20 +792,45 @@ image::images/value-method-cc.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Выберите команды "Средства" > "Параметры" ("NetBeans > Параметры" в системе Mac), перейдите к функциям редактора и откройте вкладку "Шаблоны кода".
-image::images/code-template-options.png[]</p>
+<p>Выберите команды "Средства" > "Параметры" ("NetBeans > Параметры" в системе Mac), перейдите к функциям редактора и откройте вкладку "Шаблоны кода".</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-template-options.png" alt="code template options">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>Нажмите 'Создать'. В результате откроется диалоговое окно 'Создание шаблона кода'. Введите аббревиатуру для шаблона и нажмите кнопку "ОК".
-image::images/new-abb.png[]</p>
+<p>Нажмите 'Создать'. В результате откроется диалоговое окно 'Создание шаблона кода'. Введите аббревиатуру для шаблона и нажмите кнопку "ОК".</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-abb.png" alt="new abb">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>В таблицу шаблонов кода будет добавлена новая строка. Она содержит только введенную аббревиатуру. Курсор будет автоматически расположен на вкладке "Расширенный текст". Код шаблона можно ввести прямо на этой вкладке.</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p>*Примечание. *Описание синтаксиса расширенного текста шаблона кода см. в разделе <a href="#syntax">Синтаксис шаблона кода PHP.</a></p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+Описание синтаксиса расширенного текста шаблона кода см. в разделе <a href="#syntax">Синтаксис шаблона кода PHP.</a>
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -760,7 +902,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Развернутый текст:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">defined('_JEXEC')or die('Restricted access');${cursor}
----</p></td>
@@ -796,7 +938,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Развернутый текст:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}
----</p></td>
@@ -832,7 +974,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Развернутый текст:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">public function ${functionName}Action () {${selection}${cursor} }
----</p></td>
@@ -868,7 +1010,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Развернутый текст:</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">${ELEMENT newVarName default="element"} = new Zend_Form_Element_Submit('submit', array('label' => 'Send data to server')); this→addElement($$${ELEMENT}); ${cursor}
----</p></td>
diff --git a/content/kb/docs/php/code-templates_zh_CN.html b/content/kb/docs/php/code-templates_zh_CN.html
index 267b376..e587ada 100644
--- a/content/kb/docs/php/code-templates_zh_CN.html
+++ b/content/kb/docs/php/code-templates_zh_CN.html
@@ -130,12 +130,6 @@
<div class="paragraph">
<p>代码模板是 NetBeans IDE 提供的预先编写的代码片段。可以使用代码完成或使用模板缩写并按 Tab 键，将代码片段粘贴到您的代码中。也可以将您的代码包含在相应的 PHP 代码片段中。最后，您可以定义自己的代码模板。本教程介绍了如何使用代码模板，并建议了定义您自己的代码模板的用例。</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. 此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0</div>
-</div>
<div class="paragraph">
<p><strong>要学完本教程，您需要具备以下软件和资源。</strong></p>
</div>
@@ -180,8 +174,17 @@
<div class="paragraph">
<p>在该图中，选择了新类 ( <code>cls)</code> 代码模板，您可以在 "Expanded Text"（展开的文本）标签中看到该模板展开后的内容。在下一节中，将使用 Tab 功能在代码中展开该模板。</p>
</div>
-<div class="paragraph">
-<p><strong>注：</strong><a href="#syntax">PHP 代码模板语法</a>部分讲述了新类 ( <code>cls</code> ) 代码模板的语法。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+<a href="#syntax">PHP 代码模板语法</a>部分讲述了新类 ( <code>cls</code> ) 代码模板的语法。
+</td>
+</tr>
+</table>
</div>
</div>
</div>
@@ -236,8 +239,17 @@
</li>
</ol>
</div>
-<div class="paragraph">
-<p>*注：*应正确拼写缩写！如果拼错缩写，将无法展开缩写。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+应正确拼写缩写！如果拼错缩写，将无法展开缩写。
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -245,14 +257,23 @@
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>将自动选择占位符类名 ( <code><strong>class_name</strong></code> )。按 Tab 键可在占位符之间移动。您可以立即键入所需的类名，该名称将覆盖占位符。在完成后，按 Enter 键，IDE 将选择第一个函数的名称，此处为构造函数。</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p><strong>注：</strong><a href="#placeholder">占位符名称</a>部分详细讲述了占位符名称。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+<a href="#placeholder">占位符名称</a>部分详细讲述了占位符名称。
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -260,7 +281,7 @@
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>编辑函数名称或接受默认值。再次按 Enter 键，光标将移到函数主体内部。在实际情况下，您现在将开始对函数和类的其余部分进行编码。</p>
</li>
@@ -287,16 +308,36 @@
<p>等待 "code completion"（代码完成）对话框打开。</p>
</li>
<li>
-<p>找到新类模板，将列出该模板的缩写 ( <code>cls</code> )。PHPDoc 框架显示了展开的模板。
-image::images/insert-template-with-cc.png[]</p>
+<p>找到新类模板，将列出该模板的缩写 ( <code>cls</code> )。PHPDoc 框架显示了展开的模板。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-template-with-cc.png" alt="insert template with cc">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>选择新的类模板并按 Enter 键。IDE 将在代码中插入该模板。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>将自动选择占位符类名 ( <code><strong>class_name</strong></code> )。按 Tab 键可在占位符之间移动。您可以立即键入所需的类名，该名称将覆盖占位符。在完成后，按 Enter 键，IDE 将选择第一个函数的名称，此处为构造函数。
-image::images/select-constructor-name.png[]</p>
+<p>将自动选择占位符类名 ( <code><strong>class_name</strong></code> )。按 Tab 键可在占位符之间移动。您可以立即键入所需的类名，该名称将覆盖占位符。在完成后，按 Enter 键，IDE 将选择第一个函数的名称，此处为构造函数。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/select-constructor-name.png" alt="select constructor name">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>编辑函数名称或接受默认值。再次按 Enter 键，光标将移到函数主体内部。在实际情况下，您现在将开始对函数和类的其余部分进行编码。</p>
</li>
@@ -340,7 +381,7 @@ image::images/select-constructor-name.png[]</p>
<p>此外，您也可以<a href="#create">创建新模板</a>，如果该模板包括 <code>allowSurround</code> <a href="#complex">参数提示</a>，则可以包含代码。（感谢<a href="http://www.mybelovedphp.com/2012/05/14/tips-for-using-the-netbeans-editor-for-kohana-and-kostache-mustache-templates-using-surround-with/">“我喜爱的 PHP”博客</a>。）</p>
</div>
<div class="paragraph">
-<p>要将代码包含在模板中，请选择代码，然后打开 "Surround with…​"（包含方式…​）对话框。要打开 "Surround with…​"（包含方式…​）对话框，请按 Alt-Enter 组合键或者单击 "Hint"（提示）image::images/hint-icon.png[] 图标。</p>
+<p>要将代码包含在模板中，请选择代码，然后打开 "Surround with…​"（包含方式…​）对话框。要打开 "Surround with…​"（包含方式…​）对话框，请按 Alt-Enter 组合键或者单击 "Hint"（提示）<span class="image"><img src="images/hint-icon.png" alt="hint icon"></span> 图标。</p>
</div>
<div class="paragraph">
<p><strong>将代码包含在 if(true) 模板中：</strong></p>
@@ -358,30 +399,67 @@ image::images/select-constructor-name.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
-<p>选择行 <code>$b = 10;</code>
-image::images/selected-variable.png[]</p>
+<p>选择行 <code>$b = 10;</code></p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/selected-variable.png" alt="selected variable">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>单击 "Hint"（提示）image::images/hint-icon.png[] 图标或按 Alt-Enter 组合键。此时将打开 "Surround with…​"（包含方式…​）对话框。
-image::images/surround-hint.png[]</p>
+<p>单击 "Hint"（提示）image::images/hint-icon.png[] 图标或按 Alt-Enter 组合键。此时将打开 "Surround with…​"（包含方式…​）对话框。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/surround-hint.png" alt="surround hint">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>单击 <code>Surround with if{<strong>true</strong>){…​</code> （包含在 if{true){…​ 中）
-image::images/surround-if-true.png[]</p>
+<p>单击 <code>Surround with if{<strong>true</strong>){…​</code> （包含在 if{true){…​ 中）</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/surround-if-true.png" alt="surround if true">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>IDE 将 <code>$b = 10;</code> 行包含在 <code>if(<strong>true</strong>){…​</code> 模板中。
-image::images/inserted-if-true.png[]</p>
+<p>IDE 将 <code>$b = 10;</code> 行包含在 <code>if(<strong>true</strong>){…​</code> 模板中。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/inserted-if-true.png" alt="inserted if true">
+</div>
+</div>
<div class="paragraph">
<p>IDE 自动插入前面最近的适合变量作为 <code>if</code> 语句的条件。此处，该变量是 <code>$a</code> ，这是因为 <code>$a</code> 是布尔型变量，并且 <code>if(<strong>true</strong>){}</code> 语句将布尔型变量作为其条件。再者，如果 IDE 插入到条件中的变量不是正确的变量，则会自动选择该条件以进行编辑。这意味着，您可以在插入模板后立即开始键入正确的变量。在这种情况下，代码完成可以帮助您选择正确的变量。</p>
</div>
-<div class="paragraph">
-<p><strong>注：</strong><a href="#complex">提示定义的参数</a>部分详细介绍了 <code>if(<strong>true</strong>){}</code> 模板。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+<a href="#complex">提示定义的参数</a>部分详细介绍了 <code>if(<strong>true</strong>){}</code> 模板。
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -393,7 +471,12 @@ image::images/inserted-if-true.png[]</p>
</div>
<div class="imageblock">
<div class="content">
-<img src="images/cursor-after-not-editing.png" alt="]image::images/cursor-after-editing.png[">
+<img src="images/cursor-after-not-editing.png" alt="cursor after not editing">
+</div>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/cursor-after-editing.png" alt="cursor after editing">
</div>
</div>
<div class="paragraph">
@@ -411,15 +494,27 @@ image::images/inserted-if-true.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>在一个空 PHP 块中，键入 <code>for</code> ，然后按 Ctrl-空格键以打开代码完成。选择迭代模板（缩写为 <code>iter</code> ），然后按 Enter 键。将在代码中插入一个新迭代。
-image::images/iter-cc.png[]</p>
+<p>在一个空 PHP 块中，键入 <code>for</code> ，然后按 Ctrl-空格键以打开代码完成。选择迭代模板（缩写为 <code>iter</code> ），然后按 Enter 键。将在代码中插入一个新迭代。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/iter-cc.png" alt="iter cc">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>迭代将以下两个变量作为参数： <code>$index</code> 和 <code>$array</code> 。将自动选择 <code>$index</code> 以进行编辑。（按 Tab 键可在参数之间移动。）
-image::images/iteration1.png[]</p>
+<p>迭代将以下两个变量作为参数： <code>$index</code> 和 <code>$array</code> 。将自动选择 <code>$index</code> 以进行编辑。（按 Tab 键可在参数之间移动。）</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/iteration1.png" alt="iteration1">
+</div>
+</div>
<div class="paragraph">
<p>键入 <code>i</code> 。 <code>$index</code> 的所有三个实例将变为 <code>$i</code> 。</p>
</div>
@@ -429,10 +524,14 @@ image::images/iteration1.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>按 Enter 或 Tab 键。将选择 <code>$array</code> 参数。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>按 Enter 键。光标将进入迭代的方法主体。</p>
</li>
@@ -460,11 +559,19 @@ image::images/iteration1.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
-<p>在声明 <code>$arr</code> 数组的行后面，键入 <code>fore</code> ，然后使用代码完成插入 <code>foreach</code> 模板（缩写为 <code>fore</code> ）。
-image::images/cc-foreach.png[]</p>
+<p>在声明 <code>$arr</code> 数组的行后面，键入 <code>fore</code> ，然后使用代码完成插入 <code>foreach</code> 模板（缩写为 <code>fore</code> ）。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/cc-foreach.png" alt="cc foreach">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>将光标放在 <code>foreach</code> 函数主体中（可以按两次 Enter 键以将光标移到此处）并键入 <code>$value</code> ，或者仅键入 <code>$</code> 并从代码完成中选择 <code>$value</code> 。</p>
</li>
@@ -476,13 +583,17 @@ image::images/cc-foreach.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
-<p>在 <code>$value</code> 后面，键入 <code>→</code> 。代码完成为您提供了 <code>$value</code> 变量的正确方法，该变量是从 <code>$arr</code> 数组派生的。
-image::images/value-method-cc.png[]</p>
+<p>在 <code>$value</code> 后面，键入 <code>→</code> 。代码完成为您提供了 <code>$value</code> 变量的正确方法，该变量是从 <code>$arr</code> 数组派生的。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/value-method-cc.png" alt="value method cc">
+</div>
+</div>
</div>
</div>
</div>
@@ -517,8 +628,17 @@ image::images/value-method-cc.png[]</p>
<div class="paragraph">
<p>以下几节讲述了每种形式的代码模板参数。</p>
</div>
-<div class="paragraph">
-<p><strong>注：</strong> <code>${VARIABLE...} `` 有时，您会在 PHP 代码模板中看到语法似乎为三个美元符号，后跟花括号 ``${…​}</code> 。在这种情况下，代码模板包含变量及其名称。此处的语法是转义的美元符号，记为两个美元符号 <code>`` ，后跟变量名称参数 ``${VARIABLE...}`` 。例如， ``catch ${Exception} ${exc}</code> 代码模板展开为 [examplecode]# <code>catch Exception $exc</code> #。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+<code>${VARIABLE...} `` 有时，您会在 PHP 代码模板中看到语法似乎为三个美元符号，后跟花括号 ``${…​}</code> 。在这种情况下，代码模板包含变量及其名称。此处的语法是转义的美元符号，记为两个美元符号 <code>`` ，后跟变量名称参数 ``${VARIABLE...}`` 。例如， ``catch ${Exception} ${exc}</code> 代码模板展开为 [examplecode]# <code>catch Exception $exc</code> #。
+</td>
+</tr>
+</table>
</div>
<div class="sect2">
<h3 id="_占位符名称">占位符名称</h3>
@@ -554,7 +674,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">class ${ClassName} {function ${__construct} {${selection}${cursor}}}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">class ${ClassName} {function ${__construct} {${selection}${cursor}}}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -573,7 +693,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">${PARAMETER_NAME hint1[=value] [hint2...hint n]}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">${PARAMETER_NAME hint1[=value] [hint2...hint n]}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -581,7 +701,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">$$${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$$${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">$$${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$$${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -589,7 +709,7 @@ image::images/value-method-cc.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">if (${CONDITION variableFromPreviousAssignment instanceof="boolean" default="true"}) {${selection}${cursor}}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">if (${CONDITION variableFromPreviousAssignment instanceof="boolean" default="true"}) {${selection}${cursor}}</code></pre>
</div>
</div>
<div class="paragraph">
@@ -675,20 +795,45 @@ image::images/value-method-cc.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>打开 "Tools"（工具）> "Options"（选项）（在 Mac 上为 "NetBeans" > "Preferences"（首选项）），选择 "Editor"（编辑器）功能，然后选择 "Code Templates"（代码模板）标签。
-image::images/code-template-options.png[]</p>
+<p>打开 "Tools"（工具）> "Options"（选项）（在 Mac 上为 "NetBeans" > "Preferences"（首选项）），选择 "Editor"（编辑器）功能，然后选择 "Code Templates"（代码模板）标签。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-template-options.png" alt="code template options">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>单击 "New"（新建）以打开 "New Code Template"（新建代码模板）对话框。键入所需的模板缩写，然后单击 "OK"（确定）。
-image::images/new-abb.png[]</p>
+<p>单击 "New"（新建）以打开 "New Code Template"（新建代码模板）对话框。键入所需的模板缩写，然后单击 "OK"（确定）。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-abb.png" alt="new abb">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>将在代码模板表中添加一个新行。该行仅包含您提供的缩写。光标位于 "Expanded Text"（展开的文本）标签中，IDE 自动将光标放在该位置。您可以立即开始键入模板的代码。</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p>*注：*要了解代码模板的展开文本的语法，请参见 <a href="#syntax">PHP 代码模板语法</a>部分。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+要了解代码模板的展开文本的语法，请参见 <a href="#syntax">PHP 代码模板语法</a>部分。
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -760,7 +905,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">展开的文本：</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">defined('_JEXEC')or die('Restricted access');${cursor}
----</p></td>
@@ -796,7 +941,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">展开的文本：</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">${CONLINK newVarName default="link"} = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!${CONLINK}) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($$${CONLINK}); ${cursor}
----</p></td>
@@ -832,7 +977,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">展开的文本：</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">public function ${functionName}Action () {${selection}${cursor} }
----</p></td>
@@ -868,7 +1013,7 @@ image::images/new-abb.png[]</p>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">展开的文本：</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[source,java]
+<td class="tableblock halign-left valign-top"><p class="tableblock">[source,php]
----</p>
<p class="tableblock">${ELEMENT newVarName default="element"} = new Zend_Form_Element_Submit('submit', array('label' => 'Send data to server')); this→addElement($$${ELEMENT}); ${cursor}
----</p></td>
diff --git a/content/kb/docs/php/configure-php-environment-mac-os.html b/content/kb/docs/php/configure-php-environment-mac-os.html
index f9a4642..597c3cc 100644
--- a/content/kb/docs/php/configure-php-environment-mac-os.html
+++ b/content/kb/docs/php/configure-php-environment-mac-os.html
@@ -329,7 +329,7 @@ The MAMP package includes the Apache web server, PHP engine, and MySQL database.
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">;[Zend]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">;[Zend]
;zend_optimizer.optimization_level=15
;zend_extension_manager.optimizer=/Applications/MAMP/bin/php5/zend/lib/Optimizer-3.3.3
;zend_optimizer.version=3.3.3
@@ -346,7 +346,7 @@ The MAMP package includes the Apache web server, PHP engine, and MySQL database.
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">[xdebug]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[xdebug]
xdebug.default_enable=1
@@ -391,7 +391,7 @@ zend_extension="/Applications/MAMP/bin/php5/lib/php/extensions/no-debug-non-zts-
<div class="title">Figure 5. MAMP Control Panel with PHP tab, after Zend Optimizer has been unselected</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Start (or restart) the MAMP Apache server.</p>
</li>
diff --git a/content/kb/docs/php/configure-php-environment-mac-os_ja.html b/content/kb/docs/php/configure-php-environment-mac-os_ja.html
index bd3eea6..f116c37 100644
--- a/content/kb/docs/php/configure-php-environment-mac-os_ja.html
+++ b/content/kb/docs/php/configure-php-environment-mac-os_ja.html
@@ -113,12 +113,6 @@
<div class="paragraph">
<p><a href="http://www.Xdebug.org/">Xdebug</a>はPHPの拡張機能で、PHPスクリプトをデバッグするための有用な情報を提供します。NetBeansデバッガはXdebug拡張上で機能し、開発環境に効率的なデバッグ・ツールを提供します。</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます</div>
-</div>
<div class="paragraph">
<p><strong>このチュートリアルを完了するには、次のソフトウェアとリソースが必要です。</strong></p>
</div>
@@ -152,8 +146,17 @@
</tr>
</tbody>
</table>
-<div class="paragraph">
-<p>*注意: *MAMPパッケージにはApache Webサーバー、PHPエンジン、MySQLデータベースが含まれます。Mac OS X 10.5以降には、PHPサポート付きのMySQLデータベースとApacheサーバーが含まれます。IDEで組込みデータベースおよびサーバーを構成することは可能ですが、MAMPのオールインワン・バンドルで簡便かつ容易に構成可能なソリューションが提供されます。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+MAMPパッケージにはApache Webサーバー、PHPエンジン、MySQLデータベースが含まれます。Mac OS X 10.5以降には、PHPサポート付きのMySQLデータベースとApacheサーバーが含まれます。IDEで組込みデータベースおよびサーバーを構成することは可能ですが、MAMPのオールインワン・バンドルで簡便かつ容易に構成可能なソリューションが提供されます。
+</td>
+</tr>
+</table>
</div>
</div>
</div>
@@ -166,20 +169,50 @@
<p><a href="http://www.mamp.info/en/download.html">MAMP</a>の最新バージョンをダウンロードします。</p>
</li>
<li>
-<p>ダウンロードしたファイルを解凍し、<code>.dmg`ファイルを実行します。インストーラが表示されたら、MAMPを</code>/Applications`フォルダにドラッグします。
-image::images/mamp-install.png[title="MAMPおよびMAMP-Proオプションを示すMAMPインストーラ・パネル"]</p>
+<p>ダウンロードしたファイルを解凍し、<code>.dmg`ファイルを実行します。インストーラが表示されたら、MAMPを</code>/Applications`フォルダにドラッグします。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-install.png" alt="mamp install">
+</div>
+<div class="title">Figure 1. MAMPおよびMAMP-Proオプションを示すMAMPインストーラ・パネル</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>`/Applications/MAMP`に移動して`MAMP.app`をダブルクリックします。MAMPコントロール・パネルが開きます。</p>
</li>
</ol>
</div>
<div class="paragraph">
-<p>`MAMP/README.rtf`に説明されているとおりにMAMPコントロール・ダッシュボード・ウィジェットをインストールし、サーバーを起動および停止することもできます。
-image::images/mamp-control-panel.png[]
-4. 「プリファレンス」をクリックして「プリファレンス」パネルを開き、「ポート」タブを選択します。
-5. 「デフォルトのApacheおよびMySQLポートに設定」をクリックします。Apacheポートは80に、MySQLは3306にリセットされます。
-image::images/mamp-control-panel-preferences-ports.png[title="ポートをデフォルト値に変更した後のMAMPコントロール・パネルと「ポート」タブ"]</p>
+<p>`MAMP/README.rtf`に説明されているとおりにMAMPコントロール・ダッシュボード・ウィジェットをインストールし、サーバーを起動および停止することもできます。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-control-panel.png" alt="mamp control panel">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>「プリファレンス」をクリックして「プリファレンス」パネルを開き、「ポート」タブを選択します。</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>「デフォルトのApacheおよびMySQLポートに設定」をクリックします。Apacheポートは80に、MySQLは3306にリセットされます。</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-control-panel-preferences-ports.png" alt="mamp control panel preferences ports">
+</div>
+<div class="title">Figure 2. ポートをデフォルト値に変更した後のMAMPコントロール・パネルと「ポート」タブ</div>
</div>
</div>
</div>
@@ -211,12 +244,21 @@ image::images/mamp-control-panel-preferences-ports.png[title="ポートをデフ
<p>*管理ユーザー名: *<code>root</code></p>
</li>
<li>
-<p>*管理パスワード: *<code>root</code>
-image::images/mysql-basic-properties.png[title="MAMPのデフォルト接続設定を含むMySQL基本プロパティ・ダイアログ"]</p>
+<p>*管理パスワード: *<code>root</code></p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mysql-basic-properties.png" alt="mysql basic properties">
+</div>
+<div class="title">Figure 3. MAMPのデフォルト接続設定を含むMySQL基本プロパティ・ダイアログ</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>「管理プロパティ」タブを選択して、IDEからデータベース・サーバーを起動および停止するための設定を表示します。MAMPでは、<code>bin`フォルダにシェル・スクリプトが保持されます。ここで、サーバーを起動および停止するためのスクリプトを見つけることができます。管理ツールのパスに`MAMP.app`へのリンクを設定し、IDEを使用してMAMPのコントロール・パネルを開くことができます。これを行うには、</code>/Applications/MAMP/MAMP.app`を入力します。かわりに、管理操作(MySQLサーバーの構成およびモニタリング、ユーザーおよび接続の管理、バックアップの実行など)を実行するための直感的なGUIインタフェースが備えられた<a href="http://dev.mysql.com/downloads/workbench/">MySQL Workbench</a>を使用することもできます。 MySQL Workbenchを使用するには、まずダ
ウンロードおよびインストールし、次の設定をダイアログに入力します。</p>
<div class="ulist">
@@ -228,22 +270,43 @@ image::images/mysql-basic-properties.png[title="MAMPのデフォルト接続設
<p>*startコマンドのパス: *<code>/Applications/MAMP/bin/startMysql.sh</code></p>
</li>
<li>
-<p>*stopコマンドのパス: *<code>/Applications/MAMP/bin/stopMysql.sh</code>
-image::images/mysql-admin-props.png[title="サンプルの管理設定を含むMySQL管理プロパティ・ダイアログ"]</p>
+<p>*stopコマンドのパス: *<code>/Applications/MAMP/bin/stopMysql.sh</code></p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mysql-admin-props.png" alt="mysql admin props">
+</div>
+<div class="title">Figure 4. サンプルの管理設定を含むMySQL管理プロパティ・ダイアログ</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>MySQL WorkbenchをMySQL管理ツールとして使用する場合は、MAMPのデータベースへの接続用のソケットを指定する必要があります。MySQL Workbenchを起動し、メイン・ページでサーバー管理列の新規サーバー・インスタンスをクリックします。
-image::images/mysql-workbench-home.png[]</p>
+<p>MySQL WorkbenchをMySQL管理ツールとして使用する場合は、MAMPのデータベースへの接続用のソケットを指定する必要があります。MySQL Workbenchを起動し、メイン・ページでサーバー管理列の新規サーバー・インスタンスをクリックします。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mysql-workbench-home.png" alt="mysql workbench home">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>「新規サーバー・インスタンス・プロファイルの作成」ダイアログが開きます。ローカル・ソケット/パイプ接続方法を選択し、ソケット・ファイルのパスを「パラメータ」タブに追加します。ソケットのデフォルトの場所は`/Applications/MAMP/tmp/mysql/mysql.sock`です。
-image::images/socket-path.png[]</p>
+<p>「新規サーバー・インスタンス・プロファイルの作成」ダイアログが開きます。ローカル・ソケット/パイプ接続方法を選択し、ソケット・ファイルのパスを「パラメータ」タブに追加します。ソケットのデフォルトの場所は`/Applications/MAMP/tmp/mysql/mysql.sock`です。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/socket-path.png" alt="socket path">
+</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -253,7 +316,7 @@ image::images/socket-path.png[]</p>
<p>MAMPのリソースを使用してIDEでPHPプロジェクトを作成する場合、IDEでソースをApacheの`htdocs`フォルダにコピーするよう指定する必要があります。このようにして、変更後にファイルを保存する際に、ソースが自動的にデプロイ後バージョンで更新されます。</p>
</div>
<div class="paragraph">
-<p>たとえば、新しいPHPプロジェクトの作成時に、新規プロジェクト・ウィザードを使用します(IDEのツールバーで「新規プロジェクト」アイコンをクリック(image::images/new-project-icon.png[]))。ウィザードの3番目の手順「実行構成」で、「ファイルをソース・フォルダから別の場所にコピー」オプションを選択し、`htdocs`フォルダのパスを入力します。</p>
+<p>たとえば、新しいPHPプロジェクトの作成時に、新規プロジェクト・ウィザードを使用します(IDEのツールバーで「新規プロジェクト」アイコンをクリック(<span class="image"><img src="images/new-project-icon.png" alt="new project icon"></span>))。ウィザードの3番目の手順「実行構成」で、「ファイルをソース・フォルダから別の場所にコピー」オプションを選択し、`htdocs`フォルダのパスを入力します。</p>
</div>
<div class="openblock feature">
<div class="content">
@@ -286,12 +349,18 @@ image::images/socket-path.png[]</p>
</ol>
</div>
<div class="paragraph">
-<p><code>/Applications/MAMP/conf/php5/php.ini</code>
-2. <code>[Zend]</code> セクションを見つけて、各行をコメントにします。</p>
+<p><code>/Applications/MAMP/conf/php5/php.ini</code></p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p><code>[Zend]</code> セクションを見つけて、各行をコメントにします。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">;[Zend]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">;[Zend]
;zend_optimizer.optimization_level=15
;zend_extension_manager.optimizer=/Applications/MAMP/bin/php5/zend/lib/Optimizer-3.3.3
;zend_optimizer.version=3.3.3
@@ -300,7 +369,7 @@ image::images/socket-path.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p><code>[xdebug]</code> セクションを見つけて、Xdebugをアクティブ化します(`xxxxxxxx`を実際の数値に置き換えます)。このセクションが <code>php.ini</code> の末尾にない場合は追加します。</p>
</li>
@@ -308,7 +377,7 @@ image::images/socket-path.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[xdebug]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[xdebug]
xdebug.default_enable=1
@@ -322,13 +391,43 @@ zend_extension="/Applications/MAMP/bin/php5/lib/php/extensions/no-debug-non-zts-
</div>
</div>
<div class="paragraph">
-<p>これらのプロパティの説明については、<a href="http://www.Xdebug.org/docs/remote">Xdebugリモート・デバッグ</a>・ドキュメントの関連する設定を参照してください。
-4. 前の手順でXdebugに指定されたリモート・ポートは9000です。これは、NetBeansで使用されるデフォルトのデバッガ・ポートです。これを確認するには、メイン・メニューから「NetBeans」>「プリファレンス」を選択し、「オプション」ウィンドウで「PHP」を選択します。
- image::images/php-options68.png[title="デバッガ・ポートは、「PHPオプション」ウィンドウで設定できます。"]
-必要に応じて、ここでデバッガ・ポートを変更できます。
-5. MAMPコントロール・パネルを開き、「PHP」タブを選択します。Zendオプティマイザを選択解除します。
-image::images/mamp-control-panel-preferences-php.png[title="Zendオプティマイザを選択解除した後のMAMPコントロール・パネルと「PHP」タブ"]
-6. MAMP Apacheサーバーを起動(または再起動)します。</p>
+<p>これらのプロパティの説明については、<a href="http://www.Xdebug.org/docs/remote">Xdebugリモート・デバッグ</a>・ドキュメントの関連する設定を参照してください。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>前の手順でXdebugに指定されたリモート・ポートは9000です。これは、NetBeansで使用されるデフォルトのデバッガ・ポートです。これを確認するには、メイン・メニューから「NetBeans」>「プリファレンス」を選択し、「オプション」ウィンドウで「PHP」を選択します。</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-options68.png" alt="php options68">
+</div>
+<div class="title">Figure 5. デバッガ・ポートは、「PHPオプション」ウィンドウで設定できます。</div>
+</div>
+<div class="paragraph">
+<p>必要に応じて、ここでデバッガ・ポートを変更できます。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>MAMPコントロール・パネルを開き、「PHP」タブを選択します。Zendオプティマイザを選択解除します。</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-control-panel-preferences-php.png" alt="mamp control panel preferences php">
+</div>
+<div class="title">Figure 6. Zendオプティマイザを選択解除した後のMAMPコントロール・パネルと「PHP」タブ</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
+<li>
+<p>MAMP Apacheサーバーを起動(または再起動)します。</p>
+</li>
+</ol>
</div>
</div>
</div>
@@ -336,7 +435,7 @@ image::images/mamp-control-panel-preferences-php.png[title="Zendオプティマ
<h2 id="_phpプロジェクトのデバッグ">PHPプロジェクトのデバッグ</h2>
<div class="sectionbody">
<div class="paragraph">
-<p>IDEでPHPプロジェクトをデバッグするには、「プロジェクト」ウィンドウでプロジェクトを右クリックして「デバッグ」を選択します。プロジェクトが「プロジェクト」ウィンドウで強調表示されている場合は、メイン・ツールバーで「プロジェクトのデバッグ」アイコン(image::images/debug-icon.png[])をクリックできます。</p>
+<p>IDEでPHPプロジェクトをデバッグするには、「プロジェクト」ウィンドウでプロジェクトを右クリックして「デバッグ」を選択します。プロジェクトが「プロジェクト」ウィンドウで強調表示されている場合は、メイン・ツールバーで「プロジェクトのデバッグ」アイコン(<span class="image"><img src="images/debug-icon.png" alt="debug icon"></span>)をクリックできます。</p>
</div>
<div class="paragraph">
<p><a href="#phpOptions">「PHPオプション」ウィンドウ</a>でこのオプションを有効にすることで、コードの最初の行でデバッガを一時停止するよう設定できます。</p>
@@ -348,7 +447,7 @@ image::images/mamp-control-panel-preferences-php.png[title="Zendオプティマ
<div class="content">
<img src="images/debugger-toolbar.png" alt="debugger toolbar">
</div>
-<div class="title">Figure 2. 一時停止状態のデバッガ・ツールバー</div>
+<div class="title">Figure 7. 一時停止状態のデバッガ・ツールバー</div>
</div>
<div class="paragraph">
<p>「セッション」ウィンドウを開いて、PHPデバッグ・セッションがアクティブであることを確認することもできます。メイン・メニューから「ウィンドウ」>「デバッグ」>「セッション」を選択します。</p>
@@ -357,7 +456,7 @@ image::images/mamp-control-panel-preferences-php.png[title="Zendオプティマ
<div class="content">
<img src="images/debugger-sessions-win.png" alt="debugger sessions win">
</div>
-<div class="title">Figure 3. Xdebugデバッガ・セッションがアクティブなことを示す「セッション」ウィンドウ</div>
+<div class="title">Figure 8. Xdebugデバッガ・セッションがアクティブなことを示す「セッション」ウィンドウ</div>
</div>
<div class="paragraph">
<p><a href="/about/contact_form.html?to=3&subject=Feedback:%20Configuring%20PHP%20on%20Mac%20OS">このチュートリアルに関するご意見をお寄せください</a></p>
diff --git a/content/kb/docs/php/configure-php-environment-mac-os_pt_BR.html b/content/kb/docs/php/configure-php-environment-mac-os_pt_BR.html
index 089d092..a21190c 100644
--- a/content/kb/docs/php/configure-php-environment-mac-os_pt_BR.html
+++ b/content/kb/docs/php/configure-php-environment-mac-os_pt_BR.html
@@ -113,12 +113,6 @@
<div class="paragraph">
<p><a href="http://www.Xdebug.org/">Xdebug</a> é uma extensão para PHP que ajuda a fornecer informações valiosas para depuração de scripts PHP. O depurador do NetBeans funciona sobre a extensão Xdebug, fornecendo uma ferramenta de depuração eficiente no ambiente de desenvolvimento.</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0</div>
-</div>
<div class="paragraph">
<p><strong>Para concluir este tutorial, você precisa dos seguintes recursos e softwares.</strong></p>
</div>
@@ -152,8 +146,17 @@
</tr>
</tbody>
</table>
-<div class="paragraph">
-<p>*Observação: *o pacote MAMP inclui o servidor web Apache, o mecanismo PHP e o banco de dados MySQL. O Mac OS X 10.5 e mais recente incluem o banco de dados MySQL e o servidor Apache com suporte PHP. Embora certamente seja possível configurar o banco de dados e o servidor incorporado com o IDE, o pacote tudo em um do MAMP oferece uma solução prática e facilmente configurável.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+o pacote MAMP inclui o servidor web Apache, o mecanismo PHP e o banco de dados MySQL. O Mac OS X 10.5 e mais recente incluem o banco de dados MySQL e o servidor Apache com suporte PHP. Embora certamente seja possível configurar o banco de dados e o servidor incorporado com o IDE, o pacote tudo em um do MAMP oferece uma solução prática e facilmente configurável.
+</td>
+</tr>
+</table>
</div>
</div>
</div>
@@ -166,20 +169,50 @@
<p>Faça o download da versão mais recente do <a href="http://www.mamp.info/en/download.html">MAMP</a>.</p>
</li>
<li>
-<p>Extraia o arquivo de download e execute o arquivo <code>.dmg</code>. Quando o instalador for exibido, arraste o MAMP para a pasta <code>/Applications</code>.
-image::images/mamp-install.png[title="Painel do instalador do MAMP mostrando as opções MAMP e MAMP-Pro"]</p>
+<p>Extraia o arquivo de download e execute o arquivo <code>.dmg</code>. Quando o instalador for exibido, arraste o MAMP para a pasta <code>/Applications</code>.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-install.png" alt="mamp install">
+</div>
+<div class="title">Figure 1. Painel do instalador do MAMP mostrando as opções MAMP e MAMP-Pro</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Navegue até <code>/Applications/MAMP</code> e clique duas vezes em <code>MAMP.app</code>. É aberto o Painel de Controle do MAMP.</p>
</li>
</ol>
</div>
<div class="paragraph">
-<p>Você também pode instalar o widget do painel de controle do MAMP conforme descrito em <code>MAMP/README.rtf</code>, que permite iniciar e interromper servidores.
-image::images/mamp-control-panel.png[]
-4. Clique em Preferências para abrir o painel Preferências; em seguida, selecione a guia Portas.
-5. Clique em Definir como Padrão as portas do Apache e MySQL. A porta do Apache é redefinida como 80 e a do MySQL como 3306.
-image::images/mamp-control-panel-preferences-ports.png[title="Painel de controle do MAMP com a guia Portas, depois que as portas foram alteradas para os valores padrão"]</p>
+<p>Você também pode instalar o widget do painel de controle do MAMP conforme descrito em <code>MAMP/README.rtf</code>, que permite iniciar e interromper servidores.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-control-panel.png" alt="mamp control panel">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>Clique em Preferências para abrir o painel Preferências; em seguida, selecione a guia Portas.</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>Clique em Definir como Padrão as portas do Apache e MySQL. A porta do Apache é redefinida como 80 e a do MySQL como 3306.</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-control-panel-preferences-ports.png" alt="mamp control panel preferences ports">
+</div>
+<div class="title">Figure 2. Painel de controle do MAMP com a guia Portas, depois que as portas foram alteradas para os valores padrão</div>
</div>
</div>
</div>
@@ -211,12 +244,21 @@ image::images/mamp-control-panel-preferences-ports.png[title="Painel de controle
<p>*Nome do Usuário Administrador: *<code>root</code></p>
</li>
<li>
-<p>*Senha de Administrador: *<code>root</code>
-image::images/mysql-basic-properties.png[title="Caixa de diálogo Propriedades Básicas do MySQL contendo as definições de conectividade padrão do MAMP"]</p>
+<p>*Senha de Administrador: *<code>root</code></p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mysql-basic-properties.png" alt="mysql basic properties">
+</div>
+<div class="title">Figure 3. Caixa de diálogo Propriedades Básicas do MySQL contendo as definições de conectividade padrão do MAMP</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Selecione a guia Propriedades de Admin para exibir as definições que permitem a você iniciar e interromper o servidor de banco de dados no IDE. O MAMP mantém os scripts de shell na pasta <code>bin</code>. Nessa pasta, você encontra os scripts para iniciar e interromper os servidores. Para o caminho até a ferramenta Admin, você tem uma opção: pode estabelecer um link com <code>MAMP.app</code> de modo que possa usar o IDE para abrir o painel de controle do MAMP. Para isso, digite <code> [...]
<div class="ulist">
@@ -228,22 +270,43 @@ image::images/mysql-basic-properties.png[title="Caixa de diálogo Propriedades B
<p>*Caminho para o comando de início: *<code>/Applications/MAMP/bin/startMysql.sh</code></p>
</li>
<li>
-<p>*Caminho para o comando de interrupção: *<code>/Applications/MAMP/bin/stopMysql.sh</code>
-image::images/mysql-admin-props.png[title="Caixa de diálogo Propriedades de Admin do MySQL contendo definições de administração de amostra"]</p>
+<p>*Caminho para o comando de interrupção: *<code>/Applications/MAMP/bin/stopMysql.sh</code></p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mysql-admin-props.png" alt="mysql admin props">
+</div>
+<div class="title">Figure 4. Caixa de diálogo Propriedades de Admin do MySQL contendo definições de administração de amostra</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>Se você optar por usar o MySQL Workbench como sua ferramenta admin do MySQL, especifique o soquete para conexão com o banco de dados do MAMP. Inicie o MySQL Workbench e, na página principal, clique em Nova Instância do Servidor, na coluna Administração do Servidor.
-image::images/mysql-workbench-home.png[]</p>
+<p>Se você optar por usar o MySQL Workbench como sua ferramenta admin do MySQL, especifique o soquete para conexão com o banco de dados do MAMP. Inicie o MySQL Workbench e, na página principal, clique em Nova Instância do Servidor, na coluna Administração do Servidor.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mysql-workbench-home.png" alt="mysql workbench home">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>A caixa de diálogo Criar Perfil da Nova Instância do Servidor é aberta. Selecione o método de conexão Soquete/Pipe Local e adicione o caminho para o arquivo do soquete na guia Parâmetros. O local padrão do soquete é: <code>/Applications/MAMP/tmp/mysql/mysql.sock</code>.
-image::images/socket-path.png[]</p>
+<p>A caixa de diálogo Criar Perfil da Nova Instância do Servidor é aberta. Selecione o método de conexão Soquete/Pipe Local e adicione o caminho para o arquivo do soquete na guia Parâmetros. O local padrão do soquete é: <code>/Applications/MAMP/tmp/mysql/mysql.sock</code>.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/socket-path.png" alt="socket path">
+</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -253,7 +316,7 @@ image::images/socket-path.png[]</p>
<p>Quando você criar um projeto PHP no IDE usando recursos do MAMP, especifique para que o IDE copie os códigos-fonte na pasta <code>htdocs</code> do Apache. Dessa forma, depois de salvar seus arquivos após fazer alterações, os códigos-fonte sejam atualizados automaticamente na versão implantada.</p>
</div>
<div class="paragraph">
-<p>Por exemplo, ao criar um novo projeto PHP, use o Assistente de Novo Projeto (clique no ícone Novo Projeto, na barra de ferramentas do IDE ( image::images/new-project-icon.png[] ). Na terceira etapa do assistente, Executar Configuração, selecione a opção Copiar arquivos da Pasta de Códigos-fonte para outro local, e digite o caminho para a pasta <code>htdocs</code>.</p>
+<p>Por exemplo, ao criar um novo projeto PHP, use o Assistente de Novo Projeto (clique no ícone Novo Projeto, na barra de ferramentas do IDE ( <span class="image"><img src="images/new-project-icon.png" alt="new project icon"></span> ). Na terceira etapa do assistente, Executar Configuração, selecione a opção Copiar arquivos da Pasta de Códigos-fonte para outro local, e digite o caminho para a pasta <code>htdocs</code>.</p>
</div>
<div class="openblock feature">
<div class="content">
@@ -286,12 +349,18 @@ image::images/socket-path.png[]</p>
</ol>
</div>
<div class="paragraph">
-<p><code>/Applications/MAMP/conf/php5/php.ini</code>.
-2. Localize a seção <code>[Zend]</code> e transforme cada linha em comentário.</p>
+<p><code>/Applications/MAMP/conf/php5/php.ini</code>.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Localize a seção <code>[Zend]</code> e transforme cada linha em comentário.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">;[Zend]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">;[Zend]
;zend_optimizer.optimization_level=15
;zend_extension_manager.optimizer=/Applications/MAMP/bin/php5/zend/lib/Optimizer-3.3.3
;zend_optimizer.version=3.3.3
@@ -300,7 +369,7 @@ image::images/socket-path.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Localize a seção <code>[xdebug]</code> e ative o Xdebug (substitua <code>xxxxxxxx</code> pelo número real). Adicione essa seção ao final de <code>php.ini</code> se não estiver lá.</p>
</li>
@@ -308,7 +377,7 @@ image::images/socket-path.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[xdebug]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[xdebug]
xdebug.default_enable=1
@@ -322,13 +391,43 @@ zend_extension="/Applications/MAMP/bin/php5/lib/php/extensions/no-debug-non-zts-
</div>
</div>
<div class="paragraph">
-<p>Para obter uma explicação dessas propriedades, consulte Related Settings na documentação <a href="http://www.Xdebug.org/docs/remote">Xdebug Remote Debugging</a>.
-4. Observe que a porta remota especificada para o Xdebug na etapa anterior é 9000. Essa é a porta do depurador padrão usada no NetBeans. Para confirmar, escolha NetBeans > Preferências no menu principal e selecione PHP na janela Opções.
- image::images/php-options68.png[title="A porta de depuração pode ser definida na janela Opções PHP"]
-Se for necessário, você poderá alterar a porta do depurador aqui.
-5. Abra o painel de controle do MAMP e selecione a guia PHP. Desmarque Zend Optimizer.
-image::images/mamp-control-panel-preferences-php.png[title="Painel de Controle do MAMP com a guia PHP, depois que o Zend Optimizer foi desmarcado"]
-6. Inicie (ou reinicie) o servidor Apache do MAMP.</p>
+<p>Para obter uma explicação dessas propriedades, consulte Related Settings na documentação <a href="http://www.Xdebug.org/docs/remote">Xdebug Remote Debugging</a>.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>Observe que a porta remota especificada para o Xdebug na etapa anterior é 9000. Essa é a porta do depurador padrão usada no NetBeans. Para confirmar, escolha NetBeans > Preferências no menu principal e selecione PHP na janela Opções.</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-options68.png" alt="php options68">
+</div>
+<div class="title">Figure 5. A porta de depuração pode ser definida na janela Opções PHP</div>
+</div>
+<div class="paragraph">
+<p>Se for necessário, você poderá alterar a porta do depurador aqui.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>Abra o painel de controle do MAMP e selecione a guia PHP. Desmarque Zend Optimizer.</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-control-panel-preferences-php.png" alt="mamp control panel preferences php">
+</div>
+<div class="title">Figure 6. Painel de Controle do MAMP com a guia PHP, depois que o Zend Optimizer foi desmarcado</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
+<li>
+<p>Inicie (ou reinicie) o servidor Apache do MAMP.</p>
+</li>
+</ol>
</div>
</div>
</div>
@@ -336,7 +435,7 @@ image::images/mamp-control-panel-preferences-php.png[title="Painel de Controle d
<h2 id="_depurando_projetos_php">Depurando Projetos PHP</h2>
<div class="sectionbody">
<div class="paragraph">
-<p>Para depurar um projeto PHP no IDE, clique com o botão direito do mouse no projeto, na janela Projetos, e escolha Depurar. Como alternativa, se o projeto estiver destacado na janela Projetos, você poderá clicar no ícone Depurar Projeto ( image::images/debug-icon.png[] ) na barra de ferramentas principal.</p>
+<p>Para depurar um projeto PHP no IDE, clique com o botão direito do mouse no projeto, na janela Projetos, e escolha Depurar. Como alternativa, se o projeto estiver destacado na janela Projetos, você poderá clicar no ícone Depurar Projeto ( <span class="image"><img src="images/debug-icon.png" alt="debug icon"></span> ) na barra de ferramentas principal.</p>
</div>
<div class="paragraph">
<p>Você pode definir o depurador para ser suspenso na primeira linha de código, ativando essa opção na <a href="#phpOptions">janela Opções PHP</a>.</p>
@@ -348,7 +447,7 @@ image::images/mamp-control-panel-preferences-php.png[title="Painel de Controle d
<div class="content">
<img src="images/debugger-toolbar.png" alt="debugger toolbar">
</div>
-<div class="title">Figure 2. A barra de ferramentas do depurador em um estado suspenso</div>
+<div class="title">Figure 7. A barra de ferramentas do depurador em um estado suspenso</div>
</div>
<div class="paragraph">
<p>Você também pode abrir a janela Sessões para confirmar se uma sessão de depuração PHP está ativa. No menu principal, escolha Janela > Depuração > Sessões.</p>
@@ -357,7 +456,7 @@ image::images/mamp-control-panel-preferences-php.png[title="Painel de Controle d
<div class="content">
<img src="images/debugger-sessions-win.png" alt="debugger sessions win">
</div>
-<div class="title">Figure 3. A janela Sessões indica que uma sessão do depurador Xdebug está ativa</div>
+<div class="title">Figure 8. A janela Sessões indica que uma sessão do depurador Xdebug está ativa</div>
</div>
<div class="paragraph">
<p><a href="/about/contact_form.html?to=3&subject=Feedback:%20Configuring%20PHP%20on%20Mac%20OS">Enviar Feedback neste Tutorial</a></p>
diff --git a/content/kb/docs/php/configure-php-environment-mac-os_ru.html b/content/kb/docs/php/configure-php-environment-mac-os_ru.html
index 8a004a1..3b01da0 100644
--- a/content/kb/docs/php/configure-php-environment-mac-os_ru.html
+++ b/content/kb/docs/php/configure-php-environment-mac-os_ru.html
@@ -113,12 +113,6 @@
<div class="paragraph">
<p><a href="http://www.Xdebug.org/">Xdebug</a> - расширение для PHP, используемое для предоставления ценной информации для отладки сценариев PHP. Отладчик NetBeans работает поверх расширения Xdebug, что обеспечивает эффективный механизм отладки для среды разработки.</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. Содержимое этой страницы применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0</div>
-</div>
<div class="paragraph">
<p><strong>Для работы с этим учебным курсом требуются программное обеспечение и ресурсы, перечисленные ниже.</strong></p>
</div>
@@ -152,8 +146,17 @@
</tr>
</tbody>
</table>
-<div class="paragraph">
-<p>*Примечание. *В пакет MAMP входят веб-сервер Apache, модуль PHP и база данных MySQL. Mac OS X 10.5 и более поздние версии включают в себя базу данных MySQL и сервера Apache с поддержкой PHP. Разумеется, встроенную базу данных и сервер можно настроить и в IDE, но универсальный пакет MAMP представляет собой более удобное и простое решение.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+В пакет MAMP входят веб-сервер Apache, модуль PHP и база данных MySQL. Mac OS X 10.5 и более поздние версии включают в себя базу данных MySQL и сервера Apache с поддержкой PHP. Разумеется, встроенную базу данных и сервер можно настроить и в IDE, но универсальный пакет MAMP представляет собой более удобное и простое решение.
+</td>
+</tr>
+</table>
</div>
</div>
</div>
@@ -166,20 +169,50 @@
<p>Загрузите последнюю версию <a href="http://www.mamp.info/en/download.html">MAMP</a>.</p>
</li>
<li>
-<p>Распакуйте загруженный архив и запустите файл <code>.dmg</code>. Когда отобразится экран установщика, переместите MAMP в папку <code>/Applications</code>.
-image::images/mamp-install.png[title="На экране установщика MAMP отображаются компоненты MAMP и MAMP-Pro"]</p>
+<p>Распакуйте загруженный архив и запустите файл <code>.dmg</code>. Когда отобразится экран установщика, переместите MAMP в папку <code>/Applications</code>.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-install.png" alt="mamp install">
+</div>
+<div class="title">Figure 1. На экране установщика MAMP отображаются компоненты MAMP и MAMP-Pro</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Перейдите в папку <code>/Applications/MAMP</code> и дважды щелкните файл <code>MAMP.app</code>. Открывается панель управления MAMP.</p>
</li>
</ol>
</div>
<div class="paragraph">
-<p>Также можно установить виджет панели управления MAMP, следуя инструкциям в файле <code>MAMP/README.rtf</code>. С помощью этого виджета можно будет запускать и останавливать серверы.
-image::images/mamp-control-panel.png[]
-4. Нажмите "Предпочтения". На открывшейся панели "Предпочтения" перейдите на вкладку "Порты".
-5. Выберите параметр "Значения умолчанию" для портов Apache и MySQL. Для порта Apache устанавливается значение 80, а для порта MySQL - 3306.
-image::images/mamp-control-panel-preferences-ports.png[title="Панель управления MAMP со вкладкой "Порты", на которой установлены значения портов по умолчанию"]</p>
+<p>Также можно установить виджет панели управления MAMP, следуя инструкциям в файле <code>MAMP/README.rtf</code>. С помощью этого виджета можно будет запускать и останавливать серверы.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-control-panel.png" alt="mamp control panel">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>Нажмите "Предпочтения". На открывшейся панели "Предпочтения" перейдите на вкладку "Порты".</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>Выберите параметр "Значения умолчанию" для портов Apache и MySQL. Для порта Apache устанавливается значение 80, а для порта MySQL - 3306.</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-control-panel-preferences-ports.png" alt="mamp control panel preferences ports" width="Порты"" height="на которой установлены значения портов по умолчанию"">
+</div>
+<div class="title">Figure 2. Панель управления MAMP со вкладкой </div>
</div>
</div>
</div>
@@ -211,12 +244,21 @@ image::images/mamp-control-panel-preferences-ports.png[title="Панель уп
<p>*Имя администратора: *<code>root</code></p>
</li>
<li>
-<p>*Пароль администратора: *<code>root</code>
-image::images/mysql-basic-properties.png[title="В диалоговом окне "Основные свойства MySQL" можно настроить параметры подключений MAMP, используемые по умолчанию"]</p>
+<p>*Пароль администратора: *<code>root</code></p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mysql-basic-properties.png" alt="mysql basic properties" width="Основные свойства MySQL" можно настроить параметры подключений MAMP" height="используемые по умолчанию"">
+</div>
+<div class="title">Figure 3. В диалоговом окне </div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Перейдите на вкладку "Администрирование", где можно настроить параметры запуска и останова сервера баз данных в IDE. Сценарии оболочки MAMP хранятся в папке <code>bin</code>. Здесь находятся сценарии для запуска и останова серверов. Вы можете выбрать путь к средствам администрирования и связать IDE с файлом <code>MAMP.app</code>, чтобы в дальнейшем запускать панель управления MAMP из IDE. Для этого введите путь <code>/Applications/MAMP/MAMP.app</code>. В качестве альтернативы можно ис [...]
<div class="ulist">
@@ -228,22 +270,43 @@ image::images/mysql-basic-properties.png[title="В диалоговом окне
<p>*Путь для команды запуска: *<code>/Applications/MAMP/bin/startMysql.sh</code></p>
</li>
<li>
-<p>*Путь для команды останова: *<code>/Applications/MAMP/bin/stopMysql.sh</code>
-image::images/mysql-admin-props.png[title="В диалоговом окне "Администрирование MySQL" можно настроить примерные параметры администрирования"]</p>
+<p>*Путь для команды останова: *<code>/Applications/MAMP/bin/stopMysql.sh</code></p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mysql-admin-props.png" alt="mysql admin props" width="Администрирование MySQL" можно настроить примерные параметры администрирования"">
+</div>
+<div class="title">Figure 4. В диалоговом окне </div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>Если в качестве инструмента администрирования сервера MySQL планируется использовать MySQL Workbench, необходимо указать сокет для подключения к базе данных MAMP. Запустите MySQL Workbench. В разделе "Администрирование сервера" на главной странице выберите "Новый экземпляр сервера".
-image::images/mysql-workbench-home.png[]</p>
+<p>Если в качестве инструмента администрирования сервера MySQL планируется использовать MySQL Workbench, необходимо указать сокет для подключения к базе данных MAMP. Запустите MySQL Workbench. В разделе "Администрирование сервера" на главной странице выберите "Новый экземпляр сервера".</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mysql-workbench-home.png" alt="mysql workbench home">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>Отображается диалоговое окно "Создать профиль нового экземпляра сервера". Выберите метод подключения "Локальный сокет/канал" и укажите путь к файлу сокета на вкладке "Параметры". По умолчанию сокет находится в папке <code>/Applications/MAMP/tmp/mysql/mysql.sock</code>.
-image::images/socket-path.png[]</p>
+<p>Отображается диалоговое окно "Создать профиль нового экземпляра сервера". Выберите метод подключения "Локальный сокет/канал" и укажите путь к файлу сокета на вкладке "Параметры". По умолчанию сокет находится в папке <code>/Applications/MAMP/tmp/mysql/mysql.sock</code>.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/socket-path.png" alt="socket path">
+</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -253,7 +316,7 @@ image::images/socket-path.png[]</p>
<p>Для создания проектов PHP в IDE с использованием ресурсов MAMP необходимо настроить IDE таким образом, чтобы она копировала ваши ресурсы в папку Apache <code>htdocs</code>. В этом случае при сохранении изменений в файлах будет автоматически обновляться исходный код развернутой версии.</p>
</div>
<div class="paragraph">
-<p>Например, можно создать новый проект PHP с помощью мастера новых проектов (нажмите значок "Создать проект" на панели инструментов IDE ( image::images/new-project-icon.png[] ). На третьем экране мастера "Конфигурация запуска" выберите параметр "Копировать файлы из исходной папки в другое расположение" и укажите путь к папке <code>htdocs</code>.</p>
+<p>Например, можно создать новый проект PHP с помощью мастера новых проектов (нажмите значок "Создать проект" на панели инструментов IDE ( <span class="image"><img src="images/new-project-icon.png" alt="new project icon"></span> ). На третьем экране мастера "Конфигурация запуска" выберите параметр "Копировать файлы из исходной папки в другое расположение" и укажите путь к папке <code>htdocs</code>.</p>
</div>
<div class="openblock feature">
<div class="content">
@@ -286,12 +349,18 @@ image::images/socket-path.png[]</p>
</ol>
</div>
<div class="paragraph">
-<p><code>/Applications/MAMP/conf/php5/php.ini</code>.
-2. Найдите раздел <code>[Zend]</code> и закомментируйте в нем все строки.</p>
+<p><code>/Applications/MAMP/conf/php5/php.ini</code>.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Найдите раздел <code>[Zend]</code> и закомментируйте в нем все строки.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">;[Zend]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">;[Zend]
;zend_optimizer.optimization_level=15
;zend_extension_manager.optimizer=/Applications/MAMP/bin/php5/zend/lib/Optimizer-3.3.3
;zend_optimizer.version=3.3.3
@@ -300,7 +369,7 @@ image::images/socket-path.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Найдите раздел <code>[xdebug]</code> и активируйте Xdebug (замените <code>xxxxxxxx</code> фактическим номером). Добавьте в конец файла <code>php.ini</code> следующий раздел (если он отсутствует).</p>
</li>
@@ -308,7 +377,7 @@ image::images/socket-path.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[xdebug]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[xdebug]
xdebug.default_enable=1
@@ -322,13 +391,43 @@ zend_extension="/Applications/MAMP/bin/php5/lib/php/extensions/no-debug-non-zts-
</div>
</div>
<div class="paragraph">
-<p>Пояснения см. в разделе "Связанные настройки" документа <a href="http://www.Xdebug.org/docs/remote">Удаленная отладка Xdebug</a>.
-4. Обратите внимание, что на предыдущем этапе был указан удаленный порт Xdebug 9000. Этот порт отладчика используется в NetBeans по умолчанию. Чтобы проверить номер порта, выберите "NetBeans > Предпочтения" в главном меню, затем выберите PHP в окне "Параметры".
- image::images/php-options68.png[title="Порт отладки можно указать в окне "Параметры PHP""]
-При необходимости здесь можно изменить порт отладчика.
-5. Откройте панель управления MAMP и перейдите на вкладку "PHP". Снимите флажок для параметра Zend Optimizer.
-image::images/mamp-control-panel-preferences-php.png[title="Панель управления MAMP со вкладкой "Порты", на которой установлены значения портов по умолчанию"]
-6. Запустите (или перезапустите) сервер Apache MAMP.</p>
+<p>Пояснения см. в разделе "Связанные настройки" документа <a href="http://www.Xdebug.org/docs/remote">Удаленная отладка Xdebug</a>.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>Обратите внимание, что на предыдущем этапе был указан удаленный порт Xdebug 9000. Этот порт отладчика используется в NetBeans по умолчанию. Чтобы проверить номер порта, выберите "NetBeans > Предпочтения" в главном меню, затем выберите PHP в окне "Параметры".</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-options68.png" alt="php options68" width="Параметры PHP""">
+</div>
+<div class="title">Figure 5. Порт отладки можно указать в окне </div>
+</div>
+<div class="paragraph">
+<p>При необходимости здесь можно изменить порт отладчика.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>Откройте панель управления MAMP и перейдите на вкладку "PHP". Снимите флажок для параметра Zend Optimizer.</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-control-panel-preferences-php.png" alt="mamp control panel preferences php" width="Порты"" height="на которой установлены значения портов по умолчанию"">
+</div>
+<div class="title">Figure 6. Панель управления MAMP со вкладкой </div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
+<li>
+<p>Запустите (или перезапустите) сервер Apache MAMP.</p>
+</li>
+</ol>
</div>
</div>
</div>
@@ -336,7 +435,7 @@ image::images/mamp-control-panel-preferences-php.png[title="Панель упр
<h2 id="_Отладка_проектов_php">Отладка проектов PHP</h2>
<div class="sectionbody">
<div class="paragraph">
-<p>Чтобы выполнить отладку проекта PHP в IDE, щелкните проект правой кнопкой мыши в окне "Проекты" и выберите "Отладка". Также, если проект выбран в окне "Проекты", можно нажать значок "Отладка проекта" ( image::images/debug-icon.png[] ) на основной панели инструментов.</p>
+<p>Чтобы выполнить отладку проекта PHP в IDE, щелкните проект правой кнопкой мыши в окне "Проекты" и выберите "Отладка". Также, если проект выбран в окне "Проекты", можно нажать значок "Отладка проекта" ( <span class="image"><img src="images/debug-icon.png" alt="debug icon"></span> ) на основной панели инструментов.</p>
</div>
<div class="paragraph">
<p>Если требуется временно приостановить отладчик на первой строке кода, включите соответствующий параметр в окне <a href="#phpOptions">Параметры PHP</a>.</p>
@@ -348,7 +447,7 @@ image::images/mamp-control-panel-preferences-php.png[title="Панель упр
<div class="content">
<img src="images/debugger-toolbar.png" alt="debugger toolbar">
</div>
-<div class="title">Figure 2. Панель инструментов отладчика в приостановленном состоянии</div>
+<div class="title">Figure 7. Панель инструментов отладчика в приостановленном состоянии</div>
</div>
<div class="paragraph">
<p>Чтобы проверить, активен ли сеанс отладки PHP, также можно открыть окно "Сеансы". Выберите "Окно > Отладка > Сеансы" в главном меню.</p>
@@ -357,7 +456,7 @@ image::images/mamp-control-panel-preferences-php.png[title="Панель упр
<div class="content">
<img src="images/debugger-sessions-win.png" alt="debugger sessions win" width="Сеансы" указывает на то" height="что сеанс отладчика Xdebug активен"">
</div>
-<div class="title">Figure 3. Информация в окне </div>
+<div class="title">Figure 8. Информация в окне </div>
</div>
<div class="paragraph">
<p><a href="/about/contact_form.html?to=3&subject=Feedback:%20Configuring%20PHP%20on%20Mac%20OS">Отправить отзыв по этому учебному курсу</a></p>
diff --git a/content/kb/docs/php/configure-php-environment-mac-os_zh_CN.html b/content/kb/docs/php/configure-php-environment-mac-os_zh_CN.html
index a5c5b85..39ef946 100644
--- a/content/kb/docs/php/configure-php-environment-mac-os_zh_CN.html
+++ b/content/kb/docs/php/configure-php-environment-mac-os_zh_CN.html
@@ -152,8 +152,17 @@
</tr>
</tbody>
</table>
-<div class="paragraph">
-<p>*注：*MAMP 包中包含 Apache Web 服务器、PHP 引擎和 MySQL 数据库。Mac OS X 10.5 及更高版本包含支持 PHP 的 MySQL 数据库和 Apache 服务器。尽管确定可以使用 IDE 配置内置的数据库和服务器，但是 MAMP 的集功能于一身的包提供了一种简便轻松的可配置解决方案。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+MAMP 包中包含 Apache Web 服务器、PHP 引擎和 MySQL 数据库。Mac OS X 10.5 及更高版本包含支持 PHP 的 MySQL 数据库和 Apache 服务器。尽管确定可以使用 IDE 配置内置的数据库和服务器，但是 MAMP 的集功能于一身的包提供了一种简便轻松的可配置解决方案。
+</td>
+</tr>
+</table>
</div>
</div>
</div>
@@ -166,20 +175,50 @@
<p>下载最新版本的 <a href="http://www.mamp.info/en/download.html">MAMP</a>。</p>
</li>
<li>
-<p>提取下载的文件并运行 <code>.dmg</code> 文件。当安装程序显示时，将 MAMP 拖到 <code>/Applications</code> 文件夹中。
-image::images/mamp-install.png[title="显示 MAMP 和 MAMP-Pro 选项的 MAMP 安装程序面板"]</p>
+<p>提取下载的文件并运行 <code>.dmg</code> 文件。当安装程序显示时，将 MAMP 拖到 <code>/Applications</code> 文件夹中。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-install.png" alt="mamp install">
+</div>
+<div class="title">Figure 2. 显示 MAMP 和 MAMP-Pro 选项的 MAMP 安装程序面板</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>导航到 <code>/Applications/MAMP</code> 并双击 <code>MAMP.app</code>。此时将打开 MAMP 控制面板。</p>
</li>
</ol>
</div>
<div class="paragraph">
-<p>您还可以按照 <code>MAMP/README.rtf</code> 中所述安装 MAMP 控制板窗口部件，这使您能够启动和停止服务器。
-image::images/mamp-control-panel.png[]
-4. 单击 "Preferences"（首选项）打开 "Preferences"（首选项）面板，然后选择 "Ports"（端口）标签。
-5. 单击 "Set to Default Apache and MySQL ports"（设置为默认的 Apache 和 MySQL 端口）。Apache 端口将重置为 80，MySQL 端口将重置为 3306。
-image::images/mamp-control-panel-preferences-ports.png[title="在端口已更改为默认值之后带有 "Ports"（端口）标签的 MAMP 控制面板"]</p>
+<p>您还可以按照 <code>MAMP/README.rtf</code> 中所述安装 MAMP 控制板窗口部件，这使您能够启动和停止服务器。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-control-panel.png" alt="mamp control panel">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>单击 "Preferences"（首选项）打开 "Preferences"（首选项）面板，然后选择 "Ports"（端口）标签。</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>单击 "Set to Default Apache and MySQL ports"（设置为默认的 Apache 和 MySQL 端口）。Apache 端口将重置为 80，MySQL 端口将重置为 3306。</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-control-panel-preferences-ports.png" alt="mamp control panel preferences ports">
+</div>
+<div class="title">Figure 3. 在端口已更改为默认值之后带有 "Ports"（端口）标签的 MAMP 控制面板</div>
</div>
</div>
</div>
@@ -211,12 +250,21 @@ image::images/mamp-control-panel-preferences-ports.png[title="在端口已更改
<p><strong>Administrator User Name（管理员用户名）：</strong><code>root</code></p>
</li>
<li>
-<p><strong>Administrator Password（管理员口令）：</strong><code>root</code>
-image::images/mysql-basic-properties.png[title="包含 MAMP 默认连接设置的 "MySQL Basic Properties"（MySQL 基本属性）对话框"]</p>
+<p><strong>Administrator Password（管理员口令）：</strong><code>root</code></p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mysql-basic-properties.png" alt="mysql basic properties">
+</div>
+<div class="title">Figure 4. 包含 MAMP 默认连接设置的 "MySQL Basic Properties"（MySQL 基本属性）对话框</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>选择 "Admin Properties"（管理属性）标签以显示可用于从 IDE 中启动和停止数据库服务器的设置。MAMP 在 <code>bin</code> 文件夹中维护 Shell 脚本。可以在此文件夹中查找用于启动和停止服务器的脚本。您可以选择管理工具的路径；可以链接到 <code>MAMP.app</code>，这样您就可以使用 IDE 打开 MAMP 的控制面板。为此，请输入 <code>/Applications/MAMP/MAMP.app</code>。但是，替代选项将使用 <a href="http://dev.mysql.com/downloads/workbench/">MySQL Workbench</a>，它提供用于执行管理操作（即，配置和监视 MySQL 服务器，管理用户和连接，执行备份等）的直观 GUI 界面。要使用 MySQL Workbench，请先下载并安装它，然后在对话框中输入以下设置：</p>
<div class="ulist">
@@ -228,22 +276,43 @@ image::images/mysql-basic-properties.png[title="包含 MAMP 默认连接设置
<p><strong>启动命令的路径：</strong><code>/Applications/MAMP/bin/startMysql.sh</code></p>
</li>
<li>
-<p><strong>停止命令的路径：</strong><code>/Applications/MAMP/bin/stopMysql.sh</code>
-image::images/mysql-admin-props.png[title="包含样例管理设置的 "MySQL Admin Properties"（MySQL 管理属性）对话框"]</p>
+<p><strong>停止命令的路径：</strong><code>/Applications/MAMP/bin/stopMysql.sh</code></p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mysql-admin-props.png" alt="mysql admin props">
+</div>
+<div class="title">Figure 5. 包含样例管理设置的 "MySQL Admin Properties"（MySQL 管理属性）对话框</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>如果选择使用 MySQL Workbench 作为 MySQL 管理工具，则需要指定用于 MAMP 数据库连接的套接字。启动 MySQL Workbench，然后从主页中，单击 "Server Administration"（服务器管理）列中的 "New Server Instance"（新建服务器实例）。
-image::images/mysql-workbench-home.png[]</p>
+<p>如果选择使用 MySQL Workbench 作为 MySQL 管理工具，则需要指定用于 MAMP 数据库连接的套接字。启动 MySQL Workbench，然后从主页中，单击 "Server Administration"（服务器管理）列中的 "New Server Instance"（新建服务器实例）。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mysql-workbench-home.png" alt="mysql workbench home">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>此时将打开 "Create New Server Instance Profile"（新建服务器实例配置文件）对话框。选择 "Local Socket/Pipe"（本地套接字/管道）连接方法，并在 "Parameters"（参数）标签中添加套接字文件的路径。套接字的默认位置为：<code>/Applications/MAMP/tmp/mysql/mysql.sock</code>。
-image::images/socket-path.png[]</p>
+<p>此时将打开 "Create New Server Instance Profile"（新建服务器实例配置文件）对话框。选择 "Local Socket/Pipe"（本地套接字/管道）连接方法，并在 "Parameters"（参数）标签中添加套接字文件的路径。套接字的默认位置为：<code>/Applications/MAMP/tmp/mysql/mysql.sock</code>。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/socket-path.png" alt="socket path">
+</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -253,7 +322,7 @@ image::images/socket-path.png[]</p>
<p>在 IDE 中使用 MAMP 资源创建 PHP 项目时，应指定 IDE 将源复制到 Apache 的 <code>htdocs</code> 文件夹中。这样，当您在进行更改之后保存文件时，会自动在已部署版本中更新源。</p>
</div>
<div class="paragraph">
-<p>例如，创建新的 PHP 项目时，使用新建项目向导（在 IDE 的工具栏中单击 "New Project"（新建项目）图标）(image::images/new-project-icon.png[])。在此向导的第三步 "Run Configuration"（运行配置）中，选择 "Copy files from Sources Folder to anotherlocation"（将源文件夹中的文件复制到其他位置）选项，并键入 <code>htdocs</code> 文件夹的路径。</p>
+<p>例如，创建新的 PHP 项目时，使用新建项目向导（在 IDE 的工具栏中单击 "New Project"（新建项目）图标）(<span class="image"><img src="images/new-project-icon.png" alt="new project icon"></span>)。在此向导的第三步 "Run Configuration"（运行配置）中，选择 "Copy files from Sources Folder to anotherlocation"（将源文件夹中的文件复制到其他位置）选项，并键入 <code>htdocs</code> 文件夹的路径。</p>
</div>
<div class="openblock feature">
<div class="content">
@@ -286,12 +355,18 @@ image::images/socket-path.png[]</p>
</ol>
</div>
<div class="paragraph">
-<p><code>/Applications/MAMP/conf/php5/php.ini</code>。
-2. 找到 <code>[Zend]</code> 部分并注释掉每一行。</p>
+<p><code>/Applications/MAMP/conf/php5/php.ini</code>。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>找到 <code>[Zend]</code> 部分并注释掉每一行。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">;[Zend]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">;[Zend]
;zend_optimizer.optimization_level=15
;zend_extension_manager.optimizer=/Applications/MAMP/bin/php5/zend/lib/Optimizer-3.3.3
;zend_optimizer.version=3.3.3
@@ -300,7 +375,7 @@ image::images/socket-path.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>找到 <code>[xdebug]</code> 部分并激活 Xdebug（将 <code>xxxxxxxx</code> 替换为实际数字）。将此部分添加到 <code>php.ini</code> 结尾（如果不存在）。</p>
</li>
@@ -308,7 +383,7 @@ image::images/socket-path.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[xdebug]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[xdebug]
xdebug.default_enable=1
@@ -322,13 +397,43 @@ zend_extension="/Applications/MAMP/bin/php5/lib/php/extensions/no-debug-non-zts-
</div>
</div>
<div class="paragraph">
-<p>有关这些属性的说明，请参见 <a href="http://www.Xdebug.org/docs/remote">Xdebug 远程调试</a>文档中的“相关设置”。
-4. 请注意，在上一步中为 Xdebug 指定的远程端口为：9000。这是在 NetBeans 中使用的默认调试器端口。要对此进行验证，请从主菜单中选择 "NetBeans" > "Preferences"（首选项），然后在 "Options"（选项）窗口中选择 "PHP"。
- image::images/php-options68.png[title="可以在 "PHP Options"（PHP 选项）窗口中设置调试端口"]
-如果需要，您可以在此处更改调试器端口。
-5. 打开 MAMP 控制面板并选择 "PHP" 标签。取消选择 "Zend Optimizer"（Zend 优化器）。
-image::images/mamp-control-panel-preferences-php.png[title="取消选择 "Zend Optimizer"（Zend 优化器）之后带有 "PHP" 标签的 MAMP 控制面板"]
-6. 启动（或重新启动）MAMP Apache 服务器。</p>
+<p>有关这些属性的说明，请参见 <a href="http://www.Xdebug.org/docs/remote">Xdebug 远程调试</a>文档中的“相关设置”。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>请注意，在上一步中为 Xdebug 指定的远程端口为：9000。这是在 NetBeans 中使用的默认调试器端口。要对此进行验证，请从主菜单中选择 "NetBeans" > "Preferences"（首选项），然后在 "Options"（选项）窗口中选择 "PHP"。</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/php-options68.png" alt="php options68">
+</div>
+<div class="title">Figure 6. 可以在 "PHP Options"（PHP 选项）窗口中设置调试端口</div>
+</div>
+<div class="paragraph">
+<p>如果需要，您可以在此处更改调试器端口。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>打开 MAMP 控制面板并选择 "PHP" 标签。取消选择 "Zend Optimizer"（Zend 优化器）。</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/mamp-control-panel-preferences-php.png" alt="mamp control panel preferences php">
+</div>
+<div class="title">Figure 7. 取消选择 "Zend Optimizer"（Zend 优化器）之后带有 "PHP" 标签的 MAMP 控制面板</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
+<li>
+<p>启动（或重新启动）MAMP Apache 服务器。</p>
+</li>
+</ol>
</div>
</div>
</div>
@@ -336,7 +441,7 @@ image::images/mamp-control-panel-preferences-php.png[title="取消选择 "Z
<h2 id="_调试_php_项目">调试 PHP 项目</h2>
<div class="sectionbody">
<div class="paragraph">
-<p>要在 IDE 中调试 PHP 项目，请在 "Projects"（项目）窗口中右键单击该项目并选择 "Debug"（调试）。或者，如果在 "Projects"（项目）窗口中突出显示了该项目，可以单击主工具栏中的 "Debug Project"（调试项目）图标 (image::images/debug-icon.png[])。</p>
+<p>要在 IDE 中调试 PHP 项目，请在 "Projects"（项目）窗口中右键单击该项目并选择 "Debug"（调试）。或者，如果在 "Projects"（项目）窗口中突出显示了该项目，可以单击主工具栏中的 "Debug Project"（调试项目）图标 (<span class="image"><img src="images/debug-icon.png" alt="debug icon"></span>)。</p>
</div>
<div class="paragraph">
<p>通过在 <a href="#phpOptions">"PHP Options"（PHP 选项）窗口</a>中启用此选项，可以将调试器设置为在第一行代码处挂起。</p>
@@ -348,7 +453,7 @@ image::images/mamp-control-panel-preferences-php.png[title="取消选择 "Z
<div class="content">
<img src="images/debugger-toolbar.png" alt="debugger toolbar">
</div>
-<div class="title">Figure 2. 处于挂起状态的调试器工具栏</div>
+<div class="title">Figure 8. 处于挂起状态的调试器工具栏</div>
</div>
<div class="paragraph">
<p>您还可以通过打开 "Sessions"（会话）窗口来验证 PHP 调试会话是否处于活动状态。从主菜单中选择 "Window"（窗口）> "Debugging"（调试）> "Sessions"（会话）。</p>
@@ -357,7 +462,7 @@ image::images/mamp-control-panel-preferences-php.png[title="取消选择 "Z
<div class="content">
<img src="images/debugger-sessions-win.png" alt="debugger sessions win">
</div>
-<div class="title">Figure 3. "Sessions"（会话）窗口指示 Xdebug 调试器会话处于活动状态</div>
+<div class="title">Figure 9. "Sessions"（会话）窗口指示 Xdebug 调试器会话处于活动状态</div>
</div>
<div class="paragraph">
<p><a href="/about/contact_form.html?to=3&subject=Feedback:%20Configuring%20PHP%20on%20Mac%20OS">发送有关此教程的反馈意见</a></p>
diff --git a/content/kb/docs/php/configure-php-environment-ubuntu_ja.html b/content/kb/docs/php/configure-php-environment-ubuntu_ja.html
index 80ff77a..f183e09 100644
--- a/content/kb/docs/php/configure-php-environment-ubuntu_ja.html
+++ b/content/kb/docs/php/configure-php-environment-ubuntu_ja.html
@@ -128,12 +128,6 @@
<div class="paragraph">
<p>このチュートリアルでは、Ubuntuオペレーティング・システム(7.10以降)でPHP開発環境を構成する方法を示します。これには、PHPエンジン、MySQLデータベース、Apache Webサーバー、およびXDebugデバッガのインストールと構成が含まれます。</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます</div>
-</div>
<div class="paragraph">
<p><strong>このチュートリアルに従うには、次のソフトウェアとリソースが必要です。</strong></p>
</div>
@@ -208,7 +202,7 @@
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo tasksel install lamp-server</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo tasksel install lamp-server</code></pre>
</div>
</div>
<div class="literalblock">
@@ -252,8 +246,12 @@
<p>PHP Web Stackを設定した後に、正しくインストールされていること、およびApacheサーバーでPHPエンジンが認識されていることを確認します。</p>
</div>
<div class="paragraph">
-<p>ApacheとPHPがインストールされ、実行されていることを確認するには、NetBeans IDEを開き、<a href="./project-setup.html">PHPプロジェクトを作成</a>します。 <code>index.php</code> ファイルに、PHPメソッド <code>phpinfo()</code> を入力します。ファイルを実行します。標準のPHP情報ページが表示されます。
-image::images/ubuntu-phpinfo.png[]</p>
+<p>ApacheとPHPがインストールされ、実行されていることを確認するには、NetBeans IDEを開き、<a href="./project-setup.html">PHPプロジェクトを作成</a>します。 <code>index.php</code> ファイルに、PHPメソッド <code>phpinfo()</code> を入力します。ファイルを実行します。標準のPHP情報ページが表示されます。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/ubuntu-phpinfo.png" alt="ubuntu phpinfo">
+</div>
</div>
</div>
<div class="sect2">
@@ -273,7 +271,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">apt-get --purge remove php5-commonapt-get install php5 phpmyadmin</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">apt-get --purge remove php5-commonapt-get install php5 phpmyadmin</code></pre>
</div>
</div>
</div>
@@ -287,7 +285,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">/etc/apache2/sites-available/default</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">/etc/apache2/sites-available/default</code></pre>
</div>
</div>
<div class="paragraph">
@@ -295,7 +293,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">/var/www/</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">/var/www/</code></pre>
</div>
</div>
<div class="paragraph">
@@ -344,11 +342,11 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/mysite</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/mysite</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p><code>gedit</code> アプリケーションを実行し、そこで新しい構成ファイル( <code>mysite</code> )を編集します。</p>
</li>
@@ -356,20 +354,26 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">gksudo gedit /etc/apache2/sites-available/mysite</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">gksudo gedit /etc/apache2/sites-available/mysite</code></pre>
</div>
</div>
<div class="paragraph">
-<p>要求された場合は、オペレーティング・システムのインストール時にルート・ユーザー用に指定したパスワードを入力します。
-4. ドキュメント・ルートを変更し、新しい場所を指定します。</p>
+<p>要求された場合は、オペレーティング・システムのインストール時にルート・ユーザー用に指定したパスワードを入力します。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>ドキュメント・ルートを変更し、新しい場所を指定します。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">/home/<user>/public_html/</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">/home/<user>/public_html/</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Directoryディレクティブを変更します。</p>
</li>
@@ -377,7 +381,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><Directory /var/www/></code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash"><Directory /var/www/></code></pre>
</div>
</div>
<div class="paragraph">
@@ -385,7 +389,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><Directory /home/user/public_html/></code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash"><Directory /home/user/public_html/></code></pre>
</div>
</div>
<div class="imageblock">
@@ -394,7 +398,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>ファイル <code>mysite</code> を保存します。</p>
</li>
@@ -412,11 +416,11 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo a2dissite default &amp;&amp; sudo a2ensite mysite</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo a2dissite default &amp;&amp; sudo a2ensite mysite</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Apache HTTPサーバーを再起動します。</p>
</li>
@@ -424,7 +428,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo /etc/init.d/apache2 reload</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo /etc/init.d/apache2 reload</code></pre>
</div>
</div>
</div>
@@ -437,7 +441,7 @@ image::images/ubuntu-phpinfo.png[]</p>
<p>MySQLデータベース・サーバーのインストール時に、ルート・ユーザーが作成されます。インストール中に、ルート・ユーザーのパスワードを設定するダイアログが開きます。このダイアログが開かなかったか、このダイアログでパスワードを設定しなかった場合は、MySQLのルート・ユーザーのパスワードを今すぐ作成する必要があります。他のMySQLサーバー・ユーザーを作成するには、パスワードが必要になります。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="1">
<li>
<p>MySQLサーバーに接続するには、<a href="#launchTerminal">ターミナルを起動</a>し、ターミナル・ウィンドウで次のコマンドを入力します。</p>
</li>
@@ -445,16 +449,22 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">mysql -u root -p</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">mysql -u root -p</code></pre>
</div>
</div>
<div class="paragraph">
-<p>MySQLコマンド・プロンプトが表示されます。
-2. コマンド・プロンプトで次のコマンドを入力し、[Enter]を押します。</p>
+<p>MySQLコマンド・プロンプトが表示されます。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>コマンド・プロンプトで次のコマンドを入力し、[Enter]を押します。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">SET PASSWORD FOR 'root'@'localhost' = PASSWORD('<yourpassword>');</code></pre>
+<pre class="prettyprint highlight"><code class="language-sql" data-lang="sql">SET PASSWORD FOR 'root'@'localhost' = PASSWORD('<yourpassword>');</code></pre>
</div>
</div>
<div class="paragraph">
@@ -462,7 +472,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">Query OK, 0 rows affected (0.00 sec)</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">Query OK, 0 rows affected (0.00 sec)</code></pre>
</div>
</div>
</div>
@@ -506,25 +516,50 @@ image::images/ubuntu-phpinfo.png[]</p>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>依存パッケージの一覧が表示された「依存により要求された変更を追加しますか?」ダイアログ・ボックスが開きます(依存パッケージも、ソフトウェアの機能を有効にするためにインストールされます)。「マーク」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>システムが「Synapticパッケージ・マネージャ」パネルに戻ると、選択したパッケージにインストールのマークが付いています。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>ツールバーで「適用」を選択します。インストール対象として選択したパッケージの一覧が表示された「次の変更を適用のサマリー」パネルが開きます。「適用」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>ダウンロードとインストールが正常に完了したら、「変更を適用」パネルが開きます。「閉じる」をクリックします。</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p><strong>注意:</strong> ターミナル・ウィンドウで次のコマンドを実行することで、モジュールをインストールすることもできます。 <code>aptitude install php5-dev php-pear</code></p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+ターミナル・ウィンドウで次のコマンドを実行することで、モジュールをインストールすることもできます。 <code>aptitude install php5-dev php-pear</code>
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>これでXDebugをダウンロードし、インストールできます。ターミナル・ウィンドウに次のコマンドを入力します。</p>
</li>
@@ -532,7 +567,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo pecl install xdebug</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo pecl install xdebug</code></pre>
</div>
</div>
</div>
@@ -550,17 +585,29 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">gksudo gedit</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">gksudo gedit</code></pre>
</div>
</div>
<div class="paragraph">
-<p>要求された場合は、オペレーティング・システムのインストール時にルート・ユーザー用に指定したパスワードを入力します。
-2. ファイル <code>/etc/php5/apache2/php.ini</code> を開きます。
-3. ファイルに次の行を追加します。</p>
+<p>要求された場合は、オペレーティング・システムのインストール時にルート・ユーザー用に指定したパスワードを入力します。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>ファイル <code>/etc/php5/apache2/php.ini</code> を開きます。</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
+<li>
+<p>ファイルに次の行を追加します。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension=/usr/lib/php5/<DATE+lfs>/xdebug.so
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension=/usr/lib/php5/<DATE+lfs>/xdebug.so
xdebug.remote_enable=on</code></pre>
</div>
</div>
diff --git a/content/kb/docs/php/configure-php-environment-ubuntu_pt_BR.html b/content/kb/docs/php/configure-php-environment-ubuntu_pt_BR.html
index 16eed7e..6e4e450 100644
--- a/content/kb/docs/php/configure-php-environment-ubuntu_pt_BR.html
+++ b/content/kb/docs/php/configure-php-environment-ubuntu_pt_BR.html
@@ -128,12 +128,6 @@
<div class="paragraph">
<p>Este tutorial mostra como configurar o ambiente de desenvolvimento do PHP no sistema operacional Ubuntu (7.10 ou superior) Isso envolve a instalação e configuração do mecanismo PHP, um banco de dados MySQL, um servidor web Apache e o depurador XDebug.</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0</div>
-</div>
<div class="paragraph">
<p><strong>Para seguir este tutorial, são necessários os recursos e o software a seguir.</strong></p>
</div>
@@ -208,7 +202,7 @@
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo tasksel install lamp-server</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo tasksel install lamp-server</code></pre>
</div>
</div>
<div class="paragraph">
@@ -250,8 +244,12 @@
<p>Após configurar sua pilha web de PHP, verifique se ela está instalada corretamente e se o servidor Apache reconhece o mecanismo PHP.</p>
</div>
<div class="paragraph">
-<p>Para verificar se Apache e PHP estão instalados e em execução, abra o NetBeans IDE e <a href="./project-setup.html">crie um projeto PHP</a>. No arquivo <code>index.php</code> , insira o método PHP <code>phpinfo()</code> . Execute o arquivo. A página de informações do PHP padrão deverá ser exibida.
-image::images/ubuntu-phpinfo.png[]</p>
+<p>Para verificar se Apache e PHP estão instalados e em execução, abra o NetBeans IDE e <a href="./project-setup.html">crie um projeto PHP</a>. No arquivo <code>index.php</code> , insira o método PHP <code>phpinfo()</code> . Execute o arquivo. A página de informações do PHP padrão deverá ser exibida.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/ubuntu-phpinfo.png" alt="ubuntu phpinfo">
+</div>
</div>
</div>
<div class="sect2">
@@ -271,7 +269,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">apt-get --purge remove php5-commonapt-get install php5 phpmyadmin</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">apt-get --purge remove php5-commonapt-get install php5 phpmyadmin</code></pre>
</div>
</div>
</div>
@@ -285,7 +283,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">/etc/apache2/sites-available/default</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">/etc/apache2/sites-available/default</code></pre>
</div>
</div>
<div class="paragraph">
@@ -293,7 +291,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">/var/www/</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">/var/www/</code></pre>
</div>
</div>
<div class="paragraph">
@@ -343,11 +341,11 @@ acionar o Terminal, selecione Aplicações > Acessórios > Terminal. A jan
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/mysite</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/mysite</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Execute a aplicação <code>
gedit</code> e edite o novo arquivo de configuração ( <code>mysite</code> ) nela:</p>
@@ -356,20 +354,26 @@ gedit</code> e edite o novo arquivo de configuração ( <code>mysite</code> ) n
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">gksudo gedit /etc/apache2/sites-available/mysite</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">gksudo gedit /etc/apache2/sites-available/mysite</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Se solicitado, digite a senha especificada para o usuário raiz durante a instalação do sistema operacional.
-4. Altere a Raiz do Documento para apontar para o novo local:</p>
+<p>Se solicitado, digite a senha especificada para o usuário raiz durante a instalação do sistema operacional.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>Altere a Raiz do Documento para apontar para o novo local:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">/home/<user>/public_html/</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">/home/<user>/public_html/</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Alterar a diretiva Directory, substituir</p>
</li>
@@ -377,7 +381,7 @@ gedit</code> e edite o novo arquivo de configuração ( <code>mysite</code> ) n
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><Directory /var/www/></code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash"><Directory /var/www/></code></pre>
</div>
</div>
<div class="paragraph">
@@ -385,7 +389,7 @@ gedit</code> e edite o novo arquivo de configuração ( <code>mysite</code> ) n
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><Directory /home/user/public_html/></code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash"><Directory /home/user/public_html/></code></pre>
</div>
</div>
<div class="imageblock">
@@ -394,7 +398,7 @@ gedit</code> e edite o novo arquivo de configuração ( <code>mysite</code> ) n
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Salvar o arquivo <code>mysite</code></p>
</li>
@@ -412,11 +416,11 @@ gedit</code> e edite o novo arquivo de configuração ( <code>mysite</code> ) n
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo a2dissite default &amp;&amp; sudo a2ensite mysite</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo a2dissite default &amp;&amp; sudo a2ensite mysite</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Reinicie o servidor HTTP Apache:</p>
</li>
@@ -424,7 +428,7 @@ gedit</code> e edite o novo arquivo de configuração ( <code>mysite</code> ) n
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo /etc/init.d/apache2 reload</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo /etc/init.d/apache2 reload</code></pre>
</div>
</div>
</div>
@@ -437,7 +441,7 @@ gedit</code> e edite o novo arquivo de configuração ( <code>mysite</code> ) n
<p>Durante a instalação do servidor de banco de dados MySQL, um usuário raiz é criado. Durante a instalação, é exibida uma caixa de diálogo na qual você define a senha de usuário raiz. Se essa caixa de diálogo não tiver aberto ou se você não tiver definido uma senha nessa caixa de diálogo, terá que criar uma senha de usuário raiz MySQL agora. Você precisará da senha para criar outros usuários do servidor MySQL.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="1">
<li>
<p>Para se conectar ao servidor MySQL,<a href="#launchTerminal">acione o Terminal</a> e na janela Terminal, insira o seguinte comando:</p>
</li>
@@ -445,16 +449,22 @@ gedit</code> e edite o novo arquivo de configuração ( <code>mysite</code> ) n
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">mysql -u root -p</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">mysql -u root -p</code></pre>
</div>
</div>
<div class="paragraph">
-<p>O prompt de comando do MySQL será exibido.
-2. No prompt de comando, digite o seguinte comando e pressione Enter:</p>
+<p>O prompt de comando do MySQL será exibido.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>No prompt de comando, digite o seguinte comando e pressione Enter:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">SET PASSWORD FOR 'root'@'localhost' = PASSWORD('<yourpassword>');</code></pre>
+<pre class="prettyprint highlight"><code class="language-sql" data-lang="sql">SET PASSWORD FOR 'root'@'localhost' = PASSWORD('<yourpassword>');</code></pre>
</div>
</div>
<div class="paragraph">
@@ -462,7 +472,7 @@ gedit</code> e edite o novo arquivo de configuração ( <code>mysite</code> ) n
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">Query OK, 0 rows affected (0.00 sec)</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">Query OK, 0 rows affected (0.00 sec)</code></pre>
</div>
</div>
</div>
@@ -506,25 +516,50 @@ Para cada item, no menu de contexto, selecione Marcar para instalação.</p>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>A caixa de diálogo Marcar alterações adicionais necessárias será aberta com uma lista dos pacotes dependentes que também devem ser instalados para permitir o trabalho do software. Clique em Marcar.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>O sistema retornará para o painel Gerenciador do Pacote Synaptic onde os pacotes selecionados estão marcados para instalação.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Selecione Aplicar na barra de ferramentas. O painel de resumo Aplicar as seguintes alterações será aberto com uma lista dos pacotes selecionados para instalação. Clique em Aplicar.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>Quando o download e a instalação forem concluídos com êxito, o painel Alterações aplicadas será aberto. Clique em Fechar.</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p><strong>Observação:</strong> você também pode instalar os módulos executando o seguinte comando na janela Terminal: <code>aptitude install php5-dev php-pear</code></p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+você também pode instalar os módulos executando o seguinte comando na janela Terminal: <code>aptitude install php5-dev php-pear</code>
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Agora você pode fazer o download e instalar o XDebug. Digite o seguinte comando na janela Terminal:</p>
</li>
@@ -532,7 +567,7 @@ Para cada item, no menu de contexto, selecione Marcar para instalação.</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo pecl install xdebug</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo pecl install xdebug</code></pre>
</div>
</div>
</div>
@@ -550,17 +585,29 @@ Para cada item, no menu de contexto, selecione Marcar para instalação.</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">gksudo gedit</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">gksudo gedit</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Se solicitado, informe a senha especificada para o usuário raiz durante a instalação do sistema operacional.
-2. Abra o arquivo <code>/etc/php5/apache2/php.ini</code> .
-3. Adicione as linhas a seguir ao arquivo:</p>
+<p>Se solicitado, informe a senha especificada para o usuário raiz durante a instalação do sistema operacional.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Abra o arquivo <code>/etc/php5/apache2/php.ini</code> .</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
+<li>
+<p>Adicione as linhas a seguir ao arquivo:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension=/usr/lib/php5/<DATE+lfs>/xdebug.so
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension=/usr/lib/php5/<DATE+lfs>/xdebug.so
xdebug.remote_enable=on</code></pre>
</div>
</div>
diff --git a/content/kb/docs/php/configure-php-environment-ubuntu_ru.html b/content/kb/docs/php/configure-php-environment-ubuntu_ru.html
index 45c2986..9c810a8 100644
--- a/content/kb/docs/php/configure-php-environment-ubuntu_ru.html
+++ b/content/kb/docs/php/configure-php-environment-ubuntu_ru.html
@@ -128,12 +128,6 @@
<div class="paragraph">
<p>В данном учебном курсе рассматривается процедура настройки среды разработки PHP в операционной системе Ubuntu (версия 7.10 и более поздние). Эта процедура предполагает установку и настройку механизма PHP, базы данных MySQL, веб-сервера Apache и отладчика XDebug.</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. Содержимое этой страницы применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0</div>
-</div>
<div class="paragraph">
<p><strong>Для работы с этим учебным курсом требуется следующее программное обеспечение и ресурсы.</strong></p>
</div>
@@ -208,7 +202,7 @@
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo tasksel install lamp-server</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo tasksel install lamp-server</code></pre>
</div>
</div>
<div class="paragraph">
@@ -250,8 +244,12 @@
<p>После настройки пакета PHP Web Stack убедитесь в том, что он установлен правильно, а сервер Apache распознает механизм PHP.</p>
</div>
<div class="paragraph">
-<p>Чтобы убедиться, что Apache и PHP установлены и запущены, откройте IDE NetBeans и <a href="./project-setup.html">создайте проект PHP</a>. В файле <code>index.php</code> введите метод PHP <code>phpinfo()</code> . Запустите файл. При этом должна отобразиться стандартная информационная страница PHP.
-image::images/ubuntu-phpinfo.png[]</p>
+<p>Чтобы убедиться, что Apache и PHP установлены и запущены, откройте IDE NetBeans и <a href="./project-setup.html">создайте проект PHP</a>. В файле <code>index.php</code> введите метод PHP <code>phpinfo()</code> . Запустите файл. При этом должна отобразиться стандартная информационная страница PHP.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/ubuntu-phpinfo.png" alt="ubuntu phpinfo">
+</div>
</div>
</div>
<div class="sect2">
@@ -271,7 +269,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">apt-get --purge remove php5-commonapt-get install php5 phpmyadmin</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">apt-get --purge remove php5-commonapt-get install php5 phpmyadmin</code></pre>
</div>
</div>
</div>
@@ -285,7 +283,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">/etc/apache2/sites-available/default</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">/etc/apache2/sites-available/default</code></pre>
</div>
</div>
<div class="paragraph">
@@ -293,7 +291,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">/var/www/</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">/var/www/</code></pre>
</div>
</div>
<div class="paragraph">
@@ -343,11 +341,11 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/mysite</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/mysite</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Запустите приложение <code>
gedit</code> и отредактируйте в нем новый файл настройки ( <code>mysite</code> ):</p>
@@ -356,20 +354,26 @@ gedit</code> и отредактируйте в нем новый файл на
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">gksudo gedit /etc/apache2/sites-available/mysite</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">gksudo gedit /etc/apache2/sites-available/mysite</code></pre>
</div>
</div>
<div class="paragraph">
-<p>При появлении запроса введите пароль, определенный для пользователя root во время установки операционной системы.
-4. Измените корневой узел документов, указав в нем новое местоположение:</p>
+<p>При появлении запроса введите пароль, определенный для пользователя root во время установки операционной системы.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>Измените корневой узел документов, указав в нем новое местоположение:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">/home/<user>/public_html/</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">/home/<user>/public_html/</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Измените директиву Directory путем замены</p>
</li>
@@ -377,7 +381,7 @@ gedit</code> и отредактируйте в нем новый файл на
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><Directory /var/www/></code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash"><Directory /var/www/></code></pre>
</div>
</div>
<div class="paragraph">
@@ -385,7 +389,7 @@ gedit</code> и отредактируйте в нем новый файл на
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><Directory /home/user/public_html/></code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash"><Directory /home/user/public_html/></code></pre>
</div>
</div>
<div class="imageblock">
@@ -394,7 +398,7 @@ gedit</code> и отредактируйте в нем новый файл на
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Сохраните файл <code>mysite</code></p>
</li>
@@ -412,11 +416,11 @@ gedit</code> и отредактируйте в нем новый файл на
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo a2dissite default &amp;&amp; sudo a2ensite mysite</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo a2dissite default &amp;&amp; sudo a2ensite mysite</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Перезапустите сервер HTTP Apache:</p>
</li>
@@ -424,7 +428,7 @@ gedit</code> и отредактируйте в нем новый файл на
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo /etc/init.d/apache2 reload</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo /etc/init.d/apache2 reload</code></pre>
</div>
</div>
</div>
@@ -437,7 +441,7 @@ gedit</code> и отредактируйте в нем новый файл на
<p>Во время установки сервера базы данных MySQL создается учетная запись пользователя root (администратора). В ходе установки открывается диалоговое окно, в котором требуется указать пароль пользователя root (администратора). Если это диалоговое окно не открылось или если в нем не был задан пароль, необходимо создать пароль пользователя root (администратора) MySQL сейчас. Этот пароль требуется для создания других пользователей сервера MySQL.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="1">
<li>
<p>Для подключения к серверу MySQL<a href="#launchTerminal">запустите терминал</a> и в окне терминала введите следующую команду:</p>
</li>
@@ -445,16 +449,22 @@ gedit</code> и отредактируйте в нем новый файл на
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">mysql -u root -p</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">mysql -u root -p</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Появится командная строка MySQL.
-2. В этой командной строке введите следующую команду и нажмите ENTER:</p>
+<p>Появится командная строка MySQL.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>В этой командной строке введите следующую команду и нажмите ENTER:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">SET PASSWORD FOR 'root'@'localhost' = PASSWORD('<yourpassword>');</code></pre>
+<pre class="prettyprint highlight"><code class="language-sql" data-lang="sql">SET PASSWORD FOR 'root'@'localhost' = PASSWORD('<yourpassword>');</code></pre>
</div>
</div>
<div class="paragraph">
@@ -462,7 +472,7 @@ gedit</code> и отредактируйте в нем новый файл на
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">Query OK, 0 rows affected (0.00 sec)</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">Query OK, 0 rows affected (0.00 sec)</code></pre>
</div>
</div>
</div>
@@ -506,25 +516,50 @@ gedit</code> и отредактируйте в нем новый файл на
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Появится диалоговое окно "Mark additional required changes", содержащее список зависимых пакетов, установка которых также является необходимой для функционирования программного обеспечения. Нажмите кнопку "Mark".</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Происходит автоматический возврат к экрану "Synaptic Package Manager", на котором представлены выбранные пакеты, отмеченные для установки.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>На панели инструментов выберите "Apply". Появится экран "Apply the following changes summary" со списком пакетов, выбранных для установки. Нажмите кнопку "Apply".</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>После успешного завершения загрузки и установки появляется экран "Changes applied". Выберите "Close" (Закрыть).</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p><strong>Примечание.</strong> Модули также можно установить путем запуска следующей команды в окне 'Терминал': <code>aptitude install php5-dev php-pear</code></p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+Модули также можно установить путем запуска следующей команды в окне 'Терминал': <code>aptitude install php5-dev php-pear</code>
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>После этого можно загрузить и установить отладчик XDebug. Введите следующую команду в окне "Terminal":</p>
</li>
@@ -532,7 +567,7 @@ gedit</code> и отредактируйте в нем новый файл на
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo pecl install xdebug</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo pecl install xdebug</code></pre>
</div>
</div>
</div>
@@ -550,17 +585,29 @@ gedit</code> и отредактируйте в нем новый файл на
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">gksudo gedit</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">gksudo gedit</code></pre>
</div>
</div>
<div class="paragraph">
-<p>При появлении запроса введите пароль, определенный для пользователя root во время установки операционной системы.
-2. Откройте файл <code>/etc/php5/apache2/php.ini</code> .
-3. Добавьте в файл следующие строки:</p>
+<p>При появлении запроса введите пароль, определенный для пользователя root во время установки операционной системы.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Откройте файл <code>/etc/php5/apache2/php.ini</code> .</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
+<li>
+<p>Добавьте в файл следующие строки:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension=/usr/lib/php5/<DATE+lfs>/xdebug.so
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension=/usr/lib/php5/<DATE+lfs>/xdebug.so
xdebug.remote_enable=on</code></pre>
</div>
</div>
diff --git a/content/kb/docs/php/configure-php-environment-ubuntu_zh_CN.html b/content/kb/docs/php/configure-php-environment-ubuntu_zh_CN.html
index 9648c75..6ea701d 100644
--- a/content/kb/docs/php/configure-php-environment-ubuntu_zh_CN.html
+++ b/content/kb/docs/php/configure-php-environment-ubuntu_zh_CN.html
@@ -128,12 +128,6 @@
<div class="paragraph">
<p>本教程将介绍如何在 Ubuntu 操作系统（7.10 及更高版本）中配置 PHP 开发环境。其中包括安装和配置 PHP 引擎、MySQL 数据库、Apache Web 服务器和 XDebug 调试器。</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. 此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0</div>
-</div>
<div class="paragraph">
<p><strong>要学习本教程，您需要具备以下软件和资源。</strong></p>
</div>
@@ -208,7 +202,7 @@
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo tasksel install lamp-server</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo tasksel install lamp-server</code></pre>
</div>
</div>
<div class="literalblock">
@@ -252,8 +246,12 @@
<p>在设置 PHP Web 堆栈之后，应检查其安装是否正确，以及 Apache 服务器是否可以识别 PHP 引擎。</p>
</div>
<div class="paragraph">
-<p>要检查 Apache 和 PHP 是否已安装并正在运行，请打开 NetBeans IDE 并<a href="./project-setup.html">创建 PHP 项目</a>。在 <code>index.php</code> 文件中，输入 PHP 方法 <code>phpinfo()</code> 。运行该文件。此时应显示标准 PHP 信息页。
-image::images/ubuntu-phpinfo.png[]</p>
+<p>要检查 Apache 和 PHP 是否已安装并正在运行，请打开 NetBeans IDE 并<a href="./project-setup.html">创建 PHP 项目</a>。在 <code>index.php</code> 文件中，输入 PHP 方法 <code>phpinfo()</code> 。运行该文件。此时应显示标准 PHP 信息页。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/ubuntu-phpinfo.png" alt="ubuntu phpinfo">
+</div>
</div>
</div>
<div class="sect2">
@@ -273,7 +271,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">apt-get --purge remove php5-commonapt-get install php5 phpmyadmin</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">apt-get --purge remove php5-commonapt-get install php5 phpmyadmin</code></pre>
</div>
</div>
</div>
@@ -287,7 +285,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">/etc/apache2/sites-available/default</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">/etc/apache2/sites-available/default</code></pre>
</div>
</div>
<div class="paragraph">
@@ -295,7 +293,7 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">/var/www/</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">/var/www/</code></pre>
</div>
</div>
<div class="paragraph">
@@ -345,11 +343,11 @@ image::images/ubuntu-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/mysite</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/mysite</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>运行 <code>
gedit</code> 应用程序并在其中编辑新配置文件 ( <code>mysite</code> )：</p>
@@ -358,20 +356,26 @@ gedit</code> 应用程序并在其中编辑新配置文件 ( <code>mysite</code
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">gksudo gedit /etc/apache2/sites-available/mysite</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">gksudo gedit /etc/apache2/sites-available/mysite</code></pre>
</div>
</div>
<div class="paragraph">
-<p>如果系统询问，请输入操作系统安装过程中为超级用户指定的口令。
-4. 更改文档根目录以指向新位置：</p>
+<p>如果系统询问，请输入操作系统安装过程中为超级用户指定的口令。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>更改文档根目录以指向新位置：</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">/home/<user>/public_html/</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">/home/<user>/public_html/</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>更改目录指令，将</p>
</li>
@@ -379,7 +383,7 @@ gedit</code> 应用程序并在其中编辑新配置文件 ( <code>mysite</code
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><Directory /var/www/></code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash"><Directory /var/www/></code></pre>
</div>
</div>
<div class="paragraph">
@@ -387,7 +391,7 @@ gedit</code> 应用程序并在其中编辑新配置文件 ( <code>mysite</code
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><Directory /home/user/public_html/></code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash"><Directory /home/user/public_html/></code></pre>
</div>
</div>
<div class="imageblock">
@@ -396,7 +400,7 @@ gedit</code> 应用程序并在其中编辑新配置文件 ( <code>mysite</code
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>保存文件 <code>mysite</code></p>
</li>
@@ -414,11 +418,11 @@ gedit</code> 应用程序并在其中编辑新配置文件 ( <code>mysite</code
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo a2dissite default &amp;&amp; sudo a2ensite mysite</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo a2dissite default &amp;&amp; sudo a2ensite mysite</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>重新启动 Apache HTTP 服务器：</p>
</li>
@@ -426,7 +430,7 @@ gedit</code> 应用程序并在其中编辑新配置文件 ( <code>mysite</code
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo /etc/init.d/apache2 reload</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo /etc/init.d/apache2 reload</code></pre>
</div>
</div>
</div>
@@ -447,16 +451,22 @@ gedit</code> 应用程序并在其中编辑新配置文件 ( <code>mysite</code
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">mysql -u root -p</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">mysql -u root -p</code></pre>
</div>
</div>
<div class="paragraph">
-<p>此时将显示 MySQL 命令提示符。
-2. 在命令提示符下输入以下命令并按 Enter 键：</p>
+<p>此时将显示 MySQL 命令提示符。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>在命令提示符下输入以下命令并按 Enter 键：</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">SET PASSWORD FOR 'root'@'localhost' = PASSWORD('<yourpassword>');</code></pre>
+<pre class="prettyprint highlight"><code class="language-sql" data-lang="sql">SET PASSWORD FOR 'root'@'localhost' = PASSWORD('<yourpassword>');</code></pre>
</div>
</div>
<div class="paragraph">
@@ -464,7 +474,7 @@ gedit</code> 应用程序并在其中编辑新配置文件 ( <code>mysite</code
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">Query OK, 0 rows affected (0.00 sec)</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">Query OK, 0 rows affected (0.00 sec)</code></pre>
</div>
</div>
</div>
@@ -508,25 +518,50 @@ gedit</code> 应用程序并在其中编辑新配置文件 ( <code>mysite</code
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>打开“Mark additional required changes”对话框打开，其中具有相关包的列表，这些包也应该进行安装，以使软件能够正常工作。单击“Mark”。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>系统将返回到“Synaptic Package Manager”面板，其中所选的软件包已标记为要安装。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>选择工具栏上的“Apply”。此时将打开“Apply the following changes”概要面板，其中具有选择安装的包列表。单击“Apply”。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>成功完成下载和安装之后，“Changes applied”面板将会打开。单击 "Close"（关闭）。</p>
</li>
</ol>
</div>
-<div class="paragraph">
-<p>*注：*您也可以通过在“终端”窗口中运行以下命令来安装这些模块： <code>aptitude install php5-dev php-pear</code></p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+您也可以通过在“终端”窗口中运行以下命令来安装这些模块： <code>aptitude install php5-dev php-pear</code>
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>现在，您可以下载并安装 XDebug。在“终端”窗口中输入以下命令：</p>
</li>
@@ -534,7 +569,7 @@ gedit</code> 应用程序并在其中编辑新配置文件 ( <code>mysite</code
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">sudo pecl install xdebug</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">sudo pecl install xdebug</code></pre>
</div>
</div>
</div>
@@ -552,17 +587,29 @@ gedit</code> 应用程序并在其中编辑新配置文件 ( <code>mysite</code
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">gksudo gedit</code></pre>
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">gksudo gedit</code></pre>
</div>
</div>
<div class="paragraph">
-<p>如果系统询问，请输入操作系统安装过程中为超级用户指定的口令。
-2. 打开文件 <code>/etc/php5/apache2/php.ini</code> 。
-3. 将以下行添加到此文件中：</p>
+<p>如果系统询问，请输入操作系统安装过程中为超级用户指定的口令。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>打开文件 <code>/etc/php5/apache2/php.ini</code> 。</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
+<li>
+<p>将以下行添加到此文件中：</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension=/usr/lib/php5/<DATE+lfs>/xdebug.so
+<pre class="prettyprint highlight"><code class="language-bash" data-lang="bash">zend_extension=/usr/lib/php5/<DATE+lfs>/xdebug.so
xdebug.remote_enable=on</code></pre>
</div>
</div>
diff --git a/content/kb/docs/php/configure-php-environment-windows.html b/content/kb/docs/php/configure-php-environment-windows.html
index 2d1c82a..7434559 100644
--- a/content/kb/docs/php/configure-php-environment-windows.html
+++ b/content/kb/docs/php/configure-php-environment-windows.html
@@ -298,7 +298,7 @@ The <code>winmysqladmin.exe file</code> , which is launched by the Admin button
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>To ensure that the Apache and MySQL servers have been installed as system services, restart your operating system, run the browser, and enter the <code><a href="http://localhost" class="bare">http://localhost</a></code> URL again. The XAMPP welcome page opens. Note that the XAMPP welcome page includes a menu in the left margin through which you can check the status of XAMPP components and run <code>phpinfo()</code> , among other useful features. <code>phpinfo()</code> returns a s [...]
</li>
@@ -686,7 +686,8 @@ Make sure the paths you specify match the names and locations of the correspondi
<ol class="arabic" start="3">
<li>
<p>To be sure that previously installed PHP engine supports using the MySQL database server:</p>
-</li>
+<div class="olist arabic">
+<ol class="arabic">
<li>
<p>Click Start > Control Panel.</p>
</li>
@@ -716,6 +717,9 @@ Make sure the paths you specify match the names and locations of the correspondi
</li>
</ol>
</div>
+</li>
+</ol>
+</div>
</div>
</div>
</div>
diff --git a/content/kb/docs/php/configure-php-environment-windows_ja.html b/content/kb/docs/php/configure-php-environment-windows_ja.html
index d0ff371..8b67bea 100644
--- a/content/kb/docs/php/configure-php-environment-windows_ja.html
+++ b/content/kb/docs/php/configure-php-environment-windows_ja.html
@@ -121,12 +121,6 @@
<div class="paragraph">
<p>このチュートリアルでは、Windowsオペレーティング・システムでPHP開発環境を構成する2つの方法を示します。1つ目の最も便利な方法は、AMP (*A*pache、*M*ySQL、*P*HP)パッケージをインストールして構成することです。このチュートリアルでは、XAMPPパッケージをインストールする方法を示します。2つ目の方法は、各コンポーネントを個別にインストールして構成することです。</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます</div>
-</div>
<div class="paragraph">
<p><strong>このチュートリアルに従うには、次のソフトウェアとリソースが必要です。</strong></p>
</div>
@@ -193,7 +187,7 @@ XAMPP Windowsに含まれている。</p></td>
</li>
<li>
<p>データベース・サーバー。様々なデータベース・サーバーを使用できますが、最もポピュラなサーバーはMySQLサーバーです。<a href="http://dev.mysql.com/downloads/mysql/5.1.html">ここ</a>からダウンロードできます。
-<strong>注意:</strong> 製品の推奨バージョンはMySQL Server 5.0です。提供されているドキュメントでは、このバージョンでの操作を説明します。</p>
+NOTE: 製品の推奨バージョンはMySQL Server 5.0です。提供されているドキュメントでは、このバージョンでの操作を説明します。</p>
</li>
</ul>
</div>
@@ -219,8 +213,17 @@ XAMPP Windowsに含まれている。</p></td>
<div class="paragraph">
<p><strong>警告:</strong> XAMPP 1.7.0は使用しないでください。このバージョンは、XDebugに重大な問題があります。それらの問題が修正されているバージョン1.7.1以降を使用してください。</p>
</div>
-<div class="paragraph">
-<p>*注意: *XAMPP 1.7.2以降では、XAMPPにはPHP 5.2.xではなくPHP 5.3が付属しています。PHP向けのNetBeans IDEバージョン6.7.xは、PHP 5.3の新機能をサポートしていません。PHP向けのNetBeans IDE 6.8は、現在、PHP 5.3を完全にサポートする開発ビルドとして使用できます。また、PHP 5.2.xとPHP 5.3では、XDebugのインストールも異なります。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+XAMPP 1.7.2以降では、XAMPPにはPHP 5.2.xではなくPHP 5.3が付属しています。PHP向けのNetBeans IDEバージョン6.7.xは、PHP 5.3の新機能をサポートしていません。PHP向けのNetBeans IDE 6.8は、現在、PHP 5.3を完全にサポートする開発ビルドとして使用できます。また、PHP 5.2.xとPHP 5.3では、XDebugのインストールも異なります。
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -236,13 +239,21 @@ XAMPP Windowsに含まれている。</p></td>
<p>Microsoft Vistaの場合、ユーザー・アクセス制御機能により、PHPインストーラはApache httpdの構成を更新できません。XAMPPをインストールしている間は、UACを無効にします。詳細は、<a href="http://support.microsoft.com/kb/922708">Microsoftのサポート</a>を参照してください。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3.">
<li>
<p>ApacheサーバーとMySQLデータベース・サーバーをサービスとしてインストールするオプションがあります。ApacheサーバーとMySQLをサービスとしてインストールすると、これらをXAMPPコントロール・パネルから手動で起動する必要がありません。サービスは、<a href="#xamppConstolPanel">XAMPPコントロール・パネル</a>でインストールまたはアンインストールできます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4.">
<li>
<p>自己抽出型アーカイブを使用する場合は、アーカイブの抽出後に <code>setup-xampp.bat</code> ファイルを実行して、パッケージのコンポーネントを構成します。(XAMPPのインストーラではこのファイルが自動的に実行されます。)</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5.">
<li>
<p>構成が完了したら、XAMPPコントロール・パネルを開きます。(これを開くには、 <code>XAMPP_HOME/xampp-control.exe</code> ファイルを手動で実行するか、デスクトップに自動的に配置されるXAMPPコントロール・パネルのアイコンを使用します。)XAMPPコントロール・パネルを開くとき、サービスとしてインストールされたモジュールはすでに実行されています。</p>
</li>
@@ -260,7 +271,7 @@ XAMPP Windowsに含まれている。</p></td>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6.">
<li>
<p>「サービス」チェックボックスは、モジュールがWindowsのサービスとしてインストールされ、システムの起動時に自動的に起動することを示します。「サービス」チェックボックスを選択または選択解除することで、Windowsのサービスをインストールまたはアンインストールできます。Windowsのサービスをアンインストールしても、モジュールはアンインストールされませんが、モジュールを手動で起動する必要があります。XAMPPコントロール・パネルには、モジュールを停止または起動したり、その管理コンソールを開くためのボタンがあります。</p>
</li>
@@ -272,15 +283,27 @@ XAMPP Windowsに含まれている。</p></td>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>ブラウザを起動し、URLに <code><a href="http://localhost" class="bare">http://localhost</a></code> と入力します。XAMPPの開始ページが開きます。
-image::images/xampp-welcome-page.png[]</p>
+<p>ブラウザを起動し、URLに <code><a href="http://localhost" class="bare">http://localhost</a></code> と入力します。XAMPPの開始ページが開きます。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/xampp-welcome-page.png" alt="xampp welcome page">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2.">
<li>
-<p>ApacheおよびMySQLサーバーがシステム・サービスとしてインストールされていることを確認するには、オペレーティング・システムを再起動してブラウザを起動し、もう一度URLに <code><a href="http://localhost" class="bare">http://localhost</a></code> と入力します。XAMPPの開始ページが開きます。XAMPPの開始ページの左マージンにはメニューが表示されており、これらのメニューを使用して様々な便利機能の中から、XAMPPコンポーネントのステータスを確認したり、 <code>phpinfo()</code> を実行したりできます。 <code>phpinfo()</code> は、XAMPPコンポーネントの構成情報が表示された画面を返します。
-image::images/xampp-phpinfo.png[]</p>
+<p>ApacheおよびMySQLサーバーがシステム・サービスとしてインストールされていることを確認するには、オペレーティング・システムを再起動してブラウザを起動し、もう一度URLに <code><a href="http://localhost" class="bare">http://localhost</a></code> と入力します。XAMPPの開始ページが開きます。XAMPPの開始ページの左マージンにはメニューが表示されており、これらのメニューを使用して様々な便利機能の中から、XAMPPコンポーネントのステータスを確認したり、 <code>phpinfo()</code> を実行したりできます。 <code>phpinfo()</code> は、XAMPPコンポーネントの構成情報が表示された画面を返します。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/xampp-phpinfo.png" alt="xampp phpinfo">
+</div>
+</div>
</div>
<div class="sect2">
<h3 id="_xdebugデバッガのインストールと有効化">XDebugデバッガのインストールと有効化</h3>
@@ -310,7 +333,7 @@ image::images/xampp-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[Zend]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[Zend]
;zend_extension_ts = "C:\Program Files\xampp\php\zendOptimizer\lib\ZendExtensionManager.dll"
;zend_extension_manager.optimizer_ts = "C:\Program Files\xampplite\php\zendOptimizer\lib\Optimizer"
;zend_optimizer.enable_loader = 0
@@ -319,7 +342,7 @@ image::images/xampp-phpinfo.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4.">
<li>
<p>XDebugをPHPエンジンにアタッチするには、 <code>php.ini</code> ファイルで次の行のコメントを解除します(これらの行は[Zend]セクションのすぐ下にあり、ない場合は追加します)。追加のコメントがいくつか追加されています。</p>
</li>
@@ -327,7 +350,7 @@ image::images/xampp-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[XDebug]; Only Zend OR (!) XDebug
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[XDebug]; Only Zend OR (!) XDebug
zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
; XAMPP and XAMPP Lite 1.7.0 and later come with a bundled xdebug at <XAMPP_HOME>/php/ext/php_xdebug.dll, without a version number.xdebug.remote_enable=1xdebug.remote_host=127.0.0.1xdebug.remote_port=9000
; Port number must match debugger port number in NetBeans IDE Tools > Options > PHPxdebug.remote_handler=dbgpxdebug.profiler_enable=1xdebug.profiler_output_dir="<XAMPP_HOME>\tmp"</code></pre>
@@ -338,14 +361,27 @@ zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
<pre>``xdebug.remote_enable`` プロパティは1に設定し、trueやその他の値には設定しないでください。</pre>
</div>
</div>
-<div class="paragraph">
-<p><strong>注意:</strong> 指定するパスは、インストール時に定義した対応するファイルの場所と一致していることを確認してください。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+指定するパスは、インストール時に定義した対応するファイルの場所と一致していることを確認してください。
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5.">
<li>
<p><code>php.ini</code> を保存します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6.">
<li>
<p><a href="#xamppConstolPanel">XAMPPコントロール・パネル・アプリケーション</a>を実行し、Apacheサーバーを再起動します。
XDebugの構成方法の詳細は、<a href="http://wiki.netbeans.org/HowToConfigureXDebug">Wiki</a>および<a href="http://www.xdebug.org/docs/install">XDebugのドキュメント</a>を参照してください。</p>
@@ -412,10 +448,14 @@ XDebugの構成方法の詳細は、<a href="http://wiki.netbeans.org/HowToConfi
<p>Microsoft Vistaでは、Apacheサーバーをデフォルトの場所である「Program Files」にインストールしないでください。「Program Files」内のファイルはすべて書込み保護されます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3.">
<li>
<p>インストールが完了したら、Apacheサーバーを再起動します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4.">
<li>
<p>インストールが正常に終了したことを確認するには、ブラウザを起動し、次のURLを入力します。</p>
</li>
@@ -423,12 +463,16 @@ XDebugの構成方法の詳細は、<a href="http://wiki.netbeans.org/HowToConfi
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"> http://localhost/</code></pre>
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini"> http://localhost/</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Apacheの開始のテスト・ページが開きます。
-image::images/install-apache-it-works-port80.png[]</p>
+<p>Apacheの開始のテスト・ページが開きます。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/install-apache-it-works-port80.png" alt="install apache it works port80">
+</div>
</div>
<div class="sect3">
<h4 id="_トラブルシューティング">トラブルシューティング</h4>
@@ -472,19 +516,35 @@ image::images/install-apache-it-works-port80.png[]</p>
<p>*重要: *インストールするPHPバージョンのインストーラがない場合は、.zipファイルから手動でインストールする必要があります。php.netドキュメントの<a href="http://php.net/manual/en/install.windows.manual.php">手動による手順</a>を参照してください。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2.">
<li>
<p>ダウンロードが完了したら、 <code>.msi</code> インストール・ファイルを実行します。インストール・ウィザードが起動します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3.">
<li>
<p>「Apache Configuration Directory」パネルで、 <code>httpd.conf</code> があるディレクトリを指定します(デフォルトの設定は、 <code>C:\Program Files\Apache Software Foundation\Apache<version>\conf\</code> です)。PHP処理が自動的に有効になります。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4.">
<li>
<p>MySQLデータベース・サーバーを使用する場合は、「Complete」インストール・オプションを選択するか、「Extensions」リストでMySQLとMySQLiの項目を選択します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5.">
<li>
<p>インストールが完了した後、Apacheサーバーを再起動します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6.">
<li>
<p>PHPエンジンが正常にインストールされていること、およびApache構成でPHP処理が有効になっていることを確認するには:</p>
<div class="ulist">
@@ -510,11 +570,15 @@ image::images/install-apache-it-works-port80.png[]</p>
<p>htdocsフォルダにファイルを`test.php`として保存します。デフォルト・パスは、 <code>C:\Program Files\Apache Software Foundation\Apache<version>\htdocs\test.php</code> です。</p>
</li>
<li>
-<p>ブラウザを起動し、URLに <code><a href="http://localhost:<port>/test.php" class="bare">http://localhost:<port>/test.php</a></code> と入力します。次のページが開きます。
-image::images/install-php-test.png[]</p>
+<p>ブラウザを起動し、URLに <code><a href="http://localhost:<port>/test.php" class="bare">http://localhost:<port>/test.php</a></code> と入力します。次のページが開きます。</p>
</li>
</ul>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/install-php-test.png" alt="install php test">
+</div>
+</div>
<div class="sect3">
<h4 id="_トラブルシューティング_2">トラブルシューティング</h4>
<div class="paragraph">
@@ -532,15 +596,19 @@ image::images/install-php-test.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"> AddType Application/x-httpd-php .php
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini"> AddType Application/x-httpd-php .php
LoadModule php5_module "c:/php/sapi/php5apache2_2.dll"</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3.">
<li>
<p>行が見つからない場合は行を追加し、 <code>httpd.conf</code> を保存してApacheを再起動します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4.">
<li>
<p><a href="http://localhost:<port>/test.phpのページをリフレッシュします。" class="bare">http://localhost:<port>/test.phpのページをリフレッシュします。</a></p>
</li>
@@ -570,10 +638,14 @@ image::images/install-php-test.png[]</p>
<div class="sect2">
<h3 id="_環境の設定">環境の設定</h3>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="1.">
<li>
<p>デフォルトの設定に従ってインストールを実行した場合、PHP処理は自動的に有効になります。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2.">
<li>
<p>XDebugをPHPエンジンにアタッチするには、 <code>php.ini</code> ファイルを検索して次の行を追加します。</p>
</li>
@@ -584,7 +656,7 @@ image::images/install-php-test.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension_ts="<path to the php folder>/php_xdebug-<version-number>.dll"
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension_ts="<path to the php folder>/php_xdebug-<version-number>.dll"
xdebug.remote_enable=1</code></pre>
</div>
</div>
@@ -593,7 +665,7 @@ xdebug.remote_enable=1</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension_nts="<path to the php folder>/php_xdebug-<version-number>.dll"
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension_nts="<path to the php folder>/php_xdebug-<version-number>.dll"
xdebug.remote_enable=1</code></pre>
</div>
</div>
@@ -602,7 +674,7 @@ xdebug.remote_enable=1</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension="<path to the php folder>/php_xdebug-<version-number>.dll"
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension="<path to the php folder>/php_xdebug-<version-number>.dll"
xdebug.remote_enable=1</code></pre>
</div>
</div>
@@ -611,21 +683,31 @@ xdebug.remote_enable=1</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">xdebug.remote_host=127.0.0.1xdebug.remote_port=9000
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">xdebug.remote_host=127.0.0.1xdebug.remote_port=9000
; Port number must match debugger port number in NetBeans IDE Tools > Options > PHPxdebug.remote_handler=dbgp</code></pre>
</div>
</div>
<div class="paragraph">
<p>XDebugの構成方法の詳細は、<a href="http://www.xdebug.org/docs/install">ここ</a>をクリックしてください。</p>
</div>
-<div class="paragraph">
-<p><strong>注意:</strong> 指定するパスは、インストール時に定義した対応するファイルの名前および場所と一致していることを確認してください。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+指定するパスは、インストール時に定義した対応するファイルの名前および場所と一致していることを確認してください。
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3.">
<li>
<p>前にインストールしたPHPエンジンがMySQLデータベース・サーバーの使用をサポートしていることを確認するには:</p>
-</li>
+<div class="olist arabic">
+<ol class="arabic">
<li>
<p>「スタート」>「コントロール パネル」をクリックします。</p>
</li>
@@ -655,6 +737,9 @@ xdebug.remote_enable=1</code></pre>
</li>
</ol>
</div>
+</li>
+</ol>
+</div>
<div class="paragraph">
<p><a href="/about/contact_form.html?to=3&subject=Feedback:%20Configuring%20PHP%20on%20Windows">このチュートリアルに関するご意見をお寄せください</a></p>
</div>
diff --git a/content/kb/docs/php/configure-php-environment-windows_pt_BR.html b/content/kb/docs/php/configure-php-environment-windows_pt_BR.html
index 4a8a909..bbd8e36 100644
--- a/content/kb/docs/php/configure-php-environment-windows_pt_BR.html
+++ b/content/kb/docs/php/configure-php-environment-windows_pt_BR.html
@@ -121,12 +121,6 @@
<div class="paragraph">
<p>Este tutorial mostra duas formas de configurar o ambiente de desenvolvimento de PHP no sistema operacional Windows. A primeira e mais conveniente é instalar e configurar um pacote AMP (*A*pache, *M*ySQL, *P*HP). Este tutorial mostra como instalar o pacote XAMPP. A segunda maneira, é instalar e configurar cada componente separadamente.</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0</div>
-</div>
<div class="paragraph">
<p><strong>Para seguir este tutorial, são necessários os recursos e o software a seguir.</strong></p>
</div>
@@ -193,7 +187,7 @@ Incluído no XAMPP do Windows.</p></td>
</li>
<li>
<p>Um servidor de banco de dados. Você pode utilizar vários servidores de bancos de dados, embora um dos mais populares seja o MySQL. Os downloads estão disponíveis <a href="http://dev.mysql.com/downloads/mysql/5.1.html">aqui</a>.
-<strong>Observação:</strong> a versão recomendada do produto é MySQL Server 5.0. Os documentos fornecidos descrevem o trabalho com essa versão.</p>
+NOTE: a versão recomendada do produto é MySQL Server 5.0. Os documentos fornecidos descrevem o trabalho com essa versão.</p>
</li>
</ul>
</div>
@@ -219,8 +213,17 @@ Incluído no XAMPP do Windows.</p></td>
<div class="paragraph">
<p><strong>Advertência:</strong> NÃO use XAMPP 1.7.0. Há problemas significativos com o XDebug nessa versão. Use a versão 1.7.1 ou superior, em que esses problemas foram corrigidos.</p>
</div>
-<div class="paragraph">
-<p>*Observação: *a partir do XAMPP 1.7.2, o XAMPP vem com PHP 5.3, não PHP 5.2.x. O NetBeans IDE para PHP, versão 6.7.x, não oferece suporte às novas funções do PHP 5.3. O NetBeans IDE para PHP 6.8, atualmente disponível como construtor de desenvolvimento, oferece suporte total ao PHP 5.3. Observe também que a instalação do Xdebug difere entre o PHP 5.2.x e o PHP 5.3.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+a partir do XAMPP 1.7.2, o XAMPP vem com PHP 5.3, não PHP 5.2.x. O NetBeans IDE para PHP, versão 6.7.x, não oferece suporte às novas funções do PHP 5.3. O NetBeans IDE para PHP 6.8, atualmente disponível como construtor de desenvolvimento, oferece suporte total ao PHP 5.3. Observe também que a instalação do Xdebug difere entre o PHP 5.2.x e o PHP 5.3.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -236,13 +239,21 @@ Incluído no XAMPP do Windows.</p></td>
<p>No Microsoft Vista, a funcionalidade Controle de Acesso do Usuário impede que o instalador do PHP atualize a configuração do httpd Apache. Desative o UAC ao instalar o XAMPP. Consulte o <a href="http://support.microsoft.com/kb/922708">Suporte da Microsoft</a> para obter mais informações.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3.">
<li>
<p>Você tem a opção de instalar o servidor Apache e o servidor de banco de dados MySQL como serviços. Se instalar o Servidor Apache e o MySQL como serviços, não terá que iniciá-los manualmente pelo Painel de Controle do XAMPP. Observe que você tem a opção de instalar ou desinstalar esses serviços no <a href="#xamppConstolPanel">Painel de Controle do XAMPP</a>.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4.">
<li>
<p>Se estiver utilizando o arquivo compactado autoextraível, depois de ele ter sido extraído, execute o arquivo <code>setup-xampp.bat</code> para configurar os componentes do pacote. (O instalador do XAMPP executa automaticamente o arquivo).</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5.">
<li>
<p>Após configurar, abra o Painel de Controle do XAMPP. (Você pode abri-lo manualmente executando o arquivo <code>XAMPP_HOME/xampp-control.exe</code> ou a partir do ícone Painel de Controle do Xampp, que é automaticamente colocado em sua área de trabalho.) Ao abrir o Painel de Controle do XAMPP, observe que os módulos instalados como serviços já estão em execução.</p>
</li>
@@ -260,7 +271,7 @@ Incluído no XAMPP do Windows.</p></td>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6.">
<li>
<p>As caixas de seleção Svc indicam que um módulo está instalado como um serviço do Windows e será automaticamente iniciado na inicialização do sistema. Você pode instalar ou desinstalar os serviços do Windows marcando ou desmarcando a caixa de seleção Svc. A desinstalação de um serviço do Windows não desinstala o módulo, mas requer a inicialização manual do módulo. O painel de controle do XAMPP inclui botões para parar e iniciar módulos e para abrir seus consoles de administração.</p>
</li>
@@ -272,15 +283,27 @@ Incluído no XAMPP do Windows.</p></td>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Execute o browser e digite o seguinte URL: <code><a href="http://localhost" class="bare">http://localhost</a></code> . A página de boas-vindas do XAMPP será aberta:
-image::images/xampp-welcome-page.png[]</p>
+<p>Execute o browser e digite o seguinte URL: <code><a href="http://localhost" class="bare">http://localhost</a></code> . A página de boas-vindas do XAMPP será aberta:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/xampp-welcome-page.png" alt="xampp welcome page">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2.">
<li>
-<p>Para garantir que os servidores Apache e MySQL tenham sido instalados como serviços do sistema, reinicie o sistema operacional, execute o browser e digite o URL <code><a href="http://localhost" class="bare">http://localhost</a></code> novamente. A página de boas-vindas do XAMPP será aberta. Observe se a página de boas-vindas do XAMPP inclui um menu na margem esquerda, por meio do qual você pode verificar o status dos componentes do XAMPP e executar o <code>phpinfo()</code> , entre [...]
-image::images/xampp-phpinfo.png[]</p>
+<p>Para garantir que os servidores Apache e MySQL tenham sido instalados como serviços do sistema, reinicie o sistema operacional, execute o browser e digite o URL <code><a href="http://localhost" class="bare">http://localhost</a></code> novamente. A página de boas-vindas do XAMPP será aberta. Observe se a página de boas-vindas do XAMPP inclui um menu na margem esquerda, por meio do qual você pode verificar o status dos componentes do XAMPP e executar o <code>phpinfo()</code> , entre [...]
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/xampp-phpinfo.png" alt="xampp phpinfo">
+</div>
+</div>
</div>
<div class="sect2">
<h3 id="_instalando_e_ativando_o_depurador_xdebug">Instalando e Ativando o Depurador XDebug</h3>
@@ -310,7 +333,7 @@ image::images/xampp-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[Zend]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[Zend]
;zend_extension_ts = "C:\Program Files\xampp\php\zendOptimizer\lib\ZendExtensionManager.dll"
;zend_extension_manager.optimizer_ts = "C:\Program Files\xampplite\php\zendOptimizer\lib\Optimizer"
;zend_optimizer.enable_loader = 0
@@ -319,7 +342,7 @@ image::images/xampp-phpinfo.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4.">
<li>
<p>Para anexar
XDebug ao mecanismo PHP, remova o comentário das linhas a seguir nos arquivos <code>php.ini</code> (diretamente abaixo da seção [Zend], adicione-os caso não estejam presentes). Algumas notas adicionais foram acrescentadas.</p>
@@ -328,7 +351,7 @@ XDebug ao mecanismo PHP, remova o comentário das linhas a seguir nos arquivos
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[XDebug]; Only Zend OR (!) XDebug
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[XDebug]; Only Zend OR (!) XDebug
zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
; XAMPP and XAMPP Lite 1.7.0 and later come with a bundled xdebug at <XAMPP_HOME>/php/ext/php_xdebug.dll, without a version number.xdebug.remote_enable=1xdebug.remote_host=127.0.0.1xdebug.remote_port=9000
; Port number must match debugger port number in NetBeans IDE Tools > Options > PHPxdebug.remote_handler=dbgpxdebug.profiler_enable=1xdebug.profiler_output_dir="<XAMPP_HOME>\tmp"</code></pre>
@@ -337,14 +360,27 @@ zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
<div class="paragraph">
<p>Defina a propriedade <code>xdebug.remote_enable</code> como 1, não "true" ou qualquer outro valor.</p>
</div>
-<div class="paragraph">
-<p><strong>Observação:</strong> certifique-se de que os caminhos especificados coincidam com o local dos arquivos correspondentes, conforme determinado durante a instalação.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+certifique-se de que os caminhos especificados coincidam com o local dos arquivos correspondentes, conforme determinado durante a instalação.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5.">
<li>
<p>Salve o <code>php.ini</code> .</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6.">
<li>
<p>Execute a <a href="#xamppConstolPanel">Aplicação Painel de Controle do XAMPP</a> e reinicie o servidor Apache.
Consulte <a href="http://wiki.netbeans.org/HowToConfigureXDebug">nosso wiki</a> e a <a href="http://www.xdebug.org/docs/install">documentação do XDebug</a> para obter mais informações sobre como configurar o XDebug.</p>
@@ -411,10 +447,14 @@ Consulte <a href="http://wiki.netbeans.org/HowToConfigureXDebug">nosso wiki</a>
<p>No Microsoft Vista, não instale o Servidor Apache na localização default, que é Arquivos de Programas. Todos os arquivos em Arquivos de Programas estão protegidos contra gravação.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3.">
<li>
<p>Quando a instalação tiver sido concluída, reinicie o servidor Apache.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4.">
<li>
<p>Para verificar se a instalação foi bem-sucedida, execute o browser e insira o seguinte URL:</p>
</li>
@@ -422,12 +462,16 @@ Consulte <a href="http://wiki.netbeans.org/HowToConfigureXDebug">nosso wiki</a>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"> http://localhost/</code></pre>
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini"> http://localhost/</code></pre>
</div>
</div>
<div class="paragraph">
-<p>A página de teste de boas-vindas do Apache será aberta:
-image::images/install-apache-it-works-port80.png[]</p>
+<p>A página de teste de boas-vindas do Apache será aberta:</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/install-apache-it-works-port80.png" alt="install apache it works port80">
+</div>
</div>
<div class="sect3">
<h4 id="_solução_de_problemas">Solução de Problemas</h4>
@@ -461,7 +505,7 @@ image::images/install-apache-it-works-port80.png[]</p>
<div class="sect2">
<h3 id="_mecanismo_php">Mecanismo PHP</h3>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="1.">
<li>
<p>Faça download do <a href="http://windows.php.net/download/">instalador binário do Windows</a> para a versão PHP5 de sua escolha.</p>
</li>
@@ -471,19 +515,35 @@ image::images/install-apache-it-works-port80.png[]</p>
<p>*Importante: *se não houver um instalador disponível na versão do PHP que você deseja instalar, instale-o manualmente pelo arquivo .zip. Consulte <a href="http://php.net/manual/en/install.windows.manual.php">Etapas de Instrução Manual</a> na documentação do php.net.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2.">
<li>
<p>Quando o download estiver concluído, execute o arquivo de instalação <code>.msi</code> . O assistente de instalação é iniciado.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3.">
<li>
<p>No painel Diretório de Configuração do Apache, especifique o diretório onde o arquivo <code>httpd.conf</code> está localizado, a definição default é <code>C:\Arquivos de Programas\Apache Software Foundation\Apache<versão>\conf\</code> . O processamento do PHP será ativado automaticamente.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4.">
<li>
<p>Se você desejar utilizar o servidor de banco de dados MySQL, escolha a opção de instalação Completa ou selecione os itens MySQL e MySQLi na lista Extensões.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5.">
<li>
<p>Depois que a instalação tiver sido concluída, reinicie o servidor Apache.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6.">
<li>
<p>Para verificar se o mecanismo PHP foi instalado com êxito e o processamento do PHP foi ativado na configuração do Apache:</p>
<div class="ulist">
@@ -509,11 +569,15 @@ image::images/install-apache-it-works-port80.png[]</p>
<p>Salve o arquivo na pasta htdocs como <code>test.php</code>. O caminho padrão é <code>C:\Program Files\Apache Software Foundation\Apache<version>\htdocs\test.php</code></p>
</li>
<li>
-<p>Execute o browser e digite o seguinte URL: <code><a href="http://localhost:<porta>/test.php" class="bare">http://localhost:<porta>/test.php</a></code> . A página a seguir será aberta:
-image::images/install-php-test.png[]</p>
+<p>Execute o browser e digite o seguinte URL: <code><a href="http://localhost:<porta>/test.php" class="bare">http://localhost:<porta>/test.php</a></code> . A página a seguir será aberta:</p>
</li>
</ul>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/install-php-test.png" alt="install php test">
+</div>
+</div>
<div class="sect3">
<h4 id="_solução_de_problemas_2">Solução de Problemas</h4>
<div class="paragraph">
@@ -531,15 +595,19 @@ image::images/install-php-test.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"> AddType Application/x-httpd-php .php
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini"> AddType Application/x-httpd-php .php
LoadModule php5_module "c:/php/sapi/php5apache2_2.dll"</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3.">
<li>
<p>Se as linhas estiverem ausentes, adicione-as, salve o <code>httpd.conf</code> e reinicie o Apache.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4.">
<li>
<p>Atualize a página <a href="http://localhost:<port>/test.php" class="bare">http://localhost:<port>/test.php</a>.</p>
</li>
@@ -584,7 +652,7 @@ XDebug ao mecanismo PHP, localize o arquivo <code>php.ini</code> e adicione as
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension_ts="<path to the php folder>/php_xdebug-<version-number>.dll"
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension_ts="<path to the php folder>/php_xdebug-<version-number>.dll"
xdebug.remote_enable=1</code></pre>
</div>
</div>
@@ -593,7 +661,7 @@ xdebug.remote_enable=1</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension_nts="<path to the php folder>/php_xdebug-<version-number>.dll"
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension_nts="<path to the php folder>/php_xdebug-<version-number>.dll"
xdebug.remote_enable=1</code></pre>
</div>
</div>
@@ -602,7 +670,7 @@ xdebug.remote_enable=1</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension="<path to the php folder>/php_xdebug-<version-number>.dll"
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension="<path to the php folder>/php_xdebug-<version-number>.dll"
xdebug.remote_enable=1</code></pre>
</div>
</div>
@@ -611,21 +679,31 @@ xdebug.remote_enable=1</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">xdebug.remote_host=127.0.0.1xdebug.remote_port=9000
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">xdebug.remote_host=127.0.0.1xdebug.remote_port=9000
; Port number must match debugger port number in NetBeans IDE Tools > Options > PHPxdebug.remote_handler=dbgp</code></pre>
</div>
</div>
<div class="paragraph">
<p>Clique <a href="http://www.xdebug.org/docs/install">aqui</a> para obter mais informações sobre como configurar o XDebug.</p>
</div>
-<div class="paragraph">
-<p><strong>Observação:</strong> certifique-se de que os caminhos especificados coincidam com os nomes e os locais dos arquivos correspondentes, conforme determinado durante a instalação.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+certifique-se de que os caminhos especificados coincidam com os nomes e os locais dos arquivos correspondentes, conforme determinado durante a instalação.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3.">
<li>
<p>Para ter certeza de que o mecanismo PHP instalado anteriormente suporte a utilização do servidor de banco de dados MySQL:</p>
-</li>
+<div class="olist arabic">
+<ol class="arabic">
<li>
<p>Clique em Iniciar > Painel de Controle.</p>
</li>
@@ -655,6 +733,9 @@ xdebug.remote_enable=1</code></pre>
</li>
</ol>
</div>
+</li>
+</ol>
+</div>
<div class="paragraph">
<p><a href="/about/contact_form.html?to=3&subject=Feedback:%20Configuring%20PHP%20on%20Windows">Enviar Feedback neste Tutorial</a></p>
</div>
diff --git a/content/kb/docs/php/configure-php-environment-windows_ru.html b/content/kb/docs/php/configure-php-environment-windows_ru.html
index ab30607..742a573 100644
--- a/content/kb/docs/php/configure-php-environment-windows_ru.html
+++ b/content/kb/docs/php/configure-php-environment-windows_ru.html
@@ -121,12 +121,6 @@
<div class="paragraph">
<p>В данном учебном курсе рассматриваются два способа настройки среды разработки PHP в операционной системе Windows. Первый и наиболее удобный способ состоит в установке и настройке пакета AMP (*A*pache, *М*ySQL, *P*HP). В данном учебном курсе приводится процедура установки пакета XAMPP. Второй способ состоит в установке и настройке каждого компонента по отдельности.</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. Содержимое этой страницы применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0</div>
-</div>
<div class="paragraph">
<p><strong>Для работы с этим учебным курсом требуется следующее программное обеспечение и ресурсы.</strong></p>
</div>
@@ -193,7 +187,7 @@
</li>
<li>
<p>Сервер базы данных. Существует возможность использования различных серверов базы данных, однако самым популярным из них является сервер MySQL. Загрузку можно осуществить <a href="http://dev.mysql.com/downloads/mysql/5.1.html">отсюда</a>.
-<strong>Примечание.</strong> Рекомендуемая версия продукта: MySQL Server 5.0. В предоставленных документах описывается работа с этой версией.</p>
+NOTE: Рекомендуемая версия продукта: MySQL Server 5.0. В предоставленных документах описывается работа с этой версией.</p>
</li>
</ul>
</div>
@@ -219,8 +213,17 @@
<div class="paragraph">
<p><strong>Предупреждение!</strong> НЕ используйте XAMPP 1.7.0. В этой версии имеются значительные проблемы с XDebug. Используйте версию 1.7.1 или выше, где эти неполадки устранены.</p>
</div>
-<div class="paragraph">
-<p>*Примечание: * Начиная с XAMPP 1.7.2, XAMPP поставляется с PHP 5.3а не с PHP 5.2.x. IDE NetBeans для PHP версии 6.7.x не поддерживает новые функции PHP 5.3. IDE NetBeans для PHP 6.8, которая в настоящее время доступна как сборка разработки, полностью поддерживает PHP 5.3. Также обратите внимание, что установка Xdebug различается для PHP 5.2.x и PHP 5.3.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+Начиная с XAMPP 1.7.2, XAMPP поставляется с PHP 5.3а не с PHP 5.2.x. IDE NetBeans для PHP версии 6.7.x не поддерживает новые функции PHP 5.3. IDE NetBeans для PHP 6.8, которая в настоящее время доступна как сборка разработки, полностью поддерживает PHP 5.3. Также обратите внимание, что установка Xdebug различается для PHP 5.2.x и PHP 5.3.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -236,13 +239,21 @@
<p>В Microsoft Vista функция контроля учетных записей пользователей (UAC) блокирует обновление установщиком PHP настройки службы httpd Apache. На время установки XAMPP следует отключить UAC. Для получения дополнительных сведений обратитесь к разделу <a href="http://support.microsoft.com/kb/922708">Поддержка Майкрософт</a>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Можно установить сервер Apache и сервер базы данных MySQL как веб-службы. Если Apache Server и MySQL установлены как службы, то нет необходимости запускать их вручную с помощью "XAMP Control Panel". Следует учитывать, что установить и удалить эти службы можно с помощью <a href="#xamppConstolPanel">панели управления XAMPP</a>.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>При использовании самораспаковывающегося архива после его распаковки запустите файл <code>setup-xampp.bat</code> для настройки компонентов пакета. Программа установки XAMPP запускает этот файл автоматически.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>После настройки откройте панель управления XAMP. Эту панель можно открыть посредством запуска файла <code>XAMPP_HOME/xampp-control.exe</code> или с помощью значка панель управления XAMPP, автоматически размещаемого на рабочем столе. При открытии панели управления XAMPP следует учитывать, что модули, установленные как службы, уже выполняются.</p>
</li>
@@ -260,7 +271,7 @@
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Флажки "Svc" указывают на то, что модуль устанавливается как служба Windows и автоматически выполняется при запуске системы. Службы Windows устанавливаются и удаляются при установке и снятии флажка "Svc". При удалении службы Windows сам модуль не удаляется, однако необходимо запускать его вручную. Панель управления XAMPP включает в себя кнопки запуска и остановки модулей, а также открытия их консолей администратора.</p>
</li>
@@ -272,15 +283,27 @@
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Запустите браузер и введите следующий URL-адрес: <code><a href="http://localhost" class="bare">http://localhost</a></code> . Откроется страница приветствия XAMPP:
-image::images/xampp-welcome-page.png[]</p>
+<p>Запустите браузер и введите следующий URL-адрес: <code><a href="http://localhost" class="bare">http://localhost</a></code> . Откроется страница приветствия XAMPP:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/xampp-welcome-page.png" alt="xampp welcome page">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>В целях обеспечения установки серверов Apache и MySQL в качестве служб системы перезапустите операционную систему, запустите браузер и повторно введите URL-адрес <code><a href="http://localhost" class="bare">http://localhost</a></code> . Откроется страница приветствия XAMPP. Обратите внимание на то, что в левом поле страницы приветствия XAMPP имеется меню, посредством которого можно проверить состояние компонентов XAMPP, запустить <code>phpinfo()</code> , а также воспользоваться дру [...]
-image::images/xampp-phpinfo.png[]</p>
+<p>В целях обеспечения установки серверов Apache и MySQL в качестве служб системы перезапустите операционную систему, запустите браузер и повторно введите URL-адрес <code><a href="http://localhost" class="bare">http://localhost</a></code> . Откроется страница приветствия XAMPP. Обратите внимание на то, что в левом поле страницы приветствия XAMPP имеется меню, посредством которого можно проверить состояние компонентов XAMPP, запустить <code>phpinfo()</code> , а также воспользоваться дру [...]
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/xampp-phpinfo.png" alt="xampp phpinfo">
+</div>
+</div>
</div>
<div class="sect2">
<h3 id="_Установка_и_включение_отладчика_xdebug">Установка и включение отладчика XDebug</h3>
@@ -310,7 +333,7 @@ image::images/xampp-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[Zend]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[Zend]
;zend_extension_ts = "C:\Program Files\xampp\php\zendOptimizer\lib\ZendExtensionManager.dll"
;zend_extension_manager.optimizer_ts = "C:\Program Files\xampplite\php\zendOptimizer\lib\Optimizer"
;zend_optimizer.enable_loader = 0
@@ -319,7 +342,7 @@ image::images/xampp-phpinfo.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Для присоединения
XDebug к механизму PHP раскомментируйте следующие строки в файлах <code>php.ini</code> (добавьте эти строки непосредственно в разделе [Zend]), если они отсутствуют. Добавлены дополнительные примечания.</p>
@@ -328,7 +351,7 @@ XDebug к механизму PHP раскомментируйте следующ
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[XDebug]; Only Zend OR (!) XDebug
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[XDebug]; Only Zend OR (!) XDebug
zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
; XAMPP and XAMPP Lite 1.7.0 and later come with a bundled xdebug at <XAMPP_HOME>/php/ext/php_xdebug.dll, without a version number.xdebug.remote_enable=1xdebug.remote_host=127.0.0.1xdebug.remote_port=9000
; Port number must match debugger port number in NetBeans IDE Tools > Options > PHPxdebug.remote_handler=dbgpxdebug.profiler_enable=1xdebug.profiler_output_dir="<XAMPP_HOME>\tmp"</code></pre>
@@ -337,14 +360,27 @@ zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
<div class="paragraph">
<p>Установите свойство <code>xdebug.remote_enable</code> в значение 1, а не в значение "true" или другое значение.</p>
</div>
-<div class="paragraph">
-<p><strong>Примечание.</strong> Убедитесь в том, что указанные пути соответствуют расположению соответствующих файлов, как это определено при установке.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+Убедитесь в том, что указанные пути соответствуют расположению соответствующих файлов, как это определено при установке.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Сохраните файл <code>php.ini</code> .</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Запустите <a href="#xamppConstolPanel">панель управления XAMPP</a> и перезапустите сервер Apache.
Дополнительные сведения о настройке XDebug приведены на <a href="http://wiki.netbeans.org/HowToConfigureXDebug">вики-странице</a> и в <a href="http://www.xdebug.org/docs/install">документации по XDebug</a>.</p>
@@ -398,10 +434,14 @@ zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
<div class="sect2">
<h3 id="_Сервер_http_apache">Сервер HTTP Apache</h3>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="1">
<li>
<p>Загрузите <a href="http://httpd.apache.org/download.cgi">сервер HTTP Apache2</a>.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>Запустите установочный файл <code>.msi</code> . Запускается мастер установки. Следуйте указаниям.</p>
</li>
@@ -411,10 +451,14 @@ zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
<p>В Microsoft Vista не следует устанавливать Apache Server в местоположение по умолчанию, находящееся в папке "Program Files". Все файлы в папке "Program Files" защищены от записи.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>По завершении установки перезапустите сервер Apache.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Для проверки успешности установки запустите браузер и введите следующий URL-адрес:</p>
</li>
@@ -422,12 +466,16 @@ zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"> http://localhost/</code></pre>
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini"> http://localhost/</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Откроется страница приветствия Apache:
-image::images/install-apache-it-works-port80.png[]</p>
+<p>Откроется страница приветствия Apache:</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/install-apache-it-works-port80.png" alt="install apache it works port80">
+</div>
</div>
<div class="sect3">
<h4 id="_Устранение_проблем">Устранение проблем</h4>
@@ -471,19 +519,35 @@ image::images/install-apache-it-works-port80.png[]</p>
<p>*Важно.*Если установщик для нужной версии PHP отсутствует, установите ее вручную из файла .zip. См. раздел <a href="http://php.net/manual/en/install.windows.manual.php">Этапы ручной установки</a> в документации php.net.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>По завершении загрузки запустите установочный файл <code>.msi</code> . Запускается мастер установки.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>На экране "Каталог конфигурации Apache" укажите каталог, в котором расположен файл <code>httpd.conf</code> (по умолчанию используется каталог <code>C:\Program Files\Apache Software Foundation\Apache<version>\conf\</code> ). Обработка кода PHP включается автоматически.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>При необходимости использования сервера базы данных MySQL выберите вариант "Полная установка" или выберите элементы MySQL и MySQLi в списке "Расширения".</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>После завершения установки перезапустите сервер Apache.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Для проверки успешности установки механизма PHP и включения обработки кода PHP в настройке Apache выполните следующие действия:</p>
<div class="ulist">
@@ -509,11 +573,15 @@ image::images/install-apache-it-works-port80.png[]</p>
<p>Сохраните файл в папке htdocs с именем <code>test.php</code>. По умолчанию путь к файлу имеет вид <code>C:\Program Files\Apache Software Foundation\Apache<version>\htdocs\test.php</code></p>
</li>
<li>
-<p>Запустите браузер и введите следующий URL-адрес: <code><a href="http://localhost:<port>/test.php" class="bare">http://localhost:<port>/test.php</a></code> . Откроется следующая страница:
-image::images/install-php-test.png[]</p>
+<p>Запустите браузер и введите следующий URL-адрес: <code><a href="http://localhost:<port>/test.php" class="bare">http://localhost:<port>/test.php</a></code> . Откроется следующая страница:</p>
</li>
</ul>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/install-php-test.png" alt="install php test">
+</div>
+</div>
<div class="sect3">
<h4 id="_Устранение_проблем_2">Устранение проблем</h4>
<div class="paragraph">
@@ -531,15 +599,19 @@ image::images/install-php-test.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"> AddType Application/x-httpd-php .php
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini"> AddType Application/x-httpd-php .php
LoadModule php5_module "c:/php/sapi/php5apache2_2.dll"</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Если эти строки отсутствуют, добавьте их, сохраните <code>httpd.conf</code> и перезапустите сервер Apache.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Обновите страницу <a href="http://localhost:<port>/test.php" class="bare">http://localhost:<port>/test.php</a>.</p>
</li>
@@ -584,7 +656,7 @@ XDebug к механизму PHP перейдите к файлу <code>php.ini
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension_ts="<path to the php folder>/php_xdebug-<version-number>.dll"
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension_ts="<path to the php folder>/php_xdebug-<version-number>.dll"
xdebug.remote_enable=1</code></pre>
</div>
</div>
@@ -593,7 +665,7 @@ xdebug.remote_enable=1</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension_nts="<path to the php folder>/php_xdebug-<version-number>.dll"
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension_nts="<path to the php folder>/php_xdebug-<version-number>.dll"
xdebug.remote_enable=1</code></pre>
</div>
</div>
@@ -602,7 +674,7 @@ xdebug.remote_enable=1</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension="<path to the php folder>/php_xdebug-<version-number>.dll"
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension="<path to the php folder>/php_xdebug-<version-number>.dll"
xdebug.remote_enable=1</code></pre>
</div>
</div>
@@ -611,21 +683,31 @@ xdebug.remote_enable=1</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">xdebug.remote_host=127.0.0.1xdebug.remote_port=9000
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">xdebug.remote_host=127.0.0.1xdebug.remote_port=9000
; Port number must match debugger port number in NetBeans IDE Tools > Options > PHPxdebug.remote_handler=dbgp</code></pre>
</div>
</div>
<div class="paragraph">
<p>Дополнительные сведения о настройке отладчика XDebug приведена <a href="http://www.xdebug.org/docs/install">здесь</a>.</p>
</div>
-<div class="paragraph">
-<p><strong>Примечание.</strong> Убедитесь в том, что указанные пути соответствуют именам и расположению соответствующих файлов, как это определено при установке.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+Убедитесь в том, что указанные пути соответствуют именам и расположению соответствующих файлов, как это определено при установке.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Для проверки того, что предварительно установленный механизм PHP поддерживает использование сервера базы данных MySQL выполните следующие действия:</p>
-</li>
+<div class="olist arabic">
+<ol class="arabic">
<li>
<p>Выберите команду "Пуск" > "Панель управления".</p>
</li>
@@ -655,6 +737,9 @@ xdebug.remote_enable=1</code></pre>
</li>
</ol>
</div>
+</li>
+</ol>
+</div>
<div class="paragraph">
<p><a href="/about/contact_form.html?to=3&subject=Feedback:%20Configuring%20PHP%20on%20Windows">Отправить отзыв по этому учебному курсу</a></p>
</div>
diff --git a/content/kb/docs/php/configure-php-environment-windows_zh_CN.html b/content/kb/docs/php/configure-php-environment-windows_zh_CN.html
index ac62fa7..9b72355 100644
--- a/content/kb/docs/php/configure-php-environment-windows_zh_CN.html
+++ b/content/kb/docs/php/configure-php-environment-windows_zh_CN.html
@@ -121,12 +121,6 @@
<div class="paragraph">
<p>本教程介绍了在 Windows 操作系统上配置 PHP 开发环境的两种方法。第一种方法是安装和配置 AMP (*A*pache、*M*ySQL、*P*HP) 包，这种方法最为简便。本教程介绍了如何安装 XAMPP 包。第二种方法是单独安装和配置每个组件。</p>
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. 此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0</div>
-</div>
<div class="paragraph">
<p><strong>要学习本教程，您需要具备以下软件和资源。</strong></p>
</div>
@@ -193,7 +187,7 @@
</li>
<li>
<p>数据库服务器。您可以使用多种数据库服务器，而最受欢迎的一种是 MySQL 服务器。可以从<a href="http://dev.mysql.com/downloads/mysql/5.1.html">此处</a>进行下载。
-*注：*该产品的推荐版本为 MySQL Server 5.0。提供的文档描述如何使用此版本。</p>
+NOTE: 该产品的推荐版本为 MySQL Server 5.0。提供的文档描述如何使用此版本。</p>
</li>
</ul>
</div>
@@ -219,8 +213,17 @@
<div class="paragraph">
<p>*警告：*不要使用 XAMPP 1.7.0。此版本中的 XDebug 出现重大问题。可以使用版本 1.7.1 或更高版本，其中已修复这些问题。</p>
</div>
-<div class="paragraph">
-<p>*注：*从 XAMPP 1.7.2 开始，XAMPP 附带提供 PHP 5.3 而不是 PHP 5.2.x。适用于 PHP 的 NetBeans IDE 版本 6.7.x 不支持新的 PHP 5.3 功能。适用于 PHP 6.8 的 NetBeans IDE 目前提供开发版本，完全支持 PHP 5.3。另请注意，PHP 5.2.x 和 PHP 5.3 之间的 Xdebug 安装不同。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+从 XAMPP 1.7.2 开始，XAMPP 附带提供 PHP 5.3 而不是 PHP 5.2.x。适用于 PHP 的 NetBeans IDE 版本 6.7.x 不支持新的 PHP 5.3 功能。适用于 PHP 6.8 的 NetBeans IDE 目前提供开发版本，完全支持 PHP 5.3。另请注意，PHP 5.2.x 和 PHP 5.3 之间的 Xdebug 安装不同。
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -236,13 +239,21 @@
<p>在 Microsoft Vista 上，“用户访问控制”功能会阻止 PHP 安装程序更新 Apache httpd 配置。在安装 XAMPP 时请禁用 UAC。有关详细信息，请参见 <a href="http://support.microsoft.com/kb/922708">Microsoft 支持</a>。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>您可以选择作为服务安装 Apache 服务器和 MySQL 数据库服务器。如果将 Apache 服务器和 MySQL 作为服务进行安装，则您将不必通过 XAMPP 控制面板来手动启动它们。请注意，您可以在 <a href="#xamppConstolPanel">XAMPP 控制面板</a>中选择安装或卸载这些服务。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>如果您使用的是自解压档案文件，请在解压缩该档案文件之后，运行 <code>setup-xampp.bat</code> 文件以配置该包的组件。（XAMPP 安装程序会自动运行此文件。）</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>配置之后，打开 XAMPP 控制面板。（您可以通过运行 <code>XAMPP_HOME/xampp-control.exe</code> 文件或通过自动置于桌面上的 XAMPP 控制面板图标手动打开该控制面板。）在打开 XAMPP 控制面板时，请注意作为服务安装的模块是否已在运行。</p>
</li>
@@ -260,7 +271,7 @@
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>"Svc" 复选框指示模块是作为 Windows 服务安装的，并且将在系统启动时自动启动。您可以通过选中或取消选中 "Svc" 复选框来安装或卸载 Windows 服务。卸载 Windows 服务不会卸载模块，但之后您需要手动启动该模块。XAMPP 控制面板包括用于停止和启动模块以及打开这些模块的管理控制台的按钮。</p>
</li>
@@ -272,15 +283,27 @@
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>运行浏览器，然后输入以下 URL： <code><a href="http://localhost" class="bare">http://localhost</a></code> 。XAMPP 欢迎页面打开：
-image::images/xampp-welcome-page.png[]</p>
+<p>运行浏览器，然后输入以下 URL： <code><a href="http://localhost" class="bare">http://localhost</a></code> 。XAMPP 欢迎页面打开：</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/xampp-welcome-page.png" alt="xampp welcome page">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>要确保 Apache 和 MySQL 服务器已作为系统服务安装，请重新启动您的操作系统，再运行浏览器，然后再次输入 <code><a href="http://localhost" class="bare">http://localhost</a></code> URL。XAMPP 欢迎页面打开。请注意，XAMPP 欢迎页面在左旁注中包含一个菜单，您可以通过此菜单检查 XAMPP 组件的状态，运行 <code>phpinfo()</code> ，以及实现其他有用的功能。 <code>phpinfo()</code> 会返回一个屏幕，其中显示关于 XAMPP 组件的配置信息。
-image::images/xampp-phpinfo.png[]</p>
+<p>要确保 Apache 和 MySQL 服务器已作为系统服务安装，请重新启动您的操作系统，再运行浏览器，然后再次输入 <code><a href="http://localhost" class="bare">http://localhost</a></code> URL。XAMPP 欢迎页面打开。请注意，XAMPP 欢迎页面在左旁注中包含一个菜单，您可以通过此菜单检查 XAMPP 组件的状态，运行 <code>phpinfo()</code> ，以及实现其他有用的功能。 <code>phpinfo()</code> 会返回一个屏幕，其中显示关于 XAMPP 组件的配置信息。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/xampp-phpinfo.png" alt="xampp phpinfo">
+</div>
+</div>
</div>
<div class="sect2">
<h3 id="_安装和启用_xdebug_调试器">安装和启用 XDebug 调试器</h3>
@@ -310,7 +333,7 @@ image::images/xampp-phpinfo.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[Zend]
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[Zend]
;zend_extension_ts = "C:\Program Files\xampp\php\zendOptimizer\lib\ZendExtensionManager.dll"
;zend_extension_manager.optimizer_ts = "C:\Program Files\xampplite\php\zendOptimizer\lib\Optimizer"
;zend_optimizer.enable_loader = 0
@@ -319,7 +342,7 @@ image::images/xampp-phpinfo.png[]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>要将
XDebug 附加到 PHP 引擎，请在 <code>php.ini</code> 文件中取消对以下行（恰好位于 [Zend] 部分下面；如果没有，请添加它们）的注释。已另外添加一些注释。</p>
@@ -328,7 +351,7 @@ XDebug 附加到 PHP 引擎，请在 <code>php.ini</code> 文件中取消对
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[XDebug]; Only Zend OR (!) XDebug
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">[XDebug]; Only Zend OR (!) XDebug
zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
; XAMPP and XAMPP Lite 1.7.0 and later come with a bundled xdebug at <XAMPP_HOME>/php/ext/php_xdebug.dll, without a version number.xdebug.remote_enable=1xdebug.remote_host=127.0.0.1xdebug.remote_port=9000
; Port number must match debugger port number in NetBeans IDE Tools > Options > PHPxdebug.remote_handler=dbgpxdebug.profiler_enable=1xdebug.profiler_output_dir="<XAMPP_HOME>\tmp"</code></pre>
@@ -337,14 +360,27 @@ zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
<div class="paragraph">
<p>将 <code>xdebug.remote_enable</code> 属性设置为 1，而不是 "true" 或任何其他值。</p>
</div>
-<div class="paragraph">
-<p>*注：*请确保您指定的路径与安装过程中所确定的相应文件的位置匹配。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+请确保您指定的路径与安装过程中所确定的相应文件的位置匹配。
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>保存 <code>php.ini</code> 。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>运行 <a href="#xamppConstolPanel">XAMPP Control Panel Application（XAMPP 控制面板应用程序）</a>并重新启动 Apache 服务器。
有关如何配置 XDebug 的详细信息，请参见<a href="http://wiki.netbeans.org/HowToConfigureXDebug">我们的 wiki</a> 和 <a href="http://www.xdebug.org/docs/install">XDebug 文档</a>。</p>
@@ -411,10 +447,14 @@ zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
<p>在 Microsoft Vista 上，不要将 Apache 服务器安装到 Program Files 中的默认位置。Program Files 中的所有文件均具有写保护。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>安装完成后，重新启动 Apache 服务器。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>要检查安装是否成功，请运行浏览器，然后输入以下 URL：</p>
</li>
@@ -422,12 +462,16 @@ zend_extension_ts = "./php/ext/php_xdebug<-version-number>.dll"
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"> http://localhost/</code></pre>
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini"> http://localhost/</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Apache 欢迎测试页面打开：
-image::images/install-apache-it-works-port80.png[]</p>
+<p>Apache 欢迎测试页面打开：</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/install-apache-it-works-port80.png" alt="install apache it works port80">
+</div>
</div>
<div class="sect3">
<h4 id="_疑难解答">疑难解答</h4>
@@ -471,19 +515,35 @@ image::images/install-apache-it-works-port80.png[]</p>
<p>*重要信息：*如果没有安装程序适用于您要安装的 PHP 版本，则必须手动从 .zip 文件中安装它。请参见 php.net 文档中的<a href="http://php.net/manual/en/install.windows.manual.php">手动指令步骤</a>。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>下载完成后，运行 <code>.msi</code> 安装文件。此时将启动安装向导。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>在“Apache 配置目录”面板上，指定 <code>httpd.conf</code> 文件所在的目录，默认设置是 <code>C:\Program Files\Apache Software Foundation\Apache<version>\conf\</code> 。PHP 处理将自动启用。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>如果您要使用 MySQL 数据库服务器，请选择“完全”安装选项，或在“扩展”列表中选择 "MySQL" 和 "MySQLi" 项。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>安装完成后，请重新启动 Apache 服务器。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>要检查 PHP 引擎是否已成功安装，以及是否在 Apache 配置中启用了 PHP 处理，请执行以下操作：</p>
<div class="ulist">
@@ -509,11 +569,15 @@ image::images/install-apache-it-works-port80.png[]</p>
<p>在 htdocs 文件夹中将此文件另存为 <code>test.php</code>。默认路径为 <code>C:\Program Files\Apache Software Foundation\Apache<version>\htdocs\test.php</code></p>
</li>
<li>
-<p>运行浏览器，然后输入以下 URL： <code><a href="http://localhost:<port>/test.php" class="bare">http://localhost:<port>/test.php</a></code> 。以下页面打开：
-image::images/install-php-test.png[]</p>
+<p>运行浏览器，然后输入以下 URL： <code><a href="http://localhost:<port>/test.php" class="bare">http://localhost:<port>/test.php</a></code> 。以下页面打开：</p>
</li>
</ul>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/install-php-test.png" alt="install php test">
+</div>
+</div>
<div class="sect3">
<h4 id="_疑难解答_2">疑难解答</h4>
<div class="paragraph">
@@ -531,15 +595,19 @@ image::images/install-php-test.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"> AddType Application/x-httpd-php .php
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini"> AddType Application/x-httpd-php .php
LoadModule php5_module "c:/php/sapi/php5apache2_2.dll"</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>如果缺少以上几行，请添加它们，并保存 <code>httpd.conf</code> ，然后重新启动 Apache。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>刷新 <a href="http://localhost:<port>/test.php" class="bare">http://localhost:<port>/test.php</a> 页面。</p>
</li>
@@ -569,10 +637,14 @@ image::images/install-php-test.png[]</p>
<div class="sect2">
<h3 id="_设置环境">设置环境</h3>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="1">
<li>
<p>如果按照默认设置安装，则系统会自动启用 PHP 处理。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>要将
XDebug 附加到 PHP 引擎，请找到 <code>php.ini</code> 文件，并在其中添加以下几行：</p>
@@ -584,7 +656,7 @@ XDebug 附加到 PHP 引擎，请找到 <code>php.ini</code> 文件，并在
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension_ts="<path to the php folder>/php_xdebug-<version-number>.dll"
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension_ts="<path to the php folder>/php_xdebug-<version-number>.dll"
xdebug.remote_enable=1</code></pre>
</div>
</div>
@@ -593,7 +665,7 @@ xdebug.remote_enable=1</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension_nts="<path to the php folder>/php_xdebug-<version-number>.dll"
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension_nts="<path to the php folder>/php_xdebug-<version-number>.dll"
xdebug.remote_enable=1</code></pre>
</div>
</div>
@@ -602,7 +674,7 @@ xdebug.remote_enable=1</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">zend_extension="<path to the php folder>/php_xdebug-<version-number>.dll"
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">zend_extension="<path to the php folder>/php_xdebug-<version-number>.dll"
xdebug.remote_enable=1</code></pre>
</div>
</div>
@@ -611,21 +683,31 @@ xdebug.remote_enable=1</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">xdebug.remote_host=127.0.0.1xdebug.remote_port=9000
+<pre class="prettyprint highlight"><code class="language-ini" data-lang="ini">xdebug.remote_host=127.0.0.1xdebug.remote_port=9000
; Port number must match debugger port number in NetBeans IDE Tools > Options > PHPxdebug.remote_handler=dbgp</code></pre>
</div>
</div>
<div class="paragraph">
<p>有关如何配置 XDebug 的详细信息，请单击<a href="http://www.xdebug.org/docs/install">此处</a>。</p>
</div>
-<div class="paragraph">
-<p>*注：*请确保您指定的路径与安装过程中所确定的相应文件的名称和位置匹配。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+请确保您指定的路径与安装过程中所确定的相应文件的名称和位置匹配。
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>要确保先前安装的 PHP 引擎支持使用 MySQL 数据库服务器，请执行以下操作：</p>
-</li>
+<div class="olist arabic">
+<ol class="arabic">
<li>
<p>单击“开始”>“控制面板”。</p>
</li>
@@ -655,6 +737,9 @@ xdebug.remote_enable=1</code></pre>
</li>
</ol>
</div>
+</li>
+</ol>
+</div>
<div class="paragraph">
<p><a href="/about/contact_form.html?to=3&subject=Feedback:%20Configuring%20PHP%20on%20Windows">发送有关此教程的反馈意见</a></p>
</div>
diff --git a/content/kb/docs/php/debugging.html b/content/kb/docs/php/debugging.html
index f751c28..330e5fc 100644
--- a/content/kb/docs/php/debugging.html
+++ b/content/kb/docs/php/debugging.html
@@ -298,33 +298,33 @@ Set <code>output_buffering = Off</code> in your <code>php.ini</code> file. O
</colgroup>
<thead>
<tr>
-<th class="tableblock halign-left valign-top"><strong>Finish Session</strong> ( image::images/finish-session-button.png[] )</th>
+<th class="tableblock halign-left valign-top"><strong>Finish Session</strong> ( <span class="image"><img src="images/finish-session-button.png" alt="finish session button"></span> )</th>
<th class="tableblock halign-left valign-top">Finish debugging session</th>
</tr>
</thead>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Pause</strong> ( image::images/pause-button.png[] )</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Pause</strong> ( <span class="image"><img src="images/pause-button.png" alt="pause button"></span> )</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Suspend debugging session</p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Resume</strong> ( image::images/resume-button.png[] )</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Resume</strong> ( <span class="image"><img src="images/resume-button.png" alt="resume button"></span> )</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Resume debugging session</p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Step Over</strong> ( image::images/step-over-button.png[] )</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Step Over</strong> ( <span class="image"><img src="images/step-over-button.png" alt="step over button"></span> )</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Step over an execution statement</p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Step Into</strong> ( image::images/step-into-button.png[] )</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Step Into</strong> ( <span class="image"><img src="images/step-into-button.png" alt="step into button"></span> )</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Step into a function call</p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Step Out</strong> ( image::images/step-out-button.png[] )</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Step Out</strong> ( <span class="image"><img src="images/step-out-button.png" alt="step out button"></span> )</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Step out of the current function call</p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Run to Cursor</strong> ( image::images/run-to-cursor-button.png[] )</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Run to Cursor</strong> ( <span class="image"><img src="images/run-to-cursor-button.png" alt="run to cursor button"></span> )</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Run execution to the position of the cursor</p></td>
</tr>
</tbody>
@@ -351,10 +351,10 @@ Set <code>output_buffering = Off</code> in your <code>php.ini</code> file. O
<div class="title">Figure 2. Breakpoints can be set in the editor</div>
</div>
<div class="paragraph">
-<p>You can remove the breakpoint by clicking on the breakpoint badge ( image::images/breakpoint-badge.png[] ).</p>
+<p>You can remove the breakpoint by clicking on the breakpoint badge ( <span class="image"><img src="images/breakpoint-badge.png" alt="breakpoint badge"></span> ).</p>
</div>
<div class="paragraph">
-<p>It is also possible to temporarily disable breakpoints. To do so, right-click on a breakpoint badge and unselect Breakpoint > ✔Enabled. This toggles the breakpoint into a disabled state, resulting in a grey badge ( image::images/disabled-breakpoint-badge.png[] ) displaying in the left margin.</p>
+<p>It is also possible to temporarily disable breakpoints. To do so, right-click on a breakpoint badge and unselect Breakpoint > ✔Enabled. This toggles the breakpoint into a disabled state, resulting in a grey badge ( <span class="image"><img src="images/disabled-breakpoint-badge.png" alt="disabled breakpoint badge"></span> ) displaying in the left margin.</p>
</div>
<div class="paragraph">
<p>If the debugger encounters a breakpoint upon executing, it stops on the breakpoint, enabling you to examine variables in the debugging windows, and step through any code following the breakpoint.</p>
@@ -439,7 +439,7 @@ Set <code>output_buffering = Off</code> in your <code>php.ini</code> file. O
</div>
</div>
<div class="paragraph">
-<p>The current session (i.e., the session that you can control using the debugger toolbar) is indicated by the more prominent icon ( image::images/current-session-icon.png[] ). To switch sessions, you can double-click on the session you want to make current, or right-click a non-current session and choose Make Current.</p>
+<p>The current session (i.e., the session that you can control using the debugger toolbar) is indicated by the more prominent icon ( <span class="image"><img src="images/current-session-icon.png" alt="current session icon"></span> ). To switch sessions, you can double-click on the session you want to make current, or right-click a non-current session and choose Make Current.</p>
</div>
<div class="paragraph">
<p>*Note: *It is not recommended to switch sessions if the session you are currently working in is suspended.</p>
@@ -537,20 +537,37 @@ Set <code>output_buffering = Off</code> in your <code>php.ini</code> file. O
</li>
<li>
<p>In the Projects window, navigate to the current project node, click the right mouse button, and choose Debug from the popup menu. The IDE opens the Debugger windows and runs the project in the debugger until the breakpoint is reached.
-NOTE: If the current project is set as Main, you can choose Debug > Debug Main Project, or press Ctrl-F5, or click image::images/debug-main-project-button.png[].</p>
+NOTE: If the current project is set as Main, you can choose Debug > Debug Main Project, or press Ctrl-F5, or click <span class="image"><img src="images/debug-main-project-button.png" alt="debug main project button"></span>.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Switch to the Local Variables window. The window shows all the variables that have been initialized within the current function, their types, and values.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>To view the value of a variable outside the function, bring the cursor on an occurrence of the variable. The tooltip shows the variable value.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>To execute the program line by line including the lines within all the called functions, press F7 or choose Debug > Step Into and watch the changes to the variables' values in the Local Variables window.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>To check the logic of the program by watching the changes of expressions, define a new watch:</p>
-</li>
+<div class="olist arabic">
+<ol class="arabic">
<li>
<p>To open the Watches window, choose Window > Debugging > Watches or press Ctrl-Shift-2. The Watches window opens.</p>
</li>
@@ -562,6 +579,9 @@ NOTE: If the current project is set as Main, you can choose Debug > Debug M
</li>
</ol>
</div>
+</li>
+</ol>
+</div>
<div class="paragraph">
<p>Now you can make an additional check during debugging.</p>
</div>
@@ -569,26 +589,44 @@ NOTE: If the current project is set as Main, you can choose Debug > Debug M
<p><strong>Important:</strong> You must enable watches in the <a href="#options">Debugging tab of PHP Options</a> in order to set watches.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>To cancel the line by line execution of the code within a function and spring to the next line after the function call, press Ctrl-F7/⌘-F7 or choose Debug > Step Out.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="9">
<li>
<p>To skip the line by line execution of the code in a function, get the value returned by the function, and spring to the next line after the function call, press F8 or choose Debug > Step Over.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="10">
<li>
<p>To pause the debugging session, choose Debug > Pause.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="11">
<li>
-<p>To continue the debugging session, choose Debug > Continue or press image::images/continue-debugging-session.png[].</p>
+<p>To continue the debugging session, choose Debug > Continue or press <span class="image"><img src="images/continue-debugging-session.png" alt="continue debugging session"></span>.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="12">
<li>
-<p>To cancel the debugging session, press image::images/stop-debugging-session.png[].
-13.
-When the program reaches the end, the debugger windows close.</p>
+<p>To cancel the debugging session, press <span class="image"><img src="images/stop-debugging-session.png" alt="stop debugging session"></span>.</p>
</li>
</ol>
</div>
+<div class="paragraph">
+<p>.
+When the program reaches the end, the debugger windows close.</p>
+</div>
</div>
</div>
<div class="sect1">
@@ -616,9 +654,17 @@ Find more details about setting up a PHP project in the document <a href="projec
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>To enable the use of hotkeys during the session, position the cursor on the project node and choose Set as Main Project from the popup menu.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>In the <code>index.php</code> file, enter the following code:</p>
</li>
@@ -626,15 +672,51 @@ Find more details about setting up a PHP project in the document <a href="projec
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-php" data-lang="php"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>NetBeans PHP debugging sample</title></head><body><?php$m=5;$n=10;$sum_of_factorials = calculate_sum_of_factorials ($m, $n);echo "The sum of factorials of the entered integers is " . $sum_of_factorials;function c [...]
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <title>NetBeans PHP debugging sample</title>
+ </head>
+<body>
+<?php
+ $m=5;
+ $n=10;
+ $sum_of_factorials = calculate_sum_of_factorials ($m, $n);
+ echo "The sum of factorials of the entered integers is " . $sum_of_factorials;
+ function calculate_sum_of_factorials ($argument1, $argument2) {
+ $factorial1 = calculate_factorial ($argument1);
+ $factorial2 = calculate_factorial ($argument2);
+ $result = calculate_sum ($factorial1, $factorial2);
+ return $result;
+ }
+ function calculate_factorial ($argument) {
+ $factorial_result = 1;
+ for ($i=1; $i<=$argument; $i++) {
+ $factorial_result = $factorial_result*$i;
+ }
+ return $factorial_result;
+ }
+ function calculate_sum ($argument1, $argument2) {
+ return $argument1 + $argument2;
+ }
+?>
+</body>
+</html></code></pre>
</div>
</div>
<div class="paragraph">
<p>The code contains three functions:
* The <code>calculate_factorial ()</code> function
* The <code>calcualte_sum ()</code> function
-* The <code>calculate_sum_of_factorials ()</code> function that calls the <code>calculate_factorial</code> function twice, then calls the <code>calcualte_sum ()</code> function once, and returns the calculated sum of factorials.
-4. Set a breakpoint (Ctrl-F8/⌘-F8) at the beginning of the PHP block:</p>
+* The <code>calculate_sum_of_factorials ()</code> function that calls the <code>calculate_factorial</code> function twice, then calls the <code>calcualte_sum ()</code> function once, and returns the calculated sum of factorials.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>Set a breakpoint (Ctrl-F8/⌘-F8) at the beginning of the PHP block:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -642,53 +724,131 @@ Find more details about setting up a PHP project in the document <a href="projec
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
-<p>To start debugging, click image::images/debug-main-project-button.png[]. The debugger stops at the breakpoint.</p>
+<p>To start debugging, click <span class="image"><img src="images/debug-main-project-button.png" alt="debug main project button"></span>. The debugger stops at the breakpoint.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
-<p>Press F7 three times. The debugger stops at the line where the function <code>calculate_sum_of_factorials ()</code> is called. The Local Variables window shows the variables <code>$m</code> and <code>$n</code> with their values:
-image::images/degugger-stopped-at-function-call.png[]</p>
+<p>Press F7 three times. The debugger stops at the line where the function <code>calculate_sum_of_factorials ()</code> is called. The Local Variables window shows the variables <code>$m</code> and <code>$n</code> with their values:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/degugger-stopped-at-function-call.png" alt="degugger stopped at function call">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
-<p>To step into the function <code>calculate_sum_of_factorials()</code> , press F7. The debugger starts to execute the code within the function <code>calculate_sum_of_factorials ()</code> and stops at the call of the function <code>calculate_factorial()</code> .
-image::images/call-of-embedded-function.png[]
-The Local Variables window now shows the local variables <code>$argument1</code> and <code>$argument2</code> that are declared within the function <code>calculate_sum_of_factorials ()</code> .
-image::images/variables-inside-function-call-another-function.png[]</p>
+<p>To step into the function <code>calculate_sum_of_factorials()</code> , press F7. The debugger starts to execute the code within the function <code>calculate_sum_of_factorials ()</code> and stops at the call of the function <code>calculate_factorial()</code> .</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call-of-embedded-function.png" alt="call of embedded function">
+</div>
+</div>
+<div class="paragraph">
+<p>The Local Variables window now shows the local variables <code>$argument1</code> and <code>$argument2</code> that are declared within the function <code>calculate_sum_of_factorials ()</code> .</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/variables-inside-function-call-another-function.png" alt="variables inside function call another function">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
-<p>Press F7. The debugger starts to execute the code with the function <code>calculate_factorial()</code> . The Call Stack window shows the stack of calls to the functions in the reverse order with the last called function at the top of the list:
-image::images/call-stack.png[]</p>
+<p>Press F7. The debugger starts to execute the code with the function <code>calculate_factorial()</code> . The Call Stack window shows the stack of calls to the functions in the reverse order with the last called function at the top of the list:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call-stack.png" alt="call stack">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="9">
<li>
-<p>Press F7 to step into the loop. View the values of the variables in the Variables window.
-image::images/local-variables-inside-loop.png[]</p>
+<p>Press F7 to step into the loop. View the values of the variables in the Variables window.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/local-variables-inside-loop.png" alt="local variables inside loop">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="10">
<li>
<p>When you make sure that the code works correctly, press Ctrl-F7/⌘-F7 to cancel the function execution. The program returns to the line next after the call of the function <code>calculate_factorial()</code> .
-NOTE: Alternatively, you can press F7 until the program completes execution of the function <code>calculate_factorial()</code> . You will also return to the line next after its call.
-image::images/call-of-embedded-function-second-time.png[]</p>
+NOTE: Alternatively, you can press F7 until the program completes execution of the function <code>calculate_factorial()</code> . You will also return to the line next after its call.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call-of-embedded-function-second-time.png" alt="call of embedded function second time">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="11">
<li>
-<p>Because you have just checked the function <code>calculate_factorial()</code> and know that it works correctly, you can skip its execution ("step over"). To step over, press F8. The program stops at the call of the function <code>calculate_sum()</code> .
-image::images/cal-of-embedded-function-calculate-sum.png[]</p>
+<p>Because you have just checked the function <code>calculate_factorial()</code> and know that it works correctly, you can skip its execution ("step over"). To step over, press F8. The program stops at the call of the function <code>calculate_sum()</code> .</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/cal-of-embedded-function-calculate-sum.png" alt="cal of embedded function calculate sum">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="12">
<li>
<p>To step into the function <code>calculate_sum()</code> , press F7.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="13">
<li>
-<p>To step over, press F8. In either case the debugger stops at the last line in the function <code>calculate_sum_of_factorials()</code> .
-image::images/return-result.png[]</p>
+<p>To step over, press F8. In either case the debugger stops at the last line in the function <code>calculate_sum_of_factorials()</code> .</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/return-result.png" alt="return result">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="14">
<li>
<p>Press F7. The debugger moves to the line with the <code>echo</code> statement.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="15">
<li>
-<p>Press F7 till the debugger exits the program. The browser window opens and shows the result of program execution:
-image::images/program-output.png[]</p>
+<p>Press F7 till the debugger exits the program. The browser window opens and shows the result of program execution:</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/program-output.png" alt="program output">
+</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -709,32 +869,56 @@ image::images/program-output.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">function calculate_sum ($argument1, $argument2) {return $argument1 - argument2;}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">function calculate_sum ($argument1, $argument2) {return $argument1 - argument2;}</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Suppose that this resulted from misspelling but actually you need to calculate sum.
-2. Choose Debug > New Watch or press Ctrl/⌘-shift-F7. The New Watch window opens.
-3. Enter the following expression and click OK.</p>
+<p>Suppose that this resulted from misspelling but actually you need to calculate sum.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Choose Debug > New Watch or press Ctrl/⌘-shift-F7. The New Watch window opens.</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
+<li>
+<p>Enter the following expression and click OK.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">$factorial1+$factorial2</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">$factorial1+$factorial2</code></pre>
</div>
</div>
<div class="paragraph">
-<p>The new expression appears in the Watches window.
-4. Run the debugging session. When the debugger stops at the line</p>
+<p>The new expression appears in the Watches window.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>Run the debugging session. When the debugger stops at the line</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">return $result;</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">return $result;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>compare the value of the expression in the Watches window and the value of $result in the Local Variables window. They should be the same but they differ.
-image::images/watches.png[]
-This example is very simple and is supposed to give some general notion of using watches.</p>
+<p>compare the value of the expression in the Watches window and the value of $result in the Local Variables window. They should be the same but they differ.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/watches.png" alt="watches">
+</div>
+</div>
+<div class="paragraph">
+<p>This example is very simple and is supposed to give some general notion of using watches.</p>
</div>
</div>
</div>
@@ -753,14 +937,20 @@ This example is very simple and is supposed to give some general notion of using
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"> <form action="index.php" method="POST">Enter the first integer, please:<input type="text" name="first_integer"/><br/>Enter the second integer, please:<input type="text" name="second_integer"/><br/><input type="submit" name="enter" value="Enter"/></form></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"> <form action="index.php" method="POST">
+ Enter the first integer, please:<input type="text" name="first_integer"/>
+ <br/>
+ Enter the second integer, please:<input type="text" name="second_integer"/>
+ <br/>
+ <input type="submit" name="enter" value="Enter"/>
+ </form></code></pre>
</div>
</div>
<div class="paragraph">
<p>Find more information about <a href="wish-list-lesson2.html#htmlForm">HTML input forms</a>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Replace the following lines at the top of the <?php ?> block:</p>
</li>
@@ -768,7 +958,10 @@ This example is very simple and is supposed to give some general notion of using
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">$m=5;$n=10;$sum_of_factorials = calculate_sum_of_factorials ($m, $n);echo "The sum of factorials of the entered integers is " . $sum_of_factorials;</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">$m=5;
+$n=10;
+$sum_of_factorials = calculate_sum_of_factorials ($m, $n);
+echo "The sum of factorials of the entered integers is " . $sum_of_factorials;</code></pre>
</div>
</div>
<div class="paragraph">
@@ -776,20 +969,35 @@ This example is very simple and is supposed to give some general notion of using
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">if (array_key_exists ("first_integer", $_POST) &amp;&amp; array_key_exists ("second_integer", $_POST)) {$result = calculate_sum_of_factorials ($_POST["first_integer"], $_POST["second_integer"]);echo "Sum of factorials is " . $result;}</code></pre>
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php">if (array_key_exists ("first_integer", $_POST) &amp;&amp; array_key_exists ("second_integer", $_POST)) {
+ $result = calculate_sum_of_factorials ($_POST["first_integer"], $_POST["second_integer"]);
+ echo "Sum of factorials is " . $result;
+}</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Set a breakpoint at the beginning of the <?php ?> block and start the <a href="#debuggingSession">debugging session</a>.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Press F7. The debugger steps into the program. The browser window opens but the input form is not displayed. This is correct behavior of the debugger because it has to pass through the entire source code of a web page before the page can be displayed. Practically, this means that the debugger passes through the code twice. First time the debugger processes the code to display the HTML input form. The second time the debugger executes PHP code step by step.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Press F7 till the debugger reaches the end of the program and the input form opens.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Fill in the form and click Enter. The debugging session continues as described in section <a href="#sampleDebuggingSession">Sample Debugging Session</a>.</p>
</li>
@@ -833,6 +1041,10 @@ This example is very simple and is supposed to give some general notion of using
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>If you are using a proxy server for debugging, enter the server’s host name and port in the Debugger Proxy section.</p>
</li>
diff --git a/content/kb/docs/php/debugging_ja.html b/content/kb/docs/php/debugging_ja.html
index ac9dab5..a2c6242 100644
--- a/content/kb/docs/php/debugging_ja.html
+++ b/content/kb/docs/php/debugging_ja.html
@@ -127,12 +127,6 @@
</div>
<div id="preamble">
<div class="sectionbody">
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます</div>
-</div>
<div class="paragraph">
<p><strong>このチュートリアルに従うには、次のソフトウェアとリソースが必要です。</strong></p>
</div>
@@ -212,8 +206,17 @@
<div class="paragraph">
<p>NetBeans IDEの「オプション」には、PHPをデバッグするための特定のデフォルト設定を変更するタブが含まれています。これらのオプションを開くには、「ツール」>「オプション」(Macの場合は「NetBeans」>「プリファレンス」)に移動し、「PHP」オプションを選択して、「デバッグ」タブを選択します。</p>
</div>
-<div class="paragraph">
-<p>*注意: *「デバッグ」タブはNetBeans IDEバージョン7.1で導入されました。以前のバージョンのNetBeansでは、デバッグ・オプションは「一般」-「PHP」タブにあります。バージョン7.1のすべてのオプションが以前のバージョンで使用できるわけではありません。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+「デバッグ」タブはNetBeans IDEバージョン7.1で導入されました。以前のバージョンのNetBeansでは、デバッグ・オプションは「一般」-「PHP」タブにあります。バージョン7.1のすべてのオプションが以前のバージョンで使用できるわけではありません。
+</td>
+</tr>
+</table>
</div>
<div class="imageblock">
<div class="content">
@@ -251,8 +254,17 @@
</li>
</ul>
</div>
-<div class="paragraph">
-<p><strong>注意:</strong> <code>php.ini</code> ファイルで <code>output_buffering=Off</code> と設定してください。そうしないと、「出力」ウィンドウにスクリプト出力が表示される際に遅延が生じます。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+<code>php.ini</code> ファイルで <code>output_buffering=Off</code> と設定してください。そうしないと、「出力」ウィンドウにスクリプト出力が表示される際に遅延が生じます。
+</td>
+</tr>
+</table>
</div>
<div class="paragraph">
<p>このチュートリアルでは、ウォッチをオプションで有効にする場合を除いて、これらの設定を変更する必要はありません。</p>
@@ -287,7 +299,7 @@
<div class="content">
<img src="images/debugger-toolbar2.png" alt="debugger toolbar2">
</div>
-<div class="title">Figure 2. 一時停止状態のデバッガ・ツールバー</div>
+<div class="title">Figure 1. 一時停止状態のデバッガ・ツールバー</div>
</div>
<div class="paragraph">
<p>ツールバーでは次のアクションを実行できます。</p>
@@ -299,33 +311,33 @@
</colgroup>
<thead>
<tr>
-<th class="tableblock halign-left valign-top"><strong>セッションの終了</strong>(image::images/finish-session-button.png[])</th>
+<th class="tableblock halign-left valign-top"><strong>セッションの終了</strong>(<span class="image"><img src="images/finish-session-button.png" alt="finish session button"></span>)</th>
<th class="tableblock halign-left valign-top">デバッグ・セッションを終了</th>
</tr>
</thead>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>一時休止</strong>(image::images/pause-button.png[])</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>一時休止</strong>(<span class="image"><img src="images/pause-button.png" alt="pause button"></span>)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">デバッグ・セッションを一時停止</p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>再開</strong>(image::images/resume-button.png[])</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>再開</strong>(<span class="image"><img src="images/resume-button.png" alt="resume button"></span>)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">デバッグ・セッションを再開</p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>ステップ・オーバー</strong>(image::images/step-over-button.png[])</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>ステップ・オーバー</strong>(<span class="image"><img src="images/step-over-button.png" alt="step over button"></span>)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">実行文をステップ・オーバー</p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>ステップ・イン</strong>(image::images/step-into-button.png[])</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>ステップ・イン</strong>(<span class="image"><img src="images/step-into-button.png" alt="step into button"></span>)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">関数コールにステップ・イン</p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>ステップ・アウト</strong>(image::images/step-out-button.png[])</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>ステップ・アウト</strong>(<span class="image"><img src="images/step-out-button.png" alt="step out button"></span>)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">現在の関数コールからステップ・アウト</p></td>
</tr>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>カーソルまで実行</strong>(image::images/run-to-cursor-button.png[])</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>カーソルまで実行</strong>(<span class="image"><img src="images/run-to-cursor-button.png" alt="run to cursor button"></span>)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">カーソル位置まで実行</p></td>
</tr>
</tbody>
@@ -349,13 +361,13 @@
<div class="content">
<img src="images/set-breakpoint.png" alt="set breakpoint">
</div>
-<div class="title">Figure 3. エディタ内でのブレークポイントの設定</div>
+<div class="title">Figure 2. エディタ内でのブレークポイントの設定</div>
</div>
<div class="paragraph">
-<p>ブレークポイントを除去するには、ブレークポイント・バッジ(image::images/breakpoint-badge.png[])をクリックします。</p>
+<p>ブレークポイントを除去するには、ブレークポイント・バッジ(<span class="image"><img src="images/breakpoint-badge.png" alt="breakpoint badge"></span>)をクリックします。</p>
</div>
<div class="paragraph">
-<p>ブレークポイントは一時的に無効にすることもできます。これを行うには、ブレークポイント・バッジを右クリックし、「ブレークポイント」>「✓有効」を選択解除します。これにより、ブレークポイントが無効な状態に切り替わり、左マージンにグレーのバッジ(image::images/disabled-breakpoint-badge.png[])が表示されます。</p>
+<p>ブレークポイントは一時的に無効にすることもできます。これを行うには、ブレークポイント・バッジを右クリックし、「ブレークポイント」>「✓有効」を選択解除します。これにより、ブレークポイントが無効な状態に切り替わり、左マージンにグレーのバッジ(<span class="image"><img src="images/disabled-breakpoint-badge.png" alt="disabled breakpoint badge"></span>)が表示されます。</p>
</div>
<div class="paragraph">
<p>デバッグの実行中にブレークポイントに到達すると、デバッガはそのブレークポイントで停止するので、デバッグ・ウィンドウで変数を確認し、ブレークポイントに続くコードをステップ実行できます。</p>
@@ -364,7 +376,7 @@
<div class="content">
<img src="images/stop-on-breakpoint.png" alt="stop on breakpoint">
</div>
-<div class="title">Figure 4. ブレークポイントで一時停止したデバッガ</div>
+<div class="title">Figure 3. ブレークポイントで一時停止したデバッガ</div>
</div>
</div>
<div class="sect2">
@@ -376,7 +388,7 @@
<div class="content">
<img src="images/tool-tip.png" alt="tool tip">
</div>
-<div class="title">Figure 5. エディタ内に表示されたツールチップ</div>
+<div class="title">Figure 4. エディタ内に表示されたツールチップ</div>
</div>
</div>
</div>
@@ -419,7 +431,7 @@
<div class="content">
<img src="images/debugger-menu.png" alt="debugger menu">
</div>
-<div class="title">Figure 6. IDEのメイン・メニューからアクセスするデバッガのメニュー</div>
+<div class="title">Figure 5. IDEのメイン・メニューからアクセスするデバッガのメニュー</div>
</div>
<div class="sect2">
<h3 id="_セッション_ウィンドウ">「セッション」ウィンドウ</h3>
@@ -440,10 +452,19 @@
</div>
</div>
<div class="paragraph">
-<p>現在のセッション、つまりデバッガ・ツールバーを使用して制御できるセッションは、他のアイコンよりも目立つアイコン(image::images/current-session-icon.png[])で示されます。複数のセッションを切り替えるには、現在のセッションにするセッションをダブルクリックするか、現在でないセッションを右クリックして「現在に設定」を選択します。</p>
+<p>現在のセッション、つまりデバッガ・ツールバーを使用して制御できるセッションは、他のアイコンよりも目立つアイコン(<span class="image"><img src="images/current-session-icon.png" alt="current session icon"></span>)で示されます。複数のセッションを切り替えるには、現在のセッションにするセッションをダブルクリックするか、現在でないセッションを右クリックして「現在に設定」を選択します。</p>
</div>
-<div class="paragraph">
-<p>*注意: *現在作業中のセッションが一時停止されている場合、セッションを切り替えることはお薦めできません。</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+現在作業中のセッションが一時停止されている場合、セッションを切り替えることはお薦めできません。
+</td>
+</tr>
+</table>
</div>
<div class="paragraph">
<p>また、右クリックして表示されるポップアップ・ウィンドウを使用して、セッションを終了したり(右クリックして「終了」を選択)、現在のスレッドのデバッグとセッション内のすべてのスレッドのデバッグを切り替えたり(右クリックして「スコープ」>「すべてのスレッドをデバッグ」または「現在のスレッドをデバッグ」を選択)できます。</p>
@@ -538,20 +559,37 @@
</li>
<li>
<p>「プロジェクト」ウィンドウで現在のプロジェクト・ノードに移動し、マウスの右ボタンをクリックして、ポップアップ・メニューから「デバッグ」を選択します。IDEでデバッガ・ウィンドウが開き、ブレークポイントに達するまで、デバッガでプロジェクトが実行されます。
-<strong>注意:</strong> 現在のプロジェクトがメインに設定されている場合は、「デバッグ」>「メイン・プロジェクトをデバッグ」を選択するか、[Ctrl]-[F5]を押すか、またはimage::images/debug-main-project-button.png[]をクリックできます。</p>
+NOTE: 現在のプロジェクトがメインに設定されている場合は、「デバッグ」>「メイン・プロジェクトをデバッグ」を選択するか、[Ctrl]-[F5]を押すか、または<span class="image"><img src="images/debug-main-project-button.png" alt="debug main project button"></span>をクリックできます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>「ローカル変数」ウィンドウに切り替えます。このウィンドウには、現在の関数内で初期化されたすべての変数、その型、および値が表示されます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>関数外の変数の値を表示するには、その変数の出現箇所にカーソルを置きます。ツールチップに変数の値が表示されます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>コールしているすべての関数内の行を含めてプログラムを1行ずつ実行するには、[F7]を押すか、「デバッグ」>「ステップ・イン」を選択して、「ローカル変数」ウィンドウで変数の値の変化をウォッチします。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>式の変化をウォッチしてプログラムのロジックを確認するには、次の手順で新しいウォッチを定義します。</p>
-</li>
+<div class="olist loweralpha">
+<ol class="loweralpha" type="a">
<li>
<p>「ウォッチ」ウィンドウを開くには、「ウィンドウ」>「デバッグ」>「ウォッチ」を選択するか、または[Ctrl]-[Shift]-[2]を押します。「ウォッチ」ウィンドウが開きます。</p>
</li>
@@ -563,6 +601,9 @@
</li>
</ol>
</div>
+</li>
+</ol>
+</div>
<div class="paragraph">
<p>これで、デバッグ中に追加の確認を行うことができます。</p>
</div>
@@ -570,26 +611,44 @@
<p><strong>重要:</strong> ウォッチを設定するには、<a href="#options">PHPオプションの「デバッグ」タブ</a>でウォッチを有効にする必要があります。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>関数内のコードの1行ずつの実行を取り消して、関数コールの次の行まで移動するには、[Ctrl]-[F7]/[⌘]-[F7]を押すか、または「デバッグ」>「ステップ・アウト」を選択します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="9">
<li>
<p>関数内のコードを1行ずつ実行しないで、関数から返される値を取得し、関数コールの次の行まで移動するには、[F8]を押すか、または「デバッグ」>「ステップ・オーバー」を選択します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="10">
<li>
<p>デバッグ・セッションを一時休止するには、「デバッグ」>「一時休止」を選択します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="11">
<li>
-<p>デバッグ・セッションを続行するには、「デバッグ」>「続行」を選択するか、またはimage::images/continue-debugging-session.png[]を押します。</p>
+<p>デバッグ・セッションを続行するには、「デバッグ」>「続行」を選択するか、または<span class="image"><img src="images/continue-debugging-session.png" alt="continue debugging session"></span>を押します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="12">
<li>
-<p>デバッグ・セッションを取り消すには、image::images/stop-debugging-session.png[]を押します。
-13.
-プログラムの最後に到達すると、デバッガ・ウィンドウが閉じます。</p>
+<p>デバッグ・セッションを取り消すには、<span class="image"><img src="images/stop-debugging-session.png" alt="stop debugging session"></span>を押します。</p>
</li>
</ol>
</div>
+<div class="paragraph">
+<p>.
+プログラムの最後に到達すると、デバッガ・ウィンドウが閉じます。</p>
+</div>
</div>
</div>
<div class="sect1">
@@ -617,9 +676,17 @@ PHPプロジェクトの設定については、ドキュメントの<a href="pr
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>セッション中のホット・キーの使用を有効にするには、カーソルをプロジェクト・ノードに置き、ポップアップ・メニューから「メイン・プロジェクトとして設定」を選択します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p><code>index.php</code> ファイルに次のコードを入力します。</p>
</li>
@@ -627,15 +694,51 @@ PHPプロジェクトの設定については、ドキュメントの<a href="pr
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-php" data-lang="php"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>NetBeans PHP debugging sample</title></head><body><?php$m=5;$n=10;$sum_of_factorials = calculate_sum_of_factorials ($m, $n);echo "The sum of factorials of the entered integers is " . $sum_of_factorials;function c [...]
+<pre class="prettyprint highlight"><code class="language-php" data-lang="php"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <title>NetBeans PHP debugging sample</title>
+ </head>
+<body>
+<?php
+ $m=5;
+ $n=10;
+ $sum_of_factorials = calculate_sum_of_factorials ($m, $n);
+ echo "The sum of factorials of the entered integers is " . $sum_of_factorials;
+ function calculate_sum_of_factorials ($argument1, $argument2) {
+ $factorial1 = calculate_factorial ($argument1);
+ $factorial2 = calculate_factorial ($argument2);
+ $result = calculate_sum ($factorial1, $factorial2);
+ return $result;
+ }
+ function calculate_factorial ($argument) {
+ $factorial_result = 1;
+ for ($i=1; $i<=$argument; $i++) {
+ $factorial_result = $factorial_result*$i;
+ }
+ return $factorial_result;
+ }
+ function calculate_sum ($argument1, $argument2) {
+ return $argument1 + $argument2;
+ }
+?>
+</body>
+</html></code></pre>
</div>
</div>
<div class="paragraph">
<p>このコードには次の3つの関数があります。
* <code>calculate_factorial ()</code> 関数
* <code>calcualte_sum ()</code> 関数
-* <code>calculate_sum_of_factorials ()</code> 関数(この関数は、 <code>calculate_factorial</code> 関数を2回コールしてから <code>calcualte_sum ()</code> 関数を1回コールし、階乗の和を返します。)
-4. PHPブロックの先頭にブレークポイントを設定します([Ctrl]-[F8]/[⌘]-[F8])。</p>
+* <code>calculate_sum_of_factorials ()</code> 関数(この関数は、 <code>calculate_factorial</code> 関数を2回コールしてから <code>calcualte_sum ()</code> 関数を1回コールし、階乗の和を返します。)</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>PHPブロックの先頭にブレークポイントを設定します([Ctrl]-[F8]/[⌘]-[F8])。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -643,53 +746,131 @@ PHPプロジェクトの設定については、ドキュメントの<a href="pr
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
-<p>デバッグを開始するには、image::images/debug-main-project-button.png[]をクリックします。デバッガがブレークポイントで停止します。</p>
+<p>デバッグを開始するには、<span class="image"><img src="images/debug-main-project-button.png" alt="debug main project button"></span>をクリックします。デバッガがブレークポイントで停止します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
-<p>[F7]を3回押します。関数 <code>calculate_sum_of_factorials ()</code> をコールしている行でデバッガが停止します。「ローカル変数」ウィンドウに、変数 <code>$m</code> と <code>$n</code> 、およびそれらの値が表示されます。
-image::images/degugger-stopped-at-function-call.png[]</p>
+<p>[F7]を3回押します。関数 <code>calculate_sum_of_factorials ()</code> をコールしている行でデバッガが停止します。「ローカル変数」ウィンドウに、変数 <code>$m</code> と <code>$n</code> 、およびそれらの値が表示されます。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/degugger-stopped-at-function-call.png" alt="degugger stopped at function call">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
-<p>関数 <code>calculate_sum_of_factorials()</code> にステップ・インするには、[F7]を押します。デバッガが関数 <code>calculate_sum_of_factorials ()</code> 内のコードの実行を開始し、関数 <code>calculate_factorial()</code> のコールで停止します。
-image::images/call-of-embedded-function.png[]
-「ローカル変数」ウィンドウに、関数 <code>calculate_sum_of_factorials ()</code> 内で宣言されているローカル変数 <code>$argument1</code> と <code>$argument2</code> が表示されます。
-image::images/variables-inside-function-call-another-function.png[]</p>
+<p>関数 <code>calculate_sum_of_factorials()</code> にステップ・インするには、[F7]を押します。デバッガが関数 <code>calculate_sum_of_factorials ()</code> 内のコードの実行を開始し、関数 <code>calculate_factorial()</code> のコールで停止します。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call-of-embedded-function.png" alt="call of embedded function">
+</div>
+</div>
+<div class="paragraph">
+<p>「ローカル変数」ウィンドウに、関数 <code>calculate_sum_of_factorials ()</code> 内で宣言されているローカル変数 <code>$argument1</code> と <code>$argument2</code> が表示されます。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/variables-inside-function-call-another-function.png" alt="variables inside function call another function">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
-<p>[F7]を押します。デバッガが、関数 <code>calculate_factorial()</code> からコードの実行を開始します。「コール・スタック」ウィンドウに、関数へのコールのスタックが逆の順序で表示され、最後にコールされた関数がリストの先頭に表示されます。
-image::images/call-stack.png[]</p>
+<p>[F7]を押します。デバッガが、関数 <code>calculate_factorial()</code> からコードの実行を開始します。「コール・スタック」ウィンドウに、関数へのコールのスタックが逆の順序で表示され、最後にコールされた関数がリストの先頭に表示されます。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call-stack.png" alt="call stack">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="9">
<li>
-<p>[F7]を押してループにステップ・インします。「変数」ウィンドウに変数の値が表示されます。
-image::images/local-variables-inside-loop.png[]</p>
+<p>[F7]を押してループにステップ・インします。「変数」ウィンドウに変数の値が表示されます。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/local-variables-inside-loop.png" alt="local variables inside loop">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="10">
<li>
<p>コードが正常に機能することを確認したら、[Ctrl]-[F7]/[⌘]-[F7]を押して関数の実行を取り消します。プログラムは、関数 <code>calculate_factorial()</code> のコールの次の行に戻ります。
-<strong>注意:</strong> プログラムで関数 <code>calculate_factorial()</code> の実行が完了するまでは、[F7]を押すこともできます。この場合も、コールの次の行に戻ります。
-image::images/call-of-embedded-function-second-time.png[]</p>
+NOTE: プログラムで関数 <code>calculate_factorial()</code> の実行が完了するまでは、[F7]を押すこともできます。この場合も、コールの次の行に戻ります。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call-of-embedded-function-second-time.png" alt="call of embedded function second time">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="11">
<li>
-<p>関数 <code>calculate_factorial()</code> が正常に機能することを確認できたため、その実行を省略できます(ステップ・オーバー)。ステップ・オーバーするには、[F8]を押します。プログラムは、関数 <code>calculate_sum()</code> のコールで停止します。
-image::images/cal-of-embedded-function-calculate-sum.png[]</p>
+<p>関数 <code>calculate_factorial()</code> が正常に機能することを確認できたため、その実行を省略できます(ステップ・オーバー)。ステップ・オーバーするには、[F8]を押します。プログラムは、関数 <code>calculate_sum()</code> のコールで停止します。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/cal-of-embedded-function-calculate-sum.png" alt="cal of embedded function calculate sum">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="12">
<li>
<p>関数 <code>calculate_sum()</code> にステップ・インするには、[F7]を押します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="13">
<li>
-<p>ステップ・オーバーするには、[F8]を押します。いずれの場合も、デバッガは関数 <code>calculate_sum_of_factorials()</code> の最後の行で停止します。
-image::images/return-result.png[]</p>
+<p>ステップ・オーバーするには、[F8]を押します。いずれの場合も、デバッガは関数 <code>calculate_sum_of_factorials()</code> の最後の行で停止します。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/return-result.png" alt="return result">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="14">
<li>
<p>[F7]を押します。デバッガは <code>echo</code> 文の行に移動します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="15">
<li>
-<p>デバッガがプログラムを終了するまで[F7]を押します。ブラウザ・ウィンドウが開き、プログラムの実行結果が表示されます。
-image::images/program-output.png[]</p>
+<p>デバッガがプログラムを終了するまで[F7]を押します。ブラウザ・ウィンドウが開き、プログラムの実行結果が表示されます。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/program-output.png" alt="program output">
+</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -710,32 +891,56 @@ image::images/program-output.png[]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">function calculate_sum ($argument1, $argument2) {return $argument1 - argument2;}</code></pre>
+<pre>function calculate_sum ($argument1, $argument2) {return $argument1 - argument2;}</pre>
</div>
</div>
<div class="paragraph">
-<p>実際には和を求める必要がありますが、間違えてこのように入力したとします。
-2. 「デバッグ」>「新規ウォッチ」を選択するか、または[Ctrl]/[⌘]-[Shift]-[F7]を押します。「新規ウォッチ」ウィンドウが開きます。
-3. 次の式を入力し、「OK」をクリックします。</p>
+<p>実際には和を求める必要がありますが、間違えてこのように入力したとします。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>「デバッグ」>「新規ウォッチ」を選択するか、または[Ctrl]/[⌘]-[Shift]-[F7]を押します。「新規ウォッチ」ウィンドウが開きます。</p>
+</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
+<li>
+<p>次の式を入力し、「OK」をクリックします。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">$factorial1+$factorial2</code></pre>
+<pre>$factorial1+$factorial2</pre>
</div>
</div>
<div class="paragraph">
-<p>新しい式が「ウォッチ」ウィンドウに表示されます。
-4. デバッグ・セッションを実行します。デバッガが次の行で停止します。</p>
+<p>新しい式が「ウォッチ」ウィンドウに表示されます。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>デバッグ・セッションを実行します。デバッガが次の行で停止します。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">return $result;</code></pre>
+<pre>return $result;</pre>
</div>
</div>
<div class="paragraph">
-<p>「ウォッチ」ウィンドウ内の式の値と、「ローカル変数」ウィンドウ内の$resultの値を比較します。これらは同一である必要がありますが、現時点では異なります。
-image::images/watches.png[]
-この例は非常に単純で、ウォッチ使用の概念を示しています。</p>
+<p>「ウォッチ」ウィンドウ内の式の値と、「ローカル変数」ウィンドウ内の$resultの値を比較します。これらは同一である必要がありますが、現時点では異なります。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/watches.png" alt="watches">
+</div>
+</div>
+<div class="paragraph">
+<p>この例は非常に単純で、ウォッチ使用の概念を示しています。</p>
</div>
</div>
</div>
@@ -754,14 +959,20 @@ image::images/watches.png[]
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"> <form action="index.php" method="POST">Enter the first integer, please:<input type="text" name="first_integer"/><br/>Enter the second integer, please:<input type="text" name="second_integer"/><br/><input type="submit" name="enter" value="Enter"/></form></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"> <form action="index.php" method="POST">
+ Enter the first integer, please:<input type="text" name="first_integer"/>
+ <br/>
+ Enter the second integer, please:<input type="text" name="second_integer"/>
+ <br/>
+ <input type="submit" name="enter" value="Enter"/>
+ </form></code></pre>
</div>
</div>
<div class="paragraph">
<p>詳細は、<a href="wish-list-lesson2.html#htmlForm">HTML入力フォーム</a>を参照してください。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p><?php?>ブロックの先頭で、次の行を置き換えます。</p>
</li>
@@ -769,7 +980,7 @@ image::images/watches.png[]
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">$m=5;$n=10;$sum_of_factorials = calculate_sum_of_factorials ($m, $n);echo "The sum of factorials of the entered integers is " . $sum_of_factorials;</code></pre>
+<pre>$m=5;$n=10;$sum_of_factorials = calculate_sum_of_factorials ($m, $n);echo "The sum of factorials of the entered integers is " . $sum_of_factorials;</pre>
</div>
</div>
<div class="paragraph">
@@ -777,20 +988,32 @@ image::images/watches.png[]
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">if (array_key_exists ("first_integer", $_POST) &amp;&amp; array_key_exists ("second_integer", $_POST)) {$result = calculate_sum_of_factorials ($_POST["first_integer"], $_POST["second_integer"]);echo "Sum of factorials is " . $result;}</code></pre>
+<pre>if (array_key_exists ("first_integer", $_POST) &amp;&amp; array_key_exists ("second_integer", $_POST)) {$result = calculate_sum_of_factorials ($_POST["first_integer"], $_POST["second_integer"]);echo "Sum of factorials is " . $result;}</pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>ブレークポイントを<?php?>ブロックの先頭に設定し、<a href="#debuggingSession">デバッグ・セッション</a>を開始します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>[F7]を押します。デバッガがプログラムにステップ・インします。ブラウザ・ウィンドウが開きますが、入力フォームは表示されません。Webページが表示される前に、デバッガがページのソース・コード全体を通過する必要があるため、これはデバッガの正常な動作です。実際には、デバッガがコードを2回通過することを意味します。1回目は、HTML入力フォームを表示するコードがデバッガで処理されます。2回目は、デバッガでPHPコードがステップ実行されます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>デバッガがプログラムの終わりに達し、入力フォームが開くまで[F7]を押します。</p>
... 13540 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@netbeans.apache.org
For additional commands, e-mail: commits-help@netbeans.apache.org
For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists