Tue, Mar 19

InDesign

Today's objectives

  • Review HTML
  • Basic CSS concepts
  • Intro to page layout
  • Today: Quiz, rough draft of assignment feedback, backup
  • Preparation

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

    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.

    Samples

    Download the InDesign sample files Samples.

    Download the sample file for InDesign practice task.

    Resources

    Packaging files
    Paragraph styles
    Text wrap
    Page numbers
    Changing page numbering options

    Presentations

    essay-construction-DSGN1000

    Assignments

    Add CSS styles to your web site

    Add CSS to your web site. Basic text styles are essential. Validate and check carefully.

  • Name the folder containing all your file for this assignment YOUURLASTNAME_Assignment6b.

    Compress (make archive on Mac OS) the folder and upload the .zip file to the Brightspace by 6 pm, Due Mon, Mar 25, 6:00 PM.

  • 🔥 Practical topic: Backup

    Everyone needs a a backup plan. The more valuable your data is, the more important backup is.

    A good backup system shouldn't rely on you to copy files, remember to plug in a hard drive, to save files in certain folders, or to figure out if its stopped working working.

    What to back up:

    There's no need (for most people) to back up files that you can easily restore from other sources. The Adobe apps can be re-downloaded, and the your computer's operating system can be re-installed, but make sure things like e-mail archives, photo collections, school assignments and work projects are backed up.

    For Mac users, here's what I recommend:


    Absolute minimum:

    Local backup: Time Machine

    Cost: about $70 for a hard drive, or free if you can reuse an old one.

    Buy (or better yes, erase and reuse) a USB hard drive. Cheap drives are fine; there's no real reason to use an SSD for this. Staples usually has at least one drive on sale for $70 or so. A good minimum size is 2x the size of the amount of data you need to back up. You can see how much date you need to back up by looking at your storage tab in system preferences. There is generally no need to back up "system" or your Applications, so you can subtract these from your backup needs - make sure they are not selected for backup in the TimeMachine system preferences.

    How to set up Time Machine.

    For windows, File History is similar.

    Why this option: NO monthly fees, fast restores, simple to set up What can go wrong: USB hard drives can fail, or be lost/stolen/destroyed. You may forget to plug it in.

    Tip: You can connect multiple drives to your mac as TimeMachine volumes and Time machine will alternate between them

    Tip: If you have a USB dock or hub that can power your computer, plug your time machine drive into that hub, so every time you connect your computer to power, it can get backed up. I use one of these. but there are many other options.


    Better: local plus remote
    Automated remote backup

    Cost - from about $50 per year to several hundred.

    There are lots of online backup services. I use Backblaze. The process is simple - signup for an account, install the software, select what folder you want to back up, and then wait as the software makes its first backup. If you have a *lot* of data and a *slow* internet connection, that first backup can take a long time - weeks, in some cases.

    Backblaze and other online backup services work well with Macs and Windows computers.


    Best: Remote+local + disk imaging
    Disk imaging

    A disk image is an exact copy of your whole disk - in case of a system failure, you can restore your files from it, or boot your computer from it. Disk images take up lots of space, and are usually slow to make. Making a disk image is a good idea before upgrading to a new operating system, or when you need to keep an exact copy of a disk, for example, before your sell a computer.

    Carbon Copy Cloner or SuperDuper - SuperDuper is free if you don't need to automatically schedule making disk images.

    A basic system imaging tool comes with Windows:


    Better than nothing
    Synch services

    File syncing and sharing services such as DropBox, OneDrive, iCloud Drive and Google Drive aren't idea backup solutions, as they don't have all the features needed to best protect your data but may make sense as an additional level of backup.