User:Vtaylor/CIS89A Learning Web Design/CSS Layout



CSS Layout
 * another major addition to web design that is included with CSS is extensive control over display layout. More complex layouts, dynamic page display and graphics presentation are supported.

Learning outcomes
 * include specific layouts within the page
 * format web pages for printing
 * explore additional CSS presentation features

Keywords
 * floating, positioning, flexbox, grid, padding, margin, border

Reading guide
 * What are some of the additional display options available with CSS?
 * How can CSS be used to make page elements more visually interesting?

== Assignments== Coding project title and required elements
 * cis89csslayout1 * include floating, positioning, flexbox, grid, padding, margin, border, stacking


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


 * 1) Textbook - Learning Web Design - Chapters 14-16 - 14. Thinking Inside the Box, 15. Floating and Positioning, 16. CSS Layout with Flexbox and Grid


 * 1)  CSS Layout - In a new coding project, demonstrate requirements using all the appropriate elements and tags within your project. Publish your HTML file.
 * 2) Submit the web address of your coding project to the CSS Layout assignment.
 * 3) Post a link to your coding project and any comments or questions about the assignment to the CSS Layout discussion.


 * 1) Galleries - Sometimes it is appropriate to display lots of images as a single web page. These are often called galleries. Find an example of a gallery. How are the images arranged? What steps has the developer taken to make the experience pleasant for the viewer? What would you do differently if you were building this gallery page? Post a link to the gallery site you selected along with your comments on the design, viewer experiences and suggested improvements to Image gallery discussion.

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.
 * 1) 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.


 * 1) Tech's Moral Void (audio podcast) - Lawyers and doctors have a code of ethics. Teachers have them. Even journalists have them. So why not the tech sector, the people who create and design our very modes of communication? Coders and designers make products that allow to us communicate with each other, across cities and nations and borders. As these giants grow at breakneck speed, and the chaos of their unfettered impact becomes more obvious, the call is coming for a reckoning. Contributor Tina Pittaway explores whether the time has come for tech to reckon with its moral void. Listen to the podcast. What are two key points that stand out to you? How does this impact you as a global citizen and internet user? Hoe does it impact you as a web developer? Is this new information to you? Post your reply to the Tech ethics podcast discussion. Review the post of 3 others. Post at least one question to another post that will help your understanding of the issues.

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.
 * 1) 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.


 * 1) 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.


 * 1) 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.


 * 1) Group Project groups -  Portfolios are the new resume. Who would you want to see your portfolio and why?  What should be included? If you were a hiring manager, what would you want included? In your group discuss ideas for what to include and why this would be important. Use the Group Project groups discussions (pinned at the top of the Discussion page)  to share your comments and suggestions. Note: This discussion is ongoing through out the course. You will have a partial score based on your participation to date.

== ==


 * Textbook - Learning Web Design - Chapters 14-16 - 14. Thinking Inside the Box, 15. Floating and Positioning, 16. CSS Layout with Flexbox and Grid

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

http://www.diigo.com/rss/user/vtaylor/copyright

WEB PAGE LAYOUT


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

http://www.diigo.com/rss/user/vtaylor/layout