unslug pt-pt: move

1 files changed, 179 insertions, 0 deletions

diff --git a/files/pt-pt/web/svg/tutorial/svg_in_html_introduction/index.html b/files/pt-pt/web/svg/tutorial/svg_in_html_introduction/index.html
new file mode 100644
index 0000000000..5ca7a4c9e7
--- /dev/null
+++ b/files/pt-pt/web/svg/tutorial/svg_in_html_introduction/index.html
@@ -0,0 +1,179 @@
+---
+title: Introdução à SVG em HTML
+slug: Web/SVG/Tutorial/SVG_na_Introducao_HTML
+tags:
+  - Intermediário
+  - Precisa de Atualização
+  - SVG
+translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+---
+<h2 id="Overview" name="Overview">Resumo</h2>
+
+<p>This article and its associated example shows how to use inline <a href="/pt-PT/docs/Web/SVG" title="SVG">SVG</a> to provide a background picture for a form. It shows how <a href="/pt-PT/docs/Web/JavaScript" title="JavaScript">JavaScript</a> and <a href="/pt-PT/docs/Web/CSS" title="CSS">CSS</a> can be used to manipulate the picture in the same way you would script regular XHTML. Note that the example will only work in browsers that support XHTML (not HTML) and SVG integration.</p>
+
+<h2 id="Source" name="Source">Fonte</h2>
+
+<p>Aqui tem a fonte para <a class="external" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">o exemplo</a>:</p>
+
+<pre class="brush: html">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+&lt;title&gt;XTech SVG Demo&lt;/title&gt;
+&lt;style&gt;
+  stop.begin { stop-color:yellow; }
+  stop.end { stop-color:green; }
+  body.invalid stop.end { stop-color:red; }
+  #err { display:none; }
+  body.invalid #err { display:inline; }
+&lt;/style&gt;
+&lt;script&gt;
+  function signalError() {
+    document.getElementById('body').setAttribute("class", "invalid");
+  }
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body id="body"
+  style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"&gt;
+&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;HTML Form&lt;/legend&gt;
+    &lt;p&gt;&lt;label&gt;Enter something:&lt;/label&gt;
+    &lt;input type="text"/&gt;
+    &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;input type="button" value="Activate!" onclick="signalError();" /&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"&gt;
+  &lt;linearGradient id="gradient"&gt;
+    &lt;stop class="begin" offset="0%"/&gt;
+    &lt;stop class="end" offset="100%"/&gt;
+  &lt;/linearGradient&gt;
+  &lt;rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /&gt;
+  &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /&gt;
+&lt;/svg&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Discussion" name="Discussion">Discussão</h2>
+
+<p>The page is mainly regular XHTML, CSS and JavaScript. The only interesting part is the &lt;svg&gt; element it contains. This element and its children are declared to be in the SVG namespace. The element contains a gradient and two shapes filled with the gradient. The gradient color stops have their colors set by CSS. When the user enters something incorrect into the form, the script sets the <code>invalid</code> attribute on the &lt;body&gt;, and a style rule changes the gradient <code>end-stop</code> color to red. (Another style rule makes an error message appear.)</p>
+
+<p>This approach has the following points in its favor:</p>
+
+<ul>
+ <li>We have taken a regular XHTML form that could have been part of an existing Web site, and added an attractive, interactive background</li>
+ <li>The approach is backwards compatible to browsers that do not support SVG; simply, no background appears in them</li>
+ <li>It's very simple and performs very well</li>
+ <li>The picture dynamically sizes itself to the required size in an intelligent way</li>
+ <li>We can have declarative style rules applying to both HTML and SVG</li>
+ <li>The same script manipulates both HTML and SVG</li>
+ <li>The document is entirely standards-based</li>
+</ul>
+
+<div class="note">
+<p>To add a linked image with DOM methods to an embedded SVG element, one has to use <code>setAttributeNS</code> to set <code>href</code>. Like in the following example:</p>
+
+<pre class="brush: js"> var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
+
+
+</pre>
+</div>
+
+<h2 id="Details" name="Details">Detalhes</h2>
+
+<p>The <code>viewBox</code> attribute establishes a logical coordinate system which the SVG picture's coordinates are relative to. In this case our picture is laid out in a 100 by 100 viewport.</p>
+
+<p>The <code>preserveAspectRatio</code> attribute specifies that the aspect ratio must be preserved by centering the picture in the available size, sizing to the maximum of the height or width and then cutting off any overflow.</p>
+
+<p>The <code>style</code> attribute pins the SVG element to the background of the form.</p>
+
+<h2 id="Related_Links" name="Related_Links">Hiperligações Relacionadas</h2>
+
+<ul>
+ <li>Another SVG in XHTML example: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li>
+ <li><a class="external" href="/pt-PT/docs/Web/SVG/Namespaces_Crash_Course/Exemplo">Working example</a> that works in both Mozilla and in Internet Explorer with Adobe's SVG Viewer installed. (For inline SVG to work in both Firefox and Internet Explorer it is necessary to serve documents with a different Content-Type to each browser. For this reason, if you're behind a proxy server that caches the page, the example wont work in the second browser you load it in because it will receive the wrong Content-Type.)</li>
+</ul>
+
+
+<div id="SL_balloon_obj" style="display: block;">
+<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: none; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
+
+<div id="SL_shadow_translation_result2" style="display: none;"> </div>
+
+<div id="SL_shadow_translator" style="display: none;">
+<div id="SL_planshet">
+<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_Bproviders">
+<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
+</div>
+
+<div id="SL_alert_bbl" style="display: none;">
+<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_alert_cont"> </div>
+</div>
+
+<div id="SL_TB">
+<table id="SL_tables">
+ <tbody><tr>
+  <td class="SL_td"><input></td>
+  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
+  <td class="SL_td">
+   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
+  </td>
+  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
+  <td class="SL_td">
+   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
+  </td>
+  <td class="SL_td">
+   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
+  </td>
+  <td class="SL_td">
+   <div id="SL_bbl_font_patch"> </div>
+
+   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
+  </td>
+  <td class="SL_td">
+   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
+  </td>
+  <td class="SL_td">
+   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
+  </td>
+ </tr>
+</tbody></table>
+</div>
+</div>
+
+<div id="SL_shadow_translation_result" style=""> </div>
+
+<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_player2"> </div>
+
+<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
+
+<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
+<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<table id="SL_tbl_opt" style="width: 100%;">
+ <tbody><tr>
+  <td><input></td>
+  <td>
+   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
+  </td>
+  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
+  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
+ </tr>
+</tbody></table>
+</div>
+</div>
+</div>