5. picture this – images

Finally, we are getting into the part that really makes the web different from all other media.

  • 4. Links – connect anything and everything with just a click or touch.
  • 5. Images – little if any cost to including lots of pictures

Summary of 4. Links activities, discussions and assignments

Read the instructions

Be sure to read the information page about the activities for a full description of what is required. There is a link provided within the module. For module 4.

Some posts clearly do not respond the the actual activity description. For example for the Weebly / WordPress themes discussion, it says

Select 2 examples of themes from the themes gallery. The content is the same – text, associated pictures, links and category information. What are the noticeable differences between the page displays? What layout features are important to you and the display of your content?

Simply saying that you like Weebly better does not answer the prompt.

Look through other posts before you post. Are there answers to specific questions? Is there more detail in other responses? The discussion topic does NOT include all the information. Please read the activity descriptions.

Web Literacy

The Web Literacy links are great. These may be beyond some of the class. For those who have some experience with web development or programming, these are good references that cover a wide range of topics and interests.


All web developers need to understand the basics of the internet infrastructure. File Transfer Protocol (FTP) happens whenever you add or update a web page. Usually your authoring tool takes care of it without you having to deal with it. Before the great tools that are now available, everyone had to explicitly move their files around this way. Thank Mozilla for Thimble. Otherwise this would have been the first lesson for this course.

There are links from the module 4. Links information page to a number of resources. If you are having problems completing the Voyager activity, carefully review ALL the information provided. Most of the problems are due to missing some thing important that was described in detail in the provided information.
NOTE: Make sure the File protocol is “SFTP” otherwise you will not be able to connect to the server.

Site design, layout, functions

Think about what goes into the design and implementation of all the sites you visit for all the activities in this course. Someone had to make a lot of decisions about design, layout, functions. This is what web developers do.


Take a look at NetTutor – link in the Canvas left side navigation menu. This is an online service that DeAnza is making available to all students on a wide range of course subjects. Live tutors are available throughout the day. Appointments can be scheduled. Questions can be posted 24/7 and you will be notified when a tutor answers you. Post a note in the NetTutor discussion to say that you have looked through the site and provide any feedback based on your first look.

If you use this service and work with a tutor, please post about your experience.

Assignment code

The purpose of the coding assignments is to practice the HTML associated with each topic.

For the coding examples, you are welcome to use ideas for web sites that you are considering developing. Your examples should be simple enough to see the effect of your code. If you include too much other information or code it will be more difficult to see if you are on the right track. Comments help. If you want to explore or experiment, that is fine. Please just indicate in your code that this is what you are doing.

Remember – Thimble pages are public. It is best not to use your real personal contact information in your coding assignment examples.

Please put all the code for the assignment and the link to the associated .css file on the web page address you submit.

The grading rubric is provided to help you self-check your work. You can see how the points are being allocated. If you miss any points, the rubric will help you see what you need to fix.

Basic HTML, .css, comments

There is now a grade for general web page requirements. All pages must have correct HTML for main elements, matched tags as appropriate, comments, title in the head section, replace the Made with Thimble default title, examples of properties and attributes that will display, link to a .css file, use of external styling in a .css file, … By now you should know that these are required for any coding assignment.

Your code should be correctly formed. You can run your code through a code validation checker.  Thimble and browser developer tools will automatically highlight your coding errors. I check your code using the Firefox Web Developer Tool Page Source. If there are coding errors, they show up in red.

Coding questions

When there are questions about specific problems associated with the coding activity, please continue to post them in the Topic thread. Usually I will post a reply the same day or early the following day. Thanks to students who have been helping out by providing advice and suggestions too.

If you get stuck while you are working on a coding assignment, check through the discussion for that activity. There may be information there already that will help you complete the activity.

Still having problems? Post the question. That lets everyone know that there is something to think about. Often if one person – you, is having a problem, there are others with the same questions. The discussion is the best way to share the information so everyone learns something new from the experience of others.

General notes, feedback and observations

  • Reviews – Unless the activity description says to POST a review, you are not required to post about your review of other posts. Just check out a few that look interesting.
  • Likes – Most discussions allow you to “like” a post. You can indicate that you reviewed a post and you think others would find it useful. This is a good way to show your appreciation.
  • Messages – Still trying to work out the best ways to notify students either individually or as a class when there are updates. Email works – I am getting emails from students with specific questions. The Canvas Messages feature is provided but doesn’t seem to be as effective for getting attention. My apologies if you sent a message and didn’t get a prompt response.
  • Announcements – Please watch for Announcements. These appear at the top of the course Home page. The most recent 3 Announcements should be visible at all times.


Looks like we have lots of cooks, travelers and photographers as well as programmers in the course. Thanks for sharing your interests with the rest of us through your posts and assignments. We are looking forward to seeing more in the coming weeks.

5. Picture this… Images

Pictures can add a lot to any web site. As seen from many of the theme examples last week, pictures are much more than just decoration on a web page. Many sites are now mostly pictures with text.

There is a lot to learn about using pictures effectively. Select great images to tell your story. Use editing and resizing tools to optimize file size and resolution for quick page loading. Locate great sources of images that you can use so long as you give the owner credit. Use your phone to take great shots to use. Brighten up your web site with images. Have fun.

Thanks for your questions and comments. Thanks for helping one another with feedback and suggestions. Have a great week exploring the Images module.


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s