Commits

Yeuk Hon Wong committed 83d063c Draft

Added slides after the presentation. Fixed bugs.

Comments (0)

Files changed (6)

en2.htm

-<!DOCTYPE HTML>
-<html lang="en-US">
-<head>
-	<title>Shower Presentation Template</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=1274, user-scalable=no">
-	<link rel="stylesheet" href="themes/ribbon/styles/style.css">
-	<link rel="stylesheet" href="themes/ribbon/styles/print.css" media="print">
-	<!--
-		To apply styles to the certain slides
-		use slide ID to get needed elements
-		-->
-	<style>
-		#Cover h2 {
-			color:#FFF;
-			text-align:center;
-			font-size:70px;
-			}
-		#FitToWidth h2,
-		#FitToHeight h2 {
-			color:#FFF;
-			text-align:center;
-			}
-	</style>
-</head>
-<body class="list">
-	<header class="caption">
-		<h1>Shower Presentation Template</h1>
-		<p>Vadim Makeev, Opera Software</p>
-	</header>
-	<div class="slide cover" id="Cover"><div>
-		<section>
-			<header>
-				<h2>Shower Presentation Template</h2>
-			</header>
-			<img src="pictures/cover.jpg" alt="">
-		</section>
-	</div></div>
-   <div class="slide" id="3">
-    <div>
-        <section>
-            <header>
-                <h2> Hear me out </h2>
-            </header>
-        <ol>
-            <li> <strong>NO</strong> food or drink in this room! </li>
-            <li> Put your phone on vibrate </li>
-            <li> Turn off your laptop's volume </li>
-            <li> Ask me questions when you don't understand!</li>
-        </ol>
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="goals">
-    <div>
-        <section>
-           <header>
-                <h2>Goals</h2>
-           </header>
-            <p> We want to write a program to calculate total value of coins and dollar bills we have.</p>
-            <ol>
-                <li>It knows about the value of each coin and each bill.</li>
-                <li>It needs to output the total.</li>
-                <li>It asks the human for the number of coins and bills.</li>
-                <li>It should be correct and reliable.</li>
-            </ol>
-        </section>
-    </div></div>
-
-    <div class="slide shout" id="snippet1">
-    <div>
-        <section>
-           <header>
-                <h2><a href="http://pastebin.com/4BVtqzmc">dollars1.py </a>
-           </header>
-        </section>
-    </div></div>
-
-
-    <div class="slide" id="goals2">
-    <div>
-        <section>
-           <header>
-                <h2>Goals: Re-visit</h2>
-           </header>
-            <p> We want to write a program to calculate total value of coins and dollar bills we have.</p>
-            <ol>
-                <li><span style="color:grey">It knows about the value of each coin and each bill.</span></li>
-                <li><span style="color:grey">It needs to output the total.</span></li>
-                <li>It asks the human for the number of coins and bills.</li>
-                <li>It should be correct and reliable.</li>
-            </ol>
-        </section>
-    </div></div>
-
-    <div class="slide shout" id="topic1">
-    <div>
-        <section>
-            <header>
-                <h2> Binding, Names, Object</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="variables">
-    <div>
-        <section>
-            <header>
-                <h2> Variables </h2>
-            </header>
-        <center><img src="http://yozh.org/wp/wp-content/uploads/2010/10/slope_formula_bones.png" /></center>
-        <p> Fill in the blanks? </p>
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="variables-in-programming">
-    <div>
-        <section>
-            <header>
-                <h2> Variables in Programming </h2>
-            </header>
-
-        <P>The same concept from math applies in programming. Variables are names to some data. e.g an integer, a shape, or a function <mark>f(x)</mark> or even a piece of code. 
-        <br />
-        The equal sign <mark>=</mark> is usually denoted as <u>assignment</u></p>
-
-        <pre>
-            <code>penny = 0.01</code>
-            <code>nickel = 0.05</code>
-            <code>my_name = 'John Yeukhon Wong'</code>
-        </pre>
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="binding-in-python-is-dynamic">
-    <div>
-        <section>
-            <header>
-                <h2> Binding in Python is dynamic</h2>
-            </header>
-        <p>In Python, variables and data are in an open relationship. <strong>No commitment.</strong>
-        <br /> What do you think this snippet will produce? </p>
-        <pre>
-        <code>penny = 0.01</code>
-        <code>penny = "Sheldon!"</code>
-        <code><mark>print </mark></code>
-        </pre>
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="everything-in-python-is-an-object">
-    <div>
-        <section>
-            <header>
-                <h2> Everything in Python is an Object</h2>
-            </header>
-       <mark>Object</mark> is like a bio info <br />
-        <ul>
-            <li><u>identity</u> </li>e.g an id of the object
-            <li><u>type</u> </li> e.g int, float, string, list, dict, or even Person and Cat?
-            <li><u>value</u> </li> the actual data you care about (a number, a function, etc)
-        </ul>
-        </section>
-    </div>
-    </div>
-
-
-    <div class="slide" id="put-everything-together-variable">
-    <div>
-        <section>
-            <header>
-                <h2> Put everything together about variables</h2>
-            </header>
-       <u>var1.py</u>
-        <pre>
-            <code><mark>penny = 0.01</mark></code>
-            <code>penny = "Sheldon!"</code>
-            <code>print penny</code>
-        </pre>
-        <img src="images/b1.jpg" />
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="put-everything-together-variable2">
-    <div>
-        <section>
-       <u>var1.py</u>
-        <pre>
-            <code>penny = 0.01</code>
-            <code><mark>penny = 'GANGNAM STYLE? YEP!</mark></code>
-            <code>print penny</code>
-        </pre>
-        <img src="images/b2.jpg" />
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="remark-on-variables">
-    <div>
-        <section>
-            <header>
-                <h2> Remarks on variables</h2>
-            </header>
-        <p>The variable <mark>penny</mark> is used to bind to a string later on, and the name just sucks. Good programmers use good names. In this case, just give a new variable. Variables are so cheap ... </p>
-        <pre>
-        <code>penny = 0.01</code>
-        <code>gangnam_text = 'GANGNAM STYLE? YEP!</code>
-        </pre>
-        </section>
-    </div>
-    </div>
-
-    <div class="slide shout" id="data-type-cover">
-    <div>
-        <section>
-            <header>
-                <h2>built-in data types</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="how-data-type">
-    <div>
-        <section><header>
-            <h2>Python knows a lot about human</h2>
-        </header>
-        </section>
-    </div></div>
-
-    <div class="slide shout" id="number-cover">
-    <div>
-        <section>
-            <header>
-                <h2>numbers</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-
-    <div class="slide" id="numbers-data-type">
-    <div>
-        <section>
-            <header>
-                <h2> Numbers</h2>
-            </header>
-       <p>In Python there are four main built-in numberic types:
-        <ul>
-            <li>int</li>
-            <li>float</li>
-            <li>long</li>
-            <li>complex</li>
-        </ul>
-        </p>
-       </section>
-    </div>
-    </div>
-
-    <div class="slide" id="numbers-int">
-    <div>
-        <section>
-            <header>
-                <h2> Numbers: <mark>int</mark></h2>
-            </header>
-    <pre>
-        <code>number1 = 10</code>
-    </pre>
-    <p class="note">number1 now binds to an integer 10</p>
-    <pre>
-        <code><mark>type</mark>(number1)</code>
-        <code>&lt;type 'int'&gt;</code>
-    </pre>
-    <p class="note">The <i>type</i> function tells us the type of object number1 points to.</p>
-       </section>
-    </div>
-    </div>
-
-    <div class="slide" id="numbers-float-long">
-    <div>
-        <section>
-            <header>
-                <h2> Numbers: <mark>float</mark> and <mark>long</mark></h2>
-            </header>
-    <pre>
-        <code>number2 = 3.14</code>
-    </pre>
-    <p class="note">number2 now binds to a real number 3.14 <br /> <mark>float</mark> is basically a real number.</p>
-    <pre>
-        <code>number3 = 10343435129232</code>
-    </pre>
-    <p class="note">Long integers will use <mark>long</mark>.</p>
-    </section>
-    </div>
-    </div>
-
-    <div class="slide shout" id="string-cover">
-    <div>
-        <section>
-            <header>
-                <h2>strings</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-
-    <div class="slide" id="strings">
-    <div>
-        <section>
-            <header>
-                <h2> String </h2>
-            </header>
-    <pre>
-        <code> <mark>'</mark>This is a string<mark>'</mark> </code>
-        <code> <mark>"</mark>I use double quote<mark>"</mark> </code>
-    </pre>
-    <p class="note"> Strings are defined either with single or double quotes</p>
-    <pre>
-        <code><mark>"""</mark> Hello, <br \>   Second line <mark>"""</mark></code>
-   </pre>
-    <p class="note"> We can use the triple code for multi-line text</p>
-    
-    </section>
-    </div>
-    </div>
-
-    <div class="slide shout" id="bool-cover">
-    <div>
-        <section>
-            <header>
-                <h2>boolean values</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-
-    <div class="slide" id="boolean-true">
-    <div>
-        <section>
-            <header>
-                <h2> Boolean: True </h2>
-            </header>
-    <p> <strong>True</strong> if it is: <br />
-            <ul>
-            <li>True</li>
-            <li>1</li>
-            <li>Any number other than 0</li>
-            <li>an object's value is not <mark>None</mark> or <mark>False</mark></li>
-            </ul>
-    </p>
-   </section>
-    </div>
-    </div>
-
-
-    <div class="slide" id="boolean-false">
-    <div>
-        <section>
-            <header>
-                <h2> Boolean: False </h2>
-            </header>
-    <p> <strong>False</strong> if it is: <br />
-            <ul>
-            <li>False</li>
-            <li>0</li>
-            <li>any object has a value <mark>None</mark></li>
-            </ul>
-    </p>
-   </section>
-    </div>
-    </div>
-
-    <div class="slide shout" id="none-cover">
-    <div>
-        <section>
-            <header>
-                <h2>None ...</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="none-value">
-    <div>
-        <section>
-            <header>
-                <h2> None</h2>
-            </header>
-    <p>This is a bit advance but usually you see a <mark>None</mark> which is a <mark>NoneType</mark> when a function returns no value expliclity (whether it's a number, a string, a boolean, or even some complex object). </p>
-    <p><mark>None</mark> is considered a <mark>False</mark> value</p>
-
-   </section>
-    </div>
-    </div>
-
-<div class="slide shout" id="expression">
-    <div>
-        <section>
-            <header>
-                <h2> expression</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-<div class="slide" id="expression-1">
-    <div>
-        <section>
-            <header>
-                <h2> Python expression </h2>
-            </header>
-        <p> Anything that is reduced to a value and no side-effect (simplified version).</p>
-    <pre>
-        <code>0.01</code>
-        <code>pennies * penny</code>
-        <code>pennies * penny + nickels * nickel</code>
-        <code><mark>total = pennis * penny + .... hundreds * hundred </mark></code>
-    </pre>
-    <p class="note">The last one is <strong>NOT</strong> an expression.</p>
-</section>
-</div>
-</div>
-
-
-<div class="slide shout" id="statement">
-    <div>
-        <section>
-            <header>
-                <h2>statement</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-<div class="slide" id="statement-1">
-    <div>
-        <section>
-            <header>
-                <h2> Python statement </h2>
-            </header>
-        <p> A statement is basically anything that does something and cause side effect. </p>
-        <pre>
-        <code>penny= 0.01</code>
-        <code>total = pennis * penny + .... hundreds * hundred</code>
-        <code>var1 = 'hello'</code>
-        <code>if var1 == 'hello': <br />    print 'var1 is hello'</code>
-        </pre>
-        <p class="note">Line #1 is a statement, a.k.a assignment statement. <br \>Line #2 is another assignment statement made up of a bunch of arihemtic expressions. <br \>Line #3 and #4 are a block of statement a.k.a logical statements.</p>
-</div>
-</div>
-
-<div class="slide shout" id="revisit-dollars-cover">
-    <div>
-        <section>
-            <header>
-                <h2> <a href="http://pastebin.com/4BVtqzmc">dollars.py</a></h2>
-            </header>
-        <p>Is this really correct?</p>
-        </section>
-    </div>
-    </div>
-
-<div class="slide shout" id="assert-cover">
-<div>
-    <section>
-    <header><h2> assert </h2></header></section></div></div> 
-<div class="slide" id="assert-slide">
-<div><section><header><h2>Use <mark>assert</mark></h2></header>
-<pre><code>assert total == 101.25</code></pre>
-<p class="note"><mark>assert</mark> tests whether the logical expression is True or False. It fails if the logical expression fails.</p>
-<p>In general, you should always test your code all the time. <mark>assert</mark> is not the way to test your code. I will show you in the workshop how to use <mark>unittest</mark>.</p>
-</div></div>
-
-        <div class="slide" id="assert-slide2">
-        <div><section><header><h2>Use <mark>assert</mark></h2></header>
-        <pre><code>assert not not total == 101.25</code>
-            <code>assert total &lt;= 101.25</code></pre>
-        <p class="note">Which one of them will fail the <mark>assert</mark> test?</p>
-		</div></div>
-
-<div class="slide shout" id="decision-cover">
-    <div>
-        <section>
-            <header>
-                <h2> if ... </h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="if">
-    <div>
-        <section>
-            <header>
-                <h2> if</h2>
-            </header>
-        <pre>
-            <code><mark>if</mark> &lt;expression&gt;<mark>:</mark></code>
-            <code>   do_stuff</code>
-        </pre>
-        <p class="note"><i>expression</i> could be any valid Python expression.</p>
-        <pre>
-        <code>if <mark>var1 == 'hello'</mark>: <br />    print 'var1 is hello'</code>
-        </pre>
-        <p class="note">The comparison <mark>var1 == 'hello'</mark> evaluates to a value so that's an expression.</p>
-   </section>
-    </div>
-    </div>
-
-<div class="slide shout" id="if-else-cover">
-    <div>
-        <section>
-            <header>
-                <h2> if ... else ...</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-
-    <div class="slide" id="if-else">
-    <div>
-        <section>
-            <header>
-                <h2> if-else </h2>
-            </header>
-        Sometimes we want either case to happen. <mark>else</mark> is usually used as default case.
-        <pre>
-            <code><mark>if</mark> &lt;expression&gt;<mark>:</mark></code>
-            <code>   do_stuff</code>
-            <code><mark>else:</mark></code>
-            <code>   do_something_else</code>
-      </pre>
-   </section>
-    </div>
-    </div> 
-
-<div class="slide shout" id="if-elif-else-cover">
-    <div>
-        <section>
-            <header>
-                <h2> if ... elif ... else ...</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="if-elif-else">
-    <div>
-        <section>
-            <header>
-                <h2> if-elif-else </h2>
-            </header>
-        Very often we have more than two decisions to make.
-        <pre>
-            <code><mark>if</mark> &lt;expression&gt;<mark>:</mark></code>
-            <code>   do_stuff</code>
-            <code><mark>elif</mark> &lt;expression&gt;<mark>:</mark></code>
-            <code>   do_something_2</code>
-            <code><mark>else:</mark></code>
-            <code>   do_something_else</code>
-      </pre>
-   </section>
-    </div>
-    </div>
-
-    <div class="slide" id="if-elif-else-2">
-    <div>
-        <section>
-            <header>
-                <h2> if-elif-else </h2>
-            </header>
-        <pre>
-            <code>position = get_curr_position(my_map)</code>
-            <code>if position == 1:</code>
-            <code>   print 'Position is at 1'</code>
-            <code>elif position == 2:</code>
-            <code>   print 'Position is at 2'</code>
-            <code>else:</code>
-            <code>   print 'current position is at :', position</code>
-      </pre>
-   </section>
-    </div>
-    </div>
-
-<div class="slide shout" id="comparison-operators">
-    <div>
-        <section>
-            <header>
-                <h2> &lt;, &gt; ==, !=, not</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="comparison-operatiors2">
-    <div>
-        <section>
-      <pre>
-      <code>1 &lt; 2</code>
-      </pre>
-      <p class="note"> 1 is less than 2 <strong>True</strong></p>
-      <pre>  <code>1 &gt; 2</code>
-     </pre>
-        <p class="note"> 1 is greater than 2 <strong>False</strong></p>
-     <pre><code>1 &lt;= 2</code></pre>
-        <p class="note">1 is less than or equal to 2 <strong>True</strong></p>
-     <pre><code>2 &gt;= 1</code></pre>    
-        <p class="note">2 is greater than or equal to 1 <strong>True</strong></p>     
-   </section>
-    </div>
-    </div>
-
-
-    <div class="slide" id="comparison-operatiors3">
-    <div>
-        <section>
-    Negation is achieved either by <mark>~</mark> or <mark>not</mark> keyword.
-      <pre>
-      <code>1 != 2</code>
-      </pre>
-      <p class="note"> 1 is not equal to 2 <strong>True</strong>. But instead, I want it to be False :)</p>
-     <pre>
-     <code><mark>~</mark> 1 != 2</code>
-     <code><mark>not</mark> 1 != 2</code>
-     </pre>
-    <p class="note"> Python developers use <mark>not</mark> which is more Pythonic!</p>
-   </section>
-    </div>
-    </div>
-
-    <div class="slide" id="comparison-operatiors4">
-    <div>
-        <section>
-    <mark>is</mark> <br />
-    <pre>
-        <code>object1 is object2</code>
-        <code>2-1 is                   # returns True</code>
-        <code>'twenty' is 'twenty'     # returns True??</code>
-        <code>['1'] is ['1']           # returns False</code>
-        <code>'twe' <mark>is in</mark> 'twenty'    # returns True</code>
-        <code>object1 is not object2</code>
-    </pre>
-    Looks innocent but it's actually advance. If time allowed I can explain it.
-    </div>
-    </div>
-        <div class="slide" id="assert-slide-come-back">
-        <div><section><header><h2>Use <mark>assert</mark>: re-visit</h2></header>
-        <pre><code>assert not not total == 101.25</code>
-            <code>assert total &lt;= 101.25</code></pre>
-        <p class="note">Now are you sure they will both return True?</p>
-        </div></div>
-
-    <div class="slide" id="goals2-again">
-    <div>
-        <section>
-           <header>
-                <h2>Goals: Re-visit again</h2>
-           </header>
-            <p> We want to write a program to calculate total value of coins and dollar bills we have.</p>
-            <ol>
-                <li><span style="color:grey">It knows about the value of each coin and each bill.</span></li>
-                <li><span style="color:grey">It needs to output the total.</span></li>
-                <li>It asks the human for the number of coins and bills.</li>
-                <li><span style="color:grey">It should be correct and reliable.</span></li>
-            </ol>
-        </section>
-    </div></div>
-
-<div class="slide shout" id="stop-1">
-    <div>
-        <section>
-            <header>
-                <h2> Q&A</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-<div class="slide shout" id="input-cover">
-    <div>
-        <section>
-            <header>
-                <h2> input </h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-<div class="slide" id="input1">
-    <div>
-        <section>
-            <header>
-                <h2> raw_input</h2>
-            </header>
-		<pre><code>usr_input = <mark>raw_input</mark>("Tells user what you want them to enter: ")</code></pre>
-		<p class="note"><mark>raw_input</mark> is a function that accepts user input from the keyboard. No evaluation. Keeps it as a string. It's safe</p>
-        </section>
-    </div>
-    </div>
-
-<div class="slide" id="input2">
-    <div>
-        <section>
-            <header>
-                <h2> input:</h2>
-            </header>
-        <pre><code>input = <mark>raw_input</mark>("Tells user what you want them to enter: ")</code></pre>
-        <p class="note"><mark>input</mark> is a function that accepts user input from the keyboard but tries to convert the input into some data types. <br /> e.g. converts '1' to <mark>&lt;int&gt;</mark>. Security alarm!</p>
-        </section>
-    </div>
-    </div>
-
-    <div class="slide" id="goals3-again">
-    <div>
-        <section>
-           <header>
-                <h2>Goals: Re-visit again</h2>
-           </header>
-            <p> So can somebody get user input for all the coins and bills using what we've learned so far?</p>
-            <ol>
-                <li><span style="color:grey">It knows about the value of each coin and each bill.</span></li>
-                <li><span style="color:grey">It needs to output the total.</span></li>
-                <li>It asks the human for the number of coins and bills.</li>
-                <li><span style="color:grey">It should be correct and reliable.</span></li>
-            </ol>
-        </section>
-    </div></div>
-<div class="slide shout" id="dollars.py">
-    <div>
-        <section>
-            <header>
-                <h2> dollars.py</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-<div class="slide shout" id="while">
-    <div>
-        <section>
-            <header>
-                <h2> while </h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-<div class="slide" id="while-1">
-    <div>
-        <section>
-            <header>
-                <h2> while  </h2>
-            </header>
-		<p>This program only run once. What if the user is helping the whole class counting? You have multiple batches! </p>
-		<pre>
-		<code><mark>while</mark> &lt;expression&gt;<mark>:</mark></code>
-		<code>    do_something</code>
-		</pre>
-		<p class="note">This thing will run as long as <mark>expression</mark> is True.</p>
-        </section>
-    </div>
-    </div>
-
-<div class="slide" id="while-2">
-    <div>
-        <section>
-            <header>
-                <h2> while: cont' </h2>
-            </header>
-        <pre>
-		<code>total = 0</code>
-        <code>while total &lt;=0:</code>
-        <code>    print 'dude. your total is zero. try again.'</code>
-		<code>    total = int(raw_input('Enter a total: '))</code>
-        </pre>
-        <p class="note">Someone try to walk through this code?</p>
-        </section>
-    </div>  
-    </div>
-
-<div class="slide" id="for-2">
-    <div>
-        <section>
-            <header>
-                <h2> for  </h2>
-            </header>
-        <pre>
-        <code><mark>for</mark> &lt;expression-a&gt;<mark>in</mark> &lt;expression-b&gt; <mark>:</mark></code>
-        <code>    do_something</code>
-        </pre>
-        <p class="note">This will <strong>iterate</strong> as long as we haven't exhausted all items in <mark>expression-b</mark></p>
-        
-		<pre>
-		<code>for num in [1,2,3,5]:</code>
-		<code>    print num</code>
-		</pre>
-		<p class="note"><mark>[1,2,3,5]</mark> is called a <mark>list</mark>. You can put anything you want in there.</p>
-		</section>
-    </div>
-    </div>
-
-<div class="slide shout" id="dollars3.py">
-    <div>
-        <section>
-            <header>
-                <h2> <a href="http://pastebin.com/raw.php?i=0D32H94q">dollars3.py</a></h2>
-            </header>
-        </section>
-    </div>
-    </div>
-<div class="slide" id="dollars3.py-2">
-    <div>
-        <section>
-            <header>
-                <h2> dollar3.py</h2>
-            </header>
-		<pre><code>while True:</code></pre>
-		<p class="note">What's the problem?</p>
-        </section>
-    </div>
-    </div>
-
-<div class="slide shout" id="dollars4.py">
-    <div>
-        <section>
-            <header>
-                <h2> <a href="http://pastebin.com/raw.php?i=pYcFY4KG">dollars4.py</a></h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-
-<div class="slide shout" id="stop-2">
-    <div>
-        <section>
-            <header>
-                <h2> Q&A</h2>
-            </header>
-        </section>
-    </div>
-    </div>
-
-    <div class="progress"><div></div></div>
-    <script src="scripts/script.js"></script>
-    <!-- Template provided by Vadim Makeev — pepelsbey.net -->
-    <!-- Modified by John Yeukhon Wong  -->
-</body>
-</html>
-
-

images/b1.png

Added
New image

images/b2.png

Added
New image

ru.htm

-<!DOCTYPE HTML>
-<html lang="ru-RU">
-<head>
-	<title>Шаблон презентаций Shower</title>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=1274, user-scalable=no">
-	<link rel="stylesheet" href="themes/ribbon/styles/style.css">
-	<link rel="stylesheet" href="themes/ribbon/styles/print.css" media="print">
-	<!--
-		Для оформления отдельный слайдов, используйте
-		ID слайда для доступа к необходимым элементам
-		-->
-	<style>
-		#Cover h2 {
-			color:#FFF;
-			text-align:center;
-			font-size:70px;
-			}
-		#FitToWidth h2,
-		#FitToHeight h2 {
-			color:#FFF;
-			text-align:center;
-			}
-	</style>
-</head>
-<body class="list">
-	<header class="caption">
-		<h1>Шаблон презентаций Shower</h1>
-		<p>Вадим Макеев, Opera Software</p>
-	</header>
-	<div class="slide cover" id="Cover"><div>
-		<section>
-			<header>
-				<h2>Шаблон презентации Shower</h2>
-			</header>
-			<img src="pictures/cover.jpg" alt="">
-		</section>
-	</div></div>
-	<div class="slide" id="Header"><div>
-		<section>
-			<header>
-				<h2>Заголовок</h2>
-			</header>
-			<p>Очередь <code>заведено</code> создаете <strong>те про,</strong> джоэл должен написано вы всю. Получаете отказаться программистов миф мы, <em>не пишете размере</em> количества нее, по две.</p>
-			<p><a href="examples/index.htm" target="_blank">Эта ссылка откроется в новом окне</a></p>
-		</section>
-	</div></div>
-	<div class="slide" id="TwoLinesHeader"><div>
-		<section>
-			<header>
-				<h2>Две строки.<br>Мощный заголовок</h2>
-			</header>
-			<p>Очередь <code>заведено</code> создаете <strong>те про,</strong> джоэл должен написано вы всю. Получаете отказаться программистов миф мы, <em>не пишете размере</em> количества нее, по две.</p>
-		</section>
-	</div></div>
-	<div class="slide" id="UnorderedList"><div>
-		<section>
-			<header>
-				<h2>Неупорядоченный список</h2>
-			</header>
-			<ul>
-				<li>Очередь заведено создаете</li>
-				<li>Те про, джоэл должен написано вы всю</li>
-				<li>Получаете отказаться программистов
-					<ol>
-						<li>Миф мы, не пишете размере</li>
-						<li>Количества нее, по две</li>
-						<li>Заведено безостановочно</li>
-					</ol>
-				</li>
-				<li>Ещё то этой вреде внешних.</li>
-			</ul>
-		</section>
-	</div></div>
-	<div class="slide" id="OrderedList"><div>
-		<section>
-			<header>
-				<h2>Упорядоченный список</h2>
-			</header>
-			<ol>
-				<li>Миф мы, не пишете размере</li>
-				<li>Ещё то этой вреде внешних</li>
-				<li>Заведено безостановочно
-					<ul>
-						<li>Очередь заведено создаете</li>
-						<li>Те про, джоэл должен написано вы всю</li>
-						<li>Получаете отказаться программистов</li>
-					</ul>
-				</li>
-				<li>Количества нее, по две</li>
-			</ol>
-		</section>
-	</div></div>
-	<div class="slide" id="InTheMiddle"><div>
-		<section>
-			<header>
-				<h2>Посередине</h2>
-			</header>
-			<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512" class="middle">
-				<path fill="#0174A7" d="m315 259l18-18 179 179v-36l-161-161 18-18 143 143v-36l-125-125 18-18 107 107v-225c0-28-23-51-51-51h-410c-28 0-51 23-51 51v410c0 28 23 51 51 51h191c17-25 14-59-8-81l-63-63-63-63c-55-55-55-145-0-199 55-55 144-55 199 0l9 7h109l-163 163v-107l-9-9c-25-25-66-25-91-0-25 25-25 66 0 91l63 63 63 63c37 37 49 89 37 135h136c28 0 51-23 51-51v-5l-197-197z"/>
-			</svg>
-		</section>
-	</div></div>
-	<div class="slide cover" id="FitToHeight"><div>
-		<section>
-			<header>
-				<h2>Вписана по высоте</h2>
-			</header>
-			<img src="pictures/picture.jpg" alt="">
-		</section>
-	</div></div>
-	<div class="slide cover w" id="FitToWidth"><div>
-		<section>
-			<header>
-				<h2>Вписана по ширине</h2>
-			</header>
-			<img src="pictures/picture.jpg" alt="">
-		</section>
-	</div></div>
-	<div class="slide" id="CodeSample"><div>
-		<section>
-			<header>
-				<h2>Пример кода</h2>
-			</header>
-			<pre>
-				<code>&lt;html lang="ru-RU"&gt;</code>
-				<code><mark>&lt;head&gt;</mark></code>
-				<code>    &lt;title&gt;Shower&lt;/title&gt;</code>
-				<code>    &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
-				<code>    &lt;link rel="stylesheet" href="s/screen.css"&gt;</code>
-				<code>    &lt;script src="j/jquery.js"&gt;&lt;/script&gt;</code>
-				<code><mark>&lt;/head&gt;</mark></code>
-			</pre>
-		</section>
-	</div></div>
-	<div class="slide" id="CodeNotes"><div>
-		<section>
-			<header>
-				<h2>Заметки к коду</h2>
-			</header>
-			<pre>
-				<code><mark>&lt;html</mark> lang="ru-RU"&gt;</code>
-			</pre>
-			<p class="note">Получаете отказаться программистов</p>
-			<pre>
-				<code><mark>&lt;meta</mark> charset="<mark>UTF-8</mark>"&gt;</code>
-			</pre>
-			<p class="note">Заведено безостановочно</p>
-		</section>
-	</div></div>
-	<div class="slide shout" id="Shout"><div>
-		<section>
-			<header>
-				<h2>Опасносте<br>сообщение</h2>
-			</header>
-		</section>
-	</div></div>
-	<div class="slide shout" id="Demo"><div>
-		<section>
-			<header>
-				<h2><a href="examples/index.htm" target="_blank">Демо</a></h2>
-			</header>
-		</section>
-	</div></div>
-	<div class="slide" id="BlockQuote"><div>
-		<section>
-			<header>
-				<h2>Цитата</h2>
-			</header>
-			<blockquote>
-				<p>Очередь заведено создаете те про, джоэл должен написано вы всю. Получаете отказаться программистов миф мы, не пишете размере количества нее, по две.</p>
-			</blockquote>
-		</section>
-	</div></div>
-	<div class="slide" id="ThankYou"><div>
-		<section>
-			<header>
-				<h2>Шаблон презентаций Shower</h2>
-			</header>
-			<p>Вадим Макеев, Opera Software</p>
-			<ul>
-				<li><a href="http://pepelsbey.net">pepelsbey.net</a></li>
-				<li><a href="http://twitter.com/pepelsbey">twitter.com/pepelsbey</a></li>
-				<li><a href="mailto:pepelsbey@gmail.com">pepelsbey@gmail.com</a></li>
-			</ul>
-			<p>Shower: <a href="http://github.com/pepelsbey/shower">github.com/pepelsbey/shower</a></p>
-		</section>
-	</div></div>
-	<!--
-		Для того, чтобы убрать индикатор прогресса
-		из презентации, просто удалите элемент «progress».
-		-->
-	<div class="progress"><div></div></div>
-	<script src="scripts/script.js"></script>
-	<!-- Copyright © 2010–2012 Vadim Makeev — pepelsbey.net -->
-	<!-- Photos by John Carey — fiftyfootshadows.net -->
-</body>
-</html>
 <!DOCTYPE HTML>
 <html lang="en-US">
 <head>
-    <title>Shower Presentation Template</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=1274, user-scalable=no">
-    <link reeseburgerl="stylesheet" href="themes/ribbon/styles/style.css">
-    <link rel="stylesheet" href="themes/ribbon/styles/print.css" media="print">
-    <!--
-        To apply styles to the certain slides
-        use slide ID to get needed elements
-        -->
-    <style>
-        #Cover h2 {
-            color:#FFF;
-            text-align:center;
-            font-size:70px;
-            }
-        #FitToWidth h2,
-        #FitToHeight h2 {
-            color:#FFF;
-            text-align:center;
-            }
-    </style>
+	<title>Introduction to Programming with Python</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=1274, user-scalable=no">
+	<link rel="stylesheet" href="themes/ribbon/styles/style.css">
+	<link rel="stylesheet" href="themes/ribbon/styles/print.css" media="print">
+	<!--
+		To apply styles to the certain slides
+		use slide ID to get needed elements
+		-->
+	<style>
+		#Cover h2 {
+			color:#FFF;
+			text-align:center;
+			font-size:70px;
+			}
+		#FitToWidth h2,
+		#FitToHeight h2 {
+			color:#FFF;
+			text-align:center;
+			}
+	</style>
 </head>
 <body class="list">
-    <header class="caption">
-        <h1>An Introduction to Programming with Python</h1>
-        <p> Yeukhon Wong, Computer Science'13, CUNY City </p>
-    </header>
-    <div class="slide cover" id="Cover">
+	<header class="caption">
+		<h1>Introduction to Programming with Python</h1>
+		<p>Yeukhon Wong, Computer Science 13', CUNY City College</p>
+        <p>Fall 2012</p>
+	</header>
+	<div class="slide" id="about-me"><div>
+		<section>
+			<header>
+				<h2>i iz a Python Chef</h2>
+			</header>
+			<p>
+                John Yeukhon Wong <br />
+                Computer Science 13"
+                <ul><li>I had Python as one of the two programming languages (Matlab) in my first semester of freshman year</li>
+                <li>My research lab is a Python shop. I use it almost everyday!</li>
+                <li>I still love C and C++. They are awesome with the right task.</li>
+                </ul>
+            </p>
+		</section>
+	</div></div>
+
+   <div class="slide" id="why-python">
     <div>
         <section>
             <header>
-                <h3> An Introuction to Programming with Python </h3>
+                <h2> Why Python? </h2>
             </header>
-            <img src="pictures/cover.jpg" alt="">         
+        <ol>
+            <li> Python is extremely popular means many free tools and libraries and big supportive community.</li>
+            <li> Python's dynamic and interpret nature makes it easy to develop software. </li>
+            <li> Major sites are built entirely or partially with Python. (Youtube is almost all Python.)</li>
+            <li> Scientists and engineers like them besides MATLAB.</li>
+        </ol>
         </section>
     </div>
     </div>
 
-
-
-    <div class="slide" id="3">
+   <div class="slide" id="python-release">
     <div>
         <section>
             <header>
-                <h2> Hear me out </h2>
+                <h2> How many Python? </h2>
             </header>
+        Python is a programming language. People implement the language using other languages. Most people should choose <mark>CPython</mark>.
         <ol>
-            <li> <strong>NO</strong> food or drink in this room! </li>
-            <li> Put your phone on vibrate </li>
-            <li> Turn off your laptop's volume </li>
-            <li> Ask me questions when you don't understand!</li>
+            <li><mark>CPython</mark> - the oldest, original Python. C-implementation. Stable and most popular. Official Python.</li>
+            <li>JPython - Java-implementation. Fast because it uses many Java cool stuff.</li>
+            <li>IronPython - .NET implementation. Its interperter is very user-friendly!</li>
+            <li>PyPy - implemented using Python, aims for ultra-speed. Less mature but growing its popularity.</li>
         </ol>
         </section>
     </div>
     </div>
 
+   <div class="slide shout" id="get-c-python">
+    <div>
+        <section>
+            <header>
+                <h2><a href="http://www.python.org/download/"> Get CPython 2.7</a> </h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+   <div class="slide" id="27-30-python">
+    <div>
+        <section>
+            <header>
+                <h2> Python 2.7 vs 3.x</h2>
+            </header>
+            <p> CPython offers 2.7.x and 3.x. <br /> Python 2.7 includes many new features in Python 3, but Python 2.7 has a good backward compatibility with the previous Python 2 releases.</p>
+            <p> Python developers usually do not upgrade to new Python. It's a tradition. Python are extremely stable.</p>
+            <mark>We stick with 2.7 in this workshop.</mark>
+        </section>
+    </div>
+    </div>
+
+   <div class="slide shout" id="real-stuff">
+    <div>
+        <section>
+            <header>
+                <h2> Real stuff ... </h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
     <div class="slide" id="goals">
     <div>
         <section>
     </div></div>
 
 
+    <div class="slide" id="comment">
+    <div>
+        <section>
+           <header>
+                <h2>that wierd # thing is called comment</h2>
+           </header>
+        <pre>
+            <code># constants - current U.S. currency values</code>
+        </pre>
+        <p class="note">Program executes sequentially. Python sees <mark>#</mark> and ignores it. It's like speaker note. It's a comment for the speaker (programmer) to look at.</p>
+        <pre>
+            <code>####### multiple # is also a comment.</code>
+            <code>#### another line of comment</code>
+            <code>penny = 0.01     <mark># the value of penny</mark></code>
+        </pre>
+        <p class="note"><mark># the value of penny</mark> is an in-line comment. It's on the same line as a code (actually, a statement). That <mark>#</mark> makes it a valid statement.</p>
+        </section>
+    </div></div>
+
     <div class="slide" id="goals2">
     <div>
         <section>
         <pre>
         <code>penny = 0.01</code>
         <code>penny = "Sheldon!"</code>
-        <code><mark>print </mark></code>
+        <code><mark>print penny</mark></code>
         </pre>
         </section>
     </div>
             <header>
                 <h2> Put everything together about variables</h2>
             </header>
-       <u>var1.py</u>
+       <u>sample code</u>
         <pre>
             <code><mark>penny = 0.01</mark></code>
             <code>penny = "Sheldon!"</code>
             <code>print penny</code>
         </pre>
-        <img src="images/b1.jpg" />
+        <img src="images/b1.png" />
         </section>
     </div>
     </div>
     <div class="slide" id="put-everything-together-variable2">
     <div>
         <section>
-       <u>var1.py</u>
+       <u>sample code</u>
         <pre>
             <code>penny = 0.01</code>
-            <code><mark>penny = 'GANGNAM STYLE? YEP!</mark></code>
+            <code><mark>penny = "Sheldon"</mark></code>
             <code>print penny</code>
         </pre>
-        <img src="images/b2.jpg" />
+        <img src="images/b2.png" />
         </section>
     </div>
     </div>
         <p>The variable <mark>penny</mark> is used to bind to a string later on, and the name just sucks. Good programmers use good names. In this case, just give a new variable. Variables are so cheap ... </p>
         <pre>
         <code>penny = 0.01</code>
-        <code>gangnam_text = 'GANGNAM STYLE? YEP!</code>
+        <code>name = "Sheldon"</code>
         </pre>
         </section>
     </div>
         <section><header>
             <h2>Python knows a lot about human</h2>
         </header>
+        <p>Every programming language offers some basic data types so programmers can build something more complex. <br />
+        <mark>data type</mark> can tell us what kind of data we can put into that object. Every object is created with a type. e.g <mark>&lt;type 'int'&gt;</mark> refers to an integer object and the data type is exactly that integer. Later on we can build a type using several different types together.</p>
         </section>
     </div></div>
 
     </div>
     </div>
 
+    <div class="slide" id="numbers-float-long-2">
+    <div>
+        <section>
+            <header>
+                <h2> Numbers: <mark>int</mark> vs <mark>long</mark></h2>
+            </header>
+    <p> Modern Python 2.x release unified <mark>int</mark> and <mark>long</mark> into <mark>long</mark>. </p>
+    <p> Python 3.x release does not have <mark>int</mark> anymore!</p>
+    <p> Python developers shouldn't care about underlying types too much! It's called <mark>duck-typing</mark>.</p>
+    </section>
+    </div>
+    </div>
     <div class="slide shout" id="string-cover">
     <div>
         <section>
     </div>
     </div>
 
+    <div class="slide" id="mult-line-comments">
+    <div>
+        <section>
+            <header>
+                <h2> String: comment re-visit </h2>
+            </header>
+    <pre>
+        <code> <mark>'</mark>This is a string<mark>'</mark> </code>
+        <code> <mark>"</mark>I use double quote<mark>"</mark> </code>
+        <code><mark>"""</mark> Hello, <br \>   Second line <mark>"""</mark></code>
+   </pre>
+    <p class="note"> We can use single, double or triple quotes as comments.</p>
+   
+    </section>
+    </div>
+    </div>
+
+    <div class="slide" id="mult-line-comments-2">
+    <div>
+        <section>
+            <header>
+                <h2> String: comment re-visit (example)</h2>
+            </header>
+    Tell me the result of <a href="http://pastebin.com/2r4JvbXS">this code</a> 
+            
+    </section>  
+    </div>  
+    </div>
+
+
+    <div class="slide" id="mult-line-comments-3">
+    <div>
+        <section>
+            <header>
+                <h2> String: comment re-visit (example)</h2>
+            </header>
+    Tell me the result of <a href="http://pastebin.com/2r4JvbXS">this code</a> 
+    <p>Why nothing happened? Because the triple quote surrounded that block of code is considered as a comment, which means the computer will ignore it when running the script.</p>
+    <p>Try replace triple quote with single quote and try with double quote. Any difference? :P </p>
+    </section>  
+    </div>  
+    </div>
+
     <div class="slide shout" id="bool-cover">
     <div>
         <section>
             <header>
                 <h2> Python statement </h2>
             </header>
-        <p> A statement is basically anything that does something and cause side effect. </p>
+        <p> A statement is anything that does something and cause side effect. </p>
         <pre>
         <code>penny= 0.01</code>
         <code>total = pennis * penny + .... hundreds * hundred</code>
     </div>
     </div>
 
-    <div class="slide" id="comparison-operatiors4">
-    <div>
-        <section>
-    <mark>is</mark> <br />
-    <pre>
-        <code>object1 is object2</code>
-        <code>2-1 is                   # returns True</code>
-        <code>'twenty' is 'twenty'     # returns True??</code>
-        <code>['1'] is ['1']           # returns False</code>
-        <code>'twe' <mark>is in</mark> 'twenty'    # returns True</code>
-        <code>object1 is not object2</code>
-    </pre>
-    Looks innocent but it's actually advance. If time allowed I can explain it.
-    </div>
-    </div>
         <div class="slide" id="assert-slide-come-back">
         <div><section><header><h2>Use <mark>assert</mark>: re-visit</h2></header>
         <pre><code>assert not not total == 101.25</code>
     </div>
 
 
+<div class="slide shout" id="thank-you">
+    <div>
+        <section>
+            <header>
+                <h2> Thank You :) </h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
 <div class="slide shout" id="stop-2">
     <div>
         <section>
     </div>
     </div>
 
+
     <div class="progress"><div></div></div>
     <script src="scripts/script.js"></script>
     <!-- Template provided by Vadim Makeev — pepelsbey.net -->

themes/ribbon/styles/style.css

 /* Lists */
 .slide ol,
 .slide ul {
-	margin:0 0 45px;
+	margin:0 0 35px;
 	counter-reset:list;
 	}
 	.slide ul ul,
 		}
 	.slide ul > li:before {
 		content:'\2022'; /* bull */
-		line-height:1.1;
+		line-height:1.0;
 		font-size:40px;
 		}
 	.slide ol > li:before {
 	margin:0 0 15px 5px;
 	counter-reset:code;
 	white-space:normal;
+    font-size: 20px;
 	}
 	.slide pre code {
 		display:block;