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 | 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 | 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... by Alex Holt | Jul 1, 2008 | Dev, Web |
I’ve always used prototype and scriptaculous to do JS stuff in the past. However I’ve been hearing a lot of good things about jQuery and i’d noticed that sites i’d seen using jQuery seemed to have much smoother animation etc. So in the spirit of keeping an open mind (and continuing to learn.. something I don’t find myself doing that often anymore) i set about building a simple JS based web app to test how jQuery would suit my programming etc.. After about 4 minutes of brainstorming, I found myself getting annoyed, and switched to myTweetdeck to distract myself. In a semi-relevant aside, i have to say, tweetdeck makes my twitter usage about 100x as useful.. plug! So i decided it would be cool to try knocking upa simple Ajax application that emulated Tweetdeck’s searching features – using the search.twitter.com api (previously summize). So i downloaded jQuery, and set up 3 simple div based columns to hold the tweets i was going to be grabbing. The beautiful thing i discovered with jQuery is it can cross domain ajax requests, so i can talk directly to the search.twitter.com api without having to write a proxy script on my server – cool! The twitter search API has an option to return JSON data, which is really great for building an app like this, since we end up receiving the data and handling it all in JS with no decoding necessary.. too easy. So, we have our 3 divs and at this point I started to get my hands dirty in jQuery (i’m not a complete beginner, but i never really used it extensively.. so i was keen to... 