Working On It! » HTML-Related

What A Relief!

abet — Tue, 15 Jul 2008 16:27:49 +0000

BeerWin has replied to an earlier blog (Get It Before It Turns Pro) where I expressed my apprehension regarding the free status of BeerWin’s Plain HTML. He writes:

I state here now, that PlainHTML and Web suite will not be released as commercial software, nor shareware. PlainHTML is intended to be free software and it is not planned to be turned into another annoying commercial software, at least in the previsible future. Since i don’t have much time for answering to any support or software related questions (and i’m making it alone in my spare time), converting it into a commercial stuff is not worth at all this time.

But the main reason of keeping PlainHTML free for everyone: I got so many free things from geeks and non-geeks through the internet, that PlainHTML and all included software is just a small gratitude expressed to them. (Featured Commentary dated July 9, 2008)

What still can I say? Thank you, Beerwin for making things easier for the rest of us!

By the way, there is an update of the software — now on version 5.6.2. — and you can get it free from Beerwin.Com

The IFrame Ticker of Mystical Geek

abet — Sun, 13 Jul 2008 22:21:01 +0000

If you go to the Mystical Geek, you’d find that it has an animated portion on top of the blog entry and right under the main title header of the blog. The trick is produced by some lines of code for an iframe and an external file which contains the script and the contents that are rotated. The script is provided by Dynamic Drive and is easy to customize. Below is the main code for the iframe.

 


<img src="http://img000.imageshack.us/img000/8350/pensmzl9.jpg"
 align="right" hspace="10">
<iframe id="tickermain" src="exfile.htm" width=300 height=80
 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no>
iframe>

The choice for the code was determined by the fact that I cannot use scripts that require one to add codes in the header of the Squarespace index page where the Mystical Geek resides.

The external file which is invoked by the iframe consists of the javascript and the content displayed by the iframe in between DIVs. It looks like the following


 





"content0" style="display:''">



Helvetica;Tahoma;font-weight:bold;">Update Your Bookmarks
You may now access this site using the shorter URL:

www.agustino.org








Some content here. even
lists
are
allowed




"content2" style="display:none">



Some content here.  Even  specifications are allowed.







"1">Some content here.  
Even tables are allowed.

The ticker was useful in that it allowed me to fix links to the blog posts that contain the keywords visitors of the site look for. The hits to these increased dramatically over just a twenty-four hour period. Try out the ticker. Just copy the codes off this page and modify them. And please, don’t delete the comments that say the codes are from Dynamic Drive.

Get It Before It Turns PRO

abet — Thu, 03 Jul 2008 17:42:53 +0000

No, Beerwin doesn’t say it, but with the way the Beerwin’s Web Suite is looking, my big apprehension at the moment is that it may become commercial before long.

And why not! There are commercial software that are in many ways inferior to BeerWin’s web applications.

Apart from the excellent HTML editor, PlainHTML, (I’ll write more about it later on) the Web Suite comes with MultiNotepad, a replacement for Windows Notepad, and a CodeSnippet database. Just these two applications working with PlainHTML is already enough …

Add to the these Extension Manager and the Automatic Backup and you get a freeware Web Suite that can easily be among the top commercial software in the web today.

What, you don’t think I’m serious? Visit Beerwin now and see for yourself.

Man, a big hand clap for BeerWin. He has done an excellent job providing us with these tools.

HTMLDocEdit

abet — Thu, 22 May 2008 22:07:48 +0000

HTMLDocEdit is a very small WYSIWYG that one can use for making quick webpages. It is downloadable from NirSoft, and doesn’t need to be installed. In fact, one can just unzip it into any folder and use it from there. It naturally works with USB FlashDrives. It fits into a floppy, too.

Here are the features I don’t like about it though

It uses
instead of
;
The tags it makes are in capital letters when these should be in small letters;
It employs the tags and instead of and ;

It doesn’t have a button for the header tags; one will have to increase font-size manually and select “Bold”for a header.

The feature I like most about it is that it recognizes CSS. I opened up one of my heavily CSS defined webpages in HTMLDocEdit and this presented the page the way I would want it to appear. While most other WYSIWYGs won’t show list-style button graphics, or even icons used as backgrounds for context-menus, HTMLDocEdit renders them without difficulty.

For this ability alone, HTMLDocEdit shows itself to be a real WYSIWYG editor.

Footnotes in HTML?

abet — Tue, 13 May 2008 08:15:49 +0000

Question from Nikki: I am used to creating footnotes in documents using Windows Word. It is so easy. How do you do the same thing on a web page using Notepad?

Three tags will be most useful here.

a font formatting tag for superscript which raises a character (this is for your numbered note)

your a name href for anchoring the footnote so that when your numbered note is clicked the viewer is brought to the bottom of the page where you have the note

your a href tag.

At the end of the phrase or the sentence where you place the footnote reference, surround the number with the ^{tag, like so:}

¹

and then add your A HREF tag in the following manner:

>#note1”>1

At the bottom of the page, right after a heading called “Footnotes” or “Notes”, type the note that is going to be referenced like this

note1”>1. Some note here.

Notice the difference between the A HREF tag and the A NAME tag. The difference is this symbol #. This should only appear in the A HREF, not in the A NAME. The symbol means that there is a section in the webpage called “note1” to which the browser must go.

After the note, you’d wish your viewer to go back to the place where he left. At the end of the note, add the following:

[top]

That is a simple javascript A HREF that lets your viewer go back one step.

If you will be using a framed page so that the viewer need not go up and down your page, put your footnotes in a page called (for example) footnotes.html. The reference would then look this way:

^{footnotes.html#note1” target=”yourframesname”>}1

The A HREF specification tells the browser that there is a section called “note1” in footnotes.html that should be brought up to the viewer in the frame specified. Be sure to create a valid framed page for this to work.

An Old-Fashioned Editor For The Modern Coder

abet — Tue, 25 Sep 2007 20:56:24 +0000

I would have featured Beerwin’s PlainHTML a few months ago but I decided to wait for the one feature which I felt was lacking then: the word wrap. Now that the feature has been included Beerwin’s PlainHTML has become one of the better freeware HTML editors available on the web today. It is true however that it still lacks one feature that I want to see in an excellent HTML editor: an FTP facility. But that can wait. With the present tools and features of PlainHTML, the absence of an integrated FTP application is more than compensated for.

PlainHTML is not only for HTML; it is also equipped to handle other scripting languages for the web. It comes integrated with Tidy for HTML validation and has a scripting toolbar designed to make common codes with the click of the mouse. It has syntax highlighting for tired coders’ eyes, line numbering, line-edit highlighting, special characters’ tool and a code snippets’ window that is packed with ready made snippets necessary for creating webpages that can pass the validation test at the W3C

For the HTML coder, PlainHTML has wizards for forms, tables and frames; for the newbie it also has help reference materials for HTML 4.0, CGI and PHP. It has two color tools: a palette for inserting codes for particular colors, and a color picker.

PlainHTML has its own preview browser and a mini-browser that one can use for surfing the web. One of the features of PlainHTML that caught my attention is its ability to “see” a file in localhost. This is important when one is working with PHP scripts.

PlainHTML may not have an explorer view. But it does have a File Viewer which can “read” text files (*.txt, *.rtf and *.csv) and JPG images (it cannot read GIF nor PNG).

Beerwin’s PlainHTML also comes with a set of templates that one can readily use for a website. In fact, it was a search for free templates that led me to Beerwin’s World of Stuff some time ago bringing me into contact with PlainHTML and MultiNote, (this is Beerwin’s Notepad replacement which is also bundled with PlainHTML). While there are still features that I miss in this editor — I would give it a rating of 4/5 — I think it is safe to recommend it to both newbies and experienced coders. It is feature-packed and is easy to use. And, for newbies especially, it can “teach” one how to code in HTML 4.0.

BigEditor: A Promise Still On The Way

abet — Tue, 04 Sep 2007 20:33:47 +0000

Just a few days ago, I received build 6.9.1 of Oraspeed’s Big Editor. The new version has taken into consideration what I have written in this blog about my first experience of it. Since the time I downloaded this new version, I have created quite a few pages with it.

the index page of TipzNTrix which is a customization of a GetTemplate theme-layout for WordPress

three pages now posted at Biblista.Net (first written in BigEditor and then copied and pasted on Biblista’s Drupal site)

this page (which I ~~am going to copy and paste~~ have copied and pasted into this blog application)

As a response to my rantings in this blog about the Big Editor, I was told the following:

that the Big Editor no longer has a splash screen that one cannot turn off

that the Code template feature is functioning and that one can add to it

that one can double-click on an image appearing in the File Explorer and inserted as an image tag into the editor

that there is a save to and open from remote FTP feature. (In fact, they even added an “Open File” icon to make the feature more explicit)

These were the first things I checked and while creating the pages mentioned above, I had a new experience of the capabilities and bugs of the Big Editor.

First, I must say that the Big Editor loads faster now. Although my objection to the splash screen was that there is no option to turn it off, I appreciate what the developers did to simply take it off. I remember the case of HTML Beauty which had a splash screen bearing the picture of Carmen Electra. As long as male teenagers were using the editor, they kept mum about it. But when more people outside the circle of the author’s friends began using the software (the author was still in high school when HTML Beauty became a hit in free download centers way back in 2000), complaints like “I can’t work with it when my wife is around” (from a married adult programmer) or “how do I hide the splashscreen from my boys” (this one from a Mom) began to be posted in the author’s forum. Eventually Mr. Maxx (the author) had to take out the splash screen. Anyhow, I find it useless anyway. It doesn’t add anything to one’s coding, and a splash screen doesn’t guarantee a nice webpage or script.

Second, I did find out why the Code Template didn’t seem to function. I went to Tools –> Options –>Code Template and added some codes and I expected it to appear there! (Or was I wrong to think that?) What I did this time around was to do the same thing and then look at it from a different place, not from the “Code Snippets” toggle, but from the “Short Cuts” button. It was there that I found the code snippet I added.

But if one accesses the code templates one adds via the Short Cuts button, what is the use of the Code Snippet’s toggle? Related to this is the problem I found when clicking on the Short Cuts: it won’t paste the code I wanted!

Code snippets were a feature of xSite, a leading HTML cum WYSIWYG editor back in 1999 until its development stopped. Code snippets were also a feature of HTML Beauty, Mr. Maxx’s editor. In the case of these editors, creating a Code Snippet was easy. One went File –>Create New –>Save As Snippet. The first line automatically became the name/title of the code. One can add a description of the code through a <– Comment –>. It was accessible through a Snippet Pane which was located as one of the toggles of the explorer panel. I miss that feature in a lot of HTML editors nowadays and was hoping that Oraspeed’s Big Editor had one that was functional. I see the Code Snippet panel, but I can’t get my code snippets on a webpage.

Third, I was told that double-clicking on an image in the File Explorer would insert it as an image tag into my webpage. I did that but BigEditor opened the graphic as a file inside the editor!

One can do this procedure better using the Insert Graphic button, but the tag produced isn’t HTML 4.0 compliant; and it is given in an absolute path. BigEditor should “learn” to create image tags compliant to HTML 4.0 and to give a relative path.

Fourth, about BigEditor’s FTP facility. I must say that between the time I made my first review of BigEditor and the day I downloaded build 6.9.1, I rediscovered the Crimson Editor (now on its version 3.7) and saw how it could open from and save a file to a remote server. So when I tried BigEditor, I wanted to see the same feature functioning at least. It doesn’t. It can log into an FTP server, but not long enough for me to do something with it. 110MB.Com’s FTP service is nasty. It only gives one 60 seconds to log in and show one means business. Once one logs into the server, the message “After 60 seconds of inactivity, your session will be terminated.” I use FileZilla as my FTP client and it gets its job done. With BigEditor, I tried creating an extra folder for images and to upload graphic files into it. I only got as far as the images folder. Everytime I try to upload an image, I get two alerts…

To be fair, I thought it was just due to 110MB’s FTP server having a bad day, so I updated my version of XAMPP and activated its FileZilla server. My object was to see how BigEditor saves to and opens from a remote server, even if it be localhost. After several tries, I gave up. BigEditor was giving me the same error alerts it was giving off connecting to 110MB.

BigEditor is an ambitious project. One must appreciate the developer(s) for undergoing such an endeavor. It is a three-in-one software: a-not-only-HTML-editor (it works great with MySQL data, at least, as far as editing it goes), it is an FTP client (or promises to be so), and it is a comparison tool (make way ExamDiff!). But with the bugs it still has I would rate these features separately in the following way:

A few more words about the Editor component of BigEditor.

It still has no word-wrap. I can understand that MySQL data can require a no-wrap feature (I learned this while editing a large *.SQL file that I was to transfer to another server. Long unbroken lines make it easy to search for data), but when one is working on HTML, and even with Javascript or another scripting code, it helps when an editor can wrap its lines. It is for this reason that editors like AceHTML (even the free version!) or GVIm has that feature.

Second, I like the clipboard feature of BigEditor. The problem with it however is that when one copies anything to the clipboard and then opens a new file in BigEditor, the clipboard data is erased.

Third, while the Search function of BigEditor works fine, it can only search for data from the cursor-point onwards. There is no option for it to continue searching from the beginning of the page when it reaches end of file. Related to this is the fact that there is no Edit –> Select All option from the menu. A Windows user like me would immediately go to the Edit button for “Select” in a copy and paste operation (which I do a lot). In addition, I find that I cannot copy anything to the clipboard from a page in BigEditor when the highlighted selection is the whole page.

Fourth, while I was writing this article for Biblista, BigEditor crashed three times. It gave me the following error

Fifth, while I was writing this article, I had to close the BigEditor once because the Insert Image function stopped working. I had to reopen the application so that I can finish this work.

Again I would like to reiterate my admiration for the one responsible for this project. It is however obvious that the BigEditor is still far from achieving its goals. This three-in-one application is needed by hardcore coders and it will be greatly appreciated if it begins to fulfill its promises.

Of DIVs and SPANs and Browser Wars

abet — Mon, 27 Aug 2007 18:27:32 +0000

Yesterday (or was it the other day?) I found out that Opera wasn’t presenting one of the CSS layouts I was using as a demo for the tutorials on CSS. And so I was forced to add a few notes on the tutorial page about Opera not presenting the page well.

The page is presented well by FireFox and IE, so what was the matter with Opera? I went through the sparse CSS specifications in my stylesheet to see what was bugging the Norwegian browser. It took me quite some time, with a lot of trial and error editing until I changed the SPAN specifications to DIVs. It was then that the page came out well in Opera.

I don’t know much about DIVs and SPANs and why different browsers present them differently. All I know is that DIVs create invisible boxes that contain HTML elements but SPANs don’t. So I guess given this fact about DIVs, the Opera browser was just doing its job when it skewed the demo I made. The CSS was alright; the way I called the specifications into the BODY of the webpage was what created the problem. FireFox and IE in this sense are the browsers that spoil the inattentive web designer.

I have corrected the page and am showing it separately from the original: a memorial — for me — of a blunder in web design. It is found here. I have also come up with a clothed version — one with backgrounds, colors and images — of that particular page here.

CSS Styleswitcher

abet — Fri, 24 Aug 2007 20:19:46 +0000

UPDATE. I just reuploaded the styleswitcher Logged Notes enhanced with DynamicDrive’s tabbed content script. It took a while to integrate the stylesheets of both scripts, but it is working well now.

I saw a styleswitching javascript code in a webmaster’s forum and started playing with it. I’ve seen a similar script but it was based on CGI. In this version, only javascript is used and therefore can be used for straight static HTML pages. See it in action here. I have also posted the code used. I found it non-functional but modified it based on the discussions about it. For simple webpages, it is great. The one who made it must be a javascript genius.

Oraspeed’s Big Editor

abet — Mon, 20 Aug 2007 21:40:30 +0000

I found it advertised as a three-in-one package: a programmer’s editor, a file compare utility and an FTP tool. I even got a complementary license from Oraspeed! I was planning to make extensive use of Big Editor for this site since

It has a helpful-looking interface

The file-comparison tool is really something I’ve always wanted in an editor

The promise of an integrated FTP is something that one cannot ignore.

Big Editor’s Plus

Great-Looking Interface

Big Editor has a great-looking interface. It looks like an MSOffice application and the syntax-highlighting is just beautiful, truly a treat for tired eyes. There is also a clipboard viewer which is just one click away and a file explorer. It also has a web preview toggle that makes it easy for me to see how my webpage is looking. All these makes Big Editor a big help for people like me who always make use of ALT-Tab for “picking” the tools from the Desktop. With Big Editor’s interface, my Alt-Tabbing is minimized.

File Comparison

What can I say about this feature? That it is sorely lacking in the html editors I’ve worked with. The file comparison utility makes it easy for me to see differences in the revisions I make on the same webpage. The index page of the Collectanea is an example of a webpage that I update each time I add a new page to my site. And I don’t mean just the links. If you would notice, the page now has a sticky note which I use to announce my updates. The file comparison tool allows me to easily see what I’ve added or deleted and where. I am currently using a small application to see the revisions I make. With Big Editor’s integrated tool, my work is further lightened.

Integrated FTP

An editor with a built-in FTP is always a plus. For years I’ve been working with an FTP client that works separately from my preferred HTML editor (HotDog). The promise of an integrated FTP tool in an editor is always welcome. And Big Editor has that promise.

The Minuses

I must say however that Oraspeed’s Big Editor loads slow. It has a splash screen that one cannot turn off. And then it has no word wrap option. This is a deficiency that I find cumbersome. More, I couldn’t add anything to the code snippets. I found the utility under “Tools –> Code Templates”. But when I started to add, the editor simply froze and then crashed.

The File Comparison tool didn’t seem to have problems. But the FTP facility couldn’t work well with the 110MB one-minute limitation. It is so slow. And then the editor has no capacity to open from and save to a remote folder. Not only that: one has to manually specify whether the FTP connection is for the transfer of binary or ascii files, which is — for me –very inconvenient. I logged on for the first time with Big Editor unaware of this feature and I started to transfer image files to the server only to find out later that the pre-selected mode of transfer was ASCII! That first transfer destroyed my graphic files.

I haven’t tested the other features of Big Editor but the ones I’ve seen makes me think twice before I actually use it as extensively as I intended at first. I am not a programmer; I create content. Big Editor is not yet mature enough, I think, for the kind of work I do. While I appreciate its file comparison tool, the utilities that really mattered to me — like FTP and word-wrapping, not to mention the automated creation of image tags from graphic files double-clicked on the file manager and creating one’s code snippets, is sorely deficient. Perhaps the reason for the limited time offer for a single user license was meant for testing the Big Editor. Perhaps future builds will make it a better and really functional editor.