SlideShare uma empresa Scribd logo
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
prof. Gustavo Zimmermann | contato@swag.ag
Atributos <iframe> </iframe>
align=“center”
frameborder=“3”
longdesc=“texto.txt”
marginheight=“0”
marginwidth=“0”
scrolling=“no”
HTML5 – Multimídia 1
iframes
CSS
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
iframes
Atributos <iframe> </iframe>
name + target
Propriedades iframe:
http://www.w3schools.com/tags/tag_iframe.asp
prof. Gustavo Zimmermann | contato@swag.ag
Imagens
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Imagens
Formatos para Web
JPG, GIF ou PNG?
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Imagens
JPG:
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Imagens
GIF:
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Imagens
PNG:
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Imagens
Formatos para Web
PhotoShop:
prof. Gustavo Zimmermann | contato@swag.ag
tooltips: alt e title
<img src=“imagem.jpg” alt=“Texto
Alternativo” title=“Texto de Título” />
HTML5 – Multimídia 1
Imagens
Atributos <img />
prof. Gustavo Zimmermann | contato@swag.ag
alt
HTML5 – Multimídia 1
Imagens
Atributos <img />
prof. Gustavo Zimmermann | contato@swag.ag
Atributos <img />
title
HTML5 – Multimídia 1
Imagens
prof. Gustavo Zimmermann | contato@swag.ag
Atributos <img />
width e height
HTML5 – Multimídia 1
Imagens
prof. Gustavo Zimmermann | contato@swag.ag
width e height
HTML5 – Multimídia 1
Imagens
Atributos <img />
prof. Gustavo Zimmermann | contato@swag.ag
width e height » HTML4 vs. HTML5
HTML5 – Multimídia 1
Imagens
Atributos <img />
prof. Gustavo Zimmermann | contato@swag.ag
hspace=“20”
vspace=“5”
align=“”
longdesc=“texto.txt”
name=“pinguim”
border=“0”
HTML5 – Multimídia 1
Imagens
Atributos <img />
CSS
prof. Gustavo Zimmermann | contato@swag.ag
longdesc=“texto.txt”
<figure><figcaption><img /></figcaption></figure>
HTML5 – Multimídia 1
Imagens
figure
Atributos <img />
prof. Gustavo Zimmermann | contato@swag.ag
<figure><figcaption><img /></figcaption></figure>
HTML5 – Multimídia 1
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 />
prof. Gustavo Zimmermann | contato@swag.ag
Mapa de
Imagens
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
<img src=“imagem.jpg” usemap=“#meumapa” />
<map name=“meumapa”></map>
<map></map>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
<area />
<area /> shape
• rect
• circle
• poly
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
<area shape=“rect” coords=“x1,y1,x2,y2”/>
(x1,y1)
(x2,y2)
rect
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Mapas de Imagens
(25,2)
(52,150)
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
<area href=“#” />
<area shape=“rect” coords=“25,2,52,150”
href=“teclado.html”/>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
<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>
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
<area shape=“circle” coords=“x,y,r”/>
circlePonto Central (x,y)
Raio (r)
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Mapas de Imagens
(206,250)
105
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
<area shape=“poly” coords=“x1,y1,x2,y2,...”/>
poly
(x1,y1)
(x3,y3) (x2,y2)
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Mapas de Imagens
(524,111)
(840, 180)
(1140, 107)
(1105, 420)
(1340, 655)
(955, 695)
(760, 970)
(634, 655)
(296, 577)
(595, 405)
prof. Gustavo Zimmermann | contato@swag.ag
Revisão
Ortográfica e
Gramatical
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
Revisão Ortográfica e Gramatical
spellcheck
spellcheck spellcheck="true"
spellcheck="false"
prof. Gustavo Zimmermann | contato@swag.ag
HTML5 – Multimídia 1
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
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <audio></audio>
<source />
<audio controls=“true” >
<source src=“musica.mp3” type=“audio/mpeg” />
</audio>
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <audio></audio>
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
testes
Cross-Browser
prof. Gustavo Zimmermann | contato@gust4vo.com
BROWSER MP3 WAV OGG
YES YES YES
YES NO NO
NO
YES YES
YES YES NO
NO YES YES
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <audio></audio>
Formatos
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <audio></audio>
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>
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Conversor Online de
Áudio
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <audio></audio>
Atributos
autoplay:
controls:
loop:
muted:
preload:
auto:
metadata:
none:
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <video></video>
<source />
<video width=“360” height=“240” controls=“true” >
<source src=“video.mp4” type=“video/mp4 />
</ video>
prof. Gustavo Zimmermann | contato@gust4vo.com
BROWSER MP4 WEBM OGG
YES YES YES
YES NO NO
YES YES YES
YES NO NO
NO YES YES
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Formatos
Definições <video></video>
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
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>
Definições <video></video>
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Conversor Online de
Vídeo
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <video></video>
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>
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Codecs
source
codecs
type='MIME-type do container; codecs="codec de vídeo, codec de áudio"'
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
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"'>
prof. Gustavo Zimmermann | contato@gust4vo.com
Scalable Vectorial Graphics
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
SVG
Vetor vs. Bitmap
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
SVG
Definições <svg></svg>
width e height
<svg width=“400” height=“400”></svg>
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
SVG
Definições <svg></svg>
<rect />
<rect x="10" y="10" width="150" height="50"
stroke="#000000" stroke-width="5" fill="#FF0000" />
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
SVG
Definições <svg></svg>
<circle />
<circle cx="70" cy="240" r="60" stroke="#00FF00"
stroke-width="5" fill="#FFFFFF" />
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
SVG
Definições <svg></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" />
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
SVG
Exemplo
<svg width="400" height="400">
<!-- Circulo Amarelo -->
<circle cx="200" cy="200" r="200" fill="yellow" />
<!-- Sorriso -->
<circle cx="200" cy="220" r="140" fill="#000" />
<!-- "Corte" -->
<circle cx="200" cy="200" r="145" fill="yellow" />
<!-- Olho esquerdo -->
<circle cx="130" cy="145" r="25" fill="#000" />
<!-- Olho Direito -->
<rect x="230" y="140" width="65" height="20" fill="#000" />
</svg>
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 – Multimídia 2
SVG
Arquivo SVG
<img src=“imagem.svg” />
Artigo SVG:
<fim />
Gustavo Zimmermann
e-mail: contato@gust4vo.com

Mais conteúdo relacionado

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

fdocuments.ec_html5-basico-multimidia-1-aula-3.pdf
fdocuments.ec_html5-basico-multimidia-1-aula-3.pdffdocuments.ec_html5-basico-multimidia-1-aula-3.pdf
fdocuments.ec_html5-basico-multimidia-1-aula-3.pdf
ClaudemirBorges3
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
Daniel Arndt Alves
 
API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013
Davidson Alencar
 
HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?
Fábio Flatschart
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
Ricardo Pereira Rodrigues
 
Front-end ENGINEER
Front-end ENGINEERFront-end ENGINEER
Front-end ENGINEER
Ivan Banov
 
Aula3 HTML 5 - Multimídia
Aula3 HTML 5 - MultimídiaAula3 HTML 5 - Multimídia
Aula3 HTML 5 - Multimídia
Dorival Silva
 
JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)
Gustavo Zimmermann
 
Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3
brenod123
 
Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9
Rodrigo Kono
 
Chromecast na Qcon RJ
Chromecast na Qcon RJChromecast na Qcon RJ
Chromecast na Qcon RJ
Ivan de Aguirre
 
The Flash no front-end
The Flash no front-endThe Flash no front-end
The Flash no front-end
Cezar Luiz
 
MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões Web
Rogério Moraes de Carvalho
 
Html 5
Html 5Html 5
Html 5
Daniel Lima
 
HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosHTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizados
Caio Gomes
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Davidson Fellipe
 
TDC2016POA | Trilha Web - Front-end that scales
TDC2016POA | Trilha Web - Front-end that scalesTDC2016POA | Trilha Web - Front-end that scales
TDC2016POA | Trilha Web - Front-end that scales
tdc-globalcode
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
CELULA CURSOS
 
Minicurso Iniciando no Mundo Front-End - Dia 05 - SASPI {5}
Minicurso Iniciando no Mundo Front-End - Dia 05 - SASPI {5}Minicurso Iniciando no Mundo Front-End - Dia 05 - SASPI {5}
Minicurso Iniciando no Mundo Front-End - Dia 05 - SASPI {5}
Matheus Thomaz
 
PHP Tools for Fast coding
PHP Tools for Fast codingPHP Tools for Fast coding
PHP Tools for Fast coding
Daniel Archer Marques Cramer
 

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

fdocuments.ec_html5-basico-multimidia-1-aula-3.pdf
fdocuments.ec_html5-basico-multimidia-1-aula-3.pdffdocuments.ec_html5-basico-multimidia-1-aula-3.pdf
fdocuments.ec_html5-basico-multimidia-1-aula-3.pdf
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013
 
HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
 
Front-end ENGINEER
Front-end ENGINEERFront-end ENGINEER
Front-end ENGINEER
 
Aula3 HTML 5 - Multimídia
Aula3 HTML 5 - MultimídiaAula3 HTML 5 - Multimídia
Aula3 HTML 5 - Multimídia
 
JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)
 
Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3
 
Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9
 
Chromecast na Qcon RJ
Chromecast na Qcon RJChromecast na Qcon RJ
Chromecast na Qcon RJ
 
The Flash no front-end
The Flash no front-endThe Flash no front-end
The Flash no front-end
 
MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões Web
 
Html 5
Html 5Html 5
Html 5
 
HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosHTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizados
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
 
TDC2016POA | Trilha Web - Front-end that scales
TDC2016POA | Trilha Web - Front-end that scalesTDC2016POA | Trilha Web - Front-end that scales
TDC2016POA | Trilha Web - Front-end that scales
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
 
Minicurso Iniciando no Mundo Front-End - Dia 05 - SASPI {5}
Minicurso Iniciando no Mundo Front-End - Dia 05 - SASPI {5}Minicurso Iniciando no Mundo Front-End - Dia 05 - SASPI {5}
Minicurso Iniciando no Mundo Front-End - Dia 05 - SASPI {5}
 
PHP Tools for Fast coding
PHP Tools for Fast codingPHP Tools for Fast coding
PHP Tools for Fast coding
 

Mais de Gustavo Zimmermann

Aula 13 - Livros Proféticos
Aula 13 - Livros ProféticosAula 13 - Livros Proféticos
Aula 13 - Livros Proféticos
Gustavo Zimmermann
 
Aula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-AvaliaçãoAula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-Avaliação
Gustavo Zimmermann
 
Aula 11 - Livros Poéticos
Aula 11 - Livros PoéticosAula 11 - Livros Poéticos
Aula 11 - Livros Poéticos
Gustavo Zimmermann
 
Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)
Gustavo Zimmermann
 
Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)
Gustavo Zimmermann
 
Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)
Gustavo Zimmermann
 
Aula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-AvaliaçãoAula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-Avaliação
Gustavo Zimmermann
 
Aula 6 - Deuteronômio
Aula 6 - DeuteronômioAula 6 - Deuteronômio
Aula 6 - Deuteronômio
Gustavo Zimmermann
 
Aula 5 - Números
Aula 5 - NúmerosAula 5 - Números
Aula 5 - Números
Gustavo Zimmermann
 
Aula 1 - História da Bíblia
Aula 1 - História da BíbliaAula 1 - História da Bíblia
Aula 1 - História da Bíblia
Gustavo Zimmermann
 
Aula 3 - Êxodo
Aula 3 - ÊxodoAula 3 - Êxodo
Aula 3 - Êxodo
Gustavo Zimmermann
 
Aula 4 - Levíticos
Aula 4 - LevíticosAula 4 - Levíticos
Aula 4 - Levíticos
Gustavo Zimmermann
 
Aula 2 - Gênesis
Aula 2 - GênesisAula 2 - Gênesis
Aula 2 - Gênesis
Gustavo Zimmermann
 
Aula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas MetodologiasAula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas Metodologias
Gustavo Zimmermann
 
Aula 2 - Teologia Natural
Aula 2 - Teologia NaturalAula 2 - Teologia Natural
Aula 2 - Teologia Natural
Gustavo Zimmermann
 
Conciência Política
Conciência PolíticaConciência Política
Conciência Política
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Gustavo Zimmermann
 

Mais de Gustavo Zimmermann (20)

Aula 13 - Livros Proféticos
Aula 13 - Livros ProféticosAula 13 - Livros Proféticos
Aula 13 - Livros Proféticos
 
Aula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-AvaliaçãoAula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-Avaliação
 
Aula 11 - Livros Poéticos
Aula 11 - Livros PoéticosAula 11 - Livros Poéticos
Aula 11 - Livros Poéticos
 
Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)
 
Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)
 
Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)
 
Aula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-AvaliaçãoAula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-Avaliação
 
Aula 6 - Deuteronômio
Aula 6 - DeuteronômioAula 6 - Deuteronômio
Aula 6 - Deuteronômio
 
Aula 5 - Números
Aula 5 - NúmerosAula 5 - Números
Aula 5 - Números
 
Aula 1 - História da Bíblia
Aula 1 - História da BíbliaAula 1 - História da Bíblia
Aula 1 - História da Bíblia
 
Aula 3 - Êxodo
Aula 3 - ÊxodoAula 3 - Êxodo
Aula 3 - Êxodo
 
Aula 4 - Levíticos
Aula 4 - LevíticosAula 4 - Levíticos
Aula 4 - Levíticos
 
Aula 2 - Gênesis
Aula 2 - GênesisAula 2 - Gênesis
Aula 2 - Gênesis
 
Aula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas MetodologiasAula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas Metodologias
 
Aula 2 - Teologia Natural
Aula 2 - Teologia NaturalAula 2 - Teologia Natural
Aula 2 - Teologia Natural
 
Conciência Política
Conciência PolíticaConciência Política
Conciência Política
 
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
 
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 

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

  • 1. Aula 6: HTML 5 (part. 2) prof. Gustavo Zimmermann Curso: Introdução ao Web Design E-mail: contato@gust4vo.com
  • 2. prof. Gustavo Zimmermann | contato@swag.ag iframes
  • 3. prof. Gustavo Zimmermann | contato@swag.ag Atributos <iframe> </iframe> align=“center” frameborder=“3” longdesc=“texto.txt” marginheight=“0” marginwidth=“0” scrolling=“no” HTML5 – Multimídia 1 iframes CSS
  • 4. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 iframes Atributos <iframe> </iframe> name + target Propriedades iframe: http://www.w3schools.com/tags/tag_iframe.asp
  • 5. prof. Gustavo Zimmermann | contato@swag.ag Imagens
  • 6. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens Formatos para Web JPG, GIF ou PNG?
  • 7. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens JPG:
  • 8. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens GIF:
  • 9. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens PNG:
  • 10. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens Formatos para Web PhotoShop:
  • 11. prof. Gustavo Zimmermann | contato@swag.ag tooltips: alt e title <img src=“imagem.jpg” alt=“Texto Alternativo” title=“Texto de Título” /> HTML5 – Multimídia 1 Imagens Atributos <img />
  • 12. prof. Gustavo Zimmermann | contato@swag.ag alt HTML5 – Multimídia 1 Imagens Atributos <img />
  • 13. prof. Gustavo Zimmermann | contato@swag.ag Atributos <img /> title HTML5 – Multimídia 1 Imagens
  • 14. prof. Gustavo Zimmermann | contato@swag.ag Atributos <img /> width e height HTML5 – Multimídia 1 Imagens
  • 15. prof. Gustavo Zimmermann | contato@swag.ag width e height HTML5 – Multimídia 1 Imagens Atributos <img />
  • 16. prof. Gustavo Zimmermann | contato@swag.ag width e height » HTML4 vs. HTML5 HTML5 – Multimídia 1 Imagens Atributos <img />
  • 17. prof. Gustavo Zimmermann | contato@swag.ag hspace=“20” vspace=“5” align=“” longdesc=“texto.txt” name=“pinguim” border=“0” HTML5 – Multimídia 1 Imagens Atributos <img /> CSS
  • 18. prof. Gustavo Zimmermann | contato@swag.ag longdesc=“texto.txt” <figure><figcaption><img /></figcaption></figure> HTML5 – Multimídia 1 Imagens figure Atributos <img />
  • 19. prof. Gustavo Zimmermann | contato@swag.ag <figure><figcaption><img /></figcaption></figure> HTML5 – Multimídia 1 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 />
  • 20. prof. Gustavo Zimmermann | contato@swag.ag Mapa de Imagens
  • 21. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map>
  • 22. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <img src=“imagem.jpg” usemap=“#meumapa” /> <map name=“meumapa”></map> <map></map>
  • 23. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <area /> <area /> shape • rect • circle • poly
  • 24. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <area shape=“rect” coords=“x1,y1,x2,y2”/> (x1,y1) (x2,y2) rect
  • 25. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens (25,2) (52,150)
  • 26. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <area href=“#” /> <area shape=“rect” coords=“25,2,52,150” href=“teclado.html”/>
  • 27. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <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>
  • 28. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <area shape=“circle” coords=“x,y,r”/> circlePonto Central (x,y) Raio (r)
  • 29. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens (206,250) 105
  • 30. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <area shape=“poly” coords=“x1,y1,x2,y2,...”/> poly (x1,y1) (x3,y3) (x2,y2)
  • 31. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens (524,111) (840, 180) (1140, 107) (1105, 420) (1340, 655) (955, 695) (760, 970) (634, 655) (296, 577) (595, 405)
  • 32. prof. Gustavo Zimmermann | contato@swag.ag Revisão Ortográfica e Gramatical
  • 33. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Revisão Ortográfica e Gramatical spellcheck spellcheck spellcheck="true" spellcheck="false"
  • 34. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Revisão Ortográfica e Gramatical • • <textarea> • contenteditable="true spellcheck <p contenteditable="true" spellcheck="true"> Este é um parágrafo! </p>
  • 35. prof. Gustavo Zimmermann | contato@gust4vo.com Elementos Áudio e Vídeo e Codecs
  • 36. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs Definições <audio></audio> <source /> <audio controls=“true” > <source src=“musica.mp3” type=“audio/mpeg” /> </audio>
  • 37. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs Definições <audio></audio>
  • 38. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs testes Cross-Browser
  • 39. prof. Gustavo Zimmermann | contato@gust4vo.com BROWSER MP3 WAV OGG YES YES YES YES NO NO NO YES YES YES YES NO NO YES YES HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs Definições <audio></audio> Formatos
  • 40. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs Definições <audio></audio> 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>
  • 41. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs Conversor Online de Áudio
  • 42. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs Definições <audio></audio> Atributos autoplay: controls: loop: muted: preload: auto: metadata: none:
  • 43. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs Definições <video></video> <source /> <video width=“360” height=“240” controls=“true” > <source src=“video.mp4” type=“video/mp4 /> </ video>
  • 44. prof. Gustavo Zimmermann | contato@gust4vo.com BROWSER MP4 WEBM OGG YES YES YES YES NO NO YES YES YES YES NO NO NO YES YES HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs Formatos Definições <video></video>
  • 45. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs 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> Definições <video></video>
  • 46. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs Conversor Online de Vídeo
  • 47. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs Definições <video></video> 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>
  • 48. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs Codecs source codecs type='MIME-type do container; codecs="codec de vídeo, codec de áudio"'
  • 49. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 Elementos Áudio e Vídeo e Codecs 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"'>
  • 50. prof. Gustavo Zimmermann | contato@gust4vo.com Scalable Vectorial Graphics
  • 51. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 SVG Vetor vs. Bitmap
  • 52. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 SVG Definições <svg></svg> width e height <svg width=“400” height=“400”></svg>
  • 53. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 SVG Definições <svg></svg> <rect /> <rect x="10" y="10" width="150" height="50" stroke="#000000" stroke-width="5" fill="#FF0000" />
  • 54. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 SVG Definições <svg></svg> <circle /> <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" />
  • 55. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 SVG Definições <svg></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" />
  • 56. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 SVG Exemplo <svg width="400" height="400"> <!-- Circulo Amarelo --> <circle cx="200" cy="200" r="200" fill="yellow" /> <!-- Sorriso --> <circle cx="200" cy="220" r="140" fill="#000" /> <!-- "Corte" --> <circle cx="200" cy="200" r="145" fill="yellow" /> <!-- Olho esquerdo --> <circle cx="130" cy="145" r="25" fill="#000" /> <!-- Olho Direito --> <rect x="230" y="140" width="65" height="20" fill="#000" /> </svg>
  • 57. prof. Gustavo Zimmermann | contato@gust4vo.com HTML5 – Multimídia 2 SVG Arquivo SVG <img src=“imagem.svg” /> Artigo SVG:
  • 58. <fim /> Gustavo Zimmermann e-mail: contato@gust4vo.com