1.
Curso: Introdução ao Web Design E-mail: contato@gust4vo.com
Aula 2:
IHC/UX Design
prof. Gustavo Zimmermann

2.
WEB
STANDARDS
os padrões web

3.
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
O que são?
Os Padrões Web são recomendações do W3C (World Wide Web
Consortium), as quais são destinadas a orientar os
desenvolvedores para o uso de boas práticas que tornam a web
acessível para todos. Através desses padrões, o W3C tem como
objetivo criar uma plataforma aberta da Web, para o
desenvolvimento de aplicações que possuam um potencial sem
precedentes, permitindo assim que os desenvolvedores criem
experiências ricas, alimentadas por um vasto armazenamento de
dados, os quais estão disponíveis para qualquer dispositivo.

4.
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
W3C
W3C, liderada pelo inventor da Web Tim Berners-Lee e o CEO Jeffrey Jaffe, é
uma comunidade internacional onde os membros organizacionais, uma
equipe em tempo integral e o público (desenvolvedores, por exemplo),
trabalham juntos para desenvolver os padrões para a criação e a
interpretação dos conteúdos para a Web.
Tim Berners-Lee Jeffrey Jaffe

5.
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Divisões do HTML 5
Semântico Offline & Armazenamento Acesso ao Dispositivo Conectividade
Multimídia 3D, Gráficos e Efeitos Desempenho e Integração CSS3

6.
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(1/7) Web Design e Aplicações
Padrões para o desenvolvimento de páginas Web,
incluindo HTML & CSS, Script e Ajax, Gráficos, Áudio
e Vídeo, Acessibilidade, Internacionalização, Mobile
Web, Privacidade e Matemática na Web.
Web Design and Applications:
https://www.w3.org/standards/webdesign/

7.
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(2/7) Arquitetura Web
Foco nos princípios da Arquitetura Web,
Identificadores (URL, URI e IRI), Protocolos (HTTP,
XML, JSON, etc.), Meta Formatos e
Internacionalização.
Web Architecture:
https://www.w3.org/standards/webarch/

8.
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(3/7) Web Semântica
Conheça as tecnologias e ferramentas para dar suporte à
“Web dos dados", viabilizando pesquisas como num banco
de dados. Aqui você irá aprender sobre Dados Linkados,
Vocabulários e Ontologias, Consultas, Inferência e
Aplicações verticais.
Semantic Web:
https://www.w3.org/standards/semanticweb/

9.
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(4/7) Tecnologia XML
Tecnologias XML, incluindo XML, XML Namespaces,
XML Schema, Efficient XML Interchange (EXI) e
outros padrões relacionados.
XML Technology:
https://www.w3.org/standards/xml/

10.
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(5/7) Web Services
Refere-se às tecnologias como HTTP, XML, SOAP,
WSDL, SPARQL, entre outras, que possibilitam a
integração e comunicação entre diferentes
aplicações.
Web Of Services:
https://www.w3.org/standards/webofservices/

11.
Introdução a Webdesign – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(6/7) Web de Dispositivos
Tecnologias que permitem o acesso à Web por
todos, de qualquer lugar, a qualquer hora e
utilizando qualquer dispositivo.
Web Of Devices:
https://www.w3.org/standards/webofdevices/

12.
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(7/7) Navegadores e Ferramentas de Autoria
Nós devemos ser capazes de publicar e acessar conteúdos
independente do software que utilizamos, do computador que
temos, idioma que falamos, se estamos conectados sem fio ou
não, se a tela é grande ou pequena, etc. Estas normas tem o
objetivo de aprimorar constantemente a web que é aberta para
todos nós.
Browsers and Suthoring Tools:
https://www.w3.org/standards/agents/

13.
Diagramas
os padrões web

14.
Introdução a Web Design – Aula 2: IHC/UX Design
Diagramas
Diagrama Dan Saffer
Dan Saffer

15.
Introdução a Web Design – Aula 2: IHC/UX Design
Diagramas
Diagrama Peter Morville
Peter Morville

16.
Entregáveis
Documentos do UX

17.
Introdução a Web Design – Aula 2: IHC/UX Design
Entregáveis do UX
Fases & Categorias
• 1ª Fase: Concepção
• 2ª Fase: Implementação
• 3ª Fase: Monitoramento

18.
Fases & Categorias: 01. Concepção
1. Road Map
2. Benchmark
3. Definição das Métricas de Sucesso
4. Personas
5. Modelo conceitual
6. Blueprint
7. Ecossistema
8. Focus Group
9. Pesquisa Quantitativa
10. Card Sorting
11. Inventário de Conteúdo
12. Análise de Tarefas
13. Mapa do Site (Site Map)
14. Fluxograma
15. Wireframes
16. Protótipos Navegáveis
17. Storyboards
18. Mood Boards;
Introdução a Web Design – Aula 2: IHC/UX Design
Entregáveis do UX

19.
Fases & Categorias: 02. Implementação
1. Casos de uso
2. Documento de Especificação
3. Mensagens de Sistema
4. Análise Heurística
5. Teste de Usabilidade
6. Controle de Qualidade
7. Análise de Acessibilidade
8. Recomendações de SEO
Introdução a Web Design – Aula 2: IHC/UX Design
Entregáveis do UX

20.
Fases & Categorias: 03. Monitoramento
1. Teste de Usabilidade;
2. Testes A/B;
3. Eye Tracking;
4. Análise de Métricas
5. Análise Quantitativa e Qualitativa (análise de interface)
6. Google Analytics
Introdução a Web Design – Aula 2: IHC/UX Design
Entregáveis do UX

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