Introdução ao HTML5

Este guia está disponível para download em PDF gratuito. Baixe agora Introdução ao HTML5. Sinta-se livre para copiar e compartilhar isso com seus amigos e familiares.

instagram viewer

e

tags não é muito assustador e você não tem medo de sujar as mãos em algum código-fonte.

Em segundo lugar, este guia pressupõe que você saiba o que é CSS e como ele funciona. Não esperamos que você seja um gênio do design, nem que você conheça toda a especificação CSS na palma da sua mão. No entanto, você deve aplicar estilo a um elemento em uma página da Web, vincular a um arquivo CSS e conhecer a diferença entre um ID e uma classe e como aplicar o estilo a cada um deles.

Se você está coçando a cabeça acima, não se preocupe. Uma das melhores coisas sobre HTML e CSS é que é muito, muito fácil. De fato, MakeUseOf tem um guia XHTML incrível Aprenda a falar "Internet": seu guia para xHTMLBem-vindo ao mundo do XHTML - Extensible Hypertext Markup Language - uma linguagem de marcação que permite a qualquer pessoa construir páginas da web com muitas funções diferentes. É o idioma principal da Internet. consulte Mais informação que o levará a uma velocidade muito rápida.

Depois de ler esse guia, você também pode dar uma olhada nos seguintes artigos:

• 8 sites com exemplos de codificação de qualidade 8 melhores sites para exemplos de codificação HTML de qualidadeExistem alguns sites incríveis que oferecem exemplos e tutoriais de codificação HTML bem projetados e úteis. Aqui estão oito dos nossos favoritos. consulte Mais informação
• 6 blogs para seguir grandes web designers 6 Melhores Blogs de Web Design a Seguir consulte Mais informação

Você também precisará de um editor de texto e um navegador modernos. Qualquer versão do Internet Explorer anterior ao IE 9 e algumas versões anteriores do Safari, Chrome e O Firefox enfrentará muitos recursos que fazem parte do HTML5 e pode impedir que você siga este guia.

Como resultado, é recomendável baixar um navegador moderno. Eu recomendo o Google Chrome e o usarei em cada exemplo.

Além disso, tudo o que você precisará é vontade de aprender. Ah, e um editor de texto.

1.2 Editores de texto para desenvolvimento web

Seu editor de texto é o que você usará para escrever seu código. Você pode estar se perguntando o que é um editor de texto.

Bem, em primeiro lugar, não é um processador de texto. Programas como o Microsoft Word e as páginas da Apple são totalmente inadequados para o desenvolvimento da web. Isso ocorre porque eles anexam informações adicionais aos seus arquivos HTML, CSS e Javascript, o que dificulta a leitura do seu navegador.

Um editor de texto dispara caracteres em um arquivo de texto, e não muito mais. Isso permite criar arquivos que não possuem formatação extra e podem ser salvos com qualquer extensão de sua escolha.

Seu computador já vem com um. Se você estiver usando um PC com Windows, o Bloco de notas é o editor de texto que você provavelmente instalou.

Em um Mac, a situação é um pouco diferente. O OS X vem com quatro editores de texto diferentes. Estes são chamados Vim, Emacs, Pico e Nano. No entanto, ao contrário do Bloco de notas, todos eles funcionam no terminal.

Isso é um pouco intimidador para as pessoas que são novas no desenvolvimento da Web e não devem ser usadas por pessoas que são novas no desenvolvimento de software. Não os usaremos neste guia. No entanto, quando você fica um pouco mais confiante com o desenvolvimento de software e web, definitivamente vale a pena dar uma olhada Vim As 7 principais razões para dar uma chance ao editor de texto VimDurante anos, tentei um editor de texto após o outro. Você escolhe, eu tentei. Eu usei cada um desses editores por mais de dois meses como meu principal editor do dia-a-dia. De alguma forma, eu ... consulte Mais informação e Emacs. Ambos são poderosos editores de texto e, quando dominados, podem economizar muito tempo.

No Linux, o editor de texto padrão varia entre as distribuições. No Ubuntu, é provável Gedit gedit: um dos editores de texto sem formatação mais cheios de recursos [Linux e Windows]Quando você pensa em editores de texto simples, a primeira coisa que pode surgir na sua cabeça é o aplicativo Bloco de Notas do Windows. Ele faz exatamente o que a descrição de seu trabalho indica - recursos simples para um texto simples ... consulte Mais informação , que é um editor de texto bastante agradável que não é muito diferente do Bloco de Notas.

No entanto, neste curso, escreveremos nosso código usando três ferramentas diferentes.

O primeiro é Texto sublime 2 Experimente o Sublime Text 2 para atender às suas necessidades de edição de código entre plataformasO Sublime Text 2 é um editor de código de plataforma cruzada sobre o qual ouvi falar recentemente, e devo dizer que estou realmente impressionado, apesar do rótulo beta. Você pode baixar o aplicativo completo sem pagar um centavo ... consulte Mais informação . Sinceramente, não posso recomendar isso o suficiente. Ele vem com tudo o que facilita a vida de um desenvolvedor iniciante. Em primeiro lugar, facilitará a leitura do seu código colorindo determinadas partes. Em segundo lugar, permite alternar entre arquivos facilmente e gerenciar projetos inteiros de arquivos. É ideal para alternar entre arquivos e editar vários bits de código em tempo real.

O terceiro é o Console Javascript Descobrir problemas do site com as ferramentas para desenvolvedores do Chrome ou o FirebugSe você seguiu meus tutoriais do jQuery até agora, talvez já tenha encontrado alguns problemas de código e não saiba como corrigi-los. Quando confrontado com um código não-funcional, é muito ... consulte Mais informação que está embutido no Google Chrome. Isso nos permite escrever Javascript e vê-lo sendo executado imediatamente e será usado para explicar os conceitos básicos de programação.

O segundo é um site chamado Codepen.io. Este site notável permitirá que você codifique HTML, CSS e Javascript no navegador e é gratuito. Também permitirá que você veja suas alterações instantaneamente.

2. Marcação semântica

Neste capítulo, você aprenderá sobre a marcação semântica e como organizar seu código com base no conteúdo.

Até recentemente, o código HTML era geralmente organizado com

Isso funcionou, mas havia espaço para melhorias. O problema com

A marcação semântica é um novo recurso no HTML5. Ele traz novas tags, que funcionam da mesma maneira que uma tag 'div', mas destinam-se a marcar partes comuns de uma página.

Então, como eles funcionam? Considere o seguinte código.

Neste pedaço de código, temos uma barra de navegação, um título e uma lista. Isso não é muito diferente da maioria dos sites em que você provavelmente acessa, quando pensa sobre isso.

Vamos dar uma olhada em um artigo sobre MakeUseOf. Você notará que há uma parte da página reservada inteiramente para navegar para outros artigos. Você também notará que há outra parte da página que contém as palavras que constituem um artigo. Na parte superior da página, você verá um cabeçalho contendo o logotipo MakeUseOf e alguns outros links.

Quando você pensa sobre isso, muitos sites seguem essas convenções. A maioria dos sites possui uma parte reservada para navegação. Eles geralmente têm um corpo de conteúdo. Eles provavelmente têm um cabeçalho.

Tags semânticas são tags que permitem definir partes de um site comumente encontradas na maioria dos sites. Eles não adicionam nada à página, mas permitem que você agrupe tags com base no conteúdo delas e aplique estilos a esses grupos.

Então, lembra-se do código que tínhamos antes? Vamos dar uma olhada com algumas marcações semânticas adicionadas.

Como você pode ver, o código é muito mais fácil de ler. Você sabe quais partes são quais e não há ambiguidade. Isso é importante, porque facilita a escrita de um código bom e limpo. Se você decidir se tornar um web designer profissional, isso se tornará fundamental - você nunca sabe quem estará lendo o trabalho que você produz.

Então, vejamos mais algumas tags de marcação semântica.

2.1 Seção

Seção é uma tag realmente útil. É usado para capturar grandes quantidades de informações e conteúdo marcados com um cabeçalho ou um título. Pense nisso como um capítulo de um livro. Um capítulo tem um título e também pode conter figuras, diagramas, gráficos e palavras. Uma tag de seção seria usada para conter tudo isso.

2.2 Artigo

A tag do artigo é usada para o que parece; Contém conteúdo como uma postagem no blog ou uma notícia. Esse conteúdo deve poder ser desanexado do restante do blog e ainda fazer sentido coerente.

2.3 À parte

Essa tag está reservada para conteúdo relacionado, mas não parte integrante da página da web. Pode ser um monte de fatos relacionados a uma notícia ou a biografia de um usuário em um blog.

2.4 Cabeçalho

Muitas páginas da web possuem uma barra na parte superior da página que contém um logotipo, algumas informações pertencentes ao site e talvez alguns links. Na marcação semântica, você usaria uma tag Header para conter tudo isso.

2.5 Nav

Este elemento está reservado para a parte de navegação do seu site. Isso conteria links para outros sites ou para outras páginas do site. Dentro do contexto de MakeUseOf, essa pode ser a parte da página que está abaixo do cabeçalho.

2.6 Rodapé

Essa tag está reservada para a parte inferior da página. Aqui, você pode colocar alguns detalhes de contato, informações sobre direitos autorais, um mapa ou alguns links para sua página "sobre mim".

2.7 Teste você mesmo

• O que é marcação semântica e para que é usada?
• Estou criando uma página da web e quero usar uma tag semântica para conter uma biografia sobre mim. Qual eu uso?

3. Formulários

Se você já fez um pouco de web design, provavelmente sabe como criar um formulário simples em HTML. Se você é realmente inteligente, provavelmente sabe como obter as informações que obtém do seu formulário e como fazer algo com elas, como colocá-las em um banco de dados.

Os formulários são extremamente importantes. Eles são a base da maioria das coisas que fazemos na Internet. Sempre que você cria uma atualização de status em sua rede social favorita, compra algo da Amazon ou envia um e-mail, provavelmente usa um formulário HTML.

O que você provavelmente não sabia é que a maneira como criamos formulários mudou radicalmente no HTML5. Também é significativamente melhor. Neste capítulo, veremos algumas das coisas legais que você pode fazer agora, apenas com a marcação antiga.

Então, o que há de tão legal na nova maneira de escrever formulários em HTML5? Primeiro, você pode garantir que alguns campos sejam preenchidos para o envio, apenas alterando a marcação do próprio formulário. Além disso, você não precisa mais escrever montanhas de JavaScript ou PHP para fazer isso. É trivialmente fácil.

Em segundo lugar, você pode garantir que seus usuários possam enviar apenas certos tipos de informações ao seu formulário. Então, suponha que você tenha um site para sua lista de e-mails e deseja que as pessoas possam enviar endereços de e-mail reais? Você pode fazer isso apenas usando HTML5. É realmente incrivelmente poderoso.

Em terceiro lugar, você pode melhorar a aparência dos seus formulários, atribuindo a determinados campos um espaço reservado. Isso os tornará significativamente mais intuitivos, pois você pode mostrar aos seus usuários um exemplo do que você espera de um formulário.

3.1 Melhorando um formulário

Então, vamos olhar para um formulário e ver como podemos torná-lo melhor.

Este formulário é bastante básico. Ele pega um nome, um email e uma cor favorita e permite que o usuário a envie. Ele não contém validação de quais informações são colocadas nele e não há nada que impeça os usuários de enviarem este formulário com alguns campos vazios. Vamos mudar tudo isso.

Portanto, a primeira coisa que queremos fazer é garantir que o campo de email receba apenas um email. Isso costumava ser uma tarefa bastante difícil, pois você precisava criar todo tipo de código Regex arcano. Bem, não mais. Você apenas precisa alterar o tipo de entrada de 'texto' para 'email'. Quando você tenta enviar esse formulário com sem sentido, ele reclama e insiste em enviar um email.

3.2 Tipos e padrões de entrada

Existem outros tipos de entrada que você pode exigir. Isso inclui números de telefone, endereços da web, formulários de pesquisa e até seletores de cores! Como o HTML5 está em constante evolução, é lógico que em breve poderemos especificar mais tipos de entrada em um futuro próximo.

Além disso, para itens como números de telefone que variam dependendo da localidade, você pode especificar padrões para as entradas. Eles são criados usando algo chamado "Expressões regulares" e são bastante complicados, mas são incomensuravelmente poderosos.

Também vamos fornecer um exemplo de email em nosso campo, para que o usuário não tenha ambiguidade do que ele deve enviar. Isso é realmente fácil de fazer. Basta criar um novo atributo de "marcador de posição" com um exemplo de endereço de e-mail.

Vamos garantir que o campo "Cor favorita" seja obrigatório. No último colchete angular (>) na tag de entrada de e-mail, basta escrever "obrigatório". É isso aí. Agora, quando você tenta enviar seu formulário sem um valor, ele gera uma mensagem de erro.

O mais incrível dessas mensagens de erro é que o usuário não precisa escrevê-las ou escrever qualquer código para criá-las. Você acabou de alterar um campo para torná-lo necessário e funciona. Com isso dito, é possível personalizá-los, se desejar.

Essa foi uma introdução incrivelmente breve ao poder dos formulários no HTML5. Se você quiser ler mais, recomendo que você visite esses links.

Leitura adicional:

• Truques CSS - Vamos escrever marcação semântica
• Doutor em HTML5 - Vamos falar sobre semântica

3.3 Teste você mesmo

É seu aniversário na próxima semana e você deseja criar um formulário de registro para saber quanto bolo precisa criar. Abra seu editor de texto e crie um formulário com os seguintes campos.

• Nome
• Endereço de e-mail
• Número de telefone
• Alergias

Verifique se os campos de nome, email e número de telefone são obrigatórios e se os campos Email e Número de telefone estão definidos com os tipos de entrada 'email' e 'tel'. Crie um espaço reservado para o campo de alergia com o valor "pólen, ovos, quiche".

Brinque com o formulário. Tente enviar os campos obrigatórios como vazios e tente inserir caracteres não numéricos no campo do número de telefone. No campo email, insira algo que não seja um endereço de email. O que acontece?

4. meios de comunicação

Costumava haver um tempo em que a única maneira de inserir um vídeo ou áudio em uma página da web era usando algo como Flash, Shockwave ou SilverLight.

Isso não era o ideal. Primeiro, nenhuma dessas estruturas funcionou muito bem em dispositivos móveis. Eles simplesmente não estavam equipados para o mundo moderno de smartphones e tablets.

Além disso, eram formatos proprietários. Como resultado, os usuários do Linux e do OS X puderam obter uma experiência bastante de segunda classe ou foram impedidos de consumir serviços de mídia, pois não estavam disponíveis para a plataforma.

Finalmente, eles tinham uma propensão a serem lentos. Se você estivesse em um computador com pouca potência ou mais antigo, não teria uma boa experiência visualizando vídeos usando essas estruturas. O Flash era particularmente notório por isso.

4.1 Como o HTML5 torna o vídeo e o áudio impressionantes

O HTML5 mudou isso ao permitir que os desenvolvedores da Web incluíssem vídeo e áudio em suas páginas da Web com apenas algumas linhas de código. Ele funciona bem em dispositivos móveis e funciona em todos os navegadores modernos.

Como resultado, grandes empresas como YouTube, Vimeo e Netflix estão aproveitando a revolução do HTML5. Por que você não se junta a eles?

4.2 Tudo sobre codecs

Neste capítulo, você aprenderá como usar o poder do HTML5 para incluir áudio e vídeo em suas páginas da web.

Primeiro, vou ter que começar com uma ressalva. Embora você possa usar o vídeo HTML5 em todos os navegadores modernos, ele não funciona da mesma forma em todos os navegadores. Os codecs usados ​​por cada navegador variam. No Internet Explorer, você está limitado ao uso de vídeo MP4. O Chrome é um pouco mais generoso e permite que você use os vídeos WebM, MP4 e Ogg Theora. O Opera é um pouco mais restritivo e permite apenas o uso de vídeos Theora e WebM.

Como resultado, você deve ser um pouco inteligente em como inserir vídeos em sua página da web. Então, vamos ver como funciona.

4.3 Começando com vídeo

Para começar, você precisará criar algumas aberturas e fechamentos

Bem, quando você está aguardando o carregamento do seu vídeo, a pessoa que visita seu site pode ver uma foto relacionada ao vídeo. Para fazer isso, basta atribuir às tags de vídeo um atributo de 'pôster' com um valor da imagem à qual você deseja vincular. Deve ficar assim.

A próxima coisa que queremos fazer é criar um substituto. O que isto significa? Então, suponha que você esteja usando um dos navegadores mais antigos e menos impressionantes do mercado. Muitos desses navegadores mais antigos não suportam vídeo HTML5 e, portanto, não podem reproduzir vídeo HTML5. Você deseja deixar uma mensagem informando que eles desejam atualizar o navegador e que, até isso, eles não poderão assistir ao seu vídeo.

Para fazer isso, basta escrever sua mensagem dentro das tags de vídeo. Nada mais é necessário. Depois de fazer isso, você ficará com um código parecido com este.

Agora, vamos adicionar um vídeo. Vou testar isso no Google Chrome e vincular a um filme em MP4. Para fazer isso, crio uma tag Source e atribuo a ela um atributo src que possui o valor do vídeo que quero incluir.

Minha página está pronta para ser aberta no meu navegador. Associei-me a um filme muito, muito grande e, como resultado, quando aberto, só podemos ver o pôster.

4.4 Adicionando áudio

O áudio pode ser inserido em sua página da web de uma maneira que lembra muito como inserimos o vídeo em nossa página.

Em primeiro lugar, cria-se algumas tags de áudio. Essas tags de áudio contêm um atributo de "controles". Isso dá ao usuário que visita a página a capacidade de pausar, reproduzir retroceder e avançar rapidamente o áudio que está sendo reproduzido.

Em seguida, inclua uma tag de origem no arquivo MP3 ao qual deseja vincular. Você realmente não precisa se preocupar muito com a compatibilidade de codecs. Os navegadores da web mais recentes têm a capacidade de reproduzir áudio MP3, embora seja uma boa prática incluir também um arquivo '.ogg' e um '.wav' - apenas por precaução.

Por fim, você pode criar um substituto para navegadores mais antigos. Isso é feito da mesma maneira em que você criou o substituto para o seu vídeo.

O resultado final se parece um pouco com isso.

Quando você abre isso no seu navegador, ele deve se parecer um pouco com isso.

4.5 Teste você mesmo

• Qual é o objetivo de ter um pôster em suas tags de vídeo?
• Quais codecs você não pode usar no Internet Explorer?
• Se eu quisesse pausar um pouco de áudio, qual atributo você adicionaria à sua tag "áudio"?

Leitura adicional:

• Vídeo em HTML5

5. Transformações e animações CSS3

CSS tradicionalmente era usado para lidar com o layout e design de uma página da web 5 etapas do bebê para aprender CSS e se tornar um feiticeiro de Kick-Ass CSSCSS é a única mudança importante nas páginas da web na última década e abriu caminho para a separação de estilo e conteúdo. Na forma moderna, XHTML define a estrutura semântica ... consulte Mais informação . Isso ainda é verdade, mas em sua última iteração, ganhou a capacidade de lidar com animações e transformações de elementos e imagens.

As pessoas fizeram coisas incríveis com CSS3, desde a criação de um relógio digital até a criação de um jogo completo de Pong. Alguém até o usou para recriar os créditos introdutórios para Mad Men. É uma tecnologia verdadeiramente poderosa e, quando dominada, pode ser usada para adicionar um incrível nível de funcionalidade à sua página da web.

Neste capítulo, vou dar uma breve introdução ao CSS3 Os 5 principais sites para aprender CSS online consulte Mais informação e mostre como adicionar efeitos surpreendentes à sua página.

Primeiro, navegue até codepen.io e crie uma nova caneta. Vamos usar isso como nosso espaço de trabalho durante o período deste capítulo.

Começaremos simples e criaremos uma transformação de imagem simples que gira uma imagem 3 graus quando pairada. Primeiro, crie uma tag div e forneça um ID. No exemplo abaixo, dei um ID de 'muo'.

5.1 Efeitos de foco CSS

Nessa div, inclua uma imagem de sua escolha. Incluí uma cópia do logotipo para MakeUseOf.

Você precisará escrever algumas regras da folha de estilo. No exemplo abaixo, criei uma margem superior e esquerda para dar espaço à imagem. Também incluí uma regra de folha de estilo com aparência curiosa que começa com '#muo: hover'. O que é isso?

Ao anexar ': passar o mouse' a uma regra da folha de estilo, seja em um elemento, um ID ou uma classe, você está efetivamente dizendo ao navegador para aplicar esse estilo quando o mouse governa o elemento. Muito legal, né?

Dentro da regra '#muo: hover', temos uma linha que diz '-webkit-transform: rotate (3deg)'. Como tenho certeza de que você adivinhou, isso indica ao navegador que gire esse elemento div em três graus.

No entanto, vale ressaltar que essa tag funciona apenas no Chrome e Safari. Se você deseja que seu código funcione no Firefox ou no Internet Explorer 9 e superior, altere seu arquivo CSS para incluir as seguintes linhas.

Agora, quando você passa o mouse sobre a imagem, fica assim:

5.2 Usando CSS3 para redimensionar imagens

Então, por que parar aí? Você sabia que também pode usar o método "transformar" para aumentar ou diminuir uma imagem. Vamos mudar nosso arquivo CSS para incluir as seguintes linhas.

Como você pode ver, agora incluímos uma nova regra de transformação, mas desta vez estamos dizendo para fazer algo chamado "escala". Essa é uma maneira realmente bonita de aumentar o tamanho de uma imagem. São necessários dois parâmetros (os números que você vê entre esses parênteses) e representam a quantidade pela qual você aumenta a altura e a largura do elemento.

Como você pode ver no código, aumentarei o tamanho do logotipo div MakeUseOf em 50%. Você pode testar isso funciona passando o mouse sobre ele. Você verá que agora o logotipo "MakeUseOf" está significativamente mais esticado.

Esta foi uma introdução muito gentil às transformações CSS3. Apesar do CSS3 ser muito novo, agora você pode ver que pode fazer muitas manipulações muito interessantes com ele.

5.3 Teste você mesmo

• Como aplicamos um estilo a um elemento ao passar o mouse?
• Como você gira uma imagem usando CSS3?
• Como você dimensiona uma imagem usando CSS3?
• O que acontece se você passar no método de transformação 'translate (50px, 50px)'?

Leitura adicional:

Rochas HTML5 - Apresentação

6. Apenas Javascript suficiente

Se você deseja usar o script no seu navegador, você deve usar Javascript O que é JavaScript e como funciona? [Tecnologia explicada] consulte Mais informação . Infelizmente, não há duas maneiras de fazê-lo. É um linguagem que tem muitos fãs 5 opções extensas de biblioteca de códigos JavaScript para desenvolvedores consulte Mais informação e muitos detratores também. Conforme os idiomas vão, ele tem muitas verrugas. Há um motivo pelo qual o livro mais notável sobre o idioma é chamado "Javascript: as boas partes".

Será impossível ensinar você a usar o Javascript em um único capítulo. Esse não é o objetivo aqui. O objetivo é ensinar Javascript suficiente para que você possa entender o próximo capítulo, que trata do uso de uma tecnologia chamada Canvas para fazer desenhos e animações.

6.1 Acessando o console

Para fazer isso, usaremos o console Javascript embutido em todas as cópias do Google Chrome. Para acessar, clique com o botão direito do mouse em qualquer página da web e pressione "Inspecionar elemento". Em seguida, clique em "Console". Você deveria ver isso.

É tradicional que o primeiro programa que qualquer desenvolvedor iniciante grave seja o programa 'Hello World'. Este é um programa simples que imprime a frase "Olá, mundo" e não muito mais. No seu console, digite ‘console.log (“ Hello world! ”) ;.

6.2 Seu primeiro programa

Então, o que exatamente fizemos? Primeiro, chamamos algo chamado 'console.log'. Esse é um pouco de código incorporado ao computador que simplesmente imprime o que você deseja. Em seguida, anexamos alguns parênteses a ele e incluímos aspas duplas 'Hello World'. Isso é chamado de "argumentos de aprovação" e o tipo de argumento que passamos é chamado de string. Sempre que você quiser fazer algo que envolva letras e caracteres especiais, basta usar aspas simples. No entanto, se você quiser fazer algo usando números, geralmente não precisará usar aspas, como mostrado abaixo.

6.3 Variáveis ​​em JavaScript

Você também pode passar variáveis ​​para 'console.log' também. As variáveis ​​parecem complicadas, mas tudo o que realmente são é um espaço para colocar pedaços de informações. Geralmente são números ou letras. Para fazer isso, você declara uma variável usando a palavra-chave "var", nomeie-a e, com um sinal de igual, dê-lhe um valor. Então, vou criar uma variável chamada "olá" e atribuir a ela um valor "Olá, mundo!". Vou passar isso para o console.log.

Observe como não passei 'olá' para console.log usando aspas. Isso porque eu queria imprimir no console o conteúdo de 'olá' e não o 'olá'.

6.4 O que as funções fazem

Pode ser um pouco tedioso reescrever o mesmo pedaço de código repetidamente, por isso é por isso que escrevemos funções. Funções são mais fáceis do que você pensa. Tudo o que são são pedaços de código que podemos reutilizar sem reescrever o mesmo código novamente. Abaixo, criamos uma função chamada "sup" e transmitimos um argumento usando parênteses, que é então registrado na tela. Chamamos 'sup' enviando para o console 'sup ("Olá, mundo!");'.

6.5 Repetindo uma ação com um loop 'For'

Suponha que você queira executar a mesma ação por um número definido de vezes. É por esse motivo que usamos um loop 'for'. Eles parecem assustadores no começo, mas são fáceis de fazer quando você os entende. Você começa escrevendo 'para ()'.

Nesses parênteses, queremos criar uma variável que conte quantas vezes realizamos uma ação. Então, obtemos algo parecido com esse 'para (var i = 0;)'.

Em seguida, queremos verificar se não atendi a uma condição. Então, nesse caso, queremos ver que são menos de 10. Então, depois do ponto e vírgula, escrevemos 'i <10'. Nosso loop agora fica assim: ‘for (var i = 0; i <10;).

Se i for menor que 10, queremos adicioná-lo por um e depois fazer alguma coisa. Então, colocamos 'i = i + 1'. Nosso loop está quase terminado: ‘for (var i = 0; i <10; i = i + 1) '. Observe como a última parte não possui ponto e vírgula.

Depois disso, vamos querer fazer uma ação. Então, depois dos últimos parênteses, escrevemos algumas chaves e, entre elas, vamos consolar.log o valor de i. Isso criará um contador que conta até nove.

As duas últimas construções de programação que examinaremos são as instruções 'if' e 'while'.

6.6 Declarações If

Uma declaração "if" executa uma ação se um determinado critério for atendido. Eles são semelhantes aos loops 'for' na construção e funcionam da seguinte maneira. Suponha que você tenha uma variável chamada "cheeseburgers" e queira ver se ela tem o valor "saboroso". Se isso acontecer, você deseja registrar "yum, cheeseburgers" na tela. Para fazer isso, você escreveria algo assim.

Observe como eu escrevi "if (cheeseburgers ==" tasty ")". Você usa o dobro ou o triplo de iguais para verificar a igualdade e o único para atribuir um valor.

6.7 Enquanto loops

Por fim, um loop 'while' executa uma ação enquanto um critério é atendido. Então, imagine que você deseja registrar 'yum, cheeseburgers', enquanto cheeseburgers são saborosos. Para fazer isso, escreva o seguinte.

Vale ressaltar que isso entraria em um loop infinito e você deve evitar executar uma ação em um valor que provavelmente não será alterado. Isso pode causar o travamento do navegador ou o código não funcionar.

Como mencionei antes, esta foi uma breve introdução às construções de programação em Javascript. Você é encorajado a ler mais sobre esse assunto fascinante, embora imenso.

6.8 Teste você mesmo

• Quero contar a partir de 30. Escreva um loop 'for' que faça isso.
• Quero criar uma variável chamada "makeuseof" e atribuir a ela um valor "impressionante". Como isso é feito?
• Quero criar uma função que imprima 'MakeUseOf Is Awesome' quando chamada. Escreva essa função.

Leitura adicional:

• “Javascript: as boas partes” por Douglas Crockford
• Guia Javascript MDN

7. Tela criativa

O Canvas é uma tecnologia interessante que permite desenhar imagens e criar animações sem precisar recorrer ao Flash ou Silverlight. As pessoas o usaram para criar coisas bizarras e maravilhosas, incluindo um simulador de secador de cabelo e vários videogames. É uma peça de tecnologia maravilhosa e insondável, neste tutorial, vou dar uma breve introdução a ela.

Vale ressaltar que o Canvas funciona apenas em navegadores da web modernos. Se você estiver usando uma versão antiga do IE, Chrome ou Firefox, talvez não seja possível seguir este capítulo. Se for esse o caso, considere fazer o download da versão mais recente do Google Chrome, que foi o navegador da Web em que criei este tutorial.

7.1 Introdução ao Canvas

Primeiro de tudo, você precisará abrir seu navegador da Web e navegar para codepen.io. Crie uma nova caneta.

Agora, teremos que declarar um elemento da tela. Crie duas tags Canvas de abertura e fechamento. Neles, você deve transmitir três atributos. Essas são a largura e a altura do elemento Canvas, juntamente com o ID que você está fornecendo. Como antes, quando você inseriu um vídeo, inclua uma mensagem de fallback.

Agora, queremos escrever um código Javascript que atraia algo para a tela. Vamos começar o básico e criar um quadrado vermelho simples.

Vamos criar uma variável (eu chamei de 'demonstração') e, em seguida, selecione o elemento da tela e atribua-o a essa variável. Para fazer isso, você usa document.getElementByID () e passa o ID do elemento que deseja selecionar.

A segunda linha do nosso script cria outra variável chamada 'contexto' e, em seguida, chama 'demo.getContext (' 2d ')' nela. Isso indicava ao navegador que trabalharíamos em uma imagem 2d e passaria as funções necessárias para atrair a tela.

A terceira e quarta linhas são as que realmente fazem o desenho na tela. A terceira linha preenche um retângulo com a cor vermelha, enquanto a quarta linha chama fillRect, que o posiciona e define seu comprimento e largura.

Isso não é impressionante. Vamos fazer algo um pouco mais avançado e usar a magia do Javascript e do Canvas para criar MakeUseOf de um novo logotipo.

7.2 Formas e texto

Vamos excluir nossa quarta linha e substituí-la por uma que coloque nosso retângulo no canto superior esquerdo e o estenda pelo comprimento da tela.

Os dois primeiros argumentos definem onde queremos posicionar os eixos x e y da forma. Vamos definir esses dois para '0' por enquanto. O terceiro argumento refere-se à largura da forma. Vamos definir isso para '200' e deixar o quarto argumento para '50'. Agora você deve ter algo parecido com isso.

Este é um ótimo começo, mas não menciona MakeUseOf. Então, vamos adicionar um texto. Vamos criar uma variável contendo "makeuseof" e chamaremos essa variável de "MakeUseOf".

Vamos então criar outra variável de contexto. Chame esse de 'contexto2' e verifique se é 2D. É isso que usaremos para escrever nosso texto.

Queremos que nosso texto seja azul e cubra nosso quadrado vermelho. Então, assim como antes, vamos dar um estilo de preenchimento 'azul'. Agora, vamos selecionar as características do nosso texto. Queremos que ele seja 20px grande, formatado em negrito e usando uma fonte Arial. Chamamos fonte no contexto2 e atribuímos a ela o valor "negrito 20px arial".

Como queremos que esse texto sobreponha nossa caixa vermelha anterior, precisamos chamar 'textBaseLine' no context2 e atribuir um valor de top. Depois de concluído, chamamos 'fillText' no contexto2 e passamos a variável que contém nosso texto e as coordenadas x e y nas quais pretendemos colocar nosso texto. O resultado final do nosso código é algo como isto.

A imagem produzida pelo código se parece com isso.

7.3 Uma palavra sobre tela

Embora essa tenha sido uma introdução incrivelmente básica ao Canvas, você deve entender que também é uma tecnologia incrivelmente grande e incrivelmente poderosa para inicializar. Este guia simplesmente serviu de introdução à criação de gráficos usando essa nova tecnologia.

7.4 Teste você mesmo

• Adicione o seguinte slogan à imagem que você criou: "O melhor site de tecnologia de todos os tempos!"
• Crie um loop 'for' executado por dez iterações. Veja se você pode mover o desenho para baixo da tela, um pixel de cada vez.
• Envolva seu desenho em uma função. O que acontece se você não ligar?

Leitura adicional:

• Rochas HTML5 - Integração de telas em seus aplicativos da web.
• Treehouse - Como desenhar com lona

8. Onde Avançar?

Obrigado por ler meu guia incrivelmente breve sobre as novas tecnologias encontradas no HTML5. É inegável que o HTML5 é a tecnologia do futuro. Ele está sendo adotado pela maioria das tecnologias, pois é fácil de escrever e poderoso além da medida. As pessoas fazem coisas incríveis com isso o tempo todo, e não tenho dúvidas de que, no futuro, você será uma dessas pessoas. É uma honra ter participado da sua jornada no mundo selvagem e maravilhoso do HTML5.

Eu imploro que você continue aprendendo. Continue codificando. Continue a subir de nível e a melhorar, e em pouco tempo você estará usando as tecnologias que foram introduzidas neste pequeno guia para criar produtos maravilhosos.