Hack a Website Page
Much of today's computer action revolves around the internet... and the future holds more and more of it. Thinking
of those I know, just about everyone has an inernet service provider, most have higher bandwidth broadband speed, some
have websites, but few know how to make or maintain their own website page(s). Maybe this newsletter will help you jump
in. You have everything you need...
You could spend time reading books and doing online research, or jump right in and start hacking... starting with
a website page already online and working. That's the route I prefer, 'hacking' .
In my somewhat dated Webster's dictionary the first meaning of 'hack' is to
'... cut with repeated irregular or unskillful blows...'. Yes, that's me and website development!!!
Today's Wikipedia says one meaning of 'hacker' is a software designer and programmer
who builds programs and systems that garner the respect of one's peers. A hacker can also be a programmer who hacks
or reaches a goal by employing a series of modifications to exploit or extend existing code or resources.
Yes, that's me again!!!
Website pages you respect are those to hack...
on Mark Coffman's WindowsPhotoStory.com forum had me looking at a website page used to automatically play a large
size Photo Story. It was a minimalist design, sleek with mostly blackness, nothing much more than the playing story...
here's the link to the page.
With the broadband capabilities expanding and my thinking more and more about putting high quality photo stories
online, the page got a moment of respect followed by a half hour of hacking, to get it up and running on my website
in this new page
Photo Story 3 - Distributing
I invite everyone to now hack my page and make your own. I'll help you the best I can by providing some info about
the html code... one of the languages of the internet... that makes the page and story display on everyone's browser
(except Macs that can't see stories because they can't get the needed codec).
That lead me to this newsletter, to present my irregular and unskillful blows. It was quick, easy, fun, and spontaneous.
Before getting into more details, here are...
... a few notes...
Microsoft Expression... the new encoder will be released on Monday... by the time you read this,
one of these links might lead you to a download.
Expression - Intro/Overview
Expression Media Encoder
The Vista Readiness Advisor wouldn't get through checking my XP laptop until I disabled the Norton protection system.
With that off, the advisor told me the system won't run the aeroglass feature of Vista unless I upgrade the video card
(very unlikely event).
Sticky Note... Making Movies with Vista! a six page article in the Spring 2007 Special Edition of
MaximumPC, is on bookstands now to May 29, 2007. Starting on page 78... the article
covers the movie making process from camcorder tape to viewing on a standard video DVD.
Microsoft Home Magazine
Cindy Waxer, a writer for the magazine interviewed me via phone on Wednesday... for an article about Movie Maker
2 in an upcoming issue.
.... back to the main topic...
The tools I use to maintain my website are...
- Notepad is my editor... I try more sophisticated software at times, but keep going back to
the basics and simplicity of Notepad. I'll explore Expression Web as one of my next projects... I'll use it to take
screen shots of nicely displayed html code for this newsletter, but go back to Notepad afterwards.
- IE7 to explore online websites that let me look at and copy the html code... if I like a page
and it lets me see the code, I'll check it for ideas. Many today use Firefox, which may display a website somewhat
- Elements of Web Design by Darcy DiNucci with Maria Giudice & Lynne Stiles is my favorite book
about design and code. I'm using the 2nd edition of 1998. I use the tried and true basics...
- Online info about specific website code, as needed... when my book about the basics isn't sufficient.
- An Internet Service Provider (ISP) to put my website on... I've been using the 1&1 service
for almost 2 years for my papajohn.org site. I also have some
website space at Charter, my ISP.
- Total Commander is the utility I use to upload and download files (ftp) to and from my website
My Firefox browser opened the page we'll be using, but said I needed a missing plugin for the Windows Media Player.
That was followed by a statement about a plug-in not being available, with an offer for me to set it up myself. That's
enough for now... as I use IE7, I'll leave the rest of this story to those of you who use Firefox.
A Website Page to Explore
I've already hacked the page with the embedded player, let's walk through my page so you can better understand what
it reads like now, to hack it further for your use.
Start by opening the code behind the page... click anywhere on the background space or regular text of a page...
not on a picture or a link. Choose 'View Source' and the code for the page will open in Notepad. Here's the link to
the page to use.
Photo Story 3 - Distributing
Once open, save it to a folder on your hard drive, as you won't be able to make changes to my website page. Your
page should be just as functional but without things like pictures and a story file. You'll need to add your own.
General Notes about a Page of Code
The info might look pretty unorganized and messy in Notepad.... try to ignore all the extra spaces and the overall
structure... your browser ignores them as it assembles the page from the essential code, treating the extra info as
just background noise..
A single space is important in many cases, like the separation between two words. But beyond the single space, more
spaces don't change a thing. Put a dozen spaces between two words and your browser will use the first one and ignore
Software that specializes in making web pages does a better job than notepad in displaying the same info in a nicely
formatted way. For my screen shots of the code, I'm using the new Expression Web software... which gives the code line
numbers, some color coding, structure (things like indents and paragraph splits), and even tips on what needs fixing.
As I don't have such tips in Notepad, I obviously ignore them, yet browsers seem to know what to do.
Let's go through the page in sections.... above the header, the header, the body, a table, the embedded player, some
text, and the closing. I'll show the code, make some comments, and show the part of the page that my IE7 browser displays
from the code. Different browsers on different systems may see it differently.
In html language, tags are used... they start with < > characters, and need closure with </ > characters. For starters,
the tag of <html> is the first thing opened, and the last thing closed... scroll all the way to the bottom of the page
to see the closing </html> tag.
Above the Header
I'm not sure who this part of the page is for. Maybe it tells the browser what kind of code to expect. My website
pages don't have anything above the opening <html> tags.
This link is a reference site
about the language noted. It says the version of code is known as "loose" hypertext markup language. It has info about
a hundred or so tags that constitute the language. The page we're looking at uses 16 of them.
<tbody> - table body
<tr> - table row container
<td> - table data cell
<a> - anchor for a link
<div> - a defined part of a document
<p> - start new paragraph
<hr> - horizontal line
There's no need to study them unless you get stuck on something and want to get some insight into what it means.
Hacking usually means making an educated guess at a change, and then seeing if the browser view of the page confirms
your guess. If not, undo what you did and try something else.
...starts with <head> and closes with </head>... a header is info for things like search engines, not anything that
shows up on the page being viewed in a browser. It could say anything. My header is tied into last week's newsletter,
where it was first used.
...is where the action is... the things you can tweak as you test the page to see if you want to use it, and turn
it into one of your own.
The body starts with the <body> tag.
Some or many html tags can have more things in it... optional settings such as specific colors to use. If you don't
select things like that yourself the browser will use its defaults.
The body ends when you see the </body> tag all the way down toward the bottom of this page.
As the page is just about all black, you know by reading the code that the RGB colors of zero mean there is no color,
so it's as black as it can be. As the scale of RGB colors goes from 0 to 255, change them all to 255 and it'll be a
pure white page. Make each of the 3 numbers different and you'll have some kind of color.
Some tags use, as the links do, colors in hexadecimal system numbers, not RGB... they are the colors of links on
the page before being viewed, during viewing, and after viewing so you can tell which ones you've used.
Here's a website to convert RGB to hexadecimal colors, or vice-versa.
Andy Langton's Color Converter
Here's where things get interactive. I have at least a couple windows open, moving back and forth between them. In
Notepad, I'll tweak an item in the html code for the page, save it (Control-S keys), then press the F-5 key of the browser
to refresh the view to see what happened.
If you like the change, keep it... if not, change it some more or move on to trying something else... over and over
as you hack your way through the page.
a Table with 3 Images
This is the first thing you see on the page after the blackness of the body. It's called a table as it has cells
of info. In this case, one row of 3 cells, each one holding an image. On many of my website pages I have a table with
a single cell holding my commentary about the page, with text and pictures mixed. A cell isn't limited to a single thing
like a picture.
The table is centered on the page, with the 3 boxes each getting 1/3 of the overall table's width of 800 pixels.
The page I hacked it from used the table for a couple controls, as it had hidden those under the player... back,
wait a bit, and play again... I put images in the boxes and used the two controls to simply refresh the page if pressed.
If you don't understand what a different setting will do, change it and take a look
My images are usually jpg or gif... gif if I want to use transparency of part of it, like for these.
By the time I finished with the table, the images used for the 3 buttons had been replaced by 3 of my own.
the Embedded Media Player
Here's the part of the code that embeds the Windows Media Player... don't change anything that you don't understand...
or change anything you want if you don't mind starting over from your last backup.
My sample story is 800x600 pixels.... I started with that, but saw the code to embed the player was about the overall
player dimensions, and needed room for the player controls and displays at the bottom. The site I was hacking from didn't
make the controls visible, but I wanted them.
I measured the amount needed as 68 pixels high... that's how I got to the 800 width by 668 height. The video actually
expands to fill the player size, and will look distorted if you stay too far from the pixel dimensions...
You can see in the code the player is associated with some Microsoft site.
The section in the center above has the settings that effect the viewing... I'm able to change, even remove the embed
section at the bottom totally, without any apparent change in performance.
I don't know what the bottom section does, but as the page is working OK, I tend to leave it alone. The better hackers
who follow me can make things right.
some Text and the Page Ending
This is the final part of the page as it is today. Some text under the player, followed by a horizontal dividing
Verdana is my standard text, an older tried and true good looking font for web pages... the 3 fonts that follow it
tell the browser that... if the system doesn't have Verdana, use Arial... if not that, try Helvetica... etc. It's the
priority sequence for font types the browser should be following. You can change it at any time with a new font tag.
Size 3 is what I usually use... smaller numbers make for smaller fonts... try changing the number and use the size
For lines like this, higher numbers for the size make thicker lines... my site is full of lines that are zero to
4 in size.
One of the features of Expression Web is the squiggly underlines. Put the cursor over any of them and a 'tool tip'
will give you advice. For the one I'm pointing to the tip is that HTML 4.01 Transitional code doesn't permit use of
the attribute 'color'.
OK, I'll try changing it to red anyway... and it now looks red. Maybe it means that page isn't really in that language.
We learned at least that Expression Web reads that first line of the page.
Here's the bottom section of the page... with the text still in white but the line changed to red.
At the bottom of the page, the </body> closes it... followed by </html> to end the web page code.
Conclusion and Closing... and What's Next?
Website's are easy and fun to do... if you haven't tried one yet, there's noting to lose but a little time. Your
ISP already gives you some space. This page would only use a few MB, mostly for the story. If you don't have that much
space, put the story on YouTube and embed the YouTube html code in place of the player code above.
Have a great week and enjoy your video work...
I look forward to comments and discussion about this and other newsletters on the forums at:
Windows Movie Makers.net
Have a great week...
Movie Maker and Photo Story 3 -
Photo Story 2 - www.papajohn..org/PhotoStory2/PS.html
Products and Services
I'm involved in anything and everything that supports the users of Movie Maker and Photo Story, and adding more regularly.
Some are free and others reasonably priced.
Radio and Podcasting
is the only weekly Podcast having more useful information about desktop video editing and production than anywhere else
on the Web. Digital video editing, nonlinear editing, streaming media, software releases, tutorials, business tips,
technical help, download of the day and news on the latest products to make everything easier. It's where professional
and consumer desktop video users go to stay on the cutting edge.
Call the phone mail machine to get your technical question answered on the air... call (206)-203-3516
The radio broadcast is from Boston, and the website has downloadable podcast files. The June 19th 2005 podcast was
the first 'bi-weekly' show with a segment about Movie Maker 2. The frequency of radio Q&A sessions about Movie Maker
has fallen off as submitted questions are minimal. Maybe Vista will perk it up a bit.
Movie Maker 2 - Do Amazing Things (with its online companion on
www.papajohn.org ), published by Microsoft Press...
Maker 2 - Zero to Hero - with support on the publisher's forum -
Friends of Ed
Learning VirtualDub - published by Packt Publishing in April 2005, is the first book about VirtualDub
software. I wrote the introductory chapter about downloading and setting up the software: VirtualDub, VDubMod and AVISynth.
A large percentage of book sales are of electronic copies. The
Packt Publishing Website page for
the book provides a full table of contents and chapter summaries... and a link to a full free online copy of
Chapter 3, Capture Preprocessing.
Magazines - MaximumPC
A six page article Making Movies with Vista is in the Spring 2007 Special Edition (page 78), on bookstands
now until May 29, 2007. It covers the movie making process from camcorder tape to viewing it on a standard video DVD.
The 2006 Summer Special edition included a 7 page tutorial about Photo Story 3.
The November 2005 edition had a well done reworked 6 page reprint of the article about Movie Maker, starting on page
42 after the Happy 20th Birthday article for Windows.
The Winter 2005 quarterly special had a 7 page tutorial Make a Killer Home Movie with Maker 2. The
special edition of the video made for it is
on my website as
a file download.
Movie Maker and Photo Story - www.papajohn.org
- the site's goals are: doing amazing things, providing a detailed tutorial for PhotoStory 3, and helping you solve
Movie Maker problems.
It's been expanded to include the version 6 of Movie Maker in Vista, along with the new Photo Gallery and DVD Maker
PhotoStory 2 - www.papajohn.org/photostory2/PS2.html
- a detailed tutorial about using the earlier version. It's been a long time since I've updated anything on it, but
it still gets pretty good viewer traffic.
Online Support - Forums and Newsgroups
I'm a regular or moderator on many online forums and newsgroups, the key ones being:
Forums are open to all for viewing, but require registration of those who want to post. Moderators
actively participate to ensure the forum discussions move forward and stay on track.
Movie Maker and Photo Story forums at Windows
Newsgroups are wide open for all to view and post... moderation is collective by the participants.
Windows Vista newsgroup -
Windows XP Movie Maker newsgroup -
Photo Story 2 newsgroup -
Photo Story 3 newsgroup -
Movie Maker/Photo Story newsletter. The subscription is $20 for 52 issues, and a link to subscribe is on the main
page of www.papajohn.org or the Products
and Services page.
Topics for upcoming newsletters (always subject to change):
#148 - May 5 (open)
#149 - May 12 (open)
#150 - May 19 (3rd anniversary issue... I count in 50's)
Newsletters issued more than 6 weeks ago are posted by Rob Morris to an
Archive Site on
his Windows Movie Makers' website. Links from my website pages to specific newsletters make it easier for viewers to
see the content of both while browsing a topic.
Drop an email to suggest a newsletter subject...
Add-On Transitions and Effects
Transition Maker 2 (TM2) is
a utility for the ultimate in making your own personal and custom transitions for Movie Maker 2. It's a joint product
from Patrick Leabo, the programmer, and myself.
beta tested some of the Pixelan packages
, including the new packages for Vista, and think very highly of their people and products.
ProDAD's Adorage packages for Movie Maker 2 are additional sources of very professionally developed
transitions and effects. Here are links
for Movie Maker - Volume 1
PapaJohn's Transitions - Volume 2
PapaJohn's Video Effects - Volume 3
I use a lot of professional background music for movies and stories that was created by
Randon Myles, and act as his agent in selling tunes
There are 62 tunes available from 4 of his many albums... at 99 cents per tune (MP3 or WMA format). Here's a Sample
- 45 seconds from 'Groove 2'. The 4 albums are: In the Fields of the on-Feretin , Music for Film Volume
III, the Emerald Way, and the Fourth Door.
I don't have a full set of online samples yet, but if you hear something you like in one of my videos, there's a
good chance it was done by Randon. Send an email if you are interested.
more info to manage, consider additional tools that help.
My personal database has been an ongoing project over many years, and is now available to others. A tutorial about
using it is on the Managing > Personal Database page of my site, and more info is in the database package itself.
It's free for the asking to regular newsletter subscribers... send an email request and I'll return it with the zipped
file, which is less than 1 MB.
To others it's $10. To order, use the button on the top of the Managing > Personal Database page.
On my list of things to do is a video tutorial about how to use it.
neptune Mediashare is the preferred
file download service for Movie Maker users... there's a
'PapaJohn Expert Zone' where I keep many
of my samples and personal videos.
Check it at N eptune
and the Distributing > Neptune page of the website, where there's a developing tutorial about how to use the service.
and mydeo is the preferred video streaming
service. Many of the video samples for newsletter are on it.
Normal sized photo stories stream as well as or better than movies.
In conjunction with the Portage,
Michigan library , I offer free training sessions about Movie Maker and Photo Story, an intro session and
a workshop. Upcoming classes are 7-8:30 PM on:
The classroom has a large screen overhead projection system... and individual laptops for each attendee. You learn
by doing, with some coaching.
Other fee-based services
you can't save a movie because your project has become too complex, e-mail a copy and I'll divide it
into manageable sub-projects, and provide detailed instructions about how to render the parts and assemble them into
your final movie. $49.95 (no cost if it's not the right solution or doesn't work) - for details, see the sidebar on
the Problem Solving > Can't Save a Movie page of www.papajohn.org
Movie Maker 2/Photo Story training and support services start at $75 per hour - send an email -
PapaJohn@CharterMi.net and I'll help you
determine your needs, and work with you to plan and implement them.
Wedding combo website/video packages - check the Living Projects section of the website for samples
of what you can expect for the online portion of a package.
© 2007 - PapaJohn; Microsoft is a registered trademark of Microsoft Corporation in the United States
and/or other countries.
About John 'PapaJohn' Buechler from Microsoft.com
||John "PapaJohn" Buechler, of Kalamazoo, Mich., goes by PapaJohn online. An avid
user of Movie Maker since its first release, and a regular supporter of the community
of Movie Maker users, John received a 2003 MVP award from Microsoft for that support.
In March 2003, he started a comprehensive website about Movie Maker 2 at
www.PapaJohn.org. He maintains
the website, writes books and articles, teaches, and provides support services - all
for the community of Movie Maker 2 users. An engineer by formal education, John is a
computer database and multimedia expert by business and personal experience. He co-authored
the first book about Movie Maker 2 and is actively working on a second one. You can
find his advice in the
Windows XP Movie Maker newsgroup and in the Windows Movie Makers
newsletter is republished with permission of John "PapaJohn" Buechler.
Please note that this is an archive of newsletters and some information may become outdated.
PapaJohn, and the webmaster of this site, provides this information "AS IS" with
Visit - PapaJohn's Movie Maker 2 and Photo Story 2 Newsletter