Monday, December 31, 2012

html5 मध्ये नववर्ष शुभेच्छा !

html5 मध्ये आपण चौकोन, वर्तुळ कसे काढायचे ते पाहिले. आता त्या सूत्रांचा उपयोग करून आपल्याला पताका काढता येतील. यासाठी एका आकाराचे अनेक त्रिकोण एका रांगेत काढावे लागतील गणिती सूत्रांचा उपयोग करून ते काढता येतील. शिवाय प्रत्येक पत्रिकोणाचा रंग दरवेळी बदलावा यासाठी खाली दाखविल्याप्रमाणे get_random_color() हे सूत्र वापरून रंग निश्चित करणार्‍या सहा हेक्झाडेसिमल अंकात दर त्रिकोणासाठी बदल करता  येईल.
 html5 मध्ये अक्षरेही काढता येतात. मात्र मराठी अक्षरांसाठी वेबपेजचा अक्षरसंच UTF-8 ठेवणे व मंगल font वापरणे आवश्यक आहे.
ज्ञानदीपतर्फे नवीन वर्षाच्या शुभेच्छा देण्यासाठी खालील प्रोग्राम लिहिला आहे. तो. save करून ब्राऊजरमध्ये उघडा म्हणजे वरील शुभेच्छा दिसेल.
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Pataka</title>
<meta charset="UTF-8">
<script>
function init() {
  ctx = document.getElementById('canvas').getContext('2d');
  
  ctx.font="50px Mangal";
ctx.strokeText("ज्ञानदीप",100,100);
ctx.font="30px Mangal";
ctx.strokeText("नववर्ष शुभेच्छा !",100,140);
ctx.strokeStyle='#00cc00';
    ctx.lineWidth=3;
  ctx.moveTo(10, 210);
  ctx.lineTo(400, 410);
ctx.stroke;
var grd=ctx.createLinearGradient(0,0,300,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"blue");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,150,400,10);

for ( i=1; i<20;i++){
ctx.fillStyle = get_random_color();
  ctx.beginPath();
  ctx.moveTo(20*i+5, 10);
  ctx.lineTo(20*i+10, 40);
  ctx.lineTo(20*i+20, 10);
  ctx.closePath();
  ctx.fill();

}
function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}


}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element .
</canvas>
</body>
</html>

Friday, December 21, 2012

HTML5 - Canvas वेबपेजवर चित्रकला-२

HTML5 - Canvas वापरून वेबपेजवर आकृत्या काढण्याच्या पहिल्या भागात आपण चौकोन चार रेषा काढून काढला होता. मात्र चौकोन काढण्यासाठी rect(x0,y0,w,h) असे तयार सूत्र वापरता येते. म्हणजे
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(100, 300);
ctx.lineTo(100, 100);
याऎवजी ctx.rect(100,100,200,200) असे लिहिता येते.
वरील चौकोन रंगाने पूर्ण भरला होता. असा रंगीत चौकोन न काढता आपल्याला फक्त चौकट काढावयाची असल्यास ctx.lineWidth, ctx.strokeStyle,ctx.stroke() यांचा उपयोग करून कडांची जाडी, रंग ठरवून चौकट काढता येते. अथवा चौकट असणारा रंगीत चौकोन काढता येतो.

ctx.rect या सूत्राचा वापर करून तसेच जावास्क्रीप्टच्या गणिती प्रक्रिया वापरून बुद्धीबळाचा पट काढता येईल . त्याचा प्रोग्राम व चित्र दिले आहे.

<!DOCTYPE html>
<html>
<head>
<title>HTML 5 chessboard</title>
<meta charset="UTF-8">
<script>
function init() {
ctx = document.getElementById('canvas').getContext('2d');
for (i=0; i<4; i++){
for ( j=0;j<4;j++){
ctx.beginPath();
ctx.fillStyle = '#999999';
ctx.rect(100+i*60,100+j*60, 30, 30);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#333333';
ctx.rect(100+i*60,130+j*60, 30, 30);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#333333';
ctx.rect(130+i*60,100+j*60, 30, 30);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#999999';
ctx.rect(130+i*60,130+j*60, 30, 30);
ctx.closePath();
ctx.fill();
}}

}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element .
</canvas>
</body>
</html>

Friday, December 14, 2012

HTML5 - Canvas वेबपेजवर चित्रकला


वेबपेजवर चित्रे व आकृत्या काढणे आता HTML5 - मधील Canvas सुविधेमुळे आता अगदी सोपे झाले आहे.
चौकोन काढणे -
खाली एक २००x२०० पिक्सेल आकाराचा चौरस काढण्याचा प्रोग्रॅम दिला आहे.
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Square</title>
<meta charset="UTF-8">
<script>
function init() {
ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "#FF6699";
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(100, 300);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fill();
} </script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element .
</canvas>
</body>
</html>
प्रोग्रामचे वर्णन-
वेबपेजच्या head टॅगमध्ये जावास्क्रिप्टचा मुख्य प्रोग्राम आहे.व body मध्ये onLoad="init()"; या आज्ञेने तो कार्यान्वित केला आहे. body मध्ये canvas हे एलेमेंट असून त्यात canvas चा ID व लांबी व उंची दिली आहे. हा आपला ड्राईंग बोर्ड झाला.
जावास्क्रिप्ट फंक्शनमध्ये document.getElementById('canvas') वापरून त्याला ctx हे नाव दिले आहे. ब्राउजरमध्ये हे वेबपेज उघडल्यास खालीलप्रमाणे चित्र दिसेल.( चित्रातील आकडे व अक्ष रेषा माहितीसाठी दिल्या आहेत.)canvas ला (2D) म्हण्जे फक्त दोनच परिमाणे लांबी व रुंदी आहेत. पुढील भागातील ओळींचा अर्थ सहज समजण्यासारखा आहे.वरील प्रोग्राममध्ये आवश्यक ते बदल करून पाहिजे त्या आकाराचा कोणताही त्रिकोण, चौकोन वा बहुभुजाकृती काढता येईल. त्याचा रंगही हवा तसा बदलता येईल.


वर्तुळ काढणे-

वर्तुळ काढण्यासाठी त्याच्या मध्यबिंदूचे सहगुणक व त्रिज्या देऊन पूर्ण वर्तुळासाठी रेडियनमध्ये कोन द्यावा लागतो. वरील प्रोग्राममध्ये खालीलप्रमाणे बदल करा.
ctx.fillStyle = "#336699";
ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
आता ब्राउजरमध्ये हे वेबपेज उघडल्यास खालीलप्रमाणे चित्र दिसेल.( चित्रातील आकडे व अक्ष रेषा माहितीसाठी दिल्या आहेत.)

रेष काढणे -
रंग न भरता साधी रेष काढायची असेल तर ctx.fillStyle आणि ctx.fill(); न वापरता फक्त ctx.stroke(); वापरावे लागते. त्याचे उदाहरण व चित्र खाली दिले आहे.
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Line</title>
<meta charset="UTF-8">
<script>
function init() {
ctx = document.getElementById('canvas').getContext('2d');
ctx.moveTo(50,50);
ctx.lineTo(300,150);
ctx.stroke();
}
</script>
</head> <body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element .
</canvas>
</body>
</html>

Saturday, December 8, 2012

किती वाजले?

लहान मुलांना नेहमी वाटणारे कुतुहल म्हणजे घड्याळ. त्यातले काटे आपोआप सारखे कसे फिरत असतात व मोठी माणसे घड्याळाकडे पाहून चटकन्‌ किती वाजले कसे सांगतात याचे कोडे त्यांना उलगडत नाही.

माझी नात चि. अनुषा नुकतीच इंग्रजी अक्षरे काढायला शिकली होती. नवीन काहीतरी शिकायची तिला भारी हौस. एकदा ती माझ्याकडे आली व म्हणाली,

’आबा, घड्याळ वाचायला शिकवा.’

तिचा उत्साह पाहून मी एक पुठ्ठ्याचे घड्याळ तयार केले व त्यावर फिरणारे काटे लावले पण मग माझ्या लक्षात आले की तिला फक्त तासाचा काटाच समजू शकेल. कारण घड्याळावर फक्त १ ते १२ एवढेच आकडे असतात. मिनिट काटा पाहून मिनिटे ओळखायची असतील तर पाचाचा पाढा येणे आवश्यक आहे.

असा पाढा न येताही मिनिटे समजायची असतील तर मुख्य तासांच्या आकड्या जवळ मिनिटेही लिहावी लागतील. तासाच्या काट्याचा रंग तासाचे आकडे दाखविण्यासाठी व मिनिट काट्याचा रंग मिनिटे दाखविण्यासाठी केला तर तास व मिनिटे चटकन ओळखता येतील.

मग तसे घड्याळ मी तयार केले.
मग मनात विचार आला की तासाचे व मिनिटाचे घड्याळ वेगळे केले तर मुलांना घड्याळ समजणे आणखी सोपे होईल.
एवढा खटाटोप करण्याऎवजी डिजिटल घड्याळ वापरले तर. डिजिटल घड्याळ समजायला फार सोपे. तास, मिनिटे व सेकंद यांचे आकडे वाचले की झाले पण त्याला आपल्या जुन्या घड्याळाची कधीच सर येत नाही. म्हणूनच डिजिटल क्रांतीनंतरही काट्यांच्या घड्याळाने आपले महत्व टिकवून ठेवले आहे.

आता तर घड्याळ दागिना म्हणून वापरला जातो व त्यातही काट्यांच्या घड्याळाला जास्त मान आहे.पूर्वी लंबकाचे मोठे घड्याळ ही घरातील दिवाणखान्यातील भूषणावह वस्तू असे. दर तासाला ठोके देणारे घड्याळ असणे ही त्या काळातील चैन असे.

घड्याळाच्या आकार व डिझाईनमध्ये अनेक प्रकार आज उपलब्ध आहेत. आकड्यांच्या जागी रोमन लिपीतील आकडे वा नुसते ठिपके वा अन्य चिन्हे ही वापरली जातात. पण मुलांच्या दृष्टीने ती समजण्यास अगम्य ठरतात.

दर तासाला किती वाजले हे सांगणारी वा विशिष्ट श्लोक म्हणणारी वा पक्षांचे आवाज देणारी घड्याळॆही बाजारात मिळतात.

घड्याळाचा विषय निघाला म्हणून आठव्ले. आम्हाला लहानपणी कवी केशव कुमार यांची ‘आजीचे घड्याळ’ या नावाची एक सुंदर कविता अभ्यासाला होती. त्याची सुरुवात अशी होती.

आजीच्या जवळी घड्याळ कसले आहे चमत्कारिक,
देई ठेवुनि तें कुठे अजुनि हे नाही कुणा ठाउक;
त्याची टिक टिक चालते न कधिही, आहे मुके वाटते,
किल्ली देई न त्यास ती कधितरी, ते सारखे चालते

कोंबडा आरवणे, उन्हे ओटीवर येणे, दिवेलागण होणे इत्यादी गोष्टींमधून आजीला कशी काय वेळ कळते हे बालमनाला कोडे पडते व आजीने आपले जादूचे घड्याळ कोठे तरी लपवून ठेवले असेल असे त्याला वाटते.

आपले घड्याळ फक्त बारा तासांचे असते व दिवस व रात्र असे तासकाट्याचे दोन फेरे केल्याशिवाय २४ तासांचा दिवस ही कल्पना मुलांच्या मनात रुजत नाही. निसर्गातील होणार्‍या बदलांचा संबंध घड्याळाशी लावल्याखेरीज मुलांना घड्याळ नीट समजणे अवघड होते हे माझ्या लक्षात आले. पहाट, सकाळ, मध्यान्न, दुपार, संध्याकाळ, तिनीसांज, रात्र, मध्यरात्र असे अनेक शब्द आपण वेळ सांगण्यासाठी वापरतो. मुलांच्या घड्याळात यांचा समावेश केला तर ?

मग घड्याळातील आकडेही आकाशातील सूर्याच्या स्थानाप्रमाणे लिहिले व १२ तासांचे दोन फेरे एकाच घड्याळात पहायला मिळाले तर किती सोपे होईल.सकाळी सहा ते सायंकाळी सहापर्यंतचा घड्याळाचा भाग दिवसनिदर्शक पांढरा व सायंकाळी सहा ते सकाळी सहा पर्यंतचा घड्याळाचा खालचा भाग रात्र दाखविण्यासाठी काळ्या रंगाचा केला तर अधिक चांगले होईल.दिवसाचे आकडे सूर्याच्या प्रतिमेत तर रात्रीचे आकडे चंद्राच्या प्रतिमेत काढता येतील.



यावर एक आक्षेप येऊ शकेल की सर्व ठिकाणी व वर्षातील कोणत्याही दिवशी सूर्य ६ वाजता उगवेल व सायंकाळी ६ वाजता मावळेल हे शक्य नाही.सीझनप्रमाणे दिवस मोठा व रात्र लहान किंवा दिवस लहान व रात्र मोठी असू शकते. सूर्य उगवण्याची वेळही स्थान व दिनांकानुसार बदलते ही चूक सुधारण्यासाठी वरील घड्याळातील खालचा काळा भाग अक्षांश-रेखांशाप्रमाणे व दिनांकानुसार बदलता येऊ शकेल. असे करता आले की कोणत्याही दिवशी सूर्योदय व सूर्यास्त घड्याळात बिनचूक दाखविता येतील. फ्लॅश तंत्रज्ञान वापरून असे घड्याळ करता येणे शक्य आहे. मग त्याचीच इलेक्ट्रॉनिक आवृत्ती करता येईल.

मग जणुकाही आजीचे जादूचे घड्याळच मुलांना गवसल्याचा आनंद होईल.

लहानपणी आम्ही ‘वाघोबा, वाघोबा, किती वाजले? ’ असा खेळ खेळत असू. यात वाघोबाचे राज्य आलेल्या मुलाने पाठ करून किती वाजले हे सांगायचे व त्यासाठी १ ते १२ पर्यंत कोणताही आकडा सांगायचा. जोपर्यंत १२ हा आकडा सांगितला जात नाही तोपर्यंत बाकीची मुले हळू हळू पुढे सरकत. मध्यंतरात केव्हाही वाघोबाने मागे वळून पाहिले की सर्व मुले स्तब्ध व्हायची. कोणी हलले की त्याच्यावर राज्य यायचे. बारा वाजले हे म्हटले की वाघोबा मागे वळून मुलांमागे धावायचा व ज्याला तो शिवेल त्याच्यावर राज्य यायचे. याउलट मुले जवळ येऊन त्यापैकी कोणी वाघोबाच्या पाठीत धपाटा घातला तर त्याला परत राज्य घ्यायला लागायचे.
वाळूचे घड्याळ
या खेळातून घड्याळात १२ आकडे असतात व १२ ला विषेष महत्व आहे हे मुलांना लक्षात यायचे.

स्वयंचलित घड्याळाचा शोध लागण्यापूर्वी लोक वाळूचे घड्याळ वापरत.वाळूच्या घड्याळात दोन शंकूच्या आकाराची काचेची भांडी एकमेकावर जोडून एका बाजूस बारिक वाळू भरतात व जोडाच्या जागी एक बारिक छिद्र पाडतात. वाळूचे भांडे वरच्या बाजूस राहील असे ठेवले की वाळू मधल्या भोकातून खालच्या भांड्यात पडू लागते. सर्व वाळू खालच्या भांड्यात येण्यास लागणारा वेळ म्हणजे एक तास वा विशिष्ट कालमापनाचे एकक धरले जाते. वाळूचे घड्याळ परत उलट करून ठेवले की पुन्हा चालू होते.
तर आपल्याकडे वेळ मोजण्यासाठी घटिका पात्र वापरले जाई.घटीकापात्र म्हणजे तांब्याचे एक विशिष्ट आकाराचे भांडे , याला तळांत एक बारीक छिद्र असते . हे भांडे पाण्याच्या घंगाळात तरंगत ठेवले जाई. पाणी आत शिरून ते भरल्यावर जड होऊन पाण्यात बुडले म्हणजे एक घटका झाली असे समजले जायचे. लग्नाचा मुहूर्त पूर्वी या साधनाने ठरवला जायचा. चेंडूंचे घड्याळ



चेंडूंच्या स्वरुपात किती वाजले दाखविणारी एक सुंदर फ्लॅश मुव्ही माझ्या पाहण्यात आली. यात सेकंदासेकंदाने चेंडू वर जातॊ. व मिनिट पट्यावर पडतो. वरच्या दोन पट्यांवर वरील चेंडू मिनिटे तर खालच्या पट्टीवरील चेंडू तास दर्शवितात. Ref:http://abowman.com/google-modules/ball-clock/

सावलीवरून वेळ कळू शकते. वर्षातील कोणत्याही दिवशी सावलीवरून वेळ ठरविण्यासाठी सनडायल या साधनाचा वापर करता येतो. या साधनात ध्रुव तार्‍याच्या दिशेत तिरकी पट्टी लावलेली असते व त्याची सावली निरनिराळ्या वेळेला कोठे पडेल त्याप्रमाणे रेषा काढलेल्या असतात.स्थायी मोठ्या सनडायलची उत्तम उदाहरणे म्हणजे भारतातील जंतरमंतर आणि रेडिंग,कॅलिफोर्निया येथील सॅक्रीमेंटो नदीवरील सनडायल ब्रिज घड्याळ

Ref:http://www.anycalculator.com/horizontalsundial.htm
Ref:http://en.wikipedia.org/wiki/Sundial_Bridge_at_Turtle_Bay वाचन शिकविताना या साधनांची माहिती सांगितली तर मुलांना कालमापन अधिक चांगले समजते.

Friday, November 16, 2012

HTML5 भाग-२ डॉक्युमेंट ऑब्जेक्ट मॉडेल

प्रत्येक वेबपेजच्या HTML स्क्रिप्टमध्ये  सुरवातीस  ब्राऊजरसाठी उपयुक्त  असणारे डॉक्युमेंट टाईप (Doctype)  HTML5 मध्ये अनिवार्य असते. कारण या  डॉक्युमेंट चा वापर करून जावास्क्रिप्टच्या साहाय्याने वेबपेजमध्ये बदल करता येतात.
डॉक्युमेंट ऑब्जेक्ट मॉडेल - HTML स्क्रिप्टची रचना व त्यातील टॅगचे स्थान याची कल्पना येण्यासाठी वेबपेजचे डॉक्युमेंट ऑब्जेक्ट मॉडेल (DOM)  म्हणजे काय हे समजले पाहिजे.

 खाली एका वेबपेजच्या डॉक्युमेंट मॉडेलचे वर्णन दिले आहे.

वरील आकृतीत दाखविल्याप्रमाणे HTML चे सर्व टॅग document चे घटक असतात. HTML चे  दोन भाग HEAD आणि BODY  हे असतात.HEAD मध्ये मेटा, टायटल व स्क्रिप्ट (जावास्क्रिप्ट) यासारखे पूरक भाग तर BODY मध्ये मुख्य प्रोग्रॅम असतो. त्यातील टॅग व टॅगमधील माहिती यांचे स्थान DOM मुळे समजते. आता  BODY च्या सर्व टॅगला विशिष्ट नावे देऊन त्या नावावरून वेबपेजमधील मजकुराची जागा शोधणे व त्यात बदल करणे  जावास्क्रिप्टला शक्य होते.

उदाहरणार्थ वरील वेबपेजमध्ये एकापेक्षा अधिक div टॅग असू शकतात. आता जर  त्यातील प्रत्येक div ला  "one", "two","three"  अशी वेगवेगळी नावे (ID) असतील व आपल्याला त्यातील "two" हे नाव असलेल्या div तील मजकूर वा मजकुराची मांडणी बदलायची असेल तर document.getElementByID("two") हे सूत्र वापरून div शोधता येईल व .innerhtml चा वापर करून आवश्यक तो बदल करता येईल.

वेबपेजची नवी भाषा - HTML5 भाग-१

वेबपेजसाठी आतापर्यंत वापरली जात असलेली  HTML प्रोग्रॅमिंग भाषा केवळ वेबपेजमधील मजकुराच्या मांडणीचे कार्य करीत असे.त्यात कृतीशीलता नव्हती. त्यामुळे केवळ HTML वापरून तयार केलेल्या वेबपेजला  स्टॅटिक वेबपेज समजले जायचे. युजरला त्याच्या इच्छेनुसार त्यात बदल करता यावा किंवा काही नवी माहिती, गणिती क्रिया वा आकृत्या काढण्यासाठी जावास्क्रिप्ट, पीएचपी वा asp.net  या प्रोग्रॅमिंग लँग्वेजेसचा त्यासाठी उपयोग करणे आवशयक असते. अशा वेबपेजला  डायनॅमिक वेबपेज समजले जाते.

HTML भाषेत जावास्क्रिप्टचा उपयोग सुरू झाल्यानंतर त्याला  DHTML म्हणजे डायनॅमिक ( वा कृतीशील) HTML असे संबोधले जाऊ लागले. HTMLच्या चौथ्या आवृत्ती(4.01) पर्यंत यात काही बदल झाला नव्हता. प्रत्येक वेबपेजच्या HTML स्क्रीप्टमध्ये  सुरवातीस
&lt !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"&gt

असे ब्राऊजरसाठी उपयुक्त  असणारे डॉक्युमेंट टाईप (Doctype)चे वर्णन दिले जायचे.
HTML5 या आवृत्तीच्या वेळी मात्र HTML मध्येच जावास्क्रिप्ट अंतर्भूत करून त्याला कृतीशील भाषेचे रूप देण्यात आले. ब्राऊजरसाठी उपयुक्त  असणारे डॉक्युमेंट टाईपदेखील
!DOCTYPE HTML 
असे छोटेखानी करण्यात आले. मेटा, स्क्रिप्ट व लिंक टॅगदेखील  संक्षिप्त करण्यात आले.

 यापेक्षाही मोठा बदल म्हणजे HTML5 आता आपल्याच HTML पेजमध्ये पाहिजे तसे बदल करण्यास, चित्रे व आकृत्या काढणे तसेच दृक्‌श्राव्य माध्यमांचा सुलभतेने वापर करण्यास  सक्षम झाले आहे.

आकृत्या काढण्यासाठी canvas ही नवी सुविधा यात उपलब्ध आहे. जिओलोकेशन (  स्थान निश्चिती) व बेब स्टोअरेजचा वापरही HTML5 त करता येतो. शिवाय HTML5 मध्ये केलेले वेबपेज, कोणत्याही कॉम्प्युटरवर, लॅपटॉपवर, आयपॅडवर वा मोबाईलवरही व्यवस्थित दिसू शकते.

फायरफॉक्स, सफारी, गुगल क्रोम मोबाईल वेबकिट,  ऑपेरा व आयई ९ या ब्राऊजरमध्ये  HTML5 वापरता येते मात्र आयई ६,७ मध्ये ही सुविधा वापरता येत नाही आयई ८ मध्ये फक्त वेब स्टोअरेज करता येते.

वेबपेजची ही नवी भाषा आधुनिक वेबटेक्नॉलॉजीसाठी आता सर्वमान्य झाली आहे. आपण याची माहिती अता क्रमवार भागात घेणार आहोत..

Tuesday, November 13, 2012

एसव्हीजी ( व्हेक्टर ग्राफिक्स)


एसव्हीजी (SVG) म्हणजे स्केलेबल व्हेक्टर ग्राफिक्स ( आकार कमी जास्त करता येणार्‍या भौमितिक आकृत्या). कॉम्प्युटरवर आकृत्या काढण्यासाठी उपयुक्त असणारी ही सुविधा इंटरनेटवर मोफत उपलब्ध असून त्याचा उपयोग करून आपल्याला हव्या तश्या रंगीत आकृत्या अगदी सोप्या पद्धतीने काढता येतात व त्या SVG किंवा PNG स्वरुपात आपल्या कॉम्प्युटरवर  (SAVE) जतन करता येतात. या पद्धतीचा आणखी एक महत्वाचा गुणविशेष म्हणजे आढलेल्या आकृतीचा प्रोग्रॅम स्क्रिप्ट स्वरुपात साठविला जात असल्याने त्यास अगदी कमी जागा लागते.

एसव्हीजी सुविधा आपल्याला http://code.google.com/p/svg-edit/ येथून डाऊनलोड करता येते.
यातील svg-editor.html हे वेबपेज ब्राउजरमध्ये उघडल्यास खालील स्क्रीन दिसतो.

केवळ माऊसच्या साहाय्याने पेन्सिल, रेघ, चौकोन, वर्तुळ यासारख्या  टूल्सचा  (साधनांचा)वापर करून आकृत्या काढता येतात. त्यात रंग भरता येतो. त्याच्या अनेक प्रती काढून त्या हलविता वा कशाही वळविता येतात. असेच एक चित्र नमुन्यासाठी खाली  दाखविले आहे.
 आता या चित्राचा प्रोग्रॅम आपल्याला लगेच पाहता येतो. तो खाली दाखविला आहे. त्यात बदल करूनही चित्र बदलता येते.

असे कोणतेही चित्र काढून  ते  आपण आपल्या वेबपेजमध्ये समाविष्ट करु शकतो.

Monday, November 12, 2012

ठिपक्यांची रांगोळी



कॉम्प्युटर ग्राफिक्सच्या मापन पद्धतीनुसार (डावीकडून उजवीकडे व वरून खाली) ठराविक अंतराने म्हणजे पहिल्या ओळीसाठी x व y पिक्सेल (०,०),(५०,०)(१००,०) तर पहिल्या उभ्या रांगेसाठी x व y पिक्सेल (०,०) (०,५०)(०,१००) अशा अंतरावर ठिपके काढत येतील. असे आडव्या व उभ्या ओळींमध्ये सारख्या अंतरावर पाचपाच ठिपके काढा.

आता आडव्या व उभ्या रांगेतील पहिल्या ठिपक्यास (१,१), पहिल्या आडव्या ओळीतील दुसर्‍या ठिपक्यास २,१ तर दुसर्‍या ओळीतील पहिल्या ठिपक्यास  , २ याप्रमाणे ठिपक्यांना नावे द्‍या.
आता पहिल्या आडव्या ऒळीत (१,१)(२,१)(३,१)(४,१)(५,१) तर शेवटच्या आडव्या ऒळीत (५,१)(५,२)(५,३)(५,४)(५,५) असे ठिपके असतील.

 याठिपक्यांना जोडणार्‍या रेषा काढून रांगोळ्या काढता येतील.
स्वस्तिकसाठी खालील सहा रेघा काढाव्या लागतील.
पहिली रेघ - (३,१) ते (३,५)
दुसरी रेघ - (१,३) ते (५,३)
तिसरी रेघ - (३,१) ते (५,१)
चौथी रेघ - (५,३) ते ( ५,५)
पाचवी रेघ - ( ३,५) ते (१,५)
सहावी रेघ - (३,१) ते (१,१)

<?php
     header("Content-type: image/svg+xml");
     echo '<?xml version="1.0" encoding="UTF-8"?>';
     echo '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
       "http://www.w3.org/TR/2001/
        REC-SVG-20010904/DTD/svg10.dtd">';
     echo '<svg width="600" height="800" xmlns="http://www.w3.org/2000/svg"        
       xmlns:xlink="http://www.w3.org/1999/xlink">';
       echo 'पीएचपी प्रोग्रॅम व SVG वापरून असे स्वस्तिक काढलेले पहा.<br />';
echo 'पहिल्या ठिपक्याचे स्थान - x=१००पिक्सेल, y=१०० पिक्सेल<br />';
echo 'प्रत्येक दोन ठिपक्यातील अंतर ५० पिक्सेलr />';
echo ' स्वस्तिकसाठी लागणारे ठिपके ५ x ५ = २५<br />';
     echo '<g style="stroke:black;">';
    for ($i=0; $i <5; $i++){
  for ($j=0; $j <5; $j++){
   $cx=100+$i*50;
  $cy=100+$j*50;
     echo '<circle cx="'.$cx.'" cy="'.$cy.'" r="1" style="stroke-width:4"/>';
      echo '<line fill="none" stroke="#ff0000" x1="100" y1="'.$cy.'" x2="300" y2="'.$cy.'" id="svg_1"/>';
       echo '<line fill="none" stroke="#ff0000" x1="'.$cx.'" y1="100" x2="'.$cx.'" y2="300" id="svg_1"/>';
     }
     }
   
                 
     echo '</g>';
     echo '</svg>';

   ?>
 आता स्वस्तिक असे दिसेल.



कॉम्प्युटर ग्राफिक्स



आपल्या कॉम्प्युटरवर चित्रे व आकृत्या काढण्यासाठी विंडोजमधील पेंट(Paint), मॅक्रोमिडियाचे फायरवर्क्स(Fireworks) , फ्लॅश (Flash), अ‍ॅडोबचे फोटोशॉप (Photoshop), कोरेल ड्रॉ (Corel Draw) इत्यादी अनेक सुविधा वापरता येतात. ब्राऊजरचा वापर करून वेबपेजवर चित्रे काढावयाची असल्यास  एसव्हीजी (SVG) , जावास्क्रिप्ट (Javascript), पीएचपी(GD in PHP) , डॉट नेट(ASP.NET) इत्यादी प्रोग्रॅमचा वापर करावा लागतो. जावास्क्रिप्टचे संक्षिप्त प्रोग्रॅम जेक्वेरी, मू टूल्स, फॅन्सी बॉक्स यांचा योग्य प्रकारे वापरल्यास चित्र वा फोटोत हवे तसे फेरबदल व अ‍ॅनिमेशन करणे सहज शक्य होते आता HTML 5 या नव्या सुधारित प्रोग्रॅममध्ये जेक्वेरीचे संक्षिप्त प्रोग्रॅम समाविष्ट असल्याने आकृत्या काढणे व चित्रफित बनविणे सोपे झाले आहे.  याशिवाय इंटरनेटवर ऑनलाईन चित्रे काढण्यासाठी पिकासा, फ्लिकर यासारख्या सुविधा उपलब्ध आहेतच.

 भौमितिक आकृत्या काढण्यासाठी आपण कागदाचा वापर करतो,. मात्र केवळ चित्रे व आकृत्या काढण्यापेक्षा या सुविधांचा उपयोग शैक्षणिक कारणासाठी करावयाचा असल्यास वा स्क्रिप्टिंगद्वारे आकृत्या काढावयाच्या असल्यास कॉम्प्युटर ग्राफिक्सच्या मूलभूत मूलभूत संकल्पनांची माहिती असणे जरूर आहे. कागदावर भौमितिक आकृत्या काढण्यासाठी आपण जी कोऑर्डिनेट पद्धत वापरतॊ त्यापेक्षा  कॉम्प्युटरवर साठी वापरली जाणारी  कोऑर्डिनेट सिस्टीम वेगळी असते.

आपण कागदावर आकृत्या काढताना डाव्या बाजूच्या खालच्या कोपर्‍यातील  बिंदूस  संदर्भ बिंदू (Origin) गृहीत धरतो व त्यापासून (०,० )   उजवीकडे (क्ष किंवा X अक्ष) व वरच्या बाजूस (य किंवा Y अक्ष) मोजणी करतो. याउलट कॉम्प्युटरवर चित्रे व आकृत्या काढण्यासाठी डाव्या बाजूच्या वरच्या कोपर्‍याला  संदर्भ बिंदू (Origin) गृहीत धरले जाते व त्यापासून (०,० )   उजवीकडे (क्ष किंवा X अक्ष ) व खालच्या बाजूस ( य किंवा Y अक्ष) अशी मोजणी केली जाते. कागदावर आपण सें. मी. वा इंचाचे परिमाण वापरतो. तर कॉम्प्युटरवर पिक्सेल हे परिमाण वापरले जाते. कॉम्प्युटर स्क्रीनच्या आकाराप्रमाणॆ म्हणजे ८००x६००, १०००x८०० अशाप्रकारे  पिक्सेलची संख्या वेगवेगळी असू शकते. ८०० x६०० आकारात ८०० पिक्सेल आडव्या दिशेने x वा क्ष या परिमाणात तर ६०० पिक्सेल उभ्या म्हणजे y किंवा य या परिमाणात मोजतात..खालील चित्रात या दोन्ही पद्धतीतील  फरक ( पिक्सेल परिमाण वापरून) दाखविला आहे.





Tuesday, November 6, 2012

क्लाऊड कॉम्प्युटिंगद्वारे हार्डवेअर व सॉफ्टवेअर खरेदी वाचणार



क्लाऊड म्हणजे ढग. ढगातून पाऊस पडतो. त्यासाठी आपल्याला काही करावे लागत नाही. याप्रमाणे कॉम्प्युटरचे सर्व काम दूरवर कोठेतरी होऊन आपल्याकडे पोहोचविण्याची व्यवस्था म्हणजे क्लाऊड कॉम्प्युटिंग. रेडिओसाठी आपल्याकडे आकाशवाणी हा शब्द वापरला जातो. पुराण काळातील कथांमध्ये आकाशवाणी म्हणजे प्रत्यक्ष आकाशातून आवाज ऎकू यायचा. त्याच पद्धतीने  ‘मेघसेवा’ वा ‘आभाळमाया’ यासारखे नाव याला रूढ होऊ शकेल. स्वर्गामध्ये देवता राहतात व आपल्या सर्व संकटांचे त्या निवारण करतात. एवढेच नव्हे तर पृथ्वीलोकातील सर्व कार्य त्यांच्या इच्छेनुसार चालू असते असे आपण मानतो. त्याच धर्तीचे पण व्यवसायक्षेत्रातील काम आता क्लाऊड कॉम्प्युटिंगद्वारे भविष्यात होण्याची शक्यता आहे.

सध्याच्या युगात संगणकाचा वापर प्रत्येक क्षेत्रात मोठ्या प्रमाणावर होत आहे.बँका, व्यावसायिक संस्था व उद्योग यांना आपले सर्व व्यवहार संगणकाद्वारे करण्यासाठी आतापर्यंत अनेक संगणक त्याचे नेटवर्किंग व अ‍ॅप्लिकेशन सॉफ्टवेअर विकत घेऊन त्याचे व्यवस्थापन करणे आवश्यक होते. आता क्लाऊड कॉम्प्युटिंगद्वारे हार्डवेअर व सॉफ्टवेअर अ‍ॅप्लिकेशन या दोहोंचा वापर इंटरनेटवरून भाडेतत्वावर करण्याची सोय उपलब्ध  झाली आहे. यामुळे नजिकच्या भविष्यकाळात  संगणक वापराच्या पद्धतीमध्ये आमूलाग्र बदल होणार आहे.


कॉम्प्युटर, नेटवर्कींग व सॉफ्टवेअर व त्या अनुषंगिक विद्युत उपकरणे व इन्व्हर्टर यांच्या खरेदीसाठी लागणार्‍या खर्चात बचत होणार आहे.  तसेच त्याची देखभाल व दुरुस्ती करण्याचा खर्चही वाचणार आहे. अर्थात या क्षेत्रात काम करणार्‍या व्यावसायिकांना ही धोक्याची घंटा आहे.

इंटरनेटच्या क्रांतीमुळे माहिती व त्याचे संकलन व उपयोग यासाठी वेबसाईटचा वापर सुरू झाला. सर्व माहिती व सॉफ्टवेअर दूरवरच्या सर्व्हर कॉम्प्युटरवर ठेऊन आवश्यक ते रिपोर्ट व उपयुक्त माहिती वेबसाईटवरून मिळविणे सोयीचे झाले. डेस्कटॉपवरील सॉफ्टवेअरचे ऑनलाईन सॉफ्टवेअरमध्ये रुपांतर होण्याचे प्रमाण वाढले आहे.

ऑनलाईन सॉफ्टवेअरमध्ये इंटरनेट सर्व्हीस देणार्‍या संस्थामध्ये आपले संगणक ठेवून वा त्यांचे संगणक वापरून वेबसाईटच्या माध्यमातून हे कार्य केले जाते. एखादा संगणक बंद पडला तर माहिती वा सॉफ्टवेअर यांची हानी होऊ नये म्हणून अशा संस्थांमध्ये ठराविक काळाने सर्व माहितीचा बॅक अप घेण्याची सोय केलेली असते. काही वेळेच दोन किंवा जास्त संगणकावर ह्या माहितीचा प्रती ठेवल्या जातात. मात्र संगणक व सॉफ्टवेअर यांचे व्यवस्थापन एकत्रितपणे केले जाते. ही माहिती वापरणार्‍यांच्या संख्येत अचानक वाढ झाली तर सर्व्हरवर या ताण पडून (बँण्डविड्थ मर्यादा) अशी सेवा खंडीत होऊ शकते.

आता क्लाऊड पद्धतीमध्ये संगणकाचा विभाग पूर्णपणे वेगळा करून अनेक संगणकांचा समूह अशा माहिती व सॉफ्टवेअरसाठी वापरला जातो.व त्याच्या  व्यवस्थापनाचे कार्य हार्डवेअर तज्ञ करतात. सर्व माहिती  विखुरलेल्या व अनेक प्रतींमध्ये व विखुरलेल्या स्वरुपात ठेवल्याने कोणताही संगणक बंद पडला तरी माहितीचे नुकसान होत नाही व सॉफ्टवेअर सेवा अबाधित राहते. माहितीचा एकूण साठा व सॉफ्टवेअरसाठी लागणार्‍या हार्डवेअरच्या सुविधा यांचा विचार करून आवश्यक तेवढी मेमरी व सुविधा आपोआप मिळू शकतील अशी योजना केलेली असते.

क्लाऊड मेमरी स्टोअरेज - सर्व माहिती (म्हणजे लेख चित्रे, ध्वनीफिती, चित्रपट इत्यादी) इंटरनेटद्वारे  क्लाऊडमध्ये साठविण्यासाठी (ऑनलाईन मेमरी स्टोअरेजसाठी) आता ड्रॉपबॉक्स, गुगल ड्राईव्ह, सीएक्स डॉट कॉम अशा विविध सुविधा उपलब्ध आहेत. ठराविक मर्यादेपर्यंत वापरण्यासाठी  त्या मोफत उपलब्ध होऊ शकतात.


पत्रव्यवहारासाठी आपण इमेल सेवा वापरत आहोतच. त्यातील सर्व माहिती दूरस्थ सर्व्हर कॉम्प्युटरवर असायची त्यासाठी आता क्लाऊड सेवा वापरली जाते.
 फोटो व चित्रांसाठी पिकासा व फ्लिकर, संवादासाठी फेसबुक, आर्कुट, स्काईप, याहू मेसेंजर, गुगल टॉक इत्यादी सुविधा इंटरनेटवर मिळू शकतात.
 डॉक्युमेंटस ( लेख, पत्रे इत्यादी मजकूर), स्प्रेडशीट वा एक्सेल शीट ( तक्ते वा कोष्टके) यासारखी अ‍ॅप्लीकेशन आता गुगलवर उपलब्ध आहेतच.  रेल्वे रिझर्व्हेशन,  इनकमटॅक्स, ऑनलाईन शॉपिंग याची आपल्याला माहिती आहेच.मोठ्या बँकांचे कार्य आता पूर्णपणे ऑनलाईन झाले आहे. तरी अजून डेस्कटॉपवरील सॉफ्टवेअरचा वापर अनेक लहान मोठ्या संस्थांमध्ये चालू आहे त्यांना लवकरच असा बदल करावा लागणार आहे.

विंडोज, लिनक्स यासारखी वेगवेगळी अ‍ॅप्लीकेशन सॉफ्ट्वेअर आवश्यकतेप्रमाणे उपलब्ध करून  देण्याचे कार्य दुसर्‍या स्वतंत्र विभागात केले जाते.  सिस्टिम सॉफ्टवेअर तज्ज्ञ त्याची देखभाल करतात.  त्यामुळे  त्यातील  नवीन सुधारणांचा व बदलांचा  शोध घेऊन ती अद्ययावत ठेवणे व त्यानुसार प्रत्यक्ष सॉफ्टवेअर प्रोग्रॅममध्ये आवश्यक ते बदल करणे सहज शक्य होते.

थोडक्यात सांगायचे म्हणजे इन्फ्रास्टृक्चर ( संगणक व अनुषंगिक इक्विपमेंट) सेवा, क्लाऊड  मेमरी स्टोअरेज, प्लॅटफॉर्म ( लिनक्स, विंडोज, इत्यादी)सेवा,  ( डाटाबेस, एम.एस ऑफिस, फ्होटोशॉप, जावा, पीएचपी, एसपी डॉट नेट, फ्लॅश, फ्लेक्स यासारखे अ‍ॅप्लिके्शन्स व लॅग्वेजेस व त्याचा उपयोग करून प्रत्यक्ष व्यवसायासाठी बनविलेले सॉफ्टवेअर यांची सेवा अशा सर्व सेवांचा एकत्रित आविष्कार म्हणजे क्लाऊड कॉम्प्युटिंग.
सध्या क्लाऊड सर्व्हीस देणार्‍या महत्वाच्या कंपन्या पुढीलप्रमाणे आहेत. - अ‍ॅमेझॉन वेब सर्व्हीसेस, रॅकस्पेस, सेंचुरी लिंक,व्हेरीझॉन- टेरेमार्क,जॉयंट,सायट्रिक्स, ब्ल्युलॉक,मायक्रोसॉफ्ट, व्हीएमवेअर
 पब्लीक क्लाऊड सर्व्हीस वापरण्याऎवजी  आपल्या कंपनीसाठी स्वतंत्र खाजगी क्लाऊडसर्व्हिसही विकत घेता येते. 
 या सर्व सेवा भाडेतत्वावर असल्याने व्यावसायिकास वा वापरकर्त्या संस्थेस गरजेप्रमाणे हार्डवेअर व सॉफ्टवेअरमध्ये बदल वा वाढ करता येते.या सेवांचे भाडेही प्रत्यक्ष वापरावर अवलंबून असल्याने सुट्टीच्या दिवसात वा रात्री ही सेवा लागत नसल्यास बंद करून  खर्चात बचत करता येते

या सर्व  सोयींमुळे व्यावसायिक व उद्योजक संस्थांना आपल्या संगणक व्यवस्थेची वा त्याच्या नूतनीकरणाची काळजी करावी लागणार नाही व तो वेळ, पैसा व मनुष्यबळ त्यांना आपल्या व्यवसाय वृद्धीसाठी वापरता येईल. दुसरा महत्वाचा फायदा म्हणजे ही सेवा आपल्याला संगणक, लॅपटॉप, आयपॅड, मोबाईल अशा कोणत्याही उपकरणाद्वारे कोठूनही व केव्हाही वापरता येईल. आजकाल बहुतेक संस्थां वा उद्योगाच्या अनेक ठिकाणी शाखा असतात. त्यातील कर्मचारी वा अधिकारी कामानिमित्त परगावी असू शकतात. अशा वेळी या पद्धतीचा फार उपयोग होईल.  ऑफिसमध्ये न जाता घरात बसून वा अन्य ठिकाणाहून  काम करण्याची सोय यामुळे उपलब्ध होईल.