Especializado Front-end Web Developer

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
• Front-end Developers Build the User Experience
• Content Strategy
• Arquitetura de informação
• Design Patterns & Componentes
• Wireframing & Prototipagem
• Multi-screen & Responsive Challenges

HTML + HTML5

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

CSS + CSS3

• Conhecimentos de sistema operativo (Windows ou MacOS) na ótica do utilizador. Conhecimentos de HTML. Gosto e apetência pela programação web.
• Conteúdo programático
• 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: 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

Javascript Avançado

• 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, …)
• Apresentação de Frameworks de Javascript para desenvolvimento de Aplicações Web modernas e Desenvolvimento de aplicações Mobile nativas e Hybridas (Angular, React, Vue, React Native, NativeScript, Typescript, …)

Workshop: jQuery

• O que é , para que serve?
• Guardar JQuery Objects em variáveis
• Conceito de chaining e looping em JQuery
• “Document Ready” do JQuery
• Manipulação do DOM com JQuery
• Events e Delegação de Eventos em Jquery
• Efeitos e Animação em JQuery
• Metodos para percorrer, filtrar o DOM .
• Extensões de JQuery.

Angular com Typescript

• 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

Projeto Prático