(2015년 상반기) HTML5 및 Hybrid app 최신 동향
Your SlideShare is downloading.
×
More Related Content
Slideshows for you (20)
Viewers also liked (9)
Similar to Html5 + Bootstrap & Mobirise (20)
More from Khirulnizam Abd Rahman (18)
Recently uploaded (20)
Html5 + Bootstrap & Mobirise
- 1. HTML5 + BOOTSTRAP & MOBIRISE Khirulnizam Abd Rahman ( Kerul.net ) FSTM, KUIS. Materials at bit.ly/html5000
- 2. TRAINING OUTLINE HTML5 – refers to the modern day of HTML which promotes native handling of video & audio & animation without having to install additional plugins to browser. Bootstrap – A HTML framework supports responsive web design to provide one time webpage development for smartphone, tablet and desktop. Mobirise – a free web design studio that support HTML5 & Bootstrap’s famous ‘block’ design. 11/8/2016 http://blog.kerul.net 2
- 3. HTML5 HTML5 – refers to the modern day of HTML which promotes native handling of video & audio & animation without having to install additional plugins to browser. <!DOCTYPE html> 11/8/2016 http://blog.kerul.net 3
- 4. HTML5 IMAGE HANDLING <img src="pic_mountain.jpg" alt="MountainView" style="width:304px;height:228px;"> Use width 100% to support responsive layout design. 11/8/2016 http://blog.kerul.net 4
- 5. HTML5 NATIVEVIDEO <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> 11/8/2016 http://blog.kerul.net 5
- 6. HTML5 NATIVE AUDIO <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> 11/8/2016 http://blog.kerul.net 6
- 7. LOCATION MAPS 11/8/2016 http://blog.kerul.net 7
- 8. BLOCK <DIV> 11/8/2016 http://blog.kerul.net 8
- 9. HTML RESPONSIVE LAYOUT 11/8/2016 http://blog.kerul.net 9
- 10. HTML RESPONSIVE LAYOUT What is Responsive Web Design? Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen 11/8/2016 http://blog.kerul.net 10
- 11. VIEWPORT <meta name="viewport" content="width=device-width, initial-scale=1"> The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. 11/8/2016 http://blog.kerul.net 11
- 12. HTML RESPONSIVE LAYOUT 11/8/2016 http://blog.kerul.net 12
- 13. HTML RESPONSIVE LAYOUT 11/8/2016 http://blog.kerul.net 13
- 14. BOOTSTRAP A HTML framework supports responsive web design to provide one time webpage development for smartphone, tablet and desktop. 11/8/2016 http://blog.kerul.net 14
- 15. BOOTSTRAP Download framework from getbootstrap.com OR use the CDN 11/8/2016 http://blog.kerul.net 15
- 16. BOOTSTRAP -SETTING > Copy the CSS script to the project folder. > OR we can use CDN server 11/8/2016 http://blog.kerul.net 16
- 17. BASIC BOOTSTRAP LAYOUT Try it here http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ default&stacked=h 11/8/2016 http://blog.kerul.net 17
- 18. BOOTSTRAP FORM 11/8/2016 http://blog.kerul.net 18
- 19. BOOTSTRAP GRID SYSTEM 11/8/2016 http://blog.kerul.net 19
- 20. BOOTSTRAP GRID SYSTEM DESKTOP 11/8/2016 http://blog.kerul.net 20 Banner Footer Main Content Sidebar
- 21. BOOTSTRAP GRID SYSTEM MOBILE 11/8/2016 http://blog.kerul.net 21 Banner Footer Main Content Sidebar
- 22. FREE STARTBOOTSTRAP.COM Example https://startbootstrap.com/ 11/8/2016 http://blog.kerul.net 22
- 23. SAMPLE1 – ICITM2016 11/8/2016 http://blog.kerul.net 23
- 24. SAMPLE2 - SMARTSOLAT 11/8/2016 http://blog.kerul.net 24
- 25. MOBIRISE Mobirise – a free web design studio that support HTML5 & Bootstrap’s famous ‘block’ design. 11/8/2016 http://blog.kerul.net 25
- 26. MOBIRISE Done with the talking, lets walk the talk… ;) 11/8/2016 http://blog.kerul.net 26
- 27. SELECTTHEME 11/8/2016 http://blog.kerul.net 27
- 28. 11/8/2016 http://blog.kerul.net 28
- 29. Select block 11/8/2016 http://blog.kerul.net 29
- 30. 11/8/2016 http://blog.kerul.net 30
- 31. 11/8/2016 http://blog.kerul.net 31
- 32. MOBIRES- CHANGING IMAGE 11/8/2016 http://blog.kerul.net 32
- 33. MOBIRES-TEXT EDITING 11/8/2016 http://blog.kerul.net 33
- 34. 11/8/2016 http://blog.kerul.net 34
- 35. 11/8/2016 http://blog.kerul.net 35
- 36. THANKYOUVERY MUCH Newton keep asking, Why apple FALL from tree? Everybody asks silly questions before becoming a star… 11/8/2016 http://blog.kerul.net 36
