Archive for the ‘ web design ’ Category

a documentary on web 3.0 : the semantic web

Check out this smart documentary on the semantic web (web 3.0) by kateray.net. It features a few of the biggest, brightest thinkers and pioneers of the Web, including Tim Berners Lee, Google scientist, Alon Halevy and MIT prof, David Kargy –all discussing the structure of the web (or the need for one).

In it, NYU New Media prof, Clay Shirky asks the DEEP PHILOSOPHICAL QUESTION: … “Does the world make sense? Or do we make sense of the world?”

I think the answer is clear: We need to make sense of the world (wide web) for it to be useful!

Here, web 3.0 is a semantic web. It’s about creating meaningful relationships between and among data. <!–Insert social networking plug here!–> It’s a world where indexes and meta-data matter most. It’s like one ginormous database!

It is however, an interesting exercise to imagine what the World Wide Web looks like, or might look like.

Check it out and see for yourself!

On creating online portfolios + finding inspiration

Smashing Magazine offers some helpful tips on how to create an effective online portfolio –Show ’em your stuff!

Looking for inspiration? … Here are some ideas on where to look.

And here are some tips for creating creative résumés …. (Thanks, Laura! :))

And finally, Smashing Magazine gave this showcase of websites from around the world (wide web)!

Web 2.0

Web 2.0

Although the term, ‘Web 2.0′ (2004–present) seems to suggest a new version of the Web, technically, it isn’t. The only difference is the way in which software developers, web designers and end-users use the Web. According to wikipedia:

‘Web 2.0 is commonly associated with web applications that facilitate interactive information sharing, interoperability, user-centered design,[1] and collaboration on the World Wide Web. Examples of Web 2.0 include web-based communities, hosted services, web applications, social-networking sites, video-sharing sites, wikis, blogs, mashups, and folksonomies. A Web 2.0 site allows its users to interact with other users or to change website content, in contrast to non-interactive websites where users are limited to the passive viewing of information that is provided to them.”

The term came into being at Tim O’Reilly’s O’Reilly Media Web 2.0 conference in 2004.[2][3]

Here’s a useful Web 2.0 Design Guide, by web design from scratch, for tips, trends and tricks to design for Web 2.0.

lynda.com: a great resource to help you learn, master, and apply digital tools and techniques.

I learned about educator and graphic designer, Lynda Weinman back in the day of web-safe colours. Lynda was the first to painstakingly identify the 216 of 256 possible browser-safe colours in both hexadecimal and RGB. At the time, this resource was essential to designers, as colour was less predictable onscreen –depending on your choice of colour and how you were viewing (i.e. browser or platform).

Now-a-days, browser-safe colour is less of an issue but lynda.com continues to be a great resource for learning tips, tools and techniques for anything web/ graphics related.

To keep up-to-date on the latest, greatest trends and techniques in web and graphic design, visit: lynda.com
Lynda.com’s lbrary of video tutorials are well worth watching!

Enjoy!

Using javascript + jquery

JavaScript

Anyone who dabbles in web design these days should really know how to code in xhtml, css and javascript. But this can be a daunting task for newbies to web design. Thankfully, there is no shortage of tutorials to teach you neat tricks, tips and techniques for building interactivity! The most sophisticated code to achieve this is javascript.

What is JavaScript?

JavaScript is a scripting language used to add interactivity and functionality to websites (and it’s not Java!)
JavaScript was first developed by Netscape in 1995 to improve the Netscape browser. It gained in popularity and wide-spread use and is essential to interactive design today!

JavaScript is used for:

  • adding interactivity to elements
  • creating dynamic menus
  • opening new browser windows
  • updating data within a browser
  • form validation (client-side)
  • manipulating the behaviour and properties of elements
  • creating alerts or warnings

… and lots of fun stuff!

Since HTML pages are mostly static, with JavaScript –changes occur on the ‘client-side’ (end-user) so that the page doesn’t need to be refreshed in the browser to ‘work’.

But writing JavaScript is a long and arduous process, so to make things simpler for designers, jquery came along with their motto, ‘write less, do more’. jquery is a library of code (also known as a framework) that web designers can simply download, copy and paste into their HTML pages. The only necessary changes  are edits to tell the framework which changes to control. The framework does the rest. BUT, you should still know a thing or two about javascript to understand how it works and what the framework is doing, in case you encounter glitches.

Other popular javascript libraries include: prototype, mootools and Adobe’s Spry. All of these sites have great tutorials on how to use their code.

However, I recommend learning the basics of javascript, and get a handle on the syntax and structure. Then, use the framework to enhance your site for more robust experiences but note that not all browsers treat javascript in the same way. It’s important to design for when javascript support is either absent or disabled, and to have a strategy for providing alternative content. This technique is called ‘progressive enhancement’.

Using Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is the formatting language that controls the ‘look and feel’ of web documents. The word, ‘Cascading’ refers to the way that CSS applies one style on top of another. It allows users to apply a style to multiple elements, documents or even to other styles. You can also apply multiple styles or a set of styles to a single document.

Basically, CSS allows users to separate style from content, allowing designers greater control over the display and output. Although it’s not technically a layout language, it gives a lot more control over the look and feel, including the layout, use of fonts and colours of a website.

CSS are a collection of formatting rules typically stored in a separate CSS document, that apply to “HTML, XHTML or PHP” files of a web site. However, styles can also be stored within the ‘head’ of a web document, or applied as an inline attribute of page elements. Depending on where styles are located, styles can over-write other styles when conflicts occur. So ‘Cascading’ refers to the order in which styles are applied and/ or over-written.

CSS also allows for modular design and can therefore, control how a document looks on-screen, in print and on hand-held devices. With increasing use of mobile devices, CSS is a powerful tool that allows for customization for different output devices.

Overall, CSS is a smart, efficient and accessible way of designing and developing websites.

Here are just a few of many great resources for learning CSS:

For inspiration, visit: