web design responsivo
DESCRIPTION
Base da apresentação sobre Web Design Responsivo para as turmas de primeiro e terceiro ano do curso técnico de Web Design da escola SESI/SENAI. Reprodução permitida,TRANSCRIPT
![Page 1: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/1.jpg)
< Responsive />
Leonardo Victor – DR/AL
1
![Page 2: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/2.jpg)
< responsive />Leonardo Victor – DR/AL
2
Quem Sou
Leonardo Victor – 17 anosEstudante do terceiro ano do ensino médio;Membro da delegação Alagoana da Olimpíada do Conhecimento 2014, na área de Web Design;Desenvolvedor Web no estúdio Toró;
@LeonardoVFFfb.com/[email protected]
![Page 3: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/3.jpg)
< responsive />Leonardo Victor – DR/AL
3
O que é?
![Page 4: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/4.jpg)
< responsive />Leonardo Victor – DR/AL
4
Acessibilidade e Problemas
1. DETECTAR O DISPOSITIVO;2. NOVOS DISPOSITIVOS;
![Page 5: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/5.jpg)
< responsive />Leonardo Victor – DR/AL
5
Introdução
Design Responsivo1. Planejamento2. Desenvolvimento
![Page 6: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/6.jpg)
< responsive />Leonardo Victor – DR/AL
6
Planejamento
LAYOUT RESPONSIVO (Tamanho da tela):1. Ótima experiência de visualização;2. Fácil leitura e navegação;3. Mínimo de alteração.
![Page 7: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/7.jpg)
< responsive />Leonardo Victor – DR/AL
7
Características
1. Visual;2. Navegação:
1. Mouse;2. Toque;3. Teclas de Atalhos;
3. Usabilidade;
![Page 8: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/8.jpg)
< responsive />Leonardo Victor – DR/AL
8
Layout Fluido
![Page 9: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/9.jpg)
< responsive />Leonardo Victor – DR/AL
9
Layout Responsivo
![Page 10: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/10.jpg)
< responsive />Leonardo Victor – DR/AL
10
Exemplo
![Page 11: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/11.jpg)
< responsive />Leonardo Victor – DR/AL
11
Desenvolvimento
1. ECONOMIA:1. Reaproveitamento;2. Tempo;
2. MEDIA QUERIES:1. Imagens;2. Tamanhos;
![Page 12: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/12.jpg)
< responsive />Leonardo Victor – DR/AL
12
Media Queries e Design Responsivo
![Page 13: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/13.jpg)
< responsive />Leonardo Victor – DR/AL
13
Resoluções Base
![Page 14: Web Design Responsivo](https://reader033.vdocuments.pub/reader033/viewer/2022061213/547c5ad1b37959532b8b4fe6/html5/thumbnails/14.jpg)
< Obrigado (; />Leonardo Victor – DR/AL
Início
14