PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com DISCIPLINA PROGRAMAÇÃO EM AMBIENTE WEB 1 Carga horária: 64 horas/aula Aulas: Sextas-feiras 19h00min às 23h00min Local: Bloco das engenharias Sala 11 Laboratório de informática 2 1
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 projeto de um site; T2: Projeto de desenvolvimento da atividade T1; P1: Atividade avaliativa referente a desenvolvimento Web (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. 2
PROGRAMAÇÃO EM AMBIENTE WEB I SITE Qual a definição de um site? Como podemos classificar os sites? 3
MODELO CLIENTE SERVIDOR O servidor é responsável por armazenar os arquivos que constituem as páginas do site. Estes arquivos são escritos em Hypertext Markup Language, HTML. Os arquivos são ligados através de links. O protocolo HyperText Transfer Protocol, HTTP é responsável pela comunicação entre clientes e servidores. EXECUÇÃO NO CLIENTE HTML; CSS; Javascript; XML; XSLT; Tableless. 4
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? 5
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 Eficiente Robusto e confiável Documentado Manutenível Testável Reutilizável Portável Fácil de usar Atraente Organizado Correto Atualizado Adequado aos usuários Adequado à tecnologia Adequado ao propósito 6
PROBLEMAS COMUNS... Desempenho Tempo, demora no acesso... Portabilidade Browser Usabilidade Como se utiliza? PROPOSTAS Design gráfico Aborda aspectos estéticos, como: imagens, tipografia, diagramação e cores. Usabilidade Define critérios de usabilidade, princípios e diretrizes para avaliação. Arquitetura da informação Centrada na organização, navegação e busca do conteúdo da informação. DESIGN O design de um site refere-se a um projeto visual e funcional, que envolve a adaptação de um produto (site) a necessidades dos seus usuários, aplicando conceitos de usabilidade. 7
USABILIDADE Concerne a todas as características que permitem ao usuário interagir com o computador; Está relacionada à eficácia, eficiência e satisfaçã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ço que preciso? Onde posso encontrar? Como posso solicitar esse serviço? Quais informaçõ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? 8
15/01/2016 9
PRÍNCIPIOS BÁSICOS DE USABILIDADE Clareza na arquitetura da informação: Usuário consegue discernir o que é prioridade no site; Informação deve estar estruturada; Um mapa do site é uma técnica bastante útil. 10
PRÍNCIPIOS BÁSICOS DE USABILIDADE Facilidade de navegação: Usuário deve chegar a uma informação com facilidade (Não precisa ser em três cliques); Informação deve estar bem distribuída; Links devem ser representativos. 11
PRÍNCIPIOS BÁSICOS DE USABILIDADE Simplicidade Quanto mais rápido se chegar a uma informação desejada, melhor; Evite adornos desnecessários, isso prejudica o enfoque 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 apresentadas em páginas principais; Informações secundárias devem ser disponibilizadas em páginas de suporte e acessadas 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). 12
ACESSIBILIDADE Conceito que garante que o site possa ser acessado por qualquer pessoa, de qualquer lugar, como qualquer dispositivo, tendo ela qualquer 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 e com dimensões reduzidas; Estejam com olhos, mãos ou ouvidos ocupados; Não tenha um navegador Web atualizado ou diferente dos tradicionais. 13
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 login para acesso; Para links use como marcador nomes e nunca links; Em páginas com textos, coloque as informações importantes 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. 14
ARQUITETURA DA INFORMAÇÃO Legibilidade em sites: Nunca ocupe mais de 80% do seu site com conteúdo; Reserve 20% da área para informações sobre a navegaçã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
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 do endereço do site; Cuidado na escolha do título do site, pode confundir um usuário. Sempre trate os erros. ARQUITETURA DA INFORMAÇÃO Resposividade: 16
ARQUITETURA DA INFORMAÇÃO Resposividade: ARQUITETURA DA INFORMAÇÃO Resposividade: http://marketshare.hitslink.com É possível dentre vários outras estatísticas verificar qual sã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 TIPOGRAFIA CORES LAYOUT 17
FACE CORES 18
PROFISSIONAIS ENVOLVIDOS: Web designer Webdeveloper Webmaster DOMÍNIO E HOSPEDAGEM 19
DOMÍNIO Nome utilizado para localizar e identificar conjuntos de computadores dentro da Internet. Para não ser necessário memorizar o endereço IP de cada site, o domínio é aplicado. Sendo assim, o primeiro passo para começar a fazer um site é ter um domínio registrado! HOSPEDAGEM O serviço de hospedagem é necessário para que o site fique on line e possa ser acessado pelas outras pessoas que estejam 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. 20
UM BOM SITE DEVE OFERECER... ELEMENTOS DE NAVEGAÇÃO Ajuda o usuário a se mover dentro do site e acessar áreas específicas. UM BOM SITE DEVE OFERECER... ELEMENTOS DE ORIENTAÇÃO Diz ao usuário onde ele está dentro do site. UM BOM SITE DEVE OFERECER... ELEMENTOS DE INTERAÇÃO Processa informações e dados incluídos pelo usuário, como em buscas, formulários e enquetes. 21
UM BOM SITE DEVE OFERECER... ELEMENTOS DE CONTEÚDO Toda a informação em forma de texto, sons, vídeos ou animações. UM BOM SITE DEVE OFERECER... ELEMENTOS DE EMOÇÃO Apelam para o sentimento do usuário, provocando curiosidade ou convidando a continuar a navegação no site. 22