Create HTML5 Digital Publications with Laker

Laker is a compendium of files, styles and tips for designing digital publications in HTML5. This development guide shall help you solving some of the common problems when designing and building a digital publication with HTML5. It provides you with all information about files, scripts, styles etc. used in Laker.

Laker uses a customized version of the “Baker ebook framework” for producing an iOS app. It basically reads a bunch of HTML files and displays them one after another. Designing pages and adding interactivity is all done in HTML5. That makes it more accessible and cheap to develop, because you do not need any proprietary software.



information is shared by www.ideasroad.com

WhatFont Tool Bookmarklet and Chrome Extension

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.

WhatFont Tool can easily get font information about the text you are hovering on. There is a Bookmarklet and Chrome Extension available for download. I am sure it will make web designer’s life much easier.



information is shared by www.ideasroad.com

Real Time Web Stats & Traffic Analysis with TraceWatch

TraceWatch Real Time Web Stats and Traffic Analysis lets you keep track of the visitors to your website in real time with detailed statistics and deep analysis using an innovative user interface for Free and helps you make your website more effective. It can can be easily installed on any website supporting PHP and MySQL.



information is shared by www.ideasroad.com

A Toolset For Managing Screen Resolutions

With the increasing demand for unique mid-screen devices, it is becoming an even more arduous task to keep all of the device resolutions and screen sizes straight. So Punchcut has packaged up their Toolset For Managing Screen Resolutions, that help them stay current and they are offering it for download.

It contains a collection of Photoshop CS5 marquee-tool presets for common screen resolutions. These cover both fixed-screen resolution sizes and ratios for less common resolutions that fall within standard ratios. It also contains a collection of layered Photoshop CS5 PSDs each providing common devices for comping and design presentations.



information is shared by www.ideasroad.com

39 CSS3 Box Shadows Effect for Google Chrome

Box-shadow is a pretty powerful property in modern browsers. With just six little values, you can make some really neat stuff. How much neat stuff, you ask? The result is 39 Ridiculous Things To Do With CSS3 Box Shadows that, due to whatever issues, can only be viewed in Chrome 11 or better.

You can navigate with the arrow keys, and he has moved the CSS for each object into the object HTML, which should make it easier to look at particular effects.

css3-box-shadow

information is shared by www.ideasroad.com

HTML5 Music & Audio Solutions for jQuery

Speaker is a cross browser Audio solution featuring HTML5. It comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors and two different button sets for light and dark themes. Easy to set up. Just a few lines of Javascript and a quantum CSS.



You can also check out HTML5 Music Portfolio Template with jQuery. The idea is to create an artist portfolio with a discography line up and HTML5 audio player jPlayer. The artist albums are shown using the jCarousel plugged in and the user can add song samples to the play list and reorder the songs by dragging them.



information is shared by www.ideasraod.com

CSS3 Image Gallery with 3D Lightbox Animation

Having been inspired to get ‘Hardboiled’, Tom Kenny has started playing around with a few cool techniques and exploring how to make the content accessible in less capable browsers while giving the best possible experiences to the ones that support the latest advancements in CSS.

He has Create a CSS3 Image Gallery with a 3D Lightbox Animation by taking Benjamin’s CSS lightbox gallery and built upon by adding a few hover effects for the gallery grid itself and a 3D rotation for the lightbox content, all with the use of CSS.



information shared by www.ideasroad.com

Java Technologies to Use in Web Applications

There are too many Java technologies to list in one article, so this article will describe only the ones most frequently used. The number of technologies listed here can appear overwhelming. Keep in mind that you will not need to use them all. In fact, a web application often consists of nothing more than one page created with the JavaServer Pages (JSP) technology. Sometimes you will combine three or more such technologies. No matter how many you end up using, it's good to know what is available to you and how you can use each one in a web application.

Java Servlet API

The Java Servlet API lets you define HTTP-specific classes. A servlet class extends the capabilities of servers that host applications that are accessed by way of a request-response programming model. Although servlets can respond to any type of request, they are commonly used to extend the applications hosted by web servers. For instance, you might use a servlet to get the text input from an online form and print it back to the screen in an HTML page and format, or you might use a different servlet to write the data to a file or database instead. A servlet runs on the server side -- without an application GUI or HTML user interface (UI) of its own. Java Servlet extensions make many web applications possible.

Figure 1 shows clients talking to Java Servlet extensions. Clients may range in complexity from simple HTML forms to sophisticated Java technology-based applets.



The javax.servlet and javax.servlet.http packages provide the classes and interfaces to define servlets. HTML servlet classes extend the javax.servlet.http.HttpServlet abstract class, which provides a framework for handling HTTP protocol.

information is shared by www.ideasroad.com

Apprise: Attractive Alert and Dialog Box for jQuery

Apprise is an alert alternative for jQuery that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality.

Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework. It has been tested on Chrome 8.0+, Firefox 3.0+, Safari 4.0+, Internet Explorer 9.0.



information is shared by www.ideasroad.com

Fuel: Community Driven PHP 5.3 Framework

Fuel is a simple, flexible, community driven PHP 5.3 web framework based on the best ideas of other frameworks with a fresh start. Fuel has been tested on Apache, IIS and Nginx.

Fuel takes a different approach to many frameworks and strives to be community-driven. They have only been going for less than 6 months and already had 30 developers commit to the source code and documentation.



information is shared by www.ideasroad.com

Three.js: A Lightweight JavaScript 3D Engine

Three.js is a lightweight Javascript 3D Engine with a very low level of complexity – in other words, for dummies. The engine can render to the typical 2D , the new WebGL 3D , and . With 20 lines of code, you can easily create a camera, then create a scene, add a cube on it, create a renderer and add its viewport in the document.body element.



information is shared by www.ideasroad.com

Colors Come to Life in 3D with ColoRotate

Like taste and smell, color is a sense that is processed by our brains in multiple dimensions. Yet traditional methods of choosing colors on computers are limited to obscure sliders and flattened two-dimensional viewers. With ColoRotate, you can work with colors in 3D, in real time, and in a way that matches how our minds process color.

ColoRotate has an intuitive interface that eliminates the need to memorize or jot down color combinations or numbers. Indeed, you can traverse across an open three-dimensional color space and choose (or design) the color palette that fits your needs.



information is shared by www.ideasroad.com

jQuery Diagonal Fade for Items Ordered in a Grid

diagonalFade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements.

diagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern browser’s with jQuery 1.3.2. All you have to do is import it, specify the container to which the group of items resides.



information is shared by www.ideasraod.com

How to Create Native-Feeling iOS Apps in Javascript

Though it’s not widely known, you can write native-feeling iOS apps for the iPhone and iPad in JavaScript (+ HTML and CSS). If you want to put it in the app store, you can even package your web app as a “native” Objective-C app.

In this article, Matt will explain HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript, which includes how to strip away the browser chrome (the url bar and button bar); prevent viewport scrolling and scaling; respond to multi-touch and gesture events; use webkit CSS to get the iPhone OS look and feel; cache the app so it runs without internet access; get a custom icon on the home screen; and have a splash screen load at the start.



information is shared by www.ideasroad.com

Gury – HTML5 Canvas Utility Library

Gury is a simple to use utility library for drawing, animating, and managing HTML5 canvas tags. The goal is to support the HTML5 Canvas API with a framework that allows for faster/easier application development.

It was built with simplicity in mind and its usage was modeled in the image of jQuery. For instance you can initialize, style, and animate an entire scene in a single expression using chaining.



information is shared by www.ideasroad.com

Top 10 Web Design Mistakes and How to Avoid Them

1. Related Advertising

Everyone wants to make money and there is nothing wrong with that. It is how you do it is what matters. If you want to make money with your site you need to consider your audience. If you audience is at a computer site, don't make the mistake of putting up a credit card or dating banner on the side. They have nothing to do with your content. If you want to advertise something and get a kick back, make your advertisements about your site. With that in mind don't clutter and trick people to click on them.



2. Splash Screen

A Splash Screen is a waste of the developers and your visitor’s time. You do not want to force your visitor to watch or read something they are not interested in. Nothing is worse than having to wait 30 seconds for a flash movie to play. They want to get in, find what they are looking for and get out. If you have your heart set on a splash screen, make sure you put a link to skip it.

3. Too Much Tex

Web development is an interesting market. You have to have lots of good content for your visitors to read and the search engine to spider. But having too much text is a bad thing. This can take away from the design aspect. The visitor’s ambition and having the search engine think that you are trying to trick it. The most important thing about text is not the length, but the quality. Put down what you need to say and stop.



4. Overcrowded Content

Watch out how much content and graphics you are putting on your page. This can affect usability and loading time. Keep you site focused on your goal and organized. Don't crowd with banners, advertising and links to other content. White space on a site is just as important then the content.

5. Color Design

Colors are your best friend or your worst enemy. Be careful of the colors you are using. If you are a dark background make sure your font is a light color and visa a versa. Stay away from bright colors. Dull colors are not only in style now, but are very clean, easy to read and professional. Also check to see if you colors are part of the Web Safe Colors. If you pick colors that aren't a standard, there is a chance that the computer will pick a color and your design will suffer.



6. Horizontal Scrolling

Some sites get to wide and your visitors might not see your whole page. Given there is a sizes that you have to move away. The standard width for a site is 1024 x 768 pixels. But this is changing as your visitors will be going to a bigger resolution. But until they do...watch the size.

7. Know how to use Flash

Flash is cool and is very interactive. But don't use it for your entire site. Flash sites have not conquered usability. Developers get caught up in the design aspects of flash and forget usability and simplicity. These two aspects are very important. Flash is very good at banners, advertising, and some navigation. If you want to use Flash for your site remember that search engine spiders don't see flash content.

8. Cross Web Browser Capability

There are many web browsers that people use to surf the internet. And developers hate it. Some coding techniques are very hard to please all the different internet browsers. You need to make sure that you don't dedicate your site to only one of them. Test your site is all kinds of internet browsers. You can review your site in different browsers with Brower Shots.



9. Remember Usability

Usability is important, it should be one or your main goals. If you haven't been thinking about usability. Stop and think. With small fixes and changes to your site. It could change how your visitor reacts to your site and lowers your bounce rate. If your visitor can't interact with your site and has problems finding what they are looking for, they are leaving.

10. Simple and KISS It

Remember to KISS your website, meaning Keep It Simple Stupid. When you start adding a bunch of different techniques and design. Most of the time you don't need them. Try to have a mixture of exciting new things, but at the same time have simple techniques.

Have Fun and Avoid Top 10 Web Design Mistakes

You need to take your site serious, but you also need to have fun. Try things out and see what happens. Break rules and try new things. You will have more success in doing something you like and are dedicated too. You will work harder, put more time and effort into something that’s fun.

information is shared by www.ideasroad.com

247 Hand Drawn Web Icons Free for Download

Hand-drawn Web Icon Set contains 247 icons for you. All the icons are available in 32px – best to use while designing websites or apps. But if you need bigger icons, there is 128px package included.

Hand Drawn Web icon set is free and it will always be free. You can use it for both commercial and non-commercial projects. You can modify the icons anyway you like.



information is shared by www.ideasroad.com

About Ajax

Ajax is a group of interrelated web development methods used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not needed, and the requests need not be asynchronous.

Like DHTML and LAMP, Ajax is not one technology, but a group of technologies. Ajax uses a combination of HTML and CSS to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and to allow the user to interact with the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

Technologies

The term Ajax has come to represent a broad group of web technologies that can be used to implement a web application that communicates with a server in the background, without interfering with the current state of the page.

In the article that coined the term Ajax,Jesse James Garrett explained that the following technologies are incorporated:

0 HTML or XHTML and CSS for presentation.

0 the Document Object Model (DOM) for dynamic display of and interaction with data.

0 XML for the interchange of data, and XSLT for its manipulation.

0 the XMLHttpRequest object for asynchronous communication.

0 JavaScript to bring these technologies together.

Since then, however, there have been a number of developments in the technologies used in an Ajax application, and the definition of the term Ajax. In particular, it has been noted that JavaScript is not the only client-side scripting language that can be used for implementing an Ajax application; other languages such as VBScript are also capable of the required functionality. (However, JavaScript is the most popular language for Ajax programming due to its inclusion in and compatibility with the majority of modern web browsers.) Also, XML is not required for data interchange and therefore XSLT is not required for the manipulation of data. JavaScript Object Notation (JSON) is often used as an alternative format for data interchange,although other formats such as preformatted HTML or plain text can also be used.

information is shared by www.ideasroad.com

Free Platform for Collaboration and Project Management

TeamLab is a free open-source platform for business collaboration and project management. It allows you to use social networking tools such as blogs and forums, organize business tasks and milestones, as well as communicate with your team members via corporate IM.
TeamLab business collaboration platform is an open-source software. The source code is for developers and experienced users who wish to install and configure the platform manually on their own server. According to the license terms, you are free to test, evaluate, customize and improve the code.



information is shared by www.ideasroad.com

jQuery UI Widget for Contextual Pagination

Sausage.js is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.
A complete test & benchmark suite is coming soon. You may also read through the annotated source code or visit the project page on GitHub. Sausage depends on both jQuery and the jQuery UI widget factory.



information is shared by www.ideasroad.com