Sunday, August 19, 2012

Clone of w3schools.com is out on ScriptCart

Today, we are announcing  a replica website of popular web tutorial portal  w3schools.com  , after a huge demand from our visitors for clone of this website.

This can be downloaded directly from our website http://techbrush.org but you need to contact us for the download link. we  will provide a zip archive which works exactly like a live site on your local machine and a good option for people with rare internet access or slow speed or limited data uses. So  you can keep this replica of w3school on your computer and surf like online site freely.

The content is highly copyrighted and has been only provided for the convenience of the users, it can not be used for any  financial or business benefits under any circumstances.

If you want to own a similar website for personal , professional or business use, please contact us for the fully functional site with complete ownership of the content , customized design and layout.

Click Here To View Demo




References’ basis in PHP

The first step is to answer the following question: What are references? In PHP references are a way to access to the content of a variable by others names. We will briefly cover the three different kind of references available in PHP.

1. References as a function’s parameter


By default, PHP handle the variables you send to a function locally, what I mean is what is in the function stay in the function. By passing a reference you will make your local function variable referencing to the variable in the calling scope of your application. Here is a short example with and without references.


<?php
/**
* Using references
*/
function foo(&$var){
$var++;
}
$a=5;
foo($a);
echo($a); //Will display 6
?>





<?php
/**
* Without references
*/
function foo($var){
return $var++;
}
$a=5;
$a=foo($a);
echo($a); //will display 6
?>



2. Return by references


Another case is to return a reference. But you have to be very careful with this one because with some tricky code you can access to the private attributes of a class and indeed modify their values.
Here is a classic use of a return reference:


<?php
class Personne {
public $age = 22;

public function &getAge() {
return $this->age;
}
}

$obj = new Personne();
$myAge = &$obj->getAge(); //$myAge is a reference to $obj->age, which is 22.
$obj->age = 18;
echo $myAge; //will display 18
?>



And now we will see that we can modify a private attribute by using a return reference:


<?php
class Personne {
private $age = 22;

public function &getAge() {
return $this->age;
}
public function __toString(){
return $this->age;
}
}

$obj = new Personne();
$myAge = &$obj->getAge();
$myAge = 897; //the private attribute $age has been modified
echo($obj); //unfortunately it will display 897
?>



3. Assign by references


The last case and the easiest is the assignment. It is done just like that:


<?php
$a =& $b;
?>



Which means that $a and $b reference to the same content.

In conclusion, references might seems pretty useless with these examples but it is actually wise to use some of them when you are working on a complex software architecture with a lot of objects using others objects. It is also nicer to avoid the $var=foo($var).

Add a ‘Share this on twitter’ link

In this article we will discuss about how to add a link which allow your visitors to immediately share an article from your website to their twitter account. Nowadays it is a very common feature on website and it will bring new audience. You will see that it is actually pretty simple.

First step: find a nice twitter icon. When it is about icons, I always check this website: http://www.iconfinder.net. You have plenty of choice just pick up one, for this example I choose this icon:



Ok, now we are ready to create our ‘share this on twitter’ link.
Twitter is almost making all the work for us, the only thing we have to do is to access the http://www.twitter.com/home page and add some parameters like the URL to your article.

In this example the link I should use to share this article on twitter would be:
http://twitter.com/home?status=http://www.florian-hacquebart.eu/?p=113

You just need to give the link to your article. This link has to be permanent, otherwise it will not work if any changes are made.

Here is the final code to display the image and link it with twitter:


<a href="http://twitter.com/home?status=http://www.florian-hacquebart.eu/?p=113">
<img src="twitter_button.png" alt="share this article on twitter" />
</a>



Here is the result of our example:



Of course what you can do is display a pop-up towards Twitter so your visitors can still browse your website. Here is a snippet code to do so:


<html>
<head>
<!-- other smart stuff here... -->
<script type="text/javascript">
function popup_share(url, width, height)
{
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(url, '" + id + "', 'toolbar=0,scrollbars=1,location=1,statusbar=0,menubar=0,resizable=0,width=" + width + ", height=" + height + ", left = 363, top = 144');");
}
</script>
</head>

<body>
<!-- other smart stuff here... -->
<a href="javascript:popup_share('http://twitter.com/home?status=http://www.florian-hacquebart.eu/?p=113',800,320)" title="Share on Twitter">
<img src="twitter_button.png" alt="share this article on twitter" />
</a>
</body>
</html>



This is the basic idea you can add other parameters to indicate a title, etc. I choose twitter for the article, but you can easily adapt it for other social network websites like Facebook, MySpace, etc it is the same pattern expect that you will have to modify the URL and its parameters (which are indeed specific to each platform).

CakePHP: working with Elements



One of my favorite PHP framework at the moment is CakePHP, it is not very different from others frameworks like CodeIgniter, Symphony, etc.

In this article I will present you a very handy feature of CakePHP: the Elements.
An element (like it is named) is a part of a web page which can be display into multiple pages (a sort of template if you want). Here are some elements’ examples:

  • A header: with your banner, your brand logo

  • A menu: with your categories, links

  • A footer: company name, copyright


In CakePHP, Elements are located in the app/views/elements/ directory (or if you are using a custom theme you can create specific elements and put them in the /app/views/themed/your_theme_folder/elements/ directory).

So let’s get started. We will create a basic element which will display ‘Hello World!’:


<h1>Hello World</h1>



You can save this Element: app/view/elements/helloworld.ctp
The last step is to include the element in our pages, to do so you just have to request it like that:


/*For instance I want to display Hello Word on my app/views/posts/index.ctp page:*/
echo $this->element('helloworld');



Elements using Controller with requestAction


Displaying basic information is great, but it would be much more better if we could access to our data and request something like the five latest comments or posts added. This is indeed possible through the requestAction method.

First of all, we have to add a method in our controller which will allow us to retrieve the data we want to render.


/* For instance I want to display the 5 latest posts on my index page. */
public function lastposts($limit=5)
{
/* We retrieve only the required fields, and configure the query. */
$posts = $this->Post->find('all', array('fields'=>array('Post.id', 'Post.name', 'Post.created'),
'recursive'=>0,
'order'=>array('Post.created desc'),
'limit'=>$limit));

if(isset($this->params['requested']))
{
return $posts;
}

$this->set('lastposts', $posts);
}



Second of all, we create our element. This step is exactly the same as what we have done before, create a page called lastposts.ctp in your app/views/elements/ directory but this time there will be more code’s lines. The first thing to do in your element is to get our data, to do that you will have to use the requestAction method, now you are ready to display your latest posts:


<?php 
/* First step: get the latest posts, the URL should be like your_controller_name/method_name/params */
$posts = $this->requestAction('posts/lastposts/5');
?>

<h3>Our latest posts</h3>

<ul>
<?php foreach($posts as $post): ?>
<li><i><?php echo $post['Post']['created']; ?></i> : <?php echo $post['Post']['name']; ?></li>
<?php endforeach; ?>
</ul>



To get the job done we have to display our element in a page. We have already done that before, do it again:


echo $this->element('lastposts');



You should now be able to see the posts on the page. You also may see a little issue when you try to display the page, it takes an extra time to load it. The requestAction method is the responsible.

Enable cache for requestAction


To make things right and avoid that extra consuming resources, you can and should enable the caching functionality for your element. It is very simple and your visitors, as much as your server, will see a significant reduce during the pages’ load.


echo $this->element('lastposts', array('cache'=>'1 hour');




 

 

How to clean URL in PHP



Have nice and clean URL on your website is mandatory to provide a better visibility on search engines. Let’s say you want a URL like that: http://www.florian-hacquebart.eu/news/161/clean-url-in-php you will have to use URL rewriting which is not the first subject of this post but for instance you will have to generate a specific string: clean-url-in-php instead of Clean URL in PHP.

You can do that by using regulars expressions:


function cleanURL($title) {
$title = preg_replace("/[^a-zA-Z0-9/_|+ -]/", '', $title);
$title = strtolower(trim($title, '-'));
$title = preg_replace("/[/_|+ -]+/", '-', $title);

return $title;
}



What are we doing in this function:

  1. First of all we remove any characters which are not a letter from the alphabet, a number or a special character (/,_, etc).

  2. Next we trimmed the string and lower the characters.

  3. Finally we replace character like +,[,_ with a -.


Let’s see step by step what this function is doing this string: I’m # an example !

  1. Im an example

  2. im-an-example

  3. not even needed



 

 

How to create your first jQuery plugin



In this article I will show you how to create a simple jQuery plugin menu.
First of all, check this demo so you know where we are heading to: smoothymenu plugin.

As you can see, we will create a plugin to render a menu with fading effect on its items.
The first step to create your plugin is to download the latest jQuery library at jquery.com.

Now you can create a new JavaScript file, this file will contain the main function of our plugin (our plugin will also use a CSS file). To declare a plugin function in jQuery you have to use this syntax:


jQuery.fn.smoothymenu = function() {}



Before we get started with the Javascript let’s take a look at an HTML example file. By doing this we can define the basic structure of our menu:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SmoothyMenu Jquery plugin</title>
<link href="css/smoothymenu.css" rel="stylesheet" type="text/css" media="screen"></link>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery/smoothymenu.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul#menu').smoothymenu();
});
</script>
</head>
<body>
<h1>SmoothyMenu Jquery plugin</h1>

<ul id="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</body>
</html>



As you can see I apply my plugin on a list with an id. Now we can write our plugin, the first step is to retrieve the element we will work with. In or case the list, to do that you can create a variable:


var menu = $(this);



After that, we want to apply some styles to our menu so we will programmatically add a class to the menu. This class is in our CSS plugin file and will be provide with the JavaScript file (of course the end user will be able to customize the CSS to match his needs).


menu.attr('class', 'smoothymenu');



Here is the trick to create the fade in/out: we add a block to each menu item, if the mouse if out of the item it will be not visible, when the user will hover an item we will fade it in and vice-versa.


/* Append the specific effect block to each menu items. */
menu.find('li').append('<div></div>');

/* Apply an effect on the hover of an element of the menu. */
menu.find('li').bind('mouseover', function(){
$(this).find('div.hover-effect').stop().fadeTo('fast', 1);
});

/* Apply an effect when the mouse is out of an element of the menu. */
menu.find('li').bind('mouseout', function(){
$(this).find('div.hover-effect').stop().fadeTo('fast', 0);
})



Ok we are done, of course you can add parameters to your function and do more complexes operations.
I tried to keep it it simple in this example, to sum up here is the whole smoothymenu plugin function:


jQuery.fn.smoothymenu = function()
{
var menu = $(this);

/* Define the class of the menu */
menu.attr('class', 'smoothymenu');

/* Append the specific effect block to each menu items. */
menu.find('li').append('<div></div>');

/* Apply an effect on the hover of an element of the menu. */
menu.find('li').bind('mouseover', function(){
$(this).find('div.hover-effect').stop().fadeTo('fast', 1);
});

/* Apply an effect when the mouse is out of an element of the menu. */
menu.find('li').bind('mouseout', function(){
$(this).find('div.hover-effect').stop().fadeTo('fast', 0);
})
};



You can download the sources right here: smoothymenu jquery plugin sources (see the demo).

Sunday, August 12, 2012

A beautiful JQuery Image Slider



JQuery galleries are most liked part on this blog So I decided to create another one.This Slider is a beautiful image slider for your web applications. I created this for those people who needs a fancy jquery image slider with a simple to use but for limited number of images. This slider accepts two lists of images, each list will have 12 thumbs limit which means you can add 24 images in this gallery. Currently this version has some limitations such as number of images to be used and maximum limit of images. But it is one of best gallery I have created.
This slider has feature such as:

- Play Paus Button
- Navigate through First and Second List
- Control images with Arrow keys on Keyboard
- Click to see a specif image
- Caption on Images

 

Limitations :


There are few limitations in this gallery such as you have to use 6,9 or 12 images for one slider. It means if you have 5 images then you cant use this slider. If you have 9 then add all thumbs in first list and assign var totalThumbsFirstList = 9;
and set var totalThumbsSecondList = 0; If you have 18 Images then assign 12 to first and remaining 6 to second list and then you will define param like this:

var totalThumbsFirstList = 12;
var totalThumbsSecondList = 6;

In short this is perfect for 12 or 24 images so try to use 12 or 24 images. We have another variable for controlling the sliding interval which is :

var Interval = 6000;//6 seconds


I created this by inspiring the design from premiumpixels.com Special thanks to Orman for this. I hope you will like this gallery. Previously the other image galleries are really appreciated by you guys. I received lot of emails from the readers mostly from India, USA, Indonesia, Pakistan, France and UK and all from the world. I really appreciate your love for the blog and your kind words keep me buys in creating beautiful tutorials for you guys. Thanks again :)

Popular Tutorials on Dalip.in


Merging Image Boxes with jQuery

Today we will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter ...



View demo | Download source

Today we will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter into the little box shaped thumbnails again.



When the window gets resized, the positions of the thumbnails will automatically adapt to fit the screen. We are using the jQuery 2D Transform plugin for the animated rotation. You can find the plugin here:

http://plugins.jquery.com/project/2d-transform



The beautiful photographs are by tibchris and you can find his stunning works on his Flickr page:
http://www.flickr.com/photos/arcticpuppy/



When navigating through the full images, we will reveal the next or previous image by removing the current image box by box.

Have fun with the demo and download the ZIP to experiment with this cool effect!
The whole animation looks best in Google Chrome and Apple Safari.

View demo | Download source

Friday, August 10, 2012

5 Common Web Design Mistakes Small Businesses Make (and How to Avoid Them)

navigation

In today’s interconnected world, websites play an integral part in the branding and marketing of every company. A web design mistake will directly affect your customer relationship and can have a negative impact upon your business.


In order to create an awesome user experience for your clients and make sure you are engaging them, avoid making the following mistakes:

#1. Spelling and Grammar Errors



Spelling and grammar mistakes can make your website look unprofessional and detract from your credibility. Usually, the message you’re sending out is more important than a small grammatical error, but there are users who won’t consider your business professional enough, and they won’t link to you, subscribe to your updates or buy any kind of product or service from your company if you make spelling/grammar mistakes.

How to avoid it:


Check out the excellent list compiled by the people over at LitReactor. It should give you a good idea of the mistakes you need to avoid.

#2. Poor Navigation and Internal Linking



A very important aspect of a visitor experience on your company’s website is usability. A well-designed navigation and internal linking system guarantees all crucial areas of your website can be reached quickly and easily.

Make sure you’re not creating a frustrating experience for your visitors – they access your site for specific information which should be readily available and easy to reach from any point on your website. Think of your website as a map in which any area can be reached from any other area, with a central navigation for the main areas of your website. Always remember that navigation within a website should be seamless.

Here are a few tips on how to design a seamless navigation for your website:


  • Create focus points. These are parts of a page that are highly attractive and will capture the user’s interest. Use stronger, higher-contrast colors and larger fonts for your focus points.




  • Write short, interesting descriptions for each point. These should encompass the idea you’re trying to transmit and be interesting enough to maintain the visitor’s attention.




  • Any other text should be short and easy to read. Only provide essentials, as people will read short pieces of text but will be put off by long paragraphs.




How to avoid it:


While creating the navigation for your website, remember the 10 Principles of Navigation Design.



#3. No Contact and Social Sharing Buttons


We live in an increasingly social world and your visitors will most certainly want to share what they like. Sharebars, social buttons, floating widgets for liking, tweeting, pinning, e-mailing and more will make sure your visitors will never cut a frustrated figure when it comes to sharing. This is also a case of “the more, the merrier” as you’ll definitely enjoy the delicious traffic increase from social media.

Also, make sure you have a Contact or About page available where your visitors can engage with you – be it via a simple form, a Twitter handle, your Facebook page, site comments or owl-delivered mail.

How to avoid it:


There are many plugins that can assist you in creating contact forms (cformsII) and social sharing buttons. The PageLines Framework has this functionality built in, and you can extend it with plugins from the Store (ShareBar Extended, Social Excerpts). Additionally, there are many social sharing plugins to be found in the  WordPress Directory..

#4. No Call-to-Action (CTA) Buttons


 

Now that you’re driving a fair amount of traffic to your website and things seem on the right track, you have to think about leading those visitors somewhere. That traffic is essentially useless if the visitors don’t land where you want them to land or if your CTA button is buried somewhere in a sea of text.

You need to invest time and research into crafting a good CTA button and positioning it according to the action you want your prospective clients to take. Do you want visitors to subscribe to your blog? A carefully placed “Click Here to Subscribe” button on all blog pages and posts will do wonders to your subscription list. Do you want customers to buy your product? Place a button on your pricing page, homepage or even blog page. Always remember to make your Call to Action stand out.  The possibilities are endless!

How to avoid it:


Follow the awesome guide put together by the people at Uxbooth on good Call-to-Action buttons. It should give you a great head start on designing better CTAs. Remember, don’t overdo calls to action. Don’t have multiple CTAs on the same page or they will be competing against each other which will take away visitors from your main target.

#5. Content | c o n t e n t | CONTENT



Quick — think of the first reason why people should visit your website! If you said anything other than content, you’re doing something wrong. Your website content encompasses everything that can be seen (and heard, although we’re totally against background music) by a visitor.

It is fundamental that your website has a well-defined content strategy that is followed on a page-by-page basis. Your content should be interesting and valuable, while also engaging the user. Your readers are not going to be going over every single word on a page, so focus points need to be emphasized here as well. Create a strong  visual content hierarchy so the points of interest can be reached easily.

And while we’re discussing content (essentially what IS on the webpage), we’d also like to take the time and mention the impact white space has on general website design and page streamlining. It is, arguably, the most important factor to consider as it has the strongest impact on what text section your readers focus on. This has a lot to do with page clutter, which will quickly turn any visitor away. You can read more about the importance of white space in web design here and here.

How to avoid it:


This piece of advice might leave you cutting this figure, but we cannot stress how important simplicity and sticking to the point is: write interesting, meaningful content while keeping your general strategy in mind and you won’t fail. Too many small business websites make the mistake of putting too much or too little thought into their content strategy. Write down your organization’s mission statement and objectives and emphasize them through text. Write content that you find interesting and adapt to your readers’ preferences. Bonus tip: keep comments enabled and accept feedback. It will help you grow!

10 Principles Of Navigation Design And Why Quality Navigation Is So Critical

If content is the heart of every website publication, then navigation is its brain and a fundamental pillar of information architecture design. When dealing with large quantities of content, the critical importance of navigation cannot be overestimated. Content that can’t be found can’t be read. If content can’t be found and read, this means that there’s a lot of cost but zero value.

Navigation is the website’s “table of contents”. In traditional publication, you have page numbering to help you navigate. You can hold the publication in your hands and flick through it. If it’s a large publication, there is usually an index at the back that can be used. However, you can’t hold a website in your hands.

Principles Of Navigation Design

You can’t get an immediate sense of its size or complexity. You navigate a website one screen at a time. That can be very disorientating. It’s very easy to get confused and get lost. A reader who gets lost or confused in this attention-deficit age is likely to hit the “Back” button. Therefore, creating a navigation system that makes the reader feel comfortable, and allows them to find the content they want quickly, is critical to the success of any website.

Designing navigation is like designing a road-sign system. The over-riding design principle is functionality, not style. A reader on the Web, like a driver in a car, moves quickly. Navigation is never the end objective for the reader. It is there to help them get somewhere. (Most people don’t stand around admiring road signs.) Navigation works best when the reader hardly notices it’s there. Therefore navigation design should always be simple, direct, unadorned, with the overriding objective of helping reader get to where they want to go.

Navigation and search are intertwined. Search is a form of navigation. In many situations, the reader will use a combination of the "content gatherers". They will use search to bring them to the subject area or product type they are interested in. Then the navigation should kick in, giving them the context for their search.

Navigation design requires detailed planning. Once launched, it is not something that should be chipped and changed at every whim. You should treat your navigation as if they are “written in stone” because you risk confusing your regular readers (customers), and these are the people you should avoid confusing at all cost. People are by nature, habitual and conservative. If every few months you change the structure and navigation of your website, you will risk alienating regular visitors who have gotten used to your previous formula.

THE 10 PRINCIPLES OF NAVIGATION DESIGN


1. Design for the reader


The fundamental principle of navigation design is that you should design for the reader - the person who uses the website. Avoid designing navigation simply for it to look good. Also, avoid designing navigation from the point of view of the organization, like using internal, obscure classification names that aren't commonly understood.

Remember, navigation is an aid for the reader. Unless you've engaged them and found out how they like to navigate, it is difficult to design navigation that will meet their needs.

When designing navigation:

  • Involve readers from day one by surveying or interviewing them about how they would like to navigate the content.

  • Create mock-ups of the navigation as early as possible and show them to a sample of readers to get feedback.


2. Provide a variety of navigation options


If everyone were to navigate through content in the same way, the job of the navigation designer would be a lot easier. Unfortunately, different readers have different preferences on how they like to navigate around a website. Therefore, to accommodate a variety of readers and their navigation requirements, a range of navigation options should be offered.

Threadless
Navi Options

Some readers like to navigate geographically. Others navigate by subject matter. And some want to read the most recent documents similar to those they have just read.

No single navigation option will fulfill all the above wishes.

Navi Options

To allow the reader to navigate the content in any manner they wish:

  • provide a variety of navigation options;

  • use multiple classification.


3. Let readers know where they are


Navigation should give readers a clear and unambiguous indication of what page of the website they are on. Imagine you are on holiday and you are looking at a map in a town square. If the map is well designed, one of the most prominent features will tell you - "You are here."

CNN International
CNN Header

CNN supports the reader very well in this. On CNN's entertainment page, you will see the masthead in bold capitals, the word "ENTERTAINMENT".

Navigation should be presented as hypertext. However, where it is in graphical form - which is recommended only for global navigation - the classification name that describes the page the reader is on, should be a different design form the other classifications in the navigation.

InStyle Weddings
Instyle Navigation

To let readers know where they are:

  • have prominent titles for every page to tell readers immediately what section of the website they are on;

  • make sure, if part of the navigation is in graphical form, that the link describing the page the reader is on is a different design to the other links in that navigation.


4. Let readers know where they've been


A fundamental principle of web navigation design is to let readers know where they've been on the site. This is a key reason to have as much of the navigation as possible in hypertext, rather than graphical form. With hypertext, when a link is clicked its colour changes. The standard colours for hypertext are blue for unclicked links, and purple for those that have been clicked.

To let reader know where they've been:

  • keep as much navigation as possible in hypertext;

  • use blue for unclicked and purple for clicked.


5. Let readers know where they are going


Navigation should let readers know where they are going. The way to achieve this is to create classifications that are as self-explanatory as possible.

Number of ways to achieve greater clarity:

  • When readers click on a link they expect to go to an HTML page. If you intend them to go to a non-HTML page (PDF, Microsoft Word, etc.), inform them in advance.

  • If readers click on a link they expect to stay within the browser window they are currently operating within, unless you specifically tell them otherwise. Open new browser windows for a reader only when there is a compelling reason.


ASOS
Asos Title Text

Facebook
Facebook Title Text

  • If the navigation element is an image, such as a company logo, and is linked to the homepage, insert ALT text that says something like "Company Homepage."


Asos Navibar

  • Change the colour of the link when the mouse rolls over it. This is helpful when there are many links placed close together. Because the link changes colour, the reader knows exactly which link they are about to select.


Asos Dropdown

  • Consider drop-down navigation, showing lower levels of the classification, when the mouse rolls over a particular link. This allows the reader to navigate further into the website if they wish.


Golden Village Ticket Purchasing
GV Payment

  • Where the user is asked to participate in a process, such as purchasing a product online, having a progress chart navigation can be helpful. This shows the user how many stages there are in the process, and what stage they are at.


6. Provide context


A primary function of a homepage is to provide context for the reader. Home page navigation is not simply about functional navigation such as hypertext and search. It also takes content highlights from the content archive, presenting them as summaries and or features.

For navigation to provide the best possible context:

Asos Context

  • ensure that all content is properly classified;

  • allow for a variety of product/selection homepages that publish the most relevant and positive content for that particular product or section;

  • use related navigation at the end of a document that gives links to similar documents or websites.


7. Be Consistent


Readers turn to navigation when they're confused or lost. Don't confuse them further by displaying inconsistent or unfamiliar navigation design. Consistency for classification is critical for successful navigation.

Navigation design requires:

  • consistent classification;

  • consistent graphical navigation design;

  • consistent hypertext colors.


8. Follow Web Convention


Many people instinctively see the Web as a single medium. They like to carry over navigation skills that they acquire on one website to other websites because it makes life easier for them.

Over time, a number of navigation conventions have emerged on the Web. The designer who deliberately avoids these conventions, just to be different, achieves nothing except to confuse the reader. Go to the biggest and best websites. See how they design their navigation. Don’t feel ashamed to imitate the best practice you find.

Follow the navigation and classification conventions that have emerged on the Web. They include:

Freelance Switch
Freelance Globalnav

  • Global Navigation – this refers to navigation that runs across the top and bottom of every page, containing links to the major sections of that website.

  • "Home" is the convention for the name of the overall homepage.

  • "About" contains content describing the history, financial performance, goals, and mission statement etc. of the organization. E.g. "About Sony".

  • "Contact" or "Contact Us" contains contact details such as email, telephone, address, or location details.


Cold Storage Supermarket Online
Coldstorage Globalnav

  • Organisation's logo should appear on the top left of every page. It should also be linked back to the homepage.


DIY Network
DIY Globalnav

  • Search box should be available on every page of the site. It should be placed on the far right of the masthead.


Freelance Footer

  • Every page should have a footer, containing global navigation as hypertext.


9. Don't surprise or mislead the reader


Never ask the reader to do something it is impossible or difficult for them to do. A classic example is forcing all users to fill in a "ZIP code" regardless of whether they exist in that user's country. Never offer the reader contact options they can't use.

To avoid surprises for your readers:

  • don't lead them down false navigation paths;

  • clearly inform them of exceptions.

  • don't ask them to do things they can't do.


10. Provide the reader with support and feedback


On any website, the reader should be only a click away from being able to contact the organisation. Contact facilities may involve email, telephone, call-back, or customer chat support. A "Help" link is particularly necessary if the reader is faced with a complex task.

Host Gator
Hostgator

We are used to receiving constant feedback based on our actions. However on the Web, the only viable and immediate feedback is through text. Text must be used in a comprehensive way to inform the reader the result of their action.

Monday, August 6, 2012

How To: Update Your Twitter Status Using PHP.




Twitter is social networking website which keeps your followers with you. Twitter provides an extensive API using which we can update twitter status through PHP code.

 


// Set your username and password

$username = 'YourAccount';

$password = 'YourPassword';

$message = 'Codeigniter Help'; // Which you want to update

$url = 'http://twitter.com/statuses/update.xml';

// Set up and execute the curl process

$curl_handle = curl_init();

curl_setopt($curl_handle, CURLOPT_URL, "$url");

curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);

curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);

curl_setopt($curl_handle, CURLOPT_POST, 1);

curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message");

curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");

$buffer = curl_exec($curl_handle);

curl_close($curl_handle);

// check for success or failure

if (empty($buffer)) {

echo 'Failed !';

} else {

echo 'Status has been updated.';

}

?&gt;