1 / 23

Web Development Fundamentals

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.

banyan
Download Presentation

Web Development Fundamentals

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Development Fundamentals The WEB, Transfer Protocols, Tools Ivan Zhekov Telerik Software Academy http://academy.telerik.com Front end developer http://joneff.info

  2. Table of Contents • Web and HTTP • Separation of Concerns • Development Tools • Editors • Plugins • Online Tools

  3. Web and HTTP HTTP, HTTPS, etc…

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

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

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

  7. Separation of Concerns

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

  9. Development Tools Editors, Plugins and Tools

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

  11. Tools and Plugin • HTTP loggers • Fiddler • Wireshark • Browser tools • Firebug for Firefox • Web Inspector for Chrome / Safari • F12 for IE • Dragonfly for Opera

  12. Browser tools (2) • Web Developer (Firefox / Chrome) • Firebug addons • ScratchPad (FireFox) • ScreenCapture • Bookmarklets • ColorPicker • AdBlock / FlashBlocker • Measure tools

  13. Snippets • Desktop snippet tools • Snipply – built in air, cross platform • Online tools • http://pastie.org/ -- simple • https://gist.github.com/ -- more advanced

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

  15. JSBin • 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

  16. JSBin

  17. JSFiddle • 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

  18. JSFiddle

  19. JSPerf • 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

  20. JSPerf

  21. Cloud9 • 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

  22. Cloud9

  23. Web Development Fundamentals academy.telerik.com

More Related