aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web_development/mobile
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:58 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:58 +0100
commit68fc8e96a9629e73469ed457abd955e548ec670c (patch)
tree8529ab9fe63d011f23c7f22ab5a4a1c5563fcaa4 /files/pt-br/web_development/mobile
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.gz
translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.bz2
translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.zip
unslug pt-br: move
Diffstat (limited to 'files/pt-br/web_development/mobile')
-rw-r--r--files/pt-br/web_development/mobile/design_responsivo/index.html68
-rw-r--r--files/pt-br/web_development/mobile/index.html17
-rw-r--r--files/pt-br/web_development/mobile/mobile-friendliness/index.html30
-rw-r--r--files/pt-br/web_development/mobile/sites_separados/index.html30
4 files changed, 0 insertions, 145 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
deleted file mode 100644
index f379b2647a..0000000000
--- a/files/pt-br/web_development/mobile/design_responsivo/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: Design Responsivo
-slug: Web_Development/Mobile/Design_responsivo
-translation_of: Web/Progressive_web_apps
-translation_of_original: Web/Guide/Responsive_design
----
-<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>
diff --git a/files/pt-br/web_development/mobile/index.html b/files/pt-br/web_development/mobile/index.html
deleted file mode 100644
index 6a651575dc..0000000000
--- a/files/pt-br/web_development/mobile/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: Desenvolvimento Web móvel
-slug: Web_Development/Mobile
-tags:
- - Mobile
- - TopicStub
- - Web Development
-translation_of: Web/Guide/Mobile
-translation_of_original: Web_Development/Mobile
----
-<p>Desenvolvimento de sites para ser visualizado em dispositivos móveis requer abordagens que certifique-se de que um site funciona também em dispositivos móveis, como faz em navegadores desktop. Os seguintes artigos descrevem algumas dessas abordagens.</p>
-<ul>
- <li><a class="vt-p" href="/pt-BR/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">O que é site móvel amigável?</a></li>
- <li><a class="vt-p" href="/pt-BR/docs/Web_Development/Mobile/Sites_separados" title="Sites Separados para celular e desktop">Sites Separados</a></li>
- <li><a class="vt-p" href="/pt-BR/Web_Development/Mobile/Design_Responsivo">Design Responsivo</a></li>
- <li><a class="vt-p" href="/pt-BR/Web_development/Mobile/A_hybrid_approach" title="Uma nova abordagem para aplicações Web (externo)">Uma abordagem híbrida</a></li>
-</ul>
diff --git a/files/pt-br/web_development/mobile/mobile-friendliness/index.html b/files/pt-br/web_development/mobile/mobile-friendliness/index.html
deleted file mode 100644
index 4fd3c49a1a..0000000000
--- a/files/pt-br/web_development/mobile/mobile-friendliness/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: Site Móvel Amigável
-slug: Web_Development/Mobile/Mobile-friendliness
-translation_of: Web/Guide/Mobile/Mobile-friendliness
----
-<h2 id="O_que_é_site_móvel_amigável">O que é site móvel amigável?</h2>
-<p>Mobile friendliness can mean a multitude of things, depending on who you’re talking to. It can be helpful to think of it in terms of three goals for improving your site’s user experience: Presentation, Content, and Performance.</p>
-<h3 id="Goal_1_(Presentation)"><strong>Goal #1 (Presentation)</strong></h3>
-<p><em>“Make websites that work well on a variety of screen sizes.”</em></p>
-<p>These days, users can access the web on devices in a wide range of form factors, including phones, tablets, and eReaders. Needless to say, a fixed-width, three-column layout filled with complex JavaScript animations and mouse-over effects is not going to look or feel quite right on a phone with a 2-inch-wide screen and a diminutive processor. A slimmed-down, linearized page layout with elements <a class="external" href="http://www.lukew.com/ff/entry.asp?1085" title="Touch Target Sizes">sized for a touchscreen</a> would be much more appropriate. That’s why this first goal is all about presenting your content in a way that makes life easy for users on mobile device.</p>
-<h3 id="Goal_2_(Content)"><strong>Goal #2 (Content)</strong></h3>
-<p><em>“Adjust your content for mobile users.”<img align="right" alt="alaska_air_mobile_and_desktop-300x225.png" class="internal rwrap" src="/@api/deki/files/5892/=alaska_air_mobile_and_desktop-300x225.png"></em></p>
-<p>Think about what your users want to do at your site if they are on a phone. A great example of this is <a class="external" href="http://www.alaskaair.com/" title="Alaska Air">Alaska Air’s website</a>. Their desktop site focuses on getting visitors to book trips. Mobile users, however, are probably more interested in checking-in for a flight or seeing if their flight is delayed. They’ve adjusted their site’s content to reflect this, and it meets the needs of mobile users.</p>
-<h3 id="Goal_3_(Performance)"><strong>Goal #3 (Performance)</strong></h3>
-<p><em>“Give your users a smooth experience, even on a slow connection.”</em></p>
-<p>Though things have been getting better in recent years, browsing the Internet over a wireless data connection can still be pretty painful. This makes it more essential than ever to practice <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="Best Practices for Speeding Up Your Web Site">good performance practices</a>, only sending the user the bits they will actually need.</p>
-<h3 id="Know_your_audience"><strong>Know your audience</strong></h3>
-<p>While not strictly a part of the definition of being mobile friendly, defining who your target audience is makes these goals much more concrete. For example, it is absolutely critical to keep in mind which browsers and devices you will target when picking a mobile strategy. If your audience is full of early-adopters, you can focus on tablets and smartphones with standards-friendly browsers. On the other hand, if many of your site’s users are on devices with less capable browsers, that may eliminate certain strategies as viable options.</p>
-<h2 id="Approaches_to_mobile_Web_development">Approaches to mobile Web development</h2>
-<p>The following approaches aim to achieve each of these goals by different means.</p>
-<ul>
- <li><a href="/en/Web_development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">Separate sites</a></li>
- <li><a href="/en/Web_development/Mobile/Responsive_design" title="en/Web development/Mobile/Responsive design">Responsive design</a></li>
- <li><a href="/en/Web_development/Mobile/A_hybrid_approach" title="en/Web development/Mobile/Hybrid approach">A hybrid approach</a></li>
-</ul>
-<div class="originaldocinfo">
- <h3 id="Original_document_information">Original document information</h3>
- <p>Originally published on 4 May, 2011 on the Mozilla Webdev blog as "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/" title="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/">Approaches to Mobile Web Development Part 1 - What is Mobile Friendliness?</a>", by Jason Grlicky.</p>
-</div>
-<p> </p>
diff --git a/files/pt-br/web_development/mobile/sites_separados/index.html b/files/pt-br/web_development/mobile/sites_separados/index.html
deleted file mode 100644
index 2ca783fbc9..0000000000
--- a/files/pt-br/web_development/mobile/sites_separados/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: Sites separados para celular e desktop
-slug: Web_Development/Mobile/Sites_separados
-translation_of: Web/Guide/Mobile/Separate_sites
----
-<p>The "separate sites" approach to mobile Web development involves creating different sites for mobile and desktop Web users. This approach has positive and negative aspects.</p>
-<h2 id="The_good">The good</h2>
-<p>The first option is the most popular by far: use <a class="external" href="http://en.wikipedia.org/wiki/User_agent#User_agent_sniffing" title="User Agent Sniffing">user-agent detection</a> to route users on phones to a separate mobile site, typically at m.example.com. In a nutshell, this technique uses server-side logic to solve all <a class="external" href="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/" title="Approaches to Mobile Web Development Part 1 – What is Mobile Friendliness?">three goals of mobile web development</a> at once — if the user’s browser looks like it’s on a phone, you serve them mobile content, formatted for their phone and optimized for speed.</p>
-<p>Conceptually simple, this is the easiest option to add to an existing site, especially if you are using a CMS or Web application that supports templates. Since only the mobile-specific content, styles, and scripts are sent to mobile users, this method also provides for the best performance out of any of the other options presented here. Finally, it also allows for completely different user experiences on desktop and mobile — they’re two different sites, after all!</p>
-<h2 id="The_bad">The bad</h2>
-<p>Unfortunately, this approach is not without its drawbacks. For starters, you are now maintaining two different pages for every page on your site that you would like to expose to mobile users. If you are using a CMS, is possible to arrange your site templates in a way that minimizes this duplication. However any time that there is a difference between the mobile and desktop templates, there is a potential source of complication in your code. Similarly, this increases the implementation time of any new site features, since you must now code two sets of front-end logic.</p>
-<p>Even more important than that, though, is the fact that user-agent detection is <a class="external" href="http://css-tricks.com/browser-detection-is-bad/" title="Browser Detection is Bad">inherently flawed</a>, and anything but future-proof. Every time a new browser comes out, you must adjust your algorithm to accommodate it. And false positives are particularly scary — it could be embarrassing to serve desktop users your mobile site accidentally.</p>
-<h2 id="When_it_is_right_to_choose_this_option">When it is right to choose this option</h2>
-<p><img align="right" alt="sumo_screenshot.png" class="internal rwrap" src="/@api/deki/files/5893/=sumo_screenshot.png">Firstly, if your target audience includes users on older or low-end <a class="external" href="http://www.cnet.com/8301-17918_1-10461614-85.html" title="Feature Phones Definition">feature phones</a>, it is worth noting that you may need to employ this strategy <a class="external" href="http://www.passani.it/gap/#adaptation" title="Mobile Adaptation">to some degree</a> no matter what. This is because the default browsers on some feature-phones do not support the same markup that you would use to code a website targeted at the desktop, but instead understand formats like <a class="external" href="http://en.wikipedia.org/wiki/XHTML_Mobile_Profile" title="XHTML-MP">XHTML-MP</a> or the older <a class="external" href="http://en.wikipedia.org/wiki/Wireless_Markup_Language">WML</a>.</p>
-<p>This factor aside, there is one case where this strategy really shines over other methods. If the functionality you would like to provide to your users on mobile devices is extremely different from that on a desktop, then using separate sites is simply likely to be the <a class="external" href="http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one">most practical choice</a>. This is because you have the option of sending completely separate HTML, JavaScript, and CSS to phones and PCs.</p>
-<p>Another case where you may be forced to use this approach is if you cannot, for whatever reason, modify your existing desktop site, and need to have a 100% separate mobile site. Though it’s not ideal, at least you have this option.</p>
-<h2 id="Examples">Examples</h2>
-<p>Most of the major Web applications you see in the wild have chosen this path, including <a class="external" href="http://m.facebook.com/">Facebook</a>, <a class="external" href="http://m.youtube.com/">YouTube</a>, <a class="external" href="http://m.digg.com/" title="Mobile Digg">Digg</a>, and <a class="external" href="http://m.flickr.com/" title="Mobile Flickr">Flickr</a>. In fact, Mozilla picked this strategy for the mobile versions of <a class="link-https" href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO) and <a class="external" href="http://support.mozilla.com/">support.mozilla.org</a> (SUMO). If you’d like to see the source code behind an example of this approach in action, feel free to check out the <a class="link-https" href="https://github.com/jbalogh/zamboni/">github repository for AMO</a> or <a class="link-https" href="https://github.com/jsocol/kitsune">SUMO</a>.</p>
-<h2 id="Approaches_to_mobile_Web_development">Approaches to mobile Web development</h2>
-<p>See the following articles for background and other approaches to developing for mobile platforms.</p>
-<ul>
- <li><a href="/en/Web_development/Mobile/Mobile-friendliness" title="Wat is CSS">What is mobile-friendliness?</a></li>
- <li><a href="/en-US/docs/Web_Development/Mobile/Responsive_design" title="/en-US/docs/Web_Development/Mobile/Responsive_design">Responsive design</a></li>
- <li><a href="/en-US/docs/Web_Development/Mobile/A_hybrid_approach" title="/en-US/docs/Web_Development/Mobile/A_hybrid_approach">A hybrid approach</a></li>
-</ul>
-<div class="originaldocinfo">
- <h3 id="Original_document_information">Original document information</h3>
- <p>This article was originally published on 13 May 2011, on the Mozilla Webdev blog as "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/" title="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/">Approaches to Mobile Web Development Part 2 – Separate Sites</a>", by Jason Grlicky.</p>
-</div>
-<p> </p>