CIS89A - 9. Web Design and Deployment

From WikiEducator
Jump to: navigation, search
Udine loggia Leonello

Web Design and Deployment

Knowing how to code HTML and CSS are just the beginning. Putting these together to produce a functional and attractive web site are the next step. There are many factors to consider when designing and deploying a site.

Learning outcomes

  • understand usability
  • follow design guidelines
  • understand the design process
  • transfer files to a web server
  • understand search optimization


  • usability, audience, FTP

Reading guide


Coding assignment

  • cis89design * head title keywords description * comments in html and css * lists link table * css fluid layout * scalable images * viewport

  1. Review the Keywords and Reading guide questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module.

  2. Read chapters 17. How to design a website and 18. How to deploy a website on a web server .

  3. Search Engine Optimization (SEO) - Being "found" and listed in search results is an important part of publicizing your site. The elements in head section of the page is used for this. More than just Google, there are Baidu, Bing, and Yahoo! and others. Find an article that gives a good overview or specific advice about using these elements effectively. Post a brief summary and a link to the article in the Search Engine Optimization discussion.

  4. Internet of Things (IoT) - The next big thing is the Internet of Things. The articles listed in the Media section provide a great overview with lots of interesting examples in a broad range of categories. Take a look. What do you think? What is one example that is a surprise but you would like to see? Post the name and ONE sentence about your selection to the Internet of Things discussion. Conclude your post with a question. Reply to 2 others and concluded your replies with questions.

  5. Revisit basics - In a new project, use all the elements, attributes and properties within your page. Include some descriptive information so the viewer knows what is being demonstrated within your page. Also, use comments in your HTML code to indicate what you are doing. Publish your project file.
  6. Submit the link to your project to the Revisit basics assignment.
  7. Post a link to your project and any comments or questions about the assignment to the Revisit basics discussion.
  8. Review the work of 2 others - the page display and the source code. Post a note with links to those projects, and a brief description of your observations - anything that you learned from looking at these? Any ideas you have for using in your own work in the future? Post to the Revisit basics discussion.

  9. Success Skills - Solve it - There are many tools available on the web to help with problem solving skills development and practice. Critical Thinking, Problem Solving and Decision Making are the primary focus of the articles provided. Review 2-3 articles from Success skills Solve it. Find another similar article that your would recommend be added to the list. Post a link and a brief summary of 1 to the Success Skills - Solve it discussion.

  10. Phishing - Do you think you know an email scam when you see one? Take this quiz and see if you can tell the real corporate emails to customers from the phishing scams. I got 7 out of 10 right. I missed 1 scam but I would have ignored two real requests from companies I do business with.

  11. eCommerce - Some of the "best" examples of web site design are the sites that sell stuff. Find a site that sells products or services online. Think about why the customer visits this site. How does the site design help the customer buy from the site? Post a link to a commercial web site with a brief description of what makes this a successful (or not) web design to the eCommerce site design discussion. Keep the description short - 2-3 sentences.

Icon multimedia.gif


  • chapters 17. How to design a website and 18, How to deploy a website on a web server

Internet/computer tricks

Internet of Things


Catalogue of H5P Content | eCampusOntario H5P Studio
question set. memory game. interactive video. flashcards. mark the words. multiple choice. drag and drop.
<p class="diigo-tags"><strong>Tags:</strong>...
The W3C Markup Validation Service
Markup Validation Service Check the markup (HTML, XHTML, …) of Web documents. This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.
<p class...
Search Engine for Source Code -
Ultimate solution for digital marketing and affiliate marketing research, PublicWWW allow you to perform searches this way, something that is not possible with other regular search engines: "<...
Avoiding common HTML5 mistakes | HTML5 Doctor
HTML5 sites and their underlying markup. In this post, I’ll show you some of the mistakes and poor markup practices I often see and explain how to avoid them. <section> is not a wrapper. Th...


Webpage metadata tips and examples for 2018
metadata?While not a visual element on a page, its metadata—page titles and meta descriptions—shapes how your content is perceived. Web writers create metadata to summarize a webpage’s conten...
SEO and Usability
What makes a website good will also give it a high SERP rank, but overly tricky search engine optimization can undermine the user experience.At first glance, search engine optimization (SEO) and us...
Social Media SEO: What You Need to Know to Grow Your Business
With social media growing at warp speed, it is becoming an unavoidable part of SEO, especially because it is made up of real people. After content, social media can be seen as an integral factor in...
Boost Your Fanbase and Search Ranking with Credible Writing
relevance, authority, and trust are the three key components of high-quality, successful content. Once you can demonstrate your authority in a particular niche, your chances of ranking favorably on...

2016.3 2540 . 2018.3 5131