Degrama - Online Superstars » Development

Introduction to HTML 5

Degrama — Sun, 18 Jul 2010 16:45:19 +0000

If you want to know what’s new in HTML 5 but haven’t had a chance to do much reading on the topic yet, this video by Brad Neuberg provides a solid introduction to HTML 5′s most powerful capabilities and features. In this presentation he discusses five aspects of the HTML5 spec: (1) Canvas and SVG; (2) HTML5 Video; (3) The Geolocation API; (4) The HTML5 database and application cache; and (5) Web Workers.

This is a great video and a must-see for anyone that wants to start building powerful web apps using HTML5′s newest features.

Introduction to HTML 5 from Brad Neuberg on Vimeo.

HTML Cheat sheet [download]

Website Architecture

Degrama — Mon, 22 Mar 2010 03:35:33 +0000

Every website requires users to “live” inside that experience for a period of time. Basic real world architecture principles apply to website planning.

What’s it for?
What’s good about it?
What’s bad about it?
In Sum

A few tips on architecture planning:

Organize content according to user needs, not an organizational chart or how the client structures their company.
Give pages clear and succinct names.
Be sympathetic. Think of your typical users, called personas, and imagine them navigating the website. What would they be looking for?
Consider creating auxiliary way-finding pages. These pages would lie beyond the main navigation of your website and structure various pages according to specific user needs.
If you can’t succinctly explain why a page would be useful to someone, omit it.
Plan the architecture around the content. Don’t write content to fit the architecture.
When dealing with clients, especially clients at large companies with many departments, keeping egos in check can be tough. Keep everyone on point with constant reminders of the true goals of the website.
Not everything has to be a page. Use your hierarchy of content as a guide. Some items might work better as an FAQ entry or as sidebar content. Make sure your architecture-planning method does not blind you to this.

Architecture Is The Home, Not The Content Itself

Like the website itself, each of your pages has a structure and hierarchy as well. The architecture helps users find the right page. The hierarchy and semantics help users find the right content on that page. Too often, copywriting is an afterthought in Web development. No matter how attractive, clever or interactive a website is, its main purpose is to convey information. A great website is designed around the content.

Reduce spam with recaptcha and encryption.

Degrama — Sun, 31 Jan 2010 02:29:33 +0000

Recently one of our clients was experiencing excessive amounts of spam due to poor captcha. Which I’m sure happens to anyone who thinks (2+8=) is going to stop spam bots. Anyway onto our solution!

[Demo] (right click save as to download) – Required: [ReCaptcha]

What it does »

No visible email addresses online. For example we take an email address like.
Email Normal: bluemans@live.com
Email Encrypted: Ag8bHRQKKxQOCQAYSQwEHg (sexy right?)

The visitor clicks “Contact Owner”. Then we are promoted with re-captcha human verification. If the visitor correctly answers the question the email address is then decrypted and the visitor can send a message.

How To »

I created the test file below “email-encrypt.php” for a quick demonstration.

function XOREncryption($InputString, $KeyPhrase){

$KeyPhraseLength = strlen($KeyPhrase);

// Loop trough input string
for ($i = 0; $i < strlen($InputString); $i++){

// Get key phrase character position
$rPos = $i % $KeyPhraseLength;

// Magic happens here:
$r = ord($InputString[$i]) ^ ord($KeyPhrase[$rPos]);

// Replace characters
$InputString[$i] = chr($r);
}

return $InputString;
}

// Helper functions, using base64 to
// create readable encrypted texts:

function ecrypt($InputString, $KeyPhrase){
$InputString = XOREncryption($InputString, $KeyPhrase);
$InputString = base64_encode($InputString);
$InputString = str_replace(array('=','+','/'),'',$InputString);
return $InputString;
}

function dcrypt($InputString, $KeyPhrase){
$InputString = base64_decode($InputString);
$InputString = strtr($InputString, '+/=', '-_-');
$InputString = XOREncryption($InputString, $KeyPhrase);
return $InputString;
}

$Str_Test=$_POST['email'];
$Str_Test = ecrypt($Str_Test, "keyphrase");

ECHO 'Email Normal: '.$_POST['email']."
";

ECHO 'Email Encrypted: '.$Str_Test."

";
$Str_Test2 = dcrypt($Str_Test, "keyphrase");

ECHO "Email Decrypted: ".$Str_Test2."
";

?>

<form id="form1" action="#" method="post"><label>Email:

<input id="email" name="email" type="text" />

label>

<label>

<input id="submit" name="submit" type="submit" value="Submit" />

label>

form>

Conclusion

Easy to implement, and results are awesome.
- Install ReCaptcha
- Setup Encrypt
- Test and experiment

Free WordPress Theme Zexee

Degrama — Fri, 22 Jan 2010 00:46:11 +0000

Zexee is a free, two column WordPress theme originally based on The Design Superhero’s previous design. This theme was designed with the main focus being on typography and a unique look. The theme is released especially for Six Revisions readers. The theme is provided to users under the open source GNU General Public License.

Degrama - Online Superstars » Development

Introduction to HTML 5

Website Architecture

Architecture Is The Home, Not The Content Itself

Reduce spam with recaptcha and encryption.

What it does »

How To »

Conclusion

Free WordPress Theme Zexee

Previews

Front page

Post headline

Sidebar

Threaded comments

Demo

Download