Neste tutorial de HTML5
inicial de nosso curso, iremos entender o que ocasionou a mudança do
antigo HTML (4.01) para o novíssimo, revolucionário e fantástico HTML5.
Vamos ver como era a internet antigamente, como funcionava, e as
mudanças que ocorreram na web que culminaram no desenvolvimento do tão
falado e poderoso HTML5.
Para iniciar seus estudos nestes tutoriais de HTML5, recomendamos que
tenha estudado os tutoriais de HTML e CSS de nossa apostila online.
HTML5 - Por que e Para que foi criado ?
Há quanto tempo você acessa a internet? 5 anos? 6 anos?
Se acessa há, digamos, 10 anos ou mais, certamente o que falaremos aqui será nostálgico, e verá como as coisas evoluíram.
Na década de 90, usar imagem em um site era um luxo.
Na época, as pouquíssimas pe$$oa$ que tinham dinheiro para obter um
computador, usava a internet através da linha telefônica, cuja
velocidade era de 56kbps (compare com a sua hoje, onde 1MB é cerca de
mil KB).
Ao entrar em sites com imagens, era necessário esperar alguns minutos para elas aparecerem.
Baixar algumas mp3? Sim, era possível. Bastava deixar seu computador ligado de madrugada, baixando músicas pelo Napster.
Vídeos? Eram raros, bem raros e geralmente duravam alguns segundos.
O máximo de interação que tínhamos eram através de fórums e do IRC (um
bate papo no modo texto, onde usávamos um terminal de comandos para
entrar nas salas, excluir pessoas, e tudo mais).
Nessa época o antigo HTML reinava, o JavaScript e PHP eram pouco usados, e o CSS nem existia.
Agora dê uma olhadinha nas abas de seu navegador e nos programas abertos em seu computador (ou celular, tablet, smartphone etc).
Deve estar ouvindo música ou vendo um show no Youtube, talvez tenha
pausado seu seriado favorito para estudar HTML5, deve estar conversando
com várias pessoas em alguma rede social ou em um chat com vídeo, além
de estar navegando em algum site de notícias.
Notou a diferença? Hoje em dia a velocidade da internet mudou e as
máquinas melhoraram, tudo gira em torno de belas imagens, alta resolução
de vídeos, jogos online que não rodavam nem nos melhores computadores
de 10 anos atrás, música, interação em redes sociais, celulares e outros
mobile em crescente de uso, etc etc.
Resumindo: a internet mudou drasticamente, e o desenvolvimento web é que
deu suporte para tudo isso. Assim, é fácil entender porque o antigo
HTML teve de mudar, além do surgimento de novas ferramentas, linguagens e
aplicativos para desenvolvimento web.
Mas vamos com calma, com o tempo aprenderemos tudo sobre programação web.
Por hora, vamos nos focar no HTML5, saber o que é, para que serve, onde é usado e o que vamos fazer com ele em nosso curso.
HTML5 - O que mudou? O que ele faz?
De uma maneira bem simples e direta: o HTML5 faz o que antes só era possível com outras ferramentas e linguagens de programação.
Com poucos, e simples códigos, o HTML5 nos proporciona efeitos muito úteis, de uma maneira bem lógica e fácil de aprender.
Vamos entrar mais em detalhes sobre algumas características marcantes do
HTML5, que iremos estudar em nossos tutoriais no decorrer desta seção
de nossa apostila.
HTML5 - Multimídia
Colocar uma música de fundo ou um vídeo dentro de uma página usando o antigo HTML era um verdadeiro suplício.
Tínhamos que ter cuidado com os browsers, dispositivos usados pelo
usuário e até mesmo checar se alguns plugins estavam instalados, como o
Flash.
Vamos ver que, com apenas algumas linhas de código HTML5, podemos inserir um vídeo ou som facilmente em qualquer site.
HTML5 - Multi-plataforma e Dispositivo
Quando o HTML antigo surgiu e reinou, internet eram para computadores normais.
E por normais falamos de um enorme monitor de tubo, um gabinete com a
CPU, estabilizador, mouse e caixas de som plantados numa mesa
(geralmente cara).
Hoje não é assim. Hoje usamos celular para acessar as redes sociais, um
aplicativo para navegar pela web e ler e-mail, e até mesmo ver vídeos no
Youtube.
Enviamos links através de chats e programas de troca de sms, fotos e até fazemos reuniões online (hangouts).
Isso tudo não existia antes, então o coitado do antigo HTML não podia fazer muita coisa.
Mas o HTML5 é ciente disso, foi e continua a ser desenvolvido por
programadores que estão cientes que as pessoas usam diversos
dispositivos, aplicativos e sistemas operacionais.
Então o HTML5 já vem preparado para toda essa evolução.
Criar um site em HTML5 é ter a certeza que ele está atualizado e vai se
comportar da melhor maneira possível, não importa o dispositivo que
estejam acessado, navegador ou sistema operacional. Ele é feito ciente
dessas variedades.
HTML5 - Programação Gráfica e de Jogos
Um dos aspectos que mais vêm chamando a atenção de profissionais e
iniciantes no mundo da computação, é a facilidade na qual o HTML5
permite a criação de aplicações gráficas, e até mesmo de jogos.
Em épocas passadas, precisaríamos criar aplicativos em PHP e JavaScript,
mesmo para as coisas mais simples, ou usar torcer para o usuário ter
instalado o Flash no browser e criar aplicações lá.
Porém, isso é coisa do passado, pois o HTML5 permite facilmente a
criação de áreas para renderizar aplicações gráficas, sendo a ferramenta
mais comum para tais efeitos o
Canvas.
Podemos ainda usar o XML de uma maneira bem fácil, através do
SVG e criar gráficos estáticos e dinâmicos, de uma maneira bem mais simples que antes, e com resultados muito interessantes.
HTML5 - Simples, Direto e Robusto
Se leu nossos tutoriais inicias sobre HTML, viu que falamos do HTML 4.01, XML, XHTML etc.
Ou seja, há muitas, muitas mudanças, diferenças e incompatibilidade.
Pois bem, o HTML5 veio para dar um basta nisso.
Um exemplo de simplicidade do HTML5, é o tipo de documento (
doctype), onde no antigo HTML usávamos (que frequentemente mudava):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
E agora vamos usar somente:
<!DOCTYPE html>
E quando o HTML5 mudar, não vamos mudar esse
doctype, já foi decidido que esse vai ser permanente. Ou seja, uma coisa a menos para se preocupar.
E no
CSS, lembra como passávamos o endereço da folha estilos? Assim:
<link type="text/css" rel="stylesheet" href="estilo.css">
Agora fazemos simplesmente:
<link rel="stylesheet" href="estilo.css">
E a
meta tag charset, que usávamos para escrever símbolos e caracteres especiais, como os de acentuação da língua portuguesa? Fazíamos:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
E agora fazer (pasmem), simplesmente:
<meta charset="utf-8">
Sabe quando escrevia uma tag errado, usava o valor de maneira errada ou
esquecia alguma aspa e todo seu site ficava feio e desconfigurado?
Pois bem, o HTML5 está sendo feito de modo a ficar mais robusto, mais forte contra erros de codificação.
HTML5 - Padronização e Acolhimento
Uma outra importante missão do HTML5 é a padronização.
Como citamos no item passado, o HTML passou por mudanças drásticas no decorrer de seu uso e desenvolvimento.
Foi criado, inclusive, o XHTML na tentativa de organizar e padronizar
mais o HTML, usando conceitos e ideias do XML. Mas no fim das contas,
acabou por bagunçar mais um pouco o já tão movimentado meio de criação
de sites.
O HTML5 vai tentar parar com essas bagunças e mudanças no modo de
codificar e interpretar códigos. Sabe os códigos antigos, até da década
de 90?
O HTML5 vai entender e mostrar eles, até mesmo coisas que estão em desuso, como frames.
Algumas coisas antigas não devem mais ser utilizadas (iremos falar sobre elas no decorrer do
Curso de HTML5), mas não serão abandonadas pelo browser, só irão desencorajar seu uso.
Usou HTML 4.01 e quer usar alguns conceitos de XHTML?
Ok, o HTML5 irá acolher, entender e interpretar corretamente seu código. Mas evite de fazer isso no futuro.
E em vez de dividir entre HTML, XHTML, XML e diferentes versões de HTML,
é aconselhável que usemos só o HTML5, para ser uma linguagem padrão,
para evitar de termos que estudar tags e ferramentas diferentes.
Interessante, esse HTML5, não?
E estamos só conversando, demos apenas uma palhinha do que mudou e simplificou.
Ao longo de toda essa seção de tutoriais de HTML5, vamos aprender a
criar coisas fantásticas com esta poderosa ferramenta, inclusive jogos e
animações gráficas de uma maneira bem bacana.
