admin »
20 April 2009 »
In Ajax Articles »
This example shows you how to integrate your Twitter on your website. It uses some custom javascript code, and it also uses the scriptaculous library to use a sliding effect. In this example it will show the 5 latest entries from your Twitter account.
You can see a video of how this works, shown in the demovideo of the template “Personal Homepage”.
We will start with the html file, in this case: index.html. You need to add the following code in the head section:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css" />
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script><script type="text/javascript" src="js/ajax.js"></script> |
And then, somewhere in the body tag, you need to add this code (this is the code for showing the Twitter feed).
<body>
<div id="twitter" class="list">
<h1>Twitter</h1>
<img id="spinner-twitter" alt="spinner" src="#" width="16" height="16" />
<div id="list-twitter" style="display: none;"></div>
</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/SveinErik.json?callback=twitterCallback2&count=5"></script>
</body> |
As you can see in the last line, you can see the name “SveinErik”, that is my Twitter username, so you need to put your own username there. The last thing, the magic, is found in the Ajax.js file (also included in the .zip file), this is where the actual javascript code for both getting the feed from Twitter, and also a function for showing how long ago each status update was written (like 2 days ago etc).
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
if (delta < 60) {
return 'less than a minute ago';
}
else if (delta < 120) {return 'about a minute ago';
}
else if (delta < (60 * 60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
}
else if (delta < (120 * 60)) {
return 'about an hour ago';
}
else if (delta < (24 * 60 * 60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
}
else if (delta < (48 * 60 * 60)) {
return '1 day ago';}
else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
function twitterCallback2(twitters) {
var statusHTML = "";
for (var i = 0; i < twitters.length; i++) {
statusHTML += '<li>' +
twitters[i].text + ' <small>(' +
relative_time(twitters[i].created_at) +')</small></li>';
}
$('list-twitter').innerHTML = '<ul>' + statusHTML + '</ul>';
$('spinner-twitter').hide();
$('list-twitter').slideDown({ duration: 2 });
} |
You can download the .zip file, containing a fully working example. This is the same code as used in the template “Personal Homepage”, which also include similiar ajax effects to grab the feed from both Twitter, Delicious and Flickr. It is available for only $9 in the shop.
Good luck!
Continue reading...
Tags: ajax, Feed, twitter, web 2.0, web design, webdesign
admin »
20 November 2008 »
In Css Articles »
Are you tired of pulling your hair when you test your new, amazing website in different browsers? Maybe the div’s is not where you want them to be, the font-size is different etc. There is hope!
The purpose of css reset / stylesheet reset is to neutralize the areas where the different browsers is inconsistent, e.g margin, line-height, padding and so on. When using a css reset, all the styles that are reset in the stylesheet is reset to “zero”, giving all the browsers the same starting point.
Applying the css reset is simple. Luckily there are many examples of reset stylesheets on the web. I like to use Yahoo’s stylesheet reset. All you have to do to apply the css reset from Yahoo, is to include the following line in your html file, before you link to your own stylesheet:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css"> |
If you want more information on using this css reset style, visit the Yahoo Developer Network
Continue reading...
Tags: css, css reset, webdesign
admin »
31 July 2008 »
In Ajax Articles »
In many cases, you want to show pictures on your website. In some of these cases, you’ll want users to upload their own pictures. This could mean that you would have to build an upload system, with lot’s of security issues around it, and it also means that you’ll have to have a lot of webspace available at your webhost. Luckily, there is a really easy and neat solution to this.
Flickr has been the number 1 for storing pictures online for some years, and they are offering developers a nice API, which means that we can use many of their functions in our own solutions. In this case, we are going to use it to grab the latest pictures from a Flickr group. But how? With JSON (JavaScript Object Notation). Jquery is able to transfer data between domains, and this means that with a little code, we can use this to show our pictures from the rss feed from the Flickr group.
I’ve put together an example on how to do this (you can download this as a .zip file at the bottom of the article).
What you need to pull this together is:
- Jquery
- A couple of lines in your htm file
- Another couple of lines in your css document
- A Flickr rss (doesn’t have to be yours, just a Flickr rss)
This is the code you need to put in your htm file (in the head tag):
<link rel="stylesheet" type="text/css" title="My style" media="screen" href="jsonstylesheet.css" />
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script> |
And put this where you want inside the body tag (change the url to your own Flickr Rss feed):
<script type="text/javascript">
$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=807213@N20&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images")
.wrap("<a href='http://www.csstemplatesweb.com/ajax-articles/json-flickr-feed-example/'></a>");
});
$("#title").html(data.title);
$("#description").html(data.description);
$("#link").html("<a href='http://www.csstemplatesweb.com/ajax-articles/json-flickr-feed-example/' target=\"_blank\">Click here to get to the Flickr group</a>");
//Notice that the object here is "data" because that information sits outside of "items" in the JSON feed
});
</script> |
You also need to put this into your body tag (where you want the images to show):
<p>Only the last 20 pictures added to the Flickr group will show. To check out all the pictures, go to the Flickr group here:</p>
<p id="link"></p>
<div id="images"></div> |
To add some styling, add this in you css file:
#images { width: 500px; padding:0; margin:15px 0px 0px 100px; overflow: hidden; }
#images img { border:none; padding-right:5px; padding-bottom:5px;} |
That’s it!
Here is a little screenshot on how it will look. Of course, you can style it the way you want with css.
You can download the zip file, containing all you need.
You can also buy the “Personal homepage” css template, containing this function (only a bit more fancy), plus it integrates feeds from both Twitter and Delicious as well.
Continue reading...
Tags: ajax, Feed, Flickr, Javascript, jquery, Json
admin »
18 July 2008 »
In Web developer tips »
One of the first things you should think of when starting the development of a new fresh website, is what colors you want to use. Many people don’t think of this as that important, but it is! According to studies, the right combination of colors is very important to grab your visitors interest. Luckily, Adobe has created a great tool for making this easier for us, it’s called Adobe Kuler.
With Adobe Kuler you have several ways to find the right colors for your website. You can simply log in to the Adobe Kuler website and browse your way to find a nice colorschema.
As you can see from the screenshot, there is many existing schemas that is free for you to download.
If you already have a picture that is going to be central on your website, you can upload the photo, and Adobe Kuler will extract central colors and make a color schema from it, pretty neat!
I recommend you to try Adobe Kuler. It’s a great tool for choosing colors for your website.
Continue reading...
Tags: Adobe Kuler, color, color scheme, colorschema, colorscheme
admin »
17 July 2008 »
In Css Articles »
You’ve probably seen it on many pages, and wondered how they style only external links in a special way. The most used method is to add a a small image on the right side of the link, to show the user that the link is an external link.
It’s also possible to show the user that the link refers to a pdf, word file etc. I’ll show you both how to style to an external link and to a specific file type.
This is how you can style a link to an external site, using css:
a[href^="http:"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
} |
What happens here, is that the “^” character allows you to target an attribute that starts with a specific text, in this case “http:” – which of course is an external link.
And this is how you would do it if you wanted to style a specific type of file link, in this example all the pdf files that are downloadable, would have an image to the right of the actual link:
a[href$=".pdf"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
} |
This is a nice and easy technique to make your text and links a little more stylish. I’ve attached a zip file containing all the icons as you can see on the below picture. Should be enough to get you started. Good luck.
Continue reading...
Tags: css, external links, style
admin »
17 July 2008 »
In Css Articles »
To save both space and frustration, it is often wise to use css tooltips to show a small popup with some helping words to the readers of your webpage. It’s very easy to make, looks great, and you keep your readers from dissapearing from your site.
How to make the css tooltip:
You have to put the tooltip text inside the span attributes. The html look like this:
This is just some text, and if you <a href="#">Roll your mouse over here <span>Then this text will show as a pure css tooltip</span></a> which is pretty neat! |
And the css looks like this:
a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
} |
So now you know an easy way to show really nice and helpful tips to your users, with the help of only pure css tooltip. Good luck!
Continue reading...
Tags: css, css tooltip, html, tooltip
admin »
08 May 2008 »
In Web developer tips »
What about spicing up your website with some Web 2.0 design? Web 2.0 styles have been very popular in the last couple of years, and thus, many online generators have been made. If you’re looking for web 2.0 buttons, badges, logos or backgrounds, there is a free online generator waiting for you!
Stripe Generator:
Stripe Designer:
Quick Ribbon:
Web 2.0 Logo Creator:
Ajax Loader Generator:
Tabs Generator:
Buttonator:
Web 2.0 Badges:
Freshbadge:
[ad#PostsBottom]
Continue reading...
Tags: design, design generator, logo, online design tool, web 2.0, web design
admin »
07 March 2008 »
In Web developer tips »
Good page design isn’t just about shiny buttons, polished reflections and subtle gradients. An understanding of web typography is essential if your site is to be more than mere eye candy.
Typography is about more than just choosing the right fonts for your design. Think of it as encompassing everything on your page even remotely to do with text on your page. This includes the way it looks, the space around it, how it relates to neighbouring text, line-spacing, proportional sizes, leading, kerning – the list goes on. And since a good website is nothing without content, the typography is as important part of the overall design as any other.
Font choice is an obvious place to start. There is no right or wrong when it comes to the individual fonts, but keep in mind that any text rendered as HTML needs to be a standard web font, so make sure any graphical headings work well alongside the HTML text. Limit yourself to no more than tow or three font styles on a page, with each having a distinct purpose (section headings, pull-out quotes, etc). The same applies to font sizes. This not only makes the page look neater and clearer to read, but can also cut down the amount of CSS styles needed when you construct the HTML.
White space (or negative space) is the space between elements on the page, and is one of the most important typographic tools at your disposal. It allows you to draw the reader’s focus to important text, emphasise content and improve readability. Unfortunately it remains one of the most misunderstood by clients, who frequently try to fill dead space, resulting in cluttered-looking pages.
Line length is also key in creating a clean, readable layout. Studies have found that participants read varying line lengths at similar speeds, but expressed a preference for lenghts of around four to six inches (or 10-15 words). This fits the natural arc of the eye, meaning it has to travel less, thus the visitor can give their full concentration to our carefully crafted page content.
[ad#PostsBottom]
Continue reading...
Tags: fonts, layout, typography
admin »
03 March 2008 »
In Web developer tips »
When you develop websites, it’s very important to check that your new amazing website looks the same way in all browsers. This is something many designers forget to check, and another question is: how to do it? It’s not normal to have all kinds of operating systems installed on several servers to test the design.
The solution
To test your beautiful, newly created web design in all available browsers, running on different operating systems, all you have to do is to visit 1 website! It’s called Browsershots. Here you can just paste the url to your site, and it will generate screenshots of your page in all the browsers on different operating systems, ensuring you that your web design will look the same no matter what system the users are running.
Screenshot from browsershots:
[ad#PostsBottom]
Continue reading...
Tags: web design
admin »
28 February 2008 »
In Ajax Articles »
AJAX (Asynchronous JavaScript and XML), or Ajax, is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactivity of web pages achieved by exchanging small amounts of data with the server “behind the scenes” so that entire web pages do not have to be reloaded each time there is a need to fetch data from the server. This is intended to increase the web page’s interactivity, speed, functionality, and usability.
AJAX is asynchronous; in that extra data is requested from the server and loaded in the background without interfering with the display and behavior of the existing page. JavaScript is the scripting language in which AJAX function calls are usually made.[1] Data is retrieved using the XMLHttpRequest object that is available to scripting languages run in modern browsers, or alternatively Remote Scripting in browsers that do not support XMLHttpRequest. There is, however, no requirement that the asynchronous content be formatted in XML.
AJAX is a cross-platform technique usable on many different operating systems, computer architectures, and web browsers as it is based on open standards such as JavaScript and the DOM. There are free and open source implementations of suitable frameworks and libraries.
Constituent technologies
AJAX uses a combination of:
- XHTML (or HTML) and CSS, for marking up and styling information.
- The DOM accessed with a client-side scripting language, especially ECMAScript implementations such as JavaScript and JScript, to dynamically display and interact with the information presented.
- The XMLHttpRequest object is used to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server, and in other implementations, dynamically added
<script> tags may be used.
- XML is sometimes used as the format for transferring data between the server and client, although any format will work, including preformatted HTML, plain text and JSON. These files may be created dynamically by some form of server-side scripting.
Like DHTML, LAMP, and SPA, Ajax is not a technology in itself, but a term that refers to the use of a group of technologies.
The “core” and defining element of Ajax is the XMLHttpRequest object, which gives browsers the ability to make dynamic and asynchronous data requests without having to reload a page, eliminating the need for page refreshes.
Besides XMLHttpRequest, the use of DOM, CSS, and JavaScript provides a richer “single-page” experience.
[Source: wikipedia]
Continue reading...
Tags: ajax, html, programming, web, xhtml
