Welcome, Guest. Please Login
Tinderbox
  News:
IMPORTANT MESSAGE! This forum has now been replaced by a new forum at http://forum.eastgate.com and no further posting or member registration is allowed. The forum is still accessible via read-only access for reference purposes. If you wish to discuss content here, please use the new forum. N.B. - posting in the new forum requires a fresh registration in the new forum (sorry - member data can't be ported).
  HomeHelpSearchLogin  
 
Pages: 1 ... 3 4 5 6 
Send Topic Print
Making an HTML outline (expandable/contractible) (Read 84082 times)
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #60 - Jan 03rd, 2010, 8:00pm
 
Ok, step by step, 1st issue:

1. Open Outliner&TextFrame_v3.tbx

2. Add the following text to note "1":


3. Link selected text to the corresponding note in /outliner:


4. Notice it's a text link, not a weblink:


5. Do the same with 1.2.1:


6. Now, link the other two, NOT to the notes in /outliner, but in /def:

and


7. Now, watch what happens (opt + cmd + H):



See how the last two links became anchor tags, and the first two did not?
Back to top
 
 
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #61 - Jan 3rd, 2010, 8:46pm
 
The second issue:

1. Open Outliner&TextFrame_v3.tbx

2. Export the whole thing to an empty folder (I just left the png's because this is TB 5.0.1):


3. Look at the number of files actually exported:


4. Now, export once more over that, and all of a sudden:


See that 1 file was added to each folder? That's what I meant by "having to export TWICE".

=============
But this problem is solved now. I made a new copy over, zipped it, and the one that is now available is exporting everything the first time around, so, behold:

http://dl.dropbox.com/u/76377/TinderboxForum/Outliner%26TextFrame_v3.tbx.zip

(the zip file contains the tbx doc and the export folder result. It will be available until Mark B. can update to v3 in the Public File Exchange)
Back to top
 
 
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #62 - Jan 4th, 2010, 5:53am
 
Re point #2 of your post three back, that is as I'd expect. Aliases have their own inbound basic links, as distinct from their original notes's inbound links.

Re the export-twice issue. I now understand to what you're referring, but can't replicate it.  I guess there was a glitch in your older TBX export set-up that's now resolved.

Export of HTML links. (Note - the demo you posted doesn't have the links described). I added the links as per your previous post and can replicate the result.  The result is simple.  Note '1.1' and '1.2.1' are never exported to their equivalent TBX location but rather are included within 'Outliner.html'. As TB doesn't link to includes (for the reasons already discussed), the TB links to notes inside 'Outliner' doesn't become an HTML link.

It seems you didn't get forwarded the HTML/coding corrections I tried to pass on back in November 09 having seen your earlier version of the demo. Anyhow, I've applied corrections to your v3 TBX (the last link you posted above). I'll add a link to my version with the corrections below, but first a summary of changes:
  • Template names.  The existing names are a little confusing for other users. The HTML frame exports via 'page' and the pages export via 'frame'. I've reversed the titles so the 'frame' template is used to export the frameset (index.html) and individual note pages are exported using template 'page'.
  • Note 'index.html' uses 'frame' template.
  • Agent 'Def' sets children to use 'page' template
  • Your 'page' template, is now called 'frame'. Now has correct DTD - it needs a framset DTD. Closed all open tags in accordance with  XHTML requirements. Added an encoding tag to the <head> in order to meet W3C validation criteria.
  • Your 'frame' template is now called 'page'. Added a <body> element, added tag closures, etc. to achieve valid HTML code.
  • 'sitemap' template.  Cleaned up HTML, removed DTD-invalid 'onload' handler (which is now moved to a JS script (see below).
  • 'sitemap-titles' template. Cleaned up layout to give cleaner HTML code structure on export.
  • As TB v5.x has currently suspended embedded image support, I've removed the oopen/oclose notes. I suggest adding comment to the 'About this Document' note explaining use of the images (which you zip with the TBX. If not using exported embedded images it might make more sense to code so the PNGs use an /images/ folder in the export (and update the TBX code accordingly) as that's a cleaner layout for actual active use of this model.
  • Script 'outline-scripts'. Added code to make unobtrusive attachment of an onload command to the outliner page. This method allows the HTML to validate against the given DTD.
  • Use of Bank Gothic oultine font. I've not changed this but I'd suggest doing so. The style of the font makes it hard to tell upper/lowercase characters apart in a project where we need to cite some names in code, making it easier for the user to use the wrong case. Still this is a stylistic choice, like the outline which has too much contrast for my eyes (I had to soften it by changing from black to grey background #222222). Anyway, I'll leave those items to you or the eventual users to change as they see fit.
OK, here's a link to a TBX with the above fixes added:  Outliner-v3-ed.tbx.
Back to top
 
« Last Edit: Jan 4th, 2010, 10:51am by Mark Anderson »  

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #63 - Jan 4th, 2010, 8:08am
 
Wow, man, thanks for your effort!

Quote:
Aliases have their own inbound basic links, as distinct from their original notes's inbound links.

That clarifies things. Since aliases are NOT the same as the originals, it makes sense that the links to the originals wouldn't show, since the originals are not exported. However, there's really no way to tell whether a link is bound to an alias or to an original, is there? In the browse links, one cannot tell. Here's a suggestion to Mark B., a feature request.

Quote:
Re the export-twice issue. I now understand to what you're referring, but can't replicate it.  I guess there was a glitch in your older TBX export set-up that's now resolved.

Yes, the glitch is gone, so... that's resolved.

Quote:
Export of HTML links. (Note - the demo you posted doesn't have the links described). I added the links as per your previous post and can replicate the result.  The result is simple.  Note '1.1' and '1.2.1' are never exported to their equivalent TBX location but rather are included within 'Outliner.html'. As TB doesn't link to includes (for the reasons already discussed), the TB links to notes inside 'Outliner' doesn't become an HTML link.

Fully understood.

Quote:
Template names.  The existing names are a little confusing for other users. The HTML frame exports via 'page' and the pages export via 'frame'. I've reversed the titles so the 'frame' template is used to export the frameset (index.html) and individual note pages are exported using template 'page'.

Ok... I reasoned frames are inside a page, not the other way around. But it's fine.

Quote:
Note 'index.html' uses 'frame' template.

Ok... since the names got switched, that makes sense.

Quote:
Agent 'Def' sets children to use 'page' template

Again, makes sense as the names were switched.

Quote:
Your 'page' template, is now called 'frame'. Now has correct DTD - it needs a framset DTD. Closed all open tags in accordance with  XHTML requirements. Added an encoding tag to the <head> in order to meet W3C validation criteria.

Thanks! That was something I could never suspect.

Quote:
Your 'frame' template is now called 'page'. Added a <body> element, added tag closures, etc. to achieve valid HTML code.

Ok... wow... didn't realize I left so many open tags!

Quote:
sitemap' template.  Cleaned up HTML, removed DTD-invalid 'onload' handler (which is now moved to a JS script (see below).
'sitemap-titles' template. Cleaned up layout to give cleaner HTML code structure on export.

Nice. Thanks once again.

Quote:
I suggest adding comment to the 'About this Document' note explaining use of the images (which you zip with the TBX. If not using exported embedded images it might make more sense to code so the PNGs use an /images/ folder in the export (and update the TBX code accordingly) as that's a cleaner layout for actual active use of this model.

Agreed.

Quote:
Use of Bank Gothic oultine font. I've not changed this but I'd suggest doing so. The style of the font makes it hard to tell upper/lowercase characters apart in a project where we need to cite some names in code, making it easier for the user to use the wrong case. Still this is a stylistic choice, like the outline which has too much contrast for my eyes (I had to soften it by changing from black to grey background #222222). Anyway, I'll leave those items to you or the eventual users to change as they see fit.

Fair enough. I didn't spend much time considering cosmetics. I kind got used to differentiating between upper and lower case in Bank Gothic, but it sure is confusing. As for the colors, in my case it's always guesswork, I'm horrible at that.

====
The link for the document is broken. Can you check?

====

Mark, I can't thank you enough for your help, as usual. This project has been a great learning experience. Considering I barely knew anything about HTML before that, I can safely state that the little I learned I owe this adventure (not to mention how much I learned of Tinderbox itself)

====

Well, as soon as I have access to your edited document, I'll make a few changes and submit it to PFE.

I hope the readers of this thread have also gained with our discussion.
Back to top
 
« Last Edit: Jan 4th, 2010, 8:22am by Marcelo Mirage »  
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #64 - Jan 4th, 2010, 10:58am
 
I've fixed the link in the previous post - the path was right but I guess the filename upset the browser.

Glad the points make sense. I learned the hard way that the cleaner (more valid) the HTML I write the fewer hard-to-fix glitches I get!
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #65 - Jan 4th, 2010, 3:42pm
 
Ok, here we go,

version 4 is ready: http://dl.dropbox.com/u/76377/TinderboxForum/Outliner%26TextFrame_v4.zip
Edited:
Current version now is 5.1


(temporarily, until Public File Exchange can be updated)

@Mark A.:
1. I left the background color alone.
2. Bank Gothic is gone.
3. /Images folder is created. A placeholder, for now.
3.1 A warning was added about the image drawback in v5.0.1

Back to top
 
« Last Edit: Jan 5th, 2010, 11:48am by Marcelo Mirage »  
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #66 - Jan 4th, 2010, 5:51pm
 
Thanks, but what I get is pretty broken. I've spent a good while poking at it but I can't find all this things you've broken since the last version. I strongly suggest you add in the TB text links in note '1' cited in the thread as the lack of them is confusing.  

It looks as though you swapped the code for the frame/page templates but didn't update the pages that use them.  The images in the left pane are missing - probably because you didn't update the JS script that uses them.

The last demo I posted worked. Why don't you use that file rather than your v3 as your start and add back anything you want - at least that way we know the export works before you start editing.
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #67 - Jan 4th, 2010, 10:09pm
 
My kingdom for a working version!!!

Mark, check your version. Export isn't working for me. Everything is a mess now, 'cause I just can't find a working copy anymore.

Back to top
 
 
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #68 - Jan 5th, 2010, 7:04am
 
Marcelo, I've found and fixed a number of issues. Just doing some polishing - will post file when I'm done. Here's a taster:



I've:
  • Generally rationalised naming so those grabbing a copy via the exchange will find the structure more intuitive. I've used a DisplayExpression with a few key notes to indicate their export name or what they do (e.g. the right frame).
  • 'Def' is now the 'Right Frame' - i.e. what it actually does.
  • The 'Frame' (and its template) are now 'Frameset', making it unambiguous as to what it does.
  • Added specimen exporting/non-exporting links
  • Some deeper outline nesting to test outliner code
  • Added a new template for plain text export (for readme files)
  • Found/fixed errors in the scripts exports and scripts themselves.
  • Fixed CSS syntax errors
  • Added an exporting /images/ folder. A readme.txt is placed there to trigger the folder creation.  Currently the user has to place the outline's PNGs in there by hand.  When the outliner's done, making the think into a TB wizard could automate the placement of the images. If going the Wizard route, this is best done once the TBX is finished.
  • Adjusted colours for readability (less contrast)
  • Used a more legible font with better upper/lower case disparity (feel free to adjust this!)
  • ..and more.
Back to top
 
« Last Edit: Jan 5th, 2010, 8:26am by Mark Anderson »  

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #69 - Jan 5th, 2010, 8:34am
 
Marcelo, try this: O-TF.zip

This exports without problems on my 10.5.8 system using TB v5.0.1. The only task is to place the 2 PNGs in the /images/ sub-folder of the HTML export (the JS script is adjusted to expect the images be there).
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #70 - Jan 5th, 2010, 11:06am
 
hehehe.... this is embarrassing... but it ain't working...

1. Ok. First, the agent "Right Frame". We needed a slight modification to the query> descendedFrom(Outliner) > you did not capitalize it, so the agent wasn't finding anything.

2. The /Prototypes folder was inside /Outliner. I moved it up to "control".

3. A strange "1.html" is created in root directory. It was actually the webname given to /Prototypes, which was being exported. I switched to HTMLDontExport, but oddly, it's still being exported regardless...

4. That bug about having to export twice in order to have all the files created is still around. I'm beginning to suspect of a bug in Tinderbox 5.x or OS X 10.4.
Back to top
 
 
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #71 - Jan 5th, 2010, 11:34am
 
Oh bother - don't know how those errors crept in. Items 1-3 fixed, plus some links from note 1 had gone awry and are fixed. Issue#4, I can't replicate.  Which specific files aren't being created on first export?

I've uploaded a new zip to the above URL - the zip name is the same but the TBX inside is is now 'O-TF_v5-1.tbx'.
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #72 - Jan 5th, 2010, 11:36am
 
Re the 2-export issue, I don't think just looking at the file count is enough. Look at the exact filenames and note those failing on the first export. I don't see it here but it doesn't meant it isn't happening elsewhere. I'm on v5.0.1 on OS 10.5.8.
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #73 - Jan 5th, 2010, 11:44am
 
Ok... if you don't mind, I have played Frankenstein (I know it's usually a bad idea, but this time I really paid attention to every detail and have successfully exported everything).

http://dl.dropbox.com/u/76377/TinderboxForum/Outliner%26TextFrame_v5.1_MM.zip

I have added the MM suffix (Marcelo Mirage) to avoid confusion.

I have added a decimal to version 5 (now 5.1), otherwise we'll end up with a huge number of versions out of minor changes.

I have cloned your O-TF.tbx version's javascripts and templates, so all your modifications were taken into account.

I have fixed the minor glitches I mentioned in my last post.

The "export twice" phenomenon is gone now with this current version. So everything is in place.


So, if you'd care to check this current version (take your time... you must be sick of it  Wink)


p.s.: as for your modifications>
Quote:
Generally rationalised naming so those grabbing a copy via the exchange will find the structure more intuitive. I've used a DisplayExpression with a few key notes to indicate their export name or what they do (e.g. the right frame).

Ok, the change was taken.


Quote:
'Def' is now the 'Right Frame' - i.e. what it actually does.
The 'Frame' (and its template) are now 'Frameset', making it unambiguous as to what it does.
Added specimen exporting/non-exporting links
Some deeper outline nesting to test outliner code
Added a new template for plain text export (for readme files)
Found/fixed errors in the scripts exports and scripts themselves.
Fixed CSS syntax errors


Ok, all these were taken.

Quote:
Added an exporting /images/ folder. A readme.txt is placed there to trigger the folder creation.  Currently the user has to place the outline's PNGs in there by hand.  When the outliner's done, making the think into a TB wizard could automate the placement of the images. If going the Wizard route, this is best done once the TBX is finished.


Prior to TB 5.x I didn't have to resort to a Wizard in order to export the images (in the correct png format). I'm sure it'll work just fine when TBX is finished.


Quote:
Adjusted colours for readability (less contrast)
Used a more legible font with better upper/lower case disparity (feel free to adjust this!)


Not that I don't agree with your choice, but I'd prefer to leave my settings for font and colors, that way I can spot my versions faster (ah, it's just too much trouble to change everything back. So let the users decide).



Quote:
..and more.


I also made some slight modifications... too tiny to mention. Well... at least we have a working version...
Back to top
 
« Last Edit: Jan 5th, 2010, 12:02pm by Marcelo Mirage »  
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #74 - Jan 5th, 2010, 12:33pm
 
OK, lots of snaglets for you (mostly cleaning up action code, e.g. ^code in actions is deprecated since v4). I'll let you do these:
  • 'Prototypes OnAdd should be: $IsPrototype=true; $HTMLDontExport=true;
  • '*entry' OnAdd should be: $Prototype="*entry";
  • '*entry' Rule should be: $webName=$HTMLExportFileName+$HTMLExportExtension;$HTMLDontExport=false;
  • Incidentally, good TB form is CamelCase for attributes, so $WebName would be better than $webName. As the two attribute names are different attributes, if you do correct this one, make the new attroibute, use an agent (all notes with $webName not empty) to copy $webName to $WebName, then you can delete $webName. update all code referring to the attribute, key attribute lists etc - this is why doing the naming right pays off, it's a pain to fix later; that said the existing name works - to me it looks like a typo when I see it in actions, etc.
  • 'Right Frame' Agent.  No action needed - the agent only finds things descended from -'outliner' and that seeds the correct prototype which in turn sets a rule for the notes/aliases.  We don't have to do all that work again.
  • 'outliner'. OnAdd: $Prototype="*entry";
  • 'outliner & '*entry'. $Color: bright blue warmer. Basic 'bright blue' is way too harsh to look at for any length of time in this set-up.
  • Set outline MapBackgroundColor to '#292929'.
  • Repair defined colour 'dark warm gray' back to '#554a40'.
  • Open any Info view, Appearance group, select Color in the left column, then edit button at bottom. In the edit dialog change the default to 'light warm gray dark'. The grey notes will now look OK on the #292929 background.
  • I'd have stuck with my way for making the image folder; but I'll agree to differ!  When images return, I doubt we'll be using the placeholder trick - not least as TB-exported images are JPEGs - your script will then fail as it expects a PNG file.  The way to get the images into this folder is to make a TB Wizard (instructions in aTbRef) when done.
  • I checked and scripts are working OK.
  • 'styles' CSS & frames css - insert a blank line line before a:visited. This is for code tidiness - no actual change.
  • Links in content notes - all missing!
  • Template 'sitemap-titles' - to get syntax to current style change entries of ^get(webName)^ to ^value($webName)^ (or to ^value($WebName)^ <g>).
  • I think that's it...!


For test, I'd try some slightly deeper levels of nesting, and try some notes with non-number names - even something Unicode (accented) perhaps just in case it make some glitch we'd not foreseen.



Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Pages: 1 ... 3 4 5 6 
Send Topic Print