Category Archives: HTML

Chrome Timeline
Date Created: September 9, 2012  Date Modified: September 10, 2012

Before Chrome came out we all loved the functionality firebug bought to firefox, and being that I have been using FF recently I had forgotten how much better Chrome’s debugging toolset is. One of the tools I missed was the timeline, being able to see a visulization of your scripts and their load is really something that does pleasth. I noticed as you can see in the pic below, what scripts were resource hungry, and also which image element I could optimise to save that bit of bandwidth.
To activate the timeline, just right click your page > inspect element > Click the Timeline tab, then hit the record button in the bottom left toolbar, 4th button along (black circle will turn red when recording).

Click this and refresh your page and watch the fun. Hit the record button again to stop recording once the page has stopped loading all its elements.
Looks like I have some site maintenance to do…

NOTE: The information used in the Chrome tool shows speeds of the Chrome browser, it is still worth checking this against other tools, as IE and Mozilla may load at different rates depending on a number of variables.

Update and revert
Date Created: August 20, 2012  Date Modified: May 12, 2013

I decided that my customisations to the twentyeleven theme were getting a bit unmanageable and my timeline for putting the CSS together in a child theme is running out. Back to square one, goodbye funky CSS3 styles (they will be back). I will have a new theme coming in the new year, but for now its OOTB wordpress.

UPDATE 13-5-2013: Well it’s certainly into the new year and I have been doing a bit of site maintenance, so Im linking any posts mentioning an earlier theme to the GreenScreen Theme page.

Lawyers hate HTML
Date Created: August 1, 2012  Date Modified: December 27, 2012

I had my first Law lecture this morning, prior I was in the Murdoch Bookshop stacking up on some tomes I will be needing on this endeavour (and a couple more I just wanted to get). I got home enthused to start reading this new type of littérateur that I will be battling over the next few years, and heeding the advice of my lecturer: That it takes a little bit of a learning curve to get use to legal writing, I decided to start on one of the law books that wasnt part of my required reading material, but was something that I felt more palatable for someone with my background in web–Internet and E-Commerce Law, Business and Policy.

Imediatly I scanned the contents for a topic that I could relate to; Chapter 6 – Domain names and trade marks. Reading the section on WHOIS was where I started. Everyone who works web knows WHOIS, so reading this very legal run-down of something that we as webbys take for granted is… refreshing in a sense. Then I got all academic on the shit and I saw the real problem–well from my pedantic web paradigm anyway. I went to look up one of the references in the United States-Australia Free Trade Agreement, Art 17.3.2 and clicking on that link you see why Im pissed off. Numbered paragraphs that should be ordered lists!, no text anchors!, emphasis where it should be italic!. These things matter if this were a published print document; all hell would break loose if this were printed like this. But on the web, do the document custodians care? Are they even aware that HTML markup can be used to present the information in a more accessible manner?.

I am yet to look into W3C giudelines for web content; due however to the differing nature of legal style requirements in jurisdictions arount the world, I doubt an international standard could be reached specifically relating to Acts. Surely tho, the same W3C guidelines for ordered lists on other web content would apply to the layout of a legal document?. Emphasis and Italic however I see it as a breach, an Act must be written in italics by legal style convention (law?), not emphasised when read or interpreted by a text reader. What this neglect in the article of the USAFTA linked is a clear neglect the legal community have for the web community, or at least HTML.

UPDATE: When going over some online sesources provided for the unit, I came accross the below image. Please feel free to comment.

Image to point out the Short Title of an Act

There was no Alt text , title, or description of this image on the LMS.

An image to outline the correct citing of cases

This image was much worse not only did it not contain any attributes in the HTML to assist, it could have been built as a simple interactive app that would be able to meet an accessable standard

WordPress 3.4
Date Created: June 14, 2012  Date Modified: January 21, 2013

Just upgraded wordpress to this blog, and in typical wordpress efficiancy it updated without a hitch. Im not a big fan of the theme editor, but I see it adding value to the brand. Im not going to rag on about it, I’ll just let their promotional video do that:

UPDATE 21.1.13:Since this is random edit your blog day I had decided to centre the vid in a div… Such an exciting life

Occupy Web Technology
Date Created: November 21, 2011  Date Modified: May 2, 2012

The “Occupy” brand has exploded, Im not going to get into all the different products latching onto the Occupy theme–that would take to long. What I have found a little interesting is that two Occupy movements have popped up that I think are worth a mention here, they are Occupy Flash and Occupy HTML. Oh dear.

Lets start with Occupy Flash. Flash is propriety software that is distributed by the corporate giant Adobe, after they purchased their biggest competitor–much to my annoyance at the time. At the time I saw it as Adobe creating a web monopoly, something the OWS have been vocal about since they launched their brand. Since then the web has changed and the Macromedia stable is nolonger the dux-nutz of web development tools. Who uses Dreamweaver as much as they did in 2001?. Flash managed to survive the Web 2.0 upgrade by catering toward a different market, and it worked; testimony to that was Microsofts attempt at encroaching Adobe’s market share with Silverlight… To any webmonkey claiming flash is dead, just log into Google Analytics and right click on the map overlay!

However the folk at Occupy Flash seem to think otherwise:

Flash Player is dead. Its time has passed. It’s buggy. It crashes a lot. It requires constant security updates. It doesn’t work on most mobile devices. It’s a fossil, left over from the era of closed standards and unilateral corporate control of web technology. Websites that rely on Flash present a completely inconsistent (and often unusable) experience for fast-growing percentage of the users who don’t use a desktop browser. It introduces some scary security and privacy issues by way of Flash cookies.

Flash makes the web less accessible. At this point, it’s holding back the web.

All of the above could be true of any web technology; Sharepoint, iOS, .NET, their all guilty to some extent. Holding back the web? well back in the late 90’s it was Flash that was the fore-front of rich web, and without it we would have never seen any of the Web 2.0 technology we have today; Google Maps, Youtube… I could go on.

Then there is the counter argument from the Occupy HTML folk:

Flash is mature. It’s supported by all major desktop browsers. It’s stable when used properly. If not, it crashes a lot, just like every other technology. It requires constant security updates, just like every other web technology. It doesn’t work well on most mobile devices, and for good reasons. It’s a content plugin, developed during the era of closed standards and unilateral corporate control of web technology. Websites that rely on Flash can present a unique (and often unparalleled) experience for the massive percentage of users on a desktop browser. Flash powers some amazing experiences that work consistently across all of the major browsers in a way that cannot be replicated without Flash technology.

Championing simplistic statements regarding web technologies makes the web less educated.
At this point, it’s holding back the web.

A “content” plugin? well thats news to me–altho the XML data connector is a great little object to display your content in a visually pleasing way, Flash is for the most part asthetically driven as opposed to content driven (but maybe my definition of content differes from the writers?). The point about Flash working consistently accross browsers is a misnomer too–Konqueror anyone?.

As someone who wasted MANY years of my life with ActionScript, Im not one to quickly bash Macromedia’s Adobe’s rich-web software. That said, having years of experience dealing with an anti-Flash market, and the shortcomings of the platform, Im not one to instantly praise it. Flash is still useful in certain situations, and HTML5 does not get full cross browser support (yet). Really its like comparing Apple’s and Wintel’s.

Im not going to bash either technology, both are useful, both are required by the market. Both cater to a different market share. And most importantly: Both can co-exist on the web. If we as developers and designers dismiss one tech for another then we are only limiting ourselves to one market or the other.

Live and let live.

Joomla! as an intranet?: YES WE CAN!
Date Created: October 24, 2011  Date Modified: November 22, 2011

I was approached a few weeks ago by the Equal Opportunity Commission to build a Joomla powered Intranet–at first I had apprehensions: Joomla is not the greatest of CMS software for this application, and all government departments are running MOSS2010, so It would be simple logic to go with SharePoint for the intranet too?

Adding to the complexity of this project it was also suggested that the Joomla run on a WAMP stack–but with the server being SBS2003 I decided to put it together thru IIS instead of go and install Apache on a system that didnt require it.

The system installed without a hitch–its not the first time I have put together a J! on IIS, but its the first time I did so for an intranet. Hopefully this makes business run a bit smother down there at EOC.

Visualise Statistics With Google
Date Created: October 24, 2011  Date Modified: May 13, 2013

Google charts is an amazing piece of API, the data is there for you to use however you want. Supporting SVG and HTML5, this is a great tool to integrate within any site to display metrics visually.

The following example shows World top 10 Current Account balance:
Current Account Balance - Ranking

Browsers
Date Created: June 3, 2009  Date Modified: September 15, 2011

Browsers aint’ browsers!. Each different browser handles code slightly differently and you need to take this into account when building your website or blog template. There are a few different browsers avalible, from Microsoft Internet Explorer, to the Mozilla based explorers like Firefox and the now discontinued Netscape 6. There Is Opera, that I used for a while. On operating systems other than Windows there is Safari (safari also works on windows) and Camino on the Apple Mac. And for linux users there is Konquror, a many more. So it is important to make sure your site is compatible accross multiple browsers.

Rendering colours can vary slightly with browsers so please be sure to use web safe colours when building your site–Please refer to Web Safe Colors post

The browser I use the majority of the time at the moment is Firefox, but not everyone uses it, so I test my site in Internet Explorer and Opera to see if there are any problems with how they render the layout. Most of the time there is no problems but its still good to check.

There are also speciality browrser for people with special needs, Like text only browsers so it is important to remember to add ALT tags to all your images (this is also good for your google rank). There are also mobile browsers to take into account as more and more people are using internet functions on there phone or PDA device.

So to be effective in producing your (or someone elses) website you should run it through a few browsers to see how it looks.

XML and HTML
Date Created: June 2, 2009  Date Modified: September 7, 2013

XML and HTML are so similar that if you have learned HTML, then you basicly already know XML. The major difference is that in XML you can define your own tags–and the tags are defined in the style sheet.

Why its important to learn HTML first is that in some situations, like posting in forums for instance, we cant define our own tags so we need a predefine set of tags and HTML offers that. Being able to define your own tags also gives you an added flexibility that HTML does not offer, in that your not limited to the predefine set.

Unlike HTML, XML is used in applications outside the internet but this is not what I intend this site to be about.

This rant was posted in CSS, HTML, XML on by .

Tools for HTML
Date Created: June 1, 2009  Date Modified: September 14, 2011

To code in HTML you dont need anthing more than notepad, althou commercial products like Dreamweaver offer several useful tools that are used by serious web designers. You can build effective websites using these commercial products without too much knowledge of HTML, but the more understanding of it you have, the easyer it will be to build and maintain your web site or blog.

There are two basic types of tools used in web design, there are text editors and there are what is known as WYSIWYG(what you see is what you get) editors. I will be refering mainlt to text editors, but dont let that scare you!, everything I tell you do do in a text editor you can do in a commercial HTML application.

In this site I will however not be refering to commercial puoducts, and I will keep references to only freeware products that you can download. All products have been tested by me to run on Windows Vista and XP, and they have packages avalible for linux too.

The first tool I suggest you download is Notepad++. I wont say too much about this program now, only that it is similar to the Windows Notepad, thou it has added functionality that you will find useful when coding HTML and CSS.

The second tool I sugest you get, and will be refering to it on occasion if the free text editor HTMLkit. I have been using it for years, both by it self and also along slid Dreamweaver, and I find it to be a great little free tool for web designers. Many commercial designers I have put on to this pruduct love it, and still use it today.

Next there is Nvu, a WYSIWYG. I have only been using this product for a few months as a free replacment for Dreamweaver–and its not as functional as the commercial pruduct, ITS FREE and you cant beat that.

I will also refer to other tools and browser plug-int that you may find useful, so please check out each download as they will be usful.

This rant was posted in CSS, HTML, Software, Tools, Toolset, Web, Web Design, Web Markup on by .

Free WYSIWYG editor
Date Created: May 5, 2009  Date Modified: September 14, 2011

I wrote about this HTML editor called Nvu on my other blog, I’ll post it here because its a Design tool.

From my other blog:
If you have visited this blog recently then you may have read about my trail of gimp. well Im happy to add another open source app to the list of free tools, and this one is great. it called Nvu

Its a WYSIWYG HTML editor, if you dont know what that means then you probably dont need it, but from someone with a few years of Dreamweaver experience, finding an open source tool that is not just notepad on steroids has been a battle ive been waging since Adobe took over Marcomedia.

WYSIWYG (what you see is what you get) is the easyest way to design sites, being able to see what your doing as you do it. there are plenty of free manual code tools (I have been using HTML Kit alongside dreamweaver for as long as Ive been using DW) but Nvu sits happily between them.

Its not like DW, so dont expect it to have all the functionality as the expensive Macromedia Adobe product-but it is simple to use, and does not put heaps of unnessisary code in. If you are looking to switch to open source apps then check this out.

It also works on Linux (and Mac if you suffer cognative disabilitys)

remember free software is almost as good as free beer

EDIT: Here is a tutorial on using Nvu if you are interested