beatty@lasalle.edu

Home
Assignments
Resources
Syllabus
Weekly



Web Design and Development
DART/ENG 230

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


Nov. 12

November 17

Nov. 19

  • Web development/SEO site of the day from: Erin

Today’s topics are SEO/Web development and testing, 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: .fred {font-family: 'WeirdFont', fantasy;} except for adding quotes around one-word font names.

    We’ll build an animated GIF (not a photo) 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 7). Also, this page from Adobe Create uses the timeline (as opposed to frames) to make a GIF.


    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: Lifewire, the key one being Google Custom Search.

    Also remember what defines the “X” version of HTML (XHTML). XHTML is HTML written to XML standards.

    • Tags, attributes, values must be lowercase (in XML they are case-sensitive but uppercase can be used)
    • Tags must be properly nested
    • All “non-empty tags” must be closed (e.g. <p> needs </p>). An example of an HTML “empty tag” is <br>
    • (Optional) All empty tags in XHTML are written with a trailing slash: <br /> or <img src=.... />
    • Values of attributes need "" e.g. <img ... alt="Photo of our cat, Larry" >
    • (Optional) All attributes need values, e.g. required="required"
    • Plus always start files with a doctype declaration, i. e.
    • <!DOCTYPE html> for HTML5.

    And here is Video #11 on using FTP to post your web pages. Remember that you will have to be on campus to do this.


     
     


Web Development Site maintained by John Beatty