Thursday, November 21, 2024

WEB DEV 2

Instructor: Darryl Hurs
darrylhurs+harris@gmail.com
LinkedIn

Description:

Learn about working with content in WordPress including Text and Image optimization, basic Search Engine Optimization (SEO), color basics, and working with plug ins and widgets.

Marks Breakdown

10% Classroom participation + Attendance
Attendance will be taken at the start of the class
(an allowance of 10 minutes late will be accepted an no later)

20% Class 1
10% Class 2
20% Class 3
20% Class 4
10% Class 5
10% Class 6

This is the type of class that we can not make up for people who are late – if you are late you will have to catch up with a fellow student

LATE MARKS

Any assignment turned in late will be marked at -5%

WEEK 1: WEB PROJECT

Assignment for the Term Discussed

TERM ASSIGNMENT:
Build a artist/band Website

MUST INCLUDE:
2 categories – each with 2 SUB-CATEGORIES
2 Posts per SUB-CATEGORY
4 Pages (example: About,Contact)
Manage all aspects of a project from start to finish
Materials to be handed in by end of term:

  • Website Topic
  • Color Scheme
  • Key Words
  • Description
  • Optimized Text content
  • Optimized Images
  • Website Customization

RESOURCES

Checklist – what to include for a website launch
Pre-launch Checklist

ASSIGNMENT DUE MONDAY at 12pm Noon:
Magazine Topic
Magazine Name
Create WordPress Account and Submit Link

Submit Assignment

WEEK 2: WordPress Basics + Sitemap

SITEMAPS

Sitemaps are common deliverables, desired by clients who want a visual representation of a site.

A site map is a visual representation of the structure of the site (pages, posts, categories, sub-categories) which leads to how the navigation is going to be built.

Let’s take a look at navigation first:
https://www.nngroup.com/articles/navigation-you-are-here/

Always present a site map to the client, revise until both parties agree (although the client may override), and have the client sign off (include date) as this will represent what is agreed upon to be built.

Any changes outside of the agreed-upon sitemap can be extra fees / billable hours.

Having a record of what is agreed upon also protects the designer/web builder from any discrepancies with the client.

Before building the sitemap – list the topics to be covered within the website. During this process, it may be found that fewer or more topics are needed. This is meant to be a brainstorming stage before real work is done. It is more agile and faster to sketch it out quickly on paper before doing any digital work.

Once you’ve tackled auditing content create a website content map A.K.A. a visual site map. Believe it or not, it’s quick to develop and easy to change as you go. The website content map is a diagram that shows a website content’s hierarchy and structure to explain the relationships between content on your website visually. It helps to identify the relationships between pages: where they reside and how they interact with other pages.

A visual site map can be done with lines and arrows indicating the relationships between pages, which denotes Smashing Magazine.

You can start by bucketing your content by theme and importance. Stem top-level pages from one homepage.

Top-level pages should group similar content. More robust and detailed content will fall under each of these top-level pages.

The first level will represent the navigation bar of the website including the exact order and wording.

NOTE!

It is understood that HOME is the default landing point and will be in the navigation bar, to avoid confusion it is not listed twice (at the top and second rows in the sitemap). Also, it is understood that the logo will point to the home page.

sitemap example

For WORDPRESS purposes make sure to label each item as a Page, Category, Sub-Category or Post.

EXAMPLE:
Home (page)
Merchandise (category)
Shirts (sub-category)
News Update (Post).

UTILITY NAVIGATION 

Utility navigation consists of secondary actions and tools, such as contact, subscribe, save, sign in, share, change view, print. These activities strongly affect website visitor satisfaction, user experience, and engagement. Put utilities where people expect and need them.

MORE INFO: https://www.nngroup.com/articles/utility-navigation/

IMPORTANCE of a SITEMAP 

Sitemaps may seem like a simple step and is often disregarded and skipped. Often resulting in poor planning, miscommunication amongst the team and the client, and 99% of the time will create headaches and extra work.

DO NOT SKIP CREATING A SITEMAP!!

ASSIGNMENT:

  1. ** IF YOU DID NOT CREATE A WORDPRESS SITE DO SO NOW (You’re late!!!)
  2. Create Sitemap (https://www.gloomaps.com/)
  3. In the sitemap Name and Label Pages, Posts, Categories, Tags
  4. In WordPress Create your Pages, Categories, Posts based on the sitemap
    (USE ACTUAL NAMES not “post 1” “this is a post”)
  5. Create a Menu and assign a location
  6. The site MUST match the sitemap!

DUE NEXT WEDNESDAY NOON

Submit Assignment

WEEK 3: WRITING FOR THE WEB

On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely.

  1. F Shaped Pattern
  2. How do people Read on the Web
  3. Writing for the web
  4. Front Load Writing
  5. Checklist

The F and Z pattern

ASSIGNMENT:

  1. Create a text doc
  2. Add an image of your sitemap for reference  to the doc
  3. Use page breaks and headings to represent each page/post on your website.
  4. Using the techniques described in class, write the content for your website
  5. Save and upload using the form submission below.

DUE: WEDNESDAY 12 noon

Submit Assignment

WEEK 4: SEO Basics

  1. Search Engine Basics
  2. What are Keywords
  3. Using Keywords in your content
  4. Other uses for Keywords
  5. Words “most searched” on Google

ADDITIONAL READING

SEO tips for WordPress Beginners
SEO for Beginners
How to Structure Blog Posts for Search Engines and People
SEO Audits

ASSIGNMENT:

Use your WordPress.com account that you created in WEEK 1

  1. Write 50 keywords using yourself as a topic
  2. Write a description that uses your keywords
  3. Add a category to your site named SEO and add it to the menu
  4. Add a post to the category SEO called Keywords and add your keywords as text
  5. Add a post to the category SEO called Description and add your description as text
  6. Re-Write your Bio using your keywords
  7. Add a post to the category SEO called SEO BIO and add your new bio as text

DUE WEDNESDAY 12pm Noon

Submit Assignment

WEEK 5: PHOTOSHOP - SAVING IMAGES FOR THE WEB

  1. Discuss image formats – .JPG .GIF .PNG
  2. Qualities and Settings of a JPG
  3. Qualities and Settings of a GIF

RESOURCES
12 common image formatting mistakes to avoid 
YouTube: Photoshop Saving for the Web 

ASSIGNMENT:
Using images supplied – optimize save for the web
On your Website – Create a Category called Images
On Your Website – Create a Post for each image and assign the posts to the category ‘Images’
Place the BEFORE and AFTER image on each post and make sure they are appropriately labeled

DUE FRIDAY 12pm Noon

Export Using "EXPORT AS"

  1. Discuss image formats – .JPG .GIF .PNG
  2. Qualities and Settings of a JPG
  3. Qualities and Settings of a GIF

RESOURCES
12 common image formatting mistakes to avoid 
YouTube: Photoshop Saving for the Web 

ASSIGNMENT:
Using images supplied – optimize save for the web
On your Website – Create a Category called Images
On Your Website – Create a Post for each image and assign the posts to the category ‘Images’
Place the BEFORE and AFTER image on each post and make sure they are appropriately labeled

DUE FRIDAY 12pm Noon

Submit Assignment

WEEK 6: Using Color + WordPress Settings

  1. Importance of color
  2. Hex Code
  3. Using Adobe’s Color (Kuler)
  4. Applying color to WordPress settings
  5. Apply color to text

Color Schemes

Any project or product needs a plan before you start it. One of the main aspects is choosing a color palette that defines it and your own design perspective. To better understand why colors play such an essential role in creation, head on over to our Color Theory tutorial.

One of the first things that needs to be decided is the type of color scheme you need:

  • A monochromatic scheme would involve different shades of blue being used and weaved in between elements to create contrast and attract the viewer’s eye. It’s simple and direct, effective, and meaningful.
  • Analogous is both harmonious and eloquent in getting a design started as it involves colors on the right and left side of the color you’ve chosen: purple and green shades. These hues, paired with classic blue, evoke a mysterious aura and feeling.
  • The color-complementary would be brown or cream. A royal or navy palette presents dark colors which are majestic in nature.
  • The triadic color scheme requires both lime green and red hues as the counterparts to classic blue. A rather fun color palette that can also be used to evoke a neon, futuristic style, or even a serious, somber outlook.

If you need more inspiration, go to Adobe Color and explore some of the user-made color palettes that involve classic blue.

ASSIGNMENT:
Create a color scheme using Adobe’s Color
Take a screenshot of the color settings from Adobe’s Color
Create a page on your website called Color Scheme
Optimize your screen shot for the web
Add the optimized screenshot to the Color Scheme web page
Adjust your websites settings to use your color scheme
Adjust Heading Colors

DUE NEXT WEDNESDAY 12pm Noon

Submit Assignment

WEEK 5: PHOTOSHOP - BASIC IMAGE EDITING

  1. Discuss component of an image
  2. Info palette discussed
  3. Image histogram discussed
  4. Using basic adjustment layers
  5. Using basic layer masks

ASSIGNMENT:
Select 4 of your own images
Save each original image for the web
Optimize each image and save for the web
Create a Photoshop Category on your website
Create a post for both before and after images and assign to the photoshop category

DUE NEXT THURSDAY 6pm

Submit Assignment

WEB DEV 1

Instructor: Darryl Hurs
Email: darrylhurs+harris@gmail.com
LinkedIn: https://www.linkedin.com/in/darrylhurs/

Marks Breakdown
10% Classroom participation + Attendance – Attendance will be taken at the start of the class (an allowance of 10 minutes late will be accepted an no later) **

10% Class 1
10% Class 2
10% Class 3
10% Class 4
10% Class 5
50% Class 6

** This is a class that we can not make up for people who are late – if you are late you will have to catch up with a fellow student

  1. Intro
    1. Questionnaire
    2. How does the web work
    3. What is WordPress – basic introASSIGNMENT:
      Create WordPress.com account and send link to Darryl
      DUE immediately
  2. Intro to WordPress – 10%
    1. Pages vs Posts
    2. Explain what’s the difference between Pages and Posts
    3. Log on to WordPress.com account
    4. Create a Page (called TEST PAGE)
    5. Create a Category (TEST CATEGORY)
    6. Create 2 Posts – assign to TEST CATEGORY
    7. Create Navigation Menu containing
    8. TEST PAGE
    9. TEST CATEGORY
    10. Sub menu – Post 1 / PostASSIGNMENT:
      Create Page – Contact
      Create Page – Bio
      Create Category – Blog
      Create Blog Post and assign to Blog category
      Add to Menu (Contact / Bio / Blog)FOR NEXT CLASS HAVE:
      6 Photos (jpg) that you can use to upload to your site
      Text written as a bio of yourself
  3. Working with Content – 10%
    1. Adding and editing text
    2. Adding and editing images

      ASSIGNMENT:
      Add text to your Bio Page
      – format text accordinglyAdd content to your Contact Page including an email link and links to your social accountsCreate a Photos page and upload photosAdd Photos Page to menu
  4. Themes + Plug-ins explained – 10%
    1. Themes explained
    2. Assigning a Theme
    3. Working with theme settingsASSIGNMENT:
      Select and make active a free theme
      – update any settings that are necessary
  5. Plugins and Widgets
    1. What is a widget
    2. What is a Plug in
    3. Finding and assigning plugins
  6. IN CLASS FINAL 
    CREATE a Website – information will be given

All contents © Digital Training Toronto 2019

WEB DEV 1

Instructor: Darryl Hurs
Email: darrylhurs+harris@gmail.com
LinkedIn: https://www.linkedin.com/in/darrylhurs/

Marks Breakdown
10% Classroom participation + Attendance – Attendance will be taken at the start of the class (an allowance of 10 minutes late will be accepted an no later) **

10% Class 2
10% Class 3
10% Class 4
10% Class 5
50% Class 6

** This is a class that we can not make up for people who are late – if you are late you will have to catch up with a fellow student

  1. Intro
    1. Questionnaire
    2. How does the web work
    3. What is WordPress – basic intro
  2. Intro to WordPress – 10%
    1. Dashboard
    2. General settings
    3. Adding a user
    4. Create a page
    5. Assign Home Page
  3. Posts – 10%
    1. Creating posts
    2. Creating categories
    3. Creating tags
    4. Working with a menu
  4. Working with Content – 10%
    1. Adding and editing text
    2. Adding and editing images
  5. Themes + Plug-ins explained – 10%
    1. working with theme settings
    2. widgets explained
  6. Sitemap to website – 50%
    1. What is a sitemap?
    2. in class assigment – create a website skeleton from a sitemap

All contents © Digital Training Toronto

©