Slides 2 e 3- Aula (Introdução ao WEB Design)

(1)

Introdução ao WEB

Design.

Profª. MSc. Cláudia

Souza

(2)

Agenda

 Unidade I:

 Introdução ao WEB Design

 _Introdução  _Design  _{WEB Design}  _Conceitos  _Bit  _Byte  _{Base binária}  _ASCII  _Pixel  _Resolução  _Cor o _{Sistema RGB} o _{Sistema CMYK}  _Arquivos o _{TIFF, JPG, BMP, GIF, PNG}  _{Projeto web}

(3)

Agenda

 Unidade I:

(4)

Agenda

 Unidade I:

(5)

Introdução



Design:

 Consiste na atividade de projeto, responsável

por:

 Planejar;  _Criar;

 _Desenvolver.

 Processo que visa soluções criativas e

inovadoras, para atender às:

 Características dos produtos;  _{Necessidades dos clientes;}  _{Necessidades das empresas.}

Produtos e serviços.

Sintonizados com as demandas e oportunidades do mercado.

(6)

Agenda

 Unidade I:

(7)

Introdução

 Web Design:

 Fundamenta-se em agregar os conceitos de

usabilidade com o planejamento da interface, garantindo que o usuário final atinja seus objetivos.

 _{É uma extensão da prática do design.}

 _{Foco é a criação de web Sites e documentos disponíveis no}

ambiente digital.

 _{Tende à multidisciplinaridade.}

 _{Requer subsídios de diversas áreas técnicas (como a}

arquitetura da informação, programação, usabilidade, banco de dados, acessibilidade, etc.), além do design propriamente dito.

(8)

Introdução



Web Design:

 O propósito do WD é facilitar a comunicação

entre usuário e conteúdo.

 Os usuários enxergam a aplicação diferente de um

profissional.

 _{A função do WD é transformar a informação}

em comunicação.

 _{Desenvolvendo um produto com estética,}

(9)

Agenda

 Unidade I:

(10)

Agenda

 Unidade I:

(11)

Conceitos



Bit:

 Palavra formada pelas duas primeiras letras de

binary e pela última letra de digit (digito binário).

 _{Shannon (1948), descreveu um bit como sendo}

uma unidade de informação, em sua obra Teoria

Matemática da Computação.

 _{É a base de toda linguagem usada pelos}

computadores, através do sistema binário ou de base dois, que graficamente é representado por duas alternativas:

(12)

Conceitos



Bit:

 O bit não serve apenas para representar

números, mas representam qualquer “coisa” que precise ser informada a um computador.

 De uma letra ou uma vírgula, até a cor que iremos

usar no desenvolvimento de um layout web.

 _{Cada uma dessas informações é transformada em um código} binário¹ e interpretada pelo sistema.

 Exemplo: Um computador é de 64 bits.

 Processa 64 unidades de informação ao mesmo

tempo, e, portanto, é mais rápido que um computador de 32 ou de 16 bits.

(13)

Agenda

 Unidade I:

(14)

Conceitos



Byte (IBM, 1956):

 Palavra binária constituída de um conjunto de

8 bits.

 Observação:

 _{Os bits são geralmente usados como medida de}

velocidade na transmissão de dados.  Exemplo:

o _{Um modem 14400 transmite 14400 bits por segundo (bps).}

 Os bytes são normalmente associados à capacidade

de armazenamento de dados.  _Exemplo:

(15)

Agenda

 Unidade I:

(16)

Conceitos



Base Binária:

 O número 2 é a base de tudo, ou seja,

consiste na capacidade de processamento, que evolui em múltiplos, sempre dobrando em relação à medida anterior.

 _Exemplo:

 4K, 8K, 16K, 32K, 64K, 128K, 256K, 512K, etc.

Nota:

 _{A palavra kilo vem do grego “khilioi” e significa mil}

Número de combinações binárias ou

códigos binários:

Nª de bits Representação Nº Combinaçõe s Com 2 bits 00, 01, 10, 11 4 Com 3 bits 000, 001, 010, 011,_{100, 101, 110, 111} 8 Com 5 bits 00000, 00001, 00010, 00011, 00100, 00101, 00110, 00111, 01000, 01001, 01010, 01011, 01100, 01101, 01110, 01111, 10000, 10001, 10010, 10011, 10100, 10101, 10110, 10111, 11000, 11001, 11010, 32

(20)

Conceitos

20



Número de combinações binárias ou

códigos binários:

IN = 2

n (onde n é o

número de códigos binários)

Nª de bits Representação Nº Combinaçõe s Com 2 bits 00, 01, 10, 11 2² = 4 Com 3 bits 000, 001, 010, 011,_{100, 101, 110, 111} 2³ = 8 Com 5 bits 00000, 00001, 00010, 00011, 00100, 00101, 00110, 00111, 01000, 01001, 01010, 01011, 01100, 01101, 01110, 01111, 10000, 10001, 10010, 10011, 10100, 10101, 10110, 10111, 11000, 11001, 11010, 25 = 32

(21)

Conceitos



Base 16 (hexadecimal):

 Foi criado para minimizar a representação de

um número binário.

 Se considerarmos quatro dígitos binários, ou

seja, quatro bits, o maior número expressado com esses quatro dígitos é 1111 (que em decimal é 15).

 _{Não existem símbolos dentro do sistema arábico,}

que possam representar os números decimais entre 10 e 15.

 Foram usados, então, símbolos literais:

(22)

Conceitos



Base decimal x Base binária x Base

hexadecimal.

Decim al Binár ia Hexadeci mal 0 0000 0 1 0001 1 2 0010 2 3 0011 3 4 0100 4 Decim al Binár ia Hexadeci mal 5 0101 5 6 0110 6 7 0111 7 8 1000 8 9 1001 9 Decim al Binár ia Hexadeci mal 10 1010 A 11 1011 B 12 1100 C 13 1101 D

(23)

Agenda

 Unidade I:

(24)

Conceitos

• _{Como os caracteres (a,b,c,...,A,B,C,...,+,-,?,!,*,...)}

são representados internamente nos

computadores?

 Usando o código ASCII (American Standard Code for

Information Interchange).

 _{Código para o o intercâmbio de informação (1960).}

 _{Codificação de caracteres de oito bits baseada no}

alfabeto inglês.

 _{Exemplo: Na digitação, têm-se a inserção do código do caractere,}

onde cada caractere é codificado usando 8 dígitos binários.

 _{Com uma sequência de n dígitos binários, podem ser}

representados 2n “coisas” diferentes.

(25)

Agenda

 Unidade I:

(26)

Conceitos



Pixel:

 Pix (abreviatura em inglês para Picture).

Pixel, consiste na aglutinação de picture (pix)

e element.

 Menor ponto que forma uma imagem digital.

 _{O conjunto de milhares de pixels, formam a imagem}

inteira.

 _{Com o pixel, é possível atribuir-se uma cor em uma}

imagem.

 Quanto maior for o número de pixels

(horizontal/vertical), maior será a resolução visual da imagem.

(27)

Agenda

 Unidade I:

(28)

Conceitos



Resolução:

 É a qualidade de uma imagem exposta em

um dispositivo de exibição.

 _{Também descreve o nível de detalhe que}

uma imagem admite.

 _{A resolução é determinada pelo número de pixels}

por polegadas exibidos na tela.

 _{Quanto maior for a resolução melhor será a o}

resultado apresentado.

 Em Scanners, a resolução é expressa pela quantidade de pontos no espaço de uma polegada (Dots Per Inch) .

 _{Em máquinas digitais, a resolução é expressa pela quantidade} total de pixels por polegada (Pixel Per Inch) da imagem gerada.

(29)

Conceitos



Resolução:

 Quanto maior a resolução, mais alta é a

visualização e maiores são os detalhes de uma imagem.

 Monitores de 14” e 15”.

 _{Resolução máxima apreciável: 800x600.}

 Monitores de 17”.

 _{Resolução máxima apreciável: 800x600 ou 1024x768.}

 _{Monitores de 19” e 21”.}

(30)

Conceitos



Resolução:

(31)

Agenda

 Unidade I:

(32)

Conceitos



Cor:

 Primeiro caso: Cor obtida aditivamente (luz).

 _{Sistema RGB, presente nos objetos que emitem luz.}

 _{Monitores, televisão, sol, etc.}

 Segundo caso: Cor obtida subtrativamente

(pigmento).

 Sistema CMYK, presente em objetos não emissores

de luz.

 _Impressoras.

RGB:

 Espaço de cor

descrito pelas cores primárias aditivas.

» Red (vermelho) » Green (verde)

CMYK:



Arquivos:

 _{TIFF (Tagged Image File Format):}

 _{Formato de arquivo digital no qual as informações são} gravadas em formato de BitMap.

 Jpg ou JPEG (Joint Pictures Expert Group):

 _{Formato de arquivo que utiliza uma compactação com} perda de informações, sendo um método comum usado para comprimir imagens fotográficas.

 BMP (Windows Bitmap):

 Formato de gravação de arquivos, difundido pelo Microsoft Windows, onde as informações são gravadas utilizando um bitmap (mapa de bits).

(37)

Conceitos



Arquivos:

 GIF (Graphics Interchange Format):

 _{Formato de arquivo que possui como grande}

limitação a quantidade de cores que podem ser representadas: 256 cores.

 PNG (Portable Network Graphics):

 _{Formato de dados criado para substituir o formato}

(38)

Conceitos



Arquivos:

(39)

Conceitos



Peso das páginas:

 É um obstáculo para quem desenvolve para

web.

 Ele faz com que o número de páginas vistas,

se reduza por sessão de usuário.

 Páginas mais leves incrementam o número

de páginas visitadas.

(40)

Conceitos



Peso das páginas:

 Elimine as imagens supérfluas;

 Elimine os banners de autopromoção.

 Pois ambos prejudicam site e não oferecem

benefícios ao usuário.

Reduzir o peso (em bytes) de

um site em 20%, equivale a

incrementar em 20% o número

de páginas vistas.

Peso das páginas Total peso / velocidade de _conexão Em uma sessão _{de 30 s}

(41)

Agenda

 Unidade I:

(42)

Projeto web



Fases:

 Planejamento estratégico  Concepção ou design  _{Produção do site}  Validação (teste)  Distribuição e disponibilização

(43)

Projeto web



Fases:

 Planejamento estratégico:

 Distribuição e disponibilização:

 _{Após os teste, hospede o que fora desenvolvido, e}

fique atento às críticas e comentários.

(49)

Introdução ao WEB

Design.

Profª. MSc. Cláudia

Souza

(50)

Aula3: Introdução ao WEB

Design.

Profª. MSc. Cláudia

informação, deve contemplar o objetivo de tornar a experiência do usuário, a mais fácil e confortável possível (usabilidade).

 A estrutura deve ser planejada de maneira que

o usuário obtenha facilmente a informação ou serviço desejado.

 São inúmeras as formas que um site pode

adquirir.

 _{A criatividade continua a ser o grande diferencial na}

(53)

Pontos importantes

• Usabilidade

:

– Terminação usada para definir a

facilidade com que os usuários utilizem uma ferramenta (ou objeto), a fim de realizar uma tarefa específica.

– Normalmente se refere à simplicidade e

facilidade com que uma interface, um programa de computador ou um site pode ser utilizado.

– Refere-se a eficiência do design de

(54)

Pontos importantes

• Usabilidade

:

– Segundo a norma ISO 9241, a usabilidade

pode ser especificada ou medida, de acordo com:

• Facilidade de aprendizado:

– O usuário rapidamente consegue explorar o sistema e

realizar suas tarefas.

• Facilidade de memorização:

– Após um certo período sem utilizá-lo, o usuário não

frequente é capaz de retornar ao sistema e realizar suas tarefas sem a necessidade de reaprender como interagir com ele.

• Diminuição da taxa de erros:

– O usuário realiza suas tarefas sem maiores transtornos

(55)

Pontos importantes

• Testes de Usabilidade

:

– Técnica formal envolve os usuários

(público alvo) de determinado sistema.

– Tal teste caracteriza-se por empregar

técnicas distintas, voltadas, em sua maioria, para a avaliação da ergonomia dos sistemas interativos.

(56)

Pontos importantes

• Ergonomia

– Mais e mais pessoas usam e dependem da

informatização.

• Um grande problema, entretanto, é que a maioria

desses indivíduos, uma vez ou outra, tem ou tiveram frustrações e dificuldades ao tentar usar algum tipo de sistema.

• As incompatibilidades da IHC, propicia erros

durante a operação dos sistemas e implicam dificuldades para o usuário.

– Devido o desconhecimento por parte do projetista do software.

– Wisner (1987) define a Ergonomia de

Software como um caso particular de adaptação do trabalho ao homem – “a adaptação do sistema informatizado à inteligência humana”.

(57)

Pontos importantes

• Avaliações de Ergonomia

:

– Trata dos aspectos referentes aos

programas e à programação, e procura aperfeiçoar a habilidade de utilização (usabilidade) por usuários.

– Existem quatro níveis de intervenção

ergonômica, que são:

• Funcionalidades:

– Que o software deve oferecer.

• Adequação:

– Aos modelos de representação dos usuários.

• Interação:

– Modalidades de diálogo com o usuário.

• Codificação das informações:

(58)

Pontos importantes



Layout:



O layout precisa transmitir a informação

desejada com eficiência.

 Deve ser um elo de comunicação com o usuário.

 Sua linguagem deve ser condizente com o objetivo do site.

 Conhecer heurísticas de usabilidade, é fundamental para se gerar layouts para a web.

(59)

Pontos importantes

• Navegadores (browsers):

– São software responsáveis por

interpretar o conteúdo de um site, disponibilizando a interface com a qual o usuário final irá interagir.

• O navegador está para o Web Design, assim

como o papel está para o jornal.

– A grande variedade de navegadores e

discrepância entre os recursos fez seus próprios criadores caminharem em direção a um padrão comum.

• Atualmente é indispensável desenvolver sites,

(60)

Pontos importantes

• _Navegadores:

Todas as aplicações devem funcionar, independente dos browsers.

(61)

Pontos importantes

• Padrão:

– W3C (www.w3c.br):

• World Wide Web Consortium é o órgão

responsável por recomendar os padrões de desenvolvimento para a Internet.

– O grande objetivo do W3C é possibilitar

que a informação veiculada por um site

permaneça e seja acessível,

independente do dispositivo utilizado pelo visitante.

(62)

Considerações Finais

• _{Telemarketing;}

• _Eliminação _de _panfletos _{(extremamente}

poluentes);

• _{Correspondência;}

• _{Outdoor (que causam poluição visual e}

ambiental);

• _{Conveniência;}

• _{Inclusão social;}

• _{Eliminação de fronteiras;}

• _{Acesso rápido;}

(63)