WD-43 | Desenvolvimento Web com HTML, CSS e JavaScript (Sábado)
Rua do Ouvidor, 50 - Sobreloja 201, Centro - Rio de Janeiro/Rio de Janeiro - Brasil
Descrição
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
- O curso e os exercícios
- Tirando dúvidas
- Bibliografia
- Para onde ir depois?
Fundamentos da Internet
- Um pouco de história
- HTML e HTTP - Como funciona a World Wide Web?
Criando páginas com HTML
- O processo de desenvolvimento de uma tela
- Exibindo informações na Web
- Progressive Enhancement
- Anatomia de um documento HTML
- Tags e estruturas do HTML
- Meta tags e configurações do documento
- Caracteres especiais e Entidades HTML
- Exercício - Criando um documento HTML
- O futuro e presente da Web com o HTML5
O projeto
- Exercício - Preparando os arquivos do projeto
- Analisando o Layout
- Exercícios - Iniciando o projeto
- Marcação Semântica
- Exercícios - O conteúdo da página
- Resultados até o momento
CSS
- Estilizando elementos do documento
- Sintaxe
- Seletores CSS
- Combinando Seletores
- Múltiplos seletores e a especificidade
- Exercícios - Calculando a especificidade de seletores
- CSS Reset
- Exercícios - CSS Reset
- Formatação de backgrounds
- Margens e centralização
- Exercícios - Definindo backgounds e centralização de conteúdo
- Bordas e Outlines
- Formatação de Texto e Fontes
- Exercícios - Definindo a fonte do projeto
- Alinhamento e decoração de texto
- Display
- Posicionamento do Logotipo
- Exercícios - Posicionando o logo
- Posicionando elementos
- Exercícios - Ajustando o posicionamento do logotipo
- Float
- Exercícios - Lidando com o menu
- Flutuação e o fluxo do documento
- Exercícios - Restaurando o fluxo dos elementos
- Propriedade Clear
- Exercícios - Definindo o visual do conteúdo principal
- Para saber mais: CSS Media
- Exercícios - Definindo a aparência do rodapé
Introdução ao JavaScript
- JavaScript básico
- Interatividade na Web
- Lidando com objetos
- Exercícios - Executando JavaScript no navegador
- Para saber mais: lidando com diferentes navegadores
jQuery
- Iniciando o uso do jQuery - A funcão $
- jQuery Selectors
- Filtros customizados e por DOM
- Utilitário de iteração do jQuery
- Características de execução
- Exercícios - Preparando uma página para jQuery
- jQueryUI e outros plugins
- Exercícios - Utilizando o jQuery UI
CSS Avançado
- Pseudo-classes e pseudo-elementos
- Exercícios - Menu dinâmico com pseudo-classes
- Seletores CSS Avançados
- CSS Transforms
- CSS Transitions
- Exercícios - Utilizando transform e transition
Formulários HTML
- Novos componentes do HTML5
- Exercícios - Formulário de contato
Integrações e microformatos
- Facebook e OpenGraph
- Exercícios - Adicionando suporte a compartilhamento OpenGraph
- Microformats
- Widgets - conteúdo externo em sua página
- Exercícios - Adicionando um mapa do Google
Web para dispositivos móveis
- Site mobile ou mesmo site?
- CSS media types
- CSS3 media queries
- Viewport
- Ícone para home screen
- Exercício - Preparando seu projeto para dispositivos móveis
Otimizações de front-end
- Princípios de programação distribuída
- Ferramentas de diagnóstico - YSlow e PageSpeed
- Compressão e minificação de CSS e JavaScript
- Compressão de imagens
- Diminuir o número de requests
- Juntar arquivos CSS e JS
- Image Sprites
- Caches e CDN
- Exercício - Otimizando nossa página
* Os apêndices listados são conteúdos adicionais que não fazem parte do curso regular.
Localização:
Contato
Preencha os campos abaixo para enviar e-mail ao organizador.
