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