Software Usado

• git
• ncdu
• gimp
• bimp
• cmd
• brackets
• sublime_text3
• ffmpeg

---

Acordo do aluno

Baixe aqui.

Links Úteis

• Arquivo da Fab Academy
• Tarefas e Avaliação da Fab Academy
• Gitlab 2020
• Arquivo das aulas do Neil
• Fab Modules
• Mods
• Painel do Aluno
• Meu Site Pessoal

---

Fazendo um Site

Lembretes úteis

Eu vivo esquecendo coisas básicas de edição de HTML, então, para facilitar minha vida, vou começar listando códigos úteis e onde ficam coisas como a minha página de template:

O HTML usa tags para cada elemento, como um parágrafo ou um botão, então listo as tags que mais vou usar editando minhas páginas:

PS: a gente abre a tag com <some tag inside here> e não pode esquecer de fechar a tag com </same tag inside here>

• O elemento <p> serve para criar um parágrafo
• O elemento <button> serve para criar um botão, assim clique aqui
• esta é a minha página de template dos exercícios
• O código <a href="replace with the address"> replace with content</a> cria um link como este, que leva para outra página.
• O código <p class="pic"><img src="path/path/image.jpg" alt="Description of image"></p> coloca uma imagem na página, como as que aparecem abaixo
• Usando este código <pre class="prettyprint linenums">stuff inside here</pre> o texto fica com cara de terminal, assim:

  stuff inside here

• Para gerar tabelas, use o HTML Table Generator

  

Pesquisa

Para ter uma ideia de como meu site ia ficar, fui ao Arquivo de Alunos da Fab Academy 2016 para ver o que os outros tinham feito, e usei o botão de aluno aleatório.

Depois de olhar algumas páginas, achei a página do Yuji OKI, que me levou ao Fab Academy Template do Massimo Menichinelli.

Página do Yuji OKI

Fab Academy Template do Massimo Menichinelli

Usando o template do Massimo

No GitHub, clonei o repositório do template do Massimo para o meu HD. Depois copiei o conteúdo para uma pasta com o meu nome.

Edição

Os editores de código que escolhi usar são o Sublime_text3 e o Brackets.

Sobre o Sublime_text3:

O Sublime é ótimo para programar, comparar (diff) e juntar (merge) dois códigos. Gosto muito de usar o plugin "Sublimerge3". Com ele dá para comparar 2 arquivos e depois juntar partes do código.

Sobre o Brackets:

Na maior parte do tempo, é nele que eu escrevo HTML. O grande trunfo do Brackets é que ele atualiza em tempo real, na página do navegador, o que você está programando. Assim dá para ver cada modificação sem precisar dar refresh.

Para instalar os dois no macOS, eu simplesmente rodo os seguintes comandos no terminal:

$ brew install --cask sublime-text

$ brew install --cask brackets

Captura de tela do Brackets

Personalizando o CSS do template

O CSS serve para estilizar o seu HTML. Isso pode ser feito de 3 jeitos: inline, interno e externo.

Como o template atual usa o método externo, e isso economiza muito tempo, foi o que eu usei. Em alguns lugares do meu site, por não entender direito como o CSS funciona, posso ter usado estilo inline.

Os arquivos de estilo externos são o bootstrap.css e o fabacademy.css. Esses arquivos são referenciados na seção <head> no começo de cada arquivo HTML.

Até agora mudei só algumas configurações para chegar no visual atual, e elas estão no arquivo fabacademy.css:

• O max-width do container de imagem, de 920px para um valor variável de 95%;
• A margem do legend aumentou de 2px para 10px.

No bootstrap.css também fiz algumas mudanças, como mostro abaixo:

• O fundo virou preto com o código background: black; no bloco do html
• O texto foi justificado, e a cor e o estilo da fonte foram modificados no bloco do body com o código:
  text-align: justify;
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
color: green;
• Também mudei o alinhamento vertical das imagens no bloco do img com o código:
  vertical-align: center;

  Atenção: center não é um valor válido para vertical-align, então o navegador ignora essa linha. O valor certo é middle.

Como eu sabia quase zero de edição de HTML ou de CSS, para entender melhor o HTML antes das modificações acima assisti à aula do Massimo sobre HTML e CSS.

Também usei as referências de HTML do w3schools.com.

Estrutura de Pastas do Site

Por enquanto a estrutura de pastas é bem simples e vai precisar de uma arrumação.

Estrutura de Pastas:

• Todos os arquivos HTML ficam na pasta raiz /.

  Os exercícios, ou semanas, ficam em arquivos HTML com o nome do número da semana correspondente, por exemplo: week01.html, week01b.html. Como estou tendo que adaptar este site às exigências atuais da Fab Academy 2018, decidi diferenciar os arquivos colocando o ano na frente do nome do arquivo, por exemplo: 2018week01.html

• Tem um arquivo de template dos exercícios aqui: "exercisetemplate.html"
• Todos os arquivos de mídia e códigos ficam na pasta /media

  Isso inclui arquivos como: STL, PNG, JPG, MP4, ZIP, etc...

• Todos os arquivos CSS ficam na pasta /bootstrap

Estrutura de pastas atual

Instalando o ncdu e usando para achar arquivos grandes

Para economizar espaço no servidor, e também para o site carregar mais rápido, a gente precisa ficar sempre de olho para não deixar passar arquivos grandes de imagem e vídeo sem compressão.

1. Num terminal Linux, digite:

   sudo apt install ncdu

   

2. Abra o ncdu num terminal Linux digitando:

   ncdu

   O ncdu vai abrir, e com as setas para cima e para baixo e a tecla enter você consegue navegar pelas pastas.

   

   O ncdu ordena os arquivos maiores primeiro e mostra mais caracteres de hashtag "#" para as pastas ou arquivos maiores.

   

   Neste caso, o maior arquivo é um vídeo do esboço do meu projeto final.

Comprimindo os arquivos maiores

Para o vídeo, vamos usar o ffmpeg.

1. Comece instalando o ffmpeg num terminal Linux:

   sudo apt install ffmpeg

2. Depois rode o ffmpeg no vídeo grande, como no meu exemplo:

   ffmpeg -i input_video -vcodec libx264 -b:v 1000k -vf scale=-2:720 -an output_video.mp4

O código acima deve gerar um vídeo 720p sem áudio. Para mais exemplos, veja a cola de ffmpeg do Neil.

Para as imagens, dá para usar um software chamado Gimp e um plugin chamado bimp.

Eu uso um gerenciador de pacotes chamado Chocolatey para instalar alguns programas no Windows.

Ele funciona parecido com o apt, só que para Windows.

1. Num shell de administrador do Windows, rode:

   choco install gimp

2. Depois baixe o bimp no site dele e instale, para poder rodar dentro do gimp.
3. Terminada a instalação, abra o gimp e selecione o plugin Batch Image Manipulation

   

4. Para carregar um conjunto anterior ou salvar um novo, você tem que apertar o botão Add e depois escolher a operação desejada

   

5. No meu caso, como eu já tinha o conjunto salvo, escolhi "load set"

   

6. Depois selecione o conjunto, no meu caso "readyforweb.bimp"

   

7. Para criar ou modificar o comportamento do plugin, clique em Add para adicionar um processo, ou clique num dos que você já salvou antes

   

8. Dentro do conjunto de redimensionamento escolhi as opções que eu queria, no caso a largura de 800px

   

9. Depois fui no outro processo e escolhi uma qualidade de compressão de 75, além de converter o formato para jpeg

   

10. Aí selecionei de uma vez todas as imagens que eu precisava converter e apliquei as mudanças

    

11. Por fim, copie as imagens convertidas para a sua pasta, se você não tiver definido isso antes.

Instalando e usando o git

Primeiro: eu uso macOS. Com isso em mente, e com muitos aplicativos de terminal para instalar, vale a pena ter o Brew. Ele ajuda em todas as instalações que a gente precisa fazer no Terminal e no desktop.

Para instalar, abra o terminal e rode:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Atenção: o Homebrew aposentou esse instalador em Ruby. Hoje o comando de instalação, do brew.sh, é /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)".

Depois instale o Cask. Ele ajuda a instalar aplicativos de desktop.

$ brew tap caskroom/cask

Atenção: brew tap caskroom/cask não funciona mais. O Cask agora já vem no Homebrew, então pule este passo e instale os apps de desktop direto com brew install --cask <app>.

Depois instale o GitHub Desktop, que já vem com o Git.

$ brew install --cask github

Captura de tela do Github

Trabalhando com o seu Repositório

Agora que tenho o site montado localmente, é hora de subir para o repositório da Fab Academy.

Para isso, vou ter que salvar minha chave ssh pública no site do gitlab da Fab Academy. Assim consigo acessar pelo git sem precisar digitar a senha toda vez. Depois disso, é preciso clonar o seu repo no disco local para começar a trabalhar nele.

Uma fonte de informação sobre como fazer isso é a ajuda de ssh do gitlab. Abaixo está como eu fiz.

Passo a passo:

1. Como eu já tinha instalado o git antes, vou até a pasta onde quero trabalhar e crio uma chave ssh com:

   ssh-keygen -t rsa -b 4096 -C "your_email@domain.com"

   Isso gera a chave SSH, e o rótulo da chave vai ser o que você colocar entre as aspas

   Generating public/private rsa key pair.
   Enter file in which to save the key (/Users/someone/.ssh/id_rsa):
   

2. Depois de um tempinho, uma mensagem pergunta se você quer deixar o local e o nome da nova chave SSH no padrão ou criar um novo. Eu escolhi um novo, digitando um local e um nome de arquivo novo.

   Enter file in which to save the key (/Users/someone/.ssh/id_rsa): /Users/someone/.ssh/id_rsafab
   Enter passphrase (empty for no passphrase):
   Enter same passphrase again:
   Your identification has been saved in /Users/someone/.ssh/id_rsafab.
   Your public key has been saved in /Users/someone/.ssh/id_rsafab.pub.
   The key fingerprint is:
   SHA256:IheXdVbB4DChb7Lyo5nJPHhNyExDKAFw5kADUTMR7MU your_email@domain.com
   The key's randomart image is:
   +---[RSA 4096]----+
   |XBX= .    =.++o. |
   | =+oE .  + *  .  |
   | ..o .. +   .    |
   |  .   oo .       |
   |    .+ooS o      |
   |     o+..+       |
   |     ..o.        |
   |    .oo*o        |
   |     .Bo..       |
   +----[SHA256]-----+
   
   

3. Mostre a sua chave ssh rodando

   $ cat ~/.ssh/id_rsafab.pub

4. Depois você pode selecionar o texto na tela, que vai ser parecido com isto

   ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQDRdz+KsRwD2jgojGESZzVQNtFT0uWLGZAieKRNMy4ytav//ABgEB5eAWFTU/YfjQn2apnt+YgXC7aWfjk8Ta5/AQblQ2r/randomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekey+rEk6OvIq5F46sKZclXdCLFbj4b9CP5wlFVWm/vq/tgeEbc701587xVCSq/7Ssqv5GNbipbq8eGElKiM4J7h1xlEJmSb06uuqk7PswQjDhV2RFHTl6sNM45qJw30y9O3WkfddFmW5nQ8roP880ef0rvvWK51nvUpmm37rIrHa+rdFpPc9U0bRZ5BhYpp/wMnVHLmZB8W/9Wf2TN0TD/H1AWjvQ1O2EJxKn7GStVGUzopCcIwt+jEjcMZRC/pRZnvEjH30FAFv5F+kYQwmsKcNuZz+qLWF8D5sjVySHSdERLJ3Y7h4ObCJt0ll5+NJ7syf1S7gCotvT910Evorq1f2jb4l6Lt1gJz7uXA03va0HhaBGTKTB0mF7NRJusotyhGWncXgNTkZOkfFQ5Ps1xAcLRmB0uMt0/3MnS7ONu/TfJVuSqYqUuuUtz9hqbke4I4JsD+X7e1a4gAvsFK/nv6Usf0m8aQ== your_email@domain.com

5. Como a minha chave não é a padrão, preciso dizer ao SSH agent onde ela está, digitando:

   $ eval $(ssh-agent -s)
   Agent pid 9284
   
   $ ssh-add ~/.ssh/id_rsafab
   Identity added: /Users/someone/.ssh/id_rsafab (/Users/someone/.ssh/id_rsafab)
   
   

6. Agora é carregar a chave pública no gitlab e copiar o endereço ssh do seu repo, caso você não saiba. Vá em gitlab.fabcloud.org
7. Faça login com a sua conta do fablabs.io
8. Encontre o seu lab e depois o seu nome de aluno;
9. Lá você pode copiar o endereço ssh do seu repo trocando de HTTPS para SSH.

   

10. Depois adicione a sua chave ao seu perfil de usuário

    

11. Agora é hora de clonar o seu repo e começar com o "mantra"... então, com o endereço ssh que você copiou antes, digite o seguinte

    git clone git@gitlab.fabcloud.org:academany/fabacademy/2018/labs/yourlab/students/yourname.git

12. Com o repo clonado localmente, você pode começar a editar o seu HTML ali mesmo ou colar o site ou template que já editou na pasta criada.
13. Agora o "MANTRA"

    git pull
    git add --all
    git commit -m yourmessagehere
    git push

    Essa sequência de comandos garante:

    1. Primeiro (git pull), que você está atualizado com o seu origin
    2. Segundo, que você adiciona todas as mudanças novas ao seu branch local (git add --all)
    3. Terceiro, que você faz commit de todas as mudanças (git commit -m yourmessagehere)
    4. E por último, que você envia os commits para o seu origin (git push)

---

Anotações de Git e Bash:

(As anotações aqui vão sendo adicionadas ao longo do curso, como uma cola de comandos git)

• Quando quero saber informações sobre o origin de um repo

  git remote show origin

• Copiar uma chave ssh para um servidor

  ssh-copy-id -i ~/.ssh/mykey.pub user@host

• Quando quero fazer push de um repo existente, commit por commit, para um endereço novo

  git remote add gitlab git@gitlab.fabcloud.org:Lucio/frankenlaser.git
  git rev-list --reverse master | ruby -ne 'i ||= 0; i += 1; puts $_ if i % 1 == 0' | xargs -I{} git push gitlab +{}:refs/heads/master

Criando um Repo novo

Quis incluir instruções de como criar um repo novo e subir para o GitHub, para referência futura, mesmo não tendo sido assim que eu fiz

1. Primeiro, é preciso estar na pasta de trabalho e transformá-la numa pasta git com:

   git init

2. Depois adicione todos os arquivos ao repo local, o que os coloca em stage para o commit

   git add .

3. Depois é preciso fazer o commit com:

   git commit -m "First commit"

4. Agora crie um repositório novo no GitHub

   

   

5. Depois copie o endereço do repositório remoto

   

6. Agora adicione um remote com o endereço copiado

   git remote add origin copied_address_here

7. Por fim, faça push de tudo com:

   git push -u origin master

   E pronto

8. Anotações de git:
9. Anotações de ffmpeg:
   • Cortar ??:??:?? de vídeo a partir do tempo ??:??:?? (-ss é onde o corte começa e -t é quanto tempo ele dura, não o tempo final)

     ffmpeg -i videoinput.mp4 -ss 00:00:11 -t 00:00:22 -async 1 videooutput.mp4

   • O mesmo tipo de corte dá para fazer com um código parecido

     ffmpeg -ss 00:00:00 -to 00:00:37 -i videoinput.mp4 -c copy videooutput.mp4

   • Criar um gif e cortar o vídeo

     ffmpeg -i input.mp4 -ss 00:00:00.000 -pix_fmt rgb24 -r 10 -s 320x240 -t 00:00:10.000 output.gif

   • Comprimir áudio e vídeo

     ffmpeg -i input.mp4  -vcodec libx264 -crf 25 -preset medium -vf scale=-2:360 -acodec libmp3lame -q:a 4 -ar 48000 -ac 2 output.mp4

   • Comprimir áudio e vídeo de todos os arquivos de uma pasta e gravar os arquivos comprimidos em outra pasta.

     for i in *.mp4; do ffmpeg -i "$i"  -vcodec libx264 -crf 25 -preset medium -vf scale=-2:360 -acodec libmp3lame -q:a 4 -ar 48000 -ac 2 "./1/${i%.*}.mp4"; done

   • Comprimir o vídeo e tirar o áudio com -an

     ffmpeg -i input.mp4  -vcodec libx264 -crf 25 -preset medium -vf scale=-2:360 -an output.mp4

     (Corrigido depois: o comando também tinha as opções de áudio -q:a 4 -ar 48000 -ac 2, que não fazem nada quando o -an tira o áudio, então eu tirei.)

   • Girar vídeos 90 graus no sentido horário

     ffmpeg -i input.mp4 -vf "transpose=1" output.mp4

← (05 fev) Princípios e Práticas · todas as semanas · Desenho Assistido por Computador (12 fev) →