introduction to internet applications - internet ...introduction to internet tools applications...
TRANSCRIPT
Introduction
DistributedArchitectures
User InterfaceDesign
ToolsIntroduction to InternetApplications
Internet Applications, ID1354
1 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Contents
Distributed Architectures
User Interface Design
Tools
2 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Section
Distributed Architectures
User Interface Design
Tools
3 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Local Application
I We are familiar with anarchitecture where the entireapplication resides on the samecomputer.
4 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Introducing a Server
I Now, the application willbe split on two tiers(computers).
I A client that has theview and a server thathas controller andmodel.
I The view is displayed ina web browser.
This architecture is not good, we also needlayers for communication.
5 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Introducing a Server
I Now, the application willbe split on two tiers(computers).
I A client that has theview and a server thathas controller andmodel.
I The view is displayed ina web browser.
This architecture is not good, we also needlayers for communication.
5 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Introducing a Server
I Now, the application willbe split on two tiers(computers).
I A client that has theview and a server thathas controller andmodel.
I The view is displayed ina web browser.
This architecture is not good, we also needlayers for communication.
5 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Introducing a Server
I Now, the application willbe split on two tiers(computers).
I A client that has theview and a server thathas controller andmodel.
I The view is displayed ina web browser.
This architecture is not good, we also needlayers for communication.
5 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Server-Side CommunicationI First, we add a server layer,
normally called view (a bitconfusing).
I However, the server sideview layer performs taskstypical of a view:
I Creates views (HTML),which are sent to the client.
I Interprets user gestures, aclick in a web page creates arequest to the server.
It might seem that we need yet a layer, fornetwork handling. There is such a layer, but it isin the web server. We don’t write it ourselves.
6 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Server-Side CommunicationI First, we add a server layer,
normally called view (a bitconfusing).
I However, the server sideview layer performs taskstypical of a view:
I Creates views (HTML),which are sent to the client.
I Interprets user gestures, aclick in a web page creates arequest to the server.
It might seem that we need yet a layer, fornetwork handling. There is such a layer, but it isin the web server. We don’t write it ourselves.
6 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Server-Side CommunicationI First, we add a server layer,
normally called view (a bitconfusing).
I However, the server sideview layer performs taskstypical of a view:
I Creates views (HTML),which are sent to the client.
I Interprets user gestures, aclick in a web page creates arequest to the server.
It might seem that we need yet a layer, fornetwork handling. There is such a layer, but it isin the web server. We don’t write it ourselves.
6 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Server-Side CommunicationI First, we add a server layer,
normally called view (a bitconfusing).
I However, the server sideview layer performs taskstypical of a view:
I Creates views (HTML),which are sent to the client.
I Interprets user gestures, aclick in a web page creates arequest to the server.
It might seem that we need yet a layer, fornetwork handling. There is such a layer, but it isin the web server. We don’t write it ourselves.
6 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Server-Side CommunicationI First, we add a server layer,
normally called view (a bitconfusing).
I However, the server sideview layer performs taskstypical of a view:
I Creates views (HTML),which are sent to the client.
I Interprets user gestures, aclick in a web page creates arequest to the server.
It might seem that we need yet a layer, fornetwork handling. There is such a layer, but it isin the web server. We don’t write it ourselves.
6 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Client-Side Communication
I Next, we add a clientlayer for communication,the net layer.
I Actually, the browserhandles most of thecommunication.
I The small network codewritten by us is normallyconsidered part of theclient-side view, the netlayer is omitted.
I This is a traditional web application.
7 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Client-Side Communication
I Next, we add a clientlayer for communication,the net layer.
I Actually, the browserhandles most of thecommunication.
I The small network codewritten by us is normallyconsidered part of theclient-side view, the netlayer is omitted.
I This is a traditional web application.
7 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Client-Side Communication
I Next, we add a clientlayer for communication,the net layer.
I Actually, the browserhandles most of thecommunication.
I The small network codewritten by us is normallyconsidered part of theclient-side view, the netlayer is omitted.
I This is a traditional web application.
7 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
The MVVM PatternI The trend is that data is
stored also on the client,therefore we get aclient-side model.
I This reduces the networkcommunication, since wedo not need to resendthe entire view each timethe user does something.
I Thereby, the applicationbecomes faster.
I This is referred to as the MVVM,model-view-viewmodel pattern.
8 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
The MVVM PatternI The trend is that data is
stored also on the client,therefore we get aclient-side model.
I This reduces the networkcommunication, since wedo not need to resendthe entire view each timethe user does something.
I Thereby, the applicationbecomes faster.
I This is referred to as the MVVM,model-view-viewmodel pattern.
8 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
The MVVM PatternI The trend is that data is
stored also on the client,therefore we get aclient-side model.
I This reduces the networkcommunication, since wedo not need to resendthe entire view each timethe user does something.
I Thereby, the applicationbecomes faster.
I This is referred to as the MVVM,model-view-viewmodel pattern.
8 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
The MVVM PatternI The trend is that data is
stored also on the client,therefore we get aclient-side model.
I This reduces the networkcommunication, since wedo not need to resendthe entire view each timethe user does something.
I Thereby, the applicationbecomes faster.
I This is referred to as the MVVM,model-view-viewmodel pattern.
8 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Programming Languages
I This is the architecturewe will normally useduring the course.
I The view is programmedin HTML and CSS, clientside behavior isprogrammed inJavaScript and the entireserver side code iswritten in PHP.
9 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Programming Languages
I This is the architecturewe will normally useduring the course.
I The view is programmedin HTML and CSS, clientside behavior isprogrammed inJavaScript and the entireserver side code iswritten in PHP.
9 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Three-Tier Architecture
I Of course, we also needto store data. That isdone in the data layer,which is often adatabase.
I We also introduce theintegration layer, tohandle the databasecalls.
10 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Three-Tier Architecture
I Of course, we also needto store data. That isdone in the data layer,which is often adatabase.
I We also introduce theintegration layer, tohandle the databasecalls.
10 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Three-Tier Architecture (Cont’d)
I In a bigger application, we would most likelyplace the database in a separate node.
I This is called three-tier architecture and is,since long time, the dominating architecturefor web applications.
11 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Three-Tier Architecture (Cont’d)
I In a bigger application, we would most likelyplace the database in a separate node.
I This is called three-tier architecture and is,since long time, the dominating architecturefor web applications.
11 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Question 1
12 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Event-Driven Architecture
I In the latest year, there is a growing tendency tomove business logic to the client, perhapscompletely remove the server-side model.
I This is made possible with web sockets, whichenable full duplex browser-server communication.
I The motive is to reduce communication latency. Thebrowser informs the server about user actions, butdoes not wait for response before updating the view.
13 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Event-Driven Architecture
I In the latest year, there is a growing tendency tomove business logic to the client, perhapscompletely remove the server-side model.
I This is made possible with web sockets, whichenable full duplex browser-server communication.
I The motive is to reduce communication latency. Thebrowser informs the server about user actions, butdoes not wait for response before updating the view.
13 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Event-Driven Architecture
I In the latest year, there is a growing tendency tomove business logic to the client, perhapscompletely remove the server-side model.
I This is made possible with web sockets, whichenable full duplex browser-server communication.
I The motive is to reduce communication latency. Thebrowser informs the server about user actions, butdoes not wait for response before updating the view.
13 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Section
Distributed Architectures
User Interface Design
Tools
14 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Use UI Guidelines!I This is not a course in human-computer
interaction. Still, it is mandatory to considerbasic heuristics for user interface design.
I There are some short introductory texts onuser interface design available at NielsenNorman Group, such as:
I 10 Usability Heuristics for UI Design,http://www.nngroup.com/articles/ten-usability-heuristics/
I Top 10 Guidelines for Homepage Usability,http://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/
I Top 10 Mistakes in Web Design,http://www.nngroup.com/articles/top-10-mistakes-web-design/
15 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Use UI Guidelines!I This is not a course in human-computer
interaction. Still, it is mandatory to considerbasic heuristics for user interface design.
I There are some short introductory texts onuser interface design available at NielsenNorman Group, such as:
I 10 Usability Heuristics for UI Design,http://www.nngroup.com/articles/ten-usability-heuristics/
I Top 10 Guidelines for Homepage Usability,http://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/
I Top 10 Mistakes in Web Design,http://www.nngroup.com/articles/top-10-mistakes-web-design/
15 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Use UI Guidelines!I This is not a course in human-computer
interaction. Still, it is mandatory to considerbasic heuristics for user interface design.
I There are some short introductory texts onuser interface design available at NielsenNorman Group, such as:
I 10 Usability Heuristics for UI Design,http://www.nngroup.com/articles/ten-usability-heuristics/
I Top 10 Guidelines for Homepage Usability,http://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/
I Top 10 Mistakes in Web Design,http://www.nngroup.com/articles/top-10-mistakes-web-design/
15 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Use UI Guidelines!I This is not a course in human-computer
interaction. Still, it is mandatory to considerbasic heuristics for user interface design.
I There are some short introductory texts onuser interface design available at NielsenNorman Group, such as:
I 10 Usability Heuristics for UI Design,http://www.nngroup.com/articles/ten-usability-heuristics/
I Top 10 Guidelines for Homepage Usability,http://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/
I Top 10 Mistakes in Web Design,http://www.nngroup.com/articles/top-10-mistakes-web-design/
15 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Use UI Guidelines!I This is not a course in human-computer
interaction. Still, it is mandatory to considerbasic heuristics for user interface design.
I There are some short introductory texts onuser interface design available at NielsenNorman Group, such as:
I 10 Usability Heuristics for UI Design,http://www.nngroup.com/articles/ten-usability-heuristics/
I Top 10 Guidelines for Homepage Usability,http://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/
I Top 10 Mistakes in Web Design,http://www.nngroup.com/articles/top-10-mistakes-web-design/
15 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
1. Visibility of system statusJ. Nielsen’s 10 Usability Heuristics
I The system should always keep usersinformed about what is going on, throughappropriate feedback.
I The UI must change within one secondafter a user action, or the user might thinknothing happened.
I Good examples:
16 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
1. Visibility of system statusJ. Nielsen’s 10 Usability Heuristics
I The system should always keep usersinformed about what is going on, throughappropriate feedback.
I The UI must change within one secondafter a user action, or the user might thinknothing happened.
I Good examples:
16 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
1. Visibility of system statusJ. Nielsen’s 10 Usability Heuristics
I The system should always keep usersinformed about what is going on, throughappropriate feedback.
I The UI must change within one secondafter a user action, or the user might thinknothing happened.
I Good examples:
16 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
2. Match between system and thereal worldJ. Nielsen’s 10 Usability Heuristics
I Use words, phrases and concepts familiarto the user, rather than system-orientedterms. Follow real-world conventions,making information appear in a natural andlogical order.
I Good example (“How can we help you?”better than “FAQ”):
I Bad example (“Continue if enabled” issystem oriented language):
17 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
2. Match between system and thereal worldJ. Nielsen’s 10 Usability Heuristics
I Use words, phrases and concepts familiarto the user, rather than system-orientedterms. Follow real-world conventions,making information appear in a natural andlogical order.
I Good example (“How can we help you?”better than “FAQ”):
I Bad example (“Continue if enabled” issystem oriented language):
17 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
2. Match between system and thereal worldJ. Nielsen’s 10 Usability Heuristics
I Use words, phrases and concepts familiarto the user, rather than system-orientedterms. Follow real-world conventions,making information appear in a natural andlogical order.
I Good example (“How can we help you?”better than “FAQ”):
I Bad example (“Continue if enabled” issystem oriented language):
17 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
3. User control and freedomJ. Nielsen’s 10 Usability Heuristics
I We often do things by mistake, andtherefore need a clearly marked“emergency exit” to leave an unwantedstate without having to go through anextended dialogue. Support undo and redo.
I Good examples:
18 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
3. User control and freedomJ. Nielsen’s 10 Usability Heuristics
I We often do things by mistake, andtherefore need a clearly marked“emergency exit” to leave an unwantedstate without having to go through anextended dialogue. Support undo and redo.
I Good examples:
18 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
4. Consistency and standardsJ. Nielsen’s 10 Usability Heuristics
I Users should not have to wonder whetherdifferent words, situations, or actions meanthe same thing. Follow platformconventions.
I Good example (Sign in at top right, logowith link to index page at top left):
19 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
4. Consistency and standardsJ. Nielsen’s 10 Usability Heuristics
I Users should not have to wonder whetherdifferent words, situations, or actions meanthe same thing. Follow platformconventions.
I Good example (Sign in at top right, logowith link to index page at top left):
19 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
5. Error preventionJ. Nielsen’s 10 Usability Heuristics
I Create a careful design which preventsproblems from occurring. Either eliminateerror-prone conditions or check for themand present users with a confirmationoption before they commit to the action.
I Good example:
20 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
5. Error preventionJ. Nielsen’s 10 Usability Heuristics
I Create a careful design which preventsproblems from occurring. Either eliminateerror-prone conditions or check for themand present users with a confirmationoption before they commit to the action.
I Good example:
20 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
6. Recognition rather than recallJ. Nielsen’s 10 Usability Heuristics
I Minimize the user’s memory load by making objects,actions, and options visible. The user should nothave to remember information from one part of thedialogue to another. Instructions for use of thesystem should be visible or easily retrievablewhenever appropriate.
I Good example:
I Clear headline.
I No doubt where to clickto start the search.
21 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
6. Recognition rather than recallJ. Nielsen’s 10 Usability Heuristics
I Minimize the user’s memory load by making objects,actions, and options visible. The user should nothave to remember information from one part of thedialogue to another. Instructions for use of thesystem should be visible or easily retrievablewhenever appropriate.
I Good example:
I Clear headline.
I No doubt where to clickto start the search.
21 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
7. Flexibility and efficiency of useJ. Nielsen’s 10 Usability Heuristics
I Accelerators, unseen by the novice user,may often speed up the interaction for theexpert user.
I Allow the user to change the accelerators.
I Examples areI Saved searchesI Items you recently looked atI Save query for later
22 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
7. Flexibility and efficiency of useJ. Nielsen’s 10 Usability Heuristics
I Accelerators, unseen by the novice user,may often speed up the interaction for theexpert user.
I Allow the user to change the accelerators.I Examples are
I Saved searchesI Items you recently looked atI Save query for later
22 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
7. Flexibility and efficiency of useJ. Nielsen’s 10 Usability Heuristics
I Accelerators, unseen by the novice user,may often speed up the interaction for theexpert user.
I Allow the user to change the accelerators.I Examples are
I Saved searchesI Items you recently looked atI Save query for later
22 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
8. Aesthetic and minimalist designJ. Nielsen’s 10 Usability Heuristics
I Dialogues should not contain informationwhich is irrelevant or rarely needed. Everyextra unit of information in a dialoguecompetes with the relevant units ofinformation and diminishes their visibility.
I Bad example:
23 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
8. Aesthetic and minimalist designJ. Nielsen’s 10 Usability Heuristics
I Dialogues should not contain informationwhich is irrelevant or rarely needed. Everyextra unit of information in a dialoguecompetes with the relevant units ofinformation and diminishes their visibility.
I Bad example:
23 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
9. Help users recognize, diagnose,and recover from errorsJ. Nielsen’s 10 Usability Heuristics
I Error messages should be expressed in plainlanguage (no codes), precisely indicate the problem,and constructively suggest a solution.
I Do not tell the user unexpected exception oranything similar.
I Good examples:
24 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
9. Help users recognize, diagnose,and recover from errorsJ. Nielsen’s 10 Usability Heuristics
I Error messages should be expressed in plainlanguage (no codes), precisely indicate the problem,and constructively suggest a solution.
I Do not tell the user unexpected exception oranything similar.
I Good examples:
24 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
9. Help users recognize, diagnose,and recover from errorsJ. Nielsen’s 10 Usability Heuristics
I Error messages should be expressed in plainlanguage (no codes), precisely indicate the problem,and constructively suggest a solution.
I Do not tell the user unexpected exception oranything similar.
I Good examples:
24 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
10. Help and documentationJ. Nielsen’s 10 Usability Heuristics
I Even though it is better if the system can beused without documentation, it may benecessary to provide help anddocumentation. Any such informationshould be easy to search, focused on theuser’s task, list concrete steps to be carriedout, and not be too large.
I Good example:
25 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
10. Help and documentationJ. Nielsen’s 10 Usability Heuristics
I Even though it is better if the system can beused without documentation, it may benecessary to provide help anddocumentation. Any such informationshould be easy to search, focused on theuser’s task, list concrete steps to be carriedout, and not be too large.
I Good example:
25 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Question 2
26 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Section
Distributed Architectures
User Interface Design
Tools
27 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Web Development Tools
I There are many tools that facilitatesdeveloping web applications.
I Browser support varies between tools, mostexamples will be using Firefox.
I You are strongly advised to start usingsome of the following tools, they will helpyou a lot.
28 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Web Development Tools
I There are many tools that facilitatesdeveloping web applications.
I Browser support varies between tools, mostexamples will be using Firefox.
I You are strongly advised to start usingsome of the following tools, they will helpyou a lot.
28 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Web Development Tools
I There are many tools that facilitatesdeveloping web applications.
I Browser support varies between tools, mostexamples will be using Firefox.
I You are strongly advised to start usingsome of the following tools, they will helpyou a lot.
28 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Browser Web ConsoleI Most browsers have a
built-in console.
I The console logsinformation associatedwith the web page, forexample errors andwarnings related toJavaScript, CSS andnetwork requests.
I It enables you to runJavaScript expressionsin the web page.
I It also lets you choose elements from the web pageand have their HTML and CSS displayed.
29 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Browser Web ConsoleI Most browsers have a
built-in console.
I The console logsinformation associatedwith the web page, forexample errors andwarnings related toJavaScript, CSS andnetwork requests.
I It enables you to runJavaScript expressionsin the web page.
I It also lets you choose elements from the web pageand have their HTML and CSS displayed.
29 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Browser Web ConsoleI Most browsers have a
built-in console.
I The console logsinformation associatedwith the web page, forexample errors andwarnings related toJavaScript, CSS andnetwork requests.
I It enables you to runJavaScript expressionsin the web page.
I It also lets you choose elements from the web pageand have their HTML and CSS displayed.
29 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Browser Web ConsoleI Most browsers have a
built-in console.
I The console logsinformation associatedwith the web page, forexample errors andwarnings related toJavaScript, CSS andnetwork requests.
I It enables you to runJavaScript expressionsin the web page.
I It also lets you choose elements from the web pageand have their HTML and CSS displayed.
29 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Browser Web Console (Cont’d)
I The console is opened withCtrl-Shift-K in Firefox andCtrl-Shift-J in Chrome.
30 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Firebug
I Firebug is a powerful plug-in to Firefox.I In addition to console features, you can for
example debug JavaScript, mark HTMLelements, edit CSS and log network traffic.
I There are also many plug-ins to Firebug.I There is a cross-browser version of
Firebug, written in JavaScript, that offers asubset of the functionality for most otherbrowsers.
31 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Firebug
I Firebug is a powerful plug-in to Firefox.I In addition to console features, you can for
example debug JavaScript, mark HTMLelements, edit CSS and log network traffic.
I There are also many plug-ins to Firebug.
I There is a cross-browser version ofFirebug, written in JavaScript, that offers asubset of the functionality for most otherbrowsers.
31 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Firebug
I Firebug is a powerful plug-in to Firefox.I In addition to console features, you can for
example debug JavaScript, mark HTMLelements, edit CSS and log network traffic.
I There are also many plug-ins to Firebug.I There is a cross-browser version of
Firebug, written in JavaScript, that offers asubset of the functionality for most otherbrowsers. 31 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Firebug
I Firebug is a powerful plug-in to Firefox.I In addition to console features, you can for
example debug JavaScript, mark HTMLelements, edit CSS and log network traffic.
I There are also many plug-ins to Firebug.I There is a cross-browser version of
Firebug, written in JavaScript, that offers asubset of the functionality for most otherbrowsers. 31 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.
I See the area coveredby a chosen element.
I See the page indifferent screenresolutions.
I Edit cookies.I Validate HTML and
CSS.
I Web Developer has beenported to Chrome.
32 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.I See the area covered
by a chosen element.
I See the page indifferent screenresolutions.
I Edit cookies.I Validate HTML and
CSS.
I Web Developer has beenported to Chrome.
32 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.I See the area covered
by a chosen element.I See the page in
different screenresolutions.
I Edit cookies.I Validate HTML and
CSS.
I Web Developer has beenported to Chrome.
32 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.I See the area covered
by a chosen element.I See the page in
different screenresolutions.
I Edit cookies.
I Validate HTML andCSS.
I Web Developer has beenported to Chrome.
32 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.I See the area covered
by a chosen element.I See the page in
different screenresolutions.
I Edit cookies.I Validate HTML and
CSS.
I Web Developer has beenported to Chrome.
32 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.I See the area covered
by a chosen element.I See the page in
different screenresolutions.
I Edit cookies.I Validate HTML and
CSS.
I Web Developer has beenported to Chrome.
32 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.I See the area covered
by a chosen element.I See the page in
different screenresolutions.
I Edit cookies.I Validate HTML and
CSS.
I Web Developer has beenported to Chrome.
32 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Validators
I There are online validators for both HTMLand CSS. Links can be found on the courseweb site.
I Remember to always validate your HTMLand CSS code.
33 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
Validators
I There are online validators for both HTMLand CSS. Links can be found on the courseweb site.
I Remember to always validate your HTMLand CSS code.
33 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
NetBeans
I There are many different IDEs for webdevelopment, all have their pros and cons.
I NetBeans will be used for examples duringthe course. Make sure to download the Allversion, see image above.
I Most important is that you actually use anIDE, do not program in a text editor unlessyou are really sure it is what you prefer.
34 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
NetBeans
I There are many different IDEs for webdevelopment, all have their pros and cons.
I NetBeans will be used for examples duringthe course. Make sure to download the Allversion, see image above.
I Most important is that you actually use anIDE, do not program in a text editor unlessyou are really sure it is what you prefer. 34 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
NetBeans
I There are many different IDEs for webdevelopment, all have their pros and cons.
I NetBeans will be used for examples duringthe course. Make sure to download the Allversion, see image above.
I Most important is that you actually use anIDE, do not program in a text editor unlessyou are really sure it is what you prefer.
34 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
JSFiddle and JSLint
I JSFiddle is an online editor where you cantest HTML, CSS and JavaScript.
I JSLint is an online tool for testingJavaScript code quality.
35 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
JSFiddle and JSLint
I JSFiddle is an online editor where you cantest HTML, CSS and JavaScript.
I JSLint is an online tool for testingJavaScript code quality.
35 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
W3Schools Try It Yourself
I w3schools.com has excellent tutorialsfor all languages covered in the course.
I All examples are presented with an onlineeditor where you can experiment with yourcode.
36 / 36
Introduction
DistributedArchitectures
User InterfaceDesign
Tools
W3Schools Try It Yourself
I w3schools.com has excellent tutorialsfor all languages covered in the course.
I All examples are presented with an onlineeditor where you can experiment with yourcode.
36 / 36