Chapter 12 CS6 - Revision history

Michael: addiing workfile

2013-03-05T21:52:19Z

addiing workfile

Robin at 19:32, 14 February 2013

2013-02-14T19:32:31Z

Robin: /* Visual Examples */

2013-02-14T18:19:07Z

Visual Examples

Robin: /* Exercise 4: Posting to a blog */

2013-02-08T21:01:25Z

Exercise 4: Posting to a blog

Robin: /* Exercise 4: Posting to a blog */

2013-02-08T21:00:32Z

Exercise 4: Posting to a blog

Robin: /* Exercise 3: Uploading to Flickr */

2013-02-08T20:56:31Z

Exercise 3: Uploading to Flickr

Robin: /* Exercise 1: From digital input to web ready */

2013-02-08T20:48:32Z

Exercise 1: From digital input to web ready

Robin: /* Visual Examples */

2013-02-08T15:57:04Z

Visual Examples

Robin: /* Visual Examples */

2013-02-08T15:55:48Z

Visual Examples

Robin: /* Exercise 2: GIF vs JPEG */

2013-02-07T21:01:17Z

Exercise 2: GIF vs JPEG

@@ Line 1: / Line 1: @@
 =Download Materials for Chapter 12=
-[http://www.missconceptions.net/digital-foundations/ch12-files.zip Click here to download chapter 12 work files.]
+[http://wiki.digital-foundations.net/images/workfiles/ch12-files-CS6.zip Click here to download chapter 12 work files.]
@@ Line 21: / Line 21: @@
 =Exercise 1: From digital input to web ready=
-.	Download and open seagram_building.jpg from the wiki, or get any image from your digital camera or scanner.
+.	Download and open [http://wiki.digital-foundations.net/images/workfiles/ch12-files-CS6.zip seagram_building.jpg] from the wiki, or get any image from your digital camera or scanner.
 <br><br>

@@ Line 14: / Line 14: @@
 [[File:Firefox004_CS6.png|400px|top]]&nbsp;&nbsp;&nbsp; [[File:Firefox007_CS6.png|400px]]
-From top left to bottom right: Whitehouse.gov on October 23, 1997; Whitehouse.gov on November 5, 2008;<span style="color:red"><strike> Pizzahut.com on February 14, 1997; Pizzahut.com on November 5, 2008.</strike> Apple.com on July 14th, 1997; apple.com on February 7th, 2013; guggenheim.org on December 27, 1996; guggenheim.org on February 7th, 2013.</span>
+From top left to bottom right: Whitehouse.gov on October 23, 1997; Whitehouse.gov on November 5, 2008; Apple.com on July 14th, 1997; apple.com on February 7th, 2013; guggenheim.org on December 27, 1996; guggenheim.org on February 7th, 2013.
 <table class=”infobox”><tr><td>
 Note: The Wayback Machine contains an archive of over 85 billion web pages. You can use this search engine at http://www.archive.org.
@@ Line 21: / Line 21: @@
 =Exercise 1: From digital input to web ready=
-.	Download and open <span style="color:red"><strike>orbitzad1.jpg</strike>seagram_building.jpg</span> from the wiki, or get any image from your digital camera or scanner.
+.	Download and open seagram_building.jpg from the wiki, or get any image from your digital camera or scanner.
 <br><br>
@@ Line 33: / Line 33: @@
 [[File:Photoshop045_CS6.png|300px]]&nbsp;&nbsp;&nbsp; [[File:Photoshop046_CS6.png|300px]]&nbsp;&nbsp;&nbsp; [[File:Photoshop046a_CS6.png|300px]]
-.	Save this file as a master copy by choosing Save As from the file menu, adding “_master” to the file name and then choosing PSD as the file format. We saved ours as <span style="color:red"><strike>orbitz_master.psd.</strike> seagram_building_master.psd.</span>
+.	Save this file as a master copy by choosing Save As from the file menu, adding “_master” to the file name and then choosing PSD as the file format. We saved ours as seagram_building_master.psd.
 <br><br>
-.	The image from the wiki <span style="color:red"><strike>is straight off a 7-megapixel</strike>was taken by a 21-megapixel</span> digital camera, and is much larger than can be displayed on a web site. Choose Image > Image Size and notice the size of your image in pixels. Check the boxes next to Resample Image and Constrain Proportions, then change the pixel dimensions at the top of the box so the largest dimension is no larger than 1600px. If your image is less than 1600px on its long side, you can use the Cancel button to close this dialog box without making any changes.
+.	The image from the wiki was taken by a 21-megapixel digital camera, and is much larger than can be displayed on a web site. Choose Image > Image Size and notice the size of your image in pixels. Check the boxes next to Resample Image and Constrain Proportions, then change the pixel dimensions at the top of the box so the largest dimension is no larger than 1600px. If your image is less than 1600px on its long side, you can use the Cancel button to close this dialog box without making any changes.
 [[File:Photoshop047_CS6.png]]
@@ Line 67: / Line 67: @@
-.	Click on the 2-Up tab to show the original image in its native format next to the compressed image. Notice that the original image has a file size of <span style="color:red"><strike>5.49MB</strike>4.88MB</span>, and the file size of the optimized image is <span style="color:red"><strike>368KB</strike>155.3KB. <strike>The compressed image is 15% of the original file size.</strike></span>. This is important because the smaller the file size is, the faster the image will download as part of a web page.
+.	Click on the 2-Up tab to show the original image in its native format next to the compressed image. Notice that the original image has a file size of 4.88MB, and the file size of the optimized image is 155.3KB. This is important because the smaller the file size is, the faster the image will download as part of a web page.
 <br><br>
@@ Line 76: / Line 76: @@
 </td></tr></table>
-.	Reduce the quality to Low, or 10. Notice how much detail is lost. Visible compression artifacts are introduced into the image. Our file size is much smaller at <span style="color:red"><strike>85KB</strike> 44.2KB, but we have compromised too much image quality for the sake of the smaller file size.
+.	Reduce the quality to Low, or 10. Notice how much detail is lost. Visible compression artifacts are introduced into the image. Our file size is much smaller at 44.2KB, but we have compromised too much image quality for the sake of the smaller file size.
 <br><br>
@@ Line 89: / Line 89: @@
 [[File:Photoshop059_CS6.png]]
-.	Name your file with an underscore and the word “web” like we did when we named ours <span style="color:red"><strike>orbitzad_web.jpg</strike> sea gram_building_web.jpg</span>, and save it to the Desktop. Remember web standards when naming files: only use lowercase alphanumerics, underscores, and dashes.
+.	Name your file with an underscore and the word “web” like we did when we named ours seagram_building_web.jpg, and save it to the Desktop. Remember web standards when naming files: only use lowercase alphanumerics, underscores, and dashes.
 <br><br>
-.	Close and do not save the <span style="color:red"><strike>orbitz_master.psd</strike>seagram_building_master.psd that is currently open. (We saved the master file in Step 3 before scaling the image and we don’t want to save this smaller version over it.)
+.	Close and do not save the seagram_building_master.psd that is currently open. (We saved the master file in Step 3 before scaling the image and we don’t want to save this smaller version over it.)
 <br><br>
@@ Line 99: / Line 99: @@
 </td></tr></table>
-.Open the JPEG you just saved for web <span style="color:red"><strike>(ours is orbitzad_web.jpg)</strike>(ours is seagram_building_web.jpg)</span> in Photoshop, and notice that there are no adjustment layers. By saving for the web, we flattened the image.
+.Open the JPEG you just saved for web (ours is seagram_building_web.jpg). in Photoshop, and notice that there are no adjustment layers. By saving for the web, we flattened the image.
 =Exercise 2: GIF vs JPEG=
@@ Line 118: / Line 118: @@
 =Exercise 3: Uploading to Flickr=
-We will upload this photo to Flickr, and then post it to a WordPress blog in the next exercise. <span style="color:red"><strike>Our example was a post to the blog maintained by the Anti Advertising Agency (http://antiadvertisingagency.com/). In their words, “The Anti-Advertising Agency co-opts the tools and structures used by the advertising and public relations industries.... Through constructive parody and gentle humor our Agency’s campaigns will ask passers by to critically consider the role and strategies of today’s marketing media as well as alternatives for the public arena.”  (http://antiadvertisingagency.com/our-mission).  </strike>
+We will upload this photo to Flickr, and then post it to a WordPress blog in the next exercise.
 <br><br>
@@ Line 130: / Line 127: @@
 <br><br>
-.	Click on Choose photos and videos. In the window that comes up, locate your JPEG <span style="color:red"><strike>(ours is orbitzad_web.jpg)</strike> (our is sea gram_building.jpg), and click Select.
+.	Click on Choose photos and videos. In the window that comes up, locate your JPEG (our is seagram_building.jpg), and click Select.
 <br><br>
@@ Line 142: / Line 139: @@
 <br><br>
-.	Give the file a description, when we posted it was <span style="color:red"><strike>“An unimaginative Orbitz ad about an unimaginative use of technology.”</strike>"Structural Modernism of the Mies van der Rohe Seagram Building, 375 Park Avenue."
+.	Give the file a description, when we posted it was "Structural Modernism of the Mies van der Rohe Seagram Building, 375 Park Avenue."
 <br><br>
-.	Give the file tags. Tags are what allow people to find your file in an image search. For this image, the tags are<span style="color:red"><strike> “Advertisement, Orbitz, Cell phone, suit, luggage, travel, traffic, JFK”</strike>"Building, Seagram, Architecture, Bauhaus, Park Avenue, Mies van der Rohe, Structure"
+.	Give the file tags. Tags are what allow people to find your file in an image search. For this image, the tags are, "Building, Seagram, Architecture, Bauhaus, Park Avenue, Mies van der Rohe, Structure"
 <br><br>
@@ Line 161: / Line 158: @@
 <br><br>
-.	Copy the code from the bottom of the page that allows you to link to your image. Navigate to your blog. <span style="color:red"><strike>We made our post at AntiAdvertisingAgency.com.</strike>
+.	Copy the code from the bottom of the page that allows you to link to your image. Navigate to your blog.
 =Exercise 4: Posting to a blog=
 While setting up and maintaining a blog is somewhat beyond the scope of this book, so many people have blogs these days, that we will assume that you either have a blog, or have used a blog. If this is not true, focus on learning  how you can load an image from one web site onto another with simple, prewritten code. This is relevant for Chapters 15 – 17.
 <br><br>
@@ Line 182: / Line 180: @@
 <br><br>
-.	Add tags that will help a searcher land on the viewpoint you want to share. Tags are a way of categorizing and organizing the content on a site.  Generally you want to use tags that you have previously used.  So if you have initially used a tag “design” you probably would want to use that tag rather than introducing something like “designey” or “designed.”  Working within <span style="color:red"><strike>the</strike></span> existing tag categories<span style="color:red"><strike> on the Anti Advertising Agency blog, we tagged our post “billboard, branding, justfollowingorders, not creative, self-loathing, you don't need it”</strike>we tagged our post "building, design, structure, bauhaus, modernism, Mies van der Rohe" </span>because we are blogging about it from a critical point of view. When you are applying tags, try to put yourself in the shoes of a person searching the web. Ask yourself what words they might use in hopes of finding the content you are creating.
+.	Add tags that will help a searcher land on the viewpoint you want to share. Tags are a way of categorizing and organizing the content on a site.  Generally you want to use tags that you have previously used.  So if you have initially used a tag “design” you probably would want to use that tag rather than introducing something like “designey” or “designed.”  Working within existing tag categories, we tagged our post "building, design, structure, bauhaus, modernism, Mies van der Rohe" because we are blogging about it from a critical point of view. When you are applying tags, try to put yourself in the shoes of a person searching the web. Ask yourself what words they might use in hopes of finding the content you are creating.
 <br><br>
-.	Select a category, in this case <span style="color:red"><strike>“News.”</strike> "Architecture".
+.	Select a category, in this case, "Architecture".
 <br><br>
@@ Line 191: / Line 189: @@
 <br><br>
-.	Click on the View Post link to view your post. <span style="color:red"><strike>The post we made is located at http://antiadvertisingagency.com/news/orbitz-ad-distinct-lack-of-imagination</strike>
+.	Click on the View Post link to view your post.
 <br><br>
 <table class="infobox">

@@ Line 9: / Line 9: @@
 <br>
 <br>
-[[File:Firefox005_CS6.png|400px]]&nbsp;&nbsp;&nbsp; [[File:Firefox006_CS6.png|400px]]
+[[File:Firefox005_CS6.png|400px]]&nbsp;&nbsp;&nbsp; [[File:Firefox006_CS6.png|top|400px]]
 <br>
 <br>

@@ Line 182: / Line 182: @@
 <br><br>
-.	Add tags that will help a searcher land on the viewpoint you want to share. Tags are a way of categorizing and organizing the content on a site.  Generally you want to use tags that you have previously used.  So if you have initially used a tag “design” you probably would want to use that tag rather than introducing something like “designey” or “designed.”  Working within <span style="color:red><strike>the</strike></span> existing tag categories<span style="color:red><strike> on the Anti Advertising Agency blog, we tagged our post “billboard, branding, justfollowingorders, not creative, self-loathing, you don't need it”</strike>we tagged our post "building, design, structure, bauhaus, modernism, Mies van der Rohe" </span>because we are blogging about it from a critical point of view. When you are applying tags, try to put yourself in the shoes of a person searching the web. Ask yourself what words they might use in hopes of finding the content you are creating.
+.	Add tags that will help a searcher land on the viewpoint you want to share. Tags are a way of categorizing and organizing the content on a site.  Generally you want to use tags that you have previously used.  So if you have initially used a tag “design” you probably would want to use that tag rather than introducing something like “designey” or “designed.”  Working within <span style="color:red"><strike>the</strike></span> existing tag categories<span style="color:red"><strike> on the Anti Advertising Agency blog, we tagged our post “billboard, branding, justfollowingorders, not creative, self-loathing, you don't need it”</strike>we tagged our post "building, design, structure, bauhaus, modernism, Mies van der Rohe" </span>because we are blogging about it from a critical point of view. When you are applying tags, try to put yourself in the shoes of a person searching the web. Ask yourself what words they might use in hopes of finding the content you are creating.
 <br><br>
-.	Select a category, in this case “News.”
+.	Select a category, in this case <span style="color:red"><strike>“News.”</strike> "Architecture".
 <br><br>
@@ Line 191: / Line 191: @@
 <br><br>
-.	Click on the View Post link to view your post. <span style="color:red><strike>The post we made is located at http://antiadvertisingagency.com/news/orbitz-ad-distinct-lack-of-imagination</strike>
+.	Click on the View Post link to view your post. <span style="color:red"><strike>The post we made is located at http://antiadvertisingagency.com/news/orbitz-ad-distinct-lack-of-imagination</strike>
 <br><br>
 <table class="infobox">

@@ Line 173: / Line 173: @@
 <br><br>
-.	Give your post a title. We called ours “Orbitz Ad: Distinct Lack of Imagination.”
+.	Give your post a title. We called ours "Structural Modernism of the Mies van der Rohe Seagram Building, 375 Park Avenue."
-<br><br>
 .	Paste the image code that is in your clipboard into the post.
@@ Line 182: / Line 182: @@
 <br><br>
-.	Add tags that will help a searcher land on the viewpoint you want to share. Tags are a way of categorizing and organizing the content on a site.  Generally you want to use tags that you have previously used.  So if you have initially used a tag “design” you probably would want to use that tag rather than introducing something like “designey” or “designed.”  Working within the existing tag categories on the Anti Advertising Agency blog, we tagged our post “billboard, branding, justfollowingorders, not creative, self-loathing, you don't need it” because we are blogging about it from a critical point of view. When you are applying tags, try to put yourself in the shoes of a person searching the web. Ask yourself what words they might use in hopes of finding the content you are creating.
+.	Add tags that will help a searcher land on the viewpoint you want to share. Tags are a way of categorizing and organizing the content on a site.  Generally you want to use tags that you have previously used.  So if you have initially used a tag “design” you probably would want to use that tag rather than introducing something like “designey” or “designed.”  Working within <span style="color:red><strike>the</strike></span> existing tag categories<span style="color:red><strike> on the Anti Advertising Agency blog, we tagged our post “billboard, branding, justfollowingorders, not creative, self-loathing, you don't need it”</strike>we tagged our post "building, design, structure, bauhaus, modernism, Mies van der Rohe" </span>because we are blogging about it from a critical point of view. When you are applying tags, try to put yourself in the shoes of a person searching the web. Ask yourself what words they might use in hopes of finding the content you are creating.
 <br><br>
@@ Line 191: / Line 191: @@
 <br><br>
-.	Click on the View Post link to view your post. The post we made is located at http://antiadvertisingagency.com/news/orbitz-ad-distinct-lack-of-imagination
+.	Click on the View Post link to view your post. <span style="color:red><strike>The post we made is located at http://antiadvertisingagency.com/news/orbitz-ad-distinct-lack-of-imagination</strike>
 <br><br>
 <table class="infobox">
 <tr>
 <td>Tip: If you don’t already have a blog, you can get a free WordPress blog at WordPress.com. We like WordPress because there is a large community of users, great documentation, loads of themes and plug-ins, and it is open source (meaning, the source code is available for augmentation and manipulation.) Tumblr, Blogger, Moveable Type, and TypePad are also quality blog platforms.
 </td></tr></table>

@@ Line 110: / Line 110: @@
 <br>
 <br>
-[[File:Photoshop123.jpg|400px]]&nbsp;&nbsp;&nbsp; [[File:Photoshop124.jpg|400px]]
+[[File:Photoshop123_CS6.png|400px]]&nbsp;&nbsp;&nbsp; [[File:Photoshop124_CS6.png|400px]]
 Notice in the above images, the photograph saved as a GIF file is larger and of lower visual quality than the photograph saved as a JPEG file. Likewise, the graphic saved as a JPEG has a larger file size with a lower image quality than the graphic saved as a GIF.