UNIVERSIDADE BANDEIRANTE ANHANGUERA TECNOLOGIA DE ANLISE E DESENVOLVIMENTO DE SISTEMAS

4 SEMESTRE CARLOS ALBERTO DE OLIVEIRA RA 1299875714 FBIO DOS SANTOS DE OLIVEIRA RA 3776762381 JAILTON DE JESUS OLIVEIRA RA 1299903880 MARCOS VINCIUS CASTRO E SILVA RA 3708614962 TANIA MORENO PRADO DE CARVALHO RA 1299931938 VINCIUS TADEU DOS SANTOS RA 4206796562

LINGUAGEM DE PROGRAMAO COMERCIAL

HTML5

ORIENTADOR FBIO DE OLIVEIRA

So Paulo, setembro 2013

HTML5 Definio HTML5 (Hypertext Markup Language, verso 5 = Linguagem de Marcao de Texto), uma linguagem para publicao de contedo (texto, imagem, vdeo, udio, etc...) na Web. Originalmente desenvolvido por Tim Berners-Lee, chega a sua quinta verso e hoje uma das principais tecnologias da internet. Histria Surgiu em 2008, com a unio de duas empresas rivais (W3C e WHATWG), quando foi anunciado pela W3C, ainda em fase experimental. Atualmente encontra-se em fase de esboo, mas algumas de suas funcionalidades j foram implementadas em navegadores como: Google Chrome e Safari. Foco Sua essncia tem sido melhorar a linguagem com suporte para as mais recentes multimdias, criao de sites, aplicativos, computadores, dispositivos e outros fins do mundo online, alm da fcil adaptao do usurio. Compatibilidade Segue abaixo navegadores compatveis com a nova verso do HMTL: Safari Google Chrome Opera Mozilla Firefox Internet Explorer 8, 9 e 10

Verses antigas dos navegadores no tem quase nenhum suporte ao HTML5. Nesse caso, o Internet Explorer 8 e 9, dentre os outros listados acima, tem suas funes reduzidas e no funcionam todos os mdulos do HTML5.

Conceito Podemos dizer que o HTML5 a juno do HTML + CSS + Javascript (com as novas APIS), pois ele rene as trs linguagens em uma nica plataforma, possibilitando mais facilidade e recursos. Detalhadamente o trabalho de ambas dividido desta forma: HTML = Estrutura do site CSS = Estilos Javascript APIS = Interatividade

HTML5 algo bem futurista que est ocorrendo na internet.

Novas Funes

DOCTYPE

Antigo

Novo

TAGS PADRONIZADAS

Antiga

Nova

O HTML5 adiciona diversas novas funes sintticas, incluindo tags de <vdeo>, <udio>, <header> e elementos <canvas>, assim como a integrao de contedos SGV. Como vimos nas ilustraes acima (DOCTYPE e TAGS PADRONIZADAS), as melhorias foram realmente significativas para o programador, devido ao auxlio que lhe oferece. Barra de Progresso

Uma das novidades encontradas foi uma barra de progresso reformulada, que diminuir muito o tempo gasto para sua criao, antes feita em flash, dentre outros. A ilustrao mostra a apario de cada barra em seus navegadores, em branco (Valor zero), verde (Google Chrome) e azul (Internet Explorer). De acordo com a ilustrao acima, o valor (value) se inicia em 75% e seu mximo 100%. Se colocarmos somente <progress>, o valor ser 0. Todos os valores so definidos pelo usurio.

SGV (Grficos Vetoriais) Podemos defini-lo como o oposto de BITMAP, porque no lida com pixel mas, sim, com um conjunto de linhas e curvas. Podemos dar zoom sem perder a qualidade de imagem. Sua linguagem no estilo XML para descrever de forma vetorial desenhos e grficos bidimensionais, dinmica, esttica ou animada. Sua criao foi inspirada em formatos como JPEG, PNG, CSS e XML, e suportado por todos os navegadores Web modernos.

Exemplo de SGV:

Canvas Tambm voltado parte de grficos dinmicos, Canvas um elemento de renderizao de grficos atravs do Javascript. Exemplos:

Em uma pgina HTML5, o cdigo a seguir cria um elemento Canvas: <canvas id="exemplo" width="200" height="200"> Caso o navegador no tenha suporte ao Canvas, o texto exibido : </canvas>

Com Javascript, podemos desenhar no canvas da forma abaixo: var exemplo = document.getElementById( 'exemplo' ), contexto = exemplo.getContext( '2d' ); contexto.fillStyle = 'red'; contexto.fillRect( 30, 30, 50, 50 ); Esse cdigo desenha um retngulo vermelho na tela.

WebGL Baseado no OpenGL ES 2.0, uma API em Javascript, disponvel a partir do elemento canvas, que fornece uma interface de programao de grficos 3D. Com o Javascript conseguimos requisitar o CPU, o que d maior processamento e conseguimos renderizar o 3D no browser. No funciona no Internet Explorer pois, segundo a Microsoft, no uma especificao segura. Exemplo de Web GL: Um experimento que simula a gua, com WebGL Water. Neste vdeo temos a noo da capacidade 3D do HTML5.

Site em HTML5 Exemplo de site feito em HTML5, com imagens em transio, pgina dinmica e com timos grficos.

CONCLUSO HTML5 , sem dvida, a plataforma mais usada na web, pois tem diversas utilidades, seja para o desenvolvedor web ou o desenvolvedor de jogos. Com elementos grficos impressionantes (WebGl, Canvas), a juno das duas rivais est permitindo o resultado esperado, e por ainda estar em fase de esboo, h mais melhorias por vir. Se esta nova verso j ajudou muito os programadores, quando finalizada haver de oferecer diversas possibilidades para uso particular, empresa, desenvolvedor, dentre outros, para criar sites, blogs e aplicativos para diversas plataformas, como tablets e smartphones.

BIBLIOGRAFIA HTML 5 http://pt.wikipedia.org/wiki/HTML5 Curso W3C HTML5 POR ELCIO FERREIRA E DIEGO EIS http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf HTML5 - POR CLEIBSON ALMEIDA http://www.cleibsonalmeida.blog.br/site/resumo-html-5/ O QUE HTML5? POR CASSIO POLITI http://www.tracto.com.br/o-que-e-html5-por-que-se-da-tanta-importancia-a-ele CANVAS http://pt.wikipedia.org/wiki/Canvas_(HTML5) WEBGL http://pt.wikipedia.org/wiki/WebGL http://elemarjr.net/2012/07/14/para-comear-a-brincar-com-webgl/ WEBGL WATER http://madebyevan.com/webgl-water/ WEBGL EXEMPLOS POR FELIPE DE FARIAS http://pixeloid.com.br/tecnologia/serie-html5-e-js-webgl/ SITES EM HTML 5 http://pt.wix.com/sample/website