    
|
|
|
Not every website requires a type of user discussion. Handling comments on a popular site becomes a chore when sifting through spam and cleaning up garbage. Yet it also provides a way for readers to communicate their thoughts on a subject. It also spurs unique questions and open discussion on related topics.
The purpose for user comments is to keep people on the site, building a discussion and hopefully sharing information with your future audience.
In this post I want to share helpful tips for building a powerful comments/discussion area. Many CMS options like WordPress have comments built into the core of the framework, but if you create your own system there are still 3rd party options that can save you a lot of time.
Your website’s comment area should be appealing and welcoming to someone who has never been on your page before. There is some benefit to using a 3rd party commenting system in the hopes that visitors will already be familiar with your choice. Take a look at this collection of blog comment designs which focuses on threaded posts and simple discussions.
Avatars draw in attention because they look like most other social networking discussions. You can even set up a default avatar to use when someone doesn’t have an image – it keeps the natural flow of the page in check. Also, consider how background colors, box shadows, reply arrows and other icons would affect the design.
Overall you want to create a comment form which is not too intimidating. Instead it should be welcoming and almost begging for a comment. Creating a lower barrier-to-entry makes more people willing to comment on your blog posts or similar pages. Try reducing fields to just name/comment, or using some type of autosuggest feature.
When a user is logged into your website this process becomes much easier. You can pull their avatar, username, e-mail, and website URL because their profile (hopefully) contains all of this information. This reduces the comment form to a single textarea, which is much simpler in comparison to 3-4 extra fields.
My personal favorite third-party commenting system is Disqus because of their incredible frontend UI along with the backend moderation tools. Disqus provides votes on comments so that webmasters can rank based on highest ratings.
Other websites have adopted this system because it is very simple to manage. The plugin for WordPress allows for an insanely quick setup. You can even access the moderation tools right from the WP-admin section of your website. I’ve noticed that Disqus is great about cleaning up spammy-looking comments before they even get approved or sent into the queue. It is worth trying out just to see how you feel about the controls.
It is possible to customize the design and user interface, but it also requires a bit of practice. The default comments layout is perfect for any blog. You can update the general color scheme while keeping the same design style and it won’t take more than a few minutes, whereas the process of re-styling your whole comments section may take an entire day, or even longer if you’re a perfectionist.
When you get lost or just need a simple answer please check out the Disqus Knowledge Base. This online archive includes tons of information for commenters and developers. This discussion platform was built with the end user in mind, while not sacrificing any control from the webmaster’s perspective.
I have only had a small amount of personal experience using IntenseDebate. I’ve posted lots of comments using IntenseDebate and it is a very smooth process. Tumblr, Blogger, and other free services allow you to include this instead of the default comments. It also lets people log in using OAuth from many providers like Twitter, Facebook, Gravatar, and even OpenID.
Check out the IntenseDebate website if you’d like to learn more. Their structure includes detailed user profiles for each person who signs up. You aren’t required to include a whole lot of info about yourself, but the profile fields are there for anyone interested. It’ll keep a history of all your comments and your votes given to other comment threads – a handy solution to find older articles you might have forgotten about.
I also really like how IntenseDebate uses a system of backend administration + Akismet for handling spam. You can setup group admins who all have access to log into the moderation panel and clean out spammers, approve new comments, and make other adjustments as necessary. WordPress has a fully-featured free plugin you can use to get started.
There’s no doubt that Facebook has become the most popular social network in modern times. People all over the world have accounts, and many of them stay logged-in when visiting other websites. So including a section on your website running Facebook comments might be a good idea if your audience fits into this demographic.
You can read more about Facebook comments on the Facebook developer’s website. That page includes a code generator and some documentation. The process isn’t really too difficult even if you run a static HTML site. Naturally, there are plugins for using Facebook comments in CMS engines like WordPress or Drupal.
You might be surprised at how many people are willing to post a comment just because it’s Facebook. The comment field will display a user’s profile photo if they are logged into the site. At a quick glance someone would be able to tell if they can post a comment, and (more importantly) if they even want to. I personally don’t use Facebook but the immense popularity isn’t something that can be ignored. If folks move onto another site in the next few years then it may be worth switching – although until that day comes Facebook will retain its status as the #1 most trafficked social network.
The online comments platform offered by Livefyre is very interesting, and unique in comparison to many others. They provide solutions for more than just bloggers and the goal is to connect visitors to webmasters in a simple manner. Their website mentions plenty about comments that are free to setup and create with your own account.
Be sure to check out their Streamhub page, especially the part about live chat and other mechanisms. You can generate codes which create small chat windows for visitors to share questions, concerns, and suggestions about the website. This stuff doesn’t always get published, but instead gets sent to an administrator’s e-mail or directly to the real-time chat servers.
In my opinion Livefyre was purposefully structured and heavily geared towards developers. You have access to a number of SDKs related to iOS, Android, and JavaScript applications. All of the sample codes and API platforms are free on Github to download and play with. It’s not one of the easiest setups but it really isn’t too difficult, either. I would argue that developers prefer Livefyre because the interface and multitude of features are practically begging to be customized. Take a peek at their FAQ page if you want to read some more.
Thankfully WordPress does have a myriad of simple plugins to get all this stuff working automatically. The default comment setup in WordPress can be manipulated like crazy. It does require some type of anti-spam mechanism. Akismet is one of the best plugins because it is free and comes prepackaged with each WordPress download.
One of the more open solutions named Social Comments allows a user to sign into the comment field using many different sources. There are login icons for Disqus, Facebook, Twitter, and even Google+. All comments are displayed in the same manner and the conformity helps bridge together multiple networks onto your website.
This is also true for the Jetpack plugin which uses an enhanced new comments field. Visitors may also sign into the field using alternative networks including the WordPress website. I believe Gravatars stay as the default image but you can update these options in many cases. This all comes down to personal preference, so try out lots of different choices until you stumble onto something you’re happy with.
Another aspect of WordPress that makes it worth using is the functionality you never expect to find. Like with the Comment Rating Field plugin to allow visitors the ability of ranking comments using a 5-star vote technique. There are alternatives for thumbs up/down or even voting arrows. Naturally this is built into some platforms (Disqus) but it’s also handy to control the interface through WordPress.
Webmasters and web developers are not always thinking about user comments – it is a feature with less importance in the grand scheme of things, but the impact of user discussion can affect your website months or even years down the road when visitors find older comments posted to your site. Do some research on your own and see if managing comments would be worthwhile for your next project.
The post Solutions for Well-Designed Comments & Discussion Areas appeared first on Treehouse Blog.
]]>|
|
3D graphics in the browser have been a hot topic ever since it was first introduced. But if you were to create your apps using plain WebGL, it would take ages. This is exactly why some really useful libraries have recently came about. Three.js is one of the most popular, and in this series I will show you how best to use it in order to create stunning 3D experiences for your users.
Before we begin, I do expect you to have a basic understanding of 3D space before you start reading this tutorial, as I won’t be explaining stuff like coordinates, vectors, etc.
First, create three files: index.html, main.js and style.css. Now, download Three.js (whole zip file with examples and source, or the JavaScript file alone, your choice). Now, open index.html and insert this code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<script src="./three.js"></script>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
That’s all you need in this file. Just a declaration of scripts and stylesheet. All the magic will happen in main.js, but before we get to that we need one more trick to make the app look good. Open style.css and insert this code:
canvas {
position: fixed;
top: 0;
left: 0;
}
This will position the canvas in the left-top corner, because by default the body will have 8px of margin. Now we can proceed with the JavaScript code.
Three.js uses the concept of a display list. It means that all objects are stored in the list and then drawn to the screen.
Three.js uses the concept of a display list. This means that all objects are stored in the list and then drawn to the screen. Here, this is a THREE.Scene object. You need to add any object you want to be drawn on the screen to the scene. You can have as many scenes as you want, but one renderer can draw only one scene at once (of course you can switch the scene that is displayed).
The renderer simply draws everything from the scene to the WebGL canvas. Three.js also supports drawing on SVG or 2D Canvas, but we will focus on WebGL.
To get started, lets store the window’s width and height in variables, we will use it later:
var width = window.innerWidth;
var height = window.innerHeight;
Now define the renderer and the scene:
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene;
The first line defines the WebGL renderer. You can pass the renderer’s options in the first argument as a map. Here, we set the antialias to true, because we want the edges of objects to be smooth, not jagged.
The second line sets the renderer size to the size of the window, and in the third one we add the renderer’s canvas element to the document (you can also do this using a library, like jQuery: $('body').append(renderer.domElement)).
The last one defines the scene, no arguments needed.
Now lets add something to be drawn. Let it be a cube, since it’s the simplest 3D object. In Three.js the objects that are being drawn on the screen are called meshes. Each mesh has to have its own geometry and material. Geometry is a set of points that need to be connected in order to create the object. Material is simply the paint (or painting, but that is not the topic of this tutorial) that will cover the object. So, lets create our cube. Luckily for us there are some helper functions in Three.js for creating primitives (simple shapes):
var cubeGeometry = new THREE.CubeGeometry(100, 100, 100);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x1ec876 });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.rotation.y = Math.PI * 45 / 180;
scene.add(cube);
As you can see, first we create the geometry. The arguments are defining a size of the cube: the width, height and depth.
Next, we define the cube’s material. There are a few material types in Three.js, but this time we will use the THREE.MeshLambertMaterial, since we want to have some lighting later (this material uses Lambert’s algorithm for light calculations). You can pass the options in the first argument as a map, the same as with the renderer – this is pretty much a rule for more complex objects in Three.js. Here, we only use color, which is passed as a hexadecimal number.
On the third line, we create a mesh using the geometry and material created earlier. Next, we rotate the cube by 45 degrees on the Y axis, to make it look better. We have to change degrees to radians, which is handled by the equation you probably remember from your high school physics class: Math.PI * 45 / 180. Finally, the cube is added to the scene.
Now you could open index.html in your browser to see the results, but you will see nothing because the scene is not rendered yet.
To render something, first we need to add the camera to the scene, so the renderer knows from which point of view it should render stuff. There are a few types of cameras in Three.js, but you’ll probably only use THREE.PerspectiveCamera. This type of camera is presenting the scene as we see our world. Lets create one:
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
“To render something, first we need to add the camera to the scene, so the renderer knows from which point of view it should render stuff.”
Creating the camera is a bit more complicated than the rest of the things we’ve done so far. The first argument defines the FOV (field of view), the angle that can be seen from where the camera is. A FOV of 45 degrees looks natural. Next, we define the camera’s ratio. This is always the width of the renderer divided by its height, unless you want to achieve some special effects. The last two numbers are defining how close and how far the object can be to the camera to be drawn.
Now we have to move the camera back and up a little, as all of the objects created in Three.js have their position set in the middle of the scene (x: 0, y: 0, z: 0) by default:
camera.position.y = 160;
camera.position.z = 400;
The z coordinate is positive in the direction of the viewer, so objects with a higher z position will appear closer to you (in this case, since we moved the camera, all of the objects will appear further away from you).
Now, lets add the camera to the scene and render it:
scene.add(camera);
renderer.render(scene, camera);
You add the camera just like you added the cube. The next line renders the scene using this camera. Now you can open the browser and you should see the following:
You should only be able to see the top of the cube. This is because we moved the camera up and it’s still looking directly in front of it. This can be fixed by letting the camera know on what position it should look. Add this line after the lines setting the position of the camera:
camera.lookAt(cube.position);
The only argument passed in is a position on which the camera will look. Now, the scene looks better, but the cube is still black, no matter what color you’ve set when creating it:
The cube is black, because there are no lights on the scene, so it’s like a completely black room. You see a white background because there is nothing to draw apart from the cube. To avoid that, we will use a technique called skybox. Basically, we will add a big cube that will display the background of the scene (usually some far terrain if it’s open space). So, lets create the box. This code should go before the renderer.render call:
var skyboxGeometry = new THREE.CubeGeometry(10000, 10000, 10000);
var skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide });
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
scene.add(skybox);
This code is similar to the one that creates the cube. But this time the geometry is much bigger. We’ve also used THREE.MeshBasicMaterial since we don’t need to light the skybox. Also, notice the additional argument passed to the material: side: THREE.BackSide. Since the cube will be displayed from the inside, we have to change the side that gets drawn (normally, Three.js draws only outside walls).
Now the rendered scene is completely black. To fix that we have to add light to the scene. We will use THREE.PointLight, which emits the light like a bulb. Add these lines after the skybox:
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);
scene.add(pointLight);
As you can see, we’ve created the point light with white color, then we are setting its position to be up and back a little, to light the front and the top of the cube. Finally the light is added to the scene like any other object. Open up the browser and you should see a colored, shaded cube:
But the cube is still pretty boring. Let’s add some movement to it.
Now we will add some movement to the scene. Lets make the cube rotate around the Y axis. But first, we have to change the way that we render the scene. One renderer.render call, renders the current state of the scene once. So even if we animate the cube somehow, we will not see it move. To change that, we have to add the render loop to our app. This can be achieved using the renderAnimationFrame function, which was created specially for that purpose. It’s supported in most of the major browsers, and for those which doesn’t support it, Three.js comes with its own polyfill. So, lets change this:
renderer.render(scene, camera);
to this:
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
Actually, there is no loop in there, because it would freeze the browser. The requestAnimationFrame function behaves a bit like setTimeout, but it’s calling the function passed as quick as the browser is ready. So, nothing really changed in the displayed scene and the cube is still not moving. Lets fix that. Three.js comes with THREE.Clock which can be used to achieve smooth animation of objects. First, initialize it before the render function definition:
var clock = new THREE.Clock;
Now, each time you call clock.getDelta it will return the time since the last call, in milliseconds. This can be used to rotate the cube like this:
cube.rotation.y -= clock.getDelta();
Add this line between the renderer.render and the requestAnimationFrame calls in the render function. It’s simply subtracting the time passed from the cube’s rotation on the Y axis (remember that it’s in radians) to rotate the cube clockwise. Now open the browser and you should see your cube rotating clockwise smoothly.
In this part of the series you learned how to prepare the scene, add objects and lights, and how to animate things. You can experiment with the app, add more or different objects, lights. It’s up to you. Next time I will show you how to use textures and how to create some nice effects with particles. Don’t forget to take a look at the documentation if you are having any problems.
]]>"The O'Donnell family papers consists primarily of letters and other documents written to and from the descendants of John O'Donnell (1749-1805) and his wife Sarah Chew Elliott O'Donnell (1768-1855). The most prolific writer among them was Columbus O'Donnell (1792-1873), the eldest surviving son of John and Sarah O'Donnell's sons, whose letters during and immediately after the Civil War provide a glimpse into the social attitudes and economic conditions surrounding that conflict."
|
|
The CEO of Russia’s biggest Internet company explains why he hopes to make a splash in the U.S. app market.
Dmitry Grishin spent years building Internet companies in Russia, first with Molotok.ru, an eBay copycat he founded in 2000, and then as a cofounder and CEO of Mail.ru Group, a Russian Internet conglomerate that is essentially that country’s version of Yahoo. But lately he’s been hoping to translate his success online to the world of personal robotics—a lifelong love—with the launch last year of venture firm Grishin Robotics, which has so far made five investments in companies ranging from hardware accelerator Bolt to on-demand, inexpensive satellite provider NanoSatisfi. This year, the 34-year-old was named one of MIT Technology Review’s Innovators Under 35.
]]>