{"id":347,"date":"2012-09-07T02:33:37","date_gmt":"2012-09-07T02:33:37","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=347"},"modified":"2026-01-18T17:57:58","modified_gmt":"2026-01-18T17:57:58","slug":"05-building-a-website","status":"publish","type":"post","link":"http:\/\/b.parsons.edu\/~dejongo\/05-building-a-website\/","title":{"rendered":"05 Building a Website"},"content":{"rendered":"<h2><a href=\"http:\/\/b.parsons.edu\/~dejongo\/05-building-a-website\/#materials\">Week 5<\/a><br \/>2\/19-2\/20<\/h2>\n<p><strong>Complete the Web Site. <\/strong> Styling navigation, site architecture, optimize site for search engines and implement Google Analytics to track users. <strong>Activity:<\/strong> Build website using HTML5 Boilerplate. <strong>Activity:<\/strong> Style navigation links. <strong>Activity:<\/strong> First Quarter Assessment: Validate Code and Site Structure.<\/p>\n<h2 class=\"hw\"><a href=\"05-homework\/\">Homework<\/a><\/h2>\n<\/p>\n<p class=close>Develop your portfolio website.  <strong>Read<\/strong> chapter 13. <strong>The Midterm Assignment is Due:<\/strong> Next week for review and midterm evaluation. Have it ready for in-class presentation two weeks from now.<\/p>\n<h2>Questions from Last Weeks Class or Homework?<\/h2>\n<p><a href=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/midterm-quiz.html\"><span style=\"font-size: 2em; font-weight: 900; color: red; background: none;\">QUIZ Next Week<\/span><\/a> testing comprehension of CSS Layout Strategies.<\/p>\n<h2>Goals<\/h2>\n<\/p>\n<p>The goals of this unit are to:<\/p>\n<ul>\n<li>Be acquainted with information architecture (AI)\n<\/li>\n<li>Create menus using lists and rollovers\n<\/li>\n<li>Incorporate SEO into web page design.\n<\/li>\n<li>Effectively troubleshoot documents.\n<\/li>\n<\/ul>\n<ul>\n<li>Extoll the role of typography in communication and design.\n<\/li>\n<li>Understand the basic rules of Typography.\n<\/li>\n<li>Introduce embedded web fonts.\n<\/li>\n<li>Be able to work the text and fonts in CSS.\n<\/li>\n<li>To be inspired to push the Typographic boundaries in creating your own work.<br \/>\n<h2>Outcomes<\/h2>\n<p>At the end of this unit, students will have:<\/p>\n<li>Created a menu using lists and image rollovers.\n<\/li>\n<li>Can Optimize a web site for search engines.\n<\/li>\n<li>Use HTML5 Boilerplate for your own website.\n<\/li>\n<li>Troubleshoot a document when you get stuck.\n<\/li>\n<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>A working knowledge of typography for use on the web\n<\/li>\n<li>Access the many web fonts available\n<\/li>\n<li>The ability to set type rather than rely on defaults.\n<\/li>\n<li>Be conscious of what makes type legible.\n<\/li>\n<li>know how to follow the rules, and when to break them for effect.\n<\/li>\n<li>Find inspiration in Carson discussing his work.\n<\/li>\n<\/ul>\n<ul>\n<li>A working knowledge of typography for use on the web\n<\/li>\n<li>Access the many web fonts available\n<\/li>\n<li>The ability to set type rather than rely on the defaults.\n<\/li>\n<li>Be conscious of what makes type legible.\n<\/li>\n<li>know how to follow the rules, and when to break them for effect.\n<\/li>\n<li>Be inspired by Carson discussing his work.\n<\/li>\n<\/ul>\n<h2 id=\"materials\">Materials<\/h2>\n<\/p>\n<p>Additional materials for this unit can be found by following these links (30 pages):<\/p>\n<ul>\n<li><a class=\"overview\" href=\"05-information-architecture\/\">Information Architecture (IA)<\/a><\/li>\n<li><a class=\"read\" href=\"05-styling-the-navigation\/\">Styling the Navigation<\/a><\/li>\n<li><a class=\"read\" href=\"05-boilerplate\/\">The HTML5 Boilerplate<\/a>\n<\/li>\n<li><a class=\"read\" href=\"02-browser-dev-tools\/\">Browser Development Tools<\/a>\n<\/li>\n<li><a class=\"read\" href=\"05-ai-for-layout\/\/\">AI For Layout Help<\/a><\/li>\n<li><a class=\"read\" href=\"05-seo\/\">Search Engine Optimization<\/a><\/li>\n<li><a  class=\"read\"  href=\"05-troubleshooting\/\">Trouble Shooting<\/a>\n<\/li>\n<li><a class=\"\" href=\"05-google-analytics\/\">Google Analytics<\/a>\n<\/li>\n<li><a href=\"05-assessibility\/\">Assessibility<\/a>\n<\/li>\n<li><a href=\"05-404-page\/\">404 page<\/a>\n<\/li>\n<li><a href=\"05-print-stylesheet\/\">Print Style Sheet<\/a>\n<\/li>\n<li><a href=\"..\/12-fall\/stuff\/midterm-quiz-completed.html\">Quiz Answer<\/a>\n<\/li>\n<li><a href=\"visual-literacy\/\">Visual Literacy<\/a><\/li>\n<li><a href=\"05-homework\/\">Homework<\/a>\n<\/li>\n<\/ul>\n<ul>\n<li><a class=overview href=\"06-web-typography\/\">Type on the Web<\/a>\n<\/li>\n<li><a class=read href=\"06-typographic-resource\/\">Typographic Resource<\/a>\n<\/li>\n<li><a class=read href=\"06-text-formatting\">Formatting Text<\/a>\n<\/li>\n<li><a class=read href=\"06-web-fonts\">Web Fonts<\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/06-character-encoding\/\">Character Encoding and entities lookup<\/a>\n<\/li>\n<li><a href=\"visual-literacy\/\">Visual Literacy<\/a>\n<\/li>\n<li><a href=\"05-homework\/\">Homework<\/a>\n<\/li>\n<\/ul>\n<h2>Step-by-Step<\/h2>\n<table>\n<tr>\n<td style=\"width: 20px; text-align: right;\">20<\/td>\n<td>Review homework and answer questions. <\/td>\n<\/tr>\n<tr>\n<td>10<\/td>\n<td>Lecture: <a href=\"05-information-architecture\/\">Information Architecture (IA)<\/a><\/p>\n<tr>\n<td>55<\/td>\n<td>Demo: <a href=\"05-styling-the-navigation\/\">Styling the Navigation<\/a><\/td>\n<\/tr>\n<tr>\n<td>10 <\/td>\n<td>Break<\/td>\n<\/tr>\n<tr>\n<td>15<\/td>\n<td>Lecture: <a href=\"05-seo\/\">Search Engine Optimization<\/a> <\/td>\n<\/tr>\n<tr>\n<td>15<\/td>\n<td>Demo: <a href=\"05-seo\/\">Google Analytics<\/a> <\/td>\n<\/tr>\n<tr>\n<td>20<\/td>\n<td>Demo: <a href=\"05-boilerplate\/\">The HTML5 Boilerplate<\/a> (Watch the <a href=\"http:\/\/www.youtube.com\/watch?feature=player_embedded&#038;v=WkLO-q2wC80\">Video<\/a>)<\/td>\n<\/tr>\n<tr>\n<td>10<\/td>\n<td>Demo: <a href=\"05-print-stylesheet\/\">Print Style Sheet<\/a> and <a href=12-fall\/05-404-page\/\">404 Page<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>10<\/td>\n<td>Lecture:<a href=\"05-troubleshooting\/\">Trouble Shooting<\/a> <\/td>\n<\/tr>\n<tr>\n<td>10<\/td>\n<td>Demo:<a href=\"https:\/\/browserlab.adobe.com\/en-us\/index.html#url=;view=0;state=browse;zoom=100\">Adobe Browser Lab<\/a> and  <a href=\"http:\/\/tv.adobe.com\/watch\/adobe-cs-live\/browserlab-website-testing\/\">video explanation<\/a> (you need to sign up to use it)<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/table>\n<h2>Definitions<\/h2>\n<\/p>\n<p>These are the terms that participants should be familiar with during this unit:<\/p>\n<dl>\n<dt><a href=\"http:\/\/en.wikipedia.org\/wiki\/Information_architecture\">404 Page<\/a><\/p>\n<dd>\n<p>The 404 or Not Found error message is aHTTP standard response code indicating that the client was able to communicate with the server but the server could not find what was requested. The web site hosting server will typically generate &#8220;404 &#8211; Not Found&#8221; web page, when a user attempts to follow a broken or dead link, hence the 404 error is one of the most recognizable errors users can find on the web.<\/p>\n<dt><a href=\"http:\/\/en.wikipedia.org\/wiki\/Information_architecture\">Information Architecture<\/a><\/p>\n<dd>\n<p><b>Information architecture<\/b> (<b>IA<\/b>) is the art of expressing a <a href=\"http:\/\/en.wikipedia.org\/wiki\/Scientific_modelling\" title=\"Scientific modelling\">model<\/a> or <a href=\"http:\/\/en.wikipedia.org\/wiki\/Concept\" title=\"Concept\">concept<\/a> of <a href=\"http:\/\/en.wikipedia.org\/wiki\/Information\" title=\"Information\">information<\/a> used in activities that require explicit details of complex systems. Among these activities are <a href=\"http:\/\/en.wikipedia.org\/wiki\/Library\" title=\"Library\">library<\/a> systems, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Content_Management\" title=\"Content Management\" class=\"mw-redirect\">Content Management<\/a> Systems, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Web_development\" title=\"Web development\">web development<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/User_interaction\" title=\"User interaction\" class=\"mw-redirect\">user interactions<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Database\" title=\"Database\">database<\/a> development, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Programming\" title=\"Programming\" class=\"mw-redirect\">programming<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Technical_writing\" title=\"Technical writing\">technical writing<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Enterprise_architecture\" title=\"Enterprise architecture\">enterprise architecture<\/a>, and critical system <a href=\"http:\/\/en.wikipedia.org\/wiki\/Software_design\" title=\"Software design\">software design<\/a>. Information architecture has somewhat different meanings in these different branches of <a href=\"http:\/\/en.wikipedia.org\/wiki\/Information_system\" title=\"Information system\">IS<\/a> or <a href=\"http:\/\/en.wikipedia.org\/wiki\/Information_technology\" title=\"Information technology\">IT<\/a> architecture. Most definitions have common qualities: a structural design of shared environments, methods of organizing and labeling <a href=\"http:\/\/en.wikipedia.org\/wiki\/Website\" title=\"Website\">websites<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Intranet\" title=\"Intranet\">intranets<\/a>, and <a href=\"http:\/\/en.wikipedia.org\/wiki\/Online_communities\" title=\"Online communities\" class=\"mw-redirect\">online communities<\/a>, and ways of bringing the principles of design and architecture to the digital landscape.<\/p>\n<dt><a href=\"http:\/\/en.wikipedia.org\/wiki\/User_Interface_design\">User Interface design<\/a><\/p>\n<dd>\n<p><b>User interface design<\/b> or <b>user interface engineering<\/b> is the design of <a href=\"http:\/\/en.wikipedia.org\/wiki\/Computer\" title=\"Computer\">computers<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Home_appliance\" title=\"Home appliance\">appliances<\/a>, machines, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Communication\" title=\"Communication\">mobile communication devices<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Software\" title=\"Software\" class=\"mw-redirect\">software<\/a> applications, and <a href=\"http:\/\/en.wikipedia.org\/wiki\/Website\" title=\"Website\">websites<\/a> with the focus on the <a href=\"http:\/\/en.wikipedia.org\/wiki\/User_experience\" title=\"User experience\">user&#8217;s experience<\/a> and interaction. The goal of user interface design is to make the user&#8217;s interaction as simple and efficient as possible, in terms of accomplishing user goals\u2014what is often called <a href=\"http:\/\/en.wikipedia.org\/wiki\/User-centered_design\" title=\"User-centered design\">user-centered design<\/a>. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. <a href=\"http:\/\/en.wikipedia.org\/wiki\/Graphic_design\" title=\"Graphic design\">Graphic design<\/a> may be utilized to support its <a href=\"http:\/\/en.wikipedia.org\/wiki\/Usability\" title=\"Usability\">usability<\/a>. The design process must balance technical functionality and visual elements (e.g., <a href=\"http:\/\/en.wikipedia.org\/wiki\/Mental_model\" title=\"Mental model\">mental model<\/a>) to create a system that is not only operational but also usable and adaptable to changing user needs.<\/p>\n<p>Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered around their expertise, whether that be <a href=\"http:\/\/en.wikipedia.org\/wiki\/Software_design\" title=\"Software design\">software design<\/a>, user research, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Web_design\" title=\"Web design\">web design<\/a>, or <a href=\"http:\/\/en.wikipedia.org\/wiki\/Industrial_design\" title=\"Industrial design\">industrial design<\/a>.<\/p>\n<dt><a href=\"http:\/\/en.wikipedia.org\/wiki\/Principles_of_User_Interface_Design\">Principles of User Interface Design<\/a><\/p>\n<dd>\n<p><b>Principles of User Interface Design<\/b> are intended to improve the quality of user interface design. These principles are:<\/p>\n<ul>\n<li><i>The structure principle<\/i>: Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.<\/li>\n<\/ul>\n<ul>\n<li><i>The simplicity principle<\/i>: The design should make simple, common tasks easy, communicating clearly and simply in the user&#8217;s own language, and providing good shortcuts that are meaningfully related to longer procedures.<\/li>\n<\/ul>\n<ul>\n<li><i>The visibility principle<\/i>: The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don&#8217;t overwhelm users with alternatives or confuse with unneeded information.<\/li>\n<\/ul>\n<ul>\n<li><i>The feedback principle<\/i>: The <b>design<\/b> should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.<\/li>\n<\/ul>\n<ul>\n<li><i>The tolerance principle<\/i>: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.<\/li>\n<\/ul>\n<ul>\n<li><i>The reuse principle<\/i>: The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.<\/li>\n<\/ul>\n<\/dd>\n<\/dt>\n<\/dd>\n<\/dt>\n<\/dd>\n<\/dt>\n<\/dd>\n<\/dt>\n<\/dl>\n","protected":false},"excerpt":{"rendered":"<p>Week 52\/19-2\/20 Complete the Web Site. Styling navigation, site architecture, optimize site for search engines and implement Google Analytics to track users. Activity: Build website using HTML5 Boilerplate. Activity: Style navigation links. Activity: First Quarter Assessment: Validate Code and Site &hellip; <a href=\"http:\/\/b.parsons.edu\/~dejongo\/05-building-a-website\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/347"}],"collection":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=347"}],"version-history":[{"count":83,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/347\/revisions"}],"predecessor-version":[{"id":6606,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/347\/revisions\/6606"}],"wp:attachment":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=347"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}