กำหนด Layout ให้ยืดหยุดตามขนาดหน้าจอ Mobile Phone โดย CSS3

      วันนี้ผมจะนำเสนอ การกำหนดรูปแบบตามขนาดหน้าจอ ของ  Mobile Phone ครับ โดยใช้ CSS3 ควบคุมการแสดงผล  ให้แสดงตามขนาดหน้าต่างๆ ครับ


      จากรูปคุณจะเห็นว่า ขนาดหน้าจอของ Smartphon มีขนาดเล็กสุด Tablet ขนาดกลาง
และ Desktop แสดงผลเต็มจอ จากบทความ ตัวอย่าง รูปแบบการวาง Layout สำหรับ Mobile Phone
คุณจะทราบว่า ขนาดหน้าจอของ Mobile Phone  จะอยู่ที่ “320px,” “480px,” “768px,”  ครับ

แท็ก CSS3 โค้ดที่คุณจะใช้ก็คือ
@media screen and (max-width: "ขนาดหน้าจอ" px) {
             .
             .
     }

มาเริ่มกันเลยครับ
โค้ด CSS3 สำหรับหน้าจอขนาดไม่เกิน 320 px


<!DOCTYPE HTML>
<html>
     <head>
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>Untitled Document</title>
          <style>
                 @media screen and (max-width: 320px) {
body{
background-color:#CC6;
}
#tast:after {
content: "เว็บมีขนาด ไม่เกิน 320px;";
color:red;
}
               }
         </style>
         </head>
         <body>
                    <div id="tast"></div>
         </body>
</html>




ตัวอย่าง รูปแบบการวาง Layout สำหรับ Mobile Phone

     
       ช่วงนี้กระแส Mobile Phone มาแรงครับ ก็เลยจัดอีกซักบทความที่เกี่ยวกับ Mobile เต็มที่ แบบจัดเต็มทุก อนูขุนขน ฮ่าๆ เอาละ เข้าเรื่องเลยนะครับ ตามหัวข้อบทความนี้ "ตัวอย่าง รูปแบบการวาง Layout สำหรับ Mobile"  ผมจะมานำเสนอ การวาง Layout  Web ที่เขาใช้กันโดยทั่วไปๆ ครับ
เผื่อๆ ใครๆ ที่คิดไม่ออกว่าจะออกแบบอย่างไร ให้รับบน Mobile Phone แล้วสวย สมดุลกับหน้าจอที่หลากหลาย ของโทรศัทพ์ในปัจจุบันที่ออกมา เกลื่อนกลานเต็มไปหมด !



       รูปด้านบนเป็นการวาง  Layout สำหรับ Mobile ขนาดหน้าจอต่างๆ ครับ โดยสามารถยืดหยุนได้ตามขนาดของ หน้าจอ “320px,” “480px,” “768px,”  ครับ




        เป็นการออกแบบ ให้ Layout  สามารถรองรับได้ ทุกระบบ ไม่ใช่แค่แสดงผลบน Smartphone เท่านั้น แต่ออกแบบให้รองรับการใช้งาน บน Desktop ไปในตัวด้วยครับ

ตัวอย่างการวาง Layout สำหรับ Mobile Phone





Opera Mobile Emulator เครื่องมือใช้สำหรับรันเว็บแสดงผลบน Mobile Phone

        

     วันนี้ผมจะมาำนำเสนอเครื่องมือที่ จะช่วยให้คุณ ทดสอบหน้าเว็บ บนโทรศัพท์รุ่นต่างๆ ครับ
โดย Opera Mobile Emulator  หรือเรียกได้ว่าเป็น บาวเซอร์ของโทรศัทพ์ นั้นเระครับ  ซึ่งทาง Opera เขาทำให้ใช้กันแบบฟรีๆ เจ๋งดีจริงๆ ของฟรีอีกแล้วครับ  หน้าตาของโปรแกรมก็ทำออกมาน่าใช้งานมากๆ 



คุณสามารถเลือกรุ่นโทรศัพท์ ที่ต้องการได้ พร้อมบอกขนาดหน้าจอเสร็จสับ  ตามรูปด้านล่างเลยครับ


     การติดตั้งก็แสนง่ายครับ โหดลตัวโปรแกรมมา ก็กดใช้ได้เลย ! จะรออะไรละครับ 
ไปดาวห์โหลดมาใช้กัน ...
Opera Mobile Emulator


CSS3 คืออะไร

         กลับมาอีกครั้งกับภาคต่อ ของเจ้าพ่อผู้สร้างสรรค์เว็บใซต์ ครั้งนี้ขนขบวน แท็กโค้ด มาอย่างคับคลั่ง
สำหรับใครที่ยังไม่ได้เขียน 2 ภาคก่อนหน้านี้ ก็ไม่เป็นไร เขียนภาค 3ไปเลย ฮ่าๆ พูดเหมือนหนังเลยเนอะ
      เนื่องจากก่อนหน้านี้ บาวเซอร์อย่าง IE ไม่ซัพพอร์ต CSS3 จึงทำให้ไม่ค่อยมีใครสนใจ แต่บัดนี้ IE9 ประกาศยอมรับ CSS3 แล้ว ! จะเหลืออะไรละครับก็ทุกค่าย เขารัน CSS3 กันหมดแล้วนิ  ปัจจุบันการเขียนเว็บไซต์ โดยที่เห็นกันมาก จะเป็นการผสมผสานกันอยู่ 3 ภาษา อันได้แ่ก่ HTML5, Javascript และ CSS3 แค่นี้เว็บไซต์คุณก็ดูสดใส กว่าเว็บอื่นๆ แล้ว ผมก็พูดเว่อร์ไป ต้องดูการออกแบบ หรือ Design Web ถ้าออกมาห่วย ก็คือห่วยเระครับ

    การกลับมาของ CSS3 
สิ่งที่ผมชื่นชอบ CSS นั้นก็คือการทำให้เว็บดีสวยงาม ตามที่คุณต้องการได้ อยากให้ออกมาหน้าตายังไงก็ย่อมทำออกมาได้ ด้วย CSS    กลับมาครั้งนี้ก็ไม่ได้ทำให้หลายๆ คนผิดหวัง CSS3 สามารถสร้่าง Animation ต่างๆ ทำเหมือนกับว่าเว็บไซต์ของคุณสามารถมีชีวิตได้เลยละ  ยังสามารถปรับแต่ง Font เพิ่ม ไฟลุกหัวให้ อักษร Text คุณ และที่สำคัญ ทำให้คุณเขียน CSS ใด้ง่ายกว่า ที่คุณเคยเขียนมา เลยละครับ

ในบทต่อๆ ไป คุณจะได้เห็น CSS3 ว่ามันจะแหล่มซักแค่ไหน อย่าลืมติดตามชม นะครับ !




บทที่ 2 การเขียน Android โดยใช้ PhoneGap เบื้องต้น

ต่อจากบทที่แล้วนะครับ 
บทที่ 1 การติดตั้ง PhoneGap บน Eclipse สำหรับ Android
โดยบทนี้ จะเริ่มเขียนโค้ดในแบบฉบับของ  PhoneGap กันครับ
เปิด Eclipse พร้อมกับโปรเจ็ด Android ของคุณ
จากนั้นให้โค้ดเปิด ไฟล์ AndroidManifest.xml  ขึ้นมาครับ

ให้คุณเพิ่มโค้ดด้านล่างนี้ เข้าไปในไฟล์ โดยไว้ระหว่างแท็ก <uses-sdk.../> และ <application.../>


<supports-screens 
    android:largeScreens="true" 
    android:normalScreens="true" 
    android:smallScreens="true" 
    android:resizeable="true" 
    android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
นำไปใส่ให้ถูกตำแหน่งด้วยนะครับ



จากนั้นให้คุณไปที่ โฟลเดอร์ assets 
คลิกขวา เลือก New
ตามด้วย File


ที่ช่อง File name: ให้คุณใส่ index.html


จากนั้นคลิก Finish ครับ

ไฟล์ index.html จะถูกสร้างขึ้นมาอยู่ในโฟลเดอร์ www แล้วครับ
ให้คุณคลิกที่ไฟล์ index.html ที่คุณสร้างขึ้นมา
ใส่โค้ด HTML5 ด้านล่างลงไปในไฟล์ index.html ครับ
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>


เสร็จแล้ว Save ไฟล์ให้เรียบร้อยครับ
ต่อไปจะต้องไปกำหนดไฟล์ java ให้ดึง ไฟล์ html ไปทำงานครับ
ให้คุณไปที่ src 
คลิปที่ไฟล์ java หลักของโปรเจ็ค android คุณ



เพิ่มโค้ด import org.apache.cordova.*;



จากนั้นให้คุณแก้ Class จาก Activity  เปลี่ยนเป็น DroidGap


เปลี่ยน setContentView() เป็น super.loadUrl("file:///android_asset/www/index.html");


Save ให้เรียยร้อย แล้วลอง Run  ครับ



ที่คุณจะได้ คำว่า Hello World  ซึ่งมาจากไฟล์ HTML ที่คุณสร้างโดยให้แสดงคำนี้ออกมาครับ !

  

บทที่ 1 การติดตั้ง PhoneGap บน Eclipse สำหรับ Android

ขอประเดิมบทแรกด้วยการติดติ้ง PhoneGap เพื่อเขียน หรือพัฒนาแอพบน Android  ครับ !
โดยเครื่องของคุณจะต้องติดตั้ง SDK และ Eclipse ให้เรียบร้อยก่อนนะครับ เมื่อพร้อมแล้ว
เข้าเว็บด้านล่างนี้ เพื่อดาวห์โหลด เลยครับ
http://phonegap.com/download

คลิก Download


เมื่อคลี่ไฟล์ ออกมาคุณจะพบ กับโฟลเดอร์ 


    โฟลเดอร์ doc คือ ตัวอย่างและวิธีการเขียน PhoneGap สามารถเปิดอ่านได้โดยรันผ่าน 
เว็บบาวเซอร์
    โฟลเดอร์ถัดมาคือ  lib ตัวนี้ละครับที่ คุณจะเอาไปพัฒนาแอพบนโมบายรุ่นต่างๆ ซึ่งภายในจะประกอบด้วย Android,  Bada, BadaWac, Blackberry, ios, Symbian, Webos และ Windows-phone


ตอนนี้คุณต้องการเขียน บน Android ก็คลิกเข้าไปในโฟลเดอร์ android เลยครับ
จากนั้นเปิด โปรแกรม Eclipse  แล้วสร้าง New Android Application ให้เรียบร้อยครับ
สร้างตามที่คุณต้องการ !


เมื่อสร้างเสร็จแล้วต่อไป จะให้คุณติดตั้ง PhoneGap  กันครับ
ไปที่โฟลเดอร์ anroid ของ PhoneGap ที่คุณโหดลมา 
คลิกขวาที่ cordova-2.0.0.jar เลือก Copy 


กลับมาที่โปรแกรม Eclipse ที่โปรเจ็คแอพคุณ
คลิกขวา ที่โฟลเดอร์ libs เลือก Paste เพื่อวาง


เสร็จแล้วจะได้ตามรูปนี้ครับ


มาต่อกันครับ ไปที่โฟรเดอร์ assets ครับ
คลิปขวา แล้วเลือก New จากนั้นไปที่ Folder เพื่อสร้างโฟรเดอร์ใหม่เข้าไปครับ



ตั้งชื่อ Folder name: ให้คุณใส่ www จากนั้นกด Finish


ให้คุณ Copy ไฟล์ cordova-2.0.0.js จากโฟลเดอร์ PhoneGap ทีุ่คุณโหลดมาในโฟลเดอร์
android  


ให้คุณนำไปวางใว้ใน โฟลเดอร์  www ของ assets  ที่คุณเพิ่มสร้างไป



เมื่อ Copy มา Paste คุณจะได้แบบนี้ครับ


กลับไปที่โฟลเดอร์ android เพื่อ Copy โฟลเดอร์ xml


ให้คุณนำไฟล์ xml ไปวางใว้ในโฟลเดอร์ res เลยครับ


เสร็จแล้วจะได้ตามรูปด้านล่างนี้ครับ


ขั้นตอนสุดท้าย คุณจะต้องตั้ง Path ให้กับ App Android ด้วย
ให้คุณ คลิกขวาที่โปรเจ็ค App Android  ของคุณ
ไปที่ Build Path  จากนั้น คลิกเลือก Configure Build Path.. 


คลิกที่ Resource 
เลือก  Java Build Path
คลิกที่แท็ป Libraries


คลิกที่ Add JARs... เมนูด้านขวา เลยครับ


จะมี popup ขึ้นมาให้คุณเลือกโปรเจ็ค App Android ที่คุณติดตั้ง PhoneGap ใว้แล้ว
ไปที่ โฟรเดอร์ libs 
เลือก cordova-2.0.0.jar
แล้วกด OK ครับ

จากนั้น กด OK อีกครั้ง



แค่นี้ก็เสร็จแล้วการติดตั้ง PhoneGap ครับ อาจจะยุ่งยากไปนิดนะครับ
บทต่อไป จะเริิ่มเขียนกันเลยครับ..






















PhoneGap คืออะไร


           PhoneGap หรือเรียกเต็มๆว่า Mobile Application Development Framework มันก็คือเครื่องมือที่ช่วยให้คุณสามารถสร้าง Application บนมือถือได้อย่างง่ายๆ โดยที่คุณไม่จำเป็นต้องเซียน Java ไม่รู้ซึ้ง ojective-c ของ apple   ก็สามารถสร้างแอพได้ เพียงแค่คุณมีความรู้ด้านเขียนเว็บเท่านั้นก็พอ

           PhoneGap  รองรับระบบของ Android,  IOS,  Windowsphone,  Webos หรือแม้แต่ Blackberry หลักการทำงานของ PhoneGap  ก็คือ จะทำการรันหน้าเว็บ ที่เป็น html ของเรา ขึ้นมาบน application ที่ต้อง install ลงไปในเครื่อง โดยคุณอาจจะต้องการความสามารถต่างๆ บนโทรศัพท์เช่น ถ่ายรูป ถ่ายวิดิโอ ดึงรายชื่อเพื่อน หรือ สั่งให้เครื่องสั่น คุณก็สามารถทำได้โดยการเรียกใช้ javascript ที่ phonegap เตรียมมาให้  และอีกอย่างมันฟรีครับ ก็ยังเปิดโอกาสให้นักพัฒนาสามารถพัฒนา plugin ต่างๆเข้าไปเชื่อม กับ phonegap ได้ อย่าง plugin ที่เห็นกันตอนนี้ก็จะมี barcodescan pushnotification หรือแม้แต่ nfc reader ของ Android ข้อดี อย่างนึงของ phonegap ก็คือ code หรืออะไรก็ตามที่ใช้ javascript หรือ html อยู่แล้ว สามารถนำมาปรับใช้กับ phonegap ได้ทันที

        และที่สำคัญ  Adobe ทีมพัฒนา ประกาศให้ dreamweaver cs 5.5 support การทำงานของ phonegap อย่างเต็มระบบ


ข้อดี
-พัฒนาง่ายและรวดเร็ว เพราะ ใช้ ภาษา html ที่เข้าใจง่าย
-ไม่ต้องเรียนรู้ภาษาใหม่เพราะจริงๆแล้ว html ก็เป็นภาษาที่ทุคนคงจะเคยเห็นและผ่านตามาบ้าง
-นักพัฒนาสามารถเข้าไปเขียน plugin เสริมได้เรื่อยๆ ทำให้เรามีอะไรใหม่ๆให้เราใช้ตลอดเวลา

ข้อเสีย
-phonegap ไม่ใช่ native application เต็มตัวจึงทำให้ไม่สามารถเรียกความสามารถบางอย่างมาใช้ไม่ได้ เช่น -user interface หรือ system function บางอย่าง
-phonegap ไม่ได้รันบน server เพราะฉะนั้น serverside script อย่าง php asp หมดสิทธิครับ
ถ้า ถามผมว่า แล้ว phonegap เหมาะกับ application แบบไหนคงตอบได้ว่าเหมาะกับ app ที่ไม่ได้ต้องการจะใช้งานอะไรมาก app ที่ไม่ได้ใช้นานๆ หรือ app ขนาดไม่ใหญ่ แต่ก็ไม่แน่ว่าวันนึง phonegap อาจจะมีความสามารถขึ้นมาทัดเทียม การพัฒนาแบบ native application ก็ได้