<!--#include virtual="../s5/commontop.html" -->
<title>Lecture 21: What’s Next — INFO 343 Autumn 2012</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>INFO 343 Lecture 21</h1>
<h2>What’s Next</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>What’s Next: Going Live, the Server Side</h1>
<h3>Lecture 21</h3>
<!-- <h4>
Reading: 12.1–12.2;<br/>
<a href="http://css3.bradshawenterprises.com/"><cite>Using CSS3 Transitions, Transforms, and Animation</cite></a> by Rich Bradshaw
</h4> -->
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010–11 Marty Stepp, Jessica Miller, Alex Loddengaard, Morgan Doocy.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="../s5/images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<!-- <div class="slide titleslide">
<h1>HTML5</h1>
<ul>
<li><strong>HTML5</strong></li>
<li>Next Steps: Going Live, INFO 344</li>
</ul>
</div> -->
<div class="slide">
<h1>Advanced JavaScript Syntax: <a href="http://benalman.com/news/2010/11/immediately-invoked-function-expression/">IIFEs</a></h1>
<div class="example">
<pre class="examplecode js">
var foo = 42; <span class="comment">// available globally - i.e., in other JS files too</span>
<em>(</em>function(bar, baz) {
var qux = bar + " " + baz; <span class="comment">// available locally, within this function</span>
alert(qux); <span class="comment">// alerts "Hello World" immediately</span>
}<em>)("Hello", "World")</em>;
</pre>
</div>
<ul>
<li><strong>IIFE</strong> (“iffy”) stands for <em>Immediately-Invoked Function Expression</em>
<ul>
<li>Frequently (<a href="http://benalman.com/news/2010/11/immediately-invoked-function-expression/">but erroneously</a>) called “self-executing anonymous functions”
<ul>
<li>Doesn’t execute itself! (i.e., not recursive)</li>
</ul>
</li>
</ul>
</li>
<li>Creates a one-off, throwaway, anonymous function, and executes it immediately</li>
<li>Used for creating a local scope for variables and functions, so they don’t collide with other JS code</li>
<li>Commonly used for <a href="https://github.com/SlexAxton/yepnope.js/blob/master/yepnope.js">plugins</a>, <a href="http://code.jquery.com/jquery-1.8.3.js">libraries</a>, etc.
<ul>
<li>Also a good idea to use in your own code, but usually not essential.</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Advanced JavaScript Syntax: Classes & Prototypes</h1>
<div class="example">
<pre class="examplecode js">
function Dog(name, breed) { <span class="comment">// "constructor"</span>
<em>this.name</em> = name; <span class="comment">// "public" fields</span>
<em>this.breed</em> = breed;
<em>var barkCount = 0;</em> <span class="comment">// "private" field</span>
this.bark = function() { <span class="comment">// instance method - each Dog has own copy of this method</span>
<em>barkCount++;</em> <span class="comment"> // "closure" - can access variables from parent function's scope</span>
alert("Woof!");
};
this.getBarkCount = function() {
alert(this.name + " has barked " + <em>barkCount</em> + " time(s).");
};
}
<em>Dog.prototype.call</em> = function() { <span class="comment">// class method - all Dogs use this single method</span>
alert("Here, " + this.name + "! Good dog.");
};
var maisie = <em>new Dog("Maisie", "German Shorthaired Pointer")</em>;
maisie.call(); <span class="comment">// "Here, Maisie! Good dog."</span>
maisie.bark(); <span class="comment">// "Woof!"</span>
maisie.bark(); <span class="comment">// "Woof!"</span>
maisie.getBarkCount(); <span class="comment">// "Maisie has barked 2 time(s)."</span>
</pre>
</div>
</div>
<div class="slide">
<h1>Your own (free) web hosting</h1>
<ul>
<li>At some point your account on <code>info343.ischool.uw.edu</code> will go away</li>
<li>Migrate now to host your assignments for resumes, portfolios, etc.</li>
<li>iSchool students: <a href="https://ischool.uw.edu/technology/web-hosting/student">free professional web hosting</a>!
<ul>
<li>Can host own domain, e.g. <samp>morgandoocy.com</samp></li>
<li>“One-click” install of tools like Drupal, WordPress</li>
<li>Easy cPanel interface</li>
<li>Lots of software options: PHP, Python, Ruby/Rails, Perl, MySQL, PostgreSQL, git, Mercurial, etc.</li>
</ul>
</li>
<li>Everyone else: <a href="http://www.washington.edu/itconnect/web/publishing/">set up Dante web space</a>
<ul>
<li>Cannot host own domain – located at <samp>http://students.washington.edu/<var>your_uwnetid</var>/</samp></li>
<li>Less easy to use</li>
<li>Limited existing software installed</li>
<li>Difficult to install other software like MySQL</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Your own (paid) web hosting</h1>
<ul>
<li>Hosting is a cheap commodity!</li>
<li>Look for reputable, reliable providers with good customer service, uptime, and data security</li>
<li>
<p>Major types of hosting:</p>
<ol>
<li>Shared: you share a server machine with other websites.</li>
<li>Dedicated: you have your own server machine(s).</li>
<li>Colocated: you rent or buy server space and/or maintenance, with physical access.</li>
<li>Virtual Private Server (VPS): Your own virtual “sandbox” on a larger shared machine/cloud service.</li>
</ol>
</li>
<li>Often offer tiered pricing based on bandwidth</li>
<li>Start small, upgrade as needed</li>
</ul>
</div>
<div class="slide">
<h1>Protecting Your Assignments</h1>
<ul>
<li><strong>ALWAYS password-protect your solutions to homework assignments!</strong>
<ul>
<li>Labs, Mini-Labs, and Projects can be freely posted unprotected.</li>
</ul>
</li>
<li>To protect a directory:
<ul>
<li>Add a file called <samp>.htaccess</samp> containing the following:
<pre class="boxed">AuthUserFile .htpasswd
AuthGroupFile /dev/null
AuthName EnterPassword
AuthType Basic
require user <var>USERNAME</var>
</pre>
</li>
<li>Then use a <a href="http://www.htaccesstools.com/htpasswd-generator/"><samp>.htpasswd</samp> generation tool</a> to generate a password digest, and put it in a file called <samp>.htpasswd</samp> in the same directory:
<pre class="boxed"><var>USERNAME</var>:<var>ENCRYPTEDPASSWORD</var></pre>
</li>
<li>Give the username/password to friends (who won’t take this class), family, employers.</li>
</ul>
</li>
</ul>
</div>
<!-- <div class="slide">
<h1>Getting Ajax to work</h1>
<ul>
<li>Ajax requests can only be made to the same domain as the JS code.</li>
<li>When you move your code, you may have Ajax requet</li>
<li>If you put your work up on Dante, your Ajax code will be unable to reach Webster!</li>
<li>Solution: Put <a href="../proxy.php">proxy.php</a> in the same folder as your Dante code, and change any Ajax URLs
<ul>
<li>from: <code>http://webster.cs.washington.edu/<var>dir</var>/<var>file.ext</var></code></li>
<li>to: <code><strong>proxy.php?url=</strong>http://webster.cs.washington.edu/<var>dir</var>/<var>file.ext</var></code></li>
<li>if URL has parameters, encode the query string with JS <a href="http://www.w3schools.com/jsref/jsref_escape.asp"><code>escape</code></a> function</li>
</ul>
</li>
</ul>
</div> -->
<!-- <div class="slide">
<h1>MySQL on dante</h1>
<ul>
<li>
<a href="http://www.washington.edu/computing/web/publishing/mysql-installed.html">How to use MySQL on Dante</a>
<ul>
<li>
or, if that doesn't work, <a href="http://www.washington.edu/computing/web/publishing/mysql-install.html">install it yourself</a>
</li>
</ul>
</li>
<li>
download our databases:
<a href="http://www.cs.washington.edu/education/courses/cse190m/08sp/databases/simpsons.sql">simpsons.sql</a>,
<a href="http://www.cs.washington.edu/education/courses/cse190m/08sp/databases/world.sql">world.sql</a>,
<a href="http://www.cs.washington.edu/education/courses/cse190m/08sp/databases/imdb_small.sql">imdb_small.sql</a>,
<a href="http://www.cs.washington.edu/education/courses/cse190m/08sp/databases/imdb.sql">imdb.sql</a>
</li>
<li>importing a database into MySQL from a file:
<ul>
<li>
upload one of the above <code>.sql</code> files to your Dante space
</li>
<li>
open an SSH terminal window on Dante and type:
</li>
</ul>
<pre>
mysql -u <var>username</var> -p <var>databaseName</var> < <var>filename</var>.sql
</pre>
</li>
<li>exporting a database from MySQL to a <code>.sql</code> file:
<pre>
mysqldump -u <var>username</var> -p <var>databaseName</var> > <var>filename</var>.sql
</pre>
</li>
</ul>
</div> -->
<div class="slide">
<h1>Setting up your own web server</h1>
<ul>
<li>Install web/database servers on your laptop or desktop for development (“localhosting”)
<ul>
<li>Most operating systems come with software built-in (IIS on Windows, Apache on Mac/Linux)</li>
<li>Or you can install a <a href="http://en.wikipedia.org/wiki/LAMP_(software_bundle)">LAMP</a>–style bundle: <a href="http://www.mamp.info/en/index.html">MAMP</a>, <a href="http://sourceforge.net/projects/xampp/">XAMPP</a>, <a href="http://www.wampserver.com/en/">WAMP</a>, …
<ul>
<li><u>L</u>inux/<u>M</u>ac/<u>W</u>indows · <u>A</u>pache · <u>M</u>ySQL · <u>P</u>HP/<u>P</u>erl/<u>P</u>ython</li>
</ul>
</li>
</ul>
</li>
<li>With <a href="http://en.wikipedia.org/wiki/Dynamic_DNS">Dynamic DNS</a>, you can even host (unreliably) from home
<ul>
<li>(If your ISP doesn’t block incoming web traffic)</li>
</ul>
</li>
</ul>
<ul>
<li>Why?
<ul>
<li>Test your web apps locally without needing to upload them to a server</li>
<li>Host your own projects from your house and connect to them</li>
<li>Other useful services: SSH, VNC, SMB (Samba), git/svn repos, ...</li>
</ul>
</li>
<li>How?
<ul>
<li>Linux: <a href="http://www.howtoforge.com/perfect_setup_ubuntu704">Ubuntu (LAMP) server tutorial</a></li>
<li>Windows: <a href="http://www.expertsrt.com/tutorials/Matt/install-apache.html">Apache (WAMP) tutorial</a>; <a href="http://www.2000trainers.com/iis-web-server-on-windows-xp/setting-up-a-windows-xp-web-server-with-iis/">IIS tutorial</a></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Revisiting homework assignments & labs</h1>
<ul>
<li>Extensions to the assignments from this course:
<ul>
<li>HW1,2: Pick other web sites and try to mimic them</li>
<li>HW3 (Fontr): Add other features to this tool; work on your interaction design skills</li>
<li>HW4 (Memory): Implement some of the extra features to make it a more realistic-looking experience</li>
<li>Lab 5 (Lightbox): Incorporate this into your next project! Add features like transitions, captions, comments…</li>
<li>Lab 10 (Mobile Twitter): Extend functionality to implement a full mobile twitter site based on jQuery Mobile</li>
<li>Mini-Lab 7 (Catch Me If You Can): Add CSS3 Animations to refine animations and create fun game</li>
</ul>
</li>
<li>Test your assignments in IE(6?), Opera, Safari, etc.
<ul>
<li>Use Modernizr/yepnope and polyfills to fill holes in browser support</li>
</ul>
</li>
<li>Revise your code using scoresheet feedback
<ul>
<li>It can be VERY useful learning/ego exercise to revise old code!</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Further Learning</h1>
<div class="rightfigure" style="width: 200px">
<a href="http://javascript.crockford.com/">
<img src="images/crockford.jpg" alt="Douglas Crockford" />
</a>
</div>
<ul>
<li>Read <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, <a href="http://www.alistapart.com">A List Apart</a> articles</li>
<li><a href="http://developer.yahoo.com/yui/theater/">Yahoo! web developer videos</a></li>
<li>More Javascript
<ul>
<li>Learn to write classes/objects in Javascript (tutorial <a href="http://www.howtocreate.co.uk/tutorials/javascript/objects">#1</a>, <a href="http://chunkysoup.net/advanced/oojavascript1/">#2</a>)</li>
<li>
Learn other JS libraries such as <a href="http://code.google.com/apis/ajaxsearch/">Google Ajax Search API</a> <!-- (<a href="http://www.cs.washington.edu/education/courses/cse190m/08sp/lectures/slides/lecture18.5-google_ajax_api.html">slides</a>) -->,
<a href="http://developer.yahoo.com/yui/">Yahoo! UI</a>, or <a href="http://prototypejs.org/">Prototype</a>
</li>
</ul>
</li>
<li>
Macromedia Flash (whose ActionScript syntax is based on the same language as JavaScript):
<a href="http://www.w3schools.com/Flash/default.asp">tutorial 1</a>,
<a href="http://www.echoecho.com/flash.htm">tutorial 2</a>,
<a href="http://www.adobe.com/support/flash/tutorial_index.html">tutorial 3</a>
</li>
<!-- <li>
topics we didn't have time to cover:
<ul>
<li>
<a href="http://www.cs.washington.edu/education/courses/cse190m/08sp/lectures/slides/lecture21.5-web_design.html">Web design and usability</a>
</li>
<li>
<a href="lecture29-going_live.ppt">Going "live"</a>, making a real web site with your own domain name
</li>
<li>
Embedding <a href="http://www.cs.washington.edu/education/courses/cse190m/08sp/lectures/slides/lecture12.5-multimedia.html">multimedia content</a>
(<a href="http://www.cs.washington.edu/education/courses/cse190m/07sp/homework/6-carmen_sandiego/specification/hw6-carmen_sandiego.html">old HW assignment</a>)
(<a href="http://www.cs.washington.edu/education/courses/cse190m/07sp/homework.shtml">resources</a>)
</li>
</ul>
</li> -->
<!-- <li>server-side web programming in Java
<ul>
<li>JSP / servlets (<a href="http://www.apl.jhu.edu/~hall/java/Servlet-Tutorial/">#1</a>, <a href="http://java.sun.com/products/servlet/articles/tutorial/">#2</a>)</li>
<li>applets (<a href="http://www.dgp.toronto.edu/~mjmcguff/learn/java/">#1</a>, <a href="http://java.sun.com/docs/books/tutorial/deployment/applet/index.html">#2</a>)</li>
</ul>
</li> -->
</ul>
</div>
<div class="slide">
<h1>Taking a web site "live"</h1>
<ul>
<li>
<img class="rightfigure" src="images/pagerank.png" alt="PageRank" />
buy your own domain name (e.g. morgandoocy.com):
<a href="http://www.dreamhost.com/">DreamHost</a>
</li>
<li>
learn about (stalk) your users with <a href="http://www.google.com/analytics">Google Analytics</a> <br />
<img src="images/webmastertools.png" alt="Google Webmaster Tools" />
</li>
<li>
<img class="rightfigure" src="images/acents.png" alt="sense" />
improve your page / improve <a href="http://en.wikipedia.org/wiki/PageRank">PageRank</a>:
<a href="http://en.wikipedia.org/wiki/Search_engine_optimization"><abbr title="Search Engine Optimization">SEO</abbr></a>, <a href="http://webdesign.about.com/cs/metatags/a/aa083099.htm">meta tags</a>
</li>
<li>
make a few bucks with ads: <a href="www.google.com/adsense">Google AdSense</a>
</li>
<li>
get the word out: <a href="http://adwords.google.com">Google AdWords</a>,
<a href="http://www.google.com/webmasters">Webmaster Tools</a> <br />
<img src="images/awords.png" alt="words" />
</li>
</ul>
</div>
<div class="slide">
<h1>Stuff we’ve learned this quarter</h1>
<ul>
<li>HTML, semantics</li>
<li>CSS:
<ul>
<li>fonts & colors, typography</li>
<li>layout in columns</li>
<li>“morphing” elements between block, inline, and inline-block</li>
<li>“responsive” design to adapt to screen sizes</li>
<li>absolute/relative/fixed positioning</li>
<li>transitions & animations</li>
</ul>
</li>
<li>JavaScript:
<ul>
<li>syntax quirks (like functions being values)</li>
<li>querying the DOM with jQuery</li>
<li>event handling with jQuery</li>
<li>inspecting & modifying the page with the DOM & jQuery</li>
<li>loading data using Ajax; JSON, XML, and JSONP</li>
<li>how to interact with web services</li>
<li>Google Maps API</li>
<li>mobile web development with jQuery Mobile</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Spring quarter: INFO 344</h1>
<ul>
<li>The other half of webdev!</li>
<li>Server-side programming with PHP</li>
<li>Advanced Ajax (“push” technologies)</li>
<li>Creating RESTful web services like the APIs we’re using
<ul>
<li>Apps which can save data to a web server using Ajax</li>
</ul>
</li>
<li>Creating database-driven websites with dynamic content using MySQL (building off of INFO 340, the databases course)
<ul>
<li>Learn how programs like Facebook and Twitter provide you with dynamic content!</li>
</ul>
</li>
<li>Go from designing individual pages to building a site infrastructure</li>
<li>Former 190 M/154 students: INFO 344 will have even more new material than 343(!)</li>
</ul>
</div>
<!-- <div class="slide">
<h1>Other courses you can/should take</h1>
<ul>
<li><a href="http://www.cs.washington.edu/143/">CSE 143</a> - learn more about structuring data and algorithms (if you haven't taken it yet!)</li>
<li>ENTRE 475/476 - business aspects of web development</li>
<li><a href="http://www.cs.washington.edu/373/">CSE 373</a> - implementing fundamental data structures</li>
</ul>
</div> -->
<!--#include virtual="../s5/commonbottom.html" -->