Resources

Lots of resources related to internet applications can be found on the internet. This is a collection of some useful resources.

1. Style Sheets To have all browser's behave similarly, always use a reset style sheet to remove the browser's default styles. Here is a reset CSS, reset.css.

2. Validators 2.1 W3C HTML Validator http://validator.w3.org/ Check that your HTML follows the specification.

2.2 W3C CSS Validator http://jigsaw.w3.org/css-validator/ Check that your CSS follows the specification.

2.3 XML Validator http://xmlvalidation.com/index.php Checks that an XML document is well-formed and conforms to a schema.

3. Tutorials There is a lot of online instruction on the different languages covered in this course. Some useful sites are listed here.

3.1 W3Schools http://www.w3schools.com/ Simple tutorials on all languages covered in the course.

3.2 W3C http://www.w3.org/community/webed/wiki/Main_Page HTML, CSS and JavaScript resources from the W3C.

http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning explained in detail.

http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning explained in detail.

http://www.w3.org/wiki/Floats_and_clearing CSS float.

3.3 PHP Manual at php.net http://www.php.net/manual/en/ Much more complete than the tutorial at W3Schools.

3.4 Mozilla JavaScript Guides JavaScript reference, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

JavaScript guide, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

3.5 Responsive Web Design There are many sites with CSS files for responsive design. The chat application uses this, http://www.responsivegridsystem.com/

3.6 The Clearfix Hack The clearfix hack describes how to fix the layout when there is a sidebar, for example a menu, that is taller than the main content. Much is written about this, here are two pages to start with:

* One of the original pages, this method is used by the responsive web design described above, http://www.positioniseverything.net/easyclearing.html
* A simpler way, http://learnlayout.com/clearfix.html
3.7 Can I use? http://caniuse.com/ Which browsers support which parts of the HTML, CSS and JavaScript specifications.

3.8 Caching http://www.mnot.net/cache_docs/ A good overview of how to utilize caches.

https://httpd.apache.org/docs/2.2/mod/mod_expires.html How to configure Apache to set cache related HTTP headers.

4. Browser Usage Statistics It is good to know market shares of different browser versions when deciding which browser should be able to display your site. Be aware that such shares vary a lot depending on region and user category. Here are some sites for browser usage statistics.

* StatCounter, http://gs.statcounter.com/
* W3Schools, http://www.w3schools.com/browsers/browsers_stats.asp
5. Specifications http://www.w3.org/TR/CSS21/ CSS 2.1

http://www.w3.org/TR/selectors/ CSS3 selectors.

http://www.w3.org/TR/css3-color/ CSS3 colors.

http://www.w3.org/TR/css3-mediaqueries/ CSS3 media queries.

http://www.w3.org/Protocols/rfc2616/rfc2616.html HTTP 1.1

6. Frameworks and APIs 6.1 jQuery http://jquery.com/ JavaScript API that provides a simpler syntax than plain JavaScript for reading and manipulating HTML elements.

6.2 Knockout http://knockoutjs.com/ JavaScript framework that manages model-view separation using the MVVM architectural pattern. Such a framework is required by pages that do not reload HTML with hard-coded values but instead update values in the current page.

6.3 id1354-fw id1354-fw.zip Very small PHP framework that manages some tasks common for web projects, namely routing, class loading, HTTP parameters and sessions. The id1354-fw framework also helps give the application a MVC structure. Since the framework is developed for this course, there is not much use to google for help. Instead, a quite exhaustive readme file is included, and you are welcome to post questions and report bugs here on KTH Social.

7. Programs 7.1 Web Servers
* https://httpd.apache.org/ The Apache HTTP server is the most used web server. All examples will be given using this server.
* http://nginx.org/ The nginx server has gained a lot of popularity recently.
* http://www.easyphp.org/ EasyPHP provides an installation exe-file for Apache, PHP and MySQL under Windows.
7.2 IDEs
* https://netbeans.org/downloads/ NetBeans is an IDE that can be used for web development. Download the All version. All examples will be given using this IDE.
* http://brackets.io Brackets integrates many popular services, like validation and live preview.
* http://www.sublimetext.com/ Sublime Text is a sophisticated text editor, rather than an IDE for web projects.
7.3 Browser Plugins You need these! It is strongly recommended that you install these plugins, go through some online tutorials and play around a bit to familiarise yourself with them.

7.3.1 Web Developer https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Firefox Plug-in providing lots of support for HTML, CSS and JavaScript development.

7.3.2 Firebug http://getfirebug.com/ Firefox Plug-in providing lots of support for HTML, CSS and JavaScript development. There is a cross-browser version of Firebug, written in JavaScript, that offers a subset of the functionality for most other browsers

There are many online tutorials for Firebug, for example these:http://getfirebug.com/screencast.htmlLinks on this page, http://getfirebug.com/faq/

7.4 jsFiddle http://jsfiddle.net/ Online editor where you can test HTML, CSS and JavaScript.

7.5 JSLint http://jslint.com/ Online tool for testing JavaScript code quality.

7.6 Evaluate HTTP Response Headers http://redbot.org/ Evaluates HTTP response headers for servers with a public IP address.

7.7 ApiGen http://apigen.org/ A tool to generate code documentation for PHP (like Javadoc for Java)

8. Designs 8.1 Test the Application on Different Browsers http://dev.modern.ie/tools/screenshots/ This site test runs your application in several different browsers and shows screen shots of the results.

8.2 Responsive Web Design There are many sites with CSS files for responsive design. The chat application uses this, http://www.responsivegridsystem.com/

8.3 User Interface Guidelines http://www.nngroup.com/articles/ten-usability-heuristics/ Basic principles for interaction design. Also check http://www.nngroup.com/articles/top-10-mistakes-web-design/ and other lists related to user interface design that are linked from that page.

8.4 Design Templates Free design templates is a good source of inspiration even if you do not find any appropriate to use.

* Open Source Web Design, http://www.oswd.org/
* Open Web Design, http://www.openwebdesign.org/
9. Images and Icons Some sites with free images and icons.

* freeimages, http://www.freeimages.com/
* Public Domain Pictures, http://www.publicdomainpictures.net/
* Pixabay, http://pixabay.com/
* Free Icons Web, http://www.freeiconsweb.com/
* Free Icons Download, http://freeiconsdownload.com/index.html
10. Sample Programs All zip files below contain a NetBeans project.

10.1 Chat The following applications are different versions of a simple chat web site.

10.1.1 Seminar One Version chat-nojs-noserver.zip This application is completely static, it contains only a user interface.

10.1.2 Seminar Two Version chat-nojs-unstruct-php.zip This application has HTML/CSS user interface and PHP server. The server code is not object-oriented and does not follow MVC or any other architectural pattern. Apart from this, the code is well written.

10.1.3 Seminar Three Versions
* chat-nojs-mvc-php.zip This application has HTML/CSS user interface and PHP server. The server code is object-oriented and follows the MVC pattern.
* chat-nojs-id1354fw.zip This application has HTML/CSS user interface and PHP server. The server code uses the id1354-fw framework.
10.1.4 Seminar Four Versions
* chat-jquery-ajax-mvc-php.zip This application has HTML/CSS user interface, JavaScript client-side behaviour and PHP server. The server code follows the MVC pattern.
* chat-jquery-ko-ajax-id1354fw.zip This application has HTML/CSS user interface, JavaScript viewmodel implemented with the Knockout framework, and PHP server. The server code uses the id1354-fw framework.
* chat-jquery-ko-comet-id1354fw.zip This application has HTML/CSS user interface, JavaScript viewmodel implemented with the Knockout framework, and PHP server. The server code uses the id1354-fw framework. Long polling is used to make the view reflect the server's state.

10.2 Database Access php-db.zip A very small program to illustrate database access with PHP. The program uses the table Equipment in the cars database, which is specified in the lecture notes for lecture 11. Add a search criteria to the URL, e.g., http://localhost/php-db/index.php?criteria=speed