Entries Tagged 'Web development' ↓

Pinnacle Cart is a proprietary ecommerce product which supports an impressive number of payment gateways, including HSBC’s CPI. Unfortunately, in the version I was using (Pinnacle Cart 3.5.4) their HSBC-CPI integration is broken.

After somewhere over 6 hours debugging and talking to HSBC (and HSBC, really - providing a blank white page when something goes wrong with no error message isn’t helpful) I tracked down the problem. Pinnacle Cart has an “I agree to the Terms & Conditions” checkbox on the final page. This checkbox is named form[agree]. HSBC won’t accept POST variable names containing [ and ].

Change the field name to agree and it works perfectly.

I haven’t spotted this documented in the HSBC documents; Pinnacle Cart may have fixed this in version 3.6 but I cannot tell.

Here’s a little problem I stumbled across today

You’re working for a client on an hourly rate.  There’s no allowance for expenses.

For a particular task you know it’s cheaper for the client if you buy some software to do the job (even taking the software cost into account).  It’s unlikely you will use the software for any future work and there’s no expenses allowed, so the price of the software comes out of your pocket and not the clients.

Do you:

1. Not buy the software and charge the client for all the time it takes?
2. Buy the software and lie about the hours spent on the job, inflating them to cover the cost of the software?
3. Buy the software out of your own pocket and bill the correct hours taken?

What would you do?

[This post is a work-in-progress as I've not found time to finish it.  Only published publically as I can't make Wordpress make it visible but not appear on the front page or archive pages.  Your comments will influence the outcome]

As I noted in a comment, markup is a framework.  We don’t need a CSS framework with special attribute names to give meaning to the document - the markup should be doing this.

The role of markup is to convey information, in human or computer readable form.
This could be presentational information or content - I have no problem with either (I do have problem with mixing both in the same document… although HTML works)

Thus the fuss over Blueprints CSS framework and the level of separation - well yes fuss all you like, but many (most?) ‘valid’ ‘CSS-based’ websites are nothing more than presentational tag soup - the result of tables based designers jumping on the buzzwords and bastardising it to get their results.

I like things to be perfect and so want perfect separation, and my pragmatic friends have been telling me to get a life since 2003.  I have, and have left that approach at the theoretical level - I see no fun in compromising by transforming the XML to something meaningless.

But in fact you have to.  HTML is a presentational layer, with some semantics built-in.  When we type <p>…</p> we are saying the contents is a paragraph (supposedly), but subconsciously we are also saying we want it displayed as a paragraph, with the margins that entails.

Had HTML elements never had styles built-in then the situation might be different; we however are used to it.  And I think we wouldn’t want it the other way round - our minds work on concepts like paragraphs.

Defining an abstract tag name and a set of rules to style it into a paragraph wouldn’t be done frequently - we’d probably call it <para> and have a global style system we used on all documents which made it display just like <p> does.

I would say that adding class names like span-4 is the least of our worries.  If we’ve got to this stage of degradation, what harm does a little more do?

By the time we add one wrapper div, or a clearing div, we’ve polluted the page.

In itself a class name has no semantic meaning.  No text has semantics, save for those we give it.  What the use of structural class names lack, as Simon Willison has already pointed out, is memorability and a clear meaning for when we read through the code later.

There again, when you define new tags in XML, it is the human to whom they have semantic meaning, the human who empowers them.  To a computer they are just characters to process.  Any attempt to argue otherwise is to imply the computer has intelligence.  I detect this when people argue over whether to wrap form elements in <p> or <div>.  In the situation either has a valid meaning (but only because of the presentational styling applied to <p> by default).

[[Define semantic??]]

I’ll end by saying I don’t entirely grasp the meaning of semantic, when something is semantic and when something isn’t.  I’ve used words here which if you understand a narrow meaning for then may not fit.  Have a broad mind, and if you want to educate me on the real meanings (or an alternative word that would fit more accurately) go for it!

I’m no expert on what semantics really are - if you want one talk to Steve Hesketh or any member of the webdesign-l mailing list

So is HTML a semantic (structural) level, or presentational?

How does it differ from RTF, LaTeX etc, in its outcome?  Every format developed has description associated.  The ‘modern’ XML-based forms are certainly my favourites (see above re: perfectionism) but all these previous ones worked.

Is there a difference in semantics?  I’d say LaTeX (and possibly RTF, which I don’t know well) transmit as much meaning as HTML.

=======

Now to move onto the Blueprint framework which has been receiving so much attention.

It doesn’t deal with two important problems:
1. Source ordering
2.  equal-height columns

The first is the more serious of the two.  When I have a standard 2 or 3 column page layout, I want the contents to come first - this is after all more important.  Using absolute positioning this can be done, however I’ve found that to open up a whole new set of problems.  Which leaves floats… so I give up and put the source code in the order needed to float the elements as needed.

I tried using Blueprint on a new simple 2-column site I was doing it proved too inflexible - the grid sections were too wide. Admittedly I didn’t spend long reading the documentation, but dived in with the grid and examples.

I chose the wrong column widths at the start and when I needed to go back through my mark-up and change span-3, span-8 to spen-2 and span-9 I gave up and wrote my own CSS.  A flexible-width system, based on the size of the container would be acceptable, but now I have widths defined in the CSS *and* the HTML.  (After all, changing widths in the framework defeats the object - I could write my own CSS instead!)

I did appreciate the grid support for Blueprint - we all know that the typography on a well thought-out grid looks gorgeous.
=============

Does it matter if semantics are preserved in HTML markup?
——————-

To some yes, but in the end the web and web design today are commercial occupations, and what matters (in 99.9% of cases) is that the technology and approach used gets the job done, works for people, and pays back the investment made.  If that can be done faster without worrying about ‘academic’ matters like semantics of the markup (lets face it, only technical people bother about) and how elements pollute the DOM, then that’s how it’s going to be done.

I’ve just reached the end of a long week dealing with CSS inconsistencies and browser bugs, so I’m not my most positive about web technology.  Clients don’t understand why it can’t be pixel perfect (they also don’t understand that it takes time to convert a Photoshop mockup to a web page - “It’s all laid out nicely and the graphics are there, what’s the problem?”) and I can’t blame them for that.  If a printer delivered 4 boxes of brochures with the contents of each box looking different, and blamed it on using 4 different printing machines and “nothing he can do about it mate” I’d be pretty darn annoyed.

What do we mean by semantics?  I’ve just spent an hour trying to create a CSS-thumbnail gallery with definition lists (because I believe these to have more suitable semantics than an unordered list or divs) and failing, due to the odd size images and caption requirements I have.  I’m certainly not ruling out lack of skill on my part, but if I can’t do it why should most people be able to?  And does bending HTML to display an image gallery destroy the semantics, no matter what tags are used?

Semantics will always give way to ease of use.

======================

And (the million dollar question) where is the line between pragmatism and being slovenly and letting anything that’s easier be done?  Which side of the line does a wrapper div go?  A div to clear floated elements?

=======================

“if I have the tech-savviness of a guy who is barely able to program with html, will I be able to do simple things like add new designs and modify existing ones without pulling my hair out?”

We may say that people shouldn’t have such unrealistic expectations, but they do and we need to work with that.  Microsoft Word has made them expect they can do everything they want themselves.  Once that mindset’s in place, it’s incredibly difficult to go against the flow.

Saying “If they can’t write HTML they have no place on the web” is fine, and a view I’m sympathetic with, but for information sharing it limits people with valuable information who don’t have the technical skills (it also limits the people with junk, but that’s by the by…).

A two-teir web would be great, if the distinction can be enforced (”to be a pro you have to do it this way, everyone else can do whatever they like but can’t charge for it”). 

I build a lot of content management systems, and am frequently asked by the more savvy users to enable TinyMCE’s table support, so they can lay out pages.  When they do that in MS Word and there is no alternative toolbar in an online WYSIWYG editor, it’s very hard to explain to them that I won’t/shouldn’t because it doesn’t match up to web standards pipe-dreams — even though this is something they want in order to gain control of their website and serve their business needs! 

‘Purity’ and ‘Practicality’ have nasty edge cases like this.  (And a more granular CMS is not always a solution - neither are they technical enough to work with HTML directly)

=======================

What does it mean for something to be semantic?  When is something semantic and when isn’t it?  What defines if it has a semantic meaning?Markup cannot be semantic - it transmits the semantics(???)

“For example, with HTML and a tool to render it (perhaps Web browser software, perhaps another user agent), one can create and present a page that lists items for sale. The HTML of this catalog page can make simple, document-level assertions such as “this document’s title is ‘Widget Superstore’”. But there is no capability within the HTML itself to assert unambiguously that, for example, item number X586172 is an Acme Gizmo with a retail price of £199, or that it is a consumer product. Rather, HTML can only say that the span of text “X586172″ is something that should be positioned near “Acme Gizmo” and “£ 199″, etc. There is no way to say “this is a catalog” or even to establish that “Acme Gizmo” is a kind of title or that “£199″ is a price. There is also no way to express that these pieces of information are bound together in describing a discrete item, distinct from other items perhaps listed on the page.”
Source - http://en.wikipedia.org/wiki/Semantic_WebReferences:
http://en.wikipedia.org/wiki/Semantic_HTML#Semantic_HTML

Summary questions:

1. Do semantics have anything to do with code cleanliness?  Does polluting a page with unnecessary structural markup (wrapper divs…) remove the semantics?
2. How can any markup have semantics?
3. Why is <div id=”content”> any more semantic than <div id=”s876rts”>?
4. How does (X)HTML semantic markup (at the level of <p> vs <div> vs <table>) make any difference to anyone?

Changelog:

29 Aug, 9pm: Added summary questions, cleaned up (some) muddled writing that was clear to me but no one else!

Enjoying your holiday?  Apart from enjoying some time off and doing a bit of work (things never stop when you’re self-employed!) I’ve started playing with Django, which is something I’ve wanted to do for a long time.  Aside from being curious about Symfony-Rails-Django and which is best (I like absolutes, OK?) and being very keen on anything Simon Willison’s had a hand in (FormProcessor was an inspired design), I’m hoping it will allow me to write a simple CMS for a Christian group that I volunteered to set up a website for (long story there… let’s just say requirements have grown from the 3 page static site, and I don’t want to spend hours of my life changing content!).

From teaching programming to physics students I have some knowledge of Python, so that’s a good start.

When doing quick or small projects I don’t design the database fully beforehand.  I should, but often that would take longer than building the app.  Instead, I set it up with the perceived needs, and refactor as I go.  This is fine for my usual PHP development, and refining and syncing from MySQL Workbench or similar is fine.  However…

Django trumpets the benefit of not needing to write SQL to create the tables, as they’re defined in the Python code.  I am skeptical because as I’ve already mentioned I use graphical tools to do all this; but hey, it’s always good to try a new approach.

So I defined my model (yeah just one - let’s keep things simple first time round!) and it created the table for me.  Nice.

Inserting data, I discovered I’d forgotten to add a postcode field to the model.  No sweat, add one extra line to the model and… and what?  According to the Django documentation, the two options available are:

1. Drop the table (and any existing data) or
2. Alter the table structure by hand.

As I was only inserting the first record I went for option one.  However I wasn’t happy - the benefit of ‘not having to write SQL!’ does not stand up to scrutiny when it comes to modifying tables.  I’m lazy, and so dislike losing data (even when building a test application).  At the same time, changing the structure in the model AND going to change it in the DB doesn’t appeal either.  Hand-editing MySQL tables is asking for trouble

With that out of the way, I was impressed by the ease of creation.  As I’ve commented in a feature request report a while back, Django’s admin isn’t as flexible as I’d like.  But for what I need for this site I think it will do it well.

Now to see if I can set up users with permission just to edit ONE record in this DB table - any way to tie their permissions to a record ID?

Just saw the following text in a job advert while browsing the tradingeye website (their e-commerce product looks good, if a little pricy).

Perhaps my understanding of what is meant by an ‘experienced PHP developer’ is different, but all who I’d put into the experienced category (ie their life revolves around PHP development) are crap at Photoshop or any kind of graphic design.

Either developers in Newcastle are a lot more flexible than everywhere else, ‘Experienced PHP developer’ means all-rounder, or HR have entered the wishful-thinking mode
Whichever, I’m looking forward to seeing the resulting application.

[ Incidentally, I undertake freelance work, specialising in PHP applications and troubleshooting, and also offer full web application development through Maple Design Ltd - in case you hadn't realised!]

Facebook proudly declares itself to be XHTML 1.0 Strict via the doctype embedded on every page. However, as anyone who has had a peek at the source code will be able to confirm, this is not even wishful thinking but a downright lie. Forget the usual “I’m trying to be valid but a few mistakes are bound to creep in” problem (which is as far as I often get); these guys are defining custom attributes, repeating ID tags and not escaping ampersands in URLs.

I was digging into the “Invite friends to an event” page because I wanted to see how the “Invite Friends on Facebook” search was so responsive (I tried something similar a few months back and gave up). Turns out it’s extremely simple, but makes huge use of custom attributes on tags. Validating the page gave me over 300 errors.

Two points:

1. Why should anyone care?? Facebook have created something amazingly popular with sort-of a web 2.0 interface and it works in all major browsers. Who can complain about that? Well, I’m going to. Leaving aside issues of ‘That’s not fair!!’ because they’ve taken a pragmatic approach that got the job done fast and which I wouldn’t be happy using, the point of standards is to be a standard. If Facebook don’t have any intention of being valid XHTML 1.0 why claim to be so? What happens in the future if browsers tighten up? Is Facebook only looking to the short-term, until someone purchases it and its founders’ profit?
2. Could everything Facebook have done be done without custom attributes, or are they a necessary evil? Looking at it I’d say it can all be done without, but some of the Javascript code would be more complicated and tied to the HTML structure (having to get certain data from child elements).

Incidentally Facebook could have the best of both worlds: extend the XHTML doctype to allow these attributes and have valid code at in the process!

For anyone else who’s read the Google Base XSD file and is wondering why an Atom 1.0 file created against this specification won’t validate if they use PayPal - it’s because that attribute, despite being in the XSD, isn’t in the live schema.

Just to add to the mess, the XSD file and  documentation also say that price_type can only have two values: “negotiable” or “starting”.  However if you create a product entry via the online interface on the Google Base website, you can set the price_type to “Fixed”.

This begs the question - what are they validating against?  What is the point of having an XSD file if it’s not there for validation?

Google Base is rough at the edges, and it’s a shame they didn’t put more work into it before releasing it.  I miss certain features, such as fetching an XML feed of products from my website rather than having to upload the file to Google Base.

Having spent two evenings looking at Javascript libraries and not being able to decide which to use (there’s so many of them!) I’m going to throw the question open: which Javascript library do you use and why?

I’ve looked at Prototype, Dojo, Mochikit, JSQuery… they all seem to imply they’re the best and yet do the same things as other libraries. I’ve heard stories about prototype polluting built-in Javascript something-or-others which does put me off. But enough of my views - what do you think?

What am I trying to do?

My goal might have some bearing on the question I guess I’m retro-fitting an old template driven site with a way to specify unique page titles and meta tags and want an ‘edit’ button on each page visible when logged in as an administrator, which when clicked on will open an inline window (or modal window as they’re properly called) and allow me to edit these fields.

There’s also other parts of the site where inline editing would be very useful, for example the photo gallery captions and descriptions.

So far I’ve seen Prototype-based code that would do these, but its style of programming leaves me cold. And for the above fetching the modal window contents via XHR would be fine, but I also want to add a modal window to move images from one category to another. The number of categories in the gallery would make fetching the window contents via XHR very slow (as you’d have to transfer ~200 categories every time). I suppose the best option is to use a hidden div in the HTML page for the window, which means crud on the page.

As you’ve probably noticed I’ve made no mention of how this should degrade. That’s intentional, as I’m the only person using this application and I’m trying to keep things simple(!). Although if the libraries you can recommend would help with this, so much the better

I use the word link farms, but I could have equally well used ‘partner sites’, ‘featured links’, or ‘popular searches’; all of which are used instead.

You may be wondering what on Earth I’m talking about. Link farms are so last century, the search engines don’t respect them any longer and will likely blacklist your site for using them (or gateway pages). However, link farms are all around and growing in usage. They’re back in a very sneaky form. You’ve probably seen these on sites, like these links that were along the bottom of an antique dealer’s site.

With Google’s Pagerank putting weight on the number of incoming links, every possible strategy is being used. A site without incoming links is pretty pointless now, particularly if you’re in a highly competitive market such as renting florida villas. So the owners promoting these sites take the opportunity to purchase links from other sites. Sites with irrelevant content. Whole sites built just to provide links to other sites to increase their search engine ranking.

Today it’s nowhere as obvious as the link-farms of yesteryear. Oh no, these guys have learned their lesson. Neither are most computer-generated junk; instead a few of the sponsored links are added to proper-looking pages.

Let’s suppose the search engines agreed this was not a good way to measure popularity (he who buys the most links is the most popular). They would have a problem. How can you tell the difference between a page of content with random links placed at the bottom of the page to purposefully increase search engine ranking and a blog with a selection of random links in the linkblog?

Here’s an example I found which for a computer would (should?) be hard to distinguish automatically:

I don’t want to play that game. To me it feels like match fixing, fiddling the accounts - it just shouldn’t be done. I believe it’s an ethical problem - it may work, but it isn’t measuring whether the content of the site is good, or whether the site provides a relevant match. There’s also the wrinkle that to do well in search engine results, why should I pay people to clutter up the internet with more useless search engine fodder?

As always, your thoughts are appreciated.

Continue reading →

This is bizarre! I was just creating a “Google Sitemap”:https://www.google.co.uk/webmasters/sitemaps/ for a “Florida vacation home rentals”:http://www.daystarvillas.com/ site I manage, and had to sign up for Google Sitemaps. Being a good boy, I read Google’s “Terms of Service”:http://www.google.com/terms_of_service.html

Now I’m not sure how many other people have read this, because its terms appear ludicrous. First up is the title: *Google Terms of Service for Your Personal Use*. I’m creating this sitemap for a client, and will be using this as my company’s account to manage his sitemap - invalid already?

Let’s just look at the next bit:

bq. Welcome! By using Google’s search engine or other Google services (”Google Services”), you agree [...] The Google Services are made available for your personal, non-commercial use only. You may not use the Google Services to sell a product or service, or to increase traffic to your Web site for commercial reasons, such as advertising sales.

Note that Google services include the search engine. Now I don’t know about you, but I certainly use the search engine to increase traffic to my web site for commercial reasons. Every commercial website does it and it’s stupendously important, that’s why the market’s flooded with unethical SEO companies.

So what’s Google saying? Commercial sites cannot post Google Sitemaps because this would be aiming to increase traffic by exposing more of your site to Googlebot?

I could make a guess and say what Google are talking about is people displaying their search results on their own website to attract traffic, but I don’t know what they are prohibiting. It appears most of the options Google is already used for.

Whatever the reason, it would be helpful if Google would clarify their terms to make what’s allowed clearer.