Richard Duchatsch Johansen
Front-end Developer, expert HTML5/CSS3, SEO, Validation Cross-browser, Semantic Web, Open Web, Responsive Design and Accessibility Specialties: Certification of HTML5 and CSS3 by W3C.br; Visie the Advanced CSS / Tableless;
WORKSHOP UniFAP
Zero to Hero
Uma apanhado de dicas para começar do jeito certo!
@ridjohansen
Richard Duchatsch Johansen
Pós em Gestão de TI @ UniAnhanguera
Graduado em Com. Digital @ UNIP
Membro do GT de Acessibilidade @ W3C.br
Fundador/Curador @ FrontInterior
Fundador/Curador @ FEMUG-RJ / Rio.CSS
- Introdução - AI, Usabilidade e UX
- Introdução a CSS / HTML
- Frameworks para Frontend + Snippets
- Design Responsivo
SUMÁRIO
Conteúdo Programático
AI + Wireframes
Arquitetura de informação
O que é Arquitetura da Informação?
O que é Wireframe?
UX + UI
- Experiência do usuário
- Interface de usuário
UX - Experiência do Usuário
UX - Boas Práticas
UI - Interface do Usuário
UI - Boas Práticas
HTML + CSS
- Hypertext Markup Language
- Cascading Style Sheets
HTML - HyperText Markup Language
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets
CSS - Extra
CSS - Grid Layout
ACESSEM:
https://www.origamid.com/projetos/css-grid-layout-guia-completo/ https://gridbyexample.com/
CSS - Extra
Bora
Praticar?
http://www.csszengarden.com/
FRAMEWORKS
- BOOTSTRAP
- SNIPPETS
Frameworks
- São muito estáveis falando em termos de cross-browser
- Design responsivo com mais facilidade *
- Fazer o código ficar mais documentável
- Mais fácil de trabalhar com equipes maiores, devido às
documentações de cada framework
- Curva de aprendizado rápido **
Bootstrap 4
ACESSEM:
https://getbootstrap.com/
SNIPPETS
ACESSEM:
http://bootsnipp.com/
http://bootply.com/
https://bootdey.com/bootstrap-snippets/
Bora
Praticar?
https://jsfiddle.net/boilerplate/bootstrap/
RWD
DESIGN RESPONSIVO
ONDE?
- Dispositivos em geral
- Displays com resoluções e/ou densidades diferentes
POR QUE?
-
Crescimento do uso de dispositiovos móveis
- Acesso à informação mais facilitado
- Crescimento da internet
- Site funcionando como aplicação
- Navegação mais amigável
Media Queries? O que é isto?
MEDIA QUERIES? O QUE É ISTO?
-
Maximum viewport width of 480px
@media screen and (max‐width:480px) { ... }
-
Landscape orientation
@media all and (orientation:landscape) { ... }
-
Widescreen displays (16:9)
@media screen and (device‐aspect‐ratio: 16/9) {...}
-
Display with minimum width of 400px and maximum of 700px
@media (min‐width: 400px) and (max‐width: 700px) {...}
Quer ler mais sobre?
Quer ver exemplos funcionais?
Obrigado!
(facebook | insta | linkedin)
@ridjohansen
Workshop UniFAP | Zero to Hero
By Richard Duchatsch Johansen
Workshop UniFAP | Zero to Hero
Um apanhado de dicas para começar do jeito certo!
