by Alex Holt | Aug 14, 2009 | Dev, Web |
So lets try and clarify what semantic markup is and what significance it has to the web designer. Semantics is the study of meaning. Semantic markup is markup that has meaning, the idea is tha the tags you choose add to the overall meaning of the content you are marking up. The earliest (and simplest) example of this is the argument between strong and b tags. Semantically the strong tag has meaning, it implie strong emphasis, and thus conveys added meaning. Whereas the b tag just implies bold, a purely visual characteristic. A second example is the markup for the nav of your page. Semanticly it makes more sense to mark the navigation elements up inside a unordered list, because nav is in fact a list of items on the site. So.. <ul class="nav"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li></ul> ..is semantically more correct than using DIV tags or even just A tags in a paragraph, like this: <p> <a href="#">Item 1</a> | <a href="#">Item 2</a> | <a href="#">Item 3</a></p> Semantically relevant code also allows screen readers and other machine based clients to better understand the meaning of the content in your markup. Hopefully that clears up... by Alex Holt | Aug 4, 2009 | Tips & Tricks |
DCM lives in the Applications/Utilities folder on your mac When you open it you are presented with a small window, the left of which shows a small zoomed image of what’s under your mouse and the right allows you to choose the type of colours you are interested in. For our purposes as a web developer we want hex codes, so we choose RGB in Hexadecimal (8bit). The true secret to working this tool into your workflow is the keyboard shortcut to copy the colour as text. To do this, you just hit Apple-Shift-C while the correct colour is shown, this will copy the text of the hexadecimal colour into your clipboard.. something like: “#186231”. This can be pasted directly into your CSS or HTML. It’s somewhat annoying that it copies with quote marks… but still a real... by Alex Holt | Jan 2, 2009 | Dev, Web |
This point holds especially true for the project I am currently working on, which has only a simple email contact form. I do not want a valid, human client to have to tackle entering a captcha image or solving a math problem just o send the company a contact. So I set about reading about ways to catch spam on the server side. My Solution The solution that i’ve come up with marries two fairly old concepts together with some fairly simple logic (the success of this is untested, however I think it should be fairly effective – time will tell.. and i’ll keep people posted here) The two techniques I will be using are: timestamping and honeypots. So what are they? Timestamping The concept of timestamping involves sending a timestamp to the form and storing it in a hidden field, effectively allowing us to know when the form was rendered. This is useful for two reasons: 1) We can check that the user spent a reasonable amount of time filling out hte form. The theory here is that the user is unlikely to instantly post the form, however a spam bot that has scraped the data down willvery quickly be able to scrape out the form fields and post the page. So: for example in this current project, my contact form is asking for a name, email, subject and message. A human cant type these into a form in less than say 5-10 seconds, so when the form is submitted i can check the timestamp in the hidden field against the current time and thus reject a submission that is too rapid. 2) We can force... by Alex Holt | Oct 1, 2008 | Rants, Web |
In my first job, the majority of front end development time was spent trying to get horrible nested table layouts to render in both IE and Netscape 4. Thankfully the browser world (and more importantly the standards world) have progressed since then (at least a little). Browsers have taken a role reversal, with IE now dragging the chain in place of good old nutscrape. However despite the leaps and bounds that have been made towards standardising the web, the development environment really hasn’t changed that much. We’ve gone from placing invisible pixels inside nested tables to juggling CSS hacks – all to maintain a consistent look and feel across the range of browsers. So despite my feeling that our CSS tableless layouts are slightly more elegant (and less code heavy) I can’t help but wonder why we haven’t already achieved standardisation – and the only explanation I can come up with is that some goon in suit at Redmond doesn’t want it for some reason. But that’s not all there is to it, standardisation is something that rarely comes about through conscious intent, and usually comes to pass for the wrong reasons (take qwerty keyboards.. There are more effective options you know..) I’ve heard people suggest that the non-compliance of browsers kept the entry-level of the industry higher, however this is absurd. The quality of web design is really a combination if interface design, information design -and lastly, aesthetic. Whoever said “content is king” was onto the right idea. So where are our web standards heading? Hopefully to a standardised place (wishful thinking, I hear you say) where we can focus all our design... by Alex Holt | Aug 15, 2008 | Dev, Tips & Tricks, Web |
To start with, we create the markup for our navigation.. <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="about/">About</a></li> <li><a href="contact/">Contact</a></li></ul> Obviously you can put as many or few items as you need into the list. Now to style the list…. first we’ll style it horizontally: ul.nav,ul.nav li,ul.nav li a { display:block; float:left; margin:0; padding:0;}ul.nav li a{ padding: 4px 8px; text-decoration: none; background: #ccc; border: 1px solid #999; margin-right: -1px;}ul.nav li a:hover{ background: #f90; color: #fff;} and now vertically, just to show how it works… ul.nav,ul.nav li,ul.nav li a { display:block; margin:0; padding:0;}ul.nav li a{ padding: 4px 8px; text-decoration: none; background: #ccc; border: 1px solid #999; margin-bottom: -1px;}ul.nav li a:hover{ background: #f90; color: #fff;} Obviously, you have the freedom to apply any CSS you want to... 