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

1. 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).
2. 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).
3. 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.