Sunday, April 7, 2013
Note: the demos in this blog post require IE 9+ (preferably 10), Firefox, or any WebKit browser. If you’re on a mobile device, you might need to click the open in new page button to view the demos properly.
Pos Terbaru Kreatifa Media
Tutorial: 3D-ifying Documents Using CSS Transforms
Note: the demos in this blog post require IE 9+ (preferably 10), Firefox, or any WebKit browser. If you’re on a mobile device, you might need to click the open in new page button to view the demos properly.
Padlet: Create Anything on a Blank "Wall" and Share
Padlet give you a blank wall. You put anything you want on it, anywhere. Simple, yet powerful.
you can create anything on a blank "wall" and share it with others.
checkout examples of Padlet used for
teaching, wishing friends, noticeboards, bookmarking, discussions, brainstorming, notetaking, quizzes, planning events, making lists, watching videos, collecting feedback
Tutorial Mini Help System with jQuery
Friday, December 14, 2012
In this tutorial are going to create a mini help system with jQuery. This will be a small widget which will display help text or a guide to users of your web application. The widget content is going to be searchable in real time, and all matching terms will be highlighted.
For this example to work, here is what we have to do:
- We have to listen for the input event on the text box. I prefer this to keypress, as input catches events like cut/paste and undo/redo. It is not supported in older browsers (<IE9) though, so you might want to replace it with keypress if you want this example to work there;
- We will write a jQuery plugin, aptly named “highlight”, that will replace the matched text with
<span>elements; - We will use the jQuery.scrollTo plugin to smoothly scroll the
<span>elements into view.
Let’s start with the markup.
The first step is to lay down the HTML of the page that we will be working on:
There’s nothing out of the ordinary here – we are including a stylesheet in the head (you might want to take a look at it yourself, I won’t present it in this tutorial), jQuery and the scrollTo plugin at the bottom, along with two more js files that we will be discussing next. The widget has a text field (inside a #header div) and the #content holder. Inside the latter, you should put the help guide for your application.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mini Help System with jQuery | Tutorialzine </title>
<!-- Our stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body>
<div id="widget">
<div id="header">
<input type="text" id="search" placeholder="Search in the text" />
</div>
<div id="content">
<!-- Your help text goes here -->
</div>
</div>
<!-- JavaScript Includes -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="assets/js/highlight.jquery.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
The jQuery Code
Now we’re going to write a jQuery plugin that searches for specific words in the #content element, and replaces the occurrences with span elements. For example searching for
javascript in the text javascript is awesome would yield <span class="match">javascript</span> is awesome. We will later style the .match spans with an orange background so they are easily distinguishable.The plugin will take two arguments – a search term (as a string), and an optional callback function that will be executed when the search/replace process is complete. As you will see later, we will use the callback to hook the scrollTo plugin and scroll the #content div to reveal the matches.
Before you start reading this code, keep in mind that you can’t simply fetch the inner html of the div, and call replace() on it to replace the search occurrences with span elements, as this way you will break your markup. If someone entered “div” as a search term this would cause all your
<div> elements to be replaced with <<span class="match">div</span>>, witch is just asking for trouble.The solution is a bit more complex (but not difficult once you get the idea) – we will use the contents() jQuery method to fetch all children of the element, and replace() the text only on the text nodes (they are guaranteed to not contain any html). We will then loop through all the element’s non-textnode children recursively, and repeat the steps.
assets/js/hight.jquery.js
(function($) {
var termPattern;
$.fn.highlight = function(term, callback) {
return this.each(function() {
var elem = $(this);
if (!elem.data('highlight-original')) {
// Save the original element content
elem.data('highlight-original', elem.html());
} else {
// restore the original content
elem.highlightRestore();
}
termPattern = new RegExp('(' + term + ')', 'ig');
// Search the element's contents
walk(elem);
// Trigger the callback
callback && callback(elem.find('.match'));
});
};
$.fn.highlightRestore = function() {
return this.each(function() {
var elem = $(this);
elem.html(elem.data('highlight-original'));
});
};
function walk(elem) {
elem.contents().each(function() {
if (this.nodeType == 3) { // text node
if (termPattern.test(this.nodeValue)) {
// wrap the match in a span:
$(this).replaceWith(this.nodeValue.replace(termPattern, '<span class="match">$1</span>'));
}
} else {
// recursively call the function on this element
walk($(this));
}
});
}
})(jQuery);And voila, our text is full with pretty highlights! Don’t worry if you don’t quite understand how this works – it is packaged as an easy to use jQuery plugin, so you can drop it in your project without much thought.
Here is how to use the plugin:
assets/js/script.js
$(function() {
var search = $('#search'),
content = $('#content'),
matches = $(), index = 0;
// Listen for the text input event
search.on('input', function(e) {
// Only search for strings 2 characters or more
if (search.val().length >= 2) {
// Use the highlight plugin
content.highlight(search.val(), function(found) {
matches = found;
if(matches.length && content.is(':not(:animated)')){
scroll(0);
}
});
} else {
content.highlightRestore();
}
});
search.on('keypress', function(e) {
if(e.keyCode == 13){ // The enter key
scrollNext();
}
});
function scroll(i){
index = i;
// Trigger the scrollTo plugin. Limit it
// to the y axis (vertical scroll only)
content.scrollTo(matches.eq(i), 800, { axis:'y' } );
}
function scrollNext(){
matches.length && scroll( (index + 1) % matches.length );
}
});In the callback, I trigger the scroll(0) function. This animates the #content div so it shows the first match of the series. There is another function for scrolling – scrollNext, which is called when you hit the return key while typing. This will cause the holder to reveal the next match. With this our mini help system is complete!
by Martin Angelov
source : http://tutorialzine.com/2012/12/mini-help-system-jquery/
Tutorial: Dropbox File Uploader With Twitter Bootstrap
Friday, November 30, 2012
A few weeks ago, Dropbox introduced a neat new feature – the Dropbox Chooser. By embedding it into your website, you give users a button with which they can attach files from their online storage.
Today we are going to use this feature to create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result. Additionally, we will make use of Twitter Bootstrap to show dialog windows, and PHP on the backend for the actual photo cropping.
Tutorial Colorful CSS3 Animated Navigation Menu
Saturday, November 10, 2012
In this short tutorial, we will be creating a colorful dropdown menu using only CSS3 and the Font Awesome icon font. An icon font is, as the name implies, a font which maps characters to icons instead of letters. This means that you get pretty vector icons in every browser which supports HTML5 custom fonts (which is practically all of them). To add icons to elements, you only need to assign a class name and the icon will be added with a :before element by the font awesome stylesheet.
Tutorial Todo List App Powered By WordPress
Sunday, October 7, 2012
In this tutorial, we are going to make a WordPress plugin that hooks into the API. It will then present a simple, AJAX-ed todo list application on the /todo URL of your WordPress site. The best thing is that this is a plugin and not a theme, which means you can use it on any WordPress site regardless of the theme. Let’s get started!
Your First WordPress Plugin
If you haven’t written a WordPress plugin before, here is what you need to know:- Plugins are PHP files that reside in the /wp-content/plugins folder;
- Plugins can be either a single PHP file with a unique name, or a folder with that file inside it, along with additional includes and resources (read the getting started guide);
- Plugins are described by a comment header in the main PHP file. You need this for your plugin to be recognized;
- Plugins do their business by hooking up to specific events in the WordPress execution. There is a reference with all available filters and actions;
- The documentation is your friend.
If you only wish to test out the Todo app we are writing today, you can simply grab the download zip, and install it from WordPress’ admin panel (choose Plugins->Upload).
Tutorial Make a Drawing Game with Node.js
Monday, August 27, 2012
By now you have probably heard of node.js. It is an asynchronous web server built ontop of Google’s V8 JavaScript engine (the same one that makes Chrome lighning fast). Using node, you can write scalable web services in JavaScript, that can handle a huge number of simultaneous connections, which makes it perfect as the backend of games, web chats and other real time tasks.
The Idea
Today we will be making a simple online drawing game. The app will let users draw on the page by dragging and moving their mice, and will display the results on a large canvas element. What sets is apart from all the other similar experiments though, is that people will see each other in real time as they do so. To achieve this, we will leverage the socket.io
library for node.js, which uses a range of technologies from websockets to AJAX long polling to give us a real time data channel. Because of this, the example works in all modern browsers.
Installing node.js
To run the game you will need to install node.js. It shouldn’t take more than a few minutes and is fairly straightforward. If you are on Windows, you can go ahead and download the installer from its official site. If you are on Linux or OSX, you will need to run this set of commands in your terminal (you only need to run the first script: node-and-npm-in-30-seconds.sh).
After you finish installing, you will also get access to npm, or node package manager. With this utility you can install useful libraries and bits of code that you can import into your node.js scripts. For this example, we will need the socket.io library I mentioned above, and node-static, which will serve the HTML, CSS and JS files of the drawing application. Again, open up your terminal (or a new command prompt window if you are on Windows) and write the following command:
1 | npm install socket.io node-static |
This shouldn’t take more than a few minutes to complete.
Running the Application
If you want to just grab the files and test the app on your computer, you will need to download the archive from the button above, and extract it somewhere on your hard drive. After this, open a command prompt / terminal and navigate to the folder (of course you remember how the cd command works, don’t you?). After this, type this command and hit return:
1 | node app.js |
You should be greeted with a socket.io debug message (otherwise probably your path is wrong; keep practicing with that cd command!). This means that everything is up and running! Now open http://localhost:8080 and you should see your very own copy of the demo. Nice!
These instructions also apply if you are following the steps of the article and are building the app from scratch. Which brings us back to the tutorial:
The HTML
The first step is to create a new HTML document. Inside it, we will put the canvas element which users will be drawing upon, and a div for holding the mouse pointers. Each mouse pointer will be a div with the .pointer css class that is absolutely positioned on the page (we won’t be discussing the styling in this article, open assets/css/styles.css to take a look).
index.html
01 | <!DOCTYPE html> |
02 | <html> |
03 | <head> |
04 | <meta charset="utf-8" /> |
05 | <title>Node.js Multiplayer Drawing Game | Tutorialzine Demo</title> |
06 |
07 | <!-- The stylesheets --> |
08 | <link rel="stylesheet" href="assets/css/styles.css" /> |
09 |
10 | <!--[if lt IE 9]> |
11 | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
12 | <![endif]--> |
13 | </head> |
14 |
15 | <body> |
16 | <div id="cursors"> |
17 | <!-- The mouse pointers will be created here --> |
18 | </div> |
19 |
20 | <canvas id="paper" width="1900" height="1000"> |
21 | Your browser needs to support canvas for this to work! |
22 | </canvas> |
23 |
24 | <hgroup id="instructions"> |
25 | <h1>Draw anywhere!</h1> |
26 | <h2>You will see everyone else who's doing the same.</h2> |
27 | <h3>Tip: if the stage gets dirty, simply reload the page</h3> |
28 | </hgroup> |
29 |
30 | <!-- JavaScript includes. Notice that socket.io.js is served by node.js --> |
31 | <script src="/socket.io/socket.io.js"></script> |
32 | <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> |
33 | <script src="assets/js/script.js"></script> |
34 |
35 | </body> |
36 | </html> |
You can see that the canvas is set to a fixed width of 1900px and height of 1000px, but users with smaller displays will see only a part of it. A possible enhancement would be to enlarge or reduce the canvas in relation to the screen size, but I will leave that to you.
For the real-time communication channel between the users’s browser and node.js to work, we need to include the socket.io library in both places, however you won’t find the socket.io.js file included in the bottom of index.html in the download archive. This is because socket.io intercepts requests to /socket.io/socket.io.js and serves it itself so you don’t have to explicitly upload this file with your application.
Draw Anywhere!
The Client Side
In other tutorials, we would usually name this section JavaScript, but this time we have JavaScript on both the client (the person’s browser) and the server (node.js), so proper distinction must be made.
The code you see below runs in the person’s browser. It uses socket.io to connect to the server and notifies us when an event occurs. That event is a message emitted by other clients and relayed back to us by node.js. The messages contain mouse coordinates, unique id for the user, and whether they are drawing or not in the moment.
assets/js/script.js
001 | $(function(){ |
002 |
003 | // This demo depends on the canvas element |
004 | if(!('getContext' in document.createElement('canvas'))){ |
005 | alert('Sorry, it looks like your browser does not support canvas!'); |
006 | return false; |
007 | } |
008 |
009 | // The URL of your web server (the port is set in app.js) |
010 | var url = 'http://localhost:8080'; |
011 |
012 | var doc = $(document), |
013 | win = $(window), |
014 | canvas = $('#paper'), |
015 | ctx = canvas[0].getContext('2d'), |
016 | instructions = $('#instructions'); |
017 |
018 | // Generate an unique ID |
019 | var id = Math.round($.now()*Math.random()); |
020 |
021 | // A flag for drawing activity |
022 | var drawing = false; |
023 |
024 | var clients = {}; |
025 | var cursors = {}; |
026 |
027 | var socket = io.connect(url); |
028 |
029 | socket.on('moving', function (data) { |
030 |
031 | if(! (data.id in clients)){ |
032 | // a new user has come online. create a cursor for them |
033 | cursors[data.id] = $('<div class="cursor">').appendTo('#cursors'); |
034 | } |
035 |
036 | // Move the mouse pointer |
037 | cursors[data.id].css({ |
038 | 'left' : data.x, |
039 | 'top' : data.y |
040 | }); |
041 |
042 | // Is the user drawing? |
043 | if(data.drawing && clients[data.id]){ |
044 |
045 | // Draw a line on the canvas. clients[data.id] holds |
046 | // the previous position of this user's mouse pointer |
047 |
048 | drawLine(clients[data.id].x, clients[data.id].y, data.x, data.y); |
049 | } |
050 |
051 | // Saving the current client state |
052 | clients[data.id] = data; |
053 | clients[data.id].updated = $.now(); |
054 | }); |
055 |
056 | var prev = {}; |
057 |
058 | canvas.on('mousedown',function(e){ |
059 | e.preventDefault(); |
060 | drawing = true; |
061 | prev.x = e.pageX; |
062 | prev.y = e.pageY; |
063 |
064 | // Hide the instructions |
065 | instructions.fadeOut(); |
066 | }); |
067 |
068 | doc.bind('mouseup mouseleave',function(){ |
069 | drawing = false; |
070 | }); |
071 |
072 | var lastEmit = $.now(); |
073 |
074 | doc.on('mousemove',function(e){ |
075 | if($.now() - lastEmit > 30){ |
076 | socket.emit('mousemove',{ |
077 | 'x': e.pageX, |
078 | 'y': e.pageY, |
079 | 'drawing': drawing, |
080 | 'id': id |
081 | }); |
082 | lastEmit = $.now(); |
083 | } |
084 |
085 | // Draw a line for the current user's movement, as it is |
086 | // not received in the socket.on('moving') event above |
087 |
088 | if(drawing){ |
089 |
090 | drawLine(prev.x, prev.y, e.pageX, e.pageY); |
091 |
092 | prev.x = e.pageX; |
093 | prev.y = e.pageY; |
094 | } |
095 | }); |
096 |
097 | // Remove inactive clients after 10 seconds of inactivity |
098 | setInterval(function(){ |
099 |
100 | for(ident in clients){ |
101 | if($.now() - clients[ident].updated > fefbfb){ |
102 |
103 | // Last update was more than 10 seconds ago. |
104 | // This user has probably closed the page |
105 |
106 | cursors[ident].remove(); |
107 | delete clients[ident]; |
108 | delete cursors[ident]; |
109 | } |
110 | } |
111 |
112 | },fefbfb); |
113 |
114 | function drawLine(fromx, fromy, tox, toy){ |
115 | ctx.moveTo(fromx, fromy); |
116 | ctx.lineTo(tox, toy); |
117 | ctx.stroke(); |
118 | } |
119 |
120 | }); |
The basic idea is that we use socket.emit() to send a message to the node.js server on every mouse movement. This can generate a large number of packets, so we are rate-limiting it to one packet every 30 ms (the $.now() function is defined by jQuery and returns the number of milliseconds since the epoch).
The mousemove event is not called on every pixel of the movement, but we are using a trick to draw solid lines instead of separate dots – when drawing on the canvas, we are using the lineTo method, so that the distance between the mouse coordinates are joined with a straight line.
Now let’s take a look at the server!
Server Side
After reading through the client side code you might be worried that the code on the server is even longer. But you will be mistaken. The code on the server side is much shorter and simpler. What it does is serve files when people access the url of the app in their browsers, and relay socket.io messages. Both of these tasks are aided by libraries so are as simple as possible.
app.js
01 | // Including libraries |
02 |
03 | var app = require('http').createServer(handler), |
04 | io = require('socket.io').listen(app), |
05 | static = require('node-static'); // for serving files |
06 |
07 | // This will make all the files in the current folder |
08 | // accessible from the web |
09 | var fileServer = new static.Server('./'); |
10 |
11 | // This is the port for our web server. |
12 | // you will need to go to http://localhost:8080 to see it |
13 | app.listen(8080); |
14 |
15 | // If the URL of the socket server is opened in a browser |
16 | function handler (request, response) { |
17 |
18 | request.addListener('end', function () { |
19 | fileServer.serve(request, response); // this will return the correct file |
20 | }); |
21 | } |
22 |
23 | // Delete this row if you want to see debug messages |
24 | io.set('log level', 1); |
25 |
26 | // Listen for incoming connections from clients |
27 | io.sockets.on('connection', function (socket) { |
28 |
29 | // Start listening for mouse move events |
30 | socket.on('mousemove', function (data) { |
31 |
32 | // This line sends the event (broadcasts it) |
33 | // to everyone except the originating client. |
34 | socket.broadcast.emit('moving', data); |
35 | }); |
36 | }); |
With this our drawing app is complete!
Tutorial FrameWarp – jQuery plugin for displaying pages in a neat overlay
Tuesday, August 7, 2012
While working on an exciting new web app, I found that I needed a way to show certain pages in an overlay window. This comes handy if you want to reuse something like a sharing or a settings page in different screens of your app. Instead of hacking together something that barely got the job done, I decided to take the time, do it properly and share you with you.
Of course, there is the option of using one of the numerous lightbox plugins to do this, but the plugin we will be creating in this tutorial has a lot of advantages over a generic lightbox script:
- Lightweight – it is created specifically for showing pages, not images;
- No UI, so the page feels like a dialog window;
- The page can close itself, and can also send messages to the parent window;
- Can optionally use a cache for faster subsequent page loads;
- Uses a neat CSS animation with a JavaScript fallback.
Tutorial Build a one-click registration form powered by Google
Monday, August 6, 2012
Do you know that you can use Google’s services to build a one-click registration form for your web site? Everyone with a Google Account can then press a button and instantly sign up for your application with their email, name and photo.
This service is called federated login, and is built on top of the OAuth2 protocol. This is a complex process that involves several data-exchange requests between your server and Google, but we will leave all this to Google’s PHP Library, whcih will handle nearly everything on the server side.
Using this login/registration flow can simplify things for both you and your users. Here are some of the benefits:
- No need to create and validate registration and login forms;
- No need for a “forgot password” feature;
- Greatly simplified login/registration flow – you get the person’s email, name and photo with only one click;
- The email is already validated by Google, so you don’t have to send a validation message.
- Great security on Google’s part.
Of course, this will only work if the person has a Google account, so it might make sense to have this in addition to an existing registration system. Let’s get started!
