Web Design Tricks

AJAX is a buzzword.  It’s a method for sending data to the server like you would in a form or a URL, but you do it without refreshing the page.  It used to be that you would have to send data to the server by clicking a link or submitting a form; then the server would respond with a new page that would load in your browser window.  With AJAX, you can send data, get it back and change just parts of the page, instead of reloading the whole thing.

This improves a site’s overall server load by reducing the need to download whole pages at a time.  But, more importantly, you can design pages that are WAY more functional.

Some of you might be Facebook users.  If you try to search for a friend in the search field on Facebook, every time you press a key on your keyboard, that letter is sent to Facebook’s server.  The server turns it around by looking up your friends names, and it tries to figure out who you’re searching for.  For each match, it sends the name and a clickable box back to your browser window.  Try it out.  Start typing a friend’s name and watch how it starts to appear near your cursor.  Pretty cool, huh?

Remember the AJAX part of that is just the connection between the browser window and the server.  Everything else happens with JavaScript (on the browser end) and PHP/MySQL (on the server end).

So what about my first AJAX site?

Go to www.venuspoetry.com and click anywhere in the painting.  You’ll find yourself with either a poem or a page where a poem is waiting to be started.  Nothing special about that, you decide.  But then you see what happens when you click on a poem.

First, a JavaScript function toggles the formatted text into a TEXTAREA so you can type.  A button appears with the value “Close” so you can declare when you’re finished.

Then, a JavaScript function toggles the TEXTAREA and the user input within back into formatted text on the page.  Also, a CAPTCHA API (called reCAPTCHA, see this post) magically appears over a link that says “Save this poem.”  When you click save, all of the data you changed, plus the reCAPTCHA authentication gets sent to the server.

Then, the server checks the CAPTCHA validation first (and rejects your post if it’s wrong) and then adds your post to the database.

A line saying your work was saved or not saved gets sent back to the browser.

Then, the line is posted to the page.  If the save worked, it locks out further editing and removes the CAPTCHA.  If it didn’t work, you are prompted to reenter the CAPTCHA and click save again.

Most of this happens with JavaScript and the DOM, which is really fun.  Pages can be so much more interactive and functional.  AJAX applications act much more like regular desktop applications.

Unfortunately, you can only submit one edit … and that’s something I had to reduce back to because of the way reCAPTCHA works.  I suppose there’s a way to reload it automatically, but I haven’t started messing with it yet.  I was happy to get it all working last night.

Some people think you can get everything you need for learning and referencing web design and development strategies and techniques through Google.  That is, just pick up new concepts and remember old ones by searching them.

Not that this isn’t a useful way of picking up new web design tips and tricks and remembering old ones … but for an in-depth understanding of web design and development, I wholeheartedly recommend having a small library of go-to books.

Here are my favorites.  I specialize in HTML, CSS, PHP and MySQL development and a good pinch of JavaScript and AJAX.  This list is intended for novices starting out and intermediate designers looking to branch out.  If you plan on purchasing any of these, do me a favor and click on the links to Amazon and buy them that way.  It helps keep this blog running.  :)  These recommendations are my sincere and honest opinion.

HTML

It’s been so long since I learned HTML, I can only recommend one book that gives a great introduction for beginners.

HTML Goodies

I learned to make my first from-scratch website using this book. It’s very basic and good at teaching how to code from scratch, which is in my opinion the right way to learn. Like many people, my first web design experience was through FrontPage. Big mistake. If you’re still using FrontPage or iWeb or any other WYSIWYG web design software, and you really want to get serious about web design, buy this book.

Get it at Amazon - Help keep this site running

CSS

Learning CSS is the best way to improve your site’s visual presentation.  It may seem like a jump, especially if you’re used to straight HTML and nothing else, but learning CSS makes things easier and gives you more control over how your site looks.

The Zen of CSS Design

I’m pretty sure this book grew out of the CSS Zen Garden website. If you ever need inspiration to learn CSS, take a look at some of the templates on this site. The book is very well produced and explains some of the concepts that make the features on the site work. It’s a worthwhile extension of the site.

Buy it from Amazon — Support this site.

CSS Mastery

If you’re more interested in a nuts-and-bolts intro to CSS, this is a good introduction. I had been banging my head against the CSS wall for quite some time before I bought this book and finally cleared some of the speed bumps I had been tripping over. I keep it around, but I’d say it was more useful in bringing my CSS skills up to par than it is anymore as a desk reference. I’d still recommend it for novices.

Buy it from Amazon — Help keep this server running

JavaScript

JavaScript was once frowned upon because it is a programming language that operates on the client side, meaning within a visitor’s browser (server-side scripting runs on the web server — more on that later).  But lately, browser compatibility has improved for JavaScript, and it is a viable and functional web scripting language.  Probably your best place for a web designer to wade into the world of programming.  Getting a good book gives you a robust foundation so you can understand scripts you might use from the web.

DOM Scripting

I picked up the basics of JavaScript years ago.  I quickly grew frustrated because it was a client-side scripting method and relied on too many variables on the user end that you rarely knew — meaning JavaScript scripts had to plan for failure and incorporate many, many backup plans.  Long story short, browser compatibility is far superior today, and JavaScript is a powerful tool that is much easier to implement.  When I picked the language back up, DOM Scripting was there to lead the way.  I picked it up off the shelf at B&N and decided to buy it in minutes.

Buy it from Amazon — If you’re getting it anyway, why not help me pay off my college loans? :)

PHP/MySQL

Now for the fun part.  I think PHP is the best thing to happen to the internet since the internet.  PHP is a server-side  scripting language.  That means you can write scripts to make different things happen before your page is sent to your client’s browser.  Basically, it makes your website smart.  Even better, you can tie it in with a database running on your server to store data and make all kinds of neat things happen.  But don’t forget to lock it all down — PHP is a good way to learn about what can go wrong on the internet, too, if you’re not careful.

PHP and MySQL for Dynamic Web Sites

This book taught me a LOT about PHP. I had played around with it before, but this book was the best crash course I have ever taken for any language. It is by far the most worn-out book in my library. There are sticky markers all over the top edge. If you’re new to PHP and you want to get a good foundation, this is the book to get.

Get it at Amazon! — You’d make me really happy!

php|architect’s Guide to PHP Security

PHP can be a can of worms. Luckily, Ilia Alshanetsky is here to help us lock down our PHP scripts like Fort Knox. This covers everything from form validation to cross-site scripting (XSS) to SQL injection to sessions and the rest. It’s a pretty good read if you have a PHP background, and it’s to the point. Highly recommended.

Amazon has this one, too — If you click on this link when you buy it, you’ll help me out

So there you go.  Half-a-dozen books to get you started on some facet of web design or development.  I love books.  I have like 300 of them.  No, not 300 web design books.  Just lots of books.  Lots of classics; lots of design books.  Books make you feel good.  I get stuck on my computer sometimes, espcially when I’m working on a project late in the evening.  I’ll keep on going, no matter how slow my work gets.  Then, I remember how much better it feels to stare at paper than at a screen.

I usually fall asleep before I finish a page.  Oh, well.

reCAPTCHA 

You’ve probably seen a CAPTCHA, whether or not you know it.

A CAPTCHA is a test that websites use to make sure a visitor to the site is human.  CAPTCHA stands for (this is a long one) Completely Automated Public Turing test to tell Computers and Humans Apart, according to this article on Wikipedia.  It usually takes the form of a scrambled word that (ideally) computers cannot read.  Some simple CAPTCHAs ask a visitor to add two numbers or answer simple questions.

CAPTCHAs have a variety of implementations, but the purpose is always to prevent a computer robot from accessing some function on a dymanic website.  Usually, this is an effort to prevent robots from spamming email forms, blog comments and forums.

Anyway, the point of this post is to talk about a particular CAPTCHA that is a work of genius.

reCAPTCHA, designed by the smart folks at Carnegie Mellon University, solves two problems by turning both problems into solutions for the other problem.  Let me explain.

Problem 1: Stop computer robots from “cracking” CAPTCHA words (that is, design a CAPTCHA that is really really hard to read by a malicious computer problem).

Problem 2: Help computer robots read.

You might be asking why we’d want to help a robot read when it’s the robots who are causing problems and sending spam in the first place.  Well some robots are good guys.

There are several projects that seek to digitize books for the internet.  They scan book pages and have a computer program attempt to “read” the words and store them in a database.  Having the computer recognize them instead of storing them as photos keeps the file sizes down just the way websites use words instead of pictures of words, since pictures are exponentially larger files.

Long story short, every now and then, there are words that the computers used for the book projects cannot read.  Those words are saved for the reCAPTCHA project.  They have a whole database of pictures of words that are somehow too scrambled that they can’t be read.  But human eyes have no problem reading them.

So … on the one hand, you have a set of words, saved as images, that computers can’t read (Problem #2) and you have a website you need to protect from computers that are trying to read words, saved as images (Problem #1).

Solution:

Make people read two words, one that is scrambled so robots can’t read them and one from the database of words that the book-scanning robots cannot read.  Web developers get a free CAPTCHA system for their sites; the CAPTCHA developers solve the book-scanning problem.  It’s a win-win.

Good.  Creative.  Thinking.

To see reCAPTCHA in action, just try making a comment on this post.

I tried to explain this project in my own words.  In case you need another (better) explanation, check out the reCAPTCHA Project Website.

This blog was started for a number of reasons.

First, blogs in general interest me as a medium.  The word ‘blog’ is short from web-log, as in internet-diary.  Blog just sounds so much cooler , especially in the male-dominated world of computers.  Anyway, they really just started out as internet diaries, but now many blogs would be confused with regular websites.

I will be using WordPress for the Lumidev blog.  WordPress is open-source software that anyone can download for free and install on a web server in five minutes (if you know what you’re doing).  It’s written in PHP and uses the MySQL database, both of which are also open-source and free to use.  In the beginning, I’ll use the default WordPress layout template, which looks good.  Later, I’ll either tweak this template or design my own.  One of the neat features in the current defaut template is how you can customize the header image.  There is a color on top and a color on the bottom which fade together.  You choose both colors to give the look you’re going for.  Pretty nifty and simple, if you ask me — and I’m pretty hard to impress!

Another reason I started this blog is to give my web design company (and its fairly minimalist website) some personality.  I figure people want to know more about who they might be working with than just the facade.  Not that facades are bad, but they are jus facades.  I hope that individuals and businesses looking for a web design firm in Charleston, SC (where I am based) and the surrounding region will enjoy reading this and, in turn, get to know me a little, find confidence in my abilities and appreciate the details they’ll pick up about web design and development.

Web design is a technical art.  It requires a designer who enjoys using both sides of his or her brain.  That’s why I enjoy doing it.  I am both a problem-solving, logical thinker and a free-spirited, passionate artist.  I expect this shows through in my work, which ought to achieve a balance between a satisfying visual experience and a logical structure and organization.

Also, I will be using this blog as sort of a “notebook in the sky,” lol.  Wherever I am, I will be able to read and write here.  I often read interesting tidbits (especially about web design) that I want to save.  My Favorites list is a mile long.  But by posting links here when I find them, I will be able to access them from any computer, and other people will be able to make use of them.  Not only that, the authors of the articles I like will benefit by some degree in their search engine stats when I link to them.

Finally, I just like to write.  Maybe that isn’t exactly a reason to put together a blog, but I wonder if this blog would exist if I didn’t just love stringing words together.  Who knows how many will read this little web-log, but I hope those who find it will get something out of it and enjoy learning whatever they might learn about web design, about me, about Charleston or any other musing that find their way into this site.

Thanks in advance for reading.