The Ecolabore Engine project

Editando o conteúdo do seu site

Apresentação

Este documento explica como compor o conteúdo das suas páginas.

Ao criar ou editar seções e posts, a caixa de edição do conteúdo permite que apenas textos sem formatação seja inserido. Mas sabemos da necessidade de inserir uma grande quantidade de elementos diferentes, como links, imagens, tabelas, títulos, ou mesmo formatar o texto com diferentes formas de destaque, superescritos, subscritos e tantos outros elementos.

Este é um desafio que está presente em vários sistemas, assim como várias soluções foram criadas para contorná-lo. Wikipédia, GitHub, PanDoc são apenas algumas das ferramentas que implementam maneiras de transformar um texto simples em uma apresentação mais rica.

Quem já está familiarizado com o markDown utilizado no PanDoc ou no GitHub, encontrará aqui muitas funcionalidades equivalentes, e na maioria dos casos nem precisará fazer alterações em seus documentos para publicá-los no Portal Ecolabore. Também usuários da Wikipédia encontrarão aqui algumas das funcionalidades presentes naquela plataforma.

Mas o Portal Ecolabore extende o leque de possibilidades com ferramentas próprias, permitindo que as personalizações que seriam muito difíceis de configurar através de texto possam ser feitas através de uma interface interativa.

Os princípios do MarkDown

O MarkDown utiliza caractéres especiais em meio ao texto para indicar a formatação ou inserir novos elementos.

Isso já era feito nas mensagens de correio eletrônico desde o princípio da Internet, então John Gruber com a ajuda de Aaron Swartz recolheu estes hábitos e definiu, em 2004, alguns padrões úteis.

A proposta do MarkDown é ser simples de utilizar e manter o texto "legível". De fato, quando observamos com atenção um documento criado com MarkDown, é na maioria das vezes bastante intuitivo o que cada marcação representa.

Mas como o público foi criando padrões ligeiramente diferentes, e o próprio MarkDown não define com clareza como algumas situações devem ser resolvidas, também surgiram diferentes formas de implementá-lo.

Tentamos ao máximo manter compatibilidade com o PanDoc e com o GitHub, mas infelizmente não é possível implementar todas as funcionalidades de maneira idêntica. Por isso, mesmo que você já esteja familiarizado com o MarkDown em uma destas plataformas, sugerimos que leia este documento para não ter surpresas.

A característica mais estranha do MarkDown é sua forma de tratar quebras de linhas acidentais. Os sistemas de mensagens mais antigos limitavam as linhas de texto a apenas 76 caracteres. Inacreditavelmente estes protocolos sobreviveram até hoje, de tal forma que mesmo os mensageiros mais modernos ainda irão respeitar esta norma e irão truncar as linhas muito longas em mensagens de texto. Isso transforma as mensagens em uma bagunça total, mas algumas regras simples podem contornar esse problema.

Sobre a marcação Ecolabore

Para que os usuários pudessem ter mais liberdade para compôr seus documentos, inclusive manipulando com segurança o HTML, criamos uma linguagem própria, simples, que é interpretada pelo PHP durante a renderização dos documentos.

Inicialmente o Portal Ecolabore tentará interpretar tudo o que está entre colchetes - "" como sendo instruções dessa linguagem. Por isso, algumas funcionalidades do MarkDown presentes no GitHub ou no PanDoc foram abandonadas em troca de métodos próprios.

Estrutura do documento

Parágrafos

É necessário deixar uma linha em branco separando os parágrafos.

Quebras de linha em meio ao texto serão consideradas quebras de linha acidentais e serão removidas.

O exemplo

Cartão de destaque

Este é um parágrafo
 com uma quebra de linha acidental

Este é outro parágrafo

Produz

Cartão de destaque

Este é um parágrafo com uma quebra de linha acidental

Este é outro parágrafo

Títulos ao estilo Setext

Você pode criar títulos de nível 1 e títulos de nível 2 "sublinhando" os títulos com sinais de igual "=" e hifens "-".

O exemplo

Cartão de destaque

Título de nível 1
=================

Título de nível 2
-----------------

Produz

Cartão de destaque

Título de nível 1

Título de nível 2

Observe que normalmente os documentos já possuem um título de nível 1, portanto não recomendamos que você utilize esta funcionalidade. Ela está presente apenas para compatibilidade com outras ferramentas MarkDown. Dê preferência aos cabeçalhos ao estilo ATX.

Mais detalhes

Para que a Ecolabore Engine reconheça um título ao estilo Setext, são necessários pelo menos 3 caracteres consecutivos do mesmo tipo:

Cartão de destaque

Título de nível 1
==

Cartão de destaque

Título de nível 1 ==

A quantidade de caracteres da segunda linha não precisa coincidir com a quantidade de caracteres da primeira linha

Cartão de destaque

Título de nível 1
====

Título de nível 2
----------------------------

Cartão de destaque

Título de nível 1

Título de nível 2

Até 3 espaços no início de cada linha serão ignorados.

Títulos ao estilo ATX

Para criar títulos e subtítulos você deve iniciar a linha com um ou mais caractéres "#".

A quantidade de caractéres especiais no início da linha irão determinar o nível do tópico.

O exemplo

Cartão de destaque

# Título de nível 1

## Título de nível 2

### Título de nível 3

#### Título de nível 4

##### Título de nível 5

###### Título de nível 6

Produz

Cartão de destaque

Título de nível 1

Título de nível 2

Título de nível 3

Título de nível 4

Título de nível 5
Título de nível 6

Quando você cria um título no documento, ele automaticamente será adicionado ao sumário.

O símbolo de igual "=" pode ser utilizado para o mesmo fim. Porém, títulos criados desta forma não serão adicionados ao sumário. Se você deseja inserir um título a um bloco de conteúdo que estará recolhido, então esta será a escolha correta, pois o navegador não saberá conduzir o usuário corretamente se o link do sumário estiver apontando para um trecho de conteúdo oculto.

Mais detalhes

Após um ou mais caracteres de abertura é necessário pelo menos um espaço em branco.

Cartão de destaque

#hashtag

Cartão de destaque

#hashtag

Caracteres de fechamento em qualquer quantidade serão removidos

Cartão de destaque

## Um título elegante ##

### Outro título elegante #########

Cartão de destaque

Um título elegante

Outro título elegante

Até 3 espaços em branco no início de cada linha serão ignorados.

É permitido formatar o texto dos links.

Blocos de citação

O bloco de citação "empurra" o conteúdo um pouco para a direita e formata o texto de maneira diferente.

Para criar um bloco de citação, inicie cada linha do bloco com um sinal de maior ">".

O exemplo

Cartão de destaque

> Um bloco de citação.

Produz

Cartão de destaque

Um bloco de citação.

Um bloco de citação pode se extender por várias linhas e pode conter outras estruturas de conteúdo, inclusive blocos de citação.

O exemplo

Cartão de destaque

> == Um título ==
>
> Um bloco de citação.
>
> > Outro bloco de citação.

Produz

Cartão de destaque

Um título

Um bloco de citação.

Outro bloco de citação.

Blocos de linha

Se você precisa que as quebras de linha e os espaços iniciais de um texto sejam respeitados, então você pode iniciar cada nova linha com uma barra vertical "|". Isso será útil para citar endereços ou para produzir estrofes de um poema.

O exemplo

Cartão de destaque

| As cores do árco-íris
| São sete eu já contei.
| Embaixo tem um tesouro
| Procuro, mas não achei.


Cartão de destaque

As cores do árco-íris
São sete eu já contei.
    Embaixo tem um tesouro
    Procuro, mas não achei.

Separador temático

Para produzir uma régua de separação, basta inserir em uma linha 3 ou mais caracteres: "-", "_" ou "*". Não é permitido misturá-los!

O exemplo

Cartão de destaque

***
---

___

Produz

Cartão de destaque


Listas

Listas com marcadores

Para produzir uma lista, basta iniciar a linha com um dos caracteres: "*", "-" ou "+".

O exemplo

Cartão de destaque

 * Um item
 * Outro item
 * Mais um item

------

 + Um item
 + Outro item
 + Mais um item

------

 - Um item
 - Outro item
 - Mais um item

Produz

Cartão de destaque
  • Um item

  • Outro item

  • Mais um item


  • Um item

  • Outro item

  • Mais um item


  • Um item

  • Outro item

  • Mais um item

Listas ordenadas

Existem várias formas de criar listas ordenadas:


Cartão de destaque

1. Primeiro item
2. Segundo item
3. Terceiro item

------

a) Ângelo
b) Bruno
c) Carla

------

#. Item numerado
#. Outro item numerado
#. Mais um item numerado

Produz

Cartão de destaque
  1. Primeiro item

  2. Segundo item

  3. Terceiro item


  1. ngelo

  2. Bruno

  3. Carla


  1. Item numerado

  2. Outro item numerado

  3. Mais um item numerado

Sublistas
Mais conteúdos em um item da lista

Exemplos de códigos

Blocos de código indentados

Para inserir um exemplo de código, basta indentar as linhas com 4 espaços ou mais.

O exemplo

Cartão de destaque

    if($a < 3){
        $x = $a / 2;
    }

Produz

Cartão de destaque

if($a < 3){
    $x = $a / 2;
}

Blocos de código cercados

É possível cercar um bloco de código com ~~~ ou ```.

O exemplo

Cartão de destaque

~~~
if($document->access(4)){
    $document->contentEditable = true;
}
~~~

Produz

Cartão de destaque

if($document->access(4)){
    $document->contentEditable = true;
}

Exemplo de código em meio ao texto

Utilize acentos graves "`" para inserir uma declaração literal em meio ao texto.

O exemplo

Cartão de destaque

Em javaScript, utilize o método `preventDefault()` de um evento para impedir que o navegador execute uma ação predefinida.

Produz

Cartão de destaque

Em javaScript, utilize o método preventDefault() de um evento para impedir que o navegador execute uma ação predefinida.

Tabelas

Tabelas de canudinhos

Uma tabela é criada iniciando cada linha com uma barra vertical "|", seguida pelo conteúdo das células separadas por barras verticais "|", e finalizando com uma barra vertical "|".

A primeira linha da tabela representa o cabeçalho enquanto a segunda linha é um separador que possui algumas características especiais. As demais linhas serão inseridas no corpo da tabela.

Aquantidade de caracteres em uma célula não precisa coincidir com a quantidade de caracteres de outras células da mesma coluna. Apenas cuide para que cada linha tenha a mesma quantidade de células para que a tabela seja renderizada corretamente.

O exemplo

Cartão de destaque

| Caractere | Significado |
| --------- | ------------------ |
| + | Adição |
| - | Subtração |
| * | Multiplicação |
| / | Divisão |

Produz

Cartão de destaque
Caractere Significado
+ Adição
- Subtração
* Multiplicação
/ Divisão

A linha especial que separa o cabeçalho do corpo da tabela deve conter hifens no conteúdo de cada célula. A quantidade de hifens representa a largura de cada coluna em relação às suas vizinhas. Observe neste exemplo como a segunda coluna tem o dobro da largura da primeira.

Também é possível indicar o alinhamento do texto dentro das células de cada coluna. Dois pontos ":" à esquerda, à direita ou em ambos os lados indicam o alinhamento à esquerda, à direita ou centralizado respectivamente.

O exemplo

Cartão de destaque

| Código | Descrição | Valor |
| :--: | :---------- | ----: |
| 001 | Caneca branca 300ml | 3,00 |
| 002 | Caneca verde 300ml | 3,20 |
| 003 | Porta-guardanapo | 10,00 |
| - | Guardanapos de papel 20 unidades | 1,00 |

Produz

Cartão de destaque
Código Descrição Valor
001 Caneca branca 300ml 3,00
002 Caneca verde 300ml 3,20
003 Porta-guardanapo 10,00
- Guardanapos de papel 20 unidades 1,00
Formatação avançada para tabelas

As tabelas sempre irão ocupar a largura total disponível, e suas cores dependerão do contexto onde foram inseridas.

Para dimensionar as tabelas com outras medidas, escolher outras cores e até mudar sua disposição na página, coloque-as em cartões personalizados.

O exemplo

Cartão de destaque

[card:tabela_azul]
**Domingo**
| Cidade | Temperatura |
| :---------- | ---: |
| Brasília | 33 |
| Goiânia | 34 |
| Belho Horizonte | 30 |
[/card]

[card:tabela_verde]
**Segunda**
| Cidade | Temperatura |
| :---------- | ---: |
| Brasília | 32 |
| Goiânia | 32 |
| Belho Horizonte | 29 |
[/card]

Produz

Cartão de destaque
Cartão de destaque

Domingo

Cidade Temperatura
Brasília 33
Goiânia 34
Belho Horizonte 30
Cartão de destaque

Segunda

Cidade Temperatura
Brasília 32
Goiânia 32
Belho Horizonte 29

Formatação de texto

Quebra forçada de linha

Uma quebra forçada de linha pode ser produzida terminando a linha com uma barra invertida "\", ou inserindo a sequência "\n" no local onde a quebra é desejada.

O exemplo

Cartão de destaque

Um parágrafo\
com uma quebra de linha

Outro parágrafo\ncom quebra de linha

Produz

Cartão de destaque

Um parágrafo
com uma quebra de linha

Outro parágrafo
ncom quebra de linha

Escape de caracteres especiais

A barra invertida "\" tem o dom de retirar os poderes do próximo caractere quando o próximo caractere for especial. Se o próximo caractere for um caractere comum, a barra invertida apenas irá desaparecer.

Você pode evitar que alguns caracteres especiais sejam utilizados para formatar seu texto

O exemplo

Cartão de destaque

\# \= \^ \~ \* \[ \`

Produz

Cartão de destaque

# = ^ ~ * [ `

Outras sequências também são reconhecidas:

Cartão de destaque
Sequência Resultado Comentário
\\ \ Produz uma \ literal
\n <br> Produz uma quebra de linha forçada
\& &amp; Produz um & literal
\ &nbsp; Barra invertida seguida de um espaço produz um espaço "inquebrável"
\< &lt; Produz um < literal
\" &quot; Produz uma " literal
Ênfase

Envolva um trecho com 1, 2 ou 3 asteríscos "*" para produzir menor ou maior ênfase.

O exemplo

Cartão de destaque

Um texto com *destaque*, outra palavra com **mais destaque** e outra com ***ainda mais destaque***.

Produz

Cartão de destaque

Um texto com destaque, outra palavra com mais destaque e outra com ainda mais destaque.

2 ou 3 caracteres sublinhados "_" também podem ser utilizados para o mesmo fim. Porém, como o caractere sublinhado também é utilizado frequentemente em programação para compor nomes de variáveis e funções, um único sublinhado "_" não produz efeito.

Utilize barra invertida "\" antes de asteríscos e sublinhados quando você deseja que percam seus poderes especiais.

Texto riscado (strikeout)

Envolvendo um trecho com dois tils "~~", o texto ficará riscado.

O exemplo

Cartão de destaque

~~Um texto riscado~~

Produz

Cartão de destaque

Um texto riscado

Utilize barra invertida "\" antes de cada til quando desejar que percam seus poderes especiais.

Superescrito

O circunflexo "^" tem o poder de elevar o texto.

O exemplo

Cartão de destaque

O apartamento possui 83m^2^.

Produz

Cartão de destaque

O apartamento possui 83m2.

Utilize barra invertida "\" antes de cada circunflexo quando desejar que percam seus poderes especiais.

Subscrito

O til "~" tem o poder de rebaixar o texto.

O exemplo

Cartão de destaque

A molécula da água é expressa por H~2~O, onde H~2~ representa dois átomos de hidrogênio e O representa um átomo de oxigênio.

Produz

Cartão de destaque

A molécula da água é expressa por H2O, onde H2 representa dois átomos de hidrogênio e O representa um átomo de oxigênio.

Utilize barra invertida "\" antes de cada til quando desejar que percam seus poderes especiais.

Links

Links automáticos

Quando desejar que um endereço (URL) seja convertido diretamente em um link, basta envolvê-lo com < e >.

Também funciona com endereços de e-mail.

O exemplo

Cartão de destaque

Visite <https://ecolabore.net>

Não envie emails para <iamspam@ecolabore.net>

Produz

Cartão de destaque

Visite ecolabore.net

Não envie emails para

O Portal Ecolabore irá proteger os endereços de e-mail para que não sejam capturados por crawlers de SPAMS.

Links estilo markDown

Quando você deseja transformar um texto em um link, coloque o texto a ser acionado entre colchetes "[" e "]", e logo em seguida o endereço entre parênteses "(" e ")".

Atenção: Não utilize esta técnica para produzir links para endereços de e-mails. O Portal Ecolabore não é capaz de proteger links criados desta maneira, de tal forma que eles ficarão expostos aos crawlers de SPAM. Consulte neste manual outras formas seguras de criar links para e-mails.

O exemplo

Cartão de destaque

Consulte mais informações na [Wikipédia](http://pt.wikipedia.org).

[Voltar ao topo](#top)

Produz

Cartão de destaque

Consulte mais informações na Wikipédia.

Voltar ao topo

Notas de rodapé inline

Para criar uma nota de rodapé, coloque um circunflexo "^" seguido do trecho a ser transferido envolvido por colchetes "[" e "]".

O exemplo

Cartão de destaque

O Portal Ecolabore possui técnicas para evitar que endereços de e-mails em suas páginas sejam capturados por crawlers de SPAMS^[Crawlers são programas que vasculham a Internet em busca de alguma informação. Neste caso, capturam endereços de e-mails para o envio de mensagens indesejadas.].

Produz

Cartão de destaque

O Portal Ecolabore possui técnicas para evitar que endereços de e-mails em suas páginas sejam capturados por crawlers de SPAMS1.

Notas de rodapé

1Crawlers são programas que vasculham a Internet em busca de alguma informação. Neste caso, capturam endereços de e-mails para o envio de mensagens indesejadas.

Links para verbetes do glossário

Ao bom estilo Wikipédia, quando você envolve um termo com colchetes duplos - [[DNS]] - ele se tornará um link para um verbete. Após salvar o documento, apenas acione o link para editar a página do verbete.

Se você deseja que os usuários tenham acesso a um glossário com todos os verbetes que você criou, crie uma nova seção do tipo "Glossário".

O exemplo

Cartão de destaque

Para criar um site na Internet, você precisa registrar um [[domínio]] em um serviço de registro de nomes de domínio.

Utilizando o Portal Ecolabore, você pode compartilhar o domínio ecolabore.net gratuitamente.

Produz

Cartão de destaque

Para criar um site na Internet, você precisa registrar um domínio em um serviço de registro de nomes de domínio.

Utilizando o Portal Ecolabore, você pode compartilhar o domínio ecolabore.net gratuitamente.

Links estilo Wikipédia

Você pode criar links para outras páginas, links para e-mails e links para números de telefone apenas envolvendo-os entre colchetes "[" e "]". Apenas tome cuidado de não esquecer o "protocolo" (http:, https: ou ftp:). No caso de links para e-mails e para telefones utilize como protocolo "mailto:" e "tel:".

O exemplo

Cartão de destaque

* Site: [https://ecolabore.net]
* E-mail: [mailto:iamspam@ecolabore.net]
* Telefone: [tel:+55-61-981086070]

Produz

Cartão de destaque

Endereços de e-mail criados desta maneira serão protegidos pelo Portal Ecolabore para evitar que sejam capturados por crawlers de SPAM.

Se você deseja que os links tenham um texto diferente do seu endereço, apenas acrescente o texto após o endereço, deixando um espaço em branco entre eles.

O exemplo

Cartão de destaque

* [https://ecolabore.net Visite nosso site]
* [mailto:iamspam@ecolabore.net Não envie um email para este endereço]
* [tel:+55-61-981086070 Me liga quando quiser]

Produz

Adicionar mídia

Adicionar mídia

Antes de começar, você deve ter em mmente que você vai lidar com duas coisas independentes: uma delas é o envio ou remoção dos arquivos de mídia, outra coisa é o ponto no documento onde estes arquivos devem ser inseridos.

Desta forma, uma mesma imagem pode ser inserida várias vezes em um documento, quem sabe em um documento traduzido para vários idiomas.

Se você escrever uma marca indicando a inserção de um arquivo que ainda não foi submetido, então ao salvar o documento você encontrará um link para enviá-lo.

Por outro lado, se você remover a marca onde um arquivo deva ser inserido, isso não irá remover o arquivo.

Quando você envia figuras, vídeos ou arquivos para download, eles ficarão listados em um menu chamado "objetos inseridos", no menu do sistema. Você pode acessar as janelas de configuração destes objetos para alterar a disposição, tamanho, aparência ou mesmo para removê-los.

Utilize as marcas [audio], [img] e [file] para submeter arquivos de áudio que poderão ser reproduzidos no documento, arquivos de imagem a serem encaixados no documento e arquivos de qualquer tipo para serem baixados no documento.

Para inserir mais de um arquivo de áudio, mais de uma figura ou mais de um arquivo para download, então basta inserir um número após dois pontos ":", como em [audio:1], [audio:2], [audio:3]... [img:1], [img:2], [img:3]... ou [file:1], [file:2], [file:3]...

Existe também uma galeria de mídia onde você pode submeter mídias que você pretende inserir em vários documentos. Neste caso, você deve apontar a mídia através de seu nome, como em [img:logo], [audio:tutorial] ou [file:contrato].

Enquanto você estiver conectado com direitos administrativos, serão apresentados pequenos botões no canto superior direito de cada objeto, que você poderá acionar para abrir suas configurações.

Lembre-se de que as configurações aplicam-se ao objeto, e serão utilizadas todas as vezes que o mesmo objeto for inserido, mesmo em outros documentos.

Dica: para ter um controle melhor sobre como cada mídia deve ser apresentada, insira a marcação solitária em uma linha.

Cartão de destaque

Um parágrafo.
[img:1]
Outro parágrafo.

Se você deseja inserir uma figura dentro de uma linha de texto, como em:

Cartão de destaque

Um parágrafo com [img:2] uma figura.

então você deve escolher, na caixa de configurações da figura, a disposição "Na linha do texto". Caso contrário, o parágrafo será truncado.

Diagramação do conteúdo

Conceitos básicos

Para delimitar uma seção do documento que deva ser apresentada em colunas, delimitar uma seção em que você deseja uma formatação diferente para fonte e parágrafos, ou para delimitar um trecho do documento que deva ser apresentado como uma caixa de destaque, então você deverá inserir duas marcas: uma indicando onde a seção inicia, outra para indicar onde a seção termina.

Estas marcas precisam estar sozinhas em uma linha:

Cartão de destaque

[columns]
Aqui um texto que deverá ser apresentado em colunas.
[/columns]
[format]
Aqui um texto com fonte e parágrafo personalizado.
[/format]
[card]
Aqui um texto apresentado como cartão de destaque.
[/card]

Após salvar o documento, enquanto você estiver conectado com direitos administrativos, haverá, no canto superior direito de cada uma destas seções, um botão para abrir sua janela de configurações.

Estas configurações serão salvas junto com o modelo de aparência do seu site, e serão aplicadas em todas as páginas do seu site onde estas seções forem inseridas.

Para inserir diferentes configurações de colunas, diferentes formatos de textos e parágrafos, ou cartões de destaque com estilos diferentes, dê diferentes nomes a cada estilo:

Cartão de destaque

[columns:jornal]
Aqui um texto que se pretende dividir em colunas pequenas ao estilo jornal.
[/columns]
[columns:split]
Aqui um texto que se pretende dividir em duas colunas.
[/columns]
[format:centralizado]
Aqui um texto que se pretende centralizar.
[/format]
[format:destaque]
Aqui um texto que se pretende destacar com cor diferente e letras grandes.
[/format]
[card:azul]
Aqui um cartão que se pretende colorir de azul.
[/card]
[card:amarelo]
Aqui um cartão que se pretende colorir de amarelo.
[/card]

Ao salvar as configurações para cada um destes estilos, elas permanecerão salvas em seu modelo de aparência, então você poderá reutilizá-las onde quiser em seu site.

Cartão de destaque

[card:azul]
Aqui um cartão azul.
[/card]
[card:azul]
Aqui outro cartão azul.
[/card]

Você pode inserir qualquer tipo de conteúdo em uma seção, inclusive aninhar subseções, para refinar ainda mais a apresentação do seu documento.

Cartão de destaque

[card:azul]
--------
[format:center]
**Atenção**
[/format]
--------
[format:texto_especial]
[columns:jornal]
Aqui um texto que se pretende apresentar em colunas, dentro de um cartão azul e com uma configuração especial de fonte e parágrafos.
[/columns]
[/format]
[img:3]
[/card]

Formatação de colunas

É possível configurar as colunas para que sejam responsivas, isto é: escolher uma configuração diferente para cada tamanho de tela.

Você pode desejar que, em um celular, o texto seja apresentado em apenas uma coluna; em um tablet em duas colunas; em um computador em 3 e em uma TV em 4... ou de qualquer outra forma que lhe pareça agradável.

Recomendamos que teste em diferentes dispositivos, se possível alternando a posição retrato e paisagem.

Delimitar cartão de destaque

Você pode configurar os cartões de destaque para que sejam responsivos, ou seja: para que assumam diferentes larguras para diferentes tamanhos de tela.

Recomendamos que teste em diferentes dispositivos, se possível alternando a posição retrato e paisagem.

Organizar cartões em uma grade

É possível configurar os cartões para que "flutuem" para a direita ou para a esquerda, de tal forma que você possa enfileirá-los em uma linha. O problema é que a altura de cada cartão depende do seu conteúdo, Portanto, dificilmente os cartões terão a mesma altura.

Se você deseja dispor os cartões em uma grade, coloque todos dentro das marcas [grid] e [/grid]

Cartão de destaque

[grid:minha_grade_de_exemplo]
[card:azul]
As configurações de cartão continuam valendo aqui.
[/card]
[card:amarelo]
Apenas note que, dentro da grade, o tamanho e a disposição do cartão serão definidos pela grade.
[/card]
[card:azul]
Reaproveitar as configurações de pode ser uma estratégia bastante prática.
[/card]
[card:amarelo]
E as mesmas regras valem para as configurações da grade.
[/card]
[/grid]

Recolher blocos de conteúdo

Agora que você está familiarizado com a metodologia para delimitar seções, que tal criar uma seção onde o conteúdo permaneça recolhido e possa ser expandido pelo usuário como uma "sanfona"?

O exemplo

Cartão de destaque

[collapse:Qual a primeira coisa que o Rei faz ao sair ao sol pela manhã?]
Sombra.
[/collapse]

Produz

Cartão de destaque
Qual a primeira coisa que o Rei faz ao sair ao sol pela manhã?

Sombra.

Você pode aninhar seções recolhidas, apenas tome cuidado para que se torne prático para o usuário.

O exemplo

Cartão de destaque

[collapse:Criação de sites]
No Portal Ecolabore você pode criar sites.
[collapse:Estrutura de seções]
O Portal Ecolabore possui uma porção de ferramentas, como blogs, formulários, gerenciamento de pedidos... e você pode inserir estas ferramentas em seu site da maneira que quiser.
[/collapse]
[collapse:Edição do conteúdo]
Utilize MarkDown para editar o conteúdo no Portal Ecolabore, além de extensões próprias que lhe permitirão definir textos em colunas, cartões de destaque e muito mais.
[/collapse]
[/collapse]
[collapse:Ferramentas do usuário]
Cada usuário cadastrado no Portal Ecolabore possui uma área própria.
[collapse:Perfil do usuário]
O usuário pode editar seus dados pessoais e alterar sua senha.
[/collapse]
[collapse:Correio eletrônico]
O usuário pode habilitar o correio eletrônico para receber e enviar correspondências a partir de um ambiente prático e acessível.
[/collapse]
[collapse:Arquivos em núvem]
O usuário pode habilitar um gerenciador de arquivos para organizar seus arquivos em núvem.
[/collapse]
[/collapse]

Produz

Cartão de destaque
Criação de sites

No Portal Ecolabore você pode criar sites.

Estrutura de seções

O Portal Ecolabore possui uma porção de ferramentas, como blogs, formulários, gerenciamento de pedidos... e você pode inserir estas ferramentas em seu site da maneira que quiser.

Edição do conteúdo

Utilize MarkDown para editar o conteúdo no Portal Ecolabore, além de extensões próprias que lhe permitirão definir textos em colunas, cartões de destaque e muito mais.

Ferramentas do usuário

Cada usuário cadastrado no Portal Ecolabore possui uma área própria.

Perfil do usuário

O usuário pode editar seus dados pessoais e alterar sua senha.

Correio eletrônico

O usuário pode habilitar o correio eletrônico para receber e enviar correspondências a partir de um ambiente prático e acessível.

Arquivos em núvem

O usuário pode habilitar um gerenciador de arquivos para organizar seus arquivos em núvem.

Edição avançada

Painéis de conteúdo dinâmico

Para tornar seu site mais atraente, é possível inserir painéis com conteúdos que se atualizam dinamicamente.

O conteúdo destes painéis são retirados de blogs ou categorias, então é possível listar publicações recentes, próximos eventos, produtos em destaque, um post aleatório, figuras que serão trocadas a cada dia e várias outras possibilidades.

Inserir módulos
Recortar e colar
Notas de rodapé

1Crawlers são programas que vasculham a Internet em busca de alguma informação. Neste caso, capturam endereços de e-mails para o envio de mensagens indesejadas.

308 Visualizações