Media Literacy, Blogging, & Photography

UW High School Institute

Tag: coding (page 1 of 2)

Week 4: Domain Names, Hosting, Linking, and Images

Reminder: Assignment #2 (Draft Design & Layout) Due Tonight to WyoCourses.

Reminder: 25-Point Quiz on Thursday during class time.

  • Understand the differences among inline vs. block vs. void elements. Identify examples of each type.
  • Understand what the basic elements (or tags) mean. Understand when to use them in your HTML document. For example,
    • html
    • head
    • style
    • title
    • p
    • ol, ul, li
  • Be comfortable with finding errors in coding, like the “Be the Browser” exercises in the book.

Chapter 4: Getting Connecting – A Trip to Webville

Domain Name Registration and Web Hosting

You’ll be designing a website using HTML (hypertext markup language) and CSS (cascading style sheets). Then, via Dreamweaver, you’ll upload your files to a website host using FTP (file transfer protocol), who will store and provide the files for your website when a person requests it (i.e., when they visit your domain name).

While you can use UW’s free student hosting service, I recommend buying your own domain name and hosting service for several reasons.

  1. Branding. In search engine optimization, you want to have your own website appear first on a search. That may not happen with UW’s hosting service.
  2. Also, there are limitations to file size on the UW account. You may exceed the storage limit (200 MB) with your work.
  3. You cannot solicit money or work on the UW service.
  4. And, your student account will be deleted when you graduate.

Nevertheless, if you cannot afford to pay for the hosting and domain name purchase, then please use the free UW student hosting service. I’ll do my best to help you, but many questions will need to be answered by UW IT Department.

If you buy your domain name, it must be unique and you’re not allowed to use one that’s already been bought. You can visit Go Daddy to check and register your domain name.

Don’t be disappointed if your full name is not available. Domain names that are simple are the easiest to remember and share with people. Sometimes that means cutting your first name for a first initial. For example, if PeterStevens.com is not available, then PStevens.com may be available.

You’ll see there are other options besides “.com”, such as “.org” and “.biz”. But, the standard “.com” is the easiest to remember and share.

Let’s discuss your domain name now in case you have any questions. The company you buy your domain name from does not need to be the same company that you use for the hosting service, but oftentimes they are the same.

Your hosting service will allow you to manage and upload your content to your domain name. I use GoDaddy.com for both my domain name registration and my hosting service.

Let’s buy now, in class, so we don’t get confused.

Download the Assignment #3 (Domain Name and Hosting) Requirements: 3 – Domain Name Registration and Hosting

Back to HTML

**We will cover p. 128-141 once we have purchased our domain name and hosting service.**

External links on pp. 142-145

Relative vs. absolute links on p. 146 and 154

Linking within one webpage on pp. 149-153

Title and target linking on pp. 147-148 and pp. 155-157


Reminder: Assignment #3 (Domain Name & Hosting Registration) Due by 1:20 p.m. Tuesday 2/21.


Krug, Ch. 6: Designing Navigation

Navigation: getting from one place to another, and figuring out where you are

Why is web navigation so important?

Difficulties of web browsing:

  • Your sense of scale is limited. No idea how big the website is.
  • Your sense of direction is limited. Which way again?
  • Your sense of location is limited. Need to remember conceptual hierarchy.

Why should we make already-clicked links a different color?

Navigation Suggestions:

  1. Make the hierarchy visible = show us what the site contains
  2. Implicitly tell you how to navigate and what the options are
  3. Use web navigation conventions (see p. 65 for the graphic)
  4. Include one set of global (persistent) navigation on every page (except forms, see p. 67). Include a maximum of five tabs (otherwise, we get lost).
  5. Put the clickable site ID (e.g., your name) in the upper-left corner. Make the site ID look like a site ID (a distinction typeface and/or graphic) (see p. 67-68).
  6. Consider drop-down menus (i.e., secondary navigation) in the primary (global) navigation. When you click, you see the drop-down menu of options or you go to a front page of the subsection (see p. 69).
  7. Avoid a search box because you’re building a small website.
  8. Include a prominent, helpful page name in an appropriate location on every page (see p. 75 for examples).
  9. On every web page, highlight my current location in whatever navigation bars appear on the page (see p. 78 for examples).
  10. Avoid “breadcrumbs” unless you have a complicated website.

In the future, consider trying Krug’s “trunk test” on pp. 82-83.

We’ll take a look at how images function on the web.

HTML & CSS Book: Ch. 5 – Adding Images to Your Webpages

How images work with browsers on pp. 164-166
The different types of images on pp. 167-169
The image element, alternative attribute, and width/height attributes on pp. 170-174
Instructor-led exercise with images on pp. 175-191
Instructor-led exercise with thumbnails and linking images on pp. 192-200
Inserting a logo, working with the PNG format on pp. 201-211

Week 1: First Law of Usability and How to Learn HTML

Krug Introduction

A usability consultant identifies problems with websites. You will benefit from knowing about usability as a website designer and future employee of a company/non-profit that has a website.

Krug outlines seven key words that define usability:

  1. Useful: Does it do something people need done?
  2. Learnable: Can people figure out how to use it?
  3. Memorable: Do they have to relearn it each time they use it?
  4. Effective: Does it get the job done?
  5. Efficient: Does it do it with a reasonable amount of time and effort?
  6. Desirable: Do people want it?
  7. Delightful: Is using it enjoyable, or even fun?

Krug Chapter 1: Basic Usability

Most important usability concept: “Don’t make me think!”

You want to build a website that is OBVIOUS and SELF-EVIDENT to the user and does not require thought.

For example:

  1. Navigation is easy to find, understand, and use.
  2. Web pages give a clue as to where the user is and what page they are on.
  3. Links standout from the normal text color, yet coordinate with page colors.
  4. Link text gives a clue as as to where the user will go once they click on it.
  5. Consistent navigation across the website enhances usability.

Questions that you DON’T want your user to ask:

  1. Where am I?
  2. Where should I start navigating?
  3. Where did they put ____?
  4. What is the point of this page?
  5. Why did they label it ____ when they really meant _____?
  6. Is that an ad or part of the website? –> Although, “native advertising” is hugely successful nowadays.

R&F Introduction: How to Use This Book

This is a conversational, fun, and memorable HTML book. The introduction has a few key points that I’d like to emphasize.

Embrace the silliness, graphics, and conversational style. They are novel and fun. You will remember them more.

Embrace the struggles. We learn when we struggle and fail. Get yourself to think more deeply and critically when you fail.

Embrace the redundancy. We will create the examples in the textbook. Then, you must apply these concepts and skills to your own website. It’s redundant, but it will stick to your brain more.

Embrace the ambiguity. There is often no “right” or “wrong” way to design something. There are many approaches to achieving the same overall result. However, there are design principles that matter and should influence your work.

Embrace the details. On the flip side, details matter. There is a “right” and “wrong” way to write code. One missing backslash or colon can ruin your website.

 

Adding a Resume and Achieving that “Wow Factor”

Adding a Resume

For the final website, you need the resume in both PDF and HTML versions. This means the resume should be downloadable by PDF and should be coded in HTML (or appear as an image). See classmate Olga’s resume page for a good example of how she met this criteria.

To embed the PDF, save your resume as a PDF file from Word (go to Save & Send –> Create PDF Document). Ensure you save it in the same folder as your website files. Then, in the HTML code, insert the PDF file as a link: <a href=”my_resume.pdf” target=”_blank”>Download my resume</a>.

To insert the resume as an image, open the Word document in Adobe Illustrator (or another editing program that can open .doc files). Go to File –> Save for Web & Devices –> Save as .jpg file in the same folder as your other website files. Then, in the HTML, insert the image element code: <img src=”my_resume.jpg” alt=”My resume as an image.”  border=”1px black solid”>.

If you have any trouble, please let me know.

Improving the Application of Design Principles

Many of you need to improve the professional look and feel of your website. You may have met the requirements for the final website, but you are missing the bonus “wow factor” that “A” websites possess. To meet the “wow factor” requirement for an “A”, you must apply design principles in a clean and professional manner. Let’s review the design principles before examining some example websites.

Here are a few student websites that have the wow factor and some that don’t.

Wow Factor Websites

  • Example 1: Uses simple repeating background image with a jello layout
  • Example 2: Simple color scheme with repeating background image and jello layout
  • Example 3: Simple color scheme, clean look with simple graphic and font

Websites That Lack The Wow Factor

  • Example 1: Poor color scheme, inconsistent font choice, and more problems
  • Example 2: Poor color scheme, but otherwise it is OK. See what a poor color scheme can do?
  • Example 3: Odd choice of fonts, poor color scheme, distracting and odd background image. Layout looks pretty good though.

Aiming for the Wow Factor: Adding a Simple Repeating Background Image

What is a simple repeating background image? Check out my personal website to see what I mean. Right-click to “view background image” andimg09 you’ll see that there is a simple rectangle that is set to repeat in my CSS. See the corresponding CSS code below:

#bodyindex { background: #DEDEDE url(images/img12.png) repeat-x left top; }

#bodypages { background: #DEDEDE url(images/img09.png) repeat-x left top; }

To explain: I created an index page that looked slightly different from the rest of the web pages, so it has its own division (#bodyindex, just for the index) and its own image (img12.png, just for the index page). The other web pages use the #bodypages division and the img09.png image. Notice that I’m only repeating it horizontally once (that is the “repeat-x left top” rule). Then, when the image is done repeating, it defaults to the background color of #DEDEDE (the light tan color).

To refresh your memory on the background selector options in CSS (such as background-repeat, background-position, etc), please see p. 380-383 in the textbook.

Aiming for the Wow Factor: Adding Rounded and Stylized Borders

Notice how my dropdown menus on my personal website have rounded edges. This effect looks professional and is easy to create using the border-radius property in CSS. See. p. 386-389 in the textbook for a refresher on how to create and style borders using CSS. In another example, classmate Hannah has applied a stylized border to her home page.

Aiming for the Wow Factor: Adding a Logo or Photo That’s Consistent Across Pages

On my personal website, you’ll notice that the home page has a larger photo with my name and the content pages have a cropped smaller version of the same photo. This creates visually consistency across pages.

Consider using a consistent image across your websites as well. For example, classmate Gabrielle has used a golf-related image for her golf-themed website.

Classmates Jordan and Olga have created logos that are used consistently across their websites.

To create a simple logo, go into Photoshop or another graphic design program and experiment with the text tool, shapes, and lines to create an original logo for your website. Simple is fine. It does not have to be fancy or complicated.

Updating to HTML5 Markup

Ch. 12, Modern HTML: HTML5 Markup

Monday and Wednesday

Download the correct HTML (right-click, view source, copy and paste code into Notepad, save as “blog.html”) and CSS file (click link, copy and paste code into Notepad, save as “starbuzz.css”) for this assignment

Why change from <divs> to HTML5 markup — pp. 545-547.

Updating the Starbuzz website to HTML5 (conceptual) — pp. 548-558.

Adding a blog to a web page — pp. 559-572.

Adding navigation to your website — pp. 573-577.

Adding video — pp. 578-593.

Embedding video with YouTube

Adding audio — p. 710

See the Starbuzz Blog with an mp4 video that autostarts.

See the Starbuzz Blog with multiple video sources that does not autostart and for an embedded audio file using HTML5.

Friday

Required attendance workday. Submit Assignment 6 – Website with CSS Formatting & Layout by 11:59 p.m.

 

COJO 4230, Week 11: Creating a Photo Gallery

Because most of you expressed interest in creating a photo gallery for your websites, this is the next topic we’ll cover.

I have created three examples of a photo gallery that use HTML5 and CSS3. There is no knowledge of HTML5 programming necessary, it only uses HTML5 and CSS3, which you all should know. Let’s check out each one. Then, we’ll take a class vote on which example we’ll cover in class.

Example 1: white background, black border, box-shadow, 3 pictures across

Example 2: black background, white border, box-shadow, 4 pictures across

Example 3: black background, no border, no box-shadow, 4 pictures across

Please download all of the files in this zipped folder.

Also, you are free to explore, learn, and use other photo galleries that you find appealing. You can find some examples here and here. Please note that some of these examples are more difficult than others and require you to explore JQuery, JavaScript, and HTML5’s canvas.

COJO 4230, Quick Survey Results

Thank you for your feedback about what you’d like to learn. Here are the results:

There was an overwhelming response to learn how to create photo slideshows. I will find a way to teach that.

Next, there was a tie to (1) draw, paint, and write text using the canvas feature, and (2) embed video. We’ll see if we have enough time to cover these topics as the semester progresses.

The extroverted apps and geolocation apps were ranked last. We will not cover these skills.

Also, in the open-ended responses, there was an interest by several students in making your websites looks more professional. Since that is the quickest lesson to learn, and likely the most applicable lesson, we will start with that today. Download the Word file explanation of my website’s background strategy.

When we return from the long weekend, we will begin with photo slideshows. Then, we will cover Ch. 2 and 3 in the HTML5 Programming book, which is about adding audio and playlists to your website. I can see this being useful for any audio journalism or any interests in adding music to your website.

If time permits, we will then cover Ch. 4, the necessary chapter to learn canvas and video.

COJO 4230, Week 10: A Few More Notes on Lists & Intro. to Programming

HTML and CSS book
More Lists: Ch. 13, p. 631-633

Download files for the HTML5 Programming Book

HTML5 Programming Book
HTML5 reminders: Ch. 1, p. 4-8; 12-13
How HTML5 works: Ch.1, p. 14-16
Intro. to JavaScript: Ch. 1, p. 22-31

Now, let’s take a 2-question survey about what you’d like to see covered in this class the next 4 weeks.

COJO 4230, Week 3: More Building Blocks!

From Chapters 1 and 2, we know how to build a basic webpage with text and links. We know about paths as well. Now, we’re going to learn more HTML elements (tags), the difference between block and inline elements, and what nesting means (and not the kind of nesting that birds or women do when they’re expecting babies).

Chapter 3: Building Blocks – Web Page Construction

We’ll do this whole chapter together, with the exception of the exercises in the back of the chapter.

Creating a rough sketch of your web page on pp. 78-81.

Working from an online to create a web page on pp. 82-84.

Quotes with the <q> and <blockquote> elements on pp. 85-93.

Block elements vs. inline elements vs. void elements on pp. 94-99.

Ordered and unordered lists on pp. 100-106.

Nesting on pp. 107-109.

Class exercise: Find what’s wrong with the code on p. 110.

A few more elements to learn on pp. 114.

Chapter 4: Getting Connecting – A Trip to Webville

We’re going to skip the first part of Ch. 4 and return to it on Friday when you have purchased a hosting service and we can work in Dreamweaver. For now, here are some tips about your Assignment #2 (2 – Domain Name Registration and Hosting).

Domain Name Registration and Web Hosting

You’ll be designing a website using HTML (hypertext markup language) and CSS (cascading style sheets). Then, via Dreamweaver, you’ll upload your files to a website host using FTP (file transfer protocol), who will store and provide the files for your website when a person requests it (i.e., when they visit your domain name).

While you can use UW’s free student hosting service, I recommend buying your own domain name and hosting service for several reasons.

  1. Branding. In search engine optimization, you want to have your own website appear first on a search. That may not happen with UW’s hosting service.
  2. Also, there are limitations to file size on the UW account. You may exceed the storage limit with your work.
  3. You cannot solicit money or work on the UW service. So, you can’t say, “Please contact me to step a photography session” or “I’m available for hire to do design and interactive media work.” This is another limitation.
  4. And, your student account will be deleted when you graduate.

If you buy your domain name, it must be unique and you’re not allowed to use one that’s already been bought. You can visit Go Daddy to check and register your domain name.

Don’t be disappointed if your full name is not available. Domain names that are simple are the easiest to remember and share with people. Sometimes that means cutting your first name for a first initial. For example, PeterStevens.com is not available. However, PStevens.com is available.

You’ll see there are other options besides “.com”, such as “.org” and “.biz”. But, the standard “.com” is the easiest to remember and share.

Please discuss your domain name with me if you have any questions. Once you know the domain name you want, you should purchase it now so it doesn’t disappear. They are about $12/year on Go Daddy. The company you buy your domain name from does not need to be the same company that you use for the hosting service.

Your hosting service will allow you to manage and upload your content to your domain name. I use GoDaddy.com for both my domain name registration and my hosting service. Hosting plans on GoDaddy start from about $5/month.

Back to HTML

External links on pp. 142-145

Relative vs. absolute links on p. 146 and 154

Linking within one webpage on pp. 149-153

Title and target linking on pp. 147-148 and pp. 155-157

COJO 4230, Week 2: The Building Blocks of the Web

It’s helpful (and very awe-inspiring) to know the history of the Internet before we start building our own webpages.

Now you’re familiar with the Internet’s skeleton, let’s start learning about its guts!

Chapter 1: Universal Language of the Web

Servers, browsers, and hypertext markup language (HTML) – pp. 2-8.

Class exercise on p. 7.

Instructor-led exercises on pp. 9-31.

Individual exercises on pp. 32-42.

Chapter 2: Hypertext

Instructor-led exercises on pp. 43-67.

Individual student exercises on pp. 68-76.

 

COJO 4230, Classes 2 & 3: Showcase Your Work With a Portfolio Website

Why You’ll Thank Yourself for Knowing HTML & CSS

(1) You can now showcase your own material and skills: If you’re headed for a media or communication career that involves new media and social media, it’s a great idea to have your own website. You can post and host all of your journalism and communication material–print stories, audio stories, photography, video stories, slideshows, interactive graphics, artwork, etc. This effort will help you “brand” yourself. There is a lot of competition out there.

(2) You can now work with a content management system: Most large companies have a CMS (content management system) that is like a standard “shell” where you insert the content. You have little control over the layout and design, rather, you merely insert the content into the shell. With advanced knowledge of HTML and CSS, you will understand the CMS and you may even be able to make or suggest improvements.

(3) You can now design websites for others: Once word gets out that you can design websites, don’t be surprised if your friends, family, acquaintances, organizations, companies, etc., start asking you to design their website. You can make some money out of this skill!

Inspiration: Examples of Journalist Portfolio Websites

Now let’s look at some suggestions on how to evaluate portfolio websites from another instructor of new media.

Next, let’s examine examples of portfolio websites from a few young media professionals’ portfolio websites. Think about what these fresh professionals are communicating through their website. In particular, concentrate on the:

  • Domain Name
  • Typography (text)
  • Color
  • Navigation
  • Layout
  • Links
  • Work Examples

Design Principles for Creating a Clean, Professional Website

Emphasis

Defined: Highlights the importance of the site’s content. Also relates to hierarchy.

  • When creating a draft of your site, list all of the information that needs to appear on the page.
  • Then, number the information by order of importance.
  • Design the visual hierarchy so the page reflects the determined importance.
  • Avoid emphasizing everything and avoid emphasizing nothing.

Good example. Needs work.

Balance

Defined: How the elements in a design are distributed and how they relate to the overall distribution of visual weight within the page. As elements are grouped together in a page, visual weight is created. You want to balance the visual weight so as to create stability. Two kinds exist:
1. Symmetrical Balance: Equal visual weight is given to elements so that two halves mirror one another. Example.
2. Asymmetrical Balance: Visual weight is distributed equally, but elements do not mirror one another. Example.

Websites can mix the two types as well. Example.

Alignment

Defined: The arrangement of elements in such a way that the natural lines (or borders) created by them match up as closely as possible.

Proximity

Defined: The relationships that items develop when they are close together. When items are close, ensure you want the relationship to exist. When items are far apart, relationships are less likely to exist.
Example of proximity creating relationships.
Example of a lack of proximity causing problems. Here, too.

Repetition

Defined: Throughout the website, there are certain elements that are common and unify the disparate parts together.

  • Each page should look like it belongs to the same website.
  • Color, shape, line, fonts, spacing, layout, typography, and imagery are some examples of potential repetitive elements.
  • A benefit of repetition is predictability. Users will better understand the design, navigation, and hierarchy.

Examples: Color repetition. Font repetition. Layout repetition. Imagery repetition.

Contrast

Defined: The visual differentiation of two or more elements. Contrast creates emphasis and focus toward the distinct elements, and can create a visual hierarchy as well.

  • Elements that have strong contrast appear distinct and unique. Elements that have weak contrast appear unified.
  • If you want elements to appear separate, use strong contrast. Go all the way. Don’t make them almost the same.
  • Ensure that some elements of your website have contrast, which subsequently creates focus. You don’t want everything to have the same visual priority.
  • Create contrast with color, size, position, and font.

Examples: Color contrast. Font contrast. Poor use of contrast. Another poor use of contrast.

Flow

Defined: The path the users’ eyes follow as they examine a website. Flow results from the execution of the design principles explained above.

  • Consider that our eyes typically examine webpages from left to right and top to bottom.
  • Ensure our eyes do not bounce around the page, darting from right to bottom and back up.

Example of smooth flow. Example of poor flow.

Typography on the Web

This refers to the use of fonts, font size, and font style on the web.

  1. Text is appropriate size.
  2. Hierarchy of information is clear.
  3. Lines of text are not too long to read.
  4. Background does not compete with text.
  5. There is enough contrast between background and text color.
  6. Uses sans serif fonts for long portions of text.
  7. No large blocks of text in bold, italic, all caps, or small caps.

Usability and Navigation

These concepts relate to how the user interacts with the website.

  1. Navigation is easy to find, understand, and use.
  2. Web pages give a clue as to where the user is and what page they are on.
  3. Links standout from the normal text color, yet coordinate with page colors.
  4. Link text gives a clue as as to where the user will go once they click on it.
  5. Consistent navigation across the website enhances usability.

Color Schemes

There are several types of color schemes to choose from when designing your website. Let’s familiarize ourselves with these terms and the color wheel.

  1. Monochromatic: Only one color is used, with varying values. Example 1. Example 2.
  2. Analogous: Several colors that sit next to one another on the color wheel are used. Example 1. Example 2.
  3. Complementary: Joins colors that sit across from one another on the color wheel. Example 1. Example 2.
  4. Triadic: Three colors that are equally spaced on the color wheel are used. Example 1. Example 2.
  5. Color Discord: Color discord can be visually disturbing, attract interest, relay ideas or themes, and create surprise. Example 1. Example 2.

You want to pick one color strategy and stick to it in order to create a visually appealing website.

Layout and Themes

There are many options when it comes to the overall layout and theme of your website. Here are some ideas:

  1. Ultra clean designs lean toward minimalism, but emphasize the crystal clearness of the design. Example 1.
  2. Minimalist designs are timeless and are easier to build and maintain. They offer professionalism as well. Example 1. Example 2.
  3. Type-focused designs use the text as a dominant element and use text in an elegant way. Example 1. Example 2.
  4. Visual-oriented designs use images, graphics, or multimedia in an elegant way. Example 1. Example 2. Other examples of visual-oriented websites.

Note: Definitions and listed material are adapted from The Web Designer’s Idea Book, Vol. 2 as well as The Non-Designer’s Web Book, 3rd ed..

 

Older posts