Apresentao do PowerPoint

Orientador: Prof. Ms Eduardo Rosalm MarcelinoFlavia de Azevedo e Joslia Costa

TRABALHO DE CONCLUSO DE CURSOTCC slide 1/34

Boa noite! Apresentao

1

Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicao de User ExperienceTCC slide 2/34

Nosso trabalho vai tratar sobre uma vertente do desenvolvimento para Web e o tema ~ler o ttulo do trabalho~

2

Agenda

Introduo;Metodologia;Tecnologias para desenvolvimento Web;Design responsivo e suas caractersticas;Usabilidade;Frameworks;Estudo de caso;Concluso;Trabalhos futuros;Agradecimentos.

TCC slide 3/34

Esta nossa agenda, falaremos um pouco sobre o nicio e as metodologias que nos guiaram ao longo da pesquisa. Em seguida sero apresentados tpicos sobre as tecnologias envolvidas, usabilidade e frameworks do mercado. Mostraremos a vocs um prottipo desenvolvido a partir das tcnicas que pesquisamos e por fim apresentaremos nossas consideraes finais.3

IntroduoJustificativaDiversidade de tipos de dispositivos que acessam a internet;Estudo da IDC Brasil aponta que, em 2014, brasileiros compraram cerca de 104 smartphones por minuto(IDC, 2015)

Objetivos:Pesquisar e analisar frameworks front-end, com foco no desenvolvimento de sites responsivos.Analisar as tecnologias disponveis;Aplicar regras de usabilidade para a modelagem do site;Desenvolvimento de um prottipo.

TCC slide 4/34

Como start do nosso trabalho, analisamos que hoje existe uma demanda muito alta de aquisies de novos dispositivos que acessam a internet. Pensando mais profundamente, percebmos que alm do numero ligeiramente grande de novos dispositivos, existe tambm uma diversidade imensa dos tipos de dispositivos moveis em geral.Sendo assim, como objetivo estudo, nos propusemos a analisar conceitos e tecnologias que fossem capazes de atender, de forma eficaz essa nova tendncia de mercado, como por exemplo os frameworks mais utilizados pela comunidade dev, as linguagens front-end e regras que melhoram a experincia que o usurio ter ao acessar uma aplicao a partir do dispositivo mvel, que a usabilidade.Aps isso, desenvolvemos um prottipo de site, com algumas das tcnicas e conceitos estudados.4

MetodologiaTipo de pesquisa:Exploratria

Etapas:Anlise das tecnologias envolvidas;Avaliao das heursticas de usabilidade;Desenvolvimento do prottipo;

TCC slide 5/34

A metodologia utilizada para elaborao deste trabalho foi uma pesquisa do tipo exploratria.As etapas que percorremos ao longo desta pesquisa foram de anlise dos recursos mais recorrentes envolvidos no cenrio WEB, analise de avaliaes heursticas acerca da usabilidade e por fim o desenvolvimento de algo prtico e tangvel, que o nosso prottipo.5

TCC slide 6/34

Flavia sua parte.O professor pediu para traduzirmos as frases pra piada causar mais efeito..Aqui importante brincar e aprofundar sobre o problema: o grande numero de dispositivos e pior a variedade de tipos de dispositivos,Ou seja quase impossvel testar em um por um, sendo que nessa imagem nem esto elencados todos os tipos existentes.Ento a partir deste problema, vamos estudar como, a partir das tecnologias existentes hoje no mercado de desenvolvimento, podemos Desenvolver de forma democrtica para a maior parte dos usurios de internet, seja ela mvel ou no.6

Cenrio Web AtualPrincipais linguagens para desenvolvimento front-end:

TCC slide 7/34

O cenrio atual no desenvolvimento para web sustentado por trs linguagens- HTML, CSS e JS.7

HTML5 Foco no contedo

TCC slide 8/34

Trecho de cdigo html5 e resultado do cdigo ao lado8

CSS3 Foco na formatao visual

TCC slide 9/34

Trecho de cdigo csse resultado do cdigo ao lado

9

JavaScript Foco nas interaes

TCC slide 10/34

Trecho de cdigo javaScript e resultado do cdigo ao lado

10

O que design responsivo?O web design responsivo se baseia no conceito de desenvolver websites que sejam capazes de se adaptar ao tamanho da tela do dispositivo utilizado.

TCC slide 11/34

11

Um mesmo arquivo de CSS para diversos dispositivos

TCC slide 12/34

Como funciona a tcnica para tornar as pginas responsivas?

TCC slide 13/34

Componentes principais para o desenvolvimento responsivoMedia queries

TCC slide 14/34

Componentes principais para o desenvolvimento responsivoGrades flexveis

TCC slide 15/34

INSERIR CDIGO15

Componentes principais para o desenvolvimento responsivoGrades flexveis

TCC slide 16/34

Componentes principais para o desenvolvimento responsivoImagens e mdias flexveis

TCC slide 17/34

Imagens e mdias flexveis

Componentes principais para o desenvolvimento responsivo

Unidades estticasTCC slide 18/34

TCC slide 19/34

19

Usabilidade e User ExperienceContexto

TCC slide 20/34

Usabilidade e User ExperienceContexto

TCC slide 21/34

Usabilidade e User ExperienceEscala hierrquica de importncia das informaes textuais e grficas do site;

Visualizao em 320px de resoluoVisualizao em 1024px de resoluoTCC slide 22/34

Usabilidade e User ExperienceOtimizao de desempenho

TCC slide 23/34

Frameworks para desenvolvimento front-endConjuntos de CSS com Javascript;Cdigo estvel;Atributos como media queries e breakpoints j tratados

TCC slide 24/34

Principais frameworks para desenvolvimento front-end

TCC slide 25/34

Bootstrap e o desenvolvimento responsivoGama de componentes;Ranking do GitHub;Comunidade de desenvolvedores;Disponibilidade da documentao;CustomizaoComponentes responsivos.

TCC slide 26/34

Apresentao do prottipo desenvolvidoProposta de contedo Site para instituies de ensino superior;

Estrutura do desenvolvimento:Desktop-first;User experience design;Bootstrap.

TCC slide 27/34

Avaliao Heurstica do prottipoPrioridade das informaes emdeterminados contextos;Controle do usurio e liberdade;Sistema de buscaReconhecimento de padres;

TCC slide 28/34

Avaliao Heurstica do prottipoPrioridade das informaes emdeterminados contextos;Controle do usurio e liberdade;Sistema de buscaReconhecimento de padres;

TCC slide 29/34

Avaliao Heurstica do prottipoPrioridade das informaes emdeterminados contextos;Controle do usurio e liberdade;Sistema de buscaReconhecimento de padres;Ajuda e documentao;

TCC slide 30/34

Vdeo de demonstrao do prottipo

TCC slide 31/34

ConclusesWeb design responsivoDesenvolvimento responsivo por uma web nica;Foco no usurio;Gerncias unificadas;

Framework Bootstrap Facilitador genrico;Muitas classes e componentes no utilizados;Experincia de usurio no complexa;Desenvolvimento responsivo contempla apenas tamanhos comuns de dispositivos, podendo haver excees.

Desenvolvimento front-endDesenvolver o prprio padro responsivo, ligado a identidade visual do projeto

TCC slide 32/34

Trabalhos futurosEstudos aprofundados em CSS como as tcnicas de SASS e LESS;HTML5 e Web semntica, Acessibilidade.Design Thinking;

TCC slide 33/34

Agradecimentos

TCC slide 34/34http://www.prototipotcc.esy.es