Minicurso : Introdução ao básico de html, css e javascript.

Ementa do curso:

Proponente(s):

• Eliel das Virgens
• Gleydson Maciel
• Raniel César

Minicurrículo:

Eliel - Aluno do IF Senhor do Bonfim e Webschool, entusiasta de programação.

Raniel - Aluno do IFBA - Senhor do Bonfim. Graduando.

Carga horária e período de realização:

70 Minutos

Resumo:

• Este minicurso tem como intuito demonstrar como funciona um pequeno sistema web para cadastro de alunos. Usando HTML, CSS e Javascript, introduziremos uma pequena base de programação web, criando uma página estática, responsiva e com funções Javascript.

Metodologia:

• Hands ON (mão na massa)

Atividades a serem desenvolvidas:

• Estrutura HTML
• CRUD (Create, Remove, Update e Delete) com Javascript
• Estilização com CSS
• Responsividade

Resultados esperados dos participantes:

• Que, ao terminar do minicurso, entenda um pouco da história da web, da guerra dos browsers, tags do html, declaração de variáveis em javascript, básico de função, arrays e objeto, o basico sobre document.getElementById() e como gerar html com javascript. E também saber a importância que o design responsivo tem.

Conhecimentos necessários para os participantes:

• Conhececimento básico em programação, que seria: declaração de variável, estruturas de controle e repetição e manipulação de vetor.

Público-alvo:

• Alunos da turma de LCC 2017.1.

Referências:

W3SCHOOLS. Responsive Web Design - Grid View. Disponível em: https://www.w3schools.com/css/css_rwd_grid.asp. Acesso em: 04 abr. 2018.

UX COLLECTIVE BR. Um guia completo sobre grids e design responsivo. Disponível em: https://brasil.uxdesign.cc/um-guia-completo-sobre-grids-para-design-responsivo-6b192fea0124. Acesso em: 04 abr. 2018.

TABLELESS. Entendendo Sistemas de Grid CSS do Zero. Disponível em: https://tableless.com.br/entendendo-sistemas-de-grid-css-do-zero/. Acesso em: 04 abr. 2018.

OLHAR DIGITAL. História dos navegadores: do www ao Chrome. Disponível em: https://olhardigital.com.br/noticia/historia-dos-navegadores-do-www-ao-chrome/7285. Acesso em: 06 abr. 2018.

FREEMAN, E; ROBSON, E. Head First HTML with CSS & XHTML. Califórnia: O'Reilly Media, 2009.

HAVERBEKE, M. Eloquent Javascript: a modern introduction to programming. 2. ed. Califórnia: Creative Commons, 2014.

• HTML.

  • História e evolução da web.
  • Tags HTML.
  • Importar arquivo CSS.
  • Importar arquivo JS.
  • Identificadores e seletores.

• Javascript.

  • Introdução.
  • Sintaxe e Declaração de variáveis.
  • Funções.
  • Arrays.
  • Objeto e funções.
  • DOM.
  • Tipos de dados.
  • Construindo um CRUD com HTML, CSS e JAVASCRIPT.

• CSS.

  • Introdução
  • Classes
  • Propriedades
  • Sistema de grid
  • Responsividade

OFF TOPIC

• Javascript.
  • Uso de Frameworks durante o curso.
  • O quanto é bom entender do contexto histórico da computação.
  • Criando Objetos em javascript.
  • Objeto document.
  • Método getElementById().

Clique aqui caso queira ver o código no Codepen.