Curso MCWD 2.0 - Multimedia Certified Web Designer
Com a nova geração de comunicação virtual e serviços, faz-se necessário o desenvolvimento de aplicações mais interativas, sofisticadas e com troca de dados. Sites com conteúdo dinamicamente atualizados usando das diversas áreas técnicas do design propriamente dito e da arquitetura da informação, programação, usabilidade, acessibilidade entre outros. Com a formação MCWD, o profissional de Web Design fica capacitado plenamente a atender às necessidades do mercado, que se torna mais exigente.
Ao finalizar a formação MCWD você terá a condição de desenvolver sites com:
Conteúdo dinâmico – a partir de bancos de dados;
Conteúdo multimídia (com animações, áudio e inserção de vídeos);
Imagens otimizadas para a Internet;
Conceitos de web design (com direção de arte e usabilidade);
Qualidade e produtividade (com o uso integrado das tecnologias Adobe Web & Design Premium).
Desenvolvimento de sites para smartphones e tablets.
Realizando sua capacitação na ENG, você faz os exames simulados, preparatórios para as provas de Certificação da ADOBE, além de projetos-piloto que irão solidificar os conhecimentos adquiridos nas aulas instrucionais.
A formação completa é composta por 08(oito) treinamentos/ módulos:
- Dreamweaver
- Fireworks
- Introdução a Bases de Dados
- Dreamweaver com acesso a base de dados
- Flash Básico
- Direção de Arte para Internet e Intranet
- Design Responsivo/Adaptativo
Pré-requisito: Conhecimento de Informática básica e noção de Web.
Conteúdo Programático:
DREAMWEAVER
Tipos de documentos web: HTML, XHTML, XML, XSLT.
A informação versus formatação
Formatos XHTML: Transitional, Frameset, Strict.
Breve análise: XHTML 1.1.
Criando um site no Dreamweaver.
Adicionando conteúdo ao site:
- paragrafos
- listas
- caracteres especiais
- tag <span>
Trabalhando com tags <meta>
Introdução às folhas de estilo CSS:
- redefinindo tags
- Criando o layout
- Tabelas
- Tag <div>
- Tabelas de dados
- Como criar código xhtml correto em tabelas que apresentam dados.
Adicionando recursos de navegação ao site:
- links
- âncoras
- barra de navegação
Paradigmas para navegar entre conteudos de um site:
- página a página
- usando a tag <iframe>
- usando Ajax (breve comentário)
Agilizando a produção:
- Bibliotecas e Templates
- Criando formulários
- Adicionando comportamentos Javascript ao site (ex: validação de formulários).
Checando o site do ponto de vista da qualidade:
- Executando os testes internes do Dreamweaver
- Submetendo à aprovação do W3C.
Publicando o site:
- FTP
- Sincronização
- Recurso 'Cloak'
- Comandos GET e PUT
- Tipos de CHMODE
- Projeto Piloto
FIREWORKS
Introdução
- Sobre o Fireworks
- Fireworks PNG
Conhecendo o ambiente de trabalho
- Criar, configurar e salvar um novo documento
- A página inicial
- Abrir um documento existente
- A área de trabalho
- O Painel Tools (Ferramentas)
- O Painel Properties (Propriedades)
- O Painel Layers (Camadas)
- Bitmaps
Importar Bitmaps
- Editar Bitmaps
- Cortar
- Selecionar pixels
- Excluir pixels
- Aplicar um preenchimento de gradiente
- Retocar Bitmaps
- Clonar pixels
- Desfocar bordas aplicando difusão
Vetor
- Formas básicas
- Formas compostas
- Formas livres
Texto
- Criar e formatar e blocos de texto
- Editar blocos de texto
- Anexar texto a um caminho
- Correção Ortográfica
- Verificar e corrigir a ortografia
- Personalizar a verificação ortográfica
Máscaras e Mesclagem
- Máscaras
- Máscaras de Vetor
- Máscaras de Bitmap
- Criar máscara com o comando Paste
- Criar máscara com o comando Paste Inside
- Criar máscara com o painel Layers
- Mesclagem
- Modos de mesclagem
Estilos, Símbolos e URLs
- Estilos
- Aplicar um estilo
- Criar um estilo
- Excluir um estilo
- Salvar uma biblioteca de estilos
- Importar estilos
Animação
- Símbolos de animação
- Criar um símbolos de animação
- Visualizar uma animação na área de trabalho
- Estados
- Adicionar estados
- Duplicar estados
- Exportar uma animação
Slices, Rollover e Hotspots
- Slices (Fatias)
- Criar slice com base em um objeto selecionado
- Rollover (Sobreposição)
- Adicionar interatividade simples a slices
- Criar slice com a ferramenta Slice
- Adicionar interatividade deslocada simples
- Atribuir URLs a slices
- Hotspots (Pontos de Acesso)
- Criar um hotspot retangular
- Criar um hotspot circular
- Criar um hotspot com forma irregular
- Preparar hotspots para exportação
- Criar mapas de imagem
Botões e Menus Pop-up
- Criar uma barra de navegação básica
- Menus pop-up
- Exportar o menu pop-up
Desenvolvimento de protótipos de sites web
- Trabalho com páginas do Fireworks
- Criar um protótipo de página
- Criar uma página-mestre
- Criar novas páginas a partir da página-mestre
- Editar a página-mestre
- Exportar um layout de CSS
Otimização e exportação
- Usar o Export Wizard
- Usar o Imagem Preview
- Otimizar na área de trabalho
- Otimizar usando uma opção pré-definida
- Escolher um tipo de arquivo
- Exportar a partir da área de trabalho
Automação de tarefas
- Extensão do Fireworks
- Criação de scripts
- Criação de scripts com o painel History
- Salvar etapas como um comando para reutilização
- Sobre a criação de scripts com JavaScript
- Gerenciar comandos
- Renomear um comando personalizado
- Excluir um comando personalizado
- Editar um comando usando JavaScript
- Editar ações selecionadas no painel History usando JavaScript
INTRODUÇÃO AO BANCO DE DADOS
Diferenciação entre SBD's e SGBD's
Tipos de bancos de dados:
- Relacional
- Orientado a objetos
- XML
Ferramentas comerciais open source existentes
Ferramentas comerciais proprietárias existentes
Como projetar um Banco de Dados
- Modelagem de aplicativos versus modelagem de banco de dados
- Como determinar os dados necessários para o aplicativo
- Introdução ao meta modelo E-R.
- Principais casos de equivocos em modelagem E-R
- Distinção entre termos: relação e relacionamento.
- Compreendendo o modelo reducionista relacional.
- Organização dos dados em tabelas
- Os relacionamentos entre tabelas
- Normalização de banco de dados
- Uso de Índices
Conceitos e sintaxe SQL
- Comando SELECT
- Cláusulas FROM, WHERE, ORDER BY e INNER JOIN
- Comando UPDATE
- Comando INSERT
- Comando DELETE
Discussão sobre como publicar bancos de dados na web
DREAMWEAVER AVANÇADO COM BANCO DE DADOS
Diferenciação entre páginas estáticas e páginas dinâmicas
Definindo um site dinâmico no Dreamweaver
Linguagens server-side suportadas pelo Dreamweaver (breve análise)
- ASP.NET
- PHP
- JSP
- CFM
Tipos de bancos de dados.
Criando a comunicação entre a base de dados e a linguagem escolhida:
- DSN (ASP.NET, JSP, CFM)
- Acesso direto ao servidor de banco de dados (PHP)
Discussão sobre a estrutura para desenvolver aplicativos web:
- o modo linear (apresentado no curso)
- modos não lineares (breve demonstração para aqueles que pretendem avançar em programações mais complexas)
Criando uma recordset.
Criando uma página de resultados:
- comportamento Repeat Region
- adicionando a barra de navegação
- adicionando a barra de status
Adicionando imagens dinamicamente à página de resultados
Envio de dados através de páginas
- HIDDEN FIELDS
- GET
- POST
- COOKIE
- SESSION
Compreendendo a confecção de um website dinâmico: lado cliente X lado administrativo
Base para desenvolvimento de um website:
Lado Cliente:
- página de busca
- simples
- composta
- página de resultado
- usando a cláusula SELECT do SQL
- usando a cláusula INNER JOIN do SQL adjunto ao SELECT
- página de detalhe
Lado Administrativo:
- Controle de acesso
- Página de login
- Protegendo páginas contra acesso indevido
- Página de inserção
- Página de edição
- Página de deleção de registros
Projeto Piloto
FLASH PROFESSIONAL
- Apresentação
-Introdução
-O que há de Novo no Flash CS5
-A interface do Flash
-Criando um novo documento
-A Barra de Ferramentas
-A Timeline
-Introdução à Animação
-Animação quadro a quadro
-Biblioteca
-Criação de Símbolos
-Animação Tween Motion (Clássica)
-Animação Tween Motion (CS5)
-Animação dentro de um movie clip (exercício)
-Máscara (exercício)
-Motion Presets
-Animação com Bones
-Filtros
-Animação com filtros
-Blends
-Introdução ao Actionscript
-O painel de Ações
-Ações básicas de navegação
-Botões (simples, invisível, com áudio)
-Ações no botão
-Criando uma navegação na timeline
-Ação getURL()
-Abrindo uma página web
-Abrindo um cliente de e-mail
-Áudio
-Importando arquivos de áudio
-Utilizando áudio da biblioteca comum
-Vídeo
-Conversão de arquivos de vídeo
-Publicação
-Configurações do HTML
-Configurações do Flash
-Configurações para arquivos acessados em CD-ROM.
-Projeto Final
FLASH PROFESSIONAL AVANÇADO
- Introdução
- Revisão (Classic Motion Tween, Motion Tween CS5, Shape Tween, Motion Guide e Máscara)
- Movie Clip
- Instâncias
- Classe
- Introdução ao Actionscript
- Pontuação
- Variáveis
- Propriedades
- Métodosº Dia - Manhã - 2º Tempo
- Máscara Dinâmica
- Arrastar e Soltar
- Janelas
- Menu Deslizante
- Menu Abre e Fecha Dia - Tarde - 1º Tempo
- Tela Cheia
- Menu de Opções / Impressão
- Posição de um objeto na telaº Dia - Tarde - 2º Tempo
- Propriedades
- A ação With
- Botão selecionado/não selecionado
- Pré-carregador simples
- Pré-carregador avançado
- Pré-carregador com porcentagem
- Pré-carregador com barra de progressão animadaia - Tarde - 1º Tempo
- Leitura de dados externos
- Leitura de dados externos com XML
- Leitura de dados externos com XML e imagens
- Leitura de arquivos externos (SWF, JPG e PNG)
- Data e Hora (relógio)
- Formulário de Email
- Projeto Piloto
DIREÇÃO DE ARTE E USABILIDADE NA WEB
- Características do Meio (Resolução, Profundidade de Cor, Tipologia, Cachê)
- O Projeto Gráfico
- Interfaces
- Metáfora
- Tema
- Projeto baseado em Informação
- Imagem Digital
- Formatos
- Anti-aliasing
- Dithering
- Gif Animado
- Imagem de Fundo
- Corte de Imagens em Fatias (Slicing)
- Javascript
- Flash
- Preload Images
- Pop Up
- Templates
- Libraries
- Server Side Includes
- DHTML
- Layers
- CSS e Timeline.
- Teoria da Usabilidade
TÉCNICAS DE INTEGRAÇÃO ENTRE DESIGN E USABILIDADE
- Integração Creative Studio Web Standard
- Produção Integrada com os softwares Adobe Creatve Suite Web Standard: Dreamweaver, Fireworks, Flash e Contribute para a criação de um Site - Piloto
