70-480 HTML5 Parte I

O Exame 70-480
O Microsoft Exam 70-480 visa testar o desenvolvedor nas competncias relativas
ao correto e bom uso de HTML5, JavaScript e CSS3.
O material oficial utiliza o Visual Studio 2012 como IDE recomendada,
mas qualquer ferramenta de edio pode ser utilizada.
Atualmente segue a seguinte estrutura de avaliao:
Implementar e manipular estruturas de documentos e objetos (24%)
Implementar fluxo de programa (25%)
Acessar e proteger dados (26%)
Usar CSS3 em aplicativos (25%)

Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

HTML, DHTML, XHTML e HTML5

HTML= Hypertext Markup Language ou Linguagem de Marcao de Hipertexto.
Linguagem para criao de pginas web. No linguagem de programao e sim
de marcao.
Consequncia evolutiva da juno do SGML (Standard Generalized Markup
Language) com o HyTime (Hypermedia/Time-based Structuring Language), sendo
ambas padres ISO/IEC Joint Technical Committee.
A primeira padronizao do HTML foi publicada em 1993 pela IETF (Internet
Engineering Task Force) e em 1995 a mesma instituio publicou a padronizao
do HTML 2.0. A partir de 1996 a W3C (World Wide Web Consortium) assumiu a
especificao do HTML publicando o HTML 3.0 em 1996 e em 1997 as
especificaes do HTML 3.2 e HTML 3.5. Em 1999 publicou a especificao HTML
4.01.

Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

HTML, DHTML, XHTML e HTML5

Em 2000 tornou-se padro internacional estabelecido pelo ISO/IEC 15445:2000.
Em 2008, o HTML5 tornou-se pblico pela especificao Working Draft do W3C.
Desde ento tem evoludo rapidamente e ainda no um padro completamente
estabelecido, com sua tima publicao oficial feita em outubro de 2014.
Durante o perodo do HTML 4, tivemos a criao e uso parelelo do DHTML
(Dynamic HTML), que nada mais do que o HTML tornado dinmico pelo uso
crescente do JavaScript, do CSS e pela evoluo do DOM (Document Object
Model).
O XHTML surgiu como uma alternativa dinamizao de apreseno de dados
nas pginas web. Basicamente um HTML com DTD prprio que exige a estrutura
de documento bem formado do XML e que permite tags de apresentao de dados
personalizadas (o que se tornou difcil de administrar).
Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

HTML, DHTML, XHTML e HTML5

A histria do HTML5 envolve outros grupos alm do W3C (por exemplo, o pessoal
do Opera j trabalhava paralelamente com o desenvolvimento de um novo HTML
antes de ter o seu trabalho unificado ao do W3C) e tambm outras linguagens
como o XHTML5 evoluo paralela para o XHTML.

Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

Hipertexto
Etimologia:
Do grego "-" (hper) = sobre, alm;
Com o latim textus (texto) = narrativa escrita, material de tecido (deriva do
verbo texere = tecer).
Partindo pra uma definio de dicionrio, hipertexto pode ser definido como uma
sequncia de texto que permite a remisso para outras localizaes ou tipos de
mdia dentro ou fora de seu contedo.

Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

Declarao de Tipo de Documento

Declarao inserida no incio do arquivo html para instruir aos navegadores a
correta interpretao do contedo, embora por questes histricas de
retrocompatibilidade os navegadores possam renderizar satisfatoriamente
documentos HTML sem esta declarao, porm com formataes inadequadas.
Esta informao essencial no apenas para esclareecer ao navegador
convencional de como e com qual verso de HTML interpretar o contedo da
pgina mas tambm porque estamos no alvorecer da web semntica e da
internet das coisas (IoT), onde no apenas esses navedores precisam obter as
informaes das pginas mas tambm os motores de busca precisam otimizar a
contextualizao dos resultados da pesquisa; os leitores de tela interpretaro
eficientemente o contedo para deficientes visuais, assim como tantos outros
dispositivos sero capazes de buscar e utilizar essas informaes.
Adiante veremos com mais detalhe a declarao e os DTDs mais comuns.
Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

Web Semntica (viso geral)

Um dos principais focos do HTML5.
Visa tornar possvel que qualquer dispositivo capaz de ler uma pgina web possa
compreender seu contedo atravs, obviamente, de sua semntica. Vulgarmente
isso quer dizer que cada coisa tem seu significado e seu lugar, ou seja, um pargrafo
um pargrafo, uma imagem uma imagem, um cabealho um cabealho...
No HTML5 todas as tags foram definidas semanticamente, ou seja, cada uma delas
possui seu sentido de ser e deve ser utilizada apenas para sua finalidade.
A semntica uma area da lingustica que estuda os componentes de uma lngua
seus sentidos, significados, significaes, signos, sinais, figuras, etc.
No se limita a isso! No decorrer do estudo ainda veremos muito mais sobre este
tema essencial e indissocivel do desenvolvimento web moderno.
Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

Tableless
Literalmente: sem tabelas.
Era comum at o HTML4 o uso de tabelas para definir o layout de uma pgina.
Felizmente, com o avano do CSS os desenvolvedores foram trabalhando melhor
seus layouts e a preservao dos mesmos nos diversos navegadores.
O uso de tabela tornava a renderizao da pgina mais lenta, alm de que nem
sempre o layout era apresentado adequadamente nos diversos browsers.
Em HTML5 o uso de tabela para formatao de layouts de toda ou parte de uma
pgina no aceito, sob qualquer circunstnicia, pois tabelas servem
semanticamente apenas para apresentao de dados tabulares.
(Lembra da web semntica?)
Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

Navegadores: Suporte e Compatibilidade

Os navegadores sempre foram projetados para a retrocompatibilidade.
Nem todos os navegadores suportam o padro por completo.
Acompanhar a evoluo dos browsers:
http://html5test.com
http://www.findmebyip.com/litmus
Recursos extras para forar a compatibilidade com plugins:
Modernizr
Html5Shiv

Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

HTML O Contedo da Pgina

HTML (o contedo), CSS (a formatao) e JavaScript (a dinmica funcional).
HTML uma linguagem de marcao (de hipertexto) e no uma linguagem de
programao.
a parte responsvel pela entrega do contedo da web de forma legvel e bem
formada, prezando pela semntica e organizao do mesmo.
A apresentao deste contedo fica a cargo das folhas de estilo CSS (Cascading
Style Sheets) que responsvel por posicionamentos, alinhamentos, cores, etc.
A dinamizao do contedo bem como a construo de funcionalidades que se
relacionem ao mesmo fica a cargo do JavaScript.
A biblioteca jQuery tambm um dos assuntos do exame ento trataremos dela
futuramente assim como XML e JSON que tambm fazem parte do pacote e
estudaremos estes pontos quando formos trabalhar com dados.
Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

A seguir...
Parte II: Comeando
!DOCTYPE html
<html>
<head>
<title>
<meta>

<link>
<script>
<base>
<body>

Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

Pesquisas e Referncias
Sobre o exame de certificao
https://www.microsoft.com/pt-br/learning/exam-70-480.aspx
https://mva.microsoft.com/ebooks
Sobre HTML, XHTML, DHTML e HTML5
https://en.wikipedia.org/wiki/Dynamic_HTML
https://pt.wikipedia.org/wiki/DHTML
https://pt.wikipedia.org/wiki/HTML
https://www.w3.org/TR/html5/
https://www.w3.org/TR/REC-html32
https://en.wikipedia.org/wiki/HyTime
https://pt.wikipedia.org/wiki/SGML
https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language
Sobre DTD
https://en.wikibooks.org/wiki/XHTML/DTD_(Document_Type_Definition)

Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

Pesquisas e Referncias
Sobre Hipertexto
https://pt.wikipedia.org/wiki/Hipertexto#Etimologia
https://pt.wikipedia.org/wiki/Mise_en_abyme
https://www.gramatica.net.br/origem-das-palavras/etimologia-de-texto/
http://www.dicio.com.br/hipertexto/
http://www.priberam.pt/dlpo/hipertexto
http://michaelis.uol.com.br/busca?id=okk0A
http://dicionariocriativo.com.br/significado/hipertexto
http://www.infopedia.pt/dicionarios/lingua-portuguesa/hipertexto
Sobre Tableless
https://pt.wikipedia.org/wiki/Tableless
https://github.com/tableless
https://www.eventials.com/tableless/
http://tableless.com.br/
http://www.html5rocks.com

Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

Pesquisas e Referncias
Sobre Semntica e Web Semntica
http://ceale.fae.ufmg.br/app/webroot/glossarioceale/verbetes/sentido-significado-e-significacao
http://linguaportuguesa.uol.com.br/linguaportuguesa/gramatica-ortografia/25/artigo185930-1.asp
http://brasilescola.uol.com.br/portugues/semantica.htm
https://pt.wikipedia.org/wiki/Sem%C3%A2ntica
http://www.soportugues.com.br/secoes/seman/
http://www.significados.com.br/semantica/
Sobre HTML e Padres
https://html.spec.whatwg.org/multipage/semantics.html
https://www.w3.org/TR/html5/Overview.html#contents
https://www.w3.org/wiki/HTML_structural_elements
http://www.w3schools.com/html/html5_semantic_elements.asp
http://www.ibm.com/developerworks/library/wa-html5structuraltags/
http://www.dwuser.com/education/content/an-introduction-to-the-html5-structural-elements/

Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016

70-480 HTML5 Parte I

Pesquisas e Referncias
Sobre jQuery, jQueryUI, Bootstrap, Foundation, etc.
http://jqueryui.com/
http://getbootstrap.com/
https://jquery.org/
http://foundation.zurb.com/
http://purecss.io/
http://materializecss.com/
Sobre Compatibilidade de Navegadores
http://html5test.com
http://www.findmebyip.com/litmus
https://en.wikipedia.org/wiki/HTML5_Shiv
https://css-tricks.com/html5-innershiv/
https://github.com/aFarkas/html5shiv/
http://www.shiva-engine.com/shiva-html5-javascript-interaction/
http://desenvolvimentoparaweb.com/css/modernizr-detectar-features-html5-css3/
http://www.maujor.com/tutorial/css3-html5-modernizr.php
http://tableless.com.br/utilizando-a-biblioteca-modernizr/
https://modernizr.com/
Estudo para a certificao MS 70-480 Parte 1 http://www.codigoharmonico.blog.br - Gustavo Adolfo - 2016