Tue, Mar 12

InDesign

Quiz

Today's objectives

  • Basic HTML
  • Basic CSS
  • Upcoming quiz
  • Rough draft of usability assignment
  • Rough draft of assignment, backup
  • Preparation

    • Have completed usability review test with participant
    • Have reviewed InDesign videos and handouts from last class

    Presentations

    essay-construction-DSGN1000

    Assignments

    Today's objectives

    • Understand the basic elements of the web - browsers, servers and domain names
    • Understand the roles of the fundamental browser-side technologies: HTML, CSS and JavaScript
    • Configure the basic tools for web page construction: text editor and browser
    • Learn the basics of HTML code
    • Learn the core workflow of building a web page - write code, check in a browser, fix mistakes, repeat.

    Preparation

    • Download and review the HTML handout (linked below)
    • Watch the video (above)
    • Download, install and test a text editor - we will use VS Code.

    Resources

    Handout

    Basic HTML PDF

    Basic HTML scratchpad

    See the Pen Basic HTML skeleton by Robert Currie (@rcurrie) on CodePen.

    Basic CSS scratchpad

    See the Pen CSS Scratchpad by Robert Currie (@rcurrie) on CodePen.

    Basic HTML skeleton

    See the Pen by Robert Currie (@rcurrie) on CodePen.



    Resources

    Glitch Lets you build complex web sites in your browser, but not practical for class assignments.

    Software: Mac, Windows and Linux

    There are many browsers available, all are free.

    • You can download Firefox here.
    • Google's Chrome is also an excellent browser.
    • Brave is a privacy-focussed browser.
    • Edge is Microsoft's replacement for Internet Explorer.
    • Safari is included with every Mac and IOS
    • device.

    Validating your HTML

    Several online tools allow you to validate your HTML, pointing out any syntax errors. The W3C's Markup Validator allows your to validate online files, files your upload, or html you paste in place.

    The results can be a bit hard to interpret, however.

    The Web Developer Toolbar is a useful add-on for Firefox, adding validation and other tools to your Firefox browser. There is also a version of the Web Developer Toolbar for Chrome.

    Software

    Visual Studio Code is an editor that works on MacOS, Windows and Linux. It's what we will use in class. It's free - download it here.

    Alternative Software: Mac

    • BBedit for Mac OS X is a powerful text editor with good HTML tools. It will work in "basic" mode for free, with no expiry. You do not need to purchase a license. Click here to download it.
    For transferring files to a server (we won't be doing this) you'll need an FTP client. For Macs, I recommend Fetch - you can get a free version for educational use. https://fetchsoftworks.com/fetch/.

    PNG 24: 103KB

    PNG 24: 103KB

    PNG files can be 8 or 24 bit depth. 24 bit PNGs are very high quality, but will usually result in the largest files.

    JPEG high quality: 64KB

    JPEG high quality: 64KB

    JPEG files use lossy compression to reduce file size, and speed loading. When you save a JPEG file, you can usually chose a range of quality options, with higher quality yielding larger files. At maximum quality, JPEG files are very close in quality to files saved with lossless compression.

    JPEG low quality: 4KB

    JPEG low quality: 4KB

    At low quality settings, the loss of quality will be obvious.

    GIF, 256 colours: 29KB

    GIF, 256 colours: 29KB

    The GIF file format is limited to 256 colours (8-bit colour) or fewer. 8 Bit PNG files are usually preferred, but the GIF format is unusual in that it can be animated.

    SVG: 5KB

    Unlike PNG, GIF and JPEG files, SVG files can be vector files. As with other vector formats, vector-based SVG files can be scaled with no loss of quality or increase in file size. This version of the NSCAD logo is only 5KB but can be scaled to any size and will display crisply. You can export Illustrator files as SVG with the "Save as..." function.


    SVG file, 5KB


    Resources

    A good CSS tutorial for beginners

    Lots of CSS examples at W3Schools.

    Detailed CSS standards, tutorials and courses at MDN

    An online tool for previewing text styles.

    Responsive web design is web design that adapts to screen sizes, from phones to desktops.

    https://getbootstrap.com is a framework (like a kit of parts) for building responsive web sites easily.

    A bit advanced, but a useful framework for building CSS-based grids.

    Important The W3C's CSS validator, similar to its HTML validator. Use the "by upload" option to upload a file from your computer for validating.

    Way too many CSS resources.

    Assignment 6 - Phase 1:

    Create a 3-page web site

    • Each page needs an image. All images must be your own creation - you can use previous assignments as your images.
    • Make sure each page has a link.
    • Check to make sure images and links work.
    • Name the folder containing all your file for this assignment YOUURLASTNAME_Assignment6a.

      Compress (make archive on Mac OS) the folder and upload the .zip file to the Brightspace by 6 pm, Mon, Mar 18