Responsive Web Design or Mobile App

499
-1

Published on

Responsive Web Design or Mobile App - Joomla!Day™ Bangkok 2013

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
499
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design or Mobile App

  1. 1. Responsive  Web  Design   or   Mobile  App   Joomla!Day™  Bangkok  2013   Name: Supachai Teasakul! Location: Bangkok, Thailand! Position: Joomla Translation WG - Joomla.org, ! " "LaiThai Developer Team, ! " "Project Manager - Marvelic Engine Co.,Ltd.! Web: !Marvelic.co.th! Twitter: !@supa_chai!
  2. 2. การใช้งานและสถิติ   46.4% ของผู้ใช้โทรศัพท์เป็นมาร์ทโฟน! 22.4% ของเจ้าของมาร์ทโฟนใช้ iPhone! ! ในฝรั่งเศส จากผู้ที่มีมาร์ทโฟน! ! 90% ของผู้เข้าเยี่ยมชมเว็บไซต์ มาจากมาร์ทโฟน! และ! 70% ได้เข้าไปดาวน์โหลดโปรแกรมมาใช้งาน!
  3. 3. การใช้งานและสถิติ   บนอุปกรณ์มาร์ทโฟน! ใช้แสดงผลข้อมูล! 60%" ! และเป็นอุปกรณ์ที่เปิดใช้งาน! มากขึ้นทุกวันในโลก! h"p://www.eco-­‐conscient.com  
  4. 4. การออกแบบเว็บที่ตอบสนองได้   มีชุดเครื่องมือ และเทคนิคในการจัดระเบียบข้อมูล จากพารามิเตอร์ของอุปกรณ์ ! (คอมพิวเตอร์ตรวจสอบ, มาร์ทโฟน, แท็บเล็ต, โทรทัศน์, ฯลฯ .)! ภาพประกอบจากหนังสือที่ตีพิมพ์โดย Ethan Marcotte, 25 พฤษภาคม 2010!
  5. 5. การออกแบบเว็บที่ตอบสนองได้   RWD จะมีอยู่ในเทมเพลตมากที่สุด ในรุ่น Joomla 2.5 และ natively ใน! Joomla เทมเพลต 3.x!
  6. 6. การออกแบบเว็บที่ตอบสนองได้   RWD ในส่วนติดต่อของผู้ใช้ (หน้า) และ! ผู้บริหาร (Back-end) Joomla 3.x!
  7. 7. การออกแบบเว็บที่ตอบสนองได้   Joomla 3.x จะมี Bootstrap responsive framework ซึ่งประกอบไปด้วย CSS & JavaScript!
  8. 8. การออกแบบเว็บที่ตอบสนองได้   ด้วย Bootstrap, เราเพียงเรียกใช้ CSS ด้วยคลาสที่ต้องการ เพื่อนำเสนอเนื้อหาของ เราเพื่อให้ได้ผลลัพธ์เป็น responsive! <img alt="Logo" class="visible-desktop" src="/images/logo.png">!
  9. 9. หันมาเขียน CSS  แบบ less  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×