There is no doubt that the most intriguing new HTML5 tag is the canvas tag. Despite all controversial web discussions concerning this element it is obvious that canvas symbolizes the “semantic” web concept. Its aim is to simplify the process of rendering the 2D shapes and bitmap images. You may have seen a few “canvas” demos that already became viral on the web. As the result many developers and web designers have noticed that using the canvas tag is really effective and it saves much time.
Recent big news from the Google I/O conference showed us that the main market players admit HTML5 as a main perspective for the further development. Actually we hope that it will disctact us from all these media wars and that the social media world will expand a more useful information about new and interesting achievements of HTML5.
Today we have compiled some interesting applications and sketching tools that are build with the help of Java scripts and the “canvas” tag. These examples are only experiments but they’re definitely worth checking out. (Don’t forget that it would be better to browse all these application via Chrome or the latest versions of Opera and Firefox).
1. Spirograph
Spirograph is a geometric drawing toy that produces mathematical curves of the variety technically known as the hypotrochoids and epitrochoids (via WikiPedia). This example allows you to play with all kinds of parameters including size of mobile circle, static circle and so on.
* * *
2. Bomomo
Inspiring tool that will make you feel like a real artist even if you are not. Great painting application with original patterns and interesting options.
* * *
This article is composed by Andy Marcus, TemplateMonster lead product manager and the head of our R&D Dept.
If you ask yourself questions like that, you probably should continue reading this article, otherwise just go to our eCommerce templates section.
As I made templates for and worked with almost every popular shopping cart available it is going to be hard for me to stay unbiased during this review, obviously I do have my own favorite platform, but still I will try to keep the info fair.
Lets begin with some history. In the beginning there was Harald Ponce de Leon, who as a project leader started an open source e-сommerce solution osCommerce™. It was the first largest Open Source shopping cart available back in 2000, the forefather of them all. After a while the team that worked on osCommerce project has split into CRE Loaded™, Zen Cart™ and the original osCommerce™, therefore you will find much in common between those three. Each team was after perfection of their product, with their own approach, but the core code was pretty much the same. If you look inside you will find same variables, same functions in all three of them. Back in those times it was the revolution. Although osCommerce was the foundation it had neither the template system nor the ability to control the original layout by the end user, Zen Cart and CRE Loaded had a pretty nice functionality along with other things.
Actually CRE Loaded and Zen Cart were the response to the demands of a rapidly growing osCommmerce community, each of them has met the needs of their users in a unique way. For instance Zen Cart has a slogan saying “the art of e-commerce” meaning that Zen Cart is the art, and indeed back then it was nicely put together with their override system that gives the coder an opportunity to add and change functionality without messing and changing the original code. CRE Loaded contained the best and most useful contributions made for osCommerce, they had 3 versions of the cart, the community edition and 2 commercial editions with additional functionality. The code was partly object oriented and partly procedural (osCommerce’s boxes were class-based, but the rest was procedural). OsCommerce (and it’s derivatives) ruled the universe of free e-commerce solutions up until 2004.
Google’s third annual I/O conference has brought plenty of controversial news and we are sure that Internet audience will buzz about all this info for a very long time to come. Against the background all that high-flown announcements about new video codec, Google Wave open-sourcing, Chrome app store, Android 2.2 release, the presentation of the HTML5 add-on for the Dreamweaver CS5 has been kind of lost in the media sphere. And no one calls this extension revolutionary or controversial. Furthermore Dreamweaver is one of the best pieces of software that is popular among the developers from all over the world and it is hard to find other program that will beat it by its features and reputation. So we really think that the release of this pack will bring more fans to this software.
To tell you the truth this great news proves that Adobe looks out for a new way to resolve the problem that becomes really annoying for many web users – how to convince their clients (and Apple of course) that they produce stuff that is open for all formats (remember that someone called their Flash “closed system”?). It seems that HTML5 Extension for Dreamweaver CS5 is a nice move from the Adobe team to bring the “epic battle” to the new level by scoring points from the web developer audience by releasing this HTML5 pack.
What’s inside the box?
HTML5 extension to Dreamweaver CS5 will enable developers to “more easily create, deliver and optimize compelling content” across a wide range of platforms. The main features are:
- code hinting for HTML5 and CSS3, so now users can easily use the new HTML5 tags;
- developing content on a large a number of screens – from smartphones, to desktop computers;
- new CSS3 capabilities – users can also more easily design the multi-screen Web pages;
- WebKit improvements for Design View and Live View rendering;
- audio and video tags that allow to play media content directly via web browser (without any external plug-in or player) but this requires QuickTime installation;;
- HTML5 pack is totally free and you can easily download it right now at the AdobeLabs official website;
Jorge Taylor, Principal Scientist with the Design and Web group at Adobe, on Dreamweaver CS5 HTML5 Pack Extension.
They know what they’re doing and doing it right
Yes, as we have said before it is all about developers – and Adobe showed us that even if their dearest son – the Flash – will get lost in the desert of choices and intrigues from evil rivals, they won’t lose the war because developers will use their software to create websites and web design products with the help of their software. Evolution is a great way to keep your business on track and Adobe demonstrates us that there are many original solutions that will amaze your enemies and surprise your clients. Way to go!
If you ever struggled with AfterEffects and need to brush up your skills, than here is the list of highly effective video tutorials to get started with. They will guide you through advanced and challenging aspects of massively popular AfterEffects multimedia application. Plus you’ll be able to master this software to create compelling effects and deliver unmatched creative power for film and broadcast, video productions or animated web graphics.
Get into the multimedia field with truly professional standards. To begin getting the very most out of powerful AfterEffects please review the sections below to view helpful video tutorials. With thorough understanding they provide, you will be able to easily solve some of the trickier design aspects. Feel free to experiment and enjoy the new AfterEffects masterpieces.
Glass Orbs
* * *
Knowing Earth
* * *
Template Monster holds some news for you – our partners from VideoSmash.com have recently launched the awesome new Countdown Video Intro Pack which basically embraces 10 countdown clock videos, each just several seconds long. This means they could be seamlessly applied to enliven the intros of news programs, movie trailers or website intro animations etc.
In fact, there are multiple media needs you can use this pack for. Likewise on the score of their premium technical quality – these timer videos are equipped with an excellent sound track and are therewith available in three color schemes each. Additionally, these countdown video loops are done in the HD 720p quality (that’s a 1280×720 resolution) and are encoded mostly in the QuickTime JPEG codec (just a couple of them are in QuickTime H.264, no alpha channel).
Our customers are as always in advantageous position: within a limited-time offer this Countdown Video Intro Pack is exclusively available for them 50% cheaper (that’s in fact $15 instead of the $30 full price offered at VideoSmash.com). So hurry up to browse the collection of TemplateMonster products and power up your animations by getting yourself a nice Countdown Video Intro Pack!
Inspiration comes in many forms, for this week’s roundup TemplateMonster gathered a list of 40 awesome motion graphics and demo reels.
Showreels are made by motion graphic companies or individual designers to give an overview of their works and to show off their portfolios. Using AfterEffects reels in motion can bring the impossible through impressive visual effects and high-end graphic production. Demo reels in fact create stunning graphics for the new media: it makes you feel as if you are making a journey through the artist’s portfolio and animation works.
Now we’re excited to kick off this series with a set of visually stunning motion graphics videos that will grab your attention to leave you speechless.
Horsform Showreel
* * *
Rokkaboy Showreel
* * *
The iPad. The killer word coming off everyone’s lips lately… This is the newest mobile computing device (a.k.a. Apple Tablet) that claims to revolutionize how we consume web content. We must admit that this tablet has huge potential, so many people already want their website to be perfectly optimized for this recently unveiled gadget.
What do they need to do when designing pages to perform on this interesting Apple invention? For general design principles, we’ve rounded up a few options below that will give a little guidance. Now’s the time to keep your eyes open for the iPad-optimized design tips:
Specific Features of iPad Display
iPad has the high-resolution, 9.7-inch (screen resolution of 1024×768 pixels) LED-backlit IPS touch-sensitive screen which is remarkably vivid for web browsing, media consumption, gaming etc. Its tactile and luscious interface invites amazing close-ups putting the objects almost literally in the hands of the gadget user.
- Landscape and Portrait Mode Styling
The iPad allows for both horizontal and vertical style viewing. This will pose some interesting possibilities for web designers to incorporate features that wouldn’t have worked before. The point is that the styling has completely changed when the orientation changes, and for the designers this means two completely different layouts for which to design.
The fact is that the iPad marks the return to magazine formats introducing the web’s first truly vertical screen orientation. While computer monitors have always had a landscape styling, now we can see a lot of web content consumption in a vertical mode which will result in new web designs and web information architecture.
Since the portrait mode encourages vertical scanning and the user can now see the entire page without having to scroll, web pages will no longer be viewed one half at a time and the designers can finally design pages that are meant to be scanned and read all at one time. This vertically-inclined resolution means that versions of the websites for the iPad will get narrower and taller. The landscape mode in its own way makes it very easy to browse sites that display content horizontally. It’s for this specific reason that more of an emphasis is placed on smart and fluid layouts that can easily work both ways adapting the content according to the screen resolution.
You know browsers are like your web glasses because it is browsers that you see the web through. Some people still like good old classic browsers, other are going crazy about the new glamorous ones. And despite the variety of choices and difference of worldviews and opinions we can claim that Android fans have a pretty good choice of web glasses for sure.
What are the most important features for a successful mobile web browser? Of course it’s got to be fast, multifunctional, light-weight, well-promoted, good-looking and don’t forget to offer something that others don’t have. The other way is it has to be a really famous web browser with superb marketing history and millions of fans around the world that do like mobile web surfing. Don’t forget to check out the new post from friends called Best Android Browsers – Power of Choice.
Anyways the point is that Android OS has a very wide range of mobile browsers (not to mention the Browser – a default software that you can use on Android) and most of these Android browsers are worth your attention. It is hard to say that all of our today’s items have equal features but who said that life has to be that easy for mobile software vendors?
Fennec (aka Mobile Firefox)
Price: Free
Finally! Firefox is available for Android users and it’s a great news. We all know how good this software is but for now we can only state that present Fennec version is in the “pre-alpha” stage and there is a lot of boundaries and gaps. Mozilla developer Vladimir Vukicevic says:
- We’ve only really tested this on the Motorola Droid and the Nexus One.
- It will likely not eat your phone, but bugs might cause your phone to stop responding, requiring a reboot.
- Memory usage of this build isn’t great – in many ways it’s a debug build, and we haven’t really done a lot of optimization yet.This could cause some problems with large pages, especially on low memory devices like the Droid.
- You’ll see the app exit and relaunch on first start, as well as on add-on installs; this is a quirk of our install process, and we’re working to get rid of it.
- You can’t open links from other apps using Fennec; we should have this for the next build.
- This build requires Android 2.0 or above, and likely an OpenGL ES 2.0 capable device.
- Edit: This build must be installed to internal memory, not to a SD card.
Despite all those sad limitations (that we hope will soon be fixed) Fennec still surprises with one awesome function – you can synchronize your desktop Firefox with Fennec with the help of the add-on called “Weave”. Also Mobile Firefox combines address bar with search bar (similar to Chrome). Anyways this software promises to be really great and we can’t wait to try alpha.
* * *
Accessing the web through mobile handheld devices is a usual practice these days. It’s apparent that people hooked to the Internet via their phones are on the huge rise. Furthermore, lots of consumer-focused companies have already realized how promising the mobile platform is and have by now equipped themselves with a mobile-friendly alternatives to their primary websites so that they will as well provide an accessible user experience on mobile devices.
In fact mobile web browsing is not a passing fad, it has actually become an absolute necessity, even the new Internet standard. So if you haven’t yet set up your own mobile site, we’ll today focus on how you can create a mobile version of your site running through various important options and basic techniques you can employ to make your mobile site work successfully. Besides, you might be interested to explore the most conspicuous mobile web design trends for 2011 and find some graphic approaches to consider for your custom mobile designs.
Now having got some of the theory out of the way, let’s turn our attention to more practical matters. There is a special procedure involved in designing a mobile website. The easiest way to build your mobile site is to modify your existing website to make it compatible for mobile handsets. If you decide to do so, expect that there will be big changes in terms of layout, design and construction. Here are some principles you should take note of before proceeding to build one of your own:
1. Layout
It can be time consuming to browse through a mobile site, so remember to put all of the most important information you want mobile users to see on the top of the page. And don’t forget to include your company logo being customized for a mobile site. Make sure to minimize left/right navigation, which is difficult on a phone, and instead arrange your content in a single column layout. Also you should minimize the use of tables, but if you do need to incorporate them, use no more than 2 columns, and avoid row and column merging.
2. Content
You should make sure that the information on your website is easy to read and navigate, and doesn’t take the visitors much to figure out, since they’re probably on the go while looking at your mobile site. Having finally selected what part of the content should be displayed on mobile, tailor your site menu adjusting text to avoid zooming. As for the typography used to render the content, consider using headings to control font sizing.
3. Coding
Read the rest of this entry »
First of all we want to say that Safari is indeed a great browser for iPhone (everybody knows that) and we are not going to argue with this fact. Instead we thought that we’ll just let you know of the alternatives – sometimes we all need them. And you know why? Because it is a really useful experience to compare and make your own conclusions. Of course current situation on the mobile browsers market still reminds of the battlefield where international software armies fight for the hearts of the clients.
iPhone audience is one the most whimsical ones and there is nothing surprising in that because this a style of this product – to give the clients more than what they may want. Nevertheless there are still some gaps in highlighting useful iPhone software (duh! sounds weird, doesn’t it? To tell you the truth sometimes it looks like iPhone is more popular that the Internet itself). So today we are going to try to fill those gaps.
1. Opera Mini
The main rival of the Safari that has caused a media hurricane is Opera Mini mobile browser. It is perfect for slow connections and has such advantages as data savings (compress up to 90% of data traffic), speed dial (get to your favourite web sites with a single tap), user-friendly tabs (all your web pages are perfectly seen and you can quickly browse trough them).
Price: Free
* * *
2. Aquari
This browser’s main feature is a security because this application is protected with an optional 4-digit password. Also there is an option for guest surfing – you have to use insert 1234 and this browser can be used in the guest mode. Aquari automatically cleans up all sessions data so you don’t have to worry about the privacy.
Price: Free
* * *
Featured Templates
Advertisement
Follow TemplateMonster Updates
Rss Feed: