CS-Developer

กำหนด 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>

Labels: Tip and Trick

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

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

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

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

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

Labels: Tool

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

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

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

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

ไปดาวห์โหลดมาใช้กัน ...

Opera Mobile Emulator

Labels: CSS3

CSS3 คืออะไร

กลับมาอีกครั้งกับภาคต่อ ของเจ้าพ่อผู้สร้างสรรค์เว็บใซต์ ครั้งนี้ขนขบวน แท็กโค้ด มาอย่างคับคลั่ง

สำหรับใครที่ยังไม่ได้เขียน 2 ภาคก่อนหน้านี้ ก็ไม่เป็นไร เขียนภาค 3ไปเลย ฮ่าๆ พูดเหมือนหนังเลยเนอะ

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

การกลับมาของ CSS3

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

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

Labels: Android, PhoneGap

บทที่ 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 ที่คุณสร้างโดยให้แสดงคำนี้ออกมาครับ !

Labels: Android, PhoneGap

บทที่ 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 ครับ อาจจะยุ่งยากไปนิดนะครับ

บทต่อไป จะเริิ่มเขียนกันเลยครับ..

Labels: 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 ก็ได้

CS-Developer

Like URL