Ementa

Módulo I - Content & Design Horas Dias
Photoshop para WEB 28 07

Photoshop para WEB

  • Introdução

  • - Apresentação
  • - Versões
  • - Configuração na máquina
  • - Instalação
  • - Abrir arquivos
  • - Criar novos arquivos
  • - Salvando arquivos

  • Ferramentas

  • - Zoom
  • - Crop
  • - Hand
  • - Move
  • - Free Transform
  • - Desfazer
  • - Painel History
  • - Preferences
  • - Usando Régua, Gride e Linhas Guias
  • - Editando o layout

  • Conceitos

  • - Ferramentas de Seleções
  • - Opções de Seleção
  • - Edição não destrutiva

  • Vetores

  • - Conceito
  • - Criando Vetores
  • - Path
  • - Pen Tool

  • Layers

  • - Conceitos
  • - Background
  • - Nova Layers
  • - Duplicando
  • - Organização
  • - Agrupar
  • - Mask
  • - Layers Style
  • - Camada de Preenchimento
  • - Camada de Ajuste
  • - Smart Object

  • Cores

  • - Conceito
  • - Modelos
  • - Alpha Channels

  • Efeitos e Textos

  • - Conceito
  • - Type Tool e Mask Tool
  • - Painels
  • - Gradient Tool
  • - Styles

  • Pintura

  • - Conceito
  • - Brush
  • - Pencil Tool
  • - Eraser
  • - Painel History

  • Correção

  • - Conceitos
  • - Clone
  • - Painel
  • - Patch
  • - Red Yes
  • - Sharpen
  • - Blur
  • - Smudge
  • - Sponge

  • Introdução

  • - Apresentação
  • - Versões
  • - Configuração na máquina
Webdesign com CSS3 32 08

Webdesign com CSS3

  • Introdução às folhas de estilo

    • - Definições e sintaxe de estilos
    • - Aplicação de estilos (inline, incorporados e externos)
    • - Compatibilidade de browsers (prefixos específicos)
    • - Valores e unidades de medida
    • - Media Queries (aplicando estilos a diversos dispositivos)

  • Seletores

    • - Tipos básicos de seletores
    • - Genealogia de seletores (ancestral, filho, irmão, etc)
    • - Grupamento de seletores
    • - Herança e efeito cascata
    • - Diretiva !important
    • - Pseudo-classes
    • - Atributos

  • Propriedades fundamentais

    • - Textos, fontes, margens e parágrafos
    • - Fontes externas
    • - Backgrounds, máscaras e sprites
    • - Cores, opacidades e aparências
    • - Bordas e sombras
    • - Positions, displays, floats e camadas

  • Layouts

    • - Múltiplas colunas
    • - Box Model e Box Layout
    • - Template Layout

  • Efeitos CSS

    • - Gradientes
    • - Transformações 2D
    • - Transformações 3D
    • - Transições
    • - Animações

  • Rigor e idiossincrasias de browsers

    • - Aplicando montagens rigorosas com Pixelperfect
    • - Hacks e dicas de comportamento de browsers

  • Desempenho

    • - Medição de tempo de carregamento com ySlow e Firebug
    • - Otimização de código e imagens
Projeto I 12 03

Projeto I - Content & Design

Competência Nível de importância
- Ser capaz de montar uma página seguindo os WebStandards a partir de um layout fornecido no Photoshop Principal
- Conhecer muitas das particularidades de cada browser e conseguir montar um layout consistente entre eles Alto
- Dominar técnicas que garantam um melhor desempenho no carregamento da página e elementos adjacentes como imagens e estilos Alto
- Ser capaz de efetuar pequenos ajustes no layout ou produzir variações de telas (como telas internas) a partir de um layout gerado no Photoshop Médio
- Ser capaz de adaptar o layout a outros tipos de displays ou mídias no processo de montagem Médio
- Saber diferenciar as novidades do HTML5 a fim de poder discernir entre projetos que possam investir nas novidades dos que devam ser mais retroativamente compatíveis Baixo
- Ser capaz de conceber um layout no Photoshop a partir do zero Baixo
- Ser capaz de aplicar efeitos CSS3 como gradientes, transições, transformações ou animações Baixo

  • Avaliação

    - Projeto onde será entregue um layout para a devida montagem pelo aluno. A semântica das tags, o rigor da similaridade entre o PSD e o resultado nos principais browsers serão avaliados. Será necessário ainda criar e montar uma página interna respeitando a identidade visual da tela fornecida ou adaptar o layout para algum dispositivo móvel.

  • Questões a serem respondidas pelo aluno

    1. Durante o processo de montagem, onde você pode perceber comportamentos distintos entre browsers?
    2. Se utilizou o doctype HTML5, quais tags HTML5 foram utilizadas e o que você poderia sugerir no lugar se houvesse obrigação de utilizar doctype XHTML strict?
    3. Se utilizou o doctype XHTML strict, quais tags HTML5 poderiam ter sido utilizadas caso optasse pelo doctype HTML5?
    4. Se optou por montar uma tela interna, sugira modificações no CSS para aplicar a outro tipo de mídia
    5. O que você fez pensando em obter um melhor desempenho final?
Subtotal 100 25
Módulo II - Web Applications Horas Dias
Javascript Essencial 32 08

Javascript Essencial

  • Introdução

    • - Histórico e fundamentos
    • - Editores e ferramentas
    • - Inserindo primeiros scripts

  • Lógica de programação

    • - Variáveis e tipos de dados
    • - Operadores
    • - Estruturas condicionais e laços
    • - Funções

  • Orientação a Objetos

    • - Objetos
    • - Funções construtoras
    • - Atributos e métodos
    • - Objetos x Arrays (sintaxe de acesso e for in)
    • - JSON

  • Javascript API

    • - Manipulação de números
    • - Manipulação de strings
    • - Manipulação de datas e horas
    • - Expressões Regulares

  • Objetos nativos

    • - Objeto window
    • - Objeto document
    • - Outros objetos (navigator, history, screen)
    • - Formulários
    • - Cookies

  • DOM - Document Object Model

    • - Árvore DOM
    • - Métodos de busca de nós
    • - Manipulação de nós

  • Eventos e animações

    • - Instruções setTimeout e setInterval
    • - Propagação e bubble de eventos

  • Dicas de desempenho

    • - Evite código duplicado e insira scripts no final
    • - Minify e obfuscate
jQuery & jQueryUI 24 06

jQuery & jQueryUI

  • Introdução ao jQuery

    • - Como adicionar jQuery (sem conflitos)
    • - Seletores e estrutura do objeto jQuery
    • - Métodos básicos
    • - Subsets de elementos (not, filter, find, slice, has)
    • - Iterações (each, map)
    • - Cadeias (end)

  • Manipulações com jQuery

    • - Capturando eventos (bind, unbind, toggle)
    • - Atributos e métodos do objeto do evento
    • - Estruturas condicionais e laços
    • - Manipulações DOM
    • - Animações
    • - Funções gerais

  • jQuery UI

    • - Download e configuração
    • - Efeitos
    • - Drag and Drop
    • - jQuery UI Widgets
AJAX & HTML5 32 08

AJAX & HTML5

  • Engenharia da Web

    • - Revisitando o HTTP
    • - Serviços Web dinâmicos
    • - URLs amigáveis com Apache ModRewrite

  • Nivelamento em PHP

    • - Sintaxe elementar
    • - Comandos de saída
    • - Captura de parâmetros de requisição
    • - Conversões para JSON

  • Fundamentos de AJAX

    • - Efetuando requisições HTTP assíncronas
    • - Objeto XMLHTTPRequest
    • - XMLHTTPRequest callbacks

  • AJAX com jQuery

    • - Métodos load, get e post
    • - Método especial $.ajax()

  • Dados no cliente

    • - Nós editáveis e atributos data-*
    • - Local Storage, Session Storage e Web SQL Database
    • - Estados do navegador (online e offline) e gestão de cache
    • - FileReader e Filesystem API
    • - History API

  • Multimídia

    • - Manipulação de Canvas 2D e 3D
    • - Controle de áudio e vídeo
    • - Mapas e geolocalização (introdução ao Google Maps API)

  • HTML5 Avançado

    • - Web Workers (Threads)
    • - Introdução aos WebSockets
Projeto II 12 03

Projeto II - Web Applications

Competência Nível de importância
- Dominar com profundidade a linguagem Javascript, sua aplicações e finalidades em sistemas Web Principal
- Ter conhecimentos consistentes na biblioteca jQuery Alto
- Ter conhecimentos consistentes nas novidades do Javascript propostas no HTML5 Alto
- Conhecer o funcionamento do ambiente Web e dominar quando e como optar por realizar requisições assíncronas (AJAX) Alto
- Conhecer a biblioteca jQueryUI, seus efeitos e widgets Médio
- Identificar técnicas que melhorem o desempenho da aplicação no que diz respeito ao tempo de carregamento e desoneração do servidor Médio
- Dominar técnicas que suportem aplicativos que operem online ou offline Baixo
- Dominar o Google Maps API e integrar com ferramentas de geolocalização Baixo
- Manipular gráficos e imagens em Javascript Baixo
- Conhecer alguma linguagem server side como PHP Baixo

  • Avaliação

    - A partir do projeto entregue ao final do primeiro módulo, aplique o Javascript que julgar necessário a fim de conseguir a melhor experiência possível do usuário. Será necessário validar formulários, aplicar algum efeito e realizar chamadas assíncronas. É importante estar atento às competências ao desenvolver o projeto.

  • Questões a serem respondidas pelo aluno

    1. Quais técnicas HTML5 você utilizou no projeto? Descreva onde e quais ganhos elas proporcionaram.
    2. Em que situações você realizou requisições assíncronas? Descreva onde e quais ganhos elas proporcionaram.
    3. Explique algum efeito que tenha proporcionado melhor experiência de navegação do usuário. Como ele foi implementado?
    4. Explique alguma implementação focada em melhoria de desempenho da aplicação.
Subtotal 100 25
Módulo III - Social & Mobile Horas Dias
Web Mobile Javascript 32 08

Web Mobile Javascript

  • Introdução à programação WebMobile

    • - Frameworks e bibliotecas
    • - Mobile Browsers

  • Eventos e ações

    • - Escalonando a tela (ViewPort)
    • - Respondendo a Touch e Multi-Touch

  • jQuery Mobile View

    • - Páginas e diálogos
    • - Listas, ícones e toolbars
    • - Campos de formulário
    • - Temas e formatação de conteúdo

  • jQuery Mobile API

    • - Configurações, métodos e utilidades
    • - Eventos (orientação, touch events, etc)

  • Sencha Touch

    • - Introdução ao ExtJS
    • - Páginas e layouts
    • - Listas e abas
    • - Formulários
    • - Data Package
    • - Sencha Touch Charts
    • - Drag and Drop
Native Mobile Javascript 28 07

Native Mobile Javascript

  • Executando código Web nativamente com PhoneGap

    • - Por que PhoneGap?
    • - Instalando o Android SDK, Eclipse e Apple XCode
    • - Introdução a projetos Android e iPhone
    • - Utilizando tela cheia

  • Realizando operações do telefone com PhoneGap

    • - Realizando operações do telefone (chamadas e sms)
    • - Manipulando lista de contatos
    • - Beep, vibração e acelerômetro
    • - Acesso à câmera
    • - PhoneGap Widgets

  • Gerando código nativo com Titanium Appcelerator

    • - Por que Titanium?
    • - Instalando o ambiente de desenvolvimento
    • - Windows e Views
    • - Componentes, diálogos e alertas
    • - Eventos

  • Realizando operações do telefone com Titanium

    • - Realizando operações do telefone (chamadas e sms)
    • - Manipulando lista de contatos
    • - Beep, vibração e acelerômetro
    • - Acesso à câmera
    • - Mapas e geolocalização
Social WebDeveloper 24 06

Social WebDeveloper

  • Social Plugins

    • - Adicionando social plugins do Facebook
    • - Adicionando social plugins do Twitter
    • - Adicionando social plugins do Google+

  • Autenticações e permissões

    • - OpenID e oAuth2
    • - Arquitetura e onde estão presentes
    • - Estudo de oAuth2 no Facebook
    • - Login pelo Facebook
    • - Login pelo Twitter

  • Aplicativos no Facebook

    • - Canvas page
    • - Configurando a página do aplicativo
    • - Adicionando aplicativo como guia de página

  • OpenGraph e Facebook Javascript API

    • - Capturando dados do cliente
    • - Publicando no mural do cliente
    • - Outras ações em nome do cliente
    • - Respondendo a ações de social plugins na página

  • Twitter APIs

    • - Twitter Search API
    • - Twitter Streamming API
    • - Capturando tweets
    • - Follow e unfollow
    • - Postando tweets programaticamente

  • Outras APIs

    • - LinkedIn API
    • - Foursquare API
    • - Google APIs
Projeto III 12 03

Projeto III - Social & Mobile

Competência Nível de importância
- Ser capaz de produzir aplicativos integrados a redes sociais que sejam executados em mídias móveis como celulares e tablets Principal
- Saber lidar com ferramentas de produtividade em mobile apps como jQuery Mobile ou Sencha Touch Alto
- Entender as diferenças entre a simulação de aplicações mobile nativas e a conversão de fato para código nativo Alto
- Saber integrar um aplicativo web ou mobile a algum site de redes sociais utilizando autenticação OpenID ou autorização oAuth2 Alto
- Saber lidar com o PhoneGap Médio
- Saber lidar com o Appcelerator Titanium Médio
- Conhecer razoavelmente bem a API de algum site de redes sociais Médio
- Conseguir realizar operações exclusivas de aplicações mobile nativas como efetuar ligações ou acessar câmera Baixo

  • Avaliação

    - Construir um projeto que seja primariamente executado a partir de dispositivos móveis (ou simuladores) capazes de em alguma instância se integrar com algum site de redes sociais. É diferencial a criatividade para explorar a mobilidade da mídia.

  • Questões a serem respondidas pelo aluno

    1. Em qual ou em quais plataformas móveis o projeto foi testado? Caso tenha sido mais de uma, que particularidades de cada você pode apontar?
    2. Qual framework Javascript foi utilizado e o que você pode apontar de vantagem dele?
    3. Qual solução de simulação ou conversão para código mobile nativo foi usada e o que vocêpode apontar de vantagem dela?
    4. Qual site de redes sociais foi integrado e o que foi feito com ele?
Subtotal 96 24
Módulo IV - Gestão & Marketing Horas Dias
Gestão Ágil de Projetos com Scrum 16 4

Gestão Ágil de Projetos com Scrum

  • Introdução

    • - Conceitos básicos
    • - Histórico
    • - Influências
    • - O Manifesto ágil
    • - Valores

  • Processos empíricos

    • - Pilares
    • - Complexidade

  • Papéis

    • - Product Owner
    • - Equipe
    • - Scrum Master

  • Estimativas

    • - Estimativas Absolutas
    • - Estimativas relativas
    • - Story Points
    • - Velocity
    • - Planning Poker
    • - Ruídos em estimativas

  • Planejamento

    • - Níveis de planejamento
    • - Product Backlog
    • - Sprint
    • - Release
    • - Planejando releases

  • Reuniões

    • - Estimation Meeting
    • - Sprint Planning
    • - Daily Scrum
    • - Sprint Review
    • - Sprint Retrospective

  • Executando uma sprint

    • - Trabalhando em sprints
    • - Criando um taskboard
    • - Monitorando a sprint
    • - Término Anormal

  • Equipes Scrum

    • - Composição
    • - Responsabilidade
    • - Etiqueta
    • - Colaboração

  • Problemas Comuns

  • Scrum e Engenharia ágil

    • - User Stories
    • - Pair Programming
    • - Test Driven Development
    • - Refactoring
    • - Integração Contínua
SEO - Search Engine Optimization 16 4

SEO - Search Engine Optimization

  • Fundamentos de SEO

    • - Visão geral
    • - Por que fazer?
    • - Mercado de Search
    • - Principais buscadores

  • Fatores in Page (Obrigações do Front-End Engineer)

    • Importância de títulos e Meta Tags HTML
    • URL amigáveis
    • linkagem interna
    • Robots e sitemaps
    • Organização do site
    • Autoridade de um domínio
    • Microformats

  • Fatores off Page

    • Popularidade de um domínio
    • Importância de links com textos âncora
    • Cadastro em diretórios
    • Guest Posts
    • Link Building
    • Social bookmark

  • Palavras chave

  • Ferramentas de Monitoramento (gratuitas e pagas)

  • Técnicas não recomendadas e punições
Web Marketing (Google AdWords & YSM) 16 04

Web Marketing (Google AdWords & YSM)

  • Introdução aos Links Patrocinados

    • O que são links patrocinados?
    • Vantagens no uso
    • O mercado
    • Por que usar?

  • Google Adwords - Mergulhando na ferramenta

    • Criando uma conta no AdWords
    • Conhecendo o funcionamento do programa
    • Estrutura de uma Conta
    • CPC, CPM, CTR, Metas
    • Tipos de anúncios
    • Rede de pesquisa e de display
    • Ferramentas e análise

  • Administração de contas

    • Criando uma campanha
    • Importância da separação dos grupos de anúncio
    • Tipos de correspondência
    • Escolhendo as palavras-chave
    • Criando anúncios de texto
    • Criando anúncios gráficos e de vídeo

  • Otimização

    • Analisando os resultados
    • Relatórios - como usá-los
    • Como selecionar as melhores palavras-chave
    • Rotação de anúncios
    • Usando o recurso de Experiência de campanha

  • Adwords Editor

    • Vantagens no uso do programa
    • Principais recursos

  • Yahoo! Search Marketing
Google Analytics 16 04

Google Analytics

  • Web Analytics - O Que é?

  • Conhecendo o Google Analytics

  • Iniciando o uso da ferramenta

    • Criando uma conta
    • Configurando e inserindo no site

  • Vinculando conta com AdWords e configurando outras campanhas

  • O que são Metas/Funis e como criá-los

  • Análise de dados
Projeto IV 12 03

Projeto IV - Gestão & Marketing

Competência Nível de importância
- Ser capaz de administrar uma campanha de marketing digital Principal
- Saber definir como aplicar os recursos disponíveis Alto
- Saber definir metas e prazos para alcançá-las Alto
- Saber criar um relatório de resultados Alta

  • Avaliação

    - O aluno deverá desenvolver um plano de marketing com orçamento limitado

  • Questões a serem respondidas pelo aluno
Subtotal 76 16