Saúde em Família · Dra. Maria Cortês Ferreira
Coleção de pequenas ferramentas para médicos e pacientes, publicada com GitHub Pages.
Site 100 % estático (HTML + CSS + JavaScript), sem passo de build.
Páginas
/ — página inicial: apresentação e um cartão por secção, com uma entrada animada/doencas/ — doenças explicadas para cinco grupos etários/ferramentas/ — as calculadoras e questionários clínicos/apps/ — as aplicações da Dra. Maria: Tempus Remedium (gestor de medicação para Android), com os vídeos de apresentação em português e inglês (incorporados do YouTube, em modo sem cookies), os ecrãs e a ligação à Google Play/sns/ — contactos úteis do SNS (112, SNS 24 e outras linhas de ajuda)/sobre/ — percurso da Dra. Maria e artigos no Ponto SJ/usf/ — USF Nova Saúde (São Martinho do Campo): contactos, mapa, missão e valores, serviços, coordenação e a Dra. Maria, história, notícias e como marcar consulta
Idioma (PT/EN)
Um botão «EN»/«PT» junto ao botão do tema, em todas as páginas, troca o site entre português e inglês (a escolha fica em
localStorage, chave mcf-lang). assets/js/i18n.js substitui os textos, atributos acessíveis e meta tags a partir do
dicionário assets/js/i18n-en.js (chave = texto em português, valor = inglês) e traduz também o que o JavaScript acrescenta
depois. O que não está no dicionário fica em português; para traduzir mais, basta acrescentar entradas.
Página inicial
index.html apresenta o site e tem um cartão por secção (Doenças, Ferramentas, USF, SNS, Apps e Sobre).
A entrada animada (marca, traçado de ECG e um «furo» que revela a página) vive em CSS, na secção
«Página inicial» de styles.css; assets/js/inicio.js trata dos números que contam, dos cartões que surgem
ao chegar ao ecrã e da inclinação 3D. A entrada só aparece na primeira visita de cada sessão, salta-se com um
clique ou uma tecla e desaparece com «reduzir movimento». As ligações antigas para as doenças na raiz
(/?d=…, /?q=…, /?cat=…) seguem para /doencas/. Os números do herói são gerados a partir de DOENCAS
e das pastas calculadora-*; o teste tests/site.test.mjs avisa quando ficam desatualizados.
Doenças
A página de doenças mostra um cartão animado por doença (45, das mais frequentes em Portugal), com pesquisa e
filtro por área (/doencas/?q=colesterol, /doencas/?cat=Oncologia). Cada doença tem a sua página
(/doencas/diabetes/), com a explicação em separadores por idade (Crianças 3–5, Crianças 5–12, Adolescentes 13–17,
Adultos 18–65, Séniores 65+) e os botões «Enviar por email» e «Imprimir folheto». A idade fica no URL
(/doencas/diabetes/?idade=65%2B), por isso cada separador pode ser partilhado; as ligações antigas
(/doencas/?d=diabetes&idade=65+) seguem para lá. A impressão sai em A4, com as cores do tema claro e, no fim, um
código QR que leva de volta à explicação. Sem JavaScript, a página mostra os cinco grupos seguidos.
assets/js/doencas-dados.js — o conteúdo (sem DOM, testado em tests/doencas.test.mjs).
Os 3–5 anos só têm imagens com legendas curtas; os mais velhos juntam texto, mitos e quando procurar ajuda.
resumoDoenca() prepara o texto do email de cada separador.assets/js/doencas-ilustracoes.js — ilustrações SVG animadas só com CSS (classes an-* em styles.css)
e as miniaturas animadas dos cartões (classes deco-*).assets/js/doencas-vista.js — o HTML dos cartões e da página de cada doença (sem DOM).assets/js/doencas.js — a grelha, a pesquisa e o filtro por área.assets/js/doenca.js — os separadores por idade, o email e a impressão na página de cada doença.scripts/gerar.mjs — escreve as páginas doencas/<id>/index.html (com o código QR do folheto), o índice da
pesquisa global e o sitemap.xml. Depois de mudar os dados, correr npm run gerar; o teste
tests/gerado.test.mjs falha se os ficheiros gerados estiverem desatualizados.assets/js/icones.js — os ícones SVG de linha dos cartões de doenças e de ferramentas (e das etiquetas
das idades). A página de ferramentas tem os mesmos SVG escritos no HTML, com data-icone; o teste
tests/icones.test.mjs confirma que coincidem com a biblioteca.
No estilo, o que se carrega (filtros, botões) é uma pílula com contorno; o que só informa (etiquetas,
factos, tipo de contacto) é texto pequeno em maiúsculas, sem contorno.
Para acrescentar uma doença, basta um novo objeto em DOENCAS com os cinco grupos, uma área de CATEGORIAS
e uma miniatura; os testes verificam que as ilustrações referidas existem, que cada grupo tem o tipo de
conteúdo esperado e que o email de cada separador cabe num link mailto:. Depois, npm run gerar cria a página da
doença e acrescenta-a ao sitemap e à pesquisa (e o teste do service worker pede-a na lista PRECACHE).
Pesquisa, favoritos e páginas de apoio
- Pesquisa global (
assets/js/pesquisa.js): botão de lupa no cabeçalho de todas as páginas, ou Ctrl/⌘+K e «/».
Procura em ferramentas (incluindo os nomes dos separadores, como CURB-65), doenças e secções, a partir de
assets/js/pesquisa-indice.js (gerado; só é carregado quando a caixa abre).
- Favoritos e recentes (
assets/js/favoritos.js): cada calculadora tem «Guardar nos favoritos»; a página de
ferramentas mostra as favoritas e as usadas recentemente. Fica só no browser (localStorage).
- SEO:
<link rel="canonical"> e og:url em todas as páginas, sitemap.xml (com lastmod das calculadoras,
a partir da data de revisão das «Fontes»), robots.txt e uma página 404.html com pesquisa. Dados estruturados
(JSON-LD): o início, Sobre, USF e Apps têm o seu bloco escrito à mão; npm run gerar acrescenta às restantes páginas um
bloco data-gerado com as migalhas (BreadcrumbList), a calculadora (MedicalWebPage + WebApplication, com a data de
revisão) e a lista de itens das páginas de ferramentas e de doenças, tudo tirado do título, da descrição e das
«Fontes» da própria página. Depois de mudar o título ou a descrição de uma página, correr npm run gerar.
O teste tests/site.test.mjs exige títulos únicos, descrições com pelo menos 70 caracteres e JSON-LD válido.
- Fontes clínicas: cada calculadora termina com a secção «Fontes» e a data da última revisão; o teste
tests/site.test.mjs exige ambas.
Apps
apps/index.html apresenta as aplicações. Os ecrãs do Tempus Remedium estão em assets/img/apps/ (WebP a 540 px,
reduzidos das capturas de androidApp/src/test/screenshots/ do repositório da app); ao trocá-los, atualizar também a
lista PRECACHE de sw.js.
Ferramentas
Cada calculadora vive em calculadora-*/index.html, com a lógica de cálculo em
assets/js/<nome>-core.js (sem DOM, testada em tests/) e a interface em assets/js/<nome>.js.
Os separadores de cada página podem ser abertos diretamente com ?calc=<id>.
| Ferramenta | Caminho | Inclui |
|---|
| Calculadora de doses | /calculadora-doses/ | Paracetamol, ibuprofeno, amoxicilina e amoxicilina + ácido clavulânico (4:1, 7:1, 14:1) em xarope, por peso |
| Crescimento infantil (OMS) | /calculadora-crescimento/ | Peso, comprimento, PC e peso-comprimento (0–24 m); IMC e altura (2–19 anos); idade corrigida; altura-alvo |
| Fluidos, desidratação e M-CHAT-R/F | /calculadora-pediatria/ | Holliday-Segar, Clinical Dehydration Scale, interpretação do M-CHAT-R/F |
| Calendário de vacinas (PNV) | /calculadora-vacinas/ | Esquema recomendado do PNV a partir da data de nascimento |
| Bishop, Apgar e Glasgow pediátrico | /calculadora-parto-neonatal/ | |
| Data provável de parto | /calculadora-dpp/ | DUM ou ecografia, com calendário da vigilância da gravidez |
| Contraceção: critérios da OMS | /calculadora-contracecao/ | Categorias de elegibilidade (MEC, 6.ª edição, 2025) de seis métodos por idade, pós-parto e condições |
| Terapêutica hormonal da menopausa | /calculadora-ths/ | Contraindicações (SPG 2021), regime sequencial, contínuo ou vaginal, e doses equivalentes de estrogénios |
| Aumento de peso na gravidez | /calculadora-gravidez-peso/ | Recomendações IOM 2009 por IMC pré-gravidez |
| SCORE2 e SCORE2-Diabetes | /calculadora-risco-cardiovascular/ | |
| CHA₂DS₂-VASc e HAS-BLED | /calculadora-anticoagulacao/ | |
| ITB e peso ideal/ajustado | /calculadora-vascular/ | |
| IMC e ASC | /calculadora-imc-asc/ | IMC, ASC (Mosteller, Du Bois) e perímetro abdominal |
| FINDRISC, MUST e risco de fratura | /calculadora-rastreio/ | |
| CKD-EPI, Cockcroft-Gault e KDIGO | /calculadora-funcao-renal/ | eTFG, CrCl, estadiamento G/A e ajuste de dose de 10 fármacos |
| IPSS | /calculadora-urologia/ |
Os dados de crescimento dos 2 aos 19 anos (assets/js/crescimento-dados-2-19.js) são as tabelas
LMS oficiais da OMS (padrões 2006 até aos 60 meses, referência 2007 dos 61 aos 228 meses).
Novas calculadoras: como acrescentar
- Criar
calculadora-<nome>/index.html, assets/js/<nome>-core.js e assets/js/<nome>.js
(as páginas novas usam assets/js/calc-ui.js para separadores, botões +/−, resultado e email/impressão).
- Acrescentar os testes em
tests/<nome>.test.mjs.
Para o resultado ganhar vida, basta HTML — assets/js/fx.js (carregado por site.js) trata do resto:
- números do
.dose-big e das .stat contam até ao valor; pontuações «x / N» ganham um anel;
- questionários com perguntas
.qitem ganham progresso, marcação das respondidas e gráfico por pergunta
(data-fx-opcional exclui perguntas; data-fx-grafico-titulo muda o título do gráfico);
<div class="fx-escala" data-src="#id-do-numero" data-min data-max data-faixas="0~7:baixo:Normal|8~9:moderado:…">
desenha uma escala por faixas (data-continuo para valores contínuos; data-valor em vez de data-src
quando o valor vem do código);- também há
.fx-pessoas (100 pessoas, risco em %), .fx-icones (um ícone por unidade), .fx-gauss
(curva normal para Z-scores), .fx-degraus (níveis em escada) e .fx-acronimo (letras que acendem
com os campos data-campo).
- Acrescentar o cartão em
ferramentas/index.html, a secção «Fontes» na página e os ficheiros novos à lista
PRECACHE de sw.js — o teste tests/site.test.mjs falha se faltar algum. Correr npm run gerar para a
ferramenta entrar no índice da pesquisa e no sitemap.
Funcionamento sem rede
O site é instalável (manifest.webmanifest) e funciona sem ligação graças ao service worker
sw.js («rede primeiro»: com ligação serve sempre a versão mais recente e atualiza a cache). Os tipos de letra
(Fraunces e Plus Jakarta Sans, licença SIL OFL) estão em assets/fonts/, sem pedidos ao Google Fonts.
Cores e paletas
As paletas seguem as combinações recomendadas para sites de saúde: tons suaves de azul e verde sobre neutros, que
transmitem confiança, calma e higiene.
| Paleta | Combinação | Pensada para |
|---|
Azul sereno (azul, predefinida) | azul com branco e cinza claro | clínica geral |
Verde natural (verde) | verde com bege e off-white | medicina geral e familiar, bem-estar |
Azul-petróleo (petroleo) | petróleo com verde-água e fundo neutro | análises, aplicações de saúde |
Pastel (pastel) | rosa suave e amarelo claro com branco | pediatria, saúde da mulher |
As cores vivem em tokens CSS no início de assets/css/styles.css: a predefinida em :root e nos blocos escuros, as
outras em :root[data-palette=…], escolhidas nos círculos do rodapé (assets/js/site.js); o <script> no <head> de
cada página aplica a paleta guardada antes de a página aparecer. Os gradientes são misturados em OKLCH, com uma linha
antes para os navegadores que ainda não o suportam. Os cartões em destaque usam os tokens --cartao-*: pastel com texto
escuro no tema claro, tons fundos com texto a branco no escuro. O texto cumpre WCAG AA (≥ 4,5:1) em todas as paletas,
nos dois temas; as cores dos níveis de risco (--sun, --coral, --danger) são as mesmas em todas.
Desenvolvimento
npm ci # dependências de desenvolvimento (QR code, Playwright, axe-core)
python3 -m http.server 8000 # abrir http://localhost:8000
npm test # testes da lógica e da integridade do site (Node 18+)
npm run gerar # páginas das doenças, índice da pesquisa e sitemap
npm run test:a11y # acessibilidade (axe, WCAG 2.1 AA) de todas as páginas, nos dois temas
O teste de acessibilidade precisa do Chromium do Playwright (npx playwright install chromium).
Publicação (GitHub Pages)
O site é publicado pelo workflow .github/workflows/pages.yml a cada push para main
(também pode ser corrido à mão em Actions → Deploy GitHub Pages → Run workflow).
O workflow corre os testes e publica todo o repositório (página inicial, apps/, sns/, sobre/, usf/, todas as pastas
calculadora-*/, doencas/ e assets/), exceto tests/, scripts/, .github/, package.json e este README.
Nos pull requests corre só os testes e a preparação do site, sem publicar.
Configuração única: em Settings → Pages → Build and deployment, escolher Source: GitHub Actions.
Aviso
Informação de apoio. Não substitui a avaliação de um profissional de saúde.
