Apostila Web Design by Carlos Alberto

WebDesign

Introdução ao

Webdesign

Introdução ao Webdesign

Agenda do Curso • Primeira Etapa – Internet e Webdesign – Tarefas do Webdesigner • Segunda Etapa – Tecnologias de uso corrente – Desenvolvendo um Website

ENG DTP & Multimídia

• ENG DTP & Multimídia » Empresa com 25 anos de atividades » Empresa parceira da Adobe desde 1991 » Centro de Treinamentos Oficiais Adobe, Autodesk e COREL » Parceiro de Licenciamentos para Ensino » SP, PR e DF » Atendimento Nacional » Mais de 3000 profissionais capacitados em 2008.

A Internet

Um Mundo de Mudanças – Mudança ocorrida no Brasil em 1996 – Novos termos, para a época: • Conexão • Navegador • Site • Portal • B2C • B2B

O Horizonte da Internet ainda está por vir Contatos de Clientes com Empresas

Contatos de Clientes com Empresas

Passado

Presente! Internet

Mail

Phone Fax Internet

Phone Mail Fax

Fonte: CRM Project, Feinburg; Defying the Limits: Reaching new Heights in Customer Relationship Marketing; Online Publishers Assoc; Set 2004 © 2009 by ENG DTP & Multimídia – Todos os direitos reservados

O novo Profissional

Um Mundo de Mudanças – Quem faz o quê? • Conteúdo • Layout e Navegação • Sistema

– O novo profissional para desenvolver os Sites deve ter conhecimentos de: • Conceitos de Design • Conceitos de Informação • Conceitos Técnicos

O novo Profissional

O que se espera deste Profissional – Preparo Profissional • Criação • Desenvolvimento • Efetividade • Conhecimentos Gerais • Certificação

– Vanguarda • Atualização Constante • Novas Tecnologias • Produtividade

O Webdesigner

Mas o que o Webdesigner faz? – – – – – – – –

Planejamento do Site Opção por uso de Tecnologias Agrupamento de Informações Desenvolvimento de Layouts Criação e Edição de Imagens Desenvolvimento de Animações Criação de Base de Dados Criação de Páginas: • Estáticas • Dinâmicas

Planejamento de Web Sites

O que o planejamento deve abranger Objetivos bem definidos levam ao sucesso: • O que o Web site irá representar no negócio do cliente • Público-Alvo • Funcionalidades • Operação do Web Site • Antecipação de Necessidades do Cliente © 2009 by ENG DTP & Multimídia – Todos os direitos reservados

Etapas do Desenvolvimento de Web Sites

Tarefas do Desenvolvimento (1) – Levantamento de Informações do cliente, para composição redacional e de mídias – Dados gerais e de operação da empresa – Sistemas em uso – Tecnologias e Sistemas já utilizados – Opções Tecnológicas – Criação de Base de Dados – Estruturação do Web Site – Desenvolvimento das Páginas – Produção e Edição de Mídias (imagens, vídeos, textos, animações e áudio)

Etapas do Desenvolvimento de Web Sites

Tarefas do Desenvolvimento (2) – Criação de Formulários/Coleta de Dados – Desenvolvimento de Web Services e Integração com outros Sistemas – Desenvolvimento de Elementos Multimídia – Definição de Relatórios e Métricas – Sistemática de Atualização de Conteúdo – Testes (e muitos testes) – Implementação – Acompanhamento – Constantes Evoluções do Web Site © 2009 by ENG DTP & Multimídia – Todos os direitos reservados

Estruturação de Web Sites

A montagem da árvore de navegação, por níveis – Home-Page • Conteúdo • Links principais • Atualização

– Agrupar Assuntos – Páginas Protegidas • log-in

Institucional

Home-page

– Sistemas de Administração

Administração

Produtos

Clientes Log-in

Operações e Atualização

Pedidos do Cliente

Estruturação de Web Sites

A montagem da árvore de navegação, por níveis – A partir da Estruturação, o Site vai sendo organizado, já se viabilizando para ser desenvolvido. Consulta Pedido Operações e Atualização

Ordens de Produção

Web Services Fornecedores

Relatórios

Atualização de Conteúdo

Preços, Qtds, Descritivos

Conteúdo Web Sites

O conteúdo de Web Site – – – – – – – –

Linha de Comunicação Direção de Arte Orientação de Usabilidade Redação dos textos Revisão de Textos Criação de Layouts, CSS Produção de Vinhetas Produção e Edição de Imagens – Produção de Animações

Conteúdo Web Sites

Ferramental necessário Criação e Manutenção de Sites, e suas páginas Dinâmicas e estáticas: Editor de Design e Código. Dreamweaver – Árvore do Site – Criação das páginas estáticas e dinâmicas – Aplicação de Estilos – Aplicação de Imagens e Mídias – Publicação – Manutenção © 2009 by ENG DTP & Multimídia – Todos os direitos reservados

Conteúdo Web Sites: Mídias

Ferramental necessário Criação e Edição de Imagens, para web sites.

Fireworks – – – –

Específico para Internet Criação e edição de Imagens Otimização de Imagens Trabalhos em sequência

Conteúdo Web Sites: Mídias

Ferramental necessário Criação e Edição de Imagens, para web sites.

Photoshop – Padrão para tratamento de imagens – Imagens para web e design gráfico – Composição de imagens

WebDesign

Introdução ao

Webdesign Intervalo

Conteúdo Web Sites: Mídias

Animações Animações Multimídia Animação Interativa Vídeos Interativos Aplicações Jogos Aplicações para Celulares

Conteúdo Web Sites: Mídias

Ferramental necessário Edição de vídeo, tanto para vinhetas, como para aplicações interativas no Flash Premiere

– Edição de Vídeo

AfterEffects

– Aplicação de Efeitos

Web Sites Dinâmicos Páginas estáticas: Como funcionam

Requisição em HTTP

cliente

<HTML> Produto X Produto Y Produto Z </HTML>

HTML

Web Server

http://www.eng.com.br/cursos/abril_2008.html

Web Sites Dinâmicos Páginas dinâmicas: Como funcionam

cliente

<HTML> Product X Product Y Product Z </HTML>

ColdFusion ASP .net PHP Java

Banco de Dados

HTTP

Web Server

http://www.eng.com.br/site/index.cfm

HTML

Servidores de aplicação

Web Sites Dinâmicos

Tecnologias Disponíveis Tecnologias de Servidores de Aplicação: Onde as páginas serão processadas, e de onde os bancos de dados serão acessados. • CGI • ASP • .net • PHP • ColdFusion • Java © 2009 by ENG DTP & Multimídia – Todos os direitos reservados

O Webdesigner

Preparo Profissional – Formação traz Conceitos – Treinamentos trazem domínio das Ferramentas Tecnológicas – Leitura e Pesquisa trazem Visão – Acompanhamento de Atualidades traz Posicionamento e Opinião – Participação na Comunidade traz atualização e posicionamento no mercado de trabalho – Certificação traz a certeza de que se detém a tecnologia. © 2009 by ENG DTP & Multimídia – Todos os direitos reservados

O Webdesigner

Trajetória Profissional – Capacitação • Formação • Treinamento

– Estágio • Preparação Mídias • Produção Animações • Desenvolvimento de Páginas • Operação de Sites

– Contratação ou Empreendimento • Produção Animações • Desenvolvimento de Sites com Páginas Estáticas e Dinâmicas

Atualização

Onde se manter atualizado – Pesquisas constantes – Participação de Comunidades de Design e Webdesigners

– Leituras – Treinamentos (pelo menos um por semestre)

– Testar novas Tecnologias

O Webdesigner

Oportunidades do Mercado de Trabalho – Desenvolvimento de Web Sites • Sites dinâmicos com acesso a dados

– Desenvolvimento em Flash • ActionScript • Jogos • Interfaces para Equipamentos • Vídeo na Web

– Web 2.0 • FLEX

MCWD

Multimedia Cerfified Web Designer – Visão de todas as etapas do desenvolvimento de um Web Site. – Especialização Tecnológica, com Treinamentos Oficiais Adobe. – Aprofundamento que traz oportunidades profissionais. – Reconhecimento do Mercado.

O início sólido

Dreamweaver Criação e Manutenção de Sites, e suas páginas Dinâmicas e estáticas: Editor de Design e Código. Dreamweaver – Criação das Sites – Aplicação de Estilos – Uso de HTML, X-HTML, JavaScript, AJAX, SPRY – Aplicação de Imagens e Mídias – Publicação – Manutenção Colegiada © 2009 by ENG DTP & Multimídia – Todos os direitos reservados

Encerramento

Obrigado!