update

FSI prototype turned over to client programmer for setting up dynamic content, final adjustments will be made by me once all content is up.

Working on new project for small publishing company SolCor solutions: completed market research and client preferences/goals, two sketches provided:

http://www.rit.edu/~txswml/solcorsketch1.htm
http://www.rit.edu/~txswml/solcorsketch2.htm

the site is will be built through macbuilder.com which will allow client to easily upload content and format things in a word processing style editor.

http://www.rit.edu/~txswml/rit737/finalproj/services.htm
-- replaced the company news with a scrolling ticker, added a scroll bar just in case the content is missed ( but would be nice to do something on mouseover or with flash so there is no ugly scroll bar). If the scroll bar is used the "slide"-divs get a bit messed up but the goal of the original scroller is to bring attention to this item. Also the scroller will pause on mouseover.

Tooltip

http://www.rit.edu/~txswml/rit737/finalproj/phoenix.htm
- Started to make a login form integrated into the page, but realized that it will need to be place in gibson to work. Going to do an include.
- Made a tooltip(s) that follow the pointer over an image map with javascript, some more graphical styling needed to get the look right. The various tooltips are variables in the script that sit inside divs that are styled with CSS.

It's a matter of Script

http://www.rit.edu/~txswml/rit737/finalproj/index.htm---Image rollover and dropdown menu. For rollovers the emphasis was on the photoshop while the dropdown menu was essentially styling combination of unordered lists within definition lists and use of javascript functions. The most painful part was trying to figure out how to make the dropdown stay in place and not effect elements around. Absolute positioning, taking the layer out of context of the document, was the solution. The only other thing to do is to code for when mouse event ends as the rollovers remain stationary.

http://people.rit.edu/~txswml/phpfun/
--- this form consists essentially of three scripts. The first to send information to the email address. The second to check whether required fields have been filled in and displaying appropriate messages on if the item has been sent/ or not. And the last was to make the form "sticky"-- if there is item of information missing the form will not reset and keep users' content and allow to fill in areas missing. The code has been implemented from PHP Solutions

CSS Poem

CSS Poem.There is nothing fundamentally different about the CSS approach on this page and on the main page. An area I worked to improve is an issue that I discussed in an earlier post regarding use of background pictures as headings in the CSS zengarden website. The word Up in the first line of the poem is a picture. I placed it in the html instead of the CSS so that when images are turned off one can still read the poem. I used floats to move the text around, and fine tunned it with margins. I tried to avoid using too much relative positioning because on an earlier project I noticed that when faux columns are used Firefox will take out the space cleared by the relatively positioned element while Internet Explorer will keep that space intact( which is actually a more correct way of rendering this part of CSS). On the graphics side I think it is generally (when there is more html content involved)a good idea to use more tiling for images rather taking a whole sliced image. The two areas where tiling was not used but could be is the green gradation and the cream background. The way to do this would be to set the green gradient as the background for the wrapper and and make images in left and right columns short; for the cream background of poem the slicing would need to be set up so that any transparency is part of the other divs and choose a solid color background for the center div.

Css Zen garden critique

CSS Zen Garden is one of my favorite sites. I look at it both for inspiration and solutions as well as a way to see how the graphical style of the web is changing. It is pretty amazing to see how flash has really influenced the css style: both in a good way in terms of beautiful graphics and scenic layouts and not so good: such as use of tiny fonts both for links and for text!. The biggest issue with all the websites on Zen Garden is the use of background graphics for heading text(which undoubted in integral to each design). When images are disabled you loose the headings, and therefore destroy some of the semantics of the page. If only there was an alt tag for css :( .

Retro Theater is in my opinion one of the least effective in terms of readability and usability. It would have benefited from having a custom scroll bar near the screen(in addition to the browser scroll) and to not follow the theater credits look so closely with the treatment of typography. The short double spaced column on the right and the all capital column on the left inside the screen are serious impediments to readability. The links in the very end would have benefited to be kept separate from the general text. People do not expect to be able to click on credits as links, and taking out the underline until mouseover makes it that much more confusing.

Icicle Outback is an example of effective design. The graphics are very tasteful and not distracting. They are used in addition to positioning to separate the different elements of the page: for example the links and the text are on different islands connected by a bridge (cool!)The choice of justified main text and centered links( which usually look really bad on most sites)works well with the ragged edge graphics in the background.

Index redesigned

Browser handling of certain css elements such as relative positioning and padding and float was an issue. An example is the ul and li tags as used for the top navigation menu. For some reason setting top margins in ul cause some serious problems: creation of space between the Heading div and the Nav div while setting li's to have margins at the top was not a problem. Also it seams like a good idea to control the div's spacing: in case of side by side with width and as minimal margin as possible, because I found that IE does not handle large margins accurately. On the graphic design side: photoshop shadows have to be dealt with care and precision: had to go back into the background image of the footer to correct for lighter colors at the edges and it still is not perfect.