The revision process for addressing issues or incomplete tasks from WA1 proved no less challenging for WA2. At one point, I abandoned the whole template editing process (again) and started to build a whole new simple site from scratch in KompoZer. Then I decided to have a go at the process using DreamWeaver (CS5). Wow, what a difference that made! While I won't say the DreamWeaver experience was entirely smooth, I did find that many of the issues I had spent hours trying to resolve in KompoZer I was able to repair in just a click or two in DreamWeaver. The remaining process of updating and completing my project was an interesting opportunity to compare and contrast as I worked back and forth between the two apps. For example, the process of embedding media/video was quite a challenging one. While I was able to insert the code in the Insert html option in Kompozer, when I viewed the page in a browser, I could see only the video on the webpage. The remainder of the text and left navigation bar disappeared - even though they were still showing in the Design window in Kompozer (I DID Save the page before viewing). This process totally wrecked my third page, requiring a complete start-over (so relieved I had saved multiple versions of the project along the way). When I made the page in Dreamweaver and added the code there, everything worked as expected.
I made the following changes based on critique feedback:
1. Edited line spacing to address the compressed text in page and heading titles. (An example of something that took HOURS to address in KompoZer that I fixed in just a few clicks in DreamWeaver).
2. The template I downloaded was really intended to serve as a blog home page, so some headings were pre-formatted to appear as links. I removed those links from headings.
3. I renamed my image to remove spaces.
4. I named windows to reflect their contents.
Additional tasks leftover from WA1:
1. I added contact information on the About page with an email link.
2. I added content to the Artifacts page including embedding a video (TaL) from Vimeo.
There are still a couple of items from the competency checklist (Levels 2 and 3) which I have not addressed. But I would say that I have come FAR from where I begain with this project and have learned a tremendous amount in the process.
This activity was quite a challenge. I downloaded KompoZer to give it a try. I had used Sea Monkey/Composer (another free suite of internet apps, including an html editor 'Composer') in summer for the SLIS course, but decided to try KompoZer to compare. The download itself proved to be quite a challenge using IE8 and my Windows Vista Business OS. I was never able to get the 'most stable version' 0.7.10 - to complete the process/extract and run once I got it on to my machine. Even using Firefox did not help. After many hours of tinkering with this, I almost gave up and planned to use Sea Monkey, but I finally resorted to the 'latest development version' 0.8b3 which did work and behaved as usually expected at download. I am sure there are subtle differences between the two, but this is what finally worked for me.
I wanted to use a CSS template, as I had done simple web page creation in my last course and felt modifying a template was a step further in learning web design. I visited several of the template sources suggested by Dr. Smyth and downloaded several. I attempted to work with each of them and found them all very challenging with many elements to customize/manipulate. At one point I almost abandoned the template idea for creating simple pages, but tried one more site and downloaded a template called "WhiteClean"- which it was! There were fewer items to manipulate and the design was much better suited for the intents and purposes of my site.
I have been thinking for some time that I should go ahead and begin to develop my program portfolio. As a part-time student in the program, more time is likely to elapse between my admisison and course completion so that collecting and archiving important artifacts as I move along is important. I decided to seize this oppotunity to begin to aggregate works I have complete thus far into a coherent collection that can be modified and manipulated as I go along. This assignment seemed the perfect vehicle for accomplishing early portfolio work.
My site resides at a temporary location at this point. I have researched 4 potential web hosts: GoDaddy, BlueHost, Arvixe, and Dream Host. Two of these offer some additional functionalities that would be quite useful in my work in the future, so I will select a host and publish my site after I have settled on the best option.
Design Decisions
I found the Web Style Guide manual quite useful. (I ordered a copy for my shelf/marking up!). The 'List of Reminders' (with the hat tip to E. B. White from Elements of Style) page from the Process Chapter was a helpful companion to this process. This made referencing and applying ideas from the handbook easy and one click away.
In addition to the reminders, my design decisions up to this point included: 1. Visual Design: I selected a simple, clean, uncluttered design template with few page elements. I feel for the purposes of my program portfolio this approach is best to keep the focus on the work/learning elements. 2. Information Organization: I kept the template menu bar, but edited it to allow for 3 pages (for now) - Home, About, and Artifacts Links. I am sure this structure with morph over time as I add more information and more practice examples. In addition to creating 'About' and 'Artifacts' pages, I added links to wikis I have created in courses as well as a link to my own blog in the left navigation bar. 3. Consistency: Following instructions for the assignment set up a process to allow for consistency in repeating/copying the initial index page structure to the subsequent pages. 4. Site Navigation: As noted, I kept a built-in menu bar that came with the template, as well as the left navigation bar where additional links to other artifacts/sites could be added. However, as I am submitting my folder for this first stage of design for WA1, I find that my links from the index page to the additional pages are not functioning. So, my attempt at making logical and easy page navigation have failed at my first attempt! Lesson learned: Test all links and all page navigations before a page/site 'goes live'! 5. Page Structure: While I did preserve headings and subheadings from the template, my font style is not consistent and needs some editing/clean up for a final version. I was able to add a bulleted list and broke the content on the index page with appropriate spacing.
Competencies
Level One All accomplished except creating an email link
☐
☐
☐
☐
☐
☐
☐
☐
☐
Create a site (KompoZer)
Create a new page
Enter and format text
Insert an image
Create a hyperlink
Create an email link
Set the title
Create an ordered or unordered list
Preview a page in a browser
Level Two Modified Page Properties & created 'place holders' for embedded media
☐
☐
☐
Insert/embed media (such as swf, mov or wmv)
Insert anchors where appropriate
Modify Page Properties
Level Three Modified CSS
☐
☐
☐
Create or modify CSS
Create an image map
Upload to a domain
Web Activity Two
Revise WA1 based upon critique feedbackLink to site: Cindy Jennings Program Portfolio, Revised
Changes with Rationale
The revision process for addressing issues or incomplete tasks from WA1 proved no less challenging for WA2. At one point, I abandoned the whole template editing process (again) and started to build a whole new simple site from scratch in KompoZer. Then I decided to have a go at the process using DreamWeaver (CS5). Wow, what a difference that made! While I won't say the DreamWeaver experience was entirely smooth, I did find that many of the issues I had spent hours trying to resolve in KompoZer I was able to repair in just a click or two in DreamWeaver. The remaining process of updating and completing my project was an interesting opportunity to compare and contrast as I worked back and forth between the two apps. For example, the process of embedding media/video was quite a challenging one. While I was able to insert the code in the Insert html option in Kompozer, when I viewed the page in a browser, I could see only the video on the webpage. The remainder of the text and left navigation bar disappeared - even though they were still showing in the Design window in Kompozer (I DID Save the page before viewing). This process totally wrecked my third page, requiring a complete start-over (so relieved I had saved multiple versions of the project along the way). When I made the page in Dreamweaver and added the code there, everything worked as expected.I made the following changes based on critique feedback:
1. Edited line spacing to address the compressed text in page and heading titles. (An example of something that took HOURS to address in KompoZer that I fixed in just a few clicks in DreamWeaver).
2. The template I downloaded was really intended to serve as a blog home page, so some headings were pre-formatted to appear as links. I removed those links from headings.
3. I renamed my image to remove spaces.
4. I named windows to reflect their contents.
Additional tasks leftover from WA1:
1. I added contact information on the About page with an email link.
2. I added content to the Artifacts page including embedding a video (TaL) from Vimeo.
There are still a couple of items from the competency checklist (Levels 2 and 3) which I have not addressed. But I would say that I have come FAR from where I begain with this project and have learned a tremendous amount in the process.
Web Activity One
Create simple web site using KompoZer.Temporary Site Location: Cindy Jennings Program Portfolio
Process Summary
This activity was quite a challenge. I downloaded KompoZer to give it a try. I had used Sea Monkey/Composer (another free suite of internet apps, including an html editor 'Composer') in summer for the SLIS course, but decided to try KompoZer to compare. The download itself proved to be quite a challenge using IE8 and my Windows Vista Business OS. I was never able to get the 'most stable version' 0.7.10 - to complete the process/extract and run once I got it on to my machine. Even using Firefox did not help. After many hours of tinkering with this, I almost gave up and planned to use Sea Monkey, but I finally resorted to the 'latest development version' 0.8b3 which did work and behaved as usually expected at download. I am sure there are subtle differences between the two, but this is what finally worked for me.I wanted to use a CSS template, as I had done simple web page creation in my last course and felt modifying a template was a step further in learning web design. I visited several of the template sources suggested by Dr. Smyth and downloaded several. I attempted to work with each of them and found them all very challenging with many elements to customize/manipulate. At one point I almost abandoned the template idea for creating simple pages, but tried one more site and downloaded a template called "WhiteClean"- which it was! There were fewer items to manipulate and the design was much better suited for the intents and purposes of my site.
I have been thinking for some time that I should go ahead and begin to develop my program portfolio. As a part-time student in the program, more time is likely to elapse between my admisison and course completion so that collecting and archiving important artifacts as I move along is important. I decided to seize this oppotunity to begin to aggregate works I have complete thus far into a coherent collection that can be modified and manipulated as I go along. This assignment seemed the perfect vehicle for accomplishing early portfolio work.
My site resides at a temporary location at this point. I have researched 4 potential web hosts: GoDaddy, BlueHost, Arvixe, and Dream Host. Two of these offer some additional functionalities that would be quite useful in my work in the future, so I will select a host and publish my site after I have settled on the best option.
Design Decisions
I found the Web Style Guide manual quite useful. (I ordered a copy for my shelf/marking up!).The 'List of Reminders' (with the hat tip to E. B. White from Elements of Style) page from the Process Chapter was a helpful companion to this process. This made referencing and applying ideas from the handbook easy and one click away.
In addition to the reminders, my design decisions up to this point included:
1. Visual Design: I selected a simple, clean, uncluttered design template with few page elements. I feel for the purposes of my program portfolio this approach is best to keep the focus on the work/learning elements.
2. Information Organization: I kept the template menu bar, but edited it to allow for 3 pages (for now) - Home, About, and Artifacts Links. I am sure this structure with morph over time as I add more information and more practice examples. In addition to creating 'About' and 'Artifacts' pages, I added links to wikis I have created in courses as well as a link to my own blog in the left navigation bar.
3. Consistency: Following instructions for the assignment set up a process to allow for consistency in repeating/copying the initial index page structure to the subsequent pages.
4. Site Navigation: As noted, I kept a built-in menu bar that came with the template, as well as the left navigation bar where additional links to other artifacts/sites could be added. However, as I am submitting my folder for this first stage of design for WA1, I find that my links from the index page to the additional pages are not functioning. So, my attempt at making logical and easy page navigation have failed at my first attempt! Lesson learned: Test all links and all page navigations before a page/site 'goes live'!
5. Page Structure: While I did preserve headings and subheadings from the template, my font style is not consistent and needs some editing/clean up for a final version. I was able to add a bulleted list and broke the content on the index page with appropriate spacing.
Competencies
All accomplished except creating an email link
☐
☐
☐
☐
☐
☐
☐
☐
Create a new page
Enter and format text
Insert an image
Create a hyperlink
Create an email link
Set the title
Create an ordered or unordered list
Preview a page in a browser
Modified Page Properties & created 'place holders' for embedded media
☐
☐
Insert anchors where appropriate
Modify Page Properties
Modified CSS
☐
☐
Create an image map
Upload to a domain