CIS89A - 3. Text

A few words - Text

Most web pages include a lot of text. It is important to know how to format text for readability and searching. Most visitors skim to find the information they are looking for. So it is important that pages of text are attractive and well organized.


Learning outcomes

• consider onscreen readability of text
• provide printer-friendly version of page
• organize content with natural divisions and headings
• arrange information in columns
• understand accessibility issues for people with disabilities


Keywords

• readability, text style, .PDF, paragraph, line break, quotation block, box, alignment, page layout, column, fluid, layer

Reading guide

• What contributes to the readability of a web page?
• Why should you avoid underlining text on a web page?
• What are three key things to remember when designing a printable version of a web page?

Assignments

Coding project title and required elements

• cis89text1 - strong, font-family, small, large, italic, h1, h3, div, p, br, pre, align, margin, padding. Display heading, areas/box margins, text fonts styling color size

All these should be visible just looking at the "page" that displays from the link you submit

• text - multiple fonts, colors, italic, bold, pre-format
• paragraphs, align
• headings - h1, h3
• text in a box - margins, padding
• multi-column fluid page layout (Willard p.111)
• not visible but also required - comments - .html and .css

The list of tags for the coding assignments are taken from the Willard textbook. There is usually a description and an example for each. There may be a mix of .html and .css because that is how they are presented in the textbook.

1. KWLH - What do you already KNOW about Text? What do you WANT to learn? Make a note for yourself as you start work on this module. Then, at the end of this module, what did you LEARN? HOW did you learn it? Post a brief note to the I know... discussion.
   
   
2. 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.
   
   
3. Read Chapters 4. Working with Text, 5. Page Structure, 6. Positioning Page Elements in the textbook.
   
   
4. Work through the W3schools Paragraph tutorial, Try it and exercises.
   http://www.w3schools.com/html/html_paragraphs.asp
   
   
5. Working with text - For this assignment, you need some text to format. Find a web page that provides some useful information associated with your interests. Select 2-3 paragraphs of text and copy the text to a new coding project AND include the web address of the page you are copying from. The text will look like a big jumble of words.
   Using the web page layout elements and attributes, add text formatting so the text is readable. Include the coding project name and the list of elements and attributes for the assignment as a comment in your code. Include cis89text1 as the title tag in the head section of your project code.
   
6. Page structure, Positioning elements - In the same project, use the assignment elements and tags to reformat and organize the text. Use css code to control the styling. You can add more text if you need to. For this assignment, the text isn't as important figuring out ways to use all the elements and tags within your project html and css coding. Save (publish) the final version.
7. Submit the link to your coding project to the Text and Page Format assignment along with a list of the required tags that you included in your code.
8. AND Post a link to your coding project along with any comments or questions about the assignment to the Text and Page Format discussion.
9. Review the work of 2 others. For each, post a note with a link to the page, 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? Any questions you have about the code you are reviewing? Post to the Text and Page Format discussion.
   
   
10. Writing for the web - Pick one of the articles listed in Writing for the Web. Write a short review of the article you selected and post it along with a link to the article in the Writing for the Web discussion.
    
    
11. Adaptive technology - It is important for web developers to understand both the limitations and the powerful tools provided by technology so people with disabilities can use the web. The result may be different but accessibility can be much greater if the web developer understands Adaptive Technology. Here are some websites with good information on Adaptive Technology.
    .. DeAnza Computer Accessibility Lab (CAL) Specialized equipment and training are available for loan through DSS and includes: Digital tape recorders, Portable closed circuit print enlargers, Assistive listening devices (DHHS), Daisy players, Smart Pens. Talking calculators
    .. Adaptive Technology - includes good overview of some of the adaptive equipment and software available
    .. Adaptive tools - to help with learning and attention issues. Some adaptive tools are low-tech and some are pretty fancy.
    
    
12. Accessibility - Dyslexia simulation - Try out this constantly changing dyslexia simulation. Or try the Screen Reader simulation. Does the simulation give you a better understanding of the problems faced by computer users with these disabilities?
    Then describe your experience in 1-2 sentences in the Accessibility Simulations discussion.
    
    
13. Privacy, online identity, digital footprint - Digital Footprint - the record or trail left by the things you do online. Your social media activity, the info on your personal website, your browsing history, your online subscriptions, any photo galleries and videos you’ve uploaded — essentially, anything on the Internet with your name on it. Just like a tattoo, your digital reputation is an expression of yourself. It's highly visible, and hard to remove. What is one thing that you will do differently having reviewed this list? Post ONE sentence in the Digital Footprint discussion.
    
    
14. Success Skills - Protect it - Digital Citizenship. Review 2-3 articles from Success skills - Protect it. Pick one article you would recommend. Find another article online that would be appropriate to add to the selection list. Post a link and a brief summary of the reasons for each of your selections to the Success Skills - Protect it discussion.
    
    
15. Group Project groups discussions - Throughout the semester, there are discussion tasks to practice working in a group online. This will be your group for review and feedback in the final web project development activities as well.
    You are automatically assigned to a group. Since this is a group discussion, each group has its own conversation for this topic. In Group Project groups discussions "pinned" at the top of the Discussions menu, are the discussions you have access to. Note: This will take you out of the course to your group discussion. (It's a Canvas thing...) The objective is to work together with your group to complete these tasks. In Module 11. you will provide feedback on the group project experience.
    
    Locate the Group Project groups discussions and your group. Post a short note about your experience working in online groups. No experience is ok - we are all here to learn something new. There are several suggested "tasks" for the group. Provide your responses. You can suggest other tasks and activities for your group. There will be several group activities throughout the course.
    
    

Media

• Wendy Willard - Chapters 4. Working with Text, 5. Page Structure, 6. Positioning Page Elements
• HTML Dog HTML Beginner Tutorial
• Visual Quickstart - 4. Text

TEXT

• (video) Say What You Mean - why simple, punchy language is often the clearest way to convey a message.

• Readability Calculator - useful tool for checking the readability of your content. You have to know what the indices represent and what is appropriate for your target audience.

Formatting Text Using CSS - Tutorial Republic

CSS text properties allow you to define several text styles such as color, alignment, spacing, decoration, transformation etc. very easily an effectively.CSS has several properties for defining the...

Lorem Ipsum - All the facts

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of...

Variable Fonts

Variable fonts are coming. How will it change the web design and development process? Tim Brown and Bram Stein explain how variable fonts will work and what you can do with them now."
...

F-Shaped Pattern For Reading Web Content

Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe. F for fast. That's how users read your precious con...

CSS Text

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between cha...

Accessibility

• Test for Dyslexia: 37 Common Traits - Most dyslexics will exhibit about 10 of the following traits and behaviors. These characteristics can vary from day-to-day or minute-to-minute. The most consistent thing about dyslexics is their inconsistency.

Designing for colorblindness - The Verge

Living with colorblindness feels like you’re constantly being pranked by the world in subtle, irritating ways.The other day, I was booking a flight on Kayak, trying to figure out which dates are...

WhoCanUse

What is whocanuse.com?It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.The Web Content Accessibility Guidelines (WCA...

Our Impact - The AbleGamers Charity

Creating opportunities that enable play in order to combat social isolation, foster inclusive communities, and improve the quality of life for people with disabilities."
<p clas...

Testing Sites And Apps With Blind Users: A Cheat Sheet — Smashing Magazine

users of screen readers — special software that converts the source code of a site or app into speech. Usually, these are people with low vision and blindness but not only. They’ll help you dis...

WAVE Web Accessibility Evaluation Tool

WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Gu...

PORTFOLIO

How to make a personal website in 11 steps | Webflow Blog

We know that you want to share unique interests, expertise, and personality with the world.A personal website is a great opportunity to get your personality and skills out there. We’re going to t...

20 Best Portfolio Websites to See Before Creating Your Own

what distinguishes you from other creatives and how you can express this in your design, a great place to start is to search for inspiration by looking at the works of others. Before creating your...

5 Design Principles For Building Your First Portfolio | Dribbble

Strategize first, write second, design lastAs a designer, it’s natural to want to jump into the “designing” part of a project. Excitement builds as you think about cool design ideas and how y...

Six easy steps to create a successful online portfolio | Creative Boom

"Keep it simple and remember your goalsFirst impressions do count. When someone lands on your portfolio site, you’ll want them to feel compelled to stay and, ultimately, decide to hire you.I...

EPortfolio Rubric (Digital Portfolio Rubric)

All artifacts and work samples are clearly and directly related to the purpose of the eportfolio. A wide variety of artifacts is included. The navigation links are intuitive. The various parts of...

2017.4 7288 . 2018.3 9808 . 2018.9 11,282