| HTML5 Essencial |
28 |
07 |
HTML 5 Essencial
-
Fundamentos da Web
- - Fundamentos de rede
- - Protocolo HTTP e URLs
- - Métodos de requisição e tipos de respostas
- - Mimetypes e charsets
- - Histórico da Web
- - Tecnologias e ferramentas cliente, servidor e intermediárias
-
Documentos HTML
- - DHTML, XHTML, HTML5
- - Doctypes e Modos de browsers (quirks e stricts)
- - Tags
- - Estrutura de documento HTML
- - Regras XHTML
-
Conteúdo
- - Section, div, span, aside, parágrafos, cabeçalhos e rodapé
- - Listas e tabelas
- - Formulários (campos e atributos)
- - Forms 2.0
- - Tags editáveis (contenteditable)
- - IFrames
-
Hipermídia
- - Links e âncoras
- - Imagens e objetos
- - Áudio e vídeo
- - Canvas
- - Imagens vetoriais (SVG)
-
Semântica
- - Tags semânticas
- - Links semânticos
- - RDFa, Microformats e Microdata
-
Desempenho
- - Ferramentas Firebug, ySlow e Live Http Headers
- - Imagens inline
- - Redução de redirecionamentos
- - Compressões, caches e pipelines
|
| 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
- Durante o processo de montagem, onde você pode perceber comportamentos distintos entre browsers?
- 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?
- Se utilizou o doctype XHTML strict, quais tags HTML5 poderiam ter sido utilizadas caso optasse pelo doctype HTML5?
- Se optou por montar uma tela interna, sugira modificações no CSS para aplicar a outro tipo de mídia
- O que você fez pensando em obter um melhor desempenho final?
|