Mobile Web App Development
About this Course
Mobile web app development presents challenges for adapting content to a variable screen size and a unreliable internet connection. This course extends the web developer’s awareness and knowledge to the current issues and solutions of Mobile First, Responsive Design and mobile frameworks available for managing a mobile presence. A framework presented to solve small screen and low bandwidth problems is the popular jQuery Mobile framework coded without native programming in Java or Objective-C. This allows teams to use the skills they currently have to deliver a mobile site with a maximum amount of reused code. The biggest benefit of using a free mobile library like this is in having the testing already completed for making the features cross-browser compatible.
Audience Profile
The student will be a web site designer / programmer who would like to either design a mobile web site from scratch or make a current site mobile friendly. Some JavaScript / jQuery skill is needed.
At Course Completion
The student will be familiar with the current issues and available solutions for mobile sites today. The jQuery Mobile library and its features are presented to create a mobile web site with special navigation and components. Also, the student will learn Adobe Shadow for mobile testing.
Prerequisites
The WD-510 Mobile Web App Design course is highly recommended as a way to understand the direction taken for mobile development and to prepare the student for their own mobile site. The student should be familiar with HTML5 design and layout using CSS3. (WD-505 and WD-510 recommended). Some JavaScript / jQuery coding will be used as well as some PHP. Students are welcome to use .NET style sites also. Students should bring as many smart phone or tablet devices (and chargers) as possible to work with.
Course Outline
Guidelines
- The browser app
- Browsers - Webkit based
- Browsers
- Design principles
- Mobile Web best practices
- W3C current state and roadmap
- MobiWebApp
- Web performance best practices
- Mobile Web best practices
- Future Friendly
- Thoughtworks
Browser screens
- The browser screen
- Viewports
- Viewport behavior
- Scrolling
- Browser screen - events
- Browser screen - quirks
- Icons
Media queries
- Intro
- Media queries
- Queries for features
- Features
- Feature operators
- Browser support
- More than media queries
- Device categorization
- CSS organization
- Meta viewport
- Testing
Fluid layouts
- Intro
- Fluid units
- Fluid fonts
- Fluid best practices
- Fluid grids
- Fluid images
- Fluid image replacement
- Fluid image - server side
- Fluid video
- Fluid advertisements
- Flexbox
- Fluid CSS tips
- Flexible web design
Agent detection
- Agent detection - server side
- Agent detection - client side
- Agent detection issues
- Agent detection - Google
- Agent detection - plugins
- Server side options
- WURFL
- User overrides
Responsive design
- Mobile First
- Breakpoints
- Responsive images
- Responsive image techniques
- W3C responsive images
- Responsive navigation
- Responsive data tables
- User options
- Fixing layouts
- Responsive frameworks
- Responsive frameworks - iPad
- Responsive design - JavaScript
- Responsive design plugins
- Web site breakpoint testing
Geolocation
- Intro
- Web app usage
- Google maps
Local storage
- Intro
- Offline web storage
- Offline web storage performance
- Structured database models
- IndexedDB
Touch events
- Touch
- Using touch events
- Touch targets
- Gestures
- Click delays
- :active state
- Disable zooming and scrolling
- a scrollTo trick
- Don't render on touch
- Touch components
- Multi-touch and the mouse
- Increasing the link touch area
Orientation
- Navigation
- Tailor made elements
- Menus
- Responsive orientation
Device access
- Camera iOS
- Camera Android
- Accelerometer / Gyroscope
- Magnetometer
Programming & Testing
- Bandwidth detection
- Game development
- Game development tools
- Test screen size
- Automated test tools
- Test tools - Microsoft
- Optimizing - Blaze
- Emulators
- Adobe Shadow
Frameworks
- JavaScript
- Publishing
- Front end builders
- Native development
- Hybrid development
- PhoneGap
jQuery Mobile
- Overview
- Versions
- How it works
- Template
- Add data-roles
- View current source
- New page and links
- Custom selector :jqmData( )
jQuery Mobile application structure & navigation
- Pages - internal or subpages
- Pages - internal
- Pages - external
- Prefetching
- Page initialization
- Page transition events
- Binding page transition events
- Binding methods
- Dialogs
- Navigation and history
- changePage( )
- Transitions
- Animations in jQuery Mobile
- Google Analytics
jQuery Mobile page elements
- Plug-ins and widgets
- List views - Basic
- List views - nested lists
- List views - split buttons
- List views - images
- List views - count bubbles
- List views - updates
- Toolbars - navigation bar
- Buttons
- Grouped buttons
- Buttons with icons
jQuery Mobile form elements
- Form elements
- Field containers
- Checkboxes and radio buttons
- Methods
- Flip toggle
- Input fields and textareas
- Select menus
- Sliders
- Layout grids - ui-grid
jQuery Mobile theming
- Intro
- Themes and swatches
- Applying swatches
- Theme overrides
jQuery Mobile API
- jQuery Mobile Methods
- Touch events
- Initialization events
- Page hide and show events
- Scroll events
- Orientation
- Responsive Layout API
- Configuring
- Changing an option via mobileinit
jQuery Mobile resources and updates
- Updates - Collapsible blocks
- Updates - Collapsible accordions
- Plugins - date / time
- Code examples
- Web sites
- Videos
Resources
- Plug-ins
- Web sites
- Books
- Conferences
Sorry! It looks like we haven’t updated our dates for the class you selected yet. There’s a quick way to find out. Contact us at 502.265.3057 or email info@training4it.com
Request a Date