This is a screenshot of a website I created in 2001 to share my creative efforts on the web. After the initial excitement of getting something online (OK I was the only one who was excited) it has lain fallow, mostly neglected with little new content and little traffic. For the past two years I have used a blogging tool to share things on the web instead of the website.
Website design has changed dramatically in 10 years and this site was long overdue for an overhaul. It was "hand coded" in Notepad using tables and frames for layout, font tags for styles, and rollover images in navigation, very old school. It worked but was static and difficult to add new content.
The look of the new design is minimalist, a reaction to what feels like noise on the web. I wanted a quiet place. We now surf the web with blinders on, just like TV, filtering out all that is unwanted or enduring video ads before getting to the "free" content. The new site has an admin page where I can add content via the web which should greatly encourage its upkeep.
For those interested here is a primer on website design today that includes the specific tools I used.
HTML(Hyper Text Markup Language) is the basic language of the web and provides the hierarchical structure of data that is interpreted by browsers. First publicly available in 1990, version 4.01 is currently the standard. HTML 5.0 was published as a working draft in 2008 and is slowly being adopted. With more "drag and drop" and WYSIWIG (what you see is what you get) editing tools available you don't have to know this language to publish on the web but it sure helps.
CSS(Cascading Style Sheets) was first published in 1996 and is very cool. Separation of content and presentation is the accepted practice now and CSS makes this possible. Layout, colors, borders, and all manner of text manipulation can be controlled down to the last pixel. Erratic at first as browsers interpreted differently but now most have adopted the W3C standards.
Server Side Scripting Few websites are just static text pages linked together as they used to be. Most alter what is displayed depending on varying parameters. It might be a user's set preferences, the date or location, or just the latest and greatest content. When a web page is requested a script runs on the server, usually in conjunction with a database, before delivering the custom page. I used PHP. Others are ASP, Perl, ColdFusion, and Python. PHP is free and there is a tremendous wealth of information, tutorials and scripts available from countless people who like to play with this stuff.
Database: I used MySQL to store information about all the gallery images. Title, dimensions, descriptions, comments and tags to facilitate searching are all stored so I can find and display images depending on certain criteria. MySQL/PHP is the most popular combo in use on the web because it's free and works well. Facebook uses it.
Client Side Scripting: Javascript. As the name implies this scripting happens in the end user's, or client's, browser using the end user's resources. On the plus side this usually means fast response - no waiting for the round trip to the server to make the change. On the downside the designer has no control over the user's resources; i.e., old funky browser, old slow computer, javascript turned off. Javascript used to be pretty complicated and unreliable but recently Javascript Libraries have been made available that have taken a lot of the pain out of doing some pretty cool stuff. I used jQuery for one small feature. MooTools and YUI are others. JQuery has excellent online documentation and many scripts are available for free.
AJAX(AsynchronousJavascript and XML) I did not have a function needing Ajax but include a description here because it was such a buzz word in the web world for a while and has widespread use. It is a kind of client side /server side hybrid, using several technologies to make requests to the server for additional data without reloading the entire page. It makes for a more dynamic and interactive user interface.
RSS(Really Simple Syndication)
Also known as "feeds". Another way to vary your site's content is to get it from somewhere else. I am using it to display the last three entries of the blog I write which is hosted on blogger.com. If you "subscribe to a feed" you get back an XML file of that feed's content. This XML (Extensible Markup Language) can be "parsed" or read to separate the data from the XML structure to display it on your page. There are many tools to do this. Some free services online - you enter the URL of the RSS feed you want and it coughs up some code you can paste in your site. Feedburner is a Google tool. I tried Feedinformer which was easy to setup and worked but choked my site as it waited for their script to give me the goods. Too slow. I found a PHP script (magpierss) to do the job - more complicated to set up but much faster.
Embedded Objects
Many sites now offer embed code as a way to share their services. This code places a box on your page that draws its content from the service. I am using YouTube to display a channel, or playlist, of my videos. Anything I add to the channel on YouTube's site will show up on my site. I'm also displaying a digital "book" with embed code from blurb.com.
Extras
Fancy Fonts
Web text has basically had 4 fonts for designers to use: 2 serif, 2 sans-serif. Anything else had to be done with images which are slow to load and do not scale. With the implementation of CSS3 that is changing. You can now host whatever fonts you want and apply them with CSS. I downloaded 2 free fonts from FontSquirrel which also has documentation on how to do it. It's not perfect - you can see the site flinch as the fonts are applied.
CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart)
CAPTHCHA is the name given to those squiggly letters and numbers you have to figure out and enter in the box before you send in your form. It is generally not a good idea to put your email on a website because Spambots (as these applications are called) harvest emails for malicious use. Keeping your email only on the server side and accessible only after solving the squiggly puzzle prevents this. I found a PHP based open-source script (Secureimage) that seems to work well. It even provides an audio track to help those poor humans trying to figure it out.
Mobile Devices
The bane of web designers has always been the lack of control over the viewing medium. It looks perfect on one platform, browser, resolution, type size and falls apart in another. Now we have gorgeous 20" monitors and teeny-tiny cell phones trying to view the same site. I found a PHP script that tells me if a mobile device is requesting a page. I can then redirect to a suitable format. Luckily in my case a few lines of CSS were enough to make it workable.
No comments:
Post a Comment