RESENHA CRÍTICA:

INSTITUTO FEDERAL DO PARANÁ
JOSÉ WILLIAM SERAFIM ACHITTI
RESENHA CRITICA – HTML5: CURSO W3C ESCRITÓRIO BRASIL
ASSIS CHATEAUBRIAND
2016
2
RESENHA CRÍTICA
FERREIRA, Elcio; EIS, Diego. HTML5: Curso W3C Escritório Brasil.
1 CREDENCIAIS DOS AUTORES
Diego Eis é um palestrante sobre vários assuntos ligados ao mercado de
internet e desenvolvimento, criou um site chamado Tableless, onde vários autores
falam sobre desenvolvimento web e atualmente coordeno uma equipe de produto
em
uma
das
maiores empresas
de
hosting da
América
Latina.
Elcio Ferreira é programador há uns vinte anos, e empreendedor há uns dez.
É um dos fundadores da Visie Padrões Web, empresa que desenvolve sites e
sistemas web, além de oferecer treinamento, é também um dos autores do
site Tableless.com.br, fundado por ele e seu sócio Diego Eis.
2 RESUMO DA OBRA
No capitulo inicial os autores descrevem uma visão geral do HTML5 ,
apresentando a história do HTML e sua evolução, até a versão final que é a HTML5.
O HMTL 5 é a nova versão do HTML4, seu principal objetivo é facilitar a
manipulação do elemento possibilitando o desenvolvedor a modificar as características dos
objetos de forma não intrusiva e de maneira que seja transparente para o usuário final.
Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o
Javascript fazerem seu trabalho da melhor maneira possível.
O segundo capítulo antigamente para que uma nova versão do HTML fosse
lançada, todas as ideias listadas na especificação deveriam ser testadas e desenvolvidas para
então serem publicadas para o uso dos browsers e os desenvolvedores.
No terceiro capítulo há exemplos de tag que compõe a estrutura básica de um
3
código HTML, cada tag possui sua função, o doctype não é basicamente uma tag , mas está
ali para indicar ao navegador a especificação do código.
No quarto capitulo, entre as categorias de modelos de conteúdo, existem dois
tipos de elementos: elementos de linha e de bloco. Cada elemento no HTML pode ou não
fazer parte de um grupo de elementos com características similares. As categorias estão a
seguir: Metadata content, Flow content, Sectioning content, Heading content, Phrasing
content, Embedded content e Interactive content.
O quinto capítulo, a função do HTML é indicar que tipo de informação a página
está exibindo, Com as versões anteriores do HTML nós conseguimos marcar diversos
elementos do layout, estruturando a página de forma que as informações ficassem em suas
áreas específicas.
No sexto capítulo , o HTML possuía alguns elementos que tinha apenas
características visuais e não semânticas e foram deixados de lado, pois atrapalhavam o
código.
O capítulo sete traz novos valores para o atributo type , como por exemplo: O
campo com type=”color” é um seletor de cor.
O capítulo oito e nove mostra alguns formulários, onde o avanço do HTML5
avançou em relação aos anteriores. HTML5 facilita muito a vida de desenvolvedores web
ao validar formulários, tornando automática boa parte do processo, em muitos casos todo
ele.
Exemplo para tornar um elemento do HTML editável, basta incluir nele o atributo
contenteditable, assim:
<div contenteditable=”true”>
Edite-me...
</div>
Capítulo dez mostra como inserir o atributo do Drag and Drop (Basicamente,
inserir o atributo draggable=”true” num elemento o torna arrastável). Seleções de texto
são automaticamente arrastáveis, não precisam do atributo draggable.
Os agentes de usuário podem oferecer recursos de revisão ortográfica e gramatical, dependendo
do que houver disponível em cada plataforma. Os desenvolvedores podem controlar o comportamento dessa ferramenta através do atributo spellcheck.
Exemplo: spellcheck=”true” inserir essa tag faz com que a revisão esteja
habilitada para o elemento.
No capítulo onze , ensina como inserir áudio e vídeo em uma página web, para isto,
basta utilizar o elemento “áudio” para adicionar um áudio (<audio src=”mus.oga”
controls=”true” autoplay=”true” />), o valor de autoplay define se o áudio vai começar a tocar
assim que a página carregar. Para inserir um vídeo é muito semelhante ao de áudio,( <video
src=”u.ogv” width=”400” height=”300” />).É muito importante que você
inclua, nos seus elementos source (src) de áudio e vídeo, informação a respeito do
container e codecs utilizados. Isso vai evitar que o navegador tenha que baixar um arquivo
de mídia para executá-lo.
4
O capítulo doze , o elemento device e stream , permite ao usuário utilizar sua web
cam em uma página web e fazer gravações pela mesma , o autor mostra um exemplo de
como ficaria o código para utilização do elemento device e stream.
1 <!DOCTYPE html>
2 <html lang=”en-US”>
3 <head>
4 <meta charset=”UTF-8” />
5 <title>Videochat, step 1</title>
6
7 <script>
8 function update(stream) {
9 document.getElementsByTagName(‘video’)[0].src = stream.url;
10 }
11 </script>
12
13 </head>
14
15 <body>
16
17 <p>To start chatting, select a video camera: <device type=media
onchange=”update(this.data)”></p>
18 <video autoplay />
Capítulo treze, o HTML5 incorpora o padrão MathML. Trata-se de uma
linguagem de marcação, baseada em XML, para representação de fórmulas matemáticas.
Este código é bem extenso, porém mesmo para iniciante , é muito simples.
Exemplo de como a fórmula sairá no navegador:
Assim como MathML, SVG é uma outra linguagem XML que pode ser incorporada com
facilidade em HTML5, SVG é uma linguagem para marcação de gráficos vetorias.
Exemplo:
5
O capítulo quatorze mostra a função do elemento canvas, através dele você pode
desenhar na tela do navegador via Javascript. Para isto é necessário inserir no código
HTML (<canvas id=”x” width=”300” height=”300”></canvas>), com esta tag , vai abrir uma
caixa vazia para desenhar. O canvas é semelhante com o SVG, para saber quando usar um
deles, é preciso saber as diferenças, o dois tem suas vantagens.
No capítulo quinze explica a utilização da Server-Sent Events, a mesma faz com
que o servidor possa disparar o envio de dados ao agente de usuário, por exemplo, para
implementar uma interface de chat ou um monitor de status de alguma operação demorada
ocorrendo no servidor.
No capítulo 16 é possível entender o significado e as diferenças das versões
anteriores do DOM ( Modelo de Objetos do Documento), que é uma interface entre a
linguagem Javascript e os objetos do HTML.
O capítulo dezessete mostra ao leitor o suporte ao tratamento de eventos disparados
pelo usuário é parte essencial do DOM. HTML5 oferece a você um extenso conjunto de
novos eventos. Vamos dar uma olhada nos mais interessantes:
oncanplay :O elemento audio ou video já tem dados suficientes no buffer para começar a tocar.
onended: O vídeo ou áudio chegou ao fim.
onpause: O usuário clicou em pause.o
onplay: O usuário clicou em play ou o playback começou por causa do atributo autoplay
onmousewheel: A rodinha do mouse foi acionada.
onoffline: O agente de usuário ficou offline.
Ononline: O agente de usuário está novamente conectado.
No capítulo dezoito explica a definição do elemento menu , o elemento menu é
usado para definir menus e barras de ferramenta. Dentro do menu, você pode inserir
submenus ou comandos. Há três tipos de comando : command, checkbox, radio.
Lista de elementos para cada comando:
Command: link, button e input button.
Checkbox: checkbox, select.
Radio: radiobutton, select.
6
O capítulo dezenove descreve sobre a possibilidade de linkar documentos é o que
torna a Web o que ela é. Existem duas maneiras principais de linkar documentos, os
elementos a e link. O elemento a cria um link no conteúdo da página. Você conhece sua
sintaxe:
<a href=”http://visie.com.br”>Visie</a>
O elemento link, por sua vez, cria um metadado, um link que não é mostrado no
conteúdo, mas o agente de usuário usa de outras maneiras.
<link rel=”stylesheet” href=”estilo.css” />
Microdata , capítulo 20 - A Microdata nos permite tornar esta estrutura semântica um
pouco mais específica, definindo o que é o conteúdo de cada elemento. Cada elemento
itemscope define um item de dados. Cada itemprop define o nome de uma propriedade. O
valor da propriedade é o conteúdo da tag HTML. A Microdata API nos fornece acesso
especial a esses dados.
No capítulo vinte e um apresenta as funções do histórico de sessão. O histórico de
sessão permite ao usuário voltar e avançar páginas que teve acesso em seu navegador. Até o
HTML4 é preciso dados no agente de usuário entre as páginas.
No capítulo vinte e dois o HTML5 provê uma maneira de se indicar ao navegador
que elementos são necessários e devem ser postos em cache para que uma aplicação
funcione offline. Trata-se de um widget de relógio. Para funcionar, este HTML depende
dos arquivos “clock.js” e “clock.css”. Para permitir que o usuário acesse esta página offile,
precisamos escrever um arquivo de manifesto, indicando que URLs devem ser postas em
cache.
O capítulo 23 mostra como usar o Scrolling into view e hidden¸que são códigos
para emitir avisos, ocultar e exibir elementos e descobrir se o elemento esta oculto lendo as
propriedades display e visibility do CSS.
O capítulo 24 mostra as três maneiras mais populares de um usuário descobrir a
sua localização no globo. O método mais preciso é o GPS , a triangulação GPRS através
das antenas de sinal de celulares onde está mais próximo e , por IP por meio de consultas
whois e serviços de localização de IP usado por navegadores web em computadores.
7
No capítulo final o autor descreve sobre o undo, O agente de usuário deve armazenar um
histórico de alterações para cada documento carregado. Esse histórico é controlado pelo
objeto UndoManager. Cada vez que o usuário disparar uma ação de undo ou redo, e o item
do histórico for um objeto undo, será disparado o evento correspondente, window.onundo
ou window.onredo.
3 CONCLUSÃO
Em geral, é um livro fundamental para quem está se aprofundando na área de
programador web, seja iniciante ou mais experiente com o assunto, pois os autores
explicam detalhadamente cada tag e código usado para o desenvolvimento de uma página
web. Além da história do HTML5 e comparações com as versões anteriores.
Para estudantes na área de programação este livro é de suma importância, porque
pode ser tirada várias dúvidas. O foco do livro explicar as novidades, melhorias e mudanças
que o HTML5 trouxe em relação as outras versões.