Archive

Archive for November, 2009

The Importance of 2nd Opinion

November 22nd, 2009 Comments off

I have realized that asking people for their critics about my website has been very helpful. Looking at your own website and looking at another’s is a completely different experience. As much as one may want to deny it, there is a bias when looking at your own website. It is your own creation–something you took a lot of time and effort to make. Therefore, looking at your own website may not be as clear as someone else looking at it.

When another person looks at your website, he or she takes it at face value. In other words, their opinion of your website is formulated when they first see your website. It is a more accurate representation of what your website means to the outside world. To you, your website may seem easily navigable, easy on the eyes, and comprehensible. However, after a couple of outside perspectives, you realize that it isn’t the case. This has happened to me on several occasions. I have considered these critiques seriously and made the decision of whether or not to edit my website based on what the person said. At times, I disagreed with the critique. At others, I had a clear realization.

I would advise not to be shy and to show your website to others. The worst that can happen is your website improving. Also, it is important not to take the critiques personally. Although, your website might be a personal project, bristling at criticism will not allow room for growth and improvement. Good luck!

Categories: Uncategorized Tags:

Why Lightbox is Better than Thumbnail!

November 22nd, 2009 Comments off

Lightbox is an easy way to incorporate many different images into a small element on your webpage. Some benefits to having lightbox instead of a thumbnail page include smoother loading and operation on the page. Users can organize and tag their pictures with captions without creating a page that slower connections can’t load quickly. Also in relation to the lightbox page’s operation users can expect viewers to enjoy the added ease-of-use of lightbox to browse full-sized images quickly.

Below is the protocol for integration of lightbox into the code for your page. This is found at http://www.huddletogether.com/projects/lightbox2/#how

[START POST}

How to Use

Part 1 – Setup

  1. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    
  2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
  3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 – Activate

  1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    

    Optional: Use the title attribute if you want to show a caption.

  2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]“>image #1</a>
    <a href=”images/image-2.jpg” rel=”lightbox[roadtrip]“>image #2</a>
    <a href=”images/image-3.jpg” rel=”lightbox[roadtrip]“>image #3</a>
    

    No limits to the number of image sets per page or how many images are allowed in each set. Go nuts

{END POST}

This post is informative because it is the most basic information relating to use of lightbox in a page. Apart from the technical value of the post its highlighted here how unobtrusive lightbox is in the code. Also you can see that all of the images can be loaded from one or many directories if properly tagged with the rel="lightbox" attribute . This presents a clear organizational advantage over thumbnail and embedding methods.

It bears mentioning that for every image you include that hasn’t already been loaded to your page will require you to enter in a new line of code. All the files included in lightbox must be accessable (in the same directory as the .html file.) Also the comment about bracketed [album] tags means that if you write into the code a bracketed title for a group. If properly written into the code the images will appear as a group with the title [Roadtrip!]

Categories: Uncategorized Tags:

Increasing Website Traffic…For Free!

November 22nd, 2009 Comments off

For all you folks out there whose web projects seek a lot of web traffic, here are 8 ways to increase your site visitors!

1) Submit your site to all the major search engines.

2) Submit your site to all the major web directories. This will generate traffic directly from the directories themselves and will also help to improve your link popularity.

3) Keep updating your content. For repeat visits, it is crucial to provide regular updates to the website.

4) Exchange links. Trading links with other websites that are closely related to the subject of your website can bring you more website traffic.

5) Use word of mouth. Tell everyone you know about your website. Trust me, world travels fast when you have something cool to talk about.

6) Become active in bulletin boards and chat rooms focusing on your website’s topic. Leave insightful comments, and people will click on your profile, then visit your site.

7) Improve your search engine ranking by focusing your content on keywords related to your topic.

8) Give free incentives to people that visit your website, such as prizes.

Hope these help!!

Categories: Uncategorized Tags: , , ,

To Use a Template or to Not Use a Template: That is the Question.

November 22nd, 2009 Comments off

Hm.

I don’t know about any of you, but that was MY biggest question this entire semester: Do I want to use a template?  I sat there for a good week or two simply asking myself this over and over (I might sound crazy, but I really did).  I listed all of the pros and cons to each, and ended up with something like this:

Pros to Using a Template:

  1. My website will look awesome.  Some of those templates out there are very professional looking, so my site won’t look “homemade”
  2. It will function well.  I don’t need to be worried about one of my links disappearing or some other crazy thing that I didn’t code correctly.
  3. If I love how it looks, but don’t like something small (like font or color scheme), it’s a really simple fix.

Cons to Using a Template:

  1. Not having total control over everything.  I like to be in charge of my work, and sometimes it’s easier to just make it yourself and not have to mess with a huge part of the template.
  2. Feeling like I wouldn’t learn the in’s and outs of it all.  Would I really remember how to do something if I just made one of the simple changes that I considered one of the positive aspects of the site?
  3. Feeling like I wouldn’t get as much out of it if I didn’t do it myself.

After all of that, I decided to try both.  I searched through the pages of templates to find something I liked, and of course I did.  I loved every aspect about it: the color, the cool widget for a content box, the video in the sidebar, all of it.  But then I sat there and really didn’t feel good about it.  Sure it looked great, and I sat there clicking on my site almost every five minutes just to see it.  It was MY site.

But, when I thought about it more, it really wasn’t mine.

Sure, to an extent it was.  Those wonderful creative commons licenses said it was.  But I didn’t agree.  I tried changing huge aspects of the template to make it feel more like my own creation, but I still didn’t feel comfortable with it.  So, I started looking at tutorial after tutorial to finally make MY website.

After compiling a bunch that gave me a very bare bones wordpress theme (I used one tutorial especially because they didn’t let you copy/paste the PHP.  The author was very adamant that you wrote in each piece yourself, and that’s what I did.  I need to go find it again, but when I do I’ll post it in the bookmark area), I fianlly had something to work with.  Once I got through all of that, I was free to take control of everything.  That video box that I wanted?  I got it.  And I could put it wherever I wanted.  The size of the content area?  The amount of sidebars?  How the entire navigation area looked?  I could change it all.  My site may not look as flashy as the other ones that the templates could have provided, but with a little more work, it can get close!

In no way am I saying that using a template is bad.  I think they are great.  I bet if I knew more about how html and css worked, I would have used one of those and changed it up entirely.  But I personally made it my goal to try to do as much as I could on my own.  I wanted to see what I could do without a template.  Maybe I’m just masochistic, haha.  Who knows.  But I do know now that I have a greater appreciation for my work so far, and a greater appreciation for almost any website I go on now.  Who would have thought that one question would lead me to look at something that seemed so familair in such a different way.

Categories: Uncategorized Tags:

Color Palettes, And How To Make Yours

November 22nd, 2009 Comments off

Probably the most important choice you have to make in the graphic design of your site, after basic layout, it the choice of the color palette. Think back to the 90’s, the age of awful websites, and they all have generically awful graphic design. Tiled backgrounds, contrasting colors (Despite what they tell you in art class, complementary colors are almost always awful when used in large doses. Use a complement only if you’re desperate to draw attention to one part of the site. And please, for the sake of our retinas, don’t use purple and yellow. Ever.), and so on. A good color palette is visually appealing without being obnoxious, and should never distract from the actual content of the site. Subdued colors are usually best, unless the focus of the site is to be striking, in which case high contrast and bright colors are acceptable. Black and white always look good together, especially in artsy sites like photogalleries (With the added benefit that they go well with Lightbox.) but should be avoided for text heavy sites, because too much sustained contrast strains the eyes and impairs reading.

A good way to go about finding a color palette for your site is in reverse; find a picture you love, especially if you plan on using it as our logo or header image, and develop your color palette from that picture. This ensures that your site is not only consistent, but good looking, since a good picture will have a good blend of colors. This can be done manually, or there are sites that can do it for you, my personal preference being the Color Palette Generator.

Good luck with your color choices, and just remember that a poor looking site is almost never likely to be received well, while a good looking one can make up for a lack or brevity of content.

Categories: Uncategorized Tags:

FileZilla (FTP) for Beginners

November 22nd, 2009 Comments off

Transferring files through FileZilla may seem like a simple process to most students, but those of us who spent the most time in the computer lab needed a little extra help with the basics of the program. Although Flavio does an excellent job of explaining the program in lab, I found that I needed quite a bit of practice to finally understand the program.

So because of this, I have decided to create a short FileZilla post about which problems are the most common and how to avoid them.

  1. First of all, the program can be downloaded on your own computer from the Internet and it is free, so that is helpful when considering you will be working with it most every week.
  2. To begin using the site you need your Address, Username, and password. This is the address you created from justhost.com for example, “www.brucehoppe.com.” And the username and password are the information that justhost.com emailed to you.
  3. Next, it is important to understand the layout of the site. On the left side is the information for the “Local Site” or the site you have saved on your computer in, for example, Dreamweaver. You can see exactly what the file name is by looking at the files listed right next to the “Local Site” heading. The file name of your project is important because that is what you must type in to the URL bar when you wish to view your site online.
  • For example, you may think you labeled your site lab6. In this case the correct URL would be         “www.brucehoppe.com/CS103/lab6.html.” However, you may have accidentally labeled the folder twice as lab 6 (in which case it would appear as www.brucehoppe.com/lab6/lab6.html.) And/ or, you may have “unzipped” a template (for example called: Garden), which became part of the filename, making the “Local Site” location in FileZilla appear “www.brucehoppe.com/CS103/lab6/lab6/Garden.html.
  • The lesson from these complications is that you must ALWAYS remain very systematic and accurate in your file naming and know exactly where you are placing your files. Remember to always use lowercase letters and NEVER use spaces.
  1. Next, take a look at the right side of the screen where the “Remote Site” information exists. This is where you will drag the files you have saved on your “Z drive” in your computer and move them to the “public_html” file. Be careful that you choose exactly where you would like to upload the files. By this I mean, do not simply drag them into the “public_html” file but click on this file first and then choose your “CS103” folder, and then make sure you have the lab(#) folder you wish to deliver your new files into.
  2. Let’s say you have finished your Lab 5 and want to upload it to the web. You can right click after you have clicked on “CS103” and then create a new “lab5” folder inside of the CS103 folder in the “Remote Site” portion of FileZilla. The “Remote Site” bar should now say “brucehoppe/com/CS103/lab5.” After this, you drag your “lab5” from the “Local Site” to the “lab5” in the “Remote Site.” This is how you upload a site to the Internet. You can now view your site online.

Problems you may encounter:

  1. A lack of pictures on your site— Everything is in its place on your site except for the pictures, which are not appearing. The solution for this is to drag the “images” folder from the “Local Site” to the “Remote Site.” You probably did not upload this file the first time.
  2. A lack of format in your site— Another problem you may encounter is that you can see the site perfectly when viewing it on your Z drive, but it does not appear in its proper format when you upload it online. The solution to this problem may be that you have not uploaded the template, which is the format for your site.
  3. Your site does not appear when you type in the URL– If your site does not appear when you are writing in the URL you think it should be found out then you have 1.) either not published the site correctly or at all. In this case, review your steps in Filezilla and make sure you transferred the files correctly. Or 2.) you published the site to a different file location. By this I mean that you may have accidentally put it in a different folder than you meant to or added a capital letter where you did not realize, thereby naming the file incorrectly. An easy way to find out where FTP published your site is to look at the bar above the “Remote Site” section. These file names are the directories that the URL must go through to get to your site. The sequence of file names in the bar will tell you the correct URL of your site.
  • For both problems 1 and 2, the solution is file transferring. Everything must be contained and encompassed by your lab(#) folder if you want to drag that specific folder from your “Local Site” to the “Remote Site” of FileZilla. If part of your site is showing up online, the problem is probably that you forgot to drag all of the files that you used in your site.
  • Another tip: Make sure you regularly refresh your FileZilla page to ensure that your updates to both the “Local Site” and “Remote Site” are accurate.

Here is a helpful FileZilla tutorial for further information: http://www.youtube.com/watch?v=yr_u2iKfAt0

Categories: Uncategorized Tags: ,

Creative Navbars

November 22nd, 2009 Comments off

In the process of creating my blog, I realized that I wanted more than a standard navbar to really set my site apart from others. It all centered around this picture I made at wordle. However, I couldn’t get the html tables to fit the picture exactly and I didn’t want to upset the composition of my picture. So I need something else…

I found this tutorial that allows you to create polygons on dreamweaver.

The basic synopsis is this: dreamweaver allows you to create image maps by selecting rectangular or polygonal selector tools you can shape “hotspots” that serve as links.

I’ve used it to create a homepage navbar on my site.

So, if you’re looking for an easy way to create alternative navbars, image maps, and more, I would seriously consider exploring the polygon selectors of dreamweaver.

Building a Credible Blog

November 22nd, 2009 Comments off

These days it seems everyone has an opinion. And with the advent of the blog (taken from the words “web” and “log”) it is now easier than ever to share those opinions. As part of your website, you might want to include  a blog to keep visitors up-to-date on the news and events surrounding your site, or your personal writings. A blog will help attract repeat viewers to your site through its continuous updates. Continuous updates will ensure that your site isn’t something people will look at once then ignore. The big question though, is the issue of establishing a blog that maintains credibility and sustains a viewer’s interest. Here are some tips to help build and maintain a credible blog.

1. Subject and content: The subject and content of your blog should be consistent with your site. For example, my site is a personal site based  on my political observations. I am tryng to attract viewers who are interested in the relationship between politics and the media especially. Therefore, it would not help me to create credibility to mix into my political writings musings about my life unrelated to the subject of the site. While you, the author of the blog, may find your life and the adorable exploits of your new kitten interesting, your viewers came to your site to see your insights on the topic at hand. Remember, your site will never achieve a high indegree unless you can attract people to it, or catch the eye of another influential blogger.

2. Multimedia: In this day and age viewers or visitors to your site expect an immersive experience. Back in the early days of the web, all that technology allowed was a page of simple text set against a basic background. Then, as the internet evolved, new tools and technologies allowed for the addition of new ways to view a site and different ways to add to it. If you are a music blog, try adding a box that cycles through your catalog. Keep in mind, however, that no one likes the Myspace-style auto-start music. If you are a photography blog, a separate section where one may just view photos would be helpful. Also, the advent of Youtube has proven indispensible to the modern web builder. Text may be interesting to the visitors to your blog, but a multimedia, combination experience is sure to enrich your message and help you build credibility.

3. Format: A credible blog shouldn’t look like you are mourning the death of Geocities. Geocities may have once been very popular, but using many flashy graphics and strange, gaudy colors is going to reduce the credibility of your blog. Keep your color scheme simple and use clean lines. Some of the most popular blogs are also the most cleanly laid-out. Use a template if you cannot create a clean layout and remember to incorporate elements from point 2 in your layout.

And most importantly, if you want your blog to have any credibility at all, if you want people to take your writing seriously, proofread. No one will read a blog riddled with grammatical errors and spelling mistakes.

Categories: Uncategorized Tags:

Please don’t bore your audience!

November 21st, 2009 Comments off

When creating a website you want it to be the best it can be right? Of course you do! Well, to start off you would want to ask what is the point of my site? Why am I doing this? The answer of course comes many ways but the optimal one is for people to see it. You want popularity, maybe making up for the lack of it in high school, but nonetheless you want people to see your work. You want to be proud of your crazily amazing skills and you want to flash them off to millions and billions of people (okay, so at least one other person realistically). So, in order to do this you must: try not to bore your audience to death! If they wanted to blandly look at your work then you should write a 30 page academic essay instead. This is your webpage so use that freedom!

Some interesting and possibly key tips are to:

-use pictures! not everything is aesthetically pleasing in words

-use complimentary colors

-do not use too many bizarre and neon colors- you are not trying to blind your audience

-use fonts that humans can read- none of this super small, ‘I need a magnifying glass’ type print, plus you may want to leave cursive style out for the most part

-and on the contrary try not to use obsessively large print- you do want more on your page than just 2 or 3 words

-use your brain- this means that you want your viewer to feel they learned something and not say to themselves “wow why did I just waste my time reading all of this?”

-lastly, HAVE FUN- this is not a medieval torture chamber! you need to be able to like what you’re doing in order to like what you created

Good Luck, and remember your audiences, you don’t want them to have to pack pillows and blankets!

Categories: Uncategorized Tags:

Basic Javascript and a bit of PHP

November 21st, 2009 Comments off

PHP and Javascript are programming languages designed to, when activated, write or alter CSS and HTML code in order to produce an effect.  Javascript is a client-side programming language while PHP is a server-side language, meaning that while Javascript works on your side of the connection on your computer PHP works on the server (what your computer is connected to).

Note: Javascript should not be confused with Java, as they are two very separate programming languages.  Javascript was based on a simplified version of Java, however Java is not an internet-programming language and is much more intricate.

PHP can be written directly in the body or linked to in a separate file in the <head>.  PHP tags look like this: <?php….……?>.

Javascript can also be written directly in the body or a separate file.  One surrounds the Javascript with the tags <script type=”text/javascript”> and </script>.

Comments in both PHP Javascript are written with two slashes: //.  These slashes comment-out the entire line to the right of the slashes.
Examples:    //Hello!
document.write(“Hello!”); //This will write “Hello!”

The most basic thing one can use PHP or Javascript for is to write text.  Both of the codes below will show up on a page looking exactly as though it was written in HTML instead of PHP or Javascript.

Javascript:
<script type=”text/javascript”>
document.write(“I wrote something in Javascript!”);
</script>

PHP:
<?php
$txt=”I wrote something in PHP!”;
echo $txt;
?>

The “$” in PHP signifies a variable.  Both PHP and Javascript use variables to store values, in this case, the text “I wrote something in PHP!”  Variables in Javascript are declared as “var [insert variable name];” Ex: var greeting;

In my project I decided to use Javascript to write a greeting at the top of my page.   Depending on the time of day and the day of the week, my website will greet you with “Happy Thursday morning!” or “Happy Saturday night!”  For this I used If…Else statements.  If…Else statements are rather straightforward: If X is true, do this, Else do that.  Additionally I used Case statements; if this is case 1, do this, if this is case 2, do that, etc.

At the top of my script I declared variables for the date, time, and day.  As a sidenote, in order to add CSS tags on the Javascript code (to make my text readable on the page and not black-on-default-black) I had to add “document.write(“<h3>”); at the top and document.write(“</h3>”); at the bottom.

My resulting script looks like this:

var d=new Date();

var theTime=d.getHours();

theDay=d.getDay();

document.write(“<h3>”);

switch (theDay)
{
case 0:
document.write(“Happy Sunday”);
break;
case 1:
document.write(“Happy Monday”);
break;
case 2:
document.write(“Happy Tuesday”);
break;
case 3:
document.write(“Happy Wednesday”);
break;
case 4:
document.write(“Happy Thursday”);
break;
case 5:
document.write(“Happy Friday”);
break;
case 6:
document.write(“Happy Saturday”);
}

if (theTime < 10)
document.write(” morning!”);
else if ((theTime >= 10) && (theTime < 14))
document.write(” lunchtime!”);
else if ((theTime > 14) && (theTime < 17))
document.write(” evening!”);
else
document.write(” night!”);

document.write(“</h3>”);

For much more detailed information on PHP or Javascript, search for them on the w3schools website: http://www.w3schools.com/

Happy coding!

Categories: Uncategorized Tags: ,