A client is an application you use twitter through. A great example for that is tweetdeck, because it has multiple columns and you can get it on Windows and MacOS, because it is written in Adobe AIR. I like to keep track of my friends timeline, my mentions and a facebook newsfeed. The fourth column changes between different lists and searches.

Link shorteners

If you’ve been tweeting and including links in your tweets, you may have noticed that links take a big chunk of the overall tweet length, which is limited to 140 characters after all. Link shorteners will be your friend. There are multiple services for that out there, I personally use bit.ly, because it’s widely spread and easy to integrate to tweetdeck or available as a plugin for Chrome/Chromium.

Analysis

There are different tools for analyzing your or others accounts. A service which is fairly new and very powerful is Klout. It calculates how you impact twitter with your tweets upon how much reaction like mentions or retweets you produce. It also analyzes your style, if you mostly tweet links, mention other users and so on. There is a ranking plugin available for Chrome to see other peoples Klout score directly on the twitter website.

Connect

I can only recommend you chain your facebook profile to your twitter account and let your friends there know what you’re posting on twitter. Just go to the twitter application.

These were the first five days of How to Twitter. If you have any questions or suggestions, feel free to comment Thanks to everybody who followed through so far!

don’t kill it with boredom.

It’s been a long time since my last status update, so here we go: looking for breakfast.

When you’re a blogger, you should add some personality to your blog, that’s correct. If you don’t have a blog and are worried that your twitter account has some spider webs on it, use it as motivation. Get up, do something, tweet that.

Duplicate content is a fool

Of course it is, so don’t retweet somebody a lot of your followers are following, it will just annoy them and flood their timeline.
Furthermore, don’t link the same post/site twice without telling you have tweeted it before. Include a memorable title, or users will be disappointed the second time they visit one of your links, they believed to be new.

Don’t hate

All you miserable maggots will bite to dust and I’ll impale you with a bamboo stick!

If you try to stand out as a professional, discuss, don’t harass. What you tweet about is very sensitive. Don’t tweet that you hate work, when you just got hired by a firm and you have no side-projects, don’t put a bounty on peoples head, imagine your audience sitting in front of you. To get away from you, they just have to click unfollow instead of leaving the room and giving you the possibility to question why, like in the physical world.

Don’t whine too much. It’s very irritating to see people bitching around all the time. To be on the subject and being still critical is not impossible

For further bad tweets see: Top 10 worst tweets

This is a lot depending on what you want to achieve. A podcaster I follow uses twitter to organise with the people he meets around Germany. Others promote their newest content, their firms launched products, etc. I’ll just leave out talking about puppies or that you just had breakfast, because these you should do rarely, if you’re not breeding dogs or a dedicated food blogger.  Your bio(graphy) is also important, so potential followers get a quick overview, what they’re going to read when they follow you. I’ll just use my current as an example:

PhotoDesignCode-Junkie, currently at the Nordic Multimedia Academy. Free for shootings and projects, speak to me in: EN/DE/DA. Follow me for more insights.

I consider it short, summarising my interests, revealing my current occupation, that I’m open for work, trilingual and inviting to follow me.

Try to connect with people you know in real life, people from the same area or field of interest. This will give you opportunities to jump into conversations, help or just get interesting updates. As this is a medium that leans so close against the pulse of the net as no other, being there when something happens or at least on a daily basis, you should make routine out of checking your account, mentions and retweets on a daily basis.

There are a couple of good answers. Most business people will now be looking for a combination of “will”, “increase” and “sales”, but it’s not that simple. If you do it right, it might create a better relation to your customers, empowers you for more direct communication and that also only if your target group uses twitter. Furthermore will it not help throwing out random links to your homepage or products, if it is not new, relaunched, changed, or in a conversation. Sounds easy? No, but that’s why there are multimedia designers like me
As a private user you can promote your private projects, network close and instantly with friends or just stay up to date with your favourite celebrities breakfast sandwich. BOOOORING. At least the last.
If you, like me, are becoming a multimedia designer, study something in relation marketing, no matter if it is internet related or not, you definitely should have a Twitter account. If you ever, possibly by a client, boss, co-worker or a just a possible client at a party at very unlikely circumstances could be confronted with the question: “What about social media?”.
Sounds like it’s never gonna happen? Don’t think so. I’m not a god of social media and I don’t even have a lot of followers, but my count is growing (feel free to follow if you find the first peek at my time line interesting ).

I use Twitter connected to other social communities which makes my tweets, apart from retweets and mentions visible on for example facebook. When I find something interesting or funny, that my friends could like, I tweet it, if I find it has not been seen, is brand new or just legendary. Furthermore I tweet new blog entries (more in depth about new things or things new to me) or portfolio entries with sets of photos, posters or code snippets.

Twitter
Twitter is a microblogging service run by the Twitter Inc. It gives people the ability to share messages of exactly 140 characters.
Wikipedia says:

Twitter was produced in March 2006 by Jack Dorsey and launched in July. Since then Twitter has gained popularity worldwide and is estimated to have 200 million users, generating 65 million tweets a day and handling over 800,000 search queries per day.

tweet
A short message sent through twitter.

retweet
A retweet is a repetition of somebody else’ tweet, you chose to spread to your followers.

TL / timeline
A timeline is a chronical collection of tweets. Your timeline would consist of your tweets and retweets. Your friends timeline a collection of theirs and so on.

hashtag / tag
These are used to flag certain content that belongs to a specific topic or field. If I’d be tweeting about a new lense, I bought for my camera, I’d add #photography #lense #Tamron (just to make a point) and to make it easy to find for people, looking for tweets on a certain topic.

lists
You can create lists to sort people after location, topic or something you think connects them. Lists are followable, as persons.

For more basics, visit the twitter help center: http://support.twitter.com

Concept and Technique

Clean Code

What you should think of when starting to write a website is that you should use native html elements if possible, like h1, h2, blockquote and so on. Also very important that you devide content and style.
Bad:

<body background="#ff0000">

good:

<body> and additionally in .css file: body {background:#ff0000;}

Comments

Comments are extremely supportive when it comes to coding and learning at once, here the comment markup for HTML and CSS comments:

<!– navigation section, this is a HTML comment –>

/* multi row comments in CSS
for example: this not working in IE */

Validation

Validation is useful to get used to common guidelines. It’s not the ultimate solution, but sticking to the W3C rules is a good starting point. You can always add a browser switch for single browsers after that. (Eyeballing IE here)
Links for validation:

• HTML: http://validator.w3.org/
• CSS: http://jigsaw.w3.org/css-validator/

Also very important: remember your Doctype! (HTML5 not listed)

Sketches

Make sketches, in hand or digitally, just very roughly to define elements and layout. This will help you not to overload the page and stay focussed on your goal along the process.

Inspiration

Gathering inspiration is not really a big deal when it comes to web design. Check out the category for Web Interfaces on deviantART for example.

Resources

Editors

Important when you choose your editor is that it supports syntax highlightning.
I recommend Notepad++ for Windows and Text Wrangler for Mac OS. Linux users: You know where to go, your packet manager gives you tons of possibilities.

Browser Extensions

Really useful, they help you debug, increase your workflow (and some of them actually look pretty sexy ).
My beginner recommendations:

• Firebug (Firefox only)
• Window Resizer, Firefox version / Chrome version
• Web Developer, Firefox version / Chrome version

Tutorials

Examples for great websites that have massive collections of tutorials and knowledge:

• net.tutsplus.com
• smashing magazine

CSS References

Just a must-have for looking up how things are done and what can be done with different elements.

• CSS3.info:
  • http://www.css3.info/
• W3Schools:
  • http://www.w3schools.com/css/css_reference.asp
• CSS-Ref.com
  • http://www.css-ref.com/

Vocabulary:

• HTML = HyperText Markup Language
• CSS = Cascading Style Sheets

Thank you for reading! Leave a comment with wishes for future lessons and general feedback please!

RSS (or atom) Feeds are a really powerful tool to either stay in touch with information you value, get updates real quick and spend less time on getting information you want. About every blog, online gallery or news site has its own feed. Here a quick sum up how to use this efficiently, both as reader and as a publisher (artist, blogger, or if you run a community).

Rss, atom feed = a stream of information divided into different parts like headline, content, attachment.

Aggregator = a synonym for feedreader, program that handles feeds

subscribe = you start reading a newsfeed, like signing up for a newsletter

For readers

Why use this technique in the first place?

Because it saves you time and makes managing your inputs of information easily. You don’t want to visit every site you like, where there could be new content daily. You have a chance that there is no new content and you leave again, without any gain. Further, you don’t have to remember all the places for valuable information around the internet, you just subscribe to the feeds and will be noticed when there is new content to see or read.

How do I use it then?

Many programs support feeds, browsers (like IE, Firefox, Opera, Chrome) mail clients (like Thunderbird or Windows Live Mail) or dedicated feed readers (like Shrook for Mac, Liferea and Akregator for Linux or Feedreader for Windows). There are also online services that collect your feeds in your browser window, accessible from everywhere (example: bloglines, google reader, netvibes).

Just look out for this icon: it will support you with information or the feed URL from that site. For this blog it is: http://geronimo89.dk/feed/

Example how to subscribe to a website with Firefox:

For writers

Why you should run a website or use a service (countless, like deviantART, flickr, blogger, blogspot, livejournal, wordpress) that supports feeds is because you reach your readers fast and you have a better chance that people that like what you do will come back or stay in touch through this feed. They might want to subscribe to your feed, but not visit your website manually every day to check if there are updates. If you post content (like photos, poems, blogposts) irregularly it will increase the number of your readers.

How will I know if people use this feature?

Simple: if your sites views go up, minutes after you have submitted new content, people have very probably subscribed to your feed. I see it myself, when I promote new content through links with bit.ly I have more readers online than clicked the link that lead to the article. These are readers that have subscribed. Another option is to use a service like Feedburner to monitor readers. Also there are plugins for most content management systems that show referrers or count hits on your feed-url.

But I want people to visit the website!

No problem, you can distribute a short summary of the article and not the whole content through the feed, which only gives the user a headline and the summary, if they want to read the whole article, they have to go to that article, by clicking the link. If you are not depending on advertisement on your website, I recommend you distribute all the content though. Below a screenshot of the wordpress rss settings.

Links:

• feedicons.com for graphics in various colours
• http://en.wikipedia.org/wiki/Comparison_of_feed_aggregators Wikipedia list of feed readers

As you can see on the image above, it’s shot in the rain, but how do you protect your loved camera in this shitty weather? How do you keep drops on your lense from ruining your pictures or forcing you to spend hours retouching them?

What you will need is a UV-Filter (like the hama you see here) fitting your lense. I bought one for my EOS 18-55mm Kit lense which has a 58mm diameter. UV-Filters are extremely handy for protecting your lense from dust, rain or other fluids, plus they are a lot easier to keep clean. You have to watch out for more reflections though. The prize of this one was about 13€, so it’s one of the cheap ones, but will do quite well. The second thing you need is a package of cleaning wipes for glasses, you probably know them if you wear glasses yourself. They are fairly cheap, so just stop by your local supermarket and see what they have.With your UV-Filter attached, out in the rain, you just wipe off drops with the cleaning wipes, it will dry in seconds! That is because of the chemicals used, leaving no marks behind.
Important: Don’t ever do that to your lense! You’ll risk scratching it or harming the coating!

About the rest of the camera: most DSLR bodies don’t bother much when they get a few drops of water, check your manual for further details.

After shooting, put your camera back into your bag, clean it later, if necessary. My camera bag isn’t waterproof, but it’s thick enough to keep the rain out for a good amount of time. In case of unplanned, longer stays in wet weather or really heavy rain, I keep a small plastic bag in there, I can pull over, which keeps it dry.
As you can see, this equiptment is very low budget (my camera bag was about 20€) so I guess it’s worth trying.
Thank you all for reading and I hope you can benefit a little from my experience

The stream editor (sed) that is pretty much standard on basically every distribution and a core element offers the search and replace function, but I will stop to annoy you and just give you the script:

#!/bin/bash
# a little help by Jonathan M. Hethey
# use:
# 1. put in directory with files to edit
# 2. change variables replace and with
# declare the variable you want to have replaced
replace="old_pic.png"
# and the string you want to replace it with
with="new_pic.png"
# the script will do it on all files with a certain file suffix, .html in this case
for filename in *.html
# loop it for all files found with .html
do
# search and replace it
sed -i "s/$replace/$with/g" $filename
# echo all files processed, this gives you information which files were worked on (probably all .html files, because sed will read all, but only work on the ones where there is something to be replaced.
echo $filename
# end the loop
done;

A little struggle was to get the variables (I only added for you, my readers) to work. It’s all about using ” instead of ‘ because bash does not interpret variables inside ‘.
Download: replacer.sh

So let’s start out with a standard xhtml document called index.php:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Navigation with PHP</title>
</head>
<body>
</body>
</html>

Before the doctype we now insert a list of our files. Let’s say we have files called “news.php” “home.php” and “about.php”.

<?php
$section = array();
$section['home'] = “home.php”;
$section['news'] = “news.php”;
$section['about'] = “about.php”;?>

Now this “list” actually puts all these as entries into an array in PHP. We’ll need that later. Now we head down to the <body> tag and insert some php code here. What we’ve done until now is only creating a list with the files we may want to show inside our website. So if we want to display our content, we should add the next part where you want the content to appear.

<div id=”content”><?php
if (isset($_GET['section'], $section[$_GET['section']])) {
include $section[$_GET['section']];
} else {
include $section['home'];
}?>
</div>

Now our website has the ability to include the listed files and make them appear as a part of the site. I’ve already created a <div> around it, you don’t have to do that. The last thing to do is to add the navigation with the links that tells the PHP script which file to load. If there are no or no valid options given, it does include $section['home'];. This first of all makes the script include home.php when only index.php is opened and makes the site safer, because no not listed files can be included like /etc/passwd.

<ul>
<li><a href=”index.php?section=home”>Home</a></li>
<li><a href=”index.php?section=news”>News</a></li>
<li><a href=”index.php?section=about”>About</a></li>
</ul>

I’ve already put the links in a list, you don’t have to do that, but it looks nicer. The part between the <a> and </a> is the essential one. Through opening index.php?section=news you tell the index.php to include the file saved with the array entry news.

That’s basically it. You’ve learned how to avoid frames and create a website with multiple pages!

• Check out example (Only added some css here)
  

First of all, we need a graphic as a basis how our css box is going to look. I’ve just chosen a box with a dropshadow. Now we use the help lines in GIMP or Photoshop to divide it into 3 pieces and save these parts into new files. 1: top.png, 2: middle.png, 3: bottom.png. Now we got our 3 different graphics, we can start the CSS work. First of all we need a basic html file.

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Our nice CSS box</title></head>
<body>
</body>
</html>

To this we start adding a div container for the box, right below the body tag. In the box, I added a heading <h1> and a placeholder div for the bottom graphic.

<div class=”box”><h1>heading</h1>
<p>Yourcontent
</p>
<div class=”bottom”></div>
</div>

Now we can start defining the css attributes of the different html objects. You can link an external css file, or just paste the css into the html file. For this simple project I will just insert the css directly into the head of the html file. Generally you should use external css files to keep everything tidy and clear.

So, here’s the code I use in the head tag:

<style type=”text/css”>
h1 {
background-image: url(top.png);
background-repeat: no-repeat;
height: 44px;
width: 266px;
font-family: Verdana;
font-size: 12px;
margin:0px;
padding: 0px;
}

.box p {
background-image: url(middle.png);
background-repeat: repeat-y;
min-height: 400px;
margin: 0px;
padding: 16px;
font-family: Verdana;
font-size: 10px;
max-width: 250px;
}

.box {
margin: 0px;
padding-top: 44px;
}

.bottom {
height: 39px;
width: 266px;
background-image: url(bottom.png);
background-repeat: no-repeat;
background-position: bottom;
}
</style>

If I skip some of the css code explanation here, just try it out yourself or look it up in a css reference. Noteable css code: We use padding:0; and margin:0; to force the elements to be without spacings inside and outside them. Another thing is, that we control the background image very explicit. We define exactly if and how it’s going to be repeated. In box p {} we add padding: 16px; because we need some spacing because of the graphic. As we can see below, we can’t use the full area of the graphic, because we don’t want text on the drop-shadow.

A thing you can do for optimization is, that you scale your middle.png to 1px height. It will probably look the same, but increase the loading speed of your website a little bit. By the way, Internet Explorer 6 doesn’t support transparent pngs so you should maybe add a Firefox/Opera/whateverbrowser link to your website.

• check out example now