CIS89A - 7. Lists

From WikiEducator
Jump to: navigation, search
Geothermal resource map US

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


  • 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?


Assignment file name 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, 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 Thimble file, use the assignment elements and tags to format lists. Use all the elements and tags within your page. Include an example of customized bullets (list-style-image). Publish your HTML file.
  4. Submit the full name of your assignment file to the Creating lists assignment.
  5. Post a link to your assignment 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 pages, 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 - 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. Post a link and one important point about educational use to the Copyright and fair use discussion.

  8. 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 to the resource and a brief description of the key points to the Attribution discussion.

  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 with Thimble? 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 course coding assignments? 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.

  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. Information Discovery Beyond Search - The Etsimo discovery platform demonstration is a combination of intelligent search engine and interactive visual interface. They 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.
    Test drive the Wikipedia interactive "search". The results are all based on information in Wikipedia - NOT the entire web like Google. What did you search for? What was your experience? Is the visual display helpful? What did you learn about user interaction? Post your comments to the Interactive information discovery search 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.

Icon multimedia.gif



HTML Lists Tutorial - YouTube
video - Learn HTML code: lists - ordered, un-ordered lists, list items. change numbering in ordered list with value
<p class="diigo-tags"><strong>Tags:</strong...
Learn HTML - Nested List Video Tutorial - YouTube
video - Learn How to Create Nested HTML List - no audio - just video of code being typed in and displayed.
<p class="diigo-tags"><strong>Tags:</strong>...
Customizing Bullets via CSS: Adding images to lists - YouTube
(video 1:46) explains how to customize Bullets via CSS: Adding images to lists - changing bullet to a little picture
<p class="diigo-tags"><strong>Tags:</strong...
list-style | CSS-Tricks
The list-style property is a shorthand property that sets values for three different list-related properties in one declaration: The list-style-type property defines the type of list by setting the...

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.”
AIGA | Copyright Basics 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.” A fixed form...
Copyright and Fair Use Animation - YouTube
Students are introduced to copyright, fair use, and the rights they have as creators. Use this video in your classroom in conjunction with the lesson plan, Copyrights and Wrongs: "
What Is Fair Use? - Copyright Overview by Rich Stim - Stanford Copyright and Fair Use Center
a fair use is any copying of copyrighted material done for a limited and “transformative” purpose, such as to comment upon, criticize, or parody a copyrighted work. Such uses can be done withou...

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.

2016.3 1976 . 2018.3 4114 . 2018.11 6180