Curso Detalhes

Este curso aborda o tema do desenvolvimento web front-end (cliente), que o utilizador experimenta no navegador. Nesta ação será possível construir sites modernos e interativos, aprendendo os fundamentos de HTML, CSS e JavaScript - três linguagens comuns nas quais todos os sites modernos são construídos. Este curso é sobre a componente do navegador/”client-side” e não o servidor/”server-side”.

Programadores que pretendam criar aplicações web com base em padrões abertos da indústria. Este curso é independente da tecnologia do lado do servidor que utilizar, podendo participar, independentemente de usar PHP, ASP.NET, Python, Ruby on Rails.

Os participantes devem estar capazes de:
• Conhecer alguns padrões de desenvolvimento na área de programação
• Usar JavaScript, CSS e HTML para produzir páginas web

Conhecimentos elementares de programação - em qualquer linguagem - é requisito base.

(não existem exames)

O protocolo HTTP
Este módulo descreve o protocolo HTTP usado para obter recursos do servidor. Exploraremos os detalhes do que é usado pelo navegador com um servidor para garantir que a comunicação seja correta.
• Verbos HTTP e seus significados
• Cabeçalhos de pedido e resposta
• Interpretar códigos de resultado
• “Cookies”
• Redirecionamento
• Recursos de cache

HTML Básico
A estrutura de uma página da web é criada em HTML. Veremos elementos simples como campos de entrada, divs, a, vide, etc para ter certeza de que o conteúdo está estruturado da maneira adequada.
• Anatomia de uma página
• Como é analisada uma página
• Elementos importantes do HTML
• Estilo e comportamento

Formulários
Trabalhar com formulários é um dos aspetos mais importantes no desenvolvimento de HTML. Possibilita ao utilizador enviar dados ao servidor
• Elementos de Formulário
• Como funcionam os formulários
• Atributos e funções úteis
• Validação

Semântica HTML
O HTML moderno inclui uma variedade de tags semânticas que tornam mais fácil a indexação e visualização de páginas da web. Neste módulo, examinamos esses elementos e seus benefícios.
• A necessidade de elementos significativos
• Cabeçalhos, conteúdo e rodapés
• Artigos e seções
• Elementos de navegação
• Figuras significativas
• Datas e horas

O essencial do CSS
Uma página da web só fica visualmente agradável quando começamos a estilizá-la. O HTML é ótimo para colocar todo o conteúdo numa página, mas quando queremos mudar o tipo de letra, as cores, a localização de componentes, é necessário de alguma forma para configurar propriedades. O CSS é a linguagem usada para garantir que o navegador formate a página da forma desejada. Começaremos com alguns seletores simples e aprenderemos como usá-los de maneira eficiente.
• Estilizando sites usando CSS
• Seletores CSS
• Compreendendo a herança e o comportamento em cascata
• Escolhendo a unidade certa

Princípios de “web design”
O “web design” não é apenas saber CSS, é sobre criar aplicativos agradáveis e fáceis de usar. Neste capítulo, analisaremos alguns dos princípios fundamentais que os “designers” usam para transformar um design bom em excelente.
• Layout e composição
• Cor
• Gráficos
• Tipografia
• Experiência de utilizador

Posicionamento CSS
Uma das partes mais difíceis do CSS é garantir que todos os elementos estejam localizados na posição correta. Explicaremos como fazer isso e quais propriedades têm que tipo de efeito nos elementos da página.
• Compreendendo o “Box model”
• Fluxo, exibição, flutuação
• Elementos de posicionamento
• Flex Box
• Grid
• Estratégias de layout de página

Web design responsivo com Bootstrap
Um site precisa ter uma aparência fabulosa em qualquer dispositivo; seja um laptop, tablet ou telefone. O bootstrap ajuda bastante no confuso mundo dos diferentes tipos de ecrã e equipamentos.
• Normalizando e Reinicializando
• O sistema de grade
• Aulas de utilidades
• Personalização de aparência
• Componentes: navegação, pop-overs , etc

Introdução ao JavaScript
JavaScript é “A” linguagem de programação para a web e é cada vez mais importante noutras áreas. Neste módulo, faremos a primeira abordagem à linguagem e avaliaremos a usar de forma eficiente.
• Por que o JavaScript é importante?
• O que é ECMAScript?
• Performance
• Escolhendo as bibliotecas certas
• Ferramentas de desenvolvimento

Fundamentos da linguagem JavaScript
Neste módulo, falaremos sobre os princípios básicos do JavaScript. JavaScript pode ser uma linguagem muito complicada, então tentaremos explicar algumas de suas peculiaridades também. Assim, podemos evitar surpresas mais tarde.
• Usando Variáveis
• Primitivos e objetos
• Funções: mais poderosas do que você espera
• Entendendo o escopo
• Manipulação de erros
• Melhores Práticas

Coleções de JavaScript
As coleções são uma grande parte da programação OO (Object Oriented), permitem que se mapeiem relacionamentos um-para-muitos ou muitos-para-muitos, bem como permitem que se trabalhe com conjuntos de dados. Neste módulo veremos os diferentes tipos de coleções em JavaScript e seus usos.
• Armazenamento de vários valores em matrizes
• Funções e operadores úteis
• Usando objetos como mapas
• Conjuntos, mapas e outros

Código assíncrono em JavaScript
O código assíncrono é realmente útil em JavaScript, pois nos permite manter a IU responsiva ao executar código. Neste módulo, veremos como fazer nosso código executar de forma assíncrona.
• Encadeamento em JavaScript
• Usando Callbacks
• Manipulação de eventos
• Trabalhando com Promessas
• Async e Await

Estruturação de aplicações e ferramentas JavaScript
Neste módulo, vamos esclarecer essas ferramentas e ensinar como configurar um projeto JavaScript moderno.
• Usando Bibliotecas: jQuery
• Locais de distribuição de conteúdo fidedigno
• Obtendo bibliotecas com npm
• Módulos versus Objeto Global
• Usando executores de tarefas como o Gulp
• Ferramentas de empacotamento e minimização como WebPack
• PolyFills e Transpilers como Babel e TypeScript
• Ferramentas para qualidade de código

Serviços REST
Este módulo é sobre a comunicação com o back-end. REST permite a comunicação cliente-servidor usando HTTP.
• REST
• Verbos e URLs
• Formato XML e JSON
• Exemplo com node.js e Express

Consumo de serviço do lado do cliente
Usando AJAX, podemos chamar ações do lado do servidor a partir do cliente e processar os resultados de uma maneira rápida e amigável.
• Obtendo dados usando AJAX
• Fetch API
• Bibliotecas Externas