Working On It! » Web Culture http://alesmeralda.110mb.com/blog many are the things that you would like and need to know... Fri, 14 Aug 2009 21:19:55 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 What A Relief! http://alesmeralda.110mb.com/blog/2008/07/16/what-a-relief/ http://alesmeralda.110mb.com/blog/2008/07/16/what-a-relief/#comments Tue, 15 Jul 2008 16:27:49 +0000 abet http://alesmeralda.110mb.com/blog/2008/07/16/what-a-relief/ BeerWin

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

]]> http://alesmeralda.110mb.com/blog/2008/07/16/what-a-relief/feed/ 0 The IFrame Ticker of Mystical Geek http://alesmeralda.110mb.com/blog/2008/07/14/the-iframe-ticker-of-mystical-geek/ http://alesmeralda.110mb.com/blog/2008/07/14/the-iframe-ticker-of-mystical-geek/#comments Sun, 13 Jul 2008 22:21:01 +0000 abet http://alesmeralda.110mb.com/blog/2008/07/14/the-iframe-ticker-of-mystical-geek/ _01mgeek_iframe

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.

 <!--<IFRAME> ticker- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->
<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

<script language="JavaScript1.2">

//IFRAME TICKER- By Dynamic Drive (http://www.dynamicdrive.com)

//configure delay between changing messages (3000=3 seconds)
var delay=5000

var ie4=document.all

var curindex=0
var totalcontent=0

function get_total(){
if (ie4){
while (eval("document.all.content"+totalcontent))
totalcontent++
}
else{
while (document.getElementById("content"+totalcontent))
totalcontent++
}
}

function contract_all(){
for (y=0;y<totalcontent;y++){
if (ie4)
eval("document.all.content"+y).style.display="none"
else
document.getElementById("content"+y).style.display="none"
}
}

function expand_one(which){
contract_all()
if (ie4)
eval("document.all.content"+which).style.display=""
else
document.getElementById("content"+which).style.display=""
}

function rotate_content(){
get_total()
contract_all()
expand_one(curindex)
curindex=(curindex<totalcontent-1)? curindex+1: 0
setTimeout("rotate_content()",delay)
}

window.onload=rotate_content

</script>
 <style type="text/css">
 <!--
 P {
   font-family:Garamond;font-size:11pt;
 }

 A  {
   text-decoration:none
 }

 -->
 </style>
<BODY>

<!--ADD YOUR TICKER CONTENT BELOW, by wrapping each one inside a <DIV> as shown below.-->
<!--For each DIV, increment its ID attribute for each additional content (ie: "content1", "content2" etc)-->

<div id="content0" style="display:''">

<!-- ADD TICKER's CONTENT #1 HERE--------------------->

<span style="color:maroon;font-size:14pt;font-family:Trebuchet MS;Helvetica;Tahoma;font-weight:bold;">Update Your Bookmarks</span>
<p>You may now access this site using the shorter URL:  
<a href="http://www.agustino.org" target="_top"><span style="font-size:14pt;font-weight:bold;">www.agustino.org</span></a></p>

<!-- END CONTENT #1----------------->

</div>

<div id="content1" style="display:none">

<!-- ADD TICKER's CONTENT #2 HERE--------------------->
Some content here. <ul><li>even<li>lists<li>are<li>allowed</ul>
<!-- END CONTENT #2----------------->

</div>

<div id="content2" style="display:none">

<!-- ADD TICKER's CONTENT #3 HERE--------------------->

Some content here.  Even <span> specifications are allowed.
<!-- END CONTENT #3----------------->

</div>

<div id="content3" style="display:none">

<!-- ADD TICKER's CONTENT #4 HERE--------------------->
<table border="1"><tr><td>Some content here.  
Even tables are allowed.</td></tr></table>
<!-- END CONTENT #4----------------->

</div>

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.

]]> http://alesmeralda.110mb.com/blog/2008/07/14/the-iframe-ticker-of-mystical-geek/feed/ 0 Get It Before It Turns PRO http://alesmeralda.110mb.com/blog/2008/07/04/get-it-before-it-turns-pro/ http://alesmeralda.110mb.com/blog/2008/07/04/get-it-before-it-turns-pro/#comments Thu, 03 Jul 2008 17:42:53 +0000 abet http://alesmeralda.110mb.com/blog/2008/07/04/get-it-before-it-turns-pro/ 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.

_01beerwinsuite

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 …

_01beerwinsuite1

_01beerwinsuite2

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.

]]> http://alesmeralda.110mb.com/blog/2008/07/04/get-it-before-it-turns-pro/feed/ 0 HTMLDocEdit http://alesmeralda.110mb.com/blog/2008/05/23/htmldocedit/ http://alesmeralda.110mb.com/blog/2008/05/23/htmldocedit/#comments Thu, 22 May 2008 22:07:48 +0000 abet http://alesmeralda.110mb.com/blog/?p=55 Htmldocedit

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 

  1. It uses <DIV> instead of <P>;
  2. The tags it makes are in capital letters when these should be in small letters;
  3. It employs the tags <STRONG> and <EM> instead of <b> and <i>;
  4. 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.

Htmldocedit2

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

]]> http://alesmeralda.110mb.com/blog/2008/05/23/htmldocedit/feed/ 0 Footnotes in HTML? http://alesmeralda.110mb.com/blog/2008/05/13/footnotes-in-html/ http://alesmeralda.110mb.com/blog/2008/05/13/footnotes-in-html/#comments Tue, 13 May 2008 08:15:49 +0000 abet http://alesmeralda.110mb.com/blog/?p=52 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. 

  1. a font formatting tag for superscript which raises a character (this is for your numbered note)
  2. 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
  3. your a href tag.

At the end of the phrase or the sentence where you place the footnote reference, surround the number with the <sup> tag, like so:

<sup>1</sup>

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

<sup><a href=”#note1”>1</a></sup>

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

<p><a name=”note1”>1.</a>  Some note here.</p>

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:

<a href=”javascript:history.go(-1)”>[top]</a>

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:

<sup><a href=”footnotes.html#note1” target=”yourframesname”>1</a></sup>

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.

]]> http://alesmeralda.110mb.com/blog/2008/05/13/footnotes-in-html/feed/ 0 An Old-Fashioned Editor For The Modern Coder http://alesmeralda.110mb.com/blog/2007/09/26/an-old-fashioned-editor-for-the-modern-coder/ http://alesmeralda.110mb.com/blog/2007/09/26/an-old-fashioned-editor-for-the-modern-coder/#comments Tue, 25 Sep 2007 20:56:24 +0000 abet http://alesmeralda.110mb.com/blog/?p=45

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

PlainHTML Tools

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.

]]> http://alesmeralda.110mb.com/blog/2007/09/26/an-old-fashioned-editor-for-the-modern-coder/feed/ 0 BigEditor: A Promise Still On The Way http://alesmeralda.110mb.com/blog/2007/09/05/bigeditor-a-promise-still-on-the-way/ http://alesmeralda.110mb.com/blog/2007/09/05/bigeditor-a-promise-still-on-the-way/#comments Tue, 04 Sep 2007 20:33:47 +0000 abet http://alesmeralda.110mb.com/blog/?p=44 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…


Error 1

Error 2

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:


Rating

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.

]]> http://alesmeralda.110mb.com/blog/2007/09/05/bigeditor-a-promise-still-on-the-way/feed/ 0 BBCode to HTML Converter http://alesmeralda.110mb.com/blog/2007/08/28/bbcode-to-html-converter/ http://alesmeralda.110mb.com/blog/2007/08/28/bbcode-to-html-converter/#comments Tue, 28 Aug 2007 08:35:14 +0000 abet http://alesmeralda.110mb.com/blog/?p=40


Just a few minutes after I posted my discovery of the offline BBCode Text editor, I found a related application: a BBCode to HTML software. I found it in an AOL website. The application simply converts any BBCode formatted text into HTML 3.2.



This is the way the author explains its use

This program will convert BBCode (Bulletin Board Code) to HTML. It’s useful if you work on forums which support either BBCode or HTML and need to convert your “canned speeches” or if you have written something in bbcode that you would like to put on your website. You could also use it to preview your posts on boards that don’t have that feature built in.

For me, its use to convert my bloggable forum postings into articles for this weblog. :)

]]> http://alesmeralda.110mb.com/blog/2007/08/28/bbcode-to-html-converter/feed/ 0 AHK BBCodeWriter http://alesmeralda.110mb.com/blog/2007/08/28/ahk-bbcodewriter/ http://alesmeralda.110mb.com/blog/2007/08/28/ahk-bbcodewriter/#comments Tue, 28 Aug 2007 07:31:23 +0000 abet http://alesmeralda.110mb.com/blog/?p=39 I found an offline BBCode editor that is being distributed for free at this forum board. It is called AHK BBCodeWriter. It is a very small application (377 kb) and downloads easily. Below is a screenshot of the application.




It has a lot of features that really allow one the possibility of writing posts in BBCode offline. It even has a preview feature.



While the program automatically sets up IE as its default preview browser, the author suggests something faster for Windows users: the MSHTA.exe. I found it at C:\Windows\System32\mshta.exe

The author also mentions that he made the program for PHPBB users. I created this post originally in AHK BBCodeWriter and pasted it onto our SMF forum and it worked well. My only frustration is that the HTML to BBCode Converter here works only one way. :( That however is a minor setback since there is a BBCode to HTML converter online tool

]]> http://alesmeralda.110mb.com/blog/2007/08/28/ahk-bbcodewriter/feed/ 0 Of DIVs and SPANs and Browser Wars http://alesmeralda.110mb.com/blog/2007/08/28/of-divs-and-spans-and-browser-wars/ http://alesmeralda.110mb.com/blog/2007/08/28/of-divs-and-spans-and-browser-wars/#comments Mon, 27 Aug 2007 18:27:32 +0000 abet http://alesmeralda.110mb.com/blog/?p=38 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.

]]> http://alesmeralda.110mb.com/blog/2007/08/28/of-divs-and-spans-and-browser-wars/feed/ 0