Web app development case: Journey Plan Application (Wayfindit:trip Planner app)

Article Description: Google Web App Development Guide Chapter III: Case Studies.

Travel Plan application (Wayfindit:trip Planner app)

In most cases, wayfindit applications must be well accessible. Travel is a complicated business, whether it's a commercial trip or a vacation trip, and a smooth journey requires no surprises from home to destination. The application of Wayfindit can provide the traveler with the required information and be quick and accurate. This means that it requires a minimal, intuitive, responsive interface that provides important information about the content on the front end--HTML5 and offline storage features.

A perfect pocket guide.

It is in your pocket or in your bag and provides instant information. It has local storage and geographic awareness and only needs to check the day, Wayfindit Trip Planner app will show your schedule and give advice when you have time to spare, give a reminder when you're near a beautiful spot, and a smart map and directions.

Wayfindit Trip Planner app uses HTML5 's features to provide a convenient, intelligent travel companion that provides service anytime and anywhere. It has a good interaction ability-visually clear, excellent performance, to understand the needs of travelers and the environment. It can make holidays more enjoyable, and it also makes people feel fun to use.

Arrival Service

The plane just landed? Based on the location of the traveler and the information from the last visit to the Internet, Wayfindit Trip Planner app instantly provides a taxi, along with a nearby restaurant or event information, or the hotel's path (and the distance from the hotel).

All of this information arrives in milliseconds-the application is designed from the inside out and the parts are compressed to make sure it feels fast.

Housing Services

The traveler drove a rented car to the hotel at this time. The application understands this and will provide a number of parking spaces subsequently. All of this information is stored locally-instantly available, regardless of whether there is a network connection.

A variety of options

The Wayfindit Trip Planner app uses the HTML5 and CSS response design. On a larger screen, such as a laptop or tablet, it provides more information. In addition to hotel check-in and taxi rental information, there are some peripheral information, such as hotel and event recommendations. (You can see the same information on your phone, but you need to scroll down the page.) ）

Hotel and event recommendations are based on the location of the traveler and the time of day.

Hotel Services

Want to know how to get to the hotel? Wayfindit's trip Planner knows how to get there-walk, take a taxi or use public transport (if it knows there are no rented cars, use public transport). If the traveler is using the app, he can call the correct phone number and find the vehicle by clicking on one click.

Because this application is geographically aware, it can provide the surrounding attractions information, which is stored in the local database, Wayfindit Trip Planner app can make smart recommendations based on database information.

summary function

A retrospective summary at the end of the day can leave travelers with a deeper travel memory, which will also enhance the Wayfindit Trip Planner app's tomorrow recommendation. Wayfindit Trip Planner app offers some pretty HTML5 forms that make it easy for users to rate events on the day.

Khan College (Khan Academy)

Khan Academy provides a wealth of educational resources in the form of video classrooms, which are educational, easy to access, and completely free of charge. Khan Academy also provides a "knowledge map" and some statistical data that guides you through the course and records your progress. This is a very good resource for students all over the world, whether on campus or outside school, for teaching purposes or just for interest. It's worth using the best presentation technology on the web, so we'll take Khan Academy as an example and introduce it into the HTML5 era.

Focus on the teaching content

Khan Academy's video content is the focus of its Web site, and we've redesigned it to keep the video on the front, free of distractions. The video fills the screen, and the auxiliary information disappears when it is not needed to provide an immersion experience. When navigation appears, it is also minimized-everything is for the students to learn better. The comments and questions are minimized, and the content of the comments and questions section is not loaded unless the user wants to save the load time. Some shortcuts on the keyboard make navigation easier.

The interface itself follows the idea of responsive design, and by using the HTML5 Meta viewport tag and CSS media query capabilities, mobile device users can see the same content on their devices, but the content is rendered in the most appropriate layout for their device.

A progress bar (using HTML5 's "Progress" element) provides an intuitive visual feedback for the student's learning progress. The use of local storage makes it easy to query learning-no need to log in or record data, and in the future this application will dramatically improve its performance.

Learning Tree

Under the "Learning" tab, there is a content detail, and the thousands of learning courses and links in Khan Academy are divided into directories and subdirectories, which are easy to retrieve. There is also a progress bar that prompts students to learn the progress of the course under each label.

In addition to directories and subdirectories, a course list is provided, and a set of videos in a course is indicated by a stack. Unlike the existing organization of the Khan Academy website, the video courses and content in Khan Academy's HTML5 application are grouped by relevance, so that the relevant content can be accessed in one place.

Khan Academy Web App uses HTML5 to provide students with a well-designed, ever-online resource that they can learn, practice, and track what they learn. It may be difficult to encourage students to study, but Khan Academy as many obstacles as possible. It is fast, can interact, and provides a lot of learning resources with intuitive navigation, all resources can be used without interference.

Beauty map (picture Page)

Picture page gives people a whole new way to see what's going on in the world. If a picture is equivalent to 1000 words, then more pictures page than most of the world's publications, emotional and detail can be displayed. The picture page is just a series of pictures with a small, simple, unobtrusive title, and the site's strength is here-it gives the picture the focus, and lets the picture tell their own story. No frames, no slides that are difficult to navigate, no miniature images. This HTML5 picture Page app offers an innovative way to create a new web App world for many of the existing image news sites.

Let the Natural

The application name of the picture page is a good description of it--big pictures are the key to its success. The HTML5 re-imagining feature of the picture page allows images to be displayed in a larger way. By using the background-size nature of CSS to automatically scale photos, photos can fill the full screen and become the focus.

The responsive design allows users of mobile devices to see small versions of the appropriate size images; CSS3 Media query statements allow the picture to be displayed in full screen without affecting performance. It can also detect waves and touch-screen movements like native mobile apps. The picture page feels very natural on any device.

Put the user experience in the first place

JavaScript allows the user to navigate through keyboard shortcuts to the picture Page. Use the left and right arrows or your own agreed-upon j\k keys to flip the picture forward or backward, which reduces the distraction of looking for the cursor when navigating with the mouse. When it is not needed, the arrows are hidden so that the picture will not be affected.

Using HTML5 's "progress" tag, you can show the progress of your album visitors.

The picture page is a good example of not using the background build (ground-up reconstruction) in the age of application. It is elegant, visual effect is good, much loved. So we can apply the features provided by HTML5 in the right place, combine the existing website with the new technology, and show the better picture.

This article is compiled from Ling, the original address.