Visa version
Visa
< föregående
|
nästa >
Jämför
< föregående
|
nästa >
Resources
Lots of resources related to internet applications can be found on the internet. This is a collection of some useful resources.
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.
Validators
W3C HTML Validator
http://validator.w3.org/ Check that your HTML follows the specification.
W3C CSS Validator
http://jigsaw.w3.org/css-validator/ Check that your CSS follows the specification.
XML Validator
http://xmlvalidation.com/index.php Checks that an XML document is well-formed and conformes to a schema.
Tutorials
There is a lot of online instruction on the different languages covered in this course. Some useful sites are listed here.
W3Schools
http://www.w3schools.com/ Simple tutorials on all languages covered in the course.
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.
PHP Manual at php.net
http://www.php.net/manual/en/ Much more complete than the tutorial at W3Schools.
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
Responsive Web Design
There are many sites with CSS files for responsive design. The chat and cache simulator applications use this, http://www.responsivegridsystem.com/
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 the responsive web design described above, http://www.positioniseverything.net/easyclearing.html
- A simpler way, http://learnlayout.com/clearfix.html
Can I use...
http://caniuse.com/ Which browsers support which parts of the HTML, CSS and JavaScript specicifiactions.
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.
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
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
Frameworks and APIs
jQuery
http://jquery.com/ JavaScript API that provides a simpler syntax than plain JavaScript for reading and manipulating HTML elements.
Knockout
http://knockoutjs.com/ JavaScript framework that manages model-view separation using the MVVM architectural pattern. Such a framewortk is required by pages that do not reload HTML with hardcoded values but instead update values in the current page.
Flight
http://flightphp.com/ Very small PHP framework that manages some of the tasks common for web projects, such as routing, caching and composite views. Flight also to some extent helps give the application a MVC structure.
Programs
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.
NetBeans
https://netbeans.org/downloads/ NetBeans is an IDE that can be used for web development. Download the All version.
Brackets
http://brackets.io Brackets integrates many popular services, like validation and live preview, with the editor.
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.
Firebug
https://addons.mozilla.org/en-US/firefox/addon/firebug/ Firefox Plug-in providing lots of support for HTML, CSS and JavaScript development.
jsFiddle
http://jsfiddle.net/ Online editor where you can test HTML, CSS and JavaScript.
JSLint
http://jslint.com/ Online tool for testing JavaScript code quality.
Evaluate HTTP Response Headers
http://redbot.org/ Evaluates HTTP response headers for servers with a public IP address.
ApiGen
http://apigen.org/ A tool to generate code documentation for PHP (like Javadoc for Java)
Designs
Test the Application on Different Browsers
https://modern.ie/ This site test runs your application in several different browsers and shows screen shots of the results.
Responsive Web Design
There are many sites with CSS files for responsive design. The chat and cache simulator applications use this, http://www.responsivegridsystem.com/
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.
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/
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
Sample Programs
All zip files below contain a NetBeans project.
Chat
The following files are different versions of a simple chat application.
- chat-nojs-noserver.zip The chat application with only HTML and CSS.
- chat-jquery-knockout-noserver.zip The chat application with HTML, CSS and Javascript. Both jQuery and Knockout frameworks are used.
- chat-nojs-php-reload-mvc.zip The chat application with HTML/CSS and a PHP server. There is no server-side framework. Also, there is no viewmodel, the only way to change the view is to reload the entire page.
- chat-nojs-php-reload-flight.zip The chat application with HTML/CSS and a PHP server using the Flight framework. There is no viewmodel, the only way to change the view is to reload the entire page.
- chat-jquery-knockout-ajax-mvc.zip The chat application with HTML/CSS and a PHP server. There is no server-side framework. The viewmodel is updated using AJAX, when a button is clicked.
- chat-jquery-knockout-ajax-flight.zip The same as above, but using the flight PHP framework.
- chat-jquery-knockout-comet-mvc.zip The chat application with HTML/CSS and a PHP server. There is no server-side framework. The viewmodel is constantly updated using AJAX.
Cache Simulator
csim-jquery-nophpfw.zip
This is a web-based implementation of the cache simulator used in the Object-Oriented Design course in spring 2014. It is provided here to give more examples of JavaScript code, since there quite little JavaScript in the chat application. The JavaScript file is resources/csim.js. Note that this cache simulator reloads the entire HTML body on each request, and has no viewmodel. Therefore the state (set mapping) is lost when an instruction is simulated. This must of course be changed in a future version.
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
Teaching Assistants
Questions regarding seminar tasks can be posted on KTH Social or emailed to teaching assistants:
- Daniel Svensson, dsvenss@kth.se
- Johan Andersson, johand4@kth.se
- Robin Andersson, robin2@kth.se