initial commit

1 files changed, 67 insertions, 0 deletions

diff --git a/files/pt-br/web_development/mobile/design_responsivo/index.html b/files/pt-br/web_development/mobile/design_responsivo/index.html
new file mode 100644
index 0000000000..9a2c4dfdd6
--- /dev/null
+++ b/files/pt-br/web_development/mobile/design_responsivo/index.html
@@ -0,0 +1,67 @@
+---
+title: Design Responsivo
+slug: Web_Development/Mobile/Design_responsivo
+translation_of: Web/Progressive_web_apps
+---
+<p>Como uma reação aos problemas associados com a abordagem de <a href="/pt-BR/docs/Web_Development/Mobile/Sites_separados" title="Web development/Mobile/Separate sites">sites separados</a> para desenvolvimento de sites para celular e desktop, uma ideia relativamente nova (que é atualmente <a href="http://www.alistapart.com/articles/dao/">bastante antiga</a>) está crescendo em popularidade: abandona a detecção do agente de usuário, e em vez disso faz sua pagína responder no lado cliente aos recursos do navegador. Esta abordagem, introduzida por Ethan Marcotte em seu artigo para <a href="http://alistapart.com" title="http://alistapart.com">A List Apart</a>, veio a ser conhecido como <a href="http://www.alistapart.com/articles/responsive-web-design/" style="line-height: 1.572;">Responsive Web Design</a>. Como a abordagem de sites separados, WebDesgin Responsivo tem aspectos positivos e negativos.</p>
+
+<h2 id="As_Vantagens">As Vantagens</h2>
+
+<p>Embora ele não foi inicialmente proposto como metodo para criação de sites móveis, design responsivo foi recentemente ganhou muita atenção como uma forma de tomar alguns primeiros passos no sentido de amizade móvel no lugar de um site móvel separado.</p>
+
+<ol style="font-size: medium;">
+ <li>Economiza tempo e dinheiro, como não há uma necessidade de manter sites separados para diferentes dispositivos.</li>
+ <li>Design Responsivo fornece cada página com uma URL única e original.</li>
+ <li>Estatísticas de compartilhamento social (Curtidas no Facebook, Tweets, +1 no Google+) não dividem, desde que as versões desktop e móveis de páginas web usam uma URL única e exclusiva.</li>
+ <li>Design Responsivo não se preocupa sobre agentes de usuário.</li>
+</ol>
+
+<p>Há alguns aspectos muito bom para essa abordagem. Desde que ele não confie na detecção do agente de usuário, é mais resistente e à prova futurística da abordagem de sites separados. Para sites simples, ele também pode ser significativamente mais fácil de implementar e manter do que outras opções.</p>
+
+<h2 id="Os_Negativos">Os Negativos</h2>
+
+<p>Essa abordagem não é sem suas limitações. Porque o conteúdo deve ser alterado no lado cliente com JavaScript, apenas mínimas alterações de conteúdo são encorajadas. Em geral, as coisas podem ficar muito cabeludo muito rapidamente se você estiver tentando codificar dois conjuntos distintos de JavaScript para funcionar com o mesmo DOM. Esta é uma grande razão por que aplicativos web não tendem a adotar esta abordagem.</p>
+
+<p><span style="line-height: inherit;">Dar a seu site existente um design responsivo também envolve uma reconfiguração de seus estilos se você não está ostentando ainda um </span><a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/" style="line-height: inherit;">layout flexível</a><span style="line-height: inherit;">. Esta poderia ser uma benção disfarçada, embora; fazer o layout do seu site responsivo poderia ser uma boa oportunidade para modernizar e limpar o CSS do seu site.</span></p>
+
+<p><span style="line-height: inherit;">Finalmente, uma vez que você está adicionando o código para seus scripts e estilos, desempenho pode ser pior do que a abordagem de Sites Separados. Não há realmente nenhuma maneira de contonar isso, embora uma refatoração pensativo de seus scripts e estilos pode realmente salvar alguns bytes em longo prazo.</span></p>
+
+<h2 id="Quando_há_que_escolher_esta_opção">Quando há que escolher esta opção</h2>
+
+<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="float: right; height: 177px; width: 300px;"></a>Como mencionado acima, porque as alterações de conteúdo podem ser difíceis, quando você usar essa abordagem, você não é capaz de dar aos usuários uma experiência surpreendentemente diferente no celular sem um aumento significativo na complexidade de código. Disse que, se as versões desktop e móvel do seu site são muito semelhantes, então esta abordagem é uma ótima opção. É bem adequado para sites centrados em documentos cujo um caso de uso primário é consistente em dispositivos, como as páginas de produtos. Você pode notar que os exemplos abaixo são todos blogs ou portfolios!</p>
+
+<h2 id="Examples" name="Examples" style="overflow: hidden;">Exemplos</h2>
+
+<p>Embora não seja tão popular como a abordagem de locais diferentes, existem mais e mais sites que empregam essa técnica todos os dias. Felizmente, uma vez que todo o código é lado cliente, se você gostaria de ver como um site tecnicamente implementa esta abordagem, é tão simples como visitar o site e clicando em “Ver Código-Fonte da Página.” Aqui estão alguns exemplos:</p>
+
+<ul>
+ <li><a href="http://teixido.co/">http://teixido.co/</a> – um dos meus designs responsivos favoritos, também na foto acima!</li>
+ <li><a href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – também um artigo bom de ler, com seus próprios links para exemplos</li>
+ <li><a href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li>
+ <li><a href="http://stephencaver.com/">http://stephencaver.com/</a></li>
+ <li><a href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li>
+</ul>
+
+<p>Apesar de ser uma abordagem relativamente jovem, já existem algumas prátivas recomendadas emergentes. Por exemplo, se você estiver criando um site do zero com essa opção em mente, é geralmente útil para <a href="http://www.lukew.com/ff/entry.asp?1117">criar um design de tela pequena primeiro</a>, para que as restrições do site móvel com você desde o início. Também é ótimo para usar o aprimoramento progressivo para seus estilos em vez de ocultar elementos do seus site existente com media queries. Desta forma, navegadores mais antigos que podem não oferecer suporte a media queries ainda mostrem o layout adequado. Uma excelente apresentação sobre o mérito desse método está disponível <a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">aqui</a>.</p>
+
+<h2 id="Abordagem_para_desenvolvimento_web_móvel">Abordagem para desenvolvimento web móvel</h2>
+
+<p>Consulte os seguintes artigos de abaixo e outras abordagens ao desenvolvimento para plataformas móveis.</p>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">O que é um site móvel amigável?</a></li>
+ <li><a href="/pt-BR/docs/Web_Development/Mobile/Sites_separados" title="Web development/Mobile/Separate sites">Sites Separados</a></li>
+ <li><a href="/pt-BR/docs/Web_development/Mobile/A_hybrid_approach" title="Web development/Mobile/Hybrid approach">Uma abordagem híbrida</a></li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Development/Responsive_Web_design" title="Responsive Web design">Web Design Responsivo</a> para recursos adicionais</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Informação_Original_do_Documento">Informação Original do Documento</h3>
+
+<p>Originalmente publicado em 27 de Maio de 2011 no blog Mozilla Webdev como "<a href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", por Jason Grlicky.</p>
+</div>