Talk apresentada no Meetup Design Campinas. Falei sobre controle de versão, Git, GitHub, Abstract, GitHub Pages e Jekyll. Ferramentas que podem ajudar os designers a fazerem controle de versão e até publicarem sites estáticos.

1. Bruno Orlandi
Git para Designers

2. Bruno Orlandi
● Ciências de Computação
○ USP São Carlos
● Desenvolvedor Frontend
○ UPX Technologies
● https://brorlandi.github.io/
● @BrOrlandi

3. Design + Frontend

5. Controle de Versão

7. Controle de Versão
● Durante o desenvolvimento do software
queremos saber:
○ O que mudou?
○ Quando mudou?
○ Por que mudou?
○ Quem fez a mudança?
○ Podemos reproduzir esta mudança?
COMMIT

8. Controle de Versão
● Artefatos:
○ Código fonte
○ Documentação do Software
○ Manual de Usuário
○ Mockups e Wireframes

9. Problema exemplo
● Você precisa editar um código que está no servidor
● Você faz o download do arquivo
● Faz as alterações necessárias
● Salva o arquivo no servidor

10. Problema exemplo
● Seu colega também quer editar o código
● Vocês baixam o mesmo arquivo junto
● Você edita e salva no servidor
● Seu colega edita e salva no servidor e acaba
sobrescrevendo seu código

11. Controle de Versão resolve
● Controle de versão faz o 'merge' entre as
alterações.

12. Git é Distribuído

13. Controle de Versão

14. O que é GitHub?

15. O que é GitHub?
● Servidor de repositórios Git
● Rede social de código aberto
● +67 milhões de repositórios
● +24 milhões de usuários

16. Estão no GitHub

17. Criar conta no Github
https://github.com/

18. Por que GitHub?
● Maior rede open source
● Descobrir projetos
● Colaborar com projetos
● Portfólio

19. Existem alternativas?

20. Mas como eu uso Git?

21. Instalar Git
https://git-scm.com/
https://www.gitkraken.com/

22. Configuração inicial
● Configurar o seu nome de usuário e e-mail
● Chaves SSH

23. Criando o Primeiro Repositório
● Criar o repositório no GitHub
● Baixar o repositório
● Fazer o primeiro commit
● Subir no GitHub
DEMO

24. Estados dos arquivos
git push
git pull

25. Branchs
● Branch é uma lista de commits
● Representa uma ramificação no projeto
● Facilita o controle do que está em
desenvolvimento
● Útil para trabalho em equipe
● Fazer Pull Requests antes de fazer o merge

26. GitHub
● Fork
● Issues
● Pull Requests
● https://guides.github.com/introduction/flow/
● https://github.com/geekyd/Event-Buddy/issues/26
● https://github.com/BrOrlandi/GitTrainingWall/issues/21

28. ● Git para Sketch
● Free para uso individual
● Integração com Slack
● https://www.goabstract.com/

45. https://brasil.uxdesign.cc/abstract-app-e-o-workflow-definiti
vo-para-designers-e146d42a2498

47. Jekyll
● Gerador de Sites estáticos
● Baseado em Templates
● CMS - Content Management System
● Blog
● Temas
● Integrado com GitHub Pages

48. GitHub Pages
● Hospeda sites estáticos
● Basta ter um index.html no repositório
● Sites de usuário e organização
● Sites para repositórios
● https://username.github.io
● https://brorlandi.github.io/

49. https://hipsters.tech/

51. Meetup: Future Thinking and Tech
● Criatividade
● Inovação
● Comunicação
● Educação Financeira
● Sol: a energia do futuro!
○ Castelo Creative Space
○ Amanhã - 19h
● https://www.meetup.com/Future-Thinking-Tech-Campinas

52. Bruno Orlandi
https://brorlandi.github.io/
Muito Obrigado!