ADV2450 Web Design 1

http://themusicdesigner.com/index.html

Today’s agenda

• SEO Basics
• Google Analytics
  (MOE TRACKING CODE – Please paste tracking code befor the close of </head> tag in the document) 

SEO Basics

1. Indicate page titles by using <title> tags
   • Page title contents are displayed in search results
   • Accurately describe the page’s content
   • Create unique <title> tags for each page
   • Create brief, but descriptive titles
2. Make use of the  “description” <meta> tag
   • A page’s description <meta> tag give search engines a summary of what the page is about
   • Descriptions <meta> tags are important because the search engine might use them as snippets or blurbs for your pages
   • Accurately summarize the page’s content
   • Use unique descriptions for each page
3. Improve the structure of your URLs
   • Simple -to-understand URLs will convey content information easily
   • URLs are displayed in search results
   • Create simple directory structure
4. Make your site easy to navigate
   • The navigation of a website is important in helping visitors quickly find the content they want. It can also help search engines understand what content the webmaster thinks is important.
   • Create a natural flowing hierarchy
   • Use mostly text for navigation
5. Write better anchor text
   • The anchor text is the clickable text that users will see as a result of a link, and is placed within the anchor tag
     <a href=”…”></a>
   • Choose descriptive text – the anchor you use for a link should provide at least the basic idea of what the page linked to is about
6. Optimize the use of images
   • Image-related information cab be provided by using the “alt” attribute
   • the content of the “alt” attribute provide information about the picture
   • Use brief text, but descriptive file names and “alt” text
7. Use heading tags to emphasis important text
   • Heading tags are used to present structure on the page to users.
   • The most important <h1>, and the least importnat <h6>

Example <meta>tags description, keyword and author

Read more Search Engine Optimization Starter Guide – Google

Google Analytics
www.google.com/analytics/

• Create an account
• Fill in the relevant information
• Click Get Tracking ID
• Copy the tracking code snippet
  It’s in a box with several lines of JavaScript in it

Example tracking code

• Paste your tracking code into every web page you want to track. Paste it immediately before the closing </head> tag.

If you need to access it the tracking code again:

• Sign in to your Google Analytics account, and select the Admin tab. From the ACCOUNT and PROPERTY columns, select the property you’re working with. Click Tracking Info > Tracking Code.

Assignment:

Write a list of keywords appropriate for site.
Implement analytic services on final portfolio site.

Export a google analytic reportas a PDF and put into your site folder. for the final class.

Last class we completed converting a PSD file to an HTML and CSS file.
You can find

PART 1: Steps to slicing an image at this link.
PART 2: Steps or format used for the HTML and CSS can be found link.

Today we will be continuing:

• Creating a gallery page
  This will be used to create you portfolio page.

Home page template from last class.

Home page (Preview in browser)

We will be creating the gallery/portfolio page (works.html) and gallery description page (project1.html) from the template demo.

Gallery page (Preview in browser)

Place into content and repeat for row 2 and row 3. Change information where needed (alt, src, and comment).

Project description page (Previewed in browser)

Place into content in new HTML page. (Example project1.html)

Please have the template folder with template.html, images folder and css folder.

ASSIGNMENT
Create the gallery page of work, it must consist of minimum of 8 images.

Last class we started converting a PSD file to an HTML and CSS file.
You can find the steps to slicing an image at this link.

Today we will be continuing:

• Converting PSD to an HTML (Part 2)
  HTML and CSS

This is what we have have covered from last class.

Preview in browser

template.html

2column-style.css

I will upload the step to this part after class.

Today we will cover:

1. Backgrounds
2. Converting PSD to an HTML (Part 1)
   1. Slicing (Image Optimization) (Part 1)
   2. HTML/CSS (Part 2)

I will not be looking at anymore assignments that was due before mid-term.

Background

HTML needed  for <body>

CSS rules needed

Rule ID #one

ID #one – preview in browser

Rule ID #two

ID #two- preview in browser

Rule ID #three

ID #three – preview in browser

Rule ID #four

ID #four – preview in browser

 Assignment:

Code the structure of your home page from your site layout using HTML and CSS.
(#container, #header, #nav, #content and #footer)