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