From a3cb768f710d274b572a26c48448f0cb8e4a1bdd Mon Sep 17 00:00:00 2001 From: MDN Date: Tue, 25 May 2021 00:43:56 +0000 Subject: [CRON] sync translated content --- .../pt-br/orphaned/web/guide/html/html5/index.html | 300 +++++++++++++++++++++ 1 file changed, 300 insertions(+) create mode 100644 files/pt-br/orphaned/web/guide/html/html5/index.html (limited to 'files/pt-br/orphaned/web/guide/html/html5/index.html') diff --git a/files/pt-br/orphaned/web/guide/html/html5/index.html b/files/pt-br/orphaned/web/guide/html/html5/index.html new file mode 100644 index 0000000000..70e852c9cb --- /dev/null +++ b/files/pt-br/orphaned/web/guide/html/html5/index.html @@ -0,0 +1,300 @@ +--- +title: HTML5 +slug: orphaned/Web/Guide/HTML/HTML5 +tags: + - Desenvolvimento Web + - Guía + - HTML + - HTML5 + - Visão Geral + - Web +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/Guide/HTML/HTML5 +--- +

HTML5 é a mais recente evolução do padrão que define o HTML. O termo representa dois conceitos diferentes:

+ + + +

Criada para ser utilizável por todos os desenvolvedores da Web Aberta, essa página de referências faz ligações a inúmeros recursos do HTML5, classificados em diversos grupos, baseando-se em suas funções;

+ + + +
+ +
+ +

 Semântica 

+ +
+
Seções e estruturas em HTML
+
Uma visão geral sobre as novas estruturas e novos elementos de seção do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} e {{HTMLElement("aside")}}
+
Utilizando áudio e vídeo com HTML5
+
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporam e permitem manipulação de novos conteúdos multimídia. 
+
Formulários em HTML5 
+
Uma visão geral sobre as melhorias dos formulários web com o HTML5: a API de validação de restrição, novos valores para o atributo {{htmlattrxref("type", "input")}} dos {{HTMLElement("input")}} e o novo elemento {{HTMLElement("output")}}.
+
Novos elementos semânticos
+
Seções laterais, mídia e elementos de formulário: há diversos novos elementos, como {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou {{HTMLElement("meter")}} e {{HTMLElement("main")}}, incrementando o montante de elementos válidos do HTML5.
+
Melhorias no {{HTMLElement("iframe")}}
+
Usando os atributos {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e {{htmlattrxref("srcdoc", "iframe")}} , autores podem ser precisos sobre o nível de segurança e a renderização desejada de um elemento {{HTMLElement("iframe")}}.
+
​MathML
+
Viabiliza a inserção direta de fórmulas matemáticas no código HTML5.
+
Introdução ao HTML5
+
Este artigo introduz como indicar para o navegador que você está usando HTML5 em sua página ou aplicação web. 
+
HTML5 parser compatível
+
O parser, que torna os bytes de um HTML em DOM, foi extendido e agora define precisamente o comportamento em todos os casos, mesmo quando se depara com código HTML inválido. Isso viabiliza uma grandiosa previsibilidade e interoperabilidade entre navegadores compatíveis com o HTML5.
+
+ +

Conectividade

+ +
+
Web Sockets
+
Permite a criação de uma conexão permanente entre a página e o servidor para que estes possam trocar dados através desta ligação.
+
Eventos do servidor
+
Permite que o servidor envie eventos para um cliente, ao contrário do paradigma clássico onde o servidor pode enviar apenas dados em resposta às requests do cliente.
+
WebRTC
+
WebRTC (Comunicação em tempo real), permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
+
+ +

Offline e armazenamento

+ +
+
Recursos offline: cache de aplicação
+
Firefox possui suporte completo às especificações dos recursos offlines do HTML5. A maioria dos outros navegadores suportam apenas parte deste recurso.
+
Eventos online e offline
+
+

Firefox 3 dá suporte aos eventos WHATWG online e offline, o que permite que aplicações e extensões percebam quando há conexão de Internet, assim como permite a detecção das oscilações de conexão. 

+
+
WHATWG 
+
Sessão client-side e armazenamento persistente permite que aplicações web armazenem dados de forma estruturada no lado do cliente.
+
IndexedDB
+
É um padrão web para armazenamento de quantidades significativas de dados estruturados no navegador e para alta performace de busca nestes dados, usando índices.
+
Uso de arquivos de aplicações web
+
Foi adicionado ao Gecko o suporte à nova API de arquivos do HTML5, tornando possível o acesso de arquivos locais pelas aplicações. Isso inclui suporte para seleções de múltiplos arquivos usando {{HTMLElement("input")}} do novo tipo file do HTML5. Há também o FileReader.
+
+ +

Multimídia

+ +
+
Utilizando áudio e vídeo com HTML5
+
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incluem e permitem a manipulação de novos conteúdos multimídia.
+
WebRTC
+
Permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
+
API da câmera
+
Permite o uso, manipulação e armazenamento de uma imagem diretamente da câmera do computador.
+
Track e WebVTT
+
O elemento {{HTMLElement("track")}} permite legendas e capítulos. WebVTT é o formato de texto do track {{HTMLElement("track")}}.
+
+ +

Gráficos e efeitos 3D

+ +
+
Canvas
+
Aprenda sobre o novo elemento {{HTMLElement("canvas")}} e como utilizá-lo para desenhar gráficos e objetos no Firefox.
+
API de texto para {{HTMLElement("canvas")}}
+
O elemento {{HTMLElement("canvas")}} agora dá suporte à  API de texto do HTML5.
+
WebGL
+
WebGL traz gráficos 3D à Web, introduzindo uma API que se aproxima bastante à OpenGL ES 2.0, que pode ser usada em elementos {{HTMLElement("canvas")}}.
+
SVG
+
Um formato de imagens vetoriais baseada em XML que pode ser diretamente embutido no HTML5.
+
+ +

Performance e integração

+ +
+
Web Workers
+
Permite a delegação da evolução do JavaScript para threads em segundo plano, permitindo que essas atividades sejam prevenidas e assim não deixando as interações dos eventos lentas.
+
XMLHttpRequest level 2
+
Permite buscar de forma assíncrona algumas partes da página, permitindo apresentar na tela conteúdo dinâmico, variando de acordo com o tempo e ações do usuário. Está é a tecnologia por trás do Ajax.
+
Motor JIT-compiling para JavaScript
+
A nova e poderosa geração de motores JavaScript é muito mais poderosa, levando para uma maior performance.
+
History API
+
Permite a manipulação do histórico do navegador. Isso é especialmente útil para páginas que carregam novas informações interativas.
+
O atributo contentEditable: Transforme seu website em uma wiki!
+
O HTML5 padronizou o atributo contentEditable. Saiba mais sobre este recurso.
+
Arrastar e soltar
+
A API do HTML5 permite suportar o recurso de arrastar e soltar (dragging and dropping) items dentro e entre sites da web. Isso também fornece uma simples API para fazer o uso de extensões e aplicações baseadas na Mozilla.
+
Foco de gestão em HTML
+
O novo HTML5 activeElement e hasFocus são atributos suportados.
+
Manipuladores de protocolos beseados na web
+
Agora você pode registrar aplicações web com manipuladores de protocolos utilizando o método thenavigator.registerProtocolHandler().
+
requestAnimationFrame
+
Permite o controle de animações de renderização para obter a performance ideal.
+
API Fullscreen
+
Controla o uso de toda a tela para uma página web ou aplicação, sem mostrar a interface de UI do navegador.
+
API bloqueio de ponteiro
+
Permite o bloqueio do ponteiro para o conteúdo, para jogos e aplicações semelhantes para não perder o foco quanto o ponteiro atinge o limite da janela.
+
Eventos online e offline
+
A fim de construir uma boa aplicação web offline, você precisa saber quando sua aplicação é realmente offline. Aliás, você também precisa saber quando sua aplicação foi retornada por um status online novamente.
+
+ +

Acesso à dispositivos

+ +
+
Usando a API da câmera
+
É permitido o uso, manipulação, e armazenar imagens através câmeras dos computadores.
+
Eventos touch
+
Manipuladores para reagir a eventos criados por um usuário ao pressionar em telas sensíveis ao toque (touch screens).
+
Utilizando geolocalização
+
Deixa que os navegadores localizem a posição do usuário utilizando a geolocalização.
+
Detectando a orientaçåo do dispositivo
+
Coleta a informação quando o dispositivo em que o browser está rodando muda sua orientação de tela. Isto pode ser utilizado como um dispositivo de entrada (por exemplo, para fazer jogos que utiliza à posiçao do dispositivo) ou para adaptar o layout de uma pagina para a orientaçao da tela (vertical ou horizontal).
+
Pointer Lock API
+
Permite que o cursor fique limitado às medidas do conteúdo da aplicação, assim, jogos e outras aplicações não perdem o foto quando o cursos ultrapassa os limites do conteúdo.
+
+ +

Estilização

+ +

CSS foi estendido para ser capaz de estilo elementos de uma forma muito mais complexa. Sua extensão, também conhecido como CSS3, mas, como o CSS não segue uma especificação padrão, alguns módulos podem não estar necessariamente na versão 3,. Alguns estão na versão 3 e outros até na 1. Chamar de CSS3 é apenas uma convenção.

+ +
+
Novas caracteristicas dos estilos de background
+
Agora é possível determinar uma sombra à um elemento, usando a propriedade box-shadow e também podemos definir diversos backgrounds para um elemento.
+
More fancy borders
+
Também é possível utilizar imagens para estilizar bordas, usando a propriedade border-image. Bordas arredondadas são suportadas através da propriedade border-radius.
+
Animating your style
+
Utilizando transition para animar diferentes estágios de determinadas propriedades ou usando animation para animar trechos da página sem precisar usar o JavaScript com algum evento vinculado, permitindo total controle sobre movimentação de elementos. 
+
Using CSS Transitions to animate between different states or using CSS Animationsto animate parts of the page without a triggering event, you can now control mobile elements on your page.
+
Typography improvement
+
Authors have better control to reach better typography. Eles podem controlar text-overflow e hyphenation, mas tambem pode adicionar um shadow a ele ou controlar mais precisamente a sua decorations. Tipos de letras personalizadas podem ser baixadas e aplicadas gracas a nova@font-face at-rule.
+
Novos layouts de apresentaçoes
+
A fim de melhorar a flexibilidade dos modelos, foram adicionados, dois novos esquemas: o CSS multi-column layouts e CSS flexible box layout.
+
+ + + +

(Alguns outros artigos relacionados com HTML5.)

+ +

Introdução ao HTML5

+ +
+
Introdução ao HTML5
+
Este artigo introduz como utilizar HTML5 no desenho de site ou de sua aplicação.
+
+ +

Elementos do HTML5

+ +
+
Lista de tags / elementos do HTML5
+
Esta página contém uma tabela com todos os elementos (tags) baseado no rascunho atual das especificações do HTML5.
+
+ +
+
Utilizando audio e video
+
Adicionando suporte aos elementos do HTML5 {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} ao Firefox 3.5.
+
Formulários em HTML5
+
Veja as melhorias para formulários web em HTML5: a API de validação de restrição, vários novos atributos, novos valores para {{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }} e os novo elemento {{ HTMLElement("output") }}.
+
Seções e esboços em HTML5
+
Veja os novos elementos para delinear e seccionar em HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
+
O elemento {{ HTMLElement("mark") }}
+
Este elemento é usado para marcar em destaque um texto de especial relevância.
+
O elemento {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }}
+
Este elemento permite adicionar figuras e ilustrações, com uma eventual legenda, colocado abaixo do texto principal.
+
+ +

Suporte Canvas

+ +
+
Tutorial Canvas
+
 Apreda sobre o novo elemento {{ HTMLElement("canvas") }} e como desenhar gráficos e outros objetos no Firefox.
+
HTML5 API texto para elemento <canvas>
+
HTML5 API texto agora é suportado pelo {{ HTMLElement("canvas") }}.
+
+ +
+

Recursos de aplicações web

+
+ +
+
Recursos Offline
+
O Firefox suporta completamente as especificações de HTML5 para  recurso offline. A maioria dos outros navegadores tem algum nível de suporte aos recursos offline.
+
Eventos online e offline
+
O Firefox 3 suporta WHATWG eventos online e offline, que permitem que aplicações e extensões detectem se há ou não uma conexão ativa com Internet, bem como detecta quando a conexão conecta e desconecta.
+
Sessão WHATWG do lado cliente e armazenamento persistente (aka DOM Storage)
+
A sessão do lado cliente e o armazenamento persistente permitem que as aplicações web armazenem dados estruturados no lado  cliente.
+
O atributo contentEditable: transforma seu website em um wiki!
+
O HTML5 tem um atributo padronizado contentEditable. Saiba mais sobre este recurso.
+
Usando arquivos de aplicações web
+
Suporta para a nova HTML5 API de arquivo foi adicionada ao Gecko, tornando possível as aplicações web para acessarem arquivos locais selecionados pelo usuário. Isso inclui suporte para selecionar vários arquivos usando o novo elemento HTML {{ HTMLElement("input") }} do type arquivo de multiplos atributos.
+
+ +

Recursos DOM

+ +
+
getElementsByClassName
+
O método getElementsByClassName no Document e Element nodes são suportados. Estes métodos permitem encontrar elementos de uma classe ou de uma lista de classes.
+
Arrastar e soltar
+
A HTML5 API drag and drop permite suporte para arrastar e soltar itens dentro e entre web sites. Isto também proporciona uma API simples para uso de extensões e aplicativos baseados em Mozilla.
+
Foco na gestão do HTML
+
Os novos activeElement e hasFocus são atributos suportados pelo HTML5..
+
Manipuladores de protocolo baseado em web
+
Agora você pode registrar uma aplicação web como um manipulador de protocolo usando o método  navigator.registerProtocolHandler().
+
+ +

HTML parser

+ +

O Gecko é compatível com HTML5 parser—que transforma os bytes de documento HTML em um DOM—foi ativado por padrão a partir de maio de 2010. (Note que a versão do HTML5 parser que foi incluída no Gecko 1.9.2 / Firefox 3.6 tem bastante erros e não é recomendado para uso real.)

+ +

Alterações adicionais

+ + + +

Tecnologias muitas vezes chamado de parte do HTML5 que não são

+ +

Estas são muitas vezes consideradas em conjunto com um uso amplo termo de "HTML5", mas não são realmente parte do W3C HTML5 Spec.

+ + + +

Veja também

+ +

Alterações nas versões do Firefox que afetam os desenvolvedores da Web:

+ + + +
+

{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pl": "pl/HTML/HTML5", "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}

+
-- cgit v1.2.3-54-g00ecf