Upload
ngonhi
View
212
Download
0
Embed Size (px)
Citation preview
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
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
PRÍNCIPIOS BÁSICOS DE USABILIDADE
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
PRÍNCIPIOS BÁSICOS DE USABILIDADE
Simplicidade▸ Quanto mais rápido se chegar a uma informaçãodesejada, melhor;▸ Evite adornos desnecessários, isso prejudica oenfoque da aplicação.
PRÍNCIPIOS BÁSICOS DE USABILIDADE
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.
PRÍNCIPIOS BÁSICOS DE USABILIDADE
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.
ARQUITETURA DA INFORMAÇÃO
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
ARQUITETURA DA INFORMAÇÃO
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.
ARQUITETURA DA INFORMAÇÃO
Legibilidade em sites:
ARQUITETURA DA INFORMAÇÃO
Legibilidade em sites: Rocambole.
15/01/2016
16
ARQUITETURA DA INFORMAÇÃO
Legibilidade em sites: Rocambole.
ARQUITETURA DA INFORMAÇÃO
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.
ARQUITETURA DA INFORMAÇÃO
Resposividade:
15/01/2016
17
ARQUITETURA DA INFORMAÇÃO
Resposividade:
ARQUITETURA DA INFORMAÇÃO
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
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.
UM BOM SITE DEVE OFERECER...
ELEMENTOS DE ORIENTAÇÃODiz ao usuário onde ele está dentro do site.
UM BOM SITE DEVE OFERECER...
ELEMENTOS DE INTERAÇÃO
Processa informações edados incluídos pelousuário, como embuscas, formulários eenquetes.