brianjn
2009-03-13 23:05:17 |
Graphics on Perplexus
Graphics on Perplexus
<hr>
Perplexus is a forum dedicated to collecting different genre of puzzles. Many of the puzzles have been enhanced with graphics. While site security restricts what a member may post all of those formats are available by following our protocol.
Two entries follow this which may prove useful. The first is "Symbols" not available directly from the keyboard, and then "File Types" where some of the Graphic techniques and symbols have been employed.
Note that levik advises that GIF or JPG images be sent to him for on-site inclusion where needed for a problem; scholars are loathe to make public a problem with a graphic that has an external URL unless it has already been lodged with levik.
This is not a tutorial but rather a resource of various techniques and examples as to how they have been applied on Perplexus.
Questions may be asked in the Forums with due clarification by members who are able.
Should a scholar be required to post a problem on behalf of a member, for reasons offered below, a text file, either as ".txt" or ".htm/.html" format, should be attached. That will often be the scholar's point of reference should there be need for future edits.
Note too. We all are at liberty to use all of these techniques but there are administrative impositions that restrict one's personal ability to post many of them directly to the site. Some restrictions are relaxed as one moves through the ranks with administrator levik having full rights.
If ever your HTML syntax (or other code) is quite correct but your post is visually corrupt when posted on site then your rank does not command an appropriate administrative privilege; you need the assistance of a scholar in the first instance, or levik.
Graphic Techniques Available
A. Font Effects.
1. The BR, P, B, I and U HTML tags are available to all.
2. Font sizing and coloring.
Font Sizing and coloring, has proven quite useful to emphasise some mathematical symbols.
The SUP and SUB pair are available to all to provide for power indices and suffix labelling, eg, B0,B1... but FONT SIZE and FONT COLOR are restricted.
This calculus problem makes use of some of those techniques.
3. Entity coding for special characters, ie, non-alphanumeric. (See the list) - next entry.
B. Pictorial
1. Keyboard/ASCII diagrams.
The PRE tag is virtually essential for these to avoid lots of & #nbsp; code insertions.
One needs to build the image in a text editor (Notepad) and embed it within PRE tags.
This illustrates the concept well, and does include font color (needed scholar assist). If you do not have clearance for the tag ask for a scholar to accept an email of the text since it can sometimes be impossible to rebuild what is seen on site (and View Page Source). See Note 2 under Symbols - next entry.
2. JPG or GIF images.
The IMG tag locates your image within the problem. Scholars, if notified, can make your image visible within the queue, and in public, provided the URL is known. They cannot place it on site. We recommend a current scholar receive a Cc: email when notifying levik of your graphic.
3. Animated GIFs.
Multiple differing images are compressed into one entity. This illustrates the author's point well. There are free editors on the Web it you don't have one. As these need to be located on site, the above statement is applicable, ie, notify levik.
4. HTML tables.
These can offer some great effects but they can be highly "dangerous" when formatting a nested display, one incorrectly placed tag can take a long time to debug. One table envelopes four in this example.
These would be corrupted on posting so one should seek a scholar to accept an email of the actual HTML file so that it can be posted through "Scholar Edit". Any further edit by the member needs to be advised to scholars either by email or in the "Votes/Notes:" comments of the said problem to avoid subsequent corruption. If the edit is within the HTML table then that will need to be re-emailed.
Apart from being the actual graphic object that forms the graphic the table may also serve as a layout tool, but the above comments still apply.
If you wish to use this technique please view the page source code where this has been used.
5. XHTML tables with a spreadsheet appearance.
HTML cannot format internal table borders with varying "weight" of width.
Federico Kereki's implemention notes are here and this is the example he noted.
A member should put the body text on site, and then send to an accepting scholar such files as required. These will vary according to scholar comfort, but for safety attempt to have the XHTML perfect on the home computer.
6. Scripted Graphics.
"Tweaking" HTML tags has provided for some intrigue, like this one.
Javascript combined with HTML offers a range of possibilities.
There are possibilities for demonstration of an idea, or maybe offering data in a dynamic way.
With some creativity problems might allow for the development of an on-line interactive solution.
Some key elements here are:
Choose the HTML tag to reference, give it an ID name and reference it in the script.
These may take the form of:
var cellHold = new Array();
.....
var ct1=document.getElementById("top1");
ct1.innerHTHL=cellHold[1];
<center>Look at the Page Source of problems using Javascript
in the File Type listing to get more information.<center>
Again, any scripts must be offered for scholar post and they must work; no scholar will attempt to debug a faulty script. Sorry, accept that all members are amateurs even though some skills may appear quite professional.
In summary, if you have a problem that utilises some form of tagged scripting and it works for you on your browser, these can be given life on Perplexus only by a scholar or levik.
Test your layout?
The background color of the Perplexus problem area is approximately "#E1E7E7".
For a preview of what a problem would look like on Perplexus I include that code as the BGCOLOR parameter in my BODY tag within my HTML editor.
I usually like to include my problem in an HTML table that has one cell. Setting the width parameter for the table to 50% closely approximates the width of the column in which it will be displayed on Perplexus.
Browsers
Web browser idiosyncrasies may mean having to make adjustments for presentation, however with IE, Firefox, Opera and some Macs being reported as our most used viewing platforms, this is reasonably rare.
|
brianjn
2009-03-13 23:07:19 |
Re: Graphics on Perplexus-Pt2 - Symbols
Most of these symbols are not available from the keyboard.
These symbols are available by using either the Numerical Entity Code or the Named Entity Code. When creating these symbols one needs to omit the included space but remember to include the semicolon. It may be necessary to enclose some of these with B tags to gain their full effect.
Importantly, note that a space has been added between the "&" and the remaining code; omit the space, it has been included here only for editorial reasons!
Symbol Num. Named Symbol Num. Named
Code Code Code Code
/ & #47; \ & #92;
° & #176; & deg;
< & #60; & lt; > & #62; & gt;
≅ & #8773; & conj; ≈ & #8776; & asymp;
≠ & #8800; & ne; ≡ & #8801; & equiv;
≥ & #8805; & ge; ≤ & #8804; & le;
¼ [1/4] & #188; & frac14; ½ [1/2] & #189; & frac12;
¾ [3/4] & #190; & frac34;
± & #177; & plusmn; ÷ & #247; & #divide;
× & #215; & times; ∫ & #8747; & int;
√ & #8730; & radic; ∝ & #8733; & prop;
∞ & #8734; & infin; ∠ & #8736; & ang;
∑ & #8721; & sum;
∴ & #8756; & there4;
– & ndash; — & mdash;
¢ & cent; $ & #36;
£ & #163; & pound; ¥ & #165; & yen;
Set Notations
∩ & #8745; & cap; ∪ & #8746; & cup;
⊂ & #8834; & sub; ⊃ & #8835; & sup;
⊄ & #8836; & nsub; ⊆ & #8838; & sube;
⊇ & #8839; & supe; <font size=\"4\">⊕<font> & #8853; & oplus;
<font size=\"4\">⊗<font> & #8855; & otimes;
[ 'oplus' and 'otimes' would need font size if used, they are enhanced here].
Some significant Greek characters:
Δ & #916; & Delta; Π & #928; & Pi;
Σ & #931; & Sigma; α & #945; & alpha;
β & #946; & beta; γ & #947; & gamma;
Note: 1. The Greek capitals may be created with the Named Entity Code
with the first letter being capitalised as in Delta, Pi and
Sigma above.
The lowercase (alpha, beta, gamma) is created in a similar
fashion but all letters in the name are lowercase.
2. The non-breaking space & nbsp; or & #160; may be used to pad
out spaces. HTML collapses spaces created by the space bar,
or & #32;. This means that one can avoid PRE tags but such a
practice is very tedious!
What a difference two roots make! uses & infin; & rarr; and & radic; . Check the page source code.
Visit unicode.org for a diverse collection of codes,
but note that all will not be displayed correctly in some/all browsers.
|
brianjn
2009-03-13 23:09:19 |
Re: Graphics on Perplexus -Pt3- FileType
The following list is of files where attributes of HTML tags have been invoked, HTML tables have been employed, XHTML stylesheets have been similarly employed and Javascripts have been added to the problem for some special effect. Naturally some could have been listed in more than one category, I've just chosen two.
The main reason for this inclusion is to allow a viewer to understand the structure of non jpg/gif graphics, and get some understanding of how to build other HTML and Javascript formats (which will need to forwarded to a scholar/levik for installation) with the suggestion for posers to study the Page Source.
This page will not be further maintained.
TAG attributes
XX [This is also Javascript]
It's not There
Devious Kinder Blocks [uses HTML tables as well]
HTML
Gyro Lattice 3 - Values
Devious Kinder Blocks
Gyro Lattice 4 - Significant Constants
Checker Masks
Prime All
Prime Central
Locksmith
Bulbs and Switches
Knave's Tour
XHTML
Logidoku
ABCD
Rainbow Triplets
Eight Each Way
All the Nines
Box it up
Square Search
Odd-Even Logidoku
Namedoku
Logidoku-8
Panmagic
Placing Numbers
Not Conway's Life
The Molecube
X Marks the Spot
Well balanced letter
Tetracubes
Pushing Numbers 2
Three Different Trails
Odd-Even Jigsaw Sudoku
Crossnumber
Diamond Mine
Boxed Eights
Greaterdoku
Shade-doku
Drop down
WXYZ
Travelling Knight
All nine?
Six Squared
Colourful Knight's Tour
Killer Skyscrapers
Dao Juxing
ABCD(2)
Killer-X-tra
Killer-X-tra(2)
Extended Knight's Tour
Javascripts
XX [The first with javascript here]
Change O & X Winner
'Snake-Eyes' Joe
The Courier
Shuffle
Historical Record
Hypercells
|
Charlie
2009-03-14 12:41:16 |
Re: Graphics on Perplexus
The background color of the Perplexus problem area is exactly "#E1E9EC".
|
Charlie
2009-03-14 12:42:41 |
Re: Graphics on Perplexus
Color info supplied by freeware "Colour Spy". (yes British spelling) |
brianjn
2009-03-14 19:33:23 |
Re: Graphics on Perplexus
Thank you Charlie. That exact colour (and I use British spelling when allowed) may prove valuable one day.
CSS, Cascading Style Sheets, were not addressed above. STYLE is used in the XHTML and it is possible to have Javascript use that to create straight and curved lines as well as fill areas.
In the problem Trying Triangles the author would have like a triangle drawn in the top left corner of the grid, as defined below the grid. While that was possible there was a style attribute "position:absolute;" which was not consistent with HTML across a range of browsers. Changing the attribute to "position:relative;" have a devastating effect.
Those interested in investigating such graphics could visit http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm |
brianjn
2009-04-15 22:14:25 |
Re: Graphics on Perplexus - Some Tutors
There is a range of internet sites where one can get a lot information re attending to techniques noted above.
One such site that seems to have value, and unfortunately you almost have to have some background knowledge of terminology to find what you desire, but this, programming.top54u.com, offers CSS, DHTML, DOM, HTML and Javascript tutorials. Code snippets are offered and depending upon your expertise may be modified for your need.
Others may be found by adding, eg, CSS tutorials to a search engine. |
brianjn
2009-04-16 01:13:16 |
Re: Graphics on Perplexus
The URL in the comment above contains perplexus.info in it :-(
The correct URL is here:
<a href=\"http://programming.top54u.com/>programming.top54u.com
|
brianjn
2009-04-16 01:14:52 |
Re: Graphics on Perplexus
Try again, I lost the close anchor :-(
The correct URL is here:
<a href=\"http://programming.top54u.com/>programming.top54u.com
|
brianjn
2009-04-16 01:18:27 |
Re: Graphics on Perplexus
Ok, copied directly from the site.
|
brianjn
2011-03-04 21:14:13 |
Re: Graphics on Perplexus
Unfortunately the Walter Zorn link is no longer valid, search engines only retrieve references to that site, Walter seems have disappeared without trace.
I do have Zips of his material, and copies of webpages to which it relates. |
brianjn
2011-12-06 22:56:15 |
Re: Graphics on Perplexus
Some time ago I found that the "Walter Zorn" site from which I acquired the Javascript graphics library is no longer valid. Unfortunately I see at this location:
https://sites.google.com/a/balancegames.org/zorn/
that Walter has passed on.
His family has made it possible for those who need to access his archives to use links on that page.
The Library which I have used (and still value) is at:
http://www.walterzorn.de/en/index.htm
Note that there is a German and English translation. |
