tag:blogger.com,1999:blog-33034091051787696622024-02-20T07:55:12.762-08:00vanburen adv webearlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.comBlogger16125tag:blogger.com,1999:blog-3303409105178769662.post-90952148423553435482008-05-08T04:50:00.001-07:002008-05-08T04:53:37.830-07:00FInal PRESENTATIONS 2Everyone, please post links to your final projects as comments to this post even if you went last week (just so its easy for me and I have all of them in one place).<br /><br /><h2>Last Week:</h2><ul><br /><li>Najlah</li><br /><li>Rashida</li><br /><li>Ara</li><br /><li>Chris</li><br /><li>Jae Hwan</li><br /><li>Tyler</li><br /></ul><br /><br /><span style="font-weight:bold;"><br />TODAY:</span><br /><ul><br /><li>Lev</li><br /><li>Miliam</li><br /><li>Yelena</li><br /><li>Andre</li><br /><li>Ji Young</li><br /></ul>earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com7tag:blogger.com,1999:blog-3303409105178769662.post-67192554465800047442008-05-01T06:08:00.000-07:002008-05-01T06:12:07.006-07:00FINAL PRESENTATIONS #1 of 2<h2>Today people, post links to your final sites in "comments"</h2><br /><br /><span style="font-weight:bold;"><br /><br />TODAY:</span><br /><ul><br /><li>Najlah</li><br /><li>Rashida</li><br /><li>Ara</li><br /><li>Chris</li><br /><li>Jae Hwan</li><br /><li>Tyler</li><br /></ul><br /><br /><span style="font-weight:bold;"><br />NEXT WEEK:</span><br /><ul><br /><li>Lev</li><br /><li>Miliam</li><br /><li>Yelena</li><br /><li>Andre</li><br /><li>Ji Young</li><br /></ul>earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com8tag:blogger.com,1999:blog-3303409105178769662.post-3916922202455437202008-04-24T06:17:00.001-07:002008-04-24T07:57:54.172-07:00Week #13post links to your html versions of your site<br /><br /><h2>multimedia</h2><br /><ul><br /><li>As we discussed last week because of the active content bug on ie, putting multimedia files into your HTML is tricky. There is basically no agreement within the industry on what the best way to do this is because the ways that actually work best in the real world are inelegant and not standards compliant. Because of this, i'm taking the practical road on these and showing you some techniques that work now. If you continue in this field, you'll need to keep yourself up-to-date as the argument rages on, and when someone figures out a way that is elegant, standards compliant, and works well on all major browsers and platforms, you'll need to learn that technique in order to provide the best service to your clients.</li><br /><li>There is an excellent and full introduction to these issues on the teaching blog of <a href="http://classes.catherinegarnier.com/fall07/intro_to_web/?m=200711&paged=2">Catherine Garnier</a></li><br /><br /><li>EXAMPLES:<br/> all of these, except the youtube example, use the external javascript method of putting content into your site<br /><br /><ul><br /><li><a href="http://www.catherinegarnier.com/reel.php">example of quicktime embedded in the old fashioned, simple, pre-windows-active-content-bug way</a></li><br /><li><a href="http://classes.jayvanburen.com/flashexample1.html">YouTube example</a></li><br /><li><a href="http://www.early-adopter.com/index-bknov07.html">Good Flash example</a></li><br /><li><a href="http://classes.jayvanburen.com/qtexample.html">Quick Time example</a></li><br /><li><a href="http://www.cae-nyc.org/vid_decade/videoplayer.html">using a streaming video server</a></li><br /><br /><br /><br /></ul><br /><br /><br /><br /><br /><br /></li><br /><li> From the horse's mouth, as they say:<br /><ul><br /><li><a href="http://developer.apple.com/internet/ieembedprep.html">apple on how to embed quicktime</a></li><br /><li><a href="http://del.icio.us/jay2earlyadopter/multimedia">all my multimedia bookmarks</a></li><br /></ul><br /><br /></li><br /><!-- <li> Get ready for final presentations which begin next week- You will be judged on these three things: quality of design, appropriateness of your site to your client's needs and correct use of cross-browser compatible, standards compliant code.</li>--><br /><br /><br /></ul><br /><br />final presentations list:<br /><br />May 1:<br />Najlah<br />Rashida<br />Ara<br />Chris<br />Jae Hwan<br />Tyler<br /><br /><br />May 8<br />Lev<br />Miliam<br />Yelena<br />Andre<br />Ji Youngearlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com1tag:blogger.com,1999:blog-3303409105178769662.post-58453673987951566042008-04-17T06:04:00.001-07:002008-04-28T21:04:52.780-07:00Week #12Ok-- its time to present your HTML - the assignment from last week was to have an HTML version of your home page that you have validated and have checked on a PC - please post links to your home work pages and post links to this home work on those pages. <br /><br />We will spend most of the day talking about techniques for making your pages work in HTML- but we will also look at these three things:<br /><br /><ul><br /><li><a href="http://www.formmail.com/cgi-bin/webscr">Formmail</a></li><br /><li><a href="http://jquery.com/">JQuery</a></li><br /><li><a href="http://www.hesido.com/web.php?page=customscrollbar">flexcroll I believe we already talked about</a></li><br /></ul><br /><br />The Rule about Javascript is that you are free to use code from anywhwere so long as you a) cite it and b) fully understand how it works. There can be exceptions- For example if you want to use some very complex javascript, so complex that you probably can't figure out how all of it works yourself, like in JQuery or in the Flexcroll above, you just need to talk to me about it- if you have a good reason to use it, and what you want to use it for is not something you could figure out how to do yourself, then i'll make an exception. NO EXCEPTIONS WITHOUT TALKING TO ME FIRST! - some of you already have....and of course you still have to cite where you got the code from - that never changes.<br /><br /><h2>home work</h2><br /><br />Next week is spring break, so for two weeks from today- the assignment is to have a working beta version of your site.<br /><br />what is a working beta?<br /><br />its a version of your site that has all the pages built, and all the pages linking to each other. It might still have some "Lorem Iposom" text in it, it might have stand-in pictures instead of real pictures. It should NOT- have big blank spaces- put in fake text and pictures if you don't have the real text and real pictures so you know how you're going to style them and how you're going to space them. A beta version of a site may still have some bugs and may not look right in all browsers but its got all of its major parts and it pretty-much works. That is your goal for when we come back and you'll be showing them in class on that day. Belive me you want to have all of the remaining weeks to polish and tweak and make every little detail work just right, you're going to need that time- the last little bits always take longer than you think.earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com2tag:blogger.com,1999:blog-3303409105178769662.post-49711392767607127182008-04-09T22:36:00.000-07:002008-04-09T22:50:27.238-07:00Week #11Post your homework to the comments of this post! which, i believe, was an HTML version of your home page, no?<br /><br />Last week we spent the whole time talking about design (which is really kind of a good thing) so this week we'll talk about what we were going to do last time, and then, if we get time, we'll talk about mashups and API's<br /><br /><h3>Form Processing with PHP</h3><br /><p>In order to process the information submitted by a user to a form on your site, you need a way to capture that data. Because HTML, CSS, and JavaScript all happen on the client-side, and can’t send information back to the browser, you need something like PHP, working on the server side, to do this. We’re going to go over two very simple form processing scripts today.</p><br /><p>The first example is for sending the results of a form as an email.</p><br /><h4>Sample Files: (control+click or right click to download)</h4><br /><ul><br /><li><a href="http://classes.catherinegarnier.com/_bootcamp/web/email_form.html">Form</a></li><br /><li><a href="http://classes.catherinegarnier.com/_bootcamp/web/email_form.php">Form Handler</a></li><br />download the <a href="http://classes.jayvanburen.com/phpfiles.zip">zip file containing the php</a><br /></ul><br /><br /><h3>Step 1, Set the Form Action</h3><br /><p>To invoke the PHP code you are going to use to process the form, you are going to submit the form to a .php page. This is accomplished by setting the form action to the name of the page:</p><br /><p><code><form action=”email_form.php” method=”post”></code></p><br /><h3>Step 2, Create the handler script</h3><br /><p>Next, you are going to create a .php file to process the form contents. In this example, we are going to name this script <code>email_form.php</code></p><br /><p>By submitting our form to this script, the values from the form are passed to it. These values are automatically stored in an array called $_POST. We can now access the values in this array, and the first thing we need to do is to make them easier to work with:<br /><br /><code>//Change post variables to regular variables</code></p><br /><p>$<code>ipod = $_POST['ipod'];<br /><br /><br />$laptop = $_POST['laptop'];<br /><br />$cell_phone = $_POST['cell_phone'];<br /><br />$borough = $_POST['borough'];</code></p><br /><p>Note that the values between the brackets [’…’] match the names of the inputs you passed from your form.</p><br /><p>The next thing you need to do is turn all these values into a single string so it can be emailed:</p><br /><p><code>//Turn all the variables into a single string.<br /><br />//Note: .= appends to the current variable value rather than replacing it</code></p><br /><p><code>$formresults = "Ipod: ".$ipod."\n";<br /><br /><br />$formresults .= "Laptop: ".$laptop."\n";<br /><br />$formresults .= "Cellphone: ".$cell_phone."\n";<br /><br />$formresults .= "Borough: ".$borough;</code></p><br /><p>Next, you will use the built-in function called mail to email the form results to the designated email:</p><br /><p><code>//send values as email<br /><br />mail("youremail@domain.com", "Form Results from Web site", $formresults, "From: youremailhere@yourdomain.com");</code></p><br /><p>Now, it’s good practice to give your visitors a confirmation message so they know their information was submitted:<br /><br /><code>//print opening html<br /><br />print("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"<br /><br /><br />\"http://www.w3.org/TR/html4/loose.dtd\"><br /><br /><html><br /><br /><head><br /><br /><title>Form Example</title><br /><br /><meta name=\"generator\" content=\"BBEdit 8.2\"><br /><br /></head><br /><br /><body>");</code></p><br /><br /><p><code>//Print confirmation message to the screen<br /><br />print("Your answers have been emailed to our secret headquarters. Thanks for playing!");</code></p><br /><p><code>//print closing html<br /><br />print("</body><br /><br /></html>");</code></p><br /><p>Last, don’t forget to close your php tag:<br /><br /><code>?></code></p><br /><h3>Saving Form Results to a File</h3><br /><br /><p>Say instead of emailing your results you just want to store them in a file on your server. This example shows you how.</p><br /><h3>Sample Files: (control+click or right click to download)</h3><br /><ul><br /><li><a href="http://classes.catherinegarnier.com/_bootcamp/web/file_form.html">Form</a></li><br /><li><a href="http://classes.catherinegarnier.com/_bootcamp/web/file_form.php">Form Handler</a></li><br /></ul><br /><p>Your form file remains the same, but for the purpose of this example, we are going to change the action to this:<br /><br /><code><form action=”file_form.php” method=”post”></code></p><br /><p>This time we are processing the form with a php script called <code>file_form.php</code></p><br /><br /><p>The beginning of this script is identical to the previous example.</p><br /><p><code>//Change post variables to regular variables</code></p><br /><p><code>$ipod = $_POST['ipod'];<br /><br />$laptop = $_POST['laptop'];<br /><br />$cell_phone = $_POST['cell_phone'];<br /><br />$borough = $_POST['borough'];</code></p><br /><p><code>//Turn all the variables into a single string.<br /><br />//Note: .= appends to the current variable value rather than replacing it</code></p><br /><p><code>$formresults = "Ipod: ".$ipod."\n>";<br /><br /><br />$formresults .= "Laptop: ".$laptop."\n";<br /><br />$formresults .= "Cellphone: ".$cell_phone."\n";<br /><br />$formresults .= "Borough: ".$borough;</code></p><br /><p>This time, however, you are going to use a number of functions that are designed to handle opening, writing, and closing files on the server.</p><br /><p><code>//this code is adapted from Example 1 at http://us3.php.net/manual/en/function.fwrite.php</code></p><br /><p><code><code>//identify the file<br /><br />$filename = "formdata.txt";</code></code></p><br /><p><code>//see if the file exists and is writable<br /><br /></code><br /><br /><br /><code>// Let's make sure the file exists and is writable first.<br /><br />if (is_writable($filename)) {</code></p><br /><p><code>// the function fopen opens the specified file. The 'a' argument opens the file in append mode</code></p><br /><p><code>if (!$handle = fopen($filename, 'a')) {<br /><br />echo "Cannot open file ($filename)";<br /><br />exit;<br /><br />}</code></p><br /><p><code>// Write $file to our opened file.<br /><br />if (fwrite($handle, $formresults) === FALSE) {<br /><br /><br />echo "Cannot write to file ($filename)";<br /><br />exit;<br /><br />}</code></p><br /><p><code>//close the file<br /><br />fclose($handle);</code></p><br /><p><code>} else {<br /><br />echo "The file $filename is not writable";<br /><br />exit;<br /><br />}</code></p><br /><br /><p>The last thing you need to do is create the text file. Open up a text editor and save a blank document as formdata.txt. Upload it to your site. You may need change the file permissions in order for the script to work right. The permissions should be 666, readable and writeable by everyone.</p><br /><hr /><br /><h2>Mashups, "the distributed web" how to leverage other people's technology for your own client's benifit</h2><br /><br /><ul><br /><li>best of <a href="http://images.businessweek.com/ss/05/07/mashups/source/introslide.htm">list for mashups</a></li><li><a href="http://mashupawards.com/">Best Mashup Awards</a></li><li><a href="http://explore.twitter.com/jaynewt">Twitter</a> and <a href="http://twitter.pbwiki.com/Mashups">Twitter Mashups</a></li><li>Good article <a href="http://www.linuxworld.com/news/2006/121806-web-20-apis.html?page=1">10 API's you can really use</a></li><br /><li>Delicious <a href="http://del.icio.us/help/json/">Javascript API's</a></li><br /><li>You Tube's <a href="http://code.google.com/apis/youtube/js_api_reference.html">Javascript API</a></li><br /></ul><br />oh, yeah one more thing about Server Side includes (discussed in <a href="http://vanburen-adv-web.blogspot.com/2008/04/week-9.html">week 9</a>)<br /><ul><li>How to use them <a href="http://www.early-adopter.com/">cleverly with CSS</a></li></ul><br /><br /><h2>Homework for next week</h2>-Revised HTML versions of your client's home page, Validated and tested on A PC! --layout need not be perfect on a PC but I want you to know what problems you are going to have to deal with now, not later - therefore i want a <a href="http://answers.yahoo.com/question/index?qid=1006031213528">screenshot</a> of your page on a pc to prove you tested it! can be a jpg or any kind of digital file- and it can be anywhere on the web- so long as i can see itearlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com2tag:blogger.com,1999:blog-3303409105178769662.post-76804930020728635482008-04-03T06:09:00.001-07:002008-04-09T22:08:34.969-07:00Week 10Post your homework to the comments of this post!<br /><br /><h3>Form Processing with PHP</h3><br /><p>In order to process the information submitted by a user to a form on your site, you need a way to capture that data. Because HTML, CSS, and JavaScript all happen on the client-side, and can’t send information back to the browser, you need something like PHP, working on the server side, to do this. We’re going to go over two very simple form processing scripts today.</p><br /><p>The first example is for sending the results of a form as an email.</p><br /><h4>Sample Files: (control+click or right click to download)</h4><br /><ul><br /><li><a href="http://classes.catherinegarnier.com/_bootcamp/web/email_form.html">Form</a></li><br /><li><a href="http://classes.catherinegarnier.com/_bootcamp/web/email_form.php">Form Handler</a></li><br /></ul><br /><br /><h3>Step 1, Set the Form Action</h3><br /><p>To invoke the PHP code you are going to use to process the form, you are going to submit the form to a .php page. This is accomplished by setting the form action to the name of the page:</p><br /><p><code><form action=”email_form.php” method=”post”></code></p><br /><h3>Step 2, Create the handler script</h3><br /><p>Next, you are going to create a .php file to process the form contents. In this example, we are going to name this script <code>email_form.php</code></p><br /><p>By submitting our form to this script, the values from the form are passed to it. These values are automatically stored in an array called $_POST. We can now access the values in this array, and the first thing we need to do is to make them easier to work with:<br /><br /><code>//Change post variables to regular variables</code></p><br /><p>$<code>ipod = $_POST['ipod'];<br /><br /><br />$laptop = $_POST['laptop'];<br /><br />$cell_phone = $_POST['cell_phone'];<br /><br />$borough = $_POST['borough'];</code></p><br /><p>Note that the values between the brackets [’…’] match the names of the inputs you passed from your form.</p><br /><p>The next thing you need to do is turn all these values into a single string so it can be emailed:</p><br /><p><code>//Turn all the variables into a single string.<br /><br />//Note: .= appends to the current variable value rather than replacing it</code></p><br /><p><code>$formresults = "Ipod: ".$ipod."\n";<br /><br /><br />$formresults .= "Laptop: ".$laptop."\n";<br /><br />$formresults .= "Cellphone: ".$cell_phone."\n";<br /><br />$formresults .= "Borough: ".$borough;</code></p><br /><p>Next, you will use the built-in function called mail to email the form results to the designated email:</p><br /><p><code>//send values as email<br /><br />mail("youremail@domain.com", "Form Results from Web site", $formresults, "From: youremailhere@yourdomain.com");</code></p><br /><p>Now, it’s good practice to give your visitors a confirmation message so they know their information was submitted:<br /><br /><code>//print opening html<br /><br />print("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"<br /><br /><br />\"http://www.w3.org/TR/html4/loose.dtd\"><br /><br /><html><br /><br /><head><br /><br /><title>Form Example</title><br /><br /><meta name=\"generator\" content=\"BBEdit 8.2\"><br /><br /></head><br /><br /><body>");</code></p><br /><br /><p><code>//Print confirmation message to the screen<br /><br />print("Your answers have been emailed to our secret headquarters. Thanks for playing!");</code></p><br /><p><code>//print closing html<br /><br />print("</body><br /><br /></html>");</code></p><br /><p>Last, don’t forget to close your php tag:<br /><br /><code>?></code></p><br /><h3>Saving Form Results to a File</h3><br /><br /><p>Say instead of emailing your results you just want to store them in a file on your server. This example shows you how.</p><br /><h3>Sample Files: (control+click or right click to download)</h3><br /><ul><br /><li><a href="http://classes.catherinegarnier.com/_bootcamp/web/file_form.html">Form</a></li><br /><li><a href="http://classes.catherinegarnier.com/_bootcamp/web/file_form.php">Form Handler</a></li><br /></ul><br /><p>Your form file remains the same, but for the purpose of this example, we are going to change the action to this:<br /><br /><code><form action=”file_form.php” method=”post”></code></p><br /><p>This time we are processing the form with a php script called <code>file_form.php</code></p><br /><br /><p>The beginning of this script is identical to the previous example.</p><br /><p><code>//Change post variables to regular variables</code></p><br /><p><code>$ipod = $_POST['ipod'];<br /><br />$laptop = $_POST['laptop'];<br /><br />$cell_phone = $_POST['cell_phone'];<br /><br />$borough = $_POST['borough'];</code></p><br /><p><code>//Turn all the variables into a single string.<br /><br />//Note: .= appends to the current variable value rather than replacing it</code></p><br /><p><code>$formresults = "Ipod: ".$ipod."\n>";<br /><br /><br />$formresults .= "Laptop: ".$laptop."\n";<br /><br />$formresults .= "Cellphone: ".$cell_phone."\n";<br /><br />$formresults .= "Borough: ".$borough;</code></p><br /><p>This time, however, you are going to use a number of functions that are designed to handle opening, writing, and closing files on the server.</p><br /><p><code>//this code is adapted from Example 1 at http://us3.php.net/manual/en/function.fwrite.php</code></p><br /><p><code><code>//identify the file<br /><br />$filename = "formdata.txt";</code></code></p><br /><p><code>//see if the file exists and is writable<br /><br /></code><br /><br /><br /><code>// Let's make sure the file exists and is writable first.<br /><br />if (is_writable($filename)) {</code></p><br /><p><code>// the function fopen opens the specified file. The 'a' argument opens the file in append mode</code></p><br /><p><code>if (!$handle = fopen($filename, 'a')) {<br /><br />echo "Cannot open file ($filename)";<br /><br />exit;<br /><br />}</code></p><br /><p><code>// Write $file to our opened file.<br /><br />if (fwrite($handle, $formresults) === FALSE) {<br /><br /><br />echo "Cannot write to file ($filename)";<br /><br />exit;<br /><br />}</code></p><br /><p><code>//close the file<br /><br />fclose($handle);</code></p><br /><p><code>} else {<br /><br />echo "The file $filename is not writable";<br /><br />exit;<br /><br />}</code></p><br /><br /><p>The last thing you need to do is create the text file. Open up a text editor and save a blank document as formdata.txt. Upload it to your site. You may need change the file permissions in order for the script to work right. The permissions should be 666, readable and writeable by everyone.</p><br /><hr />earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com5tag:blogger.com,1999:blog-3303409105178769662.post-19934088480572401132008-03-27T22:31:00.001-07:002008-04-09T22:34:25.893-07:00WEEK #9CATHERINE GARNIER WAS THE GUEST LECTURER <br /><br />HER BLOG IS HERE:<br /><br /><br /><a href="http://classes.catherinegarnier.com/spr08/advanced_web/?paged=2">http://classes.catherinegarnier.com/spr08/advanced_web/?paged=2</a>earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com0tag:blogger.com,1999:blog-3303409105178769662.post-71500114571165871932008-03-13T04:41:00.000-07:002008-03-13T04:45:00.651-07:00Week #8Today we're talking about design -- post up links to homework page which should link to your home page mockup (among other things) Also- lets go over the other homework, which was the javascript flyout menu and the single image CSS roll over menu.earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com5tag:blogger.com,1999:blog-3303409105178769662.post-36959301301065219462008-03-05T20:20:00.000-08:002008-03-06T07:26:40.603-08:00week #7<ul><br /><li><strong>More Javascript</strong> <br /> <ol><br /> <li><strong>Arrays, Review:</strong> A grouping of multiple values under the <br /> same name, for example you can have a variable called Beatles that <br /> contains all four band members. <code style="background-color:#ffffff;"><pre><br /><br />var beatles = Array(4);<br />beatles[0] = "John";<br />beatles[1] = "Paul";<br />beatles[2] = "George";<br />beatles[3] = "Ringo";<br /><br /> the syntax is working like this:<br /> <br />var name_of_array = Array(length);<br />name_of_array[index] ="value_of_this_element";<br /><br /><br /></pre></code> <br /> <ul><br /> <li>An Element is a one of the values in an array.</li><br /> <li>The Length is the number of elements that you want the array <br /> to contain.</li><br /> <li>Populating is adding elements to an array.</li><br /> <li>The Index is where you specify the order of the array.</li><br /> </ul><br /> </li><br /> <li><strong>Numeric Arrays</strong> have an incremental number index <br /> starting from 0, like the example above. </li><br /> <li><strong>Associative Arrays</strong> <br /> <ul><br /> <li>Associative Array uses a string instead of a number for its <br /> index.</li><br /> <li>If you use an Associative Array you can reference elements by <br /> name instead of number. <br /><code><pre><br /><br />var beatles = Array(); // notice that the length can be left blank if you want<br />beatles[vocalist] = "John";<br />beatles[Rhythmguitar] = "Paul";<br />beatles[bass] = "George";<br />beatles[drummer] = "Ringo";<br /><br /></pre></code><br /><br /> </ul><br /> <ul><br /> <li>You can also create an Array to hold other arrays. <code><pre><br /><br /><br />var beatles = Array(); // notice that the length can be left blank if you want<br />beatles[vocalist] = lennon;<br />beatles[Rhythmguitar] = mccartney;<br />beatles[bass] = harrison;<br />beatles[drummer] = star;<br /><br />var lennon = Array();<br />lennon[firstname] = "John"; //notice that the value of these elements can be<br />lennon[birthyear] = 1940; //numbers<br />lennon[living] = false; //or boolean values<br /><br /></pre></code></li><br /> <li>Remember the <a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_array">example to play with</a> </li><br /> <br /> </ul><br /> </li><br /> <li><strong>Operations</strong> <br /> <ul><br /> <li>Operations allow you to do calculations and manipulate data.</li><br /> <li>Operators are symbols that Javascript uses to perform operations.</li><br /> <li>We've been using (=) operator to perform assignments.</li><br /> <li><strong>Arithmetic operators</strong>: Addition (+), Subtraction <br /> (-), Multiplication (*), Division (/) </li><br /> <li>Operations can be combined. </li><br /> <li>Operations can be used in <br /> a variable and performed <br /> on a variable. </li><br /> <li><strong>Operations shortcuts: </strong> <br /> <ul><br /> <li>(++) increases the value of a numeric variable by 1. </li><br /> <li>(--) decreases the value of a numeric variable by 1. </li><br /> <li>(+=) performs addition (or concatenation) and assignment <br /> at the same time. <code><pre><br /><br />var year = 2005;<br />var message = "the year is";<br />message += year;<br /><br />alert (message);<br /><br /><br /></pre></code></li><br /> </ul><br /> </li><br /> <li><strong>Concatenations: </strong> <br /> <ul><br /> <li>Concatenations join strings, numbers or variables together <br /> using the (+) operator. <br /><code><pre><br /><br /><br />var mood = "happy";<br />var message = "I am feeling"+mood;<br /><br /></pre></code><br /></li><br /> </ul><br /> </li><br /> </ul><br /> </li><br /> <li><strong>Conditional Statements</strong> <br /> <ul><br /> <li>Javascript uses conditional statements to make decisions based <br /> on the criteria given. A conditional statement sets up a condition <br /> that must be evaluated before the rest of the script can be read. <br /> <br /><br /><code><pre><br />if (condition){<br /> statements;<br /> }<br /><br />for example:<br /><br />if (1>2) {<br /> alert("the world has gone made");<br /> }<br /><br /></pre></code><br /><br /> </li><br /> <li>The <strong>if statement</strong> is the most common. The condition <br /> is always going to be either true or false. </li><br /> <li>The if statement can be expanded using <strong>else</strong>. <br /> Statements inside of the else clause will be executed only when <br /> the if condition is <strong>false</strong>. <br /><code><pre><br /><br />if(1>2){<br />alert("the world has gone mad!!!!! OMG!!!!");<br />}<br />else {<br />alert("everything is fine, chill out");<br />}<br /><br /></pre></code><br /><br /></li><br /> <li><strong>Comparison Operators: </strong>greater than (>), <br /> less than (<), greater than or equal to (>=), less than <br /> or equal to (<=), equality (==) and inequality (!=). <br /> <ul><br /> <li>Check for equality the right way. </li><br /> <li>Don't try to check for equality the wrong way. Remember the = sign is <br /> used for assignments. </li><br /> <li>Check for inequality. </li><br /> </ul><br /> </li><br /> <li><strong>Operands:</strong> are operations combined in a conditional <br /> statement</li><br /> <li><strong>Logical Operators: and (&&) </strong>and <strong>or <br /> (||)</strong> are used to combine operators, and <strong>not (!) <br /> </strong>is used to reverse the value of a statement. All three <br /> return Boolean values of either true or false. <br /> <ul><br /> <li>The <strong>and operation</strong> <strong>(&&) <br /> </strong>will only be true if both operands are true. </li><br /> <li>The <strong>or operation</strong> <strong>(||)</strong> <br /> will be true if one of its operands is true or if both of <br /> its operands are true. It will be false only when both operands <br /> are false. </li><br /> <li>The <strong>not operation</strong> <strong>(!)</strong> <br /> works on a single operand and switches the returned value <br /> from true to false or false to true. </li><br /> </ul><br /> </li><br /> </ul><br /> </li><br /> <li><strong>Looping Statements</strong> <br /> <ul><br /> <li>Looping is used to execute the same statement a number of times. <br /> The code with in the looping statement executes until the condition <br /> is no longer true.</li><br /> <li><strong>while:</strong> the code within the curly braces will <br /> be executed until the condition is false. In this example the <br /> code will execute 10 times until the value of the count turns <br /> 11 and the condition becomes false. If nothing happens to affect <br /> the condition the loop will execute forever. <br /><br /><code><pre><br /><br />while (condition){<br /> statements;<br /><br /> }<br /><br />var count = 1;<br />while (count < 11) {<br />alert(cont);<br />count++;<br />}<br /><br /><br /></pre></code><br /></li><br /> <li><strong>do while: </strong>similar to the syntax of a regular <br /> loop, but this loop will execute even if the condition is false. <br /> <br /><code><pre><br /><br />do{<br />statements;<br />} while (condition);<br /><br /><br /></pre></code><br /><br /> </li><br /> <li><strong>for: </strong>a cleaner way of executing loops. Everything <br /> relevant to the loop is contained within the parentheses. <br /><code><pre><br /><br />for (initial condition; test condition; alter condition){<br /> statements;<br /> }<br /><br />example:<br /><br />for (var count =1; count < 11; count++){<br />alert (count);<br />}<br /><br />and a more complex example:<br /><br />var beatles = Array("John","Paul","George","Ringo");<br />for (var count=0; count < beatles.length; count++){<br /> alert(beatles[count]);<br /> }<br /><br /><br /></pre></code><br /><br /></li><br /> </ul><br /> </li><br /> <li><strong>Functions</strong> <br /> <ul><br /> <li>A function is a group of statements that can be invoked from <br /> anywhere in your code. <br /><br /><code><pre><br /><br />function name(arguments){<br /> statements;<br /> }<br /><br />example:<br /><br />function multiply(num1, num2) {<br /> var total = num1 * num2;<br /> alert(total);<br />}<br /><br /></pre></code><br /></li><br /> <li>Functions are good for reusing pieces of code. Once you define <br /> a function, you can reuse it by simply calling it by name. </li><br /> <li>You can pass data to a function and have them act on that data. <br /> These are called <strong>arguments</strong>. A function can use <br /> multiple arguments, separated by commas. Once the arguments are <br /> passed to the function they can be used like variables. <br /><code><pre><br /><br />multiply(10,2);<br /><br /></pre></code><br /><br /></li><br /> <li>Use the <strong>return statement</strong> to return a number, <br /> string, array or Boolean value. In this example the function take <br /> one argument, returns a number and then assigns the number to <br /> a new variable.<br /><br /><br /><code><pre><br /><br />function convertToCelsius(temp) {<br /> var result = temp -32;<br /> result = result / 1.8;<br /> return result;<br /> }<br /><br />var temp_farhenheit = 95;<br />var temp_celcius = convertToCelsius(temp_fahrenheit);<br />alert(temp_celsius);<br /><br /><br /></pre></code><br /><br /></li><br /> </ul><br /> </li><br /> <li><strong>Objects</strong> <br /> <ul><br /> <li>An object is a self-contained collection of data that takes <br /> two forms: <strong>property and method</strong>. Properties and <br /> methods are combined to form an object.</li><br /> <li>A <strong>property</strong> is a variable (like mood or age) <br /> that belongs to an object. </li><br /> <li>A <strong>method</strong> is a function (like walk or sleep) <br /> that can be invoked by the object.</li><br /> <li>To use a specific object an <strong>instance</strong> of that <br /> object must be created.</li><br /> <li><strong>Native Objects</strong> are those that come pre-made <br /> for use in your scripts.</li><br /> <li>You can create your own <strong>User-Defined Objects</strong>, <br /> but not quite yet. </li><br /> <li><strong>Host Objects</strong> are objects provided by the browser. <br /> Early Javascript used the properties and methods of the <em>window <br /> object</em>, sometimes called the Browser Object Model. Stay away <br /> from the the window object and work with the Document Object.</li><br /> </ul><br /> </li><br /> </ol><br /> </li><br /><br /> <li><strong>IF we Have Time, even More Javascript</strong> <br /> <br /> <br /> <li><strong>Intro to the Document Object Model</strong> <br /> <li>The Document Object Model represents the web page that is currently <br /> loaded in the browser. Think of the DOM as map of the web page and <br /> think of using JavaScript to read the map.</li><br /> <li>The document is represented as a family tree or <a href="http://www.w3schools.com/htmldom/htmltree.gif">document <br /> tree</a>.</li><br /> <li><strong>Nodes </strong><br /> <ul><br /> <li><strong>Element Nodes</strong>: All the elements , like h1, p, <br /> ul, etc. are all nodes on the tree. The have relationships to each <br /> other, like parent, child, sibling. All elements contain other elements, <br /> except <html> which is the root of the tree.</li><br /> <li><strong>Text Nodes: </strong> are the text the elements contain, <br /> like <h2><strong>Resume</strong></h2>. Text nodes are <br /> always contained inside an element node.</li><br /> <li><strong>Attribute Nodes:</strong> give more specific info about <br /> an element, like <h2 title="my resume"><strong>Resume</strong></h2></li><br /> </ul><br /> </li><br /> <li><strong>DOM Methods</strong> <br /> <ul><br /> <li><strong>getElementById: </strong>This method is a function associated <br /> with the document object. It takes just one argument: the id of <br /> the element you want to get. <br /> <code><pre><br /><br />document.getElementById(id);<br /></pre></code><br /><a href="http://www.w3schools.com/htmldom/met_doc_getelementbyid.asp">See Example on w3c site</a><br /></li><br /> <li><strong>getElementsByTagName: </strong>Using this method gives <br /> you access to an array that is populated with every instance of <br /> the tag. You have access to multiple elements. <br /><code><pre><br />document.getElementByTagName(tag);<br /><br /></pre></code><br /><a href="http://www.w3schools.com/dom/met_document_getelementsbytagname.asp">See Example on w3c site</a><br /><br /></li><br /> <li><strong>getAttribute: </strong>This method can only be used on <br /> an element node. <br /><code><pre><br /><br />object.getAttribute(attribute);<br /></pre></code><br /><br />here is an <a href="http://www.w3schools.com/dom/met_element_getattribute.asp">example</a><br />Combined with getElementsByTagName, use it to get <br /> the attribute of a specific element, or in this example the title attributes of each of the "p" tags in the document . <br /><code><pre><br /><br />var paras = document.getElementByTagName("p");<br />for (var i=0; i < paras.length; i++){<br />alert(paras[1].getAttribute("title"));<br />}<br /><br /></pre></code><br /><br /></li><br /> <li><strong>setAttribute:</strong> This method allows you to change <br /> the value of an attribute node. Unlike the others, it takes two <br /> arguments: one for attribute and one for value. <br /><code><pre><br />object.setAttribute(attriute,value);<br /></pre></code><br /><br /></li><br /> </ul><br /> <li><a href="http://icant.co.uk/articles/domessentials/">http://icant.co.uk/articles/domessentials/</a></li><br /> <br /> <li>Now we will talk about this <a href="http://classes.jayvanburen.com/subnav_menu.html">Sub nav flyout example</a> of a fly-out secondary menu</li><br /> <br /> <br /> <br /> </ul><br /><br /><h2>Homework</h2><br /><ol><br /><li>Make your own version of the <a href="http://classes.jayvanburen.com/subnav_menu.html">Sub nav flyout example</a> This is due in two weeks</li><br /><br /><li>Make your own version of the single image roll over from two weeks ago <a href="http://classes.catherinegarnier.com/fall07/intro_to_web/docs/image_tricks.html">click here for example</a> - this i assigned last week in class but didn't write down so its due next week</li><br /><li>OPTIONAL EXTRA CREDIT CHALLENGE - if you DARE! (OMG its so exciting!) create a menu that combines a single image rollover with a javascript subnav.</li><br /><li>First Draft of Home page mockup (comp) -- this is a JPG file, you can create it in photoshop, and its your first idea for the over-all design of your client's site using the home page as an example. Once the design direction is approved by your client, you will use the design of this first designed home page to guide the style of all the pages.</li><br /></ol>earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com3tag:blogger.com,1999:blog-3303409105178769662.post-71810156729769709272008-02-27T21:26:00.000-08:002008-02-27T22:10:50.923-08:00Week #6<ul><br /><li>as always, post a link to your homework page where i should be able to see your revised creative brief (that you should have sent to you client for approval, btw, if i didn't say that before) and your site outline</li><br /><br /><li><a href="http://en.wikipedia.org/wiki/Rick_Astley#.22Rickroll.22_Internet_phenomenon">Rick Rolling</a>do not <a href="http://www.rickrolling.com">click this link</a></li><br /><li>Design Phase:<ul> <li>How to Make a Functional Spec<ul><li><a href="http://www.jayvanburen.com/functional_spec_v3.pdf">wireframes</a></li><li><a href="http://iac.dtic.mil/site_map.html">site map</a></li></ul></li> - Navigation: Main Nav. Vs. alt Nav. Motivated user vs. unmotivated user - When navigation strategy becomes part of marketing message, eg. SENSEI</ul></li><br /><br /></ul><br /><br /><ol><br /> <li>Examples and Tips in image production -- Take Notes!</li><br /> <br /> <li><a href="http://www.browsercam.com">Browser Cam</a> introduction and <br /> user set up.</li><br /> <li>XTHML, CSS and JavaScript (<a href="http://www.digital-web.com/articles/the_behavior_layer/">the <br /> Behavior Layer</a>)</li><br /> <li><strong>Introduction to Javascript </strong>(from the DOM Scripting <br /> book): <br /> <ul><br /> <li><strong>JavaScript Defined</strong><br /><br /> JavaScript is a scripting language that's used to add interactivity <br /> and dynamic behaviors to web pages and applications. JavaScript can <br /> interact with other components of a web page, such as HTML and CSS, <br /> to make them change in real time, or respond to user events.... <a href="http://www.sitepoint.com/article/javascript-from-scratch">more</a>.</li><br /> <li><strong>A Brief History of JavaScript</strong><br /><br /> JavaScript fist appeared in 1995 in Netscape 2. IE quickly released <br /> it's own version called VBScript in IE3. A standard was created by <br /> the European Computer Manufacturers Association (ECMA) called ECMA <br /> script. DHTML became a popular and then dirty buzzword as the browser <br /> wars were fought in the late 1990's and as each browser used it's <br /> own Document Object Model. DOM Scripting is the correct term for describing <br /> the interaction of XHTML, CSS and Javascript.</li><br /> <li><strong>The DOM<br /><br /> </strong>The Document Object Model is an API (Application Programming <br /> Interface). It is an agreed upon standard that makes it possible for <br /> programs and scripts to dynamically access and update documents on <br /> the web. The W3C created a DOM that could be used by many different <br /> programming languages. Real world examples are Morse Code, Time Zones, <br /> the Periodic Table of Elements. </li><br /> </ul><br /> </li><br /> <li><strong>JavaScript Syntax</strong> (the structural rules of a language) <br /> <ol><br /> <li><strong>Statements: </strong>A series of instructions <pre><br />//comments look like this<br />// and need slashes on each line<br />/*unless<br />you do this */<br /><code>statement;</code><br /><code>statement;</code><br /><code>statement;</code><br /></pre></li><br /> <li><strong>Comments:</strong> Like HTML comments, they are used to <br /> keep track what's happening in your script. <pre><br /><code>//comments look like this</code><br /><code>// and need slashes on each line</code><br /><code>/*unless</code><br /><code>you do this */</code><br /><br /></pre></li><br /> <li><strong>Keywords:</strong> Predefined terms, like <strong>var </strong>or<strong> <br /> Array</strong></li><br /> <li><strong>Variables:</strong> Things that are subject to change, like <br /> <strong>mood</strong> and <strong>age</strong>. <br /> <ul><br /> <li><strong>Parts of a Variable <br /> </strong></li><br /> <li><strong>Variable names</strong> are case sensitive and can't <br /> contain spaces or puncuation.</li><br /> <li><strong>Assignment:</strong> Giving value to a variable, like <br /> <strong>happy</strong> or <strong>25</strong></li><br /> <li><strong>Contains:</strong> When an assignment has been given, <br /> the variable mood "contains" the value happy.</li><br /> <li><strong>Declare:</strong> Before assignment values to a variable <br /> the variable should be introduced or "declared".</li><br /> <li><strong>Literal:</strong> Something that is literally written <br /> out in Javascript code, like "happy".</li><br /> <li><strong>Scalars:</strong> A variable that can only have one <br /> value at a time, like Strings, Numbers and Boolean Values</li><br /> <li><strong>Data Types</strong></li><br /> <li><strong>Data Types: Strings </strong> <br /> <ul><br /> <li>Strings consist of 0 or more characters and must be enclosed <br /> in either single or double quotes. </li><br /> <li>Escaping is used when a quote is used as part of a the string. <br /> The backslash character is used.</li><br /> </ul><br /> </li><br /> <li>W3C's <a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_variable">excellent example page </a></li><br /> <br /> <li><strong>Data Types: Numbers</strong> <br /> <ul><br /> <li>Floating-point numbers (decimals) and negative numbers can <br /> be used.</li><br /> </ul><br /> </li><br /> <li><strong>Data Types: Boolean Values</strong> <br /> <ul><br /> <li>Boolean data has only two possible values: true or false</li><br /> </ul><br /> </li><br /> <li><strong>Arrays:</strong> A grouping of multiple values under<br /> the same name, for example you can have a variable called Beatles<br /> <br /> that contains all four band members. <br /> <ul><br /> <li>An Element is a one of the values in an array.</li><br /> <li>The Length is the number of elements that you want the array <br /> to contain.</li><br /> <li>Populating is adding elements to an array.</li><br /> <li>The Index is where you specify the order of the array.</li><br /> <li>Numeric Array has an incremental number index starting from <br /> 0</li><br /> <li>Associative Array uses a string instead of a number for <br /> its index.</li><br /> </ul><br /> </li><br /> </ul><br /> </li><br /> </ol><br /> </li><br /> </ol><br /> <p class="separator"><strong><a name="homework" id="homework"></a>Homework</strong>| <br /> </p><br /> <ol><br /> <li><strong>DOM Scripting Prep</strong> <br /> <ul><br /> <li>Read through Chapter 1 and 2 from the DOM Scripting book to get <br /> an understanding of the Javascript basics.</li><br /> </ul><br /> </li><br /> <br /> <br /> <br /> </ol><br /><ul><li>Site Outline Due today / Functional Spec Assigned, it will be due next week, Functional Spec, in this case includes two things:<ul></ul><li><a href="http://www.jayvanburen.com/functional_spec_v3.pdf">wireframes</a></li><li><a href="http://iac.dtic.mil/site_map.html">site map</a></li></ul>earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com3tag:blogger.com,1999:blog-3303409105178769662.post-12633028455170262162008-02-20T18:52:00.000-08:002008-02-20T18:53:06.972-08:00Week #5<ol><br /><li>Post a link to your homework page to the comments section of this todays page here, and make sure there are links to your homework for today which was..... a) a competitive analysis b) creative brief, c) adding rounder corners to some part of your bill of rights page</li><br /><br /><li>Initial Project Presentations<br /><br /></li><br /><br /> <li>Live Text vs. Graphic Text</li><br /><br /><br /><li>Foreground vs. Background Image</li><br /><br /><br /><li>Discovery Phase: How to Write a <a href="http://www.early-adopter.com/outline-example.html">Site Outline</a></li><br /><br /><br /> <li>How to write a <a href="http://www.early-adopter.com/bailey/bailey_schedule.htm">project schedule</a></li><br /><br /><br /> <li><strong>Background Images and Image Replacement <a href="http://www.w3schools.com/css/css_background.asp">examples</a> </strong> <br /> <ul><br /> <li>Tiled backgrounds <a href="http://www.w3schools.com/css/pr_background-repeat.asp">exmaples</a></li><br /> <li>Background image positioning <a href="http://www.w3schools.com/css/pr_background-position.asp">syntax</a> <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_background-position">examples</a></li><br /> <li>Rounded corners: fixed and flexible <a href="http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-01.htm">example of flexible corners</a></li><br /> <li>Image Replacement methods <a href="http://www.kryogenix.org/code/browser/lir/">Example</a></li><br /> </ul><br /> </li><br /><br /> <li><strong>Styling Lists and Links </strong> <br /> <ul><br /> <li>Creating Buttons and Simple Rollovers using CSS (no javascript) <a href="http://www.alistapart.com/stories/rollovers/">example</a>, <a href="http://www.wellstyled.com/css-nopreload-rollovers.html">another way to go</a> </li><br /> <li>Visited-link styles <a href="http://webdesign.maratz.com/lab/visited_links_styling/">some good ideas</a></li><br /> <li>Highlighting the current page in the nav bar </li><br /> <li>Creating a horizontal nav bar </li><br /> </ul><br /> </li><br /><br /><br /><li>Fun with background images<br /><ul><br /><li><a href="http://www.tizag.com/cssT/background.php">This site</a> has good examples of many things that you can do with a background image.<br /><li>lets play with <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_background-position_pixel">background image position</a> a little</li><br /><li>How to do Rounded Corners<br /><ul><li><br /><a href="http://del.icio.us/jay2earlyadopter/corners/">My Bookmarks on corners</a></li><br /><li>Lets try <a href="http://www.modxcms.com/simple-rounded-corner-css-boxes.html">getting this to work in class</a></li><br /><li>shadows on boxes -- we can look at the <a href="http://www.early-adopter.com/projects.php">example on my site</a> where <a href="http://www.early-adopter.com/images/shadow.png">this image</a> gets inserted by this rule<blockquote>div.projectsimg {<br />float:left; <br />width:236px; <br />height:79px; <br />background-image:url(images/shadow.png); <br />background-repeat:no-repeat; <br />margin:0px 25px 10px 14px; <br />padding:0px 0px 12px 12px; <br />background-position:12px 3px;}<br /></blockquote></li><br /></ul><br /></li><br /><br /></ul><br /><br /></li><br /><br /><li> Now we will talk about how to do a <a href="http://classes.catherinegarnier.com/fall07/intro_to_web/docs/image_tricks.html">Single-image menu roll over</a></li><br /><br /> <br /><br /><br /><br /> <li> <a href="http://www.oreilly.com/catalog/navigation/chapter/ch05.html">Interaction <br /> Design</a> | <a href="http://time-tripper.com/uipatterns/Introduction">Interaction <br /> Patterns</a>: Types of Navigation-- Horizontal Navigation, Vertical <br /> Navigation, Horizontal Global Navigation and Vertical Local Navigation, <br /> Tabbed Navigation, Drop-Down Navigation, Breadcrumb Navigation.</li><br /> <li><a href="http://www.welie.com/patterns/">excellent resource</a></li><br /> <br /> </li><br /> <li><a href="http://developer.yahoo.com/ypatterns/index.php">Design Patterns</a></li><br /> </ol>earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com4tag:blogger.com,1999:blog-3303409105178769662.post-41847883831919382382008-02-13T14:19:00.000-08:002008-02-13T19:17:09.672-08:00Week #4<ul><br /><li>make a link to a digital version of your completed client survey and all of your css layout examples on your homework page and post a link to the homework page to the comments section of this blog post (just to make it easy for me) thank you. We'll talk about them in class</li><br /><li>Quick Lecture on how to structure your files</li><br /><li>Discovery Phase: How to Write A Creative Brief<br>three sections:<br /><ul><li>what is it, what will it do?</li><li>style</li><li>technical specifications</li><br /><br /></ul><br /></li><br /><li>here's an example from one of mine<blockquote>======================|Overview|======================<br />This estimate includes the details for designing and implementing an elegant and<br />beautiful website for the Drawing on Film exhibition including a blog, an interactive<br />flash home page module, and multimedia info about the artists and works included in<br />the exhibition. The lead designer will be Catherine (Katy) Garnier, a multimedia artist<br />with a particular passion for and knowledge of the history of direct film including<br />many of the artists in the exhibition. The design will express the spirit of the<br />exhibition and be a key communication tool for the drawing center and subsequent<br />venues. The site will allow DC staff to maintain the site and upload new content<br />through WordPress. Our numbers are based on our hourly rates of $100/hr for<br />design and WordPress php coding.<br />===================|Technical Standards|==================<br />The web site will conform to current best practices and standards for professional<br />quality web sites. It will be optimized for the latest versions of Microsoft Internet<br />Explorer, Safari, and Firefox along with the latest version of the Flash plug-in. It will<br />also maintain a consistent appearance (to the extent practicable) on both the Mac<br />and Windows platforms.</blockquote></li><br /><li><a href="http://www.gatherspace.com/static/use_case_example.html">User Types</a>, Task Analysis, <a href="http://adaptivepath.com/events/training/complete/files.php">Competitive Analysis</a></li><br /><li>Now we can talk about someone's users while using this <a href="http://www.imaginationcubed.com/">cool web based white board</a></li><br /><br /><br /><li>Live Text vs. Graphic Text, Foreground vs. Background Image</li> <br /><br /><br /><br /> <li>PRESENTATION REVIEW:<br /> <li><a href="http://www.htmldog.com/guides/cssbeginner/">CSS Beginner Tutorial</a>, <a href="http://www.htmldog.com/guides/cssintermediate/">CSS Intermediate Tutorial</a></li><br /> <li><a href="http://www.maxdesign.com.au/presentation/workshop/slide23.htm">The Document Tree</a></li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/rule.htm">Selectors</a> </li><br /> <ul><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_type.htm">Type </a>Selectors (also called element or simple selectors)</li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_descendant.htm">Descendant</a> Selectors</li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_class.htm">Class </a>and <a href="http://css.maxdesign.com.au/selectutorial/selectors_id.htm">ID</a> Selectors</li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_pseudo_class.htm">Pseudo-classes</a></li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_universal.htm">Universal</a> Selector</li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_child.htm">Child</a> and <a href="http://css.maxdesign.com.au/selectutorial/selectors_adjacent.htm">Adjacent Sibling</a> Selectors (Advanced) </li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_attribute.htm">Attribute</a> Selectors (Advanced) </li><br /> </ul><br /> <li><a href="http://www.maxdesign.com.au/presentation/workshop/slide29.htm">Cascade</a>, <a href="http://www.maxdesign.com.au/presentation/workshop/slide30.htm">Specificity</a> and <a href="http://www.maxdesign.com.au/presentation/workshop/slide28.htm">Inheritance</a></li><br /><li>Advance CSS Rule practice<br /><ol><li>bare with me, you will be very glad near the end of your semester when you are writing specific rules to make tiny tweaks to your design if you know this stuff backwards and forwards</li><br /><li>Look at <a href="http://www.jayvanburen.com/css-example.html">this silly example page</a> that we will use</li><br /><li>Now, lets open <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_float6">this example page</a> and use it to get some practice in-- lets try these:<br /><ul><br /><li>make the word "even" red in one rule without also making the words "random" and "bananas"</li><br /><li>make the words "stone age village" and only those words be red as simply as possible</li><br /><li>make only the second "mushroom" be red as simply as possible</li><br /><li>make the word 'animals' blue and nothing else</li><br /><li>make the first link on the page have no underline while the second one keeps its underline</li><br /><br /></ul></li><br /><br /><br /></ol><br /></li><br /><li>Fun with background images<br /><ul><br /><li><a href="http://www.tizag.com/cssT/background.php">This site</a> has good examples of many things that you can do with a background image.<br /><li>lets play with <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_background-position_pixel">background image position</a> a little</li><br /><li>How to do Rounded Corners<br /><ul><li><br /><a href="http://del.icio.us/jay2earlyadopter/corners/">My Bookmarks on corners</a></li><br /><li>Lets try <a href="http://www.modxcms.com/simple-rounded-corner-css-boxes.html">getting this to work in class</a></li><br /><li>shadows on boxes -- we can look at the <a href="http://www.early-adopter.com/projects.php">example on my site</a> where <a href="http://www.early-adopter.com/images/shadow.png">this image</a> gets inserted by this rule<blockquote>div.projectsimg {<br />float:left; <br />width:236px; <br />height:79px; <br />background-image:url(images/shadow.png); <br />background-repeat:no-repeat; <br />margin:0px 25px 10px 14px; <br />padding:0px 0px 12px 12px; <br />background-position:12px 3px;}<br /></blockquote></li><br /></ul><br /></li><br /><br /></ul><br /><br /></li><br /><br /><li><br /><h2>HOMEWORK</h2><ul><br /><li>create a creative brief for your client and a competitive analysis of 3 - 5 sites that are like your clients site</li><br /><li>Pick on part of your Bill of Rights document or your homework page and add rounded corners using one of the techniques we talked about</li><br /></ul><br /><br /></li><br /></ul>earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com11tag:blogger.com,1999:blog-3303409105178769662.post-41951538368165428032008-02-06T14:22:00.001-08:002008-02-13T14:23:56.362-08:00Week #3<ol><br /> <li>post a link to your homework on the comments section of this blog post!</li><br /> <li><strong>An overview of Visual Formatting Model--- THINK INSIDE THE BOX!</strong> <br /> <ol><br /> <li><a href="http://darpa.pomona.edu/tutorials/css-positioning/" target="_blank">Box <br /> Model</a>: The box model defines how elements are displayed. Every <br /> CSS element forms a "box" composed of these components: <br /> <ul><br /> <li>Content - The actual content of the element such as text or <br /> an image. When using the width property, you are defining the <br /> width of the content.</li><br /> <li>Padding - Define the space around the content using the padding-top, <br /> padding-right, padding-bottom, padding-left properties.</li><br /> <li>Border - Define a stroke around the content and padding using <br /> the border-top, border-right, border-bottom, border-left properties.</li><br /> <li>Margin - Define the space around the combined content, padding <br /> and border using the margin-top, margin-right, margin-bottom, <br /> margin-left properties.</li><br /> </ul><br /> </li><br /> <br /> <li><a href="http://www.maxdesign.com.au/presentation/workshop/slide48.htm">IE/Win <br /> Box Model Quirks</a> <br /> <ol><br /> <li><a href="http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/" target="_blank">Diagram</a>: <br /> Comparison between W3C and IE/Win box models.</li><br /> </ol><br /> </li><br /> <li><a href="http://www.maxdesign.com.au/presentation/workshop/slide46.htm">Margin <br /> Collapsing</a>: When two or more vertical margins meet they will collapse <br /> to form a single margin with the height of the larger of the two margins. <br /> The vertical margins of nested elements will also collapse if they <br /> are not separated by padding or borders.</li><br /> <li><strong>Boxes: Block vs. Inline vs. Anonymous</strong> <br /> <ol><br /> <li> Block elements are elements such as <div>, <p>, <br /> or headers <h1>…<h6>. When their content is <br /> displayed the next element within the document structure will <br /> be positioned below it, not next to it. The vertical distance <br /> between boxes is calculated by the boxes vertical margins.</li><br /> <li><a href="http://www.w3.org/TR/CSS21/box.html" target="_blank">more on the box</a>: Inline elements are elements such as <a>. <strong>, <br /> <em> or <span>. Their content is displayed horizontally, <br /> within lines. Horizontal spacing between inline elements can be <br /> adjusted using padding, borders and margins. Vertical spacing <br /> has no affect on inline elements.</li><br /> <li><a href="http://www.maxdesign.com.au/presentation/inline/">Inline <br /> Elements and Padding</a></li><br /> <li><a href="http://www.w3.org/TR/REC-CSS2/visuren.html#anonymous-block-level">Anonymous <br /> Boxes</a>: A block or inline box that has not been explicitly <br /> defined as an element. You cannot style anonymous block or line <br /> boxes since there is nothing to connect to. (see link example)</li><br /> </ol><br /> </li><br /> </ol><br /> </li><br /> <li><strong>CSS Positioning</strong> <!--(<a href="lab_classfiles/visual_formatting.zip">Download <br /> lab files ZIP</a>) ---><br /> <ol><br /> <li>Static or <a href="http://css.maxdesign.com.au/floatutorial/introduction24.htm">Normal <br /> Flow</a>: Normal flow is the default scheme used for positioning. <br /> Block boxes flow vertically starting at the top of their containing <br /> block with each placed directly below the preceding one. Inline boxes <br /> flow horizontally from left to right.</li><br /> <li><a href="http://css.maxdesign.com.au/floatutorial/introduction26.htm"><strong>Relative</strong></a>: <br /> Relatively positioned elements are positioned within the normal flow <br /> and then moved using x and y coordinates. Elements that come after <br /> a relatively-positioned element behave as if the relatively-positioned <br /> element was still in its ‘normal flow’ position - leaving <br /> a gap for it. </li><br /> <li><a href="http://css.maxdesign.com.au/floatutorial/introduction27.htm"><strong>Absolute</strong></a>: <br /> An absolute positioned box is moved out of the normal flow entirely <br /> using x and y coordinates. Absolutely positioned boxes can overlap <br /> other elements on the page. Control the stacking order with the Z-index. <br /> The higher the Z-index, the higher the box is in the stack. Elements <br /> that come before or after an absolutely positioned box ignore it completely. <br /> an <a href="http://classes.jayvanburen.com/students/absolute-test.html">example of absolutely positioned DIVs</a><ol><br /> <li><strong><a href="http://css.maxdesign.com.au/floatutorial/introduction28.htm">Fixed</a></strong><a href="http://css.maxdesign.com.au/floatutorial/introduction28.htm"></a>: <br /> Fixed positioned elements are moved out of the normal flow entirely <br /> - relative to the viewport. This means that they don't move if <br /> the page is scrolled. Win/IE5 and Win/IE6 do not support this <br /> positioning method at all. </li><br /> </ol><br /> </li><br /> <li><a href="http://www.maxdesign.com.au/presentation/workshop/slide32.htm">Floating</a> <br /> : A floated box is taken out of the flow and shifted to the left or <br /> right until it touches the outer edge of its containing box or another <br /> floating box. Block-boxes in the normal flow behave as if the floated <br /> box wasn't there. Paragraphs of text (line boxes) next to a floated <br /> box can flow down the right side of a left-floated box and down the <br /> left side of a right-floated box. <a href="http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/">More good info on floats</a><br /> <ol><br /> <li><a href="http://www.maxdesign.com.au/presentation/workshop/slide37.htm"><strong>Clearing</strong></a>: <br /> Elements following a floated element will wrap around the floated <br /> element. To stop this from happening the "clear" property <br /> can be applied to "clear" a vertical space for all elements <br /> following the float.</li><br /> </ol><br /> </li><br /> </ol><br /> </li><br /> <li><strong>Layout</strong> <br /> <ol><br /> <li>Horizontally Centered <br /> <ol><br /> <li><a href="http://blog.html.it/layoutgala/LayoutGala39.html">Example</a></li><br /> <!--<li><a href="http://www.jennaspevack.com/%7Ecitytech/web_adv/course_cal/week03/classfiles/layout/centering-negative-margin.htm">One-Column</a> <br /> using negative margins</li><br /> <li><a href="http://www.jennaspevack.com/%7Ecitytech/web_adv/course_cal/week03/classfiles/layout/2-col-fixed.htm">Two </a>and <a href="http://www.jennaspevack.com/%7Ecitytech/web_adv/course_cal/week03/classfiles/layout/3-col-fixed.htm">Three-Column</a> <br /> using floats</li> --><br /> </ol><br /> </li><br /> <li>Liquid: Dimensions are set using percentages, allowing layouts to <br /> scale to fit the browser window. On some monitors layouts can feel <br /> stretched and line heights can get too long or too short. <br /> <ol><br /> <li><a href="http://www.maxdesign.com.au/presentation/liquid/">Three-Column</a> <br /> using floats</li><br /> <li><a href="http://www.maxdesign.com.au/presentation/two-columns/index.htm">Two-Column </a>using <br /> absolute-P</li><br /> </ol><br /> </li><br /> <li>Elastic: Dimensions are determined by the width of elements using <br /> ems. This is relative to the font size, not the browser width. <br /> <ol><br /><li><a href="http://www.alistapart.com/articles/elastic">good article about the debate</a></li><br /> <li><a href="http://www.htmldog.com/articles/elasticdesign/demo/">Elastic example</a></li><br /> <li><a href="http://riddle.pl/emcalc/">The px to em Calculator</a></li><br /> </ol><br /> </li><br /> <li>Elastic-liquid hybrid: Widths are set in ems and maximum widths <br /> are set as percentages. <br /> <ol><br /> <li><a href="http://www.webreference.com/authoring/style/sheets/css_mastery2/2.html">Hybrid example</a> <br /> </li><br /> </ol><br /> </li><br /> <li>Other <a href="http://www.maxdesign.com.au/presentation/page_layouts/">Sample <br /> CSS Layouts</a></li><br /> </ol><br /> </li><br /> <li><strong>PHASE ONE:</strong> Site Definition <br /> <ol><br /> <li>Outline of the development process; what is going to happen at each <br /> step; everyone's jobs (both the clients' and yours); and a timeline. <br /> <!-- <ul><br /> <li>Planning the Project (<a href="http://www.jennaspevack.com/%7Ecitytech/web_adv/tech_support/goto_planning.pdf">PDF</a>)</li><br /> <li>Work Flow (<a href="http://www.jennaspevack.com/%7Ecitytech/web_adv/tech_support/goto_workflow.pdf">PDF</a>)</li><br /> </ul>--><br /> </li><br /> <li>A few useful Articles: <br /> <ul><br /> <li><a href="http://www.sitepoint.com/article/designing-for-clients-made-easy">The <br /> Development Process</a></li><br /> <li><a href="http://www.macronimous.com/resources/web_development_life_cycle.asp">Web <br /> Development Life Cycle</a></li><br /> <li><a href="http://www.sitepoint.com/article/freelancers-perspective">Web <br /> Development Process</a></li><br /> </ul><br /> </li><br /> </ol><br /> </li><br /> <!--- <li><strong>Setting up your Client Site and Style Guide</strong> <br /> <ol><br /> <li><a href="http://www.jennaspevack.com/%7Ecitytech/web_adv/tech_support/site_setup.html">Defining a site</a></li><br /> <li>Review: <a href="http://www.jennaspevack.com/%7Ecitytech/web_adv/tech_support/naming.html">Proper file naming <br /> conventions</a>, <a href="http://www.yourhtmlsource.com/myfirstsite/basiclinks.html#linkalgymnastics">path <br /> structure</a> and <a href="http://www.yourhtmlsource.com/myfirstsite/basiclinks.html#SITESTRUCTURE">site <br /> structure</a></li><br /> <li>Modifying Dreamweaver Preferences for Standards Compliance and Accessibility. <br /> </li><br /> <li>Using XTHML Strict DTD: put this <a href="http://www.jennaspevack.com/%7Ecitytech/web_adv/tech_support/Default.html">default.html</a> <br /> file in Configuration > DocumentTypes > NewDocuments OR use <br /> it every time you create a new html file.</li><br /> <li>Upload files to your folder on the <a href="http://www.jennaspevack.com/%7Ecitytech/web_adv/tech_support/ftp_server.html">FTP <br /> Server</a></li><br /> </ol><br /> </li>---><br /><br /><li>lets discuss the <a href="http://darpa.pomona.edu/news/css-positioning-exercises/"> positioning Exercises</a> </li><br /> </ol><br /> <div name="homework"> <br /> <p class="separator"><a name="homework" id="homework" align="left"></a> <br /> <strong>Homework </strong></p><br /> </div><br /> <p>CLIENT WORK</p><br /> <ol><br /> <li><strong>Get Your Clients to fill out the Client survey- its due in class next week.</strong> <br /> </li><br /><li>do all 4 of the DARPA <a href="http://darpa.pomona.edu/news/css-positioning-exercises/">CSS POSITIONING EXERCISES</a> <br /> <br /> <li>Choose one, and make your Bill of Rights page liquid, elastic, or elastic liquid hybrid. </lI><br /><br /><br /> </ol><br /> <p>TECHNICAL PREPARATION</p><br /> <ul><br /> <br /> <li>Read Chapter 2 from the book <strong>CSS Mastery</strong></li><br /><!--- <li>Create and attach one or more layout stylesheet(s) to the index.html <br /> you created last week for your <a href="classfiles/styleguide.html">Client <br /> Site Style Guide</a>. Use one of the CSS layout techniques listed above. <br /> You must choose a technique you haven't used before.</li>---><br /> </ul>earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com11tag:blogger.com,1999:blog-3303409105178769662.post-9807692728718773102008-01-30T21:15:00.000-08:002008-02-04T18:16:18.845-08:00Week #2<ol><br /><li>Post a link to your homework page to the comments section of this blog post, your home work page should contain a link to your delicious tags and show your 5 bookmarks of sites that are excellent, lets take a look at them</li><br /><li>what is <a href="http://del.icio.us/jay2earlyadopter/web2.0">web 2.0</a></li><br /><li><a href="http://www.vaughns-1-pagers.com/internet/google-ranking-factors.htm">SEO madness</a></li><br /><li><a href="http://www.pingable.org/the-top-15-web-apis-for-your-site/">Top 25 APIs</a></li><br /><li>an aside -- the possibility of a new artform<a href="http://early-adopter.blogspot.com/2004/10/is-carl-rove-genius-on-par-with-marcel.html">is Carl Rove a Genius on Par with Marcel Duchamp?</a></li><br /><li>We will be looking at the pirate page and thinking about how it would be best done but first we need to cover some other material</li><br /><li>First Get the <a href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer Tools</a>! Do it now!</li><br /><br /> <li>A quick word about<a href="http://www.maxdesign.com.au/presentation/workshop/">Web Standards <br /> Workshop</a></li><br /> <li>STRUCTURE REVIEW and SEMANTIC MARKUP: <br /> <ol><br /> <br /> <li><a href="http://del.icio.us/jay2earlyadopter/semantic-markup/">My Semantic Markup bookmarks</a></li><br /> <li>Using Meaningful (<a href="http://www.maxdesign.com.au/presentation/workshop/slide8.htm">Semantic</a>) <br /> Markup</li><br /> <li>Logical Structure using Meaningful Elements (<a href="http://www.maxdesign.com.au/presentation/workshop/slide9.htm">examples</a>)</li><br /> <li>Additional Structure using divs and spans with <a href="http://builder.com.com/5100-6371-5286783.html">meaningful, <br /> structural IDs and class names</a>.</li><br /> <li><a href="http://www.maxdesign.com.au/presentation/workshop/slide4.htm">Validation</a> and<br /> <a href="http://www.w3.org/2003/12/semantic-extractor.html">meaning extraction</a></li><br /> <li><a href="http://www.maxdesign.com.au/presentation/workshop/slide6.htm">Document <br /> types, DOCTYPE switching, browser modes</a></li><br /><li>How would be the best way to have done the Pirate Page</li><br /><br /> <li><a href="http://www.archives.gov/national-archives-experience/charters/bill_of_rights_transcript.html">Bill of RIghts</a></li><br /><!-- <li>3 col layout done right at last: <a href="http://www.alistapart.com/articles/multicolumnlayouts">HOT OFF THE PRESSES!</a></li>--><br /> </ol><br /> </li><br /> <!--<li>PRESENTATION REVIEW: <br /> <ol><br /> <li><a href="http://www.htmldog.com/guides/cssbeginner/">CSS Beginner <br /> Tutorial</a>, <a href="http://www.htmldog.com/guides/cssintermediate/">CSS <br /> Intermediate Tutorial</a></li><br /> <li><a href="http://www.maxdesign.com.au/presentation/workshop/slide23.htm">The <br /> Document Tree</a></li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/rule.htm">Selectors</a> <br /> </li><br /> <ul><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_type.htm">Type <br /> </a>Selectors (also called element or simple selectors)</li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_descendant.htm">Descendant</a> <br /> Selectors</li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_class.htm">Class <br /> </a>and <a href="http://css.maxdesign.com.au/selectutorial/selectors_id.htm">ID</a> <br /> Selectors</li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_pseudo_class.htm">Pseudo-classes</a></li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_universal.htm">Universal</a> <br /> Selector</li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_child.htm">Child</a> <br /> and <a href="http://css.maxdesign.com.au/selectutorial/selectors_adjacent.htm">Adjacent <br /> Sibling</a> Selectors (Advanced) </li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/selectors_attribute.htm">Attribute</a> <br /> Selectors (Advanced) </li><br /> </ul><br /> <li><a href="http://www.maxdesign.com.au/presentation/workshop/slide29.htm">Cascade</a>, <br /> <a href="http://www.maxdesign.com.au/presentation/workshop/slide30.htm">Specificity</a> <br /> and <a href="http://www.maxdesign.com.au/presentation/workshop/slide28.htm">Inheritance</a></li><br /> <li>Planning, organizing, and maintaining stylesheets <br /> <ul><br /> <li>Multiple stylesheets, imported and linked (<a href="http://stopdesign.com/">example</a>)</li><br /> <li><a href="http://css.maxdesign.com.au/selectutorial/rules_comments.htm">Commenting</a> <br /> your CSS</li><br /> <li>Methods: <br /> <ul><br /> <li><a href="http://www.digital-web.com/articles/architecting_css/">Architecting <br /> css</a></li><br /> <li><a href="http://erraticwisdom.com/2006/01/18/5-tips-for-organizing-your-css">Tips <br /> for organizing your CSS</a></li><br /> <li>Organizing your stylesheet by grouping <a href="http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html">styles <br /> in sections</a></li><br /> <li>Organizing your stylesheet by grouping<a href="http://c82.net/article.php?ID=26"> <br /> styles by meaning</a></li><br /> </ul><br /> </li><br /> </ul><br /> </li><br /> </ol><br /> </li> <li>CSS Style Guides: <br /> <ol><br /> <li><a href="http://www.kevo.com/styleGuide.html">http://www.kevo.com/styleGuide.html</a></li><br /> <li><a href="http://sandbox.didcoe.id.au/styleguide/">http://sandbox.didcoe.id.au/styleguide/</a></li><br /> <li><a href="http://www.thenoodleincident.com/tutorials/typography/template.html">http://www.thenoodleincident.com/tutorials/typography/</a></li><br /> </ol><br /> </li><br /> <li>Creating a complete Style Guide for your client site <br /> <ol><br /> <li>CSS Mastery: <a href="http://www.jennaspevack.com/%7Ecitytech/web_adv/tech_support/styleguide/styleguide.htm">Sample <br /> Style Guide</a></li><br /> <li><a href="http://www.nypl.org/styleguide/">NY Public Library Style <br /> Guide </a></li><br /> <li><a href="http://www.uoguelph.ca/web/styleguide.shtml">University <br /> of Guelph Style Guide</a></li><br /> <li><a href="http://www.upenn.edu/webguide/style_guide/">University <br /> of Pennsylvania Style Guide</a></li><br /> </ol><br /> </li><br /> </ol> --><br /> <br /><h3>Resources</h3><br /> <ul> <li><a href="http://www.htmldog.com/guides/htmlbeginner/">XHTML Beginner <br /> Tutorial</a>, <a href="http://www.htmldog.com/guides/htmlintermediate">XHTHL <br /> Intermediate Tutorial</a></li></ul><br /> <p class="separator"><b class="separator" align="left"><a name="homework" id="homework" align="left"></a>Homework <br /> </b>|<b class="separator" align="left"> </b><i>Week 2</i></p><br /> <p class="content">For next class:</p><br /> <p>CLIENT WORK</p><br /> <ul><br /> <li>Contact your client and ask them to fill out a Client Survey form.</li><br /> <li>Create your own form or use this as a guide: <br /> <ul><br /> <li><a href="http://docs.google.com/Doc?id=dgg3qfgz_4gp49kcc8">Sample Client <br /> Survey</a></li><br /> </ul><br /> </li><br /> <li>Only offer services you are able to provide and make sure the client <br /> understands that this is a class project and you have a schedule to keep.</li><br /> <li>Please ask them to return the form by next class meeting.</li><br /> </ul><br /> <p>Skills practice and Reading</p><br /> <ul><br /> <li>Semantic Markup practice finish and style Bill of Rights-- all semantic markup try to use as simple CSS as you can</lI><br /><li>Read Chapter 1 in CSS Mastery</li> <br /></ul><br /> </li><br /> <br /> </ol>earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com9tag:blogger.com,1999:blog-3303409105178769662.post-66759561405175136532008-01-23T13:43:00.000-08:002008-01-23T22:33:40.134-08:00Week #1<h2>Topics Covered in Class:</h2><br /> <ol><br /><li>Introduction to the class<br /><ol><br /><li><a href="http://vanburen-adv-web.blogspot.com/2008/01/advanced-web-design-crn-3053-spring.html">Syllabus</a></li><br /><li><a href="http://spreadsheets.google.com/ccc?hl=en&key=pUgWMocGtw9r-S7aDjVMRZg#">Schedule</a></li><br /></ol><br /></li><br /><li>Introduction to Jay<br /><ol><br /><li>parsons</li><br /><li>multex</li><br /><li>bellwether</li><br /><li>thirdmind</li><br /><li>SENSEI</li><br /><li><a href="http://www.early-adopter.com">E-A</a></li><br /><li><a href="http://www.jayvanburen.com">Art</a></li><br /></ol><br /></li><br /><li>Tools we'll be using<br /><ul><br /><li><a href="http://del.icio.us">del.icio.us</a></br>My Delicious tags are <a href="http://del.icio.us/jay2earlyadopter">here</a> and my tags for this class are <a href="http://del.icio.us/jay2earlyadopter/ad650">here</a>. (this was the course number for the first advanced web design course i taught and i've just kept this-- bookmark it for yourself so you don't forget it!</li><br /><!--<li>firefox "Web Developer" plugin</li>--><br /><li>this blog</li><br /></ul><br /></li><br /><br /><li>Introduction to <a href="http://www.youtube.com/watch?v=6gmP4nk0EOE">web 2.0</a></li><br /> <li>REVIEW: <br /> <ul><br /> <li>What is Functionality? "<strong>Functionality</strong>" refers to the features or functions provided by the product. The primary focus is on what the user can do with the product.</li><br /><br /> <li><a href="http://www.webdesignfromscratch.com/usability.cfm">What is Usability</a>? "<strong>Usability</strong>" refers to the ability to use a product easily, effectively, and efficiently to perform a task. The primary focus is on how people work with a product.</li><br /> <li>What are Aesthetics? "<strong>Aesthetics</strong>" are <br /> a set of generally agreed upon ideas about what makes effective communication in a given medium. Establishing an aesthetical sensibility requires that you look beyond your own personal likes and dislikes to evaluate a work within the medium in which it is presented.</li><br /> <li>The <a href="http://www.digital-web.com/articles/digital_convergence/">FUTURE</a> of web design and avoiding obsolescence as a web designer</li><br /><br /> </ul><br /> </li><br /> <li>REVIEW: <br /> <ul><br /> <li><a href="http://webstandardsgroup.org/standards/">What are Web Standards?</a></li><br /> <li><a href="http://www.456bereastreet.com/archive/200512/ten_reasons_to_learn_and_use_web_standards/">Ten <br /> reasons to learn and use web standards</a></li><br /> </ul><br /><br /> </li><br /> <li>REVIEW: <br /> <ul><br /> <li> What is Accessibility? "<strong>Accessibility</strong>" is used to describe how easy something is for everybody to use, regardless of impairment or disability.</li><br /> <li><a href="http://jennaspevack.com/webstandards/03b1access.html">Why is Accessibility important?</a></li><br /> <li><a href="http://www.digital-web.com/articles/ten_reasons_clients_dont_care_about_accessibility/">10 <br />Reasons Clients Don't Care About Accessibility</a></li><br /><br /> <li>LEGAL PRECEDENT SET FOR WEB ACCESSIBILITY: <a href="http://www.nfb.org/nfb/Target_Sept_Release.asp?SnID=434667">NFB v. Target</a></li><br /> </ul><br /> </li><br /><!---<li>FTP drill!<br /><ul><br /><li>parts of a URL<li><br /><li>rules for names, no spaces, no special characters... what about capitalization? what about file extensions?</li><br /><li>Review of how dreamweaver works with files. Where are my files? *LEARN THIS! Why?</li><br /><li>ftp://www.jayvanburen.com<br><br />student:notables<br><br />(standard way of notating username:password)<br /></li> <br /><li>go into the folder called "monday" and create a folder that is your lastname all lower case all one word</li><br /><br /></ul><br /> </li> ---><br /><br /><br /><li><h3>Day One Skills Test</h3><br />In this in-class test you will be asked to create a simple web page from scratch. <br /><ul><br /><li>Step 1, download <a href="http://classes.jayvanburen.com/day1download.zip">this zip file right here</a></li><br /><li>Step 2, unzip the file you will see<ul><li>one photoshop document</li><li>one png screenshot</li></ul></li><br /><li>Step 3, using the photoshop file to find exact colors, sizes, and fonts and for the image of the "pirates" which you can crop out of the photoshop doc, recreate this screenshot as an html page as accurately as you can</li><br /></ul><br />If you know how to use css do it, and make your page have an external style sheet, if you don't just build it however you know how to. If you know what i mean by "semantic markup" make the markup as semantic as you can. If you are unable to build a page like this, you should not be in this class.<br /><br /> </li><br /><li>Finding a Client <br /> <ul><br /> <li>Look for someone with an existing business who is interested in having a web site designed or redesigned. The services you are offering are low or no-cost web design. You will complete the project within the next 15 weeks, so your client must be available by phone or email during that time. </li><br /> <li>Some good places to contact are: <br /> <ul><br /><li><a href="http://www.nyssbdc.org/centers/centers.cfm?centid=24">Manhattan Small Business Development Center</a></li><br /> <li><a href="http://www.bedc.org/">Brooklyn Economic Development Corporation</a></li><br /> <li><a href="http://www.nyssbdc.org/centers/centers.cfm?centid=20">Small Business Development Center at Brooklyn</a></li><br /> <li><a href="http://www.ibrooklyn.com/site/contactus/contact">Brooklyn <br /> Chamber of Commerce</a></li><br /> </ul><br /> </li><br /> <li>You can also try advertising around the school. Many students and faculty have small-businesses and are often looking for a web site designer. Again, make sure the business is an existing one, not a startup.</li><br /> <li>Start by asking your client to fill out a Client Survey <br /> <ul><br /><br /> <li><a href="http://docs.google.com/Doc?id=dgg3qfgz_4gp49kcc8">Sample Client Survey</a></li><br /> </ul><br /> </li><br /> </ul><br /> </li><br /></ol><br /> Homework Week 1<br /> <ol><br /> <li>Buy the required textbooks from Amazon or Barnes & Noble. OR - Read them on Online Library<br /> <ul><br /> <li><a href="http://www.amazon.com/css-mastery-advanced-standards-solutions/dp/1590596145/">CSS <br /> Mastery</a>, friends of ED (February 13, 2006), ISBN#1590596145</li><br /><br /> <li><a href="http://www.amazon.com/exec/obidos/ASIN/1590595335/">DOM <br /> Scripting</a>, friends of ED (September 20, 2005), ISBN#1590595335</li><br /> </ul><br /> </li><br /> <li>Start looking for a small business client to work with this semester. <br /> </li><br /> <br /><li>Find five sites that are examples of excellence in web design and Del.icio.us them, include why you chose them in the notes field </li><br /><li>Reading: The section of Chapter five of the Cluetrain Manifesto called <a href="http://www.cluetrain.com/book/hyperorg.html">Fort Business</a>. If you are interested read the whole chapter. </li><br /><li>Create homework index page and post homework link (that is a link to your delicious tags) to it (or blog if necessary). Link homework page to this blog's comments section.</li><br /><br /> </ol><br />Resources<br /><ul><li>If you're not familiar with coding with <a href="http://webstandardsgroup.org/standards/">web standards</a>, or don't know much about structure vs. presentation and the basic rules and syntax of XHTML and CSS you'll want to refresh your XHTML and/or CSS skills complete the following two tutorials before next week. <br /> <ul><br /><br /> <li><a href="http://www.htmldog.com/guides/htmlbeginner/">XHTML Beginner Tutorial</a></li><br /> <li><a href="http://www.htmldog.com/guides/htmlintermediate">XHTHL Intermediate Tutorial</a></li><br /> <li><a href="http://www.htmldog.com/guides/cssbeginner/">CSS Beginner Tutorial</a></li><br /> <li><a href="http://www.htmldog.com/guides/cssintermediate/">CSS Intermediate Tutorial</a></li><br /> </ul><br /> </li><br /> <li>If you feel totally lost, I recommend that you take the basic web design class instead, but if you're determined to catch up, complete the tutorials above and buy the additional book below: <br /> <ul><br /><br /> <li><a href="http://www.amazon.com/Build-Your-Right-Using/dp/0975240293">Build Your Own Web Site the Right Way</a> Using HTML & CSS, Ian Lloyd, SitePoint (May 2, 2006), ISBN#0975240293</li><br /> </ul><br /> </li> </ul>earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com22tag:blogger.com,1999:blog-3303409105178769662.post-82452621585767305852008-01-18T21:25:00.000-08:002008-01-24T05:44:24.620-08:00Syllabus<p><strong>Advanced Web Design</strong><br /><br /><!--PUDD 2028 C--><br /><br />CRN 3053<br /><br />Spring 2008</p><br /><p><strong>Instructor: </strong>Jay Van Buren<br /><br /><strong>Email: </strong>ad650@early-adopter.com<br /><br /><!--Based on Syllabus by Catherine Garnier use with permission ---><br /><strong>Course URL:</strong> http://vanburen-adv-web.blogspot.com/</p><br /><p><strong>Hours: </strong>Thursday, 9:00 - 11:40<br /><br /><strong>Location: </strong>55 W. 13th, Rm. 425</p><br /><p><strong>Course Description: </strong><br /><br />The Web may be a turning point in human history that rivals the taming of fire or the invention of the printing press. It's been changing profoundly how we do business and communicate for the past 10 years and its just getting started. New technologies are ensuring that as the haystack of information grows exponentially our ability to find the needle we need at any particular moment is growing too. </p><br /><p>Whether you are selling a product or service, trying to convince people of an idea, or creating interactive art, the web is the air we all breathe. Understanding how to use this medium as well as it can be used will help your (or your client's) content stand out both now and in the future. </p><br /><p> The main projects will be the completion of a website for an actual client, including all the stages that a professional web designer should go through on the way to creating the site. This class is not about learning to create websites (you should already know that). This class is about creating truly excellent, beautiful, elegant websites that are built using the best possible practices, and match the needs of your client in both form and function. We'll also spend some time talking about and trying to understand both where we are right now and where we are headed. </p><br /><p><strong>Course Goals:</strong><br /><br />Upon successful completion of this class, the student will have gained the skills be a professional web designer, and will have a thorough grasp of the state of the art of web design including both aesthetic, conceptual and technical issues.</p><br /><br /><p><strong>Grading:</strong></p><br /><p>10% - Attendance and Class Participation<br /><br />40% - Weekly Assignments (each one will be worth 6 points 6=excellent, 5=average, 4=acceptable, not turned in = 0)<br /><br />50% - Final Project</p><br /><p><strong>Course Requirements:</strong></p><br /><ul><br /><li><strong>Come to class on time.</strong> Students arriving more than 20 minutes late may be marked absent.</li><br /><br /></ul><br /><ul><br /><li><strong>Attend all classes.</strong> Each week we will build on the work learned the week before. If you must miss a class, please let me know ahead of time. It is your responsibility to obtain any missed material from your fellow classmates, and to turn assignments in on time even if you are absent. Students missing more than three classes may fail the course.</li><br /></ul><br /><ul><br /><li><strong>Turn in assignments on time.</strong> Work turned in late will lose one point (from a possible 6) every week that it is late. Final projects may not be turned in late.</li><br /></ul><br /><ul><br /><li><strong>Ask Questions.</strong> This is a technical class, and we will be covering a lot of information in a short time. If you are confused, lost, need clarification, etc, please don’t hesitate to ask questions in class. Chance are your fellow students will benefit from the answers AND this will add to your class participation grade! I am also available between classes via email.</li><br /><br /></ul><br /><ul><br /><li><strong>Academic Integrity.</strong> Plagiarism and cheating of any kind in the course of academic work will not be tolerated. Academic honesty includes accurate use of quotations, as well as appropriate and explicit citation of sources in instances of paraphrasing and describing ideas, or reporting on research findings or any aspect of the work of others (including that of instructors and other students). These standards of academic honesty and citation of sources apply to all forms of academic work (examinations, essays, theses, computer work, art and design work, oral presentations, and other projects).</li><br /></ul><br /><ul><br /><li>It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension from the university, or dismissal from the university.</li><br /></ul><br /><ul><br /><li>Every student at Parsons signs an Academic Integrity Statement as a part of the registration process. Thus, you are held responsible for being familiar with, understanding, adhering to and upholding the spirit and standards of academic integrity as set forth by the Parsons Student Handbook.</li><br /></ul><br /><p><strong>Reading and Resources:</strong></p><br /><br /><p>There are two texts that we'll be reading from<ul> <li><a href="http://www.amazon.com/css-mastery-advanced-standards-solutions/dp/1590596145/">CSS <br /> Mastery</a>, friends of ED (February 13, 2006), ISBN#1590596145</li><br /><br /> <li><a href="http://www.amazon.com/exec/obidos/ASIN/1590595335/">DOM <br /> Scripting</a>, friends of ED (September 20, 2005), ISBN#1590595335</li></ul></p>earlyadopterhttp://www.blogger.com/profile/02187019463247269089noreply@blogger.com1