Introdução ao HTML5 / CSS3: dicas, mostruários e amostras de codificação

O HTML5 está ganhando mais popularidade e começando a evoluir toda a interface da web. Até alguns desenvolvedores da web citaram que os elementos HTM5 e os efeitos visuais são comparáveis ​​ao Flash. O novo estilo de script é fácil de entender e os recursos para aprimorar a interface da web são ilimitados. Então, quão interessante é esse HTML5 de qualquer maneira?


Este artigo tem como objetivo fornecer aos leitores informações sobre o que você deve saber sobre o HTML5 e, o mais importante, algumas dicas & truques para criar páginas HTML5 leves, atraentes e interativas.

1. Básico em HTML5

HTML5

Antes de começarmos mais este tópico em HTML5, convém verificar primeiro o navegador atual. Como muitos navegadores ainda estão no modo de desenvolvimento (aprimoramento para acomodar o HTML5), alguns recursos mencionados aqui podem não ser compatíveis.

Aqui estão algumas dicas rápidas para verificar sua compatibilidade do navegador.

Para entender melhor a limitação de um determinado navegador, você pode consultar aqui.

2. Efeitos de texto – Adicionando sombra e efeito de texto avançado em HTML5

Efeitos de texto em HTML5

Efeito de sombra básico no texto

Este é o código de uma string mais simples que transforma seu título comum em um texto interessante. Nunca subestime o efeito de sombra. Para criar esse efeito de aparência semelhante, é necessário que o web designer passe por várias etapas de edição de imagem no Photoshop. E agora basta apenas uma linha de código. A distância da sombra, a cor pode ser alterada para o conteúdo do seu coração.

Amostra de codificação

#shadow h1 {
sombra de texto: 0px 1px 1px rgba (0,0,0, 0,2);
}

Texto com efeito de fogo avançado

A próxima dica é mostrar como a codificação HTML5 pode ser ajustada em um texto ainda mais interessante. Se você experimentar o suficiente ou encontrar outros exemplos, as possibilidades de personalizar os efeitos são infinitas. Nota: este exemplo não é criado por nenhum software de edição de imagens. Apenas códigos simples em HTML5.

Amostra de codificação

#fire h1 {
alinhamento de texto: centro;
margem: 200px automático;
família de fontes: "League-Gothic", Correio;
tamanho da fonte: 200 px; transformação de texto: maiúscula;
cor: #fff;
text-shadow: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10px 80px # 451b0e;
}

Outro ótimo exemplo: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Canto arredondado no HTML5

Canto arredondado em HTML5

O estilo do layout da página da Web em HTML5 nunca foi tão fácil desde a introdução do CSS. E agora você pode até ter cantos arredondados nos seus elementos de layout! Imagina isto; não há mais imagem de fundo em fatias, não há mais fragmentos de imagem confusos. Isso trará muitos aplausos aos web designers por aí.

Amostra de codificação

div {
borda: sólido 2px # 434343;
estofamento: 10 px;
fundo: # e3e3e3;
-raio da borda do moz: 10 px;
-raio da borda da webkit: 10 px;
largura: 500 px;
}

Nota: Moz significa Mozilla, e webkit é para Safari e Chrome.

Outro ótimo exemplo: http://fjd1.com/roundcorner.html

4. Gráfico vetorial escalável (SVG) em HTML5

Tutoriais, guia e amostras de HTML 5

O Gráfico de vetor escalável ou vulgarmente conhecido como (SVG) é um gráfico vetorial de duas dimensões, definido em arquivos de texto XML. Em outras palavras, como o DNA deles é baseado no arquivo de texto XML, eles podem ser criados ou editáveis ​​na plataforma da web. O que também significa que pode haver escala facilmente e os mecanismos de pesquisa são capazes de ler e entender a imagem.

Código de amostra

Outros ótimos exemplos:

5. Incorporando arquivo de filme em HTML5

Vídeo em HTML5

Aqui está outra parte interessante para mostrar os recursos do HTML5. Muitos dos vídeos online geralmente são apresentados ao usuário da web na forma de Flash. Até recentemente, a incorporação de vídeo em HTML5 ganha força lentamente (o YouTube é um bom exemplo) e o Flash perde lentamente sua atratividade. Por que? Usuários móveis. Se você deseja que seu vídeo seja reproduzido em telefones iPhone e Android, o HTML5 é o caminho a seguir.

Para incorporar o vídeo, você precisa conhecer atualmente três formatos suportados por diferentes navegadores; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Código de amostra

Outro ótimo exemplo: https://www.html5rocks.com/en/tutorials/video/basics/

6. Apresentação de slides em HTML5

Tutoriais, guia e amostras de HTML 5

O Powerpoint tem sido um nome sinônimo associado à apresentação de slides. Mas por que se limitar a uma apresentação off-line onde você pode criar slides destinados ao público da web? O HTML5 ajudou a criar slides de apresentação muito poderosos, completos com o menu de transição e navegação. A melhor parte é que você pode aplicar a transformação 3D à sua apresentação.

Código de amostra

pre {
transição: todos os 1s facilitam a entrada;
}

pre: passe o mouse {
cor de fundo: # F2F5FE;
cor da borda: preto;
}

div {
transformar: rotate3d (1,1,0, 45deg);
}

Outros ótimos exemplos:

7. Conteúdo editável em HTML5

Tutoriais, guia e amostras de HTML 5

O texto estático é tão antigo na era em que a flexibilidade e a dinâmica governam o mundo. No HTML5, você pode definir uma área de texto tornada editável pelo usuário da web sem editor de texto.

Código de amostra

Este conteúdo é editável!

Outro ótimo exemplo: http://html5demos.com/contenteditable

8. Tela interativa da Web em HTML5

Tutoriais, guia e amostras de HTML 5

Além do SVG no HTML5, a tela é a próxima melhor coisa que já aconteceu na web. O Canvas permite a renderização de formas de duas dimensões que levam a interatividade a um nível inteiro sem a ajuda do Flash.

No entanto, vale a pena mencionar aqui a codificação simples em HTML5 que cria uma interação incrível de animação.

Outro ótimo exemplo: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Arraste e solte no HTML5

Tutoriais, guia e amostras de HTML 5

Arrastar e soltar (também conhecido como DnD) é outro recurso interessante disponível para HTML5. Um ótimo exemplo seria a implementação pelo Google no Gmail. Se você estiver usando qualquer um dos navegadores compatíveis com HTML5, basta arrastar um arquivo do seu computador e soltar na janela de composição de mensagens. Será automaticamente adicionado como um anexo. Quão legal é isso?

Código de exemplo (DnD nativo)

document.addEventListener (‘dragstart’, function (event) {
event.dataTransfer.setData (‘text’, ‘Customized text’);
event.dataTransfer.effectAllowed = ‘cópia’;
} falso);

Outro ótimo exemplo: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Gráfico de dados CSS puro em HTML5

Tutoriais, guia e amostras de HTML 5

Antes do HTML5, também é impossível criar um gráfico apresentável usando apenas a codificação em HTML. Além disso, alterar o valor dos dados e refletir no gráfico não é uma tarefa simples. Mais uma vez, HTML5 para o resgate. Juntamente com CSS, você pode criar um gráfico absolutamente bonito que envergonha o Microsoft Excel. Os códigos são simples e tudo o que você precisa fazer é gastar tempo para personalizar a cor e o efeito perfeitos para o seu gráfico.

Outro ótimo exemplo: http://cssglobe.com/pure-css-data-chart/

Não é possível obter o suficiente do HTML 5?

Nós também! Aqui está mais sobre o tópico, vá vê-los.

* 30 exemplos muito interessantes de sites HTML 5
* Introdução ao HTML 5
* Precisa ler os tutoriais em HTML 5 em 2012
* Aprenda HTML 5: 10 deve ler lições

Além disso, confira  este curso intensivo em HTML 5 de Robin Nixon. Robin Nixon é o autor de Aprendendo PHP, MySQL e JavaScript; o curso abrange praticamente tudo o que um novato precisa saber em HTML5 – incluindo codificação HTML básica, tela HTML5 para desenho, geolocalização, armazenamento local, além de áudio e vídeo HTML5.

O artigo original é publicado pela primeira vez em WHSR Blog; agora é gerenciado e atualizado pelas equipes do BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map