User:Vtaylor/CIS89A Learning Web Design/CSS Formatting



CSS Formatting
 * Fonts are important design elements and need to be included via the CSS embed function. Pages can be designed to be printed as documents. Although they may not be used often, there are several more CSS display tricks worth knowing.

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

Keywords
 * embed, transition, transformation, animation, filter

Reading guide
 * Where do fonts come from?
 * How are fonts included in the page information
 * Why would anyone want to print a web page?
 * What are some of the additional display options available with CSS?

== Assignments== Coding project title and required elements
 * cis89morecss1 * page layout * text formatting * include additional font families * use ID selector * demonstrate transitions, transformations, animations and filters * error free coding, css for styling, comments in html and css code


 * 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 11-13 and 18 - 11. Introducing Cascading Style Sheets, 12. Formatting Text, 13. Colors and Backgrounds, 18. Transitions, Transformations, and Animation


 * 1)  CSS Formatting - There are so many different effects available with CSS, select some to explore and use as you wish. This is an opportunity for you to apply CSS Formatting and your own creativity. Provide a demonstration of several of the Font and Text Properties and Color and Background Properties.  In a new coding project, demonstrate requirements using all the appropriate elements and property tags within your project. It is helpful to include information about the requirement being demonstrated in the page display as well as in the comments.
 * 2) Submit the web address of your coding project to the CSS Formatting assignment.
 * 3) Post a link to your coding project and any comments or questions about the assignment to the CSS Formatting discussion.

Review the selections of 2 others.
 * 1) Educational videos - There are thousands of great educational videos on the web. TED Education, Two Minute Papers and TeacherTube series are the best known sources but there are many others. Find an example of a educational video. In the Educational videos discussion, post a link to the video you selected and a brief description. Be sure to include the length of the video in minutes:seconds.


 * 1) HTML5 support - HTML5 test - Check your browser for HTML5 support. This assignment will be hopelessly frustrating if the browser you are using does not support the HTML5 elements that you are trying to use. Check that your browser actually supports audio, video and the types of media that you select to include in your assignment page. If your browser doesn't support these elements and media types, download a browser that does - either a newer version, or a different one. As a web developer you need to be aware of these differences and plan your site content accordingly.


 * 1) HTML5 - The HTML standard has been evolving to meet the demands of viewers and web developers to make use of new technologies as they become available. HTML5 is the most recent update. There are a number of new features and several modifications that are applicable to multimedia on the web. Review one or more HTML5 Introductions and tutorials. Check out movies and games that are created entirely in HTML5. What are some of the big changes? Why are these important to you as a web developer? Post a brief comment to the HTML5 updates discussion.


 * 1) Success Skills - Use it  - how technologies are woven into daily living. Review 2-3 of the articles from Success skills USE list in the Media section below. Pick one article you would recommend from the selection list. 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 - Use it discussion. Review 2 others.


 * 1) H5P Project - HTML5 has enabled new ways to create content for the web. H5P authoring tools developed by MIT and developers from around the world, make extensive use of HTML5 for  creating interactive elements. Read About H5P project. Explore several of the H5P examples. Select one of the H5P interactive teaching game or quiz. Some suggestions - counting, adding numbers up to 10, easy reading storybook, ... How is HTML5 functionality being used? Is it effective? Post a link to your selection and HTML5 observations  to Test drive H5P discussion. Review the work of 3 others.


 * 1) HTML Coding validation - there are a number of tools available free online that will check your HTML code and highlight errors. Find one and have it check your code for the assignment. How did you do? Did it find errors that you missed? Did you understand what was wrong? Were you able to fix the problem? Did you re-check your code to see that you fixed the problem? Post a link to the HTML checker you used and a brief descriptions of your experience using it in the HTML Code Checker discussion. Review the post of 2 others.


 * 1) Group Project groups discussions - Web Design - For the activities in this Module, you accessed a number of web sites. In addition to learning from the content, practice evaluating web design on the sites you visit. In each module, we focus on another area of web design and development. What are you looking for in good web design based on the topics we covered in the course so far? What is something important and interesting that you learned about web design? Do you have questions about good web design? How would you apply these design ideas to your own work? Provide a link to the example and brief description of the the design feature. Share with your group in the Group discussion. Are there outstanding questions? Contribute one or more posts to the discussion for the group. If you have a question about working as a group, please ask.


 * 1) Weeks 1-6 Midterm Review - This is about the middle of the course. We have covered a lot in a relatively short time. Now stop for a few minutes and think about the CIS89A Web Development course so far. In the first 6 weeks of the course, what was one pleasant surprise? What is one question that didn't get answered?  What is something that you can do that will improve your course participation? Submit your comments and questions as the Weeks 1-6 Midterm Review assignment.

== ==

Note: p.301-302 Font and Text Properties and p.354 Color and Background Properties.
 * Textbook - Learning Web Design - Chapters 11-13 and 18 - 11. Introducing Cascading Style Sheets, 12. Formatting Text, 13. Colors and Backgrounds, 18. Transitions, Transformations, and Animation
 * HTML Dog HTML Beginner Tutorial
 * CSS Text with examples and "Try it yourself" activities.

CSS

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

FORMATTING

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

TEXT

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

Coding, programming


 * Hour of Code - Write your first computer program Code.org - Learn the basic concepts of Computer Science with drag and drop programming. This is a game-like, self-directed tutorial starring video lectures. Learn repeat-loops, conditionals, and basic algorithms.


 * CodeAcademy - write code and see the results right away.


 * Eloquent JavaScript A Modern Introduction to Programming - an introduction to the JavaScript programming language and programming in general. Originally written and published in digital form, includes interactive examples and a mechanism for playing with all the example code. This version is released under an open license.


 * The 2015 Top Ten Programming Languages - The big five—Java, C, C++, Python, and C#—remain on top. The big mover is R, a statistical computing language that’s handy for analyzing and visualizing big data.

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

USE

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