Dec 10 2009

JQuery Part 4 – Intro to CSS Manipulation

JQuery is often used in websites to manipulate the CSS attributes of an HTML element upon the users request. For example, if a user wants to increase the size of the font immediately so that they can read your page, or you may just want to change up the CSS on the fly to make your page stand out a little more. All these things can be done in JQuery using the css() function and css manipulation techniques. Let’s get started by creating a basic page with a link and a paragraph with some links in it like so…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
		<script src="lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
 
		<title>JQuery CSS Manipulation</title>
 
	</head>
	<body>
		<a href="#">Click Me</a>
 
		<br>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, <a href="#">augue neque</a> tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, <a href="#">hendrerit</a> in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>
 
	</body>
</html>

As you can see it’s a basic HTML page that references the JQuery script. We have also added a link that says “click me” along with a paragraph of lorem ipsum text with some links in it. Alright, now onto creating the CSS for the page. For this example I will be putting the CSS in the header but if you want to put it in an external file by all means go ahead and reference it in the header.

<style type="text/css">		
p a
{
	color: red;
}
</style>

As you can see, I just added an attribute to make all the links within the paragraph tags initially turn up as red. You can add as many CSS elements here as you would like to style the links however you like but for the purpose of this demonstration you will just need the color red as an attribute. Next let’s add the JQuery and introduce the .css() function.

<script type="text/javascript">
	$(function()
	{
		$('a').click(function()
		{
			$('p a').css('color', 'blue');
		});
	});
</script>

As you can see the JQuery code is pretty straight forward for what we’re doing. Basically we’re starting out by checking the DOM to make sure that the file is ready to be manipulated. Then, we perform a click function anytime an anchor tag is pressed. Inside of that click function is where we actually manipulate the CSS and change the color of the anchor tags to blue instead of red like we originally set. The css() function accepts two parameters that we’ll be using. The first is the attribute that you would like to change and the second is the attribute that you want to change it to. So for our example, the attribute is the color and we’re going to change it to blue. If of course you want to change the color of the link that was originally pressed instead of every link inside the paragraph tags you could use the “this” function instead of specifying a specific tag.

That’s the basics to CSS manipulation using JQuery, of course the example shown here is only a very basic example and can be greatly expanded upon. This is what the final code should look like…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
		<script src="lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
 
		<title>JQuery Test</title>
 
		<style type="text/css">		
			p a
			{
				color: red;
			}
		</style>
 
		<script type="text/javascript">
			$(function()
			{
				$('a').click(function()
				{
					$('p a').css('color', 'blue');
				});
			});
		</script>
	</head>
	<body>
		<div id="box"></div>
		<a href="#">Click Me</a>
		<br />
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, <a href="#">augue neque</a> tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, <a href="#">hendrerit</a> in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>
	</body>
</html>

2 comments   |  tags: , , , | posted in Tutorial, Web

Dec 9 2009

Intro to PHP – Intro to Sessions and Cookies

Cookies and Sessions are extremely useful to a PHP programmer, however they could be considerably confusing to a beginner. Cookies and sessions are used to store pieces of information for a period of time until it is destroyed. This information inside of a cookie or a session can be used to store things like log in information, URL information and much much more.

Cookies

Cookies are pieces of information stored on the client’s machine. The disadvantage here is that cookies can be disabled or ignored from the client’s end. So if you’re using cookies, try not to use them for anything that is crucial to the system functioning(this is what sessions are for… more on that later). The syntax for creating a cookie looks like this…

//A cookie can be equal to a string
$_COOKIE['nameOfCookie'] = 'What information you want to store here';
 
//or a cookie can be equal to a variable
$_COOKIE['nameOfCookie'] = $username;

According to PHP variable declaration rules, you can name the cookie whatever you would like as long as it doesn’t break any of the PHP rules. Data from created cookies can then be used anywhere you like just like any variable such as…

//print the value of the cookie
print($_COOKIE['nameOfCookie']);

Alternately, you can use the isset() method to check to see if a specific cookie has been set. This is more useful when using sessions but we’ll get to that later.

Sessions

Session differ from cookies in that they are stored on the server as opposed to the client. Sessions offer one major advantage over cookies, they cannot be disabled by the user, thus making sessions much more secure than cookies. When dealing with things like log in information and secure data, session are a much better choice than cookies. Sessions are declared using the same conventions as cookies…

//a session can be equal to a string
$_SESSION['nameOfSession'] = 'What information you want to store in the session';
 
//or a session can be equal to a variable
$_SESSION['nameOfSession'] = $username;

This will declare a session variable, however there is one key function that needs to be created prior to using a session variable. The session_start() function needs to be called before any data is sent from the server. Even if a spare white space is sent, the session_start() function will most likely send an error. Whenever you want to use a session variable in a PHP file/function, you must call the session_start() function at the very beginning of the page in order to use a session variable that has been created. This needs to occur even prior to sending the DOCTYPE to the client. To use a session variable the syntax is as follows…

//start the session
session_start();
 
//print the session variable
print($_SESSION['nameOfSession']);

The syntax is similar to using a cookie and alternatively you can use the isset() method to check if a session variable has been created or not. This becomes particularly useful when it comes to creating login systems that keeps users logged in using a session.

In full, you can use sessions or cookies if you like but keep in mind that sessions are stored on the server and cannot be disabled by a user, thus making them much more secure and reliable. In order to create a session, remember to call the session_start() method at the very start of the document or you may not be able to use the session variables.

2 comments   |  tags: , , | posted in Tutorial, Web

Dec 6 2009

Superpower your coda!

Web development with coda seems to be a pretty popular topic these days on the web. With such a powerful engine behind it, especially for multi-user collaboration it is quickly becoming a widely used tool in the web development community. There are a couple things that you can do if you’re a coda developer to increase your workflow, and really superpower your coda!

Books

Using the books feature in coda can be an extremely useful resource. Whether it be to just check an API function in PHP quickly or grab the code to move a box across the screen with JQuery it’s all easily accessible in one location. If you are using the trial version of coda then this screen may not be available to you, however once you purchase the full version then you should be able to add, edit, and delete books. Coda books aren’t necessarily just ebooks either, they can be just snapshots of the API’s of languages as well. To add a book click the plus button at the bottom left and fill in the book title and the book url. The rest of the options are optional, however if you want to be able to search through a book while editing code in the editor then you will need a search url as well. By holding down the command key and double clicking a word in the editor, you can search a specific book based on what type of file you’re currently editing in. You may notice a * in the search URL of the books you add. This is used so that when you search for a word it replaces the star with the word you want to search in the book for. Here are some examples of books you may use.

Book Title: JQuery

Book URL: http://docs.jquery.com/

Use for Mode: Javascript

Search URL: http://docs.jquery.com/Special:Search?ns0=1&amp;search=*&amp;go=Go

Book Title: MySql

Book URL: http://dev.mysql.com/doc/

Use for Mode: SQL

Search URL: http://search.mysql.com/search?q=*&amp;ie=&amp;lr=lang_en

Book Title: PHP

Book URL: http://php.net

Use for Mode: PHP – HTML

Search URL: http://us2.php.net/manual-lookup.php?pattern=*&amp;lang=en

Clips


Coda clips are used to quickly add snippets of code to documents. You can make as many categories and snippets as you like for as many language as you like. To add a clip just go to document under the edit tab and select the clips button from the bottom bar. A darkened window should appear like the one above. To add a category just click the plus sign on the left, and to add a clip within that category just click the plus sign on the right. To edit a coda clip just hover over any clip and click the information(i) button on the right side of the clip. A great resource for web development clips in a variety of languages and platforms is the Coda Clips site.

Sharing

Using a collaboration engine called the Sub-Etha engine, coda can allow users to collaborate with multiple people on the same document at exactly the same time. It’s real time collaboration over a network. So for example, you need help working on some PHP code you’re working on. All you have to do is click the share button on the bottom left of the editor and you can proceed to invite people to view your document. Or, if you feel so willing, you can open it up on a bonjour stream and have multiple people access the file. From there you can see real-time edits from multiple different people on the same document. This can come in handy especially in large offices, instead of wasting time going from office to office to ask questions about a piece of code. Or if you so feel you could also take advantage of a modified eXtreme programming methodology and have multiple people code up the same document from multiple computers.

Summary

Basically, coda can by itself be an extremely useful tool especially for web developers. Using the extra features such as book, clips and sharing coda can help you increase your workflow and productivity in no time. The ability to collaborate with others on the same document in real time is a huge plus especially for fast paced businesses. If you’re using coda, don’t hesitate to take advantage of the features it has to help you work faster!


2 comments

Nov 23 2009

How to become a google wave power user

With Google wave being released recently to a larger and larger user base, it’s becoming a better real time collaboration tool daily. With a larger user base, also comes more and more plugins, bots, and shortcuts to save you time. I’ll go over a few aspects of Google wave that will help decrease the time you spend and increase your results.

First Off, Google wave is a team collaboration tool. By itself, to be honest, Google wave is really kinda useless. However wen used in a team environment it can be an incredibly useful tool to increase productivity and communication. The first tip I’ll give comes with a warning, because it’s not an officially supported browser this method does crash quite a bit more often than say in safari or firefox. Using an application developed by Mozilla called Prism you can actually make Google wave a desktop application to use directly from your desktop. Although you still need a solid internet connection, it can facilitate having to open a browser any time you want to wave. If you’re running Windows, you can even get prism’s Google wave icon to update how many waves have new content on them.

Widgets/Bot’s

Google Syntax highlighter – If you’re a developer this is a must. Syntax highlighting can be one in a couple ways, but as of now I’ve found that the Google Syntax highlighter to be the most stable. It supports a variety of languages and seems to embed well in most waves. The only disadvantage I’ve seen so far is if you have a ton of code to embed, the wave will significantly slow down when editing.

Multi Lingual Bot –  This bot is pretty neat,  especially if you’re dealing with a team that speaks a variety of languages. Basically, all you have to do is add the multi lingual bot to any wave. Once you have the bot added to your wave, just specify the language of your liking using the bot commands, and then voila, watch the wave being translated to the language you chose earlier.

For more information on using widgets and bots, look here.

Organizing your waves

Searches – Google wave offers the ability to perform searches, and also to save the searches. Let’s say you’re working on a project and have a bunch of waves that you want to keep organized. Whenever you create a wave for your project,  just add the name of your project as a tag for that wave. Next perform, and save a search for that tag name and then all your wave’s with that tag will then show up under the search.

Folders – Folders are locations that you can add wave’s to to keep them organized. The only downside to folders is that you cannot dynamically add items to them like you can with searches. To add a wave to a folder,  first create the wave, open the wave and then click on the “…” icon at the top right. You should see a drop down list with “Move to” option. Once you select the “Move to” option, you should see a list of folders you created there.

Keyboard Shortcuts

Spacebar – If a wave that you’re apart of is extremely long an many different people are editing it in different locations then it is extremely difficult to track what changes are happening where. The spacebar helps with that. If you’re not currently editing a wave then you can press the spacebar to scroll through the changes/replies that were made to the wave.

Control – The control key is an extremely useful key in Google wave. By pressing the control key and clicking on a wave, you can open multiple waves at exactly the same time. You can do this as many times as you want, the waves will just keep tiling in the window. Control also has some specific keyboard shortcuts that do specific features when editing a wave.

The keyboard shortcuts help list can be found here.

Summary

Google wave is an extremely useful tool when it comes to real-time team collaboration. Using it more efficiently can not only help you, but also your team.  For more information on Google wave check out Google wave help.

2 comments   |  tags: , | posted in Tutorial, Web