Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Html 5

No description
by

Luiz Felipe

on 3 June 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Html 5

2008
2010
2012
2011
2006
2004
World Wide Web Consortium(W3C) começa a trabalhar com o "WHATWG"
Em outubro de 2006 o W3C decide parar o desenvolvimento da tecnologia XHTML e começa a colaborar com o "WHATWG" para desenvolver o HTML5.
"WHATWG" é Criado
Fundado em 2004, o Web Hypertext Application Technology Working Group, formado por membros da Apple, Mozilla e Opera, começa a desenvolver o HTML5
A Primeira Versão do HTML5 é Publicada
O primeiro esboço do HTML5 é introduzido, mas mudanças ainda estão por vir. Especialistas dizem que o HTML5 é uma tecnologia em constante evolução que nunca será totalmente "terminada".
Firefox 3 Se Torna Compatível Com o HTML5
O Firefox 3 começa a aceitar comandos em HTML5. Eventualmente, o Chrome, Safari e o Internet Explorer também o fazem.
Jan 2010
YouTube Lança Tocador em HTML5
O novo tocador apenas pode ser acessado pelo TestTube. Uma versão melhorada será lançada em Julho de 2010.
Abril 2010
"
Flash
foi criado para PC's usando um mouse,
não
para telas touchscreen usando os dedos."
Steve Jobs Despreza Publicamente o Flash
Ele explica porque o Flash nunca irá funcionar nos aparelhos da Apple. Muitas empresas começam a focar no HTML5.
Maio 2010
Scribd Muda Seus Arquivos Para HTML5
O site de compartilhamento de documentos Scribd começa a usar o HTML5. Isso cria uma melhor interfarce para os usuários de tablets.
Agosto 2010
Dezembro 2010
Video Interativo em HTML5 da banda Arcade Fire é lançado
Um ano após o seu lançamento, o filme "The Wilderness Downtown ganha o Prêmio Grand Prix no Festival de Cannes, na categoria Internet.
A Chrome Web Store é Inalgurada
A loja de aplicativos em HTML5 para chrome é lançada, ficando mais fácil adquirir tais aplicativos.
Março
Disney Compra Startup Que Foca em Jogos em HTML5
Disney adquire a empresa "Rocket Pack", uma startup filandesa criadora de jogos em HTML5. A intenção é clara: quebrar o monopólio da AppStore e criar jogos diretamente na Internet.
Julho
Pandora Começa A Usar O HTML5
Pandora introduz um tocador em HTML5. Ele é consirado "mais leve" do que o tocador em Flash, menos complicado e mais rápido.
Agosto
Firefox

3
O Consórcio World Wide Web (W3C) é um consórcio internacional no qual organizações filiadas, uma equipe em tempo integral e o público trabalham juntos para desenvolver padrões para a Web. Liderado pelo inventor da web Tim Berners-Lee e o CEO Jeffrey Jaffe, o W3C tem como missão Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo.
O que é a W3C?
Amazon Lança o Kindle Cloud Reader
A Amazon cria uma versão online do Leitor de eBooks Kindle. Esta nova versão em HTML5 permite aos consumidores acessar o conteúdo de forma offiline, diretamente nos navegadores.
Agosto
Twitter Cria uma Nova Versão em HTML5 Para iPad
Twitter melhorou seu aplicativo, agora com uma versão avançada em HTML5.
Setembro
Boston Globe Lança o Serviço de Assinatura BostonGlobe.com

O jornal The Boston Globe usa um design dinâmico e CSS3 que permite adaptar o tamanho do site à resolução da tela do leitor.
CSS3 é a mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um estilo novo às páginas Web 2.0 em todos os aspectos de design do layout.
O que é CSS3?

Novembro
Adobe Para o Desenvolvimento da Versão Mobile do Flash
A empresa anuncia o fim do desenvolvimento da tecnologia Flash para mobiles, preferindo focar em uma nova ferramenta em HTML5
Junho
Junho
Abril
Flickr Cria uma Ferramenta de Upload em HTML5
Agora os uploads de arquivos pesados são muito mais rápidos.
Linkedln Cria um Aplicativo Para o iPad
Linkedln já tinha um aplicativo mobile desde 2008, mas em 2012 eles lançaram uma versão em HTML5 nativa para o iPad, muito mais limpa com um design moderno.
Wix.com:
+1,000,000 Sites HTML5 Criados Pelos Usuários.
Essa marca foi atingida em apenas 90 dias após o lançamento do Editor de Sites em HTML5
Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo
chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em
uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web.
Uma Página Em HTML5
Com o HTML5, muito ficou simplificado na hora de iniciar um documento HTML.
Neste parte iremos analisar o mínimo de código que precisamos para um documento HTML5.

A estrutura básica do HTML5 continua sendo a mesma das versões anteriores da linguagem, há apenas uma exceção na escrita do Doctype. Segue abaixo como a estrutura básica pode ser seguida:


<!DOCTYPE html>

O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar. Em versões anteriores,
era necessário referenciar o DTD diretamente no código do Doctype. Com o HTML5, a referência por qual DTD utilizar é responsabilidade do Browser.
O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.

DOCTYPE
O código <HTML> é uma série de elementos em árvore onde alguns elementos são
filhos de outros e assim por diante.
O elemento principal dessa grande árvore é sempre a tag <HTML>.

<html lang="pt-br">

O atributo LANG é necessário para que os user-agents saibam qual a linguagem
principal do documento. Lembre-se que o atributo LANG não é restrito ao elemento
<HTML>, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.

O elemento <HTML>


Doctype deve ser a primeira linha de código do documento antes da tag HTML.
A Tag <HEAD> é onde fica toda a parte inteligente da página. No <HEAD> ficam os metadados. Metadados são informações sobre a página e o conteúdo ali publicado.

<HEAD>


A tag <title> ,é o título da página html . No exemplo abaixo o título será UMA PÁGINA HTML BÁSICA.


<TITLE>

Dentro da tag <body> , ficará todo o conteúdo da página Web.



<BODY>

No nosso exemplo há uma metatag responsável por chavear
qual tabela de caractéres a página está utilizando.

<meta charset="utf-8">

Nas versões anteriores ao HTML5, essa tag era escrita da
forma abaixo:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Essa forma antiga será também suportada no HTML5. Contudo,
é melhor que você utilize a nova forma.

Metatag Charset



O código para inserir CSS e Javascript e simples, Pois não precisa ser especificado o tributo type:



Inserindo CSS e Javascript

Desenvolvimento de Jogos em HTML5
Linha do Tempo

HTML5 é a próxima geração do HTML. É um padrão
aberto e suportado pela maioria dos novos
navegadores. Suas novas funcionalidades o tornam
uma alternativa à tecnologia proprietária Adobe Flash.
Este artigo descreve o uso do HTML5 no
desenvolvimento de jogos online dentro do navegador.
Foram criados dois jogos, o Sukuri e o Jogo da Velha
para investigar e exemplificar a utilização desse novo
padrão.

Resumo

A grande maioria dos jogos incorporados ao navegador é construída usando Adobe Flash. Além de jogos, essa tecnologia é usado em animações, banners, como tocador de vídeo e muitas outras aplicações. A Adobe afirma que 98% dos navegadores possuem sua tecnologia instalada e que a mesma é aberta, segura e com bom desempenho [Adobe 2010]. Isso era aceito pela comunidade web sem grandes controvérsias. Tudo mudou quando a Apple disse que não incorporaria o Adobe Flash aos seus novos produtos iPhone e iPad por considerá-lo com muitos erros, sem segurança e consumidor voraz de bateria [Apple 2010]. A Apple divulgou que o futuro seria o uso de HTML5 em detrimento ao Flash [Apple 2010]. Jogada de marketing ou não, essa opinião foi logo seguida pela Microsoft, Google, Opera e outras empresas. Essa afirmação da Apple acabou deixando o HTML5 em destaque. HTML5 tem como objetivo padrão facilitar e melhorar a estruturação e a apresentação conteúdo na Web através de novas tags e incorporar funcionalidades como o uso de canvas, tocar vídeos, drag-and-drop que antes só eram possíveis através do uso de plugins proprietários como Adobe Flash e Microsoft Silverlight. Ele é um padrão aberto, livre do pagamento de royalties. Apesar do lançamento oficial do HTML5 ser apenas em 2012 [Whatwg 2009], já é possível construir sites usando esse padrão, pois os navegadores novos (Firefox 3.6, Firefox Beta 4, Safari 5, Internet Explorer 8, Opera 10, Chrome 6) são aderentes de alguma maneira ao novo padrão. O objetivo deste artigo é demonstrar o uso do HTML5 como substituto do Adobe Flash no desenvolvimento de jogos simples incorporados ao navegador.
1. Introdução

Os trabalhos estão dentro dos sites das empresas
desenvolvedoras de navegadores ou de padrões da
Web. Pode-se citar que o site de desenvolvimento do
Opera explica como trabalhar com HTML5 nesse
navegador [Opera 2010]. O site da World Wide Web
Consortium (W3C) mostra como funciona a tag canvas
do HTML5 [W3c 2010]. O site de desenvolvimento
do WebKit da Apple mostra um tutorial sobre o uso de
HTML5 [Webkit 2010].

2. Trabalhos relacionados
3. Funcionamento da tag canvas HTML5

O Canvas é um novo elemento do HTML5 que permite “desenhar” diretamente dentro uma página Web. Sua tag de marcação é:

<canvas></canvas>

e possui apenas dois atributos que são width e height SBC - que definem as dimensões do canvas no HTML. Se o navegador não suportar a tag, nada será mostrado, nem mesmo mensagem de erro. É possível então colocar um pequeno texto para passar o feedback:

<canvas width="320" height="240" id="canvas" >
<p>O seu browser não suporta o canvas</p>
</canvas>

Se o navegador suportar a tag, esta pode ser manipulada pelo JavaScript. Por enquanto é possível apenas manipular em 2D ( 2 dimensões ). Está em desenvolvimento o WebGL [WebGL 2010] que permitirá criar figuras 3D.


O canvas possui como forma primitiva apenas o
retângulo. Para produzir formas complexas é preciso
desenhar o path, um caminho que será traçado dentro
do canvas. Para isso existe uma Application
Programming Interface (API) específica. A partir de
funções simples se desenham formas complexas. Para
isso utiliza-se um ponteiro que cada vez que é movido,
vai “riscando” por onde passa.

3.1 Desenhando no Canvas
O canvas permite utilizar imagens e aplicá-las
diretamente. São suportados os formatos de imagem
utilizados na Web como .gif, .jpg e .png .

3.2 Utilizando Imagens
O canvas possui uma API para aplicação de texto
desprovida de recursos avançados. Toda a formatação
e posicionamento do texto ficam sobre
responsabilidade do desenvolvedor. Formatar o texto
usando Cascade Style Sheets (CSS) produz resultado
superior ao que o canvas pode prover.

3.3 Utilizando texto
3.4 Exemplo completo de desenho no canvas com HTML5

Para exemplificar o uso das funcionalidades mostradas nas subseções anteriores, uma bandeira do Brasil foi desenhada diretamente do canvas usando o JavaScript.

Crie uma página HTML com o conteúdo:

<canvas width="320" height="240"
id="canvas">
O seu browser não suporta o canvas
</canvas>

Crie um script JavaScript com o seguinte código:

var canvas =
document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
var width = canvas.width;
var height = canvas.height;
var dx = 10, dy = 10;
//fundo verde
ctx.fillStyle = "green";
ctx.fillRect(0,0,width,height);
//losango amarelo
ctx.moveTo(dx,height / 2);
ctx.lineTo(width / 2,dy);
ctx.lineTo(width - dx,height / 2);
ctx.lineTo(width / 2,height - dy);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();
//circulo azul
ctx.beginPath();
ctx.arc(width / 2,height / 2,60,0,
2*Math.PI,true);
ctx.fillStyle = "blue";
ctx.fill();

4. Desenvolvimento do Jogo da Velha





A classe GenericPlayer é uma classe abstrata para um jogador. ComputerPlayer modela um jogador controlado pelo computador e joga usando um algoritmo de MiniMax baseado em [Jones 2008]. O RandomicPlayer é um jogador controlado pelo computador e joga aleatoriamente sem a preocupação de vencer. O HumanPlayer é o jogador que obedece aos comandos do jogador humano. Como o Jogo da Velha é apenas para dois jogadores, dentro do códigofonte hora é colocado o ComputerPlayer ora o RandomicPlayer. É possível ainda criar partidas de computador contra computador.
O jogo em si fica dentro da classe TicTacToe. A cada turno, o tabuleiro é transformado em um vetor e passado como parâmetro para o jogador controlado pelo computador. Um algoritmo então calcula a próxima jogada que é renderizada no canvas.

O Jogo da Velha foi desenvolvido como primeiro experimento com o objetivo de testar as funcionalidades do canvas. É um jogo que não precisa renderização complexa. Uma visão geral das classes em JavaScript envolvidas é mostrada na Figura 3:
4.2 Desenhando os “O” e “X”
As jogadas são marcadas através de “O” e “X”. Ao invés de desenhar um círculo ou duas retas cruzadas para fazer o X , optou-se por usar a funcionalidade do canvas de trabalhar com textos. O “O” é a letra O e o “X” é a letra X usando a fonte Arial 65:

TicTacToe.drawMark=function(pos,content){
var symbol, color;
switch(content){
case SQUARE.EMPTY:
return;
case SQUARE.O:
symbol = "O"; color
="blue";break;
case SQUARE.X:
symbol = "X"; color =
"red";break;
default:
symbol = "?"; color = "black";
}
var x = pos % 3, y = Math.floor(pos / 3);
var grid = this.ctx;
grid.save();
grid.font = "65pt Arial";
grid.textAlign ="center";
grid.textBaseline = "middle";
grid.fillStyle = color;
grid.fillText(symbol,
this.tileX * x + this.tileX/2,
this.tileY * y + this.tileY/2,
this.tileX);
grid.restore();
}

5. Desenvolvimento do Jogo Sukuri
O jogo Sukuri foi desenvolvido com o propósito de analisar como o HTML5 se comportaria diante de um jogo que necessite controlar eventos e renderização
constantes. Ele consiste no jogador controlar uma cobra/minhoca que se movimenta dentro de um labirinto. Seus adversários são outras cobras controladas pelo computador (cobras-robô). Cada uma delas tem o objetivo de comer uma fruta que aparece aleatoriamente no labirinto. Cada vez que uma fruta é comida, a cobra que comeu aumenta de tamanho. Se a
cobra colide com a parede ou com outra cobra ela morre. As fases do jogo mudam à medida que os pontos forem avançando e com isso as cobras tornamse cada vez mais rápidas. Essa lógica foi modelada usando as classes da Figura 4:

A classe Vector representa uma coordenada no mapa, controla as operações vetoriais e é usada para o “corpo” da cobras. A classe Worm é uma classe abstrata para criação das cobras e serve de base para criar a classe controlada pelo jogador ( WormHuman ) e a controlada pelo computador ( WormBot ). A classe Nibbles é o jogo em si. Ele utiliza a classe Graphics que encapsula o uso do canvas. A classe Diamond controla as frutas que a cobra come. A classe Matrix mapeia os labirintos.

A classe WormBot utiliza um algoritmo de pathfind
para encontrar a fruta. Optou-se usar o breadth-first
search (BFS) baseado em [Milligton 2006] por se de
implementação simples.


5.1 Algoritmo de Pathfinding
5.2 Técnica de Double Buffering
Para melhorar a experiência do usuário e evitar que a
tela fique piscando (flickering), a técnica de Double
Buffering citada em [Lamothe 1999] foi aplicada. Ela
consiste em criar um canvas secundário, desenhar nele
e depois copiar as variáveis para o canvas principal.
Isso evita que o jogador perceba a tela sendo
desenhada a cada jogada.
Decididamente, o HTML5 inaugura uma nova era no desenvolvimento de páginas para a internet, onde a mobilidade do usuário é a palavra-chave. Mudanças foram implementadas a partir das necessidades dos desenvolvedores, baseadas em erros e acertos. A partir de agora, teremos aplicações Web mais ricas e com maior integração entre conteúdo on-line e off-line.

6. Considerações Finais
Alunos:
Luiz Felipe Acacio de Souza
Rafael dos Santos Tavares
Renan Victor Castro Queiroz
Robson Barros
Romulo Samir
Davi Alexandre Pereira da Costa
Victor Felipe
Full transcript