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: ,

Adding a Favicon to your site

November 18th, 2009 Comments off

Everyone might not be familiar with the term favicon, but we all know what they are. They are the little symbol at the top of the browser or the tab next to the title. Facebook has the “f” inside a blue box, g-mail has the red outlined envelope and web whompers has the red circles and blue squares. While you may not think its important, it is a way to get an audience more familiar and attached to your site. Just like when we see a swoosh we think Nike, when people see your favicon their mind will immediately travel to your site.

You can either download the free program Irfanview for creating your favicon or do it a much more simple way by visiting a site such as  this . Make a really simple image file (look at how small the favicons you see are, you don’t want it to be over-complicated or you’ll lose detail and it will just wind up looking like a jumbled mess.

Follow the steps on the website, select the file you created (paint is fine for creating these files, save it as a GIF or PNG if you are capable of doing so). Use the site to generate the icon, then preview it to make sure that you do not need to make any further adjustments and you are happy with your image.

Save the newly generated icon to your computer. It should ideally be 4k or less.

Go to your cpanel and put the file that you have now saved onto your computer into the root directory.

Go into the hmtl code editor and insert a line like this

<link rel=”shortcut icon” href=”http://www.yourcs103websitehere.com/favicon.ico” type=”image/x-icon”/>

into the header portion of your code.

At this point your favicon should be on your website, so visit it to check it out. Don’t be alarmed if it doesn’t show up at first, particularly if you are using firefox. Instead do a hard refresh (F5) and firefox should stop being a lame-lazy-know -it-all-browser at that point and display your favicon.

Categories: Uncategorized Tags: , , ,

How to add Video to your website

November 15th, 2009 Comments off

Videos are a great way to liven up your website and attract more traffic–they present information in an interesting way and break up text-heavy content! I have found that uploading videos first onto youtube and then embedding them into the html of my web page is the easiest way.

Here’s a guide on how to upload and post videos on your website via youtube:

Part 1: How to upload a video to youtube

1. Create an account on youtube.

2. Click “Upload” on the homepage and enter a title, description, and tags for your video.

3. Select a category and click “Browse” to upload your video.

4. Select your video file and click “Upload Video.”

Part 2: How to embed a youtube video into your website

Note: Here, embedding is the action of inserting a youtube video into your website through html code.

1. Find your video on youtube.

2. Locate the “embed” section to the right of the video–it is below the description and the “url” section.

3. Below the “embed” section are three options: “Include related videos,” “Show Border,” and “Enable privacy-enhanced mode.” Click the box for each of the settings you want.

Note: Youtube uses “cookies”–pieces of information about the web user stored on the user’s computer and sent back to youtube–to gather user data. The privacy-enhanced mode setting allows web builders to restrict youtube’s use of cookies to users that playback the videos, rather than users who visit without watching the youtube videos.

4. Select and copy the text of the “embed” section.

5. Paste the text into the html of your web page in the location you would like the video to appear.

*Visit http://www.tips4pc.com/Youtube/how_to_embed_a_youtube_video_into_your_website.htm for a visual of this process and an example of the html text.

And, you’re done!

Adding videos to your website is pretty easy–and it improves your website.

Here’s a link on how to create and upload optimal videos to youtube: http://www.youtube.com/t/howto_makevideo

Categories: Uncategorized Tags: , ,

The Do’s and Don’t(s) of Flash

November 15th, 2009 Comments off

So as we all know, Lab 8 introduces CS 103 students to Flash. Macromedia Flash has had a presence on the web for quite some time now. It can be used to handle anything as simple as interactive banners, or video games. As a child, I always use to go to Flash oriented sites to have my fill in video games. But what happens when Flash goes wrong? Have you ever been to a website that just takes TOO long to load? With today’s internet speeds, that happens less and less; but just in case, here are some do’s and dont’s of Flash.

To Do…

Flash designs make pages look good. There is absolutely no denying that. I encourage you guys to use it depending on the purpose of your website.

Use Flash where it would likely matter the most, i.e. on your home page. This captures the viewers attention as soon as they type in your URL (and it finishes loading :-D) Perhaps they may be inspired to look deeper into your website.

Flash signifies a new trend of technology. You wouldn’t want web viewers to see a plain HTML website with a few colors. This ties back to the idea of Content that we learned recently. Use Flash as a filler for your websites content.

Not to Do…

Depending on the type of website that a person is viewing, Flash can actually be a nuisance. Avoid using Flash if you expect to be linking to a lot of websites, as this can cause clutters of information that is not necessary.

If you intend on making a website of entirely Flash, remember that a lot of Flash doesn’t really go well with a lot of text. Try to choose one or the other. It helps

Lastly, remember that FLASH TAKES LONGER TO LOAD. This may not necessarily be a problem for users with fast internet connections, but be mindful that not everyone is blessed with hi-speed. People may get impatient and you may end up losing viewers as opposed to gaining them. That being said, try not to use massive amounts of Flash if you are looking for attention. There are plenty of other ways to make your website look good.

Hope this Helps!

Photoscape: user-friendly/free/fun photo editor

November 15th, 2009 Comments off

http://www.photoscape.org/ps/main/index.php

I found this awesome editor a couple years ago and have not stopped using it since. Unsurprisingly, I have used this editor to edit photos on my website.  It is extremely easy to use, available at no cost, full of cool features, and more. This is a great alternative to Photoshop. Personally, I found Photoshop a bit overwhelmingly complicated.

Photoscape has the basic tools such as brighten/contrast, crop, etc. It also has a ton of fun filters and features to use on your photos. One great feature is the batch editor which edits multiple photos in batches. Also, I use the Page feature on many occasions. This effortlessly merges multiple photos into one photo. Animated GIF  is also another interesting feature which animates multiple photos to make one animated one. This free editor is a lot of fun to experiment and play around with. Try it out!

Categories: Uncategorized Tags:

GIMP: The free, open-source photoshop

November 15th, 2009 Comments off

Everyone knows that Photoshop is the go-to program for editing images, but since most of us can’t afford the $600 price tag, we are forced to look for alternative options.

Enter GIMP, the open-source alternative photoshop. It can process layers, use filters, has a magic wand, and can even open and save in standard photoshop filetypes (a disclaimer: messing with the color balance and so-on can sometimes mess up integration between the two programs, so back up your pictures occasionally ^_^)

GIMP is useful for both smaller modifications, as well as wholesale image creation and so forth. Some of it’s interface is less polished than photoshop, but that is to be expected in a free program, and the learning curve between the two systems is minimal. I used it to create small modifications to the logo image from my template, and to create the color scheme for the site, and it all worked perfectly well.

Just head on over to http://www.gimp.org/ and give it a try, you might become a convert, who knows

Categories: Uncategorized Tags: