desenv-web-rp.com

O que há de novo no HTML5 / CSS3?

Eu já vi este site e este site , mas isso é muito para digerir. Quais são as principais coisas do HTML5 que o tornam diferente/melhor do que o HTML/CSS antigo comum (X)?

23
Jason

O HTML5 é enorme , mas também impressionante .

Na minha opinião, trata-se principalmente de interoperabilidade . A especificação especifica até casos do Edge para tentar garantir que todos os navegadores leiam a marcação da mesma maneira .

Em segundo lugar, o HTML5 possui vídeo e áudio, que fazem exatamente o que o nome diz que faz. Se você deseja incluir vídeo ou áudio, o HTML5 deve reduzir as necessidades de seu plug-in.

Em terceiro lugar, o HTML5 inclui muita acessibilidade e ajuda semântica. Por exemplo, elementos como <section> e <article> ajudam as máquinas a descobrir qual conteúdo deve ser. Novos tipos de entrada como <input type=email> também podem ser úteis pelos mesmos motivos, embora os novos tipos de entrada incluam UIs personalizadas que os tornam úteis mesmo para leitores humanos "comuns".

Observe que os novos recursos de formulários são muito mais que novos tipos de entrada. Ele também inclui suporte para texto de espaço reservado e vários outros atributos.

O HTML5 inclui <canvas>, que permite desenhar formas 2D (e, com WebGL, 3D) como gráficos ou até renderizar jogos.

O comportamento antigo agora é padronizado, como o antigo contentEditable do Internet Explorer.

O DOCTYPE é finalmente decente! Agora você pode memorizá-lo! <!DOCTYPE html>

Especificar a codificação também é mais fácil, com <meta charset=utf-8>.

Se você deseja enviar dados para o cliente e associá-lo a elementos, agora pode fazê-lo com atributos customizados. Por exemplo, <div data-status=open>Open</div> agora é finalmente permitido. Observe que os nomes de atributos customizados devem ser prefixados com data-.

Agora você pode incluir SVG e MathML em documentos HTML. Anteriormente, você só podia fazer isso com documentos XHTML.

Entre as várias novas funções e campos que o HTML5 define, uma das mais impressionantes é classList, que permite manipular o atributo de classe mais facilmente. Em vez de precisar getAttribute/setAttribute e usar hacks complexos para descobrir quais classes um elemento possui e remover uma classe específica desse elemento, classList simplifica muito essas situações difíceis.

Também existem várias especificações relacionadas, como Web Workers, Web Sockets e IndexedDB, que não fazem parte do HTML5, mas todos falam sobre elas como se fossem. Eles são muito úteis para aproveitar os computadores com vários núcleos, se comunicar com os servidores e armazenar dados localmente.

Quanto ao CSS3, ele inclui suporte para animações , transições , bordas arredondadas e o modelo de caixa flexível .

Também novos no CSS3 são os novos seletores, que simplificam a correspondência de elementos específicos em uma página (como apenas as linhas ímpares ou pares de uma tabela).

Opacidade, novas unidades, Marquee e Ruby também fazem parte do CSS3.

Eu acho que abrange praticamente todas as partes importantes.

33
luiscubal

Há o layout básico, como raio da borda, sombras (caixa/texto), suporte a rgba e assim por diante; É por isso que o CSS3 é mais conhecido. Mais interessantes são as tags de tela, de vídeo, armazenamento local, websockets e assim por diante, que criarão experiências de usuário muito mais ricas em HTML/JS/CSS simples. Esses recursos podem ser uma ótima alternativa para o Flash na Web sem a necessidade de plugins adicionais.

4
D4V360

Acho os novos elementos HTML bastante interessantes ... alguns deles são substitutos semânticos promissores para divname__s genéricos. Os novos elementos promissores incluem articlename__, sectionname__, asidename__, figurename__, navname__, headere footername__, entre outros. Eu realmente gosto da idéia de elementos semânticos substituindo recipientes sem sentido.

Ah, sim, um item relacionado: o muito simplificado doctype- finalmente, algo que eu possa digitar de memória!

4
Grant Palin

( Isso é minha resposta para uma pergunta semelhante em webapps.stackexchange.com )

Os Canvas e Threads de trabalho na Web são os aspectos mais interessantes do HTML5 para mim. Eu escrevi alguns aplicativos da Web que usam esses recursos:

O GioAUTHor [sic] faz uso extensivo da tela para permitir traçar caminhos em um mapa e, em seguida, encontrar a rota mais curta do início ao fim (através do algoritmo de Dijkstra em JavaScript).

JavaScript Thread Demo faz uso limitado da tela, mas mostra o uso de Worker Threads, completo com o código de demonstração. Ele também utiliza o controle deslizante HTML5 input type = "range" .


O suporte ao navegador HTML5 é tão variado quanto os próprios navegadores. Existe um site agradável (em HTML5, natch) sobre prontidão para HTML5 que mostra quem está pronto para o que.

4
Alan

Com relação ao CSS3, consulte http://css3please.com/ para ver o que você pode fazer.

Quanto mais tarde o seu navegador, maior a probabilidade de você ver os efeitos.

2
Sniffer

Isso não oferece uma opinião sobre a importância, mas é um delta útil entre os HTMLs 4 e 5.

Meus 2 ¢ nas principais melhorias:

  • _<section>_ e o novo algoritmo de esboço de cabeçalho (eu disse que era apenas meu 2 ¢)
  • novos elementos de formulário, por exemplo _<input type=email>_
  • Atributos _data-*_
  • armazenamento do lado do cliente
  • nativo _<audio>_ e _<video>_
1
Paul D. Waite

As tags de áudio e vídeo permitem a apresentação de mídia sem a necessidade de um plug-in como o Flash ou o Silverlight, e o mais importante funciona nos navegadores iPhone e iPad. Há alguns problemas que precisam ser resolvidos com relação a codecs e gerenciamento de direitos digitais.

1
Steve Tranby

Jeremy Kieth acaba de lançar um livro realmente bom sobre o tópico "HTML5 para Web Designers". Você pode querer verificar isso.

É o primeiro livro de A Book Apart. Altamente recomendável para intermediários a designers avançados. A ++

http://books.alistapart.com/

NOTE: você pode ter que esperar para obter uma cópia impressa

1
Kevin

Porque ninguém colocou isso ainda:

O HTML5 é excelente para o que todos listaram, mas também inclui geolocalização padrão, trabalhadores da Web, soquete da Web, canvas e armazenamento local. Todas essas ferramentas fazem parte das especificações do HTML5, que usam muito JavaScript nos bastidores para fazer isso acontecer.

0
Ilan Biala