Sep.

2010

HTML class 1: The Beginning

posted at: 16:36

Thanks to Miss Ragno from Merox.dk as our host for the first little web class we had together and of course everybody that participated.>
I want to put up a quick sum-up what we did for everybody that is interested or who couldn’t come.

Concept and Technique

	Concept	Technique
Sender	You or your client	Webserver
Message	Do / buy something	HTML
Receiver	User	Browser

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

webdesign sketch HTML class 1: The Beginning

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

text wrangler syntax highlightning screenshot HTML class 1: The Beginning

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:

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!

Give me the first comment

Sep.

2010

RSS reading and how to use it efficiently

posted at: 14:41

Tags: atom, blogging, feedreader, rss

Vocabulary

feed icon RSS reading and how to use it efficiently 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:

subscribe ff 1 RSS reading and how to use it efficiently

subscribe ff 2 RSS reading and how to use it efficiently

subscribe ff 3 RSS reading and how to use it efficiently

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.

wp rss settings RSS reading and how to use it efficiently

Links:

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

Only 1 comment so far

Aug.

2010

shooting in the rain

posted at: 01:18

Tags: camera bag, rain, shooting, UV filter, water

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?

UV Filter shooting in the rain

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!

Tasche shooting in the rain
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

Give me the first comment

May.

2010

Batch editing html or text files

posted at: 17:18

Tags: bash, batch replace, sed

At work, I’ve been more than once exposed to older web sites that had to be changed. Problematic about this was, that I would have to edit about 30 html files to change an email address or change a part of the menu that was stored on every single html page. As I thought, that this was far too annoaying, I decided to write a script for it.

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

Give me the first comment

Aug.

2008

First website and navigation with PHP

posted at: 12:52

Tags: PHP

This little tutorial will teach you how to build a website with multiple pages with PHP. When I started trying to make websites, I used frames/iframes which are BAD and not valid html code. So we now we want to use the PHP function include(), which gives us the ability to display other documents inside another.

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)

Give me the first comment