Create Video introduction to Tachyons Bootstrap #9

Cleop · 2017-05-22T13:39:15Z

Video ScreenCast / Workshop to teach the UI framework to other people (to be tested on F&C people and then taught to NHS/MWV/SL etc.)

iteles · 2017-06-03T19:03:13Z

Added dependency label as this can only be completed once the guide has taken some form and has had some of the issues closed and tested (i.e. when there is something to video).

iteles · 2017-06-03T19:05:46Z

Not sure whether to open this as a separate issue, but I would like the video to include views of:

Responsive sizing
Chrome and IE
Different devices (use Mr. Tappy! Investigate Mobile Device Testing Rig for Field-testing Apps on a Budget learn-user-experience-testing#1 (comment))

Cleop · 2017-06-15T11:18:55Z

@iteles @nelsonic and anyone else with views on good video intros:

What?
2 TB intro videos featuring a presenter and screenshots.

Why 2?

Will be a short introduction to what TB is, it will be most accessible to people who may have already heard of bootstrap or functional css.
Learn-TB will be an introduction to TB for someone who may not know what bootstrap is / or how to use it. It will demonstrate how to use / edit a component.
Duration?
Intro (1 - 2mins)
Learn-TB (5mins)

Who is our primary target audience?

We want to make the video as accessible as possible
Ideally you will know some basic html and css
The longer video will be best suited for complete beginners
Using words / technical vocab that's accessible to all
People who may not have heard of tachyons or bootstrap

How?

Shot using a webcam and camera
With a voiceover
Reading a script
Screen recorded (good enough size/zoom for mobile)
Green screen for presenter background

Content
INTRO VIDEO
Why was TB created?

Created TB to provide reusable components
Why is it useful for you? Easy but also scalable.
What the resource is? (and a quick show of it)
Component guide inspired by bootstrap
Responsive, devices/ browser compatibility
How can I use it?
Get the tachyons script
Copy a component
Customise your component

LEARN-TB
Show end result first and say, this video will show how we got there.

Intro -
- What's tachyons?
- What's bootstrap?
- What's tachyons bootstrap?
- What's functional css?

Check out the 'Try Elixir Intro video': https://www.codeschool.com/courses/try-elixir
It's got parallels with our intro video as it's both presented and featuring code, only lasts 30 seconds and is about introducing a project, not going into great depth about a concept.

Cleop · 2017-06-26T16:13:10Z

INTRO VIDEO

This script takes 1 min 5 sec to read but will probably expand to 2mins with pauses and intro/ outro etc. So I wouldn't encourage more content if possible.

AUDIO	VISUALS
(WELCOME)- Hello, my name is Cleo and I'm a developer at dwyl. This is an introduction to tachyons-bootstrap.	Presenter to camera (full screen) followed by intro transition with dwyl project title
(WHY) tachyons-bootstrap has been created to give you access to a wide range of components that you can reuse in your own applications, quickly and painlessly. Giving you the opportunity to have consistent styling that can also be easily customised or scaled for bigger teams. (?)	Presenter in small / Screen scrolling through TB components slowly or list of bullets of benefits of TB
(WHAT) tachyons-bootstrap is a responsive component guide inspired by twitter bootstrap. It's been built using tachyons and functional css in order to encourage you to understand the code you're implementing.	Presenter in small / Screen scrolling through TB components slowly
(HOW) Check out the guide at http://tachyons-bootstrap.dwyl.com Include the tachyons stylesheet link in the `<head>` of your app, then simply copy and paste the code for the components you wish to use. That's all it takes! If you want a more detailed introduction, checkout our learn-tachyons-bootstrap video linked below	Presenter small Show adding script, adding code and then code displaying
(CONCLUSION)- We hope you enjoyed this video please subscribe and check out our other resources on github using the link below.	Presenter to camera (full screen) followed by outro transition with dwyl project title and links to next video / the site

Cleop · 2017-06-27T10:31:08Z

In the second video, are we making an assumption that people have watched the first one? Is saying something like 'for an introduction to tachyons bootstrap check out...' enough or does the second video need to cover the same content as the first?

@iteles @nelsonic

@iteles said - assume not watched first. Mention other content and give a 2 sentence intro to TB for a little context.

Cleop · 2017-06-27T11:44:42Z

LEARN-TACHYONS-BOOTSTRAP VIDEO

This script takes 1min 45secs to read but is likely to expand to approx 3 mins with demonstrations of the various actions involved.

AUDIO	VISUALS
(WELCOME) Hello, my name is Cleo and I'm a developer at dwyl. This video will teach you how to use tachyons-bootstrap.	Presenter to camera (full screen) followed by intro transition with dwyl project title
(WHAT) tachyons-bootstrap is a component guide inspired by twitter bootstrap. It's been built using tachyons and functional css. To watch our tachyons-bootstrap introduction video or to learn more about the other topics mentioned in this video, see the list of resources in the description below.	Presenter in small / Screen scrolling through TB components slowly or navigating by clicking on the contents
(WHAT) So let's build something! Go to http://tachyons-bootstrap.dwyl.com, and select the Forms section in the contents. We're going to create our own basic form.	Presenter in small / Screen view of zoomed in form
(HOW) Step 1 - In your preferred text editor, using a basic html page set up, add the tachyons link in the `<head>` of your app. This stylesheet link gives you access to all of the tachyons classes.	Presenter small - Show adding script in atom
Step 2 - Let's create a`<div>` which will contain our form. You'll notice that I'm adding classes that will center it, give it a width of 20% and give it a little top padding. Copy and paste the code from the component on the tachyons-bootstrap site into your html file. The components are made up of standard html with tachyons classes added to them.	Presenter small - Show copying code from TB site and then pasting into atom.
Step 3 - Open your file in your browser to take a look at your new component!	Presenter small - Show opening file in browser
Step 4 - Make any edits or customise the component to suit your needs, try adding or removing the tachyons classes.	Presenter small - Show customising component and new look
(CONCLUSION)- That's it! Simply copy and paste the code for the components you want and you're ready to go. We hope you enjoyed this video please subscribe and check out our other resources on github using the link below.	Presenter to camera (full screen) followed by outro transition with dwyl project title and links to next video / the site

Need:

1 tab with TB open at the top to start off.
1 file open in atom, that's empty or already has basic html set up.
The tachyons script copied so it can be pasted straight away into the index.html file OR show copying it from the README.
Paste your form into a <div> with w-20, center and pt5
Change the checkbox to 'subscribe to our newsletter', change the label font sizes to f4, bg-blue and white added to submit button.

Cleop · 2017-07-13T09:43:07Z

@iteles @nelsonic @sohilpandya @markwilliamfirth.... presenting the Introduction to Tachyons Bootstrap and How to use Tachyons Bootstrap videos:
https://drive.google.com/open?id=0ByzPFwE23Wu2Y1lfQW1WVGV1Z3c
https://drive.google.com/open?id=0ByzPFwE23Wu2ZnBHUHNWSndLRHc
Particularly interested in feedback on:

The intro/outro slides and background for pieces to camera as these will be reused in other dwyl projects. Would be great to try and find something we like now for consistency and reuse in future.
Whether we want any music or backing sound? or whether this is not necessary
Duration: pace and the level of explanation detail. Do we have any thoughts on this for future videos?
All feedback is useful, it's worth mentioning that some of it may be able to be incorporated this time around and other things may have to await future projects based on the amount of video I have to work with from the filming of these ones (and therefore certain changes that can't be made retrospectively).

Once I have some feedback I can make any possible amends and following that, we can pop them on YouTube. Then TB will be ready and simply awaiting the dwyl-site redesign before we publicise!

nelsonic · 2017-07-29T15:28:33Z

Darn it! I started writing a reply to this on the day you posted but it did not send/save ... 😢
I think both videos are superb and should go on YouTube ASAP! (Monday morning?!)

iteles · 2017-07-29T17:02:55Z

Can't believe I didn't see these at the time.

@Cleop I love them so much! The stuff going on in the background is just perfectly matched. Amazing!

Cleop · 2018-01-03T11:40:53Z

These have now been uploaded to YouTube and are ready to be made public whenever we launch.

Cleop · 2018-01-03T11:42:49Z

@iteles - are you happy to close this? Putting the videos live on YT is a checkbox on issue #43

Cleop added enhancement priority-4 labels May 22, 2017

nelsonic added priority-1 and removed priority-4 labels May 27, 2017

iteles added the dependency label Jun 3, 2017

iteles mentioned this issue Jun 5, 2017

Test and record test in Internet Explorer #40

Open

nelsonic mentioned this issue Jun 9, 2017

Tidy Up & Prepare for Public Tweet/Hacker News Post #43

Open

11 tasks

Cleop added question discuss and removed dependency labels Jun 15, 2017

nelsonic mentioned this issue Jun 26, 2017

Screencast for UI Automation testing dwyl/learn-apple-watch-development#40

Open

6 tasks

Cleop mentioned this issue Jun 28, 2017

Formats for tutorials and screencasts dwyl/video#32

Open

Cleop mentioned this issue Jul 11, 2017

Video Intro for Tutorials dwyl/video#34

Open

4 tasks

Cleop assigned nelsonic, sohilpandya, iteles and ghost Jul 13, 2017

nelsonic removed their assignment Jul 29, 2017

nelsonic unassigned sohilpandya, iteles and ghost Jul 29, 2017

nelsonic assigned Cleop Jul 29, 2017

Cleop mentioned this issue Aug 31, 2017

Video to accompany this repo dwyl/learn-elixir#63

Open

Cleop mentioned this issue Sep 12, 2017

GitHub Process Videos for POs dwyl/process-handbook#58

Open

Cleop added the please-test label Jan 3, 2018

Cleop assigned iteles and unassigned Cleop Jan 3, 2018

iteles closed this as completed Jan 14, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create Video introduction to Tachyons Bootstrap #9

Create Video introduction to Tachyons Bootstrap #9

Cleop commented May 22, 2017

iteles commented Jun 3, 2017

iteles commented Jun 3, 2017

Cleop commented Jun 15, 2017 •

edited

Loading

Cleop commented Jun 26, 2017 •

edited

Loading

Cleop commented Jun 27, 2017 •

edited

Loading

Cleop commented Jun 27, 2017 •

edited

Loading

Cleop commented Jul 13, 2017 •

edited

Loading

nelsonic commented Jul 29, 2017

iteles commented Jul 29, 2017

Cleop commented Jan 3, 2018

Cleop commented Jan 3, 2018

Create Video introduction to Tachyons Bootstrap #9

Create Video introduction to Tachyons Bootstrap #9

Comments

Cleop commented May 22, 2017

iteles commented Jun 3, 2017

iteles commented Jun 3, 2017

Cleop commented Jun 15, 2017 • edited Loading

Cleop commented Jun 26, 2017 • edited Loading

Cleop commented Jun 27, 2017 • edited Loading

Cleop commented Jun 27, 2017 • edited Loading

Cleop commented Jul 13, 2017 • edited Loading

nelsonic commented Jul 29, 2017

iteles commented Jul 29, 2017

Cleop commented Jan 3, 2018

Cleop commented Jan 3, 2018

Cleop commented Jun 15, 2017 •

edited

Loading

Cleop commented Jun 26, 2017 •

edited

Loading

Cleop commented Jun 27, 2017 •

edited

Loading

Cleop commented Jun 27, 2017 •

edited

Loading

Cleop commented Jul 13, 2017 •

edited

Loading