Curso de Desenvolvimento Web com HTML5, CSS3 e jQuery

Curso de Desenvolvimento Web com
HTML5, CSS3 e jQuery
Professor: Marcelo Ricardo Minholi
CH: 32 horas anuais (4 dias de 8 horas)
Umuarama - 2012
Fundamentação Teórica:
HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa
Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir
páginas na Web. Como tal é a linguagem utilizada na construção de documentos que podem
ser interpretados por navegadores web, sendo portanto o componente principal da interface
de sistemas web e de todo o conteúdo disponível na Web.
Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir
a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.
Seu uso é essencial para a personalização e formatação de conteúdos criados para a Web.
jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client
side que interagem com o HTML. Sua utilização permite a dinamização de interfaces em
navegadores web modernos.
O domínio desses três recursos permite ao programador client-side ou designer de interfaces
implementar interfaces em aplicações web e criar conteúdos amparados pelos conceitos da
usabilidade e acessibilidade.
Objetivo Geral:
O curso visa prover domínio das melhores práticas de desenvolvimento Web. Voltado para
programadores de interfaces web e designers, abortando o uso estilos CSS, JavaScript e
semântica na construção de documentos HTML.
Objetivos Específicos:
O conteúdo aborda HTML5. Além do CSS3, fazendo uso das melhores práticas e de técnicas
avançadas que permitem a melhor compatibilidade do código criado, tanto com os
navegadores mais conhecidos por meio de progressive enhancement e graceful degradation
quanto com os padrões do W3C por meio da construção semântica e gramatical correta das
linguagens.
Para prover elementos dinâmicos de interface que componham a experiência do usuário e
melhorem a usabilidade, o curso aborda o uso de JavaScript através da manipulação dos
elementos da página e enriquecimento da interface com jQuery.
O conteúdo do curso contempla também programadores experientes que pretendem
melhorar suas técnicas de desenvolvimento 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.
Conteúdo do curso
Introdução
⟩
O curso e os exercícios
⟩
Tirando dúvidas
⟩
Bibliografia
⟩
Para onde ir depois?
Criando páginas utilizando HTML
⟩
O processo de desenvolvimento de uma tela
⟩
Exibindo informações na web
⟩
HTML
⟩
A anatomia de um documento HTML
⟩
Tags e estruturas do HTML
⟩
Configurações do documento
O projeto
⟩
Iniciando nosso projeto
⟩
Tableless
⟩
Progressive Enhancement
⟩
Iniciando o projeto - Analisando o layout
⟩
Exercícios - Iniciando o projeto
⟩
Semântica do HTML
⟩
Exercícios - O conteúdo da página
⟩
Discussão em aula: Melhoria de Semântica
CSS
⟩
Estilizando elementos do documento
⟩
Sintaxe
⟩
Seletores CSS
⟩
Combinando Seletores
⟩
Múltiplos seletores e a especificidade
⟩
Exercícios - Calculando a especificidade de seletores
⟩
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
⟩
CSS Reset
⟩
Exercícios - CSS Reset
Conhecendo mais sobre HTML e CSS
⟩
Display
⟩
Posicionamento do Logotipo
⟩
Exercícios - Posicionando o logo
⟩
Posicionando elementos
⟩
Exercícios - Ajustando o posicionamento do logotipo
⟩
Flutuação com float e nosso menu
⟩
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 restante do nosso site
⟩
Para saber mais: CSS Media
⟩
Exercícios - Criando novas áreas
⟩
Exercícios - Criando o rodapé
⟩
Validadores
⟩
Exercício Opcional - Validadors CSS e HTML
⟩
Exercício Opcional - Página de categorias
Páginas dinâmicas com CSS
⟩
Pseudo-classes
⟩
Sintaxe
⟩
Links e Hovers
⟩
Exercícios
Introdução ao JavaScript
⟩
A linguagem de script mais popular da internet
⟩
Instruções, comentários, variáveis e tipos
⟩
Para sabe mais: esquecer a palavra-chave var
⟩
Operadores e comparações
⟩
Fluxos de controle
⟩
Funções
⟩
Eventos
⟩
Lidando com objetos
⟩
Para saber mais: Lidando com navegadores
⟩
Para saber mais: ferramentas
⟩
Para saber mais: cookies
Introdução ao jQuery
⟩
Sobre o jQuery
⟩
Para saber mais: descobrindo a versão
⟩
Para saber mais: Incluindo todos os CSSs antes do jQuery
⟩
Para saber mais: utilizando versões hospedadas
⟩
ready() vs load()
⟩
Corrente de métodos
⟩
iteração implícita + each()
⟩
Menu dinâmico com JQuery
jQuery - Selectors
⟩
Filtros customizados e por DOM
⟩
Exercícios - Página do produto
⟩
Pseudo-elementos
⟩
Exercícios - Flip de imagens com JQuery
⟩
find() vs filter()
⟩
A função end()
⟩
Para saber mais: a função is()
⟩
Para saber mais: jQuery plugins
⟩
Exercícios - Usando plugins: JQuery Tabs
⟩
Boas práticas de performance com jQuery
⟩
Exercícios - Utilizando tabelas quando necessário
⟩
Exercícios - Formulário com CSS 3
HTML 5
⟩
História
⟩
novidades do HTML 5
⟩
Exercício Opcional - Página com HTML5
CSS3
⟩
A evolução do CSS
⟩
Bordas avançadas com CSS 3
⟩
Bordas coloridas
⟩
Bordas com imagens: border-image
⟩
Bordas arredondadas: border-radius
⟩
Backgrounds
⟩
Cores
⟩
Efeitos em textos
⟩
Web Fonts