Responsive Web Design or Mobile App
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design or Mobile App

on

  • 697 views

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

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

Statistics

Views

Total Views
697
Views on SlideShare
697
Embed Views
0

Actions

Likes
0
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Web Design or Mobile App Responsive Web Design or Mobile App Presentation Transcript

  • 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!
  • การใช้งานและสถิติ   46.4% ของผู้ใช้โทรศัพท์เป็นมาร์ทโฟน! 22.4% ของเจ้าของมาร์ทโฟนใช้ iPhone! ! ในฝรั่งเศส จากผู้ที่มีมาร์ทโฟน! ! 90% ของผู้เข้าเยี่ยมชมเว็บไซต์ มาจากมาร์ทโฟน! และ! 70% ได้เข้าไปดาวน์โหลดโปรแกรมมาใช้งาน!
  • การใช้งานและสถิติ   บนอุปกรณ์มาร์ทโฟน! ใช้แสดงผลข้อมูล! 60%" ! และเป็นอุปกรณ์ที่เปิดใช้งาน! มากขึ้นทุกวันในโลก! h"p://www.eco-­‐conscient.com  
  • การออกแบบเว็บที่ตอบสนองได้   มีชุดเครื่องมือ และเทคนิคในการจัดระเบียบข้อมูล จากพารามิเตอร์ของอุปกรณ์ ! (คอมพิวเตอร์ตรวจสอบ, มาร์ทโฟน, แท็บเล็ต, โทรทัศน์, ฯลฯ .)! ภาพประกอบจากหนังสือที่ตีพิมพ์โดย Ethan Marcotte, 25 พฤษภาคม 2010!
  • การออกแบบเว็บที่ตอบสนองได้   RWD จะมีอยู่ในเทมเพลตมากที่สุด ในรุ่น Joomla 2.5 และ natively ใน! Joomla เทมเพลต 3.x!
  • การออกแบบเว็บที่ตอบสนองได้   RWD ในส่วนติดต่อของผู้ใช้ (หน้า) และ! ผู้บริหาร (Back-end) Joomla 3.x!
  • การออกแบบเว็บที่ตอบสนองได้   Joomla 3.x จะมี Bootstrap responsive framework ซึ่งประกอบไปด้วย CSS & JavaScript!
  • การออกแบบเว็บที่ตอบสนองได้   ด้วย Bootstrap, เราเพียงเรียกใช้ CSS ด้วยคลาสที่ต้องการ เพื่อนำเสนอเนื้อหาของ เราเพื่อให้ได้ผลลัพธ์เป็น responsive! <img alt="Logo" class="visible-desktop" src="/images/logo.png">!
  • หันมาเขียน CSS  แบบ less   จะทำให้สนุกขึ้นกว่าเดิม   hAp://lesscss.org/  
  • " " " "The dynamic stylesheet language.! ไฟล์.less = CSS valid + variables! Variables"
  • " " " "The dynamic stylesheet language.! Mixins"
  • " " " "The dynamic stylesheet language.! Nested Rules"
  • " " " "The dynamic stylesheet language.! Functions & Operations"
  • Preboot is a comprehensive and flexible collection of LESS utilities. Its original variables and mixins became the precursor to Bootstrap. Since then, it's all come full circle.! Brief history! Preboot was originally released in March 2011 under the name Bootstrap.less. Sensing the need for a larger and more comprehensive framework, I copped the name and created Bootstrap based on the original variables and mixins work here. To avoid obivous naming issues, I renamed this Preboot and essentially didn't touch the project for two years.! ! Fast forward two years and I'm backporting many of Bootstrap's variables and mixins back into Preboot as v2.! ! Disclaimer: Preboot v1 (Bootstrap.less) was released under a Creative Commons license and is still available. Preboot 2 is now under MIT.! ! " Visit site : getpreboot.com! Mark Otto! Twitter : @mdo! http://markdotto.com/ !
  • การออกแบบเว็บที่ตอบสนองได้   นำเสนอผ่าน CSS3" ใส่ code ใน <head> ถึง </head> ด้วย! ! <link href="mobile.css" type="text/css" media="screen and (max-device-width:480px)" rel="stylesheet"/>!
  • การออกแบบเว็บที่ตอบสนองได้   Source : http://www.splio.com/responsive/10_basic_tips_about_responsive_design_fr.pdf!
  • การออกแบบเว็บที่ตอบสนองได้   Framework  templates  ที่นิยมใน  Joomla!   •  •  •  •  •  •  Warp Framework! Zen Grid Framework! Helix Framework! Morph framework! Construct Template Framework! Jyaml Framework! •  •  •  •  •  •  JV Framework! Vertex Framework! Wright Framework! Expose Framework! YT Framework! Leo Framework! " " " " " "และอาจมีอีก...!
  • Design  for  Web  first  !  
  • Adjust  to  Mobile  
  • Supports  Mobile?  
  • Media  Viewport!  
  • Mobile  first  !  
  • Adjust  Media  Queries  
  • Adjust  Media  Queries   /*  Large  desktop  */     @media  (min-­‐width:  1200px)  {  ...  }       /*  Portrait  tablet  to  landscape  and  desktop  */     @media  (min-­‐width:  768px)  and  (max-­‐width:  979px)  {  ...  }       /*  Landscape  phone  to  portrait  tablet  */     @media  (max-­‐width:  767px)  {  ...  }       /*  Landscape  phones  and  down  */     @media  (max-­‐width:  480px)  {  ...  }  
  • Site  with  mobile  version   Configured subdomain: http://m.domainsite.com! ! Advantages:" - Version optimized for faster loading time! - SEO: caching mobile pages! ! Make Your Website Work Across Multiple Devices:" http://www.google.com/think/multiscreen/!
  • Applica`ons   iOS Development: Objective-C! Android Development: Java! ! ! Or! hAp://phonegap.com/   SOLUTION: Develop HTML5! and PhoneGap or Titanium! PhoneGap: portability application on android, iOS, windows phone, Blackberry!
  • นอกเหนือจากการออกแบบเว็บไซต์ให้รองรับการ แสดงผลหน้าจอแบบตอบสนองได้! สิ่งที่ต้องทำถัดไปคือเรื่อง! ความเร็วในการทำงาน"
  • ตัวอย่างเช่น:  MOBILEJOOMLA.COM   Mobile Joomla! is the best way to display your Joomla! site on iPhone, iPad, Android & more w/ up to 4x better performance compared to responsive and other mobile templates.! http://www.mobilejoomla.com/!
  • Processing  images   .htaccess  +    file  php  =  adap`ve  image   Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.! http://adaptive-images.com/!
  • Processing  images   Photo  galleries  with  adap`ve  picture:  OZIO  Gallery   iPhone Nokia iPad   PC    320x480    360x640    768x1024    normale    150px  ×  225px    177px  ×  265px    448px  ×  673px    641px  ×  962px   http://www.opensourcesolutions.es/en/ext/ozio-gallery.html!  14kb    19kb    98kb    170kb  
  • Useful  links   •  Test: http://emulateurmobile.com/! •  Re-Tester: Module user agent for Firefox! •  Observe: - stats of your sites over several years: ! http://httparchive.org/! ! Probe:" •  Integrate an offline cache html5 for navigation off line on your mobile: http://appcache.rawkes.com/!
  • QUESTIONS?  
  • Thank  You