Friday, March 31, 2006

CSS: Banging out more pages

Yesterday I made some night progress by finishing up all the product pages. I could only assume that they are finished because no email with corrections came my way.

Today I worked on the main pages. The “Buyers Guide” was one of the troublesome pages but I managed to get most of it cleaned up. I might take a poke at it over the weekend. I know what is wrong, it’s just going to take some time poking through the code and moving some tags around.

I also worked on the blog today. It was pointed out to me that the positioning was a little off from the rest of the site. I was able to fix this by pulling the output of the PHP and making a static page. This static page was saved to where the PHP files are located and the CSS controlling file was operated on . . . It really didn’t take much.

Last night I was riding home on the train, I noticed a book in a persons hand said CSS on the binding. I quickly jumped on the opportunity to brain poke. Like most of us techie people, we like to talk tech so he was happy to pull his nose out of the book. He recommended a book and a site to check out. I have the book written down at home but the site is http://www.csszengarden.com/. Although I browsed upon it before, I realized only today what a great site it is.

65۫ F out today. Hello spring!

Thursday, March 30, 2006

CSS: Product Pages

With the status bar of download progress, it counts down from 2 minutes. All the product pages are in CSS form with the headers and Meta tags put in place. I was able to complete this part of the site because I had a template to work from. After the content was placed in the template, I was able to tweak each page to accommodate the slight differences.

I am awaiting feedback on the pages for any changes needed. I know I could miss a few little things especially when coding for an entire day, then trying to view the page from an aesthetic point of view. Criticism is always welcome and appreciated.

Wednesday, March 29, 2006

CSS: ~Bug Squashing~

The little things, that’s what’s important. Today I worked on fixing some of the CSS issues of the pages. At the end of the day I was shown the spacing on the upper portions of the pages were a little off center. I’m in the process of squashing those bugs.

Tuesday, March 28, 2006

Product Page Templates

Yesterday almost all the files to the site was is CSS form. I did 50% of this by using multiple templates I contracted. By tailoring each file a little I could achieve a similar look to the original site. The problem is, I could not get a close enough replication of the site using just the method of cut and paste into the template.

Today I spent the majority of the day trying to edit the common CSS file to create a better representation of the original site.

The product page template is finished so all you eager beavers who want to get to product pages live follow the directions bellow:

Go to the FTP and download the following 3 files from the "For Editing" Directory.
1. Product_Template.html
2. Product_Template.css
3. MainCSS.css
Open the HTML file in Dream Weaver version 8
before going any further, click “file” and “save as”
save the file as a different name.
Edit the place holders “Left” “Right” “Content” and “Sidebar” to the content of the page.
NOTE: The page looks different in Dream Weaver then it does in the browser. Even in the browser it will most likely not look perfect. The CSS has to be tailored to make the page look the way it’s supposed to.

Place the new files you have created in the “For Editing” folder on the server.

I will make the finishing CSS touches ASAP

Monday, March 27, 2006

Table Removal: The beginning of the end


Well, I’m almost done with this site. Out of the 30 or so pages, I have only 4 left to remove the tables from, and then I have to update all the META tags and update the google ads for the product pages.

Tomorrow this project will come to its glorious end.

Friday, March 24, 2006

Table Removal:

Well all the core pages are pretty much finished. All but two are completely done and the others just have small bugs. The main page and Reviews & Ratings page have the small problems.


Although all the product pages are not finished, the template for the products are created . . . Which makes me think of something . . . PHP!!! But regrettably I will not be using PHP to suck the content out of the present pages being they don't take on a particular form . . .Althoughh for future implementations I will consider this.

Thursday, March 23, 2006

Table Removal: Templates and Tinkering


The template I created yesterday worked like a charm. The content of the main section and side bar are simple plug-in’s.



The reason I’m only in 3rd gear still is the content above the sidebar and main portion but below the navigation bar changes from page to page. I have to custom fit each and every page to its own layout. This is taking, I believe too much time. I have to think of templates that satisfy most of the pages upper content.



I have created one that has 3 sections and will be used for the product pages. There is one main section on top for ads, and a left and right box directly below for content.

I will spend part of tomorrow morning creating new upper content templates. I have about 25 to 30 pages left for table removal.

Wednesday, March 22, 2006

Table Removal: The saga continues


I didn’t like the way the project was sailing along. It seemed as if every page I was building from the bottom up all over again. I didn’t make sense to me that a site that has only the content changing on each page should be so difficult to recreate without the tables.



With these thoughts in mind, I made a template. This template consisted of all the similar portions of each page; the top, bottom and sides. I also made sections for the sidebar and content.



This was not a new idea that I had; it was just that the other way I was going about it didn’t work. Plain and simple, the code had its flaws and to edit the content would be just as much a hassle as it was to recreate it. This was not sufficient from the code perspective or the content writers’.



Because I took the time to re-do some steps, I saved a lot of time in the long run. On the first day, I created one page, the second day I created one page as well. Today I created 4 pages. Tomorrow I can only assume I will be able to complete more then 4. I hope to have this site finished by tomorrow if not the next.



There is one bug on the 4 pages I found but it’s a quick fix and I will patch it up tomorrow. It has to do with the positioning of the search bar and some of the pictures not responding to the change in the browser size. This is doing to something called absolute positioning. This alone is not a problem but when an element of absolute positioning is not contained inside a different type of container, it will disregard the changes around it.

Tuesday, March 21, 2006

Table Removal: Page 2




Today I worked on removing the tables from the second page of the site. I thought the process would take shorter today then it did yesterday but I ran into new problems. One of which was both pages were using the same CSS file. Since both needed different settings for the attributes, when changing one, I would have the side effect of changing the other.



Although I have a little more to go, I resolved this problem. I did this by breaking the CSS us into a main CSS file and each page will have its own CSS file. This method seemed to work best.



I was thinking to have all the pages with absolute positioning. With this method, editing the content would be like drag and drop for each div statement. Using this method, I think the process will move along faster.

Monday, March 20, 2006

CSS all the way!



Today I removed the tables for the main page of the HDTV site. This process resulted in 100 lines less of code with an identical look.


Getting started with the page in aligning the pictures and text to the right of it proved some difficulty but all in all the task was relatively simple.


As a personal side note I am enjoying the process.

Friday, March 17, 2006

The Blog: CSS

All the hard work and extra time paid off. The blog is up and running, looking beautiful, and striped of its tables!!!!

Some of the bugs that took me a while to iron out were so hidden, I must have overlooked them a few times, but lessons were learnt and I’m a million times more confident with CSS.

I cant wait to strip the tables out of the rest of the site!

Thursday, March 16, 2006




Reinventing The Wheel: Banging out the flat spots


Today I worked on eliminating the tables in the PHP script of the blog with great progress. I am now 90% finished. I have just a few glitches to iron out.

Image 1: Internet Explorer

Image 2: Fire Fox

As you can see, there are bugs in both Internet Explorer and Fire Fox. The IE bug has to do with the background gradient behind the blog navigation on the side bar.

The Fire Fox bug has to do with positioning. Firstly, the entire body is positioned to the left. Secondly, the content sections are shifted to the right. These bugs are easier to fix then the IE bug. The caveat is when changing one it changes the other so that is my obstacle for tomorrow.

Wednesday, March 15, 2006

Reinventing the wheel . . . but it’s a better wheel then yours!



The site is getting a make over of a life time, she’s being stripped naked of all her ugly nested tables and replaced with those good div’s instead. Its not easy at first but im getting the hang of how to approach this thing.

Today I have completed the skeleton of this construction and started putting the basic structural pictures in place. Tomorrow I will work it into the PHP code and I’m optimistic I could be done tomorrow.


I also spent some time killing the little bugs we found when viewing in fire fox. They might be small like a Nat but they bite!

Tuesday, March 14, 2006

The Blog: A working Blog



The Blog is up and looking nice besides a glitch or two in fire fox which will be worked on first thing tomorrow morning. Working with an HTML mock up proved to be the best way in creating the code. I will follow this procedure whenever working with PHP.


Now that everything is looking perfect, once again I will be hacking it apart and making the code as beautiful as the blog now looks. This requires substituting the hellish maze of imbedded tables with sassy <div>tags. Not the easiest task being the blog is an "out of the box" PHP driven script whose creator loves using tables for layout.


Come on you software engineers, get with the times!

Monday, March 13, 2006

The HD Blog: The Layout 2


The first layout was almost complete, that is, before we had an epiphany for another, better, more pleasing to the eye layout. This set the project back a little but a lot was accomplished today/tonight and was well worth it. The blog is looking (going to look) like something I could be proud to say is ours.

The beginning of the day was spent creating the new look in photoshop. A lot of messing around with different colors and shapes resulted in something that the team gave the thumbs up to.


The last part of the day was spent creating a mock HTML of what the site should look like. The coding was a little tricky. Some of the objects possitions were not doing what I expected them to but I finnaly got some of the problems worked out . . . at least in IE (Internet Explorer). So far just one bug in FF has to be iorned out. It shouldn’t be that big of a bug to stop though, I think I had to deal with something simmilar before.


Tomorrow I will be finishing up with the HTML mock up and move on to the real deal of figuring out where all the code goes in the PHP. . . . My work is never done, but what can I say, I love it!!!!

Friday, March 10, 2006

The Blog: Implementing (the buggy beginning stages)


Bugs bugs bugs
Today I started implementing the mockup html of yesterday into the php. So far
so good, of course there are some bugs. A WYSIWYG (what you see is what you get)
is not always what you get. I’m squashing the little suckers one by one. Some
changes are to be made on Monday.


 



  • The list of “things to change” can be seen below:

  • Center the title

  • Change the color of the side box to orange

  • Side box needs better spacing and different titles ( The titles and what goes under them will be changed so leave the actual text for now. )

  • The first title is to close to the top

  • More space between the lists and the next title

  • Take bullets out

  • all the titles should be centered and the list beneath them should be left justified

  • the side box should only go as far down as it will be filled (ads will be placed under them (not inside the box))

  • Change the look of the blog title (Maybe background graphics )

  • Put the logo to the left of the title text and center the whole thing

Thursday, March 09, 2006

The Blog: The Layout


majority of the day was spent on the layout of the blog. I used the output of the website to create a static webpage in order to use as a mockup. Using the local server (A.K.A. my computer) to test the layout I was able to create a nice looking template for the blog. Tomorrow I will implement what I have worked on today.

The Blog: Layout and Create



Yesterday I got all the pieces fitting. When you where a kid, have you ever played with one of those three section books where the bottom section is feet, the mid-section is a body and the top section is a head. As the sections change, the creature takes on a new shape. In a way, I am the author of this book, or the editor anyways.


the site contains different sections, the three basic sections, strangely enough, are named almost the same as the book. The sections include the head, body and footer. The difference is, there are sections inside sections.


The tricky part of this whole thing is, the different sections can not overlap into each other, no matter what the body has become. Imagine the book, some of the bodies had a little piece of the head or a little part of the foot, or some of the feet are too large for the body. The creature wouldn’t look right.


I got a working model so everything meshed right. Today is the day I get everything looking nice. Make the feet, body and head the sexy looking creature it was meant to be.

Tuesday, March 07, 2006

Rum Tum Tum on a Barrel of Rum


They always said I walk to the beat of my own drum. I often do when playing my own drum. Rarely do I find the opportunity being I do not own a drum. If I did own a drum, I would probably call my friends who play the guitar, sax, and keys. I would also invite my cousin who sings and then we could all walk to the beat of my drum while jamming out with one another.

Wednesday, March 01, 2006

Please Save Me The White Space


I had an idea for a new innovative layout for a webpage. Imagine you are looking at two sheets of paper on a desk. You place them beside each other so you can look at both of them at the same time.

You are half way through the document when the cleaning lady comes and becomes pushy tell you to move. You reluctantly gather your papers and move to a desk of one of your co-workers that is vacationing in Hawaii with his wife. Although you are grateful for the vacancy you can temporarily occupy with your work, the desk is smaller and cluttered. You then start to realize why you had the bigger desk, because you actually do work. . . .

None the less, you are back on track and ready to examine these papers. You arrange your papers in the next best positioning to compare, vertically.

I often see websites whose borders are defined by the 800x600, or the page justifies its self to 100% of the browser. Both approaches are ideal for the 800x600 resolution user but a ton of either a block of blank space or justified blank space for any other resolution.

My webpage layout idea is similar to the best and second best paper arrangement scenario. When using the higher resolution of 1280x1024, the 800x600 margin you are restricting the website to is only using up about 62% of the capacity of the screen.

Half of 1280 is 640. If the webpage was restricted to the 640 pixels instead of 800 pixels, two pages could fit next to each other. If the browser is resized to less then the maximum of the 1280x1024 capacity, the second page positioned left of the first, would move below creating the vertical scrolling we are all used to.