Web Development

9 articles
Transitions in Mobile Web Structure

Transitions in Mobile Web Structure

CSS3 enables you to apply some amazing transitions to animate the change from page to page. These can help your app feel native and enhance the user experience. jQuery Mobile takes away the difficulty of CSS3 transitions by enabling you to set the type in the data-transition attribute in each link. For example, when you want to navigate to the…
Adding Hash Change Events in Mobile Web Structure

Adding Hash Change Events in Mobile Web Structure

In a web browser when a user clicks a link, the page usually changes the URL schema. This happens when you navigate from http://example.com/index.html to http:// example.com/index2.html. However with most AJAX-driven mobile applications, you have only one physical page, but need a way to track navigation between virtual “pages.” One way of doing this is through hash change events, which…
Adding Header And Navigation Elements in Mobile Web Structure

Adding Header And Navigation Elements in Mobile Web Structure

Now that you have the CSS linked up, you can start with the content of the application. First, take a look at the structure of jQuery Mobile CSS pages. For each page, you must follow this format: <div id=”activity”  data-role=”page”> div data-role=”header”> <h1>Page  Title</h1> </div><!-- /header -->   <div data-role=”content”> <p>Page  content goes here.</p> </div><!-- /content -->   <div data-role=”footer”>…
Centering  Your Content With Viewports Mobiole Web Structure

Centering Your Content With Viewports Mobiole Web Structure

Your web app can use viewports to display the content in the center of the screen. Viewpoints are the equivalent of a user pinching and zooming the content for a website that isn’t format- ted for mobile. You want the Corks application to be front and center and snap to the width of the screen. To enable this, you want…
Creating The Database And Tables in Interacting  With Web SQL in Moblile Web Development

Creating The Database And Tables in Interacting With Web SQL in Moblile Web Development

To follow along, you need to run some code to create the database for Corks.Follow these steps to create your main database. 1. Open your text editor of choice and start editing in the index.html file. 2. At the bottom of the </body> tag, add the following snippet of code: <script type=”text/javascript” language=”Javascript”> var db; $(document).ready(function(){ }); </script> This snippet…
Creating The  Prototype in Mobile Web Development

Creating The Prototype in Mobile Web Development

USING HTML5 TO AID IN STRUCTURE AND DESIGN One of the hardest things to do when developing your web app is to create a good template and structure that you can replicate throughout the pages. You can save time and be more efficient if you use HTML5 boilerplates that enable you to create HTML5 structures and handy JavaScript functions. Creating…
Design Aesthetics in Mobile Web Development – Part 2

Design Aesthetics in Mobile Web Development – Part 2

ORIENTATIONS Most modern mobile devices provide numerous ways to view a web page. Luckily for developers, the operating system of the phone rotates the web browser depending on if the phone is in a horizontal or portrait mode. It’s the responsibility of the developer, however, to handle these events and make changes to CSS as needed. <script  type=”text/javascript”  language=”Javascript”> var…