aula 01 - fabianotaguchi.files.wordpress.com · carga horária: 64 horas/aula aulas: sextas-feiras...

15/01/2016

1

PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi

[email protected]://fabianotaguchi.wordpress.com

DISCIPLINA

PROGRAMAÇÃO EM AMBIENTE WEB 1Carga horária: 64 horas/aulaAulas: Sextas-feiras – 19h00min às 23h00minLocal: Bloco das engenharias – Sala 11

Laboratório de informática 2

15/01/2016

2

CONTEÚDO PROGRÁMATICO▸ Confecção de sites• Boas práticas no desenvolvimento de sites;• Definição de um projeto para criação de um site;• Linguagem de marcação HTML e folhas de estilo CSS.▸ Linguagem de programação para Internet• Serviços Web;• Tecnologias Web;• Linguagem de programação PHP▸ Desenvolvimento de sistemas Web• Desenvolvimento de sites estáticos;• Desenvolvimento de sites dinâmicos.

FORMAS DE AVALIAÇÃO▸T1: Briefing e wireframe sobre a criação de um projetode um site;▸T2: Projeto de desenvolvimento da atividade T1;▸P1: Atividade avaliativa referente a desenvolvimentoWeb (HTML, CSS e responsividade).▸ T1 = 2,0 pontos – 19/02/2016▸ T2 = 5,0 pontos – 06/05/2016▸ P1 = 3,0 pontos – 18/03/2016

*Datas podem ser sujeitas a alterações.

BIBLIOGRAFIAS▸ CHAK, Andrew. Como Criar Sites Persuasivos. São Paulo: Pearson Education do Brasil, 2004.▸ DAMASCENO, Anielle. Webdesign: teoria e prática. Florianópolis (SC): Visual Books, 2003.▸ VIANA, Marco Polo Monteiro. Webdeveloper. Vol 1: Arquitetura da Internet e Servidores Web: Rio de Janeiro: Ed Ciência Moderna Ltda, 2005.

- - - -▸ DEITEL, H. M. & DEITEL, P. J. Internet e World Wide Web: Como Programar. 2 ed. São Paulo: Bookman, 2003.▸ SILVA, Maurício Samy. Foundation for sites. 1 ed. São Paulo: Novatec, 2014.

15/01/2016

3

PROGRAMAÇÃO EM AMBIENTE WEB I

SITE

Qual a definição de um site?Como podemos classificar os sites?

15/01/2016

4

MODELO CLIENTE SERVIDOR

O servidor é responsável por armazenar osarquivos que constituem as páginas do site.

Estes arquivos são escritos em Hypertext

Markup Language, HTML. Os arquivos sãoligados através de links.

O protocolo HyperText Transfer Protocol,

HTTP é responsável pela comunicação entreclientes e servidores.

EXECUÇÃO NO CLIENTE▸ HTML;▸ CSS;▸ Javascript;▸ XML;▸ XSLT;▸ Tableless.

15/01/2016

5

EXECUÇÃO NO SERVIDOR▸ JSP;▸ ASP;▸ PHP;▸ Perl.

Necessidade dos sites oferecerem

conteúdos dinâmicos e atualizados

EXECUÇÃO NO SERVIDOR

SERVIDORES WEB▸ IIS;▸ Apache;▸ Tomcat.

Desenvolver um site é:

ARTE OU ENGENHARIA?

15/01/2016

6

ARTE▸ Oferece espaço para arte;▸ Mas querem qualidade de serviço;▸ Clientes querem prazos cumpridos e orçamentos respeitados.

ENGENHARIA▸ Desenvolvidos por equipes de especialistas;▸ Utilizam métodos, técnicas e ferramentas;▸ Sem arte, seria muito chato.

PRINCÍPIO BÁSICO

O principio básico da Web é que o acesso

possa feito ser por qualquer tipo de pessoa,

em qualquer lugar.

Isso existe?

Acessibilidade e usabilidade são condições básicas para inclusão social digital.

CARACTERÍSTICAS

Funcional Fácil de usar

Eficiente Atraente

Robusto e confiável Organizado

Documentado Correto

Manutenível Atualizado

Testável Adequado aos usuários

Reutilizável Adequado à tecnologia

Portável Adequado ao propósito

15/01/2016

7

PROBLEMAS COMUNS....▸ DesempenhoTempo, demora no acesso...▸ PortabilidadeBrowser▸ UsabilidadeComo se utiliza?

PROPOSTAS▸ Design gráficoAborda aspectos estéticos, como: imagens,tipografia, diagramação e cores.▸ UsabilidadeDefine critérios de usabilidade, princípios ediretrizes para avaliação.▸ Arquitetura da informaçãoCentrada na organização, navegação ebusca do conteúdo da informação.

DESIGN

O design de um site refere-se a umprojeto visual e funcional, que envolve aadaptação de um produto (site) anecessidades dos seus usuários,aplicando conceitos de usabilidade.

15/01/2016

8

USABILIDADE▸ Concerne a todas as características quepermitem ao usuário interagir com ocomputador;▸ Está relacionada à eficácia, eficiência esatisfação do uso;▸ Enquadra-se na questão da “aceitabilidade”do sistema pelo usuário.

USABILIDADE E SEUS PROBLEMAS▸ O sistema tem a informação ou o serviçoque preciso?▸ Onde posso encontrar?▸ Como posso solicitar esse serviço? Quaisinformações devo fornecer?▸ Qual o resultado? Era o que eu queria?▸ Para que serve esse elemento?▸ O que significa essa figura?▸ Para onde leva esse link?

15/01/2016

9

15/01/2016

10

PRÍNCIPIOS BÁSICOS DE USABILIDADE

Clareza na arquitetura da informação:▸ Usuário consegue discernir o que é prioridadeno site;▸ Informação deve estar estruturada;▸ Um mapa do site é uma técnica bastante útil.

15/01/2016

11


Facilidade de navegação:▸ Usuário deve chegar a uma informação comfacilidade (Não precisa ser em três cliques);▸ Informação deve estar bem distribuída;▸ Links devem ser representativos.

15/01/2016

12


Simplicidade▸ Quanto mais rápido se chegar a uma informaçãodesejada, melhor;▸ Evite adornos desnecessários, isso prejudica oenfoque da aplicação.


Relevância de conteúdo:▸ Textos devem ser concisos e com credibilidade;▸ Informações relevantes devem ser apresentadasem páginas principais;▸ Informações secundárias devem serdisponibilizadas em páginas de suporte eacessadas através de links.


Manter a consistência e o foco no usuário: ▸ Padrão deve ser tomado para todo o projeto;▸ Foco deve estar nas atividades do usuário;▸ Sempre pense no usuário em primeiro lugar(Arte X Engenharia);▸ Adote símbolos internacionais (globalização).

15/01/2016

13

ACESSIBILIDADE

Conceito que garante que o site possa seracessado por qualquer pessoa, de qualquerlugar, como qualquer dispositivo, tendo elaqualquer nível de conhecimento em tecnologia.▸ Deficientes;▸ Novos usuários;▸ Usuários inexperientes;▸ Usuários experientes.

ACESSIBILIDADE

Sites devem ser utilizados por pessoas:▸ Capazes de ver, ouvir e deslocar-se;▸ Que não tenham mouses ou teclados convencionais;▸ Possuam telas que apresentam somente textos ecom dimensões reduzidas;▸ Estejam com olhos, mãos ou ouvidos ocupados;▸ Não tenha um navegador Web atualizado oudiferente dos tradicionais.

15/01/2016

14

ACESSIBILIDADE

Forneça sempre:▸ Alternativas visuais e sonoras do mesmo conteúdo;▸ Informações de contexto e orientação;▸ Clareza nos documentos;

Utilize corretamente as folhas de estilo para

formatação

ARQUITETURA DA INFORMAÇÃO

Oriente o usuário:▸ Coloque sempre links de retornos à página inicial;▸ Links devem ser autoexplicativos;▸ Indique quais conteúdos contém bloqueios de loginpara acesso;▸ Para links use como marcador nomes e nunca links;▸ Em páginas com textos, coloque as informaçõesimportantes em primeiro lugar.


Deixe que o usuário controle as ações:▸ Evite o uso de excessivas janelas;▸ Ofereça serviços de busca em seu site;▸ Evite utilizar plug-ins auto instaláveis;▸ Informe o tamanho dos arquivos para downloads.

Essa capacidade encoraja o usuário a explorar o seu site.

15/01/2016

15


Legibilidade em sites:▸ Nunca ocupe mais de 80% do seu site comconteúdo;▸ Reserve 20% da área para informações sobre anavegação;▸ Cuidado com excesso de propagandas;▸ Animações usar ou não, eis a questão.


Legibilidade em sites:


Legibilidade em sites: Rocambole.

15/01/2016

16


Legibilidade em sites: Rocambole.


Erros comuns:▸ Nunca apresente uma página “em construção”;▸ Não está pronto! Deixe o site off-line;▸ Evite caracteres que dificultam a leitura doendereço do site;▸ Cuidado na escolha do título do site, podeconfundir um usuário.▸ Sempre trate os erros.


Resposividade:

15/01/2016

17


Resposividade:


Resposividade:

http://marketshare.hitslink.com

É possível dentre vários outras estatísticas verificar qualsão as resoluções mais comuns entre usuários da Web.Em destaque, no ano de 2010:

23,63% dos usuários faziam uso de 1024 x 768 pixels

TIPOGRAFIACORESLAYOUT

15/01/2016

18

FACE

CORES

15/01/2016

19

PROFISSIONAIS ENVOLVIDOS:

• Web designer• Webdeveloper• Webmaster

DOMÍNIO E HOSPEDAGEM

15/01/2016

20

DOMÍNIO

Nome utilizado para localizar e identificarconjuntos de computadores dentro da Internet.

Para não ser necessário memorizar oendereço IP de cada site, o domínio éaplicado.

Sendo assim, o primeiro passo para começara fazer um site é ter um domínio registrado!

HOSPEDAGEM

O serviço de hospedagem é necessáriopara que o site fique on line e possa seracessado pelas outras pessoas queestejam na Internet.

HOSPEDAGEM

Alguns pontos a serem observados:▸ Se existe limite de transferência mensal;▸ Espaço de armazenamento em disco;▸ Serviços e servidores que são suportados.

15/01/2016

21

UM BOM SITE DEVE OFERECER...

ELEMENTOS DE NAVEGAÇÃOAjuda o usuário a se mover dentro do site eacessar áreas específicas.


ELEMENTOS DE ORIENTAÇÃODiz ao usuário onde ele está dentro do site.


ELEMENTOS DE INTERAÇÃO

Processa informações edados incluídos pelousuário, como embuscas, formulários eenquetes.

15/01/2016

22


ELEMENTOS DE CONTEÚDO

Toda a informação emforma de texto, sons,vídeos ou animações.


ELEMENTOS DE EMOÇÃO

Apelam para o sentimentodo usuário, provocandocuriosidade ou convidandoa continuar a navegaçãono site.

aula 01 - fabianotaguchi.files.wordpress.com · carga horária: 64 horas/aula aulas: sextas-feiras...

Documents