Desbloqueando o potencial de HTML5 e CSS3

O lançamento de HTML5 e CSS3 foi um salto evolucionário, mas poucos designers fazem muito uso dos novos recursos fornecidos pela tecnologia. Em parte, isso ocorre porque o potencial total de HTML5 e CSS3 foi negligenciado, por isso as pessoas continuam a desenvolver mais ou menos os mesmos sites, apenas com pequenas diferenças na codificação.

Não há nada de errado com isso, mas há muitas coisas que o HTML5 e o CSS3 disponibilizam para você e que você pode aproveitar para criar criações mais incríveis do que nunca.

Não ignore a tela

Conhecer o objeto de tela é uma das tarefas mais difíceis para um novo programador HTML5, especialmente quando ele já codificou em outras versões de HTML e não tem experiência em programação de computação gráfica.

Aprender a usar o objeto de tela, mesmo que você raramente tenha a intenção de fazer qualquer desenho, é uma habilidade valiosa que todo programador sério deve ter tempo para aprender. Ele pode ser usado para todos os tipos de coisas, incluindo a criação de infográficos animados, slideshows, gráficos (incluindo gráficos interativos) e muito mais.

ilustração cortesia de

Usar a tela é simplesmente uma questão de criar o objeto em HTML5 e, em seguida, preenchê-lo com JavaScript. As técnicas envolvidas são um tópico para outro dia, mas você já pode encontrar alguns tutoriais aqui neste site que ajudarão você a começar.

Você não precisa mais do Flash

A maioria do que usamos anteriormente no Flash não requer Flash. Agora você pode fazer tudo isso com transições CSS3, HTML5, animação HTML5, vídeo HTML5 e áudio HTML5.

As únicas coisas que não estamos fazendo no HTML5 que o Flash permitiu que você fizesse é espionar seus usuários e violar a privacidade deles, mas isso não é algo que você queira fazer de qualquer maneira, é?

A maioria dos usuários achava o Flash muito chato, embora a maioria também o tenha instalado como uma necessidade inevitável. Isso foi até que os graves riscos à segurança e os problemas de privacidade associados ao Flash tornaram agora algo que a maioria dos usuários não instala ou só ativa caso a caso quando for estritamente necessária para uma tarefa que deseja executar. .

CSS3 oferece novas pseudo classes

Algumas pseudo-classes estavam disponíveis no CSS2, mas com o CSS3 você pode usar pseudo-classes posicionais importantes para obter mais controle. Principalmente eles são usados ​​com texto, como os nomes das pseudopalavras indicam: antes, depois, primeira letra, primeira linha…

Você também tem acesso a transições, que podem ser usadas para modificar qualquer coisa, incluindo texto. Essas transições animam ou transformam o que o usuário vê na tela.

Suas páginas da web podem se comunicar diretamente com a GPU

Você deve fazer isso com alguma cautela, já que qualquer tipo de aceleração de hardware vai drenar a vida útil da bateria de dispositivos móveis, mas ainda é muito legal que você possa fazê-lo.

A aceleração de GPU funciona quando você usa transições, 3D transforma, canvas no modo 3D e WebGL 3D. Este último é o meu favorito, mas você precisará fazer muita leitura para entender tudo o que está envolvido no WebGL. Isso lhe dará muito espaço para criar animações e jogos, no entanto.

A aceleração de GPU não funciona com navegadores mais antigos, mesmo se eles suportarem HTML5 e CSS3.

gif cortesia de

Use motores de jogos para tirar o trabalho duro de gráficos 3D

Os programadores de jogos têm usado os mecanismos de jogos desde sempre para tornar a tarefa de programação de jogos mais simples, mas foi apenas nos últimos dois anos que surgiram os motores de jogos HTML5 capazes de criar jogos 3D de alta qualidade. um ambiente baseado em navegador.

Um dos mais simples de começar é o PlayCanvas, e mesmo sendo livre para experimentar e realmente barato para uma licença pessoal, não é leve. Aqui Arrebatar, um jogo criado no PlayCanvas:

E isto é RoboStorm:

Você poderia criar jogos como este? Absolutamente, e é muito mais fácil agora do que nunca.

Para uma experiência de construção de jogos retro, tente Construct2 or Construct3. Ele tem tudo que você precisa para começar a criar jogos em uma base de arrastar e soltar (embora alguns achem que isso é muito limitador). Você cria seus jogos online e as pessoas jogam on-line. É um motor para quem não conhece programação e não quer se preocupar com o aprendizado.

Aqui está Kiwi Story, um antigo jogo de plataformas 2D criado em Construct3:

Você não está limitado apenas a jogar com esses motores. Para fazer filmes e apresentações inteiras, seria melhor usar liqüidificador or maiae, para jogos dedicados a uma plataforma específica, normalmente será melhor usar um ambiente de programação nativo dedicado a essa plataforma. Para jogos interativos de plataforma cruzada, narração de histórias, software educativo ou apresentações, os mecanismos HTML5 são uma excelente opção.

HTML5 e CSS3 fornecem mais poder

Com HTML5 e CSS3, você agora tem controle total sobre todos os elementos que aparecem em sua página, incluindo a capacidade de manipular cada objeto de praticamente qualquer maneira que desejar.

Enquanto a unidade básica de construção ainda é o retângulo, seus sites não precisam mais seguir a linearidade retangular. Você pode colocar as coisas em qualquer ângulo que quiser, girá-las, incliná-las, torcê-las e dobrá-las, e o seu navegador não vai reclamar nem um pouco.

Agora você também pode controlar a opacidade e o dimensionamento com muito mais facilidade do que antes, e as técnicas funcionarão em todos os principais navegadores.

A partir do momento em que escrevo no início do 2018, ainda há alguns problemas com o escalonamento entre diferentes navegadores, com alguns navegadores capazes de dimensionar com precisão, enquanto outros fornecem resultados extremamente diferentes para a mesma página.

Isso significa que, pelo menos por enquanto, ainda temos que programar versões diferentes de um site, se quisermos usar o dimensionamento para fins de resposta.

Felizmente, você raramente terá necessidade disso, mas, às vezes, encaixar alguma coisa na tela, por menor que seja essa tela, será seu objetivo principal. Nesses casos, a falta de escalonamento padronizado entre diferentes navegadores continuará sendo um problema.

Ainda assim, esses problemas não são HTML5 ou CSS3, eles são problemas dos desenvolvedores de navegador que não suportam adequadamente os recursos fornecidos pelo HTML5 e CSS3.

Conforme o tempo passa, devemos ver melhorias nos navegadores e tudo funcionará como esperado. A essa altura, talvez seja hora de começar a aprender HTML6 e CSS4, mas pelo menos é um passo na direção certa.

imagem de cabeçalho cortesia de

Bogdan Rancea

Bogdan é um membro fundador da Inspired Mag, acumulando quase 6 anos de experiência neste período. Em seu tempo livre, ele gosta de estudar música clássica e explorar artes visuais. Ele é muito obcecado com fixies também. Ele é dono do 5 já.