Category: Web 2.0

HTML V, Part VI: What Time is it?

In part 1, we mentioned the <time> tag available in HTML5. The tag is pretty versatile, and allows  you to specify the date, as well as the time and timezone if desired. While every attribute in the tag is optional, if the datetime attribute is used it must be an exact, positive date on the proleptic Gregorian calendar – no partial dates (June) or negative dates (3 BC). At its simplest, we could write something like “it is now<time>3:56 PM</time>“. If you view the HTML source for this article, you’ll see that “3:56 PM” in the previous sentence actually is surrounded by <time> tags. Why doesn’t it look any different than the surrounding text? Like many of the new tags in HTML5,  isn’t intended to change how the webpage displays; rather, it provides additional semantic context that can be used when the page is interpreted. A calendar plug-in, for example, could detect the use of the time tag and use it to add an event to the user’s calendar. The Firefox Operator add-on uses this tag, among others; you can read more about Operator on the Mozilla blog. If I wanted to be more exact, I could say that I’m writing this blog post at<time datetime=”2010-7-12T16:08-07:00>Monday afternoon</time>. This gives the exact date, time, and timezone – in this case, UTC-7, Mountain Time.

Are You a Twit?

If you spend much time on the Internet, you’re familiar with twitter, even if you don’t entirely understand the appeal. Although it was started only four years ago, it’s now one of the most visited sites on the net. In fact, social media sites (Facebook, Twitter, etc) are now passing search engines as the most highly-trafficed sites on the Internet.  So what’s the big deal?

Twitter has a simple premise: what can you say in 140 characters or less? You could use it to waste time telling all your friends what you’re doing every minute of every day, but if you’re reading this, you’re probably more interested in how you can use it as a practical tool. So can you?

 

Twitter is the best-known example of what’s called microblogging; very space-restricted blogs. Like every other service ever made available on the Internet, people have used it for spamming links, and like most blogging software, it now uses nofollow links. In other words: linking to your websites on twitter won’t do anything for your search rankings. What it can do is help you bring in new customers and new business from your old customers.

For example, we often use our twitter page to let people know about new services we offer and articles that they might be interested in. At the time of this writing, the feed isn’t optimized yet; all it does is repeat the links from our Facebook page; thanks to Facebook’s linking feature, all you need to do is post a link and it’ll pull in the first paragraph of the linked page. Since we use descriptive permalinks, it’s easy to tell what the link is about even without other information..but isn’t there a better way?

By using a link-shortening service, we can add a description and still keep the total number of characters low enough to allow easy retweeting; retweeting is the process of forwarding on the message. For example, if we tweet “Awesome SEO article at xyz.com”, one of our followers might then tweet “RT: Awesome SEO article at xyz.com”, and maybe we get more visitors to this website.

There are several URL shortening services available, the most popular of which are probably bit.ly and tinyurl; twitter is also moving to wrap all links using their own t.co service. The downside of using these is that you can’t tell where the link is going without clicking on it; the upside is that it saves an awful lot of space!

So after optimization, we might announce the post on why pagerank doesn’t matter with something like this: “Why Pagerank Doesn’t Matter: http://bit.ly/cDbf56″. Short and to the point. And isn’t that what twitter is all about?

HTML 5, Part IV: Canvas

One of the hot new elements in HTML5, canvas allows you to draw graphics, generally using javascript. Remember that the canvas tag is not supported by IE8, so you’ll need to provide fallback content, like we did in the HTML5 video section, for IE users.

<canvas id=”id” width=”x” height=”width”> </canvas>

The width and height attributes, shown above, are both optional; unless specified they default to 300 pixels wide by 150 pixels high. You can set these using DOM properties or resize the element using CSS.

The canvas tag has not been implemented consistently between browsers. Notice that this isn’t a self-closing tag; text between the two tags will be ignored, so you would put replacement content there for browsers that do not support the canvas tag; leaving that space blank means that older browsers simply won’t display anything. Safari does not actually require the canvas end tag, but Mozilla does; thus the above style works for both as Safari simply ignores the </canvas>.

The WHATWG page has full documentation for this tag; unlike most other HTML, it requires some scripting to be useful. Rather than fully explore the tag, I thought I’d link to a few interesting sites that use it.

The HTML5 Canvas and Audio Experiment puts on an interesting light show (with sound, if your browser supports the <audio> tag). Notice the fallback text inside the audio tag in the page source, displaying an error message for browsers that don’t support it.

ball game – click the set of two or more balls of the same color to remove them. Can you get them all?

You can even use canvas to play a simplified game of Super Mario Kart!

LAMP, WAMP, MAMP

If you’ve been involved with internet content for any length of times, you’ve probably seen the term LAMP, which is an acronym for Linux, Apache, MySQL, and PHP. (For WAMP amd MAMP, replace linux with windows and mac, respectively).

What’s so special about these four things? They’re all you need to build a general purpose web server. (Sometimes Perl or Python will be used instead of PHP). Along with HTML/CSS and AJAX, you have all the tools you need to build interactive websites. So why do we use these technologies?

 

For one, LAMP is cheap. Linux, Apache, MySQL, and PHP are all free to download and use, and tend to be available on any halfway-decent web host. In most cases it’ll all be set up for you in advance, making it easy to get started.

Linux, of course, is your operating system; generally you’ll have the choice of hosting on either a linux or a windows box, but computer geeks tend to prefer linux.

Apache is a web server (actually, the most popular one in the world). It’s been around for over 15 years.

MySQL is a multiuser database management system using SQL, which is available under the GNU license. SQL is an easy-to-use relational database that forms the basis for most modern database systems.

PHP, which recursively stands for PHP Hypertext Processor, is a server-side scripting language that can be embedded into HTML; it’s generally used to create dynamic webpages.

When hiring a web design expert to create your dynamic website, you’ll want to be sure to find someone who’s familiar with all of the above technologies, as well as HTML (preferably HTML5), CSS, and possibly AJAX; together, these technologies allow you to create a clean, fully-functional interactive website.

HTML5, Part III: Local Storage

In the beginning, there were cookies. The cookies were tasty, and removed the need to log in to websites every time, although some people didn’t like them due to privacy concerns. But cookies were sent with every HTTP request, usually unencrypted, slowing down the session and possibly exposing sensitive information. Plus they could only hold 4 kb of data, which is fine for remembering someone’s username but not much more.

Then HTML5 appeared, and it had in its specification a new thing, Web Storage. Web storage was like cookies, but it was never sent to the remote server unless specifically requested, didn’t require a third party add-on, and was big enough to hold useful information. And this was good.

HTML5 storage is currently supported in the latest version of every major browser, but as we discussed yesterday, you can check if it’s available using the Modernizr script and the Modernizr.localstorage bool. Your size can use up to 5 megabytes to store your information, though you unfortunately have to store it as strings, which can greatly expand the size of your data.

There are two storage options you can use: sessionStorage and localStorage. SessionStorage information will be lost when the window is closed, while localStorage info is permanent (until deleted). The code is fairly simple:

localStorage.setItem(‘itemname’, ‘data’); // define and set the variable

localStorage.getItem(‘itemname’); // return the data; notice that this isn’t a complete statement as you haven’t done anything with the data. A complete statement would be along the lines of

alert(“Your data is ” + localStorage.getItem(‘userdata’);

If you don’t need the data anymore, you can get rid of it withlocalStorage.removeItem(‘itemname’);

SessionStorage works the same way; just replace “local” with “session” in the code above. You can also store content in an SQLite database and use standard SQL inside of your script:

database.executeSql(SQL command) {
// do something with the results
}

As with cookies, local storage comes with some privacy concerns. Anyone putting content on multiple sites (most likely an advertiser) could use the store to track a user across multiple sessions, building a fairly detailed profile. As with cookies, the user has the option of refusing to allow data to be stored or expiring it after a given amount of time. Additionally, it may be possible to access another site’s information through spoofing if SSL is not used. One restriction to be aware of is that multiple pages on one hostname (e.g., free website hosting such as the now-defunct geocities) share a local storage object, so any page can access and overwrite information stored by other pages on the same host.

On a side note, Google previously implemented similar functionality with Google Gears, but they are now abandoning it in favor of the local storage and geolocation options in HTML5.

HTML5, Part II: What Features Does My Browser Support?

Last week we dived right in to our discussion of  HTML5 with a quick tutorial on how to embed video, but we also mentioned that modern browsers support a subset of the new markup – no browser is yet 100% HTML5 compatible. So how can you tell (aside from running around looking up references) which features are supported?

When your computer downloads a webpage, it starts by creating the Domain Object Model (DOM), which is a collection of objects representing all elements on the page. If a browser supports a particular element or feature in HTML5, its DOM will contain that information. While you can check for each element you need individually, MIT has provided a javascript library that detects support automatically. After downloading it, you’ll need to include the following element inside the page head:

<script src=”modernizr.min.js”></script>

 

The script runs automatically when the page loads and creates an object called Modernizr that you can test to see which features it detects by checking the truth value of the appropriate boolean.  For example, to check whether the browser supports HTML5 Audio, you could use a line in your javascript saying:

if (Modernizr.audio) {

The website contains sample usage for each of the items it checks. Additionally, it helps keep things from breaking in Internet Explorer. By using Modernizr, you can serve the appropriate HTML5 code to modern browsers, while providing other content that will make sense to older browers.

Remember last week when we talked about  putting three different <source> tags inside a <video> element? Another option would be to use Modernizr to check what type of video the browser is capable of playing:

if (Modernizr.video) { // Does the browser support HTML5 video?

if (Modernizr.video.ogg) {

//play Ogg Theora video / Vorbis audio in an Ogg container
} else if (Modernizr.video.h264){

// play H.264 video / AAC audio in an MP4 container

}

}

Now that we’ve seen how to figure out what features the user’s browser supports, let’s get back to things that most browsers do. Next up, something every modern browser (even IE 8) supports: local storage!

HTML5, Part I: Video

I had originally planned to finish off my Web 2.0 Overview before getting into the specifics of each technology, but yesterday’s introduction to HTML5 got a lot of attention, so we’ll move it up a bit.

HTML5 supersedes HTML 4.0, XHTML 1.0, and XHTML 1.1; it provides new tags for handling many common web design elements that are currently handled with third party applications such as Flash, and standardizes elements that have never been formally documented.

What do you need to get started?
The latest versions of Chrome, Firefox, Opera, and Safari all support some but not all HTML5 features; Internet Explorer 8 has a few features and IE 9 is expected to add more. As always, when designing for Internet Explorer, be particularly careful about elements that compete with Microsoft’s own offerings – for example, IE 8 does not support the canvas tag, which would replace Microsoft’s Silverlight technology. In this series, I’ll attempt to focus on those elements that are supported by all of the major browsers, or at least mention the exceptions.

Show me the video!
Let’s start with how to embed video in a webpage. Traditionally this has been done with a third-party plugin such as QuickTime, RealPlayer, or Flash; now we have a standards-based method that should be supported on all platforms. Currently the <video> tag works in Chrome, Firefox 3.5, IE 9, Opera, and Safari 3; however, each browser supports different codecs and containers. Unfortunately, there is no one container/codec combo that works for all of these browsers, so if you want your video to show up for everyone using an HTML5 browser, you’ll need to encode it multiple times. Fortunately, HTML5 allows you to specify several videos in one video tag, leaving it to the browser to choose which one to display. To have the video display on all browsers, you’ll need the following encodings: (Converting video into the correct formats is one service a professional website designer will provide)

  • Theora video and Vorbis audio in an Ogg container
  • H.265 video and AAC audio in an MP4 container
  • VP8 video and Vorbis audio in a WebM container

Finally, to accommodate browsers that do not support the <video> tag, you’ll want to fall back to a Flash video.

So give me the tag details, already!
When you only have one video file, the tag works pretty much as expected; however, it has a number of optional (but desirable) attributes:

<video src=”videoname” width=”XXX” height=”YYY” controls> </video>

So what’s all this? The src part, width, and height should be fairly self-explanatory;  width and height are optional but should be used anyway. By default, the video tag does not offer the user any type of control over the video; the controls option adds a built-in set. Alternatively, you can write your own; the video element has methods play() and pause() and read/write properties volume, muted, and currentTime.

If you expect every visitor to watch the video,  the preload option will start it downloading as soon as the page loads; setting preload=”none” will tell the browser not to load the video until it’s requested. Finally, the autoplay option does exactly what you would expect; it downloads the video and starts it playing as soon as possible.

Several videos, one tag
What if you went ahead and made three encodings of your video so everyone using an HTML5 browser can see it? In that case, your code will look something like this:

<video width=”xxx” height=”yyy” controls>

<source src=”video.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>

<source src=”video.webm” type=’video/webm; codecs=”vp8, vorbis”‘>

<source src=”video.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>

<object width=”XXX” height=”YYY” type=”application/x-shockwave-flash” data=”__FLASH__.SWF”>

<param name=”movie” value=”__FLASH__.SWF” />

<param name=”flashvars” value=”image=__POSTER__.JPG&amp;file=__VIDEO__.MP4″ />

</object>

</video>

Do you really need all that? Well, no…but if you don’t specify exactly how each video is encoded, the browser will find out whether it can play a video by downloading it and trying to play it, wasting your bandwidth and the user’s time. Better to put in a little extra effort beforehand! The object tags will be ignored by HTML5 browsers (as will any non-source tags inside the video tag) but will cause older browsers to display the flash movie.

Side note: the MP4 file format should be listed first, as the iPad only notices the first source listed and will fail to play your video otherwise.

Acknowledgements:
Video for Everybody offers a more in-depth discussion of setting up your videos to be readable by everyone,

HTML5: Up and Running (due out next month from O’Reilly) contains a fascinating discussion of the history of HTML and instructions on encoding video.

Web 2.0, Part IV: HTML 5

If you’ve been reading this series, chances are you’re familiar with HTML. You may also be familiar with XHTML. For a while, it looked as if XHTML might replace HTML, but XHTML2 has been killed and HTML5, along with XHTML5, has arrived. Had enough acronyms yet?

Last October, the last call went out for comments on the HTML5 working draft, which means that the standard is essentially done. The major browsers at least partially support it, which means you should be taking advantage of the new capabilities offered. So what’s new in HTML5?

First off, we continue the separation of content from style; tags such as <font> and <center> have been dropped in favor of cascading style sheets.  We’ll be talking about CSS in the near future, but what it does is allow you to write your content without worrying about how it will look, then create a file that defines the look of all the pages that include that file. Aside from promoting better design practices, this makes updating pages a lot easier as the look and feel of the entire website can be altered by changing one file! The following elements are not in HTML5 as they represent functionality better handled by CSS; that is, they are presentational only. Browsers will still support the tags to be backwards compatible with previous versions of HTML, but HTML5 documents should not use them: <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt>, <u>. Additionally, any attributes related to presentation (such as align, bgcolor, etc) should not be used in HTML5 as their functionality is better handled by CSS.

Other tags that have been removed include <frame>,<frameset>, <noframes>, <acronym>, <applet>, <dir>, and <isindex>.

HTML5 supports the following new tags: (notice that many of these replace the generic <div> tags to allow cleaner markup)

  • <article> represents content that is independent from the rest of the page; for example, this could be a single article on a blog
  • <aside> tells you something that’s only slightly related to the rest of the page
  • <audio> adds an audio file
  • <canvas> is for rendering dynamic bitmap graphics
  • <command> is for a command the user can invoke
  • <datalist> specifies options for an input field and can be used for autocompletion
  • <details> allows the user to request additional information
  • <embed> is used for plugin content
  • <figure> combines the various elements of some piece of content, such as a graphic and its associated
  • <figcaption>
  • <footer> is exactly what you would expect
  • <header> is a group of navigational aids
  • <hgroup> is a section header
  • <mark> is used around a section of text that is highlighted for reference purposes
  • <meter> represents a measurement
  • <nav>, of course, is your navigation tool
  • <progress> represents completion of a task
  • <section> is a generic section marker, which can be combined with h1-h6 to indicate structure.
  • <summary> is what you’d expect, and can be combined with the details tag
  • <time> gives a date and/or time
  • <video> adds a video file

After we finish the overview and start our HTML5 series, we’ll cover some of these tags in detail. Here are a few other changes to be aware of:

  • The <a> tag can now be used without an href attribute, as a placeholder link
  • The <b> tag now represents text that should be distinct from the surrounding text without implying any additional importance.
  • <cite> is now used only for titles
  • <i> now represents text in a different mood or voice from the surrounding text
  • <strong> now represents important test

Ready to get started? Start your new documents with <!doctyle html>and you’re good to go!


According to my statistics, a fair number of people are reading these posts, but I haven’t gotten much feedback aside from spam. If you have anything in particular you’d like me to write about, please comment on this post and let me know; I’ll certainly take it into consideration!

Web 2.0, Part III: Can You Digg It?

Surfing the Internet, you’ve probably seen the buttons suggesting that you Digg the content you’re currently viewing.  So what is this Digg stuff anyway?

Digg is a social news site that was founded in late 2004; it allows people to promote articles they feel are newsworthy. Users vote to either digg or bury an article; high-scoring articles make it to the front page, after which the site owner hopes he bought a strong enough server to handle the traffic. (See also: Slashdot effect)

So if you’re trying to get lots of people to your site, getting dugg can be the way to do it. How does that happen?

First off, of course, you need good content; your site needs to be something people will want to share, something they can point their friends to and say “hey, this is interesting”. After that, you have two options. You can go to digg.com and digg your own stories, hoping people will see them and digg them as well. Or you can add a digg button to your site, allowing the people who are already reading it to give the page their vote of approval by clicking the icon.

Either way, don’t be spammy. While it’s fine to dig your own site (and is specifically allowed), it won’t be successful unless you have something people actually want to read, and if you’re the first to digg a page you’ll need to take the time to write a good description as well. But if you’ve got great content that your users are enthusiastic about, providing a digg button helps them to share your site with others.

aweb 2.0, Part II: Wik, Wik, Wiki!

These days, who hasn’t used Wikipedia? The largest encyclopedia in the world, it was created mostly by its users and, as of this writing, has a google pagerank of 9 and millions of backlinks.  Sounds like something to emulate, doesn’t it? As it happens, the software used to create Wikipedia can be yours for the low. low price of…free!

Ok, enough with the used car salesman routine.  The truth is, wikis are very useful when you have content that should be created and edited by a number of users (although they can also be used as a simple CMS – just require registration to post and don’t let anyone else register!) While there are a number of wiki implementations available, if you plan to open your wiki to the public, MediaWiki is probably your best bet because users will already be familiar with how it works through using wikipedia, wikimedia, and other MediaWiki-based sites. Access is open by default, so it you’re looking to set up a private wiki, you might be better off with a different software option.

To set up your wiki, visit MediaWiki.org to download the software, then unpack it and set up a MySQL database as you did in the building a blog articles. Like WordPress, the wiki software has a web-based configuration utility; at the time of this writing, the latest version is 1.15.4, so to configure the site I went to sitename/mediawiki-1.15.4; if your site is to be entirely wiki-based, you probably want to actually point the url to the wiki directory.

Now just follow the instructions on your new wiki page to build your site! Notice the tabs at the top of each page. Assuming you’re logged in as an administrator, one of them will be “protect”; you can use this to restrict who can edit the page. Even if you plan to let anyone edit pages, it’s probably a good idea to protect at least the main page so random people don’t come along and change it!

You can set any page to be editable by admins, by registered users, or by anyone. Further restrictions are possible – you can prevent new accounts from being created, only allow account creation by sysops, etc – but they require editing the php code; you can find instructions in the WikiMedia manual.

Now go forth and wiki!


Blogs and wikis are just a few of the services that Moonlight Designs Studio provides; check us out today!