TLS Web Solutions » XHTML

HTML Elements Testing Template

Tim Selaty — Sat, 05 Feb 2011 02:55:30 +0000

Testing HTML elements is a web designer must

Let’s say you’ve got a brand new HTML template you’ve just chopped up from a Photoshop document. You’ve styled the body content’s footer, headers, paragraphs, and maybe some pseudo lipsum text that match the Photoshop document. But when you hand it off to a developer to integrate into a content management system, is it ready for all the variable content HTML has to offer?

There’s one way to be sure templates are up to the snuff, and that’s making sure you’ve tested as many basic HTML elements that can be fit into editable content regions. HTML5 Boilerplate is a “professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site” and gives quite a few documents for HTML designers to work with when building templates.

One of the files HTML5 Boilerplate provides is a demo HTML page of various HTML elements including: form labels and inputs, paragraphs and headings, tables, strong and em, captions, lists, and much more.

I’ve stripped down the demo page HTML5 Boilerplate provides down to just the elements and none of the head, body, and other stuff. You can view the DEMO PAGE or download it below.
Be sure to leave the commented credit to HTML5 Boilerplate where credit is due.

VIEW THE ELEMENTS TESTING TEMPLATE (13kb)

DOWNLOAD THE TEMPLATE (4kb)

Downloaded 283 times.

Modernizr, how to detect HTML5 and NEWT with Javascript

Tim Selaty — Sat, 08 Jan 2011 19:18:06 +0000

Original Site: http://www.modernizr.com/
Reblogged by Tim Selaty, Jan 8th, 2011

What is Modernizr?

Modernizr adds classes to the element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any Javascript to use it.

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.

Lastly, Modernizr also adds support for styling and printing HTML5 elements. This allows you to use more semantic, forward-looking elements such as

and without having to worry about them not working in Internet Explorer.

What Modernizr doesn’t do

Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities.

However if you’re interested in that, you’ll probably want to look here: HTML5 Cross browser Polyfills.

Who uses Modernizr?

Twitter,
American Eagle,
Burger King,
The Knot,
Capital One,
Posterous,
NFL,
The State of Texas,

Good Magazine,
UC Santa Cruz,
Made By Many,
Hardboiled Web Design,
Lost World’s Fairs,
Clusterr,
LittleIpsum,
and
Strategy Design & Advertising

Find out more about Modernizr.

Google AJAX API and jQuery integration, bandwidth free!

Tim Selaty — Sat, 22 Aug 2009 19:45:29 +0000

As we all know Google has released some pretty nifty things in the past. Today, we’re going to look at one of its most delightful additions for web developers. Google AJAX API.

What is Google AJAX API?

Google’s AJAX APIs let you implement rich, dynamic web sites entirely in JavaScript and HTML. You can add a map to your site, a dynamic search box, or download feeds with just a few lines of JavaScript.

In human terms, it loads common JavaScript frameworks such as MooTools, jQuery, Prototype, jQuery UI and of course even Google Maps without having to have the (.js) files on your server.

That’s great, but what does that mean for me?

Bandwidth, bandwidth, bandwidth, cache headers, and bandwidth.

Because jQuery, like images, must be downloaded onto the users computer before it can be used. If you have a slow server this can be a painful process especially if you use multiple JavaScript libraries.

Google is lightning fast, always. To have one, maybe two less items to download from your server not only saves bandwidth, but it saves you time. You don’t have to go to jQuery and download the latest version, upload it to your server, and type in the path to the (.js) file. You also don’t have to worry about having relative or absolute URLs due because of pretty URLs (seo friendly URLs).

You just add a two lines of code to the head of your template, sometimes even one, and you’re done. Google automatically sends a request to their server to download all of the JavaScript you’re requesting, cache the headers, and return it back to you.

Even better yet, the code is cleaner. You only need one line of code to load in multiple JavaScript libraries instead of your usual 3-5 lines of code.

Enough already, just show me how

Glad you asked. Below is the example XHTML page used to load in jQuery and execute a test function to ensure that it works.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">$(document).ready(function(){$(".expanded").hide();$("a").click(function(){$(".expanded").fadeIn(600);});})</script>
 
<p class="expanded">Who uses paragraphs anymore?</p>
 
<a href="#">Expand!?</a>

Now, we’ve loaded in jQuery and are able to get cracking away. However, what if we want to add more than one library? Simple. All we do is add another instance of google.load();. Below is an example with both jQuery and jQuery UI.

<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

Want to use the latest version of jQuery so you never have to update the code to match the latest version? No problem use this instead.

<script type="text/javascript">google.load("jquery", "1.3");</script>

What this says is: “Find the latest stable release that starts with 1.3.x”. In our case it automatically found v1.3.2.

Pretty nifty eh? What’s even better is that jQuery THEMSELVES are using Google’s server to call their own JavaScript library. If you view the source code of http://www.jquery.com/ you’ll see on Line 9 the following code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

This is also another way of calling jQuery from Google’s servers.

That’s it! Enjoy one less heavy server request.

BlueEarth 001 Free XHTML / CSS Template

Tim Selaty — Mon, 10 Aug 2009 10:36:32 +0000

BlueEarth is a XHTML / CSS template that utilizes various JavaScript effects using the jQuery framework.

The template is tailored towards a company providing a service such as hosting. The logo is raw text inside of an H1 tag and can be changed. The layout uses a fixed width of 950px, but the design can be adapted to any fixed width size. It was created to be fluid, however, the coda slider doesn’t support a CSS width percentage.

The theme comes with 2 HTML files

index.html
examples.html

The index.html is the screenshot you see above, while examples.html has numerous predefined styles showcased. The predefined styles range from alerts, dialogs, lists, and emphasis blocks.

Other features:

To navigation list items have example background (aka, perfect rounded corners no matter how big)
Rounded outer container (adjusts to users width preference)
Text-based logo and slogan
jQuery Coda Slider (click Solution by industry for example)
Valid XHTML 1.0 Strict
Valid CSS 2.1
Works in every major browser (Firefox 2+3, IE 7, 8, Safari, Opera, Chrome)

Download BlueEarth 001 Free XHTML / CSS Template
Downloaded 534 times.

Favicon – Do It Yourself, The Right Way

Tim Selaty — Mon, 06 Jul 2009 01:41:36 +0000

Don’t you love it when you’re browsing the internet and all of a sudden you come across the most slick website imaginable… and the one thing that stands out above everything is a kickass favicon?

What’s a favicon you ask? Click the “Faviwhat?” tab below.

Creating the Favicon
Show it off!
Faviwhat?

The creation:

You have a snazzy logo and want the icon next to the URL bar to match it. How you ask? Sit back, read, enjoy the ride. Oh, and I’ll throw in a couple snapshots too.

In this example, I’ll be using a quickly created logo for demonstrative purposes.

Open the image in Photoshop and select the crop tool.

Then, type “16px” in both the height and width fields in the top part of the screen. This will allow whatever you select with the crop tool in the next step, to automatically be adjusted and resized to 16×16. The reason why it’s 16×16 is because that is the standard Favicon size most widely accepted by all browsers.

Select the following area, this EXACT area will be your favicon upon accepting the changes.
Note: Make sure that at the top of your screen you have the ‘delete’ radio button clicked, and that after selecting the area you click the ‘Approve’ check mark on the top right part of Photoshop.

Now, export it into a web readable format. This is the important part. All favicon’s use a bit depth of 32 colors. Aka, if your cropped image has 60 colors, it’ll actually REMOVE any of those extra colors creating an undesirable effect. Let’s use a promised result by first clicking “Save for Web and Devices” or ALT+CTR+SHIFT+S for short.

Now, use the following settings and save the file as “favicon.gif”. After you have it saved, rename it to “favicon.ico” and that’s it! You officially created your own favicon using Photoshop from a logo. Not so bad, is it? What do you do with it you ask? Click the “Show it off!” tab above to see and grab the snippets of code that make this shining piece of work display next to the site’s URL.

The snippet, the problem, and the solution

So, we’ve got the icon, but what do we do with it? We insert it into the header of our HTML page.

First, using your favorite FTP Client (we recommend FileZilla) to upload the favicon to the ROOT of your site. Generally, this is the same place as your index.html is stored.

After the icon has been uploaded, we can now tell the webpage that when loaded, to look for this icon and display it in the browser. To do this, we need a snippet of code.

1	<link rel="shortcut icon" href="/favicon.ico" />

What this does is allows the browser to say “Find this particular file starting at the root of the site, check its bit depth… and if all is well.. set this image to be the shortcut and default URL icon for the site”.

Add the snippet above inside the HEAD tag and your site will now use the Favorite Icon (Favicon).

I did all that, why is it not showing?

One answer. Cache.

Most browsers (like FireFox) stores a website’s data, icons, etc in a caching system. When revisiting that site during the current session state it will try to use as many previous resources as possible. This includes CSS, JavaScript.. and as you guessed it.. images. Since your Favicon is indeed an image and your site didn’t have an image about ten minutes ago, it used a blank clear one instead and stored it for later use.

In order to see the updated version go to “Tools -> Clear Private Data” and ONLY check the “Cache” and “Offline Website Data” checkboxes. Then clear it and close FireFox. If it asks you to restore your previous session, start a new one.

Viola!

Enjoy adding that final touch to your already amazing website.

→ Download Source / Examples ←

Source ZIP Includes:

Nukleeur Logo
Favicon
HTML file with Favicon Snippet

What exactly is a Favicon and why don’t I have one already?

Favicon stands for “Favorites Icon”. It’s the little icon beside your site’s name in the favorites list, before the URL in the address bar, as a bookmarked website on the desktop, in the “Links” bar and on the windows taskbar.

If you don’t have one, this is because you have not specified in the HEAD element of your HTML pages to look for a favicon.

Still scratching at your head?

Here is Google’s favicon.

Search Input Form Forecast – Blurry With A Chance of Rain

Tim Selaty — Sun, 05 Jul 2009 23:39:55 +0000

For the longest time, I’ve always had to search far and wide for a single small snippet of code that allows the following in a text input box:

Default text that is displayed
When the user clicks in the text box, the text is cleared out only leave the precursor
If the user does not type anything and clicks away, it resets back to the default value

This technique uses two simple html attributes. ‘onblur’ and ‘onfocus’. This is most commonly associated with a search box and adds that final spice to a website. Here is the code, free of charge.

<form method="post" id="searchform" action="/">
<fieldset>
<label>Search:</label>
<input type="text" onblur="if (this.value == '') {this.value = 'Search...';}" 
onfocus="if (this.value == 'Search...') {this.value = '';}" 
value="Search..." name="s" />
</fieldset>
</form>

So what exactly IS onblur and onfocus? Javascript, default browser actions, and some super cool tricks. Let me explain…

The definition of “onblur” is “The onblur event occurs when an object loses focus”. An object is focused when you have it selected. For example, on the right hand of the screen near the top is our search box. If you click INSIDE of that box, your cursor is now placed inside and will have SELECTED that box. Upon SELECTING that box, it will activate the opposite of “onblur” which is “onfocus”. The event that is fired off when clicking or “focusing” in an object on the page is called “onfocus” and when clicking on any other object, which will deselect the currently selected object in favor for another is called “onblur”. Just think of a microscope zooming in and out of a 3-D page.

“I get how and why, but why is there a

and in there” you say? It’s for XHTML validation purposes. Always remember to have a Label for a form, and to wrap it in a fieldset if there are multiple forms on a page for maximum compatibility for different browsers and mobile devices.