Saturngod » HTML5

HTML5 Offline

saturngod — Sun, 16 Oct 2011 14:14:45 +0000

ဒီနေ့ ကိုသီ (Myanmar Tutorial) က ipad မှာ HTML website offline ရအောင် ဘယ်လိုလုပ်ရမလဲဆိုပြီး facebook မှာ မေးထားတာ တွေ့လိုက်တယ်။ ဒါနဲ့ အရင်ကတည်းက ကြားဖူးတဲ့ HTML5 offline လေးကို စမ်းကြည့်ဖြစ်တယ်။ တစ်ခါမှတော့ ipad မှာ မစမ်းဖူးဘူး။

HTML 5 မှာ Cache Manifest ပါလာပါတယ်။ Google Chrome , Safari , firefox , opera စတာတွေမှာ support လုပ်ပါတယ်။

HTML5 cache ကို support လုပ်ဖို့ .htaccess မှာ

AddType text/cache-manifest .manifest

ဆိုပြီး ထည့်ပေးရပါတယ်။

နောက်ပြီးတော့ cache.manifest ဆိုပြီး root folder မှာ ဖန်တီးပေးဖို့လိုပါတယ်။ cache.mainfest ဆိုတာ မပေးပဲ mycache.mainfest ဆိုပြီး ပေးလည်း ရပေမယ့် cache.mainfest ဆိုမှသာ iOS device တွေမှာ ကောင်းကောင်း အလုပ်လုပ်နိုင်မှာပါ။ အခြား နာမည်တွေက iOS 4.2 မှာ ပြဿနာတက်တယ်ဆိုပြီး ဖတ်ဖူးပါတယ်။ mainefest မှာ ဘယ်လို ရေးရမလဲဆိုရင်တော့

CACHE MANIFEST
#comment
CACHE:
images/touch-icon-iphone.png
images/touch-icon-ipad.png
images/touch-icon-iphone4.png
images/t_hero.png
images/icon.png
bootstrap.css
about.html

CACHE MANIFEST ဆိုပြီး ထိပ်မှာ ကြေငြာလိုက်ပါတယ်။ ပြီးတော့ Cache လုပ်မယ့် file တွေကို CACHE: အောက်မှာ ရေးချထားပါတယ်။ mainfest အကြောင်း အသေးစိတ်ကိုတော့ ဒီမှာ ဖတ်နိုင်ပါတယ်။

html file မှာတော့

ဆိုပြီး ထိပ်မှာ html5 ဖြစ်ကြောင်း ရေးထားခဲ့ပြီးတော့ cache file ကိုတော့

ဆိုပြီး cache file name ကို ရေးထားလိုက်ပါတယ်။

ipad မှာ စမ်းကြည့်ချင်တဲ့ သူတွေကတော့ http://comquas.com/html5/cache/ မှာ သွားစမ်းသပ်နိုင်ပါတယ်။ အဲဒီ file ကိုတော့ ဒီမှာ ရယူနိုင်ပါတယ်။

Home Screen မှာ တင်ထားပြီးတော့ ကျွန်တော့် ဘာသာ testing လုပ်ထားတဲ့ Steve Jobs website ကို offline လွယ်လွယ်ကူကူ ကြည့်နိုင်ပါတယ်။

Devfest 2010

saturngod — Sun, 11 Jul 2010 12:06:56 +0000

သောကြာနေ့တိုင်းက Devfest ကိုသွားဖြစ်တယ်။ ရုံးက registration လုပ်ပေးထားလိုက်လို့ သွားလိုက်ရတာ။ အစက ရှိမှန်းတောင် မသိ။ ပွဲကတော့ အဓိက HTML5 နဲ့ Chrome အကြောင်းကို အဓိကပါပဲ။ ကျန်တာတွေက ကျွန်တော်လည်း သိပ်ပြီး စိတ်မဝင်စားမိဘူး။ App Engine ဆိုတာကကောင်းပေမယ့် Python သမားမဟုတ်တော့ ဘာမှမဟုတ်ပြန်ဘူး။ နောက်ပြီး Google က Google Storage အသစ်အကြောင်းလေး မိတ်ဆက်သွားတယ်။ နောက်ပြီး သဘောကျတာကတော့ Google Maps V3 API ပဲ။ သူပြသွားတဲ့ မိတ်ဆက်လေးကြည့်ပြီး ရန်ကုန်အတွက် Website လေးရေးကြည့်ရင် ကောင်းမလားလို့တောင် စဉ်းစားမိသေးရဲ့။

Connexis Tower မှာ ပွဲကလုပ်တာပါ။ မနက်စာကော နေ့လည်စာပါကျွေးတဲ့အတွက် တော်တော်အဆင်ပြေတယ်။ သူ့ Agenda က

08:30 – 09:00 – Registration
09:00 – 09:15 – Introduction/Welcome
09:15 – 10:15 – Maps
10:15 – 10:30 – Morning break
10:30 – 11:30 – Chrome/HTML5
11:30 – 12:30 – Social
12:30 – 13:30 – Networking Lunch
13:30 – 14:30 – Apps
14:30 – 15:30 – Demos
15:30 – 15:45 – Evening break
15:45 – 16:45 – Code Lab 1 – Google
16:45 – 17:45 – Code Lab 2 – Google
17:45 – 18:00 – Closing

သို့ပေမယ့်လည်း လူတွေက ၉ နာရီခွဲ လောက်မှာ စုံတော့ ၉ ခွဲလောက်မှ စဖြစ်တယ်။ ပွဲမှာ သဘောကျတာက HTML5 slideshow ပါ။ Google ရဲ့ html5rocks.com မှာ သုံးထားတဲ့ HTML5 slideshow ကိုသုံးထားတာပဲ။ HTML5 နဲ့ Google Maps အကြောင်းတော်တော်လေးသိသွားတော့ သွားရတာ တန်တယ်လို့ ဆိုရပါလိမ့်မယ်။ အဲ.. တန်တယ်ဆိုလို့ အဲဒီပွဲက Free ဗျ။ အကျင်္ ီတထည်လည်း Free ပေးသေးတယ်။ ဘာအကျိုးအမြတ်ပြန်ရမယ်ဆိုတာကို မသိပေမယ့် တော်တော်လေး သဘောကျခဲ့တာအမှန်ပဲ။ အဲ.. နောက်ပြီး ပွဲမှာ ထူးခြားတာက လာတဲ့သူတွေတော်တော်များများက Macbook Pro တွေနဲ့ နောက်ပြီး iPhone သို့မဟုတ် Android ဖုန်းတွေနဲ့ကြီးပဲဗျ။ အဲ.. iPad နဲ့ လာတဲ့သူတောင် ရှိသေးတယ်။

သူ့ပွဲမှာ ပြထားတဲ့ အထဲက အောက်က Link လေးတွေကတော့ စိတ်ဝင်စားဖို့ကောင်းတယ်။ အထူးသဖြင့် HTML5 video ပေါ့။

HTML5 video

h ttp://www.craftymind.com/factory/html5video/CanvasVideo.html

http://www.xanthir.com/video/demo3.html

Google MAP API V3

www.goo.gl /1Mdz

HTML5 + JsAPI + CSS3

http://html5rocks.com

Google MAP API V3 Sample

http://whereiscoffee .appspot.com

http://gmaps-samples-v3.googlecode.com/svn/trunk/

HTML 5 form

saturngod — Wed, 23 Jun 2010 16:45:35 +0000

HTML စာအုပ်ကတော့ ရေးဖူးပါတယ်။ အခု HTML5 ရောက်လာတော့ စာအုပ်ထဲမှာ ထပ်ဖြည့်စွက်ဖို့ လိုတာလေးတွေ ရှိတယ်။ အခုတော့ နည်းနည်းခြင်းဆီ စုပြီး ဖော်ပြသွားပါမယ်။ HTML 5 မှာ အသစ်သုံးပြုလို့ရတဲ့ form attribute တွေကို MZ Edu မှာ ပြန်ရေးထားပါတယ်။ HTML5 နဲ့ ပတ်သက်တာလေးတွေကို နည်းနည်းခြင်းဆီ အပိုင်းလေးတွေ အလိုက် စုပြီး ဖော်ပြသွားပါမယ်။

http://edu.mysteryzillion.org/html5-form

HTML5 section

saturngod — Tue, 25 May 2010 12:53:55 +0000

HTML 5 section ကို ဒီနေ့မှ စမ်းကြည့်တယ်။ တော်တော်မိုက်တာပဲ။ contenteditable ကို အကြိုက်ဆုံးပဲ အရင်က content တွေကို editable ဖြစ်ဖို့ jquery နဲ့ ရေးရတယ်။ အခုတော့ လွယ်ပါ့။ editable ဖြစ်ချင်ရင် contenteditable ကို true ပေးလိုက်ရုံပဲ။ jquery နဲ့ ပေါင်းပြီး သုံးလိုက်တော့ inline edition က အရမ်းလွယ်သွားပြီ။

ဒီစာကို ပြင်လို့ရတယ်။

HTML5 ကို သဘောကျပြီး ကျလာတာတော့ အမှန်ပဲ။

Why Flash won’t die ?

saturngod — Wed, 19 May 2010 13:37:28 +0000

မနေ့တုန်းကတော့ Flash Future ဆိုပြီး ကျွန်တော် ရေးပြီးပါပြီ။ Flash ဟာ အနာဂတ်မှာ ပျောက်ဆုံးသွားမှာလားဆိုတဲ့ မေးခွန်း တစ်ခုကို ဖြေရမယ်ဆိုရတော့ မပျောက်ဆုံးပါ။ မသေဆုံးနိုင်ပါ။ Adobe ဟာလည်း flash ကို သေဆုံးခွင့်ပြုမှာ မဟုတ်ဘူး။ နောက်ပြီး blog post တွေ တော်တော်များများမှာ Flash နဲ့ HTML 5, jquery ဟာ ယှဉ်ပြိုင်ဘက်တွေ ဖြစ်လာပြီ လို့ ရေးလာကြပါတယ်။ တကယ်တန်းစဉ်းစားကြည့်မယ်ဆို ဟုတ်သလိုလိုနဲ့ မဟုတ်ပြန်ဘူး။ ဘာဖြစ်လို့ Flash က မသေဆုံးနိုင်တာလဲ။

Flash ပိုင်ဆိုင်ထားတဲ့ နယ်မြေဟာ web တစ်ခုတည်းမဟုတ်ပါဘူး။ HTML5 က web တစ်ခုတည်းပါ။ ဒီမှာတင် အဖြေက ရှင်းပါတယ်။ တနည်းပြောရင် HTML5 နဲ့ flash ဟာ ယှဉ်ပြိုင်စရာ ပြိုင်ဘက်တွေမဟုတ်သလို ပြိုင်စရာအကြောင်းလည်း မရှိဘူးလို့ ဆိုရင်တောင် ရတယ်။ Flash ကို Micromedia က 1996 မှာ စတင်ထုတ်လုပ်ခဲ့ပြီး အခုအချိန်မှာဆိုရင် ၁၄ နှစ်တောင် ရှိနေပြီ။ Flash ကို အခုအချိန်မှာ Adobe Comapny က ပြိုင်ဆိုင်ထားပြီး Flash Developer တွေဟာလည်း မြောက်မြားစွာရှိပါတယ်။ Actionscript 3 မှာ အခြား feature တွေ မြောက်မြားစွာ ပါဝင်လာခဲ့တဲ့အတွက် Flash Developer တွေ စိတ်ကြိုက်တွေ့စေခဲ့တယ်။

Flash ရဲ့နေရာများ
လက်ရှိ Flash ဟာ Web လောက တစ်ခုတည်းမှာတင် flash website, flash game, flash video , flash music play စတာတွေကို အသုံးပြုနေကြပါတယ်။ Flash သုံးထားတဲ့ Website က အခုချိန်မှာတော့ iPhone, iPad, iPodTouch တွေမှာတော့ ကြည့်လို့ မရတော့ပေမယ့် Android 2.2 မှာ စတင် support လုပ်လာပါပြီ။ နောက်တချက်က Blakberry ကလည်း Flash ကို support လုပ်မယ်ဆိုတဲ့ သတင်းတွေလည်း သဲ့သဲ့ကြားနေရတာ flash အနာဂတ်အတွက် အားတက်စရာပါပဲ။ နောက်ပြီး Flash ဟာ PHP , XML တွေနဲ့ ကောင်းကောင်းမွန်မွန်တွဲသုံးနိုင်တဲ့အတွက် dynamic flash website တွေကို လွယ်လွယ်ကူကူ ဖန်တီးလာနိုင်ပါတယ်။ website ဆိုတဲ့နေရာမှာ online တင်မှ website တစ်ခုဖြစ်တာမဟုတ်ပါဘူး။ Local Network သို့မဟုတ် WAN တွေမှာ အလုပ်လုပ်နေတာတွေလည်း web base တွေပါပဲ။ နောက်ပြီး Flex ကိုလည်း မေ့ထားလို့ မရပါ။ Flex က XML တွေနဲ့ ကောင်းကောင်းအလုပ်လုပ်နိုင်ပြီး Graph တွေ ဖန်တီးရာမှာ အရမ်းလွယ်ကူပါတယ်။ စီးပွားရေး website တွေမှာ Graph တွေကို ပြသဖို့အတွက် Flex ကို အသုံးပြုလာကြတယ်။ သို့ပေမယ့်လည်း အခုအချိန်မှာ jquery နဲ့ graph လှလှတွေ ဖန်တီးလာနိုင်ပါပြီ။

Flash game တွေကတော့ web ပေါ်မှာ နေရာယူထားနိုင်တယ်ဆိုပေမယ့် iPhone App store မှာလည်း game ပေါင်းမြောက်မြားစွာရှိတယ်။ Flash game တွေက multitouch, sensitivity တွေ မပါတာကတော့ iPhone game တွေထက်စာရင် စွဲမက်စရာ မရှိဘူးပေါ့။ Android မှာရှိတဲ့ Game တွေထက်စာရင် Flash game လေးတွေက ပိုကောင်းနေသလိုပဲ။ နောက်တချက်က facebook က Game တွေမှာ flash ကို သုံးလာပါတယ်။ ကိစ္စမရှိပါ။ iPhone, iPad တို့မှာ flash support မလုပ်ရင် game company တွေက iPhone, iPad အတွက် ပြန်ရေးရုံပဲပေါ့။ ဘာလို့လည်းဆိုတော့ flash ကို animation အတွက်သာ အသုံးပြုထားပြီး data တွေအားလုံးဟာ database ထဲမှာ ရှိပါတယ်။ နောက်ပြီး Flash နဲ့ image တွေဆွဲပြီးသားဖြစ်တဲ့အတွက် iPhone, iPad game ပြောင်းတဲ့အခါမှာ objective C ပြန်ရေးရတဲ့အပိုင်းပဲ ရှိတော့မှာပါ။

Video နဲ့ Audio ပိုင်းမှာတော့ အခုအချိန်ထိ Video က kaltura player ကြောင့် အဆင်ပြေသေးပေမယ့် Audio အပိုင်းကတော့ javascript နဲ့ ပြန်ရေးရမှ playlist တွေ လုပ်လို့ရမှာ ဆိုတော့ သိပ်အဆင်ပြေကြီးမဟုတ်ဘူး။ ဒါပေမယ့်လည်း ရေးရတာ မခက်ခဲလှပါဘူး။ နောက်တချက်က လက်ရှိ Flv တွေ အကုန်လုံးကို Theora, H.264 ကို မပြောင်းနိုင်သေးပါဘူး။ VIMEO , Youtube တို့က HTML5 ရပြီဆိုပေမယ့် flash ကိုတော့ အခုချိန်ထိ စွန့်လွှတ်နိုင်မှာ မဟုတ်သေးပေမယ့် တဖြည်းဖြည်းနဲ့ ပြောင်းသွားလိမ့်မယ်လို့ ထင်ပါတယ်။

jQuery ဟာ တော်တော်များများ ဖန်တီးလာနိုင်ပေမယ့် များပြားလှတဲ့ animation တွေကို flash လို လွယ်လွယ်မဖန်တီးနိုင်ဘူး။ video နဲ့ sound တွေ မြောက်မြားစွာ သုံးပြီး website တစ်ခု မဖန်တီးပေးနိုင်ဘူး။ jQuery ဘယ်လောက်ကောင်းကောင်း code တွေနဲ့ ရေးနေရတာပါ။ flash ကတော့ GUI level မှာ အလုပ်လုပ်ပါတယ်။ နောက်တချက်က flash က 3D ဖန်တီးနိုင်တယ်။ web ပေါ်မှာ 3D ပြချင်တဲ့အခါမှာ Flash က အဆင်ပြေတယ်လို့ ဆိုလို့ရမယ်။ Apple ကတော့ iPad 3D ကို PNG ပေါင်းမြောက်မြားစွာနဲ့ jquery သုံးပြီး သူ့ website မှာ တင်ထားပါတယ်။ 3D animation အသေးလေး တွေ နောက်ပြီး product ကို 3D ပြချင်တဲ့အခါမှာ flash က အဆင်ပြေတယ်။

Flash က web သာမကဘူး application exe တွေ ထုတ်ပေးလို့ရတယ်။ ဒါဟာ .NET နဲ့ application ရေးရတာထက် အများကြီး လွယ်ကူပြီး လှပတဲ့ windows application တွေကို ဖန်တီးနိုင်တယ်လေ။ နောက်ပြီးတော့ .NET , java တို့လိုမျိုး runtime မလိုဘူး။ exe ထုတ်ပြီးတာနဲ့ ကြိုက်တဲ့ PC ပေါ်မှာ run လို့ရပြီ။ နောက်ပြီး CD/DVD ခွေတွေဝေတဲ့အခါမှာ company profile ဖြစ်ဖြစ် documentation ဖြစ်ဖြစ် ထည့်ပေးချင်တဲ့အခါမှာ HTML + CSS နဲ့ ရေးထားတာထက် Flash နဲ့လုပ်ထားတဲ့ဟာတွေက ပိုပြီး ဆွဲဆောင် မှုရှိစေတယ်။ နောက်တချက်က movie အသေးစားလေးတွေ video တွေကို flash နဲ့ လုပ်ရတာ ပိုလွယ်ပါတယ်။

နောက်တချက်က Flash Development ပဲ။ Flash နဲ့ ကျွန်တော် thrid year , hons ၂ နှစ်လောက်ထိ တောက်လျှောက် သုံးခဲ့ဘူးတဲ့အတွက် flash development လုပ်ရတာကို သိတယ်။ Flash မှာ module တွေ addon တွေ အများကြီးထည့်လို့ရတယ်။ နောက်ပြီး action scirpt နဲ့ flash ရဲ့ frames တွေနဲ့ ပေါင်းပြီး မြောက်မြားစွာသော animation တွေ လုပ်နိုင်တယ်။ နောက်ပြီး XML , PHP တို့နဲ့ လွယ်လွယ်ကူကူ သုံးလို့ရတဲ့အတွက် front end design အနေနဲ့ flash ကို သုံးရတာ အဆင်ပြေတယ်။ တကယ်လို့ iPhone, iPad တို့မှာ flash ကို support လုပ်ပြီဆိုတာနဲ့ လက်ရှိရေးထားတာတွေကို ထွေထွေထူးထူး ပြင်စရာမလိုပဲ လွယ်လွယ်ကူကူပြောင်းလို့ရမယ့် addon တွေ ထွက်လာအုံးမှာပဲ။ Flash , Flex developer တွေဟာ လက်ရှိ လုပ်ငန်းခွင်တွေထဲမှာ အများကြီးရှိပါတယ်။ တစ်ခါတစ်လေ Flex ယှဉ်ပြီး Web Design ပြိုင်တဲ့အခါမှာ Client က Flex နဲ့ လုပ်ထားတာတွေကို သဘောကျမှာ အမှန်ပဲ။ Flex နဲ့ လုပ်ထားတဲ့ Graph တွေ animation တွေကို မိန်းမောမိမှာ သေချာတယ်။ client တွေကတော့ flash နဲ့ ရေးထားရင် mobile support လုပ်လား မလုပ်လားဆိုတာကို သိချင်မှ သိပါမယ်။ အများအားဖြင့် သာမာန် PC နဲ့ ကြည့်မယ့် user တွေကိုပဲ အားထားကျတာ များတယ်။ Flash CS5 မှာ iPhone app တွေရေးလို့ရလာပါပြီ။ အဲဒီအကြောင်းကို မနေ့က ပြောဘူးပါတယ်။

HTML5 နဲ့ jQuery ပိုင်ဆိုင်ရာ

jQuery , HTML 5 အဲဒီ နှစ်ခုက အပေါ်မှာ ပြောသွားတဲ့အချက်တွေ ကို မဖန်တီးနိုင်ဘူး။ HTML5 နဲ့ jquery တို့ဟာ web ပိုင်းတစ်ခုအတွက်ပဲ စွမ်းဆောင်ပေးနိုင်တယ်။ HTML 5 နဲ့ movie လုပ်လို့မရဘူး။ application ဖန်တီးလို့မရဘူး။ တနည်းပြောရင် နယ်မြေမတူဘူး။ တနည်းပြောရင် စစ်ဖြစ်စရာမလိုပါဘူး။ Adobe နဲ့ Apple ပြဿနာဟာ web content ပိုင်းတစ်ခုတည်းမှာပါ။ Application, Presentation , Movie စတာတွေမှာ HTML5, jquery က ဝင်ရောက်နေရာ ယူနိုင်မှာ မဟုတ်ဘူး။ ဒါကြောင့် သေချာတယ်။ Flash က မသေနိုင်ဘူး။

Flash ကို သုံးရင် ကောင်းတာတွေက

လိုအပ်တဲ့ addon တွေ module တွေ အများကြီးရှိတယ်။
3D လိုချင်ရင် ဆွဲလို့ရမယ်
Website တွေ ဖန်တီးလို့ရမယ်
Animation တွေ ဖန်တီးလို့ရမယ်
Video အသေးလေးတွေ ဖန်တီးလို့ရမယ်
Built in UI နဲ့ အခြား feature တွေပါမယ်
Font embed လုပ်လို့ရမယ်
Vector ပုံတွေ ဆွဲလို့ရတယ်

မကောင်းတာတွေကတော့

စျေးကြီးတယ်
iPhone, Ipad နဲ့ mobile deveice တွေမှာ support လုပ်ဘူး
version အဟောင်းအနဲ့ အသစ် ပြဿနာ တွေ ကြုံရတတ်တယ်
ထွက်လာတဲ့ file size အရမ်းကြီးမယ်
Flash Player security issue ရှိတတ်တယ်
Flash မှာရှိတဲ့ element တွေ UI တွေက limit ရှိတယ်

Flash က ဘယ်တော့မှ မသေဘူး။ web ပေါ်မှာ ဝေစု နည်းရင် နည်းသွားမယ်။ ဒါပေမယ့် အခြား နယ်မြေတွေမှာ အင်အားကြီးမားလာအုံးမှာပဲ။ Flash Developer တွေဟာလည်း Flash , Flex စတာတွေနဲ့ အလုပ်တွေ ဆက်လုပ်နေရအုံးမှာပဲဗျာ။

Reference

http://www.smashingmagazine.com/2010/05/18/html5-and-flash-why-its-not-a-war-and-why-flash-wont-die/
http://www.search-this.com/website-design/why-flash-will-never-die/
http://logicpool.com/archives/30

Flash Future ?

saturngod — Tue, 18 May 2010 13:13:50 +0000

ဒီနေ့ 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 လုပ်နေပါပြီ။

ဒီဆောင်းပါး ထဲမှာ ရေးထားတဲ့ စာလုံးလေး ကိုတော့ တော်တော်သဘောကျမိတယ်။

“But at Opera we say that the future of the web is open web standards and Flash is not an open web standards technology.

“Flash does have its purposes and will have its purposes, the same as [Microsoft's] Silverlight and others, especially for dynamic content.

“But flash as a video container makes very little sense for CPU, WiFi battery usage etcetera – you can cook an egg on [devices] once you start running Flash on them and there’s a reason for that.”

Apple က Steve ရေးထားတဲ့ Thoughts on Flash ကလည်း ဖတ်ကြည့်သင့်ပါတယ်။

Flash က Video တွေနေရာမှာ ဘယ်လောက် နေရာယူလာနိုင်မလဲ။ HTML5 video နဲ့ Flash နဲ့ ယှဉ်ကြည့်တဲ့အခါ HTML5 video က flash ထက်စာရင် ပိုအဆင်ပြေတယ်။ နောက်ပြီး stackoverflow မှာ ဆွေးနွေးထားတာလေးတွေက အရမ်းကောင်းတယ်။ Flash ရဲ့ အဓိက ပြဿနာက Windows မဟုတ်တဲ့ platform တွေမှာ CPU usages အများကြီးသုံးတာပဲ။ Flash က windows ပေါ်မှာ ကောင်းကောင်းလေး အဆင်ပြေပေမယ့် Windows မဟုတ်တဲ့ site တွေမှာ အဆင်မပြေဘူး။ နောက်ပြီး Mac မှာ Flash ကြော်ငြာတွေမှာ ကိုယ်ပိုင် pointer သုံးထားရင် ကြော်ငြာပေါ်က ဖြတ်ပြီး သွားလိုက်ရင် လက်ရှိ pointer ပျောက်သွားတတ်တယ်။

HTML5 video ဟာ javascript နဲ့ ပေါင်းပြီး ရေးလို့ရတဲ့အတွက် flash ထက်စာရင် အားသာချက်ပဲ။ နောက်ပြီး ogg ဟာ Open Standard ဖြစ်ပြီး flash ကတော့ Adobe ရဲ့ ထိန်းချုပ်မှုအောက်မှာ ရှိနေတယ်။ အဲဒီအတွက်ကြောင့် browser တွေမှာ Flash ကို default အနေနဲ့ ထည့်ပေးပိုင်ခွင့်မရှိဘူး။ Adobe ကနေ တဆင့် download ချပြီး ထည့်ခွင့်ပဲရှိတယ်။ အဲလို ချုပ်ကိုင်ထားတာဟာ Flash အတွက် ကျဆုံးစေတော့မှာလားလို့တောင် မေးခွန်းတွေ ဖြစ်လာပါတယ်။

HTML5 နဲ့ Flash ကို ယှဉ်သုံးကြည့်ရင် HTML5 video မှာ သုံးတဲ့ ogg ဟာ flash ထက်စာရင် အများကြီးမြန်ပါတယ်။ MP4 ကတော့ High Quality ရပါတယ်။ Youtube မှာ HTML5 video အတွက် mp4 ကို သုံးထားတယ်။ နောက်ပြီး ရေးရတဲ့အပိုင်းမှာလည်း ဆိုပြီး အနည်းအကျဉ်းလေး ရေးလိုက်ရုံနဲ့ ပြီးသွားပေမယ့် flash ကတော့ object တွေ param တွေ ထည့်ရေးနေရပါတယ်။ Flash ကို သုံးတဲ့အတွက် flash plugins လိုအပ်ပြီး flash plugin ကို သီးသန့်ခေါ်ပြီး အသုံးပြုတဲ့အတွက် page loading က html5 video နဲ့ ယှဉ်ရင် နည်းသွားတာ မဆန်းပါဘူး။

လက်ရှိ Flash နဲ့ ပတ်သက်တဲ့ content တွေ အများကြီးရှိနေပေမယ့် သူ့မှာ အဖော်မဲ့နေပါပြီ။ Apple, Google, Microsoft, Opera တို့ဟာ HTML5 ကို ခရီးနှင်ဖို့ အားသန်နေပြီ။ ဒါပေမယ့် Flash ကို Adobe က အခုအချိန်ထိ ချုပ်ကိုင်ထားနေတုန်းပဲ။ လူသုံးများတဲ့ iPhone တွေမှာ flash အလုပ်မလုပ်သေးပေမယ့် Android မှာတော့ စတင်ပြီး flash ကို support လုပ်ပါတော့မယ်။ Apple ကတော့ Flash ကို Adobe က ချုပ်ကိုင်ထားသ၍ Support လုပ်မယ့်ပုံ မရပါဘူး။ နောက်ပြီး Flash CS5 မှာ iPhone App ကို Flash နဲ့ ရေးလို့ရလာပါပြီ။ Apple က cross-compiled applications တွေကို သူ့ store ကနေ ဘန်းမယ်လို့ ပြောဖူးပါတယ်။ Adobe က ဒီလို ပြန်ကြေငြာခဲ့ပါတယ်။

“Adobe® Flash® Professional CS5 will include a Packager for iPhone that will let you publish ActionScript 3 projects to run as native applications for iPhone. These applications can be delivered to iPhone users through the Apple App Store.”

တနည်းပြောရင် Flash Developer အနာဂတ်က မှေးမှိန်လာတော့မှာလား။ Flex ကို သုံးထားတဲ့ site တွေကလည်း iPhone မှာ သုံးလို့မရတဲ့ အတွက် သီးသန့် ပြန်ပြုပြင်ရေးဆွဲရတာတွေ ရှိလာပါတယ်။ ဟိုအရင် အခါတုန်းက jQuery က Flash Killer ဆိုပြီး ပြောဆိုခဲ့ကြရမှာ jQuery သာမကတော့ပဲ HTML5 video ကပါ Flash ကို စတင်တိုက်ခိုက်လာပါပြီ။ Adobe ဘက်ကလည်း Flash CS5 မှာ iPhone Application ရေးလို့ရလာသလို Android ကလည်း Flash ကို support လုပ်မယ်ဆိုတော့ ဆက်လက်ရပ်တည်သွားဖို့ အနေအထားရှိပါတယ်။ ဒါပေမယ့် HTML5 video တွေဟာ လက်ရှိ Flv တွေနေရာမှာ အစားထိုးဝင်ရောက်လာပါတော့မယ်။ သို့ပေမယ့်လည်း မြန်မာ ရုပ်ရှင် site တွေကတော့ ယခုချိန်ထိ HTML5 ကို မပြောင်းလဲသေးတဲ့အတွက်ကြောင့် iPhone သမားတွေ အခက်တွေ့နေရစမြဲပါပဲ။ မြန်မာ video site တွေဟာလည်း ဖြစ်နိုင်မယ်ဆိုရင် HTML5 video ကို ပြောင်းလဲသင့်နေပါပြီ။ HTML5 video ကို ပြောင်းလဲခြင်းဖြင့် iPhone တွေမှာ ကြည့်လာလို့ရမယ်။ iPodTouch , iPad တွေမှာ ကြည့်လို့ရလာပါလိမ့်မယ်။ Android မှာတော့ ကြည့်လို့မရသေးပါဘူး။ ပြဿနာကတော့ HTML5 video ပြောင်းရင် ရုပ်ရှင်တစ်ကားကို format ၂ ခုလုပ်ရပါလိမ့်မယ်။ Ogg နဲ့ MP4 format ပါ။ Ogg ပြောင်းပုံကို ကျွန်တော် ရေးဘူးပါတယ်။ MP4 ကတော့ convertor တွေ အများကြီးပါတယ်။

အနာဂတ်မှာ Flash က မရေရာပေမယ့် HTML5 ကတော့ သေချာပေါက် ပြောင်းလဲနေရာယူလာမှာပါ။ ဒီအကြောင်းရေးနေရင်း တစ်ခု စဉ်းစားမိသေးတယ်။ Zawgyi နဲ့ Myanmar Unicode ပေါ့။ ခက်တာက Myanmar Unicode standard ဖြစ်ပေမယ့် , Flash ကို အလဲထိုးဖို့ ကြိုးစား တဲ့ jQuery, HTML5 video, iPhone, iPodTouch, iPad တို့လို အင်အားကြီးမားပြီး လူသုံးများတဲ့ product တွေ မရှိခြင်းပဲ။ Flash က content တွေအများကြီးရှိတာမှန်တယ်။ ပထမဆုံးအချက်က flash က w3c web standard မဟုတ်ဘူး။ web standard ဖြစ်တဲ့ HTML5 ကို ပြောင်းလဲလာမှာ သဘာဝပဲ။ နောက်ပြီး flash ကို Adobe က ချုပ်ကိုင်ထားတယ်။ jQuery လို သုံးရလွယ်ပြီး javascript ကို အစားထိုးလာနိုင်ခြင်း ၊ HTML5 မှာ video tag က သုံးရလွယ်ခြင်း။ iPhone , iPodTouch , iPad စတဲ့ Apple Product က လူကြိုက်များခြင်းကြောင့် Flash က မှေးမှိန်လာရတာပါ။ သို့ပေမယ့်လည်း Myanmar Unicode Standard မှာက အဲဒီ အချက်တွေထဲကမှ Standard ဆိုတဲ့ အချက်တစ်ခုပဲ ပိုင်ဆိုင်ထားနိုင်သေးတာကြောင့် content များတယ်ဆိုတဲ့ ဇော်ဂျီကို မယှဉ်နိုင်သေးတာပါ။ နောက်ပြီး zawgyi ကို ဘယ်သူမှ ချုပ်ကိုင်မထားခြင်းဟာ ဇော်ဂျီဟာ လက်ရှိ Myanmar Unicode standard ကို ယှဉ်နိုင်နေတာပါ။ တကယ်လို့သာ ဇော်ဂျီဟာ Alpha ကပဲဖြစ်ဖြစ် တစ်စုံတစ်ယောက်ပဲ ဖြစ်ဖြစ် ချုပ်ကိုင်ထားရင် အခုအချိန်မှာ ဇော်ဂျီဟာလည်း ပျောက်ဆုံးရင် ပျောက်ဆုံး ဒါမှမဟုတ် Flash လိုမျိုး လူပေါင်းစုံ ဝိုင်းနှိပ်ကွပ်တဲ့ အခြေအနေ ရောက်ကောင်းရောက်နေမှာပါ။

Flash သမားတွေဆိုပေမယ့် HTML5 ကိုတော့ မေ့ထားလို့မရဘူး။ တချိန်တစ်ခါက အရမ်းအောင်မြင်ပြီး developer တွေ အရူးအမူးဖြစ်ခဲ့ပေမယ့် အခုအချိန်မှာ developer တွေဟာ jQuery နဲ့ iPhone Developer တွေကို ကူးပြောင်းကုန်ကြပြီ။ CSS3 ရဲ့ လှပပြီး စွဲမက်ဖွယ် ကောင်းတဲ့ အချက်တွေကလည်း web လောကကြီးကို ပိုပြီး ရေးဆွဲရလွယ်ကူအောင် အထောက်အပံ့ပေးနေရင် အနာဂတ်မှာ Adobe က Flash ကို ချုပ်ကိုင်ထားအုံးမလား ဆိုတာက Flash အနာဂတ်အတွက် အဖြေဖြစ်လာမလားပဲ။

HTML5 audio with javascript

saturngod — Sun, 16 May 2010 16:33:03 +0000

Audtio Element တစ်ခုကြေငြာခြင်း

var audioElement = document.createElement(‘audio’);

ဒါမှမဟုတ် audio tag , id name က myaudio နဲ့ ချိတ်မယ်ဆိုရင်

var audioElement = document.getElementById(‘myaudio’);

Play ချင်ရင်

audioElement.play();

Pause လုပ်ချင်ရင်

audioElement.pause();

ကြာမယ့် အချိန်ကို သိချင်ရင် (total second ကိုပြသည်)

audioElement.duration

လက်ရှိ ရောက်နေတဲ့ second ကို သိချင်ရင်

audioElement.currentTime

35 စက္ကန့်ကို ကျော်ချင်ရင်

audioElement.currentTime = 35;

သီချင်းပြောင်းချင်ရင်

audioElement.setAttribute(‘src’, ‘music/Track01.mp3′);

audioElement.load();

firefox နဲ့ opera အတွက်က ogg ပေါ့။ safari နဲ့ chrome အတွက်က mp3 ပေါ့။

HTML5 Video

saturngod — Fri, 14 May 2010 17:15:05 +0000

HTML5 video ကိုတော့ မနေ့တုန်းက video.saturngod.net အတွက် စမ်းဖြစ်လိုက်တယ်။ ပုံမှန် သမာရိုးကျကတော့

အဲဒါလေးပဲ။ mp4 က safari နဲ့ chrome တို့အတွက်ပေါ့။ webkit က mp4 မှ အလုပ်လုပ်တယ်။ ogg နဲ့ogv ကတော့ firefox , opera တို့အတွက်ပေါ့။ တကယ်လို့ video.saturngod.net မှာလို ဖြစ်ချင်ရင်တော့

ဆိုတာလေး ထည့်ပေးလိုက်ရုံပဲ။ နောက်ပြီး 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

saturngod — Thu, 13 May 2010 14:34:03 +0000

http://video.saturngod.net ကိုတော့ HTML5 video ပဲ ဆက်လက် အသုံးပြုသွားတော့မှာပါ။ ရေးရတာလွယ်သလို အဆင်လည်းပြေပါတယ်။ flv အစား HTML5 Video ဖြင့်သာ တင်သွားမှာပါ။ ဒါကြောင့် HTML5 video support လုပ်တဲ့ Firefox 3.6 , Chrome 2, Safari 4 တို့လိုအပ်ပါတယ်။

3D Site with HTML

saturngod — Wed, 08 Jul 2009 21:00:04 +0000

တစ်ချိန်တစ်ခါတုန်းက 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 top 
This is left 
This is right 
This is shadow