--~J[:============================-_., 1so- la-Y-s-a s-a n-a-1;1-d-io-bo-o-·v--..--..--r-c,--- -- -- -- -- -(cid:173)
`n ome ~ car stereos.
`
`Why settle for the moon, when you can give your child
`nine planets, Orion's Belt, and a pink poodle?
`
`Introducing Connie & Bonnie ' s Birthday
`Blastoff.'" The latest sign of intelligent life.
`
`Show your kids there 's more to outer space than
`zapping brain-sucking aliens . Our new CD- ROM is
`Connie & Bonnie 's Birthday Blastoff, an interac tiv e
`interstellar adventure offering a view of
`space seco nd o nly to the front seat
`of the Discovery shuttle.
`
`A launch pad for learning.
`Every page provides new adventures
`and new things to learn_ As Connie and
`Bonnie speed past Mars, kids d iscover
`why it's red, and how much they
`would weigh standing on its surface _
`Fun riddles then challenge your kids to
`ap ply their newfo und kn ow ledge.
`
`And to encourage further exploration, each page suggests
`activities away from the computer, like using a flashlight
`and an apple to study eclipses.
`
`From
`
`More fun than zero gravity.
`connect-the-dots constellations to genuine NASA
`videos, we have every outer space activity
`imaginable. And with our "learn as you
`play" philosophy, they all educate while
`they entertain. One small step by you will
`help your kids make a giant leap in learning.
`Call 1-800-980-9468, Dept. Al029 today to
`try the software, risk-free for 30 days. If
`you're not completely satisfied, return it
`and you'll owe nothing. Or keep
`
`Kids can paint using the fun stamps,
`colors and backgrounds provided.
`
`it for $29.95 plus $4.95 shipping k
`
`and handling. 1
`
`THE SERRCH FOR INTELLIGENT
`LIFE BEGINS RT HOME.'"
`
`----T-t-y-i-t-t-i-s-k-f-r-e-e-f-o-f---3-0-da-V-S---===::==:~~~
`~-------\Coll-1~~4-6-8-D-e-P-t~-A-1-~2-9------
`A ct iv e Arts , 610 SW Br oadway , Ste 500 , Portland , OR 97205 www . act ive-arts .com
`------- ----------
`
`© 1997 Active Aru. Inc. t Shipping and handling may be slightly higher outside the continental United States.
`
`Offer ends
`November I, 1997
`
`Page 81 of 116
`
`Unified Patents Exhibit 1023
`
`

`

`eb searcHes ~
`
`AftaVista, http://wwW.altavista.digital.com
`Excite, http://www.excite.com
`HotBot, http://www.hotbot.com
`lnfoseek, http://www.infoseek.com
`Lycos, http://wwW.lycos.com
`Magellan Internet Guide, http://www.mckinley.com
`Yahoo!, http://www.yahoo.com
`
`W hat we need is White Pages for the Internet. What we
`
`get instead is ... search engines, those free commer(cid:173)
`cial Web sites that let you seek out Web pages and
`other Internet content by specifying the words and
`phrases that you expect to appear in the content. A
`good search engine is as powerful as a sledgehammer, but a
`sledgehammer isn't much good if you're looking for needles in
`haystacks. When you're looking for that one perfect page chock(cid:173)
`full of relevant information, you'd better know all the ins and outs
`of Internet search engines. The more you know, the more likely
`you are to find the needle. Here's a quick lesson on the basics of
`Internet search engines and some tips for getting the most out of
`the popular search sites. -Joseph 0. Holmes
`
`~ The Basics
`
`... ___ Netsce_pe: lnfosee~
`
`infoseeK
`
`!!!!!!! proof of intelligent life on the net sm ~
`•• ugs
`&11G!Ji9110W' ~
`0
`!!!!!!!!1UPS""Services
`
`Ye ll ow Pages Search
`
`Type a ipEdfic question, "phrase in quotes• or Capitalliai Name .
`I
`,..-.,.,-""""""-,-------r--, [ seek J TIP-1-
`./the Web
`Usenet Newsgroups
`News Wires
`Premier News
`lndustr II' Loc111 News
`
`r last-minute filers and more tax time
`
`• news center
`Premier News
`Personalized News
`World
`Business
`Technology.
`:2p.orts
`
`The typical search site on the
`Web offers a text box for entry of a
`few words, called the query, and a
`button that says something
`like
`"Search!" or "Seek!" Press Return
`after typing your search query, or
`click the button to see a page
`displaying a list of the "hits"-that is,
`the pages that match your c:iuery.
`If you're like most people, you
`type a word or two and hit Return,
`you get tens of thousands of hits,
`and then you give up after scrolling
`through
`the
`first dozen or so,
`which are totally irrelevant anyway.
`Guess what? You did the worst
`possible search.
`Don't think of that text box as a
`place to type a keyword or two.
`Instead, think of it as a place to
`ask a question. Your
`first
`impulse should be to ask for
`exactly what you need.
`Surprisingly, almost every
`search
`engine
`does
`a
`respectable job with a query
`such as, "Where can
`I buy
`used Newton MessagePads and
`software?" That's all most people
`probably need
`to know. But you,
`dear MacAddict reader, aren't most people.
`Read on.
`
`'Tl (0
`THIS INFOSEEK SCREEN Is typical of what you'll see in the search engines on the Web.
`
`Hot Tip:
`Want to find all the
`pages that link to your
`home page? lnfoseek and
`AltaVista make it easy, with
`a field search called "link:"
`that lets you look for links
`which point to your URL:
`link: http://yoursite.
`com/-dir/
`index.html
`
`80 MacAOO/CT
`
`Netscape: lnfoseek: sling blade
`
`infos eek®
`
`:BIGf.llJllOW'~
`Yellow Pages Searc h
`
`I UPS
`~ F e
`u
`UPS'" S enrices
`
`You see.rc:hed for sling blade
`
`Sites 1 -10 of 78,353
`
`SEE THAT NUMBER at the bottom of the window? Your search turned up close to
`80,000 hits. Time to narrow the search.
`
`I
`I
`
`§
`
`I
`
`Page 82 of 116
`
`Unified Patents Exhibit 1023
`
`

`

`lfm Understanding Booleans
`
`You can make your query more precise if you take a few min(cid:173)
`utes to learn to use what are known as Boolean search com(cid:173)
`the words and, or, and
`mands. A few simple logical operators-
`not are the most common-help specify the target. For example,
`say you want to search the Web for reviews and criticisms of
`Charles Dickens' novel Great Expectations. First, try a search
`using the Boolean and to ask for all files that contain both the
`word great and the word expectations.
`Internet search engines don't follow strict Boolean
`I
`rules. The a nd operator doesn 't guarantee that a word will
`appear in a found document-it simply moves documents that
`contain the words closer to the top of the list; that is, higher in
`the ranking. To require that found documents include a certain
`word, most sites let you add a plus sign (+) to the word, like
`so: +g o lf. Similarly, add a minus sign (- )to be sure that the
`word does not appear in found documents.
`
`TYP• • specific question. "pi>rue In quotes" or Capitalized Nune.
`I areat and erpectatiOM
`I theWob
`
`I~ Iip.l
`
`Nice job. Unfortunately, the search result reports that
`300,000 Web pages contain both words. Lesson one: Use
`enough terms to get specific but not so many that you eliminate
`relevant hits.
`Adding the word dickens will help a lot. So will putting
`expecta t ions" , which
`quotation marks around "great
`shows the search engine that you're looking for an exact phrase,
`not separate words located anywhere within the Web page.
`
`IB Refining the Results
`
`Now narrow the search even more, to criticisms or reviews of
`the work, by using a Boolean or . Note the use of parentheses
`to group terms:
`
`"pbnse In quotes• or Capltolized Name.
`T o •
`dickens 8Dd •great ez:pectatiOD5• am (reviev or criticisa)
`l theWeb
`I~ Ii~
`
`That's better. You eliminated a lot of irrelevant material, but
`the list of hits still includes movie and play reviews. Narrow the
`search even more with a Boolean not:
`
`T e a specific question. -p11nse in quotes- or Capitalized Name.
`dickens 8Jld •greet expectations• and (review or criticis:a) not (play or aovie)
`l the Web
`I [ seek J Ii~
`
`Now you're getting there! This
`search would turn up only documents
`that include the phrase great expec(cid:173)
`tations, the word dickens, and
`either the word criticism or the
`word review. And it would exclude
`any document that met all the
`above criteria but also included
`the word movie or play. Just when
`you thought you were done(cid:173)
`you're close. In fact, you probably
`have almost what you need. Now it's
`time to refine your search.
`
`Microsoft Internet Explorer
`lets you add your favorite
`search engine to a toolbar button.
`Just go to the search site's home
`page, open Internet Explorer's
`Preferences window under the
`Edit menu, and click the
`Home/Search Page tab. Use
`the pull-down menu to set
`your Search Page default.
`
`You can be virtually certain that the results of your query will
`turn up many, many hits, most of which have no relevance at all.
`Don 't despair. There's still a good chance that the first page or
`two of hits will hold some gems. Remember, the hits are ranked
`in order of most precise match.
`If you flip through the top 20 or 30 hits in vain, it may be time
`to rethink your query. First, examine the results to see what's
`
`going wrong. Look at irrelevant hits and think about how you
`might eliminate them with a better query. For example, if a query
`including Apple turns up too many orchards, add not {tree
`or fruit or orc hard ) and search again. Narrow your query
`by adding more required keywords. Alternately, if a search
`turns up too few-or no-matches, then broaden the query by
`eliminating some required terms.
`
`Extra!
`
`A II
`
`the search engines we've
`mentioned offer specialized infor(cid:173)
`mation in addition to Internet searches.
`Here are some of the more interesting
`and useful:
`• City maps and travel information.
`Several sites, including Yahoo, lnfoseek,
`and Excite, offer detailed city guides with
`full-color road maps. Type your address
`and get a map of your neighborhood-
`great for printing party directions!
`• Yahool's specially designed area just
`for kids, with a search engine, directory,
`cool links, and more. It not only keeps kids farther away from often-
`
`'OnClk:k: @Center 0Zoom Out Qldenl!fykon
`M4liNlflCAn\J.,IIJIJIJIJIJ I)I)I)f) <l pan!)
`·iK>,
`"' ...... ""
`•t..r'Ht ~'V..il
`world
`~
`~.,,~i.v=-== .. =,~====================:;.~~
`WHO KNEW that Excite's mapping service could find my par(cid:173)
`ent's house in a little Pennsylvania town, population 3,000?
`
`sive material but also offers a good
`focus on kid-friendly stuff.
`• Search Voyeur. Here's an eye(cid:173)
`opener. Check out Magellan's Search
`Voyeur at http://voyeur.mckinley.com/
`voyeur.cgi.
`It displays
`randomly
`selected searches being performed
`as you watch. You'll be surprised (or
`not) at what people are looking for!
`• Specialized access to current news,
`stock quotes, sports scores, and email
`addresses. All of these search sites
`offer these resources-so don't think
`of them simply as a place for a search!
`
`cit;y
`
`MacAOOICT 81
`
`Page 83 of 116
`
`Unified Patents Exhibit 1023
`
`

`

`_ .,.
`
`,_ _
`
`___ Ji-"_ ... .,......._,
`
`-. ..-......
`-.-.... ,
`-.---a.
`~.._ .. ...,
`--&ll-(AN!))
`--...,-cm>
`,....,_
`ltlllllU.0--,. ... e.p,~-,..,...
`
`• Use restricting "operators"
`to search titles or URLs only.
`Put the operator t : before a
`search term to limit the search
`to titles of documents contain(cid:173)
`ing the word. The u : restricts
`the search to URLs containing
`the word . For example,
`t : moonbeams
`finds a page
`titled Moonbeams Become Marshmallows, and u: apple finds
`pages at http://www.apple.com as well as at http://www.smith&jones/
`-orchards/apple.html.
`• Use the wildcard character (*) for partial matches. A search
`for busi • finds the words business, businesses, and busiest.
`• Go to the Search Options page, and use the time restriction
`feature to find documents newer than a certain date. From the
`same screen, you also can use radio buttons to select Boolean
`search terms.
`
`O"'-'-""
`jl WtUllol
`
`PW.Oftly-llnnt'~"Mfll>o.-~
`
`YAHOO LETS YOU CUSTOMIZE a search
`with this handy interface.
`
`• Take advantage of Lycos' ability to search for pictures or
`sounds. It works remarkably well. To use this ability, click on the
`Custom Search link on Lycos'
`home page. Then use
`the
`pull-down menu under Search:
`to choose Sounds or Pictures.
`• Similarly, click on Lycos'
`Custom Search button
`for
`pop-up menus of common
`Boolean terms.
`• Lycos doesn't need a wild-
`card to search for variations on
`a word. It automatically does a "loose" search. To force Lycos to
`make an exact match, follow the word with a period. For example,
`auto. finds auto but not automobile.
`
`USE LYCOS' CUSTOM SEARCH lo use
`easy, pop-up menus.
`
`m e rau 1thet1 gunc!Uk VOI
`
`• When using the Boolean AND, OR, and AND NOT operators,
`be sure to type them in all caps
`in Excite.
`• Use Excite's More Like This
`option. The phrase appears next to
`all hits, and it performs another
`search to find pages like the hit,
`rather than like your search query.
`• Sort your search results by site,
`using the View by Web Site option.
`
`~~:~'JZ::!f.:.'J!S:,~J~I
`~vodbyhN•,,.rywhoro. tlu.truonn.ai-nc.monho!pedlhreo
`lmtldl
`lntt....o.nd6'<t11Mun..S...tl•.8eollnfor.0Unli.F.nOlll>Cool
`
`EXCITE CAN BASE a new search on
`the found page rather than on the
`original search.
`
`when an Internet directory, a hierarchical
`listing of sites, would work better. Hierarchical
`directories start you with a list of general
`categories such as Entertainment, News, and
`Computers. Choose a category and click your
`way through ever-finer subcategories to eventually reach a select
`list of suggested sites. Because directories list only select sites,
`
`• Bml.l.Uml (;;f}j •le'<Jt
`·~ (5.!/ f'lr:WI
`· ~ tal) t<lol•
`
`(12)
`
`. . . .
`
`Y ou may be turning to a search engine
`
`82 MacAOO/CT
`
`It lets you see which sites have the most hits and makes browsing
`those hits easier.
`
`• Using capital letters
`anywhere in search words
`finds only matches using
`the same capitalization(cid:173)
`NeXT finds the company
`and operating system, not
`the random word next.
`Use all lowercase letters
`if you want to find all
`varieties of capitalization.
`• Use AltaVista's Ad-
`vanced Query for Boolean
`searches (you'll find it in AltaVista's home page banner). From that
`screen you also can set the search dates and give certain terms
`higher priority.
`
`FROM ALTAVISTA'S Advanced Query
`screen, you can specify several
`different ways to narrow your search.
`
`• After lnfoseek gives the results of your search, check out the
`Related Topics. One may be just what you want.
`• When searching for people or titles, capitalize the words and
`lnfoseek will treat them as a single name or title: Gone With
`The Wind .
`• Use a comma to separate names and titles: Bill Clinton,
`Newt Gingrich, The Washington Post .
`• Use the "pipe" (I) to find hits within a group of hits:
`I Bill Clinton searches among the sites
`Whitewater
`mentioning Whitewater to find sites also mentioning Bill Clinton.
`• Check out lnfoseek's variety of search databases. In addition to
`the Web and Usenet, you can search Web FAQs, email addresses,
`company profiles, and several news databases. Find a list of these
`resources in a pull-down menu next to the Seek button.
`
`~
`~1"'
`You search ed for Steve B\UClmll
`
`sua 1 • 10 of1.459
`
`. DWillfil
`
`Related Topks
`Persona!ized News ~ ~·-~~
`~ ~y:As:t1onmov1es
`
`Sites 1 · 10of1.459
`
`AFTER IT PERFORMS A SEARCH, lnfoseek lets you view sites on
`related topics- you're in hyperllnk heaven.
`
`THROUGH THE MIRACLE of Adobe
`Photoshop, we remor
`the banner ad from
`this Yahoo! screen (
`1rom all our other
`screenshots in this article). Don't you wish
`you could really do that on the Web?
`
`• .ID!:ilm. lSJ ~I
`
`•
`
`(Z!J N!loll
`
`your search won't tum up thousands
`of tiny or irrelevant home pages.
`Two of the most popular directories
`are Yahoo! (http://www.yahoo.com) and Magellan Internet Guide
`(http://www.mckinley.com).
`
`:==:.tLm
`=~ti)
`~~===;·j..._gj~-~r.~..,~9~m=""=MJ
`
`6
`.,
`"' '
`"""""-"'""""""-~~~~~~~~~-'-=-=
`
`Page 84 of 116
`
`Unified Patents Exhibit 1023
`
`

`

`La WANG ts
`
`for Macintosh®
`
`Lo WANG IS COMING TD THE LAND OF
`
`THE RISING SUN TD TURN OUT THE
`
`LIGHTS. SHADOW WARRIOR,
`
`THE ZEN IS GOING
`
`TD HIT THE FAN,
`
`Page 85 of 116
`
`Unified Patents Exhibit 1023
`
`

`

`sktop a
`
`c ..
`
`The second design element to remember is that your image must
`line up properly with itself for repeated tiling across and down the
`desktop. This requirement means that your image must be seamless.
`There's nothing more loathsome than a tiled image that mysteriously
`reveals its dimensions on the desktop.
`Finally, the image shouldn't look like a tiled background image.
`For example, brick walls are a definite no-no. This final point is the
`true point of demarcation between a good desktop pattern and a
`cliche. -Dave Prochnow (with valuable desktop pattern artwork
`provided by Kathy Prochnow)
`
`Eig ht steps for creatin g customized, seam less, tiled desktop pattern s.
`
`T ired of the dull desktop pattern that came preinstalled on
`~ FIND MORE
`
`DESKTOP
`PATTERNS
`on our Web
`site and on
`The Disc.
`
`your Mac? Want to have your desktop declare its individ(cid:173)
`uality? Granted, you could use one of the 64 built-in patterns
`supplied by Apple, but that's so .. . corporate. If you 're a true
`rebel with a passion for patterns, and your Mac is armed with
`Adobe Photoshop, you can use the following simple procedure for
`making a seamlessly tiled desktop pattern from nearly any artwork.
`There are several keys elements to making a successful desk(cid:173)
`top pattern for your Mac. First, the image that will be your tile must
`not exceed a dimensional total of 16,384 pixels. In other words,
`when you multiply the width by the height of
`the image that you'll be tiling, the total can't be
`larger than 16,384 pixels. For example, the tradi(cid:173)
`tional 64-x-64-pixel image tile that is supplied by
`Apple inside the Desktop Patterns application has
`a total of 4,096 pixels. Likewise, the largest Apple
`image (the one with the teddy bear motiO is a
`128-x-128 pattern, the maximum 16,384 pixels
`in surface area.
`
`
`
`~ ~ New ~ --
`
`~ Start a New File
`¥ " ==11
`I OCii
`I Cancel J
`II
`II
`
`Neme: !stamps
`
`,.......... image Size: 48K
`Width: §:::=J I plHels
`!!Tl
`Height: §:::=J ~
`Resolution: ~ I plHels/lnch I •I
`Mode: I RGB Color H
`
`- Contents
`fl White
`0 Background Color
`O Transpnrent
`
`Gather Your Artwork
`
`Import the artwork you want to use as your background. Jn
`this case, we scanned five postage stamps and then opened
`them in Photoshop as separate files.
`
`Open Photoshop
`and start a new
`file called Stamps.
`Make this file 128
`pixels wide by 128
`pixels high. Use a
`resolution of 72
`pixels per inch.
`
`~ Create Layers
`
`Create four new layers in your 128-x-
`128 Stamps file. Now drag each stamp
`file onto a separate layer (Note: The ini(cid:173)
`tial layer is called the background in
`Photoshop). After filling all the layers,
`close the five individual stamp files.
`Return to your main Stamps file, and
`hide all the layers by clicking the
`Show/Hide icon in the Layers palette.
`
`l@lf7 I
`[@ ll I ~1 stamp4
`l@l! l& lstamp3
`!@Ii / ~ I stamp2
`
`84 MacADDICT
`
`Page 86 of 116
`
`Unified Patents Exhibit 1023
`
`

`

`Choose a theme for your tiled background. Jelly beans,
`stamps, paper clips, and, of course, ants work great Also
`experiment with snowflakes, fall leaves, spring flowers, pasta,
`and coins for achieving the perfect desktop pattern.
`Use a solid background; black, white, or any color that is differ(cid:173)
`ent from the color(s) of your selected image.
`Select at least three different images for making into the final
`
`Shift the Image
`
`Of fse t
`
`§Ji9§ stam ps @ I 003
`
`(RG §Iii
`0
`
`In the Filter > Other menu, click on Offset.
`In the Offset window, enter 20 pixels right
`for Horizontal and 20 pixels down for
`Vertical, click Wrap Around, and conclude
`with OK. This step shifts the image over
`and down 20 pixels. This action gives the
`images a more random effect, one that is
`more visually pleasing.
`
`Horizontal: l~I piHels right
`
`f(
`
`OK
`
`Uertical: ~ piHels down
`
`Reset
`
`JJ
`
`)
`
`Undefined Rreas
`O Set to Background
`O Repeat Edge PiHels
`f> Wrap Rround
`
`[2) Pre11iew
`
`Merge the Layers RI Test the Pattern
`given a I [ Contents
`["~""'
`Stamps ! Opacity: ID'.t
`t Menu. I 0 Preserve Transparency
`
`Use: j Pattern
`
`OD
`I~
`
`[ Cancel J
`
`Mode: I Norm al
`
`I• I
`
`On the Layers palette,
`select Show Layer 1, then
`move Layer 1 with the
`Move tool. You should
`fine-tune this process until
`you're happy with
`the
`placement of Layer 1 .
`When you're satisfied,
`merge Layer 1 with the
`Background using
`the
`Merge Layers command.
`
`I
`I
`
`-
`
`..
`
`Fill
`
`To test the background
`pattern,
`open a new file that you've
`pixels.
`screen size of 600 x 400
`nto this
`Now insert the pattern i
`new test file. To insert the
`
`en click file, choose Select All, th
`Define Pattern in the Edi
`pattern
`Finally, you must tile this
`ing Fill from the Edit menu. In the Fill
`across the test file by select
`or the Contents Use, 100% for the
`window, choose Pattern f
`Opacity, and Normal for th
`e Mode.
`
`ike many of the other utilities that Apple effused into the Mac's
`lifeblood, Desktop Patterns offers several undocumented features
`that add more zing to your thing.
`Hold down the Option key inside the Desktop Patterns window to
`toggle the Set Desktop Pattern button to Set Utilities Pattern. In this
`toggled mode, any selected pattern becomes the background
`pattern for all your System utilities.
`Any PICT file can be dragged into Desktop Patterns for use as a
`pattern. This includes images from SimpleText and ClarisWorks
`Paint.
`Double-clicking any selected pattern is equivalent to clicking the
`Set Desktop Pattern button.
`Each 64-x-64-pixel pattern inside the Desktop Patterns application
`consumes approximately 4.5K to 12K of hard disk storage space.
`By deleting unwanted patterns, you can recover valuable disk stor(cid:173)
`age space and transform the original unwieldy 64-image pattern
`library into a manageable customized catalog of 10 to 20 images.
`
`Store this file offline ...,......;."--....--.~....:~~~:.....;;~u.ia:a:i~~!llil
`as a backup for your
`creative tinkering.
`ResEdit, the ubiqui(cid:173)
`tous resource editing
`utility, can manipulate
`patterns smaller than
`64 x 64 pixels
`in
`dimension. Just look
`for the ppat resource
`inside
`the Desktop
`Pattern Prefs file.
`
`MacADDICT 85
`
`Page 87 of 116
`
`Unified Patents Exhibit 1023
`
`

`

`Tweak the Pattern
`
`~ Install the Patter,n
`
`through 6, as
`needed, until
`all the layers
`are success(cid:173)
`fully merged
`and
`you're
`happy with
`the pattern.
`
`To install your new pattern, first open the Desk(cid:173)
`top Patterns control panel (found in System 7.5
`and later). Drag your new pattern from Photo(cid:173)
`shop into the Desktop Patterns image selection
`window. Alternately, copy the image inside
`Photoshop and paste it into the Desktop
`Patterns window. In either case, click Set
`Desktop Pattern, and your art will be tiled!
`
`Dave Prochnow began his interest in desktop
`patterns following a successful gig in England
`flattening crops into alien patterns.
`
`ADVERTISIN G
`HOW TO CONTACT US
`
`To reserve ad space in the
`magazine, on the MacAddict
`website or for more information,
`please contact one of our
`Advertising Representatives.
`
`FAX 41 5-468-4686
`www.macaddict.com
`
`in1af!i11e
`
`_,
`a new way of publi shing
`
`MacAddict
`150 North Hill Drive
`Brisbane, CA 94005
`
`Page 88 of 116
`
`Unified Patents Exhibit 1023
`
`

`

`• uc1n ••• •
`• • • • • 4 • •
`••
`• ••••
`• ••••
`•••••
`• • • • •
`• • • • •
`-llliii • • • •
`
`•
`
`4
`
`Intro
`the MacAddict Collection
`MacAddict I
`
`No self-respecting Mac addict should be without these essentials. These items are so cool that even your
`misguided PC friends will want to wear them. In fact, why not buy one for them as a gift?
`•
`•
`
`T·shirt
`"It's not for everyone"
`
`• short sleeve
`$13
`
`•
`
`long sleeve
`$18
`
`M, L, XL
`(100% cotton)
`
`MacAddict Cap
`
`(one size fits all) $18
`
`soft crown,
`brushed cotton with
`embroidered logo,
`adjustable Velcro
`backing
`
`FRONT·
`
`FRONT
`
`BACK
`
`Order Form
`T·shirt, short:
`T·shirt, long:
`Cap:
`
`$13 x Qty _
`$18xQty _
`$18xQty _
`
`=
`=
`=
`
`Subtotal
`California residents please add 8.5% sales tax
`
`Postage and handling-United States
`
`Postage and handling-Canada
`
`Postage and handling-International
`
`Total
`
`$ __
`$ __
`$ __
`
`$ __
`
`$5.00
`$7 .so
`$15.00
`
`$ =
`
`Credit Card Information
`Amex _
`Visa _
`Mastercard _
`Card Number ____________ Exp Date __
`Signature ________________ _
`Name _______ __________ _
`Address ________________ _
`City, State, ZiP- - - - - - - - - - - - - - - -
`Phone/E-mail _____________ _ _ _
`
`Orders must include payment. Prod ucts subject to availability and may change without notice.
`Please allow 4-6 weeks for delivery. All checks must be in U.S. dollars and drawn on a U.S. bank
`account. MacAddict is not responsible for any duties or taxes imposed by countries other than
`the United States during the delivery of international orders.
`
`Please list other items you would like us to carry ______ _
`
`To order •••
`
`call toll·free:
`1 888·468· 1300
`
`or send check or money order to:
`MacAddict
`c /o Intaglio Productions
`1616 York Street
`
`•
`• •
`•
`
`Page 89 of 116
`
`Unified Patents Exhibit 1023
`
`

`

`Your final lesson on how to use style sheets for creative page design .
`
`Because they bring some true page layout capabilities to Web
`
`page design, style sheets are about to revolutionize the design
`of Web pages. In the last two issues, you learned how to cre(cid:173)
`ate style sheets and style sheet parameters such as margin set(cid:173)
`tings and <DIV> tags to work with layout in unusual ways. You even
`learned to create the graphical-looking splash shown here using pure
`HTML text and no graphics-not even a background image.
`To create this design, called Backtex1 Words, you simply create two
`style classes, one of which (see "Foretext style text!" in tl1e screenshot)
`you move up over tl1e other by setting its margin-top property to a neg(cid:173)
`ative value-in tllis case, -50. At tight is tl1e HTML for the whole page.
`If you haven't already typed it into your favotite HTML text editor, do it
`now, and warm up a styles-savvy browser such as Microsoft Internet
`Explorer 3.x or Netscape Communicator. -Joseph 0. Holmes
`
`<HTML>
`<HEAD>
`<STYLE TYPE="text/css">
`<!--
`
`.backgtext{color: orange;
`font-size: 60px;
`font-family: Arial Black, helvetica,
`sans-serif}
`
`. foregtext{color: black;
`font-size: 18px;
`margin-top: -50;
`font-family: Arial, helvetica, sans-serif}
`
`§Iii§
`
`file:! // .. ./fore teHLeHample.html §
`
`IID::
`
`-->
`</STYLE>
`</HEAD>
`
`<BODY>
`
`t
`
`<DIV CLASS=backgtext>Backtext</DIV>
`<DIV CLASS=foregtext>Foretext style text!</DIV>
`
`</BODY>
`</HTML>
`
`Using the Line-Height Property
`Now let's look at another way to move text around, tllis time from
`within a single style rather th~m by overlapping two styles. You're
`going to add a line-height property to the defulition of the back(cid:173)
`ground text's style. Line-height is tl1e srune thing tl1at page layout folks
`know as leading (pronounced "ledding") ru1d what your word
`processor manual probably calls line spacing. It's the distance
`between ilie baseline of one line ru1d the baseline of ilie next,
`so it controls how close a line of text comes to the line
`above it.
`First, you '11 need to change the "backgtext" con-
`tent from the word Backtext to the phrase Backtext
`Words so that it takes up two lines in the browser
`window. Then you'll need to put a break tag
`between tl1e words. After the change you should
`have this:
`<DIVCLASS=backgtext>Backtext<BR>
`Words</DIV>
`That gives you the two-line look (shown at right)
`in the browser.
`
`Hot Tip:
`A trick to remember
`when working with spe(cid:173)
`cific layouts like this is to
`break up lines with a <BR>
`tag. We inserted a break tag
`(Backlexl<BR>Words) to
`force the phrase to display
`on two lines no matter
`how wide the visitor's
`window is.
`
`88 MacAODICT
`
`ex
`
`Page 90 of 116
`
`Unified Patents Exhibit 1023
`
`

`

`Now's the time to make the lines much more interesting. Add a
`line height of 40 pixels to our "backgtext" style class, like so:
`.backgtext{color: orange;
`line-height: 40px;
`font-size: 60px;
`font-family: Arial Black, helvetica, sans(cid:173)
`
`seri f}
`You can place the line-height property :mywhere in the declaration.
`The result is at right (we left out the foreground text to make the pic(cid:173)
`ture clearer). How did we do tltis trick? Compare the font size ( 60px)
`with the line height ( 40px). By setting t11e line height smaller t11ru1 the
`font size, we made the two lines of text overlap. What would be unread(cid:173)
`able in body text is positively artistic in a background display headline!
`
`Triple Your Fun
`At the beginning of this series on style sheets (Aug/97, p80) , we
`showed you ru1 example of overlapped text in three distinct sections.
`Don't even tltink about trying to figure out exactly how mruly pixels
`you need to move aU that text on the page so that it overlaps just
`
`r.. .
`~ X Back
`
`file:// / .. .lstylesheet3.html
`fi1
`@)] ~ ~ ~
`•
`Forward Hom• Refresh
`Images Open Print
`
`§IB~ file:/ I I ~ . ./back teHLeHample.html ~Iii
`
`ck ext
`rets
`
`right. Instead, work in three individual <DIV> divisions. That is, get
`one pair of overlapping text blocks working just how you like them,
`then repeat it as often as you like, creating distinct divisions on the
`page for each block.
`Here's the HTML that was used in the body of the first exrunple
`page. Each of the "headinghl" classes in this exrunple has its margin(cid:173)
`top property set to -45px to bring it up over the background. Notice
`that each division essentiaUy is identical to the previous one, except
`for the content ru1d URL:
`
`Go Home
`
`<BODY bgcolor=ffEEZZ>
`<C ENTER>
`
`Creating Drop Shadows
`Another interesting, if ugly, use for overlapping text is to create a
`drop-shadow effect in a title. It's relatively simple. Just place two bits of
`identic:tl text on top of each rulotl1e1; diffe1ing only their text color ruld
`
`<DIV ALIGN=CENTER CLASS=heading>HOME </OIV>
`<DIV
`ALIGN=CENTER
`CLASS=headinghl><a
`href="home.html ">Go Home</a></DIV>
`
`<DIV ALIGN=CENTER CLASS=heading>START</ DIV>
`<DIV
`ALIGN=CENTER
`CLASS=headinghl><a
`href=" start. html"> Start Here</ a></DIV>
`
`<DIV ALIGN=CENTER CLASS=heading>EMAIL</DIV>
`<DIV
`ALIGN=CENTER
`CLASS=headinghl><a
`href="email.html ">Write to Me</a></DIV>
`</CENTER>
`</BODY>
`
`margins. The shadow text's color should probably be lighter thrul the
`foreground's, ru1d the shadow's margin settings should be lower ruld
`fru1her to tl1e right or left. Here's the HTML for tl1e two styles, wltich we
`nru11ed "shadow," wltich is tl1e shadow (duh!), ruld "foregroll11d,"
`wltich is tl1e foreground (double duh!) . The style defutitions, as in aU
`our exrunples, are placed inside tl1e header of our HTML page:
`.shadow {color: teal ;
`margin-top: -30 ;
`margin -left : 20px ;
`font-size: 50px;
`font-family:
`Impact, Arial ,
`sans -serif }
`.foreground {color: navy;
`margin -top: -68px;
`margin-left: 10px;
`fo nt- size: 50px;
`font-family:
`Impact, Arial, helvetica,
`sa ns- se rif }
`
`helvetica,
`
`MacADDICT 89
`
`Page 91 of 116
`
`Unified Patents Exhibit 1023
`
`

`

`shows what the drop shadows we created look like to a visitor using
`Netscape Navigator 3.0.1. It's not unreadable, by any means, but it's
`also not exactly what we have in mind for visitors to see ... .
`
`~ Netsce e: St le Sheet Le out ~RU
`I. lmo11'i1•• I. Op•n
`I
`
`Title111??
`Drop She.dow•I
`Drop She.dow•I
`
`And here's how the classes are used in the body:
`<DIV CLASS=mast>Titles??</DIV>
`<DIV CLASS=shadow>Drop Shadows!</DIV>
`<DIV CLASS=foreground>Drop Shadows!
`</DIV>
`This is precisely the same technique used to create
`our Backtext Words example, only this time we over(cid:173)
`lapped identical pairs of words and moved one of them
`only a slight bit relative to the other. As always, the only
`way to know exactly how much to move your margin(cid:173)
`top and margin-right values is trial and error.
`Our sincerest apologies for the icky color choices(cid:173)
`you just aren't going to find the subtleties of true page
`layout in style sheets quite yet. And, as always, remem(cid:173)
`ber that many browsers are going to display something
`completely different from what you see when previewing
`in your style-sheet-capable browser. This screenshot
`
`Table Hopping With HTML
`As you bring style sheets into your everyday repertoire of HTML
`techniques, remember that you can incorporate any of these style
`experiments into your usual HTML formatting ideas-inside tables,
`for example, or inside frames. Below is an example that uses both
`style sheets and a typical table layout. The fonts all were colored
`with style sheets, and we assigned a background color to o