Paint 4 Kids is a Windows Store app, specifically designed for kids. A simple app for coloring and drawing. You can read of the consumer’s features directly from the Windows Store site, where you can also see some screen shots. For this article, you can simply think of an app that has several drawings and you can interact with them.
From a technical perspective, it is entirely built using standard web technologies, like HTML, CSS, JavaScript and SVG. Consider an important aspect here: with Windows 8, we are writing an app reusing our web skill and we are developing for the web platform, using the underlying HTML5 support of the Internet Explorer 10 rendering engine. So one immediate benefit is that we do not have to test and support all the different browsers versions and do not have to use some polyfills to emulate the new API features in old browsers. We can use the best of the web platform and use some specific API of Windows 8 directly in JavaScript.
This article is about to discuss the use of Scalable Vector Graphics (SVG) in Paint 4 Kids, starting from some requirements of the project, going to address them and some pitfalls using SVG. I hope that some of these considerations could apply to your apps as well.
Requirements and why using SVG
Windows Store app give you a great opportunity in terms of markets where you can distribute and sell your apps and in terms of devices where your app can run. Think that your app can be used on devices with different screen sizes, different screen resolutions and pixel densities. This must be considered and looking through this article gives you a very good technical understanding on how to scale your app to different screens and how to test your app using the Windows Simulator.
One of the requirement is that we want to have a single drawing that will show well at different resolutions. We ended to use SVG that is a vector image format for two-dimensional graphics. Our approach is to create a drawing at a specific resolution 2560×1440, see later for details, scaling down to the current user’s resolution. Another advantage is that is very simple and fast to fill a path with a color in SVG, that it is one of the main feature of the app. When a user tap the screen it is simple to intercept the corresponding portion of the drawing and fill the path with a specific color.
Read the rest of this entry »
Spoiler Alert is a happy little jQuery plugin to hide spoilers on your site. Don’t spoil it! Hide anything with a bit of blur. Hint on mouseover. Reveal on click.
To make your site spoiler free, simply include spoiler.js, then, add this somewhere: $(‘spoiler, .spoiler’).spoilerAlert(). To control the maximum and partial blurs, you can pass arguments to the function. Spoiler Alert has been tested in Chrome, Firefox, Safari and Mobile Safari.
Requirements: jQuery Framework
Demo: http://joshbuddy.github.com/spoiler-alert/
License: MIT License
Thank you for all of the participants of Giveaway 3x 123RF’s 30 Days Subscription Plan. We are happy to announce the following winners. Congratulations. You will receive an email from 123RF.com with instructions of getting your prize shortly.
1. Vlad Anghene
2. pepe1969
3. Mark Fischoff
WebAppers will continue giving away some really nice web development tools and resources to our readers. Please feel free to suggest what you would like for the next Giveaway under this post. Thank you.
There’s no doubt about it. Wherever developers look and whoever they talk to, mobile is at the top of the list. Talk to a C-level executive, and the conversation turns to mobile, and the question “How do I get me some of that?†comes up. Talk to other developers, and they tell you they’re targeting mobile devices. Mobile has become a big deal as smartphones have taken hold in the consumer marketplace.
In the years leading up to the current focus on mobile applications and devices, Web developers have been adding more and more client-side functionality to their applications. You can see this in the use of client-side JavaScript libraries like jQuery.
With the growth of the market for mobile devices, the ability to create applications that run across platforms is very important for developers and for businesses that are trying to keep their expenses in check. There are a set of applications, mostly in the area of content consumption (think Amazon.com), that run well in a mobile Web browser. Unfortunately, there are differences between Web browsers on various mobile devices. The goal of the recently introduced jQuery Mobile (jQM) library is to provide cross-browser support to allow developers to build applications that can run across the various mobile Web browsers and provide the same—or at least a very similar—user interface.
The jQuery Mobile library was introduced in an alpha release in the fall of 2010 and released to manufacturing in November 2011. At the time of this writing, the current version of jQuery Mobile is 1.1.1. By the time you read this, jQuery Mobile will almost certainly have reached version 1.2.0. The library has been embraced by Microsoft, Adobe and other companies for mobile Web development. In August 2011, jQM had 32 percent market share compared with other mobile JavaScript frameworks such as iWebKit and jQTouch. This market share is impressive given that it started from zero little more than 12 months ago, and the 1.0 release is the first officially supported release. Read the rest of this entry »
Simple Grid was created for developers who need a barebones grid. Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile. The twelve column structure of Simple Grid easily divides into columns of two, three, four or six, giving developers numerous layout possibilities.
Requirements: –
Demo: http://thisisdallas.github.com/Simple-Grid/
License: License Free
Sure you’ve got the ideas, but you don’t have any programming experience, and you do not know how to setup a basic blog on WordPress. Now you can now get yourself up and running quickly thanks to Ultimatum. This robust drag-and-drop template builder works with WordPress to create limitless layouts for your site. No need to ever hunt down another template again. With Ultimatum you can easily just create a new one.
The Ultimatum Developer’s Edition gives you everything you need to make your mark on the Internet. Besides a true drag-and-drop layout builder, you’ll be able to use unlimited templates on your sites, access a powerful Style Editor for countless CSS options, as well as integrate unlimited fonts, forms, slideshows and SEO throughout all of your sites.
Best of all? You can grab the full featured Ultimatum Developer’s Edition for just $57 right now! That’s more than 50% off the standard price of $125, or if you’re just looking for a more basic Starter License for a single site, it’ll run you just $35, instead of the normal $65.
Every designer should have designed a corporate identity at some point in his career. In fact brand identity building is an essential part of design. Every company, agency, firm, TV Chanel soccer team and even freelancers need a logo and a corporate identity. These identities usually consist of Letterheads, business cards, envelopes, CD cover, CD box, bag, pen, pencil, calendar and more.
Corporate Identity Photoshop Mock-up helps designers to present their identity design in a modern and pretty way for their clients or for presentation in their portfolios. This mockup is totally made with photoshop and not based on any real photo. This is vector based and build with vector shapes, this makes it resizable without quality loss.
Requirements: –
Demo: http://www.blugraphic.com/2013/03/08/blugraphic/
License: License Free
Bolt is a tool for Content Management, which strives to be as simple and straightforward as possible. It is quick to set up, easy to configure, uses elegant templates, and above all: It’s a joy to use. Bolt is created using modern open source libraries, and is best suited to build sites in HTML5 with modern markup.
Bolt is written in PHP, and uses either SQLite, MySQL or PostgreSQL as a database. It’s built upon the Silex framework together with a number of Symfony components and other libraries. Bolt is released under the open source MIT-license.
Requirements: PHP Framework
Demo: http://bolt.cm/
License: MIT License
Today’s front-end developers don’t just need to understand how to write CSS, we need to know how to write it efficiently. And what “efficiently†means can depend on your project and environment. Perhaps you have a team with several members working in the CSS and you need an efficient way to work together. Or maybe you have a huge enterprise site and you need your CSS optimized for speed. You could even be working with a legacy system that restricts access to HTML, which means you need efficient selectors to effectively style elements without ids or classes. You might even face all these situations and more.
Whatever your goals for CSS are, the best way to reach them is to know your options, and that means understanding all the selectors available to you. Most of us are already familiar with id and class selectors, and I introduced you to the beauty of attribute selectors in “Understanding CSS Selectors.†But there’s so much more.
In this two-part series, I’ll look at the new selectors in CSS3, starting with structural pseudo-classes.
What’s a Pseudo-Class?
CSS pseudo-classes target elements that can’t be targeted with combinators or simple selectors like id or class. You use pseudo-classes to select elements based on their attributes, states, and relative position. For example, you are probably already familiar with pseudo-classes for link states: Read the rest of this entry »
Flat UI Free is made on the basis of Twitter Bootstrap in a stunning flat-style, and the kit also includes a PSD version for designers. Flat UI Free contains many basic and complex components which are great for designers to have at hand: buttons, inputs, button groups, selects, checkboxes and radio-buttons, tags, menus, progress bars and sliders, navigation elements and more.
Colored, stylish icons can easily be modified and used in a wide variety of projects, as they contain original layers. Glyphs are also available in psd, html/css and svg formats. The kit also includes color swatches – no worrying over color choices here – with 10 colors that perfectly suit each other. Flat UI Free is made using the Lato typeface, which can be downloaded for free.
Requirements: –
Demo: http://designmodo.com/demo/flat-ui/
License: Creative Commons 3.0 License
