Tutorial

Incorporar o ODSlocal no seu website

Qualquer separador do portal ODSlocal relativa aos indicadores de um Município, ou uma Boa Prática municipal ou um Projeto local pode ser incorporada no seu website. Esta é uma forma simples de integrar e divulgar os seus conteúdos relacionados com os ODS, com diversas vantagens:

Automatização/Sincronização: os conteúdos do ODSlocal relevantes para o seu website ficarão disponíveis de forma automática e imediata; ou seja, sempre que houver uma atualização da informação no ODSlocal, esta ficará imediatamente disponível nas suas páginas;
Eficiência: esta incorporação não deixa o seu website mais lento, por isso é uma forma interessante de trazer bastante informação sobre ODS sem sobrecarregar em demasia o seu website.
Segurança: a técnica de incorporação proposta não permite que haja alterações de informação no seu website, ou seja, é uma abordagem não invasiva e por isso segura;

A integração do ODSlocal é concretizada em termos técnicos pela introdução de um elemento HTML (elemento "iframe") numa qualquer página do seu website. De seguida damos duas opções, acompanhadas de exemplos concretos.

Opção 1: elemento `<iframe>` simples

Esta opção consiste apenas em adicionar um elemento iframe ao website. É necessário indicar explicitamente as opções relativas ao comprimento e altura do iframe, através de propriedades CSS (caso contrário o browser irá usar os valores por omissão, que são desadequados por serem demasiado pequenos):


	<iframe>
		src="https://odslocal.pt/loule?slim=true"
		style="width: 100%; height: 600px; border: solid 1px lightgray;" 
	</iframe>

Pode encontrar uma implementação deste iframe simples nesta página (website num domínio externo ao ODSlocal):

Opção 2: elemento `<iframe>` + ajuste dinâmico da altura

A opção anterior tem a desvantagem de deixar visível uma barra de scroll interna no elemento iframe (além da barra de scroll externa, relativa à página do website). Isto acontece porque a altura do iframe tem um valor fixo.

Neste segundo exemplo mostramos uma técnica para evitar mostrar esse scroll do iframe, simplificando assim o aspecto e a navegação geral. Adicionando um pequeno bloco de javascript é possível redimensionar de modo dinâmico da altura do iframe:


	<iframe>
		id="odslocal"
		src="https://odslocal.pt/loule?slim=true"
		style="width: 100%; border: solid 1px lightgray;" 
	</iframe>	

	<script>

	// odslocal.pt will always send the "message" event when
	// the height changes (due to dynamic content, etc)
	window.addEventListener('message', handlerForPostMessage);

	function handlerForPostMessage (ev) { 

		// make sure this message was sent by odslocal.pt
		if (ev.origin !== 'https://odslocal.pt') {
			return 
		}

		let iframeEl = document.querySelector('iframe#odslocal');

		if (iframeEl != null) {
			iframeEl.style['height'] = ev.data.mainEl.height + 'px';
		}
	}

	</script>

Pode encontrar uma implementação deste iframe com altura dinâmica nesta outra página. Deve-se notar que este bloco de javascript pode ser inserido em qualquer parte da página, pelo que pode ser inserido no html imediatamente a seguir ao iframe.