Download ********* PowerPoint

ออกแบบเว็บไซต์ให้ สวยด้ วย
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 หน่ วย-->
&nbsp
</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.