INFO 652, Programming and Design Tutorials: Blog

Stylesheet switcher tutorial

2008-04-22T08:56:00.000-07:00

Hi everyone,
I would like to ask the class if somebody is interested in a small tutorial explaining how to have alternative stylesheet and be able to switch to it from within the page. I talked about it in my previous posts. If anyone has such desire to do it on his own website, I think it would be helpful if I post step be step procedure how to do that ( Of course it can be done in different ways, I’ll post my version).

General thoughts on the website so far.

2008-04-21T20:08:00.000-07:00

Today I spent more time on enhancing user experience, getting rid of some bugs and tuning up stylesheets. Now, when I have two stylesheets, I have to check each new page against each of them.

Another problem is that we don’t use any server side platform, which makes routine tasks of maintaining web pages much harder. For example, if I needed to change a menu item, I could have done it in one place (xml file, database, server include), and not by going to every html page, which has the menu. (I already did several of such edits for different reasons). That is why I am reluctant to add new pages until I am confident that the ones I have so far work well. I also might add some general functionality to a page and would be forced to go back to all existing pages and change them accordingly.

I might try to hide the blogspot blue bar and add the link, which will reveal the bar on a click.

I also noticed how easy it became to go back and forth between blog and my website. I can actually type http://alvicstep.blogspot.com and click home button to get to my site, which is somewhat shorter and easier to remember than http://www.pages.drexel.edu/~as859/652 .
May be I should add links to the blackboard, course's website and wiki page, everything in one place.

Blogspot customization

2008-04-21T09:38:00.001-07:00

If you were on this page before you probably noticed that it looks different. I realized that our blogs can be customized to whatever we want them to look like (offered templates are nice, but they will never be exactly as you want). Tell you the truth, it was Johannes’ blog, which started me thinking about doing this (thanks Johannes).

Basically, the goal is to make your blogspot page look like one of the pages on your site (our project web site). This seems to change the perception that our site is static and not interactive. A lot of big sites use third party services and users are simply redirected to third party pages. These pages have to resemble the appearance of sites they are supposed to be part of.

(Side note: another popular solution is to use javascript or iframe to embed third party code, which is called dynamically every time page is loaded. As an example, look at Johannes’ “Contact“ page. He utilizes iframe, which pulls the submission form from http://creator.zoho.com/

Here is a code: <iframe height="474px" width="100%" name="zohoform6" frameborder="0" scrolling="no" src="http://creator.zoho.com/showForm.do?formLinkId=6&link=true&sharedBy=jkuhs&borderColor=F3F3F3&headerColor=F3F3F3&successMsg=Thanks, your comments have been submitted successfully!&privatelink=xnzvKSk7PrsFDGKv4WpTN8KJPn5OSVQOEF5Bhshzz3Gwza7svFuPfdyYeUHDVjdsP3xa8Gus0B6ZBgGUTP06V1S136CJsbnG0e0M" > </iframe > ).

Fortunately, blogspot designers tried to accommodate everybody’s needs and made their page customization as less painless as they could. After about three hours of figuring out how it all works (IE developer toolbar was very useful) you can see the result. Not every detail is exactly matched to look the same as my project pages, but pretty close.

Also, if you read my previous post, you know that a user can choose between two web site themes. I did not want to implement this functionality on the blogspot page, because it would require couple more hours of css tweaking, and it did not seem worth it. I decided to pick one of the themes and apply it to the blog page. I like the alternative style more and went with it.

Every blogspot page have a toolbar on top (the one with blue background), which is injected on the server side, and not present in the template. I could not change its background to blend it with overall theme. Thus, I just set its width to match the navigation menu, centered it and left it alone (at least for now).

P.S.
I probably have to switch default and alternative styles on main site since the default style for blog is set to look like an alternative, which becomes confusing.

All references to images, css stylesheet, navigation links have to be absolute on blog page, because it is hosted on different server.

The blogspot page does not pass w3c html validation. Please do not blame me for this, I do not have control over it, it is all Google’s fault. :)

I added a Blog menu item. Now it is really integrated.

Alternative stylesheet

2008-04-19T16:50:00.000-07:00

It is possible to have more than one website theme with the help of alternative css stylesheets. User is then able to pick the look and feel of the website as he/she wishes. I decided to add this functionality to my project.

If you define alternate stylesheet and make a reference to it in your page, Firefox allows you to choose which stylesheet you want to be applied to the website you are viewing. That is not the case with IE. You have to use little bit of javascript to make this feature available on any browser.

I decided to use Jquery - javascript library, which makes writing client scripts a breeze (I might use this library later on to add some additional functionality).
I used the code snippet, presented by Kelvin Luck on his site:
http://www.kelvinluck.com/article/switch-stylesheets-with-jquery

Two additional hyperlinks are provided on the page and by clicking on one of them the user switches the stylesheet. If javascript is disabled, the user is redirected to the page, where he is asked to turn on the javascript in order to use this feature.

After couple of minutes of copying and adjusting of code, javascript switcher was done.

Then, I had to create alternative stylesheet itself. It took much longer, but eventually I managed to come up with decent website appearence.
I also used 3rd party code to create navigation menu. You can find it here: http://cssmenumaker.com/

The page is fully css 2.1 compliant.

Here is a final result: http://www.pages.drexel.edu/~as859/652/tutorial_header.html

Click on "Alternative Style" in the upper right corner.

Layout problem

2008-04-13T13:09:00.000-07:00

I checked my website on my laptop, which has IE6 (I created my website pages on my desktop with IE7 installed). The content of the column on the right does not have enough space to fit inside the column itself and is pushed down. IE6 calculates the with of the column somehow different from firefox or IE7 (probably some padding or margin issue). So much of a css layout. Yes, it makes loading of page faster, but you can not be sure that it will be displayed correctly without checking it first on different browsers. Alright, enough complaining, I am going to fix it now.

The website is created

2008-04-12T15:06:00.000-07:00

I decided to proceed with the development of the website since I determined its topic yesterday. I was looking for ideas and stumbled on this website. I thought it would be cool to create similar header to the one featured on this site, but for Philadelphia (it is pretty logical: this project is part of the Drexel class and Drexel University is in Philly). At the same time I thought it would be nice if others could see how simple it is to create this page design element. You can find this tutorial by going to http://www.pages.drexel.edu/~as859/652/tutorial_header.html and check out the site itself. Only home and this tutorial pages are created so far.
I also used Google gadgets in the left column that provide some functionality with one line of code.

2008-04-11T11:27:00.000-07:00

I went through other websites ( as far as 2006) and I found just one, which was little different:

Amanda Chudnow uses a Philadelphia map as a background for her site. Composite picture in the header nicely fits in the overall design (if she made this picture herself, it is very impressive)
http://www.pages.drexel.edu/~asc35/Final/

The rest of the class final project sites are the same (different coloring and content). Layout, navigation, site functionality are virtually identical. Is it because of project requirements, which limit people's creativity or the focus of this course on creative content rather than web design? Perhaps, it is simply what is expected of a student, the scope of the class. Your thoughts?

Initial thoughts on final project

2008-04-09T10:08:00.000-07:00

Hi everyone. I have been thinking what to write here for a while now and still have no idea. Since procrastination is my middle name, I think it is time.
As a remainder, I copied from our assignment what I actually need to blog about:

Why you are considering and/or discarding certain topics
Links to resources you might use in FW
Ideas for color palettes
Possible topics and titles for your 4-5 subpages
Links to good examples of similar websites
Possible original text for FW
Possible graphics or sources of graphics
Challenges you may face

It is a start. It seems like I suddenly have a plan!

Possible topics I consider (brainstorming session):
- blog about how to make blogs (technical perspective)
- everything about web development
- make my little version of IPL.org (I have second class in a row discussing it, making its prototypes, finding problems, lets just do something)
- second quiz gave me some inspiration about potential uses of facebook relating to Drexel instructors. Maybe I should expand on this thought and dedicate my little project to it in the name of all students harbouring a grudge. :)
- this is harder than I though it would be (this is not a topic)
I think I am coming to realization what a shallow person I am, nothing to talk about. I am not interested in sports (except UFC ), not a member of any honorable societies, knitting seems to be fun, but I think I need to warm up to it little bit. And the worst of all, I eat meat, a lot of meat. Talking about vegetarian food would look little hypocritical.
As you probably noticed I try to get my inspiration from students' works from previous terms, but it does not help me much. The site on overclocking is interesting though. I assembled my computer from parts I ordered online and even got a chance to put the processor in place. What a wonderful moment of booting it first time. It is aliiiiive! I played with an idea of overclocking whatever is overclockable, but I don't play 3D games (one more example of my shallowness) and I prefer quiet computers (no more cooling fans please).

Redesign of ipl.org is the most appealing to me, but the problem is that I would not provide my own content, I would reshuffle the content, make the website more usable, add some features and try to eliminate the problems people reported.
Second winner is a topic about web development and all Microsoft technologies: Silverlight, MVC framework , LINQ, 3.5 .Net Framework.

P.S. I did not know so many people want to work in libraries, especially in a rare book department.

2008-04-02T16:52:00.001-07:00

My name is Alex Stepanov. This is my third quarter at Drexel and I am an MSSE student.
I think my future job would be web related, something along the lines of data intensive web applications.
I am a full time student and currently don't work. I used to work for a newspaper company as a web developer for one year.

My 3 most used sites: