Comece a trabalhar com html5

Índice

§1. Introdução

§2-semântica Markup

§3-Forms

§4-Media

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

§6-Just Enough javascript

§7-criativa Canvas

§ 8-Onde vais?

1. Introdução

Você já ouviu falar dele: HTML5. Todo mundo está usando. Ele está sendo anunciado como o salvador da Internet, permitindo que as pessoas criar ricos, envolvendo páginas web sem recorrer ao uso de Flash e Shockwave.O que é o HTML5, e como ele mudar o que eu Procurar? [MakeUseOf Explica]O que é o HTML5, e como ele mudar o que eu Procurar? [MakeUseOf Explica]Ao longo dos últimos anos, você pode ter ouvido o HTML5 termo de vez em quando. Se você sabe alguma coisa sobre o desenvolvimento web ou não, o conceito pode ser um pouco nebuloso e confuso. Obviamente,...consulte Mais informação

Mas o que realmente é?

Bem, isso não é uma pergunta fácil de responder. Neste tutorial HTML5, vamos tentar dar algumas respostas. HTML5 é usado para descrever um grupo muito diversificado de coisas. É um padrão de escrever páginas da web. É uma coleção de APIs. É uma nova maneira de adicionar interatividade a páginas da web.

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

Neste tutorial HTML5, eu estou indo supor que você em algum momento ter tocado em HTML e CSS. Talvez você já tenha criado o seu próprio tema WordPress, ou editado um layout MySpace volta no dia. Talvez você já tenha lido guia de XHTML própria do MakeUseOf. O ponto é, eu estou supondo que você sabe o seu caminho em torno de uma página web e que o que nós discutimos neste guia não vai ser muito estranho para você.

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

Por que você quer aprender HTML5?

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

Bem, acredite ou não, é realmente comum para escrever aplicações para smartphones usando tecnologias HTML5. Até recentemente, o aplicativo do Facebook para Android foi escrito usando HTML5, CSS e javascript.

Blackberry é outra grande empresa que é imensamente interessado em HTML5. Isto é evidente na mais recente versão de seu sistema operacional móvel, Blackberry OS 10, onde estão encorajando ativamente os desenvolvedores para desenvolver aplicações para seus telefones utilizando tecnologias web.

O novo smartphones OS Firefox executado inteiramente em aplicativos HTML5, também. Um conhecimento prático de HTML5 é essencial no clima de smartphones de hoje.

Além disso, aprender HTML5 é bom para sua carreira. Não acredita em mim? De acordo com Indeed.com, o salário médio anual para um desenvolvedor HTML5 é um $ 89.000 arregalado-. Com mais e mais empresas mudando seus sites para usar as 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 um par de coisas. Em primeiro lugar, ela pressupõe que você sabe como a web funciona, e que você sabe como criar uma página web básica. Você deve ser capaz de remendar alguns elementos HTML juntos e ser capaz de apresentar algumas informações em um navegador web. Vendo

tags não é muito difícil, 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 CSS é e como funciona. Nós não esperam que você seja gênios de design, nem você espera de saber toda a especificação CSS largo das costas de sua mão. Você deve, entretanto, ser capaz de aplicar um estilo a um elemento em uma página da web, ser capaz de conectar-se a um arquivo CSS e saber a diferença entre um ID e uma classe e como aplicar estilo para cada um deles.

Se você está coçando a cabeça ao acima, 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 irá levá-lo até a velocidade muito rápido.

Depois de ler esse guia, você pode também querer ter um olhar para os seguintes artigos:

• 8 sites com exemplos da qualidade da codificação
• 6 Blogs Para Siga Grande Web Designers

Você também vai precisar de um editor de texto moderno e browser. Qualquer versão do Internet Explorer que é mais velho do que o IE 9 e algumas versões antigas do Safari, Chrome e Firefox vai lutar com muitas características que fazem parte do HTML5 e pode impedi-lo de seguir este guia.

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

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

1.2 Editores de Texto para Desenvolvimento Web

Seu editor de texto é o que você vai 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 Páginas da Apple são totalmente inadequado para o desenvolvimento web. Isso é porque eles anexar informações adicionais para o seu HTML, CSS e javascript arquivos que torna difícil para o seu navegador web para ler.

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

O computador já vem com um. Se você estiver usando um PC com Windows, em seguida, o bloco de notas é o editor de texto que você provavelmente tem instalado.

Em um Mac, a situação é ligeiramente diferente. OS X acontece para vir com quatro editores de texto diferentes. Estes são chamados Vim, Emacs, Pico e Nano. No entanto, ao contrário do Bloco de notas, todas elas acontecem para trabalhar no terminal.

Este é um pouco intimidante para as pessoas que são novas para desenvolvimento web e não deve ser usado por pessoas que são novas para desenvolvimento de software. Nós não vai usá-los neste guia. No entanto, quando você começa um pouco mais confiante com software e desenvolvimento web, é definitivamente vale a pena ter um olhar para vitalidade e Emacs. Ambos são poderosos editores de texto, e quando domina você pode economizar uma enorme quantidade de tempo.O Top 7 razões para dar o Vim Editor de Texto A ChanceO Top 7 razões para dar o Vim Editor de Texto A ChanceDurante anos, eu tentei um editor de texto após o outro. Você nome dele, eu tentei. Eu usei todos e cada um destes editores por mais de dois meses como meu editor principal do dia-a-dia. De alguma forma, eu ...consulte Mais informação

No Linux, o editor de texto padrão varia entre as distribuições. No Ubuntu, é provável gedit, que é uma agradável editor de texto que não é muito diferente do bloco de notas.

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

O primeiro é Texto Sublime 2. Eu honestamente não posso recomendar este o suficiente. Ele vem com todas as coisas que torna a vida mais fácil para um desenvolvedor iniciante. Em primeiro lugar, ele vai fazer seu código mais fácil de ler colorindo certas partes. Em segundo lugar, ele permite que você alternar entre arquivos facilmente e gerenciar projetos inteiros de arquivos. Isto é ideal para alternar entre arquivos e editar vários pedaços de código na mosca.Experimente o texto Sublime 2 Para a sua multi-plataforma necessita de código de ediçãoExperimente o texto Sublime 2 Para a sua multi-plataforma necessita de código de ediçãoSublime Text 2 é um editor de código cross-platform Eu só ouvi recentemente sobre, e eu tenho que dizer que estou realmente impressionado apesar da etiqueta beta. Você pode baixar o aplicativo completo sem pagar um centavo ...consulte Mais informação

A terceira é a console de javascript que está embutido no Google Chrome. Isso nos permite escrever javascript e vê-lo ser executado imediatamente e será usado para explicar conceitos básicos de programação.

O segundo é um site chamado Codepen.io. Este website notável lhe permitirá código HTML, CSS e javascript no navegador e é livre para usar. Ele também irá permitir que você veja as alterações imediatamente.

2. Semântica Markup

Neste capítulo, você aprenderá sobre Semantic Markup, e como organizar o seu código com base em seu conteúdo.

Até recentemente, o código HTML foi geralmente organizados com

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

marcação semântica é um novo recurso do HTML5. Ele traz novas tags, que funcionam da mesma forma como um tag ‘div`, mas são para 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 para a maioria dos sites é provável que você nunca vá em frente, quando você pensa sobre isso.

Vamos ter um olhar para um artigo sobre MakeUseOf. Você notará que há uma parte da página que é reservado inteiramente para navegar para outros artigos. Você também vai notar que há uma outra parte da página que contém as palavras que constitui um artigo. Para a parte superior da página, você verá um cabeçalho contendo o logotipo MakeUseOf e alguns outros links.

Quando você pensa sobre isso, um monte de sites siga estas convenções. A maioria dos sites tem uma parte que é reservada para navegação. Eles geralmente têm um corpo de conteúdo. Eles provavelmente ter mais de um cabeçalho.

tags semânticas são tags que permitem definir partes de um site, que são comumente encontrados na maioria dos sites. Eles não acrescentam nada à página, mas permitem que você Tag do grupo com base em seu conteúdo e aplicar stylings a esses grupos.

Então, lembre-se que o código que tínhamos antes? Vamos olhar para ele com alguma marcação semântica acrescentou.

Como você pode ver, o código é muito mais fácil de ler. Você sabe quais partes são que e não há ambigüidade. Isto é importante, porque torna mais fácil escrever código bom, limpo. Se você decidir que quer se tornar um profissional web designer, este torna-se primordial - você nunca sabe quem vai ler o trabalho que você produz.

Então, vamos olhar algumas tags de marcação mais semânticos.

2.1 Seção

Seção é uma marca realmente útil. Ele é usado para agarrar enormes faixas de informações e conteúdos que são marcados com um título 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 imagens, diagramas, gráficos e palavras. A tag seção seria usado para conter tudo isso.

2.2 artigo

A tag artigo é usado para o que soa como-Contendo conteúdo, como um blog ou uma notícia. Este conteúdo deve ser capaz de ser separada do resto do blog e ainda faz sentido coerente.

2.3 Além

Esta tag é reservado para conteúdo que está relacionado, mas não uma parte integrante da página web. Este poderia ser um monte de fatos que se relacionam com 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 no topo da página que contém um logotipo, algumas informações relativas ao local e, talvez, algumas ligações. Na marcação semântica, você pode usar uma tag de cabeçalho para conter tudo isso.

2,5 Nav

Este elemento é reservado para a parte de navegação do seu site. Este deverá conter links para outros sites ou para outras páginas no site. Dentro do contexto da MakeUseOf, esta poderia ser a parte da página que está abaixo do cabeçalho.

2.6 Rodapé

Esta tag é reservado para a parte inferior da página. Aqui, você pode colocar alguns detalhes de contato, informações de copyright, um mapa ou alguns links para sua página ‘Sobre mim`.

2.7 Teste-se

• O que é Semantic Markup, e que é usado para?
• Eu estou fazendo uma página web e eu quero usar um tag semântica para conter uma biografia sobre mim. Qual deles devo usar?

3. Formas

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

Os formulários são extraordinariamente importante. Eles são a base da maioria das coisas que fazemos na internet. Toda vez que você criar uma atualização de status em sua rede social favorita, comprar algo de Amazon, ou enviar um e-mail, você provavelmente já usou um formulário HTML.

O que você provavelmente não sabia é que a nossa forma de criar formas mudou radicalmente em HTML5. Também é significativamente melhor. Neste capítulo, vamos olhar para algumas das coisas legais agora que você pode fazer, apenas com marcação velho liso.

Video: Vídeo background responsivo • HTML5/CSS3

Então, o que é tão legal sobre a nova forma podemos escrever formulários em HTML5? Em primeiro lugar, você pode garantir que alguns campos devem ser preenchidos a fim de apresentar, 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. Ele trivialmente fácil.

Em segundo lugar, você pode garantir que seus usuários só podem enviar certos tipos de informação ao seu formulário. Então, vamos supor que você tem um site para o seu mailing list e você só quer que as pessoas poderão enviar endereços de email reais? Você pode fazer isso, apenas usando HTML5. Realmente é incrivelmente poderoso.

Em terceiro lugar, você pode fazer suas formas olhar melhor, dando alguns campos um espaço reservado. Isto irá torná-los significativamente mais intuitivo, como você pode mostrar a seus usuários um exemplo do que você está esperando para um formulário.

3.1 Melhorar um Formulário

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

Este formulário é bastante básico. Leva em um nome, um e-mail e uma cor favorita, e, em seguida, permite que o usuário enviar isso. Ele contém nenhuma validação da informação que é colocado dentro dele, e não há nada que impeça os usuários de enviar este formulário com alguns campos vazios. Vamos mudar tudo isso.

Então, a primeira coisa que você vai querer fazer é assegurar que o campo de e-mail leva apenas um e-mail. Isto costumava ser uma tarefa muito difícil, na verdade, como você teria que criar todos os tipos de código Regex arcano. Bem, não mais. Você apenas tem que simplesmente mudar o tipo da entrada de ‘texto` para `e-mail`. Quando você tenta enviar esse formulário com rabiscos, ele vai reclamar e insistem que você enviar um e-mail.

3.2 Tipos de entrada e Padrões

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

Além disso, para que as coisas tais como números de telefone que variam dependendo da localidade, você pode especificar padrões para entradas. Estes são criados usando algo chamado ‘expressões regulares e são bastante complicado, mas imensamente poderoso.

Nós também vamos querer dar um exemplo de um e-mail em nosso campo, para que o usuário não tem a ambiguidade do que ele ou ela tem de apresentar. Isso é muito fácil de fazer. Basta criar um novo atributo de ‘espaço reservado` com um exemplo de endereço de e-mail.

Vamos garantir que o nosso campo ‘Cor Favorita` é necessário. No último colchete angular (gt;) na marca de entrada E-mail, basta escrever ‘necessária`. É isso aí. Agora, quando você tenta enviar o formulário sem um valor, ele vai produzir uma mensagem de erro.

A coisa realmente incrível sobre essas mensagens de erro é que o usuário não tem que escrevê-los ou escrever qualquer código para criá-los. Você acabou de alterar um campo para torná-lo necessário, e ele simplesmente funciona. Com isso dito, é possível personalizá-los, se você quiser.

Isso foi incrivelmente breve introdução ao poder de formulários em HTML5. Se você quiser ler mais, eu recomendo que você visitar esses links.

Leitura adicional:

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

3.3 Teste-se

É seu aniversário na próxima semana, e você quer criar um formulário de inscrição para que você saiba o quanto bolo que você precisa criar. Abra o seu editor de texto e criar 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 são definidas com o `email` e tipos de entrada ‘tel`. Criar um espaço reservado para o campo de alergia com o valor ‘pólen, ovos, quiche`.

Brincar com a forma. Tente enviar campos obrigatórios como vazio, e tentar inserir caracteres não-numéricos no campo número de telefone. No campo email, insira algo que não é um endereço de e-mail. O que acontece?

4. mídia

Costumava haver um momento em que a única maneira em que você pode inserir algum vídeo ou áudio em uma página web foi usando algo como Flash, Shockwave ou Silverlight.

Este não era o ideal. Em primeiro lugar, nenhum desses quadros trabalhou tão bem em dispositivos móveis. Eles só não estavam equipados para o mundo moderno de smartphones e tablets.

Além disso, eles eram formatos proprietários. Como resultado, os usuários de Linux e OS X poderia obter uma experiência muito de segunda categoria ou foram impedidos de consumir serviços de mídia, como ele não estava disponível para sua plataforma.

Finalmente, eles tinham uma propensão para ser lento. Se você estivesse em um computador de fraca potência ou mais, você não teria uma boa experiência de visualização de vídeo usando estes quadros. Flash foi particularmente notório por isso.

4.1 Como HTML5 faz vídeo e áudio impressionante

HTML5 mudou isso, permitindo que desenvolvedores web para incluir áudio e vídeo em suas páginas da web com apenas algumas linhas de código. Ele funciona um deleite em dispositivos móveis e funciona em todos os navegadores web moderna.

Como resultado, grandes empresas como YouTube, Vimeo e Netflix estão tirando vantagem da revolução HTML5. Por que você não se juntar a eles?

4.2 Tudo sobre Codecs

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

Em primeiro lugar, eu vou ter que começar com uma ressalva. Enquanto você pode usar o vídeo HTML5 em todos os navegadores web moderna, ele não funcionar o mesmo em cada navegador web. Os codecs utilizados por cada navegador variar. No Internet Explorer, você está limitado a usar o vídeo MP4. Chrome é um pouco mais generoso e permite que você use WebM, MP4 e vídeo Ogg Theora. Opera é um pouco mais restritiva e só permite usar Theora e WebM vídeo.

Como resultado, você tem que ser um pouco mais inteligente com a forma como você inserir vídeo em sua página web. Então, vamos ver como ele funciona.

4.3 Começando com vídeo

Para começar, você vai precisar para criar alguma abertura e fechamento

Bem, quando você está esperando para o seu vídeo para carregar, a pessoa que visita o seu site pode ver uma imagem que se relaciona com o vídeo. Para fazer isso, basta dar o seu vídeo Tags um atributo do cartaz` com um valor da imagem que você deseja vincular. Deve olhar como este.

A próxima coisa que você vai querer fazer é criar um fallback. O que isto significa? Então, vamos supor que você está usando um dos mais antigos, os navegadores menos impressionantes para fora lá. Muitos desses navegadores mais antigos não suportam vídeo HTML5 e, portanto, não pode reproduzir vídeo HTML5. Você vai querer deixar-lhes uma mensagem informando-os de que eles vão querer atualizar seu navegador e que até o fizerem, eles não serão capazes de assistir o vídeo.

Para fazer isso, você acabou de escrever sua mensagem para dentro de suas tags de vídeo. Nada mais é necessário. Uma vez feito isso, você vai ficar com algum código que se parece com isso.

Agora, vamos adicionar algum vídeo. Vou testar isso no Google Chrome, por isso estou indo para conectar-se a um filme MP4. Para fazer isso, eu criar uma tag Fonte e dar-lhe um atributo src que tem um valor do vídeo que deseja incluir.

Minha página está agora pronto para ser aberto em meu navegador web. Eu tenho ligado a um filme que é muito, muito grande e, como resultado, quando abriu um só pode ver o cartaz.

4.4 Adição de áudio

O áudio pode ser inserido em sua página web de uma forma que lembra muito de como nós inserido vídeo em nossa página.

Em primeiro lugar, cria algumas tags de áudio. Estas tags de áudio contêm um atributo de ‘controles. Isto dá ao usuário que visita a página a possibilidade de pausar, rebobinar o jogo e avançar rapidamente o áudio que está sendo jogado.

Então, você incluir uma tag de origem para o arquivo MP3 que você deseja vincular. Você realmente não precisa se preocupar tanto assim quando se trata de codec compatibilidade. A maioria dos browsers recentes têm a capacidade de reproduzir áudio MP3, embora seja boa prática incluir também uma ‘.ogg` e um arquivo‘.wav` - só no caso.

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

O resultado final parece um pouco com isso.

Quando você abrir este no seu navegador web, deve olhar um pouco como este.

4.5 Teste-se

• Qual é o propósito de ter um cartaz em suas tags de vídeo?
• Que codecs você não pode usar no Internet Explorer?
• Se eu quisesse a possibilidade de pausar algum áudio, o atributo que você gostaria de acrescentar à sua tag ‘audio`?

Leitura adicional:

• HTML5 Rocks Vídeo

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

CSS tradicionalmente foi usado para lidar com a layout e design de uma página web. Isso ainda é verdade, mas em sua última iteração ele ganhou a habilidade de lidar com animações e transformações de elementos e imagens.5 etapas de bebê a aprender CSS & Tornando-se um CSS Sorcerer Kick-Ass5 etapas de bebê a aprender CSS & Tornando-se um CSS Sorcerer Kick-AssCSS é a mais importante páginas mudança vimos na última década, e ele abriu o caminho para a separação de estilo e conteúdo. Na forma moderna, XHTML define a estrutura semântica ...consulte Mais informação

As pessoas têm feito algumas coisas incríveis com CSS3, desde a criação de um relógio digital para escrever um jogo cheio Pong. Alguém ainda usou para recriar os créditos introdutórios para Mad Men. É uma tecnologia verdadeiramente poderoso e quando é dominado pode ser usado para adicionar um incrível nível de funcionalidade para sua página web.

Neste capítulo, vou dar-lhe uma breve introdução ao CSS3, e mostrar-lhe como adicionar alguns efeitos surpreendentes para sua página.

Primeiro, navegue até codepen.io e criar uma nova caneta. Nós vamos usar isso como nosso espaço de trabalho para a duração deste capítulo.

Vamos começar pelo mais simples e criar uma imagem simples transformar que gira uma imagem 3 graus quando pairado. Em primeiro lugar, criar uma tag div e dar-lhe um ID. No exemplo abaixo, eu dei-lhe um ID de ‘muo`.

5.1 Efeitos Hover CSS

Nesse div, incluir uma imagem de sua escolha. Eu incluí uma cópia do logotipo para MakeUseOf.

Video: HTML5 - Aula 24 - Slider simples - javascript

Em seguida, você precisa escrever algumas regras de estilo. No exemplo abaixo, eu criei uma margem superior e esquerda para dar a imagem de algum espaço. Eu também incluiu uma regra de estilo que olha curioso que começa com ‘#muo: hover`. O que é isso?

Quando você anexa ‘: hover` para uma regra de estilo, seja a um elemento, um ID ou uma classe, você está dizendo efetivamente o navegador para aplicar este estilo quando o mouse governa o elemento. Muito legal, né?

Dentro do ‘#muo: hover` regra, temos uma linha que diz‘-webkit-transform: rotate (3deg)`. Como eu tenho certeza que você adivinhou, este está dizendo o navegador para rodar o elemento div por três graus.

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

Agora, quando você passa o mouse sobre a imagem, olha como este:

5.2 Usando CSS3 para redimensionar imagens

Então, por que parar aí? Você sabia que você também pode usar o método de ‘transformar` para ampliar ou reduzir uma imagem. Vamos mudar o nosso arquivo CSS para incluir as seguintes linhas.

Como você pode ver, temos agora incluída uma nova transformação regra, mas desta vez nós estamos dizendo-lhe para fazer algo chamado de ‘escala`. Esta é uma maneira muito bonita para aumentar o tamanho de uma imagem. Ele tem dois parâmetros (aqueles números que você vê nas entrelinhas desses parênteses), e eles representam o valor pelo qual você aumenta a altura ea largura do elemento.

Como você pode ver a partir do código, eu vou aumentar o tamanho do logotipo da MakeUseOf div em 50%. Você pode testar isso funciona passando o mouse sobre ele. Você verá que agora o logotipo ‘MakeUseOf` é agora significativamente mais esticado.

Esta foi uma introdução muito suave para transformações CSS3. Apesar CSS3 sendo muito novo, na verdade, agora você pode ver que você pode fazer muitas manipulações muito interessantes com ele.

5.3 Teste-se

• Como podemos aplicar um estilo para um elemento quando pairando?
• Como você girar uma imagem usando CSS3?
• Como você redimensionar uma imagem usando CSS3?
• O que acontece se você passar o seu método da transformada ‘traduzir (50px, 50px) `?

Leitura adicional:

HTML5 Rocks - Apresentação

6. Just Enough javascript

Se você quiser usar o script no seu navegador web, você tem que usar javascript. Não há duas maneiras sobre ele, infelizmente. É um linguagem que tem muitos fãs, e muitos detratores também. Como línguas ir, ele tem muitas verrugas. Há uma razão para o livro mais notável sobre a língua é chamado de ‘javascript: The Good Parts`.O que é javascript e como isso funciona? [Tecnologia Explicada]O que é javascript e como isso funciona? [Tecnologia Explicada]consulte Mais informação

Vai ser impossível ensinar-lhe como usar javascript em um único capítulo. Esse não é o objetivo aqui. O objetivo é ensinar a você o suficiente javascript para que você possa entender o próximo capítulo, que é sobre o uso de uma tecnologia chamada de lona para fazer desenhos e animações.

6.1 Acessando o Console

Para fazer isso, vamos usar o console javascript que é construída em cada cópia do Google Chrome. Para aceder a este, você pode clicar em qualquer página da web e, em seguida, pressione ‘Inspect Element`. Em seguida, clique em ‘Console`. Você deve ver isso.

É tradicional que o primeiro programa de qualquer desenvolvedor brotamento nunca escreve é ​​o programa ‘Olá Mundo`. Este é um programa simples que imprime a frase ‘Olá Mundo`, e não muito mais. No seu console, tipo ‘console.log (‘Olá, mundo!’) -.

6.2 Seu primeiro programa

Então, o que exatamente nós fizemos? Primeiro, nós chamado de algo chamado ‘console.log`. Isto é um pouco de código que está embutido no computador que simplesmente imprime o que você diga a ele. Nós então anexado alguns parênteses para ele, e incluiu os entre aspas duplas ‘Olá Mundo`. Isso é chamado de ‘argumentos de passagem, e o tipo de argumento que passou é chamado uma corda. Sempre que você quiser fazer algo envolvendo letras e caracteres especiais, você simplesmente deve usar aspas simples. No entanto, se você quiser fazer qualquer coisa usando números, você geralmente não precisa usar aspas, como visto abaixo.

6.3 Variáveis ​​em javascript

Você também pode passar variáveis ​​para ‘console.log` também. Variáveis ​​parecer complicado, mas todos eles são realmente é um espaço para colocar pedaços de informação. Estes muitas vezes são números ou letras. Para fazer isso, você declarar uma variável usando a palavra-chave ‘var`, dar-lhe um nome e, em seguida, com um sinal de igual, você dar-lhe um valor. Então, eu estou indo para criar uma variável chamada ‘Olá` e, em seguida, dar-lhe um valor de‘Olá Mundo!`. Eu estou indo então passar isso para console.log.

Observe como eu não passar ‘Olá` para console.log usando aspas. Isso é porque eu queria imprimir no console o conteúdo de ‘Olá` e não‘Olá` em si.

6.4 Que funções Faça

Pode ser um pouco entediante reescrever o mesmo pedaço de código e outra vez, por isso, é por esta razão que escrever funções. Funções são mais fáceis do que você pensa. Todos eles são é pedaços de código que podemos reutilizar sem reescrever o mesmo código novamente. Abaixo, nós criamos uma função chamada ‘sup` e estão passando-o um argumento usando parênteses que é então registrados para a tela. Que chamamos de ‘sup`, enviando para o console‘sup ( ‘Olá, mundo!’) -`.

6.5 Repetindo uma ação com um laço ‘for`

Suponha que você queria fazer a mesma ação para um determinado número de vezes. É por essa razão por que usaria um ‘para` loop. Eles olhar assustador no começo, mas são tão fáceis de fazer, uma vez que você compreendê-los. Você começa escrevendo ‘para ()`.

Naqueles parênteses, vamos querer criar uma variável que conta quantas vezes temos realizado uma ação. Então, temos algo que se parece com isso ‘for (var i = 0-)`.

Nós, então, querer verificar que eu não cumpriu uma condição. Então, neste caso, queremos ver que é inferior a 10. Assim, após o ponto e vírgula, escrevemos ‘i lt; 10` . Nosso ciclo agora fica assim: ‘for (var i = 0- i lt; 10-).

Se i for menor que 10, queremos adicioná-lo por um e, em seguida, fazer alguma coisa. Então, vamos colocar ‘i = i + 1` . Nosso ciclo está quase terminado: ‘for (var i = 0- i lt; 10- i = i + 1)`. Note como a última parte não tem um ponto e vírgula.

Depois disso, vamos querer fazer uma ação. Assim, após as últimas parênteses, podemos escrever algumas chaves e entre eles nós vamos console.log o valor de i. Isto irá criar um contador que conta até nove.

As duas últimas construções de programação que vamos olhar são ‘se` declarações e‘enquanto` loops.

6.6 Se Demonstrações

Um ‘if` executa uma ação se a determinados critérios for atendida. Eles são semelhantes aos ‘para` loops em construção, e trabalhar como segue. Suponha que você tenha uma variável chamada ‘cheeseburgers` e você quer ver se ele tem um valor de‘gostoso`. Se isso acontecer, você quer registrar ‘yum, cheeseburgers` para a tela. Para fazer isso você iria escrever algo como isto.

Note como eu escrevi ‘Se (cheeseburgers ==‘saborosa’)`. Você usa iguais duplos ou triplos para verificar igualdade e individuais iguais para atribuir um valor.

Enquanto 6,7 Loops

Finalmente, um loop ‘while` executa uma ação, enquanto um critério seja cumprido. Então, imagine que você quer registrar ‘yum, cheeseburgers`, enquanto cheeseburgers igual saboroso. Para fazer isso, você escreveria o seguinte.

É importante notar que este iria entrar um loop infinito, e você deve evitar fazer uma ação em um valor que não é provável mudar. Isso pode fazer com que seu navegador para bloquear, ou seu código para não funcionar.

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

6.8 Teste-se

• Eu quero contar para baixo de 30. Escrever um ‘para` loop que faria isso.
• Eu quero criar uma variável chamada ‘MakeUseOf` e dar-lhe um valor de‘impressionante`. Como isso é feito?
• Eu quero criar uma função que imprime ‘MakeUseOf é impressionante` quando chamado. Escrever essa função.

Leitura adicional:

• “javascript: The Good Parts” por Douglas Crockford
• Guia MDN javascript

7. Canvas Criativas

Canvas é uma tecnologia legal que permite desenhar imagens e criar animações sem ter que recorrer ao uso de Flash ou Silverlight. As pessoas têm usado para criar coisas bizarras e maravilhosas, incluindo um simulador de secador de cabelo e vários jogos de vídeo. É uma peça maravilhosa e unfathomably grande da tecnologia, neste tutorial, eu vou dar-lhe uma breve introdução a ele.

É importante notar que a tela só funciona em navegadores modernos. Se você estiver usando uma versão antiga do IE, Chrome ou Firefox, você pode não ser capaz de seguir neste capítulo. Se for esse o caso, você deve considerar fazer o download da versão mais recente do Google Chrome, que foi o web browser em que eu criei este tutorial.

7.1 Começando com lona

Primeiro de tudo, você vai precisar abrir o navegador web e navegue até codepen.io. Criar uma nova caneta.

Agora, nós vamos ter de declarar um elemento de tela. Criar duas tags de abertura e fechamento de lona. Neles, você deve passá-lo três atributos. Estes são a largura e altura do elemento Canvas, juntamente com o ID que você está dando a ele. Como antes quando você inseriu algum vídeo, você deve incluir uma mensagem fallback.

Agora, vamos querer escrever algum código javascript que irá desenhar algo para a tela. Nós vamos começar básico e criar um quadrado vermelho simples.

Nós vamos criar uma variável (eu o chamei ‘demo `), e em seguida, selecione o elemento canvas e atribuí-la a essa variável. Para fazer isso, você usar document.getElementById () e passar o ID do elemento que você deseja selecionar.

A segunda linha em nosso script cria uma outra variável chamada ‘contexto` e, em seguida, chama de‘demo.getContext ( ‘2D `)` nele. Este disse o navegador que vamos estar trabalhando em uma imagem 2D, em seguida, passou as funções necessárias tínhamos necessidade de, a fim de chamar a tela.

A terceira e quarta linhas são os que realmente fazem o desenho para a tela. A terceira linha enche um rectângulo com a cor vermelha, ao passo que a quarta linha chama fillRect, que posiciona e define o seu comprimento e largura.

Isso não é impressionante embora. Vamos fazer algo um pouco mais avançado e usar a magia do javascript e lona para criar MakeUseOf um novo logotipo da marca.

7.2 formas e texto

Vamos apagar nossa quarta linha, e substituí-lo por um que coloca o nosso retângulo no canto superior esquerdo e estende-lo para o comprimento da nossa tela.

Os primeiros dois argumentos definir onde desejamos para posicionar o eixo x e y da forma. Vamos definir estes dois para ‘0` por agora. O terceiro argumento refere-se à largura da forma. Vamos definir que ‘200` , e em seguida, deixar o quarto argumento para `50`. Agora você deve ter algo que se parece um pouco com isso.

Este é um grande começo, mas não menciona MakeUseOf em tudo. Então, vamos adicionar algum texto. Vamos criar uma variável que contém ‘MakeUseOf`, e nós vamos chamar essa variável‘MakeUseOf`.

Estamos em seguida, vai querer criar uma outra variável de contexto. Ligue para este ‘context2` , e certifique-se de que é 2d. É isso que vamos usar para escrever o nosso texto em.

Nós vamos querer nosso texto a ser colorido azul e sobrepor o nosso quadrado vermelho. Então, assim como antes, vamos querer dar-lhe um fillStyle de ‘azul`. Agora, vamos selecionar as características do nosso texto. Nós queremos que seja 20px grande, formatado em negrito e usando uma fonte Arial. Chamamos fonte no context2 e atribuir-lhe o valor “bold arial 20px”.

Porque queremos que este texto para sobrepor a nossa caixa vermelha anterior, precisamos chamar ‘TextBaseline` on context2 e dar-lhe um valor de topo. Uma vez que tenha sido concluída, que chamamos de ‘fillText` on context2 e passá-lo a variável que contém o nosso texto e as coordenadas x e y em que pretendemos colocar nosso texto. O resultado final do nosso código é algo como isto.

A imagem que é produzido pelo código se parece com isso.

7.3 Uma palavra sobre tela

Enquanto isso foi uma introdução incrivelmente básico à lona, ​​você deve compreender que é também um incrivelmente grande tecnologia, e um incrivelmente poderosa para arrancar. Este guia simplesmente serviu como uma introdução para fazer gráficos usando esta nova tecnologia.

7.4 Teste-se

• Adicione o seguinte slogan para a imagem que você criou: “O melhor site de tecnologia sempre”
• Criar um ‘para` loop que é executado por dez iterações. Veja se você pode mover o seu desenho para baixo da tela, um pixel de cada vez.
• Envolva seu desenho em uma função. O que acontece se você não chamá-lo?

Leitura adicional:

• HTML5 Rocks - Integração tela em seus aplicativos da web.
• Treehouse - Como desenhar com lona

8. Onde vais?

Obrigado por ler o meu incrivelmente breve guia para as novas tecnologias encontradas dentro HTML5. É inegável que o HTML5 é a tecnologia do futuro. Ele está sendo adotada por maioria de tecnologia, como é fácil de escrever e poderosos além da medida. As pessoas estão fazendo coisas incríveis com ele o tempo todo, e não tenho dúvida de que, no futuro, você vai ser uma dessas pessoas. Estou honrado de ter sido parte de sua viagem no mundo selvagem e maravilhoso de HTML5.

Eu te imploro para continuar a aprender. Mantenha-se na codificação. Continuar a subir de nível e melhorar, e em nenhum momento em tudo você estará usando as tecnologias que foram introduzidas neste guia rápido de criar produtos maravilhosos.

Se você tiver alguma dúvida, não hesite em contactar-me. Meus endereços de e-mail são [email protected] e [email protected]

HTML5 Tutorial Publicado: julho 2013