网页前端技术最近几年发展迅速,前些年的最佳实践已经完全不适用现在大屏,多屏,多设备,响应式的新需求了。本文介绍前端技术的基本概念和主要框架及方法学。

注脚

1. bootstrap framework

2.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

3.Modern web design concept (2) All languag e 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

4.Modern web design(3) Interactive user experience Useful AJAX action Colorful UX Standard and f un animation See the result of an action

5.Modern web design(4) More object oriented code Class base programming Reusable code Useful OOP property

6.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

7.Web application coding style example(1) Old style New style <p style="color: red;"> I love you! </p> .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; } # someElement > p {   color: red ; } <p>I love you! </p> .class { padding: 10px 9px 0 3px; margin: 0 6px; background: url (images/happy.jpg) repeat-x #E2CCCC bottom; } Avoid Use Inline Styles 2. CSS shorthand Separate styling code

8.Web application coding style example(2) Old style New style . button { padding : 10px 9px 0 3px; margin : 0 auto; Color: red; } .red-center-button{ padding: 10px 9px 0 3px; margin: 0 auto; Color: red; } Bad practice not standard No future-proof No meaning name 2. uncheck html, CSS, JavaScript Use semantic name Validate html, CSS, JavaScript W3C HTML Validator W3C CSS Validator

9.Web application coding style example(3) Old style New style < table> < tr > <td> this </td > <td >is </td > <td> table </td > </ tr> </ table> <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> Avoid static Tables use responsive table, grid system

10.Modern style coding Pros and Cons Pros Cons

11.Stunning CSS design website(1) http://themes.startbootstrap.com/vitality-v1.3.6/creative.html

12.Stunning CSS design website(2) http://the8guild.com/themes/html/ultima/v2.3.1/landing1.html

13.Mini activity Create your bibliography/portfolio with all Modern web coding knowledge

14.Before develop web application editor Adobe Dreamweaver Editplus Notepad++ Sublime notepad Must known language Html CSS JavaScript Browser with developer tool included Google chrome Mozilla Firefox

15.Latest web programming language HTML version 5 CSS version 3 JQUERY VERSION 2(JavaScript library)

16.Latest web programming language HTML version 5 CSS version 3 JQUERY VERSION 2(JavaScript library)

17.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.

18.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

19.HTML5 – Multimedia Video most commonly used video formats - Ogg  − Ogg files with Thedora video codec and Vorbis audio codec. mpeg4  − MPEG4 files with H.264 video codec and AAC audio codec. Audio most commonly used video formats - ogg wav 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 <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>

20.HTML5 – other HTML Graphics HTML5 Canvas HTML5 SVG HTML  APIs Geolocation Web Storage HTML5 Event Attributes

21.JQUERY - intro JQUERY JavaScript Library greatly simplifies JavaScript programming. JavaScript  ? Change HTML Content Change HTML Attributes Change HTML Styles (CSS) Can Validate Data

22.JQUERY – basic(1) jQuery makes it easy to: find elements in an HTML document change HTML content listen to what a user does and react accordingly animate content on the page talk over the network to fetch new content Html element => DOM ( document object model ) Adding jQuery to Your Web Pages Local source CDN source <script src ="jquery-1.11.3.min.js"></script> <script src ="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script > <script src ="https://ajax.googleapis.com/ajax/libs/ jquery /1.11.3/jquery.min.js"></script>

23.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(); });

24.JQUERY – search/find DOM jQuery Selectors Element selector id Selector class Selector jQuery Traversing traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements Traversing Up Traversing down $("p ") $("p").hide(); <p id="test ">I love you<p> $("# test").hide (); <p class=" test ">I love you<p> $(“.test ").hide (); <li> <span id="test">I love you<code>so much</code><span> </li> $(" span").parent(); <li> <span id="test">I love you<code>so much</code><span> </li> $(" span ").children ();

25.JQUERY – change DOM Set & Get Content - html(), val () Add append(), prepend() Remove remove(), empty() Set & Get CSS - addClass (), removeClass (), css () $("#btn1").click(function(){ $("#test1 "). val (); }); $("# btn1").click(function(){ $("#test1 "). val (“love!"); }); $("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"); }); $("p").append("Some appended text ."); $("p").prepend("Some prepended text."); $("#div1").remove (); $("#div1").empty();

26.JQUERY – listen event Single   event handlers multiple event handlers $("p").click(function(){ $(this).hide(); }); $(" p").on("click", function(){ $(this).hide(); }); $("p").on({ mouseenter : function(){ $(this). css ("background-color", " lightgray "); }, mouseleave : function(){ $(this). css ("background-color", " lightblue "); }, click: function(){ $(this). css ("background-color", "yellow"); } });

27.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); }}); }); });

28.JQUERY – other   Effects - hide() and show()   Method Chaining $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); $("#p1"). css ("color", "red") . slideUp (2000) . slideDown (2000);

29.CSS - basic Syntax CSS Class Selectors Element ID Class Grouping <style> //(selector) (properties) (value) p { text-align : center ;} </style> p { text-align: center;} #center { text-align: center;} .center { text-align: center;} p, # center, .center { text-align: center;} <style> a.highlight { color: #ff0000; } </style > <a class="highlight" href ="css_syntax.asp">CSS Syntax</a >

30.CSS – must known properties(1) Position Position Align float and clear Measure Height and Width Display Size Margin Padding

31.CSS – must known properties(2) Image & color Background Color Image Opacity html related Border Text Font Tables Forms

32.CSS3 – must known new things Rounded Corners Transitions Animations Responsive Web Design

33.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

34.CSS Frameworks Bootstrap Foundation Skeleton Semantic-UI Pure Material Design Style – Materialize Windows Metro Style - Metro UI

35.

36.Bootstrap used.

37.Responsive design.

38.Facebook design (Joke)

39.Tools Web Browser (Google Chorme) Text editor (Sublime, Notepad++, Netbeans ) Responsive web design tester extension for web browser

40.Installation Official site : http://getbootstrap.com/ Use Bootstrap CDN Download to client. <!-- 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> 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

41.Installation Official site : http://getbootstrap.com/ Use Bootstrap CDN Download to client. <!-- 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> 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

42.CSS

43.Containers .container -> Fixed width .container-fluid -> Percent width <div class = " container " > ... </div> <div class = " container -fluid " > ... </div>

44.Grid system. Grid Options.

45.Grid system. Grid example.

46.Grid system. Offsetting columns Nesting columns Column ordering

47.Wireframe.

48.Wireframe.

49.Wireframe. < div class = " navbar navbar -default" > <!–- เมนูบนสุด --> < div class = "container" > <!–- สร้างกรอบ container --> Bootstrap Grid Default </ div > </ div > < div class = "container " > <!–- สร้างกรอบ container --> < 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 = "row" > <!–- สร้างแถวที่ 2 --> < div class = "col-sm-12" > <!–- สร้างคอลัม 12 --> Banner </ div > <!–- จบ col-sm-12 --> </ div > <!–- จบแถวที่ 2 --> < div class = "row" > <!–- สร้างแถวที่ 3 --> < 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 -->

50.Wireframe. < div class = " navbar navbar -default" > <!–- เมนูบนสุด --> < div class = "container" > <!–- สร้างกรอบ container --> Bootstrap Grid Default </ div > </ div > < div class = "container " > <!–- สร้างกรอบ container --> < 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 = "row" > <!–- สร้างแถวที่ 2 --> < div class = "col-sm-12" > <!–- สร้างคอลัม 12 --> Banner </ div > <!–- จบ col-sm-12 --> </ div > <!–- จบแถวที่ 2 --> < div class = "row" > <!–- สร้างแถวที่ 3 --> < 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 -->

51.Typography . Management text style. Headings Body copy Inline text elements Alignment classes Transformation classes Abbreviations Addresses Blockquotes Lists

52.Table. Management table style. Basic table

53.Table. Management table style. Striped rows Use .table-striped to add zebra-striping to any table row.

54.Table. Management table style. Bordered table Add .table-bordered for borders on all sides of the table and cells.

55.Table. Management table style. Hover row Add .table-hover to enable a hover state on table rows.

56.Table. Management table style. Condensed table Add .table-condensed to make tables more compact by cutting cell padding in half.

57.Table. Management table style. Contextual classes Use contextual classes ( . active . success . info . warning .danger ) to color table rows or individual cells.

58.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).

59.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

60.Forms. Management form layout and style. Inline form Add .form-inline to your form (which doesnt have to be a

61.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 doesnt have to be a

62.Buttons. Options Use any of the available button classes to quickly create a styled button.

63.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.

64.Helper classes. Contextual colors Convey meaning through color with a handful of emphasis utility classes.

65.Helper classes. Contextual backgrounds Easily set the background of an element to any contextual class.

66.Responsive utilities. Available classes Use a single or combination of the available classes for toggling content across viewport breakpoints.

67.Responsive utilities. Print classes Similar to the regular responsive classes, use these for toggling content for print.

68.Components

69.Glyphicons . Available glyphs Includes over 250 glyphs in font format from the Glyphicon Halflings set.

70.Dropdowns. Alignment Headers Divider Disabled menu items

71.Button groups.

72.Button dropdowns.

73.Input groups.

74.Navs . Tabs Pills

75.Navbar .

76.Breadcrumbs.

77.Pagination.

78.Labels.

79.Badges.

80.Jumbotron .

81.Page header.

82.Thumbnails.

83.Alerts.

84.Progress bars.

85.Media object.

86.List group.

87.Panels.

88.Responsive embed.

89.Wells.

90.Javascript

91.Modals.

92.Modals.

93.Dropdowns.

94.ScrollSpy .

95.ScrollSpy .

96.Togglable tabs.

97.Tooltips.

98.Popovers.

99.Alert messages.

100.Buttons.

101.Buttons.

102.Collapse.

103.Carousel.

104.Questions ?

105.Thank you.

user picture
  • 献良
  • 非著名互联网公司工程师

相关Slides