Carga Horária: 32 horas aula.

 

Um curso para quem quer dominar as melhores técnicas de desenvolvimento Web. Voltado ao programador de interfaces preocupado com a semântica perfeita, estilos CSS poderosos e JavaScripts corretos e funcionais. Um curso dedicado a criar interfaces Web com experiência rica do usuário, estruturação correta e otimizações.

 

O conteúdo do curso aborda o domínio de HTML, incluindo alguns exemplos do novo HTML 5. Além, claro, de tirar o máximo proveito de CSS, também já conhecendo algumas das novas possíbilidades do CSS 3. Tudo com tableless, outras boas práticas e técnicas avançadas.

 

Também é necessário ao programador de interface/web master um bom conhecimento de programação JavaScript. Por isso, o curso aborda tópicos como linguagem JavaScript, manipulação dos elementos da página e enriquecimento da experiência do usuário com JQuery. Para completar, tópicos de design para mobile e otimizações para melhorar a velocidade de carregamento da página.

 

O curso complementa também programadores experientes que pretendem melhorar suas técnicas no client-side, além de preparar novos profissionais que estão iniciando com programação server-side e pretendem ter uma visão mais completa de como desenvolver sistemas para Web.

 

Esse curso faz parte da Formação Web junto com o WD-47.

 

 

Pré-requisitos:

Lógica de programação e conhecimento básico de desenvolvimento Web: como funciona a Internet e o navegador, o que são páginas Web, HTML e CSS.

 

 

Conteúdo detalhado:

 

Sobre o curso - o complexo mundo do front-end

1. O curso e os exercícios
2. Tirando dúvidas
3. Bibliografia
4. Para onde ir depois?

Fundamentos da Internet

1. Um pouco de história
2. HTML e HTTP - Como funciona a World Wide Web?

Criando páginas com HTML

1. O processo de desenvolvimento de uma tela
2. Exibindo informações na Web
3. Progressive Enhancement
4. Anatomia de um documento HTML
5. Tags e estruturas do HTML
6. Meta tags e configurações do documento
7. Caracteres especiais e Entidades HTML
8. Exercício - Criando um documento HTML
9. O futuro e presente da Web com o HTML5

O projeto

1. Exercício - Preparando os arquivos do projeto
2. Analisando o Layout
3. Exercícios - Iniciando o projeto
4. Marcação Semântica
5. Exercícios - O conteúdo da página
6. Resultados até o momento

CSS

1. Estilizando elementos do documento
2. Sintaxe
3. Seletores CSS
4. Combinando Seletores
5. Múltiplos seletores e a especificidade
6. Exercícios - Calculando a especificidade de seletores
7. CSS Reset
8. Exercícios - CSS Reset
9. Formatação de backgrounds
10. Margens e centralização
11. Exercícios - Definindo backgounds e centralização de conteúdo
12. Bordas e Outlines
13. Formatação de Texto e Fontes
14. Exercícios - Definindo a fonte do projeto
15. Alinhamento e decoração de texto
16. Display
17. Posicionamento do Logotipo
18. Exercícios - Posicionando o logo
19. Posicionando elementos
20. Exercícios - Ajustando o posicionamento do logotipo
21. Float
22. Exercícios - Lidando com o menu
23. Flutuação e o fluxo do documento
24. Exercícios - Restaurando o fluxo dos elementos
25. Propriedade Clear
26. Exercícios - Definindo o visual do conteúdo principal
27. Para saber mais: CSS Media
28. Exercícios - Definindo a aparência do rodapé

Introdução ao JavaScript

1. JavaScript básico
2. Interatividade na Web
3. Lidando com objetos
4. Exercícios - Executando JavaScript no navegador
5. Para saber mais: lidando com diferentes navegadores

jQuery

1. Iniciando o uso do jQuery - A funcão $
2. jQuery Selectors
3. Filtros customizados e por DOM
4. Utilitário de iteração do jQuery
5. Características de execução
6. Exercícios - Preparando uma página para jQuery
7. jQueryUI e outros plugins
8. Exercícios - Utilizando o jQuery UI

CSS Avançado

1. Pseudo-classes e pseudo-elementos
2. Exercícios - Menu dinâmico com pseudo-classes
3. Seletores CSS Avançados
4. CSS Transforms
5. CSS Transitions
6. Exercícios - Utilizando transform e transition

Formulários HTML

1. Novos componentes do HTML5
2. Exercícios - Formulário de contato

Integrações e microformatos

1. Facebook e OpenGraph
2. Exercícios - Adicionando suporte a compartilhamento OpenGraph
3. Microformats
4. Widgets - conteúdo externo em sua página
5. Exercícios - Adicionando um mapa do Google

Web para dispositivos móveis

1. Site mobile ou mesmo site?
2. CSS media types
3. CSS3 media queries
4. Viewport
5. Ícone para home screen
6. Exercício - Preparando seu projeto para dispositivos móveis

Otimizações de front-end

1. Princípios de programação distribuída
2. Ferramentas de diagnóstico - YSlow e PageSpeed
3. Compressão e minificação de CSS e JavaScript
4. Compressão de imagens
5. Diminuir o número de requests
6. Juntar arquivos CSS e JS
7. Image Sprites
8. Caches e CDN
9. Exercício - Otimizando nossa página

* Os apêndices listados são conteúdos adicionais que não fazem parte do curso regular.