Wed 12- 19 : website design topics

For our today's assignment, I would like you to send me a topic which you would like to include as part of an overall website which you are going to develop. The topic must naturally be school appropriate, and once you have sent it, you must spend the remainder of this class doing either of the following:

A) Making up assignments which you have missed thus far

OR

B) If you have nothing due, begin working on your website...start gathering images, writing down ideas, setting up blank webpages to be filled later, etc etc


cheers,
Mr. L

Monday 12-17 : HTML design day 3 part 5

OK, so now you know how to make DIV containers, and you can make their borders change in response to mouse events. You can also make a DIV act as a hyperlink. Now its time to do the following:


A) Make six more DIVs, all lined up in a nice neat column by changing their "top" values

B) Give each DIV a name of a website...just the name, not the .com and all that other stuff


C) Make each DIV a hyperlink to that website, as I have already shown you

D) Apply a style to ALL NINE of your DIV containers at once by creating a "stylesheet", like so:

E) PLease note, you DO NOT ADD A NEW "head" tag... its already there!

SAVE, then REFRESH your browser to see your changes. Make sure it all works!


Cheers,
Mr. L

Monday 12-17: day3 in HTML design part 4

OK, now it's time to get serious: make borders change is OK, but what about making this DIV actually DO something? All righty then, since you asked so insistently, let's make it happen!

Try this on for size:

A) Click at the end of ONMOUSEOUT  = "this.style.border = 'solid'  "

in your FIRST DIV container

B) Hit the "Return" key

C) then type in this code:

ONCLICK  = "window.location = 'http://www.thinkgeek.com'  "

D) Again, I cannot emphasize enough, be VERY careful about where you type the single quotes versus the double quotes, as it makes a big difference

E) SAVE your code, REFRESH your browser, then see what happens when you click that DIV. Do you go to another website?

F) You might want to change the text of that DIV to the name of the website you're heading to. You might also want to add this code:

text-align : center

into the style of your DIVs. It'll make the text inside these DIVs line up nice and neat :-)

G) Apply similar changes to your other two DIVs. See which websites you can get to using this method

cheers,
Mr. L

Monday 12 -17: day3 in HTML design part 3

Now that you have set up your DIVs, I would like you to apply some event handlers to them. If you recall, an event handler makes it possible for various parts of your webpage to respond to events that take place. In this case, the events we are going to handle will be:

ONMOUSEOVER
ONMOUSEOUT

Here is what you need to do


A) Get back into your code

B) click right after where it says  top:10"  but BEFORE the little pointy thing

C) Hit Enter (Oh wait, its a Mac, hit the Return key)

D) on the next line, type in these two lines of code:


ONMOUSEOVER = "this.style.border = 'dashed'  "
ONMOUSEOUT  = "this.style.border = 'solid'  "

E) Please be extremely careful about yping in the single quotes vs the double quotes. Does it make a difference? Yer darned tootin' it makes a difference!

F) SAVE your code, REFRESH your browser, see what happens when you put the mouse arrow over that first DIV. If it works, the border should change when you put the mouse arrow over it, then change back when you pull the mouse arrow away

G) Once it works, you can apply a similar change to your other DIVs. There are many border styles available, including:

dotted
double
dot-dash
groove
ridge
inset
outset
wave
dot-dot-dash

I haven't checked them all out in every browser out there, but they mostly should most of the time work

Cheers,
Mr. L

Monday 12 -17: day3 in HTML design part 2

For our next step into HTML excellence, we will be looking at a webpage component called DIV. A DIV is so useful that it can hold text or images or both; it can have styles applied to it; it can even be used to create some really cranking hyperlinks

Its so important that I am going to have you create a brand new webpage just for DIVs. When you create this webpage, please name it after yourself plus the word DIV. For example, in my cases, it would be called "PaulDIV.html"

Here is the initial code I would like you type in:

I would like you to make note of the following:

A) These DIV containers have almost exactly the same styles... this will be very important in the not too distant future

B) There is a new style called "border". The kind of border you chose here makes a solid black line all around the edge of your DIV

C) There is another new style called "cursor"  This style makes the mouse arrow turn into a hand when it passes over the DIV

D) You will also notice that all these DIVs have width and height styles, to make them all the same size

When you're ready, we will move on with this

cheers,
Mr. L

Monday 12 -17: day3 in HTML design part 1

It is very much possible to create webpages that are "dynamic", that its, they change what they do or how they look in response to something that happens. The thing that happens is called an "event handler"; here are some examples of this:

onload -- when the webpage loads into the browser
onunload -- when the browser leaves the webpage
onmouseover -- when the mouse arrow goes over something
onmouseout -- when the mouse arrow is no longer over something
onmousedown -- when the mouse button is pressed
onmouseup -- when the mouse button is released
onclick  -- when the mouse button is pressed then released


After the event handler takes place, there has to be some kind of action in response to it. The simplest kind of response is called an "alert" -- its a simple dialog box that pops up which has a message on it 


So let's try doing something like this:

Please understand, this is not a new paragraph container you are making; just use one of the ones you already have. Just don't get this new code mangled up with code you already have. AND, be very careful to put in the proper type of quotes...it absolutely matter whether you type in a '  versus a "


If you get that to work, let's try some other types of events, each time using an alert as being the response to that event. For example, try this:

This will make an alert message pop up when this webpage is loaded into the browser.

Try at least four other types of alerts. See what you can get to happen. Please be SCHOOL APPROPRIATE

cheers,
Mr. L

Thursday 12 -11: day2 in HTML design part five

Hmmmmmmmmm, just wondering : will "absolute positioning" work for paragraph containers. I say, make sure you find out. Like, right now

cheers,
Mr. L

Thursday 12 -11: day2 in HTML design part four

Now that you know how to create some inline images, its time to take your images to the next level of style. In this case, the style you apply will be for "positioning" --- you can make your images go wherever you like. Here's how you do that:

Change this code

To look something like this

Please note that you do not have to wrap your code to the next line...it just happened that way when I was trying to fit this code onto the blog


Make sure it works, then apply similar positioning styles to all your other images

cheers,
Mr. L

Thursday 12 -11: day2 in HTML design part three

OK, so now you know how to make image backgrounds fro your webpages. The next step is to make "inline" images --- images that are part of the webpage, not part of its background. Here is what you need to do


A) Use TextEdit to open another one of your new webpages

B) Somewhere between the first and the second BODY tag, type in something like the following:

C) Again, if you have a picture that is NOT a walrus, you would naturally type in the actual filename, as well as the file extension

D) SAVE your code, REFRESH your browser, see if it worked

E) If it did, you will need to add at least three more images on that webpage

F) You will also need to add at least four images on yet another webpage

G) Make sure they all display properly

Cheers,
Mr. L

PS You may have noticed: you have to have your images in the same folder as your webpages. Just sayin'  :-)

Thursday 12 -11: day2 in HTML design part two

OK, now that you have gotten the preps out of the way, it's time to get down to business. The first thing we're going to do is to set up some background images for at least two of your webpages. For this, you will need two things:

A) Some images that work well as backgrounds. If you're already set with that, well that's just AWESOME. However, if you need some images, I have a bunch that I have gathered 

HERE

I made these images in two different programs, one called REPTILE, the other a fractal generating program called CHAOS PRO. I would have loved to get these programs installed here, but unfortunately, they only work on PCs. Oh well. Just download a bunch, so you have 'em handy.

Ready? OK, here's the next step:


B)   In TextEdit, change your first "Body" tag to look something like this

C) Naturally, if you chose another image file, you use that image's filename. Notice that you also have to include the file "extension".....  .jpg, .jpeg, .gif, .png,   whatever it is

D) In any event, save your work then open that second page in your browser to see if it worked

E) If it did, then apply a similar change to at least one of your other webpages. Make sure it works too  :-)

cheers,
Mr. L

Thursday 12 -11: day2 in HTML design part one

Greetings, mighty web designers!

Today, before we begin, you will need to make the following preparations:

A) create a folder for your webpages -- both the one you have already created, as well as those you are going to create

B) Move the webpage from the other day into that folder

C) Get inside that folder and make ONE copy of that first webpage (If you need help with that, gimme a shout)

D) Rename that file to read "page 2"

E) Start up TextEdit, and then use it to open this "page 2"

F) ONLY ON PAGE 2 --- strip out all the code you added to your basic webpage the other day, until it looks something like this

G) Save your work, then get back into the folder, and make four copies of page 2

H) Rename them to Page 3, Page 4, Page 5, Page 6

OK, once you get to that point, you will be ready to rock and roll

cheers,
Mr. L 

Tuesday 12 -11: first day in HTML design part seven

OK, so now you know how to add text and styles and format all your words and make 'em nice and pretty. Now it's time to reach out to the universe beyond this classroom. Here's how we will do that:


A) Get back into one of your paragraphs, just above the last  /p

B) type in the following code:

C) Make sure it works...if it does, it will pop up the thinkgeek website in a separate browser window

D) Make sure it works

E) When it does, add at least six other websites, for a total of seven

F) After you are finished, make sure that either upload this new webpage of yours to Box.com, or email it to me as an attachment file

cheers,
Mr. L

Tuesday 12 -11: first day in HTML design part six

OK, so now you know how to add some paragraph containers, some lists, some lyrics, and so on. Now it's time to make your letters a little more lively. Here's what to do:

A) get back into your code, and change any one of your paragraph containers to look something like this

B) Naturally, choose any font you like, and any size; I was just suggesting after all

C) Apply some different "styles" to your other two paragraphs. Go on, live a little!

cheers,
Mr. L

Tuesday 12 -11: first day in HTML design part five

You may have noticed that when you made your list in one of your paragraph containers, that the list items didn't line up in a column. There's a way to fix that, and here it is

Naturally, you would write in next to each "LI" each item for your list. In fact that's what LI stands for --  "list item"......   UL stands for Unordered List

Tuesday 12 -11: first day in HTML design part four

Webpages have many different components, and believe me, we're going to try to make use of every one of them. Our next component is called a "paragraph" container...it's used to hold text and such. It's easy to create and modify, so we're going to create several of them. Here is what you'll need to do:

A)  You'll need to get back into your code and then get between the first "body" tag and the second one

B) type in the following code:

C)  save your work, then refresh your browser, and see if your paragraphs have shown up

D)  If they have, then what you will need to do is add some actual text to each one.

E) In the first paragraph, type up a list of eleven "toys" you'd like to see invented

F) In the second paragraph container, type up eight predictions for the upcoming year ... one complete sentence for each 

G) In the third paragraph, type in the lyrics of a song or poem which you like..... it must be SCHOOL APPROPRIATE

H) save your work, then refresh your browser, and see what you get


cheers,
Mr. L

Tuesday 12 -11: first day in HTML design part three

There are many different aspects of website design. Now that you've made your first webpage, it's time to add some mods. Let's start with a simple one: background color. Here is what you do:


change this tag:

<body>

to look like this

<body  bgcolor = "FF0000 ">

bgcolor is all one word...it stands for background color

it is set equal to two Fs followed by four zeroes

This code will make your page turn red

Why? Simple: because it uses the "RGB" color system (which combines mixtures of red, green and blue)  in conjunction with the hexadecimal color system, where the numbers 0 - 9 and the letters A - F to create upwards of 16 million different colors. The first two letters or numbers are for the red values, while the first two zeroes are for green, while the last two zeroes are for blue.

It's easy enough to change the values: there's even a website that can help you find just the right color, AND generate the hex value you need. It's right here:

http://www.colorpicker.com/

Good luck, and get your background color the way you want it!

cheers,
Mr. L

Tuesday 12 -11: first day in HTML design part two

OK,now that you have your TextEdit program properly set up  -- or so we hope -- its time to code your first page. so without any further ado, type this up in TextEdit:

Save the resulting file with your first name followed by a "." followed by "html"
PLEASE SAVE THE FILE ON YOUR DESKTOP

DO NOT close TextEdit...leave it open

You DO want to start up a browser such as Chrome, Safari, whatever we got handy. Then use the "Open File" command to navigate to the webpage you made, and see if it works. 

OR, if you saved the html file on your desktop like I just asked, you can double click on it, then say "YES" to opening the file

If it worked, my congratulations: as Obi Wan once said, you've taken your first step into a larger universe. If not, then let's make it work :-)

Cheers,
Mr. L

Tuesday 12 -11: first day in HTML design

Salutations, and goody good morning to you all!

Today, we are going to begin a new topic in this course: web design. More specifically, it will be web design using raw HTML code. It's actually pretty simple to do, and there's lots and lots of cool stuff that can be accomplished using these techniques.

But first, we have to set up the tools which we will use to accomplish this goal.

When creating webpages from pure code, the only essential tools are:

A) a simple text editor

B) a browser to look at the result of your work

We already have our choice of browsers; and, we have a simple text editor on your machines called "TextEdit". But before we can begin coding, we have to configure this program to do what it is we want it to do.

So let's get this program set up, shall we ? Here is what to do


1. Open TextEdit. 
2. Choose Preferences from the TextEdit application menu. 
3. In the "New Document" tab, click the radio button for "Plain Text" 
4. In the Open and Save tab, click the checkbox to turn on "Ignore rich text commands in HTML files."
5. Close the Preferences window
6. Close your TextEdit window
7. Shut down then re-start TextEdit


Once this is done, the next step should work perfectly :-)

cheers,
Mr. L

Monday 12 -10: transferring your slideshows to Prezi

Now for task # 2: online slideshows. In the time remaining after finishing your Libre presentation file, I would like you to do the following to begin creating an online version of your presentation. Here is what you need to do:

A) goto http://prezi.com/

B) Prezi is a site where you can create some fairly amazing presentations. You begin by setting up an account... in this case, I would suggest a free account. You then enter your relevant information, like so:

C) Your next step after you have joined is to go on and create a new Prezi, by clicking on the button which says just exactly that:

D) Once you have begun a new Prezi, you can choose a template. There are many different kinds, but I have chosen the "Explain a Topic" template since this  fits in with what we have been doing

E) Once you choose a topic, you can start editing, ie adding content such as text, images, sound, motion, etc etc

F) When you begin editing, you can add your content to any "frame" which is their term for slide. 

G) when you are finished -- or at least before the end of the class  -- you will need to send me the link your prezi. You do this by first clicking the "Invite Others" button at the top of the screen

After which you choose the menuitem that says "Share"

At which point you will be presented with a website link that you can send to me by email

Please do so, and put both your name and the word "prezi link" in the subject line. Put the link itself in the main body of your email


cheers,
Mr. L

Monday 12 -10: finishing up your slideshows

Greetings children, and welcome back!

Today, there are two basic tasks to complete. The first is the subject of this post.

Quite simply, what you need to do is to 

FINISH YOUR SLIDESHOW

and then upload it to me at Box.com. If you cannot remember what exactly should be included in this presentation file, you should first consult the blog posts which preceded this one; ie, "when all else fails, read the directions"

Today's second task will be online shortly!

cheers,
Mr. L

Thursday 12 - 6: A "How To" slideshow , part 6

OK, for our last trick of the day, we are now going to apply yet another "special effect" --- ANIMATIONS.

They're actually not that hard to do.... however, you DO need something to apply them to, which is why you had to have words and pictures in your slideshow for this to work at all.

So here's what you do:

A)  right click on any image or text block in any slide, then click on the menuitem called  "Custom Animation", like so:

B) This should open the "Animation" panel on the right side of the screen, like so:

C) Very simply, you click the ADD button, then apply an animation

D) repeat for all other images and text blocks on that slide. You can change the order of animation (which one animates first and so forth), the speed of the animation, and so on

E) Repeat for all other images and text on all slides

Upload the file to Box.com when you are finished, or when the class is about to end

cheers,

Mr. L

Thursday 12 - 6: A "How To" slideshow , part 5

By now, you should already have not less than 13 slides in your slide show, each of which has a different background color or image. There should be text -- properly formatted  -- as well as images, AND you've gathered some sound effects. Now we're going to put them to good use.

Here is what we'll do:

1) Show all of your slides at once by clicking on VIEW command at the top of the screen, then clicking on "SLIDE SORTER"

2) Right click on any slide,then click on "Slide Transition", like so:

3) Choose any transition from the list,set it to any speed you want then click on APPLY

4) Choose a different transition for each of your slides, then SAVE your work just to make sure




5) Next, go back and apply a different sound effect to each transition, like this

Basically, just click on "Other sound" and then get to the folder where you stored the sounds you downloaded

6) Again, save your work, and then -- time permitting -- we will proceed to the next step

Cheers,
Mr. L

Thursday 12 - 6: a "How To" Slideshow, step 4

Greetings once again!

The next step in your ongoing creation of a Libre Office slideshow that explains "how to" DO something actually has more to do with gathering some more "raw materials"...... in this case, the stuff you need will be sound files. More to point, they are special effect sound files: short, cool sounding, and useful

We will be making use of these files in the next step, but first

HOW TO GET THESE SOUND FILES

I have a bunch of them right  HERE

and naturally, feel free to make use of any of them. They're in mp3 format, so they should work fine... if not, I'll try to get 'em fixed up

On the other hand, if you want to download some of your own, here are some websites that might work for ya:

http://www.therecordist.com/free-sfx

http://www.deusx.com/freesoundeffects.html

http://www.grsites.com/archive/sounds/

http://www.dramaticpublishing.com/freesoundeffects.php

http://sound-effects-library.com/

http://www.mediacollege.com/downloads/sound-effects/

And of course, if you of any other SCHOOL APPROPRIATE sound effect websites, feel free to make use of them. It doesn't matter to me where or how you get some sounds, just get at least one for each slide. And make them SHORT sounds, no more than 30 seconds in length

cheers,

Mr. L

Thursday 12 - 6: a "How To" Slideshow, step 3

If you have gotten to this point, it can only mean that you have created a slideshow, filled it with the required number of slides and then populated those slides with the relevant text  -- properly formatted -- for your "how to" manual.

Now its time to add those images you gathered about your topic. This is actually one of the simplest things you will ever do in this class.

All you have to do is to go to the slide where you want to insert one of your relevant images, then click on the "INSERT" command, then go to the menu item that says "PICTURE", then over to the sub-item that reads "FROM FILE"

Search for the file -- hey you downloaded it, you should know where it is -- then double click on it. This should put the image in where you want it, and at that point you can use the "handles" on this image to resize it, move it around, set it up anyway you like


You will need to make use of ALL the images you have gathered. That means, if you will remember, at least five images of people, either famous or not, who have something to do with your choice of topic, as well as at least eight different images representing the eight items needed to complete your "how to" topic.

 Where and on which slides you include each of these pictures is entirely up to you. You will probably have to further divide up the written instructions which are -- or should be -- already a part of your slideshow

cheers,
Mr. L

Tuesday 12 - 4: a "How To" Slideshow, step 2

The second step in creating this presentation file is to add your text, ie, all the stuff you typed about your "how to" topic between last week AND yesterday's class. There are several steps which you must take in order to complete this part of the process:

A) Don't try to put too much text on any one slide!  Doing so will make it incredibly hard for me to read what you've written, which will make me tell you to do it again

B) Make sure that you include all the text which you were supposed to type up previous to this class. If you don't remember what you were supposed to have done already, then you need to go back and
read the instructions again
to make sure you do have it right

C) Your name and the subject of your "how to" presentation must be on the very first slide

D) All your text must be formatted with a different color than black and a different font than "Times New Roman"

E) To format any block of text, one easy method is to first select the text, then click on the "FORMAT" command at the top center of the screen, then choose the menuitem called "CHARACTER. 

F) This will bring you to a dialog box that looks like this

G) The "font" tab has all the fonts... the "font effects" has the colors.

H) Make sure your color for your text doesn't clash with the color for your background

If we run out of time before the next step, make sure you save and upload this file to Box.com

cheers,
Mr. L

Tuesday 12 - 4: a "How To" Slideshow, step 1

OK, so if you are reading this, it means that you have already gathered all the materials needed to create a "How To" manual which can explain to anyone  just how to do the thing that you're so good at. Now is the time to start putting them together. Here is what you will do:

A) Using your computer's "Finder", you will locate and start the program known as Libre Office "Presentation


B) After starting the program, you will create a file named after yourself PLUS the phrase "CAN DO", and save it to your current computer.

C) To this file, you will need to add not less than 17 slides. One way you can add a slide is by right clicking on the slide in the column list at the left, like so:

D) Or, you can click on the INSERT command at the top center of the screen, then clicking on SLIDE. 

E) There are of course other ways to accomplish this. I'm sure you will discover them

F) You will need to set a different background color for each one of your slides. No need to get too fancy about it, just make so that you can tell you've moved from one slide to the next when you run the slideshow. 

To do this, click on the FORMAT command at the top of the screen, then the PAGE menuitem.... from there, click on the background tab that shows up, like so:

When you are done, please upload that file to your shared folder at Box.com BEFORE the class ends

Cheers,
Mr. L

Monday 12-3: How Stuff Works, Part Five

This part is also simple: you need to gather at least five images of people -- famous or not -- who do, or are doing, the thing that you do

Upload them to Box.com, then let me know that you've done so

cheers,
Mr. L

Monday 12-3: How Stuff Works, Part Four

This part is simple: download at least one image each of ALL the items used in this process, then upload them to your blue shared folder at Box.com

When you have done so, send me an email to let me know

cheers,
Mr. L