Web Standards PROJETO WEB

Transcrição

1 Web Standards PROJETO WEB Ferramentas para Web Design Prof. Ricardo Ferramentas para Web Design 1

2 Briefing Planejamento Criação Desenvolvimento Homologação Produção Divulgação Métricas Manutenção Ferramentas para Web Design 2

3 BRIEFING O briefing é um conjunto de informações passadas em uma reunião para o desenvolvimento de um projeto. O briefing deve criar um roteiro de ação para criar a solução que o cliente procura, é como mapear o problema, e com estas pistas, ter idéias para criar soluções. Ferramentas para Web Design 3

4 PLANEJAMENTO Métricas atuais e concorrentes Benchmark e Teste de Usabilidade Ferramentas para Web Design 4

5 Benchmarking é a busca das melhores práticas na indústria que conduzem ao desempenho superior. É visto como um processo positivo e pró-ativo por meio do qual uma empresa examina como outra realiza uma função específica a fim de melhorar como realizar a mesma ou uma função semelhante. O processo de comparação do desempenho entre dois ou mais sistemas é chamado de benchmarking e as cargas usadas são chamadas de benchmark. Ferramentas para Web Design 5

6 Benchmarking Ferramentas para Web Design 6

7 PLANEJAMENTO UM PROFISSIONAL QUE PRECISA ESTAR ANTENADO Ferramentas para Web Design 7

8 Ferramentas para Web Design 8

9 BRANDCHANNEL Ferramentas para Web Design 9

10 BRANDCHANNEL (brandchannel.com) é um site sobre marcas, lançado em 2001, com objetivo de fornecer um perspectiva global da popularidade das maiores marcas. O Web site é produzido pela agência Interbrand. Ferramentas para Web Design 10

11 BRANDCHANNEL Ferramentas para Web Design 11

12 BRANDCHANNEL Ferramentas para Web Design 12

13 Ferramentas para Web Design 13

14 PLANEJAMENTO Métricas atuais e concorrentes Benchmark e Teste de Usabilidade Análise e definições de melhores práticas Definição de requisitos Elaboração de Wireframe Ferramentas para Web Design 14

15 Um wireframe de site web é um guia visual básico usado em design de interface para sugerir a estrutura de um site e relacionamentos entre suas páginas. (ou também "wire frame web", "wireframe web", "web wireframing") Ferramentas para Web Design 15

16 Um wireframe web é uma ilustração semelhante do layout de elementos fundamentais na interface. Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja desenvolvido. Ferramentas para Web Design 16

17 - O objetivo do wireframe é ajudar o desenvolvedor de sistemas a entender o que o cliente está querendo, mostrando os requisitos funcionais de um sistema. - Este desenho deve retratar toda a arquitetura de informação do sistema desejada pelo cliente e a usabilidade do sistema. Deve ser muito simples e resumido, informando ao desenvolvedor apenas o que for estritamente necessário. Ferramentas para Web Design 17

18 Ferramentas para Web Design 18

19 Ferramentas para Web Design 19

20 Ferramentas para Web Design 20

21 Ferramentas para Web Design 21

22 CRIAÇÃO Processo criativo / Brainstorm Layouts das páginas Storyboard para animações Aprovação do Cliente Ferramentas para Web Design 22

23 CRIAÇÃO Processo criativo / Brainstorm Leitura dos requisitos do projeto Estudo do Wireframe Estudo do Briefing Busca de referências Ferramentas para Web Design 23

24 O brainstorming (literalmente: "tempestade cerebral" em inglês) ou tempestade de ideias, mais que uma técnica de dinâmica de grupo, é uma atividade desenvolvida para explorar a potencialidade criativa de um indivíduo ou de um grupo, colocando-a a serviço de objetivos pré-determinados. Ferramentas para Web Design 24

25 Ferramentas para Web Design 25

26 Ferramentas para Web Design 26

27 Ferramentas para Web Design 27

28 Ferramentas para Web Design 28

29 Ferramentas para Web Design 29

30 Ferramentas para Web Design 30

31 DESENVOLVIMENTO Especificação de Interface Web Standards (os padrões web) SEO (Search Engine Optimization) Programação e Banco de dados Ferramentas para Web Design 31

32 DESENVOLVIMENTO Especificação de Interface Web Standards (os padrões web) SEO (Search Engine Optimization) Programação e Banco de dados Ferramentas para Web Design 32

33 Ferramentas para Web Design 33

34 DESENVOLVIMENTO Especificação de Interface Web Standards (os padrões web) SEO (Search Engine Optimization) Programação e Banco de dados Ferramentas para Web Design 34

35 Ferramentas para Web Design 35

36 Ferramentas para Web Design 36

37 DESENVOLVIMENTO Especificação de Interface Web Standards (os padrões web) SEO (Search Engine Optimization) Programação e Banco de dados Ferramentas para Web Design 37

38 HOMOLOGAÇÃO Colocar site em ambiente de testes Bateria de testes Quality Center Solucionando os bugs Aprovação do cliente Ferramentas para Web Design 38

39 HOMOLOGAÇÃO Ferramentas para Web Design 39

40 PRODUÇÃO Publicar arquivos nos servidores da internet Homologação Aprovação do cliente Ferramentas para Web Design 40

41 Ferramentas para Web Design 41