Create Your Own Forms!

Earlier, I mentioned that you could use JavaScript to interact with forms created in HTML. “What are forms?” you may ask. Well, you just used one to log into WordPress. They’re those awesome little input/output boxes that let you talk directly to your web page (or someone else’s web page). Without forms, your web experience would be one-sided and ultimately boring. Today, we’ll quickly introduce forms by taking  a look at the Gmail login page.

Gmail Login Prompt

Below is a snippet from the source code of gmail’s login page. Clearly, I’ve removed some of the error checking and privacy settings, but the real purpose of the login page remains.

<form>             

     <label>

            <strong class=”email-label”>Username</strong>

             <input type=”text” spellcheck=”false”  name=”Email” id=”Email” value=””>

     </label>

     <label>

              <strong class=”passwd-label”>Password</strong>

              <input type=”password” name=”Passwd” id=”Passwd”>

     </label>

</form>

If any or all of it is confusing, hang in there. It’s much less complex than it appears. Let’s break it down.

We already know that any object in an HTML page, whether it be a paragraph, list, etc. requires an opening and a closing, denoted by and .  The case with forms is no different. Although, notice that we can group forms together into one form and give each unique object a different name, which can be referenced in JavaScript. Each unique text form within the larger form is created within a <label> object, which allows the text box form to be selected either by clicking the label title or by clicking the text box form itself. Take the gmail login page as an example: If you click on the text “Username” or “Password,” their corresponding text box is highlighted, just as if you were to click the text box itself.

Each label also has a few attributes that have been given, like the class name (“passwod-label” and “email-label”), input type(“text” or “password,” which censors the text you enter), and the name and id (“Passwd” and “Email,” which will allow us to reference the forms in JavaScript). It is also worth noting that the form type could easily be changed to a button, checkbox or submit button (like the “Sign In” button) by changing the type to equal something else (e.g. type=”button”). Form is just a general term that refers to objects in a web page which are interactive.

Now that the HTML code has been established, we can reference them within a couple <script> tags in the source code. In the code below, we perform the simple operation of getting the text from each text box and saving them to a variable.

<script>

      function printEmail(form) {

           var text = form.Email.value;

           alert(“Email: ” + text);

      }

</script>

This basic script creates a function which takes a form as a parameter, gets the value typed into the form (using the form Class) and creates an alert which will pop up on the screen and print the message “Email: stuffYouTyped.” In order for it to actually pop up on the screen, we have to reference the function somewhere. To keep things relatively simple, we’ll just create a simple button form below our text forms and call the printEmail() function every time the button is clicked.

         <input type=”button” name=”button1″ value=”Display Email” onClick=”printEmail(this.form)”>

Essentially, we’ve created a button, named it, given it a value (which will show up as a label for the button as in the “Sign In” button), and called our function printEmail() whenever the button is clicked. The onClick is just a feature of HTML that lets us reference our script from within HTML tags. It’s what gives your JavaScript and HTML the ability and desire to talk to each other, and good communication is essential for any relationship. Am I right? The printEmail function created earlier takes in a form as a parameter, and for this reason, we have to use the reference “this.form,” which is a simple as it appears to be. It refers to the form which is calling the function printEmail(). Now, every time you click button1, your web page will display an alert which will print whatever is entered into the Email text box. Congratulations, JavaScript has just breathed life into your web page.

Ok, so maybe it’s not all that simple, but I promise it gets easier with practice. JavaScript has the potential to make your web page interactive and unique, not to mention downright nifty. Spend a little time with it and you’ll be coding in no time.


		

Embedding JavaScript

One of the great features of JavaScript is that you can pop it directly in your .html file using a few simple tags. While you can write your web page HTML code in notepad or any word processing application, notepad++ makes everything easier. It will  align your code, tell you when you’re doing something stupid or even if you are forgetting a tag or two. It’s magical, but you don’t need it to start coding in JavaScript.

So let’s get started. I’m going to assume that you already know what a generic HTML page looks like. By adding the <script> opening and closing tabs, as seen below, you can embed your code right in the file. When any new web browser attempts to set up your web page as you described it with HTML and CSS it will also start whatever task you set your JavaScript program to complete.

<html>
        <body>

                <script type=”text/javascript”>

                               document.write(“Hello World!”);
                 </script>

          </body>
</html>

Here, the tag <script type=”text/javascript”> tells the web browser that you are about to write some JavaScript and the </script> tag tells it to continue reading the HTML. The crazy looking statement in the middle is called a function. A function is basically a small program that takes some data (in this case, the data is “Hello World!”), and then does some task. In this case, the task is writing to the web page. The word “document” in this case refers to a collection, called a Class of functions, which are understood and executed by web browsers. One of the functions within the document Class is the write() function. The dot ( . ) operator allows us to use any function within that Class.

The code above will write “Hello World!” to a blank web page and display it for the user. You may be thinking, why not just do that in a paragraph tag? Well, we could have the statement appear only when an incorrect password was entered into a form or as a response when Hello was entered into a form. We’ll get into that later. For now, work on grasping the concept of a function. Can you think of any reason why forms in HTML can be named with a unique ID?


The Wonderful World of JavaScript

I don’t always code in scripting languages, but when I do, I prefer JavaScript…just kidding. I never code in scripting languages, but hey, this could be a learning experience for everyone involved.

Essentially, JavaScript was created for web developers who wanted a more interactive and dynamic experience from their pet pages, and it’s not hard to imagine why it came so early in the game. Web pages at that point were great for loading content and getting commercial information to the public, but they had nowhere near the kind of interactive capabilities that we take for granted today. Want to load a few images client-side? Fuggeddaboutit. Maybe your page needs to manage a few user accounts? Fuggeddaboutit. Without a little scripting magic, your webpage will be dead to anyone but the server. Don’t let your page become another statistic.

If you’ve never programmed before, have no fear. Programming for any rationally thinking person is just a natural process of breaking large problems into more manageable ones, and if irrational thinking is more your style, not to worry; JavaScript has a place for you as well. Coding can be a structured professional skill, a creative outlet or even an awesome new drinking game to play with your friends, see graph below. You don’t have to be a computer mastermind to write a little JavaScript. In the next few weeks, I’ll introduce a few concepts of programming as well as some essentials for coding in JavaScript.

Ballmer Peak


Photography: Design Elements & Examples

The Newseum, located in Washington, DC, is home to the Pulitzer Prize Photographs Gallery.  This gallery features some of the most iconic images in history:

From Old Glory being raised over Iwo Jima

 

 

 

 

 

 

 

 

To a lonely photo of two US presidents

 

 

 

 

 

 

 

 

 

 

To a shocking portrait of the Ethiopian famine.

 

 

 

 

 

 

 

 

 

 

It is the emotion captured by these photographs that makes them so truly great, yet each image also contains specific design elements that draw attention to the subject at hand. For example, in the Iwo Jima photo, the use of negative space in the background highlights the action in the foreground. In the presidential photograph, the two figures take up only about a third of the left-hand side of the image, following the compositional rule of thirds.  And the Ethiopian portrait has been closely-cropped to draw complete focus on the two subjects in the photograph.

With these three photographs, we have illustrated the way negative space, the rule of thirds, and the power of the crop create powerful images.  What other design elements are good to keep in mind when taking photos?

  • Balance: using elements in the background or foreground to avoid having too much negative space in a composition
  • Viewpoint: choosing the best angle and/or distance to shoot the picture from
  • Framing: using surrounding elements to create a border around the subject of the composition

For more rules of composition and examples of the rules listed above, check out: Photographymad.com. And for a closer look at several featured Pulitzer Prize Winning photographs, make sure to visit the Newseum’s Online Gallery.


Changing Colors in Photoshop- A Basic Tutorial

This tutorial will show you how to change the color of certain parts of your photos.  For example, in the picture that I will be using as a demonstration, the girl’s dress color is magenta but I want to make it a deeper plum color. To do that I will begin by opening the file in Photoshop.

Once you have successfully opened the photo you wish to edit in Photoshop you are ready to begin the editing process!

Step 1: On the left side of the screen in the toolbox side bar find the Magic Wand Tool and click on it. Go to the top of the screen and make sure the Tolerance level is set to 35.

Step 2: Using the wand tool, select the region of your photo that you wish to change. For my example, I am changing the dress color so I will select the dress bodice. At first the wand tool will select only partial sections of the image so you will need to hold the Shift key to allow for additional selections to be added to the whole selection. If you accidentally select something you do not want, hold the Option/Alt key and click the selection that is unwanted for it to become unselected.

Step 3: To make sure all of the dress is selected you can zoom in on the image. To zoom in, simply click Command and the + buttons. To zoom out, hold Command and the – buttons. Once you are zoomed in on your image make sure you reset the Tolerance level to around 20 to allow for better selection. Don’t forget to continue holding the Shift key while selecting!

Step 4: Once you are satisfied with your selection you are ready to adjust the color. There are a few ways to adjust the color but for this example we are going to darken the dress color through the Brightness/Contrast tool. On the top toolbar select Image, then Adjustments, and then Brightness/Contrast. In this panel make sure the Preview box is selected so you can see the adjustments happening to your image. Fuss with the Brightness and Contrast controls until you find the color and contrast you think looks best. Then click OK once you are satisfied with how the color looks.

Step 5: SAVE AS! Don’t forget to “save as” your image. You don’t want to save over your original. Here you can see the comparison of the before and after photo.

Voila! Now I have what looks like an entirely different dress. This method can be used for many different things besides clothing, like skin color for example. Have fun experimenting!


DIY Collaboratory

Hey Media Makers-

This is where you’ll be sharing technical how-to info, interesting digital examples, and your own insights and analyses throughout the semester. Be sure to appropriately tag each of your posts. To read more about your responsibilities for the course blog, click here.