M3: Site Structure, Links, and ImagesClass Recap: We covered a lot new things in this module. The most important exercise during this module is to learn about site structures, how to link all the page together, especially how to connect pages that are not in the same directory. We explored the many ways to use links in a web site: external, relative, mailto, and opening the link in a new browser window. You will find this skill most challenging through out your entire course. If a link is broken, remember to look at it's path.
We continue examining the newer HTML5 structural elements, including header, footer, and nav. We explored different types of images that can be displayed in the web browsers. Personally I am a big fan of SVG images due to its versatile usages. Student Outcomes:
|
In class
Using the methods and techniques explained in the module, create a 4
page web site that demonstrates your ability to incorporate images,
external links, site navigation, and an email link into a web site about
your 3 top interests: Stuff I Like.
Why SVG
The first image is a gif file. The second image is an SVG file. If I click on the first image, you can see the scaled up gif image becomes fuzzy, and blurry. But I can scale the SVG file to any size, it stays sharp. (As shown in the third image.)
As indicated by its name, Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files (source).
As indicated by its name, Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files (source).
Here are some major benefit of using SVG
If you do a search on SVG, there are many postings. And some SVG projects are just amazing. There are also some very good tutorials.
Here is one site that included some basic introduction to SVG
http://www.hongkiat.com/blog/tag/scalable-vector-graphics/
- Resolution Independence
- Super-Accessible DOM Node-Based API
- Eliminates unnecessary HTTP Requests
- Easy Interactive Scripting
If you do a search on SVG, there are many postings. And some SVG projects are just amazing. There are also some very good tutorials.
Here is one site that included some basic introduction to SVG
http://www.hongkiat.com/blog/tag/scalable-vector-graphics/
Example of an SVG Animation
M3 Discussion
What was the most important thing you learned from this module's assignment and why?
Please <click here> to participate discussion. (Participation points)
Please <click here> to participate discussion. (Participation points)
M3 Homework:
1. View the videos in M4 and complete the tasks
2. Finish your Mini Portfolio Site
Due Date:
Description:
Using the methods and techniques explained in the module, create a 4 page website that demonstrates your ability to incorporate images, external links, site navigation, and an email link into a web site about your 3 top interests.
For these pages, you will need to incorporate photos, text, and a few external links about each subject. For example, if you have a food page, you might have a picture of your favorite dish followed by a few sentences that explains what is this dish, where you can get it. This could then be followed up by some external links about the history of this dish, and the restaurants that serves this dish. Repeat the same process for the 2 other subjects. When you have all 3 pages coded and filled with plenty of information, link them all together with a homepage and navigation (text links are fine).
Using the methods and techniques explained in the module, create a 4 page website that demonstrates your ability to incorporate images, external links, site navigation, and an email link into a web site about your 3 top interests.
For these pages, you will need to incorporate photos, text, and a few external links about each subject. For example, if you have a food page, you might have a picture of your favorite dish followed by a few sentences that explains what is this dish, where you can get it. This could then be followed up by some external links about the history of this dish, and the restaurants that serves this dish. Repeat the same process for the 2 other subjects. When you have all 3 pages coded and filled with plenty of information, link them all together with a homepage and navigation (text links are fine).
- When designing these pages, brand yourself
- Think about use of space, hierarchy , typography etc.
- Think about use of colors
Purpose:
This assignment reinforces the topics covered in the module. It also demonstrates an ability to organize content and create a multi-page web site. Review previous module to use semantic HTML5 structures when constructing your page. We briefly introduced <div> tag. Organize your code with <div> boxes when necessary.
This assignment reinforces the topics covered in the module. It also demonstrates an ability to organize content and create a multi-page web site. Review previous module to use semantic HTML5 structures when constructing your page. We briefly introduced <div> tag. Organize your code with <div> boxes when necessary.
Tools:
Notepad, SimpleText, DreamWeaver, CoffeeCup, Coda2, Sublime Text (any code editing software of your choice. )
Notepad, SimpleText, DreamWeaver, CoffeeCup, Coda2, Sublime Text (any code editing software of your choice. )
Submission Directions:
http://yourdomain.com/AAU/wnm249/m3/index.html or if you follow the direction, your url can be "http://yourdomain.com/AAU/wnm249/m3" without "index.html"
- Create a project folder inside wnm249 named m3
- Create an "images" folder inside your m3 folder, upload all your images in this "images" folder
- Name your project home page as index.html, upload this file to m3 directory /folder
- <click here> to post your url on homework submission discussion page (please follow m1 example when posting your work)
- View and critique at least one of your classmates’ project by commenting the post. Please make proactive suggestions regarding design layout and/or code practice. (Participation point)
http://yourdomain.com/AAU/wnm249/m3/index.html or if you follow the direction, your url can be "http://yourdomain.com/AAU/wnm249/m3" without "index.html"
Grading Criteria:
Exceeds expectations (A/B) | Meets expectations (C) | Does not meet expectations (D/F) | |
---|---|---|---|
Content | Thorough and insightful understanding of content. | Complete understanding of content. | Shows incomplete understanding of material. Missing content. |
2pts | 1.5pts | 1pt | |
Creativity | Enthusiastically uses materials and ideas for enhancement. | Use of materials and ideas for enhancement. | Shows minimal effort for enhancement of materials and ideas. |
3pts | 2pts | 1pt | |
Technical | Excellent use of HTML and CSS. No broken links. Accessibility considered. | Good use of HTML CSS and JS. Meet technical requirement. | Site production is incomplete. Needs improvement. Site might contain missing links, missing graphics. |
3pts | 2pts | 1pt | Technical(Best Practice) | Excellent use of HTML and CSS. No broken links. Clean code. No missing tags | Page functions as intended but missing closing tag, or tags mismatch | Page does not function as intended |
2pts | 1.5pts | 1pt | Technical(Links) | No missing/broken links | Page contains broken links but images display correctly | Page contains broken links and missing images |
2pts | 1.5pts | 1pt | |
Meeting Deadline | The assignment was turned in on time | The assignment was turned in late. | |
2pts | 0pt |