FIGS - Faclitador de Integração com o Guia de Serviços

Bem vindo ao FIGS

O FIGS é o Facilitador de Integração com o Guia de Serviços, agora Alagoas Digital, uma solução desenvolvida na Fundação de Amparo à Pesquisa do Estado de Alagoas com o objetivo de, como o próprio nome sugere, facilitar a integração dos portais governamentais com o Portal do Guia de Serviços, através de sua API. (Mais detalhes em http://antigo.alagoasdigital.al.gov.br/api)

Gerando meu HTML

Com o FIGS você poderá gerar e baixar o código HTML necessário para integrar o site da sua instituição com a API do Guia de Serviços de forma rápida e fácil. A proposta é bem simples, basta seguir os seguintes passos:

Selecione sua Instituição
Clique no botão 'Gerar Código'
Selecione a opção 'Sites HTTP' ou 'Sites HTTPS'

Após realizar as etapas acima, basta utilizar uma das três formas de publicação descritas ao lado e a integração com a API do Guia de Serviços já estará funcionando! Você não precisará mais alterar nada no seu site, pois sempre que houver uma mudança em algum serviço da sua instituição, essa mudança será refletida no seu site de forma automática!

Publicando no meu site

Para realizar a publicação da sua página no site de sua instituição existem três formas:

Copiar um dos links gerados e referenciar em um iframe dentro do seu site;
Baixar o arquivo 'serviços.html' e implantar no seu site.
Copiar o código HTML gerado e colar em uma página já existente no seu site.

Para qualquer uma das possibilidades acima será necessária a ajuda de um técnico especializado.

Por padrão, o código gerado utiliza o framework Bootstrap para estilizar o site (https://getbootstrap.com/), mas você poderá customizar todo o estilo do seu site como quiser, inclusive utilizando outros frameworks.

Atenção!!!
É extremamente recomendado que toda a estrutura de componentes html do código gerado seja preservada, pois qualquer alteração pode prejudicar o seu correto funcionamento! Mas se por algum motivo você aletrar o código e seu site parar de funcionar... Não tem problema, você volta aqui e gera outro ;)

carregando órgãos, por favor aguarde...

Deixe o FIGS com a cara do seu site!

Fonte:

Cor da fonte:

Cor do background (body):

Sites HTTP

Você pode copiar um dos links abaixo e referenciar em um iframe dentro do seu site:

Acompanhe os acessos aos seus serviços:

Se preferir poder baixar o arquivo HTML ou copiá-lo.

Baixar arquivo HTML Copiar conteúdo HTML

<!DOCTYPE html>
                                <html>
                                <head>
                                    <meta charset="UTF-8">
                                    <meta name="viewport" content="width=device-width, initial-scale=1">
                                    <title>{orgao_sigla} - FIGS</title>
                                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
                                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
                                    <link rel="stylesheet" href="/static/css/figs/jquery-ui.css">
                                    <link rel="stylesheet" href="https://hml.figs.seplag.al.gov.br/static/css/figs/jquery-ui.css">
                                    <style>
                                        a:hover{
                                            text-decoration: none;
                                        }
                                        #container{
                                            padding: 10px;
                                        }
                                        #cabecalho{
                                            padding: 10px;
                                        }
                                        #tabela-horario-unidade{
                                            width: 30%;
                                        }
                                        #unidade-mapa{
                                            height: 200px;
                                            width: 90%;
                                            margin: auto;
                                        }
                                        #paginacao{
                                            width: 100%;
                                            margin: 30px auto;
                                            text-align: center;
                                        }
                                        #texto-decreto{
                                            padding: 5px;
                                            font-size: 12px;
                                        }
                                        .topico{
                                            border-top: 1px solid #EEEEEE;
                                            border-bottom: 1px solid #EEEEEE;
                                            padding: 5px;
                                        }
                                        .detalhe-texto{
                                            margin-left: 20px;
                                        }
                                        .cabecalho-etapa{
                                            margin-top: 30px;
                                        }
                                    </style>
                                </head>
                                <body onload="iniciar('{orgao_id}')">
                                <div id="container">
                                    <h2 style="text-align: center;">Carta de Serviços<br/><span class="orgao_nome"></span> - <span class="orgao_sigla"></span></h2><br/>
                                    <div style="width: 100%; text-align: right">
                                        <a id="link_baixar_pdf" href="https://hml.figs.seplag.al.gov.br/pdf/{orgao_id}/" onclick="verificar_andamento_pdf();" style="text-decoration: none">
                                            <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Baixar a Carta de Serviços em PDF
                                        </a>    
                                    </div>
                                    <div id="descritivo">
                                        
                                        
                                        
                                        
                                        
                                        
                                    </div>
                                    <br/>
                                    <div id="servicos">
                                        <div class="input-group input-group-lg">
                                            <span class="input-group-addon" id="sizing-addon1">
                                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                            </span>
                                            <input type="text" onkeyup="buscar_servico(this.value);" class="form-control" placeholder="Busque aqui o serviço desejado" aria-describedby="sizing-addon1">
                                        </div>
                                        <br/>
                                        <h1 id="total-servicos"></h1>
                                        <div id="lista-servicos">
                                            <h4>
                                                <img src="/static/img/loading.gif" alt="loading" width="60px"/>
                                                  carregando serviços, por favor aguarde...
                                            </h4>
                                        </div>
                                        <br/><br/>
                                        <input type="hidden" id="total-paginas" value="0" />
                                        <input type="hidden" id="pagina-atual" value="1" />
                                    </div>
                                    <div id="detalhe-servico" style="display: none">
                                        <a href="#!" onclick="ocultar_todos(); exibir('descritivo'); exibir('servicos');">Serviços</a>
                                        <div id="cabecalho">
                                            <h2 id="nome-servico"></h2>
                                            <hr/>
                                            <p id="categoria-servico"></p>
                                            <hr/>
                                            <ul>
                                                <li><a href="#o-que-e">O que é?</a></li>
                                                <li><a href="#quem-pode-realizar">Quem pode realizar?</a></li>
                                                <li><a href="#tempo-estimado-para-realizar">Tempo estimado para realizar este serviço</a></li>
                                                <li><a href="#etapas">Etapas para a realização deste serviço</a></li>
                                                <li><a href="#onde-e-realizado">Onde é realizado o serviço</a></li>
                                                <li><a href="#outras-informacoes">Outras informações</a></li>
                                            </ul>
                                        </div>
                                        <div class="topico" id="o-que-e">
                                            <h3><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> O que é?</h3>
                                            <p class="detalhe-texto" id="descricao-o-que-e"></p>
                                        </div>
                                        <div class="topico" id="quem-pode-realizar">
                                            <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Quem pode realizar?</h3>
                                            <p id="descricao-quem-pode-realizar"></p>
                                        </div>
                                        <div class="topico" id="tempo-estimado-para-realizar">
                                            <h3><span class="glyphicon glyphicon-time" aria-hidden="true"></span> Tempo estimado para realizar esse serviço</h3>
                                            <p class="detalhe-texto" id="descricao-tempo-estimado-para-realizar"></p>
                                        </div>
                                        <div class="topico" id="etapas">
                                            <h3><span class="glyphicon glyphicon-list" aria-hidden="true"></span> Etapas para a realização deste serviço</h3>
                                            <p class="detalhe-texto" id="descricao-etapas"></p>
                                        </div>
                                        <div class="topico" id="onde-e-realizado">
                                            <h3><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Onde é realizado o serviço</h3>
                                            <p id="descricao-onde-e-realizado"></p>
                                        </div>
                                        <div class="topico" id="outras-informacoes">
                                            <h3><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Outras informações</h3>
                                            <p class="detalhe-texto" id="descricao-outras-informacoes"></p>
                                        </div>
                                    </div>
                                    <div id="detalhe-unidade" style="display: none;">
                                        <a href="#!" onclick="ocultar_todos(); exibir('descritivo'); exibir('servicos');">Serviços</a>  /  
                                        <a href="#!" onclick="ocultar_div('detalhe-unidade'); exibir('detalhe-servico');">Voltar</a>
                                        <h2 id="nome-unidade"></h2>
                                        <div class="topico" id="unidade-mapa"></div><br/>
                                        <div class="topico" id="unidade-informacoes">
                                            <h3><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Informações</h3>
                                            <p class="detalhe-texto" id="descricao-unidade-informacoes"></p>
                                        </div>
                                        <div class="topico" id="unidade-horario-funiconamento">
                                            <h3><span class="glyphicon glyphicon-time" aria-hidden="true"></span> Horário de Funcionamento</h3>
                                            <p class="detalhe-texto" id="descricao-unidade-horario-funiconamento"></p>
                                        </div>
                                        <div class="topico" id="unidade-servicos">
                                            <h3><span class="glyphicon glyphicon-list" aria-hidden="true"></span> Serviços</h3>
                                            <p class="detalhe-texto" id="descricao-unidade-servicos"></p>
                                        </div>
                                    </div>
                                    <br/>
                                    <div class="row">
                                        <div class="col-sm-12 col-md-6 col-lg-6 text-center" style="border-right: 2px solid black">
                                            <h3><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Informações</h3><br/>
                                            <p><b>Localização: </b><span class="orgao_endereco"></span></p>
                                            <p><b>Telefones: </b><span class="orgao_telefones"></span></p>
                                            <p><b>Autoridade administrativa: </b><span class="orgao_dirigente"></span></p>
                                            <p><span class="orgao_cargo_dirigente"></span></p>
                                            <p><b>Site oficial do Órgão: </b><span class="orgao_site"></span></p>
                                            <p><b>Setor responsável pelo atendimento ao público: </b><span class="orgao_setor_responsavel"></span></p>
                                        </div>
                                        <div class="col-sm-12 col-md-6 col-lg-6 text-center">
                                            <h3><span class="glyphicon glyphicon-time" aria-hidden="true"></span> Horário de Funcionamento</h3>
                                            <span class="orgao_horario"></span>
                                            <br/><h4><b>Localização: </b><span class="orgao_endereco"></span></h4>
                                        </div>
                                    </div>
                                    <br/>
                                    <div id="texto-decreto" style="display: none; text-align: justify">
                                        Esta é a Carta de Serviços ao Usuário do(a) <span class="orgao_nome"></span> - <span class="orgao_sigla"></span>, gerada automaticamente a partir
                                        dos Dados Abertos do portal Alagoas Digital do Governo de Alagoas (<a href="http://antigo.alagoasdigital.al.gov.br/" target="_blank">http://antigo.alagoasdigital.al.gov.br/</a>),
                                        disponibilizados em cumprimento ao Art. 8°, § 3°, III da <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2011/lei/l12527.htm" target="_blank">Lei Federal 12.527/2011</a>
                                        (Lei de Acesso à Informação) e ao Art. 5° do <a href="http://www.imprensaoficialal.com.br/wp-content/uploads/2018/04/DOELAL-26_04_2018-EXEC.pdf" target="_blank">Decreto Estadual 58.690/2018</a>.
                                        A Carta de Serviços ao Usuário é uma obrigação legal determinada pelo Art. 7° da <a href="http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2017/lei/L13460.htm" target="_blank">Lei Federal 13.460/2017</a>
                                        e pelo Art. 5° do <a href="http://www.imprensaoficialal.com.br/wp-content/uploads/2018/04/DOELAL-26_04_2018-EXEC.pdf" target="_blank">Decreto Estadual 58.690/2018</a>.
                                    </div>
                                    <div id="carta-servicos"></div>
                                    <br/>
                                </div>

Você pode copiar um dos links abaixo e referenciar em um iframe dentro do seu site:

Acompanhe os acessos aos seus serviços:

Veja o diagnóstico de seus serviços e unidades referentes ao IAGS:

Se preferir poder baixar o arquivo HTML ou copiá-lo.

Baixar arquivo HTML Copiar conteúdo HTML

<!DOCTYPE html>
                                <html>
                                <head>
                                    <meta charset="UTF-8">
                                    <meta name="viewport" content="width=device-width, initial-scale=1">
                                    <title>{orgao_sigla_https} - FIGS</title>
                                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
                                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
                                    <link rel="stylesheet" href="/static/css/figs/jquery-ui.css">
                                    <style>
                                        #container{
                                            padding: 10px;
                                        }
                                        #cabecalho{
                                            padding: 10px;
                                        }
                                        #tabela-horario-unidade{
                                            width: 30%;
                                        }
                                        #unidade-mapa{
                                            height: 200px;
                                            width: 90%;
                                            margin: auto;
                                        }
                                        #paginacao{
                                            width: 100%;
                                            margin: 30px auto;
                                            text-align: center;
                                        }
                                        #texto-decreto{
                                            padding: 5px;
                                            font-size: 12px;
                                        }
                                        .topico{
                                            border-top: 1px solid #EEEEEE;
                                            border-bottom: 1px solid #EEEEEE;
                                            padding: 5px;
                                        }
                                        .detalhe-texto{
                                            margin-left: 20px;
                                        }
                                        .cabecalho-etapa{
                                            margin-top: 30px;
                                        }
                                    </style>
                                </head>
                                <body onload="iniciar('{orgao_id_https}')">
                                <div id="container">
                                    <div id="servicos">
                                        <div class="input-group input-group-lg">
                                            <span class="input-group-addon" id="sizing-addon1">
                                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                            </span>
                                            <input type="text" onkeyup="buscar_servico(this.value);" class="form-control" placeholder="Busque aqui o serviço desejado" aria-describedby="sizing-addon1">
                                        </div>
                                        <h1 id="total-servicos"></h1>
                                        <div id="lista-servicos">
                                            <h4>
                                                <img src="/static/img/loading.gif" alt="loading" width="60px"/>
                                                  carregando serviços, por favor aguarde...
                                            </h4>
                                        </div>
                                        <div id="paginacao" class="btn-group" role="group" aria-label="..."></div>
                                        <div id="texto-decreto" style="display: none">
                                            Esta é a Carta de Serviços ao Usuário do(a) {orgao_nome_https} - {orgao_sigla_https}, gerada automaticamente a partir
                                            dos Dados Abertos do Alagoas Digital (<a href="http://antigo.alagoasdigital.al.gov.br/" target="_blank">http://antigo.alagoasdigital.al.gov.br/</a>),
                                            disponibilizados em cumprimento ao Art. 8°, § 3°, III da <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2011/lei/l12527.htm" target="_blank">Lei Federal 12.527/2011</a>
                                            (Lei de Acesso à Informação) e ao Art. 5° do <a href="http://www.imprensaoficialal.com.br/wp-content/uploads/2018/04/DOELAL-26_04_2018-EXEC.pdf" target="_blank">Decreto Estadual 58.690/2018</a>.
                                            A Carta de Serviços ao Usuário é uma obrigação legal determinada pelo Art. 7° da <a href="http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2017/lei/L13460.htm" target="_blank">Lei Federal 13.460/2017</a>
                                            e pelo Art. 5° do <a href="http://www.imprensaoficialal.com.br/wp-content/uploads/2018/04/DOELAL-26_04_2018-EXEC.pdf" target="_blank">Decreto Estadual 58.690/2018</a>.
                                        </div>
                                        <input type="hidden" id="total-paginas" value="0" />
                                        <input type="hidden" id="pagina-atual" value="1" />
                                    </div>
                                    <div id="detalhe-servico" style="display: none">
                                        <a href="#" onclick="ocultar_todos(); exibir('descritivo'); exibir('servicos');">Serviços</a>
                                        <div id="cabecalho">
                                            <h2 id="nome-servico"></h2>
                                            <hr/>
                                            <p id="categoria-servico"></p>
                                            <hr/>
                                            <ul>
                                                <li><a href="#o-que-e">O que é?</a></li>
                                                <li><a href="#quem-pode-realizar">Quem pode realizar?</a></li>
                                                <li><a href="#tempo-estimado-para-realizar">Tempo estimado para realizar este serviço</a></li>
                                                <li><a href="#etapas">Etapas para a realização deste serviço</a></li>
                                                <li><a href="#onde-e-realizado">Onde é realizado o serviço</a></li>
                                                <li><a href="#outras-informacoes">Outras informações</a></li>
                                            </ul>
                                        </div>
                                        <div class="topico" id="o-que-e">
                                            <h3><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> O que é?</h3>
                                            <p class="detalhe-texto" id="descricao-o-que-e"></p>
                                        </div>
                                        <div class="topico" id="quem-pode-realizar">
                                            <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Quem pode realizar?</h3>
                                            <p id="descricao-quem-pode-realizar"></p>
                                        </div>
                                        <div class="topico" id="tempo-estimado-para-realizar">
                                            <h3><span class="glyphicon glyphicon-time" aria-hidden="true"></span> Tempo estimado para realizar esse serviço</h3>
                                            <p class="detalhe-texto" id="descricao-tempo-estimado-para-realizar"></p>
                                        </div>
                                        <div class="topico" id="etapas">
                                            <h3><span class="glyphicon glyphicon-list" aria-hidden="true"></span> Etapas para a realização deste serviço</h3>
                                            <p class="detalhe-texto" id="descricao-etapas"></p>
                                        </div>
                                        <div class="topico" id="onde-e-realizado">
                                            <h3><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Onde é realizado o serviço</h3>
                                            <p id="descricao-onde-e-realizado"></p>
                                        </div>
                                        <div class="topico" id="outras-informacoes">
                                            <h3><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Outras informações</h3>
                                            <p class="detalhe-texto" id="descricao-outras-informacoes"></p>
                                        </div>
                                    </div>
                                    <div id="detalhe-unidade" style="display: none;">
                                        <a href="#" onclick="ocultar_todos(); exibir('descritivo'); exibir('servicos');">Serviços</a>  /  
                                        <a href="#" onclick="ocultar_div('detalhe-unidade'); exibir('detalhe-servico');">Voltar</a>
                                        <h2 id="nome-unidade"></h2>
                                        <div class="topico" id="unidade-mapa"></div><br/>
                                        <div class="topico" id="unidade-informacoes">
                                            <h3><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Informações</h3>
                                            <p class="detalhe-texto" id="descricao-unidade-informacoes"></p>
                                        </div>
                                        <div class="topico" id="unidade-horario-funiconamento">
                                            <h3><span class="glyphicon glyphicon-time" aria-hidden="true"></span> Horário de Funcionamento</h3>
                                            <p class="detalhe-texto" id="descricao-unidade-horario-funiconamento"></p>
                                        </div>
                                        <div class="topico" id="unidade-servicos">
                                            <h3><span class="glyphicon glyphicon-list" aria-hidden="true"></span> Serviços</h3>
                                            <p class="detalhe-texto" id="descricao-unidade-servicos"></p>
                                        </div>
                                    </div>
                                </div>

Gerando meu HTML

Publicando no meu site

Selecione o seu órgão:

Deixe o FIGS com a cara do seu site!