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

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 Can I use?

http://caniuse.com/ Which browsers support which parts of the HTML, CSS and JavaScript specifications.

3.7 Caching

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

https://httpd.apache.org/docs/current/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.

5. Specifications

https://www.w3.org/TR/CSS/#css CSS specifications.

http://www.w3.org/TR/WCAG10/ Web Content Accessibility Guidelines 1.0

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-version6.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 readme file is  included, and you are welcome to post questions and report bugs here on KTH Social.
  • Here is a video tutorial explaining the framework, id1354-fw-tutorial.ogv
  • Here is the program written in the video above, id1354-fw-example.zip

7. Programs

7.1 Web Servers

7.2 IDEs

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 Firefox Developer Tools

Firefox Developer Tools Very useful, for example for writing CSS and for inspecting HTTP requests/responses.

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://browsershots.org/ http://turbo.net These sites can be used to test your application in different browsers.

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.

9. Images and Icons

Some sites with free images and icons.

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

10.1.4 Seminar Four Versions

  • chat-jquery-ajax-mvc-php-version2.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-version2.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. This program has a bug, a deleted entry disappears only in the browser from which it is deleted. To fix this, clicking the Load Entries button should make the client load not only new entries, but also which entries are deleted.
  • chat-jquery-ko-comet-id1354fw-version4.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. This program has a bug, a deleted entry disappears only in the browser from which it is deleted. To fix this, the long polling request should make the client load not only new entries, but also which entries are deleted.

10.2 Database Access

id1354-php-db-version2.zip A very small program that reads and updates a person database. The program assumes there is already a database called persons.

Feedback Nyheter