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 Apps 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, live)
    • - 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

  • Nivelamento em PHP

    • - Sintaxe elementar
    • - Captura de parâmetros de requisição
    • - Criando um primeiro projeto client/server
    • - URLs amigáveis
    • - Despachando views HTML ou conteúdo JSON

  • Fundamentos de AJAX

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

  • AJAX com jQuery

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

  • Novas APIs Javascript (HTML5)

    • - Atributos data-* e datasets
    • - History API
    • - Drag and Drop API
    • - Estados do navegador (online e offline) e gestão de cache
    • - Local Storage e Session Storage
    • - File, FileReader e Filesystem API
    • - IndexedDB

  • 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 Patterns & Frameworks 32 08

HTML5 Patterns & Frameworks

  • Boas práticas de programação

    • - O que são design patterns e antipatterns
    • - Design patterns (Prototype, Singleton, Module, Observer, etc)
    • - Architetural patterns (MVC, MVP, MVVM)
    • - Modular Javascript (AMD, CommonJS e ES Harmony)

  • Frameworks HTML5

    • - Modernizr
    • - HTML5 Boilerplate, Responsive e Initializr
    • - Twitter Bootstrap

  • Componentizações

    • - ExtJS
    • - Dojô

  • Templating

    • - Handlebars.js, Mustache e Underscore.js
    • - AngularJS
Projeto II 12 03

Projeto II - Web Apps

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 padrões de projeto e boas práticas de programação em Javascript Alto
- Dominar técnicas e framworks de modularização, componentização e templating 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
- Ter noções elementares em alguma linguagem server side como PHP Baixo

  • Avaliação

    - Desenvolva algum aplicativo com vasta aplicação de programação client-side Javascript, modular, extensível, organizado e preocupado com o desempenho geral. Será necessário validar entradas de usuários, aplicar algum efeito e realizar chamadas assíncronas. É importante estar atento às competências ao desenvolver o projeto. Algumas técnicas HTML5 também serão exigidas, como geolocalização, client storage, histórico ou drag and drop.

  • 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 132 33
Módulo III - Mobile Apps Horas Dias
HTML5 Mobile 16 04

HTML5 Mobile

  • Imersão em browsers mobile

    • - Limitações e evoluções
    • - User Agents e Tera-WURFL
    • - Simuladores Android, iOS e Blackberry

  • Mobile Displays

    • - Resoluções, dimensões, densidades, aspect-ratios e zoom
    • - Cálculos de espaço

  • Touchscreen

    • - Eventos de detecção de toques
    • - Número de toques, coordenadas e ângulo do toque

  • Sensores

    • - Magnetômetro, acelerômetro e giroscópio
    • - DeviceOrientation

  • Frameworks e bibliotecas HTML5 para mobile

    • - Introdução ao iUI
    • - Introdução ao jQTouch
    • - Overview de outros frameworks (Jo, iWebKit, WebApp.Net)
jQuery Mobile 16 04

jQuery Mobile

  • Páginas e diálogos

    • - Anatomia de uma página
    • - Internal e external pages
    • - Efeitos de transição

  • Componentes

    • - Botões e barras de ferramentas
    • - ListViews
    • - Formulários

  • Temas

    • - Modificando e customizando temas

  • Javascript API

    • - Configurações gerais
    • - Métodos utilitários
    • - Eventos
    • - Histórico e navegação
Sencha Touch & Phonegap 24 06

Sencha Touch & Phonegap

  • Introdução

    • - Componentização padrão ExtJS
    • - Escolhendo um build
    • - Iniciando um projeto do zero

  • Componentes e containers

    • - Conceitos gerais
    • - Layouts
    • - Eventos
    • - Tipos de componentes (TabPanel, Carousel, Forms, etc)
    • - Herança de componentes (estendendo a API)

  • Modelo

    • - Classes de negócio
    • - DataViews
    • - Stores
    • - Proxies

  • Phonegap

    • - Listas de contato
    • - Conexões e configurações de rede
    • - Notification
    • - Acesso a câmeras e galerias
    • - Empacotamento para Apple Store e Google Play
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
- 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). É 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?
Subtotal 68 17