This article is the second part to: How to Create a Windows 8 RSS Reader App with HTML5. If you haven’t read it, check it out first.
We’re now going to see how to display the details of each article. We will use for that a transition animation, we will play with the simulator and we will continue to discover Blend to use CSS3 Multi-columns for instance.
Like in the previous article, you’ll find the source code to download at the end of the article.
During this article, we’ll see:
- Step 1: using the simulator
- Step 2: displaying the articles’ details
- Step 3: finishing the design of the detail view with Blend
- Step 4: source code to download and conclusion
Note: this article has been updated on 21/08/2012 to implement the changes in the UI & in the code between Windows 8 Release Preview and RTM. In a general manner, if you need to migrate your application from RP, you should read this document: breaking changes document. In our case, there was 0 impact between RP & RTM here. Read the rest of this entry »
This article recently appeared on the Atari Arcade Developer Center, a collaboration by the teams at gskinner.com , Atari and Internet Explorer. It is authorized to publish on WebAppers.
Today, developing HTML5 games on the web is hardly simple. Most games on the web are still built with plug-ins like Flash because developers don’t have the tools that make game development simple and cost-effective.
Most HTML5 games are available in isolation so the hardware and browser can be dedicated to gameplay. But that’s not how we envisioned a modern arcade – where users could gather, play the games, challenge their friends to high-score dominance, and earn achievements. We had to rethink how we approached game development with a common set of tools.
With Atari Arcade, that game is changing. This site was designed completely in HTML5 for Internet Explorer 10 and Windows 8 touch-enabled devices – although it works great in all modern browsers. In this guide, we’ll quickly get you up and running with your own HTML5 game. The Atari Arcade SDK with CreateJS is one of the first cross-browser HTML5 game development platforms that allow you to take advantage of multi-touch capabilities more easily. The Atari Arcade SDK is just one of many options you should consider. All of the practices we share can be used with other gaming platforms in modern browsers.
- Steps to define and build your game
- An overview of the SDK’s goals and approaches
- Sample code showing integration
- Adding flair and/or pizazz
- Steps to test, optimize, and deploy your game
Read the rest of this entry »
A modern and easy to use Admin User Interface is the key to success of web applications. A custom made web admin user interface usually cost you a fortune.
Due to the popularity of 20 Professional Web Admin Templates we have published a year go, we have hand picked the following 10 New Professionally Designed Admin Templates on ThemeForest. You may find them useful when designing your own web application. All of them are professionally designed, and selling at a very low price.
1) Supr Responsive Admin Template
Supr is a full admin skin based on popular Twitter Bootstrap framework. This template is designed to help you build the site. Administration without losing valuable time. Template contains all the important functions which must have one backend system.
2) Aquincum Responsive Admin Template
Aquincum – a new premium admin skin with lots of custom elements, 35+ plugins and very flexible content structure. It has 3 columns liquid structure with 3 level navigation and 2 level sidebar. Available 10 main backgrounds, compatible with Bootstrap 2.0.3 and latest jquery versions.
3) Zice Admin Colorful Admin Templates
Zice Admin is Colorful Admin theme, includes dashboard, form, full option gallery, graph presentation, file management, calender, user interface, map & location, error page, 200+ icon,Theme PSD File and documentation for admin management. It is colorful style effect and design templates for easy to use
Read the rest of this entry »
jQuery File Upload is a File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. It supports cross-domain, chunked and resumable file uploads and client-side image resizing. It also works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
The jQuery UI widget factory is a requirement for the basic File Upload plugin, but very lightweight without any other dependencies. The User Interface is built with Twitter’s Bootstrap Toolkit. This enables a CSS based, responsive layout and fancy transition effects on modern browsers. The demo also includes the Bootstrap Image Gallery Plugin. Both of these components are optional and not required.
Requirements: jQuery Framework
Demo: http://blueimp.github.com/jQuery-File-Upload/
License: MIT License
Zoomooz.js is an easy-to-use jQuery plugin for making any web page element zoom. You can easily add the zoom effect by adding the class “zoomTarget” on any HTML elements. The zoom can be reset by clicking the body. It has been tested on Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera and Chrome.
However, it does not work with older version of IE. And it requires a separate css file. Transforming elements with text content in Opera is buggy as well.
Requirements: jQuery Framework
Demo: http://janne.aukia.com/zoomooz/
License: MIT, GPL License
Vegas Background jQuery plugin lets you add beautiful fullscreen backgrounds to your webpages. It even allows Slideshows. Slideshows of different backgrounds, transition and callbacks can be easily set up.
Most of the time, backgrounds are stretched a lot to fit big screens. An overlay with a texture can be added to mask the image degradation effects. It also adds a stylish look to your backgrounds. You can easily add overlay pattern to your backgrounds with CSS.
Requirements: jQuery Framework
Demo: http://vegas.jaysalvat.com//
License: MIT, GPL License
“Advertising generally works to reinforce consumer trends rather than initiating themâ€
This quote becomes quite contradictory in its own terms when it comes to the web designing world. Trends hold a lot of importance when when it comes to incorporating any structure, layout, design, or even a single graphic to a website.
Technology changes with each click of the mouse. Every day, at every single click, a new trend or technology emerges, which changes web design trends. It undergoes a continuous and a very fast pace.
The web world of designs is going more humane, aesthetic, and functional in appeal. As the web industry is fickle, more and more designs trends are on their full pace. Sole web presence doesn’t really work. Incorporation of interactive and attractive designs in a website was, is and will always remain important and thus won’t hamper the new emerging trends.
The best way to communicate any idea in the world of web design is a good and a subtle straight-forward design. And it acts as an icing on the cake, when a website is launched with a creative and unique layouts. It does not stop at having a great content, the entire layout and how it has been structured, decides its readability and influence on the reader. Read the rest of this entry »
Codrops has shared a tutorial about how to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. They will use the jQuery Easing Plugin for a even nicer effect.
However, if you are an IE user you might have noticed that the bubble looks kind of weird without CSS3 support. He has figured that has something to do with the transparency of the image and the animation, but there is no solution yet. Please use Google Chrome to view the demo for now.
Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/BubbleNavigation/
License: License Free
You can find a tool for just about anything online, there’s only one problem: they cost money, and in some cases, lots of it! Many online tools offer a free basic package for anyone to use, but these packages are often strictly limited, rendering these tools practically useless until you stump up the cash. In most cases, however, there are free alternatives available, many of which are very, very good indeed.
Below, you’ll find 15 Best Free Online Tools for Web Design and Development. Rather than narrow our focus, we’ve covered various aspects of the design and development process, to include the admin side of freelancing or running a small business.
No two tools listed below perform the same function; we’ve chosen our favorite tool for doing each job. You’ll find the best free online tool for project management, one for invoicing, one for screen sharing, one for instant messaging, one for mocking up layouts, and much more besides.
1. Redmine
Redmine is a great, free alternative to other pricey project management apps available online. It does pretty much everything you could possibly desire, albeit in a less polished way than some of its more expensive rivals. With Redmine, you can manage a large number of projects simultaneously, defining personal roles and assigning tasks to specific team members if necessary. You can track time and issues, create Gannt charts and calendars, create project wikis and forums, and manage documents and files.
2. Billing Boss
Billing Boss is a fantastic, free invoicing tool, designed especially for small businesses and freelancers, which lets you send an unlimited number of invoices to an unlimited number of clients, quickly and easily. All of your invoices are saved automatically and catalogued in a logical, understandable way. Billing Boss supports multiple currencies, is integrated with PayPal and is mobile friendly. You can even share your account with your bookkeeper or accountant.
3. Yuuguu
Yuuguu is a multi-platform screen-sharing tool, which allows Windows, Mac and Linux users to collaborate. You can quickly initiate an instant messaging session with a client or team member, sharing each others’ screens at the touch of a button. It’s perfect for working together on document presentations or for writing and editing documents in a group.
With Yuuguu, there’s nothing to download at either end, which means you can start sharing and communicating in seconds. The free Yuuguu package includes unlimited use with other Yuuguu users and 100mins/month use with non-Yuuguu users, as well as up to 5 participants in a single session. Read the rest of this entry »
Wouldn’t it be great if there was an easy way to make massive HTML tables with scrollable content and headers that stayed put? Why would you want this? Say you have a table with many rows and columns. Typically what happens when you scroll to the bottom of the table is you’ve forgotten the context of the cell you’re viewing because the table header has scrolled out of view.
Chromaloop did come across a solution that achieves the desired effect by creating two tables and stacking them on top of each other, one for the thead and the other for the tbody. Regardless of the extra markup required, this approach seemed to work the most reliably across all browsers.
So Chromaloop worked out a way to do it that would rely on Jquery to do most of the heavy lifting for the extra HTML markup and generating the correct cell dimensions so that the thead would line up properly with the tbody with dynamic content. The rest would rely on some light CSS markup to define the table dimensions and positioning.
And then, he has taken this a step further by creating Chromatable jQuery Plugin to keep the code contained in one location and allow users to call the “chromatable()” method on any table, or many tables on the same page.
Requirements: jQuery Framework
Demo: http://www.chromaloop.com/posts/chromatable-jquery-plugin
License: License Free
