Logar
Evento
/

WD-43 | Desenvolvimento Web com HTML, CSS e JavaScript (Integral)

WD-43 | Desenvolvimento Web com HTML, CSS e JavaScript (Integral)

Participantes

0
participantes
0
curtidas
Banner - WD-43 | Desenvolvimento Web com HTML, CSS e JavaScript (Integral)
Mostrar
  • De 30/07 às 09:00 até: 02/08 às 17:00
  • Rua Vergueiro, 3185 - 8º andar, Vila Mariana - São Paulo/São Paulo - 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
  • O projeto de ecommerce
  • Tirando dúvidas
  • Bibliografia
  • Para onde ir depois?

 

Introdução a HTML e CSS

   

  • Exibindo informações na Web
  • Sintaxe do HTML
  • Estrutura de um documento HTML
  • Tags HTML
  • Estilizando com CSS
  • Alinhamento e decoração de texto
  • Imagens
  • A estrutura dos arquivos de um projeto
  • Editores e IDEs
  • Primeira página
  • Exercícios: primeiros passos com HTML
  • Listas HTML
  • Espaçamento e margem
  • Exercícios: listas e margens
  • Links HTML
  • Exercícios: links
  • Elementos estruturais
  • CSS: Seletores de ID e filho
  • Exercícios: seletores CSS
  • Fluxo do documento e float
  • Exercícios: flutuação de elementos
  • O futuro e presente da Web com o HTML5

 

Avançando no HTML e CSS

  

  • O processo de desenvolvimento de uma tela
  • O projeto MirrorFashion
  • Analisando o Layout
  • HTML semântico
  • Pensando no header
  • Substituição por Imagem
  • Seletor de classe
  • Exercícios: header semântico
  • CSS Reset
  • Block vs Inline
  • Exercícios: reset e display
  • Position: static, relative, absolute
  • Exercícios: posicionamento
  • Exercícios opcionais

 

Mais HTML e CSS

   

  • Analisando o miolo da página
  • Formulários
  • Posicionamento com float e clear
  • Mais CSS
  • Cascata e herança
  • Para saber mais: o valor inherit
  • Exercícios: menu e destaque
  • Display inline-block
  • Exercícios: painéis flutuantes
  • Seletores de atributo do CSS3
  • Rodapé
  • Exercícios: rodapé
  • Para saber mais: suporte HTML5 no Internet Explorer antigo
  • Exercícios opcionais

 

JavaScript e interatividade na Web

   

  • Introdução ao JavaScript
  • Console do navegador
  • Sintaxe básica
  • Exercícios opcionais: fixação de sintaxe
  • Interatividade na Web
  • Exercício: validação na busca com JS
  • Exibindo conteúdo com JS
  • Exercício: mais conteúdo com JS
  • Funções temporais
  • Exercício: banner rotativo
  • Para saber mais: sugestão para o desafio de pause/play
  • Para saber mais: vários callbacks no mesmo elemento

 

CSS Avançado

   

  • Seletores avançados
  • Pseudo-classes
  • Pseudo elementos
  • Exercícios: seletores e pseudo-classes
  • Exercícios opcionais
  • CSS3: border-radius
  • CSS3: text-shadow
  • CSS3: box-shadow
  • Opacidade e RGBA
  • Prefixos
  • Progressive Enhancement
  • Exercícios: visual CSS3
  • CSS3 Transitions
  • CSS3 Transforms
  • Exercícios: CSS3 transform e transition
  • Exercícios opcionais
  • Desafio: efeito de fade no banner rotativo
  • Para saber mais: especificidade de seletores CSS

 

Formulários HTML

   

  • Novos componentes do HTML5
  • Exercícios: formulário de contato
  • CSS3: Gradientes
  • Exercícios: estilização do formulário
  • Novos atributos em elementos de formulário
  • Validação HTML5
  • Exercícios: HTML5 e CSS3 no formulário
  • Exercícios opcionais
  • Para saber mais: controlando as validações HTML5

 

jQuery

   

  • Produtos da loja
  • Exercícios: página de produtos
  • 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: escolhendo a cor com jQuery
  • Exercícios opcionais
  • jQueryUI e outros plugins
  • Exercícios: abas com jQuery UI
  • Tabelas
  • Exercícios: tabela descritiva
  • Mais plugins: slider de navegação com jQuery Tools
  • Exercícios opcionais

 

Integrações com serviços Web

   

  • Web 2.0 e integrações
  • iframes
  • Mapa embutido com Google Maps
  • Exercícios: Google Maps
  • Botão de curtir do Facebook
  • OpenGraph e web semântica
  • Exercícios: Facebook
  • Exercícios: OpenGraph
  • Para saber mais: Twitter
  • Para saber mais: Google+
  • Exercícios opcionais
  • Fontes customizadas com @font-face
  • Serviços de web fonts
  • Exercícios: Google Web Fonts

 

Web para dispositivos móveis

   

  • Site mobile ou mesmo site?
  • CSS media types
  • CSS3 media queries
  • Viewport
  • Ícone para home screen
  • Exercícios: mobile site
  • Exercícios opcionais

 

Otimizações de front-end

   

  • HTML e HTTP - Como funciona a World Wide Web?
  • 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
  • Para saber mais
  • Exercícios: otimizações Web

 

Apêndice - Referência CSS

   

  • Formatação de backgrounds
  • Margens e centralização
  • Outlines
  • Formatação de Texto e Fontes
  • Display
  • Float
  • Flutuação e o fluxo do documento
  • Propriedade Clear
  • Para saber mais: CSS Media

 

Apêndice - Referência sobre HTML

   

  • Anatomia de um documento HTML
  • DOCTYPEs
  • Meta tags e configurações do documento
  • Entidades HTML
  • Para saber mais: microformatos

 

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

Ler mais

Localização

Programação

Este evento não possui atividades no momento.

Planta do Evento

A planta do evento não está disponível.

Contato

Preencha os campos abaixo para enviar e-mail ao organizador.

Campos Obrigatórios
Campos Obrigatórios
Ao se cadastrar, você concorda com nossos Termos de uso.
Ajaxloader

Compartilhar evento por e-mail


Para continuar, faça login ou cadastre-se.

Recomende este evento para sua rede.

Selecione os usuários que deseja recomendar este evento.