As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.

Tutorial Details

• Program: A web browser that can utilise CSS3 transistions (Chrome or Safari)
• Language: CSS
• Difficulty: Easy
• Estimated Completion Time: 30 min

Step 1 – Link Transitions

To begin, we’ll work with some basic techniques – firstly a simple change of text color when a user hovers over a specified element.

a { color:#000; }
a:hover { color:#f00; }

Here, we change the text color to red on hover. Now, with a little CSS3, we can create a much smoother look by gradually fading the color.

a{
   color:#000;
   -webkit-transition:color 1s ease-in;
}
a:hover{color:#f00;}

We’ve added the css property, -webkit-transition. Note that the -webkit prefix specifies that this will only work in Webkit engines, or Safari and Chrome. Luckily, other modern browsers have their own implementations as well. A full statement covering all browsers might look similar to the following:

a {
   color:#000;
   -webkit-transition:color 1s ease-in;
   -moz-transition:color 1s ease-in;
   -o-transition:color 1s ease-in;
   transition:color 1s ease-in;
}

Please note that, for this tutorial, we’ll be focusing exclusively on the webkit implementation. After the declaration of the property, we have the values “color 1s ease-in.” This is the shorthand declaration; the three values represent:

1. the property to be transitioned
2. the duration of the transition
3. the type of transition

In this case, we transition using ease-in, which will begin the transition slowly, and speed up into the transition.

Step 2. Background Transitions

Another basic use of changing states is to change the background of an input box on focus.

input.ourInputBox:focus{
 -webkit-transition:background-color 0.5s linear;
 background:#CCC;
}

This time, we put the transition declaration into the hover state, so that we aren’t adding additional unnecessary classes to the CSS. We apply the transition once the input box acquires focus.

Step 3 – Transitioning Multiple Properties

CSS transitions are actually relatively straight forward to add to existing hover functionality, and give your
site that extra polish for browsers that support CSS3.

To take things a step further, we can also transition multiple CSS properties using the longhand versions of the CSS3 transition.

a.thebg {
 color:#000;
 background:#f00;
 padding:5px;
 -webkit-border-radius: 5px; 

 -webkit-transition-property:color, background;
 -webkit-transition-duration: 1s, 1s;
 -webkit-transition-timing-function: linear, ease-in;
} 

a.thebg:hover {
 color:#f00;
 background:#000;
}

This time, the background and text color changes on hover, so we can target both of these properties with our transition.
We simply split the transition: first we have -webkit-transition-property and separate the different values with a comma. So we target the color and background properties, respectively.

-webkit-transition-property:color, background;

Then we set the duration of the transition using:

-webkit-transition-duration:1s, 1s;

These are referenced in the same order as the first statement; this time, however, both values are set to 1s.

Lastly, we set the timing function, and set two different values: the first, linear, relates to our first declared variable – color; and the second relates to the variable background.

So, we’ve set the color to a linear change over one second, and the background to ease-in over that same time period.

Step 4 – Putting the Pieces Together

CSS3 transitions start to come into their own when they’re combined with other new CSS properties.

You can review examples of using overlapping elements and transitions on Andy Clarke’s For a Beautiful Web.

Let’s create a simple example of animating a pop out sign.

We first create the bounding box for the signpost, and give it a relative positioning context to ensure that we can
position items absolutely within it.

#signpost{
 width:60px;
 height:196px;
 position:relative;
}

Now we place the box on the page and put the pieces of our sign within it.

Next, the post is positioned with a z-index of two, to place it on top of the sign.

#post{
 width:79px;
 height:196px;
 z-index:2;
 position:relative;
}

Now, we add in the sign, positioned underneath the post, and rotate it with the CSS3 transform property.

#sign{
 height:46px;
 width:80px;
 position:absolute;
 top:10;
 left:60;
 -webkit-transform-origin:0 0;
 -webkit-transform: rotate(86deg);
 z-index:1;
 -webkit-transition:-webkit-transform 0.5s ease-in-out;
}

The sign is rotated using -webkit-transform: rotate(86deg), and is positioned under the post. To ensure that the sign rotates around the proper point, we must change the transform origin to the top left corner: 0, 0.

We set the transition to change the -webkit-transform property over 0.5s with an ease-in-out profile, and on hover, we rotate the sign back to its original orientation.

#signpost:hover #sign{
	-webkit-transform:rotate(0deg);
}

We do this on the containing #signpost:hover rather than on the hover of the #sign itself.

Step 5 – Introducing Animations

We can now tie all of this together, using webkit animations, which give us the power to carry out things such as continuous rotation.

We begin by creating two circle images, and positioning them inside a containing div – as we did with the signpost above.

#circles{
	width:180px;
	height:180px;
	position:relative;
}
.outercircle{
	width:180px;
	height:180px;
	position:absolute;
	z-index:1;
	top:0:
	left:0;
}
.middlecircle{
	width:90px;
	height:90px;
	position:absolute;
	z-index:3;
	top:45px;
	left:45px;
}

Now we need to define the animations; we’ll spin the circles in opposite directions, so we need to set up two animations.

@-webkit-keyframes spin {
from {
	-webkit-transform: rotate(0deg);
}
to {
	-webkit-transform: rotate(360deg);
	}
}

@-webkit-keyframes spinrev {
from {
	-webkit-transform: rotate(0deg);
	}
to {
	-webkit-transform: rotate(-360deg);
	}
}

The animation is given a name for reference, in this case “spin” and “spinrev.” Then, we assign them a to and from value; so we rotate the image from
0 deg to 360 deg using webkit transform, and to -360 for the reverse.

Now we assign this animation to the hover states. Note that, if we assigned it to the normal state, the animation would run immediately when the page is loaded.

#circles:hover .outercircle {
	-webkit-animation-name: spin;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 10s;
}	

#circles:hover .middlecircle{
	-webkit-animation-name: spinrev;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 5s;
}

We reference the animation name we created earlier (-webkit-animation-name: spin;). Then, we declare the number of times we want the animation to run (-webkit-animation-iteration-count: infinite;).
In this case, infinite will keep it going round and round whilst the #circles div is hovered upon.

We next set the timing function (-webkit-animation-timing-function: linear;), and, finally, we set a duration for each iteration – in this case, it will be ten seconds (-webkit-animation-duration: 10s;), and five for a complete revolution.

Step 6 – Graceful Degredation with Modenizr

Once we have everything working, we should consider our users who are browsing without CSS3 capable web browsers. This is easily accomplished using a JavaScript library such as Modernizr, which adds classes to the HTML element relating to the browser capabilities.

Using the sign post example above, browsers that don’t support CSS transforms will not place the sign under the post correctly; so we can target these browsers and simply hide the sign until it is hovered over.

.no-csstransforms #signpost #sign{
	display:none;
}
.no-csstransforms #signpost:hover #sign{
	display:block;
}

It’s as simple as linking to the Modernizr script, finding the appropriate class name, and then creating a separate CSS statement for that instance.

Conclusion

That’s all for now. I hope you enjoyed it! Let me know if you have any questions/comments below!

You Also Might Like

• CSS Fundamentals: Containing Children

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

A fed up movie-watcher explains in pictures how buying is more hostile to consumers than pirating, a school spies on students at home through webcams, and Bill Gates gives a great presentation.

(Click the image above for a closer look.)

• Why Piracy Works
  See image above. [via Kevin Marks]
• When are High Wine Prices Justified?
  The not that interesting answer: When it costs a lot to produce. [NYT Freakonomics Blog]
• Steve Jobs: Flash Video Would Make the iPad Battery Life 1.5 Hours
  Gizmodo dissects the claim, which doesn't necessarily hold a whole lot of water. [Gizmodo]
• BitTorrent Visualization
  Ever wanted to understand how BitTorrent works but you're more of a visual learner? This very cool BitTorrent visualization can help! [via TorrentFreak
• Bill Gates on energy: Innovating to zero!
  Bill Gates delivered a much-talked-about presentation (because of his improved presentation skills) at this year's TED conference, which you can see embedded below. Looks like Jobs isn't the only skilled presenter around. Gates just needed a little time to simmer. [TED]
• School Spies Students Through Their Laptop Cameras
  Keep those eyes on the webcam light, kids. [Gizmodo]
• Is Google preparing to challenge iTunes in the cloud?
  Google is showing interest in a cloud media company, leading CNET to speculate that Google is looking to create a web-based media service to compete with iTunes. [CNET]

Filed under: Gaming, Hardware, Peripherals, Other Events, iPhone, App Store

TUAWParrot unveils the AR.Drone, an iPhone-controlled microcopter, at CES originally appeared on The Unofficial Apple Weblog (TUAW) on Wed, 06 Jan 2010 15:30:00 EST. Please see our terms for use of feeds.

New web development frameworks, promising rapid development and easy deployment, are sprouting out at a more rapid pace than you can keep up. In the last article, we looked at the various factors you’d have to consider when deciding on a framework. Today, we are going to look at the various frameworks available for each facet of web development.

In this current day and age, pushing out a finished, polished application well before your competitor is key. Coding everything from scratch, excluding even the mundane things, can be extremely time consuming and makes the developer spend time reinventing the wheel, time which would rather be spent implementing new features or tightening up the code base. This is where web development frameworks come in.

Today, we are going to take a look at the various options you have when choosing a web development framework. We are going to cover every type of framework, right from server side frameworks down to JavaScript animation frameworks. Intrigued? Let’s go take a look!

Server Side Frameworks

Server side frameworks are the one doing almost all the heavy lifting behind the application. They handle almost every aspect of the application right from URL handling to database access. You have a variety of options for each platform. For the sake of brevity, we’ll look at only the most popular ones today.

CakePHP

CakePHP is a very popular PHP framework inspired by Ruby on Rails and lets you develop, maintain and deploy applications with ease.

This framework makes use of the MVC pattern and has a lot of must have features including ORM, scaffolding and URL routing. The built in libraries are pretty expansive and include helpers for generating RSS feeds and HTML elements.

There is little to no configuration needed to get it up running and has an excellent community and detailed documentation behind it.

CodeIgniter

CodeIgniter is a PHP framework built on the tenets of simplicity, speed and a small footprint and as such is among the smallest PHP libraries in terms of the total footprint.

Among the frameworks which are built on the MVC pattern, CI is the easiest to learn. If you are a beginner PHP programmer, CodeIgniter would be the best place to start with.

Since it aspires to be as small as possible, the libraries aren’t as full fledged as Cake but the extremely thorough documentation and the very friendly community more than make up for it.

Kohana

Kohana is a fork of CodeIgniter intended to work only with PHP 5. Kohana is completely community driven and every modification is thoroughly discussed and vetted with in the community.

All the positive aspects of CI carry over here except that the documentation can be relatively lacking. However it has a thriving community behind it you can turn to if you run into errors.

Zend

Zend framework is more of a glue framework in that things aren’t as tightly coupled as in other frameworks like RoR or CakePHP. As such it also gives you a lot more control.

This framework boasts of one of the most complete collection of utility classes to leverage in your application. But since this is a collection of classes than a proper framework, you’ll be looking at lots of configuration to make it work. If you are thinking of starting off as a PHP programmer, this isn’t the first framework you should try.

Having said that, it has excellent documentation and a very large community behind it.

Symfony

Symfony is yet another very popular, feature packed PHP framework. It provides a solid core and ships with a number of third party libraries to fill in the blanks.

This is marketed primarily as an enterprise framework and has solid documentation and a thriving community to help you.

ASP.NET

ASP.NET allows you to leverage the MVC pattern through ASP.NET MVC. It lets developers use the accepted MVC pattern in their applications. Or if you chose to, you can completely ignore MVC and use the way you’d normally want to.

It ships with a very impressive set of features including libraries for code generation. It also has very thorough documentation and a welcoming community behind it.

Ruby on Rails

Ruby on Rails is a framework for the Ruby platform and was created by David Hansson whilst creating Basecamp for 37Signals. Ruby on Rails has gained incredible growth ever since it was released.

RoR uses the MVC pattern and provides a number of features including a complete ORM, scaffolding and URL rewriting. Ruby, by default, uses Prototype as it’s JavaScript library.

Ruby’s incredible growth can be attributed to ease of development and rich feature set. Configuration is generally minimal to nothing. It has good documentation and a growing community.

Django

Django is a web development framework based on Python and is amongst the most robust one on the Python platform.

Django ships with an extensive library containing tools for caching, serialization, authentication. It even provides a simple administrative interface based on your models and controllers. Its URL rewriting mechanism is a little different in that it uses regular expression to resolve which controller it needs to use.

It has extremely thorough documentation to back it up along with a helpful, polite community. A beginner Python programmer will take to Django very easily.

Pylons

border="0" />

Similar to Zend, this is a very loosely coupled framework which glues a number of third party libraries to provide functionality.

In Pylons, each and every aspect can be switched out with the one you like. Everything from it templating language to its ORM can be switched out with minimal fuss.

With respect to features, it depends directly on the individual components you pick for your project. Documentation can be relatively lacking and the community is a little smaller too.

TurboGears

Similar to Kohana and CodeIgniter, Turbogears is built on top of Pylons. It shares the same pros and cons as Pylons.

As with Pylons, every component of the framework can be replaced with one of your own choosing. Currently it only uses Pylons for its controller component.

JavaScript Frameworks

JavaScript frameworks work almost exclusively on the browser side. A typical framework lets you navigate the DOM easier, manipulate its contents right up to AJAX integration. There are a couple of widget libraries too which let you use specific user interface elements in your application instead of creating them from scratch.

jQuery

jQuery is an extremely popular library which focuses primarily on DOM manipulation. It has an extensive API encompassing a range of functionalities from DOM traversal to AJAX support.

It has very good documentation with a plethora of tutorials, screencasts, references and books for you to go through. The community is pretty large and very helpful.

If you are new to JavaScript and need to get started as quickly as possible, jQuery is an excellent choice.

Prototype

Prototype is among the oldest JS libraries and as such is very mature and stable. It ships with Ruby on Rails and as part of the standard OS X installation.

It provides a clear API for all of the functionality it exposes and has clear documentation to back it all up. Prototype also provides various methods through which you can write clean class based code. Prototype handles everything from DOM manipulation to AJAX to providing a number of utility methods.

MooTools

Mootools presents itself as the ideal solution for the intermediate to advanced programmer. It focuses on JavaScript as a language and extends on it as much as possible.

It provides a robust class creation system just like Prototype and just like the others, it provides a coherent API for all the functionality it provides.

The documentation can be pretty lacking at times but the active community more than makes up for it.

Yahoo UI

Yahoo UI library is a Swiss army kind of a library in that it provides a complete set of features and widgets letting you build the application you want to build. It is built by the developers at Yahoo itself.

In YUI, the core library contains all the essential elements including DOM traversal and CSS manipulation while the utilities and widgets are optional and are available separately.

YUI has the most thorough documentation among JavaScript and is easy to get started with.

Dojo

Dojo is yet another JS toolkit which provides everything that you’d expect from a modern JS library including a selector engine, AJAX integration and so on.

It also provides a set of rich interface elements and a number of advanced features like persistent connections and offline storage. Dojo has very thorough documentation and a thriving community.

CSS Frameworks

CSS frameworks, when properly used, let you cut down on development time by cutting down on oft repeated declarations and styling.

CSS frameworks can be a pretty polarizing topic among the development community but you owe it to yourself to give it a try.

960Grid

The 960 grid system intends to ease your workflow without complicating things. There are 12 and 16 columns versions for added choices.

It provides a CSS generator to further cut down on your development time. It also has pre made templates for use in popular software including Photoshop, Fireworks, Illustrator and Expression Design.

YAML

YAML, Yet Another Multi column Layout, is a CSS framework which lets you create robust column based and/or grid based layout based on web standards.

It also has a nifty tool for creating YAML CSS code. The documentation is pretty thorough and the community, helpful.

BluePrint

Blueprint is a CSS framework which intends to reduce the time you spending mulling over grids and padding. It makes use of a solid grid, support for typography and print support.

It features wiki based documentation and bug tracking. It boasts an active community where you can post your queries.

YUI Grids

Yet another Yahoo products on the list. YUI Grids offers support for multiple widths, fluid layouts, flexible element placement and more.

As with the YUI JS library, each part of this is thoroughly documented with plenty of examples, sample code and screen casts

Elastic

Elastic is a very simple framework with support for fixed, liquid and elastic layouts.

Elastic has a growing community and pretty decent documentation.

JS Animation Frameworks

Recently, specialized JS animation libraries have been popping up with the sole purpose of providing easier way to animate user interfaces. Let’s a look at the most popular ones.

Scripty 2 and script.aculo.us

Scripty and script.aculo.us are based on Prototype and provide a way to seamlessly animate content as well as provide a number of user interface elements to use in our applications.

fx

fx is a standalone JS library which focuses exclusively on animation. As such it lets you animate each and every CSS property along a set time line.

It has decent documentation and is extremely small at less than 4 kb.

gx

gx is a cross browser framework which again focuses exclusively on animation. It has a number of extremely impressive features including easing, delayed animation and predefined animation rules.

Since it is relatively new, the documentation is a little lacking and the community is hard to find. But it is extremely impressive and definitely warrants a try.

Processing.JS

Processing.js is built on the canvas element and written by John Resig. It lets you draw elements and then manipulate them on the canvas element.

Since it is a port of Processing for the JS language, it shares most of its advantages including robust support animation capability and shape support.

jsAnim

jsAnim is yet another animation library which lets you create very impressive animations. The example on the front page itself is a wonderful example of what can be done with it.

It weights in at a hefty 25 kilobytes compared to 3.7 for fx but packs a lot of features. The documentation is pretty straight forward and should give you a good idea of the basics.

Raphael

Raphael is a tiny library which lets you work with vector elements on your web page. It uses SVG or VML as needed to generate its graphics.

It’s extremely robust and produces extremely impressive results. A look through the demo pages gives you an idea of what it is capable of.

The documentation is pretty thorough and the discussion group is pretty active too.

Conclusion

And we are done! We looked at all the choices you have when you need to choose a web development framework. We looked at all types of frameworks right from humongous server side frameworks to nimble JS animation frameworks. Hopefully, this has been useful to you and you found it interesting.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web. Ready

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.

Continue reading Border security guards kill -- literally kill -- a MacBook

Border security guards kill -- literally kill -- a MacBook originally appeared on Engadget on Tue, 15 Dec 2009 08:50:00 EST. Please see our terms for use of feeds.

Light Painting in its many forms has been a growing trend on Flickr and other photo sharing sites in the last couple of years.

These images are attention grabbing and full of amazing color, movement and detail. In this post we share 25 examples to inspire you.

Image by brentbat

These great images come from a variety of talented photographers including Brent Pearson (his image is above) who has written a great resource touching on the topic – Night Photography and Light Painting (one of the few resources we highly recommend).

Image by sebastien.b

Image by purplemattfish

IMage by BUR?BLUE

Image by maistora

Image by CowGummy

Image by Sean Rogers1

Image by Thomas Rockstar

Image by Pedro Moura Pinheiro

Image by Tom Paton

Image by duane.schoon aka The Schoon

Image by artwork_rebel

Image by sebastien.b

Image by Conekt

Image by mikeleary83

Image by gnackgnackgnack

Image by ohhector

Image by CowGummy

Image by artandsteel_com

Image by BUR?BLUE

Image by rafoto

Image by onlinewoman

Image by sebastien.b

Image by brentbat

Image by Dr Craig

Post from: Digital Photography School - Photography Tips.

25 Spectacular Light Painting Images

Since we’re based in (mostly-) sunny San Francisco, Flickr’s code monkeys will be away for a few days eating excessive amounts of turkey and being appropriately thankful. Before heading off with friends and family, I thought I’d share a bit of “seasonal” JavaScript we have on the site, and a few notes about its inner workings.

Fun is Good

We build a lot of “serious” stuff at Flickr HQ, but we also recognize why it’s crucial that we save some time for the small things, the goofy and occasionally-irreverent parts of the site that remind people of a playful spirit. Outside of our daily work, many of us have our own personal geekery going on. It’s no coincidence that shiny, and even silly things people tinker with and build in their own time sometimes bleed over and become features or elements on Flickr; ideally, great ideas come from all sorts of places.

Let It Snow

Lights in the Snow (with ?snow=1), by mezzoblue

Last holiday season, we got around to making it snow on photo pages – just for the fun of it. If you happen to be on a photo.gne page and add ?snow=1, it might still even work.. We’ve also used a variant of the effect in the past for beta feature sign-up sequences, complete with cheesy MIDI renderings of “The Girl From Ipanema.” Again, this was “just because”; sometimes the web is most entertaining when it’s most unexpected. If you can occasionally make your users smile, giggle and laugh when using your site, chances are you’re doing something right – or, you’re running a comedy site that’s going downhill.

Wait, Snow is Hard

The snow effect was a JavaScript experiment made strictly as a test of DOM-2 event handlers, PNG and animation performance. Or, viewed in a more-cynical light, it was an evil plot to pollute websites with falling animated .GIFs and light CPUs on fire world web-wide.

To achieve a realistic effect, each snowflake has its own size, “weight” and x/y velocity properties which can be affected by “wind”. A slight parallax effect is achieved by the notion that larger flakes are closer to the screen and move faster, and so on.

It may not be surprising to note that it’s still expensive CPU-wise to animate many individual elements simultaneously. The effect is much smoother and has higher frame-rates these days when compared to early versions from 2003, but even modern browsers will readily eat up 50% CPU while running the effect. That said, the animation is keyed off of a single setInterval()-style loop with a low interval, so it will effectively try to run as fast as it can.

Revisiting Performance

“In theory there is no difference between theory and practice. But, in practice, there is.” – Yogi Berra

I had a theory that using text elements might be more efficient than image-based snow to animate, so I made the switch to using elements with the bullet entity • instead of PNGs with alpha transparency. No noticeable improvement was actually seen, despite my theories about drawing and moving images; HTTP requests were being saved, but the browser was still doing a lot of redraw or reflow work despite the elements using either absolute or fixed positioning. On my netbook-esque laptop with Firefox 3.5 under WinXP, animation would “freeze” when scrolling the window with position:fixed elements – presumably because my single interval-based JavaScript timer was blocked from running while scrolling was active.

In retrospect, what might be more efficient for overall CPU use is a number of absolutely-positioned “sheets” using a tiling background image with a pattern of snow. Each sheet of snow would move at the same speed and angle, but the number of unique elements being animated would be drastically reduced. JavaScript-based animation is not a science in any case, and having a large number of elements actively moving can significantly impact browser responsiveness. While this is not a common web use case for animation, it is interesting to note how the different browsers handle it.

Make Fun Stuff, and Learn!

Much of what I enjoy about front-end engineering is the challenge. I’ve learned a lot about browser performance and quirks just from prototypes and experiments, which can then be used in real production work.

While cross-browser layout and performance varies, it’s also rewarding to work on the occasional crazy idea or silly prototype and then refine it, features and quality-wise, to a point where it’s ready for a production site somewhere. JavaScript-based snow is at best a “perennial” feature, but the process of thinking about how to make something different and new work, and work well (theory) – and then researching, testing and hacking away to actually do it (practice) – is where the learning comes in.

If you’re reading this article, it’s likely that you spend a fair amount of time online. However, considering how much of an influence the Internet has in our daily lives, how many of us actually know the story of how it got its start?

Here’s a brief history of the Internet, including important dates, people, projects, sites, and other information that should give you at least a partial picture of what this thing we call the Internet really is, and where it came from.

While the complete history of the Internet could easily fill a few books, this article should familiarize you with key milestones and events related to the growth and evolution of the Internet between 1969 to 2009.

1969: Arpanet

Arpanet was the first real network to run on packet switching technology (new at the time). On the October 29, 1969, computers at Stanford and UCLA connected for the first time. In effect, they were the first hosts on what would one day become the Internet.

The first message sent across the network was supposed to be "Login", but reportedly, the link between the two colleges crashed on the letter "g".

1969: Unix

Another major milestone during the 60’s was the inception of Unix: the operating system whose design heavily influenced that of Linux and FreeBSD (the operating systems most popular in today’s web servers/web hosting services).

1970: Arpanet network

An Arpanet network was established between Harvard, MIT, and BBN (the company that created the "interface message processor" computers used to connect to the network) in 1970.

1971: Email

Email was first developed in 1971 by Ray Tomlinson, who also made the decision to use the "@" symbol to separate the user name from the computer name (which later on became the domain name).

1971: Project Gutenberg and eBooks

One of the most impressive developments of 1971 was the start of Project Gutenberg. Project Gutenberg, for those unfamiliar with the site, is a global effort to make books and documents in the public domain available electronically–for free–in a variety of eBook and electronic formats.

It began when Michael Hart gained access to a large block of computing time and came to the realization that the future of computers wasn’t in computing itself, but in the storage, retrieval and searching of information that, at the time, was only contained in libraries. He manually typed (no OCR at the time) the "Declaration of Independence" and launched Project Gutenberg to make information contained in books widely available in electronic form. In effect, this was the birth of the eBook.

1972: CYCLADES

France began its own Arpanet-like project in 1972, called CYCLADES. While Cyclades was eventually shut down, it did pioneer a key idea: the host computer should be responsible for data transmission rather than the network itself.

1973: The first trans-Atlantic connection and the popularity of emailing

Arpanet made its first trans-Atlantic connection in 1973, with the University College of London. During the same year, email accounted for 75% of all Arpanet network activity.

1974: The beginning of TCP/IP

1974 was a breakthrough year. A proposal was published to link Arpa-like networks together into a so-called "inter-network", which would have no central control and would work around a transmission control protocol (which eventually became TCP/IP).

1975: The email client

With the popularity of emailing, the first modern email program was developed by John Vittal, a programmer at the University of Southern California in 1975. The biggest technological advance this program (called MSG) made was the addition of "Reply" and "Forward" functionality.

1977: The PC modem

1977 was a big year for the development of the Internet as we know it today. It’s the year the first PC modem, developed by Dennis Hayes and Dale Heatherington, was introduced and initially sold to computer hobbyists.

1978: The Bulletin Board System (BBS)

The first bulletin board system (BBS) was developed during a blizzard in Chicago in 1978.

1978: Spam is born

1978 is also the year that brought the first unsolicited commercial email message (later known as spam), sent out to 600 California Arpanet users by Gary Thuerk.

1979: MUD – The earliest form of multiplayer games

The precursor to World of Warcraft and Second Life was developed in 1979, and was called MUD (short for MultiUser Dungeon). MUDs were entirely text-based virtual worlds, combining elements of role-playing games, interactive, fiction, and online chat.

1979: Usenet

1979 also ushered into the scene: Usenet, created by two graduate students. Usenet was an internet-based discussion system, allowing people from around the globe to converse about the same topics by posting public messages categorized by newsgroups.

1980: ENQUIRE software

The European Organization for Nuclear Research (better known as CERN) launched ENQUIRE (written by Tim Berners-Lee), a hypertext program that allowed scientists at the particle physics lab to keep track of people, software, and projects using hypertext (hyperlinks).

1982: The first emoticon

While many people credit Kevin MacKenzie with the invention of the emoticon in 1979, it was Scott Fahlman in 1982 who proposed using :-) after a joke, rather than the original -) proposed by MacKenzie. The modern emoticon was born.

1983: Arpanet computers switch over to TCP/IP

January 1, 1983 was the deadline for Arpanet computers to switch over to the TCP/IP protocols developed by Vinton Cerf. A few hundred computers were affected by the switch. The name server was also developed in ‘83.

1984: Domain Name System (DNS)

The domain name system was created in 1984 along with the first Domain Name Servers (DNS). The domain name system was important in that it made addresses on the Internet more human-friendly compared to its numerical IP address counterparts. DNS servers allowed Internet users to type in an easy-to-remember domain name and then converted it to the IP address automatically.

1985: Virtual communities

1985 brought the development of The WELL (short for Whole Earth ‘Lectronic Link), one of the oldest virtual communities still in operation. It was developed by Stewart Brand and Larry Brilliant in February of ‘85. It started out as a community of the readers and writers of the Whole Earth Review and was an open but "remarkably literate and uninhibited intellectual gathering". Wired Magazine once called The Well "The most influential online community in the world."

1986: Protocol wars

The so-called Protocol wars began in 1986. European countries at that time were pursuing the Open Systems Interconnection (OSI), while the United States was using the Internet/Arpanet protocol, which eventually won out.

1987: The Internet grows

By 1987, there were nearly 30,000 hosts on the Internet. The original Arpanet protocol had been limited to 1,000 hosts, but the adoption of the TCP/IP standard made larger numbers of hosts possible.

1988: IRC – Internet Relay Chat

Also in 1988, Internet Relay Chat (IRC) was first deployed, paving the way for real-time chat and the instant messaging programs we use today.

1988: First major malicious internet-based attack

One of the first major Internet worms was released in 1988. Referred to as "The Morris Worm", it was written by Robert Tappan Morris and caused major interruptions across large parts of the Internet.

1989: AOL is launched

When Apple pulled out of the AppleLink program in 1989, the project was renamed and America Online was born. AOL, still in existence today, later on made the Internet popular amongst the average internet users.

1989: The proposal for the World Wide Web

1989 also brought about the proposal for the World Wide Web, written by Tim Berners-Lee. It was originally published in the March issue of MacWorld, and then redistributed in May 1990. It was written to persuade CERN that a global hypertext system was in CERN’s best interest. It was originally called "Mesh"; the term "World Wide Web" was coined while Berners-Lee was writing the code in 1990.

1990: First commercial dial-up ISP

1990 also brought about the first commercial dial-up Internet provider, The World. The same year, Arpanet ceased to exist.

1990: World Wide Web protocols finished

The code for the World Wide Web was written by Tim Berners-Lee, based on his proposal from the year before, along with the standards for HTML, HTTP, and URLs.

1991: First web page created

1991 brought some major innovations to the world of the Internet. The first web page was created and, much like the first email explained what email was, its purpose was to explain what the World Wide Web was.

1991: First content-based search protocol

Also in the same year, the first search protocol that examined file contents instead of just file names was launched, called Gopher.

1991: MP3 becomes a standard

Also, the MP3 file format was accepted as a standard in 1991. MP3 files, being highly compressed, later become a popular file format to share songs and entire albums via the internet.

1991: The first webcam

One of the more interesting developments of this era, though, was the first webcam. It was deployed at a Cambridge University computer lab, and its sole purpose was to monitor a particular coffee maker so that lab users could avoid wasted trips to an empty coffee pot.

1993: Mosaic – first graphical web browser for the general public

The first widely downloaded Internet browser, Mosaic, was released in 1993. While Mosaic wasn’t the first web browser, it is considered the first browser to make the Internet easily accessible to non-techies.

1993: Governments join in on the fun

In 1993, both the White House and the United Nations came online, marking the beginning of the .gov and .org domain names.

1994: Netscape Navigator

Mosaic’s first big competitor, Netscape Navigator, was released the year following (1994).

1995: Commercialization of the internet

1995 is often considered the first year the web became commercialized. While there were commercial enterprises online prior to ‘95, there were a few key developments that happened that year. First, SSL (Secure Sockets Layer) encryption was developed by Netscape, making it safer to conduct financial transactions (like credit card payments) online.

In addition, two major online businesses got their start the same year. The first sale on "Echo Bay" was made that year. Echo Bay later became eBay. Amazon.com also started in 1995, though it didn’t turn a profit for six years, until 2001.

1995: Geocities, the Vatican goes online, and JavaScript

Other major developments that year included the launch of Geocities (which officially closed down on October 26, 2009).

The Vatican also went online for the first time.

Java and JavaScript (originally called LiveScript by its creator, Brendan Eich, and deployed as part of the Netscape Navigator browser – see comments for explanation) was first introduced to the public in 1995. ActiveX was launched by Microsoft the following year.

1996: First web-based (webmail) service

In 1996, HoTMaiL (the capitalized letters are an homage to HTML), the first webmail service, was launched.

1997: The term "weblog" is coined

While the first blogs had been around for a few years in one form or another, 1997 was the first year the term "weblog" was used.

1998: First new story to be broken online instead of traditional media

In 1998, the first major news story to be broken online was the Bill Clinton/Monica Lewinsky scandal (also referred to as "Monicagate" among other nicknames), which was posted on The Drudge Report after Newsweek killed the story.

1998: Google!

Google went live in 1998, revolutionizing the way in which people find information online.

1998: Internet-based file-sharing gets its roots

In 1998 as well, Napster launched, opening up the gates to mainstream file-sharing of audio files over the internet.

1999: SETI@home project

1999 is the year when one of the more interesting projects ever brought online: the SETI@home project, launched. The project has created the equivalent of a giant supercomputer by harnessing the computing power of more than 3 million computers worldwide, using their processors whenever the screensaver comes on, indicating that the computer is idle. The program analyzes radio telescope data to look for signs of extraterrestrial intelligence.

2000: The bubble bursts

2000 was the year of the dotcom collapse, resulting in huge losses for legions of investors. Hundreds of companies closed, some of which had never turned a profit for their investors. The NASDAQ, which listed a large number of tech companies affected by the bubble, peaked at over 5,000, then lost 10% of its value in a single day, and finally hit bottom in October of 2002.

2001: Wikipedia is launched

With the dotcom collapse still going strong, Wikipedia launched in 2001, one of the websites that paved the way for collective web content generation/social media.

2003: VoIP goes mainstream

In 2003: Skype is released to the public, giving a user-friendly interface to Voice over IP calling.

2003: MySpace becomes the most popular social network

Also in 2003, MySpace opens up its doors. It later grew to be the most popular social network at one time (thought it has since been overtaken by Facebook).

2003: CAN-SPAM Act puts a lid on unsolicited emails

Another major advance in 2003 was the signing of the Controlling the Assault of Non-Solicited Pornography and Marketing Act of 2003, better known as the CAN-SPAM Act.

2004: Web 2.0

Though coined in 1999 by Darcy DiNucci, the term "Web 2.0", referring to websites and Rich Internet Applications (RIA) that are highly interactive and user-driven became popular around 2004. During the first Web 2.0 conference, John Batelle and Tim O’Reilly described the concept of "the Web as a Platform": software applications built to take advantage of internet connectivity, moving away from the desktop (which has downsides such as operating system dependency and lack of interoperability).

2004: Social Media and Digg

The term "social media", believed to be first used by Chris Sharpley, was coined in the same year that "Web 2.0" became a mainstream concept. Social media–sites and web applications that allow its users to create and share content and to connect with one another–started around this period.

Digg, a social news site, launched on November of 2004, paving the way for sites such as Reddit, Mixx, and Yahoo! Buzz. Digg revolutionized traditional means of generating and finding web content, democratically promoting news and web links that are reviewed and voted on by a community.

2004: "The" Facebook open to college students

Facebook launched in 2004, though at the time it was only open to college students and was called "The Facebook"; later on, "The" was dropped from the name, though the URL http://www.thefacebook.com still works.

2005: YouTube – streaming video for the masses

YouTube launched in 2005, bringing free online video hosting and sharing to the masses.

2006: Twitter gets twittering

Twitter launched in 2006. It was originally going to be called twittr (inspired by Flickr); the first Twitter message was "just setting up my twttr".

2007: Major move to place TV shows online

Hulu was first launched in 2007, a joint venture between ABC, NBC, and Fox to make popular TV shows available to watch online.

2007: The iPhone and the Mobile Web

The biggest innovation of 2007 was almost certainly the iPhone, which was almost wholly responsible for renewed interest in mobile web applications and design.

2008: "Internet Election"

The first "Internet election" took place in 2008 with the U.S. Presidential election. It was the first year that national candidates took full advantage of all the Internet had to offer. Hillary Clinton jumped on board early with YouTube campaign videos. Virtually every candidate had a Facebook page or a Twitter feed, or both.

Ron Paul set a new fundraising record by raising $4.3 million in a single day through online donations, and then beat his own record only weeks later by raising $4.4 million in a single day.

The 2008 elections placed the Internet squarely at the forefront of politics and campaigning, a trend that is unlikely to change any time in the near future.

2009: ICANN policy changes

2009 brought about one of the biggest changes to come to the Internet in a long time when the U.S. relaxed its control over ICANN, the official naming body of the Internet (they’re the organization in charge of registering domain names).

The Future?

Where is the future of the Internet headed? Share your opinions in the comments section.

Sources and Further Reading

• A People’s History of the Internet: from Arpanet in 1969 to Today: A timeline of the Internet from guardian.co.uk.
• History of the Internet: An early timeline of the Internet, from precursors in the 1800s up through 1997.
• A Brief History of the Web: A series of videos from Microsoft to celebrate the launch of Internet Explorer 8.
• The History of the Internet – Tim Berners-Lee: A brief history of major developments associated with the Internet from About.com.
• Hobbes’ Internet Timeline – the definitive ARPAnet & Internet History: A very thorough timeline of the Internet, starting in 1957 and going up through 2004, with tons of statistics and source material included.
• Internet Timeline: A basic timeline of Internet history from FactMonster.com.

Related Content

• The History of Web Browsers
• Popular Search Engines in the 90’s: Then and Now
• 10 Revealing Infographics about the Web
• Related categories: Web Development and Infographics

About the Author

Cameron Chapman is a professional web and graphic designer with over 6 years of experience in the industry. She’s also written for numerous blogs such as Smashing Magazine and Mashable. You can find her personal web presence at Cameron Chapman On Writing. If you’d like to connect with her, check her out on Twitter.