Home Products Downloads News Store Support Forums

Stan's Blog

Stan's Blog

Tips and tricks on how to use Maxprog products

Compatible with MS Windows Compatible with MacOS

 Share this page! 

Updating an old HTML site to HTML5 and CSS3

Topics

The maxprog web site was originally created in the late nineties with Adobe PageMill, later replaced by Adobe Golive and finally Dreamweaver. I used to edit code manually with TextWrangler quite often because it was faster and to say the true, the code was quite simple, at least for me. WYSIWYG editors are fine for given tasks but if you know HTML, writing code manually is far better!

In July 2016 I decided to move everything to HTML5 and CSS3. The first step was to take some random pages and pass them thru the Nu Html Checker. Well, the result was devastating. Some pages were returning more than 800 errors. Actually the maxprog web site is made of hundreds of pages. I though it would take ages to achieve the update so I started thinking about alternatives, even rewriting the whole site from scratch.

After weeks of thinking and fiddleling around I finally came up with a brilliant solution by writing a PHP template server engine. I started that same July and worked on that all the year long. The result is a fully customizable output using HTML5 and CSS3 with data placeholders, the template system taking care of everything. The good thing is that the template reproduces the same look and feel of the original site. Look at this sample page. As a result I have been able to process the whole site maintaining old and new files live at the same time. Processing the whole site applying that template system took about 3 months of hard work. I am now finished!

The site processing has been done using BBedit on a Mac. That tool has a Multi-File search feature that allowed me to change things in hundreds of files at once. Lots of things have changed in HTML5 and with CSS3 styles are not applied as before. You have to process all <table>, <tr>, <td>, <img src>, <div>, <span> and <p> tags making sure the styles are applied properly. As an example the line:

<img src="/pictures/mypicture.png" alt="" border="0" />

had to be replaced with:

<img src="/pictures/mypicture.png" style="height: 18px; width: 18px; border: 0px" alt="" />

The files contained dozens of thousands of them but the big problem was the <font> tags, how could I replace so many of them with my CSS3 files? Dozens of thousands of <font> tags actually... Well, I did it and it took less than 5 seconds, again with BBEdit, with the help of this simple regex expression: <font[^><]*>|<.font[^><]*> and finally I just had to modify my CSS file to set the default font face, type and color, that's all!

In the last months I enhanced the PHP template server engine to support pads and mobile phones so all the web site pages look fine everywhere. I had to implement that quite fast because Google gives much better ranking to pages that look fine on mobile devices. Actually my pages started losing positions in Google search result pages starting May 2016. As of mid July 2016 many maxprog pages had disappeared from the google index so I scrambled to catch up!

More information on HTML5 here and CSS3 here.

You may also be interested in using RSYNC to synchronize local and remote directories.


Stan Busk - Software Engineer
at www.maxprog.com



Did you like this post? Share it!


   

Home Products Downloads News Store Support Forums