Fundamentos de Web Development

• Protocolos de comunicação na web
• Tecnologias e ferramentas front-end e back-end
• Gestão de projectos web
• Domínios e alojamento de sites

Metodologias Agile para Gestão de Projetos

• Metodologias Processo de Design Digital
• Processos de desenvolvimento de produtos (Agile, Lean e Waterfall)
• Conceito de MVP (Minimum Viable Product)
• Processo de design (etapas)
• The Design Sprint (Google Product Design Sprint)
• Manifesto Ágil, Valores e Princípios Ágeis

Workshop: Scrum

• Manifesto Ágil
• Raízes do SCRUM
• Visão geral Framework SCRUM
• Papéis e Responsabilidades: PO, SM e Time
• Artefatos do SCRUM
• Eventos
• Implementação
• Métricas

Fundamentos de UI/UX para Developers

• Introdução ao Ux & Ui
• Multi-screen & Responsive Challenges
• UX/UI and development
• Arquitetura de informação
• Design Patterns & Componentes
• Wireframing & Prototipagem
• Assets for development

HTML5

• Estrutura de uma página HTML
• Elementos e atributos
• Elementos de texto
• Listas
• Hiperligações
• Imagens
• Tabelas
• Formulários
• Elementos multimédia
• Elementos estruturais do HTML5

CSS3

• Evolução das CSS
• Utilizar CSS em páginas Web
• Selectores CSS
• Unidades
• Trabalhar com cores
• Vendor prefixes
• Formatação de texto
• Tipografia
• Backgrounds e gradientes
• Borders e sombras
• Box model
• Layout de páginas
• Novos métodos de layout em CSS3
• Propriedades para tabelas e formulários
• Criação de elementos de navegação
• CSS sprites e elementos interactivos
• Transforms, transitions e animations
• Frameworks front-end – Bootstrap

Workshop: SASS

• Preprocessing
• Variáveis
• Nesting
• Partials
• Modules
• Mixins
• Extend & Inheritance
• Operadores

Workshop: Responsive Web Design

• Princípios básicos do responsive
• Responsive websites vs. Mobile website vs. Mobile app
• Introdução ao processo de desenvolvimento
• Html + CSS3 principios básicos
• Media queries
• Fix and fluid Layouts
• Adaptive and responsive web design
• Responsive design
• Frameworks
• Projeto Prático

Fundamentos de Programação (com Javascript)

• Paradigmas de Programação (Object Oriented, Imperative e Functional Programming,…)
• Processo de desenvolvimento de um algoritmo (programa) (Utilização de pseudo-código e fluxogramas)
• Tipos de Dados numa linguagem de programação (Variáveis, constantes, …)
• Operadores e cálculos numa linguagem de programação
• Controle da execução de um programa com recurso a estruturas de decisão e repetição

Javascript

• Introdução, história e evolução dos vários standards da linguagem
• Breve introdução á historia de desenvolvimento da linguagem, e a sua evolução até aos dias de hoje.
• Conceitos / Instruções Básicas em javascript
  • Expressões
  • Comentários
  • Variáveis e constantes
  • Operadores
• Tipos de dados primitivos em Javascript
  • Numbers, Strings, Boolean, null, undefined
• Estruturas de decisão e repetição em javascript
  • Estruturas de decisão no controle do fluxo de um programa: (If, if/else, switch)
  • Estruturas de repetição: (For, While, Do/While)
• Tipos de dados Complexos, Arrays, Objectos, Funções e Built-In Objects
  • Utilização de Arrays
  • Criação de Objectos, propriedades e métodos
  • Conceito de Função, funções com parâmetros
  • Funções anónimas e IIFE (Imediate Invoked Function Expression)
  • Funções “construtoras” de Objectos
  • Conceito de “Scope” de uma variável, varáveis locais e globais, diferenças em ES6 com let e const
  • Built-In Objects em JS
• Browser Object Model (BOM)
• Document Object Model (DOM)
• Global Objects (Number, String, Boolean, Undefined, Null, Object, Math, Date, …)
• Conceito e manipulação do DOM (Document Object Model) numa aplicação web
  • Como o Browser interpreta o HTML e cria um Objecto (DOM), representativo dos elementos da página
  • Tipos de elementos(Nodes) do DOM (Document, Element, Attributes e TextNodes)
  • Processo e Conceito de manipulação do DOM
  • Metodos para selecionar um elemento(node) ou uma coleção de elementos(nodelist) do DOM (Live e static methods)
  • Propriedades e métodos para percorrer o DOM
  • Alterar conteúdos de elementos do DOM
  • Inserir, mover ou eliminar elementos do DOM
  • Manipulação de atributos de elementos do DOM
  • Trabalhar com Eventos em Javascript
• Conceito de interactividade com Eventos em JS
• Categorias (tipos) de Eventos em JS
• Definição de Eventos em JS (HTML event handler’s, Event Handler’s, DOM
• EventListeners)
• Conceito de Event Flow e suas fases em JS (Capturing, targeting e bubbling)
• Conceito de Event Object em JS
• Delegação de Eventos em JS
• Introdução à especificação ES6
• Evolução do standard de javascript e novas especificações ES6, ES7 e ES8
• Utilização de “Transpilers” como o BabelJS para a compilação de ES6 em “Vanilla Javascript” standard (ES5)
• Variáveis e parâmetros em ES6 (let e const, Destructuring, Default Parameters, Classes, Rest e Spread operators, multiline e template strings,…)
• Arrow functions, Iterators, e outros conceitos de Functional programming
• Novos métodos de manipulação de Arrays e Objectos (map, reduce, Object.Assign(), …)
• AJAX e JSON com Javascript (ES6)
  • Conceito de Ajax com JS (requests e responses)
  • Tipos de dados numa comunicação assíncrona com o servidor
  • Conceito de Promises (ES6)
  • Utilização da “Fetch API” para chamadas assíncronas.
  • Gestão de erros em Javascript
  • Filtrar, Ordenar e pesquisar numa estrutura de dados em JS
  • Introdução e utilização de algumas API’s de HTML5 (LocalStorage, SessionStorage, Geolocation, …)

Front End Framworks – Angular

• Introdução, Ambiente de Desenvolvimento:
  • Breve introdução ao ECMAScript, novas funcionalidades da especificação ES6 (Classes, fat Arrow functions, spread e rest operators, destructuring, …)
  • Breve introdução à sintaxe do Typescript
  • Gestão de “packages, librarias e frameworks” de Javascript com npm (ou yarn)
• Introdução ao Angular
  • Enquadramento da utilização da framework Angular para desenvolvimento Web
  • Abordagem e explicação genérica sobre a framework
  • Utilização de Angular CLI como ferramenta para gerir, e desenvolver projetos em Angular
  • Conceitos de compilação JIT (Just in Time) e AoT (ahead of time)
  • Demonstração practica da estrutura de uma aplicação em Angular
• Elementos estruturais de uma Aplicação em Angular
  • Components
  • Services
  • Directives
  • Pipes
  • Modules
  • Conceito de Data-Binding em Angular
• Navegação entre componentes de uma Aplicação – Rounting
  • Conceitos básicos de “Routing”
  • Implementação de “Routing” e modulos que compõem uma estrutura de navegação
  • Passagem de “Data” em “Routing”
  • Conceito de “Child Routes”
• Dependency Injection em Angular
  • Introdução ao Padrão de Desenho : “Dependency Injection”
  • “Injectors” e “Providers”, “injectar” um serviço, utilização do HttpClient.
  • Reactive programming em Angular, com Observables
• Estratégia de comunicação entre componentes
  • Criar “loosely-coupled” components (@Input e @output properties)
  • Como passar dados entre componentes hierarquicamente relacionadas
  • Utilização do Padrão de Desenho “Mediator” através de DI de serviços
  • “Change Detection” em Angular e métodos “lifecycle” de uma componente
• Introdução a API Forms do Angular
  • Template-driven forms em Angular
  • Reactive forms em Angular
  • Utilizar o FormBuilder
  • Validação de Forms com Validators Built-in
• Interacção com servidores através do HttpClient
  • Introdução ao Modulo HttpClient
  • Interacção com webserver em “node” e Typescript
  • Efetuar chamadas para o servidor
  • Reactive Extensions (NGRX) em Angular

Front End Frameworks – REACT

• Build Workflow
• Componentes
• JSX
• Restrições JSX
• State
• Handling Events
• Two Way Binding
• Lists, keys & mapping
• Components Lifecycle
• React Hooks
• Ajax in React
• Axios
• Forms and Form Validation
• Redux
• Redux Advanced
• Deploying React project
• NEXT.js

Workshop: GIT

• Instalação e configuração de Servidor GIT
• Instação de Cliente GIT
• Criar uma equipa
• Criar um projecto
• Configurar repositório
• Criar um branch a partir de master
• Commit
• Revert
• Merge
• Deploy

Projeto