Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
ออกแบบเว็บไซต์ให้ สวยด้ วย bootstrap framework อับดุลอาซิส ดือราแม สุรกิจ ชูเดช 16 – 17 มกราคม 2559 แนะนาวิทยากร • สุรกิจ ชูเดช • Web programmer • Web designer • ประสบการณ์ทางาน 8 ปี • อับดุลอาซิส ดือราแม • Web programmer • Web designer • ประสบการณ์ทางาน 3 ปี Course outline • ภาพรวมการ ออกแบบเว็บไซต์ • ทาความรู้จกั HTML 5, CSS 3, jQuery • ทาความรู้จกั CSS Framework • รู้จกั bootstrap framework อย่างละเอียด • พัฒนาเว็บไซต์ ขนาดเล็ก ด้ วยความรู้ที่เรี ยนมา Modern web design concept (1) Vary internet-base device screen • Smartphone 4 – 6 inches • Tablet 6 – 12 inches • 4k monitor 30 – 40 inches Mean every device has it own comfortable size of view Modern web design concept (2) • All language improve • Server side language : PHP, ASP • Mark up language : html5 • Styling language : CSS3 • Frontend interactive : JavaScript, Jquery2 • More object-oriented • New and deprecated method/properties • Data validation Modern web design(3) • Interactive user experience • • • • Useful AJAX action Colorful UX Standard and fun animation See the result of an action Modern web design(4) • More object oriented code • Class base programming • Reusable code • Useful OOP property Modern web design(5) • A Lot of tools and framework • • • • Every programming language has it Library and Framework concept modeling tool and validating tool Open source project Web application coding style example(1) • Old style 1. Avoid Use Inline Styles <p style="color: red;">I love you! </p> 2. • New style 1. Separate styling code #someElement > p { color: red; } <p>I love you! </p> CSS shorthand .class { padding-left: 3px; margin-right: 6px; padding-top: 10px; padding-right: 9px; margin-left: 6px; background-image: url('images/happy.jpg'); background-position: bottom; background-repeat: repeat-x; background-color: #E2CCCC; } .class { padding: 10px 9px 0 3px; margin: 0 6px; background: url('images/happy.jpg') repeat-x #E2CCCC bottom; } Web application coding style example(2) • Old style 1. No meaning name .button { padding: 10px 9px 0 3px; margin: 0 auto; Color: red; • New style 1. Use semantic name .red-center-button{ padding: 10px 9px 0 3px; margin: 0 auto; Color: red; } } 2. uncheck html, CSS, JavaScript I. Bad practice II. not standard III.No future-proof 2. Validate html, CSS, JavaScript • W3C HTML Validator • W3C CSS Validator Web application coding style example(3) • Old style Avoid static Tables <table> <tr> <td>this</td> <td>is</td> <td>table</td> </tr> </table> • New style use responsive table, grid system <style> .table { display: table; } .row { display: table-row; } .cell { display: table-cell; } </style> <div class="table"> <div class="row"> <div class="cell">this</div> <div class="cell">is</div> <div class="cell">table</div> </div> </div> Modern style coding Pros and Cons • Pros • Cons Stunning CSS design website(1) http://themes.startbootstrap.com/vitality-v1.3.6/creative.html Stunning CSS design website(2) http://the8guild.com/themes/html/ultima/v2.3.1/landing1.html Mini activity • Create your bibliography/portfolio with all Modern web coding knowledge Before develop web application • editor 1. 2. 3. 4. 5. Adobe Dreamweaver Editplus Notepad++ Sublime notepad • Must known language 1. Html 2. CSS 3. JavaScript • Browser with developer tool included • Google chrome • Mozilla Firefox Latest web programming language • HTML version 5 • CSS version 3 • JQUERY VERSION 2(JavaScript library) HTML5 – what new? • New semantic elements like <header>, <footer>, <article>, and <section>. • New form control attributes like number, date, time, calendar, and range. • New graphic elements: <svg> and <canvas>. • New multimedia elements: <audio> and <video>. New HTML5 API's • HTML Geolocation • HTML Drag and Drop • HTML Local Storage HTML5 – Document structure • section − This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure. • article − This tag represents an independent piece of content of a document, such as a blog entry or newspaper article. • aside − This tag represents a piece of content that is only slightly related to the rest of the page. • header − This tag represents the header of a section. • footer − This tag represents a footer for a section and can contain information about the author, copyright information, etc. • nav − This tag represents a section of the document intended for navigation. HTML5 – Web Forms 2.0 New and useful element • <Input>-date • <Input>- time • <Input>- number • <Input>- range • <Input>- email • <Input>- url • <datalist> New and useful attribute • placeholder • autofocus • required HTML5 – Multimedia • Video • Audio most commonly used video formats - most commonly used video formats - • Ogg − Ogg files with Thedora video codec and Vorbis audio codec. • ogg • mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec. • mp3 <video width="300" height="200" controls autoplay> <source src="/html5/foo.ogg" type="video/ogg" /> <source src="/html5/foo.mp4" type="video/mp4" /> Your browser does not support the video element. </video • wav <audio controls autoplay> <source src="/html5/audio.ogg" type="audio/ogg" /> <source src="/html5/audio.wav" type="audio/wav" /> Your browser does not support the audio element. </audio> HTML5 – other HTML Graphics HTML APIs • HTML5 Canvas • Geolocation • HTML5 SVG • Web Storage • HTML5 Event Attributes JQUERY - intro JQUERY • JavaScript Library • greatly simplifies JavaScript programming. JavaScript ? • Change HTML Content • Change HTML Attributes • Change HTML Styles (CSS) • Can Validate Data JQUERY – basic(1) Html element => DOM(document object model) Adding jQuery to Your Web Pages jQuery makes it easy to: • find elements in an HTML • Local source document <script src="jquery1.11.3.min.js"></script> • change HTML content • listen to what a user does and react accordingly • CDN source • animate content on the <script src="http://ajax.aspnetcdn.com/ajax/jQu page ery/jquery-1.11.3.min.js"></script> • talk over the network to <script src="https://ajax.googleapis.com/ajax/l fetch new content ibs/jquery/1.11.3/jquery.min.js"></scri pt> JQUERY – basic(2) Syntax • Basic syntax is: $(selector).action() • A $ sign to define/access jQuery • A (selector) to "query (or find)" HTML elements • A jQuery action() to be performed on the element(s) Document Ready Event It is good practice to wait for the document to be fully loaded and ready before working with it $(document).ready(function(){ $(this).hide(); $("p").show(); }); JQUERY – search/find DOM jQuery Selectors • Element selector $("p") $("p").hide(); • id Selector <p id="test">I love you<p> $("#test").hide(); • class Selector <p class="test">I love you<p> $(“.test").hide(); jQuery Traversing traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements • Traversing Up <li> <span id="test">I love you<code>so much</code><span> </li> $("span").parent(); • Traversing down <li> <span id="test">I love you<code>so much</code><span> </li> $("span").children(); JQUERY – change DOM • Set & Get Content - html(),val() $("#btn1").click(function(){ $("#test1").val(); }); $("#btn1").click(function(){ $("#test1").val(“love!"); }); • Add append(), prepend() $("p").append("Some appended text."); $("p").prepend("Some prepended text."); Remove remove(), empty() $("#div1").remove(); $("#div1").empty(); • Set & Get CSS - addClass(), removeClass(), css() $("p").css("background-color"); $("p").css("background-color", "yellow"); <style> .blue { color: blue; } </style> $("button").click(function(){ $(“p").addClass("blue"); }); $("button").click(function(){ $("p").removeClass("blue"); }); JQUERY – listen event • Single event handlers $("p").click(function(){ $(this).hide(); }); $("p").on("click", function(){ $(this).hide(); }); • multiple event handlers $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } }); JQUERY – connect Server without reload • AJAX exchanging data with a server, and updating parts of a web page - without reloading the whole page. $(document).ready(function(){ $("button").click(function(){ $.ajax({url: "demo_test.txt", success: function(result){ $("#div1").html(result); }}); }); }); JQUERY – other • Effects - hide() and show() $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); • Method Chaining $("#p1").css("color", "red") .slideUp(2000) .slideDown(2000); CSS - basic • Syntax <style> //(selector) p { </style> • Selectors • Element (properties) (value) text-align: center;} • CSS Class <style> a.highlight{ color: #ff0000; } </style> <a class="highlight" href="css_syntax.asp">CSS Syntax</a> p { text-align: center;} • ID #center { text-align: center;} • Class .center { text-align: center;} • Grouping p, #center, .center { text-align: center;} CSS – must known properties(1) Position Measure • Position • Height and Width • Align • Display • float and clear • Size • Margin • Padding CSS – must known properties(2) Image & color html related • Background • Border • Color • Text Font • Image Opacity • Tables • Forms CSS3 – must known new things • Rounded Corners • Transitions • Animations • Responsive Web Design Html DOM Nodes Relationships The terms parent, child, and sibling are used to describe the relationships. • In a node tree, the top node is called the root (or root node) • Every node has exactly one parent, except the root (which has no parent) • A node can have a number of children • Siblings (brothers or sisters) are nodes with the same parent CSS Frameworks • Bootstrap • Foundation • Skeleton • Semantic-UI • Pure • Material Design Style – Materialize • Windows Metro Style - Metro UI Bootstrap used. Responsive design. Facebook design (Joke) Tools 1. Web Browser (Google Chorme) 2. Text editor (Sublime, Notepad++, Netbeans) 3. Responsive web design tester extension for web browser Installation Official site: http://getbootstrap.com/ 1. Use Bootstrap CDN <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 2. Download to client. css/ ├── bootstrap.css ├── bootstrap.css.map ├── bootstrap.min.css ├── bootstrap-theme.css ├── bootstrap-theme.css.map └── bootstrap-theme.min.css js/ ├── bootstrap.js └── bootstrap.min.js fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 Getting started Create HTML 5 and include Bootstrap, jQuery. <!DOCTYPE html> <html lang=“th"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap First Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> CSS Containers 1. .container -> Fixed width <div class="container"> ... </div> 2. .container-fluid -> Percent width <div class="container-fluid"> ... </div> Grid system. Grid Options. Grid system. Grid example. Grid system. • Offsetting columns • Nesting columns • Column ordering Wireframe. Wireframe. Wireframe. <div class="navbar navbar-default"> <!–- เมนูบนสุด --> <div class="container"> <!–- สร้างกรอบ container --> Bootstrap Grid Default </div> <div class="row"> <!–- สร้างแถวที่ 2 --> <div class="col-sm-12"> <!–- สร้างคอลัม 12 --> Banner </div><!–- จบ col-sm-12 --> </div> </div><!–- จบแถวที่ 2 --> <div class="container"> <!–- สร้างกรอบ container --> <div class="row"> <!–- สร้างแถวที่ 3 --> <div class="row"> <!–- สร้างแถวที่ 1 --> <div class="col-sm-3"> <!–- สร้างคอลัม 3 หน่ วย--> <img src="images/logo.png" alt="logo"> </div> <!–- จบ col-sm-3 --> <div class="col-sm-9"> <!–- สร้างคอลัม 9 หน่ วย-->   </div><!–- จบ col-sm-9 --> </div><!–- จบแถวที่ 1 --> <div class="col-sm-6"> <!–- สร้างคอลัม 6 หน่ วย--> Column 1 </div><!–- จบ col-sm-6 --> <div class="col-sm-6"> <!–- สร้างคอลัม 6 หน่ วย--> Column 2 </div><!–- จบ col-sm-6 --> </div><!–- จบแถวที่ 3 --> </div> <!–- จบกรอบ container --> Wireframe. Typography. Management text style. • Headings • Body copy • Inline text elements • Alignment classes • Transformation classes • Abbreviations • Addresses • Blockquotes • Lists Table. Management table style. Basic table Table. Management table style. Striped rows Use .table-striped to add zebra-striping to any table row. Table. Management table style. Bordered table Add .table-bordered for borders on all sides of the table and cells. Table. Management table style. Hover row Add .table-hover to enable a hover state on table rows. Table. Management table style. Condensed table Add .table-condensed to make tables more compact by cutting cell padding in half. Table. Management table style. Contextual classes Use contextual classes (.active .success .info .warning .danger) to color table rows or individual cells. Table. Management table style. Responsive tables Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). Forms. Management form layout and style. Basic form Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control Forms. Management form layout and style. Inline form Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. Forms. Management form layout and style. Horizontal form Align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>) Buttons. Options Use any of the available button classes to quickly create a styled button. Images. Responsive images Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. Image shapes Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. Helper classes. Contextual colors Convey meaning through color with a handful of emphasis utility classes. Helper classes. Contextual backgrounds Easily set the background of an element to any contextual class. Responsive utilities. Available classes Use a single or combination of the available classes for toggling content across viewport breakpoints. Responsive utilities. Print classes Similar to the regular responsive classes, use these for toggling content for print. Components Glyphicons. Available glyphs Includes over 250 glyphs in font format from the Glyphicon Halflings set. Dropdowns. • Alignment • Headers • Divider • Disabled menu items Button groups. Button dropdowns. Input groups. Navs. Tabs Pills Navbar. Breadcrumbs. Pagination. Labels. Badges. Jumbotron. Page header. Thumbnails. Alerts. Progress bars. Media object. List group. Panels. Responsive embed. Wells. Javascript Modals. Modals. Dropdowns. ScrollSpy. ScrollSpy. Togglable tabs. Tooltips. Popovers. Alert messages. Buttons. Buttons. Collapse. Carousel. Questions ? Thank you.