3.25.2011

easy peasy downloads

Wandering around the internet, gathering learning material for my students, I am touched by the amount of resources people make available to others. So, in my modest way, I would like to contribute as well - especially given the fact that I am making such a big point of using the resources and material of others as part of a web learning strategy:

Whenever I make a full photoshop file (or anything else that is remotely usable) for my own class I will be giving a download link to it as well. The very first one is in the previous post and they will all be collected under a new label called "downloads". My students will have the good sense to not to use the content "as is" for their course work, since I will obviously be able to recognize my own handiwork quite easily. Others who come to this site - please feel free to use as you see fit. A linkback would be very nice of course, but I will not be insisting upon it...
:-)

.................................................................................................................................

being "resource-ful": site layout with ready made visual components



Read all about it here ;-)

Get the photoshop file here:
http://www.citrinitas.com/easy-peasy/geek-folk.zip

.................................................................................................................................

3.24.2011

chaoscope: a great application to create website backgrounds

Download and play! :-D



http://www.chaoscope.org/

 (Tip:   Start out with the stuff from the projects folder and take it from there. Pick different fractal formula from the very top of the panel. Choose different render modes. Drag your cursor to rotate the fractal. F3 makes a new shape, F4 renders it for you. Also remember to click on the gradients at the bottom to get random color schemes. 

.................................................................................................................................

no more bands underneath your top gadgets in blogspot

And following closely, is another really good one from SouthernSpeakers:

Unfortunately it isn't only your pages gadget! Any gadget you place up at the top of your page seems to get this nasty old band underneath it. To get rid of them once and for all, simply go to Design > Template Designer > Advanced > Add CSS and paste the following code: 

.tabs-outer {
  background: none !important;
}
.tabs-cap-top, .tabs-cap-bottom {
  border-top: none;
}

Then press enter after the last character of the last line } (after the last curly bracket, in other words). Apply to Blog. Done!
Thank you SouthernSpeakers! Awesome!
__________________________________

And here is Onur's addition: The page that he has directed us to tells us to do one of two things with the following text. You can either go to the Template Editor > Advanced > Add CSS. Or you can go directly to the HTML editor and look for ]]></b:skin> and paste it right before that line.

So, here is the code if you want to center your pages:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

If you want the pages to align right however, then this is it:

.PageList {text-align:right !important;}
.PageList li {display:inline !important; float:none !important;}

If the tabs stack on each other after you added the code, replace display:inline with display:inline-block.

 ( Note:   And be sure to catch the little fullstops at the beginning of every line of the code. Very easy to miss, so be extra careful!  ) 

.................................................................................................................................

how to stop your pages gadget stretching all the way across your blogspot site

The fact that this happens is one of the reasons why I have not been using this gadget since it breaks up your page in a really nasty way. Here is how to fix it:

Go to Design > HTML editor. Find the line which says
/* Headings ----------------------------------------------- */

Then, paste the following code directly above it:
/*--Pages Gadget No-Stretch Starts--*/
.tabs-outer {
background: transparent !important;
}
.cap-top, .cap-bottom{
border: none !important;
}
.tabs-inner .widget li a{
border: none !important;
border-right: 1px solid $(tabs.border.color) !important;
}
#crosscol{
background: $(tabs.background.color) $(tabs.background.gradient);
border: 1px solid $(tabs.border.color) !important;
}
/*--Pages Gadget No-Stretch Ends--*/

Comes to us from SouthernSpeakers, a great site for all sorts of blogspot codes. Lots more there, definitely check them out!

.................................................................................................................................

seo: post title before blog title, or how to get google to like your blogspot site even more

Here is another little code snippet which will make it possible for a search engine to search the contents of your posts as well as your blog's title and keywords. Result: Even better web visibility. All you need to do is find this line in your HTML code under the 'Design' tab:
<title><data:blog.pageTitle/></title> 
And then replace it with this:
<b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
Save. Done!

 (Tip:  It will of course help if there is some indication in your post title as to what you will be talking about. As an example, a title such as "nice code" would not have gotten me very far with this one right here. So, as you can see, I made a point of mentioning all the relevant stuff in the post title itself.  ;-) 

.................................................................................................................................

3.23.2011

nice clean search box

I don't know about others, but I was hugely bothered by the way the default search gadget looks on blogspot - the way the 'search' button shoulders its way into the actual search area and then all that 'powered by google' stuff below...

So, here is the code for a squeaky clean one, no buttons, no nothing, just a plain empty entry field. And as is usually the case - "less is more" once again! Simply copy/paste this code into an HTML/Javascript gadget. Change the value highlighted in red to get the correct width and you are all set to go:

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="18" type="text" /></form>

.................................................................................................................................

how to get google to like you

Want to get a top ranking in search engines? Be sure to have proper meta tags included in your html. Meta tags are not a magic trick to get you to become the top website on search engines, however they provide search engine crawlers with the desired information which proves that you deserve to be thereabout.

Definition & Usage (as explained on w3schools.com)
  • Metadata is information about data.
  • The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
  • Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
  • The <meta> tag always goes inside the head element.
Most Important Tags: (What you need to fill is highlighted in red)

identifier-url This tag provides google-bot with the information on where to start indexing your website.
[meta name="identifier-URL" content="http://www.yourwebsiteurl.com"]

description Provides the description of your website, you can use a maximum of 255 characters.
[META NAME="description" CONTENT="yourdescription"]

keywords Write a maximum of 12 keywords separated by commas, which are directly connected to your content.
[meta name="keywords" content="keyword1,keyword2,keyword3,keyword4,etc"]

language Provides the language of your website, if it is English, this is not very important but still it would be good to have. 
[META NAME="Language" CONTENT="english"]

revisit This tag is important for bloggers such as yourself and for those who update their sites very frequently, otherwise it is just a waste of space. It tells google-bot, how frequently it should visit your website. Having a short interval means, you will have updated content much faster on google search engines.
<meta name="revisit-after" CONTENT="X days" />


Other than these there are many more meta tags, however they do not have much of an impact. If you are interested you can see the whole lists here and here. Also you can use the online meta tag generator to get a proper code which than you can copy/paste into your website.

.................................................................................................................................

3.22.2011

pixie CMS

Pixie, a "small, simple", user friendly, (and free!) HTML editor, again comes to us via four Yip, my Second Life colleague and brilliant Dutch artist and illustrator.

.................................................................................................................................

free icon editor

Nice little tool:
http://www.free-icon-editor.com/
:-)


.................................................................................................................................

clean typography for website headers


I am not sure that what is shown above even needs much further explanation.

Clean typography, plenty of space, the usage of one strong color together with a lot of neutral ones such as grays, black and white - and you are more or less home and dry.

There will of course be occasions when the content of your site will necessitate that you use a company logotype or some sort of extra visual indicator on what the site is all about. But even then clean solutions will usually work much better since a website gives you a very small area to work on and things will usually end up being be placed very close together to begin with; so wherever you can be clean and simple it is good practice to go for it.

One thing web designers make a lot of usage of however are all the stylistic details which they use to enhance their work, by giving it a dimensionality which makes elements stand out from the page. When you look at the ones above you will notice that there are very few where the design elements have been placed on the page "as is". They have been worked upon with bevels, drop shadows, delicate touches, soft gradients, ultra thin strokes, and so on. Never overboard, never exaggerated, never so that it becomes coarse but very very carefully - almost like as if these designers are jewelers, working very patiently on exquisite ornaments or watches. This is something that I would encourage you to do as well.

Getting the exact right balance for these types of details is not so easy however. A lot of them are created with the layer styles in photoshop, but all I can say is that whenever I try my hand at doing something like this I cannot pull it off. I rarely manage to get something that has this level of refinement. So, my advice would be to use pre-created layer styles. A good selection can be downloaded from WebTreats. And here are a few other good places also:

.................................................................................................................................

3.21.2011

design tutorial: aligning a header

Alignment (and also deliberate non-alignment) is one of the foremost principles of good graphic design since alignment is how one of the fundamental Gestalt principles, continuity works. In the previous post we were looking at visual continuity and alignment is very much a part of that as well.

HTML web design is done in two places: One of them is an image editor and the other one is an HTML editor. And we need to be able to switch back and forth between them and also be able to carry values from one to the other. Meaning that we often need to make things work together although they are located in different places while we are still working on them. So, we need to be able to visualize how things will look, even at a point where we cannot yet see them together as a whole system.

In terms of alignment the good news is that on an HTML website most things are aligned by default since the underlying structure is based upon a table, very much like an excel sheet, in fact. (Only exceptions are the elements that are made out of images which you import into the cells - such as the header!).

When you design a website you will usually start out in an image editor and then adjust the alignment of the table cells in the HTML editor according to what you initially did in the image editor. However, you can also work in reverse and start out with the HTML editor and go back to the image editor from there. And the really good news is that the template editor at blogspot makes it exceptionally easy to do so.

So, go to the template editor and temporarily put a black (or white - depending upon your template colors) image on the background. All black or white - a tiny square which you tile. Then go to the blog title gadget in Design and delete everything. We want the top, the header area to be completely blank, in other words. Now take a snapshot of the site and then open it in the image editor.

design: creating visual continuity

Time for a design tutorial now! ;-)

We shall be doing this by examining the structure and visual continuity of a professionally designed website template called 'boomerang 3D' from http://www.dreamtemplate.com/


professional web templates: a lesson in good web design

It really is...

Dreamtemplate is one of the best and largest ones and it pays to look at their humongous selection of templates in order to get some good design inspirations. I have decided to use their templates for design tutorials  - one coming up in just a few minutes, in fact...

.................................................................................................................................

3.20.2011

custom cursors

A friend of mine from Second Life, four Yip, has seen the easy peasy site and has given me a huge list of resources, of which I will be making good usage! Thank you four Yip :-) 

So, here is one of them: Would you like a custom cursor for your site?

Think carefully before you say yes. While some people (myself included) will love them, others may become highly irritated by them; especially since they will not be getting the little hand thingy for the links. That said, if the answer is still yes - here is a good place for them: http://www.cursors-4u.com/




Find the one which you think will work well with your overall design scheme and then copy the code from the little box underneath it where it says "universal CSS/HTML code for your web page".

Now comes the important part: Paste this code onto a text file first since you will need to do some serious cleaning up before you can put it into the HTML editor. Here is what the code will look like:

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth580.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/02/16/sapphire-9.html" target="_blank" title="Sapphire"><img src="http://cursors-4u.com/support.gif" border="0" alt="Sapphire" style="position:absolute; top: 0px; right: 0px;" /></a>

Delete everything that is highlighted with red! Only keep the stuff that is highlighted with white, from <style type> to </style>, in other words. If you do not do this you will get a little "support Cursors4U" banner on your site. Which, in this case I find a bit excessive since Cursors4U seems to be doing quite nicely with lots of advertisements already.

Next step: Take the cleaned up code and paste it into the <head>, at the very bottom, just above the line which says <b:skin><![CDATA[/* and before </head>.

Done! You now have a custom cursor!

.................................................................................................................................

image tracking

Here it is folks:

This site lets the owner of an image find out where and how their images are being used. It also lets web designers locate the owner of a photograph to contact them about licensing. 

If you link back to an image by right clicking and copying the URL (inline linking), then you are OK, since the software would only track the image back to the original website. And in any case, there seems to be no plagiarism involved when you do inline linking as this article on wikipedia tells us.

However, if you download an image into your computer, play around with it a bit (resize, crop etc) and put it back online - then you are toast! Or could very easily be if the owner of the image were to set their mind on checking on things.

I am not sure if this would also work with highly processed and manipulated images, however I would err on the side of caution and stay away from such practices altogether. For one thing, regardless of whether you get caught or not, it is not the right thing to do. Second, why take the risk when there are literally millions of images online, which you can use under the proper creative commons licenses? Read more on where to find them here.

.................................................................................................................................

can you resize a full background image on an HTML/CSS website?...

... one of my students wanted to know last week. Well, seems that you can:
And you can see a demo of it in action here:

Apparently this works with just a few lines of code which you insert directly into the CSS:

#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

Very very nice indeed! Lots and lots of other really cool code snippets (as they call them over there) to check out on their huge site. So, thank you Chris Coyier and CSS-Tricks!

 Note:  I have been thinking, and in order for this to give a good result your image aspect ratio would need to be 4 x 3 so that it reaches down effectively at sizes like 1024 x 768 or 1600 x 1200. However the width would need still need to be 1920 so that it also stretches to 1920 x 1080. Which makes the vertical value 1440. So, 1920 x 1440 is what you need. Which is pretty big and may be difficult to bring down to 300KB, which is the limit on blogspot background images. Read more on browser sizes and background images here  ) 

................................................................................................................................