Tuesday, January 5, 2016

The Application Cache of HTML5


The Application Cache of HTML5

by carmel schvartzman
The Application Cache in HTML5  allows us to make an offline version of a web page, releasing the load on our web server, and making the web pages a lot more responsives increasing performance.  That is because in this case the browser will only download changed web pages from the server.
This new HTML5 feature works by means of creating a cache manifest file,  a file of ”text/cache-manifest” MIME-type.


You should create MIME-types to allow web clients handle new file name extensions appropriately; elsewhere, if IIS does not recognize the file name extension, then sends the content as the default MIME type: Application, which means that clients cannot process the file.
So let’s add the cache-manifest MIME type to our web server. Type “inetmgr” in the RUN window:
The Application Cache of HTML5

After IIS opens, select the Default Web Site, and double-click “MIME Types”:
The Application Cache of HTML5

Click the “Add” link:

…  and type the “.appcache” file extension and its corresponding “text/cache-manifest” MIME type:

The Application Cache of HTML5

The Application Cache of HTML5


Now , lets use the Application Cache feature. First, let’s create a Manifest File with .appcache as extension. In this file will be three sections: CACHE MANIFEST( setting what should be cached),NETWORK(setting what should NOT BE CACHED) and FALLBACK (for fallback pages if a page is not accessible) . Therefore, type the “CACHE MANIFEST” section , in which we’ll list all the files that must be kept in cache:
The Application Cache of HTML5

Then, set which files should NOT BE CACHED, meaning that every request will be sent to the Web Server, using the “NETWORK” section:
The Application Cache of HTML5

Finally, add a FALLBACK section to estipulate which are the web pages in recovery state:
The Application Cache of HTML5


There is a ” # ” to open comments, and also there are used by the HTML5 browsers to decide whether the web page has been updated , to evict them from cache and reload them:
The Application Cache of HTML5

You can force the browser to renew the cached pages by changing the Manifest File of the application.
Finally, include the “manifest” attribute in the document’s  html  tag:



Important: different browsers can have different size limits for web cached data.

That’s all: enjoy HTML5!!!
עריכה: כרמל שוורצמן


Category: HTML5 WEB STORAGE

Sunday, December 27, 2015

Local Web Storage in HTML5


 by carmel schvartzman
[HTML5 Web storage is supported in IE 8+, Opera, Chrome, Firefox, and Safari]
In HTML5,  web pages can now store data in the user’s browser, instead of using cookies. Web Storage is more secure and faster.


Local Web Storage in HTML5


It is now possible to store large amounts of data in the client side,  affecting in a positive way the website’s performance.
The data is stored in a localStorage object, a  Collection structure based on key/value pairs,  stored as strings. We must convert them to the required format when needed.
  • Can a web page access data stored by another web page?    NO:  a page can only access data stored by itself.
There are two kinds of Web Storage in HTML5:   SESSION WEB STORAGE and LOCAL STORAGE.
The difference between them are related to the duration of storage:
  • 1-  SESSION STORAGE:     data is stored in client side until the session ends.
  • 2- LOCAL STORAGE:       data is stored in client side with no expiration date!!!!

The HTML5  Local Web Storage object stores the data not just for one session, but even when the user closes the browser window,  the data is persisted in the user’s local machine.

You can also use local storage in the browser, which is good even if the user closes the tab, the window or  the browser itself.
However, if you open another browser, the localStorage object will be initialized by itself, meaning that there will be now TWO localStorage objects in your machine, each one corresponding to each browser. If you are using Chrome and also IE, each one will have its ownlocalStorage object.
1.  To use the Local Web Storage HTML5 feature, add to your html page  a button containing a counter. We’ll see how the counter is stored permanently inside the user’s browser, beyond the web session:



2. Next, let’s add some css style to our page:
Local Web Storage in HTML5


3. Now create a script as a head child. Inside the script type the function you just linked to the onclick button’s event:


Local Web Storage in HTML5


The code check whether the Storage object has been initialized, meaning that the browser supports it.
<script>
function fnCounter() {
if (typeof (Storage) !== “undefined”) {
if (localStorage.counter) {
localStorage.counter = Number(localStorage.counter) + 1;
}
else {
localStorage.counter = 1;
}
document.getElementById(“counter”).innerHTML = “<H1>” + localStorage.counter + “</h1>”;
}
else {
document.getElementById(“counter”).value = “Your browser does not support HTML5″;
}
}
</script>
4. Nested beneath the “if” clause, build a “if then else” block to check whether the page has just loaded and the stored key/value must be initialized:


Local Web Storage in HTML5

Local Web Storage in HTML5


5. If so, just increment the counter value:


Local Web Storage in HTML5

Local Web Storage in HTML5



6. Now output the counter as the text button:
Local Web Storage in HTML5




7. Having finished to code, let’s test it:


Local Web Storage in HTML5


8. Load the web page. Click the button to increment the counter, and refresh the browser to see that the value has been persisted:

Local Web Storage in HTML5



9. Next, open another Browser Tab with the same URL, to check that the counter is kept running:  that’s because each session
SEES THE LOCAL Web Storage!!!



Local Web Storage in HTML5


10. Increment the counter by pulsing the button:


Local Web Storage in HTML5


Local Web Storage in HTML5


11. Close the browser, reopen it and you’ll see that the stored data has been KEPT AND PERSISTED and therefore the counter continues incrementing:

That’s all: enjoy HTML5!!!

עריכה: כרמל שוורצמן

Category: HTML5 WEB STORAGE

jQuery animate() Method

SINTAX :
(selector).animate({JSON styles object},speed in milliseconds,easing,callback)

Allows the developer to implement custom animations, modifying one or more of the following parameters :
  • backgroundPositionX
  • backgroundPositionY
  • borderWidth
  • borderBottomWidth
  • borderLeftWidth
  • borderRightWidth
  • borderTopWidth
  • borderSpacing
  • margin
  • marginBottom
  • marginLeft
  • marginRight
  • marginTop
  • outlineWidth
  • padding
  • paddingBottom
  • paddingLeft
  • paddingRight
  • paddingTop
  • height
  • width
  • maxHeight
  • maxWidth
  • minHeight
  • minWidth
  • fontSize
  • bottom
  • left
  • right
  • top
  • letterSpacing
  • wordSpacing
  • lineHeight
  • textIndent
The optional “EASING” parameter sets the speed of the animation as follows:
  • “swing” – slower at the beginning and at the end,  faster in the middle;
  • “linear” – constant speed of animation
Accepts a CALLBACK to trigger a function AFTER the animation is done.
SAMPLE CODE :
$(document).ready(function(){
   $(“input[type=button]“).click(function(){
      $(“div”)
          .animate({right:’10px’,opacity:’0.1′,fontSize:’3em’,top:’100px’},2000,”swing”)
         .animate({left:’250px’,opacity:’0.9′,fontSize:’1em’,top:’200px’},2000,”swing”)
         .animate({left:’350px’,opacity:’0.3′,fontSize:’2em’,top:’50px’},2000,”swing”);
   });
});
<input type=”button” value=”Launch Animation” />
<div style=”background: #C0C0C0; height: 200px; width: 200px; position: absolute; padding: 10px 10px 10px 10px;”>LEARNING JQUERY ANIMATE</div>


That’s all: enjoy HTML5!!!
by carmel schvartzman
עריכה: כרמל שוורצמן

Category: jQuery Effects