Archive: HTML

Editor’s Note: Elliot will be doing a talk called “The Perfect Portfolio Site” on the FOWD Tour.

This is the second video in our two-part series focusing on how to design a killer portfolio site (feel free to check out Part One).

In Part Two you’ll learn …

1. How to ‘design in the browser’
2. How to take your design from Photoshop to HTML and CSS
3. How to integrate your design into a CMS like WordPress
4. How to structure your CSS files
5. How to enrich your design with CSS3
6. How to use ‘custom fields’ in WordPress to make powerful templates
7. How to use Webkit Transistions to add extra beauty to your site

(more…)

We’ve compiled six useful tips for all you web designers and developers out there. They cover various topics including: accessibility, SQL, web developer plugins for Firefox, HTML emails, design and jQuery.

Feel free to disagree or add your own in the comments below. If you’d like to submit a tip to be considered for future articles, just head over to Tipster and add your own.

Alt Tags and Screen Readers

By: James Fenton

I can’t claim these tips as my own, though my web accessibility hero Bim Egan (of the RNIB) recently gave me a few simple tips regarding alt tags and screen readers.

1. Keep your alt tags as concise as possible.
2. Don’t just describe exactly what is going on in an image, describe what message it is trying to convey.
3. It is OK to leave the alt attribute blank (alt=”") as it can be more of a hindrance to blind users than a help.
4. When an image is essentially just style, use it as a background-image.

Spending a few hours watching (and listening) to a blind user on the web is a mind blowing experience and will totally change how you approach accessibility

Shorter SQL statements by abbreviating table prefixes

By: Joris Heyndrickx

Instead of writing:

SELECT books.title, books.short, books.releasedate, authors.firstname, authors.lastname
FROM books, authors
WHERE books.author_id = authors.id AND authors.id = 21


You can write:

SELECT b.title, b.short, b.releasedate, a.firstname, a.lastname
FROM books b, authors a
WHERE b.author_id = a.id AND a.id = 21

My Top 6 Firefox Plugins for Web Development

By: Simon Hamp

FireBug with FirePHP FTW!

1. FireBug (getfirebug.com)
2. FirePHP (firephp.org) req. FireBug
3. ColorZilla (colorzilla.com/firefox/)
4. HTML Validator (users.skynet.be/mgueury/mozilla)
5. YSlow (developer.yahoo.com/yslow/) req. FireBug
6. Web Developer (chrispederick.com/work/web-developer)

Image headers in table based HTML Emails

By: Pete Roome

If you have an image as a header on a table based HTML Email it is likely you will find you have a very annoying gap beneath it between your two <tr>’s. Simply add the following styling to your image to close this gap:

{vertical-align:bottom;}

Lighting effects on boxes

By: David Smith

To make a box stand out in your design simply:

1. Choose a colour for your box
2. Create a subtle gradient starting from a slightly darker version of your colour (bottom) to a lighter version of your colour (top)
3. Make sure your gradient is SUBTLE!
4. Draw a horizontal line across the top of your box so that it spans the whole width.
5. Pick a colour from the top of your gradient and lighten it still more. Apply this colour to the line you just created.

You should have an effect which looks like light is hitting the top of your box making it stand out. The blue Tipster banner uses this to good effect.

Manual filmstrips in jQuery

By: Michael Peacock

Here’s how to create a really simple manual photo film-strip in jQuery. It can be used to swap a large image on a page with that of a thumbnail elsewhere on the page, such as different photos of a product in an e-commerce store.

$(document).ready(function(){
imageSwapper(".thumbnails a");
});

function imageSwapper(link) {
$(link).click(function(){
$('#largeimage').attr('src', this.href);
return false;
});
};

Just link the thumbnails to their larger versions and pop them in a div or paragraph of class thumbnails, and give the large image an ID of large image, and you are good to go!

Any tips you can add?

If you have any tips you’d like to add, please do so in the comments below. Thanks!

[Photo Credit: flickr.com/photos/dunechaser]

Like this article?

If you enjoyed, this article, feel free to re-tweet it to let others know. Thanks, we appreciate it! :)

Have you ever wanted to create a simple multi-person blog, but didn’t want to bother setting up an entire WordPress installation? If so then we’ve got just the answer. By combining Twitter Search, Atom feeds, hash-tags and PHP, you can create an RSS-enabled, micro-blog using Twitter and be up and running in less than 10 minutes.

The new Think Vitamin news feed is powered this way, so let me show you how we built it.

Screenshot of the Think Vitamin news feed

Sign up for Twitter

First off, make sure you and the other blog contributors have Twitter accounts. It’s free and only takes two minutes to sign up.

Choose your Hash-Tag

The way you will post to the blog is by including a ‘hash-tag’ in your Twitter post. For example, we chose #thinkvitamin for the news feed. It can be anything, but make sure it’s not too common so you don’t pull in Tweets that are irrelevant (ie #strawberries or #obama). A great way to check is to search for potential hash-tags at search.twitter.com and see how many times they’re used. The fewer the better.

Create Your Atom Feed

Head over to search.twitter.com and type the following into the search bar:

#your-hash-tag from:user01 OR from:user02 OR from:user03

Replace ‘your-hash-tag’ with the hash-tag you’ve chosen, and ‘user01′, ‘user02′ and ‘user03′ with the Twitter usernames of the folks who have permission to contribute to the blog. You can include as many Twitter usernames as you like.

This will return results from user01 or user02 or user03 where the hash-tag ‘#your-hash-tag’ was used. Now copy the ‘Feed for this query’ link to your clipboard (you’ll need it later).

Output the Atom Feed as HTML

You can use PHP (or any language of your choice) to parse the feed and output it to a page as HTML. This is where you’ll need the feed URL you copied in the last step.

The file atom-html.php (download the source) outputs certain nodes of the Atom feed as list items in an unordered list. You can then style this list however you like. Here is an example of how to implement the code:


<ul>
<?php
include('atom-html.php');

# The URL for the Atom feed from search.twitter.com
$url = “http://search.twitter.com/search.atom?q=
%23your-hash-tag+from%3Auser01+OR+from%3Auser02+OR+from%3Auser03″;

# Create object to hold data and display output
$atom_parser = new myAtomParser($url);

# Return string containing HTML. The argument for getOutput() is the
# number of items to display
$output = $atom_parser->getOutput(5);
echo $output;
?>
</ul>

Count the Subscribers with FeedBurner

It’s important to know how many subscribers you have, so make sure to pipe the Atom feed (that you created in the ‘Create Your Atom Feed’ above) through FeedBurner. If you don’t have an account, it’s free and easy to sign up.

Once you have a URL from FeedBurner for your feed, make sure to include it as the ‘Subscribe’ link in the HTML.

What About Comments?

We haven’t enabled any commenting on the Think Vitamin news feed, but this could be added by including a Disqus snippet in the HTML output.

That’s it.

We told you it was easy. Let us know if you’re currently using Twitter on any of your sites in an interesting way.