diff options
Diffstat (limited to 'files/pt-pt/web/progressive_web_apps')
| -rw-r--r-- | files/pt-pt/web/progressive_web_apps/developer_guide/index.html (renamed from files/pt-pt/web/progressive_web_apps/guia_de_programacao/index.html) | 3 | ||||
| -rw-r--r-- | files/pt-pt/web/progressive_web_apps/identificavel/index.html | 62 | ||||
| -rw-r--r-- | files/pt-pt/web/progressive_web_apps/responsive/media_types/index.html | 434 | ||||
| -rw-r--r-- | files/pt-pt/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html (renamed from files/pt-pt/web/progressive_web_apps/responsivo/elementos_base_desenho_adaptavel/index.html) | 3 | ||||
| -rw-r--r-- | files/pt-pt/web/progressive_web_apps/responsivo/index.html | 156 | ||||
| -rw-r--r-- | files/pt-pt/web/progressive_web_apps/seguro/index.html | 35 |
6 files changed, 438 insertions, 255 deletions
diff --git a/files/pt-pt/web/progressive_web_apps/guia_de_programacao/index.html b/files/pt-pt/web/progressive_web_apps/developer_guide/index.html index 7c63675479..ff532a28f1 100644 --- a/files/pt-pt/web/progressive_web_apps/guia_de_programacao/index.html +++ b/files/pt-pt/web/progressive_web_apps/developer_guide/index.html @@ -1,6 +1,6 @@ --- title: PWA - Guia de programação -slug: Web/Progressive_web_apps/Guia_de_programacao +slug: Web/Progressive_web_apps/Developer_guide tags: - Aplicações - Aplicações da Web progressivas @@ -13,6 +13,7 @@ tags: - Web - progressivo translation_of: Web/Progressive_web_apps/Developer_guide +original_slug: Web/Progressive_web_apps/Guia_de_programacao --- <p>{{draft}}</p> diff --git a/files/pt-pt/web/progressive_web_apps/identificavel/index.html b/files/pt-pt/web/progressive_web_apps/identificavel/index.html deleted file mode 100644 index 712d465d91..0000000000 --- a/files/pt-pt/web/progressive_web_apps/identificavel/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Identificável -slug: Web/Progressive_web_apps/Identificavel -tags: - - Aplicações - - Aplicações da Web modernas - - Aplicações da Web progressivas - - Manifesto - - identificável - - manifesto da Web -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Discoverable ---- -<div class="column-container summary"> -<div class="column-11">As soon as you publish a new web app, you want the world to know about it. Search engines do ok, but often more control is desired over how your apps are exposed in search results. The new W3C Manifest for a web application can help with this, along with other available features.</div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="height: 43px; width: 34px;"></div> -</div> - -<p>Objetivos eventuais para as aplicações da Web :</p> - -<ul> - <li>To have better representation in search engines</li> - <li>To be easier to expose, catalog and rank</li> - <li>To have metadata useable by browsers to give them special capabilities</li> -</ul> - -<h2 id="Guias_principais">Guias principais</h2> - -<p>None written as yet; contributions appreciated.</p> - -<h2 id="Tecnologias">Tecnologias</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Tecnologia</th> - <th scope="col">Descrição</th> - <th scope="col">Resumo de suporte</th> - <th scope="col">Especificações mais recentes</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/Manifest">Web app manifest</a></td> - <td>Defines features of an app such as name, icon, splash screen, and theme colors, for use in contexts such as app listings and device home screens.</td> - <td>Experimental, Supported in Chrome, limited support in Firefox (<a href="/en-US/docs/Web/Manifest#Browser_compatibility">more detail</a>)</td> - <td>{{SpecName('Manifest')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Ferramentas">Ferramentas</h2> - -<p>Add links to useful tools/libraries.</p> - -<h2 id="Consulte_também">Consulte também</h2> - -<dl> - <dt><a href="http://ogp.me/">Open Graph</a></dt> - <dd>A <em>defacto</em> standard providing a format for specifying similar metadata in the HTML <code><head></code> using meta tags. Supported by Facebook and other properties.</dd> -</dl> diff --git a/files/pt-pt/web/progressive_web_apps/responsive/media_types/index.html b/files/pt-pt/web/progressive_web_apps/responsive/media_types/index.html new file mode 100644 index 0000000000..c8ec43cff3 --- /dev/null +++ b/files/pt-pt/web/progressive_web_apps/responsive/media_types/index.html @@ -0,0 +1,434 @@ +--- +title: Média +slug: Web/Progressive_web_apps/Responsive/Media_types +tags: + - CSS:Como_começar +translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/CSS/Como_começar/Mídia +--- +<p>{{ PreviousNext("CSS:Como começar:Tabelas", "CSS:Como começar:JavaScript") }}</p> + +<p>Muitas das páginas neste tutorial focalizaram nas propriedades e nos valores das CSS que você pode usar para especificar o modo de exibir o documento.</p> + +<p>Esta página mostra novamente a proposta e a estrutura das folhas de estilo CSS.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_M.C3.ADdia" name="Informa.C3.A7.C3.A3o:_M.C3.ADdia">Informação: Média</h2> + +<p>A proposta das CSS é especificar como os documentos são apresentados ao usuário. A apresentação pode tomar mais de uma forma.</p> + +<p>Por exemplo, você provavelmente está lendo esta página em um dispositivo de exibição. Mas você pode também querer projetá-lo em uma tela para uma grande audiência, ou imprimi-la. Estas diferentes mídias podem ter diferentes características. CSS proporciona maneiras para apresenter um documento diferentemente em diferentes mídias.</p> + +<p>Para especificar regras específicas para um tipo de mídia, use <code>@media</code> seguido do tipo de mídia e de chaves para incluir as regras</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Um documento em um site na web tem uma área de navegação para permitir ao usuário mover em torno do site. + <p>Na linguagem de marcação, o elemento principal da área de navegação tem o id <code>nav-area</code>.</p> + + <p>Quando o documento é impresso a área de navegação não tem propósito, então a folha de estilo remove-a completamente:</p> + + <div style="width: 30em;"> + <pre class="eval"> +@media print { + #nav-area {display: none;} + } +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Alguns tipos de mídia comuns são:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td><code>screen</code></td> + <td>Exposição na tela do computador</td> + </tr> + <tr> + <td><code>print</code></td> + <td>Mídias paginadas</td> + </tr> + <tr> + <td style="padding-right: 1em;"><code>projection</code></td> + <td>Exposição projetada</td> + </tr> + <tr> + <td><code>all</code></td> + <td>Todas as mídias (o padrão)</td> + </tr> + </tbody> +</table> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Existem outras maneiras para especificar o tipo de mídia com uma série de regras. + <p>A linguagem de marcação do documento permite o tipo de mídia tornar-se específico quando a folha de estilo é ligada ao documento. Por exemplo, em HTML você pode opcionalmente especificar o tipo de mídia com o atributo <code>media</code> na tag <code>LINK</code>.</p> + + <p>Em CSS você pode usar <code>@import</code> no começo da folha de estilo para importar outras folhas de estilo de uma URL, opcionalmente especificando o tipo de mídia.</p> + + <p>Usando estas técnicas você pode separar regras de estilo para diferentes tipos de mídia em diferentes aquivos. Esta é algumas vezes uma maneira útil para estruturar sua folha de estilos.</p> + + <p>Para detalhes completos sobre tipos de mídia, veja <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a> em CSS Specification.</p> + + <p>Existem mais exemplos da propriedade <code>display</code> em uma página posterior neste tutorial: <a href="/pt/CSS/Como_começar/Dados_XML" title="pt/CSS/Como_começar/Dados_XML">Dados XML</a>.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Imprimindo" name="Imprimindo">Impressão</h3> + +<p>CSS possui suporte específico para impressão e para mídias paginadas em geral.</p> + +<p>Uma regra <code>@page</code> pode configurar as margens da página. Para imprimir frente e verso, você pode especificar as margens separadamente para <code>@page:left</code> e <code>@page:right</code>.</p> + +<p>Para mídias impressas, você normalmente usa unidades de comprimento apropriadas em polegadas (<code>in</code>) e pontos (<code>pt</code> = 1/72 polegadas), ou centímetros (<code>cm</code>) e milímetros (<code>mm</code>). É igualmente apropriado o uso de ems (<code>em</code>) para combinar tamanhos de fontes, e porcentagens (<code>%</code>).</p> + +<p>Você pode controlar como o conteúdo do documento quebra através de limites de página, usando as propriedades <code>page-break-before</code>, <code>page-break-after</code> e <code>page-break-inside</code>.</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Exemplos</caption> + <tbody> + <tr> + <td>Esta regra configura as margens da página para uma polegada em todos os quatro lados: + <div style="width: 30em;"> + <pre class="eval"> +@page {margin: 1in;} +</pre> + </div> + + <p>Esta regra assegura que todos os elementos <small>H1</small> comecem em uma nova página:</p> + + <div style="width: 30em;"> + <pre class="eval"> +h1 {page-break-before: always;} +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Para detalhes completos sobre o suporte das CSS para páginas de mídia, veja <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> em CSS Specification. + <p>Como outras características das CSS, imprimir depende do seu navegador e de suas configurações. Por exemplo, seu navegador Mozilla proporciona por padrão margens, cabeçalhos e rodapés quando é impresso. Quando outros usuários imprimem seu documento, você provavelmente não poderá predizer o navegador e as configurações que eles usarão, então você provavelmente não poderá controlar os resultados completamente.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Interfaces_de_usu.C3.A1rio" name="Interfaces_de_usu.C3.A1rio">Interfaces do utilizador</h3> + +<p>CSS tem algumas propriedades especiais para dispositivos que suportem a interface de usuário, como a tela do computador. Isto faz a aparência do documento mudar dinamicamente como o usuário trabalha com a interface.</p> + +<p>Não existe um tipo de mídia especial para dispositivos com interfaces de usuários.</p> + +<p>Existem cinco seletores especiais:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 10em;"><strong>Seletor</strong></td> + <td><strong>Seleciona</strong></td> + </tr> + <tr> + <td><code>E:hover</code></td> + <td>Qualquer elemento E que tenha um ponteiro sobre ele</td> + </tr> + <tr> + <td><code>E:focus</code></td> + <td>Qualquer elemento E que tenha um foco no teclado</td> + </tr> + <tr> + <td><code>E:active</code></td> + <td>O elemento E que é envolvido na corrente ação do usuário</td> + </tr> + <tr> + <td><code>E:link</code></td> + <td>Qualquer elemento E que seja um hiperlink para uma URL que o usuário <em>não visitou</em> recentemente</td> + </tr> + <tr> + <td><code>E:visited</code></td> + <td>Qualquer elemento E que seja um hiperlink para uma URL que o usuário <em>visitou</em> recentemente</td> + </tr> + </tbody> +</table> + +<p>A propriedade <code>cursor</code> especifica a forma do ponteiro: Algumas das formas comuns são como segue. Coloque seu mouse sobre os itens nesta lista para ver as formas comuns dos ponteiros no seu navegador:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 10em;"><strong>Seletor</strong></td> + <td><strong>Seleciona</strong></td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td>Indica um link</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td>Indica que o programa não pode aceitar a entrada</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td>Indica que o programa está trabalhando, mas ainda pode aceitar a entrada</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td>O padrão (usualmente uma flecha)</td> + </tr> + </tbody> +</table> + +<p><br> + Uma propriedade <code>outline</code> cria um contorno que é normalmente usado para indicar foco do teclado. Estes valores são similares aos da propriedade <code>border</code>, exceto que você não pode especificar lados individuais.</p> + +<p>Algumas outras características das interfaces de usuário são implementadas usando atributos, de uma maneira normal. Por exemplo, um elemento que está desabilitado ou somente leitura tem o atributo <code>disabled</code> ou o atributo <code>readonly</code>. Seletores podem especificar estes atributos como qualquer outros atributos, usando colchetes: <code>{{ mediawiki.external('disabled') }}</code> ou <code>{{ mediawiki.external('readonly') }}</code>.</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Estas regras especificam estilos para um botão que muda dinamicamente como a interação do usuário com isso: + <div style="width: 30em;"> + <pre> +.green-button { + background-color:#cec; + color:#black; + border:2px outset #cec; + } + +.green-button[disabled] { + background-color:#cdc; + color:#777; + } + +.green-button:active { + border-style: inset; + } +</pre> + </div> + + <p>Este wiki não suporta uma interface de usuário na página, então estes botões não são "clicáveis". Aqui estão algumas imagens estáticas para ilustrar a idéia:</p> + + <table style="background-color: #ffffff; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table> + <tbody> + <tr> + <td><span style="background-color: #ccddcc; border: 2px outset #cceecc; color: #777777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Clique Aqui</span></td> + <td><span style="background-color: #cceecc; border: 2px outset #cceecc; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Clique Aqui</span></td> + <td><span style="background-color: #cceecc; border: 2px inset #cceecc; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Clique Aqui</span></td> + </tr> + <tr style="line-height: 25%;"> + <td> </td> + </tr> + <tr style="font-style: italic;"> + <td>desativado</td> + <td>normal</td> + <td>ativo</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + + <p>Um botão plenamente funcional também tem um contorno escuro em toda a sua volta quando isto é o padrão, e um contorno pontilhado na face do botão quando ele é focado pelo teclado. Isto pode também ter um efeito quando o ponteiro está sobre ele.</p> + </td> + </tr> + </tbody> +</table> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Para mais informações sobre interfaces de usuário em CSS, veja <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> em CSS Specification. + <p>Existe um exemplo da linguagem de marcação Mozilla para interfaces de usuário, XUL, na segunda parte deste tutorial.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Imprimindo_um_documento" name="A.C3.A7.C3.A3o:_Imprimindo_um_documento">Ação: Imprimir um documento</h2> + +<p>Crie um novo documento HTML, <code>doc4.html</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Impressão de amostra</TITLE> +<LINK rel="stylesheet" type="text/css" href="style4.css"></strong> +</HEAD> + +<BODY> +<H1>Seção A</H1> +<P>Esta é a primeira seção...</P> + +<H1>Seção B</H1> +<P>Esta é a segunda seção...</P> + +<DIV id="print-head"> +Dirigir para mídias paginadas +</DIV> + +<DIV id="print-foot"> +Página: +</DIV> + +</BODY> +</HTML> +</pre> +</div> + +<p>Crie uma nova folha de estilo, <code>style4.css</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre>/*** Impressão de amostra ***/ + +/* Padrão para a tela */ +#print-head, +#print-foot { + display: none; + } + +/* Somente impressão */ +@media print { + +h1 { + page-break-before: always; + padding-top: 2em; + } + +h1:first-child { + page-break-before: avoid; + counter-reset: page; + } + +#print-head { + display: block; + position: fixed; + top: 0pt; + left:0pt; + right: 0pt; + + font-size: 200%; + text-align: center; + } + +#print-foot { + display: block; + position: fixed; + bottom: 0pt; + right: 0pt; + + font-size: 200%; + } + +#print-foot:after { + content: counter(page); + counter-increment: page; + } + +} /* Fim de somente impressão */ +</pre> +</div> + +<p>Quando você exibe este documento em seu navegador, ele usa o estilo padrão do navegador.</p> + +<p>Quando você imprime (ou prevê a impressão) do documento, a folha de estilo coloca cada seção em uma página separada, e adiciona um cabeçalho e um rodapé para cada página. Se o seu navegador suportar contadores, isto adiciona um número na página no seu rodapé.</p> + +<table> + <tbody> + <tr> + <td> + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 150%; text-align: center; margin-bottom: .5em;">Cabeçalho</div> + + <div style="font-size: 150%; font-weight: bold;">Secção A</div> + + <div style="font-size: 75%;">Esta é a primeira secção...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Página: 1</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 150%; text-align: center; margin-bottom: .5em;">Cabeçalho</div> + + <div style="font-size: 150%; font-weight: bold;">Secção B</div> + + <div style="font-size: 75%;">Esta é a segunda secção...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Página: 2</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Desafios</caption> + <tbody> + <tr> + <td>Mova o estilo específico de impressão para um arquivo CSS separado. + <p>Use as ligações nesta página para ler a CSS Specification. Ache detalhes de como importar o novo arquivo CSS específico para impressão em sua folha de estilo.</p> + + <p>Faça os cabeçalhos serem azuis quando o ponteiro do mouse estiver sobre eles.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/M%C3%ADdia" title="Talk:pt/CSS/Como_começar/Mídia">Discussão</a>.</p> + +<p>Até agora, todas as regras de estilo neste tutorial foram especificadas em arquivos. As regras e seus volumes são fixos. A próxima página descreve como você muda as regras dinamicamente usando uma linguagem de programação: <strong><a href="/pt/CSS/Como_come%C3%A7ar/JavaScript" title="pt/CSS/Como_começar/JavaScript">JavaScript</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Tabelas", "CSS:Como começar:JavaScript") }}</p> diff --git a/files/pt-pt/web/progressive_web_apps/responsivo/elementos_base_desenho_adaptavel/index.html b/files/pt-pt/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html index bb101b0350..aa1db53e54 100644 --- a/files/pt-pt/web/progressive_web_apps/responsivo/elementos_base_desenho_adaptavel/index.html +++ b/files/pt-pt/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html @@ -1,6 +1,6 @@ --- title: Elementos base do desenho adaptável -slug: Web/Progressive_web_apps/Responsivo/Elementos_base_desenho_adaptavel +slug: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks tags: - Aplicações - CSS @@ -8,6 +8,7 @@ tags: - HTML5 - Movel translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks +original_slug: Web/Progressive_web_apps/Responsivo/Elementos_base_desenho_adaptavel --- <div class="summary"> <p>Este artigo discute os componentes essenciais de desenho responsivo, com ligações para outros artigos que ajudam a aprofundar, se for necessário.</p> diff --git a/files/pt-pt/web/progressive_web_apps/responsivo/index.html b/files/pt-pt/web/progressive_web_apps/responsivo/index.html deleted file mode 100644 index 23bf84f782..0000000000 --- a/files/pt-pt/web/progressive_web_apps/responsivo/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Desenho responsivo -slug: Web/Progressive_web_apps/Responsivo -tags: - - Aplicações - - Aplicações da Web progressivas - - Desenvolvimento da Web - - Responsivo -translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks -translation_of_original: Web/Progressive_web_apps/Responsive ---- -<div class="column-container summary"> -<div class="column-11"><span class="seoSummary">As aplicações da <em>Web</em> responsivas utilizam tecnologias, tais como consultas de multimédia e <em>viewport</em> para se certificar que as suas <em>UIs</em> irão enquadrar qualquer fator de forma: pc, telemóvel, tablet, ou que quer que venha a seguir.</span></div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg"></div> -</div> - -<h2 id="Guias_núcleo">Guias núcleo</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a></dt> - <dd>Learn the basics of responsive design, an essential topic for modern app layout.</dd> - <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a></dt> - <dd>Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</dd> -</dl> - -<h2 id="Tecnologias">Tecnologias</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Tecnologia</th> - <th scope="col">Descrição</th> - <th scope="col">Resumo de suporte</th> - <th scope="col">Últimas especificações</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></td> - <td>Defines expressions allowing styling to be selectively applied to content depending on viewport size, resolution, orientation, etc.</td> - <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/Media_Queries#Browser_compatibility">more detail</a>)</td> - <td><a href="https://drafts.csswg.org/mediaqueries-4/">Media Queries Level 4</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>/<a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a></td> - <td>Controls viewport settings, primarily on mobile devices.</td> - <td>@viewport: Experimental (<a href="/en-US/docs/Web/CSS/@viewport#Browser_compatibility">more detail</a>)<br> - Viewport meta tag: Widespread across modern mobile devices</td> - <td><a href="https://drafts.csswg.org/css-device-adapt/#the-atviewport-rule">CSS Device Adaptation Module Level 1</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> - <td>A very useful CSS feature for creating flexible, responsive layouts.</td> - <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout#Browser_compatibility">more detail</a>)</td> - <td><a href="https://drafts.csswg.org/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a></td> - </tr> - </tbody> -</table> - -<h2 id="Ferramentas">Ferramentas</h2> - -<dl> - <dt><a href="https://modernizr.com/">Modernizr</a></dt> - <dd>A feature detection library for applying different CSS and JS to your page depending on whether certain CSS/JS features are supported.</dd> - <dt><a href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a></dt> - <dd>A JavaScript polyfill to add Media Query support to old versions of IE (5+.)</dd> -</dl> - -<h2 id="Consulte_também">Consulte também</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Graphics_for_responsive_sites">Graphics for responsive sites</a></dt> - <dd>Ideas to keep in mind when designing graphics for responsive sites and applications.</dd> - <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Responsive_navigation_patterns">Responsive navigation patterns</a></dt> - <dd>How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.</dd> -</dl> - -<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: 1; display: none; left: -8px; top: -25px;"> </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&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> diff --git a/files/pt-pt/web/progressive_web_apps/seguro/index.html b/files/pt-pt/web/progressive_web_apps/seguro/index.html deleted file mode 100644 index 6ef841c83f..0000000000 --- a/files/pt-pt/web/progressive_web_apps/seguro/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Segurança -slug: Web/Progressive_web_apps/Seguro -tags: - - Aplicações - - Aplicações da Web modernas - - Aplicações da Web progressivas - - HTTPS - - Segurança - - Seguro - - Web -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Safe ---- -<div class="column-container summary"> -<div class="column-11">A plataforma da Web fornece um mecanismo de entrega seguro que evita a espionagem e garante que o conteúdo não foi adulterado - desde que aproveite o HTTPS e desenvolva as suas aplicações com a segurança em mente.</div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="height: 40px; width: 38px;"></div> -</div> - -<h2 id="Guias_principais">Guias principais</h2> - -<p>Aidna sem guias principais listados. Contribuições são bem-vindas.</p> - -<h2 id="Tecnologias">Tecnologias</h2> - -<p>Não são necessárias novas tecnologias — a Web já funciona como isto!</p> - -<h2 id="Ferramentas">Ferramentas</h2> - -<p>Interligue aqui para quaisquer ferramentas úteis.</p> - -<h2 id="Consulte_também">Consulte também</h2> - -<p>Interligue aqui outra informação útil.</p> |