Apresentação do Octopress

Transcrição

1 26 de fevereiro de 2013

2 Sumário 1 Introdução 2 2 Instalação 2 3 Publicando uma postagem 3 4 Criando uma nova página 4 5 Plugins Octopress responsive video embed Adicionar imagens à postagem Blockquote Pullquote Codeblock Include Code Octopress-Slideshare-Plugin Octopress highlight plugin Octopress gravatar plugin Google-Form-Octopress Sintaxe dos arquivos.markdown Cabeçalho Blockquotes Marcadores e numeração Blocos de código Linha horizontal Links Ênfases Código de span Imagens Leia Mais Miscelânia Comentários Links automáticos Centralizando textos Caractere de escape Créditos 18 Laboratório de Software Livre 1

3 1 Introdução Nessa documentação faremos uma apresentação básica da plataforma de blogs chamada Octopress. Essa plataforma, assim como diz o cabeçalho do site do Octopress é uma estrutura de blogs para hackers, ou seja, exageros à parte, não é uma plataforma que contém os moldes tradicionais dos blogs tais como o Wordpress ou o Blogspot, ele é estático, feito principalmente em Ruby e os posts sao feitos de maneira que lembra bastante os textos feitos em Latex, ou seja, com um comando criamos o arquivo do post em uma pasta, abrimos o arquivo, editamos ele com a linguagem adequada e recarregamos a página novamente que ele estará publicado, sem preocuparmos com a formatação porque o Octopress faz tudo mediante configuração prévia. Não faremos uma descrição extensa e detalhada de todas as funcionalidades do Octoprees, somente do necessário para que seja possível instalar, fazer as mudanças básicas de layout e ensinar a fazer as postagens com a ajuda de alguns plugins que consideramos os mais importantes. 2 Instalação A instalação é baseada no que é ensinado na página oficial do Octopress e um blog chamado Unix and ME Utilizamos o Sistema Operacional GNU/Linux, distribuição Gentoo. Como usuário root, na pasta /var/www/localhost/htdocs fazemos: git clone git://github.com/imathis/octopress.git octopress cd octopress ruby version # Espera - se que seja mostrada a versão Ruby Agora instalamos as dependências: gem install bundler rbenv rehash bundle install Laboratório de Software Livre 2

4 É necessário configurar o arquivo config.yml que é o arquivo de configuração do Octopress. Ao entrar nele, as principais linhas a serem modificadas são: url: do blog] title: [título do blog] subtitle: [subtítulo, se for colocar uma figura no header, não precisa configurar essa linha] author: [autor do blog] Mais abaixo no arquivo, tem as configurações dos links com as redes sociais, tais como Facebook, mas é opcional. E por último, instalamos o tema padrão do Octopress: rake install Agora com o comando: rake preview levantamos a página do blog no endereço local 3 Publicando uma postagem Agora é a parte mais interessante, vamos publicar uma postagem, que é de uma maneira bem mais fácil e interessante do que as plataformas tradicionais. Na linha de comando, faça o seguinte comando: rake new post[ Título da Postagem ] que será criado um arquivo com o formato YYYY-MM-DD-post-title.markdown na pasta source/ posts. Abrindo o arquivo criado, ele terá o seguinte padrão: A linha categories:[categoria1, categoria2, etc] é onde preenchemos a(s) cate- Laboratório de Software Livre 3

5 goria(s) que o blog vai ter. Abaixo da linha escrito é onde escrevemos o texto de fato. Na postagem do blog gutocar- Os textos geralmente não vem justificados. valho.net vemos como é simples fazer com que todos os textos publicados sejam justificados. Primeiro modificamos o arquivo sass/custom/ styles.scss e acrescentamos as seguintes linhas: article p{ text-align:justify; Ao recarregar o blog, todas as postagens estarão justificadas. 4 Criando uma nova página Baseado na postagem do blog Suponhamos que precisamos criar uma página Contato, isso é muito simples com Octopress. Na linha de comando, digite o comando: rake new page[ contato ] git clone que dentro da pasta /source do Octopress será criada uma pasta chamada contato. Entrando nela, vemos um arquivo chamado index.markdown, podemos configurá - lo e adicionar texto a ele. Então iremos configurar o arquivo source/ includes/custom/navigation.html e adicionamos a seguinte linha nele: <li><a href= /contato >Contato</a></li> Por fim, fazemos o comando rake generate e a página com o conteúdo desejado estará criada. 5 Plugins Laboratório de Software Livre 4

6 Plugins são utilizados para adicionar funcionalidades ao blog. Vamos fazer a descrição dos principais plugins que julgamos serem relevantes no cotidiano. Mais informações, consultar: Octopress responsive video embed Esse plugin serve para postar vídeos de sites, principalmente do Youtube, que é o mais famoso. Para instalar ele, faça o comando na pasta plugins do Octopress: git clone Entre na pasta octopress-responsive-video-embed e copie os arquivos youtube.rb, vimeo.rb e traileraddict.rb para a pasta plugins e o arquivo rve.scss para a pasta /sass/custom e entre no arquivo /sass/screen.scss e adicione a custom/rve e pronto, já podemos colocar um vídeo em nosso site. Testamos com o Youtube e o Vimeo. Para o primeiro, no texto da postagem desejada, coloque: {% youtube [código do vídeo] % O código é o texto que está na url dos vídeos depois do sinal de =. Já para o Vimeo, fazemos: {% vimeo [código do vídeo] % O código está depois da última barra / na url. 5.2 Adicionar imagens à postagem Para adicionarmos uma imagem à postagem, primeiramente ela precisa estar na pasta source/images do Octopress. Essencialmente, a sintaxe na postagem é: {$ img [class names] /path/to/image [width] [height] [title text [alt text]] $ Alguns exemplos: {$ img $ {$ img /images/280.jpg image images $ Laboratório de Software Livre 5

7 {$ img left /images/250.jpg Place Kitten #2 $ {$ img right /images/500.jpg Place Kitten #3 $ {$ img right /images/500.jpg Place Kitten #4 An image of a very cute kitten $ Os arquivos 280.jpg, 250.jpg e 500.jpg foram conseguidos no site: Blockquote Esse plugin ajuda a fazer citações, que podem ser de frases do Twitter, artigo da internet etc. A sintaxe nas postagens é a seguinte: { % blockquote [author[, source]] [link] [source link title] % Quote string { % endblockquote % No site vemos alguns exemplos que daremos a seguir. {% blockquote % Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling. {% endblockquote % Agora se quisermos colocar a citação com o nome do autor, podemos fazer: {% blockquote Douglas Adams, The Hichhikers Guide to the Galaxy % Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling. {% endblockquote % Agora veremos uma citação de um Twitter: {% % Over the past 24 hours I ve been reflecting on my life & I ve realized only one thing. I need a medieval battle axe. {% endblockquote % Artigo publicado na internet: {% blockquote Seth Godin blog/2009/07 Laboratório de Software Livre 6

8 /welcome-to-island-marketing.html Welcome to Island Marketing % Every interaction is both precious and an opportunity to delight. {% endblockquote % 5.4 Pullquote Serve para fazer citações de frases importantes do texto em um espaço mais destacado da postagem a exemplos de alguns textos longos de revistas. Exemplo: {% pullquote % Surround your paragraph with the pull quote tags. Then when you come to the text you want to pull, { surround it like this and that s all there is to it. {% endpullquote % 5.5 Codeblock Serve para postar códigos de programas em um formato mais atraente. A sintaxe é dada como está abaixo: {% codeblock [title] [lang:language] [url] [link text] % code snippet {% endcodeblock % Alguns exemplos seguem abaixo: {% codeblock % Awesome code snippet {% endcodeblock % Mas se adicionarmos a linguagem do programa do código publicado, a parte do código publicada fica colorida: {% codeblock lang:objc % [rectanglesetx : 10y : 10width : 20height : 20]; {% endcodeblock % Podemos colocar um título na caixa do código: {% codeblock Time to be Awesome - awesome.rb % Laboratório de Software Livre 7

9 puts Awesome! unless lame {% endcodeblock % Ou podemos colocar uma url na caixa do código ao lado do título: {% codeblock Javascript Array Syntax lang:js MDN Documentation % var arr1 = new Array(arrayLength); var arr2 = new Array(element0, element1,..., elementn); {% endcodeblock % 5.6 Include Code Outro plugin muito interessante. Serve para postar códigos de programas através dos arquivos onde eles estão e na caixa da postagem tem um link para download do código. Para tanto, na pasta source, criamos a pasta downloads e dentro dela criamos a pasta code, que é a pasta que vamos colocar os arquivos com os códigos. A sintaxe é muito simples: {% include code [title] [lang:language] path/to/file % Por exemplo, suponhamos que temos um arquivo source/downloads/code/test.js, logo o código no arquivo da postagem ficaria assim: {% include code test.js % 5.7 Octopress-Slideshare-Plugin Serve para colocar um slide do Slideshare em uma postagem. Para tanto, iremos na pasta plugins e digitamos: git clone Então copiamos o arquivo slideshare.rb para a pasta plugins e em seguida adionarmos a linha seguinte em uma postagem: % slideshare ID % onde ID é conseguido clicando em Embed e Customize do slide e haverá uma guia escrito Shortcode for WordPress.com blogs. Logo copiamos o número do id no endereço abaixo. Laboratório de Software Livre 8

10 5.8 Octopress highlight plugin Esse plugin serve para destacarmos uma parte do texto que queiramos. Começamos por copiar a pasta octopress highlight plugin na pasta plugins : git clone highlight plugin Em seguida copiamos o arquivo highlight.rb para a pasta plugin. Depois adicionamos a linha: span.fluo { background-color: #FEDB7C; padding: 3px 1px 3px 1px; text-shadow: 0-1px 1px #DAC793; no arquivo sass/custom/ layout.scss. Por fim, adicionamos a linha: {% highlight [texto que vai ser destacado] % no arquivo que o texto desejado será destacado com um fundo amarelo. 5.9 Octopress gravatar plugin Com esse plugin podemos adicionar um gravatar na nossa postagem. Para tanto, precisamos ter um gravatar, se não tiver, vá ao site: e crie um. A conta do gravatar é associada a um e precisaremos dele em instantes. Vá na pasta plugins e digite: git clone gravatar plugin Em seguida, entre na pasta octopress gravatar plugin e copie o arquivo gravatar.rb para a pasta plugins. Agora vá na postagem de preferência e coloque a seguinte linha nele: {% gravatar @domain.com % Sendo @domain.com é o associado ao gravatar. Pronto, atualize o blog e o gravatar vai aparecer na postagem. Laboratório de Software Livre 9

11 5.10 Google-Form-Octopress O objetivo é usar o Google Form para nos auxiliar no Octopress, facilitando em muito o nosso trabalho. Baseado no que foi ensinado no blog: primeiramente criaremos um Google Form. Para tanto, vá no Google Docs e clique em Create-> Form. Crie quantos campos forem necessários e com o formato desejado de cada um, depois clique em Responses e em seguida em Spreadsheet. Na tela que abriu, vá em Tool -> Notification Rules e informe ao Google para mandar um quando alguém fazer alguma submissão. Agora vá na pasta plugins do Octopress e digite: git clone e entre na pasta Google-Form-Octopress e copie o arquivo google form.rb para a pasta plugins e o arquivo google form.js para a pasta source/javascripts. Agora vá no arquivo source/ includes/custom/head.html para adicionarmos as seguintes linhas nele: <! jquery > <script src= ></script> <script type= text/javascript > // Avoid conflict with ender.js. jquery.noconflict(); </script> <! jquery Form Plugin > <script src= ></script> <! jquery Form Validation Plugin > <script src= ></script> <script src= {{ root url /javascripts/google form.js ></script> e as seguintes linhas no arquivo sass/custom/ styles.scss..google-form-wrapper {.error { color: red; font-size: 12px;.errorbox-good { margin-bottom: 20px;.success-msg { display: none; Laboratório de Software Livre 10

12 .ss-form-entry { label { display:block; input { display: block; padding: 5px; width: 250px; font: inherit; textarea { width: 450px; padding: 5px; font: inherit;.ss-navigate input { width: auto; cursor: pointer; Na postagem ou na página criada, no arquivo md, digite o comando com o seguinte formato: {% google form formkey [message] % por exemplo: {% google form dgvfy3mwckldcjvrzergylrozwdjqnc6mq Thank you. I ll get back to you shortly % 6 Sintaxe dos arquivos.markdown Agora que conhecemos os plugins mais importantes do Octopress, vamos trabalhar na sintaxe dos arquivos das postagens (.markdown ou md simplesmente). Baseamos esse capítulo na postagem Markdown : Syntax, cujo endereço é: Cabeçalho Laboratório de Software Livre 11

13 O cabeçalho tem seis níveis, sendo o primeiro a letra será maior e o sexto a letra será menor, como vemos no exemplo abaixo: # This is an H1 - nível 1 ## This is an H2 - nível 2 ###### This is an H6 - nível Blockquotes Blockquotes são citações do texto que merecem destaque e que ficam separados dele, como vemos em revistas, por exemplo. Essa é uma outra maneira de inserir blockquotes, além do plugin, que vimos. Uma citação tem como sintaxe: > [texto] e podemos adicionar níveis adionais, simplesmente adicionando quantas setas para à direita > forem necessárias. Por exemplo: > This is the first level of quoting. > > > This is nested blockquote. > > Back to the first level. 6.3 Marcadores e numeração Markdown suporta marcadores e numeração. A sintaxe de um marcador é: * [texto] ; ou + [texto] ; ou - [texto]. Por exemplo: * Red * Green * Blue A sintaxe para numeração é: [número]. [texto] Laboratório de Software Livre 12

14 É interassante notar que os exemplos abaixo apresentam os mesmos resultados, ou seja, em uma lista numerada de 1 à n: 1. Bird 2. McHale 3. Parish ou 1. Bird 1. McHale 1. Parish ou 3. Bird 1. McHale 8. Parish Adicionamos como informação que podemos dar espaço entre os marcadores que haverá quebra de linha no texto. Devemos tomar cuidado porque um número e um ponto, como em What a great season., md reconhecerá como o início de uma numeração, logo é necessário usar barras \ invertidas para fazer o escapamento: 1986\. What a great season. 6.4 Blocos de código Blocos de código é quando o texto tem um fundo escuro em destaque do restante do texto, muito usado quando vamos apresentar um código ou um pseudo - código. A sintaxe é muito simples, pasta dar um tab um quatro espaços no teclado na frase que queremos que tenha destaque. Por exemplo: This is a normal paragraph: This is a code block. 6.5 Linha horizontal Uma linha horizontal pode ser feita usando três (ou mais) hífens, três asteríscos ou três underscores. Exemplos: * * * *** ***** Laboratório de Software Livre 13

15 6.6 Links A sintaxe de um link é dois colchetes, um aberto e outro fechado, os quais entre eles ficarão o conteúdo que será referenciado no link. Em seguida vem parênteses com a url e/ou o título entre aspas. Por exemplo; This is [an example]( Title ) inline link. [This link]( has no title attribute. Também podemos referenciar uma página local do servidor do blog, por exemplo: See my [About](/about/) page for details. Podemos fazer referências à links, por exemplo, se colocarmos [Google]: não precisamos digitar o conteúto anterior todas as vezes que mencionarmos o site da Google, simplesmente fazemos: [Google][]. E podemos fazer isso com qualquer url. Outro exemplo de referência é o que vemos abaixo: I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]. [1]: Google [2]: Yahoo Search [3]: MSN Search Acontecerá que que na frase I get 10 times more traffic from Google than from Yahoo or MSN., as palavras Google, Yahoo e MSN serão links para os respectivos sites. 6.7 Ênfases Para fazer um texto ficar em itálico, a sintaxe é essa: Laboratório de Software Livre 14

16 *[texto]* ou [texto]. Por exemplo: *single asterisks* single underscores Já para deixar o texto em negrito: **[texto]** ou [texto]. **double asterisks** double underscores Observação: um asterísco literal pode ser exibido, mas temos que usar a barra invertida e asterísco tal como se segue:. Exemplo: \*this text is surrounded by literal asterisks\* 6.8 Código de span Para indicar um código de span, deixamos o texto entre crases ( ). Por exemplo: Use the printf() function. 6.9 Imagens A sintaxe para adicionar imagens às postagens é: Que é: Uma exclamação:!; seguida de um conjunto de conchetes que contém uma tag Alt e um texto que representa a imagem; seguidos de um conjunto de parênteses contendo a url e um texto entre Laboratório de Software Livre 15

17 aspas Leia Mais Para adicionar um Leia Mais ou Read On na postagem, escolhemos um local de corte no texto e adicionamos: <! more > e veremos que na página principal o texto será cortado e precisamos clicar no link dele para lê-lo Miscelânia Comentários Por ventura, se desejarmos colocar um comentário no arquivo de postagem que estamos editando sem que ele apareça na publicação, fazemos: <! [conteúdo do texto] > Links automáticos Serve para expor links no texto, como uma url ou um endereço de . Exemplos: < <address@example.com> Centralizando textos Laboratório de Software Livre 16

18 Um texto será centralizado se ele estiver entre setas tais como (-> e <-). Por exemplo: -> Esse texto será centralizado. < Caractere de escape Temos vários caracteres especiais, tais como: \barra invertida crase * asterísco underscore { chaves [] colchetes () parênteses # tralha + sinal de mais - sinal de menos (hífen). ponto! exclamação Para fazer o escape deles quando queremos exibí - los em sua integra, simplesmente colocamos uma barra invertida antes de cada um ou eles serão considerados comandos. Laboratório de Software Livre 17

19 7 Créditos Documento Apresentação do Octopress Direitos Autorais Reservados (c) Universidade Federal de Minas Gerais Departamento de Ciência da Computação Autor: Alex Roberto Correa Esta documentação é livre; você pode redistribuí-la e/ou modificá-la sob os termos da Licença Pública Geral GNU conforme publicada pela Free Software Foundation; tanto na sua versão 2, como qualquer versão posterior (a seu critério). A distribuição desta documentação é feita na expectativa de que ela seja útil, porém, sem nenhuma garantia; nem mesmo a garantia implícita de comerciabilidade ou adequação a uma finalidade específica. Consulte a Licença Pública Geral do GNU para mais detalhes. Laboratório de Software Livre 18