CSS3 technology in action: Design examples

CSS3 technology in action: Design examples

Takeaway: Highlights of some beautiful examples of CSS3 design projects by some individuals who are at the forefront in tinkering with the new code possibilities.

While CSS3 and HTML5 technologies are still fresh for most organizations, there are many trend-setting web developers who are taking the new tools by storm. This post will highlight several examples which utilize the full potential of CSS3 in delivering excellence in design, look, and feel. The first group includes several projects and experiments by individuals tinkering with CSS3.

10 beautiful examples of CSS3 design

CSS3 Analog Clock by Paul Hayes is his quick project and experiment that works in Safari and Google Chrome. Essentially the working analog clock is a series of four images, and using CSS3 to overlay, transform, and transition the hands’ movement, the time is obtained from a short JavaScript.

Figure A

Snow Flakes by Natalie Downe utilizes examples of CSS3 animation, text-shadow, transform, and keyframes to create a page of gently falling snow flakes. The snow flakes are called by a short script which controls the number of flakes, how fast they fall, and the duration of the snow fall. The animation is best viewed in Google Chrome.

Figure B

Matrix Effect by Girlie Mac embeds a Katakana font with CSS3 keyframes, transform, and animations using webkit prefixes to create this demonstration, again, best viewed in Google Chrome.

Figure C

Pure CSS Speech Bubbles by Nicolas Gallagher demonstrates the use of CSS3 backgrounds, linear gradients, border radius, and transform translate to create stunning speech bubbles in a selection of variants.

Figure D

Embossed Text Effect by Analog, a company of friends who make websites, uses a subtle 1px CSS3 text-shadow effect for their h2, h3, p, and li text, creating an embossed text effect.

Figure E

Polaroid’s with CSS3 by Zurb is a gallery display using CSS3 transform and rotate to turn images into a set of randomly selected Polaroid pictures.

Figure F

CSS3 Transitions Gallery by AlexandtheWeb demonstrates CSS3 transitions, transform, rotate, border radius, and masking to create this stunning example.

Figure G

CSS3 3D Butterfly by eletriq demonstrates the use of CSS3 perspective, transform-origin, and transform-style to create a 3D butterfly object in flight. Display is available in Safari only.

Figure H

3D geometry with 3D CSS3 transforms by Joe Lambert uses rotateX(deg), rotateY(deg) axis, transitions, and transformVector to create this 3D cube with rotation controls (displayed in Safari).

Figure I

CSS3 Time Machine by Joe Critchley utilizes CSS3 perspective, transform, and translate to create this image slide show similar to Apple’s Time Machine interface (displayed in Safari).

Figure J

What you need to know about iOS 5

What you need to know about iOS 5

Apple iOS 5

Takeaway: The fifth generation iOS, the engine that powers Apple’s popular iPhone and iPad devices (among others), introduces several important changes and refinements.

Apple’s iOS, though only four years old, has changed the way users connect, purchase and maintain applications, collaborate, and more. The fifth generation iOS, the engine that powers Apple’s popular iPhone and iPad devices (among others), introduces several important changes and refinements. Here are the top 10 things you should know about Apple’s new iOS 5.

1: Requirements

The fall 2011-release iOS 5 upgrade works with a variety of current and legacy handsets, tablets, and devices. iOS 5 is compatible with the iPhone 3GS and iPhone 4. iOS 5 is also supported on the 3rd and 4th generation iPod Touch as well as the original iPad and iPad 2. There is no cost for the upgrade.

2: PC Free

One common complaint prior to iOS 5 has been that a computer was required to fully utilize and back up new iPads, iPhones, and iPod Touch devices. No more. iOS 5 severs the tether and makes it possible to activate and configure new devices without having to tie them to a computer. Further, with iCloud support, iOS 5 devices can be backed up automatically without having to use a computer.

3: Mail improvements

iOS 5 also introduces overdue Mail improvements. The new iOS provides indentation support, enables rich text (bold, italic, and underline) formatting, and can even flag messages. iCloud, meanwhile, helps ensure email accounts stay synchronized across multiple devices. As email’s importance continues to grow, such refinements on the iPhone and iPad platforms are a necessity.

4: Tabbed browsing

A seemingly minor innovation when originally introduced on computers, tabbed browsing enables users to maintain multiple active Web pages within a single browser instance. The feature has proven popular, especially as users have become more dependent upon Web-based applications and Web-based email. iOS 5 updates the Safari browser to bring tabbed browsing to compatible iPhones, iPod Touches, and iPads. This enables multiple concurrent Web page sessions and considerably simplifies the process of switching between open pages,.

5: Reminders

A cottage industry of iOS to-do and task list application providers has arisen over the past few years. That’s because Apple’s iOS didn’t previously do a very good job natively managing or synchronizing organizational tasks. Reminders is a new iOS 5 feature that addresses that shortcoming. With iCal, Outlook, and iCloud integration, changes automatically synchronize across multiple devices. Better yet, users can associate due dates and locations with the tasks they set. Productivity and efficiency result, while dependency upon a third-party application decreases or is eliminated altogether.

6: iCloud support

iCloud support within iOS 5 means applications, photos, music, settings, and other data isn’t lost if a compatible Apple device goes missing. Because iCloud stores data on the Web, files, configuration information, and even applications previously purchased on one device can be pushed to a replacement or other authorized device wirelessly. Calendars, contacts, and mail benefit from iCloud, which powers wireless synchronization between devices, too. iCloud even enables synchronizing iOS data with a PC, so Windows users benefit from iCloud/iOS 5 integration. And 5GB of free storage means the price is right.

7: iMessage

The simplicity and immediacy of text messaging has fueled its meteoric popularity. One can hardly even visit a neighborhood grocery or airport without hearing others’ text alert beeps. Built into the Messages app, iOS 5’s new iMessage feature enhances traditional messaging by adding support for sending photos, videos, locations, and contacts for iPad and iPod Touch users. iMessaging includes group messaging support, too, which better enables team collaboration and communication. iMessage also synchronizes iMessage conversations across multiple devices.

8: Notification Center

As iPhone and iPad use has grown within businesses and as users have loaded a veritable cornucopia of applications on those devices, mobile users sometimes feel assaulted by the number of updates, new email alerts, unread text messages, and other notifications.

Prior to iOS 5, all these different updates lived in different locations and sometimes proved distracting. iOS 5 users can take advantage of the new Notification Center to select which notifications they receive. And copping a popular feature I associate as being introduced with Microsoft Outlook 2003, new notifications appear briefly (in this case at the top center of the screen) before fading out of view. The Notification Center presentation of these messages is less distracting and doesn’t require switching applications, yet it still communicates the same information quickly.

9: AirPlay

Many users will find iOS 5’s new AirPlay innovation a critical component of the new OS. Others may never use it. But those who do will find the video mirroring feature an intriguing and convenient improvement in the mobile OS.

AirPlay enables presenters to wirelessly stream their iPad 2 display information to an HDTV via an Apple TV device. Attendees see exactly what’s on the presenter’s iPad, meaning iPads can fully replace desktop or laptop presentation systems in boardrooms, classrooms, conference rooms, and other presentation areas.

10: Calendar improvements

Calendar operations receive a needed boost within iOS 5, too. iOS 5-powered Calendars now synchronize across multiple devices leveraging Apple’s iCloud technology. Further, iPad users can display year views of their Calendar, while iPhone and iPod Touch users can display a weekly view of their calendar — previously unavailable options. Individual calendars can now be added and edited directly from iOS 5-powered iPhones, iPads, and iPod Touches. Possibly most important, though, is the fact that Calendar attachments are now viewable on compatible iOS 5 devices without having to switch applications.

10 ways Microsoft can make Windows 8 a game changer

10 ways Microsoft can make Windows 8 a game changer

Windows 8

Takeaway: Now that we’ve had a chance to see some of the things Windows 8 can do, let’s talk about a few of the things it SHOULD do.

Tons of speculation has surrounded Windows 8, and while the recent Microsoft BUILD event and release of the Windows 8 Developer Preview have answered many of the questions, there is still plenty of time for Microsoft to unveil new features and strategies for the OS. Here are some things Microsoft can do to make Windows 8 a true game changer in the industry.

1: Better legacy apps experience

Right now, the experience of using legacy applications in the Developer Preview is just awful. You bounce between the slick Metro UI to a Windows 7 style desktop that is utterly crippled. For example, there is no Start menu. It feels like the old Windows 3.1 days, where many apps were still DOS apps and running them under Windows was a completely different experience from Windows apps — and that is not a good feeling. If Microsoft wants Windows 8 to get quick uptake, this needs to change.

2: 100% Binary compatibility with Xbox, Windows Phone

You know what would be awesome? Having one OS to rule all my devices and applications. Right now, we know that Microsoft intends for Windows 8 to be for desktops as well as tablets. By bringing the Xbox successor and phones into the mix, game developers wouldn’t need any extra effort to reach a bigger audience, and enterprises would be falling all over themselves to buy Windows 8 phones so their apps could be written only once.

3: Cloud selection

We’re currently seeing a fair amount of cloud integration (via Live) with Windows 8. Application data can get synced to the cloud, as can settings, so that you can effortlessly transition from one computer to another. It would be nice if the OS allowed you to specify a public cloud (great opportunity for Microsoft vendors here) or a private cloud (for enterprises and advanced home users) for this purpose. This would let enterprises feel comfortable having users syncing so much to a cloud, since they can pick it and control the data retention and storage.

4: Social networking hooks

Windows Phone 7 is innovative in its use of social networking. It is easy to have your pictures end up on Facebook, for example. While I doubt that people would want a desktop PC to tie everything to social networking, a level of integration like WP7 has would be great, especially when used on tablets.

5: Docking

Tablets are now powerful enough to run most applications pretty well. Sure, you don’t want to be running Photoshop or encoding video on a tablet. But for most basic productivity tasks, a tablet (or even a phone) can get the job done. We’re starting to see innovative devices like the Droid Bionic that can dock with other accessories such as monitors and keyboards to expand their capabilities. If Windows 8 has built-in provisions for this, in a way that applications can scale up or down (preferably automatically, without the developer needing to write special code), Windows 8 will be a winner for tablets and even phones.

6: Built-in Office

If Microsoft really wanted to impress us, it could put Office into the OS. Sounds nuts, right? Well, not really. WP7 devices already come with a portable version of Office that can handle Word, Excel, PowerPoint, and OneNote, as well as a separate Outlook version (that is much more integrated into the phone), which covers most people’s needs. Maybe Microsoft shouldn’t give away the farm with a full version of each application, but a stripped-down copy of each would be a real winner. It would ensure that Office maintains its dominance and keep Windows 8 useful. After all, why should someone pay for the full Office suite just to get features they aren’t going to use anyway?

7: A refocus on business capabilities

Windows 7 is a solid OS for business. Unfortunately, at least in the Developer Preview, Windows 8 is not. The legacy apps, as mentioned, feel out of place, which is bad for businesses that rely on all sorts of specialized applications. The Metro UI is just awful for multi-tasking or side-by-side work, which is a big problem for people trying to get important projects done. While there is multi-monitor support, of course, the idea of trying to perform tasks when applications must consume an entire screen is frightening for most kinds of sophisticated information work.

8: Lighter system requirements

Windows 8 needs to be lighter than Windows 7. While Windows 7 performs pretty nicely, Windows 8 needs to be usable on low-end desktops or tablets, if not phones. Microsoft is claiming that Windows 8 is much lighter than Windows 7, and it’s already been shown that system startup is lightning quick. Microsoft needs to do better. If they want Windows 8 to be a smash hit for tablets or phones, it needs to snap alive instantly.

9: Platform for locally hosted Web apps

One of the big changes in IT has been the move to Web applications. A real killer feature would be allowing applications to easily install and self-host a Web backend. This would allow developers to use their existing tools and code base, combine it with backend database synchronization, and instantly see applications with true offline capabilities without much additional effort. The pieces are already in place (IISExpress, LocalDB, and the cloud sync). The question is whether Microsoft can put it all together in one slick package. Enterprises would like to be able to self-host applications, either on the desktop or server level, rather than trust public cloud vendors. This would be a great step in that direction.

10: A price drop to free, or nearly so

This is the least likely of all, considering that Microsoft’s #1 source of revenue is Windows, followed by Office. Windows 7 took a while to start replacing XP, in no small part because while it was good, it wasn’t good enough to justify paying for an upgrade. By dropping the price significantly, along with reducing system requirements, Windows 8 looks like a good upgrade for existing machines, keeps the cost of Windows 8 powered notebooks, netbooks, and tablets low enough to compete with Android tablets and the iPad, and keeps the partners happy. HP has already announced that it’s pulling out of the PC game entirely, in no small part to cratering profit margins. Getting Windows 8 more attractively priced would help ensure better margins for those who are left.

10 things you can do to boost PC performance

10 things you can do to boost PC performance

Takeaway: Does your PC performance need a kick in the pants? These simple steps will help speed things up.

There’s so much information out there about PC performance (especially on Windows machines), it’s difficult to be sure what’s right and what’s not so helpful. Here are 10 proven performance enhancements you can make to your computer, many of which are free.

1: Get rid of malware

New machines shouldn’t have malware on them. But one of the most common causes of the “my PC used to be fast, and now it isn’t!” complaint is actually the presence of malware. Malware can sneak onto a computer in a zillion different ways and quite often it sits in the background slowing your machine to as it sends out spam emails, searches for other computers to infect, works on cracking cryptography, or any number of the other nefarious tasks that hackers like to use their botnet slaves for. There’s a good chance that the malware brought even more friends with it (that’s often how you see computers with thousands of viruses on them not long after the initial infection), and the infection may be bad enough to justify a wipe and reload. My first step in investigating a slow system is usually a virus scan.

2: Upgrade to a better video card

For typical business productivity tasks, a video card probably isn’t an upgrade that will have a lot of value. But for gamers and other similar uses, a video card is a slam dunk upgrade. If your current card and motherboard support SLI or CrossFireX, adding a second card and bridging them will be a good option as well. In some scenarios, better video cards can be a huge benefit even without heavy onscreen video work, because certain applications can leverage the GPUs for calculations.

3: Get a faster drive

Many times, the real performance issue is the speed of disks. Look at numbers like the RPMs, cache size, seek speed, and transfer rate to buy a faster drive. Often, a good drive will seem slow because the computer’s power settings are allowing it to spin down. You may want to consider changing these settings to make sure that the disk is more likely to be ready to work when you need it to. While the SSD vs. hard disk debate is still continuing, SSDs usually seem to feel faster to users. Boot times are usually cut for sure. But something about an SSD makes a system feel more responsive or “snappy” to use, and for day-to-day work, that’s a great feeling.

4: Address hardware and driver issues

All too often, system slowness is actually a sign of hardware problems. For example, if your CPU isn’t being properly cooled, it will often have its speed reduced in an effort to keep it from overheating. Recoverable errors with disk access can kill your throughput while not showing up as a dead drive. And bad hardware drivers can often make the whole system slow, especially video drivers. Using utilities to check your CPU speed and various temperatures, scanning for hard drive errors, and updating your drivers is a good start to investigating performance problems. Often, problems caused by hardware or drivers are not just poor speeds, but system flakiness too.

5: Use a RAID

Using a RAID can dramatically lower the read and write speeds of your disks, depending upon the RAID level you choose. You will want to do some research to see what RAID level fits your needs the best. Personally, I am a fan of RAID 1, 6, and 10 because I feel that they offer appropriate levels of data protection along with a good measure of speed improvements.

6: Try a different browser

It’s no secret: Different browsers perform differently, and most people spend a lot of time in their Web browser. Benchmarks really muddy the browser speed conversation. Some browsers perform well on some but do badly on others, even when they are supposed to test the same thing. The problem with the benchmarks is that what they usually test is not real work performance! While JavaScript is an important part of the modern Web, few Web applications beat on the JavaScript engine hard enough to produce a noticeable impact on performance. That said, it’s been my experience that the Chrome browser is the fastest for actual work. If you want to have your Web browser feel more responsive and lively, consider a switch to Chrome.

7: Remove junk

It’s easy to have a computer get loaded up with junk that slows it down. The worst part is, we invitethis garbage into our lives by installing “helpful” utilities, toolbars, and other add-ons. I could easily write a list of 10 kinds of computer-stalling junk. Here are some of the things you’ll want to seek out and remove for best performance:

• Automatic update systems for various applications (but be careful: some apps, like Flash, Acrobat, QuickTime, and Web browsers are prime malware targets and you will want to keep these up-to-date)
• Things that run on startup
• Windows services you don’t really need
• Crapware from the PC maker
• Toolbars
• Browser plug-ins (the Skype browser plug-in is an especially bad offender, I’ve found)
• P2P applications
• Web servers and database servers that were installed by since-removed applications, but left behind

8: Add a faster DNS lookup server

Most ISPs love to brag about how much bandwidth they are giving you. But they don’t mind letting the rest of their infrastructure slowly get overwhelmed or deteriorate. Among the biggest offenders are the DNS servers our ISPs use. If you want to know why things seem to take forever to start loading, slow DNS servers are often the cause. Consider adding a fast DNS server as your primary DNS server in your TCP/IP settings. Google’s Public DNS server is a great option.

9: Defrag

Defragging your hard drives is a great way to get some more performance. While modern Windows systems automatically defrag on a regular basis, I’ve found that the Windows defragging is fairly unaggressive. We’ve reviewed a lot of different defrag apps here at TechRepublic. I suggest that you check out your alternatives and find one that does a better job for you.

10: Check network connectivity

Time and time again, “system slowness” actually is caused by networking issues. Our computers do so much on the Internet that slowness there can affect just about everything you do on a regular basis. While there isn’t enough space to write an exhausting troubleshooting list here, some of the things you should try (or investigate) are:

• Replacing the network cables, switches, routers, WiFi access points, etc.
• Calling the ISP and checking the distance from the CO (for DSL) or the local segment’s current load (for cable); the ISP may need to rewire or rework its connectivity. Satellite customers will want to double-check their dish installation and ensure that it is tightly locked down and pointed in the right direction.
• Malware scanning on all PCs to see if malware is burdening the network
• Inspecting the wiring of the phone lines (for DSL) or coax (cable customers) to look for loose connections, corrosion, or flaky wires
• Cable customers will want to find out how many splitters are between the line from the pole and their modem. If it is more than one (and preferably only a two-way splitter), they should rewire so that they have only a single two-way splitter between the pole and the modem to ensure the cleanest signal possible.