A adoção de WebGL permitiu criar esse livro “online”, onde você pode estudar o texto, escrever seus programas e ver os resultados diretamente em seu navegador preferido da Internet.
Para melhor acompanhar esse livro, estamos assumindo que você já possua uma boa habilidade no entendimento e desenvolvimento de programas, talvez adquirida após uma disciplina de nível intermediário de computação, envolvendo algoritmos e estrutura de dados. No entanto, como a programação Web possui algumas características que não são tipicamente cobertas nessas disciplinas, resolvemos escrever esse resumo para facilitar sua transição para essa plataforma e tenha um entendimento melhor dos exemplos fornecidos.
O objetivo maior desse capítulo, portanto, não é ensinar HTML, CSS e Javascript, mas fornecer alguns conceitos e elementos que facilitem o entendimento do livro por programadores de outras plataformas.
Possivelmente, se você está começando a programar, os programas que você fez até agora são desenvolvidos, testados e executados no mesmo computador. Tipicamente esses programas só podem usar recursos dessa mesma máquina como, por exemplo, arquivos de imagens, vídeos e documentos de texto.
Quando você escreve um programa para ser usado na Web, esse programa pode usar recursos disponíveis na Internet. Vamos deixar de lado como sua máquina conversa com outras máquinas na Internet mas, basicamente,
ela precisa de um “endereço” (URL ou IP por exemplo) para saber onde encontrar esses recursos extras. Uma vez sabendo o endereço, a conversa segue um protocolo onde sua máquina “pede” para a outra máquina (que está no endereço dado) que ela realize um “serviço” para você. Como a sua máquina recebe o serviço, ela é chamada de cliente e a outra máquina de servidor.
O navegador (ou browser) é um programa que roda no seu computador e permite acessar e usar vários recursos da internet, como uma página com notícias, ou página que ofereça um serviço de streaming de áudio e/ou vídeo. Uma página na Internet é tipicamente um documento escrito na linguagem HTML. O conteúdo dessa página pode ser formatado usando regras de estilo contidas em um arquivo CSS. Por fim, o conteúdo da página pode ser modificado dinamicamente, por exemplo interagindo com a pessoa usando o computador cliente (como um jogo digital ou escolhendo uma música para ser tocada no cliente).
A Linguagem de Marcação de Hipertexto, ou HTML (HyperText Markup Language) é usado para descrever o conteúdo de página da Web. O HTML portanto não é uma linguagem de programação mas uma linguagem de marcação, onde trechos marcados representam coisas diferentes do documento como título de seções, tabelas, imagens etc.
Nessa seção vamos apenas mostrar o esqueleto de um documento HTML. Os detalhes de uso e tipos de marcas você deve consultar de outros documentos disponíveis na própria Internet como:
Um documento HTML usa marcas (tags) para delimitar trechos do documentos. As marcas definem como esses trechos devem ser tratados e/ou exidos pelo navegador.
Por exemplo para criar um parágrafo
você deve iniciá-lo usando a tag <p> e terminá-lo
usando </p>. Observe cada trecho se inicia com
um código (como p) entre < > e termina como mesmo código entre </ > (note a barra).
O trecho abaixo mostra um esqueleto de um documento HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="Hitoshi" content="Exemplo">
<title>Minha página de teste</title>
<!-- etc … -->
</head>
<body>
<h1>Apenas um primeiro exemplo</h1>
</body>
</html>
A primeira e última linha mostram as tags usadas para abrir e fechar o documento.
A segunda linha que o documento está escrito em português do Brasil (pt-br).
A tag <head> inicia a seção de metadados, ou seja, informação que acompanha o documento
mas não é parte do conteúdo exibido pelo navegador, como por exemplo, o título do documento (title),
links para CSS, links para Javascript e outros metadados. O conteúdo exibido por um navegador é marcado pela tag <body>.
O documento a seguir mostra um exemplo com algumas tags comuns. Modifique esse exemplo, por exemplo incluindo mais elementos nas listas, ou elementos nas tabelas etc.
O CSS (Cascading Stylesheets) é usado para definir o estilo como o conteúdo do documento HTML deve ser exibido. Por exemplo, você pode usar o CSS para alterar a fonte, cor, tamanho e espaçamento aplicado a certos trechos do seu conteúdo, dividi-lo em múltiplas colunas, ou adicionar animações e outros recursos decorativos.
O exemplo a seguir mostra como a tag <b> (para negrito ou bold) pode ser modificada, no documento inteiro, para mostrar trechos
em negrito na cor vermelha. Ao invés de modificar o documento inteiro, é possível também definir classes de estilo
(como a .bf no exemplo) que pode ser aplicada apenas nos lugares onde você desejar.
Para saber mais sobre CSS:
Programas interativos permitem que, por exemplo, o usuário possa selecionar, clicar ou entrar com algum dado e, assim, modificar o conteúdo de uma página Web dinamicamente.
O seguinte programa mostra como usar o Javascript para controlar o conteúdo de uma página com um campo para entrada de dados e alguns botões.
Estude esse código para entender os eventos (como os cliques nos botões) são tratados no arquivo Javascript. Caso você deseje rodar em sua própria máquina, certifique de que, na mesma pasta do seu arquivo HTML, estão também os arquivo CSS e Javascript (com os nomes como definidos no cabeçalho do HTML). No JSitor isso não é necessário.
Para saber mais sobre Javascript:
Um recurso importante para a Computação Gráfica é a criação de eventos para redesenhar a tela e assim gerar animações.
Uma forma de criar esses ciclos de animação usando Javascript é pedindo que a janela se redesenhe quando tiver “um tempo livre”,
usando o comando window.requestAnimationFrame( nome_funcao ). O exemplo a seguir mostra como esse comando pode ser usado para animar um cronômetro.
Esse apêndice serviu apenas para introduzir alguns elementos básicos de HTML, CSS e Javascript para aqueles alunos e alunas menos confortáveis com essas ferramentas.
Procuramos apresentar apenas os esqueletos e alguns recursos básicos que você deve se familiarizar para entender os exemplos que aparecem em nossas notas de aula.
Procure também utilizar esses esqueletos e forma de programar em Javascript nas soluções dos exercícios.