From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../author_fast-loading_html_pages/index.html | 135 +++++++++++++++++++ files/pt-br/learn/html/howto/index.html | 150 +++++++++++++++++++++ .../html/howto/use_data_attributes/index.html | 72 ++++++++++ 3 files changed, 357 insertions(+) create mode 100644 files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/pt-br/learn/html/howto/index.html create mode 100644 files/pt-br/learn/html/howto/use_data_attributes/index.html (limited to 'files/pt-br/learn/html/howto') diff --git a/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html b/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..e693b6fed8 --- /dev/null +++ b/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,135 @@ +--- +title: Dicas para criar páginas HTML de carregamento rápido +slug: Web/HTML/Dicas_para_criar_páginas_HTML_de_carregamento_rápido +tags: + - Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

Estas dicas são baseadas em conhecimento comum e experimentação.

+

Uma página web otimizada não apenas provê um site mais responsivo aos visitantes, como também reduz a carga sobre os servidores e a conexão com a Internet. Isso pode ser crucial para sites de grande volume ou sites que tenham um pico de tráfego devido a circunstâncias extraordinárias, como plantões de notícias urgentes.

+

Otimizar a performance do carregamento de páginas não serve apenas para o conteúdo que será visto por visitantes com linha discada ou aparelhos móveis. É igualmente importante para banda larga e pode levar a melhorias dramáticas até mesmo para seus visitantes com as mais rápidas conexões.

+

Dicas

+

Reduza o peso da página

+

O peso da página é, de longe, o fator mais importante na performance de seu carregamento.

+

Reduzir o peso da página através da eliminação de espaço em branco desnecessário e comentários, comumente conhecido como minimização, e mover scripts e CSS inline para arquivos externos pode melhorar a performance de download sem muita necessidade de outras mudanças na estrutura da página.

+

Ferramentas como HTML Tidy podem automaticamente cortar espaços em branco desnecessários e linhas vazias de um código HTML validado. Outras ferramentas podem "comprimir" JavaScript ao reformatar o código-fonte ou o obfuscando e substituindo identificadores longos por versões mais curtas.

+

Minimize o número de arquivos

+

Reduzir o número de arquivos referenciados por uma página diminui o número de conexões HTTP requeridas para realizar o download da página.

+

Dependendo das configurações de cache do browser, este pode enviar uma requisição If-Modified-Since ao servidor para cada arquivo CSS, JavaScript ou de imagem, perguntando se o arquivo foi modificado desde a última vez que foi baixado.

+

Ao reduzir o número de arquivos referenciados de dentro de uma página, reduz-se o tempo necessário para essas requisições serem enviadas e suas respostas recebidas.

+

Se você usa muitas imagens de fundo em seu CSS, pode reduzir o número de verificações HTTP combinando imagens em um único arquivo, o que é conhecido como um sprite de imagens. Então você apenas utiliza a mesma imagem cada vez que precisá-la, ajustando as coordenadas x/y apropriadamente. Essa técnica funciona melhor com elementos que terão dimensões limitadas, não sendo aplicável para todas as imagens. Contudo, o número menor de requisições HTTP e caching de uma única imagem devem ajudar a reduzir o tempo de carregamento.

+

Muito tempo gasto pesquisando quando foi a modificação mais recente de arquivos referenciados pode atrasar a exibição inicial de uma página, já que o browser deve verificar o momento de modificação para cada arquivo CSS ou JavaScript antes de carregar a página.

+

Reduza pesquisa de domínio

+

Já que cada domínio distinto demanda tempo durante uma pesquisa de DNS, o tempo de carregamento da página aumentará conforme o número de domínios distintos que aparecem em links de CSS e fontes de JavaScript e imagens.

+

Pode nem sempre ser prático, mas você deve sempre tomar cuidado para utilizar apenas o mínimo necessário de domínios diferentes nas suas páginas.

+

Conteúdo em cache reutilizado

+

Assegure que qualquer conteúdo que possa ser armazenado em cache o seja, e com tempos de expiração adequados.

+

Em especial, atente ao cabeçalho Last-Modified. Ele permite mecanismos de cache eficientes; através desse cabeçalho, informações sobre o arquivo que o agente de usuário quer carregar, como quando foi modificado da última vez, são transferidas. A maioria dos servidores web automaticamente anexam o cabeçalho Last-Modified a páginas estáticas (p. ex.: .html, .css), baseado na data de última modificação armazenada no sistema de arquivos. Com páginas dinâmicas (p. ex:.php, .aspx), isso não pode ser feito, e o cabeçalho não é enviado.

+

Então, para essas páginas que são geradas dinamicamente, alguma pesquisa adicional é benéfica. Isso vai salvar muito tempo em requisições nas páginas que normalmente não permitem armazenamento em cache.

+

Mais informações:

+
    +
  1. Get HTTP Condicional para Hackers RSS
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. Sobre o Last-Modified HTTP e ETag
    4. +
+

Estabeleça a ordem dos componentes da página de forma otimizada

+

Baixe o conteúdo da página primeiro, junto com qualquer CSS ou JavaScript que pode ser requerido para sua exibição inicial, de modo que o usuário receba a resposta mais rápida possível durante o carregamento. Esse conteúdo é tipicamente texto, e portanto pode ser beneficiado por técnicas de compressão de texto durante o tráfego, permitindo uma resposta ainda mais rápida ao usuário.

+

Quaisquer elementos dinâmicos que requeiram que a página complete seu carregamento antes de serem usados devem ser inicialmente desabilitados, e apenas habilitados após o carregamento completo. Isso fará com que o JavaScript seja carregado após o conteúdo da página, o que melhorará a aparência geral do carregamento.

+

Reduza o número de scripts inline

+

Scripts inline podem ser custosos para o carregamento, uma vez que o parser deve assumir que o script pode modificar a estrutura da página enquanto o processo de parsing está em andamento. Reduzir o número de scripts inline no geral e reduzir o uso de document.write() para a saída de conteúdo pode melhorar o carregamento da página. Use métodos AJAX modernos para manipular o conteúdo da página, ao invés de abordagens antigas baseadas em document.write().

+

Use CSS moderno e marcação validada

+

O uso de CSS moderno reduz a quantidade de marcação, pode reduzir a necessidade de imagens, em termos de layout, e frequentemente substitui imagens de textos estilizados -- que "custam" muito mais do que o texto estilizado com CSS.

+

Usar marcações validadas tem outras vantagens. Primeiro, browsers não precisarão realizar correção de erros durante o parsing de HTML (isso é à parte da preocupação filosófica de permitir variação de formato na entrada do usuário, e então programaticamente "corrigir" ou normalizá-la; ou se, ao invés disso, forçar um formato de entrada rígido, sem tolerância a desvios).

+

Além do mais, marcação válida permite o livre uso de outras ferramentas que podem pré-processar páginas web. Por exemplo, HTML Tidy pode remover espaços em branco e tags finais opcionais; contudo, a ferramenta não será executada em uma página com erros graves de marcação.

+

Divida seu conteúdo

+

Layout de tabelas é um método legado que não deve mais ser empregado. Layouts utilizando blocos {{ HTMLElement("div") }} e, no futuro próximo, layout multi-colunas CSS3 ou layout de caixas flexíveis CSS3, devem ser utilizadas ao invés disso.

+

Tabelas ainda são consideradas marcações válidas, mas devem ser usadas para exibir dados tabulares. Para ajudar o browser a renderizar sua página mais rapidamente, você deve evitar aninhar suas tabelas.

+

Ao invés de realizar aninhamentos profundos como:

+
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+

use tabelas não-aninhadas ou divs, como em

+
<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+
+

Veja também: Especificações do layout multi-colunas CSS3 e layout de caixas flexíveis CSS3

+

Especifique tamanhos para imagens e tabelas

+

Se o browser puder imediatamente determinar a altura e/ou largura de suas imagens e tabelas, ele será capaz de exibir uma página sem ter que recalcular o fluxo do conteúdo. Isso não apenas acelera a exibição da página como previne mudanças irritantes no layout ao finalizar o carregamento. Por essa razão, height e width devem ser especificadas para imagens, sempre que possível.

+

Tabelas devem usar a combinação CSS selector:property:

+
  table-layout: fixed;
+
+

e devem especificar as larguras das colunas usando as tags HTML COL e COLGROUP.

+

Escolha bem seus requisitos de agente de usuário

+

Para atingir as maiores melhorias no design de páginas, tenha certeza de que requisitos de agente de usuário razoáveis estejam especificados para os projetos. Não espere que seu conteúdo apareça de forma perfeita, pixel por pixel, em todos os browsers, especialmente nos obsoletos.

+

Idealmente, seus requisitos básicos devem ser baseados em considerações sobre os browsers modernos que suportam os padrões relevantes. Isso pode incluir: Firefox 3.6+ em qualquer plataforma, Internet Explorer 8.0+ no Windows, Opera 10+ no Windows, e Safari 4 no Mac OS X.

+

Note, contudo, que muitas das dicas listadas neste artigo são técnicas de senso comum que se aplicam a qualquer agente-usuário, e podem ser aplicadas a qualquer página web, independentemente de requisitos de compatibilidade em browsers.

+

Exemplo de estrutura de página

+

· HTML

+
+
+ · HEAD
+
+
+
+
+
+ · LINK ...
+ Arquivos CSS requeridos para a aparência da página. Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.
+
+
+
+
+
+
+
+ · SCRIPT ...
+ Arquivos JavaScript para funções requeridas durante o carregamento da página, sem qualquer DHTML que só pode ser executado após o carregamento completo.
+
+ Minimize o número de arquivos para performance enquanto mantém JavaScript não-relacionado em arquivos separados para manutenção.
+
+
+
+
+
+ · BODY
+
+ · Páginas de conteúdo visíveis ao usuário em pequenas divisões (tabelas / divs) que podem ser exibidas sem esperar a página inteira ser baixada.
+
+
+
+
+
+ · SCRIPT ...
+ Quaisquer scripts que forem usados para realizar DHTML. Um script DHTML geralmente só pode ser executado após o carregamento completo da página e a inicialização de todos os objetos necessários. Não há necessidade de carregar esses scripts antes do conteúdo. Isso apenas desacelera a aparência inicial do carregamento da página.
+
+ Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.
+
+ Se uma ou mais imagens forem usadas para efeitos de rollover, você deve pré-carregá-las aqui após o conteúdo da página ter sido baixado.
+
+
+
+

Use async and defer, se possível

+

Faça com que scripts JavaScript sejam compatíveis tanto com async como defer e use async sempre que possível, especialmente se você tiver múltiplas tags de script.

+

Com isso, a página pode parar de renderizar enquanto o JavaScript ainda estiver sendo carregado. Do contrário, o browser não renderizará nada que estiver após as tags de script sem esses atributos.

+

Nota: Apesar desses atributos ajudarem muito na primeira vez que a página for carregada, você não pode confiar que vai funcionar em todos os browsers. Se você seguir todas as orientações para produzir bom código JavaScript, não há necessidade de alterá-lo.

+ + +
+

Informações do Documento Original

+ +
+

 

diff --git a/files/pt-br/learn/html/howto/index.html b/files/pt-br/learn/html/howto/index.html new file mode 100644 index 0000000000..4d64f7d792 --- /dev/null +++ b/files/pt-br/learn/html/howto/index.html @@ -0,0 +1,150 @@ +--- +title: Use HTML para resolver problemas comuns +slug: Aprender/HTML/como-fazer +translation_of: Learn/HTML/Howto +--- +
{{LearnSidebar}}
+ +

Os links a seguir apontam para soluções de problemas comuns que você precisará resolver utilizando HTML.

+ +
+
+

Estrutura Básica

+ +

A aplicação mais básica de HTML é na estrutura de um documento. Se você está começando no HTML, deve começar por aqui.

+ + + +

Semântica básica em nível de texto

+ +

O HTML se especializou em fornecer informação semântica para um documento, portanto o HTML responde muitas questões que você talvez tenha sobre a melhor maneira de passar sua mensagem em um documento.

+ + +
+ +
+ + +

Uma das principais atribuições do HTML é tornar a navegação mais fácil com {{Glossary("hyperlink", "hiperlinks")}}, que podem ser usados de diferentes formas:

+ + + +

Imagens & multimídia

+ + + +

Scripts & estilos

+ +

O HTML só configura a estrutura do documento. Para resolver problemas de apresentação, use o {{glossary("CSS")}} ou use scripts para tornar sua página interativa.

+ + + +

Conteúdo embutido

+ + +
+
+ +

Problemas incomuns ou avançados

+ +

Além do básico, o HTML é muito rico e oferece recursos avançados para resolver problemas complexos. Estes artigos lhe ajudam a lidar com casos de uso menos comuns que você possa encontrar:

+ +
+
+

Formulários

+ +

Formulários são uma estrutura complexa em HTML, criada para enviar dados de uma página web para um servidor web. Nós lhe encorajamos a conhecer nosso guia completo. Eis os tópicos onde você deve começar:

+ + + +

Informação tabular

+ +

Algumas informações, chamadas de dados tabulares, precisam ser organizadas em tabelas com colunas e linhas. Esta é uma das estruturas HTML mais complexas, e dominá-la não é fácil:

+ + + +

Representação de dados

+ + + +

Interatividade

+ + +
+ +
+

Semântica avançada de texto

+ + + +

Imagens & multimídia avançados

+ + + +

Internacionalização

+ +

HTML não é unilíngue. A linguagem fornece ferramentas para lidar com problemas comuns de internacionalização.

+ + + +

Performance

+ + +
+
+ +

     

diff --git a/files/pt-br/learn/html/howto/use_data_attributes/index.html b/files/pt-br/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..20daf02206 --- /dev/null +++ b/files/pt-br/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,72 @@ +--- +title: Utilizando data attributes +slug: Web/Guide/HTML/Using_data_attributes +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +

O HTML5 foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido.  Atributos data-* nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como classList, atributos fora do padrão, propriedades extras no DOM ou o método depreciado setUserData.

+ +

Sintaxe HTML

+ +

A sintaxe é simples. Qualquer atributo de qualquer elemento no qual o nome do atributo inicia com data- é um atributo data. Digamos que você possui um article e quer armazenar informações extras que não possuem nenhuma representação visual. Use atributos data para isso:

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

Acesso no JavaScript

+ +

Ler os valores destes atributos via JavaScript é muito simples também. Você pode lê-los usando {{domxref("Element.getAttribute", "getAttribute()")}} com o nome html completo, mas a forma padrão provê uma alternativa mais simples: um {{domxref("DOMStringMap")}} pode ser lido através da propriedade {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Para obter o atributo data através do objeto dataset, acesse a propriedade utilizando a parte do nome do atributo após o prefixo data- (note que o hífen é convertido para camelCase).

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

Cada propriedade é uma String e pode ser lida e escrita. No exemplo acima a atribuição article.dataset.columns = 5 iria alterar esse atributo para "5".

+ +

Acesso no CSS

+ +

Note que os atributos data são atributos em HTML puro, e você pode inclusive acessá-los via CSS. Por exemplo, para mostrar o elemento pai em um artigo, você pode usar conteúdo gerado em CSS com a função {{cssxref("attr")}}:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

Pode-se também usar os seletores de atributos em CSS para alterar estilos de acordo com o atributo data:

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

Pode-se tudo isso em funcionamento neste exemplo JSBin.

+ +

Atributos data também podem ser utilizados para conter informações que mudam constantemente, como a pontuação em um jogo. Usando seletores CSS e acesso com JavaScript permite que se construa efeitos excelentes sem ter que escrever suas próprias rotinas de display. Veja esta tela para um exemplo utilizando conteúdo gerado e transições CSS (exemplo JSBin).

+ +

Uma vez que valores data são strings, todos os valores devem estar entre aspas ou então a estilização não fará efeito.

+ +

Issues

+ +

Não armazene conteúdo que deve estar visível e acessível nos atributos data porque tecnologias assistivas podem não acessá-los. Além disso, motores de busca podem não indexar os valores dos atributos data. 

+ +

Os principais issues a serem considerados são com suporte e performance no Internet Explorer. O Internet Explorer 11+ provê suporte para o padrão, mas todas as versões anteriores não suportam dataset. Para suporte ao IE 10 e anteriores, deve-se acessar atributos data através de {{domxref("Element.getAttribute", "getAttribute()")}} . E ainda, a performance de leitura dos atributos data é ruim, comparada com o armazenamento em um data warehouse JS. O uso de dataset é até pior que a leitura dos dados com getAttribute().

+ +

Apesar do que foi colocado, para metadados customizados associados a elementos, eles são uma ótima solução.

+ +

No Firefox 49.0.2 (e talvez em versões anteriores/posteriores), os atributos data que excederem 1022 caracteres não serão lidos pelo Javascript (EcmaScript 4).

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf