Web Design and Development

Well yesterday and today I spent some time recoding the site, since I haven’t since I created it in my portfolio class 2 years ago. I did do some reworking a couple months back but now I made sure to get rid of the unnecessary tables in my resume and contact form. I also went through and streamlined the code removing extra code bloat, which I created when I was a beginner and making everything XHTML 1.1.

Some of you will have to clear your cache or you will get a nasty looking page, hopefully you figure that out or you just sit there thinking I totally screwed my site up! I’m planning to redesign the site, so streamlining the code and everything should make it a lot easier. Its about time I stop being lazy and get something with an updated look around here, Its so 2004.

Anyways I hope everyone has a great holiday. I will be staying around the house playing with my new MacBook. Yeah thats right I got a MAC finally. I always planned on getting one but I have been paying off my $2800 laptop and $1400 desktop for the last couple of years. I got a break for a couple months here with paying Comp USA and after having problems with some MAC browsers with some recent Javascript, I felt it was time to get me the MAC to test on. Any suggestions on all the great MAC stuff, I should get would be appreciated, especially for web development

Again happy holidays everyone

Check out the latest article in the last edition of this year at Alistapart. Marc van den Dobbelsteen shows us how to create layouts for any resolution that we want using some simple lightweight unobtrusive Javascript to switch a class on the body tag. Most of the time Developers create liquid layouts to display perfect for resolutions between 800 and 1024 pixels, but now that the mobile web is pushing its way to the forefront we now have to create alternatives for every possible resolution on a given platform, the user to gets a usable experience.

In the Javascript all it is doing is saying if it is between A resolution and B resolution apply X class to the body tag. Then in the CSS using you have separate classes for the different resolutions. You can just put in your CSS something like .pda #mainContent (styles) or .wide #mainContent (styles).

Sure you have to set up more CSS but the end result is a great usable experience for any user on any given platform.

Once again another great article by Roger Johansson about the 6 things that suck in the web for 2006. Its a short article. but the debate in the comments is what makes it a great read. The main debate is the overuse of Javascript Libraries and the use of them by people who don’t know Javascript thoroughly.

Of course its Jeff Croft leading the debate like always. I seem to see him debating a lot in peoples blogs and though I don’t always agree with his point of view he sure makes any blog article a well rounded conversation between its users.

I do think the use of Libraries are getting to much the norm and people aren’t spending the time to learn Javascript thoroughly, including myself. Even though they say in the comments that it does take some knowledge of Javascript to pull it off I think these plugins that are out there make it pretty simple, its customizing them which takes more knowledge. I agree a lot with what Jeff posts about it being great for developers who know what their doing.

I also agree with the use of AJAX and the use of saying AJAX! People talk of it as if its the end all be all. Yeah its great, but talk about over saturation and the fact that 70% of the small websites out there that people like me develop won’t really have the need for it. Sure if your creating a web application its a must. Lets slow down before every client we come across says their site needs AJAX like Flash.

Wow I logged into digg this morning and saw a whole different design and at first I wasn’t digging the change to the navigation design. I don’t think they spent much time in thinking of an attractive color for the sub navigation. The green bar isn’t really that appealing to me it looks puke green, although it does save a lot of space on the page. I just think they could of had a better color choice. The functionality of it is great. Thats besides the point because they have went above and beyond with the new features and changed their layout from fixed width to a fluid width design.

New Features

I think the biggest addition is the Podcasts section. You can now digg your favorite podcasts either by series or by episode. You can click on podcasts and then even choose which episode to listen to because they have it listed which ones are the most digged episodes of each podcast.

They have now added Videos to have its own Global navigation item and now there is a Top 10 stories/videos on the sidebar which is updated in real time. Of course in the profile they have separated it now into three sections for Video,News, and Podcasts.

I think the Podcasts is so great because now its going to be so much easier to find quality podcast and for people out there that have podcast shows that might not be able to get the traffic to their podcast that it deserves. I think those podcasters have a good chance in seeing a huge increase in traffic once they get heard on digg.

I can say after today that I love the Batch process in Photoshop for making the same change to a lot of images instead of having to make the change to every image. It is perfect if you are making a photo gallery and need to resize a ton of images. You could use it in conjunction with Actions for almost any effects you want for images though.

I’m sure many of you have used this before and are saying duh! thats old but I think I have used it before but just now did it come in super handy that I am creating a website that has like 10 image galleries with like 300 images all needing to be resized into two different sizes.

Here are the steps to resize your 200 images in minutes:

1. Create the folder that you want the images to be saved in.

2. Then open an image from the original folder that your images are in and make sure that your actions pallet is open and create a new action by clicking on the second to right icon on the bottom next to the trash. name it whatever you want the action to be called, I named it resize 200, since I was resizing the width to 200px hit record and your ready to go.

3. Go over to the image menu and select image size, and make the changes that you need and hit OK.

4. Your now going to save your image for the web with your usual compression settings and click save, make sure that when you save the image that you don’t type in a name and just let it save to the default other wise it will try and save all your images as the same name. You can check to make sure by checking your action and make sure that its just saving to the /directory and not /directory/name.jpg.

5. Now go over back to the actions pallet and click the stop button on the bottom.

6. Go to File and then Automate and choose Batch. Choose the set that your action was in then in the action dropdown of course choose your action that you created.

7. Then for the source choose folder and push the choose button and go to the directory where your original photos are. Some people would say to not check the first two options and check the last two in that top area but I didn’t check any and it came out all right. I also checked them and didn’t see any thing different.

8. Now Choose your destination folder that you want all of the images to be saved in same as you did in the previous step and make sure to check Override Action “Save As” Commands, otherwise you will get the normal save popup when going through the process.

9. Now comes the bad part of this great process you are suppose to be able to create the file name using these boxes and their rules which would be great but it doesn’t work when saving for the web it just ignores it and saves it as the pre existing file name. This would be good for other situations where you weren’t saving for web or exporting. so just choose document name and then extension in the second box. I wanted to be able to save it as document name + _thumb + extension since I was going to be creating two versions but unfortunately if this is what you are trying to do like I said it wont work and you might as well make one folder called thumbs and save them there then edit your action and do it again in the directory above thumbs.

10. Then all you do is hit OK and let it run and boom 30 seconds later you can have 80 or so images all resized and saved. This may lag your computer a bit so you should just take a break for a second and let it run its process. Thats it, let me know if any of you try this and have any problems I will help you out because I had some problems and there are only a couple decent articles that explain it correctly. The file naming thing was annoying me the most because I didn’t know why it wasn’t working.

Although some of you might think of this as being old news I think some people might not know that it is available and with all the little photo galleries out there these days I’m sure you will run into a client wanting one of these implemented and maybe this will come in handy. This could come in handy in so many more ways then just image resizing but to do multiple effects to many images.