ေသာၾကာေန႕တုိင္းက Devfest ကိုသြားျဖစ္တယ္။ ရံုးက registration လုပ္ေပးထားလိုက္လို႕ သြားလိုက္ရတာ။ အစက ရိွမွန္းေတာင္ မသိ။ ပြဲကေတာ့ အဓိက HTML5 နဲ႕ Chrome အေၾကာင္းကို အဓိကပါပဲ။ က်န္တာေတြက ကၽြန္ေတာ္လည္း သိပ္ျပီး စိတ္မဝင္စားမိဘူး။ App Engine ဆိုတာကေကာင္းေပမယ့္ Python သမားမဟုတ္ေတာ့ ဘာမွမဟုတ္ျပန္ဘူး။ ေနာက္ျပီး Google က Google Storage အသစ္အေၾကာင္းေလး မိတ္ဆက္သြားတယ္။ ေနာက္ျပီး သေဘာက်တာကေတာ့ Google Maps V3 API ပဲ။ သူျပသြားတဲ့ မိတ္ဆက္ေလးၾကည့္ျပီး ရန္ကုန္အတြက္ Website ေလးေရးၾကည့္ရင္ ေကာင္းမလားလို႕ေတာင္ စဥ္းစားမိေသးရဲ႕။
HTML 5 form
HTML စာအုပ္ကေတာ့ ေရးဖူးပါတယ္။ အခု HTML5 ေရာက္လာေတာ့ စာအုပ္ထဲမွာ ထပ္ျဖည့္စြက္ဖုိ႕ လိုတာေလးေတြ ရိွတယ္။ အခုေတာ့ နည္းနည္းျခင္းဆီ စုျပီး ေဖာ္ျပသြားပါမယ္။ HTML 5 မွာ အသစ္သံုးျပဳလုိ႕ရတဲ့ form attribute ေတြကို MZ Edu မွာ ျပန္ေရးထားပါတယ္။ HTML5 နဲ႕ ပတ္သက္တာေလးေတြကို နည္းနည္းျခင္းဆီ အပိုင္းေလးေတြ အလုိက္ စုျပီး ေဖာ္ျပသြားပါမယ္။
HTML5 section
HTML 5 section ကို ဒီေန႕မွ စမ္းၾကည့္တယ္။ ေတာ္ေတာ္မိုက္တာပဲ။ contenteditable ကို အၾကိဳက္ဆံုးပဲ အရင္က content ေတြကို editable ျဖစ္ဖို႕ jquery နဲ႕ ေရးရတယ္။ အခုေတာ့ လြယ္ပါ့။ editable ျဖစ္ခ်င္ရင္ contenteditable ကို true ေပးလုိက္ရံုပဲ။ jquery နဲ႕ ေပါင္းျပီး သံုးလိုက္ေတာ့ inline edition က အရမ္းလြယ္သြားျပီ။
<section contenteditable="true">ဒီစာကို ျပင္လုိ႕ရတယ္။</section>
HTML5 ကို သေဘာက်ျပီး က်လာတာေတာ့ အမွန္ပဲ။
Why Flash won’t die ?
မေန႕တုန္းကေတာ့ Flash Future ဆိုျပီး ကၽြန္ေတာ္ ေရးျပီးပါျပီ။ Flash ဟာ အနာဂတ္မွာ ေပ်ာက္ဆံုးသြားမွာလားဆုိတဲ့ ေမးခြန္း တစ္ခုကို ေျဖရမယ္ဆိုရေတာ့ မေပ်ာက္ဆံုးပါ။ မေသဆံုးႏိုင္ပါ။ Adobe ဟာလည္း flash ကို ေသဆံုးခြင့္ျပဳမွာ မဟုတ္ဘူး။ ေနာက္ျပီး blog post ေတြ ေတာ္ေတာ္မ်ားမ်ားမွာ Flash နဲ႕ HTML 5, jquery ဟာ ယွဥ္ျပိဳင္ဘက္ေတြ ျဖစ္လာျပီ လုိ႕ ေရးလာၾကပါတယ္။ တကယ္တန္းစဥ္းစားၾကည့္မယ္ဆို ဟုတ္သလိုလိုနဲ႕ မဟုတ္ျပန္ဘူး။ ဘာျဖစ္လို႕ Flash က မေသဆံုးႏိုင္တာလဲ။
Continue Reading »
Flash Future ?
ဒီေန႕ Flash နဲ႕ ပတ္သက္ျပီး ေနာက္ထပ္ ေဆာင္းပါးတစ္ပုဒ္ကို ထူးေတဇာ ရဲ႕ twitter status ကေန link ရလို႕ဖတ္ျဖစ္လိုက္တယ္။ Opera က HTML5 video ကိုပဲ support လုပ္မယ္ဆိုတာေလးပါ။ အကုန္လံုး သိၾကတဲ့အတိုင္းပဲ Flash က iPhone, iPodTouch, iPad ေတြမွာ မရသလို အသစ္ထြက္ရိွမယ့္ iPhone OS 4 မွာလည္း အမ်ားေမွ်ာ္လင့္သလို မပါဝင္ခဲ့တာ သိၾကျပီးတဲ့အတိုင္းပဲ။ ပထမဆံုး Apple က Flv ေတြအစား HTML5 ကို video မွာ အသံုးျပဳဖုိ႕စတင္ခဲ့တယ္။ HTML5 အတြက္ mp4 ကို အသံုးျပဳခဲ့တယ္။ အဲလိုပဲ Google ကလည္း HTML5 video ကို စတင္ support လုပ္ျပီး youtube မွာ HTML5 video version ကို စမ္းသပ္သံုးစြဲလုိ႕ရေနတာ ၾကာပါျပီ။ ေနာက္ျပီး မၾကာခင္မွာ Google Docs တစ္ခုလံုးဟာ HTML5 ကိုပဲ အဓိက သံုးသြားေတာ့မွာပါ။ Microsoft ကလည္း အသစ္ထြက္မယ့္ IE 9 မွာ HTML5 video ကို စတင္ျပီး support လုပ္ပါေတာ့မယ္။ Opera ကလည္း HTML5 video ကို support လုပ္ေနပါျပီ။
HTML5 audio with javascript
Audtio Element တစ္ခုေၾကျငာျခင္း
var audioElement = document.createElement('audio');
ဒါမွမဟုတ္ audio tag , id name က myaudio နဲ႕ ခ်ိတ္မယ္ဆုိရင္
var audioElement = document.getElementById('myaudio');
Play ခ်င္ရင္
audioElement.play();
HTML5 Video
HTML5 video ကိုေတာ့ မေန႕တုန္းက video.saturngod.net အတြက္ စမ္းျဖစ္လိုက္တယ္။ ပံုမွန္ သမာရိုးက်ကေတာ့
<video width="100%" height="422" controls="controls" preload="none" tabindex="0" style="background-color:#111111" poster="http://video.saturngod.net/video/2019MS_Health.jpg"" > <source type="video/mp4" src="http://video.saturngod.net/video/2019MS_Health.mp4"></source> <source type="video/ogg" src="http://video.saturngod.net/video/2019MS_Health.ogg"></source> </video>
အဲဒါေလးပဲ။ mp4 က safari နဲ႕ chrome တို႕အတြက္ေပါ့။ webkit က mp4 မွ အလုပ္လုပ္တယ္။ ogg နဲ႕ogv ကေတာ့ firefox , opera တုိ႕အတြက္ေပါ့။ တကယ္လို႕ video.saturngod.net မွာလုိ ျဖစ္ခ်င္ရင္ေတာ့
<script type="text/javascript" src="http://html5.kaltura.org/js" > </script>
ဆိုတာေလး ထည့္ေပးလုိက္ရံုပဲ။ ေနာက္ျပီး video tag မွာ class="kskin" လို႕ ထည့္ေပးလိုက္ရင္ရပါတယ္။ မူရင္းကေတာ့ jquery UI skin ကို သံုးထားတာပါ။ အဲဒီ skin ထက္ kskin ကို ပိုသေဘာက်တယ္။ button နည္းျပီး ရွင္းလုိ႕ပါ။
HTML5 က ogg က flv ထက္စာရင္ size ေသးျပီး loading က ပိုျမန္တဲ့အတြက္ ကၽြန္ေတာ္ကေတာ့ flv ထက္စာရင္ html5 video ကို သေဘာက်တာ အမွန္ပဲ။ HTML5 video က android 2.0 မွာေတာ့ မရေသးဘူး။ iPhone , iPodTouch ေတြမွာေတာ့ ေကာင္းေကာင္း အလုပ္လုပ္ပါတယ္။
HTML5 Video
http://video.saturngod.net ကိုေတာ့ HTML5 video ပဲ ဆက္လက္ အသံုးျပဳသြားေတာ့မွာပါ။ ေရးရတာလြယ္သလို အဆင္လည္းေျပပါတယ္။ flv အစား HTML5 Video ျဖင့္သာ တင္သြားမွာပါ။ ဒါေၾကာင့္ HTML5 video support လုပ္တဲ့ Firefox 3.6 , Chrome 2, Safari 4 တုိ႕လိုအပ္ပါတယ္။
3D Site with HTML
တစ္ခ်ိန္တစ္ခါတုန္းက HTML နဲ့ 3D လုပ္မယ္ဆိုတာ စိတ္ကူးပဲရိွခဲ့တာပါ။ အခုအခါမွာေတာ့ လက္ေတြ႕ျဖစ္လာခဲ့ျပီ။ ကြ်န္ေတာ္တို႔ေတြ HTML design ေတြကို 3D ပံုစံနဲ့ ဖန္တီးလို႔ရေနျပီ။ အခုအခ်ိန္က ျပီးျပည့္စံုတဲ့ 3D မဟုတ္ေသးေပမယ္႔ ေနာက္တစ္ခ်ိန္မွာ Web Design ေလာက အေနနဲ့ေျပာင္းလဲစရာေတြ ျဖစ္လာႏိုင္ပါတယ္။ Firefox 3.5 နဲ့ Safari 4 , Chrome 3 တို႔မွာ 3D Effect ေတြ ရရိွလာျပီေလ။ တကယ္ကို အံဩဖို႔ ေကာင္းျပီး အဲဒီ site ကို ျမင္လိုက္ခ်ိန္က ဟာ ခနဲ့ ျဖစ္သြားပါတယ္။ coding ပိုင္းကလည္း CSS ေလးနဲ့ပဲ သံုးသြားေတာ့ ယံုေတာင္ မယံုႏိုင္ဘူး။ ေနာက္ျပီး HTML5 မွာ ပံုေတြကို run time မွာ ဆဲြလို႔ရေနျပီဆိုေတာ့ အေျပာင္းအလဲေတြ ျဖစ္လာႏိုင္တယ္။ မယံုမရိွ လက္ေတြ႕ျမင္ရေအာင္
http://www.zachstronaut.com/lab/isocube.html
Site တစ္ခုလံုးကို ရိုးရွင္းတဲ့ coding နဲ့ ပဲ ဖန္တီးထားတယ္။ ဒါနဲ့ သူ႔အတိုင္း စမ္းလုပ္ၾကည့္ေတာ့လည္း အဆင္ေျပတာကို ေတြ႕ရပါတယ္။ ကြ်န္ေတာ္ စမ္းေရးၾကည့္ထားတာတဲ့ coding ကေတာ့
This is topThis is leftThis is rightThis is shadow
HTML 5 Cheat Sheet
HTML 5 အတြက္ Cheat Sheet ထြက္လာပါျပီ။ Smashing Magazine မွာ ေတြ႕တာပါ။ HTML5 ကို စူးစမ္းေလ့လာေနတဲ့သူေတြအတြက္ ေတာ္ေတာ္ေလးကို အသံုးဝင္ပါတယ္။
http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/




