SitePoint » Learn CSS | HTML5 | JavaScript | Wordpress | Tutorials-Web Development | Reference | Books and More

HTML5 and the Future of Online Games

Jarred Draney — Fri, 25 May 2012 17:30:00 +0000

The Golden Child: Flash Games

For several years now Adobe Flash has been the dominate technology used to create online games. It is so popular in fact that the term “flash games” has almost become synonymous with browser based games in general. Take a look at all of the major gaming portals; with a few exceptions, practically all of the games they offer are flash games.

What’s so wrong with Flash you ask? Well nothing really. It was an amazing technology that was used to add all sorts of functionality to browsers. Through the use of a plug-in developers could now include all sorts of interactivity and animated graphics to their web pages. However things are changing, and Flash may no longer be the best fit for many online applications.

Browsers are a lot smarter now and they are only going to continue to get smarter. Rather than relying upon plug-ins to display interactive and graphically intense pages modern browsers can do it all by themselves. Utilizing the W3C, the specification for HTML5, browser makers are including all sorts of functionality into their products
that web developers can now use to make graphically intensive and interactive websites. This has special implications for online game designers. Soon (hopefully) designers will no longer be forced to choose from a select few proprietary technologies that not only are expensive, but also obligate their end users to download, install, and regularly update the respective plug-ins.

The New Kid on the Block: HTML5 Games

Traditionally the role of HTML has been used primarily to define and layout the text on web pages. Over the years, however, its role has slowly evolved to be more interactive. The new HTML5 spec furthers this evolution by including definitions for several additional elements aimed at interactivity, multimedia, and graphics. Combine
these new HTML5 elements with the faster and enhanced JavaScript engines available in modern browsers and you now have a set of tools perfectly suited for online game development.

Some advantages of HTML5 for Games

Not only are the HTML5 technologies well suited for creating browser based games, they offer several advantages over proprietary options. HTML5 is an open technology. It doesn’t cost anything and technically only requires a simple text editor to code in. Never underestimate the power of free. Flash and other proprietary technologies all cost the developer. While this certainly isn’t the only factor that a game developer would consider, it certainly does play a role, and for the small time indie developer it might be a very big factor. Compatibility is another huge advantage HTML5 has. HTML is the lowest common denominator for all web based devices. By using HTML5 you can target a wider array of devices and gadgets without having to specifically port your game to each different platform. Another often forgotten advantage is ease of use. For the technically savvy, downloading, installing, and updating plug-ins is only a minor hassle. However, for less technically savvy users this can be quite a hurdle and just may turn away users altogether.

Some Interesting Charts

Above you will find some charts from Google Trends for the search term “flash games” and then also the term “html5 games”. It is easy to see that searches for “flash games” have been in steady decline for over the past 5 years while searches for HTML5 games have seen some pretty impressive growth in the past 3 years. While this really doesn’t prove anything, it is an interesting metric to help gauge the popularity trends of the two different technologies. It is important to note that these charts show only relative search volume and not overall volume. Per the Google Adwords tool, the monthly global search volume for “flash games” is 11,100,000 compared to a measly 49,500 for “html5 games”.

The Future of online Games

Will HTML5 be the end of plug-in based games? If it is, it is pretty safe to say that it won’t be happening anytime soon. It is estimated that the HTML5 spec will not be fully implemented until 2022. Despite this long time-frame, browser makers are already racing to include all the HTML5 functionality that they can. Game developers have taken advantage of this and created numerous quality games that easily compete with their flash counterparts. Take a look at all these HTML5 games to see some excellent
examples of what is already possible with the new technology.

Given the current search trends and the several advantages HTML5 has over Flash, the future for HTML5 games looks bright. While it is not certain if HTML5 will eventually win out to become the gaming technology of choice, one thing is for certain: the love of online casual gaming has captured the interest of millions and as long as
that interest exists developers will continue to create fun and exciting games.

How Start a Newsletter in Minutes With TinyLetter

Lior Levin — Fri, 25 May 2012 15:00:22 +0000

An email newsletter is a brilliant way to stay connected to your customers or community members. Many people who visit your website may like it. Some may even love it, but if no one reminds them to keep visiting, those people may forget all about it. By inviting them to subscribe to a periodic newsletter, you can turn those site visitors into regulars, and TinyLetter makes it easy to get started in a matter of minutes.

TinyLetter is a free service that makes it extremely easy to setup an email newsletter, share it with subscribers, and even charge them a fee for your high-quality periodical content. TinyLetter is a subsidiary of MailChimp, but it uses a simplified interface and is designed for “distraction free” mass communication with your subscribers, rather than robust email marketing campaigns.

Creating a Newsletter

To get started with TinyLetter, follow these simple instructions:

1. Point your web browser to tinyletter.com

2. Click “Register”

3. Fill out the registration form, including your username, real name (yours or your organization’s), newsletter name, a brief description, your email address, and a password.

4. Click “create my account”

5. Click where it says “click here to get the embed code”. This will allow you to publicize it on your website.

6. Paste the embed code into your website’s code where you want it to appear.

Users should now be able to subscribe directly from your site. Alternatively, you can give them the direct link (tinyletter.com/your-username), which is helpful if you want to share it on Facebook, Twitter, etc.

Sending Your First Message

Once you have some subscribers, you should start communicating with them. Go back to the TinyLetter website and click “Write A Newsletter”. Enter a subject, and start writing just like you would with a normal email message. When you are finished, click “Preview” to get a glimpse of what your message will look like, and then click “Send to all” to make it final.

Other Features
If you already have a contact list of users, you can import their email addresses directly into TinyLetter. On the main configuration screen, click “Import email address.” Note that it has a limit of 25 email addresses per day, likely to prevent spammers from using it to quickly build lists.

Another useful feature is that you can configure the appearance of the subscription page to look more integrated with your website’s theme. By clicking “Design and settings”, you can upload a background image, change the text that appears on the page, add a background pattern to the email subscription box, and configure payment information.

Payments

On the same “Design and settings” page, click the red link at the bottom of the first section that says “show even more settings”. Most of these settings allow you to tweak the text of your subscription form, but the bottom three settings allow you to configure payment options.

The first payment option, ”make money price”, sets the amount that subscribers must pay to get your newsletter. They will be charged monthly for the subscription. Therefore, if you only plan to send four newsletters per year, you should definitely make sure they know that. The “Free trial” setting gives you the option to give users their first month free. The final option is for how payment is collected, either from TinyLetter or directly to your PayPal account.

When you are finished changing settings, click “Save Changes” at the very bottom.

Expanding Your Reader Base

An email newsletter is a great way to extend your website to your readers who may not have time to check your site for updates and may not be accustomed to using RSS. Some users may have Facebook. Some may have Twitter. But all of your users probably have email accounts, and as long as you use some restraint with the frequency of your messages, many of them will love to get mail with quality content from you.

SitePoint Podcast #163: Man Down

Karn Broad — Fri, 25 May 2012 12:47:43 +0000

Episode 163 of The SitePoint Podcast is now available! This week the panel is made up of 3 of our 4 our regular hosts, Patrick O’Keefe (@ifroggy), Kevin Dees (@kevindees) and Stephan Segraves (@ssegraves).

Listen in Your Browser

Play this episode directly in your browser — just click the orange “play” button below:

Download this Episode

You can download this episode as a standalone MP3 file. Here’s the link:

SitePoint Podcast #163: Man Down (MP3, 28:24, 27.3MB)

Subscribe to the Podcast

The SitePoint Podcast is on iTunes! Add the SitePoint Podcast to your iTunes player. Or, if you don’t use iTunes, you can subscribe to the feed directly.

Episode Summary

The panel discuss Google’s Chrome briefly taking the number one browser spot, Youtube’s 7th birthday, the thoughts on different possible responsive image standards HTML5 could use and more.

Here are the main topics covered in this episode:

Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/163.

Host Spotlights

Interview Transcript

Transcript to follow.

Theme music by Mike Mella.

Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.

Name That Pic

HAWK — Fri, 25 May 2012 02:41:12 +0000

Over the last month I’ve run a few spontaneous caption competitions on our Facebook page. Some of the responses have been hilarious so I’m going to widen the audience and see what comes out of it.

I imagine this process will be an evolving one, but for now let’s keep it simple. Post your caption idea in the comments section and I’ll pick a couple of winners at my discretion. (Tip: I have an inappropriate sense of humour.) I’ll run this over the weekend and pick a winner early next week (it’s currently Friday afternoon here in NZ).

Here is this week’s photo:

The winning entries from Facebook were “Ok, do you see a black cable? Just plug it in to the back of the monitor” and “My other computer is a laptop”. You can see the rest of the entries here. The best two entries (in my opinion) will win themselves digital copies of PHP Master: Write Cutting Edge Code.

Easy CSS3 Animation with Animate.css

Craig Buckler — Thu, 24 May 2012 16:27:49 +0000

Despite my initial reservations over whether animations should be defined in CSS, I have to admit they’re very useful, faster and slicker than equivalent effects in JavaScript. Building great animations isn’t easy, though — it involves a lot of patience, trial, error, testing and vendor-prefix shenanigans.

Animate.css makes coding a little more bearable. Simply choose an effect, watch it in action, download the code and add a couple of classes to your HTML element. You can either download the full 2,500 line CSS file or create a custom build using the effects you need.

Animate.css was developed by Dan Eden, a designer and student based in Manchester, UK:

I was working on a few personal projects with CSS3 animation keyframes and found myself repeating code. So I began creating a library of animations I could drop in at will. After I’d made something I was happy with, I released the code on GitHub and it took off from there.
People love animations!

We certainly do. My current favorite is “hinge” in the Specials section at the bottom. Very cool. I’m struggling to think of a use-case, but may apply it to all my links from now on!

The Prefix Predicament

While prefixes may be a necessary evil, Animate.css illustrates just how clunky they can be. Keyframes and their associated transformation properties must be defined with -webkit, -moz, -ms, -o and non-prefixed values. It results in a lot of browser-specific repeated code which is difficult to maintain and debug, e.g.


@-webkit-keyframes rollIn {
	0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}
@-moz-keyframes rollIn {
	0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}
@-ms-keyframes rollIn {
	0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); }
}
@-o-keyframes rollIn {
	0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}
@keyframes rollIn {
	0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}

CSS pre-parsers can ease the situation, but they’re not for everyone and the projects must be kept up to date as CSS3 evolves. I’m rapidly coming to the conclusion that Florian Rivoal’s suggestion of unprefixed properties being supported from day one is a good move.

For the moment, however, Animate.css is a great option if you want a couple of quick effects without doing the dirty work yourself.

Great Ideas—without the Risk!

Miles Burke — Thu, 24 May 2012 05:36:33 +0000

I’ve written before about how we can end up getting so caught up in our great new idea, that we spend so long getting it just right, before we find out nobody wants it. This could apply to services, or a physical products.

I learnt this through my own hard experiences – I’ve been guilty of taking so long to develop and release an idea, that I was either too late, or the idea sounded great, yet nobody actually wants or needs it.

It could be the next best thing, but unless you have a market, it’ll only be the next big thing for you alone. Big companies know this, so they invest hundreds of thousands into market research before coming out with that new flavored cola drink or the improved service offering.

Unless you are very lucky, you don’t have that option, and to be honest, the way the world is evolving, perhaps it’s better to think small anyway. A colleague of mine years ago gave me some great advice; she suggested selling it to a few clients and then actually go to the stage of creating it. This seems like a scary move, but it is a far safer one.

Here’s my take on that advice – if you’ve got that next big thing idea, perhaps you should consider a crowd funding approach first? I loved the idea of sites like Kickstarter when they first appeared on the scene a while back. However I always thought of them really as a very small marketplace.

That’s until I watched the Pebble watch explosion. If you’ve not heard about it, you’ll want to. This company comes up with a great idea for a watch that interacts with your smartphone. It turns out to be one very exciting bit of wrist appliance. They believe they have the model right, they think it’ll do well, but where to get that $400,000 they need to make it a reality?

So, they turn to Kickstarter. They list the project, put high hopes they can raise four hundred thousand dollars (and this has to be spelt out – that is a LOT of money to anyone) and sit back to see if anyone really would pay $100 for a product like this.

Turns out, a lot of people would. In fact, 68,929 people are so enthusiastic about it, they pre-order over ten million dollars worth of them. That’s right; I’ll say it again in figures for you; $10,000,000.

Now they can start producing them, comfortable in the knowledge their first 68,000 customers are already reaching into their pockets.

OK, so it’s not quite as easy as coming up with an idea, listing it on a site like Kick Starter, and sitting back, however it’s not nearly as hard as it would have been without sites like Kick Starter.

Maybe you don’t have a physical product you wish to sell, yet you have a service you want to invest time and energy in, but don’t want to take the risk in doing all the work to find out that nobody actually wants it (like I have done).

Let’s learn from the Pebble watch lesson. Maybe instead of spending the next six months gearing up to offer a service or product that you hope your clients want, perhaps you could ask your existing customers instead.

One great way to do this (and once again, I’ve found out by trying this) is to actually approach a number of the ones you believe are most likely to purchase this service, and ask them if they would help you shape this service, and in exchange, you’ll give them a hefty discount for a period. Consider it your own consumer advice panel.

You can lean on their thoughts as prospective customers to find out what they are willing to pay, what they want it to do, and how they see you being able to market it. In fact, if you get them involve enough; they will help market it for you too.

This approach is likely not to make you ten million dollars in a month, but it will give you the confidence to know if it is worth your time and efforts to develop this new service or product or put it in the ‘great ideas that probably wont end up being profitable’ basket.

Give it a go, see how it works, and if you do find a product or service idea that raises ten million dollars in a month, don’t forget where you got that inspiration from!

Repurposing vs Optimized Design: It’s Not a Battle

Craig Buckler — Wed, 23 May 2012 16:31:33 +0000

Jakob Nielsen of useit.com is no stranger to controversy and his recent Repurposing vs Optimized Design article makes a bold statement:

It’s cheap but degrading to reuse content and design across diverging media forms like print vs online or desktop vs mobile. Superior UX requires tight platform integration.

Jakob states there are two opposing schools:

Repurposing (responsive design): make as few designs as possible and reuse the same material across platforms. This has cost advantages, but results in a substandard user experience.
Platform optimization (device-specific design): create different user interfaces for each platform and integrate the user experience layers as tightly as possible. The result: higher costs but better usability and bigger profits.

The article resulted in a Tweetstorm:

Jakob Nielsen analyzes Responsive Design and comes up with dumb conclusions. Again.
For 17 years, Jakob Nielsen has been citing his own work as proof of everything. Somebody make it stop.
I’ve thought Jakob Nielsen was a self-important snob for years. Glad to see the Cult of Nielsen crumbling at last.

Do people still pay any attention to Jakob Nielsen or is he hanging around just to annoy web developers?
Jakob Nielsen is 100% right on mobile. Says Jakob Nielsen.
It’s amazing to watch Jakob Nielsen make himself more and more irrelevant with almost every piece he writes.

The Weaknesses of Responsive Design

Jakob claims most responsive websites are too primitive. They rearrange the same content and change dimensions of some elements, but rarely:

Adapt the content, i.e. provide shorter and simpler articles for mobile.
Use alternative, cropped or zoomed images.
Cater for touch input.
Reduce or modify the feature set to suit smaller devices.

Websites should consider the user context. Requirements change depending on where a user is, what they’re doing and what device they’re using. Consider the website for a bus company; a desktop user may want to browse timetables whereas a mobile user may need to find the nearest station.

Jakob admits this could be achieved with responsive techniques but, once you account for all these differences, you effectively have two separate designs. But he makes a valid point: if potential revenue is greater than cost, a site designed specifically for mobile devices makes good business sense.

Calculating Potential Revenue

This is where Jakob’s argument breaks down. For most websites, the cost of developing a separate mobile site makes no commercial sense whatsoever. This is especially true when you consider Jakob’s suggestion of creating and maintaining two or more sets of content.

The majority of websites receive few mobile users — usually less than 10% of visitors. It may be increasing, but does it make commercial sense to throw money at a problem which does not yet exist and is subject to radical technical changes? I’m all for being pro-active, but this leads to another point: you cannot make assumptions about user a user’s habits, desires or requirements.

Jakob paints a black and white picture: mobile users want less content and simpler features. However, it’s impossible to determine context when all you actually know is the screen resolution. The situation is made more difficult with newer mobiles which have screen sizes approaching those of tablets and the relatively diminutive iPad 3 exceeds the resolution of a top-end desktop PC. You may be able to make context judgments based on the current time or GPS location but, ultimately, you don’t know whether the user is rushing for a bus or lying in bed.

The Strength of Responsive Design

Responsive design provides a solution. A website primarily designed for desktop use can be restructured to provide a mobile-friendly experience at minimal expense. It may not be perfect, but it opens access and your site isn’t restricted to certain devices or user groups.

It’s a starting point — not the end. It’s now possible to gather statistics about devices and tie them to typical user journeys. If you can establish that X% of access is from a smartphone and Y% of those users proceed to feature Z, you may be able to justify further development. In extreme cases, a standalone mobile site will aid usability and increase profitability.

It’s Not a Battle

Jakob makes two broad assumptions but the reality is not as clear-cut:

You have a mobile context or a desktop context.
There are thousands of differing devices, screen sizes and situations when they are used. People use their mobile while watching TV — should they always receive a summarized article? Mobile exceeds desktop usage in many African countries because it’s cost-effective and reliable — should they be offered restricted functionality?
Repurposing and optimizing designs are opposing technologies.
Why? There are an infinite number of ways to develop the same solution. An optimized design can still use responsive techniques and vice versa. Ultimately, either can be used in differing quantities to achieve the same goal.

Jakob has been accused of bashing responsive design. The tone of his article gives that impression and it detracts from his main point: a dedicated mobile design offers a better mobile experience. If he’s guilty of anything, it’s stating the obvious.

Scalable Vector Graphics: Drawing Basics

Craig Buckler — Tue, 22 May 2012 16:38:16 +0000

In my previous posts we discussed what SVGs are and reasons you should consider SVGs for your project. In this article we’ll look at the basic concepts, document structure and drawing elements.

SVG Co-ordinate Space

An SVG is defined in whatever co-ordinate space you give it. That space does not necessarily relate to pixels, cm, inches or other units because the images are scalable to any dimension.

Optionally, you can define a viewbox which determines the co-ordinates your SVG uses. The following SVGs would look identical:

An SVG with a viewbox of 0,0 to 200,100 with a line from 0,0 to 100,50.
An SVG with a viewbox of 0,0 to 300,150 with a line from 0,0 to 150,75.

Your images are rendered within a viewport, i.e. the whole browser window or a block in an HTML page. By default, an SVG viewbox will stretch in either direction to fill the viewport space. However, you can state that you want the aspect ratio preserved.

Unlike mathematical graphs, the SVG co-ordinate system starts at the top left (usually 0,0) with the x-axis pointing right and y-axis pointing down. Therefore, a point at 100,200 represents 100 units to the right of the left hand edge and 200 units down from the top edge.

SVG Length Units

Lengths in SVG can be specified either as:

a relative value in the SVG space, e.g. 10
an absolute or relative measurement, e.g. 10px. SVG supports em, ex, px, pt, pc, cm, mm, in and percentage units.

If your image will be scaled, use units which are relative to your viewbox, e.g. a line width of 10 within a 100×100 viewbox will be 10% of the full width/height.

SVG XML Document

An SVG image is defined as an XML document. Assuming you’re creating a new SVG file, such as image.svg, an XML declaration and doctype must appear at the top of the document:

This is followed by the root SVG element:

Several optional attributes can be applied to the svg element. Two important ones are:

viewBox: establish the dimensions — a rectangular co-ordinate area used for your image specified as “min-X min-Y width and height”, e.g. viewBox="0 0 600 400". It’s important to remember this is an abstract space; it does not relate to pixels and your drawing elements are not constrained within these co-ordinates.
preserveAspectRatio: defines how a viewbox is scaled. There are many options, for example preserveAspectRatio="xMidYMid meet" ensures the middle of an SVG’s viewbox is aligned with the middle of the viewport (the browser window or HTML element containing the SVG) and the image fits the space available while preserving its aspect ratio.

An optional title and description can be defined using title and desc elements. Our basic XML document is therefore:

Grouping Elements

Any set of elements (lines, circles, rectangles, text, etc.) can be grouped using … tags. In essence, it’s identical to grouping drawing objects in a graphics package so they can be manipulated as a single item.

Personally, I prefer to define a root group node so I can modify the whole image easily via JavaScript or CSS, e.g.

A single group can have any number of nested inner groups.

Lines

A single line between two points is drawn using the line element:

The stroke-linecap attribute defines the line-end effect and accepts values of butt (the default), round, square or inherit:

Polylines

Polylines define a set of connected straight line segments:

The stroke-linejoin attribute defines the line-joining effect and accepts values of miter (the default), round, bevel or inherit:

Polygons

Polygons are are similar to polylines except that the resulting shape will always be closed:

Rectangles

Square or rounded rectangles are defined using the rect element:

The x and y attributes define the top-left corner. rx and ry specify the horizontal and vertical corner rounding.

Circles

Circles are defined using a center point and radius:

Ellipses

Ellipses are defined using a center point and two radii values:

Text

Basic text can be added using the text element:

SVG

The x and y attributes define the bottom-left co-ordinate of the first character in the string.

The Result

Our final SVG document contains the following XML code:

and renders this image:

click to view the actual SVG

While this is a simple example, the file is 1,176 bytes before minification and gzipping. The equivalent compressed PNG above is 5,611 bytes — it’s almost 5x larger and cannot be scaled above its native 407×274 resolution without losing quality.

Further Scalable Vector Graphic articles will appear on SitePoint soon…

Beginners Guide to KnockoutJS: Part 1

Ivaylo Gerchev — Tue, 22 May 2012 15:00:30 +0000

A Beginners Guide to KnockoutJS: Basics and Observables

Almost everyone dealing with web technologies knows jQuery, or at least has heard about it. Its unmatched simplicity and conciseness makes the lives of millions of web developers all over the world much easier–and that’s fantastic.

Unfortunately jQuery is not solution for every problem. As soon as you decide to create some more complex web apps you encounter a problem – there is no easy way to make your UI and data communicate each other dynamically. With the low-level DOM manipulation and events handling provided by jQuery this is fairly hard to achieve. You need a library providing you with more sophisticated way of communication between your UI and the underlying data model.

And here is where Knockout comes in. Knockout is a JavaScript library which helps the creation of rich, desktop-like web UIs. It simplifies user interactions and makes interfaces fully responsive to any data source changes. Knockout provides a simple two-way binding mechanism to link a data model to an UI, thus making synchronization between them a breeze.

Although you will need to use Knockout with jQuery at the same time, in some cases like animated transitions, Knockout itself doesn’t depend on it. Another thing you need to understand is that Knockout doesn’t compete with jQuery – they both do excellent job; each one in its own direction. As you will see if you want to get the most benefits you should use them together.

In this tutorial, we start with the core concepts and capabilities of Knockout. In part two, we’ll go deeper exploring the built-in bindings and how to use them. And in the finale, we’ll go through some advanced features and techniques, such as extended observables and how to create your own custom bindings. Let’s get started!

Basic Concepts

Before we go through the code examples, first you may need to grasp some basic concepts. Knockout implements Model-View-View Model (MVVM) design pattern for JavaScript. In this pattern your application is split into three parts:

A model that holds your application’s data. This can be data entered by users or JSON data fetched from a web server.

A view that serves as a connector and communication layer between Model and View. It holds data and operations for manipulating this data and display it in the UI. Every time when data model is changed corresponded UI parts updates, reflecting these changes. View Model in your application is represented by JavaScript code.

A view that refers to all UI elements in your application. It is a representation of the structure and appearance for given UI. The view is responsible for displaying data and accepting user input. View is represented by HTML/CSS code in your application.

They are three core concepts upon Knockout is built:

1. Declarative Bindings: These allow you to connect parts of your UI to your data model in a simple and convenient way. When use JavaScript directly to manipulates DOM this may cause broken code if you later change the DOM hierarchy or element IDs. With declarative bindings even if you change the DOM all bound pieces stay connected. You can bind data to a DOM by simply including a data-bind attribute to any DOM element.

2. Dependency Tracking: Thankfully to the bindings and special type of variables called observables every time when your model data has changed all parts associated with it automatically being updated. No need to worry about adding event handlers and listeners. All that extra work is performed internally by Knockout and observables, which notify listeners when underlying values have changed.

3. Templating: This comes in handy when your application becomes more complex and you need a way to display a rich structure of view model data, thus keeping your code simple. Knockout has a native, built-in template engine which you can use right away. But if you want, a third-party template engine, like jquery.tmpl or Underscore, also can be used.

Don’t worry if all this theory sounds obscure to you. When we go through the tutorial and the code examples everything will become clearer.

Getting Started

Before we dive into Knockout you need to download and reference the library in your HTML document.

To keep your code separate from your presentation is better to create a JavaScript file to hold all application code. And because we will use jQuery in some cases you need to reference it too.

This is considered as best practice but for training purpose and to make things easier you can put the JavaScript code in the same document by either including it in the head tag or place it bellow your markup.

Now, to create a view model just declare any JavaScript object like this:

  function viewModel() {
   // Your code here
  };

The data-bind attribute (explained later) isn’t native to HTML, and the browser doesn’t know what it means. So in order to take effect Knockout has to be activated by inserting ko.applyBindings() function at the end of the script. Also if you use external JavaScript file or your script is placed in the head tag of your document you need to wrap the Knockout code in a jQuery ready function in order to work properly. Here is the basic template to start:

$(document).ready(function(){
  function viewModel() {
   // Your code here
  };
  ko.applyBindings(new viewModel());
});

Calling the ko.applyBindings() method and passing in our view model tells Knockout to bind the specified model to our UI. You can even provide a DOM element if you only want to bind this view model to one part of your overall UI. ko.applyBindings() takes two parameters. The first parameter says what view model object you want to use with the declarative bindings it activates. The second parameter is optional and it defines which part of the document you want to search for data-bind attributes. For example, ko.applyBindings(viewModel, document.getElementById('container')) will restrict the activation to the element with ID container and its descendants. This is useful if you want to have multiple view models and associate each with a different region of the page.

How It Works

With Knockout, you can bind data to a DOM element by including a data-bind attribute in the markup which specifies the data-binding to perform. The code never has any reference to the DOM structure so you can freely change the HTML without breaking your bindings. In the following example we add text data-bind attribute to span element like this:

// syntax: data-bind="bindingName: bindingValue"

The day of the week is . It's time for

Then if we want to make the value of text to updates dynamically then we have to declare it in our view model as an observable.

function viewModel() {
  this.dayOfWeek = ko.observable('Sunday');
  this.activity = ko.observable('rest');
};
ko.applyBindings(new viewModel());

This will output "The day of the week is Sunday. It’s time for rest".

Observables

Knockout implements observable properties by wrapping object properties with a custom function named ko.observable().

this.property = ko.observable('value')

Observables are set as functions. As such you can use them in the following manner:

// To read the observable's current value, just call the observable with no parameters.
// The following will return Sunday
this.dayOfWeek()
// To write a new value to the observable, call the observable and pass the new value as a parameter.
// The following will change the day of week to Monday
this.dayOfWeek('Monday')
// To write values to multiple observable properties on a model object, you can use chaining syntax.
this.dayOfWeek('Monday').activity('work')

Knockout doesn’t require you to use observable properties. If you want DOM elements to receive values once but then not be updated when the values in the source object change, simple objects will be sufficient. However, if you want your source object and target DOM elements to stay in sync – two-way binding – then you’ll want to consider using observable properties.

In some cases you may need to combine the values of two or more observables into one new value. This can be done with so-called computed observables. Computed observables are functions that are dependent on one or more other observables, and will automatically update whenever any of these dependencies change. The computed property automatically updates when any of the observables it depends on for its evaluation change. In the following example the computed observable named fullDate will updates every time when one or more of the day, month and year observables change.

Day: 
Month: 
Year: 
The current date is 
function viewModel() {
  this.day = ko.observable('24');
  this.month = ko.observable('02');
  this.year = ko.observable('2012');
  this.fullDate = ko.computed(function() {
   return this.day() + "/" + this.month() + "/" + this.year();
  },this);
};
ko.applyBindings(new viewModel());

The ko.computed() takes a second parameter this. Without passing it in, it would not have been possible to refer to this.day(), this.month() or this.year(). In order to simplify things you can create a variable self, thus avoiding the addition of the second parameter. From now on we will use this approach in the code examples.

function viewModel() {
  var self = this;
  self.day = ko.observable('24');
  self.month = ko.observable('02');
  self.year = ko.observable('2012');
  self.fullDate = ko.computed(function() {
   return self.day() + "/" + self.month() + "/" + self.year();
  });
};
ko.applyBindings(new viewModel());

When you dealing with one object you can easily track any changes to it by turn it into an observable. But what if you have multiple objects? In such cases Knockout has a special object called ko.observableArray(), which can detect and respond to changes of a collection of things. This makes possible to display and/or edit multiple values, for example, when you need repeated sections of UI to appear and disappear as items are added and removed.

You should bear in mind that an observable array tracks which objects are in the array, not the state of those objects. Simply putting an object into an observable array doesn’t make all of that object’s properties themselves observable. If you wish you can make those properties observable, but that’s totally up to you. An observable array just tracks which objects it holds, and notifies listeners when objects are added or removed.

this.property = ko.observableArray();

When you create an observable array you can leave it empty or populate it with some initial values. In the following example we create an observable array populated with the days of the week:

Today is 
function viewModel() {
  var self = this;
  self.daysOfWeek = ko.observableArray([
  'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ]);
  alert("The week has " + self.daysOfWeek().length + " days");
};
ko.applyBindings(new viewModel());

As you can see, to read and write Knockout array you can use any native JavaScript functions. But Knockout has its own equivalent functions which syntax is a little bit more convenient:

array().push('Some value'); // native JavaScript
array.push('Some value'); // Knockout

For the full list of available functions you can check out the documentation.

Get Tweeting and win a Kindle Fire at Web Directions Code!

Tom Museth — Tue, 22 May 2012 03:40:52 +0000

At SitePoint we live and breathe web tech … and we love our ebooks. Combining these two passions is a challenge we relish, whether we’re releasing an all-encompassing guide to the world of WordPress (like The WordPress Anthology), an analysis of cutting-edge design approaches (say, The Principles of Beautiful Web Design) or an introduction to the latest web development standards and methods (for instance, HTML5 & CSS3 For the Real World).

Which is why we decided we ought to share these passions with our treasured SitePoint community – especially those of you who are attending the bound-to-be-awesome Web Directions Code conference, taking place in Melbourne on Wednesday, May 23 and Thursday, May 24. We’re sending a whole bunch of SitePoint staffers along to this two-day festival of all things JavaScript and HTML5 (check out the program) where we’ll be attending excellent talks from the likes of Max Wheeler, Ryan Seddon and Rob Hawkes, to name a few. But our crew are also going to be hoping you’ll hook up with them and enter our SitePoint Twitaway Competition! Check out the details on the Twitaway Competition page.

Here’s how it works.

When you’re at the conference, look out for a SitePoint staffer (you can find us wandering around in our T-shirts, probably armed to the teeth with books, mugs and other SitePoint gear we’re itching to give away). Who’ll be there? Louis, Tom, Di, Alex, Harley and Ole. We’re waiting to meet you.
Grab one of us … but be gentle.
Take a photo of yourself with said SitePointer.
Send a unique, funny tweet, with your photo and the hashtag #lovesitepoint.
That’s it … unless, of course, you want to stick around and have a chat with us!

This will put you in the running for our great giveaway: a Kindle Fire, which we’ll hand over to the winner on the Thursday afternoon, and happily load up with a whole bunch of SitePoint ebooks.

But wait … ‘cos there’s more. Everyone who sends a tweet with a photo and the #lovesitepoint hashtag will win an ebook anyway. Why? Well, because you deserve it. And we want you to be awesome developers … something we hope we can give you a hand with when you choose one ebook from the following: The WordPress Anthology, The Principles of Beautiful Web Design, or HTML5 & CSS3 For the Real World.

The details are all on the promotion page. All you have to do is get to Web Directions Code, hunt us down and get tweeting!

Create a Voting Plugin for WordPress

Abbas Suterwala — Mon, 21 May 2012 15:00:36 +0000

Introduction

WordPress, as a platform, has moved from only being a blogging platform, to a platform for a wide variety of websites. One major reason for this, is how easily WordPress can be customized and extended. This enables programmers to create far more functional sites than a normal blog. In the following tutorial we are going to create a plugin which will make wordpress an article voting site and also create a widget to display the top voted posts.

Creating the Plugin

To create a plugin create a file voteme.php in your wp-content/plugins/voteme folder. To create a plugin we have to add the plugin header as follows

We will also define some named constants for our plugin base url, and the plugin path as follows:
define('VOTEMESURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
define('VOTEMEPATH', WP_PLUGIN_DIR."/".dirname( plugin_basename( __FILE__ ) ) );
Also, create a js folder in your voteme folder, and add a file voteme.js file in it.
The folder structure of the plugin would be as follows.
  
We will now enqueue the scripts by with ‘wp_enqueue_scripts’ and enqueue our JS file, and localize it to store the WP Ajax url which we will use for our ajax calls.
function voteme_enqueuescripts()
	{
		wp_enqueue_script('voteme', VOTEMESURL.'/js/voteme.js', array('jquery'));
		wp_localize_script( 'voteme', 'votemeajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
	}
add_action('wp_enqueue_scripts', voteme_enqueuescripts);
After this we should be able to see our plugin in the plugin list and we should activate it.
Adding the vote link to posts
Now we will add a link to all the posts displaying the current votes and a link to add the vote by ajax.
 Following is the code
function voteme_getvotelink()
{
$votemelink = "";
$post_ID = get_the_ID();
$votemecount = get_post_meta($post_ID, '_votemecount', true) != '' ? get_post_meta($post_ID, '_votemecount', true) : '0';
$link = $votemecount.' '.'Vote'.'';
$votemelink = '';
$votemelink .= ''.$link.'';
$votemelink .= '';
return $votemelink;
}
function voteme_printvotelink($content)
{
return $content.voteme_getvotelink();
}
add_filter('the_content', voteme_printvotelink);
Here, we create a function voteme_getvote link which first gets the current post id and then reads the post meta _votemecount using get_post_meta. We use the post meta _votemecount to store the votes for a particular post. Then we create a link by adding the JavaScript function votemeaddvote on the click of the link. The function votemeaddvote we will see shortly.
Next, we use the WordPress filter the_content to hook our function to add this link after each post. You will be able to see the number of votes and vote link below each post now.
Adding votes using Ajax
As we have added the vote link to every posts its time we make it functional to actually add votes. The JavaScript function which does the AJAX vote posting is below
function votemeaddvote(postId)
{
	jQuery.ajax({
	type: 'POST',
	url: votemeajax.ajaxurl,
	data: {
	action: 'voteme_addvote',
	postid: postId
},
success:function(data, textStatus, XMLHttpRequest){
	var linkid = '#voteme-' + postId;
	jQuery(linkid).html('');
	jQuery(linkid).append(data);
	},
	error: function(MLHttpRequest, textStatus, errorThrown){
		alert(errorThrown);
		}
	});
}
This sends an AJAX request to WordPress, and sends the action as voteme_addvote and the post ID. If the AJAX call is successful it just adds the data in the div for that post. If there is an error it will just display the error.
To handle the AJAX request we will have to create a function as follows
function voteme_addvote()
	{
		$results = '';
		global $wpdb;
		$post_ID = $_POST['postid'];
		$votemecount = get_post_meta($post_ID, '_votemecount', true) != '' ? get_post_meta($post_ID, '_votemecount', true) : '0';
		$votemecountNew = $votemecount + 1;
		update_post_meta($post_ID, '_votemecount', $votemecountNew);
		$results.=''.$votemecountNew.'';
		// Return the String
		die($results);
	}
		// creating Ajax call for WordPress
		add_action( 'wp_ajax_nopriv_voteme_addvote', 'voteme_addvote' );
		add_action( 'wp_ajax_voteme_addvote', 'voteme_addvote' );
In function voteme_addvote we get the post ID from the posted data and then get the current vote count for that post. Then we increment the vote by 1 and update the post meta again. Then we create a div with the new vote details and sent that back by using die($results);
To register this function to handle AJAX request for action: ‘voteme_addvote’ using the following wordpress hooks
		// creating Ajax call for WordPress
		add_action( 'wp_ajax_nopriv_voteme_addvote', 'voteme_addvote' );
		add_action( 'wp_ajax_voteme_addvote', 'voteme_addvote' );
Now we’ll be able to click the vote link to add the vote on the post with AJAX.
Customizing WordPress admin to show post votes
It would be very convenient for the admin to be able to see the votes on the post edit page. Then from there he would be able to see the post details, and also the vote details on that page.
To add the vote details we need to add a hook on the filter ‘manage_edit-post_columns’ to add the Votes as a column on the post edit page as follows.
add_filter( 'manage_edit-post_columns', 'voteme_extra_post_columns' );
function voteme_extra_post_columns( $columns ) {
$columns[ 'votemecount' ] = __( 'Votes' );
return $columns;
}
Now we need to provide the value to display for this column. To do this we need to hook into the filter manage_posts_custom_column. When we hook into this filter our function voteme_post_column_row is called and with the post column name. Here we only process out column votemecount and give the value for it. We read the value from our custom column _votemecount and echo it. The complete code for this is as follows.
function voteme_post_column_row( $column ) {
	if ( $column != 'votemecount' )
	return;
	global $post;
	$post_id = $post->ID;
	$votemecount = get_post_meta($post_id, '_votemecount', true) != '' ? get_post_meta($post_id, '_votemecount', true) : '0';
	echo $votemecount;
}
add_action( 'manage_posts_custom_column', 'voteme_post_column_row', 10, 2 );
On the post edit page you should be able to see the vote details column.
Sorting post on basics of votes in WordPress admin
It would be convenient for the admin if we make the vote column sortable. He would be able to see the most voted posts and also the least voted posts. To do this first we must make the Vote column clickable for sorting. To do this we hook into the filter manage_edit-post_sortable_columns and add the vote column to it as follows.
add_filter( 'manage_edit-post_sortable_columns', 'voteme_post_sortable_columns' );
function voteme_post_sortable_columns( $columns )
{
	$columns[ 'votemecount' ] = votemecount;
	return $columns;
}
Then we add a hook onto the load-edit.php hook when we have the order by request for votemecount we merge the sort parameters with
'meta_key' => '_votemecount',
'orderby' => 'meta_value_num'
So that it sorts on the basics of custom column and considers that column as numeric rather than as a string. The code for it is as follows.
add_action( 'load-edit.php', 'voteme_post_edit' );
function voteme_post_edit()
{
	add_filter( 'request', 'voteme_sort_posts' );
}
	function voteme_sort_posts( $vars )
{
	if ( isset( $vars['post_type'] ) && 'post' == $vars['post_type'] )
	{
		if ( isset( $vars['orderby'] ) && 'votemecount' == $vars['orderby'] )
		{
			$vars = array_merge(
			$vars,
			array(
			'meta_key' => '_votemecount',
			'orderby' => 'meta_value_num'
			)
			);
		}
	}
return $vars;
}
Now in the admin page the vote column will be clickable and clicking on it will sort the post on the basics of votes.
Allowing only Registered users to vote
We might want that not anyone can vote on the post. We might want to check that only users who are registered on our site will be able to vote. We’ll control this via creating a setting page for our plugin as follows
// Settings
add_action('admin_menu', 'voteme_create_menu');
function voteme_create_menu() {
add_submenu_page('options-general.php','Vote Me','Vote Me','manage_options', __FILE__.'voteme_settings_page','voteme_settings_page');
}
function voteme_settings_page() {
?>





 >User Must be logged in for voting


 >User might not be logged in for voting









Here we hook onto admin_menu and create our setting page to show radio buttons for whether to allow voting for registered users only. Then based on the option selected by the admin we update the option votemelogincompulsory. The settings page will look as follows.
Then, update the voteme_getvotelink function to read the option votemelogincompulsory and to show the votelink or the login link depending on the option selected by the user and wthere the user is logged in or no. The code for it is as follows
function voteme_getvotelink()
{
	$votemelink = "";
	if( get_option('votemelogincompulsory') != 'yes' || is_user_logged_in() )
	{
		$post_ID = get_the_ID();
		$votemecount = get_post_meta($post_ID, '_votemecount', true) != '' ? get_post_meta($post_ID, '_votemecount', true) : '0';
		$link = $votemecount.' '.'Vote'.'';
		$votemelink = '';
		$votemelink .= ''.$link.'';
		$votemelink .= '';
	}
else
{
	$register_link = site_url('wp-login.php', 'login') ;
	$votemelink = ''." "."Vote"."".'';
}
return $votemelink;
}
Creating a widget to display Top voted posts.
Now we will create a widget to display the top voted posts. First we create a function called voteme_get_highest_voted_posts which takes the number of posts and then displays those many post in order of the highest voted posts. It also displays the number of vote for each post.
function voteme_get_highest_voted_posts($numberofpost)
{
	$output = '';
	$the_query = new WP_Query( 'meta_key=_votemecount&orderby=meta_value_num&order=DESC&posts_per_page='.$numberofpost );
	// The Loop
	while ( $the_query->have_posts() ) : $the_query->the_post();
	$output .= '';
	$output .= ''.get_the_title().'('.get_post_meta(get_the_ID(), '_votemecount', true).')'.' ';
	$output .= '';
	endwhile;
	wp_reset_postdata();
	return $output;
}
Then we create a widget which takes the number of post and the title from the user and uses the abpve function to display the top voted posts.
class VoteMeTopVotedWidget extends WP_Widget {
	function VoteMeTopVotedWidget() {
	// widget actual processes
	$widget_ops = array('classname' => 'VoteMeTopVotedWidget', 'description' => 'Widget for top voted Posts.' );
	$this->WP_Widget('VoteMeTopVotedWidget','VoteMeTopVotedWidget', $widget_ops);
}
function form($instance) {
	// outputs the options form on admin
	$defaults = array( 'title' => 'Top Voted Posts', 'numberofposts' => '5' );
	$instance = wp_parse_args( (array) $instance, $defaults );
	?>
	
	
	
	
	
	
	
	
	';
	echo voteme_get_highest_voted_posts($instance['numberofposts']);
	echo '';
	echo $after_widget;
}
}
function voteme_widget_init() {
	// Check for the required API functions
	if ( !function_exists('register_widget') )
	return;
	register_widget('VoteMeTopVotedWidget');
}
add_action('widgets_init', 'voteme_widget_init');
The widget will look as follows
On the front, the widget will look as follows
Conclusion.
With custom fields, WordPress makes it easy for us to extend it to use for different purposes. WordPress has good support for AJAX as we have seen in this tutorial. So, happy WordPress development!

Ubuntu 12.04 LTS Precise Pangolin: File sharing with Samba.

Jonathan Hobson — Mon, 21 May 2012 15:00:10 +0000

Samba is the software package that allows you to share files, printers and other common resources across a network. Delivering full connectivity with the Windows workgroup it is known and respected as an invaluable tool in homes and offices around the world and in this article I will be showing you how to install, set-up and manage a Samba Server on Ubuntu 12.04 LTS Precise Pangolin.
So let’s begin …

Prerequisites

To get the best out of Samba your system should be running a static IP address and if you happen to be running a firewall, you should open the relevant ports to give the Samba service full access to your network.

Yes, you can use DHCP, but you will need to ensure that your DHCP server or router is providing you with a ‘fixed’ DHCP licence; but for those who wish to learn how to implement a static IP address on Ubuntu 12.04 you can read my previous article on networking tips and tricks

Update your system

Installing Samba is a very straight forward process so we shall begin by updating the system.
In Terminal or in your console type:

sudo apt-get update && apt-get upgrade

If there are any updates available to you, do that now before we proceed :-)

Installing Samba

For the purposes of this article I will have provided you with three different approaches to installing Samba:
1. For desktop users, who want to take advantage of ‘winbind’ (winbin) and use the graphical tools (system-config-samba), open Terminal and type:

sudo apt-get install samba samba-common system-config-samba winbind

2. For desktop users, who wish to take advantage of ‘winbind’ (winbind) but do not wish to use the graphical tools, open Terminal and type:

sudo apt-get install samba samba-common winbind

3. For server users, in your console type:

sudo apt-get install samba samba-common

Configuring Winbind

Before we tackle the subject of Samba itself, desktop users will notice that we have installed Winbin.
The purpose of this is to ensure that Ubuntu can provide full hostname resolution when viewing your local network and so we will want to configure this before moving on. Don’t worry, it is very simple as all we need to do is make a quick ‘order change’ to the ‘nsswitch.conf’ file.
To begin, open Terminal and type:

sudo gedit /etc/nsswitch.conf

Find the line that looks like this:

osts:          files mdns4_minimal [NOTFOUND=return] dns mdns4

Now change it to look like this:

hosts:          files mdns4_minimal [NOTFOUND=return] wins dns mdns4

Your nsswitch.conf file should now look something like this:

passwd:         compat
group:          compat
shadow:         compat
hosts:          files mdns4_minimal [NOTFOUND=return] wins dns mdns4
networks:       files
protocols:      db files
services:       db files
ethers:         db files
rpc:            db files
netgroup:       nis

When complete, simply ‘save’ and close your file before rebooting like so:

sudo reboot

Having done this you should now be able to select ‘GO > Network’ from the desktop menu and view your entire Windows and Linux based network.

From this point onwards the article will act a guide and depending on your needs it should not be viewed as an ordered process or a solution. For example, you may wish to add system users prior to completing any configuration work or you may even need to repeat some processes in order to add multiple users. Remember, everyone’s network needs are unique :-)

Using the desktop graphical tools.

Before you begin to use the graphical tools (system-config-samba) we will need to ‘fine-tune’ the Samba Server Settings.

To do this, open the dash and use the search bar to find Samba like so:

Launch the Samba configuration tool and choose, ‘Preferences > Server Settings’ like so:

In most cases the ‘default settings’ may be exactly what you need but in some instances you may need to make a few changes.

Complete the ‘basic’ tab settings and click ‘OK’ when done:

Workgroup.This field should be the same value as that used by your Windows Workgroupi.e if your WIndows Users are members of the ‘Home’ workgroup, type ‘Home’ in this field.
Description.This is the name of your computer as seen by Windows Users.i.e.
keep it simple, use a name similar to that of your actual computer name and do not use spaces on non-internet friendly characters.

As it is not advisable to allow ‘Guests’ there should be no reason to change the ‘security’ settings tab unless you wish to do so:

Now click ‘OK’ to close the ‘Server Settings’ window.
To manage your current users simply choose ‘Preferences > Samba Users’ like so:

Now launch the ‘Samba Users’ dialogue box. Select your username and click ‘Edit User’ to launch the ‘Create New Samab User’ dialogue box.

Complete the fields as required:

Windows Username. Confirm the username to be used by Windows users when accessing your share folder(s).
Samba Password. Use this field to confirm the password to be used by Windows users when accessing your share folder(s).
Confirm Samba Password. Use this field to re-confirm the password to be used by Windows users when accessing your share folder(s).

Although you may see ‘stars’ in the password field(s) prior to doing this. Delete them and re-type the password.

When complete, click ‘OK’ to close both dialogue boxes before restarting the Samba service like so.

Open Terminal and type:

sudo restart smbd && sudo restart nmbd

Adding a new (Linux) user account with the desktop graphical tools.

If you want to add a new Linux user account, simply:

Open ‘System Settings’.
Choose ‘User Accounts’ and unlock the panel using your administration password.
Use the + (plus) icon to create a new user.
Enter the new user’s full name (the username will be filled in automatically based on the full name).

As this folder is for ‘sharing purposes only’ do not assign ‘administrative rights’ to this user account.

When finished, click .
As the account is initially disabled, we now need to set the users password.

To do this, simply:

Ensure the ‘User Accounts’ panel is still unlocked.
Click ‘Account Disabled’ and complete the resulting dialogue box.

When finished, click ‘Change’.
If you return to the ‘Samba Users’ dialogue box and click ‘Add User’, your new user account should be found in the Unix Username drop-down box like so:

Simply complete the relevant details and click to finish.
When done, you will be able to assign this user account to specific folders like so:

More information on user accounts can be found here https://help.ubuntu.com/12.04/ubuntu-help/user-accounts.html.

Sharing folders with the graphical tools.

To share a folder with Samba, click the green ‘+’ (plus) icon to open a dialogue box called ‘Create Samba Share’ like so:

Complete the ‘basic’ tab with the required information.

Directory. Click ‘Browse’ to locate the relevant folder you wish to share.
Share Name. Use this field to specify a ‘human friendly’ name for your share folder.
Description. Type a description of the ‘share folder’ in this field.
Writable. Shared folders are ‘read-only’ by default, so place a tick in this box if you would like to enable ‘write’ access.
Visible. Place a tick in this box if you want your share folder to be ‘visible’ on the network.

Following this, we now need to set the permissions for your new share folder.

To do this, simply click the ‘access’ tab in the same dialogue box like so:

If you would like to restrict access to this folder:

Select ‘Only allow access to specific users’.
Use the tick boxes to confirm which users can access the folder in question.

If you would like everyone to access the folder:

Select ‘Allow access to everyone’.

When complete, click ‘OK’ to close the dialogue box.

To remove any shared folder from Samba, simply choose the relevant folder in the configuration tool and click the ‘red icon’. Don’t worry, this action will not delete the folder or its contents.

And that’s it, your share folders are now active.

Configuring Samba on the command line

Using the graphical tools has its advantages, but if you really want to control every aspect of your Samba server, nothing beats the command line.

So let’s begin by making a backup of our original configuration file:

cp /etc/samba/smb.conf /etc/samba/smb.conf.bak

And open the content of the current configuration file like so:

sudo nano /etc/samba/smb.conf

We are now going to configure the Samba Server by using a basic example to get you started …

I am not going to explain every aspect of Samba (as most server administrators will want to read the official documentation found at http://www.samba.org/) so instead I have provided you with a template in order to get you up and running in no time at all. You should consider this to be a basic template only. It is not definitive by any means and nor do I expect you to replicate it but if you do use it – remember to change the values shown with values relevant to your specific needs or network requirements:
And here is the template:

[global]
    unix charset = UTF-8
    # -------------------------------------------
    # DEFINE YOUR WORKGROUP AND COMPUTER NAME HERE
    workgroup = YOUR-WORKGROUP-NAME
    server string = YOUR-COMPUTER-NAME
	  netbios name = YOUR-COMPUTER-NAME
    # -------------------------------------------
    dns proxy = no
    # -------------------------------------------
    # IF YOU SET BIND INTERFACES TO YES, TO AVOID LOG ERRORS,
	  # MAKE SURE YOUR SAMBA SERVICE STARTS AFTER THE ETHERNET CARD IS SWITCHED ON
    # bind interfaces only = no
    # bind interfaces only = yes
    bind interfaces only = no
    # ADD THE ETHERNET CARD AND IP ADDRESSES YOU ALLOW
    interfaces = eth0 127.0.0.0/8 192.168.1.0/24
    # -------------------------------------------
    # SAMBA LOG FILES
    log file = /var/log/samba/log.%m
    max log size = 1000
    syslog only = no
    syslog = 0
    # -------------------------------------------
    panic action = /usr/share/samba/panic-action %d
    # LIMIT ACCESS TO USERS ONLY
    security = user
    # USING TDBSAM
    encrypt passwords = true
    passdb backend = tdbsam
    obey pam restrictions = yes
    unix password sync = yes
    passwd program = /usr/bin/passwd %u
    passwd chat = *Enter\snew\s*\spassword:* %n\n *Retype\snew\s*\spassword:* %n\n *password\supdated\ssuccessfully* .
    pam password change = yes
    map to guest = bad user
    usershare allow guests = no
    # -------------------------------------------
    # INCLUDE THIS SECTION TO DISABLE PRINTERS/CUPS ONLY
    #load printers = no
    #printing = bsd
    #printcap name = /dev/null
    #disable spoolss = yes
    # -------------------------------------------
    # DIRECTORIES
    # -------------------------------------------
    # ENABLE HOME FOLDER ACCESS
    [homes]
        comment = Home Directories
        browseable = no
        writable = yes
        valid users = %S
        valid users = MYDOMAIN\%S
        create mask =0755
        directory mask =0755
    # -------------------------------------------
    # EXAMPLE FOLDER WITH LIMITED ACCESS, UNCOMMENT AND CUSTOMISE AS NECESSARY
    #[example]
    #   comment = example share folder on my-computer-name
    #   path = /foldername/foldername/
    #   browseable = yes
    #   guest ok = no
    #   writable = yes
    #   create mask = 0755
    #   directory mask = 0755
    #   valid users = @your-username
    #   force group = your-username-or-group
    #   force create mode = 0755
    # -------------------------------------------

To un-comment a line, simply remove the # (hash) symbol.

Either copy the content of this file to /etc/samba/smb.conf or simply work through the samba configuration file using my template as a guide. Don’t worry, there’s no rush …

When done, ‘save’ the file, ‘close’ it and restart the Samba service in order that it can apply the new settings by using:

sudo service smbd restart && sudo service nmbd restart

Creating (Linux) users and home folders on the command line

Although a complete tutorial on ‘working with files, directories and users’ is beyond the scope of this current article, adding a new user account and creating a home folder is a relatively simple task – just remember to replace my values with something relevant to your needs.

To create a new user with an associated home folder on your server or desktop, use:

sudo adduser new-username-here

Ubuntu will now ask you a few basic questions and then complete the task of [a] creating the new user, [b] creating a specific group for that user and then [c] creating a home folder for the user in question.

And all with a single command :-)

To explain this, here is a step-by-step example with the resulting output. I am going to create a new user called ‘new-username-here’.

The process begins after I type the following command:

sudo adduser new-username-here

Ubuntu will now start the process:

Adding user `new-username-here' ...
Adding new group `new-username-here' (1004) ...
Adding new user `new-username-here' (1004) with group `new-username-here' ...
Creating home directory `/home/new-username-here' ...
Copying files from `/etc/skel' ...

At this point you will be asked to create a password:

Enter new UNIX password:
Retype new UNIX password:
passwd: password updated successfully
Changing the user information for new-username-here

At this point you will be asked to complete some user-based details:
(to leave a field blank, just press the key)

Enter the new value, or press ENTER for the default
	Full Name []: new-username-here
	Room Number []:
	Work Phone []:
	Home Phone []:
	Other []:

At this point you will be asked to confirm your instruction:

Is the information correct? [Y/n]

Wasn’t that easy :-)

Adding (Samba) users on the command line

Finally let’s create a Samba user based on the example above with the following command.

smbpasswd -a new-username-here

You will be asked to confirm a password, but it is as simple as that …

Remember, you will need to give the relevant username and password to your network user.

So until next time …
I hope you continue to enjoy using Ubuntu 12.04 LTS Precise Pangolin.

Stopping Abusive Clients: The Complete Process

John Tabita — Mon, 21 May 2012 02:33:41 +0000

This is the 11th and final installment of my series, Putting a Stop to Abusive Clients. I hope I’ve made it clear that the solution is not to continually complain and blame clients if they treat you badly, but to take responsibility and make the appropriate changes to your business practices.

An important “best practice” for your business is to have a system for selling your services and managing the sales process. When I first started out, I didn’t realize I needed a process, one with a beginning, middle, and end. Not having one meant I typically started off badly, fumbled around in the middle, and didn’t really know when (or if) it really ended. By not knowing how to close (end) the process by asking for the sale, I allowed it to fade into “maybeland,” which is the worst place to be when your income depends on whether you sell or not.

Having a clearly-defined process allows you to build in checks and balances, to define and manage client expectations. Not having one means clients can walk all over you—either unintentional or deliberately—and you wind up feeling abused. So here in a nutshell is the process I followed for many years … once I figured out I needed one, that is.

Preliminary Consultation

When I make contact with a potential client, the first step is to determine how viable of a prospect he or she really is. Rather than immediately scheduling a meeting, I’m going to have a preliminary phone call to determine two things:

Are they truly serious about the project?
Can they afford to pay for a top-end site like I’m going to provide, or are they just looking for the cheapest option available?

If you’ve read my 27.5 Must-Ask Questions for Consultative Selling, then you already know some questions to ask. I want to learn a little bit about the company and his business goals and objectives. At some point in the conversation, I’m going to ask some variation of this question:

“My prices start at $X,XXX. Were you prepared to spend that?” Unless I get a positive response, I’m not hurrying out to meet with him any time soon.

It’s tempting to skip this crucial first step, or to avoid asking the hard questions and just set up a meeting. But if you want to stop wasting time with prospects who aren’t serious, I highly recommend you don’t.

Preparation

If the initial conversation warrants a meeting, I’m going to do some research in order to be able to ask some intelligent questions. I want to walk in knowing as much as I can about the company, its owners, and their business model. In this day and age, there’s no excuse for ignorant questions like, “What exactly is it you do here?”

Needs Analysis

The heart of consultative selling is asking questions and actually listening to the answer (as opposed to thinking about what you’re going to say next). My 27.5 Must-Ask Questions for Consultative Selling are very direct and to-the-point, and it takes a bit of courage to bring yourself to ask them … especially the first time.

It helps if you don’t get down to business right away. Think of it like this: the questions you ask should go from general to specific. At some point you’re going to ask some quasi-confidential questions, like how much would he like to increase revenue. But a more appropriate question to begin with might be, “How did you get started in this industry?”

Before you jump into the deep end, you need to break the ice. I’ve heard it said that prospects who want to get straight down to business really want to get straight down to “How much is this going to cost me?”

Recommendation

At some point, you’ll need to turn the information-gathering conversation into a diagnosis. Once you feel you sufficiently understand the prospect’s business goal, needs, and objectives, you can begin to offer suggestions and solutions.

The trick is to avoid giving away too much free information. You do that by discussing the WHY, agreeing upon the WHAT, and ignoring the HOW. Forget about the technical stuff you love talking about. To get the prospect’s commitment to do business with you, you only need to establish and agree upon two things you:

1. What he’s trying to accomplish, his “big picture” objective
2. That you’re the one to help him accomplish it

Engagement

There comes a point when it’s time to close the deal and ask for the engagement. There are many ways to do this, but I always liked to ask a simple question: “Are you ready to move forward?” (You do this after you’ve discussed all there is to discus and recapped the entire conversation, asking if there’s anything that needs to be added.)

If your prospect says, “yes,” he’d like to move forward, you need to establish the next step. For a lot years, that meant spending several hours preparing a detailed proposal—that is, until I learned how to stop writing proposals to win business.

If you establish and agree upon items #1 and #2 above, then you ought to be able to obtain the prospect’s verbal agreement, conditional on price, without ever writing a proposal. Once you do, it’s a simple thing to prepare a cost estimate without turning it into a comprehensive project plan. Whether I did that on the spot or went back to the office depended on the size and complexity of the project. Once I had a price, I got back in touch to get his agreement.

Finalize

Now it’s time to finalize the agreement. If the prospect has agreed to the price, you return to his place of business with your final, written document in hand (based on everything discussed during the Needs Analysis and Recommendation steps), then sit down with him and go over every clause in detail. To prevent future problems like waiting to get paid when your client delays, making endless design changes, or avoiding the slippery slope of scope creep, you must stop getting walked on and set some boundaries. That’s exactly what you’re doing here, by managing expectation up-front, in a face-to-face conversation, instead of after the fact.

The Final Word

There are many ways to skin this cat; this just happens to be the way I skin it. You may develop a process that’s similar or completely different. Steal mine, borrow from it, or make up your own. But come up with one that works for you, then refine it until you get it right. It will do wonders for your business and will put an end to abusive clients, misunderstandings, and mismanaged expectations and once and for all.

Image credit

It’s not too late to get my free guide, 27.5 Must-Ask Questions for Consultative Selling. Just follow me on Twitter and I’ll send you a link.

This is part 11 of the series Putting a Stop to Abusive Client Behavior:

An Introduction to C

Surabhi Saxena — Sat, 19 May 2012 15:00:53 +0000

Introduction

C is a general purpose, structured programming language. Its instructions consist of terms that resemble algebraic expressions, augmented by certain English keywords such as if, else, for, do and while. In this respect it resembles high level structured programming languages such as Pascal and Fortran. C also contains additional features, that allow it to be used at a lower level, thus bridging the gap between machine language and high level language. This flexibility allows C to be used for systems programming as well as for applications programming. Therefore C is called a middle level language.

C is characterized by the ability to write very concise source programs, due in part to the large number of operators included within the language. It has a relatively small instruction set, though actual implementations include extensive library functions which enhance the basic instructions. C encourages users to create their own library fuctions.

An important characteristic of C is that its programs are highly portable. The reason for this is that C relegates most computer dependent features to its library functions. Thus, every version of C is accompanied by its own set of library functions which are relatively standardized. Therefore most C programs can be processed on many different computers with little or no alteration.

History of C:

C was developed in the 1970′s by Dennis Ritchie at Bell Telephone Laboratories,Inc. (now a part of AT&T). It is an outgrowth of two earlier languages, called BCPL and B, which were also developed at Bell Laboratories.

The Combined Programming Language(CPL) was developed at Cambridge University in 1963 with the goal of developing a common programming language which can be used to solve different types of problems on various hardware platforms. However it turned out to be too complex, hard to learn and difficult to implement. Subsequently in 1967, a subset of CPL, Basic CPL(BCPL) was developed by Martin Richards incorporating only the essential features. However it was not found to be sufficiently powerful. Around the same time another subset of CPL, a language called B was developed by Ken Thompson at Bell Labs. However it also turned out to be insufficient . Then, in 1972, Dennis Ritchie at Bell Labs developed the C language incorporating the best features of both BCPL and B.

C was largely confined to use within Bell Labs until 1978, when Brian Kernighan and Ritchie published a definitive description of the language . The Kerninghan and Ritchie description of C is commonly referred to as ‘K &R C’.

Following the publication of ‘K&R C’,computer professionals, impressed with C’s many desirable features, began to promote the use of C. By the mid 1980′s the popularity of C had become widespread-many c compilers and interpreters had been written for computers of all sizes and many commercial application programs had been developed. Moreover, many commercial software products that had originally been written in other languages were rewritten in C in order to take advantage of its efficiency and portability.

Early commercial implementations of C differed a little from Kerninghan and Ritchie’s original description, resulting in minor incompatibilities between different implementations. As a result, the American National Standards Institute(ANSI committee X3J11) developed a standardized definition of C. Virtually all commercial compilers and interpreters adhere to the ANSI standard. Many provide additional features of their own.

C and Systems Programming:

There are several features of C, which make it suitable for systems programming. They are as follows:

C is a machine independent and highly portable language.
It is easy to learn; it has only 28 keywords.
It has a comprehensive set of operators to tackle business as well as scientific applications with ease.
Users can create their own functions and add to the C library to perform a variety of tasks.
C language allows the manipulation of bits, bytes and addresses.
It has a large library of functions.
C operates on the same data types as the computer, so the codes generated are fast and efficient.

Structure of a C Program:

Every C program consists of one or more modules called functions. One of the functions must be called main. The program will always begin by executing the main function, which may access other functions. The main function is normally,but not necessarily located at the beginning of the program. The group of statements within main( ) are executed sequentially. When the closing brace of main( ) is encountered, program execution stops and control is returned to the operating system.

Any other function defintions must be defined separately, either ahead or after main( ). Each function must contain:

1. A function heading, which consists of the function name, followed by an optional list of arguments, enclosed in parantheses.

2. A return type written before the function name. It denotes the type of data that the function will return to the program.

3. A list of argument declarations, if arguments are included in the heading.

4. A compound statement, which comprises the remainder of the function.

The arguments(also called parameters) are symbols that represent information being passed between the function and other parts of the program.

Each compound statement is enclosed between a pair of braces{ }. The braces may contain one or more elementary statements (called expression statements) and other compound statements. Thus compound statements may be nested one within another. Each expression statement must end with a semicolon(;).

Comments (remarks) may appear anywhere within a program as long as they are enclosed within the delimiters /* and */. Comments are used for documentation and are useful in identifying the program’s principal features or in explaining the underlying logic of various program features.

Components of C Language:

There are five main components of the C Language:-

1. The character set: C uses the uppercase letters A to Z, the lowercase letters a to z, the digits 0 to 9 and certain special characters as building blocks to form basic program elements(e. g. constants, variables, expressions, statements etc. ).

2. Data Types: The C language is designed to handle five primary data types, namely, character, integer, float, double and void; and secondary data types like array, pointer, structure, union and enum.

3. Constants: A constant is a fixed value entity that does not change its value throughout program execution.

4. Variables: A variable is an entity whose value can change during program execution. They are used for storing input data or to store values generated as a result of processing.

5. Keywords: Keywords are reserved words which have been assigned specific meanings in the C language. Keywords cannot be used as variable names.

The components of C language will be discussed in greater detail in the following articles. This section gives only a brief introduction to the components of C.

Example 1: The following program reads in the radius of a circle, calculates the area and then prints the result.

/* program to calculate the area of a circle*/
#include /*Library file access*/
#include /*Library file access*/
void main( )            /* Function Heading*/
    {
       float radius, area; /*Variable declarations*/
       /*Output Statement(prompt)*/
       printf("Enter the radius :");
      /*Input Statement*/
      scanf("%f", &radius);
      /*Assignment Statement*/
      area = 3.14159*radius*radius;
      /*Output Statement*/
      printf("Area of the circle :%f", area);
       getch( );
     }

Program output:-

Enter the radius: 3

Area of the circle: 28. 27431

The following points must be considered to understand the above program:-

1. The program is typed in lowercase. C is case sensitive i. e. uppercase and lowercase characters are not equivalent in C. It is customary to type C instructions in lowercase. Comments and messages(such as those printed using printf() ) can be typed in anycase.

2. The first line is a comment that identifies the purpose of the program.

3. The instruction #include contains a reference to a special file called stdio. h . This file contains the definition of certain functions required to read and print data such as printf() and scanf() . It is a header file and hence the extension . h.

4. Similarly #include links the file conio. h which is another header file that contains the definitions of functions used for reading and printing data at the console. The function getch() is defined in conio. h. # denotes a preprocessor directive. More about this in a later article.

5. The instruction void main() is a heading for the function main( ). The keyword void denotes the return type of main and indicates that the function does not return any value to the program after the program has finished executing. The empty parantheses ( ) after main indicates that this function does not include any arguments. Program execution always begins from main( ).

6. The remaining five lines of the program are indented and enclosed in a pair of braces { }. These five lines comprise the compound statement within the function main( ).

7. The instruction float radius, area; is a variable declaration. It establishes the symbolic names ‘radius’ and ‘area’ as floating point variables. These variables can accept values of type ‘float ‘ i. e numbers containing a decimal point or an exponent.

8. The next four instructions are expression statements. The instruction printf(“Enter the radius :”); generates a request for information namely,the value for the radius. This statement generates a prompt where the user enters the value .

9. The value of the radius is read into (or stored in) the variable radius with the help of the scanf ( ) function. The instruction scanf(“%f”, &radius); is used for reading data. “%f” is a conversion character which is used to accept a floating point value.

10. The next instruction, area = 3.14159*radius*radius; is called an assignment statement. This instruction calculates the area by using the value of radius entered by the user and assigns the value to the variable area.

11. The next printf( ) statement prints the message Area of the circle followed by the calculated area.

12. The statement getch(); is used to pause the screen so that you can read the output. If getch( ) is not used the screen will just flash and go away. This function waits for the user to input some character(as it accepts a character as input), after the program has finished executing. Any key present on the keyboard pressed by the user is accepted by the getch function as input and its ASCII value is returned to main( ).

Example2: Below is a variation of the above program:

/*program to calculate the area of a circle using a user defined function*/
#include 
#include 
#define PI 3.14159
float process(float radius);/*function prototype*/
void main()
    {
      float area,radius;
      printf("\n Enter the radius:");
      scanf("%f", &radius);
      area= process(radius);
      printf("Area =%f", area);
      getch();
     }
float process( float r)
     {
     float a; /*local variable declaration*/
     a= PI*r*r;
     return(a);
     }

This version utilizes a separate programmer defined function called process, to calculate the area. Within this function, r is an argument (also called a parameter) that accepts the value of radius supplied to process from main, and a is the calculated result returned to main. A reference to the function appears in main( ), within the statement area= process(radius);

In this statement, the value of area being returned from the function process is stored in the variable area.

The main function is preceeded by a function prototype, which indicates that there is a user defined function called process which is defined after main and that it accepts a floating point argument and returns a floating point value. If the user defined function process, was defined before main( ), the function prototype would,generally, have not been required.

More explanation about this when I write about functions in a later article.

This program also contains a symbolic constant, PI, which represents the numeric value 3. 14159. This is a form of shorthand that exists for the programmers convenience. When the program is actually compiled, the symbolic constant will automatically be replaced by its numerical value. The output of this program is the same as that of the previous program.

This article was a brief introduction, it gives an idea of C programming. The next article will talk about the fundamental concepts of C which include the C character set, Identifiers and keywords, data types in detail, constants,variables, variable declarations, expressions, statements and symbolic constants .