• Shortcuts : 'n' next unread feed - 'p' previous unread feed • Styles : 1 2
Arrow New window Joren Rapini.com Weblog
aA :  -   + pdf Infos Unsubscribe

» Publishers, Monetize your RSS feeds with FeedShow:  More infos  (Show/Hide Ads)


Display Random Dynamic Content With PHP and XML   New window
Date: Monday, 09 Nov 2009 01:25

Every developer, at one point in time, will run into a situation where they need to display a small amount of dynamic data. Why create a whole database? Enter the magical world of XML. XML is easily manageable by anyone who has ever even dabbled a bit in HTML, so understanding should come easily just by looking at an XML file. PHP has classes already set up to parse XML. Here you’ll learn how to use PHP and XML to randomly generate HTML content.

Download the source files. View the demo.

For our example, we have index.php which includes all of the necessary PHP to parse the XML file and generate the content for the viewer. An images folder has 6 images in it, which are referenced in the XML file, home.xml. Let’s start with the XML file, and how to set it up. If you are viewing the demo, just refresh the page and you’ll see different content every time.

  
<homepage>
	<featured>
		<picture>1.jpg</picture>
		<name>Title 1</name>
		<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</description>
	</featured>
</homepage>

So, with XML, every item has to have an opening and closing tag. In our example, we will be creating content from each ‘featured’ block, so you can add as many of these as you like as long as you keep the format the same. Our test XML file just has 6 of these to use. Now, for our PHP, let’s just look at a few lines at a time.


$xml_file = "home.xml";
$xml_picture_key = "*HOMEPAGE*FEATURED*PICTURE";
$xml_name_key = "*HOMEPAGE*FEATURED*NAME";
$xml_description_key = "*HOMEPAGE*FEATURED*DESCRIPTION";

Here we are setting up some variables to tell our script where the XML file is located, as well as how to correctly parse the file. You should create a new variable for each new item you add within the featured blocks.


    function startTag($parser, $data){
        global $current_tag;
        $current_tag .= "*$data";
    }

    function endTag($parser, $data){
        global $current_tag;
        $tag_key = strrpos($current_tag, '*');
        $current_tag = substr($current_tag, 0, $tag_key);
    }

    function contents($parser, $data){
        global $current_tag, $xml_picture_key, $xml_name_key, $xml_description_key, $counter, $featured_array;
        switch($current_tag){
            case $xml_picture_key:
                $featured_array[$counter]->picture = $data;
                break;
            case $xml_name_key:
                $featured_array[$counter]->name = $data;
                break;
            case $xml_description_key:
                $featured_array[$counter]->description = $data;
                $counter++;
                break;
        }
    }

Here we create 3 functions, one to tell the script what to put before the content, one after, and the function to tell it which content block to use. The only thing you’d have to change in this section to apply it to your own work is to add or change each case for each new content in the XML file.


$xml_parser = xml_parser_create();
xml_set_element_handler($xml_parser, "startTag", "endTag");
xml_set_character_data_handler($xml_parser, "contents");

Creating the parser and setting the start tage, end tag, and data handlers. The arguments are the functions that we created earlier.


$fp = fopen($xml_file, "r") or die("Could not open file");
$data = fread($fp, filesize($xml_file)) or die("Could not read file");

Basic PHP file handling functions, that also determine the response if the file is inaccessible


if(!(xml_parse($xml_parser, $data, feof($fp)))){
    die("Error on line " . xml_get_current_line_number($xml_parser));
}

This is the key PHP function that we’re using to parse the file, and if it has an issue it will let you know the line number of the XML file where the problem occurred.


$arrayamt = (count($featured_array)-1);

for($y=0;$y<=3;$y++){
    while (($x == $a) || ($x == $b) || ($x == $c)) {
        $x = rand(0,$arrayamt);
    }

    echo "<li>";
    echo "<img src='images/" . $featured_array[$x]->picture . "' width='50' height='50' alt='' />";
    echo "<strong>" . $featured_array[$x]->name . "</strong> &nbsp;&nbsp;";
    echo $featured_array[$x]->description;
    echo "</li>";

    if ($y == 0) {
        $a = $x;
    } else if ($y == 1) {
        $b = $x;
    } else {
        $c = $x;
    }
}

Here is where you will do the majority of customizing to suit your needs. Before this, we had all of the data parsed, placed into an array, and ready to be put somewhere, so that’s what we’re doing now. In our example, we will be generating 4 random list items with content from the XML file.


$arrayamt = (count($featured_array)-1);

for($y=0;$y<=3;$y++){
    while (($x == $a) || ($x == $b) || ($x == $c)) {
        $x = rand(0,$arrayamt);
    }

First we create a varible that determines the length of the array, so we know how large of a number we can randomly generate. Next start a ‘for’ loop. the number 3 is significant because we are starting from 0, since arrays start from 0, and we want to generate 4 random items. The next while statement is setup to create a randomly generated number, ‘x’, if it equals either a, b, or c which will be defined at the end of the loop. Since they’re all currently undefined, it goes ahead and generates a number.


echo "<li>";
echo "<img src='images/" . $featured_array[$x]->picture . "' width='50' height='50' alt='' />";
echo "<strong>" . $featured_array[$x]->name . "</strong> &nbsp;&nbsp;";
echo $featured_array[$x]->description;
echo "</li>";

Here you can figure out where you want to place each item. X is used to determine which number of the array you are getting content from. Follow this format when doing your own work and you should be fine.


if ($y == 0) {
    $a = $x;
} else if ($y == 1) {
    $b = $x;
} else {
    $c = $x;
}

Lastly! Since we are creating 4 random items, we want to make sure we don’t have any repeats. To do this, at the end of the loop we store whatever number we got from x into one of 3 other variables, depending on how many times we’ve gone through the loop (’y'). If you are using more or less than 4 items, obviously you’d have to change the if else statements being used here. I’m sure my method of repeat number checking is not the best - it could probably be done with an array - but I’m more familiar with javascript than PHP so at this time I wasn’t sure how to accomplish it. If you have any tips, please leave them in the comments.

That’s the end! If you have any questions as usual please leave them in the comments. Thanks to kirupa for providing a tutorial that helped me get started on XML parsing with PHP.

Author: "Joren Rapini" Tags: "PHP, Tutorials, Web Development, Content..."
Comments Send by mail Print  Save  Delicious 
The Simple, Quick, and Small jQuery HTML Form Validation Solution   New window
Date: Monday, 05 Oct 2009 23:03

This is a tutorial on how to write a live validation script for HTML form inputs using jQuery. There are plenty of these out there already, but in most cases I found that they could not be applied quickly. 9 out of 10 websites that I develop need nothing more than a simple validation to tell the user when an input was left empty or filled in improperly. Once you’ve gotten the hang of this script, it will only take you a couple of minutes to reapply it to each new website that you’d like it on.

All you’ll have to do is type in a list of what fields are required, and then change the CSS style of a class to suite that particular website, and that’s it!

Download the source files. View the demo.

First we’ll start with the HTML and CSS. The script will add a class called “needsfilled” to any fields that don’t pass the validation, so you’ll want to specify how you’d like it to look, and make it stand out so that the user knows something went wrong! Be sure to have included the latest version of jQuery and the script file itself in your header.

#error {
	color:red;
	font-size:10px;
	display:none;
}
.needsfilled {
	background:red;
	color:white;
}

<form action="mail.php" id="theform" name="theform" method="post">
    <p><label for="name">Name</label><br /><input id="name" type="text" value="" name="name" /></p>
    <p><label for="email">E-mail</label><br /><input id="email" type="text" value="" name="email" /></p>
    <p><label for="message">Message</label><br /><textarea id="message" rows="7" cols="30"  name="message"></textarea></p>
    <p><input class="submit" type="submit" name="submit" value="Submit Form" /></p>
    <p id="error">There were errors on the form, please make sure all fields are fill out correctly.</p>
</form>

Please take note of any ID’s used (theform, email, etc.) because you’ll need those ID’s to stay consistent from within the javascript. The HTML and CSS is pretty self-explanatory, so we’ll move onto the javascript. All of this code will be placed within a $(document).ready(function(){}); so that it’s all loaded when the DOM is loaded.

	// Place ID's of all required fields here.
	required = ["name", "email", "message"];
	// If using an ID other than #email or #error then replace it here
	email = $("#email");
	errornotice = $("#error");
	// The text to show up within a field when it is incorrect
	emptyerror = "Please fill out this field.";
	emailerror = "Please enter a valid e-mail.";

First we will setup our variables. Just follow the comments so that you know what goes where. If you are using the same ID’s as this tutorial, then all you really have to change is the list of fields that are required, just follow the format used so that the array isn’t broken.

	$("#theform").submit(function(){	
		//Validate required fields
		for (i=0;i<required.length;i++) {
			var input = $('#'+required[i]);
			if ((input.val() == "") || (input.val() == emptyerror)) {
				input.addClass("needsfilled");
				input.val(emptyerror);
				errornotice.fadeIn(750);
			} else {
				input.removeClass("needsfilled");
			}
		}

Now for an explanation on the code, taking it line by line. $(”#theform”).submit(function() tells the page to execute the following script whenever someone hits the submit button in the form with ID ‘theform’. Next, we create a ‘for’ loop that will run through as many variables as you defined in the ‘required’ array earlier. The next ‘if’ statement will check to see if the current input field is empty, or if it is equal to the text that we set to appear if the field is empty. If either of these cases are true, then it adds the class ‘needsfilled’ to the empty input, replaces its value with the value of ‘emptyerror’, and then fades in ‘errornotice’ alerting the user that something went wrong. If the case is false, then we make sure to remove the class ‘needsfilled’ from the input because that is what we will use later on to see if the form is safe to be submitted.

        // Validate the e-mail.
        if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
            email.addClass("needsfilled");
            email.val(emailerror);
        }

Just about every form is going to ask for an e-mail address, so I felt it was necessary to include this bit. This is a regular expression which is filtering the value of the ‘email’ input. It is making sure that the e-mail adress follows the format of “email@domain.something”. NetTUTS has many awesome explanations of regular expressions if you would like more information on them. After this ‘if’ statement is where you would also place any other validation that you’d like, such as checking a URL string for proper formatting.

		//if any inputs on the page have the class 'needsfilled' the form will not submit
		if ($(":input").hasClass("needsfilled")) {
			return false;
		} else {
			errornotice.hide();
			return true;
		}
	});

With the above code, we are closing the $(”#theform”).submit(function() at the end. The first if statement is going to be checking to see if ANY inputs on the page have the class ‘needsfilled’. If it does, then ‘return false’ tells the form to not submit.

	// Clears any fields in the form when the user clicks on them
	$(":input").add($(":textarea")).focus(function(){		
	   if ($(this).hasClass("needsfilled") ) {
			$(this).val("");
			$(this).removeClass("needsfilled");
	   }
	});

This block is just a little bit of user experience improvement. If a user clicks on an input field that did not pass the validation, then the value will clear so that the user can immediately start typing without having to delete our message. Updated this portion on 10-27-09 a bit, thanks Tom for the suggestion.

And there you have it, quick and simple live form validation that you can easily add within a couple minutes, and hopefully you learned something while you were at it!

Author: "Joren Rapini" Tags: "Javascript, Tutorials, Web Development, ..."
Comments Send by mail Print  Save  Delicious 
The Right Way To Kick Off A Web Design Strategy Client Call   New window
Date: Monday, 07 Sep 2009 16:37

That first call you have with your client on constructing your web design vision is probably one of the most important calls you’ll make during a project from start to finish. If you do not ask enough questions, or the right ones, then you are going to end up handing over a design that the client is not interested in. This can cause a little loss in client faith in your abilities, as well as slow down the progress of the project and create more work for you. The more information you gather right from the start, the less changes you’ll have to make to your design concept. You have to make sure you are well prepared for this call.

Let’s start by going over a list of a questions, and how each one will help. Typically what I do in these kinds of calls is I build my list each time in a text document (things can change depending on the client, but many stay the same), and then I take my notes on that file while I’m talking to the client and save the file with the rest of the client’s project information. Certain questions like discussing all of the features of the website and how big it is going to be should have already been taken care of before the contract was signed. The procedure up to this design phone call is a completely different discussion, but if you’d like to view an example contract template that I use then click here.
 

1. What is the goal of your website?

What do they hope to accomplish? This answer can be pretty typical sometimes. Well, to make money, silly! But we want to make sure we get a deeper answer from our client, more than just "get to the checkout" or "fill out the contact form".

  • Where do they want their clients to go?
  • How do they want them to feel when they’re done with the website?
  • What are all of the features that your users will be interacting with, what is each one’s end result, and which features are priority?
  • What kind of exposure do they expect the website to receive?

This will help us learn how to guide the users and find out which items are the most important to the client and the user.
 

2. What are some other competitor or non-competitor websites that you like?

What websites do they like? Also, it’s always a good idea to find out what websites they don’t like. Having a competitor’s website is even better. Take as many notes as you can think of on these websites. You should always do research on your client’s industry if you want your design to have a good impact on them.
 

3. Are there any other design ideas you had in mind?

  • Is there anything that the client already expects to see? 
  • Is there anything that the client wants to avoid?
  • What did they have in mind as far as colors, fonts, layout, etc.?
  • Do they already have a logo and an identity standard?

 

4. What makes your company stand out from your competitors’?

  • Why is their company and their products better than the competition?
  • What selling points make them stand above and beyond?

You need to be able to convince the user to your client, and this can easily be incorporated into your design. E.g. "Greatest customer service", "Lowest Prices!", "More experience than the competition". This can easily give you an idea for a theme for the website and help you create something that isn’t "just another website design".
 

5. What can you tell me about your target audience?

With a design, there is always a tricky balancing act that you have to play. You’ve got to make a design that both yourself and your client are satisfied with, and also one that is easily accessible and usable by your client’s customers.

  • What is their age, culture, technical savvy, economic status, education, and other demographics? Obviously a design that you create for 10 year old children is going to be a vastly different website than what you would create for middle-aged women.
  • There is always the possibility of a secondary audience group, so be sure to note that.
  • Are these users going to have any special needs (accessibility, handicaps, etc.)?

 

Time for design feedback

So you did your research and made a snazzy design. Before you send it off, it’s always a good idea to get some feedback from your peers! If your contract allows, show it off on twitter, or check out this Six Revisions article on 10 Feedback Tools for Web Design. Criticism is the only way you are going to be able to grow as a designer, so take advantage of your community. When you send your design off to the user for approval and revision comments, then go the extra mile and get them involved with a feedback tool. I like to use redmark, but there are others out there like proofhq. Most importantly of all, remember to have fun while creating your design!

 

Author: "Joren Rapini" Tags: "Web Design, Client Expectations, Design ..."
Comments Send by mail Print  Save  Delicious 
Design Quick and Easy Colorful Photoshop Swirls   New window
Date: Sunday, 23 Aug 2009 17:26

This is a tutorial on how to create the swirls that I’ve used throughout my website. It’s very quick and easy to accomplish them with some transparency and a few layer styles as long as you are a little practiced with the Pen Tool within photoshop.

photoshop swirl tutorial
 
 

The Pen Tool

I thought about writing my own tutorial on using the Pen tool, but then I just decided that would be a waste of time. There are already a million great tutorials out there that give instructions on how to use the Pen tool, and it just takes some practice to really get the hang of it. Luckily we’re just creating swirly shapes with it for this tutorial, so you don’t need to be an expert. Doing a Google search came up with plenty of sources, here is a pretty extensive tutorial on the Pen tool if you are a beginner with it http://www.photoshopessentials.com/basics/pen-tool-selections/.

The Swirls

So first whip out that Pen Tool (A) and start making some anchor points and start drawing (make sure to have Shape Layers selected at the top after you’ve selected the Pen Tool). You should be able to accomplish a similar shape to what I’ve done with around 10 points. After clicking and dragging to make each of your points, just use the Direct Selection Tool (A) to move them around and get them to a position that you are satisfied with. If you’d like, you can grab this image below and put it on a layer beneath yours then start tracing it with the Pen Tool. Lowering the transparency of your new shape layer helps with tracing. So at the end you should end something like this, you can also see where I’ve placed all of my anchor points (pick whatever color you’d like):

Next we’ll create your second shape layer, and that’s all the drawing we’ll have to do in order to see the effect take place. All I did to this second layer so far was lower the opacity to 60% and make it a slightly darker blue. You can draw it however you’d like, just have it smaller than your original shape. Also, make sure this second shape goes on the outside and the inside of your original shape layer in some places, like so:

Now the easy part. Right click on one of your shape layers and then click Blending Options. It doesn’t matter which one because both layers will have the exact same layer style applied to them, except for the opacity. Now select Inner Glow, change the blend mode to Multiply, the Opacity to 17%, and change the color to a darker gray (I used #7b7b7b). Change it’s Choke to 13% and it’s size to 7px. These settings are all assuming that you are creating this for a web document with swirls about the same size that I’ve used here. If you are using them for anything a lot bigger or smaller, you will have to change these settings respectively, and the same goes for the rest we will be talking about. Here is a screen shot of the Inner Glow settings:

Next we will give the shapes a Gradient Overlay. Change the Blend Mode to Screen, Opacity to 45%, and the Angle to -18°. You can leave the gradient set to a black-to-white gradient. When doing multiple shapes like these, I changed the Angle of the Gradient Overlay on each shape in order to give it a less uniform look.

And finally for the last layer style, we’re just applying a Stroke. Make it 1px, set its Position to Inside and its Opacity to 69% and a light gray color once again.

Now all you need to do is apply the layer style to the other shape layer. Right click on the layer with the style, select Copy Layer Style, then do the same to the other layer selecting Paste Layer Style. Your first shape layer should have an opacity of 100% and the second one 60%. Voilá! You now have your swirlies. Start making as many shapes in as many variations as you’d like, just keep them smooth by using as small of an amount of anchor points as you can. You can play around with their color and opacity, as well as the gradient angle to get whatever shapes you’d like. If you’d like, you can download the PSD of what we did here:

Downloadthe source files.

Author: "Joren Rapini" Tags: "General, Tutorials, Web Design, Colorful..."
Comments Send by mail Print  Save  Delicious 
CSS | Tutorials, Techniques, Hacks, & Resources - MLC#4   New window
Date: Saturday, 27 Jun 2009 00:40

Back to the Massive Link Collection Series. This article focuses purely on CSS, and includes a list of my collection of articles and links that I’ve discovered over the past year that I’ve found to be very useful and helpful. These links, in combination with playing around with the Firebug extension for Firefox, will help you master CSS (assuming you’ve already gotten some initial experience with the language).

Once again, a description of these posts: I provide a list of links that I have collected over the past year, as well as all of the Firefox tags that I use to keep them indexed. This gives you a ton of easy and quick resources. If you are unfamiliar with Firefox’s bookmarking system and want to know how to truly take advantage of this post, click here.

Also, be sure to check out the other posts from the series if you haven’t yet:

Hacks, Fixes, & Techniques

Navigation & Menus

Fonts

Transparent PNG Methods

CSS3

Layouts, Positioning, & Templates

Other Styling & Miscellaneous

Author: "Joren Rapini" Tags: "CSS, Resources, Web Development, Add new..."
Comments Send by mail Print  Save  Delicious 
jQuery AJAX Validation Contact Form with Modal + Slide-in Transition   New window
Date: Friday, 12 Jun 2009 03:13

Due to popular demand, here is a tutorial on how I created one of the more complicated pieces of machinery on my new site: the contact form. A lot of different techniques went into this, and I have a few people/places to thank for some of the original code that inspired my final product: primarily Design Shack for their tutorial on creating a slide-in contact form with ajax, Zachstronaut for his code on scrollable same page links (used all over my site, but most effectively on the contact link in my footer), and Yens Design for a quick how-to on creating the modal pop-up background darkening effect (surprisingly extremely easy to do with jQuery).

All you need is jQuery. No plugins are necessary for this to work, and it is only 2kb of extra code in addition to the jQuery library. This also works on all browsers, IE6 and up.

For a demo of what we are creating you need not go any further than the contact form at the top of this website, as well as the contact link in the footer, or you can go here. I’ve packaged all the files for your easy editing and applying to your own personal needs (please just don’t reuse my images. . . that would be a bit arse-like of you). I did include all of the same styling that I used on this form, to make it easier for me to write this tutorial and just in-case someone wanted to peak into how I pulled off some of the CSS.

Download the source files. View the demo.

The HTML:

<div class="container">
  <div id="contactFormContainer">
    <div id="contactForm">
      <div class="loader">&nbsp;</div>
      <div class="bar">&nbsp;</div>
      <form name="cform" class="contactForm" action="mail.php" method="post">
        <p>Talk to me about anything. If you&rsquo;d like to work with me, or <br />
          even if you just need a hug, I&rsquo;ll get back to you shortly.</p>
        <div class="input_boxes">
          <p>
            <label for="name">Name</label>
            <span class="name-missing">Please enter your name</span><br />
            <input type="text" value="" id="name" name="name" />
          </p>
          <p>
            <label for="e-mail">E-mail</label>
            <span class="email-missing">Please enter a valid e-mail</span><br />
            <input type="text" value="" id="e-mail" name="email" />
          </p>
          <p>
            <label for="message">Message</label>
            <span class="message-missing">Say something!</span><br />
            <textarea cols="" rows="" id="message" name="message"></textarea>
          </p>
        </div>
        <input type="submit" onfocus="this.blur()" value="Submit Form" name="submit" class="submit" />
      </form>
    </div>
    <div class="contact">&nbsp;</div>
  </div>
</div>
<div id="backgroundPopup">&nbsp;</div>

I’m going to assume you know what you are doing with HTML. If you don’t, well then. . . this is NOT the post to start with! Moving on. . .

The PHP:

    <?php
    //declare our variables
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = nl2br($_POST['message']);
    //get todays date
    $todayis = date("l, F j, Y, g:i a") ;
    //set a title for the message
    $subject = "Message from Your Website";
    $body = "From $name, nn$message";
    $headers = 'From: '.$email.'' . "rn" .
        'Reply-To: '.$email.'' . "rn" .
        'X-Mailer: PHP/' . phpversion();
    
    //put your email address here
    mail("youremail@yourdomain.com", $subject, $body, $headers);
    ?>
    <!--Display a thankyou message in the callback -->
    <div id="mail_response">
        <h3>Thank you <?php echo $name ?>!</h3><br />
        <p>I will answer your message soon as possible.</p><br />
        <h5>Message sent on: </h5>
        <p><?php echo $todayis ?></p>
	</div>
Our mail.php breakdown:
  • The comments on this more or less speak for themselves. First we are getting the variables that are passed to the file from the javascript (NOT the HTML, that’s why the ID’s of the inputs don’t match up. I had to change email to e-mail so that it didn’t conflict with the comment forms on the blog posts). Also, the function nl2br() helps to replace any new lines that the user enters onto the ‘message’ textarea with line breaks so that you get a properly formatted e-mail.
  • Next, we define variables for the date, subject, body, and headers for the standard PHP mail() function.
  • After the mail() function is finished executing, you will see in our javascript that we will replace the form & loader with #mail_response so that the user gets some comfy feedback that we got their message! I see way too many folks leave out user confirmation on their contact forms, and that is just plain silly. Don’t leave your users in the dark!
  • I would also recommend putting some form of PHP spam protection in here as well. Another post, another time perhaps.

The CSS:

 
.container {
	width:960px; 
	margin:0px auto; 
	position:relative;
	}
	
/* Positions the contact form so it doesn't interfere with any other content, as well as a z-index above any other elements on the page */	
#contactFormContainer {
	position:absolute;
	left:368px;
	z-index:12;
	}
	
/* Hides the whole contact form until needed */	
#contactForm {
	height:289px;width:558px;
	background:#515151 url(../images/birdy.jpg) no-repeat 241px 11px; 
	border:1px solid #929191;
	display:none;
	padding:7px 12px; 
	color:#fff
	}   

/* Loading bar that will appear while the ajax magic is happening */
.bar{
	display:none; 
	background:url(../images/ajax-loader.gif) no-repeat center; 
	margin-top:100px; 
	height:40px; width:230px;
	}
	
/* Hides the confirmation message until needed */	
#messageSent {display:none;}

/* This hides the form validation alert messages until needed */
#contactForm span { 
	display:none; 
	font-size:9px; 
	line-height:10px; 
	padding-left:6px; 
	color:#f5c478;
	}
	
/* Some styling for the contact button */
#contactFormContainer .contact {
	height:47px; width:211px;
	background:url(../images/contact_me.png); 
	position:absolute; 
	left:368px; bottom:-44px; 
	cursor:pointer;
	}
			
/* Hides the darkening layer for the Modal effect. The z-index is necessary for layering purposes, and be sure to keep the positioning/height/width the same */	
#backgroundPopup{
	display:none; 
	position:fixed; 
	_position:absolute; 
	height:100%; width:100%; 
	top:0; left:0; 
	background:#000; 
	z-index:11;
	}

I did not include the CSS styling that I used for appearances, only what was necessary to get this functional. For everything that I used to create the form, please download the source files.

And our CSS rundown / explanation:
  • .container is just used for positioning everything in the middle of the page, and the position:relative property lets us absolute position the elements inside of the div.
  •  
#contactFormContainer {
	position:absolute;
	left:368px;
	z-index:12;
	}
    #contactFormContainer is absolute positioning the whole contact form, this div is also necessary so that the .contact button moves with the contact form, and the z-index puts it above the darken div.
  • #contactForm Contains the form as well as all other content inside of it (loading bar, background, etc.) and is hidden until the .contact button is pressed.
  • The spans are hidden until a user tries to submit the form without properly filling out all of the fields. You will see why each one has its own class when we take a look at the scripting.
  • #backgroundPopup{
	display:none; 
	position:fixed; 
	_position:absolute; 
	height:100%; width:100%; 
	top:0; left:0; 
	background:#000; 
	z-index:11;
	}
    #backgroundPopup is placed at the bottom of the page in the HTML (it needs to be OUTSIDE of any container or else it won’t work right in IE6). This is the div that will appear and have its opacity changed when the .contact button is pressed. Make sure its z-index is above everything, but below the #contactFormContainer.

 

The Javascript:

PLEASE NOTE: The following javascript is a little clunky and not very well optimized. For a much cleaner version of the validation portion of this script, please visit my post The Simple, Quick, and Small jQuery HTML Form Validation Solution. 

$(document).ready(function(){
	//function for contact form dropdown
	function contact() {
		if ($("#contactForm").is(":hidden")){
			$("#contactForm").slideDown("slow");
			$("#backgroundPopup").css({"opacity": "0.7"});
			$("#backgroundPopup").fadeIn("slow"); 
		}
		else{
			$("#contactForm").slideUp("slow");
			$("#backgroundPopup").fadeOut("slow");  
		}
	}
	 
	//run contact form when any contact link is clicked
	$(".contact").click(function(){contact()});
	
	//animation for same page links #
	$('a[href*=#]').each(function() {
		if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
		&& location.hostname == this.hostname
		&& this.hash.replace(/#/,'') ) {
		  var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
		  var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
			if ($(this.hash).length) {
				$(this).click(function(event) {
					var targetOffset = $(this.hash).offset().top;
					var target = this.hash;
					event.preventDefault();			   
					$('html, body').animate({scrollTop: targetOffset}, 500);
					return false;
				});
			}
		}
	});



   //submission scripts
  $('.contactForm').submit( function(){
		//statements to validate the form	
		var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
		var email = document.getElementById('e-mail');
		if (!filter.test(email.value)) {
			$('.email-missing').show();
		} else {$('.email-missing').hide();}
		if (document.cform.name.value == "") {
			$('.name-missing').show();
		} else {$('.name-missing').hide();}	
		if (document.cform.message.value == "") {
			$('.message-missing').show();
		} else {$('.message-missing').hide();}		
		if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){
			return false;
		} 
		
		if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
			//hide the form
			$('.contactForm').hide();
		
			//show the loading bar
			$('.loader').append($('.bar'));
			$('.bar').css({display:'block'});
		
			//send the ajax request
			$.post('mail.php',{name:$('#name').val(),
							  email:$('#e-mail').val(),
							  message:$('#message').val()},
		
			//return the data
			function(data){
			  //hide the graphic
			  $('.bar').css({display:'none'});
			  $('.loader').append(data);
			});
			
			//waits 2000, then closes the form and fades out
			setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000);
			
			//stay on the page
			return false;
		} 
  });
	//only need force for IE6  
	$("#backgroundPopup").css({  
		"height": document.documentElement.clientHeight 
	});  
});
Oh joy, lots and lots of javascript explainin’ to do:
  • $(document).ready(function() {}); is the necessary jQuery function required to kick off anything that runs after the page is loaded. All our code will be placed inside of this.
  • function contact() {
		if ($("#contactForm").is(":hidden")){
			$("#contactForm").slideDown("slow");
			$("#backgroundPopup").css({"opacity": "0.7"});
			$("#backgroundPopup").fadeIn("slow"); 
		}
		else{
			$("#contactForm").slideUp("slow");
			$("#backgroundPopup").fadeOut("slow");  
		}
    Here we are defining the function contact that will run each time a link with the class .contact is pressed, using jQuery’s selectors: 
    $(&amp;quot;.contact&amp;quot;).click(function(){contact()});
    This allows us to give that class to any link to execute the function that opens the contact form. What this function is doing is first determining whether the form is hidden or not, and if it is then it will slide the form down, and then change the opacity of the #backgroundPopup div as well as fade it in.
  • $('a[href*=#]').each(function() {
		if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
		&& location.hostname == this.hostname
		&& this.hash.replace(/#/,'') ) {
		  var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
		  var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
			if ($(this.hash).length) {
				$(this).click(function(event) {
					var targetOffset = $(this.hash).offset().top;
					var target = this.hash;
					event.preventDefault();			   
					$('html, body').animate({scrollTop: targetOffset}, 500);
					return false;
				});
			}
		}
	});
    This script grabs any anchor on the page with a same page link (e.g. #something), determines the distance between it and the destination, and then creates a scrolling transition. You can edit the speed at which it transitions by changing the ‘500′ on the line $(’html, body’).animate({scrollTop: targetOffset}, 500);.
  •   $('.contactForm').submit( function(){
		var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
		var email = document.getElementById('e-mail');
		if (!filter.test(email.value)) {
			$('.email-missing').show();
		} else {$('.email-missing').hide();}
		if (document.cform.name.value == "") {
			$('.name-missing').show();
		} else {$('.name-missing').hide();}	
		if (document.cform.message.value == "") {
			$('.message-missing').show();
		} else {$('.message-missing').hide();}		
		if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){
			return false;
		}
    I know there is a better way of doing this, but in the interest of time I quickly put this together. This is a nice long if statement that checks each required input field on the form to see if they are filled in properly or not. Doing it this way is definitely not a problem if you only have a couple of required fields, but if you have several than this will need to be rewritten. There are jQuery plugins out there that offer much more extensive validation functionality, but it was not necessary for what I wanted to accomplish with this simple form. If the field in question is not filled in correctly, then the corresponding error message (those spans we made earlier) is shown and return:false; stops the form from being submitted.
  •     
     if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
			//hide the form
			$('.contactForm').hide();
		
			//show the loading bar
			$('.loader').append($('.bar'));
			$('.bar').css({display:'block'});
		
			//send the ajax request
			$.post('mail.php',{name:$('#name').val(),
							  email:$('#e-mail').val(),
							  message:$('#message').val()},
		
			//return the data
			function(data){
			  //hide the graphic
			  $('.bar').css({display:'none'});
			  $('.loader').append(data);
			});
			
			//waits 2000, then closes the form and fades out
			setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000);
			
			//stay on the page
			return false;
		} 
  });
    If all of the fields are correct, then we run the script that hides the form, shows the loading bar until the ajax variable passing to the mail.php script is complete, and then set a timer that waits ‘2000′ until it closes the whole thing. If you’d like to demo this action, please do not use the form on my website unless you want to say something to me; you can demo the form that sends a message to nowhere here.
 

Keep in mind, this was one of my first forays into really screwing around with jQuery/javascript using some of my own code, so I’m sure things are not perfect, and a veteran may look at some of my scripting with a bit of “wtf?” on their face. If you do get that face, please let me know of a more optimal way of doing something, and I will definitely update the code and give you credit. If you have any questions, as usual please leave them in the comments here!

Author: "Joren Rapini" Tags: "CSS, Javascript, PHP, Tutorials, Web Dev..."
Comments Send by mail Print  Save  Delicious 
Redesign of Joren Rapini.com is here!   New window
Date: Monday, 25 May 2009 20:09

BIG SIGH OF RELIEF. After about a month of being a free-time vampire, and my neglect of friends and loved ones, this thing is live and ready to rock. I’ve learned a lot since the last version of the site was created over a year ago, so it is quite a drastic design change. I hope you all enjoy it and I look forward to working with it for all of my new blog articles. There are still some minor things that I plan on updating, but right now I’m going to go out and enjoy the holiday over here for a little while.

Give me feedback! I appreciate anything and everything. While the portfolio is for the clients, the blog is for the readers so I value your opinions. Also, if anyone has any requests as to how I did anything on this website, please let me know in the comments, and I’ll be sure to make a tutorial for it! I experimented with a lot of new things. Also, I updated the comment system, so it now uses Wordpress 2.7’s threaded comments.

Author: "Joren Rapini" Tags: "General, Fantastic, Pain in the butt"
Comments Send by mail Print  Save  Delicious 
New Design Coming, A Hold On New Articles   New window
Date: Saturday, 02 May 2009 02:42

Hey everyone, I just wanted to give the readers of this blog a bit of a heads up. It will probably be a couple of weeks before I throw up a new article. The reason being, I will be redesigning my blog and portfolio from the ground up. The layout of the blog will be similar, so no one should be getting lost, but the aesthetics will have a drastic overhaul. The current design was originally started about a year and a half ago. Since then, I’ve come quite a long way in my web skillz and knowledge, so I wanted my personal site to reflect that. I’d also like to take advantage of some of the latest Wordpress features, like the new post comment system.

If you follow me on Twitter as well, I will more than likely throw my design concept out there for people to review it and give any feedback before I begin integrating it with Wordpress. See you around!

-Joren


Update: New work-in-progress is viewable at http://dev.jorenrapini.com in case anyone would like to leave feedback / criticisms here for me. Functionally everything is in place, just need to begin on designing and styling the new blog.

Author: "Joren Rapini" Tags: "General"
Comments Send by mail Print  Save  Delicious 
Web Design Inspiration | Galleries, Websites, And More - MLC#3   New window
Date: Friday, 24 Apr 2009 15:56

So here we are, Part 3 of my Massive Link Collection articles. This one is focused around inspirational pieces, and included are links to collections and websites that showcase great web sites, logos, graphics, javascript techniques, CSS, etc. Looking at other quality work is always a great way to get started on a project of your own. If you are stuck on something and need some new ideas, you need not look any further than this post.

Once again, a description of these posts: I provide a list of links that I have collected over the past year, as well as all of the Firefox tags that I use to keep them indexed. This gives you a ton of easy and quick resources. If you are unfamiliar with Firefox’s bookmarking system and want to know how to truly take advantage of this post, click here. Also, be sure to check out the other posts from the series if you haven’t yet: Useful Javascript, jQuery, and AJAX Tutorials and Resources - Massive Link Collection Part #1 and Design Tutorials, How-tos, and Resources for Photoshop and Illustrator - Massive Link Collection Part #2.

Inspirational Websites


Blog Designs


Logos


Navigation


Other Inspiration Elements


Quality Design Galleries

Author: "Joren Rapini" Tags: "Graphic Design, Resources, Web Design, B..."
Comments Send by mail Print  Save  Delicious 
Design Tutorials, How-tos, and Resources for Photoshop and Illustrator - MLC#2   New window
Date: Thursday, 16 Apr 2009 00:37

Welcome to the second part of a series of articles that focuses on providing readers with a colossal list of links to bookmark and tag for easy future reference. I provide a list of links that I have collected over the past year, as well as all of the Firefox tags that I use to keep them indexed. This gives you a ton of easy and quick resources. If you are unfamiliar with Firefox’s bookmarking system and want to know how to truly take advantage of this post, click here. Also, if you missed my first post, be sure to check out Useful Javascript, jQuery, and AJAX Tutorials and Resources - Massive Link Collection Part #1.

And now without any further blabbering from me, here is the list of collected articles that include everything from text effects, to vector drawing tutorials, to laying out a web interface in photoshop. Have fun!

Author: "Joren Rapini" Tags: "Graphic Design, Web Design, Adobe, Desig..."
Comments Send by mail Print  Save  Delicious 
Useful Javascript, jQuery, and AJAX Tutorials and Resources - MLC#1   New window
Date: Sunday, 05 Apr 2009 23:44

Welcome to the first post of a series of articles I will be doing that will bestow on you an enormous collection of bookmarks that I’ve horded like a squirrel and his nuts. These blog posts are not going to be your typical lists. These are posts that I have collected over the past year, and they’ve all been bookmarked and tagged for later use. Any good web designer and developer should have a nice bookmark collection; it’s appropriately compared to batman’s utility belt. With Firefox’s bookmarking system that it introduced in Firefox 3, this has become very easy thanks to its tagging system. For example, need to find a quick tutorial on that cool jQuery accordion effect that you found a couple of months ago? Hit CTRL+B, type in jquery accordion and whammo, there is the bookmark you need. This is only my recommendation, so do what you will with these links.

Many of these links are bookmarks to articles that were list themselves, so they included many items. What’s special about this list on Joren Rapini’s blog, you ask? Well, I have graciously copied and pasted the Firefox tags that I use to identify each one of these pages in my bookmarks, so you can copy and paste them right into yours! This should save you a lot of time, and give you an enormous wealth of resources to boot.

Let me know if you spot a dead link, I have not checked some of these for a while! These links could involve anything that has something to do with Javascript, jQuery, AJAX, or Mootools.

If there is considerable interest in this post, then there will be many more to come.

Author: "Joren Rapini" Tags: "Javascript, Resources, Tutorials, Web De..."
Comments Send by mail Print  Save  Delicious 
Font Face Replacement Embedding Techniques and Resources   New window
Date: Sunday, 29 Mar 2009 01:53

Thanks to current lack of support for and other licensing issues regarding @font-face, we have to turn to other methods of using special fonts on our web pages. But what to choose? There are several great proven methods out there for font face replacements on a website, so today we’re going to take a look at 4 of the bigger ones that I have taken for a spin. I’m going to list for you the pros and cons that I discovered for each method.


Typeface.js

How it works:Typeface uses a browser’s vector drawing capabilities to draw text in HTML documents. It uses 2 javascript files - one that it gives you to download (typeface.js), and another which is generated from their website depending on the font that you upload. It’s a pretty simple concept; you download the typeface.js file, go to their website and click on the ‘fonts’ link to convert your font to a javascript file, and then you can easily reference both files in your HTML and change the fonts within your page just by specifying the font in CSS as if it was any normal font-family.

Pros:
  • Very easy setup
  • Supports all of the necessary browsers
Cons:
  • Usage is limited due to fonts being embedded. There are not many fonts out there that are permitted to be used with this method
  • Text is not selectable in most cases

Cúfon

Cúfon is the latest addition to this roundup, and it is also my new favorite. It uses the same technology and method as Typeface to draw the font (Canvas and VML), therefor it has an extremely similar Pro and Con list to typeface. The only difference is a slightly easier implementation. I first found out about Cúfon through Cameron Moll’s blog, which I would highly recommend checking out his post on Exploring Cufón, a sIFR alternative for font embedding where he discusses it and writes a quick tutorial on using it.


sIFR

sIFR requires both flash and javascript, and embeds fonts onto the page through a swf file. I believe this was the first of these technologies to emerge.

Pros:
  • Any font can be used, sIFR does not violate EULA’s.
  • Degrades well (normal CSS will show up if user has flash or javascript off)
Cons:
  • Out of the 4, I would say that sIFR is by far the most complicated to set up
  • Requires two browser enabled technologies instead of one.
  • It loads slower than the others. There seems to be a visible delay no matter what

sIFR was great when it first appeared onto the scene, but the only reason I can see that you would want to use it over any others now is if you have a font that has an EULA preventing you from using one. Here are some nice sIFR resources that you can take advantage of:
How To Implement sIFR3 Into Your Website
sIFR Vault - lots of already created sIFR files for your using pleasure
jQuery sIFR plugin


FLIR

Face lift image replacement (FLIR) is different from the others in that it uses PHP to generate an image that replaces the text. So, as long as you are hosting your website on a Linux box, you should be all set!

Pros:
  • Somewhat easier to set up than sIFR
  • EULA is not a problem here either
Cons:
  • Not as quick to set up as typeface or cúfon
  • Does not always render a perfect image of the font, depending on which font face you use
  • Requires PHP with GD library installed (not a problem for most of us)

How To Use Any Font You Wish With FLIR - a tutorial on setting up FLIR

Hopefully this post helped you come to a decision on how next you want to start using some snazzy fonts. Personally, I would not use these for anything BUT a header, due to load times and lack of CSS hovers. Correct me if I’m wrong, but I do not believe any of these can be used with a CSS hover. My recommendation would be to use FLIR and Cúfon when available. This was just a cursory glance into these 4 techniques, and I have not actually used any of them more than once or twice, so if I missed something or was incorrect anywhere, please post a comment.

Author: "Joren Rapini" Tags: "CSS, Flash, Javascript, Resources, Web D..."
Comments Send by mail Print  Save  Delicious 
Comment To Win One Thousand Free Business Cards - Winner Announced   New window
Date: Saturday, 07 Mar 2009 22:51

Hey everyone! Got some goodies this week. U-printing has offered up one thousand business cards to the lucky winner. In order to enter, all you have to do is leave a comment at the end of the blog post, describing what you would use the free business cards and/or canvas print for.

About U-printing

U-Printing is a trusted online printing company committed to providing a high quality printing experience at affordable prices. They specialize in canvas prints and business cards.

Prize

1000 free standard size business cards for one reader and 1 free 18×24 canvas print for one reader. You can choose from any of their stocks for these items.

Rules

Winners in the United States and Canada qualify for free shipping. Shipping fees will apply to winners outside these areas. I will stop the contest at the end of the week and choose the winner from random.

Winner Announced

Congratulations to Luis Tomas, U-Printing should be getting into contact with you soon for your business cards! Thanks everyone.

Author: "Joren Rapini" Tags: "Contests, Business Card, Contest, Free, ..."
Comments Send by mail Print  Save  Delicious 
Design a Space Cloud Starry Fantasy Scene with Photoshop   New window
Date: Monday, 02 Mar 2009 01:18

Sorry for the long delay in posts! It’s been a busy month. This article is a tutorial for how to create the following fantasy scene in Photoshop. You can use these techniques in a bunch of different ways from within a web interface design, to my example which is a wallpaper that I created as a Valentine’s Day gift to my fiance Candy.


So, here is our end result. Obviously you don’t need to make a Valentine’s Day themed design. Changing that red is as easy as just changing the color of a gradient on a single layer, so you can make it blue, green. . . whatever you’d like!

Make the rock in the sky thing

First off, we’re going to go ahead and start with the planet. I drew inspiration for this project from a few different places, and one of them has a tutorial by dinyctis on deviantART for the planet that this design requires. There’s really no reason for me to re-write what he already did a great job on doing, so go on, make your planet! Come back here when you’re all finished with it. If you are looking for some stone textures for it, here are a couple places you can take a look at: 2textured, CGTextures, Amazing Textures, and Textures. I did add a layer mask to my planet layer in order to fade out the bottom left corner of it a little more (as well as to allow one cloud layer to show up in front of the planet instead of behind it).

Our first few layers

Ok, so stick that planet somewhere on a new Photoshop document. Resolution settings etc. are all up to you depending on what media you are using this for. I created this design at 1680×1050 so it could fit a 16:10 ratio screen. For your bottom background layer, pick a dark grey or black since this will more than likely be a dark spacey theme, I chose #292929. Next, we’re going to create some rays. I used a white sunburst brush from Dezignus a couple of times, coming from the top right corner, and just transformed + distorted them to make it look a little more random. Add a layer mask to that layer by clicking the layer mask button on the bottom of the layer’s palette, and use a black-to-white radial gradient causing the ends of the rays to fade off. Also, I’d drop down the opacity of that layer, 10% should be good. Here is what you should be looking at so far:

Next you’ll want to create your color overlay layer, so that you can see how everything will look while you’re using the next couple of brushes. Just create a new layer above the others (but below the planet), and create a linear gradient that runs from one corner of the screen to the opposite. This gradient is what will set the feel for your piece and determine the majority of color that you see. For mine I only used 3 colors, a dark red (#5f0c0d) to a lighter red (#941919) in the middle to an ever darker red (#4d0909), but you can play with it however you’d like. Set this layer’s display mode to “overlay”.

Clouds! Big fluffy marshmallows in the sky

This is where I had the most fun doing this piece. To learn how you can create your own cloud brush within Photoshop, please follow Abduzeedo’s Fluffy Clouds tutorial. Make sure to read the whole section that talks about the cloud brush, but you don’t really have to read anything else. Once you have your brush ready, jump back over here. Got it? Good, let’s play with it. Place this layer below your color overlay. To create the cloud effect I used, you have to click and click with a white brush just like the abduzeedo tutorial tells you to, until you get the appearance that you want (don’t click and drag). On that same layer, I also threw in some black clouds at the top of my white ones. Also, create a clipping mask of this layer (right click on your cloud layer and select “add clipping mask”) and use a black cloud brush on the lower parts of the white clouds to give them a contrasting appearance. For my piece, I also created another 10% opacity layer below this one and using a white cloud brush threw in some clouds that went behind the planet and in random places around the piece. Right now, you should be about here:

The clouds are really what make it unique, so take some time to get them the way you want them!

A starry night

To add some detail and texture to our piece, we need some glowies! I used Star Field Brushes by ~BL1nX. I have two layers of stars; one above the color overlay layer, and one below it (this equals red and white stars, and also helps create some depth). Sprinkle these lightly throughout your design, then place in oven at 450°F. Just kidding, please don’t cook your computer.

The title

In order to create the title, I started with the font 23rd Street Demo Version. The only styles I applied to the font was a 2px stroke with a blending mode of overlay and a white to white gradient that went from 0% to 100% opacity. I used and slightly modified a heart from one of Vecteezy’s free downloads. For the black swirlies behind and around the text, I used a combination of brushes from the Flower Ornament Brushes by ~archnophobia set. This is placed on a layer below the text and heart, and in order to make it appear in front of these items, place more layer masks on both the text and heart. Now, CTRL+Click (sorry Mac users, I can’t remember the shorcut) on your swirls layer and then make sure you have one of the layer masks selected, and then use a black hard brush to fill in the spots where you want the swirls to appear as if they are coming over top of the text/heart. Woohoo for the appearance of depth! The image to the right shows how your layers should have all lined up at the end of it.

Wa-la! What a sweet pic you just created, eh? I know I excluded a lot of minute details and pictures, so if you have any questions on how I achieved any specific effects, please post here in the comments and let me know! I will most definitely get back to you within a day or two. On an unrelated note, be sure to subscribe to the RSS feed because in a few days I will be hosting a giveaway of one thousand free business cards, courtesy of UPrinting!

Author: "Joren Rapini" Tags: "Graphic Design, Tutorials, Adobe, Clouds..."
Comments Send by mail Print  Save  Delicious 
Amazing Web Designer Resource Collection and Color Tools   New window
Date: Monday, 09 Feb 2009 02:52

I was originally going to write a quick post on some color tool resources, being inspired by Well Styled’s brand new revision of their awesome color tool, found here. The Color Scheme Designer has a lot of neat new functions, including generating a preview of a website with the colors that you have picked along with new customization features. I realized that most of the tools I had to write about were already included in this very nice website that Tom Dufour brought to my attention, called Web Designer Heaven.

Web Designer Heaven is an amazing resource. Combine that with Blue Vertigo and they completely negate the point of all of those “Top 20 resources for This and That Etc.” kind of blog articles that you see all over the place. Check them out, you won’t be disappointed.

So back to my original thought process, aside from the new Color Scheme Designer, the only other color resource that I use from time to time that was not included on that website (I did not check to see whether they were on Blue Vertigo or not), is the Color Palette Generator. It’s a nifty little tool that will spit out color hex codes that would look good based on the image you upload.

Author: "Joren Rapini" Tags: "Resources, Web Design, Color, Tools"
Comments Send by mail Print  Save  Delicious 
Easy Client Control Over Page Elements with CushyCMS   New window
Date: Sunday, 25 Jan 2009 22:40

Every client you deal with should have a unique solution to fit their needs. CushyCMS is definitely no end-all-be-all CMS solution, but it is absolutely perfect for a certain niche of websites. If you are developing a website that, for example, will often need a couple paragraphs on the front page changed often, or they’re a restaurant that just wants to update specials and prices every once and a while, then CushyCMS is a pretty optimal solution. You can let your client take control without damaging anything else on the website and, best of all, they get off your case on making updates! It’s extremely quick and easy to set up, and very easy to explain to your clients on how to use it as well.



Be sure to visit their home page, it has a nice little 3 minute screen cast and all the short and sweet details on what makes it great. Honestly, it would be a waste of my time and your time for me to go into explaining on how to use it, their website does a bang up job of it, and it’s so simple. I’m more or less just using this article to inform you of its existence, and also I’ll explain a little unique way that I made use of it.

In one situation, I had a client that wanted to give somewhat up-to-date news information about the area that his vacation home is located in. I made one page template used on many content pages that had a couple list items in it in a sidebar. Total, this list of news updates probably showed up on 90% of the website. In order to create quick and minimal access for the client to make these updates to his website, I created a single PHP document (we’ll call it news-include.php) that had nothing on it other than the unordered list and the CushyCMS class that you add to any field to make it editable. I then used a PHP include on my page like so:
&lt;?PHP require(&quot;news-include.php&quot;);?&gt;

Once it is uploaded, the client just makes a change to that single file on CushyCMS, and it gets published every where on the site! Enjoy getting creative with this, and I hope CushyCMS can come in handy for you.

Author: "Joren Rapini" Tags: "PHP, Tutorials, Web Development, Content..."
Comments Send by mail Print  Save  Delicious 
Enhance Your Love For Music With These Applications   New window
Date: Tuesday, 20 Jan 2009 16:48

There is one thing in my life that I will always cherish above even web designing and developing (gasp), and that is music. I was a musician for several years, and that even included being a high school band geek. I totally rocked that saxophone. In the last few years, I have expanded my horizon when it comes to music to encompass just about everything and I have a bit of an addiction to amassing as much of a collection as I can. If you share my love for music, then you will appreciate this post. I’m going to go over some of the applications and services that I use on my computer that helps with all kinds of aspects of dealing with a music collection from managing your library, finding new music, and just getting the most of out the experience.

Songbird

Soon, Songbird will be the audio player to replace all audio players. For now, it’s still got plenty of updates to go through, but the player has come a long way and it has an incredible amount of features that no other player has to offer, and thanks to it being open source and based off of Mozilla technology its possibilities are endless. And its bird mascot is even more cute than Twitter’s. . . honestly, look at this little guy. The latest version of Songbird 1.0 has accomplished enough that I have done away with both Winamp and Itunes on my main PC. It is available for PC, Mac, and Linux.

Songbird’s add-on management is exactly the same as Mozilla’s Firefox, and it even has a built in browser that uses Gecko as well. It’s quicker and more stable than Winamp or Itunes, and it has less of a memory footprint even on huge music libraries. Songbird does come with several add-ons that you can opt out of during install, but there are a bunch of great ones out there. Some notable plugins: LyricMaster displays and gathers lyrics for your songs, mashTape displays artist info via Last.fm, reviews, album art, news, photos via Flickr, and videos via Youtube, Music Recommendations does what its title suggests, SHOUTcast Radio gives you lots of internet radio streams, and Concerts will let you know every artist from your library that is touring in your area. The interface is awesome, and it can be skinned differently with “feathers”. (It’s a bird, so you can change its feathers. Get it? Get it? Genius!)

Simplify Media

Its still got quite a few bugs, but man is Simplify Media sweet. Imagine, being able to access your entire music library quickly and easily with nothing more than an internet connection. Simplify Media (SM) will share your entire library from a computer that is connected to your SM account, allowing you to stream any song from your library through a peer to peer connection from wherever else you have SM installed on. It is available for PC, Mac, Linux, and the iPhone. With the iPhone, you could be rocking out to your favorite Toto tracks wherever you are!

Your library is even searchable from the remote connection, it just installs a plugin for either Itunes or Winamp which then allows all of your libraries and playlists to be displayed. Now, the coolest part about it is the fact that you can add up to 30 friends to your account and play through their library the same exact way! You could increase your library tenfold and have access to all sorts of music instantly. Look me up, my account name is ‘ethereal’, and I’d love to talk and share music with you! It will also give you access to about 30,000 more songs.

Last.fm

I’ve been using Last.fm for a few years now. You can find me on there as ‘3thereal’ if you’d like to buddy up. Last.fm took the concept of Pandora a step further, and created a whole social networking website out of it. Using either Last.fm’s web interface or downloadable program, you can create stations out of your favorite artists and listen to recommendations. Last.fm keeps track of what music you are playing from your iPod and your favorite music players (you just have to let it install its plugins), and can then give you more great recommendations based off of what you have in your library and what music you play the most. It also keeps track of all kinds of music statistics for you. Last.fm also acts as a huge database of artist information.

There are many online radio/music finding services like last.fm, but the two most popular are Pandora and Slacker. All 3 take a different approach to finding you new music, so you may actually benefit from trying them all out. Last.fm takes advantage of social networking, Pandora uses a scientific method of analyzing dozens of different audio attributes, and slacker actually has “dj’s” that categorize and build the playlists. Anytime I want to start looking for new music, I just power up Last.fm for about an hour and I’ll have a plethora of new artists to start looking into. I would highly recommend making an account.

Media Monkey

Sorry Mac dudes, this is a PC only application for the time being. This is my absolute favorite for managing a media library. The free install of it can do just about everything except convert audio files, which the paid version is capable of converting pretty much any audio I’ve run into. The interface is very well designed and intuitive. One of its most useful functions is the ability for you to select a group of music, hit CTRL+L to bring the Auto-Tag from Web feature which pulls all of the info for that album from Amazon.com. It can automatically update all of the ID3 tags for you, and it also embeds the album artwork from Amazon. Sadly, silly iPods still only recognize the album artwork that iTunes downloads.

MediaMonkey also has a bunch of other management features like burning, file auto-organizing, track volume leveling, and audio player, and many more that I haven’t even began using. If you have a PC, you can find media monkey here, so go ahead and clean up your library! Plus, haven’t you always wanted a monkEY?

MP3 Gain

I believe this is another PC only application. This only has one purpose, and that is for track volume leveling. I quickly found Media Monkey’s wasn’t that great, so I picked up this handy little guy. It can do a music folder relatively quickly, and is the most accurate that I’ve seen. No more volume changes when you play from song to song!

Radio Tracker

This is actually a pretty neato idea. Radio Tracker scours the web radio stations for you and downloads any songs in mp3 format that meet the criteria of what you tell it to look for. You can leave it alone for a few hours and come back to a couple hundred songs for you to check out, and it does a pretty good job of cutting off the DJ’s or commercials.

So, there you have it. The morale of the story here is, make the most out of music and share the love! Don’t forget to find me on last.fm or simplify media, I’m always interested in talking music. And, don’t forget to throw up the horns.

Author: "Joren Rapini" Tags: "Applications, Music, Last.fm, Media Monk..."
Comments Send by mail Print  Save  Delicious 
Are CSS Frameworks Really Worth Using?   New window
Date: Thursday, 15 Jan 2009 19:37
I’ve witnessed the beauty of frameworks for languages like PHP such as CakePHP, and for Ruby such as Ruby on Rails, not to mention the myriad of great javascript libraries that are out there. I see the potential for making life a lot easier by using these frameworks. They prevent you from having to reinvent the wheel, and can really speed up your production. The difference between these and CSS frameworks such as Blueprint is that they impact how the site functions, and not really how it appears to the user (I’m not including js libraries in this statement). So to me, the idea of a CSS framework seems like you’d be producing some stale designs. Don’t get me wrong, I love reset style sheets. Since the main purpose of a reset style sheet is to create uniform styles across all browsers, it doesn’t really create the same effect that I am debating on this post. Every browser likes to do everything a little different, whether it’s a thicker border here for this element, or a smaller padding there, the list is huge. I’ve already talked about it once on a previous post CSS Navigation Rollovers With Dropdowns, but the one that I like to use can be found here. So, a normal CSS framework can give you all kinds of great default setups like typography, layouts, and forms etc. Maybe for a beginner having these in place already could become really handy, but every time I do a new design I definitely challenge myself to come up with a way to bring it to life with CSS exactly the way I created it in Photoshop. I like to think it helps me keep my brain sharp, so I don’t end up coding tabled layouts with Times New Roman and clipart in my old age. When I begin to slice and code a design, I have to put some planning into it and come up with a very customized solution to get everything to look the way I’d like it to. Since CSS is purely a front-end language, I would say that using a framework just seems damn silly. As a web developer and designer, you should be challenging yourself to accomplish something new on every step of the process from start to finish of a project, or else you will never grow as a skilled professional. Even if you do end up using the frameworks, and then customizing it slightly to your own desires, you will end up with a lot of code that you are not using which every little item that gets added to a load time counts for something. Maybe I’m looking at this from too critical of an angle. Some might say I’m being ignorant, or not to knock it until I try it. I’d like everyone’s opinion on this one, so please discuss it in the comments.
Author: "Joren Rapini" Tags: "CSS, Web Development, Frameworks, Web De..."
Comments Send by mail Print  Save  Delicious 
Useful Free Applications For Any Web Dev / Designer   New window
Date: Tuesday, 06 Jan 2009 01:59
This is somewhat of a continuation of Great Firefox Plugins For Any Web Designer or Developer where I talked about some handy Firefox plugins, and now I’d like to speak at you about some applications that I’ve found useful throughout my career, whether it be something that can help make a task a little easier or something that just helps me get through a day of work by making it more enjoyable.

Twitter

For a long time I held off on checking out Twitter. The idea sounded silly to me. I just sit around and write about what I’m doing, and read on what others are doing at that moment in time? Really? Why the heck would I care about that? While it’s not technically a computer application in the sense that I was planning on writing about, it is pretty invaluable for anyone who wishes to be involved in the web community. In this field of work, those that don’t get involved are the ones who get left behind. If you ‘follow’ the right people then Twitter can provide a doorway for you to see what is happening with web designers and developers all over the world in real time, and most of their ‘tweets’ are useful. Your own list of ‘followers’ can also act as a great support group if you want to bounce ideas off of others or ask questions. For now, Twitter has not caught on in the way that Facebook or Myspace has with the general public, but that could change in the future. I haven’t experimented with many Twitter applications, but for now I use Twitterfox which is a Firefox extension that allows for quick and easy non-intrusive access to your Twitter account while you are browsing the web. More Twitter applications can be found on this post of 19 Handy Twitter Mashups and Tools. I try not to spend a lot of time on it because too much social networking can give me a stomach ache, but I’m always paying attention during the week on my normal work hours if you want to stalk me on Twitter.

LogMeIn

LogMeIn is a quick and easy to set up remote access application. The free portion of it lets you access any computer that you have the LogMeIn software installed on remotely from another computer just by logging into your account on their website. It also installs a Firefox plugin which helps it run a little smoother. It supports multiple monitors and you can run things in full screen. You can control the mouse and keyboard, as well as copy and paste things from the client computer to the remote computer. This can have many uses, from collaborating on a project with another user to troubleshooting another PC (just say NO I will not fix your computer), to also how I use it the most by logging into my home PC from work to start a download, or send myself a file that I needed, the list goes on.

Synergy and Ultramon

Sorry! I’m sneaking a non-free application in here. Both of these apps help you manage and improve upon your screen real estate, so I felt compelled to put them in the same section. Synergy is free and its functionality is pure genius; it allows you to control multiple computers with a single keyboard and mouse without purchasing any extra hardware and it uses nothing but your already existing network! It even works cross-platform with OS’s. For example, say you have a desktop PC and a MacBook. You can setup the MacBook on your desk to the left of your PC’s monitor, set your PC as the host and the laptop as the client and configure Synergy’s settings so that when your mouse moves off the left edge of your PC monitor, it will be in your laptop’s screen just as if it was being used in a dual monitor setup. Your multitasking boundaries just got enormous! Go on, start watching a resource-sucking-high-definition video of Old School while you whip out some Adobe Photoshop brushes. Or, create that awesome dozen monitor display you’ve always drooled over in Swordfish. Here is a good tutorial on setting up Synergy. Ultramon can be given a spin for 30 days free on the PC, and then you have to pay for it after that. Ultramon really helps take advantage of a multiple monitor set up like it was meant to, from creating hotkeys for bouncing a window from one monitor to the next or maximizing it, a second taskbar, and a host of wallpaper/resolution/screensaver managing options.

Dropbox

Dropbox is one of my latest affairs. You know how super sweet Foxmarks made your life? Try the same concept with any data at all. If you haven’t given it due attention yet, I urge you to check out its screencast. Your jaw will drop, and if it doesn’t then you need to start working on improving your geek-ness. Dropbox perfectly synchronizes any local data that you place in your dropbox folder across all computers that have it installed and are logged into your dropbox account. It can create links to uploaded images on the fly for you, so you can stop logging into that cheesy imageshack account of yours. It only uploads recently changed data to lessen bandwidth usage. The list of features goes on. You can get 2GB for free, and purchase more if you’d like. It’s great if you use a separate computer at work, or if there are files that you like to have on multiple computers that you hate transferring back and forth with that flash drive (and then you want to beat your laptop senseless with a flaming brick when you accidentally overwrite a file with an older version). I really love using it to store all of my download fonts, icons, brushes, etc., as well as any current projects that I am working on so that I can bounce between computers and know that I am working on the same file, or at least as close as it gets. Dropbox’s web interface is pretty fantastic as well, including a bunch of other features like recovering files that you recently deleted from your Dropbox.

Firefox

Freakin’ duh.

Filezilla

Filezilla is a pretty handy FTP client. There isn’t much to be said that makes it special, other than it has all the FTP functionality that I need, a simple and easy to use interface, and it has that one thing that we all love - f r e e.

Open Office

With version 3.0 just released, Open Office has gotten even better. There really isn’t much reason for you to go out and purchase Microsoft Office anymore.

Adobe AIR

Hopefully by now you’ve heard of Adobe AIR. Its ability to put installable desktop software development in the hands of javascript and flash developers has created a whole new host of wonderfully designed cross-platform tools for us to put to use. Here is a great article on a bunch of Adobe AIR resources for your devouring pleasure. A couple useful AIR apps that I have stumbled and tripped over are FEAT and Font Picker. FEAT is short for Freelancer’s Estimation Assistance Tool, which comes in handy for, well, coming up with freelance estimates. Font Picker is a nice way of laying out a bunch of fonts for you to quickly scroll through and find what you are looking to use in your design much quicker. If you’d like to take a look at some more application specific to us web-heads, check out webdepot’s list of 27 Adobe AIR programs. I hope you enjoyed this application extravaganza. I poured my heart and soul into it, and writing this brought me that much closer to carpal tunnel syndrome. If you have any other favorites you’d like to share, please do so.
Author: "Joren Rapini" Tags: "Applications, Adobe AIR, Dropbox, Filezi..."
Comments Send by mail Print  Save  Delicious 
Double Body Background CSS Trick   New window
Date: Tuesday, 30 Dec 2008 19:16
So, you just created this awesome fancy background for a website. The top part of the background is large and in charge, while everything below it is going to be a repeating background that goes all the way down to the bottom of the page and helps define your website’s borders. The goal is to make sure the top background sits on top of the repeating background so that you cannot see the repeating background until the top one is done, but how do you utilize 2 centered background images without the browser creating a horizontal scrollbar? For an example of what we’re creating, click here. You could just use a transparent PNG background that repeats over top of the large background using DD Belated PNG, but that would be much more load intensive than we want to shoot for. This can actually be done very easily with CSS. The two images that we will be using can be found here (top) and here (vertical repeating). I originally had a little bit larger image, but I shortened it for this demonstration so that you could view the effect. First of all, the structure of the HTML is simple. All we need is our body tag, and then another div that will contain the rest of the website inside of it. In my example I’ve given it the id #background. Annnnnnd without further a-do, here is the CSS:

body {
	background:#fff url(background.jpg) repeat-y top center;
	margin:0px;
	padding:0px;
	}
#background {
	background:url(background-top.jpg) no-repeat top center; 
	height:395px;
	width:100%; 
	display:table;
	}
We give the body element the repeating background so that it is in the back and it extends the full length of the page. Next, be sure to give the #background div height equal to the height of the image. The key is the 100% width and the display:table property. This ensures that you won’t get any scroll-bars because the background extends much further than the content of your page will, and because the div is displaying like a table, it will increase its height to whatever content is inside it so there is no need for a min-height hack. This checks out fine in all browsers, IE6 and up.
Author: "Joren Rapini" Tags: "CSS, Tutorials, Web Development, Backgro..."
Comments Send by mail Print  Save  Delicious 
Next page
» You can also retrieve older items : Read
» © All content and copyrights belong to their respective authors.«
» © FeedShow - Online RSS Feeds Reader