-
Posted: February 8th, 2012, 10:00pm MST
jQuery Tutorial for Beginners The previous tutorial in this list focused on practices, and we said it was different from most. This particular tutorial is exactly the opposite, as the author chose to skip any specific concepts or principles in favor of showing code examples that illustrate the power of jQuery. So, if you are looking to jump right into things without being lectured, this is the tutorial for you. The main value of the tutorial is its format, which lets beginners really immerse themselves into jQuery in as little time as possible. By offering snippets of jQuery's power, you ca...
-
Posted: February 6th, 2012, 6:00am MST
If you're constantly in search of newer and more efficient methodologies that permit you to improve the overall quality of your CSS code, then take a peek at combinators. This underrated feature, bundled with the specification for a long time, will let you define the visual presentation of your web page elements by using fewer CSS classes and selectors. In this way, it can help you keep the markup much cleaner and unpolluted. If you've already read the two previous parts of this tutorial, you now have a solid background on how to work with CSS combinators. In those pieces I developed some exam...
-
Posted: February 1st, 2012, 1:00pm MST
Let's face it: developing HTML5 websites that can be rendered consistently across most mainstream browsers is a challenging task (even for experienced developers). The standard is still immature, and many browsers do not support certain features of the specification. It's no surprise that Internet Explorer is the worst offender here. Fortunately, there are a few tools that will help you to make the development process much less painful, trust me. A good example of such a tool is HTML5 Boilerplate. This powerful, full-featured HTML5 template permits you to deal more easily with the aforementio...
-
Posted: January 30th, 2012, 6:00am MST
jQuery Accordion Image Menu Plugin If you want to know which plugin offers the best looking menus out of this list, the award would have to go to the Accordion Image Menu Plugin by the folks at Web Argument. Sites that emphasize images or entertainment would be complemented by this plugin, as it lets you create an accordion style menu that uses images as the background. Beyond the impressive look of the menu, various animation effects can also be implemented via jQuery UI Effects, such as back, bounce, and swing. Link:
[web-argument.com] ...
-
Posted: January 24th, 2012, 10:00pm MST
As one of the most underrated facilities of the CSS specification, combinators are powerful tools that allow you to improve the assignment of styles to elements on a web page. While their functionality remained forgotten in a dark corner for many years, due to the lack of a proper support by some browser vendors (with Internet Explorer clearly leading the crowd), things have changed for good. Now it's possible to utilize them in a pretty cross-browser fashion. The best way to demonstrate how useful combinators can be is through some concrete, functional code samples. In keeping with this req...
-
Posted: January 22nd, 2012, 10:00pm MST
Despite the lack of support from Internet Explorer 7/8 for most of the features included with HTML5, it's hard to ignore the hype that the standard has generated. Even though the migration process was at first somewhat slow, the number of websites that now use HTML5 as their backbone has grown at an exponential rate. There's a good reason for that: while it can't be considered an actual revolution, HTML5 is undeniably an evolution toward the creation of richer, cleaner and more semantic web pages. Nevertheless, the path to building cross-browser HTML5-based websites often calls for a delicat...
-
Posted: January 19th, 2012, 6:00am MST
Combinators are quite possibly one of the most underrated features of CSS. However, the indifferent attitude with which programmers treat them wasn't because of their useless nature or limited functionality. In fact, as with many other forgotten facilities provided by the specification, many browser vendors included quot;support quot; for combinators that was buggy, poor, and in the worse case, simply non-existent. Despite this, today there's new hope for getting combinators up and running, as most browsers (yes, even Internet Explorer 7 and up) allow you to use them in a pretty confident ...
-
Posted: January 17th, 2012, 6:00am MST
As for the reasoning behind the API platform's launch, AT amp;T's chief marketing officer David Christopher used the AT amp;T Developer Summit at the Consumer Electronics Show in Las Vegas to say that it was done to address fragmentation issues. App developers typically have the tedious task of rewriting native applications for Android devices, BlackBerrys, iPhones, and Windows Phones. By creating HTML5 apps, the process is simplified, as users of different devices can access them via browsers, all while maintaining the look and feel of native apps. Christopher's stance was strengthened by ...
-
Posted: January 11th, 2012, 10:00pm MST
How jQuery Works When you look for tutorials on a subject, you probably look directly at the source. That's the case here, as this tutorial comes straight from jQuery's official website. It provides an introduction to the library plus some basics to give you a decent foundation to build on. The layout of the tutorial is very organized, and it gives you the option to jump to different topics with ease. Among the items touched on include the basics, adding and removing an HTML class, special effects, and callback and functions. Although it is rather short in length, the tutorial offers a g...
-
Posted: January 10th, 2012, 10:00pm MST
ShareThis Just as its name implies, ShareThis is a WordPress plugin that allows your visitors to easily share content from your site across a host of social networks and email. ShareThis isn't exactly one of the new kids on the block, as its creators claim that it has already been used on over one million sites. With that much of a presence, installing this plugin on your site is a good idea, since visitors will probably recognize it and know how it works. ShareThis adds easily recognizable icons to your posts that are large and vibrant in color. If a visitor wants to share your particular ...
-
Posted: January 2nd, 2012, 10:00pm MST
The move towards HTML5 means that the BBC followers who use various browsers and increasingly popular platforms such as Android and iOS will get to enjoy its wide variety of video content. It took some time for the BBC to finally make the transition to HTML5, as the company expressed concerns about how it would protect the widespread distribution of its proprietary content on the web in the absence of Flash's DRM controls. Rather than making the transformation in a single shot, the BBC ran a test program that instituted HTML5 solely on its site's Health section. Many criticized the company ...
-
Posted: December 28th, 2011, 6:00am MST
Are you looking for a simple approach that lets you decorate your HTML elements with a few engaging circular shapes, but don't want to deal with the burdens and complexities of Photoshop? Then take a look at the border-radius CSS3 property. It not only will permit you to render native rounded corners in a snap, but it'll be your best partner for displaying circles on a web page without using background images. Of course, the best way to prove the hidden functionality provided by border-radius is with some concrete, functional code samples. In the first part of this two-part tutorial I de...
-
Posted: December 26th, 2011, 6:00am MST
Sticky footers are nothing but classic HTML footers, except that they're always displayed at the bottom of the web page, regardless of whether or not the page's primary contents occupy the entire browser display window. Got the logic behind this concept? Great. Though the term sticky might seem somewhat intimidating, the truth is that the implementation of this kind of popular footer is much easier than one might think. The entire process only requires that you define within the markup the footer area itself, and then place it at the bottom of the HTML document by utilizing some basic CSS...
-
Posted: December 20th, 2011, 10:00pm MST
Since they made their triumphal appearance on the stage of web design, some CSS3 properties have become the favorite tools of many designers because of the functionality they offer right out of the box. Many of these properties make it much easier to build eye-catching web pages that (hopefully) keep users engaged. While there's nothing wrong with using these properties in a quot;conventional quot; way, it's fun to take CSS3 to the next level by using the properties in a more atypical fashion. Doing this allows you, among other things, to create quite appealing effects. That's exactly the ...
-
Posted: December 19th, 2011, 6:00am MST
The concept is far from being breaking news, I know, but the dynamic and evolving nature of the web quite often gives web designers new and demanding challenges. Today, not only is it of primary importance to create clean and solid web pages that neatly adhere to the standards, but it's necessary to spice them up with a few additional features that (hopefully) will keep users engaged and coming back for more. These requirements, though, are a doubled-edged sword that may end up hurting the functionality and accessibility of a website. In many cases, overloading a web page with a bunch of flash...
-
Posted: December 14th, 2011, 9:30am MST
If you've read the first part, you probably have a pretty good idea of how to provide your pagination links with an engaging appearance. In that article I developed a couple of clean templates, which made use of some background colors and borders to polish the link's visual presentation. Even though the properties involved in the styling process were old favorites, which you've surely been using for years, they yields results that were more than acceptable. As I said just a moment ago, my plan here is to put at your disposal a decent variety of pagination templates. This way, you can pick the ...
-
Posted: December 11th, 2011, 10:00pm MST
Commenting on some of the reasoning behind its projection, Strategy Analytics analyst Neil Shah said: Growth for HTML5 phones is being driven by robust demand from multiple hardware vendors and software developers in North America, Europe and Asia who want to develop rich media services across multiple platforms, including companies like Adobe, Apple, Google and Microsoft. We define an HTML5 phone as a mobile handset with partial or full support for HTML5 technology in the browser, such as the Apple iPhone 4S. Neil Mawston, Strategy Analytics' executive director, continued with additional re...
-
Posted: December 8th, 2011, 10:00pm MST
Todd Anglin, the executive vice president Telerik's Kendo UI group, commented on the appeal of the new framework: Building applications and sites today with HTML5 and JavaScript is an exercise in self-assembling an array of libraries and toolsets to compose a platform that has all of the necessary components for development. This approach is acceptable for hobby projects, but it is fraught with support and licensing risks, it is difficult to maintain and upgrade, it is difficult to learn, and it wastes valuable development time. Kendo UI solves this problem by providing a unified framework w...
-
Posted: December 8th, 2011, 11:00am MST
Even though they look relatively harmless on the surface, when analyzed in depth, Singletons are in fact much more dangerous to good object-oriented programming design than one might think. Implementing Singletons, remember, demands the use of a static method, which opens the undesirable gates of global access. Singletons also introduce a strong coupling effect with any class that consumes them via its static method. They also break the Single Responsibility Principle, as they're not only responsible for performing the task that they were designed for (whatever it is), but for controlling clas...
-
Posted: December 6th, 2011, 12:30pm MST
The most difficult part of building a pagination system is the logic that must be implemented behind the scenes. In most cases, the tasks of calculating the number of links that will be displayed per page, as well as the amount of pages that will be used to span the corresponding content are performed by some kind of server-side component (even though some JavaScript libraries accomplish this quite decently in the client side). Of course, you don't need to reinvent the wheel every time you wish to drop a pagination mechanism onto your web pages. Currently there's a plethora of libraries and fr...
-
Posted: December 5th, 2011, 10:30am MST
Though in the past they enjoyed both popularity and a certain amount of prestige, without a doubt Singletons have progressively become one of the most evil and despicable villains in object-oriented design. Singletons earned their bad reputation for a reason: bringing them to life requires the programmer to deal at least with a static method. This is simply an elegant masquerade for creating a global access point (which in most cases is mutable as well) throughout an entire application. And we all know that global, mutable access is unquestionably a bad thing that must be avoided at all costs....
-
Posted: December 1st, 2011, 10:00pm MST
The integration of NPM into Node.js gives its users a simplified, yet solid avenue for packaging and distributing libraries of code. NPM has become accepted as the community standard when it comes to Node.js packaging, so its addition is one that is welcome with open arms. While the NPM addition is a step in the right direction for Node.js, version 0.6.3 does come with some problems of its own, such as the incorrect installation of man pages. An upcoming 0.6.4 release will supposedly take care of the issue, and it will also include the option to forego installation of NPM to accommodate tho...
-
Posted: November 29th, 2011, 9:30am MST
Title: HTML5 Guidelines for Web Developers Authors: Klaus Förster amp; Bernd Ã-ggl Publisher: Addison - Wesley ISBN: 978-0-321-77274-9 Considering the tumultuous hype that HTML5 has generated in the last few months, it's reasonable to think that many web developers out there will feel eager to migrate from the HTML4/XHTML tandem to the new standard, and start experiencing the many new features that it provides right out the box. Well, if you fall into this category, the book HTML5 Guidelines for Web Developers by Klaus Förster and Bernd Ã-ggl is definitely worth a look. In my personal opini...
-
Posted: November 28th, 2011, 6:00am MST
Although the idea may sound intimidating, building a dynamic (and by dynamic I mean animated quot;) image gallery using a few CSS3 properties is much easier than you might think. Indeed, in the previous part of this series, I implemented a simple, yet extendable image gallery, which used the transition CSS3 property to dynamically hide and display a given image when users hovered their cursors on its associated thumbnail. Best of all, the entire animation process didn't require coding a single line of JavaScript. As with any other web-based user interface component, it's possible to easily...
-
Posted: November 23rd, 2011, 10:00am MST
Since the beginning of the Internet, image galleries have been one of the most overused (and sometimes misused) user interface elements available. There's a good reason for this timeless popularity: supported by HTTP from its first incarnation, images were (and are) a powerful tool for delivering content to users in a refreshing and effective way, without condemning them to long lines of arid and dull text. As one might expect, image galleries have gone through a constant and healthy evolution process. This process ranged from primitive implementations that relied heavily on a bunch of lt;im...
-
Posted: November 21st, 2011, 10:00pm MST
For that quot;More than meets the eye quot; look, it's going to be important that you have the right font. Now there are several fonts that duplicate that font, such as Transformers (natch) and SF Transbotics. Make sure that when you download the fonts that you install them before you start, and don't have any software that uses text open. Once you've installed the font and then open Photoshop, you should see the newly installed font appear on your font list. Step 1 Now you need to open a new blank document. Let's start with these specs: 540Ã 300 at 72ppi (pixels per inch). Press the D key to...
-
Posted: November 17th, 2011, 10:00pm MST
Title: Learning HTML5 Game Programming: A Hands-on Guide to Building Online Games Using Canvas, SVG, and WebGL Author: James L. Williams Publisher: Addison - Wesley ISBN-13: 978-0-321-76736-3 ISBN-10: 0-321-76736-5 Unquestionably, Flash has ruled web-based online games for a long time. Backed up by a solid, easily-pluggable platform, the popular Adobe application makes it relatively easy, at least to some extent, to create interactive, cross-browser games, even at the expense of having to deal with the oddities and twists of a custom scripting language like Action Script. As HTML5 grows incre...
-
Posted: November 15th, 2011, 6:00am MST
There's no shortage of options for adding eye-catching background effects to elements on a web page; you can use a variety of resources, including images, plain background colors, and even some dynamic approaches. This last option relies heavily on JavaScript to perform some DOM and styles manipulation behind the scenes to implement the desired effect(s). With the release of CSS3, though, it's fair to stress that one additional contender must be added to this already prolific landscape. As you may know, the new standard includes a revamped version of the background property. It will let y...
-
Posted: November 14th, 2011, 6:00am MST
Cocktails allows developers to code applications with ease by cutting out the fat so to speak. Writing applications often entails several time consuming tasks and Cocktails steps in to handle some of them, giving developers more time to concentrate on the creative process. Besides improved efficiency, Cocktails helps make the development process more appealing. All of this is achieved through a mix of CSS3, HTML5, JavaScript, Node.JS, and a touch of innovation from some of Yahoo's most talented engineers. Yahoo is officially kicking off its Cocktails menu with two cleverly named releases ...
-
Posted: November 10th, 2011, 6:00am MST
STEP 1 Start a new document 1200x800 with a black background. Use your TYPE tool and create your text. I used Invisible Killer which many of you may recognize from the'Predator' films. With your type tool still selected, click on the quot;Create warped Text quot; button to open the warp text box. STEP 2 From the Warp text box, for style, select Arc Upper, and set your Bend to +41 STEP 3 Now duplicate the text layer, there's several ways to do this, one way is to right click on the layer (in the layer pallete) and select quot;Duplicate Layer quot;. We will work with this layer lat...
-
Posted: November 8th, 2011, 1:30pm MST
As one of the oldest CSS properties, the background property (or the background shorthand, to express it a bit more correctly) is a venerable feature of the specification. As you know, it allows you to decorate HTML elements with background colors and images, which can be easily positioned via a standard set of coordinates (yes, the classic top-center-bottom and left-right tandems, or by directly specifying X and Y pairs). The release of CSS3 has taken background's functionality to new and exciting levels. Now it's feasible to use the shorthand in more creative and useful ways. These in...
-
Posted: November 7th, 2011, 8:30am MST
If you think that the many new features included with CSS3 can only display nifty rounder corners, drop a few native shadows around text and boxes and animate HTML elements, then take a look at box-sizing. This underrated property of the standard lets you easily control the way that the box model of a selector is rendered on screen. In other words, box-sizing specifies whether or not the padding added to an element will affect the dimensions assigned to it (read: its width and height). That's pretty good, since implementing a correct box model used to be a lost cause for most web designer...
-
Posted: November 2nd, 2011, 10:00pm MDT
quot;Column, quot; a rather overlooked, yet powerful CSS3 property, does exactly what its name suggests. It will let you easily break the content of any block-level container into multiple columns, without making you deal with the annoyances and pitfalls of floated elements. What else can you ask for? To demonstrate how simple it is to put the column property into action, in the first part of this tutorial, I developed a couple of examples. They showed how to use the pertinent property to create both two-column and three-column layouts. In both cases, the entire design process was as simple...
-
Posted: November 1st, 2011, 10:00pm MDT
It isn't breaking news that CSS3 comes with properties that have generated a lot of hype in the last few months. Now it's possible to add native shadows to text and boxes, and even decorate HTML elements with nifty rounded corners, all without creating a single background image or dealing with the burdens and complexities of JavaScript. However, looking into the coffer of CSS3 is pretty much like diving into the deep waters of the ocean: you never know what new, unexpected treasure is about to come to the surface. The standard includes some additional, rather underrated properties, with some ...
-
Posted: November 1st, 2011, 6:00am MDT
Unfortunately, the quot;text-stroke quot; property is only supported (at least at this moment) by webkit-based browsers, like Safari and Chrome. This shouldn't prevent you, however, from giving the property a try and seeing what it can do. With that idea in mind, in the first part of this two-part tutorial, I developed some examples which showed you how to use the property to decorate the H2 elements of a sample (X)HTML document with different types of stroke effects. The entire styling process was limited to specifying distinct stroke sizes and varying the corresponding foreground colors. I...
-
Posted: October 30th, 2011, 10:00pm MDT
Most programmers, if asked which features of CSS3 they consider the most engaging, would probably reply with something like native shadows, rounded corners or transitions. They'd be right, too, as these capabilities have generated the most hype in the last few months. They're also decently supported by most modern browsers, with the usual exception of Internet Explorer. It's fair to note, however, that CSS3 comes bundled with other handy properties. These have been somewhat overlooked because they lack proper cross-browser implementation (at least at the time of this writing). A good example ...
-
Posted: October 24th, 2011, 10:00pm MDT
Contrary to what you might believe, building a fully configurable slide show by using only a few native methods included jQuery, is a really simple and straightforward process. In previous articles of this series, I gave you some easy-to-follow examples; they showed how to apply different transition effects to a slide show with the quot;fadeTo(), quot; quot;hide()/show(), quot; quot;slideUp()/slideDown() quot; and quot;animate() quot; methods. Even though I've shown you how easy it is to create different variations of the initial slide show simply by replacing one specific animation method...
-
Posted: October 23rd, 2011, 10:00pm MDT
To begin, visit the XAMPP for Windows homepage, located at:
[www.apachefriends.org] You will have several options for which flavor of XAMPP you wish to install, including the Installer, Zip, and 7zip versions. For simplicities sake, this tutorial will use the simplest method: the installer. Click on the Installer link and you will be redirected to the programs SourceForge page. You may get a pop-up like the one below - if so, click Run: Next, you will be prompted to choose an installation language. Choose English (or whichever language you wish) and click the quot...
-
Posted: October 20th, 2011, 6:00am MDT
If you think that developing an easily customizable slide show using only some native jQuery methods is a complicated process, then focus your attention on this article series. In an approachable fashion, you'll learn how to implement a plug-in free slide show on your own web pages, which you'll be able to tweak at will. In earlier chapters of this series, I demonstrated how to build the aforementioned slide show from scratch. I also showed you how easy it is to tweak its transition effects by using different jQuery animations methods, such as fadeTo(), hide()/show() and slideUp()/slide...
-
Posted: October 18th, 2011, 6:30am MDT
Most of the time the display CSS property is used only for hiding/displaying HTML elements, via the complementary none and block values, or turning the elements into inline ones (and vice versa). The property offers an additional ability, however, that so far has remained underused -- quite possibly because many web designers simply are unaware of its existence. As you may have already guessed from the article's title, if the inline-block value is attached to one or multiple block-level containers via the aforementioned property, it will cause the elements to be rendered as inline ones...
-
Posted: October 16th, 2011, 10:00pm MDT
Disqus Comment System The creators of Disqus Comment System deserve some credit for at least slapping a clever name onto their WordPress plugin. Pronounced discuss, it gives site owners a nice set of tools for managing their comment systems. Disqus adds to a site's potential exposure by making comments indexable by search engines. Even if you have a ton of comments already on your site, they will be supported once the plugin is installed. A little peace of mind is thrown in too via Disqus' automatic backup of comments, just in case something bad may happen. Comments are viewable in a thr...
-
Posted: October 13th, 2011, 6:00am MDT
If you're planning to spice up your website with a jQuery-driven slide show, but don't want to deal with the complexities of a full-blown plug-in, then keep reading this article series. I show you step by step how to implement, from scratch, a highly-customizable, plug-in free slide show that uses only the functionality provided by a few native jQuery methods. And best of all, you'll be able to create appealing transition effects without having to deal with hard-to-grasp animation algorithms. Naturally, if you've already read the two previous tutorials of this series, you have a pretty clear...
-
Posted: October 12th, 2011, 6:30am MDT
If you think that the tasty mix of native shadows, juicy gradients and transformations that come with CSS3 are more than enough to satisfy your appetite for new stuff, take a bite of the specification's dessert cake. It includes a powerful transition module, which permits you to transition different properties of an HTML element without having to put a single foot in the field of JavaScript. Yummy! What's more, if you've read the introductory part of this tutorial, you're already familiar with the inner workings of CSS3 transitions. In that first installment I developed some easy examples, whi...
-
Posted: October 11th, 2011, 6:30am MDT
If you think that HTML5's most engaging features are its brand new markup elements, the ability to store up to 5 MB of data in the browser, or even the flashy form attributes (just to name a few), be prepared for some exciting news. The standard now permits you to drag files from your local hard drive and drop them into the browser's window, so that they can be processed in different and creative ways. Moreover, this capability rests on the shoulders of two APIs, called, not surprisingly the Drag amp; Drop API and the File API. Sadly, not all is bright and shiny with these APIs; they're only ...
-
Posted: October 7th, 2011, 6:30am MDT
If you want to add a dynamic touch to your website's user interface without having to deal with the hassles and complexities of JavaScript, then you should check out the quot;transition quot; CSS3 property. In case its name doesn't ring any bells, the property permits you to create an animated transition between two states of an HTML element, pretty similar to what you can do with a movie clip in Flash. That sounds pretty interesting, right? Moreover, if you've already read the previous part of this tutorial, it's quite probably that you're now familiar with using the quot;transition quot; p...
-
Posted: October 6th, 2011, 6:00am MDT
With the variety of full-featured slide show jQuery plug-ins available nowadays, building this popular interfacing element using only the functionality of the library seems almost pointless, or at least Utopian. It isn't. If you want to set up a simple mechanism on your web site that lets visitors sequentially view a set of images via a control panel composed of a few links, you can tackle the entire development process without dealing with the oddities of a third-party package at all. Skeptical? In the first part of this series, I went through the construction of an extendable slide show, who...
-
Posted: October 5th, 2011, 6:30am MDT
A lot of water has passed under the bridge since the old days of website design, when every HTML page layout was created by using a bunch of tables. Aside from learning that mixing structure, visual presentation and behavior all in a single document was an evil thing that should be avoided by all means, most of us realized that tables should be used only for displaying tabular data, and that layouts should be built up upon the foundations of more generic elements, like the venerable divs. From that turning point onward, it's become quot;trendy quot; to implement div-based layouts, even though...
-
Posted: October 4th, 2011, 6:30am MDT
Without a doubt, the new properties included with CSS3 have made many web designers happy. After all, now it's possible (among other things) to render stylish shadows around text and boxes without having to use heavy background images. You can even create nifty rounded corners without cluttering the web page's markup with nested elements or tricky JavaScript snippets. Although these features have generated the most hype in the last few months, the specification includes others which expand on the already vast terrain of behavioral CSS. Do you want an example of this? Then enter the world of ...
-
Posted: October 3rd, 2011, 6:30am MDT
Undeniably, HTML5 is a vibrant, active creature, loaded with features which, in the last few months, have put a big smile on the faces of many web designers. There are good reasons for this: effectively, now it's possible to massage the new markup elements and create more semantic documents in a snap; easily persist data in the browser thanks to the local storage facility; and even perform multithreaded tasks by exploiting the functionality of web workers (feel free to add the feature of your choice to the list). If you thought, however, that the aforementioned abilities were all that HTML5 br...
-
Posted: September 29th, 2011, 11:30am MDT
As you know, the new properties that come with CSS3 open up all sorts of possibilities for designing eye-catching and more interactive web sites. While many of these properties have found a place in the toolbox of some web designers already, some of them still sit in a dark and forgotten corner, even though they have a promising future in modern web design. A clear example of this is the somewhat overlooked transition property. As its name suggests, it permits users to create an animated transition between two states of an HTML element. There's no shortage of options when it comes to using ...
-
Posted: September 26th, 2011, 6:00am MDT
In the past, we presented a list of some of the top WordPress plugins to help you fight spam. While those were some of the bigger names around, there are several more valuable solutions to enhance your spam-fighting efforts, and here they are: Defensio Anti-Spam While many WordPress plugins work well in conjunction with others, Defensio Anti-Spam is the opposite. Think of it as a loner in the fight against spam, as its creators suggest that you deactivate other anti-spam plugins such as Akismet for it to work without any hiccups. The fact that you are asked to deactivate other spam fighting ...
-
Posted: September 20th, 2011, 10:00pm MDT
Hearst's guinea pig in the HTML5 experiment is GoodHousekeeping.com. The site has finally been enhanced with HTML5 and can be enjoyed by visitors using a wide variety of platforms, such as traditional browsers, smartphones, and tablets. Although it's only the beginning for Hearst, it's a far cry from when GoodHousekeeping.com referred to as one of the worst magazine websites around. Weinberg discussed the new and improved Good Housekeeping site, as well as what it means for Hearst in the future: This project forms the basis for the kind of site structure that we expect to roll out to the re...
-
Posted: September 18th, 2011, 10:00pm MDT
If you're a web designer interested in understanding the basic concepts surrounding the implementation of web workers in HTML5, then this article series is the one for you. Comprised of five tutorials, the series will teach you how to create, interact and manipulate a few web workers from a main web page and use these objects for performing mathematical algorithms in parallel. Before we begin this final piece however, let's recap the topics that were covered in the last tutorial, in case you missed it or need a refresher. In the course of that installment I created a simple example, which dem...
-
Posted: September 15th, 2011, 6:00am MDT
This is, admittedly, one of the easier and more recognizable movie font styles you can create - the unmistakable Indiana Jones movie title. Now this is a re-creation, so that being said, allow yourself some variance in the final piece. It'll look good enough to fool your friends, that's for sure. So grab your fedoras and let's get started. We need to start by creating a new document. For the document that we'll be making our text in, we should use a relatively large document size. I used 1600 x 1200 pixels, with the default resolution. You can always resize it smaller later on when you want t...
-
Posted: September 13th, 2011, 6:00am MDT
Text Embossing Technique with CSS In terms of the overall appearance of the effect, this is probably the best tutorial of the group. Apple uses embossed text a lot with their designs, and as a result, many web designers have followed. It's hard to blame them, as you won't find many text effects with a more modern or sophisticated design that's achieved through the embossing technique. Text-shadow is the avenue of choice for achieving the embossed look, and the entire process is relatively easy. The author shows you how to get light text on a dark gradient by manipulating the text-shadow. T...
-
Posted: September 12th, 2011, 6:00am MDT
Modernizr Modernizr is a widely used JavaScript library that focuses on giving its users a boost when it comes to creating websites and applications using HTML5 and CSS3. The library's main function is to whether or not a current browser has certain native features from HTML5 and CSS3 implemented. In other words, Modernizr is a handy and reliable tool that tells you what you can and cannot do with a browser. Having such an overview of functionality and capability is essential, as you will know what specific features you can take advantage of with respect to certain browsers. Even with bro...
-
Posted: September 7th, 2011, 10:00pm MDT
Perhaps Strobe's most appealing characteristic is the way in which it centralizes the management of the app development process through its interface. With just one interface, developers have the power to manage both test and production code plus configure app deployment across the web, iOS, Android, and other platforms. The interface gives developers access to track analytics and implement additional services such as authentication, social add-ons, push notifications, and more. Strobe's core founders include Carl Lerche, Yehuda Katz, and Charles Jolley. Lerche has served as a Ruby on Rails...
-
Posted: September 7th, 2011, 6:00am MDT
The library packages a set of convenient methods that permit you to manipulate the styles of several web page elements in a few simple steps. In the introductory part of this tutorial I took an in-depth look at the library's css() method, which allows you to attach one or more CSS properties to a given selector. If you want to read more about this, you can find the article here:
[www.devarticles.com] It's worth noting that css() isn't the only method jQuery offers for dynamically styling web page elements, as the library also provides addClass()...
-
Posted: September 5th, 2011, 10:00pm MDT
3D CSS Text with Zoom Incorporating 3D text into your site is a great way to spruce up its design. This tutorial will show you the steps necessary to creating the 3D effect by stacking various CSS3 text-shadow properties. You will then learn how to make the effect pop out when the cursor is hovered above it by using CSS text transform and transition properties. No JavaScript is used whatsoever. It's all CSS. As an added bonus, the effect degrades gracefully in browsers that are not compatible, such as Internet Explorer. The tutorial's format is ideal because it begins with the simple ...
-
Posted: August 31st, 2011, 10:00pm MDT
While all of these things are quite impressive, you're probably wondering if the functionality provided by the new standard extends its arms beyond the mentioned facilities. In reality, CSS3 includes a somewhat underrated gem , called box-sizing , which allows you to control the box model that will be applied to a selected web page element. Put in simpler terms, box-sizing will permit you to specify if the padding assigned to the pertaining element will be added to its overall width and height, or if it won't affect the element's dimensions at all. As usual, the most effective way to grasp...
-
Posted: August 29th, 2011, 10:00pm MDT
jQuery If you are looking for an extremely popular JavaScript library that is used by some of the biggest names around, look no further than jQuery. The library takes the dirty work out of things such as AJAX interactions, animating, event handling, and HTML document traversing to increase efficiency when it comes to web development. With jQuery, you can rely on a library that's compatible across the major browsers, CSS3 compliant, and very lightweight in nature. Just how lightweight is it? Try 31KB in size. The fact that jQuery is widely used and has a strong presence is another plus to ...
-
Posted: August 29th, 2011, 6:00am MDT
SEO Checklist As its name would imply, SEO Checklist is a module that supplies you with a comprehensive checklist to ensure that you have taken care of all of your SEO responsibilities. Since SEO can get a bit tricky for beginners and even those with experience, it's a good idea to have a tool to guide you through the process, and that is exactly what SEO Checklist is. Once you have SEO Checklist up and running, you will be able to have some peace of mind that no stone is left unturned, which should lead to your website having an increased presence on the major search engines such as Bing, G...
-
Posted: August 24th, 2011, 10:00pm MDT
JavaScriptMVC If you are looking for a framework that will help you build quality JavaScript applications that are either medium or large in scope, you can't go wrong with JavaScriptMVC. This open-source framework comes equipped with various tools that stress best practices, convention, and maintainability over configuration. In other words, if you are a developer who wants to do JavaScript in the way it was intended, JavaScriptMVC will take you there. The framework comes with multiple standalone components that really boost its appeal. The StealJS component is a build tool that focuses o...
-
Posted: August 23rd, 2011, 6:00am MDT
While it's fair to admit that the functionality of the text-shadow CSS3 property is pretty remarkable (it allows you to easily decorate text-based web page elements with native shadows), the truth is that this isn't particularly interesting, as most web designers see this ability as the property's expected behavior (after all, that's exactly what it's supposed to do, right?). First impressions, however, tend to be a little misleading and such is the case with text-shadow , as the property can also be used to add multiple shadows to a target selector simply by separating each assignation wit...
-
Posted: August 18th, 2011, 10:00pm MDT
The popularity jQuery has gained in the last few years is for a simple reason: based on the functionality provided by a bunch of intuitive methods, the library allows for the execution of complex tasks, including all sorts of clever DOM traversal/manipulations, AJAX-based processing and the implementation of engaging animation effects (among others). When analyzed from that standpoint, it seems overkill to use the library for doing common and trivial things, such as dynamically assigning styles to one or multiple HTML elements, right? After all, that's why CSS was created in the first place! ...
-
Posted: August 16th, 2011, 10:00pm MDT
Drupal SEO Tools Are you looking for a Drupal SEO module that integrates various SEO tools into your site to help you get the ranking your desire? If so, take a strong look at Drupal SEO Tools. It requires several modules to run, which are listed on the main download page. To make the installation process easier, Drupal SEO Tools comes with a setup wizard that will guide you step by step. It also details the best configurations of the required modules to ensure that the best results. Once you have everything up and running, you'll have the luxury of using Drupal SEO Tools as a dashboard fo...
-
Posted: August 16th, 2011, 6:00am MDT
Considering the momentum it has gained in the last few months, CSS3 has undeniably shaken the calm waters of traditional web design - and with good reason: the new standard sports a set of brand new properties that allow you to perform all manner of clever tasks on web pages, ranging from rendering native, imageless rounded corners and appealing gradients, to dropping stylish shadows around boxes and text; the list goes on and on. However, the web's fast changing and dynamic nature is a double-edged sword. While it's fair to admit that many of these features quickly found a privileged place in...
-
Posted: August 14th, 2011, 10:00pm MDT
Build a Physics-Based Platformer in Under an Hour Here's a tutorial that teaches you how to create a game very quickly by using the World Construction Kit. You will see a host of steps that result in a basic physics-based platformer game. You'll learn how to create coins, add enemies and suspended/static platforms, how to implement a scoring system, and more. The end result is really more of a prototype of a platformer than a full-fledged game. Regardless, the steps that are shown can give you some solid knowledge in the world of creating Flash games. Link:
[active.tutsplus.com]
-
Posted: August 11th, 2011, 10:00pm MDT
Forgetting to Include Your Doctype If you want the different web browsers to render your code properly, you must remember to declare your Doctype in the first line of your document. Doing so helps to identify the specific HTML version you are using, which will make your site appear in the way in which it was intended. Declaring Doctype can get frustrating if it is not in the proper format. To get the desired effect, your Doctype declaration must be correct in terms of spelling and case. If you are having difficulty, you should look for a list of recommended Doctype declarations that will g...
-
Posted: August 10th, 2011, 9:30am MDT
Giving It Some Style Our events application could use a little varnish. We'll update the layout, apply a style sheet, and add a helper that will make it possible to highlight the tab the user has selected. Updating the Layout Let's update the main layout and add in some style hooks that we can target via CSS, as shown in Listing 6-32. Listing 6-32. Updated app/views/layouts/application.rhtml lt;html gt; lt;head gt; lt;title gt;Events lt;/title gt; lt;meta
[http-equiv=] quot;Content-Type quot; content= quot;text/html; charset=utf-8 quot; / gt; lt;%= stylesheet_link_tag 'application' % ...
-
Posted: August 8th, 2011, 10:00pm MDT
HeadSpace2 SEO In our first list of the top WordPress plugins for SEO, we had a few all-in-one solutions. HeadSpace2 SEO is another, as it gives you all-in-one capabilities to manage your site's meta-data. As you'd expect, the plugin's distinction as an all-in-one SEO solution means it comes equipped with a ton of features. You can configure your site's meta-data for posts, pages, categories, the home page, the 404 page, and more. You can define tags/keywords, page titles, descriptions, custom themes, custom plugins, etc. The flexibility of HeadSpace2 doesn't stop there, though, as you c...
-
Posted: August 7th, 2011, 10:00pm MDT
If you're planning to use a JavaScript syntax highlighter to give your online code samples a more readable and refreshing touch, and are still uncertain which code highlighter you should use, this tutorial (and its previous parts) should help make your decision a whole lot easier. If you've been a loyal reader and went through the two installments that precede this one, at this stage you're familiar with the features offered by some of the aforementioned libraries, as in the course of those articles I took an in-depth look at four powerful contenders in the field, including Alex Gorbatchev's S...
-
Posted: August 2nd, 2011, 10:00pm MDT
Escaping HTML in Templates You should always escape any HTML before displaying it in your views to prevent malicious users from injecting arbitrary HTML into your pages (which is how cross-site scripting attacks are often carried out). The rule of thumb is that whenever you have data that is provided by the user, you can't trust it blindly. You need to escape it. This includes your model attributes, as well as parameters. Fortunately, escaping is easy to do. While not technically a Rails helper, ERb provides a utility method to escape entities in HTML called escape_html . It's aliased to h f...
-
Posted: August 1st, 2011, 10:00pm MDT
Simplify Your Design to Reduce HTTP Requests If you have a page that is loaded with Flash, scripts, images, and the like, it will probably take a lot more time to render properly than it should. It's even truer for first time visitors who are accessing your site with an empty cache. The more components you have, the more HTTP requests there will be. To make your web page faster, you'll need to make its design as simple as possible and keep the HTTP requests at a minimum. Now, you are probably thinking that simplifying your page means removing all the great content that attracts your visitor...
-
Posted: July 30th, 2011, 10:00pm MDT
If you had the opportunity to look at the introductory part of this tutorial
[www.devarticles.com] you should have a pretty clear idea of the advantages offered by some of the most popular JavaScript syntax highlighters available nowadays, as I took an in-depth look at two important contenders in the field: namely the already classic SyntaxHighlighter
[alexgorbatchev.com] and SHJS
[shjs.sourceforge.net).] To be frank, both libraries do a great job when it comes to highlighting online code snippets, ...
-
Posted: July 28th, 2011, 6:30am MDT
Applying Filters to Controllers You apply filters using a declarative syntax. In this case, we want to check that a user is authenticated before we process a protected action, so we'll use the before_filter . Add the filter to the events controller, just inside the class body, as shown in Listing 6-22. Listing 6-22. Before Filter Added in app/controllers/events_controller.rb class EventsController lt; ApplicationController before_filter :authenticate, :except = gt; [:index, :show] #... end Notice how we're able to selectively apply the filter to specific actions. Here, we want every acti...
-
Posted: July 27th, 2011, 6:30am MDT
Designing Modern Web Forms with HTML5 and CSS3 This tutorial teaches you how to create a modern web form that could fit in easily with any type of website. Before you get into the tutorial, the author states in the comments section that the tutorial covers just the markup, design, and infield labels. In other words, you will need server-side code via PHP or another language to actually put the form into action. With that out of the way, the strength of the tutorial is in the way that it teaches various little nuances that you can add to your forms. The code is designed for advanced brows...
-
Posted: July 26th, 2011, 6:30am MDT
As usual, the most effective way to demonstrate how to do anything is with some concrete and functional code samples. With that said, in this tutorial I'll be showing you how to combine the functionality of some of the most popular properties included with the new CSS specification - such as text-shadow , box-shadow , gradient and border-radius - in order to build a stylish, imageless button, which you'll be able to customize at will. Taking the First Step: Building a Sample HTML Form Considering that my purpose here is to illustrate how easy it is to build sleek buttons by using some of ...
-
Posted: July 25th, 2011, 6:30am MDT
Being one of the most valuable allies of technical-minded bloggers and ezines around the web (like our own Developer Shed network), JavaScript syntax highlighters are powerful tools, whose ability is focused on turning a bunch of dull and arid code snippets into aesthetically pleasing and more readable pieces that keep visitors coming back for more. While there's nothing inherently wrong with this approach, it's fair to say that it can become cumbersome and inefficient, especially when it comes to displaying code fragments that scope an extensive number of languages and technologies. So, if y...
-
Posted: March 12th, 2007, 2:00pm MDT
In my previous article I discussed some of the basics of JSON the JavaScript Object Notation. It is an object literal notation well suited for data exchange. The object and arrays of JSON are very similar to real world data representation in many programming languages and this makes it a natural competitor with the more ubiquitous XML....
Now you can afford a cutting edge Dedicated Server The latest spec servers instantly deplayed, hosted securely in our data centers, private LANs, remote kvm. All with no bandwidth bills - each server has its own dedicated pipe - all from as little as £49 per month. Instant Signup
-
Posted: March 7th, 2007, 2:00pm MST
In part one of this series we looked at the HTML and CSS needed to construct the date-picker popup and style it accordingly. In this part we are going to write the JavaScript that is going to make it work. This is going to be accomplished with a mixture of plain JavaScript with some DOM retrieval and manipulation....
Now you can afford a cutting edge Dedicated Server The latest spec servers instantly deplayed, hosted securely in our data centers, private LANs, remote kvm. All with no bandwidth bills - each server has its own dedicated pipe - all from as little as £49 per month. Instant Signup
-
Posted: March 6th, 2007, 2:29pm MST
Are you one of those web developers who wants to learn how to quickly build robust AJAX-driven applications using the Prototype JavaScript library Then welcome to the final tutorial of the series Building a web site indexing application with Prototype. Comprised of three articles this series shows you how to use Prototype s strong capabilities to create an expansible AJAX-based application that indexes the data for different web sites including their URLs titles and brief descriptions....
Now you can afford a cutting edge Dedicated Server The latest spec servers instantly deplayed, hosted securely in our data centers, private LANs, remote kvm. All with no bandwidth bills - each server has its own dedicated pipe - all from as little as £49 per month. Instant Signup
-
Posted: February 27th, 2007, 2:00pm MST
One of the best ways to take advantage of the numerous features that come packaged with the Prototype JavaScript library is by using it for developing a real world application. So welcome to the second installment of the series Building a web site indexing application with Prototype. If you re interested in utilizing this robust package for creating an extensible system that indexes web site data this series will offer you a straightforward guide on how to do this with minor hassles....
Now you can afford a cutting edge Dedicated Server The latest spec servers instantly deplayed, hosted securely in our data centers, private LANs, remote kvm. All with no bandwidth bills - each server has its own dedicated pipe - all from as little as £49 per month. Instant Signup
-
Posted: February 26th, 2007, 2:00pm MST
If you re a web designer who s looking for an approach to reduce the number of requests made by the browser then you should examine the vast terrain of CSS sprites. Welcome to the final part of the series Using CSS Sprites. This three-part series shows you how to incorporate them into real world applications and provides you with a respectable set of practical examples on the topic....
Now you can afford a cutting edge Dedicated Server The latest spec servers instantly deplayed, hosted securely in our data centers, private LANs, remote kvm. All with no bandwidth bills - each server has its own dedicated pipe - all from as little as £49 per month. Instant Signup
-
Posted: February 21st, 2007, 2:00pm MST
Getting visitors to fill out certain parts of forms can be tricky especially when the item you want them to fill out can be rendered in many different formats. Consider how many different ways one can write a date for instance. In this first part of a two-part article you will learn how to build a date picker that minimizes this headache....
Now you can afford a cutting edge Dedicated Server The latest spec servers instantly deplayed, hosted securely in our data centers, private LANs, remote kvm. All with no bandwidth bills - each server has its own dedicated pipe - all from as little as £49 per month. Instant Signup