Publish 03.site docs with video

2019-06-21 11:26:52 +03:00
parent 97a2959fe4
commit f11b5d05c4
28 changed files with 154 additions and 44 deletions
--- a/pskov/en/education.01.why.html
+++ b/pskov/en/education.01.why.html
@@ -53,6 +53,10 @@
                background: #f5f5f5;
                white-space: pre-wrap;
            }
+            video
+            {
+                width: 100%;
+            }
            .contents
            {
                background: #FFFFFF;
--- a/pskov/en/education.02.deps.html
+++ b/pskov/en/education.02.deps.html
@@ -53,6 +53,10 @@
                background: #f5f5f5;
                white-space: pre-wrap;
            }
+            video
+            {
+                width: 100%;
+            }
            .contents
            {
                background: #FFFFFF;
--- a/pskov/en/education.03.site.html
+++ b/pskov/en/education.03.site.html
@@ -53,6 +53,10 @@
                background: #f5f5f5;
                white-space: pre-wrap;
            }
+            video
+            {
+                width: 100%;
+            }
            .contents
            {
                background: #FFFFFF;
@@ -118,7 +122,8 @@ Education: 03. Site
 <li><a href="#md">04. Investigate <code>about.md</code> and <code>cv.md</code> files</a></li>
 <li><a href="#lfsa">05. Launch LFSA</a></li>
 <li><a href="#gen">06. Generate the site</a></li>
-<li><a href="#summary">07. Summary</a></li>
+<li><a href="#observe">07. Observe the site</a></li>
+<li><a href="#summary">08. Summary</a></li>
 </ul>
 <p><a name="inspiration"/></p>
 <h2 id="01inspiration">01. Inspiration</h2>
@@ -278,6 +283,11 @@ PSKOV_ITEM_CONTENTS
 <p>As you can see, there's nothing new in <code>cv.md</code> except for a Markdown table.</p>
 <p><a name="lfsa"/></p>
 <h2 id="05launchlfsa">05. Launch LFSA</h2>
+<video controls poster="../vid/education.03.site.launch-lfsa.w2k.poster.png">
+    <source src="../vid/education.03.site.launch-lfsa.w2k.mp4" type ="video/mp4">
+    <source src="../vid/education.03.site.launch-lfsa.w2k.webm" type ="video/webm">
+    ERROR Your browser does not support HTML5 video
+</video>
 <p>Launch <a href="http://opengamestudio.org/lfsa">LFSA</a> so that it points to directory with the files we just observed:</p>
 <pre><code>$ /path/to/lfsa_1.0.0.py /path/to/dir/01.TwoPages
 </code></pre>
@@ -287,18 +297,22 @@ PORT: '8000'
 </code></pre>
 <p><a name="gen"/></p>
 <h2 id="06generatethesite">06. Generate the site</h2>
-<p>Now it's finally time to generate your personal web site:</p>
-<ul>
-<li>Go to <a href="http://opengamestudio.org/pskov">Tool</a> page</li>
-<li>Make sure<ul>
-<li><code>Path</code> points to the same directory you specified before</li>
-<li><code>Input directory</code> and <code>Item template</code> have values from <code>pskov.cfg</code></li></ul></li>
-<li>Press <code>Generate</code> button to generate HTML files right where Markdown ones reside</li>
-<li>Open generated <code>about.html</code> from the site's directory</li>
-<li>You should see your web site running locally</li>
-</ul>
+<video controls poster="../vid/education.03.site.gen.w2k.poster.png">
+    <source src="../vid/education.03.site.gen.w2k.mp4" type ="video/mp4">
+    <source src="../vid/education.03.site.gen.w2k.webm" type ="video/webm">
+    ERROR Your browser does not support HTML5 video
+</video>
+<p>Go to <a href="http://opengamestudio.org/pskov">Tool</a> page and press <code>Generate</code> button to generate HTML files right where Markdown ones reside.</p>
+<p><a name="observe"/></p>
+<h2 id="07observethesite">07. Observe the site</h2>
+<video controls poster="../vid/education.03.site.observe.w2k.poster.png">
+    <source src="../vid/education.03.site.observe.w2k.mp4" type ="video/mp4">
+    <source src="../vid/education.03.site.observe.w2k.webm" type ="video/webm">
+    ERROR Your browser does not support HTML5 video
+</video>
+<p>Observe generated web site locally by opening <code>about.html</code> and switching between pages.</p>
 <p><a name="summary"/></p>
-<h2 id="07summary">07. Summary</h2>
+<h2 id="08summary">08. Summary</h2>
 <p>You have successfully generated a web site with two pages. <a href="http://opengamestudio.org/pskov/sample/01.TwoPages/about.html">Check out the result</a>.</p>
 <p>Introduced <strong>PSKOV</strong> constants include:</p>
 <table>
--- a/pskov/en/education.03.site.md
+++ b/pskov/en/education.03.site.md
@@ -22,7 +22,8 @@ Estimated completion time: 10 minutes.
 * [04. Investigate `about.md` and `cv.md` files](#md)
 * [05. Launch LFSA](#lfsa)
 * [06. Generate the site](#gen)
-* [07. Summary](#summary)
+* [07. Observe the site](#observe)
+* [08. Summary](#summary)

 <a name="inspiration"/>

@@ -175,6 +176,12 @@ As you can see, there's nothing new in `cv.md` except for a Markdown table.

 ## 05. Launch LFSA

+<video controls poster="../vid/education.03.site.launch-lfsa.w2k.poster.png">
+    <source src="../vid/education.03.site.launch-lfsa.w2k.mp4" type ="video/mp4">
+    <source src="../vid/education.03.site.launch-lfsa.w2k.webm" type ="video/webm">
+    ERROR Your browser does not support HTML5 video
+</video>
+
 Launch [LFSA][lfsa] so that it points to directory with the files we just observed:

 ```
@@ -192,19 +199,29 @@ PORT: '8000'

 ## 06. Generate the site

-Now it's finally time to generate your personal web site:
+<video controls poster="../vid/education.03.site.gen.w2k.poster.png">
+    <source src="../vid/education.03.site.gen.w2k.mp4" type ="video/mp4">
+    <source src="../vid/education.03.site.gen.w2k.webm" type ="video/webm">
+    ERROR Your browser does not support HTML5 video
+</video>

-* Go to [Tool][tool] page
-* Make sure
-    * `Path` points to the same directory you specified before
-    * `Input directory` and `Item template` have values from `pskov.cfg`
-* Press `Generate` button to generate HTML files right where Markdown ones reside
-* Open generated `about.html` from the site's directory
-* You should see your web site running locally
+Go to [Tool][tool] page and press `Generate` button to generate HTML files right where Markdown ones reside.
+
+<a name="observe"/>
+
+## 07. Observe the site
+
+<video controls poster="../vid/education.03.site.observe.w2k.poster.png">
+    <source src="../vid/education.03.site.observe.w2k.mp4" type ="video/mp4">
+    <source src="../vid/education.03.site.observe.w2k.webm" type ="video/webm">
+    ERROR Your browser does not support HTML5 video
+</video>
+
+Observe generated web site locally by opening `about.html` and switching between pages.

 <a name="summary"/>

-## 07. Summary
+## 08. Summary

 You have successfully generated a web site with two pages. [Check out the result][01-sample].

--- a/pskov/en/education.04.lang.html
+++ b/pskov/en/education.04.lang.html
@@ -53,6 +53,10 @@
                background: #f5f5f5;
                white-space: pre-wrap;
            }
+            video
+            {
+                width: 100%;
+            }
            .contents
            {
                background: #FFFFFF;
--- a/pskov/en/education.05.blog.html
+++ b/pskov/en/education.05.blog.html
@@ -53,6 +53,10 @@
                background: #f5f5f5;
                white-space: pre-wrap;
            }
+            video
+            {
+                width: 100%;
+            }
            .contents
            {
                background: #FFFFFF;
--- a/pskov/en/education.html
+++ b/pskov/en/education.html
@@ -53,6 +53,10 @@
                background: #f5f5f5;
                white-space: pre-wrap;
            }
+            video
+            {
+                width: 100%;
+            }
            .contents
            {
                background: #FFFFFF;
--- a/pskov/en/item.template
+++ b/pskov/en/item.template
@@ -53,6 +53,10 @@
                background: #f5f5f5;
                white-space: pre-wrap;
            }
+            video
+            {
+                width: 100%;
+            }
            .contents
            {
                background: #FFFFFF;