We have a comet...

...visiting us!

Comet C/2009 R1 (McNaught)

You gotta get up really early though around 3 am. It'll be low in the NE about 20 degrees above the horizon June 12 - 13

To make it easy for you to find I made some star maps using Starry Night Pro

The first step above is June the morning of June 13... The next step is June 18th...

This is June 23

and finally June 29

There are some nifty photos available at Sky & Telescope

and Astronomy Magazine

It's just becoming visible to the naked eye now (It's already 2x brighter than predicted) and it's expected to reach a magnitude of about +2  (About the brightness of the pointer stars in the Big Dipper and the bright star Caph in Cassiopeia) Capella in the diagram has a magnitude of -1.8 (It's the third brightest star in the Northern Hemisphere)

Have fun with your binoculars and digital cameras... Comet McNaught promises to be real bright!

Wrap up ---The Class is Over, Now what?

Some suggestions

SEO Page update

I have finished updating the SEO (Search Engine Optimization) Page http://uofgts.com/BasicWD/Class8-SEO.html and have added some links for link checkers...

Apple Vs Adobe... HTML5 vs Flash debate

This will continue to be a subject of interest to all web designers and web builders.

This is Apples stand, with html 5 example web pages. HTML 5 and Web Standards

Here's a view that supports Adobe's Flash. HTML5 vs. Flash: The case for Flash

Find a Web Editor you like

Most software companies allow up to 30 day trail periods for their software... Try them ALL out!
You'll find links here...

http://stasiuk.blogspot.com/2008/10/web-page-editing-nirvana.html

Keep checking with Kompozer, it keeps getting better..
If you haven't done so yet, Check out Coffee Cup's HTML Editor 3 in 1 Editor, it's probably the best value for the dollar... except it's PC only --so far!

Subscribe to the latest News/blogs, Take On-Line Classes

The following web sites are my favorite sources of information. They offer free classes, tutorials, resources,
newsletters, the latest web news... join up, book mark these web sites!

http://www.sitepoint.com/blogs/?source=homepage

http://www.smashingmagazine.com/

http://webdesign.about.com/gi/pages/stay.htm

http://www.sitepoint.com/newsletter/

Free CSS Videos

Speaking of the latest news sitepoint.com is offering a free CSS video series for the next 7 days... They have been charging $7.95 per video... Sitepoint.com often offers really good deals, a good reason to subscribe to one or more of their services...

Lurk on Forums

An Internet forum, or message board, is an online discussion site about specific subjects or software. Members share information, and seek solutions to problems with the subject matter or specific software.
At some point you will be able to contribute to the forum by answering someones question!

http://w3schools.invisionzone.com/

http://www.sitepoint.com/forums/

You can find forums on just about any subject... just do a google search.

But, most of all, just build web sites

practice, practice, practice


and if you have a question, 'holler!

Create A Web Site -Search Engine Optimization

Howdy
I've updated the SEO page. You can find SEO info here
http://uofgts.com/BasicWD/Class8-SEO.html

See you in class

Create A Website --Ecommerce

I have updated the class web page dealing with online shops and transactions...

It is a bare outline as this subject has many solutions and aspects to it...

If you have specific questions about e-commerce, please bring them to class

You'll find the web page here...
http://uofgts.com/BasicWD/Class8-Ecom.html

The Search Engine Optimization page is also being changed. You'll find that page here http://uofgts.com/BasicWD/Class8-SEO.html

Some Notes...

The Google Docs Forms

What I like about the "doc" forms is that when you fill out the form you the user, can see the current results (if that feature is turned on) right away!

So fill out the form and check out the results!!!

I added a response from our curling club questionnaire --So you can see a pie chart example (we are thinking of starting up a summer league and we need volunteers to help with the setup)!

Search Engines

This is the link to find The Google Search Engine creator...

This is the link to find The BING! "wizard"

You'll note that the "behaviour" for these engines is to NOT display the search results on a separate web page in your browser. This technique keeps your clients "at" your website! With all of the links that you use on your web site you should always be asking your self, how do I present the results to my clients so they aren't steered away from your web site...

Bing! pops up the display in a box above your current web page...

Google Search gives you some alternatives, including where on the web page you want the results to appear... However, some of the effects will only work if you use an HTML 5 doctype...<!DOCTYPE html>. But, don't let that stop your from using the "new" Google search engine!

Have fun installing search engines on your web pages...

Create A Website --More Google Goodies, fonts! --

Our Cup runneth over...

Yes, google , it seem plans to take over the Universe, well at least the known web Universe... You can now use Google Fonts! As a friend of mine says, "You can never have enough fonts!"

Here is the url to find everything you need to know about the Google Fonts

here's a few fonts

You can check out the layout

---have fun with google fonts!

Create A Web Site --- Site Search Engines ---

Google again...

Create your own custom search form...
The URL is http://www.google.com/cse/
If you are subscribed to Ad Sense, you can add that to the results page...and more. This is the selections you can make...



I was hoping that an actual search engine could be placed here... Look for it on the class web site... Times are a changing!

Create A Web Site -- Google Docs -- Forms!

This changes everything

I made this form at Google Docs.

Just select Create New ---> Forms

Fill it in, enjoy the fun!

Create A Web Site --The HTML 5 Video tag

What's the big deal?

Simply this...

If you don't see any video, you don't have an HTML 5 capable browser!

<video width="320" height="180"controls preload="none" > <source src=
"sweeping/sweeping-iPhone.m4v " 
type="video/mp4" />< !-- WebKit video (Safari / Chrome)   -->
<source src="sweeping/sweeping-iPhone.ogg
" type="video/ogg" /><!-- Firefox / Opera -->
</video>

That's it! The hard part was converting the mpg4 file to Ogg Theora format for Firefox! You don't need video players, they are built into the browser!
Makes embedding video on a web page real easy!

Create A Web Site --Inserting Media

Update

I have updated the class "Inserting Media" web page... It should make a little more sense now... The key features are, How to insert slideshows and videos from sources like Picasa Web Albums, Flickr and U-Tube.

There are also examples and embed markup for wmv, quicktime, and flash files,  that you can use. (Embedding video without players) Look at the source, instruction is commented in the source...just cut and paste!

 

Two NEW Tools for Embedding Video and Slideshows

Visual Lightbox Here's a test slideshow made using the "free" version Nebulae

Video Light Box Here's a test video made using the "free" version Curling

Questions?

'holler

Create A Web Site -Tip! Backup, Backup, Backup!

Back it up! Hard Drives Can Fail!

Yep, I was going to write a different article today! But, the hard drive that has the class web site master files in it was missing in action, the entire hard drive had not mount!ed!  I had backed up the master folder on Wednesday before the class... so I wasn't missing any data... just the entire 122 giga-byte external hard drive had vanished. So, if you haven't backed up your master web site folder and all the material you have collected for your web site, now it the time to do so!  Yes, this is mandatory homework!  You ask, Backup? Where? How?

Another Hard Drive

1. An internal Hard Drive

If you have a Desk Top Computer there is usually room inside for a second hard drive.  The cost of an second internal drive is between $50 and $100 dollars. For that price you can get up to 2 terabytes of storage space!!! They are easy to install, but if the thought of opening up your computer frightens you... go to step 2.

2. An external Hard Drive

These days you can buy 1 to 2 terabyte drives that come in their own enclosure for $100 to $200. Just plug in the power supply, the usb cable and away you go!  Most of these drives come with backup software, some of these drives have a button on them that when you press it, your data gets backed up... automatically! The smaller "portable" drive are more expensive with less storage space but they are built to survive a 4 foot drop!

3. The CD/DVD/BluRay Burner

Most computers come with a CD/DVD Burner installed. They works like a hard drive, but when you burn a CD or DVD or the new kid on the block, a BluRay disk, data can't be copied to them anymore.  These disks are like the box of "film" negatives you have in your "attic"... Once the film has been exposed you can ONLY copy from them! So actually CD/DVD/BR disks are a permanent record of your data...  You can buy 100 CD's for about $15 these days and $25 gets you 100 dvd disks. BR disks are quite a bit more expensive at $10 per disk. You can buy these burners for internal or external use. I call them burners as they use a laser to etch pits into the dye on the disks, the 0's and 1's that make up your data!

Back it up to a cloud! On line Backup Services

Providers

Comcast offeres 2 gigabytes of free storage

Quest offers 2 gigabytes of free storage

MOZYHOME Offers 2 gigabytes for free... (More than enough to backup your web site!) Carbonite $55 per year Unlimited storage Top 10 Reviews Here's a comprehensive review of online storage companies. If you are a geek check out Amazon.com's S3 On-line Storage.

Google  GDrive It will actually be part of Google Docs. You'll be able to upload any file up to 250 megabytes in size and share it with others if you wish. There will be a 25¢ (?) charge per gigabyte above a free limit. It's being rolled out now and should be available within the month.

 MicroSoft SkyDrive  "SkyDrive" features 25 gigabytes of free storage

Free is Good, Backed up is better...

Your Backup Bottom Line

More soon

Centering an Image on a web page

It's harder than you think...

You want to place a "box" and an image on a web page. AND, you want them centered.

Method #1: Absolute, Auto and 0 (zero)

Make the Box and the image have the property and value position: absolute; and Use Margin: auto; but set the Top, Right, Bottom and Left positions to 0 (zero). Check out the embedded source!

Check to see if this works in all browsers!

Method #2: The 50% Solution

Using Absolute, 50% Percent and subtract 1/2 (50%) of the width and height of the image
Make the Box and the image have the property and value position: absolute; set the Top, Right, Bottom and Left positions to 50% and subtract from margin-top, margin-right, margin-bottom and margin-left 1/2 (50%) of the width and height of the image in pixel units. Check out the embedded source!

Method #3: Display Block

Tricky... The key to centering an image on a web page is that by default an image is an inline element.


"Inline Elements always begin on the same line. Height, line-height and top and bottom margins can’t be changed. Width is as long as the text/image and can’t be manipulated!"
Unless you change the image to act like a block element using the Property and Value display:block;


You could put the image in a div, but why add a div when you don't need it?


Click on the above images to see the actual web pages. PLease report if the above works in your browsers!  Thanks

Layout Different Perspectives

XHTML Tags
This view was inspired by the WYSIWYG web editor Kompozer, Dreamweaver also has a similar tag display view...


I added the </div> close tags. Visually you can see that everything is in the <body> and the web page parts are contained inside the wrapper...
Here's another way to view the same layout...

Need a grid to help with your layouts? I found this at smileycat.com. Right click on the grid to download it... It's a png file, just load it as a background image for the body of your web page.


Interesting...

The rest of the layout

Adding space for content and the footer...

The Content

When we define the height and width of our content area the normal flow of the xhtml, as interpreted by any browser, will place the content below the vertical menus...  I used  arbitrary background colors to let us see the different components positions.
To position the "content" div on the page all we need to do is move it from its relative position by using top and left dimensions...
The position of any div is measured from the top left corner...

The Footer

Same as the content... we'll have to move it from it's "normal" flow or position to place it at the bottom of the navigation and content columns.

The page

You'll notice that the page is "glued to the left side of your browser, you might not notice that if you are using a 4:3 old style monitor. But, you'll see that right off on a wide screen 16:9 monitor!

The Puzzle for the day?

Center the web page. (yes, we are ignoring the "content" of the "content div" for now!)
Click on the Image below to load the page into a browser

Adding Menus to our banner page

Continuing our Layout for our Class Web Page

We diverted our attention after we constructed our banner to learn different ways of making navigation elements for a web page. I used Ian Lloyd's accessify.com's  "List-O-Omatic" to make some menus for our demo class web page...
double click on the image of the page... to look at the source... I made comments where I made some changes to the List-o-matic markup...

The Vertical Menu

I rarely use position absolute to place an item on a page unless I must... In this case, in order for the sub-menus to not interfere with the layout of the rest of the page, the drop down menus, must be on top of all the other items on the page...
So I put the menus in a div, named it id ="horizontalmenu" and then positioned it absolutely.  How did I center the menus?
Try and puzzle it out... then Look at the source!

The Horizontal Menus

List-o-matic can't make horizontal sub menus, so the submenus are just more list items... (It's possible though). To position the horizontal menus I had to use position relative to move the list down so that the vertical menus didn't cover up the horizontal menu...
Adding your main content is next...
I found this very interesting web page that let's you make your own layouts...
It's called YAML Builder, "Yet Another Multicolumn Layout"
Have fun!  More soon!

Photoshop Elements Deal, May 13, 2010 ONLY

I found this on Mike Johnson's Blog, The Online Photographer

Adobe Photoshop Elements for $34.99

Amazon's Gold Box Deal of the Day today (in the U.S. only) is Adobe Photoshop Elements 8 for Mac or PC for $34.99 after mail-in rebate.

Elements has always been a somewhat strange product to me...it's Photoshop with some key features missing, but it's still loaded with complexity and isn't optimized strictly for photographers. It's cheap today, though. A tip: Elements is a nice, inexpensive way to get the latest version of Adobe Camera Raw (ACR) if your older version of Photoshop doesn't support it.

Mike

 

Create Web Site 2 --Week 1 Homework

Please Fill out the Form...

You'll find a form at this URL

It's a class Survey, your participation will help the direction the class takes...

You should be able to solve Puzzle 5 by adding one line to the CSS!

Poke around the web pages that are linked on the page at the above URL... You'll find a bunch of interesting web ideas!

Got a question, Post a Comment!

 

 

 

 

 

 

 

Be a TV Star!

Howdy

You are invited

Howdy
Seems Clark College wants to make a commercial with me demoing Photoshop as part of the whole commercial

I need and Clark College needs some volunteers to participate in the commercial!  

It will be "shot" (filmed) at CTC (Clarl Technology Center) between 1-3 on Saturday, May 22.  Cast call is at 12:45 PM 
in room 339


I've been told that you (the  volunteers) to not to wear bright colored or white clothing.  Also avoid logos or insignias on the clothes



From Vancouver: 
Take State Highway 14 east to the 192nd Ave. exit. Turn left (north) on 192nd Ave. to Mill Plain Blvd. Turn left (west) on Mill Plain Blvd. and travel approximately one block to Clark College at Columbia Tech Center. The building is on the right (north) side of the road. 

Or just go east on  Mill Plain ...  the building is on the left, below Walmart and across the street from Lowes  BTW (Google Maps - Street View shows a hole being dug in the ground where the College and Lowes is today)

Got any questions 'holler
Want to participate, send that e-mail

Create A Web Site ---CSS Styling

Think inside the box...
To style your web site you NEED to use CSS.  With CSS you can style any xhtml element, AND any thing you name as a "class" or an "id"...
What kind of styles can you apply to an element or an id or a class? On the Class CD there are two file folders. One is labeled CSS and the other is labeled xhtml It looks like this on the CD

XHTML and CSS Cheat Sheets


They are cheat sheets, that list all the  CSS properties, and HTML attributes that you can use...

In depth references

To begin learning CSS you need good resources.  There are 2 that are on-line...

1. W3Schools CSS Tutorial

This set of tutorials has a nifty  "try it" feature... it looks like this

You start off with their example, to see what the CSS Rule looks like... then you can edit the style Rules on the left and see the new results on the right. Real Nifty!

2. Sitepoint.com CSS Reference

Sitepoint also has a "try it" section called Learn and Play Where you can see what the sample looks like and you can change the CSS and immediately see the results... it looks like this... More nifty...

All of these references can help you learn the CSS Rules and the many different properties you can use to "style" your content!

Codeburner

You can put a reference interface on your desktop called "Code Burner" It links to all of the sitepoint.com's online references.

You can find the link for the CodeBurner "apps" here at sitepoint.com's website. Download and install the widgets on your desktop!

Some Tips

When you are starting to learn CSS styling and layout it is much easier to start with  "Starter Templates"

You can find a bunch of them here...

Layout Gala

Fixed width Layouts

*** Practice, practice, practice ***

good luck and when all else fails 'holler!

Create A Web Site --Tidy Loose Ends

Tidy

Having problems with your XHTML?  Got some really old pages that need lots of help Got some pages that need to be updated... Use TIDY!

 

This Link will take you to Tidy Online

http://valet.htmlhelp.com/tidy/

You can upload your file using the "Choose File" button, select convert html to Xhtml and then

Click the "Full Report" Button

You can highlight and copy the "tidied" results and paste it into a blank page in your editor... save the page with a new name...

This link takes you to another online version of TIDY

http://infohound.net/tidy/

With this version you can upload a file or tidy a page that has been uploaded to a server.

Have fun...

scrub, scrub, scrub and then Validate your pages!

 

 

 

 

 

 

 

Create A Web Site - Loose ends

Meta Tags

From the on-line web page Lesson 3

The meta tag is both open and closed in xhtml... <meta />

It placed between <head> and </head> in the xhml page structure.

The importance of meta tags has diminished as computers and internet have gotten faster

Important meta tags

• Meta Robots: Used only if you DO NOT want your web pages indexed.

• Meta Description: very important.

• Meta Keywords:  Most web crawlers these days just read the whole page for keywords... not so important any more, unless you are a specilaist in an unusual trade...

  And, the other meta tags are only used for specialized web pages

  description

  This describes the document in the browser window. And is used by some search engines to provide a document description to the users performing searches.
  Example: If you are a homostatic graft specialist you would use those specific $10 words in your description
  <meta name="description" content="homostatic graft specialist">

  Googles search engine will display the description on the search results page eg search key words homostatic graft specialist

  results in

  1. Category:Transplantation_medicine - Himatsubushi Wikipedia

     Certified Tissue Bank Specialist · Corneal transplantation ...Homostatic graft · Human Tissue Authority I Immune privilege · Islet cell transplantation ...
     yomi.mobi/egate/Category:Transplantation_medicine/a - Cached
     
     
     
     
     More later
     
     
     
     
     
     
     
     
     
     
     
     
     
     

   

  
  

 

 

 

 

 

Create A Web Site - No Class May 5th

Howdy

A reminder that there is NO class on Wednesday, May 5th.   Class will resume on May 12th.

In the mean time, as you catchup in your homework... here are a few tips that might help.

1. Test early, and test often.

2. Sometimes when you have edited a web page, and you have saved it and then opened the page in the browser, you do not see the changes you made! What's going on???
Sometimes a browser will re-display what's in it's cache, rather than render the new markup that you just opened up in the browser.  One solution is the quit the browser and start it up again.  If that still doesn't work, you may have to "clear" the browser's cache...

3. Sometimes the fonts in one browser are way smaller or way bigger than the fonts in another browser...
Someone may have "magnified" (zoomed) the size of the fonts in that browser.
On the PC the keyboard short cut is Control and the +(plus) key or -(Minus) key...
(On the Mac its Command + (or -)
Usually the same controls can be accessed via the  menu item View > Zoom
Solution: reset the Zoom display to "Normal"

4. If you are using Internet Explorer and your results look "wonky" (Yes, that's a technical term) the web page you are testing may have a broken Doctype statement... The broken Doctype forces Internet Explorer to display the page with older non compliant rules used by Internet EXplorer 5.5 and earlier. (It's called Quirks mode)

5. Keep on testing - Practice, practice, practice

Create A Web Site - Week 4

FTP --Uploading your web site...

The program of choice is Filezilla. There are versions for PC, Mac and Linux... There is a PC and Mac version on the CD (portable program version for your flash drive or you can install it on your computer at home).
Your text book has information about Filezilla in Chapter 8 pages 317 -320.  You'll also find some tips on using Filezilla in Lesson 4.
In class we used Filezilla to connect to a live web site...
If you need the password to use one of the classes free web sites, send me an e-mail.
After you upload your test web site in it's own folder, send me an e-mail... I'll made a main page on the test sites that will list links to fellow class members so they may view your web site... or just post the URL of your web site here!
The links to the web sites are here
Amsterdam (ad free) Angelfire (free but, they place ads on your page)...


Once you have uploaded a web site... always test the site!
1. Visit it on different computer, other than the one you used to develop it.
2. Have someone else visit your web pages... Your fellow students make good tester/critics or hire some one... or invite your neighbor over and buy 'em lunch or a serve some locally brewed ale!

More tomorrow...

Making a Banner -Tutorial Update

"What's the best way in the tutorial to display the results of the markup?"

I set up the tutorial so that in the left column you can see the markup, and in the right column the result...
In the right column I was "faking" the "What it looks like in a browser"...
Then it dawned on me I can actually display a different web page on a web page!
There is an html element that let's you do that... it's <iframe src="" height="" width=""></iframe> and it works much like the <img /> tag.

So Starting with Page 5 I inserted the iframe and you get to see an actual web page in the right hand column!

On page seven I kept the CSS as simple as possible, and checked to make sure it works in all versions of Internet Explorer... I only use float for the image in the banner, and only used position:relative for the h2 and h3 sub-titles...

Tip
Keep it simple...
Test Early and test often...

Create a web page - Closed Captioning

This is an answer to the question... Can Web based videos have sub-titles, or be closed captioned!

The answer is Yes!

Youtube recommends

Subtitle Workshop

It's free, but only runs on Windows

http://www.urusoft.net/products.php?cat=sw&lang=1

For the Mac try Subs Factory, yes also free...

http://subsfactory.traintrain-software.com/index.php?langue=en

Here's a video about Closed Captioning

http://www.youtube.com/watch?v=meCIER_s7Ng

Enjoy!!

Create a web page - Puzzle #5

"Fixing an absolutely positioned div"

The problem... because the blue box is positioned absolutely it will always be 47 pixels from the left edge of the browser... (we want it to be positioned absolutely so that it will cover that spot on the page)

However, when the browser window is expanded in size, the blue box "moves" relative to the other elements on the web page.

The puzzle is to fix the blue box to the green box (the Left Column) so that when the browser window expands the blue box does not move, and it is 47 pixels from the left edge of the green box!

It can be done. Here's the link to puzzle #5

Enjoy!!

Create A Web Page --Puzzle #4

Center Me!

Looks simple enough, but the puzzle has more than one answer... and gets complicated if you try to center the boxes vertically...

The Puzzle
Center the boxes and the text in your web browser...

Here's the link to Puzzle #4

Create A Web Page --Puzzle #3

Make the 3rd heading in the content container the color red without affecting the colors of all the other headings on the page...


Here's the link to Puzzle #3

Create A Web Page --Puzzle #2

Column Width

In the United States, a common newspaper columns measurement is about 11 picas wide (or about 1.83 inches), though this measure varies from paper to paper and in other countries. On a Computer screen the display is set at 96 pixels/inch, so 1.83 x 96 = 176 Pixels. The Physiology is that it is easier to read something and comprehend it if the reader doesn't have to move their eyes to read the article.
The Puzzle is to make 3 even columns in the content container...
Here's the link to Puzzle #2.

As usual, enjoy!!!

Create A Web Page --Puzzle #1

A simple puzzle... I made a container outlined in blue, then added the navigation menus nested inside the red box... but this is what I got... with normal html flow...

Puzzle, why did this happen, and how do you put the menus inside the red box?

Here's the link to Puzzle #1

Enjoy!!!

Create A Web Site - Week 3 Menus for Navigation

Making Links, simple and fancy navigation menus

There was a question in class about how to make links and make navigation elements from links

The following web page reviews how to make different kinds of hyper links

and on to the tutorial Making Navigation Menus

The tutorial shows you how to style your lists into "pretty" navigation links...
from simple to fancy... and, Yes, it's okay to cut and paste!

The bottom line is that making links can be very time consuming and confusing at first...
so it's much easier to either keep the styling real simple or let the computer do it for you!

On the last page of the tutorial you'll find some "web generators" that will make menus for you...
some of them are on-line like our text book author, Ian Lloyd's world famous "List-O-Matic"

You can find many menu generators are that are "free" programs you can download...

Got a question? Yep, as usual... 'holler!

Create A Web Site - Week 3 Making a Banner

Making a Banner

I put together a 7 step tutorial that takes you through the steps of making a styled banner
starting with text, then xhtml markup, then adding the CSS styling (embedded).

Files needed...

1. A background gradient or image

2. A logo...

You'll find page 1 here

On pages 2 - 7

on the left hand side of the page is what the markup looks like in a text editor
On the right hand side is what the markup looks like in a web editor...

Got a question? 'Holler as usual...

Create A Web Site -Week 2 tiips

Howdy

Just some info and a tip or two...

1. For those of you that use a PC, and are running the Komodo Edit portable App from your Flash Drive! I made some illustrated instructions in case you run into the problem where It appears Komodo Edit Portable didn't shut down cleanly and the host folder is missing...

You'll find the instructions here

2. When you are trying out a new tag / element start off with a "blank" .html page with just the basic web page info like you'll find in the file Basic-htmlpage.html (it's in the "YourWeb-Site) folder on the CD or your master Web-Site folder if you copied it to your flash drive...

Once you understand how the element works you can copy and paste it into your index.html page

eg (You can cut and paste this into your editor... )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Test "html" Element Page</title>
</head>
<body>

<img src="images/web.jpg" alt="A Small spider web "logo, for the Create A web Site Class" width="150" height="100" />

</body>
</html>

3. If you are intimidated or frustrated using a "text" editor to make a web page, in other words you are the creative type, take a look at the Web Edit program Kompozer... It's available for both the PC and Mac, Just check out the appropriate folder PC-programs or Mac-Programs on the Class CD I gave you.
Kompozer is under development led by Fabien Cazenave as an open source WYSIWYG Web Editor (Works like a word processor)... I use Kompozer when I want to quickly lay out a page visually...
Give it a try, have fun and as usual, 'holler (post) if you have a question!

PS I also added some "copyright" info for those of you that will be displaying photos, and art on your web pages that you want/need to copyright...There is a new link on the Class Home Web Page...
Tip
If you don't see new links on the class web pages, click the refresh button on your browser...
You never lnow what kind of new treasure you might find.

Create A Web Site - Week 2

Howdy

One component of making a web page is obtaining/making/inserting photos and "graphics" .
(did I tell you that there is a lot of busy work involved in making a web page?)
To make graphics and edit your photos for the web you need software specifically designed for that purpose, like Photoshop.
SumoPaint a free "on-line" Paint program that runs in your browser, and is one of the best available...
If you need help with Sumo Paint you can find many amazing Video Tutorials

If you don't have any artistic skills, you can hire a graphic artist, but you might be able to find the components you need on-line. Instead of doing a "plain" keyword search, use "image" mode instead...
his link takes you to a google "image" search for gradient backgrounds. Some "free" art web sites offer graphics that are "free" to use after you pay for the "right" to use them... and sometimes that is a good solution! You can find backgrounds, buttons and all kinds of Clip Art on the web...
Best advise? Support your local artist.

Tip: HTML On-Line References (your best friend)
To learn more about the image <img> HTML tag/element check out Sitepoint.com's on-line reference book "HTML Elements"

Links - Hyper Reference Links are what make the internet work.
This class web page defines "Links" and demonstrates how they work.

TIP
Read the page... and Remember!!! if you want to see how the "markup" for that or any web page works you can always look at the web pages source!!!
In Internet Explorer the menu is
View > Source
In Fire Fox it's
View > Page Source
In Chrome it's
View > Developer > View Source

I have placed comments in the markup to help you find what you are looking for.
You can cut a paste the source code and use it on your web page!!!!

For more info on how the "box" model works read this...

Your Home work
Make or find the graphics/photos you want for your web page (an on going project).

Work through the rest of Chapter 2 and At least Read ALL of Chapter 3
There is a lot going on in Chapter 3, but I will cover the key parts in the next class...
Try and work out the examples, if you get stuck, thatsl be a good place to stop... and post your question here!

Most of all, have fun!

Create A Web Site --Week 1

Howdy

Rule #1 Test early, test often.

I hope you all enjoyed the first Create A Web Site Class and you are looking forward to next weeks class.

Setup
The first thing you need to do is finish setting up your "work" environment.

1. You need to install on your computer several web browsers, so you can follow Rule #1
"Test early, test often"

For the PC -- Firefox, Internet Explorer 7/8, Safari, and Chrome.

For the Mac -- Firefox, Chrome and of course Safari. (there is no IE for the Mac)
You can find links to the above browser websites on the class resource page, it's also on-line here

http://uofgts.com/BasicWD/resource.html

2. Setting up a webpage text/html editor.
The previous blog and Lesson #1 provide links to different kinds of web editors... It's up to you to try them out, to find the "one" that works best for you... Most web editors have a free trial period.

Even if you are using Dreamweaver or MicroSoft's Web Expressions, you'll need a good text editor. In the classroom we will use Komodo Edit (it's available for both the Mac and PC) and it's Open Source and Free!
Here's a link to Active States Komodo Edit website

In the class we use the portable version of Komodo Edit
if you are having problems copying it from the Class CD --> to your flash drive, you can download the Portable Apps installer

Homework
Read the online Lesson 1

The Class text book
Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition by Ian Lloyd Edition: ISBN: 978-0-9804552-7-4 Published: December 2008

Down load the sample files!!!

Read Chapter 1 and Chapter 2 through to the end of page 47

On the Class CD disk in the folder "Articles" read The BeginnersGuide.pdf, it is a terrific synopsis of your text book and should be required reading!

You can down load the sample pdf for the book. The Sample download has at least the complete chapters 1 and 2!

More homework
write down everything you think you want on your Home web page (index.html)

Have fun!
If you have any questions 'holler
but, I think a post here works much better

Finding Web Page Editing Nirvana

Is there an easier way to make and edit web pages???

I think the WYSIWYG (What You See, Is What You Get) Open Source Web Editor Komposer is a great place to start making web pages, especially if you are just starting out. It's available for PC, Mac and more... There are better alternatives but they are NOT all free or open source like Kompozer. The best part is that Kompozer is currently being updated.

Several many years ago (once upon a time?) there were only a few solid web editors. Today there are many more choices and the competition is growing...

The combination that I use on my Mac are
Smultron, Komodo Edit, Kompozer Coda and Dreamweaver
For the specific task of making photo web galleries I have used iWeb, Lightroom and JAlbum.
In the past I tried Shutterbug (Mac) and Picasa (pc).

JAlbum is free, it's available for PC and Mac. It's a great web album utility and time saver, you can check it out and download it from here...
http://jalbum.net/

Here's a sample JAlbum Gallery

The reason I like the following programs is that I have existing web pages to edit, some of the web editors out there cannot load and edit straight html pages!
These 'Graphical" editors use an intermediate step... between html text editors and wysiwyg editors... they save the Web pages/projects in their own format... Then, when you upload to the web these programs convert their graphical formatted versions to html!

These editors can load and edit HTML pages
Komodo Edit (an HTML ope source and free editor) for PC and Mac
For PC's
The CoffeeCup HTML Editor 2010 ----is 2 Editors in 1 !
http://www.coffeecup.com/html-editor/

TopStyle (this is one terrific CSS/HTML textstyle editor a lot like Coda on the Mac)http://www.blogger.com/img/blank.gif
http://www.newsgator.com/Individuals/TopStyle/Default.aspx

MicroSoft's Web Expression 3 ---The price has come way down...It's now $149.00
http://www.microsoft.com/expression/products/overview.aspx?key=web
(it's a real long download)

Adobe's Dreamweaver CS 5
http://tryit.adobe.com/us/cs4/dreamweaver/index.html?sdid=DOPEY

These Graphical Editors are fun to use but Can not edit existing web sites

A free Graphical Web Editor called WebDwarf (PC Only)
http://www.virtualmechanics.com/products/dwarf/

Kinda fun to use, especially if you are artistically inclined...

it's big brother/sisters are SiteSpinner and SitesSpinnerPro
http://www.virtualmechanics.com/webhelp/sitespinner.html

For Photoshop Users there is a plugin called SiteGrinder
http://www.medialab.com/sitegrinder/

On the Mac there several graphical oriented editors
RapidWeaver
http://www.realmacsoftware.com/rapidweaver/

and
Freeway - Freeway Pro
http://www.softpress.com/products/index.php

And, there are others, but the ones mentioned have caught my attention so far
Oh, so many choices, so little time...

My current main working environment is Coda on the Mac

and I love it!

What you say?

--
Mo Eb , Garry
http://uofgts.com


o "It's the reason we came from the mud, don't you know/'Cause we wanted to climb to the stars." --- David Crosby