Formação Dev FullStack (Front + Back End)

Conteúdo programático

• 1 - Desenvolvendo em HTML, CSS e BOOTSTRAP
  Carga Horária: 20 horas

  Módulo 1 - O que é HTML?

  E o que é HTML5?

  A Estrutura do HTML

  Elementos HTML

  Elementos Vazios

  Sua primeira página da web

  Elementos de bloco e embutidos

  Atributos

  Títulos

  Id's e classes     

  Links

  Imagens

  Listas

  Formulários

  Como funciona um formulário HTML?

  Criando o primeiro formulário

  Agrupando com a tag fieldset

  Enviando os dados

  Caixas de texto multilinha - a tag textarea

  Radiobuttons

   

  Módulo 2 - Caixas de seleção

  Escolhas múltiplas

  Rótulos (labels) para caixas de seleção 

  Trabalhando dinamicamente com uma check box

   

  Módulo 3 - Dropdown Lists

  Noções básicas de tabelas

  Introdução aos elementos HTML5 semânticos

  Validação de formulário usando HTML5

  Como funciona a validação de HTML5   

  Usando padrões para validar endereços de e-mail

   

  Módulo 4 - O que é CSS?

  Como funciona o CSS

  Olá, mundo CSS!

  A anatomia de uma regra CSS

  Classes de elementos específicos

  Introdução ao CSS Box Model

  Elementos Inline vs. Block

  Elementos embutidos e tamanhos / margens

  Propriedade abreviada
  

  Visibilidade(Visibility) e exibição(display)

  Visibilidade x exibição

  Introdução ao posicionamento

  Introdução às cores em CSS

  Imagens de fundo

   

• 2 - Programando em JavaScript usando NODE
  Carga Horária: 20 horas

  Módulo 1 -  Introdução

  Visão Geral

  Sintaxe básica

   

  Módulo 2 - Funções

  Definição de Função     

  Chamando uma Função

  Parâmetros de Função

  A declaração return (retorno)

   

  Módulo 3 - Evento em Javascript

  O que é um evento?

  Evento onclick

   

  Módulo 4 - JavaScript - OPP (Programação Orientada a Objetos)

  Propriedades do Objeto

  Métodos de objeto

  Objetos Definidos pelo Usuário

  O operador new

  O construtor Object ()

  Definindo métodos para um objeto

   

  Módulo 5 - Node.js - Introdução

  Recursos do Node.js

  Criação de aplicativo Node.js

  O que é Callback?

  Programação Orientada a Eventos

  Como funcionam os aplicativos do Node?

   

  Módulo 6 - Emissor de evento

  Classe EventEmitter

  
  

  Módulo 7 - Node.js - Streams
  

  O que são streams?

  Piping streams

  Encadeando os Streams

  Node.js - sistema de arquivos (File System)

  Síncrono vs Assíncrono

  Abrindo um arquivo

  Flags
  

   

  Módulo 8 - Manipulando arquivos

  Node.js - Módulo Web

  Arquitetura de aplicativo da Web

  Criando um servidor web usando o Node

  Solicitação ao servidor Node.js

  Criação de cliente Web usando Node

   

  Módulo 9 - Express Framework

  Visão geral do Express

  Instalando o Express

  Primeiro web app com Express

  Request/Response (Pedido/Resposta)  

  Roteamento Básico       

  Arquivos estáticos          

  Entendendo o Express 

  Método GET

  Método POST

• 3 - Programando Interfaces Usando FrameWorks Front-End Angular9
  Carga Horária: 32 horas

  Módulo 1  TypeScript - Visão geral

  TypeScript - Sintaxe básica

   

  Módulo 2  Angular

  Aplicações do Angular

  Visão geral        

  CLI angular        

  Configuração do ambiente

  Configuração do Projeto

  Componentes 

  Módulos            

  Providers           

  Bootstrap          

  Data Binding     

  Event Binding

  Templates

  Directives

  Component directives  

  Como criar directives personalizadas

  Pipes

  Como criar um pipe personalizado

  Routing

  Services

  HTTPClient

  Forms

  Template Driven Form

  Model Driven Form

  Validação de formulário

  Materials/CDK

  Criar serviço para acessar a API REST

  Instalar e configurar material angular e CDK

  Materials

• 4 - Programando Interfaces Usando FrameWorks Front-End React
  Carga Horária: 24 horas

  Módulo 1 ? Introdução

  Estrutura de um projeto React

  Configurando seu primeiro app React

  Módulo 2 - Estado (State)

  Componentes

  sem estado (stateless)

  com estado (stateFull)

  Módulo 3 ? Props

  Props padrão   

  Estado (state) e props

  Validação de props

  Módulo 4 - Component API       

  Ciclo de Vida do Componente  

  Formulários      

  Eventos

  Módulo 5 - Child Events

  Refs                     

  Keys                     

  Router (Roteador)         

  Conceito Flux

  Módulo 6 - Usando Flux

  React Hooks     

  Regras dos Hooks           

  Hooks State                      

  Hooks Effect     

  Custom Hooks 

  Built-in Hooks  

  Módulo 7 - React Map

  Componentes de high order

• 5 - Programando em PHP Com Orientação a Objetos
  Carga Horária: 24 horas

  • Programas necessários
  • Configuração do ambiente de desenvolvimento
  • Classes e Objetos
  • Métodos e atributos
  • Clonando Objetos com PHP
  • Herança no PHP
  • Método abstrato
  • Método final e classe final
  • Como usar interface no PHP
  • Criar atributo e método estático
  • Atributo e método público
  • Atributo e método privado
  • Atributo e método protegido
  • Conexão com banco de dados usando PDO
  • Prepared Statements
  • CRUD - Cadastrar com PDO
  • CRUD - Listar registros com PDO
  • CRUD - Visualizar detalhes do usuário com PDO
  • CRUD - Editar registro com PDO
  • CRUD - Apagar registro com PDO
  • MVC - Instalar o Composer
  • MVC - Criar o core
  • MVC - Criar e carregar a controller
  • MVC - Criar a model
  • MVC - Criar a view
  • Início do site com PHP OO
  • Receber a URL amigável com PHP
  • Namespace e carregar páginas do site com URL amigável
  • Configurações básicas do site
  • Carregar a view do MVC com PHP
  • Criar a models e criar a conexão com banco de dados usando PDO
  • Criar classe helper para ler registros no banco de dados com PDO
  • Substituir link usando bindvalue
  • Introdução integrar o layout com PHP OO
  • Criar carrossel com Bootstrap e PHP
  • Inserir botão no carrossel
  • Implementar vídeo responsivo no site
  • Listar artigos recentes na página inicial
  • Inserir rodapé no site e animação
  • Criar página sobre empresa no site
  • Criar classe helper para inserir registros no banco de dados
  • Criar o menu do site
  • Criar o formulário de contato no site
  • Validar formulário e campo e-mail
  • Listar os artigos na página blog
  • Criar a classe paginação

• 6 - Dominando o Banco de Dados MySQL/MariaDB
  Carga Horária: 16 horas

  introdução ao MySQL e MySQL Workbench
  Design de banco de dados: modelagem de dados
  Ciclo de vida de desenvolvimento de banco de dados
  Projeto de banco de dados
  Tipos de técnicas de banco de dados
  MySQL Criar Banco de Dados, Tabelas, Tipos de Dados
  Banco de dados MariaDB
  MariaDB - sintaxe PHP
  Criar tabelas
  Drop Tables
  Inserir (Insert)
  Selecionar (Select)
  Cláusula Where
  Excluir (Delete)
  Cláusula like
  Clausula ORDER BY
  Join
  Transações (Transaction)
  Expressões Regulares
  Proteção de injeção de SQL (SQL Injection)
  

• 7 - UX / UI Design Usabilidade Aplicados em Mobile e Web Solutions
  Carga Horária: 24 horas

  User experience

  • O que é experiência do usuário?
  • Em que consiste uma boa experiência do usuário?
  • Pontos básicos de uma boa experiência

  
  

  Agile UX

  • Projetando UX com metodologia Agile
  • Lean UX
  • Design Thinking
  • Design Sprint: como funciona e como aplicar no seu projeto

  
  

  Ferramentas Agile

  • Métodologias ageis para desenvolvimento de projetos
  • Card Sorting: vamos as cartas
  • Card sorting tradicional
  • O que é e como funciona o sistema kanban
  • GameStorming: é hora do jogo

   

  Visão do produto em UX

  • MVP: Ferramentade de aprendizado
  • UX Canvas

  
  

  UX Strategy - Quem é o usuário do meu produto

  • Pesquisa
  • Proto-Persona
  • Como construir sua persona?
  • Persona

  
  

  UX Strategy - Funcionalidades focadas no usuário

  • Modelo Mental
  • Cenário em UX
  • Historia
  • Levantamento de Funcionlidades em UX
  • Fluxograma em UX

  
  

  UX Usability - Usabilidade Mobile

  • Os Princípios de UX para Aplicativos em Dispositivos Móveis
  • Thumb Zone - A Zona do polegar: projetando para usuários móveis
  • Mobile First - A arte de pensar Mobile
  • Recursos Mobile - Das funcionalidades aos recursos: evolução mobile
  • Padrões de UX no android
  • Padrões de UX no iOS
  • Como o relógio da Apple está mudando o UX design

  
  

  UX Usability - Design Visual

  • Sinais, símbolos, ícones ,signos
  • Protótipo

  
  

  UX Analysis

  • 10 heurísticas de Nielsen para o design de interface
  • O que são testes A/B
  • Google Analytics - Analise seus Aplicativos
  • Heat Map - Heat maps ajudam a entender o comportamento dos visitantes da sua página