Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
151 lines (82 sloc) 4.72 KB

#Some notes

Approach

Designing in balsamiq mockups using bootstrap symbols library and grid system.

Using Tabletop to have google spreadsheet backend. to decouple CMS from front end. Drawing and refining prototype approach from earlier project with WIP interview.

This allows to decouple content from presentation. And easy interface to curate content for non-developers.

setting up balsamiq with Bootstrap symbols library

Balsamiq mockup with bootstrap to components.

The main advantage of pairing a pattern library with Balsamiq Mockups is that it can free you from worrying about look, feel, and behavior when designing yet provide pixel-perfect renditions of the final product components.

Bootstrap Mockups To Go library download Download BMML

Bootstrap Mockups To Go library mapping example

from toolbar, import bml library. project -> import -> BML Symbol library

grid bml

some more sumbol libraries

Table top

See table top REAMDE for instructions

Battle sounds spreadhseet link

Bootswatch

"click a Bootswatch theme, last thing you want is for someone to say "oh, you used bootstrap" as that distracts from the experience.

Sleek transitions

Fullscreen Layout with Page Transitions also on github

Making an Overlay

w3c

github + github pages for demo preview

use github and put project containing index.html inside a colder called docs in root of project you can set github pages to read/render page from there and get a live demo right there and then.

Make sure your .gitignore excludes media file. and store video /audio elsewhere, eg dropbox public folder, or amazon s3 bucket. Don't commit media to git. makes the repo heavy, because of how git stores snapshots of files.

if you got custom domain it automatically make the github page with your domain + suffix of project eg http://pietropassarelli.com/BattleSounds with no extra effort.

HTML5 Video

current time property

Google drive for slides

slides

  • Team
  • Problem
  • target audience
  • solution
    • demo + github repo
  • Q&A

bad VHS effect

seriously js

Google spreadsheet custom functions (TC calculator)

inspired by timecode claulator on google sheet

However easier to do with

Tools -> scirpt editor

/**
* Convert timecodes `hh:mm:ss:ms` to seconds
* where ms are ignored
*/
function timecode_to_seconds(tc) {
  var tc = tc.split(":")
  var h = parseInt(tc[0])*60*60
  var m = parseInt(tc[1])*60
  var s =parseInt(tc[2])
  
  return h+m+s
}

in excell sheet

=timecode_to_seconds(F2) where in this case F2 for example will contain a timecode 00:01:30:00 that will then be rendered as 90 (secs)

Convert videos for HTML5

Miro Video converter

VCR font

http://www.dafont.com/vcr-osd-mono.font

## Google font https://fonts.google.com

https://fonts.google.com/specimen/Gochi+Hand?selection.family=Gochi+Hand

Video screen grab

https://github.com/fakob/MoviePrint_v002/blob/master/MoviePrint.xcodeproj/project.pbxproj

http://www.fakob.com/2014/movieprint-an-osx-tool/

Social media share + captioning

quickQuoteNode

quickQuote node more on quickQuote here

quickQuote Node

with difference that is an older version, and this version is node based and allows to tweet the video selection.

Twitter export

Caption burner

captions tool

Twitter export

Catpions burner

to burn srt into video

Captioned video