Comece a usar HTML5

Comece a usar HTML5
Este guia está disponível para download em PDF gratuito. Baixe este arquivo agora . Sinta-se à vontade para copiar e compartilhar com seus amigos e familiares.

Índice

§1. Introdução





§2 - Marcação Semântica





§3 - Formulários





§4 - Médio

§5 – Transformações e animações CSS3



§6 - Just Enough Javascript

§7 - Tela criativa





§8 - Onde próximo?

1. Introdução

Você já ouviu falar: HTML5. Todo mundo está usando. Ele está sendo anunciado como o salvador da Internet, permitindo que as pessoas criem páginas da Web ricas e envolventes sem recorrer ao uso de Flash e Shockwave.





Mas o que realmente é?

Bem, essa não é uma pergunta fácil de responder. Neste tutorial de HTML5, tentaremos fornecer algumas respostas. HTML5 é usado para descrever um grupo muito diverso de coisas. É um padrão de escrita de páginas da web. É uma coleção de APIs. É uma nova forma de adicionar interatividade às páginas da web.

HTML5 é tudo isso e muito mais. Então, sobre o que é este livro?

Neste tutorial de HTML5, vou supor que em algum momento você já tocou em HTML e CSS. Talvez você tenha criado seu próprio tema Wordpress ou editado um layout do MySpace antes. Talvez você tenha lido o próprio guia XHTML do MakeUseOf. O que quero dizer é que estou supondo que você conhece bem uma página da web e que o que discutimos neste guia não será muito estranho para você.

O objetivo deste guia não é ensinar-lhe todo o HTML5. Isso estaria totalmente fora do escopo deste livro. O objetivo é fornecer uma introdução suave a essas novas tecnologias da web incríveis e mostrar algumas maneiras interessantes de incorporá-las em seus sites.

Por que você gostaria de aprender HTML5?

É uma pergunta justa. Em um mundo de smartphones e aplicativos, é realmente importante aprender a programar páginas da web?

Bem, acredite ou não, é muito comum escrever aplicativos para smartphones usando tecnologias HTML5. Até recentemente, o aplicativo do Facebook para Android era escrito em HTML5, CSS e Javascript.

Blackberry é outra grande empresa que está imensamente interessada em HTML5. Isso é óbvio na última iteração de seu sistema operacional móvel, Blackberry OS 10, onde eles estão incentivando ativamente os desenvolvedores a desenvolver aplicativos para seus telefones usando tecnologias da web.

Os novos smartphones Firefox OS também rodam inteiramente em aplicativos HTML5. Um conhecimento prático de HTML5 é essencial no clima atual dos smartphones.

Além disso, aprender HTML5 é bom para sua carreira. Não acredita em mim? De acordo com Even.com , o salário médio anual de um desenvolvedor HTML5 é de US $ 89.000. Com mais e mais empresas mudando seus sites para usar tecnologias HTML5, os desenvolvedores que conhecem a pilha HTML5 são procurados - agora mais do que nunca.

1.1 Pré-requisitos

Este tutorial HTML5 assume algumas coisas. Em primeiro lugar, pressupõe que saiba como funciona a web e que saiba criar uma página web básica. Você deve ser capaz de juntar alguns elementos HTML e apresentar algumas informações em um navegador da web. Vendo e

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

Em segundo lugar, este guia assume que você sabe o que é CSS e como funciona. Não esperamos que você seja um gênio do design, nem esperamos que você saiba todas as especificações CSS na palma da sua mão. Você deve, entretanto, ser capaz de aplicar estilo a um elemento em uma página da web, ser capaz de vincular a um arquivo CSS e saber a diferença entre um ID e uma classe e como aplicar estilo a cada um deles.

Se você está coçando a cabeça, não se preocupe. Uma das melhores coisas sobre HTML e CSS é que é muito, muito fácil. Na verdade, MakeUseOf tem um guia XHTML incrível que o deixará atualizado muito rápido.

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

Você também vai 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 Firefox terão problemas com muitos recursos que fazem parte do HTML5 e podem impedi-lo de seguir este guia.

Como resultado, você é incentivado a baixar um navegador moderno. Eu recomendo o Google Chrome, e irei usá-lo em cada exemplo.

Além disso, tudo de que você precisa é disposição para 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 Microsoft Word e Apple's Pages são totalmente inadequados para desenvolvimento web. Isso ocorre porque eles anexam informações adicionais aos seus arquivos HTML, CSS e Javascript que dificultam 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 sem formatação extra e que podem ser salvos com qualquer extensão de sua escolha.

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

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

Isso é um pouco intimidante para pessoas que são novas no desenvolvimento da web e não deve ser usado por pessoas que são novas no desenvolvimento de software. Não os usaremos neste guia. No entanto, quando você ficar um pouco mais confiante com o software e o desenvolvimento web, definitivamente vale a pena dar uma olhada no Vim e no Emacs. Ambos são editores de texto poderosos e, quando dominados, podem economizar muito tempo.

No Linux, o editor de texto padrão varia entre as distribuições. No Ubuntu, é provavelmente o Gedit, que é um editor de texto bastante agradável que não é muito diferente do Bloco de notas.

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

O primeiro é Sublime Text 2. Sinceramente, não posso recomendar isso o suficiente. Ele vem com todas as coisas que tornam a vida mais fácil para um desenvolvedor iniciante. Em primeiro lugar, tornará seu código mais fácil de ler, colorindo certas partes. Em segundo lugar, permite alternar facilmente entre arquivos e gerenciar projetos inteiros de arquivos. Isso é ideal para alternar entre arquivos e editar vários bits de código em tempo real.

O terceiro é o console Javascript integrado ao 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 notável site permitirá que você codifique HTML, CSS e Javascript no navegador e é de uso 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 em seu conteúdo.

Até recentemente, o código HTML era geralmente organizado com tags. Isso permitiu criar um grupo de elementos e, em seguida, aplicar estilo a esses elementos.

Isso funcionou, mas havia espaço para melhorias. O problema com as tags era que não eram semânticas. Div não significa nada, na verdade.

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

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

Neste código, temos uma barra de navegação, um título e uma lista. Isso não é muito diferente da maioria dos sites que você provavelmente acessará, pensando bem.

como fazer um ícone para o windows 10

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. No topo 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 tem uma parte reservada para navegação. Geralmente, eles têm um corpo de conteúdo. É mais do que provável que tenham um cabeçalho.

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

Então, lembra daquele código que tínhamos antes? Vamos dar uma olhada nisso 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á ambigüidade. Isso é importante porque torna mais fácil escrever um código bom e limpo. Se você decidir se tornar um web designer profissional, isso se torna fundamental - você nunca sabe quem estará lendo o trabalho que você produz.

Então, vamos dar uma olhada em mais algumas tags de marcação semântica.

2.1 Seção

Section é uma tag muito útil. É usado para obter grandes quantidades de informações e conteúdo marcadas com um título ou título. Pense nisso como um capítulo de um livro. Um capítulo tem um título e também pode conter imagens, 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 de blog ou uma notícia. Esse conteúdo deve ser capaz de ser destacado do restante do blog e ainda fazer sentido coerente.

2.3 À parte

Esta tag é reservada para conteúdo relacionado, mas não como 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 têm 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 de cabeçalho para conter tudo isso.

2.5 Nav

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

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

2.7 Teste a si mesmo

  • O que é marcação semântica e para que é usada?
  • Estou fazendo 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ê for realmente inteligente, provavelmente sabe como pegar 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. Cada vez que você cria uma atualização de status em sua rede social favorita, compra algo na Amazon ou envia um e-mail, provavelmente já usou 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, vamos dar uma olhada em 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? Em primeiro lugar, você pode garantir que alguns campos devem ser preenchidos para enviar, 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 só possam enviar determinados tipos de informações para o seu formulário. Então, vamos supor que você tenha um site para sua lista de mala direta e só queira que as pessoas enviem 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 de seus formulários atribuindo a determinados campos um espaço reservado. Isso os tornará significativamente mais intuitivos, pois você pode mostrar aos usuários um exemplo do que espera de um formulário.

3.1 Melhorando um formulário

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

Este formulário é bastante básico. Ele pega um nome, um e-mail e uma cor favorita e, em seguida, permite que o usuário envie isso. 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 enviar 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 muito difícil, pois você teria que criar todos os tipos de código Regex arcano. Bem, não mais. Você apenas tem que mudar o tipo de entrada de 'texto' para 'e-mail'. Quando você tenta enviar esse formulário sem sentido, ele reclama e insiste para que você envie um e-mail.

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é mesmo seletores de cores! Como o HTML5 está em constante evolução, é lógico que em breve seremos capazes de especificar mais tipos de entrada em um futuro próximo.

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

Também vamos fornecer um exemplo de um e-mail em nosso campo, para que o usuário não tenha ambigüidades sobre o que deve enviar. Isso é muito fácil de fazer. Basta criar um novo atributo de 'espaço reservado' com um endereço de e-mail de exemplo.

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

O que é realmente incrível sobre essas mensagens de erro é que o usuário não precisa escrevê-las ou escrever nenhum código para criá-las. Basta alterar um campo para torná-lo obrigatório e ele simplesmente funciona. Dito isso, é possível customizá-los, caso queira.

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

Leitura adicional:

  • Truques de CSS - vamos escrever uma marcação semântica
  • HTML5 Doctor - Vamos falar sobre semântica

3.3 Teste a si mesmo

É seu aniversário na próxima semana, e você deseja criar um formulário de inscrição 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

Certifique-se de que os campos de nome, e-mail e número de telefone são obrigatórios e que os campos E-mail e Número de telefone estão configurados com os tipos de entrada 'e-mail' 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 de e-mail, insira algo que não seja um endereço de e-mail. O que acontece?

4. Média

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

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

como criar arquivo em lote no windows

Além disso, eram formatos proprietários. Como resultado, os usuários do Linux e do OS X podiam ter uma experiência de segunda categoria ou até mesmo eram impedidos de consumir serviços de mídia, já que não estavam disponíveis para sua plataforma.

Finalmente, eles tinham tendência a ser lentos. Se você estivesse em um computador com menos potência ou mais antigo, não teria uma boa experiência de visualização de vídeo usando essas estruturas. O Flash foi particularmente notório por isso.

4.1 Como o HTML5 torna o vídeo e o áudio incríveis

O HTML5 mudou isso permitindo que os desenvolvedores da web incluam vídeo e áudio em suas páginas da web com apenas algumas linhas de código. Ele funciona muito bem em dispositivos móveis e em todos os navegadores da web 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.

Em primeiro lugar, terei que começar com uma advertência. Embora você possa usar o vídeo HTML5 em todos os navegadores da web modernos, ele não funciona da mesma forma em todos os navegadores da web. Os codecs usados ​​por cada navegador variam. No Internet Explorer, você está limitado a usar vídeo MP4. O Chrome é um pouco mais generoso e permite que você use vídeos WebM, MP4 e Ogg Theora. O Opera é um pouco mais restritivo e só permite o uso de vídeos Theora e WebM.

Como resultado, você precisa ser um pouco inteligente na forma como insere vídeo 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 tags de abertura e fechamento. É aqui que você fará um link para seus arquivos de vídeo. Mas primeiro, você vai querer definir um pôster. O que isso significa?

Bem, quando você está esperando o seu vídeo carregar, a pessoa que está visitando seu site pode ver uma imagem relacionada ao vídeo. Para fazer isso, basta atribuir às suas tags de vídeo o atributo 'poster' com o valor da imagem para a qual deseja criar um link. Deve ser assim.

A próxima coisa que queremos fazer é criar um fallback. O que isto significa? Então, suponha que você esteja usando um dos navegadores mais antigos e menos incríveis que existem. Muitos desses navegadores mais antigos não suportam vídeo HTML5 e, portanto, não podem reproduzir vídeo HTML5. Você vai querer deixar uma mensagem informando que eles vão querer atualizar o navegador e que até que façam isso, eles não poderão assistir ao seu vídeo.

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

Agora, vamos adicionar alguns vídeos. Vou testar isso no Google Chrome, então vou criar um link para um filme MP4. Para fazer isso, crio uma tag Source e atribuo a ela um atributo src que tem um valor do vídeo que desejo incluir.

Minha página agora está pronta para ser aberta no meu navegador da web. Vinculei a um filme que é muito, muito grande e, como resultado, quando é aberto só se vê o pôster.

4.4 Adicionando Áudio

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

Em primeiro lugar, cria-se algumas tags de áudio. Essas marcas 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 o áudio que está sendo reproduzido.

Em seguida, você inclui uma tag de origem no arquivo MP3 que deseja vincular. Você realmente não precisa se preocupar tanto quando se trata de compatibilidade de codec. Os navegadores 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 para garantir.

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

O resultado final se parece um pouco com isso.

Quando você abre em seu navegador da web, deve ser um pouco assim.

4.5 Teste a si mesmo

  • Qual é o propósito de ter um pôster em suas tags de vídeo?
  • Quais codecs você não pode usar no Internet Explorer?
  • Se eu quisesse a capacidade de pausar parte do áudio, que atributo você adicionaria à sua tag de 'áudio'?

Leitura adicional:

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

CSS era tradicionalmente usado para lidar com o layout e design de uma página da web. 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 escrita de um jogo Pong completo. Alguém até o usou para recriar os créditos introdutórios de Mad Men. É uma tecnologia verdadeiramente poderosa e, quando dominada, pode ser usada para adicionar um nível incrível de funcionalidade à sua página da web.

Neste capítulo, darei uma breve introdução ao CSS3 e mostrarei como adicionar alguns efeitos incríveis à sua página.

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

Vamos começar simples e criar uma transformação de imagem simples que gira uma imagem 3 graus quando pairada. Em primeiro lugar, crie uma tag div e dê a ela um ID. No exemplo abaixo, dei a ele um ID de 'muo'.

5.1 CSS Hover Effects

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

Em seguida, você precisará escrever algumas regras de 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 de aparência curiosa que começa com '#muo: hover'. O que é aquilo?

Quando você anexa ': hover' a uma regra de folha de estilo, seja a um elemento, um ID ou uma classe, você está efetivamente dizendo ao navegador para aplicar este estilo quando o mouse controla o elemento. Muito legal, certo?

Dentro da regra '#muo: hover', temos uma linha que diz '-webkit-transform: rotate (3deg)'. Como tenho certeza de que você já deve ter adivinhado, isso diz ao navegador para girar esse elemento div em três graus.

No entanto, é importante notar que esta tag só funciona no Chrome e Safari. Se quiser que seu código funcione no Firefox ou Internet Explorer 9 e superior, você vai querer alterar seu arquivo CSS para incluir as seguintes linhas.

Agora, quando você passa o mouse sobre a imagem, ela se parece com isto:

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 ampliar ou reduzir 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'. Esta é uma maneira realmente bonita de aumentar o tamanho de uma imagem. Leva dois parâmetros (aqueles números que você vê entre os parênteses) e eles 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 o funcionamento passando o mouse sobre ele. Você verá que agora o logotipo 'MakeUseOf' está significativamente mais alongado.

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

5.3 Teste a si mesmo

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

Leitura adicional:

HTML5 Rocks - Apresentação

6. Just Enough Javascript

Se você quiser usar um script em seu navegador, deverá usar Javascript. Infelizmente, não há duas maneiras de fazer isso. É uma linguagem que tem muitos fãs e muitos detratores também. No que diz respeito às línguas, ele tem muitas verrugas. Há um motivo pelo qual o livro mais notável sobre a linguagem se chama 'Javascript: as partes boas'.

Será impossível ensinar a você como usar 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 é sobre como usar uma tecnologia chamada Canvas para fazer desenhos e animações.

6.1 Acessando o Console

Para fazer isso, usaremos o console Javascript que está integrado em todas as cópias do Google Chrome. Para acessar isso, você pode clicar com o botão direito em qualquer página da web e clicar em 'Inspecionar Elemento'. Em seguida, clique em 'Console'. Você deveria ver isso.

É tradicional que o primeiro programa que qualquer desenvolvedor iniciante escreva seja o programa 'Hello World'. Este é um programa simples que imprime a frase 'Hello World' e não muito mais. No console, digite 'console.log (' Hello world! ') ;.

6.2 Seu primeiro programa

Então, o que exatamente nós fizemos? Primeiro, chamamos algo chamado 'console.log'. Este é um trecho de código embutido no computador que simplesmente imprime tudo o que você disser. Em seguida, anexamos alguns parênteses a ele e incluímos 'Hello World' entre aspas duplas. Isso é chamado de 'passagem de argumentos', e o tipo de argumento que passamos é chamado de string. Sempre que você quiser fazer algo envolvendo letras e caracteres especiais, basta usar aspas simples. No entanto, se você quiser fazer qualquer coisa usando números, geralmente não precisa usar aspas, como pode ser visto abaixo.

6.3 Variáveis ​​em JavaScript

Você também pode passar variáveis ​​para 'console.log'. As variáveis ​​parecem complicadas, mas tudo o que realmente são é um espaço para colocar pedaços de informação. Freqüentemente, são números ou letras. Para fazer isso, você declara uma variável usando a palavra-chave 'var', dá um nome a ela e, em seguida, com um sinal de igual, dá um valor a ela. Portanto, vou criar uma variável chamada 'hello' e atribuir a ela o valor 'Hello World!'. Em seguida, passarei isso para console.log.

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

6.4 O que as funções fazem

Pode ser um pouco tedioso reescrever o mesmo trecho de código repetidamente, por isso escrevemos funções. As funções são mais fáceis do que você pensa. Tudo o que eles 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 estamos passando 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 fazer a mesma ação por um determinado número de vezes. É por essa razão que usaríamos um loop 'for'. Eles parecem assustadores no início, mas são tão fáceis de fazer quando você os entende. Você começa escrevendo 'for ()'.

Nesses parênteses, vamos querer criar uma variável que conte quantas vezes executamos uma ação. Portanto, obtemos algo parecido com 'for (var i = 0;)'.

Em seguida, queremos verificar se eu não atendi a uma condição. Então, neste caso, queremos ver que é menor que 10. Então, após o ponto-e-vírgula, escrevemos 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Se i for menor que 10, queremos somar um e então fazer algo. Então, colocamos 'i = i + 1'. Nosso loop está quase terminado: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Depois disso, vamos querer fazer uma ação. Assim, após os últimos parênteses, escrevemos algumas chaves e, entre elas, vamos console.log o valor de i. Isso criará um contador que conta até nove.

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

6.6 Declarações If

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

Observe como eu escrevi 'if (cheeseburgers ==' tasty ')'. Use duplo ou triplo igual para verificar a igualdade e simples igual para atribuir um valor.

6.7 Loops While

Finalmente, um loop 'while' executa uma ação enquanto um critério é atendido. Então, imagine que você quer fazer 'yum, cheeseburgers' enquanto cheeseburgers são igualmente saborosos. Para fazer isso, você escreveria o seguinte.

É importante notar que isso entraria em um loop infinito e você deve evitar fazer uma ação em um valor que provavelmente não mudará. Isso pode fazer com que seu navegador bloqueie ou que seu código não funcione.

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

6.8 Teste a si mesmo

  • Eu quero fazer uma contagem regressiva de 30. Escreva um loop 'for' que faria isso.
  • Quero criar uma variável chamada 'makeuseof' e atribuir a ela o valor 'incrível'. Como isso é feito?
  • Quero criar uma função que imprima 'MakeUseOf Is Awesome' quando chamada. Escreva essa função.

Leitura adicional:

7. Tela criativa

Canvas é uma tecnologia bacana que permite desenhar imagens e criar animações sem ter que 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 tecnologia maravilhosa e incomensuravelmente grande. Neste tutorial, farei uma breve introdução a ela.

É importante notar que o Canvas só funciona em navegadores da web modernos. Se estiver usando uma versão antiga do IE, Chrome ou Firefox, você pode não conseguir acompanhar este capítulo. Se for esse o caso, você deve considerar o download da versão mais recente do Google Chrome, que foi o navegador no qual criei este tutorial.

7.1 Introdução ao Canvas

Em primeiro lugar, você precisará abrir seu navegador da web e navegar até codepen.io. Crie uma nova caneta.

Agora, vamos ter que declarar um elemento canvas. Crie duas tags de abertura e fechamento do Canvas. Neles, você deve passar três atributos. Essas são a largura e a altura do elemento Canvas, junto com o ID que você está fornecendo. Como antes, quando você inseriu algum vídeo, deve incluir uma mensagem substituta.

Agora, vamos querer escrever algum código Javascript que irá desenhar algo na tela. Vamos começar básico e criar um quadrado vermelho simples.

Vamos criar uma variável (chamei de 'demo') e, em seguida, selecionar o elemento canvas e atribuí-lo a essa variável. Para fazer isso, você usa document.getElementByID () e passa o ID do elemento que deseja selecionar.

A segunda linha em nosso script cria outra variável chamada 'contexto' e então chama 'demo.getContext (' 2d ')' nela. Isso disse ao navegador que trabalharemos em uma imagem 2d e, em seguida, passou as funções necessárias para desenhar na tela.

A terceira e a 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 um novo logotipo.

7.2 Formas e texto

Vamos deletar nossa quarta linha e substituí-la por uma que coloque nosso retângulo no canto superior esquerdo e estique-o no comprimento de nossa tela.

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

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

Em seguida, vamos querer criar outra variável de contexto. Chame este de 'contexto2' e certifique-se de que é 2d. É isso que usaremos para escrever nosso texto.

Queremos que nosso texto seja colorido de azul e sobreponha nosso quadrado vermelho. Então, assim como antes, vamos dar a ele um fillStyle de 'blue'. Agora, vamos selecionar as características do nosso texto. Queremos que seja 20px grande, formatado em negrito e usando uma fonte Arial. Chamamos fonte em context2 e atribuímos a ela o valor 'bold 20px arial'.

Como queremos que esse texto se sobreponha à caixa vermelha anterior, precisamos chamar 'textBaseLine' no context2 e atribuir a ele o valor top. Feito isso, chamamos 'fillText' no context2 e passamos a variável que contém nosso texto e as coordenadas xey nas quais pretendemos colocar nosso texto. O resultado final do nosso código é algo assim.

A imagem produzida pelo código tem esta aparência.

7.3 Uma palavra na tela

Embora esta 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 serviu simplesmente como uma introdução à criação de gráficos usando essa nova tecnologia.

como remover o fone de ouvido quebrado sem cola

7.4 Teste a si mesmo

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

Leitura adicional:

8. Onde próximo?

Obrigado por ler meu guia incrivelmente breve sobre as novas tecnologias encontradas no HTML5. É inegável que 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 estão fazendo coisas incríveis com ele o tempo todo, e não tenho dúvidas de que, no futuro, você será uma dessas pessoas. Estou honrado por ter feito parte de sua jornada no mundo selvagem e maravilhoso do HTML5.

Imploro que continue aprendendo. Continue codificando. Continue a subir de nível e melhorar, e em nenhum momento você estará usando as tecnologias que foram apresentadas neste breve guia para criar produtos maravilhosos.

Compartilhado Compartilhado Tweet O email Vale a pena atualizar para o Windows 11?

O Windows foi redesenhado. Mas isso é suficiente para convencê-lo a mudar do Windows 10 para o Windows 11?

Leia a seguir
Tópicos relacionados
  • Wordpress e desenvolvimento web
  • HTML5
  • Forma longa
  • Guia Longform
Sobre o autor Matthew Hughes(386 artigos publicados)

Matthew Hughes é desenvolvedor e escritor de software de Liverpool, Inglaterra. Ele raramente é encontrado sem uma xícara de café forte na mão e adora seu Macbook Pro e sua câmera. Você pode ler seu blog em http://www.matthewhughes.co.uk e segui-lo no twitter em @matthewhughes.

Mais de Matthew Hughes

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever