This is my first attempt at creating a jQuery plugin.
I used something like this with mootools on my Senston Homes site. But i simplified it and made it a plugin for jQuery (who the heck uses mootools anymore?) Basically, this plugin resizes a backround image to fill the browser window while maintaining it’s proportions. Kind of cool if you want to do some translucent divs over top of it or something.

Just put this HTML in a page:
[cc lang="html"]
"http://www.w3.org/TR/html4/loose.dtd">

[/cc]

All you need to make it work is to include your background image, jQuery, and the jquery.backsizer.js files and you’re good to go.

View Demo Here

backsizer-demo.zip

These days more and more content is available on the web. First it was just text…it wasn’t that interesting to most people, but it was pretty amazing that information could be shared, linked, and read all over the world. Then came images and people started to really take notice of this thing called the “internet” and “websites”. Everyone wanted to get their “Webset on the Internite”. People realized that the web could be used to make money! You could sell stuff and advertise… the possibilities were endless.

Now we have more types of content like video, audio, flash, and games. As the web grows in popularity and browsers and computers continue to improve, more and more types of content will be available. However, these types of content all have one thing in common… they are all displayed using HTML.

What is HTML?

HTML stands for Hyper-text Markup Language. There’s a long and boring history of where HTML came from and who invented it, but I wont go into that here. I’m just gonna take a few minutes and explain what a Markup Language is.

Imagine that it is 1776 and you work at a small printing press in Philadelphia writing political articles that go out to the colonies. Your boss (we’ll call him Ben) comes in with this 10 page article written with a feather quill all in the same size penmanship in one long run-on sentence that you can barely read, and says: “I need you to get this marked up and to the typesetter by tomorrow morning.”

Now, there are a few things that you should know about the typesetter. First, he can’t read. He simply takes the manuscript and puts the letters in the right patterns on the press, the words have no meaning to him. Second, because he can’t read he has no concept of page structure. He can’t tell the difference between a heading and a sub heading, a paragraph and a quote, or an address and a list. Lastly, even if he did know how to read, and could tell the difference between the different elements of the page, he would have no idea what the page should look like. He wouldn’t know what size of type to use for a heading, nor would he know how much leading to put between lines of a paragraph, or what color of ink to use.

Your job is to comb through the manuscript and put little symbols throughout the document, giving the typesetter instructions so he can distinguish between a heading, paragraph, a quote, a list, etc. Then, you would need to give him a key that would explain your symbols, and indicate what styles you would want to use for the different symbols. Let’s say you come up with the following “tags” to mark up the manuscript.

Your job would be to take this:

And put your markings on it like this:

Now when the typesetter gets it in the morning he will know how to format and style the text on the printing press. Well talk more about style in a bit…

Ok so now we have a good idea of what “Mark up” is and what it means… heres a good definition of a mark up language:

A markup language is a system for annotating a PORTION text in a way which is syntactically distinguishable from the REST of the text.

Semantic Markup

In the web design world it is said that we need to use “Semantic Markup”. So lets talk about that for a sec…
Semantics is the study of meaning and semantic markup literally means “Meaningful Markup”. In the context of a web page, it means “Make sure your markup describes WHAT the content IS, not WHAT the content should LOOK LIKE.” Here’s an example of semantic markup (these are not valid HTML tags)

Benjamin Franklinwas born in Massachusetts. Later, he moved to Philidelphia and started the Pennsylvania Gazette.

In HTML, these some basic tags that we have to choose from to give our content meaning.

• <h1> – Main Heading
• <h2> – Sub Section Heading
• <h3> – Sub Sub Section Heading
• <h4> – Even Subber Heading
• <h5> – Subberer Heading
• <h6> – Subbest Heading
• <p> – Paragraphs
• <em> – Emphasized Content
• <strong> – Strong Emphasis on Content
• <code> – Computer code
• <a> – Anchor (link)
• <ul> – Unordered List
• <li> – List Item
• <ol> – Ordered List
• <q> – quote
• <blockquote> – longer quote
• <address> – address

These are just some to get you started for a complete reference see the resources at the end.

Lets see how you do… Take this text and Mark it up!

Benjamin Franklin

Introduction

Benjamin Franklin was one of the greatest of the founding fathers, and my personal favorite. He was one of the founding fathers of the USA. Franklin was the 10th son, and 15th child of 17 children in his family; his father made soap. Although he was born in Boston, Massachusetts, Franklin spent most of his life in Philadelphia, Pennsylvania.

Franklin was a delegate to the Continental Congress from Pennsylvania, and helped write both the Declaration of Independence and the US Constitution; he signed both of these historic documents. He also helped negotiate the peace with Britain at the end of the Revolutionary War in 1783. Although Franklin had only one year of formal education, this self-taught man helped the colonies become a nation. He was: an inventor, a scholar, an author and printer, satirist, political theorist, politician, scientist, inventor, civic activist, statesman, soldier, and diplomat. Many of his inventions are still used today. Late in his life, Franklin was the President of the “Pennsylvania Society for Promoting the Abolition of Slavery.”

Ben Franklin the Writer. Benjamin was a very good writer and is quoted all the time. My favorite quote is: Those who would give up essential liberty to purchase a little temporary safety deserve neither liberty nor safety. He wrote thousands of small articles, letters, and pamphlets that are still read heavily today. Ben Franklin the Statesman. As a statesman, Franklin represented Philadelphia at the Albany Congress, where he proposed that the colonies unite under an elected council, among others.

He spent many years in England as a diplomat before the American Revolution, in an attempt to reconcile differences between Britain and the colonies. Among other important matters he was involved with, he helped draft and sign the American Declaration of Independence. Franklin was one of the signers of the peace treaty in Paris, France, that ended the Revolution.

Other work. He worked in Philadelphia as printer, publishing the popular and witty Poor Richard’s Almanac. He also made a number of inventions, and initiated a great many improvements in Philadelphia, including a fire company, a university, and a library.

Now, if you’ve done this right, like the typesetter… search engines can now tell a lot more about your web page. They can tell what the page is about by looking at the <h1> tag, and give the appropriate level of importance to sub headings, lists and paragraphs. This is only the start… at the time of this writing we use HTML 4 which has a very limited amount of meaningful tags. HTML 5 is on the horizon with tags like:

• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>
• <audio>
• <video>

Understanding what markup is fundamentally can help you become a better web designer, and help search engine optimization.

Things to remember from this article:

• Text, images, video, and audio make up the CONTENT part of modern web design
• We wrap the content in “Mark Up” using “tags” to be able to distinguish parts of content from the rest of the content.
• The “Mark Up” that we use is “Semantic”. Meaning that it describes what the content is, not what the content looks like.

http://www.mezzoblue.com/downloads/markupguide/

http://blue-anvil.com/archives/guide-to-semantic-mark-up/ ]]> http://buckyflowers.com/106/feed/ 1 http://buckyflowers.com/overstock-com-mobile-goes-live/ http://buckyflowers.com/overstock-com-mobile-goes-live/#comments Wed, 11 Nov 2009 15:25:45 +0000 buckyflowers http://buckyflowers.com/?p=102 After a few short months Overstock.com now has a Mobile site. I used the jQtouch framework for the animations, etc. It is optimized for iPhone and iPod touch… but displays well on Android and Palm Pre (webkit browsers)

My favorite features about the site are the buttons which use a border-image that goes transparent when tapped to reveal a spinning gif as a background image… I thought that was a good solution to having an active state and a loading indicator. Also, it looks great in both orientations: portrait and landscape.

Were still working out bugs and small display errors… but we had really pressing deadlines to get this up for the Holiday Season.

I would love to hear any feedback…