Visão Geral

Este Curso Modern Web Development and Progressive Web Applications fornece um guia prático para a construção de Progressive Web Applications (PWAs) usando padrões e tecnologias modernas. Ele fornecerá uma visão geral dos recursos mais recentes em HTML, CSS e JavaScript, e introduzirá técnicas de design responsivo e estruturas CSS, como bootstrap. Ele cobrirá as principais APIs JavaScript disponíveis em navegadores contemporâneos, especialmente aquelas usadas na construção de PWAs, e examinará os recursos EMCAScript tanto nativamente em navegadores quanto usados ​​em Single Page Applications (SPAs) transpilados. O curso cobre todos os principais recursos do desenvolvimento de PWA, de Service Workers a Cache, Fetch, IndexedDB e APIs de notificação. Os participantes ganharão experiência prática com a construção de PWAs e uma compreensão da integração de PWA em sites tradicionais e SPA.

Objetivo

Ao final do curso, você aprenderá a:

• Utilize recursos HTML5, como tags semânticas
• Aproveite CSS3 e Bootstrap para um design responsivo e uma aparência profissional
• Crie componentes web reutilizáveis
• Use APIs HTML5 como Web Sockets, Drag and Drop e Service Workers
• Registre, instale e ative Service Workers
• Armazenar em cache dados estáticos e dinâmicos
• Utilize promises, async e await na API de busca e em outros lugares
• Salvar dados no IndexedDB
• Aproveite as Notificações Push

Publico Alvo

• Este curso foi criado para desenvolvedores web que desejam explorar as mais novas tecnologias web e criar aplicativos web progressivos.

Pre-Requisitos

• Os participantes devem estar familiarizados com JavaScript para fazer esta aula.

Informações Gerais

FORMATO:

• 100% On-Line na presença de um instrutor/consultor ativo no mercado e docente em sala de aula.
• In-company.
• Presencial.

PERÍODO:

• Noturno em noites intercaladas exemplo: terça-feira e quinta-feira das 19h às 23h,total de 4h por encontro.
• Aos sábados das 8h às 12h, total de 4h ou das 09h às 18h, total de 8h.
• Integral consultor disponibilidade

LAB:

• Apostila
• Laborátorio individual
• Exercícios práticos

Conteúdo Programatico

Why HTML5?

1. The Core of Web Development: HTML, CSS, and JavaScript
2. What Is HTML5?
3. Organizing Content with Sematic Tags

CSS3 and Responsive Design

1. The Role of CSS
2. New Features in CSS3
3. Responsive Design
4. Using the Bootstrap Library

Modern JavaScript

1. Promises
2. Scoped Variables
3. ES6 Classes and Modules
4. The Arrow Function
5. Using Build Tools and Package Managers

Web Components

1. Custom Elements
2. Shadow DOM
3. HTML Templates
4. The Lit Framework

JavaScript APIs

1. Web Sockets
2. Drag and Drop
3. Web Workers
4. Fetch
5. Service Workers
6. LocalStorage
7. IndexedDB

Overview of SPA Development

1. Principles of SPA Development
2. React
3. Angular

Principles of PWA Development

• Advantages of PWAs
• PWAs vs. Native Apps
• Core PWA Technologies
  1. Service Workers
  2. Fetch
  3. Promises
  4. Caching

The Service Worker

1. What Is a Service Worker?
2. The Service Worker Lifecycle
3. Service worker Events
4. Intercepting the Fetch Event
5. Background Sync
6. Push Notifications

The Fetch API

1. Making Requests
2. Reading Responses
3. Promise Chaining

The Cache API

1. Caching the Application Shell
2. Cache First
3. Network First
4. Creating Fallback Content
5. Cleaning the Cache

IndexedDb

1. The IndexedDB API
2. Using Promises with IndexedDB
3. Creating Databases, Types, and Indexes
4. CRUD Operations and Transactions

Introducing Push Notifications

1. Display a Notification
2. Notification Options and Icons
3. Listening for Events
4. Subscribing to Push Notifications

Complementary Tools and Frameworks

1. Combining PWAs and SWAs
2. Testing with Lighthouse
3. Leveraging Workbox