Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)

Aula 6:
HTML 5 (part. 2)
prof. Gustavo Zimmermann
Curso: Introdução ao Web Design E-mail: contato@gust4vo.com

prof. Gustavo Zimmermann | contato@swag.ag
iframes

Atributos <iframe> </iframe>
align=“center”
frameborder=“3”
longdesc=“texto.txt”
marginheight=“0”
marginwidth=“0”
scrolling=“no”
HTML5 – Multimídia 1
iframes
CSS

iframes
Atributos <iframe> </iframe>
name + target
Propriedades iframe:
http://www.w3schools.com/tags/tag_iframe.asp

Imagens

Imagens
Formatos para Web
JPG, GIF ou PNG?

Imagens
JPG:

Imagens
GIF:

Imagens
PNG:

Imagens
Formatos para Web
PhotoShop:

tooltips: alt e title
<img src=“imagem.jpg” alt=“Texto
Alternativo” title=“Texto de Título” />
Imagens
Atributos <img />

alt
Imagens
Atributos <img />

Atributos <img />
title
Imagens

Atributos <img />
width e height
Imagens

width e height
Imagens
Atributos <img />

width e height » HTML4 vs. HTML5
Imagens
Atributos <img />

hspace=“20”
vspace=“5”
align=“”
name=“pinguim”
border=“0”
Imagens
Atributos <img />
CSS

<figure><figcaption><img /></figcaption></figure>
Imagens
figure
Atributos <img />

<figure><figcaption><img /></figcaption></figure>
Imagens
<figure>
<img src=“imagem.jpg” />
<figcaption>
<h1>Novas TAGs para Imagem</h1>
<p>
O HTML5 trás grandes novidades para a TAG
de Execução <b><i>IMG</i></b>
</p>
</figcaption>
</figure>
Atributos <img />

Mapa de
Imagens

Mapas de Imagens
Definições <map></map>

Mapas de Imagens
<img src=“imagem.jpg” usemap=“#meumapa” />
<map name=“meumapa”></map>
<map></map>

Mapas de Imagens
<area />
<area /> shape
• rect
• circle
• poly

Mapas de Imagens
<area shape=“rect” coords=“x1,y1,x2,y2”/>
(x1,y1)
(x2,y2)
rect

Mapas de Imagens
(25,2)
(52,150)

Mapas de Imagens
<area href=“#” />
<area shape=“rect” coords=“25,2,52,150”
href=“teclado.html”/>

Mapas de Imagens
<area target=“???” />
<img src=“teclado.jpg” usemap=“#meuteclado” />
<map name=“meuteclado ”>
<area shape=“rect” coords=“25,2,52,150”
href=“teclado.html#tecla_do” target=“janelinha” />
</map>
<iframe src=“tecla_do.html” name=“janelinha”></iframe>

Mapas de Imagens
<area shape=“circle” coords=“x,y,r”/>
circlePonto Central (x,y)
Raio (r)

Mapas de Imagens
(206,250)
105

Mapas de Imagens
<area shape=“poly” coords=“x1,y1,x2,y2,...”/>
poly
(x1,y1)
(x3,y3) (x2,y2)

Mapas de Imagens
(524,111)
(840, 180)
(1140, 107)
(1105, 420)
(1340, 655)
(955, 695)
(760, 970)
(634, 655)
(296, 577)
(595, 405)

Revisão
Ortográfica e
Gramatical

Revisão Ortográfica e Gramatical
spellcheck
spellcheck spellcheck="true"
spellcheck="false"

Revisão Ortográfica e Gramatical
•
• <textarea>
• contenteditable="true
spellcheck
<p contenteditable="true" spellcheck="true">
Este é um parágrafo!
</p>

prof. Gustavo Zimmermann | contato@gust4vo.com
Elementos
Áudio e Vídeo
e Codecs

Elementos Áudio e Vídeo e Codecs
Definições <audio></audio>
<source />
<audio controls=“true” >
<source src=“musica.mp3” type=“audio/mpeg” />
</audio>

testes
Cross-Browser

BROWSER MP3 WAV OGG
YES YES YES
YES NO NO
NO
YES YES
YES YES NO
NO YES YES
Formatos

format mime-type
MP3:
Ogg:
Wav:
<audio controls=“true” >
<source src=“musica.mp3” type=“audio/mpeg” />
<source src=“musica.ogg” type=“audio/ogg” />
<source src=“musica.wav” type=“audio/wav” />
Desculpe, mas o seu nevegador não suporta Audio em HTML5. Atualize o seu navegador.
</audio>

Conversor Online de
Áudio

Atributos
autoplay:
controls:
loop:
muted:
preload:
auto:
metadata:
none:

Definições <video></video>
<source />
<video width=“360” height=“240” controls=“true” >
<source src=“video.mp4” type=“video/mp4 />
</ video>

BROWSER MP4 WEBM OGG
YES YES YES
YES NO NO
YES YES YES
YES NO NO
NO YES YES
Formatos

format mime-type
MP4:
WebM:
Ogg:
<video controls=“true” >
<source src=“filme.mp4” type=“video/mp4/>
<source src=“filme.webm” type=“video/webm/>
<source src=“filme.ogg” type=“video/ogg/>
Desculpe, mas o seu nevegador não suporta Vídeo em HTML5. Atualize o seu navegador.
</video>

Conversor Online de
Vídeo

track
<video width="320" height="240" controls=“true”>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" lab
el="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" lab
el="Norwegian">
</video>

Codecs
source
codecs
type='MIME-type do container; codecs="codec de vídeo, codec de áudio"'

Codecs
source
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240,
mp4a.40.2"'>

Scalable Vectorial Graphics

SVG
Vetor vs. Bitmap

SVG
Definições <svg></svg>
width e height
<svg width=“400” height=“400”></svg>

SVG
<rect />
<rect x="10" y="10" width="150" height="50"
stroke="#000000" stroke-width="5" fill="#FF0000" />

SVG
<circle />
<circle cx="70" cy="240" r="60" stroke="#00FF00"
stroke-width="5" fill="#FFFFFF" />

SVG
<polygon />
<polygon fill="red" stroke="blue" stroke-width="10"
points="250,75 279,161 369,161 297,215
323,301 250,250 177,301 203,215
131,161 221,161" />

SVG
Exemplo
<svg width="400" height="400">

<circle cx="200" cy="200" r="200" fill="yellow" />

<circle cx="200" cy="220" r="140" fill="#000" />

<circle cx="200" cy="200" r="145" fill="yellow" />

<circle cx="130" cy="145" r="25" fill="#000" />

<rect x="230" y="140" width="65" height="20" fill="#000" />
</svg>

SVG
Arquivo SVG
<img src=“imagem.svg” />
Artigo SVG:

<fim />
Gustavo Zimmermann
e-mail: contato@gust4vo.com

Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)

Semelhante a Introdução ao Web Design: Aula 6 - HTML 5 (part. 2) (20)

Mais de Gustavo Zimmermann

Mais de Gustavo Zimmermann (20)

Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)