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.
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.
Note-se que, este cursos desenvolvem-se com graus de exigência extremamente elevados – tanto em carga horária como pela parte prática, o que obriga a uma total disponibilidade, do formando, para o correto acompanhamento das matérias leccionadas, bem como do projeto a realizar.
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
Presencial ou live training.
Programa
- Fundamentos de UI/UX para Developers (9h)
- HTML + HTML5 (21h)
- CSS + CSS3 (27h)
- Workshop: Responsive Web Design (12h)
- Fundamentos de Programação (com Javascript) (12h)
- Javascript (21h)
- Javascript Avançado (21h)
- Workshop: jQuery (9h)
- Angular com Typescript (21h)
- Projeto Prático (18h) (excepto nas edições da Campanha de Verão)
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