现代网页设计理念

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 >