Exercício: Criar uma página html mínima

  1. A partir do public_html da sua conta no LIEF crie um arquivo chamado pagina.html

    $ cd ~/public_html

    $ nano pagina.html

  2. Adicione o seguinte código html no arquivo

<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF8">
<head>
<title>Título da Página</title>
</head>
<body>
Este é meu texto!
</body>
</html>

  1. Salve e saia do editor nano

    Ctrl + o salva arquivo -> digite enter para confirmar o nome do arquivo

    Ctrl + x sai do nano

  2. Visite o arquivo utilizando o navegador. Perceba o título na barra do navegador.

Exercício: Montar comando para publicação do website

Como a atualização do site pode ser bastante comum, é interessante montar um comando ou script que realize a sincronização dos teus arquivos locais com o servidor remoto. Além disso, o website pode conter arquivos grandes, tais como dados e arquivos binários, que não precisam ser copiados em cada atualização do site. A ferramenta de ouro para copiar apenas os arquivos alterados para o servidor é o rsync.

O rsync é incremental e copia apenas as alterações dos arquivos, podendo sincronizar tanto arquivos locais (no mesmo computador), como arquivos remotos. Com ele a sincronização pode ser feita com um script que executa o comando com os parâmetros adequados.

Exemplo:

Partindo do diretório do projeto a ser documentado no seu computador:

  1. Crie o diretório do seu site no seu computador

    $ mkdir site_projeto

  2. Adicione arquivos

    $ touch site_projeto/meu_arquivo.txt

  3. Crie o script de sincronização

    $ echo "rsync -av site_projeto teu_username@lief.if.ufrgs.br:/home/teu_username/public_html" > atualiza.sh

    $ chmod +x atualiza.sh

  4. Execute o comando de atualização

    $ ./atualiza.sh

  5. Verifique as alterações no site utilizando o seu navegador favorito.

Após a realização destes passos você terá a seguinte estrutura de diretórios e arquivos no seu computador local.

.
├── atualiza.sh
└── site_projeto
    └── meu_arquivo.txt

Perceba que, neste caso, o script atualiza.sh está em um nível acima em relação aos arquivos do site_projeto. Pode-se considerar manter o script no próprio diretório site_projeto, porém, neste caso os caminhos do comando de sincronização devem ser ajustados:

  1. cd site_projeto
  2. echo "rsync -av . teu_username@lief.if.ufrgs.br:/home/teu_username/public_html/site_projeto/" > atualiza.sh
  3. $ chmod +x atualiza.sh
  4. Execute o comando de atualização $ ./atualiza.sh

Os arquivos estarão organizados da seguinte maneira:

.
└── site_projeto
    ├── atualiza.sh	
    └── meu_arquivo.txt

Atenção: Informações sensíveis registradas neste arquivo, tais como senhas, serão copiadas para o servidor.

Markdown

Markdown é uma linguagem de marcação simples originalmente criada por John Gruber e Aaron Swartz. Markdown converte seu texto em HTML válido. Fonte: Wikipédia

É utilizado por centenas de projetos de criação de conteúdo tais como websites e textos técnicos e será utilizado ao longo deste curso. Este site foi construído com Jekyll, utilizando o tema documentation-theme-jekyll, que utiliza Markdown. Para inserção de caracteres especiais, veja a Tabela de códigos HTML para caracteres e símbolos

Exemplo

# Cabeçalho 1
## Cabeçalho 2
### Cabeçalho 3
...
###### Cabeçalho 6

Marcação alternativa de cabeçalho 1
===================================

Marcação alternativa de cabeçalho 2
-----------------------------------

Texto de parágrafo abrangendo duas linhas, apresentando _itálicos_, __negrito__, `códigos` e um [hiperlink](http://www.wikipedia.org/). Também são possíveis *itálico* e **negrito** utilizando asterisco, assim como ~~riscado~~.

Lista com marcadores:
   * item 1
   * item 2
   * item 3

Lista numerada:
   1. item 1
   2. item 2
   3. item 3

O código acima será convertido em HTML é renderizado da seguinte forma neste site:

Cabeçalho 1

Cabeçalho 2

Cabeçalho 3

…

Cabeçalho 6

Marcação alternativa de cabeçalho 1

Marcação alternativa de cabeçalho 2

Texto de parágrafo abrangendo duas linhas, apresentando itálicos, negrito, códigos e um hiperlink. Também são possíveis itálico e negrito utilizando asterisco, assim como riscado.

Lista com marcadores:

  • item 1
  • item 2
  • item 3

Lista numerada:

  1. item 1
  2. item 2
  3. item 3

Primeiro documento Markdown

Faça uma cópia do arquivo criado para a Tarefa 5 com extensão .md e formate o texto indicando o título e links existentes de acordo com a sintaxe markdown. Selecione trechos para marcar com itálico e negrito.

Conheça mais possibilidades da sintaxe Markdown neste guia rápido ou a documentação oficial criada pelo autor do projeto.

Converta o arquivo

$ markdown tarefa5.md

Para salvar em um arquivo html, utilize o operador de armazenameto de saída > como visto em aula.

Exercício

Descrição da atividade: Exportar para html o notebook criado por você em Markdown e publicá-lo no seu diretório público no LIEF. Faça isso numa pasta chamada Tarefa5. Salve seu arquivo com o nome index.html. A imagem que foi inserida deverá ser copiada ao LIEF juntamente com o arquivo html.