• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Projects: From Theory To Practice
 

Web Projects: From Theory To Practice

on

  • 2,949 views

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

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.

Statistics

Views

Total Views
2,949
Views on SlideShare
2,926
Embed Views
23

Actions

Likes
10
Downloads
47
Comments
0

5 Embeds 23

https://twitter.com 8
http://www.redditmedia.com 7
http://localhost 4
http://hospitalityleaders.com 2
http://www.linkedin.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Projects: From Theory To Practice Web Projects: From Theory To Practice Presentation Transcript

    • FROM THEORYTO PRACTICEunspoken truth of starting web projectbrought to youby Sergey Bolshchikov
    • 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
    • OUTLINE1. Understand the destiny2. Organize your life3. Choose your comrades4. Lay out your way5. Add the make up6. Bring some action7. Coding
    • UNDERSTANDING THE DESTINY
    • DESTINY
    • 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”
    • 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
    • DESTINY :: STRUCTURE
    • ORGANIZE YOUR LIFE
    • ORGANIZATIONDivision by typeSeparation of concernsComplex
    • 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
    • CHOOSE YOUR COMRADES
    • 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
    • COMRADES :: DOMWhy? Cross browser API is not the sameWhat? Relieves you from pain developmentsWho? jQuery, Zepto, MooToolsSave yourself some timeDO NOT WRITE YOUR OWN
    • COMRADES :: UI & WIDGETSWhat?● Splitter● Tree● Accordion● Context menu● Dropdown● Charts● Calendar● Grids● DialogsWho?● Twitter Bootstrap● jQueryUI● KendoUI● Wijmo Components● jqWidgets● Dojo
    • 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/
    • LAYOUT YOUR WAY
    • WRITING APPROACH
    • LAYOUT :: LAYOUT 1 :: HTML<header></header><div id="main"></div><footer></footer>http://jsbin.com/anafap/9/edit
    • LAYOUT :: LAYOUT 2 :: HTML<div id="left"></div><div id="center"></div><div id="right"></div>http://jsbin.com/asehas/7/edit
    • 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
    • ADD THE MAKE UP
    • CSSCSS is a super power
    • 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
    • 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
    • CSS :: BOX MODEL
    • CSS :: MORE● display: [none, block, inline, table, inline-block...],● position: [absolute, fixed, relative],● top: [number],● left: [number],● float: [left, right, none]
    • 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
    • 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
    • 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
    • TIME TO CODE
    • JAVASCRIPT"JavaScript is the Assembly language of WEB"- Erik Meijer, Dutch computer scientist
    • 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/.
    • 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()
    • JQUERY :: AJAX$.ajax({url: ‘/api/posts’type: ‘POST’,data: {},success: function () {},error: function () {}});
    • 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 () {})
    • 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 () {};
    • 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 () {});
    • JAVASCRIPT :: GUIDELINESWrite small functions
    • JAVASCRIPT :: GUIDELINESWrite comments
    • QUESTIONS?