Archive for the ‘XHTML’ Category

04 Feb 2011

HTML Elements Testing Template

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.

Tags: , , , , , , , , , ,
Posted in HTML5, Templates, Tutorials, Typography, XHTML | No Comments »
08 Jan 2011

Modernizr, how to detect HTML5 and NEWT with Javascript

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

What is Modernizr?

Modernizr adds classes to the <html> 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 <section>, <header> and <dialog> 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.

Tags: , , , , , , , , , , , , ,
Posted in HTML5, JavaScript, XHTML | 1 Comment »
22 Aug 2009

Google AJAX API and jQuery integration, bandwidth free!

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. Read the rest of this entry »

Tags: , , , , , , ,
Posted in Google, jQuery, Tutorials, XHTML | 5 Comments »
10 Aug 2009

BlueEarth 001 Free XHTML / CSS Template

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

BlueEarth 001 Large Preview

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.

Tags: , , , , , , , , , ,
Posted in Templates, XHTML | 1 Comment »
05 Jul 2009

Favicon – Do It Yourself, The Right Way

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.

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.

nukleeur

Open the image in Photoshop and select the crop tool.

crop1

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.

crop2

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.

crop3

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.

crop4

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.

crop5

Tags: , , , , , ,
Posted in Miscellaneous, Photoshop, XHTML | No Comments »
05 Jul 2009

Search Input Form Forecast – Blurry With A Chance of Rain

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.

1
2
3
4
5
6
7
8

<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 <fieldset> and <label> 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.

Tags: , , , , , , ,
Posted in XHTML | No Comments »
Page 1 of 11

Latest Posts

The United West

March 29th, 2011 by Tim Selaty

WordPress 3.1 Helicon ISAPI_Rewrite Rules and Permalink Structure

March 6th, 2011 by Tim Selaty

One of my clients is using WordPress on an IIS server and is using a product called “Helicon” (more…)

WordPress 3.1 Upgrade – Frontend Blank Site, Backend Okay (IIS)

March 6th, 2011 by Tim Selaty

Shoot. You just upgraded your WordPress installation to the latest version (3.1 for me) and all of a (more…)

CodeIgniter HTACCESS remove index.php and add trailing slash

February 18th, 2011 by Tim Selaty

Here is a quick HTACCESS snippet that will add the trailing slash (ex: http://domain.com/mycontroller to http://domain.com/mycontroller/) and will (more…)