Slide 1 - WordPress.com

Tecnologia para a Internet I – Aula 02
Prof. Me. Ronnison Reges Vidal
CONTEÚDO
Unidade 1 – Html 5
 Uma breve história do HTML5
 A filosofia por trás do HTML5
 TAG
2
Uma breve história do HTML5


3
Em 1998 a W3C decidiu que não continuaria a evoluir o HTML.
O futuro como eles acreditavam ( assim como seus ator
autores ) era o XML. Então o HTML foi congelado na versão
4.01 e uma especificação foi lançada com nome de XHTML,
que era uma versão do XML do HTML exigindo regras XML de
sintaxe como atributos com aspas, algumas tags com
fechamento enquanto outras eram autocontidas.
Um pequeno grupo no Ópera, entretanto, não estava
convencido que o XML era o futuro para todos os autores web.
Estes indivíduos começaram um trabalho extra curricular em
uma especificação prova de conceito que estender os
formulários HTML sem quebrar a retrocompatibilidade. Aquela
especificação eventualmente se tornou Web Forms 2.0,
subsequentemente foi incorporado na especificação HTML5.
Uma breve história do HTML5


4
Em 2006 a W3C decidiu que talvez tivesse sido otimista
demais na esperança de que o mundo se mudasse para o
XML. Boas ideias geram implementadas e as mais
rejeitadas independentemente de quem fosse a fonte e
quem ela representasse, ou até mesmo onde elas foram
inicialmente debatida. Boas ideias serão adotadas no
Twitter, blogs e IRC.
Devido a especificação HTML 5 está sendo desenvolvida
tanto pela W3c quanto a WHATWG, há diferentes versões
da especificação. Conforme abaixo:
– www.w3.org/TR/html5 é o snapshot oficial da W3C;
– http://dev.w3.org/html5/spec é o último rascunho do
editor e passível de alteração.
Uma breve história do HTML5

5
Em 2009 a W3C parou de trabalhar no XHTML 2.0 e
desviou recursos para HTML5 ficando claro que o HTML5
havia vencido a batalha de filosofias. O fato de os grupos
de trabalho HTML5 consistir em representantes de todas
as fabricantes de navegadores, também era importante.
Se os fabricantes estivesse dispostos a implementar parte
da especificação ( como a indisposição da Microsoft para
implementar <dialog>, ou a oposição da Mozilla ao <bb>)
ela era removida; Hickson (Ian ?Hixie? Hickson, líder da
Mozilla que ajudou na especificação do HTML 5) disse ?A
realidade é que os fabricantes de navegadores têm o veto
definitivo em tudo na especificação, já que se eles não a
implementarem , a especificação não é nada além do
trabalho de ficção?
Uma breve história do HTML5

(http://www.webstandarts.org/2009/05/13/interview-withian-hickson-editor-of-the-html5-especification/). Muitos
participantes acharam isto altamente desagradável: Os
fabricantes de navegadores tomaram de assalto ?nossa
web? reclamaram com alguma justificativa.
6
A filosofia por trás do HTML5

Por trás do HTML5 está uma série de princípios
declarados de design (http://www.w3.org/TR/html-design-
principles). Há três objetivos principais para o HTML5:

Especificar comportamentos atuais de navegadores que
sejam interoperáveis;
– Definir a manipulação de erro pela primeira vez;
– Evoluir a linguagem para autoria mais simples de
aplicações web;
7
A filosofia por trás do HTML5

8
Aplicações Web
– Um número cada vez maior de sites na Web são o que
chamamos de aplicações web, isto é, eles imitam
aplicações de desktop ao invés dos documentos
tradicionais estático de links de textos e imagens que
compõem a maioria da Web. Como por exemplo temos os
processadores online de texto ferramentas de edição de
foto, sites de mapeamento e etc. Altamente movidos com
Javascript eles levaram o HTML4 a beira do limite de suas
capacidades. O HTML5 especifica novas APIs para DOM
para arrastar e soltar, eventos enviados pelo servidor,
desenho, vídeos e similares.
A filosofia por trás do HTML5

9
Aplicações Web
– Estas novas interfaces que as páginas HTML expõe ao
Javascript via objetos na DOM tornam mais fácil escrever
as aplicações utilizando padrões altamente especificados
ao invés de apenas artimanhas mal documentadas.
– Ainda mais importante é a necessidade de um padrão
aberto livre (para utilizar e livre para implementar) que
possa competir com padrões proprietários como Adobe
Flash ou Microsoft Silverlight. Independente do que você
acha destas tecnologias ou empresas acreditamos que a
Web seja uma plataforma muito vital à sociedade,
comércio e comunicações para estar nas mãos de um
fabricante. O quão diferente teria progredido a
Renascença se Caxton tivesse mantido patente e
monopólio da fabricação de prensas de impressão ?
A filosofia por trás do HTML5

10
Não quebre a Web
– Há exatamente milhões de páginas Web já em uso por aí,
e é interativo que elas continuem a ser reproduzidas.
Então o HTML5 é em sua maioria é um derivativo do
HTML4 que continua definir como os navegadores devem
lidar com marcações antigas como <font>, <center> e
outras tags presentacionais (de apresentação), pois
milhões de páginas web as utilizam. Mas os autores não
devem utilizá-las pois estão obsoletas. Para autores web
as marcações semânticas ainda comando um dia, embora
cada leitor formar a sua própria conclusão sobre HTML5
incluir semânticas suficientes ou elementos demais.
A filosofia por trás do HTML5



11
Estrutura Principal
– Primeiro o DOCTYPE:
– <!doctype html>
Note que se quer há um número de versão, isto é tudo. Não é
uma instrução para encantamento: ela é exigida pelos
navegadores que precisam da presença do de um doctype
para ativar o modo de padrões, e esta string é a string mais
curta que o faz de maneira confiável.
Então precisamos definir a codificação de caracteres do
documento não fazê lo pode resultar em um risco de
segurança obscuro porém real (veja em:
http://code.google.com/p/doctype/wiki/ArticleUtf7). Isto deve
estar nos primeiros 512 bytes do documento a não ser que
você possa pensar em um esplêndido motivo para não utilizálo, recomendamos UTF8 como a codificação de caracteres.
A filosofia por trás do HTML5



12
Estrutura Principal
– <!doctype html>
– <meta charset=utf-8>
Observe a tag <meta> muito cuidadosamente. Aqueles
acostumados a escrever XHTML perceberam três estranhezas.
A primeira é que a tag <meta> está muito mais curta do que
costumava ser até então - estávamos acostumados a utilizar
<meta http-equiv=?Content-Type?
content=?text/html;charset=UTF-8?>. Isto ainda é possível mas
a versão mais curta é preferível já que é mais fácil de digitar e
funciona em todo lugar.
Você também perceberá que eu não coloquei aspas no atributo
charset=utf-8 nem utilizei o autoencerramento na tag <meta
charset=utf-8 />. O HTML5 não é uma linguagem XML então
você não precisa dessas coisas.
A filosofia por trás do HTML5

13
Estrutura Principal
– Porque a sintaxe é tão terrivelmente relaxada ? A resposta
é simples: os navegadores nunca se importaram com a
sintaxe XHTML se ela fosse enviada como text/html apenas um validador XHTML se importava. Assim sendo,
favorecer uma forma em detrimento a outra no HTML5
seria totalmente arbitrário e tornaria inválidas as páginas
que não seguissem o formato, apesar delas funcionarem
perfeitamente em qualquer navegador. Sendo assim o
HTML5 é agnóstico quanto a qual você utiliza.
O que é uma TAG HTML?

14
É o elemento que compõem a estrutura do documento HTML5,
este elemento é iniciado com o símbolo menor ( < ) e
terminado com o símbolo maior ( > ), como por exemplo:
<doctype>, <html>, <div>, etc. As são divididas conforme
categorias abaixo:
– O elemento root
– metadados
– Script
– seções
– agrupamento de conteúdo
– Semânticas de nível de texto
– Edições
– Conteúdo incorporado
– Tabelas
– Formulários
– Interativo
Atributos de uma TAG
Uma TAG pode conter atributos, que são informações que
alteram o comportamento da TAG. Os atributos podem ser
divididos em atributos específicos para cada TAG e atributos
globais que são comuns a todas as tags.
Além das TAGs, existem outros elementos que ajudam na
construção de documentos HTML5, que são: o CSS, o
Javascript.

15
Uma breve definição de CSS

16
É uma abreviação do termo Cascading Style Sheet (Folhas de
Estilo em Cascata). O CSS permite, de uma forma simples, a a
utilização de estilos (cor do texto, tamanho e tipo da fonte) ao
documento HTML. Tem como finalidade fornecer ao navegador
a forma como os elementos são apresentados.
Uma breve definição da linguagem
Javascript

17
É uma linguagem de programação que está localizado do lado
cliente, isto é, no navegador e tem como objetivo controlar o
HTML e o CSS manipulando-os no documento HTML. Esta
linguagem é muito parecida com as linguagens C++ e Java,
permitindo inclusive a orientação a objetos. É mantida pela
European Computer Manufacturer's Association
(http://www.ecmascript.org/) e atualmente encontra-se na
versão 5.
O que é DOM (Document Object Model) ou
Modelo de Objetos do Documento ?

18
É a interface entre a linguagem Javascript e os objetos do
HTML. Basicamente quando o documento HTML é carregado
pelo navegador, o mesmo fica armazenado em uma estrutura
hierárquica em forma de árvore que pode ser facilmente
manipulável através de comandos Javascript.
Exemplos de Códigos
19
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change the style of an HTML
element.</p>
<button type="button" onclick="myFunction()">Click
Me!</button>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
</body>
</html>