Web Front End - (HTML5, CSS3, JavaScript) ++

1,145 views

Published on

Web Front End - HTML5, CSS3, JavaScript, jQuery, Ajax, JSON, REST, AngularJS, Knockout, Backbone, Bootstrap, Foundation

Published in: Software, Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,145
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Attribute values may be case sensitive depending on server systems
    XHTML became a W3C Recommendation in Jan 2000
    XHTML – Tags and attributes need to be lowercase, Empty Tags must self close
  • Var sandwich = function(){};
    getAttribute(); getAttribute(); accessing attributes directly
    Changing styles – spl. Case for hyphen seperated styles
  • Create a sample with few paragraphs of text. The paragraphs are preceeded by a header and an elipsis link the clicking of the elipsis must show/hide the paragraph text.
  • Activity: Create a Style Switcher to change font size of a page based on the selection of 3 div elements
  • Activity: Create a plug`in $().shadow that applies a shadow to the selected elements
  • Web Front End - (HTML5, CSS3, JavaScript) ++

    1. 1. August 12, 2015 © Sreenath H B, 2014 Web Front End HTML5 CSS3 JavaScript Ajax jQuery Angular, Backbone, Knockout
    2. 2. Agenda  WWW Explained  HTML5  CSS3  Bootstrap  JavaScript  Ajax  JSON  jQuery, jQuery UI  Angular, Knockout, Backbone
    3. 3. WWW  Computer Networks  Network Addresses  Browsers and Web Servers  Hyper Text Transfer Protocol (HTTP)  Hyper Text Markup Language (HTML)  Web Applications
    4. 4. The Three Layers
    5. 5. HTML  Basic Structure  DTD  Elements, Tags, Nodes  Attributes, Properties, Values  Forms  GET, POST …
    6. 6. The Rules of HTML  HTML Attribute Values May Be Case Sensitive  HTML Is Sensitive to a Single White Space Character  HTML Follows a Content Model  Elements Should Have Close Tags Unless Empty  Unused Elements May Minimize  Elements Should Nest In Correct Order  Attribute Values Should Be Quoted  Browsers Ignore Unknown Attributes and Elements
    7. 7. Core Elements & Attributes  Headings  ID, name, class, title, alt  BR, HR,  P, SPAN, DIV  Blockquote, Pre  Lists – OL, UL
    8. 8. HTML Forms  Input  Text  Password  Hidden  Submit  Button  Checkbox  Radio  Reset  File  Image  Select  Textarea
    9. 9. HTML5  New Input Types  Color, Date, Datetime, Email, Month, Number, Range, Search, Tel, Url, Week  New Attributes  autocomplete, autofocus, autosave, inputmode, list, max, min, multiple, pattern, placeholder, readonly, required, step  New Semantic Elements  section, nav, article, aside, hgroup, header, footer, time, mark, main, data, math, datalist, progress, meter, menu  Canvas, SVG  Video, Audio  Geolocation API, Local Storage API & Offline Apps  Full Screen, Vibration, Media, Web Sockets API  http://diveintohtml5.info/
    10. 10. CSS  Selection  Class, ID, Element  Ancestor Descendent  Parent > Child  Inheritance, Cascade & !important  Ems, pixels and points  Box Model: Positioning & Display  Floats & Clearing  Backgrounds & Sprites  Border, Padding, Margin  Typeface  Pseudo Classes
    11. 11. CSS3  :before, :after  Multiple Backgrounds, Gradients, Border-Image  Transforms, Transitions, Animations  Box Shadow, Border Radius  Media Queries & Responsive CSS
    12. 12. Design Philosophies  Graceful Degradation  Progressive Enhancement  Feature Detection using Modernizr  Accessibility: http://diveintoaccessibility.info/  Section 508, WCAG
    13. 13. Bootstrap  http://getbootstrap.com/  HTML5 / CSS3 Standards Compliant Responsive Web Pages  CSS: <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.cs s">  JavaScript: <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">< /script>  Depends on jQuery
    14. 14. Bootstrap  Grids  row & 12 columns  col-lg-n, col-md-n, col-sm-n, col-xs-n  Navbars  Panels  Lists, Labels & Wells  Breadcrumbs, Pagination  Form Styling  Jumbotron  Alert, Progress Bars  Media  Carousel, Tabs, Collapse, Dropdown, Modal  Scorllspy, Popover, Tooltip, Affix
    15. 15. JavaScript  History: http://youtu.be/v2ifWcnQs6M (First 13.5 min only)  Where to add scripts?  How to debug JavaScript?  Waiting for the page to finish loading  Unobtrusive Programming  Selection of DOM Elements  You can change HTML using JavaScript  You can change CSS using JavaScript  Hello DHTML  You can traverse the DOM too!
    16. 16. JavaScript Data  Data Types – Number, String, Boolean  Date  Arrays, Associative Arrays  If Statement, Truthy & Falsy Values  Loops – While, Do-While, For, For-In  Functions  Scope of Variables  Objects & JSON  Regular Expressions  === & !==, !!  JavaScript Closures  Functions with arbitrary params
    17. 17. JavaScript Events  Events & Listeners  Event Object & Event Context  Event Cancellation  Event Bubbling & Capturing  Supporting older browsers.  Call & Apply
    18. 18. Ajax
    19. 19. OK, JavaScript Ajax
    20. 20. Ajax  XMLHttpRequest  Open(Type, Url)  Send(data)  readyState & readystatechange – 0,1,2,3,4  status - 200  responseXML and responseText  IE 5 & 6 – new ActiveXObject(“Microsoft.XMLHTTP”);  XMLHttpRequest object is non-reusable  XSS & CORS
    21. 21. jQuery  Its just JavaScript!  CDN, Minification, Local fallback  DOMReady vs Window Load  The jQuery Object  Looping with each();  this  Chaining  Accessing DOM Objects  Array Subscript – Unsafe  .get(n)  Making peace with other libraries – noConflict()  Caching for performance
    22. 22. Selectors – The Heart of jQuery  Element Selector: $(“element”)  ID Selector: $(“#id”)  Class Selector: $(“.classname”)  Ancestor Descendant: $(“E F”)  Parent Child: $(“E > F”)  Siblings – Adjacent & General  Adjacent Sibling : $(“E + F”)  General Siblings : $(“E ~ F”);  Multiple Selectors: $(“E, F, G”)
    23. 23. Effects & Animations  Hide, Show  fadeIn, fadeOut  Toggle  slideUp, slideDown  slideToggle  .animate()
    24. 24. Working with Forms  :text  :checkbox  :radio  :image  :submit  :reset  :password  :file  :input  :button  :enabled  :disabled  :checked  :selected
    25. 25. Selectors Contd.. :first-child, :last-child, :only-child :nth-child(n) $(“li:first-child”); $(“tr:last-child”); $(“img:only-child”); $(“tr:nth-child(2n)”); Attribute Selectors Has Attribute: $(“img[alt]”); Begins With: $(“a[href^=mailto:]”); Ends With: $(“a[href$=.pdf]”); Contains: $(“a[href*=microsoft]”); Equals: $(“:checkbox[checked=true]”)  :not(s), :empty, :eq(n), :contains(s)  :even, :odd
    26. 26. DOM Traversal  .filter()  .siblings()  .parent(), .children(), .parents()  .next(), .nextAll(), .prev(), .prevAll(), .andSelf()  .find() Manipulating Styles • .addClass() • .removeClass() • .css(“height”, “35px”)
    27. 27. Events  Bubbling using Live, Die & Delegate and On  Bind, Once  Shorthand Events  Passing additional parameters to event listeners  Compound Events  Toggle, Hover
    28. 28. DOM Manipulation  .text()  .html()  .val()  .append(), prepend()  .remove()  .empty()  .attr(), .removeAttr()  addClass(), removeClass()  Creating DOM Nodes  insertAfter, after, insertBefore, before  prependTo, appendTo  .wrap()
    29. 29. jQuery AJAX  .load(“a.html”)  $.getJSON(“b.json”);  $.get(“c.xml”);  $.post(“d.php”);  $.ajax({ url:””, type:”GET”, dataType: “html”, success: function(data){ }, error: function(xhr){ } })
    30. 30. Ajax Contd..  Calling a 3rd Party REST API / Web Service using jQuery Ajax (http://openweathermap.org/API)  JSONP & XSS  JSON to HTML using a for-in loop
    31. 31. Authoring Plugins (function($){ $.fn.myPlugin = function(options){ var defaults = { }; options = $.extend(defaults, options); return this.each(function(){ //My Code for selected elements }); } })(jQuery); //Calling $(“selector”).myPlugin({options})
    32. 32. AngularJS  MV* Design Patterns Overview  AngularJS Intro
    33. 33. Other Libraries  Backbone  Knockout  Ember  Foundation
    34. 34. About Author  Sreenath H B is the Product Owner for eIntern LLC in the DC Metro Area.  He specializes in Cloud Infrastructure Management, Web Front End Development and programming using the Micrososft Tech Stack  He is an avid traveler and blogger.  Twitter: @ubshreenath  Website: http://sreenath.net

    ×