initial commit

2 files changed, 134 insertions, 0 deletions

diff --git a/files/pt-br/desenvolvimento_web/index.html b/files/pt-br/desenvolvimento_web/index.html
new file mode 100644
index 0000000000..cf97d92db0
--- /dev/null
+++ b/files/pt-br/desenvolvimento_web/index.html
@@ -0,0 +1,94 @@
+---
+title: Desenvolvimento Web
+slug: desenvolvimento_web
+translation_of: Web/Guide
+---
+<p><strong>Desenvolvimento web </strong>compreende todos os aspectos do desenvolvimento de um site ou aplicação web.</p>
+<p>Aprenda a criar qualquer coisa desde um site simples até sites complexos e altamente interativos que incluem as mais recentes tecnologias da Web, lendo os artigos que você encontrará aqui.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2>
+        <h3 id="Technologies">Technologies</h3>
+        <dl>
+          <dt>
+            <a class="internal" href="/en-US/docs/Web_Development/Introduction_to_Web_development" title="en-US/docs/Web Development/Introduction to Web development">Introduction to Web development</a></dt>
+          <dd>
+            A guide to learning how to develop for the Web.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/HTML" rel="internal">HTML</a></dt>
+          <dd>
+            HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/CSS" rel="internal">CSS</a></dt>
+          <dd>
+            Cascading Style Sheets make it possible to do advanced layout and page design on the Web.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/JavaScript" rel="internal">JavaScript</a></dt>
+          <dd>
+            JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/DOM" rel="internal">DOM</a></dt>
+          <dd>
+            The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/AJAX" rel="internal">AJAX</a></dt>
+          <dd>
+            Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a></dt>
+          <dd>
+            Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/SVG" rel="internal">SVG</a></dt>
+          <dd>
+            Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.</dd>
+        </dl>
+        <h3 id="Strategies">Strategies</h3>
+        <dl>
+          <dt>
+            <a class="internal" href="/en-US/docs/Web_Standards" title="en-US/docs/Web Standards">Web standards</a></dt>
+          <dd>
+            Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.</dd>
+          <dt>
+            <a href="/en-US/docs/Web_Development/Responsive_Web_design" title="en-US/docs/Web development/Responsive Web design">Responsive Web design</a></dt>
+          <dd>
+            Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.</dd>
+          <dt>
+            <a href="/en-US/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt>
+          <dd>
+            Best practices for creating websites that do not break when browsers are updated.</dd>
+          <dt>
+            <a href="/en-US/docs/Web_Development/Mobile" title="/en-US/docs/Web development/Mobile">Mobile Web development</a></dt>
+          <dd>
+            Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Mozilla_Web_Developer_FAQ" title="en-US/docs/Mozilla Web Developer FAQ">Mozilla Web developer FAQ</a></dt>
+          <dd>
+            Frequently asked questions from Web developers. With answers!</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development" title="en-US/docs/tag/Web_Development">View All...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Community">Community</h2>
+        <ul>
+          <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks blog</a></li>
+          <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li>
+          <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li>
+        </ul>
+        <h2 class="Tools" id="Tools">Tools</h2>
+        <ul>
+          <li><a href="/en-US/docs/Tools" title="en-US/docs/Tools">Main Tools page</a></li>
+          <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a></li>
+          <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a></li>
+          <li><a href="/en-US/docs/Venkman" rel="internal">Venkman</a>, the JavaScript debugger</li>
+          <li><a href="/en-US/docs/DOM_Inspector" rel="internal" title="en-US/docs/DOM Inspector">DOM Inspector</a></li>
+          <li><a href="/en-US/docs/Tools/Scratchpad" title="en-US/docs/Tools/Scratchpad">Scratchpad</a></li>
+        </ul>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development:Tools" title="en-US/docs/tag/Web_Development:Tools">View All...</a></span></p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/pt-br/desenvolvimento_web/responsive_web_design/index.html b/files/pt-br/desenvolvimento_web/responsive_web_design/index.html
new file mode 100644
index 0000000000..5655d1024d
--- /dev/null
+++ b/files/pt-br/desenvolvimento_web/responsive_web_design/index.html
@@ -0,0 +1,40 @@
+---
+title: Responsive Web design
+slug: desenvolvimento_web/Responsive_Web_design
+translation_of: Web/Progressive_web_apps
+---
+<p>Com os usuários da Web usando cada vez mais dispositivos móveis para navegar em sites da Web e aplicativos, Web designers e desenvolvedores precisam ter certeza de que suas criações olhar tão bom e funciona tão bem em dispositivos móveis como em computadores de mesa tradicionais. Proeminente designer de Luke Wroblewski defende criação de "<a class="external" href="http://www.lukew.com/ff/entry.asp?933" title="http://www.lukew.com/ff/entry.asp?933">Mobile First</a>", ao invés de como um adendo ao projeto para desktops. Se você design para dispositivos móveis como alvo principal ou como um extra legal, você pode usar o poder do CSS para garantir que o mesmo conteúdo pode ser acessado em todas as plataformas de hardware, desde telefones celulares a telas de alta resolução wide-screen.<br>
+   </p>
+<p>Esta abordagem é conhecida como "Web design responsivo". Algumas de suas estratégias incluem:</p>
+<ul>
+  <li><strong>Layout líquido ou fluido</strong>: Definição de todas as larguras de contêineres em termos de percentagem do navegador visor, de modo que eles se expandem e contraem como a janela do navegador muda de tamanho.</li>
+  <li><strong>Media queries</strong>: Invocando as folhas de estilo diferentes de acordo com as capacidades da tela que está sendo usado, como tamanho, resolução, formato e profundidade de cor.</li>
+  <li><strong>Imagens fluidas</strong>: Definir imagens para ocupar, no máximo, a largura máxima da tela.</li>
+</ul>
+<h2 id="Recursos">Recursos</h2>
+<h3 id="Overviews">Overviews</h3>
+<ul>
+  <li><a class="external" href="http://www.alistapart.com/articles/responsive-web-design/" title="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web design</a>, by Ethan Marcotte</li>
+  <li><a class="external" href="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/" title="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/">Beginner's guide to responsive Web design</a>, by Rick Petit</li>
+  <li><a class="external" href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/" title="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/">Responsive Web design: What it is and how to use it</a>, by Kayla Knight</li>
+  <li><a class="external" href="http://www.lukew.com/ff/entry.asp?1436" title="http://www.lukew.com/ff/entry.asp?1436">Multi-device Web design: an evolution</a>, by Luke Wroblewski</li>
+</ul>
+<h3 id="Techniques">Techniques</h3>
+<ul>
+  <li><a href="/en/CSS/Media_queries" title="CSS media queries">CSS media queries</a> reference page</li>
+  <li><a class="external" href="http://css-tricks.com/6731-css-media-queries/" title="http://css-tricks.com/6731-css-media-queries/">CSS media queries and using available space</a>, by Chris Coyier</li>
+  <li><a class="external" href="http://www.maxdesign.com.au/articles/liquid/" title="http://www.maxdesign.com.au/articles/liquid/">Liquid layouts the easy way</a>, by Russ Weakley</li>
+  <li><a class="external" href="http://unstoppablerobotninja.com/entry/fluid-images/" title="http://unstoppablerobotninja.com/entry/fluid-images/">Fluid images</a>, by Ethan Marcotte</li>
+  <li><a class="external" href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/" title="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">Designing for touch screen</a>, by Chris Kemm</li>
+  <li><a class="external" href="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/" title="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/">Responsive Web Design Techniques, Tools and Design Strategies</a>, by Smashing Editorial Team</li>
+</ul>
+<h3 id="Tools">Tools</h3>
+<ul>
+  <li><a href="/en-US/docs/Tools/Responsive_Design_View" title="/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a> in Firefox</li>
+</ul>
+<h3 id="Examples">Examples</h3>
+<ul>
+  <li><a href="/en-US/demos/devderby/2011/october" title="https://developer.mozilla.org/en-US/demos/devderby/2011/october/">DevDerby demos of CSS media queries</a></li>
+  <li><a class="external" href="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design" title="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design">20 Amazing examples of using media queries for responsive Web design</a>, by Joshua Johnson</li>
+  <li><a class="external" href="http://designmodo.com/responsive-design-examples/" title="http://designmodo.com/responsive-design-examples/">Responsive Web design: 50 examples and best practices</a></li>
+</ul>