Now I want to use these pieces we have discussed to make a couple of interactive scripts. We are going to make a VERY simple one person chat script. I know what your thinking, What good is that!? But this is just to give you some examples of using strings with Loops (Control Structures) and POST. (Later on we will be making a REAL chat script)

Start your text editor - you should have SciTE (The Scintilla Text Editor) by now. If not you can find it in Downloads
If not open notepad and type this is into it:

Ok, now save it as "post.php" (or whatever you want) and upload it to your server and run it. You will see a square border around a large box, a small box, and a "submit" button. When you type something into the second box and press "submit" what you entered will be posted to the first box along with what was already there. After posting a couple of things and giving yourself a pat on the back for a job well done, come back and lets go over the code.

First lets look at the starting strings:

If you know HTML, (Which you should, if not read the chapters on HTML Before any more PHP lessons) this is just a simple layout. We make a table with one column and one row and center it in the page.

Next we make the first and ONLY Control Structure - an "if" loop:

This first loop checks to see if something was posted to that page:

If something was posted/set/made/whatever we pull it out an put it in a variable:

(note: we also get the value from "oldtext")

Then we take those values and put them in a form and show it to the user again:

That would end the code that would run.

However, if nothing was posted to the page, i.e. this is the first visit, the "if" would be FALSE and PHP would move on to the "else" statement:

First we would make a form and put the starting text in "oldtext". Then we would make a field called "text" where the user would answer. So now we have TWO values in this form "oldtext" and "text"
(note: this is the same as the other form)

Then all we need to do is print the form to the user and we are done:

Note: I put code below each form so that when you are experimenting with this script you will know which loop has run - "if" or "else".

Note: If you leave the page and come back, what you have entered will be lost because this script is not saving what you post anywhere. It is just passing the value and the old value back to the page every time it is run.

So the COMPLETE CODE is this:

Note: You can download this file below.

Now that we have a functional script lets do something’s to it! First up, did you notice that every time you post something that the "What is your Name?" text moves over more? This is because there is space between the and the "what is your name?" text. and every time you repost the "oldtext" variable you take that space and re-add it to it.

If you aren't following me sorry, I'm not that good at explaining... Anyway, lets fix it!

This is a handy function called "trim" which strips whitespace (or other characters) from the beginning and end of a string. so lets add this to the script:

This will keep the code clean!

Now lets suppose that someone is really bored (and boring) and rather than doing something for this world, they waste their time by trying to take down web sites for no reason. So with this form someone could post some kind of malicious code that might redirect to another site (I am sure you can figure out where) or mess-up our layout or something. So now we are going to add another string function to our code that searches the string for any dangerous PHP or HTML characters and removes them.

Now we trim the code down to the text by removing extra spaces and such with "trim" and then remove any PHP or HTML code that might mess up the page with "strip_tags". What is left is then put in to the variable.

Extra Addons to the code

Now lets add some code that prints how many words were posted back to the user. For this we are going to use the "str_word_count" function. We can also add "strlen" to print out how many characters are in the posted comment.

Here we passed the variable "$newtext" that holds what the user posted to the function str_word_count which then returned the number of word in the variable.

Now we are going to add a function called "ord" that echo’s the first characters ASCII value. This only serves as an example of more things you can to your strings.

This Fun addon will print the users post backwards!

You can also build a bad-word filter to keep your posts clean! For that we can use the function "str_replace" which works like this:

You can add more words to the filter, just put a "," after each one.

Ok, well that is it for this script, but don't worry we will make a real chat script soon enough. However this was good practice using strings and posts.

If you want to do more with this script you can visit PHP.net - Strings for more functions and examples of how to use them.

You can also download the complete "post.php" file below. I incourage you to try to add more things to this script maybe something that makes all of the text entered LOWER CASE.

Attachment	Size
LPF_lesson_11.zip	1.03 KB

I would like to use this lesson to go back over what we have learned about variables, strings, and control structures. If you feel you have mastered these then you are welcome to skip this lesson.

So once again, a variable can be given any of the following values, any of the following ways:

A variable can hold a letter or any number.

Strings hold long "strings" of letters or numbers - like as a sentence. All of the following are strings:

Sentences:

You will be doing a lot with strings so make sure and practice with them on your own so that you know them well.

Control Structures are the logic of the code. Remember that if the "if" is FALSE than PHP while run the "else" statement, but if the "if" is true PHP will ignore the "else" statement.

Remember that these characters dictate the control structure:

">" means "Greater than"



"+" means "Greater than or equal to"

Here are a couple simple ones:

ADVANCED LOOPS:

For "&&" both have to be TRUE for the "if" to be true.
For "||" only one has to be TRUE for the "if" to be true.

Last I would like YOU to try to make your own "if" statements and try making and messing with strings and variables too! Here is a zip archive of the loops, variables, and strings files. Upload them to your own site and experiment changing them. You need to make sure you understand them well.

Fifty years ago, if you turned on your T. V. you would have seen My Three Sons in brilliant black and white. Very few print advertisements went beyond 3-color printing and the internet wasn't even a glimmer in Al Gore's eye. Color, for the graphic designer, was a mere novelty, meant only for the most high-end projects and package design. Color, once too expensive to use whimsically, is now expected for the most part. Black and white has come to represent the high-end and artistic.

Gone also are the days of using color for the simple joy of it. Colors have cultural meaning. You as a designer, have a responsibility to be aware of not only their meanings but their trends.

Lets take for example the current situation in the United States. According to some market researchers, in a time of war, people respond better to a more pastel or whimsical palette. Why? The obvious reason is that, as people fell stress, they are drawn to lighter imagery. The second reason, which every designer in a roundabout way should know already, is contrast. Visiting your favorite news site during a period of turmoil you'll notice the images on the screen are dark, yet vibrant. Dark smoke contrasting the red flames boiling out of a building are harsh, strong images. People genuinely start to filter out those images mentally. The old saying, "You've seen it once, you've seen it a thousand times," truly comes into play. The way to combat this is through a mild palette. Use soft colors on white backgrounds. A great example of this was J.C. Penny's Christmas advertising campaign. Instead of using the typical bright red and green to display their logo, they had light blue snowflakes falling in front of a white background. Then their logo fades in the middle of the screen. Who would of thought, one of the largest retailers in the world, would go against the grain and not use red or green? Essentially, you could call this color branding. Your identity, not necessarily your logo, can be associated with what ever colors the current trend dictates.

Other influences on color preference are social concerns and lifestyle. Pantone, in their article "Capturing the Collective Eye", makes the point that, if someone is interested in an issue or a cause, they may begin to prefer the colors associated with that cause. For instance, an environmentalist may become partial to earth tones such as browns and greens. A gay activist may prefer more lively vibrant colors because a rainbow is used so much in the imagery for the cause. A conservative Christian will learn toward conservative colors such as navy and gray. You may want to consider such factors when designing for a targeted audience.

Color Innuendo

Colors generally carry with them certain documented social overtones. While none preconceived meanings con be considered universal, researchers have found these meanings to be somewhat accurate:

Black:

Meaning: Authority or power and sometimes evil. Darth Vader was black for all these reasons.

White:

Meaning: Purity, sterility or innocence. Brides wear white to imply purity and innocence.

Red:

Meaning: Anger, warning, conflict and love. Red actually can cause an increased heart rate and breathing. Used in some context, it can have a negative effect and in others it can have an affectionate effect.

Blue:

Meaning: Tranquility, peaceful - cold and depressing - noble and loyal. Business suites are often navy because it implies loyalty, while class rooms are often light blue to the blue's calming effect. Musically, it's referred to as "the blues" because the music and the color can have a depressive tone.

Green:

Meaning: Natural, refreshing and fertility. The obvious connection with green is nature, but its use in hospitals is similar to blue in that, green is actually a calming color.

Yellow:

Meaning: Cheerful, optimistic and concentration. Due to yellow's enhancement of concentration and ability to contrast with almost every other color, yellow is often used in road signs.

Purple:

Meaning: Royalty, luxury and romantic. Royals have throughout history been associated with purple due to the fact that it is scarce in nature and money had to be spent to make the dye.

Brown:

Meaning: Solid, reliable and earthy. UPS promotes the color brown in its advertising for this very reason.

Other considerations:

Patriotic colors:

You may consider your target audience's national flag when designing. Different colors are considered patriotic in different countries. If designing a site specifically for another country, yellow may hold no patriotic implications, while green is a color of great pride.

Product:

You may also want to consider the natural colors of the product for which you are designing. Menu designs very rarely contain any blue because blue isn't naturally found very often in most food. For that very reason, blue was the last color to be released by M&M's. People tend to associate earth tones with food. Another example of this is oil/energy companies. Gas stations have a tendency to be refreshing colors such as blue, green or yellow. This is done to counteract the thought of pollution and other environmental issues.

There's more to websites than just images and text. A website is a marketing tool, representing the company, owner, employees and products. Beyond that, it is a personality. A website is a personality? Yes. It portrays a positive or negative symbolism and/or emotion.

In a face-to-face meeting our bodies and faces portray unspoken meanings. We smile, gesture, laugh, and become nervous. It's these little nuances that help us communicate. A website does exactly the same thing. The difference is: a website does it with color. Colors themselves contain a cornucopia of meaning. They can make us happy, sad, angry, comfortable, nervous, and even trusting. While it seems simple enough to choose a graphic and then design a site around that graphic, you may unintentionally be presenting a derogatory impression. The colors may contradict the content in unintended ways.

Colors and their meanings

Green and white work well together, but in Japan a white carnation signifies death, and a green hat in China means a man's wife is cheating on him. A green hat with a white carnation in the brim wouldn't be a good choice for a company logo. However, green is the easiest color on the eye; it has a calming effect, which is why it is most used in hospitals. It relaxes the patients. Different shades of green have different meanings: yellow-greens are the least preferred colors by consumers.

Red has been shown to increase blood pressure and heart rate. People working in a red environment work faster, but they also make more mistakes. It increases appetite, restlessness and nervous tension. Creating a site with bright red and bright blue is a very poor idea! Bright red has the longest wavelength and bright blue has the shortest. When viewing these colors the human lens has to adjust to focus, and it tries to focus on both. This tires the eyes very quickly and will give the viewer a headache.

Websites that contain different shades of blue, or a blue-and-white combination, tend to be more popular. Why? Blue represents calm, stability, hope, wisdom and generosity. People inherently trust blue websites faster. Add blue text and people will retain more information from your site. Combine blue, purple, and white and you have nobility.

Thankfully, you do not see many yellow sites. While yellow can increase concentration, it is the hardest on the eyes. Paint a room yellow and you will make babies cry and adults lose their temper. The number one attention getter, yellow is a very spiritual, eye-catching color, and when used in small amounts it is very inviting and cheerful. Forget blinking animations; just use a small, nicely designed yellow graphic.

Let's talk orange for a minute. As a fruit, I love it. As a color, I don't love it. It always reminds me of Jell-O, and that reminds me that the EEG of Jell-O is the same as the human brain. Orange does have its pluses though. It tends to make more expensive products seem affordable and suitable for everyone, almost like a natural sales pitch. Brighter orange is hard on the eyes and is not recommended for text or background images. Small amounts of bright orange can help create a "fun and interesting" site.

Action and Reaction

Color affects how we feel, our perceptions, and our interactions. A visitor has already made a conscious choice to visit your site, now you have to keep his or her interest. You have between 8 to 10 seconds to visually appeal to the surfer. Through color you can make a surfer feel welcome, comfortable, relaxed, and trusting. If you take existing graphics on a site and change the color, you change the way the site is perceived, thus changing a person's reaction.

Taking a water-based product and placing it on a purple or orange site decreases marketability. Purple and orange are not immediately associated with water or nature and will give the site and product a "false" impression. Placing that same product on a blue or green site will increase the desire for that product. While we naturally associate water with the colors blue and green, not all site designs adhere to this thought process. Sites that are nature related receive better responses when multiple colors of green are used then any other color or combination.

Multi-colored sites, or "rainbow sites," have the lowest visitation time. This is not the case if the site is predominantly white, while displaying only small amounts of various colors. As the multiple colors decrease, the time of visitation increases. Sites aimed at children, such as toy sites, often use a wide range of color to "entertain" the visitor. While this is smart marketing, displaying large quantities of multiple colors decreases the "fun" aspect as the eye tries to focus and concentrate on the overly busy page. A smart rule of thumb when using multiple colors: do not use more than 5 colors, keep them either "warm" or "cool," and make the background white. Fun is more fun when it is easy on the eyes.

Warm and Cool Colors

Warm colors are based on yellows, oranges, browns, yellow-greens, and orange-reds, colors commonly associated with fall or autumn. Generally, warm colors tend to be more exciting and aggressive. Many people prefer them in small doses. Purples and greens are intermediary colors, being either warm or cool, depending on how much red or yellow they contain in relation to blue. If the color contains less blue then it is more likely to be a warm hue.

Cool colors are based on blues, greens, pinks, purples, blue-greens, magentas, and blue-reds, colors more commonly associated with spring and summer. Cool colors are soothing, calming colors and tend to be more popular than warm colors.

Creating a site with a combination of warm and cool colors confuses the viewer. It will often make the site seem busy, dirty, and untrustworthy. Site designers do not always realize that their color combinations are warm and cool. The use of a color wheel can be helpful, as it shows the Primary (red, yellow, and blue) and Secondary (orange, green, and purple) colors. Combining two primary colors creates secondary colors. All colors are made from some combination of white, black, and the primary colors.

What does all of this mean to site designers? If you want your site to be marketable, remember that there is more to it than just graphic placement and text. Every color tells a story, and it may not always fit the one you are trying to portray. In informational design, distinguish functional color from decorative color. Decorative color enhances the layout by making it more aesthetically appealing, creating a mood, or establishing a style. Functional color conveys information explicitly.

Last, but not least, a few rules of thumb

Make sure the choice of colors for a site fits the intended content, and the users' expectations. Never use more colors than are necessary. Do not use colors that do not support or add to the information being displayed. Remain consistent throughout the site with your color choices, and leave the rainbows for rainy days and for chasing pots of gold.

This theme will come with Automatic Thumbnail Picture (it will take the first picture in your post), Valid CSS/XHTML, Widgetized sidebars, Ad space for 125 x 125 px and 468 x 60 px, Social Bookmarking, Gravatar Ready, Compatible with IE7, Firefox 3, Opera and Safari, Compatible with the latest Wordpress and last but not least custom PSD logo file included with the theme file. Option Theme Setting also included at the wordpress dashboard. So it?s will give our theme easy to use and setting.

DEMO | DOWNLOAD | THEME URI

http://www.mezatech.com/