The document discusses client-side storage options for web applications, including cookies, Web Storage, IndexedDB, and File APIs. It provides details on each technology, including examples, limitations, and browser support. It emphasizes that IndexedDB and client-side storage can provide benefits like faster loading, reduced network usage, and the ability to work offline. The document also lists several sites that provide more information and tools for exploring these web storage technologies.
IndexedDB allows for more advanced storage of key-value data in the browser compared to localStorage. It uses a database model with objects stores that can be accessed through transactions. To use IndexedDB, a database is created and opened with a specified version number. Data can then be stored and retrieved from object stores using asynchronous requests within transactions. The presentation covered the basic structure and usage of IndexedDB but noted there are additional advanced features still in development.
This document provides an introduction and overview of AJAX (Asynchronous JavaScript and XML). It discusses the advantages of JavaScript, including how AJAX allows for reactive web interfaces similar to desktop applications by avoiding full page refreshes. The key principles of AJAX are outlined, including using JavaScript for user interactions, processing data in the browser, and reducing client-server communication. AJAX is described as a technique used to build Rich Internet Applications (RIAs) that have features similar to desktop apps but are executed within a browser. The document also provides details on using the XMLHttpRequest object to make asynchronous requests to a server and handle the server response.
Quick start guide to java script frameworks for sharepoint add ins osloSonja Madsen
This document provides a quick start guide to JavaScript frameworks for SharePoint add-ins. It discusses popular JavaScript libraries and frameworks like jQuery, Bootstrap, and Modernizr. jQuery is introduced as the most popular JavaScript library used for DOM manipulation and AJAX calls. Bootstrap is described as the most popular framework for responsive web design, providing pre-built HTML, CSS, and JavaScript components. The document also covers using LESS and polyfills with frameworks, and provides several links for additional resources.
The document discusses web services and SOAP web services. It defines a web service as a service that is accessed over a network and is independent of communication protocols, data formats, and technologies. SOAP is introduced as a standard protocol for exchanging information between computer networks that is also independent of transport protocols, data formats, and standards. The document then summarizes several WS-* specifications and standards related to SOAP, including WS-Addressing, WS-Reliable Messaging, WS-Coordination, WS-Atomic Transaction, and WS-Business Activity. It also discusses WS-Policy and WS-Metadata Exchange. The document concludes with discussing a proof of concept distributed cache system that demonstrates scalability, performance, and
HTML5 provides new semantic elements that allow for more precise structuring and presentation of web content. Key elements include <header> for introductory content, <nav> for navigation links, <article> for self-contained compositions, <section> for document sections, <aside> for tangential content, and <footer> for closing content. HTML5 also introduces new elements like <time> for dates and times, <address> for contact information, <figure> for images and captions, and <details> for expandable content sections.
This document covers topics related to frontend web development including HTML5, CSS3, JavaScript, and jQuery. It discusses different types of web and mobile applications, as well as technologies and frameworks. The document then goes into detail about HTML document structure, various HTML elements like headings, paragraphs, links and images, using CSS for styling, CSS selectors, block and inline elements, and the CSS box model. It also covers HTML links, lists, and input elements.
Displaying message on web page in JavascriptCodewizacademy
How to write to the web page window using Javascript? Various methods available in Javascript and how they differ. How to embed or link Javascript code in HTML.
Quick start guide to java script frameworks for sharepoint apps spsbe-2015Sonja Madsen
Learn about JavaScript frameworks and new developer practices in SharePoint and on Office 365. JavaScript frameworks are there for you to help you develop faster and easier. You don't need to do your apps from scratch.
Apps and the cloud app model have brought not only new ways to interact, send, write, and receive data from SharePoint. Apps have also brought JavaScript frameworks into SharePoint development. JavaScript frameworks are right there as part of the app template when you start a SharePoint hosted or a Cloud app. In this session, I'll show what you can do with JavaScript frameworks that are part of the app template. I'll show jQuery, Bootstrap, and modernizr.
[SoftServe IT Academy] - JavaScript StoragesIvan Matiishyn
This document discusses different methods for client-side storage in web applications, including localStorage, sessionStorage, cookies, and offline caching. It covers the basics of how to use localStorage and sessionStorage for persistent and session-based storage, how to work with cookies including checking if they are enabled and settings like expiration, and explores other legacy storage options in Internet Explorer like userData. The document also provides an overview of application caching manifests for offline web applications.
The latest browser APIs now make it possible to redesign how your web pages interact with other applications. Web pages are too often little islands that fail to play well with the wider user interfaces of our devices. This talk will explore the possibilities from Drag and Drop to Web Intents, demonstrating how to make web pages more equal in the world of applications.
The document discusses using the Akiban REST module to build a REST API for a virtual pin boards application. It describes how the module allows querying and retrieving structured data as JSON using SQL and multi-GET requests. It also discusses how the module supports efficiently filling in repeated user data and scaling the application as the number of users, boards, pins, and interactions grow.
JavaScript is an object-based scripting language used to make web pages interactive. It was originally created to enable scripting capabilities for Netscape Navigator but is now supported by all major browsers. JavaScript can update and change both HTML content and presentation, and can react to user events like clicks, form inputs, and page loads. It uses a document object model and predefined objects to access and modify HTML elements and browser capabilities on the fly.
MongoDB for Coder Training (Coding Serbia 2013)Uwe Printz
Slides of my MongoDB Training given at Coding Serbia Conference on 18.10.2013
Agenda:
1. Introduction to NoSQL & MongoDB
2. Data manipulation: Learn how to CRUD with MongoDB
3. Indexing: Speed up your queries with MongoDB
4. MapReduce: Data aggregation with MongoDB
5. Aggregation Framework: Data aggregation done the MongoDB way
6. Replication: High Availability with MongoDB
7. Sharding: Scaling with MongoDB
Plone as itself is big and hard to evolve, we want to expose some experience we had to reduce the complexity of Plone, some experience on our projects on Plone.
This presentation provides an overview of web fundamentals, including:
1) The evolution of the web from Tim Berners-Lee's original invention (Web 1.0) to user-generated content (Web 2.0) to artificial intelligence and personalization (Web 3.0).
2) The basic components of the web including websites, webpages, web applications, clients like browsers, and servers.
3) How web communication works using protocols like HTTP and techniques like cookies to transfer information between clients and servers.
«How to start in web application penetration testing» by Maxim Dzhalamaga 0xdec0de
This document provides guidance on how to start web application penetration testing. It recommends gaining basic knowledge of web technologies like HTTP, HTML, and JavaScript as well as common web vulnerabilities. Tools mentioned include web proxies like Burp Suite and web spiders. The workflow outlined includes information gathering, authentication testing, session management testing, authorization testing, parameter fuzzing, file uploads testing, and denial of service testing. Specific techniques are described for each part of the testing process, such as identifying all application entry points, brute forcing credentials, investigating session tokens, and ensuring proper session termination.
Presentation on MongoDB given at the Hadoop DC meetup in October 2009. Some of the slides at the end are extra examples that didn't appear in the talk, but might be of interest.
On the incoherencies in web browser access controlUT, San Antonio
This document discusses inconsistencies in how web browsers implement access control policies. It identifies three main issues: 1) Inconsistent labeling of principals for DOM and cookie resources, 2) Inappropriate handling of changes to principal labels, and 3) Disregard of the user principal for resources like browsing history. The paper argues for a more coherent approach where each shared browser resource has a clearly defined principal and access control policy.
The document discusses the evolution of web applications from thin clients with fat servers to more balanced architectures. New browser technologies like HTML5, faster JavaScript engines, local storage, and offline capabilities allow more processing to be done locally on the client. This enables richer interfaces, offline usage, and more balanced work distribution between the client and server. It provides examples of how a web application may utilize these new capabilities, such as storing data locally and caching interfaces while communicating with a server via JSON.
Slidedeck presented at http://devternity.com/ around MongoDB internals. We review the usage patterns of MongoDB, the different storage engines and persistency models as well has the definition of documents and general data structures.
Slides from an HTML5 overview session I presented at work...
This presentation has an accompanying sample webapp project: http://code.google.com/p/html5-playground
The document provides an overview of browser-based digital preservation including:
- The current state of digital preservation which relies on web crawlers and archives like the Internet Archive. However, this approach is insufficient for preserving pages that are not popular, behind authentication, or use complex JavaScript.
- The requirements for new software to directly capture and preserve web pages from within the browser in order to address the limitations of current archival approaches.
- A proposed system called "WARCreate" that would leverage the Chrome extension API to capture web pages and resources and generate WARC files for preservation while maintaining the original browsing context.
The document discusses the features and capabilities of HTML5. It covers new semantic elements, forms, offline storage, device access, multimedia, 3D graphics, performance improvements, and CSS3 features. Key points include more meaningful tags, custom data attributes, offline application caching, geolocation, cameras, web sockets, and canvas/WebGL for graphics.
Top 10 HTML5 Features for Oracle Cloud DevelopersBrian Huff
This document discusses top HTML5 features for Oracle Cloud developers. It begins with an introduction to various Oracle Cloud services that use HTML5 extensively, such as Oracle Sites Cloud Service. It then discusses why HTML5 is important for cloud development due to its wide acceptance, rapid development cycles, and cheaper hosting model. The document outlines the top 10 HTML5 features developers should know, including semantic HTML, local storage, geolocation, OAuth2, CORS, advanced forms, WebSockets, WebWorkers, built-in audio/video support, and custom DOM elements. It provides details and examples for each feature.
This document discusses HTML5 programming and several HTML5 features including multimedia, canvas, web sockets, web storage, indexed databases, offline capabilities, file systems, and geolocation. It provides examples and explanations of how to use these new HTML5 features in programming and notes that while specifications continue to evolve, real-world browser support is more important. It aims to cover programming aspects of video, canvas, web sockets, data storage, offline usage, file systems, and geolocation.
This document summarizes Joone Hur's presentation on web standards support in WebKit. It discusses several new and emerging web APIs including custom protocol and content handlers, AddSearchProvider, Navigation Timing, device APIs for battery status, contacts, and media capture. It also covers the Unified Storage Quota API, Shadow DOM API, and notes that WebCL and WebKit2 have been added to Samsung and Nokia browsers.
jQuery is a lightweight JavaScript library that simplifies HTML document traversal and manipulation, event handling, animation, and Ajax interactions. It works by using a simple syntax to select elements and perform actions on them. To use jQuery, include the jQuery library file, wrap code in a document ready function, and use the $ selector and jQuery methods. jQuery greatly improves the efficiency of JavaScript coding.
Introduction in the JavaScript Programming language typically used in the front end of Web Applications. More information can be found at : https://www.spiraltrain.nl/course-javascript-programming/?lang=en
This document provides an overview of single page applications (SPAs) and AngularJS. It discusses why SPAs are useful, how they work, and key aspects of AngularJS like data binding, directives, routing, and dependency injection. Code samples are presented to demonstrate basic concepts like data binding, controllers, filters, and building an e-commerce application with routing and services. Future sessions are proposed to cover integration with Node.js backends, testing with Karma, and custom directives.
The document summarizes new features and improvements in Internet Explorer 8, including standards compliance, multiple rendering modes, developer tools, AJAX enhancements, and security updates. Key points include improved support for CSS 2.1, HTML 5, and accessibility standards; contextual accelerators and activities; RSS-based WebSlices for content subscription; back/forward navigation and DOM storage for AJAX apps; and integrated HTML, CSS, and JavaScript debugging tools. A timeline outlines the beta and release schedule through 2008.
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
Node.js: The What, The How and The When
with Richard Nieuwenhuis
Vert.x is an asynchronous application development framework that allows applications to be written in multiple programming languages including JavaScript, Ruby, Python, Groovy, and Java. It provides a simple and scalable model for concurrency using asynchronous event loops and message passing. Applications can leverage existing Java libraries while avoiding common concurrency issues. A key feature is the distributed event bus that allows communication across server and client components. Vert.x uses a modular system to compose applications from reusable components.
The document discusses trends in application development for mobile and cross-platform use. It notes the rise of consumerization of technology and the need to build apps that can be used on any device. This has led to changes like using HTML and JavaScript instead of platform-specific languages to allow cross-platform support. Frameworks like Backbone.js and libraries like Underscore.js can help manage the complexity of building such apps. The document also discusses considerations for responsive design, client-side architecture including MV* frameworks, and tools to support development.
HTML5 introduces significant changes for today\'s websites: new and updated tags, new functionality, better error handling and improved Document Object Model (DOM). However, the HTML5 new features come with new (application) security vulnerabilities. This presentation reviews the new attack vectors, associated risks and what a needs to be taken into consideration when implementing HTML5.
avaScript, REST, CSOM, Office 365 APIs: Like it or not, client-side development is the future of SharePoint development. At the forefront of this wave is the powerful JavaScript library jQuery. Utilizing jQuery in SharePoint, developers can take their applications to the next level in less time. What's more, you can utilize jQuery in SharePoint 2007, 2010, 2013, and in Office 365 often without making changes to your code. In this class, you gain a new appreciate for jQuery and learn:
"What's possible," including visual enhancements and practical business intelligence
Tips and Tricks for deploying and maintaining scripts
How to get quick wins with little effort using third-party jQuery libraries
How to interact with SharePoint forms and lists using JavaScript and jQuery
This document provides an overview and introduction to AJAX (Asynchronous JavaScript and XML). It discusses what AJAX is, the core components that make up AJAX applications, how AJAX works, potential problems with AJAX, and examples of AJAX in use. The document also includes code samples that demonstrate building a basic AJAX application, including using the XMLHttpRequest object to asynchronously retrieve and display XML data on a web page without reloading. Contact information is provided for the presenters.
- Web Worker context compared to SSJS context
- Mixte Synchronous / Asynchronous APIs
- Making Existing Client-side JS APIs recommendations adaptable to the server context
- Defining W3C recommendation for Server-side JavaScript APIs?
- Remote debugging for Remote (Server) Workers
- Potential common package/module format support (CommonJS, AMD, ECMAScript 6)
- DOM Events, ProgressEvent, EventSource, Server Events (EventEmitter?), & Client Events
- Feedback on previous work at CommonJS and from some SSJS implementations
- Feedback on our experiences in the Wakanda implementation
- start the activity of the community group
4. Client-side Storage Options
• Cookies
• Web Storage
• Web SQL (being discontinued in favor of IndexedDB)
• IndexedDB
• File APIs
• Frameworks (such as Backbone.js)
5. Why Use Client-side Storage?
• Mobile applications
• Disconnected applications
(To Do Lists, Image Processors)
• Partially disconnected applications
(Mail Clients, Calendar, Field Devices)
• Faster web sites with offline storage
(Offline Catalogs, User Preferences)
• Reduce network traffic
• Significantly speed up display times
• Save temporary state
• Richer UI experience with user-updated data
• Prevent work loss from network disconnects
8. Cookies
• Included in every http request
• Data is sent unencrypted over the internet
• Restricted to 4KB storage on client-side
• Stores only strings
• Used for:
- shopping carts
- user login
- personalization
- ad tracking
- analytics
9. Web Storage
• W3C Web Storage Recommendation
Defines an API for persistent data storage of key-value pair data
in Web Clients
• localStorage and sessionStorage
• Data is stored as string, or objects using JSON.stringify,
have to convert other types such as ints, floats, objects, and
booleans
• Limited to approx. 2.5 - 5MB per application
• Can hook into browser events, such as offline, online, storage
change
• Can be disabled by the user or system administrator
• Don’t store sensitive data, as like cookies, vulnerable to cross
site scripting attacks
• Example:
localStorage.setItem(‘favoriteFish’, ‘herring’);
$(‘#demo’).html(‘My fav fish is: ‘ + localStorage.getItem(‘favoriteFish’));
10. HTML5 sessionStorage
• User carrying out single transaction, but could have
multiple transactions in different windows at the same
time. Cookies don’t handle this case well. Session ends
when browser closed
• Each page has own copy of the session storage object
• Example: Two page interaction
Page 1:
<label>
<input type=“checkbox”
onchange=“sessionStorage.insurance=checked ? ‘true’ : ‘’ “>
I want insurance this trip.
</label>
Page 2:
if (sessionStorage.insurance) { your code here }
11. HTML5 localStorage
• Spans multiple windows, and lasts beyond current
session
• Is not transmitted with every request like cookies
• Example: Storing user data
<p>
You have viewed this page
<span id=“count”> number of </span> time(s).
</p>
<script>
if (!localStorage.pageLoadCount)
localStorage.pageLoadCount = 0;
localStorage.pageLoadCount =
parseInt(localStorage.pageLoadCount) + 1;
document.getElementById(‘count’).textContent =
localStorage.pageLoadCount;
</script>
12. IndexedDB
• Indexed Data API W3C Working Draft:
In-browser database with key-value pairs and basic
indexing
• Available in Synchronous API & Asynchronous API
• Stores most JS Objects
• Temporary: up to 20% of available space per app
• Permanent: can request up to 100% of available space
• Example:
function createDB() {
var openRequest = webkitIndexedDB.open(‘Favorites’, ‘2’);
openRequest.onerror = errorHandler;
openRequest.onsuccess = function(e) {
db = openRequest.result;
createStore(db);
}
}
13. File APIs
• Stores text and binary
• FileReader API and FileWriter API
• Example:
function fetchImage() {
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘/img/childhood.png’, true);
xhr.responseType = ‘arraybuffer’;
xhr.onload = function(e) {
saveImage(xhr.response);
};
xhr.send();
}
14. Fall-back Strategy
For browsers that don’t support
Web Storage or IndexedDB:
• Cookies
• Backbone.js
• PersistJS
• Amplify.js
• Store.js
• And many more…
20. Security of IndexedDB
• Mozilla info: IndexedDB uses the same-origin principle,
which ties the store to the origin that creates it
(typically, it is the site domain or subdomain), so it
can’t be accessed by any other origin
• Doesn’t work for content loaded from another site
(either <frame> or <iframe>)
• Not recommended for sensitive data
• More on security in another meeting…
22. Helpful Sites
• Canisue.com: browser and device support for features
• Html5rocks.com: Google project about HTML5
• HTML5 & CSS3 Readiness: Browser support tool
• HTML Living Standard: Web Storage specifics
• My Web Store: Example of IndexedDB by Parashuram
• Using IndexedDB: Mozilla Developer Network How-To
• Client-side Storage: Interesting comparison
• WebPlatform.org: W3C standards and resources
23. Further Research
• There was so much information, and so many great
resources to investigate.
• Thank you!