CIS89A - 7. Lists

To the point - Lists

Lists are everywhere. Space isn't a problem on the web and much of the information on the web is text. Using lists for text increases readability and helps viewers skim text for what they are looking for.


Learning outcomes

• use each of the list types in a web page
• combine list types
• use customized list formatting


Keywords

• ordered, unordered, definition, style

Reading guide

• What are the types of lists available?
• How can list appearance be altered?
• What are some of the customizations that can be added to list appearances?

Assignments

Coding project title and required elements

• cis89lists1 - li, ol, ul, dl, type, i, A, dt, dd * ordered lists with 2 different numbering, un-numbered lists with 2 different bullet types, nested lists, definition list used appropriately * .css - customized bullets (list-style-image)

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 Chapter 10. Creating Lists in the textbook.
   
   
3. Creating lists - In a new project file, use the assignment elements and tags to format lists. Use all the elements and tags within your project. Include an example of customized bullets (list-style-image). Publish a link to your project.
4. Submit the full address of your coding project file to the Creating lists assignment.
5. Post a link to your coding project file and any comments or questions about the assignment to the Creating lists discussion.
6. Review the work of 2 others and 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 Creating lists discussion.
   
   
7. Copyrights, Fair Use and Attribution - There is a lot of really good information on the web. Rather than creating your own material, it may be easier to use what someone else already created. How you use it and how you credit the creator are important. Review one of the Copyright, fair use media selections or find one on the web.
   Attribution - giving credit to the creator of a copyright work. Since everything is automatically copyright, if you use it, you need to provide attribution. For academic publications, this is also know as citation. Some sources of media provide information about the attribution to include if you use a work. More information can be found at Creative Commons, Wikimedia Commons and elsewhere. Find an article (or video) that provides information about attribution.
   Post a link and one important point about educational use of copyright material AND Post a link to the attribution resource and a brief description of the key points to the Copyright, Fair Use and Attribution discussion.
   
   
8. Portfolio is the new resume - As a job seeker and web developer, a portfolio is essential to show who you are and what you can do. Find examples of portfolios. Look for resources that describe how to create a portfolio with suggestions for what to include and how to present it. Unless you have some other web site to build, consider creating your own portfolio for your web site project. Select one portfolio and one how-to resource and post to the Portfolio discussion. Describe how these resources would help you create your portfolio.
   Review the selections of 2 others.
   
   
9. Professional web pages - Review the site you selected for the Learn from the Pros discussion in Module 1. Examine the source code for the site. (If the site uses a lot of JavaScript, select another site that relies on HTML and CSS.) How is this source code different from what you have been making? Is there code to handle mobile devices separately from desktop-size screens? What makes this web site more professional than what you are producing for the coding projects? How can you use some of these ideas and techniques to make your code more professional? Post a link to the web page that you like and give a brief description of what the professional developer is doing differently to the Learn from the Pros - Revisited discussion.
   Since web site accessibility is a subset of web site usability, one needs to ensure that the site is accessible as part of the aspects that ultimately make it usable too. Check the accessibility of the site you selected with on of the Free Web-Based Web Site Accessibility Evaluation Tools listed. Report the evaluation findings in your Learn from the Pros - Revisited discussion.
   
   
10. Community Participation - Virtual "communities" are groups of people with common interests who share information, ask questions and have discussions online. Sometimes these are personal - family and friends, but many are professional or special interest groups. In the Community participation discussion, post a note about your online communities. These can be casual - Facebook groups, newsletters, discussion forums, or they can be more formal requiring members to join to participate.
    
    
11. Virtual Reality - Although it would be nice to have a virtual reality viewer, you can still see the videos in a regular browser from your computer or phone. You won't get the full effect, but you will get the idea. Access the WITHIN site and explore. WebVR is an open specification that makes it possible to experience VR in your browser. The goal is to make it easier for everyone to get into VR experiences. Just use your computer or phone without a headset. You won’t be able to see in 3D or interact as fully in most VR worlds, but you can still look around in 360 degrees. View several of the VR experiences. Select one and post a link and short summary of your experience. How was this different from a regular video? Have you ever used a VR viewer? Is VR going to change how we experience audio and visual content? Post your reply to the WebVR Experience discussion.
    
    
12. Interactive information Discovery is a combination of intelligent search engine and interactive visual interface. Visualize the search results so that the user can really understand what drives the list of hits. The search can be refined by manipulating the visualized keywords, thus creating a discovery process instead of the traditional trial-and-error type searches. Find 1-2 examples of interactive information discovery and search visualization. Is the visual display helpful? What did you learn about user interaction? Post a link and your comments to the Interactive information discovery discussion.
    
    
13. Group Project groups - The objective is to work together with your group to complete these tasks. You are automatically assigned to a group. There are several tasks described in the discussion for your group to complete by Module 11. In Module 11. you will provide feedback on the group project experience.
    Use the Group Project groups discussions (pinned at the top of the Discussion page) to share your comments and suggestions.

Media

• Wendy Willard - Chapter 10. Creating Lists
• HTML Dog HTML Beginner Tutorial
• Visual Quickstart - 15. Lists

LISTS

CSS list properties

https://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_allThe CSS list properties allow you to: Set different list item markers for ordered lists Set different list item...

CSS Styling Lists

The CSS list properties allow you to: Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the list item marker Add back...

HTML Lists

List items can contain new list, and other HTML elements, like images and links, etc.HTML lists can be styled in many different ways with CSS.One popular way is to style a list horizontally, to cre...

Icon Archive - Search 735,802 free icons, desktop icons, download icons, social icons, xp icons, vista icons

Search through 735,802 icons / 2,458 iconsetsm- Check the License entry before you download - make sure the icon is free to use
<p class="diigo-tags"><strong>Tags:...

Copyright, fair use

• Copyright on the Web - really simple: If you did not write or create the article, graphic, or data that you found, then you need permission from the owner before you can copy it
• Copyright Basis for Graphic Designers - Except under certain circumstances (see “work made for hire” below), you own the copyright in your work at the moment you create it in a “fixed” form of “expression.”

‎Planet Money: The prince of prints and his prints of Prince on Apple Podcasts

In 1981, photographer Lynn Goldsmith took a portrait of the musician Prince. It's a pretty standard headshot — it's in black-and-white, and Prince is staring down the camera lens.This was...

Helpful Web Resources for Learning about Copyright - Educators Technology

"collection of helpful resources you can use with your students to teach them about copyright. But before we delve into the collection, let’s first discuss why learning about copyright is pi...

Five Resources for Teaching and Learning About Copyright

resources for helping students and teachers understand the importance and the key concepts of copyright as it relates to school projects.Stanford University LibrariesStanford University Libraries o...

Web page formatting

• 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 content. In a few seconds, their eyes move at amazing speeds across your website’s words in a pattern that's very different from what you learned in school.

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...

2016.3 1976 . 2018.3 4114 . 2018.11 6180