The Home of IT Evolution
Home! Sweet, sweet home! There's no place like home

Welcome to the home page of IT Evolution. Evolve your knowledge of web development by exploring the various sections of this web site.

Whether an absolute beginner or a serious web developer, you will find lots of content on best practise, what to avoid, cutting edge material, advise and much more from a seasoned web instructor/trainer/developer/consultant whose sole intention is to help you progressively enhance your skill set and web sites.

Feedback

Just in case you want to feedback any information to me whilst I go through the process of re-designing my home page, please visit my Web Book comments section, where I have created a post for this home page discussion.

What's New?

Keep an eye on this "What's New?" section for the latest information on what I have added to the site but don't worry about missing anything. My site navigation will assist you to easily locate any material contained within this web site.

The colour of the Browser Tests... container will change as you visit this page in different browsers. Follow the link to find out how.

I have built my XML/XSLT framework, which is now producing the static files on this site, even though I am still able to update any one of them. I'm well pleased with this. More about it later.

Currently busy learning about Symphony CMS locally. I will be uploading my work shortly.

I have made a few changes to my own XML/XSLT framework in view of what I have learnt using Symphony. I'm having to make quite a few changes, hence a slight delay in progress.

Features Required

(This section will be removed once completed)

Tick off items from list of features as they are implemented. The list is currently growing faster than I am getting the tasks done.

I will record this list for future reference and most of the items will be explained as material is added to the site.

• Put efforts on-line right from the starting bat. (Done, cos' you're reading my last upload of the site)
• On-line site is at www.itevolution.co.uk/
• Local site is itevolution/ (Obviously, only accessible by myself so this link is just for my convenience so that I can quickly compare any differences) - FTP to on-line site on a regular basis
• XHTML Strict 1.0 DOCTYPE and XML name-space
• Mark-up validation button
  (A glossy CSS3, no image, button which I am still working on for progressive enhancement, modular CSS and accessibility)

  XHTML 1.0 Strict

• utf-8 character encoding throughout
• This utf-8 encoding allows me to directly enter literal characters into the mark-up, style-sheets and JavaScript, such as ☺, ☹, ☀, ☉, ☁, ☂, ☇, ☈, ☄, ☃, ☠, ☎, ✆, ✉, ✍, ✎, ✏, ✐, ✂, ✈, ☑, ☒, © 2010, ®, ™, √, ✓, ✔, ✕, ✖, ✗, ✘, ཈, ¦, ♥, ♣, ♦, ◊, ♠, ✡, ★, ☆, ✠, ✞, ←, ↑, ↔, ↓, →, ∗, «, », ☜, ☝, ☞, ☟, “I like!”, ‘quote …’, ❝…❞, ❛…❜, ∅, ∇, Δ, 3½ ÷ 2¼, 1¾, 4•8, 30°, 8ˆ³, Π r², all star signs such as ♈ Aries, all chess-board pieces, such as ♘ White Knight, all music symbols, such as ♫, see †, Nepali: म काँच खान सक्छू र मलाई केहि नी हुन्‍न् and many other languages, ∴ why not press ↵ to continue?
  Plus many more, no image, characters that can also be styled, like this snowman ➫ ☃
  so I could replace my , and images with ✖, ✔ and ? characters
• A great reference for Unicode characters displayed by the major Web browsers if you wish to maximise the usage shown above. ❀ Dingbats, ☃ Miscellaneous Symbols and ➫ Arrows will be the most useful for general icons ✔
• Unicode Update - Once I started testing this page across browsers, it quickly became apparent that embedding Unicode characters is not a safe option. As I tested on different VMs (Virtual Machines), many characters just display as a block character, for example, here is a screen shot of what I see on my development machine:
  
  and here is what I see on one of my VMs
  
  The reason this happens is because the Unicode font character sets need to be configured on your system. This would be an unsatisfactory solution for web applications. If you want details on the process of setting up Unicode on your system, then take a look at this help file about displaying Unicode characters
• Relevant title
• Author
• Description
• Keywords
• Linked CSS3 style-sheet
• CSS3 validation button (another no image glossy button)

  CSS level 3

• The glossy buttons need to be fixed for IE < 9. Might just adjust the background colour because they look OK and can be considered a progressive enhancement
• Default style-sheet (Persistent ) - For the common parts of all other style-sheets (Centres Content)
• Main style-sheet (Preferred ) - Just the differences (Default orange background)
• alternate style-sheet (Alternative ) - Just the differences (Alternative black background)
  • Safari, Google Chrome and IE7 or less does not support alternate style-sheets
• Use media attributes and have a print style sheet within the Persistent style-sheet
  Type "about:config" into the URL bar and hit "Enter".
  Then type "postscript" into the Filter bar and change the value of print.postscript.paper_size to "A4".
  Then type "print_paper_name" into the Filter bar and change all entries to "A4".
  In the same way (for consistency) you may change all entries "print.print_paper_width" to "210.00" and all entries "print.print_paper_width" to "297.00".
• If your browser supports style-sheet switching, try it
• Add a style-sheet switcher. I would only do this for accessibility but most modern browsers allow style-sheet switching and have zoom facilities so I'm undecided
• Style the site themed on Evolution (Any current styles are just to test functionality and I will focus on the design at a later stage). Working on this elsewhere currently
• No JavaScript errors (on-going)
  • I do get JavaScript errors in IE4. This browser only receives a linear layout structure and content along with IE5.5 and older devices. None of the other old browsers give me an error but because IE4 sees the link to jQuery, even though it does not utilise this library, it throws errors (syntax errors would you believe!). I reported the bug but its highly unlikely to be fixed because no-one cares about these old browsers any longer.
• init.js
  • .js class name added
  • Detect layout engine (not browser) support
  • Name-space defined
  • Lazy load layout engine specific styles (gecko, webit, presto, trident). Each engine only loads the vendor specific styles it understands, reducing loading and parsing time.
• trident.css - One file approach (for version specific IE CSS and JavaScript fixes)
• A decision must be made about what version of IE to support down to:
  • Definitely not IE3, IE4 or IE5 (Considered extinct)
  • IE5.5 is not supported by jQuery and no longer by Microsoft. (Not supported for this site but will support for customer sites if required)
  • IE6 is very buggy and perhaps should be encouraged to upgrade. (Supported for this site but will drop support for customer sites if required. It would just receive a linear layout)
  • IE7 still buggy but perhaps must be supported currently. (Supported for this site but will drop support for customer sites if required. It would just receive a linear layout)
  • IE8 much better but still a few issues. (Supported on this site)
  • IE9 looks like it is going to be very standards compliant but users are required to upgrade to Windows 7. Which I think will cause many users to switch away from IE and probably never go back once they have experienced an alternative. (Wake up Microsoft) (Fully supported on this site with CSS3 compliance with no fixes in trident.css)
• Page must render without flash of un-styled content (FOUC)
• Only semantic, accessible, XHTML mark-up will be used (Before I add any enhancements, I always meet this requirement)
• Must add a glossary system for abbreviations, acronyms and definitions (I use them a lot), with unobtrusive links to Wikapedia. (Keep my Intranet Glossary up-dated as the master copy). Interestingly, I had to add the closing </a> tag to the jQuery wrap() method for this to work in IE browser (even for IE9)
• All content will be spell-checked according to page language (British English). (Using Firefox add-on). (on-going requirement)
• All content to be passed through a screen reader
• Accessibility validation button
• I have decided to go with jQuery and the complete set of jQuery Tools combined, minified and hosted on a CDN

  <script type="text/javascript"
   src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>

  jQuery Tools

• Fully learn and maximise jQuery Tools because I think they are ideal for web site building
• Page script
• Utilise the jQuery Chili syntax highlighter plugin
  • I am actually using the very latest version which is still at alpha stage
  • All is working fine but I will not modify my Chili notes until it has been released
  • There are a few changes from the previous version so I will need to be careful
• Tab - Site navigation
  • Cross browser
  • Expanded, title tool-tip, minimal CSS
  • Option to collapse
  • Option to fully expand, showing titles
  • Remember state
• Two page site only
  • This is not going to be practicable because this page is getting far too long, even though it will eventually be trimmed down
  • It will be better to spread information around for easier consumption
  • I will need to put a frame-work together so that each page shares the resources. I will use my XML/XSLT frame-work for this because it output fast=loading static XHTML files. Done
• CSS3 explosion to black
• Multiple image backgrounds
• CSS3 progressive enhancements - Test as we move forward
• Home page dissolves and moves off to left
• Menu fades in from right
• Re-establish XML test site. Update Data/TobeSorted/CurrentProject/ITE/ to show a working example of how XML might be used. Show a supported browser list.
• Experiments - Encourage Firefox
• Web Book
• HTML5
• Pushing CSS
• Sponsored By tab
• What's New section. Change this often (Started)
• Create a favicon
• Last modified (Done)
• Accessibility tab
• Archive existing IT Evolution This caused problems getting Wordpress to work bot OK. An eduction!
• Watch out for Basecamp resources Need to test for this. Probably links to slide-shows will be broken
• Comments linked with Wordpress Categories
• Add a blog to the site
• Private site using Drupal
• Advertise
  • Website (XML/XSLT)
  • Make use of - XStandards
  • Website (Wordpress CMS)
  • Website (Drupal CMS)
  • jQuery/ Standards Development
  • Training and Consultancy
• Build sample training material based on my previous Ltree efforts
• SEO optimised
  • Request Web crawl
  • Site Map and robot files updated as content added
  • Go through SEO best practises and add to list for reference
• Accessibility optimised - WAI ARIA Landmark Roles
  From Drupal:
  The roles are not hard coded into the templates, they are inserted into the mark-up using the jQuery attribute function. JavaScript is currently the preferable way to insert ARIA roles because they are not valid XHTML, therefore your site will not validate if they are hard coded into the mark-up.
• Performance optimised - Combine presentation and behaviour
• Try and obtain a YSLOW 'A' Grade for the site
• Update to PHP 5.3 - but updated to PHP 5.2.13 with XSL support.
• Update to ASP.Net 4 - Where Am I
• Global resources http://www.itevolution.co.uk/old/css/, http://www.itevolution.co.uk/old/js/ and http://www.itevolution.co.uk/old/img/ - I need to decide what to do here
• Resource Sub-domain http://resource.itevolution.co.uk/ - I cannot see the advantage of one sub-domain. I think CSS and JS on one sub-domain and images on main domain
• Work on each section of the site having its own sub-domain so I can stick to my relative root mapping style
• Graceful Degradation
  • Indicate No CSS presentation
  • Indicate No JS behaviour
  • Indicate No Cookie storage
  • Study other storage mechanisms (jQuery cookbook and on-line)
  • Offer upgrade route
  • A table indicating what is/is not available would be nice
• Support Tickets
  • How do I delete aspnet_client folders from site?
  • Upgrade PHP
  • Upgrade .Net
  • Let them know about Sponsor link
  • Try and obtain some Apache space
• Establish a browser test chart so we can progressively test as features are added.
• Use a sprite for browser icons and other common icons, such as my yes, no and not sure icons.
• Create a 404 file not found page Try this Non-existant page.
• nnn
• yyy
• qqq
• nnn
  • xxx