'Website Design' Category Results

IDing the Problem of ASP.NET

Wednesday, August 20th, 2008

I love ASP.NET, but one thing I find extremely frustrating is dealing with the automatically generated ID properties that it places on page elements.

For example, let’s say you have a div with an id of “contentTop” like below:

  1. <div id="contentTop" runat="server" >...</div>

Because you have made the control a server-side control by adding the runat=”server” attribute it will now be rendered with a different ID when it hits the browser (view the source code and you will see). It will get rendered as something like this:

  1. <div id="ctl00_contentTop" >...</div>

This is because ASP.NET generates its own IDs to ensure that every element on the page has a unique ID. Developers that work with JavaScript and CSS will immediately see the problem. This causes difficulty when using JavaScript and CSS which rely on those IDs to reference elements, as they can’t easily predict what the generated ID will be. When it comes to CSS specificity the ID selector is extremely useful. In addition, anyone that uses JavaScript knows that getElementById (or one of the JavaScript library ways) is the most popular way to target an element. So why the hell does ASP.NET do this to us? Honestly, I can’t really tell why, other than the fact that they must not trust us enough to be able to uniquely ID our elements ourselves.

But I don’t want to just complain here, I would like to provide some solutions too.

Solution

The solution will be found in the ClientID property of the server-side control. The ClientID property represents the ID that ASP.NET will use for the element on the client.

Using the ScriptManager we place the ClientID in a hidden form field. This can all be done in the code-behind file by using the following code:

  1. ScriptManager.RegisterHiddenField(this, "contentTop", contentTop.ClientID);

Be sure to have included the ScriptManager to your page, like so:

  1. <asp:ScriptManager ID="ScriptManager1" runat="server">
  2.     </asp:ScriptManager>

Now we can use JavaScript to retrieve the value from our hidden form fields.

javascript

  1. var id = form1.contentTop.value;
  2. var cTop = document.getElementById('id');

That’s it, if you know of another way, please let us know.
Happy coding.

My CSS is Cat -(Categories With CSS)

Wednesday, August 13th, 2008

This article details how to produce a product category list with associated images and text. This is the sort of thing you would see if you did a search on Amazon.

I am going to start by showing the finished product as this will help you visualize what we are going to achieve along the way. Figure 1 below shows a smaller version of the task ahead.

Figure 1

We are going to make a similar display but without using tables as in my view the information presented is not tabular and does not have a logical correspondence between rows and columns. Even if you do present a good case of why this should be in a table, please don’t comment on this as we are interested in the layout techniques rather than perfect semantics (for this example). The techniques presented here can be used in other layouts that are certainly not tabular and will prove useful in many situations.

(more…)

How Good Are You at JavaScript and CSS?

Monday, June 30th, 2008

This year I have found myself looking for jobs on two separate occasions. As a result I have had a good number of interviews. One question that I found harder to answer than I had anticipated was when asked how good I am at JavaScript and CSS.

Why was this question that hard to answer? I actually feel that I am quite knowledgeable about both CSS and JavaScript. I’ve built probably close to a dozen websites using entirely CSS-based layouts over the last few years. In addition, I have used JavaScript quite often to enhance those websites, usually with Ajax and spiffy web widgets like the Comment Info Tip Plugin. I may not be as knowledgeable as Paul O’Brien when it comes to CSS or Jonathan Snook when it comes to JavaScript, but I certainly am competent. So again, what’s the problem?

The problem is the damn cross-browser problems that still trip a person up from time to time. Almost every time I ask Paul for his help with CSS it has to do with a cross-browser issue: something works in Firefox, but not in IE or vice versa. Same with JavaScript; think addEventListener method in Firefox and attachEvent for Internet Explorer. This is a bloody mess for the developer and I suppose makes me question my abilities at times.

Such cross-browser issues make it hard for a developer. I don’t know about you, but I’ve often spent more time trying to make a site work across all browsers than on the actual design of the site.

There are people that I know and respect that have chosen not to learn JavaScript at all because they were so put off by such difficulties. Also consider how difficult it’s been to get people to leave HTML table-based designs behind in favor of CSS layouts. It’s been slow at best. No doubt due much to the differences across browsers.

What’s your take? How has the difficulties in trying to achieve all browser support effected your attitude of CSS and JavaScipt?

10 Things Any Web Developer Worth Their Spit Should Know

Tuesday, June 24th, 2008
  1. DOCTYPE Declaration

    DOCTYPE (short for “document type declaration”) informs the browser of which HTML or XHTML standards you would like your code to be checked against. You’re essentially declaring to the browser that these are the rules that you have used to create this page and in return you are expecting that it will render accordingly. Failure to specify a DOCTYPE can lead to unexpected rendering — a developers worst nightmare.

    [ further reading ]

  2. Navigation

    A website’s navigation plays a key role in the success or failure of a site. It allows humans and search engines alike to easily locate the desired information. Or it doesn’t. Navigations made up of Flash or JavaScript/DHTML may seem attractive at first, but ultimately can cripple a website by not allowing search engines to crawl and index the entire site. In addition, viewers that choose not to partake in these technologies can be left with no means to move within the site.

    Most experienced webmasters have left such navigations back in the 90’s with all those AOL discs.

  3. CSS is Not an Option

    In the past webmasters could choose to ignore CSS if they so desired. Those days are gone. CSS is no longer an option, it’s part of the trifecta (see The Separation of Concerns for the trifecta) that makes up a quality website. A good webmaster will use CSS exclusively to define the look and layout of a website.

  4. The Separation of Concerns

    In days gone by web developers would meld HTML, CSS, and JavaScript code all into a single page; like a web page jambalaya. Inexperienced web developers may still do this, but the experienced ones took notice that the make up of any given page is defined by three elements: the content of the page, the presentation of that content and the behavior of that content.

    Realizing this, competent developers have made an effort to keep these three layers separate from one another. Kevin Yank does a fine job explaining our three layers in his article: Simply JavaScript: The Three Layers of the Web

    When building a site, we work through these layers from the bottom up:

    1. We start by producing the content in HTML format. This is the base layer, which any visitor using any kind of browser should be able to view.

    2. With that done, we can focus on making the site look better, by adding a layer of presentation information using CSS. The site will now look good to users able to display CSS styles.

    3. Lastly, we can use JavaScript to introduce an added layer of interactivity and dynamic behavior, which will make the site easier to use in browsers equipped with JavaScript.

  5. Cross-Browser Support

    Any developer that has been building websites for awhile has the battle scars that you get when you try and make your website work on all browsers. Each browser has it’s own idiosyncrasies (some more than others) and designing and redesigning your site to function under each can be a battle; but it’s a battle that must be fought and won.

    [ for more help with cross-browser CSS read this ]

  6. (more…)

The Problem With Web Design

Tuesday, May 27th, 2008

There’s no doubt in my mind that the little blocks from Denmark known simply as LEGO are the greatest toy ever. I put in more hours playing with Legos than all other toys combined. I loved to use my imagination to build with them. It really didn’t matter what: a car, a fortress, star destroyer, space station, whatever. It was about taking an idea and bringing it to life piece by piece.

This love to build something from nothing still resides within me; it’s just been replaced with web technologies instead of plastic bricks. Today I build websites, plugins, widgets and anything else that takes life in my imagination. The thing I enjoy most is seeing if I can pull it off — can I get what’s in my head to take form on the web? Most of the time I can.

But there’s something that really bugs me about all of my creations. They simply don’t last. In fact, over the years I’ve found the life span of any web-based product to be short, very short. Of all the websites I’ve built, more are gone than remain. They’ve been replaced by newer versions or completely phased out. There’s no place for nostalgia on the web.

I have a deep jealousy of designs that last. I look at Michelangelo’s Sistine Chapel which has been around for five hundred years and is in no danger of ever being updated or phased out. Or Beethoven’s 9th symphony which he completed in 1824 and still moves the soul today. I’m betting that even more recent artists like Christian R. Lassen probably never worries about their work becoming dated and needing to be replaced. But in the world of computers, nothing lasts.

Does anyone else find this frustrating or at least a little depressing? Of course it’s not just my work. I already have images of a new 3G iPhone dancing in my head and my current iPod is only two years old. My three thousand dollar computer that I hand built from the greatest specs three years ago doesn’t run today’s DirectX 10 games. How sad…

You have to ask yourself when developing software or web pages if pixel perfection’s really all that important when it’s only going to last a handful of years anyways? Could this be why Microsoft released Vista knowing full well that it was far from done? Microsoft is already talking about their next OS, Windows 7 and Vista is barely out of the wrapper.

I know, it is what it is, the beauty and the curse all rolled into one. The ability to create knowing full well that you will do it all over again in a handful of years. I guess it’s job security, right?

Your thoughts?

The Perception of a Website

Wednesday, March 19th, 2008

As you walk into Starbucks the aroma of coffee brewing permeates your senses. Trendy music plays in the background with earth-tone painted walls, nicely lacquered wood and friendly baristas all help to create an inviting perception of quality and comfort.

Of course this is all by design – Howard Schultz, then CEO of Starbucks made a trip to Italy during which he visited some 500 espresso bars in Milan and Verona. He observed local habits, took notes on decor and menus, snapped photographs, and videotaped baristas in action. He was looking to create the right perception.

Now compare this to McDonald’s – what’s your perception of McDonald’s? Probably fast, convenient comfort food; who do you think would have a better cup of coffee, McDonald’s or Starbucks?

Perception dictates reality – Starbucks coffee tastes better because the consumer thinks it tastes better. But, a recent Consumer Reports found that McDonald’s coffee was actually better than Starbucks. That is the power of perception!

So when you start to build a website it’s imperative that you know the perception you want the website to present.

(more…)

Web Developer Crossword Puzzle – ANSWERS

Friday, February 15th, 2008

Here are the answers to the Web Developer Crossword Puzzle you hopefully took last week (2/6/2008).

I know some of you said it was a little tough, but hopefully you enjoyed it? Besides, it’s good to stretch your brain with a good crossword or sudoku puzzle from time-to-time.

HERE ARE THE ANSWERS:
Web Crossword Answers PDF

Web Crossword Answers GIF

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading