| ΚΛBᄂӨӨG.ᄃӨM » Freebies http://kabloog.com Sat, 03 Mar 2012 02:18:21 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 7 Essential JavaScript Typography Resources http://kabloog.com/2011/10/7-essential-javascript-typography-resources/ http://kabloog.com/2011/10/7-essential-javascript-typography-resources/#comments Tue, 11 Oct 2011 01:28:13 +0000 admin http://kabloog.com/?p=5723 When you think of web typography, CSS instantly comes to mind. And that’s great, because CSS is the primary option when dealing with the style/visual layer of your website.

However, when you hit a roadblock with CSS, take it up a level by using JavaScript (JS).

Open source JavaScript libraries can help you craft responsive web designs (a technique that optimizes webpage layouts for mobile devices), implement fun text effects and more. In this post, we will primarily focus on JavaScript libraries that use modern web typography techniques to underscore and promote current web design best practices.

1. Kerning.js

Kerning.js is an open source JavaScript library that promises web designers complete control of web typography. According to the developer of the project, Joshua Gross, the library is admittedly a “work in progress.” However, by extending CSS, it doesn’t need JS programming outside of referencing the library in your HTML. Simply use Kerning.js’s custom CSS properties such as -letter-kern and -word-color.

With this excellent JavaScript library, you can achieve a variety of type techniques normally associated with print design and desktop publishing, such as perfect kerning and conditional fallback fonts for your @font-face rules.

See live demo.

Click here to view this gallery.

Image courtesy of iStockphoto, Punkle

More About: design, dev, features, javascript, typography

For more Dev & Design coverage:

View full post on Mashable!

Share

]]> http://kabloog.com/2011/10/7-essential-javascript-typography-resources/feed/ 0 How to Create An Ajax-Based HTML5/CSS3 Contact Form http://kabloog.com/2011/08/how-to-create-an-ajax-based-html5css3-contact-form/ http://kabloog.com/2011/08/how-to-create-an-ajax-based-html5css3-contact-form/#comments Wed, 24 Aug 2011 01:39:32 +0000 admin http://kabloog.com/?p=4783 Contact form is deadly essential for any website, as it acts as a messenger which passes the opinion or enquiries of visitors to webmaster. There have been countless contact forms on the web but unfortunately most of them do not explain to you the inner working parts, so here comes a detailed tutorial to teach you to build an advanced contact form from scratch based on the pop technology, HTML5 and CSS3.

html5 contact form article How to Create An Ajax Based HTML5/CSS3 Contact Form

Considering the nature of a web-based e-mail contact form we are also required to dive into two separate application fields, which is the PHP backend code for sending email and jQuery functions for rich user interface. By the end we will be left with a fully dynamic and functional contact form written with later customization in mind.

Get started now to build your own advanced contact form!

Shortcut to:

  • Demo – Get a preview of what you are building
  • Download – Download all files (php + css)

Structuring the Application

To get started you’ll need some type of web server to work over. If you’re running a Windows machine WAMP is probably your best option. Mac users have a similar program named MAMP which is just as easy to install.

wampserver How to Create An Ajax Based HTML5/CSS3 Contact Form

These packages will set up a local server on your machine with full access to PHP. Alternatively if you own server space or have full server access into a remote location you may use that instead. We are not going to need any MySQL databases, which should simplify things a bit.

Once your server is set up create a new folder to house the application. You can name this whatever you’d like as it isn’t detrimental or even related to the final product. The folder structure will be used when you access your files in a web browser. A simple example would be http://localhost/ajaxcontact/contact.php

Let’s Build our Files!

We will only be working within 2 core files. We’ll first need a core .php file to house not only our application logic, but also frontend HTML markup. Below is sample code taken from our starting file.

<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
<head>
<title>HTML5/CSS Ajax Contact Form with jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

To begin we have written a simple heading section to our document. This includes a general Doctype declaration for HTML5 and some HTML/XML document elements. These aren’t exactly required, but will ease the rendering process in older (and newer) browsers. Also it never hurts to offer more information.

A bit further down we can see 2 lines right before our closing heading tag. The first includes our jQuery script from the online Google Code Repository. This is required for our dynamic page errors to work. Directly below this we have the inclusion of a basic CSS document containing all of our page styles.

Inside our document body we have a few containing divisions withholding a main contact form. This houses 3 input elements for the user’s name, e-mail address, and personal message. The HTML markup is fairly standard and shouldn’t boggle the mind of any intermediate developer.

<!-- @begin contact -->
<div id="contact" class="section">
	<div class="container content">

	 <?php if(isset($emailSent) && $emailSent == true) { ?>
     	<p class="info">Your email was sent. Huzzah!</p>
     <?php } else { ?>

Here we have a basic PHP conditional code nested within a few page containers. This checks for the set value of a variable named $emailSent and if equal to true, it will display a success message.

Inside our Form HTML

The else statement is what will run on first page load since there won’t be any content to send initially. Inside here we will include a brief collection of form elements and a submit button.

<div id="contact-form">
<?php if(isset($hasError) || isset($captchaError) ) { ?>
    <p class="alert">Error submitting the form</p>
    <?php } ?>

	<form id="contact-us" action="contact.php" method="post">
	<div class="formblock">
	<label class="screen-reader-text">Name</label>
	<input type="text" name="contactName" id="contactName" value="<?php if(isset
($_POST['contactName'])) echo $_POST['contactName'];?>"
class="txt requiredField" placeholder="Name:" />

	<?php if($nameError != '') { ?>
		<br /><span class="error"><?php echo $nameError;?></span>
	<?php } ?>

	</div>

	<div class="formblock">
	<label class="screen-reader-text">Email</label>
	<input type="text" name="email" id="email"
value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>"
class="txt requiredField email" placeholder="Email:" />

	<?php if($emailError != '') { ?>
	<br /><span class="error"><?php echo $emailError;?></span>
	<?php } ?>

		</div>

	<div class="formblock">
	<label class="screen-reader-text">Message</label>
	<textarea name="comments" id="commentsText"
class="txtarea requiredField" placeholder="Message:">
<?php if
(isset($_POST['comments'])) { if(function_exists('stripslashes'))
{ echo stripslashes($_POST['comments']); } else
{ echo $_POST['comments']; } } ?></textarea>

	<?php if($commentError != '') { ?>
	<br /><span class="error"><?php echo $commentError;?></span>
	<?php } ?>
	</div>

	<button name="submit" type="submit" class="subbutton">
Send us Mail!</button>
	<input type="hidden" name="submitted"
id="submitted" value="true" />
	</form>
</div>

<?php } ?>
</div>
</div><!-- End #contact -->

You may have noticed there is another conditional block directly after the starting form. This checks for a variable named $hasError and will display an error message upon confirmation. This fallback method is only used if JavaScript is disabled in the browser and thus can’t generate dynamic errors.

All the way down we can find individual PHP variables being checked. The statements are regulating if the form has already been submitted with only partial amounts of data filled in. This is another fallback system which displays the contents of fields already filled out – a nice trick for proper user experience!

Directly after our form completion is the few jQuery functions we’ve written. We will talk over these first since they are the default implementation on pageload. However if the browser doesn’t accept JavaScript then by default we can rely on our PHP code.

Opening to jQuery

The easiest way to get started talking on this topic would be to dive right in. I’ll break down individual blocks line-by-line so you can see what the script is actually checking for.

However if you get lost just review the project code files. All of the full blocks are pre-written and well documented in the jQuery website. To get started we open our code similar to any other:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function() {
	$('form#contact-us').submit(function() {

The first few lines are checking for specific event occurrences. After our CDATA comments to hide the code from older, buggy browsers we get started checking for ready events.

The first bit checks if the document has fully loaded and is ready for manipulation. This is a classic technique and the easiest way to start coding a jQuery project.

Once inside we are checking for a form element under the ID "contact-us", and we want to know when it is submitted. Upon doing so we call another function to display our error messages or slideUp() upon success.

$('form#contact-us .error').remove();
var hasError = false;
$('.requiredField').each(function() {
    if($.trim($(this).val()) == '') {
        var labelText = $(this).prev('label').text();
        $(this).parent().append('<span class="error">Your forgot to enter your '+labelText+'.</span>');
        $(this).addClass('inputError');
        hasError = true;
    } else if($(this).hasClass('email')) {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if(!emailReg.test($.trim($(this).val()))) {
            var labelText = $(this).prev('label').text();
            $(this).parent().append('<span class="error">Sorry! You\'ve entered an invalid '+labelText+'.</span>');
            $(this).addClass('inputError');
            hasError = true;
        }
    }
});

First we remove any pre-existing errors so we don’t hold any previous messages from before. A few lines down we can see a selector for all elements under the class “requiredField“. These are all of our required field elements – name, e-mail, and message.

jQuery will take the value of each field and remove all spaces from the value. If the content is equal to nothing, then we display an error message next to that field warning our user to fill in some value. Right before the end of our logic there is a bit of Regex code validating the e-mail value.

Lastly we can see if no error is set and check for full input content. If this is the case we call a jQuery method named post(). This will submit our form and check within the PHP code for any errors. Assuming none are found the slideUp() animation is called to hide our contact form and display a “success!” message.

if(!hasError) {
	var formInput = $(this).serialize();
	$.post($(this).attr('action'),formInput, function(data){
	$('form#contact-us').slideUp("fast", function() {
	$(this).before('<p class="tick"><strong>Thanks!</strong> Your email has been delivered. Huzzah!</p>');
	});
	});
	}

	return false;
});
});
//-->!]]>
</script>

If you are familiar with callbacks you may notice the post() function has a built-in set of parameters. Callbacks are smaller functions which are called upon the response of data from another function.

So for example, when our jQuery.post() function successfully shoots an e-mail it will call its own internal function to display the sliding animation. All of this code could be written in its own block and moved elsewhere. However for the sake of this tutorial it’s much easier writing the callback as an inline function.

Breaking past our PHP

The final hurdle to mention is the logic behind our PHP processor. This is the backend system which will actually call a mail function and send out the message. All of the code used in the examples below can be found directly at the top of our main .php file, before any HTML output.

There are also a few internal styles which freshen up the page. There isn’t anything specifically new here so we won’t be going into any of the details. However the styles.css document is included within the project code and contains rudimentary CSS3 techniques.

<?php
//If the form is submitted
if(isset($_POST['submitted'])) {

To start we open our PHP clause and check if the form was even submitted. The POST variable “submitted” was actually a hidden input field added at the very end of our form. It’s a useful way to check if the user has submitted anything yet so we don’t waste server resources.

After this we have 3 separate if/else statement checking to see if each input field has been filled out. I won’t include each bit of logic here since they are all very repetitive in nature. However, to give you a brief example I’ve included the e-mail verification clause below:

// need valid email
if(trim($_POST['email']) === '')  {
	$emailError = 'Forgot to enter in your e-mail address.';
	$hasError = true;
} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
	$emailError = 'You entered an invalid email address.';
	$hasError = true;
} else {
	$email = trim($_POST['email']);
}

PHP will trim all whitespace from the value and check to see if anything is left over. If so we have a detailed Regular Expression (Regex) to see if our user’s input string matches up with an e-mail pattern.

You certainly don’t need to understand how preg_match() works to build this script. It is a useful function to determine rules and requirements for a successful type of data, but commands advanced programming knowledge to really grasp. In this scenario we are ensuring the user only inputs a select few characters, includes an @ symbol followed by 2-4 characters representing a Top-Level Domain.

After all of our logic passes and we return no errors it’s time to send our message! This bit of code will set individual variables to customize our e-mail message and setup some mail headers for the process.

// upon no failure errors let's email now!
	if(!isset($hasError)) {
		$emailTo = 'your...@googlemail.com';
		$subject = 'Submitted message from '.$name;
		$sendCopy = trim($_POST['sendCopy']);
		$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
		$headers = 'From: ' .' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);

        // set our boolean completion value to TRUE
		$emailSent = true;
	}

If you were wondering how the code was going to figure out your e-mail address, this is the part to fill in. The first variable in our set is titled $emailTo and should contain whichever e-mail address, which is going to receive the message.

Inside our $body variable we take advantage of the \n delimiter to add new lines into the message. This adds small placements for the sender’s name, e-mail address, followed by a break for their message content. Of course you could spend time prettying up the display, but this structure works just fine.

Conclusion

This closes our tutorial for an advanced contact form. If you’d like to style your elements in relation to mine you can check out my example styles.css within the project code. However, the page is structured well enough that you could design your own look & feel very easily.

Feel free to download the source code and examine what I’ve done a bit closer. It’s good to follow a tutorial but having direct access to the project source can be invaluable. I’ve also included a brief stylesheet to make customizations a breeze, thanks for your view!

View full post on hongkiat.com

Share

]]> http://kabloog.com/2011/08/how-to-create-an-ajax-based-html5css3-contact-form/feed/ 9 No Dribbble Invite? No Problem, Try Favwork http://kabloog.com/2011/02/no-dribbble-invite-no-problem-try-favwork/ http://kabloog.com/2011/02/no-dribbble-invite-no-problem-try-favwork/#comments Sat, 05 Feb 2011 06:23:16 +0000 admin http://kabloog.com/?p=772

Design-snippet-sharing sites are all the rage right now, but for some sites and some designers, exclusivity can be a problem.

If you’re looking for a way to share bits of designs for feedback (or vanity) but you’re still waiting in the queue for an invite-only site, you might want to give Favwork a try.

The concept of the site is delightfully simple: Just upload a small- to medium-sized JPEG of your current favorite piece of work, and tell the world why you like it. Other users can comment on, like, share and link to your favorite; and you can browse popular images, new favorites or images that you’ve liked.

To say that Favwork is a clone of the so-hot-right-now Dribbble would be an understatement of the greatest magnitude. In the following screenshot, you can see Favwork above and Dribbble below; while not identical to the last pixel, there’s certainly a heavy amount of “inspiration” going on there.

However, Favwork does build upon Dribbble’s offering in a way that’s intriguing and likely to be popular with quite a few user-designers out there.

First, you don’t need an invite to join and use the site, including uploading your images. Second, Dribbble only allows designers to upload 400 × 300 pixel images; Favwork increases the limit to 600 x 400 pixels. Mind you, you’ll have to make sure the image doesn’t exceed those boundaries; unlike Dribbble, Favwork won’t let you crop images in-app.

Like Dribbble, each image shared has its own comment thread, permalink, Twitter sharing button. All Favwork is missing is the “rebound” feature, which allows users to spin off and remix one another’s creations.

Here’s the Favwork catch: You’re only allowed to post one piece at a time. Dribbble limits the number of “shots” allowed in its own way, but designers can still throw up a reasonable set of images to flesh out their portfolio.

Favwork creator UK dev/designer Stu Green writes on the site, “The idea is that you upload just one item of work (your favorite) and change it every now and then. When you change your work, your old work will be archived, and your new work will be shown on the Latest Work page so people can like it.”

And by “archived,” he means “gone for good.” The concept is very “what have you done for me lately?”, not so much “check out my wall of trophies.” It’s an interesting and fresh approach, one that could lead to quite different user behaviors than those seen on other sites.

And again, Favwork’s concept is completely democratic. As Green writes in an overt nod in Dribbble’s general direction, “Favwork is open to anyone who has creative work they want to share… There is no ‘invite only’ pre-requisite or exclusivity for joining; anyone can join, and your work will appear on the home page if you get enough likes.”

If you’re into design but not so much into exclusivity, give Favwork a shot, and let us know what you think about the concept and the execution.

More About: design, dribbble, favwork, snippet

For more Dev & Design coverage:

View full post on Mashable!

Share

]]> http://kabloog.com/2011/02/no-dribbble-invite-no-problem-try-favwork/feed/ 0 YouGrids: Youjoomla Free Joomla Template 2010 http://kabloog.com/2010/07/yougrids-youjoomla-free-joomla-template-2010/ http://kabloog.com/2010/07/yougrids-youjoomla-free-joomla-template-2010/#comments Fri, 30 Jul 2010 12:33:44 +0000 admin http://kabloog.com/?p=464 YouGrids Joomla Template

YouJoomla Proudly Presents YouGrids. First Joomla! Template Based on YjSimpleGrid Joomla! Template framework. Loaded with full set of YJSG features , 2 beautiful styles and unique layout options. YouGrids is free Joomla! template and it can be adapted to  any web concept.

Template Options

* YjSimpleGrid powered
* PSD files included
* Joomla 1.5 template
* CSS dropdown menu
* SMooth dropdown menu
* Dropline menu
* SmoothDropline menu
* Split menu
* 2 beautiful styles
* 51 module positions
* Native RTL Support
* Server side Compression
* Demo starter
* Free Joomla! Template
* IE6 png fix
* and more…

Demo: http://www.joomla1.5.youjoomla.info/yougrids/
Home: http://www.youjoomla.com/yougrids-free-joomla-template-yjsg-powered.html
Download: http://www.youjoomla.com/free-joomla-templates/yougrids-free-joomla-template.html

Joomlafan Box – designer and webmaster resources share-center

View full post on Joomlafan Box

Share

]]> http://kabloog.com/2010/07/yougrids-youjoomla-free-joomla-template-2010/feed/ 0 CleanPress Free Premium WordPress Theme http://kabloog.com/2010/07/cleanpress-free-premium-wordpress-theme/ http://kabloog.com/2010/07/cleanpress-free-premium-wordpress-theme/#comments Fri, 30 Jul 2010 12:33:06 +0000 admin http://kabloog.com/?p=463

CleanPress WordPress Theme

Cleanpress is the answer to all your blogging problems. It’s clean, it’s light, it’s well organized and boy, let me tell you: It looks great. But you know the old saying: “Don’t judge a theme by it’s cover”.

With Cleanpress, you can go deeper, and look under the ‘hood’, but before you do that, be sure to delete that old theme of yours because, let’s be honest, you won’t need it no more. It’s not just a theme, it’s a tool, a tool that not only gives a pleasant look to your blog, but it also integrates it with the latest social network websites.

Demo: http://dpxmag.com/cleanpress/

Download CleanPress Free Premium WordPress Theme
http://dpxmag.com/cleanpress-a-free-premium-wordpress-theme.html
http://rapidshare.com/files/409706188/cleanPRESS-theme.zip

Joomlafan Box – designer and webmaster resources share-center

View full post on Joomlafan Box

Share

]]> http://kabloog.com/2010/07/cleanpress-free-premium-wordpress-theme/feed/ 0 Giveaway: 5 Copies of ClassiPress Premium Wordpress Themes http://kabloog.com/2010/07/giveaway-5-copies-of-classipress-premium-wordpress-themes/ http://kabloog.com/2010/07/giveaway-5-copies-of-classipress-premium-wordpress-themes/#comments Fri, 30 Jul 2010 11:50:20 +0000 admin http://kabloog.com/2010/07/giveaway-5-copies-of-classipress-premium-wordpress-themes/

We’ve got some freebies for you! This week we are giving away 5 copies of ClassiPress premium Wordpress themes to Hongkiat readers, courtesy of Appthemes.

classipress Giveaway: 5 Copies of ClassiPress Premium Wordpress Themes

ClassiPress is a premium theme that turns the entire Wordpress blog into a classified site. It takes care of the technology so you can focus on the listings ans sales. If you are looking to create a classified website, this is something you probably don’t want to miss.

Here are some examples created with ClassiPress, or check out the entire collection at AppThemes.

We are giving away 3 Personal Editions, 1 Professional Edition and 1 Ultimate edition of ClassiPress – 5 copies in total. Click here to find out the differences of each edition.

How to win

If you are interested in winning yourself a copy, drop a comment below. It’s that simple. Contest will start today, ends 2nd August 2010. Good luck.

View full post on hongkiat.com

Share

]]> http://kabloog.com/2010/07/giveaway-5-copies-of-classipress-premium-wordpress-themes/feed/ 20