The Labs: ProgrammerHTML Cookbook

2008/07/04

About Us

What's New

Services

PicArt

Programmer HTML

The DEF Tag

Handler

Cookbook

Webtree

Plugins

Graphic Lab

X11 Lab

Web Lab

Admin Lab

System Lab

OS Lab

Sound Lab

Video Lab

Sitemap

The Labs.Com

Programmer HTML

ProgrammerHTML Cookbook

Last update 2001/12/07

The Labs - Design & Functionality For The Net

Programmer HTML Cookbook

Below some advanced use of ProgrammerHTML plugin, graphical, design and conceptual.

List of Sites
Page Design
TextShade
Multipage Tags
Inline PicArt-Script
Inline Text Titles
Resources

ProgrammerHTML Cookbook

1. List of Sites

Nothing is more anoying than listing sites (name, URL, description), isn't it?
Create a new tag, let's say mylinks, as plugin and inline direct, you have to define the language, in our case we chose perl (c could be another variant):
<def name=mylinks plugin=inline language=perl>

print "<dl>";

while(<STDIN>) {

local($url,$name,$desc) = split(/\|/);

print "<dt><a href=\"$url\"><b>$name</b></a><dd>$desc\n";

}

print "</dl>\n";

</def>

Once defined, use the new tag like this:
<mylinks>

http://www.perl.com|PERL|Best interpreter language to p..

http://www.sgi.com|SGI|Machines which fly, but nobody c..

http://www.freebsd.org|FreeBSD|Software which makes aff..

http://www.linux.org|LINUX|Community effort to make PCs..

</mylinks>

Gives then this:
PERL
Best interpreter language to program almost everything
SGI
Machines which fly, but nobody can afford
FreeBSD
Software which makes affordable PCs usable & fly
LINUX
Community effort to make PCs usable & fly as well
You actually write what is really required, list the sites line-wise, or put it into a database or link verification etc. Once you define the listing of sites should look different, just change the definition but leave the actual list of sites untouched.

ProgrammerHTML Cookbook
2. Page Design

To really use ProgrammerHTML, define a tag called page which encloses all content of the page (even new tags or whatever). Define in page the overall design:

body-background, body-text-color and all the arguments <body> allows
design of the page: one single page, two column, navigation bar etc.
document title, ie <title>MyCompany: \$arg{title}</title>
global font-size and face
One you defined this all within the <page> tag definition, use the tag always. At a later time you can change the definitions of further definitions like <section> and <subscection> or alike definitions to keep all in "style" or the same fashion.

<def name=page plugin=inline language=perl>

print "<html><head><title>MyPage: $arg{name}</title>\

</head><body bgcolor=#00000 text=#ffffff>\

<h1>$arg{name}</h1>\n";

while(<STDIN>) {

print $_;

}

print "</body></html>\n";

</def>

then use it with
<page name="Sample Page">

This is a sample text.

This is a sample text.

This is a sample text.

...

</page>

The resulting page you find here.
Also, define some static colors with
<def variable=bgcolor>#000000</def>

<def variable=bgcolor2>#000040</def>

<def variable=bgcolor3>#200030</def>

<def variable=textcolor>#e0e0ff</def>

<def variable=linkcolor>#9080ff</def>

<def variable=vlinkcolor>#8070ef</def>

and use it within your page-definition:
$rpath = $ENV{REVERSE_PATH};

...

print "<body marginheight=2 marginwidth=2 \

background=\"$rpath/Images/background.jpg\" \

text=$(textcolor) bgcolor=$(bgcolor) \

link=$(linkcolor) vlink=$(vlinkcolor)>\n";

...

Etc, and then use the $(bgcolor) $(bgcolor2) $(bgcolor3) in further sub-definitions of your page-tags (sections etc or when you use tables with bgcolor etc).
That way you have a few colors you use, and when you change those (and the background-picture referenced in the body-tag) so you can change the entire design on-the-fly truly.

ProgrammerHTML Cookbook
3. TextShade

Since font-color can be set within HTML, many people wonder how to set a shade of text, some WYSWYG editors support this, here a small add-on with ProgrammerHTML.
textshade.pl source-code (part of the PlugIns Collection)
Use it with
<def name=textshade plugin=textshade.pl></def>

<b>

<textshade col1=255,0,0 col2=0,0,255>

Fading a text from red to blue, each single character colored.

</textshade>

<textshade col1=255,200,0 col2=0,255,0 step=8>

Another longer text fading from orange to green,

orange and green, orange and green, orange and green, orange and green,

with a step of 8 characters.

</textshade>

</b>

Gives following output:
Fading a text from red to blue, each single character colored.
Another longer text fading from orange to green, orange and green, orange and green, orange and green, orange and green, with a step of 8 characters.
Nice, isn't it? Use step=n to shorten the final HTML-source, otherwise almost every single character will be <font color=#RRGGBB>X</font> which creates large HTML files. If you have a multiline textshade use step=8 or so.
You can also include other HTML-tags like <p> etc, they won't be colored of course. :-)
A further idea could be to make an extension to shade the cells of a table.

ProgrammerHTML Cookbook
4. Multipage Tags

Since you are able to program whatever you like what a certain tag should do for you, you can also create new .html pages or .phtml pages even.
Note: When you create new .phtml, as the phtml (the program) scans all directories once and checks if .phtml files are newer than the corresponding .html files, if you now create out of an .phtml again .phtml, the phtml won't catch it, so you need to call phtml explicit to force phtml to convert the new creates .phtml
As example, a tag called <newpage> which takes name=name, title=title, header=header as arguments which creates a new page:
<def name=newpage plugin=inline language=perl>

open(F,">$arg{name}.html");

print "<title>$arg{title}</title>\n<h1>$arg{header}</h1>\n";

while(<STDIN>) {

print F $_;

}

close(F);

</def>

The main idea behind is, maintain one .phtml which creates multiple files (.html or .phtml):

Multi-language support
Complex document structure: subpages are defined within the root document; less files to maintain, and better overview.

When you create a new tag called <multilang> which takes language=[english,french,german,japanase] as argument.
Then use it with (test.phtml):
<multilang language=english>

We have updated this site just recently.

</multilang>

<multilang language=german>

Diese Site wurde erst kürzlich erneuert.

</multilang>

The <multilang> creates and appends files test.eng.html and test.ger.html, and when your web-server does support, people with language preference will get their corresponding language.
This <multilang>-tag will be available for the commercial package of ProgrammerHTML with full documentation.

ProgrammerHTML Cookbook
5. Inline PicArt-Script

PicArt is a graphic package with PicArt-Script Language. To use PicArt-Script within the HTML source, following definition can be written:
<def name=pascript plugin=inline language=perl>

`mkdir phtml-pics` if(!(-d "phtml-pics"));

$arg{type} = 'jpeg' if(!$arg{type});

$arg{cols} = '240' if(!$arg{cols});

$options .= "align=$arg{align} " if($arg{align});

$options .= "hspace=$arg{hspace} " if($arg{hspace});

$options .= "vspace=$arg{vspace} " if($arg{vspace});

$options .= "border=$arg{border} " if($arg{border} ne '');

$rpath = $ENV{REVERSE_PATH};

$base = $ENV{SOURCE_FILENAME}; $base =~ s/\.phtml//; $base =~ s/\//_/g;

$fname = "phtml-pics/pascript-inline-$base-$ENV{'PLUGIN_CALLS'}";

while(<STDIN>) {

    $buff .= $_;

}

$fname .= '.jpg', $buff .= " tojpeg(85,$fname);" if($arg{type} eq 'jpeg');

$fname .= '.gif', $buff .= " togif($arg{transp} $arg{cols},$fname);"

    if($arg{type} eq 'gif');

`pascript -direct '$buff'`;

print "<img src=\"$rpath/$fname\" $options>";

</def>

To use the plugin, write the PicArt-Script code:
<pascript type=gif transp=0,0,0>

    text.font(/Bajoran); text.size(40);

    /img = border(text("STAR TREK"),2,2,0,0,0,255);

    make(sizeof(img),0,0,0,0);

    paste(0,0,map(img smooth(2) gamma(2,2,2,.2),255,0,0,0));

    paste(0,0,map(img,blend(img,0,.5,0,1, linear, 250,250,0,0, 200,0,0,0)));

</pascript>

To use the PicArt & PicArt Script further, you define your design of graphics in a plugin direct and call the plugin with the string direct and leave the style defined in the plugin.

ProgrammerHTML Cookbook
6. Inline Text Titles

You can adjust the above perl-inline plugin so it takes string, font and size argument:

$buff =<<EOT;

text.font(/$arg{font}); text.size($arg{size});

/img = border(text("$arg{string}"),2,2,0,0,0,255);

make(sizeof(img),0,0,0,0);

paste(0,0,map(img,50,255,50,0) smooth(3));

paste(0,0,map(img,0,10,0,0));

EOT

<mytitle type=gif transp=0,0,0 size=24 font=Sydney string="X-Files">

<br><mytitle type=gif transp=0,0,0 size=24 font=Sydney \

      string="Alien Invasion">

<br><mytitle type=gif transp=0,0,0 size=24 font=Sydney \

      string="Hybrid Children">

Further development would involve also effect which would call different effect-renderers. Commercial add-on of PicArt includes ProgrammerHTML plugins.
If you are web-designer, perl-programmer and interested in graphical automatized creation of graphics, definitly investigate the usage of PicArt.

ProgrammerHTML Cookbook
7. Resources

ProgrammerHTML-Plugins
Collection of plugins
PicArtScript Reference
Reference Manual
PicArt Cookbook
Further infos on PicArt

Handler Programmer HTML Webtree

Last update 2001/12/07

Top of Page

The Labs.Com