Version Control, Web Design, Photo & Video Editing

Documentation

Format: Lecture

Assignment:

• Build a personal website in the class archive documenting the process and introducing yourself

Learning Outcomes:

Upon successfully completing this class students will be capable of:

• Explore and use website development tools

• Identify version control protocols

• Undestand the importance of documentation

• Use basic tools for photography and video

Version control

synchronization
rsync
unison
version control
RCS CVS
Subversion
Bazaar
Bitbucket Git
GitHub
Gitolite
Gitweb
GitLab
class archive
Dropbox
ownCloud

Git

• Install git
  • sudo apt-get install git
• Configure git
  • https://help.github.com/articles/set-up-git/
• Clone your repository
  • HTTPS link vs SSH link
  • Change from HTTPS to SSH https://help.github.com/articles/changing-a-remote-s-url/
• Generate SSH keys https://help.github.com/articles/generating-ssh-keys/
• Upload public key to Gitlab
• Workflow for Pulling and pushing
  • git pull
  • git add --all
  • git commit -m “message”
  • git push
• Conflicts. Do's and Don'ts
  • https://help.github.com/

Web design resources

Web development
W3C
HTML
HTML5
Jade
Markdown
GitBook
Pandoc
(g)vim
emacs
Atom
Sublime
Geany
Brackets
Eclipse
LibreOffice
SeaMonkey
Dreamweaver
JavaScript
Bootstrap
jQuery

blogs, wikis, content management systems
Jekyll
DokuWiki
TiddlyWiki
Hatta-Wiki
MoinMoin
GetSimple
Moveable Type
Jekyll
WordPress
Drupal
Moodle

Writing documentation

• It's all about documentation. Does not matter what you did, only what you documented.
• Importance of documenting while you work
  • If you are in a trouble, it will help your, local or remote tutor, a friend or the class to understand what you did.
  • It helps yourself during your research to keep track of what you did
  • It helps you to acquire a good habit useful in the future, not only for Fab Academy
• Tell your story, not a step by step tutorial. Is what you did, not what to do http://fabacademy.org/archives/2013/students/sanchez.francisco/weekly-assignments/index.html
• The notebook: For documentation it is strongly recommended that you always carry with you a notebook with around 100 non detachable pages that you will use exclusively for the course. Do not use separate sheets because it is highly probable that they will eventually end up lost and shuffled. Screenshots are helpful, but do not rely all your research in screenshots only. Divide your annotations in entries. In every entry you can write:
  • Date
  • What you are doing, for what assignment (you will forget soon)
  • Machines used and settings
  • Workflows, protocols or procedures you are following
  • Troubles you are finding in the way, and how are you dealing with them
  • Debugging table
  • Entry conclusion (Finished, to be continued later, stuck in a process, ...)
• Pay attention to the grading criteria and project requirements
• Documenting in HTML
  • Learning HTML https://www.edx.org/course/html5-part-1-html5-coding-essentials-w3cx-html5-1x
  • HTML templates
    • Warning: can distract you from the content
    • If used make sure to remove all Lorem Ipsums and so
    • Useful for starting a new HTML web when you already know HTML
    • http://startbootstrap.com/template-categories/all/
• Software for Editing HTML
  • Text Editor (recommended)
  • WYSIWYG (What you see is what you get). Not recommended. They create messy unusable code.
• Documenting in Markdown
  • Rising tendence
  • Easy to write, fast and clean compared to HTML
  • 10 minutes tutorial http://markdowntutorial.com/
  • Nice text editor Atom
  • Online editor and publisher https://stackedit.io
  • Online HTML to Markdown converter http://domchristie.github.io/to-markdown/
  • Online Markdown to HTML converter http://dillinger.io/ (keep both .md and .html files always)
  • Pandoc: Command line converter https://github.com/jgm/pandoc/releases
    • Usage pandoc -s -o file.html file.md
    • Create a sh script

Photography for documentation

• Blurred images
• Size (web size). There is something even worse than a blurred image. It is a 16 Megapixel blurred image.
• Cropping images
• Scale down images in right click menu in Nautilus: nautilus-image-converter
• Command-line graphicsmagik package
• Backgrounds
• Composition: Rule of thirds
• Lighting. Beware of flash.
• Prepare the scene
• Object scale: reference the scale in the picture
• Signal to noise ratio

Video for documentation

• Do not upload large (> 1Mb) videos in the archive. Host them in Vimeo or Youtube
• Consider GIF for short videos (~5sec)
• Fundamental video editing: Trimming, cropping, transitions, titles, audio
• Compressing video for documentation
• Screen capture (SimpleScreenRecorder)
• Selfie video