Projeto Integrador Web Design Maicon Lino Curso Técnico em Informática Educação a Distância 2017
EXPEDIENTE Professor Autor Maicon Lino Design Instrucional Deyvid Souza Nascimento Renata Marques de Otero Terezinha Mônica Sinício Beltrão Revisão de Língua Portuguesa Letícia Garcia Diagramação Izabela Cavalcanti Coordenação Anderson Elias Coordenação Executiva George Bento Catunda Coordenação Geral Paulo Fernando de Vasconcelos Dutra Conteúdo produzido para os Cursos Técnicos da Secretaria Executiva de Educação Profissional de Pernambuco, em convênio com o Ministério da Educação. Setembro, 2017
1.Projeto Integrador Web Design 1.1 Apresentação O Projeto Integrador (PI) é uma nova chance para o aluno demonstrar os conhecimentos adquiridos durante o curso de Informática, produzindo um projeto que reúna as competências aprendidas individualmente. Dessa forma, o aluno tem a oportunidade de melhorar as notas que obteve nas competências em Web Design, para atingir a média esperada, mostrando que aprendeu o necessário para a produção de um website. Aproveite esta chance. Planejamos este PI para que você possa se aperfeiçoar nos conhecimentos expostos nos módulos passados. Utilize o material disponibilizado para realizá-lo. Atente bem ao que for solicitado, a forma pedida e, ao final, verifique tudo antes de enviar para, assim, obter o melhor aproveitamento. 1.2 Disciplinas O curso de Técnico em Informática, módulo Web Design, contempla as seguintes disciplinas: Edição e Processamento de Imagem; Ilustração Vetorial para Web; Multimídia; Web Design. O conhecimento exposto de forma individual nas diversas competências que compõe estas disciplinas será verificado na produção de um produto de forma unificada. Qualquer dúvida sobre o assunto, procure primeiramente no caderno de estudo respectivo da disciplina. 4
1.3 Produto Determinado "cliente" irá abrir sua primeira distribuidora de roupas. Ele irá selecionar os melhores produtos do mercado e irá divulgar os preços, marcas, tamanho, cor e fotos em um site da internet (não é um e-commerce varejo, a empresa será distribuidora de roupas no atacado). Você tem a missão de fazer a apresentação desta pequena empresa para a web de forma harmônica e elegante. Atenção! A empresa é uma distribuidora de roupas, então não é para fazer um site no modelo de e- commerce, o cliente não irá comprar, entrará no site apenas para solicitar orçamento (formulário simples contendo informações do comprador). Assim, logo após inserido os produtos no site, os clientes irão entrar e realizar seu orçamento que contém: Nome completo do cliente; Endereço; Telefone; E-mail para contato; Descrição ou dúvida. Utilize os conhecimentos aprendidos, para passar bem a ideia de como seria a vitrine virtual da distribuidora que você aprendeu nas disciplinas do curso. Use os conhecimentos aprendidos na disciplina de Web Design. 1.4 Desenvolvimento Nosso "cliente" não tem ideia alguma sobre marketing. Também teremos que ajudá-lo com isso. Utilize os conhecimentos de Ilustração Vetorial, para fazer uma marca em SVG bem original. Invente também o nome da distribuidora de roupas. Você pode pesquisar à vontade para fazer um trabalho que lhe agrade, mas não deve copiar algo que já exista, deve fazer o seu. A cópia é plágio, o maior pecado de um designer. Plágio é punido com zero na avaliação. Então, tome muito cuidado. 5
É possível pesquisar imagens vetoriais gratuitas em sites específicos, em caso de utilizar alguma logomarca de um site livre, modificá-la e informar a imagem original e a modificada por você. Esses sites são úteis apenas para apoio e não para uso indevido como cópia integral do seu conteúdo, sejam razoáveis e sábios em fazer essa escolha, não copiem, criem ou modifiquem algo com licença livre. OBS.: caso o aluno copie qualquer material existente, em sua totalidade, de material público ou privado, irá configurar plágio e a nota será zerada. Utilize as fases do DADI: Definição, Arquitetura, Design e Implantação, para planejar os elementos e a disposição do site. Lembre-se de passar a atmosfera do gênero literário escolhido. Por exemplo: terror para uma atmosfera sombria, ficção científica passa uma atmosfera de modernidade etc. 1.5 Exigências O aluno deve enviar o seguinte material para avaliação: DISCIPLINA OBJETIVO AVALIAÇÃO Edição e Processamento de Imagem Ilustração Vetorial para Web Multimídia Durante a produção de um site, temos, na produção de sua parte estética, imagens. Algumas delas são grafismos. Elementos gráficos que vão apoiar a mensagem passada. Na disciplina de Edição e Processamento de Imagem vimos como compor, através de vários efeitos, imagens para web. Na produção de uma identidade visual são utilizadas formas com linhas e cores, que são agilizadas utilizando um software de edição vetorial. Use o Inkscape para produzir uma marca coerente para a editora de livros. Atualmente, a multimídia exerce um poder de persuasão de vendas grande. Na disciplina de Multimídia, foi utilizado o Google Web Design (GWD) para a produção de elementos multimídia. O aluno deve enviar apenas um dos arquivos original do Gimp, XCF, utilizado na criação de um dos grafismos do site. Escolha o arquivo onde utilizou mais efeitos e que possua mais camadas. Será avaliada a qualidade no uso das ferramentas do Gimp e utilização de camadas. Só será aceito Gimp, pois foi o software utilizado na disciplina de Edição e Processamento de Imagem. Caso o aluno envie um arquivo do Gimp sem efeitos adotados e sem camadas, receberá zero nesta avaliação. O aluno deve enviar apenas um dos arquivos original do Inkscape, SVG, utilizado na criação da marca da editora de livros. O aluno deve fazer uma animação relacionada com o gênero literário do website e colocar na página inicial. 6
Web Design Concepção Web Design Produção A disciplina de Web Design aborda a concepção e a produção de um website em HTML 5. O tutor irá verificar as qualidades estéticas que o site possui, em suas diversas páginas e elementos. Na produção foram mostrados diversos elementos como títulos, parágrafo, formulário etc. Todos são necessários de alguma forma em um site. O aluno deve fazer um site com coerência estética nos diversos elementos que compõe a página. O grafismo pedido no primeiro item e a marca dos arquivos mencionados anteriormente devem fazer parte do site. No site produzido pelo aluno, deve haver a lista de páginas abaixo, com menu colocado adequadamente para acesso. 1. Página inicial de apresentação da distribuidora com marca, grafismos e animação do GWD; 2. Página com uma tabela contendo imagens pequenas de produtos - mínimo de cinco produtos e três colunas. Uma coluna para a imagem do produto, outra para a descrição e a última para realizar o orçamento. 3. Página com formulário de contato (orçamento ou dúvidas). 4. Página Sobre com informações inventadas do nome da distribuidora, seu endereço físico, telefone em uma lista HTML. 1.6 Avisos O aluno deve ter atenção às seguintes regras: O projeto é feito individualmente. Todos os arquivos solicitados devem estar compactados e ter um tamanho menor que 5MB. Verifique a resolução das imagens utilizadas. A resolução também é um fator de avaliação. O arquivo compactado deve possuir o nome e o sobrenome do aluno, seguindo o exemplo: FulanoDeTal.zip Caso o aluno copie algum artefato já existente, como uma marca de startup real, ou trabalho de algum colega, a atividade completa será zerada. 7