HTML

1 [email protected] danielrohers Daniel Röhers Moura Software Engineer @ HandsOn.TV

HTML o que? HTML5 é a nova versão do HTML,
simples assim! :) Foi lançada em 2008 e traz consigo importantes mudanças quanto ao papel do HTML na Web, através de novas funcionalidades como semântica, acessibilidade e diversas API’s. 2015 reconhecido pela W3C 2

Por que usar? 3

4 Semântica

5 Exempliﬁcando…

6 Semântica, só para isso?

7 45.623.910 pessoas </censo-2010>

8 Não faça: <h1 role="button">heading button</h1> Faça: <h1> <button>heading button</button>
</h1>

9 Não faça: <a href="#” class="btn">heading button</a> Faça: <button>heading button</button>

11 Performance

12 SEO Search Engine Optimization

13 API's Conectividade • Web Sockets • Server-sent events •
WebRTC Ofﬂine e Armazenamento Validação de formulários Geolocalização Áudio Vídeo Drag and Drop Gráﬁcos e efeitos 3D e muito, muito mais…

Algumas tags <!DOCTYPE html> – Específica que iremos utilizar HTML5
ao browser <header> – Serve para marcar o cabeçalho do documento ou seção. <nav> – Como o nome já sugere, essa tag é utilizada para navegação, ou seja, nela irá conter links de navegação externa ou interna a página. <main> – Essa tag pode ser usada para identificar o conteúdo principal da página. Por exemplo, o conteúdo de um artigo pode estar dentro da tag main. <section> – A section serve para separar as seções genésicas de uma página e para identificar abordagens diferentes de uma página. <article> – Usado para representar conteúdos independentes de uma página. Como um post de um blog. 15

<aside> – Essa tag é usada para a identificação de
um conteúdo secundário que não seja parte da seção principal. Ela é bastante usada como uma sidebar, alocadas em uma coluna esquerda ou direita de uma página. <footer> – Usada para identificar o rodapé da página ou seção. <audio> – É uma maneira simples e eficiente de inserirmos um arquivo de áudio na página. <video> – É usada para inserirmos arquivos de vídeo na página. Existem muitas atributos que complementam essa tag, como inserir legenda por exemplo. 16

Estruturação básica 17

Novos Input Types • color <input type="color" name="favcolor"> • date
<input type="date" name="bday"> • datetime <input type="datetime" name="bdaytime"> • email <input type="email" name="email"> • month <input type="month" name="bdaymonth"> • number <input type="number" name="quantity" min="1" max="5"> • range <input type="range" name="points" min="1" max="10"> • time <input type="time" name="usr_time"> • url <input type="url" name="homepage"> • week <input type="week" name="week_year"> 18

Bye :) <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame>
<frameset> <noframes> <strike> <tt> 19

20 Mais algumas mudanças…

21 Doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML <!DOCTYPE html> HTML5

22 Language < html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" > HTML <html
lang="en"> HTML5

23 Character Encoding <meta http-equiv="Content-Type" content=“text/ html;charset=UTF-8"> HTML <meta charset="UTF-8">
HTML5

24 CSS <link rel="stylesheet" type="text/css" href="theme.css"> HTML <link rel="stylesheet" href="theme.css">
HTML5

25 JavaScript <script type="text/javascript" src="javascript.js"> HTML <script src="javascript.js"> HTML5

26 Alguns exemplos…

< audio > 27

< video > 28

< svg > 29

geolocation 30

getUserMedia 31

getUserMedia 32

http://goo.gl/vc4d9W 33

34 https://goo.gl/h4aLfR

35 http://goo.gl/41pAgH

36 https://goo.gl/sthD9B

http://mobilehtml5.org 38

http://diveintohtml5.com.br 39

http://html5test.com 40

http://goo.gl/wl3OBo 41

http://www.html5rocks.com 42

43 https://github.com/danielrohers/faccat-examples

Obrigado ;D 44

HTML

HTML

More Decks by Daniel Röhers Moura

Featured

Transcript