Intermediate Scripting Language Class

Additional design elements

2008-07-11T17:40:00.000-07:00

Today I added some additional design elements to the home and services pages. A before and after image of the home page is displayed above. By now this technique of creating the folder style graphics in css has been used on through out the web using a variety of techniques.

The technique I used in creating the header elements involved creating the rounded sections in Photoshop and positioning them before and after the header tag. Then using a style in the header tag I added the background color used in the rounded corners and added the additional margin style to the header tag to shrink the background area to the edge of the right corner graphic.

Below is a sample of my code used creating the header tabs on the home page.

<h2 style="color:#0066FF; margin-left:15px; margin-right:118px; background-color:#333333;"><img src="images/left_tab.gif" width="10" height="18" alt="left tab" /> System Protection <img src="images/right_tab.gif" width="10" height="18" alt="right tab" /></h2>

For the rounded gradient section below the header tab, I just created the graphic in Photoshop and positioned it in css as a background image. The folder images created on the services page were a little more difficult. The required a table to line the multiple images up on top of each other. The technique is very similar to the above example. Here is a sample of the code I used on the services page.

<table width="325" height="182" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
<h2 style="color:#0066FF; margin:10px 203px -7px 15px; padding-bottom:5px; background-color:#333333;"><img src="images/left_tab.gif" width="10" height="18" alt="left tab"><a href="services_hst.php"> Hosting </a><img src="images/right_tab.gif" width="10" height="18" alt="right tab" /></h2>
</td>
</tr>
<tr>
<td style="background-image:url(images/service_main_square2.jpg); background-position:left; background-repeat:no-repeat;">
<p style="margin-top:5px;">Whether you're just starting and looking for a simple web hosting or you're an advanced website developer looking to integrate e-commerce and databases into your site, you'll find that we have the services, tools and staff to help you every step of the way. <br /><br /></p>
</td>
</tr>
</table>

This website can be found at http://www.pryzemedia.com/goode

Flash screen added

2008-07-09T10:06:00.000-07:00

Today I updated the home page of the Goode Technical Solutions website (http://www.pryzemedia.com/goode) to include an animated flash title screen. Below is a screen shot of part of the title screen's intro.

I am also thinking about doing a small redesign to help make additional enhancements to the site. Some of the changes may include additional flash title screens on the main categories, some additional style changes on many of the text and headers, and a background image or color change up in the white emptiness surrounding the site.

More posts will come as I continue to update my websites.

Site Update

2008-06-23T10:47:00.000-07:00

I have recently updated this site to fix previously incompatibly issues between Mozilla and IE as well as converted the website into PHP. The website can be found on my website at http://www.pryzemedia.com in the Digital section. The direct link to the site is http://www.pryzemedia.com/goode .

When I get some extra time, I will post some additional information about this site including some of the processes and changes I made when converting the site to PHP.

week 11

2006-03-22T08:19:00.000-08:00

My site for this class is complete and on-line at.
http://www.pryzemedia.com/goode

I will probably add to it over the break and depending on how the 3rd scripting language class is structured, I plan on picking it back up and adding additional functionality to it. One thing that I could add to it would be to make the search engine actually work through using a database with mysql and php. Maybe even add more depth to the computer section by creating a mock shopping cart. Another thing that I would have to add before making it a portfolio piece is to replace the graphics with my own. So maybe later on, I could actually use this for portfolio, but for now it is my final project for this class.

Week 9 Progress

2006-03-08T05:35:00.001-08:00

Well so far I have 11 of the 15 pages completed for this class and I feel like I have a real handle on CSS now. One thing that I've found to help along the way was to create a prototype of each page in Illustrator and use it as a template to measure where every element will go. The prototypes may take longer in the beginning by having to figure out all the text and where every element goes, but in the final stages I think helps move things along. I just have 4 pages left to complete for next week and I will be finished with my final website for the class.

This Weeks Progress

2006-02-28T20:53:00.000-08:00

Well I have completed my next 4 pages and I am getting pretty comfortable using CSS. The only problem that I have is that what looks perfect in Firefox looks screwed up in IE and vise versa. I have a feeling that I will have to design this site in both a Firefox and IE version before I go into the portfolio classes. Even though IE is out-dated, there is still a vast majority of people who use it. Oh well, I know in Javascript that there is a method that can check the browser that the user is using and from there I could use a simple if statement to determine which version of my site to display.

Creating Rounded Tabs In Css

2006-02-21T03:56:00.000-08:00

After spending hours of searching and testing I have found the best and easiest way to create the rounded tabs using Css.

The site www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml was the best resource for me on creating tabs the rounded tabs. The site uses small corners 10px X 10px to use as the rounded upper part of the tabs. They also make good use of both the div and the span tags to attach the rounded 10px X 10px tabs into the background of the menu.

I strongly recommend this site as a resource for anyone trying to create tabs. One of the many sites that I came across for creating rounded tabs in Css only, didn't allow the tabs to change color when rolled over and was a lot more complicated in trying to understand what they did.

Update on Website

2006-02-14T20:10:00.000-08:00

After creating the first page using CSS, I have come across a cross-browser incompadiability issue. For some reason the code shows up perfectly in IE, but when I open it in Firefox, or Safari, the menu tabs don't display correctly. I keep changing different elements and through changing the position from realitive to absolute, but nothing seems to fix it in the Firefox or Safari browsers.

A minor issue that I ran into after creating the site, is that I did my flow chart after scripting the first two pages for class. But it not that big of an issue, and can be corrected in about 5 mins. The above issue is the one that is giving me the headace though.

My Design Process

2006-02-07T06:07:00.000-08:00

Before I started writing down anything on paper, I first did a little research. By looking through a lot of technical service sites, I got a good feeling about what has been and what should not be done. Most of the technical sites hurt my eyes, because of their poor layout or lack of design. When it came to the design of this site, it was apparent to me that I would have to use concepts that are apparent in well-designed sites to breath new light into this technical field of web sites.

After finding several reference sites, I began to sketch elements that I liked from each of them and started to put them together to see if I like how they flowed together. Then by remembering what I've learned from previous classes on designing for the user, I tried to come up with a simple navigation system that would be easily used by the user. I think that my last 2 comps do the best job of that by utilizing a tab format to contain a lot of information into a well-organized format.

The overall theme I tried to portray into my design was the feel of technology, by making mechanical and circuit board type looking borders. I tried to keep it simple sticking with solid color vectors that could be saved as small file sized gifs. I then borrowed some pictures from Dell and used Photoshop to make them look like they came from Goode Technical Services Company.

My Final Web Project concept is...

2006-01-31T17:25:00.000-08:00

For the final project in this class, I’m thinking of redesigning the site of an old acquaintance of mine. His name is Corey Goode and he is what someone might call a freelance technician. He has a company called Goode Technical Services in which he does business around the Dallas Fort Worth are in network solutions, computer repair, and other types of technical services.
By looking at his current site at www.goodetech.com, one can definitely tell that his site needs a full reconstruction. The current site looks like something done in a program like Front Page or Microsoft Word. For the look of the new site that I’m planning on building in here, I think that using a simple and elegant approach might be the way to go.
One of the first things that this new site will need to have is a whole lot more content. By using other better-designed sites within the same field, I feel that I will be able to generate enough content for this subject. I already have a few custom graphics for the different pages. By taking some pictures of different types of objects related to his services, I think I could make the site a bit livelier.
Overall, I think that this site could definitely have some potential for CSS in helping to create a great looking and designed website.

Week 2 Site Reviews

2006-01-25T08:54:00.000-08:00

Still in the process of deciding what to create a web site on so I have decided to go a couple of routes to determine which avenue I wish to go.

The first site is a technical site own by a person that I used to work with. He has a company called GoodeTech.com and the URL is www.goodetech.com
This site is one that needs a major overhaul. For starters, it needs to be created using CSS and not MSWord or some other Microsoft product. Some of the major changes that I would implement, would be to add some more visual appealing content as well as adding about 10 more pages of content. Some aspects of this site that I could apply to my own design knowledge would be the graphics, animation, and web development that he points out in his site about being able to do. As far as specific features that I would use in my site would be to actually create a page for each of the area listed under his services and actually go into better description as far as what each of the area do.

This second site http://www.mentor.com/ is a good example of what the first site goodetech.com could become. This site is a site that offers similar services as goodetech, but is much more professional looking. The site has good organization of their links and it doesn’t have the look that other technical service sites do. One aspect of this site that I could see using in my own site is some of their organizational techniques for displaying all of their services.

This third site http://www.experts-exchange.com/ is better example of what of how technical site can be visually appealing. Like the first two sites mentioned, this site provides technical solutions and support to individuals or small businesses.

3 topics that I would like to see addressed in the course.

2006-01-17T21:02:00.000-08:00

When it comes to topics stated in the course syllabus that I would like to see addressed, the first that comes to mind is using CSS with XHTML to attain more precise control over layout, placement, and typography in browsers. I remember taking HTML four years ago and having to be stuck with tables or frame, this is going to be so much better. Redesigning in hours instead of days or weeks is also another very appealing aspect of using the technologies outlined in the syllabus. Time is definitely something every designer could always use more of. The top third topic that I would like to see addressed in this course is being able to ensure that sites designed with these techniques will continue to work in tomorrow’s browsers.

My Personal Design Process

2006-01-11T09:19:00.000-08:00

The process in which I use in creating something along the lines of a website or any interactive piece for that matter consists of several different stages. The first stage is where I brain storm about the subject that the piece is going to be over through the use of bodystorming. After gathering many of the different ideas, I begin to group the ideas together into categories and sub categories using similar sites as a reference to get a good idea of what works and doesn’t work good together. This is the stage where I emerge myself in all the research I can on the topic to try to take in as much information to get a better feel for the topic in which I am designing for. The next stage is where I start creating thumbnails as to what the layout and overall look of the site will look like. After about 12 or so, I begin to envision which layout and design would fit best with the content. When a layout is chosen, I then begin to create the site on a sketchbook and start drawing and writing down the code as to how it will function. Once I am satisfied with the paper model, I then take it to the computer. From this stage on, I have a pretty good idea of the types of images and typefaces that would look good together and I use the computer to test out the pen and paper idea. After this stage, it basically me testing out different elements and either deciding to go with it or to go back a couple of steps until I find something that I like.