Week 2
2/5
Semantic HTML5, Developing Website and User Experience. Writing semantic HTML5, preparing images, upload files using FTP client and organize server space. Introduce user experience in developing content and designing layout Activity: Create an HTML document for the website you analyzed with an eye on making it your own portfolio. Activity: Activate the account school provides and upload first assignment.
Homework
Create landing page with link to assignment and worksheet. Worksheet is to contain strategy, design considerations, wireframe and comp of website. Make links to these assignments on the worksheet. Read chapters 4-6. Due: The following week.
Materials
Additional materials for this unit can be found by following these links (32 pages):
- User Experience (UX)
- Designing for the Web (7 Steps)
- Semantic Markup
- Color and Preparing Images for the Web
- Fetch and Text Wrangler Tips
- Visual Literacy
- Worksheet Example
- Homework
last week’s links:
- HTML & CSS Primer
- Writing HTML
- Absolute and Relative Addresses
- Tools of the Trade
- Setting Up Your Server Space
- History of the Web
- HTML5 Doctor Element Index for all your quick lookup needs.
- HTML5 Template
- Dabblet for quick HTML and CSS explorations
- Homework
- Style Guide Example
Goals
The goals of this unit are to:
- Understand the user experience that drives web design.
- Incorporate user interaction into the process of creating web sites.
- Explore the semantic implications of the Hyper Text Markup Language.
- Show how HTML5 imposes semantic order with its tags.
- Mark up a document using these tags and to Validate that document using the validator.
- Know how to prepare images for use on the web
- Understand how to use color.
- Use inline CSS to visually design the content.
Outcomes
At the end of this unit, students will have:
- Will consider the user’s experience when creating for the web.
- Have gone through the process of creating a web site.
- Transformed content into semantically correct markup.
- Used their server space to upload work.
- Created a valid HTML5 document.
- Checked the validity of that document.
- Prepare images for the web using the correct file format and resolution.
- Understand the hexadecimal (base 16) notation for RGB color.
- Basic styling of the document using inline CSS styles.
Step-by-Step
| 20 | Review homework and answer questions. |
| 10 | Discussion: What did you find out when you analyzed the website?. |
| 10 | Lecture: User Experience (UX) |
| 10 | Discussion: user experience. |
| 30 | Demonstration: Designing a website from scratch |
| 10 | Discussion: Designing a website from scratch |
| 10 | Fetch and Text Wrangler Tips Is anyone is having problems uploading to their webspace? Let me know. |
| 10 | Break |
| 10 | Lecture: Semantic Markup |
| 40 | Writing semantic HTML5 |
| 20 | Lecture: Preparing Images for the Web |
Final Assignment Links
Updated links that I expect to be up and live as they will be graded for your final grade.
Example of landing page from several semesters ago.
- Website Analysis*
Week 3
- landing page— links to your assignments and a picture next to your name.
- HTML markup of Analysis
- Worksheet: behind the scenes on creative process for midterm (7 steps)*:
Week 4
- Portfolio exhibiting the CSS selections
- HTML Wire Frame from PhotoShop comp
Week 5
- incorporate CSS Layout Strategies in web site
Week 6
- Quiz
- Peer Review Notes / Advice
Week 7
- Typography Poster
- Finished Midterm: Portfolio
Week 8
- Final Worksheet*
Week 9
- Responsive Redesign of Portfolio
Week 10
- CSS3 Collateral
- Class Exercise
Week 11
- CSS3 Animatics
- Class Exercise
Week 12
- Final: Modular Navigation
Week 13
- Multimedia Demonstration
Week 14
- Forms
- Peer Review Notes / Advice
Week 15
- Final — You have 5 days extra to hand it in before I determine my final grade
Week 2
Each assignment exhibits a skill. If you have used that skill in building your portfolio, link to that page and explain how it satisfies the homework. For example, for Week 11 CSS Animatics, if you used a hover that fades in your final, point to the page that exhibits that feature and let me know where to look if it is not completely obvious.
The final website sells something. It does not have to be lots of pages, but the quality has to be ready for public scrutiny. It should have many of the topics we covered, like CSS3, Multimedia, PHP, forms, media queries, etc.
Final Grade Calculation (from syllabus)
The final grade adds up to a possible 110%, allowing some leeway in the satisfactory completion of all assignments, as long as the student attends and participates in class. 3 Absences are ground for Failure.
| Date Due | Percent | |
|---|---|---|
| 9/3/14 | Website Analysis* | 5% |
| 9/10/14 | Landing Page | 5% |
| 9/10/14 | HTML markup of Analysis | 5% |
| 9/10/14 | 7 Steps — Midterm Worksheet* | 5% |
| 9/17/14 | CSS selections | 5% |
| 9/17/14 | HTML Wire Frame from PhotoShop comp | 5% |
| First Quarter Assessment | ||
| 10/1/24 | incorporate CSS Layout Strategies in web site | 5% |
| 10/1/14 | Quiz: | |
| 10/1/24 | Peer Review | 5% |
| Official Midterm Review | ||
| 10/8/14 | Typography Poster | 5% |
| 10/8/14 | Portfolio: Midterm | 10% |
| 10/8/14 | class Presentation | 5% |
| Second Quarter Assessment | ||
| 10/16/14 | Final: Worksheet* | 5% |
| 10/22/14 | Responsive Redesign of Portfolio | 5% |
| 10/29/14/14 | CSS3 Collateral | 5% |
| 11/5/14 | CSS3 Animatic | 5% |
| 11/12/14 | Final: Modular Navigation | 5% |
| Third Quarter Assessment | ||
| 11/19/14 | HTML5 Multimedia | 5% |
| 12/19/14 | Final: Peer Review | 5% |
| 12/3/14 | Forms | 5% |
| 12/10/14 | WordPress CMS | 5% |
| 12/10/14 | Final: Presentation | 5% |
| Final Quarter Assessment | ||
| Two assignments dropped: | -10% | |
| Total: | 100% |
*Do not require coding.
Current Practice UX Design
Two newspapers, the Guardian and the NY Times have updated their websites. Actually, the Guardian is currently (Fall 2014) asking for feedback, as part of its XU testing cycle, asking for user feedback.
- NY Times A standard setting newspaper that helped move the web away from its addiction to tables in 2007 has just been using jQuery animation. Follow the link to see how UX Design considerations led to a more engaging web experience.
- The Guardian tests its UXD for mobile.
More News and External Resources
Links to help you explore you explore the visual development of your Portfolio Site.
There is no reason to have a primitive site, because you want it to show off the content. Show me what you can do. That is the basis for your grade. Impress me with your design sensibility.
Official W3 Resources
Official W3 Resources: Open. Free. Crowdsourced. The Web Platform to Go to.
- Beg Development for Beginners
- General Web Concepts
- HTML (including index of HTML Elements and Attributes)
- CSS (including list of Standard CSS Properties)
- Accessibility
- Javascript
- Dom
- SVG
Depreciated Documentation
- Terminology
- Documents
- HTML Syntax
- Elements Organized by Function
- elements
- Common Content Models
- Global Attributes
- Data Types
- Index of terms
Talking Points
Topics covered in the reading:
Chapter 4: Text
- Starting a New Paragraph 100
- Adding Author Contact Information 102
- Creating a Figure 104
- Specifying Time 106
- Marking Important and Emphasized Text 110
- Indicating a Citation or Reference 112
- Quoting Text 113
- Highlighting Text 116
- Explaining Abbreviations 118
- Defining a Term 120
- Creating Superscripts and Subscripts 121
- Noting Edits and Inaccurate Text 124
- Marking Up Code 128
- Using Preformatted Text 130
- Specifying Fine Print 132
- Creating a Line Break 133
- Creating Spans 134
- Other Elements 136
Chapter 5: Working with Images
- About Images for the Web 148
- Getting Images 152
- Choosing an Image Editor 153
- Saving Your Images 154
- Inserting Images on a Page 156
- Offering Alternate Text 157
- Specifying Image Size 158
- Scaling Images with the Browser 160
- Scaling Images with an Image Editor 161
- Adding Icons for Your Web Site 162
Chapter 6: Links
- The Anatomy of a Link 166
- Creating a Link to Another Web Page 167
- Creating Anchors 172
- Linking to a Specific Anchor 174
- Creating Other Kinds of Links 175
Definitions
These are the terms that participants should be familiar with during this unit:
- Semantic Web
-
The Semantic Web is a “web of data” that enables machines to understand the semantics, or meaning, of information on the World Wide Web. It extends the network of hyperlinked human-readable web pages by inserting machine-readable metadata about pages and how they are related to each other, enabling automated agents to access the Web more intelligently and perform tasks on behalf of users. The term was coined by Tim Berners-Lee, the inventor of the World Wide Web and director of the World Wide Web Consortium, which oversees the development of proposed Semantic Web standards. He defines the Semantic Web as “a web of data that can be processed directly and indirectly by machines.”
- User Experience
-
User experience (UX) is about how a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change.
- User Interface design
-
User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design may be utilized to support its usability. The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs.
- 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 software design, user research, web design, or industrial design.
- Web design
- Web design is a broad term used to encompass the way that content (usually hypertext or hypermedia) is delivered to an end-user through the World Wide Web, using a web browser (e.g. Opera, Internet Explorer, Firefox, Google Chrome, Safari) or other web-enabled software to display the content. The intent of web design is to create a website—a collection of online content including documents and applications that reside on a web server/servers. A website may include text, images, sounds and other content, and may be interactive.
- Information Design
-
Information design is the skill and practice of preparing information so people can use it with efficiency and effectiveness. Where the data is complex or unstructured, a visual representation can express its meaning more clearly to the viewer.
- Information Architecture
-
Information architecture is defined by the Information Architecture Institute as:
- The structural design of shared information environments.
- The art and science of organizing and labeling web sites, intranets, online communities, and software to support findability and usability.
- An emerging community of practice focused on bringing principles of design and architecture to the digital landscape.