Especialização Frontend com Svelte & Especialização de Computação Científica com MATLAB
💡 Objetivo: Estabelecer o plano de arquitetura instrucional, matriz curricular e plano de execução técnica para a criação de dois novos cursos no Portal Jekyll, cumprindo rigorosamente a matriz canônica do Padrão Ouro Educacional (20 Capítulos • 5 Blocos Temáticos • 100 Artefatos Sincronizados por Curso).
/docs e o Padrão VigenteA auditoria e análise dos documentos técnicos da pasta docs/ (docs/PADROES_E_MEMORIA_ARQUITETURAL.md, docs/ARQUITETURA_ATUAL.md, docs/MEMORIA_CONTEXTO.md, docs/PLANO_SEQUENCIA_DIDATICA_TEORIA_PRATICA.md, entre outros) revelam que o portal atingiu 100% de conformidade no Padrão Ouro Educacional em todos os seus 38 cursos e especializações.
topicos/{numero}_{slug}.md: Teoria completa, mapa conceitual Mermaid, tabelas de apoio, boas práticas e links pedagógicos bidirecionais.exercicios/{numero}_{slug}_exercicios.md: Caderno progressivo em 4 Níveis (Nível 1 Fundamentos, Nível 2 Prática, Nível 3 Integração, Nível 4 Desafio Corporativo), com ### Resultado Esperado, instruções de entrega (Teams) e <details markdown="1"><summary>🔑 Gabarito de Código & Solução Comentada</summary> com código funcional e executável.exemplos/{numero}_{slug}_exemplos.md: Demonstrações práticas e código executável de apoio.slides/{numero}_{slug}_slides.md: Slides com layout: slide, tópicos concisos e diagramas conceituais Mermaid.quizzes/{numero}_{slug}_quiz.md: Quizzes formativos interativos com 3 questões (<div class="quiz-container">, <button class="quiz-option" data-correct="..." data-feedback="...">).index.md: Hub principal do módulo com a matriz dos 5 blocos, status e navegação.topicos/index.md, exercicios/index.md, exemplos/index.md, slides/index.md, quizzes/index.md: Índices setoriais categorizados pelos 5 blocos._data/cursos.yml (fonte única para cards da home, metadados e pré-requisitos).python _scripts/gerar_navigation_yml.py.python _scripts/build_indice_geral.py.spec_frontend_com_sveltemod_05_javascript_fundamentos_e_dom)flowchart TD
B1["🧱 Bloco 1: Fundamentos do Svelte 5 & Runes
(Caps 01 a 04: Compilação, Runes $state/$derived, Templates/Eventos, Form Binding)"]
B2["🧱 Bloco 2: Componentes, Efeitos & Animações
(Caps 05 a 08: Props/$bindable/Snippets, $effect/Lifecycle, Scoped CSS/Tailwind, Animações Nativas)"]
B3["🧱 Bloco 3: Estado Global, Stores & Qualidade
(Caps 09 a 12: Estado Reativo/Stores, Context API, APIs REST/Zod, Testes Vitest/Playwright)"]
B4["🧱 Bloco 4: SvelteKit, Roteamento & Full-Stack
(Caps 13 a 16: File Routing, Load Functions, Form Actions, SSR/SSG/Adapters)"]
B5["🧱 Bloco 5: Produção, Performance & Projeto Integrador
(Caps 17 a 20: Otimização/Vitals, Acessibilidade/SEO, Autenticação/Sessão, Dashboard Corporativo)"]
B1 --> B2 --> B3 --> B4 --> B5
style B1 fill:#ffebee,stroke:#e53935,stroke-width:2px
style B2 fill:#fff3e0,stroke:#fb8c00,stroke-width:2px
style B3 fill:#e8f5e9,stroke:#43a047,stroke-width:2px
style B4 fill:#e1f5fe,stroke:#039be5,stroke-width:2px
style B5 fill:#ede7f6,stroke:#8e24aa,stroke-width:2px
| Cap | Slug do Capítulo | Título do Capítulo | Tópicos e Habilidades Práticas |
|---|---|---|---|
| 01 | 01_ecossistema_svelte_e_compilacao |
O Compilador Svelte, Vite e Anatomia do Componente | Filosofia sem Virtual DOM, tempo de compilação vs runtime, setup de projeto com Vite e TypeScript, estrutura de arquivo .svelte. |
| 02 | 02_reatividade_moderna_com_runes |
Reatividade Moderna no Svelte 5 com Runes | A nova reatividade fina com $state, $state.raw, $derived, $derived.by e boas práticas de mutação e imutabilidade. |
| 03 | 03_templates_logica_e_eventos |
Sintaxe de Template, Blocos Lógicos e Eventos | Blocos {#if}, {#each} (com chaves de identificação), {#await}, delegação de eventos e callbacks de componentes. |
| 04 | 04_formularios_e_two_way_binding |
Formulários e Two-Way Data Binding | Diretivas bind:value, bind:checked, bind:group, bindings numéricos, formulários dinâmicos e controle de inputs. |
| 05 | 05_props_snippets_e_slots |
Comunicação entre Componentes: Props, $bindable e Snippets | Declaração de propriedades com $props(), propagação bidirecional com $bindable(), transição de slots para Snippets ({#snippet}). |
| 06 | 06_efeitos_reacao_e_ciclo_de_vida |
Efeitos Colaterais, Reação e Ciclo de Vida | Gestão de efeitos com $effect, $effect.pre, $effect.root, tick(), montagem e desmontagem segura no navegador. |
| 07 | 07_estilizacao_scoped_css_e_tailwind |
Estilização com Scoped CSS, Seletores Globais e Tailwind | Isolamento de CSS nativo em tempo de compilação, :global(), classes dinâmicas com class:, integração com Tailwind CSS v3/v4. |
| 08 | 08_animacoes_e_transicoes_nativas |
Transições, Animações Nativas e Motion | Diretivas nativas transition:fade, slide, fly, scale, diretiva animate:flip, stores de física com spring e tweened. |
| 09 | 09_gerenciamento_de_estado_com_runes_e_stores |
Gerenciamento de Estado Global: Runes em Módulos vs Stores | Criação de classes reativas globais com runes em arquivos .svelte.ts, contraste com stores legadas (writable, derived). |
| 10 | 10_context_api_e_injecao_de_dependencia |
Context API e Injeção de Dependências | Compartilhamento de estado na árvore com setContext, getContext, hasContext e isolamento de dependências. |
| 11 | 11_consumo_de_apis_rest_e_validacao |
Consumo de APIs REST, Fetch Tipado e Schemas Zod | Padrões de requisição assíncrona, tratamento de erros de rede, desacoplamento de serviços e validação de dados com Zod. |
| 12 | 12_testes_automatizados_vitest_e_playwright |
Testes Automatizados com Vitest e Playwright | Testes de unidade e de componentes com @testing-library/svelte e Vitest; testes end-to-end (E2E) com Playwright. |
| 13 | 13_fundamentos_do_sveltekit_e_roteamento |
Fundamentos do SvelteKit 2 e Roteamento por Arquivos | Estrutura de rotas baseada em diretórios, páginas +page.svelte, layouts aninhados +layout.svelte, parâmetros dinâmicos e grupos (group). |
| 14 | 14_carregamento_de_dados_com_load_functions |
Carregamento de Dados com Funções Load | Requisições no servidor com +page.server.ts e universais com +page.ts, função load(), inferência automática do tipo PageData. |
| 15 | 15_form_actions_e_mutacao_progressiva |
Form Actions, Envio de Formulários e Aprimoramento Progressivo | Criação de actions em +page.server.ts, aprimoramento progressivo de formulários com use:enhance sem recarregar a página. |
| 16 | 16_estrategias_de_renderizacao_ssr_ssg_e_adapters |
Estratégias de Renderização: SSR, SSG e Endpoints de API | Páginas pré-renderizadas (SSG), endpoints de API +server.ts, adaptadores oficiais (@sveltejs/adapter-node, adapter-static). |
| 17 | 17_otimizacao_de_performance_e_auditoria |
Otimização de Performance e Core Web Vitals | Análise de bundle, lazy loading de componentes e dependências pesadas, medição de LCP, INP e CLS. |
| 18 | 18_acessibilidade_a11y_e_seo_no_svelte |
Acessibilidade (a11y) Nativas e SEO Dinâmico | Alertas de a11y em tempo de compilação no Svelte, manipulação de metatags dinâmicas e Open Graph via <svelte:head>. |
| 19 | 19_seguranca_autenticacao_e_sessao |
Segurança, Autenticação e Sessões no SvelteKit | Gestão segura de cookies HttpOnly, proteção CSRF, hooks de middleware em hooks.server.ts e controle de variáveis em $env. |
| 20 | 20_projeto_integrador_dashboard_fullstack_sveltekit |
Projeto Integrador: Dashboard Corporativo com SvelteKit | Construção de uma aplicação completa: autenticação, painel analítico com gráficos reativos, CRUD com Form Actions e auditoria JSON. |
spec_computacao_cientifica_com_matlabmod_01 e mod_02)flowchart TD
M1["🧱 Bloco 1: Ambiente MATLAB & Álgebra Matricial
(Caps 01 a 04: Desktop/Tipos, Matrizes/Indexação, Funções/Scripts .m, Vetorização/Performance)"]
M2["🧱 Bloco 2: Estruturas Avançadas, I/O & Visualização
(Caps 05 a 08: Cells/Structs/Tables, Import/Export/MAT, Gráficos 2D/3D, GUIs App Designer)"]
M3["🧱 Bloco 3: Métodos Numéricos & Álgebra Linear
(Caps 09 a 12: Sistemas Lineares/SVD/Eig, Zeros/Interpolação/Splines, Diferenciação/Quadratura, EDOs ode45)"]
M4["🧱 Bloco 4: Processamento de Sinais & Imagens
(Caps 13 a 16: Estatística Computacional, FFT/Análise Espectral, Filtros Digitais FIR/IIR, Processamento de Imagens)"]
M5["🧱 Bloco 5: Simulink, Testes & Projeto de Engenharia
(Caps 17 a 20: Modelagem Simulink, Controle/PID Malha Fechada, Unit Tests/Interoperabilidade, Simulador Integrador)"]
M1 --> M2 --> M3 --> M4 --> M5
style M1 fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
style M2 fill:#e0f2f1,stroke:#00897b,stroke-width:2px
style M3 fill:#fff8e1,stroke:#fbc02d,stroke-width:2px
style M4 fill:#fbe9e7,stroke:#d84315,stroke-width:2px
style M5 fill:#efebe9,stroke:#5d4037,stroke-width:2px
| Cap | Slug do Capítulo | Título do Capítulo | Tópicos e Habilidades Práticas |
|---|---|---|---|
| 01 | 01_ambiente_matlab_e_sintaxe_fundamental |
O Ambiente MATLAB, Tipos de Dados e Operações Básicas | Interface Desktop, Command Window, Workspace, variáveis, tipos primitivos (double, single, inteiros), variáveis especiais (ans, eps, NaN, Inf). |
| 02 | 02_vetores_matrizes_e_operadores_matriciais |
Álgebra Vetorial, Matrizes e Operadores Elemento-a-Elemento | Construção de matrizes, operador :, indexação lógica e linear, concatenação, operações matriciais vs elemento-a-elemento (* vs .*, ^ vs .^). |
| 03 | 03_scripts_funcoes_e_modularizacao |
Scripts, Funções .m, Escopo e Modularização |
Criação de scripts, funções locais e de arquivo, argumentos dinâmicos (nargin, nargout, varargin), escopo de workspace e subfunções. |
| 04 | 04_estruturas_de_controle_e_vetorizacao |
Controle de Fluxo, Vetorização e Otimização de Código | Estruturas if-elseif-else, switch-case, for, while; técnicas de pré-alocação de memória, vetorização de cálculos e profiling com tic/toc. |
| 05 | 05_estruturas_de_dados_cell_arrays_e_tables |
Estruturas de Dados: Cell Arrays, Structs e Tables | Matrizes heterogêneas (cells), estruturas com campos nomeados (struct), manipulação de dados tabulares com table, tipos datetime e categorical. |
| 06 | 06_importacao_exportacao_e_gestao_de_arquivos |
Importação, Exportação e Persistência de Dados | Leitura e escrita de arquivos CSV, Excel e texto com readtable/writetable, persistência de variáveis em arquivos binários .mat (save/load). |
| 07 | 07_visualizacao_cientifica_2d_e_3d |
Visualização Científica: Gráficos 2D, 3D e Anotações Técnicas | Gráficos plot, scatter, bar, formatação de eixos, títulos e legendas (LaTeX), gráficos tridimensionais surf, mesh, mapas de calor e múltiplos subplot. |
| 08 | 08_design_de_interfaces_com_app_designer |
Criação de Interfaces Gráficas com App Designer | Introdução ao MATLAB App Designer, componentes visuais (botões, sliders, plots interativos), programação orientada a eventos e callbacks. |
| 09 | 09_algebra_linear_computacional_e_sistemas_lineares |
Álgebra Linear Computacional e Resolução de Sistemas | Resolução de sistemas $Ax = b$ via operador barra invertida \, determinante, posto, autovalores/autovetores (eig), decomposição SVD e decomposição LU. |
| 10 | 10_zeros_de_funcoes_interpolacao_e_ajuste_de_curvas |
Zeros de Funções, Interpolação e Ajuste de Curvas | Determinação de raízes com fzero e roots, interpolação linear e cúbica (interp1, spline), ajuste de modelos polinomiais com polyfit/polyval. |
| 11 | 11_diferenciacao_e_integracao_numerica |
Diferenciação e Integração Numérica | Aproximações por diferenças finitas com diff e gradient, integração numérica com integral, regra dos trapézios com trapz e quadratura numérica. |
| 12 | 12_equacoes_diferenciais_ordinarias_edos |
Equações Diferenciais Ordinárias (EDOs) | Formulação de problemas de valor inicial (PVI), resolução numérica com ode45 (Runge-Kutta), sistemas de EDOs acopladas e solucionadores para sistemas rígidos (ode15s). |
| 13 | 13_estatistica_descritiva_e_analise_de_dados |
Estatística Computacional e Análise Exploratória | Medidas de tendência central e dispersão (mean, std, var, median), quantis, histogramas, análise de correlação (corrcoef) e distribuições. |
| 14 | 14_processamento_digital_de_sinais_e_fft |
Processamento Digital de Sinais e Transformada de Fourier (FFT) | Sinais contínuos e discretos, amostragem, Transformada Rápida de Fourier (fft), espectro de amplitude e potência, representação temporal vs espectral. |
| 15 | 15_filtros_digitais_e_tratamento_de_ruido |
Projeto e Aplicação de Filtros Digitais | Introdução aos filtros FIR e IIR, funções de transferência em $Z$, atenuação de ruído com filter e filtragem com fase zero usando filtfilt. |
| 16 | 16_processamento_basico_de_imagens_digitais |
Processamento Básico de Imagens Digitais | Imagens como matrizes numéricas, conversão RGB para escala de cinza (rgb2gray), convolução espacial com máscaras, binarização por limiarização e segmentação. |
| 17 | 17_introducao_ao_simulink_e_sistemas_dinamicos |
Introdução ao Simulink: Modelagem Baseada em Blocos | O ambiente Simulink, blocos fundamentais (fontes, sinks, integradores, ganhos, somadores), simulação contínua e interpretação no Scope. |
| 18 | 18_sistemas_de_controle_e_malha_fechada_no_simulink |
Modelagem de Sistemas de Controle e Realimentação | Funções de transferência, diagramas de blocos em malha fechada, controladores PID, sintonia de ganhos e análise de resposta transitória. |
| 19 | 19_testes_unitarios_performance_e_interoperabilidade |
Qualidade de Código, Testes Unitários e Interoperabilidade | Framework de testes unitários do MATLAB (matlab.unittest), Profiler de performance, integração com Python (py.nome_modulo) e scripts de auditoria. |
| 20 | 20_projeto_integrador_simulador_fisico_e_analise_de_dados |
Projeto Integrador: Simulador Dinâmico e Análise de Engenharia | Projeto completo de ponta a ponta: modelagem de sistema dinâmico (físico/mecânico/elétrico), simulação numérica de EDOs, interface gráfica e exportação de relatório com auditoria JSON. |
A execução da criação dos dois novos cursos obedecerá a um roteiro estruturado em 5 fases sequenciais:
flowchart LR
F1["Fase 1: Governança & Metadados\n(_data/cursos.yml, criação de pastas)"]
--> F2["Fase 2: Geração dos Índices Mestres\n(6 índices por curso)"]
--> F3["Fase 3: Produção dos 100 Artefatos\n(Topicos, Exercícios, Exemplos, Slides, Quizzes)"]
--> F4["Fase 4: Sincronização do Portal\n(gerar_navigation_yml, build_indice_geral)"]
--> F5["Fase 5: Auditoria & Homologação CI\n(validate_liquid, test_links, git)"]
style F1 fill:#e8eaf6,stroke:#3f51b5,stroke-width:1.5px
style F2 fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
style F3 fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
style F4 fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
style F5 fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff
_data/cursos.yml adicionando:
spec_frontend_com_svelte sob especializacoes (área: Frontend).spec_computacao_cientifica_com_matlab sob especializacoes (área: Sistemas ou Computação Científica).spec_frontend_com_svelte/
├── topicos/
├── exercicios/
├── exemplos/
├── slides/
└── quizzes/
spec_computacao_cientifica_com_matlab/
├── topicos/
├── exercicios/
├── exemplos/
├── slides/
└── quizzes/
index.md na raiz de cada curso com frontmatter padrão (layout: single, sidebar: nav: "main"), callout de introdução, matriz tabular dos 5 blocos (6 colunas), links pedagógicos e rodapé canônico.topicos/index.md, exercicios/index.md, exemplos/index.md, slides/index.md, quizzes/index.md) organizados com tabelas e links para todos os 20 capítulos.Para cada capítulo (de 01 a 20), gerar rigorosamente:
topicos/{numero}_{slug}.md: Teoria completa, diagrama Mermaid, tabela didática e links para os outros 4 artefatos irmãos e para o próximo capítulo.exercicios/{numero}_{slug}_exercicios.md: 4 Níveis Progressivos (N1 Fundamentos, N2 Prática, N3 Integração, N4 Desafio), com ### Resultado Esperado, instruções de envio Teams e bloco colapsável <details markdown="1"><summary>🔑 Gabarito de Código & Solução Comentada</summary> com código funcional e executável.exemplos/{numero}_{slug}_exemplos.md: Códigos funcionais comentados.slides/{numero}_{slug}_slides.md: Slides no layout slide com diagramas Mermaid.quizzes/{numero}_{slug}_quiz.md: 3 questões interativas com opções <button class="quiz-option" data-correct="..." data-feedback="...">.[!CAUTION] Atenção especial ao Svelte e Liquid: O Svelte utiliza interpolações com chaves
{variavel}e diretivas como{#if}. Qualquer código-fonte de exemplo, gabarito ou slide contendo interpolações ou chaves duplas ({{ … }}) deve ser encapsulado estritamente com {% raw %} … {% endraw %}.
python _scripts/gerar_navigation_yml.py para sincronizar os 40 novos capítulos na barra lateral global (_data/navigation.yml).python _scripts/build_indice_geral.py para reconstruir indice_geral.md com os dois novos cursos e seus 40 capítulos.spec_frontend_com_svelte possua exatamente 20 arquivos em cada pasta (total 100).spec_computacao_cientifica_com_matlab possua exatamente 20 arquivos em cada pasta (total 100).python _scripts/validate_liquid.py.python _scripts/test_links.py garantindo que não existam links quebrados na navegação horizontal, vertical ou setorial.git commit e push para a branch main com validação de build no GitHub Actions.| ⬅️ Voltar à Central de Documentação | 🏠 Página Inicial |