HTML5 Application cache : இணையத்தளங்களை இணைய இணைப்பு இல்லாமலேயே பார்க்க அவற்றை application cache மூலம் offline storage-ல் சேமிக்கலாம். இவ்வாறு offline-ல் ஒரு பக்கத்தை சேமிக்க <html> tag-உடன் manifest எனும் attribute-ஐ சேர்க்க வேண்டும்.
உதாரணம்
<html manifest="mysample.appcache">
// ...
</html>
Manifest என்பது நாம் offline-ல் சேமிக்க விரும்பும் பக்கங்களை விளக்கும் ஒரு கோப்பு.
cache manifest – சேமிக்க விரும்பும் கோப்புகளின் பட்டியல்
Network – இந்த பட்டியலில் உள்ள கோப்புகள் network இருந்தால் மட்டுமே அணுக முடியும். சேமிக்க இயலாது.
Fall back – பக்கங்களை அணுக முடியவில்லை என்றால் காட்ட வேண்டிய மாற்றுப் பக்கங்களின் பட்டியல்.
உதாரணம்
CACHE MANIFEST
# 2013-03-19 v3.0.0
CACHE:
home.html
stylesheet.css
scripts/main.js
NETWORK:
login.apsx
FALLBACK:
default.html
images/offline.jpg
# – ல் தொடங்கும் வரிகள் comment.
எல்லா பக்கங்களையும் இணைய வழியில் மட்டுமே பார்க்க Network : * என்று எழுதுக. ஒருமுறை பக்கங்கள் சேமிக்கப்பட்டால் server-ல் அவை மாறினாலும் browser-ல் சேமிக்கப்பட்டவையே காட்டப்படும். புது மாற்றங்களைக் காட்ட manifest file-ஐ மாற்ற வேண்டும். .
Cache-ஐ மாற்றுதல்:
* பயனர் browser catche-ஐ நீக்கும் வரை
* manifest file-ஐ மாற்றும் வரை
* நிரல் வழியே catche மாறும் வரை
சேமிக்கப்பட்ட விவரங்கள் அப்படியே இருக்கும். இணைய இணைப்பு அதிகம் கிடைக்காத காலங்களில் இந்த offline storage முறை வெகுவாகப் பயன்படும்.
HTML5 Canvas:
இணையப் பக்கங்களில் 2D/3D படங்களை javascript கொண்டு வரைய <canvas> பயன்படுகிறது.
* இதில் resolution குறிப்பிடுவது அவசியம்.
* Text காட்டுவது கடினம்
* படங்களை jpg, png ஆகச் சேமிக்கலாம்.
* விளையாட்டுகளை உருவாக்கப் பெரிதும் பயன்படும் .
<canvas>-ல் id, width, height-ஐ கண்டிப்பாகத் தர வேண்டும்.
உதாரணம்
<canvas id="sampleCanvas" width="100" height="100">
/*..*/
</canvas>javascript கொண்டு இதை அணுகுதல்.
உதாரணம்
var canvas = document.getElementById("sampleCanvas");
படம் வரைதல்: getcontext(2d) என்ற function-ஆனது canvas-ஐ தயார் செய்கிறது. x,y coordinate தருவதன் மூலம் எளிதில் வரையலாம்.
var canvas = document.getElementById("sampleCanvas");
var context=canvas.getContext("2d");
Fill Rect (x1,y1,x2,y2) – பெட்டி வரைய
var canvas = document.getElementById("sampleCanvas");
var context=canvas.getContext("2d");
context.fillRect(0,0,100,200);
Moveto(x,y) – line தொடக்கம்
Lineto (x,y) – line முடிவு
stroke() – line வரைய உதாரணம்
<!DOCTYPE html> <html> <body> <img id="logo" src="sample.jpg" alt="logo" width="220" height="277"/> <canvas id="sampleCanvas" width="100" height="100" > </canvas> <script> var c=document.getElementById("sampleCanvas"); var context=c.getContext("2d"); context.moveTo(0,0); context.lineTo(200,100); context.strokeStyle = '#ff00ff' context.lineWidth = 10; context.stroke(); </script> </body> </html>
