01.Acordião

O acordião está construído para permitir a disponibilização do conteúdo, colapsado, por grupos dispersos mostrando apenas uma secção de cada vez o que permite poupar espaço vertical ou horizontal e preservar o foco do utilizador por segmentos de informação. O utilizador "clica" no título da secção que pretende visualizar para conseguir ver o conteúdo associado à mesma.

    <!-- A CONSTRUÇÃO DO ACORDIÃO PERSONALIZADO -->             
    <ul class="accordion no-bullet">
      <li class="accordion-item">
        <a class="titulo-acordiao">O que é o Portal de Ciência e Tecnologia (PCT)?
          <i class="icone-harmonio_descer icone-acordiao"></i>
        </a>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Elementum sagittis vitae et leo duis ut. 
          Ut tortor pretium viverra suspendisse potenti.
          </p>
        </div> 
      </li>  
      <li class="accordion-item"> ... </li>
      <li class="accordion-item"> ... </li>         
    </ul>
    

<!-- JS para o acordião -->
    $('div#content .accordion a').closest('li').find('p').slideUp();
    $('div#content .accordion a').click(function(j) {
        var dropDown = $(this).closest('li').find('p');
        $(this).closest('div#content .accordion').find('p').not(dropDown).slideUp();
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        } else {
            $(this).closest('div#content .accordion').find('a.active').removeClass('active');
            $(this).addClass('active');
        }
        dropDown.stop(false, true).slideToggle();
        j.preventDefault();
    });
    

02.Adicionar ficheiro

O adicionar ficheiro ou File upload é um mecanismo que deve ser implementado, sempre que necessitamos de fornecer a um site uma ferramenta para colocar ficheiros por sistema de upload.

    <!-- A CONSTRUÇÃO DA COMPONENTE - ADICIONAR FICHEIROS / FILE UPLOAD -->             
    <div class="wrapper">
        <a href="txtfileupload">
          <i class="icone-adicionar icofileupload"></i>Adicionar ficheiros
        </a>
        <input type="file" class="foo" id="hiddenfile" multiple />
        <div class="hiddentextfile">A totalidade máxima dos ficheiros 
        não pode ultrapassar<span class="filesize"> 5 Mb.</span>   
        </div>     
    </div>
    

<!-- JS para adicionar ficheiros -->
 $("a.txtfileupload").click(function(j) {
        $("#hiddenfile").trigger("click");        
        j.preventDefault();
    });
     
        var lstFiles = "";
        for(var i = 0; i < this.files.length; ++i){
            filesToUpload.push(this.files.item(i));
            lstFiles = lstFiles + "<li><a class=\"removeFile\
            " href=\"#\" data-fileid=\"" + i + "\"><
            i class=\"icone-adicionar\"></i></a>"
             +  this.files.item(i).name  + "</li>";
        }
        lstFiles = "<ul>" + lstFiles + "</ul>";
        $("#listfilename").append(lstFiles);
    
    });
    
    $(document).on("click",".removeFile", function(e){
        e.preventDefault();
        var fileName = $(this).parent().text();
        for(i = 0; i < filesToUpload.length; ++ i){
            if(filesToUpload[i].name === fileName){
                filesToUpload.splice(i, 1);
            }   
        }
        // remove the <li> element of the removed file from the page DOM
        $(this).parent().remove();
    });

03.Alertas

Os 4 tipos de alertas são aviso, sucesso, erro e informação. Os alertas estão tipicamente relacionados com a necessidade de informar o utilizador com o feedback do sistema. A construção desta componente é formada por uma div com a classe box. Para utilizar os alertas basta adicionar à classe box os atributos box-aviso, box-successo, box-erro ou ainda a box-info.

Exemplo 1 para o alerta com progresso

Exemplo 2 para o alerta com progresso

 
    <!-- OS TIPOS DE ALERTAS --> 
    (exemplo para a caixa de alerta de aviso)          
    <div class="box box-aviso"> 
      <button class="btn del_box float-right"></button>
      <i class="icone-aviso size_icobox"</i>
      <h6 class="title-aviso">Aviso</h6>
      <p class="legenda-box">Deixou algum campo com a informação incorreta.</p>
    </div>
    (exemplo para a caixa standard com conteúdo)          
    <div class="box"> 
      <button class="btn btn-clear float-right"></button>
      <h6Título</h6>
      <p class="docs-note">Quadro simples para informações; 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>   
    

 $(".startProgress").click(function(j) {
        
        var myBar = $(this).parent().next(".modal").find(".myProgressBar").first();
        var baseAnchor = "modals";
        var width = 1;
        var id = setInterval(frame, 20);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
                location.hash = baseAnchor;
            } else {
                width++; 
                $(myBar).width (width + '%'); 
            } 
        }
     });

04. Botões

O botão é um elemento importante nas ações de qualquer site ou aplicação. Nos projetos web da FCT temos cinco tipos de botões estilizados e identificados por uma classe btn que também podem estar nos atributos como <a>, <input> ou <button> e assim adquirir, através da CSS, a formatação que foi desenhada.

A tipologia e os estilos

Ao aplicar a classe btn do botão, temos o estilo que vem por defeito. Com a adição de outras classes podemos visualizar os restantes botões, respetivamente, as classes btn-primary, btn-secondary, e btn-link para o botão primário, secundário e link simples do tema original.

Guardar Registar Cancelar Link simples

Para um botão sem qualquer acção (estado desabilitado) aplica-se a classe btn-disabled e temos a função e o estilo pretendido.

<!-- OS TIPOS DE BOTÕES -->
<button class="btn">Guardar</button> (exemplo do botão tipo) 
<button class="btn btn-primary">Registar</button> ( " " botão primário)
<button class="btn btn-alternativo">Cancelar</button> ( " " botão secundário)    
<button class="btn btn-link">link simples</button> ( " " link simples)

<!-- ESTADO DESATIVADO DO BOTÃO -->
<button class="btn-disabled" tabindex="-1">botão desativado</button>

05.Breadcrumbs

Os breadcrumbs cuja tradução literal para português significa "trilho de migalhas", são uma navegação secundária e auxiliar para os utilizadores terem uma localização exata na estrutura do website. Esta componente é utilizada nas aplicações ou sites que têm uma arquitetura da informação com vários níveis de hierarquia. Para esta componente devemos colocar uma div com a identificação do elemento na respetiva class por breadcrumb e breadcrumb-item para os restantes "filhos" deste elemento.

    <!-- A CONSTRUÇÃO DO BREADCRUMB -->             
    <ul class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Avaliação de Unidades</a></li>
        <li class="breadcrumb-item"><a href="#">Avaliação de Unidades de 2013</a></li>  
        <li class="breadcrumb-item"><a href="#">Confirmação na Equipa</a></li>
    </ul>
    

06. Dropdown menu

O dropdown é um mecanismo que pode ser uma solução para menus ou filtros que tenham uma determinada informação.

        <ul class="breadcrumb">
        <li class="breadcrumb-item">
    

07.Formulários

Os tipos de campos existem para serem utililizados nos formulários que compõem as aplicações e as plataformas web da FCT. São componentes comuns nas aberturas de concurso e projetos de investigação, estes elementos têm a finalidade de fornecer os dados e as informações que são submetidas. A classe define o estilo e tipo de input/campo com uma determinada função.

Os tipos e estilos definidos

São vários os tipos de campos utilizados nos formulários; Os estilos são controlados por uma class identificada na CSS e HTML da página web. Dois exemplos bastante comuns de um formulário simples são os campos de input, com e sem "placeholder". Existem mais campos com soluções para: text area, including input, seletores, checkbox, radio, switch, formulários com validação, entre outros.

        <!-- FORMULÁRIOS / CAMPOS COM INPUT  -->
        <div class="form-group">
        <label class="form-label" for="exemplo2 input">With placeholder</label>
        <input class="form-input" type="text" id="exemplo2 input" 
        placeholder="Placeholder">
        </div>
    

Outros exemplos para campos nos formulários.

08.Ícones, a coleção

ÍCONES COM AÇÕES

ALERTAS, PAINEIS E JANELAS MODAIS

OUTRAS UTILIZAÇÕES DOS ÍCONES

ÍCONES, TEMA ORIGINAL

Aplicar a "classe" ao ícone

<i class="icone-adicionar"></i>

Para colocar em prática a terminologia <i> aplica-se a classe com a identificação de cada ícone, tal como foi feito no exemplo acima.

Download do material

O pack personalizado tem inspiração e utilização das coleções gratuitas dos ícones:
a) Alessio Atzeni - Metrize icons.
b) Ionicons-2.0.1.
O material trabalhado de forma independente para qualquer projeto web da FCT, pode ser descarregado nos links abaixo.

• Font icons, pack completo.
• Material SVG, pack completo.

Janelas modais09.

Uma janela modal é uma janela secundária que abre dentro do viewport principal do browser. Normalmente, é necessário que os utilizadores interajam com algum elemento da janela modal para voltar à página principal. Sempre que utilizamos uma janela modal devemos salvaguardar a identificação correta da janela, associando-a ao elemento clicado, e providenciar formas de saída / fecho da janela que sejam perceptíveis ou simples de identificar. As caixas ou janelas modais são, em algumas circunstâncias, úteis não apenas para apresentar alertas ou diálogos mas para a visualização de informação ou realização de determinadas ações sem sair do contexto providenciado pela página de origem.

        <!-- OS TIPOS DE JANELAS MODAIS --> 
        (Janela modal, formato normal)    
        <div class="modal active" id="modal-id">
        <a href="#close" class="modal-overlay" aria-label="Close"></a>
        <div class="modal-container">
        <div class="modal-header">
        <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
        <div class="modal-title h5">Modal title</div>
        </div>
        <div class="modal-body">
        <div class="content">
        <!-- content here -->
        </div>
        </div>
        <div class="modal-footer">
        ...
        </div>
        </div>
        </div>
        (Janela modal, para o formato "full size")   
        <div class="modal modal-lg">
        <a href="#close" class="modal-overlay" aria-label="Close"></a>
        <div class="modal-container">
        <!-- modal structure here -->
        </div>
        </div>
    

10.Labels

As labels são úteis quando queremos chamar a atenção do utilizador para algo relevante que está no texto. O obejetivo desta componente é ser uma "tag" identificadora de uma determinada área que está no conteúdo da página web. o estilo da label está assente nos tons pastel para ser relativamente discreto, mas que desempenha a sua função. A construção da componente envolve as classes label e label-rounded que são mais especificas para os conteúdos a destacar nas tabelas.

    <!-- OS TIPOS DE LABELS --> 
    (Labels para identificação de grupos ou areas dos conteúdos)   
    <span class="label">Gray/default</span>
    <span class="label label-red">Red - the best</span>
    <span class="label label-green">Green</span>
    <span class="label label-blue">Blue</span>
    <span class="label label-yellow">Yellow</span>
    <span class="label label-purple">New/Novo</span>

    (Labels para utilizar nos conteúdos para as tabelas)  
    <span class="label label-rounded label"></span><span class="labeltxt">Disabled</span>
    <span class="label label-rounded label-blue"></span><span class="labeltxt">For Evaluation</span>
    <span class="label label-rounded label-yellow"></span><span class="labeltxt">Evaluated</span>
    <span class="label label-rounded label-re"></span><span class="labeltxt">Conflict</span>
    

11.Paineis

As três soluções "tipo" para a utilização dos paineis com os conteúdos de informação ou resumo de formulário, página ou aplicação. Os tipos de paineis estão desenhados e exemplicados em html nesta página. Esta componente tem a finalidade de destacar ou resumir, num contentor, o conteúdo das páginas ou aplicações web.

Estilo A

Nas web properties da FCT procuramos utilizar HTML5, CSS3 e outros standards recomendados pelo World Wide Web Consortium (W3C). Estas tecnologias têm como objetivo envolver a comunidade web, desde as companhias que desenvolvem os browsers até aos produtores de conteúdos, na uniformização e definição de um conjunto de padrões comuns para o desenvolvimento de documentos web.

Explorar

Estilo B

Grupo ou área do painel

Os padrões, tal como em engenharia informática, são soluções generalistas e reutilizáveis que podem ser utilizados como princípios gerais para abordar determinado problema. Reunimos um conjunto de links para bibliotecas de padrões de user interface, design de interacção, arquitectura da informação e, inclusivamente, de código frontend e estratégia de conteúdos...

Ver mais

Estilo C (com imagem)

Grupo ou área do painel

Resumo com texto para o painel ou cartão, Empower every person and every organization on the planet, ver mais.

 
        <!-- OS ESTILOS E TIPOS DE PAINEIS --> 
        (exemplo para o alerta de aviso)          
        <div class="box box-warning"> 
        <button class="btn del_box float-right"></button>
        <i class="icone-aviso size_icobox"</i>
        <h6 class="title-aviso">Aviso</h6>
        <p class="legenda-box">Deixou algum campo com a informação incorreta.</p>
        </div>

        (exemplo para a caixa standard com conteúdo)          
        <div class="box"> 
        <button class="btn btn-clear float-right"></button>
        <h6Título</h6>
        <p class="docs-note">Quadro simples para informações; Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    

Paginação12.

A componente da paginação funciona dentro de qualquer "container" ou "div". Basta identificar a classe pagination e logo de seguida os elementos filhos com as classes page-item. A classe page-item active permite focar o elemento paginado e a classe page-item disabled faz com que a primeira fase da paginação esteja desativada.

 
    <!-- PAGINAÇÃO -->       
    <div class="description section-space">       
        <ul class="pagination">
            <li class="page-item disabled"><a href="#pagination" tabindex="-1">Prev</a></li>
            <li class="page-item active"><a href="#pagination">1</a></li>
            <li class="page-item"><a href="#pagination">2</a></li>
            <li class="page-item"><a href="#pagination">3</a></li>
            <li class="page-item"><span>...</span></li>
            <li class="page-item"><a href="#pagination">9</a></li>
            <li class="page-item"><a href="#pagination">Next</a></li>
        </ul>
    </div>  
    

  $('.page-item').click(function(j) {
        $(this).siblings('.page-item').removeClass('active');
        $(this).addClass('active');
     }); 

13.Passos

Os passos são indicadores de progresso para as sequências das etapas com tarefas. Para a componente funcionar basta identificar a classe step e adicionar ao elemento filho a classe step-item. O item do passo em progresso step-item é diferenciado através da classe active, no próprio passo com o estilo visual.

    <!-- PASSOS PARA FORMULÁRIOS - OS MODELOS --> 
    <ul class="step">
        <li class="step-item">
            <a href="#" class="tooltip" data-tooltip="Informação sobre este passo">Passo 1</a>
        </li>
        <li class="step-item">
            <a href="#" class="tooltip" data-tooltip="Informação sobre este passo">Passo 2</a>
        </li>
        <li class="step-item active">
            <a href="#" class="tooltip" data-tooltip="Informação sobre este passo">Passo 3</a>
        </li>
        <li class="step-item">
            <a href="#" class="tooltip" data-tooltip="Informação sobre este passo">Passo 4</a>
        </li>
    </ul>
    

14. Tabelas

O modelo mais básico do elemento table identifica-se por <table>. Adicionar classes ao elemento <table> permite modificar o estilo e os tipos da tabela simples. A classe table-striped permite a visualização em modo "zebra"; Com a classe table-hover realçamos cada linha de informação através do "hover" do rato. A classe que destaca de forma ativa e fixa uma linha específica da tablea é a utilização da classe active dentro da <tr>.

<!-- TABELA - MODELO BÁSICO -->
<table class="table table-hover">
  <thead>
    <tr>
      <th>Coordenador</th>
      <th>Área Científica</th>
      <th>Data do projeto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tatiana Coelho Silva Penedo</td>
      <td>Artes, Design e Humanidades</td>
      <td>14 de Outubro de 1994</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

O modelo básico e o composto

As tabelas têm dois modelos gerais e a escolha dos tipos de tabela dependem dos conteúdos e dos requisitos funcionais. O modelo básico (apresentado no exemplo de cima) pode apresentar conteúdos de ordem alfabética, alfanumérica e contabilistica. Já no modelo composto podemos encontrar funções sobre conteúdos, isto é ações sobre um registo individual, registos múltiplos, informações com os componentes de paginação, sorting, ou outras.

Ação individual no registo

<-- EXEMPLO 1 -- TABELA, MODELO COMPOSTO  -- >
(AÇÃO INDIVIDUAL NO REGISTO)
<table class="table table-hover">
  <thead>
    <tr>
      <th>Principal investigador</th>
      <th>Área Científica</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tatiana Coelho Silva Penedo</td>
      <td>Artes, Design e Humanidades</td>
      <td>
        <a href="#icons-navigation" class="icone_graybot visualizartabelas">
          <i class="icone-visualizar" 
        </a>  
      </td>
    </tr>
    <tr>
        ...    
    </tr>
  </tbody>
</table>

<-- EXEMPLO 2 -- TABELA, MODELO COMPOSTO  -- >
            (DUAS AÇÕES POR REGISTO)
<table class="table table-hover">
  <thead>
    <tr>
      <th>Coordenador</th>
      <th>Área Científica</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tatiana Coelho Silva Penedo</td>
      <td>Artes, Design e Humanidades</td>
      <td>colocar o icone </td>
    </tr>
    <tr>
        ...
    </tr>
  </tbody>
</table>

<-- EXEMPLO 3 -- TABELA, MODELO COMPOSTO  -- >
(DUAS OU MAIS AÇÕES POR REGISTO)
<table class="table table-hover">
  <thead>
    <tr>
      <th>Coordenador</th>
      <th>Área Científica</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tatiana Coelho Silva Penedo</td>
      <td>Artes, Design e Humanidades</td>
      <td>colocar o icone </td>
    </tr>
    <tr>
        ...
    </tr>
  </tbody>
</table>

 
        <!-- TABS -->
        <ul class="tab tab-block">
            <li class="tab-item active"><a href="badge" href="#tabs" data-badge="9">Concursos Internos</a></li>
            <li class="tab-item"><a href="#tabs" data-badge="99">Concursos externos</a></li>
            <li class="tab-item"><a href="#tabs">Outros documentos</a></li>
            <li class="tab-presentation-slider"</li>
        </ul>
    

        $('.tab-item').click(function(j) {
            $(this).siblings('.tab-item').removeClass('active');
            $(this).addClass('active');
        });

    <!-- OS TIPOS DE TOOLTIPS -->
    <a class="tooltip tooltip-top espaco" data-tooltip="Olá! Eu sou uma tooltip, em cima :)">
    em cima</a> (exemplo da tooltip em cima)
    <a class="tooltip tooltip-bottom espaco" data-tooltip="agora estou em baixo...">
    por baixo</a>  ( " " tooltip em baixo) 
    <a class="tooltip tooltip-left espaco" data-tooltip="...e agora do lado esquerdo.">
    lado esquerdo</a> ( " " tooltip no lado esquerdo) 
    <a class="tooltip tooltip-right espaco" data-tooltip="Aqui estou eu do lado direito...">
    lado direito</a>  ( " " tooltip no lado direito)