User:Vtaylor/CIS89A Learning Web Design/CSS Styling



CSS Styling
 * 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
 * transition, transformation, animation, filter
 * readability, text style, .PDF, paragraph, line break, quotation block, box, alignment, page layout, column, fluid, layer

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 required elements
 * text formatting, include additional font families
 * use css .class selector, ID, div
 * demonstrate transitions, transformations, animations
 * 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. Review the Media section (below - scroll down) for links to resources for this module. For additional online resources, search for the keywords.


 * 1) Textbook - Read HTML and CSS Visual Quickstart Guide,  Ninth Edition. Casabona.
 * Chapter 13 Styling Text . Chapter 14 Color in CSS . Chapter 18 CSS Transformations and Animations


 * 1) Design Thinking - Designing entails identifying and clarifying problems, making thoughtful responses and then creating and testing your solution. Designing is an activity which involves the use of a wide range of experiences, knowledge and skills to find the best solution to a problem within certain constraints. Review several resources that describe design thinking and the design process. How does this relate to the web development process? Post a link and brief summary of the inclusion of the design process in web development to the Design Process discussion. Review 2 others and comment.


 * 1) Web application (app) vs display - The primary purpose of some web sites is just providing and displaying information. The information may be static - historical records or the information may be updated frequently like weather forecasts. Other sites are primarily web-based applications. What is displayed depends on interaction with the user - social media, e-commerce, code validation. Find an example of each - an information display and a web application. Look at the source code for each. Are there noticeable differences? Post a brief comparison of the major differences between these along with the link to each to the Web Application vs Display discussion.


 * 1) Web Design - There are plenty of guides for designing great web sites. Some advice will apply only to specific content. Others are universal (UI/UX). Review the article 10 Principles of Good Web Design. How will these improve your web site designs? Pick 2 important components and post a brief summary of each to the Universal Web Design discussion. Review and comment on the post of 2 others.


 * 1)  CSS Styling - 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 Styling 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. ** For this coding project - Make your styling really visible. Make it standout so it is clear what you have added. Some browsers and user preferences may not display your styling. ** 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 Styling assignment.
 * 3) Post a link to your coding project and any comments or questions about the assignment to the CSS Styling discussion.


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

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

In the Programming discussion, write a brief description (2-3 sentences) of your programming experience. Which tutorial did you do? Do you have any prior programming experience? Would you recommend this activity to others?
 * 1) Programming - the functionality of a web site can be extended by adding some programming, usually in Javascript.
 * If you are new to programming, write your first computer program.  Hour of Code - Learn the basic concepts of Computer Science with drag and drop programming. This is a game-like, self-directed tutorial. Learn repeat-loops, conditionals, and basic algorithms.
 * If you have some programming experience, learn the basics of JavaScript programming while creating fun drawings with your code. An introduction to JavaScript by Khan Academy - Video, step-by-step tutorials.


 * 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) Code 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 project. How did you do? Did it find errors that you missed? Do you understand what is 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 - Text - What is something important and interesting that you learned about using text in your web design? When designing a page or a site with a lot of text, what should be considered? Do you have questions about good web design? How would you apply these design ideas to your own work? Do you read long text articles online? Why / why not? 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.

== ==

Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
 * Chapter 13 Styling Text . Chapter 14 Color in CSS . Chapter 18 CSS Transformations and Animations

Examples http://www.diigo.com/rss/user/vtaylor/x5styling

STYLING http://www.diigo.com/rss/user/vtaylor/styling

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

Design Thinking http://www.diigo.com/rss/user/vtaylor/designthinking

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.

Top Ten Programming Languages
 * for web development – JavaScript, Python, Java, PHP, Ruby, C#

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

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