Web Projects: From Theory To Practice

3,817
-1

Published on

There's always a gap between theoretical knowledge and practice. Particularly, how to start you first web project when you are familiar with HTML, JS, and CSS. This presentation covers such aspects as project functionality, modeling, file organization, building initial layout with HTML, insights of CSS, and jQuery.

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,817
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
64
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Web Projects: From Theory To Practice

  1. FROM THEORYTO PRACTICEunspoken truth of starting web projectbrought to youby Sergey Bolshchikov
  2. WHATS YOUR NAME, U SAID?Front end Developer @ New ProImageCo-organizer @ Ember-IL MeetupGraduate Student @ Technion, IM&EWeb: http://bolshchikov.netBlog: http://blog.bolshchikov.netGithub: https://github.com/bolshchikov
  3. OUTLINE1. Understand the destiny2. Organize your life3. Choose your comrades4. Lay out your way5. Add the make up6. Bring some action7. Coding
  4. UNDERSTANDING THE DESTINY
  5. DESTINY
  6. DESTINY :: GOALThe goal should formulate the main purpose or idea of futureproject. It can be describe by one sentence or two sentences,e.g.“Create user-friendly web store forselling fruits and vegetables”
  7. DESTINY :: FUNCTIONALITY● Login● Display a list of available items with prices● Display detailed information per item● Be able to add the item to the basket● Calculate the overall sum● Send the order
  8. DESTINY :: STRUCTURE
  9. ORGANIZE YOUR LIFE
  10. ORGANIZATIONDivision by typeSeparation of concernsComplex
  11. HTML5BOILERPLATEProject started by Paul Irish (Google) for keepinbest techniques for web projecthttp://html5boilerplate.com/● Code structure● File template (html, css, js)● Comes with libraries: jQuery, Modernizr● and other
  12. CHOOSE YOUR COMRADES
  13. COMRADESHow? Checklist:○ Amount of watchers in Github (big)○ Amount of forks on Github (medium)○ Amount of issues on Github (small)○ Amount of results on Stackoverflow○ Amount of votes on Stackoverflow
  14. COMRADES :: DOMWhy? Cross browser API is not the sameWhat? Relieves you from pain developmentsWho? jQuery, Zepto, MooToolsSave yourself some timeDO NOT WRITE YOUR OWN
  15. COMRADES :: UI & WIDGETSWhat?● Splitter● Tree● Accordion● Context menu● Dropdown● Charts● Calendar● Grids● DialogsWho?● Twitter Bootstrap● jQueryUI● KendoUI● Wijmo Components● jqWidgets● Dojo
  16. COMRADES :: JS FRAMEWORKSWhy? JS mess, spaghetti codeWhat? Clean separation of concernsWho? EmberJS, Backbone, Angular, etc.How? Write test programs in each of themhttp://todomvc.com/
  17. LAYOUT YOUR WAY
  18. WRITING APPROACH
  19. LAYOUT :: LAYOUT 1 :: HTML<header></header><div id="main"></div><footer></footer>http://jsbin.com/anafap/9/edit
  20. LAYOUT :: LAYOUT 2 :: HTML<div id="left"></div><div id="center"></div><div id="right"></div>http://jsbin.com/asehas/7/edit
  21. LAYOUT :: LAYOUT 3 :: HTML<header></header><div id="container"><div id="left"></div><div id="right"></div></div><footer></footer>http://jsbin.com/uvafam/6/edit
  22. ADD THE MAKE UP
  23. CSSCSS is a super power
  24. CSS :: SELECTORSSelector Description Example*Matches any element.E Matches any E element (i.e., anelement of type E).aE F Matches any F element that is adescendant of an E element.div aE > F Matches any F element that is achild of an element E.div > aE:first-child Matches element E when E is thefirst child of its parent.li:first-childE:linkE:visitedMatches element E if E is the sourceanchor of a hyperlink of which thetarget is not yet visited (:link) oralready visited (:visited).a:linka:visited
  25. CSS :: SELECTORS (cont.)Selector Description ExampleE:activeE:hoverE:focusMatches E during certain useractions.a:activea:hovera:focusE + F Matches any F element immediatelypreceded by a sibling element E.div + divE[foo] Matches any E element with the"foo" attribute set (whatever thevalue).div[data-id]E[foo="warning"] Matches any E element whose "foo"attribute value is exactly equal to"warning".input[type=”text”]DIV.warning Language specific. (In HTML, thesame as DIV[class~="warning"].)div.navigationE#myid Matches any E element with ID equalto "myid".div#main
  26. CSS :: BOX MODEL
  27. CSS :: MORE● display: [none, block, inline, table, inline-block...],● position: [absolute, fixed, relative],● top: [number],● left: [number],● float: [left, right, none]
  28. LAYOUT :: LAYOUT 1 :: HTML + CSSHTML<header></header><div id="main"></div><footer></footer>CSSheader, footer {border: 1px solid red;height : 55px;background-color: grey;border-radius: 7px;}#main {border-radius: 7px;border: 1px solid red;background-color: grey;height: 90px;margin: 10px 0 10px 0;}http://jsbin.com/anafap/7/edit
  29. LAYOUT :: LAYOUT 2 :: HTML + CSSHTML<div id="left"></div><div id="center"></div><div id="right"></div>CSSdiv {background-color: grey;border-radius: 7px;border: 1px solid red;float: left;margin: 0 5px 0 5px;}#left, #right {width: 150px;height: 250px;}#center {width: 275px;height: 750px; }http://jsbin.com/asehas/6/edit
  30. LAYOUT :: LAYOUT 3 :: HTML + CSSHTML<header></header><div id="container"><div id="left"></div><div id="right"></div></div><footer></footer>CSS#left {width: 28%;background-color: grey;border: 1px solid red;border-radius: 7px;margin-right: 2%;float: left;}#right {width: 70%;background-color: grey;border: 1px solid red;border-radius: 7px;margin-left: 30%}http://jsbin.com/uvafam/6/edit
  31. TIME TO CODE
  32. JAVASCRIPT"JavaScript is the Assembly language of WEB"- Erik Meijer, Dutch computer scientist
  33. JQUERY :: SELECTORS$(selector).method()For example, $(‘#list’) will return the elements which has the attribute id=”list”.For more, see http://api.jquery.com/category/selectors/.
  34. JQUERY :: DOM MANIPULATIONS● $(selector).html()● $(selector).append(html)● $(selector).remove()● $(selector).attr(myAttr, value)● $(selector).removeAttr(myAttr)● $(selector).css(width, 40)● $(selector).addClass(my-class)● $(selector).removeClass(my-class)● $(selector).text()● $(selector).val()
  35. JQUERY :: AJAX$.ajax({url: ‘/api/posts’type: ‘POST’,data: {},success: function () {},error: function () {}});
  36. JQUERY :: EVENTS● $(selector).click(function () {})● $(selector).dblclick(function () {})● $(selector).mousedown(function () {})● $(selector).mouseup(function () {})● $(selector).mouseover(function () {})● $(selector).mouseenter(function () {})● $(selector).mouseleave(function () {})● $(selector).on(eventName,function () {})● $(selector).off(eventName,function () {})
  37. JAVASCRIPT :: GUIDELINESDo not populate global spaceUse namespaces: create one global variable, e.g. name of your app, and storeeverything there.window.YUI = {};YUI.version = ‘0.3’,YUI.start = function () {};
  38. JAVASCRIPT :: GUIDELINESWrite JavaScript only in js fileDo NOT write it in HTML:<a class=”add” onclick=”function () {}”>Add</a>Instead use jQuery and register the click handler:$(‘.add’).on(‘click’, function () {});
  39. JAVASCRIPT :: GUIDELINESWrite small functions
  40. JAVASCRIPT :: GUIDELINESWrite comments
  41. QUESTIONS?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×