Windows Media Player Skins

People seemed to love using Weeplayer since the footprint is so small. It was originally designed for people running high resolutions, but for people on computers running at a very low resolutions I wanted to offer Microplayer; something smaller that would even keep out of the way, yet “always on top” at lower resolutions as well.

Windows Media Player Skin Downloads

Microplayer

Microplayer Thumbnail
Microplayer.wmz (8.24 KB)
Released 6/28/2002

Microplayer is the second skin I have made – based largely on feedback I recieved from users of the original Weeplayer. Microplayer is designed to reside in the title bar of a maximized window near the upper-right corner of your screen.

Weeplayer

Weeplayer Thumbnail
Weeplayer.wmz (7.86 KB)
Released 11/10/2001

Weeplayer is the first WMP skin I made. I spent a few hours one weekend reading the WMP SDK and figuring out how things worked. The rest was suprisingly easy. Weeplayer is designed for users who have high-resolution video cards. It has a large “Play/Pause” button so that it’s easy to control music and audio streams even though the interface is so small.

Feel free to share your opinion of the skin via my feedback chat (no login or software download required).

A Brief HTML Tutorial

By: Mark Noble
V 1.0

Part One: Overview

HTML stands for “HyperText Markup Language”

HTML is not a programming language; it’s a markup language.

When you write HTML code, you are simply importing raw text data and marking it up with tags that indicate where certain formatting options begin and end.

What makes a tag? Well, a tag is a word or abbreviation that represents a formatting option and is enclosed in the “less than” symbol “<” and the “greater than” symbol “>”. Examples of common tag names would be:

 
<P>
<I>
<B>
<BR>
<FONT>
<TABLE>

If you have a string of text such as “The rabid orangutan darted swiftly through the canopy”, and you insert a <B> tag before “orangutan”, you will tell the browser that from that point on, it should make everything BOLD. So the following line of code:

The rabid <B>orangutan darted swiftly through the canopy

Will yield the following text in the browser:

The rabid orangutan darted swiftly through the canopy

You’ll notice that everywhere after the <B> tag, the text is now bold. How do you fix that? Use an end tag! End tags are the second half of a tag and tell the browser where to stop applying the formatting that is caused by the first half of the tag. They look the same as the first part of the tag except for one minor difference. They contain a forward slash “/”. Here are examples of common start tags and their companion end tags.

<P>		</P>
<I>		</I>
<B>		</B>
<BR>		</BR>
<TABLE>		</TABLE>

If you add the appropriate end tag after the word orangutan, you will see the following.

The rabid <B>orangutan</B> darted swiftly through the canopy

Which will yield the following text in the browser:

The rabid orangutan darted swiftly through the canopy

NOTE: Generally, I do not like to leave space between the HTML tags and the code they affect. The reason for this is that it may be possible to apply several text formatting attributes to an invisible character such as a space ” ” which could wreak havoc on your troubleshooting efforts.

NEXT PAGE >>

A Brief HTML Tutorial (Part 2)

By: Mark Noble
V 1.0

Part Two: Layout

Now it’s time to learn about the basic layout of an HTML file. These are just a few simple rules that will keep you out of trouble down the road and ensure that each of your documents meets the lowest standards of compatibility in order to be viewable by the widest variety of browsers.

It is important to note that HTML is an Object Oriented Language. This means that it relies heavily on the concept of maintaining a container structure for web documents. In many cases, if you forget a closing tag, it will not affect the document appearance – however – I strongly advise against being careless with tags. If you are careful, you will be happy with yourself as it will be easier to debug your own code, and other programmers will be happy with you as well if they ever need to expand on your code.

Some programmers write in a way that is intentionally difficult to understand. Others are simply careless and sloppy with their tag arrangement. I myself prescribe to the philosophy that every page of code I write should serve as an example to new programmers as to how code should be written. If you maintain this philosophy, you will thank yourself for ensuring that your code is easy to understand, reuse and manipulate down the road. It is never faster to code something the sloppy way first – then go back and fix it later.

Below is a simple framework for HTML that you should work from. HTML documents written without this framework will be functional in most browsers, but this just helps organize some of the information (which is very important in complex professional websites). After the example code, I will explain what the tags are for.

<HTML>

<HEAD>

<TITLE>Untitled</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

<HTML> – This tag encloses all of the HTML code on the page. It should be the first tag in your code as well as the last closing tag.

<HEAD> – This is a very important tag. It holds information that affects your entire page. Information such as the color of the background, various link colors and the title of your document as it will appear in the title bar of the users browser window.

<TITLE> – The title tag contains the name of your HTML document, as it will appear in the title bar of the users browser. The information within this tag is also often used when a user bookmarks a page. For instance, if the HTML programmer puts “Ed’s Pet Shop” in the title bar, it will appear in the title bar of the browser as well as the default name for any bookmarks to that page (unless otherwise specified).

<BODY> – This tag contains the real meat of an HTML page. Most of your work will take place inside this tag. Any text, images or links on an HTML page will be listed within this section of code.


Now let’s try our first page. We will write a sample page about Elvis with a sample block of text.

Elvis Presley came from a very poor family. He was born on 8 January 1935 in Mississippi. Elvis loved music. He went to church every Sunday and sang in the choir. When he was 13, his mother bought him a guitar. One day in 1954 he went to a recording studio called Sun Records. He wanted to make a record for his mother’s birthday. The secretary at the studio, heard Elvis and told her boss, Sam Philips. Elvis was his dream – “a white boy with a black voice”.

In 1955, Elvis appeared on TV in New York. Then he went to Hollywood and made his first film “Love Me Tender”. In the next two years he had many hit records and soon became a millionaire. In his last years, Elvis became fat and depressed. He died of a heart attack in 1977 in his house at Graceland. But for many fans, Elvis Presley is still alive and his songs are still popular.

Next we add the base code framework that you should always start from when creating an HTML document. Simply fill in the title of the document and place your copy between the <BODY> tags.

<HTML>
<HEAD>
<TITLE>The King of Rock 'n Roll</TITLE>
</HEAD>
<BODY>

Elvis Presley came from a very poor family.  He was born on 8 January 1935 
in Mississippi.  Elvis loved music.  He went to church every Sunday and 
sang in the choir.  When he was 13, his mother bought him a guitar.  One 
day in 1954 he went to a recording studio called Sun Records.  He wanted to 
make a record for his mother's birthday.  The secretary at the studio, heard 
Elvis and told her boss, Sam Philips.  Elvis was his dream - "a white boy 
with a black voice".

In 1955, Elvis appeared on TV in New York.  Then he went to Hollywood and 
made his first film "Love Me Tender".  In the next two years he had many 
hit records and soon became a millionaire.  In his last years, Elvis became 
fat and depressed.  He died of a heart attack in 1977 in his house at 
Graceland.  But for many fans, Elvis Presley is still alive and his songs 
are still popular.

</BODY>
</HTML>

Now it’s just a matter of adding several tags to this basic source code to improve the overall aesthetic of the document. The following is the code for my finished page as well as a basic explanation of the HTML tags used to generate the page.

<HTML>
<HEAD>
<TITLE>The King of Rock 'n Roll</TITLE>
</HEAD>

<BODY BGCOLOR="white" ALINK="red">

<BLOCKQUOTE>

<H1 ALIGN="center"><U>ELVIS</U> 
<IMG SRC="sneer.jpg" WIDTH="95" HEIGHT="123" BORDER=0 
ALT="Sneering Elvis" ALIGN="middle">
<U>PRESLEY</U></H1>

<P ALIGN="justify">
<A HREF="http://www.elvis.com/">Elvis Presley</A> 
came from a <I>very</I> poor family.  He was born on 8 January 
1935 in Mississippi.  Elvis loved music.  He went to church every Sunday 
and sang in the choir.  When he was 13, his mother bought him a guitar.  
One day in 1954 he went to a recording studio called Sun Records.  He 
wanted to make a record for his mother's birthday.  The secretary at the 
studio, heard Elvis and told her boss, Sam Philips.  Elvis was his dream 
- "a white boy with a "black <A HREF="cruel.mp3">voice</A>".
</P>

<P ALIGN="justify">
In 1955, Elvis appeared on TV in New York.  Then he went to Hollywood and 
made his first film "Love Me Tender".  In the next two years he had many 
hit records and soon became a millionaire.  In his last years, Elvis 
became <B>fat</B> and depressed.  He 
<A HREF="elvis.wav">died</A> of a heart attack in 1977 in 
his house at Graceland.  But for many 
<A HREF="http://www.ibiblio.org/elvis/elvishom.html">fans</A>, 
Elvis Presley is still alive and his songs are still popular.</P>

<H6 ALIGN="center">HTML Demonstration Copyright © 1998 
<A HREF="http://www.marknoble.com">Mark M. Noble</A></H6>
</BLOCKQUOTE>

</BODY>
</HTML>

<BLOCKQUOTE> – Applies a margin to everything within tag.

<BODY BGCOLOR=”white” ALINK=”red”> – BGCOLOR is an attribute of the body tag that affects the background color of the document. ALINK is the color of a link when a user clicks on it.

<P ALIGN=”center”> – ALIGN is an attribute of the Paragraph tag ”

“. Some values I used in this document are “justify” and “center” which allow users to control how a block of text behaves.

<H1 ALIGN=”center”> – The heading tag is used to specify heading size. In the example case, H1 indicates the largest heading size while H6 which appears later in the document represents the smallest heading size.

<U> – Underlined text attribute.

<IMG SRC=”sneer.gif” WIDTH=95 HEIGHT=123 BORDER=0 ALT=”Sneering Elvis” ALIGN=”middle”> – The IMG tag allows you to insert images into an HTML document. The SRC attribute indicates the filename and location on the server. WIDTH and HEIGHT attributes define the width and height of the image in pixels. BORDER allows you to put a border around the image that is the same color as all links on the page (in the early days this was used to illustrate that an image was clickable). ALT is an attribute of the IMG tag which allows users to provide a brief text description of the image (originally for folks with text only browsers, used now to provide commentary or additional information on an image). The ALIGN attribute specifies the alignment of the image with respect to the other text and images in the vicinity.

<A HREF=http://www.marknoble.com>Mark Noble</A> – This is how we make a link. The URL of the linked page belongs within the HREF attribute.

<I> – Italicize text.

<B> – Bold text.

&copy; – This is an ASCII Character Code for the copyright symbol. Any special symbols such as this have a special code that can be looked up in an HTML reference book or on a web page containing a list of the codes and the characters they represent.

Now that you understand how the code works, take a look at the finished page by clicking here.

< < BACK

Personal Access Display Device (PADD) vs. Personal Digital Assistant (PDA)

This page was a comparison between PDA fantasy and PDA reality in 1998.

Background | PADD Facts | Comparison | Discuss


BACKGROUND

The first place I remember seeing a PDA was on the television show Star Trek, The Next Generation (STTNG). Crew members could be seen toting them around. In later episodes, they became so common that some of the extras on the show began to refer to them as “hall passes” (Perhaps as PDA’s become more popular in every day life, this term may catch on within major corporations). I even remember one scene where Captain Picard had a pile of PADD‘s on his desk.

I think that the first device I owned in this form-factor was a Nintendo Game Boy. Mine did not have PIM capabilities (though I recall seeing a keyboard and PIM cartridge that may have seen the market in Japan), nor the ability to synchronize with a desktop computer – but this did not matter to me because I was 14 years old and had no PIM data. I also had no computer.

After graduating from high school, I got a job at CompUSA and was exposed for the first time to the Apple Newton. This was truly an ingenious device – a half-decade ahead of it’s time. Unfortunately, despite many rumors to the contrary, Apple has not announced plans to compete again in this space.

At the moment, the device that comes closest to matching the functionality of a PADD from STTNG is the Windows Mobile (WinMo) device. WinMo devices were made by a number of different manufacturers. For the purposes of this demonstration, I have compared the PADD to a Casio E-125 Pocket PC (an early version of WinMo). As devices better suited to this comparison surface, I may replace the Casio, at the time this article was written it came the closest to the parameters set forth in the STTNG Technical Manual.

TOP


PADD FACTS

In STTNG, the PADD was designed to allow crewmembers to do two things:

  1. execute hardware functions in a variety of locations
  2. manipulate visual information and communicate that information to others aboard ship

In a PADD, there are three replaceable parts:

  • the sarium power loop – we’d call this a battery
  • isolinear memory chip – or for us, a memory card
  • and subspace transceiver assembly (STA) – a cellular modem

In STTNG, the PADD’s are recharged via “induction charging”, though I must recharge my Pocket PC via the synchronization cradle or some other cable based power adaptor. User security is implemented on the main computer system, and this carries over to the device.

Interestingly, with a properly configured PADD, a crewmember could pilot a starship while walking down a hallway on the Enterprise. Admittedly, it would probably be difficult on a small screen, but this gives you an idea of the flexibility of the device.

This can be accomplished because the computer systems in STTNG are viewed as an integrated organism where each component is seen as a cell in a body directed by a central brain. Much as in our own human brains, the processing capabilities are spread throughout the network. Because of this, information can be shared and transferred between devices with ease.

TOP


COMPARISON

PADD Tricorder Casio E-125
CPU: Unknown Unknown VR4122 (150MHz)
OS: Unknown Unknown Microsoft® Windows® for Pocket PC
ROM: Unknown Unknown 16MB
RAM: 4.3 kiloquads Unknown 32MB
 
Display: 4.25 times larger than Tricorder 2.4 x 3.6 cm 6 x 8 cm LCD (240×320 dots), Hyper Amorphous Silicon TFT color liquid crystal, 65,536-color, touch-panel display
Display area: 36.72 cm² 8.64 cm² 48 cm²
 
Expansion: Isolinear Chip Unknown Card slot – CF Card Type II x 1
Interfaces: STA Unknown (STA?) Serial port -RS-232C, USB (Client), Infrared – IrDA 1.2
Communications speed: 4.3 Kqs maximum Unknown 115.2 Kbps maximum
 
Power source life: 16 hours 18 hours Main battery – approx. 8 hours (when repeatedly operated 1 min. and displayed 10 min.) Battery backup – approx. 5 years (when main battery is recharged soon after charge warning message)
Operating Temperature: Unknown Unknown 0-40°C
 
Size: 10 (W) x 15 (L) x 1 (H) cm 8.5 (W) x 12 (L) x 3 (H) cm 8.36 (W) x 13.12 (L) x 2.00 (H) cm
Weight: 130.02 g 353 g 250g (including battery)
Volume: 150 cm³ 306 cm³ 219.37 cm³
Density: 0.87 g/cm³ (est.) 0.87 g/cm³ 0.88 g/cm³
 
Case: Boronite whisker epoxy Unknown Plastic
Max Drop Height: 35 m Unknown Unknown
Sound: Input – Audio pickup sensor Unknown Input – Internal microphone (mono), Output – Internal speaker (mono), headphone jack (stereo)

SOURCE: Star Trek The Next Generation Technical Manual by Rick Sternbach and Michael Okuda.
ISBN: 0-671-70427-3

TOP


DISCUSS

Have anything to contribute on this topic? Weigh-in on the Skype chat.

TOP