Web Development Fundamentals

of 23

Please download to get full document.

View again

All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
23 pages
0 downs
Web Development Fundamentals. The WEB, Transfer Protocols, Tools. Ivan Zhekov. Telerik Software Academy. http://academy.telerik.com. Front end developer. http://joneff.info. Table of Contents. Web and HTTP Separation of Concerns Development Tools Editors Plugins Online Tools.
Web Development FundamentalsThe WEB, Transfer Protocols, ToolsIvan ZhekovTelerik Software Academyhttp://academy.telerik.comFront end developerhttp://joneff.infoTable of Contents
  • Web and HTTP
  • Separation of Concerns
  • Development Tools
  • Editors
  • Plugins
  • Online Tools
  • Web and HTTPHTTP, HTTPS, etc…The Web
  • The Web is just a set of resources
  • Called web resources
  • The resources can be images, plain text, HTML, media files, etc…
  • Those resources are accessible through an Unified Resource Identifier (URI)
  • http://google.com, http://telerik.com …
  • HTTP and HTTPS
  • Hypertext Transfer Protocol is a request-responseprotocol in the client-servercomputing model
  • A server provides resources such as HTML files and other content
  • A client submits an HTTP request message to the server
  • The server returns a response message to the client
  • The response contains completion status information about the request
  • Other protocols
  • HTTP is not the only protocol on the web
  • It’s just the most common one
  • SPDY is a new age protocol
  • HTTP is so 1999
  • Compression by design
  • Pipelines, multiplexing
  • Supported by Chrome, FireFox, Opera, Silk
  • HTTP2?
  • Separation of ConcernsSeparation of Concerns
  • SoC is a design principle to separate an application in modules (layers) by concrete functionality
  • Each module overlaps others as less as possible
  • Prevents repeated code and allowsextensibility
  • Example of SoC
  • Server module does the app business logic
  • HTML that does the content
  • CSS that renders the visualization
  • JavaScript to do the UI logic
  • Development ToolsEditors, Plugins and Tools JavaScript Editors
  • The usual suspects:
  • Notepad++
  • Eclipse
  • A few new additions for JS Development
  • Sublime Text
  • Visual Studio 2012
  • Way better than VS 2010 for web development
  • Tools and Plugin
  • HTTP loggers
  • Fiddler
  • Wireshark
  • Browser tools
  • Firebug for Firefox
  • Web Inspector for Chrome / Safari
  • F12 for IE
  • Dragonfly for Opera
  • Browser tools (2)
  • Web Developer (Firefox / Chrome)
  • Firebug addons
  • ScratchPad (FireFox)
  • ScreenCapture
  • Bookmarklets
  • ColorPicker
  • AdBlock / FlashBlocker
  • Measure tools
  • Snippets
  • Desktop snippet tools
  • Snipply – built in air, cross platform
  • Online tools
  • http://pastie.org/ -- simple
  • https://gist.github.com/ -- more advanced
  • Online tools
  • HTML, CSS, JS are the core languages of the web
  • Web Developers should not be confined to desktop spaces, single platform etc.
  • Online tools enable portability, collaboration, discoverability …
  • You just need a browserJSBin
  • JSBin (http://jsbin.com/)
  • JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.
  • Panels for code: HTML, CSS, JS
  • Output panel
  • Console
  • Collaboration
  • JSBinJSFiddle
  • JSFiddle (http://jsfiddle.net/ )
  • A playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog…
  • Panels for code: HTML, CSS, JS
  • Output panel
  • Collaboration
  • JSFiddleJSPerf
  • JSPerf (http://jsperf.com/)
  • jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
  • Test cases are written in the web and accessible in the web
  • Build once, test in all browsers
  • History enabled by default
  • JSPerfCloud9
  • Cloud9 IDE (http://c9.io)
  • Cloud9 IDE is an online development environment for Javascript and Node.js applications as well as HTML, CSS, PHP, Java, Ruby and 23 other languages.
  • Full-blown IDE – syntax highlight, debugging, deployment, source control …
  • Supports more than 20 languages
  • Integrates with 3rd party services
  • Cloud9Web Development Fundamentalsacademy.telerik.com
    Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks