Web Development
DART 230

• Web development/SEO site of the day from:

Today’s topics are Web development and testing, a look at DHTML, RSS, and animated GIFs. Here is Google's SEO Starter Guide.
And in connection with @font-face here is the Google fonts site (not easy to find). See Technical Considerations (or textbook p. 277) for a piece of the actual CSS. The syntax is like this:

@font-face { font-family: 'WeirdFont' ;
src: url('http://somewebfontrepository.com/font?%^&%&^') format('truetype'), url('another font from somewhere') format ('woff') ;
}
Other font formats include EOT, WOFF (expected to be the new standard) OTF, SVG.
Then you declare the font-family in the normal way: p.fred {font-family: WeirdFont, fantasy;}

Above all remember file and directory naming conventions. Your final URL will be of the form: http://www.lasalle.edu/~smithj4/final/. To avoid problems,

• Save before previewing in browser
• Keep all files on the same disk or drive
• Files and directory names should have no upper-case letters and no special characters or spaces. Remember: No Caps, No Gaps (or, Upper Case, No Space).
• For files in a sub-directory the link would be <a href="images/pic.gif">
• For files in a parallel directory the link would be <a href="../part_two/another_page.html">

Reading on development (review) is HTML & CSS Chapter 19. The basic resource is: Search Engine Submission Tips (formerly Webmaster’s Guide). For those who want to add search to their final projects, here is an intro to various options from: About.com, the key one being Google Custom Search.

I’ve also added and modified an RSS feed (Rich Site Summary or Really Simple Syndication) script from About.com to the top of today’s page as an example of an easy way to develop site content. I got that script here.

As an extension of our discussion of JavaScript, here are some more sites on DHTML:
• Here is a demonstration of positioning and JavaScript animation that uses CSS: DHTML and CSS layers.
• And here is a Lightbox that I did.
  Finally, we’ll build an animated GIF in Photoshop. Think of ways to do one for your final project made with text that could be like this, or use a photo and motion tween, fade, etc., or
  one that's more video-like:
  
  

  There's an animated GIF here (Step 6) and I found some at Mogo Media where I take some workshops and also the Google page I mentioned.

Site maintained by John Beatty