September 12, 2008 Archives

Some tips based on what I've heard from students so far.

• Remember that on page 55, we created a new web page called "index.html," and on page 59 we created a new stylesheet called "home.css".  In Part 2 of Castro, we're making changes to those two files.  But "index.html" also links to "sarahs_styles.css", so if you're having layout problems in index.html, check to make sure that "sarahs_styles.css" is also accurate.
• Your browser may display the spacing of the horizontal lines or buffer zones in a matter that's slightly different from that depicted in Castro's text.  Web browsers change slightly over time, and HTML authors shouldn't obsess over slight differences in screen rendering. Users regularly change the width and resolution of their browser window, or scale the type size up and down.  If this were a design class, we'd go into more detail about that, but users expect page layouts to be fluid. If you can't get a design detail exactly the way it looks in the book, ask a classmate about it, and if that doesn't help, move on. (I'll be happy to help you troubleshoot during class.)
  
• Closure is good. Carefully check that every <div> tag has its matching </div> tag, and that every <p> tag has a matching </p> tag (and so forth).  A stray > character can make your browser hide half of your page, and a missing < character will make your formatting code visible (so that your reader sees it as text, rather than the browser interpreting it as formatting instructions).
• Accruacy is good. The file name "sarahs_styles.css" is not the same thing as "sarahs_style.css".  (Our brains will automatically correct common typographical errors as we read, so it's often hard to spot simple mistakes.  What we do without thinking, computers can't do at all. If the name is not exact, the computer won't be able to find the file.)

• "Compressing a picture" means reducing the complexity of the image. (The result will look blurry, like a bad YouTube video; or, it will look blocky, like computer games from the dark ages.)
• "Reducing the dimensions of a picture" is a different process.  If your camera takes photos at 1600x1200 pixel (individual dots of color) resolution, each photo will probably fill up your monitor, leaving no room for text.  The solution is to use a photo editor to reduce the dimensions of the file, so that the file only stores an image that's (for example 400x300 pixels).
  
• Simply changing the width= and height= tags in your HTML file won't actually change the file size -- you'll still force your reader's browser to download the whole image, which wastes bandwidth and slows down your website.
• SHU offers courses in digital photography, for those who really want to learn this stuff. (If you run into a problem preparing an image, just download the proper image from Elizabeth Castro's website, or substitute any image that will work, and move on.)