How about them Apples?

Many people know of what is considered to be the most modern and intuitive operating system, Mac OS X.  It’s “Aqua” interface, along with smooth core animation, makes for an extremely pleasing to the eye interface.  OS X also has some features just not found on other operating systems, such as the native dock, spotlight, widgets, and incredible network support.  Although these features are great here and now in 2008, what people do not realize is that the “inspiration” for all of these features dates back to 1989, in the NeXTSTEP Operating System.

NeXTSTEP was created by Steve Jobs, who had left Apple Computers, Inc to start his own company (NeXT Computers). Shortly after the system came to fame, Apple bought NeXT Computers, creating a merger between the two, allowing Steve Jobs to once again be CEO of Apple Computers, Inc (now just Apple Inc.).

Enough history. Now, what you might be saying is, “What does this have to do with web design, Wal*Mart?” Right? Of course you are. Well, anonymous person on the internet, NeXTSTEP is a key factor in what we call the internet today. Without NeXTSTEP, you most likely wouldn’t be reading this right now.  NeXTSTEP is the operating system of choice of Tim Berners-Lee, father of the World Wide Web.  Using the NeXTSTEP environment, Berners-Lee invented the first internet browser, also called WorldWideWeb.  WorldWideWeb was the first software to utilize HTML and, at the time, was the only way of browsing the web.

Perhaps a celebration is in order on February 26th, the date WorldWideWeb was released, creating the web.

About Digg…

            Have you ever found a webpage that seems unknown or under-used and think that many more people could benefit from the site you have found?  The website Digg provides anyone who has signed up the ability to post any interesting news article or website they have found.  

            The system Digg uses is a relatively simple process. A person submits a webpage to Digg and after a short screening process that determines if a duplicate of the page has already been submitted, the article will be approved and become viewable on the Digg website.

            Now that your newfound article is up there for the world to see, viewers have the ability to “digg” the article; the more “diggs” an article has the longer it stays viewable. If a post happens to attain an especially large number of “diggs” the article will appear on the main page, and possibly achieve a ranking on the daily “top stories” list.

            Digg is not only useful for people who want to spread the word about a website; Digg is also a very effective “time-killer” webpage. It is very easy to find yourself lost in a ton of funny or cool websites that the hundreds of daily users have submitted. For example, the top stories on Digg at the moment are “Cartoon Character Skeletons,” “The Best Lego Sets in History,” and “Eleven Personalities Guaranteed to Ruin Your Super Bowl Party.”

It’s del.icio.us

  Recently, I’ve been paying more attention to the “social networking” aspect of the whole Web 2.0 movement.  We’ve all heard about the ”place for friends” type websites such as Myspace or Facebook but I’m more interested in the bookmarking side of social networking.  I was aware for a while of what del.icio.us was but never really spent enough time to find out how I could make it work for me. 

As a webdesign instructor I am always roaming the Internet looking for cool design resources and useful tools that can help my students, and me, create exciting and creative projects.  Since the summer of 2007, when I knew I would be taking over the webdesign program at my school, I’ve amassed a decent collection of links to useful websites that I found thanks to such bookmarking sites as StumbleUpon and Digg.com and simply searching for information on webdesign techniques.   The problem was that I would sometimes be on my personal computer at home and sometimes my laptop that the school system has assigned to me.  Both computers have two or more browsers installed which means that each computer has at least two bookmarks/favorites lists on them.  Often I would find myself looking for a link that I remember bookmarking only to discover that I was on the other computer.  I wanted a way to consolidate all of my bookmarks and have it be accessible no matter where I was.  While mentioning to the the technology specialist at my school that I would love to have this ability he informed me ”that is exactly what del.icio.us was for”.  I created an account and began using del.icio.us for my own personal bookmarks AND bookmarks that I had intended to share with my students.  The list kept getting longer and longer and it became difficult to set aside enough time to share all these wonderful resources and give the students the time to take advantage of them.  It occured to me that the same benefit I was getting by keeping all of my personal bookmarks in one place would work great as a classroom tool as well….so I created del.icio.us/chswebdesign.

With the help of searching the Internet, social bookmarking websites, our school technology specialist and even some of my more net-savy students we are building quite a useful tool that any web design student, or web designer for that matter, can use.  Topics, or tags, in my list encompass many aspects of web design including HTML, CSS, icons, Internet, Dreamweaver, templates, tutorials, Web 2.o, sounds and graphics to name a few.  I hope that my students will find this to be a very useful tool and use it to help themselves understand design and become successful web designers in their own right.

Easily Create “Mad-Libs” with JavaScript

JavaScript is one of the most widely used scripting languages on the entire world wide web. First, you must have an understanding that JavaScript is NOT Java, and the code used in one will not work in the other in most cases. JavaScript is commonly ridiculed as a slow language, due to its lengthy syntax, however once learned, the writing of JavaScript can go pretty fast.

Today we are going to work with JavaScript in order to make our own Mad-Libs game, in which a user will be presented with windows, where they will input text, which will then be put into a premade story with some missing words. Before we start, let’s look at an example: -Example Placeholder Text-

Now that you’ve seen an example of what we are shooting for in this project, start off by writing your initial tags (html, head, title, body) along with their closing tags. Normally, JavaScript is put between the <HEAD> and </HEAD> tags in order to have the script run by the browser before any other code, however, we will ignore that for now and put it directly in between the <BODY> and </BODY> tags.

The first two lines you will type in is as follows:
<script language=”JavaScript” type=”text/javascript”>
<!–
This line alerts the web browser that it needs to interpret the following code as JavaScript and not as HTML. The <!– is used to hide the script from browsers that don’t support JavaScript (although you don’t need it, since MOST browsers now do have support).

Next, you will define your variables. A variable is used to store a piece of data, whether it be text or a number. To create a variable, you simply add this line:
var adjective
“var” is used to define a variable, and as you may have guessed “adjective” is the variable’s name in this case. Variable names can only be used one time each in a script, meaning you cannot have two variables named “adjective”. The exception to this rule is that variable names are CaSe SeNsItIvE, meaning capitalization matters, especially in calling the variable’s contents at a later time. Now create two more variables, named “noun” and “color”. You should now have something that looks like this:
<script language=”JavaScript” type=”text/javascript”>
<!–
var adjective
var noun
var color

Now that you have created three variables, you will want the user to have a way to give values to each. Here comes in the window.prompt command.
adjective=window.prompt(“Please enter an Adjective.”, ” “);
“window.prompt” is used to bring up a window that allows the user to type in data. After window.prompt, you need an opening ( followed by an opening “. After the quote, you put in what you want the user to see as a message for what to put in the box. After the message, you make a closing “. Next, you add in a comma, to show you’re moving to a new attribute, and put ” ” with a blank space in between, in order to leave the next field blank. You will then need to add a closing ) followed by a ;. The semicolon (;) is VERY important, as it let’s the browser know to stop executing that command. Many syntax errors arise from the lack of a semicolon. Your code should now look like this:
<script language=”JavaScript” type=”text/javascript”>
<!–
var adjective
var noun
var color
adjective=window.prompt(“Please enter an Adjective.”, ” “);
noun=window.prompt(“Please enter an Noun.”, ” “);
color=window.prompt(“Please enter a Color.”, ” “);

Finally, we are going to actually WRITE the text that the user put in to the website. This is done very simply:
window.document.write(“<p>There once was a ” + adjective + noun + ” and its favorite color was ” + color + “</p>”);
This is done preferrably on one line. You will use parentheses with quotations, much like the window.prompt command. Inside the quotes, you can put in the bulk of the story, but remember to put in spacing where it is needed. Between each piece of text add a + to add it together. To call in a variable, you simply type in the variable’s name.

Finally, after closing up our tags, our finished code looks like this:
<script language=”JavaScript” type=”text/javascript”>
<!–
var adjective
var noun
var color
adjective=window.prompt(“Please enter an Adjective.”, ” “);
noun=window.prompt(“Please enter an Noun.”, ” “);
color=window.prompt(“Please enter a Color.”, ” “);
window.document.write(“<p>There once was a ” + adjective + noun + ” and its favorite color was ” + color + “</p>”);
–>
</script>

HTML Cake

Ashley from my Web Design 2 class made a cake for an end of year celebration.  I was very impressed but noticed that it was missing a </body> tag.  When I asked her about it she said that her mom was writing out the code Ashley printed for her and realized that something had to go because she was running out of room.  The cake was very good by the way.

Here is what the cake would look like as a webpage.