WebAppers

/ best free open source web resources /

Shopify

Future Insights Live 2013 at MGM Grand Las Vegas

Posted · Category: Information

Future Insights Live 2013 is a 4-day event, comprised of one optional workshop day followed by 5 tracks and our hands-on labs over 3-days. FILive will discuss the future technologies, platforms, and business models YOU should be using and implementing to launch the next big thing.

No matter your level of ability, nor whether you are a designer, developer, product person or entrepreneur, this is the event for inspiration, education, and networking that you don’t want to miss.

future-insights

Overview

  • Coverage of the hottest web & mobile development, design, and business topics.
  • World-class speakers from across the globe.
  • Packed schedule: full day workshops, multi-track conference & hands-on learning labs.
  • Incredible atmosphere: hundreds of like-minded web folk descending on Vegas
  • All levels accommodated, something for everyone.

Workshops

  • Designing an Elegant Mobile User Experience Across Multiple Devices and Platforms – Erik Loehfelm
  • HTML5 & CSS3 Masterclass – Ryan McGinty
  • Interaction Design Beyond the Wireframe – Lis Hubert
  • Your money or your life? Designing a business that won’t kill you – Carl Smith
  • Adding Realtime Event Handling to Any Website or App – Jason Lengstorf
  • Getting Going With Node.js – Paolo Fragomeni

You can sign up with “WebAppers” discount code in order to get 10% off. Don’t forget to book your place before 1st Febuary 2013.

How to Adapt Your Site to Different Window Sizes

Posted · Category: Information

Modern browsers like Internet Explorer 10 support the width and height properties of the W3C Working Draft CSS Device Adaptation. This gives Web developers a simple tool to control automatic content scaling across various window dimensions. In particular, it enables sites to easily adapt to Windows 8 browsing on touch-enabled tablet devices in the snapped view and in portrait orientation.

Auto-Scaling and When It Is Used

Most websites have prioritized optimization for a 1024 pixel wide window. This ensures a good user experience for a wide variety of displays when the browser is maximized. However, sites may not work well on new form factors like tablets and portrait screen orientation if they haven’t optimized for other window sizes as well. In particular, pages often clip or distort layout when viewed in a narrow width.

This narrow layout is particularly important in Windows 8, where the snapped view of the browser is in this exact state. This situation also occurs for portrait mode on slate devices due to the smaller form factor. Read the rest of this entry »

Windows Store Apps VS Traditional Web Apps

Posted · Category: Information

This post provides an insight into some differences in the coding practices used in existing Web apps written in JavaScript and Windows Store apps using JavaScript. It provides guidelines for Web developers to understand how code that is optimized for Windows relates to apps that are meant to be migrated among platforms with ease. It assumes that the reader is familiar with JavaScript programming and World Wide Web Consortium (W3C) standards.

Introduction

The Windows 8 provides a platform for building new Windows Store apps for Windows. Windows Store apps can be written in different programming languages including ECMAScript 5 compliant JavaScript.

The Windows Runtime enables apps that can leverage the power and broad capabilities of Windows combined with the strength, ubiquity and simplicity of standards-based web technologies.

windows-store-apps-web-apps

In fact, when authoring an app in JavaScript, the developer may choose to use existing web standards. This allows the greatest interoperability with other standards-compliant platforms. However, the Windows Runtime also enables developers to build Windows Store apps with JavaScript that are optimized for the Windows platform.

Depending on your objectives, the best approach to architect your apps will differ. The choice becomes easier if you consider the guidance that follows. Read the rest of this entry »

Gradual Engagement to Increase Your Conversion Rate

Posted · Category: Information

The difference between a 5 step registration flow and a single step registration flow is less than the difference between a single step registration flow and none at all.

The goal of this article is to present arguments for why using Gradual Engagement is a good design principle for web and mobile applications. The ideas listed below are directly drawn from our experience of using Gradual Engagement principles when designing Filepicker.io.

filepicker

When you’re designing your new-user flow for your website or mobile app, the de-facto approach is to send them as soon as possible to a registration page. But there’s another way, a way that emphasizes gradually building a relationship with your user before asking them to register for an account. It’s called Gradual Engagement and can be surprisingly effective at increasing your overall conversion rate and user stickiness. While gradual engagement is not a new concept, it’s increasingly important in this era of mobile apps and social logins. Read the rest of this entry »

Tap, Zoom & Dynamic Gestures with Gesture Events

Posted · Category: Information

New browsers like Internet Explorer 10 have advanced touch experiences using gesture events. There are a few first steps you can do to make sure to help your site become touch-friendly yet also have it work well across many input devices while supporting many modern browsers. In this article, I’ll show you how.

Let’s start with a gesture events is the Browser Surface Test Drive demo:

touch-browsing

This introduces gesture recognition objects in JavaScript. Sites can create gesture objects, decide which pointers (mouse, pen, or touch contacts) to process, and direct the gesture events at whatever element is desired. The browser then calculates what gesture is being performed and notifies the page via events. This enables developers to build gesture experiences not yet natively possible in any other browser. These include multiple concurrent gestures, for example, rotating two puzzle pieces with your hands.

Let’s take a look at how this works in code. Read the rest of this entry »

Revealing Extra Content & Expanding Fullscreen Overlay

Posted · Category: Information, License Free

Hugo Giraudel offered a great overview of the CSS clip property and the rect() function. Codrops has published a tutorial: Putting CSS Clip to Work – Expanding Overlay Effect, which is going to create a neat and simple effect for revealing some extra content and expanding a fullscreen overlay.

The article will teach you how to leverage the CSS clip property to make a smooth transition when clicking on a box element. The idea is to show some kind of overlay as if it’s actually underneath the respective element. Clicking an element will create a cut-out effect, revealing another layer that will expand.

expand-overlay-effect

Requirements: CSS
Download Link: http://tympanus.net/Tutorials/ExpandingOverlayEffect/
License: License Free

Inspire the World about the Possibilities of the Web

Posted · Category: Information

Web Lab is made of up 5 Chrome Experiment installations that bring the extraordinary workings of the internet to life and aims to inspire the world about the possibilities of the web.

The installations make up a year-long public exhibition at the Science Museum, London and can be interacted with by anyone, anywhere at chromeweblab.com.

Worldwide visitors both on and offline will be able to make music with people across the world; launch information into cyberspace and see where images on the web live; watch their portrait being processed, translated, and then drawn in sand by a robot; and travel instantly to far away places all over the world.

chrome-web-lab

Source: http://www.chromeweblab.com/

How to Create a Grid of Diamonds with CSS

Posted · Category: Information, License Free

With the continued adoption of advanced CSS by browsers, we are starting to have the ability to do more and more using just CSS. As we have seen, you can make all kinds of crazy shapes with only CSS. On a recent client project, Trevor Davis has created a grid of diamonds with CSS and shared the tutorial: Who Says the Web is Just for Squares?

He is using Modernizr to detect if the browser supports CSS3 Transforms. And, he is using Sass and Compass for all of the CSS. You may now go forth and make some creative layout with different shapes.

diamond-grid-layout

Requirements: Sass and Compass CSS
Download Link: http://davist11.github.com/css-diamond-grid/
License: License Free

Modernize HTML5 Game with Hardware Scaling & CSS3

Posted · Category: Information

Modern browsers like Internet Explorer 10 are implementing stable versions of some interesting HTML5 features, including the offline, drag and drop and file APIs. These features are bringing us a new era of Web applications and fresh, quickly emerging gaming scenarios. In this two-part article, I’ll show how I used these new features to modernize my last HTML5 game, HTML5 Platformer. In this article, I’ll cover hardware scaling and CSS. In Part 2, I’ll cover the offline, file and drag-and-drop APIs. I hope you’ll get some great new ideas for your own games!

Note The URL demo is at the end of this article. Feel free to play using your favorite browser, and check out the Internet Explorer 10 gameplay video. The source code will be available for download in Part 2.

Scaling Across Devices

If you’re building an HTML5 game, you’re probably interested in the cross-platform nature of this standard programming language. But compatibility with a broad variety of devices means you have to take into account a huge number of resolutions. Compared to SVG, Canvas—at first—seems ill-prepared to handle this.

However, with a casual game based on sprites, there is a simple solution to implement. David Catuhe has done a great job of describing this on his blog, Unleash the power of HTML 5 Canvas for gaming – Part 1 (see the section called “Using the Hardware Scaling Feature” for specifics).

The idea is as simple as it is smart. You’re working inside a canvas at a fixed, predictable resolution, and you’re stretching it to the current displayed resolution using the canvas.style properties. Read the rest of this entry »

WinJS: Using the Windows Store Library for JavaScript

Posted · Category: Information

Part of the advantage of ramping up to write Windows Store apps is that you can utilize your existing knowledge of HTML, CSS and Javascript.

The Windows Library for JavaScript (referred to as WinJS) extends the support for Javascript in Windows Store apps, has a number of helper functions for common app development scenarios. In the article below, we’ll talk about how to get started with WinJS for creating custom types and namespaces, as well as handling and managing event listeners.

windows-store-app

Defining and deriving types with WinJS.Class

In the sections below, we’ll talk about how you can use the define and derive methods in the WinJS library to quickly create your own custom types, and specify their property constructors.

WinJS.Class.define

The WinJS.Class.define function is a helper function for defining a JavaScript type. You supply a constructor function, a set of “instance” members (which are defined on the prototype of the type), and a set of “static” members (which are defined on the type itself).

The properties that are added to the prototype of an object appear on any object that is instantiated by calling its constructor function, but the properties added to the type directly belong only to the type itself.

For example, let’s say we want to define a class Robot, which has an instance property name and a static property harmsHumans. The modelName property belongs to the individual objects created with Robot(name) contstructor function, but the harmsHuman property is valid for all Robot objects. Read the rest of this entry »

Page 17 of 35...«131415161718192021»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons