Home Products Downloads News Store Support Forums

Stan's Blog

Stan's Logbook

Development Diary

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!


Generic questions
New paragraph
How do I install Maxprog software on my computer?
macOS
MS Windows
New paragraph
How can I change an application language?
macOS
MS Windows
New paragraph
How to register the software I've just purchased?
macOS
MS Windows
New paragraph
How can I recover the serials I have lost of products I purchased here?
macOS
MS Windows
New paragraph
How can I recover my serial from a registered application?
macOS
MS Windows
New paragraph
How can I find out the product name and version my serial unlocks?
macOS
MS Windows
New paragraph
Where can I read your software License Agreement?
macOS
MS Windows
New paragraph
The software doesn't start, runs very slowly or crashes often, how comes?
macOS
MS Windows
New paragraph
Double-clicking on my files no longer opens them with the software, why?
macOS
MS Windows
Stan Busk If you want to make the most of the software that you have acquired at Maxprog, do not miss the Stan's Blog. It is a library of Tutorials and Tips covering specific features and tipical problems you may have when using our tools. This page is updated regularly depending on the topics discussed in our public forums and issues reported thru our HelpDesk. If you are interested on what we are currently working on (or want to participate in beta testings) don't miss the Stan's Logbook.
For years, MAX Programming has provided companies around the globe with sophisticated and innovative solutions. Our commitment to quality is not only evident in our products, but also in our people. It is our mission in Professional Support Services to ensure that our products perform to the fullest of their ability in order to meet the business objectives of our customers. We provide the tools and information required for improved productivity. To accomplish this, we offer an array of services including: Technical Support, Education Services and Consulting Services.

Maxprog is part of an internet site network made of desktoolset.com, emaildesignstudio.com, familycash.com, icash.promo, maxbulkmailer.com, maxprog.com, maxprog.net, maxprog.org, maxprog.us, myrecipients.com, newslettercomposer.com, sharedcontents.com, stanbusk.com, stanbusk.pairserver.com, usertools.com.

 !  WAIT! In order to add a comment below just use your Facebook, Google+, Twitter or Disqus login data.

Home Products Downloads News Store Support Forums