User:Vtaylor/CIS89A Learning Web Design/4. summary

From WikiEducator
Jump to: navigation, search

2019.10

4. Summary - Images and Media

A picture is worth a thousand words - It is easy and inexpensive to add pictures to web pages. This has been one of the most important changes that web publishing has made. Printing pictures on paper, especially in color remains very expensive. The additional data to include high resolution images to a web page is relatively little. So use images to tell your story and add interest to your web page.

Motion, Sound & Magic - One of the great benefits of the web and the internet has been the virtually unlimited availability of content, specifically images, audio and video.

Lots of great images. Thanks for sharing.

  • Late work - Everyone has had an opportunity to get setup and become familiar with the course structure. From now on, although late work can be submitted for credit, points may be deducted. For example, shared discussion posts are less valuable to the course if they are submitted late. If you get really far behind and try to make up work in a hurry, you won't learn much.
  • Your learning - This is a college credit course. The course covers a broad range of applicable topics and you are expected to demonstrate your understanding of these. Some will be more interesting to you than others. You are responsible for using the course to achieve your own learning needs. I'm here to help. If you have questions about the Assignment activities, please ask.
  • Supplemental videos - If you learn best from videos, rather than from text resources, supplemental videos are available. Videos are usually provided in the module Media section. Otherwise, search with the topic keyword and video for other resources.
  • Group discussions - These are ongoing and with continue throughout the course. There will be new topics for discussion coming up. You will receive additional points towards the maximum total of 5/5 by the end of the course. Canvas is rather confusing. Find your group - Click on Discussions in the left navigation menu on the main course page. Your group discussion link is in the top section of the list of discussions.
  • Download your Glitch project code - Yes, you can download your Glitch project to your computer. On the Glitch project screen, lower left, select Tools > select Git, import and Export > select Download Project > save dialog - save yourprojectfile.tgz to your computer. When you select this file from your computer, it should automatically unpack into a folder with all the project files.


Coding projects

This was a large and complex coding assignment. Images and Media have been separate modules in previous courses. These two topics have been combined to make room for all the new information about responsive design and expanding beyond basic html with lots more css functionality. The course has been changed from 3 units to 4.5 units so there is more work associated with each module.

  • Basic html sturcture - There are still many coding projects being submitted with basic errors. There is only one head and body element within html element. The title tag goes in the head element. Include comments in your html and css code. Use the style.css file for styling, as this is an important part of the course. Glitch provides these. Don't delete them. Find out what they mean and use them appropriately.
  • CSS stylesheet file - Why not just include style information in each html file directly? Assume you are a professional developer maintaining a site with 30+ pages. Now you have to change the background, company logo, fonts, spacing and color scheme. You can change this all once in the .css file or you can update every page individually without messing up anything. And the boss wants it yesterday.
  • Images as links - You can make an image "hot" so it is a link. The link can be anywhere - the original full size image if your image is a thumbnail, an explanation of the image or something completely different. It is best if there is some relationship between the image and the link.
  • Coding requirements - The coding assignments are flexible. Some students will struggle to include the basics. Others can stretch to demonstrate depth.
  • Code checkers - Although the code checker says there are errors in your code, your project may look ok in the browser. Browsers are really good at figuring out what you probably intended even though the code is wrong. Fix the code. Some browsers, especially on mobile devices can deal with the errors. The code checkers may not be perfect. They catch most errors most of the time and that is a big help even for experienced developers.


Next... 5. Table, Forms

  • Rows and columns - Tables - Tables can be used to display numerical information - like a spread sheet. But tables can also be used to make web page content look great by providing a neat way to place content on the page.
  • Data collection - Forms - Collecting information can be as simple as requesting comments from readers, or as complex as a final exam for an upper division college course. Forms provide a broad range of functionality to validate and format input information. Forms can guide the user through complex information gathering processes and make the information ready for further processing by other applications.

These are frequently used features that allow the web to provide data display and collection. These functions make the web much more interactive and useful for so many online activities. These are great to know and interesting to practice.

Have a good week working through these activities.

..vt

Retrieved from "https://wikieducator.org/index.php?title=User:Vtaylor/CIS89A_Learning_Web_Design/4._summary&oldid=1071879"