Here are some major color selections using the hex-color code for css background elements. Here are the tables tables for text-based colors and hex based colors. I have limited the variation to steps of 32 to keep the download time reasonable.

• 1 Comment

Here is the list of text based colors for use with background CSS statements. Here are tables for hex-based colors and rgb based colors.

• 3 Comments

I will state here 3 good reasons to publish content with JavaScript;

1. To hide your forms from spammers’ robots.
2. To publish content pulled from remote files.
3. To hide certain content from search engine spiders.

Any HTML content can be generated for delivery with JavaScript. Most JavaScript itself can be delivered that way, should there be reason to do so.

However, don’t generate PHP code or SSI tags into JavaScript. Those have to be available at the server before the page is sent to the browser where JavaScript can run.

1. Hiding Your Forms from Spammers’ Robots.

Spammers won’t spam through your forms if they can’t be found.

The search for vulnerable forms is mostly automated.

Robots follow links until they find a form. The detecting robot then submits the form using preprogrammed methods and with preprogrammed information. If the form has a security hole of the kind the robot is scouting for, the information is recorded for the robot owner’s later perusal.

Manually surfing to find forms and testing them would be uncommon. Spammers seem to be lazy.

Here are the steps to replace the form with JavaScript:

1. Copy your form’s source code from FORM tag to ending /FORM tag.
2. Paste the copied code into a JavaScript generator.
3. Generate the code.
4. Copy the generated JavaScript.
5. Replace the current form source code on your web page with the generated JavaScript.

It may be prudent to put a notice on the web page that will be seen only by those whose browsers are JavaScript disabled. Example:

<noscript>
<h3>JavaScript is required to use this form.</h3>
</noscript>

Now you have some protection. It’s not guaranteed to be forever effective, of course.

If you are already being spammed through your form, you’ll need to take a few steps before encoding your form with JavaScript:

1. Rename your form handling software file on your server. Keep the .cgi (or .pl) file name extension, just change the first part of the file name.
2. Change your form’s action= URL to reflect the new file name. Every form that uses that form handling software will need this change.

Now you can replace the form with JavaScript by following the steps presented earlier.

The extra step is necessary because your form handling software’s URL is already in the spammer’s database, which means they can bypass the form. Changing the software’s file name introduces an error into their database.

For extra protection, in case robots that can read JavaScript come your way, the JavaScript-ized form can be retrieved from an external file.

2. Publishing Content Pulled from Remote Files.

When certain content is to be repeated on several pages or on several domains, the content is easier to maintain when it exists in only one file.

That content can be generated as JavaScript using a JavaScript generator. Remove the first and last lines from the generated JavaScript (the SCRIPT and cancel /SCRIPT tags) and save the rest as a file on your server.

Convention says the file is to be saved with a .js file name extension. However, .txt or .htm will do the job as well.

Once the file is saved, determine its URL.

Now, all you have to do is put the following JavaScript, with correct URL, into your web pages wherever you want the content to be printed.

<script
   src="http://example.com/file.js"
   type="text/javascript"
   language="JavaScript">
</script>

Replace URL http://example.com/file.js with the URL of your content file and you’re good to go.

3. Hiding Certain Content from Search Engine Spiders.

The following assumes search engine spiders do not read and parse JavaScript. If they do understand JavaScript, now or in the future, other methods can be used to do the hiding.

Certain things are oftentimes best left out of search engine indexes. Examples are advertisements and navigation areas. Their inclusion might contaminate the indexes and even skew your keyword density.

To make ads or other sections of a web page invisible to spiders:

1. Put the source code section into a JavaScript generator.
2. Replace the original source code on the web page with the generated JavaScript.

Certain words or phrases, or entire paragraphs, can be hidden from spiders the same way.

An example of why one might want to hide a word, a product name in this case, could be an article reviewing the product. The article has an affiliate link to the product. The page also has AdSense. The name of the product in the article could attract AdSense ads for the product. And that could reduce affiliate income from that page.
There are, of course, other reasons to publish content with JavaScript. Sometimes JavaScript is the only method available. Other times, like the reasons presented here, publishing content with JavaScript is optional.

Whether or not it is optional, a JavaScript generator can help by turning text into JavaScript that will print on a web page.

• 0 Comments

Part 1 focused on the many ways to specify web page backgrounds with CSS. This part 2 addresses these subjects:

1. The background of divisions of the web page, within DIV tags.
2. The background of tables.
3. The background behind sections of text content.
4. The background behind INPUT and TEXTAREA form elements.
5. The background behind ordered and unordered lists.

This part 2 supposes you are familiar with part 1 . Without that familiarity, especially if you are a novice with CSS, part 2 can be confusing.

Like part 1 , the CSS examples in part 2 are provided in the format used when the styles are defined in the HEAD area of a web page. For site-wide implementation, you can use an external file for the same effects.

The Background of Divisions of the Web Page, Within DIV Tags

Specifying a background for a DIV section of your web page is similar to specifying the background of the entire web page. Backgrounds specified for a DIV section will lie on top of the web page’s background.

A DIV section is that portion of your web page in a DIV tag, i.e.:

<DIV>
Content of a DIV section.
</DIV>

Create a CSS class in the HEAD area of your page, like this:

<style type="text/css">
<!--
.divtest { background-color: yellow; }
-->
</style>

Now, when you create a DIV section in your web page with class divtest, the division’s background will be yellow. Example:

<DIV class="divtest">
<p>A paragraph.</p>
<img src="picture.jpg">
<p>Another paragraph.</p>
</DIV>

To specify an image as the background for the DIV, several different methods can be used. Each method requires changing the CSS class “divtest” in the HEAD area of your web page. Images, if they’re too large for the DIV section, will have their top-left portion displayed to the size of the DIV section.

1. To tile the image, where the image is repeated across the top and row by row until the entire DIV background is covered, use

   .divtest { background-image: url(image.jpg); }

2. To print the image just once, not tiled, use

   .divtest { background-image: url(image.jpg);
   background-repeat: no-repeat; }

3. To print the image just once, positioned in the top-right corner of the DIV section, use

   .divtest { background-image: url(image.jpg);
   background-repeat: no-repeat;
   background-position: right top; }

   Positioning of the image can be done in the many ways that web page background images can be positioned. See part 1 of this series.

4. To repeat the image across the top of the DIV section, use

   .divtest { background-image: url(image.jpg);
   background-repeat: repeat-x; }

5. To repeat the image along the left edge of the DIV section, use

   .divtest { background-image: url(image.jpg);
   background-repeat: repeat-y; }

6. To create a DIV section the exact dimensions of the image, use (assuming an image 200 pixels high and 400 pixels wide)

.divtest { height: 200;
width: 400;
background-image: url(image.jpg); }

The Background of Tables

Background color and images can be specified for tables, almost identical in method to specifying backgrounds for DIV sections. For testing, create a CSS class in the HEAD area of your page, like this:

<style type="text/css">
<!--
.tabletest { background-image: url(image.jpg); }
-->
</style>

Now, when you create a table in your web page with class “tabletest”, the table’s background will be whatever you specified for that class. Example:

<table class="tabletest">
<tr>
<td>
Table data cell content here.
</td>
</tr>
</table>

Image tiling and positioning, and background color styles are specified using the same specifications language as the class for DIV sections.

The Background Behind Sections of Text Content

Background color and images can be specified for standard HTML tags for text content, too. It is almost identical to the DIV and table style specifications, except no period is typed in front of the style. (The period indicates a custom class. Lack of a period indicates a style for a standard HTML tag.) Standard HTML tags for text content do not have the ability to be sized except for the amount of area the text itself requires.

To specify a background of yellow for H1 (header size 1) text and an image background for P (paragraph) text, put this in the HEAD section of your web page:

<style type="text/css">
<!--
H1 { background-color: yellow; }
P { background-image: url(image.jpg); }
-->
</style>

Now, in the following page copy, the header will have a yellow background and each paragraph will have an image as its background. Example:

<H1>My Header</H1>
<P>A paragraph.</P>
<P>Another paragraph.</P>

Image tiling and positioning are specified using the same specifications language as the class for DIV sections.

The Background Behind INPUT and TEXTAREA Form Elements

The background of form INPUT and TEXTAREA fields can be a specific color or an image. To make all INPUT areas yellow and put an image in the TEXTAREA field, put this in the HEAD section of your web page:

<style type="text/css">
<!--
INPUT { background-color: yellow; }
TEXTAREA { background-image: url(image.jpg); }
-->
</style>

Now, all INPUT and TEXTAREA fields will contain the background you specified. Example:

<form>
Your Name:
<INPUT type="text">
Narrative:
<TEXTAREA cols="11" rows="5"></TEXTAREA>
<INPUT type="submit">
</form>

Because the submit button is also an INPUT field, it will have the same background as text input fields. If you prefer to have the background of the submit button be blue (for example, it could be any color or even an image), create a custom class and then specify that style for the submit button.

Example for the HEAD section:

<style type="text/css">
<!--
INPUT { background-color: yellow; }
TEXTAREA { background-image: url(image.jpg); }
.special { background-color: blue; }
-->
</style>

Example form:

<form>
Your Name:
<INPUT type="text">
Narrative:
<TEXTAREA cols="11" rows="5"></TEXTAREA>
<INPUT class="special" type="submit">
</form>

The Background Behind Ordered and Unordered Lists

The backgrounds of ordered (OL) and unordered lists (UL), or each individual list item (LI), are specified using the same specifications language as the class for DIV sections.

If specifying an image for the background, the image will be behind the entire list if specified for UL or OL tags. However, if specified for LI, the image will be repeated behind each individual list item.

If UL and OL are specified, and LI, too, then the browser will print the LI background over the UL and OL background for each individual list item.

Here are examples for the HEAD area:

<style type="text/css">
<!--
LI { background-color: yellow; }
UL { background-image: url(image.jpg);
background-repeat: no-repeat; }
OL { background-image: url(image.jpg); }
-->
</style>

And, example lists:

<ul>
<li>
<p>A list item.</p>
</li>
<li>
<p>Another list item.</p>
</li>
</ul>

<ol>
<li>
<p>A list item.</p>
</li>
<li>
<p>Another list item.</p>
</li>
</ol>

In the above lists, the list items have paragraph spacing. The area taken up with each list as a whole will contain the specified background image. The list items will have a yellow background, which covers the image wherever the list item text is printed.

Now you have a lot of tools related to using background colors and images to help you design web pages.

• 1 Comment

Background colors and images can be used for stylistic effects and can be an important element in the design of web sites.

With standard HTML, one can assign backgrounds to a web page and to tables and table data cells. Compared to what one can do with CSS, however, HTML is limited.

With CSS, background colors and background images can be applied in many different ways.

1. The web page’s background, in any of the following manners:
   1. Background color (like standard HTML).
   2. Tiled image (like standard HTML), where the image is repeated across the top and row by row until the entire web page background is covered.
   3. Not repeated, the image printed just once. The image can be positioned anywhere in the window.
   4. Repeated across the top of the web page for one row.
   5. Repeated along the left side of the web page for one column.
   6. Fixed in position with the web page contents so the background image remains in place while the page content scrolls over the top of it.
2. The background behind divisions of the web page, within DIV tags.
3. The background behind tables.
4. The background behind sections of text content.
5. The background behind INPUT and TEXTAREA form elements.
6. The background behind ordered and unordered lists.

This article will address only web page backgrounds. Part two will address the others mentioned above.

You probably already know how to create background colors and background images with standard HTML. As a refresher, the color and/or image URL are specified in an attribute of the BODY tag. Here are the methods, the first a yellow background color, the second specifying a background image:

<body bgcolor="yellow">
<body background="image.jpg">

The bgcolor attribute provides the color, as expected. The background attribute provides the image, but tiled to cover the entire background of the window.

Now, let’s see what you can do with CSS!

The CSS examples in this article are provided in the format used when the styles are defined in the HEAD area of a web page. For site-wide implementation, you can use an external file for the same effects.

Background Color

Here is the method of specifying a page background color. For single page, put this in the HEAD area. For site-wide implementation, you’ll probably want to put the style into your external CSS file.

<style type="text/css">
<!--
BODY { background-color: yellow; }
-->
</style>

Changing the color name (or changing the #ffff00 hexadecimal equivalent), will change the background color of the one page or all pages using an external CSS file.

Tiled Image

This will put a background image into your web page, the image repeating across the top, row by row, until the web page background is covered.

<style type="text/css">
<!--
BODY { background-image: url(image.jpg); }
-->
</style>

The URL can be specified as relative or absolute. The following are all valid formats:

url(image.jpg);
url(graphics/image.jpg);
url(http://domain.com/pictures/image.jpg);

Image Not Repeated, With Exact Positioning

This will print the background just once, placing it in the top-left corner of the web page.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
}
-->
</style>

To position the image in a place other than the top-left corner, use the background-position label. For example, this will print the background image at the right-top of the web page.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: right top;
}
-->
</style>

The words you can use for positioning are:

top bottom left right center

Note that the above words apply to the entire web page, not just the browser window. Thus, “bottom” means the bottom of the page, not the bottom of the window.

Positioning can also be specified by distance measurement and by percentages.

This style will place the top left corner of the image 400 pixels in from the left page margin and 100 pixels down from the top page margin.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 400px 100px;
}
-->
</style>

And this style will calculate the distance 10% from the left and 20% from the top.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 10% 20%;
}
-->
</style>

Calculation is done using both the dimensions of the page and the dimensions of the image, the same percentage of each. The point 10% in from the left of the image will be placed at the point 10% from the left of the web page. And the point 20% from the top of the image will be placed 20% from the top of the web page. It can be a hard concept to grasp without a drawing. But try it, specifying different percentages until you gain an experiential understanding.

Background Image Repeated Across the Top of the Web Page

This style will repeat your background image across the top of the page, one row.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: repeat-x;
}
-->
</style>

Background Image Repeated Along the Left of the Web Page

This style will repeat your background image along the left of the page, one column.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: repeat-y;
}
-->
</style>

Background Image Does Not Scroll When Web Page Scrolls

To make your background image stay in place while the web page contents are scrolled over the top, use this style:

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-attachment: fixed;
}
-->
</style>

An Application

Let’s suppose you have a nice little image of a flower. You want it for a background, printed in a row along the top of your web page. The flowers should stay in their fixed position when the rest of the web page content scrolls.

It can be done this way:

<style type="text/css">
<!--
BODY {
background-image: url(flowers.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}
-->
</style>

Knowing how to use and position background images can enhance web page design.

See part two for ways to use background colors and images in the web page content itself.

• 2 Comments

Introduction

What is CSS? – I hear some of you ask. Well, CSS stands for Cascading Style Sheets and they have been around since the early 1990’s believe it or not.

The Wikipedia definition (changed so that it makes sense!) is as follows:

CSS (Cascading Style Sheets) is a language that describes the presentation
form of a structured document.

An XML or a HTML based document does not have a set style, but it consists of
structured text without style information. How the document will look when printed
on paper and viewed in a browser or maybe a cellphone is determined by a style
sheet. A good way of making a document look consistent and easy to update is by
using CSS, which Wikipedia is a good example of.

So, why should we use CSS?

There are many benefits of utilising CSS on your web pages. Before you skip to the disadvantages, I can tell you now that the advantages easily outweigh the bad points. Below is a short, descriptive list of reasons to make the change:

• Save on bandwidth

  The more HTML code you use, the large the file size of the page. It doesn’t take a genius to work that one out – so the most obvious solution is to cut down on the amount of HTML (something that Yahoo! might want to consider sometime, probably saving them £100,000’s). CSS will certainly help to cut down on the amount of code you use, for example, replacing all of your <font> tags (which are now obsolete by the way) with simple style declarations.

  In reducing your file size, you will in turn reduce the amount of bandwidth your website consumes each month, hopefully saving you money. Typically, a heavy HTML coded website can measure up to 80KB’s in size (without taking images or other media into consideration) – using CSS can cut down the file size by approximately 30-40% – a potentially massive saving if your website is popular. To find out how much bandwidth you would save, check out this bandwidth calculator, provided by CJ Website Hosting.

• Cleaner, clearer looking code

  Usually, CSS code is written in an external style sheet – you can however, use inline styles. Because of this, not only will your page load faster because a) external files are cached by most browsers and b) a stylesheet loads in unison with your web page – it also makes for much cleaner, clearer code.
  Still not convinced? Take the example below as hard evidence:

  This code is written without CSS:

  <table border="0" width="100%" cellpadding="10" cellspacing="0">
  <tr>
  <td>
  <font face="verdana" size="7" color="#C71585">
  <b>Welcome to my website</b>
  </font>
  </td>
  <td align="center">
  <font face="verdana" size="7" color="#00FFFF">
  My website is entirely written using HTML, nothing else.
  </font>
  </td>
  </tr>
  </table>

  You can achieve exactly the same result using the following CSS…

  body
  {
  font-family:verdana,arial,helvetica;
  font-size:100%;
  }
  h3
  {
  font: bold 140% verdana;
  color:#C71585;
  }
  #content
  {
  color: #00FFFF;
  }

  …and the following (tiny piece of) HTML code:

  <h3>Welcome to my website</h3>
  <div id="content">
  My website is written using the latest in web technology!
  </div>

  Much nicer, I’m sure you’ll agree.

• Easy to update = less time consuming = cheaper to maintain!

  If you use an external CSS file (which I advise you to do), simply changing the style declarations in this one file will allow you to change the appearance of your entire website. For instance, in the example above, you could quite easily instruct the browser to render the heading tag to the right of the page or you could make the content wrap at 100 pixels – all by changing the CSS. Don’t get me started on what you can achieve with bulleted lists!

• Accessible pages and DDA compliance

  Visitors who are blind or visually impaired will prefer a CSS designed website far more than one not using CSS.

  This is due to the fact that CSS follows web standards endorsed by the World Wide Web Consortium. Because of this, special web browsers (such as text only browsers which read the content out-loud to the visitor) can interpret the content on the page.

  CSS will help make your website DDA compliant. The DDA is the Disabilities Discrimination Act, the Act makes it “unlawful for a service provider to discriminate against a disabled person by refusing to provide any service which it provides to members of the public”, specifically mentioning websites.

  Another benefit of using CSS is variable font sizes. CSS will allow you to specify a font size as a percentage, doing so will allow visitors with poor eye sight to enlarge the text size. Tip: Try increasing the font size of a page by holding down ctrl and scrolling the wheel of your mouse (if it has one). You will notice that most websites do not allow you to increase the font size (unless you are using the Firefox browser which forces it) because they use pixel measurements. And those that work but use <font> tags (such as Google) are actually breaking the accessibility guidelines.

  Generally, websites designed in css are accessible on all sorts of devices including mobile phones and PDAs. The majority of hand held devices will simply ignore the CSS, leaving behind a readable (but bland) web site behind. A table design however is likely to render too wide for the viewable region.

• Increase your popularity in SERPS!

  Sorry, there I go again with the acronyms. SERPS stands for Search Engine Result Pages – the set of links returned by a search engine in response to a user query.

  I can imagine that some of you are thinking “pull the other one! How can using CSS make my website rank higher in Google or MSN!” – well, extensive use of tables and obsolete tags can confuse search engine spiders which crawl your website for content. Some can even confuse code with content, although the major search engines seem to be very good at stripping out every possible HTML tag or JavaScript snippet – but it takes up valuable processing power that they would rather spend elsewhere.

  It doesn’t take a genius to work out that, like humans, the search engine will start reading from the top of your web page and just like humans they want to find out how relevant this page is as soon as possible – so cutting down the amount of code will make it easier for the robot to find the relevant text. Research suggests that you will also score “brownie points” with search engines for having standards compliant code that can be rendered across all mediums.

  Tip: A combination of well written HTML code, fully utilised CSS and unique, well referenced content is the key to a higher search engine ranking.

Disadvantages of using CSS

As previously mentioned, there arn’t any real disadvantages of using CSS – the pros far outweigh the cons. To put it another way, CSS ‘div based’ design versus table based design is a bit like comparing Liverpool Football Club to Gresley Rovers. There’s only ever going to be one winner and everybody knows it.

So on to the only disadvantage I can think of…

• Old browser issues

  Old browsers, such as the early versions of Netscape and Internet Explorer. may have a hard time displaying CSS, especially as CSS-2 is now available to use and only the most recent browsers support it.

  The solution? Download the latest browser! Which reminds me of potentially one more disadvantage; giving yourself a headache whilst attempting to get your website to look identical in Internet Explorer and Firefox – doh! Oh well, practise makes perfect.

In Conclusion

If you are interested in re-designing your website to use CSS, I would start by learning the basics. Find a simple CSS tutorial on the web and work your way through some more complex CSS examples. Then, have a go at doing your own! You will more than likely hit some problems with cross-browser compatibility but you should find help on webmaster forums such as those found at www.webmasterworld.com and www.sitepoint.com.

About the Author
James Crooke is a software engineer at CJ Website Hosting. Research interests include Object Orientated Web Applications, SEO and Accessibility in web design.

• 35 Comments

• InfoQ: System Integration Testing Using Spring – When it comes to system integration testing Spring adds real value. In this session, Rod Johnson discusses: integration testing and the support that Spring provides for it, issues around testing the persistence layer, testing web applications.
• InfoQ: BEA and Oracle incorporate Sun’s Project Tango – In a recent article, Sun’s director for SOA products, Kevin Schmidt mentioned the fact that both Oracle and BEA have incorporated Sun’s Web Services stack, Project Tango. Tango is MS .NET 3.0 interop
• InfoQ: Using Java to Crack Office 2007 – With Office 2007, no third-party libraries are necessary-a Java application can now read and write any Office 2007 document, because Office 2007 documents are now nothing more than ZIP files of XML documents known as the OpenXML
• Welcome to jXLS – jXLS is small and easy-to-use Java library for generating Excel files using XLS templates. Also jXLS can be used to read XLS files and populate Java beans with spreadsheet data according to XML configuration file
• How To Read / Write Excel Spreadsheet From Java – Both JExcelAPI and Jakarta POI (HSSF) are open source software to read & write data from / to Excel spreadsheet even on non-Microsoft platforms. In my tests HSSF came out to be the clear leader and recommended solution because of robustness and features.
• Eloquent JavaScript – Eloquent JavaScript is a hyper-book providing a comprehensive introduction to the JavaScript programming language. Apart from a bookful of text, it contains plenty of example programs, and an environment to try them out and play with them.
• http://www.ietf.org/internet-drafts/draft-ietf-atompub-protocol-17.txt – The Atom Publishing Protocol (APP) is an application-level protocol for publishing and editing Web resources. The protocol is based on HTTP transfer of Atom-formatted representations. The Atom format is documented in the Atom Syndication Format.
• F1 News – Grandprix.com – One of the big problems with the ongoing Stepneygate Affair is that there is a huge amount of hearsay, but not a great deal of fact
• YUI 2.3.0: Six New Components and a Prettier Face » Yahoo! User Interface Blog – We’re pleased to announce the release of YUI version 2.3.0. This release features six new additions to the library as well as a new skinning architecture and a new visual treatment for most of our UI controls – plus 250 enhancements and bug fixes
• Greg the Architect : Episodes – Find out what happens when Greg tries to swallow three different SOA pitches in one day. Will he save the day, or will Greg have to chuck the project?
• Dr. Dobb’s | Java Message Service | July 2, 2007 – SOAP-based web-service development continues to grow, and uses XML and HTTP to remove the implementation details from remote procedure calls. But while SOAP has broken new ground in distributed computing, message-oriented middleware such as the Java Messa
• Plans for the Rich Web Application Backplane – Both mashups and Ajax are now firmly entrenched in the Web landscape. Put them together and you have the makings for Rich Web applications. This article explains the Rich Web Application Backplane, currently a W3C Note, which is designed to bring standard
• 10 things I learned about using Hibernate/JPA successfully by SpencerUresk – I decided to share a few things I learned about using Hibernate/JPA in a large project with a complicated database setup
• OpenJPA no longer requires bytecode processing – Historically, OpenJPA required that you either run a post-compilation tool or run your application with a javaagent. The latest build of OpenJPA removes this restriction by providing various levels of support for unenhanced classes.

• 0 Comments

• Apache CXF: Interview with Dan Diephouse and Paul Brown – O’Reilly ONJava Blog – I recently had a chance to sit down with both Dan Diephouse and Paul Brown of Envoi Solutions to discuss the merger of XFire and IONA?s Celtix project into a new project, Apache CXF, currently under incubation at the Apache Software Foundation.
• Easy Ajax using Struts 2 – Kb – Struts 2 makes it easy to implement and test an Ajax Java Web application, using standard javascript frameworks such as Prototype. This wiki article gives technical notes on how to kickstart your Ajax Java development.
• Web Worker Daily » Blog Archive 12 Ways to Use Facebook Professionally « – Let?s look at 12 ways Facebook can benefit the web worker, particularly those who are home-based. The more connected you are to your co-workers and clients without being intrusive, the better your working relationship.
• AJAX Magazine: YSlow Helps You Speed up your web pages – Yahoo! released an excellent performance utility on YDN called YSlow, to help you understand why your pages are slow. YSlow is a Firebug addon
• Agile Ajax: Review of GWT in Action – The book does cover many of the new features in GWT 1.4, such as Image Bundling, the new loading mechanism, and the Serializable vs IsSerializable changes. As I’ve said, overall a fine effort.
• High Performance WordPress Presentation « Barry on WordPress – The slides from the HyperDB and High Performance WordPress presentation are now online via SlideShare
• Web page to PDF Firefox extension – LOOP is a unique extension for Firefox that converts the web browser into a proper PDF writer that can do some amazing things sometime not possible in other free PDF conversion software
• Work Together: 60+ Collaborative Tools for Groups – With businesses and families spread out more and more, we?ve dug up 60+ sites that will help everyone be on the same page
• InfoQ: Presentation: Introduction to Component Based Architecture – Mark Miller delivered an introduction to Component Based Architecture. In this presention he shares tips and tricks focused on maximizing the development strength of your team
• InfoQ: Using ETags to Reduce Bandwith & Workload with Spring & Hibernate – ETags are used in conjunction with the “If-None-Match” header on a GET request to take advantage of the browser cache. Because the server generated the ETag in the first place, it can use it later to determine if the page has changed.
• InfoQ: Bridging the gap between BI & SOA – To summarize, implementing a BI solution by using EDA and SOA is superior to using traditional ETL. Not only do we get our basic BI, but we actually get better, real-time BI?not to mention improvement in the overall quality of our SOA.
• How risk management affects agile approaches | confused of calcutta – Once you switch focus from content to process, agile techniques don?t stand a chance. Agile in a ‘content’ perspective leads to the Baconian ‘A man that starts with doubts shall end in certainties’; … These two positions are polar opposites
• Json-lib 2.0 released – I’m pleased to announce that Json-lib version 2.0 has been released. JSON-lib is a java library for transforming beans, maps and XML to JSON and back again to beans and DynaBeans

• 0 Comments

Ajax examples (XMLHttpRequest examples), code snippets and proof of concepts – the links below should help get you started on building your own functions with XMLHttpRequest and Ajax.

Loading XML into a page with xmlHttpRequest

A cool little blog post and demo that Retrieves an xml atom feed and xsl stylesheet with XMLHttpRequest().

XMLHttpRequest, REST and the Rich User Experience : Paul James

Paul James gives the basics of getting started with XMLHttpRequest and using REST for attaching the client-side to the server.

He builds an example where, upon entering a postal code and pushing a button, a form queries the server for the rest of the address information and fills in the appropriate fields when the data is returned.

Using the XML HTTP Request object

Jim Ley provides his overview of the XML HTTP request object, getting into some browser details and detection before providing some examples and getting into using XMLHTTP with google’s SOAP API.

Very Dynamic Web Interfaces – XMLHttpRequest

Drew McLellan provides an excellent overview of the basics of using XMLHttpRequest offering up a simple, well documented example used for checking if a username is available (similar to g-mail).

Client Side Validation Using the XMLHTTPRequest Object

An example of using XMLHTTP to perform real time data validation, in this example for validating data entered into a user registration form. The example focusses on Microsoft and ASP.

XMLHttpRequest Demo

Three examples of XMLHttpRequest in use: autocomplete, live search, and live action.

To Do with Ta-da List: Simple sharable to-do lists.

A free web based to-do list application provided by 37Signals, makers of Basecamp. Sign-up and try it out; XMLHttpRequest in action.

XHConn – A Simple XMLHTTP Interface

From the site: This library is meant to simplify and unify the code necessary to successfully send and receive simple data via XMLHTTP.

XMLHttpRequest API madness

Two scripts that use XMLHttpRequest: 1 – a javaScript interface to the languid.cantbedone.org API and 2 – a javaScript interface to the del.icio.us API.

Dynamic HTML and XML: The XMLHttpRequest Object

Apples page on the the XMLHttpRequest object, covering object creation, methods and properties in addition to security issues. They build an example for reading XML data, by retrieving iTunes RSS feeds that you select from a dropdown menu.

LiveSearch – Bitflux Blog Wiki

The wiki page for the livesearch function. From the page: On the client side, we use XMLHttpRequest for sending the request to the server. There we have a little PHP script, which returns a small HTML file (http://blog.bitflux.ch/livesearch.php?s=PHP ) . This is then inserted into the page with some DOM manipulation.

XMLHttpRequest and innerHTML

XMLHttpRequest is one of modern DHTML’s best kept secrets. – Haha, not anymore! Simon Willison offers up a little code that takes an HTML fragment, fetched via xmlhttp.open, and inserts it into an element with a specified id. Some good links and comments follow the article.

Google Suggest feature with ASP.NET 2.0

This article provides an ASP.NET 2.0 angle of Google Suggest along with a short little look at the history of javascript, frames, remote scripting and XmlHttp + XMLHttpRequest.

A nice overview of the history and a good breakdown how the Suggest feature works.

SAJAX – Simple Ajax / xmlHTTPRequest Toolkit for PHP

From the site: Sajax makes it easy to call PHP functions from your webpages via JavaScript without performing a browser refresh. Worth checking out and having a play with.

Amazon Zuggest

From the site: This is my take on Google Suggest only with Amazon so I’ve called it “Amazon Zuggest”. Head on over and give this a try.

Francis writes “The Javascript runs in the browser and fires every so often, looks for something to search on, it shoots a request using XMLHttp to my webserver, which in turn creates a SOAP message that gets sent to Amazon. They send back the content and it’s formatted on the server, then streamed to the browser. All in the blink of an eye.

This is a cool little app. When you are done searching, have a hover over the “History” list in the left hand column… The site comes up a little messy in Firefox…

Instant Edit

Manolo Guerrero sets up a little app that allows you to click on a form field and edit the text, which is automatically saved to the server via xmlHttpRequest. Worth a look, though the commented Javascript is in Spanish.

AJaX for weblogs

A neat little script to play with (not sure what it has to do with weblogs especially tho). From the site: It uses Javascript to get data from a remote source and then loads that into a specified target. Whatever content you like to wherever you like on the page.

AJAX Login System Demo

A proof of concept, Ajax based login script that, in this case, uses a php/mysql backend. The author provides all of the scripts involved and lists some advantages and dis-advantages of his method.

Usable XMLHttpRequest in Practice

Thomas Baekdal gets back into accessibility and Ajax. From the site: Let’s look at what we can do to turn an otherwise user-hostile XMLHttpRequest application – into a usable one…. An excellent write-up.

XHTML live Chat via XMLHttpRequest

An excellent proof of concept and something I was waiting for someone to code up ;-). This XHTML live Chat uses XMLHttpRequest to post chat messages and to periodically check the server for new messages and update your chat window.

This is simply a proof of concept, and would work really well in a blog commenting setting or for forums when those fast threads start happening.

Ripped Tickets – Live Search

Here’s an excellent application of the livesearch idea that has been seen around the web. Type in your search (a band name) and the results show up in a nice table below the search box.

Running XMLHttpRequest with Java on Google’s API

Similar to other livesearch functions out there, only this one plugs into Google’s API and has a Java backend, returning a list of results and descriptions for your query.

SproutLiner

From the site: Sproutliner is a free web service that helps you manage your projects and ideas. This tool looks to be very promising, and to be honest you have to try it out to ‘get it’. It is a sort of Ta-da list on steroids, so to speak, in that it is very simple yet a user can add to it and tailor it to their needs.

Very cool…

The Fonz uses XmlHttpRequest and AJAX to spy on you.

While makaing some excellent points in the article, the little adventure game “The Search For Fonzie’s Treasure” built using Ajax technologies is pretty cool. The author discusses user profiling as an “evil use” of Ajax. I’m not so sure that I would say that it is evil…

Backbase – Rich Internet Applications

A very impressive piece of Ajax work, with some context provided here. Have a click thru the site and try out that back-button. Also be sure to head in and check out the demo section.

• 0 Comments

PPC ads like Google AdSense and Clicksor are a great source of income for many web site publishers.

You sign up and put the ads on your web sites. They deliver the ads live, with each page load — ads relevant to the content of the page the ads are delivered to. (Well, sometimes they aren’t so relevant, but they try.)

The ads are delivered from the inventory of ads they have available.

What happens when no ads are available depends on the PPC ad distributor. AdSense delivers non-profit (non-paying) ads. I don’t know what Clicksor does.

Both of those organizations, however, allow you to specify content to display whenever they don’t have sufficient relevant ads in their inventory. Instead of their ads, they display your ads.

I will show step by step how to make those alternate ads so they fit within the space allotted for the PPC ads.

You’ll be able to deliver your own ads, paying ads or your personal selection of non-profit ads, whenever AdSense or Clicksor inventory runs out.

Step 1
Create a web page that will contain your ad. A style in the head area should specify zero margins.

Here is an example:

<html>
<head>
<style type=”text/css”>
body { margin:0px; font-family: sans-serif; }
p { font-size:14px; line-height:18px; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
</style>
</head>
<body bgcolor=”white”>
<p>
This is the best!
</p>
<p>
<a href=”http://example.com”>Click Here!</a>
</p>
</body>
</html>

The ad on the web page can contain any content a normal web page could contain — text, images, Java, forms, and so forth — so long as it fits within the allotted ad space.

I’ll show you an easy way to tweak for the fit.

Step 2

Make a separate, temporary web page to be used for tweaking the ad web page. The temporary web page will contain an iframe tag, which is the “secret” for quickly and easily adjusting the content on the ad web page.

The iframe tag is the same dimension as the allotted ad space. Let’s assume a 250 x 250 square space for our example:

<html>
<body>
<iframe
src=”http://example.com/adpage.html”
width=”250″
height=”250″
frameborder=”1″
marginheight=”0″
marginwidth=”0″
scrolling=”no”>
</iframe>
</body>
</html>

The iframe has a border so it’s easier to tell how much more space the ad web page can occupy, or where the excess content is cut off.

Put your ad page URL in the src attribute (in place of http://example.com/adpage.html).

Adjust the width and height when designing ads of different sizes.

(This temporary web page may be kept on your computer’s hard drive, handy for when you want to tweak the size of another web page ad.)

Step 3

Load the temporary web page into your browser. The ad web page will load into the iframe.

Adjust the ad web page as needed until it fits nicely in the iframe. Test in various browsers, especially the two most popular ones, IE and Firefox. Different browsers render content a bit differently, even when CSS styles are used.

Step 4

Upload the ad web page to your server and make a note of its URL.

Step 5

Tell the PPC ad distributor the URL of your alternate ad web page. This is done by specifying the URL in the JavaScript code that delivers the ad.

The following apply as of this writing.

AdSense:

For AdSense ads, the ad web page URL can be specified when you generate the ad code. The URL will then appear in the generated JavaScript between the quote characters of this line:

google_alternate_ad_url = "";

Clicksor:

For Clicksor ads, put the URL of the ad web page between the single-quote characters of this line:

clicksor_default_url = '';

If the line isn’t in the code obtained from Clicksor, it can be inserted.

Ads of Different Sizes

Make an alternate ad web page for each PPC ad size on your web site.

Once set up, you can display ads that make you money even when the distributor is out of inventory.

• 0 Comments