Um Front-end Developer é um programador que codifica o código de Front-end de um site e passa por converter ficheiros de design de sites em HTML, JavaScript (JS) e / ou código CSS. O domínio de uma série de tecnologias associadas à função de Front-End developer permite uma melhor visibilidade e uma melhor experiência de utilizador permitindo assim a construção de uma web mais acessível a partir da correta interpretação do briefing, do planeamento, elaboração básica de wireframes, da marcação semântica do código e da construção de elementos interativos. É o profissional responsável por garantir que o front-end visual de um site esteja livre de erros e se pareça exatamente como foi projetado e que tenha a mesma visibilidade em diferentes computadores e sistemas operativos.
Especializado Front-end Web Developer
Objetivos
O curso Front-end Web Developer, pretende dotar os formandos de todos os conhecimentos teóricos e competências necessários para ingressar no mercado de trabalho e assumir uma atividade profissional ligada a competências com tecnologias de front-end. Serão criadas bases sólidas para trabalhar com e solucionar problemas de desenvolvimento de Front-end.
Destinatários
Todos os interessados em iniciar ou consolidar uma atividade profissional como Front-end Web Developers.
Pré-Requisitos
Gosto e apetência pela área de desenvolvimento, não existem pré-requisitos técnicos muito específicos para a inscrição neste curso, o programa foi projetado e desenvolvido para englobar vários perfis de alunos.
Metodologia
Formação Presencial ou Live Training (Formação Online Síncrona).
Programa
- Fundamentos de UI/UX para Developers (9h)
- HTML5 (21h)
- CSS3 (27h)
- Workshop: SASS (9h)
- Workshop: Responsive Web Design (12h)
- Fundamentos de Programação (com Javascript) (15h)
- Javascript (54h)
- Frontend frameworks – Angular (18h)
- Frontend frameworks – React (18h)
- Workshop: GIT (9h)
- Projeto (18h)
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
Html5 + CSS3 princípios 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, …)
FRONTEND FRAMEWORKS – 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 prática 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
FRONTEND 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
Instalação de Cliente GIT
Criar uma equipa
Criar um projecto
Configurar repositório
Criar um branch a partir de master
Commit
Revert
Merge
Deploy