jQuery Mobile Workshop
1 like1,687 views
This document summarizes a workshop on building a product shopping application using jQuery Mobile. It describes creating an account on Codiqa to build the application interface, making an AJAX call to populate a list view with product data from an API, and uploading the application to Google App Engine so it can be accessed from mobile devices. Code examples are provided for resetting the list view, adding individual product items to the list, and configuring the App Engine deployment.
1 of 13
Downloaded 15 times
![Build the AJAX Search
?? Delete the contents of the list view we created using Codiqa
?? AJAX endpoint - http://productshoppingapi.appspot.com/search?q=<query>
?? The endpoint sends CORS headers so we can use it form anywhere. The back-end is a
simple Google App Engine Python application which uses the Google Product Search
API.
?? Once we get the response back, iterate over the items array
?? Empty the #products list view
?? For each item, get the ¡°product¡± item and create a list item:
<li>
<a href=/slideshow/jquery-mobile-workshop/16896843/¡°{{ item.product.link }}¡±>
<img src=/slideshow/jquery-mobile-workshop/16896843/¡°{{ item.product.images[0].link }}¡±/>
{{ item.product.title }}
</a>
</li>
?? Finally, refresh using $(¡°#products¡±).listview(¡°refresh¡±).](https://image.slidesharecdn.com/jquerymobileworkshop-130303074718-phpapp01/85/jQuery-Mobile-Workshop-8-320.jpg)
![AJAX Search Code
// run this code only after initialization
$(function() {
// handle search form submit
$("form").submit(function(event) {
// prevent the default submit behavior
event.preventDefault();
// prepare the query URL
var url = "http://productshoppingapi.appspot.com/search?" +
$(this).serialize();
// make the AJAX request, and iterate over the results
$.getJSON(url, function(data) {
resetProducts();
for (var i = 0; i < data.items.length; i++) {
var product = data.items[i].product;
addProduct(product);
}
$("#products").listview("refresh");
});
});
});](https://image.slidesharecdn.com/jquerymobileworkshop-130303074718-phpapp01/85/jQuery-Mobile-Workshop-9-320.jpg)
![addProduct
function addProduct(product) {
var productView = $("<li><a href=/slideshow/jquery-mobile-workshop/16896843/& +
product.link + "'><img src=/slideshow/jquery-mobile-workshop/16896843/& +
product.images[0].link + "'/> " +
product.title + "</a></li>");
$("#products").append(productView);
}](https://image.slidesharecdn.com/jquerymobileworkshop-130303074718-phpapp01/85/jQuery-Mobile-Workshop-11-320.jpg)
Ad
Recommended
Multi screen HTML5
Multi screen HTML5Ron Reiter
?
This document presents an overview of multi-screen web development using HTML5, emphasizing the growth of mobile web traffic and the significance of responsive design. It discusses the advantages and challenges of HTML5, the use of CSS media queries for multi-screen compatibility, and introduces various frameworks like jQuery Mobile and Bootstrap for creating responsive applications. It also highlights tools and methods for building mobile applications, including PhoneGap/Cordova, while comparing the efficacy of different UI frameworks.Introduction to App Engine Development
Introduction to App Engine DevelopmentRon Reiter
?
Google App Engine is a platform as a service for hosting web applications. It automatically scales applications, bills by services used, and has high uptime. While it constrains applications to Google APIs and has request limits, it is easy to deploy applications and has a free tier. Creating a basic application involves downloading the SDK, adding an application, and deploying which creates a default handler. The datastore is scalable and supports SQL-like queries and an ORM interface for storing data.Apex & jQuery Mobile
Apex & jQuery MobileChristian Rokitta
?
The document discusses using jQuery Mobile to create mobile web applications in Oracle Application Express, including why to use jQuery Mobile, its basic page structure and components, customizing styles and forms, and how jQuery Mobile is supported in newer versions of Application Express. It also provides code examples and demonstrations of creating mobile-friendly lists, buttons, and other elements in Application Express using jQuery Mobile.Google app-engine-with-python
Google app-engine-with-pythonDeepak Garg
?
This document summarizes a presentation on developing applications for Google App Engine using Python. It introduces App Engine as a platform for hosting scalable web applications without having to manage infrastructure. Key aspects covered include setting up the development environment, defining application configuration and handlers, using frameworks like WSGI and Webapp2, rendering templates, accessing the Datastore NoSQL database, and deploying applications to App Engine. Common questions about App Engine capabilities and limitations are also addressed.Web Components: The future of Web Application Development
Web Components: The future of Web Application DevelopmentJermaine Oppong
?
Web components are a set of emerging standards that include HTML templates, custom elements, shadow DOM, and HTML imports. HTML templates allow declaring document fragments, custom elements enable defining own elements, shadow DOM provides encapsulation of styles and markup, and HTML imports link external resources. The presentation demonstrated these specs and their usage to build reusable web components and encourage component-driven development. Browser support is improving and many frameworks have adopted these standards.Gae Meets Django
Gae Meets Djangofool2nd
?
Google App Engine allows developers to build scalable web applications and host them on Google's infrastructure. It includes support for Python via Django, an open-source web framework. The document discusses how to develop a blog application using Django on App Engine, including models, forms, views and templates to create, edit and display blog posts stored in the App Engine datastore. It also covers App Engine services, quotas and pricing for development and hosting on App Engine.SwiftUI and Combine All the Things
SwiftUI and Combine All the ThingsScott Gardner
?
The document covers the integration of SwiftUI with Combine, focusing on the basics and anatomy of a SwiftUI view, as well as providing insights on using Combine for data handling and state management. It illustrates the use of property wrappers like @ObservedObject and @State within the structure of SwiftUI views, and the advantages of a reactive programming approach through Combine. Additionally, examples of code snippets demonstrate how to fetch, decode, and display data in SwiftUI applications.jQuery Intro
jQuery IntroJason Noble
?
The document provides an overview of jQuery, a popular JavaScript library, including its history and benefits such as easy DOM manipulation, AJAX capabilities, and cross-browser compatibility. It then demonstrates several jQuery functions and selectors for modifying HTML elements, handling events, and making AJAX requests to update content without page refreshes. Examples are given for selecting elements, updating styles, handling events like clicks, and validating form input with plugins.Ajax on drupal the right way - DrupalCamp Campinas, S?o Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, S?o Paulo, Brazil 2016Nicol¨¢s Bouhid
?
This document provides an overview of using AJAX on Drupal, including:
- What the AJAX API is and how it works through commands to dynamically update content without page refreshes
- How to use it with forms to reload fields or content through callbacks
- Attaching JavaScript behaviors to allow AJAX functionality
- Creating custom commands to extend its capabilities
- Triggering AJAX requests without forms by linking or instantiating AJAX objects
- New features in Drupal 8 like improved commands and documentationMVVM with SwiftUI and Combine
MVVM with SwiftUI and CombineTai Lun Tseng
?
The document discusses development using SwiftUI and Combine in Apple's MVVM architecture, highlighting the simplification and efficiency of SwiftUI code compared to traditional UIKit methods. Key concepts such as property wrappers, observable objects, and combining asynchronous events are explored, demonstrating how they enhance state management and UI design. Examples showcase the use of SwiftUI components while emphasizing the reduction of boilerplate code and improved clarity in project structure.Unobtrusive JavaScript
Unobtrusive JavaScriptVitaly Baum
?
This document discusses unobtrusive JavaScript and patterns for implementing it in web frameworks. It begins by outlining problems with server-side JavaScript generation and the proliferation of JavaScript frameworks. It then covers common patterns for unobtrusive JavaScript like double templating, just Ajax, and update panels. The document also explains how Rails implements unobtrusive JavaScript using drivers, data attributes, and remote forms. It concludes by discussing how these patterns and techniques could be adapted for ASP.NET MVC.Drupal and diversity of Single sign-on systems
Drupal and diversity of Single sign-on systemsAlex S
?
The document discusses Single Sign-On (SSO) systems in relation to Drupal, outlining various implementations including shared tables, Bakery, LDAP, CAS, and SimpleSAMLphp. It highlights the advantages and limitations of each method while addressing the concept of user authentication and authorization. Additionally, it emphasizes the importance of considering security, configuration complexity, and deployment planning when choosing an SSO solution.Getting Started with Combine And SwiftUI
Getting Started with Combine And SwiftUIScott Gardner
?
The document provides an overview of the key topics that will be covered in a course on getting started with Combine and SwiftUI in iOS, including:
- Basics of the Combine framework for reactive programming
- Differences between UIKit and SwiftUI approaches
- Anatomy of a SwiftUI view and its key properties
- Creating a sample app to demonstrate Combine and SwiftUIAngular2 and TypeScript
Angular2 and TypeScriptDavid Giard
?
This document discusses building powerful enterprise applications with Angular and TypeScript. It provides an overview of key concepts in Angular including modules, components, templates, directives, services, routing and data binding. It also covers TypeScript features such as static type checking, transpiling to JavaScript, and advantages for productivity and managing large codebases. The document demonstrates how Angular and TypeScript can be used together to build robust single page applications.jQuery Mobile with HTML5
jQuery Mobile with HTML5madhurpgarg
?
JQuery Mobile is a framework for building mobile web applications using minimal code. It is built on top of jQuery and jQuery UI, leveraging their JavaScript libraries and CSS frameworks. JQuery Mobile provides a range of UI elements, widgets, page transitions, themes, and events for developing mobile apps that work across various mobile platforms and devices. It allows creating basic single page apps with HTML5 markup and managing page navigation. The framework also supports server communication through AJAX and provides mobile events for touch interactions.Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Elyse Kolker Gordon
?
The document discusses building universal web applications using React, highlighting the benefits of isomorphic (universal) applications, such as improved SEO and perceived performance. It outlines the architecture required, including server-side rendering, Redux, and React Router, alongside various code snippets and configurations. Additionally, it addresses challenges and tradeoffs in developing a universal app and provides resources for further learning.AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
?
The document provides a comprehensive introduction to AngularJS, a client-side JavaScript framework designed for building modern single-page applications (SPAs) with a focus on flexibility, modularity, and testability. It outlines key features of AngularJS, such as data-binding, directives, and routing, while also explaining its architecture and components like controllers and services. Additionally, it includes guidance on setting up an AngularJS application and utilizing tools for development.Cloud Endpoints _Polymer_ Material design by Martin G?rner
Cloud Endpoints _Polymer_ Material design by Martin G?rnerEuropean Innovation Academy
?
The document discusses building web applications using Google Cloud technologies including Cloud Endpoints, App Engine, and Material Design principles. It provides an overview of setting up a sample application with Cloud Endpoints to define REST APIs and generate client libraries. It also covers using Polymer and Material Design elements for the frontend and connecting it to the Cloud Endpoints backend.Polymer & the web components revolution 6:25:14
Polymer & the web components revolution 6:25:14mattsmcnulty
?
The document outlines the Polymer framework, emphasizing its role in simplifying web application development through web components that enhance interoperability and usability. It describes how Polymer allows developers to create custom elements and manage their behaviors while reducing boilerplate code. Additionally, it highlights the growing ecosystem of web components and invites engagement with the Polymer community for further exploration and tools.SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSencha
?
This document discusses handling errors in web applications. It begins by explaining what JavaScript errors are and how they are typically invisible to users. It then discusses how to catch errors using window.onerror or addEventListener and logging errors to help debug issues. Ideal error handling involves logging detailed error information to a database and notifying developers. The document wishes for more context around errors, like function arguments or AJAX requests. It introduces a new error logging and monitoring tool that provides detailed user environment data, function arguments, screenshots, and a timeline to help developers debug issues more easily.A brave new web - A talk about Web Components
A brave new web - A talk about Web ComponentsMichiel De Mey
?
The document discusses emerging web component technologies including templates, shadow DOM, custom elements, and HTML imports. It provides examples of how each technology addresses limitations of past approaches like jQuery plugins and Angular directives by allowing developers to build reusable, encapsulated widgets and components using standard web technologies like HTML, CSS, and JavaScript. These new standards enable building complex web UIs in a modular, component-based way.AtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-onsAtlassian
?
The document outlines the development of an Atlassian plugin, detailing the integration of active objects, event listeners, and web resources for dashboard tracking. It covers the structure of the plugin's XML descriptor, code for tracking dashboard views, and example web item configurations. Additionally, it provides guidance on managing Atlassian Connect addons and how to set up a development environment for these integrations.Web Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing CombinationAndrew Rota
?
The document discusses the integration of web components with Backbone.js to enhance modular web development. It emphasizes the advantages of custom elements and shadow DOM, presenting examples of component implementation and best practices. Additionally, it addresses considerations for componentization, such as encapsulation and portability.The Complementarity of React and Web Components
The Complementarity of React and Web ComponentsAndrew Rota
?
The document discusses the complementarity of React.js and web components, highlighting the benefits of web components such as encapsulation, reusability, and interoperability. It outlines best practices for building performant web components to be used in React.js while emphasizing the importance of keeping components small and stateless. The presentation also addresses challenges such as the handling of custom elements within React's JSX syntax.Controller in AngularJS
Controller in AngularJSBrajesh Yadav
?
The document outlines the role of controllers in AngularJS, describing how they define application behavior by managing the scope while avoiding DOM manipulation and input/output formatting. It also illustrates the controller hierarchy for property access across parent and child controllers, as well as methods for sharing data through services. Best practices for naming controllers and examples of AngularJS applications are provided.Google Polymer Framework
Google Polymer FrameworkKostas Karolemeas
?
The document discusses the rise of Polymer and web components, highlighting their significance in modern web development. It outlines the capabilities of the Polymer library, including custom elements, two-way data binding, and improved interoperability with other frameworks. Additionally, it introduces the Polymer app toolbox for building progressive web apps and provides insights into the integration of various web components and development tools.AtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using nowAtlassian
?
The document discusses various modern web technologies including web components, HTML templates, and ECMAScript 6/2015 features. It demonstrates how to create custom elements using JavaScript and explains the use of shadow DOM and promises. Additionally, it provides coding examples related to these technologies and emphasizes their importance for developers.Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
?
The document provides a comprehensive introduction to jQuery Mobile, explaining its purpose, installation, syntax, and features. It covers key concepts such as page layout, event methods, and content formatting, providing examples of the markup used. Additionally, it offers insights on using jQuery for handling HTML elements and creating interactive web applications.Creating web api and consuming part 2
Creating web api and consuming part 2Dipendra Shekhawat
?
This document discusses consuming a web API through HTML clients. It explains how to modify an index file to provide a GUI for displaying and interacting with product data from the web API. Code examples are provided to get, find, delete, update, and add products by calling the web API using jQuery AJAX calls. Screenshots are mentioned to demonstrate viewing all products or finding a specific product.Making mobile apps with web technology (revised)
Making mobile apps with web technology (revised)Manyoung Cho
?
The document discusses the evolution of mobile apps created with web technologies, highlighting the history of web applications, the impact of smartphones, and the competitive landscape among mobile platforms. It emphasizes the advantages of using HTML5 and CSS3 for cross-platform app development while mentioning various frameworks and technologies like PhoneGap. Additionally, the document outlines the pros and cons of web apps compared to native apps, pointing to their ease of development and deployment.More Related Content
What's hot (20)
Ajax on drupal the right way - DrupalCamp Campinas, S?o Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, S?o Paulo, Brazil 2016Nicol¨¢s Bouhid
?
This document provides an overview of using AJAX on Drupal, including:
- What the AJAX API is and how it works through commands to dynamically update content without page refreshes
- How to use it with forms to reload fields or content through callbacks
- Attaching JavaScript behaviors to allow AJAX functionality
- Creating custom commands to extend its capabilities
- Triggering AJAX requests without forms by linking or instantiating AJAX objects
- New features in Drupal 8 like improved commands and documentationMVVM with SwiftUI and Combine
MVVM with SwiftUI and CombineTai Lun Tseng
?
The document discusses development using SwiftUI and Combine in Apple's MVVM architecture, highlighting the simplification and efficiency of SwiftUI code compared to traditional UIKit methods. Key concepts such as property wrappers, observable objects, and combining asynchronous events are explored, demonstrating how they enhance state management and UI design. Examples showcase the use of SwiftUI components while emphasizing the reduction of boilerplate code and improved clarity in project structure.Unobtrusive JavaScript
Unobtrusive JavaScriptVitaly Baum
?
This document discusses unobtrusive JavaScript and patterns for implementing it in web frameworks. It begins by outlining problems with server-side JavaScript generation and the proliferation of JavaScript frameworks. It then covers common patterns for unobtrusive JavaScript like double templating, just Ajax, and update panels. The document also explains how Rails implements unobtrusive JavaScript using drivers, data attributes, and remote forms. It concludes by discussing how these patterns and techniques could be adapted for ASP.NET MVC.Drupal and diversity of Single sign-on systems
Drupal and diversity of Single sign-on systemsAlex S
?
The document discusses Single Sign-On (SSO) systems in relation to Drupal, outlining various implementations including shared tables, Bakery, LDAP, CAS, and SimpleSAMLphp. It highlights the advantages and limitations of each method while addressing the concept of user authentication and authorization. Additionally, it emphasizes the importance of considering security, configuration complexity, and deployment planning when choosing an SSO solution.Getting Started with Combine And SwiftUI
Getting Started with Combine And SwiftUIScott Gardner
?
The document provides an overview of the key topics that will be covered in a course on getting started with Combine and SwiftUI in iOS, including:
- Basics of the Combine framework for reactive programming
- Differences between UIKit and SwiftUI approaches
- Anatomy of a SwiftUI view and its key properties
- Creating a sample app to demonstrate Combine and SwiftUIAngular2 and TypeScript
Angular2 and TypeScriptDavid Giard
?
This document discusses building powerful enterprise applications with Angular and TypeScript. It provides an overview of key concepts in Angular including modules, components, templates, directives, services, routing and data binding. It also covers TypeScript features such as static type checking, transpiling to JavaScript, and advantages for productivity and managing large codebases. The document demonstrates how Angular and TypeScript can be used together to build robust single page applications.jQuery Mobile with HTML5
jQuery Mobile with HTML5madhurpgarg
?
JQuery Mobile is a framework for building mobile web applications using minimal code. It is built on top of jQuery and jQuery UI, leveraging their JavaScript libraries and CSS frameworks. JQuery Mobile provides a range of UI elements, widgets, page transitions, themes, and events for developing mobile apps that work across various mobile platforms and devices. It allows creating basic single page apps with HTML5 markup and managing page navigation. The framework also supports server communication through AJAX and provides mobile events for touch interactions.Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Elyse Kolker Gordon
?
The document discusses building universal web applications using React, highlighting the benefits of isomorphic (universal) applications, such as improved SEO and perceived performance. It outlines the architecture required, including server-side rendering, Redux, and React Router, alongside various code snippets and configurations. Additionally, it addresses challenges and tradeoffs in developing a universal app and provides resources for further learning.AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
?
The document provides a comprehensive introduction to AngularJS, a client-side JavaScript framework designed for building modern single-page applications (SPAs) with a focus on flexibility, modularity, and testability. It outlines key features of AngularJS, such as data-binding, directives, and routing, while also explaining its architecture and components like controllers and services. Additionally, it includes guidance on setting up an AngularJS application and utilizing tools for development.Cloud Endpoints _Polymer_ Material design by Martin G?rner
Cloud Endpoints _Polymer_ Material design by Martin G?rnerEuropean Innovation Academy
?
The document discusses building web applications using Google Cloud technologies including Cloud Endpoints, App Engine, and Material Design principles. It provides an overview of setting up a sample application with Cloud Endpoints to define REST APIs and generate client libraries. It also covers using Polymer and Material Design elements for the frontend and connecting it to the Cloud Endpoints backend.Polymer & the web components revolution 6:25:14
Polymer & the web components revolution 6:25:14mattsmcnulty
?
The document outlines the Polymer framework, emphasizing its role in simplifying web application development through web components that enhance interoperability and usability. It describes how Polymer allows developers to create custom elements and manage their behaviors while reducing boilerplate code. Additionally, it highlights the growing ecosystem of web components and invites engagement with the Polymer community for further exploration and tools.SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSencha
?
This document discusses handling errors in web applications. It begins by explaining what JavaScript errors are and how they are typically invisible to users. It then discusses how to catch errors using window.onerror or addEventListener and logging errors to help debug issues. Ideal error handling involves logging detailed error information to a database and notifying developers. The document wishes for more context around errors, like function arguments or AJAX requests. It introduces a new error logging and monitoring tool that provides detailed user environment data, function arguments, screenshots, and a timeline to help developers debug issues more easily.A brave new web - A talk about Web Components
A brave new web - A talk about Web ComponentsMichiel De Mey
?
The document discusses emerging web component technologies including templates, shadow DOM, custom elements, and HTML imports. It provides examples of how each technology addresses limitations of past approaches like jQuery plugins and Angular directives by allowing developers to build reusable, encapsulated widgets and components using standard web technologies like HTML, CSS, and JavaScript. These new standards enable building complex web UIs in a modular, component-based way.AtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-onsAtlassian
?
The document outlines the development of an Atlassian plugin, detailing the integration of active objects, event listeners, and web resources for dashboard tracking. It covers the structure of the plugin's XML descriptor, code for tracking dashboard views, and example web item configurations. Additionally, it provides guidance on managing Atlassian Connect addons and how to set up a development environment for these integrations.Web Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing CombinationAndrew Rota
?
The document discusses the integration of web components with Backbone.js to enhance modular web development. It emphasizes the advantages of custom elements and shadow DOM, presenting examples of component implementation and best practices. Additionally, it addresses considerations for componentization, such as encapsulation and portability.The Complementarity of React and Web Components
The Complementarity of React and Web ComponentsAndrew Rota
?
The document discusses the complementarity of React.js and web components, highlighting the benefits of web components such as encapsulation, reusability, and interoperability. It outlines best practices for building performant web components to be used in React.js while emphasizing the importance of keeping components small and stateless. The presentation also addresses challenges such as the handling of custom elements within React's JSX syntax.Controller in AngularJS
Controller in AngularJSBrajesh Yadav
?
The document outlines the role of controllers in AngularJS, describing how they define application behavior by managing the scope while avoiding DOM manipulation and input/output formatting. It also illustrates the controller hierarchy for property access across parent and child controllers, as well as methods for sharing data through services. Best practices for naming controllers and examples of AngularJS applications are provided.Google Polymer Framework
Google Polymer FrameworkKostas Karolemeas
?
The document discusses the rise of Polymer and web components, highlighting their significance in modern web development. It outlines the capabilities of the Polymer library, including custom elements, two-way data binding, and improved interoperability with other frameworks. Additionally, it introduces the Polymer app toolbox for building progressive web apps and provides insights into the integration of various web components and development tools.AtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using nowAtlassian
?
The document discusses various modern web technologies including web components, HTML templates, and ECMAScript 6/2015 features. It demonstrates how to create custom elements using JavaScript and explains the use of shadow DOM and promises. Additionally, it provides coding examples related to these technologies and emphasizes their importance for developers.Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
?
The document provides a comprehensive introduction to jQuery Mobile, explaining its purpose, installation, syntax, and features. It covers key concepts such as page layout, event methods, and content formatting, providing examples of the markup used. Additionally, it offers insights on using jQuery for handling HTML elements and creating interactive web applications.Similar to jQuery Mobile Workshop (20)
Creating web api and consuming part 2
Creating web api and consuming part 2Dipendra Shekhawat
?
This document discusses consuming a web API through HTML clients. It explains how to modify an index file to provide a GUI for displaying and interacting with product data from the web API. Code examples are provided to get, find, delete, update, and add products by calling the web API using jQuery AJAX calls. Screenshots are mentioned to demonstrate viewing all products or finding a specific product.Making mobile apps with web technology (revised)
Making mobile apps with web technology (revised)Manyoung Cho
?
The document discusses the evolution of mobile apps created with web technologies, highlighting the history of web applications, the impact of smartphones, and the competitive landscape among mobile platforms. It emphasizes the advantages of using HTML5 and CSS3 for cross-platform app development while mentioning various frameworks and technologies like PhoneGap. Additionally, the document outlines the pros and cons of web apps compared to native apps, pointing to their ease of development and deployment.Intro to Jquery Mobile
Intro to Jquery MobileJames Quick
?
This document provides an introduction to mobile application development using jQuery Mobile, covering essential topics such as setting up a development environment, basic app structure, and practical examples including a Magic 8 Ball web app. The session is structured with a range of activities including demos, hands-on applications, and Q&A, emphasizing the importance of a customer-centric approach through lean startup principles. Additional resources and links are offered for participants to submit their apps and explore tools like PhoneGap and Intel XDK.Bd conf sencha touch workshop
Bd conf sencha touch workshopJames Pearce
?
The document provides an overview of building mobile web apps with HTML, CSS, and JavaScript. It discusses using declarative HTML, programmatic JavaScript, and thin clients as alternatives to thick clients. It also summarizes support for HTML5 features across different mobile browsers and frameworks like Sencha Touch that can be used to develop rich mobile apps with web standards.HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2James Pearce
?
This document discusses jQuery Mobile and Sencha Touch, which are frameworks for building rich mobile web applications. It provides an overview of key features of each framework.
jQuery Mobile is built on jQuery and uses a modular library approach with markup-driven configuration. It supports features like progressive enhancement, pages, transitions between pages, disabling AJAX loading, back buttons, themes, toolbars, footers, buttons, lists, forms, and touch events.
Sencha Touch is a JavaScript framework that supports components, data access and MVC patterns, forms, scrolling, touch events, theming, and charts. It uses an application architecture with stores, models, and views. It supports common UI elements like lists, nestedReservoir Apps CMS & Tabs
Reservoir Apps CMS & TabsOptimum Entertainment
?
The document provides details on various tab types that can be created and customized within the Reservoir Apps CMS & Tabs app for both Android and iOS. It describes the functionality of tabs such as the home tab, image tab, contact tab, info tab, social tab, and others. Customizations for each tab include adding images, text, buttons, and other interactive elements. The CMS allows building a fully customized mobile app using different pre-made tab templates.Jarv.us Showcase ¡ª SenchaCon 2011
Jarv.us Showcase ¡ª SenchaCon 2011Chris Alfano
?
The document provides an overview and code snippets for an Eagles 2011 NFL Draft mobile app created with Sencha Touch. It discusses challenges faced like learning Sencha Touch, displaying live updates, and adapting images for different screen sizes. Lessons learned include destroying DOM elements when done, establishing post-launch content parameters, and using background-size for images. The document also discusses tooling, dependencies, and best practices for mobile development.Designing beautiful REST APIs
Designing beautiful REST APIsTomek Cejner
?
This document provides an overview of designing beautiful REST APIs. It discusses REST architectural constraints like using a uniform interface, statelessness, and cacheability. It also covers REST maturity levels and best practices for API design, including using appropriate HTTP methods and status codes. Hypermedia and the HATEOAS principle are emphasized as ways to make APIs more self-descriptive and navigable.JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the PlatformRobert Nyman
?
The document discusses JavaScript APIs and developing web apps. It covers topics like manifest files, installing web apps, offline capabilities, fullscreen support, camera, telephony, SMS, battery, vibration, and more. The goal is to enable running HTML5-based web apps across platforms like Windows, Mac, Android, and more using a common Web Runtime.supermediastore_mobileapp
supermediastore_mobileappDavid Ko
?
1. The document proposes a mobile website for Marah that would provide e-commerce functions such as browsing products by category, searching for products, viewing deals and promotions, adding products to a wish list and shopping cart, checking out, and managing account details.
2. It outlines the key functions and user flows, drawing from examples from Amazon and Overstock, and recommends using common mobile design patterns such as tab menus, list views, and collapsed menus to optimize the user experience.
3. Sketches are provided for the page flows and main pages including home, category, deals, product list, account settings, wish list, cart, and checkout pages.iPhone offline webapps
iPhone offline webappsHome
?
This document discusses how to build an offline web application for the iPhone using HTML5 and JavaScript. It covers optimizing the interface for the iPhone, using a client-side JavaScript database, and caching the application with a HTML5 manifest file to allow offline access. The document provides code examples and steps for each part of creating an offline webapp for iPhone.Making mobile apps with web technology
Making mobile apps with web technologyManyoung Cho
?
This document discusses the trend of building mobile apps using web technologies instead of native mobile platforms. It covers the history of web apps, how the mobile web can function like apps, and frameworks like PhoneGap that allow building cross-platform apps using HTML, CSS and JavaScript that can still access core device features. Key frameworks and standards discussed include Widgets, Chrome Web Store, Android Widget Runtime, Nokia Ovi Developer, Samsung Widget SDK, and the W3C Device APIs working group. The document argues that the mobile web is a good solution for building cross-device, cross-platform apps and that the market potential is huge given the number of mobile users and operators worldwide.Shopsial TVSS week 3
Shopsial TVSS week 3shopsial
?
This document discusses the development of a mobile shopping platform called Shopsial. It begins by outlining problems with traditional in-store shopping like long queues. It then presents Shopsial as a solution that allows shopping via smartphone to avoid queues and gather customer feedback. The platform aims to make shopping a game and offer unique discounts while saving customers time. Revenue models involve selling the platform or operating as a marketplace taking cash or credit payments. Updates provided discuss progress implementing core features and prototypes in the initial development phase.Mat Marquis - JQuery Mobile
Mat Marquis - JQuery MobileHarvard Web Working Group
?
This document provides an overview of jQuery Mobile, a mobile web framework that makes it easy to build mobile-optimized websites and apps. It discusses key features like UI elements, navigation, themes, and more. The document also outlines steps for getting started, including adding jQuery Mobile to an existing website and how various markup elements are configured. Resources for tools, books and sponsors are listed at the end.jQuery Mobile and JavaScript
jQuery Mobile and JavaScriptGary Yeh
?
jQuery Mobile part 2 discusses various topics related to jQuery Mobile including document events, configuration, methods and utilities, themes, and app packaging. Some key points:
- Document events in jQuery Mobile include mobileinit, ready, and load which are used to configure jQuery Mobile settings and enhance markup.
- Configuration options exist for global settings, UI, AJAX, regionalization, touch overflow, and widgets. These can be modified to customize jQuery Mobile's behavior.
- Methods and utilities provide functions for manipulating data attributes, changing pages, and accessing platform information.
- Themes use CSS3 properties and gradients to style elements with different "swatches" for headers, content, and buttons. ThemesE2 appspresso hands on lab
E2 appspresso hands on labNAVER D2
?
This document provides tutorials and hands-on labs for developing mobile apps using Appspresso. It begins with tutorials for creating new Appspresso projects and explaining the project structure. It then covers topics like the HTML structure for Appspresso apps, using jQuery Mobile widgets like headers, lists and events, and accessing device capabilities like the accelerometer and gallery. The document concludes with instructions for exporting and uploading an app to app stores.E3 appspresso hands on lab
E3 appspresso hands on labNAVER D2
?
This document provides tutorials and hands-on labs for developing mobile apps using Appspresso. It begins with tutorials for creating new Appspresso projects and explaining the project structure. It then covers topics like the HTML structure for Appspresso apps, using jQuery Mobile for the UI, accessing device APIs, and publishing apps to app stores. The document aims to help developers learn the Appspresso platform through practical examples and step-by-step instructions.¥¹¥Þ©`¥È¥Õ¥©¥ó¥µ¥¤¥È¤Î×÷³ÉÐg - ´ó´¨ÑóÒ»
¥¹¥Þ©`¥È¥Õ¥©¥ó¥µ¥¤¥È¤Î×÷³ÉÐg - ´ó´¨ÑóÒ»okyawa
?
The document discusses various techniques for developing mobile web applications, including:
1. Using viewport meta tags to control layout on different screen sizes.
2. Storing cached content in Web Storage instead of cookies for better performance on mobile.
3. Loading images lazily via Ajax to improve perceived performance.
4. Detecting device orientation changes and resizing content appropriately for portrait and landscape modes.Internship_p.pptx the development of chatbot using OpenAI API
Internship_p.pptx the development of chatbot using OpenAI APIAbhishek934304
?
The document outlines an internship experience at Persistent Systems Ltd., a software development company established in 1990. The primary project involved developing a chatbot for product suggestions by integrating OpenAI API with a Shopify store, aimed at enhancing user interaction and product discovery. Key outcomes include improved technical skills, API integration, and exposure to a professional work environment.Create a mobile web app with Sencha Touch
Create a mobile web app with Sencha TouchJames Pearce
?
Sencha Touch is a JavaScript framework for building rich mobile web apps using HTML5 standards. It provides various UI components like lists, forms, charts and tools for building common app patterns. The framework allows developers to structure their app, lay out the user interface with panels, toolbars and lists, model and load data to populate the UI, and customize the visual theme. Sencha Touch apps can be built to work across multiple mobile devices using only web technologies.Ad
More from Ron Reiter (9)
Securing your Bitcoin wallet
Securing your Bitcoin walletRon Reiter
?
The document outlines the principles and technologies behind securing a Bitcoin wallet, including public key cryptography and blockchain technology. It explains how private and public keys function within Bitcoin transactions and discusses various methods for securing these keys, emphasizing the risks associated with internet-connected storage. It also introduces concepts like deterministic wallets, secret sharing, and multisignature wallets as strategies to enhance security.Brogramming - Python, Bash for Data Processing, and Git
Brogramming - Python, Bash for Data Processing, and GitRon Reiter
?
The document discusses Python coding conventions and best practices including PEP 8. It covers topics like formatting, spacing, imports, and other stylistic guidelines to make Python code more readable and consistent across projects. The Zen of Python philosophy emphasizes simple and explicit code over complex solutions. Git concepts like merge vs rebase and Git flow are also briefly mentioned.BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...Ron Reiter
?
This document discusses scaling out big data computation and machine learning using Pig, Python and Luigi. It describes how the speaker's company processes large amounts of data to build a graph of related devices. It then discusses using Pig for scalable data processing, Python for machine learning tasks, and Luigi for workflow management between Pig and Python jobs. The speaker provides examples of how to use Pig scripts with Python UDFs for tasks like training models and predicting at large scale.Introduction to Bootstrap
Introduction to BootstrapRon Reiter
?
This document provides an introduction to Bootstrap, an open-source front-end framework for building responsive mobile-first websites and web applications. It discusses the basics of web development using HTML, CSS, and JavaScript. It then explains what Bootstrap is, how to add it to a website, and how to use its grid system, forms, buttons, and other common elements. Resources for using, customizing and finding additional components for Bootstrap are also provided.Mobile Spaces
Mobile SpacesRon Reiter
?
This document summarizes Android application initialization and security. It discusses how Android applications run in a virtualized, usermode sandbox with unique permissions. The summary is:
Android applications run in a virtualized usermode sandbox, with each assigned a unique ID and home directory. The application initialization process involves the ActivityManager requesting the System Server to start a new process, which then loads the application into a forked Zygote process while setting permissions. Interactions between applications occur through the binder IPC mechanism mediated by the System Server. MobileSpaces provides a virtualization platform that allows viewing these Android internals without requiring root access.Building Chrome Extensions
Building Chrome ExtensionsRon Reiter
?
This document provides an overview of building Chrome extensions. It discusses what Chrome extensions are, how to build one using the manifest.json file and loading the extension in developer mode. It also covers packaging and deploying extensions to the Chrome Web Store. Finally, it details several extension features including browser actions, page actions, context menus, content scripts, the background page, options page, tabs API, and desktop notifications.HTML5 New Features and Resources
HTML5 New Features and ResourcesRon Reiter
?
This document summarizes new features in HTML5 including CSS3 features like media queries, rounded corners, and transitions. It also covers JavaScript APIs like localStorage, IndexedDB, the cache manifest, drag and drop, web sockets, and the file system API. The document provides examples and links to demonstrations of these new capabilities, making it a useful resource for learning about HTML5 features and seeing them in action.Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)Ron Reiter
?
This document provides an overview of digital audio and signal processing. It discusses representing sound digitally through sampling rate and bit rate. It describes problems like clipping, Nyquist frequency, and sample rate limits. It also covers topics like harmonics, fundamental frequency, dynamic range, and common signal processing tools. The document is presented by Elad Gariany and promotes their company Vidit, describing open roles there working on audio and video engineering.Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAERon Reiter
?
The document provides a comprehensive guide on building HTML5 web applications using Google App Engine, Backbone.js, Require.js, and jQuery, focusing on the architecture of a to-do list application. It explains the roles of key technologies, outlines the front-end and back-end structure, and details the implementation of a REST API for CRUD operations on to-do items. Additionally, it covers the organization of web app directories, templates, and event handling within the Backbone.js framework.Ad
jQuery Mobile Workshop
- 2. What are we going to do? ?? ProductShop ¨C Product Shopping Application ?? Build a List View using jQuery Mobile (codiqa.com) ?? Make an AJAX call and populate the List View ?? http://productshoppingapi.appspot.com/search?q=digital+camera ?? Upload your jQuery Mobile project to Google App Engine ?? Browse using your smartphone / tablet
- 3. Codiqa ?? Create an account at http://www.codiqa.com ?? Create a new project called ProductShop
- 4. Build the application screen
- 5. Build the application screen ?? Form ?? Search button ?? Placeholder: Search Product¡ ?? Name: q ?? Submit ?? Text: Search ?? Icon: Search ?? Theme: Blue ?? List View ?? Id: products ?? Delete the divider
- 6. Start Working ?? Download the project to a working directory
- 8. Build the AJAX Search ?? Delete the contents of the list view we created using Codiqa ?? AJAX endpoint - http://productshoppingapi.appspot.com/search?q=<query> ?? The endpoint sends CORS headers so we can use it form anywhere. The back-end is a simple Google App Engine Python application which uses the Google Product Search API. ?? Once we get the response back, iterate over the items array ?? Empty the #products list view ?? For each item, get the ¡°product¡± item and create a list item: <li> <a href=/slideshow/jquery-mobile-workshop/16896843/¡°{{ item.product.link }}¡±> <img src=/slideshow/jquery-mobile-workshop/16896843/¡°{{ item.product.images[0].link }}¡±/> {{ item.product.title }} </a> </li> ?? Finally, refresh using $(¡°#products¡±).listview(¡°refresh¡±).
- 9. AJAX Search Code // run this code only after initialization $(function() { // handle search form submit $("form").submit(function(event) { // prevent the default submit behavior event.preventDefault(); // prepare the query URL var url = "http://productshoppingapi.appspot.com/search?" + $(this).serialize(); // make the AJAX request, and iterate over the results $.getJSON(url, function(data) { resetProducts(); for (var i = 0; i < data.items.length; i++) { var product = data.items[i].product; addProduct(product); } $("#products").listview("refresh"); }); }); });
- 10. ResetProducts function resetProducts() { $("#products").empty(); var divider = $("<li data-role='list- divider'>Search Results</li>"); $("#products").append(divider); }
- 11. addProduct function addProduct(product) { var productView = $("<li><a href=/slideshow/jquery-mobile-workshop/16896843/& + product.link + "'><img src=/slideshow/jquery-mobile-workshop/16896843/& + product.images[0].link + "'/> " + product.title + "</a></li>"); $("#products").append(productView); }
- 12. Uploading to Google App Engine ?? Download Python if you¡¯re on Windows ?? Download the GAE Python SDK ?? Go to http://appengine.google.com/ and create a new app (you¡¯ll need to do SMS account activation) ?? Choose an identifier ?? Create a new Google App Engine app with the identifier through the Google App Engine Launcher ?? Add your directory (codiqa-app) to your project directory ?? Add the following to app.yaml: - url: /app static_dir: codiqa-app ?? Upload through the Google App Engine Launcher ?? Access <youridentifier>.appspot.com/app/app.html through your mobile phone or tablet ?? You¡¯re done!
- 13. Reference ?? Download everything from here: ?? https://github.com/ronreiter/productsearch