beatty@lasalle.edu

Home
Assignments
Resources
Syllabus
Weekly



Web Design and Development
DART/ENG 230

TR 11:00 - 12:15 (S 21); H-167


Apr. 24

April 26

May 1

  • Web development/SEO site of the day from: Mike and Fatima

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, but note the single quotes on one-word families: .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, Lower 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.

There's an RSS feed (Rich Site Summary or Really Simple Syndication) script from About.com here.

One more link for your development as a Web developer: jQueryUI (User Interface) because even jQuery has a bit of a learning curve (check out the Theme Roller and a demo I did with a different theme). And here is another version of the animated GIF cropped, with just a normal <img /> tag. The previous one was in a iFrame, and the white bars were part of the original PSD, it turns out.

While you work on final projects, here again are the Posting Tips.
Projects are due on-line Tuesday, May 8. The best system is to put the final project in its own folder so that you don’t have to take down any other sites in your public_html folder. E-mail me your URL (e.g. http://www.lasalle.edu/~beattyj1/finalproj/page.html) and let me know where your JavaScript, GIF and CSS3 are located.


Web Development Site maintained by John Beatty