Um pouco de HTML, CSS e Javascript
O que precisamos saber?
O HTML nasceu há muito tempo atrás, mais ou menos junto com a internet. Ele evoluiu e hoje está na versão 5. O HTML não trabalha sozinho, serve apenas para marcar lugares em um página. Para formatar o conteúdo das páginas, ou seja, torná-las mais bonitas e adaptáveis aos mais variados tipos de tela, temos o CSS, que também evoluiu muito, e atualmente está na versão 3.
Por último, mas não menos importante, temos o Javascript. Ele também evoluiu muito, ganhou velocidade, e, principalmente, respeito. Ele é usado para trazer dinamismo às páginas, como efeitos e transição, controlar áudio, vídeo, entre outras coisas.
Eles não trabalham sozinhos. Os três, unidos, nos dão superpoderes e, assim, podemos criar páginas web maravilhosas e, no nosso caso, jogos! O caminho para a criação de jogos não é difícil, mas é preciso dedicação, interesse, tempo, inspiração e persistência.
Escrevendo códigos
Olha, uma das coisas mais esquisitas do mundo é um código-fonte desorganizado. Sério. Você PRECISA deixar seu código legível e isso deve ser feito desde o início. Se você já programa, e eu imagino que já faça isso, espero que já seja organizado com seu código. Se não programa, então, desde agora, seja organizado. Todos os códigos apresentados aqui serão organizados, indentados, comentados, prezando pela legibilidade.Vamos trabalhar com 3 tipos de código: HTML, CSS e Javascript. Cada um deles possuem uma indentação, uma maneira de marcar os blocos, e nesse post aqui, você vai aprender como escrever cada um deles.
HTML - Do básico ao básico
O HTML será o alicerce do nosso código e quase sempre será o mesmo. Acompanhe o código abaixo:<!-- Define a versão do HTML. Para a versão 5, basta escrever
"html" no DOCTYPE -->
<!DOCTYPE html>
<!-- Aqui o HTML começa. Definimos o idioma para português (br) -->
<html lang="pt-br">
<!-- Precisamos determinar algumas características do documento -->
<head>
<!-- codificação do arquivo -->
<meta charset="utf-8">
<!-- título do documento -->
<title>Meu primeiro canvas</title>
<!-- para dispositivos móveis -->
<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- referência ao arquivo que contém a formatação da página -->
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<!-- aqui temos o canvas -->
<canvas id="output" width="200" height="200">
Seu navegador não suporta o elemento canvas
</canvas>
<!-- e aqui temos o nosso primeiro código Javascript -->
<script>
/* Aqui pegamos o canvas */
var canvas = document.getElementById("output");
/* Aqui definimos o contexto que queremos trabalhar */
var ctx = canvas.getContext("2d");
/* Agora escolhemos a fonte e o tamanho */
ctx.font = "30px Arial";
/* E, finalmente, escrevemos um texto qualquer no canvas */
ctx.fillText("Olá Canvas!",10,50);
</script>
</body>
</html>
Não se prenda aos detalhes por enquanto. Salve o código acima como exemplo01.html e vamos ao arquivo default.css:
html, body {
/* Retira as margens e os espaçamentos do documento */
padding: 0;
margin: 0;
/* Define a altura do documento para 100% da área do navegador */
height: 100%;
}
canvas {
/* Centraliza o canvas */
margin: 3em 50%;
transform: translateX(-50%);
}
Agora vamos aos detalhes pra quem não entendeu
Essas poucas linhas já ensinam muito. O objetivo desse post não é esgotar o tema HTML, CSS e Javascript, mas determinar os fundamentos da escrita de código nessas linguagens.1º - Indentação: perceba que cada grupo de código recebe uma indentação, que nada mais é que esse espaço entre a margem e o texto. Isso serve para tornar o código mais legível e fácil de manter.
2º - Comentários: nesse exemplo, para cada código, comentei a função dele. Foi um exagero, claro, mas acostume-se a comentar o seu código. É comum que, depois de um tempo, não saibamos exatamente a razão que nos levou a escrever aquele código daquele jeito. No futuro, numa revisão, fica mais fácil separar as coisas quando comentadas.
Outra coisa: os comentários no arquivo html são delimitados pelos símbolos <!-- e -->. Já no código Javascript e no CSS os delimitadores de comentário são os símbolos /* e */.
3º - Elementos HTML: chamamos de elementos HTML as palavras que marcam as variações do conteúdo de um documento HTML. Por exemplo, <head></head> e <body></body> são elementos fundamentais que delimitam o conteúdo do cabeçalho e do corpo do documento, respectivamente. Por outro lado, <canvas></canvas> determina a área que utilizaremos para desenhar nossas imagens e textos.
Elementos HTML podem possuir atributos, na maior parte das vezes um par chave="valor". Em <canvas id="output"></canvas>, o par id="output" define a propriedade "id" com o valor "output". Existem atributos predefinidos e outros que nós mesmos podemos criar. Para atributos criados por nós mesmos, usamos o prefixo "data-". Isso será usado no futuro.
Isso é tudo para esse post.
Comentários
Postar um comentário