intin-topicos

Unidade 1 - HTML: # 01 - Apresentação da Disciplina (25/04/2019)
# 02 - Introdução a HTML e ferramentas (02/05/2019)
# 03 - Gerenciando listas e tabelas (09/05/2019)
# 04 - Adicionando Links (09/05/2019)
# 05 - Adicionando imagens, áudios e vídeos (16/05/2019)
# 06 - Criando formulários (23/05/2019)

Unidade 2 - CSS:

# 07 - Introdução ao Cascade Style Sheet (CSS) (06/06/2019)
# 08 - Estilizando Texto (13/06/2019)
# 09 - Simulado CSS (20/06/2019)
# 10 - Componentes Web (30/06/2019)
Prova 1 (04/07/2019)
Prova Bimestral (11/07/2019)
Apresentação de Projetos (18/07/2019)

Unidade 3 - Javascript:

# 11 - Primeiros passos com Javascript (18/07/2019)
# 12 - Javascript (loops e arrays) (25/07/2019)
# 13 - Javascript (Funções e objetos) (01/08/2019)
# 14 - Javascript (DOM e criação de elementos) (08/08/2019)
# 15 - Javascript (DOM e criação de elementos) (15/08/2019)
# 16 - Javascript (DOM e criação de elementos) (22/08/2019)
# 17 - Javascript (DOM e criação de elementos) (29/08/2019)
# 18 - Javascript (DOM e criação de elementos) (05/09/2019)
Prova 2 (12/09/2019)
Apresentação final dos proetos (19/09/2019)
Provas finais (26/09/2019)

# 01 - Apresentação da Disciplina (25/04/2019)

Conteúdo:

• Apresentação da disciplina:
  • Objetivo, conteúdo, avaliação, comunicação, bibliografia e ferramentas
• Slides

# 02 - Introdução a HTML e ferramentas (02/05/2019)

Conteúdo:

• Editando HTML com o Atom e visualizando com o Google Chrome (https://www.google.com/chrome/)
• Trabalhando com html na prática
  • Conceitos básicos
  • Estrutura básica
    • Cabeçalho e Corpo
• Metadados
  • Título da página
  • Encoding e UTF-8
• Elementos/tags
  • Títulos (h1, h2, h3, …)
  • Parágrafos
  • Negrito e Itálico
• Referências dos Elementos

Exercício:

• Criando a primeira página Web (cantina do IFPB)

# 03 - Gerenciando listas e tabelas (09/05/2019)

Conteúdo:

• Listas <ol>, <ul>, <dl>
  • Definição, Ordenada, Não ordenado
  • Lista aninhada
• Tabelas
  • Definição de linhas <tr> e colunas <td>
  • Colunas de cabeçalho <th>
  • Mesclando linhas com rowspan e colunas com colspan
• Slides

Exercício:

• Criando página da disciplina com lista de itens
• Adicionando cronograma da disciplina como tabela

# 04 - Adicionando Links (16/05/2019)

• Estrutura e características de um hyperlink
• Definição e estrutura de uma URL (Uniform Resource Identifier)
• Elementos no nível em linha (inline) e bloco (block)
• Abrindo links em uma nova janela (atributo target=_blank)
• Apontando para endereços absolutos e relativos
• Trabalhando com âncoras internas dentro de uma página

# 05 - Adicionando imagens, áudios e vídeos (16/05/2019)

Conteúdo:

• Imagem <img>, <figure>, <figcaption>
  • Imagem dentro (Data URI), próximo ou distante do HTML
    • Custos e benefícios
  • Atributos: src, alt, width, title
  • Imagem com link

# 06 - Criando formulários (23/05/2019)

• Campos de formulário
  • Campos de texto, data, email, número
  • Campos de seleção (checkbox, radio, combobox)
  • Atributos de validação (required)
  • Botões de ação
• Criando um formulário básico

# 07 - Introdução ao Cascade Style Sheet (CSS) (25/07/2019)

Conteúdo:

• Cascade Style Sheet (CSS)
  • Origem do CSS
  • Declarações do CSS: local (style=""), interna (<style>), externa (<link>)
  • Sintaxe do CSS
    • Propriedades:
      • Texto & Fonte
        • color
        • font-size
    • Seletores básicos:
      • tipo (elementname)
        • Agrupamentos com <span> e <div>
      • id (#idname e id="")
      • classe (.classname e class="")
      • Múltiplas classes .classA.classB

Reflexão:

• O que é uma Linguagem de Estilo?
• O que é e como funciona o CSS?
• Quais são os possíveis locais que o CSS pode existir junto com o HTML?
• Qual a relação do atributo global class e id com o CSS?
• Qual é a composição da sintaxe do CSS?
• Qual é o benefício de definir mais de uma classe à um elemento?

Exercício:

• Criando seu primeiro estilo

# 08 - Box model (02/08/2019)

Conteúdo:

• Box model

Reflexão:

• O que é box model? Como um box pode ser exibido no navegador?
• Por que o W3C considera os elementos HTML deste link como inline?
• Existe alguma exceção de elemento inline que permite definir largura?
• Quais estilos podemos aplicar em um Box?
• É possível personalizar o estilo de alguma borda específica? Por exemplo, a borda inferior? E no chrome, como é calculado o em para margens?
• Como centralizamos um parágrafo de largura pré-definida?
• Qual é a melhor maneira de definir altura de um Box sem gerar problemas de alinhamento vertical?
• É possível deixar uma borda arredonda nas quinas?
• Como funcionar a sombra para um Box?
• Como apresentar uma tabela em uma grid contínua sem espaçamento entre as bordas?

Exercício:

• Analise o Box Model desses títulos.
• Exemplo de layout

# 08 - Estilizando Texto (09/08/2019)

Conteúdo:

• Estilizando Texto (Texto e fonte, Alinhamento de Texto)
• Estilizando links
  • pseudo-class selector: :hover, :link, :active, :visited, :focus
  • Web Fontes
• Ícones

Reflexão:

• Quais são os estilos de alinhamento e aparência para fonte?
• Na propriedade font-family, qual é a diferença entre <family-name> e <generic-family>?
• Se não for definido nenhum <family-name> a um elemento, qual será a <family-name> atribuída por default?
• O que acontece se o <family-name> não possuir a fonte instalada no computador?
• Qual é a recomendação para se difinir uma propriedade font-family?
• Em relação ao valor <length>, qual a diferança entre unidades de medida relativa e absoluta? Que propriedades de texto recebem esse valor?
• Como funciona a sombra para um texto?
• Como estilizamos um hyperlink?

Exercício:

• Criando o Curriculum Vitae com Estilo

# 09 - Simulado CSS (16/08/2019)

Reflexão:

• O que é possível fazer com o HTML e CSS até o momento?

** Exercício:**

• Simulado:
• Profile Simples

# 10 - Componentes Web (30/08/2019)

Conteúdo:

• CSS Packages
  • Bootstrap
  • Materialize
  • Bulma